/* ===== Neon Drift — Global Styles ===== */

:root {
    --bg-primary: #0a0014;
    --bg-secondary: #120024;
    --neon-cyan: #00f0ff;
    --neon-magenta: #ff00aa;
    --neon-green: #39ff14;
    --neon-orange: #ff6600;
    --neon-yellow: #ffe600;
    --neon-purple: #bf00ff;
    --text-primary: #e0d0ff;
    --text-dim: #7060a0;
    --glow-cyan: 0 0 8px #00f0ff, 0 0 20px #00f0ff80;
    --glow-magenta: 0 0 8px #ff00aa, 0 0 20px #ff00aa80;
    --glow-green: 0 0 8px #39ff14, 0 0 20px #39ff1480;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
}

/* Canvas fills the viewport, maintains 800x600 logical size */
#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    cursor: crosshair;
}

/* UI overlay sits above canvas, pointer-events disabled by default */
#uiOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* UI elements inside overlay can capture input */
#uiOverlay > * {
    pointer-events: auto;
}

/* Neon text utility */
.neon-text {
    text-shadow: var(--glow-cyan);
    color: var(--neon-cyan);
}

.neon-text-magenta {
    text-shadow: var(--glow-magenta);
    color: var(--neon-magenta);
}

.neon-text-green {
    text-shadow: var(--glow-green);
    color: var(--neon-green);
}

/* Scanline overlay for retro feel */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    z-index: 9999;
}

/* Prevent selection and touch-callouts on mobile */
canvas, #uiOverlay {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
