/* GLOBAL STYLES */

body {
    margin: 0;
    overflow: hidden;
    background-color: #1e1e26;
    font-family: 'Courier New', Courier, monospace;
    color: white;
}

/* UI & MENUS */
#menu-overlay, #game-over, #game-win {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

/* Intro Image */
.intro-img {
    width: 450px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* Jumpscare */
#jumpscare-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: black;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}
#jumpscare-img {
    width: 100%;
    height: 100%;
}

/* BUTTONS */
button {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 10px 20px;
    margin: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s;
}
button:hover { background: white; color: black; }

/* UTILITY */
.hidden { display: none !important; }
.info-box { text-align: center; margin-top: 20px; border: 1px solid #555; padding: 20px; background: #111; max-width: 400px; }
.lang-switch { position: absolute; top: 20px; right: 30px; }
.lang-btn { border: none; font-weight: bold; padding: 5px; font-size: 1rem; color: #888; }
.lang-btn:hover { color: white; background: transparent; text-decoration: underline; }
.figma-btn { display: inline-block; background-color: #F24E1E; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; margin-top: 10px; border: 2px solid transparent; }
.figma-btn:hover { background-color: white; color: #F24E1E; border-color: #F24E1E; }

#hud { position: absolute; top: 20px; left: 20px; font-size: 1.5rem; z-index: 10; text-shadow: 2px 2px 0 #000; }

/* GAME WORLD */
#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #1e1e26;
}

#map-container svg, #game-svg { 
    width: 100%; height: 100%; display: block; 
}

/* Vision Canvas needs to be absolute and allow clicks to pass through */
#vision-canvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 4; /* Above map, below dynamic layer */
}

#dynamic-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
}

#darkness-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 50;
    background: radial-gradient(
        circle 200px at var(--x, 50%) var(--y, 50%), 
        transparent 0%, 
        rgba(0,0,0,0.98) 120%
    );
}

#hud {
    position: absolute; 
    top: 20px; 
    left: 20px; 
    font-size: 1.5rem; 
    
    /* CHANGE THIS FROM 10 TO 60 */
    z-index: 60; 
    
    text-shadow: 2px 2px 0 #000;
    pointer-events: none; /* Good practice so clicks pass through text */
}