/* Card Club — Shan Koe Mee browser client. Visual direction "Ink": warm near-black ground, off-white type,
   one brass accent, seats as type and hairlines. No drawn felt, no ovals, no pods, no emoji. */
/* §27 DAY / NIGHT (ADAM 2026-09-29: automatic AND by hand — auto · နေ့ · ည, remembered per device).
   data-mode lives on <html> (index.html's pre-paint script sets it before the first frame). NIGHT is the default
   and is PINNED on every surface that must never turn: ADAM's sign-in card, the whole table frame (seats, pot,
   sheets, notice, table toasts), the big hand view, and the body while a table is up (body.table covers the
   body-level toasts over an open view and the ground behind the portrait quarter turn). Day re-defines the
   tokens on :root ONLY, so it reaches just the upright screens: the room list, the rules card, lobby toasts and
   the Games home. Key day on :root[data-mode] and never on a bare [data-mode]: the switch buttons carry it too.
   The three blocks — night, day, and the auto @media copy of day — must hold the SAME property names
   (test/theme.client.test.ts pins it); change them together. */
:root, .signin, .frame, .handview, body.table {
  --ink: #141311;
  --paper: #ECE7DC;
  --brass: #C9A24A;
  --red: #B3261E;
  --hair: rgba(236, 231, 220, .16);
  --hair2: rgba(236, 231, 220, .08);
  --dim: rgba(236, 231, 220, .55);
  --dim2: rgba(236, 231, 220, .34);
  --brass-dim: rgba(201, 162, 74, .55);
  --text2: rgba(236, 231, 220, .86);      /* running text on the rules card */
  --wash: rgba(236, 231, 220, .05);       /* a row pressed under the finger */
  --float: rgba(20, 19, 17, .92);         /* a toast floating over the screen */
  --full-op: .55;                         /* a full room: the whole card fades at night… */
  --full-mark-op: 1;                      /* …and its seat dots with it */
  --full-badge: none;                     /* by day a full room's badge greys instead of fading, so its letters keep their contrast */
  --kit-deep: none;                       /* by day a 10 % shade over a kit red too light for white letters (app.js marks it .deep);
                                             an IMAGE layer, so at night there is no layer at all and the badge paints exactly as before */
  --badge-edge: transparent;              /* a white kit badge needs a hairline only on paper */
  --sbar: transparent;                    /* the iOS status-bar band (installed app, portrait) */
  /* §27 DAY DESIGN (ADAM 2026-09-30: "make it look good in day") — the objects of the upright screens. At night
     every one of these resolves to what those screens already painted (nothing, transparent, 0, the same
     hairline), so the night look is untouched; the day block gives them a surface, a lift and a tray. */
  --ground: none;                         /* the page: a soft light from the top of the screen */
  --surface: transparent;                 /* a card, a room, the chosen tier: an object that stands up */
  --lift: none;                           /* …and the shadow it stands on */
  --room-edge: var(--hair2);              /* a room card's edge */
  --game-edge: var(--hair);               /* a game card's edge */
  --tray: transparent;                    /* the tier rail and the rules' nav: a channel the plaques sit in */
  --tray-shade: none;
  --tray-rule: var(--hair);               /* the rail's own dividing line (the tray replaces it by day) */
  --tray-r: 0;
  --tray-pad: 6px 0;                      /* landscape rail */
  --tray-pad-p: 0;                        /* portrait strip */
  --plaque-r: 0;                          /* the chosen tier / section: a plaque lifted out of the tray */
  --plaque-edge: var(--brass);            /* night marks the chosen one with its brass edge… */
  --plaque-pip: transparent;              /* …day with a short brass bar inside the plaque (an edge would bend round its corners) */
  --felt: none;                           /* the Shan card's window of the table's own cloth */
  --felt-rim: none;
  --felt-off: none;                       /* Poker's window: the same table with its lamp off */
  --felt-off-rim: none;
  --felt-off-line: transparent;           /* …and the inlay not laid yet (a dashed line) */
  --sunk: transparent;                    /* Poker (coming soon) and a full room: a slot, not an object */
  --sunk-shade: none;
  --soon-edge: var(--hair);
  --soon-art: grayscale(1);
  --soon-art-op: .3;
  --card-shade: none;                     /* the rules card's example faces */
  --tray-gap: 0;                          /* the tray stands off the hairline above it by day */
  --game-h-p: 196px;                      /* a game card on an upright phone (by day its cloth window needs more) */
  color-scheme: dark;
}
/* REQUIRED, not decoration: `color` is inherited as an already-computed value, so without this a pinned surface
   would take the body's DAY ink and ADAM's sign-in card would print dark text on its dark glass. */
