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

body {
    font-family: 'Courier New', monospace;
    background: #000;
    color: #fff;
    overflow: hidden;
    cursor: crosshair;
}

.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 10;
}

.screen.active {
    display: flex;
}

.overlay {
    background: rgba(0, 0, 0, 0.9);
    z-index: 100;
}

/* Main Menu */
#mainMenu {
    background: linear-gradient(45deg, #1a0000, #330000);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.menu-container, .settings-container, .pause-container, .how-to-play-container {
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 3rem;
    border: 2px solid #ff0000;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
    max-width: 90%;
    width: 500px;
}

.game-title {
    font-size: 4rem;
    color: #ff0000;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    margin-bottom: 1rem;
    letter-spacing: 3px;
}

.game-subtitle {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 1rem;
    white-space: pre-wrap; /* Added for newline support in localization */
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-btn {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-family: inherit;
    background: transparent;
    color: #fff;
    border: 2px solid #ff0000;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.menu-btn:hover {
    background: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
    transform: scale(1.05) translateY(-2px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* New Note Style */
.menu-note {
    font-size: 1.2rem; /* increased size */
    color: #00ffff;    /* bright cyan */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
    margin-bottom: 2rem;
    white-space: pre-wrap; /* Added for newline support in localization */
    text-align: center; /* Ensure centering */
    width: 100%; /* Take full width */
}

/* Settings Menu */
#settingsMenu {
    background: linear-gradient(45deg, #1a0000, #330000);
    justify-content: center;
    align-items: center;
}

.settings-container h2 {
     margin-bottom: 1.5rem;
     color: #ff0000;
}

.setting-item {
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.setting-item label {
    font-size: 1.2rem;
    color: #fff;
    min-width: 160px; /* Increased width to accommodate new settings */
    text-align: left;
}

#volumeSlider {
    flex: 1;
    min-width: 100px;
    max-width: 250px;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #333;
    outline: none;
}

#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ff0000;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}
#volumeSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ff0000;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}
#volumeSlider:hover::-webkit-slider-thumb { background: #fff; }
#volumeSlider:hover::-moz-range-thumb { background: #fff; }

#volumeValue {
    color: #ff0000;
    font-weight: bold;
    min-width: 50px;
    text-align: right;
}

.setting-select {
    padding: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    background: #0a0033;    /* ultra dark blue background */ /* Slightly adjusted */
    color: #ffffff;            /* white text for readability */
    border: 1px solid #00ffff;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ff0000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%204.6%201.8%208.9%205.4%2012.5l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2094.7a17.6%2017.6%200%200%200%205.4-12.5c0-4.7-1.8-9%20-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 12px auto;
    padding-right: 30px;
}

.setting-select option {
    background-color: #0a0033; /* Background for options */
    color: #ffffff; /* Text color for options */
}

.setting-select:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    color: #fff;
}

#graphicsValue {
    color: #aaa;
    font-style: italic;
     min-width: 100px;
     text-align: left;
}

/* New Setting Note */
.setting-note {
     font-size: 0.8rem;
     color: #888;
     font-style: italic;
     margin-top: 0.5rem; /* Space below the select */
     width: 100%; /* Take full width */
     text-align: right; /* Align to the right */
}

/* How to Play Screen */
#howToPlayMenu {
    background: linear-gradient(45deg, #00001a, #000033);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.how-to-play-container {
    text-align: left;
    background: rgba(0, 0, 0, 0.8);
    padding: 3rem;
    border: 2px solid #00ffff;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    max-width: 700px;
    width: 90%;
    color: #fff;
    overflow-y: auto; /* Add scroll for potentially long text */
    max-height: 90vh; /* Limit height */
}

.how-to-play-container h2 {
     margin-bottom: 1.5rem;
     color: #00ffff;
     text-align: center;
}

.how-to-play-container p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    color: #ccc;
}

.how-to-play-container .menu-btn {
    margin-top: 2rem;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border-color: #00ffff;
    color: #fff;
}

.how-to-play-container .menu-btn:hover {
    background: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

/* Intro Cutscene Screen */
#introScreen {
    background: #000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.intro-container {
    max-width: 800px;
    width: 95%;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #ff0000;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.intro-image {
    width: 100%;
    max-width: 600px;
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #444;
    transition: background-image 1.2s ease-in-out, opacity 1.2s ease-in-out;
    opacity: 1;
    background-color: #111; /* Default background */
}

