/* ============================================================
   Casino Royale — one design system, two modes (Light, Dark), four games. Tokens and rules: docs/DESIGN.md.
   The table is the hero: a lit felt with a padded rail. Chrome around it stays quiet (tinted greys),
   gold is reserved for chips, money and "your turn". Motion answers game events; transform/opacity only.
   Layout modes:  phone portrait (default) · phone landscape (.land, max-height 520) ·
                  tablet / laptop "table" composition (seats around an oval felt).
   ============================================================ */
:root {
  /* type: one display face for the wordmark (and the felt's printed crest), one UI face for everything else.
     Numbers use the UI face with tabular figures; card indices keep a rounded face (they are printed on the cards, not UI). */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: var(--font);
  --font-card: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Didot LT STD", ui-serif, Georgia, serif;
  --font-serif: var(--font-display);
  /* the scale: 12 / 14 / 16 / 20 / 28 (+ an 11 px micro size for seat badges only) */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 36px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  /* spacing: a 4 px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --cw-lg: clamp(52px, min(calc((100vw - 84px) / 5), max(64px, 8vh)), 72px); /* 58 px at 375, 61 at 390, 69 at 430 x 932 */ --cw-md: 26px; --cw-sm: 21px; --cw-xs: 17px;
  --tap: 48px;
  --out: cubic-bezier(.2, .8, .3, 1); --spring: cubic-bezier(.25, 1.25, .45, 1); --in: cubic-bezier(.5, 0, .75, 0);
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px);

  /* ---- Dark: a card room at night. Greys tinted toward the felt (never pure black), lighter surface = higher.
     Saturation is spent on one accent (mint) and the primary button; gold is kept for chips and money only. ---- */
  --bg: #141816; --bg-2: #1b201d; --bg-3: #232926;
  --felt-hi: #35695b; --felt-1: #2d5d50; --felt-2: #264f44; --felt-3: #1c3f36; --felt-4: #132e27;
  --rail-1: #46331f; --rail-2: #2b1f14; --rail-3: #19120b; --rail-line: rgba(222, 199, 152, .3);
  --glass: rgba(27, 32, 29, .9); --glass-2: #1d2320; --glass-br: rgba(232, 236, 233, .09); --glass-hi: rgba(255, 255, 255, .04);
  --panel: rgba(232, 236, 233, .04); --panel-br: rgba(232, 236, 233, .09); --panel-hi: rgba(232, 236, 233, .03);
  --seat: #1e2421; --seat-br: rgba(232, 236, 233, .1);
  --text: #e8ece9; --text-2: #b7c0ba; --muted: #8e9892;
  --gold: #d6be8b; --gold-2: #a88f5c; --gold-hi: #ecdcb6; --gold-ink: #231c0e;
  --accent: #7ccba3; --accent-2: #5fb38a; --accent-hi: #a6e0c3; --accent-ink: #0b1f16;
  --danger: #e0838c; --danger-2: #a8434c; --info: #8db4d4;
  --btn: rgba(232, 236, 233, .07); --btn-br: rgba(232, 236, 233, .1); --field: #101412; --field-br: rgba(232, 236, 233, .14);
  --fold-1: #9a4b43; --fold-2: #8a423b; --fold-e: #4d241f; --call-1: #3d6580; --call-2: #365a72; --call-e: #1f3646; --raise-e: #2f6b52;
  /* button inks and the raise fill are tokens too, so a style (or a mode) never needs a rule-level colour */
  --fold-ink: #ffffff; --call-ink: #ffffff; --raise-1: var(--accent); --raise-ink: var(--accent-ink);
  --tag-fold-bg: #dba19a; --tag-fold-ink: #3a0b08; --tn-ink: #2a0806; --ink-line: rgba(255, 255, 255, .12);
  --gold-btn: var(--gold); --gold-btn-ink: var(--gold-ink); /* the gold button (Start, Rejoin): money's colour as a fill */
  --card: #fbf8f0; --card-2: #eee7d8; --ink: #1d1f24; --red: #b4393f; --card-br: rgba(0, 0, 0, .12); /* deep, desaturated suit inks: never #f00, never #000 */
  --back-1: #3d6670; --back-2: #213b42; --back-line: rgba(242, 229, 196, .2); --back-edge: #efe8d8;
  --rl-red: #b23a3a; --rl-black: #1d2226; --rl-green: #2f7a5a;
  /* elevation is mostly the surface colour; shadows stay short and soft */
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 10px -4px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .55);
  --focus: #a6e0c3;
  /* the four games share one accent now; these stay as tokens for the icon tiles (quiet, not coloured) */
  --g-poker: var(--accent); --g-blackjack: var(--accent); --g-roulette: var(--accent); --g-homebj: var(--accent); --g-teenpatti: var(--accent);
  /* the lobby's game tiles: selected = a muted per-game tint (felt green, slate blue, deep wine, warm amber), icon in the game's ink */
  --gt-poker:#273d32;  --gi-poker:#92d3b2;  --gt-blackjack:#27313c;  --gi-blackjack:#92aed3;  --gt-roulette:#3c282d;  --gi-roulette:#d392a4;  --gt-homebj:#3c3428;  --gi-homebj:#d3b992;  --gt-teenpatti:#3c2a3a;  --gi-teenpatti:#cf9ad0;
  /* state overlays: 8 % hover, 12 % pressed / open */
  --hover: rgba(232, 236, 233, .08); --ic-open: rgba(232, 236, 233, .12); --soft: rgba(232, 236, 233, .09); --dash: rgba(232, 236, 233, .16); --knob-off: rgba(232, 236, 233, .14);
  --fair-bg: rgba(232, 236, 233, .04); --sunk: rgba(0, 0, 0, .16); --sunk-2: rgba(0, 0, 0, .22); --scrim: rgba(6, 8, 7, .62); --grab: rgba(232, 236, 233, .24); --thumb: #f1f4f1;
  --tag-bg: rgba(232, 236, 233, .14); --tag-bg-2: rgba(232, 236, 233, .12); --tag-bg-3: rgba(232, 236, 233, .18);
  --empty-br: rgba(232, 236, 233, .14); --empty-bg: rgba(0, 0, 0, .12); --empty-hi: rgba(232, 236, 233, .26); --acting-br: rgba(214, 190, 139, .45);
  --pill-bg: rgba(0, 0, 0, .38); --pill-br: rgba(255, 255, 255, .1); --tot-bg: rgba(0, 0, 0, .5); --tot-br: rgba(255, 255, 255, .12);
  --me-bg: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 70%, transparent) 40%, var(--bg)); --vignette: rgba(0, 0, 0, .4); --num-shadow: none;
  --haze: color-mix(in srgb, var(--felt-2) 40%, transparent); --haze-g: color-mix(in srgb, var(--felt-2) 36%, transparent);
  --line: rgba(232, 236, 233, .1); --sel: rgba(124, 203, 163, .32); --scroll: rgba(232, 236, 233, .22); --placeholder: #8e9892;
  /* glow is gone (Neon retired): kept at zero so older rules that scale by it draw nothing */
  --gl: 0; --glow: 0%; --glow-hi: 0%;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
/* ---- Light: the same room by day. Warm off-white walls, ink text, the same green felt and the same accent
   (deepened so it reads on light). The felt itself stays a dark surface: what sits on it keeps dark-context tokens. ---- */
[data-theme="light"] {
  --bg: #f4f2ec; --bg-2: #fcfbf8; --bg-3: #e9e6de;
  --felt-hi: #35695b; --felt-1: #2d5d50; --felt-2: #264f44; --felt-3: #1c3f36; --felt-4: #132e27; /* the same felt as Dark: it is a real object */
  --rail-1: #75533a; --rail-2: #59402c; --rail-3: #3c2b1d; --rail-line: rgba(240, 220, 175, .42);
  --glass: rgba(252, 251, 248, .92); --glass-2: #fcfbf8; --glass-br: rgba(26, 29, 27, .1); --glass-hi: rgba(255, 255, 255, .7);
  --panel: rgba(26, 29, 27, .03); --panel-br: rgba(26, 29, 27, .1); --panel-hi: rgba(255, 255, 255, .6);
  --seat: #fcfbf8; --seat-br: rgba(26, 29, 27, .12);
  --text: #1a1d1b; --text-2: #3d4540; --muted: #5d6661;
  --gold: #7a5b1c; --gold-2: #5e4515; --gold-hi: #b8934a; --gold-ink: #fffaf0;
  --accent: #1e7454; --accent-2: #175c42; --accent-hi: #3f9473; --accent-ink: #ffffff;
  --danger: #b23a32; --danger-2: #a8382f; --info: #2e6690;
  --btn: rgba(26, 29, 27, .05); --btn-br: rgba(26, 29, 27, .13); --field: #ffffff; --field-br: rgba(26, 29, 27, .2);
  --raise-e: #175c42; --tag-fold-bg: #f0cdc8; --tag-fold-ink: #5a1714; --ink-line: rgba(26, 29, 27, .5);
  --red: #a2303a; --ink: #1d1f24; --tn-ink: #ffffff;
  --shadow: 0 1px 2px rgba(40, 32, 20, .12), 0 4px 10px -4px rgba(40, 32, 20, .16);
  --shadow-lg: 0 16px 40px -14px rgba(40, 32, 20, .24);
  --focus: #1e7454;
  --hover: rgba(26, 29, 27, .06); --ic-open: rgba(26, 29, 27, .1); --soft: rgba(26, 29, 27, .07); --dash: rgba(26, 29, 27, .22); --knob-off: rgba(26, 29, 27, .14);
  --fair-bg: rgba(26, 29, 27, .03); --sunk: rgba(26, 29, 27, .035); --sunk-2: rgba(26, 29, 27, .055); --scrim: rgba(26, 24, 18, .4); --grab: rgba(26, 29, 27, .22); --thumb: #ffffff;
  --tag-bg: rgba(26, 29, 27, .09); --tag-bg-2: rgba(26, 29, 27, .07); --tag-bg-3: rgba(26, 29, 27, .11);
  --empty-br: rgba(26, 29, 27, .2); --empty-bg: rgba(255, 255, 255, .5); --empty-hi: rgba(26, 29, 27, .34); --acting-br: rgba(122, 91, 28, .45);
  --pill-bg: rgba(26, 29, 27, .06); --pill-br: rgba(26, 29, 27, .12); --tot-bg: rgba(26, 29, 27, .08); --tot-br: rgba(26, 29, 27, .16);
  --me-bg: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 80%, transparent) 40%, var(--bg)); --vignette: rgba(120, 95, 60, .1); --num-shadow: none;
  --haze: color-mix(in srgb, var(--felt-hi) 12%, transparent); --haze-g: color-mix(in srgb, var(--felt-hi) 10%, transparent);
  --line: rgba(26, 29, 27, .1); --sel: rgba(30, 116, 84, .22); --scroll: rgba(26, 29, 27, .24); --placeholder: #5d6661;
  --gt-poker:#e0ebe5;  --gi-poker:#35825c;  --gt-blackjack:#e0e5eb;  --gi-blackjack:#355782;  --gt-roulette:#ece0e3;  --gi-roulette:#82354a;  --gt-homebj:#ece7e0;  --gi-homebj:#826435;  --gt-teenpatti:#e9e0ec;  --gi-teenpatti:#7a3a82;
  color-scheme: light;
}
/* the felt (and the roulette table) is a dark surface in both modes: what sits on it gets text tuned for felt.
   Classic look only: a table style brings its own felt colours (and Sketchbook its own ink). */
:root:not([data-skin]) #board:not(.roulette), :root:not([data-skin]) #rlTable, [data-theme="light"] #board:not(.roulette), [data-theme="light"] #rlTable {
  --glass: rgba(16, 26, 22, .62); --glass-2: #18201d; --glass-br: rgba(241, 244, 241, .1); --glass-hi: rgba(255, 255, 255, .06);
  --panel-br: rgba(241, 244, 241, .09);
  --text: #f1f4f1; --text-2: #d9e1db; --muted: #bac6bd;
  --gold: #e6cf9c; --gold-2: #a88f5c; --gold-hi: #f2e5c4; --gold-ink: #231c0e;
  --accent: #9fdcbd; --accent-2: #5fb38a; --accent-hi: #c3ead6; --accent-ink: #0b1f16; --danger: #f7bcc0; --tn-ink: #2a0806;
  --btn: rgba(241, 244, 241, .08); --btn-br: rgba(241, 244, 241, .12);
  --tag-bg: rgba(255, 255, 255, .14); --pill-bg: rgba(0, 0, 0, .38); --pill-br: rgba(255, 255, 255, .1); --tot-bg: rgba(0, 0, 0, .5); --tot-br: rgba(255, 255, 255, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 10px -4px rgba(0, 0, 0, .35); --hover: rgba(255, 255, 255, .08);
  color: var(--text);
}

/* ============================================================ base */
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 400 var(--fs-md)/1.4 var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; }
button, input, [data-key], .seat.empty .av, #mycards, #hbDeck { touch-action: manipulation; }
button { font: 650 var(--fs-md)/1.2 var(--font); letter-spacing: -.005em; border: 0; border-radius: var(--r-md); padding: 13px 14px; min-height: var(--tap); background: var(--btn); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--btn-br), inset 0 1px 0 var(--glass-hi); transition: transform .14s var(--spring), opacity .2s ease; }
button:active:not(:disabled) { transform: translateY(1px) scale(.97); transition-duration: .06s; }
button:disabled { opacity: .4; cursor: default; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input { font: 500 16px/1.3 var(--font); border: 1px solid var(--field-br); border-radius: var(--r-sm); padding: 12px 13px; min-height: var(--tap); background: var(--field); color: var(--text); width: 100%; user-select: text; -webkit-user-select: text; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
::selection { background: var(--sel); color: inherit; }
html { scrollbar-color: var(--scroll) transparent; accent-color: var(--accent); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; }
input:disabled, textarea:disabled { opacity: .5; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); outline: none; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.on { display: flex; animation: screenIn .5s var(--out); }
@keyframes screenIn { from { opacity: 0; transform: scale(.985); } }
.screen.leaving { z-index: 20; pointer-events: none; animation: screenOut .36s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes screenOut { to { opacity: 0; transform: scale(1.012); } }
/* filled buttons: flat colour, no gradient, no glow. A press darkens the face by a 12 % overlay and sinks 1 px. */
.primary, .goldbtn, .raise, .call, .fold { box-shadow: none; }
.primary { background: var(--accent); color: var(--accent-ink); }
.goldbtn { background: var(--gold-btn); color: var(--gold-btn-ink); }
.primary:active:not(:disabled), .goldbtn:active:not(:disabled), .raise:active:not(:disabled), .call:active:not(:disabled), .fold:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .12); }
.row { display: flex; gap: var(--sp-2); }
.row > * { flex: 1; min-width: 0; }
label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); display: block; margin: 0 0 6px 2px; }
.hint { color: var(--muted); font-size: var(--fs-sm); text-align: center; margin: 4px 0 0; line-height: 1.45; }
.num, .amt, .pill, .tot, #myinfo .chips, .seat .ch { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ============================================================ lobby: one path (name, game, create / join), the rest folded away */
#lobby { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: radial-gradient(ellipse 110% 46% at 50% -12%, var(--haze) 0%, transparent 70%), var(--bg); }
.lobby-in { width: 100%; max-width: 520px; margin: 0 auto; padding: calc(48px + var(--sa-t)) calc(16px + var(--sa-r)) calc(32px + var(--sa-b)) calc(16px + var(--sa-l)); display: flex; flex-direction: column; gap: var(--sp-3); }
/* the lobby's three dots (settings) */
#lobbyMenuBtn { position: absolute; top: calc(8px + var(--sa-t)); right: calc(8px + var(--sa-r)); z-index: 6; width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; box-shadow: none; color: var(--text-2); }
#lobbyMenuBtn.open { background: var(--ic-open); color: var(--text); }
#lobbyMenuBtn svg { display: block; }

/* ---- the wordmark: a printed name, not a sign. One Didone face, ink colour, a hairline with the four suits under it.
   It works the same on Light and Dark (no glow, no outline). Each table style may set its own display face. ---- */
#hero { margin: var(--sp-2) 0 var(--sp-4); text-align: center; }
.wordmark { margin: 0; font: 600 clamp(40px, 12.4vw, 56px)/1.05 var(--font-serif); letter-spacing: -.01em; color: var(--text); white-space: nowrap; font-optical-sizing: auto; }
.pips { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; color: var(--gold); }
.pips::before, .pips::after { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 60%, transparent)); }
.pips::after { transform: scaleX(-1); }
.pips svg { width: 12px; height: 12px; fill: currentColor; opacity: .85; }

