:root{--night: #120a2c;--plum: #2b1246;--rose: #e0566a;--saffron: #ffb547;--ember: #ff7a3c;--paper: #fff1d6;--font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif}html,body{background:radial-gradient(ellipse 70% 60% at 50% 85%,#3a1640,var(--night) 70%) fixed,var(--night);color:var(--paper);font-family:var(--font)}.stage{background:var(--night)}.hud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));pointer-events:none}.tag{pointer-events:auto;position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(180deg,#401842b8,#1e0a2cb8);color:var(--saffron);text-decoration:none;border:1.5px solid rgba(255,181,71,.55);box-shadow:0 4px 14px #0a021466,inset 0 1px #ffdcaa2e;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .2s ease}.tag:after{content:"";position:absolute;inset:4px;border-radius:11px;border:1px dashed rgba(255,181,71,.28);pointer-events:none}.tag:active{transform:scale(.9) rotate(-3deg);background:#ffb54738}.tag svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.mute .spk{fill:currentColor;stroke:none}.mute .off,.mute[aria-pressed=true] .wav{display:none}.mute[aria-pressed=true] .off{display:inline}.mute[aria-pressed=true]{color:#ffb5478c}.tally{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:0}.score{font-size:44px;line-height:1;font-weight:800;color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 2px 0 rgba(120,30,50,.55),0 0 24px rgba(255,170,80,.45);transition:transform .28s cubic-bezier(.2,1.7,.4,1)}.score.pop{transform:scale(1.25) translateY(-2px)}.score.mile{transform:scale(1.5) translateY(4px);color:#fff3c8;text-shadow:0 2px 0 rgba(120,30,50,.55),0 0 34px rgba(255,190,90,.95)}.score.best{background:linear-gradient(180deg,#fff6d8 15%,var(--saffron) 70%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(120,30,50,.6)) drop-shadow(0 0 14px rgba(255,170,80,.7))}.lives{display:flex;gap:9px}.lives i{position:relative;width:12px;height:15px;border-radius:45% 45% 30% 30%/40% 40% 30% 30%;background:radial-gradient(circle at 50% 68%,#fff6d8 0 18%,var(--saffron) 45%,var(--ember));box-shadow:0 0 10px #ffaa50d9;transition:all .4s ease}.lives i.out{background:transparent;box-shadow:none;border:1.5px solid rgba(255,241,214,.55)}.lives i.out:after{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:var(--paper);border-radius:2px;transform:rotate(40deg)}.lives i.hit{animation:hit .6s ease}@keyframes hit{0%,to{scale:1}35%{scale:1.9;translate:0 4px}}.title,.card,.paused{position:absolute;z-index:2;pointer-events:none;text-align:center}.title{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:calc(64px + var(--safe-t)) 24px calc(60px + var(--safe-b));background:radial-gradient(ellipse 85% 42% at 50% 44%,#120828cc,#12082840 72%,#12082800)}.title.fade{animation:fadeOut .45s ease forwards}@keyframes fadeOut{to{opacity:0;transform:translateY(-14px) scale(1.02)}}.mark svg{width:70px;height:80px;overflow:visible;animation:bob 3.4s ease-in-out infinite}.mark .rib{fill:none;stroke:#96321459;stroke-width:1.2}.mark .flame{fill:#fff}.mark .halo{animation:halo 2.4s ease-in-out infinite;transform-origin:32px 36px}@keyframes bob{0%,to{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}@keyframes halo{0%,to{opacity:.65;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}.title h1{margin:4px 0 0;font-size:clamp(52px,17vw,72px);font-weight:900;letter-spacing:.02em;line-height:1;background:linear-gradient(180deg,#fff3d0 10%,var(--saffron) 55%,var(--rose) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(90,20,50,.7)) drop-shadow(0 0 18px rgba(255,150,80,.35))}.sub{margin:6px 0 0;font-size:17px;font-weight:700;color:var(--paper);opacity:.88;letter-spacing:.03em}.legend{display:flex;gap:12px;margin:20px 0 8px}.legend figure{margin:0;width:116px;height:62px;display:grid;place-items:center;border-radius:16px;background:#1e0a2ca8;border:1.5px solid rgba(255,181,71,.35)}.legend svg{width:100px;height:50px;overflow:visible}.legend .glow{fill:#ffaa504d}.legend .lan.lit{fill:var(--saffron)}.legend .lan.dim{fill:#5a2c3c;stroke:#fff1d659;stroke-width:1}.legend .flm{fill:#fff}.legend .hand{fill:var(--paper);stroke:#3a1430;stroke-width:1.2;stroke-linejoin:round}.legend .up,.legend .down{fill:none;stroke:var(--paper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.legend .down{stroke-width:2.2}.legend .river{fill:none;stroke:#8fa0e8;stroke-width:2.4;stroke-linecap:round}.legend .x{stroke:var(--rose);stroke-width:4;stroke-linecap:round}.cta{margin-top:16px;font-size:15px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);animation:breathe 2.2s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.45}50%{opacity:1}}.best{margin-top:8px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron)}.card{left:50%;top:50%;width:min(300px,calc(100% - 48px));transform:translate(-50%,-44%) rotate(-2deg);opacity:0;padding:28px 22px 22px;border-radius:26px;background:linear-gradient(180deg,#461848f0,#1c0a2ef2);border:1.5px solid rgba(255,181,71,.6);box-shadow:0 22px 60px #08021499,inset 0 1px #ffdcaa33;transition:opacity .4s ease,transform .6s cubic-bezier(.2,1.4,.4,1)}.card:before{content:"";position:absolute;inset:7px;border-radius:20px;border:1px dashed rgba(255,181,71,.3)}.card.show{opacity:1;transform:translate(-50%,-50%) rotate(0)}.card:after{content:"";position:absolute;left:50%;top:-60px;width:1.5px;height:60px;margin-left:-.75px;background:linear-gradient(180deg,#ffb54700,#ffb547b3)}.card .sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}.card .sheen:before{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,#ffe6b400,#ffe6b438,#ffe6b400);transform:skew(-18deg)}.card.show .sheen:before{animation:sheen 1.3s .5s ease-out both}@keyframes sheen{to{left:130%}}.card.record{border-color:#ffd678f2;box-shadow:0 22px 60px #08021499,0 0 40px #ffaa5059,inset 0 1px #ffdcaa4d}.card .big{animation:none}.card.show .big{animation:bigIn .5s .6s cubic-bezier(.2,1.6,.4,1) both}@keyframes bigIn{0%{transform:scale(.6);opacity:.2}}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron)}.big{font-size:80px;font-weight:900;line-height:1.05;margin-top:6px;color:var(--paper);font-variant-numeric:tabular-nums;text-shadow:0 3px 0 rgba(120,30,50,.6),0 0 30px rgba(255,170,80,.45)}.label{font-size:17px;font-weight:700;color:#fff1d6d1}.newbest{display:inline-block;margin-top:12px;padding:6px 16px;border-radius:99px;font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#3a0f1e;background:linear-gradient(180deg,#ffe7a8,var(--saffron) 60%,#f08a3c);animation:shine 1.4s ease-in-out infinite}@keyframes shine{0%,to{box-shadow:0 0 10px #ffb54766;transform:scale(1)}50%{box-shadow:0 0 28px #ffb547f2;transform:scale(1.06)}}.row{position:relative;display:flex;justify-content:space-between;align-items:baseline;margin:16px 6px 0;padding-top:12px;border-top:1px dashed rgba(255,181,71,.4);font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron)}.row b{font-size:26px;letter-spacing:0;color:var(--paper);font-weight:900}.paused{inset:0;display:grid;place-items:center;background:#1208289e}@media(max-height:680px){.legend{margin:12px 0 4px}.mark svg{width:56px;height:64px}.title{padding-top:calc(56px + var(--safe-t))}}@media(prefers-reduced-motion:reduce){.cta,.mark svg,.mark .halo,.newbest,.card.show .big,.card.show .sheen:before{animation:none;opacity:1}.score{transition:none}}.card{border-radius:10px;border:0;padding:30px 24px 22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .26 0 0 0 0 .12 0 0 0 .45 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse 95% 90% at 50% 92%,#fffaea,#ffeec8 40%,#fbcf8a 74%,#e99a52);box-shadow:0 0 0 4px #4a2414,0 0 0 5.5px #ffbe7880,0 0 60px 8px #ff964673,0 26px 60px #080214b3,inset 0 0 26px #963c1459,inset 0 -10px 30px #ffffe666}.card:before{inset:0;border-radius:inherit;border:0;background:repeating-linear-gradient(90deg,transparent 0 calc(33.3% - 2px),rgba(120,50,20,.12) calc(33.3% - 2px) 33.3%)}.card:after{top:-64px;height:60px;width:2px;margin-left:-1px;background:linear-gradient(180deg,#ffbe7800,#6a3a20)}.card.record{box-shadow:0 0 0 4px #5a2a12,0 0 0 6px #ffd678f2,0 0 80px 14px #ffaa5099,0 26px 60px #080214b3,inset 0 0 26px #963c1459,inset 0 -10px 30px #ffffe666}.card .sheen:before{background:linear-gradient(100deg,#fffff000,#fffff073,#fffff000)}.card .eyebrow{color:#9a2e1c;position:relative}.card .big{color:#3a1020;text-shadow:0 1px 0 rgba(255,250,230,.7),0 0 18px rgba(255,240,200,.6);position:relative}.card .label{color:#461818d9;position:relative}.card .newbest{color:#fff4dc;background:linear-gradient(180deg,#d4502e,#9a2a1c);position:relative}.card .row{border-top-color:#78281459;color:#9a2e1c}.card .row b{color:#3a1020}.card .cta{color:#5a1e24;position:relative}.mark svg{width:92px;height:104px;filter:drop-shadow(0 0 18px rgba(255,160,80,.7))}.legend figure{border:0;border-radius:8px;background:radial-gradient(ellipse 90% 90% at 50% 95%,#fff8e6,#ffe2ac 55%,#f2a860);box-shadow:0 0 0 2.5px #4a2414,0 0 26px #ff964666,inset 0 0 14px #963c144d}.legend .hand{fill:#fffaf0;stroke:#4a1a20}.legend .up,.legend .down{stroke:#5a1e24}.legend .lan.lit{fill:#f08a30}.legend .glow{fill:#ff822847}.legend .lan.dim{fill:#4a2430;stroke:#46141e99}.legend .river{stroke:#4a64c8}.legend .x{stroke:#c0283a}