/* Cambio v0.1.12 (v0.2.7.3: table ad off, voice bubble) – portrait-first setup, landscape gameplay; Art Bible skin (tokens in css/tokens.css) */
/* Layout (v0.1.7): every screen = a STAGE plus that screen's dedicated ad zones (js/ads.js planZones()).
   The stage is the rectangle the game UI, modals, the zoom view, the emoji drawer, sheets and toasts are
   confined to; the zones are columns / bands outside it (#ad-layer), so an ad can never sit on the table, a
   card, a button, the timer or the drawer. app.js writes the stage insets (--st-l/t/r/b, safe areas included)
   for the current screen: table (left + right gutters), lobby (top banner + side 300x250), scoreboard and
   pass-and-play cover (side 300x250), settings / room (top banner). No zones -> the stage is the safe area.
   Themes: <html data-theme="family|evening"> (Art Bible tokens); no room art in v0.1.12 (flat room gradient). */
:root {
  /* safe areas + stage insets (overridden inline by app.js from CambioAds.planZones) */
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --sat: env(safe-area-inset-top, 0px);  --sab: env(safe-area-inset-bottom, 0px);
  --ad-label-h: 16px;
  --st-l: var(--sal); --st-r: var(--sar); --st-t: var(--sat); --st-b: var(--sab);
  --stage-w: calc(100vw - var(--st-l) - var(--st-r));
  --stage-h: calc(100vh - var(--st-t) - var(--st-b));
  /* v0.1.12: one "stage unit" = 1% of the stage height (not the viewport), so the table scales into the stage left
     by the 320x50 top strip at 568x320 / 640x340 exactly as it does under no strip. */
  --u: calc(var(--stage-h) / 100);
  /* Table screen: play area on the left of the stage, one labelled action column on the right. */
  --col-w: clamp(86px, calc(var(--stage-w) * .17), 112px);
  --play-l: 12px;
  --play-r: calc(var(--col-w) + 28px);
  --play-w: calc(var(--stage-w) - var(--play-l) - var(--play-r));
  --play-cx: calc(var(--play-l) + var(--play-w) / 2);
  --gap: 8px;
  /* palette: v0.1.12 maps every legacy name onto the Art Bible tokens (css/tokens.css, [data-theme]) */
  --room: var(--c-bg);
  --felt-a: var(--c-felt); --felt-b: var(--c-felt); --felt-c: var(--c-felt-edge); --felt-d: var(--c-felt-edge);
  --rail-a: var(--c-rail-hi); --rail-b: var(--c-rail-lo); --rail-line: var(--c-felt-line);
  --accent: var(--c-accent); --accent-2: var(--c-accent-press); --accent-ink: var(--c-on-accent);
  --accent-soft: color-mix(in srgb, var(--c-accent) 12%, transparent);
  --text: var(--c-ink); --muted: var(--c-text-2); --faint: color-mix(in srgb, var(--c-ink) 8%, transparent);
  --panel: var(--c-surface); --panel-solid: var(--c-surface); --panel-line: var(--c-border);
  --input: var(--c-surface-2);
  --danger: var(--c-danger);
  --card-face: var(--c-card-face); --card-ink: var(--c-card-ink); --card-red: var(--c-card-red);
  --card-back: url('../assets/cards/back-linen-lattice.svg');
  --runner: none;
  /* type scale (px): 11 · 12 · 13 · 15 · 18 · 22 */
  --fs-xs: 11px; --fs-s: 12px; --fs-m: 13px; --fs-l: 15px; --fs-xl: 18px; --fs-xxl: 22px;
  --font: var(--font-ui);
  --ease: var(--ease-out);
  --card-h-medium: max(44px, calc(17 * var(--u))); /* v0.1.14: a floor for the piles on short stages */
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
/* Evening: the Gilt Medallion back. Everything else comes from the [data-theme] tokens. */
:root[data-theme="evening"] { --card-back: url('../assets/cards/back-gilt-medallion.svg'); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--room); overscroll-behavior: none; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------- Layer 0: room + ad zones (never above or beside-into the table) ---------- */
#bg-layer { position: fixed; inset: 0; z-index: 0; }
#room-bg { position: absolute; inset: 0; background: var(--room) var(--room-art) center / cover no-repeat; transition: background-color .25s var(--ease); }
#safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* Ad zones. Plain, clearly labelled boxes (no button/menu look). Containers ignore pointer events; the
   AdSense <ins> inside keeps them, so a real ad is clickable and nothing else is. */
.ad-slot { position: absolute; display: flex; flex-direction: column; pointer-events: none; }
.ad-slot .ad-label { flex: none; height: var(--ad-label-h); display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 241, 239, .55); }
.ad-slot .ad-fill { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; }
.ad-slot .ad-fill ins { pointer-events: auto; }
/* Placeholder zone (placeholder IDs + SHOW_AD_PLACEHOLDERS): subtle dashed outline, size note. */
.ad-slot.ad-placeholder-on .ad-fill { border: 1px dashed rgba(238, 241, 239, .22); background: rgba(255, 255, 255, .025); }
.ad-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 8px; text-align: center; color: rgba(238, 241, 239, .5); }
.ad-placeholder b { font: 600 var(--fs-xs)/1.2 var(--font); letter-spacing: .02em; }
.ad-placeholder span { font: 400 10px/1.3 var(--font); opacity: .8; }
/* Dedicated zones (#ad-layer): left / top / unit size set inline by app.js from planZones(); fixed sizes, never
   scaled. The layer sits above the game layers but zones are outside the stage, so they never cover anything. */
#ad-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.ad-zone { left: 0; top: 0; }
.ad-zone .ad-fill { flex: none; }
.ad-zone:not(.ad-on) { display: none !important; }
/* Wall-screen banner: left/top/width/height set by app.js to match the room art's screen; hard cap calc(16 * var(--u)). */
.wall-slot { left: 0; top: 0; width: 0; height: 0; max-height: calc(16 * var(--u)); }
.wall-slot .ad-label { justify-content: flex-start; padding-left: 2px; }
/* Placement guard verdict (app.js): failing zones are removed from layout and never filled. */
.ad-slot.ad-off { display: none !important; }
/* Short landscape screens: the wall slot disappears entirely. */
@media (max-height: 499px) { .wall-slot { display: none !important; } }
/* Ad zones stay hidden behind the 18+ gate (v0.1.12: portrait screens have their own zones). */
html.gate-open .ad-slot { display: none !important; }
/* Panel screens (lobby, scoreboard, settings, room): the table is not shown behind them. */
html.panel-screen #table-layer, html.panel-screen #ui-layer { visibility: hidden; }
/* A full-screen house interstitial (before a deal, or Play again) must not paint over the felt. */
html.house-break #table-layer, html.house-break #ui-layer { visibility: hidden; }

/* ---------- Layer 1: the table (isometric, stadium-shaped, no chips) ---------- */
/* v0.1.8: the perspective scales with the felt height and is centred on the felt, so the tilted felt's near edge
   widens by the same factor (--felt-k ~ 1.063) on every screen size; the felt's width is divided by it, so its
   projected outline always fits the play area of the planned stage (phones and 1280x800 / 1920x1080 desktops). */
#table-layer { position: fixed; top: var(--st-t); bottom: var(--st-b); left: var(--st-l); right: var(--st-r); z-index: 1; pointer-events: none;
  --felt-h: calc(76 * var(--u)); --felt-k: 1.063; perspective: calc(var(--felt-h) * 3.7); perspective-origin: var(--play-cx) 47%; }
#felt { position: absolute; left: var(--play-cx); top: 47%; width: calc((var(--play-w) - 48px) / var(--felt-k)); height: var(--felt-h);
  transform: translate(-50%, -50%) rotateX(26deg); transform-style: preserve-3d; }
#felt-rim { position: absolute; inset: 0; border-radius: calc(50 * var(--u));
  background: linear-gradient(180deg, var(--rail-a), var(--rail-b));
  box-shadow: 0 calc(2.8 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .55), 0 calc(.6 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .5); }
#felt-rim::after { content: ''; position: absolute; inset: calc(2.1 * var(--u)); border-radius: calc(50 * var(--u)); box-shadow: 0 0 0 1px var(--rail-line); }
#felt-inner { position: absolute; inset: calc(2.6 * var(--u)); border-radius: calc(50 * var(--u)); overflow: hidden;
  background:
    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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 75% at 50% 42%, var(--felt-a) 0%, var(--felt-b) 40%, var(--felt-c) 78%, var(--felt-d) 100%);
  box-shadow: inset 0 0 calc(4 * var(--u)) rgba(0, 0, 0, .55), inset 0 calc(.4 * var(--u)) calc(.6 * var(--u)) rgba(0, 0, 0, .35); }
/* Betting-line style hairline and a quiet wordmark (no chips, no logos). */
#felt-inner::before { content: ''; position: absolute; inset: 11% 7%; border-radius: calc(50 * var(--u)); border: 1px solid rgba(255, 255, 255, .07); background: var(--runner); }
#felt-inner::after { content: 'CAMBIO'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 calc(3.4 * var(--u))/1 var(--font);
  letter-spacing: .9em; padding-left: .9em; color: rgba(255, 255, 255, .055); }

/* ---------- Layer 2: game UI (the stage) ---------- */
#ui-layer { position: fixed; top: var(--st-t); bottom: var(--st-b); left: var(--st-l); right: var(--st-r); z-index: 2; pointer-events: none;
  /* Own hand: as large as fits (calc(24 * var(--u))), shared with the avatar tag inside the play area. */
  --hand-card-h: min(calc(24 * var(--u)), calc(calc(36 * var(--u)) / var(--hand-rows, 1)), calc((var(--play-w) - 96px - (var(--hand-cols, 4) - 1) * 8px) * 7 / (5 * var(--hand-cols, 4)))); }
#ui-layer > * { pointer-events: auto; }
#fx-layer { position: fixed; inset: 0; pointer-events: none !important; z-index: 20; }