/* ---- surfaces: one card for the main path; folded rows for the lists. Lighter = higher, no heavy shadows. ---- */
.box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); box-shadow: none; }
.box h2, .box h3 { margin: 0; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; color: var(--text); }
#playBox .fld { display: flex; flex-direction: column; gap: var(--sp-2); }
#playBox .fld > label, #playBox .flabel { margin: 0 0 0 2px; font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }
.namerow { display: flex; gap: var(--sp-2); }
.namerow input { flex: 1; min-width: 0; font-weight: 650; font-size: var(--fs-md); }
button.sq { flex: 0 0 auto; width: var(--tap); min-height: var(--tap); padding: 0; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-2); }
button.sq svg { width: 22px; height: 22px; }
#rerollBtn { color: var(--gold); }
#rerollBtn.spin svg, #tnameDice.spin svg { animation: diceRoll .5s var(--spring); }
@keyframes diceRoll { from { transform: rotate(-200deg) scale(.7) } }
/* game picker: four quiet tiles; the picked one carries the accent ring */
#gamePick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
#gamePick button { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico gt" "ico sm"; align-items: center; column-gap: var(--sp-3); row-gap: 2px; text-align: left; padding: var(--sp-3); min-height: 64px; background: var(--field); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--field-br); color: var(--text); transition: transform .14s var(--spring), box-shadow .2s, background-color .2s; }
#gamePick .gt { grid-area: gt; font-size: var(--fs-sm); font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gamePick small { grid-area: sm; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; line-height: 1.25; }
#gamePick .ico { grid-area: ico; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-2); background: var(--soft); transition: background-color .2s, color .2s; }
#gamePick .ico svg { width: 22px; height: 22px; overflow: visible; }
#gamePick button.on { background: color-mix(in srgb, var(--accent) 10%, var(--field)); box-shadow: inset 0 0 0 2px var(--accent); }
#gamePick button.on .ico { color: var(--accent-ink); background: var(--accent); }
#gameHint { text-align: left; margin: 0 2px; font-size: var(--fs-xs); min-height: calc(3 * 1.45em); }
/* Table settings: everything a host may tune, folded under one row whose summary says what is set */
#tableSettings { border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
#tableSettings > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: 650; color: var(--text); border-radius: var(--r-md); }
#tableSettings > summary::-webkit-details-marker { display: none; }
#tableSettings > summary .sum { margin-left: auto; min-width: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#tableSettings > summary::after, .drawer > summary::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--out); opacity: .6; }
#tableSettings[open] > summary::after, .drawer[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
#tableSettings .setin { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); }
#tableSettings[open] .setin { animation: fadeUp .3s var(--out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-4px) } }
.fields label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fields input { font-variant-numeric: tabular-nums; }
button.big { padding: 12px 16px; min-height: 52px; font-size: var(--fs-md); font-weight: 700; border-radius: var(--r-md); }
#createBtn { width: 100%; }
/* or join with a code */
.or { display: flex; align-items: center; gap: var(--sp-3); margin: calc(-1 * var(--sp-1)) 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#joinBox { gap: var(--sp-2); }
#code { text-transform: uppercase; letter-spacing: .2em; font-variant-numeric: tabular-nums; font-weight: 650; }
#code::placeholder { letter-spacing: 0; text-transform: none; font-weight: 500; }
#joinBtn { flex: 0 0 auto; min-width: 96px; white-space: nowrap; }
/* a friend's link: the invite card comes first and is the one big button */
#inviteBox { gap: var(--sp-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
#inviteBox .ik { margin: 0; font-size: var(--fs-xs); font-weight: 650; color: var(--accent); }
#inviteBox h2 { overflow-wrap: anywhere; }
#inviteBox .hint { text-align: left; margin: 0; }
#inviteBox .primary { margin-top: var(--sp-2); }
/* a seat this phone still holds: one prominent row, above everything else */
#rejoinBox { display: flex; flex-direction: column; gap: var(--sp-2); }
#rejoinBox .otab { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, var(--line)); }
#rejoinBox .otab .ico { color: var(--gold-btn-ink); background: var(--gold-btn); }
#rejoinBox .otab button { background: var(--gold-btn); color: var(--gold-btn-ink); box-shadow: none; font-weight: 700; }
/* the folded lists: Live tables, Past sessions. A 56 px row with the count; open / closed is remembered per phone. */
.drawer { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); }
.drawer > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 0 var(--sp-4); font-size: var(--fs-md); font-weight: 650; color: var(--text); border-radius: var(--r-lg); }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary .ocount { margin-left: auto; }
.drawer[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.drawer .flist { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }
.ocount { min-width: 28px; height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-pill); display: inline-grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--soft); }
.ocount.live { color: var(--accent-ink); background: var(--accent); }
#openList { position: relative; min-height: 64px; }
.otab { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); min-height: 64px; border-radius: var(--r-md); background: var(--field); box-shadow: inset 0 0 0 1px var(--field-br); transition: opacity .3s ease, transform .4s var(--spring); }
.otab.enter { opacity: 0; transform: translateY(8px) scale(.98); }
.otab.leave { opacity: 0; transform: scale(.97); pointer-events: none; transition-duration: .25s; }
.otab .ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-2); background: var(--soft); }
.otab .ico svg { width: 22px; height: 22px; }
.otab .ot { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.otab .l1 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.otab b { font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.otab small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.otab .st { flex: 0 0 auto; font-size: var(--fs-2xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-pill); color: var(--text-2); background: var(--soft); }
.otab .st.live { color: var(--accent-ink); background: var(--accent); }
.otab .st.mine { color: var(--gold-btn-ink); background: var(--gold-btn); }
.otab button { min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.oempty { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-3); text-align: center; color: var(--muted); font-size: var(--fs-sm); border-radius: var(--r-md); border: 1.5px dashed var(--dash); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.oempty.on { opacity: 1; visibility: visible; transition: opacity .3s .1s; }
.dotpulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: breathe 1.4s ease-in-out 4; }
/* switches (host form) */
.switch { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; margin: 0; padding: 2px; color: var(--text); font-size: var(--fs-sm); font-weight: 600; min-height: var(--tap); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .knob { flex: 0 0 auto; position: relative; width: 44px; height: 28px; border-radius: 14px; background: var(--knob-off); box-shadow: inset 0 0 0 1px var(--field-br); transition: background-color .25s; }
.switch .knob::after { content: ''; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--thumb); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .3s var(--spring); }
.switch input:checked + .knob { background: var(--accent); box-shadow: none; } .switch input:checked + .knob::after { transform: translateX(16px); background: #fff; }
.switch input:disabled + .knob { opacity: .5; }
.switch input:focus-visible + .knob { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch .lbl { display: flex; flex-direction: column; gap: 2px; } .switch .lbl small { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.foot { font-size: var(--fs-xs); padding: 0 var(--sp-3); }
@media (min-height: 900px) and (max-width: 959px) { .lobby-in { min-height: 100%; justify-content: center; } }
/* laptops: the path on the right, the name and the lists on the left */
@media (min-width: 960px) and (min-height: 560px) {
  .lobby-in { max-width: 1040px; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; column-gap: 40px; row-gap: var(--sp-3); align-content: center; padding-top: calc(40px + var(--sa-t)); }
  .lobby-in > * { grid-column: 1; }
  #hero { text-align: left; margin: 0 0 var(--sp-4); } .wordmark { font-size: 72px; } .pips { justify-content: flex-start; } .pips::before { display: none; }
  #playBox { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
  .foot { grid-column: 1 / 3; margin-top: var(--sp-2); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .lobby-in { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; padding-top: calc(16px + var(--sa-t)); }
  .lobby-in > * { grid-column: 1; }
  #hero { margin: 0 0 var(--sp-2); } .wordmark { font-size: 40px; }
  #playBox { grid-column: 2; grid-row: 1 / span 8; }
  .foot { grid-column: 1 / 3; }
}

/* ============================================================ table shell */
#game { background: radial-gradient(ellipse 85% 55% at 50% 42%, var(--haze-g) 0%, transparent 72%),
    radial-gradient(ellipse 140% 90% at 50% 120%, var(--vignette), transparent 60%), var(--grain), var(--bg); }
body { --ga: var(--g-poker); } body[data-game="blackjack"] { --ga: var(--g-blackjack); } body[data-game="roulette"] { --ga: var(--g-roulette); } body[data-game="homebj"] { --ga: var(--g-homebj); } body[data-game="teenpatti"] { --ga: var(--g-teenpatti); }
/* the table rises in when you sit down: seats, felt and controls arrive together */
#game.on #players, #game.on #board, #game.on #actions, #game.on #me { animation: tableIn .7s var(--out) both; }
#game.on #board { animation-delay: .06s; } #game.on #actions, #game.on #me { animation-delay: .12s; }
@keyframes tableIn { from { opacity: 0; transform: translateY(14px) scale(.99); } }
#top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: calc(4px + var(--sa-t)) calc(10px + var(--sa-r)) 4px calc(12px + var(--sa-l)); /* 44 px Leave + 4 + 4 = the old 40 + 6 + 6 */ font-size: var(--fs-sm); color: var(--text-2); flex: 0 0 auto; position: relative; z-index: 4; }
#tinfo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
#tinfo .gm { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: var(--r-pill); background: var(--soft); color: var(--text-2); font-size: var(--fs-xs); font-weight: 650; }
#tinfo .gm svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* phones (portrait up to 699 px, and on their side): no game chip and no $ badge, the table name takes the room.
   A real-money table still says so: the P/L pill, or (watching, no line yet: the pill is blank) a gold "$" after the name.
   Static per table, so nothing moves while you play. */
@media (max-width: 699px), (orientation: landscape) and (max-height: 520px) {
  #tinfo .gm, #tinfo .usdb { display: none; }
  #tinfo.nopl .tt b::after { content: "\00a0$"; color: var(--gold); font-weight: 800; }
  #tinfo.nopl.inr .tt b::after { content: "\00a0\20b9"; }
}
/* phones on a money table (v11: every phone, was under 400 px; at 402 the pill was cut to "+₹3."): the P/L pill sits in the bar too, so Leave is its icon (still red, same 44 px hit) */
@media (max-width: 499px) and (orientation: portrait) {
  #top:has(#plPill:not([hidden])) #leaveBtn { width: 44px; padding: 0; justify-content: center; }
  #top:has(#plPill:not([hidden])) #leaveBtn .lv { display: none; }
}
#tinfo .tt { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
#tinfo .tt b { color: var(--text); font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tinfo .tt small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#tinfo .tt small em { font-style: normal; color: var(--gold); font-weight: 600; }
/* the second line is a slot: the blinds / hand count, or for a few seconds who caught the bee (cross-fade, nothing moves) */
#tinfo .tt .sub { display: grid; min-width: 0; }
#tinfo .tt .sub > small { grid-area: 1 / 1; min-width: 0; transition: opacity .25s ease; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#topbtns { display: flex; gap: 4px; flex: 0 0 auto; }
#top { --tb-h: 44px; } /* the bar's one control height: icons, Leave and the two pills */
#top button.ic { position: relative; width: var(--tb-h); height: var(--tb-h); min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-br); }
#top button.ic::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; } /* 48 px hit area */
/* the host's Pause / Resume: pause icon while playing; a gold dot while it waits for the hand to end; play (accent) when paused */
#top #pauseBtn .pdot { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--spring); }
#top #pauseBtn[data-st="pending"] { color: var(--gold); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 60%, transparent); }
#top #pauseBtn[data-st="pending"] .pdot { opacity: 1; transform: none; }
#top #pauseBtn[data-st="paused"] { color: var(--accent-ink); background: var(--accent); box-shadow: none; }
#top #pauseBtn[data-st="paused"]:disabled { color: var(--text-2); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-br); }
#top button.ic.open { background: var(--ic-open); color: var(--text); }
#top button.ic svg { display: block; }
#menu, #lobbyMenu { position: absolute; right: calc(10px + var(--sa-r)); top: calc(56px + var(--sa-t)); z-index: 9; background: var(--glass-2); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--glass-br); border-radius: var(--r-lg); padding: 6px; min-width: 240px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .16s ease, transform .2s var(--out), visibility 0s .2s; }
#menu.on, #lobbyMenu.on { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .26s var(--spring); }
#menu button, #lobbyMenu button { display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border-radius: var(--r-sm); padding: 12px; font-size: var(--fs-md); font-weight: 550; box-shadow: none; }
#menu button svg, #lobbyMenu button svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
#menu button:active, #menu button:hover, #lobbyMenu button:active, #lobbyMenu button:hover { background: var(--hover); transform: none; }
#lobbyMenu { top: calc(62px + var(--sa-t)); right: calc(12px + var(--sa-r)); }
#menu, #lobbyMenu { max-height: calc(100% - 66px - var(--sa-t) - var(--sa-b)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#lobbyMenu { max-height: calc(100dvh - 74px - var(--sa-t) - var(--sa-b)); }
@media (max-height: 520px) { #menu > button, #lobbyMenu > button { padding-block: 9px; } #settings .mhead { padding-top: 2px; } #menu #settings .modes button, #lobbyMenu #settings .modes button { min-height: 52px; padding-block: 6px; } }
/* ---- Settings: the last block of the menu — Light / Dark, the table style and the sound switch ---- */
#settings { display: flex; flex-direction: column; gap: 2px; }
#lobbyMenu #settings .msep { display: none; }
#settings .msep { height: 1px; margin: 5px 10px 4px; background: var(--glass-br); }
#settings .mhead { padding: 8px 12px 4px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
#settings .mlabel { padding: 4px 12px 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
#settings .modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: 4px 4px 4px; }
#menu #settings .modes button, #lobbyMenu #settings .modes button { flex-direction: row; justify-content: flex-start; gap: var(--sp-3); min-height: var(--tap); padding: 8px 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); text-align: left; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
#settings .modes button[aria-checked="true"] { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
#settings .sw { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .45); }
#settings [data-mode="light"] .sw { background: radial-gradient(circle at 50% 50%, #336b5c 0 34%, #f4f2ec 37%); }
#settings [data-mode="system"] .sw { background: linear-gradient(90deg, #f4f2ec 0 50%, #141816 50%); }
#settings [data-mode] span small { display: block; font-size: var(--fs-2xs); color: var(--muted); font-weight: 500; line-height: 1.1; }
#settings [data-mode="dark"] .sw { background: radial-gradient(circle at 50% 50%, #2d5d50 0 34%, #141816 37%); box-shadow: inset 0 0 0 1px rgba(232, 236, 233, .3); }

#settings .sndtog .tog { margin-left: auto; position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--knob-off); box-shadow: inset 0 0 0 1px var(--field-br); transition: background-color .25s; flex: 0 0 auto; }
#settings .sndtog .tog::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--thumb); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .3s var(--spring); }
#settings .sndtog[aria-checked="true"] .tog { background: var(--accent-2); }
#settings .sndtog[aria-checked="true"] .tog::after { transform: translateX(16px); }
#settings .sndtog .mx, #settings .sndtog[aria-checked="false"] .w1, #settings .sndtog[aria-checked="false"] .w2 { display: none; }
#settings .sndtog[aria-checked="false"] .mx { display: inline; }
#settings .sndtog[aria-checked="false"] { color: var(--text-2); }
/* ---- Leave: an outlined pill in the danger colour (no fill, no glow), 44 px tall for the thumb ---- */
#top #leaveBtn { width: auto; height: var(--tb-h); border-radius: var(--r-pill); padding: 0 16px 0 12px; display: inline-flex; align-items: center; gap: 8px; margin-left: 4px;
  font: 650 var(--fs-sm)/1 var(--font); color: var(--danger); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 55%, transparent); }
#top #leaveBtn::after { border-radius: var(--r-pill); inset: -2px; }
#top #leaveBtn:is(:hover, :active) { background: color-mix(in srgb, var(--danger) 10%, transparent); }
@media (max-width: 359px) { #top #leaveBtn { width: 44px; padding: 0; justify-content: center; } #top #leaveBtn .lv { display: none; } }
/* small phones: when the host's Pause sits in the bar, Leave is its icon (still red, same 44 px) so the table name keeps its room */
@media (max-width: 399px) and (orientation: portrait) { #top:has(#pauseBtn:not([hidden])) #leaveBtn { width: 44px; padding: 0; justify-content: center; } #top:has(#pauseBtn:not([hidden])) #leaveBtn .lv { display: none; } }

/* ============================================================ seats */
#players { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; padding: 6px calc(10px + var(--sa-r)) 2px calc(10px + var(--sa-l)); flex: 0 0 auto; position: relative; z-index: 2; }
.seat { width: min(88px, calc((100vw - 48px) / 4)); position: relative; text-align: center; }
.seat .av { position: relative; background: linear-gradient(180deg, var(--glass-hi), transparent 55%), var(--seat); border: 1px solid var(--seat-br); border-radius: var(--r-md); padding: 7px 5px 6px; font-size: var(--fs-sm); min-height: 82px; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .45); transition: border-color .2s, opacity .3s; }
.seat .avt { display: none; }
.seat.acting .av { border-color: var(--acting-br); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--seat); }
.seat.winner .av { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 26px -2px color-mix(in srgb, var(--accent) 60%, transparent); animation: pop .55s var(--spring); }
.seat.loser .av { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
@keyframes pop { 40% { transform: scale(1.07) } }
.seat.folded .av, .seat.out .av { opacity: .45; }
.seat .nm { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; color: var(--text); }
.seat .ch { color: var(--gold); font-weight: 650; font-size: var(--fs-xs); margin-top: 1px; text-shadow: none; } /* stacks: tabular, the name's weight, no glow */
.seat .hole { display: flex; justify-content: center; gap: 3px; margin-top: 5px; min-height: calc(var(--cw-sm) * 1.4); flex-wrap: wrap; }
.seat .dlr { position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #e6e1d4 70%); color: var(--ink); font: 800 var(--fs-2xs)/22px var(--font-num); box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(0, 0, 0, .1), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(0, 0, 0, .12); z-index: 2; }
.seat .crown { position: absolute; left: -6px; top: -8px; width: 17px; height: 17px; padding: 2px; border-radius: 50%; color: var(--gold-hi); background: var(--bg-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 2px 4px rgba(0, 0, 0, .5); z-index: 2; }
/* ---- the turn light: a hairline that drains clockwise round whatever is on the clock, led by a comet head.
   Gold with time to spare; the last seconds warm it to coral, a halo breathes and the seconds appear. ---- */
.tring { --tr-r: var(--r-md); position: absolute; inset: -1px; pointer-events: none; z-index: 1; color: var(--gold); border-radius: var(--tr-r); transition: color 1.2s ease, opacity .3s ease; }
.tring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.tring rect, .tring path { fill: none; rx: var(--tr-r); stroke-linecap: round; }
.tring .tk { stroke: currentColor; stroke-opacity: .13; stroke-width: 1.4px; }
.tring .pr { stroke: currentColor; stroke-width: 2px; stroke-dasharray: 100 200; }
.tring .em { stroke: currentColor; stroke-opacity: .3; stroke-width: 4px; stroke-dasharray: 9 200; }
.tring .hd { stroke: color-mix(in srgb, currentColor 30%, #fff); stroke-width: 4.6px; stroke-dasharray: .01 200; }
.tring::before { content: ''; position: absolute; inset: -3px; border-radius: calc(var(--tr-r) + 3px); box-shadow: 0 0 16px 1px currentColor, inset 0 0 8px currentColor; opacity: 0; will-change: opacity; }
.tring.low { color: var(--danger); }
.tring.low::before { animation: halo 1.25s ease-in-out infinite; }
.tring.crit::before { animation-duration: .7s; }
@keyframes halo { 0%, 100% { opacity: .08 } 50% { opacity: .55 } }
.tring .tn { position: absolute; right: -7px; bottom: -8px; min-width: 21px; height: 19px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger); color: var(--tn-ink); font: 800 var(--fs-2xs)/19px var(--font-num); font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .35s var(--spring); }
.tring.low .tn { opacity: 1; transform: none; }
/* my own light (cards / live hand / the deck) exists only while it is my move */
#me .tring, #board .tring { opacity: 0; }
#me .tring.on, #board .tring.on { opacity: 1; }
#mycards .tring { --tr-r: 14px; inset: -5px -3px -3px; }
#board .bjhand .tring { --tr-r: var(--r-lg); }
#hbDeck .tring { --tr-r: calc(var(--cw-lg) * .16); inset: -6px; }
#players.compact .tring { --tr-r: var(--r-sm); }
#players.compact .tring .tn, #players.tight .tring .tn { right: -4px; bottom: -6px; min-width: 18px; height: 16px; line-height: 16px; font-size: 9px; }
.seat.acting::before { content: ''; position: absolute; left: 6%; right: 6%; top: 8px; height: 70px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 26%, transparent); filter: blur(16px); z-index: -1; pointer-events: none; }
.seat .act { margin-top: 5px; height: 20px; display: flex; justify-content: center; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; }
.tag { background: var(--tag-bg); color: var(--text); padding: 3px 7px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .01em; line-height: 1.05; white-space: nowrap; animation: tagIn .3s var(--spring); }
@keyframes tagIn { from { transform: translateY(-3px) scale(.85); opacity: 0 } }
.tag.fold, .tag.bust, .tag.lose { background: var(--tag-fold-bg); color: var(--tag-fold-ink); }
.tag.raise, .tag.bet, .tag.win, .tag.ready { background: var(--accent); color: var(--accent-ink); }
.tag.allin, .tag.blackjack, .tag.double, .tag.split { background: var(--gold); color: var(--gold-ink); }
.tag.sb, .tag.bb, .tag.push { background: var(--tag-bg-2); color: var(--text); }
.tag.check, .tag.call, .tag.hit, .tag.stand, .tag.insure, .tag.insured { background: var(--tag-bg-3); color: var(--text); }
.amt { color: var(--gold); display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.amt.neg { color: var(--danger); } .amt.pos { color: var(--accent); }
.chip { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; position: relative; background: radial-gradient(circle, var(--gold-hi) 0 22%, var(--gold) 23% 38%, var(--gold-2) 39% 47%, var(--gold) 48% 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 .5px rgba(0, 0, 0, .25); vertical-align: -1px; }
.chip::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .92) 0 20deg, transparent 20deg 60deg); -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58%); mask: radial-gradient(circle, transparent 0 57%, #000 58%); }
.seat.empty .av { border: 1px solid var(--empty-br); background: var(--empty-bg); color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: none; font-size: var(--fs-xs); font-weight: 600; transition: color .2s, border-color .2s; }
.seat.empty .av .sit { width: 22px; height: 22px; opacity: .8; }
.seat.empty .av:hover { color: var(--text); border-color: var(--empty-hi); }
#players.compact { gap: 8px 5px; }
#players.compact .seat { width: min(70px, calc((100vw - 40px - var(--sa-l) - var(--sa-r)) / 5)); } /* five across even on a 375 px phone */
#players.compact .seat .av { min-height: 64px; padding: 5px 2px 4px; border-radius: var(--r-sm); font-size: var(--fs-xs); }
#players.compact .seat .ch { font-size: var(--fs-2xs); }
#players.compact .seat .hole { min-height: calc(var(--cw-xs) * 1.4); margin-top: 3px; }
#players.compact .card.sm { --cw: var(--cw-xs); }
#players.compact .seat .act { height: 17px; font-size: var(--fs-2xs); margin-top: 3px; }
#players.compact .tag { font-size: 9px; padding: 2px 5px; }
#players.compact .seat .dlr { width: 18px; height: 18px; line-height: 18px; font-size: 9px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0, 0, 0, .12); }
#players.compact .seat .crown { width: 15px; height: 15px; top: -7px; left: -5px; }
#players.tight { gap: 7px 4px; padding-inline: calc(6px + var(--sa-l)) calc(6px + var(--sa-r)); }
#players.tight .seat { width: 56px; }
#players.tight .seat .av { padding: 4px 2px 3px; min-height: 0; }
#players.tight .seat .nm { font-size: 10.5px; }
#players.tight .seat .act { height: 15px; gap: 2px; }
#players.tight .seat .act .amt { font-size: 9.5px; }
#players.tight .tag { font-size: 8px; padding: 2px 4px; letter-spacing: 0; }

/* ============================================================ cards — one component for every card on screen */
.card { --cw: var(--cw-md); position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .1); background: linear-gradient(165deg, var(--card) 0%, var(--card) 45%, var(--card-2) 100%); color: var(--ink); border: 1px solid var(--card-br); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow); font-family: var(--font-num); font-weight: 600; line-height: 1; flex: 0 0 auto; overflow: hidden; }
.card.r { color: var(--red); }
.card.sm { --cw: var(--cw-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .card.md { --cw: var(--cw-md); } .card.lg { --cw: var(--cw-lg); }
.card svg { fill: currentColor; display: block; }
.card svg.face { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; font-family: var(--font-num); font-weight: 600; letter-spacing: -.02em; }
.card svg.face text { fill: currentColor; }
.card svg.face .mini { display: none; }
/* court cards: printed-deck inks. Each style can retune these tokens; robe = suit colour (currentColor) */
.card { --court-gold: #c49a4a; --court-skin: #efd7bd; --court-hair: #6b4a30; --court-beard: #e3ddd0; --court-cream: #f8f4ea; --court-alt: #94413c; --court-line: color-mix(in srgb, var(--ink) 88%, transparent); --court-panel: color-mix(in srgb, currentColor 6%, transparent); }
.card.r { --court-alt: #3a5280; }
.card svg.face .co { stroke: var(--court-line); stroke-width: .55; stroke-linejoin: round; }
.card svg.face .cr { fill: var(--court-robe, currentColor); } .card svg.face .cg { fill: var(--court-gold); } .card svg.face .cs { fill: var(--court-skin); } .card svg.face .ch { fill: var(--court-hair); }
.card svg.face .cb { fill: var(--court-beard); } .card svg.face .cw { fill: var(--court-cream); } .card svg.face .ca { fill: var(--court-alt); }
.card svg.face .cl { stroke: var(--court-line); stroke-width: .7; stroke-linecap: round; }
.card svg.face .cp { fill: var(--court-panel); stroke: currentColor; stroke-width: 1.1; }
.card svg.face .court use { fill: currentColor; stroke: none; }
/* small cards (seats, mini fans, rankings sheet) use the big top-left index; large ones the full face.
   Chosen by size class, not a container query: containment breaks the 3D peek flip in Safari. */
.card.sm svg.face .full, .card.md svg.face .full { display: none; }
.card.sm svg.face .mini, .card.md svg.face .mini { display: inline; }
.card.back { background: radial-gradient(circle at 50% 42%, var(--back-1), var(--back-2) 78%); border: calc(var(--cw) * .055) solid var(--back-edge); }
.card.back::before { content: ''; position: absolute; inset: calc(var(--cw) * .045); border-radius: calc(var(--cw) * .05); border: 1px solid var(--back-line); background: repeating-linear-gradient(45deg, var(--back-line) 0 1px, transparent 1px calc(var(--cw) * .13)), repeating-linear-gradient(-45deg, var(--back-line) 0 1px, transparent 1px calc(var(--cw) * .13)); }
.card.back::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * .4); height: calc(var(--cw) * .4); transform: translate(-50%, -50%); background: var(--back-edge); opacity: .88; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5C31 32 9 44 9 63a19 19 0 0 0 35 9c-1 11-6 18-15 23h42c-9-5-14-12-15-23a19 19 0 0 0 35-9C91 44 69 32 50 5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5C31 32 9 44 9 63a19 19 0 0 0 35 9c-1 11-6 18-15 23h42c-9-5-14-12-15-23a19 19 0 0 0 35-9C91 44 69 32 50 5z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* an undealt board slot: an outline printed on the felt, same footprint as a card */
.card.undealt { background: rgba(0, 0, 0, .1); border: 1.5px solid rgba(255, 255, 255, .13); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .22); }
.card.undealt::before, .card.undealt::after { display: none; }
.card.win { box-shadow: 0 0 0 2.5px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 70%, transparent); }
/* the winning cards must read in every table style (each style sets its own card shadow, which used to win) */
html .card.win { box-shadow: 0 0 0 2.5px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 70%, transparent) !important; outline: 2px solid var(--accent); outline-offset: 1px; }
.card.dim { opacity: .45; }
.card.deal { animation: comDeal .5s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes comDeal { from { transform: translateY(-40px) rotateY(90deg) scale(.86); opacity: 0 } 40% { opacity: 1 } }
.seat .card.deal { animation: smDeal .38s var(--out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes smDeal { from { transform: translateY(-14px) scale(.4); opacity: 0 } }
/* a fanned hand: every card keeps its index column and first pip column visible (64% of its width);
   later cards sit on top and step up a touch, like a hand held in a fan. Scales with --cw at every size. */
.fanhand { display: flex; align-items: flex-end; perspective: 700px; padding-top: calc(var(--cw-lg) * .12); }
.fanhand .card { position: relative; }
.fanhand .card + .card { margin-left: calc(var(--cw) * -.36); }
.fanhand .card:nth-child(2) { transform: translateY(calc(var(--cw) * -.04)); } .fanhand .card:nth-child(3) { transform: translateY(calc(var(--cw) * -.08)); } .fanhand .card:nth-child(4) { transform: translateY(calc(var(--cw) * -.12)); } .fanhand .card:nth-child(n+5) { transform: translateY(calc(var(--cw) * -.16)); }
.fanhand.sm { padding-top: 0; } .fanhand.sm .card + .card { margin-left: calc(var(--cw) * -.4); } .fanhand.sm .card { transform: none !important; }

/* ============================================================ board: the felt table */
#board { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: clamp(4px, 1.2vh, 10px); position: relative; z-index: 1; padding: 14px 16px; margin: 4px calc(8px + var(--sa-r)) 4px calc(8px + var(--sa-l)); isolation: isolate; }
/* felt + padded rail, drawn behind the board's content */
#board::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 34px;
  background: var(--grain), radial-gradient(ellipse 70% 60% at 50% 38%, var(--felt-hi) 0%, var(--felt-1) 30%, var(--felt-2) 62%, var(--felt-3) 100%);
  box-shadow: inset 0 0 0 1.5px var(--rail-line), inset 0 0 0 7px var(--rail-2), inset 0 0 0 8px var(--rail-1), inset 0 1px 0 9px rgba(255, 255, 255, .06), inset 0 14px 40px 6px rgba(0, 0, 0, .38), 0 18px 40px -16px rgba(0, 0, 0, .8); }
/* a soft light from above the table */
#board::after { content: ''; position: absolute; left: 12%; right: 12%; top: 6%; height: 45%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255, 250, 235, .08), transparent 70%); }
/* idle (waiting for players / the next round): the lamp over the table breathes and drifts a little */
/* (battery) the waiting table is still: the lamp, the status line and the empty slots no longer loop forever.
   The slots glow once when the table goes idle, then rest. */
@keyframes lamp { 0%, 100% { opacity: .75; transform: translateX(-3%) } 50% { opacity: 1; transform: translateX(3%) } }

@keyframes breathe { 0%, 100% { opacity: .65 } 50% { opacity: 1 } }
#board.idle .card.undealt { animation: slotGlow 2.4s ease-in-out 1 both; animation-delay: calc(var(--k, 0) * .2s); }
#board.idle #community .card.undealt:nth-child(2) { --k: 1; } #board.idle #community .card.undealt:nth-child(3) { --k: 2; } #board.idle #community .card.undealt:nth-child(4) { --k: 3; } #board.idle #community .card.undealt:nth-child(5) { --k: 4; }
@keyframes slotGlow { 0%, 100% { opacity: 1 } 50% { opacity: .7 } }
#board.roulette::before, #board.roulette::after { display: none; }
.crest { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; pointer-events: none; z-index: -1; color: var(--gold); opacity: .2; white-space: nowrap; }
#board.homebj.idle .crest { opacity: 0; } /* the waiting line sits where the crest is */
.crest { transition: opacity .4s; }
.crest span { font: italic 500 17px/1 var(--font-serif); letter-spacing: .04em; }
.crest i { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); } .crest i:last-child { transform: scaleX(-1); }
@media (max-height: 700px) and (orientation: portrait), (orientation: landscape) and (max-height: 520px) { .crest { display: none; } }
#board.roulette { margin: 0; }
#status { font-size: var(--fs-sm); color: var(--text-2); text-align: center; padding: 0 16px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#msg { background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r-pill); padding: 0 16px; height: 34px; line-height: 32px; font-size: var(--fs-sm); font-weight: 650; max-width: 92%; text-align: center; box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quip { position: absolute; left: 50%; top: 12px; max-width: calc(100% - 32px); background: var(--glass-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-br); color: var(--text); font-size: var(--fs-sm); font-weight: 550; padding: 8px 14px; border-radius: var(--r-pill); z-index: 5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .25s ease, transform .3s var(--out), visibility 0s .3s; }
#quip.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .4s var(--spring); }
.pill { display: inline-flex; align-items: center; gap: 7px; background: var(--pill-bg); border: 1px solid var(--pill-br); border-radius: var(--r-pill); padding: 6px 14px 6px 10px; color: var(--gold); font-weight: 750; font-size: var(--fs-sm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.pill .chip { width: 15px; height: 15px; }
.pill:empty { display: none; }
.pill { position: relative; }
.pill::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--gold), 0 0 18px color-mix(in srgb, var(--gold) 60%, transparent); opacity: 0; pointer-events: none; }
.pill.bump::after { animation: potglow .6s ease-out; } .pill.bump .chip { animation: chipHop .45s var(--spring); }
@keyframes potglow { 25% { opacity: 1 } } @keyframes chipHop { 40% { transform: translateY(-4px) rotate(40deg) } }
/* shared round timer (betting windows where everyone acts at once): the quiet version of the turn light, a small dial */
.rtimer { display: none; align-items: center; justify-content: center; gap: 8px; color: var(--gold); font: 650 var(--fs-xs)/1 var(--font-num); font-variant-numeric: tabular-nums; transition: color 1.2s ease; }
.rtimer.on { display: flex; }
.rtimer .dial { width: 20px; height: 20px; flex: 0 0 auto; overflow: visible; transform: rotate(-90deg); }
.rtimer circle { fill: none; }
.rtimer .tk { stroke: currentColor; stroke-opacity: .2; stroke-width: 2px; }
.rtimer .pr { stroke: currentColor; stroke-width: 2.4px; stroke-dasharray: 100 200; stroke-linecap: round; }
.rtimer .rl { color: var(--text-2); font: 600 var(--fs-xs)/1 var(--font); letter-spacing: .01em; }
.rtimer .sec { min-width: 1.3em; font-weight: 750; }
.rtimer.low { color: var(--danger); }
.rtimer.low .dial { animation: dialBreath 1.25s ease-in-out infinite; }
.rtimer.crit .dial { animation-duration: .7s; }
@keyframes dialBreath { 50% { transform: rotate(-90deg) scale(1.16) } }
.feltprint { display: block; width: min(320px, 82vw); height: auto; overflow: visible; }
.feltprint text { font-family: var(--font-serif); fill: var(--gold); }
.feltprint .a { font-size: 13.5px; letter-spacing: .2em; text-transform: uppercase; fill-opacity: .6; }
.feltprint .b { font-size: 10.5px; letter-spacing: .06em; fill-opacity: .42; font-style: italic; }
.rules { font-size: var(--fs-xs); color: var(--muted); text-align: center; padding: 0 14px; max-width: 100%; }

/* the middle line: rules, the betting timer and the result banner share one slot and cross-fade */
.midslot { display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); min-height: 34px; width: 100%; }
.midslot > * { grid-area: 1 / 1; }
.midslot > *, .midslot > #msg, .midslot > #hbCue, .midslot > #status { position: static; transform: none; margin: 0; opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; }
.midslot > .rtimer { display: flex; }
.midslot > .on, .midslot > #msg.on, .midslot > #hbCue.on, .midslot > #status.on { opacity: 1; visibility: visible; transition: opacity .28s ease .14s; }
.midslot #msg { width: auto; }
.midslot .rules { line-height: 1.35; padding: 0 12px; }

/* ============================================================ actions */
#actions { padding: 6px calc(12px + var(--sa-r)) 6px calc(12px + var(--sa-l)); display: grid; flex: 0 0 auto; position: relative; z-index: 3; }
/* the game's own controls and the Sit / Start / Re-buy row share one slot and cross-fade, so the table never moves */
#actions > * { grid-area: 1 / 1; align-self: end; min-width: 0; }
#gameActions { display: grid; position: relative; transition: opacity .22s ease; }
#gameActions > * { grid-area: 1 / 1; align-self: end; min-width: 0; }
#gameActions.off { opacity: 0; visibility: hidden; }
/* someone else's move: a quiet line holds the slot instead of a row of disabled buttons */
.waitline { align-self: center !important; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; }
.waitline b { color: var(--text-2); font-weight: 650; }
.waitline .wdot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.waitline .t { overflow: hidden; text-overflow: ellipsis; }
#gameActions.off, #gameActions.off * { pointer-events: none !important; }
#altRow { display: flex !important; transition: opacity .22s ease .05s, transform .26s var(--out) .05s; }
#gameActions:not(.off) ~ #altRow { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .16s, transform .2s, visibility 0s .2s; }
.actrow button, #altRow button { padding: 12px 6px; min-height: 52px; font-size: var(--fs-md); font-weight: 700; border-radius: var(--r-md); }
.actrow, #altRow { gap: var(--sp-2); }
/* the three game actions: flat, muted fills (brick, slate) and the one accent for the raise */
.fold { background: var(--fold-1); color: var(--fold-ink); }
.call { background: var(--call-1); color: var(--call-ink); }
.raise { background: var(--raise-1); color: var(--raise-ink); }
.ctl { background: var(--btn); }
/* poker raise sheet: floats above the action row, never pushes the table */
#raisePanel { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-lg); background: var(--glass-2); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--glass-br); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: bottom center; transition: opacity .16s ease, transform .2s var(--out), visibility 0s .2s; z-index: 6; }
#raisePanel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .3s var(--spring); }
#raiseRow { display: flex; align-items: center; gap: 8px; }
#rMinus svg, #rPlus svg, .nbstep button svg { width: 18px; height: 18px; display: block; margin: auto; }
#raiseRow input[type=range] { flex: 1; padding: 0; min-height: 44px; min-width: 0; accent-color: var(--gold); background: none; border: 0; box-shadow: none; }
#rMinus, #rPlus { width: 44px; flex: 0 0 44px; padding: 0; font-size: 22px; line-height: 1; border-radius: var(--r-pill); font-weight: 500; }
#raiseVal { width: 92px; flex: 0 0 auto; text-align: center; padding: 10px 6px; font: 700 var(--fs-lg)/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--gold); }
#quick { display: flex; gap: var(--sp-2); }
#quick button, .chiprow button { flex: 1; padding: 8px 4px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.chiprow { display: flex; gap: 6px; }
.chiprow button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 2px; min-height: 52px; font: 700 var(--fs-sm)/1 var(--font-num); font-variant-numeric: tabular-nums; }
.chiprow button .chip { width: 22px; height: 22px; transition: transform .2s var(--spring); }
.chiprow button:active:not(:disabled) .chip { transform: translateY(-2px) rotate(25deg); }
.chiprow button.on { background: color-mix(in srgb, var(--gold) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); }
.chiprow button.on .chip { transform: scale(1.12); }

/* ============================================================ bottom strip: my cards + timer | my chips */
#me { display: flex; align-items: stretch; gap: var(--sp-3); padding: 8px calc(14px + var(--sa-r)) calc(10px + var(--sa-b)) calc(14px + var(--sa-l)); background: var(--me-bg); flex: 0 0 auto; position: relative; z-index: 2; min-height: 72px; }
#myleft { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
#myinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; gap: 3px; }
#myinfo .nm .crown { width: 15px; height: 15px; margin-left: 5px; vertical-align: -2px; color: var(--gold); }
#myinfo .nm { font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#myinfo .chips { font-size: var(--fs-2xl); font-weight: 800; color: var(--gold); line-height: 1; letter-spacing: -.02em; text-shadow: var(--num-shadow); }
#myinfo .chips small { font-family: var(--font); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-left: 5px; letter-spacing: 0; text-shadow: none; }
#myinfo .handrow { display: flex; align-items: center; justify-content: flex-end; gap: 8px; max-width: 100%; }
#myinfo .hand { flex: 0 1 auto; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); min-height: 18px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the blinds by the info button ("5/10", a tournament "Lvl 3 · 50/100 · 4:12"): tiny and muted; it gives way first,
   the hand name ("Full House", "Folded · would have: Flush") keeps its room and its accent */
#myinfo .meta { flex: 0 1000 auto; min-width: 0; font-size: var(--fs-2xs); font-weight: 600; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#myinfo .meta:empty { display: none; }
#myinfo .hand.weak { color: var(--text-2); font-weight: 550; }
#myinfo .hand.bad { color: var(--danger); }
#myinfo .mybet { font-size: var(--fs-xs); color: var(--muted); min-height: 1.25em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 'Bet 10' appearing must not push the table up */
#infoBtn { position: relative; flex: 0 0 auto; width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--muted); display: grid; place-items: center; }
#infoBtn svg { width: 22px; height: 22px; }
#infoBtn::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
#topup { display: none; flex: 0 0 auto; padding: 0 12px; min-height: 30px; font-size: var(--fs-xs); font-weight: 650; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); white-space: nowrap; position: relative; }
#topup::after { content: ''; position: absolute; inset: -7px -2px; }
#topup.on { display: inline-flex; align-items: center; gap: 3px; padding-left: 8px; font-family: var(--font-num); }
#topup svg { width: 14px; height: 14px; }

/* ============================================================ poker */
/* my hole cards: a little shorter than a full card (1.3 : 1, the face is cropped top and bottom, never squeezed) and
   held nearly upright with a clear 10 px gap between them, so each one reads as its own card */
#mycards { --hc-h: 1.3; position: relative; width: calc(var(--cw-lg) * 2 + 14px); height: calc(var(--cw-lg) * var(--hc-h) + 12px); cursor: pointer; flex: 0 0 auto; perspective: 900px; }
.hcw { position: absolute; top: 4px; width: var(--cw-lg); height: calc(var(--cw-lg) * var(--hc-h)); transform-origin: 50% 100%; }
#mycards .card { height: calc(var(--cw) * var(--hc-h)); }
.hcw.l { left: 1px; transform: rotate(-2.5deg); } .hcw.rt { left: calc(var(--cw-lg) + 13px); transform: rotate(2.5deg); }
.hc { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--out); }
.hc .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hc .side.face { transform: rotateY(180deg); }
.hc .side > .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 22px -8px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .3); }
#mycards.peek .hc { transform: rotateY(180deg); }
.hcw.rt .hc { transition-delay: .05s; }
/* Folded: dim the faces, never the flipping container — a filter on the container flattens the 3D context and the flip stops working. */
#mycards.dead .side > .card { filter: grayscale(.75) brightness(.55); }
.hc.win .side.face .card { box-shadow: 0 0 0 2.5px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 80%, transparent); }
#mycards.dealt .hcw.l { animation: hcDealL .55s var(--out) both; }
#mycards.dealt .hcw.rt { animation: hcDealR .55s var(--out) .09s both; }
@keyframes hcDealL { from { transform: translate(70px, -160px) rotate(-28deg); opacity: 0 } to { transform: rotate(-2.5deg); opacity: 1 } }
@keyframes hcDealR { from { transform: translate(20px, -160px) rotate(22deg); opacity: 0 } to { transform: rotate(2.5deg); opacity: 1 } }
#peekhint { opacity: 0; transition: opacity .3s; }
#peekhint.on { opacity: 1; animation: breathe 2.6s ease-in-out 3; }
#peekhint { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; text-align: center; font-size: var(--fs-2xs); font-weight: 650; color: var(--text); pointer-events: none; background: rgba(0, 0, 0, .62); padding: 3px 9px; border-radius: var(--r-pill); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); z-index: 2; }
#community { display: flex; gap: 7px; justify-content: center; perspective: 700px; }
#pot { min-height: 32px; }
#pot.idle { visibility: hidden; }
#board.poker .midslot, #board.teenpatti .midslot { grid-template-rows: 38px; }
/* the street is printed on the felt, like a dealer's call */
#status.street { font: 600 var(--fs-xs)/18px var(--font); letter-spacing: .02em; color: color-mix(in srgb, var(--gold) 70%, var(--text-2)); font-variant-numeric: tabular-nums; }

