/* 80Quiz — CSS Custom Properties (Retro-Neon 80s Dark Theme + Glassmorphism) */

@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/Orbitron-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Background */
    --bg-gradient: linear-gradient(135deg, #0d0221 0%, #150535 50%, #0d0221 100%);

    /* Glass morphism — enhanced bubble effect */
    --bg-card: rgba(18, 8, 45, 0.55);
    --bg-card-border: rgba(0, 240, 255, 0.18);
    --bg-input: rgba(255, 255, 255, 0.06);
    --glass-blur: blur(20px);
    --glass-saturate: saturate(1.8);
    --glass-border: 1px solid rgba(255, 255, 255, 0.12);
    --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --bubble-bg: rgba(255, 255, 255, 0.05);
    --bubble-border: rgba(255, 255, 255, 0.1);
    --bubble-hover-bg: rgba(255, 255, 255, 0.09);

    /* Neon accent colors */
    --accent-primary: #00f0ff;
    --accent-secondary: #ff28a0;
    --accent-gradient: linear-gradient(135deg, #ff28a0 0%, #00f0ff 100%);
    --accent-pink: #ff28a0;
    --accent-orange: #ffaa00;
    --neon-yellow: #ffff32;
    --neon-cyan: #00f0ff;
    --neon-pink: #ff28a0;

    /* Text */
    --text-primary: #f0f0ff;
    --text-secondary: rgba(240, 240, 255, 0.75);
    --text-muted: rgba(240, 240, 255, 0.4);

    /* Functional */
    --correct-green: #39ff14;
    --correct-green-bg: rgba(57, 255, 20, 0.12);
    --wrong-red: #ff3860;
    --wrong-red-bg: rgba(255, 56, 96, 0.12);
    --timer-safe: #00f0ff;
    --timer-warn: #ffff32;
    --timer-danger: #ff3860;

    /* Leaderboard */
    --gold: #ffd700;
    --gold-bg: rgba(255, 215, 0, 0.1);

    /* Typography */
    --font-display: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Sizing */
    --search-max-width: 680px;
    --quiz-max-width: 580px;
    --leaderboard-width: 260px;

    /* Neon Shadows — enhanced for glass */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 240, 255, 0.06), 0 0 120px rgba(255, 40, 160, 0.03);
    --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 80px rgba(0, 240, 255, 0.12), 0 0 120px rgba(255, 40, 160, 0.06);
    --shadow-button: 0 4px 20px rgba(0, 240, 255, 0.3), 0 0 40px rgba(255, 40, 160, 0.15);
    --glow-cyan: 0 0 8px rgba(0, 240, 255, 0.4), 0 0 20px rgba(0, 240, 255, 0.15);
    --glow-pink: 0 0 8px rgba(255, 40, 160, 0.4), 0 0 20px rgba(255, 40, 160, 0.15);
}

/* Theme-specific overrides — randomly picked per session */
body.theme-blue {
    --bg-gradient: linear-gradient(135deg, #c8cfe0 0%, #d8dde8 30%, #cdd3e2 70%, #c5cce0 100%);
    --accent-primary: #5b6abf;
    --accent-secondary: #5b6abf;
    --accent-gradient: linear-gradient(135deg, #5b6abf 0%, #7b8ad0 100%);
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-card-border: rgba(91, 106, 191, 0.2);
    --bg-input: rgba(255, 255, 255, 0.8);
    --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --bubble-bg: rgba(255, 255, 255, 0.6);
    --bubble-border: rgba(91, 106, 191, 0.15);
    --bubble-hover-bg: rgba(91, 106, 191, 0.08);
    --text-primary: #2d3359;
    --text-secondary: rgba(45, 51, 89, 0.7);
    --text-muted: rgba(45, 51, 89, 0.4);
    --shadow-card: 0 8px 32px rgba(91, 106, 191, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 12px 48px rgba(91, 106, 191, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-button: 0 4px 20px rgba(91, 106, 191, 0.3);
    --glow-cyan: 0 0 8px rgba(91, 106, 191, 0.3);
    --glow-pink: 0 0 8px rgba(91, 106, 191, 0.3);
    --neon-cyan: #5b6abf;
    --neon-pink: #8b6abf;
    --gold: #b8960c;
    --gold-bg: rgba(184, 150, 12, 0.1);
    --timer-safe: #5b6abf;
    --correct-green: #2ea043;
    --correct-green-bg: rgba(46, 160, 67, 0.12);
    --wrong-red: #d73a49;
    --wrong-red-bg: rgba(215, 58, 73, 0.12);
}

body.theme-sunset {
    --bg-gradient: linear-gradient(135deg, #f0cdb8 0%, #f5d5c0 30%, #f2ccb5 70%, #edc5ae 100%);
    --accent-primary: #d4703a;
    --accent-secondary: #d4703a;
    --accent-gradient: linear-gradient(135deg, #d4703a 0%, #e8945a 100%);
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-card-border: rgba(212, 112, 58, 0.2);
    --bg-input: rgba(255, 255, 255, 0.8);
    --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --bubble-bg: rgba(255, 255, 255, 0.6);
    --bubble-border: rgba(212, 112, 58, 0.15);
    --bubble-hover-bg: rgba(212, 112, 58, 0.08);
    --text-primary: #4a2a15;
    --text-secondary: rgba(74, 42, 21, 0.7);
    --text-muted: rgba(74, 42, 21, 0.4);
    --shadow-card: 0 8px 32px rgba(212, 112, 58, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 12px 48px rgba(212, 112, 58, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-button: 0 4px 20px rgba(212, 112, 58, 0.3);
    --glow-cyan: 0 0 8px rgba(212, 112, 58, 0.3);
    --glow-pink: 0 0 8px rgba(212, 112, 58, 0.3);
    --neon-cyan: #d4703a;
    --neon-pink: #d4703a;
    --gold: #b8960c;
    --gold-bg: rgba(184, 150, 12, 0.1);
    --timer-safe: #d4703a;
    --correct-green: #2ea043;
    --correct-green-bg: rgba(46, 160, 67, 0.12);
    --wrong-red: #d73a49;
    --wrong-red-bg: rgba(215, 58, 73, 0.12);
}

/* Hide dark-theme overlays on light themes */
body.theme-blue::before,
body.theme-sunset::before {
    background: none !important;
}
body.theme-blue::after,
body.theme-sunset::after {
    background: none !important;
}