/* veil.css */
/* The veil: a plain cover over a page whose pictures are still coming (js/veil.js). The curtain's
   felt with the coin small in the middle and a bead of gold running round it, nothing more. */

#veil {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse 120% 80% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6)),
        #10261d;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

#veil.down {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

#veil .seal {
    position: relative;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
}

#veil svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#veil circle {
    fill: none;
    stroke-width: 2.6;
}

#veil .track {
    stroke: rgba(226, 182, 74, 0.2);
}

#veil .run {
    stroke: #e2b64a;
    stroke-linecap: round;
    stroke-dasharray: 22 78;
    filter: drop-shadow(0 0 3px rgba(255, 220, 140, 0.8));
    animation: veil-run 1.1s linear infinite;
}

@keyframes veil-run {
    to { stroke-dashoffset: -100; }
}

#veil img {
    width: 58px;
    height: 58px;
}

/* A phone held upright has every page on its side: the coin lies the way they do. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    #veil img { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
    #veil .run {
        animation-duration: 2.4s;
    }
}

/* 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;
    /* Two quick taps are two presses at the table, never a zoom (Mahdi, 2026-10-26: «دبل کلیک در سایت
       حکم زوم میکنه تو سایز موبایل»). The page is laid to the screen and is never zoomed (index.html). */
    touch-action: manipulation;
}

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

/* The sound switch (SoundSwitch.razor): a speaker with its waves while the game sounds, crossed
   while it is silent. Each place lays it out and colours it; this is only the mark. */
