/* app.css */
html, body {
    margin: 0;
    height: 100%;
    background: #10261d;
    color: #f3ead2;
    font-family: var(--face);
    /* No long-press sheet for a picture on a phone, and nothing selected by a drag: the page is a table, not a document. */
    -webkit-touch-callout: none;
}

/* A picture is looked at and never carried off: not dragged, not selected, not offered to be saved. */
img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: 0.6rem 1rem;
    background: #7a1f1f;
    color: #fff;
}

/* The wire page: a developer's window onto the lines, not a screen a player sees. */
.wire {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    gap: 8px;
    font: 13px/1.4 ui-monospace, Consolas, monospace;
}

.wire form {
    display: flex;
    gap: 8px;
}

.wire input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    background: #0b1a14;
    color: inherit;
    border: 1px solid #3c5a4b;
    border-radius: 4px;
    font: inherit;
}

.wire button {
    padding: 6px 14px;
    background: #c9a24a;
    color: #1b1408;
    border: 0;
    border-radius: 4px;
    font: inherit;
    cursor: var(--point);
}

.wire .state {
    color: #c9a24a;
}

.wire ol {
    flex: 1;
    margin: 0;
    padding: 8px;
    overflow: auto;
    list-style: none;
    background: #0b1a14;
    border: 1px solid #3c5a4b;
    border-radius: 4px;
}

.wire li {
    white-space: pre-wrap;
    word-break: break-all;
}

.wire li.said {
    color: #8fd0ff;
}

.wire li.note {
    color: #c9a24a;
}

/* play.css */
: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. In an upright window on a desk (a tall monitor,
   a narrow browser) it stays upright and is laid as a wide band across the middle, black above
   and below. */
@media (orientation: portrait) {
    :root {
        --h: calc(100vw * 9 / 1600);
        --w: 100vw;
    }

    .table,
    .online {
        width: 100vw;
        height: calc(100 * var(--h));
        transform: translateY(calc(50dvh - 50%));
        box-shadow: 0 0 0 100vmax #000;
    }
}

/* On a phone or tablet 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 it is all it takes. The
   sign-in stays upright: it is typed into. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    :root {
        --h: 1dvw;
        --w: 100dvh;
    }

    /* Weightier than the plain .table further down, whose inset: 0 otherwise wins and leaves
       left and right both set on a box wider than the screen: in a right-to-left page the right
       is kept, and the table lay off the screen's left edge. */
    html .table,
    html .online {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
        box-shadow: none;
    }
}

body {
    font-family: var(--face);
    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 mirror pack's second index: the same, turned about the card's middle (Tiles.DrawIndex, turned). */
.card .rank.turned { left: 87%; top: 90.25%; transform: translate(-50%, -50%) rotate(180deg); }
.card .mark.turned { left: 87%; top: 80%; transform: translate(-50%, -50%) rotate(180deg); }

/* ---- 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;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, given back by the margin so the line does not move. */
    padding-block: 0.25em;
    margin-top: -0.25em;
    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)); }
}

/* ---- a card in the air ----

   Every card that moves sits in a flier: the thing around it says where the card rests, and the
   flier is what motion.js flies there (translate, turn, size, the hop and the turning over). The
   back lies over the face, unseen, for the moment the card is turned in the air. */

.flier {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(var(--r, 0deg));
    transform-origin: 50% 50%;
    will-change: transform;
}

.flier > .card {
    --wide: 100%;
}

.card .back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

/* A limited back's copy number, cut into its two gold plates (BackPlates), and what moves on the
   backs that move (moving.js). Both lie over the painted back, in its own 600 by 840. */

.card .moving,
.card .plates {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.card .plates { container: plates / inline-size; }

.card .plates svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    direction: ltr;
    font-family: var(--face);
    font-weight: 800;
    fill: rgba(61, 38, 10, 0.88);
    text-anchor: middle;
    dominant-baseline: central;
}

/* The light caught on the far lip of the cut, a pixel below and to the right of it. */
.card .plates .pl-big { filter: drop-shadow(1px 1px 0 rgba(255, 230, 158, 0.7)); }
.card .plates .pl-small { display: none; }

/* Where the number would be set smaller than five pixels, the card is too small for "17/100" and
   its lip: it says "17" alone, filling the plate. Each design's plates are its own size. */
@container plates (width < 150px) { .card .pl-shamseh .pl-big { display: none; } .card .pl-shamseh .pl-small { display: block; } }
@container plates (width < 91px) { .card .pl-hourglass .pl-big { display: none; } .card .pl-hourglass .pl-small { display: block; } }
@container plates (width < 158px) { .card .pl-fanus .pl-big { display: none; } .card .pl-fanus .pl-small { display: block; } }
@container plates (width < 111px) { .card .pl-tavus .pl-big { display: none; } .card .pl-tavus .pl-small { display: block; } }
@container plates (width < 100px) { .card .pl-lotus .pl-big { display: none; } .card .pl-lotus .pl-small { display: block; } }

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

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

.fan .fanned {
    position: absolute;
    left: calc(-3 * var(--h));
    top: calc(-4.2 * var(--h));
    width: calc(6 * var(--h));
    aspect-ratio: 5 / 7;
    transform-origin: 50% 330%;
    transform: rotate(var(--turn));
    transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}

.fan .card {
    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 inside the ring, each card towards the corner it came from, and
   lying a little off its place and a little crooked, the way a thrown card does (the page works
   out where from the card and the chair). */

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

.trick .laid {
    position: absolute;
    left: calc(-6.25 * var(--h));
    top: calc(-8.75 * var(--h));
    width: calc(12.5 * var(--h));
    aspect-ratio: 5 / 7;
    transform: translate(var(--x), var(--y));
}

/* The one taking the trick as it stands is lit from the first card on; the one that takes it
   rises and glows the moment the last card is down (CardSlot.Leading, Won). */
.trick .laid.leading .card {
    box-shadow: 0 0 calc(1.9 * var(--h)) calc(0.3 * var(--h)) rgba(255, 214, 77, 0.8), inset 0 0 0 calc(0.3 * var(--h)) rgba(255, 230, 128, 0.9);
    transition: box-shadow 0.15s;
}

.trick .laid.won .card {
    box-shadow: 0 0 calc(2.5 * var(--h)) calc(0.5 * var(--h)) rgba(255, 214, 77, 0.9), inset 0 0 0 calc(0.35 * var(--h)) rgba(255, 230, 128, 1);
}

.trick .laid.won {
    z-index: 3;
}

.trick .laid.won .flier {
    animation: rise 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rise {
    from { transform: rotate(var(--r, 0deg)) scale(1); }
    to { transform: rotate(var(--r, 0deg)) scale(1.12); }
}

.trick .laid.swept {
    z-index: 4;
    pointer-events: none;
}

/* The flourishes of the trick (flourish.js): a layer beneath the cards and one over them, laid
   at the trick's origin, and inside each card a layer for what stays on its face, cut to the
   card's rounded edge so it goes with the card wherever it lies. */
.trick .flourish-under,
.trick .flourish-over {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.trick .flourish-under { z-index: 0; }
.trick .flourish-over { z-index: 5; }

.flourish-piece {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.flier .marks {
    position: absolute;
    inset: 0;
    border-radius: 6% / 4.3%;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

/* The seal of the family a card of my hand wears: matte gold wax under the index, completely still. */
.hand .seal {
    position: absolute;
    left: 4%;
    top: 24%;
    width: 22%;
    pointer-events: none;
    z-index: 3;
}

/* The pack in the middle of the ring, where the shuffle is played out and the cards come off. */

.pack {
    position: absolute;
    left: 50%;
    top: calc(43 * var(--h));
    width: 0;
    height: 0;
    pointer-events: none;
    transition: opacity 0.6s;
    z-index: 1;
}

.pack.gone {
    opacity: 0;
}

.pack-card {
    position: absolute;
    aspect-ratio: 5 / 7;
    border-radius: 6% / 4.3%;
    transform-origin: 50% 50%;
    will-change: transform;
    display: block;
}

/* What the other three still held when the round ended, turned up in a row before each chair. */

.left {
    --wide: calc(8 * var(--h));
    --step: min(calc(4.6 * var(--h)), calc(34 * var(--h) / max(var(--cards), 1)));
    position: absolute;
    width: 0;
    height: 0;
    z-index: 2;
}

.left .laid {
    position: absolute;
    left: calc(var(--at) * var(--step) - (var(--cards) - 1) * var(--step) / 2 - var(--wide) / 2);
    top: calc(-0.7 * var(--wide));
    width: var(--wide);
    aspect-ratio: 5 / 7;
}

.left.place-3 { left: calc(32 * var(--h)); top: calc(31 * var(--h)); }
.left.place-2 { left: calc(var(--w) - 32 * var(--h)); top: calc(31 * var(--h)); }
.left.place-1 { left: calc(var(--w) - 32 * var(--h)); top: calc(67 * var(--h)); }

/* My hand: a row that closes up as it has to, bowed a little, beside my frame. A card I may
   play stands a little up out of the row, as in the game, and rises under the pointer. */

.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 .held {
    --bow: calc(var(--lean) * var(--lean) * 0.22 * var(--h));
    --lift: 0px;
    position: absolute;
    left: calc(var(--at) * var(--step));
    bottom: 0;
    width: var(--card);
    aspect-ratio: 5 / 7;
    transform: translateY(calc(var(--bow) - var(--lift))) rotate(calc(var(--lean) * 1.6deg));
    transition: transform 0.16s cubic-bezier(0.33, 1, 0.68, 1), left 0.16s cubic-bezier(0.33, 1, 0.68, 1);
}

.hand .held.legal {
    --lift: calc(1.7 * var(--h));
    cursor: var(--point);
}

@media (hover: hover) {
    .hand .held.legal:hover {
        --lift: calc(3.1 * var(--h));
    }
}

.hand .held .card {
    transition: filter 0.15s;
}

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

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

/* "I am back", while the table plays my cards: over the turn's word, above my hand. */
.come-back {
    position: absolute;
    left: 50%;
    top: calc(61 * var(--h));
    z-index: 4;
    transform: translateX(-50%);
    padding: calc(0.8 * var(--h)) calc(3.4 * var(--h));
    border: calc(0.3 * var(--h)) solid var(--gold);
    border-radius: calc(4 * var(--h));
    background: rgba(20, 32, 79, 0.94);
    color: var(--cream);
    font: 700 calc(3.2 * var(--h)) var(--face);
    white-space: nowrap;
    cursor: var(--point);
    box-shadow: 0 calc(0.8 * var(--h)) calc(2 * var(--h)) rgba(0, 0, 0, 0.45);
}

.come-back:hover { filter: brightness(1.15); }

.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: var(--point);
    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: var(--point);
}

/* ---- 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);
}

/* As wide as the form and no wider, its padding inside that width: on a narrow phone the code's
   big figures left the plaque by its right edge (Mahdi, 2026-10-15). */
.door input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    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: var(--arrow); }

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

.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: var(--point);
}

.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;
}

/* On a phone the line steps instead of gliding: a stroke running out is painted again by the
   main thread on every frame, for the whole of every turn, and a hundred and twenty steps over a
   clock still read as one line going (2026-10-14). */
@media (hover: none) and (pointer: coarse) {
    .seat .clock { animation-timing-function: steps(120, end); }
}

@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, in a row round the ring from
   the end its keeper sits by, every other one on its side (piles.js lays each one where it lies
   and turns it). The layer is under the trick, so a pile carried over it goes under its cards. */

.piles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.pile-card {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pile-w, calc(8.6 * var(--h)));
    aspect-ratio: 5 / 7;
    transform-origin: 50% 50%;
    transition: transform 0.14s linear;
    will-change: transform;
}

.pile-card .card {
    --wide: 100%;
    box-shadow: 0 calc(0.15 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.45);
}

/* Whose pile is whose: a hairline round its card, red for the first hakem's side, black for the other. */
.pile-card.red .card { outline: calc(0.22 * var(--h)) solid var(--red); outline-offset: calc(-0.22 * var(--h)); }
.pile-card.black .card { outline: calc(0.22 * var(--h)) solid var(--black); outline-offset: calc(-0.22 * var(--h)); }

/* Mine to carry and to tap round; somebody else's on its way under their finger rides over the rest. */
.pile-card.mine { pointer-events: auto; cursor: var(--point); touch-action: none; }
.pile-card.carried { z-index: 2; transition-duration: 0.1s; }
.pile-card.carried-mine { z-index: 2; transition: none; cursor: var(--hold); }

/* The newest pile is unseen for the moment the swept trick takes to reach it. */
.pile-card.arriving { opacity: 0; }

/* My hand under my fingers (hand.js): a card carried follows the finger over the rest, and its
   place in the row moves at once while the others make room; a card tapped once stands higher,
   waiting for the second tap. */

.hand .held { touch-action: none; }

.hand .held.carried {
    z-index: 20;
    transition: none;
}

.hand .held.legal.lifted { --lift: calc(4.7 * var(--h)); }

/* The sort button's halo, a slow breath of gold while a press would move a card. */
.my-buttons button.sort.beat {
    animation: sort-breath 2.6s ease-in-out infinite;
}

@keyframes sort-breath {
    0%, 100% { filter: drop-shadow(0 0 calc(0.4 * var(--h)) rgba(255, 204, 77, 0.4)); }
    50% { filter: drop-shadow(0 0 calc(1.6 * var(--h)) rgba(255, 204, 77, 0.85)); }
}

/* The sort panel over my buttons: the suits' order and four switches, each a whole row. */

.sort-off {
    position: absolute;
    inset: 0;
    z-index: 11;
}

.sort-panel {
    position: absolute;
    left: calc(9 * var(--h));
    bottom: calc(14 * var(--h));
    z-index: 12;
    width: calc(74 * var(--h));
    box-sizing: border-box;
    display: grid;
    gap: calc(1.4 * var(--h));
    padding: calc(2.4 * var(--h)) calc(3.4 * var(--h)) calc(3 * var(--h));
    border-radius: calc(2 * var(--h));
    background: rgba(246, 230, 192, 0.98);
    border: calc(0.35 * var(--h)) solid var(--gold);
    box-shadow: 0 calc(0.8 * var(--h)) calc(2.4 * var(--h)) rgba(0, 0, 0, 0.45);
    text-align: center;
}

.sort-panel b { font-size: calc(4.3 * var(--h)); color: var(--ink); font-weight: 600; }
.sort-panel small { font-size: calc(2.4 * var(--h)); color: var(--ink-soft); margin-top: calc(-1 * var(--h)); }

.sort-panel .suits {
    display: flex;
    justify-content: center;
    gap: calc(2.5 * var(--h));
    margin: calc(0.6 * var(--h)) 0 calc(1.4 * var(--h));
}

.sort-panel .suits button {
    width: calc(9.9 * var(--h));
    height: calc(9.9 * var(--h));
    padding: calc(1 * var(--h));
    border: calc(0.25 * var(--h)) solid rgba(107, 83, 50, 0.3);
    border-radius: calc(1.8 * var(--h));
    background: #fffaf0;
    cursor: var(--point);
}

.sort-panel .suits button img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sort-panel .suits button.picked {
    border-color: #ffd64d;
    box-shadow: 0 0 0 calc(0.6 * var(--h)) rgba(255, 214, 77, 0.9);
}

.sort-panel .switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(1.6 * var(--h));
    height: calc(7.1 * var(--h));
    padding: 0 calc(1.8 * var(--h)) 0 calc(2.5 * var(--h));
    border: calc(0.25 * var(--h)) solid rgba(107, 83, 50, 0.3);
    border-radius: calc(3.6 * var(--h));
    background: rgba(255, 247, 230, 0.7);
    color: var(--ink-soft);
    font: inherit;
    font-size: calc(2.7 * var(--h));
    text-align: start;
    cursor: var(--point);
}

.sort-panel .switch.on {
    background: #fff0c2;
    border-color: rgba(226, 182, 74, 0.9);
    color: var(--ink);
}

/* The switch at the row's end: a gold track with the knob at its far end when it is on, a pale one with the knob at the near end when it is off. */
.sort-panel .switch i {
    position: relative;
    flex: none;
    width: calc(6.7 * var(--h));
    height: calc(3.55 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: rgba(107, 83, 50, 0.28);
    border: calc(0.2 * var(--h)) solid rgba(107, 83, 50, 0.45);
    box-sizing: border-box;
    transition: background 0.15s;
}

.sort-panel .switch i::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: calc(0.3 * var(--h));
    width: calc(2.6 * var(--h));
    height: calc(2.6 * var(--h));
    border-radius: 50%;
    background: #fffcf2;
    box-shadow: 0 calc(0.2 * var(--h)) calc(0.3 * var(--h)) rgba(0, 0, 0, 0.18);
    transform: translateY(-50%);
    transition: inset-inline-start 0.15s;
}

.sort-panel .switch.on i { background: var(--gold); border-color: #9e701f; }
.sort-panel .switch.on i::after { inset-inline-start: calc(100% - 2.9 * var(--h)); }

/* The hokm named: its jewel comes up on the board. */
.board .jewel {
    animation: jewel-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes jewel-up {
    from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* 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;
}

/* ---- laid as the game lays its table from the corners ----

   Every rect below is the game's own (TableLayout from the corners, ported as Corners.cs): the
   page writes each piece's left, top, width and height in pixels, worked out from the table's
   size as the game works its out from the screen's. What is left here is how each piece looks. */

.table .ring { transform: none; }

.table .board {
    transform: none;
    container-type: size;
}

.table .board span { font-size: 40cqh; }
.table .board .tricks { font-size: 30.7cqh; border-radius: 10.7cqh; }
.table .board .call { font-size: 18cqh; }

/* A chair is drawn on its canvas (seat.js); the box over it takes the taps and is where a thing
   thrown at it lands. */
.seat-paint {
    position: absolute;
    pointer-events: none;
}

.table .seat {
    right: auto;
    bottom: auto;
}

.table .seat .portrait {
    position: absolute;
    left: 5%;
    top: 0;
    width: 90%;
    height: 78%;
    aspect-ratio: auto;
}

.table .seat .plaque {
    position: absolute;
    left: -20%;
    top: 76%;
    width: 140%;
    height: 26%;
    margin: 0;
}

.table .seat.turn .portrait { animation: none; }

/* The others' fans: each back where TableLayout.TileTheirCard lays it, turned along the fan. */
.table .fan {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    transform: none;
}

.table .fan .fanned {
    transform-origin: 50% 50%;
    transform: rotate(var(--turn));
    transition: left 0.18s cubic-bezier(0.33, 1, 0.68, 1), top 0.18s cubic-bezier(0.33, 1, 0.68, 1), transform 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}

/* The trick, the draw and the round's leftovers: each card at its own rect. */
.table .trick {
    left: 0;
    top: 0;
}

.table .trick .laid,
.table .left .laid {
    transform: none;
}

/* A card's page over the table (door.css lays it): over every chair, button and card there. */
.table .card-page { z-index: 60; }

/* A tap on the trick squares it up for everybody (TableThrow.SquareTheTrick): each card lying
   there slides into its own place and straightens, in the game's 0.22 s. */
.table .trick .laid[data-play] { cursor: var(--point); }
.table .trick .laid.straight {
    transition: left 0.22s cubic-bezier(0.33, 1, 0.68, 1), top 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}
.table .trick .laid.straight > .flier {
    transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}

.table .left.place-1,
.table .left.place-2,
.table .left.place-3 {
    left: 0;
    top: 0;
}

/* My hand: each card at its rect along the arc, its ends leaning out. */
.table .hand {
    left: 0;
    top: 0;
    bottom: auto;
    height: 0;
}

.table .hand .held {
    bottom: auto;
    transform: translateY(calc(-1 * var(--lift))) rotate(var(--lean));
    transition: transform 0.16s cubic-bezier(0.33, 1, 0.68, 1), left 0.16s cubic-bezier(0.33, 1, 0.68, 1), top 0.16s cubic-bezier(0.33, 1, 0.68, 1);
}

/* My buttons, each where CornerButton stands it. */
.table .my-buttons {
    left: 0;
    top: 0;
    bottom: auto;
    width: 0;
    height: 0;
    display: block;
}

.table .my-buttons button {
    position: absolute;
}

/* A panel laid over the table: the kit's paper with its ochre edge and a sun in each corner (Kit.DrawPanel). */
.kit-panel {
    --sun: min(calc(6 * var(--h)), 20%);
    position: absolute;
    box-sizing: border-box;
    background:
        url("../art/kit/sun.png") left calc(1.2 * var(--h)) top calc(1.2 * var(--h)) / var(--sun) no-repeat,
        url("../art/kit/sun.png") right calc(1.2 * var(--h)) top calc(1.2 * var(--h)) / var(--sun) no-repeat,
        url("../art/kit/sun.png") left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)) / var(--sun) no-repeat,
        url("../art/kit/sun.png") right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)) / var(--sun) no-repeat,
        #f5e8c9;
    border: max(2px, calc(0.45 * var(--h))) solid #b0935e;
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
    color: var(--ink);
    z-index: 6;
}

/* Naming the hokm (TableView.BuildTileChooser): the title, the line under it, the four marks on
   their tiles, and at a table that plays them the three rounds with no hokm. --ch is the panel's
   height without that row. */
.chooser b,
.chooser small,
.chooser em {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.chooser b { top: calc(var(--ch) * 0.13); font-size: calc(var(--ch) * 0.13); }
.chooser small { top: calc(var(--ch) * 0.3); font-size: calc(var(--ch) * 0.065); color: var(--ink-soft); }

.chooser .suits {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--ch) * 0.46);
    display: flex;
    justify-content: center;
    gap: calc(var(--ch) * 0.36 * 0.18);
}

.chooser .suits button {
    width: calc(var(--ch) * 0.36);
    height: calc(var(--ch) * 0.36);
    padding: 0;
    border: 0;
    background: url("../art/table/badge-tile.png") center / 100% 100% no-repeat;
    display: grid;
    place-items: center;
    cursor: var(--point);
}

.chooser .suits button:hover { filter: brightness(1.1); }
/* Half the tile, as SuitTile draws it. Said in the tile's own size: a percentage of a grid cell
   is not known when the picture is laid, so the mark came out as large as its file. */
.chooser .suits img { height: calc(var(--ch) * 0.36 * 0.5); width: auto; display: block; pointer-events: none; }

.chooser .calls {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--ch);
    display: flex;
    justify-content: space-evenly;
}

.chooser .calls button {
    width: 27%;
    height: calc(var(--ch) * 0.17);
    border: 0;
    background: url("../art/kit/button-plain.png") center / 100% 100% no-repeat;
    color: var(--ink);
    font: inherit;
    font-size: calc(var(--ch) * 0.07);
    cursor: var(--point);
}

.chooser em {
    top: calc(var(--ch) * (1 + 0.17 + 0.02));
    left: 4%;
    right: 4%;
    font-size: calc(var(--ch) * 0.052);
    color: var(--ink-soft);
}

/* The slip between rounds (Banner): on the kit's panel, the title, the count, and a red ribbon for a kot. */
.table .banner {
    position: absolute;
    box-sizing: border-box;
    background: #f5e8c9;
    border: max(2px, calc(0.45 * var(--h))) solid #b0935e;
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 5;
    container-type: size;
}

.table .banner b,
.table .banner span {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 400;
    line-height: 1;
}

.table .banner b { top: 24cqh; font-size: 20cqh; color: var(--ink); }
.table .banner span { top: 53cqh; font-size: 11cqh; color: var(--ink-soft); }

.table .banner i {
    position: absolute;
    left: 50%;
    top: 68cqh;
    height: 13cqh;
    transform: translateX(-50%);
    padding: 0 1.3em;
    border-radius: 4px;
    background: var(--red);
    color: var(--cream);
    font-style: normal;
    font-size: 7.5cqh;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    display: grid;
    place-items: center;
}

/* The sign under the board at a table that plays naras and saras: cream, a cobalt edge, round ends. */
.naras-sign {
    position: absolute;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 0 1.25em;
    border: max(1px, 0.125em) solid var(--cobalt);
    border-radius: 999px;
    background: var(--cream);
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
    display: grid;
    place-items: center;
    line-height: 1;
}

/* The score in one line (HokmPlate.DrawOnLine): sizes are shares of the board's own height. */
.table .board span,
.table .board b {
    transform: none;
    translate: -50% -50%;
    line-height: 1;
    white-space: nowrap;
}

.table .board .won { top: 50%; font-size: 36cqh; font-weight: 700; color: var(--ink); }
.table .board .taken { font-size: 25cqh; font-weight: 700; color: var(--cream); }
.table .board .well { position: absolute; display: block; }
.table .board .jewel { height: 74%; }
.table .board .jewel.short { height: 60%; top: 44%; }
.table .board .sign { left: 50%; top: 50%; font-size: 62cqh; font-weight: 400; color: var(--ink-soft); }
.table .board .call { left: 50%; top: 50%; width: auto; max-width: 20cqw; font-size: 31cqh; font-weight: 700; color: var(--ink); }
.table .board .game-to { position: absolute; left: 50%; top: 83%; font-size: 17cqh; color: var(--red); }

/* The way out at the board's end: the kit's round button with a door and an arrow in cream (Tiles.DrawExit). */
.table .way-out {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url("../art/table/button.png") center / 100% 100% no-repeat;
    cursor: var(--point);
    z-index: 4;
}

.table .way-out:hover { filter: brightness(1.12); }

.table .way-out svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: var(--cream);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.table .way-out svg polygon { fill: var(--cream); stroke: none; }

/* The question before leaving (Choice): on the kit's panel in the middle, the title, what leaving costs, and two answers. */
.table .choice-off {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 20;
}

.table .choice {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(70 * var(--u));
    padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(4.5 * var(--u));
    display: grid;
    justify-items: center;
    gap: calc(2 * var(--u));
    text-align: center;
    z-index: 21;
}

.table .choice b { font-size: calc(4.6 * var(--u)); font-weight: 400; }
.table .choice p { margin: 0; font-size: calc(2.6 * var(--u)); color: var(--ink-soft); line-height: 1.3; }
.table .choice div { display: flex; gap: calc(2 * var(--u)); margin-top: calc(1 * var(--u)); }

.table .choice button {
    --bh: calc(7.6 * var(--u));
    position: relative;
    isolation: isolate;
    height: var(--bh);
    min-width: calc(20 * var(--u));
    padding: 0 calc(6 * var(--u));
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: calc(2.8 * var(--u));
    color: var(--ink);
    cursor: var(--point);
}

.table .choice button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/flat/button-plain.png") 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.table .choice button.main { color: var(--cream); }
.table .choice button.main::before { border-image-source: url("../art/kit/flat/button-main.png"); }
.table .choice button.danger { color: #9b1c1c; }

/* On the tile wall a card I may not play is not dimmed (CardSlot draws the dim only off it); a card
   I may play glows as if a lamp were on it, a warm halo that breathes slowly and a bright hairline
   at its edge. */
.table .hand .held { container-type: inline-size; }
.table .hand .held.muted .card { filter: none; }

.table .hand .held.legal .card {
    box-shadow: 0 0 17cqw 2cqw rgba(255, 209, 89, 0.7);
    outline: max(2px, 2.5cqw) solid rgb(255, 230, 140);
    outline-offset: calc(-1 * max(2px, 2.5cqw));
    animation: lamp 2.62s ease-in-out infinite alternate;
}

@keyframes lamp {
    from { box-shadow: 0 0 14cqw 1cqw rgba(255, 209, 89, 0.55); }
    to { box-shadow: 0 0 20cqw 3cqw rgba(255, 209, 89, 0.85); }
}

/* The vote on naras and saras (NarasVoteView): sizes are shares of the table's height, --vh. */
.table .vote {
    transform: translate(-50%, -50%);
    padding: calc(var(--vh) * 0.036 * 1.25) calc(var(--vh) * 0.036 * 1.1) calc(var(--vh) * 0.036 * 0.9);
    display: grid;
    justify-items: center;
    text-align: center;
    line-height: 1.2;
}

.table .vote b { font-size: calc(var(--vh) * 0.036); font-weight: 700; color: var(--cobalt); }
.table .vote small { margin-top: calc(var(--vh) * 0.008); font-size: calc(var(--vh) * 0.023); color: var(--ink-soft); }

.table .vote .voters {
    width: 100%;
    height: calc(var(--vh) * 0.12);
    margin-top: calc(var(--vh) * 0.012);
    display: flex;
}

.table .vote .voters > div {
    flex: 1;
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: calc(var(--vh) * 0.006);
}

.table .vote .voters i {
    width: calc(var(--vh) * 0.12 * 0.34);
    height: calc(var(--vh) * 0.12 * 0.34);
    box-sizing: border-box;
    border-radius: 50%;
    border: max(1.5px, calc(var(--vh) * 0.12 * 0.024)) solid var(--ink-soft);
}

.table .vote .voters .yes i { background: #46a877; border-color: var(--ink); }
.table .vote .voters .no i { background: var(--red); border-color: var(--ink); }
.table .vote .voters strong { max-width: 92%; min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-size: calc(var(--vh) * 0.023); }
.table .vote .voters span { font-size: calc(var(--vh) * 0.019); color: var(--ink-soft); }
.table .vote .voters .yes span { color: #46a877; }
.table .vote .voters .no span { color: var(--red); }

.table .vote .time {
    width: 100%;
    height: calc(var(--vh) * 0.023);
    display: flex;
    align-items: center;
    gap: calc(var(--vh) * 0.01);
}

.table .vote .time span {
    position: relative;
    flex: 1;
    height: max(3px, calc(var(--vh) * 0.023 * 0.22));
    background: rgba(107, 83, 50, 0.28);
}

.table .vote .time span::after {
    content: "";
    position: absolute;
    left: calc((1 - var(--left)) * 50%);
    width: calc(var(--left) * 100%);
    top: 0;
    bottom: 0;
    background: var(--cobalt);
    transition: left 0.4s linear, width 0.4s linear;
}

.table .vote .time em { font-style: normal; font-weight: 700; font-size: calc(var(--vh) * 0.023); color: var(--ink-soft); min-width: 2.4em; text-align: end; }

.table .vote .answers {
    margin-top: calc(var(--vh) * 0.02);
    display: flex;
    gap: calc(var(--vh) * 0.025);
}

.table .vote p { margin: calc(var(--vh) * 0.018) 0 0; font-size: calc(var(--vh) * 0.023); color: var(--ink-soft); }

.table .vote .answers button,
.table .choice button {
    --bh: calc(var(--vh, 100 * var(--u)) * 0.075);
    position: relative;
    isolation: isolate;
    height: var(--bh);
    min-width: calc(var(--bh) * 2.6);
    padding: 0 calc(var(--bh) * 0.8);
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: calc(var(--bh) * 0.37);
    color: var(--ink);
    cursor: var(--point);
    white-space: nowrap;
}

.table .vote .answers button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/flat/button-plain.png") 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.table .vote .answers button.main { color: var(--cream); }
.table .vote .answers button.main::before { border-image-source: url("../art/kit/flat/button-main.png"); }
.table .vote .answers button:hover,
.table .choice button:hover { filter: brightness(1.12); }

/* My cut from the bottom (TableCut): the place a finger presses on the pack, the whole table while
   it pulls, and the words over the pack on the dark lacquer pill with the bar of my time under them. */
.table .cut-pad {
    position: absolute;
    z-index: 7;
    cursor: var(--point);
    touch-action: none;
}

.table .cut-pad.pulling { inset: 0; cursor: var(--hold); }

.table .cut-hint {
    position: absolute;
    translate: -50% 0;
    z-index: 8;
    pointer-events: none;
    display: grid;
    justify-items: center;
}

.table .cut-hint span {
    height: 2em;
    padding: 0 1.1em;
    display: grid;
    place-items: center;
    border-radius: 0.8em;
    background: rgba(20, 14, 10, 0.88);
    box-shadow: inset 0 0 0 1px rgba(226, 194, 104, 0.6);
    color: #e2c268;
    white-space: nowrap;
    line-height: 1;
}

.table .cut-hint i {
    justify-self: start;
    margin: 2px 0 0 0.5em;
    height: max(3px, 0.22em);
    background: #e2c268;
}

.table .cut-hint i.late { background: rgb(219, 61, 51); }

/* ---- the tea break (TeaAskView, TeaView) ---- */

/* My glass among my buttons: faded while it may not be asked for, and how many I have when more than one. */
.table .my-buttons button.tea.off { opacity: 0.55; cursor: var(--arrow); }
.table .my-buttons button.tea.off:hover { transform: none; }

.table .my-buttons button.tea b {
    position: absolute;
    right: 5%;
    bottom: 2%;
    font-size: 30cqw;
    font-weight: 700;
    color: var(--cream);
    line-height: 1;
}

.table .my-buttons button { container-type: inline-size; }

/* The ask, under the board while the cards go on. Sizes are shares of the table's height, --vh. */
.table .kettle {
    --fs: calc(var(--vh) * 0.026);
    --small: calc(var(--vh) * 0.021);
    padding: calc(var(--fs) * 0.9) calc(var(--fs) * 1.1) calc(var(--small) * 0.6);
    display: grid;
    gap: calc(var(--small) * 0.45);
    z-index: 6;
}

.table .kettle header { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.table .kettle header b { font-size: var(--fs); font-weight: 700; color: var(--cobalt); }
.table .kettle header em { font-style: normal; font-weight: 700; font-size: var(--small); color: var(--ink-soft); }
.table .kettle small { font-size: var(--small); color: var(--ink-soft); margin-bottom: calc(var(--small) * 0.3); }
.table .kettle p { margin: 0; display: flex; justify-content: space-between; gap: 1em; font-size: var(--small); }
.table .kettle p strong { font-weight: 700; color: var(--ink); }
.table .kettle p span { color: var(--ink-soft); }
.table .kettle p.yes span { color: var(--cobalt); }
.table .kettle p.no span { color: var(--red); }

.table .kettle .answers {
    margin-top: calc(var(--vh) * 0.01);
    display: flex;
    justify-content: center;
    gap: calc(var(--vh) * 0.02);
}

.table .kettle .answers button,
.table .choice div button {
    --bh: calc(var(--vh, 100 * var(--u)) * 0.055);
    position: relative;
    isolation: isolate;
    height: var(--bh);
    min-width: calc(var(--bh) * 3.2);
    padding: 0 calc(var(--bh) * 0.8);
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: calc(var(--vh, 100 * var(--u)) * 0.021);
    color: var(--ink);
    cursor: var(--point);
    white-space: nowrap;
}

.table .kettle .answers button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/flat/button-plain.png") 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.table .kettle .answers button.main { color: var(--cream); }
.table .kettle .answers button.main::before { border-image-source: url("../art/kit/flat/button-main.png"); }

/* A glass of tea sliding to every chair. */
.table .tea-glass {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    transition: left 0.4s linear, top 0.4s linear;
    filter: drop-shadow(0 0.4vh 0.6vh rgba(0, 0, 0, 0.35));
}

/* The telling: the chapter's painting in a cobalt frame and the plate under it, carried as one. */
.table .tea-board {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 7;
    cursor: var(--point);
    touch-action: none;
}

.table .tea-board .chapter {
    position: absolute;
    box-sizing: content-box;
    border: solid #1f3f8f;
    margin: calc(-1 * var(--fs) * 0.3);
    box-shadow: 0 0 1.8vh rgba(0, 0, 0, 0.45);
    object-fit: cover;
}

.table .tea-plate {
    position: absolute;
    box-sizing: border-box;
    padding: calc(var(--fs) * 0.8) calc(var(--fs) * 0.8) calc(var(--fs) * 0.4);
    border: max(2px, calc(var(--fs) * 0.12)) solid var(--cobalt);
    border-radius: calc(var(--fs) * 0.5);
    background: var(--cream);
    box-shadow: 0 0.5vh 1.2vh rgba(0, 0, 0, 0.35);
    display: grid;
    align-content: space-between;
    font-size: var(--fs);
    color: var(--ink);
}

.table .tea-plate p { margin: 0; line-height: 1.3; }

.table .tea-plate footer {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--fs) * 0.4);
    font-size: calc(var(--fs) * 0.72);
}

.table .tea-plate footer span { margin-inline-start: auto; font-weight: 700; color: var(--ink-soft); }
.table .tea-plate footer a { color: var(--red); text-decoration: underline; cursor: var(--point); }

/* The last trick (TableGlance): the kit's round button with four small cards in a cross, and the
   slip under it with the trick's cards laid small and straight, the one that took it lit. */
.table .last-trick {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url("../art/table/button.png") center / 100% 100% no-repeat;
    cursor: var(--point);
    z-index: 4;
}

.table .last-trick:hover { filter: brightness(1.12); }
.table .last-trick.on { filter: drop-shadow(0 0 calc(1 * var(--h)) rgba(255, 214, 90, 1)); }
.table .last-trick svg { width: 100%; height: 100%; display: block; }
.table .last-trick rect { fill: var(--cream); stroke: #16234f; stroke-width: 2.2; }

.table .glance {
    position: absolute;
    box-sizing: border-box;
    background: #f5e8c9;
    border: 2px solid #b0935e;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    z-index: 12;
    cursor: var(--point);
}

.table .glance .laid { position: absolute; }
.table .glance .laid .card { --wide: 100%; }
.table .glance .laid.won .card { box-shadow: 0 0 calc(1.6 * var(--h)) calc(0.3 * var(--h)) rgba(255, 214, 77, 0.9), inset 0 0 0 calc(0.3 * var(--h)) rgba(255, 230, 128, 1); }

/* The music player made small at the board's left end (MusicPlayer.MakeMini), the door's player in
   its small form; --u is the player's own length, as on the door. Opened, it grows to the right. */
.table .music {
    position: absolute;
    height: calc(var(--u) * 0.092);
    box-sizing: border-box;
    padding: 0 calc(var(--u) * 0.03);
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.012);
    border-radius: 999px;
    background: rgba(253, 246, 230, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: max(1px, calc(var(--u) * 0.002)) solid rgba(255, 254, 247, 0.85);
    box-shadow: 0 calc(var(--u) * 0.004) calc(var(--u) * 0.01) rgba(38, 26, 8, 0.22);
    color: #2a2a3a;
    direction: ltr;
    z-index: 5;
    white-space: nowrap;
}

.table .music .name { width: calc(var(--u) * 0.10); display: grid; justify-items: center; gap: calc(var(--u) * 0.006); }
.table .music .tune { font-size: calc(var(--u) * 0.026); }
.table .music .tune i { display: none; font-style: normal; }
.table .music .tune i.on { display: inline; }
.table .music .dots { display: flex; gap: calc(var(--u) * 0.007); align-items: center; }
.table .music .dots i { width: calc(var(--u) * 0.0076); height: calc(var(--u) * 0.0076); border-radius: 50%; background: currentColor; opacity: 0.28; }
.table .music .dots i.on { width: calc(var(--u) * 0.0096); height: calc(var(--u) * 0.0096); opacity: 1; }
.table .music .rule { width: 1px; height: 52%; background: currentColor; opacity: 0.45; }
.table .music button { width: calc(var(--u) * 0.044); height: calc(var(--u) * 0.044); padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: var(--point); }
.table .music svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.table .music svg .fill { fill: currentColor; stroke: none; }
.table .music svg text { font: 700 7px sans-serif; fill: currentColor; stroke: none; text-anchor: middle; }
.table .music [data-do="loop"] { opacity: 0.45; }
.table .music.looping [data-do="loop"] { opacity: 1; }
.table .music .play { width: calc(var(--u) * 0.058); height: calc(var(--u) * 0.058); border-radius: 50%; background: #16234f; }
.table .music .play svg { width: 70%; height: 70%; stroke: #fdf6e6; stroke-width: 2.6; }
.table .music .play svg .fill { fill: #fdf6e6; }
.table .music .play .off { display: none; }
.table .music.playing .play .off { display: inline; }
.table .music.playing .play .on { display: none; }
.table .music .cross { display: none; }
.table .music.quiet .cross { display: inline; }
.table .music.quiet .waves { display: none; }
.table .music .loud { width: calc(var(--u) * 0.08); display: flex; align-items: center; }
.table .music .loud input { width: 100%; accent-color: #2a2a3a; margin: 0; }
.table .music .less { opacity: 0.7; }
.table .music .more { display: none; }

.table .music.small {
    width: calc(var(--u) * 0.075 * 1.74);
    height: calc(var(--u) * 0.075);
    padding: 0;
    justify-content: center;
}

.table .music.small > :not(.play):not(.more) { display: none; }
.table .music.small .more { display: grid; }

/* Sat out (TableSitOut): the kit's paper over my hand, its top corners round, the line, and "I am back". */
.table .sat-out {
    position: absolute;
    box-sizing: border-box;
    background: rgba(245, 232, 201, 0.94);
    border: 2px solid #b0935e;
    border-bottom: 0;
    border-radius: calc(var(--vh) * 0.03) calc(var(--vh) * 0.03) 0 0;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: calc(var(--vh) * 0.012);
    padding-top: calc(var(--vh) * 0.03);
    z-index: 34;
}

.table .sat-out p { margin: 0; width: 88%; text-align: center; font-size: calc(var(--vh) * 0.032); color: var(--ink); }

.table .sat-out button {
    --bh: calc(var(--vh) * 0.075);
    position: relative;
    isolation: isolate;
    width: calc(var(--vh) * 0.3);
    height: var(--bh);
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: calc(var(--vh) * 0.032);
    color: var(--cream);
    cursor: var(--point);
}

.table .sat-out button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/flat/button-main.png") 0 115 fill / 0 calc(var(--bh) * 0.518) stretch;
}

.table .sat-out button:hover { filter: brightness(1.12); }

/* The partner's middle: its call under the four marks (TableView: a plaque 0.96 by 0.2 of the chooser
   at 0.9 of its height), the no-hokm row under that, and the card lying face up on the table, lit
   like a playable card while its holder may take it up. */
.chooser .calls { top: calc(var(--ch) * var(--rise, 1) - var(--ch) * 0.36 * 0.04); }
.chooser em { top: calc(var(--ch) * (var(--rise, 1) + 0.17 + 0.02 - 0.36 * 0.04)); }

.chooser .middle-call {
    --bh: calc(var(--ch) * 0.2);
    position: absolute;
    left: 50%;
    top: calc(var(--ch) * 0.9);
    width: calc(var(--ch) * 0.96);
    height: var(--bh);
    translate: -50% 0;
    isolation: isolate;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: calc(var(--ch) * 0.075);
    color: var(--cream);
    cursor: var(--point);
}

.chooser .middle-call::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/flat/button-main.png") 0 115 fill / 0 calc(var(--bh) * 0.518) stretch;
}

.chooser .middle-call:hover { filter: brightness(1.12); }

.table .trick .laid.middle { container-type: inline-size; }
.table .trick .laid.middle.takes { cursor: var(--point); }

.table .trick .laid.middle.takes .card {
    box-shadow: 0 0 17cqw 2cqw rgba(255, 209, 89, 0.7);
    outline: max(2px, 2.5cqw) solid rgb(255, 230, 140);
    outline-offset: calc(-1 * max(2px, 2.5cqw));
    animation: lamp 2.62s ease-in-out infinite alternate;
}

/* An early card: face down in its place; mine with its corner turned up so I know which it is, and a tap takes it back. */
.table .trick .laid.early.mine { cursor: var(--point); }

.table .trick .laid.early .peek {
    position: absolute;
    inset: 0;
    z-index: 3;
    clip-path: polygon(0 0, 34% 0, 0 26%);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

.table .trick .laid.early .peek .card { --wide: 100%; box-shadow: none; }

/* A card that may come early: lifted at the first tap like a playable one, with no lamp on it. */
.table .hand .held.early { cursor: var(--point); }
.table .hand .held.early.lifted { --lift: calc(4.7 * var(--h)); }

/* Leading a run (TableRun): the run's row lies under the trick's cards; the button is the kit's
   main one, as wide as its words (Kit.Fitting: the font 0.032 of the height, never narrower than
   0.2 of it, 0.088 high), lit while its cards stand lifted; the hint is one plate over it. */
.table .trick .laid.run-card { z-index: 0; }

.table .lead-run {
    --bh: calc(var(--vh) * 0.088);
    position: absolute;
    z-index: 30;
    translate: -50% 0;
    isolation: isolate;
    min-width: calc(var(--vh) * 0.2);
    height: var(--bh);
    padding: 0 calc(var(--vh) * 0.085);
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: calc(var(--vh) * 0.032);
    color: var(--cream);
    white-space: nowrap;
    cursor: var(--point);
}

.table .lead-run::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/flat/button-main.png") 0 115 fill / 0 calc(var(--bh) * 0.518) stretch;
}

.table .lead-run:hover,
.table .lead-run.picking { filter: brightness(1.18); }

.table .run-hint {
    position: absolute;
    z-index: 30;
    translate: -50% 0;
    width: calc(var(--vh) * 0.62);
    min-height: calc(var(--vh) * 0.1);
    margin: 0;
    padding: 0.4em 0.9em;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: calc(var(--vh) * 0.027);
    line-height: 1.25;
    color: #ece3cc;
    background: rgba(20, 14, 10, 0.88);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(226, 194, 104, 0.6);
    pointer-events: none;
    animation: run-hint 7.6s linear forwards;
}

@keyframes run-hint {
    0%, 92% { opacity: 1; }
    100% { opacity: 0; }
}

/* A table's own score line (HokmPlate.DrawOnOwnLine): the picture as wide as the plain line and
   as tall as it is painted, its setting on the plain line's middle; everything on it is placed
   by the page in pixels, so its sizes here are only how it looks. */
.table .board.own { overflow: visible; }
.table .board.own > img.line { position: absolute; left: 0; width: 100%; }
.table .board.own .well { z-index: 1; }
.table .board.own span,
.table .board.own b { z-index: 2; }

/* Night at the table (Night.cs): a lapis veil over the table's ground, deeper than the door's (the
   tile floor is the brightest ground in the game); the cards still cream, dimmer and a shade
   warmer; what is painted bright (the ring, the board, the chairs, the round buttons) a little
   lower; the kit's paper lapis with cream words, its ivory buttons turned to lapis and its navy
   ones up to cobalt, from the day's own pictures (door.js nights). */
.table .night-veil {
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 23, 0.7);
    pointer-events: none;
}

.table .night-filters { position: absolute; }

.table.night .card > * { filter: url(#night-cards); }

.table.night .ring,
.table.night .board,
.table.night canvas.seat-paint,
.table.night .my-buttons button,
.table.night .way-out,
.table.night .last-trick,
.table.night .naras-sign,
.table.night .music.small { filter: url(#night-painted); }

.table.night .kit-panel,
.table.night .sort-panel,
.table.night .sat-out,
.table.night .glance {
    --ink: #f0e5c9;
    --ink-soft: #c2b28f;
    --cobalt: #9fb5ec;
    background-color: #18213f;
    border-color: #9a7f4c;
    color: var(--ink);
}

.table.night .sat-out { background: rgba(24, 33, 63, 0.94); }
.table.night .sort-panel { background: rgba(24, 33, 63, 0.98); }

.table.night .choice button,
.table.night .vote .answers button,
.table.night .kettle .answers button { color: #eee2c3; }

.table.night .choice button::before,
.table.night .vote .answers button::before,
.table.night .kettle .answers button::before { border-image-source: var(--kit-plain, url("../art/kit/flat/button-plain.png")); }

.table.night .choice button.main::before,
.table.night .vote .answers button.main::before,
.table.night .kettle .answers button.main::before,
.table.night .sat-out button::before,
.table.night .lead-run::before { border-image-source: var(--kit-main, url("../art/kit/flat/button-main.png")); }

.table.night .run-hint { color: #f0e5c9; }

/* finish.css */
/* The finish of a card's face by the rarity of the back the pack wears (Play/Finish.cs), drawn
   as the game's Finish shader draws it, in layers over the face: the painting's lines standing
   up, the hologram, the foil on the painting's gold, and the edge in the tier's metal.

   The light is a band across the card, at right angles to (0.8, 0.6) of the card's width and
   height, which is 118 degrees on a card of 5 by 7. Where it lies comes from the tilt
   (js/finish.js): --band is its middle as a share of the gradient's length, --hue the start of
   the hologram's bands. A band's strength by its distance from the middle is the game's
   exp(-18 b^2) for the soft light and exp(-90 b^2) for the glint, laid in stops. */

:root {
    --band: 50%;
    --hue: -4.35%;
}

.card .finish {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    container-type: size;
    --rim: 1.26cqw;
    --metal: rgb(224, 230, 242);
}

.card .finish > i {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
}

/* The gold and the lines are read off the painting in the browser; until they are, neither shows. */
.card .finish:not([data-ready]) > .f-foil,
.card .finish:not([data-ready]) > .f-relief {
    display: none;
}

/* The tiers. The edge is the game's width (1.8%, 3.5%, 4%, 5.5% of the card's width) where its
   soft inner side is half lit; its metal silver, gold, or white gold. */
.card .finish.t1 { --rim: 2.45cqw; --metal: rgb(255, 214, 115); --foil: 1; }
.card .finish.t2 { --rim: 2.8cqw; --metal: rgb(255, 214, 115); --foil: 0.6; --holo: 0.24; --emboss: 0.21; }
.card .finish.t3 { --rim: 3.85cqw; --metal: rgb(255, 214, 115); --foil: 1; --holo: 0.55; --emboss: 0.35; }
.card .finish.t4 { --rim: 3.85cqw; --metal: rgb(255, 247, 224); --foil: 0.8; --holo: 0.32; --emboss: 0.35; }

/* The lines of the painting stand up towards the light: light where the picture brightens
   towards it, dark where it darkens (js/finish.js makes the picture of it). */
.card .finish > .f-relief {
    background: var(--relief) center / 100% 100% no-repeat;
    opacity: var(--emboss, 0);
}

/* The hologram. Epic: a rainbow in fine diagonal bands, a fifth white, brightest in the light. */
.card .finish > .f-holo {
    background: repeating-linear-gradient(65deg,
        rgb(255, 51, 51) calc(var(--hue) + 0%),
        rgb(255, 255, 51) calc(var(--hue) + 2.42%),
        rgb(51, 255, 51) calc(var(--hue) + 4.83%),
        rgb(51, 255, 255) calc(var(--hue) + 7.25%),
        rgb(51, 51, 255) calc(var(--hue) + 9.66%),
        rgb(255, 51, 255) calc(var(--hue) + 12.08%),
        rgb(255, 51, 51) calc(var(--hue) + 14.49%));
    -webkit-mask-image: linear-gradient(118deg,
        rgba(0, 0, 0, 0.22) calc(var(--band) - 35%),
        rgba(0, 0, 0, 0.31) calc(var(--band) - 25%),
        rgba(0, 0, 0, 0.47) calc(var(--band) - 18%),
        rgba(0, 0, 0, 0.69) calc(var(--band) - 12%),
        rgba(0, 0, 0, 0.84) calc(var(--band) - 8%),
        rgba(0, 0, 0, 0.96) calc(var(--band) - 4%),
        rgb(0, 0, 0) var(--band),
        rgba(0, 0, 0, 0.96) calc(var(--band) + 4%),
        rgba(0, 0, 0, 0.84) calc(var(--band) + 8%),
        rgba(0, 0, 0, 0.69) calc(var(--band) + 12%),
        rgba(0, 0, 0, 0.47) calc(var(--band) + 18%),
        rgba(0, 0, 0, 0.31) calc(var(--band) + 25%),
        rgba(0, 0, 0, 0.22) calc(var(--band) + 35%));
    mask-image: linear-gradient(118deg,
        rgba(0, 0, 0, 0.22) calc(var(--band) - 35%),
        rgba(0, 0, 0, 0.31) calc(var(--band) - 25%),
        rgba(0, 0, 0, 0.47) calc(var(--band) - 18%),
        rgba(0, 0, 0, 0.69) calc(var(--band) - 12%),
        rgba(0, 0, 0, 0.84) calc(var(--band) - 8%),
        rgba(0, 0, 0, 0.96) calc(var(--band) - 4%),
        rgb(0, 0, 0) var(--band),
        rgba(0, 0, 0, 0.96) calc(var(--band) + 4%),
        rgba(0, 0, 0, 0.84) calc(var(--band) + 8%),
        rgba(0, 0, 0, 0.69) calc(var(--band) + 12%),
        rgba(0, 0, 0, 0.47) calc(var(--band) + 18%),
        rgba(0, 0, 0, 0.31) calc(var(--band) + 25%),
        rgba(0, 0, 0, 0.22) calc(var(--band) + 35%));
    opacity: var(--holo, 0);
}

/* Legendary: no rainbow, a sweep of gold leaf, the whole picture lit gold where the light falls. */
.card .finish.t3 > .f-holo {
    background: rgb(255, 219, 128);
    -webkit-mask-image: linear-gradient(118deg,
        rgba(0, 0, 0, 0.09) calc(var(--band) - 35%),
        rgba(0, 0, 0, 0.19) calc(var(--band) - 25%),
        rgba(0, 0, 0, 0.38) calc(var(--band) - 18%),
        rgba(0, 0, 0, 0.64) calc(var(--band) - 12%),
        rgba(0, 0, 0, 0.82) calc(var(--band) - 8%),
        rgba(0, 0, 0, 0.95) calc(var(--band) - 4%),
        rgb(0, 0, 0) var(--band),
        rgba(0, 0, 0, 0.95) calc(var(--band) + 4%),
        rgba(0, 0, 0, 0.82) calc(var(--band) + 8%),
        rgba(0, 0, 0, 0.64) calc(var(--band) + 12%),
        rgba(0, 0, 0, 0.38) calc(var(--band) + 18%),
        rgba(0, 0, 0, 0.19) calc(var(--band) + 25%),
        rgba(0, 0, 0, 0.09) calc(var(--band) + 35%));
    mask-image: linear-gradient(118deg,
        rgba(0, 0, 0, 0.09) calc(var(--band) - 35%),
        rgba(0, 0, 0, 0.19) calc(var(--band) - 25%),
        rgba(0, 0, 0, 0.38) calc(var(--band) - 18%),
        rgba(0, 0, 0, 0.64) calc(var(--band) - 12%),
        rgba(0, 0, 0, 0.82) calc(var(--band) - 8%),
        rgba(0, 0, 0, 0.95) calc(var(--band) - 4%),
        rgb(0, 0, 0) var(--band),
        rgba(0, 0, 0, 0.95) calc(var(--band) + 4%),
        rgba(0, 0, 0, 0.82) calc(var(--band) + 8%),
        rgba(0, 0, 0, 0.64) calc(var(--band) + 12%),
        rgba(0, 0, 0, 0.38) calc(var(--band) + 18%),
        rgba(0, 0, 0, 0.19) calc(var(--band) + 25%),
        rgba(0, 0, 0, 0.09) calc(var(--band) + 35%));
}

/* Limited: a cool prismatic shimmer, silver, ice blue and violet in the bands. */
.card .finish.t4 > .f-holo {
    background: repeating-linear-gradient(65deg,
        rgb(255, 255, 255) calc(var(--hue) + 0%),
        rgb(255, 255, 255) calc(var(--hue) + 2.42%),
        rgb(223, 242, 255) calc(var(--hue) + 4.83%),
        rgb(236, 217, 255) calc(var(--hue) + 7.25%),
        rgb(236, 217, 255) calc(var(--hue) + 9.66%),
        rgb(255, 255, 255) calc(var(--hue) + 12.08%),
        rgb(255, 255, 255) calc(var(--hue) + 14.49%));
}

/* The foil: a glint on the painting's gold alone, the soft light and the bright glint together;
   nothing else on the card changes colour for it. The gold is the painting's own (--gold). */
.card .finish > .f-foil {
    background: linear-gradient(118deg,
        rgba(255, 245, 204, 0) calc(var(--band) - 35%),
        rgba(255, 245, 204, 0.03) calc(var(--band) - 25%),
        rgba(255, 245, 204, 0.1) calc(var(--band) - 18%),
        rgba(255, 245, 204, 0.26) calc(var(--band) - 12%),
        rgba(255, 245, 204, 0.56) calc(var(--band) - 8%),
        rgb(255, 245, 204) calc(var(--band) - 4%),
        rgb(255, 245, 204) calc(var(--band) + 4%),
        rgba(255, 245, 204, 0.56) calc(var(--band) + 8%),
        rgba(255, 245, 204, 0.26) calc(var(--band) + 12%),
        rgba(255, 245, 204, 0.1) calc(var(--band) + 18%),
        rgba(255, 245, 204, 0.03) calc(var(--band) + 25%),
        rgba(255, 245, 204, 0) calc(var(--band) + 35%));
    -webkit-mask: var(--gold) center / 100% 100% no-repeat;
    mask: var(--gold) center / 100% 100% no-repeat;
    opacity: var(--foil, 0);
}

/* The edge: a band of the tier's metal inside the corner, its brightness the light's,
   0.55 in the dark up to 1.3 in the glint. */
.card .finish > .f-rim {
    border: var(--rim) solid transparent;
    background:
        linear-gradient(118deg,
            rgba(0, 0, 0, 0.45) calc(var(--band) - 45%),
            rgba(0, 0, 0, 0.44) calc(var(--band) - 35%),
            rgba(0, 0, 0, 0.4) calc(var(--band) - 25%),
            rgba(0, 0, 0, 0.31) calc(var(--band) - 18%),
            rgba(0, 0, 0, 0.16) calc(var(--band) - 12%),
            rgba(0, 0, 0, 0) calc(var(--band) - 8%),
            rgba(255, 255, 255, 0.22) calc(var(--band) - 4%),
            rgba(255, 255, 255, 0.35) var(--band),
            rgba(255, 255, 255, 0.22) calc(var(--band) + 4%),
            rgba(0, 0, 0, 0) calc(var(--band) + 8%),
            rgba(0, 0, 0, 0.16) calc(var(--band) + 12%),
            rgba(0, 0, 0, 0.31) calc(var(--band) + 18%),
            rgba(0, 0, 0, 0.4) calc(var(--band) + 25%),
            rgba(0, 0, 0, 0.44) calc(var(--band) + 35%),
            rgba(0, 0, 0, 0.45) calc(var(--band) + 45%)) border-box,
        var(--metal) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    mask-composite: exclude;
}

/* Legendary and limited: beads along the edge, a bead every twentieth of the card's width. */
.card .finish:is(.t3, .t4) > .f-rim::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--rim));
    --bead: rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0) 1.75cqw, rgba(0, 0, 0, 0) 3.25cqw, rgba(0, 0, 0, 0.28) 5cqw;
    background:
        repeating-linear-gradient(90deg, var(--bead)) 0 0 / 100% var(--rim) no-repeat,
        repeating-linear-gradient(90deg, var(--bead)) 0 100% / 100% var(--rim) no-repeat,
        repeating-linear-gradient(180deg, var(--bead)) 0 var(--rim) / var(--rim) calc(100% - 2 * var(--rim)) no-repeat,
        repeating-linear-gradient(180deg, var(--bead)) 100% var(--rim) / var(--rim) calc(100% - 2 * var(--rim)) no-repeat;
}

/* online.css */
/* Play online: the sky ground, the halls as tabs standing on a cream felt, and on the felt one
   big table at a time. Measured in shares of the screen's height like the table itself. */

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

.online header {
    position: absolute;
    left: calc(5 * var(--h));
    right: calc(5 * var(--h));
    top: calc(3 * var(--h));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.online h1 {
    margin: 0;
    font-size: calc(6 * var(--h));
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--cream);
    text-shadow: 0 calc(0.3 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.45);
}

.online .purse {
    display: flex;
    align-items: center;
    gap: calc(1.2 * var(--h));
    padding: calc(0.6 * var(--h)) calc(2.6 * var(--h)) calc(0.6 * var(--h)) calc(1 * var(--h));
    border-radius: calc(4 * var(--h));
    background: var(--cream);
    border: calc(0.35 * var(--h)) solid var(--gold);
    font-size: calc(3.6 * var(--h));
    font-weight: 700;
    color: var(--navy);
}

.online .purse img { height: calc(4.6 * var(--h)); }

.online footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2 * var(--h));
    display: flex;
    justify-content: center;
    gap: calc(2 * var(--h));
    color: var(--cream);
    font-size: calc(2.4 * var(--h));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.online footer button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: var(--point);
}

/* ==== Play online (DoorPrices.cs), the page as the game lays it ====
   The kit's way back, the page's name and the purse along the top; the halls as cards behind the
   panel's top edge; the panel from 28 to 95.5 hundredths of the height; in it the ring about the
   point (middle, 53), its seats on axes of 36 and 16.5. The numbers are the game's own, in
   hundredths of the screen's height. */

.online.prices {
    --paper: #f5e8c9;
    --edge: #b0935e;
    --card-paper: #fbf4e2;
    --tab-paper: #fdfbf5;
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --title-paper: #f7ecd2;
    --arrow: calc(8.9 * var(--h));
    /* How far the arrows stand from the middle: past the side seats, but inside a narrow panel. */
    --reach: min(calc(61.25 * var(--h)), calc((var(--w) - 6 * var(--h)) / 2 - 10.25 * var(--h)));
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

.prices button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.prices button:disabled { cursor: var(--arrow); }
.prices img { display: block; pointer-events: none; }
.prices p { margin: 0; }

/* ---- the kit's enamel (Kit.Button): ivory, and navy for the one thing asked ---- */

.prices .kit {
    --bh: calc(8.8 * var(--h));
    position: absolute;
    isolation: isolate;
    box-sizing: border-box;
    height: var(--bh);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    line-height: 1;
    color: var(--paper-ink);
    white-space: nowrap;
}

.prices .kit > span { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; }
.prices .kit.main { color: var(--on-navy); }

.prices .kit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.prices .kit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--bh) * 72 / 230);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--plain, url("../art/kit/flat/button-plain.png")) center / auto 100% no-repeat;
}

.prices .kit.main::before { border-image: var(--main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--bh) * 0.518) stretch; }
.prices .kit.main::after { width: calc(var(--bh) * 72 / 222); background-image: var(--main, url("../art/kit/flat/button-main.png")); }

.prices button.kit:not(:disabled):hover { filter: brightness(1.15); }

/* Pressed, the enamel sinks under the finger and its words go down with it. */
.prices button.kit:not(:disabled):active { padding-top: max(4px, calc(var(--bh) * 0.07)); }
.prices button.kit:not(:disabled):active::after { visibility: hidden; }

.prices button.kit:not(:disabled):active::before {
    border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png"));
    transform: translateY(max(2px, calc(var(--bh) * 0.035)));
    filter: brightness(0.9);
}

.prices button.kit.main:not(:disabled):active::before { border-image-source: var(--main-down, url("../art/kit/flat/button-main-down.png")); }

.prices button.kit:disabled { opacity: 0.55; }

/* ---- the top: the way back, the page's name and the halls, the purse ---- */

.prices .back {
    --bh: calc(7.8 * var(--h));
    left: calc(3 * var(--h));
    top: calc(3 * var(--h));
    width: calc(24 * var(--h));
    padding: 0 calc(var(--bh) * 0.25) 0 calc(var(--bh) * 0.9);
    font-size: calc(3 * var(--h));
    z-index: 4;
}

/* The arrow at the left end, pointing left in every language. */
.prices .back .arrow {
    position: absolute;
    left: calc(var(--bh) * 0.42);
    top: 50%;
    width: calc(var(--bh) * 0.36);
    height: max(2px, calc(var(--bh) * 0.075));
    background: var(--paper-ink);
    transform: translateY(-50%);
}

.prices .back .arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    border-right: calc(var(--bh) * 0.208) solid var(--paper-ink);
    border-top: calc(var(--bh) * 0.16) solid transparent;
    border-bottom: calc(var(--bh) * 0.16) solid transparent;
    transform: translateY(-50%);
}

.prices button.kit.back:not(:disabled):active .arrow { margin-top: max(2px, calc(var(--bh) * 0.035)); }

/* The name, and the cards after it: in English they start just past the name; in Persian they
   stand at the panel's far end and the name keeps its place by the way back. */
.prices .head {
    position: absolute;
    left: calc(31 * var(--h));
    right: calc(6.5 * var(--h));
    top: 0;
    display: flex;
    align-items: flex-start;
    gap: calc(4 * var(--h));
}

.online.prices .title {
    flex: none;
    margin: calc(3.65 * var(--h)) 0 0;
    font-size: calc(5 * var(--h));
    line-height: calc(6.5 * var(--h));
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--title-paper);
    -webkit-text-stroke: calc(2 * max(3px, calc(5 * var(--h) / 12))) #1e1712;
    paint-order: stroke fill;
    text-shadow: none;
    white-space: nowrap;
}

.prices .halls {
    display: flex;
    gap: calc(1.6 * var(--h));
    margin-top: calc(15 * var(--h));
}

/* A hall's card (Kit.DrawTab): white paper, a thin navy line, its picture alone, its name under it. */
.prices .hall {
    position: relative;
    flex: none;
    width: calc(12.5 * var(--h));
    height: calc(17 * var(--h));
    z-index: 0;
}

.prices .hall .leaf {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: var(--tab-paper);
    border: max(1px, calc(0.25 * var(--h))) solid rgba(22, 35, 79, 0.7);
    border-radius: calc(1 * var(--h));
    box-shadow: 0 calc(0.2 * var(--h)) calc(0.5 * var(--h)) rgba(0, 0, 0, 0.25);
    transition: transform 0.12s;
}

.prices .hall:not(:disabled):hover .leaf { transform: translateY(-6%); }

/* The chosen hall's card stands in front of the panel, lifted, larger and a little askew. */
.prices .hall.chosen {
    z-index: 2;
    transform-origin: 50% 100%;
    transform: translateY(calc(-2.5 * var(--h))) rotate(-4deg) scale(1.1);
}

.prices .hall.chosen .leaf {
    border: max(1px, calc(0.35 * var(--h))) solid var(--paper-ink);
    box-shadow: 0 0 calc(1.1 * var(--h)) rgba(255, 245, 209, 0.75);
}

.prices .hall .leaf img {
    position: absolute;
    left: 50%;
    top: calc(6.12 * var(--h));
    width: calc(6.9 * var(--h));
    height: calc(6.1 * var(--h));
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.prices .hall .label {
    position: absolute;
    left: 5%;
    right: 5%;
    top: calc(10.1 * var(--h));
    line-height: calc(2.4 * var(--h));
    text-align: center;
    white-space: nowrap;
    /* The game sets every name at the size the longest fits its card at (TabFont): "Caravanserai" in English. */
    font-size: calc(1.75 * var(--h));
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    color: var(--ink);
}

.prices .hall.chosen .label { font-weight: 800; color: var(--cobalt); }

/* A hall the purse cannot reach is faded, its padlock over it at full strength; while I wait in
   a queue the other halls are faded and shut. */
.prices .hall.locked .leaf,
.prices .hall.shut .leaf { opacity: 0.55; }

.prices .hall .lock {
    position: absolute;
    left: 50%;
    top: calc(6.12 * var(--h));
    width: calc(4 * var(--h));
    height: calc(4 * var(--h));
    object-fit: contain;
    transform: translate(-50%, -50%);
}

/* The purse (Kit.Purse): the coin and the number on an ivory plaque, the round navy plus beside it. */
.prices .purse {
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(3 * var(--h));
    height: calc(7.8 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(1 * var(--h));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    direction: ltr;
    z-index: 4;
}

.prices .purse .coins {
    --bh: calc(7.8 * var(--h));
    position: relative;
    gap: calc(var(--bh) * 0.18);
    padding: 0 calc(var(--bh) * 0.55) 0 calc(var(--bh) * 0.5);
}

.prices .purse .coins img { width: calc(var(--bh) * 0.56); height: calc(var(--bh) * 0.56); }
.prices .purse .coins b { font-size: calc(var(--bh) * 0.42); font-weight: 800; }

.prices .purse .plus {
    position: relative;
    width: calc(7.8 * var(--h) * 0.92);
    height: calc(7.8 * var(--h) * 0.92);
    background: var(--round-main, url("../art/kit/flat/round-main.png")) center / 100% 100% no-repeat;
}

.prices .purse .plus::before,
.prices .purse .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    height: max(2px, 8%);
    border-radius: 1px;
    background: var(--on-navy);
    transform: translate(-50%, -50%);
}

.prices .purse .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.prices .purse .plus:hover { filter: brightness(1.15); }

/* ---- the panel (Kit.DrawPanel): cream paper, a matte ochre edge, the sun in each corner ---- */

.prices .sheet {
    position: absolute;
    left: calc(3 * var(--h));
    right: calc(3 * var(--h));
    top: calc(28 * var(--h));
    height: calc(67.5 * var(--h));
    box-sizing: border-box;
    background-color: var(--paper);
    background-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
    background-size: calc(6 * var(--h)) calc(6 * var(--h));
    background-position: left calc(1.2 * var(--h)) top calc(1.2 * var(--h)), right calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)), right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h));
    background-repeat: no-repeat;
    border: max(2px, calc(0.45 * var(--h))) solid var(--edge);
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
}

/* In the short hall, the length: a pill for each, in the panel's top corner on the left. */
.prices .lengths {
    position: absolute;
    left: calc(13 * var(--h));
    top: calc(30.2 * var(--h));
    display: flex;
    gap: calc(2 * var(--h));
}

.prices .lengths button {
    width: calc(17 * var(--h));
    height: calc(5 * var(--h));
    border: max(1px, calc(0.2 * var(--h))) solid #fff;
    border-radius: calc(2.5 * var(--h));
    background: #f7ecd2;
    color: var(--cobalt);
    font-size: calc(2.6 * var(--h));
}

.prices .lengths button.chosen { background: var(--cobalt); border-color: var(--cobalt); color: #f7ecd2; font-weight: 800; }
.prices .lengths button:disabled:not(.chosen) { opacity: 0.55; }

/* ---- the table from above ---- */

.prices .oval {
    position: absolute;
    left: 50%;
    top: calc(53 * var(--h));
    width: calc(72 * var(--h));
    height: calc(33 * var(--h));
    transform: translate(-50%, -50%);
}

.prices .oval.poor { opacity: 0.55; }

.prices .oval .ring {
    --ring-high: calc(33 * var(--h));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

/* A seat: free, the cream seat with its faint sun; taken, the crown in the cobalt button. */
.prices .seat {
    position: absolute;
    width: calc(10.8 * var(--h));
    height: calc(10.8 * var(--h));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 calc(0.4 * var(--h)) 0 calc(0.1 * var(--h)) rgba(0, 0, 0, 0.18);
}

.prices .seat > img:first-child { width: 100%; height: 100%; }

.prices .seat .crown {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    transform: translate(-50%, -50%);
}

/* While I wait the sun in each seat still free turns, once round in four seconds: the seat's own
   middle laid again over itself, turned, and thinned out at its rim (DrawSunTurned). */
.prices .seat .sun {
    position: absolute;
    inset: 0;
    background: url("../art/online/seat-empty.png") center / 100% 100% no-repeat;
    -webkit-mask-image: radial-gradient(circle closest-side, #000 46%, transparent 60%);
    mask-image: radial-gradient(circle closest-side, #000 46%, transparent 60%);
    animation: prices-sun 4s linear infinite;
}

@keyframes prices-sun { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
    .prices .seat .sun { animation-duration: 16s; }
}

/* Across from me first, then where the line starts, then where it ends; the near one is mine. */
.prices .seat.at-0 { left: 50%; top: 0; }
.prices .seat.at-1 { left: 0; top: 50%; }
.prices .seat.at-2 { left: 100%; top: 50%; }
.prices .seat.at-3 { left: 50%; top: 100%; }

[dir="rtl"] .prices .seat.at-1 { left: 100%; }
[dir="rtl"] .prices .seat.at-2 { left: 0; }

/* In the middle of the ring: what a seat costs, big, the pot, and the farr it moves. */
.prices .oval .a-seat,
.prices .oval .number,
.prices .oval .pot,
.prices .oval .farr {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.prices .oval .a-seat { top: calc(5.7 * var(--h)); font-size: calc(2.4 * var(--h)); line-height: 1.4; letter-spacing: 0.15em; color: var(--ink-soft); }
.prices .oval .number { top: calc(8.4 * var(--h)); font-size: calc(8.5 * var(--h)); line-height: 1.15; font-weight: 600; letter-spacing: 0.04em; color: var(--paper-ink); }
.prices .oval .pot { top: calc(18.5 * var(--h)); font-size: calc(2.8 * var(--h)); line-height: 1.4; color: var(--ink); }

.prices .oval .farr {
    top: calc(22.5 * var(--h));
    height: calc(3.6 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(0.6 * var(--h));
    direction: ltr;
    font-size: calc(2.2 * var(--h));
    color: var(--ink-soft);
}

.prices .oval .farr img { height: 100%; }
.prices .oval .farr span { margin-left: calc(0.6 * var(--h)); }

/* How many wait, under the seat where the line starts, running outwards away from the ring. */
.prices .oval .waiting {
    position: absolute;
    top: calc(22.9 * var(--h));
    right: calc(100% - 2.08 * var(--h));
    white-space: nowrap;
    font-size: calc(2.4 * var(--h));
    line-height: 1.4;
    color: var(--ink-soft);
}

[dir="rtl"] .prices .oval .waiting { right: auto; left: calc(100% - 2.08 * var(--h)); direction: rtl; }

/* The price that fits the purse: the school's wax seal on the ring and a cream ribbon beside it. */
.prices .oval .seal {
    position: absolute;
    left: calc(54.12 * var(--h));
    top: calc(-2.22 * var(--h));
    width: calc(8.4 * var(--h));
    height: calc(8.4 * var(--h));
}

.prices .oval .ribbon {
    position: absolute;
    left: calc(63.3 * var(--h));
    top: 0;
    padding: calc(0.4 * var(--h)) calc(1.2 * var(--h));
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(0.8 * var(--h));
    background: var(--card-paper);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transform-origin: 0 0;
    transform: rotate(7deg);
    white-space: nowrap;
    font-size: calc(2.2 * var(--h));
    line-height: 1.3;
    color: var(--ink);
}

/* ‹ and ›: the kit's round ivory button with a navy chevron; the dearer way is the way the line runs. */
.prices .step {
    position: absolute;
    top: calc(53 * var(--h));
    width: var(--arrow);
    height: var(--arrow);
    background: var(--round-plain, url("../art/kit/flat/round-plain.png")) center / 100% 100% no-repeat;
    transform: translate(-50%, -50%);
}

.prices .step.cheaper { left: calc(50% - var(--reach)); }
.prices .step.dearer { left: calc(50% + var(--reach)); }
[dir="rtl"] .prices .step.cheaper { left: calc(50% + var(--reach)); }
[dir="rtl"] .prices .step.dearer { left: calc(50% - var(--reach)); }

.prices .step i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--arrow) * 0.27);
    height: calc(var(--arrow) * 0.27);
    border-top: max(3px, calc(var(--arrow) * 0.085)) solid var(--paper-ink);
    border-right: max(3px, calc(var(--arrow) * 0.085)) solid var(--paper-ink);
    border-radius: 1px;
    transform: translate(-70%, -50%) rotate(45deg);
}

.prices .step.cheaper i { transform: translate(-30%, -50%) rotate(-135deg); }
[dir="rtl"] .prices .step.cheaper i { transform: translate(-70%, -50%) rotate(45deg); }
[dir="rtl"] .prices .step.dearer i { transform: translate(-30%, -50%) rotate(-135deg); }

.prices .step:not(:disabled):hover { filter: brightness(1.1); }
.prices .step:disabled { opacity: 0.35; }

/* The dots under the table: one for each price in the hall, the one on show in navy. */
.prices .dots {
    position: absolute;
    left: 50%;
    top: calc(76.5 * var(--h));
    display: flex;
    transform: translate(-50%, -50%);
}

.prices .dots button {
    width: calc(5 * var(--h));
    height: calc(5 * var(--h));
    display: grid;
    place-items: center;
}

.prices .dots button::before {
    content: "";
    width: calc(1.8 * var(--h));
    height: calc(1.8 * var(--h));
    border-radius: 50%;
    background: rgba(176, 147, 94, 0.8);
}

.prices .dots button.poor::before { background: rgba(176, 147, 94, 0.35); }
.prices .dots button.chosen::before { width: calc(2.23 * var(--h)); height: calc(2.23 * var(--h)); background: var(--paper-ink); }

/* ---- what the winners take, the one button, and the house's tenth ---- */

.prices > p {
    position: absolute;
    left: calc(3 * var(--h));
    right: calc(3 * var(--h));
    text-align: center;
    white-space: nowrap;
}

.prices .takes { top: calc(78.5 * var(--h)); font-size: calc(2.86 * var(--h)); line-height: 1.27; color: var(--ink); }

.prices .sit {
    left: 50%;
    top: calc(81.8 * var(--h));
    width: calc(50 * var(--h));
    padding: 0 calc(5.7 * var(--h));
    font-size: calc(3.4 * var(--h));
    transform: translateX(-50%);
}

.prices .foot { top: calc(90.8 * var(--h)); font-size: calc(2.2 * var(--h)); line-height: 1.5; color: var(--ink-soft); }
.prices .asking { top: calc(58 * var(--h)); font-size: calc(3 * var(--h)); color: var(--ink-soft); }

/* What went wrong, under the panel on the sky. */
.prices .trouble {
    top: calc(95.9 * var(--h));
    font-size: calc(2.4 * var(--h));
    line-height: 1.5;
    color: var(--title-paper);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Persian: everything keeps its place, the cards stand at the panel's far end with the first
   hall on the right, the chosen card leans the other way, and the words run from the right. */
[dir="rtl"] .online.prices { direction: ltr; }
[dir="rtl"] .prices .halls { margin-left: auto; flex-direction: row-reverse; }
[dir="rtl"] .prices .hall .label { font-size: calc(2.2 * var(--h)); }
[dir="rtl"] .prices .hall.chosen { transform: translateY(calc(-2.5 * var(--h))) rotate(4deg) scale(1.1); }
[dir="rtl"] .online.prices .title { min-width: 0; flex: 0 1 auto; overflow: hidden; overflow: clip visible; }

[dir="rtl"] .prices .title,
[dir="rtl"] .prices .hall .label,
[dir="rtl"] .prices .kit > span,
[dir="rtl"] .prices .oval .pot,
[dir="rtl"] .prices .oval .ribbon,
[dir="rtl"] .prices > p { direction: rtl; }

/* ---- night (Night.cs): the sky under a lapis veil, the panel lapis with cream words and the same
   ochre edge, the ivory enamel turned to lapis (its pictures handed in by the page), and what is
   painted bright brought down a little (Night.Painted) ---- */

.online.prices.night {
    --paper: #18213f;
    --edge: #9a7f4c;
    --card-paper: #212c50;
    --tab-paper: #2a3762;
    --paper-ink: #eee2c3;
    --ink: #f0e5c9;
    --ink-soft: #c2b28f;
    --cobalt: #9fb5ec;
    background: linear-gradient(rgba(5, 9, 23, 0.55), rgba(5, 9, 23, 0.55)), url("../art/online/ground.jpg") center / cover;
}

.prices.night .kit::before,
.prices.night .kit::after,
.prices.night .purse .plus,
.prices.night .step,
.prices.night .purse img { filter: brightness(0.84); }

.prices.night button.kit:not(:disabled):active::before { filter: brightness(0.75); }

/* The suns: a shade lighter than the lapis paper (DrawSun's night tint laid over the picture). */
.prices.night .sheet { background-image: none; }

.prices.night .sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
    background-color: rgb(82, 92, 133);
    background-blend-mode: multiply;
    -webkit-mask-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
    mask-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
}

.prices.night .sheet::before {
    background-size: calc(6 * var(--h)) calc(6 * var(--h));
    -webkit-mask-size: calc(6 * var(--h)) calc(6 * var(--h));
    mask-size: calc(6 * var(--h)) calc(6 * var(--h));
    background-position: left calc(1.2 * var(--h)) top calc(1.2 * var(--h)), right calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)), right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h));
    -webkit-mask-position: left calc(1.2 * var(--h)) top calc(1.2 * var(--h)), right calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)), right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h));
    mask-position: left calc(1.2 * var(--h)) top calc(1.2 * var(--h)), right calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)), right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h));
    background-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.prices.night .hall .leaf { border-color: rgba(238, 226, 195, 0.7); }
.prices.night .hall.chosen .leaf { border-color: var(--paper-ink); box-shadow: 0 0 calc(1.1 * var(--h)) rgba(255, 245, 209, 0.35); }
.prices.night .oval .ribbon { border-color: rgba(52, 80, 156, 0.35); }
.prices.night .dots button::before { background: rgba(154, 127, 76, 0.8); }
.prices.night .dots button.poor::before { background: rgba(154, 127, 76, 0.35); }
.prices.night .dots button.chosen::before { background: #34509c; }

/* cups.css */
/* The tournaments (CupsBill.cs): a row of posters over the tournaments' windy sky. Places and
   sizes are laid in pixels by the page from its own size, in the shares of the screen's height
   the game measures them in; what is here is how each piece looks. */

.cuphall {
    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    --u: var(--h);
    overflow: hidden;
    background: url("../art/cups/ground.jpg") center / cover;
    color: #2a1d10;
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.cuphall button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.cuphall button:disabled { cursor: var(--arrow); }
.cuphall img { display: block; pointer-events: none; }

.cuphall .say,
.cuphall .title,
.cuphall .back,
.cuphall .wallet,
.cuphall .chips,
.cuphall .row,
.cuphall .bill,
.cuphall .panel,
.cuphall .band,
.cuphall .piece,
.cuphall .plate,
.cuphall .badge i,
.cuphall .behind,
.cuphall .gold-line,
.cuphall .dial,
.cuphall .mark,
.cuphall .press,
.cuphall .stripe,
.cuphall .dots {
    position: absolute;
    box-sizing: border-box;
}

/* A line of text laid where the game writes it: its box starts a little over its baseline. */
.cuphall .say {
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, given back by the margin so the line does not move. */
    padding-block: 0.25em;
    margin-top: -0.25em;
    pointer-events: none;
}

.cuphall .bold { font-weight: 700; }

/* A poster's name, in the title's hand: the serif a little bolder, its letters set apart. */
.cuphall .say.named {
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.1;
}

/* What only says where things stand: words in the middle of their box, a second line if it needs one. */
.cuphall .say.soft {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    /* Its own box holds it: none of the room a laid line gets. */
    padding-block: 0;
    margin-top: 0;
}

.cuphall .say.wraps { white-space: normal; align-items: flex-start; }

/* ---- the way back, the name of the screen and the purse (Kit.Back, Kit.Title, Kit.Purse) ---- */

.cuphall .back {
    display: flex;
    align-items: center;
    isolation: isolate;
    color: #16234f;
    filter: drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3));
}

.cuphall .back::before,
.cuphall .purse::before,
.cuphall .press::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(3.9 * var(--u)) stretch;
}

.cuphall .back:hover { filter: brightness(1.08) drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3)); }
.cuphall .back:active::before { border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png")); transform: translateY(2px); }

.cuphall .back .arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(7.8 * var(--u));
    height: calc(7.8 * var(--u));
    fill: #16234f;
    stroke: #16234f;
    stroke-width: 7.5;
}

.cuphall .back .word,
.cuphall .press .word {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    text-align: center;
    font-size: var(--fs);
    font-weight: 700;
}

.cuphall .back .word {
    margin-left: calc(4.3 * var(--u));
    padding: 0 calc(2 * var(--u)) 0 0;
}

.cuphall .title {
    margin: 0;
    font-size: var(--fs);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    color: #f7ecd2;
    -webkit-text-stroke: max(6px, calc(var(--fs) / 6)) #1e1712;
    paint-order: stroke fill;
}

.cuphall .purse {
    display: flex;
    align-items: center;
    gap: calc(1.4 * var(--u));
    padding: 0 calc(3.6 * var(--u)) 0 calc(2.6 * var(--u));
    isolation: isolate;
    color: #16234f;
    font-size: var(--fs);
    filter: drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3));
}

.cuphall .purse { position: relative; }
.cuphall .purse b { font-weight: 800; }
.cuphall .purse:hover { filter: brightness(1.08) drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3)); }

.cuphall .wallet {
    display: flex;
    align-items: center;
}

/* The round navy plus beside the purse. */
.cuphall .plus {
    position: relative;
    flex: none;
    background: var(--round-main, url("../art/kit/flat/round-main.png")) center / 100% 100% no-repeat !important;
}

.cuphall .plus::before,
.cuphall .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    height: max(2px, 8%);
    border-radius: 1px;
    background: #f6ecd4;
    transform: translate(-50%, -50%);
}

.cuphall .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.cuphall .plus:hover { filter: brightness(1.15); }

/* ---- the chips that sift the row ---- */

.cuphall .chips {
    display: flex;
    align-items: center;
    font-size: var(--fs);
}

.cuphall .chip {
    box-sizing: border-box;
    white-space: nowrap;
    border: solid #e2b64a !important;
    background: rgba(22, 35, 79, 0.72) !important;
    color: #f6ecd4 !important;
}

.cuphall .chip:hover { background: rgba(22, 35, 79, 0.86) !important; }

.cuphall .chip.lit {
    background: #f6e6c0 !important;
    color: #16234f !important;
    font-weight: 700;
}

/* ---- the row, and a poster ---- */

/* The row covers the whole page, over the way back, the purse and the chips: only its posters
   take a press, or nothing above them could be pressed. */
.cuphall .row { inset: 0; pointer-events: none; }
.cuphall .row > * { pointer-events: auto; }

/* A press on a neighbour, or a finger drawn across, brings the next one in from its side. */
.cuphall .row.slide { animation: cups-slide 0.24s cubic-bezier(0.33, 1, 0.68, 1); }

@keyframes cups-slide {
    from { transform: translateX(var(--from)); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}

.cuphall .bill { display: block; text-align: initial; }

.cuphall .bill.side { filter: brightness(0.86); transition: filter 0.12s; }
.cuphall .bill.side:hover { filter: none; }

.cuphall .panel {
    background: #f5e8c9;
    border-style: solid;
    border-color: #b0935e;
}

.cuphall .panel .sun { position: absolute; }

.cuphall .band {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: #e2b64a;
    color: #f6ecd4;
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
}

.cuphall .band svg,
.cuphall .band img { flex: none; }

.cuphall .plate {
    display: block;
    background: #fbf4e2;
    border-style: solid;
    border-color: #b0935e;
}

.cuphall .badge i {
    display: block;
    border-radius: 50%;
    background: #f6e6c0;
}

.cuphall .behind { pointer-events: none; overflow: visible; }

/* The gold line under the podium: the pot and the farr, between two thin rules that end in a star. */
.cuphall .gold-line {
    display: flex;
    align-items: center;
    font-size: var(--fs);
    line-height: 1;
    color: #2a1d10;
    pointer-events: none;
}

.cuphall .gold-line span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
}

.cuphall .gold-line .rule {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: max(1px, calc(0.2 * var(--u)));
    margin-top: calc(-0.1 * var(--fs));
    background: #e2b64a;
}

.cuphall .gold-line .rule b {
    position: absolute;
    top: 50%;
    background: #e2b64a;
    clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
    transform: translate(-50%, -50%);
}

.cuphall .gold-line .rule:first-child b { left: 0; }
.cuphall .gold-line .rule:last-child b { left: 100%; }
.cuphall .gold-line[dir="rtl"] .rule:first-child b { left: 100%; }
.cuphall .gold-line[dir="rtl"] .rule:last-child b { left: 0; }

.cuphall .stripe { display: block; background: rgba(31, 63, 143, 0); }
.cuphall .stripe.odd { background: rgba(31, 63, 143, 0.05); }
.cuphall .stripe.mine { background: rgba(31, 63, 143, 0.18); }

.cuphall .dial,
.cuphall .mark,
.cuphall .dots { pointer-events: none; overflow: visible; }



/* ---- the one thing to press: the kit's enamel, navy for the one thing to do, ivory for leaving ---- */

.cuphall .press {
    display: flex;
    align-items: center;
    isolation: isolate;
    filter: drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3));
}

.cuphall .press::before { border-image-width: 0 var(--cap); }

.cuphall .press.main { color: #f6ecd4; }
.cuphall .press.main::before { border-image-source: var(--main, url("../art/kit/flat/button-main.png")); }
.cuphall .press.main:active::before { border-image-source: var(--main-down, url("../art/kit/flat/button-main-down.png")); }
.cuphall .press.plain { color: #16234f; }
.cuphall .press.plain:active::before { border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png")); }
.cuphall .press:hover { filter: brightness(1.08) drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3)); }

/* Persian: the places are mirrored by the page, and the words are written from the right. */
[dir="rtl"] .cuphall { font-family: var(--face); }
[dir="rtl"] .cuphall .say,
[dir="rtl"] .cuphall .title,
[dir="rtl"] .cuphall .back .word,
[dir="rtl"] .cuphall .press .word { direction: rtl; }
[dir="rtl"] .cuphall .title,
[dir="rtl"] .cuphall .say.named { letter-spacing: 0; }
[dir="rtl"] .cuphall .title { text-align: left; }


/* The play online and circle pages' header: where I am, large, and the other ways beside it to go to. */

.online h1 {
    display: flex;
    align-items: baseline;
    gap: calc(4 * var(--h));
}

.online h1 .other {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cream);
    opacity: 0.6;
    font: inherit;
    font-size: calc(3.4 * var(--h));
    letter-spacing: 0.04em;
    text-shadow: inherit;
    cursor: var(--point);
}

.online h1 .other:hover { opacity: 1; }
.online h1 .other:disabled { opacity: 0.25; cursor: var(--arrow); }

/* A tournament table's result, as the table shows it (Table.razor). */
.result .cup {
    max-width: 78%;
    font-size: calc(2.6 * var(--h));
    color: var(--cobalt);
    text-align: center;
}

/* gestures.css */
/* What is done at a table beside the cards: my two buttons and the tray over them, a phrase on
   its plate by the chair that said it, a thing thrown through the air, and what a face wears
   afterwards. Places are the chairs': 0 mine at the bottom left, then round the way the turn goes. */

.table {
    /* The middle of each chair's frame, which is where a phrase is said from and a throw lands. */
    --seat-0-x: calc(17.5 * var(--h));
    --seat-0-y: calc(86 * var(--h));
    --seat-1-x: calc(var(--w) - 11.5 * var(--h));
    --seat-1-y: calc(84 * var(--h));
    --seat-2-x: calc(var(--w) - 11.5 * var(--h));
    --seat-2-y: calc(15 * var(--h));
    --seat-3-x: calc(11.5 * var(--h));
    --seat-3-y: calc(15 * var(--h));
}

.my-buttons {
    position: absolute;
    left: calc(1.2 * var(--h));
    bottom: calc(2 * var(--h));
    display: grid;
    gap: calc(1.2 * var(--h));
}

.my-buttons button {
    width: calc(6.6 * var(--h));
    height: calc(6.6 * var(--h));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: var(--point);
    transition: transform 0.12s;
}

.my-buttons button img { width: 100%; height: 100%; display: block; }
.my-buttons button:hover { transform: scale(1.08); }
.my-buttons button.on { filter: drop-shadow(0 0 calc(1 * var(--h)) rgba(255, 214, 90, 1)); }

.tray {
    position: absolute;
    left: calc(9 * var(--h));
    bottom: calc(27 * var(--h));
    max-width: calc(64 * var(--h));
    display: flex;
    flex-wrap: wrap;
    gap: calc(1 * var(--h));
    padding: calc(1.6 * var(--h));
    border-radius: calc(1.6 * var(--h));
    background: rgba(246, 230, 192, 0.97);
    border: calc(0.35 * var(--h)) solid var(--gold);
    box-shadow: 0 calc(0.8 * var(--h)) calc(2.4 * var(--h)) rgba(0, 0, 0, 0.4);
    z-index: 4;
}

.tray button {
    padding: calc(0.7 * var(--h)) calc(1.8 * var(--h));
    border: calc(0.2 * var(--h)) solid var(--gold);
    border-radius: calc(2.4 * var(--h));
    background: #fffaf0;
    color: var(--ink);
    font: inherit;
    font-size: calc(2.6 * var(--h));
    cursor: var(--point);
}

.tray button:hover { background: #fff; border-color: var(--navy); }
.tray button.face { padding: calc(0.2 * var(--h)) calc(1 * var(--h)); font-size: calc(4.2 * var(--h)); line-height: 1.2; }

/* The tray of things as the game lays it (Tray): six places and the pen on one plate, each place a
   paper disc with the thing's picture and its name under it, and at a table of the house how many
   are left on a small navy pill. Sizes are the game's pixels on a table 720 high. */
.tray.things {
    max-width: none;
    display: grid;
    gap: calc(0.6 * var(--h));
    padding: calc(1.7 * var(--h));
}

.tray.things .places { display: flex; gap: calc(1.4 * var(--h)); }

/* A place is not one of the phrase buttons: no box of its own, only its disc. */
.tray.things .place,
.tray.things .place:hover { padding: 0; border: 0; border-radius: 0; background: none; }

.tray.things .hint,
.picker .hint {
    margin: 0;
    text-align: center;
    font-size: calc(2.1 * var(--h));
    line-height: 1.25;
    color: #a8151c;
}

.place {
    position: relative;
    width: calc(8.9 * var(--h));
    height: calc(11.7 * var(--h));
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font: inherit;
    color: var(--ink);
    cursor: var(--point);
}

.place .disc {
    position: relative;
    width: calc(7.5 * var(--h));
    height: calc(7.5 * var(--h));
    margin-top: calc(0.15 * var(--h));
    flex: none;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fbf3e0;
    border: max(1px, calc(0.14 * var(--h))) solid rgba(22, 35, 79, 0.35);
    transition: transform 0.12s;
}

.place:hover .disc { transform: scale(1.06); }
.place.lit .disc { border: max(2px, calc(0.42 * var(--h))) solid var(--cobalt, #16234f); }

.place .disc img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 81%;
    height: 81%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

/* The pen on its disc is smaller than a thing (Tray.DrawPen). */
.place:last-child .disc img[src*="pen"] { width: 66%; height: 66%; }

.place b {
    margin-top: calc(0.4 * var(--h));
    width: max-content;
    max-width: 130%;
    font-weight: 400;
    font-size: calc(1.8 * var(--h));
    line-height: 1.1;
    text-align: center;
}

.place.lit b { color: var(--cobalt, #16234f); font-weight: 700; }

/* None left, or a guest: the disc is washed over with paper and the name fades. */
.place.none .disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(251, 243, 224, 0.66);
}

.place.none b { color: var(--ink-soft); opacity: 0.6; }

/* How many are left, on a dark pill with a gold edge, at the disc's bottom right; none in red. */
.place .count {
    position: absolute;
    left: 87%;
    top: 87%;
    transform: translate(-50%, -50%);
    min-width: calc(2.6 * var(--h));
    padding: 0 calc(0.6 * var(--h));
    box-sizing: border-box;
    border-radius: calc(2 * var(--h));
    background: #16234f;
    border: 1px solid rgba(226, 182, 74, 0.7);
    color: #f3e3b8;
    font-weight: 700;
    font-size: calc(1.7 * var(--h));
    line-height: calc(2.5 * var(--h));
    z-index: 1;
}

.place .count.out { color: #ff9a8a; }

/* The plus: alone and faint on an empty place, on a round navy seal at the top right of one with none left. */
.place .plus,
.place .seal {
    position: absolute;
    --arm: calc(2.4 * var(--h));
    --thick: max(1.5px, calc(0.35 * var(--h)));
    background:
        linear-gradient(currentColor, currentColor) center / var(--arm) var(--thick) no-repeat,
        linear-gradient(currentColor, currentColor) center / var(--thick) var(--arm) no-repeat;
}

.place .plus { inset: 0; color: rgba(22, 35, 79, 0.55); }

.place .seal {
    --arm: calc(1.2 * var(--h));
    --thick: max(1.5px, calc(0.28 * var(--h)));
    left: 87%;
    top: 13%;
    width: calc(2.3 * var(--h));
    height: calc(2.3 * var(--h));
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #16234f;
    color: #f3e3b8;
    z-index: 1;
}

/* The picker over the table (TrayPicker): the kit's panel, solid, in the middle; the six places two
   across and three down with done under them on one side, every thing on the other. */
.picker {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: calc(1.6 * var(--h)) calc(3.3 * var(--h)) calc(3.3 * var(--h));
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "title title" "line line" "side all";
    column-gap: calc(3.3 * var(--h));
    z-index: 21;
}

.picker .title {
    grid-area: title;
    text-align: center;
    font-weight: 400;
    font-size: calc(3.6 * var(--h));
    line-height: 1.4;
    color: var(--cobalt, #16234f);
}

.picker .line {
    grid-area: line;
    margin-bottom: calc(2 * var(--h));
    text-align: center;
    font-size: calc(2.1 * var(--h));
    color: var(--ink-soft);
}

.picker .side { grid-area: side; display: grid; align-content: start; gap: calc(1.1 * var(--h)); width: calc(19.5 * var(--h)); }
.picker .six { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; row-gap: calc(1.1 * var(--h)); }

.picker .done {
    --bh: calc(6.4 * var(--h));
    position: relative;
    isolation: isolate;
    height: var(--bh);
    margin-top: calc(0.6 * var(--h));
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: calc(2.6 * var(--h));
    color: var(--cream);
    cursor: var(--point);
}

.picker .done::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.picker .all { grid-area: all; }
.picker .grid { display: grid; grid-template-columns: repeat(8, calc(8.9 * var(--h))); gap: calc(0.8 * var(--h)); }
.picker .grid .place { height: calc(11.1 * var(--h)); }
.picker .grid .place b { font-size: calc(1.55 * var(--h)); }

/* The rule over the modern row, its name in the middle of it. */
.picker .rule {
    display: flex;
    align-items: center;
    gap: calc(1.4 * var(--h));
    height: calc(4.2 * var(--h));
    font-size: calc(1.95 * var(--h));
    color: var(--ink-soft);
}

.picker .rule::before,
.picker .rule::after { content: ""; flex: 1; height: 1px; background: #b0935e; }

/* A chair that can be thrown at, while something is in my hand. */
.seat.target { cursor: var(--point); }
.seat.target .portrait { animation: breathe 0.7s ease-in-out infinite alternate; }

/* A phrase: the painted plate, by the chair, towards the table. */
.said {
    position: absolute;
    min-width: calc(22 * var(--h));
    max-width: calc(40 * var(--h));
    padding: calc(1.6 * var(--h)) calc(3.4 * var(--h));
    box-sizing: border-box;
    background: url("../art/table/said.png") center / 100% 100% no-repeat;
    text-align: center;
    font-size: calc(2.8 * var(--h));
    line-height: 1.15;
    color: var(--ink);
    animation: said-in 0.22s ease-out backwards;
    pointer-events: none;
    z-index: 3;
}

.said.face { min-width: 0; padding: calc(0.6 * var(--h)) calc(2.6 * var(--h)); font-size: calc(5.4 * var(--h)); }

.said.place-0 { left: calc(27 * var(--h)); bottom: calc(27 * var(--h)); }
.said.place-1 { right: calc(22 * var(--h)); bottom: calc(27 * var(--h)); }
.said.place-2 { right: calc(22 * var(--h)); top: calc(29 * var(--h)); }
.said.place-3 { left: calc(22 * var(--h)); top: calc(29 * var(--h)); }

@keyframes said-in {
    from { transform: scale(0.6); opacity: 0; }
}

/* A thing thrown (toss.js lays the pieces in it and moves them): a layer at the table's corner,
   over every card and under the dialogs. One thrown at me is the glass: it covers the table, and
   what sticks to it takes the tap that wipes it. */
.toss {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 6;
}

.toss.glass {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 7;
}

.toss .piece {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.toss .shade {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.toss .wisp {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.95), rgba(90, 80, 70, 0.25) 60%, rgba(0, 0, 0, 0) 100%);
    filter: blur(1px);
    pointer-events: none;
}

/* A striker's thump on my glass shakes the whole table once. */
.table.thump {
    animation: thump 0.3s ease-out;
}

@keyframes thump {
    0% { translate: 0 0; }
    20% { translate: calc(0.9 * var(--h)) calc(0.5 * var(--h)); }
    45% { translate: calc(-0.7 * var(--h)) calc(-0.4 * var(--h)); }
    70% { translate: calc(0.4 * var(--h)) calc(0.2 * var(--h)); }
    100% { translate: 0 0; }
}

/* The dialogs and what is asked at the table stand over whatever is thrown. */
.naming, .result { z-index: 8; }
.tray { z-index: 9; }

/* What a chair has thrown this round: a small disc beside its frame with the thing on it, and
   how many when more than one. */
.seat .mood {
    position: absolute;
    right: -14%;
    top: 50%;
    width: 30%;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 4%;
    object-fit: contain;
    border-radius: 50%;
    background: var(--cream);
    border: calc(0.3 * var(--h)) solid var(--gold);
    transform: translateY(-50%);
    pointer-events: none;
}

.seat .mood-count {
    position: absolute;
    right: -18%;
    top: 36%;
    min-width: calc(2.6 * var(--h));
    border-radius: calc(2 * var(--h));
    background: var(--red);
    color: var(--cream);
    text-align: center;
    font-size: calc(1.8 * var(--h));
    line-height: calc(2.6 * var(--h));
}

.seat.place-1 .mood, .seat.place-2 .mood { right: auto; left: -14%; }
.seat.place-1 .mood-count, .seat.place-2 .mood-count { right: auto; left: -18%; }

/* What a chair says, as the game draws it from the corners (SeatPlate.DrawSaid): the painted
   plate drawn out to the words with its ends kept, its letters a share of the screen's height,
   one line or two broken near the middle, and a tail in the plate's cobalt and cream towards the
   chair that said it. The page sets its middle, its edge towards the chair and its letter size. */
.table .said {
    right: auto;
    top: auto;
    translate: -50% 0;
    min-width: 0;
    max-width: 11em;
    padding: 0.375em 0.9em;
    box-sizing: content-box;
    background: none;
    border-style: solid;
    border-width: 0;
    border-image: url("../art/table/said.png") 67 fill / 1em 0.9em;
    line-height: 1.25em;
    text-wrap: balance;
    color: var(--ink);
    filter: drop-shadow(0 0.14em 0.2em rgba(0, 0, 0, 0.3));
    transform-origin: 50% calc(100% + 0.6em);
    animation: said-spring 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.table .said.place-2,
.table .said.place-3 { transform-origin: 50% -0.6em; }

.table .said.face { padding: 0.2em 0.9em; max-width: none; font-size: inherit; }
.table .said.face span { font-size: 1.65em; line-height: 1; }

.table .said::before,
.table .said::after {
    content: "";
    position: absolute;
    left: calc(50% - 0.45em);
    width: 0.9em;
    top: calc(100% - max(2px, 0.12em) - 1px);
    height: calc(0.6em + max(2px, 0.12em) + 1px);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--cobalt);
}

.table .said::after {
    left: calc(50% - 0.45em + max(2px, 0.12em));
    width: calc(0.9em - 2 * max(2px, 0.12em));
    height: calc(0.6em - 1.6 * max(2px, 0.12em) + max(2px, 0.12em) + 1px);
    background: #f8e6ac;
}

.table .said.place-2::before,
.table .said.place-3::before,
.table .said.place-2::after,
.table .said.place-3::after {
    top: auto;
    bottom: calc(100% - max(2px, 0.12em) - 1px);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

@keyframes said-spring {
    from { transform: scale(0); }
}

/* What my buttons open stands over them, hard by their column (TableLayout.CornerOpens). */
.table .tray,
.table .sort-panel {
    top: auto;
    right: auto;
}

/* patoq.css */
/* The circle's page (PatoqView.cs, PatoqFriends.cs). Its places and sizes are laid in pixels by
   the page from its own size, in the shares of the screen's height the game measures them in;
   --u is a hundredth of that height, for what stands in a line of its own. What is here is how
   each piece looks: the kit's enamel, panel and cards, the standing cards, the emblems. */

.patoq {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #123d36 url("../art/patoq/ground.jpg") center / cover;
    color: #2a1d10;
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

/* On a phone or tablet held upright, which a browser will not always turn, the page is laid on
   its side, as the table and the play online page are, so turning it is all it takes. An upright
   window on a desk keeps it upright, and the lists take the height it has over (Kit.Seat). */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    html .patoq {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

.patoq button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.patoq button:disabled { cursor: var(--arrow); }
.patoq img { display: block; pointer-events: none; }
.patoq p { margin: 0; }

.patoq .say,
.patoq .title,
.patoq .back,
.patoq .tab,
.patoq .medal *,
.patoq .disc *,
.patoq .crown,
.patoq .plate,
.patoq .panel,
.patoq .head,
.patoq .shelf,
.patoq .room,
.patoq .strip,
.patoq .news,
.patoq .medallion,
.patoq .picture,
.patoq .worn,
.patoq .seal,
.patoq .plaque-words,
.patoq .pq-said,
.patoq .chair,
.patoq .outline,
.patoq .buttons,
.patoq .shade,
.patoq .field,
.patoq > button.kit,
.patoq .tablet > button.kit {
    position: absolute;
    box-sizing: border-box;
}

/* A line of text laid where the game writes it: its box starts a little over its baseline. */
.patoq .say {
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, given back by the margin so the line does not move. */
    padding-block: 0.25em;
    margin-top: -0.25em;
    pointer-events: none;
}

.patoq .bold { font-weight: 700; }

.patoq .farr img {
    display: inline-block;
    height: 1.3em;
    margin-inline-end: 0.25em;
    vertical-align: -0.29em;
}

/* ---- the way back and the name of the screen (Kit.Back, Kit.Title) ---- */

.patoq .back {
    display: flex;
    align-items: center;
    isolation: isolate;
    color: #16234f;
    filter: drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3));
}

.patoq .back::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(3.9 * var(--u)) stretch;
}

.patoq .back:hover { filter: brightness(1.08) drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.3)); }
.patoq .back:active::before { border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png")); transform: translateY(2px); }

.patoq .back .arrow {
    position: absolute;
    left: 0;
    top: 0;
    fill: #16234f;
    stroke: #16234f;
    stroke-width: 7.5;
}

.patoq .back .word {
    flex: 1;
    min-width: 0;
    margin-left: calc(4.3 * var(--u));
    padding: 0 calc(2 * var(--u)) 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    font-size: var(--fs);
    font-weight: 700;
}

.patoq .title {
    margin: 0;
    font-size: var(--fs);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    color: #f7ecd2;
    -webkit-text-stroke: max(6px, calc(var(--fs) / 6)) #1e1712;
    paint-order: stroke fill;
}

/* ---- the kit's enamel (Kit.Button): ivory, navy, and ivory with crimson words ---- */

.patoq .kit {
    --bh: calc(7.2 * var(--u));
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    flex: none;
    height: var(--bh);
    min-width: calc(var(--bh) * 1.6);
    padding: 0 calc(var(--bh) * 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(1 * var(--u));
    font-size: var(--fs, calc(2.7 * var(--u)));
    font-weight: 700;
    line-height: 1;
    color: #16234f;
    white-space: nowrap;
    filter: drop-shadow(0 calc(0.25 * var(--u)) calc(0.35 * var(--u)) rgba(0, 0, 0, 0.25));
}

.patoq .kit.small { font-size: var(--fs, calc(2.1 * var(--u))); }
.patoq .kit > span { min-width: 0; overflow: hidden; white-space: nowrap; padding-block: 0.25em; }
.patoq .kit.main { color: #f6ecd4; }
.patoq .kit.danger { color: #a8151c; }

.patoq .kit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.patoq .kit.main::before { border-image: var(--main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--bh) * 0.518) stretch; }

.patoq .kit .icon {
    display: inline-flex;
    flex: none;
    width: 1.05em;
    height: 1.05em;
}

.patoq .kit .icon svg { width: 100%; height: 100%; display: block; }

.patoq button.kit:not(:disabled):hover { filter: brightness(1.1) drop-shadow(0 calc(0.25 * var(--u)) calc(0.35 * var(--u)) rgba(0, 0, 0, 0.25)); }
.patoq button.kit:disabled { opacity: 0.5; }

/* Pressed, the enamel sinks under the finger and its words go down with it. */
.patoq button.kit:not(:disabled):active { padding-top: max(3px, calc(var(--bh) * 0.07)); }

.patoq button.kit:not(:disabled):active::before {
    border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png"));
    transform: translateY(max(2px, calc(var(--bh) * 0.035)));
    filter: brightness(0.9);
}

.patoq button.kit.main:not(:disabled):active::before { border-image-source: var(--main-down, url("../art/kit/flat/button-main-down.png")); }

/* A chip of the rankings or a choice in the settings: the same enamel, the one on show navy. */
.patoq .pill {
    position: relative;
    flex: none;
    isolation: isolate;
    box-sizing: border-box;
    color: #16234f;
    font-size: var(--fs);
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}

.patoq .pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--pill) * 0.5) stretch;
}

.patoq .pill.on { color: #f6ecd4; }
.patoq .pill.on::before { border-image-source: var(--main, url("../art/kit/flat/button-main.png")); }
.patoq .pill:not(:disabled):hover { filter: brightness(1.12); }
.patoq .pill:not(:disabled):active::before { border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png")); transform: translateY(2px); }

/* A round button that is only its icon, lifting a little under the pointer. */
.patoq .round { flex: none; transition: transform 0.1s; }
.patoq .round svg { width: 100%; height: 100%; display: block; }
.patoq .round:hover { transform: translateY(-5%); }

/* The kit's field (Kit.Field). */
.patoq .field {
    min-width: 0;
    padding: 0 calc(2.4 * var(--u));
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--field, url("../art/kit/field.png")) 0 118 fill / 0 calc(3 * var(--u)) stretch;
    background: none;
    outline: none;
    color: #2a1d10;
    font-family: inherit;
    font-size: var(--fs, calc(2.6 * var(--u)));
    user-select: text;
    -webkit-user-select: text;
}

.patoq .field::placeholder { color: rgba(107, 83, 50, 0.65); }
.patoq .setting .field,
.patoq .chat .field { position: relative; flex: none; }

/* ---- the kit's panel, its cards ---- */

.patoq .panel {
    background: #f5e8c9;
    border-style: solid;
    border-color: #b0935e;
}

.patoq .panel .sun { position: absolute; }

.patoq .plate {
    display: block;
    background: #fbf4e2;
    border-style: solid;
    border-color: rgba(22, 35, 79, 0.35);
}

.patoq .plate.lit { border-color: #16234f; }

.patoq .plaque-words {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--fs);
    line-height: 1.35;
    color: #6b5332;
}

/* A place on its disc, a rank's medal. */
.patoq .disc,
.patoq .medal { display: contents; }

.patoq .disc b {
    display: grid;
    place-items: center;
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1;
}

.patoq .medal .shade {
    display: block;
    background: radial-gradient(circle closest-side, rgba(42, 29, 16, 0.4) 68%, rgba(42, 29, 16, 0.16) 84%, rgba(42, 29, 16, 0) 100%);
}

/* ---- the shelf: my friends, the asks waiting, my circles ---- */

.patoq .shelf {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(247, 236, 210, 0.4) transparent;
}

.patoq .shelf .column { display: flex; flex-direction: column; }

.patoq .tablet {
    position: relative;
    flex: none;
    display: block;
    text-align: start;
}

.patoq button.tablet:not(:disabled):hover .plate { background: #fffaf0; }

.patoq .medallion {
    display: block;
    border-radius: 50%;
    border-style: solid;
    border-color: #b0935e;
    background: #16234f;
}

.patoq .picture { object-fit: contain; }

.patoq .seal {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #a8151c;
    color: #f6e6c0;
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1;
}

.patoq .worn { display: block; }

/* ---- an emblem: the tinted field, the symbol, the rim ---- */

.emblem {
    position: relative;
    display: inline-block;
    width: var(--size);
    aspect-ratio: 1;
    flex: none;
}

.emblem .ground,
.emblem .rim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.emblem .ground {
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.emblem .symbol {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* A circle the house has said no emblem for: its first letter on a navy medallion. */
.emblem b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #16234f;
    border: max(1px, calc(var(--size) * 0.04)) solid #b0935e;
    color: #f7ecd2;
    font-size: calc(var(--size) * 0.45);
    font-weight: 700;
    line-height: 1;
}

/* ---- the page: the head on the ground, the standing cards, the panel ---- */

.patoq .head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    color: #f7ecd2;
}

.patoq .head .named-line {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.patoq .head .named {
    min-width: 0;
    font-size: var(--fs);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    padding-block: 0.1em;
    -webkit-text-stroke: max(6px, calc(var(--fs) / 6)) #1e1712;
    paint-order: stroke fill;
}

.patoq .head .counted {
    font-size: var(--fs);
    white-space: nowrap;
    overflow: hidden;
    color: rgba(247, 236, 210, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.patoq .head .kit { position: relative; }

.patoq .head .ways {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The tabs: white cards standing behind the panel's top, the one on show in front. */
.patoq .tab { transform-origin: 50% 100%; z-index: 1; }
.patoq .tab.on { z-index: 3; }
.patoq .sheet { z-index: 2; }

.patoq .tab .face {
    position: absolute;
    inset: 0;
    background: #fdfbf5;
    border-style: solid;
    border-color: rgba(22, 35, 79, 0.7);
    transition: transform 0.12s;
}

.patoq .tab.on .face { border-color: #16234f; }
.patoq .tab:not(:disabled):hover .face { transform: translateY(-6%); }
.patoq .tab .face img { position: absolute; object-fit: contain; }

.patoq .tab .name {
    position: absolute;
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    padding-block: 0.25em;
    margin-top: -0.25em;
    text-align: center;
    color: #2a1d10;
}

.patoq .tab .name.bold { color: #1f3f8f; }

/* What the card on show holds, inside the panel and clear of its suns. */
.patoq .room { z-index: 4; }

.patoq .room.list {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b0935e transparent;
}

.patoq .room .column {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(1 * var(--u));
}

.patoq .label {
    flex: none;
    font-size: var(--fs);
    line-height: 1.35;
    text-align: start;
}

.patoq .quiet {
    font-size: calc(2.6 * var(--u));
    line-height: 1.35;
    color: #6b5332;
    text-align: start;
}

.patoq .heading {
    flex: none;
    font-size: calc(3 * var(--u));
    color: #1f3f8f;
    text-align: start;
}

.patoq .rule {
    display: block;
    flex: none;
    height: 1px;
    background: rgba(176, 147, 94, 0.45);
}

.patoq .pills,
.patoq .chips,
.patoq .line,
.patoq .setting {
    display: flex;
    align-items: center;
    flex: none;
}

.patoq .chips { flex-wrap: wrap; }

.patoq .line { gap: calc(1.5 * var(--u)); }
.patoq .line .name,
.patoq .line .where,
.patoq .line .label,
.patoq .line .soft {
    flex: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    font-size: var(--fs, calc(2.6 * var(--u)));
    padding-block: 0.2em;
}

.patoq .line .name { color: #2a1d10; font-size: calc(2.6 * var(--u)); }
.patoq .line .name.mine { color: #1f3f8f; }
.patoq .line .name.soft,
.patoq .soft { color: #6b5332; }
.patoq .line .where { color: #6b5332; font-size: calc(1.9 * var(--u)); }
.patoq .line .label { color: #6b5332; font-size: calc(2.6 * var(--u)); }

.patoq .line .dot {
    display: block;
    flex: none;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, #b9ad93 56%, transparent 58%);
}

.patoq .line .dot.at-door { background: radial-gradient(circle closest-side, #3f9a52 56%, transparent 58%); }
.patoq .line .dot.at-table { background: radial-gradient(circle closest-side, #e2b64a 56%, transparent 58%); }

.patoq .kit .seal {
    position: absolute;
    top: -0.6em;
    inset-inline-end: -0.4em;
    width: 1.5em;
    height: 1.5em;
    font-size: 0.8em;
}

.patoq .setting .soft { flex: none; overflow: hidden; white-space: nowrap; font-size: var(--fs); }
.patoq .setting .ink,
.patoq .setting .code { flex: none; white-space: nowrap; font-size: var(--fs); }
.patoq .setting .ink { color: #2a1d10; }
.patoq .setting .code { color: #1f3f8f; direction: ltr; }
.patoq .setting { flex-wrap: wrap; }
.patoq .setting .pill,
.patoq .chips .pill,
.patoq .line .pill { align-self: center; }

.patoq .podium,
.patoq .row,
.patoq .title-card,
.patoq .night {
    position: relative;
    flex: none;
}

.patoq .titles { display: grid; flex: none; }

/* My own place under the list, in the kit's navy. */
.patoq .strip {
    z-index: 4;
    background: #16234f;
}

/* ---- a word on the ground: a refusal, a link copied ---- */

.patoq .news {
    margin: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 0 calc(2.5 * var(--u));
    border: 1px solid #b0935e;
    border-radius: calc(2 * var(--u));
    background: rgba(245, 232, 201, 0.95);
    font-size: var(--fs);
    color: #1f3f8f;
    white-space: nowrap;
    overflow: hidden;
    z-index: 5;
}

.patoq .news.bad { color: #bf2a26; }

/* ---- a circle's table, waiting ---- */

.patoq .pq-said {
    display: block;
    font-size: var(--fs);
    line-height: 1.5;
    text-align: center;
}

.patoq .title-font { font-weight: 600; letter-spacing: 0.06em; }

.patoq .outline {
    display: block;
    border-style: solid;
    border-color: rgba(22, 35, 79, 0.3);
}

.patoq .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- a window over the screen: making a circle, joining one, adding a friend ---- */

.patoq .asking { position: absolute; inset: 0; z-index: 20; }
.patoq .asking .shade { inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); cursor: var(--arrow); }
.patoq .asking .panel { z-index: 1; }
.patoq .asking .pq-said,
.patoq .asking .field,
.patoq .asking .buttons { z-index: 2; }
.patoq .asking .field { text-align: center; }

/* ---- making the circle's emblem: four arrows round it, the grounds, a colour of one's own ---- */

.patoq .making-emblem { outline: none; }
.patoq .making-emblem > :not(.shade):not(.panel) { position: absolute; z-index: 2; }
.patoq .making-emblem .shown { display: block; pointer-events: none; }

.patoq .making-emblem .arrow { padding: 0; display: grid; place-items: center; transition: transform 0.1s; }
.patoq .making-emblem .arrow img { width: 80%; height: 80%; object-fit: contain; }
.patoq .making-emblem .arrow:hover { filter: brightness(1.15); }
.patoq .making-emblem .arrow:active { transform: scale(0.92); }
/* The two that change the symbol wear turquoise (the painting times #5fd6cf, as the game tints it). */
.patoq .making-emblem .arrow.symbol img { filter: url("#emblem-turquoise"); }

.patoq .making-emblem .ground-pick {
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--g) 0 75.6%, #b0935e 75.6% 84%, transparent 84%);
}
.patoq .making-emblem .ground-pick.on { box-shadow: inset 0 0 0 var(--picked) var(--cobalt, #1f3f8f); }
.patoq .making-emblem .ground-pick:not(.on):hover { filter: brightness(1.15); }

.patoq .making-emblem .own { display: flex; align-items: center; }
.patoq .making-emblem .own .pq-said { position: static; flex: none; white-space: nowrap; }
.patoq .making-emblem .strip { position: relative; flex: 1; height: 100%; }
.patoq .making-emblem .strip::before {
    content: "";
    position: absolute;
    inset: 30% 0;
    background: var(--bar);
    box-shadow: 0 0 0 1px #b0935e;
}
.patoq .making-emblem .strip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: var(--hand, pointer);
}
.patoq .making-emblem .strip input::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.patoq .making-emblem .strip input::-moz-range-track { height: 100%; background: transparent; }
.patoq .making-emblem .strip input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--bead);
    height: var(--bead);
    margin-top: calc((var(--own) - var(--bead)) / 2);
    border: none;
    background: url("../art/kit/round-plain.png") center / contain no-repeat;
}
.patoq .making-emblem .strip input::-moz-range-thumb {
    width: var(--bead);
    height: var(--bead);
    border: none;
    background: url("../art/kit/round-plain.png") center / contain no-repeat;
}

/* ---- the friends' lists ---- */

.patoq .chatline {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(0.6 * var(--u));
    padding: 0 calc(2.5 * var(--u));
    border: max(1px, calc(0.18 * var(--u))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(1.8 * var(--u));
    background: #fbf4e2;
    box-shadow: 0 calc(0.3 * var(--u)) calc(0.6 * var(--u)) rgba(0, 0, 0, 0.14);
    text-align: start;
}

.patoq .chatline.lit { border: max(1px, calc(0.4 * var(--u))) solid #16234f; }
.patoq .chatline:hover { background: #fffaf0; }
.patoq .chatline .named { font-size: calc(2.6 * var(--u)); color: #1f3f8f; white-space: nowrap; overflow: hidden; }
.patoq .chatline .last { font-size: calc(1.9 * var(--u)); color: #6b5332; white-space: nowrap; overflow: hidden; }
.patoq .chatline { padding-inline-end: calc(7 * var(--u)); }

.patoq .chatline .seal {
    position: absolute;
    inset-inline-end: calc(2.5 * var(--u));
    top: 68%;
    width: calc(3.8 * var(--u));
    height: calc(3.8 * var(--u));
    transform: translateY(-50%);
    font-size: calc(1.9 * var(--u));
    background: #9e2b25;
}

/* ---- a conversation (PatoqFriends.AddChat) ---- */

.patoq .chat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--u));
}

.patoq .chat .bar {
    display: flex;
    align-items: center;
    gap: calc(1.5 * var(--u));
    flex: none;
    height: calc(6 * var(--u));
}

.patoq .chat .bar .named {
    min-width: 0;
    font-size: calc(3 * var(--u));
    color: #1f3f8f;
    white-space: nowrap;
    overflow: hidden;
}

.patoq .chat .run {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: calc(0.8 * var(--u));
    padding-inline-end: calc(1.5 * var(--u));
    scrollbar-width: thin;
    scrollbar-color: #b0935e transparent;
}

.patoq .chat .older { align-self: center; }

.patoq .chat .message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.3 * var(--u));
    flex: none;
    text-align: start;
    line-height: 1.3;
}

.patoq .chat .message.mine { align-items: flex-end; }
.patoq .chat .who { font-size: calc(1.9 * var(--u)); font-weight: 700; color: #1f3f8f; }
.patoq .chat .when { font-size: calc(1.9 * var(--u)); color: #6b5332; }

.patoq .chat .bubble {
    max-width: 70%;
    padding: calc(1.2 * var(--u)) calc(2 * var(--u));
    border: 1px solid rgba(22, 35, 79, 0.3);
    border-radius: calc(1.8 * var(--u));
    background: #fbf4e2;
    color: #2a1d10;
    font-size: calc(2.6 * var(--u));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text;
}

.patoq .chat .mine .bubble { background: #16234f; border-color: #16234f; color: #f7ecd2; }
.patoq .chat .bubble.down { color: #6b5332; font-style: italic; }
.patoq .chat .mine .bubble.down { color: rgba(247, 236, 210, 0.7); }
.patoq .chat .bubble.open { cursor: var(--point); }
.patoq .chat .acts { display: flex; gap: calc(1.5 * var(--u)); }
.patoq .chat .note { align-self: center; font-size: calc(1.9 * var(--u)); color: #6b5332; text-align: center; }

.patoq .chat .foot {
    display: flex;
    align-items: center;
    gap: calc(1.5 * var(--u));
    flex: none;
}

.patoq .chat .foot .field { flex: 1; }
.patoq .chat .foot.trouble { justify-content: center; color: #bf2a26; font-size: calc(2.6 * var(--u)); height: calc(7.5 * var(--u)); }

/* Persian: the places are mirrored by the page, and the words are written from the right. */
[dir="rtl"] .patoq .say,
[dir="rtl"] .patoq .head,
[dir="rtl"] .patoq .news,
[dir="rtl"] .patoq .pq-said,
[dir="rtl"] .patoq .plaque-words,
[dir="rtl"] .patoq .tab .name,
[dir="rtl"] .patoq .back .word,
[dir="rtl"] .patoq .kit,
[dir="rtl"] .patoq .pill,
[dir="rtl"] .patoq .title { direction: rtl; }
[dir="rtl"] .patoq .title,
[dir="rtl"] .patoq .head .named,
[dir="rtl"] .patoq .title-font { letter-spacing: 0; }

/* A name is written in its own direction, and still stands where a Persian line starts. */
.patoq [dir="rtl"] .name,
.patoq [dir="rtl"] .named,
.patoq [dir="rtl"] .last,
.patoq [dir="rtl"] .who { text-align: right; }

/* talk.css */
/* A circle's group: what was said, oldest at the top, and a line to write in. */

/* Laid bottom up, so the box opens at the newest message and stays there as more are said. */
.messages {
    display: flex;
    flex-direction: column-reverse;
    max-height: calc(34 * var(--h));
    overflow-y: auto;
    padding-right: calc(1 * var(--h));
}

.messages .run {
    display: grid;
    gap: calc(1 * var(--h));
}

.page.friends .messages { max-height: calc(52 * var(--h)); }

.messages .run > div {
    justify-self: start;
    max-width: 78%;
    padding: calc(0.8 * var(--h)) calc(1.8 * var(--h));
    border-radius: calc(1.6 * var(--h));
    background: #fffaf0;
    border: calc(0.2 * var(--h)) solid var(--gold);
}

.messages .run > div.mine {
    justify-self: end;
    background: var(--navy);
    border-color: var(--navy);
    color: var(--cream);
}

.messages small { color: var(--ink-soft); font-size: calc(2 * var(--h)); }
.messages .mine small { color: rgba(246, 230, 192, 0.7); }
.messages p { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.messages .note { justify-self: center; color: var(--ink-soft); font-size: calc(2.1 * var(--h)); }

.messages div button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cobalt);
    font: inherit;
    font-size: calc(1.9 * var(--h));
    text-decoration: underline;
    cursor: var(--point);
}

.page .write { display: flex; gap: calc(1 * var(--h)); }

.page .write input {
    flex: 1;
    min-width: 0;
    padding: calc(1 * var(--h)) calc(1.6 * var(--h));
    border: calc(0.3 * var(--h)) solid var(--gold);
    border-radius: calc(1.2 * var(--h));
    background: #fffaf0;
    color: var(--ink);
    font: inherit;
    user-select: text;
    -webkit-user-select: text;
}

.page .write button {
    padding: calc(0.8 * var(--h)) calc(2.4 * var(--h));
    border: 0;
    border-radius: calc(3 * var(--h));
    background: var(--navy);
    color: var(--cream);
    font: inherit;
    cursor: var(--point);
}

.page .write button:disabled { opacity: 0.45; cursor: var(--arrow); }

/* Friends, beside the circles: the way in on the shelf, and the list with where each one is. */

.shelf .circle.mates { position: relative; }

.shelf .circle.mates .face {
    grid-row: span 2;
    width: calc(7 * var(--h));
    height: calc(7 * var(--h));
    border-radius: 50%;
    background: var(--navy);
    box-shadow: inset 0 0 0 calc(0.5 * var(--h)) var(--gold);
}

.shelf .circle.mates b,
.mates .who b {
    min-width: calc(3.4 * var(--h));
    padding: 0 calc(0.8 * var(--h));
    border-radius: calc(2 * var(--h));
    background: var(--red);
    color: #fff;
    font-size: calc(2.1 * var(--h));
    line-height: calc(3.4 * var(--h));
    text-align: center;
}

.shelf .circle.mates b { position: absolute; top: calc(1 * var(--h)); inset-inline-end: calc(1 * var(--h)); }

.page.friends .head b { color: var(--navy); font-size: calc(3 * var(--h)); letter-spacing: 0.12em; }

.people.mates { grid-template-columns: 1fr; }
.people.mates li { align-items: center; }

.mates .who {
    flex: 1;
    display: flex;
    align-items: center;
    gap: calc(1.4 * var(--h));
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: var(--point);
}

.mates .who i {
    width: calc(1.6 * var(--h));
    height: calc(1.6 * var(--h));
    border-radius: 50%;
    background: #3f9a52;
}

.mates .away .who i { background: #c9bfa6; }
.mates .who strong { font-size: calc(2.8 * var(--h)); color: var(--navy); }
.mates li > span { display: flex; gap: calc(1 * var(--h)); }

.page.friends .hide { display: flex; align-items: center; gap: calc(1 * var(--h)); color: var(--ink-soft); }
.page.friends .messages small { display: block; }

.page.friends .head { display: flex; justify-content: space-between; align-items: center; gap: calc(2 * var(--h)); }

/* words.css */
/* A language written right to left: its own letter, no spacing pulled between letters that
   join, and the layout left as it is. A table is a table from either side: the chairs, the board
   and the hand stay where they are, and only the text turns. */

/* The game's own letters, its very files: Alegreya for the Latin and the Cyrillic, Vazirmatn
   behind it for the Persian and Arabic, in that order, as Look.Serif and Look.Behind stand them.
   One stack everywhere, so a Persian name on an English page is Vazirmatn and a Latin word in a
   Persian sentence is Alegreya. Alegreya is kept off the joiners U+200C to 200F, which belong to
   the Persian word around them. Its files are the game's, made smaller by tools/fonts.mjs: only
   the letters of the site's languages, in the ranges given here and there alike, so a page that
   writes nothing in them does not ask for Alegreya at all.
   The game draws each face at its plain weight only and makes it heavier by thickening the
   strokes (Look.Bold, Look.Title), never by Alegreya's own bold: so each face here is given at
   400 alone, and the browser thickens it the same way for anything set bold. A Persian line set
   in italic stays upright, as the game's mottos do where Alegreya's italic has no letter.
   Written at once in a stand-in and turned into the letter when it comes (swap): held back, the
   words of a slow line stayed unseen for up to three seconds.
   Vazirmatn's ink stands 0.80 of a size over the line and reaches 0.36 under it (ر ج ع), more
   than a line set at 1 or 1.2 holds. So a line of words that must not run past its room is cut
   at its sides only (`overflow: hidden` for an old browser, then `overflow: clip visible`), never
   above and below. */
@font-face {
    font-family: "Alegreya";
    src: url("../art/fonts/Alegreya.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-024F, U+0400-052F, U+1E00-1EFF, U+2000-200B, U+2010-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Alegreya";
    src: url("../art/fonts/Alegreya-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-024F, U+0400-052F, U+1E00-1EFF, U+2000-200B, U+2010-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../art/fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    --face: "Alegreya", "Vazirmatn", Georgia, serif;
    font-synthesis-style: none;
}

[dir="rtl"] * {
    letter-spacing: 0 !important;
}

/* The pieces that are placed by left and right keep their places whatever the text does. */
[dir="rtl"] .table,
[dir="rtl"] .online header,
[dir="rtl"] .halls,
[dir="rtl"] .door header {
    direction: ltr;
}

[dir="rtl"] .table .status,
[dir="rtl"] .table .naming,
[dir="rtl"] .table .result,
[dir="rtl"] .seat .plaque span {
    direction: rtl;
}

/* A little bigger where the Latin letter was set small: this one reads smaller at the same size. */
[dir="rtl"] .seat .plaque .name { font-size: calc(2.6 * var(--h)); top: 16%; }
[dir="rtl"] .seat .plaque .house { top: 58%; }
[dir="rtl"] .board span { top: 50%; }

/* The choice of language, small in a corner wherever the player is not at a table. */

.tongues {
    position: fixed;
    left: 12px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    direction: ltr;
    z-index: 5;
}

.tongues button {
    padding: 3px 12px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(246, 230, 192, 0.85);
    color: var(--navy);
    font: 14px var(--face);
    cursor: var(--point);
}

.tongues button.chosen {
    background: var(--navy);
    color: var(--cream);
}

/* ---- the door in the kit's own pieces: the panel, the field and the main button ---- */

.door .panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: url("../art/kit/panel.png") center / 100% 100% no-repeat;
    padding: clamp(28px, 7vh, 60px) clamp(30px, 6vw, 70px);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}

.door input {
    border: 0;
    border-radius: 0;
    background: var(--field, url("../art/kit/field.png")) center / 100% 100% no-repeat;
    padding: 0.8em 1.4em;
}

.door input:focus { outline: none; filter: brightness(1.04); }

.door button.main {
    justify-self: center;
    height: 3em;
    aspect-ratio: 720 / 222;
    padding: 0 0 0.2em;
    border-radius: 0;
    background: var(--main, url("../art/kit/flat/button-main.png")) center / 100% 100% no-repeat;
    font-size: 1.05em;
    font-weight: 600;
}

/* door.css */
/* The door, as the game's tile door lays it (DoorTiles.cs). Every size is a share of the screen's
   height, the way the game measures it; the numbers in the comments are the game's own. */

.menu {
    --plaque-w: min(calc(40.5 * var(--h)), calc(0.27 * var(--w)));
    --plaque-h: calc(7.8 * var(--h));
    --pitch: calc(8.85 * var(--h));
    --left: calc(4.5 * var(--h));
    --column: calc(19 * var(--h));
    --from: calc(var(--left) + var(--plaque-w) + 4 * var(--h));
    --wall: calc(var(--w) - 7 * var(--h) - var(--column) - var(--from));
    --paper-ink: #16234f;
    --enamel-navy: #16234f;
    --on-navy: #f6ecd4;
    --crimson: #a8151c;
    --card-paper: #fbf4e2;
    --tile-ink: #2a1d10;
    --tile-soft: #6b5332;
    --tile-cobalt: #1f3f8f;
    --tile-red: #bf2a26;
    --veil: transparent;
    --painted: none;

    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: linear-gradient(var(--veil), var(--veil)), url("../art/table/ground.jpg") center / cover;
    color: var(--tile-ink);
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

/* Night (Night.cs): a lapis veil over the same wall, the inks turned, the paintings a little dimmer. */
.menu.night {
    --veil: rgba(5, 9, 23, 0.70);
    --paper-ink: #eee2c3;
    --card-paper: #212c50;
    --crimson: #e46a5e;
    --tile-ink: #f0e5c9;
    --tile-soft: #c2b28f;
    --tile-cobalt: #9fb5ec;
    --tile-red: #ff9a8a;
    --painted: brightness(0.84);
}

.menu button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.menu button:disabled { cursor: var(--arrow); }
.menu img { display: block; pointer-events: none; }

/* ---- the ways in, down the left ---- */

.menu .ways {
    position: absolute;
    left: var(--left);
    top: calc(4 * var(--h));
    display: flex;
    flex-direction: column;
    gap: calc(var(--pitch) - var(--plaque-h));
}

/* The kit's ivory plaque (Kit.Button, Kind.Plain): its pointed ends whole, its middle star whole
   and in the middle, and only the plain strip between them stretched. */
.menu .way,
.menu .purse .coins {
    position: relative;
    height: var(--plaque-h);
    display: flex;
    align-items: center;
    isolation: isolate;
}

.menu .way::before,
.menu .purse .coins::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--plaque-h) * 0.5) stretch;
    filter: var(--painted);
}

.menu .way::after,
.menu .purse .coins::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--plaque-h) * 72 / 230);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--plain, url("../art/kit/flat/button-plain.png")) center / auto 100% no-repeat;
    filter: var(--painted);
}

.menu .way {
    width: var(--plaque-w);
    padding: 0 calc(var(--plaque-h) * 0.45) 0 calc(var(--plaque-h) * 1.56);
    color: var(--paper-ink);
}

.menu .way:not(:disabled):hover { filter: brightness(1.15); }

.menu .way:not(:disabled):active::before,
.menu .purse .coins:not(:disabled):active::before {
    border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png"));
    transform: translateY(max(2px, calc(var(--plaque-h) * 0.035)));
}

.menu .way:not(:disabled):active::after { visibility: hidden; }

/* A way not on the website yet is on the wall and quieter, and does not press. */
.menu .way:disabled { opacity: 0.55; }

.menu .way .sign {
    position: absolute;
    left: calc(var(--plaque-h) * 0.62);
    top: 50%;
    width: calc(var(--plaque-h) * 0.74);
    height: calc(var(--plaque-h) * 0.74);
    transform: translateY(-50%);
    object-fit: contain;
    filter: var(--painted);
}

.menu .way .word {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    text-align: left;
    font-size: calc(3.8 * var(--h));
    font-weight: 800;
    line-height: var(--plaque-h);
}

.menu .way:disabled .word { font-size: calc(3.4 * var(--h)); }

[dir="rtl"] .menu .way .word { direction: rtl; text-align: right; font-weight: 700; }

/* The count on a way: crimson for what waits for me, gold for what the house has on. */
.menu .badge {
    --dot: calc(var(--plaque-h) * 0.62);
    position: absolute;
    left: calc(var(--plaque-w) - var(--dot) * 0.95);
    top: calc(var(--dot) * -0.2);
    width: var(--dot);
    height: var(--dot);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: max(1.5px, calc(var(--dot) * 0.08)) solid var(--on-navy);
    background: var(--crimson);
    color: var(--on-navy);
    font-size: calc(var(--dot) * 0.5);
    font-weight: 800;
    line-height: 1;
}

.menu .badge.gold { background: #e2b64a; color: var(--enamel-navy); }

/* ---- the round buttons at the column's foot ---- */

.menu .rounds {
    --round: calc(8.5 * var(--h));
    position: absolute;
    left: var(--left);
    top: calc(88.5 * var(--h));
    height: var(--round);
    display: flex;
    align-items: center;
    gap: calc(2.2 * var(--h));
}

.menu .round {
    position: relative;
    width: var(--round);
    height: var(--round);
    flex: none;
}

.menu .round img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: calc(100% / 0.975);
    transform: translate(-50%, -50%);
    filter: var(--painted);
}

.menu .round:not(:disabled):hover { filter: brightness(1.15); }

.menu .round.pairs-round .base { width: 100%; height: 100%; }
.menu .round.pairs-round .mark { width: 62%; height: auto; opacity: 0.45; }

/* The pairs game's sign (DoorPairs.PairsMark): bright while today's board is open to play, with
   the gold dot at its foot; the streak's five beads along its brow once the board is unlocked. */
.menu .round.pairs-round.open .mark { opacity: 1; }

.menu .round.pairs-round .beads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.menu .promise {
    margin-left: calc(1.8 * var(--h) - 2.2 * var(--h));
    max-width: calc(52 * var(--h));
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(3.2 * var(--h));
    font-weight: 800;
    color: var(--tile-ink);
}

[dir="rtl"] .menu .promise { direction: rtl; font-weight: 700; }

/* ---- down the right: my face, my farr, my purse ---- */

.menu .mine {
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(2 * var(--h));
    width: var(--column);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(1.5 * var(--h));
}

/* A round frame with a face in its window (Tiles.DrawInOval): my own, and each house's king. */
.menu .me,
.menu .king {
    --a: calc(19 * var(--h));
    position: relative;
    width: var(--a);
    height: calc(var(--a) * 1.12);
    flex: none;
}

.menu .me .frame,
.menu .king .frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    filter: var(--painted);
}

.menu .me .window,
.menu .king .window {
    position: absolute;
    left: calc(var(--a) * 0.13);
    top: calc(var(--a) * 0.084);
    width: calc(var(--a) * 0.74);
    height: calc(var(--a) * 0.74);
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    border: max(1.5px, calc(var(--a) * 0.0167)) solid #e2b64a;
    box-shadow: 0 0 0 1px #3a2a12;
    background: var(--cream);
}

.menu .me .window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

/* My name on the plaque under my face, in the day's ink by night too. */
.menu .me .plaque {
    position: absolute;
    left: calc(var(--a) * 0.075);
    top: calc(var(--a) * 0.842);
    width: calc(var(--a) * 0.85);
    height: calc(var(--a) * 0.352);
    z-index: 2;
    display: grid;
    place-items: center;
    background: url("../art/table/my-plaque.png") center / 100% 100% no-repeat;
    color: #2a1d10;
    font-size: calc(var(--a) * 0.148);
}

.menu .me .plaque span {
    max-width: 72%;
    overflow: hidden;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, on both sides, so the line stays centred. */
    padding-block: 0.25em;
    white-space: nowrap;
    line-height: 1.2;
}

/* The farr plaque (DoorFarr.cs): a plain card, my step's medal and name, the road's bar, my farr
   against where the next step begins, and my two places under a gold hairline. */
.menu .farr {
    --u: calc(10.5 * var(--h));
    position: relative;
    width: 100%;
    height: var(--u);
    border-radius: calc(1.8 * var(--h));
    background: var(--card-paper) !important;
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35) !important;
    box-shadow: 0 0 calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
    flex: none;
}

.menu .farr.placed { height: calc(var(--u) * 1.44); }

.menu .farr .step {
    position: absolute;
    left: 5%;
    right: 5%;
    top: calc(var(--u) * 0.28);
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 0.06);
}

.menu .farr .medal {
    --r: calc(var(--u) * 0.14);
    position: relative;
    width: calc(var(--r) * 2.1);
    height: calc(var(--r) * 2.1);
    flex: none;
}

.menu .farr .medal img:first-child { width: 100%; height: 100%; }

.menu .farr .medal .star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--r) * 0.74);
    transform: translate(-50%, -50%) rotate(calc(var(--slot) * 0.66rad)) translateY(calc(var(--r) * -1.08)) rotate(calc(var(--slot) * -0.66rad));
}

.menu .farr .step b {
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(var(--u) * 0.22);
    font-weight: 800;
    color: var(--tile-cobalt);
}

.menu .farr .bar {
    position: absolute;
    left: 10%;
    width: 80%;
    top: calc(var(--u) * 0.52);
    height: calc(var(--u) * 0.1);
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #e2b64a;
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

.menu .farr .bar i { display: block; height: 100%; background: #e2b64a; border-radius: 999px; }

.menu .farr .numbers {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--u) * 0.8);
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 0.06);
    font-size: calc(var(--u) * 0.19);
    color: var(--tile-ink);
    white-space: nowrap;
}

.menu .farr .numbers img { height: calc(var(--u) * 0.266); }

.menu .farr .places {
    position: absolute;
    left: 7%;
    right: 7%;
    top: calc(var(--u) * 0.98);
    height: calc(var(--u) * 0.42);
    display: flex;
    border-top: max(1px, calc(0.15 * var(--h))) solid rgba(226, 182, 74, 0.7);
}

.menu .farr .places span {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    line-height: 1.1;
}

.menu .farr .places span + span { border-left: max(1px, calc(0.15 * var(--h))) solid rgba(226, 182, 74, 0.7); }
.menu .farr .places b { font-size: calc(var(--u) * 0.19); font-weight: 800; color: var(--tile-cobalt); }
.menu .farr .places small { font-size: calc(var(--u) * 0.12); color: var(--tile-soft); }

/* The purse (Kit.Purse): the coin and the number on an ivory plaque, the round plus beside it. */
.menu .purse {
    display: flex;
    align-items: center;
    gap: calc(1 * var(--h));
}

.menu .purse .coins {
    gap: calc(var(--plaque-h) * 0.2);
    padding: 0 calc(var(--plaque-h) * 0.53) 0 calc(var(--plaque-h) * 0.5);
    color: var(--paper-ink);
}

.menu .purse .coins img { width: calc(var(--plaque-h) * 0.56); height: calc(var(--plaque-h) * 0.56); }
.menu .purse .coins b { font-size: calc(var(--plaque-h) * 0.42); font-weight: 800; }

.menu .purse .plus {
    position: relative;
    width: calc(var(--plaque-h) * 0.92);
    height: calc(var(--plaque-h) * 0.92);
    background: var(--round-main, url("../art/kit/flat/round-main.png")) center / 100% 100% no-repeat;
    filter: var(--painted);
}

.menu .purse .plus::before,
.menu .purse .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    height: max(2px, 8%);
    border-radius: 1px;
    background: var(--on-navy);
    transform: translate(-50%, -50%);
}

.menu .purse .plus::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ---- the wall in the middle ---- */

.menu .wall {
    position: absolute;
    left: var(--from);
    width: var(--wall);
    top: 0;
    height: 100%;
}

/* The game's name across the top: cobalt, ringed in gold, with a shadow under it. */
.menu .wall h1 {
    margin: calc(3 * var(--h)) 0 0;
    font-size: calc(10.5 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    color: var(--tile-cobalt);
    -webkit-text-stroke: max(3px, calc(10.5 * var(--h) / 18)) #e2b64a;
    paint-order: stroke fill;
    text-shadow: 0 max(2px, calc(0.26 * var(--h))) 0 rgba(41, 26, 8, 0.35);
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    direction: ltr;
}

.menu .motto {
    margin: 0;
    font-size: calc(2.6 * var(--h));
    letter-spacing: 0.18em;
    line-height: 1.5;
    color: var(--tile-cobalt);
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
}

/* The four sons' houses, each its king in a round frame with the suit's disc at its foot. */
.menu .kings {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(17 * var(--h));
    height: calc(54.5 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(min(calc(30 * var(--h)), calc(var(--wall) / 4.4)) * 0.07);
}

.menu .king {
    --a: min(calc(30 * var(--h)), calc(var(--wall) / 4.4));
    transition: transform 0.12s;
}

.menu .king:hover { transform: scale(1.04); }

.menu .king::before {
    content: "";
    position: absolute;
    left: calc(var(--a) * 0.05);
    top: calc(var(--a) * 0.004);
    width: calc(var(--a) * 0.9);
    height: calc(var(--a) * 0.9);
    border-radius: 45%;
    box-shadow: 0 calc(var(--a) * 0.02) calc(var(--a) * 0.05) rgba(51, 31, 8, 0.25);
}

.menu .king .window img {
    position: absolute;
    width: 161.29%;
    max-width: none;
    left: -35.48%;
    top: -17.74%;
}

.menu .king .suit {
    position: absolute;
    left: calc(var(--a) * 0.338);
    top: calc(var(--a) * 0.7535);
    width: calc(var(--a) * 0.324);
    height: calc(var(--a) * 0.324);
    box-sizing: border-box;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f6e6c0;
    border: calc(var(--a) * 0.012) solid #1f3f8f;
    box-shadow: inset 0 0 0 calc(var(--a) * 0.015) #f6e6c0, inset 0 0 0 calc(var(--a) * 0.021) #e2b64a;
}

.menu .king .suit img { height: calc(var(--a) * 0.1575); }

/* The free chests' band (DoorGift.cs), with the shah's letter at its start. */
.menu .band {
    --tall: calc(9 * var(--h));
    position: absolute;
    left: 50%;
    top: calc(74.5 * var(--h));
    height: calc(10 * var(--h));
    width: min(var(--wall), max(calc(72 * var(--h)), calc(var(--wall) * 0.82)));
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 0 calc(3 * var(--h)) 0 calc(1.8 * var(--h));
    display: flex;
    align-items: flex-end;
    gap: calc(2 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: color-mix(in srgb, var(--card-paper) 55%, transparent);
    border: max(1px, calc(0.2 * var(--h))) solid rgba(22, 35, 79, 0.2);
}

.menu .band.lit {
    background: color-mix(in srgb, var(--card-paper) 85%, transparent);
    border-color: rgba(22, 35, 79, 0.4);
}

.menu .band .letter {
    position: relative;
    height: calc(var(--tall) * 1.05);
    width: calc(var(--tall) * 0.6);
    margin-bottom: calc(var(--tall) * 0.08);
    flex: none;
}

.menu .band .letter img { height: 100%; margin: 0 auto; filter: var(--painted); }

.menu .band .letter b {
    position: absolute;
    right: calc(var(--tall) * -0.12);
    top: 0;
    min-width: calc(var(--tall) * 0.3);
    height: calc(var(--tall) * 0.3);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--enamel-navy);
    border: max(1px, calc(var(--tall) * 0.02)) solid var(--on-navy);
    color: #fff;
    font-size: calc(var(--tall) * 0.2);
    font-weight: 800;
}

.menu .band .letter b.done { background: var(--crimson); }

.menu .band .chest {
    position: relative;
    height: calc(var(--tall) * 1.02);
    width: calc(var(--tall) * 1.07);
    margin-bottom: calc(var(--tall) * 0.08);
    flex: none;
    display: grid;
    place-items: center;
}

.menu .band .chest::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -4%;
    height: 22%;
    border-radius: 50%;
    background: rgba(42, 29, 16, 0.10);
}

.menu .band .chest img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.22;
    filter: grayscale(1) sepia(0.6);
}

.menu .band .chest.full::before { background: rgba(42, 29, 16, 0.16); }
.menu .band .chest.full img { opacity: 1; filter: var(--painted); }
.menu .band .chest.full:first-of-type img { animation: breathe 1.8s ease-in-out infinite; }

@keyframes breathe {
    50% { transform: scale(1.03); }
}

.menu .band .chest small {
    position: absolute;
    font-size: calc(var(--tall) * 0.2);
    font-weight: 800;
    color: var(--tile-cobalt);
    white-space: nowrap;
}

.menu .band .caption {
    flex: 1;
    align-self: center;
    font-size: calc(3.2 * var(--h));
    color: var(--tile-soft);
    line-height: 1.2;
}

.menu .band.lit .caption { font-weight: 800; color: var(--tile-cobalt); }
[dir="rtl"] .menu .band .caption { direction: rtl; font-weight: 400; }
[dir="rtl"] .menu .band.lit .caption { font-weight: 700; }

.menu .line {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(85.5 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(2.4 * var(--h));
    font-weight: 800;
    color: var(--tile-red);
}

/* ---- the music player (MusicPlayer.cs): a capsule of frosted glass in the corner ---- */

.menu .music {
    --u: min(calc(100 * var(--h)), calc(var(--w) / 1.6));
    position: absolute;
    right: calc(3 * var(--h));
    bottom: calc(3 * var(--h));
    width: calc(var(--u) * 0.534);
    height: calc(var(--u) * 0.092);
    box-sizing: border-box;
    padding: 0 calc(var(--u) * 0.03);
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.012);
    border-radius: 999px;
    background: rgba(253, 246, 230, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: max(1px, calc(var(--u) * 0.002)) solid rgba(255, 254, 247, 0.85);
    box-shadow: 0 calc(var(--u) * 0.004) calc(var(--u) * 0.01) rgba(38, 26, 8, 0.22);
    color: var(--paper-ink);
    direction: ltr;
}

.menu.night .music {
    background: rgba(20, 28, 56, 0.58);
    border-color: rgba(153, 128, 82, 0.85);
}

.menu .music .name {
    width: calc(var(--u) * 0.10);
    display: grid;
    justify-items: center;
    gap: calc(var(--u) * 0.006);
}

.menu .music .tune { font-size: calc(var(--u) * 0.026); white-space: nowrap; }
.menu .music .tune i { display: none; font-style: normal; }
.menu .music .tune i.on { display: inline; }
.menu .music .dots { display: flex; gap: calc(var(--u) * 0.007); align-items: center; }

.menu .music .dots i {
    width: calc(var(--u) * 0.0076);
    height: calc(var(--u) * 0.0076);
    border-radius: 50%;
    background: var(--paper-ink);
    opacity: 0.28;
}

.menu .music .dots i.on { width: calc(var(--u) * 0.0096); height: calc(var(--u) * 0.0096); opacity: 1; }

.menu .music .rule {
    width: 1px;
    height: 52%;
    background: var(--paper-ink);
    opacity: 0.45;
}

.menu .music button { width: calc(var(--u) * 0.044); height: calc(var(--u) * 0.044); display: grid; place-items: center; }

.menu .music svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--paper-ink);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu .music svg .fill { fill: var(--paper-ink); stroke: none; }
.menu .music svg text { font: 700 7px sans-serif; fill: var(--paper-ink); stroke: none; text-anchor: middle; }

.menu .music [data-do="loop"] { opacity: 0.45; }
.menu .music.looping [data-do="loop"] { opacity: 1; }

.menu .music .play {
    width: calc(var(--u) * 0.058);
    height: calc(var(--u) * 0.058);
    border-radius: 50%;
    background: var(--enamel-navy);
}

.menu.night .music .play { background: #34509c; }
.menu .music .play svg { width: 70%; height: 70%; stroke: var(--on-navy); stroke-width: 2.6; }
.menu .music .play svg .fill { fill: var(--on-navy); }
.menu .music .play .off { display: none; }
.menu .music.playing .play .off { display: inline; }
.menu .music.playing .play .on { display: none; }

.menu .music .cross { display: none; }
.menu .music.quiet .cross { display: inline; }
.menu .music.quiet .waves { display: none; }

.menu .music .loud { width: calc(var(--u) * 0.08); display: flex; align-items: center; }

.menu .music .loud input {
    width: 100%;
    accent-color: var(--paper-ink);
    margin: 0;
}

.menu .music .less {
    position: absolute;
    right: calc(var(--u) * 0.02);
    top: calc(var(--u) * 0.004);
    width: calc(var(--u) * 0.026);
    height: calc(var(--u) * 0.026);
    opacity: 0.7;
}

.menu .music .more { display: none; }

/* The small form: the pause and the two notes that open it again. */
.menu .music.small {
    width: calc(var(--u) * 0.075 * 1.74);
    height: calc(var(--u) * 0.075);
    padding: 0;
    justify-content: center;
}

.menu .music.small > :not(.play):not(.more) { display: none; }
.menu .music.small .more { display: grid; }

.menu .stamp {
    position: absolute;
    right: calc(0.6 * var(--h));
    bottom: calc(0.2 * var(--h));
    font-size: max(10px, calc(1.85 * var(--h)));
    color: rgba(92, 77, 51, 0.75);
    direction: ltr;
}

/* ---- a house's page, opened from its king ---- */

:is(.menu, .kings-house) .house {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(13, 10, 5, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(6 * var(--h));
    animation: open 0.15s ease-out;
}

@keyframes open {
    from { opacity: 0; }
}

:is(.menu, .kings-house) .house .cards {
    display: grid;
    grid-template-columns: repeat(2, calc(20 * var(--h)));
    grid-auto-rows: calc(28 * var(--h));
    gap: calc(2.5 * var(--h));
}

:is(.menu, .kings-house) .house .cards > * { width: 100%; height: 100%; }
:is(.menu, .kings-house) .house .cards .card { width: 100%; height: 100%; }
:is(.menu, .kings-house) .house .opens { display: block; transition: transform 0.12s ease-out; }
:is(.menu, .kings-house) .house .opens:hover { transform: translateY(calc(-0.8 * var(--h))); }

/* A card's page, over its house or over the table (CardPage in the game): the card at 43 by 60
   of the height, the panel beside it at 44 high. */
:is(.menu, .kings-house, .table) .card-page {
    position: absolute;
    inset: 0;
    z-index: 11;
    background: rgba(13, 10, 5, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(5 * var(--h));
    cursor: var(--point);
    animation: open 0.15s ease-out;
}

:is(.menu, .kings-house, .table) .card-page .big {
    flex: 0 0 auto;
    width: calc(43 * var(--h));
    height: calc(60 * var(--h));
    animation: lift 0.4s ease-out;
}

@keyframes lift {
    from { transform: translateY(calc(4 * var(--h))) scale(0.9); opacity: 0; }
}

/* The hourglass on its page: a press turns it a quarter on, lifted a little as it goes, and lying
   on its side its end lies over the panel's edge, not under it. */
:is(.menu, .kings-house, .table) .card-page .glass-turner {
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease-in-out;
    cursor: var(--point);
}

:is(.menu, .kings-house, .table) .card-page .big.hop0 { animation: hop0 0.4s ease-in-out; }
:is(.menu, .kings-house, .table) .card-page .big.hop1 { animation: hop1 0.4s ease-in-out; }

@keyframes hop0 { 50% { transform: scale(1.06); } }
@keyframes hop1 { 50% { transform: scale(1.06); } }

:is(.menu, .kings-house, .table) .card-page .panel {
    width: min(calc(78 * var(--h)), calc(var(--w) * 0.5));
    height: calc(44 * var(--h));
    box-sizing: border-box;
    padding: calc(4.4 * var(--h)) calc(5 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: #fbf4e2;
    border: max(1px, calc(0.2 * var(--h))) solid #c9974a;
    color: #2a1d10;
    overflow: hidden;
}

:is(.menu, .kings-house, .table) .card-page h2 { margin: 0; font-size: calc(5.5 * var(--h)); font-weight: 800; }
:is(.menu, .kings-house, .table) .card-page .side { margin: calc(1 * var(--h)) 0 calc(2 * var(--h)); font-size: calc(2.8 * var(--h)); color: #6b5332; white-space: pre; }
:is(.menu, .kings-house, .table) .card-page .story { margin: 0; font-size: calc(3.1 * var(--h)); line-height: 1.4; }
[dir="rtl"] :is(.menu, .kings-house, .table) .card-page .panel { direction: rtl; }

:is(.menu, .kings-house) .house .panel {
    width: min(calc(80 * var(--h)), calc(var(--w) * 0.5));
    height: calc(50 * var(--h));
    box-sizing: border-box;
    padding: calc(4.5 * var(--h)) calc(5 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: #fbf4e2;
    border: max(1px, calc(0.2 * var(--h))) solid #c9974a;
    color: #2a1d10;
}

:is(.menu, .kings-house) .house h2 { margin: 0; font-size: calc(5.5 * var(--h)); font-weight: 800; }
:is(.menu, .kings-house) .house .side { margin: calc(1 * var(--h)) 0 calc(2 * var(--h)); font-size: calc(2.8 * var(--h)); color: #6b5332; white-space: pre; }
:is(.menu, .kings-house) .house .story { margin: 0; font-size: calc(3.1 * var(--h)); line-height: 1.4; }
[dir="rtl"] :is(.menu, .kings-house) .house .panel { direction: rtl; }

/* The door turns on its side on a phone held upright, as the table and the play online page do. */
@media (orientation: portrait) {
    .menu {
        width: 100vw;
        height: calc(100 * var(--h));
        top: 50dvh;
        transform: translateY(-50%);
        box-shadow: 0 0 0 100vmax #000;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .menu {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
        box-shadow: none;
    }
}

/* The way back to the door on every page beside it. */
.online h1 .to-door {
    width: calc(5.4 * var(--h));
    height: calc(5.4 * var(--h));
    margin-right: calc(1.4 * var(--h));
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    vertical-align: middle;
}

.online h1 .to-door img { width: 100%; height: 100%; transform: scaleX(-1); display: block; }
.online h1 .to-door:disabled { opacity: 0.3; cursor: var(--arrow); }

/* Persian: the door keeps its places, and its words are written from the right.
   The game's name stays as the game writes it. */
[dir="rtl"] .menu {
    direction: ltr;
    font-family: var(--face);
}

[dir="rtl"] .menu .wall h1 { font-family: var(--face); }
[dir="rtl"] .menu .motto,
[dir="rtl"] .menu .me .plaque,
[dir="rtl"] .menu .farr { direction: rtl; }
[dir="rtl"] .menu .motto { letter-spacing: 0; }

/* A badge's chest (DoorGift.cs): the chest it opens as, its badge on its corner, how many when there are several. */
.menu .band .chest .on-corner {
    position: absolute;
    right: -6%;
    top: -6%;
    width: 46%;
    height: 46%;
    container-type: size;
}

.menu .band .chest .many {
    position: absolute;
    left: -4%;
    top: -4%;
    min-width: calc(var(--tall) * 0.3);
    padding: 0 calc(var(--tall) * 0.06);
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--enamel-navy);
    border: max(1px, calc(var(--tall) * 0.02)) solid var(--on-navy);
    color: #fff;
    font-size: calc(var(--tall) * 0.2);
    font-weight: 800;
    text-align: center;
}

/* chest.css */
/* A chest opened at the door (Bazaar.cs, ChestOpening) and the shah's letter (DoorLetter.cs).
   Sizes are shares of the screen's height, as the game measures them. */

/* ---- the band's chests as things to press ---- */

.menu .band .chest:not(:disabled):hover img { filter: brightness(1.12); }
.menu .band .chest:disabled { cursor: var(--arrow); }

.menu .band .chest .many {
    position: absolute;
    right: 0;
    top: 0;
    min-width: calc(var(--tall) * 0.28);
    height: calc(var(--tall) * 0.28);
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #1c1a2f;
    color: #fbdeb4;
    font-size: calc(var(--tall) * 0.18);
    font-weight: 800;
}

/* The letter glows while a decree is done and not paid. */
.menu .band .letter.glows::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--tall) * 0.9);
    height: calc(var(--tall) * 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(226, 182, 74, 0.45), rgba(226, 182, 74, 0));
    animation: letter-glow 2.6s ease-in-out infinite;
}

@keyframes letter-glow {
    50% { opacity: 0.35; }
}

/* ---- the opening ---- */

.menu .opening {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    background: rgba(10, 8, 5, 0.8);
    overflow: hidden;
    cursor: var(--point);
}

.menu .opening.on { display: block; }

.menu .opening .chest,
.menu .opening .flying { position: absolute; pointer-events: none; }

.menu .opening .glow {
    position: absolute;
    left: 50%;
    top: 52%;
    width: calc(110 * var(--h));
    height: calc(110 * var(--h));
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 217, 115, 0.55), rgba(255, 217, 115, 0) 70%);
    opacity: 0;
    pointer-events: none;
}

.menu .opening .called {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(84 * var(--h));
    text-align: center;
    font-size: calc(4.5 * var(--h));
    font-weight: 800;
    color: #e2b64a;
}

.menu .opening .called.low { top: calc(93 * var(--h)); font-size: calc(3.4 * var(--h)); }
.menu .opening .called.refused { font-size: calc(3.2 * var(--h)); font-weight: 400; color: #f6e6c0; }

.menu .opening .sum {
    position: absolute;
    left: 50%;
    top: calc(83 * var(--h));
    opacity: 0;
    text-align: center;
    pointer-events: none;
}

.menu .opening .sum .sum-row { display: flex; align-items: center; gap: calc(1 * var(--h)); justify-content: center; }
.menu .opening .sum img { width: calc(7 * var(--h)); height: calc(7 * var(--h)); }

.menu .opening .sum b {
    font-size: calc(8.5 * var(--h));
    font-weight: 800;
    color: #e2b64a;
    -webkit-text-stroke: max(4px, calc(8.5 * var(--h) / 8)) rgba(31, 15, 5, 0.9);
    paint-order: stroke fill;
}

.menu .opening .sum small { display: block; font-size: calc(3.2 * var(--h)); color: #f6e6c0; }

/* The purse over the door's own, counting up as the coins land. */
.menu .opening .wallet {
    position: absolute;
    display: flex;
    align-items: center;
    gap: calc(var(--plaque-h) * 0.2);
    box-sizing: border-box;
    padding: 0 calc(var(--plaque-h) * 0.53) 0 calc(var(--plaque-h) * 0.5);
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--plaque-h) * 0.5) stretch;
    color: #16234f;
    pointer-events: none;
}

.menu .opening .wallet img { width: calc(var(--plaque-h) * 0.56); height: calc(var(--plaque-h) * 0.56); }
.menu .opening .wallet b { font-size: calc(var(--plaque-h) * 0.42); font-weight: 800; }
.menu .opening .wallet.bump { animation: bump 0.15s ease-out; }

@keyframes bump {
    50% { transform: scale(1.15); }
}

/* One thing the chest held, on a panel in the middle. */
.menu .opening .shown {
    position: absolute;
    left: 50%;
    top: calc(52 * var(--h));
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

/* The panel is the shown's own child: the cards of a flourish's table on it are .card too. */
.menu .opening .shown > .card {
    --plain: min(calc(60 * var(--h)), calc(var(--w) * 0.8));
    --wide: var(--plain);
    width: var(--wide);
    height: calc(var(--wide) * 0.62);
    box-sizing: border-box;
    padding: calc(var(--wide) * 0.05);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: calc(var(--wide) * 0.015);
    justify-items: center;
    align-items: center;
    border-radius: calc(var(--wide) * 0.04);
    background: #f5e8c9;
    border: max(2px, calc(var(--wide) * 0.008)) solid #b0935e;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
    color: #2a1d10;
    text-align: center;
}

.menu .opening .shown > .card > img { max-width: 60%; max-height: min(100%, calc(var(--wide) * 0.32)); object-fit: contain; }
.menu .opening .shown > .card > img.round { border-radius: 50%; border: calc(0.4 * var(--h)) solid #e2b64a; }
.menu .opening .shown > .card > b { font-size: calc(var(--plain) * 0.08); font-weight: 800; line-height: 1.1; text-wrap: balance; }
.menu .opening .shown > .card > small { font-size: calc(var(--plain) * 0.047); line-height: 1.2; color: #6b5332; white-space: pre-line; }

/* A flourish plays on a small table of its own (the game's ThingPanel and PreviewBox): a wider,
   taller panel, the table across the top of it, and the words at the plain panel's size. */
.menu .opening .shown > .card.plays {
    --wide: min(calc(80 * var(--h)), calc(var(--w) * 0.86));
    height: min(calc(var(--wide) * 0.9), calc(80 * var(--h)));
    padding: calc(var(--wide) * 0.03) calc(var(--wide) * 0.04) calc(var(--wide) * 0.035);
}

.menu .opening .shown > .card.plays > .cd-play { width: 100%; height: 100%; margin: 0; }

.menu .opening .hint {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(93 * var(--h));
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: rgba(246, 230, 192, 0.7);
    pointer-events: none;
}

/* ---- the shah's letter ---- */

.menu .letter-veil {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: rgba(4, 14, 9, 0.55);
    animation: open 0.15s ease-out;
}

.menu .letter-card {
    --wide: min(calc(var(--w) - 10 * var(--h)), max(calc(115 * var(--h)), calc(var(--w) * 0.62)));
    position: absolute;
    left: 50%;
    top: calc(5 * var(--h));
    width: var(--wide);
    height: calc(90 * var(--h));
    transform: translateX(-50%);
    box-sizing: border-box;
    border-radius: calc(1.6 * var(--h));
    background:
        url("../art/kit/sun.png") calc(1.2 * var(--h)) calc(1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(100% - 1.2 * var(--h)) calc(1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(1.2 * var(--h)) calc(100% - 1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(100% - 1.2 * var(--h)) calc(100% - 1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        #f5e8c9;
    border: max(2px, calc(0.45 * var(--h))) solid #b0935e;
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
    color: #2a1d10;
    cursor: var(--arrow);
}

/* The way back, the kit's ivory pill with a navy arrow. */
.menu .letter-card .back {
    position: absolute;
    left: calc(8.5 * var(--h));
    top: calc(3 * var(--h));
    height: calc(7.8 * var(--h));
    min-width: calc(24 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(1.4 * var(--h));
    padding: 0 calc(3.5 * var(--h)) 0 calc(3.4 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(3.9 * var(--h)) stretch;
    color: #16234f;
    font-size: calc(3 * var(--h));
    font-weight: 800;
    z-index: 2;
}

.menu .letter-card .back i {
    width: calc(1.8 * var(--h));
    height: calc(1.8 * var(--h));
    border-left: calc(0.6 * var(--h)) solid #16234f;
    border-bottom: calc(0.6 * var(--h)) solid #16234f;
    transform: rotate(45deg);
}

.menu .letter-card .banner {
    position: absolute;
    left: calc(5 * var(--h));
    right: calc(5 * var(--h));
    top: calc(11 * var(--h));
    height: calc(13 * var(--h));
}

.menu .letter-card .banner img {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
}

.menu .letter-card .banner h2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22%;
    margin: 0;
    text-align: center;
    font-size: calc(5 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1f3f8f;
}

.menu .letter-card .rows {
    position: absolute;
    left: calc(5 * var(--h));
    right: calc(5 * var(--h));
    top: calc(29 * var(--h));
    bottom: calc(7.5 * var(--h));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: calc(1.2 * var(--h));
    padding-right: calc(1 * var(--h));
}

.menu .letter-card h3 {
    margin: calc(0.6 * var(--h)) 0 0;
    font-size: calc(3.6 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1f3f8f;
}

.menu .letter-card .rule {
    flex: none;
    height: calc(3 * var(--h));
    background:
        radial-gradient(circle, #bf2a26 0 calc(0.9 * var(--h)), #e2b64a calc(0.9 * var(--h)) calc(1.2 * var(--h)), transparent calc(1.2 * var(--h))) center / calc(3 * var(--h)) 100% no-repeat,
        linear-gradient(#e2b64a, #e2b64a) center / 100% 1.5px no-repeat;
}

.menu .letter-card .waiting { margin: auto; font-size: calc(3 * var(--h)); color: #6b5332; }

.menu .letter-card .decree {
    --row: calc(8.5 * var(--h));
    flex: none;
    height: var(--row);
    display: grid;
    grid-template-columns: calc(var(--row) * 0.86) 2fr 1.36fr 0.56fr calc(24 * var(--h));
    align-items: center;
    gap: calc(1.5 * var(--h));
    padding: 0 calc(1.5 * var(--h)) 0 calc(var(--row) * 0.14);
    border-radius: calc(1.2 * var(--h));
    background: #f7ecd2;
    border: max(1px, calc(0.2 * var(--h))) solid #e2b64a;
}

.menu .letter-card .motif {
    width: calc(var(--row) * 0.72);
    height: calc(var(--row) * 0.72);
    border-radius: 50%;
    background: #f6e6c0;
    box-shadow: inset 0 0 0 calc(var(--row) * 0.05) #1f3f8f;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.menu .letter-card .motif img { width: 86%; height: 86%; object-fit: contain; }
.menu .letter-card .decree.paid .motif img { opacity: 0.5; }

.menu .letter-card .sentence { font-size: calc(3 * var(--h)); line-height: 1.15; }
.menu .letter-card .decree.paid .sentence { color: #6b5332; }

.menu .letter-card .bar {
    height: calc(1.8 * var(--h));
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #e2b64a;
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

.menu .letter-card .bar i { display: block; height: 100%; background: #e2b64a; border-radius: 999px; }
.menu .letter-card .count { font-size: calc(2.6 * var(--h)); color: #6b5332; text-align: center; white-space: nowrap; }

.menu .letter-card .end { display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--h)); }

.menu .letter-card .take {
    width: 100%;
    height: calc(var(--row) * 0.66);
    background: var(--main, url("../art/kit/flat/button-main.png")) center / 100% 100% no-repeat;
    color: #f6ecd4;
    font-size: calc(2.8 * var(--h));
    font-weight: 800;
}

.menu .letter-card .paid { font-size: calc(2.6 * var(--h)); color: #6b5332; }
.menu .letter-card .coins { display: flex; align-items: center; gap: calc(0.6 * var(--h)); }
.menu .letter-card .coins b { font-size: calc(3 * var(--h)); font-weight: 800; color: #1f3f8f; }
.menu .letter-card .coins img { width: calc(3.2 * var(--h)); height: calc(3.2 * var(--h)); }

.menu .letter-card .swap {
    width: calc(var(--row) * 0.6);
    height: calc(var(--row) * 0.6);
    border-radius: 50%;
    background: #1f3f8f;
    box-shadow: inset 0 0 0 calc(0.25 * var(--h)) #e2b64a;
    display: grid;
    place-items: center;
}

.menu .letter-card .swap svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.menu .letter-card .foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.2 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: #6b5332;
}

.menu .letter-card .foot.trouble { color: #bf2a26; }

[dir="rtl"] .menu .letter-card .rows,
[dir="rtl"] .menu .letter-card .foot,
[dir="rtl"] .menu .letter-card h3 { direction: rtl; }
[dir="rtl"] .menu .letter-card h3,
[dir="rtl"] .menu .letter-card .banner h2 { letter-spacing: 0; }
[dir="rtl"] .menu .opening .shown > .card { direction: rtl; }

/* bazaar.css */
/* The bazaar (Bazaar.cs): card tabs standing on a cream panel over the bazaar's ground. Sizes are
   shares of the screen's height, as the game measures them. */

.bazaar {
    --ink: #2a1d10;
    --soft: #6b5332;
    --cobalt: #1f3f8f;
    --navy: #16234f;
    --on-navy: #f6ecd4;
    --panel-top: calc(28.5 * var(--h));
    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: url("../art/bazaar/ground.jpg") center / cover;
    color: var(--ink);
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

.bazaar button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
}

.bazaar button:disabled { cursor: var(--arrow); }
.bazaar img { display: block; pointer-events: none; }

/* The way back: the kit's ivory pill with a navy arrow. */
.bazaar .back-pill {
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(3 * var(--h));
    height: calc(7.8 * var(--h));
    min-width: calc(24 * var(--h));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(1.4 * var(--h));
    padding: 0 calc(3.5 * var(--h)) 0 calc(3.4 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(3.9 * var(--h)) stretch;
    color: var(--navy);
    font-size: calc(3 * var(--h));
    font-weight: 800;
}

.bazaar .back-pill i {
    width: calc(1.8 * var(--h));
    height: calc(1.8 * var(--h));
    border-left: calc(0.6 * var(--h)) solid var(--navy);
    border-bottom: calc(0.6 * var(--h)) solid var(--navy);
    transform: rotate(45deg);
}

.bazaar .title {
    position: absolute;
    left: calc(31 * var(--h));
    top: calc(3.6 * var(--h));
    margin: 0;
    font-size: calc(5 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #f7ecd2;
    -webkit-text-stroke: max(3px, calc(5 * var(--h) / 12)) #1e1712;
    paint-order: stroke fill;
}

.bazaar .purse {
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(3 * var(--h));
    height: calc(7.8 * var(--h));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(1.6 * var(--h));
    padding: 0 calc(4.1 * var(--h)) 0 calc(3.9 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(3.9 * var(--h)) stretch;
    color: var(--navy);
}

.bazaar .purse img { width: calc(4.4 * var(--h)); height: calc(4.4 * var(--h)); }
.bazaar .purse b { font-size: calc(3.3 * var(--h)); font-weight: 800; }

/* The panel the shelves stand on, the kit's paper with a sun in each corner. */
.bazaar .panel {
    position: absolute;
    left: calc(4.5 * var(--h));
    right: calc(4.5 * var(--h));
    top: var(--panel-top);
    height: calc(67 * var(--h));
    box-sizing: border-box;
    border-radius: calc(1.6 * var(--h));
    background:
        url("../art/kit/sun.png") calc(1.2 * var(--h)) calc(1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(100% - 1.2 * var(--h)) calc(1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(1.2 * var(--h)) calc(100% - 1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(100% - 1.2 * var(--h)) calc(100% - 1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        #f5e8c9;
    border: max(2px, calc(0.45 * var(--h))) solid #b0935e;
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* The shelves as card tabs standing behind the panel's top edge; the chosen one in front. */
.bazaar .tabs {
    --card: calc(13 * var(--h));
    position: absolute;
    left: calc(8 * var(--h));
    top: calc(var(--panel-top) - var(--card) * 1.36 + 4 * var(--h));
    display: flex;
    gap: calc(1.8 * var(--h));
    z-index: 0;
}

.bazaar .tab {
    position: relative;
    width: var(--card);
    height: calc(var(--card) * 1.36);
    box-sizing: border-box;
    border-radius: calc(var(--card) * 0.08);
    background: #fdfbf5;
    border: calc(var(--card) * 0.02) solid rgba(22, 35, 79, 0.7);
    box-shadow: 0 calc(var(--card) * 0.016) calc(var(--card) * 0.04) rgba(0, 0, 0, 0.25);
    transition: transform 0.12s;
}

.bazaar .tab:not(.chosen):not(:disabled):hover { transform: translateY(-6%); }

.bazaar .tab img {
    position: absolute;
    left: 50%;
    top: 33%;
    width: calc(var(--card) * 0.5);
    height: calc(var(--card) * 0.5);
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.bazaar .tab span {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 58%;
    text-align: center;
    font-size: calc(2.1 * var(--h));
    line-height: 1.1;
}

.bazaar .tab.chosen {
    z-index: 2;
    border: calc(var(--card) * 0.028) solid var(--navy);
    box-shadow: 0 0 calc(var(--card) * 0.09) rgba(255, 245, 209, 0.75);
    transform-origin: 50% 100%;
    transform: translateY(calc(-2.5 * var(--h))) rotate(-4deg) scale(1.1);
}

.bazaar .tab.chosen span { font-weight: 800; color: var(--navy); }
.bazaar .tab.quiet { opacity: 0.55; }

/* The shelf's heading between two gold rules, and the line under it. */
.bazaar .panel header {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(3.2 * var(--h));
    text-align: center;
}

.bazaar .panel h2 {
    margin: 0 auto;
    width: 80%;
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
    font-size: calc(3.4 * var(--h));
    font-weight: 400;
    color: var(--ink);
}

.bazaar .panel h2 span { white-space: nowrap; }

.bazaar .panel h2 i {
    flex: 1;
    height: 1.5px;
    background: #a8741a;
    position: relative;
}

.bazaar .panel h2 i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(1 * var(--h));
    height: calc(1 * var(--h));
    background: #a8741a;
    transform: translateY(-50%) rotate(45deg);
}

.bazaar .panel h2 i:first-child::after { left: 0; }
.bazaar .panel h2 i:last-child::after { right: 0; }
.bazaar .panel header p { margin: calc(0.4 * var(--h)) 0 0; font-size: calc(2.4 * var(--h)); color: var(--soft); }

.bazaar .goods {
    position: absolute;
    left: calc(6 * var(--h));
    right: calc(6 * var(--h));
    top: calc(14 * var(--h));
    bottom: calc(7.5 * var(--h));
    overflow-y: auto;
}

.bazaar .empty { margin: calc(12 * var(--h)) 0 0; text-align: center; font-size: calc(3 * var(--h)); color: var(--soft); }

/* The goods on a shelf: up to five across, as tall as the shelf allows. */
.bazaar .cards {
    --gap: calc(3.5 * var(--h));
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap);
}

.bazaar .cards.with-limited { height: auto; }
.bazaar .cards.packs { flex-wrap: wrap; height: auto; align-items: flex-start; }

.bazaar .card {
    position: relative;
    width: min(calc(42 * var(--h)), calc((100% - var(--gap) * (var(--across) - 1)) / var(--across)));
    box-sizing: border-box;
    padding: calc(1.6 * var(--h)) calc(1.6 * var(--h)) calc(1.4 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.8 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: #fbf4e2;
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
}

.bazaar .cards.packs .card { width: calc(30 * var(--h)); height: calc(30 * var(--h)); }

.bazaar .card .name { font-size: calc(2.8 * var(--h)); font-weight: 800; color: var(--cobalt); text-align: center; line-height: 1.15; }
.bazaar .card small { font-size: calc(2.2 * var(--h)); color: var(--soft); }

.bazaar .rarity.common { color: var(--soft); }
.bazaar .rarity.rare { color: var(--cobalt); }
.bazaar .rarity.epic { color: #7a2e8c; }
.bazaar .rarity.legendary { color: #a8741a; }
.bazaar .rarity.limited { color: #e2506a; }
.bazaar b.rarity { font-size: calc(2.2 * var(--h)); font-weight: 800; }

/* A face in its oval window with a gold edge; faces are never named. */
.bazaar .oval {
    flex: 1;
    width: 72%;
    max-height: calc(36 * var(--h));
    border-radius: 50%;
    overflow: hidden;
    border: calc(0.5 * var(--h)) solid #e2b64a;
    box-shadow: 0 0 0 1px #3a2a12;
}

.bazaar .oval img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.bazaar .card .back {
    flex: none;
    height: calc(26 * var(--h));
    max-width: 80%;
    object-fit: contain;
    border-radius: calc(1 * var(--h));
}

.bazaar .flourish {
    position: relative;
    flex: 1;
    min-height: 0;
    aspect-ratio: 0.72;
}

.bazaar .flourish > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.bazaar .flourish > img { object-fit: contain; }

.bazaar .table-picture {
    flex: 1;
    width: 90%;
    min-height: calc(8 * var(--h));
    border-radius: calc(1 * var(--h));
    background: center / cover;
    display: grid;
    place-items: center;
}

.bazaar .table-picture img { height: 60%; }

.bazaar .card .thing { height: calc(10 * var(--h)); }

/* The pills at a good's foot: the navy one pays, the ivory one wears, the gold one is yours. */
.bazaar .pill {
    width: 84%;
    height: calc(6.6 * var(--h));
    flex: none;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(0.8 * var(--h));
    font-size: calc(2.8 * var(--h));
    font-weight: 800;
}

.bazaar .pill.pay { background: var(--main, url("../art/kit/flat/button-main.png")) center / 100% 100% no-repeat; color: var(--on-navy); }
.bazaar .pill.pay img { width: calc(3.6 * var(--h)); height: calc(3.6 * var(--h)); }
.bazaar .pill.pay.armed { font-size: calc(2.2 * var(--h)); }
.bazaar .pill.pay:disabled { opacity: 0.55; }

.bazaar .pill.plain {
    width: 60%;
    border-style: solid;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(3.3 * var(--h)) stretch;
    color: var(--navy);
    font-size: calc(2.4 * var(--h));
}

.bazaar .pill.plain:disabled { opacity: 0.6; }

.bazaar .pill.mine {
    border-radius: 999px;
    background: #e2b64a;
    color: var(--navy);
}

/* The limited ones, under the week's three. */
.bazaar .limited { margin-top: calc(2.4 * var(--h)); text-align: center; }
.bazaar .limited h3 { margin: 0; font-size: calc(3 * var(--h)); color: #e2506a; }
.bazaar .limited p { margin: 0 0 calc(1.2 * var(--h)); font-size: calc(2.2 * var(--h)); color: var(--soft); }
.bazaar .limited .row { display: flex; justify-content: center; gap: calc(2 * var(--h)); }
.bazaar .card.small { width: calc(24 * var(--h)); height: calc(34 * var(--h)); }

.bazaar .foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(3 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: var(--soft);
}

.bazaar .foot.trouble { color: #bf2a26; }

[dir="rtl"] .bazaar { font-family: var(--face); }
[dir="rtl"] .bazaar .title { font-family: var(--face); letter-spacing: 0; }
[dir="rtl"] .bazaar .panel,
[dir="rtl"] .bazaar .back-pill { direction: rtl; }
[dir="rtl"] .bazaar .tab.chosen { transform: translateY(calc(-2.5 * var(--h))) rotate(4deg) scale(1.1); }

/* Turned on its side on a phone held upright, as the door is. */
@media (orientation: portrait) {
    .bazaar { top: 50dvh; width: 100vw; transform: translateY(-50%); box-shadow: 0 0 0 100vmax #000; }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .bazaar {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
        box-shadow: none;
    }
}

.bazaar .cards.with-limited .card .back { height: calc(15 * var(--h)); }
.bazaar .card.small .back { height: calc(15 * var(--h)); }
.bazaar .card.small .table-picture { flex: none; height: calc(12 * var(--h)); }

/* pairs.css */
/* «جفت», the pairs game, as the game's PairsView lays it. Every size is a share of the screen's
   height, the way the game measures it; the numbers in the comments are the game's own (H the
   height, W the width). The tray is the kit's cream panel, the cards lie on its floor. */

.pairs {
    /* The tray: as wide as the screen leaves, at most one and a half heights. */
    --wide: min(calc(var(--w) - 6 * var(--h)), calc(150 * var(--h)));
    --rim: calc(var(--wide) * 0.035);
    --head-h: calc(6.5 * var(--h));
    /* The floor the thirteen cards lie on, under the head. */
    --fw: calc(var(--wide) - 2 * var(--rim));
    --fh: calc(61 * var(--h) - 2 * var(--rim) - var(--head-h));
    /* Seven across with a card's sixth between them, two rows with a gap. */
    --cw: min(calc(var(--fw) * 0.96 / 7.96), calc(var(--fh) * 0.95 / 2.12 * 0.72));
    --ch: calc(var(--cw) / 0.72);
    --plaque-h: calc(7.8 * var(--h));
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --ink: #2a1d10;
    --ink-soft: #6b5332;
    --crimson: #a8151c;
    --gold-bright: #e2c268;

    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: url("../art/grounds/pairs.jpg") center / cover;
    color: var(--ink);
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

.pairs button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.pairs img { display: block; pointer-events: none; }

/* ---- the top: the way back, the name, the purse ---- */

/* The kit's ivory plaque (Kit.Button, Kind.Plain): its pointed ends whole, its middle star whole
   and in the middle, and only the plain strip between them stretched. */
.pairs .to-door,
.pairs .purse {
    position: absolute;
    top: calc(3 * var(--h));
    height: var(--plaque-h);
    display: flex;
    align-items: center;
    isolation: isolate;
    color: var(--paper-ink);
}

.pairs .to-door::before,
.pairs .purse::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--plaque-h) * 0.5) stretch;
}

.pairs .to-door::after,
.pairs .purse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--plaque-h) * 72 / 230);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--plain, url("../art/kit/flat/button-plain.png")) center / auto 100% no-repeat;
}

/* The way back (Kit.Back): 0.24H by 0.078H at (0.03H, 0.03H), the navy arrow at its left end
   pointing left in every language, and the name of where it goes. */
.pairs .to-door {
    left: calc(3 * var(--h));
    width: calc(24 * var(--h));
}

.pairs .to-door:hover { filter: brightness(1.1); }

.pairs .to-door:active::before {
    border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png"));
    transform: translateY(max(2px, calc(var(--plaque-h) * 0.035)));
}

.pairs .to-door:active::after { visibility: hidden; }

.pairs .to-door .arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--plaque-h);
    height: var(--plaque-h);
}

.pairs .to-door .arrow path { stroke: var(--paper-ink); stroke-width: 7.5; fill: none; }
.pairs .to-door .arrow polygon { fill: var(--paper-ink); }

.pairs .to-door span {
    position: absolute;
    left: calc(var(--plaque-h) * 0.55);
    right: 0;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    font-size: calc(3 * var(--h));
    font-weight: 800;
    line-height: var(--plaque-h);
}

/* The name of the screen (Kit.Title): cream with a dark edge, beside the way back and as tall. */
.pairs .title {
    position: absolute;
    left: calc(31 * var(--h));
    top: calc(3 * var(--h) + (7.8 * var(--h) - 6.5 * var(--h)) / 2);
    margin: 0;
    font-size: calc(5 * var(--h));
    line-height: calc(6.5 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #f7ecd2;
    -webkit-text-stroke: calc(2 * max(3px, calc(5 * var(--h) / 12))) #1e1712;
    paint-order: stroke fill;
    white-space: nowrap;
}

/* The purse (Kit.Purse) at the top right, without the plus: the website sells no coins. */
.pairs .purse {
    right: calc(3 * var(--h));
    gap: calc(var(--plaque-h) * 0.18);
    padding: 0 calc(var(--plaque-h) * 0.55) 0 calc(var(--plaque-h) * 0.5);
}

.pairs .purse img { width: calc(var(--plaque-h) * 0.56); height: calc(var(--plaque-h) * 0.56); }
.pairs .purse b { font-size: calc(var(--plaque-h) * 0.42); font-weight: 800; }

/* Nothing said yet: the felt waits. */
.pairs .moment {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50 * var(--h));
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(3.6 * var(--h));
    color: var(--on-navy);
}

/* ---- the streak and the day's line ---- */

/* Five stars in a box 0.42H by 0.055H at (W/2 - 0.21H, 0.095H). */
.pairs .stars {
    position: absolute;
    left: calc(var(--w) / 2 - 21 * var(--h));
    top: calc(9.5 * var(--h));
    width: calc(42 * var(--h));
    height: calc(5.5 * var(--h));
    overflow: visible;
}

.pairs .day {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(16.8 * var(--h));
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: var(--on-navy);
    white-space: nowrap;
}

/* ---- the kit's panel: flat cream paper, a matte ochre edge, soft corners, a soft shadow and
   nard's sun in each corner close inside the edge (Kit.DrawPanel) ---- */

.pairs .lacquer,
.pairs .foot {
    position: absolute;
    box-sizing: border-box;
    background-color: #f5e8c9;
    background-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: var(--sun) var(--sun);
    background-position:
        left calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        right calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)),
        right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h));
    border: max(2px, calc(0.45 * var(--h))) solid #b0935e;
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) max(4px, calc(1.6 * var(--h))) rgba(0, 0, 0, 0.3);
}

/* The tray: wide by 0.61H, from 0.2H down, in the middle. */
.pairs .lacquer {
    --sun: min(calc(6 * var(--h)), calc(61 * var(--h) * 0.2));
    left: calc((var(--w) - var(--wide)) / 2);
    top: calc(20 * var(--h));
    width: var(--wide);
    height: calc(61 * var(--h));
}

/* The tray's head, inside the rim: the lanterns on one side, the shelf of won backs on the other. */
.pairs .head {
    position: absolute;
    left: calc(var(--rim) - max(2px, 0.45 * var(--h)));
    top: calc(var(--rim) - max(2px, 0.45 * var(--h)));
    width: var(--fw);
    height: var(--head-h);
}

/* A lantern a try, lit while it is left: 1.1 of the head tall, past the corner's star. */
.pairs .lantern {
    position: absolute;
    left: calc(var(--fw) * 0.04 + var(--i) * var(--head-h) * 1.1 * 0.62 * 1.15);
    top: calc(var(--head-h) * -0.05);
    width: calc(var(--head-h) * 1.1 * 0.62);
    height: calc(var(--head-h) * 1.1);
    object-fit: contain;
}

/* The shelf of the day's won backs at the head's right end, its label before them. */
.pairs .winnings {
    position: absolute;
    right: calc(var(--fw) * 0.04);
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: calc(var(--head-h) * 0.9 * 0.72 * 0.12);
}

.pairs .winnings .label {
    margin-right: calc(1.2 * var(--h));
    font-size: calc(2 * var(--h));
    color: var(--ink-soft);
    white-space: nowrap;
}


.pairs .mini {
    position: relative;
    width: calc(var(--head-h) * 0.9 * 0.72);
    height: calc(var(--head-h) * 0.9);
    flex: none;
}

.pairs .mini .card { --wide: 100%; aspect-ratio: auto; height: 100%; box-shadow: none; }

/* The floor under the head, where the thirteen cards lie in rows of seven and six. */
.pairs .floor {
    position: absolute;
    left: calc(var(--rim) - max(2px, 0.45 * var(--h)));
    top: calc(var(--rim) + var(--head-h) - max(2px, 0.45 * var(--h)));
    width: var(--fw);
    height: var(--fh);
}

/* ---- the cards ---- */

.pairs .slot {
    --gap: calc(var(--cw) * 0.16);
    --x: calc((var(--fw) - (var(--inrow) * var(--cw) + (var(--inrow) - 1) * var(--gap))) / 2 + var(--col) * (var(--cw) + var(--gap)));
    --y: calc((var(--fh) - 2.12 * var(--ch)) / 2 + var(--row) * 1.12 * var(--ch));
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--cw);
    height: var(--ch);
    transition: transform 0.12s cubic-bezier(0.61, 1, 0.88, 1);
}

.pairs .slot.tap { cursor: var(--point); }

/* A card to touch lifts a little while the pointer is over it. */
.pairs .slot.tap:hover { transform: translateY(calc(var(--ch) * -0.05)) scale(1.03); }

.pairs .turn {
    position: absolute;
    inset: 0;
}

.pairs .front,
.pairs .behind {
    position: absolute;
    inset: 0;
}

.pairs .slot .card {
    --wide: 100%;
    aspect-ratio: auto;
    height: 100%;
    box-shadow: 0 calc(0.35 * var(--h)) calc(0.7 * var(--h)) rgba(0, 0, 0, 0.4);
}

.pairs .turn.down .front { visibility: hidden; }
.pairs .turn:not(.down) .behind { visibility: hidden; }

/* The card lying open, the first of a try: up off the tray, its shadow deeper. */
.pairs .slot.lifted .card { box-shadow: 0 calc(1 * var(--h)) calc(2 * var(--h)) rgba(0, 0, 0, 0.45); }

/* The day over: a pair won in a steady warm light with a gold ring (CardSlot.Won), and a card
   never matched held back a shade. */
.pairs .slot.won .card {
    box-shadow: 0 0 calc(var(--cw) * 0.2) calc(var(--cw) * 0.03) rgba(255, 214, 77, 0.9);
}

.pairs .slot.won .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: max(2px, calc(var(--cw) * 0.03)) solid #ffe680;
    border-radius: inherit;
}


.pairs .slot.passed .turn { filter: brightness(0.6); }

/* What the joker and a coin card hide, over the card's back: the simurgh's feather, the coins. */
.pairs .behind .feather,
.pairs .mini .feather {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 72%;
    transform: translate(-50%, -50%);
}

.pairs .behind .coins,
.pairs .mini .coins {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
}

/* A card turned over on its long axis (CardSlot.Flip): its width |cos(pi t)| over a sine in and
   out, the other side showing from half way. */
@keyframes pairs-flip {
    0% { transform: scaleX(1); }
    10% { transform: scaleX(0.997); }
    15% { transform: scaleX(0.985); }
    20% { transform: scaleX(0.955); }
    25% { transform: scaleX(0.896); }
    30% { transform: scaleX(0.798); }
    35% { transform: scaleX(0.654); }
    40% { transform: scaleX(0.467); }
    45% { transform: scaleX(0.243); }
    50% { transform: scaleX(0); }
    55% { transform: scaleX(0.243); }
    60% { transform: scaleX(0.467); }
    65% { transform: scaleX(0.654); }
    70% { transform: scaleX(0.798); }
    75% { transform: scaleX(0.896); }
    80% { transform: scaleX(0.955); }
    85% { transform: scaleX(0.985); }
    90% { transform: scaleX(0.997); }
    100% { transform: scaleX(1); }
}

@keyframes pairs-first-half {
    0%, 49.9% { visibility: visible; }
    50%, 100% { visibility: hidden; }
}

@keyframes pairs-second-half {
    0%, 49.9% { visibility: hidden; }
    50%, 100% { visibility: visible; }
}

.pairs .turn.to-down,
.pairs .turn.to-up { animation: pairs-flip 0.4s linear both; }

.pairs .turn.to-down .front,
.pairs .turn.to-up .behind { animation: pairs-first-half 0.4s linear both; }

.pairs .turn.to-down .behind,
.pairs .turn.to-up .front { animation: pairs-second-half 0.4s linear both; }

/* The day's end: the cards never matched go over one after another, and fall back a shade. */
@keyframes pairs-pass {
    from { filter: brightness(1); }
    to { filter: brightness(0.6); }
}

.pairs .slot.turning .turn {
    animation: pairs-flip 0.4s linear var(--turn) both, pairs-pass 0.3s linear calc(var(--turn) + 0.4s) both;
}

.pairs .slot.turning .turn .front { animation: pairs-first-half 0.4s linear var(--turn) both; }
.pairs .slot.turning .turn .behind { animation: pairs-second-half 0.4s linear var(--turn) both; }

/* Dealt from the pack just off the tray's top right corner: 0.32 s each, a sine out, growing from
   0.7, and seen at once. */
@keyframes pairs-deal {
    from {
        transform:
            translate(calc(var(--wide) - var(--rim) - 0.6 * var(--cw) - var(--x)), calc(0px - var(--rim) - var(--head-h) - 0.4 * var(--ch) - var(--y)))
            scale(0.7);
    }
    to { transform: translate(0, 0) scale(1); }
}

@keyframes pairs-seen {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pairs .slot.deal {
    animation:
        pairs-deal 0.32s cubic-bezier(0.61, 1, 0.88, 1) var(--deal) backwards,
        pairs-seen 0.12s linear var(--deal) backwards;
}

/* A pair won: both cards to the middle of the floor, side by side, and grown by a third. */
@keyframes pairs-together {
    to {
        transform:
            translate(calc(var(--fw) / 2 + var(--side) * 0.81 * var(--cw) - var(--cw) / 2 - var(--x)), calc(var(--fh) / 2 - var(--ch) / 2 - var(--y)))
            scale(1.35);
    }
}

.pairs .slot.paired {
    z-index: 5;
    animation: pairs-together 0.45s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

/* The back a pair won, said to be theirs under the two cards (the game opens its page here). */
.pairs .prize {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--fh) / 2 + var(--ch) * 1.35 / 2 + 1.2 * var(--h));
    z-index: 7;
    margin: 0;
    text-align: center;
    font-size: calc(4 * var(--h));
    font-weight: 800;
    color: var(--gold-bright);
    -webkit-text-stroke: max(1.5px, calc(0.22 * var(--h))) #1e1712;
    paint-order: stroke fill;
    text-shadow: 0 calc(0.3 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.45);
    animation: pairs-seen 0.25s linear both;
}

/* The coins a pair paid, flown to the purse (pairs.js): 0.4H wide over the middle of the floor. */
.pairs .coins-won {
    position: absolute;
    left: calc(var(--w) / 2 - 20 * var(--h));
    top: calc(20 * var(--h) + var(--rim) + var(--head-h) + var(--fh) / 2 - 3 * var(--h));
    width: calc(40 * var(--h));
    height: calc(6 * var(--h));
    z-index: 7;
    text-align: center;
    font-size: calc(5 * var(--h));
    line-height: calc(6 * var(--h));
    font-weight: 800;
    color: var(--gold-bright);
    pointer-events: none;
}

/* The shower over a pair won is drawn here by pairs.js, over the whole page. */
.pairs .sky {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.pairs .sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- the foot: the day's sentence, and the button when there is one ---- */

/* rect(0.06H, 0.83H, W - 0.12H, 0.155H) */
.pairs .foot {
    --sun: calc(15.5 * var(--h) * 0.2);
    --foot-w: calc(var(--w) - 12 * var(--h));
    left: calc(6 * var(--h));
    top: calc(83 * var(--h));
    width: var(--foot-w);
    height: calc(15.5 * var(--h));
}

.pairs .foot .line,
.pairs .foot .second {
    position: absolute;
    left: 5%;
    right: 5%;
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1.15;
}

/* The day's sentence round 0.32 of the sheet down, the smaller line under it round 0.66. */
.pairs .foot .line {
    top: calc(15.5 * var(--h) * 0.32 - max(2px, 0.45 * var(--h)));
    font-size: calc(3 * var(--h));
    color: var(--ink);
}

.pairs .foot .line.refused { color: var(--crimson); }

.pairs .foot .second {
    top: calc(15.5 * var(--h) * 0.66 - max(2px, 0.45 * var(--h)));
    font-size: calc(2.7 * var(--h));
    color: var(--ink-soft);
}

/* The navy enamel button (Kit.Button, Kind.Main): min(0.4 of the sheet, 0.42H) by 0.07H, its top
   half way down the sheet. */
.pairs .foot .main {
    --button-h: calc(7 * var(--h));
    position: absolute;
    left: 50%;
    top: calc(15.5 * var(--h) * 0.5 - max(2px, 0.45 * var(--h)));
    width: min(calc(var(--foot-w) * 0.4), calc(42 * var(--h)));
    height: var(--button-h);
    transform: translateX(-50%);
    isolation: isolate;
    color: var(--on-navy);
    font-size: calc(3 * var(--h));
    font-weight: 800;
    white-space: nowrap;
}

.pairs .foot .main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--button-h) * 115 / 222) stretch;
}

.pairs .foot .main::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--button-h) * 72 / 222);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--main, url("../art/kit/flat/button-main.png")) center / auto 100% no-repeat;
}

.pairs .foot .main:hover { filter: brightness(1.15); }
.pairs .foot .main:disabled { opacity: 0.6; cursor: var(--arrow); filter: none; }

/* ---- Persian: the page keeps its places, and its words are written from the right ---- */

[dir="rtl"] .pairs {
    direction: ltr;
    font-family: var(--face);
}

[dir="rtl"] .pairs .title,
[dir="rtl"] .pairs .day,
[dir="rtl"] .pairs .winnings .label,
[dir="rtl"] .pairs .foot p,
[dir="rtl"] .pairs .foot .main,
[dir="rtl"] .pairs .to-door span,
[dir="rtl"] .pairs .prize,
[dir="rtl"] .pairs .coins-won,
[dir="rtl"] .pairs .moment { direction: rtl; }

[dir="rtl"] .pairs .title,
[dir="rtl"] .pairs .to-door span,
[dir="rtl"] .pairs .foot .main { font-weight: 700; }

/* The page turns on its side on a phone held upright, as the door does. */
@media (orientation: portrait) {
    .pairs {
        width: 100vw;
        height: calc(100 * var(--h));
        top: 50dvh;
        transform: translateY(-50%);
        box-shadow: 0 0 0 100vmax #000;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .pairs {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
        box-shadow: none;
    }
}

/* ladder.css */
/* The leaderboard (LadderView.cs). Its places and sizes are laid in pixels by the page from its
   own size, in the shares of the screen's height the game measures them in; what is here is how
   each piece looks: the kit's panel and cards, the medals, the road, the tabs. */

.ladder {
    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: url("../art/ladder/ground.jpg") center / cover;
    color: #2a1d10;
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

.ladder button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.ladder button:disabled { cursor: var(--arrow); }
.ladder img { display: block; pointer-events: none; }

.ladder .say,
.ladder .head,
.ladder .title,
.ladder .back,
.ladder .tab,
.ladder .medal *,
.ladder .disc *,
.ladder .coin,
.ladder .crown,
.ladder .plate,
.ladder .band,
.ladder .lines,
.ladder .panel,
.ladder .how,
.ladder .mine,
.ladder .strip,
.ladder .gift,
.ladder .take,
.ladder .news,
.ladder .station,
.ladder .avatar {
    position: absolute;
    box-sizing: border-box;
}

/* A line of text laid where the game writes it: its box starts a little over its baseline. */
.ladder .say {
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, given back by the margin so the line does not move. */
    padding-block: 0.25em;
    margin-top: -0.25em;
    pointer-events: none;
}

.ladder .bold { font-weight: 700; }
.ladder .caps { letter-spacing: 0.12em; }

.ladder .farr img {
    display: inline-block;
    height: 1.3em;
    margin-inline-end: 0.25em;
    vertical-align: -0.29em;
}

/* ---- the way back and the name of the screen (Kit.Back, Kit.Title) ---- */

.ladder .back {
    display: flex;
    align-items: center;
    isolation: isolate;
    color: #16234f;
    filter: drop-shadow(0 calc(0.3 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.3));
}

.ladder .back::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(3.9 * var(--h)) stretch;
}

.ladder .back:hover { filter: brightness(1.08) drop-shadow(0 calc(0.3 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.3)); }
.ladder .back:active::before { border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png")); transform: translateY(2px); }

.ladder .back .arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(7.8 * var(--h));
    height: calc(7.8 * var(--h));
    fill: #16234f;
    stroke: #16234f;
    stroke-width: 7.5;
}

.ladder .back .word {
    flex: 1;
    min-width: 0;
    margin-left: calc(4.3 * var(--h));
    padding: 0 calc(2 * var(--h)) 0 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    text-align: center;
    font-size: var(--fs);
    font-weight: 700;
}

.ladder .title {
    margin: 0;
    font-size: var(--fs);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    color: #f7ecd2;
    -webkit-text-stroke: max(6px, calc(var(--fs) / 6)) #1e1712;
    paint-order: stroke fill;
}

/* ---- the kit's panel, its cards, and a card's place in it ---- */

.ladder .panel {
    background: #f5e8c9;
    border-style: solid;
    border-color: #b0935e;
}

.ladder .panel .sun { position: absolute; }

.ladder .plate {
    display: block;
    background: #fbf4e2;
    border-style: solid;
    border-color: rgba(22, 35, 79, 0.35);
}

.ladder .plate.lit { border-color: #16234f; }

/* ---- a medal (RankMark) ---- */

.ladder .medal { display: contents; }
.ladder .medal img { position: absolute; }
.ladder .medal.dim img { opacity: 0.45; }

.ladder .medal .shade {
    display: block;
    background: radial-gradient(circle closest-side, rgba(42, 29, 16, 0.4) 68%, rgba(42, 29, 16, 0.16) 84%, rgba(42, 29, 16, 0) 100%);
}

.ladder .medal .shade.dim {
    background: radial-gradient(circle closest-side, rgba(42, 29, 16, 0.16) 68%, rgba(42, 29, 16, 0.064) 84%, rgba(42, 29, 16, 0) 100%);
}

.ladder .medal .halo {
    display: block;
    background: radial-gradient(circle closest-side, rgba(226, 182, 74, 0.5) 68%, rgba(226, 182, 74, 0.2) 84%, rgba(226, 182, 74, 0) 100%);
}

/* A place on its disc. */
.ladder .disc { display: contents; }

.ladder .disc b {
    display: grid;
    place-items: center;
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1;
}

.ladder .station { border-radius: 50%; }

/* ---- my rank, on the left ---- */

.ladder .mine .bar {
    position: absolute;
    display: flex;
    box-sizing: border-box;
    border: 1px solid #e2b64a;
    border-radius: 999px;
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

.ladder .mine .bar i { display: block; height: 100%; background: #e2b64a; border-radius: 999px; }

.ladder .lines { overflow: visible; pointer-events: none; }
.ladder .lines .track { stroke: rgba(107, 83, 50, 0.2); fill: none; }
.ladder .lines .gold { stroke: #e2b64a; fill: none; }

.ladder .how {
    margin: 0;
    font-size: var(--fs);
    line-height: 1.25;
    text-align: center;
    color: #6b5332;
}

/* ---- the page's head, beside the cards ---- */

.ladder .head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    color: #f7ecd2;
    pointer-events: none;
}

.ladder .head .named {
    font-size: var(--fs);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    -webkit-text-stroke: max(6px, calc(var(--fs) / 6)) #1e1712;
    paint-order: stroke fill;
}

.ladder .head .counted {
    font-size: var(--fs);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    color: rgba(247, 236, 210, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---- the tabs: white cards standing behind the panel's top, the one on show in front ---- */

.ladder .tab { transform-origin: 50% 100%; z-index: 1; }
.ladder .tab.on { z-index: 3; }
.ladder .sheet { z-index: 2; }

.ladder .tab .face {
    position: absolute;
    inset: 0;
    background: #fdfbf5;
    border-style: solid;
    border-color: rgba(22, 35, 79, 0.7);
    transition: transform 0.12s;
}

.ladder .tab.on .face { border-color: #16234f; }
.ladder .tab:not(:disabled):hover .face { transform: translateY(-6%); }

.ladder .tab .face img,
.ladder .tab .face .star { position: absolute; object-fit: contain; }
.ladder .tab .star polygon { fill: #1f3f8f; stroke: #e2b64a; stroke-width: 0.05; }

.ladder .tab .name {
    position: absolute;
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, given back by the margin so the line does not move. */
    padding-block: 0.25em;
    margin-top: -0.25em;
    text-align: center;
    color: #2a1d10;
}

.ladder .tab .name.bold { color: #1f3f8f; }

/* ---- the list in the panel ---- */

.ladder .list {
    position: absolute;
    z-index: 4;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b0935e transparent;
}

.ladder .column {
    display: flex;
    flex-direction: column;
}

.ladder .quiet {
    margin: 0;
    font-size: var(--fs);
    color: #6b5332;
    text-align: start;
}

.ladder .chips {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
}

.ladder .chips button { position: relative; flex: none; }

.ladder .chips .all {
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    color: #16234f;
    font-weight: 700;
}

.ladder .chips .all::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 14%;
    bottom: 14%;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--pill) * 0.5) stretch;
}

.ladder .chips .all.on { color: #f6ecd4; }
.ladder .chips .all.on::before { border-image-source: var(--main, url("../art/kit/flat/button-main.png")); }
.ladder .chips .all span { font-size: var(--fs); white-space: nowrap; min-width: 0; overflow: hidden; overflow: clip visible; }

/* ---- the hall: its two windows, its ten tiles, a face in a round window ---- */

.ladder .pills {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
}

.ladder .pill {
    position: relative;
    flex: none;
    isolation: isolate;
    color: #16234f;
    font-size: var(--fs);
    font-weight: 700;
    white-space: nowrap;
}

.ladder .pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--pill) * 0.5) stretch;
}

.ladder .pill.on { color: #f6ecd4; }
.ladder .pill.on::before { border-image-source: var(--main, url("../art/kit/flat/button-main.png")); }
.ladder .pill:not(:disabled):hover { filter: brightness(1.08); }
.ladder .pill:not(:disabled):active::before { border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png")); transform: translateY(2px); }

.ladder .tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: none;
}

.ladder .tiles .tile { position: relative; display: block; }
.ladder .tiles .tile:hover { filter: brightness(1.03); }

.ladder .avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    border-style: solid;
    border-color: rgba(226, 182, 74, 0.7);
    background: #8c6f63;
    color: #f7ecd2;
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1;
}

.ladder .avatar.empty { border-color: rgba(226, 182, 74, 0.3); background: rgba(185, 173, 147, 0.18); color: #6b5332; }
.ladder .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ladder .chips .chip:not(:disabled):hover { filter: brightness(1.08); }

.ladder .podium,
.ladder .row,
.ladder .road {
    position: relative;
    flex: none;
}

/* My own place under the list, in the kit's navy. */
.ladder .strip {
    z-index: 4;
    background: #16234f;
}

/* ---- the road ---- */

.ladder .road .band {
    display: block;
    background: rgba(251, 244, 226, 0.4);
    border: 1px solid rgba(22, 35, 79, 0.15);
}

.ladder .road .band.reached {
    background: rgba(251, 244, 226, 0.8);
    border-color: rgba(22, 35, 79, 0.3);
}

.ladder .gift {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs);
    color: #6b5332;
    white-space: nowrap;
    pointer-events: none;
}

.ladder .gift .coin,
.ladder .take .coin {
    position: relative;
    flex: none;
}

.ladder .gift .tick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #2a1d10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A gift waiting: the coin and its number, shining, larger under the mouse, sunk when pressed. */
.ladder .take {
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
    transition: transform 0.08s;
    z-index: 1;
}

.ladder .take:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.05); }
.ladder .take:not(:disabled):active { transform: translate(-50%, -50%) scale(0.92); }
.ladder .take:disabled { opacity: 0.5; }

.ladder .take b {
    font-size: var(--fs);
    font-weight: 700;
    color: #2a1d10;
    line-height: 1;
}

.ladder .take .shine {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(226, 182, 74, 0.07);
    animation: ladder-shine 0.9s ease-in-out infinite alternate;
}

@keyframes ladder-shine {
    from { transform: scale(1); background: rgba(226, 182, 74, 0.07); }
    to { transform: scale(var(--grow)); background: rgba(226, 182, 74, 0.14); }
}

/* ---- news on the felt: a refusal, a gift given, what idle months took ---- */

.ladder .news {
    margin: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 0 calc(2.5 * var(--h));
    border: 1px solid #b0935e;
    border-radius: calc(2 * var(--h));
    background: rgba(245, 232, 201, 0.95);
    font-size: var(--fs);
    color: #1f3f8f;
    white-space: nowrap;
    overflow: hidden;
    z-index: 5;
}

.ladder .news.bad { color: #bf2a26; }

/* Persian: the places stay as they are, and the words are written from the right. */
[dir="rtl"] .ladder { font-family: var(--face); }
[dir="rtl"] .ladder .say,
[dir="rtl"] .ladder .how,
[dir="rtl"] .ladder .quiet,
[dir="rtl"] .ladder .head,
[dir="rtl"] .ladder .news,
[dir="rtl"] .ladder .gift,
[dir="rtl"] .ladder .take,
[dir="rtl"] .ladder .tab .name,
[dir="rtl"] .ladder .back .word,
[dir="rtl"] .ladder .title { direction: rtl; }
[dir="rtl"] .ladder .title,
[dir="rtl"] .ladder .head .named,
[dir="rtl"] .ladder .caps { letter-spacing: 0; }

/* mine.css */
/* My page (MyPage.cs): the kit's top, my card down the left, and the page on the right with its
   cards standing behind its top edge. Every size is a share of the screen's height, the way the
   game measures it; the numbers in the comments are the game's own, in hundredths of a height. */

.mypage {
    /* The shelf my card stands on, and the side the page takes (MyPage.Shelf, MyPage.Side). */
    --S: clamp(calc(48 * var(--h)), calc(0.27 * var(--w)), calc(60 * var(--h)));
    --side: calc(9.5 * var(--h) + var(--S));
    --sheet-x: calc(var(--side) - 1.5 * var(--h));
    --sheet-w: calc(var(--w) - 3 * var(--h) - var(--side));
    /* As many cards as stand on the page (MyPage.Tabs): the look, the badges, the record, the games, the showcase, the settings. */
    --tabs: 6;
    --card: min(calc(12.5 * var(--h)), calc((var(--sheet-w) * 0.6 - (var(--tabs) - 1) * 1.6 * var(--h)) / var(--tabs)));
    --mw: calc(var(--S) - 3 * var(--h));
    --r: min(calc(var(--mw) * 0.24), calc(9.5 * var(--h)));
    --gold: #e2b64a;
    --ink: #2a1d10;
    --ink-soft: #6b5332;
    --cobalt: #1f3f8f;
    --navy: #16234f;
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --crimson: #a8151c;
    --paper: #f5e8c9;
    --edge: #b0935e;
    --card-paper: #fbf4e2;
    --tab-paper: #fdfbf5;
    --warning: #b3541e;
    --won: #2e6e52;

    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: #2b2418 url("../art/me/ground.jpg") center / cover;
    color: var(--ink);
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

.mypage button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.mypage button:disabled { cursor: var(--arrow); }
.mypage img { display: block; pointer-events: none; }
.mypage p { margin: 0; }

/* ---- the kit's enamel (Kit.Button): ivory, navy, and ivory with crimson words ---- */

.mypage .kit {
    --bh: calc(8.8 * var(--h));
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    height: var(--bh);
    min-width: calc(20 * var(--h));
    padding: 0 calc(8.5 * var(--h));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: calc(3.2 * var(--h));
    line-height: 1;
    color: var(--paper-ink);
    white-space: nowrap;
}

.mypage .kit > span { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; }
.mypage .kit.main { color: var(--on-navy); }
.mypage .kit.danger { color: var(--crimson); }

.mypage .kit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.mypage .kit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--bh) * 72 / 230);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--plain, url("../art/kit/flat/button-plain.png")) center / auto 100% no-repeat;
}

.mypage .kit.main::before { border-image: var(--main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--bh) * 0.518) stretch; }
.mypage .kit.main::after { width: calc(var(--bh) * 72 / 222); background-image: var(--main, url("../art/kit/flat/button-main.png")); }

.mypage button.kit:not(:disabled):hover { filter: brightness(1.15); }

/* Pressed, the enamel sinks under the finger and its words go down with it. */
.mypage button.kit:not(:disabled):active { padding-top: max(4px, calc(var(--bh) * 0.07)); }
.mypage button.kit:not(:disabled):active::after { visibility: hidden; }

.mypage button.kit:not(:disabled):active::before {
    border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png"));
    transform: translateY(max(2px, calc(var(--bh) * 0.035)));
    filter: brightness(0.9);
}

.mypage button.kit.main:not(:disabled):active::before { border-image-source: var(--main-down, url("../art/kit/flat/button-main-down.png")); }

/* ---- the top: the way back, the page's name, the purse ---- */

.mypage .back {
    --bh: calc(7.8 * var(--h));
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(3 * var(--h));
    width: calc(24 * var(--h));
    min-width: 0;
    padding: 0 calc(var(--bh) * 0.25) 0 calc(var(--bh) * 0.9);
    font-size: calc(3 * var(--h));
    z-index: 4;
}

/* The arrow at the left end, pointing left in every language. */
.mypage .back .arrow {
    position: absolute;
    left: calc(var(--bh) * 0.42);
    top: 50%;
    width: calc(var(--bh) * 0.36);
    height: max(2px, calc(var(--bh) * 0.075));
    background: var(--paper-ink);
    transform: translateY(-50%);
}

.mypage .back .arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    border-right: calc(var(--bh) * 0.208) solid var(--paper-ink);
    border-top: calc(var(--bh) * 0.16) solid transparent;
    border-bottom: calc(var(--bh) * 0.16) solid transparent;
    transform: translateY(-50%);
}

.mypage button.kit.back:not(:disabled):active .arrow { margin-top: max(2px, calc(var(--bh) * 0.035)); }

.mypage .title {
    position: absolute;
    left: calc(31 * var(--h));
    top: calc(3.65 * var(--h));
    margin: 0;
    font-size: calc(5 * var(--h));
    line-height: calc(6.5 * var(--h));
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #f7ecd2;
    -webkit-text-stroke: calc(2 * max(3px, calc(5 * var(--h) / 12))) #1e1712;
    paint-order: stroke fill;
    white-space: nowrap;
}

.mypage .purse {
    --bh: calc(7.8 * var(--h));
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(3 * var(--h));
    min-width: 0;
    padding: 0 calc(var(--bh) * 0.55) 0 calc(var(--bh) * 0.5);
    gap: calc(var(--bh) * 0.18);
    direction: ltr;
}

.mypage .purse img { width: calc(var(--bh) * 0.56); height: calc(var(--bh) * 0.56); }
.mypage .purse b { font-size: calc(var(--bh) * 0.42); font-weight: 800; }

/* ---- the panel (Kit.DrawPanel): cream paper, a matte ochre edge, nard's sun in each corner ---- */

.mypage .panel {
    position: absolute;
    box-sizing: border-box;
    background-color: var(--paper);
    background-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
    background-size: calc(6 * var(--h)) calc(6 * var(--h));
    background-position: left calc(1.2 * var(--h)) top calc(1.2 * var(--h)), right calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)), right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h));
    background-repeat: no-repeat;
    border: max(2px, calc(0.45 * var(--h))) solid var(--edge);
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
}

/* A card inside a panel (Kit.DrawCard): a shade lighter, a thin navy line, a small shadow. */
.mypage .thing,
.mypage .number,
.mypage .near,
.mypage .played,
.mypage .motto-row {
    box-sizing: border-box;
    background: var(--card-paper);
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(1.8 * var(--h));
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
}

/* ---- me, on the left ---- */

.mypage .me-card {
    left: calc(4.5 * var(--h));
    top: calc(20 * var(--h));
    width: var(--mw);
    height: calc(77 * var(--h));
    padding: 0 calc(4 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.mypage .face {
    position: relative;
    flex: none;
    margin-top: calc(4.5 * var(--h));
    width: calc(var(--r) * 2.2);
    height: calc(var(--r) * 2.2);
}

/* My face in a round gold frame. */
.mypage .face .disc {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: calc(var(--r) * 0.1);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1.5px rgba(42, 29, 16, 0.6);
}

.mypage .face .disc img,
.mypage .oval img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
}

.mypage .face.open .disc { outline: max(2px, calc(0.5 * var(--h))) solid var(--cobalt); outline-offset: calc(0.6 * var(--h)); }

.mypage .initial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f6e6c0;
    color: var(--cobalt);
    font-weight: 800;
    font-size: calc(var(--r) * 0.9);
}

/* The round cobalt button with the painted pen on it: this can be changed. */
.mypage .pen {
    --pen: calc(5.8 * var(--h));
    width: calc(var(--pen) * 0.92);
    height: calc(var(--pen) * 0.92);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cobalt) !important;
    border: max(1.5px, calc(var(--pen) * 0.05)) solid var(--gold) !important;
    box-shadow: 0 calc(var(--pen) * 0.05) 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.1s;
}

.mypage .pen img { width: 65%; height: 65%; object-fit: contain; }
.mypage .pen:hover { transform: translateY(-5%); }
.mypage .pen.small { --pen: calc(4 * var(--h)); }

.mypage .pen.on-rim {
    position: absolute;
    left: calc(var(--r) * 1.878 - var(--pen) * 0.46);
    top: calc(var(--r) * 1.878 - var(--pen) * 0.46);
}

.mypage .name {
    margin-top: calc(1 * var(--h));
    max-width: 100%;
    font-size: calc(4.4 * var(--h));
    line-height: 1.25;
    color: var(--cobalt);
}

.mypage .name .called { position: relative; display: inline-block; max-width: calc(var(--mw) - 22 * var(--h)); vertical-align: top; }
.mypage .name b { display: block; min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-weight: 800; }

.mypage .name .pen {
    position: absolute;
    left: calc(100% + 1.2 * var(--h));
    top: 50%;
    margin-top: calc(var(--pen) * -0.46);
}

.mypage .name .pen:hover { transform: translateY(-5%); }

.mypage .motto {
    margin-top: calc(0.3 * var(--h));
    max-width: 100%;
    font-size: calc(2.6 * var(--h));
    line-height: 1.4;
}

.mypage .motto .worn { position: relative; display: inline-block; max-width: calc(var(--mw) - 18 * var(--h)); }

.mypage .motto .words {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-style: italic;
    color: var(--ink);
}

.mypage .motto .words.none { font-style: normal; color: var(--ink-soft); }

.mypage .motto .pen {
    position: absolute;
    left: calc(100% + 1 * var(--h));
    top: 50%;
    margin-top: calc(var(--pen) * -0.46);
}

.mypage .me-card .under {
    margin-top: calc(0.2 * var(--h));
    font-size: calc(2.6 * var(--h));
    color: var(--ink-soft);
}

/* The name, changed where it stands: a field in its place, a tick and a cross. */
.mypage .renaming {
    margin-top: calc(1.8 * var(--h));
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(1 * var(--h));
    direction: ltr;
}

.mypage input {
    font: inherit;
    color: var(--paper-ink);
    user-select: text;
    -webkit-user-select: text;
}

.mypage .renaming input,
.mypage .city,
.mypage .digits input {
    flex: 1;
    min-width: 0;
    height: calc(7 * var(--h));
    box-sizing: border-box;
    padding: 0 calc(3.5 * var(--h));
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--field, url("../art/kit/field.png")) 0 118 fill / 0 calc(7 * var(--h) * 118 / 158) stretch;
    background: none;
    outline: none;
    font-size: calc(3.4 * var(--h));
    font-weight: 700;
    text-align: center;
}

.mypage .renaming .tick,
.mypage .renaming .cross {
    position: relative;
    flex: none;
    width: calc(6 * var(--h));
    height: calc(6 * var(--h));
    box-sizing: border-box;
    border-radius: 50%;
    border: max(1.5px, calc(0.3 * var(--h))) solid var(--gold);
    box-shadow: 0 calc(0.3 * var(--h)) 0 rgba(0, 0, 0, 0.25);
}

.mypage .renaming .tick { background: var(--cobalt); }
.mypage .renaming .cross { background: var(--tab-paper); }
.mypage .renaming button:disabled { opacity: 0.45; }
.mypage .renaming button:not(:disabled):hover { transform: translateY(-5%); }

.mypage .renaming .tick i {
    position: absolute;
    left: 30%;
    top: 26%;
    width: 38%;
    height: 22%;
    border-left: max(2.5px, calc(0.48 * var(--h))) solid var(--gold);
    border-bottom: max(2.5px, calc(0.48 * var(--h))) solid var(--gold);
    transform: rotate(-45deg);
}

.mypage .renaming .cross i::before,
.mypage .renaming .cross i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42%;
    height: max(2px, calc(0.42 * var(--h)));
    background: var(--ink-soft);
    transform: translate(-50%, -50%) rotate(45deg);
}

.mypage .renaming .cross i::after { transform: translate(-50%, -50%) rotate(-45deg); }

.mypage .hint {
    margin-top: calc(0.8 * var(--h));
    width: 100%;
    text-align: center;
    font-size: calc(2.3 * var(--h));
    line-height: 1.3;
    color: var(--ink-soft);
}

.mypage .hint.warning { color: var(--warning); }

/* The gold rule with its dot, and my rank under it. */
.mypage .rule {
    position: relative;
    flex: none;
    margin-top: calc(2.4 * var(--h));
    width: 100%;
    height: max(1px, calc(0.2 * var(--h)));
    background: var(--gold);
}

.mypage .rule::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(1.2 * var(--h));
    height: calc(1.2 * var(--h));
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
}

.mypage .rank {
    margin-top: calc(2.2 * var(--h));
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(1.5 * var(--h));
}

.mypage .medal {
    --mr: min(calc((var(--mw) - 8 * var(--h)) * 0.13), calc(5 * var(--h)));
    position: relative;
    flex: none;
    width: calc(var(--mr) * 2.3);
    height: calc(var(--mr) * 2.1);
    display: grid;
    place-items: center;
}

.mypage .medal img:first-child { width: calc(var(--mr) * 2.1); height: calc(var(--mr) * 2.1); object-fit: contain; }

.mypage .medal .star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--mr) * 0.74);
    transform: translate(-50%, -50%) rotate(calc(var(--slot) * 0.66rad)) translateY(calc(var(--mr) * -1.08)) rotate(calc(var(--slot) * -0.66rad));
}

.mypage .rank .spoken { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mypage .rank .spoken b { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-size: calc(3.6 * var(--h)); font-weight: 800; color: var(--cobalt); }
.mypage .rank .spoken b.none { font-size: calc(2.8 * var(--h)); }
.mypage .rank .spoken small { font-size: calc(2.6 * var(--h)); color: var(--ink-soft); }

.mypage .road {
    margin-top: calc(2.2 * var(--h));
    width: 92%;
    height: calc(1.6 * var(--h));
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--gold);
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

.mypage .road i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

.mypage .me-card .farr {
    margin-top: calc(1.4 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(0.6 * var(--h));
    font-size: calc(3 * var(--h));
    font-weight: 800;
    color: var(--ink);
}

.mypage .me-card .farr img { height: calc(3.6 * var(--h)); }

/* ---- the cards standing behind the page's top edge ---- */

.mypage .tab {
    position: absolute;
    left: calc(var(--sheet-x) + 3.5 * var(--h) + var(--i) * (var(--card) + 1.6 * var(--h)));
    top: calc(15 * var(--h));
    width: var(--card);
    height: calc(var(--card) * 1.36);
    z-index: 1;
}

.mypage .tab .leaf {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: var(--tab-paper);
    border: max(1px, calc(var(--card) * 0.02)) solid rgba(22, 35, 79, 0.7);
    border-radius: calc(var(--card) * 0.08);
    box-shadow: 0 calc(var(--card) * 0.016) calc(var(--card) * 0.04) rgba(0, 0, 0, 0.25);
    transition: transform 0.12s;
}

.mypage .tab:not(.chosen):hover .leaf { transform: translateY(-6%); }

.mypage .tab.chosen {
    z-index: 3;
    transform-origin: 50% 100%;
    transform: translateY(calc(-2.5 * var(--h))) rotate(-4deg) scale(1.1);
}

.mypage .tab.chosen .leaf {
    border: max(1px, calc(var(--card) * 0.028)) solid var(--paper-ink);
    box-shadow: 0 0 calc(var(--card) * 0.09) rgba(255, 245, 209, 0.75);
}

.mypage .tab img {
    position: absolute;
    left: 50%;
    top: calc(var(--card) * 0.544);
    width: calc(var(--card) * 0.44);
    height: calc(var(--card) * 0.457);
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.mypage .tab.tab-games img { width: calc(var(--card) * 0.692); height: calc(var(--card) * 0.783); }

.mypage .tab .label {
    position: absolute;
    left: 5%;
    right: 5%;
    top: calc(var(--card) * 0.952 - 1.8 * var(--h));
    line-height: calc(2.4 * var(--h));
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    font-size: clamp(calc(1.6 * var(--h)), calc(var(--card) * 0.17), calc(2.2 * var(--h)));
    color: var(--ink);
}

.mypage .tab.chosen .label { font-weight: 800; color: var(--cobalt); }

/* ---- the page ---- */

.mypage .sheet {
    left: var(--sheet-x);
    top: calc(28 * var(--h));
    width: var(--sheet-w);
    height: calc(64.5 * var(--h));
    z-index: 2;
}

.mypage .sheet .line {
    position: absolute;
    left: calc(12 * var(--h));
    right: calc(12 * var(--h));
    top: calc(4 * var(--h));
    height: calc(3.9 * var(--h));
    line-height: calc(3.9 * var(--h));
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    font-size: calc(2.6 * var(--h));
    color: var(--ink-soft);
}

.mypage .room {
    position: absolute;
    left: calc(9 * var(--h));
    right: calc(9 * var(--h));
    top: calc(5 * var(--h));
    bottom: calc(5 * var(--h));
}

.mypage .room.lined { top: calc(8.9 * var(--h)); }

.mypage .waiting {
    margin-top: calc(10 * var(--h));
    text-align: center;
    font-size: calc(3.2 * var(--h));
    line-height: 1.35;
    color: var(--ink-soft);
}

.mypage .trouble { margin-top: calc(1 * var(--h)); text-align: center; font-size: calc(2.6 * var(--h)); color: var(--warning); }

/* The lists scroll in a thin line of the page's own ink. */
.mypage .faces,
.mypage .mottos,
.mypage .games,
.mypage .rows,
.mypage .places,
.mypage .erase {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 35, 79, 0.35) transparent;
}

/* ---- my look: what the table sees, three above and the rest under them ---- */

.mypage .things {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: calc(2.2 * var(--h));
}

.mypage .thing {
    position: relative;
    width: calc((100% - 4.4 * var(--h)) / 3);
    height: calc((100% - 2.2 * var(--h)) / 2);
    padding: calc(1.8 * var(--h)) 0 calc(2 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.1s;
}

.mypage button.thing:hover { transform: translateY(calc(-0.6 * var(--h))); }

.mypage .thing .picture {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 84%;
    container-type: size;
    margin-bottom: calc(0.8 * var(--h));
}

.mypage .thing .picture > * {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

.mypage .thing .oval {
    height: 100%;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 4.5%;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1.5px rgba(42, 29, 16, 0.6);
}

.mypage .thing .picture img.throne,
.mypage .thing .picture img.cardback { height: 100%; object-fit: contain; }

.mypage .thing .picture img.cardback {
    width: auto;
    border-radius: calc(0.8 * var(--h));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 max(2px, calc(0.3 * var(--h))) rgba(42, 29, 16, 0.55);
}

.mypage .thing .picture img.dressed {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: calc(1.4 * var(--h));
    border: max(2px, calc(0.45 * var(--h))) solid var(--edge);
    box-sizing: border-box;
}

.mypage .thing .heading { font-size: calc(2.2 * var(--h)); line-height: 1.3; color: var(--ink-soft); }

.mypage .thing .chosen {
    max-width: 92%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(3 * var(--h));
    font-weight: 800;
    line-height: 1.25;
    color: var(--cobalt);
}

.mypage .thing .change {
    --bh: calc(6.6 * var(--h));
    flex: none;
    margin-top: calc(1.4 * var(--h));
    width: 76%;
    min-width: 0;
    padding: 0;
    font-size: calc(2.7 * var(--h));
}


/* ---- a choice laid on the page: a face, a motto ---- */

.mypage .choice-head {
    position: relative;
    height: calc(6.5 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
}

.mypage .choice-head .kit {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mypage .choice-head h2 { margin: 0; font-size: calc(3.2 * var(--h)); font-weight: 800; color: var(--cobalt); }

.mypage .kinds {
    margin-top: calc(1.2 * var(--h));
    display: flex;
    justify-content: center;
    gap: calc(1.2 * var(--h));
}

.mypage .kinds .kit {
    flex: none;
    width: min(calc(20 * var(--h)), calc((100% - 4 * var(--h)) / 5));
    min-width: 0;
    padding: 0 calc(2.5 * var(--h));
    font-size: calc(3 * var(--h));
}

.mypage .faces {
    margin-top: calc(1.6 * var(--h));
    height: calc(100% - 18.1 * var(--h));
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(15 * var(--h)));
    grid-auto-rows: calc(16 * var(--h));
    gap: calc(1.4 * var(--h));
    justify-content: center;
    align-content: start;
}

.mypage .face-tile { position: relative; }

.mypage .face-tile .oval {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(15 * var(--h) - 2px);
    height: calc(15 * var(--h) - 2px);
    box-sizing: border-box;
    padding: 3.8%;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
}

.mypage .face-tile:not(:disabled):hover .oval { transform: translate(-50%, -52%); }
.mypage .face-tile.mine .oval { background: var(--cobalt); }

/* The mark of what is worn (Kit.DrawWorn): a navy disc ringed in gold with a gold tick. */
.mypage .worn-tick {
    position: absolute;
    right: calc(1 * var(--h));
    top: calc(1 * var(--h));
    width: calc(4 * var(--h));
    height: calc(4 * var(--h));
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--cobalt);
    border: max(1.5px, calc(0.24 * var(--h))) solid var(--gold);
}

.mypage .worn-tick::after {
    content: "";
    position: absolute;
    left: 26%;
    top: 24%;
    width: 44%;
    height: 22%;
    border-left: max(2px, calc(0.4 * var(--h))) solid var(--gold);
    border-bottom: max(2px, calc(0.4 * var(--h))) solid var(--gold);
    transform: rotate(-45deg);
}

.mypage .note {
    height: calc(3.9 * var(--h));
    line-height: calc(3.9 * var(--h));
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: var(--ink-soft);
}

.mypage .mottos {
    margin-top: calc(1.5 * var(--h));
    max-height: calc(100% - 12 * var(--h));
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: calc(9.5 * var(--h));
    gap: calc(1.4 * var(--h));
    padding: 2px calc(1.2 * var(--h)) 2px 2px;
}

.mypage .motto-row {
    position: relative;
    padding: 0 calc(2.7 * var(--h));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(1.4 * var(--h));
    font-size: calc(3 * var(--h));
    color: var(--ink);
}

.mypage .motto-row .spoken { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-style: italic; }
.mypage .motto-row .spoken.none { font-style: normal; color: var(--ink-soft); }
.mypage .motto-row.open:not(:disabled):hover { background: var(--tab-paper); }
.mypage .motto-row.mine { border: max(1px, calc(0.4 * var(--h))) solid var(--paper-ink); }
.mypage .motto-row.mine .worn-tick { top: 50%; margin-top: calc(-2 * var(--h)); }
.mypage .motto-row.shut { justify-content: flex-start; font-size: calc(2.6 * var(--h)); color: var(--ink-soft); }

/* A small padlock, for a motto not mine yet. */
.mypage .lock {
    position: relative;
    flex: none;
    width: calc(2.85 * var(--h));
    height: calc(2.1 * var(--h));
    margin-top: calc(0.9 * var(--h));
    border-radius: calc(0.3 * var(--h));
    background: var(--ink);
}

.mypage .lock::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1.4 * var(--h));
    width: calc(1.7 * var(--h));
    height: calc(1.5 * var(--h));
    box-sizing: border-box;
    border: calc(0.35 * var(--h)) solid var(--ink);
    border-bottom: 0;
    border-radius: calc(1 * var(--h)) calc(1 * var(--h)) 0 0;
    transform: translateX(-50%);
}

/* ---- my record: eight numbers, and the two names under them ---- */

.mypage .record {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: calc(1.2 * var(--h));
}

.mypage .record.named { grid-template-rows: 1fr 1fr calc(13 * var(--h)); }

.mypage .number {
    min-width: 0;
    padding: 0 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.25;
}

.mypage .number b { font-size: calc(5.2 * var(--h)); font-weight: 800; color: var(--cobalt); line-height: 1.15; }
.mypage .number .label { max-width: 100%; min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; margin-top: calc(0.8 * var(--h)); font-size: calc(2.1 * var(--h)); color: var(--ink-soft); }
.mypage .number strong { max-width: 100%; min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-size: calc(2.1 * var(--h)); font-weight: 800; color: var(--ink); }
.mypage .number .medal { --mr: calc(3.6 * var(--h)); }

.mypage .near {
    position: relative;
    grid-column: span 2;
    padding: 0 calc(2.3 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
    text-align: start;
}

.mypage .record.named .near:only-of-type { grid-column: span 4; }

/* Their face in a gold ring, or their letter until their card has said it. */
.mypage .near .oval {
    flex: none;
    width: calc(8.3 * var(--h));
    height: calc(8.3 * var(--h));
    border-radius: 50%;
    overflow: hidden;
    background: #f6e6c0;
    box-shadow: 0 0 0 calc(0.35 * var(--h)) var(--gold), 0 0 0 calc(0.5 * var(--h)) rgba(42, 29, 16, 0.5);
}

.mypage .near .initial { font-size: calc(3.8 * var(--h)); }

/* A number or a name that opens something: tinted under the mouse, darker while pressed (PlayerCard.LayRecord). */
.mypage button.number,
.mypage button.near { position: relative; }

.mypage button.number::after,
.mypage button.near:not(:disabled)::after {
    content: "";
    position: absolute;
    inset: calc(1.2 * var(--h));
    border-radius: calc(1 * var(--h));
    background: rgba(31, 63, 143, 0);
    pointer-events: none;
    transition: background 0.1s;
}

.mypage button.number:hover::after,
.mypage button.near:not(:disabled):hover::after { background: rgba(31, 63, 143, 0.05); }

.mypage button.number:active::after,
.mypage button.near:not(:disabled):active::after { background: rgba(31, 63, 143, 0.1); }

/* The small arrow where the line ends, pointing the way a line of the language runs. */
.mypage .number .way {
    position: absolute;
    inset-inline-end: calc(2.4 * var(--h));
    top: 50%;
    width: calc(1.5 * var(--h));
    height: calc(1.5 * var(--h));
    box-sizing: border-box;
    border-top: max(2px, calc(0.4 * var(--h))) solid rgba(31, 63, 143, 0.7);
    border-right: max(2px, calc(0.4 * var(--h))) solid rgba(31, 63, 143, 0.7);
    border-radius: 1px;
    transform: translateY(-50%) rotate(45deg);
}

[dir="rtl"] .mypage .number .way { transform: translateY(-50%) rotate(-135deg); }

/* ---- the games under one number of my record ---- */

.mypage .counted {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mypage .counted-head {
    position: relative;
    flex: none;
    height: calc(6.5 * var(--h));
    margin-bottom: calc(1.2 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
}

.mypage .counted-head .back {
    left: auto;
    inset-inline-start: 0;
    top: 50%;
    width: calc(21 * var(--h));
    transform: translateY(-50%);
}

.mypage .counted-head h2 {
    margin: 0;
    max-width: 50%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(3.2 * var(--h));
    font-weight: 800;
    color: var(--cobalt);
}

.mypage .counted .games { flex: 1; min-height: 0; height: auto; }

.mypage .near .words { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mypage .near small { font-size: calc(2 * var(--h)); color: var(--ink-soft); }
.mypage .near small.ink { color: var(--ink); }
.mypage .near b { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-size: calc(3.4 * var(--h)); font-weight: 800; color: var(--cobalt); }

/* ---- my games: one line a game, newest first (LadderView.Played) ---- */

.mypage .games {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(1.4 * var(--h));
    padding-inline-end: calc(2.5 * var(--h));
    box-sizing: border-box;
}

.mypage .played {
    position: relative;
    flex: none;
    height: calc(10.5 * var(--h));
}

.mypage .played .seal {
    position: absolute;
    inset-inline-start: calc(1.68 * var(--h));
    top: 50%;
    width: calc(6.3 * var(--h));
    transform: translateY(-50%);
}

.mypage .played > span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    min-width: 0;
}

.mypage .played > span > * { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; }

.mypage .played .who { inset-inline-start: calc(9.45 * var(--h)); width: calc(42% - 9.45 * var(--h)); }
.mypage .played .who b { font-size: calc(2.4 * var(--h)); font-weight: 800; color: var(--ink); }
.mypage .played .who small { font-size: calc(2 * var(--h)); color: var(--ink-soft); }

.mypage .played .score { inset-inline-start: 43%; width: 30%; text-align: center; }
.mypage .played .score b { font-size: calc(2.8 * var(--h)); font-weight: 800; color: var(--cobalt); }
.mypage .played .score small { font-size: calc(1.8 * var(--h)); color: var(--ink-soft); }

.mypage .played .end { inset-inline-end: calc(3.15 * var(--h)); width: 24%; text-align: end; }
.mypage .played .end b { font-size: calc(2.6 * var(--h)); font-weight: 800; color: var(--won); }
.mypage .played .end b.lost { color: #bf2a26; }
.mypage .played .end small { font-size: calc(1.8 * var(--h)); color: var(--ink-soft); }

.mypage .games .foot { flex: none; height: calc(8.5 * var(--h)); display: flex; justify-content: center; align-items: center; }

/* ---- the settings: the kinds down the start side, the rows of the one chosen beside them ---- */

.mypage .prefs {
    --tw: min(calc(23 * var(--h)), calc(var(--sheet-w) * 0.3 - 5.4 * var(--h)));
    --line: max(2px, calc(0.3 * var(--h)));
    position: relative;
    height: 100%;
}

.mypage .sections {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--tw) + var(--line));
    z-index: 2;
}

.mypage .section {
    position: absolute;
    top: calc(3.4 * var(--h) + var(--i) * 9.56 * var(--h));
    inset-inline-start: calc(1.6 * var(--h));
    width: calc(var(--tw) - 1.6 * var(--h) - var(--line));
    height: calc(8.36 * var(--h));
    box-sizing: border-box;
    padding-inline-start: calc(1.4 * var(--h));
    padding-inline-end: calc(1.4 * var(--h));
    background: rgba(176, 147, 94, 0.2) !important;
    border: 1px solid rgba(22, 35, 79, 0.2) !important;
    border-inline-end: 0 !important;
    border-start-start-radius: calc(1.6 * var(--h));
    border-end-start-radius: calc(1.6 * var(--h));
    font-size: calc(3 * var(--h));
    color: rgba(42, 29, 16, 0.72) !important;
}

.mypage .section:not(:disabled):hover { background: rgba(176, 147, 94, 0.34) !important; }
.mypage .section span { display: block; min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; }

/* The one chosen is the card's own paper and line, grown out of its side, a navy mark at its outer end. */
.mypage .section.chosen {
    inset-inline-start: 0;
    width: calc(var(--tw) + var(--line));
    padding-inline-start: calc(3 * var(--h));
    background: var(--card-paper) !important;
    border: var(--line) solid rgba(22, 35, 79, 0.55) !important;
    border-inline-end: 0 !important;
    font-weight: 800;
    color: var(--paper-ink) !important;
}

.mypage .section.chosen::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(1.4 * var(--h));
    top: 26%;
    width: calc(0.6 * var(--h));
    height: 48%;
    border-radius: calc(0.3 * var(--h));
    background: var(--navy);
}

.mypage .rows-card {
    position: absolute;
    inset-inline-start: var(--tw);
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: calc(0.8 * var(--h)) calc(1.2 * var(--h)) calc(2 * var(--h)) calc(3 * var(--h));
    background: var(--card-paper);
    border: var(--line) solid rgba(22, 35, 79, 0.55);
    border-radius: calc(1.6 * var(--h));
    z-index: 1;
}

[dir="rtl"] .mypage .rows-card { padding: calc(0.8 * var(--h)) calc(3 * var(--h)) calc(2 * var(--h)) calc(1.2 * var(--h)); }

.mypage .rows { height: 100%; padding-inline-end: calc(1.2 * var(--h)); box-sizing: border-box; }
.mypage .rows-card:has(.foot) .rows { height: calc(100% - 11.8 * var(--h)); }

.mypage .row {
    min-height: calc(11.5 * var(--h));
    box-sizing: border-box;
    padding: calc(1.5 * var(--h)) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(1.2 * var(--h)) calc(4 * var(--h));
    border-bottom: max(1px, calc(0.15 * var(--h))) solid rgba(226, 182, 74, 0.5);
}

.mypage .row .words { flex: 1 1 calc(30 * var(--h)); min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mypage .row .words b { font-size: calc(3.3 * var(--h)); font-weight: 800; color: var(--ink); }
.mypage .row .words small { font-size: calc(2.3 * var(--h)); color: var(--ink-soft); overflow-wrap: anywhere; }
.mypage .row .does { flex: none; display: flex; align-items: center; }

.mypage .rows-card .foot {
    position: absolute;
    left: calc(3 * var(--h));
    right: calc(1.2 * var(--h));
    bottom: calc(2 * var(--h));
    display: flex;
    justify-content: space-between;
}

.mypage .foot .leave { width: calc(28 * var(--h)); min-width: 0; padding: 0; font-size: calc(3 * var(--h)); }

/* A slider: a navy line filling a pale one, and the kit's ivory bead to hold. */
.mypage .slider {
    -webkit-appearance: none;
    appearance: none;
    width: calc(34 * var(--h));
    height: calc(6 * var(--h));
    margin: 0;
    background: transparent;
    cursor: var(--point);
}

.mypage .slider::-webkit-slider-runnable-track {
    height: max(3px, calc(0.8 * var(--h)));
    border-radius: 999px;
    background: linear-gradient(to right, var(--navy) var(--v), rgba(107, 83, 50, 0.3) var(--v));
}

.mypage .slider::-moz-range-track {
    height: max(3px, calc(0.8 * var(--h)));
    border-radius: 999px;
    background: linear-gradient(to right, var(--navy) var(--v), rgba(107, 83, 50, 0.3) var(--v));
}

.mypage .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: calc(5 * var(--h));
    height: calc(5 * var(--h));
    margin-top: calc(max(3px, calc(0.8 * var(--h))) / 2 - 2.5 * var(--h));
    border: 0;
    background: var(--round-plain, url("../art/kit/flat/round-plain.png")) center / 100% 100% no-repeat;
}

.mypage .slider::-moz-range-thumb {
    width: calc(5 * var(--h));
    height: calc(5 * var(--h));
    border: 0;
    background: var(--round-plain, url("../art/kit/flat/round-plain.png")) center / 100% 100% no-repeat;
}

/* A switch: navy with its knob at the far end when on, pale with it at the near end when off. */
.mypage .switch {
    position: relative;
    width: calc(14 * var(--h));
    height: calc(7 * var(--h));
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(107, 83, 50, 0.25) !important;
    border: max(1px, calc(0.35 * var(--h))) solid rgba(107, 83, 50, 0.5) !important;
}

.mypage .switch.on { background: var(--navy) !important; border-color: var(--on-navy) !important; }

.mypage .switch i {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(0.1 * var(--h));
    width: calc(6.4 * var(--h));
    height: calc(6.4 * var(--h));
    background: var(--round-plain, url("../art/kit/flat/round-plain.png")) center / 100% 100% no-repeat;
    transform: translateY(-50%);
    transition: inset-inline-start 0.12s;
}

.mypage .switch.on i { inset-inline-start: calc(100% - 6.5 * var(--h)); }

/* Choices side by side, the one chosen in navy. */
.mypage .ways { display: flex; gap: calc(1.5 * var(--h)); }

.mypage .ways .kit {
    --bh: calc(7.48 * var(--h));
    width: calc(19 * var(--h));
    min-width: 0;
    padding: 0 calc(var(--bh) * 0.58);
    font-size: calc(2.8 * var(--h));
}

.mypage .ways .tune { width: calc(11 * var(--h)); }

/* The language: the ivory button, and the list that drops from it in the kit's own manner. */
.mypage .language { position: relative; display: block; }

.mypage .kit.chooser,
.mypage .kit.clock {
    --bh: calc(7.92 * var(--h));
    width: calc(34 * var(--h));
    min-width: 0;
    padding: 0 calc(4 * var(--h));
    gap: calc(1.4 * var(--h));
    font-size: calc(3.2 * var(--h));
}

.mypage .kit.clock { font-size: calc(3 * var(--h)); }

.mypage .chooser .down {
    flex: none;
    width: calc(1.4 * var(--h));
    height: calc(1.4 * var(--h));
    margin-top: calc(-0.7 * var(--h));
    border-right: max(2px, calc(0.4 * var(--h))) solid var(--paper-ink);
    border-bottom: max(2px, calc(0.4 * var(--h))) solid var(--paper-ink);
    transform: rotate(45deg);
}

.mypage .language .list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.6 * var(--h));
    min-width: 100%;
    box-sizing: border-box;
    z-index: 5;
    padding: calc(1.2 * var(--h));
    display: flex;
    flex-direction: column;
    background: var(--card-paper);
    border: max(2px, calc(0.35 * var(--h))) solid var(--edge);
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.25);
}

.mypage .language .list button {
    display: flex;
    align-items: center;
    gap: calc(1.6 * var(--h));
    padding: calc(1.4 * var(--h)) calc(2 * var(--h));
    border-radius: calc(1 * var(--h));
    font-size: calc(3.2 * var(--h));
    font-weight: 800;
    color: var(--paper-ink);
    text-align: start;
}

.mypage .language .list button:hover { background: rgba(176, 147, 94, 0.24); }

.mypage .language .list i {
    width: calc(3 * var(--h));
    height: calc(3 * var(--h));
    background: var(--round-plain, url("../art/kit/flat/round-plain.png")) center / 100% 100% no-repeat;
}

.mypage .language .list .chosen i { background-image: var(--round-main, url("../art/kit/flat/round-main.png")); }

/* The places a clock is chosen from, each with the hour it shows now. */
.mypage .clocks { height: 100%; display: flex; flex-direction: column; }

.mypage .clocks-head {
    flex: none;
    height: calc(10.8 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
}

.mypage .clocks-head .words { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mypage .clocks-head b { font-size: calc(3.3 * var(--h)); font-weight: 800; }
.mypage .clocks-head small { font-size: calc(2.3 * var(--h)); color: var(--ink-soft); }
.mypage .clocks-head .kit { flex: none; min-width: calc(16 * var(--h)); }

.mypage .city { flex: none; margin-top: calc(1 * var(--h)); width: 100%; text-align: start; font-size: calc(2.8 * var(--h)); padding: 0 calc(5 * var(--h)); }

.mypage .places {
    flex: 1;
    min-height: 0;
    margin-top: calc(1.4 * var(--h));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(calc(36 * var(--h)), calc(50% - 0.7 * var(--h))), 1fr));
    grid-auto-rows: calc(7.48 * var(--h));
    gap: calc(1.4 * var(--h));
    align-content: start;
    padding-inline-end: calc(1.2 * var(--h));
}

.mypage .places .kit {
    --bh: calc(7.48 * var(--h));
    width: 100%;
    min-width: 0;
    padding: 0 calc(4 * var(--h));
    font-size: calc(2.7 * var(--h));
}

.mypage .places .none { grid-column: 1 / -1; text-align: center; font-size: calc(2.5 * var(--h)); line-height: 1.4; color: var(--ink-soft); }

/* Deleting my account: what will happen, then the digits that went to my address. */
.mypage .erase { height: 100%; box-sizing: border-box; padding: calc(1 * var(--h)) calc(2 * var(--h)) 0 0; }
.mypage .erase h2 { margin: 0 0 calc(1.4 * var(--h)); font-size: calc(3.6 * var(--h)); font-weight: 800; color: var(--cobalt); }
.mypage .erase p { margin-bottom: calc(1.2 * var(--h)); font-size: calc(2.6 * var(--h)); line-height: 1.4; }
.mypage .erase .digits { margin-top: calc(1.6 * var(--h)); display: flex; align-items: center; gap: calc(2 * var(--h)); direction: ltr; }
.mypage .erase .digits input { flex: none; width: calc(26 * var(--h)); letter-spacing: 0.2em; }
.mypage .erase .trouble { text-align: start; }
.mypage .erase .not-now { margin-top: calc(1.6 * var(--h)); font-size: calc(2.6 * var(--h)); color: var(--ink-soft); text-decoration: underline; }

/* ---- a language written right to left: the page keeps its places, its words run from the right ---- */

[dir="rtl"] .mypage { font-family: var(--face); }
[dir="rtl"] .mypage .me-card,
[dir="rtl"] .mypage .sheet,
[dir="rtl"] .mypage .tab .label,
[dir="rtl"] .mypage .back > span { direction: rtl; }
[dir="rtl"] .mypage .title { letter-spacing: 0; font-weight: 700; }

/* The cards stand from the page's right end in a right-to-left language, the lifted one leaning the other way (MyPage.AddPage). */
[dir="rtl"] .mypage .tab { left: calc(var(--sheet-x) + var(--sheet-w) - 3.5 * var(--h) - var(--card) - var(--i) * (var(--card) + 1.6 * var(--h))); }
[dir="rtl"] .mypage .sash .worn-tick { left: 14%; }
[dir="rtl"] .mypage .sash .tin { left: 19%; }
[dir="rtl"] .mypage .tab.chosen { transform: translateY(calc(-2.5 * var(--h))) rotate(4deg) scale(1.1); }
[dir="rtl"] .mypage .motto .words,
[dir="rtl"] .mypage .motto-row .spoken { font-style: normal; }

/* An upright window on a desk lays the page as a wide band, and a phone held upright on its side, as the table does. */
@media (orientation: portrait) {
    .mypage {
        width: 100vw;
        height: calc(100 * var(--h));
        top: 50dvh;
        transform: translateY(-50%);
        box-shadow: 0 0 0 100vmax #000;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .mypage {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
        box-shadow: none;
    }
}

/* ---- a badge (BadgeArt.Draw): a cream disc, the motif at four fifths of the ring, the metal ring over both ---- */

.badge-art {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.badge-art .disc {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: #f6e6c0;
}

.badge-art .motif,
.badge-art .letter {
    position: absolute;
    inset: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
}

.badge-art .letter {
    display: grid;
    place-items: center;
    font-size: calc(var(--badge, 10vh) * 0.45);
    font-weight: 800;
    color: #1f3f8f;
}

/* Not reached yet: the stone ring, and the motif faded. */
.badge-art.unreached .motif { opacity: 0.42; filter: grayscale(0.7); }
.badge-art.unreached .letter { color: rgba(107, 83, 50, 0.5); }

.badge-art .metal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* A turquoise badge counts on for ever: its number on a pill across its foot. */
.badge-art .count {
    position: absolute;
    left: 50%;
    top: 86%;
    padding: 0 0.45em;
    border-radius: 999px;
    background: #1f3f8f;
    border: max(1px, 0.1em) solid var(--gold, #e2b64a);
    color: #f6e6c0;
    font-size: 15cqmin;
    line-height: 1.3;
    font-weight: 800;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

/* ---- my look: the table drawn small, and a badge, each as large as its card's picture allows ---- */

.mypage .thing .picture .small-table {
    container-type: size;
    width: min(100cqw, 160cqh);
    height: min(100cqh, 62.5cqw);
    box-sizing: border-box;
    border-radius: min(9cqw, 14cqh);
    border: max(1.5px, calc(0.3 * var(--h))) solid var(--gold);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mypage .small-table .ring {
    --ring-high: min(74cqh, 49cqw);
    left: 50%;
    top: 50%;
    width: 86cqw;
    height: var(--ring-high);
    transform: translate(-50%, -50%);
}

/* The ring's medallion, not my rank's medal, whose class it shares. */
.mypage .small-table .ring .medal {
    width: auto;
    height: 22%;
    display: block;
}

.mypage .thing .picture .medal-box {
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);
}

/* ---- the foot of my card: the badges I wear ---- */

.mypage .worn-foot {
    margin-top: auto;
    margin-bottom: calc(3.5 * var(--h));
    padding-top: calc(1.4 * var(--h));
    width: 100%;
    border-top: max(1px, calc(0.2 * var(--h))) solid rgba(226, 182, 74, 0.7);
    display: flex;
    justify-content: space-around;
}

.mypage .worn-foot.named { justify-content: flex-start; }

.mypage .worn-badge {
    display: flex;
    align-items: center;
    gap: calc(1.5 * var(--h));
    min-width: 0;
    transition: transform 0.1s;
}

.mypage .worn-badge:hover { transform: translateY(calc(-0.6 * var(--h))); }

.mypage .worn-badge .art {
    flex: none;
    width: calc(7.2 * var(--h));
    height: calc(7.2 * var(--h));
}

.mypage .worn-badge b {
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(2.6 * var(--h));
    font-weight: 800;
    color: var(--ink);
}

/* ---- a throne, chosen on the page ---- */

.mypage .thrones {
    margin-top: calc(1.2 * var(--h));
    height: calc(100% - 14 * var(--h));
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(19 * var(--h)));
    grid-auto-rows: calc(20.8 * var(--h));
    gap: calc(1.4 * var(--h));
    justify-content: center;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 35, 79, 0.35) transparent;
}

.mypage .throne-tile {
    position: relative;
    box-sizing: border-box;
    padding: calc(1 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--card-paper);
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(1.8 * var(--h));
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
}

.mypage .throne-tile.mine { border-color: var(--gold); box-shadow: 0 0 calc(1 * var(--h)) rgba(226, 182, 74, 0.7); }
.mypage .throne-tile:not(:disabled):hover { transform: translateY(calc(-0.6 * var(--h))); }

.mypage .throne-tile .picture {
    flex: 1;
    min-height: 0;
    width: 100%;
}

.mypage .throne-tile .picture > img { width: 100%; height: 100%; object-fit: contain; }
.mypage .throne-tile.locked .picture > img { opacity: 0.6; filter: grayscale(1) brightness(0.6); }

/* Not held (MyPage.DrawLock): an ink padlock in the throne's window. */
.mypage .throne-tile .picture { position: relative; }

.mypage .throne-tile .padlock {
    position: absolute;
    left: 50%;
    top: 58%;
    width: calc(2.6 * var(--h));
    height: calc(1.95 * var(--h));
    border-radius: calc(0.3 * var(--h));
    background: var(--ink);
    transform: translate(-50%, -10%);
}

.mypage .throne-tile .padlock::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: calc(1.56 * var(--h));
    height: calc(0.9 * var(--h));
    box-sizing: border-box;
    border: max(1.5px, calc(0.31 * var(--h))) solid var(--ink);
    border-bottom: 0;
    border-radius: calc(0.8 * var(--h)) calc(0.8 * var(--h)) 0 0;
    transform: translateX(-50%);
}

.mypage .throne-tile b { font-size: calc(2.3 * var(--h)); line-height: 1.2; font-weight: 800; color: var(--ink); white-space: nowrap; }
.mypage .throne-tile.locked b { color: var(--ink-soft); }
.mypage .throne-tile small { font-size: calc(1.9 * var(--h)); line-height: 1.3; color: var(--ink-soft); }
.mypage .throne-tile small.legendary { color: #a8741a; }
.mypage .throne-tile small.limited { color: var(--crimson); }

.mypage .notes {
    margin-top: calc(1 * var(--h));
    text-align: center;
    font-size: calc(2.2 * var(--h));
    line-height: 1.35;
    color: var(--ink-soft);
}

/* ---- my badges: each over its own name, as large as the room lets them all stand ---- */

.mypage .sash {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: calc(1.4 * var(--h)) 0;
    padding-top: calc(2 * var(--h));
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 35, 79, 0.35) transparent;
}

.mypage .sash { --r: calc(6.2 * var(--h)); --named: calc(2.3 * var(--h)); }
.mypage .sash.few { --r: calc(11.5 * var(--h)); --named: calc(3 * var(--h)); }
.mypage .sash.one { --r: calc(15 * var(--h)); --named: calc(3 * var(--h)); }

.mypage .sash .held {
    width: calc(var(--r) * 2.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mypage .sash .medal-box {
    position: relative;
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    container-type: size;
}

.mypage .sash .held.chest .medal-box { border-radius: 50%; box-shadow: 0 0 0 calc(var(--r) * 0.14) rgba(226, 182, 74, 0.25); }

.mypage .sash .tin {
    position: absolute;
    left: 81%;
    top: 81%;
    width: 35%;
    transform: translate(-50%, -50%);
}

.mypage .sash .worn-tick {
    left: 86%;
    top: 14%;
    right: auto;
    width: max(calc(3.2 * var(--h)), calc(var(--r) * 0.4));
    height: max(calc(3.2 * var(--h)), calc(var(--r) * 0.4));
    transform: translate(-50%, -50%);
}

.mypage .sash .held b {
    margin-top: calc(0.4 * var(--h));
    max-width: 94%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: var(--named);
    line-height: 1.6;
    font-weight: 800;
    color: var(--ink);
}

.mypage .sash.none {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    padding-top: calc(3 * var(--h));
}

.mypage .sash.none .medal-box { width: calc(30 * var(--h)); height: calc(30 * var(--h)); }
.mypage .sash.none b { font-size: calc(4 * var(--h)); color: var(--cobalt); }

/* ---- a badge's card (BadgeCard.cs): over the page, the page dimmed ---- */

.mypage .badge-over {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.mypage .badge-over .scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: var(--arrow);
}

.mypage .badge-card {
    --cw: min(calc(var(--w) * 0.62), calc(105 * var(--h)));
    --sr: calc(4.2 * var(--h));
    --lead: calc(var(--sr) * 2.2);
    --left: calc(var(--cw) * 0.11 + var(--lead));
    --span: calc(var(--cw) * 0.89 - var(--sr) - var(--left));
    --small: calc(2.7 * var(--h));
    left: calc((var(--w) - var(--cw)) / 2);
    top: calc(10 * var(--h));
    width: var(--cw);
    height: calc(80 * var(--h));
    z-index: 1;
}

.mypage .badge-card .close {
    position: absolute;
    inset-inline-end: calc(8 * var(--h));
    top: calc(2.5 * var(--h));
    height: calc(5 * var(--h));
    padding: 0 calc(1 * var(--h));
    font-size: var(--small);
    color: var(--cobalt);
}

.mypage .badge-card .close:hover { color: var(--ink); }

.mypage .badge-card .big {
    position: absolute;
    left: 50%;
    top: calc(5 * var(--h));
    width: calc(24 * var(--h));
    height: calc(24 * var(--h));
    transform: translateX(-50%);
    container-type: size;
}

.mypage .badge-card .name {
    position: absolute;
    left: calc(5 * var(--h));
    right: calc(5 * var(--h));
    top: calc(30.2 * var(--h));
    margin: 0;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    font-size: calc(5 * var(--h));
    line-height: calc(6 * var(--h));
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--cobalt);
}

.mypage .badge-card .counts,
.mypage .badge-card .asking {
    position: absolute;
    left: calc(6 * var(--h));
    right: calc(6 * var(--h));
    top: calc(36.6 * var(--h));
    text-align: center;
    font-size: var(--small);
    line-height: 1.3;
    color: var(--ink);
}

.mypage .badge-card .asking { top: calc(48 * var(--h)); color: var(--ink-soft); }

/* The four steps on a line: gold as far as I have come, pale from there on. */
.mypage .badge-card .steps {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50.5 * var(--h));
    height: 0;
}

.mypage .badge-card .steps .line {
    position: absolute;
    inset-inline-start: calc(var(--left) - var(--lead));
    top: calc(-0.3 * var(--h));
    width: calc(var(--span) + var(--lead));
    height: calc(0.6 * var(--h));
    border-radius: 999px;
    background: rgba(226, 182, 74, 0.3);
}

.mypage .badge-card .steps .line.lit {
    width: calc(var(--span) * var(--k) + var(--sr) * var(--m) + var(--lead));
    background: var(--gold);
}

.mypage .badge-card .step {
    position: absolute;
    inset-inline-start: calc(var(--left) + var(--span) * var(--i) / 3 - var(--sr));
    top: calc(-1 * var(--sr));
    width: calc(var(--sr) * 2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mypage .badge-card .step .step-art { width: calc(var(--sr) * 2); height: calc(var(--sr) * 2); container-type: size; }

.mypage .badge-card .step b {
    margin-top: calc(0.4 * var(--h));
    font-size: var(--small);
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.mypage .badge-card .step b.dim { color: var(--ink-soft); }

/* Where I stand: a navy plate above the row, its point at the rim of the badge I stand on, or a thin stem to a bead on the line. */
.mypage .badge-card .marker {
    position: absolute;
    inset-inline-start: calc(var(--left) + var(--span) * var(--k) + var(--sr) * var(--m));
    top: 0;
    width: 0;
    height: 0;
}

.mypage .badge-card .marker .plate {
    position: absolute;
    left: 0;
    bottom: calc(var(--sr) + 0.7 * var(--h) + var(--small) * 0.42);
    padding: 0 calc(var(--small) * 0.64);
    height: calc(var(--small) * 1.28);
    line-height: calc(var(--small) * 1.28);
    border-radius: 999px;
    background: #16234f;
    color: #f6ecd4;
    font-size: calc(var(--small) * 0.85);
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
}

.mypage .badge-card .marker .plate::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% - 1px);
    border-left: calc(var(--small) * 0.32) solid transparent;
    border-right: calc(var(--small) * 0.32) solid transparent;
    border-top: calc(var(--small) * 0.43) solid #16234f;
    transform: translateX(-50%);
}

.mypage .badge-card .marker .stem {
    position: absolute;
    left: calc(-0.14 * var(--h));
    bottom: 0;
    width: max(1.5px, calc(0.28 * var(--h)));
    height: calc(var(--sr) + 0.7 * var(--h));
    background: #16234f;
}

.mypage .badge-card .marker .bead {
    position: absolute;
    left: calc(-0.9 * var(--h));
    top: calc(-0.9 * var(--h));
    width: calc(1.8 * var(--h));
    height: calc(1.8 * var(--h));
    border-radius: 50%;
    background: #16234f;
}

.mypage .badge-card .counted,
.mypage .badge-card .capped {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50.5 * var(--h) + var(--sr) + var(--small) * 1.7);
    text-align: center;
    font-size: var(--small);
    color: var(--cobalt);
}

.mypage .badge-card .capped { top: calc(50.5 * var(--h) + var(--sr) + var(--small) * 3); color: var(--ink-soft); }

.mypage .badge-card .news {
    position: absolute;
    left: calc(9 * var(--h));
    right: calc(9 * var(--h));
    bottom: calc(2 * var(--h));
    text-align: center;
    font-size: calc(var(--small) * 0.9);
    color: var(--cobalt);
}

.mypage .badge-card .news.bad { color: var(--crimson); }

.mypage .badge-card .does {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(67 * var(--h));
    display: flex;
    justify-content: center;
    gap: calc(3 * var(--h));
}

.mypage .badge-card .does .kit {
    --bh: calc(6.6 * var(--h));
    min-width: calc(30 * var(--h));
    padding: 0 calc(3 * var(--h));
    font-size: calc(2.8 * var(--h));
}

.mypage .badge-card .does .state {
    margin-top: calc(1.6 * var(--h));
    font-size: var(--small);
    color: var(--ink-soft);
}

/* My badges are buttons, always: each opens its card. */
.mypage .sash .held { cursor: var(--point); transition: transform 0.1s; }
.mypage .sash .held:hover { transform: translateY(calc(-0.6 * var(--h))); }

/* "See them all": the whole sash, under the badges on show. */
.mypage .sash:not(.none) { height: calc(100% - 9 * var(--h)); }

/* Past three, the rows are filled at the least size and only whole rows stand; the rest are a tap away, on the sash. */
.mypage .sash.many {
    height: calc(2 * var(--r) * 2 + 2 * 4.1 * var(--h) + 1.4 * var(--h) + 2 * var(--h));
    overflow: hidden;
}

.mypage .see-all {
    --bh: calc(7 * var(--h));
    display: flex;
    margin: calc(1.6 * var(--h)) auto 0;
    width: calc(40 * var(--h));
    font-size: calc(3 * var(--h));
}

.mypage .sash.none .see-all { margin-top: calc(4 * var(--h)); }

/* ---- the sash (SashView.cs): my card on the left, the groups' page on the right, on the wine felt ---- */

.mypage.sashpage {
    --side: calc(8 * var(--h) + var(--S));
    --gcard: min(calc(12.5 * var(--h)), calc((var(--sheet-w) * 0.8 - 5.6 * var(--h)) / 5));
    --small: calc(2.4 * var(--h));
    background-image: url("../art/me/badges.jpg");
}

.mypage.sashpage .sash-me {
    --cw: calc(var(--S) - 3 * var(--h));
    left: calc(3 * var(--h));
    top: calc(15 * var(--h));
    width: var(--cw);
    height: calc(82 * var(--h));
    --r: min(calc(var(--cw) * 0.2), calc(8.5 * var(--h)));
    --big: min(calc(var(--cw) * 0.24), calc(10 * var(--h)));
}

.mypage.sashpage .sash-me .face { margin-top: calc(4 * var(--h)); }

.mypage.sashpage .sash-me .who {
    margin-top: calc(1 * var(--h));
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(3.2 * var(--h));
    line-height: 1.3;
    font-weight: 800;
    color: var(--ink);
}

.mypage.sashpage .worn-big,
.mypage.sashpage .empty-ring {
    margin-top: calc(1.6 * var(--h));
    width: calc(var(--big) * 2);
    height: calc(var(--big) * 2);
    flex: none;
    container-type: size;
}

.mypage.sashpage .empty-ring {
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(107, 83, 50, 0.12);
    border: 2px solid rgba(107, 83, 50, 0.4);
}

.mypage.sashpage .worn-row {
    --each: min(calc(var(--big) * 0.7), calc((var(--cw) - 8 * var(--h)) / var(--n, 3) / 2.25));
    margin-top: calc(1.6 * var(--h) + var(--big) - var(--each));
    display: flex;
    gap: calc(var(--each) * 0.25);
}

.mypage.sashpage .worn-one {
    width: calc(var(--each) * 2);
    height: calc(var(--each) * 2);
    container-type: size;
    transition: transform 0.1s;
}

.mypage.sashpage .worn-big:hover,
.mypage.sashpage .worn-one:hover { transform: translateY(calc(-0.6 * var(--h))); }

.mypage.sashpage .worn-name {
    margin-top: calc(0.6 * var(--h));
    font-size: calc(3.4 * var(--h));
    line-height: 1.3;
    font-weight: 800;
    color: var(--cobalt);
}

.mypage.sashpage .sash-me .under {
    margin-top: calc(0.8 * var(--h));
    text-align: center;
    font-size: var(--small);
    color: var(--ink-soft);
}

.mypage.sashpage .sash-me .change {
    --bh: calc(5.6 * var(--h));
    position: absolute;
    left: 50%;
    bottom: calc(9 * var(--h));
    width: min(calc(var(--cw) * 0.7), calc(30 * var(--h)));
    transform: translateX(-50%);
    font-size: calc(2.8 * var(--h));
}

.mypage.sashpage .sash-me .count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.2 * var(--h));
    text-align: center;
    font-size: var(--small);
    color: var(--ink);
}

/* The groups' cards: the kit's white card, the group's motif straight on it and its name under. */
.mypage.sashpage .tab.group {
    left: calc(var(--sheet-x) + 3.5 * var(--h) + var(--i) * (var(--gcard) + 1.4 * var(--h)));
    top: calc(12 * var(--h));
    width: var(--gcard);
    height: calc(var(--gcard) * 1.36);
}

[dir="rtl"] .mypage.sashpage .tab.group { left: calc(var(--sheet-x) + var(--sheet-w) - 3.5 * var(--h) - var(--gcard) - var(--i) * (var(--gcard) + 1.4 * var(--h))); }

.mypage.sashpage .tab.group img {
    top: calc(var(--gcard) * 1.36 * 0.36);
    width: calc(min(var(--gcard) * 0.36, var(--gcard) * 1.36 * 0.24) * 1.64);
    height: calc(min(var(--gcard) * 0.36, var(--gcard) * 1.36 * 0.24) * 1.64);
}

.mypage.sashpage .tab.group .label { top: calc(var(--gcard) * 1.36 * 0.72 - 1.8 * var(--h)); font-size: clamp(calc(1.6 * var(--h)), calc(var(--gcard) * 0.17), calc(2.2 * var(--h))); }

.mypage.sashpage .sheet { top: calc(25 * var(--h)); height: calc(67.5 * var(--h)); }

.mypage.sashpage .badges-room {
    left: calc(7 * var(--h));
    right: calc(7 * var(--h));
    top: calc(5 * var(--h));
    bottom: calc(3.5 * var(--h));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 35, 79, 0.35) transparent;
}

/* Four across, each its badge, its name, a gold bar to the next step and the numbers. */
.mypage.sashpage .medals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc(25 * var(--h));
}

.mypage.sashpage .medal-cell {
    --r: min(calc((var(--sheet-w) - 16 * var(--h)) / 4 * 0.3), calc(7 * var(--h)));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(1.5 * var(--h));
    min-width: 0;
    transition: transform 0.1s;
}

.mypage.sashpage .medal-cell:hover { transform: translateY(calc(-0.6 * var(--h))); }

.mypage.sashpage .medal-cell .art {
    position: relative;
    flex: none;
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    container-type: size;
}

/* A chest waiting glows round its badge, the tin at its lower edge with a small "take". */
.mypage.sashpage .medal-cell.chest .art {
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--r) * 0.24) rgba(226, 182, 74, 0.22), 0 0 0 calc(var(--r) * 0.12) rgba(226, 182, 74, 0.2);
}

.mypage.sashpage .medal-cell .tin {
    position: absolute;
    left: 77.5%;
    top: 77.5%;
    width: 40%;
    transform: translate(-50%, -50%);
}

.mypage.sashpage .medal-cell .take {
    position: absolute;
    left: 87%;
    top: 82%;
    padding: 0 0.5em;
    border-radius: 999px;
    background: #16234f;
    color: #f6ecd4;
    font-size: calc(var(--small) * 0.8);
    line-height: 1.4;
    font-weight: 800;
    white-space: nowrap;
}

[dir="rtl"] .mypage.sashpage .medal-cell .tin { left: 22.5%; }
[dir="rtl"] .mypage.sashpage .medal-cell .take { left: auto; right: 87%; }

.mypage.sashpage .medal-cell .named {
    margin-top: calc(0.8 * var(--h));
    max-width: 92%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: var(--small);
    line-height: 1.3;
    font-weight: 800;
    color: var(--ink);
}

.mypage.sashpage .medal-cell .bar {
    margin-top: calc(0.6 * var(--h));
    width: 64%;
    height: calc(1.2 * var(--h));
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(176, 147, 94, 0.6);
    background: rgba(107, 83, 50, 0.18);
    overflow: hidden;
}

.mypage.sashpage .medal-cell .bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

.mypage.sashpage .medal-cell small {
    margin-top: calc(0.5 * var(--h));
    font-size: calc(var(--small) * 0.85);
    color: var(--ink-soft);
}

/* A refusal or a hint on a small cream plaque on the felt, under the page. */
.mypage.sashpage .sash-news {
    position: absolute;
    left: calc(var(--sheet-x) + var(--sheet-w) / 2);
    top: calc(94.5 * var(--h));
    max-width: var(--sheet-w);
    padding: calc(0.8 * var(--h)) calc(2.5 * var(--h));
    border-radius: calc(2 * var(--h));
    border: 1px solid var(--edge);
    background: rgba(245, 232, 201, 0.95);
    color: var(--cobalt);
    font-size: var(--small);
    white-space: nowrap;
    transform: translateX(-50%);
}

.mypage.sashpage .sash-news.bad { color: var(--crimson); }

.mypage.sashpage .face .disc { display: block; }

/* ---- my showcase (MyShowcase.cs): six places, three across, each a card or a dashed empty place ---- */

.mypage .showcase {
    height: calc(100% - 1 * var(--h));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: calc(1.6 * var(--h));
}

.mypage .shown-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: calc(1.2 * var(--h)) 10% calc(1.2 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.1s;
}

.mypage .shown-tile:hover { transform: translateY(calc(-0.6 * var(--h))); }

.mypage .shown-tile.holds {
    background: var(--card-paper);
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(1.8 * var(--h));
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
}

.mypage .shown-tile .picture,
.mypage .throne-tile .picture {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    container-type: size;
}

.mypage .shown-tile .picture > *,
.mypage .throne-tile .picture > * {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

.mypage .shown-tile .picture img.throne,
.mypage .shown-tile .picture img.cardback,
.mypage .throne-tile .picture img.cardback { height: 100%; object-fit: contain; }

.mypage .shown-tile .picture img.cardback,
.mypage .throne-tile .picture img.cardback {
    width: auto;
    border-radius: calc(0.8 * var(--h));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 max(2px, calc(0.3 * var(--h))) rgba(42, 29, 16, 0.55);
}

.mypage .shown-tile .picture .small-table,
.mypage .throne-tile .picture .small-table {
    container-type: size;
    width: min(100cqw, 160cqh);
    height: min(100cqh, 62.5cqw);
    box-sizing: border-box;
    border-radius: min(9cqw, 14cqh);
    border: max(1.5px, calc(0.3 * var(--h))) solid var(--gold);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mypage .shown-tile .picture .medal-box,
.mypage .throne-tile .picture .medal-box {
    width: min(92cqw, 92cqh);
    height: min(92cqw, 92cqh);
}

.mypage .shown-tile .kind { margin-top: calc(0.6 * var(--h)); font-size: calc(2 * var(--h)); line-height: 1.3; color: var(--ink-soft); }

.mypage .shown-tile .called {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(2.8 * var(--h));
    line-height: 1.25;
    font-weight: 800;
    color: var(--cobalt);
}

.mypage .shown-tile .pen {
    position: absolute;
    inset-inline-end: calc(1.2 * var(--h));
    top: calc(1.2 * var(--h));
    width: calc(5 * var(--h));
    height: calc(5 * var(--h));
}

.mypage .shown-tile .pen img { width: 100%; height: 100%; }

/* An empty place on my own page: a dashed gold edge, a plus in its middle and the word under it. */
.mypage .shown-tile.empty {
    justify-content: center;
    border: max(1.5px, calc(0.3 * var(--h))) dashed var(--gold);
    border-radius: calc(1.2 * var(--h));
}

.mypage .shown-tile .plus {
    position: relative;
    width: calc(6 * var(--h));
    height: calc(6 * var(--h));
    margin-bottom: calc(3 * var(--h));
}

.mypage .shown-tile .plus::before,
.mypage .shown-tile .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: max(3px, calc(0.8 * var(--h)));
    border-radius: 999px;
    background: var(--gold);
    transform: translate(-50%, -50%);
}

.mypage .shown-tile .plus::after { transform: translate(-50%, -50%) rotate(90deg); }

.mypage .shown-tile .empty-word {
    position: absolute;
    bottom: calc(2.4 * var(--h));
    font-size: calc(2.2 * var(--h));
    color: var(--ink-soft);
}

.mypage .choice-head .leave { inset-inline-start: auto; inset-inline-end: 0; padding: 0 calc(3 * var(--h)); font-size: calc(2.6 * var(--h)); }

/* What I hold of a kind, to stand in the place: the thrones' grid, wider for a table. */
.mypage .thrones.placing { height: calc(100% - 22 * var(--h)); }
.mypage .thrones.placing.kind-back { grid-template-columns: repeat(auto-fill, calc(17.5 * var(--h))); }
.mypage .thrones.placing.kind-table { grid-template-columns: repeat(auto-fill, calc(26 * var(--h))); }
.mypage .thrones.placing.kind-badge { grid-template-columns: repeat(auto-fill, calc(17.5 * var(--h))); }

.mypage .kinds.shown-kinds .kit { width: auto; min-width: calc(16 * var(--h)); padding: 0 calc(4.5 * var(--h)); }

/* ---- somebody's card (PlayerCard.cs): over the page, the page dimmed; who they are down a third,
   their record, me and them, and their showcase on the rest ---- */

.mypage .card-over {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.mypage .card-over .scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: var(--arrow);
}

.mypage .player-card {
    /* About seven tenths of the screen across, the head a third of it; the head alone is a head's width. */
    --pw: min(calc(var(--w) - 20 * var(--h)), calc(130 * var(--h)));
    --hw: calc(var(--pw) * 0.32);
    --r: min(calc(var(--hw) * 0.27), calc(9.5 * var(--h)));
    left: calc((var(--w) - var(--pw)) / 2);
    top: calc(11.5 * var(--h));
    width: var(--pw);
    height: calc(80 * var(--h));
    display: flex;
    z-index: 1;
}

.mypage .player-card.bare {
    --pw: max(calc(min(calc(var(--w) - 20 * var(--h)), calc(130 * var(--h))) * 0.32), calc(46 * var(--h)));
    --hw: var(--pw);
}

.mypage .pc-head {
    position: relative;
    flex: none;
    width: var(--hw);
    height: 100%;
    box-sizing: border-box;
    padding: 0 calc(3 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mypage .pc-disc {
    flex: none;
    margin-top: calc(5 * var(--h));
    width: calc(var(--r) * 2.2);
    height: calc(var(--r) * 2.2);
    box-sizing: border-box;
    padding: calc(var(--r) * 0.1);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1.5px rgba(42, 29, 16, 0.6);
}

.mypage .pc-disc img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
}

.mypage .pc-name {
    margin-top: calc(1.6 * var(--h));
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(4.2 * var(--h));
    font-weight: 800;
    line-height: 1.2;
    color: var(--cobalt);
}

.mypage .pc-under {
    margin-top: calc(0.4 * var(--h));
    max-width: 100%;
    text-align: center;
    font-size: calc(2.4 * var(--h));
    line-height: 1.3;
    color: var(--ink-soft);
}

.mypage .pc-under.motto { font-style: italic; color: var(--ink); }
[dir="rtl"] .mypage .pc-under.motto { font-style: normal; }

.mypage .pc-head .rule { margin-top: calc(1.6 * var(--h)); }
.mypage .pc-head .rank { margin-top: calc(2.5 * var(--h)); }
.mypage .pc-head .medal { --mr: min(calc(var(--hw) * 0.1), calc(4 * var(--h))); }
.mypage .pc-head .rank .spoken b { font-size: calc(3.2 * var(--h)); }
.mypage .pc-head .rank .spoken small { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-size: calc(2.2 * var(--h)); }

/* The badges worn, side by side, each over its name, and under them where and since when. */
.mypage .pc-seals {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: calc(1 * var(--h));
}

.mypage .pc-seal {
    width: calc(33% - 1 * var(--h));
    max-width: calc(12.2 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.6 * var(--h));
}

.mypage .pc-art { width: calc(7.2 * var(--h)); height: calc(7.2 * var(--h)); }

.mypage .pc-seal b {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(1.9 * var(--h));
    font-weight: 800;
    color: var(--ink);
}

.mypage .pc-where {
    margin-top: auto;
    margin-bottom: calc(7.5 * var(--h));
    max-width: 100%;
    text-align: center;
    font-size: calc(2.15 * var(--h));
    color: var(--ink-soft);
}

.mypage .pc-seals + .pc-where { margin-top: calc(1.6 * var(--h)); }
.mypage .pc-seals:last-child { margin-bottom: calc(7.5 * var(--h)); }

/* The rule that stands between who they are and the rest. */
.mypage .pc-divide {
    flex: none;
    align-self: center;
    width: max(1px, calc(0.2 * var(--h)));
    height: calc(70 * var(--h));
    background: var(--gold);
}

.mypage .pc-body {
    position: relative;
    flex: 1;
    min-width: 0;
    /* Clear of the panel's corner suns. */
    margin-inline: calc(3 * var(--h)) calc(6 * var(--h));
}

/* The three standing tabs, as my page's are. */
.mypage .pc-tab {
    --card: calc(10.5 * var(--h));
    position: absolute;
    inset-inline-start: calc(var(--i) * (var(--card) + 1.4 * var(--h)));
    top: calc(3.5 * var(--h));
    width: var(--card);
    height: calc(var(--card) * 1.36);
    z-index: 1;
}

.mypage .pc-leaf {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: var(--tab-paper);
    border: max(1px, calc(var(--card) * 0.02)) solid rgba(22, 35, 79, 0.7);
    border-radius: calc(var(--card) * 0.08);
    box-shadow: 0 calc(var(--card) * 0.016) calc(var(--card) * 0.04) rgba(0, 0, 0, 0.25);
    transition: transform 0.12s;
}

.mypage .pc-tab:not(.chosen):hover .pc-leaf { transform: translateY(-6%); }

.mypage .pc-tab.chosen {
    z-index: 3;
    transform-origin: 50% 100%;
    transform: translateY(calc(-2 * var(--h))) rotate(-4deg) scale(1.1);
}

[dir="rtl"] .mypage .pc-tab.chosen { transform: translateY(calc(-2 * var(--h))) rotate(4deg) scale(1.1); }

.mypage .pc-tab.chosen .pc-leaf {
    border: max(1px, calc(var(--card) * 0.028)) solid var(--paper-ink);
    box-shadow: 0 0 calc(var(--card) * 0.09) rgba(255, 245, 209, 0.75);
}

.mypage .pc-tab img {
    position: absolute;
    left: 50%;
    top: calc(var(--card) * 0.544);
    width: calc(var(--card) * 0.48);
    height: calc(var(--card) * 0.5);
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.mypage .pc-label {
    position: absolute;
    left: 5%;
    right: 5%;
    top: calc(var(--card) * 0.952 - 1.6 * var(--h));
    line-height: calc(2.2 * var(--h));
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    font-size: calc(2 * var(--h));
    color: var(--ink);
}

.mypage .pc-tab.chosen .pc-label { font-weight: 800; color: var(--cobalt); }

.mypage .pc-tabs-rule {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(3.5 * var(--h) + 10.5 * var(--h) * 1.36);
    height: max(1px, calc(0.2 * var(--h)));
    background: var(--gold);
    z-index: 2;
}

.mypage .pc-page {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(20 * var(--h));
    bottom: calc(4.5 * var(--h));
}

.mypage .pc-page .number b { font-size: calc(4.6 * var(--h)); }

/* The way out, on the card's far top corner, half on it and half off. */
.mypage .pc-shut {
    position: absolute;
    inset-inline-end: calc(-3 * var(--h));
    top: calc(-3 * var(--h));
    width: calc(7.5 * var(--h));
    height: calc(7.5 * var(--h));
    background: var(--round-main-raised, url("../art/kit/round-main.png")) center / contain no-repeat;
    z-index: 4;
}

.mypage .pc-shut:hover { filter: brightness(1.15); }

.mypage .pc-shut i::before,
.mypage .pc-shut i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36%;
    height: max(2.5px, 8%);
    border-radius: 1px;
    background: var(--on-navy);
    transform: translate(-50%, -50%) rotate(45deg);
}

.mypage .pc-shut i::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---- me and them ---- */

.mypage .pc-never {
    padding-top: calc(18 * var(--h));
    text-align: center;
    font-size: calc(3 * var(--h));
    color: var(--ink-soft);
}

.mypage .pc-versus {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(6 * var(--h)) minmax(0, 1fr);
    gap: calc(1.4 * var(--h));
}

.mypage .pc-versus.lasted { grid-template-rows: calc(6 * var(--h)) minmax(0, 1fr) calc(12 * var(--h)); }

/* The line over them, between two gold rules. */
.mypage .pc-title {
    grid-column: span 2;
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
    font-size: calc(3 * var(--h));
    font-weight: 400;
    color: var(--ink);
}

.mypage .pc-title::before,
.mypage .pc-title::after {
    content: "";
    flex: 1;
    min-width: calc(2 * var(--h));
    height: max(1px, calc(0.2 * var(--h)));
    background: var(--gold);
}

.mypage .pc-title span { max-width: 80%; min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; }

.mypage .pc-side,
.mypage .pc-last {
    box-sizing: border-box;
    min-height: 0;
    background: var(--card-paper);
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(1.8 * var(--h));
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
}

.mypage .pc-side {
    --fr: calc(5.6 * var(--h));
    padding: calc(1.6 * var(--h)) calc(1 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(0.8 * var(--h));
    text-align: center;
}

.mypage .pc-side small { font-size: calc(2.4 * var(--h)); color: var(--ink-soft); }

/* The two faces: touching for partners, apart with the swords between for opponents. Mine where a line starts. */
.mypage .pc-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(0.6 * var(--h)) 0;
}

.mypage .pc-pair .oval {
    flex: none;
    width: calc(var(--fr) * 2);
    height: calc(var(--fr) * 2);
    border-radius: 50%;
    overflow: hidden;
    background: #f6e6c0;
    box-shadow: 0 0 0 calc(0.4 * var(--h)) var(--gold), 0 0 0 calc(0.55 * var(--h)) rgba(42, 29, 16, 0.5);
}

.mypage .pc-pair .initial { font-size: calc(var(--fr) * 0.9); }
.mypage .pc-side:first-of-type .pc-pair .oval + .oval { margin-inline-start: calc(-0.1 * var(--fr)); }

.mypage .pc-swords {
    width: calc(var(--fr) * 1.4);
    height: calc(var(--fr) * 1.4);
    margin: 0 calc(var(--fr) * 0.2);
    object-fit: contain;
}

.mypage .pc-big { font-size: calc(5.6 * var(--h)); font-weight: 800; line-height: 1.1; color: var(--cobalt); }

.mypage .pc-score { display: flex; align-items: center; gap: calc(var(--fr) * 1.1); }

.mypage .pc-dash {
    width: calc(var(--fr) * 0.6);
    height: max(2px, calc(0.4 * var(--h)));
    background: var(--gold);
}

.mypage .pc-line { font-size: calc(2.4 * var(--h)); color: var(--ink); }

/* The last game we both sat in. */
.mypage .pc-last {
    grid-column: span 2;
    padding: 0 calc(3 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(2.4 * var(--h));
}

.mypage .pc-last img { flex: none; width: calc(7.2 * var(--h)); height: calc(7.2 * var(--h)); object-fit: contain; }
.mypage .pc-words { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mypage .pc-words small { font-size: calc(2.1 * var(--h)); color: var(--ink-soft); }
.mypage .pc-words b { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; font-size: calc(3 * var(--h)); font-weight: 800; color: var(--cobalt); }

/* ---- their showcase: what stands there, and a pale tile for a place that holds nothing ---- */

.mypage .showcase.theirs { height: calc(100% - 5.5 * var(--h)); gap: calc(1.2 * var(--h)); }
.mypage .showcase.theirs .shown-tile:hover { transform: none; }
.mypage .shown-tile.pale { background: rgba(251, 244, 226, 0.45); border-radius: calc(1.8 * var(--h)); }

.mypage .chosen-by {
    margin-top: calc(1.2 * var(--h));
    text-align: center;
    font-size: calc(2.4 * var(--h));
    color: var(--ink-soft);
}

/* backs.css */
/* The page of my card backs (BacksPage.cs), over my page: the niche of a world on the left with
   its backs on the shelf, the row of the worlds under it, and the sheet of the back picked on the
   right. Measured in shares of the screen's height as the game measures it; the niche is the
   painted one, in its own shape (1280 by 685). It is laid out the same way in every language:
   only the order of the backs on a shelf and of the worlds in the row turns round. Its classes
   start with bk-, since my page already has a .name, a .line, a .kind and a .shown of its own. */

.mypage .backs-page {
    /* The niche: as wide as its side of the page, never so tall that the row under it has no room. */
    --nw: min(calc(var(--w) * 0.56), calc(118 * var(--h)));
    --nh: calc(var(--nw) * 685 / 1280);
    --nx: calc(3 * var(--h));
    --ny: calc(16.5 * var(--h));

    position: absolute;
    inset: 0;
    z-index: 20;
    direction: ltr;
    background: #2b2418 url("../art/me/ground.jpg") center / cover;
}

/* ---- the niche, with the world's name on the plate over its arch ---- */

.mypage .bk-niche {
    position: absolute;
    left: var(--nx);
    top: var(--ny);
    width: var(--nw);
    height: var(--nh);
    touch-action: pan-y;
}

.mypage .bk-wall { position: absolute; inset: 0; width: 100%; height: 100%; }

.mypage .bk-plate {
    position: absolute;
    left: calc(var(--nw) * 0.365);
    top: calc(var(--nh) * 0.107);
    width: calc(var(--nw) * 0.27);
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(3.4 * var(--h));
    line-height: 1.2;
    font-weight: 800;
    color: var(--navy);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
}

/* The backs in one row on its floor: side by side up to five, more than five each a little over the one before. */
.mypage .bk-shelf {
    --high: min(calc(var(--nh) * 0.42 - 2.2 * var(--h)), calc(20 * var(--h)));
    --cw: calc(var(--high) * 5 / 7);
    --step: min(calc(var(--cw) * 1.13), calc((var(--nw) * 0.83 - var(--cw)) / max(var(--n) - 1, 1)));
    position: absolute;
    inset: 0;
}

.mypage .bk-on-shelf {
    position: absolute;
    left: calc(var(--nw) / 2 - (var(--cw) + var(--step) * (var(--n) - 1)) / 2 + var(--i) * var(--step));
    top: calc(var(--nh) * 0.835 - var(--high));
    width: var(--cw);
    height: var(--high);
    transition: transform 0.12s ease-out;
}

.mypage .bk-on-shelf img,
.mypage .bk-world img,
.mypage .bk-shown {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7% / 5%;
    box-shadow: 0 calc(0.4 * var(--h)) calc(0.9 * var(--h)) rgba(0, 0, 0, 0.45);
}

.mypage .bk-on-shelf:hover { transform: translateY(calc(-0.8 * var(--h))); }

/* The one picked stands forward, ringed in gold, in front of those it would be half behind. */
.mypage .bk-on-shelf.bk-picked { z-index: 1; transform: translateY(calc(-2.2 * var(--h))); }
.mypage .bk-on-shelf.bk-picked img { outline: max(2px, calc(0.5 * var(--h))) solid var(--gold); outline-offset: calc(0.5 * var(--h)); }

.mypage .bk-on-shelf .worn-tick { right: calc(1.2 * var(--h)); top: calc(1.2 * var(--h)); }
[dir="rtl"] .mypage .bk-on-shelf .worn-tick { right: auto; left: calc(1.2 * var(--h)); }

/* A new world's backs come onto the floor from the side it was leafed from. */
.mypage .bk-on-shelf.bk-from-right { animation: bk-onto-right 0.24s cubic-bezier(0.33, 1, 0.68, 1) backwards; animation-delay: calc(var(--i) * 25ms); }
.mypage .bk-on-shelf.bk-from-left { animation: bk-onto-left 0.24s cubic-bezier(0.33, 1, 0.68, 1) backwards; animation-delay: calc(var(--i) * 25ms); }

@keyframes bk-onto-right { from { transform: translateX(calc(9 * var(--h))); opacity: 0; } }
@keyframes bk-onto-left { from { transform: translateX(calc(-9 * var(--h))); opacity: 0; } }

/* ---- the arrows at the niche's sides ---- */

.mypage .bk-arrow-round {
    --across: calc(8.5 * var(--h));
    position: absolute;
    top: calc(var(--ny) + var(--nh) * 0.6 - var(--across) / 2);
    width: var(--across);
    height: var(--across);
    background: var(--round-plain-raised, url("../art/kit/round-plain.png")) center / contain no-repeat;
    z-index: 2;
}

.mypage .bk-arrow-round.bk-left { left: calc(var(--nx) - var(--across) * 0.22); }
.mypage .bk-arrow-round.bk-right { left: calc(var(--nx) + var(--nw) - var(--across) * 0.78); }
.mypage .bk-arrow-round:hover { filter: brightness(1.1); }

/* The arrow's head: two strokes of ink meeting at a point. */
.mypage .bk-arrow-round i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24%;
    height: 24%;
    box-sizing: border-box;
    border-left: max(2.5px, calc(var(--across) * 0.075)) solid var(--paper-ink);
    border-bottom: max(2.5px, calc(var(--across) * 0.075)) solid var(--paper-ink);
    transform: translate(-30%, -50%) rotate(45deg);
}

.mypage .bk-arrow-round.bk-right i { transform: translate(-70%, -50%) rotate(-135deg); }

/* ---- the row of the worlds under the niche, one small card a niche ---- */

.mypage .bk-worlds {
    --gap: calc(1.4 * var(--h));
    --ww: min(calc(10 * var(--h)), calc((var(--nw) - var(--gap) * (var(--n) - 1)) / var(--n)));
    position: absolute;
    left: var(--nx);
    width: var(--nw);
    top: min(calc(var(--ny) + var(--nh) + 5 * var(--h)), calc(95.5 * var(--h) - var(--ww) * 1.4));
    height: calc(var(--ww) * 1.4);
}

.mypage .bk-world {
    position: absolute;
    left: calc((var(--nw) - var(--n) * var(--ww) - (var(--n) - 1) * var(--gap)) / 2 + var(--i) * (var(--ww) + var(--gap)));
    top: 0;
    width: var(--ww);
    height: calc(var(--ww) * 1.4);
}

.mypage .bk-world img { filter: brightness(0.82); border-radius: 8% / 6%; }
.mypage .bk-world:hover img { filter: none; }
.mypage .bk-world.bk-on { transform: translateY(calc(-1.4 * var(--h))); }
.mypage .bk-world.bk-on img { filter: none; outline: max(2px, calc(0.5 * var(--h))) solid var(--gold); outline-offset: calc(0.4 * var(--h)); }

/* ---- the sheet of the back picked ---- */

.mypage .bk-sheet {
    --room: calc(73.5 * var(--h));
    left: calc(var(--nx) + var(--nw) + 3.5 * var(--h));
    top: calc(13.5 * var(--h));
    right: calc(3 * var(--h));
    height: calc(82.5 * var(--h));
    padding: calc(4.5 * var(--h)) calc(6 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[dir="rtl"] .mypage .bk-sheet { direction: rtl; }

.mypage .bk-shown {
    flex: none;
    height: min(calc(33 * var(--h)), calc(var(--room) * 0.42));
    width: auto;
    aspect-ratio: 5 / 7;
}

.mypage .bk-shown.bk-hop { animation: bk-hop 0.45s ease-out; }

@keyframes bk-hop {
    40% { transform: translateY(calc(-3 * var(--h))) scale(1.04); }
    70% { transform: translateY(calc(0.4 * var(--h))); }
}

/* The name and the note are as wide as the sheet's room, so that a long one is brought down in size to fit it. */
.mypage .bk-name {
    margin-top: calc(2.4 * var(--h));
    align-self: stretch;
    font-size: calc(3.8 * var(--h));
    line-height: 1.3;
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
}

.mypage .bk-kind { font-size: calc(2.4 * var(--h)); line-height: 1.4; color: var(--ink-soft); }

.mypage .bk-line {
    flex: 1 1 0;
    min-height: 0;
    margin-top: calc(1.2 * var(--h));
    font-size: calc(2.7 * var(--h));
    line-height: 1.55;
    color: var(--ink);
    overflow: hidden;
}

.mypage .bk-wear { flex: none; margin-top: calc(1 * var(--h)); }

.mypage .bk-note {
    flex: none;
    align-self: stretch;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    margin-top: calc(0.8 * var(--h));
    font-size: calc(2.1 * var(--h));
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* tables.css */
/* The page of my tables (TablesPage.cs), over my page: the table itself from edge to edge, its
   ring in the middle with the glass in it, a trick of four cards on it, the arrows at the sides,
   and the plaque at the foot with the dots over it. Measured in shares of the screen's height as
   the game measures it. Its classes start with tb-, as the backs page's start with bk-. */

.mypage .tables-page {
    /* The ring, as wide as the game lays it from above with nobody at the table. */
    --rw: calc(112.5 * var(--h));
    --rh: calc(50 * var(--h));
    /* The plaque: as wide as the screen allows, never wider than one and a half heights. */
    --pw: min(calc(var(--w) - 6 * var(--h)), calc(150 * var(--h)));
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    background: #2b2418 url("../art/me/ground.jpg") center / cover;
    touch-action: pan-y;
}

/* ---- the table: its ground, the glass, the ring, the trick ---- */

.mypage .tb-ground {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* A new table's ground fades in over the one before. */
.mypage .tb-ground.fresh { animation: tb-fade 0.4s ease-in-out both; }
@keyframes tb-fade { from { opacity: 0; } }

/* The glass in the ring's window, under the ring as a pane is held by its frame: the ground seen
   through it blurred and a shade milky, greyer the smokier; none at all for no glass. */
.mypage .tb-glass {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--rw) * 0.9);
    height: calc(var(--rh) * 0.84);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(calc(240 - 100 * var(--smoke) * var(--smoke)), calc(247 - 100 * var(--smoke) * var(--smoke)), calc(245 - 95 * var(--smoke) * var(--smoke)), calc(0.18 + 0.5 * var(--smoke)));
    -webkit-backdrop-filter: blur(calc(var(--smoke) * 1.2 * var(--h)));
    backdrop-filter: blur(calc(var(--smoke) * 1.2 * var(--h)));
    opacity: min(1, calc(var(--smoke) * 1000));
    transition: background-color 0.15s, opacity 0.15s;
    pointer-events: none;
}

.mypage .tables-page .ring {
    top: 50%;
    width: var(--rw);
    pointer-events: none;
}

/* The ring's medallion, not my rank's medal, whose class it shares. */
.mypage .tables-page .ring .medal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: 22%;
    display: block;
    transform: translate(-50%, -50%);
}

/* Smaller than they are played and further apart, so the ring's whole band is seen round them and its medallion between them. */
.mypage .tb-trick { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }

.mypage .tb-laid {
    --wide: calc(10 * var(--h));
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r));
}

.mypage .tb-laid .card { --wide: calc(10 * var(--h)); }
.mypage .tb-laid.place-0 { --dx: 0px; --dy: calc(12.8 * var(--h)); }
.mypage .tb-laid.place-1 { --dx: calc(21 * var(--h)); --dy: 0px; }
.mypage .tb-laid.place-2 { --dx: 0px; --dy: calc(-12.8 * var(--h)); }
.mypage .tb-laid.place-3 { --dx: calc(-21 * var(--h)); --dy: 0px; }

/* The cards hop as what they lie on is drawn away from under them. */
.mypage .tb-laid.hop .card { animation: tb-hop 0.4s ease-out both; animation-delay: calc(var(--k) * 40ms); }

@keyframes tb-hop {
    35% { transform: translateY(calc(-2.4 * var(--h))) scale(1.04); }
    70% { transform: translateY(calc(0.3 * var(--h))); }
}

/* ---- over the table: the way back, the name, the arrows ---- */

.mypage .tables-page .back,
.mypage .tables-page .title { z-index: 3; }

.mypage .tb-arrow {
    --across: calc(10 * var(--h));
    position: absolute;
    top: calc(50 * var(--h) - var(--across) / 2);
    width: var(--across);
    height: var(--across);
    background: var(--round-plain-raised, url("../art/kit/round-plain.png")) center / contain no-repeat;
    z-index: 3;
}

.mypage .tb-arrow.tb-left { left: calc(3 * var(--h)); }
.mypage .tb-arrow.tb-right { right: calc(3 * var(--h)); }
.mypage .tb-arrow:hover { filter: brightness(1.1); }

.mypage .tb-arrow i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24%;
    height: 24%;
    box-sizing: border-box;
    border-left: max(2.5px, calc(var(--across) * 0.075)) solid var(--paper-ink);
    border-bottom: max(2.5px, calc(var(--across) * 0.075)) solid var(--paper-ink);
    transform: translate(-30%, -50%) rotate(45deg);
}

.mypage .tb-arrow.tb-right i { transform: translate(-70%, -50%) rotate(-135deg); }

/* ---- the plaque at the foot, and a dot over it for every table I hold ---- */

.mypage .tb-plaque {
    position: absolute;
    left: calc((var(--w) - var(--pw)) / 2);
    top: calc(80.5 * var(--h));
    width: var(--pw);
    height: calc(17.5 * var(--h));
    box-sizing: border-box;
    padding: 0 calc(4 * var(--h)) calc(5.2 * var(--h));
    display: grid;
    grid-template-columns: calc(var(--pw) * 0.26) 1fr auto;
    align-items: center;
    column-gap: calc(3 * var(--h));
    background: var(--card-paper);
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(1.8 * var(--h));
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
    z-index: 3;
}

[dir="rtl"] .mypage .tb-plaque { direction: rtl; }

.mypage .tb-called { min-width: 0; display: flex; flex-direction: column; }

.mypage .tb-name {
    font-size: calc(4 * var(--h));
    line-height: 1.25;
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
}

.mypage .tb-rarity { font-size: calc(2.4 * var(--h)); line-height: 1.3; color: var(--ink-soft); }
.mypage .tb-rarity.legendary { color: #a8741a; }
.mypage .tb-rarity.limited { color: #8e2a6b; }

.mypage .tb-glass-row { min-width: 0; display: flex; align-items: center; gap: calc(1.5 * var(--h)); }

.mypage .tb-word {
    flex: none;
    width: min(calc(17 * var(--h)), 32%);
    text-align: center;
    font-size: calc(2.6 * var(--h));
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
}

.mypage .tb-slider {
    --v: 0%;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.mypage .tb-wear { --bh: calc(8 * var(--h)); min-width: calc(24 * var(--h)); }

.mypage .tb-note {
    position: absolute;
    left: calc(4 * var(--h));
    right: calc(4 * var(--h));
    bottom: calc(1.2 * var(--h));
    text-align: center;
    font-size: calc(2.1 * var(--h));
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
}

.mypage .tb-dots {
    --step: min(calc(4 * var(--h)), calc(var(--pw) / var(--n)));
    position: absolute;
    left: 0;
    right: 0;
    top: calc(75.5 * var(--h));
    height: calc(4 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.mypage .tb-dot {
    position: relative;
    width: var(--step);
    height: 100%;
}

/* Each dot: a dark rim, and in it the navy of one held, the gold of the one on show, the tick of the one worn. */
.mypage .tb-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(2.6 * var(--h));
    height: calc(2.6 * var(--h));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(246, 236, 212, 0.85) 0 calc(0.77 * var(--h)), rgba(30, 23, 18, 0.55) calc(0.8 * var(--h)));
}

.mypage .tb-dot.on::before { background: radial-gradient(circle, var(--gold) 0 calc(1.1 * var(--h)), rgba(30, 23, 18, 0.55) calc(1.15 * var(--h))); }

.mypage .tb-dot.worn::before {
    background: radial-gradient(circle, var(--cobalt) 0 calc(0.9 * var(--h)), var(--gold) calc(0.95 * var(--h)) calc(1.1 * var(--h)), rgba(30, 23, 18, 0.55) calc(1.15 * var(--h)));
}

.mypage .tb-dot:hover::before { filter: brightness(1.15); }

/* cards.css */
/* The page of my cards (MyCardsView.cs), over my page: the suits as standing cards behind the
   pack's panel, the suit's thirteen on it, and the sheet of the card picked on the right with the
   choice of what it wears and a small table playing it (FlourishPreview). Measured in shares of
   the screen's height as the game measures it. Its classes start with cd-. */

.mypage .cards-page {
    --pkw: calc(var(--w) * 0.56);
    --tw: min(calc(12.5 * var(--h)), calc((var(--pkw) * 0.75 - 3 * 1.6 * var(--h)) / 4));
    --cellw: calc((var(--pkw) - 13 * var(--h)) / 7);
    --cellh: calc(30 * var(--h));
    --cw: min(calc(var(--cellw) * 0.84), calc(var(--cellh) * 0.78 * 5 / 7));
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #2a1830 url("../art/grounds/cards.jpg") center / cover;
}

/* ---- a standing card for each suit behind the panel's top edge ---- */

.mypage .cd-suit {
    position: absolute;
    left: calc(6.5 * var(--h) + var(--i) * (var(--tw) + 1.6 * var(--h)));
    top: calc(32 * var(--h) - var(--tw) * 1.36);
    width: var(--tw);
    height: calc(var(--tw) * 1.36);
    z-index: 1;
}

[dir="rtl"] .mypage .cd-suit { left: calc(var(--pkw) - 0.5 * var(--h) - var(--tw) - var(--i) * (var(--tw) + 1.6 * var(--h))); }

.mypage .cd-suit .leaf {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: var(--tab-paper);
    border: max(1px, calc(var(--tw) * 0.02)) solid rgba(22, 35, 79, 0.7);
    border-radius: calc(var(--tw) * 0.08);
    box-shadow: 0 calc(var(--tw) * 0.016) calc(var(--tw) * 0.04) rgba(0, 0, 0, 0.25);
    transition: transform 0.12s;
}

.mypage .cd-suit:not(.on):hover .leaf { transform: translateY(-6%); }

/* The suit on show is picked up in front of the panel. */
.mypage .cd-suit.on { z-index: 3; transform-origin: 50% 100%; transform: translateY(calc(-2.5 * var(--h))) rotate(-4deg) scale(1.1); }
[dir="rtl"] .mypage .cd-suit.on { transform: translateY(calc(-2.5 * var(--h))) rotate(4deg) scale(1.1); }
.mypage .cd-suit.on .leaf { border: max(1px, calc(var(--tw) * 0.028)) solid var(--paper-ink); box-shadow: 0 0 calc(var(--tw) * 0.09) rgba(255, 245, 209, 0.75); }

.mypage .cd-suit img {
    position: absolute;
    left: 50%;
    top: 36%;
    height: 36%;
    max-width: 50%;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

/* How many of the suit's cards have a flourish and wear none. */
.mypage .cd-suit b {
    position: absolute;
    left: 0;
    right: 0;
    top: 70%;
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(var(--tw) * 1.36 * 0.17);
    line-height: 1;
    font-weight: 500;
    color: var(--ink);
}

.mypage .cd-suit.on b { font-weight: 800; color: var(--paper-ink); }

/* ---- the suit's thirteen ---- */

.mypage .cd-pack {
    left: calc(3 * var(--h));
    top: calc(28 * var(--h));
    width: var(--pkw);
    height: calc(68 * var(--h));
    padding: calc(4 * var(--h)) calc(6.5 * var(--h)) 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.mypage .cd-row { display: flex; justify-content: center; height: var(--cellh); }
[dir="rtl"] .mypage .cd-pack .cd-row { direction: rtl; flex-direction: row; }

.mypage .cd-cell { position: relative; width: var(--cellw); height: var(--cellh); flex: none; }

/* The card in the middle of its share above the mark (the game fits it in the cell's upper 78%). */
.mypage .cd-art {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    transition: transform 0.12s;
}

.mypage .cd-art .card { --wide: var(--cw); }
.mypage .cd-cell:hover .cd-art { transform: translate(-50%, -53%); }
.mypage .cd-cell.bare .cd-art { opacity: 0.42; filter: saturate(0.6); }

/* The card picked in the kit's navy line, as a lit card is. */
.mypage .cd-cell.picked .cd-art .card { outline: max(2px, calc(0.4 * var(--h))) solid var(--navy); outline-offset: calc(0.5 * var(--h)); }

/* The mark: navy for worn, a ring for owned, nothing for nothing. */
.mypage .cd-mark {
    position: absolute;
    left: 50%;
    top: 90%;
    width: calc(var(--cellw) * 0.14);
    height: calc(var(--cellw) * 0.14);
    box-sizing: border-box;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.mypage .cd-mark.owned { border: max(1px, calc(var(--cellw) * 0.021)) solid var(--ink-soft); }
.mypage .cd-mark.worn { background: var(--navy); border: max(1px, calc(var(--cellw) * 0.021)) solid var(--navy); }

/* ---- the card picked ---- */

.mypage .cd-sheet {
    left: calc(3 * var(--h) + var(--pkw) + 4 * var(--h));
    right: calc(3 * var(--h));
    top: calc(13 * var(--h));
    height: calc(83 * var(--h));
    padding: calc(3.5 * var(--h)) calc(7 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 2;
}

[dir="rtl"] .mypage .cd-sheet { direction: rtl; }

.mypage .cd-name {
    text-align: center;
    font-size: calc(3 * var(--h));
    line-height: 1.4;
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
}

.mypage .cd-none { margin-top: calc(1.5 * var(--h)); text-align: center; font-size: calc(2.6 * var(--h)); line-height: 1.5; color: var(--ink-soft); }

.mypage .cd-chips { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--h)) calc(1.5 * var(--h)); margin-top: calc(1.8 * var(--h)); }

.mypage .cd-chip {
    --bh: calc(6 * var(--h));
    min-width: 0;
    padding: 0 calc(3.2 * var(--h));
    font-size: calc(2.6 * var(--h));
}

.mypage .cd-turns { margin-top: calc(1.2 * var(--h)); font-size: calc(2.6 * var(--h)); color: var(--ink-soft); }

/* The small table: the tile table's ground in a gold edge, one trick on it (on the page of my cards, and out of a chest). */
:is(.mypage, .opening) .cd-play {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    margin-top: calc(1.8 * var(--h));
    container-type: size;
    border-radius: calc(2 * var(--h));
    border: max(1.5px, calc(0.3 * var(--h))) solid var(--gold);
    background: url("../art/table/ground.jpg") center / cover;
    box-shadow: inset 0 0 calc(2 * var(--h)) rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

:is(.mypage, .opening) .cd-trick { position: absolute; inset: 0; }

:is(.mypage, .opening) .cd-trick .flourish-under,
:is(.mypage, .opening) .cd-trick .flourish-over {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

:is(.mypage, .opening) .cd-trick .flourish-under { z-index: 0; }
:is(.mypage, .opening) .cd-trick .flourish-over { z-index: 5; }

:is(.mypage, .opening) .cd-laid {
    --wide: min(calc(34cqh * 5 / 7), 22cqw);
    position: absolute;
    left: calc(50cqw + var(--x));
    top: calc(50cqh + var(--y));
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--fx), var(--fy));
}

:is(.mypage, .opening) .cd-laid .card { --wide: min(calc(34cqh * 5 / 7), 22cqw); }
:is(.mypage, .opening) .cd-laid.place-0 { --x: 0cqh; --y: 19cqh; --fx: 0cqh; --fy: 45cqh; z-index: 2; }
:is(.mypage, .opening) .cd-laid.place-1 { --x: 26cqh; --y: 0cqh; --fx: 45cqh; --fy: 0cqh; }
:is(.mypage, .opening) .cd-laid.place-2 { --x: 0cqh; --y: -19cqh; --fx: 0cqh; --fy: -45cqh; }
:is(.mypage, .opening) .cd-laid.place-3 { --x: -26cqh; --y: 0cqh; --fx: -45cqh; --fy: 0cqh; }

/* Landing: thrown in from its chair's side; gathered, gone at once. */
:is(.mypage, .opening) .cd-laid.in { opacity: 1; transform: translate(-50%, -50%); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.15s; }

:is(.mypage, .opening) .cd-laid .flier { position: relative; transform: rotate(var(--r, 0deg)); }
:is(.mypage, .opening) .cd-laid.won .flier { animation: cd-rise 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes cd-rise {
    from { transform: rotate(var(--r, 0deg)) scale(1); }
    to { transform: rotate(var(--r, 0deg)) scale(1.12); }
}

.mypage .cd-caption {
    margin-top: calc(1 * var(--h));
    text-align: center;
    font-size: calc(2.4 * var(--h));
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
}

/* Nothing worn: the card stands there as it is. */
.mypage .cd-still { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.mypage .cd-still .card { --wide: min(calc(70cqh * 5 / 7), 40cqw); }
.mypage .cd-still.bare .card { opacity: 0.42; filter: saturate(0.6); }

/* ---- a card face on my page ----
   My page has a .face (my portrait), a .rank (my rank's row) and a .back (the way back) of its
   own, and a card's pieces carry the same names: here they are put back as the table draws them. */

.mypage .card > .face { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; flex: none; }
.mypage .card > img.back { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0; z-index: auto; visibility: hidden; }

.mypage .card > .rank {
    position: absolute;
    left: 13%;
    top: 9.75%;
    width: 22%;
    height: 10.5%;
    margin: 0;
    display: block;
    gap: 0;
    transform: translate(-50%, -50%);
}

/* signin.css */
/* The sign-in: the four kings of the pack stand in a fan under the painted name, the hung crown
   above them, the house plaque in front. Everything here is sized by the height of the window, so
   the picture is the same one on a laptop and on a phone held either way; the kings are only
   bigger or smaller. The cards are dealt in when the page opens, then they breathe; the room
   leans a little after the pointer (or the tilt of the phone). Anybody who asked their browser
   for less motion gets the still picture. */

:root {
    --px: 0;
    --py: 0;
}

.door {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    isolation: isolate;
    /* The height of a card; its width follows the 5:7 of the pack. */
    --ch: clamp(230px, 60vh, 700px);
    --cw: calc(var(--ch) / 1.4);
}

/* The light: a warm fall from above the name, and the floor going dark under the kings. */
.door::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 48% at 50% -4%, rgba(255, 206, 110, 0.30), rgba(255, 206, 110, 0) 72%),
        radial-gradient(ellipse 90% 46% at 50% 108%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 70%),
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35));
}

/* ---- the gold dust in the air ---- */

.door .dust {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.door .dust i {
    position: absolute;
    left: var(--x);
    bottom: -2vh;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle, #fff3c4 0%, #e2b64a 45%, rgba(226, 182, 74, 0) 72%);
    opacity: 0;
    animation: mote var(--t) linear var(--d) infinite;
    will-change: transform, opacity;
}

@keyframes mote {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    12% { opacity: var(--o); }
    50% { transform: translate(var(--w), -55vh) scale(1); }
    88% { opacity: var(--o); }
    100% { transform: translate(calc(var(--w) * -0.6), -108vh) scale(0.5); opacity: 0; }
}

/* ---- the kings ---- */

.door .stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    perspective: 1500px;
    pointer-events: none;
    overflow: hidden;
}

.door .hall {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--py) * -4deg)) rotateY(calc(var(--px) * 7deg));
    transition: transform 0.12s linear;
}

/* The floor under the fan. */
.door .hall::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-0.1 * var(--ch));
    width: calc(3.2 * var(--cw));
    height: calc(0.5 * var(--ch));
    margin-left: calc(-1.6 * var(--cw));
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 68%);
    transform: translateZ(-80px);
}

.door .king,
.door .shade {
    position: absolute;
    left: 50%;
    bottom: calc(-0.28 * var(--ch));
    width: var(--cw);
    height: var(--ch);
    margin-left: calc(var(--cw) / -2);
    transform-origin: 50% 190%;
    transform: translateX(var(--x, 0px)) rotate(var(--a)) translateZ(var(--z));
    animation: dealt 1.1s cubic-bezier(0.2, 0.9, 0.25, 1) var(--d) both;
    will-change: transform;
}

/* A king is a button: he rises and comes to the front under the pointer, and a press opens his
   card's page (.king-page). The rise is on `translate`, apart from the fan's own transform. */
.door .king {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: var(--point);
    pointer-events: auto;
    translate: 0 0 0;
    transition: translate 0.2s ease-out;
}

.door .king:hover,
.door .king:focus-visible {
    translate: 0 calc(-0.07 * var(--ch)) 120px;
}

.door .king:focus-visible { outline: none; }
.door .king:focus-visible img { box-shadow: 0 0 0 2px var(--gold), 0 calc(0.03 * var(--ch)) calc(0.08 * var(--ch)) rgba(0, 0, 0, 0.55); }

.door .king img,
.door .shade span {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6% / 4.3%;
    box-shadow:
        0 calc(0.03 * var(--ch)) calc(0.08 * var(--ch)) rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 234, 180, 0.35) inset;
    animation: breathe 5.5s ease-in-out var(--b) infinite;
}

/* The lamp on the card: a soft gold sheen across its top. */
.door .king::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6% / 4.3%;
    background: linear-gradient(165deg, rgba(255, 240, 200, 0.28), rgba(255, 240, 200, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.22));
    pointer-events: none;
}

/* Fereydun, Iraj, Tur, Salm from the left, and Iraj in front of them all (Mahdi, 2026-10-14). */
.door .king.diamonds { --a: -31deg; --z: 10px; --d: 0.15s; --b: 0s; z-index: 1; }
.door .king.hearts { --a: -11deg; --z: 70px; --d: 0.32s; --b: 1.4s; z-index: 3; }
.door .king.spades { --a: 11deg; --z: 40px; --d: 0.49s; --b: 2.7s; z-index: 2; }
.door .king.clubs { --a: 31deg; --z: 10px; --d: 0.66s; --b: 4.1s; z-index: 1; }

/* Two turned cards at the ends of the fan, farther back and in the dark. */
.door .shade { --z: -90px; z-index: 0; }
.door .shade.left { --a: -50deg; --d: 0s; --b: 0.7s; }
.door .shade.right { --a: 50deg; --d: 0.8s; --b: 3.3s; }

.door .shade span {
    background: url("../art/banner-framed.jpg") center / cover;
    filter: brightness(0.55) saturate(0.8);
}

@keyframes dealt {
    from { transform: translateX(var(--x, 0px)) rotate(0deg) translateY(calc(1.3 * var(--ch))) translateZ(var(--z)); opacity: 0; }
    30% { opacity: 1; }
    to { transform: translateX(var(--x, 0px)) rotate(var(--a)) translateY(0) translateZ(var(--z)); opacity: 1; }
}

@keyframes breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-0.012 * var(--ch))); }
}

/* ---- the crown and the name ---- */

.door header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    width: 100%;
    pointer-events: none;
}

.door .hung {
    height: clamp(56px, 15vh, 170px);
    margin-bottom: clamp(-18px, -3.2vh, -8px);
    animation: dropped 1.3s cubic-bezier(0.3, 1.5, 0.45, 1) 0.1s both;
}

.door .hung img {
    display: block;
    height: 100%;
    width: auto;
    transform-origin: 50% 0;
    animation: swing 6s ease-in-out 1.3s infinite;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

@keyframes dropped {
    from { transform: translateY(-120%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes swing {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.2deg); }
}

.door > header .name {
    position: relative;
    width: min(84vw, 32vh * 2.355, 980px);
    aspect-ratio: 1100 / 467;
    transform: translate(calc(var(--px) * -1vmin), calc(var(--py) * -0.6vmin));
    transition: transform 0.12s linear;
}

.door .title {
    position: absolute;
    inset: 0;
    background: url("../art/door/title.png") center / contain no-repeat;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
    animation: named 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) 0.5s both;
}

/* A light sweeping over the letters every few seconds, cut to their shape. The cut stands still
   and only the light inside it moves, by a transform, so the browser slides it without painting
   anything again (it used to move a background under the mask, inside the title's shadow, and
   painted both on every frame of the sweep). */
.door .shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: url("../art/door/title.png") center / contain no-repeat;
    mask: url("../art/door/title.png") center / contain no-repeat;
}

.door .shine b {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 250, 225, 0.75) 49%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-100%);
    animation: shine 7s ease-in-out 2.4s infinite;
    will-change: transform;
}

@keyframes named {
    from { transform: scale(1.12); opacity: 0; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(2); }
    to { transform: scale(1); opacity: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)) brightness(1); }
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    28%, 100% { transform: translateX(100%); }
}

.door .purse {
    position: absolute;
    top: 2vh;
    right: 3vw;
    pointer-events: auto;
}

/* ---- the plaque ---- */

/* The sun of the kit, faint and turning, behind the plaque. */
.door .halo {
    display: none;
    position: relative;
    z-index: 2;
    pointer-events: none;
    background: url("../art/kit/sun.png") center / contain no-repeat;
    opacity: 0.14;
    animation: turning 120s linear infinite, lit 2s ease-out 0.8s both;
    mix-blend-mode: screen;
}

@keyframes turning {
    to { transform: rotate(360deg); }
}

@keyframes lit {
    from { opacity: 0; }
    to { opacity: 0.14; }
}

.door .panel {
    position: relative;
    z-index: 3;
    margin: auto 0 4.5vh;
    width: min(92vw, 600px);
    transform-origin: 50% 100%;
    animation: arrived 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) var(--wait, 0s) both;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(226, 182, 74, 0.18));
}

.door .panel.first { --wait: 1s; }

@keyframes arrived {
    from { transform: perspective(900px) rotateX(38deg) translateY(10%); opacity: 0; }
    to { transform: perspective(900px) rotateX(0deg) translateY(0); opacity: 1; }
}

.door h2 {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.door input {
    transition: filter 0.15s, transform 0.15s;
}

.door input:focus {
    transform: scale(1.02);
    filter: brightness(1.05) drop-shadow(0 0 10px rgba(226, 182, 74, 0.55));
}

/* The code is six figures set wide apart, as on a ticket (in every language: the figures do not join). */
.door.coded input,
[dir="rtl"] .door.coded input {
    font-size: 1.7em;
    letter-spacing: 0.45em !important;
    text-indent: 0.45em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--navy);
}

.door button.main {
    transition: transform 0.15s, filter 0.15s;
}

.door button.main:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.12) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.door button.main:not(:disabled):active {
    transform: translateY(1px) scale(0.98);
    filter: brightness(0.95);
}

.door footer {
    position: relative;
    z-index: 3;
}

/* The picture is laid the same way from either side; only the writing on the plaque turns. */
[dir="rtl"] .door { direction: ltr; }
[dir="rtl"] .door .panel,
[dir="rtl"] .door .rule,
[dir="rtl"] .door .cups-list,
[dir="rtl"] .door footer { direction: rtl; }

/* ---- the kings' table: the game's table in a gold frame, measured by the frame's own height ---- */

/* The frame and its line under it, one box. */
.door .play {
    flex: none;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.door .arena {
    flex: none;
    position: relative;
    z-index: 2;
    --fh: min(calc((100vw - 32px) * 9 / 16), 44vh);
    height: var(--fh);
    width: calc(var(--fh) * 16 / 9);
    --h: calc(var(--fh) / 100);
    --w: calc(var(--fh) * 16 / 9);
    margin: 1vh 0 0;
    border: 3px solid var(--gold);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5);
    animation: arrived 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) both;
    background: #10261d;
}

.door .arena .table {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
}

.door .rule {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.2em 0.8em;
    margin: 0.6vh 16px 0;
    color: var(--cream);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    font-size: clamp(13px, 2vh, 17px);
    text-align: center;
}

.door .rule strong { color: var(--gold); }
.door .rule .plain { color: var(--cream); font-size: 0.9em; opacity: 0.85; }

/* The plaque that brings the sign-in back from a table the whole of the window: small, in the
   top right, on the bare wood between the score and the partner's chair, measured as the table
   is (by --h), so it never lies on a chair or a card. */
.back-to-door {
    position: fixed;
    right: calc(25 * var(--h));
    top: calc(1.5 * var(--h));
    z-index: 6;
    padding: 3px 16px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(20, 32, 79, 0.92);
    color: var(--cream);
    font: 600 14px var(--face);
    cursor: var(--point);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* An upright window on a desk lays the table as a band across the middle: the plaque in the
   black above it. */
@media (orientation: portrait) {
    .back-to-door { right: 12px; top: 10px; }
}

/* A phone held upright lays the table on its side (play.css): the plaque turns with it, at the
   same spot of the table. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .back-to-door {
        right: calc(1.5 * var(--h));
        top: calc(100dvh - 25 * var(--h));
        transform-origin: 100% 0;
        transform: rotate(90deg);
    }
}

/* ---- the tournaments under the plaque ---- */

.door .cups-list {
    position: relative;
    z-index: 3;
    width: min(92vw, 600px);
    box-sizing: border-box;
    margin: 0 0 4vh;
    padding: 0 8px;
    color: var(--cream);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    font-size: clamp(13px, 2vh, 17px);
    animation: arrived 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) 0.3s both;
}

.door .cups-list h3 {
    margin: 0 0 0.3em;
    font-size: 1.15em;
    color: var(--gold);
    letter-spacing: 0.04em;
}

.door .cups-list .quiet { margin: 0; opacity: 0.75; }

.door .cups-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.door .cups-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 0.8em;
    padding: 0.35em 0.9em;
    border: 1px solid rgba(226, 182, 74, 0.55);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
}

.door .cups-list li strong { color: var(--cream); }
.door .cups-list li span { color: var(--gold); white-space: nowrap; }
.door .cups-list li small { grid-column: 1 / -1; opacity: 0.8; }
.door .cups-list li.playing { border-color: var(--red); }

/* The nearest one as a small poster: the cream of the tournaments page with its band on the top
   edge, the name, the pot, a gold bar for how full it is and a clock running to its start. */
.door .cups-list .bill {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.3em 0.8em;
    margin: 1.1em 0 0.6em;
    padding: 1.2em 1em 0.8em;
    border: 2px solid var(--gold);
    border-radius: 12px;
    background: linear-gradient(#f8ecce, #ecd6a6);
    color: var(--navy);
    text-shadow: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.door .cups-list .bill.playing { border-color: var(--red); }

.door .cups-list .band {
    grid-column: 1 / -1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: -2em;
    padding: 0.2em 1.1em;
    border: 1px solid var(--gold);
    border-radius: 6px;
    color: #f6ecd4;
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.door .cups-list .band svg { width: 0.7em; height: 0.7em; fill: var(--gold); }

.door .cups-list .named {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1.45em;
    line-height: 1.15;
    color: var(--navy);
}

.door .cups-list .pot {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    color: #8a5312;
}

.door .cups-list .fill {
    height: 8px;
    border-radius: 4px;
    background: rgba(22, 35, 79, 0.16);
    overflow: hidden;
}

.door .cups-list .fill i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0cf72, #c18d22);
}

.door .cups-list .count { font-size: 0.85em; color: #6b5332; white-space: nowrap; }

.door .cups-list .clock {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin-top: 0.2em;
    padding-top: 0.35em;
    border-top: 1px solid rgba(193, 141, 34, 0.55);
}

.door .cups-list .clock small { font-size: 0.85em; color: #6b5332; }
.door .cups-list .clock b { font-size: 1.35em; font-variant-numeric: tabular-nums; color: var(--navy); }

.door .cups-list button.ask {
    display: block;
    width: 100%;
    margin: 0.7em 0 0;
    padding: 0.45em 1em;
    border: 1px solid var(--gold);
    border-radius: 22px;
    background: rgba(20, 32, 79, 0.92);
    color: var(--cream);
    font-weight: 700;
    cursor: var(--point);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.door .cups-list button.ask:hover { filter: brightness(1.15); }

/* ---- the language, one chooser in the corner, and the sound beside it ---- */

.tongues select.chooser {
    appearance: none;
    -webkit-appearance: none;
    padding: 3px 28px 3px 14px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(246, 230, 192, 0.92) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%2314204f'/></svg>") no-repeat right 10px center;
    color: var(--navy);
    font: 14px var(--face);
    cursor: var(--point);
}

.tongues select.chooser:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---- the sign-in with the table live: the kings stand behind the frame, their crowns over it ---- */

.door.live .hung { height: clamp(44px, 10vh, 110px); }
.door.live > header .name { width: min(80vw, 22vh * 2.355, 760px); }

/* The language chooser moves to the top corner while the tournaments sit at the bottom. */
.door.live ~ .tongues { top: 10px; bottom: auto; }

/* The sign-in, a small button in the other top corner; its plaque drops under it when pressed. */
.door .signin-pill { display: none; }

.door.live .signin-pill {
    display: block;
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 7;
    padding: 3px 16px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(20, 32, 79, 0.92);
    color: var(--cream);
    font: 600 14px var(--face);
    cursor: var(--point);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.door.live .signin-pill:hover { filter: brightness(1.15); }
.door.live .signin-pill.open { background: var(--gold); color: var(--navy); }

.door.live .panel {
    position: fixed;
    top: 44px;
    right: 12px;
    z-index: 7;
    width: min(calc(100vw - 24px), 360px);
    margin: 0;
    padding: 30px 30px;
    gap: 10px;
    font-size: 14px;
    transform-origin: 90% 0;
    animation: opened 0.25s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.door.live .panel.folded { display: none; }
.door.live .panel h2 { font-size: 1.4em; }

/* The kings stand behind the tournaments while the table is live: a dark ground to read them on. */
.door.live .cups-list {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(8, 20, 14, 0.78);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

@keyframes opened {
    from { transform: translateY(-8px) scale(0.92); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
    /* The plaque has left the page for its corner: two columns that never lie over each other
       (Mahdi, 2026-10-14: «آیتم ها کمتر روی هم بیفتند و فضای خالی کمتری باشه»). On the left, one
       under the other, the crown and the name, the tournaments, and the four kings standing small
       at the foot; on the right the table, as big as the window lets it be, with its line. */
    .door.live {
        --side: clamp(240px, 25vw, 440px);
        grid-template-columns: var(--side) 1fr;
        grid-template-rows: auto 1fr;
        align-items: start;
        /* Four kings fanned across the column's width, at the most a third of the window's height. */
        --ch: clamp(100px, min(30vh, calc(var(--side) * 0.39)), 280px);
    }

    .door.live header { grid-area: 1 / 1; padding: 46px 12px 0; box-sizing: border-box; }
    .door.live .hung { height: clamp(34px, 8vh, 90px); margin-bottom: clamp(-14px, -2.4vh, -6px); }
    .door.live > header .name { width: min(calc(var(--side) - 24px), 26vh * 2.355); }

    .door.live .cups-list {
        grid-area: 2 / 1;
        align-self: start;
        justify-self: center;
        width: calc(var(--side) - 24px);
        margin: 2vh 0 0;
        font-size: clamp(12px, 1.8vh, 16px);
    }

    .door.live .play {
        grid-area: 1 / 2 / 3 / 3;
        align-self: center;
        justify-self: center;
        gap: 1vh;
    }

    /* As wide as its column lets it, and never taller than the window less its line. */
    .door.live .arena {
        --fh: min(calc((100vw - var(--side) - 32px) * 9 / 16), calc(100vh - 64px));
        margin: 0;
    }

    .door.live .rule { margin: 0; }

    /* The kings at the left column's foot, under the tournaments, never behind the table. */
    .door.live .hall { left: 0; right: auto; width: var(--side); }
    /* A fan held in the hand, every card turned about one point under them all, the faces about two
       thirds of a card apart so every king still shows his (Mahdi, 2026-10-14). */
    .door.live .king { bottom: calc(0.38 * var(--ch)); transform-origin: 50% 170%; }
    .door.live .king.diamonds { --a: -30deg; --z: 10px; }
    .door.live .king.hearts { --a: -10deg; --z: 40px; }
    .door.live .king.spades { --a: 10deg; --z: 25px; }
    .door.live .king.clubs { --a: 30deg; --z: 10px; }
    .door.live .hall::after { width: calc(3.4 * var(--cw)); margin-left: calc(-1.7 * var(--cw)); }
    .door.live .halo { display: none; }
    .door.live .panel { grid-area: auto; align-self: auto; justify-self: auto; width: min(calc(100vw - 24px), 360px); }
}

@media (orientation: portrait) {
    .door.live { overflow: auto; --ch: clamp(200px, 40vh, 560px); }
    /* Upright, the kings would stand behind the tournaments and the table's line: they step aside. */
    .door.live .stage { display: none; }
    .door.live .cups-list { margin-top: 3vh; }
}

/* A wide window, a desk or a phone on its side: the crown, the name and the plaque in the left
   part, the four kings standing whole in the right, a tighter fan on a nearer pivot so they fit. */
@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
    .door {
        display: grid;
        grid-template-columns: 40% 1fr;
        grid-template-rows: auto 1fr auto;
        align-items: start;
        --ch: clamp(240px, min(50vh, 27vw), 760px);
    }

    .door .hall { left: 40%; }
    .door .hall::after { bottom: calc(-0.3 * var(--ch)); width: calc(4 * var(--cw)); margin-left: calc(-2 * var(--cw)); }

    /* The pivot far below the floor: the kings stand nearly upright, side by side, the inner two
       whole and the outer two a third behind them. */
    .door .king {
        bottom: calc(-0.04 * var(--ch));
        transform-origin: 50% 400%;
    }

    .door .king.diamonds { --a: -13.6deg; }
    .door .king.hearts { --a: -5.9deg; }
    .door .king.spades { --a: 5.9deg; }
    .door .king.clubs { --a: 13.6deg; }
    .door .shade { display: none; }

    /* The crown and the name over the kings; the plaque alone on the left, a sun behind it. */
    .door header { grid-area: 1 / 2; }
    .door .hung { height: clamp(56px, 13vh, 140px); }
    .door > header .name { width: min(50vw, 34vh * 2.355, 900px); }

    .door .halo {
        display: block;
        grid-area: 1 / 1 / 3 / 2;
        align-self: center;
        justify-self: center;
        width: min(60vw, 118vh);
        aspect-ratio: 1;
        margin-left: 0;
    }

    .door .panel {
        grid-area: 1 / 1 / 3 / 2;
        align-self: center;
        justify-self: center;
        margin: 0;
        width: min(86%, 560px);
    }

    .door footer { grid-area: 3 / 1; justify-self: center; }
    .door .purse { right: auto; left: 3vw; }
}

/* A low window: the crown smaller, the plaque closer to the floor. */
@media (max-height: 520px) {
    .door .hung { height: 10vh; }
    .door .panel { margin-bottom: 2vh; }
}

/* A phone held upright: the name across the top, the kings tall behind the plaque, their heads
   over it. */
@media (orientation: portrait) {
    .door { --ch: clamp(240px, 50vh, 700px); }

    /* The fan on a near pivot, spilling off both edges, its feet behind the plaque. */
    .door .king, .door .shade {
        bottom: calc(0.15 * var(--ch));
        transform-origin: 50% 130%;
    }

    .door .hall::after { bottom: calc(0.1 * var(--ch)); }
    .door .king.diamonds { --a: -40deg; }
    .door .king.hearts { --a: -16deg; }
    .door .king.spades { --a: 16deg; }
    .door .king.clubs { --a: 40deg; }
    .door .shade.left { --a: -58deg; }
    .door .shade.right { --a: 58deg; }

    .door .hung { height: clamp(50px, 14vh, 150px); }
    .door > header .name { width: min(90vw, 26vh * 2.355); }

    .door .panel {
        font-size: clamp(14px, 2vh, 18px);
        padding: 3.5vh 6vw;
        margin-bottom: 9vh;
    }
}

/* ---- a king's house ---- */

/* The door's house page (HousePage, door.css) over the whole window: its four court cards and whose house it is,
   a card opening its own page. Laid out by the door's rules; only the ground is darker here, over a busy page. */
.kings-house {
    position: fixed;
    inset: 0;
    z-index: 40;
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

.kings-house .house,
.kings-house .card-page { background: rgba(13, 10, 5, 0.78); cursor: var(--point); }

/* Upright, the cards over the words, measured by the width. */
@media (orientation: portrait) {
    .kings-house { --h: min(0.9dvh, 1.5vw); --w: 100vw; }
    .kings-house .house,
    .kings-house .card-page { flex-direction: column; gap: calc(3 * var(--h)); }
    .kings-house .house .panel,
    .kings-house .card-page .panel { width: min(92vw, 560px); height: auto; padding: 5vw; }
    .kings-house .house .side,
    .kings-house .card-page .side { white-space: pre-wrap; }
}

/* A phone or a tablet (2026-10-14, measured as a phone: the main thread was busy nine tenths of
   every second with the table only waiting). The dust's keyframes read custom properties, so the
   browser works their style out again on every frame, and it was the largest single cost; the
   kings breathing, the crown swinging and the light over the name were the next. All of it
   stands still here; the kings are still dealt in and the plaque still arrives. */
@media (hover: none) and (pointer: coarse) {
    .door .dust { display: none; }
    .door .king img,
    .door .shade span,
    .door .hung img,
    .door .shine b { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .door *, .door *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
    .door .dust { display: none; }
    .door .hall, .door > header .name { transform: none; }
}

/* school.css */
/* The school (Schoolroom.razor): the game's school on its tile wall. Every length is a share of
   the screen's height (--h), laid by SchoolLayout as the game's TableLayout lays it. The page
   is laid left to right in every language, as the game's is; only the words read their own way. */

.school {
    --plaque: #f6e9c8;
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --gold-bright: #ffd75e;
    --on-table: #f0e5c9;
    background-position: center;
    background-size: cover;
    touch-action: none;
}

.school .veil {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 40, 0.08);
    pointer-events: none;
}

.school img { display: block; pointer-events: none; }

.school button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

/* The ring lies across the middle, as tall as the table and as wide as the screen lets it be.
   The school's room is a .table too, and the table laid from the corners takes the ring's
   centring away (play.css, .table .ring): the school still centres its own. */
.table.school .ring {
    top: calc(50 * var(--h));
    width: var(--ring-w);
    min-width: 0;
    transform: translate(-50%, -50%);
}

/* ---- a card on the table ---- */

.school .card { --wide: var(--card-w); }

.school .slot {
    position: absolute;
    width: var(--card-w);
    transform: rotate(var(--r, 0deg));
    transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1), top 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s ease, opacity 0.2s;
}

.school .slot.held { transition: none; cursor: var(--hold); }
.school .slot.pale { opacity: 0.4; }

.school .slot.glow .card {
    box-shadow: 0 0 0 calc(0.55 * var(--h)) var(--gold), 0 0 calc(2.4 * var(--h)) calc(0.6 * var(--h)) rgba(255, 215, 94, 0.75);
}

/* Lifted off the table while its name is said, over the cards that lie across it. */
.school .slot.air { transform: rotate(var(--r, 0deg)) translateY(calc(-1.6 * var(--h))) scale(1.1); }
.school .slot.air .card { box-shadow: 0 0 0 calc(0.55 * var(--h)) var(--gold-bright), 0 calc(1.6 * var(--h)) calc(3 * var(--h)) rgba(0, 0, 0, 0.45); }

/* Played from a chair: it comes out of that chair into its place in the diamond. */
.school .come.coming { animation: school-come 0.32s cubic-bezier(0.22, 1, 0.36, 1) var(--come-d) backwards; }

@keyframes school-come {
    from { transform: translate(var(--come-x), var(--come-y)) scale(0.85); opacity: 0; }
    12% { opacity: 1; }
    to { transform: none; }
}

/* A small jump with the card a little larger at its top (CardSlot.Hop). */
.school .hop.hopping { animation: school-hop var(--hop-t) cubic-bezier(0.3, 0.7, 0.4, 1) var(--hop-d) both; }

@keyframes school-hop {
    0% { transform: none; }
    40% { transform: translateY(calc(-2.2 * var(--hop-h) * var(--h))) scale(calc(1 + 0.05 * var(--hop-h))); }
    100% { transform: none; }
}

/* A wrong card shakes: three times each way and still. */
.school .shaker.shaking { animation: school-shake 0.35s linear; }

@keyframes school-shake {
    0%, 100% { transform: none; }
    14%, 43%, 71% { transform: rotate(4.6deg); }
    29%, 57%, 86% { transform: rotate(-4.6deg); }
}

/* Turned over where it lies: narrowing to nothing on its back and opening on its face. */
.school .turner { position: relative; }
.school .turner.turning { animation: school-turn var(--flip-t) ease-in-out var(--flip-d) both; }

.school .turned-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 6% / 4.3%;
    animation: school-back var(--flip-t) steps(1, end) var(--flip-d) both;
}

@keyframes school-turn {
    0% { transform: none; }
    50% { transform: scaleX(0); }
    100% { transform: none; }
}

@keyframes school-back {
    0% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---- the piles and places a card is taken to, and the hokm's mark ---- */

.school .disc { position: absolute; }

.school .disc.suit {
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--cream) 0 70%, var(--gold) 70% 73%, var(--cream) 73% 90%, var(--cobalt) 90%);
    box-shadow: 0 calc(0.4 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.3);
}

.school .disc.suit img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

.school .disc.spot {
    border-radius: calc(0.06 * var(--card-w));
    background: rgba(246, 230, 192, 0.35);
    border: 2px solid rgba(31, 63, 143, 0.5);
    box-sizing: border-box;
}

.school .disc.suit.red::after,
.school .disc.suit.green::after {
    content: "";
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    border: max(3px, calc(0.9 * var(--h))) solid var(--tint);
    background: color-mix(in srgb, var(--tint) 30%, transparent);
    box-sizing: border-box;
}

.school .disc.red { --tint: var(--red); }
.school .disc.green { --tint: #2e8b3a; }

.school .disc.lit::before,
.school .hokm-mark.lit::before,
.school .tricks-row.lit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 215, 94, 0.35);
    border: max(2px, calc(0.6 * var(--h))) solid var(--gold-bright);
}

.school .hokm-mark { position: absolute; }
.school .hokm-mark .disc { inset: 0; }

.school .hokm-mark span {
    position: absolute;
    left: -100%;
    right: -100%;
    bottom: 104%;
    text-align: center;
    font-weight: 700;
    font-size: calc(3 * var(--h));
    color: var(--on-table);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Lesson 8: the taken tricks as rows of backs, and the rounds as seven places a side. */
.school .tricks-row,
.school .rounds-row { position: absolute; }

.school .tricks-row i {
    position: absolute;
    bottom: 0;
    border-radius: calc(0.3 * var(--h));
    background: #1f4fa3;
    border: 2px solid var(--red);
    box-sizing: border-box;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 calc(1 * var(--h)) #1f4fa3, inset 0 0 0 calc(1.1 * var(--h)) rgba(226, 182, 74, 0.5);
}

.school .tricks-row.theirs i { border-color: var(--black); }

.school .tricks-row b,
.school .rounds-row b {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    font-size: calc(5 * var(--h));
    line-height: 1;
    color: var(--red);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.school .tricks-row.theirs b,
.school .rounds-row.theirs b { color: var(--on-table); }

.school .rounds-row i {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.5px solid var(--red);
    background: color-mix(in srgb, var(--red) 15%, transparent);
}

.school .rounds-row i.won { background: var(--red); }
.school .rounds-row.theirs i { border-color: var(--on-table); background: color-mix(in srgb, var(--on-table) 15%, transparent); }
.school .rounds-row.theirs i.won { background: var(--on-table); }

/* ---- the four kings ---- */

.school .king { position: absolute; }

.school .king .shaker {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.school .king .shaker.shaking { animation: school-nudge 0.45s linear; }

@keyframes school-nudge {
    0%, 100% { transform: none; }
    15% { transform: translateX(5%); }
    35% { transform: translateX(-4%); }
    55% { transform: translateX(3%); }
    75% { transform: translateX(-1.5%); }
}

.school .king .portrait {
    position: relative;
    height: 80%;
    aspect-ratio: 276 / 362;
    flex: none;
}

.school .king .face {
    position: absolute;
    left: 16%;
    top: 25%;
    width: 68%;
    height: 67%;
    border-radius: 50%;
    background: var(--cream) no-repeat;
    background-size: cover;
    background-position: 50% 20%;
}

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

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

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

/* The chair whose turn it is, or whose name is being said, in a gold light. */
.school .king.turn .portrait {
    filter: drop-shadow(0 0 calc(0.6 * var(--h)) var(--gold-bright)) drop-shadow(0 0 calc(1.2 * var(--h)) var(--gold-bright)) drop-shadow(0 0 calc(2.4 * var(--h)) rgba(255, 215, 94, 0.9));
}

.school .king .plaque {
    position: relative;
    height: 26%;
    aspect-ratio: 319 / 120;
    margin-top: -6%;
    flex: none;
}

.school .king .plaque img { width: 100%; height: 100%; }

.school .king .plaque span {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, on both sides, so the line stays centred. */
    padding-block: 0.25em;
    font-weight: 600;
    font-size: 1em;
    line-height: 1;
}

.school .king.place-0 .plaque span { font-size: calc(2.2 * var(--h)); }
.school .king.place-2 .plaque span { font-size: calc(1.6 * var(--h)); }
.school .king.place-1 .plaque span,
.school .king.place-3 .plaque span { font-size: calc(2.9 * var(--h)); }

/* ---- what Fereydun says ---- */

.school .bubble,
.school-round .bubble {
    position: absolute;
    box-sizing: border-box;
    padding: calc(2.2 * var(--h)) calc(2.4 * var(--h)) calc(1.6 * var(--h));
    background: var(--plaque);
    border: max(2px, calc(0.36 * var(--h))) solid var(--cobalt);
    border-radius: calc(1.5 * var(--h));
    box-shadow: 0 calc(0.4 * var(--h)) calc(1 * var(--h)) rgba(0, 0, 0, 0.35);
    color: var(--ink);
    z-index: 950;
}

.school .bubble.aside { border-color: var(--red); }

.school .bubble .tail {
    position: absolute;
    left: calc(-2.4 * var(--h));
    top: var(--tail-y);
    width: 0;
    height: 0;
    border-top: calc(1.6 * var(--h)) solid transparent;
    border-bottom: calc(1.6 * var(--h)) solid transparent;
    border-right: calc(2.6 * var(--h)) solid var(--plaque);
    transform: translateY(-50%);
}

.school .bubble[dir="rtl"] .tail { left: calc(-2.4 * var(--h)); }

.bubble .speaker {
    display: block;
    font-size: calc(2.4 * var(--h));
    letter-spacing: 0.04em;
    color: var(--red);
    line-height: 1.2;
}

.bubble p,
.school .measure {
    margin: calc(0.4 * var(--h)) 0 0;
    font-size: calc(3 * var(--h));
    line-height: 1.32;
}

.bubble p mark {
    background: rgba(255, 215, 94, 0.55);
    color: inherit;
    border-radius: calc(0.75 * var(--h));
    box-shadow: 0 0 0 calc(0.3 * var(--h)) rgba(255, 215, 94, 0.55);
}

.bubble small {
    display: block;
    margin-top: calc(0.4 * var(--h));
    text-align: end;
    font-size: calc(2.1 * var(--h));
    color: var(--ink-soft);
}

.school .measure {
    position: absolute;
    left: -9999px;
    top: 0;
    visibility: hidden;
    margin: 0;
}

/* The round key on the bubble's corner away from the speaker's name: pause, go on, again. */
.bubble .voice-key {
    position: absolute;
    right: calc(1.6 * var(--h));
    top: calc(-2.3 * var(--h));
    width: calc(6.9 * var(--h));
    height: calc(6.9 * var(--h));
}

.bubble[dir="rtl"] .voice-key { right: auto; left: calc(1.6 * var(--h)); }
.bubble .voice-key svg { width: 100%; height: 100%; display: block; }
.bubble .voice-key .ground { fill: var(--navy); }
.bubble .voice-key .head { fill: var(--on-navy); }
.bubble .voice-key .ring { fill: none; stroke: var(--on-navy); stroke-width: 6; }
.bubble .voice-key:hover { filter: brightness(1.2); }
.bubble .voice-key:active { opacity: 0.6; }

/* ---- the lesson's name, its discs, and the buttons ---- */

.school .lesson-name {
    position: absolute;
    left: calc(29.5 * var(--h));
    top: calc(3 * var(--h));
    font-weight: 700;
    font-size: calc(3.4 * var(--h));
    line-height: 1.2;
    color: var(--on-table);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    /* A deep Persian letter reaches about a quarter of a size past a tight line, above and below: room for it, given back by the margin so the line does not move. */
    padding-block: 0.25em;
    margin-top: -0.25em;
}

.school .progress {
    position: absolute;
    left: calc(29.5 * var(--h));
    top: calc(8.1 * var(--h));
    display: flex;
    gap: calc(1 * var(--h));
}

.school .progress i {
    width: calc(2.2 * var(--h));
    height: calc(2.2 * var(--h));
    border-radius: 50%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--on-table);
}

.school .progress i.done { background: var(--gold); }
.school .progress i.now { border-width: 2.5px; }

/* The kit's enamel (Kit.Button): ivory, or navy for the main one. */
.school-kit {
    --bh: calc(7.8 * var(--h));
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    height: var(--bh);
    min-width: calc(20 * var(--h));
    padding: 0 calc(5 * var(--h));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: calc(3 * var(--h));
    line-height: 1;
    color: var(--paper-ink, #16234f);
    white-space: nowrap;
}

.school-kit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.school-kit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--bh) * 72 / 230);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--plain, url("../art/kit/flat/button-plain.png")) center / auto 100% no-repeat;
}

.school-kit.main { color: var(--on-navy, #f6ecd4); }
.school-kit.main::before { border-image: var(--main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--bh) * 0.518) stretch; }
.school-kit.main::after { width: calc(var(--bh) * 72 / 222); background-image: var(--main, url("../art/kit/flat/button-main.png")); }
.school-kit:hover { filter: brightness(1.12); }
.school-kit:active { padding-top: max(4px, calc(var(--bh) * 0.07)); }
.school-kit:active::after { visibility: hidden; }
.school-kit:active::before { border-image-source: var(--plain-down, url("../art/kit/flat/button-plain-down.png")); transform: translateY(max(2px, calc(var(--bh) * 0.035))); filter: brightness(0.9); }
.school-kit.main:active::before { border-image-source: var(--main-down, url("../art/kit/flat/button-main-down.png")); }
.school-kit.small { --bh: calc(7.2 * var(--h)); min-width: calc(17 * var(--h)); padding: 0 calc(3.5 * var(--h)); }

.school-kit.back {
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(3 * var(--h));
    width: calc(24 * var(--h));
    padding: 0 calc(var(--bh) * 0.25) 0 calc(var(--bh) * 0.9);
    z-index: 960;
}

.school-kit.back .arrow {
    position: absolute;
    left: calc(var(--bh) * 0.3);
    top: 50%;
    width: calc(var(--bh) * 0.5);
    height: calc(var(--bh) * 0.5);
    transform: translateY(-50%);
    fill: var(--paper-ink, #16234f);
    stroke: var(--paper-ink, #16234f);
    stroke-width: 9;
}

.school .again {
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(13 * var(--h));
    display: flex;
    gap: calc(2.5 * var(--h));
    z-index: 960;
}

.school .words-button {
    position: absolute;
    right: calc(3 * var(--h));
    bottom: calc(3 * var(--h));
    z-index: 960;
}

.school .yes-no {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(6 * var(--h));
    z-index: 940;
}

.school .yes-no .school-kit { min-width: calc(20 * var(--h)); }

/* The lesson's name across the table as it begins, fading as it goes. */
.school .banner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(70%, calc(110 * var(--h)));
    height: calc(20 * var(--h));
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(1.4 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/panel.png") 160 fill / calc(5 * var(--h)) stretch;
    color: var(--ink-soft);
    text-align: center;
    pointer-events: none;
    z-index: 970;
}

.school .banner.first { height: calc(26 * var(--h)); }
.school .banner small { font-size: calc(2.8 * var(--h)); }
.school .banner strong { font-size: calc(5.2 * var(--h)); color: var(--cobalt); }

/* The words card: every word the school uses, one line each, over a dimmed table. */
.school .words-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(80%, calc(130 * var(--h)));
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: calc(4 * var(--h)) calc(6 * var(--h)) calc(4 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/panel.png") 160 fill / calc(5 * var(--h)) stretch;
    color: var(--ink);
    z-index: 990;
}

.school.words-open::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(13, 10, 5, 0.55);
    z-index: 980;
}

.school .words-card h2 {
    margin: 0 0 calc(2 * var(--h));
    text-align: center;
    font-size: calc(3.9 * var(--h));
    color: var(--cobalt);
}

.school .words-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(1.2 * var(--h)) calc(3 * var(--h));
    margin: 0;
}

.school .words-card dt { font-weight: 700; color: var(--red); font-size: calc(3 * var(--h)); }
.school .words-card dd { margin: 0; font-size: calc(2.6 * var(--h)); line-height: 1.25; }

/* ---- the ninth lesson, at the real table ---- */

.school-round,
.first-ask {
    --plaque: #f6e9c8;
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --gold-bright: #ffd75e;
}

.school-round button,
.first-ask button {
    font: inherit;
    font-weight: 800;
    color: var(--paper-ink, #16234f);
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.school-round .school-kit,
.first-ask .school-kit { padding: 0 calc(5 * var(--h)); color: #16234f; }
.school-round .school-kit.main,
.first-ask .school-kit.main { color: #f6ecd4; }
.school-round .school-kit.back { padding: 0 calc(var(--bh) * 0.25) 0 calc(var(--bh) * 0.9); font-size: calc(3 * var(--h)); }
.school-round .bubble { font-family: var(--face); }

/* The way back stands under the top left chair, at the lessons' own left: the corner is the
   chair's, and between it and the score line there is no room for it on a squarer screen. The
   chair's foot is the corners table's (Corners.Plate): 1.2% + 1.53 chair heights down, a chair
   a quarter of the height, a fifth on a screen nearer square than 16:10. Measured from the
   table's own top, which an upright window lays as a band across the middle. */
.school-round .school-kit.back {
    position: fixed;
    left: calc(3 * var(--h));
    top: calc(50dvh - 50 * var(--h) + 41.5 * var(--h));
    z-index: 4000;
}

@media (orientation: landscape) and (max-aspect-ratio: 8/5) {
    .school-round .school-kit.back { top: calc(34 * var(--h)); }
}

.school-round .hold {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 5000;
}

.school-round .bubble.middle {
    left: 50%;
    top: calc(20 * var(--h));
    width: min(calc(80 * var(--h)), 50vw);
    transform: translateX(-50%);
}

.school-round .bubble .seal {
    display: block;
    width: calc(18 * var(--h));
    margin: calc(1.5 * var(--h)) auto 0;
    filter: drop-shadow(0 calc(0.5 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.35));
}

.school-round .ways {
    position: fixed;
    left: 50%;
    top: calc(52 * var(--h));
    transform: translateX(-50%);
    display: flex;
    gap: calc(3 * var(--h));
    z-index: 4000;
}

.school-round .ways .school-kit { min-width: calc(30 * var(--h)); height: calc(8 * var(--h)); --bh: calc(8 * var(--h)); }

/* Fereydun's star over the card he would play, breathing (the table's hand, Table.razor). */
.hand .held .star {
    position: absolute;
    left: 50%;
    top: calc(-8.4 * var(--h));
    width: calc(7.6 * var(--h));
    height: calc(7.6 * var(--h));
    transform: translateX(-50%);
    pointer-events: none;
    animation: school-breathe 2.1s ease-in-out infinite;
    overflow: visible;
}

.hand .held .star circle { fill: rgba(226, 182, 74, 0.35); }
.hand .held .star polygon { fill: var(--gold); stroke: var(--ink); stroke-width: 0.8; }

@keyframes school-breathe {
    0%, 100% { transform: translateX(-50%) scale(0.88); }
    50% { transform: translateX(-50%) scale(1.06); }
}

/* ---- the ways in: the sign-in's line under the kings' table, and the first evening's question ---- */

.door .rule .to-school {
    font: inherit;
    padding: 0.25em 1em;
    border: 2px solid var(--gold);
    border-radius: 2em;
    background: rgba(20, 32, 79, 0.85);
    color: var(--cream);
    cursor: var(--point);
}

.door .rule .to-school b { color: var(--gold); }
.door .rule .to-school span { opacity: 0.85; font-size: 0.9em; }
.door .rule .to-school:hover { filter: brightness(1.15); }

.first-ask {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: rgba(13, 10, 5, 0.55);
}

.first-ask .ask {
    box-sizing: border-box;
    width: min(92vw, calc(110 * var(--h)));
    padding: calc(5 * var(--h)) calc(6 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/panel.png") 160 fill / calc(5 * var(--h)) stretch;
    text-align: center;
    color: var(--ink);
}

.first-ask h2 { margin: 0 0 calc(4 * var(--h)); font-size: calc(4.4 * var(--h)); color: var(--cobalt); }
.first-ask .ask > div { display: flex; justify-content: center; gap: calc(3 * var(--h)); flex-wrap: wrap; }
.first-ask button { font: inherit; border: 0; background: none; cursor: var(--point); }

/* lost.css */
/* The page for an address the site does not know (Pages/NotFound.razor): the table's felt, three
   cards dealt from above one after another and turned, 4, the coin, 4, and the way back on the
   kit's navy enamel. */

.lost {
    --u: min(1dvh, 0.85vw);
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(2.2 * var(--u));
    padding: calc(4 * var(--u));
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    color: var(--cream);
    background:
        radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255, 205, 120, 0.22), transparent 70%),
        radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(0, 0, 0, 0.72) 100%),
        url("../art/table/ground.jpg") center / cover;
    user-select: none;
    -webkit-user-select: none;
}

html.night .lost {
    background:
        radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255, 205, 120, 0.16), transparent 70%),
        radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(0, 0, 0, 0.65) 100%),
        linear-gradient(rgba(5, 9, 23, 0.62), rgba(5, 9, 23, 0.62)),
        url("../art/table/ground.jpg") center / cover;
}

/* ---- the three, dealt ---- */

.lost-row {
    display: flex;
    align-items: center;
    gap: calc(3 * var(--u));
    margin-bottom: calc(2 * var(--u));
    perspective: calc(160 * var(--u));
    direction: ltr;
}

.lost-deal {
    --wide: calc(19 * var(--u));
    --h: var(--u);
    --tilt: 0deg;
    --lift: 0px;
    --delay: 0s;
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    transform: translateY(var(--lift)) rotate(var(--tilt));
    animation: lost-deal 620ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--delay) backwards;
    transition: transform 180ms;
}

.lost-deal.one { --tilt: -7deg; --lift: calc(1.5 * var(--u)); --delay: 0.15s; }
.lost-deal.two { --delay: 0.5s; }
.lost-deal.three { --tilt: 6deg; --lift: calc(1.2 * var(--u)); --delay: 0.85s; }
.lost-deal.again { --delay: 0s; }

.lost-deal:hover { transform: translateY(calc(var(--lift) - 1.4 * var(--u))) rotate(var(--tilt)) scale(1.03); }

@keyframes lost-deal {
    from {
        opacity: 0;
        transform: translate(calc(var(--from-x, 0) * var(--u)), -70dvh) rotate(calc(var(--tilt) - 160deg)) scale(0.7);
    }
    18% { opacity: 1; }
    to { transform: translateY(var(--lift)) rotate(var(--tilt)); }
}

.lost-deal.one { --from-x: 24; }
.lost-deal.three { --from-x: -24; }

/* A card lands on its back and turns over in its own place. */
.lost-turn {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    animation: lost-turn 560ms cubic-bezier(0.3, 0.1, 0.25, 1) calc(var(--delay) + 520ms) forwards;
}

.lost-turn .card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) rgba(0, 0, 0, 0.5);
}

.lost-turn .lost-rear {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

/* The side away from the eye is also put out of sight at the half turn, when the card stands on
   its edge: a picture of the page (js/shot.js) draws it flat, where a hidden back face is not
   hidden. */
.lost-turn .lost-front { visibility: hidden; animation: lost-side 1ms steps(1, start) calc(var(--delay) + 800ms) forwards; }
.lost-turn .lost-rear { animation: lost-gone 1ms steps(1, start) calc(var(--delay) + 800ms) forwards; }

@keyframes lost-gone {
    from { visibility: visible; }
    to { visibility: hidden; }
}

@keyframes lost-side {
    from { visibility: hidden; }
    to { visibility: visible; }
}

@keyframes lost-turn {
    from { transform: rotateY(180deg) scale(1); }
    50% { transform: rotateY(90deg) scale(1.1); }
    to { transform: rotateY(0deg) scale(1); }
}

/* The nought: the game's coin, spun as it falls and settling flat. */
.lost-coin {
    position: relative;
    width: calc(17 * var(--u));
    aspect-ratio: 1;
    animation: lost-spin 1300ms cubic-bezier(0.15, 0.6, 0.3, 1) var(--delay) both;
}

.lost-coin img {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 calc(1 * var(--u)) calc(1.6 * var(--u)) rgba(0, 0, 0, 0.55));
}

.lost-coin::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 248, 220, 0.55) 50%, transparent 65%) -150% 0 / 300% 100% no-repeat;
    mix-blend-mode: screen;
    animation: lost-gleam 1.6s ease-in-out calc(var(--delay) + 1.4s) both;
    pointer-events: none;
}

@keyframes lost-spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(1440deg); }
}

@keyframes lost-gleam {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}

/* ---- what it says ---- */

.lost h1 {
    margin: 0;
    font-size: calc(5.6 * var(--u));
    font-weight: 800;
    line-height: 1.25;
    color: var(--gold);
    text-shadow: 0 calc(0.3 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.7);
    animation: lost-rise 500ms ease-out 1.5s both;
}

.lost p {
    margin: 0;
    max-width: calc(110 * var(--u));
    font-size: calc(3 * var(--u));
    line-height: 1.5;
    color: #efe2c2;
    text-shadow: 0 calc(0.2 * var(--u)) calc(0.6 * var(--u)) rgba(0, 0, 0, 0.7);
    animation: lost-rise 500ms ease-out 1.65s both;
}

@keyframes lost-rise {
    from { opacity: 0; transform: translateY(calc(2 * var(--u))); }
    to { opacity: 1; transform: none; }
}

/* ---- the way back, on the kit's navy enamel (as Kit.Button draws it) ---- */

.lost .lost-home {
    --bh: calc(9 * var(--u));
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    height: var(--bh);
    min-width: calc(34 * var(--u));
    margin-top: calc(2 * var(--u));
    padding: 0 calc(9 * var(--u));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: calc(3.3 * var(--u));
    line-height: 1;
    color: var(--on-navy, #f6e6c0);
    text-decoration: none;
    white-space: nowrap;
    animation: lost-rise 500ms ease-out 1.8s both;
}

.lost .lost-home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--bh) * 0.518) stretch;
}

.lost .lost-home::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--bh) * 72 / 222);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--main, url("../art/kit/flat/button-main.png")) center / auto 100% no-repeat;
}

.lost .lost-home:hover { filter: brightness(1.15); }
.lost .lost-home:active { padding-top: max(4px, calc(var(--bh) * 0.07)); }
.lost .lost-home:active::after { visibility: hidden; }

.lost .lost-home:active::before {
    border-image-source: var(--main-down, url("../art/kit/flat/button-main-down.png"));
    transform: translateY(max(2px, calc(var(--bh) * 0.035)));
    filter: brightness(0.9);
}

/* A narrow window: the three a little smaller, the words as large as they can be read. */
@media (max-aspect-ratio: 1 / 1) {
    .lost { --u: min(0.8dvh, 1.5vw); }
    .lost h1 { font-size: calc(6.5 * var(--u)); }
    .lost p { font-size: calc(4 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
    .lost-deal, .lost-turn, .lost-coin, .lost-coin::after, .lost h1, .lost p, .lost .lost-home { animation-duration: 1ms; animation-delay: 0s; }
}

/* FocusOnNavigate puts the focus on the heading; it needs no ring. */
.lost h1:focus { outline: none; }

/* shot.css */
/* A picture of the page (js/shot.js): the screen blinks white for a moment, as a camera does. */

.shot-flash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #fff;
    pointer-events: none;
    animation: shot-flash 360ms ease-out forwards;
}

@keyframes shot-flash {
    from { opacity: 0.85; }
    to { opacity: 0; }
}

/* night.css */
/* Night for every page (Night.cs), turned by the root's "night" (js/night.js). The game's own
   night: the painted grounds under a lapis veil drawn in code, the papers lapis with cream words
   and the same matte ochre edge, the ivory enamel turned to lapis and the navy up to cobalt (the
   turned pictures come in as --plain, --main and the rest), and what is painted bright a little
   lower. Words on the lapis paper are the paper's ink (cream), never navy: navy is a fill, cobalt
   at night. A painted cream plate keeps its cream and its day's ink. The door, play online and the
   table keep their own night rules; this is every other page. */

html.night {
    --night-veil: rgba(5, 9, 23, 0.62);
    --night-paper: #18213f;
    --night-edge: #9a7f4c;
    --night-card: #212c50;
    --night-tab: #2a3762;
    --night-ink: #f0e5c9;
    --night-soft: #c2b28f;
    --night-cream: #eee2c3;
    --night-cobalt: #9fb5ec;
    --night-fill: #34509c;
    --night-crimson: #e46a5e;
    --night-red: #ff9a8a;
    --night-line: rgba(238, 226, 195, 0.28);
    --night-painted: brightness(0.84);
    color-scheme: dark;
}

/* ---- the papers and inks, on every page's own root ---- */

html.night .mypage,
html.night .bazaar,
html.night .ladder,
html.night .cuphall,
html.night .pairs,
html.night .patoq {
    --paper: var(--night-paper);
    --edge: var(--night-edge);
    --card-paper: var(--night-card);
    --tab-paper: var(--night-tab);
    --title-paper: var(--night-tab);
    --paper-ink: var(--night-cream);
    --ink: var(--night-ink);
    --ink-soft: var(--night-soft);
    --soft: var(--night-soft);
    --cobalt: var(--night-cobalt);
    --navy: var(--night-fill);
    --crimson: var(--night-crimson);
    --red: var(--night-red);
    --red-ink: var(--night-red);
    --warning: #f0a070;
    --won: #7fcfa8;
    color: var(--ink);
}

/* ---- the painted grounds under the veil ---- */

html.night .mypage { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/me/ground.jpg") center / cover; }
html.night .mypage.sashpage { background-image: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/me/badges.jpg"); }
html.night .mypage .backs-page,
html.night .mypage .tables-page { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/me/ground.jpg") center / cover; }
html.night .mypage .cards-page { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/grounds/cards.jpg") center / cover; }
html.night .bazaar { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/bazaar/ground.jpg") center / cover; }
html.night .ladder { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/ladder/ground.jpg") center / cover; }
html.night .cuphall { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/cups/ground.jpg") center / cover; }
html.night .pairs { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/grounds/pairs.jpg") center / cover; }
html.night .patoq { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/patoq/ground.jpg") center / cover; }

/* ---- my page ---- */

/* The settings' side tabs: a lapis a little lighter than the card, not grey. */
html.night .mypage .section {
    background: var(--night-tab) !important;
    border-color: var(--night-line) !important;
    color: var(--night-soft) !important;
}
html.night .mypage .section:not(:disabled):hover { background: #34427a !important; }
html.night .mypage .section.chosen { border-color: rgba(238, 226, 195, 0.45) !important; color: var(--night-cream) !important; }
html.night .mypage .section.chosen::before { background: var(--night-cream); }
html.night .mypage .rows-card { border-color: rgba(238, 226, 195, 0.45); }

/* A table's own ground on my tables page: the same veil as any table's. */
html.night .mypage .tb-ground::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 23, 0.7);
    pointer-events: none;
}
html.night .mypage .bk-wall { filter: var(--night-painted); }

/* ---- the bazaar ---- */

html.night .bazaar .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .bazaar .tab { background: var(--night-tab); border-color: rgba(238, 226, 195, 0.5); }
html.night .bazaar .card { background: var(--night-card); border-color: var(--night-line); }
html.night .bazaar .panel h2 i,
html.night .bazaar .panel h2 i::after { background: #c9a24a; }
html.night .bazaar .rarity.epic { color: #c89ad6; }
html.night .bazaar .rarity.legendary { color: #e0b45a; }
html.night .bazaar .pill.plain { color: var(--night-cream); }
html.night .bazaar .tab.chosen span { color: var(--night-cream); }
html.night .bazaar .back-pill,
html.night .bazaar .purse { color: var(--night-cream); }

/* ---- the leaderboard ---- */

html.night .ladder .back { color: var(--night-cream); }
html.night .ladder .back .arrow { fill: var(--night-cream); stroke: var(--night-cream); }
html.night .ladder .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .ladder .plate { background: var(--night-card); border-color: var(--night-line); }
html.night .ladder .plate.lit { border-color: var(--night-cream); }
html.night .ladder .tab .face { background: var(--night-tab); border-color: rgba(238, 226, 195, 0.5); }
html.night .ladder .tab.on .face { border-color: var(--night-cream); }
html.night .ladder .tab .name { color: var(--night-ink); }
html.night .ladder .tab .name.bold { color: var(--night-cobalt); }
html.night .ladder .how,
html.night .ladder .quiet,
html.night .ladder .gift,
html.night .ladder .avatar.empty { color: var(--night-soft); }
html.night .ladder .chips .all,
html.night .ladder .pill { color: var(--night-cream); }
html.night .ladder .mine .bar { background: rgba(238, 226, 195, 0.14); }
html.night .ladder .lines .track { stroke: rgba(238, 226, 195, 0.2); }
html.night .ladder .road .band { background: rgba(33, 44, 80, 0.55); border-color: var(--night-line); }
html.night .ladder .road .band.reached { background: rgba(42, 55, 98, 0.9); border-color: rgba(238, 226, 195, 0.4); }
html.night .ladder .gift .tick { stroke: var(--night-ink); }
html.night .ladder .take b { color: var(--night-ink); }
html.night .ladder .medal .shade { background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.45) 68%, rgba(0, 0, 0, 0.18) 84%, rgba(0, 0, 0, 0) 100%); }
html.night .ladder .news { background: rgba(24, 33, 63, 0.95); border-color: var(--night-edge); color: var(--night-cobalt); }
html.night .ladder .news.bad { color: var(--night-red); }
html.night .ladder .list { scrollbar-color: var(--night-edge) transparent; }

/* ---- the tournaments ---- */

html.night .cuphall .back,
html.night .cuphall .purse { color: var(--night-cream); }
html.night .cuphall .back .arrow { fill: var(--night-cream); stroke: var(--night-cream); }
html.night .cuphall .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .cuphall .plate { background: var(--night-card); border-color: var(--night-edge); }
html.night .cuphall .gold-line { color: var(--night-ink); }
html.night .cuphall .press.plain { color: var(--night-cream); }
html.night .cuphall .stripe.odd { background: rgba(159, 181, 236, 0.07); }
html.night .cuphall .stripe.mine { background: rgba(159, 181, 236, 0.2); }

/* ---- pairs ---- */

html.night .pairs .lacquer,
html.night .pairs .foot { background-color: var(--night-paper); border-color: var(--night-edge); }

/* ---- the circle, its friends and its talk (PatoqView.cs): laid as the leaderboard is ---- */

html.night .patoq .back,
html.night .patoq .kit,
html.night .patoq .pill { color: var(--night-cream); }
html.night .patoq .kit.main,
html.night .patoq .pill.on { color: #f6ecd4; }
html.night .patoq .kit.danger { color: var(--night-red); }
html.night .patoq .back .arrow { fill: var(--night-cream); stroke: var(--night-cream); }
html.night .patoq .field { color: var(--night-ink); }
html.night .patoq .field::placeholder { color: rgba(194, 178, 143, 0.75); }
html.night .patoq .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .patoq .plate { background: var(--night-card); border-color: var(--night-line); }
html.night .patoq .plate.lit { border-color: var(--night-cream); }
html.night .patoq button.tablet:not(:disabled):hover .plate { background: var(--night-tab); }
html.night .patoq .medal .shade { background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.45) 68%, rgba(0, 0, 0, 0.18) 84%, rgba(0, 0, 0, 0) 100%); }
html.night .patoq .tab .face { background: var(--night-tab); border-color: rgba(238, 226, 195, 0.5); }
html.night .patoq .tab.on .face { border-color: var(--night-cream); }
html.night .patoq .tab .name,
html.night .patoq .line .name,
html.night .patoq .setting .ink { color: var(--night-ink); }
html.night .patoq .tab .name.bold,
html.night .patoq .heading,
html.night .patoq .line .name.mine,
html.night .patoq .setting .code,
html.night .patoq .chatline .named,
html.night .patoq .chat .bar .named,
html.night .patoq .chat .who { color: var(--night-cobalt); }
html.night .patoq .plaque-words,
html.night .patoq .quiet,
html.night .patoq .soft,
html.night .patoq .line .where,
html.night .patoq .line .label,
html.night .patoq .chatline .last,
html.night .patoq .chat .when,
html.night .patoq .chat .note,
html.night .patoq .chat .bubble.down { color: var(--night-soft); }
html.night .patoq .rule { background: rgba(201, 162, 74, 0.4); }
html.night .patoq .news { background: rgba(24, 33, 63, 0.95); border-color: var(--night-edge); color: var(--night-cobalt); }
html.night .patoq .news.bad,
html.night .patoq .chat .foot.trouble { color: var(--night-red); }
html.night .patoq .outline { border-color: var(--night-line); }
html.night .patoq .chatline { background: var(--night-card); border-color: var(--night-line); }
html.night .patoq .chatline.lit { border-color: var(--night-cream); }
html.night .patoq .chatline:hover { background: var(--night-tab); }
html.night .patoq .chat .bubble { background: var(--night-card); border-color: var(--night-line); color: var(--night-ink); }
html.night .patoq .chat .mine .bubble { background: var(--night-fill); border-color: var(--night-fill); color: #f7ecd2; }
html.night .tongues button { background: rgba(33, 44, 80, 0.9); color: var(--night-cream); }
html.night .tongues button.chosen { background: var(--night-fill); color: #f6ecd4; }
html.night .tongues select.chooser { background-color: rgba(33, 44, 80, 0.92); color: var(--night-cream); }

/* ---- the door's house and card pages (the door's own night turns the rest of it) ---- */

html.night :is(.menu, .kings-house, .table) .card-page .panel,
html.night :is(.menu, .kings-house) .house .panel {
    background: var(--night-paper);
    border-color: var(--night-edge);
    color: var(--night-ink);
    --tile-ink: var(--night-ink);
    --tile-soft: var(--night-soft);
    --tile-cobalt: var(--night-cobalt);
    --paper-ink: var(--night-cream);
    --ink: var(--night-ink);
    --ink-soft: var(--night-soft);
    --cobalt: var(--night-cobalt);
}
html.night :is(.menu, .kings-house, .table) .card-page .side,
html.night :is(.menu, .kings-house) .house .side { color: var(--night-soft); }

/* ---- the king's decrees: the paper lapis, each decree a lighter card, the painted scroll as it is ---- */

html.night .menu .letter-card { background-color: var(--night-paper); border-color: var(--night-edge); color: var(--night-ink); }
html.night .menu .letter-card .banner h2 { color: #1f3f8f; }
html.night .menu .letter-card h3,
html.night .menu .letter-card .coins b { color: var(--night-cobalt); }
html.night .menu .letter-card .decree { background: var(--night-card); border-color: rgba(226, 182, 74, 0.6); }
html.night .menu .letter-card .motif { background: var(--night-tab); }
html.night .menu .letter-card .bar { background: rgba(238, 226, 195, 0.14); }
html.night .menu .letter-card .waiting,
html.night .menu .letter-card .decree.paid .sentence,
html.night .menu .letter-card .count,
html.night .menu .letter-card .paid,
html.night .menu .letter-card .foot { color: var(--night-soft); }
html.night .menu .letter-card .foot.trouble { color: var(--night-red); }
html.night .menu .letter-card .swap { background: var(--night-fill); }

/* ---- the school: the table's veil over its floor; Fereydun's words on the lapis paper; the
   kings' painted name plates keep their cream and their day's ink ---- */

html.night .school .veil { background: rgba(5, 9, 23, 0.7); }
html.night .school,
html.night .school-round,
html.night .first-ask {
    --plaque: var(--night-paper);
    --red: var(--night-red);
    --ink: var(--night-ink);
    --ink-soft: var(--night-soft);
    --cobalt: var(--night-cobalt);
    --paper-ink: var(--night-cream);
}
html.night .school .bubble,
html.night .school-round .bubble { border-color: var(--night-fill); }
html.night .school .king .plaque span { color: #16234f; }
html.night .school-round .school-kit:not(.main),
html.night .first-ask .school-kit:not(.main) { color: var(--night-cream); }

/* The kit's painted cream panel (the school's banners and word cards, the first question, the
   sign-in) is the lapis paper at night: the same ochre edge, drawn in code. */
html.night .school .banner,
html.night .school .words-card,
html.night .first-ask .ask,
html.night .door .panel {
    border-image: none;
    background: var(--night-paper);
    border: max(2px, calc(0.45 * var(--h, 1vh))) solid var(--night-edge);
    border-radius: calc(1.6 * var(--h, 1vh));
}
html.night .school .ring,
html.night .school .king .plaque img { filter: var(--night-painted); }

/* ---- the sign-in: the panel lapis (above), the field turned (--field), cream words ---- */

html.night .door .panel { color: var(--night-ink); }
html.night .door .panel :is(h2, h2 *) { color: var(--night-cream); }
html.night .door .panel :is(p, small, label) { color: var(--night-soft); }
html.night .door .panel button.plain { color: var(--night-cream); }
html.night .door .panel .trouble { color: var(--night-red); }
html.night .door input,
html.night .door.coded input { color: var(--night-ink); }
html.night .door input::placeholder { color: var(--night-soft); }