/* ── OCTOPONG · shell ────────────────────────────────────────
   Only the frame that holds the canvas and the UI layers. Every
   screen's own styling lives beside it in src/ui.
   ─────────────────────────────────────────────────────────── */
:root{
  --deep:#080b1f; --mid:#101a3a; --near:#1b2a55;
  --ink:#f2fbff; --ink-dim:#8fb3c9; --outline:#050814;
  --gold:#ffc63d; --gold-deep:#e08a1e; --hot:#ff3d8b;
  --aqua:#2fe6d6; --violet:#8b5cf6;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--deep); }
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none; touch-action:none;
}
#stage{ position:fixed; inset:0; width:100%; height:100%; display:block; }
#ui{ position:fixed; inset:0; pointer-events:none; }
#ui > *{ pointer-events:auto; }

#boot{
  position:fixed; inset:0; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 45%, #12224a, #05070f 70%);
  z-index:99; transition:opacity .6s ease, visibility .6s;
}
#boot.gone{ opacity:0; visibility:hidden; }
.boot-bar{ width:min(320px,60vw); height:6px; border-radius:99px; background:#16224a; overflow:hidden; margin-top:18px; }
.boot-bar i{ display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--aqua),var(--gold)); animation:sweep 1.1s ease-in-out infinite; }
@keyframes sweep{ 0%{transform:translateX(-110%)} 100%{transform:translateX(280%)} }
.boot-note{ margin-top:14px; font-size:11px; letter-spacing:.28em; color:var(--ink-dim); text-align:center; }
@media (prefers-reduced-motion:reduce){ .boot-bar i{ animation:none; width:100%; } }