/* Dead corner: timer + version + 18+ (small type) */
#corner-info { position: absolute; left: 12px; top: 8px; display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-s); line-height: 1.2; pointer-events: none !important; }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; color: var(--text); padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .28); align-self: flex-start; }
.timer.low { color: #f0a59a; }
.timer.room { color: var(--accent); }
.timer.warn { animation: warn 1s ease 2; }
@keyframes warn { 0%, 100% { background: rgba(0, 0, 0, .28); } 25%, 75% { background: var(--danger); color: #fff; } }
#version-tag { font-size: 10px; color: var(--muted); padding-left: 6px; }
#age-badge { padding-left: 4px; }
.corner-btn { position: absolute; right: 12px; top: 8px; width: 36px; height: 32px; border-radius: 999px; border: 1px solid var(--panel-line);
  background: var(--panel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 15px; line-height: 1; color: var(--text); }

/* Action columns: labelled pill buttons on an 8px grid */
.margin { position: absolute; top: 50%; transform: translateY(-50%); width: var(--col-w); display: flex; flex-direction: column; gap: var(--gap); }
.margin.right { right: 12px; }
.act { height: clamp(30px, calc(9.6 * var(--u)), 40px); border-radius: 999px; border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(24, 28, 31, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text); font: 600 var(--fs-s)/1.1 var(--font); letter-spacing: .01em; padding: 0 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28); transition: background-color .15s var(--ease), opacity .15s var(--ease), transform .15s var(--ease); }
.act.primary:not(:disabled) { background: var(--text); color: #121416; border-color: transparent; }
.act.ghost { background: transparent; border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.act:disabled { opacity: .36; box-shadow: none; }
.act:not(:disabled):active { transform: scale(.97); }
.act.cambio { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; font-weight: 700; letter-spacing: .04em; }
.act.cambio:disabled { background: rgba(212, 175, 95, .16); color: var(--accent); }
.act.armed { box-shadow: 0 0 0 2px var(--accent); }

/* Status banner: frosted pill above the hand */
#banner { position: absolute; left: var(--play-cx); transform: translateX(-50%); bottom: calc(22px + var(--hand-rows, 1) * var(--hand-card-h) + (var(--hand-rows, 1) - 1) * 8px);
  width: max-content; max-width: calc(var(--play-w) * .8); text-align: center; font: 500 var(--fs-s)/1.35 var(--font);
  background: var(--panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--panel-line);
  padding: 6px 12px; border-radius: 12px; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
/* v0.1.11: the banner never swallows taps meant for the cards under it; only its own links / buttons take taps. */
#ui-layer > #banner { pointer-events: none; }
#banner a, #banner button { pointer-events: auto; }
#banner:empty { display: none; }
#banner.mine { border-color: rgba(212, 175, 95, .45); }
#banner.power { border-color: rgba(170, 150, 220, .45); }
#banner b { color: #fff; }
#banner a { color: var(--accent); }

/* ---------- Cards: crisp backs, clean faces, lift + glow selection ---------- */
.card { --h: calc(8 * var(--u)); position: relative; height: var(--h); aspect-ratio: 5 / 7; flex: none; border-radius: calc(var(--h) * .075);
  background: var(--card-face); color: var(--card-ink);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .25), 0 calc(var(--h) * .05) calc(var(--h) * .12) rgba(0, 0, 0, .32);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.card.large { --h: var(--hand-card-h, calc(24 * var(--u))); }
.card.medium { --h: var(--card-h-medium); }
.card.small { --h: min(calc(8 * var(--u)), calc(calc(17 * var(--u)) / var(--rows, 2))); }
.card.tiny { --h: calc(4.6 * var(--u)); display: inline-block; margin-right: 2px; vertical-align: middle; }
.card.zoom { --h: min(calc(72 * var(--u)), 520px); }
.card.back { background: var(--card-back) center / 100% 100% no-repeat; }
.card.empty { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.card.face.red { color: var(--card-red); }
.card .corner { position: absolute; display: flex; flex-direction: column; align-items: center; font-weight: 700; line-height: .92;
  font-size: calc(var(--h) * .17); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.card .corner i { font-style: normal; font-size: .82em; margin-top: .08em; }
.card .tl { left: 7%; top: 5%; }
.card .br { right: 7%; bottom: 5%; transform: rotate(180deg); }
.card .pip { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-size: calc(var(--h) * .36); line-height: 1; }
.card .court { position: absolute; inset: 20% 20%; border-radius: calc(var(--h) * .04); border: 1px solid currentColor; opacity: .9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .025), rgba(0, 0, 0, .06)); }
.card .court b { font-size: calc(var(--h) * .27); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.card .court i { font-style: normal; font-size: calc(var(--h) * .15); line-height: 1; }
.card .pts { position: absolute; left: 0; right: 0; bottom: -1.7em; text-align: center; font-size: 10px; color: var(--text); opacity: 0; }
/* Small (opponents) and tiny (score tables): one centred index, nothing else. */
.card.small .pip, .card.small .court, .card.small .br, .card.tiny .pip, .card.tiny .court, .card.tiny .br { display: none; }
.card.small .tl, .card.tiny .tl { left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: calc(var(--h) * .3); }
.card.small { border-radius: calc(var(--h) * .09); }
.card.zoom .pts { opacity: .85; font-size: var(--fs-m); bottom: -2em; }
.card.selectable { cursor: pointer; box-shadow: 0 0 0 1.5px rgba(212, 175, 95, .85), 0 calc(var(--h) * .05) calc(var(--h) * .12) rgba(0, 0, 0, .32); }
.card.selected { transform: translateY(-9%); box-shadow: 0 0 0 2px var(--accent), 0 0 calc(var(--h) * .22) rgba(212, 175, 95, .45), 0 calc(var(--h) * .1) calc(var(--h) * .2) rgba(0, 0, 0, .4); }
.card.flash { animation: cardflash 1.1s var(--ease); }
.card.nudge { animation: nudge .6s var(--ease) 2; }
.card.locked { filter: saturate(.55) brightness(.88); }
@keyframes cardflash { 0%, 100% { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .25); }
  30%, 70% { box-shadow: 0 0 0 2px var(--accent), 0 0 calc(var(--h) * .3) rgba(212, 175, 95, .6); } }
@keyframes nudge { 50% { transform: translateY(-5%); } }
/* Deal (slide in from the deck side) and flip: 150–250ms ease, never bouncy. */
.card.deal { animation: deal .22s var(--ease) both; }
@keyframes deal { from { opacity: 0; transform: translateY(-14%) scale(.94); } }
.card.flip { animation: flip .2s var(--ease); }
@keyframes flip { 0% { transform: perspective(600px) rotateY(90deg); } 100% { transform: perspective(600px) rotateY(0); } }

.hand { display: grid; grid-template-columns: repeat(var(--cols, 2), auto); gap: 4px; justify-content: center; }
/* v0.1.11: opponents' cards are tapped during peek / jack / queen powers. Their hit area is at least 32x32 at every
   size: the grid pitch is >= 34px in both directions (gap = 34px - card size, min 4px; 2px of headroom because the
   browser snaps hit regions of the centred, fractionally placed seats to whole pixels) and an invisible ::before pad
   (square: hit testing follows border-radius) fills half the gap around each card, so pads tile without
   overlapping; the hand's padding keeps the outer pads inside the hand box (clear of the name tag, the avatar and
   other seats). */
.seat .hand.small.pad { --ch: min(calc(8 * var(--u)), calc(calc(17 * var(--u)) / var(--rows, 2))); --cg: max(4px, calc(34px - var(--ch) * 5 / 7));
  --rg: max(4px, calc(34px - var(--ch))); column-gap: var(--cg); row-gap: var(--rg); padding: calc(var(--rg) / 2) calc(var(--cg) / 2); }
.seat .hand.small.pad .card::before { content: ''; position: absolute; top: calc(var(--rg) / -2); bottom: calc(var(--rg) / -2);
  left: calc(var(--cg) / -2); right: calc(var(--cg) / -2); }
.hand.mine { gap: 8px; }

/* Seats (inner region between the action columns) */
#seats { position: absolute; top: 0; bottom: 0; left: calc(var(--play-l) + 16px); right: calc(var(--play-r) + 16px); pointer-events: none !important; }
/* v0.1.11: width: max-content. A seat placed near the right edge of #seats used to be shrink-wrapped to the space left
   of it, so a top seat's name / avatar column slid over its own hand (and the card hit pads). */
.seat { position: absolute; width: max-content; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: auto; }
.avatar { position: relative; width: clamp(30px, calc(10 * var(--u)), 40px); height: clamp(30px, calc(10 * var(--u)), 40px); display: grid; place-items: center; border-radius: 50%;
  font-size: clamp(16px, calc(5.4 * var(--u)), 22px); line-height: 1; background: radial-gradient(circle at 50% 35%, #30363a, #15181b 75%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 3px 8px rgba(0, 0, 0, .45); }
.seat .name, #my-tag .name { font: 500 var(--fs-xs)/1.5 var(--font); background: rgba(14, 16, 18, .72); border: 1px solid var(--panel-line);
  padding: 0 8px; border-radius: 999px; white-space: nowrap; max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
.seat .hand { margin-top: 2px; }
.seat-id { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* Top-rim seats sit sideways (avatar beside the cards) so they never crowd the piles or the screen edge. */
.seat.top { flex-direction: row; align-items: center; gap: 6px; }
.seat.top .hand { margin-top: 0; }
/* v0.1.11: a top seat is [avatar | hand] with the name pill UNDER both (it takes the row's width but never widens the
   seat: width 0 + min-width 100%), so two top seats with 32x32 card targets fit side by side at 568x320. */
.seat.top { display: grid; grid-template-columns: auto auto; grid-template-areas: "av hand" "nm nm"; column-gap: 6px; row-gap: 2px;
  align-items: center; justify-items: center; }
.seat.top .seat-id { display: contents; }
.seat.top .avatar { grid-area: av; }
.seat.top .hand { grid-area: hand; }
.seat.top .name { grid-area: nm; width: 0; min-width: 100%; box-sizing: border-box; text-align: center; }
.seat.active .avatar, #my-area.active #my-tag .avatar { animation: turn-ring 1.8s ease-in-out infinite; }
.seat.active .name, #my-area.active #my-tag .name { color: var(--accent); border-color: rgba(212, 175, 95, .35); }
@keyframes turn-ring { 0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(212, 175, 95, .0), 0 3px 8px rgba(0, 0, 0, .45); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(212, 175, 95, .18), 0 3px 8px rgba(0, 0, 0, .45); } }
.seat.targetable .avatar { cursor: pointer; box-shadow: 0 0 0 1.5px rgba(212, 175, 95, .8), 0 3px 8px rgba(0, 0, 0, .45); }
.avatar.hit { animation: hit .4s var(--ease); }
@keyframes hit { 40% { transform: scale(1.12); } }
.cambio-badge { background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 0 4px; font-size: .82em; font-weight: 700; letter-spacing: .04em; }
.bot-mark { position: absolute; right: -4px; bottom: -3px; font-size: 10px; line-height: 1; padding: 2px; border-radius: 50%;
  background: #1b1f22; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: none; }

/* Centre piles (medium cards) */
#center { position: absolute; left: var(--play-cx); top: 44%; transform: translate(-50%, -50%); display: flex; gap: 16px; align-items: center; pointer-events: none !important; }
#center > * { pointer-events: auto; }
.pile { position: relative; }
.pile.selectable .card { box-shadow: 0 0 0 1.5px rgba(212, 175, 95, .85), 0 4px 12px rgba(0, 0, 0, .35); }
#deck-pile .card { box-shadow: 1.5px 1.5px 0 #d9d5cc, 3px 3px 0 #b9b4aa, 0 6px 14px rgba(0, 0, 0, .45); }
.pile-count { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font: 500 10px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
#drawn-slot { position: relative; margin-left: 8px; touch-action: none; animation: pop .2s var(--ease); }
#drawn-slot .card { transform: rotate(3deg); box-shadow: 0 0 0 2px rgba(238, 241, 239, .9), 0 8px 20px rgba(0, 0, 0, .5); }
.drawn-label { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); white-space: nowrap; font: 500 10px/1 var(--font); color: var(--muted);
  pointer-events: none; } /* v0.1.11: a hint, never a tap target (it can sit over a side seat's card pad) */
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } }

/* Own hand: one row of large cards along the bottom edge, avatar tag to its left */
#my-area { position: absolute; left: var(--play-cx); bottom: 8px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 12px; pointer-events: none !important; }
#my-area > * { pointer-events: auto; }
#my-tag { order: -1; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
#my-tag .name { max-width: 72px; }

/* FX */
.fly-emoji { position: fixed; font-size: 30px; z-index: 30; pointer-events: none; will-change: transform; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.toast { position: fixed; left: calc(var(--st-l) + var(--stage-w) / 2); top: calc(var(--st-t) + 10px); transform: translateX(-50%);
  background: var(--panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--panel-line);
  padding: 6px 14px; border-radius: 999px; font: 500 var(--fs-s)/1.3 var(--font); animation: toast 2.4s var(--ease) forwards;
  white-space: nowrap; max-width: calc(var(--stage-w) - 48px); overflow: hidden; text-overflow: ellipsis; }
.toast + .toast { top: calc(var(--st-t) + 46px); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -6px); } 8%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* Emoji drawer: frosted bottom sheet across the stage only */
.drawer { position: fixed; left: calc(var(--st-l) + 8px); right: calc(var(--st-r) + 8px); bottom: var(--st-b); z-index: 40;
  background: rgba(20, 23, 26, .86); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--panel-line); border-bottom: 0; border-radius: 16px 16px 0 0; padding: 8px 12px 10px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-s); color: var(--muted); margin-bottom: 6px; }
.x { border: 0; background: rgba(255, 255, 255, .06); width: 28px; height: 28px; border-radius: 50%; font-size: 13px; color: var(--text); }
.emoji-list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.emoji { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: 12px;
  background: rgba(255, 255, 255, .05); padding: 6px 8px; min-width: 64px; }
.emoji span { font-size: 26px; line-height: 1.15; }
.emoji small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.emoji.targeted { border-color: rgba(212, 175, 95, .3); }
.emoji.targeted small::before { content: '→ '; color: var(--accent); }
.emoji { position: relative; }
/* v0.1.7 emoji economy: packs side by side, remaining-uses badges, a subtle locked state, refill sheet */
.emoji-pack { flex: none; display: flex; flex-direction: column; gap: 4px; padding-right: 8px; border-right: 1px solid var(--panel-line); }
.emoji-pack:last-child { border-right: 0; }
.pack-head { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.pack-name { text-transform: uppercase; font-weight: 600; }
.pack-row { display: flex; gap: 6px; }
.uses-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: rgba(212, 175, 95, .16); color: var(--accent); font-variant-numeric: tabular-nums; }
.uses-badge.out { background: rgba(255, 255, 255, .06); color: var(--muted); }
.emoji .uses { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 9px; color: var(--accent); font-variant-numeric: tabular-nums; }
.emoji .uses.free { color: var(--muted); }
.emoji.locked span { filter: grayscale(1); opacity: .38; }
.emoji.locked small { opacity: .6; }
.emoji-pack.locked .pack-row { opacity: .9; }
.refill-btn, .refill-link { font: inherit; font-size: 10px; font-style: normal; border: 1px solid rgba(212, 175, 95, .45); background: transparent; color: var(--accent);
  border-radius: 999px; padding: 1px 8px; min-height: 0; cursor: pointer; }
.refill-sheet { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--panel-line); }
.refill-sheet .refill-title { margin: 0 0 4px; font-size: var(--fs-s); }
.refill-sheet .row { margin-top: 6px; }
.refill-sheet .small { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.4; }
.refill-sheet .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.refill-sheet .row.end { justify-content: flex-end; }
.refill-sheet button { height: 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: var(--input); padding: 0 14px; color: var(--text); font: 500 var(--fs-s)/1 var(--font); cursor: pointer; }
.refill-sheet button.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.refill-sheet button:disabled { opacity: .42; cursor: default; }
/* Saved room presets + admin emoji stats */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.preset-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--panel-line); border-radius: 999px; padding: 0 2px 0 10px; }
.preset-chip .x { width: 22px; height: 22px; font-size: 10px; }
#preset-reward { flex-basis: 100%; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.stat-block h4 { margin: 6px 0 2px; font-size: var(--fs-s); }
table.stats { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
table.stats th, table.stats td { padding: 2px 4px; text-align: right; border-bottom: 1px solid var(--panel-line); }
table.stats th:first-child, table.stats td:first-child { text-align: left; }

/* Zoom (stage only) */
#zoom { position: fixed; top: var(--st-t); bottom: var(--st-b); left: var(--st-l); right: var(--st-r); z-index: 60; background: rgba(8, 10, 11, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#zoom p { font-size: var(--fs-xs); color: var(--muted); margin: 28px 0 0; }

/* ---------- Modals: frosted dark panels, centred on the stage ---------- */
#modal { position: fixed; inset: 0; z-index: 50; background: rgba(6, 8, 9, .55);
  display: flex; align-items: center; justify-content: center; padding: calc(var(--st-t) + 8px) calc(var(--st-r) + 8px) calc(var(--st-b) + 8px) calc(var(--st-l) + 8px); }
#modal-box { background: rgba(20, 23, 26, .86); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--panel-line); border-radius: 16px; --mpy: 16px; --mpx: 20px; padding: var(--mpy) var(--mpx); width: min(100%, 860px); max-height: 100%; overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); font-size: var(--fs-m); line-height: 1.45; user-select: text; scrollbar-width: thin; }
#modal-box h1, #modal-box h2 { margin: 0 0 8px; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
#modal-box h1 small { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
#modal-box h3 { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#modal-box p { margin: 0 0 8px; }
#modal-box section { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .05); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#modal-box .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#modal-box .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#modal-box .row.end { justify-content: flex-end; margin-top: 12px; }
#modal-box button, #modal-box input, #modal-box select { height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: var(--input);
  padding: 0 14px; color: var(--text); font: 500 var(--fs-m)/1 var(--font); }
#modal-box input, #modal-box select { border-radius: 10px; padding: 0 10px; }
#modal-box input:focus, #modal-box select:focus, #modal-box button:focus-visible { outline: 2px solid rgba(212, 175, 95, .6); outline-offset: 1px; }
#modal-box input { min-width: 0; flex: 1; }
#modal-box select option { background: var(--panel-solid); }
#modal-box button.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
#modal-box button.danger { background: rgba(196, 82, 74, .22); border-color: rgba(196, 82, 74, .5); }
#modal-box button.ghost { background: transparent; border-color: transparent; color: var(--muted); padding: 0 8px; }
#modal-box button:disabled { opacity: .42; }
#modal-box .small { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.4; }
#modal-box .note { background: var(--accent-soft); border-left: 2px solid var(--accent); padding: 6px 10px; font-size: var(--fs-s); border-radius: 6px; }
#modal-box a { color: var(--accent); }
.avatar-pick { width: 40px; padding: 0 !important; font-size: 20px !important; border-radius: 50% !important; height: 40px !important; }
.guest { font-size: var(--fs-m); line-height: 1.3; }
.guest small { color: var(--muted); font-size: var(--fs-xs); }
details { margin-top: 10px; font-size: var(--fs-s); color: var(--muted); }
details summary { cursor: pointer; color: var(--text); font-weight: 500; }
.howto { padding-left: 18px; margin: 6px 0; }
.howto li { margin: 2px 0; }

/* Lobby */
#modal-box.lobby { --mpy: 12px; --mpx: 14px; width: min(100%, 640px); }
.lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.wordmark { font-size: var(--fs-xxl); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.wordmark::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: .2em; }
.brand .ver { font-size: var(--fs-xs); color: var(--muted); }
.head-right { display: flex; align-items: center; gap: 8px; }
#modal-box .adults-line { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lobby-grid section { padding: 8px 10px; gap: 6px; }
.lobby-grid .row { flex-wrap: nowrap; }
#modal-box .room #join-code { flex: 1 1 56px; width: 56px; }
#modal-box .room #create-room { flex: 0 0 auto; height: 40px; }
#modal-box .hero .row { flex-direction: column; align-items: stretch; gap: 6px; }
#modal-box .hero button { flex: 0 0 auto; }
#modal-box .hero button.primary { height: 40px; padding: 0 18px; font-size: var(--fs-l); }
#modal-box .hero #pass-play { height: 40px; padding: 0 14px; }
#modal-box .room .row { gap: 6px; }
#modal-box .room .row button, #modal-box .room .row input { height: 40px; }
#modal-box .you-row { margin-top: 8px; flex-wrap: nowrap; }
#modal-box .you-row .guest { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#modal-box .you-row #name-input { flex: 1 1 80px; }
#modal-box .you-row .room-styles { margin-left: auto; flex: 0 0 auto; }
#modal-box .avatar-pick { flex: 0 0 auto; }
#modal-box .lobby .links, #modal-box.lobby .links { margin: 6px 0 0 -8px; gap: 0; flex-wrap: wrap; }
#modal-box.lobby .links button { font-size: var(--fs-s); padding: 0 8px; height: 28px; }
#modal-box.lobby .lobby-note { margin: 0 0 6px; padding: 4px 8px; font-size: var(--fs-xs); }
#modal-box.register { width: min(100%, 560px); }
#modal-box.register .reg-form input { flex: 1 1 140px; }
/* v0.1.8 sticky footer: the action row stays on screen while the modal body scrolls. */
#modal-box .row.end.modal-foot { position: sticky; bottom: calc(-1 * var(--mpy)); z-index: 2; margin: 10px calc(-1 * var(--mpx)) calc(-1 * var(--mpy));
  padding: 8px var(--mpx) var(--mpy); background: rgba(20, 23, 26, .97); border-top: 1px solid var(--panel-line); border-radius: 0 0 15px 15px; }
#modal-box .room-styles { display: inline-flex; gap: 0; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); align-self: flex-start; }
#modal-box .room-styles button { height: 28px; border: 0; background: transparent; color: var(--muted); }
#modal-box .room-styles button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: var(--text); font-weight: 600; }

/* 18+ gate */
.badge-18 { display: inline-block; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px;
  border: 1px solid rgba(212, 175, 95, .7); color: var(--accent); vertical-align: middle; letter-spacing: .04em; background: rgba(0, 0, 0, .25); }
#modal-box.age-gate { width: min(100%, 400px); text-align: center; padding: 24px 24px 20px; }
#modal-box.age-gate h2 { font-size: var(--fs-xl); margin: 12px 0 4px; }
#modal-box.age-gate .gate-line { margin: 0 0 16px; font-size: var(--fs-m); color: var(--muted); }
#modal-box.age-gate button.primary { height: 40px; font-size: var(--fs-l); padding: 0 22px; }
#modal-box.age-gate #age-done { margin: 8px 0 0; }
#modal-box.age-gate #consent-box { margin-top: 12px; }
#modal-box.age-gate .consent { display: flex; align-items: flex-start; gap: 8px; text-align: left; margin: 0 auto 14px; max-width: 36em; cursor: pointer; }
#modal-box.age-gate .consent span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
#modal-box.age-gate .consent input { width: 30px; height: 30px; flex: 0 0 auto; margin: 0; }
#modal-box.age-gate .consent a { text-decoration: underline; display: inline-block; padding: 8px 2px; margin: 0; line-height: 1.2; }
#modal-box.consent-step { width: min(100%, 440px); text-align: center; padding: 24px 24px 20px; }
#modal-box.consent-step h2 { font-size: var(--fs-xl); margin: 12px 0 4px; }
#modal-box.consent-step .gate-line { margin: 0 0 12px; font-size: var(--fs-m); color: var(--muted); }
#modal-box.consent-step .consent { display: flex; align-items: flex-start; gap: 8px; text-align: left; margin: 0 auto 14px; max-width: 36em; cursor: pointer; }
#modal-box.consent-step .consent input { width: 30px; height: 30px; flex: 0 0 auto; margin: 0; }
#modal-box.consent-step .consent a { text-decoration: underline; }
#modal-box.consent-step button.primary { height: 40px; font-size: var(--fs-l); padding: 0 22px; }
.gate-badge { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-xl); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(212, 175, 95, .06); }
#modal-box button.reward { border-color: rgba(212, 175, 95, .5); margin-right: auto; }

/* Rulebook */
.rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; margin-bottom: 8px; }
.num { display: flex; flex-direction: column; font-size: var(--fs-xs); color: var(--muted); gap: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip input { display: none; }
.chip span { display: inline-block; min-width: 32px; text-align: center; padding: 5px 8px; border-radius: 999px; background: var(--input); border: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-s); }
.chip input:checked + span { background: var(--text); color: #121416; border-color: transparent; font-weight: 600; }
.code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; background: var(--accent-soft); color: var(--accent); padding: 0 8px; border-radius: 6px; letter-spacing: .15em; }
.seat-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.seat-list li { background: rgba(255, 255, 255, .06); padding: 4px 10px; border-radius: 999px; font-size: var(--fs-s); }
.seat-list .waiting { opacity: .5; }

/* Results / scoreboard */
table.results { width: 100%; border-collapse: collapse; font-size: var(--fs-m); }
table.results td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
table.results td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.results tr.win td { background: rgba(212, 175, 95, .08); }
table.results tr.win td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.results tr.me td:nth-child(2) { font-weight: 700; }
table.results .mini { white-space: nowrap; }
table.results .card .pts { display: none; }
.win-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Portrait: block the game, ask to rotate */
#rotate-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: var(--room); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8vw; }
#rotate-overlay .rotate-icon { width: 44px; height: 72px; border: 2px solid var(--text); border-radius: 9px; opacity: .85; animation: rot 2.4s var(--ease) infinite; font-size: 0; }
#rotate-overlay p { font-size: var(--fs-xl); font-weight: 700; margin: 20px 0 4px; }
#rotate-overlay small { color: var(--muted); }
@keyframes rot { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
html.need-rotate #rotate-overlay { display: flex; } /* v0.1.12: only while a game is on and the phone is upright */

@media (max-height: 380px) { #modal-box { font-size: var(--fs-s); --mpy: 12px; --mpx: 14px; } #modal-box h1, #modal-box h2 { font-size: var(--fs-l); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .seat.active .avatar, #my-area.active #my-tag .avatar { box-shadow: 0 0 0 2px var(--accent), 0 3px 8px rgba(0, 0, 0, .45); }
}

/* Deck reshuffle: fan -> riffle -> settle (transform/opacity only). */
.shuffle-card { position: fixed; border-radius: calc(.9 * var(--u)); pointer-events: none; will-change: transform, opacity;
  background: var(--card-back) center / 100% 100% no-repeat; box-shadow: 0 calc(.4 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .45);
  animation: deck-shuffle 1s cubic-bezier(.4, .1, .3, 1) both; }
@keyframes deck-shuffle {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  32%  { transform: translate(var(--fan-x), -12%) rotate(var(--fan-r)); }
  55%  { transform: translate(calc(var(--side) * 62%), -4%) rotate(calc(var(--side) * 6deg)); }
  78%  { transform: translate(calc(var(--side) * 8%), var(--stack)) rotate(0); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .shuffle-card { display: none; } }

/* ---------------------------------------------------------------- demo mock ads (DEMO_MOCK_ADS / ?demo=1) */
.mock-ad-banner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 8px, rgba(255, 255, 255, .03) 8px 16px); color: rgba(255, 255, 255, .8);
  font: 600 var(--fs-xs)/1.2 var(--font); text-align: center; border-radius: 6px; overflow: hidden; padding: 6px; }
