[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1b1530;color:#fff;font-family:"Rubik",system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:manipulation}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(env(safe-area-inset-top) + 1rem) 1.2rem 0;pointer-events:none;z-index:2}
.score{display:grid;pointer-events:none}.score span{font:800 clamp(3rem,10vw,4.6rem)/1 "Rubik";text-shadow:0 6px 24px rgba(0,0,0,.25);transition:transform .2s}.score span.bump{animation:bump .3s cubic-bezier(.2,.8,.2,1.4)}
@keyframes bump{40%{transform:scale(1.25)}}
.score small{font-size:.9rem;font-weight:500;opacity:.75;margin-top:.2rem}
.snd{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:1.2rem;cursor:pointer;transition:transform .2s,background .2s}.snd:hover{transform:scale(1.08)}.snd[aria-pressed=true]{background:rgba(255,255,255,.32)}
.combo{position:fixed;left:50%;top:24%;transform:translate(-50%,0);font:800 1.6rem "Rubik";letter-spacing:.02em;pointer-events:none;opacity:0;z-index:2;text-shadow:0 4px 20px rgba(0,0,0,.25);white-space:nowrap}
.combo.show{animation:combo .9s cubic-bezier(.2,.8,.2,1)}@keyframes combo{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}
.screen{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;background:radial-gradient(ellipse at center,rgba(12,8,26,.62),rgba(12,8,26,.78));animation:fade .4s ease}
@keyframes fade{from{opacity:0}}
.screen h1{margin:0;display:grid;font:800 clamp(4rem,18vw,8rem)/.85 "Rubik";letter-spacing:-.04em}
.screen h1 span:first-child{animation:drop .7s cubic-bezier(.2,.8,.2,1.3) both}.screen h1 span:last-child{animation:drop .7s .12s cubic-bezier(.2,.8,.2,1.3) both;color:#ffd166}
@keyframes drop{from{opacity:0;transform:translateY(-60px)}}
.screen p{max-width:22rem;font-size:1.05rem;line-height:1.5;opacity:.88;margin:1.2rem 0 1.6rem}
.play{font:700 1.25rem "Rubik";padding:1rem 2.8rem;border-radius:999px;border:0;background:#fff;color:#2a1f4d;cursor:pointer;box-shadow:0 14px 40px -10px rgba(0,0,0,.45);transition:transform .2s cubic-bezier(.2,.8,.2,1.4)}.play:hover{transform:scale(1.06)}.play:active{transform:scale(.96)}
.ghost{font:600 1.05rem "Rubik";padding:1rem 1.6rem;border-radius:999px;border:2px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.hint{font-size:.85rem!important;opacity:.7!important}kbd{font:600 .8rem "Rubik";padding:.15rem .45rem;border-radius:6px;background:rgba(255,255,255,.18)}
.over .k{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;opacity:.75}
.over h2{margin:.3rem 0 0;font:800 clamp(5rem,22vw,9rem)/1 "Rubik";animation:drop .6s cubic-bezier(.2,.8,.2,1.3) both}
.over .sub{margin:.4rem 0 1.6rem}
.toast{min-height:1.3em;font-size:.9rem!important;margin:1rem 0 0!important}
.credit{position:fixed;bottom:calc(env(safe-area-inset-bottom) + .6rem);left:0;right:0;text-align:center;margin:0;font-size:.72rem;opacity:.45;pointer-events:none;z-index:2}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}