:root{--bg:#eef6ff;--surface:#fff;--ink:#1f2a44;--ink-soft:#5a6a8a;--primary:#5b47e0;--primary-dark:#4536b8;--accent:#ffb830;--success:#22b573;--danger:#ef476f;--info:#29a8e0;--radius:20px;--radius-sm:14px;--shadow:0 4px 16px #1f2a441a;--shadow-lg:0 8px 28px #1f2a4429;--font-display:"Baloo 2", "Comic Sans MS", "Segoe UI", sans-serif;--font-body:"Nunito", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15% 20%,#5b47e00f 0,#0000 40%),radial-gradient(circle at 85% 80%,#ffb83014 0,#0000 40%);min-height:100vh}h1,h2,h3{font-family:var(--font-display)}button{cursor:pointer;font-family:inherit}:focus-visible{outline:3px solid var(--info);outline-offset:3px;border-radius:6px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.app-shell{flex-direction:column;max-width:760px;min-height:100vh;margin:0 auto;padding:0 16px;display:flex}.app-main{flex:1}.page{flex-direction:column;gap:16px;padding:16px 0 40px;display:flex}.quiz-page{gap:12px}.page h1{text-align:center;font-size:2rem}.app-header{justify-content:space-between;align-items:center;padding:14px 0;display:flex}.logo-link{color:var(--ink);align-items:center;gap:8px;text-decoration:none;display:flex}.logo-icon{font-size:1.6rem}.logo-text{font-family:var(--font-display);font-size:1.25rem;font-weight:800}.header-nav{gap:8px;display:flex}.nav-btn{background:var(--surface);width:44px;height:44px;box-shadow:var(--shadow);border:2px solid #0000;border-radius:50%;place-items:center;font-size:1.25rem;text-decoration:none;transition:transform .15s;display:grid}.nav-btn:hover{transform:scale(1.08)}.btn{border-radius:var(--radius-sm);border:none;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:12px 22px;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-dark)}.btn-primary:hover:not(:disabled){box-shadow:0 4px 0 var(--primary-dark), var(--shadow-lg)}.btn-secondary{background:var(--accent);color:var(--ink);box-shadow:0 4px #d99a1c}.btn-outline{background:var(--surface);color:var(--ink);border:2px solid #d6ddec}.btn-danger{background:var(--danger);color:#fff}.btn-danger-outline{background:var(--surface);color:var(--danger);border:2px solid var(--danger)}.btn-lg{min-height:56px;padding:16px 32px;font-size:1.15rem}.btn-sm{background:var(--surface);border:2px solid #d6ddec;border-radius:10px;min-height:38px;padding:8px 14px;font-size:.85rem}.full-width{width:100%}.hero{text-align:center;padding:24px 0 8px}.hero-icon{font-size:4rem;animation:3s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero h1{color:var(--primary);letter-spacing:-.5px;font-size:2.6rem}.tagline{color:var(--ink-soft);margin-top:4px;font-size:1.1rem}.hero-actions{flex-direction:column;align-items:center;gap:12px;margin-top:22px;display:flex}.best-score-card{border:2px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(135deg,#fff8e7,#fff);flex-direction:column;align-items:center;gap:2px;padding:14px;display:flex}.best-label{color:#b07c0f;font-weight:800}.best-value{font-size:1.6rem;font-weight:800;font-family:var(--font-display)}.best-meta{color:var(--ink-soft);font-size:.9rem}.categories-section h2{margin-bottom:12px;font-size:1.3rem}.category-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.category-card{background:var(--surface);border-radius:var(--radius);border-bottom:5px solid var(--cat-color,var(--primary));box-shadow:var(--shadow);color:var(--ink);text-align:center;flex-direction:column;align-items:center;gap:8px;padding:20px 10px;font-weight:700;text-decoration:none;transition:transform .15s;display:flex}.category-card:hover{transform:translateY(-4px)scale(1.02)}.cat-icon{font-size:2rem}.cat-label{font-size:.92rem}.home-links{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.setup-form{flex-direction:column;gap:22px;display:flex}.form-group label{margin-bottom:8px;font-size:1.05rem;font-weight:800;display:block}.input{border-radius:var(--radius-sm);background:var(--surface);border:2px solid #d6ddec;width:100%;padding:14px 16px;font-family:inherit;font-size:1.05rem}.input:focus{border-color:var(--primary);outline:none}.option-grid{gap:10px;display:grid}.option-grid.cols-2{grid-template-columns:repeat(2,1fr)}.option-grid.cols-4{grid-template-columns:repeat(4,1fr)}@media (width<=480px){.option-grid.cols-4{grid-template-columns:repeat(2,1fr)}}.option-btn{background:var(--surface);border-radius:var(--radius-sm);min-height:52px;color:var(--ink);border:2px solid #d6ddec;justify-content:center;align-items:center;gap:6px;padding:12px 8px;font-size:.95rem;font-weight:700;transition:all .12s;display:flex}.option-btn:hover:not(:disabled){border-color:var(--primary)}.option-btn.selected{border-color:var(--cat-color,var(--primary));background:color-mix(in srgb, var(--cat-color,var(--primary)) 12%, white);box-shadow:inset 0 0 0 1px var(--cat-color,var(--primary))}.option-btn.disabled-opt{opacity:.4}.opt-emoji{font-size:1.2rem}.hint{color:var(--ink-soft);margin-top:6px;font-size:.88rem}.quiz-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.quiz-meta{color:var(--ink-soft);gap:12px;font-size:.9rem;font-weight:700;display:flex}.quiz-controls{gap:8px;display:flex}.progress-container{background:#dfe7f5;border-radius:999px;height:26px;position:relative;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--primary), #8b7bf0);border-radius:999px;height:100%;transition:width .4s}.progress-text{color:var(--ink);place-items:center;font-size:.8rem;font-weight:800;display:grid;position:absolute;inset:0}.score-row{justify-content:space-between;align-items:center;display:flex}.score-display{font-family:var(--font-display);font-size:1.4rem;font-weight:800}.streak-display{color:#e05c00;background:#fff1e0;border-radius:999px;padding:6px 14px;font-weight:800;animation:.5s pulse}@keyframes pulse{0%{transform:scale(.8)}60%{transform:scale(1.15)}to{transform:scale(1)}}.timer-bar{background:#dfe7f5;border-radius:999px;height:34px;position:relative;overflow:hidden}.timer-fill{background:var(--success);border-radius:999px;height:100%;transition:width 1s linear,background .3s}.timer-bar.danger .timer-fill{background:var(--danger)}.timer-bar.danger{animation:.4s infinite shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.timer-text{place-items:center;font-size:.95rem;font-weight:800;display:grid;position:absolute;inset:0}.question-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:20px 18px;position:relative}.question-text{font-size:1.15rem;line-height:1.35}.difficulty-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:999px;margin-bottom:10px;padding:4px 12px;font-size:.7rem;font-weight:800;display:inline-block}.difficulty-badge[data-diff=Easy]{color:#147a4d;background:#d9f5e8}.difficulty-badge[data-diff=Medium]{color:#a06e00;background:#fff2d6}.difficulty-badge[data-diff=Hard]{color:#c2185b;background:#ffe0e8}.options-grid{grid-template-columns:1fr;gap:12px;display:grid}@media (width>=560px){.options-grid{grid-template-columns:1fr 1fr}}.option-answer{background:var(--surface);border-radius:var(--radius-sm);min-height:52px;color:var(--ink);text-align:left;border:3px solid #d6ddec;align-items:center;gap:10px;padding:12px 14px;font-size:1rem;font-weight:700;transition:all .15s;display:flex}.option-answer:hover:not(:disabled){border-color:var(--primary);transform:translateY(-2px)}.option-answer.correct{border-color:var(--success);background:#e6f9f0}.option-answer.incorrect{border-color:var(--danger);background:#ffe9ee}.option-answer.dimmed{opacity:.5}.option-answer:disabled{cursor:default}.opt-letter{background:#eef1f9;border-radius:10px;flex-shrink:0;place-items:center;min-width:34px;height:34px;font-weight:800;display:grid}.option-answer.correct .opt-letter{background:var(--success);color:#fff}.option-answer.incorrect .opt-letter{background:var(--danger);color:#fff}.opt-text{flex:1}.opt-icon{font-size:1.3rem;font-weight:900}.option-answer.correct .opt-icon{color:var(--success)}.option-answer.incorrect .opt-icon{color:var(--danger)}.answer-feedback{background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;text-align:center;z-index:80;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:760px;padding:16px 20px 20px;animation:.25s sheetUp;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -6px 24px #1f2a4440}@keyframes sheetUp{0%{transform:translate(-50%,100%)}to{transform:translate(-50%)}}.quiz-page.showing-feedback{padding-bottom:230px}@keyframes slideUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.fb-correct{border-top:5px solid var(--success)}.fb-incorrect{border-top:5px solid var(--danger)}.fb-timeout{border-top:5px solid var(--accent)}.fb-label{font-family:var(--font-display);font-size:1.15rem;font-weight:800}.fb-explanation{color:var(--ink-soft);max-height:4.2em;font-size:.92rem;line-height:1.4;overflow-y:auto}.pause-overlay{z-index:90;background:#1f2a44b3;place-items:center;display:grid;position:fixed;inset:0}.pause-card{background:var(--surface);border-radius:var(--radius);text-align:center;flex-direction:column;gap:20px;padding:40px;display:flex}.results-hero{text-align:center;padding:12px 0}.results-hero h1{font-size:2.2rem}.tier-champion h1{color:#b07c0f}.tier-excellent h1{color:var(--primary)}.tier-great h1{color:var(--success)}.tier-good h1{color:var(--info)}.tier-practice h1{color:var(--ink-soft)}.result-player{color:var(--ink-soft);margin-top:4px;font-weight:700}.results-score-big{text-align:center;font-family:var(--font-display);color:var(--primary);font-size:3.4rem;font-weight:800;line-height:1}.results-score-big span{color:var(--ink-soft);font-size:1.1rem}.results-stats{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.stat-item{background:var(--surface);border-radius:var(--radius-sm);text-align:center;box-shadow:var(--shadow);flex-direction:column;gap:2px;padding:14px 6px;display:flex}.stat-val{font-family:var(--font-display);font-size:1.3rem;font-weight:800}.stat-lbl{color:var(--ink-soft);font-size:.78rem;font-weight:700}.results-meta{color:var(--ink-soft);flex-wrap:wrap;justify-content:center;gap:16px;font-size:.9rem;font-weight:700;display:flex}.results-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}@media (width<=480px){.results-actions{grid-template-columns:1fr}}.review-section{flex-direction:column;gap:12px;display:flex}.review-card{background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);border-left:5px solid #d6ddec;padding:16px}.review-card.rv-correct{border-left-color:var(--success)}.review-card.rv-incorrect{border-left-color:var(--danger)}.review-card.rv-timeout{border-left-color:var(--accent)}.rv-header{justify-content:space-between;margin-bottom:8px;display:flex}.rv-num{color:var(--ink-soft);font-weight:800}.rv-badge{font-size:.82rem;font-weight:800}.rv-badge.correct{color:var(--success)}.rv-badge.incorrect{color:var(--danger)}.rv-badge.timeout{color:#b07c0f}.rv-question{margin-bottom:6px;font-weight:700}.rv-your{color:var(--danger);font-size:.92rem}.rv-correct-answer{color:var(--success);font-size:.92rem}.rv-explanation{color:var(--ink-soft);margin-top:6px;font-size:.9rem;line-height:1.5}.lb-filters{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;display:grid}.select{border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);border:2px solid #d6ddec;padding:10px 12px;font-family:inherit;font-size:.9rem;font-weight:700}.lb-table{flex-direction:column;gap:8px;display:flex}.lb-row{background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);align-items:center;gap:12px;padding:12px 16px;display:flex}.lb-row.lb-latest{border:2px solid var(--primary);background:#f4f1ff}.lb-rank{min-width:42px;font-size:1.2rem;font-weight:800}.lb-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.lb-name{font-weight:800}.lb-you{background:var(--primary);color:#fff;border-radius:999px;margin-left:6px;padding:2px 8px;font-size:.7rem;font-style:normal}.lb-meta{color:var(--ink-soft);font-size:.78rem}.lb-scores{text-align:right;flex-direction:column;display:flex}.lb-score{font-family:var(--font-display);color:var(--primary);font-size:1.2rem;font-weight:800}.lb-acc{color:var(--ink-soft);font-size:.78rem}.empty-state{text-align:center;background:var(--surface);border-radius:var(--radius);color:var(--ink-soft);flex-direction:column;align-items:center;gap:16px;padding:40px 20px;display:flex}.info-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.info-card h2{margin-bottom:8px;font-size:1.15rem}.info-card p{color:var(--ink-soft);line-height:1.6}.info-card p+p{margin-top:8px}.modal-overlay{z-index:100;background:#1f2a4499;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-card{background:var(--surface);border-radius:var(--radius);text-align:center;width:100%;max-width:400px;box-shadow:var(--shadow-lg);padding:28px}.modal-card h3{margin-bottom:10px;font-size:1.3rem}.modal-card p{color:var(--ink-soft);margin-bottom:20px;line-height:1.5}.modal-actions{justify-content:center;gap:10px;display:flex}.app-footer{text-align:center;color:var(--ink-soft);padding:20px 0;font-size:.85rem}