:root{--c:#4f46e5;--c2:#312e81;--bg:#f8fafc;--fg:#0f172a;--mut:#475569;--ok:#15803d;--bad:#b45309;--card:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--fg);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;line-height:1.5}a{color:var(--c)}:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e2e8f0;gap:8px}.topbar nav{display:flex;gap:8px}.brand{font-weight:800;font-size:1.3rem;color:var(--c);text-decoration:none}.linklike{background:none;border:0;cursor:pointer;padding:0}.btn{display:inline-block;background:var(--c);color:#fff;border:2px solid var(--c);border-radius:12px;padding:10px 16px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;min-height:44px}.btn:hover{background:var(--c2)}.btn.ghost{background:transparent;color:var(--c)}.btn.ghost:hover{background:#eef2ff}.btn.big{font-size:1.15rem;padding:14px 22px}.btn.alt{background:#fff;color:var(--c)}main{padding:16px}.narrow{max-width:640px;margin:0 auto}.wide{max-width:1100px;margin:0 auto}.center{text-align:center;margin:10vh auto}.lead{font-size:1.15rem;color:var(--mut)}.err{color:#b91c1c}.hero{text-align:center;padding:8vh 8px 4vh;max-width:760px;margin:0 auto}.hero h1{font-size:clamp(2rem,6vw,3.4rem);margin:0 0 12px}.demo{display:flex;justify-content:center;gap:16px;font-size:3.5rem;margin:24px 0}.demo span{background:#fff;border-radius:18px;padding:12px 20px;box-shadow:0 4px 14px #0001}section{max-width:760px;margin:0 auto 32px}.steps li,.features li{margin:8px 0}.foot{text-align:center;color:var(--mut);padding:24px}.players{list-style:none;padding:0}.card-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:12px 14px;margin:8px 0;box-shadow:0 1px 4px #0001;flex-wrap:wrap}.row-actions{display:flex;gap:8px}.form{display:grid;gap:12px}.form label{display:grid;gap:4px;font-weight:600}input,select{font:inherit;padding:10px;border:2px solid #cbd5e1;border-radius:10px;min-height:44px}.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;background:#fff}th,td{padding:8px;border-bottom:1px solid #e2e8f0;text-align:left}.game{max-width:720px;margin:0 auto}.game-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.toggles{display:flex;gap:12px}.switch{display:flex;align-items:center;gap:6px;font-size:.95rem}.switch input{min-height:auto;width:20px;height:20px}.notice{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;background:#fef3c7;border-radius:12px;padding:10px 14px;margin:12px 0}.progress{display:flex;justify-content:center;gap:8px;margin:16px 0}.dot{width:18px;height:18px;border-radius:50%;background:#e2e8f0;transition:background .3s}.dot.on{background:var(--ok)}.target{text-align:center}.target h1{font-size:clamp(2.2rem,8vw,3.5rem);margin:8px 0 0;outline:none}.ipa{color:var(--mut);margin:0 0 8px;font-size:1.1rem}.speak{display:flex;justify-content:center;gap:8px}.hint{text-align:center;color:var(--mut);font-size:.9rem}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}.pcard{position:relative;background:var(--card);border:3px solid #e2e8f0;border-radius:20px;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #0001;transition:transform .15s,border-color .2s;padding:8px;color:var(--fg)}.pcard:hover:not(:disabled){transform:translateY(-3px);border-color:var(--c)}.pcard:disabled{cursor:default}.emoji{font-size:clamp(3rem,14vw,5.5rem);line-height:1}.pcard img{max-width:100%;max-height:70%}.label{margin-top:8px;font-weight:600;font-size:1.05rem}.num{position:absolute;top:6px;left:10px;color:var(--mut);font-size:.85rem}.pcard.right{border-color:var(--ok);background:#f0fdf4}.pcard.wrong{border-color:var(--bad);opacity:.6;cursor:not-allowed}.pcard{position:relative}.cross{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#dc2626;font-size:7rem;font-weight:900;line-height:1;text-shadow:0 0 6px #fff;pointer-events:none}.tick{position:absolute;top:4px;right:10px;color:var(--ok);font-size:1.6rem;font-weight:800}.pcard.bounce{animation:bounce .5s}@keyframes bounce{0%,to{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(.96)}}.feedback{min-height:56px;text-align:center;font-size:1.2rem}.good{color:var(--ok);font-weight:700}.calm{color:var(--bad)}.levelup{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172acc;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.lu-box{background:#fff;border-radius:24px;padding:28px;text-align:center;max-width:420px;width:100%;animation:pop .4s}.lu-emoji{font-size:4rem}.lu-box h2{outline:none}.lu-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}@keyframes pop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width:420px){.cards{gap:8px}.pcard{border-radius:14px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.debug{position:fixed;right:8px;top:70px;background:#111827ee;color:#e5e7eb;font:12px/1.4 monospace;padding:8px 10px;border-radius:8px;z-index:50;max-width:220px}.debug ol{margin:4px 0 0 18px;padding:0}.debug .cur{color:#fde047;font-weight:700}.debug .past{opacity:.5}.cat-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.cat-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:2px solid #e5e7eb;border-radius:16px;background:#fff;cursor:pointer;font:inherit}.cat-card:hover,.cat-card:focus-visible{border-color:#4f46e5}.cat-card.cur{border-color:#4f46e5;background:#eef2ff}.cat-emoji{font-size:2.4rem}.cat-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.cat-bar span{display:block;height:100%;background:#22c55e}.sayit{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;margin:.4rem 0}.sayit .hint{flex-basis:100%;text-align:center;margin:0}.btn.mic{min-width:12rem;box-shadow:0 0 0 calc(var(--lvl,0)*14px) #4caf5059;transition:box-shadow .08s}.sayit.rec .btn.mic{background:#e53935;color:#fff}.sayit.fail .btn.mic{animation:nudge .4s}@keyframes nudge{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.cards.locked .pcard{opacity:.45;filter:grayscale(.4);cursor:not-allowed}.voice-ready{font-size:.8rem;opacity:.7;text-align:center;margin:.2rem 0}.say-ok{text-align:center}@media (prefers-reduced-motion:reduce){.sayit.fail .btn.mic{animation:none}.btn.mic{transition:none}}.brand .logo{height:44px;width:auto;display:block}@media (max-width:480px){.brand .logo{height:34px}}.heard{margin:.4rem auto;text-align:center}.phdiff{display:inline-block;padding:.4rem .6rem;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0}.phrow{display:flex;gap:3px;align-items:center;justify-content:center;margin:2px 0}.phlab{width:3.2em;text-align:right;font-size:.75rem;color:#64748b;margin-right:4px}.ph{min-width:1.6em;padding:2px 4px;border-radius:6px;font:600 1.1rem/1.3 Noto Sans,Segoe UI,sans-serif;text-align:center}.ph.ok{background:#dcfce7;color:#14532d}.ph.near{background:#fef9c3;color:#713f12}.ph.wrong{background:#fee2e2;color:#7f1d1d}.ph.missing{background:#fff;color:#7f1d1d;border:2px dashed #dc2626}.ph.extra{background:#e0e7ff;color:#312e81;text-decoration:line-through}.phkey{margin:.3rem 0 0;font-size:.7rem}.phkey .ph{font-size:.7rem;min-width:0}.chunks{display:flex;gap:6px;justify-content:center;margin:.5rem 0}.chunk{display:flex;flex-direction:column;align-items:center;padding:.4rem .8rem;border-radius:12px;border:2px solid #cbd5e1;background:#fff;font-size:1.6rem;cursor:pointer}.chunk small{font-size:.75rem;color:#64748b}.chunk.cur{border-color:#2563eb;box-shadow:0 0 0 3px #bfdbfe}.chunk.done{border-color:#16a34a;background:#f0fdf4}