/* NEON PURGE - global page styling.
   Boot splash + fatal panel only. Menus and the in-game HUD live in
   src/ui/overlay.css (owned by the ui package). */

:root {
  --bg:    #05060e;
  --bg1:   #0a0d1c;
  --cyan:  #2de2ff;
  --ice:   #8ef6ff;
  --violet:#9d7bff;
  --lime:  #b6ff3b;
  --gold:  #ffe066;
  --mint:  #35f0b0;
  --red:   #ff2d55;
  --dim:   #7fa8c9;

  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-ui:   system-ui, 'Segoe UI', sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  background: #05060e;
  overflow: hidden;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--dim);
  font-family: var(--font-ui);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

:focus { outline: none; }

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  z-index: 0;
}

/* HUD / menu host. Overlays the canvas without stealing pointer input for the
   game: interactive children must re-enable pointer-events (see docs/SPEC.md). */
#ui-root {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------------------------------------------------------------- boot splash */

#boot {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(45, 226, 255, 0.10), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(157, 123, 255, 0.14), transparent 65%),
    var(--bg);
}

#boot h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(2rem, 9vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--ice);
  text-shadow:
    0 0 8px rgba(45, 226, 255, 0.85),
    0 0 28px rgba(45, 226, 255, 0.55),
    0 0 60px rgba(157, 123, 255, 0.45);
}

#boot p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 1.6vw, 0.85rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--dim);
  animation: boot-pulse 1.6s ease-in-out infinite;
}

#boot noscript {
  display: block;
  max-width: 34rem;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255, 45, 85, 0.55);
  border-radius: 6px;
  background: rgba(255, 45, 85, 0.08);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--red);
}

#boot[hidden] { display: none; }

/* The game flips <html data-game-state> away from "boot" once Pixi is live. */
html:not([data-game-state="boot"]) #boot { display: none; }

@keyframes boot-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #boot p { animation: none; opacity: 0.8; }
}

/* ------------------------------------------------------------------ fatal panel */

#fatal {
  position: absolute;
  inset: 0;
  z-index: 20;
  margin: 0;
  padding: 1.25rem 1.5rem;
  overflow: auto;
  white-space: pre-wrap;
  background: rgba(5, 6, 14, 0.94);
  border-top: 3px solid var(--red);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--red);
  text-shadow: 0 0 10px rgba(255, 45, 85, 0.5);
  -webkit-user-select: text;
  user-select: text;
}

#fatal[hidden] { display: none; }

/* --------------------------------------------------------------- autotest report */

#autotest-report { display: none; }

/* --------------------------------------------------------------- cursor hiding */

body[data-cursor="none"],
body[data-cursor="none"] #game,
body[data-cursor="none"] #ui-root {
  cursor: none;
}

body[data-cursor="none"] * { cursor: none !important; }