/* Block Buster. Two colour families + one accent.
   Chain (zone A): cool blue.  Your game (zone B): violet.  Accent (live score + cash out ONLY): amber. */
:root {
  --bg: #07090d; --fg: #eef2f7; --dim: #96a1b1; --line: #1b222c;   /* was #8a95a5, 6.57:1; now 7.62:1 on the page background */
  --cardano: #0033ad;                     /* Cardano blue, the anchor */
  /* The -dim pair is secondary text only - labels, notes, supporting lines - never a fill or a
     border. Measured 2026-09-24: chain-dim was 3.92:1 and game-dim 2.51:1 against their own
     backgrounds, both below the 4.5:1 that small text needs to be read without effort. Raised to
     7.25 and 6.73, which leaves a clear step below the primaries they sit under (chain 9.14,
     game 9.48) so the hierarchy is unchanged - they are readable now, not promoted. */
  --chain: #7fb1ff; --chain-dim: #799ce0; --chain-bg: #050d24; --chain-line: #1a3a8a; --chain-text: #ffffff;
  --game: #c9a8ff; --game-dim: #a391cc; --game-bg: #120f1c; --game-line: #2d2547;
  --acc: #ffb020;
  --gnp: #00e88c; --gnp-deep: #00c878;    /* GNP1's own green. Branding only: never the score, never cash out. */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, system-ui, "Segoe UI", Roboto, Inter, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; overflow-x: hidden; }
/* overflow-x: clip, not hidden: clip does not create a scroll container, so the sticky header keeps
   working. It stops the bust shake - an 8px translate on the play area - from pushing content past
   the right edge, which on a mobile viewport makes the browser rescale the page. That rescale moved
   the sound dialog by a few pixels mid-bust even though the dialog is fixed and outside #app. */
#app { min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 10px 12px calc(20px + env(safe-area-inset-bottom)); }
h1 { font-size: 34px; letter-spacing: .12em; margin: 12px 0 6px; font-weight: 800; }
h2 { font-size: 20px; margin: 18px 0 6px; }
p { line-height: 1.45; }
.small { font-size: 14px; color: var(--dim); }
.lbl { font-size: 10px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.err { color: #ff8a80; }
.warn { color: #ffd6a0; font-size: 15px; }
a { color: var(--chain); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; }
button:disabled { opacity: .4; cursor: default; }
.primary { background: #e6ebf2; color: #0b0d12; font-weight: 800; padding: 14px 18px; font-size: 17px; letter-spacing: .06em; width: 100%; margin-top: 12px; }
.secondary { background: #0e1218; color: var(--fg); border: 1px solid var(--line); padding: 12px 16px; font-weight: 600; width: 100%; margin-top: 10px; text-align: center; text-decoration: none; display: block; }
.link { background: none; color: var(--dim); text-decoration: underline; padding: 8px 0; font-size: 14px; }
.big { padding: 18px; font-size: 19px; }

/* ---------- ZONE A: the chain ---------- */
.zone-a { position: sticky; top: 0; z-index: 5; border-bottom: 2px solid var(--cardano);
  background: radial-gradient(circle at 12% 0%, rgba(0,51,173,.55), transparent 55%), radial-gradient(circle at 88% 100%, rgba(0,51,173,.35), transparent 50%), var(--chain-bg);
  background-image: radial-gradient(rgba(127,177,255,.16) 1px, transparent 1.2px), radial-gradient(circle at 12% 0%, rgba(0,51,173,.55), transparent 55%), radial-gradient(circle at 88% 100%, rgba(0,51,173,.35), transparent 50%);
  background-size: 14px 14px, auto, auto; background-color: var(--chain-bg); transition: opacity .3s; }
#hb { display: block; width: 100%; height: 112px; }
/* a real row: the badge, the help pill and the block height share it, and none of them sits on top of
   the heartbeat drawing below */
.hb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 12px 2px; }
/* GNP1's credit. Last in the row, so on a narrow phone it is the one item that drops to a second line
   instead of squeezing the badge, the help pill or the block height. */
.gnp1 { flex: none; font: 700 10px/1.2 var(--mono); letter-spacing: .1em; color: var(--gnp); text-decoration: none; white-space: nowrap; }
.gnp1:hover, .gnp1:focus-visible { color: #6effc4; }
/* Wherever the credit takes its own line it is set a shade smaller, and the row is tightened, so the
   header keeps its height and the heartbeat below it keeps as much room as possible. */
@media (max-width: 699px) {
  .hb-top { gap: 2px 8px; padding: 3px 12px 0; }
  .live-badge, .block-h, .gnp1 { line-height: 1; }
  .helpbtn { padding: 3px 9px; }
  .gnp1 { font-size: 9px; letter-spacing: .08em; }
  .soundbtn { font-size: 9px; letter-spacing: .1em; padding: 3px 8px; }
}
/* On desktop the row lines up with the page's own gutters, so the credit ends where the content does
   instead of hanging off the right edge. */
@media (min-width: 900px) {
  .hb-top { padding: 6px 32px 2px; }
  /* one line up here, so ordering is free: the switch sits with the badge and HELP, and the credit
     stays at the right edge where nothing can push it off */
  .live-badge { order: 1; } .soundbtn { order: 2; } .helpbtn { order: 3; } .block-h { order: 4; } .gnp1 { order: 5; }
}
@media (min-width: 1400px) { .hb-top { padding: 6px 48px 2px; } }
.live-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 10px var(--mono); letter-spacing: .22em; color: var(--chain-text); display: flex; align-items: center; gap: 6px; }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #35e08a; box-shadow: 0 0 0 0 rgba(53,224,138,.7); animation: livepulse 1.6s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(53,224,138,.7) } 100% { box-shadow: 0 0 0 9px rgba(53,224,138,0) } }
.block-h { margin-left: auto; flex: none; white-space: nowrap; font: 700 11px var(--mono); letter-spacing: .08em; color: var(--chain-text); }
.block-h span { color: var(--chain-dim); font-weight: 400; }

/* The sound switch. Last in the row for the same reason as the credit: on a phone it shares the
   second line rather than pushing the block height off the first. The speaker is drawn in CSS, so
   there is no icon font and no image to load. */
.soundbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 800 10px/1 var(--mono); letter-spacing: .14em; color: var(--chain-dim);
  background: rgba(5,13,36,.75); border: 1px solid var(--chain-line); border-radius: 999px; padding: 4px 9px; }
.soundbtn .snd-ico { width: 10px; height: 10px; flex: none; position: relative; }
.soundbtn .snd-ico::before { content: ''; position: absolute; left: 0; top: 3px; width: 3px; height: 4px; background: currentColor; }
.soundbtn .snd-ico::after { content: ''; position: absolute; left: 3px; top: 0; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 6px solid currentColor; }
/* the state is carried by the colour and by the word, so the cone itself never changes */
.soundbtn .snd-txt { display: inline-block; min-width: calc(9ch + 1.35em); text-align: left; }
.soundbtn[aria-pressed="true"] { color: var(--game); border-color: var(--game-line); background: rgba(45,37,71,.55); }
.soundbtn:hover { color: var(--chain-text); }
.soundbtn[aria-pressed="true"]:hover { color: #e4d6ff; }
.soundbtn:focus-visible { outline: 2px solid var(--chain); outline-offset: 2px; }

/* ---------- GNP1 branding ---------- */
/* the entry screen: a first-time visitor's only look at who made this, so it gets room */
.gnp1-card { border: 1px solid rgba(0,232,140,.32); background: linear-gradient(180deg, rgba(0,232,140,.10), rgba(0,232,140,.035));
  border-radius: 14px; padding: 14px 15px 15px; margin: 18px 0 0; }
.gnp1-card h2 { margin: 0 0 7px; font-size: 16px; letter-spacing: .02em; line-height: 1.3; }
.gnp1-card a.gnp1-home { color: var(--gnp); text-decoration: none; }
.gnp1-card a.gnp1-home:hover, .gnp1-card a.gnp1-home:focus-visible { text-decoration: underline; }
.gnp1-card .gnp1-tag { margin: 0; font: 700 11px/1.5 var(--mono); letter-spacing: .1em; color: #8fe8c4; }
.gnp1-card .gnp1-since { margin: 2px 0 10px; font: 400 10px/1.5 var(--mono); letter-spacing: .14em; color: var(--dim); }
.gnp1-card p.gnp1-pitch { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: #dcefe6; }
.gnp1-card .gnp1-cta { display: inline-block; font: 800 13px/1 var(--mono); letter-spacing: .08em; color: #04140d;
  background: var(--gnp); border-radius: 999px; padding: 10px 15px; text-decoration: none; }
.gnp1-card .gnp1-cta:hover { background: #6effc4; }
/* the other pages have no chain header, so they get a slim strip carrying the same credit */


/* ---------- the sound question ---------- */
/* A dialog, not a banner. It covers the page, takes the focus, and the only way past it is one of
   the two buttons: no click-outside, no escape, no tabbing away. Styled as part of the game rather
   than as a browser alert. */
.sound-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 6, 14, .82); backdrop-filter: blur(3px); animation: smIn .18s ease-out; }
@keyframes smIn { from { opacity: 0 } to { opacity: 1 } }
.sound-modal .sm-box { width: 100%; max-width: 460px; border: 2px solid var(--game-line); border-radius: 16px;
  background: radial-gradient(circle at 20% 0%, rgba(201,168,255,.16), transparent 60%), #0d0a16;
  box-shadow: 0 24px 70px rgba(0,0,0,.65); padding: 20px 20px 18px; animation: smUp .22s ease-out; }
@keyframes smUp { from { transform: translateY(10px) } to { transform: none } }
.sound-modal .sm-kicker { display: block; font: 800 11px/1 var(--mono); letter-spacing: .22em; color: var(--game); margin-bottom: 10px; }
.sound-modal .sm-head { margin: 0 0 8px; font-size: 21px; line-height: 1.25; letter-spacing: .01em; color: #fff; }
.sound-modal .sm-text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #cfc2f2; }
.sound-modal .sm-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sound-modal .sm-btn { flex: 1 1 auto; min-width: 140px; cursor: pointer;
  font: 700 15px/1 var(--sans); letter-spacing: .01em; color: var(--fg);
  background: #15101f; border: 1px solid var(--game-line); border-radius: 999px; padding: 14px 16px; }
.sound-modal .sm-btn:hover { border-color: var(--game); }
.sound-modal .sm-btn:focus-visible { outline: 2px solid var(--game); outline-offset: 3px; }
.sound-modal .sm-btn.sm-yes { background: var(--game); color: #1a0f2e; border-color: var(--game); font-weight: 800; }
.sound-modal .sm-btn.sm-yes:hover { background: #ddc6ff; }
/* the consent variant: the same dialog, wearing the warning */
.sound-modal.sm-consent .sm-box { border-color: #ff8a80; background: radial-gradient(circle at 20% 0%, rgba(255,82,82,.18), transparent 60%), #140a0c; }
.sound-modal.sm-consent .sm-kicker { color: #ff8a80; }
.sound-modal.sm-consent .sm-text { color: #ffd9d5; }
.sound-modal.sm-consent .sm-btn { border-color: rgba(255,138,128,.45); background: #1d1113; }
.sound-modal.sm-consent .sm-btn.sm-yes { background: #ff8a80; color: #2a0505; border-color: #ff8a80; }
.sound-modal.sm-consent .sm-btn.sm-yes:hover { background: #ffada5; }
@media (max-width: 420px) { .sound-modal .sm-head { font-size: 19px; } .sound-modal .sm-btn { flex-basis: 100%; } }

.pagebar { position: sticky; top: 0; z-index: 5; padding: 8px 12px; border-bottom: 1px solid var(--chain-line); background: var(--chain-bg); }

/* Narrow phones: a real block height is ~105px of monospace, so the badge, the help pill and the block
   height only just fit across 360px. Tighten the tracking rather than cut any wording, and take the
   difference back out of the decorative heartbeat so the header is no taller than it was. */
@media (max-width: 429px) {
  .hb-top { gap: 2px 6px; padding: 3px 10px 0; }
  .live-badge { letter-spacing: .1em; }
  .block-h { font-size: 9px; letter-spacing: .02em; }
}
/* On a phone this card does NOT stick: pinned, it floats over the prize card, the top-3 banner and the
   feed notice as they scroll under it, which is what made the page look broken. The heartbeat header
   stays pinned, which is the part players watch. On desktop it sits in its own column and sticking is
   free, so that is set in the wide breakpoint below. */
.zone-a-card { position: static; z-index: 4; background: linear-gradient(180deg, #071233, var(--chain-bg)); border: 1px solid var(--chain-line); border-top: 0; border-radius: 0 0 14px 14px; margin: 0 -12px 10px; padding: 6px 0 2px; }
.a-row { padding: 2px 12px 4px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; font-family: var(--mono); }
.since { display: flex; align-items: center; gap: 8px; }
.since .lbl { display: block; color: var(--chain-dim); }
.since b { font-size: 26px; color: var(--chain-text); }
.arc { width: 46px; height: 46px; transform: rotate(-90deg); flex: none; }
.arc circle { fill: none; stroke-width: 6; }
.arc-bg { stroke: var(--chain-line); }
.arc-mean { stroke: var(--chain); stroke-dasharray: 2 167.6; stroke-dashoffset: -56.5; }   /* tick at 20 s = the mean gap */
.arc-fill { stroke: var(--chain-text); stroke-dasharray: 169.6; stroke-dashoffset: 169.6; stroke-linecap: round; }
.a-epoch { font-size: 12px; color: var(--chain); min-width: 0; }
.a-epoch .lbl { color: var(--chain-dim); }
.a-epoch b { color: var(--chain-text); }
/* EPOCH / ENDS IN: labels in one column, values in the next, so both rows line up */
.a-epoch-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: baseline; }
.ep-mid { display: contents; }
.ep-mid.wide > * { grid-column: 1 / -1; }   /* claim state: one wide line instead of a label/value pair */
.a-epoch-rows > .lbl { justify-self: start; }
.ep-bar { height: 4px; background: var(--chain-line); border-radius: 2px; margin: 4px 0 3px; overflow: hidden; }
.ep-bar i { display: block; height: 100%; width: 0; background: var(--chain); }
.ep-when { font-size: 11px; color: var(--chain); }
.claimbtn { background: var(--chain-text); color: var(--cardano); font-weight: 800; padding: 8px; letter-spacing: .1em; width: 100%; margin-top: 6px; }
.hb-hint { padding: 0 12px 6px; font-size: 10px; color: var(--chain); line-height: 1.3; }
.hb-hint a { color: var(--chain); }
.hb-hint a { color: var(--chain-dim); }
.claiming #ep-mid { white-space: normal; }
.claiming #ep-mid b { color: #fff; }

/* ---------- ZONE B: your game ---------- */
.zone-b { background: var(--game-bg); border: 1px solid var(--game-line); border-radius: 14px; padding: 12px 14px; margin-top: 12px; font-family: var(--mono); color: var(--game); transition: opacity .3s, transform .3s; }
.b-head { display: flex; justify-content: space-between; align-items: baseline; }
.b-head b { font-size: 20px; color: #fff; }
.zone-b .lbl { color: var(--game-dim); }
.b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.b-grid > div { background: rgba(201,168,255,.05); border-radius: 10px; padding: 8px 10px; }
.b-grid .lbl { display: block; }
.b-grid b { font-size: 24px; color: #fff; }
.b-rounds { margin-top: 8px; }
.b-rounds b { color: #fff; font-size: 18px; }
.pips { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin-top: 6px; }
.pips i { display: block; height: 7px; border-radius: 2px; background: var(--game); }
.pips i.used { background: var(--game-line); }
.b-next { margin-top: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.b-next b { font-size: 22px; color: #fff; }
.lb { margin-top: 12px; border-top: 1px solid var(--game-line); padding-top: 8px; }
.lb .small { color: var(--game-dim); font-family: var(--sans); }
.lb-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .1em; }
.lb-head b { color: #fff; }
#lb { list-style: none; padding: 0; margin: 6px 0; }
#lb li, .lb-you { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--game-line); font-size: 14px; }
#lb li.me { color: #fff; background: rgba(201,168,255,.18); border-left: 4px solid var(--game); padding-left: 8px; font-weight: 700; border-radius: 6px; margin: 2px 0; }
#lb li.me span:nth-child(2)::after { content: 'YOU'; margin-left: 8px; font-size: 10px; letter-spacing: .16em; background: var(--game); color: #120f1c; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.lb-you { color: #fff; }
.lb-you { border: 1px solid var(--game); border-radius: 8px; padding: 8px; margin-top: 8px; }
.lb-you .note { grid-column: 1 / -1; color: var(--game-dim); font-family: var(--sans); font-size: 12px; }
.lb-note { color: var(--game-dim); font-family: var(--sans); font-size: 12px; padding: 8px 2px 0; }

/* ---------- ZONE C: the play area ---------- */
.zone-c { text-align: center; padding: 8px 0 4px; transition: min-height .3s; overflow: hidden; }   /* clips the live glow so it never widens the viewport */
.c-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--dim); padding: 0 2px; }
.c-inplay b { color: var(--fg); font-size: 14px; }
#score-wrap { min-height: 96px; position: relative; padding: 4px 0; }
.score { font-family: var(--mono); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--dim); will-change: transform; transition: color .2s; }
.rate { font-family: var(--mono); color: var(--dim); font-size: 15px; height: 20px; }
.c-break .ring { position: relative; width: 96px; height: 96px; margin: 0 auto 6px; }
.ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring-bg { stroke: var(--line); }
.ring-fill { stroke: var(--game); stroke-dasharray: 326.7; stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px var(--mono); color: #fff; }
.result { font-family: var(--mono); padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; color: var(--dim); }
.result.banked { border-color: #fff; color: #fff; }
.cash { width: 100%; padding: 26px 20px; margin-bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 30px; font-weight: 900; letter-spacing: .1em; background: var(--acc); color: #1a1200; border-radius: 16px; animation: breathe 1s ease-in-out infinite; }
.cash:active { transform: scale(.98); }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(255,176,32,0); } 50% { box-shadow: 0 0 34px 2px rgba(255,176,32,.35); } }

/* ---------- PHASE HIERARCHY ---------- */
/* BREAK: A and B are the content; C is quiet. */
[data-phase="break"] .zone-c { padding-bottom: 8px; }
[data-phase="break"] #score-wrap { display: none; }   /* the play area is quiet in the break: the ring is the content */
/* LIVE: C takes over; A and B recede but stay visible; the heartbeat canvas itself stays at full strength. */
[data-phase="live"] .zone-c { min-height: 50dvh; display: flex; flex-direction: column; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) {
  [data-phase="live"] .hb-hint, [data-phase="live"] .a-claim, [data-phase="live"] .ep-when { display: none; }   /* the card recedes to the timer and the essentials */
  /* The top-3 banner reads the same on a phone as on a desktop: the full sentence, with the boundary
     time and the countdown in red. It wraps rather than being cut down. */
  [data-phase="live"] #score-wrap { min-height: 120px; }
}
[data-phase="live"] #score-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 160px; }
[data-phase="live"] .score { font-size: var(--scoresize, 96px); color: var(--acc); text-shadow: 0 0 calc(var(--glow, 0) * 1px) rgba(255,176,32,.55); }
[data-phase="live"] .rate { color: var(--acc); }
[data-phase="live"] #score-wrap::before { content: ""; position: absolute; inset: -30px; background: radial-gradient(closest-side, rgba(255,176,32, calc(var(--heat, 0) * .22)), transparent); pointer-events: none; }
[data-inround="1"] .a-epoch, [data-inround="1"] .hb-hint { opacity: .55; }   /* the timer itself never dims */
[data-inround="1"] .zone-b { opacity: .45; transform: scale(.97); }
/* PRESSED / PENDING: the countdown owns the screen; everything else goes quiet. */
[data-entry="pressed"] .a-epoch, [data-entry="pending"] .a-epoch, [data-entry="pressed"] .hb-hint, [data-entry="pending"] .hb-hint { opacity: .4; }
/* PAUSED */
[data-phase="paused"] .zone-c { display: none; }

/* ---------- overlays (below the chain header) ---------- */
.overlay { position: fixed; inset: 0; top: var(--hdr, 130px); z-index: 4; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  padding: 26px 24px calc(32px + env(safe-area-inset-bottom)); }
.co-state { font-size: 13px; letter-spacing: .3em; color: var(--dim); }
.co-score { font-family: var(--mono); font-size: 64px; font-weight: 800; margin: 8px 0; font-variant-numeric: tabular-nums; color: var(--fg); }
.co-count { font-family: var(--mono); font-size: 112px; font-weight: 900; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.co-msg { margin-top: 16px; font-size: 16px; color: #c5ccd6; max-width: 360px; }
#cashout.pending .co-count { font-size: 20px; color: var(--dim); letter-spacing: .2em; animation: blink 1.2s ease-in-out infinite; }
#cashout.banked { background: #eef2f7; color: #0b0d12; }
#cashout.banked .co-state, #cashout.banked .co-score, #cashout.banked .co-count, #cashout.banked .co-msg { color: #0b0d12; }
#cashout.bust .co-score { color: var(--dim); text-decoration: line-through; }
#cashout.bust .co-count { font-size: 64px; }
@keyframes blink { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.bc-height { font-family: var(--mono); font-size: 40px; font-weight: 800; margin-top: 8px; color: var(--chain); }
.bc-hash { font-family: var(--mono); font-size: 12px; color: var(--dim); word-break: break-all; max-width: 420px; margin: 8px 0 10px; }
.bc-you { font-family: var(--mono); font-size: 22px; margin: 14px 0 4px; }
.bc-you.banked { color: #fff; }
#pause .co-score { font-size: 26px; letter-spacing: .1em; }
#pause p { max-width: 360px; }
#void p { max-width: 360px; }

/* ---------- bust effects ---------- */
#flash { position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .55s ease-out forwards; }
@keyframes flash { 0% { opacity: .95 } 100% { opacity: 0 } }
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90% { transform: translate3d(-2px,0,0) } 20%,80% { transform: translate3d(4px,0,0) } 30%,50%,70% { transform: translate3d(-8px,0,0) } 40%,60% { transform: translate3d(8px,0,0) } }
.shard { display: inline-block; animation: shard .9s ease-in forwards; }
@keyframes shard { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.conn { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: #e6ebf2; color: #0b0d12; text-align: center; font-weight: 700; padding: 8px 12px; font-size: 13px; letter-spacing: .12em; }
.conn b { display: block; font-size: 15px; letter-spacing: .14em; }
.conn span { display: block; font-weight: 600; letter-spacing: 0; font-size: 13px; line-height: 1.35; margin-top: 2px; }
.conn.lost { background: #ff5252; color: #fff; }
.conn.unconfirmed { background: #ffb020; color: #1a1200; animation: connpulse 1.2s ease-in-out infinite; }
@keyframes connpulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
/* cash out pressed but never acknowledged by the server */
.overlay.unconfirmed { border-color: #ffb020; }
.overlay.unconfirmed #co-state { color: #ffb020; }

/* ---------- entry / key / claim ---------- */
.tag { font-size: 16px; color: #c5ccd6; }
.beta { border: 1px solid var(--chain-line); border-radius: 10px; padding: 10px 14px; margin: 14px 0 6px; background: var(--chain-bg); }
.beta b { color: var(--chain); letter-spacing: .3em; font-size: 12px; }
.beta p { margin: 6px 0; font-size: 15px; }
.filter { width: 100%; font: 18px var(--sans); padding: 12px 14px; background: #0e1218; color: var(--fg); border: 1px solid var(--line); border-radius: 10px; margin: 8px 0 6px; }
.filter:focus { outline: none; border-color: var(--game); }
.pick { min-height: 20px; color: var(--game); margin: 2px 0 6px; }
.namegroups details { border-top: 1px solid var(--line); }
.namegroups summary { cursor: pointer; padding: 10px 2px; font-weight: 700; letter-spacing: .04em; display: flex; justify-content: space-between; list-style: none; }
.namegroups summary::-webkit-details-marker { display: none; }
.namegroups summary .n { color: var(--dim); font-weight: 400; font-size: 13px; }
.names { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.names button { position: relative; background: #0e1218; color: var(--fg); border: 1px solid var(--line); padding: 11px 4px; font-weight: 600; font-size: 14px; }
.names button .cnt { position: absolute; top: 3px; right: 6px; font-size: 10px; color: var(--dim); font-weight: 400; }
.names button.taken { color: #c5ccd6; }
.names button.sel { border-color: var(--game); color: var(--game); }
.namegroups .empty { color: var(--dim); padding: 12px 0; }
.check { display: flex; gap: 10px; align-items: center; margin: 14px 0 4px; font-size: 15px; line-height: 1.35; }
.check span { flex: 1; }
.check input { flex: none; }
.terms-link { color: var(--chain); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.ackbox .terms-link { color: #fff; }
.check input { width: 22px; height: 22px; accent-color: var(--game); }
.conditions { border: 1px solid var(--game-line); background: var(--game-bg); border-radius: 10px; padding: 8px 14px; margin-top: 18px; }
.conditions h2 { margin: 6px 0; font-size: 16px; letter-spacing: .08em; color: var(--game); }
.conditions ul { padding-left: 18px; margin: 6px 0; }
.conditions li { margin: 6px 0; font-size: 14px; color: #c5ccd6; }
.legal { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 10px; font-size: 13px; color: var(--dim); }
.legal p { margin: 6px 0; }
.key { font-family: var(--mono); font-size: 30px; letter-spacing: .08em; background: #0e1218; border: 1px solid var(--game); border-radius: 12px; padding: 18px 10px; text-align: center; color: var(--game); margin: 8px 0; }
.field { display: block; margin: 12px 0; font-size: 14px; color: var(--dim); }
.field input { display: block; width: 100%; margin-top: 4px; background: #0e1218; color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 16px var(--mono); }
.terms h2 { margin-top: 22px; }
.epochbar, .ep-when-inline { }

/* ---------- desktop: A and B side by side, play area central ---------- */
@media (min-width: 900px) {
  main.play { max-width: none; padding: 18px 32px; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 24px; align-items: start; }
  main:not(.play) { max-width: 720px; margin: 0 auto; padding: 18px 24px calc(24px + env(safe-area-inset-bottom)); }   /* help, terms, results: one readable column */
  .zone-a-card { grid-column: 1; position: sticky; top: var(--hdr, 132px); margin: 0 0 14px; border-radius: 14px; padding: 14px 0 6px; }   /* own column: nothing can scroll under it */
  .prize-card { grid-column: 1; margin: 0; padding: 18px 16px 15px; }
  .p-fig { font-size: 64px; }
  .p-next { font-size: 14px; }
  .a-row { grid-template-columns: 1fr; gap: 14px; }
  .since { flex-direction: column; align-items: flex-start; gap: 6px; }
  .since b { font-size: 44px; }
  .arc { width: 96px; height: 96px; }
  .a-epoch { font-size: 13px; }
  .ep-bar { height: 6px; }
  #hb { height: 130px; }
  .zone-a-card { grid-row: 1; }
  .prize-card { grid-row: 2; }
  #screens { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  .screen:not(.game) { max-width: 760px; }
  .game { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; gap: 0 24px; align-items: start; }
  .game > .top3 { grid-column: 1; grid-row: 1; margin: 0 0 14px; }   /* inside the centre column, wraps within it */
  .game .zone-c { grid-column: 1; grid-row: 2; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
  .game .zone-b { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; position: sticky; top: var(--hdr, 132px); }
  .score { font-size: 96px; }
  [data-phase="live"] .score { font-size: var(--scoresize-desktop, 200px); }
  [data-phase="live"] #score-wrap::before { inset: -80px; }
  .tsec { font-size: 26px; }
  .tbar { margin: 8px 40px 22px; }
  .cash { max-width: 640px; margin: 0 auto calc(8px + env(safe-area-inset-bottom)); display: block; padding: 32px 20px; font-size: 36px; }
  .primary.big { max-width: 520px; margin-left: auto; margin-right: auto; display: block; }
  .c-top { max-width: 900px; margin: 0 auto; width: 100%; }
  .c-break .ring { width: 128px; height: 128px; } .ring svg { width: 128px; height: 128px; } .ring circle { r: 52; }
}
@media (min-width: 1400px) {
  main.play { grid-template-columns: 420px minmax(0, 1fr); padding: 22px 48px; gap: 32px; }
  .game { grid-template-columns: minmax(0, 1fr) 460px; gap: 32px; }
  .since b { font-size: 52px; }
  #hb { height: 150px; }
}
/* phone landscape: keep the score and button on screen */
@media (max-height: 480px) and (orientation: landscape) {
  #hb { height: 36px; }
  .hb-hint { display: none; }
  [data-phase="live"] .zone-c { min-height: 0; }
  [data-phase="live"] .score { font-size: 64px; }
  .cash { padding: 16px; font-size: 22px; }
  .co-count { font-size: 72px; }
}
@media (prefers-reduced-motion: reduce) { .cash, .shard, .shake, #flash.on, #cashout.pending .co-count { animation: none; } }

/* banked moment: a shower of ADA coins */
.coins { position: fixed; inset: 0; pointer-events: none; z-index: 35; overflow: hidden; }
.coin { position: absolute; top: -40px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #7fb1ff 40%, var(--cardano) 75%); color: #fff; font: 800 18px var(--mono); display: grid; place-items: center; box-shadow: 0 0 12px rgba(127,177,255,.6); animation: coinfall var(--dur) cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes coinfall { 0% { transform: translate(0, 0) rotate(0); opacity: 0 } 8% { opacity: 1 } 100% { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9 } }
#cashout.banked { background: linear-gradient(180deg, #ffffff, #dfe9ff); }
#cashout.banked .co-state { color: var(--cardano); letter-spacing: .4em; }
#cashout.banked .co-count { color: var(--cardano); }
.bc-title { font: 800 22px var(--mono); letter-spacing: .12em; color: var(--chain-text); margin-top: 4px; }
.bc-sub { color: var(--chain); font-size: 14px; margin-top: 2px; }
.bc-height { color: var(--chain-text); }
#bustcard { background: radial-gradient(circle at 50% 0%, rgba(0,51,173,.45), transparent 60%), var(--bg); }

/* claim window notices */
.claimwin { border: 1px solid var(--chain); background: rgba(0,51,173,.18); border-radius: 10px; padding: 10px 14px; margin: 10px 0; color: #fff; }
.claimwin .cw-head { display: block; color: var(--chain); letter-spacing: .2em; font-size: 12px; margin-bottom: 4px; }
.claimwin .cw-mins { color: #fff; }
.claimwin p { margin: 4px 0; font-size: 15px; }
.lb .claimwin { font-family: var(--sans); color: #fff; }
.a-claim { font-size: 11px; color: var(--chain); margin-top: 2px; }
.a-claim b { color: #fff; }
.ep-cap { display: inline-block; white-space: nowrap; font-size: 10px; letter-spacing: .12em; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
/* final hour before the boundary: the countdown gets loud */
.final-hour #ep-mid b { color: #fff; font-size: 16px; animation: blink 1.4s ease-in-out infinite; }
.final-hour .a-claim { color: #fff; font-weight: 700; }
/* acknowledgement box */
.ackbox { border: 2px solid #ff5252; background: rgba(255,82,82,.08); border-radius: 10px; padding: 8px 14px 4px; margin-top: 16px; }
.ackbox b { color: #ff8a80; letter-spacing: .16em; font-size: 12px; }
.ackbox .check { margin: 10px 0; color: #fff; }
.ackbox .check input { accent-color: #ff5252; }
/* live round label */
[data-phase="live"] .c-state { color: #35e08a; text-shadow: 0 0 10px rgba(53,224,138,.9), 0 0 22px rgba(53,224,138,.5); font-weight: 800; }
/* in-play count: prominent */
.c-inplay { display: flex; align-items: baseline; gap: 6px; }
.c-inplay b { font-size: 26px; color: #fff; transition: color .2s, transform .2s; }
[data-phase="live"] .c-inplay b { font-size: 34px; color: #35e08a; text-shadow: 0 0 12px rgba(53,224,138,.6); }
.c-inplay b.drop { color: #ff5252; transform: scale(1.35); text-shadow: 0 0 16px rgba(255,82,82,.8); }
/* round timer: seconds counter and log-scale bar, banded green / amber / red */
.tsec { font-family: var(--mono); font-weight: 800; font-size: 20px; margin-top: 6px; }
.tsec.g { color: #35e08a; } .tsec.a { color: #ffb020; } .tsec.r { color: #ff5252; }
.tbar { position: relative; height: 10px; margin: 6px 10px 18px; border-radius: 5px; overflow: visible; background: #0e1218; }
.tbar .band { position: absolute; top: 0; bottom: 0; opacity: .35; }
.tbar .band.g { left: 0; width: 63.5%; background: #35e08a; border-radius: 5px 0 0 5px; }
.tbar .band.a { left: 63.5%; width: 13.9%; background: #ffb020; }
.tbar .band.r { left: 77.4%; width: 22.6%; background: #ff5252; border-radius: 0 5px 5px 0; }
.tbar .tfill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #fff; border-radius: 5px; opacity: .9; }
.tbar .tk { position: absolute; top: 12px; transform: translateX(-50%); font: 9px var(--mono); color: var(--dim); white-space: nowrap; }
.tbar .tk:last-child { transform: translateX(-100%); }
[data-phase="break"] .tsec, [data-phase="break"] .tbar { display: none; }
#pause .co-msg b { color: #fff; }

/* top-3 contention notice */
/* The contention box. Same on a phone and on a desktop. */
.top3 { border: 2px solid var(--game); background: linear-gradient(180deg, rgba(201,168,255,.16), rgba(201,168,255,.07));
  color: #fff; border-radius: 12px; padding: 12px 14px 13px; margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.t3-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.t3-rank { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--game); }
.t3-rank b { font-size: 18px; color: #fff; letter-spacing: 0; }
.t3-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: #1a0f2e; background: var(--game); border-radius: 999px; padding: 3px 9px; }
.t3-what { margin: 0; color: #e9e2ff; }
.t3-clock { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(201,168,255,.28); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.t3-lbl { color: #cfc2f2; font-size: 14px; }
.t3-cd { font-family: var(--mono); font-size: 27px; font-weight: 800; line-height: 1.05; color: #ff5252; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; animation: t3tick 1s steps(1, end) infinite; }
@keyframes t3tick { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .t3-cd { animation: none; } }
/* the final hour: the whole box escalates */
.top3.urgent { border-color: #ff5252; background: linear-gradient(180deg, rgba(255,82,82,.20), rgba(255,82,82,.08)); animation: urgentpulse 1.6s ease-in-out infinite; }
.top3.urgent .t3-rank { color: #ff8a80; } .top3.urgent .t3-tag { background: #ff5252; color: #fff; }
.top3.urgent .t3-what { color: #ffe3e0; }
.top3.urgent .t3-clock { border-top-color: rgba(255,82,82,.4); }
.top3.urgent .t3-cd { font-size: 31px; color: #ff8a80; }
/* Red and bold is reserved for the claim countdown: the only timer where a player loses the prize if it
   runs out. Every other countdown keeps its ordinary styling, so this one still means something. */
.cd { color: #ff5252; font-weight: 800; white-space: nowrap; }
/* the boundary date and time, wherever it is shown: the chain card and the claim notice */
.bd, .a-epoch .bd, .ep-when .bd, .claimwin .bd { color: #ff5252; font-weight: 800; }
@keyframes urgentpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,82,82,0) } 50% { box-shadow: 0 0 18px 2px rgba(255,82,82,.45) } }
[data-inround="1"] .top3 { opacity: .8; }

/* captions for the three play-area numbers: quiet, never competing */
.cap { font: 500 10px var(--mono); letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.cap-score { margin-bottom: 2px; }
.cap-time { margin-top: 8px; }
.rate-row { display: flex; justify-content: center; align-items: baseline; gap: 10px; }
.rate-row .cap { font-size: 9px; }
[data-phase="break"] .cap, [data-phase="break"] .rate-row { display: none; }
.tsec { margin-top: 2px; }

/* boundary waiting state: large, central, unmistakable */
.pause-title { font: 800 30px var(--mono); letter-spacing: .08em; color: #fff; margin-top: 6px; }
.pause-count { font: 800 22px var(--mono); letter-spacing: .06em; color: var(--chain); margin: 14px 0 6px; line-height: 1.3; }
.pause-msg { font-size: 18px; color: #fff; max-width: 480px; }
.pause-msg b { color: var(--chain); }
#pause { background: radial-gradient(circle at 50% 0%, rgba(0,51,173,.55), transparent 60%), var(--bg); border-top: 3px solid var(--cardano); }
.pause-claim { width: 100%; max-width: 520px; margin: 12px auto 0; text-align: left; border: 2px solid #fff; border-radius: 12px; padding: 6px 14px 14px; background: rgba(255,255,255,.04); }
.pause-claim .screen { max-width: none; }
/* last epoch's outcome, kept at the top of the new epoch */
.outcome { border: 1px solid var(--chain-line); background: var(--chain-bg); color: #fff; border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; font-size: 14px; }
.outcome a { color: var(--chain); }
@media (min-width: 900px) { .pause-title { font-size: 44px; } .pause-count { font-size: 30px; } .pause-msg { font-size: 20px; max-width: 640px; } }

/* TEST BOUNDARY MODE: loud, on every screen, gone when the mode is off */
.testbanner { position: sticky; top: 0; z-index: 9; background: repeating-linear-gradient(135deg, #ffb300 0 14px, #1a1200 14px 28px); color: #fff; font-weight: 800; letter-spacing: .04em; font-size: 13px; text-align: center; padding: 7px 12px; text-shadow: 0 0 4px #000, 0 0 8px #000, 0 1px 2px #000; }
body.testmode .zone-a { top: var(--tb, 30px); }

/* ================= THE PRIZE ================= */
/* Gold and Cardano blue only: amber belongs to the live score and the cash out button. */
.prize-card { position: relative; margin: 0 -12px 10px; padding: 12px 14px 12px; border: 1px solid #2a3f6b;
  border-radius: 14px; background: linear-gradient(180deg, #071a3a 0%, #050e22 100%); text-align: center; overflow: hidden; }
.prize-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% -20%, rgba(242,208,116,.13), transparent 62%); }
.p-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: #9fc0ff; }
.p-fig { font-family: var(--mono); font-weight: 800; line-height: 1; font-size: 52px; margin: 4px 0 2px; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.p-ada { font-size: .62em; color: #f2d074; }
.p-fig b { background: linear-gradient(100deg, #e8c264 0%, #fff7dd 44%, #e8c264 62%); background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #f2d074; animation: potshimmer 6s linear infinite; }
@keyframes potshimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.p-jackpot { font-family: var(--mono); font-size: 13px; font-weight: 800; letter-spacing: .1em; color: #fff;
  background: rgba(0,51,173,.55); border: 1px solid #4f7dff; border-radius: 999px; padding: 4px 12px; display: inline-block; margin: 4px 0 2px; }
.p-cap { font-family: var(--mono); font-size: 15px; font-weight: 800; letter-spacing: .1em; color: #0b0d12; background: #f2d074;
  border-radius: 8px; padding: 6px 12px; display: inline-block; margin: 5px 0 2px; }
.p-next { font-size: 13px; color: #9fc0ff; margin-top: 5px; line-height: 1.35; }
.p-claim { font-size: 12px; color: var(--dim); margin-top: 6px; }
.p-claim b { color: #cfe0ff; }
@media (prefers-reduced-motion: reduce) { .p-fig b { animation: none; } }

/* LIVE ROUND: the prize keeps its size and its layout. It only goes quiet: dimmed, shimmer stopped,
   glow off, so it never competes with the score or the cash out button. */
[data-inround="1"] .prize-card { opacity: .42; }
[data-inround="1"] .prize-card::after { display: none; }
[data-inround="1"] .p-fig b { animation: none; }
[data-entry="pressed"] .prize-card, [data-entry="pending"] .prize-card { opacity: .3; }

/* Short phones: the boundary overlay must show its claim form without a long scroll. */
@media (max-height: 760px) {
  .overlay { padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); }
  .pause-title { font-size: 15px; }
  .pause-count { font-size: 26px; line-height: 1.15; }
  .pause-msg { font-size: 13px; line-height: 1.35; }
  .co-count { font-size: 76px; }
  .co-score { font-size: 44px; }
  .overlay .small { font-size: 11px; }
}

/* The prize has two forms. On a phone the full card would push the cash out button down mid-round, so
   during a live round the card gives way to the quiet one-line pot in the chain card and the button stays
   exactly where it was. On desktop the card is in its own column, so it keeps its full size and layout
   and simply goes quiet. */
.a-pot, .a-claim { display: none; }
.a-pot { font-family: var(--mono); margin-top: 2px; }
.a-claim { font-size: 11px; color: var(--dim); margin-top: 1px; }
[data-inround="1"] .a-pot { display: block; }
[data-inround="1"] .prize-card { display: none; }
/* mid-round the chain card keeps only what the round needs, so the cash out button never moves */
[data-inround="1"] .ep-when, [data-inround="1"] .a-epoch-rows { row-gap: 0; }
[data-inround="1"] .ep-when { display: none; }
@media (min-width: 900px) {
  .a-pot, [data-inround="1"] .a-pot { display: none; }
  [data-inround="1"] .prize-card { display: block; }
  [data-inround="1"] .ep-when { display: block; }
}

/* The winner has minutes, on a phone, possibly on data: the claim form and its button come first,
   the explanation after, so nothing they must act on is below the fold. */
#pause.claim-open { justify-content: flex-start; }
#pause.claim-open .pause-title { order: -3; }
#pause.claim-open .pause-count { order: -2; font-size: clamp(20px, 6.5vw, 34px); line-height: 1.15; margin: 2px 0 6px; }
#pause.claim-open #pause-claim { order: -1; width: 100%; max-width: 460px; }
#pause.claim-open .pause-msg { order: 1; font-size: 13px; line-height: 1.4; margin-top: 10px; }
#pause.claim-open #pause-result { order: 2; }
#pause.claim-open > p.small { order: 3; }
#pause.claim-open > a.secondary { order: 4; }
#pause.claim-open #claim-intro { font-size: 12px; margin: 0 0 6px; }
#pause.claim-open #cl-who { font-size: 12px; margin: 0 0 6px; }
#pause.claim-open .screen { padding-top: 0; }

/* Short phones, winner claiming: trim everything that is not the form. */
@media (max-height: 780px) {
  #pause.claim-open .pause-title { display: none; }
  #pause.claim-open .pause-count { font-size: 20px; margin: 0 0 4px; }
  #pause.claim-open #pause-claim h2 { font-size: 15px; margin: 2px 0; }
  #pause.claim-open #claim-intro, #pause.claim-open #cl-who { font-size: 11px; margin: 0 0 4px; line-height: 1.3; }
  #pause.claim-open .field { margin: 5px 0; font-size: 12px; }
  #pause.claim-open .field input { padding: 9px 10px; }
  #pause.claim-open #btn-cl-other { font-size: 11px; }
}
/* If an overlay still has content below the fold, say so instead of hiding it. */
.overlay.more::after { content: "▾ more below"; position: sticky; bottom: -6px; align-self: center; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #0b0d12; background: #cfe0ff; border-radius: 999px; padding: 4px 12px; }

.a-epoch .cd { color: #ff5252; }        /* the claim countdown in the chain card */

/* the claim countdown keeps its red wherever it is shown */
#pause .co-msg .cd, .pause-msg .cd, .final-hour #ep-mid .cd { color: #ff5252; }

/* HELP: reachable from the header in every phase, and never in the way of the game */
/* in the header's own row now, not floating over the heartbeat drawing */
.helpbtn { flex: none; font: 800 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--chain); text-decoration: none; border: 1px solid var(--chain-line); border-radius: 999px; padding: 5px 10px; background: rgba(5,13,36,.75); }
.helpbtn:hover, .helpbtn:focus { color: #fff; border-color: var(--chain); }
[data-phase="help"] main { padding-top: 16px; }

/* The prize card's phone margins are declared after the desktop block, so restate the desktop ones here:
   it must line up with the chain card above it, not hang 12px wider on each side. */
@media (min-width: 900px) { .prize-card { margin: 0 0 12px; } }

/* Short phones, live round: the full top-3 wording is worth the space, but the cash out button must stay
   reachable without scrolling. Tighten the play area rather than cutting any words. */
@media (max-height: 720px) {
  #hb { height: 70px; }                    /* the heartbeat stays visible, just shorter */
  [data-phase="live"] .zone-c { min-height: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  [data-phase="live"] #score-wrap { min-height: 0; }
  [data-phase="live"] .score { font-size: min(var(--scoresize, 96px), 68px); }   /* keeps the fit-to-width scaling, caps the height */
  [data-phase="live"] .tbar { margin: 4px 10px 10px; }
  [data-phase="live"] .cash { padding: 20px 18px; }
}
/* Below ~700px there is no room for GNP1's credit beside the block height, so it takes a second line in
   the header. Give that line back out of the decorative heartbeat, so the header is no taller than it
   was and nothing below it moves. These come after the short-phone block on purpose. */
@media (max-width: 699px) { #hb { height: 105px; } }
/* 430-699 keeps the full-size badge and block height, so its first row is a few pixels taller;
   take those pixels back here so the play area sits exactly where it did. */
@media (min-width: 430px) and (max-width: 699px) { #hb { height: 101px; } }
@media (max-width: 699px) and (max-height: 720px) { #hb { height: 77px; } }
@media (max-height: 480px) and (orientation: landscape) { #hb { height: 36px; } }


/* The chain feed is behind: nobody should join a round that cannot be judged. */
.feedwarn { border: 2px solid #ffb020; background: #241a05; color: #ffd98a; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 10px; font-size: 14px; line-height: 1.4; font-weight: 600; }
[data-feed="degraded"] .primary.big { opacity: .5; }