/* Styles only ₿ILLIONAIRE uses. The shared arcade look lives in shared/arcade.css; the home and results
   screens are the arcade's home kit (shared/home.css), and only this game's own parts of them are here.
   The game is sized in --u (1% of the game's on-screen width), the home kit's parts in --hu (one logical px),
   so everything scales together from a small phone to a big monitor. */

:root {
  color-scheme: dark;
  --gold: #ffc629;
  --green: #2fd24a;
  --panel: rgba(8, 12, 30, 0.92);
  --panel-line: #1f46d8;
  --pill: #ffc063;
}

/* ---------- top-corner buttons: same as the other games ---------- */
#btn-mute .icon-off { display: none; }
#btn-mute.muted .icon-on { display: none; }
#btn-mute.muted .icon-off { display: block; }
#btn-arcade {
  right: auto;
  left: max(10px, env(safe-area-inset-left));
  width: auto;
  gap: 8px;
  padding: 0 12px 0 10px;
  font-family: var(--font-arcade);
  font-size: 10px;
  text-decoration: none;
}
#btn-arcade .px-arrow { width: 14px; height: 14px; shape-rendering: crispEdges; }
#btn-arcade[hidden] { display: none; }
/* Pause (during a game) sits just left of the sound button, like every game in the arcade */
#btn-pause { right: calc(max(10px, env(safe-area-inset-right)) + 54px); }
#btn-pause[hidden] { display: none; }
/* PAUSED covers the whole show (questions, panels, the sparkles), and everything behind it holds still */
#screen-pause { z-index: 40; }
.stage.frozen > :not(#screen-pause), .stage.frozen > :not(#screen-pause) *, .stage.frozen > :not(#screen-pause) *::before, .stage.frozen > :not(#screen-pause) *::after {
  animation-play-state: paused !important;
}
/* Phones, while the quiz shows: it sits just below the corner buttons. (The home and results use the whole screen,
   their top band kept clear for the buttons, like the other games.) */
@media (max-width: 599px) {
  .app.bil-board { padding-top: calc(max(10px, env(safe-area-inset-top)) + 54px); }
}

.fx-top { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.stage { background: #04060d; overflow-wrap: break-word; }   /* a very long word (OP_CHECKSEQUENCEVERIFY, a link) wraps instead of sticking out */

/* ---------- shared bits ---------- */
.btn { font-size: max(12px, calc(var(--u) * 3.8)); }
.btn.btn-small {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8);
  min-width: calc(var(--u) * 22); min-height: 32px;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4);
  font-size: max(10px, calc(var(--u) * 3));
  box-shadow: 0 0 calc(var(--u) * 1.2) var(--btc-orange-glow), 0 calc(var(--u) * 0.4) 0 #8a4700;
}
.btn.btn-small:active { transform: translateY(calc(var(--u) * 0.3)); box-shadow: 0 0 calc(var(--u) * 1.2) var(--btc-orange-glow), 0 calc(var(--u) * 0.1) 0 #8a4700; }
.btn-small .px-arrow { flex: none; width: 1em; height: 1em; shape-rendering: crispEdges; }
.btn-stack { display: flex; flex-direction: column; align-items: center; gap: calc(max(var(--u) * 0.6, 7px) + max(6px, var(--u) * 0.8)); }
/* level badges (pixel art); the top one glows. .glow: MC MOON at full glow (Q19-20, the win) */
.badge { image-rendering: pixelated; }
.lvl-7 { filter: drop-shadow(0 0 calc(var(--u) * 0.9) rgba(247, 147, 26, 0.9)); }
.glow { filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 154, 31, 0.95)); }
.hidden { display: none !important; }
.screen.hidden { display: flex !important; }   /* screens fade (arcade.css), overlays/parts just hide */
.screen.hidden { opacity: 0; pointer-events: none; visibility: hidden; }

/* ======================= HOME + RESULTS (on the arcade's home kit: shared/home.css) ======================= */
/* the showcase: the 8 level badges, with a spotlight climbing them from NOCOINER to SATOSHI, and the three big
   prizes, each lighting up as the climb reaches its level (Q6 STACKER, Q12 WHOLECOINER, Q21 SATOSHI). */
