/* ============================================================================
   CROWN — style.css, layered on ../engine/cabinet.css.

   THE REGISTER. CROWN is a MIDWAY cabinet: CRT, neon-adjacent, high contrast,
   very few colours, pixel type for anything that reads as a machine label. The
   game itself is drawn entirely with canvas primitives (zero assets), so this
   file's whole job is (a) to get out of the canvas's way and (b) to make the
   page behave like a fixed arcade screen instead of a document.

   THE LAYOUT PROBLEM AND ITS ANSWER. The sim is a fixed 375x812 logical
   portrait viewport, and it reserves its own bottom band as a THUMB RAIL. So
   the page must hand the canvas the largest possible 375:812 box and never
   scroll while a run is live — a page that scrolls under a dragging thumb is a
   page that steals the input. Hence: body is a fixed-height flex column,
   #board-wrap is the flexible row, and the canvas is absolutely positioned
   inside it and sized in JS. The canvas can therefore never feed its own size
   back into the box that decides its size.

   Everything structural — header, meta row, modals, toast, footer, ceremony,
   promo — comes from cabinet.css. This re-tints it, adds the board overlay,
   the result panel, and the fixed-screen behaviour.
   ========================================================================== */

/* The Midway's face. Self-hosted, OFL, already in the repo for the arcade
   floor. swap (not block) so a slow font never hides the HUD. */
