*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0a0a0a;--bg-card: #1a1a1a;--bg-option: #252525;--text-primary: #ffffff;--text-secondary: #888888;--accent-blue: #3b82f6;--accent-purple: #8b5cf6;--accent-green: #22c55e;--accent-red: #ef4444;--accent-orange: #f97316;--gradient: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%);--gradient-correct: linear-gradient(135deg, #22c55e 0%, #10b981 100%);--gradient-wrong: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);--gradient-subtle: linear-gradient(135deg, rgba(139, 92, 246, .15) 0%, rgba(59, 130, 246, .15) 100%)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;min-height:100dvh}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:20px 16px;max-width:420px;margin:0 auto}.loading-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.loading-icon{font-size:64px;animation:bounce 1s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.header{text-align:center;margin-bottom:24px}.logo{font-size:56px;margin-bottom:8px;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.header h1{font-size:28px;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);margin-top:8px;font-size:13px;font-weight:500}.main{flex:1;display:flex;flex-direction:column}.question-card{background:var(--bg-card);border-radius:24px;padding:24px 20px;border:1px solid rgba(139,92,246,.2)}.question-text{font-size:18px;font-weight:600;line-height:1.5;text-align:center;margin-bottom:24px;color:var(--text-primary)}.options{display:flex;flex-direction:column;gap:12px}.option-btn{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--bg-option);border:2px solid transparent;border-radius:14px;cursor:pointer;transition:all .2s ease;text-align:left;width:100%}.option-btn:hover{border-color:var(--accent-purple);transform:translate(4px);background:#8b5cf61a}.option-btn:active{transform:scale(.98)}.option-letter{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--gradient);border-radius:8px;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}.option-text{font-size:15px;color:var(--text-primary);line-height:1.4}.streak-preview{margin-top:24px;text-align:center;padding:12px;background:var(--gradient-subtle);border-radius:12px;font-size:14px;color:var(--text-secondary)}.streak-preview p{color:var(--accent-purple)}.result-card{background:var(--bg-card);border-radius:24px;padding:24px 20px;border:1px solid rgba(139,92,246,.2)}.result-card.correct-animation{animation:correctPulse .6s ease-out}.result-card.wrong-animation{animation:wrongShake .6s ease-out}@keyframes correctPulse{0%{transform:scale(1)}25%{transform:scale(1.02);box-shadow:0 0 30px #22c55e66}50%{transform:scale(1)}75%{transform:scale(1.01)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}.result-header{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;border-radius:16px;margin-bottom:20px}.result-header.correct{background:var(--gradient-correct)}.result-header.wrong{background:var(--gradient-wrong)}.result-emoji{font-size:32px}.result-text{font-size:24px;font-weight:700;color:#fff}.question-review{margin-bottom:20px}.question-review .question-text{font-size:16px;margin-bottom:16px}.options-review{display:flex;flex-direction:column;gap:10px}.option-review{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-option);border-radius:12px;border:2px solid transparent;position:relative}.option-review.correct-answer{border-color:var(--accent-green);background:#22c55e1a}.option-review.wrong-answer{border-color:var(--accent-red);background:#ef44441a}.option-review .option-letter{width:28px;height:28px;font-size:12px}.option-review .option-text{font-size:14px;flex:1}.checkmark{color:var(--accent-green);font-size:18px;font-weight:700}.crossmark{color:var(--accent-red);font-size:18px;font-weight:700}.fun-fact{display:flex;gap:12px;padding:16px;background:var(--gradient-subtle);border-radius:14px;margin-bottom:20px}.fact-icon{font-size:24px;flex-shrink:0}.fun-fact p{font-size:14px;line-height:1.5;color:var(--text-secondary)}.streak-display{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.streak-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;background:var(--bg-option);border-radius:14px}.streak-icon{font-size:24px}.streak-number{font-size:24px;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.streak-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;text-align:center}.share-btn{width:100%;padding:16px 24px;font-size:16px;font-weight:600;border:none;border-radius:14px;cursor:pointer;background:var(--gradient);color:#fff;transition:all .2s ease;margin-bottom:16px}.share-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #8b5cf666}.share-btn:active{transform:scale(.98)}.comeback-text{text-align:center;font-size:13px;color:var(--text-secondary)}.footer{text-align:center;padding-top:24px;color:var(--text-secondary);font-size:12px}.user-info{margin-top:8px;color:var(--accent-purple)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.option-btn{animation:fadeInUp .4s ease-out backwards}.option-btn:nth-child(1){animation-delay:.1s}.option-btn:nth-child(2){animation-delay:.2s}.option-btn:nth-child(3){animation-delay:.3s}.option-btn:nth-child(4){animation-delay:.4s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.error-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}.error-icon{font-size:64px}.error-screen button{padding:12px 24px;background:var(--gradient);border:none;border-radius:10px;color:#fff;font-weight:600;cursor:pointer}.login-prompt{margin-top:16px;text-align:center;padding:12px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;font-size:13px;color:var(--accent-orange)}.option-btn.disabled{opacity:.5;pointer-events:none}.leaderboard-link{display:block;margin-top:16px;padding:12px;background:transparent;border:1px solid var(--accent-purple);border-radius:10px;color:var(--accent-purple);font-size:14px;text-align:center;cursor:pointer;transition:all .2s;width:100%}.leaderboard-link:hover{background:#8b5cf61a}.leaderboard-card{background:var(--bg-card);border-radius:24px;padding:24px 20px;border:1px solid rgba(139,92,246,.2)}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.leaderboard-header h2{font-size:22px;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{background:var(--bg-option);border:none;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;color:var(--text-secondary);transition:all .2s}.close-btn:hover{background:var(--accent-purple);color:#fff}.leaderboard-list{display:flex;flex-direction:column;gap:10px;max-height:400px;overflow-y:auto}.leaderboard-entry{display:grid;grid-template-columns:40px 1fr auto auto;gap:12px;align-items:center;padding:14px 16px;background:var(--bg-option);border-radius:12px;transition:all .2s}.leaderboard-entry.current-user{border:2px solid var(--accent-purple);background:#8b5cf61a}.rank{font-size:18px;font-weight:700;text-align:center}.user-name{font-size:14px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-streak,.user-total{font-size:13px;color:var(--text-secondary);white-space:nowrap}.no-entries{text-align:center;padding:40px;color:var(--text-secondary)}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.leaderboard-btn{padding:14px 20px;font-size:14px;font-weight:600;border:2px solid var(--accent-purple);border-radius:14px;cursor:pointer;background:transparent;color:var(--accent-purple);transition:all .2s ease}.leaderboard-btn:hover{background:#8b5cf61a}.action-buttons .share-btn{margin-bottom:0}