:root{--ink: #050a1c;--ice: #bfe9ff;--frost: #eef8ff;--glow: #6fb4ff;--warm: #ffb27a;--type: "Avenir Next", "Avenir", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif}html,body{background:var(--ink);color:var(--frost);font-family:var(--type)}.stage{background:var(--ink)}.hud{position:absolute;z-index:5;left:0;right:0;top:0;padding:calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.chip{pointer-events:auto;width:48px;height:48px;display:grid;place-items:center;border:0;padding:0;background:none;position:relative;color:var(--frost);text-decoration:none;-webkit-tap-highlight-color:transparent}.chip:before{content:"";position:absolute;inset:4px;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:linear-gradient(160deg,#c8ebff47,#78aaff14);transition:background .2s}.chip:after{content:"";position:absolute;inset:5.5px;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:#060e26b8}.chip svg{position:relative;z-index:1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.chip:active:before{background:linear-gradient(160deg,#e6f8ff99,#8cbeff40)}.mute .off,.mute[aria-pressed=true] .on{display:none}.mute[aria-pressed=true] .off{display:inline}.mute[aria-pressed=true]{color:#eef8ff8c}.score{text-align:center;margin-top:2px}.score span{display:inline-block;font-weight:200;font-size:52px;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--frost);text-shadow:0 0 18px rgba(120,190,255,.55),0 2px 0 rgba(0,10,40,.5)}.score span.bump{animation:bump .32s cubic-bezier(.2,1.6,.4,1)}@keyframes bump{0%{transform:scale(1.28);color:#fff}to{transform:scale(1)}}.score .pips{display:flex;justify-content:center;gap:5px;margin-top:6px;font-size:0;text-shadow:none}.pips i{display:block;width:9px;height:8px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#c8e6ff38;transition:background .2s,transform .2s}.pips i.on{background:#eaf7ff;transform:scale(1.15);box-shadow:0 0 6px #9fd2ff}.pips.full i{animation:pipflare .7s ease-out}.pips.full i:nth-child(2){animation-delay:.04s}.pips.full i:nth-child(3){animation-delay:.08s}.pips.full i:nth-child(4){animation-delay:.12s}.pips.full i:nth-child(5){animation-delay:.16s}.pips.full i:nth-child(6){animation-delay:.2s}@keyframes pipflare{0%{transform:scale(1)}40%{transform:scale(1.8);background:#fff}to{transform:scale(1.15)}}.toast{position:absolute;z-index:4;left:50%;top:calc(108px + var(--safe-t));margin:0;transform:translate(-50%);padding:6px 18px;font-size:12px;font-weight:600;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#1b1030;background:linear-gradient(90deg,#ffe2b8,#fff6e8,#ffc9a0);pointer-events:none;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}.toast.show{animation:toast 1.9s cubic-bezier(.2,1.3,.4,1) forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%) scale(.6)}12%{opacity:1;transform:translate(-50%) scale(1.08)}20%,75%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.title,.card,.paused,.playhint{position:absolute;z-index:4;left:0;right:0;pointer-events:none;text-align:center}.title{top:calc(9vh + var(--safe-t));transition:opacity .45s ease,transform .45s ease}.title.leaving{opacity:0;transform:translateY(-14px)}.title h1{margin:0;font-weight:300;font-size:clamp(40px,13vw,64px);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;background:linear-gradient(180deg,#fff 15%,#bfe4ff 55%,#7fb2ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(110,180,255,.45))}.title .tag{margin:6px 0 0;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#d2ecffb8}.title .hint{position:fixed;left:50%;transform:translate(-50%);bottom:calc(8vh + 52px + var(--safe-b));width:min(50vw,200px)}.cta{margin:0;font-size:14px;letter-spacing:.3em;text-transform:uppercase}.cta span{display:inline-block;padding:12px 22px;animation:breathe 2.2s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.55}50%{opacity:1;text-shadow:0 0 12px rgba(160,210,255,.8)}}.title .cta{position:fixed;left:0;right:0;bottom:calc(8vh + var(--safe-b))}.bestline{position:fixed;left:0;right:0;bottom:calc(4vh + var(--safe-b));margin:0;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#d2ecff99}.bestline b{font-weight:500;color:var(--frost)}.hint{width:min(62vw,240px)}.hintsvg{width:100%;display:block;overflow:visible}.hintsvg .divide{stroke:#c8e6ff40;stroke-width:1;stroke-dasharray:3 5}.hintsvg .miniflake{stroke:#f2faff;stroke-width:2.2;stroke-linecap:round;fill:none;transform-box:view-box;transform-origin:100px 52px;animation:miniturn 3.2s cubic-bezier(.3,1.4,.5,1) infinite}.hintsvg .miniflake circle{fill:#f2faff;stroke:none}.hintsvg .hand{animation:handmove 3.2s ease-in-out infinite}.hintsvg .press{fill:#ebf7ffeb;stroke:#28508ce6;stroke-width:1.4;stroke-linejoin:round;transform-box:fill-box;transform-origin:30% 10%;animation:handpress 3.2s ease-in-out infinite}.hintsvg .ripple{fill:none;stroke:#e8f6ff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}.hintsvg .r1{animation:ripple1 3.2s ease-out infinite}.hintsvg .r2{animation:ripple2 3.2s ease-out infinite}@keyframes handmove{0%,38%{transform:translate(40px,70px)}50%,88%{transform:translate(152px,70px)}to{transform:translate(40px,70px)}}@keyframes handpress{0%,12%,22%,62%,72%,to{transform:scale(1)}16%,66%{transform:scale(.84)}}@keyframes miniturn{0%,16%{transform:rotate(0)}24%,66%{transform:rotate(-60deg)}74%,to{transform:rotate(0)}}@keyframes ripple1{0%,15%{opacity:0;transform:scale(.4)}17%{opacity:.9}32%,to{opacity:0;transform:scale(1.6)}}@keyframes ripple2{0%,65%{opacity:0;transform:scale(.4)}67%{opacity:.9}82%,to{opacity:0;transform:scale(1.6)}}.playhint{bottom:calc(5vh + var(--safe-b));transition:opacity .5s}.playhint .hint{margin:0 auto;width:min(48vw,190px);opacity:.85}.playhint.fade{opacity:0}.card{top:34%;left:50%;right:auto;width:min(78vw,300px);transform:translate(-50%,-50%);padding:26px 18px 10px;clip-path:polygon(14% 0,86% 0,100% 10%,100% 90%,86% 100%,14% 100%,0 90%,0 10%);background:linear-gradient(170deg,#dcf2ff33,#5a8ce61f 45%,#060c22d9);animation:cardIn .5s cubic-bezier(.2,1.3,.4,1)}.card:before{content:"";position:absolute;inset:1.5px;z-index:-1;clip-path:inherit;background:radial-gradient(120% 60% at 18% 0%,rgba(190,228,255,.16),transparent 60%),radial-gradient(80% 50% at 100% 100%,rgba(120,170,255,.12),transparent 70%),linear-gradient(180deg,#0a1430d1,#04091ae6)}.card:after{content:"";position:absolute;left:14%;right:14%;top:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}@keyframes cardIn{0%{opacity:0;transform:translate(-50%,-42%) scale(.92)}}.card .lbl{margin:0;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#c8e4ffb3}.card .final{margin:4px 0 2px;font-size:76px;font-weight:200;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(130,195,255,.6)}.card .best{margin:6px 0 14px;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#d2ecffbf}.card .best b{font-weight:500;color:#fff}.newbest{display:inline-block;margin:6px 0 2px;padding:5px 14px;font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#1b1030;background:linear-gradient(90deg,#ffe2b8,#fff6e8,#ffc9a0);border-radius:2px;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);animation:shine 1.6s ease-in-out infinite}@keyframes shine{50%{filter:brightness(1.15);transform:scale(1.06)}}.paused{top:42%;font-size:18px;letter-spacing:.4em;text-transform:uppercase}.paused p{margin:0 0 8px}@media(max-height:700px){.title{top:calc(5vh + var(--safe-t))}.title .hint{width:min(42vw,160px)}.score span{font-size:44px}}@media(prefers-reduced-motion:reduce){.cta span,.newbest,.score span.bump,.pips.full i,.toast.show{animation:none}.cta span{opacity:.9}}