/* Add glitch effect for specific intro images */
.intro-image.glitchy-image {
    animation: glitch 1s infinite linear;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-5px, 5px);
    }
    40% {
        transform: translate(-5px, -5px);
    }
    60% {
        transform: translate(5px, 5px);
    }
    80% {
        transform: translate(5px, -5px);
    }
    100% {
        transform: translate(0);
    }
}


.intro-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ccc;
    min-height: 80px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    white-space: pre-wrap; /* Added for newline support in localization */
}

#skipIntro {
    margin-top: 1rem;
    border-color: #fff;
    color: #fff;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
}

#skipIntro:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Game Screen */
#gameScreen {
    background: #000;
    flex-direction: column;
}

.hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 0, 0, 0.1);
    border-bottom: 2px solid #ff0000;
    width: 100%;
    z-index: 60;
    position: relative;
    color: #fff;
    flex-wrap: wrap; /* Allow wrap on small screens */
    gap: 0.5rem 1rem; /* Add gap */
}

.status {
    display: flex;
    gap: 2rem;
    font-size: 1.1rem;
    flex-wrap: wrap; /* Allow wrap on small screens */
    gap: 0.5rem 2rem; /* Add gap */
}

#levelDisplay {
    color: #00ffff;
}

#progressDisplay { /* New style for the combined score/progress span */
     color: #fff; /* Default color */
}

.pause-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    color: #fff;
    border: 1px solid #ff0000;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
}

.pause-btn:hover {
    background: #ff0000;
}

.camera-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 80px); /* Adjust height based on HUD */
    position: relative;
    width: 100%;
    overflow: hidden;
    flex-grow: 1; /* Allow grid to take available space */
}

/* Container for camera feeds to manage stacking/display */
.camera-feeds-container {
    position: relative; /* Position children absolutely relative to this */
    width: 100%;
    height: 100%;
    max-width: 800px; /* Match max-width/height of .camera-feed */
    max-height: 600px;
    flex-grow: 1;
    display: flex; /* Use flex to center the active camera feed */
    justify-content: center;
    align-items: center;
}

.camera-nav {
    background: rgba(255, 0, 0, 0.8);
    border: none;
    color: white;
    font-size: 3rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 50;
    flex-shrink: 0;
}

.camera-nav:hover {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.1);
}

.camera-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.camera-feed {
    background: #111;
    border: 2px solid #333;
    border-radius: 5px;
    overflow: hidden;
    position: absolute; /* Position feeds absolutely inside the container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 600px;
     /* display: none;  Initial state, will be overwritten by JS */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Keep transitions for styling */
     /* Ensure feed takes up its container size */
    box-sizing: border-box; /* Include border in element's total width and height */
    display: none; /* Hide by default */
    justify-content: center; /* Use flex to center screen contents */
    align-items: center;
}

.camera-feed.active {
     display: flex; /* Show and center when active */
    border-color: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.6);
    animation: activeCameraGlow 2s infinite ease-in-out;
}

@keyframes activeCameraGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.6); }
    50% { box-shadow: 0 0 35px rgba(255, 0, 0, 0.9), inset 0 0 10px rgba(255, 0, 0, 0.2); }
}