/* ============================================================ blackjack */
#bjDealer, #bjMine { --cw: clamp(34px, 8vh, var(--cw-lg)); }
#bjDealer .card.lg, #bjMine .card.lg { --cw: clamp(34px, 8vh, var(--cw-lg)); }
#bjMine.two, #bjMine.two .card.lg { --cw: clamp(30px, 6.5vh, calc(var(--cw-lg) * .82)); }
#board.blackjack #bjDealer { order: 0; } #board.blackjack .rules.felt { order: 1; } #board.blackjack .midslot { order: 2; } #board.blackjack #bjMine { order: 3; } #board.blackjack #status { order: 4; min-height: 18px; } #board.blackjack #quip { order: -1; }
#bjDealer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#bjDealer .lbl, .bjhand .lbl, #hbDealer .lbl { font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); display: flex; align-items: center; gap: 6px; height: 22px; }
#bjDealer .fanhand, #bjMine .bjhand .fanhand { min-height: calc(var(--cw) * 1.4 + var(--cw-lg) * .12); } /* card + the fan's top padding */
.tot { display: inline-block; min-width: 26px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--tot-bg); border: 1px solid var(--tot-br); color: var(--text); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0; text-align: center; line-height: 1.1; }
.tot.bust { background: color-mix(in srgb, var(--danger) 28%, transparent); color: #ffc2bd; border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.tot.bj { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.tot.sm { font-size: 9.5px; padding: 1px 5px; min-width: 18px; }
.tot:empty { display: none; }
#bjMine { display: flex; gap: 10px; justify-content: center; align-items: flex-end; flex-wrap: nowrap; max-width: 100%; }
.bjhand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px 6px; border-radius: var(--r-lg); border: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.bjhand.live { border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: rgba(0, 0, 0, .16); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--gold) 35%, transparent); }
.bjhand.done { opacity: .86; }
.bjhand .out { font-size: var(--fs-sm); font-weight: 800; min-height: 16px; line-height: 16px; }
.out.win, .out.blackjack { color: var(--accent); } .out.lose, .out.bust { color: var(--danger); } .out.push { color: var(--text-2); }
.bjhand.idle { border-color: transparent; box-shadow: none; background: none; }
.bjhand .lbl, .bjhand .out { transition: opacity .25s; }
.bjhand.idle .lbl, .bjhand.idle .out { opacity: 0; }
#bjBetRow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#bjBetRow .sqi { flex: 0 0 52px; width: 52px; padding: 0; display: grid; place-items: center; }
#bjBetRow .sqi svg { width: 20px; height: 20px; }
#bjBetRow .pill { font-size: var(--fs-md); padding: 0 16px 0 12px; min-height: 52px; min-width: 84px; justify-content: center; }
#bjBetRow button.primary { flex: 1; padding: 14px 8px; min-height: 52px; font-size: var(--fs-lg); font-weight: 700; border-radius: var(--r-lg); }
#bjBetRow .ctl { min-height: 52px; padding: 0 16px; border-radius: var(--r-lg); }
.seat .bjmini { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.seat .bjmini .fanhand .card + .card { margin-left: calc(var(--cw) * -.4); }
#bjShoe { position: absolute; right: 22px; top: 18px; opacity: .92; pointer-events: none; transform: rotate(8deg); }
.livemini { display: flex; align-items: center; gap: 3px; border-radius: 6px; padding: 1px 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 75%, transparent); }
/* other players' hands: just the top half of each card (rank + suit) */
.seat .crop { overflow: hidden; height: calc(var(--cw-sm) * .74); display: flex; align-items: flex-start; }
#players.compact .seat .crop { height: calc(var(--cw-xs) * .74); }
body[data-game="blackjack"] .seat .hole, body[data-game="homebj"] .seat .hole { min-height: calc(var(--cw-sm) * .74); }
body[data-game="blackjack"] #players.compact .seat .hole, body[data-game="homebj"] #players.compact .seat .hole { min-height: 15px; margin-top: 2px; align-items: center; }
#players.tight .fanhand.sm .card + .card { margin-left: calc(var(--cw) * -.5); }
#players.tight .tot.sm { font-size: 8px; padding: 1px 3px; min-width: 14px; }

/* ---- panels: every action panel lives in the same grid cell; the slot is as tall as the tallest panel ---- */
.panel { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .26s var(--out), visibility 0s .26s; }
.panel.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .22s ease .06s, transform .32s var(--spring) .06s; }
.row.panel { display: flex; } /* panels keep their layout while hidden so the slot keeps its size */

/* ============================================================ Home 21: the dealer's hand with the deck beside it */
#board.homebj #hbTop { order: 0; } #board.homebj .midslot { order: 1; } #board.homebj #hbMine { order: 3; } #board.homebj .rtimer { order: 4; } #board.homebj #status { order: 5; min-height: 18px; } #board.homebj #quip { order: -1; }
#hbTop { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
#hbDealer { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: calc(var(--cw-lg) * 1.7); }
#hbDealer, #hbMine { --cw: clamp(34px, 8vh, var(--cw-lg)); }
#hbDealer .card.lg, #hbMine .card.lg { --cw: clamp(34px, 8vh, var(--cw-lg)); }
#hbDealer .fanhand, #hbMine .bjhand .fanhand { min-height: calc(var(--cw) * 1.4 + var(--cw-lg) * .12); }
#hbMine .bjhand .lbl { height: 22px; }
#hbDeck { --cw-lg: clamp(34px, 8vh, 58px); position: relative; padding: 0; min-height: 0; background: none; box-shadow: none; border-radius: calc(var(--cw-lg) * .11); width: var(--cw-lg); height: calc(var(--cw-lg) * 1.4); margin-bottom: 2px; }
#hbDeck::after { content: ''; position: absolute; inset: -10px; }
#hbDeck .deck { position: absolute; inset: 0; }
#hbDeck:disabled { opacity: .55; cursor: default; }
#hbDeck .glow { position: absolute; inset: -6px; border-radius: calc(var(--cw-lg) * .16); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gold) 85%, transparent), 0 0 20px color-mix(in srgb, var(--gold) 45%, transparent); opacity: 0; transition: opacity .25s; pointer-events: none; }
#hbDeck.ready .glow { opacity: 1; animation: deckPulse 1.6s ease-in-out infinite; }
@keyframes deckPulse { 50% { opacity: .45; } }
#hbDeck.tapped .deck { animation: deckTap .2s ease-out; }
@keyframes deckTap { 40% { transform: translateY(2px) scale(.96); } }
/* the cue is a sentence (words + <b> names): a block, not a flex row, so spaces survive */
#hbCue { display: block !important; font-size: var(--fs-sm); color: var(--text-2); min-height: 18px; text-align: center; padding: 0 12px; }
#hbCue b { color: var(--gold); font-weight: 700; }
.cardfly { position: fixed; z-index: 60; pointer-events: none; --cw: 26px; will-change: transform, opacity; }
.seat .dtag { font-size: 9.5px; font-weight: 800; color: var(--gold-ink); background: var(--gold); border-radius: var(--r-pill); padding: 0 8px; height: 14px; line-height: 14px; align-self: center; }
.seat.isdealer .av { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.seat.target .av { box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 16px rgba(255, 255, 255, .18); }
#hbDeal button, #hbAct button { flex: 1; }

/* ============================================================ roulette: a felt table with a wood rail */
#board.roulette #status { min-height: 18px; flex: 0 0 auto; }
#board.roulette { justify-content: flex-start; padding: 4px calc(10px + var(--sa-r)) 6px calc(10px + var(--sa-l)); gap: 6px; }
#rlTable { --felt-a: var(--felt-1); --felt-b: var(--felt-3); position: relative; width: 100%; max-width: 560px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 28px;
  background: var(--grain), radial-gradient(ellipse 80% 70% at 50% 30%, var(--felt-a), var(--felt-b) 92%);
  box-shadow: inset 0 0 0 1.5px var(--rail-line), inset 0 0 50px rgba(0, 0, 0, .32), 0 0 0 7px var(--rail-2), 0 0 0 8px var(--rail-1), 0 18px 44px -14px rgba(0, 0, 0, .8); }
