:root {
    --cabinet-bg: #1a1a1a;
    --bezel-color: #0d0d0d;
    --screen-bg: #000000;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cabinet-bg);
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
    align-items: center;
}

#arcade-room {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #2a2a2a 0%, #000000 90%);
}

#cabinet-frame {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: var(--bezel-color);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 
        0 0 0 10px #333,
        0 0 50px rgba(0,0,0,0.8),
        inset 0 0 20px rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-screen {
    width: 100%;
    height: 100%;
    background-color: var(--screen-bg);
    border-radius: 4px; /* Slight CRT curve */
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,1);
}

#crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
    animation: flicker 0.15s infinite;
    opacity: 0.3;
}

/* Subtle flickers for realism */
@keyframes flicker {
    0% { opacity: 0.27861; }
    5% { opacity: 0.34769; }
    10% { opacity: 0.23604; }
    15% { opacity: 0.30626; }
    20% { opacity: 0.18128; }
    25% { opacity: 0.33896; }
    30% { opacity: 0.25360; }
    35% { opacity: 0.17986; }
    40% { opacity: 0.36072; }
    45% { opacity: 0.33857; }
    50% { opacity: 0.25801; }
    55% { opacity: 0.17986; }
    60% { opacity: 0.23192; }
    65% { opacity: 0.31604; }
    70% { opacity: 0.18128; }
    75% { opacity: 0.26072; }
    80% { opacity: 0.23192; }
    85% { opacity: 0.24769; }
    90% { opacity: 0.33604; }
    95% { opacity: 0.11626; }
    100% { opacity: 0.27861; }
}

/* Optional: Slight color bleed/chromatic aberration effect simulation could go here later */