*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: radial-gradient(ellipse at 50% 30%, var(--bg-glow), var(--bg) 70%);
  color: var(--text);
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

/* Centre the 16:9 playfield and fit it to the window. The canvas is transparent and unframed,
   so the game sits directly on the page background with no visible box. */
.stage {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

#game {
  display: block;
  aspect-ratio: 16 / 9;
  width: min(100%, calc((100vh - 2 * var(--gutter)) * 16 / 9));
}

/* While a menu is open, the game behind it steps back: dimmer and slightly soft, so the menu reads clearly. */
#game { transition: opacity 300ms var(--ease-out), filter 300ms var(--ease-out); }
body:not([data-screen="game"]) #game { opacity: 0.4; filter: blur(1.5px) saturate(0.8); }
body[data-screen="title"] #game { opacity: 0.14; filter: blur(2px) saturate(0.6); }

/* Full-window backdrop (stars, horizon, floor) behind the playfield. */
#backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
body:not([data-screen="game"]) #backdrop { opacity: 0.7; }

/* Modern mode: the 3D scene fills the window behind the page; the #game canvas on top only carries the HUD.
   It steps back behind menus like the playfield does. */
#scene3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out), filter 300ms var(--ease-out);
}
body.mode-modern #backdrop { display: none; }
body.mode-modern:not([data-screen="game"]) #scene3d { opacity: 0.45; filter: blur(1.5px) saturate(0.8); }
body.mode-modern[data-screen="title"] #scene3d { opacity: 0.3; filter: blur(2px) saturate(0.7); }

/* Light CRT scanlines over the whole window (toggle in Settings). */
body.scanlines::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
  mix-blend-mode: multiply;
}

/* The always-visible mute button, top right of the window. */
.mute-button {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(160, 140, 255, 0.22);
  border-radius: 50%;
  background: rgba(10, 6, 24, 0.55);
  backdrop-filter: blur(6px);
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease-out), color var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.mute-button:hover { opacity: 1; color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 14px rgba(60, 242, 255, 0.35); }
.mute-button svg { width: 20px; height: 20px; fill: currentColor; }
.mute-button .wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mute-button .icon-off { display: none; }
.mute-button[aria-pressed="true"] { opacity: 0.9; color: var(--neon-red); border-color: rgba(255, 77, 109, 0.5); }
.mute-button[aria-pressed="true"] .icon-on { display: none; }
.mute-button[aria-pressed="true"] .icon-off { display: block; }

/* --- Phones and tablets --- */

/* No pinch-zoom, scrolling, text selection or long-press menus while playing: every touch goes to the game. */
body.touch {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.touch .screen { touch-action: pan-y; } /* menus may still scroll on very short screens */

/* Keep clear of the notch and rounded corners in landscape. */
.stage { padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); }

/* Pause button: touch devices only, while playing. Sits beside the mute button. */
.pause-button {
  position: fixed;
  top: 14px;
  right: 62px;
  z-index: 20;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(160, 140, 255, 0.22);
  border-radius: 50%;
  background: rgba(10, 6, 24, 0.55);
  color: var(--text-dim);
}
.pause-button svg { width: 18px; height: 18px; fill: currentColor; }
body.touch[data-screen="game"] .pause-button { display: grid; }
body.touch .mute-button, body.touch .pause-button { width: 44px; height: 44px; }
body.touch .pause-button { right: 68px; }

/* Phone held upright: ask for landscape instead of showing a tiny field. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  body.touch .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-4);
    background: var(--bg);
    color: var(--text-dim);
    font: 600 14px/1.4 var(--font-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
  }
  .rotate-hint svg { width: 64px; height: 64px; fill: none; stroke: var(--neon-cyan); stroke-width: 2; stroke-linecap: round; }
  .rotate-hint p { margin: 0; max-width: 16em; }
}