@font-face {
  font-family: "Press Start 2P";
  src: url("../arcade/press-start-2p.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* --- SAGUARO, the default cabinet. EVERY colour on this page is a custom
         property, and app.js re-points all of them from skins.js when the ART
         button is pressed — so the page chrome and the canvas are always the
         same world, not a desert board in a blue frame. Colour only, never a
         number the sim can read. ------------------------------------------ */
  --sky0:   #1b1f4a;
  --sky1:   #0f0b12;
  --band:   #160f16;
  --rail:   #6b4c34;
  --arm:    #16301f;
  --mast:   #e0cba2;
  --glass:  #e2593f;
  --loose:  #ff7a4d;
  --crate:  #c07a48;
  --live:   #ff7a3d;
  --scorec: #ffcf6b;
  --glow:   #d9713c;

  /* --- cabinet.css variables, re-pointed --------------------------------- */
  --bg:        var(--sky1);
  --panel:     #1a1119;
  --card:      #150e16;
  --line:      #2e2030;
  --ink:       #f2e5d4;
  --dim:       #9c8189;
  --ember:     var(--scorec);
  --ember-hot: #fff0bb;
  --socket:    var(--crate);
  --beam:      var(--glass);
  --good:      var(--loose);
  --bad:       var(--live);
}

/* ---------------------------------------------------------------- the page */
html { height: 100%; }
body {
  height: 100%;
  /* cabinet.css ships min-height:100vh. With a dynamic viewport that is TALLER
     than the visible area on a phone with browser chrome showing, and a body
     taller than the visible area puts the thumb rail underneath the address
     bar — the one part of this cabinet a finger has to reach. Both are pinned
     to the dynamic unit where it exists. */
  min-height: 100%;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;                 /* a run must never scroll under the thumb */
  overscroll-behavior: none;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--panel) 0%, var(--sky1) 62%),
    var(--sky1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Once the run is over the result card and the promo rail are worth reading, so
   the page stops being a fixed screen and becomes a document again. app.js
   toggles this AND pins the board's pixel height first, so revealing the result
   can never resize the canvas out from under the picture the player just
   earned. Every flex child goes rigid here: a squeezed flex item overflows its
   own box, and overflowing boxes in a column are how the result heading ended
   up printed on top of the hint line. */
body.scrollable {
  height: auto; min-height: 100dvh; overflow: auto;
}
body.scrollable main { flex: 0 0 auto; }
body.scrollable #board-wrap { flex: 0 0 auto; }
.meta, #hint, #result, #promo-rail { flex: 0 0 auto; }

/* THE DISPLAY CUTOUT. viewport-fit=cover extends the layout viewport under the
   notch and the home indicator; the insets go on the content boxes so the
   background still bleeds to the physical edges. */
header > .head-inner,
main {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
header > .head-inner { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
footer {
  padding-bottom: max(10px, calc(env(safe-area-inset-bottom) + 4px));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

main {
  flex: 1 1 auto;
  min-height: 0;                    /* required, or the flex child never shrinks */
  display: flex; flex-direction: column;
  padding-top: 6px; padding-bottom: 6px;
  max-width: 560px;
}

/* ------------------------------------------------------------------- head */
header { border-bottom: 1px solid var(--line); }
.head-inner { gap: 8px; }
h1 {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 13px; letter-spacing: .22em; text-indent: .22em;
  color: var(--scorec);
  text-shadow: 0 0 10px rgba(255,212,94,.45), 0 0 26px rgba(255,212,94,.18);
}
h1 span { color: var(--ink); text-shadow: none; }

/* Every control on a phone cabinet is at least 44pt. cabinet.css ships 32px.
   flex: 0 0 auto IS THE RULE, not a tidy-up. .head-inner is a flex row and
   nothing here refused to shrink, so the FIRST item — #btn-help, the only
   route to the how-to-play modal — absorbed the entire shortfall on a narrow
   viewport: measured 44.0px wide at 360, 39.1 at 344, and 15.1 at 320, which
   is a real device (iPhone SE 1st gen) and is also any 375 phone with browser
   text zoom. The h1 already has a max-width rule; it is the thing that yields. */
.icon-btn {
  width: 44px; height: 44px; border-radius: 9px;
  flex: 0 0 auto;
  font: 700 9px/1 "Press Start 2P", ui-monospace, monospace;
  letter-spacing: 0;
  color: var(--dim);
  background: linear-gradient(180deg, var(--panel), var(--bg));
  border-color: var(--line);
}
.icon-btn:hover, .icon-btn:focus-visible {
  color: var(--ink); border-color: var(--crate); outline: none;
}
.icon-btn[aria-pressed="true"] { color: var(--line); }
.icon-btn:disabled { opacity: .32; cursor: default; }

/* -------------------------------------------------------------------- HUD */
.meta {
  gap: 8px; margin-bottom: 6px; min-height: 30px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#hud-score {
  flex: 1;
  font: 700 22px/1 "Press Start 2P", ui-monospace, monospace;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow: 0 0 12px rgba(219,230,242,.22);
}
#hud-score.pop { color: var(--scorec); text-shadow: 0 0 16px rgba(255,212,94,.75); }
.meta .chip {
  border-color: var(--line); color: var(--dim);
  font: 9px/1 "Press Start 2P", ui-monospace, monospace;
  letter-spacing: 0; padding: 7px 9px; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
#hud-spare { gap: 4px; }
#spare-pips { display: inline-flex; gap: 3px; align-items: center; }
/* the numeric fallback, for any future allowance above the pip ceiling */
.pip-n { font: 9px/1 "Press Start 2P", ui-monospace, monospace; color: var(--loose); margin-left: 2px; }
.pip {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--loose); box-shadow: 0 0 6px rgba(255,255,255,.28);
}
.pip.gone { background: var(--line); box-shadow: none; }
#hud-spare.last { border-color: var(--live); color: var(--live); }
#hud-spare.last .pip { background: var(--live); box-shadow: 0 0 7px rgba(255,120,80,.7); }

/* ------------------------------------------------------------------ board */
#board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  width: 100%;
}
/* Absolutely positioned so the canvas size can never feed back into the box
   that decides the canvas size. app.js writes width/height in CSS px. */
#board {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--sky1);
  touch-action: none;               /* the drive is ours, not the browser's */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}
#board:focus-visible { outline: 2px solid var(--crate); outline-offset: 2px; }

/* --------------------------------------------------------- board overlays
   START / CONTINUE / RUN OVER. It sits on the board so whatever the canvas is
   showing behind it (the wire that killed you, the crate you filled) stays
   visible while the decision is on screen. */
/* THE CARD'S FLOOR IS THE THUMB-GUARD LINE.
   The sim reserves everything below cfg.thumbGuardY as the band the hand lives
   in, and the board actively trains the thumb to sit there. With a plain 10px
   floor the continue card's ghost "end the run" landed entirely inside that
   band, so the first habitual thumb re-plant after a death hit the one control
   that throws the offer away. app.js writes --ov-floor from the same
   measurement that sizes the canvas; the 10px is only the pre-boot fallback. */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 10px;
  padding-bottom: var(--ov-floor, 10px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.93) 46%);
  z-index: 5;
}
.overlay[hidden] { display: none; }
.overlay.center {
  align-items: center;
  /* The start card is where the owner picks a cabinet, so the world behind it
     has to be legible — the card itself is a solid panel, so the scrim only
     needs to hold the board back, not hide it. */
  background: rgba(0,0,0,.66);
}
/* A SOLID card, not text floating on a gradient — the canvas behind it is
   busy and high contrast. */
