:root{--color-bg: #fff8e7;--color-bg-2: #ffe8c6;--color-ink: #3a2a14;--color-primary: #ff9a3c;--color-primary-dark: #e07a1c;--color-accent: #4cc9f0;--color-good: #4caf50;--color-bad: #ef5350;--color-locked: #bdbdbd;--color-star: #ffc93c;--radius-sm: 12px;--radius-md: 20px;--radius-lg: 28px;--shadow-sm: 0 2px 0 rgba(0, 0, 0, .08);--shadow-md: 0 6px 0 rgba(0, 0, 0, .12);--shadow-lg: 0 10px 24px rgba(0, 0, 0, .12);--font-size-body: 20px;--font-size-lg: 28px;--font-size-xl: 48px;--font-size-xxl: 72px;--safe-top: env(safe-area-inset-top, 0);--safe-bottom: env(safe-area-inset-bottom, 0);--safe-left: env(safe-area-inset-left, 0);--safe-right: env(safe-area-inset-right, 0)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg-2) 100%);color:var(--color-ink);font-family:"Baloo 2",Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:var(--font-size-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font-family:inherit}.app{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);max-width:720px;margin:0 auto;width:100%}.screen{flex:1;display:flex;flex-direction:column;gap:20px}.title{font-size:var(--font-size-xl);font-weight:900;text-align:center;color:var(--color-primary-dark);margin:8px 0 0;letter-spacing:-1px}.subtitle{text-align:center;margin:0;color:var(--color-ink);opacity:.8}.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.tile{position:relative;background:#fff;border-radius:var(--radius-lg);padding:18px 14px;box-shadow:var(--shadow-md);border:4px solid #ffd89a;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform 80ms ease;min-height:130px}.tile:active{transform:translateY(2px)}.tile.locked{background:#efefef;border-color:#d8d8d8;color:#8a8a8a;cursor:not-allowed;box-shadow:var(--shadow-sm)}.tile-number{font-size:56px;font-weight:900;color:var(--color-primary-dark);line-height:1}.tile.locked .tile-number{color:#9a9a9a}.tile-label{font-weight:700;font-size:18px}.tile-lock{font-size:24px;position:absolute;top:10px;right:12px}.quiz-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.progress-pill{background:#fff;padding:8px 16px;border-radius:999px;font-weight:800;box-shadow:var(--shadow-sm)}.question-box{background:#fff;border-radius:var(--radius-lg);border:4px solid var(--color-primary);padding:28px 20px;text-align:center;box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;gap:14px}.question-text{font-size:var(--font-size-xxl);font-weight:900;color:var(--color-primary-dark);letter-spacing:-2px;line-height:1}.listen-btn{display:inline-flex;align-items:center;gap:8px;background:var(--color-accent);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-weight:800;font-size:18px;box-shadow:var(--shadow-sm);cursor:pointer}.quiz-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:auto}.choice{background:#fff;border:4px solid #ffd89a;border-radius:var(--radius-md);padding:22px 10px;font-size:40px;font-weight:900;color:var(--color-primary-dark);cursor:pointer;box-shadow:var(--shadow-md);min-height:96px;transition:transform 80ms ease}.choice:active{transform:translateY(2px)}.choice.correct{background:var(--color-good);color:#fff;border-color:var(--color-good)}.choice.wrong{background:var(--color-bad);color:#fff;border-color:var(--color-bad)}.choice:disabled{cursor:default}.feedback{text-align:center;font-weight:800;min-height:28px}.feedback.good{color:var(--color-good)}.feedback.bad{color:var(--color-bad)}.btn{border:none;border-radius:var(--radius-md);padding:14px 22px;font-size:20px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-md);transition:transform 80ms ease}.btn:active{transform:translateY(2px)}.btn-primary{background:var(--color-primary);color:#fff}.btn-secondary{background:#fff;color:var(--color-ink);border:3px solid var(--color-primary)}.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.back-btn{background:#fff;border:3px solid #ffd89a;color:var(--color-ink);padding:8px 14px;border-radius:999px;font-weight:800;cursor:pointer}.voice-toggle{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:3px solid #ffd89a;background:#fff;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform 80ms ease}.voice-toggle:active{transform:translateY(2px)}.voice-toggle.on{color:var(--color-primary-dark)}.voice-toggle.off{color:#a0a0a0;background:#f2f2f2}.home-header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.mode-toggle{display:inline-flex;align-items:center;gap:10px}.mode-label{font-weight:800;color:var(--color-ink);opacity:.75;font-size:16px}.mode-switch{display:inline-flex;background:#fff;border:3px solid #ffd89a;border-radius:999px;padding:3px;gap:3px;box-shadow:var(--shadow-sm)}.mode-option{border:none;background:transparent;color:var(--color-ink);padding:6px 14px;border-radius:999px;font-weight:800;font-size:15px;cursor:pointer;min-width:72px}.mode-option.active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.mode-option.locked{opacity:.55;cursor:not-allowed}.mode-hint{width:100%;text-align:center;font-size:14px;color:var(--color-ink);opacity:.7;margin:0}.quiz-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.streak-pill{background:#fff1c1;border:3px solid var(--color-star);color:var(--color-primary-dark);padding:8px 16px;border-radius:999px;font-weight:900;font-size:18px;box-shadow:var(--shadow-sm);white-space:nowrap}.numpad{display:flex;flex-direction:column;gap:12px;margin-top:auto}.numpad-display{background:#fff;border:4px solid var(--color-primary);border-radius:var(--radius-md);min-height:72px;font-size:48px;font-weight:900;color:var(--color-primary-dark);text-align:center;padding:8px 16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;letter-spacing:2px}.numpad-placeholder{color:#c8b79a;letter-spacing:0}.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.numpad-key{background:#fff;border:4px solid #ffd89a;border-radius:var(--radius-md);padding:14px 0;font-size:32px;font-weight:900;color:var(--color-primary-dark);cursor:pointer;box-shadow:var(--shadow-md);min-height:64px;transition:transform 80ms ease}.numpad-key:active{transform:translateY(2px)}.numpad-key:disabled{opacity:.45;cursor:default}.numpad-back{background:#ffe8c6;color:var(--color-primary-dark)}.numpad-submit{background:var(--color-good);color:#fff;border-color:var(--color-good);font-size:22px}.skip-count-block{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}.skip-count-label{font-weight:800;color:var(--color-ink);opacity:.75;font-size:16px}.skip-count-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.skip-count-chip{background:var(--color-accent);color:#fff;border-radius:999px;padding:4px 12px;font-weight:900;font-size:18px;box-shadow:var(--shadow-sm)}.hint-commutative{margin:0;font-size:16px;text-align:center;color:var(--color-ink);opacity:.85;font-weight:700;background:#fff4dd;padding:8px 14px;border-radius:12px}.reset-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:3px solid #ffcccc;background:#fff5f5;color:#c0392b;cursor:pointer;box-shadow:var(--shadow-sm);font-size:22px;transition:transform 80ms ease}.reset-btn:active{transform:translateY(2px)}.reset-card{max-width:360px}.pin-dots{display:flex;gap:10px;justify-content:center;margin:6px 0}.pin-dot{width:18px;height:18px;border-radius:50%;background:#f0e7d6;border:2px solid #d8c8a8;transition:background .12s ease,border-color .12s ease}.pin-dot.filled{background:var(--color-primary);border-color:var(--color-primary-dark)}.pin-dot.error{background:var(--color-bad);border-color:var(--color-bad)}.pin-error{color:var(--color-bad);font-weight:800;text-align:center}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.pin-key{background:#fff;border:3px solid #ffd89a;border-radius:var(--radius-md);padding:12px 0;font-size:24px;font-weight:900;color:var(--color-primary-dark);cursor:pointer;box-shadow:var(--shadow-sm);min-height:52px;transition:transform 80ms ease}.pin-key:active{transform:translateY(2px)}.pin-key:disabled{opacity:.4;cursor:default}.pin-back{background:#ffe8c6}.pin-ok{background:var(--color-bad);color:#fff;border-color:var(--color-bad);font-size:16px}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:20}.confetti span{position:absolute;top:0;border-radius:2px;display:block}.help-btn{display:inline-flex;align-items:center;gap:8px;background:#ffe29a;color:var(--color-ink);border:3px solid #ffcf4d;border-radius:999px;padding:10px 18px;font-weight:800;font-size:18px;box-shadow:var(--shadow-sm);cursor:pointer}.hint-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.hint-card{background:#fff;border-radius:var(--radius-lg);border:4px solid var(--color-primary);padding:20px 20px 24px;max-width:420px;width:100%;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:14px;max-height:90vh;overflow:auto}.hint-title{margin:0;font-size:32px;font-weight:900;color:var(--color-primary-dark);text-align:center}.hint-explanation{margin:0;font-size:20px;text-align:center;font-weight:700}.dot-grid{display:grid;justify-content:center;padding:8px}.dot{display:inline-block;border-radius:50%;box-shadow:inset 0 -2px #00000026}.stars{display:flex;gap:4px;justify-content:center}.star{width:24px;height:24px;display:inline-block}.star.big{width:64px;height:64px}.mascot-wrap{display:flex;justify-content:center;align-items:center}.mascot-wrap svg{width:140px;height:auto}.mascot-wrap.small svg{width:90px}.result-screen{align-items:center;text-align:center}.result-screen .stars{gap:10px;margin:10px 0}.unlocked-note{background:var(--color-good);color:#fff;padding:10px 16px;border-radius:999px;font-weight:800}