* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
            scrollbar-width: thin;
            scrollbar-color: #8b5cf6 #07071a;
        }

        html {
            scrollbar-width: thin;
            scrollbar-color: #8b5cf6 #07071a;
        }

        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: #07071a;
            border-left: 1px solid rgba(192, 132, 252, 0.12);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #c084fc, #7c3aed 48%, #4c1d95);
            border: 3px solid #07071a;
            border-radius: 999px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #f0abfc, #a855f7 48%, #6d28d9);
        }

        ::-webkit-scrollbar-corner {
            background: #07071a;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(145deg, #0a0a2a, #0a0a3a, #020210);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.5rem;
            position: relative;
            overflow-x: hidden;
        }

        /* Uzay arka plan efekti - yıldızlar ve nebula */
                /* Uzay arka plan efekti - yıldızlar ve nebula (ÇOĞALTILMIŞ VE RASTGELE) */
                body::before {
                    content: '';
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: 
                        radial-gradient(2px 2px at 15px 25px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 45px 85px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 78px 320px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 120px 50px, #fff, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 200px 480px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 280px 150px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 340px 620px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 420px 90px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 500px 350px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 560px 520px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 630px 180px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 700px 450px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 780px 70px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 850px 290px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 920px 580px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 980px 130px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 1050px 410px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 1120px 230px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 1180px 550px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 1250px 80px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 1320px 380px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 1400px 490px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 1480px 160px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 1550px 600px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 1620px 270px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 1700px 440px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 1780px 110px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 1850px 530px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 1920px 200px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 200px 700px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 550px 750px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 890px 800px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 1200px 720px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 1560px 780px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 1750px 850px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 350px 900px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 680px 950px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 1100px 880px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 1450px 920px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 1880px 970px, #ffc, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 60px 1050px, #fff, rgba(0,0,0,0)),
                        radial-gradient(2px 2px at 430px 1100px, #ffd, rgba(0,0,0,0)),
                        radial-gradient(1px 2px at 820px 1080px, #ffe, rgba(0,0,0,0)),
                        radial-gradient(3px 2px at 1280px 1150px, #fff, rgba(0,0,0,0)),
                        radial-gradient(2px 1px at 1680px 1020px, #ffc, rgba(0,0,0,0));
                    background-size: 200px 200px;
                    background-repeat: repeat;
                    opacity: 0.8;
                    pointer-events: none;
                    z-index: 0;
                }
                        /* Ekstra parlayan yıldızlar */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(1px 1px at 25px 150px, #ffff88, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 320px 450px, #ffffaa, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 680px 250px, #ffff88, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 950px 650px, #ffffaa, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 1280px 350px, #ffff88, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 1650px 550px, #ffffaa, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 350px 850px, #ffff88, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 1150px 950px, #ffffaa, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 1850px 150px, #ffff88, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 500px 1200px, #ffffaa, rgba(0,0,0,0));
            background-size: 300px 300px;
            background-repeat: repeat;
            opacity: 0.9;
            pointer-events: none;
            z-index: 0;
        }
        /* Nebula bulutları - animasyonlu */
        .nebula {
            position: fixed;
            border-radius: 50%;
            filter: blur(70px);
            opacity: 0.35;
            pointer-events: none;
            z-index: 0;
            animation: floatNebula 20s infinite alternate ease-in-out;
        }
        .nebula1 { width: 500px; height: 500px; background: #4a0e78; top: -150px; left: -200px; }
        .nebula2 { width: 600px; height: 600px; background: #1e3a8a; bottom: -200px; right: -200px; animation-duration: 25s; }
        .nebula3 { width: 400px; height: 400px; background: #b91c1c; top: 40%; left: 60%; animation-duration: 18s; opacity: 0.2; }
        .nebula4 { width: 350px; height: 350px; background: #0e7a6e; top: 70%; left: 10%; animation-duration: 22s; }
        
        @keyframes floatNebula {
            0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
            100% { transform: translate(50px, 30px) scale(1.2); opacity: 0.5; }
        }

        /* Modern giriş ekranı - uzay teması */
        .login-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(5, 10, 30, 0.7);
            backdrop-filter: blur(8px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        .login-overlay.hide-animation {
            animation: warpOut 0.8s ease-out forwards;
        }

        .login-overlay.performance-paused *,
        .login-overlay.performance-paused::before,
        .login-overlay.performance-paused::after {
            animation: none !important;
            transition: none !important;
        }

        .login-overlay.performance-paused .login-parallax-layer,
        .login-overlay.performance-paused .login-planet-orbit,
        .login-overlay.performance-paused .login-comet {
            opacity: 0;
            filter: none !important;
        }

        @keyframes warpOut {
            0% { opacity: 1; transform: scale(1); backdrop-filter: blur(8px); }
            50% { opacity: 0.5; transform: scale(1.05); backdrop-filter: blur(2px); }
            100% { opacity: 0; transform: scale(0.95); visibility: hidden; backdrop-filter: blur(0); display: none; }
        }

        .login-card {
            background: linear-gradient(135deg, rgba(20, 15, 55, 0.85), rgba(5, 5, 25, 0.95));
            backdrop-filter: blur(20px);
            border-radius: 2rem;
            padding: 2.5rem;
            width: 90%;
            max-width: 480px;
            text-align: center;
            border: 1px solid rgba(156, 94, 255, 0.7);
            box-shadow: 0 0 50px rgba(106, 13, 173, 0.6), inset 0 1px 0 rgba(255,255,255,0.1);
            animation: floatIn 0.6s ease-out;
            transition: transform 0.3s;
        }
        .login-card:hover { transform: translateY(-5px); }

        @keyframes floatIn {
            from { opacity: 0; transform: translateY(40px) rotateX(10deg);}
            to { opacity: 1; transform: translateY(0) rotateX(0);}
        }
        .google-auth-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1.5px solid rgba(156, 94, 255, 0.5);
            padding: 0.55rem 1.2rem;
            width: 100%;
            border-radius: 2.5rem;
            font-weight: 500;
            font-size: 0.8rem;
            cursor: pointer;
            color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: 0.3s;
            margin-bottom: 0.6rem;
            backdrop-filter: blur(4px);
        }
        .google-auth-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: #c084fc;
            transform: scale(1.01);
        }
        .google-auth-btn i {
            font-size: 1rem;
            color: #db4437;
        }
        .google-auth-btn span {
            background: linear-gradient(135deg, #fff, #c084fc);
            -webkit-background-clip: text;
            color: transparent;
        }

        .login-card i.fa-rocket {
            font-size: 4.5rem;
            background: linear-gradient(135deg, #c084fc, #f0abfc, #ffb347);
            -webkit-background-clip: text;
            color: transparent;
            margin-bottom: 1rem;
            animation: pulseGlow 2s infinite;
        }
        .divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 0.5rem 0;
            color: rgba(255,255,255,0.4);
            font-size: 0.7rem;
        }
        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid rgba(156, 94, 255, 0.4);
        }
        .divider::before {
            margin-right: 0.8rem;
        }
        .divider::after {
            margin-left: 0.8rem;
        }
        @keyframes pulseGlow {
            0% { filter: drop-shadow(0 0 2px #c084fc); text-shadow: 0 0 0px; }
            100% { filter: drop-shadow(0 0 12px #f0abfc); }
        }

        .login-card h2 {
            font-size: 2rem;
            background: linear-gradient(135deg, #fff, #c084fc, #f0abfc);
            -webkit-background-clip: text;
            color: transparent;
            margin-bottom: 1.5rem;
        }

        .input-group {
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 3rem;
            padding: 0.15rem 0.15rem 0.15rem 1.5rem;
            border: 1.5px solid rgba(156, 94, 255, 0.7);
            margin-bottom: 1.5rem;
            transition: all 0.2s;
        }
        .input-group:focus-within { border-color: #f0abfc; box-shadow: 0 0 15px rgba(240,171,252,0.4);}

        .input-group i { color: #c084fc; }
        .input-group input {
            flex: 1;
            background: transparent;
            border: none;
            padding: 1rem;
            font-size: 1rem;
            color: white;
            outline: none;
        }
        /* animasyonlu uyarı mesajı */
        .error-message {
            background: rgba(220, 38, 38, 0.9);
            color: #ffe6e6;
            padding: 0.7rem 1rem;
            border-radius: 2rem;
            font-size: 0.85rem;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            animation: shakeError 0.4s ease-in-out, fadeOut 3s forwards;
            display: inline-block;
            width: 100%;
            text-align: center;
        }
        @keyframes shakeError {
            0%,100% { transform: translateX(0); }
            25% { transform: translateX(-6px); }
            75% { transform: translateX(6px); }
        }
        @keyframes fadeOut {
            0% { opacity: 1; }
            70% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; display: none; }
        }

        .login-btn {
            background: linear-gradient(95deg, #a855f7, #7c3aed);
            border: none;
            padding: 0.9rem 1.8rem;
            width: 100%;
            border-radius: 3rem;
            font-weight: bold;
            font-size: 1.1rem;
            cursor: pointer;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
            transition: 0.3s;
            margin-top: 0.5rem;
        }
        .login-btn:hover { transform: scale(1.02); box-shadow: 0 0 25px rgba(168, 85, 247, 0.9); }

        /* Ana oyun konteynır - warp giriş animasyonu */
        .game-container {
            max-width: 1100px;
            width: 100%;
            background: rgba(25, 15, 45, 0.6);
            backdrop-filter: blur(4px);
            border-radius: 2rem;
            padding: 1.5rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(210, 180, 140, 0.4);
            display: none;
            animation: galaxyAppear 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            position: relative;
            z-index: 2;
        }
        @keyframes galaxyAppear {
            0% { opacity: 0; transform: scale(0.9) rotateX(15deg); filter: blur(8px); }
            100% { opacity: 1; transform: scale(1) rotateX(0); filter: blur(0); }
        }

        /* Seçim ekranı (2 quiz arası) */
        .quiz-selector { text-align: center; padding: 2rem; }
        .quiz-selector h3 { color: #FFE6B0; margin-bottom: 2rem; font-size: 1.6rem; text-shadow: 0 0 5px #ffb347; }
        .selector-buttons { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
        .quiz-type-btn {
            background: linear-gradient(145deg, #2c1a46, #1f1135);
            border: 2px solid #d4af37;
            padding: 1.5rem 2rem;
            border-radius: 2rem;
            width: 260px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .quiz-type-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent);
            transition: left 0.5s;
        }
        .quiz-type-btn:hover::before { left: 100%; }
        .quiz-type-btn:hover { transform: translateY(-8px) scale(1.02); border-color: #ffb347; box-shadow: 0 0 25px #d4af37; }

        .quiz-type-btn i { font-size: 3rem; color: #ffd966; margin-bottom: 0.8rem; }
        .quiz-type-btn h4 { color: white; font-size: 1.3rem; }
        .quiz-type-btn p { color: #ccc; font-size: 0.8rem; margin-top: 0.5rem; }

        /* ÜST BAR */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2rem;
            background: rgba(0,0,0,0.5);
            padding: 0.8rem 1.5rem;
            border-radius: 3rem;
            border: 1px solid rgba(212, 175, 55, 0.6);
        }
        .user-welcome { color: #FFD966; font-weight: bold; }
        .top-100 { font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg, #FFD966, #FFB347); background-clip: text; -webkit-background-clip: text; color: transparent; }
        .question-counter { background: #00000066; padding: 0.3rem 1rem; border-radius: 40px; color: #FFE6B0; font-weight: 600; }
        .score-stats { display: flex; align-items: center; gap: 2rem; background: rgba(0,0,0,0.3); padding: 0.3rem 1.8rem; border-radius: 60px; }
        .score-circle { text-align: center; background: radial-gradient(circle at 30% 20%, #4a2a6a, #2a1545); width: 70px; height: 70px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid #FFD966; }
        .score-circle small { font-size: 0.65rem; color: #FFD966; }
        .score-circle .score-value { font-size: 1.5rem; font-weight: 800; color: white; }
        .stat-item { display: flex; align-items: center; gap: 0.4rem; background: #1e102e; padding: 0.3rem 1rem; border-radius: 2rem; }
        .stat-item span { font-weight: bold; font-size: 1.2rem; color: #facc15; }

        /* SORU KUTUSU */
        .question-group {
            background: linear-gradient(145deg, rgba(49, 27, 74, 0.9), rgba(31, 17, 53, 0.95));
            border-radius: 2rem;
            padding: 1.8rem;
            margin: 1rem 0;
            border: 1px solid #d4af37;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        .question-text {
            font-size: 1.5rem;
            font-weight: 600;
            color: #fef9e6;
            text-align: center;
            padding: 0.8rem;
            background: #25173d80;
            border-radius: 1.5rem;
        }
        .options-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        .option-btn {
            background: #2c1a46;
            border: 2px solid #5a3e7c;
            padding: 1rem;
            border-radius: 1.2rem;
            font-size: 1rem;
            color: #f0e6d2;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .option-btn:hover:not(:disabled) { transform: scale(1.01); background: #3f2862; border-color: #ffb347; box-shadow: 0 0 10px rgba(255,180,70,0.4); }
        .option-prefix {
            background: #1a0a2e;
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: 800;
            color: #FFD966;
        }
        .correct-highlight { background: #1f6d2f !important; border-color: #a5d6a5 !important; animation: correctPop 0.4s ease; }
        .wrong-highlight { background: #a12a2a !important; border-color: #ffaaaa !important; animation: shakeWrong 0.3s ease; }
        @keyframes correctPop { 0% { transform: scale(0.95); } 50% { transform: scale(1.05); background: #2b8a3a; } 100% { transform: scale(1); } }
        @keyframes shakeWrong { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

        .jokers-area {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }
        .joker-card {
            background: #140a21;
            border-radius: 2rem;
            padding: 0.5rem 1.2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #d4af37;
        }
        .joker-card span, .joker-card .joker-count {
            color: white !important;
            font-weight: 500;
        }
        .joker-btn {
            background: #2d1b44;
            border: none;
            padding: 0.4rem 1rem;
            border-radius: 2rem;
            font-weight: bold;
            color: #FFD966;
            cursor: pointer;
            transition: 0.2s;
        }
        .joker-btn:active { transform: scale(0.95);}
        .joker-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .timer-clock {
            background: #0a0316;
            padding: 0.4rem 1.2rem;
            border-radius: 3rem;
            font-family: monospace;
            font-size: 1.6rem;
            font-weight: bold;
            color: #facc15;
            display: inline-block;
            animation: pulseTimer 1s infinite;
        }
        @keyframes pulseTimer { 0% { text-shadow: 0 0 0px #facc15; } 100% { text-shadow: 0 0 5px #ffb347; } }
        .next-btn {
            background: #d4af37;
            width: 100%;
            padding: 0.8rem;
            border-radius: 3rem;
            font-weight: bold;
            border: none;
            margin-top: 0.8rem;
            cursor: pointer;
            transition: 0.2s;
        }
        .next-btn:active { transform: scale(0.98); }
        .next-btn:disabled { background: #6b5a3a; cursor: default; }
        .result-panel { margin-top: 1rem; text-align: center; background: #000000aa; border-radius: 2rem; padding: 0.8rem; color: #FFE6B0; }
        .back-home {
            background: #2c1a46;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            color: #ffd966;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: 0.2s;
        }
        .back-home:hover { background: #4a2a6a; transform: translateX(-3px);}

        .user-theme-picker {
            position: fixed;
            left: 18px;
            bottom: 18px;
            z-index: 1200;
            display: none;
            align-items: center;
            gap: 0.55rem;
            padding: 0.55rem;
            background: rgba(9, 10, 34, 0.78);
            border: 1px solid rgba(255, 217, 102, 0.38);
            border-radius: 1rem;
            backdrop-filter: blur(10px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        }

        .user-theme-picker .theme-btn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.72);
            cursor: pointer;
            transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .user-theme-picker .theme-btn:hover,
        .user-theme-picker .theme-btn.active {
            transform: translateY(-2px);
            border-color: #FFD966;
            box-shadow: 0 0 14px rgba(255, 217, 102, 0.45);
        }

        .theme-btn[data-theme="default"] { background: linear-gradient(145deg, #0a0a2a, #0a0a3a); }
        .theme-btn[data-theme="purple"] { background: linear-gradient(145deg, #1a0a2e, #2a1545); }
        .theme-btn[data-theme="blue"] { background: linear-gradient(145deg, #0a2e2e, #154545); }
        .theme-btn[data-theme="red"] { background: linear-gradient(145deg, #2e0a0a, #451515); }

        @media (max-width: 700px) { .options-grid { grid-template-columns: 1fr; } }
                /* Hata mesajı konteynırı ve animasyonlu uyarı - ORTA ÜST */
                        /* Hata mesajı konteynırı ve animasyonlu uyarı - ORTA ÜST */
        .error-message-container {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2000;
            min-width: 280px;
            max-width: 90%;
            pointer-events: none;
        }
        
        .error-message {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-size: 0.85rem;
            backdrop-filter: blur(8px);
            border: 1px solid #ff6b6b;
            box-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
            animation: slideDownShake 0.5s ease-out forwards;
            display: block;
            width: 100%;
            text-align: center;
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        
        @keyframes slideDownShake {
            0% {
                opacity: 0;
                transform: translateY(-100px) scale(0.8);
            }
            30% {
                opacity: 1;
                transform: translateY(10px) scale(1.02);
            }
            50% {
                transform: translateY(-5px) scale(1);
            }
            70% {
                transform: translateX(5px);
            }
            85% {
                transform: translateX(-5px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .error-message i {
            margin-right: 8px;
            font-size: 1rem;
            animation: pulseIcon 0.8s ease infinite;
        }
        
        @keyframes pulseIcon {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        
        /* Uyarı mesajı kaybolma animasyonu */
        .error-message.fade-out {
            animation: fadeOutUp 0.5s ease forwards;
        }
        
        @keyframes fadeOutUp {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-50px);
                visibility: hidden;
                display: none;
            }
        }
                
                /* Giriş kartına küçük bir düzenleme - input ile buton arası mesafe azaltıldı */
                .login-card {
                    background: linear-gradient(135deg, rgba(20, 15, 55, 0.85), rgba(5, 5, 25, 0.95));
                    backdrop-filter: blur(20px);
                    border-radius: 2rem;
                    padding: 2rem 2rem 1.8rem 2rem;
                    width: 90%;
                    max-width: 420px;
                    text-align: center;
                    border: 1px solid rgba(156, 94, 255, 0.7);
                    box-shadow: 0 0 50px rgba(106, 13, 173, 0.6), inset 0 1px 0 rgba(255,255,255,0.1);
                    animation: floatIn 0.6s ease-out;
                    transition: transform 0.3s;
                }
                
                .input-group {
                    display: flex;
                    align-items: center;
                    background: rgba(0, 0, 0, 0.7);
                    border-radius: 3rem;
                    padding: 0.1rem 0.1rem 0.1rem 1.5rem;
                    border: 1.5px solid rgba(156, 94, 255, 0.7);
                    margin-bottom: 1rem;
                    transition: all 0.2s;
                }
                
                .input-group input {
                    flex: 1;
                    background: transparent;
                    border: none;
                    padding: 0.8rem 0.8rem 0.8rem 0.3rem;
                    font-size: 0.95rem;
                    color: white;
                    outline: none;
                }
                
                .login-btn {
                    background: linear-gradient(95deg, #a855f7, #7c3aed);
                    border: none;
                    padding: 0.75rem 1.5rem;
                    width: 100%;
                    border-radius: 3rem;
                    font-weight: bold;
                    font-size: 1rem;
                    cursor: pointer;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
                    transition: 0.3s;
                    margin-top: 0.3rem;
                }
                
                .login-card h2 {
                    font-size: 1.8rem;
                    background: linear-gradient(135deg, #fff, #c084fc, #f0abfc);
                    -webkit-background-clip: text;
                    color: transparent;
                    margin-bottom: 1rem;
                }
                
                .login-card i.fa-rocket {
                    font-size: 3.5rem;
                    background: linear-gradient(135deg, #c084fc, #f0abfc, #ffb347);
                    -webkit-background-clip: text;
                    color: transparent;
                    margin-bottom: 0.5rem;
                    animation: pulseGlow 2s infinite;
                }
                        /* MODERN OYUN BİTTİ EKRANI */
        .finish-screen {
            text-align: center;
            padding: 1.5rem;
            animation: finishGlow 0.8s ease-out;
        }
        
        @keyframes finishGlow {
            0% { opacity: 0; transform: scale(0.9); filter: blur(5px); }
            100% { opacity: 1; transform: scale(1); filter: blur(0); }
        }
        
        .finish-icon {
            font-size: 4rem;
            margin-bottom: 0.5rem;
            animation: trophyBounce 0.6s ease-out;
        }
        
        @keyframes trophyBounce {
            0% { transform: scale(0) rotate(-20deg); }
            50% { transform: scale(1.2) rotate(5deg); }
            100% { transform: scale(1) rotate(0); }
        }
        
        .finish-title {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #FFD966, #FFB347, #FF8C42);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 1.5rem;
            text-shadow: 0 0 20px rgba(255, 180, 70, 0.3);
        }
        
        .finish-stats {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        
        .stat-card {
            background: linear-gradient(145deg, rgba(30, 20, 55, 0.9), rgba(20, 12, 40, 0.95));
            border-radius: 1.5rem;
            padding: 1.2rem 2rem;
            min-width: 140px;
            text-align: center;
            border: 1px solid rgba(212, 175, 55, 0.5);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease;
            animation: statPop 0.5s ease-out backwards;
        }
        
        .stat-card:nth-child(1) { animation-delay: 0.1s; }
        .stat-card:nth-child(2) { animation-delay: 0.2s; }
        .stat-card:nth-child(3) { animation-delay: 0.3s; }
        
        @keyframes statPop {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            border-color: #ffb347;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .stat-card i {
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
            display: block;
        }
        
        .stat-card .stat-label {
            font-size: 0.8rem;
            color: #b9b9e0;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        
        .stat-card .stat-value {
            font-size: 2.5rem;
            font-weight: 800;
            color: #FFD966;
            line-height: 1.2;
        }
        
        .stat-card.correct i { color: #4ade80; }
        .stat-card.wrong i { color: #f87171; }
        .stat-card.score i { color: #facc15; }
        
        .finish-percentage {
            margin: 1rem 0 2rem 0;
        }
        
        .percentage-bar {
            width: 100%;
            max-width: 300px;
            margin: 0.5rem auto;
            height: 12px;
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            overflow: hidden;
        }
        
        .percentage-fill {
            height: 100%;
            background: linear-gradient(90deg, #facc15, #ffb347);
            border-radius: 20px;
            width: 0%;
            animation: fillBar 1s ease-out forwards;
        }
        
        @keyframes fillBar {
            from { width: 0%; }
            to { width: var(--fill-width); }
        }

        .login-overlay {
            display: grid;
            grid-template-columns: minmax(0, 1180px);
            gap: 0.95rem;
            align-items: start;
            justify-content: center;
            justify-items: center;
            align-content: center;
            padding: 0.35rem 1.8rem 0.45rem;
            overflow-x: hidden;
            overflow-y: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 91% 12%, rgba(255, 173, 116, 0.2) 0 7%, rgba(169, 84, 255, 0.14) 12%, transparent 24%),
                radial-gradient(circle at 6% 34%, rgba(103, 58, 183, 0.34) 0 9%, rgba(56, 20, 112, 0.18) 16%, transparent 28%),
                radial-gradient(circle at 52% 26%, rgba(111, 92, 255, 0.12), transparent 28%),
                linear-gradient(180deg, #020314 0%, #040620 44%, #020211 100%);
        }

        .login-overlay::before,
        .login-overlay::after {
            content: "";
            position: absolute;
            pointer-events: none;
            z-index: 0;
        }

        .login-overlay::before {
            left: -128px;
            top: 27%;
            width: 330px;
            height: 330px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 34% 27%, rgba(255,255,255,0.28) 0 4%, transparent 12%),
                radial-gradient(circle at 64% 34%, rgba(255, 177, 239, 0.2) 0 7%, transparent 16%),
                radial-gradient(ellipse at 54% 62%, rgba(189, 93, 255, 0.28) 0 18%, transparent 42%),
                repeating-linear-gradient(164deg, rgba(255,255,255,0.04) 0 6px, rgba(76, 29, 149, 0.08) 8px 18px, rgba(13, 8, 46, 0.04) 20px 34px),
                radial-gradient(circle at 38% 28%, #9f6bff 0 10%, #5d22b7 35%, #170846 68%, #040316 100%);
            box-shadow:
                0 0 120px rgba(138, 76, 255, 0.36),
                inset -42px -30px 68px rgba(1, 3, 16, 0.68),
                inset 24px 18px 40px rgba(255, 255, 255, 0.08);
            opacity: 0.78;
        }

        .login-overlay::after {
            left: -170px;
            top: calc(27% + 112px);
            width: 430px;
            height: 94px;
            border-radius: 50%;
            border: 11px solid rgba(202, 132, 255, 0.34);
            border-left-color: rgba(119, 76, 255, 0.1);
            border-bottom-color: rgba(119, 76, 255, 0.12);
            transform: rotate(-13deg);
            filter: blur(0.2px);
            opacity: 0.74;
        }

        .login-hero,
        .login-card {
            position: relative;
            z-index: 2;
        }

        .login-hero {
            width: 100%;
            max-width: 1120px;
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            margin-top: 0;
            align-items: center;
        }

        .login-kicker {
            display: inline-flex;
            width: fit-content;
            padding: 0.5rem 1rem;
            border-radius: 999px;
            background: rgba(14, 165, 233, 0.14);
            border: 1px solid rgba(125, 211, 252, 0.28);
            color: #c4f1ff;
            font-size: 0.78rem;
            letter-spacing: 0.18rem;
            font-weight: 700;
            align-self: flex-start;
            margin-top: 0.35rem;
        }

        .login-hero h1 {
            font-size: clamp(2.2rem, 4.2vw, 3.65rem);
            line-height: 1.12;
            color: #f8fbff;
            max-width: 20ch;
            text-shadow: 0 10px 35px rgba(4, 10, 30, 0.45);
            text-align: center;
            margin: 0.15rem 0 0;
        }
        .login-gradient-headline {
            background: linear-gradient(135deg, #a78bfa 0%, #c084fc 45%, #e879f9 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            white-space: nowrap;
            display: inline-block;
            transform: translateX(-30px);
            padding-bottom: 0.08em;
        }

        .login-description {
            max-width: 58ch;
            color: #d1dcff;
            font-size: 0.95rem;
            line-height: 1.42;
            text-align: center;
            margin: 0 auto;
        }

        .login-feature-grid,
        .login-stats-row,
        .login-bottom-panels {
            display: grid;
            width: 100%;
            gap: 0.78rem;
            margin-top: 0.08rem;
            margin-left: auto;
            margin-right: auto;
        }

        .login-feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

        .login-feature-card,
        .login-highlight-card,
        .login-stat-chip {
            background: linear-gradient(145deg, rgba(19, 25, 61, 0.74), rgba(8, 11, 34, 0.84));
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 15px 40px rgba(5, 8, 25, 0.28);
            backdrop-filter: blur(12px);
        }

        .login-feature-card {
            padding: 0.82rem;
            border-radius: 1.3rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            min-height: 98px;
        }

        .login-feature-card i,
        .login-highlight-title i {
            color: #ffd966;
            font-size: 1.15rem;
        }

        .login-feature-card strong,
        .login-highlight-card strong {
            color: #ffffff;
            font-size: 0.93rem;
        }

        .login-feature-card span,
        .login-highlight-card p,
        .login-highlight-title span,
        .login-leaderboard-item small,
        .login-stat-chip span {
            color: #c8d5ff;
            line-height: 1.42;
            font-size: 0.82rem;
        }

        .login-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .login-stats-row {
            gap: 0;
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: linear-gradient(145deg, rgba(19, 25, 61, 0.74), rgba(8, 11, 34, 0.84));
            box-shadow: 0 15px 40px rgba(5, 8, 25, 0.28);
            overflow: hidden;
            min-height: 86px;
        }

        .login-stat-chip {
            border-radius: 1.2rem;
            padding: 0.82rem 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0.78rem;
            background: transparent;
            border: none;
        }

        .login-stat-chip > div {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1.08;
        }
        .login-stat-chip:not(:last-child) {
            border-right: 1px solid rgba(148, 163, 184, 0.18);
        }

        .login-stat-chip strong {
            color: #fff5c4;
            font-size: 1.72rem;
            line-height: 1;
            margin-top: 0.25rem;
        }

        .login-stat-chip i {
            width: 42px;
            min-width: 42px;
            text-align: center;
            font-size: 1.85rem;
            color: #a855f7;
        }

        .login-stat-chip:nth-child(2) i {
            color: #f472d0;
        }

        .login-stat-chip:nth-child(3) i {
            color: #73a7ff;
        }

        .login-bottom-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .login-bottom-panels {
            gap: 0.52rem;
        }

        .login-highlight-card {
            border-radius: 1.35rem;
            padding: 0.54rem 0.68rem;
            display: flex;
            flex-direction: column;
            gap: 0.24rem;
            min-height: 108px;
        }

        .login-highlight-title {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-weight: 700;
        }

        .login-leaderboard {
            display: flex;
            flex-direction: column;
            gap: 0.34rem;
        }

        .login-leaderboard-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.7rem;
            padding: 0.38rem 0.58rem;
            border-radius: 0.82rem;
            background: rgba(255, 255, 255, 0.04);
        }

        .login-leaderboard-item > div {
            min-width: 0;
        }

        .login-leaderboard-item > div > div {
            min-width: 0;
        }
       

        .login-leaderboard-item strong { font-size: 0.84rem; }

        .login-leaderboard-item small {
            font-size: 0.72rem;
        }

        .login-leaderboard-rank {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 217, 102, 0.18);
            color: #ffe18d;
            font-weight: 800;
            margin-right: 0.5rem;
            font-size: 0.82rem;
        }

        .login-leaderboard-item:nth-child(1) .login-leaderboard-rank {
            background: linear-gradient(145deg, #ffd966, #f6b73c);
            color: #fff;
        }

        .login-leaderboard-item:nth-child(2) .login-leaderboard-rank {
            background: linear-gradient(145deg, #aeb7c8, #697386);
            color: #fff;
        }

        .login-leaderboard-item:nth-child(3) .login-leaderboard-rank {
            background: linear-gradient(145deg, #c78a59, #8a5233);
            color: #fff;
        }


        .login-card {
            width: 100%;
            max-width: 890px;
            justify-self: center;
            align-self: center;
            margin-top: 0.05rem;
            margin-left: auto;
            margin-right: auto;
            padding: 1.2rem 1.55rem;
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            background: linear-gradient(135deg, rgba(12, 14, 44, 0.9), rgba(6, 7, 28, 0.95));
            border: 1px solid rgba(115, 101, 255, 0.45);
            box-shadow: 0 0 30px rgba(83, 55, 199, 0.38), inset 0 1px 0 rgba(255,255,255,0.06);
            border-radius: 1.35rem;
            position: relative;
        }
        .login-card-main {
            display: grid;
            grid-template-columns: 250px minmax(0, 1fr);
            align-items: center;
            gap: 0.55rem;
        }
        .login-card-field {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            width: 100%;
            justify-content: flex-start;
        }
        .login-card-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.35rem;
            position: relative;
        }
        .login-card-icon-wrap {
            width: 244px;
            height: 172px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            background: transparent;
            border: none;
            box-shadow: none;
        }
        .login-brand-logo {
            width: 260px;
            height: auto;
            display: block;
            object-fit: contain;
            filter: drop-shadow(0 0 18px rgba(111, 95, 255, 0.42));
        }
        /* login-card-content artık grid (yukarıda) */

        .login-card-badge {
            display: inline-flex;
            position: absolute;
            top: 0.1rem;
            left: 0;
            transform: none;
            padding: 0.32rem 0.72rem;
            border-radius: 999px;
            background: rgba(168, 85, 247, 0.16);
            border: 1px solid rgba(216, 180, 254, 0.3);
            color: #eac7ff;
            font-size: 0.64rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
        }
        .login-card h2 {
            margin: 1.0rem 0 0;
            font-size: 2.05rem;
            text-align: left;
            align-self: flex-start;
            transform: translateY(10px);
        }

        .login-card-copy {
            color: #dbe4ff;
            line-height: 1.35;
            margin-bottom: 0.05rem;
            max-width: 44ch;
            font-size: 0.94rem;
            transform: translateY(10px);
        }
        .login-card .input-group {
            margin: 22px 0 0 0;
            height: 40px;
            border-radius: 999px;
            padding: 0 0.9rem;
            width: 330px;
            max-width: 330px;
            min-width: 330px;
            flex: 0 0 auto;
            box-sizing: border-box;
        }
        .login-card .input-group input {
            font-size: 0.9rem;
        }
        .login-card .input-group i {
            font-size: 0.86rem;
        }
        .login-card .login-btn {
            width: 218px;
            min-width: 218px;
            margin: 0 0 0 14px;
            height: 62px;
            border-radius: 0.95rem;
            font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
            font-size: 1.12rem;
            font-weight: 800;
            letter-spacing: 0;
            padding: 0 1rem;
            justify-content: center;
            white-space: nowrap;
        }

        .login-parallax-layer,
        .login-planet-orbit,
        .login-comet {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            transition: transform 0.18s ease-out;
        }

        .login-parallax-layer {
            opacity: 0.76;
            background-repeat: repeat;
        }

        .stars-far {
            background-image:
                radial-gradient(circle at 8% 18%, rgba(255,255,255,0.7) 0 0.8px, transparent 1.4px),
                radial-gradient(circle at 22% 72%, rgba(188, 168, 255,0.58) 0 0.9px, transparent 1.5px),
                radial-gradient(circle at 47% 28%, rgba(207, 221, 255,0.56) 0 0.8px, transparent 1.4px),
                radial-gradient(circle at 68% 44%, rgba(255,255,255,0.62) 0 0.9px, transparent 1.6px),
                radial-gradient(circle at 86% 82%, rgba(169, 142, 255,0.5) 0 0.8px, transparent 1.5px);
            background-size: 190px 190px;
        }

        .stars-mid {
            background-image:
                radial-gradient(circle at 10% 28%, rgba(255, 255, 255, 0.98) 0 1.15px, rgba(178, 123, 255, 0.45) 1.55px, transparent 5px),
                radial-gradient(circle at 34% 64%, rgba(201, 185, 255, 0.9) 0 1px, rgba(139, 92, 246, 0.42) 1.6px, transparent 4.8px),
                radial-gradient(circle at 61% 18%, rgba(225, 234, 255, 0.92) 0 1.1px, rgba(96, 165, 250, 0.3) 1.7px, transparent 5px),
                radial-gradient(circle at 78% 76%, rgba(255, 255, 255, 0.9) 0 1.2px, rgba(216, 180, 254, 0.38) 1.8px, transparent 5.4px),
                radial-gradient(circle at 92% 38%, rgba(186, 154, 255, 0.82) 0 1px, rgba(168, 85, 247, 0.34) 1.6px, transparent 4.8px);
            background-size: 215px 215px;
            filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.28));
        }

        .stars-near {
            background-image:
                radial-gradient(circle at 14% 42%, rgba(255,255,255,1) 0 1.5px, rgba(196, 181, 253, 0.66) 1.9px, transparent 8px),
                radial-gradient(circle at 40% 18%, rgba(221, 214, 254, 0.95) 0 1.35px, rgba(168, 85, 247, 0.56) 1.8px, transparent 7px),
                radial-gradient(circle at 63% 70%, rgba(255,255,255,0.96) 0 1.45px, rgba(129, 140, 248, 0.48) 1.9px, transparent 8px),
                radial-gradient(circle at 88% 30%, rgba(245, 243, 255, 0.98) 0 1.4px, rgba(232, 121, 249, 0.54) 1.85px, transparent 7.5px);
            background-size: 255px 255px;
            filter: drop-shadow(0 0 7px rgba(192, 132, 252, 0.42));
            animation: starTwinkle 5.8s ease-in-out infinite alternate;
        }

        .stars-near::before,
        .stars-near::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .stars-near::before {
            left: 19%;
            top: 28%;
            width: 4px;
            height: 4px;
            background: #ffffff;
            box-shadow:
                0 0 7px 2px rgba(255, 255, 255, 0.95),
                0 0 18px 7px rgba(168, 85, 247, 0.5),
                405px -72px 0 -1px rgba(255,255,255,0.95),
                405px -72px 10px 2px rgba(129, 140, 248, 0.48),
                744px 116px 0 -1px rgba(255,255,255,0.9),
                744px 116px 12px 3px rgba(232, 121, 249, 0.44);
        }

        .stars-near::after {
            right: 14%;
            top: 10%;
            width: 3px;
            height: 3px;
            background: #dbeafe;
            box-shadow:
                0 0 8px 2px rgba(147, 197, 253, 0.78),
                0 0 20px 8px rgba(124, 58, 237, 0.38),
                -284px 184px 0 0 rgba(255,255,255,0.92),
                -284px 184px 14px 4px rgba(168, 85, 247, 0.42),
                -706px 60px 0 -1px rgba(255,255,255,0.85),
                -706px 60px 12px 3px rgba(96, 165, 250, 0.36);
        }

        .login-planet-orbit {
            inset: auto;
            right: -6rem;
            top: 1.2rem;
            width: 410px;
            height: 410px;
            animation: orbitFloat 18s ease-in-out infinite alternate;
        }

        .login-planet {
            position: absolute;
            right: 0;
            top: 0;
            width: 286px;
            height: 286px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 32% 22%, rgba(255,255,255,0.42) 0 4%, transparent 12%),
                radial-gradient(circle at 39% 32%, rgba(255, 207, 158, 0.55) 0 12%, transparent 27%),
                radial-gradient(ellipse at 68% 24%, rgba(255, 146, 113, 0.36) 0 13%, transparent 30%),
                radial-gradient(ellipse at 54% 64%, rgba(171, 73, 255, 0.45) 0 20%, transparent 43%),
                repeating-linear-gradient(158deg, rgba(255, 229, 180, 0.14) 0 7px, rgba(209, 93, 255, 0.12) 10px 22px, rgba(54, 31, 137, 0.18) 24px 39px),
                linear-gradient(152deg, #ffb16b 0%, #f06faa 27%, #ae54ff 53%, #3525a8 100%);
            box-shadow:
                0 0 36px rgba(255, 166, 116, 0.3),
                0 0 105px rgba(168, 85, 247, 0.46),
                inset -52px -42px 68px rgba(3, 4, 28, 0.66),
                inset 28px 18px 38px rgba(255, 244, 214, 0.12);
            animation: planetSpin 26s linear infinite;
            overflow: hidden;
        }

        .login-planet::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background:
                linear-gradient(118deg, transparent 18%, rgba(255,255,255,0.2) 38%, transparent 62%),
                radial-gradient(circle at 68% 30%, rgba(255,255,255,0.26), transparent 26%),
                radial-gradient(circle at 15% 84%, rgba(4, 6, 32, 0.42), transparent 34%);
            mix-blend-mode: screen;
        }

        .login-planet::after {
            content: "";
            position: absolute;
            inset: -4%;
            border-radius: 50%;
            background:
                radial-gradient(circle at 24% 22%, transparent 0 42%, rgba(255,255,255,0.08) 43%, transparent 48%),
                linear-gradient(95deg, transparent 0 44%, rgba(255,255,255,0.09) 48%, transparent 54%);
            opacity: 0.56;
            filter: blur(0.6px);
        }

        .login-planet-ring {
            position: absolute;
            right: -28px;
            top: 88px;
            width: 350px;
            height: 104px;
            border-radius: 50%;
            border: 13px solid rgba(190, 111, 255, 0.46);
            border-left-color: rgba(111, 78, 255, 0.16);
            border-bottom-color: rgba(111, 78, 255, 0.13);
            border-top-color: rgba(231, 190, 255, 0.52);
            transform: rotate(-17deg);
            box-shadow:
                inset 0 0 22px rgba(255,255,255,0.09),
                0 0 18px rgba(255, 190, 245, 0.18),
                0 0 34px rgba(168, 85, 247, 0.26);
        }

        .login-planet-ring::after {
            content: "";
            position: absolute;
            inset: 9px -2px;
            border-radius: 50%;
            border-top: 4px solid rgba(255, 225, 255, 0.24);
            border-bottom: 3px solid rgba(96, 74, 255, 0.12);
        }

        .login-moon {
            position: absolute;
            right: 190px;
            top: 30px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 30% 24%, rgba(255,255,255,0.95) 0 9%, transparent 18%),
                radial-gradient(circle at 62% 68%, rgba(64, 81, 181, 0.34) 0 18%, transparent 34%),
                radial-gradient(circle at 35% 35%, #f7f2ff, #8097ff 82%);
            box-shadow: 0 0 24px rgba(177, 197, 255, 0.62), inset -10px -8px 18px rgba(14, 23, 70, 0.36);
            animation: moonFloat 9s ease-in-out infinite;
        }

        .login-comet {
            width: 180px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,214,102,0));
            opacity: 0.55;
            filter: blur(0.2px);
        }

        .comet-one {
            inset: 12% auto auto 10%;
            transform: rotate(-18deg);
            animation: cometMove 11s linear infinite;
        }

        .comet-two {
            inset: auto 12% 20% auto;
            transform: rotate(-24deg);
            animation: cometMoveTwo 14s linear infinite;
        }

        @keyframes planetSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes starTwinkle {
            from {
                opacity: 0.72;
                filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.34));
            }
            to {
                opacity: 1;
                filter: drop-shadow(0 0 10px rgba(216, 180, 254, 0.58));
            }
        }

        @keyframes orbitFloat {
            from { transform: translate3d(0, 0, 0); }
            to { transform: translate3d(-24px, 18px, 0); }
        }

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

        @keyframes cometMove {
            0% { transform: translate3d(0, 0, 0) rotate(-18deg); opacity: 0; }
            15% { opacity: 0.55; }
            100% { transform: translate3d(420px, 160px, 0) rotate(-18deg); opacity: 0; }
        }

        @keyframes cometMoveTwo {
            0% { transform: translate3d(0, 0, 0) rotate(-24deg); opacity: 0; }
            12% { opacity: 0.5; }
            100% { transform: translate3d(-380px, -180px, 0) rotate(-24deg); opacity: 0; }
        }

        @media (max-width: 1080px) {
            .login-overlay {
                grid-template-columns: 1fr;
                padding: 1.5rem 1.25rem 2rem;
                align-content: start;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .login-hero {
                width: min(100%, 760px);
                order: 2;
            }

            .login-card {
                order: 1;
                justify-self: center;
            }

            .login-feature-grid,
            .login-stats-row,
            .login-bottom-panels {
                grid-template-columns: 1fr;
            }

            .login-hero h1 {
                max-width: none;
            }

            .login-planet-orbit {
                right: -7rem;
                top: -1rem;
                transform: scale(0.8);
            }
        }

        @media (max-width: 700px) {
            .login-overlay {
                gap: 1.5rem;
                padding: 1rem;
                height: 100dvh;
                overflow-y: auto;
                align-content: start;
            }

            .login-card,
            .login-hero {
                width: 100%;
            }

            .login-card {
                padding: 1.6rem;
                justify-self: center;
                order: 1;
            }

            .login-feature-grid {
                order: 2;
            }

            .login-stats-row {
                order: 3;
            }

            .login-bottom-panels {
                order: 4;
            }

            .login-card-main {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 0.85rem;
            }

            .login-card-icon-wrap {
                width: min(260px, 92vw);
                height: 172px;
            }

            .login-brand-logo {
                width: min(268px, 94vw);
            }

            .login-card-content {
                align-items: center;
                width: 100%;
                text-align: center;
            }

            .login-card-badge {
                position: static;
                align-self: center;
                margin-bottom: 0.2rem;
            }

            .login-card h2 {
                margin-top: 0;
                text-align: center;
                align-self: center;
                transform: none;
            }

            .login-card-copy {
                transform: none;
            }

            .login-card-field {
                width: 100%;
                flex-direction: column;
            }

            .login-card .input-group,
            .login-card .login-btn {
                width: 100%;
                min-width: 0;
                max-width: none;
            }

            .login-card .input-group {
                margin: 0;
            }

            .login-card .login-btn {
                margin: 0;
            }

            .login-hero h1 {
                font-size: 2.3rem;
                line-height: 1.15;
                overflow-wrap: anywhere;
            }

            .login-gradient-headline {
                white-space: normal;
                transform: none;
            }

            .login-planet-orbit {
                right: -9rem;
                top: -2rem;
                transform: scale(0.62);
                opacity: 0.7;
            }

            .login-feature-card,
            .login-highlight-card,
            .login-stat-chip {
                padding: 0.95rem;
            }
        }
        
        .percentage-text {
            font-size: 1rem;
            color: #FFE6B0;
            font-weight: 500;
        }
        
        .finish-message {
            font-size: 1rem;
            color: #c4b5fd;
            margin-bottom: 1.5rem;
            padding: 0.8rem;
            background: rgba(255,255,255,0.05);
            border-radius: 2rem;
            display: inline-block;
        }
        
        .finish-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .finish-btn {
            padding: 0.7rem 1.5rem;
            border-radius: 2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }
        
        .finish-btn.primary {
            background: linear-gradient(95deg, #a855f7, #7c3aed);
            color: white;
            box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
        }
        
        .finish-btn.primary:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(168, 85, 247, 0.8);
        }
        
        .finish-btn.secondary {
            background: rgba(255,255,255,0.1);
            color: #FFD966;
            border: 1px solid rgba(212, 175, 55, 0.5);
        }
        
        .finish-btn.secondary:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.02);
        }    

        .player-answer-review {
            margin: 1.25rem auto 0;
            max-width: 900px;
            display: grid;
            gap: 0.75rem;
            text-align: left;
        }

        .player-answer-review[hidden] {
            display: none;
        }

        .player-answer-card {
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(255, 255, 255, 0.055);
            border-radius: 1.1rem;
            padding: 0.9rem;
        }

        .player-answer-card.correct {
            border-color: rgba(34, 197, 94, 0.32);
            background: rgba(34, 197, 94, 0.08);
        }

        .player-answer-card.wrong,
        .player-answer-card.timeout,
        .player-answer-card.skipped {
            border-color: rgba(248, 113, 113, 0.3);
            background: rgba(248, 113, 113, 0.07);
        }

        .player-answer-head {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: start;
            gap: 0.7rem;
        }

        .player-answer-head span {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-grid;
            place-items: center;
            background: linear-gradient(135deg, #ffe8a3, #a855f7);
            color: #120b2e;
            font-weight: 900;
            font-size: 0.82rem;
        }

        .player-answer-head strong {
            color: #fff;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

        .player-answer-head em {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.6rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: #e9d5ff;
            font-style: normal;
            font-size: 0.76rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .player-answer-body {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
            margin-top: 0.75rem;
            padding-left: 2.7rem;
        }

        .player-answer-body p {
            color: #dbeafe;
            font-size: 0.86rem;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

        .player-answer-body i {
            color: #c084fc;
            margin-right: 0.25rem;
        }

        .player-answer-empty {
            padding: 1rem;
            border-radius: 1rem;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(148, 163, 184, 0.16);
            text-align: center;
        }

        .site-footer-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.7rem 1rem;
            margin: 1.1rem auto 0;
            padding-bottom: 0.5rem;
        }

        .site-footer-links button,
        .legal-footer a,
        .legal-back {
            color: #c8d5ff;
            text-decoration: none;
            font-size: 0.82rem;
            transition: 0.2s ease;
        }

        .site-footer-links button {
            appearance: none;
            border: none;
            background: transparent;
            cursor: pointer;
            font: inherit;
            padding: 0;
        }

        .site-footer-links button:hover,
        .legal-footer a:hover,
        .legal-back:hover {
            color: #ffe8a3;
        }

        .legal-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 12000;
            display: grid;
            place-items: center;
            padding: 1rem;
            background: rgba(3, 4, 18, 0.78);
            backdrop-filter: blur(10px);
        }

        .legal-modal-overlay[hidden] {
            display: none;
        }

        .legal-modal-card {
            position: relative;
            width: min(760px, 94vw);
            max-height: min(82vh, 780px);
            overflow-y: auto;
            padding: clamp(1.3rem, 4vw, 2.1rem);
            border-radius: 1.45rem;
            background:
                radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.22), transparent 32%),
                linear-gradient(145deg, rgba(18, 15, 45, 0.98), rgba(7, 7, 26, 0.98));
            border: 1px solid rgba(212, 175, 55, 0.34);
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 28px rgba(124, 58, 237, 0.22);
            animation: legalModalIn 0.2s ease-out;
        }

        @keyframes legalModalIn {
            from { opacity: 0; transform: translateY(14px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .legal-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 50%;
            display: inline-grid;
            place-items: center;
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: 0.2s ease;
        }

        .legal-modal-close:hover {
            background: rgba(255, 255, 255, 0.16);
        }

        .legal-modal-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.42rem 0.72rem;
            border-radius: 999px;
            color: #ffe8a3;
            background: rgba(255, 217, 102, 0.1);
            border: 1px solid rgba(255, 217, 102, 0.2);
            font-size: 0.74rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0.9rem;
        }

        .legal-modal-card h2 {
            max-width: calc(100% - 56px);
            font-size: clamp(1.8rem, 6vw, 2.7rem);
            line-height: 1.05;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #fff, #c084fc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .legal-modal-content h3 {
            color: #ffe8a3;
            font-size: 1rem;
            margin: 1.15rem 0 0.35rem;
        }

        .legal-modal-content p {
            color: #dbeafe;
            line-height: 1.72;
            margin-bottom: 0.7rem;
        }

        body.legal-modal-open {
            overflow: hidden;
        }

        .legal-body {
            display: block;
            min-height: 100vh;
            padding: 2rem 1rem;
            color: #fff;
            background:
                radial-gradient(circle at 12% 18%, rgba(124, 58, 237, 0.28), transparent 28%),
                radial-gradient(circle at 86% 10%, rgba(255, 217, 102, 0.16), transparent 26%),
                radial-gradient(circle at 75% 80%, rgba(14, 122, 110, 0.18), transparent 30%),
                linear-gradient(145deg, #07071a, #0a0a2a 48%, #020210);
        }

        .legal-body::before {
            pointer-events: none;
        }

        .legal-shell {
            width: min(940px, 100%);
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .legal-back {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            margin-bottom: 1rem;
            padding: 0.65rem 0.9rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(192, 132, 252, 0.24);
        }

        .legal-card {
            padding: clamp(1.3rem, 4vw, 2.4rem);
            border-radius: 1.6rem;
            background: linear-gradient(145deg, rgba(18, 15, 45, 0.92), rgba(7, 7, 26, 0.96));
            border: 1px solid rgba(212, 175, 55, 0.28);
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
        }

        .legal-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #ffe8a3;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 0.78rem;
            margin-bottom: 0.9rem;
        }

        .legal-card h1 {
            font-size: clamp(2rem, 6vw, 3.3rem);
            line-height: 1.05;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #fff, #c084fc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .legal-card h2 {
            color: #ffe8a3;
            font-size: 1.05rem;
            margin: 1.4rem 0 0.45rem;
        }

        .legal-card p {
            color: #dbeafe;
            line-height: 1.75;
            margin-bottom: 0.7rem;
        }

        .legal-footer {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.8rem 1.1rem;
            margin-top: 1rem;
        }

        @media (max-width: 700px) {
            body {
                padding: 0.7rem;
                align-items: flex-start;
            }

            .nebula {
                opacity: 0.22;
                filter: blur(55px);
            }

            .game-container {
                width: 100%;
                padding: 0.85rem;
                border-radius: 1.2rem;
                margin: 0;
            }

            .game-container > div:first-child {
                flex-direction: column;
                align-items: stretch !important;
                gap: 0.7rem;
            }

            .back-home,
            .user-welcome {
                width: 100%;
                justify-content: center;
                text-align: center;
            }

            .quiz-selector {
                padding: 1rem 0.2rem;
            }

            .quiz-selector h3 {
                font-size: 1.25rem;
                line-height: 1.25;
                margin-bottom: 1rem;
            }

            .selector-buttons {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }

            .quiz-type-btn {
                width: 100%;
                min-height: 0;
                padding: 1rem;
                border-radius: 1.2rem;
            }

            .quiz-type-btn i {
                font-size: 2rem;
                margin-bottom: 0.45rem;
            }

            .quiz-type-btn h4 {
                font-size: 1.05rem;
                line-height: 1.2;
            }

            .quiz-type-btn p {
                font-size: 0.78rem;
                line-height: 1.35;
            }

            .top-bar,
            .top-left,
            .score-stats,
            .stats-icons {
                width: 100%;
            }

            .top-bar {
                flex-direction: column;
                align-items: stretch;
                gap: 0.8rem;
            }

            .top-left {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }

            .top-100,
            .question-counter {
                width: 100%;
                text-align: center;
                font-size: 1rem;
            }

            .score-stats {
                justify-content: space-between;
                gap: 0.7rem;
                padding: 0.55rem;
                border-radius: 1rem;
            }

            .score-circle {
                width: 62px;
                height: 62px;
                flex: 0 0 62px;
            }

            .stats-icons {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }

            .stat-item {
                justify-content: center;
                padding: 0.45rem 0.55rem;
                border-radius: 0.9rem;
            }

            .timer-clock {
                width: 100%;
                text-align: center;
                font-size: 1.25rem;
                border-radius: 1rem;
            }

            .question-group {
                padding: 1rem;
                border-radius: 1.2rem;
            }

            .question-text {
                font-size: 1.05rem;
                line-height: 1.45;
                padding: 0.75rem;
                border-radius: 1rem;
                overflow-wrap: anywhere;
            }

            .options-grid {
                grid-template-columns: 1fr;
                gap: 0.7rem;
                margin: 1rem 0;
            }

            .option-btn {
                width: 100%;
                min-height: 56px;
                padding: 0.75rem;
                align-items: flex-start;
                font-size: 0.92rem;
                line-height: 1.35;
                overflow-wrap: anywhere;
            }

            .option-prefix {
                width: 32px;
                height: 32px;
                flex: 0 0 32px;
            }

            .jokers-area {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.65rem;
            }

            .joker-card {
                width: 100%;
                justify-content: space-between;
                border-radius: 1rem;
                padding: 0.55rem 0.75rem;
            }

            .joker-btn {
                flex: 1;
                text-align: left;
                padding: 0.55rem 0.75rem;
            }

            .next-btn {
                margin-top: 0.85rem;
                border-radius: 1rem;
                padding: 0.8rem;
            }

            .result-panel {
                font-size: 0.95rem;
                line-height: 1.4;
            }

            .player-answer-head {
                grid-template-columns: auto minmax(0, 1fr);
            }

            .player-answer-head em {
                grid-column: 2;
                justify-self: flex-start;
            }

            .player-answer-body {
                grid-template-columns: 1fr;
                padding-left: 0;
            }

            .legal-modal-card {
                max-height: 84vh;
                border-radius: 1.15rem;
            }

            .legal-modal-close {
                top: 0.75rem;
                right: 0.75rem;
                width: 38px;
                height: 38px;
            }

            .user-theme-picker {
                left: 0.7rem;
                bottom: 0.7rem;
                gap: 0.35rem;
                padding: 0.35rem;
            }

            .user-theme-picker .theme-btn {
                width: 30px;
                height: 30px;
            }
        }

        @media (max-width: 420px) {
            .login-overlay {
                padding: 0.7rem;
            }

            .login-card {
                padding: 1rem;
                border-radius: 1rem;
            }

            .login-card-icon-wrap {
                width: min(220px, 88vw);
                height: 138px;
            }

            .login-brand-logo {
                width: min(230px, 90vw);
            }

            .login-card h2 {
                font-size: 1.65rem;
            }

            .login-hero h1 {
                font-size: 1.8rem;
                line-height: 1.15;
            }

            .login-gradient-headline {
                transform: none;
                white-space: normal;
            }

            .login-description {
                font-size: 0.86rem;
            }

            .login-stat-chip {
                justify-content: flex-start;
            }

            .login-stat-chip strong {
                font-size: 1.35rem;
            }

            .login-bottom-panels {
                gap: 0.7rem;
            }

            .score-stats {
                flex-direction: column;
            }

            .score-circle {
                align-self: center;
            }
        }

        @keyframes trophyBounce {
            0% { transform: scale(0) rotate(-20deg); }
            50% { transform: scale(1.2) rotate(5deg); }
            100% { transform: scale(1) rotate(0); }
        }
        
        @keyframes fillBar {
            from { width: 0%; }
            to { width: var(--fill-width); }
        }