.bil-show { display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * 4); }
.bil-badges { display: flex; justify-content: center; gap: calc(var(--hu) * 6); }
.bil-badges img { display: block; width: calc(var(--hu) * 24); height: calc(var(--hu) * 24); image-rendering: pixelated; animation: bil-climb 4.4s ease-out infinite; animation-delay: calc(var(--i) * 0.4s); }
@keyframes bil-climb { 0%, 12%, 100% { transform: none; } 4% { transform: translateY(calc(var(--hu) * -3)) scale(1.08); } }
.bil-cap { font-size: calc(var(--hu) * 5.8); line-height: 1; color: #9aa3bf; white-space: nowrap; }
.bil-ms { align-self: stretch; display: flex; flex-direction: column; gap: calc(var(--hu) * 1); }
.bil-row {
  display: grid; grid-template-columns: calc(var(--hu) * 10) calc(var(--hu) * 20) 1fr auto; align-items: center; gap: calc(var(--hu) * 4);
  padding: calc(var(--hu) * 2) calc(var(--hu) * 4); border-radius: calc(var(--hu) * 3);
  font-size: calc(var(--hu) * 6.5); line-height: 1; text-align: left; white-space: nowrap; color: #f4f6ff;
  animation: bil-lit 4.4s ease-out infinite; animation-delay: calc(var(--i) * 0.4s);
}
@keyframes bil-lit { 0%, 3% { background-color: rgba(255, 198, 41, 0); } 6% { background-color: rgba(255, 198, 41, 0.22); } 30%, 100% { background-color: rgba(255, 198, 41, 0); } }
.bil-row img { justify-self: center; height: calc(var(--hu) * 10); width: auto; image-rendering: pixelated; }
.bil-q { color: #9aa3bf; }
.bil-note { color: var(--gold); }
.bil-row.top .bil-amt, .bil-row.top .bil-note { color: var(--btc-orange); }

/* results: "1,000,000 SATS" (the number first, then the unit) */
.ah-over .ah-score { flex-direction: row-reverse; }
/* results details: your rank, the chain of your 21 answers (a button: tap it, or one block, to review them), stats */
.bil-over { display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * 5); }
.bil-rank {
  display: inline-flex; align-items: center; gap: calc(var(--hu) * 4);
  padding: calc(var(--hu) * 2) calc(var(--hu) * 7) calc(var(--hu) * 2) calc(var(--hu) * 2.5);
  line-height: 1; color: #000; background: var(--gold); border-radius: calc(var(--hu) * 2);
  box-shadow: 0 0 calc(var(--hu) * 5) rgba(255, 198, 41, 0.55); white-space: nowrap;
}
.bil-rank .badge { display: block; width: calc(var(--hu) * 16); height: calc(var(--hu) * 16); }
.bil-review {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * 4);
  width: 100%; margin: 0; padding: calc(var(--hu) * 2) 0;
  background: none; border: 0; border-radius: calc(var(--hu) * 3); color: inherit; font: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none;
}
.bil-review:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bil-chain { display: flex; gap: calc(var(--hu) * 4); width: 100%; }
.bil-chain .grp { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--hu) * 1.5); }
.bil-chain i { display: block; aspect-ratio: 1; background: #0d1330; border: max(1px, calc(var(--hu) * 1)) solid #2a3a7a; }
.bil-chain i.done { background: var(--btc-orange); border-color: #ffd27a; }
.bil-chain i.done.safe { background: var(--gold); }
.bil-chain i.miss { background: var(--danger); border-color: #ffb3b3; }
.bil-chain i.walk { background: transparent; border: max(1.5px, calc(var(--hu) * 1.5)) dashed var(--btc-orange); }
.bil-hint { font-size: calc(var(--hu) * 5.8); line-height: 1; color: var(--pill); }
@media (hover: hover) { .bil-review:hover .bil-hint { color: #fff; } }
.bil-stats { color: #9aa3bf; white-space: nowrap; }
.bil-stats b { font-weight: normal; color: #f4f6ff; }

/* ======================= GAME ======================= */
#screen-game {
  --fit: 1;                     /* game.js lowers this (to 0.7) when a long question doesn't fit a short screen */
  justify-content: flex-start;
  gap: calc(var(--u) * 1.5 * var(--fit));
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * 2.6);
  background: none;
  text-align: left;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;   /* last resort only: it always fits in testing */
}
#screen-game::-webkit-scrollbar { display: none; }
#screen-game > * { width: 100%; flex: none; }

/* the 21-block chain: your progress, tap for the full ladder */
.chain {
  display: flex; gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 0.8) 0;
  background: none; border: 0; cursor: pointer; touch-action: manipulation;
}
.chain .grp { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 0.5); }
.chain i {
  position: relative; display: block; aspect-ratio: 1;
  background: #0d1330; border: 1px solid #2a3a7a; border-radius: 1px;
}
.chain i.safe { border-color: var(--gold); }
.chain i.wc { border-color: #ffd27a; }
.chain i.top { border-color: var(--btc-orange); box-shadow: 0 0 calc(var(--u) * 0.8) var(--btc-orange-glow); }
.chain i.done { background: var(--btc-orange); border-color: #ffd27a; }
.chain i.done.safe { background: var(--gold); }
.chain i.now { background: #fff; border-color: #fff; animation: now-blink 0.9s steps(1, end) infinite; }
@keyframes now-blink { 50% { background: #0d1330; } }   /* the fill blinks, the frame stays (no hole in the chain) */
.chain i.miss { background: var(--danger); border-color: #ffb3b3; }
.chain:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hud { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 2); font-size: max(8px, calc(var(--u) * 3.3)); }
.hud-q { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.2); color: #fff; }
.hud-badge { height: calc(var(--u) * 5); width: auto; image-rendering: pixelated; }
.hud-prize { color: var(--btc-orange); text-shadow: 0 0 calc(var(--u) * 1) var(--btc-orange-glow); white-space: nowrap; }
.hud-for { color: var(--text-dim); font-size: 0.75em; text-shadow: none; }
.hud-safe { margin: calc(var(--u) * -0.6) 0 0; min-height: 1.2em; text-align: right; font-size: max(7.5px, calc(var(--u) * 2.1)); color: var(--gold); }
.hud-safe .dim { color: var(--text-dim); }

/* ---------- the 3 lifelines: gold power-ups in the dock, right above BROADCAST ---------- */
.lifebar { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1 * var(--fit)); margin-bottom: calc(var(--u) * 0.6); }
/* the line above them: how many are left, or MC MOON's nudge when you're stuck (game.js lifeHead) */
.life-head {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2);
  height: max(10px, calc(var(--u) * 4.6)); line-height: 1; font-size: max(7.5px, calc(var(--u) * 2.3)); color: var(--pill); white-space: nowrap;
}
.life-mc { display: none; height: calc(var(--u) * 4.6); width: auto; image-rendering: pixelated; }
.lifebar.call .life-mc { display: block; }
.lifebar.call .life-head { color: var(--gold); text-shadow: 0 0 calc(var(--u) * 1) rgba(255, 198, 41, 0.8); }
.lifebar.none .life-head { color: var(--text-dim); }
.lifelines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.8); }
.life {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.9 * var(--fit));
  min-height: 44px; padding: calc(var(--u) * 1.5 * var(--fit)) calc(var(--u) * 0.6);
  font-family: var(--font-arcade); color: #fff;
  background: linear-gradient(180deg, rgba(74, 50, 0, 0.95), rgba(26, 17, 0, 0.95));
  border: 2px solid var(--gold); border-radius: calc(var(--u) * 1);
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 198, 41, 0.5), inset 0 0 calc(var(--u) * 1.6) rgba(255, 198, 41, 0.14);
  cursor: pointer; touch-action: manipulation;
}
.life-top { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); font-size: max(8.5px, calc(var(--u) * 2.9)); color: #fff; }
.life img { height: calc(var(--u) * 5.2); width: auto; image-rendering: pixelated; }
.life-hint { font-size: max(6.5px, calc(var(--u) * 1.95)); color: var(--pill); white-space: nowrap; }
.life:not(:disabled):active { transform: translateY(1px); }
.life:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.life:disabled { cursor: default; }
.life:disabled:not(.used) { opacity: 0.6; }
/* used: dimmed, with a big red X over it (like the TV show) */
.life.used { border-color: #5a2a2a; background: rgba(18, 8, 8, 0.95); box-shadow: none; }
.life.used > * { opacity: 0.3; }
.life.used img { filter: grayscale(1); }
.life.used::after {
  content: ""; position: absolute; inset: 8% 0; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 10 10' shape-rendering='crispEdges'><path fill='%23ff3b3b' d='M0 0h1v1H0zM1 0h1v1H1zM6 0h1v1H6zM7 0h1v1H7zM0 1h1v1H0zM1 1h1v1H1zM2 1h1v1H2zM5 1h1v1H5zM6 1h1v1H6zM7 1h1v1H7zM1 2h1v1H1zM2 2h1v1H2zM3 2h1v1H3zM4 2h1v1H4zM5 2h1v1H5zM6 2h1v1H6zM2 3h1v1H2zM3 3h1v1H3zM4 3h1v1H4zM5 3h1v1H5zM2 4h1v1H2zM3 4h1v1H3zM4 4h1v1H4zM5 4h1v1H5zM1 5h1v1H1zM2 5h1v1H2zM3 5h1v1H3zM4 5h1v1H4zM5 5h1v1H5zM6 5h1v1H6zM0 6h1v1H0zM1 6h1v1H1zM2 6h1v1H2zM5 6h1v1H5zM6 6h1v1H6zM7 6h1v1H7zM0 7h1v1H0zM1 7h1v1H1zM6 7h1v1H6zM7 7h1v1H7z'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
/* stuck (or your first game): the lifelines you still have pulse */
.lifebar.call .life:not(.used):not(:disabled) { animation: life-call 0.9s ease-in-out infinite alternate; }
@keyframes life-call { to { box-shadow: 0 0 calc(var(--u) * 3.2) rgba(255, 198, 41, 0.95), inset 0 0 calc(var(--u) * 2.4) rgba(255, 198, 41, 0.3); border-color: #fff3b0; } }
/* sizes (game.js fitLifelines): tall phones have room to spare, so the lifelines grow (bigger icon, on top);
   on narrow screens the icon goes on top so the name fits, then the hint wraps, then (narrowest) the hint goes */
.lifebar.roomy .life img { height: calc(var(--u) * 8.2); }
.lifebar.roomy .life { padding-block: calc(var(--u) * 2.4 * var(--fit)); }
.lifebar.roomy .life-top { font-size: max(9px, calc(var(--u) * 3.1)); }
.lifebar.roomy .life-hint { font-size: max(7px, calc(var(--u) * 2.1)); }
.lifebar.roomy .life-head { height: max(10px, calc(var(--u) * 5.2)); font-size: max(8px, calc(var(--u) * 2.6)); }
.lifebar.stack .life-top { flex-direction: column; gap: calc(var(--u) * 0.8); }
.lifebar.wrap .life-hint { white-space: normal; text-align: center; line-height: 1.4; min-height: 2.8em; }   /* two lines each, so the three cards line up */
.lifebar.nohint .life-hint { display: none; }
/* the tiniest phones, if a long question still doesn't fit: the line above the lifelines goes and they shrink to
   just their names (still a comfortable tap) */
#screen-game.lean .life-head, #screen-game.lean .life img { display: none; }
#screen-game.lean .life { min-height: 36px; padding-block: calc(var(--u) * 0.8); }

.qbox {
  position: relative;
  flex: 1 1 auto !important;
  max-height: calc(var(--u) * 58);
  padding: calc(var(--u) * 3.4 * var(--fit)) calc(var(--u) * 3) calc(var(--u) * 2.6 * var(--fit));
  background: var(--panel); border: 2px solid var(--neon-blue); border-radius: calc(var(--u) * 1);
  box-shadow: 0 0 calc(var(--u) * 2) var(--neon-blue-glow), inset 0 0 calc(var(--u) * 3) rgba(31, 77, 255, 0.15);
  display: flex; align-items: center;
}
/* an invisible strut: the box is at least this tall, and grows with the text (so the question is never cut off) */
.qbox::before { content: ""; flex: none; width: 0; align-self: stretch; min-height: calc(var(--u) * 21 * var(--fit)); }
.qtag {
  position: absolute; top: calc(var(--u) * -1.6); left: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4);
  font-size: max(7.5px, calc(var(--u) * 2)); color: #000; background: var(--btc-orange); border-radius: 2px;
  letter-spacing: 0.06em;
}
.qtext { margin: 0; width: 100%; font-size: max(9px, calc(max(12px, var(--u) * 3.9) * var(--fit))); line-height: 1.55; color: #fff; text-wrap: balance; }
.qtext .caret { display: inline-block; width: 0.6em; height: 0.9em; margin-left: 0.15em; vertical-align: -0.05em; background: var(--btc-orange); animation: arcade-blink 0.6s steps(2, start) infinite; }

.answers { display: grid; gap: calc(var(--u) * 1.5 * var(--fit)); }
.ans {
  position: relative;
  display: grid; grid-template-columns: calc(var(--u) * 6) 1fr auto; align-items: center; gap: calc(var(--u) * 2);
  min-height: calc(var(--u) * 11.5 * var(--fit));
  padding: calc(var(--u) * 1.4 * var(--fit)) calc(var(--u) * 2) calc(var(--u) * 1.4 * var(--fit)) calc(var(--u) * 1.4);
  font-family: var(--font-arcade); text-align: left; color: #fff;
  background: var(--panel); border: 2px solid #2a4bd8; border-radius: calc(var(--u) * 1);
  box-shadow: 0 0 calc(var(--u) * 1) rgba(31, 77, 255, 0.35);
  cursor: pointer; touch-action: manipulation;
  transition: opacity 0.2s ease, transform 0.18s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.ans-key {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  font-size: max(8px, calc(max(10px, var(--u) * 3.2) * var(--fit))); color: var(--btc-orange);
  border: 2px solid var(--btc-orange); border-radius: 2px;
}
.ans-text { font-size: max(8px, calc(max(10.5px, var(--u) * 3.1) * var(--fit))); line-height: 1.5; }
.ans-badge { font-size: max(7.5px, calc(var(--u) * 2.1)); color: var(--gold); text-align: right; line-height: 1.7; }   /* "49% MAXI" stacks onto two lines when a long word leaves no room */
.ans-badge .maxi { display: inline-block; padding: 0.3em 0.5em; color: #fff; background: #b51f1f; border-radius: 2px; margin-left: 0.4em; }
.ans:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ans.pending { opacity: 0; transform: translateX(calc(var(--u) * -3)); pointer-events: none; }
@media (hover: hover) { .ans:not(:disabled):hover { border-color: #6d8dff; } }
.ans.sel { border-color: var(--btc-orange); background: rgba(70, 34, 0, 0.92); box-shadow: 0 0 calc(var(--u) * 2) var(--btc-orange-glow); }
.ans.sel .ans-key { background: var(--btc-orange); color: #000; }
.ans.locked { animation: locked 0.5s steps(2, start) infinite; }
@keyframes locked { 50% { background: rgba(140, 70, 0, 0.95); } }
.ans.right { border-color: var(--green); background: rgba(10, 70, 28, 0.95); box-shadow: 0 0 calc(var(--u) * 2.4) rgba(47, 210, 74, 0.7); animation: none; }
.ans.right .ans-key { background: var(--green); border-color: var(--green); color: #000; }
.ans.right.reveal-right { animation: right-blink 0.45s steps(2, start) 4; }
@keyframes right-blink { 50% { background: rgba(4, 30, 12, 0.95); } }
.ans.wrong { border-color: var(--danger); background: rgba(80, 8, 14, 0.95); box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 59, 59, 0.6); animation: none; }
.ans.wrong .ans-key { background: var(--danger); border-color: var(--danger); color: #000; }
.ans.dim { opacity: 0.35; }
.ans.gone { opacity: 0.18; }
.ans.gone .ans-text { text-decoration: line-through; }
.ans:disabled { cursor: default; }
.ans.fold { display: none; }   /* short screens: the dimmed answers step aside so the result fits */

/* the bottom dock: actions -> verifying -> reveal */
.dock { display: flex; flex-direction: column; justify-content: flex-end; margin-top: auto; min-height: calc(var(--u) * 30 * var(--fit)); }
.actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1); }
.actions .btn { min-height: 44px; padding: calc(var(--u) * 1.8) calc(var(--u) * 1); font-size: max(10px, calc(var(--u) * 3)); }
.btn-ghost { line-height: 1.5; background: transparent; color: var(--pill); border: 2px solid var(--btc-orange); box-shadow: 0 0 calc(var(--u) * 1) var(--btc-orange-glow); }
.btn-ghost:active { box-shadow: 0 0 calc(var(--u) * 1) var(--btc-orange-glow); }
.btn:disabled { background: #232a45; color: #6a7194; box-shadow: none; cursor: default; transform: none; border-color: #2c3456; }
.btn-ghost:disabled { background: transparent; }
.btn-broadcast:not(:disabled) { animation: ready 1.2s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 calc(var(--u) * 3.4) rgba(247, 147, 26, 0.95), 0 calc(var(--u) * 0.6) 0 #8a4700; } }

.verify { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 2.4); font-size: max(10px, calc(var(--u) * 3.2)); color: var(--btc-orange); }
.verify-label { animation: arcade-blink 0.7s steps(2, start) infinite; }
.vblocks { display: flex; gap: calc(var(--u) * 1.2); }
.vblocks i { display: block; width: calc(var(--u) * 4.6); aspect-ratio: 1; border: 2px solid var(--btc-orange); background: transparent; }
.vblocks i.on { background: var(--btc-orange); box-shadow: 0 0 calc(var(--u) * 1.4) var(--btc-orange-glow); }

.reveal {
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.3 * var(--fit));
  margin-top: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 2 * var(--fit)) calc(var(--u) * 2.6) calc(var(--u) * 2.4 * var(--fit));
  background: rgba(0, 0, 0, 0.88); border: 2px solid var(--green); border-radius: calc(var(--u) * 1);
  box-shadow: 0 0 calc(var(--u) * 1.6) rgba(47, 210, 74, 0.5);
}
.reveal.bad { border-color: var(--danger); box-shadow: 0 0 calc(var(--u) * 1.6) rgba(255, 59, 59, 0.5); }
.reveal.walked { border-color: var(--btc-orange); box-shadow: 0 0 calc(var(--u) * 1.6) var(--btc-orange-glow); }
.reveal-top { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.reveal.compact .host-face, .reveal.compact .host-say { display: none; }
.reveal.compact .reveal-fact { line-height: 1.42; }
.reveal.compact { gap: calc(var(--u) * 0.8); padding-block: calc(var(--u) * 1.2); }
/* tiniest screens, last resort: the maxi's note and the % / MAXI badges go, and the spacing tightens */
#screen-game.tight .reveal-note, #screen-game.tight .ans-badge { display: none; }
#screen-game.tight { gap: calc(var(--u) * 0.9); padding-top: calc(var(--u) * 1.6); padding-bottom: calc(var(--u) * 1.6); }
#screen-game.tight .reveal { gap: calc(var(--u) * 0.6); }
#screen-game.tight .btn-continue { min-height: 34px; padding-block: calc(var(--u) * 1.1); }
.host-face { flex: none; height: calc(var(--u) * 10 * var(--fit)); width: auto; image-rendering: pixelated; }
.reveal-heads { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8 * var(--fit)); min-width: 0; }
.host-say { margin: 0; font-size: max(7px, calc(max(8px, var(--u) * 2.4) * var(--fit))); line-height: 1.5; color: var(--pill); }
.reveal-head { margin: 0; font-size: max(8px, calc(max(10px, var(--u) * 3.3) * var(--fit))); color: var(--green); line-height: 1.4; }
.reveal.bad .reveal-head { color: var(--danger); }
.reveal.walked .reveal-head { color: var(--btc-orange); }
.reveal-note { margin: 0; font-size: max(7px, calc(max(8px, var(--u) * 2.3) * var(--fit))); color: #ff8a8a; line-height: 1.5; }
.reveal-note:empty { display: none; }
.reveal-fact { margin: 0; font-size: max(7.5px, calc(max(9px, var(--u) * 2.7) * var(--fit))); line-height: 1.65; color: #e6e9f5; }
.dyk { color: var(--gold); }
.btn-continue { align-self: stretch; margin-top: calc(var(--u) * 0.6); min-height: 40px; padding: calc(var(--u) * 1.6); font-size: max(11px, calc(var(--u) * 3.4)); }

/* stakes: the question panel warms up as the prize grows; the billion-sat question glows gold */
#screen-game[data-tier="hard"] .qbox { border-color: #8a5cff; box-shadow: 0 0 calc(var(--u) * 2) rgba(138, 92, 255, 0.6), inset 0 0 calc(var(--u) * 3) rgba(138, 92, 255, 0.15); }
#screen-game[data-tier="expert"] .qbox { border-color: var(--btc-orange); box-shadow: 0 0 calc(var(--u) * 2.4) var(--btc-orange-glow), inset 0 0 calc(var(--u) * 3) rgba(247, 147, 26, 0.15); }
#screen-game[data-tier="billion"] .qbox { border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 3.4) rgba(255, 198, 41, 0.8), inset 0 0 calc(var(--u) * 3) rgba(255, 198, 41, 0.18); }
#screen-game[data-tier="billion"] .qtag { background: var(--gold); }
#screen-game[data-tier="billion"] .hud-prize { color: var(--gold); }

.shake { animation: shake 0.42s linear 1; }
@keyframes shake { 15% { transform: translateX(-1.4%); } 35% { transform: translateX(1.2%); } 55% { transform: translateX(-0.8%); } 75% { transform: translateX(0.5%); } }

/* ======================= OVERLAYS ======================= */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--u) * 5);
  background: rgba(0, 0, 0, 0.74);
  text-align: center;
}
.panel {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4);
  width: 100%;
  padding: calc(var(--u) * 3.4) calc(var(--u) * 3.6);
  background: rgba(2, 4, 12, 0.96); border: 2px solid var(--neon-blue); border-radius: calc(var(--u) * 1);
  box-shadow: 0 0 calc(var(--u) * 2.4) var(--neon-blue-glow);
}
.panel-title { margin: 0; font-size: max(11px, calc(var(--u) * 4)); font-weight: normal; color: var(--btc-orange); text-shadow: 0 calc(var(--u) * 0.4) 0 #7a3d00, 0 0 calc(var(--u) * 1.2) var(--btc-orange-glow); }

#ov-ladder { padding: calc(var(--u) * 3); }
.ladder-panel { max-height: 100%; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 2.6) calc(var(--u) * 2.2); }
.ladder-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: calc(var(--u) * 0.25); overflow-y: auto; scrollbar-width: none; }
.ladder-list li { display: grid; grid-template-columns: max(calc(var(--u) * 6.5), 3.1em) calc(var(--u) * 4.4) auto 1fr; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 0.35) calc(var(--u) * 1.2); font-size: max(7.5px, calc(var(--u) * 2.3)); color: #aab2d6; border-radius: 2px; text-align: left; }
.ladder-list li .lv { text-align: right; font-variant-numeric: tabular-nums; }
.ladder-list li img { width: calc(var(--u) * 4.4); justify-self: center; image-rendering: pixelated; }
.ladder-list li .amt { text-align: right; white-space: nowrap; }
.ladder-list li .note { display: flex; align-items: center; justify-content: flex-end; gap: 0.5em; font-size: 0.72em; color: var(--pill); white-space: nowrap; }
.ladder-list li .note img { width: auto; height: 1.5em; }
.ladder-list li .note:empty { display: none; }
.ladder-list.stack li .note { grid-column: 3 / -1; justify-content: flex-start; }   /* tiny phones: notes on their own line */
.ladder-list li.now .note img { filter: brightness(0); }
.ladder-list li.lvl { color: #fff; }
.ladder-list li.safe { color: var(--gold); }
.ladder-list li.top .amt { color: var(--btc-orange); }
.ladder-list li.done { color: #6a7194; }
.ladder-list li.now { background: var(--btc-orange); color: #000; }
.ladder-list li.now .note { color: #000; }

.poll-crowd { display: flex; justify-content: center; gap: calc(var(--u) * 2.4); }
.poll-crowd img { height: calc(var(--u) * 8); width: auto; image-rendering: pixelated; animation: bob 0.5s ease-in-out infinite alternate; }
.poll-crowd img:nth-child(2) { animation-delay: 0.12s; } .poll-crowd img:nth-child(3) { animation-delay: 0.24s; } .poll-crowd img:nth-child(4) { animation-delay: 0.36s; }
@keyframes bob { to { transform: translateY(calc(var(--u) * -1)); } }
.poll-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 3); width: 86%; height: calc(var(--u) * 34); align-items: end; }
.pbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 1); height: 100%; font-size: max(9px, calc(var(--u) * 2.8)); }
.pbar .pct { color: #fff; }
.pbar .col { width: 100%; height: 0%; background: linear-gradient(180deg, #ffc063, var(--btc-orange)); box-shadow: 0 0 calc(var(--u) * 1.2) var(--btc-orange-glow); transition: height 0.9s cubic-bezier(.2,.8,.2,1); }
.pbar .key { color: var(--btc-orange); }
.pbar.out .col { background: #232a45; box-shadow: none; }
.pbar.out .pct, .pbar.out .key { color: #4a5070; }

.dm-panel { align-items: stretch; text-align: left; border-color: #b51f1f; box-shadow: 0 0 calc(var(--u) * 2.4) rgba(255, 31, 31, 0.5); }
.dm-head { display: flex; align-items: center; gap: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 1.6); border-bottom: 1px solid #3a1420; }
.dm-head img { width: calc(var(--u) * 10); height: auto; image-rendering: pixelated; background: #1a0a0f; border: 2px solid #ff1f1f; border-radius: 2px; }
.dm-name { display: block; font-size: max(10px, calc(var(--u) * 3)); color: #fff; }
.dm-sub { display: block; margin-top: calc(var(--u) * 0.8); font-size: max(7.5px, calc(var(--u) * 2)); color: var(--text-dim); }
.dm-thread { display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); min-height: calc(var(--u) * 28); }
.dm-me, .dm-them { margin: 0; max-width: 88%; padding: calc(var(--u) * 1.6) calc(var(--u) * 2); font-size: max(9px, calc(var(--u) * 2.7)); line-height: 1.6; border-radius: calc(var(--u) * 1.2); }
.dm-me { align-self: flex-end; background: #1f4dff; color: #fff; }
.dm-them { align-self: flex-start; background: #2a1016; color: #fff; border: 1px solid #ff1f1f; }
.dm-typing { display: inline-flex; gap: 0.4em; }
.dm-typing i { width: 0.5em; height: 0.5em; background: #ff6b6b; animation: typing 0.9s ease-in-out infinite; }
.dm-typing i:nth-child(2) { animation-delay: 0.15s; } .dm-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 50% { transform: translateY(-0.4em); opacity: 0.5; } }
#btn-maxi-close { align-self: center; }

.walk-amount { margin: 0; font-size: max(11px, calc(var(--u) * 3.8)); line-height: 1.6; color: #fff; }
.walk-amount b { color: var(--btc-orange); font-weight: normal; }
.walk-risk { margin: 0; font-size: max(8.5px, calc(var(--u) * 2.5)); line-height: 1.7; color: var(--text-dim); }

#ov-presenter { cursor: pointer; }
.presenter-panel { border-color: var(--btc-orange); box-shadow: 0 0 calc(var(--u) * 3) var(--btc-orange-glow); }
.presenter-img { height: calc(var(--u) * 30); width: auto; image-rendering: pixelated; animation: bob 0.8s ease-in-out infinite alternate; }
.presenter-name { margin: 0; font-size: max(13px, calc(var(--u) * 5)); color: var(--btc-orange); text-shadow: 0 calc(var(--u) * 0.5) 0 #7a3d00; }
.presenter-sub { margin: 0; font-size: max(9px, calc(var(--u) * 2.6)); line-height: 1.6; color: var(--gold); }
.presenter-line { margin: 0; font-size: max(9.5px, calc(var(--u) * 2.9)); line-height: 1.75; color: #fff; }
.presenter-skip { margin: 0; font-size: max(7.5px, calc(var(--u) * 2)); color: var(--text-dim); }

#ov-banner { background: rgba(0, 0, 0, 0.82); cursor: pointer; }
.banner { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4); width: 100%; padding: calc(var(--u) * 4) calc(var(--u) * 3); background: rgba(2, 4, 12, 0.94); border: 2px solid var(--gold); border-radius: calc(var(--u) * 1); box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 198, 41, 0.6); animation: pop 0.45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.banner-img { height: calc(var(--u) * 20); width: auto; image-rendering: pixelated; animation: badge-in 0.7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes badge-in { 0% { transform: translateY(-40%) scaleX(0.1); } 60% { transform: translateY(0) scaleX(-1); } 100% { transform: scaleX(1); } }
.banner-kicker { margin: 0; font-size: max(9px, calc(var(--u) * 2.8)); letter-spacing: 0.12em; color: #fff; }
.banner-host { display: flex; align-items: center; gap: calc(var(--u) * 2); max-width: 100%; text-align: left; }
.banner-host img { flex: none; height: calc(var(--u) * 11); width: auto; image-rendering: pixelated; }
.banner-host p { margin: 0; font-size: max(8.5px, calc(var(--u) * 2.6)); line-height: 1.6; color: var(--pill); }
.banner [hidden] { display: none; }
.banner.hush { border-color: #3a3f5c; box-shadow: none; }
.banner.hush .banner-img { animation: none; height: calc(var(--u) * 24); }
.banner.hush .banner-title { color: #8d93b8; text-shadow: none; letter-spacing: 0.3em; }
.banner.hush .banner-sub { color: var(--text-dim); }
.banner-title { margin: 0; font-size: max(16px, calc(var(--u) * 7)); color: var(--gold); text-shadow: 0 calc(var(--u) * 0.7) 0 #7a5200, 0 0 calc(var(--u) * 2.4) rgba(255, 198, 41, 0.8); line-height: 1.3; }
.banner.win .banner-title { font-size: calc(var(--u) * 6.2); white-space: nowrap; }   /* ₿ILLIONAIRE! fits the smallest phones */
.banner-title .title-b { height: 1.3em; width: auto; vertical-align: -0.28em; margin-right: 0.04em; image-rendering: pixelated; }
.banner-sub { margin: 0; font-size: max(10px, calc(var(--u) * 3.2)); color: #fff; line-height: 1.6; }

/* ======================= REVIEW YOUR RUN (results) ======================= */
#ov-review { padding: calc(var(--u) * 3); }
.review-panel {
  --rfit: 1;                     /* screens.js lowers this (to 0.7) when a long question doesn't fit a short screen */
  max-height: 100%; min-height: 0;
  align-items: stretch; text-align: left;
  gap: calc(var(--u) * 1.6 * var(--rfit));
  padding: calc(var(--u) * 2.4 * var(--rfit)) calc(var(--u) * 2.4);
}
/* pan-y: the text scrolls up and down, but a sideways swipe stays a swipe (main.js steps to the next question) */
.review-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6 * var(--rfit)); overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
.review-body::-webkit-scrollbar { display: none; }
.review-body.more { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }   /* more below: scroll */
.review-nav { flex: none; }
.review-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(var(--u) * 1) calc(var(--u) * 1.5); }
.review-tag { white-space: nowrap; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4); font-size: max(7.5px, calc(var(--u) * 2)); color: #000; background: var(--btc-orange); border-radius: 2px; letter-spacing: 0.06em; }
.review-status { font-size: max(7.5px, calc(var(--u) * 2.2)); white-space: nowrap; }
.review-status.right { color: var(--green); }
.review-status.wrong { color: var(--danger); }
.review-status.walk { color: var(--btc-orange); }
.review-q { margin: 0; font-size: max(9px, calc(max(11px, var(--u) * 3.4) * var(--rfit))); line-height: 1.55; color: #fff; text-wrap: balance; }
.review-answers { display: grid; gap: calc(var(--u) * 1 * var(--rfit)); }
.review-ans {
  display: grid; grid-template-columns: calc(var(--u) * 5) 1fr auto; align-items: center; gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1 * var(--rfit)) calc(var(--u) * 1.6) calc(var(--u) * 1 * var(--rfit)) calc(var(--u) * 1.2);
  font-size: max(8px, calc(max(9.5px, var(--u) * 2.8) * var(--rfit))); line-height: 1.45; color: #fff;
  background: var(--panel); border: 2px solid #2a4bd8; border-radius: calc(var(--u) * 1);
}
.review-ans .ans-key { font-size: max(7.5px, calc(var(--u) * 2.6)); border-width: 2px; }
.review-ans.right { border-color: var(--green); background: rgba(10, 70, 28, 0.95); }
.review-ans.right .ans-key { background: var(--green); border-color: var(--green); color: #000; }
.review-ans.wrong { border-color: var(--danger); background: rgba(80, 8, 14, 0.95); }
.review-ans.wrong .ans-key { background: var(--danger); border-color: var(--danger); color: #000; }
.review-ans.dim { opacity: 0.45; }
.review-ans.gone { opacity: 0.3; }
.review-ans.gone .review-ans-text { text-decoration: line-through; }
.review-you { padding: 0.3em 0.5em; font-size: max(7px, calc(var(--u) * 1.8)); white-space: nowrap; border: 1px solid currentColor; border-radius: 2px; }
.review-fact { margin: 0; font-size: max(7.5px, calc(max(9px, var(--u) * 2.6) * var(--rfit))); line-height: 1.6; color: #e6e9f5; }
.review-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 2); }
.review-nav #btn-review-close { min-width: calc(var(--u) * 24); }
.review-nav .review-arrow { min-width: 0; }
.review-nav #btn-review-prev { justify-self: start; }
.review-nav #btn-review-next { justify-self: end; }
.review-arrow .px-arrow { width: 1.2em; height: 1.2em; }
.px-arrow.flip { transform: scaleX(-1); }

/* Phone held sideways: cover the game with a "turn your phone" message */
.rotate-msg { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-msg {
    display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; text-align: center;
    background: #05070f; color: var(--btc-orange); font-family: var(--font-arcade); font-size: 16px; line-height: 1.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ans, .pbar .col { transition: none; }
  .btn-broadcast:not(:disabled), .poll-crowd img, .presenter-img, .banner, .banner-img, .shake, .ans.locked, .ans.right.reveal-right,
  .chain i.now, .verify-label, .dm-typing i, .presenter-skip, .lifebar.call .life:not(.used):not(:disabled), .bil-badges img, .bil-row { animation: none; }
}

/* the way back to the arcade stays on the "turn your phone" screen (same button as the home's top-left corner) */
.rotate-msg p { margin: 0; }
.rotate-msg .rotate-arcade {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: auto;
  width: auto; gap: 8px; padding: 0 12px 0 10px; font-family: var(--font-arcade); font-size: 10px; line-height: 1; text-decoration: none;
}
.rotate-msg .rotate-arcade .px-arrow { width: 14px; height: 14px; shape-rendering: crispEdges; }
/* bigger screens shaped like the game (an iPad held upright): the board starts below the corner buttons (main.js decides) */
.app.icons-clear.bil-board .stage-area { height: calc(100% - 50px); margin-top: 50px; }