/* Custom CSS Reset & Design Tokens */
:root {
    --bg-dark: #070609;
    --font-pixel: 'Press Start 2P', monospace;
    --font-digital: 'Orbitron', sans-serif;
    --font-sans: 'Outfit', sans-serif;
    
    /* Matte reflective olive LCD screen gradient matching custom console.png */
    --lcd-bg-gradient: linear-gradient(135deg, #a5ab83 0%, #91976f 100%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    background-color: var(--bg-dark);
    color: #fff;
    font-family: var(--font-sans);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Studio Ambient Light Overlay with High-Fidelity Wood Texture & Noise */
.desk-ambiance {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Explicitly split shorthand background properties to prevent parser discarding */
    background-image: 
        /* Top-left spotlight glare to mimic professional studio lighting */
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.12) 0%, transparent 35%),
        /* Bottom-right ambient shadow falling off */
        radial-gradient(circle at 85% 85%, rgba(0, 0, 0, 0.65) 0%, transparent 60%),
        /* Heavy vignette to center the focus on the console */
        radial-gradient(circle at 50% 50%, transparent 15%, rgba(0, 0, 0, 0.85) 100%),
        /* High-fidelity digital noise overlay for physical micro-grain realistic look */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.022'/%3E%3C/svg%3E"),
        /* Premium dark walnut wood desk texture background */
        url('desk_texture.png?v=2.0');
        
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    background-position: center center, center center, center center, 0 0, center center;
    background-size: auto, auto, auto, auto, cover;
    z-index: 1;
}

/* Page Layout Container */
.page-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

/* CSS Transform Scale Wrapper */
.console-scale-wrapper {
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Console Body - Sized to match custom widescreen console.png (16:9) */
.console-body {
    width: 960px;
    height: 540px;
    background: url('console.png') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    
    /* Enhanced multi-layered 3D drop-shadows mimicking realistic ambient studio shadows */
    filter: 
        drop-shadow(0 3px 5px rgba(0, 0, 0, 0.7))
        drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65))
        drop-shadow(0 35px 70px rgba(0, 0, 0, 0.8));
}


/* --- LCD Screen Overlay --- */

.lcd-screen-overlay {
    position: absolute;
    /* Mapped perfectly to match the beveled screen aperture on the user's custom image */
    left: 32.52%;
    top: 25.35%;
    width: 34.86%;
    height: 40.10%;
    z-index: 5;
    padding: 2px;
}

.screen-frame {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.7),
        0 1px 2px rgba(255, 255, 255, 0.12); /* Subtle bottom bevel light-reflection highlight */
}

.lcd-screen {
    flex-grow: 1;
    background: var(--lcd-bg-gradient);
    position: relative;
    overflow: hidden;
    display: flex;
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25);
}

/* Authentic Glass Screen Glare */
.screen-glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.16) 0%, 
        rgba(255, 255, 255, 0.05) 30%, 
        transparent 60%,
        rgba(255, 255, 255, 0.02) 100%
    );
    z-index: 10;
    pointer-events: none;
}

/* Microscopic Liquid-Crystal Subpixel Scanlines */
.lcd-screen::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.025) 0px,
        rgba(0, 0, 0, 0.025) 1px,
        transparent 1px,
        transparent 2px
    ), repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.025) 0px,
        rgba(0, 0, 0, 0.025) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9;
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    position: relative;
    z-index: 5;
}


/* --- Transparent Interactive Overlays (Button click depression masks) --- */

.overlay-btn {
    position: absolute;
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    z-index: 10;
    transition: background-color 0.05s ease, box-shadow 0.05s ease;
    touch-action: none; /* Prevents mobile double-tap to zoom and accidental page panning */
}


/* Left Cherry Red Action button overlay */
.action-btn-left {
    left: 19.5%;
    top: 70.8%;
    width: 8.5%;
    height: 15.1%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Right Cherry Red Action button overlay */
.action-btn-right {
    left: 80.4%;
    top: 70.7%;
    width: 8.5%;
    height: 15.1%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Depressing darken-overlay click animations for cherry red buttons */
.action-btn-left:active, .action-btn-left.active,
.action-btn-right:active, .action-btn-right.active {
    background-color: rgba(0, 0, 0, 0.18);
    box-shadow: 
        inset 3px 3px 6px rgba(0, 0, 0, 0.55),
        0 1px 1px rgba(255, 255, 255, 0.15);
}

/* Utility pills layout - SOUND, RESET */
.utility-pill {
    width: 3.8%;
    height: 5.5%;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.sound-pill {
    left: 68.8%;
    top: 85.8%;
    width: 5.2%; /* widened overlay for better casing button fit */
}

.reset-pill {
    left: 36.3%;
    top: 85.7%;
    width: 4.5%;
    height: 5.0%;
}

/* Depressing darken shadow overlay for grey pill button */
.utility-pill:active, .utility-pill.active, .utility-pill.active-status {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset 1px 1.5px 3px rgba(0,0,0,0.65);
}


/* --- Keyboard assistance guide --- */
.keyboard-helper {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    color: #8c829c;
    z-index: 10;
    pointer-events: none;
}

.keyboard-helper kbd {
    background: #1e1b24;
    border: 1px solid #3c3647;
    border-radius: 5px;
    padding: 3px 8px;
    font-family: monospace;
    font-size: 14px;
    color: #c9c0dc;
    box-shadow: 0 2px 0 rgba(0,0,0,0.5);
    margin: 0 3px;
}

@media (max-width: 480px), (max-height: 540px) {
    .keyboard-helper {
        display: none;
    }
}