:root{--bg-deep: #0a1f1a;--bg-card: #0d2b23;--bg-card-hover: #123a30;--bg-surface: #163d32;--green-primary: #1a6b4f;--green-light: #2d9b72;--green-accent: #4fd1a5;--gold: #d4a843;--gold-light: #e8c96a;--gold-dim: #8a6d2b;--text-primary: #f0ede6;--text-secondary: #a8b5a8;--text-muted: #6b7e6b;--correct: #4caf50;--correct-bg: rgba(76, 175, 80, .15);--wrong: #e74c3c;--wrong-bg: rgba(231, 76, 60, .15);--danger: #f44336;--radius: 12px;--radius-sm: 8px;--radius-lg: 20px;--shadow: 0 4px 24px rgba(0,0,0,.3);--font-display: "Cormorant Garamond", serif;--font-body: "DM Sans", sans-serif;--font-arabic: "Amiri", serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow-x:hidden}.app{min-height:100%;display:flex;flex-direction:column;position:relative}.geometric-bg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;color:var(--gold)}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1;animation:screenIn .35s ease-out}@keyframes screenIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 #d4a84366}50%{box-shadow:0 0 20px 4px #d4a84333}}@keyframes countdownPop{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes searchPulse{0%{transform:scale(.8);opacity:1}to{transform:scale(2.5);opacity:0}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes correctFlash{0%{background:var(--correct-bg)}50%{background:#4caf504d}to{background:var(--correct-bg)}}@keyframes wrongFlash{0%{background:var(--wrong-bg)}50%{background:#e74c3c4d}to{background:var(--wrong-bg)}}@keyframes scorePop{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-40px) scale(1.3);opacity:0}}@keyframes shakeX{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}@keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}.fade-in{animation:fadeIn .4s ease-out}#confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:100}.home-content{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:24px;animation:fadeIn .6s ease-out}.home-header-area{position:relative;width:100%;text-align:center}.home-name-section{width:100%}.home-footer{text-align:center;padding:0 16px 16px;margin-top:8px}.home-footer-text{font-size:11px;color:#94a3b8;margin-bottom:4px}.home-footer-link{background:none;border:none;color:#94a3b8;font-size:11px;cursor:pointer;text-decoration:underline;padding:0}.flex-1{flex:1}.full-width{width:100%}.faded{opacity:.7}.bismillah{font-family:var(--font-arabic);font-size:1.4rem;color:var(--gold);text-align:center;opacity:.9}.title{font-family:var(--font-display);font-size:3rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-top:8px;text-align:center}.title-accent{color:var(--gold);font-style:italic}.star-divider{color:var(--gold-dim);letter-spacing:8px;font-size:.8rem;margin-top:8px;text-align:center}.verse-card{background:var(--bg-card);border:1px solid rgba(212,168,67,.15);border-radius:var(--radius);padding:20px 24px;text-align:center;width:100%}.verse-arabic{font-family:var(--font-arabic);font-size:1.5rem;color:var(--gold-light);line-height:2;margin-bottom:8px}.verse-english{font-family:var(--font-display);font-size:1rem;color:var(--text-secondary);font-style:italic;line-height:1.5}.verse-ref{font-size:.8rem;color:var(--text-muted);margin-top:6px}.name-input,.code-input{width:100%;padding:14px 18px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:1rem;outline:none;transition:border-color .2s}.name-input:focus,.code-input:focus{border-color:var(--gold-dim)}.name-input::placeholder,.code-input::placeholder{color:var(--text-muted)}.code-input{text-align:center;font-size:1.3rem;letter-spacing:6px;text-transform:uppercase;font-weight:600}.action-buttons{width:100%;display:flex;flex-direction:column;gap:10px}.mode-row{display:flex;gap:10px}.mode-row .btn{flex:1;flex-wrap:wrap;min-width:0}.mode-row .btn-subtitle{width:100%;text-align:center;margin-left:0}.btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;border:none;border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:active:not(:disabled){transform:scale(.97)}.btn-icon{font-size:1.2rem}.btn-subtitle{font-size:.75rem;font-weight:400;opacity:.7;margin-left:auto}.btn-primary{background:linear-gradient(135deg,var(--green-primary),var(--green-light));color:#fff;box-shadow:0 2px 12px #1a6b4f4d}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 20px #1a6b4f66}.btn-secondary{background:var(--bg-card);color:var(--gold);border:1px solid var(--gold-dim)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--gold)}.btn-outline{background:transparent;color:var(--text-secondary);border:1px solid var(--bg-surface)}.btn-outline:hover:not(:disabled){background:var(--bg-card);color:var(--text-primary)}.btn-ghost{background:none;border:none;color:var(--text-muted);font-size:.9rem;padding:10px;cursor:pointer;font-family:var(--font-body)}.btn-ghost:hover{color:var(--text-secondary)}.btn-sm{padding:10px 20px;font-size:.9rem}.btn-group{background:var(--bg-card);color:var(--green-accent);border:1px solid var(--green-primary)}.btn-group:hover:not(:disabled){background:var(--green-primary);color:#fff}.join-section{width:100%;display:flex;gap:10px;align-items:center;animation:fadeIn .3s ease-out}.join-section .code-input{flex:1}.matchmaking-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}.search-animation{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.search-ring{position:absolute;border:2px solid var(--gold);border-radius:50%;width:60px;height:60px;animation:searchPulse 2s ease-out infinite}.ring-2{animation-delay:.5s}.ring-3{animation-delay:1s}.search-icon{font-size:2.5rem;z-index:1}.room-code-display{display:flex;flex-direction:column;align-items:center;gap:12px}.room-code-label{color:var(--text-secondary);font-size:.95rem}.room-code-value{font-family:var(--font-display);font-size:3.5rem;font-weight:700;color:var(--gold);letter-spacing:12px;text-shadow:0 0 30px rgba(212,168,67,.3);animation:pulseGlow 2s ease infinite}.waiting-text{font-size:1.1rem;color:var(--text-secondary)}.bot-offer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--bg-surface)}.bot-offer p{color:var(--text-muted);font-size:.9rem}.lobby-players{width:100%;max-width:400px;display:flex;flex-direction:column;gap:8px;margin:12px 0}.lobby-player{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--bg-surface);animation:fadeIn .3s ease-out}.lobby-player .player-avatar{width:32px;height:32px;border-radius:50%;background:var(--green-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff}.lobby-player .player-name{flex:1;font-weight:500}.lobby-player .host-badge{font-size:.7rem;padding:2px 8px;background:var(--gold-dim);color:var(--gold-light);border-radius:10px;font-weight:600;animation:badgePop .4s ease-out}.player-count{font-size:.9rem;color:var(--text-muted)}.host-start-controls{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}.question-count-selector{display:flex;flex-direction:column;align-items:center;gap:8px}.question-count-label{font-size:.85rem;color:var(--text-muted);font-weight:500}.question-count-options{display:flex;gap:8px}.count-btn{padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--bg-surface);background:var(--bg-card);color:var(--text-secondary);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s}.count-btn.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold-light)}@media (hover: hover){.count-btn:hover:not(.active){border-color:var(--green-primary);color:var(--text-primary)}}.countdown-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}.vs-text{font-size:1.2rem;color:var(--text-secondary)}.vs-text strong{color:var(--gold)}.countdown-number{font-family:var(--font-display);font-size:8rem;font-weight:700;color:var(--gold);text-shadow:0 0 40px rgba(212,168,67,.3);animation:countdownPop .8s ease-out;line-height:1}.get-ready{font-size:1.1rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:4px}.game-screen{justify-content:flex-start;padding-top:0;gap:0}.game-header{width:100%;background:var(--bg-card);border-bottom:1px solid var(--bg-surface);padding:12px 16px;position:sticky;top:0;z-index:10}.score-display{display:flex;align-items:center;justify-content:space-between;max-width:500px;margin:0 auto}.score-player,.score-opponent{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}.score-value{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--gold);transition:all .3s}.score-value.bumped{animation:pulse .4s ease}.score-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.score-delta{position:absolute;top:-8px;right:-20px;font-size:.75rem;font-weight:700;color:var(--correct);animation:scorePop 1.2s ease-out forwards;pointer-events:none}.round-badge{background:var(--bg-surface);padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:600;color:var(--text-secondary)}.timer-container{width:100%;padding:8px 16px;display:flex;align-items:center;gap:12px;max-width:532px;margin:0 auto}.timer-bar-bg{flex:1;height:6px;background:var(--bg-surface);border-radius:3px;overflow:hidden}.timer-bar-fill{height:100%;background:linear-gradient(90deg,var(--green-accent),var(--green-light));border-radius:3px;transition:width .05s linear}.timer-container.urgent .timer-bar-fill{background:linear-gradient(90deg,var(--danger),#ff6b6b)}.timer-number{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--text-secondary);min-width:36px;text-align:right}.timer-number.pulse{color:var(--danger);animation:pulse .5s ease infinite}.powerups-bar{display:flex;gap:8px;padding:4px 16px;max-width:500px;margin:0 auto;width:100%}.powerup-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-body);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.powerup-btn:hover:not(:disabled):not(.used){background:var(--bg-card-hover);border-color:var(--gold-dim);color:var(--gold);transform:translateY(-1px)}.powerup-btn.used{opacity:.3;cursor:default;text-decoration:line-through}.powerup-btn.active{border-color:var(--gold);background:#d4a8431a;color:var(--gold);animation:glow 1s ease infinite}.powerup-icon{font-size:1.1rem}.question-area{width:100%;max-width:500px;padding:16px;flex:1;display:flex;flex-direction:column;gap:16px;animation:fadeIn .3s ease-out;margin:0 auto}.question-meta{display:flex;gap:8px}.category-tag{background:var(--bg-surface);color:var(--text-secondary);padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:500}.diff-tag{color:#fff;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:capitalize}.question-text{font-family:var(--font-display);font-size:1.35rem;font-weight:600;line-height:1.4}.options-grid{display:flex;flex-direction:column;gap:10px}.option-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:.95rem;cursor:pointer;transition:all .15s;text-align:left;width:100%}@media (hover: hover){.option-btn:hover:not(.disabled){background:var(--bg-card-hover);border-color:var(--green-primary);transform:translate(4px)}}.option-btn:active:not(.disabled){transform:scale(.98)}.option-btn.selected{background:var(--bg-card-hover);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.option-btn.disabled{cursor:default;opacity:.7}.option-btn.removed{opacity:.2;pointer-events:none;text-decoration:line-through}.option-label{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bg-surface);font-weight:700;font-size:.8rem;color:var(--text-secondary);flex-shrink:0}.option-btn.selected .option-label{background:var(--gold);color:var(--bg-deep)}.option-text{flex:1}.opponent-status{text-align:center;padding:12px;font-size:.9rem;color:var(--gold);background:#d4a84314;border-radius:var(--radius-sm);animation:slideDown .3s ease-out}.reveal-screen{padding-top:40px;justify-content:flex-start}.reveal-content{width:100%;max-width:500px;display:flex;flex-direction:column;gap:16px;animation:fadeIn .4s ease-out}.reveal-question{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text-secondary);line-height:1.4}.reveal-options{display:flex;flex-direction:column;gap:8px}.reveal-option{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--bg-surface);font-size:.9rem}.reveal-option.correct{background:var(--correct-bg);border-color:var(--correct);animation:correctFlash .6s ease}.reveal-option.wrong{background:var(--wrong-bg);border-color:var(--wrong);animation:wrongFlash .6s ease}.reveal-option .option-label{width:24px;height:24px;font-size:.75rem}.reveal-option.correct .option-label{background:var(--correct);color:#fff}.reveal-option.wrong .option-label{background:var(--wrong);color:#fff}.pick-indicators{margin-left:auto;display:flex;gap:6px}.pick{font-size:.7rem;padding:2px 8px;border-radius:10px;font-weight:600}.pick.you{background:#4fd1a533;color:var(--green-accent)}.pick.opp{background:#d4a84333;color:var(--gold)}.pick.check{color:var(--correct);font-size:1rem;padding:0}.explanation-box{padding:14px;background:var(--bg-card);border-left:3px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.88rem;color:var(--text-secondary);line-height:1.5}.reveal-scores{display:flex;gap:12px}.reveal-score{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--bg-surface)}.reveal-score.got-it{border-color:var(--correct)}.reveal-score.missed{border-color:var(--wrong)}.rs-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.rs-value{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--gold)}.rs-delta{font-size:.8rem;font-weight:600}.reveal-score.got-it .rs-delta{color:var(--correct)}.reveal-score.missed .rs-delta{color:var(--wrong)}.leaderboard{width:100%;max-width:500px}.leaderboard h3{font-family:var(--font-display);font-size:1.3rem;color:var(--gold);text-align:center;margin-bottom:12px}.lb-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--bg-surface);margin-bottom:6px;animation:fadeIn .3s ease-out}.lb-row.first{border-color:var(--gold);background:#d4a84314}.lb-row.top-three{border-color:#d4a8434d}.lb-row.me{border-color:var(--green-accent)}.lb-rank{width:28px;height:28px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--text-secondary);flex-shrink:0}.lb-row.first .lb-rank{background:var(--gold);color:var(--bg-deep)}.lb-avatar{font-size:1.2rem;flex-shrink:0}.lb-name{flex:1;font-weight:500;font-size:.9rem}.lb-score{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:1.1rem}.lb-delta-badge{font-size:.7rem;padding:2px 6px;border-radius:8px;font-weight:600}.lb-delta-badge.correct{background:var(--correct-bg);color:var(--correct)}.lb-delta-badge.wrong{background:var(--wrong-bg);color:var(--wrong)}.gameover-screen{justify-content:flex-start;padding-top:40px;overflow-y:auto}.gameover-content{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:24px;animation:fadeInUp .6s ease-out;padding-bottom:40px}.result-banner{text-align:center;padding:24px}.result-emoji{font-size:4rem;display:block;margin-bottom:8px}.result-text{font-family:var(--font-display);font-size:3rem;font-weight:700}.result-banner.victory .result-text{color:var(--gold)}.result-banner.defeat .result-text{color:var(--text-secondary)}.result-banner.draw .result-text{color:var(--green-accent)}.final-scores{display:flex;align-items:center;gap:24px;width:100%}.final-score{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--bg-surface)}.fs-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.fs-value{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--gold)}.vs-divider{font-family:var(--font-display);font-size:1.2rem;color:var(--text-muted);font-style:italic}.breakdown-table{width:100%;background:var(--bg-card);border-radius:var(--radius);padding:16px;border:1px solid var(--bg-surface)}.breakdown-table h3{font-family:var(--font-display);font-size:1.1rem;color:var(--text-secondary);margin-bottom:12px;text-align:center}.breakdown-header,.breakdown-row{display:grid;grid-template-columns:30px 1fr 60px 60px;gap:8px;padding:8px 4px;font-size:.8rem;align-items:center}.breakdown-header{color:var(--text-muted);border-bottom:1px solid var(--bg-surface);text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:.7rem}.breakdown-row{border-bottom:1px solid rgba(255,255,255,.03)}.bk-round{text-align:center;color:var(--text-muted)}.bk-q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}.bk-you,.bk-opp{text-align:center;font-weight:600;font-size:.78rem}.bk-you.correct,.bk-opp.correct{color:var(--correct)}.bk-you.wrong,.bk-opp.wrong{color:var(--wrong)}.share-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.share-canvas-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.share-canvas-wrap canvas{display:block;width:100%;height:auto;max-width:400px}.share-buttons{display:flex;gap:10px}.account-prompt{width:100%;padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid rgba(212,168,67,.2);text-align:center}.account-prompt-text{font-size:.85rem;color:var(--text-secondary);margin-bottom:12px}.account-prompt-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.profile-screen .profile-content{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 16px;max-width:480px;margin:0 auto;position:relative;z-index:1}.profile-title{font-family:var(--font-display);font-size:1.8rem;color:var(--text-primary);text-align:center}.profile-avatar-preview{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid rgba(212,168,67,.15);width:100%}.profile-avatar-large{font-size:4rem;line-height:1}.profile-name-display{font-family:var(--font-display);font-size:1.2rem;color:var(--text-primary);margin-top:4px}.profile-title-display{font-size:.85rem;color:var(--gold);font-weight:600}.profile-xp{font-size:.8rem;color:var(--text-muted)}.profile-signed-in{font-size:.75rem;color:var(--green-primary);font-weight:600;margin-top:4px}.profile-section{width:100%}.profile-label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px;font-weight:600}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.avatar-option{width:100%;aspect-ratio:1;font-size:1.8rem;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.avatar-option:hover{border-color:#d4a84366;transform:scale(1.05)}.avatar-option.selected{border-color:var(--gold);background:#d4a8431a;box-shadow:0 0 0 2px #d4a8434d}.profile-account-section{width:100%;padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid rgba(212,168,67,.2);text-align:center}.profile-account-text{font-size:.85rem;color:var(--text-secondary);margin-bottom:12px}.profile-stats-summary{display:flex;gap:16px;justify-content:center;width:100%}.profile-stat{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;padding:12px 8px;background:var(--bg-card);border-radius:var(--radius-sm)}.profile-stat-value{font-family:var(--font-display);font-size:1.4rem;color:var(--gold);font-weight:700}.profile-stat-label{font-size:.7rem;color:var(--text-muted);text-align:center}.profile-toggle{position:absolute;top:0;left:0;z-index:20;pointer-events:auto;background:var(--bg-card);border:2px solid rgba(212,168,67,.3);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0}.profile-toggle:hover{border-color:var(--gold);transform:scale(1.08)}.profile-toggle-avatar{font-size:1.2rem;line-height:1}[dir=rtl] .profile-toggle{left:auto;right:0}.option-btn:focus-visible,.btn:focus-visible,.powerup-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.name-input:focus-visible,.code-input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.error-toast{position:fixed;top:16px;left:50%;transform:translate(-50%);background:var(--wrong);color:#fff;padding:12px 24px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;z-index:100;animation:slideDown .3s ease-out;box-shadow:var(--shadow)}@media (max-width:480px){.title{font-size:2.4rem}.verse-arabic{font-size:1.2rem}.countdown-number{font-size:5rem}.question-text{font-size:1.15rem}.option-btn{padding:12px 14px;font-size:.88rem}.result-text{font-size:2.2rem}.fs-value{font-size:2rem}.room-code-value{font-size:2.5rem;letter-spacing:8px}.powerup-btn{padding:6px 4px;font-size:.65rem}}@media (hover:none) and (pointer:coarse){.option-btn{padding:16px;min-height:52px}.btn{min-height:52px}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--bg-surface);border-radius:2px}.home-section{width:100%;display:flex;flex-direction:column;gap:10px}.section-label{font-family:var(--font-display);font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:3px;padding:0 4px;margin-top:4px}.btn-daily{width:100%;display:flex;align-items:center;gap:10px;padding:18px 24px;border:2px solid var(--gold-dim);border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;background:linear-gradient(135deg,#d4a8431f,#d4a8430a);color:var(--gold);position:relative;overflow:hidden}.btn-daily:hover{border-color:var(--gold);box-shadow:0 0 20px #d4a84326;transform:translateY(-1px)}.btn-daily:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(212,168,67,.05),transparent);pointer-events:none}.btn-daily.done{opacity:.7;border-color:var(--bg-surface)}.btn-daily .btn-subtitle{margin-left:auto;font-size:.75rem;font-weight:400;opacity:.7}.btn-learn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;background:var(--bg-card);color:var(--green-accent);border:1px solid var(--green-primary);border-radius:var(--radius);font-family:var(--font-body);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-learn:hover{background:var(--green-primary);color:#fff;transform:translateY(-1px)}.screen-title{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--text-primary);text-align:center}.screen-subtitle{font-size:.95rem;color:var(--text-secondary);text-align:center}.category-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.category-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius);cursor:pointer;transition:all .2s;font-family:var(--font-body);color:var(--text-primary)}.category-card:hover{background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:var(--shadow)}.cat-icon{font-size:2rem}.cat-name{font-size:.85rem;font-weight:600;text-align:center;line-height:1.3}.cat-count{font-size:.72rem;color:var(--text-muted)}.study-header{width:100%;display:flex;align-items:center;justify-content:space-between}.study-progress-text{font-size:.85rem;color:var(--text-muted)}.study-progress-bar{width:100%;height:4px;background:var(--bg-surface);border-radius:2px;overflow:hidden}.study-progress-fill{height:100%;background:linear-gradient(90deg,var(--green-accent),var(--gold));border-radius:2px;transition:width .3s ease}.flashcard{width:100%;max-width:400px;min-height:280px;perspective:1000px;cursor:pointer;margin:8px auto}.flashcard-inner{position:relative;width:100%;min-height:280px;transition:transform .6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;min-height:280px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-lg);padding:28px 24px;display:flex;flex-direction:column;gap:16px}.flashcard-front{background:linear-gradient(145deg,var(--bg-card),var(--bg-surface));border:1px solid var(--bg-surface);align-items:center;justify-content:center;text-align:center}.flashcard-back{background:linear-gradient(145deg,var(--bg-card),#1a3d32);border:1px solid var(--green-primary);transform:rotateY(180deg);justify-content:center}.fc-meta{display:flex;gap:8px;justify-content:center}.fc-question{font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.5}.fc-hint{font-size:.8rem;color:var(--text-muted);margin-top:auto}.fc-answer-label{font-size:.75rem;color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-weight:600}.fc-answer{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--green-accent);line-height:1.4}.fc-explanation{font-size:.88rem;color:var(--text-secondary);line-height:1.5;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.fc-actions{width:100%;display:flex;gap:12px;max-width:400px;margin:0 auto}.btn-wrong{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:#e74c3c1f;color:var(--wrong);border:1px solid var(--wrong);border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-wrong:hover{background:#e74c3c33}.btn-correct{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:#4caf501f;color:var(--correct);border:1px solid var(--correct);border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-correct:hover{background:#4caf5033}.study-summary{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;animation:fadeInUp .6s ease-out}.summary-emoji{font-size:4rem}.summary-stats{display:flex;gap:24px}.summary-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-number{font-family:var(--font-display);font-size:2.5rem;font-weight:700}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.summary-bar-wrap{width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:6px}.summary-bar{width:100%;height:8px;background:var(--bg-surface);border-radius:4px;overflow:hidden}.summary-bar-fill{height:100%;background:linear-gradient(90deg,var(--green-accent),var(--correct));border-radius:4px;transition:width .5s ease}.summary-pct{font-size:.85rem;color:var(--text-secondary)}.lesson-progress-dots{display:flex;gap:8px;justify-content:center}.lesson-dot{width:10px;height:10px;border-radius:50%;background:var(--bg-surface);cursor:pointer;transition:all .2s}.lesson-dot.active{background:var(--gold);transform:scale(1.3)}.lesson-dot.done{background:var(--green-accent)}.lesson-card-display{width:100%;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-lg);padding:32px 24px;min-height:180px;display:flex;flex-direction:column;gap:12px;animation:fadeIn .4s ease-out}.lesson-number{font-size:.75rem;color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-weight:600}.lesson-fact{font-family:var(--font-display);font-size:1.2rem;font-weight:500;line-height:1.7;color:var(--text-primary)}.lesson-nav{width:100%;display:flex;gap:10px;justify-content:space-between}.quiz-question{font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1.4;text-align:center}.option-btn.reveal-correct{background:var(--correct-bg)!important;border-color:var(--correct)!important}.option-btn.reveal-correct .option-label{background:var(--correct);color:#fff}.option-btn.reveal-wrong{background:var(--wrong-bg)!important;border-color:var(--wrong)!important}.option-btn.reveal-wrong .option-label{background:var(--wrong);color:#fff}.progress-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.pstat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius)}.pstat-value{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--gold)}.pstat-label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.progress-section{width:100%}.progress-section-title{font-family:var(--font-display);font-size:1.1rem;color:var(--text-secondary);margin-bottom:10px}.mastery-row{margin-bottom:10px}.mastery-label{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;margin-bottom:4px;color:var(--text-secondary)}.mastery-bar{width:100%;height:8px;background:var(--bg-surface);border-radius:4px;overflow:hidden}.mastery-fill{height:100%;border-radius:4px;transition:width .5s ease}.weakest-callout{width:100%;padding:12px 16px;background:#e74c3c14;border:1px solid rgba(231,76,60,.2);border-radius:var(--radius-sm);font-size:.88rem;color:var(--text-secondary);text-align:center}.weakest-callout strong{color:var(--wrong)}.milestones-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.milestone{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);opacity:.35;transition:all .3s}.milestone.unlocked{opacity:1;border-color:var(--gold-dim);animation:badgePop .4s ease-out}.milestone-icon{font-size:1.5rem}.milestone-label{font-size:.65rem;color:var(--text-muted);text-align:center;font-weight:500}.milestone.unlocked .milestone-label{color:var(--text-secondary)}.activity-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-card);border-radius:var(--radius-sm);margin-bottom:6px;font-size:.82rem}.activity-type{font-size:1.1rem}.activity-desc{flex:1;color:var(--text-secondary);font-weight:500}.activity-score{color:var(--gold);font-weight:600;font-family:var(--font-display)}.activity-date{color:var(--text-muted);font-size:.72rem}.daily-label{font-size:1.6rem!important}.daily-countdown{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--bg-surface);width:100%}.countdown-time{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--gold)}@media (max-width:480px){.screen-title{font-size:1.6rem}.flashcard{min-height:240px}.flashcard-front,.flashcard-back{min-height:240px;padding:20px 18px}.fc-question{font-size:1.1rem}.fc-answer{font-size:1.2rem}.stat-number{font-size:2rem}.pstat-value{font-size:1.5rem}.category-grid{gap:8px}.category-card{padding:14px 10px}.milestones-grid{grid-template-columns:repeat(3,1fr);gap:6px}.milestone{padding:10px 6px}.lesson-fact{font-size:1.05rem}}@keyframes toastSlide{0%{transform:translate(-50%,-120%);opacity:0}to{transform:translate(-50%);opacity:1}}.achievement-toast{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:200;display:flex;align-items:center;gap:12px;padding:14px 24px;background:linear-gradient(135deg,#d4a84326,#d4a8430d);border:2px solid var(--gold);border-radius:var(--radius);box-shadow:0 0 30px #d4a8434d,var(--shadow);animation:toastSlide .4s ease-out;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.at-icon{font-size:2rem;animation:badgePop .6s ease-out}.at-text{display:flex;flex-direction:column;gap:2px}.at-label{font-size:.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-weight:600}.at-name{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-primary)}.player-title-display{display:flex;align-items:center;gap:8px;padding:8px 0 0}.player-title-name{font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--gold)}.player-xp{font-size:.72rem;color:var(--text-muted)}.xp-bar-mini{flex:1;height:4px;background:var(--bg-surface);border-radius:2px;overflow:hidden}.xp-bar-fill-mini{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:2px;transition:width .5s ease}.title-card{width:100%;padding:20px;background:linear-gradient(135deg,#d4a8431a,#d4a84308);border:1px solid var(--gold-dim);border-radius:var(--radius);text-align:center}.title-card-name{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--gold)}.title-card-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-top:2px}.xp-bar{width:100%;height:8px;background:var(--bg-surface);border-radius:4px;overflow:hidden;margin-top:12px}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:4px;transition:width .5s ease}.xp-bar-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-muted);margin-top:4px}.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.badge-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);text-align:center;opacity:.35;transition:all .3s;cursor:default}.badge-card.unlocked{opacity:1;border-color:var(--gold-dim)}.badge-card.unlocked .badge-icon{animation:badgePop .4s ease-out}.badge-icon{font-size:1.8rem}.badge-name{font-size:.7rem;font-weight:600;color:var(--text-secondary);line-height:1.2}.badge-hint{font-size:.6rem;color:var(--text-muted);line-height:1.2;margin-top:2px}.badge-card.unlocked .badge-name{color:var(--gold)}.ai-tutor-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0009;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease-out}.ai-tutor-panel{width:100%;max-width:500px;max-height:70vh;background:var(--bg-deep);border-top:2px solid var(--gold);border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;flex-direction:column;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.ai-tutor-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bg-surface)}.ai-tutor-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--gold)}.ai-tutor-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:120px}.ai-msg{display:flex;gap:8px;animation:fadeIn .3s ease-out}.ai-msg.user{justify-content:flex-end}.ai-msg-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}.ai-msg-bubble{max-width:85%;padding:10px 14px;border-radius:var(--radius-sm);font-size:.88rem;line-height:1.5;white-space:pre-wrap}.ai-msg.ai .ai-msg-bubble{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--bg-surface)}.ai-msg.user .ai-msg-bubble{background:var(--green-primary);color:#fff}.ai-loading{display:flex;gap:4px;align-items:center;padding:12px 18px!important}.ai-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:aiDotPulse 1.2s ease-in-out infinite}.ai-dot:nth-child(2){animation-delay:.2s}.ai-dot:nth-child(3){animation-delay:.4s}@keyframes aiDotPulse{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}.ai-tutor-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--bg-surface)}.ai-tutor-input .name-input{flex:1}.btn-ai-tutor{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;background:linear-gradient(135deg,#4fd1a51a,#d4a8431a);border:1px solid var(--green-primary);border-radius:var(--radius);color:var(--green-accent);font-family:var(--font-body);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-ai-tutor:hover{background:var(--green-primary);color:#fff;transform:translateY(-1px)}.btn-report-question{background:none;border:none;color:var(--text-secondary);font-size:.78rem;cursor:pointer;opacity:.6;padding:2px 0;text-align:left;transition:opacity .2s}.btn-report-question:hover{opacity:1;color:#e57373}.report-question-panel{background:var(--bg-card);border:1px solid rgba(229,115,115,.4);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:10px}.report-title{font-size:.88rem;font-weight:600;color:var(--text-primary);margin:0}.report-textarea{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:.85rem;padding:8px 10px;resize:none;width:100%;box-sizing:border-box}.report-textarea:focus{outline:none;border-color:#e5737399}.report-actions{display:flex;gap:10px;align-items:center}.report-submit{padding:8px 18px;font-size:.85rem}.btn-report-cancel{background:none;border:none;color:var(--text-secondary);font-size:.85rem;cursor:pointer}.btn-report-cancel:hover{color:var(--text-primary)}.report-sent{font-size:.85rem;color:#4caf50;text-align:center;padding:6px 0}.btn-ai-quiz{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;background:linear-gradient(135deg,#4fd1a514,#d4a84314);border:1px solid var(--green-primary);border-radius:var(--radius);color:var(--green-accent);font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-ai-quiz:hover{background:var(--green-primary);color:#fff}.ai-quiz-suggestions{width:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ai-suggestion-chip{padding:6px 14px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:20px;color:var(--text-secondary);font-family:var(--font-body);font-size:.8rem;cursor:pointer;transition:all .2s}.ai-suggestion-chip:hover{border-color:var(--gold-dim);color:var(--gold);background:var(--bg-card-hover)}.ai-generating{display:flex;align-items:center;gap:2px}.btn-daily-sm{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;border:2px solid var(--gold-dim);border-radius:var(--radius);font-family:var(--font-body);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;background:linear-gradient(135deg,#d4a8431f,#d4a8430a);color:var(--gold)}.btn-daily-sm:hover{border-color:var(--gold);box-shadow:0 0 20px #d4a84326}.btn-daily-sm.done{opacity:.6;border-color:var(--bg-surface)}.qr-code-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius)}.qr-label{font-size:.85rem;color:var(--text-muted)}.dashboard-screen{overflow-y:auto}.dashboard-title{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:#5b9bd5;text-align:center}.dashboard-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.dstat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 16px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius)}.dstat-value{font-family:var(--font-display);font-size:2rem;font-weight:700;color:#5b9bd5}.dstat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.missed-question-row{padding:12px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);margin-bottom:8px}.mq-question{font-size:.88rem;color:var(--text-primary);line-height:1.4;margin-bottom:6px}.mq-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.mq-accuracy{font-size:.78rem;font-weight:600}.mq-asked{font-size:.72rem;color:var(--text-muted)}@media (max-width:480px){.ai-tutor-panel{max-height:80vh}.badges-grid{grid-template-columns:repeat(3,1fr);gap:6px}.badge-card{padding:10px 6px}.badge-icon{font-size:1.5rem}.badge-name{font-size:.62rem}.title-card-name{font-size:1.5rem}.dashboard-title{font-size:1.3rem}.dstat-value{font-size:1.5rem}.qr-code-wrap svg{width:160px!important;height:160px!important}}.btn-lock-in{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:linear-gradient(135deg,var(--gold-dim),var(--gold));color:var(--bg-deep);border:none;border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;margin-top:12px;animation:fadeIn .2s ease-out}.btn-lock-in:hover{transform:translateY(-1px);box-shadow:0 4px 20px #d4a84366}.host-next-btn{margin-top:16px}.waiting-for-host-msg{text-align:center;padding:14px;font-size:.9rem;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);margin-top:16px;animation:pulse 2s ease infinite}.solo-question-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:8px 16px;width:100%;max-width:532px;margin:0 auto}.solo-dot{width:14px;height:14px;border-radius:50%;background:var(--bg-surface);cursor:pointer;transition:all .2s;flex-shrink:0}.solo-dot.active{background:var(--gold);transform:scale(1.3);box-shadow:0 0 8px #d4a84380}.solo-dot.correct{background:var(--correct)}.solo-dot.wrong{background:var(--wrong)}.solo-nav-row{display:flex;gap:10px;justify-content:space-between;margin-top:16px}.custom-content-section{width:100%;display:flex;flex-direction:column;gap:8px}.custom-quiz-row{display:flex;align-items:center;gap:8px;padding:12px;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);animation:fadeIn .3s ease-out}.cq-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.cq-title{font-weight:600;font-size:.9rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cq-meta{font-size:.72rem;color:var(--text-muted)}.create-q-block{width:100%;background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:8px}.cq-block-header{display:flex;align-items:center;justify-content:space-between}.cq-qnum{font-size:.8rem;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:1px}.cq-option-row{display:flex;align-items:center;gap:8px}.cq-option-label{width:24px;height:24px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--text-secondary);flex-shrink:0}.cq-option-label.correct-label{background:var(--correct);color:#fff}.btn-correct-pick{background:#4caf5026;color:var(--correct);border:1px solid var(--correct)!important}textarea.name-input{font-family:var(--font-body)}.ai-chat-fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--green-primary),var(--green-light));border:2px solid var(--gold-dim);color:var(--gold);font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:80;box-shadow:0 4px 20px #0006;transition:all .2s;animation:pulseGlow 3s ease infinite}.ai-chat-fab:hover{transform:scale(1.1);box-shadow:0 6px 28px #d4a8434d}.ai-chat-sidebar{position:fixed;right:0;bottom:0;width:360px;max-height:75vh;min-height:300px;background:var(--bg-deep);border:1px solid var(--gold-dim);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;flex-direction:column;z-index:90;box-shadow:-4px 0 30px #0006;animation:slideUp .3s ease-out}.ai-chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bg-surface);background:var(--bg-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.ai-chat-title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--gold)}.ai-chat-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.ai-chat-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;text-align:center}.ai-chat-empty-icon{font-size:2.5rem}.ai-chat-empty p{font-size:.85rem;color:var(--text-muted);line-height:1.6}.ai-chat-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--bg-surface)}.ai-chat-input-row .name-input{flex:1}@media (max-width:480px){.ai-chat-sidebar{width:100%;right:0;left:0;max-height:80vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.ai-chat-fab{bottom:16px;right:16px;width:46px;height:46px;font-size:1.3rem}.solo-dot{width:12px;height:12px}.solo-question-dots{gap:5px}}.floating-back-btn{position:fixed;top:16px;left:16px;z-index:50;width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--bg-surface);color:var(--text-secondary);font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.floating-back-btn:hover{background:var(--bg-surface);color:var(--text-primary)}.leave-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.leave-confirm-dialog{background:var(--bg-card);border:1px solid var(--bg-surface);border-radius:var(--radius-lg);padding:24px;max-width:320px;width:100%;text-align:center;font-size:1rem;color:var(--text-primary)}.home-nav{display:flex;gap:4px;background:var(--bg-card);padding:4px;border-radius:12px;border:1px solid var(--bg-surface);width:100%}.home-nav-btn{flex:1;padding:10px 8px;border:none;border-radius:8px;font-family:var(--font-body);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;background:transparent;color:var(--text-muted)}.home-nav-btn.active{background:var(--green-primary);color:#fff}.home-nav-btn:hover:not(.active){color:var(--text-primary)}.host-end-btn{margin-top:12px;border-color:var(--gold-dim)!important;color:var(--gold)!important;font-size:.8rem}.lang-toggle{position:absolute;top:0;right:0;z-index:20;pointer-events:auto;background:transparent;border:1px solid var(--green-primary);color:var(--green-primary);border-radius:20px;padding:4px 12px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font-body)}.lang-toggle:hover{background:var(--green-primary);color:#fff}[dir=rtl] .home-content{direction:rtl}[dir=rtl] .lang-toggle{right:auto;left:0}[dir=rtl] .bismillah,[dir=rtl] .verse-arabic,[dir=rtl] .title,[dir=rtl] .verse-english,[dir=rtl] .verse-ref{direction:rtl;text-align:center}[dir=rtl] .btn-subtitle{direction:rtl}[dir=rtl] .section-label{text-align:right}[dir=rtl] .action-buttons{direction:rtl}[dir=rtl] .name-input{direction:rtl;text-align:right}[dir=rtl] .join-section{direction:rtl}[dir=rtl] .code-input{text-align:center}[dir=rtl] .explanation-box{border-left:none;border-right:3px solid var(--gold);border-radius:var(--radius-sm) 0 0 var(--radius-sm)}[dir=rtl] .breakdown-header,[dir=rtl] .breakdown-row{direction:rtl}[dir=rtl] .solo-nav-row,[dir=rtl] .study-header{flex-direction:row-reverse}[dir=rtl] .reveal-option{flex-direction:row-reverse;text-align:right}[dir=rtl] .pick-indicators{margin-right:auto;margin-left:0}@keyframes shimmer{0%{transform:translate(-130%) skew(-14deg)}to{transform:translate(230%) skew(-14deg)}}@keyframes timerPulse{0%,to{box-shadow:0 0 4px #4fd1a566}50%{box-shadow:0 0 10px #4fd1a5bf}}body:before,body:after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%}body:before{width:640px;height:520px;top:-140px;right:-180px;background:radial-gradient(ellipse at center,rgba(26,107,79,.16) 0%,transparent 70%)}body:after{width:520px;height:440px;bottom:-110px;left:-150px;background:radial-gradient(ellipse at center,rgba(212,168,67,.09) 0%,transparent 70%)}.geometric-bg svg{opacity:.08}.bismillah{text-shadow:0 0 16px rgba(212,168,67,.55),0 0 32px rgba(212,168,67,.2)}.title-accent{text-shadow:0 0 22px rgba(212,168,67,.5),0 0 44px rgba(212,168,67,.18)}.verse-card{background:linear-gradient(150deg,#0f2e24,#143e32e6 55%,#0a1c16);border-color:#d4a84347;box-shadow:inset 0 1px #d4a84317,0 4px 32px #0006}.verse-arabic{text-shadow:0 0 22px rgba(232,201,106,.28)}.name-input,.code-input{background:#0a1b15d9;border-color:#2d9b722e}.name-input:focus,.code-input:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px #d4a84324,0 2px 12px #d4a84314;outline:none}.section-label{display:flex;align-items:center;gap:10px;width:100%;padding:0}.section-label:before,.section-label:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,67,.28),transparent);min-width:12px}[dir=rtl] .section-label{text-align:center}.btn-primary{background:linear-gradient(135deg,#1b6348 0%,var(--green-primary) 50%,#2a9168 100%);box-shadow:0 2px 14px #1a6b4f61,inset 0 1px #ffffff14}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#206e52,#1f7c5c,#32a87a);box-shadow:0 6px 26px #1a6b4f85,inset 0 1px #ffffff1c;transform:translateY(-2px)}.btn-primary:after{content:"";position:absolute;inset-block:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transform:translate(-130%) skew(-14deg);pointer-events:none}.btn-primary:hover:not(:disabled):after{animation:shimmer .6s ease-out forwards}.btn-secondary{border-color:#d4a84361;box-shadow:inset 0 1px #d4a8430f}.btn-secondary:hover:not(:disabled){border-color:var(--gold);color:var(--gold-light);box-shadow:0 0 0 1px #d4a84338,0 4px 20px #d4a8432e,inset 0 1px #d4a84317;background:var(--bg-card-hover)}.btn-daily{background:linear-gradient(135deg,#d4a8432e,#d4a8430f);border-color:#d4a8437a;box-shadow:inset 0 1px #d4a8431a,0 2px 12px #d4a84317}.btn-daily:hover:not(.done){background:linear-gradient(135deg,#d4a84347,#d4a8431f);border-color:var(--gold);box-shadow:0 0 0 1px #d4a84338,0 0 26px #d4a8433d,inset 0 1px #d4a8431f;transform:translateY(-2px)}.btn-daily-sm{background:linear-gradient(135deg,#d4a8432e,#d4a8430f);border-color:#d4a8437a;box-shadow:inset 0 1px #d4a8431a,0 2px 12px #d4a84317}.btn-daily-sm:hover:not(.done){background:linear-gradient(135deg,#d4a84347,#d4a8431f);border-color:var(--gold);box-shadow:0 0 0 1px #d4a84338,0 0 26px #d4a84338,inset 0 1px #d4a8431f}.btn-learn{background:linear-gradient(145deg,var(--bg-card),rgba(10,27,21,.95));border-color:#2d9b724d}.btn-learn:hover{background:var(--green-primary);box-shadow:0 4px 20px #1a6b4f47}.btn-group{background:linear-gradient(145deg,var(--bg-card),rgba(10,27,21,.95));border-color:#2d9b7247}.btn-group:hover:not(:disabled){background:var(--green-primary);box-shadow:0 4px 20px #1a6b4f40}.home-nav{background:#0b2019c7;border-color:#d4a84321;box-shadow:inset 0 1px #ffffff0a,0 4px 20px #00000052;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.home-nav-btn:hover:not(.active){background:#1a6b4f2e;color:var(--text-primary)}.home-nav-btn.active{background:linear-gradient(135deg,#1a5c42,var(--green-light));box-shadow:0 0 14px #1a6b4f73,inset 0 1px #ffffff1c;color:#fff}.game-header{background:#091813f7;border-bottom-color:#d4a84321;box-shadow:0 3px 24px #00000085,0 1px #d4a84312;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.score-value{text-shadow:0 0 16px rgba(212,168,67,.3)}.round-badge{background:#102e24bf;border:1px solid rgba(45,155,114,.2)}.timer-bar-fill{animation:timerPulse 2s ease-in-out infinite}.timer-container.urgent .timer-bar-fill{animation:none;box-shadow:0 0 10px #f4433699}.option-btn{background:linear-gradient(145deg,var(--bg-card) 0%,rgba(11,30,24,1) 100%);border-color:#ffffff12;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}@media (hover: hover){.option-btn:hover:not(.disabled){background:linear-gradient(145deg,var(--bg-card-hover) 0%,rgba(17,52,40,1) 100%);border-color:var(--green-primary);box-shadow:0 0 0 1px #1a6b4f47,0 2px 12px #1a6b4f29;transform:translate(5px)}}.option-btn.selected{background:linear-gradient(145deg,#d4a84321,#0b1e18);border-color:var(--gold);box-shadow:0 0 0 1px #d4a84347,0 3px 14px #d4a84329}.option-label{background:#102e24cc}.flashcard-front{background:linear-gradient(155deg,#0f3028,#0d2b23 45%,#091c17);border-color:#ffffff14;box-shadow:0 8px 34px #00000070,inset 0 1px #ffffff0d}.flashcard-back{background:linear-gradient(155deg,#122e24,#1a3e30 45%,#0d251d);border-color:#1a6b4f94;box-shadow:0 8px 34px #00000070,inset 0 1px #4fd1a512}.fc-answer{text-shadow:0 0 20px rgba(79,209,165,.3)}.category-card{background:linear-gradient(145deg,var(--bg-card),rgba(10,27,21,.95));border-color:#2d9b7221}.category-card:hover{background:linear-gradient(145deg,var(--bg-card-hover) 0%,rgba(17,52,40,.92) 100%);border-color:#d4a8434d;box-shadow:0 6px 26px #0000006b,0 0 0 1px #d4a8431c;transform:translateY(-3px)}.lb-row{background:linear-gradient(135deg,#0d2b23,#091a14e0);border-color:#ffffff12}.lb-row.first{background:linear-gradient(135deg,#d4a84326,#8a6d2b0f 55%,#091a14eb);border-color:#d4a8437a;box-shadow:0 0 0 1px #d4a84329,0 4px 22px #d4a84329}.lb-row.me{background:linear-gradient(135deg,#4fd1a51a,#1a6b4f0f);border-color:#4fd1a559}.pstat,.dstat,.badge-card,.lobby-player,.lesson-card-display,.daily-countdown,.bot-offer,.qr-code-wrap,.activity-row{background:linear-gradient(145deg,#0d2b23,#091a14e0);border-color:#ffffff12;box-shadow:inset 0 1px #ffffff0a,0 2px 14px #00000047}.badge-card.unlocked{background:linear-gradient(145deg,#d4a8431c,#0d2b23);border-color:#d4a84366;box-shadow:inset 0 1px #d4a84314,0 2px 16px #d4a84321}.milestone{background:linear-gradient(145deg,#0d2b23,#091a14e6)}.milestone.unlocked{border-color:#d4a84347}.ai-tutor-panel{background:#091712f7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -4px 40px #00000085,0 0 0 1px #d4a8431c}.ai-chat-sidebar{background:#091712f7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:-4px 0 40px #00000080,0 0 0 1px #d4a8431a}.ai-chat-header{background:#0b2019eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ai-msg.ai .ai-msg-bubble{background:linear-gradient(145deg,#0d2b23,#091a14f2);border-color:#2d9b722e}.ai-chat-fab{box-shadow:0 4px 24px #1a6b4f7a,0 0 0 1px #d4a84333}@supports (-webkit-background-clip: text) or (background-clip: text){.screen-title{background:linear-gradient(135deg,var(--text-primary) 0%,var(--gold-light) 55%,var(--text-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:var(--text-primary)}}.floating-back-btn{background:#0b2019d6;border-color:#d4a8432e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 18px #00000061,0 0 0 1px #d4a84312}.floating-back-btn:hover{background:#14382aeb;border-color:#d4a8436b;color:var(--gold);box-shadow:0 6px 22px #00000075,0 0 0 1px #d4a8432e}.result-banner.victory .result-text{text-shadow:0 0 40px rgba(212,168,67,.5),0 0 80px rgba(212,168,67,.2)}.fs-value{text-shadow:0 0 20px rgba(212,168,67,.25)}.final-score{background:linear-gradient(145deg,#0d2b23,#091a14e6)}.explanation-box{background:linear-gradient(145deg,#0d2b23,#091a14f2);border-left-color:var(--gold);box-shadow:-3px 0 16px #d4a8431a;line-height:1.65}.reveal-score,.breakdown-table{background:linear-gradient(145deg,#0d2b23,#091a14e6)}.achievement-toast{box-shadow:0 0 40px #d4a84366,0 8px 36px #00000085}.title-card{background:linear-gradient(135deg,#d4a8431c,#0a1f1af2);border-color:#d4a84342;box-shadow:0 0 28px #d4a84314}.pstat-value,.dstat-value{text-shadow:0 0 16px rgba(212,168,67,.22)}.leave-confirm-dialog{background:linear-gradient(145deg,#0d2b23,#091a14fa);border-color:#2d9b7238;box-shadow:0 16px 60px #0000009e,0 0 0 1px #2d9b7214}.custom-quiz-row,.create-q-block,.missed-question-row{background:linear-gradient(145deg,#0d2b23,#091a14e6);border-color:#2d9b7221}.report-question-panel{background:linear-gradient(145deg,#0d2b23,#091a14e6)}.countdown-number{text-shadow:0 0 40px rgba(212,168,67,.5),0 0 80px rgba(212,168,67,.22)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#2d9b724d;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#2d9b7280}@keyframes spin{to{transform:rotate(360deg)}}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px 20px;animation:fadeIn .4s ease-out}.suspense-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:60vh}.loading-spinner{width:40px;height:40px;border:3px solid var(--bg-surface);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}.loading-text{font-size:.95rem;color:var(--text-secondary);text-align:center}.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-group,.btn-learn,.btn-lock-in,.btn-daily,.btn-daily-sm,.btn-ai-tutor,.btn-ai-quiz,.btn-wrong,.btn-correct,.option-btn,.powerup-btn,.count-btn,.home-nav-btn,.category-card,.lang-toggle,.profile-toggle,.onboarding-skip,.onboarding-btn,.floating-back-btn,.solo-dot,.lobby-player,.flashcard{touch-action:manipulation}.btn,.btn-learn,.btn-daily,.btn-daily-sm,.btn-lock-in,.btn-ai-tutor,.btn-ai-quiz,.btn-wrong,.btn-correct,.option-btn,.powerup-btn,.count-btn,.category-card,.home-nav-btn,.lang-toggle,.profile-toggle,.floating-back-btn{transition:all .15s ease}.btn:hover:not(:disabled),.btn-learn:hover,.btn-wrong:hover,.btn-correct:hover,.count-btn:hover:not(.active),.category-card:hover,.lang-toggle:hover,.profile-toggle:hover{transform:scale(1.02)}.btn-primary:hover:not(:disabled){transform:translateY(-2px) scale(1.02)}.btn-secondary:hover:not(:disabled){transform:scale(1.02)}.btn-daily:hover:not(.done){transform:translateY(-2px) scale(1.02)}.btn-daily-sm:hover:not(.done){transform:scale(1.02)}.btn-lock-in:hover{transform:translateY(-1px) scale(1.02)}.btn:active:not(:disabled),.btn-learn:active,.btn-lock-in:active,.btn-daily:active:not(.done),.btn-daily-sm:active:not(.done),.btn-wrong:active,.btn-correct:active,.count-btn:active,.category-card:active,.lang-toggle:active,.profile-toggle:active,.home-nav-btn:active,.floating-back-btn:active{transform:scale(.97)!important}@keyframes selectPulse{0%{box-shadow:0 0 #d4a84380}50%{box-shadow:0 0 0 8px #d4a84300}to{box-shadow:0 0 0 1px #d4a84347,0 3px 14px #d4a84329}}.option-btn.selected{animation:selectPulse .4s ease-out}.option-btn.selected.locked-in{animation:none;opacity:.85}.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 20px;text-align:center;color:var(--text-muted);font-size:.95rem;line-height:1.5}.empty-state-icon{font-size:2.5rem;margin-bottom:4px}.option-text,.explanation-box p,.verse-english,.onboarding-body,.screen-subtitle,.waiting-text,.opponent-status,.reveal-option .option-text{font-size:max(.95rem,15px)}.btn,.btn-lock-in,.powerup-btn,.count-btn,.option-btn,.home-nav-btn,.reveal-option{border-radius:var(--radius-sm)}.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;animation:onboardFadeIn .4s ease}.onboarding-overlay.onboarding-exit{animation:onboardFadeOut .35s ease forwards}@keyframes onboardFadeIn{0%{opacity:0}to{opacity:1}}@keyframes onboardFadeOut{0%{opacity:1}to{opacity:0}}.onboarding-container{position:relative;width:100%;max-width:420px;padding:48px 28px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}.onboarding-skip{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:6px 12px;border-radius:var(--radius-sm);transition:color .2s}.onboarding-skip:hover{color:var(--text-primary)}.onboarding-slide{animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.onboarding-emoji{font-size:64px;margin-bottom:8px}.onboarding-title{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.onboarding-body{font-size:15px;color:var(--text-secondary);line-height:1.6;max-width:320px}.onboarding-dots{display:flex;gap:8px;justify-content:center}.onboarding-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:background .25s,transform .25s}.onboarding-dot.active{background:var(--green-accent);transform:scale(1.3)}.onboarding-btn{width:100%;max-width:280px;padding:14px 24px;font-size:16px;font-weight:600}