:root{--bg: #f7f5f0;--surface: #ffffff;--primary: #3a7ca5;--secondary: #81b29a;--accent: #e8c07d;--text: #33403d;--muted: #7a857f;--shadow: 0 6px 16px rgba(51, 64, 61, .12);--radius: 22px;--tap: #eef2ee;--anim-fast: .12s;--anim-slow: .28s}body.contrast{--bg: #ffffff;--surface: #ffffff;--primary: #1b3a4b;--secondary: #14746a;--accent: #b25a35;--text: #0f1416;--muted: #3a4044;--shadow: 0 0 0 3px #0f1416}body.no-anim *,body.no-anim *:before,body.no-anim *:after{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-user-select:none;user-select:none}#root{display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;max-width:720px;width:100%;margin:0 auto;padding:max(env(safe-area-inset-top),12px) 16px max(env(safe-area-inset-bottom),16px)}.topbar{display:flex;align-items:center;gap:12px;min-height:56px;margin-bottom:8px}.topbar h1{font-size:1.4rem;margin:0;color:var(--primary)}.spacer{flex:1}.btn{font-family:inherit;font-weight:800;border:none;cursor:pointer;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);transition:transform var(--anim-fast) ease}.btn:active{transform:scale(.94)}.icon-btn{width:48px;height:48px;display:grid;place-items:center;font-size:1.4rem;padding:0}.big-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;font-size:1.8rem;color:#fff;min-height:38vh;border-radius:var(--radius)}.big-choice .emoji{font-size:3.2rem}.big-choice.letters{background:var(--primary)}.big-choice.syllables{background:var(--secondary)}.choice-grid{display:grid;gap:16px;flex:1}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;align-content:start;overflow-y:auto;padding-bottom:12px}.card{position:relative;background:var(--surface);border:3px solid transparent;border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:transform var(--anim-fast) ease,border-color var(--anim-fast) ease}.card:active{transform:scale(.95)}.card.playing{border-color:var(--accent)}.card.done:after{content:"★";position:absolute;top:4px;right:8px;color:var(--accent);font-size:.9rem}.card img{width:100%;height:64px;object-fit:contain;pointer-events:none}.card .label{font-size:1.5rem;color:var(--primary)}.card .note{font-size:.7rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.1}.variant-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.variant{font-size:1rem;padding:4px 10px;border-radius:999px;background:var(--tap);color:var(--primary);border:none;cursor:pointer;font-family:inherit;font-weight:800}.syllable-card .label{font-size:1.7rem}.syll-imgs{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:56px}.syll-imgs img{height:56px;width:auto;max-width:46%;object-fit:contain}.card-grid.letters-grid{grid-template-columns:repeat(2,1fr);gap:14px}.letters-grid .card{padding:14px 10px 12px;gap:10px}.letters-grid .card img{height:120px}.letters-grid .card .label{font-size:2.6rem}.letters-grid .card .note{font-size:.85rem}.card-grid.syllable-grid{grid-template-columns:repeat(2,1fr);gap:14px}.syllable-grid .card{padding:14px 10px 12px;gap:10px}.syllable-grid .syll-imgs{height:120px}.syllable-grid .syll-imgs img{height:120px;max-width:48%}.syllable-grid .syllable-card .label{font-size:2.6rem}.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px;overflow-y:auto}.panel h2{margin:0 0 10px;font-size:1.1rem;color:var(--primary)}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--tap)}.row:last-child{border-bottom:none}.row .label{font-size:1rem}.row .desc{font-size:.78rem;font-weight:700;color:var(--muted)}.toggle{width:54px;height:32px;border-radius:999px;background:var(--muted);border:none;position:relative;cursor:pointer;flex-shrink:0;transition:background var(--anim-fast) ease}.toggle.on{background:var(--secondary)}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform var(--anim-fast) ease}.toggle.on:after{transform:translate(22px)}input[type=range]{width:160px;accent-color:var(--primary)}.chip-grid{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 14px;border-radius:999px;border:2px solid var(--tap);background:var(--surface);color:var(--muted);font-family:inherit;font-weight:800;cursor:pointer}.chip.on{border-color:var(--secondary);color:var(--primary);background:var(--tap)}.help-text{font-size:.9rem;font-weight:700;line-height:1.5;color:var(--text)}.help-text p{margin:0 0 10px}.gate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#33403d8c;display:grid;place-items:center;padding:24px;z-index:10}.gate-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;text-align:center;max-width:320px}.gate-card h2{margin:0 0 6px;color:var(--primary)}.gate-seq{display:flex;gap:10px;justify-content:center;margin:16px 0}.gate-num{width:56px;height:56px;border-radius:16px;border:none;background:var(--tap);color:var(--primary);font-family:inherit;font-weight:900;font-size:1.5rem;cursor:pointer}.gate-num.hit{background:var(--secondary);color:#fff}