/* ========== UNIFACTS STYLES ========== */
/* Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: "Segoe UI", sans-serif; 
    min-height: 100vh; 
    background: #0a0a12; 
    overflow: auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

/* ========== BACKGROUNDS ========== */
.hypno-bg { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 0; 
    overflow: hidden; 
}

.hypno-ring { 
    position: absolute; 
    border: 2px solid rgba(147, 51, 234, 0.3); 
    border-radius: 8px; 
    animation: expandRing 4s linear infinite; 
}

@keyframes expandRing { 
    0% { width: 20px; height: 20px; opacity: 0.8; border-color: rgba(236, 72, 153, 0.6); } 
    50% { border-color: rgba(147, 51, 234, 0.4); } 
    100% { width: 150vmax; height: 150vmax; opacity: 0; border-color: rgba(59, 130, 246, 0.1); } 
}

.rainbow-bg { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000); 
    background-size: 400% 400%; 
    animation: rainbowShift 2s ease infinite; 
    z-index: 1; 
    display: none; 
}

.rainbow-bg.active { display: block; }

@keyframes rainbowShift { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

.neutral-bg { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: linear-gradient(135deg, #2d2d3a 0%, #1a1a24 100%); 
    z-index: 1; 
    display: none; 
}

.neutral-bg.active { display: block; }

/* ========== SCREENS ========== */
.screen { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; 
    min-height: 100vh; 
    display: none; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    z-index: 10; 
    padding: 20px; 
}

.screen.active { display: flex; }

/* ========== TITLE ========== */
.title { 
    font-family: 'Press Start 2P', cursive; 
    font-size: clamp(1.5rem, 5vw, 2.5rem); 
    background: linear-gradient(90deg, #ec4899, #a855f7, #3b82f6); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
    text-align: center; 
    margin-bottom: 40px; 
    animation: titleGlow 2s ease-in-out infinite; 
}

@keyframes titleGlow { 
    0%, 100% { filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6)); } 
    50% { filter: drop-shadow(0 0 40px rgba(236, 72, 153, 0.8)); } 
}

/* ========== SETTINGS CARD ========== */
.settings-card { 
    background: rgba(15, 15, 25, 0.9); 
    border: 3px solid #a855f7; 
    border-radius: 16px; 
    padding: 30px; 
    max-width: 500px; 
    width: 90%; 
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.5); 
}

.settings-label { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 0.7rem; 
    color: #e879f9; 
    text-align: center; 
    margin-bottom: 25px; 
}

/* ========== OPERATION BUTTONS ========== */
.op-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-bottom: 20px; 
}

.op-btn { 
    padding: 20px; 
    font-size: 1.1rem; 
    font-weight: 700; 
    background: rgba(30, 20, 50, 0.8); 
    border: 2px solid #7c3aed; 
    border-radius: 12px; 
    color: #e9d5ff; 
    cursor: pointer; 
    transition: all 0.3s; 
}

.op-btn:hover { 
    background: rgba(124, 58, 237, 0.3); 
    transform: translateY(-3px); 
}

.op-btn.active { 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    border-color: #f0abfc; 
    color: white; 
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.6); 
}

/* ========== FACTS GRID ========== */
.facts-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; 
    margin-bottom: 20px; 
}

.fact-btn { 
    padding: 15px 10px; 
    font-size: 1rem; 
    font-weight: 700; 
    background: rgba(30, 20, 50, 0.8); 
    border: 2px solid #7c3aed; 
    border-radius: 10px; 
    color: #e9d5ff; 
    cursor: pointer; 
    transition: all 0.2s; 
}

.fact-btn:hover { background: rgba(124, 58, 237, 0.3); }

.fact-btn.active { 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    border-color: #f0abfc; 
    color: white; 
}

.select-all-btn { 
    grid-column: span 4; 
    padding: 12px; 
    font-size: 0.9rem; 
    font-weight: 700; 
    background: rgba(59, 130, 246, 0.2); 
    border: 2px solid #3b82f6; 
    border-radius: 10px; 
    color: #93c5fd; 
    cursor: pointer; 
}

.select-all-btn.active { 
    background: linear-gradient(135deg, #3b82f6, #06b6d4); 
    color: white; 
}

/* ========== TIME SLIDER ========== */
.time-display { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 2rem; 
    color: #f0abfc; 
    text-align: center; 
    margin-bottom: 20px; 
}

.time-slider { 
    width: 100%; 
    height: 12px; 
    border-radius: 6px; 
    background: rgba(30, 20, 50, 0.8); 
    outline: none; 
    -webkit-appearance: none; 
}

.time-slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    cursor: pointer; 
}