.mock-ad-banner span { font-weight: 400; font-size: 10px; opacity: .75; }
.ad-slot.ad-demo .ad-fill { border: 0; background: none; }
.mock-ad-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .86); pointer-events: auto; }
.mock-ad-box { width: min(560px, 86vw); max-height: calc(90 * var(--u)); background: var(--panel-solid); color: var(--text); border: 1px solid var(--panel-line); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6); font-family: var(--font); }
.mock-ad-tag { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mock-ad-body { min-height: calc(22 * var(--u)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  border: 1px dashed rgba(255, 255, 255, .22); border-radius: 10px; padding: 12px; }
.mock-ad-body p { margin: 6px 0 0; font-size: var(--fs-m); color: var(--muted); }
.mock-ad-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mock-ad-actions button { font: 600 var(--fs-m)/1 var(--font); height: 34px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; }
.mock-ad-actions button:disabled { opacity: .45; cursor: default; }
.mock-ad-skip { background: transparent; color: var(--text); border: 1px solid rgba(255, 255, 255, .25) !important; }
.mock-ad-close { background: var(--accent); color: var(--accent-ink); }
.mock-note { color: #d9c08a !important; }

/* ---------------------------------------------------------------- local admin panel */
#modal-box.admin { width: min(100%, 980px); }
.admin-note { border: 1px dashed rgba(212, 175, 95, .6); padding: 6px 10px; border-radius: 8px; }
.tabs { display: flex; gap: 6px; margin: 6px 0 10px; }
.tabs .tab { opacity: .7; }
.tabs .tab.active { opacity: 1; background: rgba(255, 255, 255, .12) !important; }
.admin-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: calc(42 * var(--u)); overflow: auto; align-items: start; }
.admin-form fieldset { border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 4px 8px; }
.admin-form fieldset fieldset { grid-column: auto; }
.admin-form legend { font-size: var(--fs-s); color: var(--muted); }
#modal-box .admin-form label.num { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 6px; font-size: var(--fs-s); margin: 2px 0; text-align: left; }
#modal-box .admin-form input { flex: 0 0 auto; height: 28px; padding: 0 6px; }
#modal-box .admin-form input[type=number] { width: 76px; }
.admin-form .pair { display: inline-flex; gap: 2px; align-items: center; }
#modal-box .admin-form .pair input { width: 60px; }
#admin-json { width: 100%; font: 12px/1.3 ui-monospace, monospace; background: #0d0f11; color: var(--text); border-radius: 10px; border: 1px solid var(--panel-line); }
.admin-errors { color: #f0a59a; margin: 4px 0; padding-left: 18px; }

/* ---------------------------------------------------------------- registration sheet, match history, ad categories */
.reg-sheet { position: fixed; left: calc(var(--st-l) + var(--stage-w) / 2); bottom: calc(var(--st-b) + 8px); transform: translateX(-50%); z-index: 60;
  width: min(calc(var(--stage-w) - 24px), 600px); background: rgba(20, 23, 26, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--text); border: 1px solid var(--panel-line); border-radius: 16px; padding: 12px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  font-size: var(--fs-m); max-height: calc(var(--stage-h) - 16px); overflow: auto; }
.reg-sheet h3 { margin: 0 0 4px; font-size: var(--fs-l); }
.reg-sheet .x { position: absolute; top: 8px; right: 8px; }
.reg-sheet input, .reg-sheet button { height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: var(--input); padding: 0 14px; color: var(--text); font: 500 var(--fs-m)/1 var(--font); }
.reg-sheet input { min-width: 0; flex: 1; border-radius: 10px; padding: 0 10px; }
.reg-sheet button.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.reg-sheet .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reg-sheet .row.end { justify-content: flex-end; }
.reg-form input[type=email] { flex: 2 1 160px; }
.reg-err { color: #f0a59a; min-height: 0; margin: 2px 0; }
.reg-err:empty { display: none; }
.sub-note { color: var(--accent); }
button.linkish { background: transparent !important; border: 0 !important; text-decoration: underline; text-underline-offset: 2px; padding: 0 2px !important; height: auto !important; color: var(--muted) !important; }
table.results.history td { font-size: var(--fs-s); }
.ad-cats .cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 12px; }
.cat-custom { display: flex; align-items: center; gap: 4px; }
.cat-custom .cat-row { flex: 1; }
.confirm-box { border: 1px solid rgba(196, 82, 74, .7); background: rgba(196, 82, 74, .12); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.reg-sheet.inline { position: relative; left: auto; bottom: auto; transform: none; width: auto; z-index: auto; margin: 8px 0;
  box-shadow: none; max-height: none; background: rgba(255, 255, 255, .04); border-color: rgba(212, 175, 95, .4); }

/* ---------------------------------------------------------------- Pass & Play */
/* Privacy cover: full-screen, fully opaque (no transparency, no blur-through), above table / drawer / modal / zoom. */
#handoff { position: fixed; inset: 0; z-index: 90; background: #0d0f11; display: flex; align-items: center; justify-content: center; pointer-events: auto;
  padding: var(--st-t) var(--st-r) var(--st-b) var(--st-l);
  background-image: radial-gradient(ellipse 60% 70% at 50% 40%, #1b2a26 0%, #0d0f11 70%); }
#handoff .handoff-box { text-align: center; max-width: min(80vw, 560px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#handoff .handoff-round { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#handoff .handoff-round b { color: var(--accent); }
#handoff .handoff-avatar { width: clamp(56px, calc(18 * var(--u)), 76px); height: clamp(56px, calc(18 * var(--u)), 76px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(28px, calc(9 * var(--u)), 38px); line-height: 1;
  background: radial-gradient(circle at 50% 35%, #30363a, #15181b 75%); box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(0, 0, 0, .5); margin-bottom: 4px; }
#handoff h2 { margin: 0; font-size: clamp(20px, calc(7 * var(--u)), 30px); font-weight: 700; letter-spacing: -.01em; }
#handoff .small { font-size: var(--fs-s); color: var(--muted); margin: 0; }
#handoff .handoff-log { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); color: var(--muted); max-height: calc(20 * var(--u)); overflow: hidden; }
#handoff .handoff-log li { padding: 1px 0; }
#handoff .handoff-go { margin-top: 6px; font: 700 var(--fs-l)/1 var(--font); height: 44px; padding: 0 26px; border-radius: 999px; border: 0; color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
#handoff .handoff-quit { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; font-size: var(--fs-s); cursor: pointer; }
/* While the privacy cover is up the room-art wall slot is hidden; the cover's own zone (#ad-cover-rect, in
   #ad-layer above the cover, opposite the "show my cards" button) is the only ad on that screen. */
html.pp-covered #bg-layer .ad-slot { display: none !important; }
/* v0.1.8 atomic cover swap: the class flips in the same task that shows / hides the cover, so no frame ever
   shows a table gutter over the cover, or the cover's zone over the table. */
/* v0.1.11: only the TABLE zones (gutters) are hidden by the class. Panel zones (lobby, settings, results,
   room) are planned for their own screen only, so they never need it; hiding them here made a lobby opened
   while the class was still set (Pass & Play game in progress, "Back to game") measure 0x0 = noSize. */
html.pp-covered #ad-layer #ad-gutter, html.pp-covered #ad-layer #ad-gutter-left, html.pp-covered #ad-layer #ad-table-top { display: none !important; } /* v0.2.7.0: + the v7.2 table ad */
html:not(.pp-covered) #ad-cover-rect { display: none !important; }
html.pp-covered #ui-layer, html.pp-covered #table-layer { visibility: hidden; } /* v0.2.7.0: the v7.2 felt too (it sits under the opaque cover) */
#banner .pp-done { margin-left: 8px; pointer-events: auto; height: 26px; border-radius: 999px; border: 0; padding: 0 12px; font: 700 var(--fs-s)/1 var(--font); background: var(--text); color: #121416; cursor: pointer; }
#modal-box .pp-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 8px 0; }
#modal-box .pp-seat .pp-n { width: 1.4em; text-align: right; color: var(--muted); }
#modal-box .pp-seat .reg-err { flex-basis: 100%; color: #f0a59a; }
#modal-box .reg-err:empty { display: none; }
#modal-box .pp-results { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 8px; }
/* v0.2.9.7.8: every face-up card in a results row stays whole, including a 6th penalty card. */
html[data-screen="results"] #modal-box.results table.results { table-layout: fixed; }
html[data-screen="results"] #modal-box.results table.results td:nth-child(1) { width: 12%; }
html[data-screen="results"] #modal-box.results table.results:has(td.mini) td:nth-child(2) { width: 16%; }
/* Running total has no card strip. Its name column keeps the spare width and ellipsizes only when the text itself overflows. */
html[data-screen="results"] #modal-box.results table.results:not(:has(td.mini)) td:nth-child(1) { width: 2.4em; }
html[data-screen="results"] #modal-box.results table.results:not(:has(td.mini)) td:nth-child(2) { width: auto; max-width: none; }
html[data-screen="results"] #modal-box.results table.results:not(:has(td.mini)) td:last-child { width: 3.4em; overflow: hidden; }
html[data-screen="results"] #modal-box.results table.results.totals td:nth-child(1) { width: 1.5em; }
html[data-screen="results"] #modal-box.results table.results.totals td:nth-child(3) { width: 22%; }
html[data-screen="results"] #modal-box.results table.results.totals td:last-child { width: 3.4em; }
html[data-screen="results"] #modal-box.results.rs-tight table.results:not(:has(td.mini)) td:nth-child(2) { max-width: none; }
html[data-screen="results"] #modal-box.results table.results:has(td.mini) td.mini {
  width: 60%; overflow: hidden; white-space: nowrap; line-height: 0;
}
html[data-screen="results"] #modal-box.results table.results td:last-child { width: 12%; }
/* Portrait 5:7, capped at 24x34. A tight sheet used to lock --h at 16px and draw landscape chips. */
html[data-screen="results"] #modal-box.results table.results td.mini .card.tiny {
  display: inline-block; box-sizing: border-box; vertical-align: middle; margin: 0 2px 0 0;
  width: min(var(--mini-cap, calc(34px * 5 / 7)), calc((100% - (var(--cards, 4) - 1) * 2px) / var(--cards, 4)));
  max-width: var(--mini-cap, calc(34px * 5 / 7)); height: auto; aspect-ratio: 5 / 7; flex: none;
}
html[data-screen="results"] #modal-box.results table.results td.mini .card.tiny:last-child { margin-right: 0; }
/* v0.2.9.6 wide results: two score columns, and the sheet stays left of the right-hand ad with a clear gap. */
@media (min-width: 800px) {
  html[data-screen="results"] #modal { align-items: center; justify-content: center; padding: calc(var(--st-t) + 12px) calc(var(--st-r) + 24px) calc(var(--st-b) + 12px) calc(var(--st-l) + 16px); }
  html[data-screen="results"] #modal-box .pp-results,
  html[data-screen="results"] #modal-box .results-cols { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}
#modal-box .pp-results section { gap: 4px; }
/* Admin › Emoji stats panel */
fieldset.emoji-stats { border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 8px 12px 10px; margin: 12px 0 0; }
fieldset.emoji-stats legend { padding: 0 6px; font-size: var(--fs-s); font-weight: 600; letter-spacing: .02em; color: var(--muted); }

/* v0.1.8 lobby on short landscape phones (844x390, 740x360): headings collapse, buttons stay 36-40px tall. */
@media (max-height: 420px) {
  #modal-box.lobby .lobby-head { margin-bottom: 6px; }
  #modal-box.lobby .wordmark { font-size: var(--fs-xl); }
  #modal-box.lobby .lobby-grid h3 { display: none; }
  #modal-box.lobby .lobby-grid section { padding: 6px 8px; }
  #modal-box .hero button.primary, #modal-box .hero #pass-play, #modal-box .room #create-room, #modal-box .room .row button, #modal-box .room .row input { height: 36px; }
  #modal-box .you-row { margin-top: 6px; }
  #modal-box .you-row .avatar-pick { width: 36px; height: 36px !important; font-size: 18px !important; }
  #modal-box.lobby .links { margin-top: 2px; }
  #modal-box.lobby .links button { height: 26px; }
}
/* v0.1.9 lobby on the smallest landscape phones (568x320 class): the lobby banner leaves ~230px, so the panel
   padding, section padding and button heights shrink a little more (buttons stay >= 32px tall). */
@media (max-height: 340px) {
  #modal-box.lobby { --mpy: 8px; --mpx: 12px; }
  #modal-box.lobby .lobby-head { margin-bottom: 4px; }
  #modal-box.lobby .lobby-grid section { padding: 4px 6px; gap: 4px; }
  #modal-box.lobby .lobby-grid { gap: 6px; }
  #modal-box .hero button.primary, #modal-box .hero #pass-play, #modal-box .room #create-room, #modal-box .room .row button, #modal-box .room .row input { height: 32px; }
  #modal-box .you-row { margin-top: 4px; }
  #modal-box .you-row .avatar-pick { width: 32px; height: 32px !important; font-size: 16px !important; }
  #modal-box .you-row button, #modal-box .you-row input, #modal-box .you-row .seg button { height: 32px; }
}
/* v0.2.7.4: the results nudge is the first, full-width line of the sticky footer (app.js .in-foot), so it never scrolls under it */
#modal-box.results .modal-foot > .reg-sheet.inline.compact.in-foot { flex: 1 0 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; box-sizing: border-box; } /* one 40 px line: the upright 360x740 card still fits above its ad */
.reg-sheet.inline.compact { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 6px 0; }
.reg-sheet.inline.compact .reg-nudge { flex: 1 1 auto; font-weight: 600; font-size: var(--fs-s); }
.reg-sheet.inline.compact button { height: 30px; flex: 0 0 auto; }
/* v0.1.8 results on short landscape phones: tighter rows, one-line action footer. */
@media (max-height: 420px) {
  #modal-box.results h2 { margin-bottom: 2px; }
  #modal-box.results > .small { margin-bottom: 4px; }
  #modal-box.results table.results td { padding: 2px 6px; }
  #modal-box.results .row.end { gap: 6px; }
  #modal-box.results .row.end button { padding: 0 12px; white-space: nowrap; }
  #modal-box.results .reg-sheet.inline.compact { margin: 4px 0 0; padding: 4px 8px; }
  #modal-box.results .reg-sheet.inline.compact button { height: 28px; }
  #modal-box .row.end.modal-foot { padding-top: 6px; margin-top: 6px; }
}
/* v0.2.8.1: short landscape with a results banner (568x320 and 740x360) leaves a short sheet.
   Five score rows plus the guest nudge still have to leave Lobby, Play again and the nudge's own
   buttons as the element under the pointer (the nudge used to paint over that row). */
@media (max-height: 380px) {
  #modal-box.results { --mpy: 2px; --mpx: 8px; line-height: 1.1; }
  #modal-box.results h2 { margin: 0; font-size: 14px; line-height: 1.1; }
  /* The round title stays. The reason line, the session note and the column headings give up their rows so 24x34 cards and the buttons fit. */
  #modal-box.results > p.small, #modal-box.results h3 { display: none; }
  #modal-box.results .pp-results section, #modal-box.results .results-cols section { padding: 0 6px; gap: 0; }
  #modal-box.results table.results { font-size: 12px; line-height: 1; border-collapse: collapse; }
  #modal-box.results table.results td { padding: 0 4px; }
  #modal-box.results .row.end.modal-foot { margin-top: 2px; padding-top: 2px; }
  #modal-box.results .card.tiny { --h: 14px; margin-right: 1px; }
  #modal-box.results .row.end { margin-top: 2px; position: relative; z-index: 2; }
  #modal-box.results .reg-sheet.inline.compact { margin: 0; padding: 0 8px; position: static; z-index: auto; }
}
#modal-box .pp-foot { flex-wrap: nowrap; }
#modal-box .pp-foot .pp-bots-l { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
#modal-box .pp-foot select { width: 56px; flex: 0 0 auto; }
#modal-box .pp-foot .spacer { flex: 1 1 auto; }
@media (max-height: 420px) {
  #modal-box.pass-play .pp-seats { margin: 4px 0; gap: 4px 12px; }
  #modal-box.pass-play .pp-seat .avatar-pick { width: 34px; height: 34px !important; font-size: 17px !important; }
}

/* v0.1.10 touch targets (WARN 3): every tappable control is at least 32x32 CSS px at every supported size
   (568x320, 640x340, 740x360, 844x390), 44px where the layout has room. tests/layout.test.js asserts this. */
button, select, input:not([type=checkbox]):not([type=radio]):not([type=range]), summary, [role="button"] { min-height: 32px; }
button, [role="button"] { min-width: 32px; }
.x, .preset-chip .x { width: 32px; height: 32px; font-size: 13px; }
.act { height: clamp(32px, calc(9.6 * var(--u)), 44px); }
.refill-btn, .refill-link { min-height: 32px; padding: 0 10px; }
button.linkish { min-height: 32px; }
#modal-box .room-styles button { height: 32px; }
#modal-box.lobby .links button, #modal-box .lobby .links button { height: 32px; }
#modal-box .you-row #name-input { min-width: 64px; } /* Log out moved to the links row in v0.1.10 to make room */
#modal-box .you-row #save-name { flex: 0 0 auto; padding: 0 12px; }
/* Narrow lobby panel (a lobby rectangle sits beside it): the room-style switch uses short labels (Evening / Family). */
@media (max-width: 700px) and (max-height: 420px) {
  #modal-box .room-styles .l-long { display: none; }
  #modal-box .room-styles .l-short { display: inline; }
}
.num input[type=number] { min-height: 32px; min-width: 56px; }
.reg-sheet.inline.compact button, #modal-box.results .reg-sheet.inline.compact button { height: 32px; }
#handoff .handoff-quit { min-height: 44px; padding: 0 14px; }
@media (min-height: 381px) {
  .reg-sheet.inline.compact button, #modal-box.results .reg-sheet.inline.compact button { height: 36px; }
  #modal-box.lobby .links button, #modal-box .lobby .links button { height: 36px; }
}
/* v0.1.10 rulebook: chips are 32px targets; on short landscape screens the seven number fields sit in one row
   with short labels and each peek list is one row with its label beside it, so the whole sheet fits on first view. */
.l-short { display: none; }
.chip span { min-width: 32px; min-height: 32px; line-height: 20px; padding: 5px 8px; box-sizing: border-box; }
@media (max-height: 420px) {
  #modal-box.rules h2 { margin-bottom: 4px; }
  #modal-box.rules .l-long { display: none; }
  #modal-box.rules .l-short { display: inline; }
  #modal-box.rules .rules-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.35fr) minmax(0, 1.9fr); gap: 4px 6px; margin-bottom: 6px; } /* v0.1.14: + Decks */
  #modal-box.rules .rules-grid .num { gap: 2px; white-space: nowrap; }
  #modal-box.rules .num input[type=number] { min-width: 0; width: 100%; padding: 0 6px; }
  #modal-box.rules .peek-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  #modal-box.rules .peek-row p { flex: 0 0 64px; margin: 0; font-size: var(--fs-xs); color: var(--muted); }
  #modal-box.rules .peek-row .chips { margin: 0; gap: 4px; flex-wrap: nowrap; }
  #modal-box.rules .chip span { padding: 5px 4px; }
  #modal-box.rules > p.small:not(.deck-note) { display: none; } /* v0.2.1: the deck note stays visible */
}

/* ================================================================================================================
   v0.1.12 Art Bible skin. Everything below reads the tokens in css/tokens.css, so both themes (Family default,
   Evening toggle) come from one rule set. Later rules win over the legacy (v0.1.11) rules above.
   ================================================================================================================ */
html, body { background: linear-gradient(180deg, var(--c-room-top), var(--c-room-floor)) fixed; color: var(--c-ink); font-family: var(--font-ui); }
#room-bg { background: linear-gradient(180deg, var(--c-room-top) 0%, var(--c-room-floor) 100%); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
h1, h2, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap-min); padding: 0 var(--sp-5); border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-ink); font: 600 var(--fs-p-body)/1 var(--font-ui); cursor: pointer;
  text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--c-accent); color: var(--c-on-accent); border-color: transparent; box-shadow: var(--sh-1); }
.btn.primary:hover { background: var(--c-accent-hover); }
.btn.secondary { background: var(--c-surface); border-color: var(--c-border-strong); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--c-accent); }
.btn.icon { width: var(--tap-min); padding: 0; }
.btn svg, .ic svg { width: 20px; height: 20px; }

