:root{--bg:#fff7ec;--ink:#2b2e35;--soft:#8b8f99;--pink:#ff7aa8;--pink-dark:#e0457f;--green:#4cc27a;--green-dark:#33a05f;--red:#ff3b3b;--card:#fff;--line:#f0e3d3;--vh:100vh;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;font-family:Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{background:var(--bg)}#app{justify-content:center;display:flex}main{width:100%;max-width:480px;min-height:var(--vh);padding:max(16px, env(safe-area-inset-top)) 16px max(20px, calc(env(safe-area-inset-bottom) + 12px));flex-direction:column;gap:14px;display:flex;position:relative}button{font:inherit;color:inherit;cursor:pointer;background:var(--card);box-shadow:0 4px 0 var(--line);border:0;border-radius:18px}button:active{box-shadow:0 1px 0 var(--line);transform:translateY(3px)}h1,h2{margin:0}.go{color:#fff;background:var(--green);box-shadow:0 6px 0 var(--green-dark);padding:18px;font-size:28px;font-weight:900}.go:active{box-shadow:0 2px 0 var(--green-dark)}.home{height:var(--vh)}.home header{text-align:center;grid-template-columns:48px 1fr 48px;align-items:center;display:grid}.home h1{color:var(--pink-dark);font-size:32px;font-weight:900}.menu,.sound{width:48px;height:48px;font-size:22px}.picked{color:var(--soft);padding:10px 14px;font-size:15px;font-weight:700}.hero{flex:1;min-height:0}.record{text-align:center}.record span{color:var(--soft);font-size:18px;display:block}.record b{color:var(--pink-dark);font-size:72px;font-weight:900;line-height:1}.menu-screen h1{text-align:center;font-size:26px}.ranges{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.range{text-align:left;flex-direction:column;justify-content:center;min-height:64px;padding:12px 12px 12px 44px;display:flex;position:relative}.range b{font-size:20px}.range small{color:var(--soft);font-size:12px}.range i{border:3px solid var(--line);border-radius:7px;width:24px;height:24px;margin-top:-12px;position:absolute;top:50%;left:12px}.range.on{background:#ffe6ef;box-shadow:0 4px #ffc2d6}.range.on i{background:var(--pink);border-color:var(--pink)}.range.on i:after{content:"✓";color:#fff;text-align:center;font-size:16px;font-style:normal;font-weight:900;position:absolute;top:-3px;bottom:0;left:0;right:0}.rec-note{text-align:center;color:var(--soft);margin:0}.menu-screen .done{margin-top:auto}.run{height:var(--vh);transition:background .4s;overflow:hidden}.run.heat-1{background:#f3fbef}.run.heat-2{background:#fff6d9}.run.heat-3{background:#ffe9d6}.run.heat-4{background:linear-gradient(160deg,#ffe0ef,#fff3c4,#dff4ff)}.flash{pointer-events:none;background:var(--red);opacity:0;z-index:2;position:absolute;top:0;bottom:0;left:0;right:0}.flash.on{animation:.45s flash}@keyframes flash{0%{opacity:.3}to{opacity:0}}.bar{background:var(--line);border-radius:7px;flex-shrink:0;height:14px;overflow:hidden}.bar i{background:var(--green);transform-origin:0;height:100%;display:block}.top{justify-content:space-between;align-items:center;display:flex}.stop{width:44px;height:44px;font-size:20px}.count{color:var(--green-dark);font-size:40px;font-weight:900}.count.bump{animation:.25s pop}.rec{color:var(--soft);text-align:right;min-width:44px;font-size:14px}.combo{text-align:center;height:28px;color:var(--pink-dark);font-size:22px;font-weight:900}.combo.up{animation:.5s combo}@keyframes combo{0%{transform:scale(.6)}50%{transform:scale(1.5)rotate(-4deg)}to{transform:scale(1)}}.task{white-space:nowrap;flex:1;justify-content:center;align-items:center;gap:12px;min-height:0;font-size:max(44px,min(14vw,72px));font-weight:900;display:flex;position:relative}.task .a{text-align:center;min-width:1.6ch;color:var(--pink-dark)}.task .a.empty{color:#e3d3bf}.task .a.wrong{color:#fff;background:var(--red);border-radius:14px;padding:0 10px;text-decoration:line-through;text-decoration-thickness:5px}.task.bad{animation:.4s shake}.task.good-0{animation:.25s pop}.task.good-1{animation:.3s pop1}.task.good-2{animation:.3s pop2}.task.good-3{animation:.35s pop3}.task.good-4{animation:.4s pop4}@keyframes shake{15%{transform:translate(-18px)}35%{transform:translate(16px)}55%{transform:translate(-10px)}75%{transform:translate(6px)}}@keyframes pop{50%{transform:scale(1.08)}}@keyframes pop1{50%{color:var(--green-dark);transform:scale(1.12)}}@keyframes pop2{50%{color:#ff9f1c;transform:scale(1.18)rotate(-2deg)}}@keyframes pop3{40%{color:var(--pink-dark);transform:scale(1.25)rotate(3deg)}}@keyframes pop4{30%{color:#b07aff;transform:scale(1.32)rotate(-4deg)}60%{transform:scale(1.1)rotate(2deg)}}.sparks{pointer-events:none;position:absolute;top:50%;left:50%}.sparks i{border-radius:50%;animation:.65s ease-out forwards spark;position:absolute}@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{transform:translate(calc(var(--dx) - 50%), calc(var(--dy) - 50%)) scale(.3);opacity:0}}.pad{flex-shrink:0;grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.pad button{height:clamp(52px, calc(var(--vh) * .085), 76px);font-size:30px;font-weight:800}.pad .del{color:var(--soft)}.result{text-align:center}.stage{height:min(300px, calc(var(--vh) * .36));flex-shrink:0;position:relative}.stage>div{position:absolute;top:0;bottom:0;left:0;right:0}.stage .trophy{width:120px;height:120px;top:auto;bottom:0;left:auto;right:0}.stage .confetti{pointer-events:none}.say{color:var(--pink-dark);margin:0;font-size:24px;font-weight:900}.score{margin:0;font-size:20px}.score b{color:var(--green-dark);font-size:56px;font-weight:900;display:block}.was{color:var(--soft);min-height:1em;margin:0}.mistakes{background:var(--card);border-radius:18px;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px;display:flex}.mistakes h2{width:100%;color:var(--soft);font-size:16px}.mistakes span{color:#c62828;background:#ffe4e4;border-radius:10px;padding:4px 10px;font-size:20px;font-weight:800}.buttons{grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;display:grid}.buttons button{padding:16px;font-size:20px;font-weight:800}.buttons .again{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-dark)}@media (max-height:640px){main{gap:8px}.stage{height:calc(var(--vh) * .26)}.say{font-size:20px}.score b{font-size:40px}.buttons button{padding:12px}.record b{font-size:56px}}