/* ===== v2026 · base · design tokens, reset, body bg, boot overlay, canvas ===== */
:root {
    --bg: #03060f;
    --bg-soft: #070b18;
    --fg: #f1f4ff;
    --fg-dim: #8e96b3;
    --fg-mute: #3e4663;
    --accent: #6fd6ff;
    --accent-soft: #a0e8ff;
    --accent-deep: #2a5cff;
    --accent2: #b08bff;
    --layer-edge:    #7adcff;
    --layer-net:     #9b8bff;
    --layer-orch:    #38bdf8;
    --layer-compute: #fb923c;
    --layer-obs:     #34d399;
    --border:    rgba(255, 255, 255, 0.08);
    --border-2:  rgba(111, 214, 255, 0.28);
    --hud-bg:    rgba(7, 11, 24, 0.62);
    --hud-bg-2:  rgba(7, 11, 24, 0.82);
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;
    --pad: clamp(16px, 1.8vw, 28px);
    /* Live HUD slot heights — set by JS on load/resize so siblings
       can stack without overlap on any viewport. Fallbacks here.   */
    --hud-top-h:    44px;
    --hud-bottom-h: 38px;
    --hud-menu-h:   0px;     /* > 900 menu is vertical (off the stack) */
    --hud-layers-h: 0px;     /* > 900 layers is vertical */
    --hud-hero-h:   0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg);
    color: var(--fg);
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;       /* no scroll: gaming UI */
}
body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(42, 92, 255, 0.18), transparent 60%),
        radial-gradient(ellipse at 80% 110%, rgba(111, 214, 255, 0.10), transparent 55%),
        radial-gradient(ellipse at 20% -10%, rgba(176, 139, 255, 0.08), transparent 50%),
        var(--bg);
}
a    { color: inherit; text-decoration: none; }
kbd  {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--accent);
    background: rgba(7, 11, 24, 0.65);
    margin: 0 2px;
}
code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(111, 214, 255, 0.08);
    color: var(--accent);
}

/* ===== Scanline + vignette overlay (subtle CRT) ===== */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
    background:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, 0.45) 100%);
    mix-blend-mode: overlay;
}

/* ===== Boot overlay — minimal: just a centered progress bar. ===== */
.boot {
    position: fixed; inset: 0; z-index: 200;
    background:
        radial-gradient(ellipse at center, rgba(20, 38, 80, 0.28) 0%, rgba(3, 6, 15, 0.96) 60%, var(--bg) 100%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.6s ease;
    cursor: pointer;
}
.boot.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-progress {
    width: min(360px, 60vw);
    height: 2px;
    background: rgba(111, 214, 255, 0.10);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.boot-progress span {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(111, 214, 255, 0.4), var(--accent));
    box-shadow: 0 0 12px rgba(111, 214, 255, 0.6);
    animation: boot-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
@keyframes boot-fill {
    to { width: 100%; }
}

/* ===== WebGL canvas ===== */
#webgl {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    touch-action: none;       /* claim pinch/swipe so browser doesn't page-zoom */
    cursor: crosshair;
}
#webgl.dragging { cursor: grabbing; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    body::after { display: none; }
}