@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        /* --- Monochromatic Color Palette --- */
        :root {
            --bg-dark: #000; 
            --bg-light: #111; 
            --text-light: #fff;
            --glow-color: #f0f0f0; 
            
            --neon-green: #39ff14; 
            
            --border-color: #444; 
            --correct-color: #1aff00; 
            --incorrect-color: #ff3333; 
            --correct-bg-color: #004d00; 
            --incorrect-bg-color: #4d0000; 
            --shadow-glow: 0 0 10px rgba(255, 255, 255, 0.4); 
            --nav-height: 60px;
        }

        /* --- GLOBAL FADE-IN ANIMATION --- */
        @keyframes pageFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            min-height: 100vh;
            background-color: var(--bg-dark); 
            color: var(--text-light);
            margin: 0;
            overflow-x: hidden; 
            position: relative;
            padding-top: 20px;
            padding-bottom: 20px;
            
            /* Apply Fade-In to the Body */
            opacity: 0; 
            animation: pageFadeIn 0.8s ease-out forwards;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.8; 
            z-index: 1;
        }
        
        /* --- Navigation Bar Styles (Dark, Full Width) --- */
        .nav-bar {
            width: 100%; 
            max-width: none; 
            height: 60px;
            background-color: var(--bg-light); 
            border-bottom: 1px solid var(--border-color); 
            box-shadow: none; 
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px; 
            position: relative;
            z-index: 20;
            margin-bottom: 20px; 
            border-radius: 0; 
        }

        .nav-bar a {
            color: var(--text-light);
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1em;
            padding: 10px 20px;
            margin: 0 10px;
            transition: color 0.3s;
        }

        .nav-bar a:hover {
            color: var(--glow-color); 
            text-shadow: none; 
        }
        /* ADDED: Style for the current page link */
        .nav-bar .current-page {
            color: var(--neon-green);
            text-shadow: 0 0 5px var(--neon-green);
            font-weight: 700;
        }
        /* --- END Navigation Bar Styles --- */


        .main-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 95%;
            max-width: 1200px;
            gap: 20px;
        }

        .quiz-container, .leaderboard-container {
            background-color: #0e0d0d; padding: 40px; border-radius: 5px;
            width: 100%; max-width: 550px; text-align: center; position: relative; z-index: 10;
            animation: fadeIn 1s ease-out; margin-top: 0; overflow: hidden; border: none;
            min-height: 300px; 
        }
        
        /* Inner Dark Background and Content Container */
        .quiz-container::after, .leaderboard-container::after {
            content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; z-index: -1;
            background: var(--bg-light); 
            border-radius: 5px;
        }

        /* The Animated Border (NEON ROTATION) */
        @property --angle{
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
        .quiz-container::before, .leaderboard-container::before {
            content: ''; 
            position: absolute; 
            top: 0; left: 0; right: 0; bottom: 0; 
            z-index: -2;
            margin: -2px; 
            border-radius: 5px; 
            
            background: conic-gradient(
                from var(--angle), 
                transparent 50%,
                var(--neon-green),
                var(--neon-green)
            );
            background-size: auto; 
            
            animation: rotateGlow 5s linear infinite; 
            filter: none; 
        }
        
        /* Static border glow when the quiz is finished */
        .quiz-container.finished::before { 
            animation: none; 
            background: var(--border-color); 
            filter: none;
        }

        @keyframes rotateGlow { 
            from {
                --angle: 0deg;
            }
            to { 
                --angle: 360deg;
            } 
        }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* NEON HEADINGS */
        h1, h2 { font-family: 'Poppins', sans-serif; color: var(--neon-green); text-shadow: 0 0 8px var(--neon-green); letter-spacing: 2px; animation: pulseText 1.5s infinite alternate; }
        h1 { font-size: 1.5em; margin-bottom: 25px; }
        h2 { font-size: 1.2em; margin-bottom: 20px; }
        @keyframes pulseText { from { text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); } to { text-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green); } }
        
        /* --- Timer Display Styles --- */
        #timer-display { 
            font-family: 'Poppins', sans-serif; 
            font-size: 1.5em; 
            font-weight: 700; 
            color: var(--correct-color); 
            text-shadow: 0 0 5px var(--correct-color); 
            margin-bottom: 20px; 
            padding: 5px 0; 
            border-bottom: 1px dashed var(--border-color); 
            background-color: transparent; 
            transition: color 0.5s, text-shadow 0.5s;
        }
        .timer-low { 
            color: var(--incorrect-color) !important; 
            text-shadow: 0 0 8px var(--incorrect-color) !important; 
        }
        
        #quiz-status { font-size: 0.9em; margin-bottom: 10px; color: var(--text-light); }
        
        #question-text { 
            font-size: 1.3em; margin-bottom: 30px; font-weight: 500; 
            color: var(--text-light) !important; 
            background-color: transparent; padding: 10px; 
            min-height: 3em; text-align: center; word-wrap: break-word; animation: none;
        }
        
        /* Buttons restored to dark backgrounds but using neon green for hover/action */
        .answer-btn { 
            display: block; width: 100%; padding: 15px 20px; margin: 12px 0; border: 1px solid var(--border-color); border-radius: 0; 
            background-color: var(--bg-light); 
            color: var(--text-light) !important; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s; text-align: left; 
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
            font-family: 'Poppins', sans-serif; 
        }
        .answer-btn:hover:not(:disabled) { 
            background-color: #444; 
            border-color: var(--neon-green); 
            box-shadow: 0 0 10px var(--neon-green); 
            transform: translateY(-2px); 
        }
        .answer-btn.appear { animation: none; } 

        /* The correct button (always green) */
        .answer-btn.correct { 
            background-color: var(--correct-bg-color) !important; 
            border-color: var(--correct-color) !important; 
            box-shadow: 0 0 15px var(--correct-color) !important; 
            animation: none; 
        }

        /* The incorrect button selected by the user (red) */
        .answer-btn.incorrect { 
            background-color: var(--incorrect-bg-color) !important; 
            border-color: var(--incorrect-color) !important; 
            box-shadow: 0 0 15px var(--incorrect-color) !important; 
            animation: none; 
        }
        
        /* Style for unselected wrong answers when an incorrect answer was picked */
        .answer-btn.wrong-but-unselected {
            background-color: var(--incorrect-bg-color); 
            border-color: var(--border-color); 
            opacity: 0.6; 
        }

        /* Review Screen Specific Styles */
        #review-screen { text-align: left; }
        .review-item { margin-bottom: 25px; border-bottom: 1px dashed #333; padding-bottom: 15px; }
        .review-item h4 { color: var(--text-light); margin-bottom: 5px; font-weight: 600; font-size: 1.1em; text-shadow: none; }
        .review-item .status { font-size: 0.9em; font-weight: 500;}
        .is-correct { color: #5eff5e; }
        .was-incorrect { color: #ff6666; }

        /* --- Score Submission Styling --- */
        .score-input input {
            color: white;
            display: block; width: 95%; padding: 15px; margin-top: 20px; 
            background-color: var(--bg-dark); 
            border: 1px solid var(--border-color); 
            box-shadow: none; 
        }
        input::placeholder {
            
            font: poppins, sans-serif;
            color: rgba(224, 215, 215, 0.7);
            text-align: center;
        }
        .score-input input:focus { outline: none; box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); }
        
        /* General Buttons (Restart, Submit, Next) restored to neon actions */
        #next-btn, #submit-score-btn, #restart-btn, #refresh-btn, #start-quiz-btn, #review-btn, #review-finish-btn { 
            display: block; width: 100%; padding: 15px; margin-top: 20px; 
            background-color: #0e0d0d; 
            border: 1px solid var(--neon-green); 
            border-radius: 0; 
            color: var(--neon-green); 
            font-size: 1.1em; cursor: pointer; font-weight: bold; 
            box-shadow: 0 0 8px var(--neon-green); 
            transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s; 
            font-family: 'Poppins', sans-serif; 
        }
        #next-btn:hover, #submit-score-btn:hover, #restart-btn:hover, #refresh-btn:hover, #start-quiz-btn:hover, #review-btn:hover, #review-finish-btn:hover { 
            background-color: var(--neon-green); 
            box-shadow: 0 0 20px var(--neon-green); 
            transform: translateY(-2px); 
            color: var(--bg-dark); 
        }

        /* --- Start Screen Styling --- */
        #start-screen { display: flex; flex-direction: column; align-items: center; padding: 50px 20px; font-family: 'Poppins', sans-serif; }
        #start-screen p { font-size: 1.1em; margin-bottom: 30px; color: var(--neon-green); text-shadow: 0 0 8px var(--neon-green); }

        /* --- Leaderboard List Items --- */
        .leaderboard-list { list-style: none; padding: 0; margin-top: 20px; }
        .leaderboard-list li { 
            background-color: #151515; padding: 10px; margin: 5px 0; border-bottom: 1px solid #444; 
            box-shadow: none; 
            transition: background-color 0.3s, box-shadow 0.3s;
        }
        .leaderboard-list li:first-child { color: black;background-color: #f0ba08;box-shadow: 0 0 20px 5px #f0ba08; }
        .leaderboard-list li:nth-child(2) { color: black;background-color: #c0c0c0; box-shadow: 0 0 20px 5px #c0c0c0; }
        .leaderboard-list li:nth-child(3) { color: black;background-color: #cd7f32; box-shadow: 0 0 20px 5px #cd7f32; }

        @media (max-width: 768px) {
            .nav-bar {
                flex-direction: column; 
                height: auto;          
                padding: 15px 0;        
            }

            .nav-bar a {
                margin: 8px 0;        
                width: 100%;           
                text-align: center;   
            }
        }