/* ============================================================================
 * arcade.css — CRT/marquee chrome around the KAPLAY canvas
 * ============================================================================
 * The actual game UI is drawn inside the canvas by KAPLAY. This stylesheet only
 * provides the page shell: full-bleed dark background, the canvas fill, a subtle
 * CRT scanline + vignette overlay, and mobile-safe sizing (no scroll/zoom, safe
 * area insets). Keep it light — the "feeling" lives in the canvas.
 * ========================================================================== */

:root {
  --plum: #1a0b1f;
  --pink: #ff6ec7;
  --gold: #ffd166;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--plum);
  color: var(--pink);
  font-family: system-ui, "Segoe UI", sans-serif;
  overflow: hidden;                 /* the canvas is the whole experience */
  overscroll-behavior: none;        /* no pull-to-refresh while dragging */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* The canvas fills the viewport; KAPLAY's letterbox keeps the aspect. */
#game {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;                   /* dynamic vh: account for mobile chrome */
  touch-action: none;              /* we handle all gestures ourselves */
  background: var(--plum);
}

/* CRT overlay: scanlines + vignette. pointer-events:none so it never eats taps.
   Sits above the canvas (z=10) but below the touch-control overlay (z=50). */
#crt {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.10) 3px,
      rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
}

/* Boot fallback shown before/instead of KAPLAY (e.g. JS disabled, or the
   vendored engine missing). Hidden once the canvas is up via the inline script. */
#boot {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  color: var(--gold);
}
#boot h1 { font-size: clamp(20px, 6vw, 40px); margin: 0; color: var(--pink); }
#boot p  { font-size: clamp(13px, 3.5vw, 18px); margin: 0; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  #crt { background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%); }
}