.camera-feed:hover {
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.camera-label {
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    padding: 0.3rem;
    font-size: 0.8rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.camera-screen {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: crosshair;
    transition: filter 0.5s ease;
}

/* Graphics Quality Filters - Enhanced for more trippy effects */
/* Add a 'none' filter state to easily remove filters */
.camera-screen.filter-none {
    filter: none;
}
.camera-screen.filter-ultralow {
    /* Ultra Low: Minimal filter for performance, slight grayscale/blur */
     filter: grayscale(80%) blur(0.5px) contrast(0.9) brightness(0.95); /* Adjusted slightly up */
}
.camera-screen.filter-low {
    filter: grayscale(90%) blur(1.5px) contrast(0.7) brightness(0.8) sepia(15%); /* Adjusted blur/contrast */
    background-blend-mode: multiply;
}
.camera-screen.filter-medium {
    filter: grayscale(60%) contrast(0.8) brightness(0.85) saturate(0.7) hue-rotate(5deg);
    background-blend-mode: overlay;
    animation: mediumGlow 5s infinite ease-in-out; /* Add subtle animation */
}

@keyframes mediumGlow {
    0%, 100% { filter: grayscale(60%) contrast(0.8) brightness(0.85) saturate(0.7) hue-rotate(5deg); }
    50% { filter: grayscale(50%) contrast(0.9) brightness(0.9) saturate(0.8) hue-rotate(2deg); }
}

.camera-screen.filter-high {
    filter: contrast(1.2) brightness(1.15) saturate(1.1) hue-rotate(-2deg) drop-shadow(0 0 5px rgba(255,0,0,0.3));
    background-blend-mode: normal;
     animation: highContrastPulse 6s infinite ease-in-out; /* Add subtle animation */
}

@keyframes highContrastPulse {
    0%, 100% { filter: contrast(1.2) brightness(1.15) saturate(1.1) hue-rotate(-2deg) drop-shadow(0 0 5px rgba(255,0,0,0.3)); }
    50% { filter: contrast(1.3) brightness(1.2) saturate(1.2) hue-rotate(0deg) drop-shadow(0 0 7px rgba(255,0,0,0.4)); }
}

.camera-screen.filter-ultra {
    /* Ultra: Designed for maximum visual impact and "professional" look */
    /* Enhanced contrast, saturation, glow, and subtle color shifts */
    filter: contrast(2.0) brightness(1.6) saturate(2.5) hue-rotate(-20deg) drop-shadow(0 0 18px rgba(255, 100, 0, 0.9)) sepia(10%); /* Adjusted values */
    background-blend-mode: screen; /* Often looks good with horror themes */
    animation: ultraGlitch 6s infinite ease-in-out, ultraColorShift 12s infinite linear; /* Adjusted durations */
}

/* Adjusted ultraGlitch animation */
@keyframes ultraGlitch {
    0%, 100% { filter: contrast(2.0) brightness(1.6) saturate(2.5) hue-rotate(-20deg) drop-shadow(0 0 18px rgba(255, 100, 0, 0.9)) sepia(10%); }
    10% { filter: contrast(2.2) brightness(1.5) saturate(2.8) hue-rotate(15deg) drop-shadow(0 0 25px rgba(0, 255, 220, 0.8)) sepia(8%); } /* More intense */
    20% { filter: contrast(1.9) brightness(1.7) saturate(2.3) hue-rotate(-28deg) drop-shadow(0 0 16px rgba(255, 80, 255, 0.8)) sepia(12%); } /* More intense */
    30% { filter: contrast(2.0) brightness(1.6) saturate(2.5) hue-rotate(-20deg) drop-shadow(0 0 18px rgba(255, 100, 0, 0.9)) sepia(10%); }
    40% { filter: contrast(2.3) brightness(1.4) saturate(3.0) hue-rotate(25deg) drop-shadow(0 0 30px rgba(0, 240, 255, 1.0)) sepia(4%); } /* More intense */
    50% { filter: contrast(2.0) brightness(1.8) saturate(2.1) hue-rotate(-35deg) drop-shadow(0 0 20px rgba(255, 150, 0, 1.0)) sepia(15%); } /* More intense */
    60% { filter: contrast(2.1) brightness(1.45) saturate(2.6) hue-rotate(18deg) drop-shadow(0 0 28px rgba(100, 255, 0, 0.9)) sepia(7%); } /* More intense */
    70% { filter: contrast(1.9) brightness(1.7) saturate(2.4) hue-rotate(-25deg) drop-shadow(0 0 17px rgba(255, 80, 220, 0.8)) sepia(14%); } /* More intense */
    80% { filter: contrast(2.0) brightness(1.6) saturate(2.5) hue-rotate(-20deg) drop-shadow(0 0 18px rgba(255, 100, 0, 0.9)) sepia(10%); }
    90% { filter: contrast(2.4) brightness(1.35) saturate(2.9) hue-rotate(30deg) drop-shadow(0 0 35px rgba(0, 255, 200, 1.0)) sepia(0%); } /* More intense */
    100% { filter: contrast(2.0) brightness(1.6) saturate(2.5) hue-rotate(-20deg) drop-shadow(0 0 18px rgba(255, 100, 0, 0.9)) sepia(10%); }
}

/* Adjusted ultraColorShift animation (slower) */
@keyframes ultraColorShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}


/* Anomaly element style */
.anomaly {
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* Size and opacity handled by JS based on difficulty */
    z-index: 5; /* Ensure anomaly is above background but below label/overlay */
    cursor: pointer; /* Change cursor on hover */
    /* Add flicker animation */
    animation: creatureFlicker 0.8s infinite steps(1); /* Faster, stepped flicker */
    /* Use CSS variable for opacity in animation */
    opacity: var(--anomaly-opacity, 1); /* Default if variable not set */
}

/* Anomaly flicker animation (adjust to be less aggressive) */
/* Use steps() to make it look like camera frame drops/glitches */
@keyframes creatureFlicker {
    0% { opacity: var(--anomaly-opacity, 0.9); }
    50% { opacity: var(--anomaly-opacity, 1); }
    100% { opacity: var(--anomaly-opacity, 0.9); }
}


/* Played Before Screen (already updated) */
#playedBeforeScreen {
    background: linear-gradient(45deg, #1a0000, #330000); /* Same as main menu */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#playedBeforeScreen .menu-container {
     padding: 3rem;
     max-width: 500px;
     width: 90%;
}

#playedBeforeScreen .menu-buttons {
    flex-direction: row; /* Arrange buttons side-by-side */
    justify-content: center; /* Center buttons */
    gap: 2rem; /* Space between buttons */
}