.sound-switch { position: relative; padding: 0; border: 0; background: none; cursor: var(--point, pointer); }
.sound-switch svg { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-switch svg .fill { fill: currentColor; stroke: none; }
.sound-switch .cross { display: none; }
.sound-switch.off .waves { display: none; }
.sound-switch.off .cross { display: inline; }

/* play.css */
:root {
    --cream: #f6e6c0;
    --gold: #e2b64a;
    --cobalt: #1f3f8f;
    --navy: #14204f;
    --ink: #2a1d10;
    --ink-soft: #6b5332;
    --red: #bf2a26;
    --black: #1c1712;
    /* The inks printed on a card face: never the page's, which a night page lightens for its dark
       paper (night.css), so a number card's index keeps its red on every page. */
    --card-red: #bf2a26;
    --card-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(--card-black);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.card .rank.red {
    background: var(--card-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 pips' frame: the whole card. */
.card .pips { position: absolute; inset: 0; }

/* A court's own index is painted; the drawn one, and the plate, are for the big index alone. */
.card .plate, .card .big-only { display: none; }

/* A joker (shelem with jokers, 2026-11-06), drawn in code on the pack's blank face since none is
   painted: a big star in its colour with the word under it, and the star alone in the index
   corner, no suit's mark. Every measure is a share of the card's width (a container of its own),
   so it reads the same in the hand, in the trick, held large under a finger and on a phone. */
.card .joker {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    color: var(--card-black);
    pointer-events: none;
}
.card .joker.red { color: var(--card-red); }
.card .joker .star,
.card .joker small,
.card .joker .corner {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-style: normal;
    white-space: nowrap;
}
.card .joker .star { top: 46%; font-size: 60cqi; font-weight: 400; }
.card .joker small { top: 77%; font-size: 12cqi; font-weight: 800; letter-spacing: 0.06em; }
.card .joker .corner { left: 13%; top: 10.5%; font-size: 15cqi; z-index: 1; }
.card .joker .corner.turned { left: 87%; top: 89.5%; transform: translate(-50%, -50%) rotate(180deg); }
html.big-index .card .joker .corner { left: 17%; top: 15.5%; font-size: 24cqi; }
html.big-index .card .joker .corner.turned { left: 83%; top: 84.5%; }

/* ---- cards easier to read (readable.js, my page's "large index" and "card size") ----

   The big index: the rank and the mark about twice their size on a plate of the card's paper in
   the corner, with an ink line round it, the way a large-index pack is printed for weak eyes. The
   pips draw back from the plate, and a painting's own index lies under it. The mirror pack has
   the plate in both corners. Only with the switch on, a phone's trick too (Mahdi, 2026-11-07:
   «عدد در حالت عادی بردر نداشته باشه فقط لارج ایندکس باشه»). */

html.big-index .card .plate {
    display: block;
    position: absolute;
    left: 3%;
    top: 2.5%;
    width: 28%;
    height: 26%;
    box-sizing: border-box;
    border-radius: 12% / 10%;
    background: #f7e6c2;
    /* A hairline barely darker than the paper, so the plate melts into the card (Mahdi, 2026-11-06:
       «اون خط دور خال رو خیلی کمرنگ کن بیشتر بلد کن نامحسوس»). */
    border: 1px solid rgba(28, 23, 18, 0.12);
    box-shadow: 0 0 calc(0.4 * var(--h)) calc(0.15 * var(--h)) rgba(247, 230, 194, 0.85);
}

html.big-index .card .big-only { display: block; }

html.big-index .card .rank { left: 17%; top: 11.5%; width: 24%; height: 14%; }
html.big-index .card .mark { left: 17%; top: 23%; height: 9%; }

html.big-index .card .plate.turned { left: auto; right: 3%; top: auto; bottom: 2.5%; }
html.big-index .card .rank.turned { left: 83%; top: 88.5%; }
html.big-index .card .mark.turned { left: 83%; top: 77%; }

html.big-index .card .pips { inset: 16% 13% 4%; }
html.big-index .card .pip { height: 10.5%; }

/* The card drawn larger is the layout's (Corners.Card: my page's "card size", and under a finger as
   large as thirteen fit): every card of the hand is laid by it in pixels, so nothing here. */

/* Holding a card of my hand (hand.js, peek): it rises large over the row to be read, and goes
   back as the finger lifts. Any card, not only one I may play. */
.hand .held.peek { z-index: 25; }

/* Drawn again at the larger size, not scaled as a picture: scaled, the painting and the index came
   up blurred (Mahdi, 2026-11-03: «فقط یخورده تار شده»). */
.hand .held.peek > .flier > .card {
    /* Never taller than 55% of the screen: a phone's card is large already (CardSlot.HeldTallest). */
    --wide: min(190%, calc(55 * var(--h) * 5 / 7));
    position: absolute;
    left: calc(50% - var(--wide) / 2);
    bottom: 34%;
    box-shadow: 0 calc(1.2 * var(--h)) calc(3 * var(--h)) rgba(0, 0, 0, 0.55);
}

.hand .held.peek.muted .card { filter: none; }

/* The same at the tables whose cards are laid by their boxes (pasur, haft khabis, shelem: .pc.mine,
   pasur.js hold), and my hand there stands up out of the fan as hokm's row does (Mahdi, 2026-11-05:
   «همه مثل حکم»): a card I may play a little, more under the pointer, a lifted one most. The
   schools lay their own lifts. */
/* A card lying in the trick held still (lore.js, TRICK): it grows where it lies, about its middle,
   and settles back as the finger lifts (Mahdi, 2026-11-06). */
.trick .laid[data-read], .table .pc.trick[data-read] { z-index: 25; }

.trick .laid[data-read] .card, .table .pc.trick[data-read] > .card {
    --wide: min(190%, calc(55 * var(--h) * 5 / 7));
    position: absolute;
    left: calc(50% - var(--wide) / 2);
    top: 50%;
    translate: 0 -50%;
    width: var(--wide);
    height: auto;
    box-shadow: 0 calc(1.2 * var(--h)) calc(3 * var(--h)) rgba(0, 0, 0, 0.55);
}

.table .pc.mine.peek { z-index: 25; }

.table .pc.mine.peek > .card {
    --wide: min(190%, calc(55 * var(--h) * 5 / 7));
    position: absolute;
    left: calc(50% - var(--wide) / 2);
    bottom: 34%;
    width: var(--wide);
    height: auto;
    box-shadow: 0 calc(1.2 * var(--h)) calc(3 * var(--h)) rgba(0, 0, 0, 0.55);
}

.table:not(.pasur-school) .pc.mine {
    --lift: 0px;
    translate: 0 calc(-1 * var(--lift));
    transition: translate 0.16s cubic-bezier(0.33, 1, 0.68, 1);
}

.table:not(.pasur-school) .pc.mine.playable { --lift: calc(1.7 * var(--h)); }

@media (hover: hover) {
    .table:not(.pasur-school) .pc.mine.playable:hover:not(.lifted) { --lift: calc(3.1 * var(--h)); }
}

.table:not(.pasur-school) .pc.mine.lifted { --lift: calc(4.7 * var(--h)); }

.table:not(.pasur-school) .pc.mine.carried { transition: none; }

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

/* A place's own cloth inside the band, laid first so the band lies over its edge. */
.ring .cloth {
    position: absolute;
    background-repeat: repeat;
    background-position: center;
}

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

/* Laid by the ring's own size (Ring.razor, Laid): each repeat's size and where the band's rows
   start are worked out there, so the run is only repeated along. */
.ring .run.laid {
    background-repeat: repeat-x;
}

/* The joins made soft: a strip of the run carried on over each arm's tip, fading out from the run. */
.ring .run.seam-in {
    -webkit-mask-image: linear-gradient(to right, transparent, #000);
    mask-image: linear-gradient(to right, transparent, #000);
}

.ring .run.seam-out {
    -webkit-mask-image: linear-gradient(to right, #000, transparent);
    mask-image: linear-gradient(to right, #000, transparent);
}

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

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

/* A limited table's living thing (js/life.js), laid about the medallion's middle. */
.ring .life {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* What travels round the band (Saturn's moons, the glints) is drawn over the whole ring. */
.ring canvas.life.whole-ring {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

/* Gold dust over the whole table: js/life.js lays it from the ring out to the table's edges. */
.ring canvas.life.whole-table {
    transform: none;
}

/* A piece that turns about the medallion's middle at its own pace (Ring.razor says how long a turn
   takes), its longer side as wide as its box, as the game's TableLife.Turning lays it. */
.ring img.life.turning {
    object-fit: contain;
    animation: life-turn linear infinite;
}

@keyframes life-turn {
    from { transform: translate(-50%, -50%) rotate(0turn); }
    to { transform: translate(-50%, -50%) rotate(1turn); }
}

/* The watch's balance wheel: a second from one side to the other and back the next, eased as a
   sine eases (TableLife: 2.2 sin(πt)). */
.ring img.life.swinging {
    object-fit: contain;
    animation: life-swing 1s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

@keyframes life-swing {
    from { transform: translate(-50%, -50%) rotate(-2.2rad); }
    to { transform: translate(-50%, -50%) rotate(2.2rad); }
}

.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; } }
@container plates (width < 111px) { .card .pl-zahhak .pl-big { display: none; } .card .pl-zahhak .pl-small { display: block; } }
@container plates (width < 111px) { .card .pl-oghab .pl-big { display: none; } .card .pl-oghab .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 canvas beneath the cards and one over them, each
   laid over the whole table by the script (where it sits and how big), as the game's under pass
   and its flourish layer over every card. */
.trick .flourish-under,
.trick .flourish-over {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

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

/* A card a family takes in hand (the scissors cut it, the dice shake it; Flourish.Hold): the card
   itself is veiled and copies of it are laid over its place in pieces, clipped and moved. */
.flier[data-veiled] > .card { visibility: hidden; }

.flier > .fl-piece {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    pointer-events: none;
    z-index: 2;
}

.flier > .fl-piece > .card { --wide: 100%; width: 100%; height: 100%; box-shadow: none; }

/* The seal of the family a card of my hand wears: matte gold wax under the index, completely still.
   Never on a mark (Mahdi, 2026-11-04): its top is below the corner's small mark, a court's painted
   index and the big index's plate (28.5%), and at 22% wide it ends before the left row of pips
   (FlourishSeal.On in the game, the same). */
.hand .seal {
    position: absolute;
    left: 3%;
    top: 30%;
    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;
}

/* A fan, my hand or the trick while a card comes off the top of the pack into it (motion.js overThePack). */
[data-over-pack] {
    z-index: 2;
}

.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 {
    transform-origin: 50% 100%;
    transition: filter 0.15s, transform 0.14s cubic-bezier(0.33, 1, 0.68, 1);
}

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

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

.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, as wide as the game's (CardSlot.Rim), and no shadow under it. It is a layer over the
   back: an outline on the card itself was painted under the back's picture, which is placed on
   its own, so no pile showed its side at all (Mahdi, 2026-10-15). */
.pile-card:is(.red, .black) .card { box-shadow: none; }
.pile-card:is(.red, .black) .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: calc(0.045 * var(--pile-w, calc(8.6 * var(--h))) + 1px) solid var(--red);
    border-radius: inherit;
    pointer-events: none;
}
.pile-card.black .card::after { border-color: var(--black); }

/* At night the black side keeps its black with a thin light rim, or its piles sink into the dark table. */
.table.night .pile-card.black .card::after {
    --rim: max(1px, calc(0.012 * var(--pile-w, calc(8.6 * var(--h)))));
    outline: var(--rim) solid rgba(238, 226, 195, 0.8);
    outline-offset: calc(-1 * var(--rim));
}

/* Mine to carry and to tap round; somebody else's on its way under their finger rides over the rest. */
/* Out of sight until piles.js has put it: a table opened from the fan shows no pile in its corner. */
.pile-card:not([data-laid]) { visibility: hidden; }

.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. */

/* While something my buttons open stands (a tray, the sort panel), a tap anywhere else closes it and does nothing more. */
.opens-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; }
}

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

/* 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, a
   hand laid by boxes (.pc.mine, 20) and a card held up to be read too. Weightier than door.css's
   own z-index, which comes later and used to win and leave it at 11. */
html .table .card-page { z-index: 60; }

/* A chair opens its player's card (TableView.ShowProfile). The card is my page's (mine.css),
   laid over the table with the table showing through its veil, and turned with the table on an
   upright phone. */
.table .seat { cursor: var(--point); }

.table .mypage.seat-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 55;
}

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

/* Chosen before the house has said it is the hakem's turn (House.NamingKept): the choice is lit and
   the rest are let down until it is said. Another press still changes it. */
.chooser.kept button:not(.chosen) { opacity: 0.45; }
.chooser.kept button.chosen { filter: brightness(1.12) drop-shadow(0 0 calc(var(--ch) * 0.03) #e2b64a); }
/* 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: 29.5%;
    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);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ch) * 0.012);
}

/* Each round's jewel before its name, the picture the board will then show (2026-10-20). */
.chooser .calls button img { height: 60%; pointer-events: none; }

.table .told strong img {
    height: 1.5em;
    vertical-align: middle;
    margin-inline-end: 0.35em;
}

.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;
    margin: 0;
    font-family: inherit;
    cursor: var(--point);
}

/* At a table that plays naras and saras the sign starts with their jewel, a little larger than the
   pill and standing over its start as a medallion on a ribbon (2026-10-20). */
.naras-sign.jewelled { padding-inline-start: 1.8em; }

.naras-sign.jewelled img {
    position: absolute;
    inset-inline-start: -1.2em;
    top: 50%;
    height: 140%;
    transform: translateY(-50%);
    pointer-events: none;
}

div.naras-sign { cursor: default; pointer-events: none; }

/* A tap on the board tells naras and saras at a table that plays them (TableView._narasTap). */
.table .board.told-tap { cursor: var(--point); }

/* What naras and saras are, or what the crown is (NarasToldView, CrownToldView): the kit's panel,
   a cobalt title, each thing named in bold with its line under it in the soft ink, the round being
   played (or the hakem) in red. The room is the screen between its two edges: the spacer stands
   the panel where it belongs and gives way when the panel would run off the foot (the game's
   clamp). A tap anywhere puts it away. */
.table .told-off {
    position: absolute;
    inset: 0;
    z-index: 43;
}

.table .told-room {
    position: absolute;
    z-index: 44;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.table .told-room > i { flex: 0 1 auto; min-height: 0; }
.table .told-room.over { justify-content: flex-end; }

.table .told {
    position: relative;
    flex: none;
    pointer-events: auto;
    padding: calc(var(--t) * 0.9) var(--in) calc(var(--t) * 1.3);
    display: flex;
    flex-direction: column;
    text-align: start;
    cursor: var(--point);
}

.table .told b {
    font-size: var(--t);
    font-weight: 700;
    color: var(--cobalt);
    text-align: center;
    line-height: 1.2;
    margin-bottom: calc(var(--t) * 0.35);
}

.table .told strong {
    font-size: var(--n);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    margin-top: calc(var(--s) * 0.45);
}

.table .told strong.playing { color: var(--red); }
.table .told strong.who { text-align: center; text-wrap: balance; margin: 0 0 calc(var(--s) * 0.5); }

.table .told p {
    margin: calc(var(--s) * 0.15) 0 calc(var(--s) * 0.35);
    font-size: var(--s);
    line-height: 1.3;
    color: var(--ink-soft);
}

.table .told p.foot { text-align: center; margin-top: calc(var(--s) * 0.5); }
.table .told p.lead { text-align: center; margin: 0 0 calc(var(--s) * 0.2); }

/* A round with no hokm told by its thirteen cards in their order, the highest first, overlapped as
   a hand is held so each index shows (Mahdi, 2026-11-09: «از ترتیب کارت استفاده بشه»), small
   («کارتها کوچکتر نشون بده»): a card is 2.8 times the line's type wide, each the next 0.55 of a
   card along. A round is one line, its name and then its cards («نوشته و کارتها تو یه ردیف
   باشند»): two columns, the names as wide as the widest so the cards line up, the whole in the
   middle of the panel. */
.table .told .rounds {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--s) * 1.2);
    row-gap: calc(var(--s) * 0.7);
    margin: calc(var(--s) * 0.35) 0 calc(var(--s) * 0.45);
}

.table .told .rounds strong { margin: 0; }

.table .told .order { display: flex; }

.table .told .order .card {
    --wide: calc(var(--s) * 2.8);
    box-shadow: calc(-0.1 * var(--s)) 0 calc(0.3 * var(--s)) rgba(0, 0, 0, 0.35);
}

.table .told .order .card + .card { margin-left: calc(var(--s) * 2.8 * -0.45); }
.table.night .told { --red: #ff9a8a; }

/* My tournament, heard at another table (TableCupCall): under the board, the kit's main enamel to go to it, and the note before it plain. */
.table .cup-sign {
    position: absolute;
    z-index: 70;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 0 1.4em;
    border: max(1px, 0.12em) solid var(--gold, #c9a24a);
    border-radius: 999px;
    background: var(--cobalt);
    color: var(--cream);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    display: grid;
    place-items: center;
    line-height: 1;
    cursor: pointer;
}

.table .cup-sign.soon {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cobalt);
}

/* 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 .sign { left: 50%; top: 50%; font-size: 62cqh; font-weight: 400; color: var(--ink-soft); }

/* 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. The hairline is the card's outline. The halo is two lights behind the card, on the
   flier's two pseudo-elements: the lamp at its lowest and the lamp at its fullest, each a fixed
   shadow, and the breath is one fading out as the other fades in, so only their opacity moves and
   the browser composites it without painting (2026-10-16). The breathing shadow itself used to be
   animated, which repainted every card I may play on every frame; the two cross-fade on a curve
   that meets in the middle at the brightness the one breathing shadow had half way. */
.table .hand .held { container-type: inline-size; }
.table .hand .held.muted .card { filter: none; }

.table .hand .held.legal .card,
.table .trick .laid.middle.takes .card {
    box-shadow: none;
    outline: max(2px, 2.5cqw) solid rgb(255, 230, 140);
    outline-offset: calc(-1 * max(2px, 2.5cqw));
}

.table .hand .held.legal .flier::before,
.table .hand .held.legal .flier::after,
.table .trick .laid.middle.takes .flier::before,
.table .trick .laid.middle.takes .flier::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6% / 4.3%;
    z-index: -1;
    pointer-events: none;
    animation: lamp-low 2.62s infinite alternate;
}

.table .hand .held.legal .flier::before,
.table .trick .laid.middle.takes .flier::before { box-shadow: 0 0 14cqw 1cqw rgba(255, 209, 89, 0.55); }

.table .hand .held.legal .flier::after,
.table .trick .laid.middle.takes .flier::after {
    box-shadow: 0 0 20cqw 3cqw rgba(255, 209, 89, 0.85);
    animation-name: lamp-high;
}

@keyframes lamp-low {
    from { opacity: 1; animation-timing-function: ease-in; }
    50% { opacity: 0.55; animation-timing-function: ease-out; }
    to { opacity: 0; }
}

@keyframes lamp-high {
    from { opacity: 0; animation-timing-function: ease-in; }
    50% { opacity: 0.55; animation-timing-function: ease-out; }
    to { opacity: 1; }
}

/* 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 * 2.5);
    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); }
/* The card that takes the trick as it stands wears the lamp a card I may play wears (above, with the hand). */

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

/* Mine has its near corner turned up (js/fold.js, the game's CardSlot fold): the back has that
   corner cut out from a third down its left side to nine tenths along its foot, the five-cornered
   card throws the shadow, and the paper turned over lies on a canvas a tenth bigger every way. */
.table .trick .laid.early.mine .flier { filter: drop-shadow(0 calc(0.4 * var(--h)) calc(0.5 * var(--h)) rgba(0, 0, 0, 0.4)); }
.table .trick .laid.early.mine .flier > .card { box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 100%, 0 33%); }

.table .trick .laid.early .fold {
    position: absolute;
    left: -10%;
    top: calc(-10% * 5 / 7);
    width: 120%;
    height: calc(100% + 20% * 5 / 7);
    z-index: 3;
    pointer-events: none;
}

.table.night .flier > .fold { filter: url(#night-cards); }

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

/* A limited table's copy on a brass plaque nailed over the middle of the ring's band at its foot
   (Ring.razor, the game's Tables.Plaque, 2026-11-05): as tall as 0.072 of the ring, the number cut
   in with a lip of light, a nail at each end. */
.ring .plaque {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(var(--ring-high) * 0.072);
    padding: 0 calc(var(--ring-high) * 0.054);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
    direction: ltr;
    font-weight: 700;
    font-size: calc(var(--ring-high) * 0.0446);
    line-height: 1;
    color: rgba(61, 38, 10, 0.92);
    text-shadow: 1px 1px 0 rgba(255, 237, 179, 0.75);
    background: linear-gradient(rgb(226, 194, 124) 0%, rgb(210, 168, 88) 42%, rgb(196, 152, 72) 100%);
    border: max(1px, calc(var(--ring-high) * 0.0043)) solid rgb(84, 54, 18);
    border-radius: calc(var(--ring-high) * 0.019);
    box-shadow: inset 0 0 0 1px rgba(255, 235, 168, 0.5), 0 calc(var(--ring-high) * 0.004) calc(var(--ring-high) * 0.009) rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 3;
}

.ring .plaque::before,
.ring .plaque::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--ring-high) * 0.024);
    width: calc(var(--ring-high) * 0.0146);
    height: calc(var(--ring-high) * 0.0146);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 35% 35%, rgb(255, 237, 179) 0 28%, rgb(84, 54, 18) 42%);
}

.ring .plaque::after { left: auto; right: calc(var(--ring-high) * 0.024); transform: translate(50%, -50%); }

/* Night at the table (Night.cs): the table's ground and ring stay as they are by day, no veil and
   no shade on them; the cards still cream, dimmer and a shade warmer; what else is painted bright
   (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-filters { position: absolute; }

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

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

/* The sort panel's rows at night: the cream pills turned to a deeper lapis under the cream ink
   (on the cream the cream words could not be read), the lit row a shade brighter with its gold
   edge, the pale track of a switch that is off a cream haze on the lapis. */
.table.night .sort-panel .switch {
    background: rgba(9, 14, 33, 0.55);
    border-color: rgba(154, 127, 76, 0.4);
}

.table.night .sort-panel .switch.on {
    background: #26325c;
    border-color: rgba(226, 182, 74, 0.75);
}

.table.night .sort-panel .switch i {
    background: rgba(240, 229, 201, 0.16);
    border-color: rgba(240, 229, 201, 0.4);
}

.table.night .sort-panel .switch.on i { background: var(--gold); border-color: #9e701f; }

.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 .chooser .middle-call::before,
.table.night .lead-run::before { border-image-source: var(--kit-main, url("../art/kit/flat/button-main.png")); }

/* Saras, naras and tak naras at night: the ivory turned to lapis under the cream ink, as the
   game's plain button is (Kit.Button); on the ivory the cream could not be read. */
.table.night .chooser .calls button { background-image: var(--kit-plain-raised, url("../art/kit/button-plain.png")); }

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

/* The fan of the tables this page plays at once (TableTabs, 2026-10-29): over my own face at a
   table; with none it first stands by the right edge, on the door under the four houses, and floats: js/fan.js
   carries it to wherever it is wanted and says how far by --door-fan-x and --door-fan-y. Everything is a share of the height, --u; the words
   a share of the card, which is its own container, so a card of any size reads the same. The one
   on the screen dark and standing up out of the fan, a gold band on a tournament's, and the
   turn's clock in a gold line round the one whose turn is mine, red for its last ten seconds. */
.table-fan {
    --u: var(--h);
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    font-family: var(--face);
}

.table-fan.at-door { position: fixed; }

.fan-float { position: absolute; inset: 0; }
.at-door .fan-float { translate: var(--door-fan-x, 0) var(--door-fan-y, 0); }

/* With the door on the screen it first stands over Play online, under the row of games (his word,
   2026-11-02), smaller than elsewhere. Its foot, 51 of the height down and 19 in from the right edge
   as the fan is laid, is brought to Play online's top: the door's own measures, door.css. */
body:has(.menu) .at-door .fan-float {
    --pt: min(calc(var(--w) / 1672), calc(var(--h) * 100 / 941));
    --spare: calc(100 * var(--h) - 941 * var(--pt));
    --up: min(calc(var(--spare) * 0.57), calc(51 * var(--pt)));
    --shift: calc(var(--up) + 684 * var(--pt) + (var(--spare) - var(--up)) * 0.6 - 51 * var(--h));
    inset: var(--shift) calc(50% - 19 * var(--h)) calc(-1 * var(--shift)) calc(19 * var(--h) - 50%);
    transform-origin: calc(100% - 19 * var(--h)) calc(51 * var(--h));
    scale: 0.62;
}
.at-door .fan-card { touch-action: none; cursor: grab; }
.at-door .fan-float.carried .fan-card { cursor: grabbing; }

.fan-card {
    position: absolute;
    box-sizing: border-box;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3%;
    padding: 0;
    border: 0;
    border-radius: calc(var(--tall) * 0.072);
    outline: max(1.5px, calc(var(--tall) * 0.018)) solid var(--gold);
    outline-offset: calc(max(1.5px, calc(var(--tall) * 0.018)) * -1);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.1;
    text-align: start;
    cursor: pointer;
    pointer-events: auto;
    font: inherit;
    box-shadow: 0 calc(var(--tall) * 0.02) calc(var(--tall) * 0.07) rgb(0 0 0 / 35%);
    transform: rotate(var(--turn));
    transition: transform 0.18s ease-out;
}

.fan-card:hover { transform: rotate(var(--turn)) translateY(calc(var(--tall) * -0.08)); }
.fan-card.shown { transform: rotate(var(--turn)) translateY(calc(var(--tall) * -0.12)); background: var(--cobalt); color: var(--cream); }
.fan-card.over { opacity: 0.6; }

/* A game going on another wire of mine: the card stands apart until it is pressed. */
.fan-card.elsewhere { outline: calc(var(--tall) * 0.012) dashed var(--gold); outline-offset: calc(var(--tall) * -0.03); }

.fan-card b,
.fan-card em { max-width: 88cqw; margin-inline: 6cqw; font-style: normal; font-weight: normal; white-space: nowrap; overflow: hidden; }
.fan-card b { margin-top: 15cqw; font-size: 19cqw; }
.fan-card b.long { font-size: 13.7cqw; line-height: 1.1; white-space: normal; }
.fan-card em { margin-top: 3cqw; font-size: 20cqw; }
/* A shelem table with the two jokers, said small under the game's name (2026-11-06). */
.fan-card .fan-note { max-width: 88cqw; margin-inline: 6cqw; margin-top: -2cqw; font-size: 11cqw; white-space: nowrap; overflow: hidden; opacity: 0.8; }
.fan-card .fan-kind { position: absolute; right: 6cqw; bottom: 6cqw; width: 38cqw; height: 38cqw; object-fit: contain; }

/* A tournament's card wears a gold band across its top, read at any size. */
.fan-card.shown::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 10%;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--gold);
}

/* A small card (a phone's) keeps the game and the score, larger, and lets the kind go. */
@container (max-height: 110px) {
    .fan-card b { font-size: 24cqw; }
    .fan-card b.long { font-size: 17.3cqw; }
    .fan-card em { font-size: 26cqw; }
}

.fan-card .clock {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--gold);
    stroke-width: 5;
    stroke-linecap: round;
    animation: fan-beat 0.83s ease-in-out infinite alternate;
}

.fan-card.late .clock { stroke: var(--red); animation-duration: 0.42s; }

@keyframes fan-beat {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* The table plays my cards there (sat out): a small red dot in the card's corner. */
.fan-card.away::after {
    content: "";
    position: absolute;
    top: 8cqw;
    right: 8cqw;
    width: 12cqw;
    height: 12cqw;
    border-radius: 50%;
    background: var(--red);
}

.table-fan-note {
    position: absolute;
    left: 50%;
    top: calc(var(--u) * 20);
    transform: translateX(-50%);
    display: grid;
    gap: calc(var(--u) * 0.8);
    padding: calc(var(--u) * 1.6) calc(var(--u) * 4);
    border: 2px solid var(--gold);
    border-radius: calc(var(--u) * 2);
    background: var(--cream);
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
}

.table-fan-note b { font-size: calc(var(--u) * 3.2); font-weight: normal; }
.table-fan-note span { font-size: calc(var(--u) * 2.5); color: var(--ink-soft); }

html.night .fan-card { background: #18213f; color: #eee2c3; }
html.night .fan-card.shown { background: #34509c; }
html.night .table-fan-note { background: #18213f; color: #eee2c3; }
html.night .table-fan-note span { color: #c2b28f; }

/* On a phone held upright the door lies on its side, and the fan with it. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    html .table-fan.at-door {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

/* The page a table's button beside the way out opens (RulesSheet). */
.table .rules-button { font-family: var(--face); font-size: calc(var(--h) * 3.6); line-height: 1; color: var(--cream); }

.rules-sheet {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
    font-family: var(--face);
}
.rules-page {
    box-sizing: border-box;
    width: min(92%, calc(var(--h) * 130));
    padding: calc(var(--h) * 3) calc(var(--h) * 5);
    border: 2px solid var(--edge, #9a7f4c);
    border-radius: calc(var(--h) * 3);
    background: var(--paper, #efe4c8);
    color: var(--ink);
}
.rules-page h3 { margin: 0 0 calc(var(--h) * 2); font-size: calc(var(--h) * 4.2); font-weight: normal; text-align: center; }
.rules-page p { margin: calc(var(--h) * 2) 0 0; font-size: calc(var(--h) * 3.2); text-align: center; }
.rules-row { display: flex; align-items: center; gap: calc(var(--h) * 1.5); min-height: calc(var(--h) * 7.5); }
.rules-row img { width: calc(var(--h) * 6.5); height: calc(var(--h) * 6.5); object-fit: contain; }
.rules-seal { position: relative; flex: none; display: grid; place-items: center; width: calc(var(--h) * 6.5); height: calc(var(--h) * 6.5); }
.rules-seal img { position: absolute; inset: 0; }
.rules-seal i { position: relative; font-style: normal; font-weight: 700; font-size: calc(var(--h) * 1.9); line-height: 1; color: #c41e24; }
.rules-row .card { --wide: calc(var(--h) * 6.5); }
.rules-row b { flex: 0 0 24%; font-size: calc(var(--h) * 3.2); font-weight: normal; }
.rules-row span { flex: 1; font-size: calc(var(--h) * 3); color: var(--ink-soft); }

/* Every table this page plays stays on it; one is seen (Tables). */
.live-table { display: contents; }
.live-table.away { display: block; position: fixed; inset: 0; visibility: hidden; pointer-events: none; }

/* For the one look lore.js takes under a right click or a held press: every card takes the pointer,
   the backs that let taps through to the table too (lore.js, cardUnder). */
.lore-probe .card,
.lore-probe .card *,
.lore-probe :is(.khabis-pack, .pasur-pack),
.lore-probe :is(.khabis-pack, .pasur-pack) * { pointer-events: auto !important; }

/* The game's sound switch (SoundSwitch) in the small player, before its play and its note: the
   player's own mute is the music's only, so a player who switched the game off at a table can
   switch it on there (2026-11-05). The whole player is the music's and leaves it out. */
.table .music > .sound-switch { width: calc(var(--u) * 0.044); height: calc(var(--u) * 0.044); display: none; place-items: center; color: inherit; }
.table .music.small > .sound-switch.game-sound { display: grid; }
.table .music .sound-switch svg { position: static; width: 100%; height: 100%; }
.table .music .sound-switch .cross { display: none; }
.table .music .sound-switch .waves { display: inline; }
.table .music .sound-switch.off .cross { display: inline; }
.table .music .sound-switch.off .waves { display: none; }
.table .music.small.solo { width: calc(var(--u) * 0.075); }

/* 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 > :not(.lock-on) { opacity: 0.55; }

/* The table stands in the panel's frame now, on the place's stage (the game's AddPlace): the
   frame's top is 28 hundredths down and its edge as wide as the panel's line. */
.prices .scene .oval { top: calc(25 * var(--h) - max(2px, calc(0.45 * var(--h)))); }

/* ---- the place (54-the-online-ladder.md): its ground inside the frame, the table on it, and the
   place that goes and the one that comes sliding across together ---- */

.prices .stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(1.15 * var(--h));
}

.prices .scene {
    position: absolute;
    inset: 0;
}

/* The places to come, fetched and kept out of sight. */
.prices .ahead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.prices .ahead img { width: 1px; height: 1px; }

.prices .scene .ground {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
}

/* A shade over the foot, where the lines and the button stand, so they read on any place. */
.prices .scene .shade {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(38 * var(--h));
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
}

.prices .scene.come-dearer { animation: place-from-right 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.prices .scene.come-cheaper { animation: place-from-left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.prices .scene.go-dearer { animation: place-to-left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.prices .scene.go-cheaper { animation: place-to-right 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* In Persian the line runs the other way, and so does the dearer way. */
[dir="rtl"] .prices .scene.come-dearer { animation-name: place-from-left; }
[dir="rtl"] .prices .scene.come-cheaper { animation-name: place-from-right; }
[dir="rtl"] .prices .scene.go-dearer { animation-name: place-to-right; }
[dir="rtl"] .prices .scene.go-cheaper { animation-name: place-to-left; }

@keyframes place-from-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes place-from-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes place-to-left { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes place-to-right { from { transform: none; } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .prices .scene[class*="come-"], .prices .scene[class*="go-"] { animation-duration: 0.01s; }
}

/* A price the purse cannot reach: the lock where the seal would be, at full strength. */
.prices .oval .lock-on {
    position: absolute;
    left: calc(55.3 * var(--h));
    top: calc(-1.4 * var(--h));
    width: calc(6.2 * var(--h));
}

/* On a place's dark cloth and its shaded ground the words are cream, with the title's dark edge
   where they lie on the ground. */
.prices.placed .oval .a-seat { color: rgba(246, 236, 212, 0.9); }
.prices.placed .oval .number { color: var(--on-navy); }
.prices.placed .oval .pot,
.prices.placed .oval .farr { color: var(--on-navy); }

.prices.placed .oval .waiting,
.prices.placed > .takes,
.prices.placed > .foot {
    color: var(--on-navy);
    text-shadow: 0 0 2px #0d1530, 0 0 4px #0d1530, 0 1px 3px rgba(0, 0, 0, 0.8);
}

.prices.placed .dots button::before { background: rgba(246, 236, 212, 0.6); }
.prices.placed .dots button.poor::before { background: rgba(246, 236, 212, 0.3); }
.prices.placed .dots button.chosen::before { background: var(--on-navy); }

.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 .foot-words,
.cuphall .title,
.cuphall .back,
.cuphall .wallet,
.cuphall .chips,
.cuphall .jarfree,
.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; }

/* A poster's foot beside the clock: what the time is of, the time or the standing large, how full
   it is, one under the other in the middle of the foot. A line that needs a second one pushes
   the next down, and cups.js brings the large one down further until the three fit the foot. */
.cuphall .foot-words {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.06em;
    pointer-events: none;
}

.cuphall .foot-words > span {
    display: block;
    font-size: var(--fs);
    line-height: 1.12;
    white-space: nowrap;
    text-align: 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;
}

/* ---- what is free in the jar, at the far end of the chips (2026-10-16) ---- */

.cuphall .jarfree {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: solid #e2b64a;
    background: rgba(22, 35, 79, 0.72);
    color: #f6ecd4;
    pointer-events: none;
}

.cuphall .jarfree span { display: flex; flex-direction: column; line-height: 1.05; }
.cuphall .jarfree b { color: #e2b64a; }

/* ---- 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 share button in a poster's corner: the round icon alone, lifted a little under the pointer as the circle's are. */
.cuphall .share, .cuphall .bell, .cuphall .leaving { overflow: visible; }
.cuphall .share svg, .cuphall .bell svg, .cuphall .leaving svg { display: block; width: 100%; height: 100%; transition: transform 0.12s; }
.cuphall .share:hover svg, .cuphall .leaving:hover svg { transform: translateY(-5%); }
.cuphall .bell:hover svg { transform: rotate(-10deg); }

/* Whether to leave a tournament, over the whole page as the table asks whether to leave it. */
.cuphall .leave-ask { position: absolute; inset: 0; z-index: 20; }
.cuphall .leave-off { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); cursor: var(--point); }
.cuphall .leave-sheet { position: absolute; }
.cuphall .press.danger { color: #9b1c1c; }

/* The back and the badges on the podium are pressed: a press with no face over each, and what it
   lies over lifts a little under the pointer. */
.cuphall .opens { position: absolute; z-index: 1; }
.cuphall .thing :is(img, i) { transition: transform 0.12s ease-out, filter 0.12s; }
.cuphall .thing:has(> .opens:hover) :is(img, i) { transform: translateY(calc(-0.8 * var(--u))); filter: brightness(1.08); }
.cuphall .thing:has(> .opens:active) :is(img, i) { transform: none; }

/* What a press on the podium opens lies over the whole page: a back's page, or a badge's card
   in my page's clothes without my page's ground, by day or by night. */
.cuphall ~ .cup-back {
    position: fixed;
    inset: 0 auto auto 0;
    width: var(--w);
    height: calc(100 * var(--h));
    z-index: 30;
}

.cuphall ~ .mypage.cup-card {
    inset: 0 auto auto 0;
    width: var(--w);
    height: calc(100 * var(--h));
    transform: none;
    box-shadow: none;
    background: none;
    z-index: 30;
}

/* The numbered table a special tournament gives, standing on the podium drawn small as it is
   under the play (the game's Tables.DrawSmall): its ground cut to a card with round corners and
   a gold edge, and its ring small on it with the medallion in the middle. */
.cuphall .prize-table {
    position: absolute;
    box-sizing: border-box;
    border-radius: calc(1.4 * var(--u));
    border: max(1.5px, calc(0.3 * var(--u))) solid var(--gold, #c9a24a);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 calc(0.5 * var(--u)) calc(0.8 * var(--u)) rgba(0, 0, 0, 0.3);
    transition: transform 0.12s ease-out, filter 0.12s;
}

.cuphall .thing:has(> .opens:hover) .prize-table { transform: translateY(calc(-0.8 * var(--u))); filter: brightness(1.08); }
.cuphall .thing:has(> .opens:active) .prize-table { transform: none; }

.cuphall .prize-table .ring {
    left: 50%;
    top: 50%;
    width: 86%;
    height: var(--ring-high);
    transform: translate(-50%, -50%);
}

.cuphall .prize-table .ring .medal {
    width: auto;
    height: 22%;
    display: block;
}

/* A table's page over the posters, as a back's: the table drawn small at 66 by 44 of the
   height, and beside it the panel that says what it is. */
.cup-back .card-page .big-table {
    position: relative;
    flex: 0 0 auto;
    width: calc(66 * var(--h));
    height: calc(44 * var(--h));
    box-sizing: border-box;
    border-radius: calc(4 * var(--h));
    border: max(2px, calc(0.6 * var(--h))) solid var(--gold, #c9a24a);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 calc(1.2 * var(--h)) calc(2 * var(--h)) rgba(0, 0, 0, 0.35);
    animation: lift 0.4s ease-out;
}

.cup-back .card-page .big-table .ring {
    left: 50%;
    top: 50%;
    width: 86%;
    height: var(--ring-high);
    transform: translate(-50%, -50%);
}

.cup-back .card-page .big-table .ring .medal {
    width: auto;
    height: 22%;
    display: block;
}

@media (max-width: 900px) {
    .cup-back .card-page .big-table { width: calc(54 * var(--h)); height: calc(36 * var(--h)); }
}



/* ---- 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 .foot-words,
[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); }

/* The break before my next round, counted down (CupRestClock.razor, 2026-10-16): on a table's
   result under its line, and on its row of the door's board (door.css). Red and beating for the
   last ten seconds, as the turn clock's frame does. */
.cup-rest {
    display: grid;
    justify-items: center;
    gap: calc(0.3 * var(--h));
    text-align: center;
    color: var(--cobalt, #1f3f8f);
    font-variant-numeric: tabular-nums;
}

.cup-rest small { font-size: calc(2.1 * var(--h)); opacity: 0.8; }
.cup-rest b { font-size: calc(3.4 * var(--h)); }
.cup-rest b.playing { font-size: calc(2.6 * var(--h)); font-weight: 600; }
.cup-rest.late b { color: #c4161e; animation: rest-beat 0.5s ease-in-out infinite alternate; }

@keyframes rest-beat {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

/* The page turns on its side on a phone held upright, as the door and the table do, and so does
   whatever opens over it. The knockout's circle keeps its wide layout: the turned page is wide. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .cuphall,
    .cuphall ~ .cup-back,
    .cuphall ~ .mypage.cup-card,
    .cuphall ~ .cupcircle {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }

    .cuphall ~ .cupcircle {
        grid-template-columns: minmax(0, 1fr) clamp(240px, 30dvh, 420px);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "head head" "field side" "replay side";
    }
}

/* circle.css */
/* The whole knockout as a circle (the-circle.md, 2026-10-15): the players round the rim in their
   faces, each round's tables a ring further in, the final in the middle under the crown. It lies
   over the tournaments' posters and fills the window whichever way it is held: the circle on one
   side and what was pressed on the other, or one over the other in an upright window. */

.cupcircle {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 420px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head" "field side" "replay side";
    gap: 0 12px;
    padding: 10px 14px 12px;
    box-sizing: border-box;
    background: linear-gradient(rgba(10, 18, 44, 0.78), rgba(10, 18, 44, 0.86)), url("../art/cups/ground.jpg") center / cover;
    color: #f6ecd4;
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
    --gold: #e2b64a;
    --cream: #f6e6c0;
    --paper: #f6e6c0;
    --ink: #2a1d10;
    --ink-soft: #6b5332;
    --cobalt: #1f3f8f;
    --red-ink: #bf2a26;
}

@media (max-aspect-ratio: 1/1) {
    .cupcircle {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 34%);
        grid-template-areas: "head" "field" "replay" "side";
    }
}

.cupcircle button {
    font: inherit;
    color: inherit;
    cursor: var(--point);
    -webkit-tap-highlight-color: transparent;
}

.cupcircle .head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding-bottom: 6px;
}

.cupcircle .head .back {
    flex: none;
    padding: 6px 16px;
    border: 1px solid rgba(226, 182, 74, 0.6);
    border-radius: 999px;
    background: rgba(22, 35, 79, 0.85);
    font-size: 16px;
}

.cupcircle .head .back:hover { background: rgba(31, 63, 143, 0.9); }

.cupcircle .head h2 {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    font-size: clamp(18px, 2.6vw, 30px);
    color: var(--gold);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cupcircle .head .where {
    margin-inline-start: auto;
    flex: none;
    font-size: 15px;
    color: var(--cream);
    opacity: 0.85;
    white-space: nowrap;
}

/* ---- the circle, which a wheel, a drag or two fingers bring closer (js/circle.js) ---- */

.cupcircle .field {
    grid-area: field;
    position: relative;
    overflow: hidden;
    min-height: 0;
    touch-action: none;
    cursor: grab;
}

.cupcircle .field.dragging { cursor: grabbing; }

.cupcircle .zoom {
    position: absolute;
    inset: 0;
    /* Brought closer by the svg's viewBox (js/circle.js), never by a transform, so it stays sharp. */
}

.cupcircle .zoom svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.cupcircle .zoombar {
    position: absolute;
    bottom: 8px;
    inset-inline-end: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cupcircle .zoombar button {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(226, 182, 74, 0.55);
    border-radius: 50%;
    background: rgba(22, 35, 79, 0.85);
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

:is(.cupcircle, .cupcircle-mini) svg text { font-family: var(--face); pointer-events: none; }
:is(.cupcircle, .cupcircle-mini) svg .cc-hit { cursor: var(--point); }
:is(.cupcircle, .cupcircle-mini) svg .cc-hit:hover .cc-ring { stroke-width: 4; }

:is(.cupcircle, .cupcircle-mini) svg .cc-line { fill: none; stroke: rgba(246, 230, 192, 0.35); stroke-width: 1.4; stroke-dasharray: 4 4; }
:is(.cupcircle, .cupcircle-mini) svg .cc-line.is-went { stroke: var(--gold); stroke-width: 2.4; stroke-dasharray: none; }
:is(.cupcircle, .cupcircle-mini) svg .cc-line.is-road { stroke: #6fa8ff; stroke-width: 4; stroke-dasharray: none; }

:is(.cupcircle, .cupcircle-mini) svg .cc-face .cc-ring { fill: none; stroke: var(--gold); stroke-width: 2; }
:is(.cupcircle, .cupcircle-mini) svg .cc-face.is-out image { filter: grayscale(1) brightness(0.65); }
:is(.cupcircle, .cupcircle-mini) svg .cc-face.is-out .cc-ring { stroke: rgba(246, 230, 192, 0.35); }
:is(.cupcircle, .cupcircle-mini) svg .cc-face.is-road .cc-ring { stroke: #6fa8ff; stroke-width: 4; }
:is(.cupcircle, .cupcircle-mini) svg .cc-face .cc-letter { fill: #2a1d10; font-weight: 800; }
:is(.cupcircle, .cupcircle-mini) svg .cc-face .cc-disc { fill: #f6e6c0; }

:is(.cupcircle, .cupcircle-mini) svg .cc-knot .cc-disc { fill: rgba(22, 35, 79, 0.95); stroke: rgba(246, 230, 192, 0.5); stroke-width: 1.5; }
:is(.cupcircle, .cupcircle-mini) svg .cc-knot.st-done .cc-disc { fill: #e2b64a; stroke: #8a6418; }
:is(.cupcircle, .cupcircle-mini) svg .cc-knot.st-playing .cc-disc { fill: #bf2a26; stroke: #f6e6c0; }
:is(.cupcircle, .cupcircle-mini) svg .cc-knot.is-chosen .cc-disc { stroke: #6fa8ff; stroke-width: 4; }
:is(.cupcircle, .cupcircle-mini) svg .cc-knot .cc-score { fill: #f6ecd4; font-weight: 800; }
:is(.cupcircle, .cupcircle-mini) svg .cc-knot.st-done .cc-score { fill: #2a1d10; }
:is(.cupcircle, .cupcircle-mini) svg .cc-knot .cc-beat { fill: none; stroke: #e24b4a; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: cc-beat-out 1.6s ease-out infinite; }

@keyframes cc-beat-out {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.9); opacity: 0; }
}

/* Two who have just gone through rise from the table they won to the next one. */
:is(.cupcircle, .cupcircle-mini) svg .cc-rise { animation: cc-rise-up 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes cc-rise-up {
    from { transform: translate(var(--dx), var(--dy)); opacity: 0.3; }
    to { transform: none; opacity: 1; }
}

:is(.cupcircle, .cupcircle-mini) svg .cc-middle .cc-medal { fill: rgba(22, 35, 79, 0.95); stroke: var(--gold); stroke-width: 3; }
:is(.cupcircle, .cupcircle-mini) svg .cc-middle.st-done .cc-medal { fill: #f6e6c0; }

/* ---- what was pressed, beside the circle ---- */

.cupcircle .side {
    grid-area: side;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    border: 2px solid #b8893a;
    border-radius: 14px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    font-size: 16px;
    line-height: 1.6;
}

.cupcircle .side h3 { margin: 0 0 6px; font-size: 21px; color: #16234f; }
.cupcircle .side .soft { color: var(--ink-soft); }
.cupcircle .side .pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.cupcircle .side .pair.won { font-weight: 800; }
.cupcircle .side .versus { text-align: center; color: var(--ink-soft); margin: 2px 0; }
.cupcircle .side .score { font-size: 26px; font-weight: 800; color: #16234f; text-align: center; }

/* A table as a scoreboard: each pair's row ends in its own score, the pair ahead in gold. */
.cupcircle .side .match { display: grid; gap: 6px; margin: 8px 0; }
.cupcircle .side .match .row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
}
.cupcircle .side .match .row .pair { flex: 1; margin: 0; }
.cupcircle .side .match .row.won .pair { font-weight: 800; }
.cupcircle .side .match .pts {
    flex: none;
    min-width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 2px solid rgba(184, 137, 58, 0.55);
    background: rgba(22, 35, 79, 0.08);
    color: #16234f;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}
.cupcircle .side .match .row.ahead { background: rgba(226, 182, 74, 0.18); }
.cupcircle .side .match .row.ahead .pts { background: #e2b64a; border-color: #b8893a; color: #16234f; }
.cupcircle .side .match .versus { margin: 0; }
.cupcircle .side .who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px 2px 2px;
    border: 1px solid rgba(184, 137, 58, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    color: inherit;
}

[dir="rtl"] .cupcircle .side .who { padding: 2px 2px 2px 10px; }
.cupcircle .side .who:hover { background: rgba(255, 255, 255, 0.7); }
.cupcircle .side .who img,
.cupcircle .side .who .letter {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    object-fit: cover;
    display: grid;
    place-items: center;
    background: #f6e6c0;
    font-weight: 800;
}

.cupcircle .side .big-face { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--gold); object-fit: cover; display: block; margin: 0 auto 8px; }
.cupcircle .side .road { margin: 8px 0 0; padding: 0; list-style: none; }
.cupcircle .side .road li { padding: 3px 0; border-bottom: 1px dashed rgba(107, 83, 50, 0.3); }
.cupcircle .side .road li.out { color: var(--red-ink); }
.cupcircle .side .road li.through { color: var(--won, #2f6b2f); }
.cupcircle .side .press {
    display: block;
    margin: 12px auto 0;
    padding: 8px 22px;
    border: 0;
    border-radius: 999px;
    background: #16234f;
    color: #f6ecd4;
}

.cupcircle .side .press:hover { background: #1f3f8f; }
.cupcircle .side .crown { display: block; width: 110px; margin: 0 auto 6px; }

/* ---- the replay of one that is over ---- */

.cupcircle .replay {
    grid-area: replay;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.cupcircle .replay button {
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(226, 182, 74, 0.6);
    border-radius: 50%;
    background: rgba(22, 35, 79, 0.85);
    padding: 0;
    font-size: 18px;
}

.cupcircle .replay input { flex: 1; accent-color: #e2b64a; }

/* Somebody's card over the circle. */
.cupcircle ~ .mypage.circle-card {
    inset: 0 auto auto 0;
    width: var(--w);
    height: calc(100 * var(--h));
    transform: none;
    box-shadow: none;
    background: none;
    z-index: 35;
}

/* By night the paper beside the circle darkens with every other page's. */
html.night .cupcircle {
    --won: #7fcfa8;
    --paper: var(--night-paper);
    --ink: var(--night-ink);
    --ink-soft: var(--night-soft);
    --red-ink: var(--night-red);
}

html.night .cupcircle .side h3,
html.night .cupcircle .side .score,
html.night .cupcircle .side .match .pts { color: var(--night-cream); }
html.night .cupcircle .side .match .pts { background: rgba(255, 255, 255, 0.06); }
html.night .cupcircle .side .match .row { background: rgba(255, 255, 255, 0.04); }
html.night .cupcircle .side .match .row.ahead { background: rgba(226, 182, 74, 0.14); }
html.night .cupcircle .side .match .row.ahead .pts { background: #e2b64a; color: #16234f; }

/* ---- small, on the poster of one being played ---- */

.cuphall .cupcircle-mini {
    position: absolute;
    box-sizing: border-box;
    cursor: var(--point);
    --gold: #b8893a;
}

.cupcircle-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cupcircle-mini svg .cc-line { stroke: rgba(42, 29, 16, 0.3); }
.cupcircle-mini svg .cc-line.is-went { stroke: #b8893a; }
.cupcircle-mini svg .cc-line.is-road { stroke: #1f3f8f; }
.cupcircle-mini svg .cc-face.is-road .cc-ring { stroke: #1f3f8f; }
.cupcircle-mini svg .cc-knot .cc-disc { fill: #16234f; }
.cupcircle-mini svg .cc-knot.st-done .cc-disc { fill: #e2b64a; }
.cupcircle-mini svg .cc-knot.st-playing .cc-disc { fill: #bf2a26; }

.cupcircle-mini svg .cc-knot.st-playing text.cc-score { fill: #f6ecd4; }
.cupcircle-mini:hover svg { filter: brightness(1.05); }
html.night .cupcircle-mini svg .cc-line { stroke: rgba(246, 230, 192, 0.35); }
html.night .cupcircle-mini svg text.cc-score { fill: var(--night-cream); }

/* What a table that is done ended at, under the two who went through it. */
:is(.cupcircle, .cupcircle-mini) svg .cc-knot .cc-under { fill: #f6ecd4; font-weight: 800; paint-order: stroke; stroke: rgba(10, 18, 44, 0.8); stroke-width: 3px; }
.cupcircle-mini svg .cc-knot .cc-under { fill: #2a1d10; stroke: rgba(246, 230, 192, 0.9); }

/* The way to the circle of one that is over, in the corner of its poster. */
.cuphall .circle-pill {
    position: absolute;
    box-sizing: border-box;
    z-index: 2;
    border: 1.5px solid #b8893a;
    border-radius: 999px;
    background: #16234f;
    color: #f6ecd4;
    font-size: var(--fs);
    line-height: 1;
}

.cuphall .circle-pill:hover { background: #1f3f8f; }
:is(.cupcircle, .cupcircle-mini) svg .cc-final { fill: #f6ecd4; font-weight: 800; }

/* Round the two who went through a table, nothing to see: it is what a press on the table finds, and it shows blue when the table is chosen. */
:is(.cupcircle, .cupcircle-mini) svg .cc-pair { fill: transparent; stroke: none; }
:is(.cupcircle, .cupcircle-mini) svg .cc-pair.is-chosen { stroke: #6fa8ff; stroke-width: 3; stroke-dasharray: 6 4; }

/* Every player's own lane (2026-10-16): plain while their table is to be played, gold for who went through it, dim for who it put out, blue on the road. */
:is(.cupcircle, .cupcircle-mini) svg .cc-line.is-in { stroke: rgba(246, 230, 192, 0.6); stroke-width: 1.5; stroke-dasharray: none; }
:is(.cupcircle, .cupcircle-mini) svg .cc-line.is-went { stroke-width: 2; }
:is(.cupcircle, .cupcircle-mini) svg .cc-line.is-lost { stroke: rgba(246, 230, 192, 0.22); stroke-width: 1.3; stroke-dasharray: none; }
:is(.cupcircle, .cupcircle-mini) svg .cc-line.is-road { stroke-width: 2.6; }
.cupcircle-mini svg .cc-line.is-in { stroke: rgba(42, 29, 16, 0.55); }
.cupcircle-mini svg .cc-line.is-lost { stroke: rgba(42, 29, 16, 0.2); }
html.night .cupcircle-mini svg .cc-line.is-in { stroke: rgba(246, 230, 192, 0.6); }
html.night .cupcircle-mini svg .cc-line.is-lost { stroke: rgba(246, 230, 192, 0.22); }

/* ---- a champion's gold plaque, and what somebody still in plays for (2026-10-16) ---- */

/* The number counted up has a name of its own: a registered property does not pass down, and as
   --n it stopped every other page's --n reaching the children that are laid out by it. */
@property --counted {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.cupcircle .side .plaque {
    position: relative;
    margin: -16px -18px 0;
    padding: 46px 18px 16px;
    border-radius: 12px 12px 0 0;
    background: radial-gradient(ellipse at 50% 18%, rgba(255, 214, 102, 0.55), rgba(226, 182, 74, 0.08) 60%, transparent 75%);
    overflow: hidden;
}

.cupcircle .side .plaque .ribbon {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 28px;
    background: linear-gradient(#f3d27a, #c8962e);
    color: #3b2508;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.04em;
    clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    animation: plaque-drop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.cupcircle .side .plaque .crowning {
    display: block;
    width: 74px;
    margin: 6px auto -14px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
    animation: plaque-drop 0.7s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.cupcircle .side .plaque .big-face {
    border-width: 4px;
    box-shadow: 0 0 0 3px rgba(243, 210, 122, 0.45), 0 0 26px rgba(255, 214, 102, 0.75);
}

@keyframes plaque-drop {
    from { transform: translate(var(--x, 0), -24px) scale(0.7); opacity: 0; }
    to { transform: translate(var(--x, 0), 0) scale(1); opacity: 1; }
}

.cupcircle .side .plaque .ribbon { --x: -50%; }

.cupcircle .side .playing-for {
    margin: 4px 0 6px;
    text-align: center;
    color: var(--gold);
    font-weight: 700;
}

.cupcircle .side .prizes {
    display: grid;
    gap: 8px;
    margin: 6px 0 10px;
}

.cupcircle .side .prize {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 10px;
    border: 1px solid rgba(184, 137, 58, 0.45);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.cupcircle .side .prizes.taken .prize {
    border-color: rgba(243, 210, 122, 0.8);
    background: linear-gradient(135deg, rgba(243, 210, 122, 0.22), rgba(255, 255, 255, 0.04));
    animation: prize-in 0.5s both;
}

.cupcircle .side .prizes.taken .prize:nth-child(2) { animation-delay: 0.15s; }
.cupcircle .side .prizes.taken .prize:nth-child(3) { animation-delay: 0.3s; }
.cupcircle .side .prizes.taken .prize:nth-child(4) { animation-delay: 0.45s; }

@keyframes prize-in {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.cupcircle .side .prize > img { width: 64px; height: 52px; object-fit: contain; grid-row: span 2; }
.cupcircle .side .prize.coins > img { grid-row: span 2; }
.cupcircle .side .prize > span { font-size: 15px; color: var(--ink-soft); }

/* The coins are counted up once as the plaque opens: the number is a CSS counter, Persian figures in Persian. */
.cupcircle .side .prize .count {
    --counted: var(--to);
    font-size: 30px;
    line-height: 1.1;
    color: var(--gold);
    font-weight: 800;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    counter-reset: n var(--counted);
}

.cupcircle .side .prize .count::after { content: counter(n); }
.cupcircle .side .prize .count.fa::after { content: counter(n, persian); }
.cupcircle .side .prizes.taken .count { animation: count-up 1.4s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes count-up {
    from { --counted: 0; }
    to { --counted: var(--to); }
}

/* The numbered back, a shine passing across it once. */
.cupcircle .side .prize .card {
    position: relative;
    width: 44px;
    height: 64px;
    justify-self: center;
    border-radius: 4px;
    overflow: hidden;
    grid-row: span 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px #c8962e;
}

.cupcircle .side .prize .card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cupcircle .side .prizes.taken .prize .card::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.75) 50%, transparent 60%);
    animation: shine 1.6s 0.6s ease-in-out both;
}

@keyframes shine {
    from { transform: translateX(-60%); }
    to { transform: translateX(60%); }
}

.cupcircle .side .prize .disc { position: relative; width: 52px; height: 52px; justify-self: center; grid-row: span 2; }
.cupcircle .side .prize .disc img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cupcircle .side .prize .disc img:first-child { inset: 10%; width: 80%; height: 80%; border-radius: 50%; background: #f6e6c0; }

/* Gold sparks fall once round a champion. */
.cupcircle .side .plaque .spark {
    position: absolute;
    top: -10px;
    left: calc(8% + var(--k) * 13%);
    width: 10px;
    height: 10px;
    background: #f3d27a;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: spark-fall 2.2s calc(var(--k) * 0.18s) ease-in both;
    pointer-events: none;
}

@keyframes spark-fall {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(260px) rotate(200deg); opacity: 0; }
}

/* 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. The crosshair breathing on its
   face is drawn on the chair's canvas (seat.js, aim), as the game draws it (SeatPlate.DrawTheAim). */
.seat.target { cursor: var(--point); }

/* The hokm tray stays open after a pick, and its tap-off (11) covers the table: a chair that can be
   thrown at stands over it, so the first tap on a face throws and does not only close the tray
   (Mahdi, 2026-11-09). */
.table .seat.target { z-index: 12; }

/* 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: 85; /* over the fan of tables */
}

.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 { 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.
   The browser lays the plate's nine pieces side by side, and at a size between pixels the joins
   let the dark table through as thin lines; the whole plate stretched under them, cut to the
   ends' round, fills those joins with its own cream and cobalt. */
.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: url("../art/table/said.png") center / 100% 100% no-repeat;
    border-radius: 0.9em / 1em;
    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;
}
.table .tray { z-index: 12; }
/* My buttons stand over that tap-off, so a press on another of them opens its own panel in place of the one standing. */
.table .my-buttons { z-index: 12; }

/* 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 .banner,
[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);
}

/* A phone held upright has the page on its side, and the corner goes with it: the page's bottom
   left is the screen's top left. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .tongues {
        left: 10px;
        top: 12px;
        bottom: auto;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

/* ---- 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, the turning lantern (Door.razor, js/lantern.js). It is laid in a frame of 1672 by 941, as
   its mockup was: --pt is one point of that frame, as big as the door lets the whole of it be. On a
   window wider than the frame the left and right of it pull out to the sides, a little more of the
   room between them and the lantern (--out); on one taller than the frame the frame stands near the
   top, the lantern's chains reaching past the door's edge, and the corners and the foot spread down.
   The room's picture is laid so that its floor always lies under the lantern (--floor). A phone held
   upright has the door on its side, and an upright window a band of it across the middle (below). */

.menu {
    --pt: min(calc(var(--w) / 1672), calc(var(--h) * 100 / 941));
    --spare-x: calc((var(--w) - 1672 * var(--pt)) / 2);
    --spare-y: calc(100 * var(--h) - 941 * var(--pt));
    --out: min(var(--spare-x), calc(300 * var(--pt)));
    --up: min(calc(var(--spare-y) * 0.57), calc(51 * var(--pt)));
    --down: calc(var(--spare-y) - var(--up));
    --floor: max(calc((100 * var(--h) - var(--up) - 535 * var(--pt)) / 0.432), calc(var(--w) * 941 / 1672));
    --plaque-h: calc(60 * var(--pt));
    --room-ink: #f4e7c4;
    --navy-ink: #14276b;
    --enamel-navy: #16234f;
    --on-navy: #f6ecd4;
    --crimson: #a8151c;
    --veil: transparent;
    --painted: none;
    /* The words on the room, never so small a phone cannot read them. */
    --word: max(calc(29 * var(--pt)), 10.5px);

    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: linear-gradient(var(--veil), var(--veil)), url("../art/door/lantern/room.jpg") center calc(var(--up) + 535 * var(--pt) - var(--floor) * 0.568) / auto var(--floor) no-repeat #2a0b24;
    color: var(--room-ink);
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

/* Night (Night.cs): a lapis veil over the same room, and the paintings a little dimmer; the lantern
   stays as it is, a lit thing in a dark room. */
.menu.night {
    --veil: rgba(5, 9, 23, 0.38);
    --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; }

.menu .stage {
    position: absolute;
    left: var(--spare-x);
    top: var(--up);
    width: calc(1672 * var(--pt));
    height: calc(941 * var(--pt));
}

/* ---- the round buttons in the bottom left corner ---- */

.menu .rounds {
    --round: calc(66 * var(--pt));
    position: absolute;
    left: calc(24 * var(--pt));
    top: calc(826 * var(--pt));
    height: var(--round);
    display: flex;
    align-items: center;
    gap: calc(4 * var(--pt));
    direction: ltr;
    translate: calc(-1 * var(--out)) var(--down);
    z-index: 3;
}

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

/* ---- down the left: the game's painted title, the four houses, its motto, then the free chests ---- */

.menu .houses {
    position: absolute;
    left: calc(24 * var(--pt));
    top: calc(6 * var(--pt));
    width: calc(446 * var(--pt));
    translate: calc(-1 * var(--out)) 0;
}

.menu .game-title {
    width: 100%;
    height: calc(112 * var(--pt));
    object-fit: contain;
    filter: var(--painted);
}

.menu .kings {
    display: flex;
    justify-content: space-between;
    margin-top: calc(4 * var(--pt));
}

/* Each king in his round frame, the suit's mark on a cream disc at its foot (the game's Medallion). */
.menu .king {
    --a: calc(108 * var(--pt));
    position: relative;
    width: var(--a);
    height: calc(var(--a) * 1.12);
    flex: none;
    transition: transform 0.12s;
}

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

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

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

.menu .motto {
    margin: calc(2 * var(--pt)) 0 0;
    min-height: calc(36 * var(--pt));
    display: grid;
    align-items: center;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: max(calc(27 * var(--pt)), 9.5px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--room-ink);
}

[dir="rtl"] .menu .motto { direction: rtl; }

/* ---- the lantern ---- */

/* The frame's own place of the drum on the canvas (js/lantern.js: box). */
.menu .fanus {
    position: absolute;
    left: calc(518 * var(--pt));
    top: calc(136 * var(--pt));
    width: calc(634 * var(--pt));
    height: calc(360 * var(--pt));
}

/* The floor takes a tint of the panel facing us; the painted pool stays warm under it. */
.menu .fanus .pool {
    --glow: 70, 110, 255;
    position: absolute;
    left: calc(-183 * var(--pt));
    top: calc(334 * var(--pt));
    width: calc(1000 * var(--pt));
    height: calc(160 * var(--pt));
    background: radial-gradient(closest-side, rgba(var(--glow), 0.9), rgba(var(--glow), 0));
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.menu .fanus .panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.menu .fanus .drum {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: var(--point);
}

.menu .fanus .drum.held { cursor: var(--hold); }

/* The render of the brass is laid wider than it was painted, so the drum keeps the mockup's look. */
.menu .fanus .brass {
    position: absolute;
    left: calc(-18 * var(--pt));
    width: calc(670 * var(--pt));
    max-width: none;
}

/* The top brass carries its chains on upward (door-brass-fix.ps1), so they reach the top of any window. */
.menu .fanus .brass.top { top: calc(-280.5 * var(--pt)); height: calc(342 * var(--pt)); }
.menu .fanus .brass.foot { top: calc(322 * var(--pt)); height: calc(112 * var(--pt)); }

.menu .fanus .arrow {
    position: absolute;
    top: calc(146 * var(--pt));
    width: calc(72 * var(--pt));
    height: calc(120 * var(--pt));
    display: grid;
    place-items: center;
}

.menu .fanus .arrow.back { left: calc(-64 * var(--pt)); }
.menu .fanus .arrow.on { right: calc(-64 * var(--pt)); }
.menu .fanus .arrow img { width: calc(48 * var(--pt)); height: auto; }
.menu .fanus .arrow.back img { scale: -1 1; }
.menu .fanus .arrow:hover { filter: brightness(1.15); }

/* ---- every game in one row ---- */

.menu .emblems {
    position: absolute;
    left: calc(24 * var(--pt) - var(--out));
    right: calc(24 * var(--pt) - var(--out));
    top: calc(518 * var(--pt));
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(80 * var(--pt));
    translate: 0 calc(var(--down) * 0.25);
    z-index: 2;
    pointer-events: none;
}

/* Small and without their names (his word, 2026-11-02); a press reaches a little past the picture.
   Only the emblems take a press: the row runs the door's whole width over the treasury's top shelf,
   and the letter, a gift and a badge's chest stand under it. */
.menu .emblems .dot {
    pointer-events: auto;
    position: relative;
    flex: none;
    width: calc(96 * var(--pt));
    height: 100%;
    display: grid;
    place-items: center;
}

.menu .emblems .dot img {
    width: calc(62 * var(--pt));
    height: calc(62 * var(--pt));
    object-fit: contain;
}

.menu .emblems .dot:hover img { filter: brightness(1.12); }

/* The gold ring; the lantern hands it over as the drum passes. */
.menu .emblems .halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(68 * var(--pt));
    height: calc(68 * var(--pt));
    box-sizing: border-box;
    translate: -50% -50%;
    border: max(1.5px, calc(3 * var(--pt))) solid #ffd76a;
    border-radius: 50%;
    box-shadow: 0 0 calc(12 * var(--pt)) #ffcf5a, inset 0 0 calc(4 * var(--pt)) #ffcf5a;
    opacity: 0;
    pointer-events: none;
}

.menu .emblems .halo.chosen { opacity: 1; }

/* ---- the free chests and the letter in the treasury, low on the left, their words on its plaque ---- */

/* Two rows so that more can stand there (his word, 2026-11-02): the free three on its floor, and on a
   shelf over them the letter, a gift and a badge's chest. The picture was cut 1000 by 436, --k one
   pixel of it: above 235 and below 301 it is laid as painted, its sides between them repeat one turn
   of their pattern (the border image), and its glow is drawn out (the background). The children are
   placed from the corner inside that border. */
.menu .band {
    --h: calc(360 * var(--pt));
    --k: calc(496 * var(--pt) / 1000);
    --tall: calc((var(--h) - 261 * var(--k)) / 2);
    --chest: calc(var(--tall) * 1.05);
    --step: calc(var(--chest) + 36 * var(--k));
    --low: calc(var(--h) - 326 * var(--k) - var(--tall));
    --up: calc(var(--low) - var(--tall) - 15 * var(--k));
    --col: calc(453 * var(--k) - var(--chest) / 2);
    position: absolute;
    left: calc(24 * var(--pt));
    top: calc(456 * var(--pt));
    width: calc(496 * var(--pt));
    height: var(--h);
    box-sizing: border-box;
    border-style: solid;
    border-width: calc(235 * var(--k)) calc(47 * var(--k)) calc(135 * var(--k));
    border-image: url("../art/door/lantern/vault.png") 235 47 135 / 1 / 0 stretch round;
    background: url("../art/door/lantern/vault.png") 50% 63.5% / 110.4% 660.6% no-repeat padding-box;
    direction: ltr;
    filter: var(--painted);
    translate: calc(-1 * var(--out)) var(--down);
}

/* The shelf is a strip of the treasury's own floor. */
.menu .band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--low) - 31 * var(--k));
    height: calc(29 * var(--k));
    background: url("../art/door/lantern/vault.png") calc(-47 * var(--k)) calc(-327 * var(--k)) / calc(1000 * var(--k)) calc(436 * var(--k)) no-repeat;
    box-shadow: 0 calc(6 * var(--k)) calc(5 * var(--k)) rgba(0, 0, 0, 0.35);
}

.menu .band .letter {
    position: absolute;
    left: calc(var(--col) - var(--step));
    top: var(--up);
    width: var(--chest);
    height: var(--tall);
}

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

.menu .band .letter b {
    position: absolute;
    right: calc(var(--tall) * 0.1);
    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: absolute;
    left: var(--col);
    top: var(--low);
    width: var(--chest);
    height: var(--tall);
    display: grid;
    place-items: center;
}

.menu .band .chest.free-0 { left: calc(var(--col) - var(--step)); }
.menu .band .chest.free-2 { left: calc(var(--col) + var(--step)); }
.menu .band .chest.given { top: var(--up); }
.menu .band .chest.badged { left: calc(var(--col) + var(--step)); top: var(--up); }

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

.menu .band .chest.full img { opacity: 1; filter: var(--painted); }
.menu .band .chest.full.free-0 img { animation: breathe 1.8s ease-in-out infinite; }

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

@media (prefers-reduced-motion: reduce) {
    .menu .band .chest.full.free-0 img { animation: none; }
}

.menu .band .chest small {
    position: absolute;
    font-size: max(calc(21 * var(--pt)), 9px);
    font-weight: 800;
    color: var(--room-ink);
    white-space: nowrap;
    text-shadow: 0 0 calc(4 * var(--pt)) #000;
    z-index: 2;
}

/* On the treasury's plaque, the same ink by day and by night: the plaque is a painted thing. */
.menu .band .caption {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: calc(-119 * var(--k));
    height: calc(65 * var(--k));
    display: grid;
    place-items: center;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: max(calc(27 * var(--pt)), 10px);
    line-height: 1.2;
    color: #543d24;
}

.menu .band.lit .caption { font-weight: 700; color: #1f3f8f; }
[dir="rtl"] .menu .band .caption { direction: rtl; font-weight: 400; }
[dir="rtl"] .menu .band.lit .caption { font-weight: 700; }

/* ---- a season's pass under the houses, as wide as they are ---- */

.menu .pass-spot {
    --zone: calc(430 * var(--pt));
    position: absolute;
    left: calc(24 * var(--pt));
    top: calc(292 * var(--pt));
    width: var(--zone);
    height: calc(150 * var(--pt));
    translate: calc(-1 * var(--out)) 0;
    z-index: 1;
}

/* ---- the chosen game's tournaments, the painted board in the bottom right corner, entered from here ---- */

/* It takes the room from under the niches to the door's foot. The picture was cut 1000 by 603, crown
   included: above 171 and below 415 it is laid as painted, the sides between them repeat four turns of
   their own pattern (the border image), and the parchment is drawn out (the background). --k is one
   pixel of that cut, --c one point of the game's card. */
.menu .cupboard {
    --bw: calc(376 * var(--pt) + min(var(--out), 144 * var(--pt)));
    --bh: min(calc(406 * var(--pt) + var(--down)), calc(var(--bw) * 1.3));
    --c: calc(var(--bw) / 376);
    --k: calc(var(--bw) / 1000);
    position: absolute;
    right: calc(24 * var(--pt));
    top: calc(918 * var(--pt) - var(--bh));
    width: var(--bw);
    height: var(--bh);
    box-sizing: border-box;
    border-style: solid;
    border-width: calc(171 * var(--k)) calc(60 * var(--k)) calc(188 * var(--k));
    border-image: url("../art/door/lantern/cups-board.png") 171 60 188 / 1 / 0 stretch round;
    background: url("../art/door/lantern/cups-board.png") 50% 47.6% / 113.64% 247.13% no-repeat padding-box;
    color: #16234f;
    translate: var(--out) var(--down);
    z-index: 3;
}

[dir="rtl"] .menu .cupboard { direction: rtl; }

/* The heading, on Play online's own gold plaque laid over the small one under the crown. */
.menu .cupboard .head {
    position: absolute;
    left: 50%;
    top: calc(-66.2 * var(--k) + 2 * var(--c));
    width: calc(196 * var(--c));
    height: calc(44 * var(--c));
    translate: -50% -50%;
    display: grid;
    place-items: center;
    padding: 0 calc(28 * var(--c));
    box-sizing: border-box;
    background: url("../art/door/lantern/plaque.png") center / 100% 100% no-repeat;
    font-size: max(calc(27 * var(--c)), 10px);
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
}

/* As many rows as there is room for, each at least 58 points; the rest are not drawn. */
.menu .cupboard .rows {
    position: absolute;
    inset: calc(-29 * var(--k) + 14 * var(--c)) calc(1 * var(--k) + 4 * var(--c)) calc(-135 * var(--k) + 6 * var(--c));
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(calc(58 * var(--c)), 1fr));
    grid-auto-rows: 0;
    overflow: hidden;
}

.menu .cupboard .row {
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(8 * var(--c));
    padding: 0 calc(10 * var(--c));
    border-top: max(1px, calc(1.5 * var(--c))) solid rgba(153, 107, 36, 0.55);
}

.menu .cupboard .row:first-of-type { border-top: 0; }

.menu .cupboard .what {
    flex: 1;
    min-width: 0;
    display: grid;
    text-align: start;
    color: inherit;
}

.menu .cupboard .what b,
.menu .cupboard .what small {
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    line-height: 1.25;
}

.menu .cupboard .what b { font-size: max(calc(22 * var(--c)), 10px); font-weight: 700; }
.menu .cupboard .what small { font-size: max(calc(18 * var(--c)), 9px); color: #543d24; font-variant-numeric: tabular-nums; }
.menu .cupboard .what small.late { color: #c4161e; }

.menu .cupboard .pill {
    flex: none;
    width: calc(142 * var(--c));
    height: calc(36 * var(--c));
    box-sizing: border-box;
    padding: 0 calc(8 * var(--c));
    border-radius: 999px;
    border: max(1px, calc(2 * var(--c))) solid #c9992f;
    background: var(--enamel-navy);
    color: var(--on-navy);
    font-size: max(calc(18 * var(--c)), 9px);
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
}

.menu .cupboard .pill:not(:disabled):hover { filter: brightness(1.2); }
.menu .cupboard .pill.in { background: none; color: inherit; }
.menu .cupboard .pill:disabled { opacity: 0.6; }

.menu .cupboard .quiet {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 calc(10 * var(--c));
    text-align: center;
    text-wrap: balance;
    font-size: max(calc(22 * var(--c)), 10px);
    color: #543d24;
}

/* ---- under the houses when no season is on: the stores ---- */

.menu .under-chests {
    --zone: calc(430 * var(--pt));
    position: absolute;
    left: calc(24 * var(--pt) - var(--out));
    top: calc(300 * var(--pt));
    width: var(--zone);
    height: calc(120 * var(--pt));
    display: grid;
    place-items: center;
}

/* The stores (Stores.razor, stores.css) as two quiet rows of plates. */
.menu .under-chests .stores.on-door {
    --sh: max(calc(34 * var(--pt)), 14px);
    max-width: calc(470 * var(--pt));
    flex-wrap: wrap;
    gap: calc(8 * var(--pt)) calc(10 * var(--pt));
    opacity: 0.86;
}

/* ---- on the right: my throne, my purse and rank beside it ---- */

.menu .mine {
    position: absolute;
    right: calc(22 * var(--pt));
    top: calc(8 * var(--pt));
    width: calc(440 * var(--pt) + var(--out) * 0.5);
    height: calc(200 * var(--pt));
    translate: var(--out) 0;
    z-index: 3;
}

/* My face on the throne I sit on at the table, with no crown: the crown is the hakem's. */
.menu .me {
    --a: calc(150 * var(--pt));
    position: absolute;
    right: 0;
    top: 0;
    width: var(--a);
    height: calc(var(--a) * 416 / 329);
    z-index: 1;
}

.menu .me .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    filter: var(--painted);
}

.menu .me .window {
    position: absolute;
    left: 20.5%;
    top: 32.5%;
    width: 58.5%;
    height: 52%;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    background: var(--cream);
}

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

/* The purse (Kit.Purse): my name, the coin and the number on one ivory plaque, the round plus at its end. */
.menu .purse {
    position: absolute;
    left: 0;
    right: calc(160 * var(--pt));
    top: calc(6 * var(--pt));
    height: var(--plaque-h);
    display: flex;
    align-items: center;
    gap: calc(8 * var(--pt));
    padding: 0 calc(6 * var(--pt)) 0 calc(30 * var(--pt));
    box-sizing: border-box;
    isolation: isolate;
    color: var(--navy-ink);
}

.menu .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;
    filter: var(--painted);
}

.menu.night .purse { color: var(--on-navy); }

.menu .purse .name {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: grid;
    align-items: center;
    font-size: max(calc(30 * var(--pt)), 11px);
    font-weight: 700;
}

.menu .purse .name span {
    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;
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: start;
}

.menu .purse .coins {
    flex: none;
    height: 100%;
    display: flex;
    align-items: center;
    gap: calc(8 * var(--pt));
}

.menu .purse .coins img { width: calc(var(--plaque-h) * 0.6); height: calc(var(--plaque-h) * 0.6); }
.menu .purse .coins b { font-size: max(calc(30 * var(--pt)), 11px); font-weight: 800; }

.menu .purse .plus {
    position: relative;
    flex: none;
    width: calc(var(--plaque-h) * 0.8);
    height: calc(var(--plaque-h) * 0.8);
    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); }

/* My farr (DoorFarr.cs), quiet under the purse with no card round it: my step's medal and name, my
   farr against where the next step begins, the road's bar, and my two places. */
.menu .farr {
    position: absolute;
    left: calc(10 * var(--pt));
    right: calc(170 * var(--pt));
    top: calc(72 * var(--pt));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: calc(8 * var(--pt));
    color: var(--room-ink);
    text-align: start;
}

.menu .farr:hover { filter: brightness(1.12); }

.menu .farr .step {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--pt));
    min-width: 0;
}

.menu .farr .medal {
    --r: calc(14 * var(--pt));
    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: max(calc(23 * var(--pt)), 9px);
    font-weight: 700;
    line-height: 1.3;
}

.menu .farr .numbers {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--pt));
    font-size: max(calc(21 * var(--pt)), 8.5px);
    white-space: nowrap;
}

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

.menu .farr .bar {
    grid-column: 1 / -1;
    height: max(3px, calc(7 * var(--pt)));
    margin-top: calc(4 * var(--pt));
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #e2b64a;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

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

.menu .farr .places {
    grid-column: 1 / -1;
    display: flex;
    gap: calc(14 * var(--pt));
    margin-top: calc(3 * var(--pt));
}

.menu .farr .places span {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: calc(5 * var(--pt));
    line-height: 1.2;
}

.menu .farr .places b { font-size: max(calc(19 * var(--pt)), 8px); font-weight: 700; }

.menu .farr .places small {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: max(calc(16 * var(--pt)), 8px);
    opacity: 0.8;
}

/* ---- Circle and Bazaar, the lit niches side by side in the second row on the right ---- */

.menu .niche {
    position: absolute;
    top: calc(252 * var(--pt));
    width: calc(182 * var(--pt));
    height: calc(249 * var(--pt));
    translate: var(--out) 0;
}

.menu .niche.to-circle { right: calc(220 * var(--pt)); }
.menu .niche.to-bazaar { right: calc(24 * var(--pt)); }
.menu .niche img { width: 100%; height: 100%; filter: var(--painted); }
.menu .niche:hover { filter: brightness(1.12); }

/* The word on the niche's painted plaque. */
.menu .niche .word {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 83.5%;
    height: 14%;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    text-align: center;
    font-size: calc(36 * var(--pt));
    font-weight: 700;
    line-height: calc(35 * var(--pt));
    color: var(--navy-ink);
}

/* The count on a way or a niche: crimson for what waits for me, gold for what the house has on. */
.menu .badge {
    --dot: calc(38 * var(--pt));
    position: absolute;
    right: 8%;
    top: 0;
    min-width: var(--dot);
    height: var(--dot);
    padding: 0 calc(4 * var(--pt));
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 999px;
    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.54);
    font-weight: 800;
    line-height: 1;
}

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

/* ---- Play online, and the ways under it ---- */

.menu .play-online {
    position: absolute;
    left: calc(530 * var(--pt));
    top: calc(690 * var(--pt));
    width: calc(610 * var(--pt));
    height: calc(118 * var(--pt));
    translate: 0 calc(var(--down) * 0.6);
}

.menu .play-online img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 calc(14 * var(--pt)) rgba(255, 190, 60, 0.75));
}

.menu .play-online:hover img { filter: drop-shadow(0 0 calc(14 * var(--pt)) rgba(255, 190, 60, 0.75)) brightness(1.1); }
.menu .play-online:active img { translate: 0 max(1px, calc(3 * var(--pt))); }

.menu .play-online .word {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    font-size: calc(68 * var(--pt));
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy-ink);
}

.menu .ways {
    position: absolute;
    left: calc(340 * var(--pt));
    right: calc(340 * var(--pt));
    top: calc(808 * var(--pt));
    display: flex;
    justify-content: center;
    gap: calc(2 * var(--pt));
    translate: 0 calc(var(--down) * 0.85);
}

.menu .way {
    position: relative;
    flex: none;
    width: calc(186 * var(--pt));
    height: calc(100 * var(--pt));
    display: grid;
    justify-items: center;
    align-content: start;
    color: var(--room-ink);
}

.menu .way .sign {
    width: calc(60 * var(--pt));
    height: calc(56 * var(--pt));
    object-fit: contain;
    filter: var(--painted);
}

.menu .way .word {
    width: 100%;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
    text-align: center;
    font-size: var(--word);
    font-weight: 700;
    line-height: 1.3;
}

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

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

[dir="rtl"] .menu .way .word,
[dir="rtl"] .menu .play-online .word,
[dir="rtl"] .menu .niche .word { direction: rtl; }

/* What the house refused, under the ways. */
.menu .line {
    position: absolute;
    left: calc(240 * var(--pt));
    right: calc(240 * var(--pt));
    top: calc(906 * var(--pt));
    margin: 0;
    text-align: center;
    font-size: max(calc(23 * var(--pt)), 10px);
    font-weight: 700;
    color: #ff9a8a;
    translate: 0 var(--down);
}

/* ---- the music player (MusicPlayer.cs): a note that opens a capsule of frosted glass ---- */

.menu .music {
    --u: calc(941 * var(--pt));
    position: relative;
    width: var(--round);
    height: var(--round);
    flex: none;
    color: var(--enamel-navy);
    direction: ltr;
}

.menu .music .note .base { width: 100%; height: 100%; }

.menu .music .note svg {
    position: absolute;
    left: 22%;
    top: 22%;
    width: 56%;
    height: 56%;
    fill: var(--on-navy);
    stroke: none;
    opacity: 0.6;
}

.menu .music.playing .note svg { opacity: 1; }

.menu .music .capsule {
    position: absolute;
    left: 0;
    bottom: calc(var(--round) + 14 * var(--pt));
    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.86);
    -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.4);
    z-index: 4;
}

.menu .music.small .capsule { display: none; }

.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(--enamel-navy);
    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(--enamel-navy);
    opacity: 0.45;
}

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

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

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

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

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

.menu .music .capsule .play svg { width: 70%; height: 70%; stroke: var(--on-navy); stroke-width: 2.6; }
.menu .music .capsule .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(--enamel-navy);
    margin: 0;
}

.menu .music .capsule .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 .stamp {
    position: absolute;
    left: calc(6 * var(--pt));
    bottom: calc(2 * var(--pt));
    font-size: max(10px, calc(17 * var(--pt)));
    color: rgba(244, 231, 196, 0.45);
    direction: ltr;
    translate: calc(-1 * var(--out)) var(--down);
}

/* ---- 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, .cup-back, .lanterns, .mypage) .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, .cup-back, .lanterns, .mypage) .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, .cup-back, .lanterns, .mypage) .card-page .glass-turner {
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease-in-out;
    cursor: var(--point);
}

:is(.menu, .kings-house, .table, .cup-back, .lanterns, .mypage) .card-page .big.hop0 { animation: hop0 0.4s ease-in-out; }
:is(.menu, .kings-house, .table, .cup-back, .lanterns, .mypage) .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, .cup-back, .lanterns, .mypage) .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, .cup-back, .lanterns, .mypage) .card-page h2 { margin: 0; font-size: calc(5.5 * var(--h)); font-weight: 800; }
:is(.menu, .kings-house, .table, .cup-back, .lanterns, .mypage) .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, .cup-back, .lanterns, .mypage) .card-page .story { margin: 0; font-size: calc(3.1 * var(--h)); line-height: 1.4; }
[dir="rtl"] :is(.menu, .kings-house, .table, .cup-back, .lanterns, .mypage) .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. */
[dir="rtl"] .menu {
    direction: ltr;
    font-family: var(--face);
}

[dir="rtl"] .menu .farr { direction: rtl; }

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

/* The sound switch among the round buttons: the navy enamel, its mark in cream, faint while off. */
.menu .round.sound-switch { color: var(--on-navy); }
.menu .round.sound-switch .base { width: 100%; height: 100%; }
.menu .round.sound-switch.off svg { opacity: 0.6; }

/* season.css */
/* A timed season at the door (Mahdi, 2026-10-18, the Halloween «شب دیوان»; the game's SeasonNow,
   Tiles.SeasonDoor and DoorLantern.cs): the season's own picture takes the room's place while it is
   open, and nothing else of the door changes (his word, 2026-11-02: an event changes the background
   only). Its pass's painted plaque stands apart and bold under the chests. */

/* A night season's picture (the Divan's, the only one) is a night already: by night the door's veil
   over it is a light one. Olympus's is by day and keeps the door's own veil (Seasons.Night). */
.menu.season-night.night { --veil: rgba(5, 9, 23, 0.25); }

.menu.season {
    background: linear-gradient(var(--veil), var(--veil)), var(--season) center / cover;
}

/* The pass as a card as wide as the chests (door.css), as the game draws it: the niche and the
   twigs are cut out of the painted board (2075 by 495), the rest is drawn, in the card's own measure
   of 150 high. */
.menu .pass-plaque {
    --ph: calc(150 * var(--pt));
    --nd: calc(122 * var(--pt));
    --nh: calc(var(--nd) * 1.4976);
    --tw: calc((var(--zone) - 130 * var(--pt)) * 0.62);
    --th: calc(var(--tw) / 0.45 * 495 / 2075);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--ph);
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point);
    transition: translate 0.25s ease-out, scale 0.25s ease-out, filter 0.25s ease-out;
}

.menu .pass-plaque > * { position: absolute; pointer-events: none; }

.menu .pass-plaque .plate {
    inset: 0;
    box-sizing: border-box;
    border: max(2px, calc(3 * var(--pt))) solid #c9992f;
    border-radius: calc(24 * var(--pt));
    background: #0d0d1d;
    box-shadow: inset 0 0 0 calc(5 * var(--pt)) #0d0d1d, inset 0 0 0 calc(6 * var(--pt)) rgba(242, 213, 143, 0.4), 0 calc(3 * var(--pt)) calc(8 * var(--pt)) rgba(0, 0, 0, 0.35);
}

/* The twigs and the moon, rising over the top edge past the niche. */
.menu .pass-plaque .twigs {
    width: var(--tw);
    right: calc(6 * var(--pt));
    top: calc(3 * var(--pt) - var(--th) * 0.24);
    height: calc(var(--th) * 0.24);
    background: url("../art/season/divan-plaque.png") calc(var(--tw) / -0.45 * 0.55) 0 / calc(var(--tw) / 0.45) var(--th) no-repeat;
}

/* The niche's gold ring, cut round out of the painting. */
.menu .pass-plaque .niche {
    left: calc(68 * var(--pt) - var(--nd) / 2);
    z-index: 1;
    top: calc(14 * var(--pt));
    translate: none;
    width: var(--nd);
    height: var(--nd);
    border-radius: 50%;
    background: url("../art/season/divan-plaque.png") calc(var(--nd) / 2 - var(--nh) * 2075 / 495 * 0.1174) calc(var(--nd) / 2 - var(--nh) * 0.5364) / calc(var(--nh) * 2075 / 495) var(--nh) no-repeat, #0d0d1d;
}

/* The lantern hung in the niche, quiet when nothing waits and lit brighter while a gift does. */
.menu .pass-plaque .lantern {
    left: calc(68 * var(--pt));
    top: 50%;
    z-index: 2;
    height: calc(86 * var(--pt));
    transform: translate(-50%, -50%);
    filter: brightness(0.85) saturate(0.9);
}

/* The words beside the niche, read from their own side in either language. */
.menu .pass-plaque .field {
    left: calc(134 * var(--pt));
    right: calc(16 * var(--pt));
    z-index: 2;
    top: 0;
    bottom: 0;
    color: #f2d58f;
    text-align: start;
    text-shadow: 0 1px 0 #2a1440;
}

.menu .pass-plaque .field > span { position: static; }

.menu .pass-plaque .field > span > * {
    position: absolute;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    overflow: clip visible;
}

.menu .pass-plaque .name { inset-inline: 0; top: calc(9 * var(--pt)); font-size: max(calc(30 * var(--pt)), 11px); font-weight: 800; color: #f2d58f; }
.menu .pass-plaque .tag { inset-inline-start: 0; width: 58%; top: calc(37 * var(--pt)); font-size: max(calc(19 * var(--pt)), 8px); font-weight: 800; color: #ffb347; }
.menu .pass-plaque .days { inset-inline-end: 0; width: 42%; top: calc(38 * var(--pt)); text-align: end; font-size: max(calc(17 * var(--pt)), 8px); color: #dfe5ee; }

/* The best prizes still to come, and how many more. */
.menu .pass-plaque .pp-prizes {
    position: absolute !important;
    inset-inline: 0;
    top: calc(62 * var(--pt));
    height: calc(34 * var(--pt));
    display: flex;
    align-items: center;
    gap: calc(8 * var(--pt));
}

.menu .pass-plaque .pp-prizes > * { position: static !important; }

.menu .pass-plaque .pictures {
    --side: calc(34 * var(--pt));
    flex: none;
    display: flex;
    gap: calc(5 * var(--pt));
    overflow: visible !important;
}

.menu .pass-plaque .prize { width: var(--side); height: var(--side); display: grid; place-items: center; flex: none; }
.menu .pass-plaque .prize > * { height: 100%; max-width: 100%; }
.menu .pass-plaque .more { flex: 1; min-width: 0; font-size: max(calc(17 * var(--pt)), 8px); font-weight: 800; color: #ffb347; }

/* Where I stand: the step, a thin bar to the next lantern, the flames still to it, and the call. */
.menu .pass-plaque .step { inset-inline-start: 0; width: 50%; top: calc(97 * var(--pt)); font-size: max(calc(16 * var(--pt)), 8px); font-weight: 800; color: #fff; }

.menu .pass-plaque .bar {
    inset-inline-start: 0;
    width: 50%;
    top: calc(118 * var(--pt));
    height: max(3px, calc(5 * var(--pt)));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
}

.menu .pass-plaque .bar i { display: block; height: 100%; border-radius: 999px; background: #ffb347; }
.menu .pass-plaque .to-go { inset-inline-start: 0; width: 50%; top: calc(123 * var(--pt)); font-size: max(calc(15 * var(--pt)), 8px); color: #dfe5ee; }

.menu .pass-plaque .call {
    inset-inline-end: 0;
    width: 46%;
    top: calc(104 * var(--pt));
    height: calc(30 * var(--pt));
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border: max(1px, calc(2 * var(--pt))) solid #8a5a12;
    border-radius: 999px;
    background: #ffb347;
    color: #2a1440;
    text-shadow: none;
    font-size: max(calc(17 * var(--pt)), 8px);
    font-weight: 800;
}

/* A Persian line reads in its own direction; the bar fills from the right. */
[dir="rtl"] .menu .pass-plaque .field { direction: rtl; }

/* A Persian line reaches higher and lower than a Latin one of its size, so rows that clear each
   other in English lay on each other in Persian (his word, 2026-11-02: «نوشته ها رو هم افتادند»): a
   little smaller, and each with its own room. */
[dir="rtl"] .menu .pass-plaque .name { top: calc(6 * var(--pt)); font-size: max(calc(27 * var(--pt)), 11px); }
[dir="rtl"] .menu .pass-plaque .tag { top: calc(40 * var(--pt)); font-size: max(calc(17 * var(--pt)), 8px); }
[dir="rtl"] .menu .pass-plaque .days { top: calc(42 * var(--pt)); font-size: max(calc(16 * var(--pt)), 8px); }
[dir="rtl"] .menu .pass-plaque .pp-prizes { top: calc(65 * var(--pt)); height: calc(30 * var(--pt)); }
[dir="rtl"] .menu .pass-plaque .pictures { --side: calc(30 * var(--pt)); }
[dir="rtl"] .menu .pass-plaque .more { font-size: max(calc(16 * var(--pt)), 8px); }
[dir="rtl"] .menu .pass-plaque .step { top: calc(96 * var(--pt)); font-size: max(calc(15 * var(--pt)), 8px); }
[dir="rtl"] .menu .pass-plaque .bar { top: calc(117.5 * var(--pt)); height: max(3px, calc(4 * var(--pt))); }
[dir="rtl"] .menu .pass-plaque .to-go { top: calc(122 * var(--pt)); font-size: max(calc(14 * var(--pt)), 8px); }

/* On a phone the words keep their least size and the card does not, and five rows no longer fit it.
   The flames still to go leave, the step and its bar say as much, and the rest stand in pixels from
   the card's middle, in either language. */
@media (max-width: 960px), (max-height: 540px) {
    .menu .pass-plaque { --mid: calc(75 * var(--pt)); }
    .menu .pass-plaque .plate { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
    .menu .pass-plaque .field .name { top: calc(var(--mid) - 27px); font-size: 11px; }
    .menu .pass-plaque .field .tag { top: calc(var(--mid) - 11.5px); font-size: 8px; }
    .menu .pass-plaque .field .days { top: calc(var(--mid) - 11.5px); font-size: 8px; }
    .menu .pass-plaque .field .pp-prizes { top: calc(var(--mid) + 0.5px); height: 11px; gap: 4px; }
    .menu .pass-plaque .field .pictures { --side: 11px; gap: 2px; }
    .menu .pass-plaque .field .more { font-size: 8px; }
    .menu .pass-plaque .field .step { top: calc(var(--mid) + 12px); font-size: 8px; }
    .menu .pass-plaque .field .bar { top: calc(var(--mid) + 23.5px); height: 2px; }
    .menu .pass-plaque .field .to-go { display: none; }
    .menu .pass-plaque .field .call { top: calc(var(--mid) + 11.5px); height: 14px; font-size: 8px; }
}

/* While a gift waits it shines: a halo breathes round the plate, the whole plaque swells a little
   as the letter does, the lantern is lit, and every four seconds a gleam runs round the niche's
   ring and along the gold rims to the pumpkins. Still again once the last gift is taken. */
.menu .pass-plaque.waits { animation: plaque-breathe 2.6s ease-in-out infinite; }

.menu .pass-plaque.waits .plate { animation: plaque-halo 2.6s ease-in-out infinite; }

.menu .pass-plaque.waits .lantern {
    filter: brightness(1.3) saturate(1.1) drop-shadow(0 0 calc(var(--ph) * 0.08) rgba(255, 179, 71, 0.85));
    animation: lantern-lit 2.6s ease-in-out infinite;
}

.menu .pass-plaque.waits .gleam {
    inset: 0;
    border-radius: calc(24 * var(--pt));
    background: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(255, 214, 140, 0.95) 50%, transparent 58%, transparent 100%) no-repeat;
    background-size: 30% 100%;
    mix-blend-mode: screen;
    opacity: 0.5;
    animation: plaque-gleam 4s linear infinite;
}

@keyframes plaque-breathe { 50% { transform: scale(1.025); } }

@keyframes plaque-halo {
    0%, 100% { filter: drop-shadow(0 0 calc(var(--ph) * 0.03) rgba(255, 179, 71, 0.35)); }
    50% { filter: drop-shadow(0 0 calc(var(--ph) * 0.12) rgba(255, 179, 71, 0.9)); }
}

@keyframes lantern-lit { 50% { filter: brightness(1.5) saturate(1.15) drop-shadow(0 0 calc(var(--ph) * 0.14) rgba(255, 179, 71, 1)); } }

@keyframes plaque-gleam {
    0% { background-position: -40% 0; }
    40% { background-position: 140% 0; }
    100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .menu .pass-plaque.waits, .menu .pass-plaque.waits .plate, .menu .pass-plaque.waits .lantern, .menu .pass-plaque.waits .gleam { animation: none; }
}

/* Under the pointer, or a finger held on it (Mahdi, 2026-10-19: «وقتی روش میری هاور بشه و انیمیشن داشته
   بشه روی برد نور بچرخه»), as the game does it (DoorLantern.cs, game 5e818de2): the plaque lifts by a
   twentieth of its own height and brightens a little warm, a light runs round its gold frame, and
   the lantern brightens. In over 0.18 s and back over 0.3 s, each smoothed at both ends. The lift is
   its own property, so it adds to the breath of a gift waiting rather than replace it. */
.menu .pass-plaque { --ease-both: cubic-bezier(0.42, 0, 0.58, 1); transition: translate 0.3s var(--ease-both), filter 0.3s var(--ease-both); }

.menu .pass-plaque:is(:hover, :active, :focus-visible) {
    translate: 0 calc(var(--ph) * -0.05);
    filter: brightness(1.12) sepia(0.06);
    transition-duration: 0.18s;
}

/* The light: a head and fourteen spots of trail behind it, over a sixth of the round, running
   clockwise once every 2.4 s round the card's gold edge. Each spot a soft warm disc added to the
   picture, smaller and fainter towards the tail. */
.menu .pass-plaque .orbit {
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s var(--ease-both);
}

.menu .pass-plaque:is(:hover, :active, :focus-visible) .orbit { opacity: 1; transition-duration: 0.18s; }

/* Each spot is the game's three discs added together, shrinking and fading towards the tail, on
   the card's gold edge. */
.menu .pass-plaque .orbit > i {
    --size: calc(var(--ph) * 0.1375 * (1 - 0.4 * var(--k) / 14));
    --fade: calc(1 - var(--k) / 15);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(255, 204, 115, calc(0.66 * var(--fade))) 0%,
        rgba(255, 204, 115, calc(0.45 * var(--fade))) 36%,
        rgba(255, 204, 115, calc(0.15 * var(--fade))) 68%,
        rgba(255, 204, 115, 0) 100%);
    mix-blend-mode: plus-lighter;
    offset-path: inset(0 round calc(24 * var(--pt)));
    offset-rotate: 0deg;
    animation: plaque-orbit 2.4s linear infinite;
    animation-delay: calc(-2.4s + var(--k) * 2.4s * 0.16 / 14);
    animation-play-state: paused;
}

.menu .pass-plaque:is(:hover, :active, :focus-visible) .orbit > i { animation-play-state: running; }

@keyframes plaque-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* While gifts wait, the light going round takes the place of the gleam every four seconds; the
   breathing halo stays under it. */
.menu .pass-plaque.waits:is(:hover, :active, :focus-visible) .gleam { opacity: 0; }

/* The lantern's light drawn towards (1.4, 1.3, 1.1). */
.menu .pass-plaque .lantern { transition: filter 0.3s var(--ease-both); }
.menu .pass-plaque:is(:hover, :active, :focus-visible) .lantern { filter: brightness(1.32) sepia(0.12); transition-duration: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    .menu .pass-plaque .orbit > i { animation: none; }
}

/* On a season's door the words on the room keep a dark edge, the picture being a busy one: the
   night's plum on a night season's, Olympus's own darkest (#1d1c22, the game's SeasonLook) on its. */
.menu.season-night .motto,
.menu.season-night .caption,
.menu.season-night .way .word,
.menu.season-night .farr {
    text-shadow: 0 0 calc(5 * var(--pt)) rgba(13, 8, 20, 0.95), 0 calc(1 * var(--pt)) calc(2 * var(--pt)) rgba(13, 8, 20, 0.95);
}

.menu.season-olymp .motto,
.menu.season-olymp .caption,
.menu.season-olymp .way .word,
.menu.season-olymp .farr {
    text-shadow: 0 0 calc(5 * var(--pt)) rgba(29, 28, 34, 0.9), 0 calc(1 * var(--pt)) calc(2 * var(--pt)) rgba(29, 28, 34, 0.9);
}

/* ---- Gods of Olympus's pass on the door (2026-11-22) ---- */

/* The same card, in the game's Olympus colours (SeasonLook.Olymp): the card #17304d, the niche's
   field Egyptian blue #2f5a8a, gold #c9a646, the darkest #1d1c22; not the Divan's night and violet.
   It has no painted plaque, as the Divan had divan-plaque.png: the niche's gold ring is drawn round
   the terracotta lamp, and there are no twigs over the top edge. */
.menu .pass-plaque.season-olymp .plate {
    border-color: #c9a646;
    background: #17304d;
    box-shadow: inset 0 0 0 calc(5 * var(--pt)) #17304d, inset 0 0 0 calc(6 * var(--pt)) rgba(242, 213, 143, 0.45), 0 calc(3 * var(--pt)) calc(8 * var(--pt)) rgba(0, 0, 0, 0.35);
}

.menu .pass-plaque.unpainted .twigs { display: none; }

.menu .pass-plaque.unpainted .niche {
    background: radial-gradient(closest-side, #2f5a8a 82%, #8a6418 83%, #f2d58f 87%, #c9a646 93%, #8a6418 98%, transparent 100%);
}

.menu .pass-plaque.season-olymp .field { text-shadow: 0 1px 0 #1d1c22; }
.menu .pass-plaque.season-olymp .call { color: #1d1c22; }

/* lanterns.css */
/* A season's pass, the ten lanterns (Pass.razor; the game's DoorPass, Mahdi 2026-10-18). Every size
   is a share of the screen's height, as the game measures it; the numbers are the game's own. */

.lanterns {
    --amber: #ffb347;
    --night: #2a1440;
    --silver-ink: #dfe5ee;
    --gold-ink: #f2d58f;
    --bone: #efe6d2;
    --plaque-h: calc(7.8 * var(--h));
    --paper-ink: #16234f;
    /* The row: the lanes' names at its start, then a column a step, never narrower than a fifth of
       the height, the lantern half a column wide and never over a tenth of the height. */
    --names: calc(20 * var(--h));
    --pitch: max(calc(20 * var(--h)), calc((var(--w) - var(--names) - 8 * var(--h)) / 17));
    --lantern: min(calc(var(--pitch) * 0.5), calc(10 * var(--h)));
    --upper: calc(3 * var(--h));
    --lower: calc(var(--upper) + 35 * var(--h));
    --art: calc(7.5 * var(--h));
    --lane: calc(2 * var(--h));

    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: var(--night) url("../art/season/divan-ground.jpg") center / cover;
    color: var(--bone);
    font-family: var(--face);
    user-select: none;
    -webkit-user-select: none;
}

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

.lanterns img { display: block; pointer-events: none; }

/* Over the title, which runs the width of the screen at the same height and took its presses. */
.lanterns .to-door { position: absolute; top: calc(4 * var(--h)); z-index: 1; }

/* The way back in the page's own colours, by day and by night (Mahdi, 2026-10-27), not the
   kit's ivory or lapis: the plaque turned in lanterns.js (the Divan's violet and gold, Olympus's
   Egyptian blue and gold), its arrow and name in the upper lane's gold. */
.lanterns .to-door {
    --plain: var(--season-plain);
    --plain-down: var(--season-plain-down);
    --paper-ink: var(--gold-ink);
}

/* The title, my flames and the time left, and one line on where flames come from. */
.lanterns .ln-title {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(4 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(6 * var(--h));
    font-weight: 800;
    line-height: 1.3;
    color: var(--bone);
    text-shadow: 0 0 calc(0.6 * var(--h)) var(--night), 0 calc(0.25 * var(--h)) 0 var(--night);
}

.lanterns .ln-standing,
.lanterns .ln-whence,
.lanterns .ln-why {
    position: absolute;
    left: 10%;
    right: 10%;
    margin: 0;
    text-align: center;
    text-shadow: 0 0 calc(0.5 * var(--h)) var(--night), 0 1px 0 var(--night);
}

.lanterns .ln-standing { top: calc(13.5 * var(--h)); font-size: calc(3 * var(--h)); font-weight: 800; color: var(--amber); }
.lanterns .ln-whence { top: calc(18 * var(--h)); font-size: calc(2.4 * var(--h)); opacity: 0.85; line-height: 1.3; }
.lanterns .ln-why { top: 45%; font-size: calc(3 * var(--h)); }

/* The two lanes across, with an arrow at each end that leafs them. */
.lanterns .ln-lanes {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(23 * var(--h));
    height: calc(69 * var(--h));
}

.lanterns .ln-row {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.lanterns .ln-row::-webkit-scrollbar { display: none; }

.lanterns .ln-strip {
    position: relative;
    width: calc(var(--names) + var(--pitch) * var(--steps) + 8 * var(--h));
    height: 100%;
}

.lanterns .ln-lane-name {
    position: absolute;
    inset-inline-start: calc(2 * var(--h));
    width: calc(var(--names) - 3 * var(--h));
    font-size: var(--lane);
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 0 calc(0.4 * var(--h)) var(--night), 0 1px 0 var(--night);
}

.lanterns .ln-lane-name.ln-upper { top: calc(var(--upper) + var(--lantern) * 0.3); color: var(--amber); }
.lanterns .ln-lane-name.ln-lower { top: calc(var(--lower) + var(--lantern) * 0.3); color: var(--silver-ink); }

/* The cords the lanterns hang from, each lane's piece laid end to end. */
.lanterns .ln-cord {
    position: absolute;
    inset-inline-start: var(--names);
    width: calc(var(--pitch) * var(--steps));
    height: calc(var(--lantern) * 0.1);
    background: url("../art/season/divan-lantern-cord.png") repeat-x left center / auto 100%;
}

.lanterns .ln-cord.ln-upper { top: calc(var(--upper) - var(--lantern) * 0.04); background-image: url("../art/season/divan-upper-cord.png"); }
.lanterns .ln-cord.ln-lower { top: calc(var(--lower) - var(--lantern) * 0.04); }

/* A step: a column with its upper lane, its flames over the free lane's cord, and its free lane. */
.lanterns .ln-step {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(var(--names) + var(--pitch) * var(--no));
    width: var(--pitch);
}

.lanterns .ln-step .ln-flames {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--lower) - var(--lane) * 2.1);
    text-align: center;
    font-size: var(--lane);
    color: var(--amber);
    text-shadow: 0 0 calc(0.4 * var(--h)) var(--night), 0 1px 0 var(--night);
}

.lanterns .ln-step.ln-far .ln-flames { opacity: 0.55; }

.lanterns .ln-lane {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lanterns .ln-lane.ln-upper { top: var(--upper); color: var(--gold-ink); }
.lanterns .ln-lane.ln-lower { top: var(--lower); color: var(--silver-ink); }

/* The lantern hangs from the cord by its ring: unlit while far, lit once taken, rayed and breathing
   while its gift waits, and dimmed with its padlock while its upper lane is locked. */
.lanterns .ln-lantern {
    position: relative;
    width: var(--lantern);
    height: calc(var(--lantern) * 1.3);
    flex: none;
}

.lanterns .ln-lantern img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.lanterns .ln-far .ln-lantern img { opacity: 0.8; }
.lanterns .ln-locked .ln-lantern img { filter: grayscale(0.4) brightness(0.65); opacity: 0.9; }

.lanterns .ln-lantern .ln-lock {
    position: absolute;
    left: 50%;
    top: 40%;
    height: 42%;
    width: auto;
    transform: translateX(-50%);
    filter: none;
    opacity: 1;
}

.lanterns .ln-open .ln-lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 179, 71, 0.55), rgba(255, 179, 71, 0.18) 45%, transparent 70%);
    animation: lantern-rays 2.6s ease-in-out infinite;
    pointer-events: none;
}

.lanterns .ln-open .ln-lantern:hover img { transform: scale(1.06); }
.lanterns .ln-open .ln-lantern img { transition: transform 0.12s; }

@keyframes lantern-rays { 50% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.88); } }

/* Under it the gift: each thing's picture side by side, then their names, a line each. */
.lanterns .ln-gift {
    margin-top: calc(var(--lantern) * 0.06);
    width: calc(var(--pitch) * 0.9);
    height: var(--art);
    display: flex;
    justify-content: center;
    gap: calc(var(--art) * 0.08);
}

.lanterns .ln-far .ln-gift, .lanterns .ln-locked .ln-gift { opacity: 0.75; }

.lanterns .ln-gift .ln-thing {
    height: 100%;
    flex: 0 1 var(--art);
    min-width: 0;
    display: grid;
    place-items: center;
    transition: transform 0.12s;
}

.lanterns .ln-gift .ln-thing:hover { transform: scale(1.08); }
.lanterns .ln-gift .ln-thing > :not(.ln-seal) { height: var(--art); max-height: var(--art); }

.lanterns .ln-said {
    margin-top: calc(0.6 * var(--h));
    width: calc(var(--pitch) * 0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--lane);
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 0 calc(0.4 * var(--h)) var(--night), 0 1px 0 var(--night), 0 0 2px var(--night);
}

.lanterns .ln-said > span { max-width: 100%; }
.lanterns .ln-far .ln-said, .lanterns .ln-locked .ln-said { opacity: 0.7; }

/* A thing of a gift drawn as what it is (GiftArt.razor). */
.ga { display: block; max-width: 100%; max-height: 100%; }
.ga-plain { width: 100%; height: 100%; object-fit: contain; }
.ga-card { height: 100%; width: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 8%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.ga-round { height: 100%; aspect-ratio: 1; border-radius: 50%; background: center / cover no-repeat; box-sizing: border-box; }
.ga-throne { position: relative; height: 100%; aspect-ratio: 340 / 440; }
.ga-throne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ga-throne .ga-sitter { position: absolute; left: 22%; top: 28%; width: 56%; height: 62%; border-radius: 50%; background: #2a1440 center 20% / cover no-repeat; }
.ga-face { border: max(1.5px, calc(0.35 * var(--h))) solid var(--amber, #ffb347); }
.ga-table { border: max(2px, calc(0.5 * var(--h))) solid #c9974a; box-shadow: 0 0 0 1px rgba(42, 29, 16, 0.6); }

/* The arrows at the row's two ends (BacksPage.Chevron), on the kit's round enamel. */
.lanterns .ln-leaf {
    position: absolute;
    top: calc(var(--upper) + 18.5 * var(--h) + var(--lantern) * 0.35 - 4.25 * var(--h));
    z-index: 2;
    width: calc(8.5 * var(--h));
    height: calc(8.5 * var(--h));
    border-radius: 50%;
    background: var(--round-main, url("../art/kit/flat/round-main.png")) center / contain no-repeat;
}

.lanterns .ln-leaf.ln-before { inset-inline-start: calc(1.5 * var(--h)); }
.lanterns .ln-leaf.ln-after { inset-inline-end: calc(1.5 * var(--h)); }
.lanterns .ln-leaf:hover { filter: brightness(1.12); }

.lanterns .ln-leaf i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28%;
    height: 28%;
    border: solid #f6ecd4;
    border-width: max(2px, calc(0.7 * var(--h))) max(2px, calc(0.7 * var(--h))) 0 0;
    transform: translate(-30%, -50%) rotate(45deg);
}

.lanterns .ln-leaf.ln-before i { transform: translate(-70%, -50%) rotate(-135deg); }
[dir="rtl"] .lanterns .ln-leaf.ln-before i { transform: translate(-30%, -50%) rotate(45deg); }
[dir="rtl"] .lanterns .ln-leaf.ln-after i { transform: translate(-70%, -50%) rotate(-135deg); }

/* What was just taken, and the season's pack worn on the spot. */
.lanterns .ln-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(1.5 * var(--h));
    height: calc(6.5 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(3 * var(--h));
}

.lanterns .ln-foot p {
    margin: 0;
    font-size: calc(3 * var(--h));
    text-shadow: 0 0 calc(0.5 * var(--h)) var(--night), 0 1px 0 var(--night);
}

/* A gift's page (GiftPage.razor) in the card's page's dress: the thing large on the left. */
.card-page .big-gift {
    flex: 0 0 auto;
    width: calc(50 * var(--h));
    height: calc(50 * var(--h));
    display: grid;
    place-items: center;
    animation: lift 0.4s ease-out;
}

.card-page .big-gift .ga-face { border-width: calc(1 * var(--h)); }
.card-page .big-gift .ga-card { height: 90%; }

/* The pack as a fan of its four kings, the way a hand is held. */
.card-page .fan {
    position: relative;
    flex: 0 0 auto;
    width: calc(50 * var(--h));
    height: calc(60 * var(--h));
    animation: lift 0.4s ease-out;
}

.card-page .fan img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(21 * var(--h));
    aspect-ratio: 5 / 7;
    object-fit: cover;
    border-radius: calc(1.2 * var(--h));
    box-shadow: 0 calc(0.4 * var(--h)) calc(1 * var(--h)) rgba(0, 0, 0, 0.45);
    transform: translate(calc(-50% + (var(--i) - 1.5) * 5.5 * var(--h)), -50%) rotate(calc((var(--i) - 1.5) * 9deg));
    transform-origin: 50% 130%;
}

.card-page.gift-page .panel { display: flex; flex-direction: column; }
.card-page.gift-page .story { white-space: pre-line; }

.card-page.gift-page .ways {
    margin-top: auto;
    display: flex;
    gap: calc(2.4 * var(--h));
}

.card-page.gift-page .ways .kit {
    --bh: calc(6.6 * var(--h));
    flex: 1;
    min-width: 0;
    padding: 0 calc(3 * var(--h));
    font-size: calc(2.8 * var(--h));
}

/* A gift just taken, its goods one at a time (GiftReveal.razor), as the game's GiftReveal lays it:
   the chest's showing beat on the kit's panel, ivory by day and the night's paper by night. */
.lanterns .reveal {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(10, 8, 5, 0.8);
    cursor: var(--point);
    outline: none;
    animation: open 0.15s ease-out;
}

.lanterns .reveal .rv-card {
    --wide: min(calc(62 * var(--h)), calc(var(--w) * 0.8));
    position: absolute;
    left: 50%;
    top: calc(52 * var(--h));
    width: var(--wide);
    height: calc(var(--wide) * 0.92);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: calc(var(--wide) * 0.05) calc(var(--wide) * 0.06);
    display: grid;
    grid-template-rows: auto 50% auto auto auto;
    align-content: center;
    gap: calc(var(--wide) * 0.025);
    justify-items: center;
    border-radius: calc(1.8 * var(--h));
    background: #fbf4e2;
    border: max(1px, calc(0.2 * var(--h))) solid #c9974a;
    color: #2a1d10;
    text-align: center;
    --soft: #6b5332;
    --cobalt: #1f3f8f;
    animation: rv-in 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}

/* The rarity's glow behind the panel, as the game rings it: out to about 0.92 of the panel's longer
   side, in the rarity's colour. */
.lanterns .reveal { --glow: 226, 182, 74; }
.lanterns .reveal.rv-rare { --glow: 74, 127, 214; }
.lanterns .reveal.rv-epic { --glow: 155, 89, 208; }
.lanterns .reveal.rv-legendary { --glow: 255, 179, 71; }
.lanterns .reveal.rv-limited { --glow: 232, 238, 246; }

.lanterns .reveal .rv-glow {
    position: absolute;
    left: 50%;
    top: calc(52 * var(--h));
    width: calc(min(calc(62 * var(--h)), calc(var(--w) * 0.8)) * 1.84);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--glow), 0.5), rgba(var(--glow), 0.28) 45%, rgba(var(--glow), 0.1) 75%, rgba(var(--glow), 0));
    pointer-events: none;
}

@keyframes rv-in { from { transform: translate(-50%, -50%) scale(0.6); } }

.lanterns .reveal .rv-count { min-height: 1.2em; font-size: calc(var(--wide) * 0.045); color: var(--soft); }

.lanterns .reveal .rv-picture {
    width: 68%;
    height: 100%;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lanterns .reveal .rv-picture > * { height: 100%; max-height: 100%; max-width: 100%; }
.lanterns .reveal .rv-picture .ga-face { border-width: calc(0.8 * var(--h)); }
.lanterns .reveal .rv-card > b { font-size: calc(var(--wide) * 0.075); font-weight: 800; line-height: 1.1; text-wrap: balance; }
.lanterns .reveal .rv-card > small { font-size: calc(var(--wide) * 0.048); line-height: 1.2; }

/* Kind and rarity in the rarity's colour, the game's own: common soft ink, rare cobalt, epic
   purple, legendary gold. */
.lanterns .reveal .rv-kind { color: var(--soft); }
.lanterns .reveal .rv-kind.rare { color: var(--cobalt); }
.lanterns .reveal .rv-kind.epic { color: #7a2e8c; }
.lanterns .reveal .rv-kind.legendary { color: #a8741a; }
.lanterns .reveal .rv-kind.limited { color: #4a5a78; }
.lanterns .reveal .rv-note { color: var(--soft); white-space: pre-line; }

.lanterns .reveal .rv-hint {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(93 * var(--h));
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(2.8 * var(--h));
    color: rgba(246, 230, 192, 0.8);
    pointer-events: none;
}

/* "skip the rest", the kit's plain plaque at the top right (the top left in Persian), only while
   more than one thing is left. */
.lanterns .reveal .rv-skip {
    position: absolute;
    top: calc(3 * var(--h));
    inset-inline-end: calc(3 * var(--h));
    height: var(--plaque-h);
    padding: 0 calc(4 * var(--h));
    isolation: isolate;
    color: var(--paper-ink);
    font-size: calc(3 * var(--h));
    font-weight: 800;
}

.lanterns .reveal .rv-skip::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(--plaque-h) * 0.5) stretch;
}

.lanterns .reveal .rv-skip:hover { filter: brightness(1.1); }

/* The season's pack worn on the spot, under the panel. */
.lanterns .reveal .rv-wear {
    position: absolute;
    left: 50%;
    top: calc(52 * var(--h) + min(calc(62 * var(--h)), calc(var(--w) * 0.8)) * 0.46 + 2 * var(--h));
    transform: translateX(-50%);
    --bh: calc(7 * var(--h));
}

/* ---- a gift's three looks (Mahdi, 2026-10-19), the same in the game ---- */

/* Ready to take: the gift at full colour on a breathing amber halo, the lantern rayed, and a call
   to take it on the lantern's foot. */
.lanterns .ln-open .ln-gift { position: relative; }

.lanterns .ln-open .ln-thing::before {
    content: "";
    position: absolute;
    inset: -22%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 179, 71, 0.42) 58%, rgba(255, 179, 71, 0.3) 75%, rgba(255, 179, 71, 0.14) 90%, rgba(255, 179, 71, 0));
    animation: ln-halo 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ln-halo { 50% { opacity: 0.4; } }

.lanterns .ln-open .ln-thing { position: relative; animation: ln-ready 2.6s ease-in-out infinite; }

@keyframes ln-ready { 50% { transform: scale(1.06); filter: drop-shadow(0 0 calc(0.8 * var(--h)) rgba(255, 179, 71, 0.9)); } }

/* A gift's pictures run left to right in every language, as the game lays them, so its seal is on the right. */
.lanterns .ln-gift { position: relative; direction: ltr; }

/* The call to take a ready gift: the kit's navy button over its picture's foot, half a column wide,
   and pressing it takes the gift, as the lantern does. */
.lanterns .ln-gift .ln-take {
    position: absolute;
    left: 50%;
    top: calc(var(--art) - var(--lane) * 0.9);
    transform: translateX(-50%);
    z-index: 2;
    width: calc(var(--pitch) * 0.36);
    height: calc(var(--lane) * 1.2 * 1.25);
    padding: 0;
    border: max(1px, calc(0.15 * var(--h))) solid #8a5a12;
    border-radius: 999px;
    background: #ffb347;
    color: #2a1440;
    font-size: calc(var(--lane) * 0.95);
    font-weight: 800;
    line-height: 1;
}

.lanterns .ln-gift .ln-take:hover { filter: brightness(1.1); }

/* Taken: the gift readable but quiet, its gold seal with a check on its corner, the lantern lit
   and still. */
.lanterns .ln-taken .ln-gift { position: relative; }
.lanterns .ln-taken .ln-thing > :not(.ln-seal) { filter: saturate(0.35) brightness(0.7); }
.lanterns .ln-thing { position: relative; isolation: isolate; }
.lanterns .ln-taken .ln-said { opacity: 0.7; }
.lanterns .ln-taken .ln-lantern img { filter: brightness(0.9); }

.lanterns .ln-seal {
    position: absolute;
    top: calc(var(--art) * -0.0765);
    right: calc(var(--art) * -0.0765);
    z-index: 1;
    width: calc(var(--art) * 0.34);
    height: calc(var(--art) * 0.34);
    border-radius: 50%;
    background: radial-gradient(circle, #e2b64a 74%, #8a6418 75%, #8a6418 80%, #e2b64a 81%);
    box-shadow: 0 0 0 calc(var(--art) * 0.014) rgba(0, 0, 0, 0.35);
}

.lanterns .ln-seal::after {
    content: "";
    position: absolute;
    left: 34%;
    top: 20%;
    width: 24%;
    height: 44%;
    border: solid #2a1a08;
    border-width: 0 calc(var(--art) * 0.034) calc(var(--art) * 0.034) 0;
    transform: rotate(40deg);
}

/* Not open yet: the gift a silhouette, its names faint, the lantern dark, and the flames still to go. */
.lanterns .ln-far .ln-gift,
.lanterns .ln-locked .ln-gift { opacity: 1; }
.lanterns .ln-far .ln-thing,
.lanterns .ln-locked .ln-thing { filter: grayscale(1) brightness(0.15) sepia(0.6) hue-rotate(220deg) saturate(1.4); }
.lanterns .ln-far .ln-said,
.lanterns .ln-locked .ln-said { opacity: 0.45; }
.lanterns .ln-far .ln-lantern img { opacity: 0.85; filter: brightness(0.56) saturate(0.6) sepia(0.12) hue-rotate(220deg); }
.lanterns .ln-locked .ln-lantern img:not(.ln-lock) { filter: brightness(0.4) saturate(0.4); }

.lanterns .ln-to-go {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: calc(var(--pitch) * 0.96);
    text-align: center;
    font-size: var(--lane);
    font-weight: 800;
    color: #ffb347;
    text-shadow: 0 0 calc(0.4 * var(--h)) #2a1440, 0 1px 0 #2a1440;
    pointer-events: none;
}

/* The page turns on its side on a phone held upright, as the door and the table do. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .lanterns {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

/* ---- Gods of Olympus's pass, the lamps of Olympus (2026-11-22) ---- */

/* The same page on its own ground, the evening sky over Olympus, in Egyptian blue and gold: not a
   night season, so no violet. The free lane's oil lamps are terracotta as painted, hung from a rope,
   and its words the lamps' warm clay; the upper lane's gilt bronze, from a chain. What the Divan's
   page shadows in violet it shadows in Olympus's darkest, and a gift not open yet goes to the sky's
   blue. The colours are the game's SeasonLook.Olymp. */
.lanterns.season-olymp {
    --night: #1d1c22;
    --silver-ink: #f0c4a4;
    --gold-ink: #f2d58f;
    background-image: url("../art/season/olymp-ground.jpg");
}

.lanterns.season-olymp .ln-cord { background-image: url("../art/season/olymp-lamp-cord.png"); }
.lanterns.season-olymp .ln-cord.ln-upper { background-image: url("../art/season/olymp-upper-cord.png"); }

.lanterns.season-olymp .ln-far .ln-thing,
.lanterns.season-olymp .ln-locked .ln-thing { filter: grayscale(1) brightness(0.15) sepia(0.6) hue-rotate(185deg) saturate(1.6); }
.lanterns.season-olymp .ln-far .ln-lantern img { filter: brightness(0.56) saturate(0.6) sepia(0.12) hue-rotate(185deg); }

.lanterns.season-olymp .ln-to-go { text-shadow: 0 0 calc(0.4 * var(--h)) var(--night), 0 1px 0 var(--night); }
.lanterns.season-olymp .ln-gift .ln-take { color: #1d1c22; }

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

/* 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 coins of the purse over the door's own, counting up as they land: the plaque's ends lie a
   little past the place they cover, so the number is as long as there. */
.menu .opening .wallet {
    position: absolute;
    display: flex;
    align-items: center;
    gap: calc(8 * var(--pt));
    box-sizing: content-box;
    margin-left: calc(var(--plaque-h) * -0.34);
    padding: 0 calc(var(--plaque-h) * 0.34);
    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.6); height: calc(var(--plaque-h) * 0.6); }
.menu .opening .wallet b { font-size: max(calc(30 * var(--pt)), 11px); 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));
    /* Its suns are alight (LitSuns), under everything the card holds. */
    --sun: calc(6 * var(--h));
    --sun-inset: calc(1.2 * var(--h));
    background: #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);
}

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

/* suns.css */
/* The suns in a panel's corners, alight (PanelSuns.cs, Shared/LitSuns.razor). The rays turn once
   in 48 s, the light breathes in 3.6 s, and each corner keeps its own time. The picture is tinted
   as the game modulates it: by day the paper's own shade warming a little towards gold, at night
   the lapis shade warming further. */

.lit-suns {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.lit-sun {
    position: absolute;
    width: var(--sun);
    height: var(--sun);
}

.lit-sun.tl { left: var(--sun-inset); top: var(--sun-inset); }
.lit-sun.tr { right: var(--sun-inset); top: var(--sun-inset); }
.lit-sun.bl { left: var(--sun-inset); bottom: var(--sun-inset); }
.lit-sun.br { right: var(--sun-inset); bottom: var(--sun-inset); }

.lit-sun i {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
}

/* The halo, 1.25 to 1.55 suns across, gold that fades to nothing at its rim. */
.lit-sun .halo {
    width: 155%;
    height: 155%;
    margin: -77.5% 0 0 -77.5%;
    background: radial-gradient(closest-side, #ffc54d 0%, rgba(255, 197, 77, 0.38) 50%, rgba(255, 197, 77, 0) 100%);
    animation: sun-halo 1.8s ease-in-out infinite alternate;
}

@keyframes sun-halo {
    from { transform: scale(0.806); opacity: 0.34; }
    to { transform: scale(1); opacity: 0.6; }
}

html.night .lit-sun .halo { animation-name: sun-halo-night; }

@keyframes sun-halo-night {
    from { transform: scale(0.806); opacity: 0.26; }
    to { transform: scale(1); opacity: 0.52; }
}

/* The rays: the picture multiplied by its tint and cut to its own shape. */
.lit-sun .rays {
    width: 100%;
    height: 100%;
    margin: -50% 0 0 -50%;
    border-radius: 0;
    background: url("../art/kit/sun.png") center / 100% 100% no-repeat;
    background-blend-mode: multiply;
    -webkit-mask: url("../art/kit/sun.png") center / 100% 100% no-repeat;
    mask: url("../art/kit/sun.png") center / 100% 100% no-repeat;
    animation: sun-turn 48s linear infinite, sun-tint 1.8s ease-in-out infinite alternate;
}

@keyframes sun-turn {
    from { transform: rotate(var(--sun-from, 0deg)); }
    to { transform: rotate(calc(var(--sun-from, 0deg) + 1turn)); }
}

@keyframes sun-tint {
    from { background-color: #ffffff; }
    to { background-color: #fff0d3; }
}

html.night .lit-sun .rays { animation-name: sun-turn, sun-tint-night; }

@keyframes sun-tint-night {
    from { background-color: #867c74; }
    to { background-color: #cba65e; }
}

/* The hollow middle filled with warm light. */
.lit-sun .core {
    width: 47%;
    height: 47%;
    margin: -23.5% 0 0 -23.5%;
    background: radial-gradient(closest-side, #fff0bd 0%, rgba(255, 240, 189, 0.38) 50%, rgba(255, 240, 189, 0) 100%);
    animation: sun-core 1.8s ease-in-out infinite alternate;
}

@keyframes sun-core {
    from { transform: scale(0.894); opacity: 0.7; }
    to { transform: scale(1); opacity: 1; }
}

/* No two in step: each corner its own breath and its own start on the turn. */
.lit-sun.tr { --sun-from: 97deg; }
.lit-sun.bl { --sun-from: 211deg; }
.lit-sun.br { --sun-from: 302deg; }
.lit-sun.tr i { animation-delay: -1.1s; }
.lit-sun.bl i { animation-delay: -2.3s; }
.lit-sun.br i { animation-delay: -0.6s; }

@media (prefers-reduced-motion: reduce) {
    .lit-sun i { animation: none !important; }
    .lit-sun .halo { transform: scale(0.9); opacity: 0.45; }
    .lit-sun .rays { background-color: #fff7e8; }
    html.night .lit-sun .rays { background-color: #a9916a; }
}

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

/* A back on sale has a class of its own: the table's .card .back (play.css) is the back hidden
   behind a turning card, and it made this one unseen. It gives way when the card is short: a back
   already bought has two pills under it, and the gold one fell off the card's foot. */
.bazaar .card .sale-back {
    flex: 0 1 auto;
    min-height: 0;
    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 {
    position: relative;
    flex: 1;
    width: 90%;
    min-height: calc(8 * var(--h));
    border-radius: calc(1 * var(--h));
    background: center / cover;
}

/* Laid against the picture, not in it: a share of a flexed box's height falls back to the
   medallion's own size, and it then hangs over the name below. */
.bazaar .table-picture img {
    position: absolute;
    inset: 20% 0;
    width: 100%;
    height: 60%;
    object-fit: contain;
}

.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 .sale-back { height: calc(15 * var(--h)); }
.bazaar .cards.with-limited .table-picture { flex: none; height: calc(15 * var(--h)); }
.bazaar .card.small .sale-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. */
:is(.pairs, .lanterns) .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);
}

:is(.pairs, .lanterns) .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;
}

:is(.pairs, .lanterns) .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. */
:is(.pairs, .lanterns) .to-door {
    left: calc(3 * var(--h));
    width: calc(24 * var(--h));
}

:is(.pairs, .lanterns) .to-door:hover { filter: brightness(1.1); }

:is(.pairs, .lanterns) .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)));
}

:is(.pairs, .lanterns) .to-door:active::after { visibility: hidden; }

:is(.pairs, .lanterns) .to-door .arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--plaque-h);
    height: var(--plaque-h);
}

:is(.pairs, .lanterns) .to-door .arrow path { stroke: var(--paper-ink); stroke-width: 7.5; fill: none; }
:is(.pairs, .lanterns) .to-door .arrow polygon { fill: var(--paper-ink); }

:is(.pairs, .lanterns) .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; }

/* ---- a name on a board opens that player's card (LadderView.OpenCard) ---- */

.ladder button.row { display: block; text-align: start; }
.ladder button.row:not(:disabled):hover,
.ladder .podium .step:hover { filter: brightness(1.03); }
.ladder button.row:not(:disabled):active,
.ladder .podium .step:active { filter: brightness(0.97); }

/* A step of the podium: its pieces where the podium lays them, pressed anywhere from the name down. */
.ladder .podium .step { position: absolute; inset: 0; pointer-events: none; }
.ladder .podium .opens { position: absolute; pointer-events: auto; }

/* The card over the board wears my page's clothes, laid where the board lies and without my page's ground,
   by day or by night (night.css lays the ground on html.night .mypage). */
.ladder + .mypage.board-card {
    inset: 0 auto auto 0;
    width: var(--w);
    height: calc(100 * var(--h));
    transform: none;
    box-shadow: none;
    background: none;
    z-index: 30;
}

/* The page turns on its side on a phone held upright, as the door and the table do, and the card
   over it with it. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .ladder,
    .ladder + .mypage.board-card {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

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

:is(.mypage, .lanterns) .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;
}

:is(.mypage, .lanterns) .kit > span { min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; }
:is(.mypage, .lanterns) .kit.main { color: var(--on-navy); }
:is(.mypage, .lanterns) .kit.danger { color: var(--crimson); }

:is(.mypage, .lanterns) .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;
}

:is(.mypage, .lanterns) .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;
}

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

:is(.mypage, .lanterns) button.kit:not(:disabled):hover { filter: brightness(1.15); }

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

:is(.mypage, .lanterns) 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);
}

:is(.mypage, .lanterns) 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,
.mypage .player-card {
    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 red dot of something new on a card (the game's MyPage.DrawNew): a chest waiting on one of my badges. In a pale rim, so it reads on any picture. */
.mypage .tab .new-dot {
    position: absolute;
    right: 8%;
    top: 8%;
    width: calc(var(--card) * 0.14);
    height: calc(var(--card) * 0.14);
    border-radius: 50%;
    background: var(--red, #bf2a26);
    box-shadow: 0 0 0 max(1.5px, calc(var(--card) * 0.02)) var(--on-navy, #f6ecd4);
}

[dir="rtl"] .mypage .tab .new-dot { right: auto; left: 8%; }

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

/* A chest waiting on a badge (Mahdi, 2026-10-25, the game's BadgeArt.DrawChestGlow): a gold
   border round the badge that breathes, and a bright spark running round it once every two
   seconds with a tail fading behind it. The same on my page and on the sash's own page. */
.mypage .sash .held.chest .medal-box::before,
.mypage.sashpage .medal-cell.chest .art::before {
    content: "";
    position: absolute;
    inset: calc(var(--r) * -0.14);
    border-radius: 50%;
    border: max(2px, calc(var(--r) * 0.08)) solid rgba(226, 182, 74, 0.55);
    box-shadow: 0 0 calc(var(--r) * 0.3) calc(var(--r) * 0.06) rgba(226, 182, 74, 0.3), inset 0 0 calc(var(--r) * 0.2) rgba(226, 182, 74, 0.2);
    animation: chest-breathe 2.6s ease-in-out infinite;
    pointer-events: none;
}

.mypage .sash .held.chest .medal-box::after,
.mypage.sashpage .medal-cell.chest .art::after {
    content: "";
    position: absolute;
    inset: calc(var(--r) * -0.14);
    border-radius: 50%;
    padding: max(2px, calc(var(--r) * 0.08));
    box-sizing: border-box;
    background: conic-gradient(from 0deg, transparent 0 62%, rgba(255, 250, 220, 0) 62%, rgba(255, 250, 220, 1) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: chest-run 2s linear infinite;
    pointer-events: none;
}

@keyframes chest-breathe {
    50% {
        border-color: rgba(226, 182, 74, 1);
        box-shadow: 0 0 calc(var(--r) * 0.5) calc(var(--r) * 0.14) rgba(226, 182, 74, 0.5), inset 0 0 calc(var(--r) * 0.2) rgba(226, 182, 74, 0.35);
    }
}

@keyframes chest-run {
    to { transform: rotate(360deg); }
}

.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 wears the breathing border and its spark (with my page's, above), the tin at its lower edge with a small "take". */

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

/* No house behind the table: this evening's two numbers, a label and its number on each line. */
.mypage .pc-tonight {
    width: 86%;
    margin-top: calc(1.2 * var(--h));
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--h));
    font-size: calc(2.3 * var(--h));
}

.mypage .pc-tonight small { align-self: center; font-weight: 700; font-size: inherit; color: var(--ink-soft); }
.mypage .pc-tonight .pc-row { display: flex; justify-content: space-between; gap: calc(1 * var(--h)); color: var(--ink); }
.mypage .pc-tonight .pc-row b { color: var(--cobalt); }
.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);
}

/* Seven things on my look stand four and three (MyPage.LayLook), since the card pack joined them (2026-10-18). */
.mypage .things.seven .thing { width: calc((100% - 6.6 * var(--h)) / 4); }

/* The card packs I hold, each by its king of hearts (MyPage's "pack"). */
.mypage .thrones.packs { grid-auto-rows: calc(30 * var(--h)); }
.mypage .pack-tile .picture > img { border-radius: calc(1 * var(--h)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }

/* Connecting Google and Apple, in the account's rows (2026-11-01). */
.mypage .does .vouch.google { width: min(100%, calc(44 * var(--h))); }
.mypage .does button.vouch.apple { width: min(100%, calc(44 * var(--h))); }
.mypage .does .tied { color: var(--green, #1f5a3a); font-weight: 600; }

/* ---- another game's card (2026-11-05): six numbers three to a row, and head to head alone at pasur and haft khabis ---- */

.mypage .record.six { grid-template-columns: repeat(6, 1fr); }
.mypage .record.six .number { grid-column: span 2; }
.mypage .record.six .near { grid-column: span 3; }
.mypage .record.six.named .near:only-of-type { grid-column: span 6; }

.mypage .pc-versus.alone { grid-template-columns: 1fr; }
.mypage .pc-versus.alone > * { grid-column: 1 / -1; }

/* ---- a limited good's numbers under its name (CopyNumbers): the worn one first, the others
   held of it after, softer; in the limited crimson, everywhere my look names one ---- */

.mypage .copy-nos {
    flex: none;
    max-width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 calc(1 * var(--h));
    font-size: calc(2.2 * var(--h));
    line-height: 1.25;
    font-weight: 800;
    color: var(--crimson);
    white-space: nowrap;
}

.mypage .copy-nos bdi + bdi { opacity: 0.6; }
.mypage .lk-tile .copy-nos { font-size: calc(1.8 * var(--h)); }
.mypage .throne-tile .copy-nos { font-size: calc(1.9 * var(--h)); }
.mypage .copy-nos.lk-now-no { font-size: calc(2.6 * var(--h)); }
.mypage .copy-nos.tb-no { justify-content: flex-start; font-size: calc(2.6 * var(--h)); }

/* ---- my look's seven cards, the picture first (2026-11-05): his word on the look tab, «عکس بزرگتر
   بشه»: the picture had 36 of a card's 195 px at 1600 by 820. The kind's word, the name and the
   button are a size smaller and the card's edges thinner, so the picture takes the room they gave. ---- */

.mypage .things .thing { padding: calc(1.1 * var(--h)) 0 calc(1.2 * var(--h)); }
.mypage .things .thing .picture { width: 90%; margin-bottom: calc(0.5 * var(--h)); }
.mypage .things .thing .heading { font-size: calc(1.8 * var(--h)); line-height: 1.2; }
.mypage .things .thing .chosen { font-size: calc(2.4 * var(--h)); line-height: 1.2; }

.mypage .things .thing .change {
    --bh: calc(5.2 * var(--h));
    margin-top: calc(0.7 * var(--h));
    width: 68%;
    font-size: calc(2.3 * var(--h));
}

/* 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 chips of how rare, in the top row, from the page's far end over the sheet ---- */

.mypage .bk-kinds {
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(3.2 * var(--h));
    height: calc(7 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(1.2 * var(--h));
}

[dir="rtl"] .mypage .bk-kinds { direction: rtl; }

.mypage .bk-kind-chip {
    --bh: calc(5.6 * var(--h));
    min-width: 0;
    padding: 0 calc(2.6 * var(--h));
    font-size: calc(2.5 * var(--h));
}

/* ---- 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 .card,
.mypage .bk-world img,
.mypage .bk-shown .card {
    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 .card .face,
.mypage .bk-shown .card .face { object-fit: cover; }

.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 .card { 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));
}

/* A shade smaller (2026-11-05), so the card nearest me stops above a limited table's number
   plaque at the ring's foot (18.3 h under the middle) and still clears the medallion. */
.mypage .tb-laid .card { --wide: calc(8.8 * var(--h)); }
.mypage .tb-laid.place-0 { --dx: 0px; --dy: calc(11.6 * var(--h)); }
.mypage .tb-laid.place-1 { --dx: calc(21 * var(--h)); --dy: 0px; }
.mypage .tb-laid.place-2 { --dx: 0px; --dy: calc(-11.6 * 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;
    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%);
}

/* A court's or an ace's drawn rank stays hidden over its painted one, as at the table: the display
   put back above beat play.css's .big-only and wrote the rank twice (the flourish tab, 2026-11-06).
   With the big index on, it shows on its plate. */
.mypage .card > .rank.big-only { display: none; }
html.big-index .mypage .card > .rank.big-only { display: block; }

/* The developer's ground for the flourishes (Pages/Ground.razor): the small table filling the window, the families above it. */
.mypage.ground { --h: 1dvh; position: fixed; inset: 0; display: flex; flex-direction: column; padding: 2dvh 3dvw; background: #2b2722; }
.mypage.ground .cd-play { margin-top: 1.5dvh; }
.ground-families { display: flex; flex-wrap: wrap; gap: 0.6dvh 1.2dvh; font: 600 1.9dvh/1.4 sans-serif; }
.ground-families a { color: #e9dcc0; text-decoration: none; padding: 0 0.8dvh; border-radius: 0.6dvh; }
.ground-families a.on { background: #e8b83a; color: #2b2722; }

/* look.css */
/* The page of my whole look (LookPage.razor), over my page: the table as the three others see it
   in a round where I am the hakem, every piece laid by Corners as the table lays its own; the
   seven things of my look along the top, each a round button; and a panel at the side with what
   I hold of the one tapped, the table shrunk beside it. Measured in shares of the screen's height
   as the game measures it. Its classes start with lk-, as the tables page's start with tb-. */

.mypage .look-page {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    background: #2b2418 url("../art/table/ground.jpg") center / cover;
    color: var(--ink);
}

/* ---- the table: its ring, the glass, the others' hands, the trick, my hand ---- */

/* All of the table on one sheet, so it can step aside for the panel as it stands. The room left
   is on the left whatever the language, where the way back and the page's name stay. */
.mypage .lk-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform-origin: 0 50%;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.mypage .look-page.drawn .lk-stage { transform: scale(var(--stage)); }

/* The ring where the layout puts it, not where the door's stylesheet centres it. */
.mypage .look-page .ring {
    transform: none;
    pointer-events: none;
}

/* The ring's medallion, not my rank's medal, whose class it shares. */
.mypage .look-page .ring .medal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: 22%;
    display: block;
    transform: translate(-50%, -50%);
}

/* The glass in the ring's window (the tables page's tb-glass): the ground seen through it blurred
   and a shade milky, greyer the smokier; none at all for no glass. */
.mypage .lk-glass {
    position: absolute;
    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;
}

/* The others' backs: each where TheirCard lays it, turned along the fan. */
.mypage .lk-fanned {
    position: absolute;
    transform-origin: 50% 50%;
    transform: rotate(var(--turn));
    pointer-events: none;
}

.mypage .lk-fanned .card {
    --wide: 100%;
    box-shadow: 0 0 calc(0.3 * var(--h)) rgba(0, 0, 0, 0.5);
}

/* The trick's box in the table's middle: the small table of my cards page, laid bare on this one. */
.mypage .lk-middle {
    position: absolute;
    pointer-events: none;
}

.mypage .look-page .cd-play {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    flex: none;
    container-type: size;
}

/* With no flourish to play, the four cards lie where they land. */
.mypage .lk-still .cd-laid {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* My hand: each card at its rect along the arc, its ends leaning out, the seal of its flourish under the index. */
.mypage .lk-held {
    position: absolute;
    transform-origin: 50% 50%;
    transform: rotate(var(--lean));
}

.mypage .lk-held .card { --wide: 100%; }

/* Where the table lays it (play.css, .hand .seal): below the whole index, clear of every mark. */
.mypage .lk-held .seal {
    position: absolute;
    left: 3%;
    top: 30%;
    width: 22%;
    pointer-events: none;
    z-index: 3;
}

/* ---- over the table: the way back, the name, the seven things ---- */

.mypage .look-page .back,
.mypage .look-page .title { z-index: 3; }

/* Between the name at the top left and the chair at the top right, centred in that room. */
.mypage .lk-things {
    position: absolute;
    left: calc(58 * var(--h));
    right: calc(8 * var(--h));
    top: calc(1.6 * var(--h));
    display: flex;
    justify-content: center;
    gap: calc(1.4 * var(--h));
    /* Over the drawer and the tap-off behind it: a tap on another thing opens its drawer in place of the one open. */
    z-index: 6;
    pointer-events: none;
}

.mypage .lk-things > * { pointer-events: auto; }

/* At the head of the open panel, all seven across its width: a tap on another thing opens its list there. */
.mypage .look-page.drawn .lk-things {
    left: auto;
    right: calc(var(--pm) + var(--pp));
    width: calc(var(--pw) - 2 * var(--pp));
    top: calc(var(--pm) + 1 * var(--h));
    justify-content: space-between;
    gap: 0;
}

.mypage .look-page.drawn .lk-hint { display: none; }

.mypage .look-page.drawn .lk-thing { --across: var(--thing); }

/* Each thing on the kit's round plain button, the one open ringed in gold. */
.mypage .lk-thing {
    --across: calc(9.6 * var(--h));
    position: relative;
    width: var(--across);
    height: var(--across);
    padding: 0;
    background: var(--round-plain-raised, url("../art/kit/round-plain.png")) center / contain no-repeat;
    transition: transform 0.1s;
}

.mypage .lk-thing:hover { transform: translateY(calc(-0.4 * var(--h))); }

.mypage .lk-thing.on::after {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    box-shadow: 0 0 0 max(2px, calc(0.4 * var(--h))) var(--gold);
    pointer-events: none;
}

.mypage .lk-pic {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

/* What stands in a thing's button, and on a tile in the drawer: a face in its gold oval, a card
   upright, a throne, a small table with its ring, a badge. */
.mypage :is(.lk-pic, .lk-art) > * { max-width: 100%; max-height: 100%; }

.mypage :is(.lk-pic, .lk-art) .oval {
    height: 100%;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 5%;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1.5px rgba(42, 29, 16, 0.6);
}

.mypage :is(.lk-pic, .lk-art) .oval img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mypage :is(.lk-pic, .lk-art) img.lk-card {
    height: 100%;
    width: auto;
    border-radius: calc(0.5 * var(--h));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 max(1px, calc(0.15 * var(--h))) rgba(42, 29, 16, 0.5);
}

.mypage :is(.lk-pic, .lk-art) img.lk-throne {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.mypage :is(.lk-pic, .lk-art) .lk-table {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    box-sizing: border-box;
    border-radius: calc(0.8 * var(--h));
    border: max(1px, calc(0.22 * var(--h))) solid var(--gold);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mypage :is(.lk-pic, .lk-art) .lk-table img {
    position: absolute;
    left: 8%;
    top: 14%;
    width: 84%;
    height: 72%;
    object-fit: contain;
}

.mypage :is(.lk-pic, .lk-art) .lk-medal {
    display: block;
    height: 100%;
    aspect-ratio: 1;
}

.mypage :is(.lk-pic, .lk-art) .lk-medal .badge-art {
    display: block;
    width: 100%;
    height: 100%;
}

/* The seal of a flourish worn, over the king on the button of my cards. */
.mypage .lk-pic .lk-seal {
    position: absolute;
    left: 6%;
    bottom: 4%;
    width: 44%;
    max-height: none;
}

/* One line under the things, on a navy pill so it reads on any table's ground. */
.mypage .lk-hint {
    position: absolute;
    left: calc(58 * var(--h));
    right: calc(8 * var(--h));
    top: calc(11.9 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(2.2 * var(--h));
    line-height: 1.4;
    color: var(--on-navy);
    z-index: 3;
    pointer-events: none;
}

.mypage .lk-hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 2 * var(--h));
    height: 100%;
    max-width: calc(40 * var(--h));
    border-radius: 999px;
    background: rgba(22, 35, 79, 0.72);
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* ---- the panel at the side: what I hold of one kind ---- */

/* A tap off the panel closes it. */
.mypage .lk-off {
    position: absolute;
    inset: 0;
    z-index: 4;
}

/* The panel's width comes from the page (PanelWide), with the seven things sized to fit across it. */
.mypage .look-page {
    --pm: calc(1.5 * var(--h));
    --pp: calc(1.8 * var(--h));
    --thing: calc((var(--pw) - 2 * var(--pp)) / 7.4);
}

.mypage .lk-drawer {
    position: absolute;
    right: var(--pm);
    top: var(--pm);
    bottom: var(--pm);
    width: var(--pw);
    box-sizing: border-box;
    padding: calc(var(--thing) + 2 * var(--h)) var(--pp) calc(1.8 * var(--h));
    display: flex;
    flex-direction: column;
    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.6 * var(--h)) calc(1.8 * var(--h)) rgba(0, 0, 0, 0.4);
    z-index: 5;
    animation: lk-rise 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes lk-rise {
    from { opacity: 0; transform: translateX(calc(5 * var(--h))); }
}

[dir="rtl"] .mypage .lk-drawer { direction: rtl; }

.mypage .lk-head {
    position: relative;
    flex: none;
    height: calc(6 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
    padding-inline-end: calc(7 * var(--h));
}

.mypage .lk-kind {
    font-size: calc(3.4 * var(--h));
    line-height: 1.2;
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
}

.mypage .lk-now {
    flex: 1;
    min-width: 0;
    font-size: calc(2.6 * var(--h));
    line-height: 1.3;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    overflow: clip visible;
}

/* The cross that closes the panel, at the end of the head's line. */
.mypage .lk-close {
    position: absolute;
    top: calc(0.5 * var(--h));
    inset-inline-end: 0;
    width: calc(5 * var(--h));
    height: calc(5 * var(--h));
    padding: 0;
    border-radius: 50%;
    background: rgba(22, 35, 79, 0.08);
}

.mypage .lk-close:hover { background: rgba(22, 35, 79, 0.16); }

.mypage .lk-close i,
.mypage .lk-close i::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: max(2px, calc(0.3 * var(--h)));
    border-radius: 1px;
    background: var(--ink-soft);
    transform: translate(-50%, -50%) rotate(45deg);
}

.mypage .lk-close i::after {
    content: "";
    width: 100%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* What I hold, scrolled up and down by the wheel and the finger alike: three to a line under a
   finger, four under a mouse, and one more of the faces, which have no name under them. */
.mypage .lk-row {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: calc(1.2 * var(--h));
    padding: calc(0.8 * var(--h)) calc(0.6 * var(--h));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 35, 79, 0.35) transparent;
}

.mypage .lk-row:has(> .lk-round) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (hover: hover) and (pointer: fine) {
    .mypage .lk-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mypage .lk-row:has(> .lk-round) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.mypage .lk-tile {
    position: relative;
    min-width: 0;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;
    padding: calc(1 * var(--h)) calc(0.8 * var(--h)) calc(0.6 * 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);
    transition: transform 0.1s;
}

.mypage .lk-tile.lk-round { aspect-ratio: 1; }
.mypage .lk-tile.mine { border-color: var(--gold); box-shadow: 0 0 calc(1 * var(--h)) rgba(226, 182, 74, 0.7); }
.mypage .lk-tile:not(:disabled):hover { transform: translateY(calc(-0.5 * var(--h))); }

.mypage .lk-art {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mypage .lk-tile b {
    flex: none;
    max-width: 100%;
    min-width: 0;
    margin-top: calc(0.6 * var(--h));
    font-size: calc(2.2 * var(--h));
    line-height: 1.25;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    overflow: clip visible;
}

.mypage .lk-tile small {
    flex: none;
    font-size: calc(1.8 * var(--h));
    line-height: 1.3;
    color: var(--ink-soft);
}

.mypage .lk-tile small.legendary { color: #a8741a; }
.mypage .lk-tile small.limited { color: var(--crimson); }

.mypage .lk-none {
    grid-column: 1 / -1;
    margin: auto;
    font-size: calc(2.8 * var(--h));
    color: var(--ink-soft);
}

/* The glass row under the tables, as the tables page's plaque has it. */
.mypage .lk-glass-row {
    flex: none;
    height: calc(6 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(1.5 * var(--h));
}

.mypage .lk-word {
    flex: none;
    width: calc(14 * var(--h));
    text-align: center;
    font-size: calc(2.6 * var(--h));
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
}

.mypage .lk-slider {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: calc(70 * var(--h));
}

/* The page of my cards, over this one. */
.mypage .look-page .cards-page { z-index: 30; }

/* ---- on my look: the button that opens this page, at the end of the sheet's line ---- */

/* The line and the button stand in one row, centred together; the button is taller than the
   line, so the row lets it show over the line's edges. */
.mypage .sheet .line.see-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(2.4 * var(--h));
    overflow: visible;
}

.mypage .sheet .line.see-row > span {
    min-width: 0;
    overflow: hidden;
    overflow: clip visible;
    white-space: nowrap;
}

.mypage .see-table {
    --bh: calc(5.6 * var(--h));
    flex: none;
    min-width: 0;
    padding: 0 calc(2.8 * var(--h));
    font-size: calc(2.5 * var(--h));
}

/* signin.css */
/* The sign-in as an ink drawing on cream paper (Mahdi, 2026-10-16; the brief is
   skins/fereydun/24-the-signin-calm.md, prompt 14 of twenty-nine stagings): the painted name across
   the top, the kings' table big in the middle in a thin gold frame with quick play and the school
   under it, the plaque a small ruled box at the bottom left with the email alone, the tournaments a
   column on the right, the stores along the foot. Every box is drawn the same way: a fine ink line
   with a thin gold line a little outside it. Calm: nothing on the page moves but the table.
   The drawn kings around the table are gone (2026-10-27): the live table stands on bare paper.
   The night turns the paper dark and the ink cream (night.css). */

/* The sheet is the box; the sign-in in it is laid flat (display: contents), its parts the sheet's own,
   with the kings' table beside it, out of reach of the sign-in's rules (Home.razor). */
.door.ink { display: contents; }

.ink-sheet {
    --paper: #f4ead3;
    --paper-deep: #e9dcbd;
    --ink: #1f1a12;
    --ink-soft: #5e5244;
    --gold: #c9a24a;
    --gold-deep: #9b7a2a;
    --green: #1f5a3a;
    --field: #fffaf0;
    --rule: 1.5px;
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 1.6vh, 18px);
    padding: 0 0 2vh;
    box-sizing: border-box;
    overflow: auto;
    /* Paper: the cream with a faint grain and a little darker at the edges, as a sheet lies under a lamp. */
    background:
        radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 252, 240, 0.55), rgba(255, 252, 240, 0) 70%),
        repeating-linear-gradient(0deg, rgba(90, 70, 30, 0.025) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
        repeating-linear-gradient(90deg, rgba(90, 70, 30, 0.02) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
        var(--paper);
    color: var(--ink);
    font-family: var(--face);
}

/* One ink box, the way every box on the page is drawn. */
.ink-sheet > .arena,
.door.ink .panel,
.door.ink .way,
.door.ink .cups-list li,
.door.ink .cups-list .bill,
.door.ink .cups-list button.ask,
.ink-sheet ~ .tongues select.chooser,
.ink-sheet ~ .tongues button {
    border: var(--rule) solid var(--ink);
    border-radius: 5px;
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold);
}

/* ---- the name ---- */

.door.ink header {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: clamp(10px, 2vh, 22px) 16px 0;
    box-sizing: border-box;
    pointer-events: none;
}

.door.ink > header .name {
    position: relative;
    width: min(72vw, 15vh * 3.25, 720px);
    aspect-ratio: 1980 / 610;
}

.door.ink .title {
    position: absolute;
    inset: 0;
    background: url("../art/door/title-full.png") center / contain no-repeat;
    filter: drop-shadow(0 2px 2px rgba(60, 40, 10, 0.22));
}

.door.ink .purse {
    position: absolute;
    top: 2vh;
    right: 3vw;
    pointer-events: auto;
}

/* ---- the kings' table: the game's table in the frame, measured by the frame's own height ---- */

.door.ink .play {
    flex: none;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.4vh, 16px);
}

/* In a column the table comes right under the name (it stands after the sign-in in the page), then
   its buttons, the plaque, the tournaments. */
.door.ink .panel { order: 3; }
.door.ink .cups-list { order: 4; }
.door.ink footer { order: 5; }

.ink-sheet > .arena {
    flex: none;
    order: 1;
    position: relative;
    z-index: 2;
    --fh: min(calc((100vw - 40px) * 9 / 16), 44vh);
    height: var(--fh);
    width: calc(var(--fh) * 16 / 9);
    --h: calc(var(--fh) / 100);
    --w: calc(var(--fh) * 16 / 9);
    margin: 4px 0 0;
    border-color: var(--gold-deep);
    overflow: hidden;
    background: #10261d;
}

.ink-sheet > .arena .table {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
}

/* The two ways under the table: quick play, and the school. */
.door.ink .ways {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin: 6px 16px 0;
}

.door.ink .way {
    padding: 0.3em 1.7em;
    color: var(--ink);
    font: 700 clamp(15px, 2.3vh, 20px) var(--face);
    letter-spacing: 0.02em;
    cursor: var(--point);
    transition: background-color 0.15s, transform 0.15s;
}

.door.ink .way:hover,
.door.ink .way:focus-visible {
    background: var(--paper-deep);
    transform: translateY(-1px);
    outline: none;
}

.door.ink .way:active { transform: translateY(1px); }

.door.ink .rule {
    margin: 0 16px;
    color: var(--ink-soft);
    font-size: clamp(12px, 1.8vh, 15px);
    text-align: center;
}

.door.ink .stores { margin: 2px 16px 0; }

/* ---- the games over the table, hokm, pasur and haft khabis: the chosen one inked in ---- */

.ink-sheet > .games {
    flex: none;
    order: 1;
    display: flex;
    gap: 8px;
    margin: 0 0 -4px;
}

/* Read right to left, the row still keeps the table's left corner, where the name leaves room. */
[dir="rtl"] .ink-sheet > .games { justify-content: flex-end; }

.ink-sheet > .games button {
    padding: 0.2em 1.3em;
    border: var(--rule) solid var(--ink);
    border-radius: 5px;
    background: var(--paper);
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold);
    color: var(--ink);
    font: 700 clamp(13px, 1.9vh, 16px) var(--face);
    cursor: var(--point);
    transition: background-color 0.15s, color 0.15s;
}

.ink-sheet > .games button:hover:not(.chosen),
.ink-sheet > .games button:focus-visible:not(.chosen) { background: var(--paper-deep); outline: none; }

.ink-sheet > .games button.chosen {
    background: var(--ink);
    color: var(--paper);
    cursor: default;
}

/* Pasur's, haft khabis's or shelem's own painted name while that game is dealt. */
.door.ink .title.pasur { background-image: url("../art/door/games/title-pasur.png"); }
.door.ink .title.khabis { background-image: url("../art/door/games/title-khabis.png"); }
.door.ink .title.shelem { background-image: url("../art/door/games/title-shelem.png"); }

/* Four tabs in a narrow window: tighter and on one line, inside the page's gutter. A phone has them as bookmarks. */
@media (max-width: 480px) and (pointer: fine) {
    .ink-sheet > .games { gap: 5px; justify-content: center; }
    .ink-sheet > .games button { padding: 0.2em 0.45em; white-space: nowrap; }
}

/* ---- the plaque: a small ruled box, the email alone and the one button ---- */

.door.ink .panel {
    position: relative;
    z-index: 3;
    width: min(92vw, 380px);
    box-sizing: border-box;
    margin: 0 0 1vh;
    padding: clamp(14px, 2.4vh, 22px) clamp(16px, 2.6vw, 26px);
    display: grid;
    justify-items: stretch;
    gap: 10px;
    filter: none;
    text-align: start;
    font-size: clamp(14px, 2.1vh, 17px);
    animation: arrived 0.5s ease-out var(--wait, 0s) both;
}

.door.ink .panel.first { --wait: 0.4s; }

@keyframes arrived {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.door.ink h2 {
    margin: 0;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.door.ink .panel p { margin: 0; color: var(--ink-soft); font-size: 0.92em; }
.door.ink .panel .why { font-size: 0.82em; }
.door.ink .panel .trouble { color: #9c2f24; }

.door.ink form {
    display: grid;
    gap: 10px;
    width: 100%;
}

/* The field with its word before it, on one line, as a ledger's. */
.door.ink .line {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6em;
    font-weight: 700;
}

.door.ink input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.4em 0.7em;
    border: var(--rule) solid var(--ink);
    border-radius: 4px;
    background: var(--field);
    color: var(--ink);
    font: inherit;
    font-weight: 400;
    text-align: start;
    user-select: text;
    -webkit-user-select: text;
    transition: box-shadow 0.15s;
}

.door.ink input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold);
}

/* The code is six figures set wide apart, as on a ticket (in every language: the figures do not join). */
.door.ink.coded input,
[dir="rtl"] .door.ink.coded input {
    font-size: 1.5em;
    letter-spacing: 0.45em !important;
    text-indent: 0.45em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.door.ink button { font: inherit; }

.door.ink button.main {
    justify-self: stretch;
    height: auto;
    aspect-ratio: auto;
    padding: 0.4em 1.4em;
    border: var(--rule) solid var(--gold-deep);
    border-radius: 5px;
    background: var(--green);
    color: #f4ead3;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold);
    cursor: var(--point);
    transition: filter 0.15s, transform 0.15s;
}

.door.ink button.main:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
.door.ink button.main:not(:disabled):active { filter: brightness(0.95); transform: translateY(1px); }
.door.ink button:disabled { opacity: 0.45; cursor: var(--arrow); }

.door.ink button.plain {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 0.9em;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: var(--point);
}

.door.ink footer {
    position: relative;
    z-index: 3;
    color: var(--ink-soft);
}

/* The picture is laid the same way from either side; only the writing turns. */
[dir="rtl"] .door.ink { direction: ltr; }
[dir="rtl"] .door.ink .panel,
[dir="rtl"] .door.ink .rule,
[dir="rtl"] .door.ink .ways,
[dir="rtl"] .door.ink .cups-list,
[dir="rtl"] .door.ink footer { direction: rtl; }

/* ---- the tournaments: a column of ruled boxes under their word ---- */

.door.ink .cups-list {
    position: relative;
    z-index: 3;
    width: min(92vw, 380px);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-size: clamp(13px, 1.9vh, 16px);
}

.door.ink .cups-list h3 {
    margin: 0 0 0.6em;
    padding: 0 0 0.25em;
    border-bottom: var(--rule) solid var(--ink);
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink);
    text-align: center;
    position: relative;
}

/* The small gold diamond on the rule under the word, as on the drawing. */
.door.ink .cups-list h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: var(--gold);
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px var(--paper);
}

.door.ink .cups-list .quiet { margin: 0.4em 0 0; color: var(--ink-soft); font-size: 0.9em; }

.door.ink .cups-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.door.ink .cups-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 0.8em;
    padding: 0.4em 0.9em;
}

.door.ink .cups-list li strong { color: var(--ink); }
.door.ink .cups-list li span { color: var(--gold-deep); white-space: nowrap; }
.door.ink .cups-list li small { grid-column: 1 / -1; color: var(--ink-soft); }
.door.ink .cups-list li.playing { border-color: #9c2f24; }

/* The nearest one as a small poster: 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.ink .cups-list .bill {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.3em 0.8em;
    margin: 1em 0 10px;
    padding: 1.1em 0.9em 0.7em;
    color: var(--ink);
}

.door.ink .cups-list .bill.playing { border-color: #9c2f24; }

.door.ink .cups-list .band {
    grid-column: 1 / -1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: -1.9em;
    padding: 0.15em 1em;
    border: var(--rule) solid var(--ink);
    border-radius: 4px;
    color: #f6ecd4;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 0 0 2px var(--paper);
}

.door.ink .cups-list .band svg { width: 0.7em; height: 0.7em; fill: var(--gold); }

.door.ink .cups-list .named {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1.3em;
    line-height: 1.15;
}

.door.ink .cups-list .pot {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    color: var(--gold-deep);
}

.door.ink .cups-list .fill {
    height: 7px;
    border: 1px solid var(--ink);
    border-radius: 4px;
    background: var(--paper);
    overflow: hidden;
}

.door.ink .cups-list .fill i {
    display: block;
    height: 100%;
    background: var(--gold);
}

.door.ink .cups-list .count { font-size: 0.85em; color: var(--ink-soft); white-space: nowrap; }

.door.ink .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.3em;
    border-top: 1px solid var(--gold);
}

.door.ink .cups-list .clock small { font-size: 0.85em; color: var(--ink-soft); }
.door.ink .cups-list .clock b { font-size: 1.3em; font-variant-numeric: tabular-nums; }

.door.ink .cups-list button.ask {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 0.35em 1em;
    color: var(--ink);
    font: 700 0.95em var(--face);
    cursor: var(--point);
}

.door.ink .cups-list button.ask:hover { background: var(--paper-deep); }

/* ---- the language in the corner, and the sound beside it ---- */

/* They stand outside the door and so carry its paper and ink themselves. */
.ink-sheet ~ .tongues {
    --paper: #f4ead3;
    --paper-deep: #e9dcbd;
    --ink: #1f1a12;
    --gold: #c9a24a;
    --rule: 1.5px;
}

.ink-sheet ~ .tongues select.chooser {
    appearance: none;
    -webkit-appearance: none;
    padding: 3px 28px 3px 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%231f1a12'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--ink);
    font: 14px var(--face);
    cursor: var(--point);
}

.ink-sheet ~ .tongues button {
    padding: 3px 12px;
    color: var(--ink);
    font: 14px var(--face);
}

.ink-sheet ~ .tongues button.chosen { background: var(--paper-deep); }
.ink-sheet ~ .tongues select.chooser:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The chooser in the top corner on a phone, where the plaque sits under the name. */
.ink-sheet ~ .tongues { top: 10px; bottom: auto; }

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

@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);
    }
}

/* ---- a wide window, or any phone: a sheet with everything laid on it ---- */

/* The page is a 16:9 sheet of paper centred in the window, and everything on it is laid over its own
   spot in hundredths of the sheet: the name in the top middle, the plaque top left, the tournaments
   down the right, the kings' table big in the middle with its two buttons and the stores under it
   (Mahdi, 2026-10-27: «وسط بازی لود بشه با لینکها زیرش. لاگین چپ و تورنمنت ها راست»). --sw and
   --sh are the sheet's width and height, --u a hundredth of its height, the measure of every word
   on it. A phone held upright lays the sheet on its side (Mahdi, 2026-10-26: «سایت حکم در سایز
   موبایل همیشه افقی باشه»), so --page-w and --page-h, the window as the sheet sees it, trade places
   there. The window's height is the one seen (dvh): a phone's 100vh is the height with the address
   bar gone, and the sheet's top lay under the bar while it showed (Mahdi, 2026-10-27). */
:root {
    --page-w: 100vw;
    --page-h: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --page-w: 100dvw;
        --page-h: 100dvh;
    }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    :root {
        --page-w: 100dvh;
        --page-h: 100dvw;
    }
}

@media (min-aspect-ratio: 1/1) and (min-width: 820px), (hover: none) and (pointer: coarse) {
    .ink-sheet,
    .ink-sheet ~ .tongues {
        --sw: min(var(--page-w), calc(var(--page-h) * 16 / 9));
        --sh: min(var(--page-h), calc(var(--page-w) * 9 / 16));
        --u: calc(var(--sh) / 100);
    }

    .ink-sheet {
        position: fixed;
        inset: 0;
        margin: auto;
        width: var(--sw);
        height: var(--sh);
        display: block;
        padding: 0;
        overflow: hidden;
        background: var(--paper);
        transition: background-color 0.4s ease;
        /* The paper on either side of the sheet, where the window is not 16:9 (a fixed box is a
           stacking context of its own, so a child behind it would lie over its picture). */
        box-shadow: 0 0 0 100vmax var(--paper);
    }

    .door.ink.live header,
    .ink-sheet > .arena,
    .door.ink.live .ways,
    .door.ink.live .stores,
    .door.ink.live .panel,
    .door.ink.live .cups-list,
    .door.ink.live footer {
        position: absolute;
        margin: 0;
        animation: none;
    }

    .door.ink.live .play { display: contents; }
    .door.ink.live .rule { display: none; }

    /* The name in the top middle; on a sheet wider than 16:9 (a phone) it keeps its 16:9 height. */
    .door.ink.live header { left: 0; right: 0; top: 1.4%; padding: 0; width: auto; }
    .door.ink.live > header .name { width: min(30%, calc(var(--sh) * 0.53)); }

    /* The kings' table in the middle, 16:9, as big as the name above and the buttons below let it be,
       and no wider than the room between the plaque and the tournaments. */
    .ink-sheet > .arena {
        --fh: min(calc(var(--sw) * 0.52 * 9 / 16), calc(var(--sh) * 0.53));
        left: 0;
        right: 0;
        top: 19.5%;
        margin: 0 auto;
        width: calc(var(--fh) * 16 / 9);
        height: var(--fh);
        border-width: max(1.5px, calc(0.18 * var(--u)));
        border-radius: calc(0.6 * var(--u));
        box-shadow: 0 0 0 calc(0.35 * var(--u)) var(--paper), 0 0 0 calc(0.45 * var(--u)) var(--gold), 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(40, 30, 10, 0.3);
    }

    /* The games down the table's right side as bookmarks, the words turned along them, in the
       room between the table and the tournaments (Mahdi, 2026-10-28: «تب سمت چپ یا راست نشون بدیم بهتره»). */
    .ink-sheet > .games {
        position: absolute;
        --fh: min(calc(var(--sw) * 0.52 * 9 / 16), calc(var(--sh) * 0.53));
        left: calc(50% + var(--fh) * 8 / 9 + 1.2 * var(--u));
        top: calc(19.5% + 2.5 * var(--u));
        flex-direction: column;
        margin: 0;
        gap: calc(1.4 * var(--u));
    }

    .ink-sheet > .games button {
        writing-mode: vertical-rl;
        padding: calc(1.8 * var(--u)) calc(0.3 * var(--u));
        font-size: calc(2.1 * var(--u));
        border-width: max(1.5px, calc(0.18 * var(--u)));
        border-radius: calc(0.45 * var(--u));
        box-shadow: 0 0 0 calc(0.3 * var(--u)) var(--paper), 0 0 0 calc(0.42 * var(--u)) var(--gold);
    }

    .door.ink.live .ways {
        left: 0;
        right: 0;
        top: 74.5%;
        justify-content: center;
        gap: calc(2.4 * var(--u));
    }

    .door.ink.live .way {
        min-width: 16%;
        padding: calc(0.5 * var(--u)) calc(2.4 * var(--u));
        font-size: calc(2.7 * var(--u));
        border-radius: calc(0.5 * var(--u));
        box-shadow: 0 0 0 calc(0.32 * var(--u)) var(--paper), 0 0 0 calc(0.45 * var(--u)) var(--gold);
    }

    /* The stores under the buttons, in the middle, two rows if they must. */
    .door.ink.live .stores {
        left: 24%;
        width: 52%;
        top: 82%;
        --sh: calc(5.2 * var(--u));
        gap: calc(0.8 * var(--u)) calc(1.2 * var(--u));
    }

    /* The plaque in the top left corner of the paper (Mahdi, 2026-10-16: «لاگین بره بالا سمت چپ»). */
    .door.ink.live .panel {
        left: 1.3%;
        top: 4.5%;
        width: 21.5%;
        padding: calc(2.2 * var(--u)) calc(2.6 * var(--u));
        gap: calc(1.1 * var(--u));
        font-size: calc(2.1 * var(--u));
        border-radius: calc(0.5 * var(--u));
        box-shadow: 0 0 0 calc(0.32 * var(--u)) var(--paper), 0 0 0 calc(0.45 * var(--u)) var(--gold);
    }

    .door.ink.live .panel input { padding: calc(0.45 * var(--u)) calc(0.8 * var(--u)); border-radius: calc(0.35 * var(--u)); }
    .door.ink.live .panel button.main { padding: calc(0.45 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(0.45 * var(--u)); }

    /* The tournaments down the right, as far from the edge as the plaque. */
    .door.ink.live .cups-list {
        right: 1.3%;
        top: 5.2%;
        width: 19%;
        font-size: calc(1.95 * var(--u));
    }

    .door.ink.live .cups-list li,
    .door.ink.live .cups-list .bill,
    .door.ink.live .cups-list button.ask {
        border-radius: calc(0.5 * var(--u));
        box-shadow: 0 0 0 calc(0.3 * var(--u)) var(--paper), 0 0 0 calc(0.42 * var(--u)) var(--gold);
    }

    .door.ink.live footer { left: 1.3%; top: 30%; width: 21.5%; }

    /* The chooser and the sound at the sheet's bottom left corner, under the plaque's column. */
    .ink-sheet ~ .tongues {
        left: calc((var(--page-w) - var(--sw)) / 2 + var(--sw) * 0.024);
        top: auto;
        bottom: calc((var(--page-h) - var(--sh)) / 2 + var(--sh) * 0.045);
        gap: calc(1 * var(--u));
    }

    .ink-sheet ~ .tongues select.chooser,
    .ink-sheet ~ .tongues button {
        padding: calc(0.4 * var(--u)) calc(1.2 * var(--u));
        font-size: calc(2 * var(--u));
        border-radius: calc(0.45 * var(--u));
        box-shadow: 0 0 0 calc(0.3 * var(--u)) var(--paper), 0 0 0 calc(0.42 * var(--u)) var(--gold);
    }

    .ink-sheet ~ .tongues select.chooser { padding-right: calc(3.2 * var(--u)); background-position: right calc(1.1 * var(--u)) center; }
}

/* A phone: the sheet is the whole screen, not 16:9 (a phone is wider), and the words never smaller
   than a thumb can read. */
@media (hover: none) and (pointer: coarse) {
    .ink-sheet,
    .ink-sheet ~ .tongues {
        --sw: var(--page-w);
        --sh: var(--page-h);
    }

    .door.ink.live .panel { font-size: max(calc(2.1 * var(--u)), 12px); }
    .door.ink.live .cups-list { font-size: max(calc(1.95 * var(--u)), 11px); }
    .door.ink.live .way { font-size: max(calc(2.7 * var(--u)), 13px); }
    .ink-sheet ~ .tongues select.chooser,
    .ink-sheet ~ .tongues button { font-size: max(calc(2 * var(--u)), 12px); }
}

/* On a phone held upright the sheet is turned a quarter about its middle, and the chooser, turned
   with it in words.css, keeps its corner of the sheet: the sheet's bottom is the screen's left. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .ink-sheet {
        inset: auto;
        left: 50%;
        top: 50%;
        margin: 0;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .ink-sheet ~ .tongues {
        left: calc((var(--page-h) - var(--sh)) / 2 + var(--sh) * 0.045);
        top: calc((var(--page-w) - var(--sw)) / 2 + var(--sw) * 0.024);
        bottom: auto;
    }
}

/* Typing into the plaque (js/typing.js), held either way up: the keyboard comes up along the screen's
   foot, not the sheet's, so the sheet stands upright and only the plaque is left on it, at the top,
   above the keyboard (Mahdi, 2026-10-27: an iPhone typed its email sideways; 2026-10-30: «فقط رو
   ایمیل و کد فوکوس بشه»). The sheet keeps to the seen part of the window if the phone slides it. */
@media (hover: none) and (pointer: coarse) {
    html.typing .ink-sheet {
        inset: var(--seen-y, 0) auto auto var(--seen-x, 0);
        margin: 0;
        width: 100%;
        height: var(--seen-h, 100%);
        transform: none;
    }

    /* Nothing to drag while typing (Mahdi, 2026-10-28): the page neither scrolls nor stretches past
       the window, so the plaque stays the size it was laid out at, above the keyboard. */
    html.typing,
    html.typing body {
        overflow: hidden;
        overscroll-behavior: none;
        max-width: 100%;
    }

    html.typing .ink-sheet > .arena,
    html.typing .ink-sheet > .games { visibility: hidden; }
    html.typing .door.ink.live header,
    html.typing .door.ink.live .play,
    html.typing .door.ink.live .cups-list,
    html.typing .door.ink.live footer,
    html.typing .ink-sheet ~ .tongues,
    html.typing .back-to-door { display: none; }

    html.typing .door.ink.live .panel {
        left: 0;
        right: 0;
        top: max(12px, env(safe-area-inset-top));
        margin: 0 auto;
        width: min(100vw - 32px, 420px);
        padding: 18px 20px;
        gap: 12px;
        font-size: 16px;
        border-radius: 6px;
        box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--gold);
    }

    html.typing .door.ink.live .panel input { padding: 8px 10px; border-radius: 4px; font-size: 16px; }
    html.typing .door.ink.live .panel button.main { padding: 8px 18px; border-radius: 5px; }
}

/* A phone on its side has little left above the keyboard: the field and its button side by side, and
   no words but the ones that are needed. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    html.typing .door.ink.live .panel {
        top: max(6px, env(safe-area-inset-top));
        width: min(100vw - 32px, 560px);
        padding: 8px 14px;
        gap: 6px;
    }

    html.typing .door.ink.live .panel h2,
    html.typing .door.ink.live .panel .why { display: none; }

    html.typing .door.ink.live .panel form {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 10px;
    }
}

/* Upright, or narrow: one column on plain paper, the plaque right under the name, then the ways and
   the stores, then the tournaments. */
@media (orientation: portrait) {
    .ink-sheet { gap: clamp(10px, 1.8vh, 20px); }
    .door.ink .panel { order: 1; }
    .ink-sheet > .games,
    .ink-sheet > .arena { order: 2; }
    .door.ink .play { order: 3; }
    .door.ink .cups-list { order: 4; }
    .door.ink footer { order: 5; }
    /* The name under the chooser's row, not behind it. */
    .door.ink header { padding-top: 46px; }
    .door.ink > header .name { width: min(76vw, 12vh * 3.25); }
    .ink-sheet > .arena { --fh: calc((100vw - 32px) * 9 / 16); }
    .door.ink .cups-list { margin-bottom: 1vh; }
}

/* Pasur or haft khabis the whole of the window (2026-10-28): its own table grown over the sheet, the
   game on it going on. On a phone held upright the sheet is turned, and the table fills it turned with it. */
.ink-sheet.whole > .arena {
    position: fixed;
    inset: 0;
    z-index: 5;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ink-sheet.whole > .games { visibility: hidden; }

/* The plaque back to the sign-in on the bare wood beside the bot's chair, which at pasur and haft
   khabis stands higher than hokm's partner's and reaches up under the plaque's place at hokm's table. */
.ink-sheet.whole ~ .back-to-door { right: calc(33 * var(--h)); }

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .ink-sheet.whole ~ .back-to-door { right: calc(1.5 * var(--h)); top: calc(100dvh - 33 * var(--h)); }
}

/* A low window: the name smaller, the gaps tighter. */
@media (max-height: 520px) {
    .door.ink > header .name { width: min(60vw, 12vh * 3.25); }
    .ink-sheet { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .door.ink *, .door.ink *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition: none !important; }
}

/* Google's and Apple's buttons (2026-11-01). Google draws its own in its own frame, the only way it
   may be drawn, so all that is ours is the room it stands in and Apple's beside it at that height. */
/* No wider than the plaque: vouch.js shrinks the row by zoom where Google's narrowest button would not fit. */
.door.ink .vouches { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 0; }
/* Google's frame is a light page. Under the night's dark colour scheme the browser gives such a frame a white ground. */
.vouch.google { min-height: 40px; color-scheme: light; }
button.vouch.apple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #000;
    color: #fff;
    font-family: -apple-system, "Segoe UI", Roboto, Vazirmatn, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
button.vouch.apple svg { width: 16px; height: 16px; flex: none; }
button.vouch.apple:active { background: #222; }
html.night button.vouch.apple { background: #fff; border-color: #fff; color: #000; }
.door.ink .panel.errand { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(90vw, 380px); }
/* The code a browser on a game's errand shows, to be typed into the game (2026-11-03): large,
   spaced in two threes, figures that read the same in either direction. */
.door.ink .panel.errand .errand-code { font-size: 2.4em; letter-spacing: .12em; font-variant-numeric: tabular-nums; text-align: center; margin: .3em 0; user-select: all; }

/* stores.css */
/* The game in the stores (Shared/Stores.razor): Google's badge, then two plates drawn as its
   like, black with the grey hairline, the small line over the big name. Everything is measured
   by --sh, the height of the black plate; the badge's file carries its clear space around the
   plate (168 of its 250 rows), so the picture is taller than the plate and its margins give the
   space back. */

.stores {
    --sh: clamp(34px, 5.4vh, 48px);
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    font-family: var(--face, serif);
}

.stores .store-play,
.stores .store-apple {
    display: block;
    flex: none;
    line-height: 0;
    border-radius: calc(var(--sh) * 0.14);
    transition: filter 0.2s ease;
}

.stores .store-play img {
    display: block;
    height: calc(var(--sh) * 250 / 168);
    width: auto;
    margin: calc(var(--sh) * -41 / 168) calc(var(--sh) * -40 / 168);
}

/* Apple's badge is its own plate with its own hairline and no clear space in the file, so it is
   drawn as tall as the plate and the row's gap is the space around it. */
.stores .store-apple img {
    display: block;
    height: var(--sh);
    width: auto;
}

.stores .store-plate {
    flex: none;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: var(--sh);
    min-width: calc(var(--sh) * 3.2);
    padding: 0 calc(var(--sh) * 0.36);
    border: 1px solid #a6a6a6;
    border-radius: calc(var(--sh) * 0.14);
    background: #000;
    color: #fff;
    text-decoration: none;
    line-height: 1.05;
    white-space: nowrap;
    transition: filter 0.2s ease;
}

.stores .store-plate small {
    order: -1;
    font-size: calc(var(--sh) * 0.26);
    letter-spacing: 0.02em;
    opacity: 0.9;
}

.stores .store-plate b {
    font-size: calc(var(--sh) * 0.46);
    font-weight: 600;
}

a.store-play:hover, a.store-play:focus-visible,
a.store-apple:hover, a.store-apple:focus-visible,
a.store-plate:hover, a.store-plate:focus-visible { filter: brightness(1.25); }

/* A build straight from goud.games: the system's mark before the words, the words as the others lay them. */
.stores .store-plate.get {
    flex-direction: row;
    gap: calc(var(--sh) * 0.2);
    padding: 0 calc(var(--sh) * 0.32) 0 calc(var(--sh) * 0.26);
}

.stores .store-plate.get .mark {
    flex: none;
    width: calc(var(--sh) * 0.56);
    height: calc(var(--sh) * 0.56);
}

.stores .store-plate.get .words {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 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(calc(0.92 * var(--w)), 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); }

/* A phone held upright lays the question on its side, as the page under it. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .first-ask {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

/* The sound switch beside the way out, in the kit's ivory round; the lesson's name and discs
   stand one switch further right. */
.school .sound-switch.school-sound,
.school-round .sound-switch.school-sound {
    position: absolute;
    left: calc(28.5 * var(--h));
    top: calc(3 * var(--h));
    width: calc(7.8 * var(--h));
    height: calc(7.8 * var(--h));
    color: var(--paper-ink, #16234f);
    background: var(--round-plain, url("../art/kit/flat/round-plain.png")) center / 100% 100% no-repeat;
    z-index: 960;
}

.school .sound-switch.school-sound:hover,
.school-round .sound-switch.school-sound:hover { filter: brightness(1.12); }

.school .lesson-name,
.school .progress { left: calc(38 * var(--h)); }

.school-round .sound-switch.school-sound {
    position: fixed;
    top: calc(50dvh - 50 * var(--h) + 41.5 * var(--h));
    z-index: 4000;
}

@media (orientation: landscape) and (max-aspect-ratio: 8/5) {
    .school-round .sound-switch.school-sound { top: calc(34 * var(--h)); }
}

/* pasur.css */
/* The pasur table (Shared/PasurTable.razor, 2026-10-26), on hokm's table: its ring, board, chairs
   and cards are hokm's own styles. Here only what pasur adds: the cards laid by their boxes, the
   floor's light on what the lifted card can take, the pack in its corner with its count, the piles
   and the counts beside the chairs, and the sheet at the end of a round. Every piece is placed in
   the table's own pixels by the page. */

/* Never scrolled: a card or button near the foot reaches past it, and a focused one scrolled
   the whole table up inside its box, cutting the board off the top. */
.pasur-table { overflow: clip; }

.pasur-table .pc {
    position: absolute;
    transform-origin: 50% 50%;
    will-change: transform;
    z-index: 5;
}

.pasur-table .pc > .card {
    --wide: 100%;
    width: 100%;
    height: 100%;
}

.pasur-table .pc.going { z-index: 35; }
.pasur-table .pc.sur-mark { z-index: 6; pointer-events: none; }

/* My hand: a card that may be played takes the pointer; the lifted one stands up out of the fan. */
.pasur-table .pc.mine { z-index: 20; touch-action: none; }
/* Carried under the finger (pasur.js hold), over everything on the table. */
.pasur-table .pc.mine.carried { z-index: 45; }
.pasur-table .pc.mine.playable { cursor: var(--point, pointer); }

/* What my buttons open stands over my hand, under a card carried. */
.table.pasur-table .tray { z-index: 30; }
.table.pasur-table .opens-off { z-index: 29; }
.table.pasur-table .my-buttons { z-index: 30; }
.pasur-table.pasur-school .pc.mine.playable:hover:not(.lifted) { translate: 0 calc(-0.012 * var(--table-high, 100dvh)); }
.pasur-table .pc.mine.lifted > .card,
.pasur-table .pc.floor.lit > .card {
    outline: 0.35em solid #e2c268;
    outline-offset: -0.1em;
    box-shadow: 0 0 1.4em rgba(240, 196, 76, 0.75);
}
.pasur-table .pc.floor.lit { cursor: var(--point, pointer); }
.pasur-table .pc.floor.picked { translate: 0 -8%; }
.pasur-table .pc.floor.won > .card {
    outline: 0.3em solid #f0c44c;
    box-shadow: 0 0 1.6em rgba(240, 196, 76, 0.9);
    animation: pasur-lift 0.24s ease-out;
}

/* A card taken is lifted a little by the bundle slipping in under it (PasurView.Gather's hop). */
@keyframes pasur-lift {
    0%, 100% { scale: 1; }
    50% { scale: 1.06; }
}

/* Fereydun's star over the card he would play, in the school. */
.pasur-table .pc.star::after {
    content: "★";
    position: absolute;
    left: 50%;
    top: -1.25em;
    translate: -50% 0;
    color: #f0c44c;
    font-size: 2.6em;
    line-height: 1;
    text-shadow: 0 0 0.08em #1f3a8a, 0 0 0.08em #1f3a8a, 0 0.06em 0.3em rgba(0, 0, 0, 0.7);
    z-index: 50;
    pointer-events: none;
}

/* The ring takes a tap on the bare floor: under the cards, over the felt. */
.pasur-table .pasur-floor {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

/* The pack in its corner (2026-10-28): its cards lying one on another, each a hair higher, as
   hokm's pack lies; the bottom one casts the shadow. The count over it in cream. */
.pasur-table .pasur-pack {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}
.pasur-table .pasur-pack > .leaf,
.pasur-table .pasur-pack > .card {
    --wide: 100%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.pasur-table .pasur-pack > .leaf { display: block; border-radius: 6% / 4.3%; }
.pasur-table .pasur-pack > .leaf.foot { box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.45); }
.pasur-table .pc.draw { z-index: 31; }

.pasur-table .pasur-count {
    position: absolute;
    translate: -50% -100%;
    color: #f6ecd4;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0.06em 0.2em rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 4;
}

/* A side's pile: its face-down stack, a few backs high. */
.pasur-table .pasur-pile {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
.pasur-table .pasur-pile > .card {
    --wide: 100%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pasur-table .pasur-tally {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25em;
    color: #f6ecd4;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0.06em 0.2em rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}
.pasur-table .pasur-tally.left { align-items: flex-end; text-align: end; }

/* What a chair says: a cream bubble by its frame, as hokm's sayings are. */
.pasur-table .pasur-said {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0 0.8em;
    border-radius: 0.8em;
    background: #f6ecd4;
    color: #2a1d10;
    font-weight: 700;
    font-size: calc(2.8 * var(--h, 1dvh));
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.4);
    z-index: 45;
    pointer-events: none;
}

.pasur-table .pasur-lost {
    position: absolute;
    left: 50%;
    top: 40%;
    translate: -50% -50%;
    padding: 1em 2em;
    border-radius: 1em;
    background: #f6ecd4;
    color: #2a1d10;
    text-align: center;
    z-index: 60;
}

/* The sheet at the end of a round (Shared/PasurSheet.razor): a paper over a dimmed table, the
   points line by line, both sides, and what comes next. */
.pasur-sheet-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 70;
}

.pasur-sheet {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(92%, calc(78 * var(--u, 1dvh)));
    padding: 1.2em 2em 1.4em;
    border-radius: 0.6em;
    background: #f6ecd4;
    color: #2a1d10;
    box-shadow: 0 0.6em 2em rgba(0, 0, 0, 0.5);
    font-size: calc(2.6 * var(--u, 1dvh));
    z-index: 71;
}

.pasur-sheet h2 {
    margin: 0;
    text-align: center;
    color: #1f3a8a;
    font-size: 1.7em;
}

.pasur-sheet .to {
    margin: 0.1em 0 0.6em;
    text-align: center;
    opacity: 0.7;
}

.pasur-sheet table {
    width: 100%;
    border-collapse: collapse;
}

.pasur-sheet th,
.pasur-sheet td {
    padding: 0.28em 0.4em;
    text-align: center;
}

.pasur-sheet th:first-child,
.pasur-sheet td:first-child { text-align: start; }

.pasur-sheet tr + tr td { border-top: 1px solid rgba(42, 29, 16, 0.18); }
.pasur-sheet tr.strong td { font-weight: 700; }
.pasur-sheet tr.line { opacity: 0; animation: pasur-line 0.3s ease-out forwards; animation-delay: calc(var(--i) * 0.18s); }

@keyframes pasur-line {
    from { opacity: 0; translate: 0 0.4em; }
    to { opacity: 1; translate: 0 0; }
}

.pasur-sheet .saying {
    margin: 0.8em 0 0;
    text-align: center;
    font-style: italic;
}

.pasur-sheet .ways {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
}

.pasur-sheet .ways button {
    min-width: 8em;
    padding: 0.5em 1.2em;
    border: 0;
    border-radius: 0.5em;
    background: #1f3a8a;
    color: #f6ecd4;
    font: inherit;
    font-weight: 700;
    cursor: var(--point, pointer);
}

.pasur-sheet .ways button.plain {
    background: #e7dcc0;
    color: #2a1d10;
}

/* A round's sheet laid out as shelem's (2026-11-04): a cross in the corner, a click off the paper
   closes it, and where the game stands as a bar for each side under the count. */
.pasur-round-off { cursor: var(--point, pointer); }

.pasur-round .pr-shut {
    position: absolute;
    top: 0.5em;
    inset-inline-end: 0.5em;
    width: 1.8em;
    height: 1.8em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #1f3a8a;
    cursor: var(--point, pointer);
}

.pasur-round .pr-shut i::before,
.pasur-round .pr-shut i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.9em;
    height: 0.14em;
    border-radius: 0.07em;
    background: #f6ecd4;
    translate: -50% -50%;
    rotate: 45deg;
}

.pasur-round .pr-shut i::after { rotate: -45deg; }

.pasur-round h2 { padding: 0 1.6em; }
.pasur-round .to .dot { margin: 0 0.7em; }

/* The cards each line of the count is made of (2026-11-04: «از عکس کارت هم استفاده کن»): a side's
   points first, then its cards, side by side while there is room and fanned over each other when
   there is not (PasurSheet.razor works out --over). The sheet is wider to hold them. */
.pasur-round { width: min(94%, calc(106 * var(--u, 1dvh))); }
.pasur-round th:first-child,
.pasur-round td:first-child { width: 28%; }
.pasur-round tr.shows td { padding-top: 0.18em; padding-bottom: 0.18em; }
.pasur-round .pr-cell { display: flex; align-items: center; gap: 0.5em; }
.pasur-round .pr-pts { flex: none; width: 3.4em; text-align: center; font-weight: 400; white-space: nowrap; }
.pasur-round tr.strong .pr-pts { font-weight: 700; }
.pasur-round .pr-cards { display: flex; align-items: center; min-height: 2.45em; }
.pasur-round .pr-cards > .card {
    --wide: 1.75em;
    width: 1.75em;
    box-shadow: 0 0.08em 0.25em rgba(0, 0, 0, 0.35);
}
.pasur-round .pr-cards > * + * { margin-inline-start: var(--over, 0.15em); }
/* A fanned card shows its left edge, where its corner is: laid from the right, the first is on top. */
[dir="rtl"] .pasur-round .pr-cards > * { z-index: calc(20 - var(--k)); }
.pasur-round .pr-seal {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
}
.pasur-round .pr-seal img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pasur-round .pr-seal span { position: relative; color: #7a1d12; font-size: 0.42em; font-weight: 700; }

.pasur-round .pr-game {
    margin-top: 0.5em;
    padding-top: 0.3em;
    border-top: 1px solid rgba(42, 29, 16, 0.35);
    opacity: 0;
    animation: pasur-line 0.3s ease-out forwards;
    animation-delay: calc(var(--i) * 0.18s);
}

.pasur-round .pr-head {
    margin: 0 0 0.3em;
    text-align: center;
    opacity: 0.7;
}

.pasur-round .pr-row {
    display: grid;
    grid-template-columns: 26% 1fr 3em;
    align-items: center;
    gap: 0.6em;
    padding: 0.22em 0.4em;
}

.pasur-round .pr-name {
    overflow: hidden;
    font-weight: 400;
    white-space: nowrap;
}

.pasur-round .pr-row.mine .pr-name { font-weight: 700; }

.pasur-round .pr-bar {
    display: flex;
    height: 0.8em;
    overflow: hidden;
    border: 1px solid rgba(42, 29, 16, 0.5);
    border-radius: 0.2em;
    background: rgba(42, 29, 16, 0.12);
}

.pasur-round .pr-bar .had { background: rgba(42, 29, 16, 0.45); }
.pasur-round .pr-row.mine .pr-bar .had { background: #3f9b52; }

.pasur-round .pr-bar .gain {
    width: var(--gain);
    background: #c8962e;
    animation: pasur-gain 0.7s ease-out both;
    animation-delay: calc(var(--i) * 0.18s + 0.25s);
}

@keyframes pasur-gain {
    from { width: 0; }
    to { width: var(--gain); }
}

.pasur-round .pr-score { text-align: center; }

/* How hard the bot plays, asked before pasur against it (the game's Choice on the door). */
.pasur-levels {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: url("../art/door.jpg") center / cover, #2b2722;
    --u: min(1dvh, 0.5625dvw);
}

.pasur-levels .panel {
    min-width: calc(56 * var(--u));
    padding: calc(3 * var(--u)) calc(5 * var(--u));
    border-radius: calc(1.6 * var(--u));
    background: #f6ecd4;
    color: #2a1d10;
    text-align: center;
    box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.5);
    font-size: calc(2.8 * var(--u));
}

.pasur-levels h2 { margin: 0 0 0.3em; color: #1f3a8a; font-size: 1.5em; }
.pasur-levels p { margin: 0 0 1em; }
.pasur-levels .ways { display: flex; justify-content: center; gap: 1em; }

.pasur-levels button {
    min-width: 7em;
    padding: 0.5em 1.4em;
    border: 0;
    border-radius: 0.5em;
    background: #1f3a8a;
    color: #f6ecd4;
    font: inherit;
    font-weight: 700;
    cursor: var(--point, pointer);
}

.pasur-levels button.plain { background: #e7dcc0; color: #2a1d10; }
.pasur-levels button.back { margin-top: 1.2em; background: none; color: #6b5332; font-weight: 400; text-decoration: underline; }

/* A take laid for the flourish engine (pasur.js): a box over the whole table, nothing of its own to see. */
.pasur-table .pasur-trick {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 32;
}

/* The seal of the family a card wears (2026-10-27), as hokm's hand carries it: matte gold wax under the index. */
.pasur-table .pc > .seal {
    position: absolute;
    left: 4%;
    top: 24%;
    width: 22%;
    pointer-events: none;
    z-index: 3;
}

/* A sur, stamped before the flourish (PasurView.Sur): the painted seal (Goud.Hokm.Art
   59-the-sur-seal.md) pressed in the middle of the ring, the gold bursting from under it and the
   ring flashing gold once as it lands, its shine crossing once, then the seal lifting away. */
.pasur-table .pasur-sur { position: absolute; pointer-events: none; z-index: 45; }

.pasur-table .pasur-sur .flash {
    position: absolute;
    inset: 4% 3%;
    border-radius: 50%;
    border: var(--band) solid rgba(219, 166, 51, 0.9);
    box-shadow: 0 0 calc(var(--band) * 2.5) rgba(250, 222, 133, 0.75), inset 0 0 calc(var(--band) * 2.5) rgba(250, 222, 133, 0.75);
    opacity: 0;
    animation: pasur-flash 0.63s ease-out 0.16s both;
}

.pasur-table .pasur-sur .stamp {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--d);
    height: var(--d);
    margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
    border-radius: 50%;
    box-shadow: 0 calc(var(--d) * 0.04) calc(var(--d) * 0.08) rgba(0, 0, 0, 0.35);
    display: grid;
    place-items: center;
    animation: pasur-stamp 1.15s both;
}

/* The seal's four frames lie on each other: the first at rest, the other three each shown for a
   tenth of a second as the shine crosses, a little after it lands. */
.pasur-table .pasur-sur .stamp img,
.pasur-table .pasur-sur .burst img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-user-drag: none;
}

.pasur-table .pasur-sur .stamp img:first-child { opacity: 1; }
.pasur-table .pasur-sur .stamp img:not(:first-child) { animation: pasur-frame 0.1s calc(0.18s + var(--k) * 0.1s); }

/* The burst stands round the seal: its hole is two fifths of a frame, the seal's own size. */
.pasur-table .pasur-sur .burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--d) / 0.43);
    height: calc(var(--d) / 0.43);
    transform: translate(-50%, -50%);
}

.pasur-table .pasur-sur .burst img { animation: pasur-frame 0.09s calc(0.07s + var(--k) * 0.09s); }

.pasur-table .pasur-sur .stamp span {
    position: relative;
    font-size: calc(var(--d) * 0.2);
    font-weight: 700;
    line-height: 1;
    color: #731410;
    text-shadow: 0 0 calc(var(--d) * 0.02) rgba(251, 227, 154, 0.9);
}

.pasur-table .pasur-sur-warm { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }

@keyframes pasur-frame {
    from, to { opacity: 1; }
}

@keyframes pasur-stamp {
    0% { transform: scale(2.4); opacity: 0; }
    14% { transform: scale(1); opacity: 1; }
    20% { transform: scale(1.06); }
    27% { transform: scale(1); }
    74% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.12); opacity: 0; }
}

@keyframes pasur-flash {
    0% { opacity: 0; }
    12% { opacity: 1; }
    100% { opacity: 0; }
}

.pasur-table .pasur-trick > canvas { position: absolute; pointer-events: none; }
.pasur-table .pasur-trick > .flourish-under { z-index: 0; }
.pasur-table .pasur-trick > .flourish-over { z-index: 2; }

/* ---- the pasur school (Shared/PasurSchoolroom.razor) ---- */

.pasur-school { cursor: var(--point, pointer); }

/* The first lesson's two piles, each with its name written in it, inside the ring. */
.pasur-school .school-pile {
    position: absolute;
    display: grid;
    place-items: start center;
    padding-top: 0.4em;
    border: max(2px, 0.25vh) dashed rgba(246, 236, 212, 0.8);
    border-radius: 0.8em;
    background: rgba(31, 58, 138, 0.18);
    color: #f6ecd4;
    font-weight: 700;
    font-size: 2.6vh;
    text-shadow: 0 0.06em 0.2em rgba(0, 0, 0, 0.6);
    z-index: 2;
}

/* Lesson nine's counts over the pile: gold, bold, centred where they are put. */
.pasur-school .school-count {
    position: absolute;
    translate: -50% -50%;
    padding: 0.12em 0.45em;
    border-radius: 0.45em;
    background: #1f3a8a;
    color: #f6ecd4;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0.08em 0.3em rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 40;
}

.pasur-school .school-answers {
    position: absolute;
    translate: -50% 0;
    display: flex;
    gap: 1.2em;
    z-index: 40;
}

.pasur-school .school-answers button {
    min-width: 5em;
    padding: 0.4em 1em;
    border: 0;
    border-radius: 0.5em;
    background: #1f3a8a;
    color: #f6ecd4;
    font: inherit;
    font-size: 3.4vh;
    font-weight: 700;
    cursor: var(--point, pointer);
}

/* What Fereydun says: a cream bubble to the left of his frame, a cobalt rim, red when it says why a try was wrong. */
.pasur-school .school-bubble {
    position: absolute;
    box-sizing: border-box;
    height: auto !important;
    padding: 0.8em 1em 0.7em;
    background: #f6ecd4;
    border: max(2px, 0.36vh) solid #1f3a8a;
    border-radius: 0.6em;
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.35);
    color: #2a1d10;
    z-index: 950;
}

.pasur-school .school-bubble::after {
    content: "";
    position: absolute;
    right: -1em;
    top: 1.4em;
    border-top: 0.7em solid transparent;
    border-bottom: 0.7em solid transparent;
    border-left: 1em solid #1f3a8a;
}

.pasur-school .school-bubble.aside { border-color: #b3261e; }
.pasur-school .school-bubble.aside::after { border-left-color: #b3261e; }
.pasur-school .school-bubble .speaker { display: block; color: #b3261e; font-size: 0.8em; letter-spacing: 0.04em; }
.pasur-school .school-bubble p { margin: 0.25em 0 0; line-height: 1.32; }
.pasur-school .school-bubble.aside p { color: #b3261e; }
.pasur-school .school-bubble small { display: block; margin-top: 0.4em; opacity: 0.65; }

/* As in the hokm school: the word being said on gold, and the round key on the corner away from the speaker's name. */
.pasur-school .school-bubble p mark {
    background: rgba(255, 215, 94, 0.55);
    color: inherit;
    border-radius: 0.25em;
    box-shadow: 0 0 0 0.1em rgba(255, 215, 94, 0.55);
}

.pasur-school .school-bubble .voice-key {
    position: absolute;
    right: 0.53em;
    top: -0.77em;
    font-size: inherit;
    width: 2.3em;
    height: 2.3em;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point, pointer);
}

.pasur-school .school-bubble[dir="rtl"] .voice-key { right: auto; left: 0.53em; }
.pasur-school .school-bubble .voice-key svg { width: 100%; height: 100%; display: block; }
.pasur-school .school-bubble .voice-key .ground { fill: var(--navy); }
.pasur-school .school-bubble .voice-key .head { fill: var(--on-navy, #f6ecd4); }
.pasur-school .school-bubble .voice-key .ring { fill: none; stroke: var(--on-navy, #f6ecd4); stroke-width: 6; }
.pasur-school .school-bubble .voice-key:hover { filter: brightness(1.2); }
.pasur-school .school-bubble .voice-key:active { opacity: 0.6; }

/* The lesson's name beside the way out, and ten discs under it: done in gold, this one ringed. */
.pasur-school .school-head {
    position: absolute;
    left: 2vh;
    top: 2vh;
    display: flex;
    align-items: center;
    gap: 0.8em;
    color: #1f3a8a;
    z-index: 960;
}

.pasur-school .school-head .discs { display: flex; gap: 0.3em; }
.pasur-school .school-head .discs i { width: 0.6em; height: 0.6em; border-radius: 50%; background: rgba(31, 58, 138, 0.25); }
.pasur-school .school-head .discs i.done { background: #f0c44c; }
.pasur-school .school-head .discs i.now { outline: 2px solid #1f3a8a; outline-offset: 1px; }

/* A wrong try: the card gives a little shake. */
.pasur-table .pc.shake > .card { animation: pasur-shake 0.15s linear 2; }

@keyframes pasur-shake {
    0%, 100% { translate: 0 0; }
    25% { translate: -6px 0; }
    75% { translate: 6px 0; }
}

/* The way back on pasur's school: a cream plaque with the kit's arrow. */
.pasur-school .kit.back {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 1em 0.35em 0.8em;
    border: max(2px, 0.25vh) solid #1f3a8a;
    border-radius: 999px;
    background: #f6ecd4;
    color: #1f3a8a;
    font: inherit;
    font-size: max(14px, 2.4vh);
    font-weight: 700;
    cursor: var(--point, pointer);
    box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.3);
}

.pasur-school .kit.back .arrow {
    width: 0.9em;
    height: 0.9em;
    background: #1f3a8a;
    clip-path: polygon(0 50%, 60% 0, 60% 30%, 100% 30%, 100% 70%, 60% 70%, 60% 100%);
}

/* ---- night (night.css): the table wears hokm's filters (PasurTable.razor); pasur's own papers
   turn to the lapis paper with cream words and the ochre edge, its navy fills up to cobalt, and
   the floor and the ring, at the table and in the school, stay as they are by day. */

html.night .pasur-levels { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/door.jpg") center / cover, #2b2722; }

html.night .pasur-levels .panel,
html.night .pasur-sheet,
html.night .pasur-table .pasur-lost,
html.night .pasur-school .school-bubble {
    background: var(--night-paper);
    color: var(--night-ink);
    border: max(2px, 0.36vh) solid var(--night-edge);
}

html.night .pasur-levels h2,
html.night .pasur-sheet h2 { color: var(--night-cream); }
html.night .pasur-sheet tr + tr td { border-top-color: var(--night-line); }
html.night .pasur-round .pr-game { border-top-color: var(--night-line); }
html.night .pasur-round .pr-shut { background: var(--night-fill); }
html.night .pasur-round .pr-shut i::before,
html.night .pasur-round .pr-shut i::after { background: var(--night-cream); }
html.night .pasur-round .pr-bar { border-color: var(--night-line); background: rgba(255, 255, 255, 0.08); }
html.night .pasur-round .pr-bar .had { background: var(--night-soft); }

html.night .pasur-levels button,
html.night .pasur-sheet .ways button,
html.night .pasur-school .school-answers button,
html.night .pasur-school .school-count { background: var(--night-fill); color: var(--night-cream); }
html.night .pasur-levels button.plain,
html.night .pasur-sheet .ways button.plain { background: var(--night-tab); color: var(--night-cream); }
html.night .pasur-levels button.back { background: none; color: var(--night-soft); }

html.night .pasur-table .pasur-said { background: var(--night-paper); color: var(--night-ink); }

html.night .pasur-school .card > * { filter: brightness(0.8) sepia(0.08); }
html.night .pasur-school canvas.seat-paint { filter: brightness(0.84); }
html.night .pasur-school .school-bubble::after { border-left-color: var(--night-edge); }
html.night .pasur-school .school-bubble.aside { border-color: var(--night-crimson); }
html.night .pasur-school .school-bubble.aside::after { border-left-color: var(--night-crimson); }
html.night .pasur-school .school-bubble .speaker,
html.night .pasur-school .school-bubble.aside p { color: var(--night-red); }

html.night .pasur-school .kit.back { background: var(--night-paper); color: var(--night-cream); border-color: var(--night-edge); }
html.night .pasur-school .kit.back .arrow { background: var(--night-cream); }

/* The sound switch beside pasur's way back: a cream disc in the plaque's blue ring. */
.pasur-school .sound-switch.school-pill {
    width: 2.2em;
    height: 2.2em;
    flex: none;
    border: max(2px, 0.25vh) solid #1f3a8a;
    border-radius: 50%;
    background: #f6ecd4;
    color: #1f3a8a;
    font-size: max(14px, 2.4vh);
    box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.3);
}

html.night .pasur-school .sound-switch.school-pill { background: var(--night-paper); color: var(--night-cream); border-color: var(--night-edge); }

/* khabis.css */
/* The haft khabis table (Shared/KhabisTable.razor, 2026-10-29), on hokm's table: its ring, chairs,
   buttons and cards are hokm's own styles, its sheet and bubbles pasur's. Here only what haft
   khabis adds: the cards laid by their boxes, the pack that glows when drawing is the move, the
   pile, the needle and the ring of arrows round it, the plaques of hands won, the «تک» button with
   its three seconds, the seals stamped, the div, the owed stack and the four suit seals for a
   jack. Every piece is placed in the table's own pixels by the page. */

.khabis-table { overflow: clip; }

.khabis-table .pc {
    position: absolute;
    transform-origin: 50% 50%;
    will-change: transform;
    z-index: 5;
}

.khabis-table .pc > .card {
    --wide: 100%;
    width: 100%;
    height: 100%;
}

.khabis-table .pc.pile { cursor: var(--point, pointer); }
.khabis-table .pc.draw { z-index: 31; }
.khabis-table .pc.owed { z-index: 27; pointer-events: none; }
/* The others' backs take a right click or a held press for the back's page, as hokm's fans do. */
.khabis-table .pc.theirs { z-index: 6; }

/* My hand: a card that fits takes the pointer and wears the gold rim; the lifted one stands up out of the fan. */
.khabis-table .pc.mine { z-index: 20; touch-action: none; }
.khabis-table .pc.mine.carried { z-index: 45; }
.khabis-table .pc.mine.naming { z-index: 40; pointer-events: none; }
.khabis-table .pc.mine.playable { cursor: var(--point, pointer); }

/* What my buttons open stands over my hand (shelem holds sixteen, and the fan reaches it) and over shelem's bid buttons (35), under a card carried. */
.table.khabis-table .tray { z-index: 36; }
.table.khabis-table .opens-off { z-index: 29; }
.table.khabis-table :is(.my-buttons, .khabis-sort, .last-trick) { z-index: 30; }
.khabis-table .pc.mine.playable > .card { outline: 0.22em solid rgba(226, 194, 104, 0.9); outline-offset: -0.1em; }
.khabis-table.pasur-school .pc.mine.playable:hover:not(.lifted) { translate: 0 calc(-0.012 * var(--table-high, 100dvh)); }
.khabis-table .pc.mine.lifted > .card {
    outline: 0.35em solid #e2c268;
    outline-offset: -0.1em;
    box-shadow: 0 0 1.4em rgba(240, 196, 76, 0.75);
}

/* A card a seven or a missed «تک» makes somebody draw flies in with a red streak behind it. */
.khabis-table .pc.trail > .card { box-shadow: 0 0 1.2em 0.3em rgba(196, 30, 36, 0.75); }

/* Fereydun's star over the card he would play, in the school. */
.khabis-table .pc.star::after {
    content: "★";
    position: absolute;
    left: 50%;
    top: -1.25em;
    translate: -50% 0;
    color: #f0c44c;
    font-size: 2.6em;
    line-height: 1;
    text-shadow: 0 0 0.08em #1f3a8a, 0 0 0.08em #1f3a8a, 0 0.06em 0.3em rgba(0, 0, 0, 0.7);
    z-index: 50;
    pointer-events: none;
}

/* A khabis's seal, small under the corner's rank and suit (KhabisMotion.Badge). */
.khabis-table .pc > .khabis-badge {
    position: absolute;
    left: 3%;
    top: 22%;
    width: 30%;
    pointer-events: none;
    z-index: 3;
}

.khabis-table .khabis-pile-zone { position: absolute; z-index: 4; border-radius: 12%; }

/* The pack (2026-10-29): its cards lying one on another, the count under it; lit when drawing is my move. */
.khabis-table .khabis-pack { position: absolute; z-index: 8; pointer-events: none; }
.khabis-table .khabis-pack.lit { pointer-events: auto; cursor: var(--point, pointer); }
.khabis-table .khabis-pack > .leaf,
.khabis-table .khabis-pack > .card {
    --wide: 100%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.khabis-table .khabis-pack > .leaf { display: block; border-radius: 6% / 4.3%; }
.khabis-table .khabis-pack > .leaf.foot { box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.45); }
.khabis-table .khabis-pack.lit > .card {
    outline: 0.35em solid #e2c268;
    outline-offset: -0.1em;
    animation: khabis-glow 1.1s ease-in-out infinite alternate;
}

@keyframes khabis-glow {
    from { box-shadow: 0 0 0.6em rgba(240, 196, 76, 0.5); }
    to { box-shadow: 0 0 1.8em rgba(240, 196, 76, 0.95); }
}

.khabis-table .khabis-count {
    position: absolute;
    translate: -50% 0;
    color: #f6ecd4;
    font-weight: 700;
    line-height: 1;
    /* Under the pack it lies on the bare ground, pale by day. */
    text-shadow: 0 0.05em 0.04em rgba(0, 0, 0, 0.85), 0 0 0.28em rgba(0, 0, 0, 0.85);
    pointer-events: none;
    z-index: 9;
}

.khabis-table .khabis-keep { position: absolute; z-index: 30; }

/* What a run of sevens owes: its red glow and its big red count. */
.khabis-table .khabis-owed-glow {
    position: absolute;
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 30, 36, 0.45), rgba(196, 30, 36, 0.12) 55%, transparent 70%);
    pointer-events: none;
    z-index: 26;
    animation: khabis-pulse 0.5s ease-in-out 2;
}

@keyframes khabis-pulse {
    50% { opacity: 0.5; }
}

.khabis-table .khabis-owes {
    position: absolute;
    translate: -50% -50%;
    color: #c41e24;
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 0.08em #f6ecd4;
    paint-order: stroke fill;
    pointer-events: none;
    z-index: 28;
}

/* The needle and the ring of the two arrows round it. */
.khabis-table .khabis-needle,
.khabis-table .khabis-way {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
.khabis-table .khabis-way { transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.khabis-table .khabis-way.back { scale: -1 1; }

/* The ring swings for a ten round its own middle (khabis.js swing). */
.khabis-table .khabis-ring {
    position: absolute;
    inset: 0;
    transform-origin: var(--ox) var(--oy);
    pointer-events: none;
}

/* The suit in force beside the pile, and the named one coming out of the compass. */
.khabis-table .khabis-suit {
    position: absolute;
    pointer-events: none;
    z-index: 12;
    filter: drop-shadow(0 0.3vh 0.6vh rgba(0, 0, 0, 0.45));
}
.khabis-table .khabis-suit.coming { transition: left 0.4s ease-in-out, top 0.4s ease-in-out, scale 0.4s ease-in-out; z-index: 47; }

/* The four suit seals round the pile while my jack lies there unnamed. */
.khabis-table .khabis-name-suit {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: var(--point, pointer);
    z-index: 48;
    filter: drop-shadow(0 0.4vh 0.8vh rgba(0, 0, 0, 0.5));
    transition: scale 0.12s;
}
.khabis-table .khabis-name-suit:hover { scale: 1.08; }
.khabis-table .khabis-name-suit img { width: 112%; height: 112%; margin: -6%; display: block; }

/* A seal stamped (khabis.js stamp): it falls from large, knocks, stays and lifts away. */
.khabis-table .khabis-stamp {
    position: absolute;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 46;
    opacity: 0;
}
.khabis-table .khabis-stamp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.khabis-table .khabis-stamp b {
    position: relative;
    color: #c41e24;
    font-weight: 700;
    line-height: 1;
}

/* The div rising from behind the pile, under its cards. */
.khabis-table .khabis-div { position: absolute; z-index: 9; pointer-events: none; }
.khabis-table .khabis-div.left { scale: -1 1; }

/* The pictures the motions use, fetched with the table so the first of each does not land empty. */
.khabis-table .khabis-warm { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* A chair the seven's draw lands on flushes red; one an ace skips shrinks to half and darkens. */
.khabis-table canvas.seat-paint { transform-origin: 50% 58.7%; transition: scale 0.25s cubic-bezier(0.36, 0, 0.66, -0.56), filter 0.25s; }
.khabis-table canvas.seat-paint.shrunk { scale: 0.5; filter: brightness(0.5) saturate(0.6); transition: scale 0.25s cubic-bezier(0.36, 0, 0.66, -0.56), filter 0.25s; }
.khabis-table canvas.seat-paint.flushed { filter: sepia(0.7) saturate(3.2) hue-rotate(-28deg) brightness(1.02); transition: filter 0.12s; }
.khabis-table canvas.seat-paint:not(.shrunk) { transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s; }

/* Everybody going to the place its ace gave it. */
.khabis-table.reseating canvas.seat-paint,
.khabis-table.reseating .seat { transition: left 0.7s ease-in-out, top 0.7s ease-in-out; }

/* The eight's double-play mark on that chair's frame. */
.khabis-table .khabis-again { position: absolute; z-index: 25; pointer-events: none; animation: khabis-land 0.25s ease-out; }

@keyframes khabis-land {
    from { scale: 2; opacity: 0; }
    to { scale: 1; opacity: 1; }
}

/* The plaque of hands won (K8), stood upright beside the frame, and its star seals. */
.khabis-table .khabis-wins {
    position: absolute;
    overflow: hidden;
    rotate: -90deg;
    pointer-events: none;
    z-index: 7;
}
.khabis-table .khabis-wins img,
.khabis-table .khabis-star img { position: absolute; max-width: none; }
.khabis-table .khabis-star { position: absolute; overflow: hidden; pointer-events: none; z-index: 8; border-radius: 50%; }
.khabis-table .khabis-star.falling { animation: khabis-star 0.22s ease-in both; z-index: 47; }

@keyframes khabis-star {
    from { scale: 3; opacity: 0; }
    to { scale: 1; opacity: 1; }
}

.khabis-table .khabis-ring-won {
    position: absolute;
    width: 2.2vh;
    height: 2.2vh;
    translate: -50% -100%;
    border: 0.3vh solid #e2c268;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 7;
}
.khabis-table .khabis-ring-won.won { background: #f0d27a; }

/* How many cards another chair holds, beside its frame. */
.khabis-table .khabis-held {
    position: absolute;
    display: flex;
    align-items: center;
    color: #f6ecd4;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0.06em 0.2em rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 7;
}
.khabis-table .khabis-held.end { justify-content: flex-end; }

/* The «تک» button: the painted empty seal with the word in it, the three seconds in red round it. */
.khabis-table .khabis-tak {
    font: inherit;
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point, pointer);
    z-index: 30;
    filter: drop-shadow(0 0.4vh 0.8vh rgba(0, 0, 0, 0.45));
}
.khabis-table .khabis-tak img { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(0.25) brightness(0.85); }
.khabis-table .khabis-tak span { position: relative; font-weight: 700; color: rgba(42, 29, 16, 0.5); line-height: 1; }
.khabis-table .khabis-tak.live img { filter: none; }
.khabis-table .khabis-tak.live span { color: #c41e24; }
.khabis-table .khabis-tak.tak-said span { color: #1f3a8a; }
.khabis-table .khabis-tak.blocked { cursor: var(--arrow, default); }
.khabis-table .khabis-tak.blocked img { filter: grayscale(1) brightness(0.4); }
.khabis-table .khabis-tak:hover:not(.blocked) { scale: 1.05; }

/* The sort button where hokm's is: its painted face (K10) is the whole button. */
.khabis-table .khabis-sort {
    position: absolute;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--point, pointer);
    z-index: 30;
    filter: drop-shadow(0 0.4vh 0.8vh rgba(0, 0, 0, 0.45));
}
.khabis-table .khabis-sort img { width: 100%; height: 100%; display: block; }
.khabis-table .khabis-sort:hover { scale: 1.05; }
/* Shelem's sort button is hokm's, lit while its panel stands; the panel stands over the hand as the trays do. */
.khabis-table .khabis-sort.on { filter: drop-shadow(0 0 calc(1 * var(--h)) rgba(255, 214, 90, 1)); }
.table.khabis-table .sort-panel { z-index: 36; }

.khabis-table .khabis-aim {
    position: absolute;
    translate: -50% 0;
    margin: 0;
    padding: 0.4em 1em;
    border-radius: 0.6em;
    background: rgba(20, 14, 8, 0.7);
    color: #f6ecd4;
    font-size: 2.4vh;
    z-index: 50;
    pointer-events: none;
}

/* The hand's sheet (KhabisSheet.razor): pasur's paper, with the hands won as rings. */
.khabis-sheet td.rings { white-space: nowrap; }
.khabis-sheet td.rings i {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin: 0 0.18em;
    border: 0.12em solid rgba(42, 29, 16, 0.6);
    border-radius: 50%;
    vertical-align: middle;
}
.khabis-sheet td.rings i.won { background: #e2b64a; border-color: #8a6a1e; }

/* How many sit at the table, asked before haft khabis against the bots (the game's Choice). */
.pasur-levels .ways.three button { min-width: 5.5em; }

/* ---- night: the table wears hokm's veil; the sheet and the bubbles are pasur's papers. ---- */
html.night .khabis-table .khabis-said { background: var(--night-paper); color: var(--night-ink); }
html.night .khabis-sheet td.rings i { border-color: var(--night-soft); }

/* What a chair says: a cream bubble by its frame, as hokm's and pasur's sayings are. */
.khabis-table .khabis-said {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0 0.8em;
    border-radius: 0.8em;
    background: #f6ecd4;
    color: #2a1d10;
    font-weight: 700;
    font-size: calc(2.8 * var(--h, 1dvh));
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.4);
    z-index: 45;
    pointer-events: none;
}

.khabis-table .khabis-lost {
    position: absolute;
    left: 50%;
    top: 40%;
    translate: -50% -50%;
    padding: 1em 2em;
    border-radius: 1em;
    background: #f6ecd4;
    color: #2a1d10;
    text-align: center;
    z-index: 60;
}
html.night .khabis-table .khabis-lost { background: var(--night-paper); color: var(--night-ink); border: max(2px, 0.36vh) solid var(--night-edge); }

/* The cards of mine that fit glow gold all round, so they are seen at a glance (KhabisView.Light). */
.khabis-table .pc.mine.playable { filter: drop-shadow(0 0 0.45vh rgba(240, 196, 76, 0.95)) drop-shadow(0 0 0.2vh rgba(240, 196, 76, 0.9)); }

/* Haft khabis's hall (Online.razor with Khabis): the switch of three over the panel's top right, as the game lays it. */
.prices .sheet .khabis-players {
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(2 * var(--h));
    display: flex;
    gap: calc(1.2 * var(--h));
    z-index: 5;
}
[dir="rtl"] .prices .sheet .khabis-players { right: auto; left: calc(3 * var(--h)); }
.prices .sheet .khabis-players .kit {
    --bh: calc(6.2 * var(--h));
    position: relative;
    width: calc(15 * var(--h));
    font-size: calc(2.6 * var(--h));
}
.prices .sheet .khabis-players .kit:disabled { opacity: 0.55; }

/* A sentence said by a chair (Fereydun's at the school's hand): a wider bubble, its words wrapped. */
.khabis-table .khabis-said.long { padding: 0.4em 0.9em; font-size: calc(2.3 * var(--h, 1dvh)); font-weight: 600; line-height: 1.3; text-align: center; }

/* The haft khabis school (KhabisSchoolroom.razor), on pasur's school papers: the cards that fit lit in gold while Fereydun shows them. */
.khabis-table.pasur-school .pc.mine.school-task { cursor: var(--point, pointer); }
.khabis-table.pasur-school .pc.mine.lit > .card { outline: 0.35em solid #e2c268; outline-offset: -0.1em; box-shadow: 0 0 1.4em rgba(240, 196, 76, 0.8); }

/* shelem.css */
/* The shelem table (Shared/ShelemTable.razor, 2026-11-02), on haft khabis's: the cards laid by their
   boxes, the seats, the sort button, the bubbles and the sheet are khabis.css's and pasur.css's.
   Here only what shelem adds: the board of both sides, each chair's word in the auction, the line
   over my hand, the kit's enamel for my word and my call, and the trick. Every piece is placed in
   the table's own pixels by the page. */

.shelem-table .pc.widow,
.shelem-table .pc.laid { pointer-events: none; }
.shelem-table .pc.pack-left { z-index: 6; pointer-events: none; }
.shelem-table .pc.trick { z-index: 10; pointer-events: none; }
.shelem-table .pc.glance { z-index: 32; pointer-events: none; }

/* A trick taken goes to its taker's frame and fades on the way. */
.shelem-table .pc.trick.swept { opacity: 0; transition: opacity 0.3s ease-in; }

/* The flourishes of the trick (flourish.js, as hokm's .trick): the cards lie in a layer over the
   whole table that makes no stacking of its own, so they stand among the table's other cards as
   before, with a canvas beneath them and one over them, each laid by the script. The taker, lit,
   is a little bigger, as at hokm's table. */
.shelem-table .shelem-flourish { position: absolute; inset: 0; pointer-events: none; }
.shelem-table .shelem-flourish > canvas { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.shelem-table .shelem-flourish > .flourish-under { z-index: 9; }
.shelem-table .shelem-flourish > .flourish-over { z-index: 26; }
.shelem-table .pc.trick.won > .card { scale: 1.12; transition: scale 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.shelem-table .fl-laid[data-veiled] > .card { visibility: hidden; }
.shelem-table .fl-laid > .fl-piece { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none; z-index: 2; }
.shelem-table .fl-laid > .fl-piece > .card { --wide: 100%; width: 100%; height: 100%; box-shadow: none; }

/* While I lay down, every card takes the pointer and wears the gold rim; the four lifted stand up. */
.shelem-table .pc.mine.layable { cursor: var(--point, pointer); filter: drop-shadow(0 0 0.3vh rgba(240, 196, 76, 0.7)); }

/* A chair's word in the auction: gold on the bid that stands. */
.shelem-table .shelem-mark {
    position: absolute;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border: max(1px, 0.04em) solid rgba(255, 255, 255, 0.15);
    border-radius: 0.3em;
    background: rgba(26, 15, 8, 0.62);
    color: #f6ecd4;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    z-index: 29;
    pointer-events: none;
}
.shelem-table .shelem-mark.high { border-color: #f0d27a; background: rgba(26, 15, 8, 0.9); color: #f0d27a; }

/* The line over my hand; on the sign-in's table on a plaque, to read over the ring. */
.shelem-table .shelem-status {
    position: absolute;
    margin: 0;
    display: grid;
    place-items: center;
    color: #f6ecd4;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 0 0.25em rgba(26, 15, 8, 0.95), 0 0.05em 0.08em rgba(26, 15, 8, 0.95);
    z-index: 34;
    pointer-events: none;
}

/* The kit's enamel at a table (online.css's .prices .kit): ivory, and navy for the one thing asked. */
.shelem-table .shelem-kit {
    position: absolute;
    isolation: isolate;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-weight: 800;
    line-height: 1;
    color: var(--paper-ink, #2a1d10);
    white-space: nowrap;
    cursor: var(--point, pointer);
    z-index: 35;
}
.shelem-table .shelem-kit > span { min-width: 0; white-space: nowrap; }
.shelem-table .shelem-kit.main { color: var(--on-navy, #f6ecd4); }
.shelem-table .shelem-kit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--kit-plain, url("../art/kit/flat/button-plain.png")) 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}
.shelem-table .shelem-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(--kit-plain, url("../art/kit/flat/button-plain.png")) center / auto 100% no-repeat;
}
.shelem-table .shelem-kit.main::before { border-image: var(--kit-main, url("../art/kit/flat/button-main.png")) 0 115 fill / 0 calc(var(--bh) * 0.518) stretch; }
.shelem-table .shelem-kit.main::after { width: calc(var(--bh) * 72 / 222); background-image: var(--kit-main, url("../art/kit/flat/button-main.png")); }
.shelem-table button.shelem-kit:not(:disabled):hover { filter: brightness(1.15); }
.shelem-table button.shelem-kit:not(:disabled):active { translate: 0 max(1px, calc(var(--bh) * 0.035)); }
.shelem-table button.shelem-kit:disabled { opacity: 0.6; cursor: var(--arrow, default); }

/* Minus and plus beside the big button: the kit's round enamel with the sign drawn on it. */
.shelem-table .shelem-step {
    position: absolute;
    padding: 0;
    border: 0;
    background: url("../art/kit/flat/round-plain.png") center / 100% 100% no-repeat;
    cursor: var(--point, pointer);
    z-index: 35;
}
.shelem-table .shelem-step i,
.shelem-table .shelem-step.plus i::after {
    position: absolute;
    left: 30%;
    top: 46%;
    width: 40%;
    height: 8%;
    border-radius: 1em;
    background: var(--paper-ink, #2a1d10);
}
.shelem-table .shelem-step.plus i::after { content: ""; left: 0; top: 0; width: 100%; height: 100%; rotate: 90deg; }
.shelem-table button.shelem-step:not(:disabled):hover { filter: brightness(1.15); }
.shelem-table button.shelem-step:disabled { filter: saturate(0.5) brightness(0.8); cursor: var(--arrow, default); }
.shelem-table button.shelem-step:disabled i,
.shelem-table button.shelem-step:disabled i::after { opacity: 0.4; }

/* Fereydun's line at the school's round: its padding inside its box, so it stays on the table by a corner chair. */
.shelem-table .khabis-said.long { box-sizing: border-box; }

/* The round's sheet (ShelemSheet.razor), the game's: pasur's paper with its cross and its click
   off the paper, the hakem's line with the round's jewel, a bar of the hakem's side's points with
   the bid a gold mark on it, and the three columns. */
.shelem-sheet { width: min(94%, calc(96 * var(--u, 1dvh))); }
.shelem-sheet table { min-width: 100%; }
.shelem-sheet th { font-weight: 400; opacity: 0.7; }
.shelem-sheet h2.short { color: #b23a2a; }
.shelem-sheet .sh-bid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    margin: 0.15em 0 0.7em;
}
.shelem-sheet .sh-bid img { height: 1.5em; width: auto; }
.shelem-sheet .sh-bar {
    position: relative;
    height: 1.05em;
    margin: 0 4%;
    border: 1px solid rgba(42, 29, 16, 0.5);
    border-radius: 0.2em;
    background: rgba(42, 29, 16, 0.12);
}
.shelem-sheet .sh-bar .fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--share);
    background: #3f9b52;
    animation: shelem-fill 0.8s ease-out both;
}
.shelem-sheet .sh-bar.short .fill { background: #d0533f; }
.shelem-sheet .sh-bar .bid {
    position: absolute;
    top: -0.4em;
    bottom: -0.4em;
    inset-inline-start: var(--at);
    width: 0.22em;
    margin-inline-start: -0.11em;
    border-radius: 0.11em;
    background: #c8962e;
}
@keyframes shelem-fill {
    from { width: 0; }
    to { width: var(--share); }
}
.shelem-sheet .sh-reads { margin: 0.35em 0 0.6em; text-align: center; font-weight: 700; }
.shelem-sheet .sh-reads.made,
.shelem-sheet td.up { color: #2f7d40; }
.shelem-sheet .sh-reads.short,
.shelem-sheet td.down { color: #b23a2a; }
.shelem-sheet .to { margin: 0.6em 0 0; }

html.night .shelem-sheet h2.short,
html.night .shelem-sheet .sh-reads.short,
html.night .shelem-sheet td.down { color: var(--night-red); }
html.night .shelem-sheet .sh-reads.made,
html.night .shelem-sheet td.up { color: #7fd18b; }
html.night .shelem-sheet .sh-bar { border-color: var(--night-line); background: rgba(255, 255, 255, 0.08); }
html.night .shelem-sheet .sh-bar .fill { background: #5fae6b; }
html.night .shelem-sheet .sh-bar.short .fill { background: var(--night-crimson); }
.shelem-ask { min-width: 22em; }

/* Fereydun's word at the first joker table on this device (ShelemTable.razor, 2026-11-06): the same paper, his name as its title. */
.shelem-ask.jokers-told h2 { color: var(--cobalt, #1d3f7a); }

/* Shelem's hall (Online.razor with Shelem): the one switch for the two jokers stands where haft khabis's
   switch of three does, a little wider for its words. */
.prices .sheet .shelem-jokers .kit { width: calc(19 * var(--h)); }

/* At night the table hands its lapis enamel down (ShelemTable's NightStyle); the school keeps the ivory. */
.shelem-table.night .shelem-step { background-image: var(--kit-plain-round, url("../art/kit/flat/round-plain.png")); }
.shelem-table.night .shelem-step i,
.shelem-table.night .shelem-step.plus i::after { background: var(--night-cream, #f0e5c9); }
.shelem-table.night .shelem-kit:not(.main) { color: var(--night-cream, #f0e5c9); }

/* The school's table (ShelemSchoolroom.razor): a card of the trick that answers a question, the sum in the ring, a round's numbers. */
.shelem-table .pc.trick.picks { pointer-events: auto; cursor: var(--point, pointer); }
.shelem-table.pasur-school .pc.lit > .card { outline: 0.35em solid #e2c268; outline-offset: -0.1em; box-shadow: 0 0 1.4em rgba(240, 196, 76, 0.8); }
.shelem-table .shelem-sum {
    position: absolute;
    translate: -50% -50%;
    color: #f0d27a;
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 0.1em rgba(26, 15, 8, 0.85);
    paint-order: stroke fill;
    pointer-events: none;
    z-index: 12;
}
.shelem-table .shelem-round-board {
    position: absolute;
    translate: -50% -50%;
    display: flex;
    gap: 3em;
    color: #2a1d10;
    text-align: center;
    pointer-events: none;
    z-index: 12;
}
.shelem-table .shelem-round-board small { display: block; opacity: 0.75; }
.shelem-table .shelem-round-board b { display: block; font-size: 2.3em; line-height: 1.15; font-weight: 700; }
.shelem-table .shelem-hokm { display: flex; align-items: center; justify-content: center; gap: 0.3em; }
.shelem-table .shelem-hokm img { height: 0.8em; }
.shelem-table .shelem-status .told { padding: 0.18em 0.7em; border-radius: 0.5em; background: rgba(26, 15, 8, 0.8); }

/* The shelem school on the hokm school's table: what lies round the table is school.css's, laid over
   the table in a layer that takes no tap itself. */
.shelem-school .veil { position: absolute; inset: 0; background: rgba(8, 20, 40, 0.08); pointer-events: none; }
.shelem-school .school-chrome { position: absolute; inset: 0; pointer-events: none; background: none; touch-action: auto; }
.shelem-school .school-chrome > * { pointer-events: auto; }
.shelem-school .school-chrome .banner,
.shelem-school .school-chrome .king { pointer-events: none; }
.shelem-school .pc.kept,
.shelem-school .pc.spread { pointer-events: none; }
.shelem-school .pc.spread > .card { animation: shelem-rise 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.shelem-school .shelem-label { z-index: 40; pointer-events: none; text-align: center; }

/* A card rightly picked or played is lit and hops; the plaque rightly pressed swells in gold; the one wrongly pressed shakes. */
.shelem-school .pc.lit > .card { outline: 0.35em solid #e2c268; outline-offset: -0.1em; box-shadow: 0 0 1.4em rgba(240, 196, 76, 0.8); animation: shelem-hop 0.4s ease-out; }
.shelem-school .kit.chosen { animation: shelem-swell 0.4s ease-out; filter: brightness(1.25) sepia(0.35); pointer-events: none; }
.shelem-school .kit.wrongly { animation: shelem-shake 0.15s linear; }
.shelem-school .shelem-sum { animation: shelem-rise 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes shelem-rise { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } }
@keyframes shelem-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -1.1em; } }
@keyframes shelem-swell { 0%, 100% { scale: 1; } 40% { scale: 1.18; } }
@keyframes shelem-shake { 0%, 100% { translate: 0 0; } 33% { translate: -6px 0; } 66% { translate: 6px 0; } }

/* school.css's buttons take their words' colour from the page, and this table's page writes in the table's ink. */
.shelem-school .school-kit { color: var(--paper-ink, #16234f); }
.shelem-school .school-kit.main { color: var(--on-navy, #f6ecd4); }

/* The sign stands beside the school's board, not centred under it. */
.shelem-school .naras-sign.shelem-beside { transform: none; }
.shelem-school .board { z-index: 5; pointer-events: none; }

/* The card taking the trick as it stands is lit, as at hokm's table. */
.shelem-table .pc.trick.taking > .card { box-shadow: 0 0 1.4em 0.2em rgba(255, 215, 94, 0.85); }

/* The rounds played, opened from the button beside the way out (2026-11-05): its own class
   names, since a bare .lost at the table is the red badge at its top. */
.shelem-rounds { position: relative; width: min(90vw, calc(var(--h) * 160)); box-sizing: border-box; }
.shelem-rounds h3 { margin-bottom: calc(var(--h) * 0.6); padding: 0 calc(var(--h) * 6); }
.shelem-rounds .sr-to { margin: 0 0 calc(var(--h) * 1.6); font-size: calc(var(--h) * 2.6); color: var(--ink-soft); }
.shelem-rounds .row { display: grid; grid-template-columns: 5fr 25fr 10fr 20fr 14fr 13fr 13fr; align-items: center; min-height: calc(var(--h) * 5.8); font-size: calc(var(--h) * 3); text-align: center; }
.shelem-rounds .row i { font-style: normal; color: var(--ink-soft); }
.shelem-rounds .row.names { color: var(--ink-soft); font-size: calc(var(--h) * 2.6); border-bottom: 1.5px solid color-mix(in srgb, var(--ink-soft) 35%, transparent); }
.shelem-rounds .row.played:nth-of-type(even) { background: color-mix(in srgb, var(--ink-soft) 8%, transparent); }
.shelem-rounds .row.whole { font-size: calc(var(--h) * 3.6); border-top: 1.5px solid color-mix(in srgb, var(--ink-soft) 35%, transparent); }
.shelem-rounds .row b { font-weight: 700; }
.shelem-rounds .sr-ours { color: var(--cobalt, #1f3f8f); }
.shelem-rounds .sr-call { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--h) * 0.8); }
.shelem-rounds .sr-call img { width: calc(var(--h) * 4.2); height: calc(var(--h) * 4.2); object-fit: contain; }
.shelem-rounds .sr-made { color: #2f7a3a; }
.shelem-rounds .sr-down { color: var(--red, #bf2a26); }
.shelem-rounds .sr-sweep { color: #b8862a; }
.shelem-rounds .sr-total { color: var(--ink-soft); font-size: calc(var(--h) * 2.6); }
.shelem-rounds .sr-shut { position: absolute; top: calc(var(--h) * 2); inset-inline-end: calc(var(--h) * 2); width: calc(var(--h) * 5.4); height: calc(var(--h) * 5.4); padding: 0; border: 0; border-radius: 50%; background: #1f3a8a; cursor: var(--point, pointer); }
.shelem-rounds .sr-shut i::before,
.shelem-rounds .sr-shut i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 45%; height: 7%; border-radius: 1px; background: #f6ecd4; translate: -50% -50%; rotate: 45deg; }
.shelem-rounds .sr-shut i::after { rotate: -45deg; }

/* What the game did to my farr, at the foot of the last round's sheet, with the flame before it. */
.shelem-sheet .farr { margin: 0.5em 0 0.1em; text-align: center; font-weight: 700; }
.shelem-sheet .farr img { height: 1.1em; vertical-align: -0.2em; margin-inline-end: 0.3em; }
.shelem-sheet .farr b { margin-inline-start: 0.3em; color: #1f3a8a; }
.shelem-sheet .farr.bad b { color: var(--red-ink, #bf2a26); }

/* Hokm's three at the shelem table (ShelemTable.Thrown.cs, 2026-11-05). A tap on the trick squares
   it up (Thrown.Lie lays it crooked first). An early card lies face down in its place, under the
   trick's cards; mine has its near corner turned up (js/fold.js, as hokm's .laid.early.mine) and a
   tap takes it back. A card of my hand that may come early lifts at a tap, with no lamp on it. A
   run's row lies under the trick's cards. The run button and its hint are hokm's (.table .lead-run). */
.shelem-table .pc.trick.squares { pointer-events: auto; cursor: var(--point, pointer); }
.shelem-table .pc.early { pointer-events: none; }
.shelem-table .pc.early.mine { pointer-events: auto; cursor: var(--point, pointer); filter: drop-shadow(0 calc(0.4 * var(--h, 1vh)) calc(0.5 * var(--h, 1vh)) rgba(0, 0, 0, 0.4)); }
.shelem-table .pc.early.mine > .card { box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 100%, 0 33%); }
.shelem-table .pc.early .fold {
    position: absolute;
    left: -10%;
    top: calc(-10% * 5 / 7);
    width: 120%;
    height: calc(100% + 20% * 5 / 7);
    z-index: 3;
    pointer-events: none;
}
.shelem-table.night .pc.early > .fold { filter: url(#night-cards); }
/* A card of my hand that may come early is "soon", never "early": .pc.early.mine is my card lying face down early, cut at its turned corner (Mahdi, 2026-11-12, his shot of a hand cut slantwise). */
.shelem-table .pc.mine.soon { cursor: var(--point, pointer); }
.shelem-table .pc.run-card { pointer-events: none; }

/* ---- a shelem made (ShelemTable.Sweep.cs, the game's ShelemSweep.cs) ----
   Laid at the ring's middle, a point the size of nothing; each card is told where it comes from
   (--fx, --fy, the hakem's pile), where it lies in the fan (--x, --y, --r) and where it goes (--hx,
   --hy, the hakem). Out one after another from 0.12 s, over from 1.26 s, together in the middle at
   2.8 s and off to the hakem as the plaque comes up at 3.1 s; all gone by 5.2 s. */
.shelem-table .shelem-sweep { position: absolute; width: 0; height: 0; z-index: 40; pointer-events: none; }
.shelem-table .shelem-plaque-at { position: absolute; width: 0; height: 0; z-index: 41; pointer-events: none; }

.shelem-table .shelem-sweep .sw-card {
    position: absolute;
    left: calc(var(--cw) / -2);
    top: calc(var(--ch) / -2);
    width: var(--cw);
    height: var(--ch);
    z-index: calc(1 + var(--i));
    animation:
        sw-out 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) calc(0.12s + var(--i) * 0.06s) both,
        sw-in 0.72s ease-in-out calc(2.8s + var(--i) * 0.015s) forwards;
}

.shelem-table .shelem-sweep .sw-turn { position: absolute; inset: 0; animation: sw-flip 0.22s ease-in-out calc(1.26s + var(--i) * 0.07s) both; }
.shelem-table .shelem-sweep .sw-turn.unknown { animation: none; }
.shelem-table .shelem-sweep .sw-turn > .card { --wide: 100%; position: absolute; inset: 0; width: 100%; height: 100%; box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.35); }
.shelem-table .shelem-sweep .sw-back { animation: sw-hide 0.22s calc(1.26s + var(--i) * 0.07s) both; }
.shelem-table .shelem-sweep .sw-turn.unknown .sw-back { animation: none; }
.shelem-table .shelem-sweep .sw-face {
    animation: sw-show 0.22s calc(1.26s + var(--i) * 0.07s) both;
    box-shadow: 0 0 1.2em 0.25em rgba(255, 214, 77, 0.85), inset 0 0 0 0.18em rgba(255, 230, 128, 0.95) !important;
}

@keyframes sw-out {
    0% { transform: translate(var(--fx), var(--fy)) rotate(0deg) scale(0.55); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
}

@keyframes sw-in {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
    42% { transform: translate(0px, var(--lie)) rotate(0deg) scale(1); opacity: 1; animation-timing-function: ease-in; }
    85% { opacity: 1; }
    100% { transform: translate(var(--hx), var(--hy)) rotate(0deg) scale(0.35); opacity: 0; }
}

@keyframes sw-flip {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0); }
}

@keyframes sw-hide {
    0%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes sw-show {
    0%, 49.9% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

/* The plaque comes up out of the middle a little past its size, stands to be read, lifts away. */
.shelem-table .shelem-plaque-at .sw-plaque {
    position: absolute;
    left: calc(var(--wide) / -2);
    top: calc(var(--wide) / -2);
    width: var(--wide);
    height: var(--wide);
    display: grid;
    place-items: center;
    z-index: 30;
    animation: sw-rise 2.1s var(--at, 0s) both;
}

/* The painted plaque laid as wide as the game lays it, its height its own; the first frame at rest,
   the other three each a tenth of a second as the shine crosses, twice. */
.shelem-table .shelem-plaque-at .sw-plaque img {
    position: absolute;
    left: 7%;
    top: 50%;
    width: 86%;
    height: auto;
    transform: translateY(-50%);
    opacity: 0;
    -webkit-user-drag: none;
}

.shelem-table .shelem-plaque-at .sw-plaque img:first-child { opacity: 1; }
.shelem-table .shelem-plaque-at .sw-plaque img:not(:first-child) {
    animation:
        sw-frame 0.11s calc(var(--at, 0s) + 0.15s + (var(--k) - 2) * 0.11s),
        sw-frame 0.11s calc(var(--at, 0s) + 0.6s + (var(--k) - 2) * 0.11s);
}

.shelem-table .shelem-plaque-at .sw-plaque span {
    position: relative;
    font-size: calc(var(--wide) * 0.15);
    font-weight: 700;
    line-height: 1;
    color: #731410;
    text-shadow: 0 0 calc(var(--wide) * 0.015) rgba(251, 227, 154, 0.95);
}

@keyframes sw-rise {
    0% { transform: translateY(calc(var(--rh) * 0.08)) scale(0.3); opacity: 0; }
    6% { opacity: 1; }
    11% { transform: translateY(calc(var(--rh) * 0.01)) scale(1.07); }
    16% { transform: translateY(0) scale(1); }
    85% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(calc(var(--rh) * -0.05)) scale(1.1); opacity: 0; }
}

/* The ring flashes gold as the plaque reaches its height, as pasur's does at a sur. */
.shelem-table .shelem-plaque-at .sw-flash {
    position: absolute;
    left: calc(var(--rw) / -2);
    top: calc(var(--rh) / -2);
    width: var(--rw);
    height: var(--rh);
    box-sizing: border-box;
    border-radius: 50%;
    border: calc(var(--rh) * 0.028) solid rgba(219, 166, 51, 0.95);
    box-shadow: 0 0 calc(var(--rh) * 0.07) rgba(250, 222, 133, 0.8), inset 0 0 calc(var(--rh) * 0.07) rgba(250, 222, 133, 0.8);
    opacity: 0;
    animation: sw-glow 0.9s ease-out calc(var(--at, 0s) + 0.22s) both;
}

/* The gold bursting from behind the plaque, its four frames each shown an eighth of a second; half
   again as wide as the plaque, so its hole (and the hole's thin outline in frames 3 and 4) lies
   under the painted plaque, as the game lays it. */
.shelem-table .shelem-plaque-at .sw-burst {
    position: absolute;
    left: calc(var(--wide) * -0.725);
    top: calc(var(--wide) * -0.725);
    width: calc(var(--wide) * 1.45);
    height: calc(var(--wide) * 1.45);
    z-index: 29;
}

.shelem-table .shelem-plaque-at .sw-burst img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-user-drag: none;
    animation: sw-frame 0.125s calc(var(--at, 0s) + 0.22s + (var(--k) - 1) * 0.125s);
}

@keyframes sw-frame {
    from, to { opacity: 1; }
}

.shelem-table .shelem-plaque-warm { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }

/* The hakem's pile goes up into the fan. */
.shelem-table .pile-card.swept-up { opacity: 0; transition: opacity 0.2s; }

@keyframes sw-glow {
    0% { opacity: 0; }
    11% { opacity: 1; }
    100% { opacity: 0; }
}

/* book.css */
/* The end of a game (Shared/ResultBook.razor, the game's Book): an open book over the dimmed table,
   nothing under it pressed through. Sizes and places are laid on the pieces by the page, in shares
   of the book's height; here is only what they look like, and how each comes in. --at says when. */

.table .book-dim {
    position: absolute;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.5);
    animation: book-fade 0.25s backwards;
}

.table .result-book {
    --bk-navy: #16234f;
    --bk-deep: #101a3d;
    --bk-paper: #f9e8c4;
    --bk-gold: #d9a93f;
    --bk-soft: #a8792a;
    --bk-cream: #f6ecd4;
    --bk-cream-soft: #c2b9a4;
    --bk-ink: #2a2019;
    --bk-ink-soft: #6b5a45;
    --bk-title: #16307a;
    position: absolute;
    z-index: 46;
    border-radius: calc(1.8 * var(--bu));
    background: var(--bk-navy);
    box-shadow: 0 calc(0.8 * var(--bu)) calc(3 * var(--bu)) rgba(0, 0, 0, 0.4);
    color: var(--bk-ink);
    animation: book-in 0.25s ease-out backwards;
}

.table .result-book.fell {
    --bk-paper: #e9dcc0;
    --bk-title: #3e2c20;
}

/* The gold edge round the whole book, over both pages. */
.table .result-book::after {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: max(2px, calc(0.5 * var(--bu))) solid var(--bk-gold);
    border-radius: inherit;
    pointer-events: none;
}

.table .result-book .bk-page { position: absolute; isolation: isolate; overflow: hidden; }
.table .result-book .bk-people { background: var(--bk-navy); }
.table .result-book .bk-account { background: var(--bk-paper); }

/* The suns of the people's page stand in its two outer corners only. */
.table .result-book .bk-left .lit-sun:is(.tr, .br),
.table .result-book .bk-right .lit-sun:is(.tl, .bl) { display: none; }

/* The flowers in the paper's corners, the one painting turned to each. */
.table .result-book .flower { position: absolute; pointer-events: none; }
.table .result-book .flower.x { transform: scaleX(-1); }
.table .result-book .flower.y { transform: scaleY(-1); }
.table .result-book .flower.xy { transform: scale(-1, -1); }
.table .result-book.fell .flower { opacity: 0.6; }

.table .result-book .bk-fold { position: absolute; top: 0; bottom: 0; background: var(--bk-gold); }

/* The chairs are the table's own canvases; those who lost stand dimmed. */
.table .result-book canvas.seat-paint.dimmed { filter: brightness(0.72); }
.table.night .result-book canvas.seat-paint.dimmed { filter: url(#night-painted) brightness(0.72); }

.table .result-book .bk-crown {
    position: absolute;
    animation: book-crown 0.3s ease-out 0.35s backwards;
    pointer-events: none;
}

/* A line written by its baseline where the game writes it; the page says its size in --s. */
.table .result-book .bk-w {
    position: absolute;
    display: block;
    font-size: var(--s);
    line-height: 1;
    white-space: nowrap;
    text-align: start;
    color: var(--bk-ink);
}

.table .result-book .bk-w.t-bold { font-weight: 700; }
.table .result-book .bk-w.t-mid { text-align: center; }
.table .result-book .bk-w.t-end { text-align: end; }
.table .result-book .bk-w.t-title { color: var(--bk-title); }
.table .result-book .bk-w.t-soft { color: var(--bk-ink-soft); }
.table .result-book .bk-w.t-bad { color: #8f2f28; }
.table .result-book .bk-w.t-lane,
.table .result-book .bk-w.t-number { color: var(--bk-cream); }
.table .result-book .bk-w.t-cell { color: var(--bk-cream-soft); animation: book-fade 0.16s var(--at) backwards; }
.table .result-book .bk-w.t-plaque { color: var(--bk-cream); }

.table .result-book .bk-diamond {
    position: absolute;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: var(--bk-gold);
}

.table .result-book .bk-diamond.dull { background: var(--bk-soft); }
.table .result-book .bk-rule { position: absolute; background: var(--bk-soft); }

.table .result-book .bk-lane {
    position: absolute;
    box-sizing: border-box;
    background: var(--bk-deep);
    border: solid rgba(217, 169, 63, 0.75);
}

.table .result-book .bk-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.table .result-book .bk-thread path { fill: none; stroke: var(--bk-gold); animation: book-fade 0.16s var(--at) backwards; }
.table .result-book .bk-thread circle { fill: var(--bk-gold); animation: book-fade 0.16s var(--at) backwards; }

.table .result-book .bk-tile {
    position: absolute;
    box-sizing: border-box;
    background: #fbf0d6;
    border: solid var(--bk-soft);
    animation: book-tile 0.16s ease-out var(--at) backwards;
}

.table .result-book .bk-tile.strong { border-color: var(--bk-gold); }

.table .result-book .bk-tile img {
    position: absolute;
    left: 50%;
    top: 10%;
    height: 46%;
    transform: translateX(-50%);
}

.table .result-book .bk-ribbon { position: absolute; background: #a8151c; }
.table .result-book .bk-ribbon .bk-w { color: var(--bk-cream); }

.table .result-book .bk-dot {
    position: absolute;
    box-sizing: border-box;
    border: solid var(--bk-soft);
    border-radius: 50%;
}

.table .result-book .bk-dot.lit { background: var(--bk-gold); }

.table .result-book .bk-playline { position: absolute; background: var(--bk-gold); border-radius: 999px; }

.table .result-book .bk-ledger { animation: book-fade 0.25s var(--at) backwards; }

/* The fine dots that lead from the word to the number. */
.table .result-book .bk-leaders {
    position: absolute;
    background: radial-gradient(circle closest-side, var(--bk-ink-soft) 90%, transparent) left center / var(--every) 100% repeat-x;
    opacity: 0.8;
}

.table .result-book .bk-sign { position: absolute; object-fit: contain; }

.table .result-book .bk-plaque {
    position: absolute;
    box-sizing: border-box;
    background: #1a2f7a;
    border: solid var(--bk-gold);
}

/* The break: its heading the plaque's second line and the count under the plaque, or with no news
   of mine both on the plaque. CupRestClock draws the two. */
.table .result-book .bk-rest { position: absolute; }
.table .result-book .bk-rest .cup-rest.at-book { position: absolute; inset: 0; display: block; max-width: none; color: var(--bk-cream); }

.table .result-book .bk-rest .cup-rest.at-book small,
.table .result-book .bk-rest .cup-rest.at-book b {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

.table .result-book .bk-rest .cup-rest.at-book small { top: 60%; font-size: calc(var(--ru) * 0.029); color: var(--bk-cream); opacity: 1; }
.table .result-book .bk-rest .cup-rest.at-book b { top: 112%; font-size: calc(var(--ru) * 0.03); font-weight: 400; color: var(--bk-ink-soft); }
.table .result-book .bk-rest .cup-rest.at-book.late b { color: #c4161e; }

.table .result-book .bk-rest.alone .cup-rest.at-book small { top: 22%; font-size: calc(var(--ru) * 0.034); font-weight: 700; }
.table .result-book .bk-rest.alone .cup-rest.at-book b { top: 60%; font-size: calc(var(--ru) * 0.029); color: var(--bk-cream); }
.table .result-book .bk-rest.alone .cup-rest.at-book.late b { color: #ffb4a0; }

.table .result-book .bk-badge { position: absolute; display: block; }

/* The way out, in the kit's enamel; the word stays cream on navy and ink on ivory. */
.table .result-book button {
    position: absolute;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--bs);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--bk-ink);
    cursor: var(--point);
}

.table .result-book button span { display: block; text-align: center; }

.table .result-book button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--kit-plain, url("../art/kit/flat/button-plain.png")) center / 100% 100% no-repeat;
}

.table .result-book button.bk-main { color: var(--cream); }
.table .result-book button.bk-main::before { background-image: var(--kit-main, url("../art/kit/flat/button-main.png")); }
.table .result-book button:hover { filter: brightness(1.12); }
.table .result-book button:active::before { transform: translateY(2px); }
.table.night .result-book button { color: var(--cream); }

/* A tap, or the end of the two seconds: everything stands where it rests. A line said late comes at once. */
.table .result-book.all-in,
.table .result-book.all-in :is(.bk-crown, .bk-tile, .bk-w.t-cell, .bk-ledger, .bk-thread path, .bk-thread circle) { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .table .book-dim,
    .table .result-book,
    .table .result-book :is(.bk-crown, .bk-tile, .bk-w.t-cell, .bk-ledger, .bk-thread path, .bk-thread circle) { animation: none; }
}

@keyframes book-fade { from { opacity: 0; } }
@keyframes book-in { from { opacity: 0; transform: scale(0.985); } }
@keyframes book-crown { from { opacity: 0; transform: translateY(var(--drop)); } }
@keyframes book-tile { from { opacity: 0; transform: translateY(calc(-2 * var(--bu))); } }

/* 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. Its own name, lost-page: a bare .lost is a lost farr on my games and the
   table's dropped-line note, which this sheet laid over the whole screen. */

.lost-page {
    --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-page {
    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-page 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-page 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-page .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-page .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-page .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-page .lost-home:hover { filter: brightness(1.15); }
.lost-page .lost-home:active { padding-top: max(4px, calc(var(--bh) * 0.07)); }
.lost-page .lost-home:active::after { visibility: hidden; }

.lost-page .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-page { --u: min(0.8dvh, 1.5vw); }
    .lost-page h1 { font-size: calc(6.5 * var(--u)); }
    .lost-page p { font-size: calc(4 * var(--u)); }
}

/* A phone held upright lays the page on its side, as the table, and it is wide again. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .lost-page {
        --u: min(1dvw, 0.85dvh);
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }

    .lost-page h1 { font-size: calc(5.6 * var(--u)); }
    .lost-page p { font-size: calc(3 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
    .lost-deal, .lost-turn, .lost-coin, .lost-coin::after, .lost-page h1, .lost-page p, .lost-page .lost-home { animation-duration: 1ms; animation-delay: 0s; }
}

/* FocusOnNavigate puts the focus on the heading; it needs no ring. */
.lost-page 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 .press.danger { color: var(--night-red); }
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, .cup-back, .lanterns, .mypage) .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, .cup-back, .lanterns, .mypage) .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: its floor as by day; Fereydun's words on the lapis paper; the kings' painted
   name plates keep their cream and their day's ink ---- */

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 {
    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 .king .plaque img { filter: var(--night-painted); }

/* ---- the sign-in: the ink drawing on dark paper, the lines cream, the gold kept (signin.css) ---- */

html.night .ink-sheet {
    --paper: #0f1a14;
    --paper-deep: #182720;
    --ink: #eadfc3;
    --ink-soft: #b9ad92;
    --gold: #c9a24a;
    --gold-deep: #d8b25c;
    --green: #2a6e48;
    --field: #152219;
    background-image: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(40, 70, 52, 0.35), rgba(40, 70, 52, 0) 70%);
}

html.night .door.ink .title { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }

/* The chooser and the sound stand outside the door and carry the same night paper and ink. */
html.night .ink-sheet ~ .tongues {
    --paper: #0f1a14;
    --paper-deep: #182720;
    --ink: #eadfc3;
    --gold: #c9a24a;
}
html.night .ink-sheet ~ .tongues button,
html.night .ink-sheet ~ .tongues select.chooser { background-color: var(--paper); color: var(--ink); }
html.night .ink-sheet ~ .tongues button.chosen { background-color: var(--paper-deep); color: var(--ink); }
html.night .door.ink .panel .trouble,
html.night .door.ink .cups-list li.playing,
html.night .door.ink .cups-list .bill.playing { color: var(--night-red); border-color: var(--night-red); }
html.night .door.ink input::placeholder { color: var(--ink-soft); }
html.night .ink-sheet > .arena { background: #0b1a12; }