:root{--ivory: #f4ead4;--ebony: #1e1713;--brass: #d2a65a;--baize: #2f7a52;--ink: #2a2521;--teal: #1f8a86;--coral: #e8553d;--gold: #e0a93a;--font: "Avenir Next", "Avenir", "Futura", "Century Gothic", "Trebuchet MS", system-ui, sans-serif}html,body{background:#1d1410}body{font-family:var(--font);color:var(--ink)}@media(min-aspect-ratio:4/5)and (min-width:700px){body{background:radial-gradient(ellipse at 50% 40%,#3a2a20,#120c09)}.stage{box-shadow:0 30px 80px #3c231959}}.hud{position:absolute;left:0;right:0;top:0;z-index:9;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l))}.chip{pointer-events:auto;width:46px;height:46px;border-radius:14px;border:0;padding:0;display:grid;place-items:center;background:var(--ivory);color:var(--ink);background:linear-gradient(#fbf4e4,#e8dcc2);box-shadow:0 1px #fff inset,0 -2px #00000014 inset,3px 3px 0 var(--ebony),0 6px 12px #0006;text-decoration:none;transition:transform .12s ease}.chip:active{transform:translateY(1px) scale(.95)}.chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.chip .spk{fill:currentColor;stroke-width:1.6}.mute .off{display:none}.mute[aria-pressed=true] .off{display:inline}.mute[aria-pressed=true] .on{display:none}.mute[aria-pressed=true]{color:#8b817a}.score{min-width:84px;padding:4px 18px 6px;border-radius:18px;text-align:center;font-weight:800;font-size:34px;line-height:1.1;letter-spacing:.02em;font-variant-numeric:tabular-nums;background:linear-gradient(#fbf4e4,#e8dcc2);box-shadow:0 1px #fff inset,3px 3px 0 var(--ebony),0 6px 14px #0006;transition:opacity .3s ease,transform .3s ease}.score.bump{animation:bump .22s ease-out}@keyframes bump{40%{transform:scale(1.12)}}.score.big{animation:bigpop .55s cubic-bezier(.2,1.6,.4,1);color:#8a5a10}@keyframes bigpop{0%{transform:scale(1)}35%{transform:scale(1.32) rotate(-3deg);background:#ffe7a8}to{transform:scale(1)}}.toast{position:absolute;z-index:6;left:50%;top:calc(162px + var(--safe-t));transform:translate(-50%);padding:6px 16px 7px;border-radius:12px;background:var(--gold);color:#3b2a0c;font-weight:800;font-size:17px;letter-spacing:.06em;box-shadow:4px -3px #c58f2a,0 8px 18px #7850144d;pointer-events:none}.toast.in{animation:toastin 1.8s ease both}@keyframes toastin{0%{opacity:0;transform:translate(-50%,-14px) rotate(-8deg)}12%{opacity:1;transform:translate(-50%) rotate(2deg)}20%{transform:translate(-50%) rotate(0)}85%{opacity:1}to{opacity:0;transform:translate(-50%,-6px)}}.is-title .score,.is-over .score{opacity:0;transform:translateY(-10px)}.streak{position:absolute;z-index:5;left:50%;top:calc(130px + var(--safe-t));transform:translate(-50%);font-weight:800;font-size:15px;color:#fff;background:var(--teal);padding:3px 12px 4px;border-radius:99px;box-shadow:0 3px 8px #1f8a8659;pointer-events:none;letter-spacing:.04em}.hint{position:absolute;z-index:4;left:0;right:0;bottom:calc(15% + var(--safe-b));display:grid;place-items:center;pointer-events:none}.is-title .hint{bottom:calc(27% + var(--safe-b))}.finger{position:relative;width:58px;height:74px;animation:tapf 1.1s ease-in-out infinite}.finger svg{width:100%;height:100%;fill:var(--ivory);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 4px 6px rgba(60,35,25,.25))}.ripple{position:absolute;left:13px;top:-2px;width:22px;height:22px;margin:-11px 0 0 -3px;border-radius:50%;border:3px solid var(--teal);opacity:0;animation:rip 1.1s ease-out infinite}@keyframes tapf{0%,to{transform:translateY(0) scale(1)}35%{transform:translateY(8px) scale(.94)}55%{transform:translateY(0) scale(1)}}@keyframes rip{0%,30%{opacity:0;transform:scale(.4)}38%{opacity:.9}80%,to{opacity:0;transform:scale(2.4)}}.title{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;padding:calc(13vh + var(--safe-t)) 20px calc(24px + var(--safe-b));background:linear-gradient(#0e090699,#0e090600 40% 70%,#0e090673)}.mark{margin:0;display:flex;gap:6px;perspective:400px}.mark span{display:grid;place-items:center;width:44px;height:66px;border-radius:7px;font-weight:800;font-size:34px;color:var(--ink);background:linear-gradient(100deg,#fffaf0,#eadfc6 70%,#d9cbab);box-shadow:4px -4px 0 var(--ebony),4px -4px 0 1px #d2a65a80,0 12px 18px #00000080,0 1px #fff inset;transform-origin:100% 100%;animation:topple 4.2s cubic-bezier(.55,0,.6,1) infinite}.mark span:nth-child(1){animation-delay:0s}.mark span:nth-child(2){animation-delay:.12s}.mark span:nth-child(3){animation-delay:.24s}.mark span:nth-child(4){animation-delay:.36s}.mark span:nth-child(5){animation-delay:.48s}.mark span:nth-child(6){animation-delay:.6s;color:var(--coral)}@keyframes topple{0%,8%{transform:rotate(0)}16%{transform:rotate(14deg)}24%,62%{transform:rotate(0)}to{transform:rotate(0)}}.tag{margin:18px 0 0;font-size:17px;font-weight:600;letter-spacing:.06em;color:#f4ead4e6;text-shadow:0 2px 6px rgba(0,0,0,.6)}.play{margin-top:auto;width:84px;height:84px;border-radius:26px;border:0;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#3f9468,var(--baize) 55%,#1d5537);color:var(--ivory);box-shadow:0 0 0 3px var(--brass),0 0 0 4px #3c280a99,0 -5px #00000038 inset,0 12px 24px #00000080;animation:breathe 1.8s ease-in-out infinite}.play svg{width:38px;height:38px;fill:currentColor;margin-left:4px}.play:active{transform:scale(.94)}@keyframes breathe{50%{transform:scale(1.06)}}.best{margin:14px 0 0;min-height:1.2em;font-weight:700;font-size:15px;color:#f4ead4d9;letter-spacing:.05em}.over{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(12vh + var(--safe-t)) 20px 20px;background:linear-gradient(#0a060480,#0a060400 60%);animation:fade .25s ease-out}.card{width:min(300px,86%);padding:22px 22px 24px;text-align:center;border-radius:22px;background:linear-gradient(115deg,#fffaf0,#efe4cc 60%,#dfd0b0);box-shadow:9px -8px 0 var(--ebony),9px -8px 0 1px #d2a65a8c,0 26px 50px #0000008c,0 1px #fff inset;animation:drop .45s cubic-bezier(.2,1.4,.4,1);position:relative}.why{margin:0;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral)}.big{margin:2px 0 0;font-size:68px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%) no-repeat;background-size:250% 100%;background-position:130% 0;animation:sheen 1.1s .35s ease-out both}@keyframes sheen{to{background-position:-40% 0}}.card .why,.card .big,.card .bestline,.card .retry{animation:rise .4s cubic-bezier(.2,1.3,.4,1) both}.card .big{animation-delay:.08s}.card .bestline{animation-delay:.18s}.card .retry{animation-delay:.26s}@keyframes rise{0%{opacity:0;transform:translateY(10px) scale(.96)}}.newbest{display:inline-block;margin:10px 0 0;padding:4px 14px;border-radius:99px;background:var(--gold);color:#3b2a0c;font-weight:800;font-size:15px;letter-spacing:.05em;animation:shine 1s ease-in-out infinite alternate}.card .big:after{content:"";display:block;width:46%;height:2px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--brass),transparent)}.bestline{margin:14px 0 0;font-size:16px;color:#2a2521b3;font-weight:600;letter-spacing:.05em}.bestline b{color:var(--ink);font-variant-numeric:tabular-nums}.retry{margin-top:14px;width:70px;height:70px;border-radius:22px;border:0;background:radial-gradient(circle at 40% 30%,#3f9468,var(--baize) 55%,#1d5537);color:var(--ivory);display:inline-grid;place-items:center;box-shadow:0 0 0 3px var(--brass),0 -4px #00000038 inset,0 8px 18px #00000059}.retry svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.retry:active{transform:scale(.94)}@keyframes drop{0%{transform:translateY(-40px) rotate(-6deg);opacity:0}}@keyframes fade{0%{opacity:0}}@keyframes shine{to{transform:scale(1.06)}}.paused{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#0e09068c}.paused .play{margin:0}@media(max-height:720px){.title{padding-top:calc(9vh + var(--safe-t))}.over{padding-top:calc(66px + var(--safe-t))}.card{padding:14px 18px 16px}.big{font-size:52px}.newbest{margin-top:6px}.bestline{margin-top:8px}.retry{margin-top:10px;width:58px;height:58px}.mark span{width:40px;height:60px;font-size:30px}}@media(prefers-reduced-motion:reduce){.mark span,.play,.newbest,.card:after,.toast.in,.score.big{animation:none}.card .why,.card .big,.card .bestline,.card .retry{animation:fade .2s both}}