#rlWheelWrap { display: flex; align-items: center; gap: 14px; justify-content: center; position: relative; z-index: 3; }
#rlWheel { position: relative; width: 120px; height: 120px; flex: 0 0 auto; transform-origin: 50% 50%; transition: transform .7s var(--out); will-change: transform; }
/* the wheel: static bowl · rotor (one composited layer, rotated) · static light · ball, shadow, streak (transforms only) */
#rlWheel .rw-l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
#rlWheel .rw-plane, #rlWheel .rw-skirt { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
#rlWheel .rw-skirt { border-radius: 50%; background: radial-gradient(closest-side, #2a170b 0, #3d2413 86%, #1a0e06 97%, rgba(0, 0, 0, 0) 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
#rlWheel .rw-rotor { will-change: transform; backface-visibility: hidden; }
#rlWheel .rw-rotor svg { width: 100%; height: 100%; display: block; }
#rlWheel .rw-rotor .r { fill: var(--rl-red); } #rlWheel .rw-rotor .k { fill: var(--rl-black); } #rlWheel .rw-rotor .g { fill: var(--rl-green); }
#rlWheel .rw-rotor text { font: 700 3.25px var(--font-num); fill: #f7f1e3; text-anchor: middle; dominant-baseline: central; letter-spacing: -.02px; }
#rlWheel .rw-ball, #rlWheel .rw-bsh, #rlWheel .rw-trail { position: absolute; left: 48.15%; top: 48.15%; width: 3.7%; height: 3.7%; border-radius: 50%; will-change: transform, opacity; pointer-events: none; }
#rlWheel .rw-ball { background: radial-gradient(circle at 36% 31%, #fff 0, #fbf9f4 16%, #e3ded3 45%, #a9a398 78%, #6f6a61 100%); }
#rlWheel .rw-bsh { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0)); }
#rlWheel .rw-trail { background: linear-gradient(90deg, rgba(255, 252, 244, .9), rgba(255, 252, 244, .38) 45%, rgba(255, 252, 244, 0)); opacity: 0; }
#rlSide { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 6px; min-width: 120px; flex: 1 1 auto; max-width: 250px; }
/* status, timer and the winning number cross-fade in one slot */
#rlSide .rslot { display: grid; align-items: center; min-height: 46px; }
#rlSide .rslot > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s; }
#rlSide .rslot > .on { opacity: 1; visibility: visible; transition: opacity .3s ease .12s; }
#rlSide .rslot .rtimer { display: flex; }
#rlSide .rtimer:not(.on) { visibility: hidden; }
#rlHist { display: flex; gap: 4px; flex-wrap: nowrap; height: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
#rlHist::-webkit-scrollbar { display: none; }
#rlHist .hnum { flex: 0 0 auto; scroll-snap-align: start; }
#rlHist .hnum.last { box-shadow: 0 0 0 1.5px var(--gold-hi, #f3c75f); } /* the newest spin */
/* soft fades tell you there is more to swipe, on whichever side has more */
#rlHist.more { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
#rlHist.back.more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent); }
#rlHist.back:not(.more) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.hnum { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 var(--fs-2xs)/1 var(--font-num); color: #fff; border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .4); }
.hnum.red { background: var(--rl-red); } .hnum.black { background: var(--rl-black); } .hnum.green { background: var(--rl-green); }
.hnum.big { width: 46px; height: 46px; font-size: var(--fs-lg); box-shadow: 0 0 0 3px rgba(255, 255, 255, .2), 0 6px 18px rgba(0, 0, 0, .45); animation: pop .55s var(--spring); }
#rlStatus { font-size: var(--fs-sm); font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rlStatusRow { display: flex; flex-direction: column; gap: 6px; }
#rlResult { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 750; color: #f6f1e4; }
#rlResult .nomore { color: var(--gold); font-size: var(--fs-sm); font-weight: 700; }
#rlFair { min-height: 30px; }
#rlHist, #rlStats { cursor: pointer; }
#rlStats { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); min-width: 0; }
#rlStats:active { transform: scale(.98); }
.rlbar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; gap: 1px; background: rgba(255, 255, 255, .08); }
.rlbar i { display: block; height: 100%; } .rlbar i.red { background: var(--rl-red); } .rlbar i.green { background: var(--rl-green); } .rlbar i.black { background: #4a515f; }
.rlsplit { display: flex; justify-content: space-between; gap: 8px; font: 600 var(--fs-2xs)/1.2 var(--font-num); font-variant-numeric: tabular-nums; color: #e6dfcb; white-space: nowrap; overflow: hidden; }
.rlhc { display: flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: #cfc8b4; white-space: nowrap; overflow: hidden; }
.rlhc .k { font-weight: 650; margin-right: 1px; } .rlhc .k ~ .k { margin-left: 8px; }
.rlhc .hnum { width: 20px; height: 20px; font-size: 9px; }
/* the stats sheet */
.rlboard { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; padding: 10px; border-radius: var(--r-md); background: var(--sunk-2); box-shadow: inset 0 0 0 1px var(--panel-br); margin: 4px 0; }
.rlboard .hnum { width: auto; height: auto; aspect-ratio: 1; font-size: clamp(9px, 2.6vw, 12px); }
.rlrows { display: flex; flex-direction: column; margin: 4px 0; }
.rlrows > * { display: flex; justify-content: space-between; gap: 12px; padding: 8px 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rlrows > * + * { box-shadow: 0 -1px 0 var(--panel-br); }
.rlhc.big { gap: 6px; font-size: var(--fs-sm); padding: 6px 4px; flex-wrap: wrap; white-space: normal; color: var(--text-2); }
.rlhc.big .hnum { width: 30px; height: 30px; font-size: var(--fs-xs); }
.fairpill { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; min-height: 30px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); color: #f1ead6; font-size: var(--fs-2xs); font-weight: 650; box-shadow: none; max-width: 100%; white-space: nowrap; overflow: hidden; }
.fairpill b { flex: 0 0 auto; } .fairpill .mono { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fairpill .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #b9c4bc; font-weight: 500; }
.fairpill .lock { width: 15px; height: 15px; flex: 0 0 auto; color: var(--gold); }
.fairpill.ok .lock { color: var(--accent); } .fairpill.bad .lock { color: var(--danger); }
.fairpill.ok { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fairpill.bad { border-color: color-mix(in srgb, var(--danger) 60%, transparent); background: color-mix(in srgb, var(--danger) 15%, transparent); }
.fairpill.locked { border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.fairbox { margin-top: 10px; padding: 12px; border-radius: var(--r-md); background: var(--fair-bg); border: 1px solid var(--panel-br); font-size: var(--fs-sm); }
.fairbox p { margin: 6px 0; color: var(--text-2); }
.fairbox .kv { display: grid; grid-template-columns: 64px 1fr; gap: 6px; align-items: start; margin: 4px 0; }
.fairbox .kv span { color: var(--muted); font-size: var(--fs-2xs); padding-top: 3px; }
.fairbox code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-all; color: var(--text); user-select: text; -webkit-user-select: text; }
/* the layout grid: numbers painted on felt, ivory lines, red/black fills. Placement uses --r/--c so the same
   cells flow into the portrait (vertical) or landscape (horizontal) arrangement. */
#rlLayout { display: grid; gap: 3px; flex: 1 1 auto; min-height: 0; width: 100%; transition: opacity .4s ease;
  grid-template-columns: 34px 30px repeat(3, 1fr); grid-template-rows: minmax(20px, auto) repeat(12, minmax(20px, 1fr)) minmax(20px, auto); }
.rc { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1.5px solid rgba(246, 240, 225, .5); font: 750 var(--fs-sm)/1 var(--font-num); color: #faf6ec; cursor: pointer; background: rgba(0, 0, 0, .14); min-height: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .12s var(--spring); }
.rc > span:first-child { pointer-events: none; }
.rc:active { transform: scale(.96); }
.rc.red { background: linear-gradient(180deg, #cf3a42, var(--rl-red)); } .rc.black { background: linear-gradient(180deg, #2c313c, var(--rl-black)); } .rc.zero { background: linear-gradient(180deg, #2a9a5c, var(--rl-green)); }
.rc.num { grid-row: calc(var(--r) + 1); grid-column: calc(var(--c) + 2); }
.rc.zero { grid-row: 1; grid-column: 3 / 6; }
.rc.colb { grid-row: 14; grid-column: calc(var(--c) + 2); font-size: var(--fs-2xs); }
.rc.dz { grid-column: 2; grid-row: calc(2 + (var(--d) - 1) * 4) / span 4; }
.rc.ev { grid-column: 1; grid-row: calc(2 + var(--i) * 2) / span 2; }
.rc.out { font-family: var(--font); font-size: var(--fs-2xs); font-weight: 700; background: rgba(0, 0, 0, .14); }
.rc.dz > span:first-child, .rc.ev > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.rc.out.red > span:first-child, .rc.out.black > span:first-child { width: 13px; height: 13px; border-radius: 3px; transform: rotate(45deg); writing-mode: horizontal-tb; }
.rc.out.red > span:first-child { background: var(--rl-red); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); } .rc.out.black > span:first-child { background: #343a46; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
/* tap zones on the lines between numbers (split / corner / street / six line) */
.rc .z { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; }
.rc .z.sp1 { right: -9px; top: 12%; width: 18px; height: 76%; }
.rc .z.sp3 { bottom: -8px; left: 12%; width: 76%; height: 16px; }
.rc .z.cr { right: -9px; bottom: -8px; width: 18px; height: 16px; z-index: 3; }
.rc .z.st { left: -9px; top: 12%; width: 18px; height: 76%; }
.rc .z.ln { left: -9px; bottom: -8px; width: 18px; height: 16px; z-index: 3; }
.rc .z.z01 { left: 12%; bottom: -8px; width: 22%; height: 16px; } .rc .z.z02 { left: 39%; bottom: -8px; width: 22%; height: 16px; } .rc .z.z03 { left: 66%; bottom: -8px; width: 22%; height: 16px; }
.rc.hot { box-shadow: 0 0 0 2.5px var(--gold), 0 0 18px color-mix(in srgb, var(--gold) 70%, transparent); z-index: 1; }
/* chip stacks on a spot */
.stack { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.rc .z .stack { left: 50%; top: 50%; }
.rchip { position: absolute; left: -12px; top: calc(-12px - var(--k, 0) * 3px); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 9px/1 var(--font-num); color: var(--ink, #111); background: radial-gradient(circle, var(--c, var(--gold)) 0 54%, rgba(255, 255, 255, .9) 55% 66%, var(--c, var(--gold)) 67% 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .18); }
.rchip.drop { animation: chipDrop .3s var(--spring); } /* only the chip that changed drops in */
.rchip::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .85) 0 18deg, transparent 18deg 60deg); -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 86%, transparent 87%); mask: radial-gradient(circle, transparent 0 60%, #000 61% 86%, transparent 87%); }
.stack.mine .rchip:last-child { outline: 2px solid #fff; outline-offset: 1px; }
@keyframes chipDrop { from { transform: translateY(-14px) scale(1.3); opacity: 0 } }
#rlCtl { display: flex; gap: 6px; align-items: stretch; }
#rlCtl .chiprow { flex: 1; min-width: 0; }
#rlCtl button.ctl { flex: 0 0 auto; padding: 8px 12px; min-height: 52px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
#rlCtl button.ready { min-width: 84px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#rlCtl button.ready svg { width: 0; height: 18px; opacity: 0; transition: width .25s var(--out), opacity .2s; }
#rlCtl button.ready.isready { color: var(--accent); } #rlCtl button.ready.isready svg { width: 18px; opacity: 1; }
#rlCtl button.ico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#rlCtl button.ico svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 480px) { #rlCtl button.ico { width: 46px; padding: 0; } #rlCtl button.ico span { display: none; } }
#rlLayout.locked .rc { pointer-events: none; }
#rlLayout.locked { opacity: .9; }
/* while the ball is in play the wheel takes the stage: it grows over the (locked, dimmed) layout — transform only */
#board.roulette.stage #rlLayout, #board.roulette.stage #rlTrackBox, #board.roulette.stage #rlViewBar { opacity: .22; }
#board.roulette.stage #rlWheel { transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(var(--ss, 1)); }

@media (max-height: 700px) and (max-width: 899px) and (orientation: portrait) {
  #board.roulette { padding-top: 2px; padding-bottom: 4px; }
  #rlTable { padding: 7px; gap: 5px; border-radius: 20px; }
  #rlWheel { width: 72px; height: 72px; }
  #rlWheelWrap { gap: 10px; }
  #rlSide { gap: 4px; } #rlSide .rslot { min-height: 34px; } #rlSide .rtimer { width: 150px; } .hnum.big { width: 34px; height: 34px; font-size: var(--fs-md); }
  #rlHist { height: 20px; } #rlHist .hnum { width: 20px; height: 20px; font-size: 9px; }
  #rlFair { display: none; } #rlSide .rlsplit { display: none; } #rlStats { padding: 5px 7px; }
  body[data-game="roulette"] #myinfo .mybet { display: none; }
  #rlLayout { gap: 2px; grid-template-rows: minmax(18px, auto) repeat(12, minmax(18px, 1fr)) minmax(18px, auto); } .rc { min-height: 18px; font-size: var(--fs-xs); border-width: 1px; } .rchip { width: 20px; height: 20px; left: -10px; top: calc(-10px - var(--k, 0) * 3px); font-size: 8px; }
}
/* portrait tablets: bigger wheel and cells */
@media (min-width: 700px) and (orientation: portrait) {
  #rlTable { max-width: 660px; padding: 18px 16px 14px; gap: 12px; }
  #rlWheel { width: clamp(170px, 22vh, 240px); height: clamp(170px, 22vh, 240px); }
  #rlLayout { grid-template-columns: 50px 44px repeat(3, 1fr); gap: 4px; }
  .rc { font-size: var(--fs-md); }
}
/* landscape (tablets, laptops and phones on their side): wheel on the left, the classic horizontal layout on the right */
@media (orientation: landscape) and (min-width: 700px) {
  #board.roulette { padding: 6px calc(16px + var(--sa-r)) 8px calc(16px + var(--sa-l)); justify-content: center; }
  #rlTable { max-width: 1120px; flex: 0 1 auto; height: 100%; max-height: 520px; flex-direction: row; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 40px; }
  #rlWheelWrap { flex-direction: column; flex: 0 0 auto; gap: 10px; }
  #rlWheel { width: clamp(150px, 32vh, 260px); height: clamp(150px, 32vh, 260px); }
  #rlSide { max-width: 260px; min-width: 200px; justify-items: center; text-align: center; }
  #rlSide .rslot { justify-items: center; }
  #rlHist { justify-content: flex-start; } /* a scroller must start at the newest number, not centre */
  #rlLayout { flex: 1 1 auto; align-self: stretch; height: auto; max-height: 400px; margin: auto 0; grid-template-columns: 44px repeat(12, 1fr) 54px; grid-template-rows: repeat(3, minmax(30px, 1fr)) minmax(30px, 46px) minmax(30px, 46px); gap: 4px; }
  .rc { font-size: var(--fs-md); }
  .rc.num { grid-column: calc(var(--r) + 1); grid-row: calc(4 - var(--c)); }
  .rc.zero { grid-column: 1; grid-row: 1 / 4; }
  .rc.colb { grid-column: 14; grid-row: calc(4 - var(--c)); }
  .rc.dz { grid-row: 4; grid-column: calc(2 + (var(--d) - 1) * 4) / span 4; }
  .rc.ev { grid-row: 5; grid-column: calc(2 + var(--i) * 2) / span 2; }
  .rc.dz > span:first-child, .rc.ev > span:first-child { writing-mode: horizontal-tb; transform: none; }
  .rc.out.red > span:first-child, .rc.out.black > span:first-child { transform: rotate(45deg); }
  .rc .z.sp1 { right: 12%; top: -8px; width: 76%; height: 16px; }
  .rc .z.sp3 { right: -9px; top: 12%; width: 18px; height: 76%; bottom: auto; left: auto; }
  .rc .z.cr { right: -9px; top: -8px; bottom: auto; width: 18px; height: 16px; }
  .rc .z.st { left: 12%; top: auto; bottom: -8px; width: 76%; height: 16px; }
  .rc .z.ln { left: auto; right: -9px; bottom: -8px; width: 18px; height: 16px; }
  .rc .z.z01 { left: auto; right: -8px; bottom: 6%; top: auto; width: 16px; height: 22%; } .rc .z.z02 { left: auto; right: -8px; top: 39%; bottom: auto; width: 16px; height: 22%; } .rc .z.z03 { left: auto; right: -8px; top: 6%; bottom: auto; width: 16px; height: 22%; }
}

/* ============================================================ motion bits */
.chipfly { position: fixed; width: 18px; height: 18px; border-radius: 50%; z-index: 7; pointer-events: none; transition: transform .6s cubic-bezier(.3, .7, .3, 1), opacity .6s; background: radial-gradient(circle, var(--gold-hi) 0 22%, var(--gold) 23% 38%, var(--gold-2) 39% 47%, var(--gold) 48% 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, .5); will-change: transform; }
.chipfly::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .9) 0 20deg, transparent 20deg 60deg); -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58%); mask: radial-gradient(circle, transparent 0 57%, #000 58%); }
.card.arrive { animation: arrive .42s var(--out) both; animation-delay: calc(var(--i, 0) * 120ms); will-change: transform, opacity; z-index: 2; }
@keyframes arrive { from { transform: translate(var(--fx, 0px), var(--fy, -48px)) rotate(-14deg) scale(.72); opacity: 0 } 18% { opacity: 1 } 82% { transform: translate(0, 1px) rotate(.6deg) scale(1.01) } }
.card.flipA { animation: flipA .15s ease-in both; will-change: transform; }
.card.flipB { animation: flipB .22s var(--out) both; will-change: transform; }
@keyframes flipA { to { transform: rotateY(90deg) scale(1.04) } }
@keyframes flipB { from { transform: rotateY(-90deg) scale(1.04) } }
.card.leave { animation: leave .36s cubic-bezier(.4, 0, .6, 1) both; animation-delay: calc(var(--i, 0) * 50ms); pointer-events: none; }
@keyframes leave { to { transform: translateY(-26px) scale(.86); opacity: 0 } }
.deck { position: relative; flex: 0 0 auto; width: var(--cw); height: calc(var(--cw) * 1.4); }
.deck.sm { --cw: var(--cw-sm); } .deck.md { --cw: var(--cw-md); } .deck.lg { --cw: var(--cw-lg); }
.deck .card { position: absolute; left: 0; top: 0; transform: translate(calc(var(--k) * -1.5px), calc(var(--k) * -1.5px)); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* ---- bee mini-game (poker) ---- */
.bee { position: fixed; left: 0; top: 0; z-index: 6; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: none; align-items: center; justify-content: center; font-size: 38px; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.bee.on { display: flex; }
.bee .bz { display: block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 40px; line-height: 1; animation: buzz .12s infinite alternate; } /* the emoji bee: real-looking and cartoony (owner wanted it back, Nov 2) */
@keyframes buzz { from { transform: translateY(-2px) rotate(-6deg) } to { transform: translateY(2px) rotate(6deg) } }
.bee.flip .bz { animation: buzzf .12s infinite alternate; }
@keyframes buzzf { from { transform: scaleX(-1) translateY(-2px) rotate(6deg) } to { transform: scaleX(-1) translateY(2px) rotate(-6deg) } }
.bee.pop { animation: beepop .45s ease forwards; pointer-events: none; }
@keyframes beepop { 0% { transform: scale(1) } 40% { transform: scale(1.6) } 100% { transform: scale(0); opacity: 0 } }
.beehint { display: inline-flex; align-items: center; gap: 6px; } .beehint svg { width: 20px; height: 20px; flex: 0 0 auto; }
.rk .yours { color: var(--accent); font-size: var(--fs-2xs); font-weight: 650; margin-left: 6px; letter-spacing: .02em; }

/* ============================================================ sheets & dialogs */
#infobox, #sharebox, #hostbox, #stylebox { position: fixed; inset: 0; background: var(--scrim); display: none; z-index: 8; animation: fadeIn .22s ease both; }
#infobox, #stylebox { align-items: flex-end; justify-content: center; }
#sharebox, #hostbox { align-items: center; justify-content: center; padding: 20px; }
#infobox .box, #sharebox .box, #hostbox .box, #stylebox .box { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); }
#infobox .box, #stylebox .box { width: 100%; max-width: 560px; max-height: 88vh; max-height: calc(100dvh - 24px - var(--sa-t)); overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px var(--sp-4) calc(16px + var(--sa-b)); gap: var(--sp-2); animation: sheetIn .38s var(--spring) both; overscroll-behavior: contain; }
#infobox .grab, #stylebox .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--grab); margin: 2px auto 6px; flex: 0 0 auto; }
#infoHint { text-align: left; margin: 4px 2px 0; }
#infoClose { margin-top: 4px; }
#sharebox .box, #hostbox .box { width: 100%; max-width: 380px; animation: dlgIn .32s var(--spring) both; }
#sharebox .hint, #hostbox .hint { text-align: left; margin: -4px 0 0; }
.closing { animation: fadeOut .2s ease both !important; }
.closing .box { animation: dlgOut .2s ease both !important; }
#infobox.closing .box, #stylebox.closing .box { animation: sheetOut .22s var(--in) both !important; }
/* table style picker: a short sheet so the table stays visible above it while you try styles */
#stylebox { background: color-mix(in srgb, var(--scrim) 45%, transparent); }
#stylebox .box { max-height: min(64vh, 560px); padding-bottom: calc(12px + var(--sa-b)); }
#stylebox .hint { text-align: left; margin: -4px 2px 2px; }
#styleList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 8px; overflow-y: auto; min-height: 0; flex: 1 1 auto; padding: 2px; margin: 0 -2px; overscroll-behavior: contain; }
.sty { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; text-align: left; border-radius: var(--r-md); font-weight: 600; }
.sty .mini { position: relative; display: block; flex: 0 0 auto; height: 58px; border-radius: 10px; background: var(--a); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); }
.sty .mini i { position: absolute; left: 14%; right: 14%; top: 16%; bottom: 16%; border-radius: 999px; background: var(--b); box-shadow: 0 0 0 4px var(--c); }
.sty .mini b { position: absolute; left: 50%; bottom: 24%; width: 30%; height: 18%; transform: translateX(-50%); border-radius: 999px; background: var(--d); }
.sty .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px 2px; }
.sty .nm { font-size: var(--fs-sm); color: var(--text); }
.sty small { font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); line-height: 1.3; }
.sty .ok { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); opacity: 0; transform: scale(.6); transition: opacity .18s, transform .25s var(--spring); }
.sty.on { box-shadow: inset 0 0 0 2px var(--accent); }
.sty.on .ok { opacity: 1; transform: none; }
#styleClose { flex: 0 0 auto; }
/* the Settings row that opens it (sits under the Display swatches) */
#menu #settings .stylerow, #lobbyMenu #settings .stylerow { gap: 12px; }
#settings .stylerow .cur { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; }
#settings .stylerow .chev { width: 15px !important; height: 15px !important; opacity: .55 !important; margin-left: -6px; }
.sty.def .mini { background: linear-gradient(135deg, var(--a) 50%, #141816 50%); }
@keyframes fadeIn { from { opacity: 0 } } @keyframes fadeOut { to { opacity: 0 } }
@keyframes sheetIn { from { transform: translateY(100%) } } @keyframes sheetOut { to { transform: translateY(100%) } }
@keyframes dlgIn { from { opacity: 0; transform: translateY(12px) scale(.96) } } @keyframes dlgOut { to { opacity: 0; transform: scale(.97) } }
.rk { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: var(--r-sm); }
.rk + .rk { box-shadow: 0 -1px 0 var(--panel-br); }
.rk.cur { background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.rk .n { width: 18px; color: var(--muted); font: 700 var(--fs-xs)/1 var(--font-num); text-align: right; flex: 0 0 auto; }
.rk .t { flex: 1; min-width: 0; }
.rk .t b { display: block; font-size: var(--fs-md); font-weight: 650; }
.rk .t small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; display: block; margin-top: 1px; }
.rk .ex { display: flex; gap: 3px; flex: 0 0 auto; }
.rk .ex .card { --cw: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
#toast { position: fixed; top: calc(62px + var(--sa-t)); left: 50%; background: var(--danger-2); color: #fff; padding: 10px 18px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; z-index: 9; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); text-align: center;
  opacity: 0; visibility: hidden; transform: translate(-50%, -10px); transition: opacity .2s, transform .25s var(--out), visibility 0s .25s; pointer-events: none; }
#toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .35s var(--spring); }
#sharebox code { font: 800 38px/1.1 var(--font-num); letter-spacing: .2em; text-indent: .2em; text-align: center; display: block; color: var(--gold); padding: 12px 0 10px; border-radius: var(--r-md); background: var(--sunk-2); box-shadow: inset 0 0 0 1px var(--panel-br); user-select: text; -webkit-user-select: text; }
#shareUrl { font-size: var(--fs-sm); color: var(--text-2); }
#hostbox .pl { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--panel-br); }
#hostbox .pl > span:first-child { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hostbox .pl button { padding: 8px 12px; font-size: var(--fs-sm); min-height: 40px; }
#hostbox .pl { flex-wrap: wrap; } #hostbox .pl > span:first-child { flex: 1 1 96px; }
#hostbox .pl .hbtns { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* ---- roulette racetrack, colour chips and my-bets strip (structure comes from a parallel branch; these are the visuals) ---- */
#rlBets { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; transition: opacity .4s ease; }
#rlViewBar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
#rlViewBar .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#rlViewBar .seg button { min-height: 30px; padding: 0 14px; border-radius: var(--r-pill); background: transparent; box-shadow: none; font-size: var(--fs-xs); font-weight: 650; color: #e9e2cd; }
#rlViewBar .seg button.on { background: rgba(250, 246, 236, .94); color: #0f2a1c; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.nbstep { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: #e9e2cd; }
.nbstep b { min-width: 1.2em; text-align: center; font-family: var(--font-num); color: var(--gold); }
.nbstep button { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; font-size: 17px; line-height: 1; background: rgba(0, 0, 0, .28); }
#rlTrackBox { display: none; flex-direction: column; gap: 8px; min-height: 0; transition: opacity .3s; }
#rlBets.track #rlTrackBox { display: flex; } #rlBets.track #rlLayout { display: none; }
#rlTrackBox.closed { opacity: .55; } #rlTrackBox.closed * { pointer-events: none; }
#rlTrack { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
#rlTrack .tc { cursor: pointer; }
#rlTrack .tc polygon, #rlTrack .tc path { stroke: rgba(246, 240, 225, .55); stroke-width: .9; transition: fill .2s; }
#rlTrack .tc.red polygon, #rlTrack .tc.red path { fill: var(--rl-red); } #rlTrack .tc.black polygon, #rlTrack .tc.black path { fill: var(--rl-black); } #rlTrack .tc.green polygon, #rlTrack .tc.green path { fill: var(--rl-green); }
#rlTrack .tc text { fill: #faf6ec; font: 800 9px var(--font-num); pointer-events: none; }
#rlTrack .tc.cov polygon, #rlTrack .tc.cov path { fill: var(--gold); } #rlTrack .tc.cov text { fill: var(--gold-ink); }
#rlTrack .tc.mine polygon, #rlTrack .tc.mine path { stroke: var(--gold-hi); stroke-width: 2.2; }
#rlTrack .tc.win polygon, #rlTrack .tc.win path { fill: #fff; } #rlTrack .tc.win text { fill: #111; }
#rlTrack .ts { cursor: pointer; }
#rlTrack .ts > :not(text) { fill: rgba(0, 0, 0, .16); stroke: rgba(246, 240, 225, .5); stroke-width: .9; transition: fill .2s; }
#rlTrack .ts:hover > :not(text) { fill: rgba(255, 255, 255, .08); }
#rlTrack .ts text { fill: #f3eddb; font: 700 10px var(--font); pointer-events: none; }
#rlCalls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#rlCalls button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 7px 10px; min-height: 46px; text-align: left; border-radius: var(--r-sm); background: rgba(0, 0, 0, .24); box-shadow: inset 0 0 0 1px rgba(246, 240, 225, .28); color: #f3eddb; }
#rlCalls b { font-size: var(--fs-sm); font-weight: 700; } #rlCalls small { font: 600 var(--fs-2xs)/1.2 var(--font-num); font-variant-numeric: tabular-nums; color: #cfc8b4; }
.z.t012, .z.t023 { position: absolute; z-index: 3; }
@media (min-width: 700px) and (orientation: portrait), (min-width: 900px) and (min-height: 560px) and (orientation: landscape) {
  #rlViewBar .seg { display: none; }
  #rlBets #rlLayout { display: grid !important; } #rlTrackBox { display: flex !important; }
}
/* portrait tablets: track beside its call buttons, so the grid keeps most of the height */
@media (min-width: 700px) and (orientation: portrait) {
  #rlTrackBox { flex-direction: row; align-items: center; gap: 12px; flex: 0 0 auto; }
  #rlTrack { flex: 1 1 auto; min-width: 0; max-height: 17vh; }
  #rlCalls { flex: 0 0 200px; grid-template-columns: 1fr; gap: 5px; } #rlCalls button { min-height: 40px; padding: 5px 10px; }
  #rlBets #rlLayout { grid-template-rows: minmax(22px, auto) repeat(12, minmax(18px, 1fr)) minmax(22px, auto); }
}
/* phones: the stats keep to two slim lines and the grid compresses before it would ever overflow the table */
@media (max-width: 699px) {
  #rlSide .rlhc { display: none; }
  #rlStats { padding: 6px 8px; gap: 4px; }
  #rlViewBar .seg button { min-height: 28px; padding: 0 12px; }
  .nbstep button { width: 28px; height: 28px; }
  #rlBets #rlLayout { grid-template-rows: minmax(16px, auto) repeat(12, minmax(15px, 1fr)) minmax(16px, auto); }
  #rlBets .rc { min-height: 15px; }
  #rlBets.track #rlTrackBox { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 900px) and (min-height: 560px) and (orientation: landscape) {
  #rlBets { align-self: stretch; justify-content: center; }
  #rlBets #rlLayout { flex: 0 1 auto; max-height: min(400px, 44vh); margin: 0; }
  #rlTrackBox { flex-direction: row; align-items: center; gap: 12px; }
  #rlTrack { flex: 1 1 auto; min-width: 0; max-height: 19vh; }
  #rlCalls { flex: 0 0 230px; }
  body[data-game="roulette"] #players .seat .av { padding-block: 6px; }
}
/* colour chips: the chip selector holds real chips in my colour */
.chiprow .chipbtn { gap: 0; padding: 4px 2px; }
.rchip.solo { position: relative; left: auto; top: auto; width: 36px; height: 36px; font-size: 10.5px; color: var(--ink, #111); flex: 0 0 auto; animation: none; transition: transform .22s var(--spring), box-shadow .2s; }
.rchip.solo.xs { width: 12px; height: 12px; font-size: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.rchip.solo.xs::before { display: none; }
.chipbtn.on { background: color-mix(in srgb, var(--gold) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--gold); }
.chipbtn.on .rchip { transform: translateY(-3px); box-shadow: 0 0 0 2px #fff, 0 6px 10px -2px rgba(0, 0, 0, .55); }
.rchip { color: var(--ink, #111); }
.rchip.drop { animation: chipDrop .3s var(--spring); }
.stack.multi .rchip { left: calc(-12px + var(--k, 0) * 5px); }
/* my bets strip in the me-bar (roulette) */
body[data-game="roulette"] #myleft { flex: 1 1 auto; min-width: 0; justify-content: center; }
body[data-game="roulette"] #myinfo { flex: 0 0 auto; max-width: 52%; }
#rlMine { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 100%; cursor: pointer; }
#rlMine > :first-child { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; white-space: nowrap; }
#rlMine > :last-child { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; min-width: 0; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
#rlMine > :last-child::-webkit-scrollbar { display: none; }
#rlMine .pill, .bsrow .pill { flex: 0 0 auto; font-size: var(--fs-xs); padding: 3px 9px; gap: 5px; }
.bsrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 9px 4px; }
.bsrow + .bsrow { box-shadow: 0 -1px 0 var(--panel-br); }
.bsrow > b, .bsrow > span:first-of-type { font-weight: 650; margin-right: 4px; }

/* ---- roulette on phones: seats are a single scrollable row of name pills, so the layout always has room ---- */
@media (max-width: 899px), (max-height: 559px) {
  body[data-game="roulette"] #players { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 6px; padding-top: 4px; padding-bottom: 2px; scroll-padding-inline: 12px; }
  body[data-game="roulette"] #players::-webkit-scrollbar { display: none; }
  body[data-game="roulette"] #players .seat:first-child { margin-left: auto; } body[data-game="roulette"] #players .seat:last-child { margin-right: auto; }
  body[data-game="roulette"] #players .seat, body[data-game="roulette"] #players.compact .seat, body[data-game="roulette"] #players.tight .seat { width: auto; flex: 0 0 auto; max-width: 132px; }
  body[data-game="roulette"] #players .seat .av { display: flex; align-items: center; gap: 6px; min-height: 0; padding: 6px 11px 6px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); }
  body[data-game="roulette"] #players .seat .hole { order: -1; min-height: 0 !important; margin: 0; }
  body[data-game="roulette"] #players .seat .hole .chip { width: 11px !important; height: 11px !important; margin: 0 !important; }
  body[data-game="roulette"] #players .seat .nm { padding: 0; min-width: 0; }
  body[data-game="roulette"] #players .seat .ch { margin: 0; font-size: var(--fs-xs); }
  body[data-game="roulette"] #players .seat .act { height: 16px; margin-top: 3px; font-size: var(--fs-2xs); }
  body[data-game="roulette"] #players .seat .tag { font-size: 9px; padding: 2px 5px; }
  body[data-game="roulette"] #players .seat .crown { top: -7px; left: -3px; font-size: 11px; }
}

/* ============================================================ short phones */
@media (max-height: 700px) and (orientation: portrait) {
  #board .rules { display: none; }
  /* no room for a status line in the flow: it floats over the felt, shown only between rounds when it is all there is */
  #board.blackjack #status, #board.homebj #status { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  #board.blackjack.idle #status, #board.homebj.idle #status { opacity: 1; visibility: visible; transition: opacity .3s; }
  .bjhand { padding: 3px 8px; gap: 3px; } #bjDealer { gap: 3px; }
  #me { padding-top: 4px; padding-bottom: calc(6px + var(--sa-b)); min-height: 0; } #myinfo .chips { font-size: var(--fs-xl); } #myinfo { gap: 2px; }
  #players { padding-top: 2px; gap: 6px; } .seat .av { min-height: 0; }
  #board { padding: 10px 12px; } #board::before { border-radius: 26px; }
  #board.homebj #hbCue { font-size: var(--fs-xs); } #hbTop { gap: 12px; }
  .actrow button, #altRow button { min-height: 48px; padding: 12px 6px; }
  #bjBetRow .pill, #bjBetRow button.primary, #bjBetRow .ctl { min-height: 48px; }
  .chiprow button { min-height: 46px; }
  #rlCtl button.ctl { min-height: 46px; }
}

/* ============================================================ tablets & desktops: a real table
   Seats sit on the rail of an oval felt, the board is in the middle, and my cards + the action buttons
   form one dock below it. Seat positions come from --cx/--cy (unit circle, set by renderSeats). */
@media (min-width: 700px) {
  :root { --cw-md: 30px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 34px; }
  #top { padding-inline: calc(18px + var(--sa-l)) calc(14px + var(--sa-r)); }
  #tinfo .tt b { font-size: var(--fs-md); }
  .seat { width: 116px; }
  .seat .av { min-height: 92px; padding: 9px 6px 8px; border-radius: var(--r-lg); }
  .seat .tring { --tr-r: var(--r-lg); }
  :root { --cw-lg: clamp(60px, 9.2vh, 100px); --cw-sm: clamp(24px, 3.2vh, 32px); --cw-xs: clamp(20px, 2.6vh, 26px); }
  #players.compact .seat { width: 100px; } #players.compact .seat .av { min-height: 80px; }
  #players.tight .seat { width: 84px; } #players.tight .seat .nm { font-size: var(--fs-xs); }
  #actions { padding-inline: max(14px, calc((100% - 720px) / 2)); }
  #me { padding-inline: max(18px, calc((100% - 900px) / 2 + 18px)); }
  .pill { font-size: var(--fs-md); padding: 8px 18px 8px 13px; }
  #community { gap: 10px; }
}

/* the oval table: laptops / landscape tablets (wide) and portrait tablets (tall) */
@media (min-width: 900px) and (min-height: 560px), (min-width: 700px) and (min-height: 900px) {
  body:not([data-game="roulette"]) #game { display: none; }
  body:not([data-game="roulette"]) #game.on { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top" "table" "act" "me"; }
  body:not([data-game="roulette"]) #top { grid-area: top; }
  body:not([data-game="roulette"]) #players, body:not([data-game="roulette"]) #board { grid-area: table; }
  body:not([data-game="roulette"]) #actions { grid-area: act; }
  body:not([data-game="roulette"]) #me { grid-area: me; }
  body:not([data-game="roulette"]) #board { --pad-x: 92px; --pad-t: 74px; --pad-b: 70px; margin: 0; padding: calc(var(--pad-t) + 30px) calc(var(--pad-x) + 110px) calc(var(--pad-b) + 22px); overflow: visible; }
  body:not([data-game="roulette"]) #board::before { inset: var(--pad-t) var(--pad-x) var(--pad-b); border-radius: 999px;
    background: var(--grain), radial-gradient(ellipse 62% 58% at 50% 42%, var(--felt-hi) 0%, var(--felt-1) 32%, var(--felt-2) 64%, var(--felt-3) 100%);
    box-shadow: inset 0 0 0 2px var(--rail-line), inset 0 18px 60px rgba(0, 0, 0, .35), inset 0 -10px 40px rgba(0, 0, 0, .25),
      0 0 0 14px var(--rail-2), 0 0 0 15px var(--rail-1), 0 -2px 0 16px rgba(255, 255, 255, .05), 0 0 0 22px var(--rail-3), 0 30px 70px 10px rgba(0, 0, 0, .65); }
  body:not([data-game="roulette"]) #board::after { left: calc(var(--pad-x) + 15%); right: calc(var(--pad-x) + 15%); top: calc(var(--pad-t) + 4%); height: 40%; }
  /* the seats overlay: positioned around the rail */
  body:not([data-game="roulette"]) #players { position: relative; display: block; padding: 0; pointer-events: none; z-index: 3; --rx: calc(50% - var(--pad-x, 92px)); --ry: calc(50% - 64px); }
  body:not([data-game="roulette"]) #players .seat { position: absolute; left: calc(50% + var(--cx, 0) * (50% - 104px)); top: calc(50% + var(--cy, -1) * (50% - 76px)); transform: translate(-50%, -50%); pointer-events: auto; transition: left .45s var(--out), top .45s var(--out); }
  body:not([data-game="roulette"]) #players .seat .act { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; }
  .seat { width: 128px; }
  .seat .av { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avt nm" "avt ch" "hole hole"; column-gap: 8px; align-items: center; text-align: left; padding: 9px 10px 9px 9px; min-height: 0; border-radius: 20px; }
  .seat .avt { grid-area: avt; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 700 var(--fs-sm)/1 var(--font); color: #fff; background: radial-gradient(circle at 35% 30%, hsl(var(--h, 150) 45% 52%), hsl(var(--h, 150) 50% 30%)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .4); }
  .seat .nm { grid-area: nm; padding: 0; align-self: end; }
  .seat .ch { grid-area: ch; align-self: start; font-size: var(--fs-sm); }
  .seat .hole { grid-area: hole; margin-top: 7px; }
  .seat.empty .av { display: flex; min-height: 64px; text-align: center; }
  #players.compact .seat, #players.tight .seat { width: 120px; }
  #players.compact .seat .av, #players.tight .seat .av { padding: 8px 9px 8px 8px; font-size: var(--fs-sm); border-radius: 18px; }
  #players.compact .seat .ch, #players.tight .seat .ch { font-size: var(--fs-xs); }
  #players.compact .avt, #players.tight .avt { width: 32px; height: 32px; font-size: var(--fs-xs); }
  #players.compact .card.sm { --cw: var(--cw-sm); }
  #players.compact .tag, #players.tight .tag { font-size: var(--fs-2xs); padding: 3px 7px; }
  #players.compact .seat .act, #players.tight .seat .act { height: 20px; font-size: var(--fs-xs); }
  #players.tight .seat .act .amt { font-size: var(--fs-xs); }
  #players.compact .seat .tring, #players.tight .seat .tring { --tr-r: 18px; }
  #players.compact .tring .tn, #players.tight .tring .tn { right: -7px; bottom: -8px; min-width: 21px; height: 19px; line-height: 19px; font-size: var(--fs-2xs); }
  .seat .tring { --tr-r: 20px; }
  #players.compact .seat .crop { height: calc(var(--cw-sm) * .74); }
  #players .seat .hole { min-height: calc(var(--cw-sm) * 1.4); }
  body[data-game="blackjack"] #players .seat .hole, body[data-game="homebj"] #players .seat .hole { min-height: calc(var(--cw-sm) * .74); align-items: center; }
  body[data-game="roulette"] .seat .avt { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seatc, #888) 75%, #fff), var(--seatc, #888) 60%, color-mix(in srgb, var(--seatc, #888) 60%, #000)); color: #111; }
  body[data-game="roulette"] .seat .hole { display: none; }
  body[data-game="roulette"] #players { gap: 14px 12px; padding-top: 4px; }
  :root { --cw-lg: clamp(54px, 7.6vh, 86px); }
  #quip { top: calc(var(--pad-t, 0px) + 18px); }
  body[data-game="poker"] #quip { top: auto; bottom: calc(var(--pad-b, 0px) + 54px); } /* the top of the rail is a seat */
  body:not([data-game="roulette"]) .crest { bottom: calc(var(--pad-b, 0px) + 22px); }
  #bjShoe { right: calc(var(--pad-x, 0px) + 13%); top: calc(var(--pad-t, 0px) + 9%); }
  /* the dock */
  body:not([data-game="roulette"]) #me { background: none; padding-top: 6px; }
}
/* portrait tablets: a tall table; seats spread around the long sides */
@media (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  body:not([data-game="roulette"]) #board { --pad-x: 70px; --pad-t: 90px; --pad-b: 96px; padding-inline: calc(var(--pad-x) + 80px); }
  body:not([data-game="roulette"]) #players .seat { left: calc(50% + var(--cx, 0) * (50% - 84px)); top: calc(50% + var(--cy, -1) * (50% - 92px)); }
  :root { --cw-lg: clamp(60px, 7vh, 88px); }
  #actions { padding-inline: max(20px, calc((100% - 640px) / 2)); }
}
/* laptops & landscape tablets: the dock is one row — my cards and chips on the left, actions on the right */
@media (min-width: 900px) and (min-height: 560px) and (orientation: landscape) {
  body[data-game="roulette"] #game.on { display: grid; grid-template-columns: minmax(16px, 1fr) auto minmax(380px, 780px) minmax(16px, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top top top top" "seats seats seats seats" "table table table table" ". me act ."; }
  body[data-game="roulette"] #top { grid-area: top; } body[data-game="roulette"] #players { grid-area: seats; } body[data-game="roulette"] #board { grid-area: table; } body[data-game="roulette"] #actions { grid-area: act; } body[data-game="roulette"] #me { grid-area: me; background: none; }
  body[data-game="roulette"] #myinfo { max-width: none; min-width: 230px; } body[data-game="roulette"] #myleft { flex: 0 1 auto; }
  body:not([data-game="roulette"]) #game.on { grid-template-columns: minmax(16px, 1fr) auto minmax(380px, 640px) minmax(16px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top top top" "table table table table" ". me act ."; }
  #actions { padding: 6px 0 calc(14px + var(--sa-b)) 20px; align-self: end; }
  #me { padding: 6px 0 calc(14px + var(--sa-b)); min-height: 0; gap: 20px; flex-direction: row-reverse; }
  #myinfo { align-items: flex-start; text-align: left; justify-content: flex-end; min-width: 160px; }
  #myinfo .handrow { justify-content: flex-start; flex-direction: row-reverse; }
  #top { padding-top: calc(2px + var(--sa-t)); padding-bottom: 0; }
}
/* roulette on big screens: seats as a centred strip, table below, controls docked */

/* ============================================================ phones on their side: board left, controls right */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --cw-lg: 50px; --cw-sm: 19px; --cw-xs: 16px; --cw-md: 24px; --fs-2xl: 26px; }
  #game.on { display: grid; grid-template-columns: minmax(0, 1fr) calc(300px + var(--sa-r)); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top top" "seats act" "board act" "board me"; }
  #top { grid-area: top; padding-top: calc(2px + var(--sa-t)); padding-bottom: 0; }
  #players { grid-area: seats; padding: 2px 6px 0 calc(10px + var(--sa-l)); gap: 6px; flex-wrap: nowrap; justify-content: center; overflow: hidden; }
  #board { grid-area: board; margin: 4px 6px calc(8px + var(--sa-b)) calc(10px + var(--sa-l)); padding: 10px 14px; }
  #actions { grid-area: act; align-self: center; padding: 4px calc(12px + var(--sa-r)) 4px 6px; }
  #me { grid-area: me; background: none; padding: 4px calc(12px + var(--sa-r)) calc(8px + var(--sa-b)) 6px; min-height: 0; gap: 8px; }
  #myinfo .chips { font-size: var(--fs-xl); }
  .seat { width: 76px; } .seat .av { min-height: 0; padding: 4px 4px 4px; }
  #players.compact .seat { width: 64px; } #players.tight .seat { width: 54px; }
  .seat .act { height: 17px; margin-top: 3px; gap: 2px; } .seat .act .tag { font-size: 8.5px; padding: 2px 4px; } .seat .act .amt { font-size: 10px; } .seat .act .amt .chip { width: 9px; height: 9px; }
  .actrow button, #altRow button { min-height: 46px; padding: 10px 4px; font-size: var(--fs-md); }
  .actrow { gap: 6px; }
  #bjAct button, #hbAct button { font-size: var(--fs-sm); }
  .chiprow button { min-height: 44px; padding: 4px 2px; gap: 3px; } .chiprow button .chip { width: 18px; height: 18px; }
  #bjBetRow .pill, #bjBetRow button.primary, #bjBetRow .ctl { min-height: 46px; }
  #bjBetRow .pill { min-width: 64px; padding: 0 10px; }
  #bjBet #bjBetRow { margin-top: 6px !important; }
  #board .rules { display: none; }
  /* no room for a status line in the flow: it floats over the felt, shown only between rounds when it is all there is */
  #board.blackjack #status, #board.homebj #status { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  #board.blackjack.idle #status, #board.homebj.idle #status { opacity: 1; visibility: visible; transition: opacity .3s; }
  #bjDealer, #bjMine, #hbDealer, #hbMine, #bjDealer .card.lg, #bjMine .card.lg, #hbDealer .card.lg, #hbMine .card.lg { --cw: clamp(30px, 10.5vh, 46px); }
  #hbDeck { --cw-lg: clamp(30px, 10.5vh, 46px); }
  .bjhand { padding: 2px 8px; gap: 2px; } #bjDealer { gap: 2px; }
  .bjhand .out { min-height: 14px; line-height: 14px; font-size: var(--fs-xs); }
  #bjDealer .lbl, .bjhand .lbl, #hbDealer .lbl { height: 18px; }
  .midslot { min-height: 26px; }
  #board.blackjack, #board.homebj { gap: 2px; }
  #board::before { border-radius: 28px; }
  #bjShoe { right: 16px; top: 12px; }
  #raisePanel { left: auto; right: 0; width: calc(100% + 0px); }
  /* roulette sideways: the table fills the left, chips + buttons stack on the right */
  #board.roulette { margin: 0; padding: 2px 6px calc(6px + var(--sa-b)) calc(10px + var(--sa-l)); }
  #rlTable { height: 100%; max-height: none; padding: 8px 10px; gap: 10px; border-radius: 24px; }
  #rlWheel { width: clamp(80px, 26vh, 110px); height: clamp(80px, 26vh, 110px); }
  #rlSide { min-width: 0; max-width: 130px; } #rlSide .rtimer { width: 120px; } #rlFair { display: none; }

  #rlLayout { max-height: none; grid-template-columns: 30px repeat(12, 1fr) 40px; grid-template-rows: repeat(3, minmax(22px, 1fr)) minmax(22px, 34px) minmax(22px, 34px); gap: 3px; }
  .rc { font-size: var(--fs-xs); border-width: 1px; } .rchip { width: 20px; height: 20px; left: -10px; top: calc(-10px - var(--k, 0) * 3px); font-size: 8px; }
  #rlCtl { flex-wrap: wrap; } #rlCtl .chiprow { flex: 1 0 100%; } #rlCtl button.ctl { flex: 1; min-height: 44px; }
  #infobox .box { max-height: 94vh; }
}

/* Light: the game pill in the top bar and the turn halo read as crisp colour, not glow */

[data-theme="light"] .seat .av { box-shadow: 0 1px 2px rgba(40, 32, 20, .08); }
[data-theme="light"] #me .pill, [data-theme="light"] #actions .pill { box-shadow: none; }

/* ============================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .card.arrive, .card.deal { animation: none; }
}
/* colour-chip bits from the roulette branch */
.rchip.xs { width: 13px; height: 13px; font-size: 0; margin-top: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); } /* seat-strip colour swatch */
#rlTrack .rim { fill: rgba(0, 0, 0, .14); stroke: rgba(246, 220, 138, .4); stroke-width: 1.2; } /* the stadium behind the sections */
@media (min-width: 900px) { #rlMine { max-width: min(440px, 34vw); flex: 0 1 auto; } } /* never squeezes the chips / Done off the dock */
#rlMine .all { display: inline-flex; align-items: center; gap: 1px; color: var(--text-2); } #rlMine .all svg { width: 14px; height: 14px; }
#rlMine .who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #rlMine .who .rchip { margin: 0; }
/* narrow phones: five colour chips, undo, clear and Done must all fit on one row without overlapping */
@media (max-width: 430px) {
  #rlCtl { gap: 5px; } #rlCtl .chiprow { gap: 4px; }
  #rlCtl .chiprow button { min-width: 0; padding: 4px 0; }
  #rlCtl .chiprow .rchip.solo { width: 31px; height: 31px; font-size: 9.5px; }
  #rlCtl button.ico { width: 42px; } #rlCtl button.ready { min-width: 72px; padding-inline: 8px; }
}
#rlMine > .pills { height: 26px; align-items: center; } #rlMine .none { color: var(--text-2); font-size: var(--fs-sm); }
/* phones on their side: the stats card keeps to its slim colour bar inside the narrow side column */
@media (orientation: landscape) and (max-height: 520px) { #rlSide > * { min-width: 0; } #rlStats { overflow: hidden; } #rlSide .rlhc, #rlSide .rlsplit { display: none; } }
@media (prefers-reduced-motion: reduce) { .tring.low::before { animation: none; opacity: .4; } .rtimer.low .dial { animation: none; } #peekhint.on, .waitline .wdot, .dotpulse, #hbDeck.ready .glow, #voiceBtn[data-v="conn"] svg, #voiceBtn.fixing svg, .bee .bz, #board.idle .card.undealt { animation: none; } }
#hbDealBtn { transition: transform .14s var(--spring), opacity .2s ease .25s; } #hbDealBtn:disabled { opacity: .6; } /* a beat between cards never blinks */

/* ============================================================ game log + money ledger (ledger.js)
   Sheets #logbox / #ledgerbox follow the #infobox pattern; rows use the panel tokens; money is gold,
   wins accent, losses danger. Everything here is scoped to .x* classes and these ids. */
.xsheet { position: fixed; inset: 0; background: var(--scrim); display: none; z-index: 8; align-items: flex-end; justify-content: center; animation: fadeIn .22s ease both; }
.xsheet .box { width: 100%; max-width: 560px; max-height: 88vh; max-height: calc(100dvh - 24px - var(--sa-t)); overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px var(--sp-4) calc(16px + var(--sa-b)); gap: var(--sp-2); background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); animation: sheetIn .38s var(--spring) both; overscroll-behavior: contain; }
.xsheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--grab); margin: 2px auto 6px; flex: 0 0 auto; }
.xsheet.closing .box { animation: sheetOut .22s var(--in) both !important; }
.xhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.xsub { text-align: left; margin: -2px 2px 2px; font-size: var(--fs-xs); }
.xseg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--sunk-2); box-shadow: inset 0 0 0 1px var(--panel-br); flex: 0 0 auto; }
.xseg button { min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: transparent; box-shadow: none; font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }
.xseg button.on { background: var(--btn); color: var(--text); box-shadow: inset 0 0 0 1px var(--btn-br); }
.xlist { display: flex; flex-direction: column; gap: 6px; }
.xempty { color: var(--muted); font-size: var(--fs-sm); text-align: center; margin: 14px 0; }
.xmore { min-height: 38px; font-size: var(--fs-sm); }
/* one round */
.xround { border-radius: var(--r-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-br); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.xround.mine { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent); background: color-mix(in srgb, var(--gold) 5%, var(--panel)); }
.xrh { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.xrh b { font-weight: 700; color: var(--text); }
.xrh .xrs { flex: 1; min-width: 0; color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.xrh small { color: var(--muted); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.xrb { display: flex; flex-direction: column; gap: 3px; }
.xboard { padding: 1px 0 2px; }
.xcards { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.xcards .card { --cw: 19px; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.xpl { display: grid; grid-template-columns: minmax(52px, 7.5em) auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-height: 28px; font-size: var(--fs-xs); padding: 1px 4px; border-radius: var(--r-xs); }
.xpl .nm { font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpl .hn { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xpl.out .hn, .xpl.out .nm { color: var(--muted); }
.xpl.win .hn { color: var(--accent); }
.xpl.dealer .nm { color: var(--gold); }
.xpl.me { background: color-mix(in srgb, var(--gold) 11%, transparent); }
.xpl.me .nm { color: var(--gold-hi); }
.xpl:not(:has(.xcards)) { grid-template-columns: minmax(52px, 7.5em) minmax(0, 1fr) auto; }
.xnet { font: 750 var(--fs-xs)/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; min-width: 44px; }
.xnet.pos { color: var(--accent); } .xnet.neg { color: var(--danger); }
.xnote { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.45; text-align: left; }
.xnote b { color: var(--text-2); }
.xnote.warn { color: var(--gold); }
.xball { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--r-pill); color: #fff; font: 800 var(--fs-xs)/1 var(--font-num); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.xball.red { background: var(--rl-red); } .xball.black { background: var(--rl-black); } .xball.green { background: var(--rl-green); }
/* ledger */
.xstat { font-size: var(--fs-2xs); font-weight: 750; padding: 3px 9px; border-radius: var(--r-pill); background: var(--soft); color: var(--text-2); letter-spacing: .02em; }
.xstat.live { color: var(--accent-ink); background: var(--accent); } .xstat.ended { color: var(--gold-ink); background: var(--gold); } .xstat.unsettled { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-2); background: transparent; }
.xrate { margin: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); color: var(--muted); }
.xrate b { color: var(--gold); font: 750 var(--fs-md)/1.3 var(--font-num); font-variant-numeric: tabular-nums; }
.xlines { display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-br); overflow: hidden; }
.xline { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.xline + .xline { box-shadow: 0 -1px 0 var(--panel-br); }
.xline .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.xline .who b { font-size: var(--fs-md); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xline .who small { font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.4; }
.xline .who small i { font-style: normal; color: var(--text-2); }
.xline .net { flex: 0 0 auto; text-align: right; font: 800 var(--fs-lg)/1.1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-2); display: flex; flex-direction: column; align-items: flex-end; }
.xline .net small { font: 600 var(--fs-2xs)/1.3 var(--font); color: var(--muted); }
.xline .net.pos { color: var(--accent); } .xline .net.neg { color: var(--danger); }
.xline.me { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.xline.me .who b { color: var(--gold-hi); }
.xline.seated .who b::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: middle; box-shadow: 0 0 6px var(--accent); }
.xline.house .who b { color: var(--gold); }
.xtot { margin: 0; font-size: var(--fs-2xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.xtot b { color: var(--text-2); }
.xh4 { margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
.xpay { display: flex; flex-direction: column; gap: 4px; }
.xtr { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-br); font-size: var(--fs-sm); }
.xtr b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xtr .arrow { flex: 0 0 auto; color: var(--muted); display: inline-flex; } .xtr .arrow svg { width: 15px; height: 15px; }
.xtr .amt { margin-left: auto; color: var(--gold); font: 800 var(--fs-md)/1 var(--font-num); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.xtr.me { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.xfoot { font-size: var(--fs-2xs); margin: 2px 0 0; }
.xbtns { margin-top: 4px; }
#ledgerEnd { min-height: 44px; flex: 0 0 auto; }
#ledgerBody { flex: 0 0 auto; }
.xrounds { border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--panel-br); }
.xrounds summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.xrounds summary::-webkit-details-marker { display: none; }
.xrounds .xlist { padding: 0 8px 8px; }
/* the "$" mark on a real-money table (top bar) */
.usdb { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-left: -4px; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-2)); font: 800 var(--fs-xs)/1 var(--font-num); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 10px color-mix(in srgb, var(--gold) 45%, transparent); }
/* host form: real money */
#moneyBox { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; padding: 10px 12px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--gold) 6%, var(--sunk)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent); animation: fadeUp .3s var(--out) both; }
#moneyBox[hidden] { display: none; }
/* currency: $ USD / ₹ INR (two-way segmented control, remembered per device) */
#curSeg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#curSeg button { min-height: 42px; min-width: 0; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; background: var(--btn); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--btn-br); white-space: nowrap; font-variant-numeric: tabular-nums; }
#curSeg button.on { color: var(--text); background: color-mix(in srgb, var(--gold) 18%, var(--btn)); box-shadow: inset 0 0 0 1.5px var(--gold); }
#pokerAdv .advrow[data-row="maxBet"] input { width: 100%; }
#pokerAdv .advrow[data-row="maxBet"] .advhint { margin: 0; padding: 0; }
.mrate { align-items: flex-end; } .mrate .eq { flex: 0 0 auto; align-self: flex-end; height: var(--tap); line-height: var(--tap); color: var(--gold); font: 800 var(--fs-lg)/var(--tap) var(--font-num); }
#moneyHint { text-align: left; margin: 0; font-size: var(--fs-xs); } #moneyHint.bad { color: var(--danger); }
/* lobby: past money games */
.xpast small .pos { color: var(--accent); font-weight: 700; } .xpast small .neg { color: var(--danger); font-weight: 700; }

/* ============================================================ voice chat
   The mic in the top bar is the one control: dim when you're not in voice (a soft ping and a count when
   others are talking), mint when your mic is live (a ring that breathes with your voice), coral when muted,
   blue when only listening. Seats carry a small mic badge; whoever is talking gets a mint ring. */
#top #voiceBtn { --vc: var(--accent); --lv: 0; overflow: visible; transition: color .2s, background-color .2s, box-shadow .25s; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#top #voiceBtn[hidden] { display: none; }
#top #voiceBtn svg { position: relative; z-index: 1; width: 19px; height: 19px; }
#voiceBtn .vlv { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s, box-shadow .09s linear;
  box-shadow: 0 0 0 calc(1px + var(--lv) * 6px) color-mix(in srgb, var(--vc) 30%, transparent), 0 0 calc((6px + var(--lv) * 14px) * var(--gl)) color-mix(in srgb, var(--vc) var(--glow), transparent); }
#voiceBtn .vct { position: absolute; right: -4px; top: -4px; z-index: 2; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--vc); color: var(--accent-ink); font: 800 10px/17px var(--font-num); text-align: center; box-shadow: 0 0 0 2px var(--bg); transform: scale(0); transition: transform .3s var(--spring); pointer-events: none; }
#voiceBtn .vct.on { transform: scale(1); }
#top #voiceBtn[data-v="live"] { color: var(--vc); background: color-mix(in srgb, var(--vc) 14%, var(--glass)); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--vc) 70%, transparent); }
#voiceBtn[data-v="live"] .vlv { opacity: 1; }
#top #voiceBtn[data-v="muted"] { --vc: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--glass)); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--danger) 55%, transparent); }
#top #voiceBtn[data-v="listen"] { --vc: var(--info); color: var(--info); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--info) 55%, transparent); }
#voiceBtn[data-v="conn"] svg, #voiceBtn.fixing svg { animation: breathe 1s ease-in-out infinite; }
/* the mic was lost (a phone call, another app took it): warning ring + a "!" dot; a tap gets it back */
#top #voiceBtn[data-v="lost"] { --vc: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, var(--glass)); box-shadow: inset 0 0 0 1.5px var(--danger); }
#voiceBtn[data-v="lost"] .vlv { opacity: 1; }
#voiceBtn .vlv::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--vc) 60%, transparent); opacity: 0; pointer-events: none; will-change: transform, opacity; }
#voiceBtn[data-v="lost"] .vlv::after { animation: vping 1.6s ease-out infinite; }
#voiceBtn[data-v="lost"]::after { content: '!'; position: absolute; left: -3px; top: -3px; z-index: 2; width: 15px; height: 15px; border-radius: 50%; background: var(--danger); color: #fff; font: 900 10px/15px var(--font-num, system-ui); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
@media (prefers-reduced-motion: reduce) { #voiceBtn[data-v="lost"] .vlv::after { animation: none; opacity: 1; transform: none; } }
#voiceBtn.invite .vlv { opacity: 1; }
#voiceBtn.invite .vlv::after { animation: vping 2.2s ease-out infinite; }
#voiceBtn.invite { color: var(--text); }
@keyframes vping { 0% { transform: scale(1); opacity: .9 } 70%, 100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { #voiceBtn.invite .vlv::after { animation: none; opacity: .6; transform: none; } }

/* seat badge: top-right of the seat (the crown is top-left) */
.vb { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: var(--accent); background: var(--bg-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 4px rgba(0, 0, 0, .45); transition: transform .2s var(--spring), background-color .15s, color .15s, box-shadow .2s; }
.vb svg { width: 12px; height: 12px; }
.seat .vb { position: absolute; right: -6px; top: -8px; z-index: 2; }
#players.compact .seat .vb { width: 17px; height: 17px; top: -7px; right: -5px; } #players.compact .seat .vb svg { width: 11px; height: 11px; }
.vb.m { color: var(--danger); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), 0 2px 4px rgba(0, 0, 0, .45); }
.vb.l { color: var(--info); box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 40%, transparent), 0 2px 4px rgba(0, 0, 0, .45); }
.vb.a { opacity: .45; }
.vb.talk { transform: scale(1.18); color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 calc(12px * var(--gl)) color-mix(in srgb, var(--accent) var(--glow-hi), transparent); }
.seat .av.vtalk { outline: 1.5px solid color-mix(in srgb, var(--accent) 85%, transparent); outline-offset: 2px; }
.seat .av { outline: 1.5px solid transparent; outline-offset: 2px; transition: border-color .2s, opacity .3s, outline-color .15s; }
#myinfo .nm .vb { width: 17px; height: 17px; margin-left: 6px; vertical-align: -3px; } #myinfo .nm .vb svg { width: 11px; height: 11px; }

/* settings row: two lines, same switch as Sound */
#settings .vtog .vtl { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
#settings .vtog .vtl small { font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); margin-top: 2px; }
#settings .vtog[aria-checked="false"] { color: var(--text-2); }
#menu #voiceMenu .cur { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); font-weight: 550; }

/* the voice room */
#voicesheet h3 { margin: 0 2px; }
.vlist { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.vrow { display: flex; align-items: center; gap: 12px; padding: 7px 4px 7px 6px; border-radius: var(--r-md); }
.vrow.away { opacity: .55; }
.vrow .vav { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-br); font: 700 var(--fs-sm)/1 var(--font-num); color: var(--text-2); transition: box-shadow .15s, color .15s; }
.vrow.talk .vav { color: var(--text); box-shadow: inset 0 0 0 1px var(--panel-br), 0 0 0 2px var(--accent), 0 0 calc(14px * var(--gl)) color-mix(in srgb, var(--accent) var(--glow-hi), transparent); }
.vrow .vt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vrow .vt b { font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .vt small { font-size: var(--fs-xs); color: var(--muted); }
.vrow .vt i { font-style: normal; } .vrow .vt .m { color: var(--danger); }
.vrow button { flex: 0 0 auto; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.vrow button svg { width: 21px; height: 21px; }
.vrow button.on { color: var(--accent); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--accent) 60%, transparent); }
.vrow button.off { color: var(--danger); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--danger) 50%, transparent); }
.vempty { padding: 14px 0 6px; }
.vfoot { font-size: var(--fs-xs); margin: 2px 0 4px; }
#voicesheet .xbtns button { flex: 1; } #voicesheet .xbtns button[hidden] { display: none; }

/* the microphone dialog (asks first, then explains how to unblock) */
#voicebox { position: fixed; inset: 0; background: var(--scrim); display: none; z-index: 9; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .22s ease both; }
#voicebox .box { width: 100%; max-width: 360px; background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); animation: dlgIn .32s var(--spring) both; align-items: stretch; }
#voicebox .vhero { align-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 calc(24px * var(--gl)) calc(-4px * var(--gl)) color-mix(in srgb, var(--accent) var(--glow), transparent); margin-top: 4px; }
#voicebox .vhero svg { width: 30px; height: 30px; }
#voicebox[data-m="help"] .vhero { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 45%, transparent); }
#voicebox h3 { text-align: center; }
#voicebox #voiceText { margin: -4px 0 0; }
.vsteps { margin: 0; padding: 12px 14px 12px 34px; border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--panel-br); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.vsteps[hidden] { display: none; }
.vsteps b { color: var(--text); font-weight: 650; }
#voicebox .row button { flex: 1; }

/* ============================================================ roulette on phones: aim-to-bet, big racetrack, finger-sized controls */
#rlTrack text { text-anchor: middle; dominant-baseline: central; }
#rlLayout, #rlTrack, #rlCalls { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* what the finger is on: the spot lights up, every number it covers gets a gold ring */
.rc.aim { box-shadow: 0 0 0 2.5px var(--gold), 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); z-index: 4; }
.rc .z.aim::after { content: ''; position: absolute; inset: 22%; border-radius: 999px; background: var(--gold); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 10px var(--gold); }
#rlAim { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 128px; padding: 9px 16px 10px; border-radius: 16px;
  background: rgba(14, 22, 18, .94); box-shadow: 0 0 0 1.5px var(--gold), 0 14px 30px -8px rgba(0, 0, 0, .7); color: #f6f1e4; opacity: 0; transition: opacity .12s ease; will-change: transform; }
#rlAim.on { opacity: 1; }
#rlAim b { font: 800 var(--fs-md)/1.15 var(--font-num); white-space: nowrap; }
#rlAim small { font: 650 var(--fs-xs)/1.2 var(--font-num); color: var(--gold); white-space: nowrap; }
/* touch screens, upright layout: the split / corner strips stay on the lines so most of each number is a straight bet */
@media (pointer: coarse) and (orientation: portrait) {
  .rc .z.sp1 { right: -6px; width: 12px; top: 18%; height: 64%; }
  .rc .z.sp3 { bottom: -6px; height: 12px; left: 18%; width: 64%; }
  .rc .z.cr { right: -7px; bottom: -7px; width: 14px; height: 14px; }
  .rc .z.st { left: -6px; width: 12px; top: 18%; height: 64%; }
  .rc .z.ln { left: -7px; bottom: -7px; width: 14px; height: 14px; }
  .rc .z.z01, .rc .z.z02, .rc .z.z03 { bottom: -6px; height: 12px; }
}
/* the upright racetrack (phones): fills the felt, numbers ~28×40 px, call bets are the big areas inside it */
#rlTrack.tall { flex: 1 1 auto; width: 100%; height: 100%; max-height: none; min-height: 0; }
#rlTrack.tall + #rlCalls { display: none; }
#rlTrack.tall .tc text { font-size: 13px; }
#rlTrack.tall .ts text { font: 750 13px var(--font); }
#rlTrack.tall .ts text.sub { font: 650 10px var(--font-num); fill: var(--gold); }
#rlTrack.tall .ts > polygon { fill: rgba(0, 0, 0, .2); }
#rlTrack .ts.off { opacity: .45; }
#rlTrack .tchip { opacity: 0; transition: opacity .2s; pointer-events: none; }
#rlTrack .tchip.on { opacity: 1; }
#rlTrack .tchip circle { fill: var(--c, var(--gold)); stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); }
#rlTrack .tchip text { font: 800 7.5px var(--font-num); fill: var(--ink, #111); }
.nbstep button:disabled { opacity: .35; }
@media (max-width: 699px) {
  #rlViewBar .seg button { min-height: 40px; padding: 0 16px; font-size: var(--fs-sm); }
  .nbstep { gap: 6px; } .nbstep button { width: 40px; height: 40px; }
  #rlBets.track #rlTrackBox { flex: 1 1 auto; justify-content: center; align-items: stretch; }
  #rlBets:not(.track) .nbstep { display: none; } /* neighbours only matter on the racetrack */
  #rlFair { display: none; }                      /* the seal stays one tap away under (i); the grid gets the height */
}
#rlTrack.tall tspan.sub { font: 650 11px var(--font-num); fill: var(--gold); }
@media (max-width: 400px) {
  #rlViewBar .seg button { padding: 0 12px; }
  .nbstep { gap: 4px; } .nbstep button { width: 38px; height: 38px; }
  .nbstep > span { font-size: 0; } .nbstep > span::after { content: 'Nbrs'; font-size: var(--fs-xs); }
}

/* long sheets (game log, rules, ledger, styles, voice): the footer is a solid strip pinned to the bottom — nothing scrolls
   through it, and the soft fade above it shows only while there is more to scroll */
.xfoot { position: sticky; bottom: calc(-16px - var(--sa-b)); z-index: 5; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; margin: 4px calc(-1 * var(--sp-4)) calc(-16px - var(--sa-b)); padding: 10px var(--sp-4) calc(16px + var(--sa-b)); background: var(--bg-2); isolation: isolate; }
.xfoot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: linear-gradient(to bottom, transparent, var(--bg-2)); pointer-events: none; opacity: 0; transition: opacity .2s; }
.box.more > .xfoot::before { opacity: 1; }
.xfoot > button, .xfoot .xbtns { margin: 0; }

/* the commentator: blackjack / Home 21 — it takes the middle slot for a few seconds (cards are never covered);
   poker — just under the pot and phase, in the middle of the felt; roulette — along the bottom of the table */
#board .midslot > #quip { position: static; left: auto; top: auto; bottom: auto; transform: translateY(4px); width: auto; max-width: min(92%, 420px); white-space: normal; text-align: center; line-height: 1.3;
  font-size: var(--fs-xs); padding: 7px 14px; border-radius: var(--r-md); z-index: 4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#board .midslot > #quip.on { transform: none; }
#board:not(.poker) .midslot:has(> #quip.on) > :not(#quip) { opacity: 0 !important; visibility: hidden !important; }
.midslot { position: relative; }
#board.poker .midslot > #quip, #board.teenpatti .midslot > #quip { position: absolute; left: 50%; top: calc(100% + 6px); transform: translate(-50%, 6px); width: max-content; max-width: min(92vw, 420px); }
#board.poker .midslot > #quip.on, #board.teenpatti .midslot > #quip.on { transform: translate(-50%, 0); }
#board.roulette > #quip { top: auto; bottom: 14px; white-space: normal; width: max-content; max-width: min(92%, 420px); text-align: center; line-height: 1.3; font-size: var(--fs-xs); border-radius: var(--r-md); z-index: 6; }

/* a player on a break: dimmed seat, a small "On a break" tag; my own row offers "I'm back" */
.seat.away .av > :not(.awaytag):not(.tring) { opacity: .5; filter: saturate(.4); }
.seat .awaytag { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 3; white-space: nowrap; padding: 2px 8px; border-radius: var(--r-pill); font: 700 var(--fs-2xs)/1.4 var(--font); color: var(--text); background: var(--bg-3, #222); box-shadow: 0 0 0 1px var(--glass-br, rgba(255,255,255,.15)); }
/* on a break: the action row only says so (no second "I'm back": that is the top-bar pill) */
#altRow .awaynote { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 0; padding: 0 12px; border-radius: var(--r-lg); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; text-align: center; background: color-mix(in srgb, var(--gold) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); }
#altRow .awaynote .adot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
@media (max-height: 700px) and (orientation: portrait) { #altRow .awaynote { min-height: 48px; } }
@media (orientation: landscape) and (max-height: 520px) { #altRow .awaynote { min-height: 46px; } }

/* ============================================================ kaat: shuffle + cut, in the middle of the felt */
.kaat { position: absolute; left: 50%; top: 46%; z-index: 9; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%); animation: kaatLife 2.4s ease both; }
.kaat .kdeck { position: relative; width: 150px; height: 64px; --cw: 40px; }
.kaat .card { position: absolute; left: 50%; top: 0; margin-left: -20px; box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
/* riffle: two halves fan in from the sides and drop into one pile, alternating */
.kaat .kl .card { animation: kaatL .9s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * 85ms); }
.kaat .kr .card { animation: kaatR .9s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * 85ms + 42ms); }
.kaat .kl, .kaat .kr { animation: kaatGone .01s linear 1s both; }
/* the pile, then the cut: the top part lifts off to the side and slides in underneath */
.kaat .kpile { position: absolute; inset: 0; opacity: 0; animation: kaatShow .01s linear .95s both; }
.kaat .kpile .card { top: calc(var(--i) * -1.4px); }
.kaat .kbot { position: absolute; inset: 0; z-index: 2; animation: kaatBot 1s ease-in-out 1.1s both; }
.kaat .ktop { position: absolute; inset: 0; z-index: 3; animation: kaatTop 1s ease-in-out 1.1s both; }
.kaat .ktop .card { top: calc(-1.4px * (var(--i) + 4)); }
.kaat .klbl { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--glass-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-br); box-shadow: var(--shadow); white-space: nowrap; font-size: var(--fs-sm); color: var(--text); opacity: 0; animation: kaatLbl 1.6s ease .7s both; }
.kaat .klbl b { color: var(--gold); font-weight: 800; letter-spacing: .04em; }
.kaating { animation: kaatSeat 1s ease-in-out 2; }
@keyframes kaatLife { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kaatL { 0% { transform: translate(-58px, 4px) rotate(-14deg); } 55% { transform: translate(-30px, -10px) rotate(-8deg); } 100% { transform: translate(0, calc(var(--i) * -2.8px)) rotate(0); } }
@keyframes kaatR { 0% { transform: translate(58px, 4px) rotate(14deg); } 55% { transform: translate(30px, -10px) rotate(8deg); } 100% { transform: translate(0, calc(var(--i) * -2.8px - 1.4px)) rotate(0); } }
@keyframes kaatGone { to { opacity: 0; } }
@keyframes kaatShow { to { opacity: 1; } }
@keyframes kaatTop { 0% { transform: none; z-index: 3; } 35% { transform: translate(46px, -18px) rotate(10deg); z-index: 3; } 50% { transform: translate(52px, -4px) rotate(6deg); z-index: 1; } 100% { transform: translate(0, 10px); z-index: 1; } }
@keyframes kaatBot { 0%, 40% { transform: none; } 100% { transform: translate(0, -8px); } }
@keyframes kaatLbl { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kaatSeat { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 22px color-mix(in srgb, var(--gold) 70%, transparent); } }

/* ============================================================ American layout: 0 and 00 side by side */
#rlLayout .zwrap { grid-row: 1; grid-column: 3 / 6; display: flex; gap: inherit; min-width: 0; min-height: 0; }
#rlLayout .zwrap .rc.zero { flex: 1 1 0; grid-row: auto; grid-column: auto; min-width: 0; }
.rc .z.ze { bottom: -8px; left: calc(var(--at) - 11%); width: 22%; height: 16px; }
.rc .z.zk { bottom: -8px; left: calc(var(--at) - 9px); width: 18px; height: 16px; z-index: 3; }
.rc .z.zb { right: -9px; top: 12%; width: 18px; height: 76%; }
.rc .z.zbk { right: -9px; bottom: -8px; width: 18px; height: 16px; z-index: 4; }
.rc .z.zbas { left: -9px; bottom: -8px; width: 18px; height: 16px; z-index: 4; }
@media (pointer: coarse) and (orientation: portrait) {
  .rc .z.ze, .rc .z.zk { bottom: -6px; height: 12px; } .rc .z.zk { width: 14px; left: calc(var(--at) - 7px); }
  .rc .z.zb { right: -6px; width: 12px; } .rc .z.zbk, .rc .z.zbas { width: 14px; height: 14px; bottom: -7px; } .rc .z.zbk { right: -7px; } .rc .z.zbas { left: -7px; }
}
/* landscape: the zeros stack in the first column, 00 on top (next to 3), 0 below (next to 1) */
@media (orientation: landscape) and (min-width: 700px) {
  #rlLayout .zwrap { grid-column: 1; grid-row: 1 / 4; flex-direction: column-reverse; }
  .rc .z.ze { left: auto; right: -8px; top: auto; bottom: calc(var(--at) - 11%); width: 16px; height: 22%; }
  .rc .z.zk { left: auto; right: -8px; top: auto; bottom: calc(var(--at) - 9px); width: 16px; height: 18px; }
  .rc .z.zb { right: auto; left: 12%; top: -8px; width: 76%; height: 16px; }
  .rc .z.zbk { bottom: auto; top: -8px; right: -8px; width: 16px; height: 16px; }
  .rc .z.zbas { left: auto; right: -8px; bottom: -8px; width: 16px; height: 16px; }
}
/* racetrack infield (no call bets on an American wheel): a quiet hint of what a tap does */
#rlTrack .infield { fill: rgba(0, 0, 0, .18); stroke: rgba(246, 240, 225, .25); stroke-width: .8; }
#rlTrack .hint1 { fill: #f3eddb; font: 700 14px var(--font); }
#rlTrack .hint2 { fill: var(--gold); font: 650 11px var(--font-num); }
#rlTrack.wide .hint2 { font-size: 10px; }
#rlCalls:empty { display: none; }

/* ============================================================ roulette on phones: every spare pixel goes to the betting grid
   — the me-bar folds into two rows ((i) and +top-up sit beside the chip count), the Table/Racetrack switch is slimmer */
@media (max-width: 699px) and (orientation: portrait) {
  body[data-game="roulette"] #me { min-height: 0; padding-top: 4px; padding-bottom: calc(6px + var(--sa-b)); align-items: center; }
  body[data-game="roulette"] #myinfo { display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 1px; align-items: center; justify-content: end; justify-items: end; }
  body[data-game="roulette"] #myinfo .nm { grid-column: 1 / -1; }
  body[data-game="roulette"] #myinfo .chips { grid-column: 1; font-size: var(--fs-xl); }
  body[data-game="roulette"] #myinfo .handrow { grid-column: 2; gap: 4px; }
  body[data-game="roulette"] #myinfo .mybet { display: none; }
  body[data-game="roulette"] #myinfo .hand:empty { display: none; }
  body[data-game="roulette"] #topup.on { min-height: 28px; padding: 0 9px 0 6px; }
  body[data-game="roulette"] #infoBtn { width: 28px; height: 28px; }
  body[data-game="roulette"] #rlMine { gap: 3px; }
  #rlViewBar .seg { padding: 2px; }
  #rlViewBar .seg button { min-height: 30px; padding: 0 14px; font-size: var(--fs-xs); }
  .nbstep button { width: 32px; height: 32px; }
  #rlBets { gap: 4px; }
}
/* the 0 / 00 row is a full-height row on phones (it holds two numbers and five line bets), not a thin strip */
@media (max-width: 699px) and (orientation: portrait) {
  #rlBets #rlLayout { grid-template-rows: minmax(22px, 1fr) repeat(12, minmax(15px, 1fr)) minmax(16px, auto); }
}
@media (min-width: 700px) and (orientation: portrait) {
  #rlBets #rlLayout { grid-template-rows: minmax(30px, 1fr) repeat(12, minmax(18px, 1fr)) minmax(22px, auto); }
}

/* ============================================================ the bee: pot tag, the rare golden bee */
.bee .pot { position: absolute; left: 50%; top: calc(100% - 8px); transform: translateX(-50%); white-space: nowrap; padding: 1px 7px; border-radius: var(--r-pill); font: 800 10px/1.5 var(--font-num); color: var(--gold-ink); background: var(--gold); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); pointer-events: none; }
.bee.flip .pot { transform: translateX(-50%) scaleX(1); }
.bee.gold { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.bee.gold .bz { font-size: 30px; filter: sepia(.8) saturate(2) hue-rotate(-12deg) brightness(1.05) drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 60%, transparent)); } /* toned down: a warm tint, one soft halo */
.bee.gold .pot { background: var(--gold-hi); color: var(--gold-ink); }
.bee.gold::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 35%, transparent), transparent); animation: goldPulse .6s ease-in-out infinite alternate; pointer-events: none; }
.bee.out { opacity: .55 !important; filter: grayscale(.6); cursor: default; }
@keyframes goldPulse { from { transform: scale(.8); opacity: .5; } to { transform: scale(1.25); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bee.gold::before { animation: none; } }

/* ============================================================ shared fixes from the UI review */
/* toasts: neutral by default; red only for things that went wrong */
#toast { background: var(--glass-2, rgba(20, 24, 22, .92)); color: var(--text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--glass-br, rgba(255,255,255,.12)), var(--shadow-lg); }
#toast.err { background: var(--danger-2); color: #fff; box-shadow: var(--shadow-lg); }
/* the connection dropped: a pill under the top bar, and the actions go quiet so no tap is silently lost */
#netpill { position: fixed; left: 50%; top: calc(58px + var(--sa-t)); z-index: 12; display: none; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: var(--r-pill); background: var(--danger-2); color: #fff; font-size: var(--fs-sm); font-weight: 650; box-shadow: var(--shadow-lg); transform: translateX(-50%); white-space: nowrap; }
body.offline #game.on ~ #netpill, body.offline #netpill { display: inline-flex; }
#netpill .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: netspin .8s linear infinite; }
#netpill button { display: none; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
#netpill.long button { display: inline-flex; align-items: center; } #netpill.long .spin { display: none; }
body.offline #actions, body.offline #me #mySlot { opacity: .45; pointer-events: none; filter: grayscale(.4); transition: opacity .2s; }
@keyframes netspin { to { transform: rotate(360deg); } }
/* my chip line when it is a word, not a number */
#myinfo .chips .word { font-size: .62em; letter-spacing: 0; }
/* "Tap to peek" sits on a dark pill in every theme: always light text */
#peekhint { color: #fff; }
/* the felt's drop shadow is no longer clipped into a square box */
#board { overflow: clip; overflow-clip-margin: 28px; }
/* a player on a break: the note takes the chip line inside the seat (it used to hang over the cards and bet row) */
.seat .ch .awaytag { position: static; transform: none; display: inline-block; padding: 1px 7px; font-size: 10px; line-height: 1.5; bottom: auto; left: auto; box-shadow: inset 0 0 0 1px var(--panel-br); background: var(--sunk-2); color: var(--text-2); }
.seat.away .av > :not(.awaytag):not(.tring):not(.ch) { opacity: .5; filter: saturate(.4); }
/* bust totals: readable on light felts and light seats too */
:root[data-theme="light"] .tot.bust { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
/* a quiet outlined "danger" button for destructive-but-rare actions (End session, Leave voice) */
button.dangerline { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 60%, transparent); }
/* kaat: where it plays per game, so it never lands on the cards that matter right then */
#board.poker .kaat, #board.teenpatti .kaat { top: 76%; }
#board.blackjack .kaat { top: 38%; }
#board.homebj .kaat { top: 40%; }
#board:has(.kaat) .crest { opacity: 0; transition: opacity .2s; }
/* lobby: a friend's link is an invite card, not a code under "Open tables"; tables to join come before the host form */
#hostbox .hstat { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: var(--fs-2xs); color: var(--text-2); background: var(--sunk-2); vertical-align: 1px; }
/* the ⋯ menu on a phone held sideways: table actions in one column, Settings in a second — nothing below the fold */
@media (orientation: landscape) and (max-height: 520px) {
  #menu { display: grid; grid-template-columns: minmax(210px, auto) minmax(230px, auto); grid-auto-flow: row dense; column-gap: 6px; align-items: start; align-content: start; }
  #menu > button { grid-column: 1; }
  #menu > #settings { grid-column: 2; grid-row: 1 / span 40; }
  #menu > #settings > .msep:first-child { display: none; }
}

/* ============================================================ kaat: your turn to cut — the deck spread sideways */
#kaatPick { position: absolute; left: 50%; top: 50%; z-index: 10; transform: translate(-50%, -50%); width: min(92%, 380px); pointer-events: auto; animation: kpIn .28s var(--spring) both; }
#kaatPick.theirs { top: 76%; width: auto; pointer-events: none; }
#board.blackjack #kaatPick.theirs, #board.homebj #kaatPick.theirs { top: 40%; }
#kaatPick .kcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: 0 0 0 1px var(--glass-br), 0 18px 40px -12px rgba(0, 0, 0, .7); color: var(--text); }
#kaatPick .khead { display: flex; flex-direction: column; gap: 2px; text-align: center; }
#kaatPick .khead b { font-size: var(--fs-md); color: var(--gold); letter-spacing: .02em; }
#kaatPick .khead span { font-size: var(--fs-xs); color: var(--text-2); }
#kaatPick .kdeckpick { position: relative; height: 92px; margin: 6px 4px 0; touch-action: none; cursor: pointer; outline: none; border-radius: 10px; }
#kaatPick .kdeckpick:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
/* each slice is a card seen edge-on, overlapping the next one */
#kaatPick .ks { position: absolute; bottom: 4px; left: calc(var(--i) * (100% - 46px) / 39); width: 46px; height: 66px; border-radius: 6px; background: radial-gradient(circle at 50% 42%, var(--back-1, #2a4d7a), var(--back-2, #183456) 78%); border: 1.5px solid var(--back-edge, #e9e2cd); box-shadow: -2px 0 4px rgba(0, 0, 0, .35); transition: transform .14s var(--out), filter .14s; }
#kaatPick .ks.no { filter: brightness(.55) saturate(.6); }
#kaatPick .ks.top { transform: translateY(-16px) rotate(-2deg); }
#kaatPick .kline { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); pointer-events: none; transition: left .1s var(--out); }
#kaatPick .kline::before { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold); position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-size: 15px; color: var(--gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
#kaatPick .kfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#kaatPick .kcount { font: 650 var(--fs-xs) var(--font-num); color: var(--text-2); }
#kaatPick .kany { min-height: 38px; padding: 0 16px; font-size: var(--fs-sm); }
#kaatPick .kbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sunk-2); }
#kaatPick .kbar > i { position: absolute; inset: 0; background: var(--gold); transform-origin: left center; }
#kaatPick.cutting .kcard { opacity: .6; pointer-events: none; }
#kaatPick .kwait { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--glass-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-br); box-shadow: var(--shadow); font-size: var(--fs-sm); white-space: nowrap; color: var(--text); }
#kaatPick .kwait b { color: var(--gold); }
#kaatPick .kmini { position: relative; width: 22px; height: 28px; border-radius: 4px; background: radial-gradient(circle at 50% 42%, var(--back-1, #2a4d7a), var(--back-2, #183456) 78%); border: 1.5px solid var(--back-edge, #e9e2cd); box-shadow: 2px 2px 0 -1px var(--back-edge, #e9e2cd), 4px 4px 0 -2px var(--back-edge, #e9e2cd); animation: kmini 1.2s ease-in-out infinite; }
@keyframes kpIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes kmini { 50% { transform: translateY(-3px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { #kaatPick, #kaatPick .kmini { animation: none; } }

/* ============================================================ poker fixes from the UI review */
/* raise panel: solid, and nothing from the felt shows through or sits half-hidden behind it */
#raisePanel { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; } /* opaque: the felt line never shows through */
#game:has(#raisePanel.on) .crest, #game:has(#raisePanel.on) #board.poker #quip { opacity: 0 !important; }
.actrow .raise, #bRaise { white-space: nowrap; font-size: clamp(14px, 4.2vw, 18px); }
/* the result line wraps to two lines instead of cutting off the second winner */
#board.poker .midslot #msg, #board.teenpatti .midslot #msg { white-space: normal; text-overflow: clip; max-width: min(94%, 460px); line-height: 1.25; padding-block: 6px; border-radius: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: auto; }
#board.poker .midslot, #board.teenpatti .midslot { grid-template-rows: minmax(38px, auto); }
/* showdown: each revealed hand named on its seat */
.seat .act .tag.handname { background: var(--sunk-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--panel-br); }
.seat .act .tag.handname.won { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-hi, var(--accent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
/* Stadium: seats start below the top bar */
[data-skin="stadium"] body[data-game="poker"] #players { top: calc(102px + var(--sa-t)); bottom: 196px; }
/* light felts: empty board slots are a clean dashed outline, not a grey smudge */
[data-skin="paper"] .card.undealt, :root[data-theme="light"] .card.undealt { background: transparent; box-shadow: none; border: 1.5px dashed color-mix(in srgb, currentColor 30%, transparent); color: var(--text-2); }

/* ============================================================ blackjack fixes from the UI review */
#bjBetRow #bjX2 { font: 800 var(--fs-md) var(--font-num); }
/* seat mini-hands stay inside their seat: tighter overlap as cards pile up, split hands side by side */
.seat .bjmini { max-width: 100%; }
.seat .bjmini > div { max-width: 100%; min-width: 0; }
.seat .crop { max-width: calc(100% - 22px); min-width: 0; }
.seat .bjmini .fanhand:has(.card:nth-child(4)) .card + .card { margin-left: calc(var(--cw) * -.62); }
.seat .bjmini .fanhand:has(.card:nth-child(6)) .card + .card { margin-left: calc(var(--cw) * -.74); }
.seat .bjmini:has(> div + div) { flex-direction: row; gap: 4px; }
.seat .bjmini:has(> div + div) .crop { max-width: calc(50% - 14px); }
#players.compact .seat .act { max-width: 100%; overflow: hidden; }
#players.compact .seat .act .tag.bet { display: none; }
/* Split has its own colour (it looked disabled next to Hit / Stand / Double) */
#bjSplit:not(:disabled) { background: linear-gradient(180deg, #8f6fd8, #6a4fc0); color: #fff; box-shadow: 0 6px 14px -8px rgba(80, 50, 170, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
/* my result: a stamped badge on the hand, not a small word under it */
.bjhand .out:not(:empty) { display: inline-block; margin: 2px auto 0; padding: 3px 12px; border-radius: var(--r-pill); font-size: var(--fs-md); letter-spacing: .04em; text-transform: uppercase; background: var(--sunk-2); box-shadow: inset 0 0 0 1.5px currentColor; animation: outPop .35s var(--spring) both; }
@keyframes outPop { from { transform: scale(.6); opacity: 0; } }
.bjhand .lbl .hn { font-size: var(--fs-2xs); color: var(--text-2); font-weight: 650; }
/* oval / round felts on phones: the felt keeps its hand box inside the rail */
@media (max-width: 699px) {
  [data-skin="vegas"] #board.blackjack, [data-skin="paper"] #board.blackjack,
  [data-skin="vegas"] #board.homebj, [data-skin="paper"] #board.homebj { padding-top: 9%; padding-bottom: 8%; }
  [data-skin="vegas"] #bjShoe, [data-skin="paper"] #bjShoe { right: 14%; top: 9%; }
}

/* ============================================================ Home 21 fixes from the UI review */
/* each seat's tag + amount stays inside its seat */
body:not([data-game="roulette"]) #players .seat .act { max-width: calc(100% + 6px); overflow: hidden; }
.seat .act .tag.pending { background: var(--sunk-2); color: var(--text-2); }
.seat.acting .act .tag.pending { animation: betting 1.4s ease-in-out infinite; } /* only the seat on the clock pulses */
@keyframes betting { 50% { opacity: .45; } }
.seat .act .tag.short { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.bjhand .out.short { font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
/* the deal moved: the dealer label pulses once */
#hbTop.newdeal #hbDealer .lbl { animation: newdeal 1.6s var(--out); }
@keyframes newdeal { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 2px var(--gold), 0 0 18px color-mix(in srgb, var(--gold) 60%, transparent); border-radius: var(--r-pill); } }
/* the deck: the timer ring is the only border while it runs (no glow doubled up beside it) */
#hbDeck:has(.tring.on) .glow { opacity: 0 !important; }
#hbDeck .deck { margin-inline: auto; }
/* phones on their side and small phones: smaller cards so my hand and the outcome stay on the felt */
@media (orientation: landscape) and (max-height: 520px) { #board.homebj #hbDealer, #board.homebj #hbMine { --cw: clamp(24px, 8vh, 36px); } #board.homebj { gap: 2px; } }
@media (max-height: 700px) and (orientation: portrait) { #board.homebj #hbDealer, #board.homebj #hbMine { --cw: clamp(28px, 6.5vh, 44px); } }
@media (prefers-reduced-motion: reduce) { .seat .act .tag.pending, .seat.acting .act .tag.pending, #hbTop.newdeal #hbDealer .lbl { animation: none; } }

/* ============================================================ roulette fixes from the UI review */
/* phones on their side: touch strips stay thin and on the lines (a tap on 17 is a bet on 17) */
@media (pointer: coarse) and (orientation: landscape) {
  .rc .z.sp1 { top: -5px; height: 10px; right: 18%; width: 64%; }
  .rc .z.sp3 { right: -5px; width: 10px; top: 18%; height: 64%; }
  .rc .z.cr { right: -6px; top: -6px; width: 12px; height: 12px; }
  .rc .z.st { bottom: -5px; height: 10px; left: 18%; width: 64%; }
  .rc .z.ln { right: -6px; bottom: -6px; width: 12px; height: 12px; }
  .rc .z.ze { right: -5px; width: 10px; height: 18%; bottom: calc(var(--at) - 9%); }
  .rc .z.zk { right: -6px; width: 12px; height: 12px; bottom: calc(var(--at) - 6px); }
  .rc .z.zb { top: -5px; height: 10px; left: 18%; width: 64%; }
  .rc .z.zbk, .rc .z.zbas { width: 12px; height: 12px; } .rc .z.zbk { top: -6px; right: -6px; } .rc .z.zbas { bottom: -6px; right: -6px; }
}
/* short landscape screens (phones): the grid gets the room — small wheel, no stats card, number rows first */
@media (orientation: landscape) and (max-height: 520px) {
  #rlWheel { width: 92px; height: 92px; }
  #rlStats, #rlFair { display: none !important; }
  #rlSide { min-width: 150px; max-width: 190px; }
  #rlStatus, .rtimer { white-space: nowrap; }
  #rlLayout { grid-template-rows: repeat(3, minmax(34px, 1fr)) 28px 28px; max-height: none; }
  #rlBets:not(.track) .nbstep { display: none; }
  #rlTable { gap: 12px; padding: 10px 14px; }
}
/* chips no longer hide what they sit on: smaller on phones, a straight bet's stack sits in the corner of its number */
@media (max-width: 699px), (max-height: 520px) {
  #rlLayout .rchip { width: 18px; height: 18px; left: -9px; top: calc(-9px - var(--k, 0) * 2px); font-size: 7.5px; }
  #rlLayout .stack.multi .rchip { left: calc(-9px + var(--k, 0) * 4px); }
}
#rlLayout .rc > .stack { left: 76%; top: 70%; }
#rlLayout .rc.out > .stack { left: 84%; top: 50%; }
#rlLayout .rc .z .stack { opacity: .92; }
#rlLayout .rc > span:first-child { position: relative; z-index: 5; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 4px rgba(0, 0, 0, .6); }
#rlLayout .stack { z-index: 6; }
/* the result: winning stacks glow, losing ones fade, winning outside bets light up */
#rlLayout .stack.won .rchip { box-shadow: 0 0 0 2px var(--gold), 0 0 14px var(--gold); animation: wonPulse 1s ease-in-out 2; }
#rlLayout .stack.lost { opacity: .28; transition: opacity .4s; }
#rlLayout .rc.out.wonspot { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px color-mix(in srgb, var(--gold) 45%, transparent); background-color: color-mix(in srgb, var(--gold) 16%, transparent); }
#rlLayout .rc.hot { animation: hotRing 1.2s ease-in-out 3; }
#rlTrackBox.closed .tc.win { opacity: 1; }
@keyframes wonPulse { 50% { transform: scale(1.15); } }
@keyframes hotRing { 50% { box-shadow: 0 0 0 4px var(--gold), 0 0 26px var(--gold); } }
/* the chip picker rests while the ball rolls */
#rlChips.off { opacity: .45; pointer-events: none; filter: saturate(.5); transition: opacity .2s; }
/* the quip sits in the side column next to the wheel (it used to cover the bottom rows of the grid) */
#rlSide { position: relative; }
#rlSide > #quip { position: absolute; left: 0; right: 0; top: auto; bottom: 0; transform: translateY(6px); white-space: normal; text-align: center; font-size: var(--fs-2xs); line-height: 1.3; padding: 6px 10px; border-radius: var(--r-md); max-width: none; z-index: 6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#rlSide > #quip.on { transform: none; }
/* portrait tablets: the racetrack keeps its own row under the grid instead of covering the column bets */
@media (min-width: 700px) and (orientation: portrait) {
  #rlWheel { width: clamp(140px, 17vh, 200px); height: clamp(140px, 17vh, 200px); }
  #rlTrackBox { flex: 0 0 auto; margin-top: 8px; position: relative; }
  #rlTrack { max-height: 15vh; }
  #rlBets #rlLayout { min-height: 0; }
}
/* aimed cell never cuts the chip on a neighbouring line in half */
.rc.aim { z-index: 4; }
/* dock: the bets count never gets cut off by "Table >" */
#rlMine .who { flex: 1 1 auto; min-width: 0; } #rlMine .all { flex: 0 0 auto; }

/* ============================================================ wider screens (review follow-ups) */
/* blackjack / Home 21 seats on tablet and desktop: readable mini cards (they stayed phone-sized and cropped) */
@media (min-width: 820px) and (min-height: 600px) {
  .seat .bjmini .fanhand { --cw: var(--cw-sm); }
  .seat .crop { height: auto; }
}
/* roulette on desktop: number rows are the biggest rows, the 0/00 column is wide enough to hold chips */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 560px) {
  #rlLayout { grid-template-columns: 64px repeat(12, 1fr) 60px; grid-template-rows: repeat(3, minmax(40px, 1fr)) minmax(30px, 40px) minmax(30px, 40px); max-height: min(460px, 52vh); }
}
/* in-app confirm */
#askbox { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); animation: fadeIn .2s ease both; }
#askbox .box { width: min(100%, 360px); padding: 18px; gap: 14px; background: var(--bg-2); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); border-radius: var(--r-lg); }
#askbox .q { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--text); }
#askbox .row { display: flex; gap: 10px; } #askbox .row button { flex: 1; min-height: 46px; }
button.dangerfill { background: var(--danger-2); color: #fff; box-shadow: 0 6px 14px -8px var(--danger-2); }

/* ============================================================ feedback */
#fbbox .fbrate { display: flex; justify-content: space-between; gap: 6px; }
#fbbox .fbrate button { flex: 1; min-height: 52px; font-size: 26px; color: var(--text-2); display: grid; place-items: center; padding: 0; border-radius: var(--r-md); background: var(--sunk-2); box-shadow: inset 0 0 0 1px var(--panel-br); filter: grayscale(.7); opacity: .8; transition: transform .15s var(--spring), filter .15s, opacity .15s; }
#fbbox .fbrate button.on { filter: none; opacity: 1; transform: scale(1.08); box-shadow: inset 0 0 0 2px var(--accent); }
#fbbox .fbtags { display: flex; flex-wrap: wrap; gap: 6px; }
#fbbox .fbtags button { min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 650; background: var(--sunk-2); box-shadow: inset 0 0 0 1px var(--panel-br); color: var(--text-2); }
#fbbox .fbtags button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
#fbText { width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--panel-br); background: var(--sunk); color: var(--text); font: 500 var(--fs-sm)/1.4 var(--font); }
#fbText:focus { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }
#fbbox .fbnote { margin: 0; font-size: var(--fs-2xs); }

/* Lobby order: Host a new table always comes before Past money games (phones), and on desktop past games
   sit under "Playing as" instead of on top of Open tables */


/* change my name: the dialog (same look as the in-app confirm) */
#renamebox { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); animation: fadeIn .2s ease both; }
#renamebox .box { width: min(100%, 360px); padding: 18px; gap: 12px; background: var(--bg-2); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); border-radius: var(--r-lg); }
#renamebox .q { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
#renamebox .namerow { display: flex; gap: 8px; } #renamebox input { flex: 1; min-width: 0; min-height: 48px; font-size: 17px; font-weight: 600; }
#renamebox .sq { width: 48px; min-height: 48px; padding: 0; display: grid; place-items: center; } #renamebox .sq svg { width: 20px; height: 20px; }
#renamebox .hint { margin: 0; } #renamebox .row { display: flex; gap: 10px; } #renamebox .row button { flex: 1; min-height: 46px; }
#myinfo .nm { cursor: pointer; }

/* Host form: poker Advanced (variant, limit, ante, tournament) */
#pokerAdv { border-radius: var(--r-md); background: var(--sunk-2, rgba(0,0,0,.18)); box-shadow: inset 0 0 0 1px var(--panel-br); }
#pokerAdv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font-size: var(--fs-sm); font-weight: 650; color: var(--text); }
#pokerAdv > summary::-webkit-details-marker { display: none; }
#pokerAdv > summary::after { content: ''; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s; flex: 0 0 auto; }
#pokerAdv[open] > summary::after { transform: rotate(225deg) translate(-2px, 0); }
#pokerAdv .advsum { margin-left: auto; font-size: var(--fs-xs); font-weight: 550; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pokerAdv.custom .advsum { color: var(--gold); }
#pokerAdv[open] { padding-bottom: 12px; }
#pokerAdv .advrow { display: flex; flex-direction: column; gap: 6px; padding: 6px 14px 4px; }
#pokerAdv .advrow[hidden] { display: none; }
#pokerAdv .advl { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em; color: var(--text-2); }
#pokerAdv .seg { display: flex; flex-wrap: wrap; gap: 6px; }
#pokerAdv .seg button { flex: 1 1 auto; min-height: 42px; min-width: 0; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; background: var(--btn); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--btn-br); white-space: nowrap; }
#pokerAdv .seg button.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--btn)); box-shadow: inset 0 0 0 1.5px var(--accent); }
#pokerAdv .advhint { margin: 2px 14px 0; font-size: var(--fs-xs); }
#pokerAdv .seg[data-k="variant"], #pokerAdv .seg[data-k="rebuyLevels"] { display: grid; grid-template-columns: 1fr 1fr; }

/* Omaha: four / five hole cards, fanned (mine) and overlapped (other seats) */
#mycards.many { width: calc(var(--cw-lg) * (1 + (var(--n) - 1) * .5) + 14px); }
#mycards.many .hcw { left: calc(2px + var(--k) * var(--cw-lg) * .5); transform: rotate(var(--rot)); }
#mycards.many .hcw .hc { transition-delay: calc(var(--k) * .04s); }
#mycards.dealt.many .hcw { animation: hcDealM .55s var(--out) calc(var(--k) * .07s) both; }
@keyframes hcDealM { from { transform: translate(40px, -160px) rotate(-20deg); opacity: 0 } to { transform: rotate(var(--rot)); opacity: 1 } }
.seat .hole.many { gap: 0; flex-wrap: nowrap; }
.seat .hole.many > .card + .card { margin-left: calc(var(--cw-sm) * -.5); }
#players.compact .seat .hole.many > .card + .card { margin-left: calc(var(--cw-xs) * -.5); }
/* tournament results in the info sheet */
#rankList .tplace .n { font-size: 20px; background: none; box-shadow: none; }
#rankList .tplace .prize { margin-left: auto; font-family: var(--font-num); font-weight: 700; color: var(--gold); white-space: nowrap; }
#rankList .tplace.p1 b { color: var(--gold); }
#infoHint .tinfo2 { display: block; margin-top: 6px; color: var(--text-2); }
#rankList .tledger { width: 100%; min-height: 46px; margin-top: 10px; }

/* ---------- poker raise: big amount, sticky sizes, and Fold/Check step aside while you choose ---------- */
#raisePanel { gap: 10px; padding: 12px; }
#raisePanel .rhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
#raisePanel .rtag { justify-self: start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--muted); padding: 4px 9px; border-radius: var(--r-pill); background: transparent; transition: color .15s, background-color .15s; white-space: nowrap; }
#raisePanel .rtag.on { color: var(--accent-ink); background: var(--accent); }
#raisePanel .rsub { justify-self: end; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#raisePanel #raiseVal { width: 132px; padding: 8px 6px; font-size: 26px; border-radius: var(--r-md); }
#quick button { min-height: 40px; padding: 6px 2px; font-weight: 650; }
#quick button.on { color: var(--accent-ink); background: var(--accent); box-shadow: none; }
#quick button[hidden] { display: none; }
#raiseRow .rtrack { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
#raiseRow .rtrack input[type=range] { flex: 1; width: 100%; min-height: 48px; }
#rTicks { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 8px; pointer-events: none; }
#rTicks i { position: absolute; top: 0; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: color-mix(in srgb, var(--gold) 70%, transparent); }
#rMinus, #rPlus { width: 48px; flex-basis: 48px; min-height: 48px; }
/* a bigger, easier thumb */
#raiseSlider { -webkit-appearance: none; appearance: none; height: 48px; background: transparent; }
#raiseSlider::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), color-mix(in srgb, var(--gold) 20%, var(--sunk-2, rgba(0,0,0,.3)))); }
#raiseSlider::-moz-range-track { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--gold) 30%, transparent); }
#raiseSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent), 0 4px 10px rgba(0, 0, 0, .5); border: 0; }
#raiseSlider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
/* fixed limit: one size only, nothing to slide */
#raisePanel.fixed #quick, #raisePanel.fixed #raiseRow { display: none; }
#raisePanel.fixed #raiseVal { pointer-events: none; }
/* while choosing a raise: Fold and Check are gone (no mis-taps), Cancel takes their place, the raise button grows */
#bCancel { display: none; }
#actRow.raising #bFold, #actRow.raising #bCheck { display: none; }
#actRow.raising #bCancel { display: block; flex: 0 0 34%; color: var(--text); }
#actRow.raising #bRaise { flex: 1; animation: raiseIn .25s var(--spring); }
#bRaise.allin { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 70%, #fff) -40%, var(--danger) 45%, color-mix(in srgb, var(--danger) 70%, #000)); color: #fff; }
@keyframes raiseIn { from { transform: scale(.96); } to { transform: none; } }
/* the table behind dims a touch so the raise is the only thing in focus */
#game:has(#raisePanel.on) #board, #game:has(#raisePanel.on) #players { filter: brightness(.7) saturate(.85); transition: filter .2s; }
/* host form: number of hands */
#roundsBox .rounds { display: flex; gap: 8px; align-items: stretch; }
#roundsBox .rounds input { width: 96px; flex: 0 0 auto; }
#roundsBox .rpick { display: flex; gap: 6px; flex: 1; min-width: 0; }
#roundsBox .rpick button { flex: 1; min-width: 0; min-height: 44px; padding: 0 6px; font-size: var(--fs-sm); font-weight: 600; background: var(--btn); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--btn-br); border-radius: var(--r-sm); white-space: nowrap; }
#roundsBox .rpick button.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--btn)); box-shadow: inset 0 0 0 1.5px var(--accent); }
#roundsBox .hint { display: block; margin-top: 6px; font-size: var(--fs-xs); }
#roundsBox[hidden] { display: none; }
.xline .beenet { color: var(--gold); font-weight: 650; }
#roundsBox .rounds input { width: 74px; }
#roundsBox .rpick button[data-n=""] { flex: 1.7; }
/* host controls: number of hands */
#hostLimit { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--sunk-2, rgba(0,0,0,.18)); box-shadow: inset 0 0 0 1px var(--panel-br); }
#hostLimit[hidden] { display: none; }
#hostLimit .hl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#hostLimit .hlt { font-weight: 650; font-size: var(--fs-sm); color: var(--text); }
#hostLimit small { font-size: var(--fs-xs); color: var(--muted); text-align: right; } #hostLimit small b { color: var(--gold); }
#hostLimit .hlb { display: flex; gap: 6px; }
#hostLimit .hlb button { flex: 1; min-width: 0; min-height: 42px; padding: 0 4px; font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }
/* Number of hands: always visible on the host form */
#roundsBox { padding: 12px 14px; border-radius: var(--r-md); background: var(--sunk-2, rgba(0,0,0,.18)); box-shadow: inset 0 0 0 1px var(--panel-br); }
#roundsBox > label { font-size: var(--fs-sm); font-weight: 650; color: var(--text); margin-bottom: 8px; display: block; }

/* ============================================================ PWA install hint (pwa.js): one quiet line under the sign */
#installTip { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-br); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#installTip .t { flex: 1; min-width: 0; }
#installTip .primary { flex: 0 0 auto; padding: 8px 14px; min-height: 36px; font-size: var(--fs-sm); }
#installTip .x { width: 36px; min-height: 36px; height: 36px; background: transparent; box-shadow: none; }
#installTip .x svg { width: 18px; height: 18px; }

/* ============================================================ UX pass: one seat model, grouped menu, name pencil */
/* ⋯ menu groups: Table · Me · Settings, each with a quiet header (same look as the Settings header) */
#menu > .mhead { padding: 8px 12px 4px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
#menu > .msep { height: 1px; margin: 5px 10px 4px; background: var(--glass-br); flex: 0 0 auto; }
#menu button .ml { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
#menu button .ml small { margin-top: 2px; font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); white-space: normal; }
#menu button.m2 { padding-block: 9px; }
#menu button:disabled { opacity: .55; }
@media (orientation: landscape) and (max-height: 520px) { #menu > .mhead, #menu > .msep { grid-column: 1; } }
/* sitting out: the table name in the top bar gives way to one tap back in (visibility only: nothing moves) */
#awayPill { position: absolute; left: calc(12px + var(--sa-l)); top: calc(4px + var(--sa-t)); bottom: 4px; z-index: 1; max-width: calc(100% - 190px - var(--sa-l) - var(--sa-r)); display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 14%, var(--glass-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); color: var(--text); font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
#awayPill .adot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
#awayPill > span { overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
#awayPill b { display: inline-flex; align-items: center; height: calc(100% - 8px); padding: 0 12px; border-radius: var(--r-pill); background: var(--gold); color: var(--gold-ink); font-weight: 700; }
body.sitout #awayPill { visibility: visible; opacity: 1; transition: opacity .2s; }
body.sitout #tinfo { visibility: hidden; }
body.offline #awayPill { visibility: hidden; }
/* my name at the bottom: a small pencil says "tap to change" */
#myinfo .nm .pen { width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; opacity: .6; }
#myinfo .nm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* my session P/L on a real-money table (ledger.js #plPill): sits between the table name and the buttons,
   fixed width so the number changing never moves anything */
#plPill { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 76px; height: 40px; min-height: 0; padding: 0 10px; border-radius: var(--r-pill); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-br); color: var(--text); line-height: 1.05; }
#plPill[hidden] { display: none; }
#plPill .v { font: 800 var(--fs-sm)/1.05 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
#plPill small { font-size: var(--fs-2xs, 10px); font-weight: 600; color: var(--muted); letter-spacing: .02em; }
#plPill.pos .v { color: var(--accent); } #plPill.neg .v { color: var(--danger); }
#plPill.pos { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } #plPill.neg { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
@media (max-width: 359px) { #plPill { min-width: 64px; padding: 0 8px; } #plPill small { display: none; } }

/* raise sheet, quick sizes nearest the thumb (just above Raise): 4 or 5 slots (sizes for this street · All-in, Min only
   when it is clearly smaller), each a big target with the amount it makes it under the label; the size the bet is on now
   is lit. One row of fixed height whatever the count; the column count is set once per opening (--qn), so nothing moves
   as the amount changes. */
#raisePanel #quick { order: 1; display: grid; grid-template-columns: repeat(var(--qn, 5), minmax(0, 1fr)); grid-template-rows: 54px; height: 54px; gap: 6px; }
#raisePanel #quick button { height: 54px; min-height: 54px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-md); line-height: 1; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#raisePanel #quick button b { font-size: var(--fs-sm); font-weight: 750; white-space: nowrap; }
#raisePanel #quick button small { font: 650 var(--fs-xs)/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#raisePanel #quick button[data-q^="p"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
#raisePanel #quick button.on { color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
#raisePanel #quick button.on small { color: inherit; opacity: .8; }
#raisePanel #quick button.dup:not(.on) { opacity: .55; }
/* + / − hold to repeat: no selection, no callout, no double-tap zoom; a held button stays pressed */
#rMinus, #rPlus { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#rMinus.held, #rPlus.held { background: color-mix(in srgb, var(--gold) 28%, var(--btn)); transform: scale(.94); }
@media (max-width: 359px) { #raisePanel #quick { grid-template-rows: 50px; height: 50px; gap: 4px; } #raisePanel #quick button { height: 50px; min-height: 50px; } #raisePanel #quick button b { font-size: var(--fs-xs); } }

/* ============================================================ phone review v3 */
/* the raise sheet carries its own turn clock (my cards and their ring are under the sheet); pinned to the sheet's
   top edge, so showing / hiding it moves nothing. Amber in the last five seconds. */
#raisePanel .rclock { position: absolute; top: -11px; right: 14px; z-index: 1; min-width: 38px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); display: grid; place-items: center;
  font: 800 var(--fs-2xs)/22px var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); background: var(--bg-3); box-shadow: 0 0 0 1px var(--glass-br), var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s, background-color .3s, color .3s; }
/* the table's max bet, opposite the clock: always there on a capped table, so the sheet never shifts */
#raisePanel .rcap { position: absolute; top: -11px; left: 14px; z-index: 1; height: 22px; padding: 0 9px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font: 700 var(--fs-xs)/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--bg-2); box-shadow: 0 0 0 1px var(--glass-br); white-space: nowrap; }
#raisePanel .rcap[hidden] { display: none; }
#raisePanel .rclock.on { opacity: 1; visibility: visible; transition: opacity .2s, background-color .3s, color .3s; }
#raisePanel .rclock.warn { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold), 0 0 14px -2px var(--gold); }
@media (prefers-reduced-motion: reduce) { #raisePanel .rclock { transition: none; } }

/* seat tags: a tag and an amount size to their text inside the seat; long pairs drop the chip icon and tighten,
   very long ones shrink, so no amount is ever cut off ("All-in 1,105", "Raise 12500", "Trips") */
.seat .act .amt { white-space: nowrap; }
.seat .act.long { gap: 2px; }
.seat .act.long .amt .chip { display: none; }
.seat .act.long .tag { padding-inline: 5px; letter-spacing: 0; }
.seat .act.xlong .tag { padding-inline: 4px; font-size: clamp(8px, 2.3vw, 10px); }
.seat .act.xlong .amt { font-size: clamp(9px, 2.6vw, 11px); letter-spacing: -.01em; }
#players.compact .seat .act.long .tag.bet { display: none; }

/* the dealer button sits on the seat's right edge, below the corner (the host crown and the voice badge own the corners) */
.seat .dlr { top: 16px; right: -10px; }
#players.compact .seat .dlr, #players.tight .seat .dlr { top: 12px; right: -8px; }

/* the win line sits above anything dealt into the board; a cut (kaat) never shares the felt with the quip */
#board .midslot { z-index: 3; }
#board:has(#kaatPick) #quip, #board:has(.kaat) #quip { opacity: 0 !important; visibility: hidden !important; transition: opacity .15s, visibility 0s .15s; }
/* the cut only comes once the result has had its full time on screen; then the banner steps aside for it */
#board:has(#kaatPick) .midslot, #board:has(.kaat) .midslot { opacity: 0; pointer-events: none; transition: opacity .15s; }

/* light: the cut panel on the felt keeps the felt's dark surface (its text is the felt's light text) */
[data-theme="light"] #kaatPick .kcard { background: var(--glass-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px -12px rgba(0, 0, 0, .7); }
[data-theme="light"] #kaatPick .kwait, [data-theme="light"] .kaat .klbl { background: var(--glass-2); color: var(--text); border-color: rgba(255, 255, 255, .16); }
[data-theme="light"] #kaatPick.cutting .kcard { opacity: .85; }
[data-skin="paper"] #kaatPick .kcard { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 2px var(--ink-line), 3px 4px 0 var(--sunk-2); }

/* the table style sheet: a solid sheet on a full scrim, tall enough for all six styles on a 375 x 667 phone;
   when the list does scroll, a fade along its bottom edge says so */
#stylebox { background: var(--scrim); }
#stylebox .box { background: var(--bg-2); max-height: min(88vh, 620px); max-height: min(calc(100dvh - 24px - var(--sa-t)), 620px); }
#styleList { -webkit-mask-image: none; mask-image: none; }
#styleList.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
@media (max-height: 760px) {
  .sty { gap: 6px; padding: 6px; }
  .sty .mini { height: 40px; }
  .sty small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  #stylebox .hint { margin-bottom: 0; }
}

/* ============================================================ v5: Light / Dark polish
   Everything here uses the tokens at the top; see docs/DESIGN.md for the palette and the contrast table. */
/* Table settings: its parts sit flat inside the one folded panel (no box in a box) */
#tableSettings #roundsBox { padding: 0; background: none; box-shadow: none; border-radius: 0; }
#tableSettings #roundsBox > label { font-size: var(--fs-xs); color: var(--text-2); margin: 0 0 var(--sp-2) 2px; }
#tableSettings .row.fields { gap: var(--sp-2); }
#tableSettings #pokerAdv { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
#tableSettings #pokerAdv > summary { min-height: var(--tap); }
#pokerAdv .seg { gap: var(--sp-2); } #pokerAdv .seg button, #roundsBox .rpick button, #curSeg button { min-height: var(--tap); }
#roundsBox .rpick { gap: var(--sp-2); }
#roundsBox .rpick button.on, #pokerAdv .seg button.on { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--field)); box-shadow: inset 0 0 0 2px var(--accent); }
#moneyBox { margin-top: 0; }
/* feedback: five drawn faces (same icon family) instead of emoji */
#fbbox .fbrate button svg { width: 28px; height: 28px; }
#fbbox .fbrate button { filter: none; opacity: 1; }
#fbbox .fbrate button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transform: none; }
/* text fields: the same field everywhere (textarea included), a visible focus ring in both modes */
#fbText { background: var(--field); border-color: var(--field-br); font-size: var(--fs-md); }
#fbText:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
/* dialogs and sheets: the elevated surface, a hairline instead of a heavy shadow */
#infobox .box, #sharebox .box, #hostbox .box, #stylebox .box, .xsheet .box, #askbox .box, #renamebox .box, #voicebox .box { border: 1px solid var(--line); }
.box h3 { font-size: var(--fs-lg); }
/* the toast: the elevated surface with a hairline; errors stay red */
#toast { background: var(--bg-3); border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-lg); }
#toast.err { border-color: transparent; }
/* the game chip and the "$" mark lost their glow with Neon */
.usdb { box-shadow: none; }
/* seat badges: dealer button, host crown and voice badge each own a spot (crown top-left, voice top-right,
   dealer on the right edge below the voice badge); on light seats the crown and badge get the seat's surface */
.seat .crown, .vb { background: var(--seat); }
[data-theme="light"] .seat .dlr { box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(0, 0, 0, .1), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(0, 0, 0, .12); }
/* light: the win banner and the quip are on the felt (dark scope); the raise sheet is a light surface with dark text */
[data-theme="light"] #raisePanel { background: var(--bg-2); border-color: var(--line); }
[data-theme="light"] #raisePanel #raiseVal { color: var(--gold); }
[data-theme="light"] .chiprow button.on, [data-theme="light"] .chipbtn.on { color: var(--gold); }
/* the menu: grouped rows on the elevated surface */
#menu, #lobbyMenu { background: var(--bg-2); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
#menu button:disabled { opacity: .5; }
/* the game log's session count: a quiet tabular line under the title */
.xcount { margin: 0 2px; font-size: var(--fs-sm); font-weight: 650; color: var(--gold); font-variant-numeric: tabular-nums; min-height: 1.4em; }
/* filled buttons that carry white text: flat fills that keep white at 4.5 : 1 or better (see docs/DESIGN.md) */
#bRaise.allin { background: var(--danger-2); color: #fff; }
#bjSplit:not(:disabled) { background: #5b4f8f; color: #fff; box-shadow: none; }
button.dangerfill { box-shadow: none; }
/* on a break: the pill takes the table name's place in the bar's flex row (it used to float over the bar with a fixed
   max width, which collided with the host's Pause and the wider 44 px icons). Name and pill swap; the P/L pill and
   the buttons keep their exact spots. */
#awayPill { position: static; flex: 0 1 auto; min-width: 0; max-width: none; height: 40px; display: none; }
body.sitout #awayPill { display: inline-flex; }
body.sitout #tinfo { display: none; }
body.offline.sitout #awayPill { visibility: hidden; }

/* ===== v6f layout fixes ===== */
/* 1: the result banner sits above everything else on the felt (deck, picker, chip stacks) */
#board .midslot { position: relative; z-index: 12; } /* beats the kaat deck (9), its picker (10) and the stacks */
/* 7: short phones (<=700 px tall, e.g. 375 x 667): the board row ran over the rail and Blackjack's hand hung out of the
   felt. The big card size steps down one notch (58 -> 50 px at 375 x 667), and the blackjack hands follow it. */
@media (orientation: portrait) and (max-height: 700px) {
  :root { --cw-lg: clamp(44px, min(calc((100vw - 124px) / 5), 7.5vh), 56px); }
  #bjDealer, #bjMine, #bjDealer .card.lg, #bjMine .card.lg { --cw: clamp(30px, 6.8vh, var(--cw-lg)); }
  #bjMine.two, #bjMine.two .card.lg { --cw: clamp(28px, 5.6vh, calc(var(--cw-lg) * .8)); }
}
/* 3: compact / tight seats: names were 10.5 px and cut after ~5 characters ("Bartho..."). Names are 12 px and take the
   seat's whole width; with 7-8 opponents (two rows either way) a row holds five wider seats, so ~9 characters fit. */
#players.compact .seat .nm, #players.tight .seat .nm { font-size: 12px; padding: 0; margin-inline: -1px; letter-spacing: -.01em; max-width: none; min-width: 0; }
#players.compact .seat .ch, #players.tight .seat .ch { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 699px) {
  #players.crowd .seat { width: min(68px, calc((100vw - 32px - var(--sa-l) - var(--sa-r)) / 5)); }
  #players.crowd .seat .av { padding-inline: 1px; }
}
/* 4: the top bar is three zones. Left: the table name (only until the game starts; then it is engraved on the felt),
   or the bee line / break pill when they apply. Centre: the money pill (money tables) and the hands pill, the same
   shape, so the bar is symmetrical either way. Right: Mic / Pause / ⋯ / Leave. The blinds and the hand number moved
   to the felt's status line ("Hand 37 · Flop · 5/10"). */
#top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); column-gap: 8px; justify-content: stretch; } /* centre zone truly centred whenever the icons leave room */
#top > #tinfo, #top > #awayPill { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; }
#top > #pills { grid-column: 2; grid-row: 1; justify-self: center; display: flex; align-items: center; gap: 6px; }
#top > #topbtns { grid-column: 3; grid-row: 1; justify-self: end; }
#top.prestart > #tinfo { min-width: min(110px, 100%); }
#top.prestart > #pills { display: none; } /* before the first hand: the name has the room */
/* the break pill may use the centre zone too (the pills step aside while it shows) */
#top > #awayPill { grid-column: 1 / 3; }
body.sitout #top > #pills { visibility: hidden; }
#tinfo .tt .sub > b { grid-area: 1 / 1; min-width: 0; color: var(--text); font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s ease; }
#tinfo .tt .sub > b.sr { position: absolute; }
#awayPill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#awayPill .sh { display: none; }
@media (max-width: 400px) {
  #awayPill .lg { display: none; }
  #awayPill .sh { display: inline; }
}
/* the two pills: the same height and round ends as the icon buttons beside them (v8: they were 32 px against 44) */
#plPill, #handsPill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: var(--tb-h, 44px); align-self: center; min-height: 0; padding: 0 12px; border-radius: var(--r-pill); font: 700 var(--fs-sm)/1 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
#plPill { flex-direction: row; }
#plPill .v { font: inherit; }
#handsPill { color: var(--text-2); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line, var(--glass-br)); flex-direction: column; gap: 3px; padding-inline: 14px; }
/* "5th" big over a small "hand" (the same 44 px pill as the money one); a fixed-length game reads "37th / of 50" and
   its closing stretch turns danger-red, text and a 1 px ring (core.js: .near) */
#handsPill .n { font: 800 var(--fs-sm)/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); }
#handsPill .w { font: 600 10px/1 var(--font); color: var(--muted); letter-spacing: .02em; }
#handsPill.near { box-shadow: inset 0 0 0 1px var(--danger); }
#handsPill.near .n, #handsPill.near .w { color: var(--danger); }
#handsPill[hidden], #plPill[hidden] { display: none; }
@media (max-width: 359px) { #plPill, #handsPill { padding: 0 9px; } #handsPill .w { display: none; } }
/* the right cluster reads Mic, Pause, Leave, ⋯ (order only; the markup is unchanged) */
#topbtns > #voiceBtn { order: 1; } #topbtns > #pauseBtn { order: 2; } #topbtns > #leaveBtn { order: 3; } #topbtns > #menuBtn { order: 4; }
/* Leave is its icon under 400 px (the pills sit in the bar now); Pause is always an icon */
@media (max-width: 399px) and (orientation: portrait) {
  #top #leaveBtn { width: 44px; padding: 0; justify-content: center; }
  #top #leaveBtn .lv { display: none; }
}
/* the felt's engraved table name: the sign's face, small caps-like tracking, low contrast; near the felt's bottom edge */
#board .crest.named { display: flex; gap: 10px; max-width: calc(100% - 48px); }
.crest.named { opacity: .36; } /* low specificity on purpose: the cut, the raise sheet and the idle line still hide it */
[data-theme="light"] .crest.named { opacity: .5; } /* light felts: the engraved name was too faint at .36 */
#board .crest.named span { font-size: 11.5px; font-style: normal; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
#board .crest.named i { width: 22px; flex: 0 0 auto; }
#board .crest.named:has(.tn:empty) { display: none; }
/* Stadium (portrait): the seat ring sits on the rail, so the engraved name keeps clear of the side seats */
@media (max-width: 699px) and (orientation: portrait) { html[data-skin="stadium"] body[data-game="poker"] #board .crest.named { max-width: calc(100% - 136px); } }
/* 9: Display picker: the selected rule lost to the menu's button rule (#menu #settings .modes button is more specific),
   so in Dark the bright Light swatch read as the pick. Same specificity now; the pick is ringed and filled, the other
   option is flat and its swatch dimmed. */
#menu #settings .modes button[aria-checked="false"], #lobbyMenu #settings .modes button[aria-checked="false"] { color: var(--text-2); background: transparent; font-weight: 500; }
#menu #settings .modes button[aria-checked="false"] .sw, #lobbyMenu #settings .modes button[aria-checked="false"] .sw { opacity: .55; }
#menu #settings .modes button[aria-checked="true"], #lobbyMenu #settings .modes button[aria-checked="true"] { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); box-shadow: inset 0 0 0 2px var(--accent); }
/* 11: lobby. The game hint reserved three lines (35 px of nothing under the picker for a one-line hint): it takes what
   it needs. Phones on their side: a 56 px bar holds the ⋯ (it sat on the card), and the card scrolls on its own with
   Create pinned to its bottom edge, so it is never below the fold. */
#gameHint { min-height: 0; }
@media (orientation: landscape) and (max-height: 520px) {
  .lobby-in { padding-top: calc(56px + var(--sa-t)); }
  #lobbyMenuBtn { top: calc(4px + var(--sa-t)); }
  #playBox { position: sticky; top: calc(56px + var(--sa-t)); max-height: calc(100dvh - 72px - var(--sa-t) - var(--sa-b)); overflow-y: auto; overscroll-behavior: contain; }
  #playBox #createBtn { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 16px 4px var(--bg-2), var(--shadow); }
}

/* ============================================================ v8 owner round */
/* 3: cards a little bigger on phones: my two hole cards +9 %, the opponents' seat cards +11 %. Own tokens, so the board
   row (--cw-lg) and every other small card (log, ledger, blackjack seats) keep their size; the strip and the seats grow
   once by the same amount (their reserved heights read the same tokens), never per state. */
:root { --cw-hole: var(--cw-lg); --cw-seat: var(--cw-sm); --cw-seat-xs: var(--cw-xs); }
@media (max-width: 699px) { :root { --cw-hole: calc(var(--cw-lg) * 1.09); --cw-seat: calc(var(--cw-sm) * 1.11); --cw-seat-xs: calc(var(--cw-xs) * 1.11); } }
#mycards { --cw-lg: var(--cw-hole); }
body[data-game="poker"] .seat .hole, body[data-game="teenpatti"] .seat .hole { --cw-sm: var(--cw-seat); --cw-xs: var(--cw-seat-xs); }
/* 6: "Ron caught the bee · +50" on the felt, in the middle slot under the pot (core.js showBeeLine), 3 s; while it shows
   it has the slot (the street line steps aside), and a result banner always wins over it. Never in the top bar. */
#board { --bee-bg: var(--bg-2); }
/* the classic felt is a dark scope in Light too, but --bg-2 stays the page's light surface there: its own solid panel */
:root:not([data-skin]) #board:not(.roulette), [data-theme="light"] #board:not(.roulette) { --bee-bg: var(--glass-2); }
#beeLine { display: inline-flex; align-items: center; justify-content: center; gap: 6px; justify-self: center; max-width: 80%; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bee-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), var(--shadow); color: var(--gold); font: 650 var(--fs-xs)/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
#beeLine svg { width: 14px; height: 14px; flex: 0 0 auto; }
#beeLine span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.midslot:has(> #beeLine.on) > :not(#beeLine, #quip, #msg.on) { opacity: 0 !important; visibility: hidden !important; }
.midslot:has(> #msg.on) > #beeLine { opacity: 0 !important; visibility: hidden !important; }
#board > #beeLine { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; } /* roulette: no middle slot */
#board > #beeLine.on { opacity: 1; visibility: visible; transition: opacity .28s ease; }

/* ============================================================ v9 (owner feedback round)
   side pots on the felt · non-host break button · compact menu and style picker · host table settings · one-time tour ·
   flat lobby game tiles. Colours are tokens only. */

/* 1. side pots: small pills beside the pot pill, only while 2+ pots are live (the row keeps its height) */
#board .potrow { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; max-width: 100%; flex: 0 0 auto; }
#sidepots { display: flex; gap: 4px; min-width: 0; }
#sidepots:empty { display: none; }
#sidepots .spot { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; min-height: 0; padding: 0 8px; border-radius: var(--r-pill); background: var(--pill-bg); box-shadow: inset 0 0 0 1px var(--pill-br); color: var(--gold); font: 700 var(--fs-xs)/1 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; animation: fadeIn .25s ease both; }
#sidepots .spot::after { content: ''; position: absolute; inset: -10px -2px; } /* a 44 px tap target round a 24 px pill */
#sidepots .spot b { font: 600 var(--fs-2xs)/1 var(--font); color: var(--text-2); }
#sidepots .spot:nth-child(n+4) { display: none; }

/* 2. the tournament's level and clock ride on the hands pill (the bottom strip carries no blinds) */
#handsPill.tour .w { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 359px) { #handsPill.tour .w { display: block; } }

/* 5. non-hosts: Take a break in the Pause slot; on a break it is the play button (I'm back), like the host's paused state */
#topbtns > #breakBtn { order: 2; }
#top #breakBtn[data-st="away"] { color: var(--accent-ink); background: var(--accent); box-shadow: none; }
@media (max-width: 399px) and (orientation: portrait) {
  #top:has(#breakBtn:not([hidden])) #leaveBtn { width: 44px; padding: 0; justify-content: center; }
  #top:has(#breakBtn:not([hidden])) #leaveBtn .lv { display: none; }
}

/* 6. the ⋯ menu, compact: 40 px rows, 13 px labels, separators only, Display as one segmented row */
#menu, #lobbyMenu { padding: 4px; gap: 0; min-width: 236px; }
#menu button, #lobbyMenu button { min-height: 40px; padding: 0 10px; gap: 10px; font-size: 13px; font-weight: 550; }
#menu button svg, #lobbyMenu button svg { width: 17px; height: 17px; }
#menu button.m2 { padding-block: 6px; }
#menu button .ml small { margin-top: 1px; }
#menu > .msep, #settings .msep { margin: 4px 8px; }
#settings { gap: 0; }
#settings .mrow { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px 0 10px; }
#settings .mlbl { flex: 0 0 auto; font-size: 13px; font-weight: 550; color: var(--text); }
#settings .modes { display: inline-flex; margin-left: auto; padding: 2px; gap: 0; border-radius: var(--r-pill); background: var(--sunk-2); box-shadow: inset 0 0 0 1px var(--line); }
#menu #settings .modes button[aria-checked], #lobbyMenu #settings .modes button[aria-checked] { min-height: 0; height: 30px; padding: 0 10px; justify-content: center; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--text-2); background: transparent; box-shadow: none; }
#menu #settings .modes button[aria-checked="true"], #lobbyMenu #settings .modes button[aria-checked="true"] { color: var(--accent-ink); background: var(--accent); font-weight: 650; }
#menu #settings .stylerow, #lobbyMenu #settings .stylerow { gap: 10px; }
#settings .stylerow .cur { font-size: 13px; }
#settings #voiceTog .tog { margin-left: auto; position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--knob-off); box-shadow: inset 0 0 0 1px var(--field-br); transition: background-color .25s; flex: 0 0 auto; }
#settings #voiceTog .tog::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--thumb); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .3s var(--spring); }
#settings #voiceTog[aria-checked="true"] .tog { background: var(--accent-2); }
#settings #voiceTog[aria-checked="true"] .tog::after { transform: translateX(16px); }
#settings #voiceTog[aria-checked="false"] { color: var(--text-2); }
#lobbyMenu #voiceTog { display: none; }
@media (max-height: 520px) { #menu > button, #lobbyMenu > button { padding-block: 0; } }

/* 7. the style picker: a 3 x 2 grid of small tiles (56 x 36 swatch, the name under it), Done at the bottom */
#stylebox .box { max-height: none; }
#styleList { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; flex: 0 0 auto; }
#styleList .sty { flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; min-height: 0; }
#styleList .sty .mini { width: 56px; height: 36px; border-radius: 8px; }
#styleList .sty .mini i { left: 12%; right: 12%; top: 18%; bottom: 18%; box-shadow: 0 0 0 3px var(--c); }
#styleList .sty .nm { max-width: 100%; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#styleList .sty .ok { top: 4px; right: 4px; width: 16px; height: 16px; padding: 2px; }

/* 4. host controls: live table settings (from the next hand) above the hand limit */
#hostbox .box { max-height: calc(100dvh - 40px - var(--sa-t) - var(--sa-b)); overflow-y: auto; overscroll-behavior: contain; }
#hostSet { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 6px; border-radius: var(--r-md); background: var(--sunk-2); box-shadow: inset 0 0 0 1px var(--panel-br); }
#hostSet[hidden] { display: none; }
#hostSet .hl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
#hostSet .hlt { font-weight: 650; font-size: var(--fs-sm); color: var(--text); }
#hostSet .hl small { font-size: var(--fs-xs); color: var(--muted); text-align: right; }
#hostSet .hsr { display: flex; align-items: center; gap: 6px; min-height: 44px; }
#hostSet .hsl { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
#hostSet .hsv { min-width: 80px; text-align: center; font: 700 var(--fs-sm)/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); }
#hostSet .hsb { flex: 0 0 auto; width: 40px; height: 40px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); }
#hostSet .hsb svg { width: 16px; height: 16px; }

/* 3. the one-time tour: a dimmed screen with a cut-out round the thing being explained, a short caption, Next / Skip */
#tour { position: fixed; inset: 0; z-index: 40; display: none; }
#tour.on { display: block; animation: fadeIn .2s ease both; }
#tour .hole { position: fixed; border-radius: var(--r-md); box-shadow: 0 0 0 9999px var(--scrim); outline: 2px solid var(--accent); pointer-events: none; transition: left .3s var(--out), top .3s var(--out), width .3s var(--out), height .3s var(--out); }
#tour .cap { position: fixed; left: 16px; right: 16px; max-width: 360px; margin: 0 auto; padding: 14px 14px 10px; border-radius: var(--r-lg); background: var(--bg-2); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
#tour .cap p { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.4; }
#tour .row { display: flex; align-items: center; gap: 8px; }
#tour .ct { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
#tour .row button { min-height: 40px; padding: 0 16px; font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { #tour .hole { transition: none; } #tour.on { animation: none; } }

/* 8. lobby game tiles: flat, no outline. Unselected sit on --bg-3 (the play box itself is --bg-2); the selected one fills
   with its game's muted tint (each style tints its own way: --gt-* tokens), name in --text, icon in the game's ink */
#gamePick button { background: var(--bg-3); box-shadow: none; }
#gamePick button[data-g="poker"] { --gt: var(--gt-poker); --gi: var(--gi-poker); }
#gamePick button[data-g="blackjack"] { --gt: var(--gt-blackjack); --gi: var(--gi-blackjack); }
#gamePick button[data-g="roulette"] { --gt: var(--gt-roulette); --gi: var(--gi-roulette); }
#gamePick button[data-g="homebj"] { --gt: var(--gt-homebj); --gi: var(--gi-homebj); }
#gamePick button[data-g="teenpatti"], #gamePick button[data-g="tpmix"] { --gt: var(--gt-teenpatti); --gi: var(--gi-teenpatti); }
#gamePick .ico, #gamePick button.on .ico { width: 28px; color: var(--gi); background: transparent; }
#gamePick button.on { background: var(--gt); box-shadow: none; }
#gamePick button.on .gt { color: var(--text); font-weight: 700; }
#gamePick button.on small { color: var(--text-2); }

/* "Show cards" after a hand: a quiet pill beside my hole cards */
.showbtn { position: relative; z-index: 1; justify-self: center; align-self: center !important; margin: 0; padding: 0 22px; min-height: 44px; border-radius: 22px; border: 1px solid var(--btn-br); background: var(--btn); color: var(--text); box-shadow: var(--shadow, none); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; animation: showIn .2s ease-out; }
.showbtn[hidden] { display: none; }
@keyframes showIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* (it sits in the action row, in the "Next hand" line's place: never covered, never shifts the cards) */

/* reactions: the picker over a tapped seat, and the emoji that floats up from a seat */
#players .seat:not(.empty) .av { cursor: pointer; }
#reactPick { position: fixed; z-index: 60; display: none; gap: 6px; padding: 10px; width: min(348px, calc(100vw - 16px)); border-radius: 22px; background: var(--glass-2, var(--glass)); border: 1px solid var(--glass-br, rgba(127,127,127,.25)); box-shadow: 0 10px 32px rgba(0,0,0,.32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#reactPick.on { display: flex; flex-direction: column; animation: reactIn .14s ease-out; }
#reactPick .rehead { font-size: 12px; font-weight: 650; color: var(--muted); text-align: center; padding: 0 8px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reactPick button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; border: 0; cursor: pointer; min-height: 0; margin: 0; }
/* the emojis: eight equal cells, every glyph centred in its own 44 px target */
#reactPick .rerow { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
#reactPick .rerow button { position: relative; display: grid; place-items: center; width: 100%; height: 44px; padding: 0; background: none; box-shadow: none; font-size: 25px; line-height: 1; border-radius: 14px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
#reactPick .rerow button:active { transform: scale(.88); background: var(--hover, rgba(127,127,127,.12)); }
/* the tools: three equal labelled buttons (they were two bare icons squeezed in after the emojis) */
#reactPick .retools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
#reactPick .retools button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 8px; border-radius: 13px; background: var(--btn, rgba(127,127,127,.1)); box-shadow: inset 0 0 0 1px var(--glass-br, rgba(127,127,127,.2)); color: var(--text-2, var(--text)); font-size: 13px; font-weight: 650; white-space: nowrap; }
#reactPick .retools button[hidden] { display: none; }
#reactPick .retools svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
#reactPick .retools button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
#reactPick .retools button:active { transform: scale(.96); }
#reactPick .relines { display: flex; flex-direction: column; gap: 4px; max-height: 136px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
#reactPick .relines.more { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
#reactPick .relines button { flex: 0 0 42px; scroll-snap-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; font-size: 14px; font-weight: 600; text-align: left; padding: 0 12px; border-radius: 13px; background: var(--btn, rgba(127,127,127,.1)); box-shadow: none; color: var(--text); }
#reactPick .relines button:active { background: var(--hover, rgba(127,127,127,.2)); }
#reactPick .relend { display: flex; flex-direction: column; gap: 6px; }
#reactPick .lendrow { display: flex; gap: 6px; align-items: stretch; }
#reactPick #lendAmt { flex: 0 0 96px; width: 96px; min-width: 0; height: 42px; min-height: 0; font: 700 16px/1 var(--font-num, inherit); border-radius: 13px; padding: 0 10px; text-align: center; }
#reactPick .lendq { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
#reactPick .lendq button { height: 42px; padding: 0 2px; border-radius: 12px; background: var(--btn, rgba(127,127,127,.1)); box-shadow: inset 0 0 0 1px var(--glass-br, rgba(127,127,127,.2)); color: var(--text); font: 700 13px/1 var(--font-num, inherit); font-variant-numeric: tabular-nums; }
#reactPick .lendq button.on { background: color-mix(in srgb, var(--gold) 18%, transparent); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
#reactPick .lendgo { height: 44px; border-radius: 13px; background: var(--gold); color: var(--gold-ink, #1b1405); font-size: 15px; font-weight: 750; box-shadow: none; }
#reactPick .lendgo:disabled { opacity: .45; }
#reactPick .lendnote { margin: 0; font-size: 11.5px; line-height: 1.3; color: var(--muted); text-align: center; }
#reactPick .rewrite[hidden], #reactPick .relines[hidden], #reactPick .relend[hidden] { display: none; }
@keyframes reactIn { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
.reactfly { position: fixed; z-index: 55; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); animation: reactUp 3.4s cubic-bezier(.2,.7,.3,1) forwards; }
.reactfly .rt { max-width: 220px; padding: 7px 12px; border-radius: 16px; background: var(--glass-2, #fff); color: var(--text, #111); border: 1px solid var(--glass-br, rgba(0,0,0,.15)); font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.reactfly.txt { animation-name: reactTxt; animation-duration: 4.8s; }
@keyframes reactTxt { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 8% { opacity: 1; transform: translate(-50%, -80%) scale(1.04); } 14% { transform: translate(-50%, -85%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -110%); } 100% { opacity: 0; transform: translate(-50%, -140%); } }
.reactfly .re { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.reactfly small { margin-top: 2px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: var(--pill-bg, rgba(0,0,0,.45)); color: var(--text, #fff); white-space: nowrap; }
@keyframes reactUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 30% { transform: translate(-50%, -70%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .reactfly { animation-duration: 2.6s; } }

#reactPick button[data-e].holding { transform: scale(1.18); background: var(--hover, rgba(127,127,127,.14)); transition: transform .12s; }
#reactPick button[data-e]::after { content: attr(data-n); position: absolute; left: 50%; top: -9px; transform: translateX(-50%); min-width: 24px; box-sizing: border-box; padding: 0 6px; font: 800 12px/18px var(--font-num, var(--font, system-ui)), system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: center; white-space: nowrap; color: var(--accent-ink, #fff); background: var(--accent); border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.25); display: none; z-index: 1; }
#reactPick button[data-e].holding::after { display: block; }
.reactfly .re { font-size: calc(34px * var(--rs, 1)); }
.reactfly.burst small { display: none; }
#reactPick .rewrite { display: flex; gap: 6px; }
#reactPick .rewrite input { flex: 1; min-width: 0; height: 42px; min-height: 0; font-size: 16px; border-radius: 13px; padding: 0 12px; }
#reactPick .rewrite .resend { height: 42px; padding: 0 16px; font-size: 14px; font-weight: 700; border-radius: 13px; background: var(--accent); color: var(--accent-ink, #fff); box-shadow: none; }

/* reactions on a seat in the top row float down onto the felt instead of up into the top bar */
.reactfly.down { animation-name: reactDown; }
.reactfly.txt.down { animation-name: reactTxtDown; }
@keyframes reactDown { 0% { opacity: 0; transform: translate(-50%, -70%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -40%) scale(1.15); } 30% { transform: translate(-50%, -30%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 90%) scale(1); } }
@keyframes reactTxtDown { 0% { opacity: 0; transform: translate(-50%, -70%) scale(.8); } 8% { opacity: 1; transform: translate(-50%, -20%) scale(1.04); } 14% { transform: translate(-50%, -15%) scale(1); } 80% { opacity: 1; transform: translate(-50%, 10%); } 100% { opacity: 0; transform: translate(-50%, 40%); } }
/* bee: my tap is in, waiting for the verdict (the far-away phones get a moment) */
.bee.tapped .bz { animation: beeTapped .5s ease-in-out infinite alternate; }
@keyframes beeTapped { from { transform: scale(1.15) rotate(-10deg); } to { transform: scale(1.15) rotate(10deg); } }
/* 🔥 right after a hot player's name while the bee flies: they've been catching it, their time counts a little slower */
.beeflame { position: fixed; z-index: 7; transform: translateY(-50%); font-size: 12px; white-space: nowrap; letter-spacing: -2px; line-height: 1; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); animation: flameIn .25s ease-out; }
@keyframes flameIn { from { opacity: 0; transform: translateY(-30%) scale(.6); } to { opacity: 1; transform: translateY(-50%); } }
.bee.hot .pot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent), 0 2px 6px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) { .bee.tapped .bz { animation: none; transform: scale(1.15); } }
/* "on fire": flames around a monster hand at the showdown (fire.js). The canvas sits over the table, under sheets
   (z 8) and the bee (6); the cards are cut out of the fire so it burns behind them. */
#fireFx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; display: none; }
#fireGL { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; display: none; } /* the flames (WebGL); sparks (#fireFx) above */
.card.onfire, .hc.onfire { box-shadow: 0 -4px 18px 2px color-mix(in srgb, var(--fire) 55%, transparent), 0 0 30px 6px color-mix(in srgb, var(--fire) 22%, transparent) !important; animation: fireGlow .13s steps(2, jump-none) infinite alternate; z-index: 6; } /* firelight on the card, flickering */
.hc.onfire { border-radius: 10px; }
@keyframes fireGlow { 0% { filter: brightness(1.02) sepia(.06); } 50% { filter: brightness(1.09) sepia(.12); } 100% { filter: brightness(1.04) sepia(.08); } }
@media (prefers-reduced-motion: reduce) { .card.onfire, .hc.onfire { animation: none; } }

/* bee heat under a hot player's seat, all the time (core.js paintHeat) */
.seat .av > .heatb { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 3; font-style: normal; font-size: 10px; line-height: 16px; height: 16px; padding: 0 5px; border-radius: 8px; white-space: nowrap; letter-spacing: -2px; background: var(--pill-bg, rgba(0,0,0,.55)); border: 1px solid rgba(255,140,40,.45); box-shadow: 0 0 8px -2px rgba(255,120,30,.6); pointer-events: none; animation: heatIn .3s ease-out; }
@keyframes heatIn { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%); } }
.seat .av > .heatb[data-l="3"] { box-shadow: 0 0 10px -1px rgba(255,90,20,.85); }
#myinfo .nm > .heatb { font-style: normal; font-size: 11px; margin-left: 4px; letter-spacing: -2px; vertical-align: 0; }

/* the rare "cards burn" (fire.js scorch): an ember line climbs the card, charring it, then the card comes back */
.scorchfx { position: absolute; inset: 0; z-index: 6; overflow: hidden; border-radius: inherit; pointer-events: none; font-style: normal; text-decoration: none; }
.scorchfx b { position: absolute; left: -10%; right: -10%; height: 230%; top: 100%;
  background:
    linear-gradient(to top, #0d0605 0%, #160807 34%, #2a0c08 40%, #7a1a0a 42.5%, #ff5a1a 44%, #ffd27a 45%, #fff3d6 45.6%, rgba(255,140,60,.55) 47%, rgba(120,30,10,.18) 50%, transparent 54%);
  animation: scorchUp var(--sd, 3s) cubic-bezier(.45,.05,.55,.95) var(--sk, 0s) forwards; }
.scorchfx b::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(103deg, transparent 0 9px, rgba(255,90,20,.18) 9px 10px, transparent 10px 23px), repeating-linear-gradient(71deg, transparent 0 13px, rgba(255,60,10,.12) 13px 14px, transparent 14px 31px); -webkit-mask-image: linear-gradient(to top, #000 0 38%, transparent 44%); mask-image: linear-gradient(to top, #000 0 38%, transparent 44%); }
.scorchfx.heal { animation: scorchHeal 1s ease forwards; }
@keyframes scorchUp { 0% { transform: translateY(0); } 15% { transform: translateY(-14%); } 100% { transform: translateY(-82%); } }
@keyframes scorchHeal { to { opacity: 0; filter: blur(2px); } }
.card:has(> .scorchfx), .hc .face:has(> .scorchfx) { animation: scorchShake .09s linear 6 alternate; }
@keyframes scorchShake { from { translate: -.6px 0; } to { translate: .6px .4px; } }
@media (prefers-reduced-motion: reduce) { .scorchfx b { animation-duration: .01s; } .card:has(> .scorchfx) { animation: none; } }

/* ---- Teen Patti ---- */
#tpStakes.pill { display: inline-flex; gap: 10px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
#tpStakes.pill span b { color: var(--text); font-weight: 750; margin-left: 2px; font-variant-numeric: tabular-nums; }
#board.teenpatti .potrow { flex-wrap: wrap; }
.tpcue { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); text-align: center; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s, max-height .25s; }
.tpcue.on { opacity: 1; max-height: 40px; }
.tpcue b { color: var(--text); }
#tpAns #tpYes { flex: 1.6 1 0; }
.tpcue { padding: 0 10px; }
#tpAct button.alt { filter: saturate(.7); }
.seat .tag.isblind { background: var(--sunk-2); color: var(--text-2); }
.seat .tag.isseen { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); }
.seat.sshow .av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
#board.teenpatti.idle .crest { opacity: 1; }

/* ---- Khichdi (Teen Patti with rotating rules): the mode line on the felt, joker badges, the rules list ---- */
.tpmode { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 6px auto 0; padding: 5px 12px; max-width: min(94%, 440px); border-radius: 14px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; color: var(--text-2); background: var(--pill-bg, rgba(0,0,0,.28)); text-align: center; }
.tpmode[hidden] { display: none; }
.tpmode b { color: var(--text); font-weight: 750; letter-spacing: .01em; }
.tpmode .cnt { font-variant-numeric: tabular-nums; opacity: .8; }
.tpmode .cnt::before, .tpmode .rule::before, .tpmode .nx::before { content: '\00b7'; margin-right: 8px; opacity: .6; }
.tpmode .nx.soon { color: var(--gold); font-weight: 700; }
.tpmode:not([data-m="normal"]) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.tpmode:not([data-m="normal"]) b { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.tpmode.flip { animation: tpModeIn .9s cubic-bezier(.2,.8,.3,1); }
@keyframes tpModeIn { 0% { transform: scale(.7); opacity: 0; } 35% { transform: scale(1.14); opacity: 1; } 60% { transform: scale(.97); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tpmode.flip { animation: none; } }
.card.jk, #mycards .hc.jk .side.face .card { box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(0,0,0,.25); }
.card.jk::after, #mycards .hc.jk .side.face::after { content: 'JOKER'; position: absolute; left: 4%; bottom: 5%; padding: 0 3px; border-radius: 5px; background: var(--gold); color: var(--gold-ink, #1b1405); font: 800 7.5px/12px var(--font, system-ui), sans-serif; letter-spacing: .02em; white-space: nowrap; z-index: 2; pointer-events: none; }
.seat .card.jk::after { content: 'J'; font-size: 8px; line-height: 11px; padding: 0 3px; left: 50%; transform: translateX(-50%); bottom: 4%; }
.mixinfo { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--soft, rgba(127,127,127,.1)); }
.mixinfo p { margin: 0 0 6px; } .mixinfo p:last-child { margin: 0; }
.mixinfo ol { margin: 0 0 6px; padding-left: 20px; } .mixinfo li { margin: 2px 0; }
.mixinfo li.cur { color: var(--text); } .mixinfo li.cur::marker { color: var(--gold); font-weight: 800; } .mixinfo li.cur b:first-child { color: var(--gold); }
.mixinfo .now { font-weight: 600; color: var(--text); }

/* v10: the top bar never pushes its buttons off the screen. The right cluster keeps its full width; the centre pills
   take what is left and shrink (the money pill shortens its own text: ledger.js pillMoney); the name gives way first. */
#top { grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(max-content, 1fr); }
#top > #pills { min-width: 0; max-width: 100%; }
#top > #topbtns { min-width: max-content; }
#plPill { flex: 0 1 auto; min-width: 0; overflow: hidden; }
#plPill .v { display: block; min-width: 0; overflow: hidden; text-overflow: clip; }
#handsPill { flex: 0 0 auto; }
@media (max-width: 399px) { #plPill, #handsPill { padding-inline: 10px; } #top > #pills { gap: 4px; } #topbtns { gap: 3px; } #top { column-gap: 6px; } }

/* v10: the show for hands rarer than a full house (fire.js spectacle). One fixed layer, never in the layout. */
.fireshow { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; contain: strict; transition: opacity .5s ease; }
.fireshow.out { opacity: 0; }
.fireshow i { position: absolute; display: block; font-style: normal; }
.fireshow .fsflash { inset: 0; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fs-c) 55%, transparent), color-mix(in srgb, var(--fs-c) 12%, transparent) 55%, transparent 80%); opacity: 0; animation: fsFlash 1.1s ease-out both; }
.fireshow.t3 .fsflash, .fireshow.t4 .fsflash { animation: fsFlash 1.1s ease-out both, fsFlicker .9s .28s steps(1) both; }
.fireshow.t4 .fsflash { background: radial-gradient(ellipse at 50% 45%, rgba(255, 215, 90, .6), rgba(111, 184, 255, .18) 55%, transparent 80%); }
/* a soft tint of the hand's colour holds around the edge of the screen for as long as it burns */
.fireshow::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 90px 10px color-mix(in srgb, var(--fs-c) 34%, transparent); opacity: 0; animation: fsEdge var(--fs-ms) ease both; }
.fireshow .fsring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--fs-c); box-shadow: 0 0 24px 4px color-mix(in srgb, var(--fs-c) 60%, transparent), inset 0 0 18px color-mix(in srgb, var(--fs-c) 50%, transparent); opacity: 0; animation: fsRing 1.15s cubic-bezier(.15, .7, .3, 1) both; }
.fireshow.t4 .fsring { border-color: #ffd75a; }
.fireshow .fsrays { width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 215, 90, .2) 0 7deg, transparent 7deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 22%, transparent 52%); mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 22%, transparent 52%); opacity: 0; animation: fsRays var(--fs-ms) linear both; }
.fireshow .fsbolts { position: absolute; inset: 0; width: 100%; height: 100%; }
.fireshow .fsbolts g { opacity: 0; animation: fsBolt .5s steps(1) both; }
.fireshow .fsbolts path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fireshow .fsbolts path.g { stroke: var(--fs-c); stroke-width: 9; opacity: .55; filter: blur(3px); }
.fireshow.t4 .fsbolts path.g { stroke: #ffd75a; }
.fireshow .fstitle::before { content: ''; position: absolute; inset: -34px -60px; z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 45%, transparent 72%); }
.fireshow .fstitle { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 32px); text-align: center; animation: fsTitle var(--fs-ms) cubic-bezier(.2, 1.3, .3, 1) both; }
.fireshow .fstitle b { font: 800 clamp(26px, 8.4vw, 44px)/1 var(--font-display, var(--font)); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 14px var(--fs-c), 0 0 38px var(--fs-c), 0 2px 0 rgba(0,0,0,.45); white-space: nowrap; }
.fireshow.t2 .fstitle b { color: #fff3c4; }
.fireshow.t4 .fstitle b { font-size: clamp(30px, 9.6vw, 52px); background: linear-gradient(100deg, #b8862b 0%, #ffe9a0 28%, #fff 46%, #ffd75a 62%, #b8862b 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(255, 200, 70, .75)) drop-shadow(0 2px 0 rgba(0,0,0,.5)); animation: fsShine 2.2s linear infinite; }
.fireshow .fstitle small { font: 700 13px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-c) 60%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fireshow .fstitle small:empty { display: none; }
.fireshow .fscrown { width: 46px; height: 46px; fill: #ffd75a; stroke: #7a5510; stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(255, 200, 70, .9)); animation: fsCrown 1s .2s cubic-bezier(.2, 1.6, .3, 1) both; }
#board.fsshake { animation: fsShake .5s linear both; }
#board.fsshake3 { animation: fsShake3 .9s .25s linear both; }
@keyframes fsFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fsFlicker { 0% { filter: brightness(2.4); opacity: .9; } 12% { opacity: 0; } 55% { filter: brightness(2.4); opacity: .8; } 66%, 100% { opacity: 0; } }
@keyframes fsEdge { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fsRing { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(14); border-width: .4px; } }
@keyframes fsRays { 0% { opacity: 0; transform: rotate(0) scale(.6); } 12% { opacity: 1; transform: rotate(8deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(60deg) scale(1); } }
@keyframes fsBolt { 0% { opacity: 1; } 18% { opacity: .15; } 30% { opacity: 1; } 55% { opacity: .5; } 70%, 100% { opacity: 0; } }
@keyframes fsTitle { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); filter: blur(8px); } 7% { opacity: 1; transform: translate(-50%, -50%) scale(.94); filter: none; } 11% { transform: translate(-50%, -50%) scale(1.04); } 15%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -64%) scale(1.02); } }
@keyframes fsShine { to { background-position: -220% 0; } }
@keyframes fsCrown { 0% { opacity: 0; transform: translateY(-34px) scale(.4) rotate(-18deg); } 100% { opacity: 1; transform: none; } }
@keyframes fsShake { 0%, 100% { transform: none; } 15% { transform: translate(-3px, 2px); } 30% { transform: translate(3px, -2px); } 45% { transform: translate(-2px, -1px); } 60% { transform: translate(2px, 1px); } 80% { transform: translate(-1px, 0); } }
@keyframes fsShake3 { 0%, 100% { transform: none; } 6% { transform: translate(-6px, 3px) rotate(-.4deg); } 12% { transform: translate(6px, -3px) rotate(.4deg); } 20% { transform: translate(-4px, -2px); } 28% { transform: translate(4px, 2px); } 55% { transform: none; } 60% { transform: translate(-5px, 2px) rotate(-.3deg); } 68% { transform: translate(5px, -2px) rotate(.3deg); } 78% { transform: translate(-2px, 1px); } }
.fireshow.still .fsflash, .fireshow.still::after, .fireshow.still .fsrays { animation: none; opacity: 0; }
.fireshow.still .fstitle { animation: fsStill var(--fs-ms) ease both; }
@keyframes fsStill { 0%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }

/* v10: table rules. The lobby shows a short card (what is set, in words); the sheet has the form in five numbered
   groups, every number with a row of presets beside a box for your own. */
.setcard { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; min-height: 0; height: auto; padding: 12px 14px; text-align: left; border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; }
.setcard:active { transform: scale(.99); }
.setcard .sc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.setcard .sc-t { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em; color: var(--text-2); }
.setcard .sc-go { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 6px 0 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.setcard .sc-go svg { width: 16px; height: 16px; }
.setcard .sc-rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.setcard .sc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setcard .sc-main b { font: 750 var(--fs-md)/1.2 var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.setcard .sc-main span { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.setcard .sc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.setcard .sc-tags i { font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: var(--r-pill); color: var(--text-2); background: var(--btn); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
#setbox .box { gap: 0; }
#setbox #setLead { margin: 0 0 4px; }
#tableSettings { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
#tableSettings .sg { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
#tableSettings .sg[hidden], #tableSettings .sf[hidden], #tableSettings #tpAdv[hidden], #tableSettings .pk[hidden] { display: none; }
#tableSettings .sg > h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 750 var(--fs-sm)/1 var(--font); letter-spacing: .01em; color: var(--text); }
#tableSettings .sg > h4 i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 800 11px/1 var(--font-num, var(--font)); font-style: normal; color: var(--accent-ink, #fff); background: var(--accent); }
#tableSettings .sf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#tableSettings #tpAdv { display: flex; flex-direction: column; gap: 6px; }
#tableSettings .sf > label, #tableSettings .sf .flabel, #tableSettings .sf.two label { margin: 0; font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }
#tableSettings .sh { margin: -2px 0 2px; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: left; }
#tableSettings .sh:empty { display: none; }
#tableSettings .sh b { color: var(--text-2); font-weight: 650; }
#tableSettings .sf.two { flex-direction: row; gap: 8px; } #tableSettings .sf.two > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#tableSettings .pk { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
#tableSettings .pk .rpick { display: flex; gap: 6px; flex: 1; min-width: 0; }
#tableSettings .pk .rpick button { flex: 1 1 auto; min-width: 0; min-height: var(--tap); height: var(--tap); padding: 0 7px; letter-spacing: -.01em; border-radius: var(--r-sm); font: 650 var(--fs-sm)/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--btn); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
#tableSettings .pk .rpick button.on, #tableSettings .seg button.on { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--field)); box-shadow: inset 0 0 0 2px var(--accent); }
#tableSettings .pk > input { flex: 0 0 70px; width: 70px; min-width: 0; height: var(--tap); min-height: 0; padding: 0 8px; text-align: center; font-variant-numeric: tabular-nums; }
#tableSettings #roundsBox .rounds input { width: 70px; flex: 0 0 70px; }
#tableSettings #roundsBox .hint { text-align: left; margin: 0; }
#tableSettings #roundsBox > label { margin: 0; }
#tableSettings #roundsBox .rpick button[data-n=""] { flex: none; }
#tableSettings #tpBuySeg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#tableSettings #tpBuySeg button { min-height: var(--tap); padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 650; background: var(--btn); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
#tableSettings #tpBuySeg button.on { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--field)); box-shadow: inset 0 0 0 2px var(--accent); }
#tableSettings .switch { padding: 0; }
#tableSettings #pokerAdv { background: var(--bg-2); }
#tableSettings #moneyBox { display: flex; flex-direction: column; gap: 10px; } #tableSettings #moneyBox[hidden] { display: none; }
@media (max-width: 359px) { #tableSettings .pk > input { flex-basis: 64px; width: 64px; } #tableSettings .sg { padding: 12px 10px; } }

#myinfo .chips small.mv { margin-left: 6px; white-space: nowrap; }
/* the smallest phones (320 px): Take a break lives in the menu only, so the money pill keeps its room */
@media (max-width: 359px) {
  #topbtns > #breakBtn { display: none !important; }
  #raisePanel .rsub { display: none; }
  #reactPick { padding: 8px; } #reactPick .retools { gap: 4px; } #reactPick .retools button { font-size: 12px; gap: 4px; padding: 0 4px; } #reactPick .retools svg { width: 15px; height: 15px; }
  #reactPick #lendAmt { flex-basis: 78px; width: 78px; }
}

/* the money ledger: loans between players */
.xloans { display: flex; flex-direction: column; gap: 6px; }
.xloan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); }
.xloan .w { min-width: 0; color: var(--text-2); } .xloan .w b { color: var(--text); font-weight: 650; } .xloan .w small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.xloan .a { flex: 0 0 auto; text-align: right; font: 750 var(--fs-sm)/1.15 var(--font-num, var(--font)); font-variant-numeric: tabular-nums; color: var(--gold); } .xloan .a small { display: block; font: 600 var(--fs-xs)/1.2 var(--font); color: var(--muted); }

/* the quick guide (first table) */
.glist { display: flex; flex-direction: column; gap: 4px; }
.grow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; }
.grow + .grow { border-top: 1px solid var(--line); }
.grow .gi { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.grow .gi svg { width: 20px; height: 20px; }
.grow .gt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grow .gt b { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.grow .gt small { font-size: 13px; line-height: 1.4; color: var(--text-2); }
/* leaderboard (experimental) */
#boardBox[hidden] { display: none; }
.ocount.beta { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
#boardList { display: flex; flex-direction: column; gap: 6px; }
.brow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.brow.top { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.brow .rk { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--font-num, var(--font)); color: var(--text-2); background: var(--btn); }
.brow.top .rk { color: var(--gold-ink, #1b1405); background: var(--gold); }
.brow .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brow .who b { font-size: var(--fs-sm); font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .who small { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.brow .net { flex: 0 0 auto; font: 800 var(--fs-sm)/1 var(--font-num, var(--font)); font-variant-numeric: tabular-nums; color: var(--text-2); }
.brow .net.pos { color: var(--accent); } .brow .net.neg { color: var(--danger); }
#boardBox .bcur { margin: 6px 2px 0; font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }
#boardBox .bnote { margin: 8px 2px 0; font-size: var(--fs-xs); text-align: left; }
@media (max-width: 420px) { #tableSettings .pk .rpick button { font-size: 13px; padding: 0 2px; text-overflow: clip; } #tableSettings .pk > input, #tableSettings #roundsBox .rounds input { flex-basis: 60px; width: 60px; padding: 0 4px; } #tableSettings .pk, #tableSettings .pk .rpick { gap: 5px; } }
/* my stack never slides under my cards: on a full table with big stacks (6 digits + the money value) the row was one
   unbreakable line wider than the room beside a three-card hand. The money value drops to its own line first, then
   "chips"; the number itself stays whole. */
#myinfo .chips { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 5px; row-gap: 2px; max-width: 100%; min-width: 0; white-space: normal; }
#myinfo .chips small, #myinfo .chips small.mv { margin-left: 0; white-space: nowrap; }
@media (max-width: 359px) { #myinfo .chips { font-size: var(--fs-xl); } }
@media (min-width: 700px) and (orientation: landscape), (min-width: 900px) { #myinfo .chips { justify-content: flex-start; } }
/* a full table on the narrowest phones (5 seats a row at 320 px): the tag + amount under a seat stay inside the seat */
@media (max-width: 359px) {
  #players .seat .act { gap: 3px; max-width: calc(100% + 6px); }
  #players .seat .act .amt .chip { display: none; }
  #players .seat .act .tag { font-size: 9px; padding-inline: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #players .seat .act .amt { font-size: 10.5px; }
}

/* v11: the money pill is stacked like the hands pill: the amount (sign + currency) over a small "▲ profit" / "▼ loss" / "even" */
#plPill { flex-direction: column; gap: 3px; padding-inline: 13px; }
#plPill .v { font: 800 var(--fs-sm)/1 var(--font-num); overflow: visible; }
#plPill .w { font: 650 10px/1 var(--font); letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
#plPill.pos .w { color: var(--accent); } #plPill.neg .w { color: var(--danger); }
#plPill.pos { background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); } #plPill.neg { background: color-mix(in srgb, var(--danger) 8%, var(--bg-2)); }
@media (max-width: 359px) { #plPill .w { display: none; } }