:root{--bg-primary:#f7f4ea;--bg-secondary:#e2ebdd;--bg-card:#fff;--bg-card-soft:#f3f7ef;--text-primary:#1f2a24;--text-secondary:#53665a;--text-inverse:#f7f4ea;--sage-50:#f3f7ef;--sage-100:#e2ebdd;--sage-200:#c7d8be;--sage-300:#a9c49e;--sage-400:#89aa7c;--sage-500:#6f9365;--sage-600:#55774d;--sage-700:#405d3a;--sage-800:#2d432a;--sage-900:#1d2e1e;--accent:#405d3a;--accent-hover:#2d432a;--accent-2:#6f9365;--warm:#f2b84b;--correct:#2f8f5b;--incorrect:#c7433c;--info:#4a8bd8;--border:#405d3a38;--shadow-soft:0 10px 28px #2d432a24;--font-main:"Segoe UI", system-ui, -apple-system, sans-serif;--radius:14px;--radius-sm:10px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{scrollbar-width:none;-ms-overflow-style:none;width:100%;min-height:100%;overflow-x:hidden}html::-webkit-scrollbar{width:0;height:0;display:none}body::-webkit-scrollbar{width:0;height:0;display:none}#root::-webkit-scrollbar{width:0;height:0;display:none}.app::-webkit-scrollbar{width:0;height:0;display:none}.start-screen::-webkit-scrollbar{width:0;height:0;display:none}.end-screen::-webkit-scrollbar{width:0;height:0;display:none}body{font-family:var(--font-main);color:var(--text-primary);-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-user-select:none;user-select:none;overscroll-behavior-y:contain;background:radial-gradient(circle at 18% 8%,#a9c49e59,#0000 28%),radial-gradient(circle at 82% 0,#f2b84b29,#0000 30%),linear-gradient(#f7f4ea 0%,#e2ebdd 100%)}.app{max-width:480px;min-height:100dvh;max-height:100dvh;padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));flex-direction:column;gap:clamp(8px,1.4svh,16px);margin:0 auto;display:flex;overflow:hidden}.header{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.header h1{letter-spacing:-.02em;color:var(--text-primary);font-size:1.25rem;font-weight:700}.header .subtitle{color:var(--text-secondary);font-size:.75rem;font-weight:500}.progress-bar{gap:6px;padding:4px 0;display:flex}.progress-dot{background:var(--border);border-radius:4px;flex:1;width:0;height:4px;transition:background .2s}.progress-dot.active{background:var(--accent)}.progress-dot.correct{background:var(--correct)}.progress-dot.incorrect{background:var(--incorrect)}.progress-label{color:var(--text-secondary);text-align:center;margin-top:4px;font-size:.75rem}.start-screen{text-align:center;-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;padding:12px 4px;display:flex;overflow-y:auto}.start-screen .logo{background:var(--accent);width:72px;height:72px;color:var(--text-inverse);border-radius:20px;justify-content:center;align-items:center;font-size:2rem;display:flex}.start-screen h2{letter-spacing:-.03em;font-size:1.75rem;font-weight:800}.start-screen p{color:var(--text-secondary);max-width:300px;font-size:.95rem;line-height:1.5}.question-area{overscroll-behavior-y:contain;flex-direction:column;flex:auto;gap:clamp(8px,1.4svh,12px);min-height:0;display:flex;overflow:hidden}.game-label{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-size:.7rem;font-weight:600}.prompt-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);text-align:center;justify-content:center;align-items:center;min-height:clamp(88px,22svh,150px);padding:clamp(14px,3svh,24px) 18px;font-size:clamp(1.08rem,3.2svh,1.42rem);font-weight:700;line-height:1.35;display:flex}.answer-grid{flex:none;grid-template-columns:1fr 1fr;gap:clamp(8px,2vw,12px);margin-top:auto;padding:0;display:grid}.answer-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;min-height:clamp(54px,11svh,74px);padding:clamp(12px,2.5svh,18px) 12px;font-size:clamp(.96rem,2.5svh,1.1rem);font-weight:700;transition:transform .12s,background-color .12s,border-color .12s,box-shadow .12s}.answer-btn:active{background:var(--border);transform:scale(.97)}.answer-btn.selected-correct{border-color:var(--correct);color:var(--text-primary);background:#ddeee2}.answer-btn.selected-incorrect{border-color:var(--incorrect);color:var(--text-primary);background:#f8deda}.answer-btn.reveal-correct{border-color:var(--correct)}.answer-btn:disabled{cursor:default;opacity:.85}.answer-btn.answer-label{text-align:left;grid-template-columns:auto 1fr;align-items:center;gap:10px;display:grid}.answer-label .label{background:var(--sage-100);border:1px solid var(--sage-300);min-width:1.85rem;min-height:1.85rem;color:var(--sage-700);text-transform:uppercase;border-radius:999px;justify-content:center;align-items:center;font-size:.82rem;font-weight:700;display:inline-flex}.answer-label .answer-text{overflow-wrap:anywhere;min-width:0;line-height:1.25}.answer-btn.selected-correct .label,.answer-btn.selected-incorrect .label{color:var(--sage-900)}.feedback-area{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;gap:6px;min-height:60px;padding:14px 16px;animation:.2s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.feedback-area .feedback-status{font-size:.95rem;font-weight:700}.feedback-area .feedback-status.correct{color:var(--correct)}.feedback-area .feedback-status.incorrect{color:var(--incorrect)}.feedback-area .feedback-explain{color:var(--text-secondary);font-size:.85rem;line-height:1.4}.continue-btn{background:var(--accent);color:var(--text-inverse);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;border:none;margin-top:8px;padding:14px 24px;font-size:1rem;font-weight:600;transition:background .15s}.continue-btn:active{background:var(--accent-hover)}.end-screen{text-align:center;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:12px;min-height:0;padding:8px 2px 16px;display:flex;overflow-y:auto}.end-screen .end-icon{font-size:3rem}.end-screen h2{font-size:1.5rem;font-weight:800}.results-grid{flex-direction:column;gap:12px;width:100%;margin:8px 0;display:flex}.result-row{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.result-row .game-name{font-size:.95rem;font-weight:600}.result-row .game-score{color:var(--text-secondary);font-size:.9rem}.result-row .game-accuracy{font-size:1rem;font-weight:700}.accuracy-good{color:var(--correct)}.accuracy-ok{color:#eab308}.accuracy-low{color:var(--incorrect)}.total-score{font-size:1.1rem;font-weight:700}.primary-btn{background:var(--accent);color:var(--text-inverse);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;border:none;width:100%;padding:16px 32px;font-size:1.1rem;font-weight:700;transition:background .15s}.primary-btn:active{background:var(--accent-hover)}.tagline{color:var(--text-secondary);max-width:320px;font-size:.95rem;line-height:1.5}.profile-section{flex-direction:column;gap:10px;width:100%;display:flex}.profile-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);text-align:center;font-size:.75rem;font-weight:600}.profile-grid{flex-direction:column;gap:8px;display:flex}.profile-btn{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);cursor:pointer;text-align:left;font:inherit;touch-action:manipulation;align-items:center;gap:12px;padding:12px 16px;transition:all .15s;display:flex}.profile-btn:hover,.profile-btn.selected{border-color:var(--accent);background:var(--sage-100)}.profile-emoji{text-align:center;width:36px;font-size:1.5rem}.profile-name{font-size:.9rem;font-weight:600}.profile-desc{color:var(--text-secondary);text-align:right;max-width:140px;margin-left:auto;font-size:.8rem}.game-intro{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:20px;animation:.3s fadeIn;display:flex}.intro-emoji{background:var(--bg-secondary);border:1px solid var(--border);border-radius:20px;justify-content:center;align-items:center;width:80px;height:80px;font-size:3.5rem;display:flex}.intro-count{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-size:.75rem;font-weight:600}.intro-title{letter-spacing:-.03em;font-size:1.75rem;font-weight:800}.intro-desc{color:var(--text-secondary);max-width:280px;font-size:.95rem;line-height:1.5}.intro-hint{color:var(--text-secondary);opacity:.6;margin-top:8px;font-size:.7rem}.feedback-shortcut{color:var(--accent);padding:6px 0;font-size:.85rem;line-height:1.4}.shortcut-label{font-weight:600}.feedback-hint{color:var(--text-secondary);opacity:.5;text-align:center;margin-top:4px;font-size:.65rem}.insights{flex-direction:column;gap:8px;width:100%;display:flex}.insight-row{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);align-items:center;gap:8px;padding:12px 14px;font-size:.85rem;line-height:1.4;display:flex}.insight-icon{flex-shrink:0;font-size:1rem}.insight-row strong{color:var(--text-primary)}.xp-row{justify-content:center;display:flex}.xp-label{background:linear-gradient(135deg, var(--warm), #ffd97a);color:#1f2a24;border-radius:20px;padding:8px 20px;font-size:1.1rem;font-weight:800}.secondary-btn{color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;background:0 0;width:100%;padding:12px 24px;font-size:.95rem;font-weight:500;transition:all .15s}.secondary-btn:active{background:var(--bg-secondary)}.button-group,.mode-section{flex-direction:column;gap:10px;width:100%;display:flex}.topic-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.topic-chip,.mode-toggle button{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;font:inherit;touch-action:manipulation}.topic-chip{flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:82px;padding:10px 8px;display:flex}.topic-chip.selected,.mode-toggle button.selected{border-color:var(--accent);background:var(--sage-700);color:var(--text-inverse);box-shadow:0 0 0 1px #405d3a2e}.topic-name{font-size:.86rem;font-weight:800}.topic-desc{color:var(--text-secondary);font-size:.68rem;line-height:1.25}.topic-chip.selected .topic-desc,.mode-toggle button.selected{color:var(--text-inverse)}.topic-chip.selected .topic-desc{opacity:.9}.mode-toggle{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mode-toggle button{padding:12px;font-weight:800}.hud-stack{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.timer-pill,.difficulty-pill{letter-spacing:.02em;border-radius:999px;padding:4px 9px;font-size:.68rem;font-weight:800}.timer-pill.active{color:#5f4312;background:#fff2cc;border:1px solid #f2b84b6b}.timer-pill.practice,.difficulty-pill{background:var(--sage-100);color:var(--sage-700);border:1px solid var(--sage-300)}.completion-ad-card{border-radius:var(--radius);width:100%;color:var(--text-secondary);background:#ffffffb8;border:1px dashed #405d3a52;flex-direction:column;gap:4px;padding:12px 14px;font-size:.78rem;line-height:1.35;display:flex}.completion-ad-card strong{color:var(--text-primary);font-size:.9rem}.ad-eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:800}@media (height<=760px){.start-screen .logo{border-radius:16px;width:54px;height:54px;font-size:1.6rem}.start-screen h2{font-size:1.45rem}.tagline{font-size:.82rem}.profile-btn{padding:9px 12px}.topic-chip{min-height:70px}}.friend-challenge-card,.score-history-card,.friend-compare-card{border-radius:var(--radius);text-align:left;background:linear-gradient(135deg,#c7d8be9e,#ffffffd1);border:1px solid #405d3a38;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:13px 14px;display:flex}.friend-copy,.score-history-card,.friend-compare-card{min-width:0;color:var(--text-secondary);flex-direction:column;gap:4px;font-size:.78rem;line-height:1.35;display:flex}.friend-copy strong,.friend-copy b,.score-history-card strong,.friend-compare-card strong,.friend-compare-card b{color:var(--text-primary)}.avatar-stack{flex:none;display:flex}.avatar{border:2px solid var(--bg-primary);background:var(--accent);width:32px;height:32px;color:var(--text-inverse);border-radius:999px;justify-content:center;align-items:center;margin-left:-8px;font-size:.72rem;font-weight:800;display:inline-flex}.avatar:first-child{margin-left:0}.score-history-card{background:#ffffffd1}.friend-compare-card{background:#f3f7efdb}.history-list{flex-direction:column;gap:6px;margin-top:4px;display:flex}.history-row{border-top:1px solid #405d3a24;justify-content:space-between;gap:10px;padding-top:6px;font-size:.76rem;display:flex}.friend-form{grid-template-columns:1fr .8fr;gap:8px;width:100%;display:grid}.friend-form label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;flex-direction:column;gap:4px;font-size:.68rem;font-weight:700;display:flex}.friend-form input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);min-width:0;color:var(--text-primary);font:inherit;text-transform:none;letter-spacing:0;padding:10px 11px;font-size:.9rem}.friend-form input:focus{border-color:var(--accent);outline:2px solid #405d3a73}.friend-comparison-result{border-radius:var(--radius-sm);color:var(--sage-900);background:#ddeee2;border:1px solid #2f8f5b3d;padding:9px 10px;font-size:.8rem;line-height:1.35}@media (height<=700px){.app{gap:8px}.header{padding:2px 0}.prompt-card{min-height:82px;padding:12px 14px}.answer-btn{border-radius:10px;min-height:52px}.feedback-area{gap:4px;padding:10px 12px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}.home-friend-card,.home-summary-card{text-align:left;width:100%;box-shadow:var(--shadow-soft);color:var(--text-secondary);background:linear-gradient(135deg,#c7d8beb8,#ffffffd1);border:1px solid #405d3a3d;border-radius:18px;flex-direction:column;gap:5px;padding:13px 14px;font-size:.78rem;line-height:1.35;display:flex}.home-friend-card strong,.home-summary-card strong{color:var(--text-primary);font-size:.92rem}.home-summary-card{background:linear-gradient(135deg,#ddeee2d1,#ffffffdb);border-color:#2f8f5b47}.mini-xp-bar{color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:.68rem;font-weight:900;display:grid}.mini-xp-track,.xp-progress-track{background:#405d3a1f;border:1px solid #405d3a29;border-radius:999px;height:8px;position:relative;overflow:hidden}.mini-xp-fill,.xp-progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--warm), #ffd97a, var(--sage-500));height:100%;box-shadow:0 0 18px #f2b84b59}.feedback-overlay{z-index:20;inset:auto max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));pointer-events:none;max-width:456px;margin:0 auto;position:fixed;left:50%;transform:translate(-50%)}.feedback-overlay .feedback-area{pointer-events:auto;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff5;border:1px solid #405d3a47;box-shadow:0 18px 70px #2d432a3d,inset 0 0 0 1px #ffffff70}.xp-progress-card{border-radius:var(--radius);border:1px solid var(--border);background:#ffffffd1;flex-direction:column;gap:8px;width:100%;padding:12px 14px;display:flex}.xp-progress-copy{color:var(--text-secondary);justify-content:space-between;gap:10px;font-size:.78rem;font-weight:800;display:flex}.xp-progress-copy strong{color:var(--text-primary)}.xp-progress-track{height:12px}.start-screen,.end-screen{scrollbar-width:none;-ms-overflow-style:none}.question-count-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.question-count-chip{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);min-height:78px;color:var(--text-primary);cursor:pointer;font:inherit;touch-action:manipulation;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:10px 8px;display:flex;position:relative}.question-count-chip.selected{border-color:var(--accent);background:var(--sage-700);color:var(--text-inverse);box-shadow:0 0 0 1px #405d3a2e}.question-count-label{font-size:.9rem;font-weight:900}.question-count-desc{color:var(--text-secondary);font-size:.62rem;line-height:1.15}.question-count-chip.selected .question-count-desc{color:var(--text-inverse);opacity:.88}.premium-badge{background:linear-gradient(135deg, var(--warm), #ffd97a);color:#1f2a24;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 6px;font-size:.58rem;font-weight:900}.premium-note{align-self:center;max-width:340px!important;font-size:.72rem!important;line-height:1.35!important}.free-ad-overlay{background:linear-gradient(135deg,#ffffffe0,#fff6dcdb);border-color:#f2b84b70}@media (width<=380px){.question-count-grid{grid-template-columns:repeat(2,1fr)}}.logo,.start-screen .logo{background:linear-gradient(135deg, var(--sage-600), var(--sage-400));box-shadow:0 16px 42px #405d3a38}.primary-btn,.continue-btn{background:linear-gradient(135deg, var(--sage-700), var(--sage-500));box-shadow:0 14px 34px #405d3a33}