*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --magenta:#FF44FF; --cyan:#44FFFF; --amber:#FFDD44; }
html, body { height: 100%; background: #000; }
body {
  font-family: 'Courier New', ui-monospace, monospace;
  color: #fff; -webkit-font-smoothing: none;
  overscroll-behavior: none;
}
/* Full-bleed, notch-safe, dynamic-viewport app root */
#app {
  position: fixed; inset: 0;
  height: 100dvh; height: 100svh;   /* dynamic + small viewport fallbacks */
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* Global phosphor punch — lifts the whole tube so neon reads brighter.
     Safe: no position:fixed descendants rely on the viewport as containing block. */
  filter: brightness(1.06) contrast(1.03) saturate(1.14);
}
/* Lit CRT tube: an indigo screen with a warm central phosphor bloom.
   Brightened well above the old near-black #0A0018→#000 ramp (user directive). */
.bg-gradient { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 95% 72% at 50% 38%,
      rgba(118,72,180,0.50) 0%, rgba(52,32,96,0.30) 45%, rgba(20,12,44,0) 75%),
    linear-gradient(to bottom, #1b1236 0%, #120b28 50%, #0b0720 100%); }
/* Ambient layers always fill the whole viewport regardless of format */
.layer { position: absolute; inset: 0; pointer-events: none; }