@font-face {
    font-family: "Alegreya";
    src: url("../art/fonts/Alegreya.ttf") format("truetype");
    font-weight: 400 900;
    font-display: swap;
}

:root {
    --cream: #f6e6c0;
    --gold: #e2b64a;
    --cobalt: #1f3f8f;
    --navy: #14204f;
    --ink: #2a1d10;
    --ink-soft: #6b5332;
    --red: #bf2a26;
    --black: #1c1712;
    /* Everything at the table is a share of the screen's height, as in the game. */
    --h: 1dvh;
    --w: 100vw;
}

/* The table is a landscape thing, as in the game. On a phone held upright in a browser, which
   will not always turn with it, the table and the play online page are laid on their side
   instead, so turning the phone is all it takes. The sign-in stays upright: it is typed into. */
@media (orientation: portrait) {
    :root {
        --h: 1dvw;
        --w: 100dvh;
    }

    .table,
    .online {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

body {
    font-family: "Alegreya", Georgia, serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- a card ---- */

.card {
    position: relative;
    width: var(--wide, calc(16 * var(--h)));
    aspect-ratio: 5 / 7;
    border-radius: 6% / 4.3%;
    overflow: hidden;
    box-shadow: 0 calc(0.4 * var(--h)) calc(1 * var(--h)) rgba(0, 0, 0, 0.4);
    flex: none;
}

.card .face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.card .pip {
    position: absolute;
    height: 11.5%;
    transform: translate(-50%, -50%);
}

.card .pip.flipped {
    transform: translate(-50%, -50%) rotate(180deg);
}

.card .rank {
    position: absolute;
    left: 13%;
    top: 9.75%;
    width: 22%;
    height: 10.5%;
    transform: translate(-50%, -50%);
    background: var(--black);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.card .rank.red {
    background: var(--red);
}

.card .mark {
    position: absolute;
    left: 13%;
    top: 20%;
    height: 6%;
    transform: translate(-50%, -50%);
}

/* ---- the table ---- */

.table {
    position: fixed;
    inset: 0;
    background: url("../art/table/ground.jpg") center / cover;
    color: var(--ink);
    overflow: hidden;
}

/* The ring: two ends and the band run between them, placed by Ring.razor from what it measured
   off the end's own painting. It reaches from the chairs on one side to those on the other. */

.ring {
    --ring-high: calc(50 * var(--h));
    position: absolute;
    left: 50%;
    top: calc(43 * var(--h));
    width: max(calc(var(--w) - 52 * var(--h)), calc(70 * var(--h)));
    height: var(--ring-high);
    transform: translate(-50%, -50%);
}

.ring .end {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
}

.ring .end img {
    height: 100%;
    max-width: none;
    display: block;
}

.ring .end.right {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

/* As many whole repeats as fit, each drawn out a little to fill its arm's gap exactly. */
.ring .run {
    position: absolute;
    background-size: auto 100%;
    background-repeat: round no-repeat;
}

.ring .run.turned {
    transform: scaleY(-1);
}

.ring .whole {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ring .medal {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 22%;
    transform: translate(-50%, -50%);
}

.board {
    position: absolute;
    left: 50%;
    top: calc(1.5 * var(--h));
    height: calc(15 * var(--h));
    aspect-ratio: 1400 / 292;
    transform: translateX(-50%);
}

.board > img:first-child {
    width: 100%;
    height: 100%;
    display: block;
}

.board span {
    position: absolute;
    top: 52%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: calc(6 * var(--h));
    line-height: 1;
}

.board .rounds.us { left: 14.5%; }
.board .rounds.them { left: 85.5%; }

.board .tricks {
    width: 15.6%;
    height: 38%;
    display: grid;
    place-items: center;
    border-radius: calc(1.6 * var(--h));
    color: var(--cream);
    font-size: calc(4.6 * var(--h));
}

.board .tricks.us { left: 30.4%; }
.board .tricks.them { left: 69.6%; }
.board .tricks.red { background: var(--red); }
.board .tricks.black { background: var(--black); }

.board .jewel {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 78%;
    transform: translate(-50%, -50%);
}

/* A chair: the house frame, whoever sits in it, and their name on a plaque under it. */

.seat {
    position: absolute;
    width: calc(19 * var(--h));
}

.seat.place-3 { left: calc(2 * var(--h)); top: calc(1.5 * var(--h)); }
.seat.place-2 { right: calc(2 * var(--h)); top: calc(1.5 * var(--h)); }
.seat.place-1 { right: calc(2 * var(--h)); bottom: calc(1.5 * var(--h)); }
.seat.place-0 { left: calc(9 * var(--h)); bottom: calc(1.5 * var(--h)); width: calc(17 * var(--h)); }

.seat .portrait {
    position: relative;
    aspect-ratio: 273 / 362;
}

.seat .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.seat .letter {
    position: absolute;
    left: 18%;
    top: 26%;
    width: 64%;
    height: 62%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cream);
    color: var(--cobalt);
    font-weight: 800;
    font-size: calc(9 * var(--h));
}

/* A face sits behind its frame, and the frame's own window cuts it. */
.seat .worn {
    position: absolute;
    left: 11%;
    top: 21%;
    width: 78%;
    height: 73%;
    object-fit: cover;
    border-radius: 50%;
    background: var(--cream);
}

.seat .house-mark {
    position: absolute;
    left: 50%;
    top: 9.5%;
    height: 11%;
    transform: translate(-50%, -50%);
}

.seat .crown {
    position: absolute;
    left: 50%;
    top: 14%;
    width: 62%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 calc(0.3 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.5));
}

.seat .plaque {
    position: relative;
    margin: calc(-3.4 * var(--h)) -6% 0;
}

.seat .plaque img {
    width: 100%;
    display: block;
}

.seat .plaque span {
    position: absolute;
    left: 14%;
    right: 14%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
}

.seat .plaque .name { top: 22%; font-size: calc(2.9 * var(--h)); font-weight: 600; }
.seat .plaque .house { top: 60%; font-size: calc(1.9 * var(--h)); color: var(--ink-soft); }

.seat.turn .portrait {
    animation: breathe 1.2s ease-in-out infinite alternate;
}

@keyframes breathe {
    from { filter: drop-shadow(0 0 calc(0.8 * var(--h)) rgba(255, 214, 90, 0.7)); }
    to { filter: drop-shadow(0 0 calc(2.2 * var(--h)) rgba(255, 214, 90, 1)); }
}

/* The cards somebody else holds: backs in an arc beside their frame, towards the table. */

.fan {
    position: absolute;
    width: 0;
    height: 0;
}

.fan .card {
    --wide: calc(6 * var(--h));
    position: absolute;
    left: calc(-3 * var(--h));
    top: calc(-4.2 * var(--h));
    transform-origin: 50% 330%;
    transform: rotate(var(--turn));
    box-shadow: 0 0 calc(0.3 * var(--h)) rgba(0, 0, 0, 0.5);
}

.fan.place-3 { left: calc(31 * var(--h)); top: calc(21 * var(--h)); transform: rotate(100deg); }
.fan.place-2 { right: calc(31 * var(--h)); top: calc(21 * var(--h)); transform: rotate(-100deg); }
.fan.place-1 { right: calc(31 * var(--h)); bottom: calc(26 * var(--h)); transform: rotate(-80deg); }

/* The trick: a square of four, each card towards the corner it came from. */

.trick {
    position: absolute;
    left: 50%;
    top: calc(43 * var(--h));
    width: 0;
    height: 0;
}

.trick .card {
    --wide: calc(12.5 * var(--h));
    position: absolute;
    left: calc(-6.25 * var(--h));
    top: calc(-8.75 * var(--h));
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    animation: land 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.trick .place-0 { --x: calc(-8 * var(--h)); --y: calc(8 * var(--h)); --r: 16deg; --fx: calc(-0.38 * var(--w)); --fy: calc(42 * var(--h)); }
.trick .place-1 { --x: calc(8 * var(--h)); --y: calc(8 * var(--h)); --r: -18deg; --fx: calc(0.42 * var(--w)); --fy: calc(38 * var(--h)); }
.trick .place-2 { --x: calc(8 * var(--h)); --y: calc(-8 * var(--h)); --r: 22deg; --fx: calc(0.42 * var(--w)); --fy: calc(-36 * var(--h)); }
.trick .place-3 { --x: calc(-8 * var(--h)); --y: calc(-8 * var(--h)); --r: -20deg; --fx: calc(-0.42 * var(--w)); --fy: calc(-36 * var(--h)); }

@keyframes land {
    from { transform: translate(var(--fx), var(--fy)) rotate(0deg) scale(1.15); opacity: 0.6; }
}

.trick .winning {
    box-shadow: 0 0 calc(2.4 * var(--h)) calc(0.5 * var(--h)) rgba(255, 214, 90, 0.95);
}

/* My hand: a row that closes up as it has to, bowed a little, beside my frame. */

.hand {
    --card: calc(15.5 * var(--h));
    --room: calc(var(--w) - 58 * var(--h));
    --step: min(calc(10.6 * var(--h)), calc((var(--room) - var(--card)) / var(--cards)));
    position: absolute;
    left: calc(30 * var(--h) + (var(--room) - var(--cards) * var(--step) - var(--card)) / 2);
    bottom: calc(1 * var(--h));
    height: calc(24 * var(--h));
}

.hand .card {
    --wide: var(--card);
    --bow: calc(var(--lean) * var(--lean) * 0.22 * var(--h));
    position: absolute;
    left: calc(var(--at) * var(--step));
    bottom: 0;
    transform: translateY(var(--bow)) rotate(calc(var(--lean) * 1.6deg));
    transition: transform 0.12s ease-out, left 0.2s ease-out, filter 0.15s;
}

.hand .card.legal {
    cursor: pointer;
}

@media (hover: hover) {
    .hand .card.legal:hover {
        transform: translateY(calc(var(--bow) - 3 * var(--h))) rotate(calc(var(--lean) * 1.6deg));
    }
}

.hand .card.muted {
    filter: brightness(0.72) saturate(0.8);
}

/* What the table is waiting for, in a line under the ring. */

.status {
    position: absolute;
    left: 50%;
    top: calc(69.5 * var(--h));
    transform: translateX(-50%);
    padding: calc(0.5 * var(--h)) calc(2.6 * var(--h));
    border-radius: calc(3 * var(--h));
    background: rgba(246, 230, 192, 0.92);
    border: calc(0.25 * var(--h)) solid var(--gold);
    font-size: calc(2.8 * var(--h));
    white-space: nowrap;
    pointer-events: none;
}

.naming {
    position: absolute;
    left: 50%;
    top: calc(43 * var(--h));
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: calc(1.2 * var(--h));
    padding: calc(2 * var(--h)) calc(3 * var(--h));
    border-radius: calc(2.4 * var(--h));
    background: rgba(246, 230, 192, 0.96);
    border: calc(0.35 * var(--h)) solid var(--gold);
    box-shadow: 0 calc(1 * var(--h)) calc(3 * var(--h)) rgba(0, 0, 0, 0.35);
    font-size: calc(3.2 * var(--h));
}

.naming div {
    display: flex;
    gap: calc(1.6 * var(--h));
}

.naming button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.12s;
}

.naming button:hover { transform: scale(1.08); }
.naming img { height: calc(11 * var(--h)); display: block; }

.table .trouble,
.table .lost {
    position: absolute;
    left: 50%;
    top: calc(18.5 * var(--h));
    transform: translateX(-50%);
    padding: calc(0.6 * var(--h)) calc(2.4 * var(--h));
    border-radius: calc(1.2 * var(--h));
    background: var(--red);
    color: var(--cream);
    font-size: calc(2.4 * var(--h));
    white-space: nowrap;
}

.result {
    position: absolute;
    left: 50%;
    top: 46%;
    width: calc(74 * var(--h));
    aspect-ratio: 1200 / 648;
    transform: translate(-50%, -50%);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: calc(1 * var(--h));
    filter: drop-shadow(0 calc(1.5 * var(--h)) calc(4 * var(--h)) rgba(0, 0, 0, 0.5));
}

.result img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.result h2 { margin: 0; font-size: calc(6.5 * var(--h)); color: var(--cobalt); }
.result p { margin: 0; font-size: calc(3.6 * var(--h)); }

.result button,
.door button.main {
    padding: 0.5em 1.6em;
    border: 0;
    border-radius: 2em;
    background: var(--navy);
    color: var(--cream);
    font: inherit;
    font-size: calc(3 * var(--h));
    cursor: pointer;
}

/* ---- the door ---- */

.door {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    background: url("../art/door.jpg") center / cover;
    color: var(--ink);
    overflow: auto;
}

.door header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 4vw 0;
}

.door h1 {
    margin: 0;
    font-size: clamp(28px, 7vh, 64px);
    letter-spacing: 0.18em;
    color: var(--cream);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.door .purse {
    padding: 0.2em 1em;
    border-radius: 2em;
    background: var(--cream);
    border: 2px solid var(--gold);
    font-size: clamp(16px, 3.4vh, 28px);
    font-weight: 700;
    color: var(--navy);
}

.door .panel {
    align-self: center;
    width: min(92vw, 620px);
    box-sizing: border-box;
    margin: 2vh 0;
    padding: clamp(16px, 4vh, 36px) clamp(18px, 4vw, 44px);
    display: grid;
    justify-items: center;
    gap: clamp(8px, 1.8vh, 16px);
    border-radius: 14px;
    background: var(--cream);
    border: 3px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    text-align: center;
    font-size: clamp(15px, 2.8vh, 20px);
}

.door h2 { margin: 0; font-size: 1.6em; color: var(--navy); }
.door p { margin: 0; color: var(--ink-soft); }

.door form {
    display: grid;
    gap: 0.7em;
    width: min(100%, 360px);
}

.door input {
    padding: 0.55em 0.9em;
    border: 2px solid var(--gold);
    border-radius: 10px;
    background: #fffaf0;
    color: var(--ink);
    font: inherit;
    font-size: 1.1em;
    text-align: center;
    user-select: text;
    -webkit-user-select: text;
}

.door button { font: inherit; }
.door button.main { font-size: 1.1em; }
.door button:disabled { opacity: 0.45; cursor: default; }

.door button.plain {
    padding: 0.2em 0.6em;
    border: 0;
    background: none;
    color: var(--navy);
    text-decoration: underline;
    cursor: pointer;
}

.door .prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.7em;
    width: 100%;
}

.door .prices button {
    display: grid;
    gap: 0.1em;
    padding: 0.7em 0.4em;
    border: 2px solid var(--gold);
    border-radius: 12px;
    background: #fffaf0;
    color: var(--navy);
    cursor: pointer;
}

.door .prices strong { font-size: 1.5em; }
.door .prices small { color: var(--ink-soft); }

.door .chairs { display: flex; gap: 0.7em; }

.door .chairs span {
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: #fffaf0;
}

.door .chairs span.taken { background: var(--navy); }
.door .trouble { color: var(--red); font-weight: 600; }

.door footer {
    display: flex;
    gap: 1em;
    align-items: center;
    padding: 0 0 2vh;
    color: var(--cream);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.door footer .plain { color: var(--cream); }

/* ---- more of the table ---- */

/* The clock of the chair whose turn it is: a line round the window that runs out with the time,
   gold while there is plenty and red at the end. Begun from how much had already gone. */

.seat .clock {
    position: absolute;
    left: 11%;
    top: 21.5%;
    width: 78%;
    height: 72%;
    overflow: visible;
    animation: run-out linear forwards;
    stroke-dashoffset: 0;
    pointer-events: none;
}

.seat .clock ellipse {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-dasharray: 100;
    stroke-dashoffset: inherit;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

@keyframes run-out {
    0% { stroke-dashoffset: 0; color: #ffd65a; }
    70% { color: #ffd65a; }
    100% { stroke-dashoffset: 100; color: #e0352b; }
}

/* A round with no hokm says its name where the jewel would sit. */
.board .call {
    left: 50%;
    top: 50%;
    width: 17%;
    text-align: center;
    font-size: calc(2.7 * var(--h));
    line-height: 1;
    color: var(--navy);
}

.naming small { font-size: calc(2.2 * var(--h)); color: var(--ink-soft); }

.naming .calls button {
    padding: calc(0.6 * var(--h)) calc(2.2 * var(--h));
    border-radius: calc(3 * var(--h));
    background: var(--navy);
    color: var(--cream);
    font: inherit;
    font-size: calc(2.8 * var(--h));
}

/* The tricks a side has taken: one small card face down for each, every other one on its side,
   inside the ring's two lower corners, ours towards me and theirs towards the next chair. */

.pile {
    position: absolute;
    top: calc(55.5 * var(--h));
    width: 0;
    height: 0;
}

.pile.ours { left: calc(50% - 30 * var(--h)); }
.pile.theirs { left: calc(50% + 30 * var(--h)); }

.pile .card {
    --wide: calc(5.2 * var(--h));
    position: absolute;
    left: calc(-2.6 * var(--h) + var(--at) * 0.9 * var(--h));
    top: calc(-3.64 * var(--h) - var(--at) * 0.25 * var(--h));
    box-shadow: 0 calc(0.15 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.45);
}

.pile.theirs .card { left: calc(-2.6 * var(--h) - var(--at) * 0.9 * var(--h)); }
.pile .card.across { transform: rotate(90deg); }

/* A short game: how many rounds it is to, the number alone under the round setting. */
.board .game-to {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -35%);
    min-width: calc(4 * var(--h));
    border-radius: calc(2 * var(--h));
    background: #fffaf0;
    box-shadow: 0 0 0 calc(0.3 * var(--h)) var(--gold);
    color: var(--red);
    font-size: calc(3 * var(--h));
    line-height: calc(4 * var(--h));
    text-align: center;
}