/* ==========================================================================
   play.css — the fullscreen game page only (play.html)
   --------------------------------------------------------------------------
   Loaded *after* styles.css on play.html and nowhere else. styles.css stays the
   shared design system (tokens, buttons, HUD, overlays, title screen); this file
   does the three things that are specific to putting the game on its own page:

     1. LOCK THE VIEWPORT — the stage is exactly 100dvh/100svh, the document
        never scrolls, and the canvas is never letterboxed.
     2. THE BANNER — one small translucent top bar (wordmark / Back / Mute /
        Fullscreen). It is fixed, so the canvas underneath is still full-height.
     3. KEEP THE BANNER OFF THE GAME — #hud and every .overlay are inset by
        --banner-h, so the bar can never cover a gauge, a readout or a dialog.
        That is a structural guarantee (a fixed offset), not a timing-dependent
        one, so it holds whether or not the bar is dimmed.

   Design system: unchanged from styles.css (y2k-retrofuturism, dark-first).
   ========================================================================== */

body.play-page {
  /* The one number the whole page is built around. Includes the notch inset so
     the guarantee above still holds on a device with a cutout. */
  --banner-h: calc(48px + env(safe-area-inset-top, 0px));
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Belt and braces: `body.playing` in styles.css already hides overflow during a
   run, but the document must not scroll on this page in *any* state. */
html:has(body.play-page) { height: 100%; overflow: hidden; }

body.play-page main { display: block; }

body.play-page .stage {
  /* Full viewport, no ceiling, no floor: main.js fits the renderer to this exact
     box, so the drawing buffer matches the window at any aspect ratio. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  border-top: 0;
  border-bottom: 0;
}

/* The bar occupies the top --banner-h of the page. Everything that would
   otherwise sit under it starts below it instead. */
body.play-page #hud,
body.play-page .overlay {
  top: var(--banner-h);
}

/* ==========================================================================
   The banner
   ========================================================================== */

.play-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  height: var(--banner-h);
  padding: env(safe-area-inset-top, 0px) clamp(10px, 2vw, 20px) 0;
  /* Translucent, not opaque: the game stays visible underneath. One live blur is
     within the performance budget (performance.md: one sticky glass bar is fine,
     stacked live blurs are not) — and this is the only one on the page. */
  background: linear-gradient(180deg, rgba(7, 12, 19, .82), rgba(7, 12, 19, .5));
  border-bottom: 1px solid var(--hairline-soft);
  backdrop-filter: blur(10px) saturate(1.2);
  color: var(--ink);
  /* The bar itself never eats a click; its four controls do (below). */
  pointer-events: none;
  transition: opacity .35s ease;
}

/* Auto-dim while a run is on and nothing is happening near the bar. Opacity
   only — never transform, so the bar's box is stable and the no-overlap
   guarantee cannot depend on when the check runs. */
body.playing .play-banner[data-idle="true"] { opacity: .45; }
.play-banner:focus-within,
.play-banner:hover { opacity: 1; }

.play-banner a,
.play-banner button { pointer-events: auto; }

.banner-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.banner-mark { border-radius: 6px; flex: 0 0 auto; }
.banner-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.banner-wordmark span { margin-left: .3em; color: var(--accent); font-weight: 800; }
.banner-brand:hover .banner-wordmark,
.banner-brand:focus-visible .banner-wordmark { color: var(--chrome-hi); }

.banner-back {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--ink-dim);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.banner-back:hover, .banner-back:focus-visible { color: var(--accent); border-color: var(--accent); }

.banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Default / Hovered / Active / Focused / Disabled / Pressed, per
   core-design-rules + prohibitions ("never ship a button without states"). */
.banner-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: rgba(13, 22, 34, .6);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}
.banner-btn:hover { color: var(--chrome-hi); border-color: var(--chrome); }
.banner-btn:active { transform: scale(.97); }
.banner-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* aria-pressed = "this control is engaged" (muted / fullscreen on). */
.banner-btn[aria-pressed="true"] {
  color: var(--accent-ink);
  background: linear-gradient(180deg, #ffe066, var(--accent));
  border-color: transparent;
  font-weight: 700;
}

@media (max-width: 560px) {
  body.play-page { --banner-h: calc(44px + env(safe-area-inset-top, 0px)); }
  .banner-wordmark span { display: none; }
  .banner-btn { padding: 0 9px; font-size: 11px; letter-spacing: .08em; }
}

@media (prefers-reduced-transparency: reduce) {
  .play-banner {
    background: var(--surface);
    backdrop-filter: none;
  }
  body.playing .play-banner[data-idle="true"] { opacity: 1; }
}

@media (prefers-contrast: more) {
  .play-banner { background: #05080e; border-bottom-color: rgba(255, 255, 255, .5); }
  .banner-btn, .banner-back { color: #fff; border-color: rgba(255, 255, 255, .7); }
}

/* Red-light countdown (AttesaSemaforo) */
#countdown {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font: 900 italic clamp(64px, 14vw, 168px)/1 "Arial Black", Impact, system-ui, sans-serif;
  letter-spacing: -.02em; pointer-events: none; z-index: 6;
  -webkit-text-stroke: 4px #1a0d00; paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 40px rgba(255,60,40,.55);
  color: #ff3b2f;
}
#countdown[data-state="off"] { display: none; }
#countdown[data-state="go"] { color: #49ff6a; text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 48px rgba(73,255,106,.7); }
#countdown.tick { animation: cd-pop .55s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes cd-pop { from { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

/* ---- in-game bug report (src/report.js) ---- */
.banner-report { color: #ffd21e; border-color: rgba(255,210,30,.45); }
.bug-report { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(4,6,10,.72); backdrop-filter: blur(3px); }
.bug-report .br-card { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: #10141c; color: #e8edf5; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); font: 15px/1.4 Saira, system-ui, sans-serif; }
.bug-report header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bug-report header b { font: 800 22px/1 'Saira Condensed', sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #ffd21e; }
.bug-report header span { color: #8b97a8; font-size: 12px; }
.bug-report .br-shot { width: 100%; border-radius: 10px; display: block; }
.bug-report .br-noshot { color: #8b97a8; margin: 0; }
.bug-report .br-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.bug-report .br-cats label { cursor: pointer; }
.bug-report .br-cats input { position: absolute; opacity: 0; pointer-events: none; }
.bug-report .br-cats span { display: inline-block; padding: 6px 11px; border-radius: 999px; background: #1b2230; color: #c7d0dd; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bug-report .br-cats input:checked + span { background: #ffd21e; color: #141414; font-weight: 700; }
.bug-report .br-cats input:focus-visible + span { outline: 2px solid #ffd21e; outline-offset: 2px; }
.bug-report textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px; padding: 10px 12px; border-radius: 10px; border: 0; background: #0a0d13; color: #e8edf5; font: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.bug-report textarea:focus { outline: 2px solid #ffd21e; }
.bug-report footer { display: flex; align-items: center; gap: 10px; }
.bug-report .br-status { flex: 1; color: #9fb0c5; font-size: 13px; }
.bug-report .br-status a { color: #ffd21e; }
.bug-report footer button { padding: 9px 16px; border-radius: 10px; border: 0; font: 700 14px/1 Saira, sans-serif; cursor: pointer; background: #1b2230; color: #e8edf5; }
.bug-report footer .br-send { background: #ffd21e; color: #141414; }
.bug-report footer button[disabled] { opacity: .5; cursor: wait; }
.bug-report .br-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bug-report .br-shots img { width: 100%; border-radius: 10px; display: block; }
.bug-report .br-shots img[hidden] { display: none; }
@media (max-width: 640px) { .bug-report .br-shots { grid-template-columns: 1fr; } }