:root{--night: #0a0518;--plum: #140825;--deck: #0e0a2c;--mag: #ff2eaa;--cyan: #28ecff;--lime: #b6ff3c;--gold: #ffc93c;--violet: #b078ff;--red: #ff4630;--ice: #e6faff;--chrome: linear-gradient(180deg, #f2f4fb 0%, #9aa0b8 40%, #3a3d55 55%, #c7cce0 100%);--display: "Krungthep", "Silom", "Arial Black", "Segoe UI Black", Impact, sans-serif;--text: Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif}html,body{background:radial-gradient(ellipse 70% 80% at 50% 45%,#1d0b35,#05020c 75%) var(--night);color:var(--ice);font-family:var(--text)}.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(8px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l));pointer-events:none}.nbtn{pointer-events:auto;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 50%,#1a0d33 55%,transparent 57%),var(--chrome);border:1px solid #05020c;box-shadow:0 3px 10px #0009,0 0 0 1px #ff2eaa40;color:var(--cyan);text-decoration:none;transition:transform .12s ease}.nbtn:active{transform:scale(.9)}.nbtn 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:#28ecff73}.tally{display:flex;align-items:center;gap:8px;margin-top:2px;padding:3px 4px 3px 14px;border-radius:10px;background:linear-gradient(180deg,#1a0d33eb,#0a0518eb);border:1px solid rgba(255,46,170,.55);box-shadow:inset 0 0 0 1px #0009,0 0 14px #ff2eaa40,0 4px 12px #00000080}.score{min-width:2.4ch;text-align:center;font-family:var(--display);font-size:26px;line-height:1.2;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(40,236,255,.9),0 0 16px rgba(40,236,255,.45);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}.score.pop{transform:scale(1.18)}.mult{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:38px;border-radius:7px;background:linear-gradient(180deg,#2a1650,#160b2e);border:1px solid rgba(255,255,255,.18);transition:background .3s ease,box-shadow .3s ease}.mult b{font-family:var(--display);font-size:15px;line-height:1;color:#fff}.mult[data-m="2"]{background:linear-gradient(180deg,#0f6a7a,#063440);box-shadow:0 0 12px #28ecff80}.mult[data-m="3"]{background:linear-gradient(180deg,#4f8a12,#23420a);box-shadow:0 0 12px #b6ff3c80}.mult[data-m="4"]{background:linear-gradient(180deg,#a5791a,#4a3305);box-shadow:0 0 12px #ffc93c8c}.mult[data-m="5"]{background:linear-gradient(180deg,#b0176f,#4d0730);box-shadow:0 0 16px #ff2eaab3}.mult.pulse{animation:lamp .5s cubic-bezier(.2,1.6,.4,1)}@keyframes lamp{0%{transform:scale(1)}40%{transform:scale(1.3)}to{transform:scale(1)}}.pips{display:flex;gap:3px;margin-top:4px}.pips i{width:9px;height:4px;border-radius:2px;border:1px solid rgba(255,255,255,.7)}.pips i.on{background:#fff;box-shadow:0 0 5px #fff}.title,.card,.paused{position:absolute;z-index:2;pointer-events:none;text-align:center}.title{inset:0;display:flex;align-items:flex-start;justify-content:center;padding:calc(74px + var(--safe-t)) 18px calc(30px + var(--safe-b));background:linear-gradient(180deg,#05020cc7,#05020c66 60%,#05020c1a)}.title.fade{animation:fadeOut .45s ease forwards}@keyframes fadeOut{to{opacity:0;transform:scale(1.04)}}.marquee{position:relative;padding:22px 18px 18px;border-radius:18px;max-width:330px;width:100%;background:linear-gradient(180deg,#1a0c34f0,#0a0518f0);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px #9aa0b8,0 0 0 4px #2b2d40,0 0 0 5px #ff2eaacc,0 0 24px 4px #ff2eaa59,0 20px 50px #000000b3}.title h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(50px,16vw,66px);letter-spacing:.08em;line-height:1;padding-left:.08em;color:#fff;text-shadow:0 0 4px #fff,0 0 10px var(--mag),0 0 22px var(--mag),0 0 40px rgba(255,46,170,.6)}.title h1 span{display:inline-block;animation:buzz 5s steps(1) infinite}.title h1 span:nth-child(4){animation-delay:1.3s}.title h1 span:nth-child(2){animation-delay:3.1s}@keyframes buzz{0%,91%,94%,to{opacity:1}92%,95%{opacity:.35}}.sub{margin:10px 0 0;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 8px rgba(40,236,255,.6)}.legend{display:flex;gap:10px;justify-content:center;margin:16px 0 6px}.legend figure{margin:0;width:132px;height:84px;display:grid;place-items:center;border-radius:10px;background:#05020c99;border:1px solid rgba(200,190,255,.18)}.legend svg{width:120px;height:76px;overflow:visible}.legend .deck{fill:#0e0a2c;stroke:var(--cyan);stroke-width:1.4}.legend .band{fill:none;stroke:var(--mag);stroke-width:2;stroke-linecap:round}.legend .path{fill:none;stroke:var(--ice);stroke-width:2;stroke-dasharray:2 4;stroke-linecap:round}.legend .puck{fill:var(--ice);stroke:var(--mag);stroke-width:2}.legend .pad{fill:var(--lime)}.legend .ring{fill:none;stroke:#c9cfe0;stroke-width:2.2}.legend .arc{fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linecap:round}.legend .arc.warn{stroke:var(--red)}.legend .iris{fill:#8a8ea6;fill-rule:evenodd}.legend .arrow{fill:none;stroke:#e6faffb3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.legend .x2{fill:var(--cyan);font-family:var(--display);font-size:11px}.cta{margin-top:12px;font-family:var(--display);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);text-shadow:0 0 10px rgba(182,255,60,.6);animation:breathe 1.8s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.45}50%{opacity:1}}.best{margin-top:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}.card{left:50%;top:42%;width:min(300px,calc(100% - 48px));transform:translate(-50%,-44%) scale(.94);opacity:0;padding:22px 20px 18px;border-radius:16px;color:var(--ice);background:linear-gradient(180deg,#1e0e3af7,#0a0518f7);box-shadow:0 0 0 2px #9aa0b8,0 0 0 4px #2b2d40,0 0 0 5px #28ecffcc,0 0 26px 4px #28ecff4d,0 24px 60px #000000b3;transition:opacity .35s ease,transform .5s cubic-bezier(.2,1.4,.4,1)}.card.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.eyebrow{font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);text-shadow:0 0 8px rgba(255,70,48,.6)}.big{font-family:var(--display);font-size:64px;line-height:1.05;margin-top:8px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 6px #fff,0 0 14px var(--cyan),0 0 30px rgba(40,236,255,.5)}.label{font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}.newbest{display:inline-block;margin-top:10px;padding:5px 14px;border-radius:6px;font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#1a0d00;background:var(--gold);box-shadow:0 0 18px #ffc93c99;animation:shine 1.2s ease-in-out infinite}@keyframes shine{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.grades{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:14px;font-size:9px;letter-spacing:.04em;text-transform:uppercase;opacity:.92}.grades b{display:block;font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:0;color:#fff;margin-bottom:2px}.grades span:nth-child(2) b{color:var(--cyan)}.grades span:nth-child(3) b{color:var(--lime)}.grades span:nth-child(4) b{color:var(--gold)}.grades span:nth-child(5) b{color:var(--mag)}.row{display:flex;justify-content:space-between;align-items:baseline;margin:14px 4px 0;padding-top:10px;border-top:1px solid rgba(200,190,255,.2);font-size:12px;letter-spacing:.2em;text-transform:uppercase}.row b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:0;color:var(--gold)}.paused{inset:0;display:grid;place-items:center;background:#05020cb8}@media(max-height:700px){.title{padding-top:calc(60px + var(--safe-t))}.marquee{padding-top:16px}.legend{margin:10px 0 4px}.title h1{font-size:48px}}@media(prefers-reduced-motion:reduce){.cta,.newbest,.title h1 span{animation:none;opacity:1}.score{transition:none}.mult.pulse{animation:none}}.marquee,.card{isolation:isolate}.marquee{background:linear-gradient(160deg,#ffffff29,#ffffff08 26%,#fff0 40%),linear-gradient(180deg,#221240e6,#0a051aeb);box-shadow:0 0 0 1px #ffffff80,0 0 0 3px #ff2eaad9,0 0 18px 3px #ff2eaa73,inset 0 0 0 1px #ff2eaa80,inset 0 0 22px #ff2eaa38,inset 0 -18px 30px #28ecff1f,0 24px 50px #000000bf}.card{background:linear-gradient(160deg,#ffffff26,#ffffff08 26%,#fff0 40%),linear-gradient(180deg,#241244f2,#0a051af5);box-shadow:0 0 0 1px #ffffff80,0 0 0 3px #28ecffd9,0 0 22px 4px #28ecff59,inset 0 0 0 1px #28ecff80,inset 0 0 22px #28ecff33,inset 0 18px 30px #ff2eaa1a,0 24px 60px #000000bf}.marquee:before,.card:before{content:"";position:absolute;inset:8px;pointer-events:none;z-index:-1;--bolt: radial-gradient(circle at 35% 35%, #ffffff 0, #c9cfe0 2px, #5b5f78 4px, #1a1a2a 5px, rgba(0, 0, 0, 0) 6px);background:var(--bolt) left top / 12px 12px no-repeat,var(--bolt) right top / 12px 12px no-repeat,var(--bolt) left bottom / 12px 12px no-repeat,var(--bolt) right bottom / 12px 12px no-repeat}.legend figure{background:linear-gradient(180deg,#0e0a2cd9,#05020ccc);border-color:#28ecff59;box-shadow:inset 0 1px #ffffff1f,inset 0 0 12px #28ecff1f}.card .row{border-top-color:#28ecff47}.marquee{background:radial-gradient(ellipse 80% 50% at 50% 22%,#ff2eaa38,#ff2eaa00 70%),linear-gradient(160deg,#ffffff29,#ffffff08 26%,#fff0 40%),linear-gradient(180deg,#28144aeb,#0a051af0)}.card{background:radial-gradient(ellipse 80% 45% at 50% 30%,#28ecff33,#28ecff00 70%),linear-gradient(160deg,#ffffff26,#ffffff08 26%,#fff0 40%),linear-gradient(180deg,#28144af2,#0a051af5)}