/* GAMEMODE · game mode. The desktop screen is the Party Night mock's state 3 (the founder's favourite, ADDENDUM §0),
   copied from concepts/party/party.css and extended: the §8c game picker, the §4 phone layout (friends strip, tray,
   keypad, sticky 56px button), §6 watching, §8 emote bubbles and the brag Share pill; §8d three columns ≥ 1024 wide
   (sidebar · a stage as big as the screen · rail); §8e the chat overlay's corner; §8f the top bar TIME LEFT · WINNER
   GETS · YOUR MONEY (the pot lives only there).
   Prefixes: .gm- .hud- .tray- .fr- .watch- .kp- (plus the mock's own names: .game .stage-col .screen .gpick .gp
   .controls .bet-dock .qualify .rail .rank .row .rail-prize .rail-hint .final-banner .countdown-big .out-note). */

#app.screen-game { padding-top: 12px; padding-bottom: 24px; }
/* in game mode toasts drop in under the top bar, so they never sit on the big button or the tray */
body[data-screen="game"] #toasts { top: calc(var(--bar-h) + 12px); bottom: auto; left: auto; right: 24px; transform: none; width: min(380px, 40vw); justify-items: end; }
@media (max-width: 700px) { body[data-screen="game"] #toasts { top: calc(var(--bar-h) + 8px); left: 50%; right: auto; transform: translateX(-50%); width: min(92vw, 520px); justify-items: center; } }

/* phone-only / desktop-only pieces (phones = ≤700px, same as dom.isPhone) */
.gm-phone, .gm-phone-i { display: none !important; }

/* ---------- the two-number top bar ---------- */
.bar.is-game { background: rgba(13, 10, 28, .86); border-bottom-color: color-mix(in srgb, var(--pc) 30%, transparent); }
.hud { display: flex; align-items: stretch; gap: 10px; margin: 0 auto; }
.hud-box {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-width: 190px; height: 56px; padding: 0 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--night-2);
  border: 1px solid var(--line-2);
  animation: drop .55s var(--spring) both;
  overflow: hidden;
}
.hud-box + .hud-box { animation-delay: .08s; }
.hud-l { display: flex; align-items: center; gap: 6px; font: 800 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hud-l .tag { font-size: 9px; padding: 2px 5px; }
.hud-row { display: flex; align-items: baseline; gap: 10px; }
.hud-money b, .hud-clock b, .hud-pot b { font: 800 25px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hud-ic { display: none; }
.hud-rank { display: inline-block; font: 800 13px/1 var(--f-ui); padding: 4px 7px; border-radius: 8px; background: var(--night-3); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hud-rank:empty, .hud-rank-up { display: none !important; }
/* the pot (ADDENDUM §8f): WINNER GETS, gold, in the centre, and only here */
.hud-pot { appearance: none; cursor: default; color: var(--ink); text-align: left; align-items: center; min-width: 200px; border-color: rgba(255,200,61,.34); background: linear-gradient(135deg, rgba(255,200,61,.16), rgba(255,200,61,.04)), var(--night-2); }
.hud-pot .hud-l { color: #E6BE5A; }
.hud-pot b { color: var(--gold); }
.hud-l-short { display: none; }
.hud-pot.bump b { animation: bump .5s var(--spring); }
.hud-money.flash-up { animation: flashUp .7s var(--out); }
.hud-money.flash-down { animation: flashDown .5s var(--out); }
@keyframes flashUp { 0% { box-shadow: inset 0 0 0 2px var(--go), 0 0 26px rgba(43,216,129,.5); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes flashDown { 0% { transform: translateY(2px); } 100% { transform: none; } }
/* §8f: the money itself pops green on a win and dips on a loss */
.hud-money b { display: inline-block; transform-origin: left center; }
.hud-money.flash-up b { animation: moneyPop .75s var(--spring); }
.hud-money.flash-down b { animation: moneyDip .55s var(--out); }
@keyframes moneyPop { 0% { color: var(--go); transform: none; } 30% { color: var(--go); transform: scale(1.14); text-shadow: 0 0 22px rgba(43,216,129,.65); } 70% { color: var(--go); } 100% { transform: none; } }
@keyframes moneyDip { 0% { transform: none; } 30% { transform: translateY(3px) scale(.97); color: #FFB3C0; } 100% { transform: none; } }
.hud-clock { min-width: 150px; align-items: flex-start; }
.clock-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); }
.clock-bar i { display: block; height: 100%; width: 100%; background: var(--grape); transform-origin: left; transition: transform .2s linear; }
body.final .hud-clock { border-color: var(--hot); background: linear-gradient(180deg, rgba(255,79,110,.22), rgba(255,79,110,.06)), var(--night-2); }
body.final .hud-clock b { color: #fff; }
body.final .hud-clock .hud-l, body.final .hud-clock .hud-ic { color: #FFB3C0; }
body.final .clock-bar i { background: var(--hot); }
.hud-clock.pulse b { animation: tickPulse .5s var(--out); }
@keyframes tickPulse { 0% { transform: scale(1.18); } 100% { transform: none; } }
.bar-spacer { width: 44px; flex: none; }
.float-delta { position: absolute; right: 12px; top: 8px; font: 800 13px/1 var(--f-ui); color: var(--go); pointer-events: none; animation: rise 1.1s var(--out) forwards; }

/* ---------- layout ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "stage rail"; gap: 22px; align-items: start; }
.stage-col { grid-area: stage; min-width: 0; scroll-margin-top: calc(var(--bar-h) + 12px); }

/* ---------- PICK A GAME: its own section above the game, one big tile per game (ADDENDUM §8c) ---------- */
.gpick { margin-bottom: 10px; }
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: 0 2px 6px 4px; }
.gp-head .icon-btn { width: 36px; height: 36px; }
.gp-head .label { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.gpick.is-watch .gp-head .label { color: var(--ink-2); }
.gp-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.gp-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.gp {
  appearance: none; cursor: pointer; position: relative; min-width: 0; height: 84px; margin-bottom: 4px; padding: 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 18px; background: var(--night-2); border: 2px solid var(--line-2); color: var(--ink-2);
  font: 800 15px/1 var(--f-ui); white-space: nowrap;
  box-shadow: 0 4px 0 var(--edge-dark);
  transition: transform .1s var(--out), box-shadow .1s var(--out), border-color .15s, background .15s, color .15s, opacity .2s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.gp span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gp svg { width: 28px; height: 28px; flex: none; }
.gp:hover { border-color: var(--line-3); color: var(--ink); }
.gp:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge-dark); }
.gp.on {
  color: #fff; border-color: #A391FF;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 60%), var(--grape);
  box-shadow: 0 4px 0 var(--grape-edge), 0 12px 26px -10px rgba(123,97,255,.75);
}
.gp.on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 3px rgba(43,216,129,.25); }
.gp.on:active { box-shadow: 0 1px 0 var(--grape-edge); }
.gpick.is-busy .gp:not(.on) { opacity: .5; }
.gp[aria-disabled="true"] { cursor: default; }
.gp[aria-disabled="true"]:active { transform: none; box-shadow: 0 4px 0 var(--edge-dark); }
.gpick.is-watch .gp:not(.on) { opacity: .4; }
.gpick.is-watch .gp.on {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), color-mix(in srgb, var(--pc) 70%, var(--night-2));
  border-color: var(--pc); box-shadow: 0 4px 0 color-mix(in srgb, var(--pc) 45%, #0E0A22); color: #140F2B;
}

/* ---------- the game card ---------- */
.screen {
  position: relative; border-radius: 30px; padding: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 8%, transparent), transparent 40%), var(--night-1);
  border: 1.5px solid color-mix(in srgb, var(--pc) 26%, var(--line));
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  transition: border-color .3s;
}
.screen.is-watch { border: 2px solid var(--pc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 14%, transparent), 0 40px 80px -40px rgba(0,0,0,.8); }
.screen.watch-in { animation: watchIn .45s var(--spring) both; }
@keyframes watchIn { from { transform: scale(.97); opacity: .4; } }

/* watching someone: their header */
.watch-bar { display: flex; align-items: center; gap: 12px; margin: -4px -4px 14px; padding: 10px 10px 10px 12px; border-radius: 20px; background: color-mix(in srgb, var(--pc) 18%, var(--night-2)); animation: feedIn .3s var(--out); }
.watch-av { flex: none; display: grid; place-items: center; }
.watch-bar .who { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.watch-bar .who b { font: 800 16px/1.15 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.watch-bar .who span { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 13px/1.2 var(--f-ui); color: var(--ink-2); }
.watch-bar .who em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-bar .live { flex: none; }
.watch-bar .who b { display: flex; align-items: center; gap: 8px; }
.watch-bar .who b .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.watch-money { flex: none; margin-left: auto; font: 800 18px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.watch-back { flex: none; margin-left: 6px; }
.watch-back .ic { margin-left: -3px; }
.watch-out { display: flex; align-items: center; gap: 10px; margin: -4px -4px 10px; padding: 8px 14px 8px 10px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px dashed var(--line-3); animation: feedIn .3s var(--out); }
.watch-out b { font: 800 14.5px/1.2 var(--f-ui); white-space: nowrap; }
.watch-out span { font: 600 13px/1.2 var(--f-ui); color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the stage (each game fills [data-stage]) + GAMEMODE's overlay stack in the bottom-right corner */
.gm-stage-wrap { position: relative; touch-action: pan-y; }
.gm-stage { position: relative; }
.gm-stage-wrap.gm-in { animation: gmIn .28s var(--out); }
.gm-stage-wrap.gm-in-r { animation: gmInR .32s var(--out); }
.gm-stage-wrap.gm-in-l { animation: gmInL .32s var(--out); }
@keyframes gmIn { from { opacity: .35; transform: scale(.99); } }
@keyframes gmInR { from { opacity: .3; transform: translateX(34px); } }
@keyframes gmInL { from { opacity: .3; transform: translateX(-34px); } }
.gm-ov { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gm-ov-br { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100% - 120px); }
.countdown-big { font: 900 64px/1 var(--f-display); color: var(--hot); opacity: .92; pointer-events: none; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(255,79,110,.45); }
.countdown-big.tick { animation: tickPulse .5s var(--out); }
.gm-watching-you { appearance: none; cursor: pointer; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(13,10,28,.8); border: 1px solid var(--line-2); font: 700 13px/1.2 var(--f-ui); color: var(--ink-2); animation: feedIn .3s var(--out); }
.gm-watching-you:hover { border-color: var(--line-3); color: var(--ink); }
.gm-sh-amt { font-style: normal; }
.gm-watching-you span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-wy-short { display: none; }
.gm-sheet-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -8px 0 10px; font: 700 13px/1.3 var(--f-ui); color: var(--ink-3); }
.gm-share {
  pointer-events: auto; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px 0 12px; border-radius: 999px; margin-bottom: 3px;
  background: color-mix(in srgb, var(--go) 16%, rgba(13,10,28,.9)); border: 1px solid rgba(43,216,129,.45); color: var(--go);
  font: 800 13.5px/1 var(--f-ui); font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 rgba(19,135,78,.6);
}
.gm-share { position: relative; }
.gm-share::before { content: ""; position: absolute; inset: -5px -3px; }   /* a 44px+ tap area around the small pill */
.gm-share:active { transform: translateY(3px); box-shadow: none; }
.gm-share.pop { animation: winPop .45s var(--spring); }
/* per-game corner (integrator): keep the pills off what you tap or read. Plinko: under the history chips, where the
   board is narrow (the bottom row is the buckets). Dice: its track runs along the bottom, so top-left, which is empty.
   Keno moves itself to the top in games-k.css. */
.gm-stage-wrap:has(.plinko-stage) .gm-ov-br { top: 48px; bottom: auto; }
.gm-stage-wrap:has(.dice-stage) .gm-ov-br { top: 12px; bottom: auto; left: 12px; right: auto; align-items: flex-start; }

/* controls: BET + the game's control, the info row, the big button */
.controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; margin-top: 12px; }
.screen.is-watch .gm-share { display: none; }
.controls .odds, .bet-dock { grid-column: 1 / -1; }
/* the foot: the big button + the eligibility bar (pinned at the bottom of the §8d sidebar when it has to scroll) */
.gm-foot { margin-top: 12px; }
.gm-control { min-width: 0; }
.gm-control:empty { display: none; }
.odds:empty { display: none; }
.tray { min-width: 0; }
.tray.is-locked .inp { opacity: .7; }
.bet-dock .btn-xl { height: 68px; font-size: 20px; }
/* watching: their button is a replica, drawn as clearly someone else's (their colour, outlined, an eye) */
.btn.replica {
  --bg: color-mix(in srgb, var(--pc) 12%, var(--night-1)); --edge: color-mix(in srgb, var(--pc) 30%, var(--night-0)); --fg: var(--ink-2);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 55%, transparent), 0 4px 0 var(--edge); filter: none; opacity: .85;
}
.btn.replica .ic { color: var(--pc); }
.bet-dock .btn, .gm-dock .btn { gap: 12px; }
.gm-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen.is-watch .quick, .screen.is-watch .inp, .screen.is-watch .stepper { pointer-events: none; }
.screen.is-watch .q { opacity: .55; }
.stepper.flash { animation: changed .8s var(--out); }

/* the eligibility bar */
.qualify { margin-top: 10px; display: grid; grid-template-columns: auto auto minmax(60px, 1fr) auto; grid-template-areas: "ico text bar num"; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font: 700 14px/1.3 var(--f-ui); color: var(--ink-2); }
.qualify .q-ico { grid-area: ico; width: 26px; height: 26px; }
.qualify .q-text { grid-area: text; }
.qualify .q-num { grid-area: num; }
.qualify .q-bar { grid-area: bar; }
.qualify b { color: var(--ink); }
.q-bar { display: block; height: 10px; border-radius: 99px; background: var(--night-3); overflow: hidden; }
.q-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--grape), #A895FF); transition: width .4s var(--out); }
.q-num { font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.qualify.done { background: var(--go-soft); border-color: rgba(43,216,129,.3); }
.qualify.done .q-bar i { background: var(--go); }
.qualify.urgent:not(.done) { border-color: var(--hot); background: var(--hot-soft); }
.out-note { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--ink-2); font: 700 14px/1.4 var(--f-ui); }

/* ---------- the party, ranked (desktop rail + the phone party sheet) ---------- */
.rail {
  grid-area: rail; position: sticky; top: calc(var(--bar-h) + 16px); padding: 18px 14px 14px; border-radius: 28px;
  display: flex; flex-direction: column; min-width: 0;
  max-height: calc(100vh - var(--bar-h) - 34px); max-height: calc(100dvh - var(--bar-h) - 34px);
}
.rail > * { flex: none; }
/* the ranked list is the part that scrolls (inside the rail) when a big party doesn't fit: never the help lines */
.rail .rank { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--night-4) transparent; margin: -8px -6px 0; padding: 8px 6px 4px; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 12px; }
.rail-head h3 { margin: 0; font: 800 16px/1 var(--f-display); letter-spacing: -.02em; }
.rail-head span { font: 700 12.5px/1 var(--f-ui); color: var(--ink-3); }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gm-list .row {
  --pc: var(--grape);
  position: relative; display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 10px 9px 8px; border-radius: 18px; cursor: pointer; border: 1.5px solid transparent;
  background: rgba(255,255,255,.025);
  transition: background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.gm-list .row:hover { background: rgba(255,255,255,.06); }
.gm-list .row:active { background: rgba(255,255,255,.08); }
.gm-list .row.me { background: color-mix(in srgb, var(--grape) 10%, transparent); border-color: color-mix(in srgb, var(--grape) 55%, transparent); }
.gm-list .row.watching { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.gm-list .row .place { font: 800 14px/1 var(--f-display); color: var(--ink-3); text-align: center; }
.gm-list .row .place svg { width: 22px; height: 22px; display: block; }
.gm-list .row.is-lead .place { color: var(--gold); }
.gm-list .row.out { opacity: .55; }
.gm-av { position: relative; display: grid; place-items: center; }
.gm-list .av { width: 44px; height: 44px; }
.gm-av::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--go); opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; pointer-events: none; }
.gm-av.talk::after { opacity: 1; transform: scale(1); }
.gm-list .row .who { min-width: 0; }
.gm-list .row .who b { display: flex; align-items: center; gap: 6px; font: 800 15px/1.2 var(--f-ui); white-space: nowrap; min-width: 0; }
.gm-list .row .who .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* your row: "You" + tags, then your @username on its own small line (the rail is too narrow to show it beside them) */
.gm-list .row.me .who b { flex-wrap: wrap; row-gap: 1px; }
.gm-list .row.me .who b .un { order: 9; flex: 0 0 100%; max-width: 100%; }
.gm-list .row.me .who b .un::before { content: none; }
/* "Played 3×" drops to its own line when the row is narrow, so the username never shrinks to "t…" */
.gm-list .row.has-met .who b { flex-wrap: wrap; row-gap: 3px; }
.gm-list .row.has-met .who b .tag.met { order: 9; }
.gm-list .row .who small { display: block; margin-top: 3px; font: 600 12.5px/1.2 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-list .row .who small.w { color: var(--go); }
.gm-list .row .who small.warn { color: var(--gold); }
.gm-list .row .who small.live-t { color: var(--ink-2); }
.gm-list .row .amt { text-align: right; font: 800 16px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.gm-list .row .amt small { display: block; margin-top: 5px; font: 700 11.5px/1 var(--f-ui); color: var(--ink-3); }
.cant { color: var(--gold); font-weight: 800; white-space: nowrap; }
.gm-list .row .amt small.cant { color: var(--gold); }
.gm-list .row .eye { position: absolute; left: 40px; top: -8px; font: 800 10px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: var(--pc); color: #140F2B; opacity: 0; transform: translateY(4px); transition: .18s var(--out); pointer-events: none; }
.gm-list .row:hover .eye, .gm-list .row.watching .eye, .gm-list .row:focus-visible .eye { opacity: 1; transform: none; }
.gm-list .row.me .eye { background: var(--grape); color: #fff; }
.row-eyes { position: absolute; right: 8px; top: -10px; z-index: 1; cursor: help; }
.row-eyes .eyes-badge:hover { border-color: var(--line-3); color: var(--ink); }
.row-eyes:empty { display: none; }
/* 6–8 players: compact rows (smaller Chippers), so the Winner gets card and both help lines still fit */
.rank.dense { gap: 4px; }
.rank.dense .row { grid-template-columns: 22px 36px minmax(0, 1fr) auto; padding-top: 5px; padding-bottom: 5px; }
.rank.dense .av, .rank.dense .av .chip { width: 36px; height: 36px; }
.rail.is-dense .rail-prize { margin-top: 10px; padding: 10px 14px; }
.rail.is-dense .rail-hint { margin-top: 8px; }
.rail-prize { margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,200,61,.16), rgba(255,200,61,.04)); border: 1px solid rgba(255,200,61,.26); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rail-prize span { font: 700 13px/1.35 var(--f-ui); color: var(--ink-2); }
.rail-prize span small { display: block; color: var(--ink-3); font-weight: 600; font-size: 12px; }
.rail-prize b { font: 800 22px/1 var(--f-display); color: var(--gold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rail-hint { margin: 10px 6px 0; font: 600 12.5px/1.4 var(--f-ui); color: var(--ink-3); text-align: center; }

/* final two: pinned head-to-head with each side's crowd of watchers */
.gm-final2 { margin: 0 0 10px; padding: 8px 8px 9px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--line-2); animation: seatIn .45s var(--spring) both; }
.gm-f2-h { margin: 2px 0 7px; text-align: center; font: 800 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.gm-f2-row { display: flex; align-items: stretch; gap: 6px; }
.gm-f2-side {
  flex: 1; min-width: 0; appearance: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 2px 8px; padding: 6px 8px; text-align: left;
  border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background: color-mix(in srgb, var(--pc) 13%, var(--night-1)); color: var(--ink);
}
.gm-f2-side:active { transform: translateY(2px); }
.gm-f2-side .gm-av { grid-row: span 2; }
.gm-f2-side b { display: grid; gap: 2px; min-width: 0; font: 800 13.5px/1.15 var(--f-ui); }
.gm-f2-side b .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-f2-side b .num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.gm-f2-crowd { grid-column: 2; display: flex; align-items: center; gap: 5px; min-height: 18px; min-width: 0; }
.gm-f2-crowd em { font-style: normal; font: 700 12px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-vs { align-self: center; font: 900 14px/1 var(--f-display); color: var(--ink-2); letter-spacing: -.02em; }

/* party chat (ADDENDUM §8e): the fading overlay in the stage's bottom-left corner (css/chat.css .cov). Its left edge
   clears the Chipper that sits bottom-left on most stages; stages without one there start it at the corner. */
.gm-stage-wrap { --cov-left: 112px; --cov-bottom: 16px; }
.gm-stage-wrap:has(.dice-stage), .gm-stage-wrap:has(.plinko-stage), .gm-stage-wrap:has(.keno) { --cov-left: 16px; }
.gm-stage-wrap:has(.mines-stage) { --cov-left: 16px; --cov-bottom: 100px; }     /* above the Chipper, clear of the board */
.gm-stage-wrap:has(.crash-stage) { --cov-bottom: 40px; }                         /* above the time axis labels */

/* ---------- final minute banner ---------- */
.final-banner {
  display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 16px; border-radius: 22px;
  background: linear-gradient(180deg, #FF6A85, var(--hot)); color: #fff;
  box-shadow: 0 5px 0 var(--hot-edge), 0 30px 60px -20px rgba(255,79,110,.6);
  animation: bannerIn .6s var(--spring) both;
}
.final-banner.leave { animation: bannerOut .4s var(--out) forwards; }
@keyframes bannerIn { from { transform: translateY(-40px) scale(.9); opacity: 0; } }
@keyframes bannerOut { to { transform: translateY(-30px); opacity: 0; } }
.final-banner b { display: block; font: 900 24px/1 var(--f-display); letter-spacing: -.02em; }
.final-banner span { display: block; margin-top: 4px; font: 700 14.5px/1.3 var(--f-ui); color: rgba(255,255,255,.92); }

/* ---------- 3 · 2 · 1 · Go! ---------- */
.gm-cd .cd-chips .chip { animation: none; }
.gm-cd-chip { display: block; animation: bob 1.2s ease-in-out infinite; }

/* ---------- emote bubbles live above everything, anchored to a Chipper's box ---------- */
.gm-bubbles { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 56; pointer-events: none; }
.gm-bub-at { position: absolute; pointer-events: none; }
.gm-bub-at.is-below > .bubble { bottom: auto; top: calc(100% - 4px); }
.gm-bub-at.is-below > .bubble::after { top: auto; bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- the numeric keypad sheet (phones) ---------- */
.kp { display: grid; gap: 12px; padding-bottom: 4px; }
.kp-show { text-align: center; padding: 2px 0 0; }
.kp-show b { display: block; font: 800 44px/1.05 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.kp-show b.typing { color: var(--ink); }
.kp-show b.typing::after { content: ""; display: inline-block; width: 3px; height: .8em; margin-left: 4px; vertical-align: -.05em; background: var(--grape); animation: askPulse 1s steps(2) infinite; }
.kp-show span { display: block; margin-top: 8px; font: 700 14px/1.3 var(--f-ui); color: var(--ink-3); }
.kp-show span.warn { color: var(--gold); }
.kp-quick { margin: 0; }
.kp-quick .q { height: 44px; font-size: 15px; }
.kp-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kp-key {
  appearance: none; border: 0; cursor: pointer; height: 58px; margin-bottom: 4px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), var(--night-3); color: var(--ink);
  font: 800 25px/1 var(--f-ui); display: grid; place-items: center; box-shadow: 0 4px 0 var(--edge-dark);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.kp-key:active { transform: translateY(4px); box-shadow: none; }
.kp-go { height: 56px; }

/* ---------- responsive ---------- */
.game { --railw: 340px; --gmgap: 22px; }
@media (max-width: 1180px) { .game { --railw: 300px; grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 980px) {
  .game { --railw: 272px; --gmgap: 16px; grid-template-columns: minmax(0, 1fr) 272px; gap: 16px; }
  .gp { height: 74px; font-size: 13.5px; gap: 6px; }
  .gp svg { width: 24px; height: 24px; }
  .controls { grid-template-columns: minmax(0, 1fr); }
  .qualify { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text num" "bar bar"; gap: 8px 12px; }
  .qualify .q-ico { display: none; }
}
/* short landscape screens (a phone on its side): the big button is pinned at the bottom of the GAME column, in thumb
   reach, and never over the party rail (fix) */
@media (max-height: 560px) and (min-width: 701px) {
  #app.screen-game { padding-bottom: calc(var(--dock-h) + 16px + var(--safe-b)); }
  .bet-dock { display: none !important; }
  .gm-dock {
    display: flex !important; justify-content: flex-start; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
    padding: 10px 0 calc(8px + var(--safe-b)) calc(max(0px, (100vw - 1280px) / 2) + var(--gutter) + env(safe-area-inset-left, 0px)); pointer-events: none;
    background: linear-gradient(180deg, rgba(13,10,28,0), rgba(13,10,28,.92) 40%);
  }
  .gm-dock .btn { pointer-events: auto; width: calc(100% - max(0px, (100vw - 1280px) / 2) - var(--gutter) - var(--railw) - var(--gmgap)); height: 56px; font-size: 18px; }
  .gm-dock .gm-dock-q { display: none; }
  .rail { min-height: 0; }
}

/* ---------- ≥ 1024 wide (ADDENDUM §8d): three columns, the stage as big as the screen ----------
   [sidebar: PICK A GAME 3×2 + BET + the game's control + info row + the big button + eligibility] [stage] [party rail].
   Nothing on the page scrolls: the stage fills the height under the bar; the sidebar scrolls on its own if it must. */
@media (min-width: 1024px) and (min-height: 561px) {
  body[data-screen="game"] main#app { max-width: 1600px; padding: 14px var(--gutter) 14px; height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h)); }
  .game { --side: clamp(280px, 21vw, 330px); --railw: clamp(280px, 21vw, 330px); --gmgap: 18px; height: 100%; grid-template-columns: minmax(0, 1fr) var(--railw); gap: var(--gmgap); align-items: stretch; }
  .stage-col { min-height: 0; height: 100%; }
  .screen {
    height: 100%; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--gmgap);
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .screen.is-watch { border: 0; box-shadow: none; }
  .screen.watch-in { animation: none; }
  .screen.watch-in .gm-view { animation: watchIn .45s var(--spring) both; }
  /* the sidebar card */
  .gm-ctl {
    grid-column: 1; grid-row: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--night-4) transparent;
    padding: 14px; border-radius: 30px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 7%, transparent), transparent 40%), var(--night-1);
    border: 1.5px solid color-mix(in srgb, var(--pc) 22%, var(--line));
  }
  .gm-ctl { display: flex; flex-direction: column; padding-bottom: 0; }
  .gm-ctl > * { flex: none; }
  /* the foot (big button + eligibility) is pinned at the bottom when the sidebar must scroll: Bet never scrolls away */
  .gm-foot { position: sticky; bottom: 0; z-index: 3; margin-top: 12px; padding-bottom: 14px; background: var(--night-1); }
  .gm-foot::before { content: ""; position: absolute; left: -14px; right: -14px; bottom: 100%; height: 28px; background: linear-gradient(to top, var(--night-1), transparent); pointer-events: none; opacity: 0; transition: opacity .2s; }
  .gm-ctl.is-scrolly .gm-foot::before { opacity: 1; }
  .gm-ctl .gpick { margin-bottom: 6px; }
  .gm-ctl .gp-head { margin: 0 2px 6px 6px; }
  .gm-ctl .gp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gm-ctl .gp { height: 68px; gap: 6px; font-size: 14px; border-radius: 16px; }
  .gm-ctl .gp svg { width: 24px; height: 24px; }
  .gm-ctl .controls { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; }
  /* §4: the big button never moves between states. Each info label keeps room for two lines (a short one sits right
     above its number), so a label that gets shorter mid-ride (Crash) or on another game doesn't shift the button */
  .gm-ctl .odds span { display: flex; align-items: flex-end; min-height: 2em; }
  .gm-ctl .bet-dock .btn-xl { height: 64px; font-size: 19px; padding: 0 16px; gap: 10px; }
  .gm-ctl .bet-dock .btn.long { font-size: 17px; }
  .gm-ctl .bet-dock .btn.long .kbd { display: none; }
  .gm-ctl .keno-risk button { gap: 4px; padding: 0 3px; font-size: 14px; }
  .gm-ctl .qualify { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text num" "bar bar"; gap: 8px 12px; padding: 12px 14px; font-size: 13.5px; }
  .gm-ctl .qualify .q-ico { display: none; }
  .gm-ctl .out-note { font-size: 13.5px; }
  /* the stage card: as big as the screen allows; framed in the viewed player's colour */
  .gm-view {
    grid-column: 2; grid-row: 1; min-height: 0; display: flex; flex-direction: column;
    position: relative; border-radius: 30px; padding: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 8%, transparent), transparent 40%), var(--night-1);
    border: 1.5px solid color-mix(in srgb, var(--pc) 26%, var(--line));
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); transition: border-color .3s;
  }
  .screen.is-watch .gm-view { border: 2px solid var(--pc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 14%, transparent), 0 40px 80px -40px rgba(0,0,0,.8); }
  .gm-view > [data-outbar], .gm-view > [data-watchbar] { flex: none; }
  .gm-stage-wrap { flex: 1 1 auto; min-height: 420px; display: flex; flex-direction: column; }
  .gm-stage { flex: 1 1 auto; min-height: 0; }
  .screen .gm-stage > * { height: 100%; }
  .gm-stage-wrap:has(.mines-stage) { --cov-left: 112px; --cov-bottom: 16px; }   /* the big board leaves a band below it */
  .screen .gm-stage > .keno > .keno-stage { height: 100%; }
  /* the party rail fills the column (the list scrolls inside it if a big party needs it). (fix) min-height 0, or 8 players
     with "Played 2×" tags (~670px) stretch the grid row and the whole page scrolls at 1100×690 */
  .rail { position: relative; top: auto; height: 100%; max-height: none; min-height: 0; }
  /* toasts: over the top of the stage column, never on the rail's rows */
  body[data-screen="game"] #toasts { left: 50%; right: auto; transform: translateX(-50%); width: min(440px, 40vw); justify-items: center; top: calc(var(--bar-h) + 22px); }
}
/* short wide screens (1280×720, 1100×800): a tighter sidebar so the controls fit (the foot stays pinned regardless) */
@media (min-width: 1024px) and (min-height: 561px) and (max-height: 860px) {
  /* (fix) at 1280×720 every game's controls fit the 618px sidebar without scrolling, so the pinned foot never sits on
     the info row: smaller game tiles and inputs, and the eligibility line on one row with its numbers under it */
  .gm-ctl { padding-top: 10px; }
  .gm-ctl .gp-head { min-height: 28px; margin-bottom: 4px; }
  .gm-ctl .gp-head .icon-btn { width: 28px; height: 28px; }
  .gm-ctl .gp { height: 46px; gap: 3px; font-size: 13.5px; }
  .gm-ctl .gp svg { width: 19px; height: 19px; }
  .gm-ctl .gp.on::after { top: 5px; right: 5px; width: 7px; height: 7px; }
  .gm-ctl .controls { gap: 8px; margin-top: 4px; }
  .gm-ctl .inp { height: 44px; }
  .gm-ctl .field > label, .gm-ctl .field > .field-l { margin-bottom: 4px; }
  .gm-ctl .odds { padding: 10px 14px; gap: 12px; }
  .gm-ctl .odds span { margin-bottom: 4px; }
  .gm-ctl .odds b { font-size: 17px; }
  .gm-foot { margin-top: 8px; padding-bottom: 10px; }
  .gm-ctl .bet-dock .btn-xl { height: 54px; font-size: 18px; }
  .gm-ctl .qualify { margin-top: 8px; padding: 10px 12px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text text" "bar num"; gap: 6px 10px; }
  .gm-ctl .qualify .q-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* narrower wide screens: 280px sides, tighter gutters (the stage keeps the width), compact party rows */
@media (min-width: 1024px) and (max-width: 1199px) and (min-height: 561px) {
  body[data-screen="game"] main#app { padding-left: 16px; padding-right: 16px; }
  .game { --side: 280px; --railw: 280px; --gmgap: 14px; }
}
@media (min-width: 1024px) and (max-width: 1439px) and (min-height: 561px) {
  .rail { padding: 16px 12px 12px; }
  .gm-list .row { grid-template-columns: 20px 38px minmax(0, 1fr) auto; gap: 8px; padding: 8px 8px 8px 6px; }
  .gm-list .av, .gm-list .av .chip { width: 38px; height: 38px; }
  .gm-list .row .eye { left: 30px; }
  .gm-list .row .who b { gap: 4px; }
  .gm-list .row .amt small { font-size: 11px; }
}

@media (max-width: 700px) {
  .gm-desk { display: none !important; }
  .gm-phone { display: block !important; }
  .gm-phone-i { display: inline-flex !important; }
  #app.screen-game { padding: 8px var(--gutter) calc(var(--gm-dock-h, 110px) + 16px); }

  /* one line (§8f): TIME left · the POT in the middle (gold) · YOUR MONEY right. Founder: "on mobile it also needs to
     be hella clear how much cash you're currently at": your money is the biggest, brightest number on the screen
     (white Unbounded ~30px, a size smaller only for long amounts); the clock and the pot are ~18px so they never
     compete with it. Each tile has a tiny label so a first-timer reads it at a glance. */
  body[data-screen="game"] { --bar-h: 70px; }
  .bar.is-game .brand, .bar.is-game .bar-spacer { display: none; }
  .bar.is-game .bar-in { gap: 0; }
  .hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; gap: 5px; margin: 0; }
  .hud-box { min-width: 0; height: 58px; padding: 0 10px; border-radius: 15px; gap: 4px; }
  .hud-l { font-size: 13px; letter-spacing: .05em; white-space: nowrap; }
  .hud-l-long, .hud-ic { display: none; }       /* the three numbers need the room; the draining bar says "clock" */
  .hud-l-short { display: inline; }
  .hud-row { align-items: center; gap: 6px; }
  .hud-clock { min-width: 0; padding: 0 10px; }
  .hud-clock b, .hud-pot b { font-size: 18px; }
  .hud-pot { min-width: 0; align-items: center; padding: 0 4px; cursor: pointer; }
  .hud-pot b[data-len="9"] { font-size: 16px; }
  .hud-pot b[data-len="10"] { font-size: 15px; }
  .hud-pot:active { transform: translateY(1px); }
  .hud.is-tight .hud-l-pot { display: none; }     /* practice: "Practice pot" → "Practice" (the marker never goes, §2) */
  .hud.is-tight .hud-money .hud-l { letter-spacing: .02em; gap: 6px; }
  .hud.is-tighter .hud-l .delta.gm-phone-i, .hud.is-tighter .hud-row .hud-rank { display: none !important; }
  .hud.is-tighter .hud-l .hud-rank-up:not(:empty) { display: inline-block !important; padding: 2px 6px; text-transform: none; letter-spacing: 0; }
  /* YOUR MONEY: label + the Even/+$/−$ pill on top, the big number + #rank under it */
  .hud-money {
    padding: 0 8px 0 11px; align-items: stretch; gap: 3px;
    border-color: rgba(255,255,255,.2);
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025)), var(--night-2);
    box-shadow: 0 6px 18px -10px rgba(0,0,0,.8);
  }
  .hud-money .hud-l { justify-content: space-between; gap: 8px; color: var(--ink-2); }
  .hud-money .hud-l .tag { display: none; }
  .hud-money .hud-l .delta { font-size: 13px; line-height: 1; padding: 2px 6px; border-radius: 7px; text-transform: none; letter-spacing: 0; }
  .hud-money .delta.down { color: #FFB3C0; background: rgba(255,79,110,.14); }
  .hud-money .hud-row { justify-content: space-between; gap: 6px; }
  .hud-money b { font-size: 32px; color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.16); }
  .hud-money b[data-len="7"] { font-size: 29px; }
  .hud-money b[data-len="8"] { font-size: 26px; }
  .hud-money b[data-len="9"] { font-size: 23px; }
  .hud-money b[data-len="10"] { font-size: 20px; }
  .hud-money .hud-rank { font-size: 13px; padding: 4px 6px; flex: none; }

  .game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "stage"; gap: 0; }

  /* friends strip + Winner gets (+ final two) */
  .gm-top { grid-area: top; min-width: 0; }
  .fr-strip { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 12px; scrollbar-width: none; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
  .fr-strip::-webkit-scrollbar { display: none; }
  .fr {
    --pc: var(--grape);
    flex: 1 0 auto; min-width: 54px; max-width: 104px; appearance: none; cursor: pointer; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 4px 6px; border-radius: 15px;
    background: rgba(255,255,255,.035); border: 1.5px solid transparent; color: var(--ink); scroll-snap-align: start;
    transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent;
  }
  .fr:active { transform: translateY(2px); }
  .fr.me { border-color: color-mix(in srgb, var(--grape) 55%, transparent); background: color-mix(in srgb, var(--grape) 12%, transparent); }
  .fr.watching { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 18%, transparent); }
  .fr.out { opacity: .5; }
  .fr-av { width: 36px; height: 36px; }
  .fr-av .chip { width: 36px; height: 36px; }
  .fr-place { position: absolute; left: -6px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; background: var(--night-1); font: 800 13px/1 var(--f-ui); font-style: normal; color: var(--ink-3); }
  .fr-name { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; font: 800 13px/1.15 var(--f-ui); white-space: nowrap; }
  .fr-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* §2: a clear BOT tag everywhere (practice), right after the name */
  .fr-name .tag { flex: none; font-size: 13px; line-height: 1; padding: 1px 4px; letter-spacing: .02em; border-radius: 5px; }
  .fr-money { font: 800 13px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
  .fr.me .fr-money { color: var(--ink); }
  .fr-eyes { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 5px; border-radius: 999px; background: rgba(13,10,28,.92); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
  .fr-eyes em { font: 800 13px/1 var(--f-ui); font-style: normal; font-variant-numeric: tabular-nums; }
  /* §8f: the strip ends with a small "All" tile (the party sheet); ranks are small and quiet */
  .fr.fr-all { flex: 0 0 50px; min-width: 50px; justify-content: center; gap: 4px; color: var(--ink-2); border: 1.5px dashed var(--line-2); background: transparent; }
  .fr-all-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--night-2); color: var(--ink-2); }
  .gm-top .gm-final2 { margin: 2px 0 8px; padding: 8px; }
  .gm-top .gm-f2-h { display: none; }
  .gm-f2-side .gm-av .chip { width: 36px; height: 36px; }
  .gm-f2-crowd em { font-size: 13px; }
  .gm-sheet .gm-list .row .amt small { font-size: 13px; }
  .gm-sheet .gm-list .row .who b { font-size: 15.5px; }

  /* the picker (§8f): just the tiny PICK A GAME label and six tiles in one row (sound is in the party sheet, chat is
     the pill in the stage corner); hidden while you watch someone, since you can't pick their game */
  .gpick { margin-bottom: 8px; }
  .gp-head { min-height: 0; margin: 2px 0 6px 2px; }
  .gp-tools { display: none; }
  .gpick.is-watch { display: none; }
  .gp-head .label { font-size: 13px; }
  .gp-row { gap: 6px; }
  .gp { height: 66px; gap: 6px; border-radius: 15px; font-size: 13px; letter-spacing: -.01em; padding: 0 2px; }
  .gp svg { width: 24px; height: 24px; }
  .gp.on::after { top: 6px; right: 6px; width: 7px; height: 7px; }

  .screen { padding: 10px; border-radius: 24px; }
  .watch-bar { gap: 10px; margin: -2px -2px 10px; padding: 8px 10px; border-radius: 18px; }
  .watch-bar .who b { font-size: 14.5px; line-height: 1.2; }
  .watch-bar .who b .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .watch-money { font-size: 16px; }
  .watch-av .chip { width: 40px; height: 40px; }
  .watch-back { display: none; }
  .watch-out { margin: -2px -2px 8px; padding: 6px 12px 6px 8px; }
  .watch-out span { display: none; }
  /* one row along the bottom edge, clear of the stage's centre line and its Chipper */
  .gm-ov-br { right: 8px; bottom: 8px; gap: 6px; max-width: calc(100% - 80px); flex-direction: row-reverse; align-items: flex-end; }
  .gm-ov-br > * { flex: none; }
  .gm-wy-long { display: none; }
  .gm-wy-short { display: inline; }
  .gm-watching-you { min-height: 36px; padding: 4px 10px 4px 6px; margin-bottom: 3px; }
  .gm-sh-amt { display: none; }
  .countdown-big { font-size: 46px; }
  .gm-share { height: 36px; margin-bottom: 3px; padding: 0 12px 0 10px; }
  /* per-game corner on phones (integrator): Dice's pills sit top-left in one row; an open Mines board fills the
     stage, so the pills step aside until you cash out (the strip still shows who's watching). */
  .gm-stage-wrap:has(.dice-stage) .gm-ov-br { top: 8px; left: 8px; flex-direction: row; align-items: flex-start; }
  .gm-stage-wrap:has(.mines-stage.is-open) .gm-ov-br > :not(.countdown-big) { opacity: 0; pointer-events: none; }
  .gm-stage-wrap:has(.mines-stage.is-open) .gm-ov-br > *::before { pointer-events: none; }

  /* the tray: steppers + quick chips + the game's one control, right above the sticky button (ADDENDUM §4).
     The stage height follows the screen (--stage-h) so, at 390×844, the control ends above the button. */
  .gm-stage-wrap { --stage-h: clamp(150px, calc(100dvh - 662px), 250px); }
  /* the chat corner (§8e) on each phone stage: beside the Chipper, and never on something you tap (the Dice track,
     the Mines board) or must read (Plinko's buckets) */
  .gm-stage-wrap { --cov-left: 72px; --cov-bottom: 8px; }
  .gm-stage-wrap:has(.limbo-stage) { --cov-bottom: 3px; }          /* under the rule line on the short stages */
  .gm-stage-wrap:has(.crash-stage) { --cov-bottom: 8px; }
  /* Dice: the pill sits in the top band (left of the last rolls), clear of the rule line and the track; the
     watching-you / Share pills move under it, beside the roll number */
  .gm-stage-wrap:has(.dice-stage) { --cov-left: 8px; }
  .gm-stage-wrap:has(.dice-stage) .cov-game { top: 8px; bottom: auto; }
  .gm-stage-wrap:has(.dice-stage) .gm-ov-br { top: 44px; max-width: calc(50% - 72px); flex-wrap: wrap; }
  .gm-stage-wrap:has(.plinko-stage) { --cov-left: 10px; --cov-bottom: 30px; }
  /* Keno's board and payout strip fill its stage (the chat pill moved to the dock, so no band is kept under the strip;
     a win's Share pill takes the tip's spot, top-right) */
  .gm-stage-wrap:has(.keno) { --cov-left: 4px; --cov-bottom: 3px; }
  .gm-stage-wrap:has(.keno) .gm-ov-br { top: 8px; bottom: auto; align-items: flex-start; }
  /* Mines: the pill is just the icon + unread badge, in the numbers column left of the board (never on a tile), and no
     line floats over the board (the badge counts what came in) */
  .gm-stage-wrap:has(.mines-stage) { --cov-left: 8px; --cov-bottom: 62px; }
  .gm-stage-wrap:has(.mines-stage) .cov-pill-t, .gm-stage-wrap:has(.mines-stage) .cov-feed { display: none; }
  .gm-stage-wrap:has(.mines-stage) .cov-pill { width: 36px; padding: 0; justify-content: center; }
  .gm-stage-wrap:has(.mines-stage) .cov-pill .badge { position: absolute; top: -7px; right: -8px; margin: 0; box-shadow: 0 0 0 2px var(--night-0); }
  .gm-stage .limbo-stage, .gm-stage .dice-stage, .gm-stage .crash-stage, .gm-stage .plinko-stage { height: var(--stage-h); }
  /* Plinko must be seen (founder: "impossible to see" at the ~150–180px a short in-app browser left it): it gets its
     true triangle at full width whatever the screen height; the page scrolls a little for the tray instead */
  .gm-stage .plinko-stage { height: min(88vw, 340px); }
  /* the chat button sits in the dock, left of the big button (chat.css .cov-game .cov-pill); its fading lines float
     just above the dock, so leave a little room for the last controls to scroll clear of them */
  .gm-dock .btn-xl { margin-left: 64px; width: calc(100% - 64px); }
  body.gaming main { padding-bottom: calc(140px + var(--safe-b)); }
  .controls { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
  .screen .inp { height: 52px; }
  .screen .quick .q { height: 44px; font-size: 14px; }
  .tray-bet .field-l { display: none; }        /* "Bet" sits inside the amount; your money is in the top bar */
  .tray-step { height: 58px; }
  .tray-step button:not(.val) { width: 46px; height: 44px; }
  .tray-step .val { height: 46px; border-radius: 10px; color: var(--ink); font: 800 23px/1 var(--f-display); letter-spacing: -.02em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
  .tray-step .val span { border-bottom: 2px dotted var(--line-3); padding-bottom: 1px; }
  .tray-cap { font: 800 13px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tray-step .val:active { background: rgba(255,255,255,.05); }
  .tray-quick { align-items: flex-start; }
  .tray-emote { flex: none; position: relative; }
  .tray-emote[hidden] { display: none; }
  .tray-emote .icon-btn { width: 52px; height: 44px; border-radius: 10px; }
  .tray-emote .chat-emotes { left: auto; right: 0; }
  /* the info row: one compact line under the control */
  .odds { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 12px; border-radius: 14px; }
  .odds > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .odds span { display: inline; margin: 0; font-size: 13px; white-space: nowrap; }
  .odds b { font-size: 15px; white-space: nowrap; }

  /* the sticky 56px button, with the eligibility line under it */
  .gm-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); padding: 10px var(--gutter) calc(8px + var(--safe-b)); background: linear-gradient(180deg, rgba(13,10,28,0), rgb(13,10,28) 12px); }
  .gm-dock .btn-xl { height: 56px; font-size: 18px; border-radius: 18px; }
  .gm-dock-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; margin-top: 2px; font: 700 13px/1.25 var(--f-ui); color: var(--ink-2); }
  .gm-dock-q:empty { display: none; }
  .gm-dock-q b { color: var(--ink); }
  .gm-dock-q .q-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-dock-q .q-text.done, .gm-dock-q .q-text.done b { color: var(--go); }
  .gm-dock-q .q-text.urgent { color: #FFB3C0; }
  .gm-dock-q .q-num { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .gm-dock-q .q-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 99px; background: var(--night-3); overflow: hidden; }
  .gm-dock-q .q-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--grape), #A895FF); transition: width .4s var(--out); }
  .gm-dock-q .q-bar.done i { background: var(--go); }
  .gm-dock-q .q-bar.urgent i { background: var(--hot); }
  /* the chat / party sheets in game mode: shorter, modeless, right above the sticky button (the game stays playable) */
  .sheet.is-modeless.snap-half { height: min(38dvh, 320px); bottom: var(--gm-dock-h, 96px); border-bottom: 1px solid var(--line-2); border-radius: 24px 24px 0 0; box-shadow: 0 -18px 50px -16px rgba(0,0,0,.85); padding-bottom: 0; }
  .sheet.is-modeless.snap-full { bottom: var(--gm-dock-h, 96px); height: calc(100dvh - var(--gm-dock-h, 96px) - var(--bar-h) - 8px); padding-bottom: 0; }

  .qualify { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text num" "bar bar"; gap: 8px 12px; padding: 12px 14px; font-size: 13.5px; }
  .qualify .q-num { justify-self: end; font-size: 13px; }
  .qualify .q-ico { display: none; }
  .out-note { font-size: 13.5px; }

  .gm-sheet .rail-hint { font-size: 13px; }
  .gm-sheet .gm-list .row .who small { font-size: 13px; }

  .final-banner { padding: 12px 18px 12px 12px; gap: 12px; }
  .final-banner b { font-size: 20px; }
  .final-banner span { font-size: 13.5px; }
  .gm-cd .chip { width: 44px; height: 44px; }
}
/* shorter phones (a 740px-tall screen): the Dice stage is short and its roll number moves up into the top band, so the
   pill there is just the icon + badge and no line floats over the number (the badge counts what came in) */
@media (max-width: 700px) and (max-height: 831px) {
  .gm-stage-wrap:has(.dice-stage) .cov-pill-t, .gm-stage-wrap:has(.dice-stage) .cov-feed { display: none; }
  .gm-stage-wrap:has(.dice-stage) .cov-pill { width: 36px; padding: 0; justify-content: center; }
  .gm-stage-wrap:has(.dice-stage) .cov-pill .badge { position: absolute; top: -7px; right: -8px; margin: 0; box-shadow: 0 0 0 2px var(--night-0); }
  /* the last rolls step aside there, so the watching-you / Share pills take the top-right corner, clear of the rule */
  .gm-stage-wrap:has(.dice-stage) .gm-ov-br { top: 8px; left: auto; right: 8px; max-width: calc(50% - 70px); flex-direction: row-reverse; justify-content: flex-start; }
}
@media (max-width: 380px) {
  .hud { gap: 4px; }
  .hud-box, .hud-clock { padding: 0 8px; }
  .hud-pot { padding: 0 3px; }
  .hud-money { padding: 0 7px 0 9px; }
  .hud-clock b, .hud-pot b { font-size: 17px; }
  .hud-pot b[data-len="9"], .hud-pot b[data-len="10"] { font-size: 14px; }
  .hud-l-pot { display: none; }
  .hud-money b { font-size: 29px; }
  .hud-money b[data-len="7"] { font-size: 27px; }
  .hud-money b[data-len="8"] { font-size: 24px; }
  .hud-money b[data-len="9"] { font-size: 21px; }
  .hud-money b[data-len="10"] { font-size: 19px; }
  .gp { font-size: 12.5px; letter-spacing: -.02em; }
}
@media (max-width: 700px) and (orientation: landscape) {
  .gm-dock { padding-top: 8px; }
}

/* desktop: someone starts watching you → the stage-corner pill pops once (no toast across the top of the screen) */
.gm-watching-you.is-new { animation: gmWyPop .9s var(--spring); }
@keyframes gmWyPop { 0% { transform: scale(.8); box-shadow: 0 0 0 0 rgba(123, 97, 255, .6); } 60% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(123, 97, 255, 0); } }

/* the game bar on desktop: the full logo (chip + BetBattles), lined up with the game columns' left edge, and the three
   tiles centred on the screen (founder: the lone chip looked "off center") */
@media (min-width: 1024px) and (min-height: 561px) {
  .bar.is-game .bar-in { max-width: 1600px; position: relative; }
  .bar.is-game .hud { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .bar.is-game .bar-spacer { display: none; }
}

/* after every bet (win or loss): what it did + where you stand, in a chip under YOUR MONEY (founder) */
.hud-box.hud-money { overflow: visible; }
.res-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 11px; border-radius: 11px; white-space: nowrap; pointer-events: none;
  background: rgba(13, 10, 28, .95); border: 1px solid var(--line-2); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--out), transform .35s var(--out);
}
.res-pop b { font: 800 16px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink); }
.res-pop small { font: 700 12.5px/1 var(--f-ui); color: var(--ink-3); }
.res-pop.up b { color: var(--go); }
.res-pop.up { border-color: rgba(43, 216, 129, .35); }
.res-pop.down b { color: var(--ink-2); }
.res-pop.is-on { opacity: 1; transform: none; animation: resPop .45s var(--spring); }
@keyframes resPop { 0% { transform: scale(.85) translateY(-6px); } }
/* the result chip sits at the top-centre of the game area, big and clear (founder) */
.gm-stage-wrap { position: relative; }
.gm-stage-wrap > .res-pop { top: 14px; left: 50%; right: auto; z-index: 6; padding: 9px 16px; gap: 10px; border-radius: 14px; transform: translate(-50%, -6px); }
.gm-stage-wrap > .res-pop b { font: 900 24px/1 var(--f-display); letter-spacing: -.02em; }
.gm-stage-wrap > .res-pop small { font: 700 14px/1 var(--f-ui); }
.gm-stage-wrap > .res-pop.is-on { transform: translate(-50%, 0); animation: resPopC .45s var(--spring); }
@keyframes resPopC { 0% { transform: translate(-50%, -8px) scale(.85); } 100% { transform: translate(-50%, 0) scale(1); } }
@media (max-width: 700px) {
  /* phones: the chip sits on the game card's top edge, like a notch, so it never covers the result itself (a short
     phone's stage has Limbo's / Dice's number right at its top) */
  .gm-stage-wrap > .res-pop { top: -27px; padding: 6px 12px; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .9), 0 0 0 3px var(--night-0); }
  .gm-stage-wrap > .res-pop b { font-size: 19px; }
  .gm-stage-wrap > .res-pop small { font-size: 12.5px; }
}
/* practice only: walk out any time (founder) */
.gp-head { display: flex; align-items: center; gap: 10px; }
.gp-leave { appearance: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 7px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--night-2); color: var(--ink-2); font: 800 12.5px/1 var(--f-ui); cursor: pointer; white-space: nowrap; }
.gp-leave:hover { color: var(--ink); border-color: var(--line-3); }
.gp-leave { position: relative; }
.gp-leave::after { content: ""; position: absolute; inset: -7px -3px; }       /* a 44px tap area */
.gp-leave + .gp-tools { margin-left: 0; }
/* QA: after a Keno win the Share pill takes the tip's spot; the tip steps aside while it shows */
.gm-stage-wrap:has(.gm-share) .keno-tip { visibility: hidden; }
/* QA (phones): the strip's eye badges already say who's watching; the stage pill only covered game text */
@media (max-width: 700px) { .gm-watching-you { display: none !important; } }
/* phones: "X is watching you" as a small corner chip above the dock, not a toast (founder) */
.gm-wy-mini { display: none; }
@media (max-width: 700px) {
  /* (fix) just under the top bar, top-right: down by the dock it sat on the tray's last row (Max, the mines chips) */
  .gm-wy-mini { display: inline-flex; position: fixed; right: 16px; top: calc(var(--bar-h) + 8px); z-index: calc(var(--z-dock) + 1);
    align-items: center; gap: 6px; max-width: 60vw; padding: 4px 10px 4px 5px; border-radius: 999px; pointer-events: none;
    background: rgba(13, 10, 28, .9); border: 1px solid var(--line-2); font: 700 13px/1 var(--f-ui); color: var(--ink-2);
    white-space: nowrap; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--out), transform .3s var(--out); }
  .gm-wy-mini b { color: var(--ink); font-weight: 800; }
  .gm-wy-mini span { overflow: hidden; text-overflow: ellipsis; }
  .gm-wy-mini .chip { width: 20px; height: 20px; flex: none; }
  .gm-wy-mini.is-on { opacity: 1; transform: none; }
}
/* founder: every active player's tile in the phone strip is the same size; knocked-out players stay small */
@media (max-width: 700px) {
  .fr-strip .fr:not(.out):not(.fr-all) { flex: 1 1 0; min-width: 88px; max-width: 120px; }
  .fr-strip .fr.out { flex: 0 0 auto; min-width: 54px; max-width: 66px; }
}
/* QA: short phones (an iPhone SE): slightly shorter game tiles, so the picker stays clear of the top bar once the tray
   is fitted above the sticky button */
@media (max-width: 700px) and (max-height: 700px) {
  .gp { height: 56px; gap: 4px; }
}
/* QA: tablets and small laptops (701–1099): the bar's three tiles need its room, so the BetBattles wordmark steps aside
   (the Grape Chipper mark stays, as §0's game bar) and under 900px the tiles narrow. At 768 YOUR MONEY ran off the
   screen (the page scrolled sideways) and at 1024 the wordmark ran under TIME LEFT. */
@media (min-width: 701px) and (max-width: 1099px) {
  .bar.is-game .wordmark, .bar.is-game .bar-spacer { display: none; }
}
@media (min-width: 701px) and (max-width: 899px) {
  .bar.is-game .hud { gap: 8px; }
  .bar.is-game .hud-box { padding: 0 14px; }
  .bar.is-game .hud-clock { min-width: 124px; }
  .bar.is-game .hud-pot { min-width: 160px; }
  .bar.is-game .hud-money { min-width: 170px; }
}
/* QA: the sidebar keeps its scrollbar's room, so its tiles and controls don't jump sideways when one game needs to
   scroll and the next doesn't */
@media (min-width: 1024px) and (min-height: 561px) {
  .gm-ctl { scrollbar-gutter: stable; }
}
/* QA: on a narrower stage (701–1279 wide) the watch header's "Watching Maya · Plinko" was squeezed to nothing by the
   money and the button: Back to my game takes its own row under it */
@media (min-width: 701px) and (max-width: 1279px) {
  .watch-bar { flex-wrap: wrap; row-gap: 8px; }
  .watch-back { flex: 1 0 100%; margin: 0; justify-content: center; }
}
/* QA: common laptop heights (1366×657, 1100×690): the sidebar fits without scrolling, so the pinned Bet button never
   sits on the "Chance to win · If you win you get" row. Game tiles go one line (icon beside the name), and the
   inputs, chips and gaps tighten a little. */
@media (min-width: 1024px) and (min-height: 561px) and (max-height: 720px) {
  .gm-ctl { padding-top: 8px; }
  .gm-ctl .gp-head { min-height: 26px; margin-bottom: 4px; }
  .gm-ctl .gp-leave { height: 26px; }
  .gm-ctl .gp-row { gap: 6px; }
  .gm-ctl .gp { height: 36px; margin-bottom: 0; flex-direction: row; gap: 6px; }
  .gm-ctl .gp svg { width: 17px; height: 17px; }
  .gm-ctl .gp.on::after { top: 4px; right: 4px; width: 6px; height: 6px; }
  .gm-ctl .controls { gap: 6px; }
  .gm-ctl .field > label, .gm-ctl .field > .field-l { margin-bottom: 3px; }
  .gm-ctl .inp { height: 40px; }
  .gm-ctl .quick { margin-top: 6px; }
  .gm-ctl .quick .q { height: 30px; }
  .gm-ctl .odds { padding: 8px 12px; }
  .gm-ctl .odds span { min-height: 0; margin-bottom: 2px; }
  .gm-ctl .bet-dock .btn-xl { height: 50px; }
  .gm-ctl .qualify { margin-top: 6px; padding: 8px 12px; }
  .gm-foot { margin-top: 6px; padding-bottom: 8px; }
}