:root{--bg:#fff8f0;--surface:#fff;--text:#2d2a3d;--text-muted:#6b6375;--border:#f0e4d8;--primary:#4d96ff;--primary-dark:#2f6fd1;--success:#4caf50;--success-bg:#e6f9e6;--danger:#e63946;--danger-bg:#fdeaea;--warning:#ffb703;--shadow:#2d2a3d1f 0 8px 20px -6px;--sans:"Trebuchet MS", "Segoe UI", system-ui, Roboto, sans-serif;font:18px/145% var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=640px){:root{font-size:16px}}:root[data-theme=dark]{--bg:#201c2b;--surface:#2b2638;--text:#f3f1f7;--text-muted:#b7b0c5;--border:#3c3650;--shadow:#0006 0 8px 20px -6px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#201c2b;--surface:#2b2638;--text:#f3f1f7;--text-muted:#b7b0c5;--border:#3c3650;--shadow:#0006 0 8px 20px -6px}}*{box-sizing:border-box}body{margin:0}#root{flex-direction:column;width:100%;max-width:100%;min-height:100svh;display:flex}h1,h2,h3{font-family:var(--sans);color:var(--text);font-weight:700}h1{margin:16px 0;font-size:clamp(32px,6vw,52px)}h2{margin:0 0 12px;font-size:clamp(20px,4vw,28px)}p{color:var(--text);margin:0}button{font-family:var(--sans);cursor:pointer;font-size:1rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.page{text-align:center;width:100%;max-width:520px;margin:0 auto;padding:68px 20px 60px}.app-title{margin:8px 0 24px;font-size:clamp(28px,7vw,44px)}.app-title .emoji{animation:2s ease-in-out infinite bounce;display:inline-block}button{border:none;border-radius:14px;transition:transform .15s,box-shadow .15s,background-color .15s}button:active{transform:scale(.96)}.primary-button,.secondary-button{box-shadow:var(--shadow);padding:14px 24px;font-size:1.05rem;font-weight:700}.primary-button{background:var(--primary);color:#fff}.primary-button:hover{background:var(--primary-dark);transform:translateY(-2px)}.secondary-button{background:var(--surface);color:var(--text);border:2px solid var(--border)}.secondary-button:hover{border-color:var(--primary);transform:translateY(-2px)}.button-group{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;display:flex}.nickname-input{border:2px solid var(--border);background:var(--surface);width:100%;max-width:280px;color:var(--text);border-radius:14px;outline:none;padding:14px 16px;font-size:1.05rem}.nickname-input:focus{border-color:var(--primary)}.home-card{background:var(--surface);box-shadow:var(--shadow);border-radius:24px;padding:36px 24px}.category-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;display:grid}@media (width<=420px){.category-grid{grid-template-columns:1fr}}.category-card{background:var(--surface);box-shadow:var(--shadow);border:3px solid #0000;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:28px 12px;font-size:1.1rem;font-weight:700;display:flex}.category-card .cat-icon{font-size:2.4rem}.category-card:hover,.category-card:focus-visible{border-color:var(--card-color,var(--primary));transform:translateY(-4px)scale(1.03)}.progress-bar-outer{background:var(--border);border-radius:999px;width:100%;height:10px;margin-bottom:8px;overflow:hidden}.progress-bar-inner{background:var(--primary);border-radius:999px;height:100%;transition:width .3s}.progress-text{color:var(--text-muted);margin-bottom:4px;font-weight:700}.timer-wrap{margin:8px 0 16px}.timer-bar-outer{background:var(--border);border-radius:999px;width:100%;height:14px;overflow:hidden}.timer-bar-inner{background:var(--success);border-radius:999px;height:100%;transition:width 1s linear,background-color .3s}.timer-bar-inner.timer-mid{background:var(--warning)}.timer-bar-inner.timer-low{background:var(--danger);animation:.6s ease-in-out infinite pulse}.timer-label{color:var(--text-muted);margin-top:4px;font-size:.9rem}.timer-label.timer-low{color:var(--danger);font-weight:700}.question-card{background:var(--surface);box-shadow:var(--shadow);border-radius:20px;margin-bottom:16px;padding:28px 20px}.options{flex-direction:column;gap:12px;margin-top:16px;display:flex}.option-button{background:var(--surface);border:2px solid var(--border);color:var(--text);text-align:left;justify-content:space-between;align-items:center;padding:16px;font-size:1rem;font-weight:600;display:flex}.option-button:not(:disabled):hover{border-color:var(--primary)}.option-button:disabled{cursor:default}.option-button.correct{background:var(--success-bg);border-color:var(--success);color:#1b5e20;animation:.4s pop}.option-button.incorrect{background:var(--danger-bg);border-color:var(--danger);color:#8b1c22;animation:.4s shake}.option-mark{font-size:1.2rem}.feedback-text{justify-content:center;align-items:center;gap:8px;margin-top:16px;font-size:1.1rem;font-weight:700;display:flex}.feedback-correct{color:var(--success)}.feedback-incorrect{color:var(--danger)}.score-display{color:var(--primary);margin:12px 0;font-size:clamp(36px,8vw,56px);font-weight:800}.celebrate-banner{color:var(--warning);margin-bottom:8px;font-size:1.3rem;font-weight:700;animation:.6s pop}.confetti-layer{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:.9;width:10px;height:16px;animation-name:confetti-fall;animation-timing-function:ease-in;animation-iteration-count:1;position:absolute;top:-20px}.status-text{color:var(--text-muted);margin-top:12px}.status-error{color:var(--danger);font-weight:600}.wrong-note-list{text-align:left;flex-direction:column;gap:10px;margin-top:16px;padding:0;list-style:none;display:flex}.wrong-note-item{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:14px 16px}.wrong-note-item p{margin:4px 0}.wrong-note-item .chosen{color:var(--danger)}.wrong-note-item .correct-text{color:var(--success)}.leaderboard-filters{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px;display:flex}.leaderboard-filters button{background:var(--surface);border:2px solid var(--border);color:var(--text);padding:8px 16px;font-weight:600}.leaderboard-filters button.active{background:var(--primary);border-color:var(--primary);color:#fff}.leaderboard-table{border-collapse:separate;border-spacing:0 8px;width:100%}.leaderboard-table th{color:var(--text-muted);text-align:left;padding:0 12px;font-size:.85rem}.leaderboard-row{background:var(--surface);box-shadow:var(--shadow);animation:.4s both slide-in}.leaderboard-row td{padding:12px}.leaderboard-row td:first-child{border-radius:12px 0 0 12px}.leaderboard-row td:last-child{border-radius:0 12px 12px 0}.leaderboard-row.me{outline:3px solid var(--primary)}.medal{font-size:1.2rem}.sound-toggle{z-index:100;gap:8px;display:flex;position:fixed;top:12px;right:12px}.sound-toggle-btn{background:var(--surface);width:40px;height:40px;box-shadow:var(--shadow);border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;display:flex}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:.2;transform:translateY(100vh)rotate(540deg)}}