#playedBeforeScreen .menu-btn {
     flex-grow: 0; /* Don't force buttons to fill container width */
     padding: 1rem 2rem; /* Slightly larger padding for clarity */
}

/* Level Transition Mini-Cutscenes (already exists) */
#levelTransition {
     justify-content: center;
     align-items: center;
}
#levelTransition .level-transition-content {
    text-align: center;
    background: rgba(0,0,0,0.85);
    padding: 2rem;
    border: 2px solid #00ffff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

#levelTransition h2 {
    font-size: 2.5rem;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0,255,255,0.7);
}

/* New Mid-Level Event Screen */
#midLevelEventScreen {
    background: rgba(0,0,0,0.98); /* Very dark overlay */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 110; /* Above pause menu if needed */
}

#midLevelEventScreen .event-content {
     text-align: center;
     padding: 3rem;
     background: rgba(50, 0, 0, 0.9); /* Dark red/black background */
     border: 3px solid #ff3300; /* Orange-red border */
     border-radius: 15px;
     box-shadow: 0 0 40px rgba(255, 50, 0, 0.8); /* Stronger glow */
     max-width: 600px;
     width: 90%;
     animation: pulseGlow 2s infinite ease-in-out; /* Pulsing effect */
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 40px rgba(255, 50, 0, 0.8); }
    50% { box-shadow: 0 0 50px rgba(255, 80, 0, 1.2), inset 0 0 10px rgba(255, 100, 0, 0.3); }
}


#midLevelEventScreen h2 {
    font-size: 2.8rem; /* Larger text */
    color: #ff3300; /* Orange-red text */
    text-shadow: 0 0 15px rgba(255, 100, 0, 0.9); /* Text glow */
    animation: textFlicker 0.1s infinite step-end; /* Flickering text */
}

@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Jump Scare Screen (already exists) */
#jumpScareScreen {
    background: #000; /* Solid black */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.jumpscare-content {
     text-align: center;
     padding: 2rem;
     background: rgba(0,0,0,0.8);
     border: 2px solid #ff0000;
     border-radius: 10px;
     box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
     max-width: 90%;
     width: 500px;
     animation: staticEffect 0.1s infinite step-start; /* Add static effect */
}

@keyframes staticEffect {
    0% { transform: scale(1, 1) skewX(0deg); }
    10% { transform: scale(0.99, 1.01) skewX(-0.5deg); }
    20% { transform: scale(1.01, 0.99) skewX(0.5deg); }
    30% { transform: scale(0.99, 1.01) skewX(-0.3deg); }
    40% { transform: scale(1.01, 0.99) skewX(0.3deg); }
    50% { transform: scale(1, 1) skewX(0deg); }
    60% { transform: scale(1.01, 0.99) skewX(-0.4deg); }
    70% { transform: scale(0.99, 1.01) skewX(0.4deg); }
    80% { transform: scale(1.01, 0.99) skewX(-0.2deg); }
    90% { transform: scale(0.99, 1.01) skewX(0.2deg); }
    100% { transform: scale(1, 1) skewX(0deg); }
}


#jumpScareImage {
    width: 250px; /* Slightly larger image size */
    height: 250px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 1rem;
     animation: imageGlitch 0.2s infinite linear; /* Add glitch to image */
}