/* ---------- Table: walnut / oxblood rail, token felt (flat room gradient around it) ---------- */
#felt-rim { background: linear-gradient(180deg, var(--c-rail-hi), var(--c-rail) 45%, var(--c-rail-lo)); box-shadow: var(--sh-3); }
#felt-rim::after { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-rail-hi) 70%, transparent); }
#felt-inner { background: radial-gradient(120% 90% at 50% 38%, var(--c-felt) 0%, var(--c-felt) 45%, var(--c-felt-edge) 100%);
  box-shadow: inset 0 0 0 2px var(--c-felt-line), inset 0 calc(1.6 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .25); }
#felt-inner::before { border-color: var(--c-felt-line); background: none; }
#felt-inner::after { content: 'Cambio'; font: 600 calc(4 * var(--u))/1 var(--font-display); letter-spacing: .02em; padding: 0; color: var(--c-on-felt); opacity: .08; }

/* Corner info, menu, timer chips */
.timer { font-family: var(--font-num); font-feature-settings: var(--num-features); background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); box-shadow: var(--sh-1); padding: 2px 8px; border-radius: var(--r-pill); }
.timer.low { color: var(--c-on-danger); background: var(--c-danger-fill); border-color: transparent; }
.timer.room { color: var(--c-accent); }
@keyframes warn { 0%, 100% { background: var(--c-surface); } 25%, 75% { background: var(--c-danger-fill); color: var(--c-on-danger); } }
#version-tag { color: var(--c-text-3); }
.corner-btn { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-ink); box-shadow: var(--sh-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.badge-18 { border-color: var(--c-border-strong); color: var(--c-ink); background: var(--c-surface); font-family: var(--font-num); }

/* Action column: pill buttons (surface / accent primary / ghost), Cambio = hold-to-call pill */
.act { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); box-shadow: var(--sh-1);
  -webkit-backdrop-filter: none; backdrop-filter: none; font: 600 var(--fs-l-label)/1.1 var(--font-ui); position: relative; }
.act.primary:not(:disabled) { background: var(--c-accent); color: var(--c-on-accent); border-color: transparent; }
.act.ghost { background: transparent; border-color: var(--c-border-strong); box-shadow: none; }
.act:disabled { opacity: .45; }
.act.cambio { background: var(--c-cambio); color: var(--c-on-cambio); border-color: transparent; font: 700 var(--fs-l-cambio)/1 var(--font-display); letter-spacing: .01em; overflow: hidden; touch-action: none; }
.act.cambio:not(:disabled):hover { background: var(--c-cambio-hover); }
.act.cambio:disabled { background: color-mix(in srgb, var(--c-cambio) 22%, var(--c-surface)); color: var(--c-text-2); }
.act.cambio::after { content: ''; position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: color-mix(in srgb, var(--c-on-cambio) 22%, transparent); pointer-events: none; }
.act.cambio.holding::after { animation: cambio-hold 450ms linear forwards; }
@keyframes cambio-hold { to { width: 100%; } }
.act.armed { box-shadow: 0 0 0 2px var(--c-selected); }

/* Status banner = Bible toast: inverse ink pill */
#banner { background: var(--c-ink); color: var(--c-bg); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--r-pill); box-shadow: var(--sh-2); font: 500 var(--fs-l-body)/1.35 var(--font-ui); }
#banner b { color: inherit; font-weight: 700; }
#banner a { color: inherit; text-decoration: underline; }
#banner.mine { box-shadow: 0 0 0 2px var(--c-selected), var(--sh-2); }
#banner.power { box-shadow: 0 0 0 2px var(--c-peek), var(--sh-2); }
#banner .pp-done { background: var(--c-bg); color: var(--c-ink); }

/* ---------- Cards (Bible 4): 5:7, Fraunces indices, SVG suits, 4-colour deck, power chip, court frame ---------- */
.card { background: var(--c-card-face); color: var(--c-card-ink); box-shadow: var(--sh-card); border: 1px solid var(--c-card-edge); }
.card.back { background: var(--card-back) center / 100% 100% no-repeat; border-color: transparent; }
.card.empty { background: color-mix(in srgb, var(--c-on-felt) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-felt) 28%, transparent); border: 0; }
.card.face.s-spades { color: var(--c-card-ink); }
.card.face.s-hearts { color: var(--c-card-red); }
.card.face.s-diamonds { color: var(--c-card-blue); }
.card.face.s-clubs { color: var(--c-card-green); }
html.deck-2c .card.face.s-diamonds { color: var(--c-card-red); }
html.deck-2c .card.face.s-clubs { color: var(--c-card-ink); }
.card .sg { display: block; width: 1em; height: 1em; fill: currentColor; }
.card .corner { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--h) * .19); line-height: .95; gap: .06em; font-variant-numeric: lining-nums; }
.card .corner .sg { width: .62em; height: .62em; }
.card .pip { top: 54%; font-size: calc(var(--h) * .34); }
.card .pip.ace { font-size: calc(var(--h) * .46); }
.card .court { inset: 22% 21% 16%; border: 1.5px solid currentColor; box-shadow: inset 0 0 0 2px var(--c-card-face), inset 0 0 0 3px currentColor; background: none; opacity: 1; border-radius: calc(var(--h) * .03); }
.card .court b { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--h) * .26); }
.card .court .foot { font: 700 calc(var(--h) * .1)/1 var(--font-num); font-feature-settings: var(--num-features); }
.card .pchip { position: absolute; right: 6%; top: 5%; width: calc(var(--h) * .17); height: calc(var(--h) * .17); border-radius: 50%; display: grid; place-items: center;
  background: var(--c-power); color: var(--c-power-ink); box-shadow: var(--sh-1); }
.card .pchip svg { width: 68%; height: 68%; }
.card.small .pchip, .card.tiny .pchip, .card.small .court, .card.small .pip { display: none; }
.card.small .tl, .card.tiny .tl { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card.small .tl .sg, .card.tiny .tl .sg { width: .7em; height: .7em; }
.card.medium .pchip { width: calc(var(--h) * .15); height: calc(var(--h) * .15); }
.card .pts { color: var(--c-on-felt); font-family: var(--font-num); }
.card.selectable { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-selected) 85%, transparent), var(--sh-card); }
.card.selected { transform: translateY(-8%); box-shadow: 0 0 0 2px var(--c-selected), 0 0 calc(var(--h) * .2) color-mix(in srgb, var(--c-selected) 45%, transparent), var(--sh-lift); }
@keyframes cardflash { 0%, 100% { box-shadow: var(--sh-card); } 30%, 70% { box-shadow: 0 0 0 2px var(--c-peek), 0 0 calc(var(--h) * .3) color-mix(in srgb, var(--c-peek) 60%, transparent); } }
.card.deal { animation: deal var(--dur-deal) var(--ease-out) both; }
.card.flip { animation: flip var(--dur-flip) var(--ease-flip); }
.pile-count { font-family: var(--font-num); font-feature-settings: var(--num-features); color: var(--c-on-felt); }
.drawn-label { color: var(--c-on-felt); }

/* Seats: avatar disc, name chip, Bot / Turn text chips (no robot emoji) */
.avatar { background: var(--c-surface-2); box-shadow: 0 0 0 1.5px var(--c-border-strong), var(--sh-1); }
.seat .name, #my-tag .name { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); font: 600 var(--fs-l-label)/1.5 var(--font-ui); }
.seat.active .avatar, #my-area.active #my-tag .avatar { box-shadow: 0 0 0 2.5px var(--c-selected), var(--sh-2); }
.chip-bot, .chip-turn { display: inline-block; font: 700 10px/1 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 3px 6px; border-radius: var(--r-pill); vertical-align: middle; }
.chip-bot { background: var(--c-surface-3); color: var(--c-ink); }
.chip-turn { background: var(--c-selected); color: #1E2A2C; }
.seat .chip-bot, .seat .chip-turn { margin-top: -2px; }
.seat.top .chip-bot, .seat.top .chip-turn { display: none; }
.cambio-badge { background: var(--c-cambio); color: var(--c-on-cambio); padding: 0 6px; border-radius: var(--r-pill); font-size: 10px; }

/* ---------- Modals: surface panels; portrait = bottom sheet with a grab handle ---------- */
#modal { background: var(--c-scrim); }
#modal-box { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); box-shadow: var(--sh-3); border-radius: var(--r-xl);
  -webkit-backdrop-filter: none; backdrop-filter: none; font: 400 var(--fs-p-small)/1.5 var(--font-ui); }
#modal-box h1, #modal-box h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-p-h3); }
#modal-box h3 { color: var(--c-text-2); }
#modal-box section { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
#modal-box button, #modal-box input, #modal-box select { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border-strong); font-family: var(--font-ui); }
#modal-box input, #modal-box select { background: var(--c-surface-2); border-color: var(--c-border); }
#modal-box button.primary { background: var(--c-accent); color: var(--c-on-accent); border-color: transparent; }
#modal-box button.danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger); }
#modal-box button.ghost { background: transparent; border-color: transparent; color: var(--c-accent); }
#modal-box .small { color: var(--c-text-2); }
#modal-box .note { background: var(--c-sage-soft); border-left-color: var(--c-accent); }
#modal-box a { color: var(--c-accent); }
#modal-box select option { background: var(--c-surface); color: var(--c-ink); }
#modal-box .row.end.modal-foot { background: var(--c-surface); border-top-color: var(--c-border); }
#modal-box .room-styles { background: var(--c-surface-2); border-color: var(--c-border); }
#modal-box .room-styles button[aria-pressed="true"] { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-1); }
#modal-box .room-styles button { color: var(--c-text-2); }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); text-transform: none; }
.wordmark::after { display: none; }
.chip span { background: var(--c-surface-2); border-color: var(--c-border); }
.chip input:checked + span { background: var(--c-accent); color: var(--c-on-accent); }
.code { background: var(--c-sage-soft); color: var(--c-ink); }
.seat-list li { background: var(--c-surface-2); }
table.results td { border-bottom-color: var(--c-border); }
table.results tr.win td { background: color-mix(in srgb, var(--c-selected) 16%, transparent); }
table.results tr.win td:first-child { box-shadow: inset 3px 0 0 var(--c-selected); }
.win-dot { background: var(--c-selected); }
.gate-badge { color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-border-strong); background: var(--c-surface-2); font-family: var(--font-display); }
details summary { color: var(--c-ink); }
details { color: var(--c-text-2); }
.reg-sheet { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-border); box-shadow: var(--sh-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.reg-sheet input, .reg-sheet button { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-border); }
.reg-sheet button.primary { background: var(--c-accent); color: var(--c-on-accent); }
.reg-err, #modal-box .pp-seat .reg-err, .admin-errors { color: var(--c-danger); }
#admin-json { background: var(--c-surface-2); color: var(--c-ink); }
.mock-ad-box { background: var(--c-surface); color: var(--c-ink); }

/* Emoji drawer, zoom */
.drawer { background: var(--c-surface) !important; color: var(--c-ink); border-color: var(--c-border) !important; box-shadow: var(--sh-3) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.emoji-pack { border-right-color: var(--c-border); }
.pack-head { color: var(--c-text-2); }
.uses-badge { background: var(--c-sage-soft); color: var(--c-ink); }
.emoji .uses { color: var(--c-accent); }
.refill-btn, .refill-link { border-color: var(--c-accent); color: var(--c-accent); }
.refill-sheet { background: var(--c-surface-2); border-color: var(--c-border); }
.refill-sheet button { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-border-strong); }
.refill-sheet button.primary { background: var(--c-accent); color: var(--c-on-accent); }
#zoom { background: var(--c-scrim); }

/* Pass & Play privacy cover: opaque theme surface */
#handoff { background: var(--c-bg); background-image: radial-gradient(ellipse 60% 70% at 50% 40%, var(--c-room-top) 0%, var(--c-room-floor) 100%); color: var(--c-ink); }
#handoff h2 { font-family: var(--font-display); font-weight: 600; }
#handoff .handoff-round, #handoff .small, #handoff .handoff-log { color: var(--c-text-2); }
#handoff .handoff-round b { color: var(--c-accent); }
#handoff .handoff-avatar { background: var(--c-surface-2); box-shadow: 0 0 0 2px var(--c-accent), var(--sh-2); }
#handoff .handoff-go { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--sh-2); }
#handoff .handoff-quit { color: var(--c-text-2); }