.ov-inner {
  width: 100%; max-width: 330px; text-align: center;
  padding: 13px 12px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 -14px 34px rgba(0,0,0,.85);
  /* IT MUST NOT GROW PAST THE BOARD IT SITS ON. In landscape the board box
     shrinks to ~280 CSS px tall while the continue card is a fixed ~330, so
     the card overflowed the top of #board-wrap and painted over the header
     row (measured at 812x375: card top 28.3 against a header bottom of 53.0).
     Every control stays reachable either way; it just must not overlap. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.overlay.center .ov-inner { background: var(--card); }
.ov-title {
  font: 700 13px/1.4 "Press Start 2P", ui-monospace, monospace;
  letter-spacing: .04em; color: var(--scorec);
  text-shadow: 0 0 12px rgba(255,212,94,.45);
  margin-bottom: 8px;
}
.ov-title.bad { color: var(--live); text-shadow: 0 0 12px rgba(255,77,77,.5); }
.ov-sub { font-size: 11.5px; line-height: 1.6; color: var(--dim); margin-bottom: 10px; }
.ov-sub b { color: var(--ink); }
.ov-count {
  font: 700 24px/1 "Press Start 2P", ui-monospace, monospace;
  color: var(--scorec); font-variant-numeric: tabular-nums; margin-bottom: 9px;
}
.ov-count[hidden] { display: none; }
.ov-note { margin-top: 9px; font-size: 10.5px; line-height: 1.5; color: var(--dim); opacity: .8; }
.ov-note[hidden] { display: none; }
.overlay .primary { max-width: 292px; min-height: 52px; }
.overlay .ghost { margin-top: 8px; min-height: 44px; padding: 11px 18px; }
.overlay .primary[hidden], .overlay .ghost[hidden] { display: none; }

/* neon buttons, the Midway register */
button.primary {
  background: linear-gradient(180deg, #ffe08a, #f0a92a);
  border: 1px solid #7a561a;
  color: #241704;
  font: 700 10px/1.4 "Press Start 2P", ui-monospace, monospace;
  letter-spacing: .04em; min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 18px rgba(255,212,94,.16);
}
button.primary:hover { filter: brightness(1.08); }
button.ghost {
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em; min-height: 44px;
}

/* ------------------------------------------------------------------- hint */
#hint {
  margin: 6px 0 0; min-height: 0;
  font-size: 10.5px; line-height: 1.4; letter-spacing: .04em;
  color: var(--dim); text-align: center;
}
#hint b { color: var(--loose); }

/* ----------------------------------------------------------------- result */
#result { margin-top: 14px; text-align: center; }
.res-head {
  margin: 0 0 10px;
  font: 700 10px/1 "Press Start 2P", ui-monospace, monospace;
  letter-spacing: .06em; color: var(--crate);
}
#share-canvas {
  display: block; width: 100%; max-width: 330px; margin: 0 auto 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--sky1);
}
#share-text {
  margin: 0 auto 14px; max-width: 330px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font: 11px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--dim); letter-spacing: .05em;
  white-space: pre-wrap; word-break: break-word; text-align: left;
}
.result-btns .primary { max-width: 240px; }

/* ----------------------------------------------------------------- footer */
footer { font-size: 11px; }