.time-labels { 
    display: flex; 
    justify-content: space-between; 
    color: #a78bfa; 
    font-size: 0.8rem; 
    margin-top: 10px; 
}

/* ========== NAVIGATION ========== */
.nav-row { 
    display: flex; 
    gap: 15px; 
    margin-top: 25px; 
    justify-content: center; 
}

.nav-btn { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 0.8rem; 
    padding: 15px 30px; 
    border-radius: 10px; 
    border: none; 
    cursor: pointer; 
}

.nav-btn.back { 
    background: rgba(100, 100, 120, 0.5); 
    color: #cbd5e1; 
    border: 2px solid #64748b; 
}

.nav-btn.next { 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    color: white; 
    border: 2px solid #f0abfc; 
}

.nav-btn.start { 
    background: linear-gradient(135deg, #22c55e, #16a34a); 
    color: white; 
    border: 2px solid #86efac; 
    font-size: 1rem; 
    padding: 18px 40px; 
}

/* ========== GAME CONTAINER ========== */
.game-container { 
    background: rgba(15, 15, 25, 0.95); 
    border: 3px solid #a855f7; 
    border-radius: 20px; 
    padding: 30px; 
    max-width: 600px; 
    width: 95%; 
}

/* ========== TIMER ========== */
.timer-bar { 
    width: 100%; 
    height: 12px; 
    background: rgba(50, 50, 70, 0.8); 
    border-radius: 6px; 
    margin-bottom: 25px; 
    overflow: hidden; 
}

.timer-fill { 
    height: 100%; 
    background: linear-gradient(90deg, #22c55e, #86efac); 
    border-radius: 6px; 
    transition: width 0.1s linear; 
}

.timer-fill.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.timer-fill.danger { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ========== PROBLEM & ANSWERS ========== */
.problem { 
    font-family: 'Press Start 2P', cursive; 
    font-size: clamp(1.5rem, 6vw, 2.5rem); 
    color: #f0abfc; 
    text-align: center; 
    margin-bottom: 30px; 
}

.answers-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 12px; 
}

.answer-btn { 
    padding: 18px 10px; 
    font-size: 1.3rem; 
    font-weight: 800; 
    background: rgba(30, 20, 50, 0.9); 
    border: 3px solid #7c3aed; 
    border-radius: 12px; 
    color: #e9d5ff; 
    cursor: pointer; 
    transition: all 0.2s; 
}

.answer-btn:hover { 
    background: rgba(124, 58, 237, 0.4); 
    transform: scale(1.05); 
}

/* ========== SCORE ROW ========== */
.game-score-row { 
    display: flex; 
    justify-content: center; 
    gap: 30px; 
    margin-top: 25px; 
}

.score-item { text-align: center; }
.score-label { font-size: 0.8rem; color: #a78bfa; margin-bottom: 5px; }
.score-value { font-family: 'Press Start 2P', cursive; font-size: 1.2rem; }
.score-value.correct { color: #4ade80; }
.score-value.wrong { color: #f87171; }

/* ========== RESULT SCREEN ========== */
.result-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    max-width: 500px; 
    width: 95%; 
    text-align: center; 
    z-index: 20; 
}

.speech-bubble { 
    background: #fffef0; 
    border: 4px solid #1a1a2e; 
    border-radius: 20px; 
    padding: 15px 25px; 
    position: relative; 
    margin-bottom: 15px; 
    box-shadow: 5px 5px 0 #1a1a2e; 
    transform: rotate(-2deg); 
}

.speech-bubble::after { 
    content: ''; 
    position: absolute; 
    bottom: -20px; 
    left: 50%; 
    transform: translateX(-50%); 
    border-width: 20px 15px 0 15px; 
    border-style: solid; 
    border-color: #1a1a2e transparent transparent transparent; 
}

.speech-bubble::before { 
    content: ''; 
    position: absolute; 
    bottom: -14px; 
    left: 50%; 
    transform: translateX(-50%); 
    border-width: 16px 12px 0 12px; 
    border-style: solid; 
    border-color: #fffef0 transparent transparent transparent; 
    z-index: 1; 
}

.speech-text { 
    font-family: 'Bangers', cursive; 
    font-size: clamp(1.3rem, 5vw, 1.8rem); 
    color: #1a1a2e; 
}

.uni-image { 
    width: clamp(180px, 50vw, 280px); 
    height: clamp(180px, 50vw, 280px); 
    object-fit: contain; 
    margin-bottom: 20px; 
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5)); 
}

.equation-box { 
    background: rgba(15, 15, 25, 0.9); 
    border: 3px solid #a855f7; 
    border-radius: 15px; 
    padding: 15px 30px; 
    margin-bottom: 20px; 
}

.equation-text { 
    font-family: 'Press Start 2P', cursive; 
    font-size: clamp(1.2rem, 4vw, 1.8rem); 
    color: #f0abfc; 
}

.equation-text.correct { color: #4ade80; }
.equation-text.wrong { color: #fbbf24; }

.result-score { 
    display: flex; 
    gap: 30px; 
    margin-bottom: 25px; 
}

.result-score-item { 
    background: rgba(15, 15, 25, 0.8); 
    border: 2px solid #7c3aed; 
    border-radius: 10px; 
    padding: 10px 20px; 
}

.result-score-label { font-size: 0.7rem; color: #a78bfa; }
.result-score-value { font-family: 'Press Start 2P', cursive; font-size: 1.2rem; }
.result-score-value.correct { color: #4ade80; }
.result-score-value.wrong { color: #f87171; }

.result-buttons { 
    display: flex; 
    gap: 15px; 
    margin-top: 20px; 
    flex-wrap: wrap; 
    justify-content: center; 
}

.continue-btn { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 1rem; 
    padding: 18px 50px; 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    color: white; 
    border: 3px solid #f0abfc; 
    border-radius: 15px; 
    cursor: pointer; 
}

.game-over-btn { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 0.7rem; 
    padding: 14px 20px; 
    background: linear-gradient(135deg, #475569, #64748b); 
    color: white; 
    border: 3px solid #94a3b8; 
    border-radius: 12px; 
    cursor: pointer; 
}

.game-over-btn:hover { background: linear-gradient(135deg, #64748b, #94a3b8); }

/* ========== FINAL STATS ========== */
.final-stats { 
    background: rgba(15, 15, 25, 0.95); 
    border: 3px solid #a855f7; 
    border-radius: 20px; 
    padding: 40px; 
    max-width: 400px; 
    width: 90%; 
    text-align: center; 
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.4); 
}

.final-title { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 1.2rem; 
    color: #e879f9; 
    margin-bottom: 30px; 
    text-shadow: 0 0 20px rgba(232, 121, 249, 0.5); 
}

.stat-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 0; 
    border-bottom: 1px solid rgba(168, 85, 247, 0.3); 
}

.stat-row:last-of-type { border-bottom: none; }

.stat-label { font-family: 'Press Start 2P', cursive; font-size: 0.7rem; color: #a78bfa; }
.stat-value { font-family: 'Press Start 2P', cursive; font-size: 1rem; }
.stat-value.correct { color: #22c55e; }
.stat-value.wrong { color: #f87171; }
.stat-value.total { color: #fbbf24; }
.stat-value.percent { color: #60a5fa; }

.play-again-btn { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 0.9rem; 
    padding: 18px 40px; 
    background: linear-gradient(135deg, #22c55e, #16a34a); 
    color: white; 
    border: 3px solid #86efac; 
    border-radius: 15px; 
    cursor: pointer; 
    margin-top: 30px; 
}

.play-again-btn:hover { transform: scale(1.05); }

/* ========== CONFETTI ========== */
.confetti-container { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    pointer-events: none; 
    z-index: 1000; 
    overflow: hidden; 
    display: none; 
}

.confetti-container.active { display: block; }

.confetti-layer {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    animation: confettiFall 3s linear infinite;
}

/* Layer 1 - pink & purple dots */
.confetti-layer.layer-1 {
    background-image: 
        radial-gradient(circle 6px, #ec4899 100%, transparent),
        radial-gradient(circle 4px, #a855f7 100%, transparent),
        radial-gradient(circle 5px, #f472b6 100%, transparent),
        radial-gradient(circle 3px, #c084fc 100%, transparent),
        radial-gradient(circle 7px, #ec4899 100%, transparent),
        radial-gradient(circle 4px, #a855f7 100%, transparent);
    background-size: 180px 220px;
    background-position: 0 0, 45px 35px, 90px 80px, 135px 120px, 30px 160px, 120px 190px;
    animation-duration: 2.8s;
}

/* Layer 2 - blue & cyan dots */
.confetti-layer.layer-2 {
    background-image: 
        radial-gradient(circle 5px, #3b82f6 100%, transparent),
        radial-gradient(circle 6px, #06b6d4 100%, transparent),
        radial-gradient(circle 4px, #60a5fa 100%, transparent),
        radial-gradient(circle 5px, #22d3ee 100%, transparent),
        radial-gradient(circle 3px, #3b82f6 100%, transparent);
    background-size: 160px 200px;
    background-position: 20px 10px, 80px 50px, 40px 100px, 110px 140px, 70px 180px;
    animation-duration: 3.5s;
    animation-delay: -1s;
}

/* Layer 3 - yellow & green dots */
.confetti-layer.layer-3 {
    background-image: 
        radial-gradient(circle 4px, #fbbf24 100%, transparent),
        radial-gradient(circle 6px, #22c55e 100%, transparent),
        radial-gradient(circle 5px, #facc15 100%, transparent),
        radial-gradient(circle 4px, #4ade80 100%, transparent),
        radial-gradient(circle 5px, #f59e0b 100%, transparent);
    background-size: 200px 240px;
    background-position: 50px 20px, 150px 70px, 10px 120px, 100px 170px, 60px 210px;
    animation-duration: 4s;
    animation-delay: -2s;
}

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

/* ========== UTILITY BUTTONS ========== */
.settings-btn { 
    position: fixed; 
    top: 20px; right: 20px; 
    width: 50px; height: 50px; 
    background: rgba(30, 20, 50, 0.9); 
    border: 2px solid #7c3aed; 
    border-radius: 12px; 
    color: #e9d5ff; 
    font-size: 1.5rem; 
    cursor: pointer; 
    z-index: 50; 
    display: none; 
    justify-content: center; 
    align-items: center; 
}

.settings-btn.visible { display: flex; }

.music-btn { 
    position: fixed; 
    top: 20px; right: 80px; 
    width: 50px; height: 50px; 
    background: rgba(30, 20, 50, 0.9); 
    border: 2px solid #7c3aed; 
    border-radius: 12px; 
    color: #e9d5ff; 
    font-size: 1.5rem; 
    cursor: pointer; 
    z-index: 50; 
    display: none; 
    justify-content: center; 
    align-items: center; 
}

.music-btn.visible { display: flex; }

/* ========== LOADER ========== */
.loader-card { 
    background: rgba(15, 15, 25, 0.9); 
    border: 3px solid #a855f7; 
    border-radius: 16px; 
    padding: 40px; 
    max-width: 400px; 
    width: 90%; 
    text-align: center; 
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3); 
}

.loader-btn { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 1rem; 
    padding: 20px 40px; 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    color: white; 
    border: 3px solid #f0abfc; 
    border-radius: 15px; 
    cursor: pointer; 
    margin-bottom: 20px; 
    transition: all 0.3s; 
}

.loader-btn:hover { 
    transform: scale(1.05); 
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.6); 
}

.loader-btn:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
    transform: none; 
}

.progress-container { 
    width: 100%; 
    height: 20px; 
    background: rgba(30, 20, 50, 0.8); 
    border-radius: 10px; 
    overflow: hidden; 
    margin-top: 20px; 
    display: none; 
}

.progress-bar { 
    height: 100%; 
    background: linear-gradient(90deg, #a855f7, #ec4899); 
    border-radius: 10px; 
    width: 0%; 
    transition: width 0.3s; 
}

.progress-text { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 0.6rem; 
    color: #e879f9; 
    margin-top: 15px; 
}

.music-icon { 
    font-size: 3rem; 
    margin-bottom: 20px; 
    animation: bounce 1s ease-in-out infinite; 
}

@keyframes bounce { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-10px); } 
}

/* ========== VOLUME CONTROLS ========== */
.volume-controls { padding-top: 20px; border-top: 2px solid rgba(168, 85, 247, 0.3); }

.volume-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 15px; 
}

.volume-label { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 0.6rem; 
    color: #e879f9; 
    width: 80px; 
}

.volume-slider { 
    flex: 1; 
    height: 8px; 
    border-radius: 4px; 
    background: rgba(30, 20, 50, 0.8); 
    outline: none; 
    -webkit-appearance: none; 
}

.volume-slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    cursor: pointer; 
}

.volume-value { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 0.5rem; 
    color: #a78bfa; 
    width: 40px; 
    text-align: right; 
}

/* ========== RESPONSIVE ========== */
@media (max-width: 500px) { 
    .facts-grid { grid-template-columns: repeat(3, 1fr); } 
    .select-all-btn { grid-column: span 3; } 
    .answers-grid { grid-template-columns: repeat(3, 1fr); } 
    .op-grid { grid-template-columns: 1fr; } 
}