/* ==========================================================================
   Main / Global CSS Tokens, Layout & Overlays
   ========================================================================== */

:root {
    --lcd-color: #ff3300;
    --dash-base: #1c1c1f;
    --dash-highlight: #2c2c30;
    --dash-shadow: #0a0a0c;
    --plastic-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    --hud-red: #f02d20;
    --bg-dark: #070a08;
    --text-main: #e2e8f0;
}

html {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    top: 0;
    left: 0;
}

body {
    background-color: #000;
    color: #fff;
    font-family: 'Space Mono', monospace;
    overflow: hidden;
    overscroll-behavior: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    touch-action: none;
}

.font-mono { font-family: 'Space Mono', monospace; }
.font-display { font-family: 'Syncopate', sans-serif; }
.text-hud-red { color: var(--hud-red); }
.border-hud-red { border-color: var(--hud-red); }

/* Background Canvas Layers */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.25;
    mix-blend-mode: overlay;
    background: var(--plastic-texture);
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.2)
    );
    background-size: 100% 4px;
    opacity: 0.15;
}

/* View Transition Utilities */
.dash-view-element {
    transition: opacity 0.4s ease, transform 0.4s ease;
    user-select: none;
}

#dashboard-wrapper.view-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(40px);
}

#rearview.view-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-25px);
}

#hanging-cat.view-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    animation-play-state: paused;
    transform: translateX(-50%) translateY(-25px);
}

#windshield-crack.view-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-20px);
}