@keyframes imageGlitch {
    0% { clip: rect(2px, 99%, 6px, 0px); }
    10% { clip: rect(1%, 95%, 3%, 0px); }
    20% { clip: rect(4%, 97%, 8%, 0px); }
    30% { clip: rect(0%, 99%, 2%, 0px); }
    40% { clip: rect(7%, 96%, 9%, 0px); }
    50% { clip: rect(3%, 98%, 7%, 0px); }
    60% { clip: rect(5%, 97%, 10%, 0px); }
    70% { clip: rect(1%, 95%, 3%, 0px); }
    80% { clip: rect(8%, 99%, 11%, 0px); }
    90% { clip: rect(2%, 96%, 6%, 0px); }
    100% { clip: rect(4px, 98%, 8px, 0px); }
}


.jumpscare-text {
    font-size: 2.5rem; /* Slightly larger text */
    color: #ff0000;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.9);
    margin-bottom: 2rem;
    animation: textStaticFlicker 0.15s infinite step-end; /* Add flicker/static to text */
}

@keyframes textStaticFlicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 20px rgba(255, 0, 0, 0.9); }
    30% { opacity: 0.8; text-shadow: none; }
    50% { opacity: 1; text-shadow: 0 0 20px rgba(255, 0, 0, 0.9); }
    70% { opacity: 0.8; text-shadow: none; }
}


/* Tutorial Overlay */
.tutorial-overlay {
    position: absolute;
    bottom: 10%; /* Adjusted position */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #00ffff;
    border-radius: 8px;
    padding: 1.5rem; /* Adjusted padding */
    max-width: 600px; /* Adjusted max width */
    width: 90%;
    color: #fff;
    text-align: center;
    font-size: 1.1rem; /* Adjusted font size */
    line-height: 1.5;
    z-index: 70; /* Above camera feed */
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

#tutorialText {
    margin-bottom: 1rem;
    color: #ccc;
}

#tutorialNextButton {
    margin-top: 1rem;
    border-color: #00ffff;
    color: #fff;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
}

#tutorialNextButton:hover {
     background: #00ffff;
     box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}


/* Pause Settings Menu (inherits from .settings-container, .overlay) */
#pauseSettingsMenu {
    /* Specific styles if needed */
     justify-content: center;
     align-items: center;
     /* background and overlay are handled by .screen.overlay */
}

#pauseSettingsMenu .settings-container {
     /* Specific styles if needed, inherits common styles */
     /* border-color, box-shadow might be different if desired */
     border: 2px solid #ff0000; /* Same as main settings for consistency */
     box-shadow: 0 0 30px rgba(255, 0, 0, 0.5); /* Same as main settings */
}

#pauseSettingsMenu .settings-container h2 {
     color: #ff0000; /* Same as main settings */
}

/* Responsive Design (existing styles...) */

@media (max-width: 768px) {
    .game-title {
        font-size: 2.5rem;
    }

    .game-subtitle {
        font-size: 1rem;
    }

    .menu-container, .settings-container, .pause-container, .how-to-play-container, .intro-container, .jumpscare-content {
        padding: 1.5rem;
        width: 95%;
        max-width: none;
    }

    .menu-note {
         margin-bottom: 1.5rem;
         font-size: 1rem; /* Adjusted size for smaller screens */
    }

    .how-to-play-container p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .intro-text {
        font-size: 1rem;
        min-height: 80px;
    }

     .intro-image {
         height: 200px;
     }

    .menu-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .setting-item label {
        min-width: auto;
        text-align: left;
    }

    #volumeSlider, .setting-select {
        width: 100%;
        max-width: none;
    }
    #volumeValue {
        min-width: auto;
        text-align: left;
    }

    .status {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.9rem;
    }

    .camera-grid {
        gap: 10px;
        padding: 10px;
        flex-direction: row; /* Keep row layout for nav buttons */
        justify-content: center;
        align-items: center; /* Center items vertically */
    }

    .camera-feeds-container {
        position: relative; /* Keep positioning */
        width: 100%; /* Allow container to shrink */
        height: auto; /* Auto height */
        max-width: none; /* No max width */
        max-height: none; /* No max height */
        flex-grow: 1; /* Allow it to grow */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .camera-nav {
        font-size: 2rem;
        width: 40px;
        height: 40px;
    }


    .camera-screen {
        height: 250px; /* Fixed height for screen content */
        width: 100%;
    }

    .tutorial-overlay {
        width: 90%;
        font-size: 1rem;
        padding: 1rem;
        bottom: 5%;
    }

    #jumpScareImage {
        width: 150px; /* Smaller jump scare image */
        height: 150px;
    }

    .jumpscare-text {
        font-size: 1.8rem; /* Smaller jump scare text */
    }
}