/* Quiz-specific styles */
        .quiz-container {
            background: linear-gradient(135deg, #ffccff, #ffaaff, #ff99ff);
            border: 5px ridge #ff66ff;
            padding: 15px;
            text-align: center;
            transition: all 2s ease;
            position: relative;
            overflow: hidden;
        }

        .quiz-container.corrupted-1 {
            background: linear-gradient(135deg, #eeccee, #ddaadd, #cc99cc);
            border-color: #aa66aa;
        }

        .quiz-container.corrupted-2 {
            background: linear-gradient(135deg, #aa8888, #997777, #886666);
            border-color: #664444;
        }

        .quiz-container.corrupted-3 {
            background: linear-gradient(135deg, #554444, #443333, #332222);
            border-color: #440000;
        }

        .quiz-container.corrupted-4 {
            background: linear-gradient(135deg, #220000, #110000, #000000);
            border-color: #660000;
            box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.3);
        }

        .quiz-container.corrupted-5 {
            background: #000;
            border-color: #330000;
            box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.5);
            animation: roomShake 0.1s infinite;
        }

        @keyframes roomShake {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            25% {
                transform: translate(-2px, 1px) rotate(-0.5deg);
            }

            50% {
                transform: translate(1px, -2px) rotate(0.5deg);
            }

            75% {
                transform: translate(-1px, 2px) rotate(-0.5deg);
            }
        }

        .mascot {
            width: 120px;
            height: 120px;
            margin: 0 auto 10px;
            position: relative;
            transition: all 1s ease;
        }

        .mascot-face {
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, #ffaacc 0%, #ff88aa 100%);
            border-radius: 50%;
            position: relative;
            border: 4px solid #ff6699;
            box-shadow: 0 0 20px rgba(255, 150, 200, 0.5);
            transition: all 1s ease;
        }

        .mascot-face.corrupted {
            background: radial-gradient(circle, #996666 0%, #664444 100%);
            border-color: #440000;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }

        .mascot-face.very-corrupted {
            background: radial-gradient(circle, #442222 0%, #220000 100%);
            border-color: #660000;
            animation: mascotPulse 2s infinite;
        }

        @keyframes mascotPulse {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
            }

            50% {
                box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);
            }
        }

        .mascot-eye {
            width: 25px;
            height: 25px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 40px;
        }

        .mascot-eye.left {
            left: 35px;
        }

        .mascot-eye.right {
            right: 35px;
        }

        .mascot-pupil {
            width: 12px;
            height: 12px;
            background: #333;
            border-radius: 50%;
            position: absolute;
            top: 6px;
            left: 6px;
            transition: all 0.1s ease;
        }

        .mascot-eye.corrupted .mascot-pupil {
            background: #ff0000;
            box-shadow: 0 0 10px #ff0000;
        }

        .mascot-mouth {
            width: 40px;
            height: 20px;
            border: 3px solid #ff6699;
            border-top: none;
            border-radius: 0 0 40px 40px;
            position: absolute;
            bottom: 35px;
            left: 50%;
            transform: translateX(-50%);
            transition: all 1s ease;
        }

        .mascot-mouth.corrupted {
            border-color: #660000;
            height: 30px;
            width: 50px;
        }

        .mascot-mouth.very-corrupted {
            border-color: #ff0000;
            height: 40px;
            width: 60px;
            animation: mouthTwitch 0.5s infinite;
        }

        @keyframes mouthTwitch {

            0%,
            100% {
                transform: translateX(-50%) scaleY(1);
            }

            50% {
                transform: translateX(-50%) scaleY(1.2);
            }
        }

        .quiz-title {
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
            font-size: 26px;
            color: #ff66cc;
            text-shadow: 2px 2px #fff, -1px -1px #ff99ff;
            transition: all 1s ease;
        }

        .quiz-title.corrupted {
            color: #996666;
            text-shadow: 2px 2px #000;
        }

        .quiz-title.very-corrupted {
            color: #ff0000;
            text-shadow: 2px 2px #000, 0 0 10px #ff0000;
            animation: titleGlitch 0.3s infinite;
        }

        @keyframes titleGlitch {

            0%,
            100% {
                transform: translate(0);
                filter: none;
            }

            20% {
                transform: translate(-2px, 1px);
                filter: hue-rotate(90deg);
            }

            40% {
                transform: translate(2px, -1px);
                filter: hue-rotate(180deg);
            }

            60% {
                transform: translate(-1px, -2px);
                filter: hue-rotate(270deg);
            }

            80% {
                transform: translate(1px, 2px);
                filter: none;
            }
        }

        .answer-btn {
            background: linear-gradient(180deg, #ffccff, #ff99ff);
            border: 3px outset #ff66ff;
            padding: 8px 15px;
            margin: 3px;
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #660066;
        }

        .answer-btn:hover {
            background: linear-gradient(180deg, #ffddff, #ffaaff);
            transform: scale(1.05);
        }

        .answer-btn.corrupted {
            background: linear-gradient(180deg, #886666, #664444);
            border-color: #440000;
            color: #ffcccc;
        }

        .answer-btn.very-corrupted {
            background: linear-gradient(180deg, #440000, #220000);
            border-color: #660000;
            color: #ff6666;
            animation: btnCorrupt 2s infinite;
        }

        @keyframes btnCorrupt {

            0%,
            100% {
                transform: scale(1) skewX(0deg);
            }

            50% {
                transform: scale(1.02) skewX(-2deg);
            }
        }

        .sparkle {
            position: absolute;
            font-size: 20px;
            animation: sparkle 1s ease-out forwards;
            pointer-events: none;
        }

        @keyframes sparkle {
            0% {
                transform: scale(0) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: scale(1.5) rotate(180deg);
                opacity: 0;
            }
        }

        .blood-drip {
            position: fixed;
            top: 0;
            width: 8px;
            background: linear-gradient(180deg, #660000, #aa0000, #660000);
            border-radius: 0 0 4px 4px;
            animation: drip 4s ease-in forwards;
            z-index: 999;
        }

        @keyframes drip {
            0% {
                height: 0;
            }

            100% {
                height: 100vh;
            }
        }

        .static-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            z-index: 998;
            background: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
            mix-blend-mode: overlay;
            transition: opacity 0.5s ease;
        }

        .static-overlay.visible {
            opacity: 0.3;
            animation: staticFlicker 0.1s infinite;
        }

        @keyframes staticFlicker {

            0%,
            100% {
                opacity: 0.2;
            }

            50% {
                opacity: 0.4;
            }
        }

        .vhs-lines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            z-index: 997;
            background: repeating-linear-gradient(0deg,
                    transparent,
                    transparent 2px,
                    rgba(0, 0, 0, 0.1) 2px,
                    rgba(0, 0, 0, 0.1) 4px);
            transition: opacity 0.5s ease;
        }

        .vhs-lines.visible {
            opacity: 1;
        }

        .wall-writing {
            position: fixed;
            font-family: "Brush Script MT", cursive;
            font-size: 40px;
            color: #660000;
            text-shadow: 2px 2px 4px #000;
            animation: writeAppear 0.5s ease-out forwards;
            z-index: 500;
            pointer-events: none;
        }

        @keyframes writeAppear {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }

            100% {
                opacity: 0.8;
                transform: scale(1);
            }
        }

        .jumpscare {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            z-index: 10000;
            animation: jumpscareFlash 0.1s infinite;
        }

        @keyframes jumpscareFlash {

            0%,
            100% {
                background: #000;
            }

            50% {
                background: #220000;
            }
        }

        .jumpscare-image {
            font-size: 200px;
            animation: jumpscarePulse 0.1s infinite;
        }

        @keyframes jumpscarePulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        .jumpscare-text {
            position: absolute;
            bottom: 20%;
            color: #ff0000;
            font-size: 48px;
            font-family: "Courier New", monospace;
            text-shadow: 0 0 20px #ff0000;
            animation: textGlitch 0.2s infinite;
        }

        @keyframes textGlitch {
            0% {
                transform: translate(0);
            }

            25% {
                transform: translate(-5px, 3px);
            }

            50% {
                transform: translate(3px, -5px);
            }

            75% {
                transform: translate(-3px, -3px);
            }

            100% {
                transform: translate(5px, 5px);
            }
        }

        .corner-eye {
            position: fixed;
            font-size: 30px;
            animation: eyeGlow 2s infinite;
            z-index: 600;
        }

        @keyframes eyeGlow {

            0%,
            100% {
                text-shadow: 0 0 10px #ff0000;
                opacity: 0.5;
            }

            50% {
                text-shadow: 0 0 20px #ff0000;
                opacity: 1;
            }
        }

        .reaching-hand {
            position: fixed;
            font-size: 60px;
            z-index: 500;
            animation: handReach 2s ease-out forwards;
        }

        @keyframes handReach {
            0% {
                opacity: 0;
                transform: translateY(100px);
            }

            100% {
                opacity: 0.7;
                transform: translateY(0);
            }
        }

        .question-text {
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
            font-size: 20px;
            margin: 12px 0;
            padding: 10px;
            min-height: 50px;
            transition: all 1s ease;
        }

        .question-text.corrupted {
            font-family: "Courier New", monospace;
            color: #ff0000;
            text-shadow: 0 0 5px #ff0000;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: #ffccff;
            border: 2px inset #ff66ff;
            margin: 10px 0;
            position: relative;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff99ff, #ff66cc);
            transition: width 0.5s ease;
        }

        .progress-fill.corrupted {
            background: linear-gradient(90deg, #660000, #aa0000);
        }

        .score-display {
            font-size: 20px;
            color: #ff66cc;
            transition: all 1s ease;
        }

        .score-display.corrupted {
            color: #ff0000;
            text-shadow: 0 0 10px #ff0000;
        }

        /* Ending overlay container - NOW INSIDE quiz container for integrated experience!! */
        .ending-overlay {
            position: relative;
            width: 100%;
            min-height: 400px;
            z-index: 100;
            overflow-y: auto;
            border-radius: 10px;
        }

        .ending-screen {
            position: relative;
            min-height: 300px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px 10px;
            box-sizing: border-box;
            animation: fadeIn 2s ease;
            border-radius: 10px;
            border: 3px ridge #660000;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .ending-title {
            font-size: 42px;
            margin-bottom: 10px;
            text-shadow: 0 0 20px currentColor;
        }

        .ending-text {
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
            font-size: 16px;
            max-width: 600px;
            text-align: center;
            line-height: 1.4;
        }

        .intro-screen {
            text-align: center;
        }

        .intro-screen h2 {
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
            color: #ff66cc;
            font-size: 28px;
            text-shadow: 2px 2px #fff;
            border: none;
        }

        .start-btn {
            font-size: 24px;
            padding: 15px 40px;
            background: linear-gradient(180deg, #ffccff, #ff99ff);
            border: 4px outset #ff66ff;
            color: #660066;
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
            cursor: pointer;
            margin-top: 20px;
            animation: btnBounce 1s ease infinite;
        }

        @keyframes btnBounce {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        .start-btn:hover {
            background: linear-gradient(180deg, #ffddff, #ffaaff);
        }

        .typewriter {
            overflow: hidden;
            border-right: 2px solid #ff0000;
            animation: cursor 0.7s step-end infinite;
        }

        @keyframes cursor {

            0%,
            100% {
                border-color: transparent;
            }

            50% {
                border-color: #ff0000;
            }
        }

        .third-eye {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .third-eye.visible {
            opacity: 1;
            animation: thirdEyePulse 1s infinite;
        }

        @keyframes thirdEyePulse {

            0%,
            100% {
                text-shadow: 0 0 10px #ff0000;
            }

            50% {
                text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000;
            }
        }

        .blood-tears {
            position: absolute;
            width: 4px;
            height: 0;
            background: linear-gradient(180deg, #aa0000, #660000);
            border-radius: 0 0 2px 2px;
            transition: height 2s ease;
        }

        .blood-tears.left {
            left: 45px;
            top: 65px;
        }

        .blood-tears.right {
            right: 45px;
            top: 65px;
        }

        .blood-tears.visible {
            height: 50px;
        }

        .pyramid-head {
            position: fixed;
            bottom: -200px;
            right: 50px;
            font-size: 150px;
            transition: bottom 3s ease;
            z-index: 800;
            opacity: 0.8;
        }

        .pyramid-head.visible {
            bottom: 0;
        }

        .nurse-figure {
            position: fixed;
            left: -100px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 100px;
            transition: left 2s ease;
            z-index: 800;
            opacity: 0.8;
        }

        .nurse-figure.visible {
            left: 20px;
        }

        .radio-static {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: #333;
            border: 3px outset #666;
            padding: 10px 20px;
            color: #00ff00;
            font-family: "Courier New", monospace;
            font-size: 12px;
            z-index: 700;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .radio-static.visible {
            opacity: 1;
        }

        .radio-bar {
            width: 100px;
            height: 8px;
            background: #111;
            margin-top: 5px;
            position: relative;
            overflow: hidden;
        }

        .radio-fill {
            height: 100%;
            background: #ff0000;
            animation: radioNoise 0.2s infinite;
        }

        @keyframes radioNoise {
            0% {
                width: 20%;
            }

            25% {
                width: 80%;
            }

            50% {
                width: 40%;
            }

            75% {
                width: 90%;
            }

            100% {
                width: 30%;
            }
        }

        .heartbeat-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 600;
            box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.3);
            opacity: 0;
            animation: heartbeat 1s ease infinite;
        }

        .heartbeat-overlay.visible {
            opacity: 1;
        }

        @keyframes heartbeat {

            0%,
            100% {
                box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
            }

            10% {
                box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.4);
            }

            20% {
                box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
            }

            30% {
                box-shadow: inset 0 0 80px rgba(255, 0, 0, 0.35);
            }

            40% {
                box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
            }
        }

        .subliminal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 200px;
            z-index: 9000;
            opacity: 0;
            pointer-events: none;
        }

        .subliminal.flash {
            animation: subliminalFlash 0.04s ease;
        }

        @keyframes subliminalFlash {

            0%,
            100% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        .rotate-room {
            animation: rotateRoom 10s ease infinite;
        }

        @keyframes rotateRoom {

            0%,
            100% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(3deg);
            }
        }

        .invert-colors {
            filter: invert(1) hue-rotate(180deg);
        }

        .mary-letter {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #f5f0e6;
            padding: 30px;
            max-width: 500px;
            font-family: "Brush Script MT", cursive;
            color: #333;
            font-size: 18px;
            border: 1px solid #999;
            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
            z-index: 8000;
            line-height: 1.8;
        }

        .seal-metatron {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 300px;
            opacity: 0.3;
            z-index: 100;
            animation: sealSpin 20s linear infinite;
            pointer-events: none;
        }

        @keyframes sealSpin {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* ========== CRACKED SCREEN EFFECT ========== */
        .screen-crack {
            position: fixed;
            pointer-events: none;
            z-index: 9500;
            opacity: 0.8;
        }

        .crack-pattern-1 {
            width: 80px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="3" fill="%23000" opacity="0.6"/><path d="M50 50 L48 38 L45 25 L42 10" stroke="%23000" stroke-width="0.8" fill="none"/><path d="M48 38 L40 32" stroke="%23111" stroke-width="0.4" fill="none"/><path d="M50 50 L62 42 L75 35 L88 28" stroke="%23000" stroke-width="0.7" fill="none"/><path d="M62 42 L68 48" stroke="%23222" stroke-width="0.3" fill="none"/><path d="M50 50 L58 62 L68 78 L72 92" stroke="%23000" stroke-width="0.6" fill="none"/><path d="M58 62 L52 68" stroke="%23111" stroke-width="0.4" fill="none"/><path d="M50 50 L38 58 L25 70 L12 82" stroke="%23000" stroke-width="0.7" fill="none"/><path d="M38 58 L35 52" stroke="%23222" stroke-width="0.3" fill="none"/><path d="M50 50 L42 48 L30 45" stroke="%23111" stroke-width="0.5" fill="none"/><path d="M50 50 L55 58 L58 65" stroke="%23111" stroke-width="0.4" fill="none"/></svg>') no-repeat center;
            filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
        }

        .crack-pattern-2 {
            width: 60px;
            height: 60px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="%23000"/><path d="M50 50 L47 35 L44 18 L40 5" stroke="%23000" stroke-width="0.6" fill="none"/><path d="M47 35 L52 30 L55 22" stroke="%23222" stroke-width="0.3" fill="none"/><path d="M50 50 L65 45 L82 38 L95 32" stroke="%23000" stroke-width="0.5" fill="none"/><path d="M65 45 L70 52" stroke="%23111" stroke-width="0.3" fill="none"/><path d="M50 50 L55 65 L62 82 L65 95" stroke="%23000" stroke-width="0.6" fill="none"/><path d="M50 50 L35 55 L18 62 L5 68" stroke="%23000" stroke-width="0.5" fill="none"/><path d="M35 55 L32 48" stroke="%23222" stroke-width="0.3" fill="none"/><path d="M50 50 L58 48 L68 44" stroke="%23111" stroke-width="0.4" fill="none"/></svg>') no-repeat center;
            filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
        }

        .crack-pattern-3 {
            width: 100px;
            height: 100px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><ellipse cx="50" cy="50" rx="4" ry="3" fill="%23000" opacity="0.5"/><path d="M50 50 L46 32 L42 15 L38 0" stroke="%23000" stroke-width="0.7" fill="none"/><path d="M46 32 L38 28 L30 22" stroke="%23111" stroke-width="0.4" fill="none"/><path d="M46 32 L52 25" stroke="%23222" stroke-width="0.3" fill="none"/><path d="M50 50 L68 45 L85 38 L100 30" stroke="%23000" stroke-width="0.6" fill="none"/><path d="M68 45 L72 55 L78 62" stroke="%23111" stroke-width="0.4" fill="none"/><path d="M50 50 L52 68 L55 85 L58 100" stroke="%23000" stroke-width="0.7" fill="none"/><path d="M52 68 L45 75 L38 80" stroke="%23222" stroke-width="0.3" fill="none"/><path d="M50 50 L32 52 L15 55 L0 58" stroke="%23000" stroke-width="0.6" fill="none"/><path d="M32 52 L28 45" stroke="%23111" stroke-width="0.3" fill="none"/><path d="M50 50 L42 62 L35 75" stroke="%23111" stroke-width="0.5" fill="none"/><path d="M50 50 L60 55 L72 58" stroke="%23222" stroke-width="0.4" fill="none"/></svg>') no-repeat center;
            filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
        }

        /* ========== CRT MONITOR EFFECTS ========== */
        .crt-flicker {
            animation: crtFlicker 0.15s infinite;
        }

        @keyframes crtFlicker {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.98;
            }

            75% {
                opacity: 0.95;
                filter: brightness(1.02);
            }
        }

        .horizontal-tear {
            position: fixed;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #fff, transparent);
            z-index: 9600;
            pointer-events: none;
            animation: horizontalTear 0.1s linear infinite;
        }

        @keyframes horizontalTear {
            0% {
                top: 0;
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                top: 100%;
                opacity: 0;
            }
        }

        .degauss-wobble {
            animation: degaussWobble 0.5s ease-out;
        }

        @keyframes degaussWobble {
            0% {
                transform: scale(1) skew(0deg);
                filter: saturate(5) hue-rotate(180deg);
            }

            25% {
                transform: scale(1.02, 0.98) skew(2deg);
                filter: saturate(3) hue-rotate(90deg);
            }

            50% {
                transform: scale(0.98, 1.02) skew(-2deg);
                filter: saturate(2) hue-rotate(270deg);
            }

            75% {
                transform: scale(1.01, 0.99) skew(1deg);
                filter: saturate(1.5) hue-rotate(45deg);
            }

            100% {
                transform: scale(1) skew(0deg);
                filter: saturate(1) hue-rotate(0deg);
            }
        }

        .screen-melt {
            animation: screenMelt 5s ease-in forwards;
        }

        @keyframes screenMelt {
            0% {
                transform: perspective(500px) rotateX(0deg);
                filter: none;
            }

            50% {
                transform: perspective(500px) rotateX(2deg);
                filter: blur(1px);
            }

            100% {
                transform: perspective(300px) rotateX(5deg) translateY(50px);
                filter: blur(3px);
                opacity: 0.7;
            }
        }

        .burn-in-ghost {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9400;
            opacity: 0;
            background: radial-gradient(ellipse at center, rgba(0, 50, 0, 0.1) 0%, transparent 70%);
            mix-blend-mode: screen;
            transition: opacity 2s ease;
        }

        .burn-in-ghost.visible {
            opacity: 0.3;
        }

        .vertical-roll {
            animation: verticalRoll 2s linear infinite;
        }

        @keyframes verticalRoll {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(20px);
            }
        }

        /* ========== ENHANCED JUMPSCARES ========== */
        .jumpscare-bsod {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0000aa;
            color: #fff;
            font-family: "Courier New", monospace;
            font-size: 14px;
            padding: 50px;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .bsod-title {
            background: #aaa;
            color: #0000aa;
            padding: 2px 10px;
            display: inline-block;
            margin-bottom: 20px;
        }

        .jumpscare-static-face {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
            z-index: 99998;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .static-face-emoji {
            font-size: 400px;
            animation: staticFacePulse 0.1s infinite;
            filter: contrast(200%) brightness(0.8);
            mix-blend-mode: difference;
        }

        @keyframes staticFacePulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.9;
            }

            50% {
                transform: scale(1.05);
                opacity: 1;
            }
        }

        .jumpscare-shatter {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 99997;
        }

        .shatter-piece {
            position: absolute;
            background: linear-gradient(135deg, #333, #111);
            border: 1px solid #444;
            animation: shatterFall 2s ease-in forwards;
        }

        @keyframes shatterFall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translateY(100vh) rotate(180deg);
                opacity: 0;
            }
        }

        .jumpscare-buddy-corrupt {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, #330000, #000);
            z-index: 99996;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .corrupt-buddy-face {
            font-size: 300px;
            animation: corruptBuddyPulse 0.2s infinite;
            text-shadow: 0 0 50px #ff0000;
        }

        @keyframes corruptBuddyPulse {
            0% {
                transform: scale(1) rotate(-2deg);
                filter: hue-rotate(0deg);
            }

            50% {
                transform: scale(1.1) rotate(2deg);
                filter: hue-rotate(30deg);
            }

            100% {
                transform: scale(1) rotate(-2deg);
                filter: hue-rotate(0deg);
            }
        }

        .corrupt-buddy-text {
            color: #ff0000;
            font-size: 48px;
            font-family: "Courier New", monospace;
            text-shadow: 0 0 20px #ff0000;
            margin-top: 20px;
            animation: corruptTextGlitch 0.3s infinite;
        }

        @keyframes corruptTextGlitch {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-10px) skewX(-5deg);
            }

            75% {
                transform: translateX(10px) skewX(5deg);
            }
        }

        /* ========== ENDING STATS PANEL ========== */
        .ending-stats-panel {
            background: rgba(0, 0, 0, 0.8);
            border: 2px ridge #666;
            padding: 12px;
            margin: 15px auto;
            max-width: 450px;
            font-family: "Courier New", monospace;
            color: #ccc;
        }

        .stats-title {
            text-align: center;
            font-size: 14px;
            color: #ffcc00;
            margin-bottom: 10px;
            border-bottom: 1px solid #444;
            padding-bottom: 6px;
        }

        .stats-grid {
            display: grid;
            gap: 6px;
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            padding: 5px;
            background: rgba(255, 255, 255, 0.05);
            border-left: 2px solid #666;
        }

        .stat-label {
            color: #888;
            font-size: 10px;
        }

        .stat-value {
            color: #fff;
            font-size: 10px;
            text-align: right;
        }

        .ending-badge {
            text-align: center;
            margin-top: 10px;
            padding: 6px;
            background: linear-gradient(90deg, #330000, #660000, #330000);
            border: 2px outset #990000;
            color: #ff6666;
            font-size: 11px;
            letter-spacing: 2px;
        }

        /* ========== LORE EXPLANATION BOX ========== */
        .lore-explanation {
            background: rgba(30, 20, 10, 0.9);
            border: 2px ridge #8b4513;
            padding: 12px;
            margin: 12px auto;
            max-width: 500px;
            font-family: Georgia, serif;
            color: #d4c4a8;
            font-size: 11px;
            line-height: 1.5;
            text-align: left;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
        }

        .lore-title {
            text-align: center;
            font-size: 12px;
            color: #c9a227;
            margin-bottom: 8px;
            padding-bottom: 5px;
            border-bottom: 1px solid #5a4a2a;
            letter-spacing: 2px;
            font-family: "Courier New", monospace;
        }

        .lore-explanation p {
            margin: 0;
            text-indent: 15px;
        }

        .ending-icon {
            display: inline-block;
        }

        /* ========== ENHANCED ENDINGS ========== */
        .ending-leave {
            background: linear-gradient(180deg, #666 0%, #333 50%, #fff 100%) !important;
            animation: leaveEndingFade 10s ease forwards;
        }

        @keyframes leaveEndingFade {
            0% {
                filter: blur(0) brightness(0.5);
            }

            50% {
                filter: blur(2px) brightness(0.8);
            }

            100% {
                filter: blur(0) brightness(1.2);
            }
        }

        .buddy-wave {
            animation: buddyWave 1s ease infinite;
            display: inline-block;
        }

        @keyframes buddyWave {

            0%,
            100% {
                transform: rotate(-10deg);
            }

            50% {
                transform: rotate(10deg);
            }
        }

        .ending-maria {
            background: linear-gradient(180deg, #660033 0%, #330011 50%, #ffccdd 100%) !important;
        }

        .maria-silhouette {
            font-size: 150px;
            animation: mariaPulse 3s ease infinite;
            color: #000;
            text-shadow: 0 0 30px #ff6699;
        }

        @keyframes mariaPulse {

            0%,
            100% {
                opacity: 0.7;
            }

            50% {
                opacity: 1;
            }
        }

        .maria-cough {
            animation: coughShake 0.5s ease;
        }

        @keyframes coughShake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .ending-water {
            background: linear-gradient(180deg, #003366 0%, #001133 100%) !important;
            overflow: hidden;
        }

        .bubble {
            position: absolute;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(100, 150, 255, 0.2));
            border-radius: 50%;
            animation: bubbleRise 4s ease-in infinite;
        }

        @keyframes bubbleRise {
            0% {
                transform: translateY(100vh) scale(1);
                opacity: 0.8;
            }

            100% {
                transform: translateY(-50px) scale(0.5);
                opacity: 0;
            }
        }

        .sinking-text {
            animation: sinkDown 5s ease-in forwards;
        }

        @keyframes sinkDown {
            0% {
                transform: translateY(0);
                opacity: 1;
            }

            100% {
                transform: translateY(100px);
                opacity: 0.3;
            }
        }

        .water-rising {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: linear-gradient(180deg, transparent, rgba(0, 50, 100, 0.5));
            animation: waterRise 10s ease-in forwards;
        }

        @keyframes waterRise {
            0% {
                height: 0;
            }

            100% {
                height: 100%;
            }
        }

        .ending-rebirth {
            background: radial-gradient(circle, #440000 0%, #220000 50%, #000 100%) !important;
        }

        .ritual-circle {
            font-size: 200px;
            animation: ritualSpin 2s linear infinite;
            color: #ff3300;
            text-shadow: 0 0 30px #ff0000, 0 0 60px #ff3300;
        }

        @keyframes ritualSpin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .lightning-flash {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ff0000;
            opacity: 0;
            pointer-events: none;
            z-index: 99990;
            animation: lightningFlash 0.5s ease infinite;
        }

        @keyframes lightningFlash {

            0%,
            90%,
            100% {
                opacity: 0;
            }

            92%,
            96% {
                opacity: 0.3;
            }
        }

        .ending-dog {
            background: linear-gradient(180deg, #ffcc00 0%, #ff9900 50%, #ffff99 100%) !important;
        }

        .dog-dance {
            font-size: 150px;
            animation: dogDance 0.5s ease infinite;
        }

        @keyframes dogDance {

            0%,
            100% {
                transform: translateY(0) rotate(-5deg);
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
            }
        }

        .credits-roll {
            animation: creditsRoll 20s linear forwards;
            text-align: center;
        }

        @keyframes creditsRoll {
            0% {
                transform: translateY(100%);
            }

            100% {
                transform: translateY(-100%);
            }
        }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            animation: confettiFall 3s linear infinite;
            z-index: 99980;
        }

        @keyframes confettiFall {
            0% {
                transform: translateY(-10px) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }

        /* ========== POST-ENDING HORROR ========== */
        .buddy-watching-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 99991;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            animation: buddyWatchingFade 2s ease;
        }

        @keyframes buddyWatchingFade {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .buddy-watching-face {
            font-size: 200px;
            animation: watchingPulse 2s ease infinite;
        }

        @keyframes watchingPulse {

            0%,
            100% {
                transform: scale(1);
                filter: brightness(1);
            }

            50% {
                transform: scale(1.05);
                filter: brightness(1.5) drop-shadow(0 0 30px #ff0000);
            }
        }

        .watching-text {
            color: #ff0000;
            font-size: 24px;
            font-family: "Courier New", monospace;
            margin-top: 30px;
            animation: watchingTextType 2s steps(30) forwards;
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid #ff0000;
        }

        @keyframes watchingTextType {
            0% {
                width: 0;
            }

            100% {
                width: 100%;
            }
        }

        .desperate-button {
            animation: desperateShake 0.5s ease infinite;
        }

        @keyframes desperateShake {

            0%,
            100% {
                transform: scale(1);
            }

            25% {
                transform: scale(1.1) rotate(-2deg);
            }

            75% {
                transform: scale(1.1) rotate(2deg);
            }
        }

        .button-chase {
            transition: transform 0.1s ease;
        }

        /* ========== FAKE ERROR POPUPS ========== */
        .fake-popup {
            position: fixed;
            background: #c0c0c0;
            border: 3px outset #fff;
            z-index: 99992;
            font-family: "MS Sans Serif", Arial, sans-serif;
            font-size: 12px;
            max-width: 400px;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
        }

        .popup-title {
            background: linear-gradient(90deg, #000080, #1084d0);
            color: white;
            padding: 3px 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .popup-close {
            background: #c0c0c0;
            border: 2px outset #fff;
            width: 16px;
            height: 14px;
            font-size: 10px;
            line-height: 10px;
            text-align: center;
            cursor: pointer;
        }

        .popup-content {
            padding: 15px;
            color: #000;
        }

        .popup-icon {
            float: left;
            font-size: 32px;
            margin-right: 10px;
        }

        .popup-buttons {
            text-align: center;
            padding: 10px;
        }

        .popup-btn {
            background: #c0c0c0;
            border: 2px outset #fff;
            padding: 3px 20px;
            margin: 0 5px;
            cursor: pointer;
            font-family: "MS Sans Serif", Arial, sans-serif;
        }

        .popup-btn:active {
            border: 2px inset #fff;
        }

        /* ========== TRUE ENDING ========== */
        .true-ending {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 999999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            font-family: "Courier New", monospace;
            animation: trueEndingFade 5s ease;
        }

        @keyframes trueEndingFade {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .true-ending-text {
            font-size: 14px;
            text-align: center;
            max-width: 600px;
            line-height: 2;
            animation: trueTextReveal 10s ease forwards;
        }

        @keyframes trueTextReveal {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .quiz-sidebar-note {
            background: #ffffcc;
            border: 2px solid #999;
            padding: 10px;
            color: #000;
            font-size: 11px;
            margin: 10px 0;
        }

        .answers-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        /* ========== UFO ENDING ========== */
        .ending-ufo {
            background: linear-gradient(180deg, #000033 0%, #000011 50%, #001100 100%) !important;
        }

        @keyframes beamPulse {

            0%,
            100% {
                opacity: 0.3;
            }

            50% {
                opacity: 0.6;
            }
        }

        @keyframes ufoFloat {

            0%,
            100% {
                transform: translateY(0) rotate(-5deg);
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
            }
        }

        @keyframes twinkle {

            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.5);
            }
        }

        /* ========== SPIN ANIMATION FOR LOADING ========== */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* ========== EXTRA FUN EFFECTS ========== */
        .rainbow-text {
            animation: rainbowCycle 2s linear infinite;
        }

        @keyframes rainbowCycle {
            0% {
                color: #ff0000;
            }

            17% {
                color: #ff8800;
            }

            33% {
                color: #ffff00;
            }

            50% {
                color: #00ff00;
            }

            67% {
                color: #0088ff;
            }

            83% {
                color: #8800ff;
            }

            100% {
                color: #ff0000;
            }
        }

        .shake-text {
            animation: textShake 0.1s linear infinite;
        }

        @keyframes textShake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-3px);
            }

            75% {
                transform: translateX(3px);
            }
        }

        /* ========== SCREEN SHAKE EFFECT (for wrong answers & jumpscares!!) ========== */
        .screen-shake-subtle {
            animation: screenShakeSubtle 0.3s ease;
        }

        .screen-shake-intense {
            animation: screenShakeIntense 0.5s ease;
        }

        @keyframes screenShakeSubtle {
            0%, 100% { transform: translate(0, 0); }
            10% { transform: translate(-2px, -1px); }
            20% { transform: translate(2px, 1px); }
            30% { transform: translate(-1px, 2px); }
            40% { transform: translate(1px, -2px); }
            50% { transform: translate(-2px, 1px); }
            60% { transform: translate(2px, -1px); }
            70% { transform: translate(-1px, -2px); }
            80% { transform: translate(1px, 2px); }
            90% { transform: translate(-2px, -1px); }
        }

        @keyframes screenShakeIntense {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            10% { transform: translate(-8px, -5px) rotate(-1deg); }
            20% { transform: translate(8px, 5px) rotate(1deg); }
            30% { transform: translate(-5px, 8px) rotate(-0.5deg); }
            40% { transform: translate(5px, -8px) rotate(0.5deg); }
            50% { transform: translate(-8px, 5px) rotate(-1deg); }
            60% { transform: translate(8px, -5px) rotate(1deg); }
            70% { transform: translate(-5px, -8px) rotate(-0.5deg); }
            80% { transform: translate(5px, 8px) rotate(0.5deg); }
            90% { transform: translate(-8px, -5px) rotate(-1deg); }
        }

        /* ========== COLOR INVERSION FLASH (spooky!!) ========== */
        .invert-flash {
            animation: invertFlash 0.2s ease;
        }

        @keyframes invertFlash {
            0%, 100% { filter: invert(0); }
            50% { filter: invert(1); }
        }

        /* ========== PULSING VIGNETTE (peripheral shadows) ========== */
        .vignette-pulse {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 9998;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%);
            animation: vignettePulse 3s ease-in-out infinite;
            opacity: 0;
        }

        .vignette-pulse.visible {
            opacity: 1;
        }

        @keyframes vignettePulse {
            0%, 100% {
                background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
            }
            50% {
                background: radial-gradient(ellipse at center, transparent 30%, rgba(20,0,0,0.9) 100%);
            }
        }

        /* ========== FAKE CURSOR (second cursor that moves on its own!!) ========== */
        .fake-cursor {
            position: fixed;
            pointer-events: none;
            z-index: 99999;
            font-size: 24px;
            transition: all 0.3s ease;
            opacity: 0.7;
        }

        /* ========== TEXT SCRAMBLE EFFECT ========== */
        .text-scramble {
            animation: textScramble 0.1s steps(1) infinite;
        }

        @keyframes textScramble {
            0% { opacity: 1; }
            50% { opacity: 0.5; letter-spacing: 2px; }
            100% { opacity: 1; letter-spacing: 0; }
        }

        /* ========== BLOODY CURSOR TRAIL ========== */
        .blood-drop {
            position: fixed;
            pointer-events: none;
            font-size: 10px;
            color: #880000;
            z-index: 9999;
            animation: bloodDrip 2s forwards;
        }

        @keyframes bloodDrip {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(50px) scale(0.5); }
        }

        /* ========== TODD'S NOTE BOX ========== */
        .todd-note {
            background: #ffffcc;
            border: 2px solid #999;
            padding: 15px;
            margin: 20px auto;
            max-width: 500px;
            text-align: left;
            color: #000;
            font-size: 12px;
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
        }

        .todd-note-header {
            background: linear-gradient(90deg, #000080, #1084d0);
            color: white;
            padding: 3px 8px;
            margin: -15px -15px 10px -15px;
            font-size: 11px;
        }

        /* ========== CURSOR TRAIL EFFECT ========== */
        .cursor-skull {
            position: fixed;
            pointer-events: none;
            font-size: 12px;
            opacity: 0.5;
            z-index: 9999;
            animation: skullFade 1s forwards;
        }

        @keyframes skullFade {
            0% {
                opacity: 0.5;
                transform: scale(1) rotate(0deg);
            }

            100% {
                opacity: 0;
                transform: scale(0.5) rotate(180deg);
            }
        }

        /* ========== CLIPPY-STYLE HELPER ========== */
        .buddy-helper {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #ffffcc;
            border: 2px solid #333;
            border-radius: 10px;
            padding: 15px;
            max-width: 250px;
            font-size: 12px;
            color: #000;
            font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", sans-serif;
            z-index: 9000;
            animation: helperBounce 2s ease infinite;
        }

        .buddy-helper-face {
            font-size: 40px;
            text-align: center;
        }

        @keyframes helperBounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        .buddy-helper-close {
            position: absolute;
            top: 5px;
            right: 8px;
            cursor: pointer;
            font-weight: bold;
            color: #666;
        }