/* =====================================================================
   base.css — CSS custom properties, reset, canvas & atmosphere layers
   ===================================================================== */

:root {
  --void: #03050a;
  --ink: #e7ecf7;
  --ink-dim: #8a95ad;
  --ink-faint: #4a5468;
  --cyan: oklch(0.82 0.15 220);
  --stroke: rgba(231, 236, 247, 0.14);
  --stroke-hot: rgba(130, 210, 255, 0.55);
  --panel: rgba(8, 12, 22, 0.72);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--void);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}

canvas {
  display: block;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Full-bleed canvas ---------- */
#world {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* ---------- Vignette + scanlines ---------- */
#vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 3px
    );
}

/* ---------- Film grain ---------- */
#grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ---------- Warp flash overlay ---------- */
#warp {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

/* ---------- Shared keyframe ---------- */
@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}