/* Live games: Games hub, Wheel, Moon, Chess.
 * Built on style.css tokens (felt, gold, rarity colours, Casino Sans).
 * Game pages fit the stage the shell gives them (--stage-h, the app height
 * minus the top bar) so the main loop never scrolls in the compact sheet. */

/* The redesign's shell (REDESIGN_SHELL) gives tab pages a taller app bar; a game keeps today's, so its
   play area never shrinks (wide.css's landscape bar wins over this one). */
:root[data-flags~="redesign_shell"]:has(.shell.chrome-game) { --bar-h: 44px; }

.g-host { display: block; }
.g-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; animation: enter 140ms var(--ease-out) both; }
.g-page > * { min-width: 0; }

.g-status { min-height: 28px; padding: 4px 11px; font-size: 11.5px; gap: 6px; font-variant-numeric: tabular-nums; }
.g-status.live { background: rgb(98 206 122 / 0.16); color: var(--ready); }
.g-status.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: g-blink 1.2s ease-in-out infinite; }
.g-status.hot { background: var(--gold-soft); color: var(--gold); }
.g-status.bad { background: rgb(255 122 107 / 0.14); color: var(--danger); }
@keyframes g-blink { 50% { opacity: 0.35; } }

.g-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 2px -4px; }
.g-section-head h2 { margin: 0; font: 700 11.5px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.g-section-head span { font: 700 12px/1 var(--display); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.g-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.g-note.center { text-align: center; }
.g-fair { margin: 4px 4px 0; color: var(--faint); font-size: 11px; line-height: 1.4; word-break: break-all; user-select: text; -webkit-user-select: text; }

/* ---------- Plates ---------- */
.g-plate { border-radius: 10px; }
.g-plate .plate-name { font-size: clamp(11px, 3.6vw, 17px); }
.g-plate-label {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font: 700 9px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 999px; color: var(--gold); background: rgb(0 0 0 / 0.55);
}

/* ---------- Buttons ---------- */
.btn:disabled { opacity: 0.45; cursor: default; transform: translateZ(0); }
.btn.busy { filter: saturate(0.6) brightness(0.9); pointer-events: none; }
.btn.big { min-height: 52px; font-size: 16.5px; border-radius: 14px; }
.btn.good { color: #062010; background: linear-gradient(180deg, #8ff0a2, var(--ready) 55%, #3fae5e); box-shadow: 0 8px 22px rgb(98 206 122 / 0.28); }

.g-chip-btn {
  appearance: none; border: 1px solid var(--line); border-radius: 12px;
  min-height: 44px; min-width: 44px; padding: 0 6px;
  background: rgb(255 255 255 / 0.05); color: var(--text);
  font: 700 13.5px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: pointer; transition: transform 120ms var(--ease-out), background-color 140ms ease-out, border-color 140ms ease-out;
}
.g-chip-btn:active { transform: scale(0.96) translateZ(0); }
.g-chip-btn[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.g-chip-btn:disabled { opacity: 0.4; cursor: default; }

/* ---------- Casino chips ---------- */
.g-chip {
  --c: #2f63b6;
  position: relative; flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, #f7e2a4 0deg 13deg, var(--c) 13deg 45deg);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.45), 0 5px 12px rgb(0 0 0 / 0.35), inset 0 0 0 1.5px rgb(0 0 0 / 0.28);
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease-out, filter 160ms ease-out;
}
.g-chip::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--c) 62%, #fff), var(--c) 72%);
  box-shadow: inset 0 0 0 1.5px rgb(255 238 190 / 0.8), inset 0 0 0 3.5px rgb(0 0 0 / 0.16);
}
.g-chip-v { position: relative; font: 700 11px/1 var(--display); color: #fff; text-shadow: 0 1px 0 rgb(0 0 0 / 0.55); letter-spacing: -0.02em; white-space: nowrap; }
.g-chip.blue { --c: #2f63b6; }
.g-chip.purple { --c: #7a3fb0; }
.g-chip.gold { --c: #c9962e; }
.g-chip.gold .g-chip-v { color: #2a1d05; text-shadow: 0 1px 0 rgb(255 240 200 / 0.4); }
.g-chip.red { --c: #b8363f; }
.g-chip.green { --c: #2e8a52; }
.g-chip.black { --c: #2b2b31; }
.g-chip.felt { --c: #1d4a3c; }
.g-chip.sm { width: 34px; height: 34px; }
.g-chip.sm::before { inset: 4px; }
.g-chip.xs { width: 22px; height: 22px; box-shadow: 0 1.5px 0 rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(0 0 0 / 0.3); }
.g-chip.xs::before { inset: 3px; box-shadow: inset 0 0 0 1px rgb(255 238 190 / 0.7); }
/* A chip set down on its spot: it drops in, lands with a small squash and settles (each step eases out). */
.g-chip.drop { animation: g-drop 340ms var(--ease-out) backwards; }
@keyframes g-drop {
  0% { transform: translateY(-22px) scale(1.18); opacity: 0; }
  55% { transform: translateY(1px) scale(1.04, 0.94); opacity: 1; }
  80% { transform: translateY(-1px) scale(0.99, 1.02); }
  100% { transform: none; opacity: 1; }
}

/* ---------- Game stage (wheel, moon) ---------- */
.g-game {
  display: flex; flex-direction: column; gap: 8px;
  height: var(--stage-fit-h, calc(var(--app-h, 100dvh) - var(--bar-h, 44px) - 24px));
  min-height: 300px; overflow: hidden;
  animation: enter 140ms var(--ease-out) both;
}
.g-strip { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.g-strip-status { min-width: 0; font: 700 12px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.g-strip-status.good { color: var(--ready); }
.g-strip-status.gold { color: var(--gold); }
.g-strip-note { font: 700 11px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.g-people {
  appearance: none; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; min-width: 56px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgb(255 255 255 / 0.05); color: var(--text);
  font: 700 13px/1 var(--display); font-variant-numeric: tabular-nums;
}
.g-people:active { transform: scale(0.96) translateZ(0); }
/* The same pill over a casino table's stage (Slots, Blackjack, Roulette): top right, on a dark glass. */
.g-people.g-people-float {
  position: absolute; top: 8px; right: 8px; z-index: 7;
  background: rgb(4 10 8 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
}
/* Slots: the pill, the 💬 docked beside it and the watchers pill stand in the nameplate strip (10cqw tall) at its
 * right end, off the play area, so the reels keep its height. 30 px to look at, about 44 to a finger. */
:is(.s-machine, .k-machine) > .g-people-float { top: max(2px, calc(5cqw - 15px)); right: 6px; min-height: 30px; min-width: 48px; padding: 0 11px; font-size: 12px; }
:is(.s-machine, .k-machine) > :is(.g-people-float, .tc-btn.docked, .s-saved)::after { content: ""; position: absolute; inset: -7px -3px; }
:is(.s-machine, .k-machine) > .tc-btn .icon { width: 16px; height: 16px; }
/* Blackjack: the pill shares the felt's top strip with the shoe (tables.css). Roulette: the pill ends
 * the felt's top strip, never over a number; compact sheets have no strip, so it sits top left over
 * the tall zero cell (its label stays clear). */
.rl-stage > .g-people-float { top: 3px; right: 8px; min-height: 28px; min-width: 0; padding: 0 9px; font-size: 12px; }
html.compact .rl-stage > .g-people-float { top: 8px; left: 5px; right: auto; min-height: 44px; min-width: 44px; padding: 0 6px; }
.g-you { color: var(--gold); background: var(--gold-soft); }
.g-history { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.g-history::-webkit-scrollbar { display: none; }
.g-pill { flex: none; padding: 6px 9px; border-radius: 999px; font: 700 11.5px/1 var(--display); font-variant-numeric: tabular-nums; background: rgb(255 255 255 / 0.06); color: var(--muted); }
.g-pill.low { color: #ff9d90; background: rgb(255 122 107 / 0.1); }
.g-pill.good { color: var(--ready); background: rgb(98 206 122 / 0.12); }
.g-pill.gold { color: var(--gold); background: var(--gold-soft); }

/* The in-app bottom bar: BET left, event centre, BALANCE right
   (the chat clips keep BALANCE centred, clear of Telegram's time pill). */
.g-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 6px;
  min-height: 52px; padding: 7px 12px; border-radius: 14px;
  background: rgb(4 10 8 / 0.78); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
/* Same iOS repaint guard as the dock (slots.css): the bar sits under a canvas
 * that animates every frame, and was going blank until a forced recomposite. */
.g-foot { transform: translateZ(0); }
.g-foot small { display: block; margin-bottom: 4px; font: 700 9.5px/1 var(--display); letter-spacing: 0.16em; color: var(--faint); }
.g-foot-v { font: 700 14px/1 var(--display); white-space: nowrap; }
.g-foot-r { text-align: right; }
.g-foot-r .g-foot-v { color: var(--gold); }
.g-foot-event { text-align: center; font: 700 11px/1.25 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.g-foot-event.good { color: var(--ready); }

.g-dock-note {
  margin: 0; min-height: 52px; display: grid; place-items: center; padding: 10px 14px; text-align: center;
  color: var(--muted); font-size: 13px; line-height: 1.35; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
}
@keyframes g-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes g-pop { from { opacity: 0; transform: scale(0.94) translateY(6px); } }

/* ---------- Wheel ---------- */
.g-wstage { position: relative; flex: 1 1 0; min-height: 0; }
.g-bboard {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px;
  transition: opacity 240ms ease-out, transform 320ms var(--ease-out), visibility 0s;
}
.g-wheelpage[data-mode="play"] .g-bboard { opacity: 0; transform: translateY(18px); pointer-events: none; visibility: hidden; transition: opacity 220ms ease-out, transform 320ms var(--ease-out), visibility 0s 320ms; }
.g-board-top { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 10px; min-height: 0; }
.g-wstage[data-fit="tall"] .g-board-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.g-wslot { min-height: 0; min-width: 0; }
.g-zones { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 6px; min-height: 0; }
.g-wstage[data-fit="tall"] .g-zones { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 116px; }
.g-zone {
  appearance: none; cursor: pointer; position: relative; overflow: hidden; min-height: 44px; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 3px;
  padding: 8px 9px; border-radius: 14px; text-align: left; color: var(--text);
  border: 1px solid rgb(255 255 255 / 0.09);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / 0.12), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--pick) 62%, #0b1a16), color-mix(in srgb, var(--pick) 24%, #06110e));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 6px 16px rgb(0 0 0 / 0.3);
  touch-action: manipulation; -webkit-touch-callout: none;
  transition: transform 120ms var(--ease-out), border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.g-zone:active { transform: scale(0.97) translateZ(0); }
.g-zone:disabled { cursor: default; filter: saturate(0.7) brightness(0.8); }
.g-zone.on { border-color: rgb(245 201 90 / 0.65); box-shadow: inset 0 0 0 1px rgb(245 201 90 / 0.35), 0 8px 20px rgb(0 0 0 / 0.35); }
.g-zone.win { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset, 0 0 22px rgb(245 201 90 / 0.4); }
.g-zone-mult { font: 700 22px/1 var(--display); text-shadow: 0 2px 8px rgb(0 0 0 / 0.45); }
.g-zone.top .g-zone-mult { color: #fff1bf; }
.g-zone-total { margin-top: auto; max-width: 100%; font: 700 10.5px/1.15 var(--display); color: rgb(255 255 255 / 0.74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.g-zone-stack { position: absolute; right: 8px; top: 6px; width: 22px; height: 40px; pointer-events: none; }
.g-zone-stack .g-chip { position: absolute; left: 0; bottom: calc(var(--i, 0) * 4px); }
.g-zone-mine { max-width: 100%; padding: 3px 7px; border-radius: 999px; font: 700 11.5px/1 var(--display); color: #2a1d05; background: var(--gold); box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-wstage[data-fit="tall"] .g-zone { align-items: center; text-align: center; padding: 9px 5px 8px; }
.g-wstage[data-fit="tall"] .g-zone-mult { font-size: 21px; }
.g-wstage[data-fit="tall"] .g-zone-stack { position: relative; right: auto; top: auto; flex: none; margin-top: 2px; height: 36px; }

.g-rack { display: flex; justify-content: space-between; align-items: center; gap: 2px; min-height: 54px; padding: 4px 0 0; }
.g-rack-chip { appearance: none; cursor: pointer; border: 0; padding: 0; background: none; min-width: 44px; min-height: 50px; display: grid; place-items: center; transition: transform 180ms var(--ease-out); }
.g-rack-chip[aria-checked="true"] { transform: translateY(-5px); }
.g-rack-chip[aria-checked="true"] .g-chip { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgb(245 201 90 / 0.5), 0 8px 14px rgb(0 0 0 / 0.4); }
.g-rack-chip[data-short] .g-chip { filter: grayscale(0.75) brightness(0.7); }
.g-rack-chip:disabled { opacity: 0.45; cursor: default; }
.g-rack-chip.custom .g-chip-v { font-size: 14px; text-shadow: none; }
.g-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.g-control {
  appearance: none; cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.05); color: var(--text);
  font: 700 12px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.g-strip-actions { display: flex; gap: 6px; flex: none; }
.g-control:active { transform: scale(0.96) translateZ(0); }
.g-control:disabled { opacity: 0.38; cursor: default; }

.g-wheel-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 560ms var(--ease-out); will-change: transform; pointer-events: none; }
.g-wheel-layer.instant { transition: none; }
.g-wheel { position: relative; width: 100%; }
.g-canvas { display: block; touch-action: manipulation; }

.g-wbottom { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 240ms ease-out, transform 320ms var(--ease-out); }
.g-wheelpage[data-mode="play"] .g-wbottom { opacity: 1; transform: none; pointer-events: auto; transition-delay: 160ms; }
.g-wresult { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 7px 7px 7px 14px; border-radius: 16px; background: rgb(4 10 8 / 0.86); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgb(0 0 0 / 0.4); }
.g-wresult.pop { animation: g-pop 380ms var(--ease-out) both; }
.g-wresult-text { flex: 1; min-width: 0; display: grid; gap: 5px; }
.g-wresult-text small { font: 700 10.5px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-wresult-text b { font: 700 26px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-wresult-text b.good { color: var(--ready); text-shadow: 0 4px 20px rgb(98 206 122 / 0.35); }
.g-wresult-text b.bad { color: var(--danger); }
.g-next { flex: none; min-height: 50px; padding: 0 14px; white-space: nowrap; }
.g-replay { font-size: 12px; letter-spacing: 0.04em; }

/* Wheel refresh (pages/wheel.js): one felt table with the clock and players on top,
   Roulette's wheel materials on the canvas, the bar (BET / status / BALANCE) under the table,
   a slim row of the four numbers under the spinning wheel, and wins told as big numbers. */
.g-wtable {
  position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 80% at 50% 36%, #1c4a3b 0%, #123a2e 44%, #081a14 100%);
  box-shadow: 0 0 0 1px rgb(217 181 106 / 0.26), 0 12px 26px rgb(0 0 0 / 0.4);
}
.g-wstrip { min-height: 44px; padding: 0 6px 0 8px; }
.g-wclock { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 10px; border-radius: 999px; background: rgb(0 0 0 / 0.35); font: 700 11px/1 var(--display); letter-spacing: 0.12em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.g-wclock i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 8px var(--ready); }
.g-wclock.spin { color: var(--ready); }
.g-wclock.won i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.g-wclock.void { color: var(--muted); }
.g-wclock.void i { background: var(--faint); box-shadow: none; }
.g-wstrip .g-people { min-height: 36px; background: rgb(0 0 0 / 0.35); border-color: transparent; }
/* The table chat's 💬 beside the players pill (the Wheel's and the Moon's strip). */
.g-strip-actions .tc-btn { position: relative; width: 36px; height: 36px; background: rgb(0 0 0 / 0.35); border-color: transparent; box-shadow: none; }
.g-strip-actions .tc-btn .icon { width: 18px; height: 18px; }
.g-moon .g-strip-actions .tc-btn { width: 44px; height: 44px; align-self: center; border-color: var(--line); background: rgb(255 255 255 / 0.05); }
.pr-marks .chip.g-in { color: var(--ready); }
.g-wtable .g-bboard { inset: 0 8px 8px; }
.g-wtable .g-refuse-slot { left: 8px; right: 8px; bottom: 8px; }
.g-wstage[data-room="short"] .g-control { min-height: 38px; }
.g-wstage[data-room="short"] .g-rack { min-height: 48px; }
.g-wstage[data-room="short"] .g-zone-total[data-hint] { display: none; }
.g-wstage[data-room="short"] .g-zone { justify-content: center; }
/* The four numbers in their sector colour, a colour line on top. */
.g-wheelpage .g-zone { align-items: center; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--pick) 26%, #0a1a15), #081310); box-shadow: inset 0 3px 0 var(--pick); }
.g-wheelpage .g-zone.on { border-color: rgb(245 201 90 / 0.6); box-shadow: inset 0 3px 0 var(--pick); }
.g-wheelpage .g-zone.hot { box-shadow: inset 0 3px 0 var(--pick), 0 0 0 2px color-mix(in srgb, var(--pick) 80%, #fff), 0 0 20px color-mix(in srgb, var(--pick) 60%, transparent); }
.g-wheelpage .g-zone.win { border-color: var(--gold); box-shadow: inset 0 3px 0 var(--pick), 0 0 0 2px var(--gold), 0 0 22px rgb(245 201 90 / 0.45); }
.g-wheelpage .g-zone-total { color: rgb(255 255 255 / 0.66); }
.g-wstage[data-fit="wide"] .g-zone { justify-content: center; padding: 7px 4px 5px; }
.g-wstage[data-fit="wide"] .g-zone-total { margin-top: 0; }
/* While it spins and after it lands (tall stages): the same four numbers under the wheel. */
.g-wminis { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 220ms ease-out, transform 320ms var(--ease-out); }
.g-wheelpage[data-mode="play"] .g-wminis { opacity: 1; transform: none; transition-delay: 200ms; }
.g-wstage[data-fit="wide"] .g-wminis { display: none; }
.g-wmini { height: 44px; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--pick) 26%, #0a1a15), #081310); box-shadow: inset 0 3px 0 var(--pick); border: 1px solid rgb(255 255 255 / 0.08); transition: box-shadow 160ms, border-color 160ms, transform 160ms var(--ease-out); }
.g-wmini b { font: 700 16px/1 var(--display); }
.g-wmini small { font: 700 10px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.g-wmini small:empty { display: none; }
.g-wmini.hot { transform: translateY(-3px); box-shadow: inset 0 3px 0 var(--pick), 0 0 0 2px color-mix(in srgb, var(--pick) 80%, #fff), 0 0 18px color-mix(in srgb, var(--pick) 65%, transparent); }
.g-wmini.win { transform: translateY(-3px); border-color: var(--gold); box-shadow: inset 0 3px 0 var(--pick), 0 0 0 2px var(--gold), 0 0 22px rgb(245 201 90 / 0.5); }
/* The win on the wheel: Bbase → ×N slams in → merges into the total → drops into the bar. */
.g-wbig { position: absolute; z-index: 7; pointer-events: none; display: grid; place-items: center; transform: translate(-50%, -50%); transition: transform 300ms cubic-bezier(0.5, 0, 0.9, 0.4), opacity 300ms ease-in; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-wbig > * { grid-area: 1 / 1; }
.g-wbig-eq { display: flex; align-items: baseline; gap: 0.3em; transition: transform 240ms ease-in, opacity 240ms ease-in; }
.g-wbig-base { font: 700 clamp(28px, 10cqw, 42px)/1 var(--display); color: #fff6dc; animation: g-wpop 320ms var(--ease-out) both; text-shadow: 0 0 16px rgb(245 201 90 / 0.65), 0 3px 0 #5a4210, 0 6px 18px rgb(0 0 0 / 0.85); }
.g-wbig-x { font: 700 clamp(34px, 12.5cqw, 52px)/1 var(--display); color: #ffd36a; text-shadow: 0 0 20px rgb(255 150 60 / 0.8), 0 3px 0 #7a3f0a, 0 6px 18px rgb(0 0 0 / 0.8); }
.g-wbig-x:empty { display: none; }
.g-wbig-x.slam { animation: g-wslam 360ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.g-wbig-eq.merge { transform: scale(0.5); opacity: 0; }
.g-wbig-total { font: 700 clamp(38px, 14cqw, 58px)/1 var(--display); color: var(--gold); opacity: 0; text-shadow: 0 0 24px rgb(245 201 90 / 0.85), 0 4px 0 #5a4210, 0 8px 22px rgb(0 0 0 / 0.85); }
.g-wbig-total.on { opacity: 1; animation: g-wpop 280ms var(--ease-out) both; }
.g-wbig-total.bump { animation: g-wbump 320ms var(--ease-out); }
.g-wbig.fly { transform: translate(calc(-50% + var(--fx, 0px)), calc(-50% + var(--fy, 0px))) scale(0.3); opacity: 0; }
@keyframes g-wpop { from { opacity: 0; transform: scale(0.6); } }
@keyframes g-wslam { from { opacity: 0; transform: scale(2.8) rotate(-8deg); } }
@keyframes g-wbump { 45% { transform: scale(1.28); } }
/* The bar under the table: BET left, what is happening in the middle, BALANCE right. */
.g-wbar { flex: none; }
.g-wstatus { min-width: 0; display: grid; justify-items: center; align-content: center; gap: 3px; text-align: center; }
.g-wstatus small { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.2 var(--display); letter-spacing: 0.1em; color: #d6d2c4; }
.g-wstatus b { display: inline-block; font: 700 16px/1 var(--display); color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-wstatus b:empty { display: none; }
.g-wstatus.cue small { padding: 3px 8px; border-radius: 9px; background: rgb(245 201 90 / 0.16); color: #ffe29b; }
.g-wstatus.good small, .g-wstatus.good b { color: var(--ready); }
.g-wstatus.bad b { color: var(--danger); }
.g-wstatus.pop b { animation: g-wbump 420ms var(--ease-out); }
.g-wbar .g-foot-v.credit { color: var(--ready); }
.g-wafter { flex: none; display: flex; gap: 6px; }
.g-wafter[hidden] { display: none; }
.g-wafter .t-share { flex: none; min-height: 48px; border-radius: 14px; }
.g-wafter .g-next { flex: 1 1 auto; min-height: 48px; }
.g-wgo-share { display: contents; }
.g-wgo-share[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .g-wminis, .g-wmini, .g-wbig, .g-wbig *, .g-wstatus.pop b { animation: none !important; transition: none !important; }
}

/* ---------- Moon ---------- */
.g-main { position: relative; flex: 1 1 0; min-height: 90px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line) inset, 0 12px 28px rgb(0 0 0 / 0.3); background: #0a1b1d; }
.g-chart { position: absolute; inset: 0; }
.g-fill > .g-canvas { position: absolute; left: 0; top: 0; }
.g-mult {
  position: absolute; left: 14px; top: 10px; pointer-events: none;
  font: 700 40px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--text); text-shadow: 0 2px 18px rgb(0 0 0 / 0.65);
}
.g-mult small { display: block; margin-top: 5px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-shadow: none; }
.g-mult.crashed { color: var(--danger); }
.g-countdown { position: absolute; left: 0; right: 0; top: 9%; display: grid; justify-items: center; gap: 5px; pointer-events: none; text-align: center; }
.g-countdown span { font: 700 10.5px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(236 222 186 / 0.8); }
.g-countdown b { font: 700 40px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgb(245 201 90 / 0.4); }
.g-countdown b.dim { font-size: 24px; color: var(--muted); text-shadow: none; }
.g-countdown b.soon { color: #ffb4a8; }
.g-chart.short .g-countdown { top: 50%; left: 34%; right: 10px; transform: translateY(-50%); }
.g-chart.short .g-countdown b { font-size: 32px; }

/* Moon refresh (docs/previews/revamp/moon): a calmer sky, the readout beating on rungs and warming
   past 2×, the result told as big numbers on the chart and in the bar (no card over the chart). */
.g-moon .g-main { container-type: inline-size; box-shadow: 0 0 0 1px rgb(217 181 106 / 0.2), 0 12px 28px rgb(0 0 0 / 0.3); }
.g-moon .g-mult { left: 16px; top: 12px; z-index: 3; font-size: clamp(40px, 15cqw, 58px); color: #f7f2e2; text-shadow: 0 4px 22px rgb(0 0 0 / 0.55); transform-origin: 0 60%; }
.g-moon .g-mult.beat { animation: cv-beat 320ms var(--ease-out); }
.g-moon .g-mult.hot { color: #ffe29b; text-shadow: 0 0 26px rgb(245 201 90 / 0.55), 0 4px 22px rgb(0 0 0 / 0.55); }
.g-moon .g-mult.crashed { color: var(--danger); }
@keyframes cv-beat { 40% { transform: scale(1.06); } }
.g-moon .g-chart:not(.short) .g-countdown { left: auto; right: 8%; top: 50%; max-width: 58%; transform: translateY(-50%); gap: 6px; }
.g-moon .g-chart:not(.short) .g-countdown b { font-size: 46px; text-shadow: 0 6px 30px rgb(245 201 90 / 0.35); }
.g-moon .g-chart:not(.short) .g-countdown b.dim { font-size: 24px; }

.cv-num { position: absolute; z-index: 8; pointer-events: none; display: grid; place-items: center; transform: translate(-50%, -50%);
  transition: transform 300ms cubic-bezier(0.5, 0, 0.9, 0.4), opacity 300ms ease-in; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-num > * { grid-area: 1 / 1; }
.cv-eq { display: flex; align-items: baseline; gap: 0.3em; transition: transform 240ms ease-in, opacity 240ms ease-in; }
.cv-base { font: 700 clamp(24px, 8.5cqw, 36px)/1 var(--display); color: #fff6dc; animation: cv-pop-in 320ms var(--ease-out) both; text-shadow: 0 0 14px rgb(245 201 90 / 0.5), 0 3px 0 #5a4210, 0 6px 18px rgb(0 0 0 / 0.85); }
.cv-x { font: 700 clamp(30px, 11cqw, 46px)/1 var(--display); color: #ffd36a; text-shadow: 0 0 16px rgb(255 150 60 / 0.6), 0 3px 0 #7a3f0a, 0 6px 18px rgb(0 0 0 / 0.8); }
.cv-x:empty { display: none; }
.cv-x.slam { animation: cv-slam 360ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.cv-eq.merge { transform: scale(0.5); opacity: 0; }
.cv-total { font: 700 clamp(34px, 12.5cqw, 52px)/1 var(--display); color: var(--gold); opacity: 0; text-shadow: 0 0 20px rgb(245 201 90 / 0.65), 0 4px 0 #5a4210, 0 8px 22px rgb(0 0 0 / 0.85); }
.cv-total.on { opacity: 1; animation: cv-pop-in 280ms var(--ease-out) both; }
.cv-total.bump { animation: cv-bump 320ms var(--ease-out); }
.cv-total.lost { color: var(--danger); text-shadow: 0 0 16px rgb(255 122 107 / 0.5), 0 4px 0 #4a120c, 0 8px 22px rgb(0 0 0 / 0.85); }
.cv-num.fly { transform: translate(-50%, 360%) scale(0.3); opacity: 0; }
.cv-num.fall { transform: translate(-50%, 160%) rotate(12deg) scale(0.7); opacity: 0; transition-duration: 700ms; }
@keyframes cv-pop-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes cv-slam { from { opacity: 0; transform: scale(2.8) rotate(-8deg); } }
@keyframes cv-bump { 45% { transform: scale(1.28); } }

/* The bar: BET left, a short status (and a value) centre, BALANCE right. Hidden on the compact sheet until the climb. */
.cv-bar { flex: none; }
.cv-status { min-width: 0; display: grid; justify-items: center; gap: 3px; text-align: center; }
.g-foot .cv-status small { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.12em; color: #d6d2c4; }
.cv-status b { font: 700 16px/1 var(--display); color: var(--gold); white-space: nowrap; }
.cv-status b:empty { display: none; }
.g-foot .cv-status.cue small { padding: 3px 8px; border-radius: 9px; background: rgb(245 201 90 / 0.16); color: #ffe29b; }
.g-foot .cv-status.good small, .cv-status.good b { color: var(--credit, #7ee88c); }
.g-foot .cv-status.bad small, .cv-status.bad b { color: var(--danger); }
.cv-status.pop b { animation: cv-bump 420ms var(--ease-out); }
.cv-bar .g-foot-v.credit { color: var(--credit, #7ee88c); }
.g-moon[data-fit="compact"]:is([data-phase="idle"], [data-phase="lobby"], [data-phase="void"]) .cv-bar { display: none; }
.g-end { justify-items: stretch; }
@media (prefers-reduced-motion: reduce) {
  .g-moon .g-mult.beat, .cv-num *, .cv-eq, .cv-status.pop b, .btn.g-cashout.throb { animation: none !important; transition: none !important; }
  .cv-num { transition: none; }
}

.g-dock { flex: none; display: grid; }
/* iOS repaint guard, as the slots dock (slots.css): the Moon's chart redraws every frame right above
 * the dock, and the cash-out button rises in on an animation that used to end on `transform: none`.
 * WebKit dropped its layer there and sometimes never repainted it, so Cash out was invisible until
 * something forced a recomposite. The dock and the button keep a layer for good. */
.g-dock, .btn.g-cashout { transform: translateZ(0); }
.btn.g-cashout:active { transform: scale(0.97) translateZ(0); }
.g-dock.swap { animation: g-rise 280ms var(--ease-out) both; }
.g-panel { display: grid; gap: 5px; }
.g-amount-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 6px; }
.g-step { font-size: 17px; }
.g-amount {
  appearance: none; cursor: pointer; width: 100%; min-height: 44px; color: inherit;
  display: grid; justify-items: center; align-content: center; gap: 3px; padding: 3px 10px;
  border-radius: 12px; border: 1px dashed var(--line-strong); background: rgb(0 0 0 / 0.32);
}
.g-amount small { font: 700 9px/1 var(--display); letter-spacing: 0.16em; color: var(--faint); }
.g-amount b { font: 700 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.g-bet-btn { min-height: 48px; }
.g-amount b .unit, .g-typed .unit { color: var(--gold); margin-right: 2px; }
.g-adds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(52px, 1.1fr); gap: 4px; align-items: center; }
.g-addchip { appearance: none; cursor: pointer; border: 0; padding: 0; background: none; min-height: 44px; min-width: 44px; display: grid; place-items: center; }
.g-addchip:active .g-chip { transform: translate3d(0, 2px, 0) scale(0.95); }
.g-addchip .g-chip { width: 42px; height: 42px; }
.g-addchip .g-chip-v { font-size: 10.5px; }
.g-max { font-size: 12.5px; letter-spacing: 0.04em; }
.g-auto-row { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.g-auto-label { font: 700 10.5px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.g-preset { font-size: 12.5px; padding: 0 2px; }
.g-toggle {
  appearance: none; cursor: pointer; min-height: 44px; padding: 0 10px 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.05); color: var(--muted);
  font: 700 11px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
}
.g-toggle-knob { position: relative; width: 30px; height: 18px; border-radius: 999px; background: rgb(255 255 255 / 0.16); transition: background-color 160ms ease-out; }
.g-toggle-knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #d7dcd9; transition: transform 180ms var(--ease-out); }
.g-toggle.on { color: var(--gold); border-color: rgb(245 201 90 / 0.5); }
.g-toggle.on .g-toggle-knob { background: var(--gold); }
.g-toggle.on .g-toggle-knob::after { transform: translateX(12px); background: #fffaf0; }
.g-bet-btn.short { background: linear-gradient(180deg, #8ff0a2, var(--ready) 55%, #3fae5e); color: #062010; }
/* Cash out: the app's one gold primary button; the amount big, the multiplier small beside it,
   both centred on one line inside .cash-in. */
.btn.g-cashout {
  width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: 14px;
  box-shadow: 0 8px 22px rgb(245 201 90 / 0.22), inset 0 -3px 0 rgb(0 0 0 / 0.12);
  animation: g-rise 260ms var(--ease-out) both;
}
.btn.g-cashout.throb { animation: g-rise 260ms var(--ease-out) both, cv-throb 1400ms ease-in-out 260ms infinite; }
@keyframes cv-throb { 50% { box-shadow: 0 8px 30px rgb(245 201 90 / 0.42), inset 0 -3px 0 rgb(0 0 0 / 0.12); } }
.g-cashout .cash-in { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.g-cashout b { font: 700 clamp(18px, 5.6vw, 22px)/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-cashout small { font: 700 12.5px/1 var(--display); opacity: 0.7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-seat { display: grid; gap: 6px; padding: 8px 10px; border-radius: 14px; background: var(--card); border: 1px solid rgb(245 201 90 / 0.28); }
.g-seat-top { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.g-seat-text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.g-seat-text small { font: 700 10px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.g-seat-text b { font: 700 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.g-seat-auto { font: 700 12px/1 var(--display); color: var(--gold); white-space: nowrap; }
.g-end { display: grid; gap: 6px; }
.g-seat-state { font-size: 11px !important; }
.g-seat-state.riding { background: rgb(98 206 122 / 0.14); color: var(--ready); }
.g-seat-state.out { background: var(--gold-soft); color: var(--gold); }
.g-seat-state.busted { background: rgb(255 122 107 / 0.14); color: var(--danger); }

/* ---------- Sheets: keypad, players ---------- */
.g-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-key { appearance: none; min-height: 50px; border: 0; border-radius: 12px; cursor: pointer; font: 700 22px/1 var(--display); color: var(--text); background: rgb(255 255 255 / 0.07); }
.g-key:active { background: rgb(255 255 255 / 0.16); }
.g-key.erase { color: var(--muted); }
.g-typed { text-align: center; font: 700 40px/1.1 var(--display); font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.g-typed-note { text-align: center; margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.sheet .g-panel { margin-top: 4px; }

.g-list { display: grid; gap: 8px; }
.g-mine { display: flex; flex-wrap: wrap; gap: 4px; }
.g-mine .chip { text-transform: none; letter-spacing: 0; font-size: 11.5px; min-height: 22px; padding: 2px 8px; }
.g-amt { font: 700 14px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-amt.good { color: var(--ready); }
.g-amt.bad { color: var(--danger); }
.g-amt.muted { color: var(--muted); }

.g-result { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 16px 14px; }
.g-result .big { font: 700 40px/1 var(--display); color: var(--gold); text-shadow: 0 4px 24px rgb(245 201 90 / 0.35); }
.g-result .big.good { color: var(--ready); text-shadow: 0 4px 24px rgb(98 206 122 / 0.35); }
.g-result .big.bad { color: var(--danger); text-shadow: none; }
.g-result .caption { font: 700 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.g-result p { margin: 0; color: var(--muted); font-size: 14px; }
.g-result.enter { animation: g-pop 420ms var(--ease-out) both; }
.g-progress { display: flex; align-items: center; gap: 12px; }
.g-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgb(245 201 90 / 0.25); border-top-color: var(--gold); animation: g-spin 800ms linear infinite; flex: none; }
@keyframes g-spin { to { transform: rotate(360deg); } }

/* ---------- Hub ---------- */
.g-live-list { display: grid; gap: 6px; }
.g-live-card, .g-upsell {
  appearance: none; width: 100%; text-align: left; color: inherit; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  transition: transform 140ms var(--ease-out), border-color 140ms ease-out;
}
.g-live-card:active, .g-upsell:active { transform: scale(0.98) translateZ(0); }
.g-live-card.hot { border-color: rgb(245 201 90 / 0.35); }
.g-live-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; font-size: 21px; background: rgb(0 0 0 / 0.32); }
.g-live-text { display: grid; gap: 3px; min-width: 0; }
.g-live-title { font: 700 14.5px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-live-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-upsell { border-color: rgb(245 201 90 / 0.45); background: linear-gradient(90deg, rgb(245 201 90 / 0.14), transparent 70%), var(--card); }
.g-upsell:not(.g-upsell-cashley) > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font: 700 20px/1 var(--display); color: #2a1d05; background: radial-gradient(circle at 35% 30%, #ffe29b, #f5c95a 55%, #a8843e); }
/* Cashley's face in the Out of Bucks card: her head breaks out over the ring, so the card leaves room above it. */
.g-upsell-cashley { padding-top: 14px; }
.g-upsell-cashley > .cy-hface { margin: 0 2px; }
.g-empty-card { display: grid; gap: 4px; text-align: center; padding: 16px; }
.g-empty-card p { margin: 0; color: var(--muted); font-size: 13.5px; }
.g-start { display: grid; gap: 12px; }
.g-groups { display: flex; gap: 6px; overflow-x: auto; padding: 2px; margin: 0 -2px; scrollbar-width: none; }
.g-groups::-webkit-scrollbar { display: none; }
.g-groups .g-chip-btn { padding: 0 14px; flex: none; }
.g-start-games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-start-game {
  appearance: none; cursor: pointer; color: inherit; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; min-height: 64px;
  border-radius: 14px; border: 1px solid var(--line-strong);
  background: radial-gradient(120% 90% at 0% 0%, rgb(245 201 90 / 0.12), transparent 60%), rgb(0 0 0 / 0.25);
  transition: transform 140ms var(--ease-out);
}
.g-start-game:active { transform: scale(0.97) translateZ(0); }
.g-start-game .icon { font-size: 26px; line-height: 1; }
.g-start-text { display: grid; gap: 3px; min-width: 0; }
.g-start-text b { font: 700 14.5px/1.15 var(--display); }
.g-start-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Games tab: the casino floor (pages/games.js) ----------
 * The selector plus the five cabinets fit --fit-h (390×470 and 360×420 without
 * scrolling); chess, public rounds and the Highscores marquee sit below. */
.gf { gap: 8px; }
.gf-ctx {
  position: sticky; top: calc(-1 * var(--view-pad-top)); z-index: 8;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: calc(-1 * var(--view-pad-top)) -14px 0; padding: var(--view-pad-top) 14px 4px;
  background: linear-gradient(180deg, var(--felt-deep) 78%, rgb(8 20 17 / 0));
}
.gf-ctx::-webkit-scrollbar { display: none; }
/* Out of Bucks or a Chess turn sits above the chips: no pull-up over it. */
.gf-extras:not(:empty) ~ .gf-ctx, .sp-chess-turns:not([hidden]) ~ .gf-ctx { margin-top: 0; }
.gf-chip {
  appearance: none; flex: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; max-width: 62vw; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgb(255 255 255 / 0.05); color: var(--text);
  font: 700 13px/1 var(--display); white-space: nowrap;
  transition: transform 120ms var(--ease-out), background-color 160ms ease-out, border-color 160ms ease-out;
}
.gf-chip span { overflow: hidden; text-overflow: ellipsis; }
.gf-chip:active { transform: scale(0.96) translateZ(0); }
.gf-chip[aria-checked="true"] {
  color: #2a1d05; border-color: transparent;
  background: var(--gold-metal);
  box-shadow: 0 4px 14px rgb(245 201 90 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.gf-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ready); box-shadow: 0 0 8px var(--ready); animation: g-blink 1.4s ease-in-out infinite; }
.gf-chip[aria-checked="true"] .gf-dot { background: #1c6b33; box-shadow: none; }

.gf-floor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Rows take their cards' height: a card has a floor, never a fixed height, so a row can't run into the next. */
.gf-floor > .gf-tile:not(.gf-holdem) { min-height: clamp(140px, 38vw, 190px); }
.gf-floor.swap .gf-tile { animation: gf-swap 360ms var(--ease-out) both; }
.gf-floor.swap .gf-tile:nth-child(2) { animation-delay: 30ms; }
.gf-floor.swap .gf-tile:nth-child(3) { animation-delay: 60ms; }
.gf-floor.swap .gf-tile:nth-child(4) { animation-delay: 90ms; }
.gf-floor.swap .gf-tile:nth-child(5) { animation-delay: 120ms; }
@keyframes gf-swap { from { opacity: 0.4; transform: translate3d(0, 6px, 0) scale(0.98); } }

.gf-tile {
  --tint: #3c1742; --tint2: #12060f;
  appearance: none; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 0;
  grid-column: span 2; display: flex; flex-direction: column; padding: 0; color: var(--text); text-align: left;
  border-radius: 18px; border: 1px solid transparent;
  /* The rim is lit on its top-left edge, like the cabinets' bezels. */
  background:
    radial-gradient(90% 70% at 50% 34%, color-mix(in srgb, var(--tint) 88%, #fff 12%) 0%, var(--tint) 45%, var(--tint2) 100%) padding-box,
    linear-gradient(160deg, rgb(255 230 160 / 0.55), rgb(245 201 90 / 0.18) 35%, rgb(0 0 0 / 0.3) 70%, rgb(245 201 90 / 0.3)) border-box;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 -40px 40px -20px rgb(0 0 0 / 0.55), 0 10px 22px rgb(0 0 0 / 0.38);
  transition: transform 140ms var(--ease-out), border-color 200ms ease-out, box-shadow 240ms ease-out;
}
/* The cabinet's marquee: a row of bulbs along the top edge, chasing while live. */
.gf-tile::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 4px; z-index: 2; pointer-events: none; opacity: 0.55;
  background: radial-gradient(circle, #ffe7a6 0 1.4px, transparent 1.9px) 0 50% / 10px 4px repeat-x;
}
.gf-tile.live::before { opacity: 1; filter: drop-shadow(0 0 3px var(--gold)); animation: gf-chase 900ms steps(2) infinite; }
@keyframes gf-chase { to { background-position: 10px 50%; } }
/* Only one card plays (games/game-card.js): the one under the mouse, or on a phone the next in reading order as the page scrolls.
 * It wears a gold ring and its bulbs chase; the rest hold the still of a win. */
.gf-tile.playing {
  border-color: rgb(245 201 90 / 0.8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -40px 40px -20px rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(245 201 90 / 0.3), 0 0 22px -4px rgb(245 201 90 / 0.45), 0 10px 22px rgb(0 0 0 / 0.38);
}
.gf-tile.playing::before { opacity: 1; animation: gf-chase 900ms steps(2) infinite; }
/* Pseudo-elements too: flat.css dims Hold'em's cards with an animated ::after. */
.gf-tile:not(.playing) .gf-art *, .gf-tile:not(.playing) .gf-art *::before, .gf-tile:not(.playing) .gf-art *::after { animation: none !important; }
.gf-tile:active { transform: scale(0.97) translateZ(0); }
/* Cabinet colors. The floor overrides all legacy spans to keep two cabinets per row. */
.gf-slots { --tint: #4a1747; --tint2: #14050f; grid-column: span 2; }
.gf-bonanza { --tint: #1b2f66; --tint2: #070d1f; grid-column: span 2; }
.gf-snacks { --tint: #3a3f4a; --tint2: #0c0e12; grid-column: span 2; }
.gf-rentriot { --tint: #245340; --tint2: #061b12; grid-column: span 2; }
.gf-sugar { --tint: #4a1d4c; --tint2: #12051a; grid-column: span 2; }
.gf-fortune { --tint: #5a1a24; --tint2: #14050a; grid-column: span 2; }
.gf-brick { --tint: #4a2418; --tint2: #140805; grid-column: span 2; }
.gf-potluck { --tint: #1b4a33; --tint2: #06140d; grid-column: span 2; }
.gf-gains { --tint: #3a3f7a; --tint2: #0e0f2a; grid-column: span 2; }
.gf-blackjack { --tint: #17624a; --tint2: #04150f; grid-column: span 2; }
.gf-roulette { --tint: #5a1a1d; --tint2: #160506; grid-column: span 2; }
.gf-wheel { --tint: #1d3f63; --tint2: #050d18; grid-column: span 3; }
.gf-moon { --tint: #0f4a4e; --tint2: #031214; grid-column: span 3; }
.gf-floor > .gf-tile:not(.gf-holdem) { grid-column: span 1; }
.gf-tile.live {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgb(245 201 90 / 0.45), inset 0 -40px 40px -20px rgb(0 0 0 / 0.55), 0 0 24px rgb(245 201 90 / 0.3), 0 10px 22px rgb(0 0 0 / 0.38);
  animation: gf-glow 2.6s ease-in-out infinite;
}
@keyframes gf-glow { 50% { box-shadow: inset 0 0 0 1px rgb(245 201 90 / 0.7), inset 0 -40px 40px -20px rgb(0 0 0 / 0.55), 0 0 34px rgb(245 201 90 / 0.46), 0 10px 22px rgb(0 0 0 / 0.38); } }
.gf-tile.starting .gf-art { opacity: 0.55; }
.gf-tile.starting::after, .gf-tile.busy::after {
  content: ""; position: absolute; left: 50%; top: 42%; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 3; border-radius: 50%;
  border: 3px solid rgb(245 201 90 / 0.25); border-top-color: var(--gold); animation: g-spin 800ms linear infinite;
}
/* The art sizes to its own box (container units), so short tiles never push it into the label. */
.gf-art { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 14px 8px 2px; container-type: size; }
.gf-label { position: relative; z-index: 1; flex: none; display: grid; gap: 3px; min-width: 0; padding: 4px 10px 9px; }
.gf-label b { font: 700 14px/1.1 var(--display); letter-spacing: 0.01em; text-shadow: 0 2px 8px rgb(0 0 0 / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The three slots share a row: their names wrap onto two lines instead of being cut ("Brokie / Bonanza"). */
.gf-slots .gf-label b, .gf-bonanza .gf-label b, .gf-snacks .gf-label b, .gf-sugar .gf-label b,
.gf-fortune .gf-label b, .gf-brick .gf-label b { white-space: normal; font-size: 13px; line-height: 1.05; }
.gf-status { display: flex; align-items: center; gap: 5px; min-width: 0; font: 700 10.5px/1.15 var(--display); letter-spacing: 0.03em; color: rgb(236 230 214 / 0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gf-tile.live .gf-status { color: var(--gold); }
.gf-tile.live .gf-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }

/* Every game's art: a small animated machine or table on one canvas (games/slot-tiles.js). The canvas
 * takes the whole art box and a little of the padding around it (the machines need the height on
 * short phones); it keeps a permanent layer, and the script sizes its backing store and pauses it. */
.gf-mini { position: absolute; inset: 9px 3px -3px; display: block; pointer-events: none; transform: translateZ(0); }
.gf-mini-canvas { display: block; width: 100%; height: 100%; }
/* The players at a table card (games/table-tiles.js): their avatars over the canvas, where the script puts them;
 * the ring round each is on the canvas. A player who folded or busted sits back. */
.gf-seats { position: absolute; inset: 0; }
.gf-seat { position: absolute; border-radius: 50%; overflow: hidden; transition: opacity 240ms ease-out; }
.gf-seat[hidden] { display: none; }
.gf-seat.out { opacity: 0.32; filter: grayscale(0.6); }
.gf-seat .avatar { display: block; }
.gf-seat svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* A slot's tags over its art: the kind of game and a volatility meter of three bolts. */
/* The plate across a card's top (tile-art.js cardPlate): volatility and the max win, the "i" at its end. */
.gf-plate { position: absolute; left: 8px; right: 7px; top: 9px; z-index: 3; display: flex; align-items: center; gap: 4px; pointer-events: none; }
.gf-tags { display: flex; gap: 4px; min-width: 0; }
.gf-max { color: #ffe9ad; font-variant-numeric: tabular-nums; }
.gf-info {
  appearance: none; position: relative; flex: none; margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto; color: var(--text); -webkit-tap-highlight-color: transparent;
  font: italic 700 13px/1 Georgia, "Times New Roman", serif;
  background: rgb(3 7 5 / 0.72); box-shadow: inset 0 0 0 1px rgb(245 201 90 / 0.45), 0 2px 6px rgb(0 0 0 / 0.4);
}
.gf-info::before { content: "i"; }
/* A finger-sized target around the small key. */
.gf-info::after { content: ""; position: absolute; inset: -11px; }
.gf-info:active { background: rgb(245 201 90 / 0.28); }
@media (hover: hover) { .gf-info:hover { background: rgb(245 201 90 / 0.2); } }
.gf-tag {
  display: inline-flex; align-items: center; gap: 1px; height: 18px; padding: 0 7px; border-radius: 999px;
  font: 700 9px/1 var(--display); letter-spacing: 0.04em; color: #f1ead6; white-space: nowrap;
  background: rgb(4 9 7 / 0.72); box-shadow: inset 0 0 0 1px rgb(245 201 90 / 0.28);
}
.gf-vol { padding: 0 5px; }
.gf-vol i {
  width: 7px; height: 11px; background: rgb(255 255 255 / 0.22);
  clip-path: polygon(62% 0, 8% 58%, 44% 58%, 34% 100%, 92% 40%, 55% 40%);
}
.gf-vol i.on { background: var(--gold); }
/* The machine starts below its plate (Hold'em's wide card keeps its art beside the plate's "i"). */
.gf-tile:has(.gf-plate):not(.gf-holdem) .gf-mini { top: 33px; }

/* The floor in groups: Hold'em, then Slots, Table games and Live rounds under small captions. */
.gf-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 2px 0; font: 700 10px/1 var(--display); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); }
.gf-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(245 201 90 / 0.28), rgb(245 201 90 / 0)); }

/* Texas Hold'em: the featured cabinet above the floor, art on the left and the pitch on the right. */
.gf-holdem { --tint: #134a3c; --tint2: #03110c; border-color: rgb(245 201 90 / 0.45); }
.gf-floor > .gf-holdem { grid-column: 1 / -1; width: 100%; min-height: clamp(150px, 26vw, 220px); flex-direction: row; align-items: stretch; }
.gf-floor > .gf-holdem .gf-art { flex: 1.15 1 0; padding: 14px 4px 8px 10px; }
.gf-floor > .gf-holdem .gf-status { font-size: clamp(10.5px, 0.9vw, 15px); }
.gf-floor > .gf-holdem .gf-label { flex: 1 1 0; align-content: center; padding: 14px 12px 12px 4px; gap: 4px; }
.gf-floor > .gf-holdem .gf-label b { font-size: clamp(21px, 2.2vw, 40px); white-space: normal; line-height: 1.05; }
.gf-he-kicker { font: 700 clamp(8.5px, 0.75vw, 13px)/1 var(--display); letter-spacing: 0.14em; color: var(--gold); }
.gf-he-line { font: 600 clamp(12px, 1.05vw, 18px)/1.25 var(--body); color: rgb(236 230 214 / 0.82); }
/* The Moon: a round on canvas (games/table-tiles.js moonPainter); the live multiplier over it while a round climbs. */
.gf-cv { position: relative; width: 100%; height: 100%; min-height: 50px; }
.gf-cv-mult { position: absolute; left: 10px; top: 6px; font: 700 20px/1 var(--display); color: var(--gold); text-shadow: 0 2px 12px rgb(0 0 0 / 0.7); font-variant-numeric: tabular-nums; }
.gf-cv-mult:empty { display: none; }

/* Highscores: the top three nameplates gliding past. */
.gf-hs {
  appearance: none; cursor: pointer; width: 100%; min-height: 58px; color: inherit; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 12px 4px 10px;
  border-radius: 14px; border: 1px solid rgb(245 201 90 / 0.28);
  background: linear-gradient(90deg, rgb(245 201 90 / 0.12), transparent 40%), var(--card);
}
.gf-hs:active { transform: scale(0.98) translateZ(0); }
.gf-hs-cap { display: grid; gap: 3px; }
.gf-hs-cap b { font: 700 13px/1 var(--display); color: var(--gold); white-space: nowrap; }
.gf-hs-cap small { font: 700 9.5px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.gf-hs-window { overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.gf-hs-track { display: flex; width: max-content; }
.gf-hs-track.moving { animation: gf-marquee 16s linear infinite; }
.gf-hs-run { display: flex; gap: 16px; padding-right: 16px; }
@keyframes gf-marquee { to { transform: translateX(-50%); } }
.gf-hs-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gf-hs-rank { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/1 var(--display); color: #2a1d05; background: #b9c0bd; }
.gf-hs-rank.r1 { background: radial-gradient(circle at 35% 30%, #ffe7a6, var(--gold) 60%, #b98a2c); }
.gf-hs-rank.r3 { background: #cf8f5c; }
.gf-hs-plate { width: 250px; flex: none; }
.gf-hs-item small { font: 700 12px/1 var(--display); color: var(--ready); font-variant-numeric: tabular-nums; }
.gf-hs-item.me .gf-hs-plate { box-shadow: 0 0 0 1.5px var(--gold); }
.gf-hs-empty { font-size: 13px; color: var(--muted); white-space: nowrap; }
.gf-hs-go { font: 700 22px/1 var(--display); color: var(--faint); }
.gf-extras { display: grid; gap: 8px; }
.gf-extras:empty { display: none; }
.gf-social-card { min-height: 74px; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line));
  border-radius: 14px; background: radial-gradient(circle at 14% 35%, #235947, var(--card) 65%); }
.gf-social-card .g-live-icon { color: var(--gold); font-size: 25px; }
.gf-public { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 82%); gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.gf-public::-webkit-scrollbar { display: none; }
.gf-public:has(> :only-child) { grid-auto-columns: 100%; }
.gf-public > * { scroll-snap-align: start; }
.gf-note { margin: 0; padding: 0 4px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* A game card's back (games/game-facts.js): the machine playing, three facts in wells, the features, how it plays. */
.gf-facts-sheet .sheet-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gf-facts-sheet .gf-facts-art { grid-column: 1 / -1; }
.gf-facts-art { cursor: default; pointer-events: none; height: 150px; flex: none; border-color: rgb(245 201 90 / 0.4); }
.gf-facts-art .gf-art { padding: 10px 8px; }
.gf-facts-art .gf-mini { inset: 6px; }
.gf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gf-fact {
  display: grid; gap: 5px; justify-items: center; align-content: start; padding: 10px 4px 9px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.24)); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.5), 0 1px 0 rgb(255 255 255 / 0.04);
}
.gf-fact small { font: 700 9.5px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gf-fact b { font: 700 15px/1.15 var(--display); color: #ffe9ad; font-variant-numeric: tabular-nums; }
.gf-fact .gf-vol { height: auto; padding: 0; background: none; box-shadow: none; gap: 2px; }
.gf-fact .gf-vol i { width: 9px; height: 14px; }
.gf-features { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.gf-features li {
  padding: 6px 10px; border-radius: 999px; font: 700 12px/1 var(--display); color: #efe6cf;
  background: rgb(245 201 90 / 0.1); box-shadow: inset 0 0 0 1px rgb(245 201 90 / 0.28);
}
.gf-how { margin: 0; color: #cfd9d4; font-size: 14px; line-height: 1.45; }
/* The jackpot line (jackpot-readout.js jackpotLine): the sheet's grid gap spaces it. */
.gf-facts-sheet .jp-elig { margin: 0; }

/* The redesign (REDESIGN_SHELL, game-card.js statusLine, pages/games.js, game-facts.js): "NEW" in front of a new
 * slot's status and what each group holds at its caption's end. */
.gf-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gf-new { flex: none; font: 700 10px/1.15 var(--display); font-style: normal; letter-spacing: 0.1em; color: var(--gold); }
.gf-group-hint { order: 1; flex: none; font: 600 11.5px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }

html.compact .gf-label { padding: 2px 9px 7px; }
html.compact .gf-label b { font-size: 13px; }
html.compact .gf-floor > .gf-holdem .gf-label b { font-size: 19px; }
html.compact .gf-slots .gf-label b, html.compact .gf-bonanza .gf-label b, html.compact .gf-snacks .gf-label b,
html.compact .gf-sugar .gf-label b, html.compact .gf-fortune .gf-label b, html.compact .gf-brick .gf-label b { font-size: 11px; white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 370px) { html.compact .gf-slots .gf-label b, html.compact .gf-bonanza .gf-label b, html.compact .gf-snacks .gf-label b,
  html.compact .gf-sugar .gf-label b, html.compact .gf-fortune .gf-label b, html.compact .gf-brick .gf-label b { font-size: 10px; letter-spacing: -0.02em; } }
html.compact .gf-art { padding-top: 12px; }

/* Always Everyone (REDESIGN_SHELL, pages/games.js): no place chips. A filter row (All, Slots, Tables, Live), then
 * one section per group: Hold'em with the chess card (beside it on a computer), the slots, table games, live rounds. */
.gf-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.gf-filters::-webkit-scrollbar { display: none; }
.gf-filter {
  appearance: none; flex: none; min-height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgb(255 255 255 / 0.04); color: var(--muted);
  font: 700 13.5px/1 var(--display); white-space: nowrap; transition: transform 120ms var(--ease-out);
}
.gf-filter:active { transform: scale(0.96); }
.gf-filter[aria-checked="true"] {
  color: var(--gold-ink, #2a1d05); border-color: transparent; background: var(--gold-metal);
  box-shadow: 0 4px 14px rgb(245 201 90 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.5);
}
@media (hover: hover) { .gf-filter:not([aria-checked="true"]):hover { color: var(--text); border-color: rgb(245 201 90 / 0.5); } }
.gf .gf-floor.gf-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.gf-sec { display: grid; gap: 8px; min-width: 0; }
.gf-sec[hidden] { display: none; }
.gf-sections .gf-group { margin: 2px 2px 0; }
.gf-friends { display: grid; gap: 12px; min-width: 0; }
.gf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gf-grid > .gf-tile { grid-column: auto; min-height: clamp(140px, 38vw, 190px); }
.gf-grid > .gf-wheel, .gf-grid > .gf-moon { grid-column: auto; }

/* The redesign's Hold'em card (game-card.js holdemLabel), on the Games tab and the Lobby's phone Play: art on the
 * left; the name, who is playing and "Join a table" on the right. Its eyebrow shows only when the card is wide. */
.gf-friends > .gf-holdem, .lp-holdem { grid-column: auto; width: 100%; min-height: clamp(150px, 42vw, 190px); flex-direction: row; align-items: stretch; }
.gf-friends > .gf-holdem .gf-art, .lp-holdem .gf-art { flex: 1.1 1 0; padding: 14px 4px 8px 10px; }
.gf-friends > .gf-holdem .gf-label, .lp-holdem .gf-label { flex: 1 1 0; align-content: center; padding: 14px 12px 12px 4px; gap: 5px; }
.gf-friends > .gf-holdem .gf-label b, .lp-holdem .gf-label b { font-size: 21px; white-space: normal; line-height: 1.05; }
.gf-friends > .gf-holdem .gf-he-kicker, .lp-holdem .gf-he-kicker { display: none; }
.gf-friends > .gf-holdem.live .gf-status, .lp-holdem.live .gf-status { color: var(--ready); }
.gf-he-join { margin-top: 6px; min-height: 40px; padding: 0 12px; width: 100%; font-size: 14px; }
.btn.quiet.gf-he-join { color: var(--gold); }
html.compact .gf-friends > .gf-holdem .gf-label b, html.compact .lp-holdem .gf-label b { font-size: 19px; }
html.compact .gf-he-join { min-height: 36px; margin-top: 3px; }
@media (max-width: 370px) { .gf-friends > .gf-holdem .gf-label b, .lp-holdem .gf-label b { font-size: 17px; } }

/* The redesigned Lobby on a phone (pages/lobby-play.js cards): "All games ›" at the caption's end, Hold'em's card,
 * then the slots as a sideways strip whose middle card plays. */
#view .lobby-play .lp-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.compact #view .lobby-play .lp-cap { display: flex; }
.lp-all-link { min-height: 32px; padding: 0 2px; color: var(--gold); font: 700 13px/1 var(--display); }
.lp-cards {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin: 0 -14px; padding: 2px 14px 6px; scroll-padding: 0 14px;
}
.lp-cards::-webkit-scrollbar { display: none; }
.lp-cards > .gf-tile { flex: 0 0 clamp(140px, 40vw, 164px); min-height: clamp(164px, 46vw, 190px); scroll-snap-align: start; }
/* The plate fits a strip card's width: bolts, "Max 20,000×" and the "i" side by side. */
.lp-cards .gf-plate { left: 6px; right: 5px; gap: 3px; }
.lp-cards .gf-tags { gap: 3px; }
.lp-cards .gf-tag { padding: 0 5px; font-size: 8.5px; }

@media (min-width: 960px) and (min-height: 500px) and (min-aspect-ratio: 4/3) {
  html:has(#tabs:not([hidden])) .gf .gf-floor.gf-sections { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  html:has(#tabs:not([hidden])) .gf .gf-sections .gf-group { grid-column: auto; grid-row: auto; margin: 0 2px; }
  html:has(#tabs:not([hidden])) .gf .gf-friends { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
  html:has(#tabs:not([hidden])) .gf .gf-friends > .gf-holdem { grid-column: auto; grid-row: auto; flex-direction: row; min-height: 150px; }
  html:has(#tabs:not([hidden])) .gf .gf-friends > .gf-holdem .gf-art { flex: 1 1 0; padding: 16px 8px 10px 14px; }
  html:has(#tabs:not([hidden])) .gf .gf-friends > .gf-holdem .gf-label { flex: 1 1 0; padding: 16px 20px 16px 6px; }
  html:has(#tabs:not([hidden])) .gf .gf-friends > .gf-holdem .gf-label b { font-size: clamp(20px, 1.6vw, 28px); }
  html:has(#tabs:not([hidden])) .gf .gf-friends > .gf-holdem .gf-he-kicker { display: block; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; }
  html:has(#tabs:not([hidden])) .gf .gf-friends > .gf-holdem .gf-status { font-size: 12.5px; }
  /* Chess beside Hold'em: the picture and its words across the top, the keys side by side under them. */
  html:has(#tabs:not([hidden])) .gf .gf-friends > .ci-card { grid-template-columns: 52px minmax(0, 1fr); align-content: center; row-gap: 14px; padding: 16px; }
  html:has(#tabs:not([hidden])) .gf .gf-friends .ci-card-keys { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  html:has(#tabs:not([hidden])) .gf .gf-friends .ci-card-keys .btn { padding: 0 10px; }
  html:has(#tabs:not([hidden])) .gf .gf-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  html:has(#tabs:not([hidden])) .gf .gf-grid > .gf-tile { height: auto; min-height: 0; aspect-ratio: 23 / 25; }
}

@media (hover: hover) { .gf-tile:hover { border-color: rgb(245 201 90 / 0.5); } .gf-tile.playing:hover { border-color: rgb(245 201 90 / 0.8); } .gf-chip:hover { border-color: var(--gold); } }
@media (prefers-reduced-motion: reduce) {
  .gf-floor.swap .gf-tile, .gf-tile.live, .gf-tile.live::before, .gf-tile.playing::before, .gf-dot,
  .gf-hs-track.moving { animation: none !important; }
  .gf-seat { transition: none; }
  .gf-tile.starting::after, .gf-tile.busy::after { animation: none; border-color: var(--gold); }
}

/* ---------- Chess ---------- */
.g-chess {
  --board: min(calc(100vw - 32px), 480px, calc(var(--stage-fit-h, calc(var(--app-h, 100dvh) - var(--bar-h, 44px) - 24px)) - 144px));
  gap: 8px;
}
.g-chess-main { display: grid; gap: 5px; justify-content: center; }
.g-chess-main > * { width: var(--board); }
.g-chess-main > .g-side { width: min(calc(100vw - 28px), 480px); }
.g-chess-main > :last-child { width: min(calc(100vw - 28px), 480px); min-width: 0; }
.g-chess-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 2px; }
.g-chess-head .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-side { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.g-side .g-plate { flex: 0 1 58%; min-width: 0; border-radius: 8px; }
.g-side .g-plate .plate-name { font-size: 11px; }
.g-side-meta { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.g-taken { display: flex; flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 0; min-height: 20px; font: 700 15px/1 var(--display); letter-spacing: -0.2em; }
.g-taken .w { color: #f6efdf; }
.g-taken .b { color: #17130f; -webkit-text-stroke: 0.6px #cdbd98; }
.g-taken em { font-style: normal; letter-spacing: 0; margin-left: 6px; font-size: 11px; color: var(--muted); }
.g-side.active .g-plate { box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgb(245 201 90 / 0.25); }
.g-chess-turn-cue { position: absolute; z-index: 4; top: 50%; left: 50%;
  padding: 8px 16px; border: 1px solid var(--gold); border-radius: 999px;
  background: rgb(15 24 19 / .92); color: var(--gold);
  box-shadow: 0 7px 20px rgb(0 0 0 / .3);
  font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); }
.g-chess-turn-cue[hidden] { display: none; }
.g-chess-turn-cue.show { animation: g-chess-turn-cue 1600ms cubic-bezier(.19, 1, .22, 1) both; }
@keyframes g-chess-turn-cue {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.96); }
  14%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .g-chess-turn-cue.show { animation: none; opacity: 1; }
}

.g-board-wrap { position: relative; margin: 0 auto; }
.g-board {
  position: relative; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1 / 1; width: 100%;
  border-radius: 8px; overflow: hidden; touch-action: none;
  box-shadow: 0 0 0 2px #3a2a10, 0 0 0 4px #b58a3a, 0 12px 30px rgb(0 0 0 / 0.5);
}
.g-sq {
  appearance: none; border: 0; padding: 0; margin: 0; position: relative; cursor: pointer;
  display: grid; place-items: center; aspect-ratio: 1 / 1; min-width: 0;
  background: #e7d8b4; color: inherit;
}
.g-sq.dark { background: #2f6b50; }
.g-sq.last::before { content: ""; position: absolute; inset: 0; background: rgb(245 201 90 / 0.42); }
.g-sq.dark.last::before { background: rgb(245 201 90 / 0.34); }
.g-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgb(255 214 102 / 0.62); box-shadow: 0 0 0 3px #f5c95a inset; }
.g-sq.check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 70 50 / 0.9) 0%, rgb(255 70 50 / 0.45) 45%, transparent 72%); }
.g-sq.target::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgb(12 30 22 / 0.34); pointer-events: none; }
.g-sq.target.capture::after { width: 88%; height: 88%; background: transparent; box-shadow: 0 0 0 4px rgb(12 30 22 / 0.34) inset; }
.g-sq.target.castle::after { width: 88%; height: 88%; border-radius: 22%; background: transparent; box-shadow: 0 0 0 3px rgb(245 201 90 / 0.85) inset; }
.g-sq.drop { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.8) inset; }
.g-coord { position: absolute; font: 700 8.5px/1 var(--display); pointer-events: none; opacity: 0.8; z-index: 1; }
.g-coord.file { right: 2px; bottom: 2px; }
.g-coord.rank { left: 2px; top: 2px; }
.g-sq .g-coord { color: #2f6b50; }
.g-sq.dark .g-coord { color: #e7d8b4; }
.g-piece {
  position: relative; z-index: 2; pointer-events: none;
  font: 400 calc(var(--board, min(100vw, 480px)) / 8 * 0.74) / 1 "Casino Sans", "DejaVu Sans", serif;
  transform: translateY(-2%);
  transition: transform 200ms var(--ease-out);
  will-change: transform;
}
.g-piece.w { display: grid; filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / 0.35)); }
.g-piece.w > span { grid-area: 1 / 1; }
.g-piece.w .fill { color: #fffaf0; }
.g-piece.w .line { color: #221a12; }
.g-piece.b { color: #16120e; -webkit-text-stroke: 1px #6e5b3b; text-shadow: 0 2px 2px rgb(0 0 0 / 0.25); }
.g-piece.moving { transition: none; }
.g-ghost { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -55%) scale(1.18); filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.45)); }
.g-board-veil { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 12px; border-radius: 8px; background: rgb(4 10 8 / 0.55); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.g-board-veil .card { max-width: 300px; width: 100%; padding: 12px; }
.g-board-veil .g-result .big { font-size: 32px; }

.g-promo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-promo button {
  appearance: none; border: 1px solid var(--line-strong); border-radius: 14px; min-height: 84px; cursor: pointer;
  background: rgb(255 255 255 / 0.06); display: grid; place-items: center; gap: 2px; color: var(--text);
}
.g-promo button .g-piece { font-size: 48px; transform: none; }
.g-promo button small { font: 700 10px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.g-moves-box { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.g-moves-box summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; font: 700 12px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.g-moves-box summary::-webkit-details-marker { display: none; }
.g-moves-box summary::after { content: "▾"; color: var(--faint); transition: transform 160ms ease-out; }
.g-moves-box[open] summary::after { transform: rotate(180deg); }
.g-moves-count { margin-left: auto; letter-spacing: 0.02em; text-transform: none; color: var(--faint); font-variant-numeric: tabular-nums; }
.g-moves { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 12px; scrollbar-width: none; }
.g-moves::-webkit-scrollbar { display: none; }
.g-move { flex: none; display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: rgb(255 255 255 / 0.06); font: 700 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.g-move i { font-style: normal; color: var(--faint); font-size: 11px; }
.g-move.latest { background: var(--gold-soft); color: var(--gold); }
.g-chess-nav { display: flex; align-items: center; gap: 3px; min-height: 44px; }
.g-chess-nav button { flex: none; min-width: 40px; min-height: 40px; padding: 0 7px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--card);
  color: var(--text); font: 700 12px/1 var(--display); cursor: pointer; }
.g-chess-nav button:first-child, .g-chess-nav button:nth-child(3) { display: grid; place-items: center; }
.g-chess-nav button:disabled { opacity: .38; cursor: default; }
.g-chess-nav button:last-child:not(:disabled) { color: var(--gold); }
.g-chess-nav-label { flex: 1; min-width: 0; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--muted); font: 700 11px/1.2 var(--display); }
.g-chess-timeline { display: flex; gap: 4px; overflow-x: auto; min-height: 34px;
  padding: 2px 1px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.g-chess-timeline::-webkit-scrollbar { display: none; }
.g-chess-timeline button { flex: none; display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 3px 9px; border: 1px solid transparent; border-radius: 7px;
  background: rgb(255 255 255 / .06); color: var(--text); font: 700 12px/1 var(--display); }
.g-chess-timeline button.selected { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.g-chess-timeline button:disabled { opacity: .55; }
.g-chess-timeline small { color: var(--faint); font: 700 10px/1 var(--display); }
.g-chess-history-note { color: var(--muted); font: 500 11px/28px var(--display); }
.g-chess-confirm-resign { color: #ff9d90; border-color: #ff9d90; }
.g-chess-main > .g-side .g-reactions { flex: none; }
.g-reactions { position: relative; z-index: 8; }
.g-reactions[hidden] { display: none; }
.g-react-trigger { display: grid; place-items: center; width: 36px; height: 36px;
  padding: 0; border: 1px solid var(--line-strong);
  border-radius: 50%; background: rgb(0 0 0 / .36); color: var(--gold);
  cursor: pointer; touch-action: manipulation; }
.g-react-picker { position: absolute; z-index: 10; top: calc(100% + 6px); right: 0;
  display: flex; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid var(--line-strong);
  border-radius: 14px; background: #231914; box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
.g-react-picker[hidden] { display: none; }
.g-react-row { display: flex; gap: 2px; }
.g-react-row button { display: grid; place-items: center; }
.g-react-picker button { flex: none; width: 43px; height: 43px; padding: 0; border: 0;
  border-radius: 9px; background: transparent; font-size: 23px; cursor: pointer; }
.g-react-picker button:active { background: var(--gold-soft); }
.g-react-feed { position: absolute; top: calc(100% + 8px); right: 0; width: min(240px, 64vw);
  display: grid; justify-items: end; gap: 5px; pointer-events: none; }
.g-react-bubble { max-width: 150px; display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgb(22 17 16 / .9); box-shadow: 0 6px 16px rgb(0 0 0 / .3);
  color: var(--text); animation: g-react-appear 220ms ease-out both; }
.g-react-emoji { font-size: 20px; line-height: 1; }
.g-react-sender { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 11px/1.2 var(--display); }
@keyframes g-react-appear { from { opacity: 0; transform: translateY(7px) scale(.95); } }
@media (max-width: 360px) { .g-react-picker, .g-react-row { gap: 0; } .g-react-picker { padding: 3px; }
  .g-react-picker button { width: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .g-react-bubble { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-chess-timeline { scroll-behavior: auto; }
}
.g-pot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-pot b { font: 700 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.g-pot b .unit { color: var(--gold); margin-right: 2px; }
.g-pot .g-note { text-align: right; }
.g-slip { display: grid; gap: 10px; }

/* ---------- Public rounds and the shared lobby (games/public.js, games/social.js) ---------- */
.g-where { display: grid; gap: 8px; }
.g-where-opt {
  appearance: none; cursor: pointer; color: inherit; text-align: left; width: 100%;
  display: grid; gap: 4px; min-height: 58px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgb(0 0 0 / 0.25);
  transition: border-color 140ms ease-out, background-color 140ms ease-out, transform 120ms var(--ease-out);
}
.g-where-opt:active { transform: scale(0.98) translateZ(0); }
.g-where-opt b { font: 700 15px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-where-opt small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-where-opt[aria-checked="true"] { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold) inset; }
.g-where-opt[aria-checked="true"] b { color: var(--gold); }
.g-where-opt:disabled { opacity: 0.5; cursor: default; }
.sheet .g-where { margin-bottom: 4px; }

.g-refuse {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 8px 8px 14px; border-radius: 14px;
  background: rgb(4 10 8 / 0.9); border: 1px solid rgb(245 201 90 / 0.35);
}
.g-refuse-text { display: grid; gap: 3px; min-width: 0; }
.g-refuse-text b { font: 700 14px/1.2 var(--display); }
.g-refuse-text small { color: var(--muted); font-size: 12px; }
.g-refuse .btn { min-height: 44px; padding: 0 14px; white-space: nowrap; }
.g-refuse-slot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; }
.g-refuse-slot[hidden] { display: none; }
.g-wheelpage[data-refused="1"] .g-rack, .g-wheelpage[data-refused="1"] .g-controls { visibility: hidden; }

.g-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.g-fx-canvas { position: absolute; left: 0; top: 0; }
.g-fx-feed { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.g-fx-feed[data-place="top-right"] { align-items: flex-end; }
.g-fx-feed[data-place="bottom-left"] { top: auto; bottom: 8px; flex-direction: column-reverse; }
/* Moon: top right before the climb; while it climbs and after the crash the readout owns the top,
   so other riders' chips move to the bottom right. Hidden on the compact sheet. */
.g-moon[data-phase="live"] .g-fx-feed, .g-moon[data-phase="result"] .g-fx-feed { top: auto; bottom: 8px; flex-direction: column-reverse; }
.g-moon[data-fit="compact"] .g-fx-feed { display: none; }
/* The smallest sheets, where the tab bar under the game takes the room: the players pill floats over
   the chart like the casino tables' pill and the round history steps aside, so Bet stays on screen. */
@media (max-height: 440px) {
  .g-moon { position: relative; }
  .g-moon > .g-strip { position: absolute; top: 6px; right: 6px; z-index: 6; min-height: 0; }
  .g-moon > .g-strip > .g-history { display: none; }
  .g-moon > .g-strip :is(.g-people, .tc-btn) { background: rgb(4 10 8 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.g-fx-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 10px 0 3px;
  border-radius: 999px; background: rgb(4 10 8 / 0.84); border: 1px solid rgb(245 201 90 / 0.3);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
  font: 700 12px/1 var(--display); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
  animation: g-fx-in 260ms var(--ease-out) both;
}
.g-fx-chip.out { opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity 240ms ease-out, transform 240ms ease-out; }
/* The name shrinks first; "won $12,345 ×40" keeps its full width. */
.g-fx-text { display: inline-flex; align-items: baseline; gap: 0.3em; min-width: 0; overflow: hidden; }
.g-fx-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.g-fx-what { flex: none; }
.g-fx-text b { color: var(--text); }
.g-fx-text em { font-style: normal; color: var(--gold); }
.g-fx-chip.win { border-color: rgb(98 206 122 / 0.5); }
.g-fx-chip.win em { color: var(--ready); }
.g-fx-chip.me { border-color: var(--gold); }
/* Another player's table-chat line (games/social.js chatChip): one line, a tap opens the table chat. */
.g-fx-chip.chat { appearance: none; max-width: min(100%, 300px); pointer-events: auto; cursor: pointer; border-color: rgb(255 255 255 / 0.24); }
.g-fx-chip.chat .g-fx-text { align-items: center; }
.g-fx-chip.chat .g-fx-name { flex: none; }
.g-fx-say { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 12.5px/1.2 var(--body); color: var(--text); }
.g-react-feed .g-fx-chip.chat { max-width: 100%; }
.g-fx-av {
  --hue: 42;
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 var(--display); color: #11160f;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 80% 78%), hsl(var(--hue) 62% 55%));
  box-shadow: 0 0 0 1.5px rgb(245 201 90 / 0.7);
}
/* A player's avatar in a chip (AVATARS): a thin ring keeps it inside the 26 px chip. */
.g-fx-face.avatar.av:not([class*=" fr-"]) { box-shadow: 0 0 0 1.5px rgb(245 201 90 / 0.7); }
@keyframes g-fx-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } }
.g-zone.bump { animation: g-bump 520ms ease-out; }
@keyframes g-bump { 35% { box-shadow: inset 0 0 0 2px rgb(245 201 90 / 0.85), 0 0 18px rgb(245 201 90 / 0.35); } }

/* Wheel result: winners over the lower wheel, coins fly to them from the winning sector. */
.g-winners { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; padding: 0 8px; }
.g-winner {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 4px; border-radius: 999px; min-width: 0;
  background: rgb(4 10 8 / 0.86); border: 1px solid rgb(98 206 122 / 0.45); box-shadow: 0 6px 16px rgb(0 0 0 / 0.4);
  font: 700 12.5px/1 var(--display); color: var(--ready); white-space: nowrap; font-variant-numeric: tabular-nums;
  animation: g-fx-in 300ms var(--ease-out) both; animation-delay: var(--delay, 0ms);
}
.g-winner.me { border-color: var(--gold); color: var(--gold); }
.g-winner .g-fx-av { width: 22px; height: 22px; }
.g-winner.more { padding: 0 10px; color: var(--muted); border-color: var(--line); }

.g-live-card .g-public-tag { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .g-fx-chip, .g-winner { animation: none; }
  .g-fx-chip.out { transition: none; }
  .g-zone.bump { animation: none; }
}

@media (hover: hover) {
  .g-live-card:hover, .g-start-game:hover, .g-zone:hover:not(:disabled) { border-color: var(--line-strong); }
  .g-chip-btn:hover, .g-control:hover:not(:disabled), .g-people:hover { border-color: var(--line-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .g-status.live::before, .g-spinner { animation: none; }
  .g-piece { transition: none; }
  .g-wheel-layer, .g-bboard, .g-wbottom, .g-rack-chip { transition: none !important; }
}

/* iOS: tappable controls keep a permanent layer (translateZ(0)) and 3D :active/keyframes, so WebKit
 * never drops their layer when a press or an entrance ends (tests/test_ios_layers_static.py). */
.g-chip-btn, .g-people, .g-zone, .g-control, .g-live-card, .g-upsell, .g-start-game, .gf-chip, .gf-tile, .gf-hs, .g-where-opt { transform: translateZ(0); }