/* ============================================================
   On a Roll — the game
   Depends on css/styles.css for tokens and the button base, and on
   css/board.css for the leaderboard panel and the initials entry.
   Self-contained otherwise, matching how the other six games are built.
   ============================================================ */

:root {
  --gold: #ffd88a; --paper: #f3ecd9;
  /* Everything above the roll that still has to be on screen with it: the
     fixed site header, the stat row and the speed bar. The stage is sized
     from whatever is left, so the clock, the speed bar and the whole play
     area are always visible together rather than one scrolling off. */
  --stage-chrome: 210px;
}

.game-main { padding-top: calc(var(--header-h) + 56px); padding-bottom: 90px; }
.game-wrap { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.game-head { margin-bottom: 26px; }
.game-head h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.08; letter-spacing: -.025em; margin-bottom: 14px;
}
.lede { color: var(--text-dim); font-size: 1rem; max-width: 64ch; margin-bottom: 26px; }

.hud{display:flex;align-items:flex-end;gap:22px;margin-bottom:12px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat span{font-family:var(--font-head);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.stat strong{font-family:var(--font-head);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.stat strong.warn{color:var(--gold)}
.stat strong.danger{color:#ff5a5a}
.hud-spacer{flex:1}

/* The speed meter is a read-out, not a target: there is no band on it you
   are trying to release inside. It fills while the roll is spinning and
   drains as it coasts, and it exists so the amount of momentum you are
   carrying is legible before you decide whether to brake. */
.charge{margin-bottom:14px}
.charge-label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:5px}
.charge-label span{font-family:var(--font-head);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.charge-track{height:10px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--border);overflow:hidden}
.charge-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#7dd8ff,#b48bff 55%,#ffd88a);
  transition:width .05s linear}

/* The roll is drawn as a tall cylinder, so the stage is twice as tall as it
   is wide — that height is the runway, and it is what gives you time to see
   a square coming before it reaches the selector. The width is derived from
   the height the viewport can actually spare, so the proportions never
   change; the roll just gets narrower on a short screen instead of running
   off the bottom of it. dvh rather than vh because a phone's address bar
   is part of the height that goes away. */
.stage-wrap{
  position:relative;margin:0 auto;
  width:min(390px, 100%, calc((100vh - var(--stage-chrome)) / 2));
  width:min(390px, 100%, calc((100dvh - var(--stage-chrome)) / 2));
}
canvas#stage{display:block;width:100%;aspect-ratio:1/2;border:1px solid var(--border);border-radius:18px;
  background:radial-gradient(120% 60% at 50% 0%,rgba(125,216,255,.05),transparent 60%),var(--surface);
  /* Press-and-hold IS the control, so the browser cannot be allowed to take
     the gesture for panning or to fire a long-press menu on top of it. */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none}
canvas#stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Between-level messages. A cleared level or a lost life is not worth
   covering the roll with the full overlay, so they get a strip along the
   bottom that clears itself after a beat. */
.banner{position:absolute;inset:auto 12px 12px 12px;padding:12px 14px;border-radius:12px;
  background:rgba(10,13,24,.92);border:1px solid var(--border);backdrop-filter:blur(3px);
  text-align:center;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.banner.show{opacity:1;transform:translateY(0)}
.banner p{margin:0;font-family:var(--font-head);font-size:.92rem;letter-spacing:-.01em}
.banner.win p{color:#8fe3b0}
.banner.lose p{color:#ff5a5a}
@media (prefers-reduced-motion:reduce){ .banner{transition:none} }

.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;border-radius:18px;
  background:rgba(10,13,24,.9);backdrop-filter:blur(5px);text-align:center;overflow-y:auto}
.overlay[hidden]{display:none}
.overlay h2{font-family:var(--font-head);font-size:clamp(1.3rem,4vw,1.8rem);letter-spacing:-.02em;margin-bottom:12px}
.overlay p{color:var(--text-dim);font-size:.9rem;max-width:36ch;margin:0 auto 18px}
.overlay .final{font-family:var(--font-head);font-size:2.8rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--gold)}
.overlay .final-label{font-family:var(--font-head);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:18px}
.ov-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.note{margin-top:18px;color:var(--text-dim);font-size:.86rem;line-height:1.7;max-width:72ch}
.note b{color:var(--text)}

.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;max-width:72ch}
.legend-row{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-dim)}
.legend-swatch{width:14px;height:14px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.10)}

@media (max-width:640px){
  .game-main{padding-top:calc(var(--header-h) + 20px);padding-bottom:60px}
  .game-wrap{padding:0 16px}
  /* The description is the one part that does not have to be on screen with
     the roll, so on a phone it drops below the game and the play area comes
     first. Everything else keeps its reading order. */
  .game-wrap{display:flex;flex-direction:column}
  .game-head{order:1;margin-bottom:12px}
  .play{order:2}
  .lede{order:3;margin:22px 0 0}
  .note{order:4}
  .legend{order:5}
  /* Tighter rows above the stage buy height back for the roll itself. */
  :root{ --stage-chrome:190px; }
  .hud{gap:14px;margin-bottom:8px}
  .stat span{font-size:.6rem}
  .stat strong{font-size:1.15rem}
  .charge{margin-bottom:10px}
  .charge-label{gap:10px;margin-bottom:4px}
  .charge-label span{font-size:.58rem}
  .charge-track{height:8px}
  .overlay{padding:16px;border-radius:14px}
  .overlay p{font-size:.85rem;margin-bottom:14px}
  .note{margin-top:16px}
}