.signin, .frame, .handview, body.table { color: var(--paper); }
:root[data-mode="day"] {
  --ink: #F4EFE4;
  --paper: #1D1B17;
  --brass: #7A5A12;
  --red: #A8231B;
  --hair: rgba(90, 68, 26, .2);
  --hair2: rgba(90, 68, 26, .1);
  --dim: rgba(29, 27, 23, .72);
  --dim2: rgba(29, 27, 23, .64);
  --brass-dim: #83641D;
  --text2: rgba(29, 27, 23, .86);
  --wash: rgba(90, 68, 26, .06);
  --float: rgba(255, 253, 248, .97);
  --full-op: 1;
  --full-mark-op: .5;
  --full-badge: saturate(.3);
  --kit-deep: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
  --badge-edge: var(--hair);
  --sbar: #141311;
  --ground: radial-gradient(140% 100% at 50% 0%, #FCFAF5 0%, #F7F3EA 45%, #F4EFE4 100%);
  --surface: linear-gradient(180deg, #FFFDF8 0%, #FCF8EF 100%);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(74, 52, 18, .07), 0 5px 14px -7px rgba(74, 52, 18, .3);
  --room-edge: rgba(122, 94, 40, .2);
  --game-edge: rgba(122, 94, 40, .24);
  --tray: rgba(110, 84, 36, .075);
  --tray-shade: inset 0 1px 2px rgba(74, 52, 18, .1), inset 0 0 0 1px rgba(110, 84, 36, .06);
  --tray-rule: transparent;
  --tray-r: 12px;
  --tray-pad: 6px;
  --tray-pad-p: 4px;
  --plaque-r: 8px;
  --plaque-edge: transparent;
  --plaque-pip: var(--brass);
  --felt: radial-gradient(ellipse 44% 56% at 50% 40%, rgba(242, 236, 206, .1) 0%, rgba(242, 236, 206, .035) 55%, rgba(242, 236, 206, 0) 85%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95 .62' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 75% 95% at 50% 38%, #5C1A14 0%, #4F1611 40%, #3C100D 78%, #2C0C09 100%);
  --felt-rim: inset 0 0 0 1px #0C0B0A, inset 0 0 0 3.5px #2A2622, inset 0 0 0 4.5px rgba(201, 162, 74, .72), inset 0 12px 24px -10px rgba(0, 0, 0, .6);
  --felt-off: radial-gradient(ellipse 75% 95% at 50% 38%, #EAE3D5 0%, #E4DCCC 60%, #DDD4C2 100%);
  --felt-off-rim: inset 0 0 0 1px rgba(110, 84, 36, .16), inset 0 2px 6px rgba(74, 52, 18, .12);
  --felt-off-line: rgba(122, 94, 40, .3);
  --sunk: rgba(110, 84, 36, .055);
  --sunk-shade: inset 0 1px 3px rgba(74, 52, 18, .12);
  --soon-edge: rgba(122, 94, 40, .4);
  --soon-art: grayscale(1) sepia(.4);
  --soon-art-op: .42;
  --card-shade: 0 1px 1px rgba(74, 52, 18, .12), 0 4px 10px -4px rgba(74, 52, 18, .3);
  --tray-gap: 8px;
  --game-h-p: 226px;
  color-scheme: light;
}
/* automatic on a light phone: the SAME day block, verbatim (a selector cannot share a block with a media query) */
@media (prefers-color-scheme: light) {
  :root[data-mode="auto"] {
    --ink: #F4EFE4;
    --paper: #1D1B17;
    --brass: #7A5A12;
    --red: #A8231B;
    --hair: rgba(90, 68, 26, .2);
    --hair2: rgba(90, 68, 26, .1);
    --dim: rgba(29, 27, 23, .72);
    --dim2: rgba(29, 27, 23, .64);
    --brass-dim: #83641D;
    --text2: rgba(29, 27, 23, .86);
    --wash: rgba(90, 68, 26, .06);
    --float: rgba(255, 253, 248, .97);
    --full-op: 1;
    --full-mark-op: .5;
    --full-badge: saturate(.3);
    --kit-deep: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
    --badge-edge: var(--hair);
    --sbar: #141311;
    --ground: radial-gradient(140% 100% at 50% 0%, #FCFAF5 0%, #F7F3EA 45%, #F4EFE4 100%);
    --surface: linear-gradient(180deg, #FFFDF8 0%, #FCF8EF 100%);
    --lift: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(74, 52, 18, .07), 0 5px 14px -7px rgba(74, 52, 18, .3);
    --room-edge: rgba(122, 94, 40, .2);
    --game-edge: rgba(122, 94, 40, .24);
    --tray: rgba(110, 84, 36, .075);
    --tray-shade: inset 0 1px 2px rgba(74, 52, 18, .1), inset 0 0 0 1px rgba(110, 84, 36, .06);
    --tray-rule: transparent;
    --tray-r: 12px;
    --tray-pad: 6px;
    --tray-pad-p: 4px;
    --plaque-r: 8px;
    --plaque-edge: transparent;
    --plaque-pip: var(--brass);
    --felt: radial-gradient(ellipse 44% 56% at 50% 40%, rgba(242, 236, 206, .1) 0%, rgba(242, 236, 206, .035) 55%, rgba(242, 236, 206, 0) 85%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95 .62' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 75% 95% at 50% 38%, #5C1A14 0%, #4F1611 40%, #3C100D 78%, #2C0C09 100%);
    --felt-rim: inset 0 0 0 1px #0C0B0A, inset 0 0 0 3.5px #2A2622, inset 0 0 0 4.5px rgba(201, 162, 74, .72), inset 0 12px 24px -10px rgba(0, 0, 0, .6);
    --felt-off: radial-gradient(ellipse 75% 95% at 50% 38%, #EAE3D5 0%, #E4DCCC 60%, #DDD4C2 100%);
    --felt-off-rim: inset 0 0 0 1px rgba(110, 84, 36, .16), inset 0 2px 6px rgba(74, 52, 18, .12);
    --felt-off-line: rgba(122, 94, 40, .3);
    --sunk: rgba(110, 84, 36, .055);
    --sunk-shade: inset 0 1px 3px rgba(74, 52, 18, .12);
    --soon-edge: rgba(122, 94, 40, .4);
    --soon-art: grayscale(1) sepia(.4);
    --soon-art-op: .42;
    --card-shade: 0 1px 1px rgba(74, 52, 18, .12), 0 4px 10px -4px rgba(74, 52, 18, .3);
    --tray-gap: 8px;
    --game-h-p: 226px;
    color-scheme: light;
  }
}
:root {
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --font: "Noto Sans Myanmar", "Myanmar Sangam MN", "Pyidaungsu", "Padauk", "Myanmar Text", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; background: var(--ink); color: var(--paper); font-family: var(--font);
  font-size: 14px; line-height: 1.5; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}
body { position: fixed; inset: 0; }
[hidden] { display: none !important; }

button {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 500; line-height: 1; color: var(--paper);
  background: transparent; border: 1px solid var(--hair); border-radius: 999px; min-height: 44px; min-width: 44px; padding: 0 14px;
  cursor: pointer; touch-action: manipulation; letter-spacing: .02em; white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
button:active { transform: scale(.96); }
button.pri { background: var(--brass); color: var(--ink); border-color: var(--brass); font-weight: 600; padding: 0 18px; }
button.on { border-color: rgba(201, 162, 74, .6); color: var(--brass); }
button.quiet { border-color: transparent; color: var(--dim); }
button[disabled] { opacity: .35; pointer-events: none; }
input, textarea {
  font: inherit; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid var(--hair); outline: none;
  padding: 8px 0; font-size: 18px; width: 100%; border-radius: 0; -webkit-user-select: text; user-select: text;
}
input:focus { border-bottom-color: var(--brass); }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* ===================================================================== sign in (§18.3, 2026-09-27)
   The brand, a heading and the small print on one side; the name, the PIN (and, while an account is being made,
   the PIN again), one line for whatever went wrong and the two buttons on the other. Ink only, no illustration.
   A phone held SIDEWAYS is 390 px tall and the create side has three fields, so the card is two columns as soon
   as the screen is wide and short, and one column when it is tall (portrait, or a tablet). */
.signin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto;
  padding: calc(10px + var(--st)) calc(16px + var(--sr)) calc(10px + var(--sb)) calc(16px + var(--sl));
  /* THE ROOM (ADAM 2026-09-28, of the two sign-in screens he sent). Not a landscape and not a photo:
     one warm lamp over a dark table, which is what the game is. Two radials and nothing else. */
  background:
    radial-gradient(118% 62% at 50% -12%, rgba(201, 162, 74, .20), rgba(201, 162, 74, .045) 46%, transparent 72%),
    radial-gradient(86% 52% at 50% 112%, rgba(201, 162, 74, .06), transparent 62%),
    var(--ink);
}
/* the falling chips (chipfall.js) insert themselves as the FIRST child, so they sit behind the card */
.signin .chipfall { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* ONE LAYOUT, LANDSCAPE (ADAM: "portrait က မလိုဘူး Landscape Only ပဲ ထားမယ်"). Heading left, form right,
   the swap link under the FORM — under the heading it left a dead quarter bottom-right. A phone held
   upright gets the identical card rather than a second design nobody asked for.
   500 px wide is ADAM's own pick from three. The box shrank; the TYPE did not — the input stays at 16 px,
   the exact size below which iOS zooms the page when a field takes focus. */
.signin .card {
  position: relative; z-index: 1; width: 100%; max-width: 500px; padding: 16px 18px; border-radius: 15px;
  border: 1px solid var(--hair); background: rgba(20, 19, 17, .52);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(236, 231, 220, .06);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start;
}
.signin .left { grid-column: 1; align-self: center; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.signin .brand { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; color: var(--brass); }
.signin h1 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.signin .sub { font-size: 13px; color: var(--dim); line-height: 1.45; }
.signin form { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* FIELDS — the label lives INSIDE the box, above the value, as in both of ADAM's references. */
.signin .f {
  position: relative; display: block; border: 1px solid var(--hair); border-radius: 11px; padding: 7px 11px 6px;
  background: rgba(236, 231, 220, .035); transition: border-color .18s, box-shadow .18s, background .18s;
}
.signin .f:focus-within { border-color: var(--brass-dim); background: rgba(236, 231, 220, .055); box-shadow: 0 0 0 3px rgba(201, 162, 74, .13); }
.signin .f > span { display: block; font-size: 10.5px; letter-spacing: .06em; color: var(--dim2); margin-bottom: 2px; }
.signin .f:focus-within > span { color: var(--brass-dim); }
.signin .f input { display: block; width: 100%; border: 0; background: none; outline: none; font-size: 16px; padding: 0; line-height: 1.35; }
.signin .f input::placeholder { color: rgba(236, 231, 220, .22); }
.signin .f.pin input { letter-spacing: .3em; }
.signin .f.pin input { padding-right: 34px; }                 /* room for the eye, so a 6-digit PIN never runs under it */
.signin .eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  border: 0; background: none; display: grid; place-items: center; color: var(--dim2); border-radius: 8px; padding: 0;
}
.signin .eye:hover { color: var(--dim); }
.signin .eye svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.signin .eye .slash { opacity: 0; }
.signin .eye[aria-pressed="true"] .slash { opacity: 1; }

/* THE BUTTON — one shape, three states: ready, working, done. */
.signin .go {
  position: relative; width: 100%; min-height: 44px; border: 0; border-radius: 11px;
  background: var(--brass); color: #17150F; font-size: 15px; font-weight: 600;
  display: grid; place-items: center; transition: background .22s, color .22s; overflow: hidden;
}
.signin .go[data-state="working"] { background: rgba(201, 162, 74, .28); }
.signin .go[data-state="working"] .go-t { opacity: 0; }
.signin .go[data-state="done"] { background: #2E6B4A; color: var(--paper); }
.signin .go[data-state="done"] .go-t { opacity: 0; }
.signin .go .go-t { transition: opacity .16s; }
.signin .go .spin {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(236, 231, 220, .25); border-top-color: var(--paper);
  animation: signSpin .7s linear infinite; opacity: 0;
}
.signin .go[data-state="working"] .spin { opacity: 1; }
@keyframes signSpin { to { transform: rotate(360deg); } }
.signin .go .tick { position: absolute; width: 20px; height: 20px; opacity: 0; fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.signin .go[data-state="done"] .tick { opacity: 1; }

.signin .line { min-height: 15px; font-size: 12px; line-height: 1.3; color: var(--brass-dim); text-align: center; }
.signin .line.bad { color: var(--red); }
.signin .swap {
  grid-column: 2; grid-row: 2; width: 100%; min-height: 36px; margin-top: 2px;
  border: 0; background: none; font-size: 12.5px; color: var(--dim); border-radius: 8px;
}
.signin .swap:hover { background: rgba(236, 231, 220, .04); }
.signin .swap b { color: var(--brass); font-weight: 600; }

/* A screen too narrow for two columns (a phone held upright, a very small window) stacks them rather
   than squeezing the form to nothing. Same card, same type — only the columns give way. */
@media (max-width: 560px) {
  .signin .card { grid-template-columns: 1fr; gap: 14px 0; max-width: 360px; }
  .signin .left { grid-column: 1; }
  .signin form { grid-column: 1; grid-row: 2; }
  .signin .swap { grid-column: 1; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) { .signin .go .spin { animation: none; } }

/* ===================================================================== lobby = THE ROOM LIST (§16 ROOM LIST, ADAM 2026-09-26)
   A slim bar (brand · name · chips), then the tier rail and the grid of club rooms. Landscape: rail on the left,
   4 columns. Portrait: the rail becomes a horizontal strip on top, 3 columns. Ink only — the club colour appears
   as a 4 px two-tone stripe on the card's left edge and nowhere else (no crests, no logos, no thumbnails). */
.lobby {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(8px + var(--st)) calc(14px + var(--sr)) calc(8px + var(--sb)) calc(14px + var(--sl));
  background-image: var(--ground);
}
.lobby .bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; min-height: 42px; flex-wrap: wrap; }
.lobby .brand { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--brass); white-space: nowrap; }
.lobby .brand .short { display: none; }   /* the club's name and the game's, one line; an upright phone keeps the game's */
/* §18.3 — a new account has no chips: one quiet line, and it never nags twice */
.lobby .nochips { flex: 0 0 auto; padding: 4px 0 2px; color: var(--brass); font-size: 12px; }
.lobby .status { color: var(--brass); font-size: 12px; white-space: nowrap; }
.lobby .status .ccw-bars, .lobby .fail .ccw-bars { margin-left: 8px; }   /* §19.5 the stepping bars take the line's own colour */
.lobby .status:empty { display: none; }
.lobby .chips { margin-left: auto; color: var(--dim); font-size: 12px; white-space: nowrap; }
.lobby .chips b { color: var(--paper); font-weight: 500; font-size: 15px; margin-left: 6px; }
/* §7.10 — the ရှင်းပြချက် way in from the lobby: the same book stroke as the table's rail icon, no emoji */
.lobby .bar .help { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 44px; min-width: 0; padding: 0 8px; font-size: 11.5px; color: var(--dim); border-color: transparent; }
.lobby .bar .help svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lobby .bar .help:active { color: var(--brass); transform: none; }
/* §8.6 the table closed under us: one notice + one tap back into the same room */
/* ---- §16.0.10 the MYANMAR / ENGLISH switch: two words, a hairline between them, the live one in brass.
   It sits on the Games home's bar and in the rules card's head (the room list's and the table's are gone). 44 px targets. ---- */
.lang { display: flex; align-items: center; }
.lang button {
  min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 0; background: transparent;
  color: var(--dim2); font-size: 12px; font-weight: 500; letter-spacing: .04em; line-height: 1;
}
.lang button + button { border-left: 1px solid var(--hair); }
.lang button.on { color: var(--brass); }
.lang button:active { color: var(--paper); transform: none; }
/* ---- §27 the DAY / NIGHT switch (makeModeToggle in app.js; the plate look lives in buttons/plate.css) is on the
   Games home only: icon + word side by side. The room list's compact copy went with ADAM's 2026-09-30 decision. ---- */
/* an installed iPhone app draws a WHITE clock (black-translucent cannot change at run time): on a light
   screen it would vanish, so a dark band sits under it. --sbar is transparent at night. */
@media (display-mode: standalone) {
  .lobby::before, .rules::before, .games::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--st);
    background: var(--sbar); pointer-events: none; z-index: 1;
  }
}

.lobby .closed { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; padding: 8px 12px; border: 1px solid var(--brass-dim); border-radius: 12px;
  background: var(--surface); box-shadow: var(--lift); }
.lobby .closed .t { display: block; font-size: 13px; font-weight: 500; }
.lobby .closed small { display: block; color: var(--dim); font-size: 11px; }

.lobby .cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 146px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-top: 1px solid var(--hair); }
.tierrail { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; border-right: 1px solid var(--tray-rule); padding: var(--tray-pad);
  background: var(--tray); box-shadow: var(--tray-shade); border-radius: var(--tray-r); margin-top: var(--tray-gap); }
.tierrail .tier {
  position: relative; flex: 0 0 auto; display: block; text-align: left; background: transparent; border: 0; border-radius: 0;
  border-left: 2px solid transparent; padding: 7px 12px; min-height: 44px; min-width: 0; color: var(--dim); line-height: 1.3;
}
.tierrail .tier b { display: block; font-size: 13.5px; font-weight: 500; color: var(--paper); white-space: nowrap; }
.tierrail .tier small { display: block; font-size: 11px; color: var(--dim2); white-space: nowrap; }
.tierrail .tier.no b { color: var(--dim); }
.tierrail .tier.on { border-left-color: var(--plaque-edge); background: var(--surface); box-shadow: var(--lift); border-radius: var(--plaque-r); }
/* by day the mark is a short brass bar set into the plaque's edge; at night --plaque-pip is transparent */
.tierrail .tier.on::before, .rnav button.on::before { content: ""; position: absolute; left: 3px; top: 13px; bottom: 13px; width: 3px; border-radius: 3px; background: var(--plaque-pip); pointer-events: none; }
.tierrail .tier.on b, .tierrail .tier.on small { color: var(--brass); }
.tierrail .tier:active { transform: none; background: var(--wash); }

.lobby .main { min-width: 0; display: flex; flex-direction: column; padding-left: 16px; }
.lobby .head { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0 7px; }
.lobby .head h1 { font-size: 14px; font-weight: 600; line-height: 1.3; min-width: 0; }
.lobby .head span { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.lobby .fail { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 0 8px; color: var(--dim); font-size: 12px; }
.lobby .fail > span { flex: 1 1 auto; min-width: 0; }
.lobby .fail button { flex: 0 0 auto; min-height: 44px; font-size: 12px; padding: 0 14px; color: var(--brass); border-color: var(--brass-dim); }   /* never squeezed under its own word */

.lobby .grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; padding-bottom: 8px;
}
.lobby .room {
  position: relative; display: flex; align-items: center; gap: 10px; text-align: left; white-space: normal; letter-spacing: 0;
  border: 1px solid var(--room-edge); border-radius: 10px; background: var(--surface); box-shadow: var(--lift);
  padding: 9px 11px; min-height: 62px; color: var(--paper); font-weight: 400; overflow: hidden;
}
/* the badge: the club's two kit colours split on the diagonal, with our own monogram — never a crest */
/* one solid kit colour with a ring of the second: a diagonal split cannot keep a monogram legible on
   both halves, and the ring still carries the club's second colour */
.lobby .room .badge {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--a); box-shadow: inset 0 0 0 2.5px var(--b), 0 0 0 1px var(--badge-edge); overflow: hidden;
  font: 700 13px/1 system-ui, -apple-system, sans-serif; letter-spacing: -.01em;
}
.lobby .room .badge.m3 { font-size: 11px; letter-spacing: -.02em; }
.lobby .room .badge.deep { background-image: var(--kit-deep); }
.lobby .room .badge b { display: block; }
.lobby .room .body { min-width: 0; flex: 1 1 auto; display: block; }
.lobby .room .name { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby .room .sub { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; color: var(--dim); font-size: 11.5px; line-height: 1.3; }
.lobby .room .sub .bk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* NOT .who — that class is the table's seat block */
/* `.pot` is also the TABLE's pot (position: absolute at 75 % / 50 %, a 0 x 0 box): without the reset below the figure
   floated there, overflowed the card at an upright phone's width and ran into the banker's name. It sits on the
   banker's row, right-aligned, as this row was always meant to. */
.lobby .room .sub .pot { position: static; width: auto; height: auto; flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--paper); }
.lobby .room .sub .pot:empty { display: none; }
.lobby .room .sub.free { color: var(--dim2); }
.lobby .room .seats { display: flex; flex-wrap: wrap; gap: 3px; row-gap: 4px; margin-top: 5px; align-items: center; }
.lobby .room .seats.none { display: none; }
.lobby .room .seats i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim2); display: block; }
.lobby .room .seats i.on { background: var(--paper); }
.lobby .room .seats i.bk { background: var(--brass); }
.lobby .room .tag { position: absolute; right: 9px; top: 9px; font-size: 10px; color: var(--brass); letter-spacing: .06em; }
.lobby .room .watch { margin-left: auto; font-size: 11px; color: var(--brass); white-space: nowrap; }
.lobby .room .watch:empty { display: none; }
.lobby .room.full { opacity: var(--full-op); background: var(--sunk); box-shadow: var(--sunk-shade); }
/* §27 in day the text keeps its contrast and only the seat dots fade — the DOTS, not their row: the ကြည့်မယ် word
   lives in that row and keeps its full brass — while the badge greys (a faded badge took its monogram to 1.7:1).
   The sunk card and the ပြည့် tag say the rest. */
.lobby .room.full .seats i { opacity: var(--full-mark-op); }
.lobby .room.full .badge { filter: var(--full-badge); }
.lobby .room:active { transform: none; background: var(--wash); box-shadow: var(--sunk-shade); }

@media (orientation: portrait) {
  /* ONE row on an upright phone: the arrow, the game's name (the club's steps out), the chips, and the ရှင်းပြချက်
     book with its word UNDER it (the table rail's pattern), still a 44 px target */
  .lobby .bar { row-gap: 2px; flex-wrap: nowrap; gap: 10px; }
  .lobby .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .lobby .brand .full { display: none; }
  .lobby .brand .short { display: inline; }
  .lobby .bar .help { flex-direction: column; justify-content: center; gap: 2px; padding: 0 4px; font-size: 10px; line-height: 1.2; }
  .lobby .bar .help svg { width: 17px; height: 17px; }
  .lobby .cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .tierrail { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--tray-rule); padding: var(--tray-pad-p); }
  .tierrail .tier { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 12px; }
  .tierrail .tier.on { border-left-color: transparent; border-bottom-color: var(--plaque-edge); }
  .tierrail .tier.on::before { left: 18px; right: 18px; top: auto; bottom: -2px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .lobby .main { padding-left: 0; }
  .lobby .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .lobby .room { padding: 8px 9px; min-height: 58px; gap: 9px; }
  .lobby .room .badge { width: 34px; height: 34px; font-size: 11.5px; }
  .lobby .room .name { font-size: 12.5px; padding-right: 20px; }
  .lobby .room .sub { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .tierrail .tier, .lobby .room { transition: none; } }

/* ===================================================================== §28 GAMES = HOME (the entry flow, ADAM 2026-09-29)
   Sign in → Games → the Shan lobby → a table. This screen wears the LOBBY's look — its tokens, its type, its
   hairlines — and none of the sign-in card's (that one is ADAM's own design). Tokens only, no night literal, so a
   palette that re-defines the tokens reaches the whole screen. Landscape: the player (name, wallet) on the left,
   the game cards on the right. Portrait: the player on top, the cards one under the other. */
.games {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(8px + var(--st)) calc(14px + var(--sr)) calc(12px + var(--sb)) calc(14px + var(--sl));
  background-image: var(--ground);
}
.games .bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 44px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.games .brand { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--brass); white-space: nowrap; margin-right: auto; }
.games #gamesMode { display: flex; flex: 0 0 auto; }
.games #gamesMode:empty { display: none; }
.games .lang { flex: 0 0 auto; }
.games .bar .out { flex: 0 0 auto; font-size: 11.5px; padding: 0 10px; }
.games .body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: minmax(140px, 210px) minmax(0, 1fr); column-gap: 22px; align-items: center; padding: 14px 0 4px;
}
.games .player { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.games .player .name {   /* a long name takes two lines before it is cut */
  font-size: 22px; font-weight: 600; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.games .player .chips { display: flex; flex-direction: column; gap: 1px; color: var(--dim); font-size: 12px; line-height: 1.35; }
.games .player .chips b { color: var(--paper); font-weight: 500; font-size: 20px; letter-spacing: .01em; }
.games .player .nochips { color: var(--brass); font-size: 12px; line-height: 1.45; }
.games .deck { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.games .game {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
  min-height: 212px; padding: 14px 16px 15px; text-align: left; white-space: normal; letter-spacing: 0; line-height: 1.3;
  border: 1px solid var(--game-edge); border-radius: 14px; background: var(--surface); box-shadow: var(--lift); color: var(--paper); font-weight: 400; overflow: hidden;
}
/* §27 by day the Shan card carries a window of the table's own cloth — oxblood, a leather lip, one brass inlay —
   and its two faces lie on it. At night --felt is none and the card is exactly as it was. */
.games .game::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 128px; border-radius: 9px;
  background: var(--felt); box-shadow: var(--felt-rim); pointer-events: none; }
.games .game.soon::before { background: var(--felt-off); box-shadow: var(--felt-off-rim); outline: 1px dashed var(--felt-off-line); outline-offset: -7px; }
.games button.game:active { transform: scale(.985); background: var(--hair2); box-shadow: var(--sunk-shade); }
/* two faces from ADAM's own deck, fanned — a ဒို for Shan; for Poker the same two cards any poker room shows */
.games .game .art { position: absolute; left: 50%; top: 20px; width: 0; height: 100px; pointer-events: none; }
.games .game .art picture { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; }
.games .game .art img { display: block; height: 100px; width: auto; border-radius: 5px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); }
.games .game .art picture:first-child { transform: translateX(-80%) rotate(-9deg); }
.games .game .art picture:last-child { transform: translateX(-20%) rotate(7deg); }
.games .game .gname { font-size: 19px; font-weight: 600; line-height: 1.45; }
.games .game .gsub { font-size: 12px; color: var(--dim); padding-right: 30px; }
.games .game .go { position: absolute; right: 14px; bottom: 15px; width: 22px; height: 22px; fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Poker is SHOWN and plainly not tappable: not a button, no arrow, a dashed edge, the art in grey, a quiet tag */
.games .game.soon { border-style: dashed; border-color: var(--soon-edge); background: var(--sunk); box-shadow: var(--sunk-shade); cursor: default; pointer-events: none; }
.games .game.soon .art { opacity: var(--soon-art-op); filter: var(--soon-art); }
.games .game.soon .gname { color: var(--dim); }
.games .game .tag { margin-top: 3px; padding: 3px 10px; border: 1px solid var(--soon-edge); border-radius: 999px; font-size: 11px; color: var(--dim); letter-spacing: .03em; }
@media (orientation: portrait) {
  .games .bar { row-gap: 2px; }
  .games .body { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; row-gap: 18px; }
  .games .player { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
  .games .player .chips { align-items: flex-end; text-align: right; }
  .games .player .nochips { flex: 1 1 100%; }
  .games .deck { grid-template-columns: minmax(0, 1fr); }
  .games .game { min-height: var(--game-h-p); }
  /* with the Day / Night switch in it the bar is two rows on an upright phone: the brand and sign out on the
     first, the two switches side by side on the second */
  .games .bar:has(#gamesMode:not(:empty)) > .brand { order: -2; }
  .games .bar:has(#gamesMode:not(:empty)) > .out { order: -1; }
}
/* §28 the way back from the lobby to the Games home: an arrow, first in the bar (the phone's Back does the same) */
.lobby .bar .back { flex: 0 0 auto; display: grid; place-items: center; width: 44px; min-width: 44px; padding: 0; margin: 0 -8px 0 -10px; color: var(--paper); border-color: transparent; }
.lobby .bar .back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lobby .bar .back:active { color: var(--brass); transform: none; }

/* ===================================================================== table frame */
.frame { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; transform-origin: 0 0; }
/* §28 lobby → table: the plain box that grows out of the tapped room card and dissolves into the table. The
   table is always night, so is this box (app.js lays the stage's own ground over it); it never takes a tap. */
.stepghost { position: fixed; z-index: 19; pointer-events: none; border-radius: 10px; transform-origin: 0 0; background-color: #141311; box-shadow: inset 0 0 0 1px rgba(236, 231, 220, .16); }
.stage { position: absolute; inset: 0; background: var(--ink); overflow: hidden; }
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(236, 231, 220, .035), rgba(236, 231, 220, 0) 70%);
}
/* spec §16 (ADAM 2026-09-26): no orientation hint, ever — portrait simply keeps the quarter-turned frame */

/* the full-width hairline countdown */
.clock { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--hair2); }
.clock i { display: block; height: 100%; width: 100%; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.clock.on i { opacity: 1; }
.clock.mine i { background: var(--brass); }
.clock.other i { background: var(--dim2); }

/* type chrome: top-left title + phase (kept narrow so the top-left seat cell at 32% stays clear), top-right table id.
   Scoped to the stage: a Hand's cover card carries the class `top` too (cf-hc.top) and must never inherit the 176 px cap. */
/* ADAM removed both top corners, 2026-09-28. The state line survived the cut by moving INTO the pot
   block (see index.html) — the same words, in the one place the eye is already going. It is centred on
   the pot anchor and may wrap to two lines; the old corner could not, and clipped.
   `.pot .state` deliberately sits where §16.0.2's cap note used to, which ADAM removed in the same pass. */
/* The top-right corner — tier line, wallet figure and session clock — was removed with the left one. */
/* §9.9 the session clock — the quietest line on the screen: dim2, one size smaller than the net. */


/* ---- seats: type + hairlines only ----
   The ring box is inset-aware (safe areas); every seat position is a percentage of it. Each seat is a block of
   rows: name+tag / hairline / stack · status / turn hairline / hand line / chat line. Rows may wrap; the cards
   never share a row with text: the top three seats carry their cards ABOVE the block, the two side seats too,
   and my own hand sits between the thumb arcs with the block to its left. Home stacks are the typed figure
   (the bet chips fly from and to it); only the bet spots and the pot are drawn as chips.
   Every hand is a CardFeel.Hand (spec §16, the STACKED squeeze): my stack is slid apart by hand in ANY direction,
   so it needs a card's height of clear ground around it — it sits at 62% with the pot moved to the right (70%). */
.table { position: absolute; left: var(--sl); top: var(--st); right: var(--sr); bottom: var(--sb); }
/* §19.1.3 the turn's moving line. FIRST child of the table and untouched by z-index, so it paints under every
   seat's type, under the pot mark and under every card: the hairline runs behind the table, never over a face.
   It is a canvas the client clears the moment its sweep is over — nothing here animates, and nothing is left on
   screen between turns. It can never take a tap. */
.ringfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.seat { display: contents; }
.who { position: absolute; width: 140px; transform: translateX(-50%); text-align: center; pointer-events: none; line-height: 1.3; }
.who .name { display: block; font-size: 13px; font-weight: 500; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .name .tag { color: var(--brass); font-weight: 400; font-size: 11px; margin-left: 5px; letter-spacing: .04em; }
.who .rule { position: relative; display: block; height: 1px; background: var(--hair); margin: 3px 0; }
/* §19.2 the ဒို FLASH — the server turns a natural face-up at look.done (§16 ဒိုခေါ်) and that seat's own hairline
   swells brass once, about 400 ms, then nothing. No frame, no glow, no border flashing round the block (§19.3):
   the line the seat already has, said louder for one breath. opacity + transform only. */
.who .rule::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; border-radius: 2px;
  background: var(--brass); opacity: 0; transform: scaleX(.18); pointer-events: none;
}
.seat.dopulse .who .rule::after { animation: doPulse 400ms cubic-bezier(.25,.7,.3,1) 1; }
@keyframes doPulse {
  0% { opacity: 0; transform: scaleX(.18); }
  28% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .seat.dopulse .who .rule::after { animation: none; } }
.who .meta { display: block; font-size: 11px; color: var(--dim); }
.who .meta .badge { font-size: 10px; color: var(--dim2); letter-spacing: .03em; }
.who .meta .badge, .who .meta .bal { white-space: nowrap; }   /* a status wraps between its parts, never inside a word */
.who .meta { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 5px; }
/* the separator belongs to the figure (a no-break space keeps it off the figure's last digit; a wrapped status then starts
   clean instead of leading with the dot) and shows only when a status follows */
.who .meta .bal:has(+ .badge:not(:empty))::after { content: "\00a0·"; color: var(--dim2); }
.who .timer { display: block; height: 1px; background: var(--brass); margin-top: 3px; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.who .line { display: block; font-size: 11px; color: var(--paper); margin-top: 2px; min-height: 14px; }
.who .line.win { color: var(--brass); }
.who .line.lose { color: var(--red); }
.who .say { display: block; font-size: 10px; color: var(--dim); }
.seat.turn .who .name { color: var(--brass); }
.seat.turn .who .rule { background: var(--brass); }
.seat.turn .who .timer, .seat.hold .who .timer { opacity: 1; }
.seat.banker .who .rule { background: var(--brass-dim); }
.seat.away .who .name, .seat.away .who .meta { color: var(--dim2); }
.seat.empty .who { display: none; }
.seat.settled .cards { opacity: .85; }
.cards { position: absolute; transform: translate(-50%, -50%); }
.cards .deck { position: absolute; inset: 0; will-change: transform; }   /* the stack's flight at the deal rides on this wrapper */
.cards.small { width: 88px; height: 72px; pointer-events: none; }
.cards.small .cf-hc { pointer-events: none !important; }                 /* another seat's stack is watched, never touched */
.cards.own { width: 320px; height: 176px; z-index: 2; }                  /* holds the held fan of three at 136 px (~165 px tall: the rotated cards' corners poke above the cover); a moving cover passes over chips and type, never under */
.cards.own .cf-hand.off .cf-hc { pointer-events: none; cursor: default; }   /* outside my squeeze window the stack ignores the finger */
.spot, .home { position: absolute; width: 0; height: 0; }
.home .cf-stack { display: none; }   /* the stack is the typed figure; the anchor stays for the chip flights */

/* empty seat = a typographic target: the word, a hairline, the seat number */
.take {
  position: absolute; transform: translate(-50%, -50%); min-width: 96px; min-height: 44px; padding: 8px 10px 6px;
  border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; color: var(--dim); font-size: 13px; line-height: 1.3; z-index: 2;
}
.take:active, .take.on { color: var(--brass); border-bottom-color: var(--brass-dim); }
.take .st { display: block; font-size: 10px; color: var(--dim2); margin-top: 2px; letter-spacing: .04em; }
/* banker DECIDE: ဖမ်း toggle on each unsettled seat (mirrored as a list in the right thumb arc) */
.catch { position: absolute; transform: translate(-50%, 0); min-height: 36px; font-size: 12px; padding: 0 12px; z-index: 3; border-color: var(--brass-dim); color: var(--brass); background: rgba(20, 19, 17, .7); }
.catch.done { border-color: transparent; color: var(--dim2); }

/* ring positions — pos 0 is ME (bottom centre); 1..5 run CLOCKWISE on screen: left, top-left, top, top-right, right.
   Top row: cards at y 33 (the top card 5..69; a revealed mini fan's rotated cards drop ~3 px below it and poke ~11 px above
   it) with the bet spot beside them inside the cell, the block from y 79 down to ~133 (≤ 147 with a wrapped row) — the
   pot's max line starts at 50% − 46 px = 149 at 390 tall.
   My stack (136 px tall) is centred at 62%: at 390 tall it spans 174..310, so the hidden card can be pulled DOWN the
   full 55% (to 385) and sideways without leaving the screen; UP it clears the top seat's visible rows (to ~111) for ~45%.
   With three cards the fan runs 286..566 at 844 and the third card's full LEFT pull reaches x 230 — my block stays left
   of 230 and the pot's mark right of 573. Names are inline spans: their glyph box starts ~6 px above the block. */
.seat[data-pos="0"] .who   { left: 19.5%; top: 62%; width: 128px; }   /* 101..229 at 844: clear of the third card's left pull (230) and of the left arc's buttons (334) */
.seat[data-pos="0"] .cards { left: 50%; top: 62%; }
.seat[data-pos="0"] .home  { left: 19.5%; top: calc(62% + 30px); }   /* the stack figure: chips leave from and return to it */
.seat[data-pos="0"] .spot  { left: 25.5%; top: 50%; }                /* my bet: a compact pile above my block (figure under it), between the left seat's figure and the fan */
.seat[data-pos="0"] .take  { left: 50%; top: 74%; }
.seat[data-pos="0"] .catch { left: 50%; top: 66%; }
.seat[data-pos="0"]:not(.own) .who   { left: 50%; top: 60%; }
.seat[data-pos="0"]:not(.own) .cards { left: 50%; top: 86%; }
.seat[data-pos="0"]:not(.own) .home  { left: 50%; top: calc(60% + 30px); }
.seat[data-pos="0"]:not(.own) .spot  { left: 50%; top: 55%; }
.seat[data-pos="0"]:not(.own) .catch { left: 50%; top: 86%; transform: translate(-50%, -50%); }
.seat[data-pos="0"].own .who .line { font-size: 15px; font-weight: 500; color: var(--brass); min-height: 20px; }
.seat[data-pos="0"].own .who .line.lose { color: var(--red); }
.seat[data-pos="0"].own .who .line.win { color: var(--brass); }

.seat[data-pos="1"] .who   { left: 8.5%; top: 45%; width: 112px; }
.seat[data-pos="1"] .cards { left: 8.5%; top: 33%; }
.seat[data-pos="1"] .home  { left: 8.5%; top: calc(45% + 30px); }
.seat[data-pos="1"] .spot  { left: 17%; top: 50%; }              /* beside the block, left of my own bet pile (25%) */
.seat[data-pos="1"] .take  { left: 8.5%; top: 39%; }
.seat[data-pos="1"] .catch { left: calc(8.5% + 70px); top: calc(33% - 18px); }   /* beside the cards, clear of the arc column */

.seat[data-pos="2"] .who   { left: 32%; top: 79px; }
.seat[data-pos="2"] .cards { left: calc(32% - 25px); top: 33px; }   /* top card 5..69, a fan's drop to ~72: clear of the name's glyph box (73) */
.seat[data-pos="2"] .home  { left: 32%; top: 109px; }
.seat[data-pos="2"] .spot  { left: calc(32% + 48px); top: 38px; }
.seat[data-pos="2"] .take  { left: 32%; top: 40px; }
.seat[data-pos="2"] .catch { left: calc(32% - 25px); top: 33px; transform: translate(-50%, -50%); }   /* on the hand it would catch */

.seat[data-pos="3"] .who   { left: 50%; top: 79px; }
.seat[data-pos="3"] .cards { left: calc(50% - 25px); top: 33px; }
.seat[data-pos="3"] .home  { left: 50%; top: 109px; }
.seat[data-pos="3"] .spot  { left: calc(50% + 48px); top: 38px; }
.seat[data-pos="3"] .take  { left: 50%; top: 40px; }
.seat[data-pos="3"] .catch { left: calc(50% - 25px); top: 33px; transform: translate(-50%, -50%); }

.seat[data-pos="4"] .who   { left: 68%; top: 79px; }
.seat[data-pos="4"] .cards { left: calc(68% + 25px); top: 33px; }
.seat[data-pos="4"] .home  { left: 68%; top: 109px; }
.seat[data-pos="4"] .spot  { left: calc(68% - 48px); top: 38px; }
.seat[data-pos="4"] .take  { left: 68%; top: 40px; }
.seat[data-pos="4"] .catch { left: calc(68% + 25px); top: 33px; transform: translate(-50%, -50%); }

.seat[data-pos="5"] .who   { left: 91.5%; top: 45%; width: 112px; }
.seat[data-pos="5"] .cards { left: 91.5%; top: 33%; }
.seat[data-pos="5"] .home  { left: 91.5%; top: calc(45% + 30px); }
.seat[data-pos="5"] .spot  { left: 82%; top: 52%; }              /* points at the pot (75%) from the right: below its mark (ends 185), left of the block (716) */
.seat[data-pos="5"] .take  { left: 91.5%; top: 39%; }
.seat[data-pos="5"] .catch { left: calc(91.5% - 70px); top: calc(33% - 18px); }

/* the pot (ပန်းကန်, §16.0.5): the banker's running profit on the line above it (§4.4). §16.0.1 removed the maximum bet,
   so no maximum figure is printed anywhere here.
   It sits right of centre (75%) so my stack at 50% has a card's height of clear ground in every direction (spec §16);
   the mark is 120 wide so my three-card fan (to 566 at 844) stays clear of it (573+). */
.pot { position: absolute; left: 75%; top: 50%; width: 0; height: 0; }
.pot .mark {
  position: absolute; left: -60px; top: -32px; width: 120px; text-align: center; font-size: 11px; color: var(--dim);
  border-bottom: 1px solid var(--hair); padding-bottom: 2px; white-space: nowrap; pointer-events: none; line-height: 1.3;
}
.pot .mark b { color: var(--paper); font-weight: 500; font-size: 14px; }
.pot .mark .mx { display: none; }
.pot .max { position: absolute; left: -95px; top: -46px; width: 190px; text-align: center; font-size: 10px; color: var(--dim2); white-space: nowrap; pointer-events: none; letter-spacing: .02em; }   /* 190 wide: clear of the right seat's three-card stack (731+ at 844) */
.pot .max b { color: var(--brass); font-weight: 500; }
.pot .max b.down { color: var(--red); }
/* §16.0.2 — while the banker is below the win cap, one quiet line under his figure says when ဝမ်တိန် opens up.
   Under the pot mark (which ends at +2): x 528..738 at 844, left of the right seat's block (716) and below its
   bet pile's own figure, which sits at 52 % (203) — the line is 10 px and only the banker ever sees it. */
.pot .state { position: absolute; left: -130px; top: 10px; width: 260px; text-align: center; pointer-events: none; line-height: 1.35; }
.pot .state .banner { display: block; font-size: 12px; color: var(--dim); }
.pot .state .banner.mine { color: var(--brass); }
.pot .state .banner.warn { color: var(--red); }
.pot .state .banner b { color: var(--paper); font-weight: 500; }
.pot .state .sub { display: block; font-size: 11px; color: var(--dim2); }
.pot .state .sub:empty { display: none; }

.pot .cf-stack .amt { display: none; }
/* §19.5 where the deck sits: the corner the cards fly in from (the flight starts beyond the top-right edge).
   It is 0x0 and holds nothing but the orbiting arcs of the DEALING beat, clear of the tier block above it
   (which ends near y 60) and of the right seat's own card box, which is empty whenever the arcs are up. */
.deckspot { position: absolute; left: 96%; top: 30%; width: 0; height: 0; pointer-events: none; }
.deckspot .ccw-arcs { position: absolute; left: -17px; top: -17px; }

.fx { position: absolute; inset: 0; pointer-events: none; }

/* a quiet notice in the centre (banker changed, bust, pause) */
.notice {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-size: 15px; color: var(--paper); background: rgba(20, 19, 17, .96); padding: 10px 18px; border: 1px solid var(--hair); border-radius: 12px;
  max-width: 70%; line-height: 1.45; opacity: 0; transition: opacity .2s ease; z-index: 4;
}
.notice.on { opacity: 1; }
.notice small { display: block; font-size: 11px; color: var(--dim); }

/* ---- controls: the LEFT edge is the icon rail (§16.0.8), the right arc is a column: hint / list (ဖမ်း targets,
   seat picker) / row (tray, stepper, buttons). The bottom belongs to the hand. ---- */
/* §16.0.8 — စကား · မှတ်တမ်း · ထွက် as three stroke icons in a slim column on the left edge, inside the left thumb arc:
   x 10..56 at 844, from the bottom inset up to y 250 — clear of the left seat's block (ends ~244) and of its card box
   (92..164). Paper strokes, brass while that sheet is open. No emoji anywhere. */
/* §7.10 added a FOURTH icon (ရှင်းပြချက်) and one column of four 42 px buttons would reach y 207 — into the left
   seat's block (175..244). So the rail is a 2-column grid whose FIRST column is the approved three, unmoved, and
   ရှင်းပြချက် takes column 2 row 1: x 54..98 (clear of my own block at 100.6) and y 292..334, diagonally opposite
   ထွက် so a miss cannot leave the table. Rows 2–3 of column 2 stay empty. */
.rail { position: absolute; left: calc(10px + var(--sl)); bottom: calc(12px + var(--sb)); z-index: 6; display: grid; grid-template-columns: repeat(2, 44px); grid-template-rows: repeat(3, auto); gap: 1px 0; align-items: end; justify-items: center; }
#bChat { grid-area: 1 / 1; } #bHist { grid-area: 2 / 1; } #bLeave { grid-area: 3 / 1; } #bRules { grid-area: 1 / 2; }
.rail button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 44px; min-height: 42px; padding: 3px 1px 2px; border: 0; border-radius: 10px; color: var(--dim); background: transparent;
}
.rail button svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rail button span { font-size: 9px; line-height: 1; letter-spacing: .02em; color: inherit; white-space: nowrap; }
.rail button.on { color: var(--brass); }
.rail button:active { color: var(--paper); }
.br { position: absolute; bottom: calc(12px + var(--sb)); right: calc(12px + var(--sr)); z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100% - 290px); }
.br .row { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; }
.br .list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 280px; }
.br .list:empty { display: none; }
.br .list button { min-height: 36px; font-size: 12px; padding: 0 12px; }
.br .list .lb { font-size: 11px; color: var(--dim2); margin-right: 2px; }
.br .hint { position: static; }
.step { display: flex; align-items: center; border: 1px solid var(--hair); border-radius: 999px; min-height: 44px; }
.step button { border: 0; min-width: 42px; padding: 0 10px; font-size: 18px; }
.step .val { min-width: 74px; text-align: center; font-size: 13px; color: var(--paper); padding: 0 2px; line-height: 1.1; }
.step .val small { display: block; font-size: 10px; color: var(--dim2); margin-top: 2px; }
/* §3.6 bet tray: one tap per denomination chip (မထိုး, 2×, 5× … the live maximum, ပွဲပြီးထိုး) */
.tray { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; }
.tray button { min-width: 56px; padding: 0 10px; line-height: 1.15; }
.tray button small { display: block; font-size: 9px; color: var(--dim2); font-weight: 400; letter-spacing: .02em; margin-top: 2px; }
.tray button.on small { color: var(--brass-dim); }
.br .placed { font-size: 12px; color: var(--dim); align-self: center; white-space: nowrap; }
.br .placed b { color: var(--paper); font-weight: 500; font-size: 14px; }
.hint { font-size: 11px; color: var(--dim2); pointer-events: none; white-space: nowrap; text-align: right; }
.hint:empty { display: none; }

/* ---- sheets: chat (bottom-left) and history (right) ---- */
.sheet {
  /* opaque: at 96 % a white card face under the drawer still ghosted through it */
  position: absolute; z-index: 7; background: var(--ink); border: 1px solid var(--hair); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.sheet .hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--dim); }
.sheet .hd button { min-height: 32px; min-width: 32px; padding: 0 10px; font-size: 12px; }
.sheet .body { overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px; font-size: 12px; flex: 1; }
.chat { left: calc(108px + var(--sl)); bottom: calc(12px + var(--sb)); width: 340px; max-width: calc(100% - 120px); height: 210px; }   /* right of the icon rail, which is two columns wide since §7.10 */
.chat .log div { padding: 2px 0; }
.chat .log b { color: var(--brass); font-weight: 500; margin-right: 6px; }
.chat .canned { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--hair); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chat .canned::-webkit-scrollbar { display: none; }
.chat .canned button { min-height: 34px; font-size: 12px; padding: 0 12px; flex: 0 0 auto; }   /* one scrolling row: three rows of them pushed the send line out of the sheet */
.chat form { display: flex; gap: 8px; padding: 6px 12px 8px; border-top: 1px solid var(--hair); align-items: center; }
.chat form input { font-size: 14px; padding: 6px 0; }
.chat form button { min-height: 36px; }
.hist { right: calc(12px + var(--sr)); top: calc(40px + var(--st)); bottom: calc(12px + var(--sb)); width: 360px; max-width: calc(100% - 24px); }   /* the bottom row is the hand's now (§16.0.8) */
/* §16.0.9 plain: a round number, then one line per seat — name (ဒိုင် tagged) · the server's hand name · နိုင်/ရှုံး
   with the amount. Nothing else: no bets, no card faces, no reasons, no batches, no pot arithmetic, no deck salt. */
.hist .r { border-bottom: 1px solid var(--hair); padding: 7px 0; }
.hist .r .h { font-size: 10px; color: var(--dim2); letter-spacing: .04em; }
.hist .r .s { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 2px 0; }
.hist .r .s .w { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist .r .s .w .tag { color: var(--brass); font-size: 10px; letter-spacing: .04em; margin-left: 5px; }
.hist .r .s .w .hn { color: var(--dim); margin-left: 7px; }
.hist .r .s .d { white-space: nowrap; color: var(--dim2); }
.hist .r .s .d.up { color: var(--brass); }
.hist .r .s .d.down { color: var(--red); }
.hist .empty { color: var(--dim2); padding: 12px 0; }
/* §9.9 the loss limit, at the foot of the history sheet: a label, a figure, set / clear, and one dim line. */
.hist .lim { border-top: 1px solid var(--hair); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.hist .lim label { font-size: 11px; color: var(--dim); }
.hist .lim .row { display: flex; gap: 8px; align-items: center; }
.hist .lim input { flex: 1; min-width: 0; font-size: 14px; padding: 6px 0; }
.hist .lim button { min-height: 34px; font-size: 12px; padding: 0 12px; flex: 0 0 auto; }
.hist .lim .note { font-size: 10px; color: var(--dim2); }
.hist .lim .note:empty { display: none; }

/* toasts: quiet, above the left thumb arc — never over a seat name */
.toasts { position: absolute; left: calc(12px + var(--sl)); bottom: calc(66px + var(--sb)); z-index: 9; pointer-events: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 60%; }
.toast { font-size: 12px; color: var(--paper); background: var(--float); border: 1px solid var(--hair); border-radius: 12px; padding: 6px 14px; line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.toast.on { opacity: 1; transform: none; }
.toast.err { border-color: rgba(179, 38, 30, .6); }
/* at the table the column is INSIDE the frame (it turns with the table in portrait) and sits top-right under the tier
   label: at 844x390 that strip (y 48..96, right of 650) is the one nothing uses — pos-4's block ends at 644, the right
   seat's card ink starts at y 97 — and it is far from my own hand line, which the bottom-left column used to cover */
.stage .toasts { left: auto; right: calc(16px + var(--sr)); top: calc(92px + var(--st)); bottom: auto; align-items: flex-end; max-width: 176px; }   /* below the §16.0.10 language toggle (44 px tall, at y 44), never over it */
.stage .toast { text-align: right; }

/* reconnect / grace overlay */
.grace { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; text-align: center; font-size: 14px; color: var(--paper); background: rgba(20, 19, 17, .9); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 20px; pointer-events: none; }
.grace small { display: block; color: var(--dim); font-size: 11px; }
.grace small .ccw-bars { margin-left: 8px; }                  /* §19.5 the stepping bars sit at the end of the sub-line */

/* ?dev=1 — the last 20 events */
.dev { position: absolute; right: calc(12px + var(--sr)); top: calc(44px + var(--st)); width: 250px; max-height: 44%; overflow: hidden; z-index: 3; pointer-events: none; font: 10px/1.35 ui-monospace, Menlo, monospace; color: rgba(236, 231, 220, .7); background: rgba(20, 19, 17, .55); border: 1px solid var(--hair2); border-radius: 8px; padding: 4px 6px; }
.dev div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev div b { color: var(--brass); font-weight: 500; }

/* ===================================================================== the BIG VIEW (ADAM, pass 3 point 3)
   While I squeeze (LOOK, my third-card hold, the banker's SQUEEZE / DECIDE / DRAW_HOLD) and while it is my decide turn,
   the table goes away and my HAND fills nearly the whole screen: the card is ~85 % of the shorter screen side (fitted so the
   fan stays inside the width), centred low for both thumbs. The layer lives OUTSIDE the frame, so in portrait it stands
   upright while the table underneath keeps its quarter turn. Only a slim strip stays: the step's countdown, the banker tag
   with his figure, my chips and my bet; the decide controls sit in the right thumb arc (a row above the bottom in portrait).
   The own seat's Hand node itself is moved in here (the same DOM node, its state intact) and moved back on close. */
.handview { position: fixed; inset: 0; z-index: 20; touch-action: none; overflow: hidden; }
.handview:not(.on) { pointer-events: none; }   /* while it fades out the table under it answers the finger again */
.handview .hv-safe { position: absolute; left: 0; bottom: 0; width: 0; height: var(--sb); visibility: hidden; }     /* env() insets read as box sizes */
.handview .hv-safe-l { position: absolute; left: 0; top: 0; height: 0; width: var(--sl); visibility: hidden; }
.handview .hv-bg { position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity .25s ease; }
.handview .hv-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 70%, rgba(236, 231, 220, .04), rgba(236, 231, 220, 0) 70%);
}
.handview.on .hv-bg { opacity: 1; }
.handview .hv-clock { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--hair2); opacity: 0; transition: opacity .2s ease; z-index: 3; }   /* above the box: a deep card's far corner may run up here in landscape */
.handview .hv-clock i { display: block; height: 100%; width: 100%; background: var(--dim2); transform-origin: 0 50%; transform: scaleX(0); }
.handview .hv-clock.on { opacity: 1; }
.handview .hv-clock.mine i { background: var(--brass); }
.handview .hv-strip {
  position: absolute; left: calc(16px + var(--sl)); right: calc(16px + var(--sr)); top: calc(7px + var(--st));
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.4; color: var(--dim); pointer-events: none; white-space: nowrap; z-index: 3;   /* reads over a card corner that runs up under it */
  opacity: 0; transition: opacity .25s ease;
}
.handview.on .hv-strip { opacity: 1; }
.handview .hv-strip .l { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.handview .hv-strip .r { display: flex; gap: 8px; align-items: baseline; margin-left: auto; }
.handview .hv-strip .banner { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.handview .hv-strip .banner.mine { color: var(--brass); }
.handview .hv-strip .banner.name { color: var(--brass); font-size: 15px; font-weight: 500; }   /* the SERVER's reveal name, once every card is open */
.handview .hv-strip .sec { color: var(--paper); font-weight: 500; min-width: 3.2em; }
.handview .hv-strip .sec:empty { display: none; }
.handview .hv-strip b { color: var(--paper); font-weight: 500; }
.handview .hv-strip .bank .tag { color: var(--brass); letter-spacing: .04em; }
.handview .hv-strip .me .bet { color: var(--paper); }
.handview .hv-strip .me .won.down { color: var(--red); }
.handview .hv-strip .me .won.up { color: var(--brass); }
.handview.portrait .hv-strip { top: calc(10px + var(--st)); }
.handview.portrait .hv-strip .r { margin-left: 0; flex-basis: 100%; }
/* the hand's box: the fan's own bounds (the Hand centres itself in it); the enter/exit flight rides on this box */
.handview .hv-box { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; transition: transform .35s cubic-bezier(.2, .8, .2, 1); z-index: 1; }
.handview .hv-box .deck { position: absolute; inset: 0; will-change: transform; }
.handview .hv-box .cf-hand.off .cf-hc { pointer-events: none; cursor: default; }   /* outside my squeeze window the stack ignores the finger, here too */
.handview .hv-box.flash { animation: hvFlash .6s ease; }                          /* the server turned my ဒို up: one breath before the table returns */
@keyframes hvFlash { 0% { transform: none; } 40% { transform: scale(1.035); } 100% { transform: none; } }
/* controls: the right thumb arc — a column (ဖမ်း targets, ကျော်မယ်, ဆွဲမယ် nearest the thumb); a row along the bottom in portrait */
.handview .hv-ctl {
  position: absolute; right: calc(12px + var(--sr)); bottom: calc(12px + var(--sb)); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 150px;
  opacity: 0; transition: opacity .25s ease;
}
.handview.on .hv-ctl { opacity: 1; }
.handview .hv-ctl:empty { display: none; }
.handview .hv-ctl .lb { font-size: 11px; color: var(--dim2); }
.handview .hv-ctl button.catch { position: static; transform: none; }
.handview .hv-ctl button.pri { min-height: 48px; padding: 0 22px; font-size: 14px; }
.handview.portrait .hv-ctl { left: calc(12px + var(--sl)); right: calc(12px + var(--sr)); flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: none; }
.cards.own:empty { pointer-events: none; }
.frame.veiled { visibility: hidden; }          /* the table under an open view: its geometry stays for the flight back, nothing paints */
body > .toasts { z-index: 30; }                /* body-level toasts read over the view */
/* N11 — under an OPEN view a toast used to sit bottom-left, on the open hand in portrait (it covered the cover card's
   lower-left pips). While the view is up the column moves to the TOP, under the strip: in landscape the box is centred
   (x 194..650 at 844) so the top-left is free, and in portrait the fan now leaves ~38 % of the screen above it (N12). */
body.viewopen > .toasts { left: calc(12px + var(--sl)); right: auto; top: calc(40px + var(--st)); bottom: auto; align-items: flex-start; max-width: 300px; }
body.viewopen.portrait > .toasts { top: calc(72px + var(--st)); right: calc(12px + var(--sr)); max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .handview .hv-bg, .handview .hv-strip, .handview .hv-ctl, .handview .hv-box, .handview .hv-clock { transition: none; }
  .handview .hv-box.flash { animation: none; }
}

/* ADAM 2026-09-27 — a hand is shown as its cards: rank + suit mark, red for hearts and diamonds.
   Latin digits and the suit glyphs in both languages; they are the card, not a translation. */
.cd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd + .cd { margin-left: 6px; }
.cd.red { color: var(--red); }

/* ===================================================================== §7.10 THE RULES CARD (ရှင်းပြချက်)
   A page that teaches the game to somebody who has never held these cards: card points, ဒို, the ဆ ladder, how a
   winner is decided, the six beats of a round, ဖမ်း, ဝမ်တိန်, the ပန်းကန် and the house rules. It lives OUTSIDE
   .frame (like the big view) so in portrait it stands upright instead of arriving sideways with the table.
   Ink only: hairlines, one brass accent, real card faces from assets/cards. z 24 — over the table and the big view
   (20), under the body toasts (30), which must still read.
   Landscape (844x390): the nav is a 132 px column on the left, the page scrolls on the right.
   Portrait (390x844): the nav becomes a scrolling strip on top, exactly as the lobby's tier rail does. */
/* the page is opaque, so what is under it is taken off the screen entirely: nothing paints behind it, nothing
   under it is read out by a screen reader, and a text sweep of the page sees the page. Layout is untouched
   (visibility, never display), so the table's geometry and the big view's flight survive a read. */
body.rulesopen .lobby, body.rulesopen .signin, body.rulesopen .frame, body.rulesopen .handview { visibility: hidden; }
.rules { position: fixed; inset: 0; z-index: 24; background: var(--ink); background-image: var(--ground); display: flex; flex-direction: column;
  padding: calc(8px + var(--st)) calc(16px + var(--sr)) calc(6px + var(--sb)) calc(16px + var(--sl)); }
.rules .hd { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; }
.rules .hd h1 { font-size: 16px; font-weight: 600; line-height: 1.3; min-width: 0; }
.rules .hd .lang { order: 1; margin-left: auto; flex: 0 0 auto; }
.rules .hd #rulesClose { order: 2; flex: 0 0 auto; min-height: 44px; font-size: 12px; color: var(--brass); border-color: var(--brass-dim); }
.rules .hd .sub { order: 5; flex: 1 1 100%; color: var(--dim2); font-size: 11.5px; line-height: 1.45; }
.rules .cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-top: 1px solid var(--hair); }
.rnav { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; border-right: 1px solid var(--tray-rule); padding: var(--tray-pad);
  background: var(--tray); box-shadow: var(--tray-shade); border-radius: var(--tray-r); margin-top: var(--tray-gap); }
.rnav button { position: relative; flex: 0 0 auto; text-align: left; justify-content: flex-start; border: 0; border-left: 2px solid transparent; border-radius: 0;
  min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 12px; font-weight: 400; color: var(--dim); white-space: normal; line-height: 1.25; }
.rnav button.on { border-left-color: var(--plaque-edge); color: var(--brass); background: var(--surface); box-shadow: var(--lift); border-radius: var(--plaque-r); }
.rnav button:active { transform: none; background: var(--wash); }
.rules .doc { position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0 2px 40px 16px; }
.rules .doc section { padding: 12px 0 14px; border-bottom: 1px solid var(--hair2); }
.rules .doc section:last-child { border-bottom: 0; }
.rules .doc h2 { font-size: 13.5px; font-weight: 600; color: var(--brass); letter-spacing: .02em; margin-bottom: 7px; }
.rules .doc h3 { font-size: 12.5px; font-weight: 600; color: var(--paper); margin: 12px 0 5px; }
.rules .doc p { font-size: 12.5px; line-height: 1.75; color: var(--text2); max-width: 62ch; }
.rules .doc p + p { margin-top: 7px; }
.rules .doc .lad + p, .rules .doc .ex + p, .rules .doc ol + p, .rules .doc ul + p, .rules .doc .vs + p { margin-top: 11px; }
.rules .doc .note { color: var(--brass-dim); }
/* a list of one-liners: a hairline dash instead of a bullet */
.rules .doc ul { list-style: none; margin: 4px 0 0; }
.rules .doc ul li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.7; color: var(--text2); max-width: 62ch; }
.rules .doc ul li::before { content: ""; position: absolute; left: 0; top: .85em; width: 7px; height: 1px; background: var(--brass-dim); }
/* the numbered beats of a round, and the §2.6 order: the Burmese word in brass, the line under it */
.rules .doc ol { list-style: none; counter-reset: b; margin: 4px 0 0; }
.rules .doc ol li { counter-increment: b; position: relative; padding-left: 24px; margin-top: 8px; }
.rules .doc ol li::before { content: counter(b); position: absolute; left: 0; top: 0; width: 17px; text-align: center; font-size: 10px; line-height: 17px;
  color: var(--dim2); border: 1px solid var(--hair); border-radius: 50%; }
.rules .doc ol li b { display: block; font-size: 12.5px; font-weight: 600; color: var(--brass); }
.rules .doc ol li span { display: block; font-size: 12.5px; line-height: 1.7; color: var(--text2); max-width: 58ch; }
/* an example: the real cards, then what they come to */
.rules .doc .ex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rules .doc .hand { display: flex; gap: 4px; flex: 0 0 auto; }
.rules .doc .hand img { display: block; height: 62px; width: auto; border-radius: 4px; background: var(--hair2); box-shadow: var(--card-shade); }
.rules .doc .ex .res { flex: 1 1 150px; font-size: 12.5px; line-height: 1.6; color: var(--paper); min-width: 0; }
.rules .doc .ex .res.dim { color: var(--dim); }
/* the ဆ ladder: cards, the name with its multiplier, the line */
.rules .doc .lad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair2); }
.rules .doc .lad:first-of-type { border-top: 0; }
.rules .doc .lad .t { min-width: 0; flex: 1 1 150px; }
.rules .doc .lad .t b { font-size: 12.5px; font-weight: 600; color: var(--paper); }
.rules .doc .lad .t b .x { color: var(--brass); margin-left: 7px; font-weight: 600; }
.rules .doc .lad .t > span { display: block; font-size: 12px; line-height: 1.6; color: var(--dim); max-width: 54ch; }
.rules .doc .lad .t b .x { display: inline; font-size: 12.5px; }
/* two hands against each other */
.rules .doc .vs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.rules .doc .vs .w { display: flex; align-items: center; gap: 8px; }
.rules .doc .vs .mid { font-size: 11px; color: var(--dim2); letter-spacing: .06em; }
.rules .doc .vs .res { font-size: 11.5px; color: var(--dim); }
@media (orientation: portrait) {
  .rules .cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rnav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--tray-rule); padding: var(--tray-pad-p); }
  .rnav button { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; padding: 0 11px; white-space: nowrap; }
  .rnav button.on { border-left-color: transparent; border-bottom-color: var(--plaque-edge); }
  .rnav button.on::before { left: 14px; right: 14px; top: auto; bottom: -2px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .rules .doc { padding-left: 0; padding-right: 0; }
  .rules .doc p, .rules .doc ul li, .rules .doc ol li span { font-size: 13px; }
  .rules .doc .lad .t > span, .rules .doc .ex .res { font-size: 12.5px; }
  /* two hands side by side reach the gutter on a 390 px phone: they stand one above the other instead */
  .rules .doc .vs { flex-direction: column; align-items: flex-start; gap: 7px; }
  .rules .doc .vs .mid { padding-left: 2px; }
  .rules .doc .hand img { height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .rnav button { transition: none; } }

/* ADAM 2026-10-01: his Ok mark stands where "Card Club" was — the sign-in card, the Games home, the room list */
.okbrand { display: inline-flex; align-items: center; gap: 10px; }
.okmark { display: block; flex: none; width: 28px; height: 28px; border-radius: 7px; }
.signin .okbrand .okmark { width: 36px; height: 36px; border-radius: 9px; }
.lobby .bar .okbrand .okmark { width: 24px; height: 24px; border-radius: 6px; }
/* ADAM 2026-10-01: "no explanations, no extra words — a pro app": the rules book, the Shan card's range line, the
   no-balance line and the room list's repeated heading and head-count are not shown */
#bRulesLobby, #gamesShanSub, #gamesNoChips, #lobbyNoChips, .lobby .head { display: none !important; }