/* ---------- Ad zones (Bible 10): --c-ad-bg, 1px frame, 11px caps "Advertisement" label ---------- */
.ad-slot .ad-label { font: 600 var(--fs-ad-label)/1 var(--font-ui); letter-spacing: var(--tracking-caps); color: var(--c-ad-label); }
.ad-slot .ad-fill { background: var(--c-ad-bg); border: 1px solid var(--c-ad-frame); border-radius: var(--r-sm); }
.ad-slot.ad-placeholder-on .ad-fill { border: 1px solid var(--c-ad-frame); background: var(--c-ad-bg); }
.ad-placeholder { color: var(--c-ad-label); }
.ad-slot.ad-house-on .ad-fill { pointer-events: auto; }
/* House ads (ADS_ENABLED=false): one link per zone, exactly the zone size, opens a new tab. */
a.house-ad { display: flex; align-items: center; gap: 8px; overflow: hidden; text-decoration: none; color: var(--c-ink); background: var(--c-surface); pointer-events: auto; box-sizing: border-box; }
a.house-ad .ha-vis { flex: none; display: block; overflow: hidden; border-radius: var(--r-xs); background: var(--c-surface-2); }
a.house-ad .ha-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
a.house-ad .ha-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
a.house-ad .ha-name { font: 700 13px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.house-ad .ha-line { font: 500 11px/1.25 var(--font-ui); color: var(--c-text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
a.house-ad .ha-host { font: 500 10px/1.2 var(--font-ui); color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.house-ad .ha-cta { flex: none; font: 700 11px/1 var(--font-ui); padding: 6px 10px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); }
a.house-ad.ha-strip { padding: 4px 6px; }
a.house-ad.ha-strip .ha-vis { width: 42px; height: 42px; }
a.house-ad.ha-strip .ha-line { -webkit-line-clamp: 1; }
a.house-ad.ha-strip .ha-host { display: none; }
a.house-ad.ha-tall { flex-direction: column; justify-content: flex-start; padding: 8px 6px; text-align: center; gap: 8px; }
a.house-ad.ha-tall .ha-vis { width: 100%; aspect-ratio: 1; }
a.house-ad.ha-tall .ha-text { align-items: center; }
a.house-ad.ha-tall .ha-name { white-space: normal; }
a.house-ad.ha-tall .ha-line { -webkit-line-clamp: 4; }
a.house-ad.ha-tall .ha-cta { margin-top: auto; }
a.house-ad.ha-rect { flex-direction: column; align-items: stretch; padding: 8px; gap: 6px; }
a.house-ad.ha-rect .ha-vis { width: 100%; flex: 1 1 auto; min-height: 0; }
a.house-ad.ha-rect .ha-cta { align-self: flex-start; }
.ha-card { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, var(--c-felt), var(--c-felt-edge)); color: var(--c-on-felt); }
.ha-card-mark { font: 700 22px/1 var(--font-display); }
.ha-card-name { font: 600 9px/1.1 var(--font-ui); letter-spacing: .04em; text-align: center; padding: 0 4px; }
.ha-strip .ha-card-name { display: none; }
/* Full-screen house interstitial / rewarded (5 s), above everything incl. the update banner */
.house-ad-overlay { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: var(--c-scrim); padding: max(12px, var(--sat)) max(12px, var(--sar)) max(12px, var(--sab)) max(12px, var(--sal)); }
.ha-box { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 12px 14px; box-shadow: var(--sh-3); overflow: hidden; }
.ha-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ha-top .ad-label { font: 600 var(--fs-ad-label)/1 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ad-label); }
.ha-close { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-ink); font: 600 14px/1 var(--font-ui); cursor: pointer; }
.ha-close:disabled { opacity: .55; cursor: default; }
.ha-hero { display: block; flex: 1 1 auto; min-height: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); aspect-ratio: 16 / 9; max-height: 52vh; }
.ha-hero .ha-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ha-hero .ha-card-mark { font-size: 48px; }
.ha-hero .ha-card-name { font-size: 16px; }
.ha-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ha-foot .ha-text { display: flex; flex-direction: column; min-width: 0; }
.ha-foot .ha-name { font: 600 18px/1.2 var(--font-display); }
.ha-foot .ha-line { font: 400 13px/1.35 var(--font-ui); color: var(--c-text-2); }
.ha-foot .ha-host { font: 500 12px/1.3 var(--font-ui); color: var(--c-text-3); }
.ha-foot .ha-cta { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); font: 700 14px/1 var(--font-ui); text-decoration: none; }
.ha-count { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-num); color: var(--c-text-2); }
.ha-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-border); border-top-color: var(--c-accent); animation: ha-spin 1s linear infinite; }
@keyframes ha-spin { to { transform: rotate(360deg); } }
@media (max-height: 420px) and (orientation: landscape) {
  .ha-box { width: min(720px, 100%); display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto 1fr auto; }
  .ha-top { grid-column: 1 / -1; }
  .ha-hero { grid-row: 2 / 4; max-height: none; aspect-ratio: auto; }
  .ha-foot { flex-direction: column; align-items: flex-start; }
}
.round-break-overlay { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; background: #06140f; padding: max(8px, var(--sat)) max(8px, var(--sar)) max(8px, var(--sab)) max(8px, var(--sal)); }
.rb-box { width: min(520px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 8px; color: #f4efe2; }
.rb-top { display: flex; align-items: center; gap: 8px; }
.rb-top .ad-label { font: 700 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #e7c56a; }
.rb-kind { flex: 1 1 auto; font: 600 13px/1.2 var(--font-ui); color: #f4efe2; }
.rb-x { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid rgba(244, 239, 226, .35); background: transparent; color: #f4efe2; font: 700 18px/1 var(--font-ui); cursor: pointer; }
.rb-sponsor { margin: 0; text-align: right; font: 500 12px/1 var(--font-ui); color: rgba(244, 239, 226, .72); }
.rb-creative { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.rb-oval { width: min(420px, 92%); aspect-ratio: 2.4 / 1; max-height: 46vh; border-radius: 999px; border: 2px solid #e7c56a; background: radial-gradient(circle at 50% 45%, #1f8a4d, #0c5a32 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 28px; box-sizing: border-box; }
.rb-oval b { font: 700 28px/1.1 var(--font-display); color: #fff; }
.rb-oval span, .rb-oval small { display: block; margin-top: 4px; font: 500 12px/1.3 var(--font-ui); color: rgba(255, 255, 255, .88); }
.rb-foot { margin: 0; font: 500 12px/1.35 var(--font-ui); color: rgba(244, 239, 226, .8); text-align: center; }
@media (max-height: 360px) and (orientation: landscape) {
  .rb-box { display: grid; grid-template-columns: 1.3fr .9fr; grid-template-rows: auto 1fr auto; gap: 4px 12px; width: min(640px, 100%); }
  .rb-top { grid-column: 1 / -1; }
  .rb-creative { grid-row: 2 / 4; }
  .rb-oval { max-height: none; width: 100%; aspect-ratio: auto; height: 100%; }
  .rb-oval b { font-size: 22px; }
  .rb-sponsor { grid-column: 2; align-self: end; }
  .rb-foot { grid-column: 2; align-self: start; text-align: left; }
}
#emoji-drawer .emoji-game-label { font: 800 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
#emoji-drawer .emoji-count { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font: 800 13px/1.2 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; }
#emoji-drawer .emoji-count.ok { color: #d6f5c8; background: #1e4d32; }
#emoji-drawer .emoji-count.out { color: #fff; background: #8c1d2c; }
#emoji-drawer .emoji-game-sub { display: block; margin-top: 2px; color: var(--c-text-2, var(--muted)); font-size: 11px; }
#emoji-drawer .emoji-empty { margin: 0 0 6px; padding: 8px; border-radius: 12px; border: 1px solid #e7c56a; background: rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 4px; }
#emoji-drawer .emoji-empty b { color: #f3d27a; font-size: 13px; }
#emoji-drawer .emoji-empty span { font-size: 11px; color: var(--c-text-2, var(--muted)); }
#emoji-drawer .emoji-empty .refill-btn { min-height: 44px; height: auto; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.refill-overlay { position: fixed; inset: 0; z-index: 10003; display: flex; align-items: center; justify-content: center; background: rgba(6, 12, 10, .72); padding: 12px; }
.refill-overlay.hidden { display: none; }
.refill-card { width: min(360px, 100%); box-sizing: border-box; padding: 16px 16px 14px; border-radius: 18px; background: #123524; color: #f4efe2; border: 1px solid rgba(231, 197, 106, .45); display: flex; flex-direction: column; gap: 8px; text-align: center; }
.refill-card h2 { margin: 0; font: 700 22px/1.15 var(--font-display); }
.refill-card .small { margin: 0; color: rgba(244, 239, 226, .78); }
.refill-card .refill-lead { margin: 0; font-weight: 600; }
.refill-card .refill-n { margin: 0; color: #b6e7a8; font: 700 16px/1.3 var(--font-ui); }
.refill-card button { min-height: 44px; height: auto; border-radius: 12px; padding: 8px 12px; cursor: pointer; font: 700 15px/1.2 var(--font-ui); }
.refill-card button.primary { background: #e7c56a; color: #2a1a06; border: 0; display: flex; flex-direction: column; align-items: center; }
.refill-card button.primary span { font: 600 12px/1.2 var(--font-ui); }
.refill-card #refill-cancel { background: transparent; color: #f4efe2; border: 1px solid rgba(244, 239, 226, .45); }
.refill-check { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #1f8a4d; color: #fff; font: 800 22px/1 var(--font-ui); }
@media (max-height: 360px) and (orientation: landscape) {
  .refill-card { width: min(520px, 100%); padding: 10px 14px; gap: 4px; }
  .refill-card h2 { font-size: 18px; }
  .refill-card button { min-height: 40px; }
}

/* ---------- Landing page (#home, Bible 6.9): portrait-first, single column, scrolls (<= 1.25 screens) ---------- */
#home { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--c-room-top), var(--c-bg) 40%, var(--c-room-floor)); color: var(--c-ink); user-select: text; touch-action: pan-y; }
.home-inner { width: min(100%, 440px); margin: 0 auto; padding: max(var(--sp-3), var(--sat)) max(var(--sp-5), var(--sar)) max(var(--sp-4), var(--sab)) max(var(--sp-5), var(--sal)); display: flex; flex-direction: column; gap: var(--sp-4); }
.home-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); }
.home-top .icon-btn { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink); display: grid; place-items: center; cursor: pointer; }
.home-top .icon-btn svg { width: 20px; height: 20px; }
.home-brand { text-align: center; }
.wordmark-lg { margin: 0; font: 700 var(--fs-p-display)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-ink); display: inline-flex; align-items: baseline; }
.wordmark-lg .o-card { display: inline-block; width: .52em; height: .7em; margin: 0 .03em; border-radius: .07em; background: var(--card-back) center / 100% 100% no-repeat; transform: rotate(8deg); box-shadow: var(--sh-1); vertical-align: baseline; }
.tagline { margin: var(--sp-2) 0 0; font: 500 var(--fs-p-body)/1.4 var(--font-ui); color: var(--c-text-2); }
.hero-fan { position: relative; height: min(168px, 22vh); display: flex; align-items: center; justify-content: center; }
.hero-fan .card { --h: min(132px, 17vh); position: absolute; top: 50%; left: 50%; margin: calc(var(--h) / -2) 0 0 calc(var(--h) * -5 / 14); transform-origin: 50% 120%; box-shadow: var(--sh-2); }
.hero-fan .card:nth-child(1) { transform: rotate(-18deg) translateX(-34%); }
.hero-fan .card:nth-child(2) { transform: rotate(-6deg) translateX(-11%); }
.hero-fan .card:nth-child(3) { transform: rotate(6deg) translateX(11%); }
.hero-fan .card:nth-child(4) { transform: rotate(18deg) translateX(34%); }
.home-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.home-cta .btn { width: 100%; }
.home-cta #home-play { grid-column: 1 / -1; min-height: 52px; font: 700 var(--fs-p-h3)/1 var(--font-ui); }
.home-cta #home-signin, .home-cta #home-resume { grid-column: 1 / -1; }
.install-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.install-card .ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-sage-soft); color: var(--c-accent); }
.install-card .txt { flex: 1 1 auto; min-width: 0; font-size: var(--fs-p-small); line-height: 1.35; }
.install-card .txt b { display: block; font-size: var(--fs-p-body); }
.install-card .btn { min-height: 40px; padding: 0 var(--sp-4); }
.how-steps h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-p-h2); }
.how-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); counter-reset: step; }
.how-steps li { counter-increment: step; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3); font: 400 var(--fs-p-small)/1.4 var(--font-ui); color: var(--c-text-2); }
.how-steps li b { display: block; color: var(--c-ink); font: 600 var(--fs-p-body)/1.25 var(--font-ui); margin-bottom: 2px; }
.how-steps li b::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font: 700 12px/1 var(--font-num); vertical-align: 1px; }
.how-steps .more { margin-top: var(--sp-2); }
.ad-inline { position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.ad-inline .ad-fill { flex: none; width: 320px; height: 50px; max-width: 100%; }
.home-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--sp-1); font-size: var(--fs-p-caption); color: var(--c-text-3); padding-bottom: var(--sp-2); }
.home-foot a, .home-foot .home-foot-link { color: var(--c-text-2); min-height: 32px; display: inline-flex; align-items: center; padding: 0 6px; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.home-foot a:hover, .home-foot .home-foot-link:hover { text-decoration: underline; }
html.home-open #ui-layer, html.home-open #table-layer { visibility: hidden; }
@media (orientation: landscape) and (max-height: 500px) {
  .home-inner { width: min(100%, 720px); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); align-items: start; }
  .home-top, .home-foot, #ad-home, .how-steps { grid-column: 1 / -1; }
  .home-brand { grid-column: 1; }
  .hero-fan { grid-column: 1; height: 120px; }
  .hero-fan .card { --h: 100px; }
  .home-cta, .install-card { grid-column: 2; }
  .home-cta { grid-row: 2 / 4; align-self: center; }
  .how-steps ol { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Update banner (Bible 6.7): 48px, top safe area, 3px accent rule ---------- */
#update-banner { position: fixed; z-index: 10002; top: calc(var(--sat) + 8px); left: 50%; transform: translateX(-50%); width: min(calc(100vw - 16px), 560px); min-height: 48px;
  display: flex; align-items: center; gap: var(--sp-2); padding: 4px 6px 4px 14px; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent); border-radius: var(--r-md); box-shadow: var(--sh-3); font: 500 var(--fs-p-small)/1.3 var(--font-ui); animation: ub-in var(--dur-base) var(--ease-out); }
#update-banner p { flex: 1 1 auto; margin: 0; min-width: 0; }
#update-banner .ub-msg { display: block; color: var(--c-text-2); font-size: var(--fs-p-caption); }
#update-banner .btn { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-p-small); }
#update-banner .btn.icon { width: 40px; padding: 0; color: var(--c-text-2); }
#update-banner .btn svg { width: 18px; height: 18px; }
@keyframes ub-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---------- Rotate screen (Bible 6.10): only while a game is on and the phone is upright ---------- */
#rotate-overlay { background: linear-gradient(180deg, var(--c-room-top), var(--c-room-floor)); color: var(--c-ink); gap: var(--sp-2); z-index: 10000; }
#rotate-overlay .rotate-icon { border-color: var(--c-ink); width: 48px; height: 80px; border-radius: 10px; position: relative; animation: rot 2.4s var(--ease-in-out) infinite; }
#rotate-overlay .rotate-icon::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--c-ink); opacity: .5; }
#rotate-overlay h2 { margin: var(--sp-5) 0 0; font-size: var(--fs-p-h1); }
#rotate-overlay p { margin: 0; font: 400 var(--fs-p-body)/1.4 var(--font-ui); color: var(--c-text-2); }
#rotate-overlay .ios-hint { display: none; max-width: 320px; margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-p-small); color: var(--c-text-2); }
html.ios-browser #rotate-overlay .ios-hint { display: block; }
#rotate-overlay .btn { margin-top: var(--sp-4); }
@media (prefers-reduced-motion: reduce) { #rotate-overlay .rotate-icon { animation: none; transform: rotate(-90deg); } }

/* iOS install steps */
.ios-steps { list-style: none; padding: 0; margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ios-steps li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-p-body); }
.ios-steps .ic { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-accent); }

/* ---------- Portrait setup screens: bottom sheets, single column (Bible 6.4) ---------- */
@media (orientation: portrait) {
  #modal { align-items: flex-end; padding: calc(var(--st-t) + 8px) 0 0; }
  #modal-box { width: 100%; max-width: 560px; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: max(var(--mpy), var(--sab)); border-bottom: 0; position: relative; padding-top: calc(var(--mpy) + 10px); }
  #modal-box::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--c-border-strong); }
  #modal-box.age-gate, #modal-box.consent-step { border-radius: var(--r-xl); margin-bottom: auto; margin-top: auto; align-self: center; width: calc(100% - 32px); }
  #modal { justify-content: center; }
  .lobby-grid, #modal-box .cols, #modal-box .pp-results { grid-template-columns: 1fr; }
  #modal-box .pp-seats { grid-template-columns: 1fr; }
  #modal-box button, #modal-box input, #modal-box select { min-height: 44px; }
  #modal-box .hero button.primary, #modal-box .hero #pass-play { height: 48px; }
  #modal-box .you-row { flex-wrap: wrap; }
  #modal-box .rules-grid { grid-template-columns: repeat(2, 1fr); }
  .reg-sheet { bottom: max(8px, var(--sab)); }
}
@media (prefers-reduced-motion: reduce) { #update-banner { animation: none; } .act.cambio.holding::after { animation-duration: 450ms !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#deck-colours[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent); }
html.ad-top-band .seat.top { margin-top: 8px; }
html.ad-top-band .margin.right { top: calc(50% + 14px); } /* clear the menu button under the top strip */
/* v0.1.12: the rulebook fits the 568x320 / 640x340 panel under its banner without scrolling. */
@media (orientation: landscape) and (max-height: 340px) {
  #modal-box.rules h2 { line-height: 1.1; margin-bottom: 4px; }
  #modal-box.rules .rules-grid { margin-bottom: 4px; }
  #modal-box.rules .modal-foot { padding-top: 4px; padding-bottom: 8px; margin-bottom: -12px; }
}

/* v0.1.12: phone-portrait landing stays within 1.25 viewport heights even with the install card showing. */
@media (max-width: 599px) {
  .home-inner { gap: var(--sp-3); }
  .install-card { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .install-card .ic { display: none; }
  .install-card .txt { font-size: 12px; line-height: 1.3; }
  .install-card .txt b { white-space: nowrap; }
  .install-card .btn { padding: 0 var(--sp-3); min-height: 40px; }
  .install-card #install-later { padding: 0 var(--sp-2); white-space: nowrap; }
  .how-steps h2 { margin-bottom: var(--sp-2); }
  .how-steps li { padding: var(--sp-2) var(--sp-3); }
}

/* =====================================================================================================================
   v0.1.13 cinematic skin. Depth and light over the Art Bible tokens: a warm key light, soft shadows, rim light,
   textured felt, a glossy wood rail, cards with thickness, 3D portraits and a marketing landing page.
   All art is local WebP (assets/art, assets/avatars). Motion only under prefers-reduced-motion: no-preference.
   ===================================================================================================================== */
:root, [data-theme="family"] {
  --cine-glow: rgba(255, 206, 140, .42); --cine-vignette: rgba(60, 36, 18, .28);
  --cine-page: radial-gradient(120% 55% at 25% 0%, rgba(255, 214, 160, .55), transparent 62%), linear-gradient(180deg, #F4E9D6 0%, #EAD9BD 55%, #DCC4A0 100%);
  --cine-panel: linear-gradient(180deg, #FFFBF4, #F6ECDC); --cine-panel-edge: rgba(120, 84, 48, .18);
  --cine-cta: linear-gradient(180deg, #3C8B83 0%, #2A6C65 55%, #1F5550 100%); --cine-cta-ink: #FFFFFF;
  --cine-gold: #C99A4B;
}
[data-theme="evening"] {
  --cine-glow: rgba(232, 180, 90, .30); --cine-vignette: rgba(0, 0, 0, .55);
  --cine-page: radial-gradient(120% 55% at 25% 0%, rgba(214, 160, 70, .22), transparent 62%), linear-gradient(180deg, #17120E 0%, #110E0B 55%, #0A0807 100%);
  --cine-panel: linear-gradient(180deg, #221B16, #1A1511); --cine-panel-edge: rgba(212, 175, 95, .20);
  --cine-cta: linear-gradient(180deg, #E2B866 0%, #C99A4B 55%, #A97C35 100%); --cine-cta-ink: #1B140C;
  --cine-gold: #D9AE5E;
}

/* ---------- Table: key light + vignette in the room, textured felt, glossy wood rail ---------- */
#room-bg { background:
  radial-gradient(55% 50% at 46% 42%, var(--cine-glow), transparent 70%),
  radial-gradient(150% 110% at 50% 42%, transparent 55%, var(--cine-vignette) 100%),
  linear-gradient(180deg, var(--c-room-top) 0%, var(--c-room-floor) 100%); }
#felt-rim {
  background: linear-gradient(180deg, rgba(255, 244, 225, .42) 0%, rgba(255, 244, 225, .10) 16%, transparent 38%, rgba(0, 0, 0, .10) 70%, rgba(0, 0, 0, .38) 100%),
    url("../assets/art/wood.webp") center / 220px auto, linear-gradient(180deg, var(--c-rail-hi), var(--c-rail) 45%, var(--c-rail-lo));
  background-blend-mode: normal, soft-light, normal;
  box-shadow: inset 0 2px 1px rgba(255, 238, 210, .45), inset 0 -4px 8px rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .25), 0 22px 44px rgba(0, 0, 0, .42), 0 6px 14px rgba(0, 0, 0, .30); }
#felt-inner {
  background: radial-gradient(70% 60% at 42% 28%, rgba(255, 236, 196, .20), transparent 65%),
    radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, .38) 100%),
    url("../assets/art/felt.webp") 0 0 / 180px 180px,
    radial-gradient(120% 90% at 50% 38%, var(--c-felt) 0%, var(--c-felt) 45%, var(--c-felt-edge) 100%);
  background-blend-mode: screen, normal, overlay, normal;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, .45), inset 0 -2px 6px rgba(255, 255, 255, .06); }

/* ---------- Cards: thickness (stacked edge), soft cast shadow, a little sheen from the key light ---------- */
.card { box-shadow: 0 1px 0 #D9CFBE, 0 2px 0 #C7BBA6, 0 3px 0 #B3A68F, 0 calc(var(--h) * .06) calc(var(--h) * .14) rgba(0, 0, 0, .34), 0 1px 2px rgba(0, 0, 0, .25);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .06) 100%); }
.card.back { background: linear-gradient(150deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .14) 100%), var(--card-back) center / 100% 100% no-repeat; }
.card.empty { background-image: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-felt) 28%, transparent), inset 0 2px 6px rgba(0, 0, 0, .25); }
.card.small, .card.tiny { box-shadow: 0 1px 0 #C7BBA6, 0 2px 0 #B3A68F, 0 3px 6px rgba(0, 0, 0, .32); }

/* ---------- 3D portraits ---------- */
.avatar .av-img, .handoff-avatar .av-img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; pointer-events: none; }
.avatar:has(.av-img) { padding: 0; overflow: hidden; background: #2A1D14; font-size: 0;
  box-shadow: 0 0 0 2px var(--cine-gold), 0 4px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .15); }
.handoff-avatar:has(.av-img) { width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--cine-gold), 0 10px 26px rgba(0, 0, 0, .45); }

