:root {
    --safe-top: 0px;
    --safe-bottom: 0px;

    --neon-cyan: #00f0ff;
    --neon-green: #39ff14;
    --neon-magenta: #ff2d95;
    --neon-violet: #bb44ff;
    --neon-orange: #ffa500;

    --bg-color: #0a0a1a;
    --bg-secondary: #0d0d24;
    --bg-terminal: rgba(4, 4, 16, 0.85);
    --border-color: rgba(0, 240, 255, 0.25);
    --text-main: #e0e0ff;
    --text-muted: rgba(224, 224, 255, 0.6);
    --text-dim: rgba(224, 224, 255, 0.35);

    --accent-cyan: #00f0ff;
    --accent-green: #39ff14;
    --accent-red: #ff2d55;
    --accent-orange: #ffa500;

    --glow-cyan: rgba(0, 240, 255, 0.3);
    --glow-green: rgba(57, 255, 20, 0.3);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
    width:100%; height:100%;
    background:var(--bg-color);
    color:var(--text-main);
    font-family:'Courier New','Consolas','Liberation Mono',monospace;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    -webkit-user-select:none;
}

.skip-link {
    position:absolute;top:-100%;left:0;z-index:9999;
    background:var(--accent-cyan);color:var(--bg-color);
    padding:8px 16px;font-weight:bold;text-decoration:none;
}
.skip-link:focus { top:0; }

/* Scanlines */
.scanlines {
    pointer-events:none;position:fixed;inset:0;z-index:9900;
    background:repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px
    );
}
/* Vignette */
.vignette {
    pointer-events:none;position:fixed;inset:0;z-index:9890;
    background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);
}

/* Curtain effect */
#curtain-overlay {
    position:fixed;inset:0;z-index:9950;pointer-events:none;
    display:flex;flex-direction:column;
}
.curtain-left, .curtain-right {
    flex:1;background:var(--bg-color);
    transition:transform 0.8s cubic-bezier(0.77,0,0.18,1);
}
.curtain-left { transform:translateY(0); }
.curtain-right { transform:translateY(0); }
.curtain-open .curtain-left { transform:translateY(-100%); }
.curtain-open .curtain-right { transform:translateY(100%); }

/* Game container */
#game-container {
    position:fixed;inset:0;
    display:flex;align-items:center;justify-content:center;
    z-index:1;
}
#gameCanvas {
    display:block;
    width:100%;height:100%;
    image-rendering:pixelated;
}

/* UI Layer */
#ui-layer {
    position:fixed;inset:0;pointer-events:none;z-index:10;
}
/* HUD */
.hud-top-bar {
    position:absolute;top:0;left:0;right:0;
    display:flex;align-items:center;gap:16px;
    padding:8px 12px;
    padding-top:calc(8px + var(--safe-top));
    background:linear-gradient(180deg, rgba(10,10,26,0.9) 0%, transparent 100%);
    transition:opacity 0.3s;
    font-size:11px;
}
.hud-item { display:flex;align-items:center;gap:4px; }
.hud-label {
    font-size:9px;text-transform:uppercase;letter-spacing:1px;
    color:var(--text-dim);font-weight:700;
}
.hud-value { color:var(--accent-cyan);font-weight:bold; }
.hud-unit { color:var(--text-dim);font-size:9px;font-weight:normal; }
.hud-item-right { margin-left:auto; }
.hud-btn {
    pointer-events:all;background:none;border:1px solid var(--border-color);
    color:var(--text-muted);padding:4px 8px;cursor:pointer;
    font-size:14px;border-radius:4px;
    transition:border-color 0.2s,color 0.2s;
}
.hud-btn:hover { border-color:var(--accent-cyan);color:var(--accent-cyan); }

/* Path status bar */
.path-status {
    position:absolute;bottom:0;left:0;right:0;text-align:center;
    padding:10px 12px;
    padding-bottom:calc(10px + var(--safe-bottom));
    background:linear-gradient(0deg, rgba(10,10,26,0.9) 0%, transparent 100%);
    transition:opacity 0.3s;
    font-size:12px;color:var(--text-muted);
}

/* Buttons (in-canvas text is drawn via canvas, these are for overlays) */
/* Settings / Pause overlay — handled by canvas UI */

/* A11y focus visible */
*:focus-visible {
    outline:2px solid var(--accent-cyan);
    outline-offset:2px;
}

/* Responsive */
@media (max-width:480px) {
    .hud-top-bar { font-size:9px;gap:10px;padding:4px 8px; }
    .hud-label { font-size:7px; }
    .path-status { font-size:10px; }
}