/* ----------------------------------------------------------------- modals */
.modal-card h2 { color: var(--ink); font-family: "Press Start 2P", ui-monospace, monospace; font-size: 12px; line-height: 1.6; }
.modal-card h3 { color: var(--crate); }
.modal-card p, .modal-card li { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
.help-actions { margin-top: 18px; }
.stat-grid div b { color: var(--scorec); font-family: "Press Start 2P", ui-monospace, monospace; font-size: 16px; }

/* --------------------------------------------------------------- ceremony
   engine/ceremony.js ships the house palette; re-tint it so the game-over
   screen is the same night the cabinet is. Structure untouched. */
.cere-inner { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cere-title { font-family: "Press Start 2P", ui-monospace, monospace; font-size: 15px; line-height: 1.5;
  text-shadow: 0 0 8px rgba(255,212,94,.6), 0 0 24px rgba(255,212,94,.28); }
.cere-tally { font-family: "Press Start 2P", ui-monospace, monospace; }
/* NOT the pixel face: ceremony.js's button reads "CONTINUE ▸" and Press Start
   2P has no U+25B8, so the arrow rendered as tofu. The engine owns that string;
   the cabinet owns the font, so the font is what yields. */
.cere-continue, .cere-ini-ok {
  background: linear-gradient(180deg, #ffe08a, #f0a92a);
  border: 1px solid #7a561a; color: #241704; min-height: 48px;
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
}
.cere-board-title { color: var(--glass); }
.cere-board { background: var(--panel); }
.cere-high { text-shadow: 0 0 10px rgba(255,212,94,.75); }

/* ------------------------------------------------------------------ toast */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 70; padding: 10px 16px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--crate);
  color: var(--ink);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em; max-width: 88vw; text-align: center;
}
#toast[hidden] { display: none; }

/* ------------------------------------------------------------------ small
   The canvas is the game; the chrome yields first, in a fixed order. The sim's
   screen is 375x812 (aspect 0.462) so on any phone HEIGHT is the binding
   constraint — every row of chrome comes straight out of the play area, and the
   thumb rail shrinks with it. The footer is the first to go (it is a link the
   header already carries), then the hint line. */
@media (max-height: 900px) {
  footer { display: none; }
}
@media (max-height: 700px) {
  #hint { display: none; }
  .meta { min-height: 26px; margin-bottom: 4px; }
  #hud-score { font-size: 18px; }
  header > .head-inner { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  /* A SHORT BOARD GETS A SHORTER CARD. In landscape the board box is ~280 CSS
     px tall while the continue card's natural height is ~330, so it used to
     overflow the top of #board-wrap and paint across the header. Everything
     that is not a control yields first — the note goes, the title, sub and
     countdown shrink — and both buttons keep their 44pt minimum. Measured at
     812x375 this brings the card from 330 px to ~195, inside the 221 px the
     board leaves once the thumb-rail floor is reserved. */
  .ov-note { display: none; }
  .ov-title { font-size: 10px; line-height: 1.3; margin-bottom: 5px; }
  .ov-count { font-size: 15px; margin-bottom: 4px; }
  .ov-sub { font-size: 10px; line-height: 1.42; margin-bottom: 6px; }
  .ov-inner { padding: 8px 9px 7px; }
  .overlay .primary { min-height: 44px; }
  .overlay .ghost { margin-top: 6px; min-height: 44px; padding: 9px 16px; }
}
@media (max-width: 400px) {
  h1 { font-size: 11px; letter-spacing: .18em; text-indent: .18em; }
  .head-inner { gap: 6px; }
  .head-right { gap: 4px; }
  #hud-score { font-size: 19px; }
}
/* The h1 is the flex item that yields; below this the promo chip goes too,
   so six 44px controls plus a title still fit a 320px device. */
@media (max-width: 360px) {
  h1 { font-size: 9px; letter-spacing: .12em; text-indent: .12em; min-width: 0; overflow: hidden; }
}
@media (max-width: 340px) {
  .promo-chip { display: none !important; }
  h1 { font-size: 0; }
  h1::after { content: "CROWN"; font-size: 9px; letter-spacing: .1em; color: var(--scorec); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}