/* ---------- Landing page: cinematic hero, feature sections, final CTA ---------- */
#home { background: var(--cine-page); }
.home-inner { gap: var(--sp-5); }
.home-top { position: relative; z-index: 2; }
.home-mark { font: 700 20px/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-ink); }
.home-top .icon-btn { background: var(--cine-panel); border-color: var(--cine-panel-edge); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.home-hero { position: relative; margin: 0 calc(-1 * var(--sp-3)); border-radius: 28px; overflow: hidden; isolation: isolate; color: #FFF8EC;
  background: #120D09; box-shadow: 0 24px 50px rgba(30, 18, 8, .38), 0 6px 14px rgba(30, 18, 8, .25), inset 0 1px 0 rgba(255, 230, 190, .25); }
.hero-art { position: absolute; inset: 0; z-index: -1; }
.hero-art img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 62%; display: block; will-change: transform; }
.hero-art::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 9, 6, .78) 0%, rgba(14, 9, 6, .42) 30%, rgba(14, 9, 6, .25) 46%, rgba(14, 9, 6, .70) 72%, rgba(14, 9, 6, .94) 100%),
    radial-gradient(80% 50% at 30% 0%, rgba(255, 200, 120, .25), transparent 70%); }
.hero-copy { position: relative; padding: var(--sp-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); text-align: center; }
.eyebrow { margin: 0; font: 700 11px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: #E9C27A; }
#modal-box .eyebrow { color: var(--c-ink); font-size: 14px; letter-spacing: .08em; }
.hero-h { margin: 0; font: 700 clamp(30px, 8.6vw, 44px)/1.04 var(--font-display); letter-spacing: -.01em; color: #FFF8EC; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero-h .wordmark-lg { font: inherit; color: #F2CF8A; display: inline-flex; align-items: baseline; }
.home-hero .tagline { margin: 0 auto; max-width: 30ch; color: rgba(255, 246, 230, .88); font-size: 15px; line-height: 1.45; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.home-hero .hero-fan { height: min(150px, 19vh); margin: var(--sp-1) 0; perspective: 900px; }
.home-hero .hero-fan .card { --h: min(118px, 15vh); box-shadow: 0 1px 0 #D9CFBE, 0 2px 0 #C7BBA6, 0 3px 0 #B3A68F, 0 4px 0 #A1937C, 0 18px 28px rgba(0, 0, 0, .55); }
.home-hero .home-cta { margin-top: var(--sp-1); }
.home-hero .btn.ghost { color: #FFF3DD; border-color: rgba(255, 236, 200, .35); background: rgba(20, 14, 9, .35); backdrop-filter: blur(6px); }
.home-hero #home-signin, .home-final .btn.secondary { grid-column: auto; background: rgba(255, 248, 236, .94); color: #1E1A16; border-color: transparent; }
.home-cta #home-play, .home-final .btn.primary { grid-column: auto; background: var(--cine-cta); color: var(--cine-cta-ink); border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 8px 20px rgba(0, 0, 0, .35); font: 700 17px/1 var(--font-ui); min-height: 52px; }
.home-cta #home-signin { min-height: 52px; font: 700 17px/1 var(--font-ui); }
.home-cta #home-resume { grid-column: 1 / -1; }
.home-cta .btn:active, .home-final .btn:active { transform: translateY(1px); }
.hero-note { margin: var(--sp-1) 0 0; font-size: 12px; color: rgba(255, 240, 215, .7); }
.sec-h { margin: 0 0 var(--sp-3); font: 700 var(--fs-p-h2)/1.15 var(--font-display); color: var(--c-ink); }
.home-features { display: flex; flex-direction: column; gap: var(--sp-3); }
.feature { display: grid; grid-template-columns: 1fr; border-radius: 22px; overflow: hidden; background: var(--cine-panel); border: 1px solid var(--cine-panel-edge);
  box-shadow: 0 14px 30px rgba(40, 24, 10, .16), 0 2px 6px rgba(40, 24, 10, .10), inset 0 1px 0 rgba(255, 255, 255, .5); }
.feat-art { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: #1A120C; }
.feat-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-art::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 -30px 40px -20px rgba(0, 0, 0, .35); }
.feat-copy { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.feat-copy h3 { margin: 0 0 4px; font: 700 18px/1.25 var(--font-display); color: var(--c-ink); }
.feat-copy p { margin: 0; font: 400 14px/1.45 var(--font-ui); color: var(--c-text-2); }
.feat-go { margin-top: var(--sp-2); min-height: 44px; }
.soon { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px; font: 700 10px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px;
  background: var(--cine-gold); color: #1B140C; }
.how-steps li { background: var(--cine-panel); border-color: var(--cine-panel-edge); box-shadow: 0 6px 14px rgba(40, 24, 10, .10); }
.home-final { text-align: center; padding: var(--sp-5) var(--sp-4); border-radius: 22px; color: #FFF8EC;
  background: radial-gradient(90% 80% at 30% 0%, rgba(255, 200, 120, .28), transparent 70%), linear-gradient(180deg, #2C1E14, #170F0A); box-shadow: 0 18px 36px rgba(30, 18, 8, .35); }
.home-final .sec-h { color: #FFF8EC; }
.home-final p { margin: 0 0 var(--sp-3); color: rgba(255, 240, 215, .8); }
.home-final .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.home-final .btn { min-height: 48px; }
@media (min-width: 600px) {
  .feature { grid-template-columns: 1fr 1fr; align-items: center; }
  .feature:nth-child(odd) .feat-art { order: 2; }
  .feat-art { aspect-ratio: 4 / 3; height: 100%; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .home-inner { display: flex; flex-direction: column; }
  .home-hero .hero-fan { display: none; }
}
/* Motion: hero parallax + scroll reveals (scroll-driven where supported) and a slow card float. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-art img { animation: hero-parallax linear both; animation-timeline: scroll(nearest block); animation-range: 0 600px; }
    .feature, .how-steps li, .home-final { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
  .home-hero .hero-fan .card { animation: fan-float 6s var(--ease-in-out) infinite alternate; }
  .home-hero .hero-fan .card:nth-child(2) { animation-delay: -1.5s; }
  .home-hero .hero-fan .card:nth-child(3) { animation-delay: -3s; }
  .home-hero .hero-fan .card:nth-child(4) { animation-delay: -4.5s; }
}
@keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(-14%); } }
@keyframes reveal-up { from { opacity: .001; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fan-float { from { translate: 0 0; } to { translate: 0 -5px; } }
/* v0.1.13: tall gutter house ads never clip their CTA. The picture takes whatever height the text leaves. */
a.house-ad.ha-tall .ha-vis { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
a.house-ad.ha-tall .ha-text, a.house-ad.ha-tall .ha-cta { flex: none; }
a.house-ad.ha-tall .ha-line { -webkit-line-clamp: 3; }
a.house-ad.ha-tall .ha-shot { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
:root, [data-theme="family"] { --cine-glow: rgba(255, 214, 150, .55); --cine-vignette: rgba(92, 58, 28, .34); }
/* Short phones: the hero keeps every CTA above the fold. */
@media (orientation: portrait) and (max-height: 760px) {
  .hero-copy { padding-top: var(--sp-4); gap: 6px; }
  .home-hero .hero-fan { height: min(110px, 15vh); }
  .home-hero .hero-fan .card { --h: min(92px, 12.5vh); }
  .home-inner { gap: var(--sp-4); }
}
@media (orientation: portrait) and (max-height: 620px) {
  .home-hero .hero-fan, .hero-note { display: none; }
  .home-hero .tagline { font-size: 14px; }
  .hero-h { font-size: 28px; }
}
/* Short landscape viewports (a phone held sideways on the landing page): hero CTAs stay on the first screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .home-hero .hero-fan, .hero-note, .home-hero .eyebrow { display: none; }
  .hero-copy { padding-top: var(--sp-3); gap: 4px; }
  .hero-h { font-size: 26px; }
  .home-hero .tagline { font-size: 13px; }
  .home-inner { gap: var(--sp-3); }
}

/* =====================================================================================================================
   v0.1.13 cinematic room (both themes). The table sits in a dark, warm, moody room: spotlight on the felt, deep
   vignette, a 3D table with a thick glossy wood rail, an apron edge and a floor shadow. Ad zones stay on the room layer
   (beside the table, never over it) and keep their "Advertisement" label.
   ===================================================================================================================== */
:root, [data-theme="family"] { --room-a: #47301D; --room-b: #2A1B10; --room-c: #170E08; --room-spot: rgba(255, 200, 130, .30); --room-ink: #F6E7CF; --room-ink-2: rgba(246, 231, 207, .72); }
[data-theme="evening"] { --room-a: #2A221B; --room-b: #15110D; --room-c: #080605; --room-spot: rgba(240, 190, 110, .22); --room-ink: #F1E4CC; --room-ink-2: rgba(241, 228, 204, .70); }
#room-bg { background:
  radial-gradient(42% 58% at 46% 46%, var(--room-spot), transparent 72%),
  radial-gradient(120% 95% at 46% 46%, transparent 38%, rgba(0, 0, 0, .62) 100%),
  url("../assets/art/wood.webp") center / 420px auto,
  linear-gradient(180deg, var(--room-a) 0%, var(--room-b) 55%, var(--room-c) 100%);
  background-blend-mode: normal, normal, soft-light, normal; }
#room-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30% 22% at 46% 8%, rgba(255, 214, 150, .16), transparent 70%); }
/* 3D table: slight perspective tilt (visual layer only; seats and cards stay flat and fully hittable), apron + shadow. */
#felt { transform-style: preserve-3d; filter: drop-shadow(0 calc(3.2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .55)); }
#felt-rim, #felt-inner { transform-origin: 50% 100%; }
#felt-rim { transform: perspective(1200px) rotateX(7deg);
  box-shadow: inset 0 2px 1px rgba(255, 238, 210, .55), inset 0 -5px 10px rgba(0, 0, 0, .5),
    0 calc(1.4 * var(--u)) 0 #3A2414, 0 calc(1.6 * var(--u)) 0 #24160C,
    0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .55), 0 0 calc(6 * var(--u)) rgba(255, 190, 110, .10); }
#felt-inner { transform: perspective(1200px) rotateX(7deg);
  background: radial-gradient(58% 55% at 48% 38%, rgba(255, 232, 186, .30), transparent 70%),
    radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(0, 0, 0, .48) 100%),
    url("../assets/art/felt.webp") 0 0 / 180px 180px,
    radial-gradient(120% 90% at 50% 38%, var(--c-felt) 0%, var(--c-felt) 45%, var(--c-felt-edge) 100%);
  background-blend-mode: screen, normal, overlay, normal; }
/* Text that sits directly on the room. */
#version-tag { color: var(--room-ink-2); }
#ad-gutter .ad-label, #ad-gutter-left .ad-label, #ad-table-top .ad-label, #ad-room-banner .ad-label { color: var(--room-ink-2); }
#ad-gutter a.house-ad, #ad-gutter-left a.house-ad { box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35); border-radius: 10px; }
.seat .chip-bot { background: rgba(20, 13, 8, .82); color: var(--room-ink); box-shadow: 0 0 0 1px rgba(233, 194, 122, .45); }
.seat .name, #my-tag .name { box-shadow: 0 4px 10px rgba(0, 0, 0, .40); }

/* Premium action buttons: lit gradient, bevel, cast shadow, clear contrast; >= 32 px. */
.act { min-height: 32px; font-weight: 700; color: #1E1A16; border: 1px solid rgba(40, 26, 14, .55);
  background: linear-gradient(180deg, #FFFBF2 0%, #F1E3C8 55%, #DCC7A2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 0 rgba(90, 60, 30, .22), 0 5px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); }
.act.primary:not(:disabled) { background: linear-gradient(180deg, #4B9C93 0%, #2F7770 55%, #1F5550 100%); color: #FFFFFF; border-color: rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 5px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(150, 220, 210, .25); }
.act.ghost { background: linear-gradient(180deg, rgba(58, 40, 26, .92), rgba(32, 22, 14, .92)); color: var(--room-ink); border-color: rgba(233, 194, 122, .45);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .18), 0 4px 10px rgba(0, 0, 0, .45); }
.act.cambio { background: linear-gradient(180deg, #F6D58C 0%, #D7A752 50%, #A97A33 100%); color: #1B1208; border-color: rgba(60, 36, 10, .6);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, .8), inset 0 -2px 0 rgba(80, 50, 10, .35), 0 6px 16px rgba(0, 0, 0, .5), 0 0 18px rgba(240, 190, 100, .25); }
.act.cambio:not(:disabled):hover { background: linear-gradient(180deg, #FADF9E 0%, #DDB060 50%, #B0823A 100%); }
.act:disabled, .act.cambio:disabled { opacity: 1; color: rgba(246, 231, 207, .62); border-color: rgba(233, 194, 122, .22);
  background: linear-gradient(180deg, rgba(64, 46, 31, .92), rgba(38, 27, 18, .92)); box-shadow: inset 0 1px 0 rgba(255, 230, 190, .10), 0 3px 8px rgba(0, 0, 0, .40); }
.act:not(:disabled):active { transform: translateY(1px) scale(.98); }

/* v0.1.13: the update banner never covers the table mid-round. In a game it becomes a compact pill in the free
   bottom-left corner of the room (clear of corner-info, the menu, the top seats and the action column). */
#update-banner .ub-short { display: none; }
html.in-game #update-banner { top: auto; bottom: calc(var(--sab, 0px) + 6px); left: calc(var(--sal, 0px) + 6px); right: auto; transform: none;
  width: auto; max-width: min(26vw, 210px); min-height: 40px; padding: 3px 4px 3px 10px; gap: 4px; font-size: 12px; animation: none; }
html.in-game #update-banner .ub-long, html.in-game #update-banner .ub-msg { display: none; }
html.in-game #update-banner .ub-short { display: inline; }
html.in-game #update-banner #ub-count { display: block; font-size: 11px; color: var(--c-text-2); }
html.in-game #update-banner .btn { min-height: 32px; padding: 0 8px; font-size: 12px; }
html.in-game #update-banner .btn.icon { width: 32px; }
/* v0.1.13: phones under 768px keep at least 16px between the home ad zone and its neighbours. */
@media (max-width: 767px) { #ad-home { margin-top: 16px; margin-bottom: 16px; } }
html.in-game #update-banner.ub-tl { top: calc(var(--sat, 0px) + 6px); bottom: auto; }
html.in-game #update-banner.ub-tr { top: calc(var(--sat, 0px) + 6px); bottom: auto; left: auto; right: calc(var(--sar, 0px) + 6px); }
html.in-game #update-banner.ub-br { left: auto; right: calc(var(--sar, 0px) + 6px); }
html.in-game #update-banner.ub-ac { bottom: var(--ub-ac-bottom, 60px); } /* v0.2.7.4: bottom left, just above the clock */
html.in-game #update-banner.ub-tm { top: calc(var(--sat, 0px) + 6px); bottom: auto; left: auto; right: var(--ub-tm-right, 60px); } /* v0.2.7.1: v7.2 table, left of the menu */
html.in-game #update-banner.ub-free { top: var(--ub-y, 6px); bottom: auto; left: var(--ub-x, 6px); right: auto; } /* v0.2.7.4: first free place (app.js placeUpdateBanner) */
html.in-game #update-banner.ub-ad { top: var(--ub-ad-top, 68px); bottom: auto; } /* v0.2.7.1: v7.2 table, 16 px under the table ad */
/* v0.2.7.4: no free place for the pill: only its Refresh (and Dismiss) buttons, the countdown still runs */
html.in-game #update-banner.ub-mini { max-width: none; min-height: 0; padding: 3px; gap: 0; }
html.in-game #update-banner.ub-mini p { display: none; }
@media (max-height: 340px) {
  html.in-game #update-banner { max-width: 118px; flex-wrap: wrap; padding: 4px 3px 4px 7px; row-gap: 2px; gap: 2px; }
  html.in-game #update-banner .btn { padding: 0 6px; }
  html.in-game #update-banner .btn.icon { width: 28px; }
  html.in-game #update-banner p { flex: 1 0 100%; }
}

/* ---------- v0.1.14: fixed name labels, dense rim (big hands), opponents' indices ---------- */
/* Every name label (each opponent and the player's own) is the same fixed box; a long name ends in an ellipsis and
   the CAMBIO / lock marks never push the label wider. */
.seat .name, #my-tag .name, .seat.top .name { box-sizing: border-box; width: var(--name-w, 84px); min-width: 0; max-width: none; height: 20px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; white-space: nowrap; line-height: 18px; }
.seat .name .nm, #my-tag .name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .name .cambio-badge, #my-tag .name .cambio-badge, .seat .name .lk { flex: none; font-size: 9px; line-height: 14px; }
.seat .name .cambio-badge, #my-tag .name .cambio-badge { padding: 0 3px; }
#my-tag { width: var(--name-w, 84px); }
#my-tag .name { max-width: none; }
/* Opponents' cards: a bigger centred index (rank over suit) so a revealed card reads at a glance. The 34px cell pitch
   is unchanged (gap = 34px - card), so a taller card never moves the layout. */
.seat .hand.small.pad { --ch: max(28px, min(calc(8 * var(--u)), calc(calc(17 * var(--u)) / var(--rows, 2)))); }
.seat .hand.small.pad .card.small { --h: var(--ch); }
.card.small .tl { font-size: calc(var(--h) * .4); font-weight: 800; letter-spacing: -.04em; }
.card.small .tl .sg { width: .78em; height: .78em; }
/* Dense rim: #seats spans the whole play area; seats are [hand] over [portrait | name], anchored to the corners. */
#seats.dense { left: var(--play-l); right: var(--play-r); }
.seat.dense { transform: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.seat.dense .hand { margin: 0; }
.seat.dense .seat-id { position: relative; flex-direction: row; gap: 4px; }
.seat.dense .avatar { width: 30px; height: 30px; font-size: 16px; }
.seat.dense .chip-bot, .seat.dense .chip-turn { position: absolute; left: 14px; bottom: -3px; margin: 0; padding: 2px 3px; font-size: 7px; pointer-events: none; z-index: 1; }
.seat.dense .chip-turn { left: auto; right: -4px; bottom: auto; top: -6px; }
.seat.dense.at-ul { left: 0; top: 0; }
.seat.dense.at-t { left: 50%; top: 0; transform: translateX(-50%); }
.seat.dense.at-ur { right: 0; top: 0; }
.seat.dense.at-ll { left: 0; top: max(104px, 29%); }
.seat.dense.at-lr { right: 0; top: max(104px, 29%); }
/* The timer / version / 18+ corner moves under the action column so the upper-left seat never covers it. */
html.dense-table #corner-info { left: auto; right: 12px; top: auto; bottom: 8px; align-items: flex-end; }
/* v0.1.14 card faces (feedback: the J was not identifiable on a phone): big heavy corner indices (rank >= 14px on the
   piles at 568x320) and solid suit-colour court panels with a face-colour monogram. */
.card .corner { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--h) * .25); line-height: .88; letter-spacing: -.04em; gap: .05em; }
.card .corner .rk { font: inherit; display: block; }
.card .corner .sg { width: .68em; height: .68em; }
.card .corner.ten .rk { letter-spacing: -.1em; transform: scaleX(.84); transform-origin: 50% 50%; margin: 0 -.08em; }
.card .tl { left: 6%; top: 4.5%; }
.card .br { right: 6%; bottom: 4.5%; }
.card .pip { top: 51%; font-size: calc(var(--h) * .27); }
.card .pip.ace { font-size: calc(var(--h) * .36); }
.card .court { inset: 19% 30% 19%; border: 0; box-shadow: inset 0 0 0 calc(var(--h) * .012) rgba(255, 255, 255, .5); background: currentColor;
  border-radius: calc(var(--h) * .045); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--h) * .012); opacity: 1; }
.card .court .orn { width: calc(var(--h) * .17); height: calc(var(--h) * .085); fill: var(--c-card-face, #fbf8f1); flex: none; }
.card .court b { font: 800 calc(var(--h) * .28)/.9 var(--font-display); color: var(--c-card-face, #fbf8f1); letter-spacing: 0; }
.card .court .sg.cs { width: calc(var(--h) * .11); height: calc(var(--h) * .11); fill: var(--c-card-face, #fbf8f1); }
.card .court .foot { color: var(--c-card-face, #fbf8f1); font-size: calc(var(--h) * .085); }
.card.small .tl .rk, .card.tiny .tl .rk { font: inherit; }
.card.large .corner, .card.medium .corner { font-size: max(14.5px, calc(var(--h) * .25)); }
/* v0.1.14: under the table's top ad strip the corner (timer / version / 18+) sits up beside the strip (the guard keeps
   it >= AD_ZONE_MIN_GAP_PX clear of the unit), so the left seat's portrait never covers the 18+ chip. */
html.ad-top-band:not(.dense-table) #corner-info { top: calc(8px - var(--st-t)); }
/* v0.1.14: with fixed-width labels a side seat's box (and its portrait column) can reach under a top seat's card pads
   at 568x320. Only the parts of a seat take taps: its cards (with their pads), portrait and name label. */
#ui-layer .seat, #ui-layer .seat-id, #ui-layer .seat .hand { pointer-events: none; }
#ui-layer .seat .avatar, #ui-layer .seat .name, #ui-layer .seat .card { pointer-events: auto; }
/* v0.2.3 (v0.2.2 regression WARN 7): the padded opponent hand box is itself a tap target. Its box is exactly the union of
   the card pads, so it covers nothing else; a point the browser's whole-pixel snapping drops from a ::before pad (932x430,
   far-right seat, 3 seats) now lands on the hand, and the tap handler gives it to the card under / nearest the point,
   instead of falling through to #room-bg (outside #ui-layer, so the tap was lost). */
#ui-layer .seat .hand.small.pad { pointer-events: auto; }

/* v0.1.14: top-centre seat under the top ad strip: name under the portrait, beside the hand (shorter seat, label clears the piles). */
html.ad-top-band .seat.top.mid { grid-template-areas: "av hand" "nm hand"; align-items: center; justify-items: center; }
/* v0.1.14: upright results sheet sits above its bottom ad (the stage keeps the ad's space), so the guard no longer
   has to switch that ad off for overlap. */
@media (orientation: portrait) {
  html[data-screen="results"] #modal { padding-bottom: calc(max(0px, var(--st-b) - var(--sab)) + clamp(0px, var(--st-b) - var(--sab), 10px)); } /* +10px: the guard's 24px clear space */
  html[data-screen="results"] #modal-box { border-radius: var(--r-xl); }
}
/* v0.1.15: on the shortest phones (height <= 320) the opening-peek prompt is narrower and a step smaller so it stays
   between the two side seats instead of covering their bottom card rows. */
@media (max-height: 320px) {
  #banner { max-width: min(calc(var(--play-w) * .34), 232px); width: max-content; font-size: 11px; line-height: 1.25; padding: 4px 10px; }
}
/* v0.1.15: J / Q / K (and every) corner index is at least 9px, also on the smallest opponent cards at 568x320. */
.card .corner { font-size: max(9px, calc(var(--h) * .25)); }
.card.large .corner, .card.medium .corner { font-size: max(14.5px, calc(var(--h) * .25)); }
.card .court .foot { font-size: max(9px, calc(var(--h) * .085)); }

/* v0.2.0 online tables: Google Meet step, the room's Meet button and the small Meet chip in the corner stack
   (top-left margin, outside the felt and every ad zone). */
#modal-box .meet-step { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--c-line, rgba(0,0,0,.15)); border-radius: 12px; }
#modal-box .meet-step .row { gap: 6px; flex-wrap: nowrap; }
#modal-box .meet-step #meet-url { flex: 1 1 auto; min-width: 0; }
#modal-box .meet-step #meet-start { flex: 0 0 auto; }
/* v0.2.7.2: Start Google Meet is a real <a> (iOS hands it to the Meet app with no blank tab); it looks like the buttons */
#modal-box a.meet-start { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12);
  background: var(--input); color: var(--text); font: 500 var(--fs-m)/1 var(--font); text-decoration: none; white-space: nowrap; }
#modal-box a.meet-start:focus-visible { outline: 2px solid rgba(212, 175, 95, .6); outline-offset: 1px; }
#modal-box.online-host a.meet-start { height: 44px; font-size: 16px; color: var(--c-ink); background: var(--c-surface-2); border: 1px solid var(--c-border-strong); }
#modal-box .meet-step #meet-paste { flex: 1 1 auto; white-space: nowrap; }
#modal-box .meet-step .meet-actions { flex-wrap: wrap; gap: 8px; }
#modal-box .meet-step.meet-back #meet-paste { box-shadow: 0 0 0 3px rgba(26, 115, 232, .55); }
#modal-box .meet-life { margin: 4px 0; }
#modal-box .meet-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; vertical-align: middle; background: #1a73e8; color: #fff; }
#modal-box .meet-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#corner-info .meet-chip { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; box-sizing: border-box; margin-top: 4px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; background: #1a73e8; color: #fff; pointer-events: auto; }
#modal-box.online-room .seat-list .x { margin-left: 6px; }
#modal-box .meet-google { color: var(--c-text-2, var(--muted)); margin-top: 4px; }
#modal-box .join-requests { margin: 6px 0; }
#modal-box .join-requests li button { margin-left: 6px; min-height: 32px; }

/* v0.2.4 sign-in sheet: one consent checkbox, Google (one tap) beside the two-step email (link + 6-digit code). Mobile
   landscape (932x430, 667x375): two columns, the whole sheet fits or scrolls inside the modal with the footer pinned. */
#modal-box.signin .lead { font-weight: 600; margin: 0 0 6px; }
#modal-box.signin .consent { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; margin: 2px 0 6px; cursor: pointer; }
#modal-box.signin .consent span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
#modal-box.signin .consent input { width: 30px; height: 30px; flex: 0 0 auto; margin: 0; }
#modal-box.signin .consent a { text-decoration: underline; display: inline-block; padding: 8px 2px; margin: 0; line-height: 1.2; }
#modal-box { scroll-padding-bottom: 72px; } /* every modal: scrolled-to controls and notes never end up under the pinned footer */
#modal-box.signin .terms-panel { max-height: 132px; overflow: auto; padding: 6px 10px; margin: 0 0 8px; border: 1px solid var(--c-border, rgba(255,255,255,.2)); border-radius: 10px; font-size: var(--fs-s, 13px); }
#modal-box.signin .terms-panel.hidden { display: none; }
#modal-box.signin .terms-panel ul { margin: 0; padding-left: 18px; }
#modal-box.signin .signin-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
#modal-box.signin .signin-col.hidden { display: none; }
#modal-box.signin .signin-col .row { flex-wrap: nowrap; gap: 6px; margin: 0 0 6px; }
#modal-box.signin .signin-col input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
#modal-box.signin .signin-col button { flex: 0 0 auto; min-height: 44px; }
#modal-box.signin .google-btn { width: 100%; min-height: 44px; }
#modal-box.signin button:disabled { opacity: .5; cursor: not-allowed; }
#modal-box.signin #signin-code { letter-spacing: .2em; font-variant-numeric: tabular-nums; }
@media (orientation: landscape) and (min-width: 600px) {
  #modal-box.signin .signin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
}
@media (orientation: landscape) and (max-height: 440px) {
  #modal-box.signin h2 { margin-bottom: 2px; }
  #modal-box.signin .lead, #modal-box.signin .note { margin-bottom: 2px; }
  #modal-box.signin .consent { min-height: 40px; margin: 0 0 4px; }
  #modal-box.signin .signin-col .row { margin-bottom: 4px; }
  #modal-box.signin .signin-col p { margin: 0 0 4px; }
  #modal-box.signin .terms-panel { max-height: 96px; }
}

/* v0.1.16 game clock: the corner clock is hidden until 5:00 left (keeps its slot so the corner never shifts);
   a large '15' / '10' flashes centred over the felt for 3 s. pointer-events none: it never blocks a tap. */
.timer.clock-off { visibility: hidden; }
#time-flash { position: absolute; left: var(--play-cx); top: 47%; transform: translate(-50%, -50%); z-index: 25;
  pointer-events: none !important; user-select: none; font: 800 calc(22 * var(--u))/1 var(--font-display, var(--font));
  font-variant-numeric: tabular-nums; color: #fff; -webkit-text-stroke: calc(.5 * var(--u)) #111;
  text-shadow: 0 0 calc(2 * var(--u)) rgba(0, 0, 0, .9), 0 calc(.8 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .75);
  padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(10, 12, 14, .82); box-shadow: 0 0 0 calc(.4 * var(--u)) rgba(255, 255, 255, .85); }
#time-flash.hidden { display: none; }
#time-flash.show { animation: time-flash 3s ease both; }
@keyframes time-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 10%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { #time-flash.show { animation: none; } }

/* v0.2.5 Online tables (signed-in host screen, guest name step, waiting screen, table room): readable first.
   Body 16px, helper 14px, headline 22px, nothing under 14px; solid surface + ink tokens (WCAG AA in both themes);
   44px tap targets. Two columns in landscape keep 'Create family table' on screen without scrolling. */
#modal-box.online-host { background: var(--c-surface); color: var(--c-ink); font-size: 16px; line-height: 1.4; width: min(100%, 780px); --mpy: 14px; --mpx: 18px; }
#modal-box.online-host h2 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; font-weight: 700; color: var(--c-ink); }
#modal-box.online-host h3 { font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--c-ink); margin: 0 0 4px; }
#modal-box.online-host p, #modal-box.online-host li, #modal-box.online-host label { font-size: 16px; }
#modal-box.online-host p { margin: 0 0 8px; }
#modal-box.online-host .helper, #modal-box.online-host .small, #modal-box.online-host .note, #modal-box.online-host .meet-step p { font-size: 14px; line-height: 1.4; color: var(--c-text-2); }
#modal-box.online-host .note { color: var(--c-ink); background: var(--c-surface-2); border-left-color: var(--c-accent); }
#modal-box.online-host .reg-err { color: var(--c-danger); font-size: 14px; }
#modal-box.online-host a { color: var(--c-accent); }
#modal-box.online-host section { background: var(--c-surface-2); border: 1px solid var(--c-border); padding: 10px 12px; gap: 6px; }
#modal-box.online-host button, #modal-box.online-host input { height: 44px; font-size: 16px; color: var(--c-ink); background: var(--c-surface-2); border: 1px solid var(--c-border-strong); }
#modal-box.online-host button.primary { background: var(--c-accent); color: var(--c-on-accent); border-color: transparent; font-weight: 700; }
#modal-box.online-host button.secondary { background: transparent; color: var(--c-ink); border: 2px solid var(--c-accent); font-weight: 600; }
#modal-box.online-host button.ghost { background: transparent; border-color: transparent; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
#modal-box.online-host button.danger { background: var(--c-danger-fill); color: var(--c-on-danger); border-color: transparent; }
#modal-box.online-host button.x { height: 32px; min-width: 32px; padding: 0 8px; font-size: 14px; }
#modal-box.online-host .meet-btn { font-size: 14px; }
#modal-box.online-host input::placeholder { color: var(--c-text-3); opacity: 1; }
#modal-box.online-host .code { font-family: var(--font-num, inherit); letter-spacing: .08em; }
#modal-box.online-host .modal-foot { background: var(--c-surface); }
#modal-box .host-grid { display: grid; grid-template-columns: 1fr; gap: 10px 18px; align-items: start; }
#modal-box .host-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#modal-box .host-col > * { margin: 0; }
#modal-box .steps { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 4px; }
#modal-box .steps li { padding-left: 2px; }
#modal-box .steps li::marker { font-weight: 700; color: var(--c-accent); }
#modal-box.online-host button.big { height: 56px; font-size: 18px; width: 100%; border-radius: 999px; }
#modal-box.online-host .host-actions > button.secondary { width: 100%; }
#modal-box .name-label { font-weight: 600; margin-top: 4px; }
#modal-box .name-row, #modal-box .code-row, #modal-box .invite-row { flex-wrap: nowrap; gap: 8px; }
#modal-box .name-row input, #modal-box .code-row input, #modal-box .invite-row input { flex: 1 1 auto; min-width: 0; }
#modal-box .name-row button, #modal-box .code-row button, #modal-box .invite-row button { flex: 0 0 auto; }
#modal-box .code-row.hidden { display: none; }
#modal-box .account-links { gap: 4px 12px; flex-wrap: wrap; }
#modal-box .account-links button { padding: 0 6px; }
#modal-box .waiting { font-size: 16px; font-weight: 600; padding: 10px 12px; border-radius: 12px; border: 2px dashed var(--c-border-strong); background: var(--c-surface-2); color: var(--c-ink); }
#modal-box.online-host .req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#modal-box.online-host .req-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#modal-box.online-host .req-list .who { flex: 1 1 120px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
#modal-box.online-host .join-requests { border: 2px solid var(--c-accent); }
#modal-box.online-host .seat-list li { font-size: 16px; background: var(--c-surface-2); color: var(--c-ink); }
#modal-box .invite-full { display: block; width: 100%; box-sizing: border-box; min-height: 2.4em; margin: 4px 0; padding: 8px 10px; border-radius: 10px; resize: none; field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; text-overflow: clip; overflow: auto; }
#modal-box #online-share.is-copied { background: #1f8a70; color: #fff; border-color: transparent; }
#modal-box .room-menu { margin: 4px 0 8px; }
#modal-box .room-menu.hidden { display: none; }
#modal-box #room-more { width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto; }
#modal-box .voice-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#modal-box .voice-toggle-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
#modal-box.create-table .style-pick { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-height: 420px) {
  #modal-box.host-room, #modal-box.create-table { --mpy: 4px; --mpx: 8px; }
  #modal-box.host-room h2, #modal-box.create-table h2 { font-size: 22px; margin: 0; }
  #modal-box.host-room h3, #modal-box.create-table h3 { margin: 0; font-size: 14px; }
  #modal-box.host-room section, #modal-box.create-table section { padding: 4px 6px; gap: 2px; }
  #modal-box.host-room #share-hint,
  #modal-box.host-room #meet-life,
  #modal-box.host-room #voice-help,
  #modal-box.host-room #meet-how,
  #modal-box.host-room #style-help,
  #modal-box.host-room .host-code { display: none; }
  #modal-box.host-room button.big, #modal-box.create-table button.big, #modal-box #online-deal, #modal-box #online-create-go { height: 44px; }
  #modal-box.host-room .invite-full { min-height: 0; max-height: 2.4em; margin: 2px 0; padding: 4px 8px; }
  #modal-box.host-room .modal-foot, #modal-box.create-table .modal-foot { position: sticky; bottom: 0; background: var(--c-surface); z-index: 2; margin: 0; padding-top: 4px; }
  #modal-box.host-room { scroll-padding-top: 52px; }
  #modal-box.host-room #online-share { position: sticky; top: 0; z-index: 3; }
}
#modal-box.online-host .invite-row { flex-wrap: wrap; }
#modal-box.online-host .invite-row input { flex-basis: 100%; }
/* v0.2.5 host room: header, 'Waiting at the door' cards, numbered steps, Step 3 pinned in the footer. */
#modal-box.host-room .host-head { margin: 0 0 8px; display: flex; align-items: flex-start; gap: 10px; }
#modal-box.host-room .host-title { flex: 1 1 auto; min-width: 0; }
#modal-box.host-room .host-head .back-btn, #modal-box.host-room #online-back { flex: 0 0 auto; width: auto; min-width: 44px; height: 44px; padding: 0 14px; white-space: nowrap; }
@media (max-height: 360px) {
  .home-hero .hero-fan, .home-hero .tagline { display: none; }
  .hero-copy { padding-top: 8px; gap: 4px; }
  .home-cta .btn, .home-cta #home-play, .home-cta #home-signin { min-height: 40px; font-size: 15px; }
  #modal-box.host-room { padding-top: 6px; }
  #modal-box.host-room .host-head { margin: 0 0 2px; }
  #modal-box.host-room .host-head h2 { font-size: 22px; line-height: 22px; max-height: 22px; overflow: hidden; white-space: nowrap; }
  #modal-box.host-room #online-back { height: 36px; min-width: 36px; padding: 0 8px; }
  #modal-box.host-room .modal-foot, #modal-box.create-table .modal-foot, #modal-box.guest-name .modal-foot { position: static; }
  #modal-box.create-table > p.small, #modal-box.host-room #online-play-off, #modal-box.host-room #share-hint { display: none; }
  #modal-box.create-table #create-style { margin: 0; }
  #modal-box.guest-name #guest-join-code { margin: 0 0 4px; }
}
#modal-box.host-room #room-more { flex: 0 0 auto; }
#modal-box.host-room .voice-people, .voice-people { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#modal-box.host-room .voice-people li, .voice-people li { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; }
#modal-box.host-room .voice-people li > span, .voice-people li > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-box.host-room .voice-people button, .voice-people button { flex: 0 0 auto; min-height: 44px; height: 44px; }
#modal-box.host-room #room-menu button { min-height: 44px; }
#modal-box.host-room .host-head h2 { margin: 0 0 2px; }
#modal-box.host-room .host-code { margin: 0; font-size: 16px; color: var(--c-text-2); display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
#modal-box.host-room .host-code .code { font-size: 18px; font-weight: 700; color: var(--c-ink); }
#modal-box.host-room section { border-radius: 12px; display: flex; flex-direction: column; }
#modal-box.host-room section > * { margin: 0; }
#modal-box.host-room .door { border: 2px solid var(--c-accent); border-left-width: 6px; }
#modal-box.host-room .req-list { gap: 8px; }
#modal-box.host-room .req-list li.req-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--c-surface); border: 1px solid var(--c-border); }
#modal-box.host-room .req-list .req-h { margin: 0; font-weight: 700; min-width: 0; width: 100%; }
#modal-box.host-room .req-line { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
#modal-box.host-room .req-bell, #modal-box.host-room .req-rest { flex: 0 0 auto; }
#modal-box.host-room .req-bell { margin-right: .3em; }
#modal-box.host-room .req-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; -webkit-touch-callout: none; user-select: none; }
#modal-box.host-room .req-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#modal-box.host-room .req-list .req-btns button { margin: 0; min-height: 44px; width: 100%; min-width: 0; }
#modal-box.host-room .seat-count { font-weight: 600; color: var(--c-text-2); margin-left: 4px; }
#modal-box.host-room .voice { display: flex; flex-direction: column; gap: 6px; }
#modal-box.host-room .voice-toggle { align-self: flex-start; padding: 0 4px; }
#modal-box.host-room .voice .meet-step { margin: 0; }
#modal-box.host-room .close-row { justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#modal-box.host-room .close-row .close-q { margin: 0; flex-basis: 100%; font-weight: 600; }
#modal-box.host-room button.small-btn { height: 44px; font-size: 14px; padding: 0 12px; }
#modal-box.host-room .host-foot { flex-wrap: nowrap; align-items: center; gap: 10px; justify-content: space-between; }
#modal-box.host-room .host-foot .step3 { flex: 1 1 auto; min-width: 0; order: 1; }
#modal-box.host-room .host-foot #online-start { order: 2; flex: 0 0 auto; }
#modal-box.host-room .host-foot h3, #modal-box.host-room .host-foot p { margin: 0; }
#modal-box.host-room .room-grid { display: flex; flex-direction: column; gap: 10px; }
#modal-box.host-room .room-grid .host-col { display: contents; }
#modal-box.host-room .door { order: 1; } #modal-box.host-room .invite-box { order: 2; }
#modal-box.host-room .seats-box { order: 3; } #modal-box.host-room .voice { order: 4; } #modal-box.host-room .room-grid > .host-col > .note { order: 5; } #modal-box.host-room .close-row { order: 6; }
@media (orientation: landscape) and (min-width: 560px) {
  #modal-box.host-room .room-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; align-items: start; }
  #modal-box.host-room .room-grid .host-col { display: flex; flex-direction: column; gap: 10px; }
}
@media (orientation: landscape) and (max-height: 440px) {
  #modal-box.host-room .room-grid, #modal-box.host-room .room-grid .host-col { gap: 8px; }
  #modal-box.host-room .host-head { margin: 0; }
  #modal-box.host-room .req-list li.req-card { padding: 4px 8px; gap: 4px; }
  #modal-box.host-room section { padding: 6px 10px; gap: 4px; }
  #modal-box.host-room .host-head { margin-bottom: 6px; }
  #modal-box.host-room .host-foot { padding-top: 4px; margin-top: 4px; }
  /* someone at the door comes first on a short landscape screen: Step 3 follows the content instead of covering it */
  #modal-box.host-room.has-door .row.end.host-foot { position: static; }
}
@media (orientation: portrait), (max-width: 559px) {
  #modal-box.host-room .host-foot { flex-wrap: wrap; }
  #modal-box.host-room .host-foot .step3 { flex-basis: 100%; order: 0; }
  #modal-box.host-room .host-foot #online-start { order: 2; flex: 1 1 auto; }
}
@media (orientation: landscape) and (min-width: 560px) {
  #modal-box .host-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  #modal-box.online-host .invite-row { flex-wrap: nowrap; }
  #modal-box.online-host .invite-row input { flex-basis: auto; }
}
@media (orientation: landscape) and (max-height: 440px) {
  #modal-box.online-host { --mpy: 10px; --mpx: 14px; }
  #modal-box.online-host h2 { margin-bottom: 4px; }
  #modal-box .host-col { gap: 6px; }
  #modal-box .steps { gap: 2px; }
  #modal-box.online-host section { padding: 8px 10px; }
  #modal-box.online-host button.big { height: 48px; }
}

/* ---------- v0.2.5.3 hotfix: mobile / tablet fit (UI only) ---------- */
/* v0.2.5.3 iOS no-zoom floor: iOS Safari zooms the page in when a field under 16px gets focus ("do not magnify the data
   entry fields"). Every text field, select and textarea is 16px at every breakpoint (no app field was larger, the
   short-screen rules above set 13px via --fs-m / the font shorthand, hence !important). Zoom stays allowed: the
   viewport meta keeps user scaling, there is no maximum-scale. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
/* the dynamic viewport: 100dvh follows the browser bars / keyboard on iOS and Android; 100vh above stays the fallback */
@supports (height: 100dvh) {
  :root { --stage-h: calc(100dvh - var(--st-t) - var(--st-b)); }
}
/* Portrait setup sheets: a short sheet (Pass & Play, sign-in, join, waiting) no longer hangs off the bottom under a tall
   empty band below the top ad. It floats centred in the stage left by the ads (rounded all round, 12px side margins);
   a tall sheet still fills the stage and scrolls. Ads stay in their own layer and never overlap it. */
@media (orientation: portrait) {
  #modal { align-items: center; padding: calc(var(--st-t) + 8px) calc(var(--st-r) + 12px) calc(var(--st-b) + 8px) calc(var(--st-l) + 12px); }
  #modal-box { border-radius: var(--r-xl); border-bottom: 1px solid var(--panel-line); padding-bottom: var(--mpy); }
  #modal-box::before { display: none; } /* no drag handle: the sheet is not draggable and no longer docked to the edge */
  /* the results sheet keeps its v0.1.14 place: full width, docked above its own results ad (it is tall, so no band) */
  html[data-screen="results"] #modal { align-items: flex-end; padding-left: 0; padding-right: 0; }
}
/* Pass & Play footer on a phone: Back / Start get their own row instead of squeezing "Start" to "Star" */
#modal-box .pp-foot #pp-add, #modal-box .pp-foot #pp-cancel, #modal-box .pp-foot #pp-start { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 479px) {
  #modal-box .pp-foot { flex-wrap: wrap; }
  #modal-box .pp-foot .spacer { display: none; }
  #modal-box .pp-foot #pp-cancel, #modal-box .pp-foot #pp-start { flex: 1 1 calc(50% - 4px); }
}

/* v0.2.6.2 online table (ONLINE_PLAY only): Snap, the host's round controls, and a clear "your turn" frame on the grid */
.act.danger:not(:disabled) { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger); }
.act.snap:not(:disabled) { border-color: var(--c-selected); color: var(--c-ink); font-weight: 700; }
html.online-my-turn #my-hand { border-radius: 14px; box-shadow: 0 0 0 2px var(--c-selected), 0 0 18px color-mix(in srgb, var(--c-selected) 45%, transparent); }
html.online-my-turn #banner.mine { font-weight: 700; }
#modal-box.online-menu .col { display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------------ v0.2.6.3 server clock, reconnect, handover, Snap mode */
/* the turn countdown sits in the corner under the game timer, in the same style, a size smaller */
.timer.turn { font-size: 12px; padding: 1px 7px; }
.timer.turn.clock-off { display: none; }
/* 'Reconnecting…' and the host handover notice: one pill at the top centre of the felt (no taps; never over a button) */
/* the pills sit where the turn banner is (Reconnecting… stands in for it; a notice sits just above it), clear of every card */
.table-pill { position: absolute; left: var(--play-cx, 50%); bottom: calc(22px + var(--hand-rows, 1) * var(--hand-card-h) + (var(--hand-rows, 1) - 1) * 8px); transform: translateX(-50%); z-index: 40; pointer-events: none;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(calc(var(--play-w, 100vw) * .8), 460px); padding: 6px 14px; border-radius: var(--r-pill, 999px);
  background: var(--c-ink, #1E2A2C); color: var(--c-bg, #fff); font: 600 14px/1.3 var(--font-ui, sans-serif); box-shadow: var(--sh-2, 0 2px 8px rgba(0,0,0,.3)); text-align: center; }
.table-pill.hidden { display: none; }
.table-pill.notice { margin-bottom: 0; background: var(--c-selected, #F2C14E); color: #1E2A2C; }
.table-pill .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pill-spin .9s linear infinite; flex: none; }
html.reconnecting #banner, html.table-notice #banner { visibility: hidden; }
html.reconnecting .table-pill.notice { margin-bottom: 40px; }
@keyframes pill-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .table-pill .spin { animation: none; } }
/* Snap mode is obvious: the Snap button lit up, and a 16px hint line in the banner */
#btn-snap.armed { background: var(--c-selected, #F2C14E); color: #1E2A2C; box-shadow: 0 0 0 3px #fff, 0 0 14px 4px var(--c-selected, #F2C14E); font-weight: 800; }
#discard-pile.snap-window .snap-ring { position: absolute; inset: -7px; border-radius: 16px; border: 3px solid #F2C14E; pointer-events: none; box-shadow: 0 0 0 4px rgba(242, 193, 78, .35); animation: snap-ring 1.1s ease-in-out infinite; }
/* The digit is a sibling of the ring. An opacity animation on a parent keeps the first painted digit on some phones. */
#discard-pile .snap-count { position: absolute; z-index: 3; top: -16px; left: 50%; transform: translateX(-50%); min-width: 22px; padding: 2px 5px; border-radius: 999px; background: #F2C14E; color: #1E2A2C; font: 800 13px/1.2 var(--font-ui, sans-serif); text-align: center; }
@keyframes snap-ring { from { opacity: 1; } to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { #discard-pile.snap-window .snap-ring { animation: none; } }
#banner.snap-mode { box-shadow: 0 0 0 3px var(--c-selected, #F2C14E), var(--sh-2, 0 2px 8px rgba(0,0,0,.3)); max-width: min(calc(var(--play-w, 100vw) * .62), 460px); }
#banner .snap-hint, #ui-layer > #banner.snap-mode .snap-hint { font-size: 16px !important; line-height: 1.3; font-weight: 600; }
/* a seat that is away (left the table or lost its connection) is played automatically */
.seat.away .avatar { opacity: .55; filter: grayscale(.6); }
.away-badge { display: inline-block; margin-left: 4px; padding: 2px 5px; border-radius: var(--r-pill, 999px); background: rgba(0, 0, 0, .55); color: #fff;
  font: 700 9px/1 var(--font-ui, sans-serif); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
/* upright phone at an online table: the rotate prompt repeats the table's status (Reconnecting… / a notice) */
#rotate-overlay .rotate-status { margin: var(--sp-3, 12px) 0 0; padding: 6px 14px; border-radius: var(--r-pill, 999px); background: var(--c-ink, #1E2A2C); color: var(--c-bg, #fff); font: 600 15px/1.35 var(--font-ui, sans-serif); white-space: pre-line; }
#rotate-overlay .rotate-status.hidden { display: none; }

/* ------------------------------------------------------------------ v0.2.6.3.2 one status line + gentle glow */
/* No instruction box: #banner is ONE small status line (whose turn, Snap mode on, Too late, round over), 15px, never
   wrapping, out of the cards' way (fitBanner still lifts / narrows it). Reconnecting and the host handover keep the
   .table-pill at the same place. */
#banner, #ui-layer > #banner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px !important; line-height: 1.3 !important;
  padding: 3px 12px; max-width: min(calc(var(--play-w, 100vw) * .8), 460px); border-radius: var(--r-pill, 999px); }
#ui-layer > #banner[style*="font-size: 14px"] { font-size: 14px !important; }
#banner.snap-mode .snap-hint { white-space: nowrap; }
#banner .pp-done { min-height: 30px; padding: 3px 10px; margin-left: 6px; font-size: 14px; vertical-align: middle; border-radius: var(--r-pill, 999px); }
/* Pass & Play hold: one line; the text gives way (ellipsis), the Done button never leaves the pill (it stays tappable) */
#banner.pp-hold { display: flex; align-items: center; gap: 6px; text-overflow: clip; }
#banner.pp-hold .st-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#banner.pp-hold .pp-done { flex: none; margin-left: 0; }
#banner.late { box-shadow: 0 0 0 2px var(--c-danger, #c0392b), var(--sh-2, 0 2px 8px rgba(0,0,0,.3)); }
@media (max-height: 320px) { #banner, #ui-layer > #banner { padding: 2px 10px; } } /* v0.2.7.0: 15px here too (was 14px at 568x320) */
/* The cards, piles and buttons you can use right now glow gently; nothing else does. */
@keyframes legal-glow {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(242, 193, 78, .85), 0 0 3px 0 rgba(242, 193, 78, .25); }
  50% { box-shadow: 0 0 0 2px rgba(242, 193, 78, 1), 0 0 12px 3px rgba(242, 193, 78, .55); }
}
/* cards: the pulse is on a ring above the card (animating the card itself would change how the hand is laid out) */
.card.selectable::after, .pile.selectable .card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 3;
  animation: legal-glow 1.8s ease-in-out infinite; }
.act.legal, #banner .pp-done.legal { animation: legal-glow 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .card.selectable::after, .pile.selectable .card::after, .act.legal, #banner .pp-done.legal { animation: none; box-shadow: 0 0 0 2px rgba(242, 193, 78, 1), 0 0 8px 2px rgba(242, 193, 78, .45); }
}
/* v0.2.6.3.2 the How to play clip: over everything (also the Pass & Play cover), Skip / Close always visible */
.howto-home { margin: 12px 0 0; max-width: 420px; }
.howto-watch { margin: 0; }
.howto-facade { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #0d1b2a; cursor: pointer; }
.howto-facade img, .howto-watch video { display: block; width: 100%; height: auto; aspect-ratio: 844 / 390; border-radius: 14px; }
.howto-facade .lbl { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-weight: 600; }
.howto-facade .play-ic { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #f2c14e; font-size: 24px; }
.howto-rules { display: inline-block; margin: 10px 0 0; padding: 0; border: 0; background: none; color: var(--accent, #d4af5f); font: 600 15px/1.3 var(--font-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.howto-clip { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(10, 16, 18, .82);
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.howto-clip .clip-box { display: flex; flex-direction: column; gap: 6px; width: min(100%, calc((100dvh - 64px) * 844 / 450), 900px); }
.howto-clip video { width: 100%; aspect-ratio: 844 / 450; background: #000; border-radius: 12px; display: block; }
.howto-clip .clip-bar { display: flex; align-items: center; gap: 8px; }
.howto-clip .clip-title { color: #fff; font: 600 15px/1.2 var(--font-ui, sans-serif); }
.howto-clip .spacer { flex: 1; }
.howto-clip button { min-height: 36px; padding: 4px 16px; }

/* v0.2.7.0 B7: 320 and 375 px phones, keyboard open or closed.
   Sign-in: the email row could not shrink below its field's intrinsic width, so at 320 the column (and the Google and
   Send buttons) stuck out of the sheet; the column now shrinks and the row wraps on very narrow sheets.
   Rules: the select columns took their option text's width (sideways scroll at 320/360), and a portrait phone with the
   keyboard up (under 420 px tall) got the 8-column landscape grid (sideways scroll at 375); portrait keeps 2 columns. */
#modal-box.signin .signin-grid { grid-template-columns: minmax(0, 1fr); }
#modal-box.signin .signin-col { min-width: 0; }
#modal-box.signin .google-btn { max-width: 100%; white-space: normal; }
@media (max-width: 340px) {
  #modal-box.signin .signin-col .row { flex-wrap: wrap; }
  #modal-box.signin .signin-col .row input { flex: 1 1 100%; }
  #modal-box.signin .signin-col .row button { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  #modal-box.rules .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal-box.rules .rules-grid > *, #modal-box.rules .rules-grid .num { min-width: 0; }
  #modal-box.rules .num select, #modal-box.rules .num input { min-width: 0; max-width: 100%; width: 100%; }
  #modal-box.rules .num .l-long, #modal-box.rules .num .l-short { white-space: normal; overflow-wrap: anywhere; }
  #modal-box.rules .peek-row .chips { flex-wrap: wrap; }
}

/* v0.2.7.3 floating voice bubble (js/voice-bubble.js): 44 px round 🎙 (32 px while opponents' cards are tappable), a label
   pill beside it when there is room, a × with a 32 px tap area; above the modal (z 50), under the rotate overlay (100). */
.voice-bubble { position: fixed; z-index: 60; display: flex; align-items: center; height: 44px; touch-action: none; user-select: none; -webkit-user-select: none; }
.voice-bubble.hidden, .voice-bubble.vb-parked { display: none !important; }
.voice-bubble.vb-right { flex-direction: row-reverse; }
.voice-bubble .vb-main { display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 44px; box-sizing: border-box; padding: 0; border-radius: 999px;
  background: #1a73e8; color: #fff; text-decoration: none; font: 700 12px/1 system-ui, sans-serif; box-shadow: 0 2px 10px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .25); cursor: pointer; touch-action: none; }
.voice-bubble .vb-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; font-size: 20px; }
.voice-bubble .vb-label { padding-right: 14px; white-space: nowrap; }
.voice-bubble.vb-right .vb-main { flex-direction: row-reverse; }
.voice-bubble.vb-right .vb-label { padding: 0 0 0 14px; }
.voice-bubble.vb-nolabel .vb-label { display: none; }
.voice-bubble.vb-dim .vb-main { background: #3c4148; color: #d6d9dd; box-shadow: 0 2px 8px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .12); }
.voice-bubble[data-state="back"] .vb-main { background: #188038; }
.voice-bubble .vb-x { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.voice-bubble .vb-x span { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 7px; border-radius: 50%; background: #202124; color: #fff; font: 700 13px/1 system-ui, sans-serif; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.voice-bubble.vb-right .vb-x { right: auto; left: -10px; }
.voice-bubble.vb-small, .voice-bubble.vb-small .vb-main, .voice-bubble.vb-small .vb-ic { height: 32px; min-width: 32px; }
.voice-bubble.vb-small .vb-ic { width: 32px; font-size: 15px; }
.voice-bubble.vb-small .vb-x { top: -12px; right: -14px; }
.voice-bubble.vb-small.vb-right .vb-x { left: -14px; }
.voice-bubble.vb-drag { opacity: .9; }
.voice-bubble.vb-drag .vb-main { cursor: grabbing; }
/* the voice sheet (host Start voice from the table / results): the existing voice box as a sheet */
#voice-sheet { position: fixed; z-index: 61; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(440px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; box-sizing: border-box;
  padding: 12px 14px; border-radius: 14px; background: rgba(20, 23, 26, .96); color: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .55); }
#voice-sheet.hidden { display: none; }
#voice-sheet h3 { margin: 0 0 6px; font-size: 14px; }
#voice-sheet .vs-close { position: absolute; top: 4px; right: 4px; min-width: 32px; min-height: 32px; }
.voice-help { font-size: 12px; color: var(--muted, #b9bec4); }
#home-return { order: -1; }
#game-moved { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(6, 8, 9, .92); color: #fff; text-align: center; padding: 16px; }
#game-moved.hidden { display: none; }

/* v0.2.7.4 (review R3): the online wait shows a small spinner; "Still connecting…" + Try again after 3 s, offline after 8 s */
.busy-spin { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busyspin .8s linear infinite; }
@keyframes busyspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation-duration: 2.4s; } }