:root{--gold: #ffe6a0;--hot: #ff8a4a;--violet: #b39cff;--ink: #080a24;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--ink);font-family:ui-rounded,Segoe UI,system-ui,-apple-system,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}.game-root{position:fixed;inset:0;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:crosshair}.game-canvas{display:block;width:100%;height:100%}.hud-top{position:absolute;top:max(14px,env(safe-area-inset-top));left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:0 16px;pointer-events:none;text-shadow:0 2px 12px rgba(8,10,36,.7)}.wave{font-size:.85rem;font-weight:800;letter-spacing:.14em;color:var(--violet);margin-top:8px}.score-wrap{display:flex;flex-direction:column;align-items:center}.score{font-size:clamp(2.2rem,8.5vw,3.4rem);font-weight:800}.combo{font-size:clamp(1rem,4.5vw,1.4rem);font-weight:800;color:var(--gold);height:1.4em}.hearts{font-size:.95rem;letter-spacing:1px;margin-top:8px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}.beat{position:absolute;left:50%;bottom:max(60px,calc(env(safe-area-inset-bottom) + 60px));width:84px;height:84px;margin-left:0;border:3px solid rgba(255,230,160,.9);border-radius:50%;transform:translate(-50%) scale(1.4);box-shadow:0 0 24px #ffd27880,inset 0 0 14px #ffd2784d;pointer-events:none}.reticle{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 14px #ffe6a099;opacity:0;transition:opacity .12s;pointer-events:none}.reticle:before,.reticle:after{content:"";position:absolute;background:#ffffffd9}.reticle:before{left:50%;top:8px;bottom:8px;width:2px;margin-left:-1px}.reticle:after{top:50%;left:8px;right:8px;height:2px;margin-top:-1px}.reticle.show{opacity:1}.flash{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(.8);font-size:clamp(1.4rem,7vw,2.2rem);font-weight:900;letter-spacing:.04em;color:var(--gold);text-shadow:0 0 20px rgba(255,180,90,.8);opacity:0;pointer-events:none}.flash.show{animation:pop .5s ease-out}.flash.perfect{color:#fff;text-shadow:0 0 26px var(--hot),0 0 10px #fff}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}to{opacity:0;transform:translate(-50%,-60%) scale(1)}}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:radial-gradient(120% 80% at 50% 40%,#080a2440,#080a24b8);pointer-events:none;animation:fade .4s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.overlay h1{font-size:clamp(3rem,14vw,5.2rem);line-height:.92;color:#fff;text-shadow:0 0 44px rgba(179,156,255,.7)}.overlay h1 span{display:block;color:var(--gold)}.overlay h2{font-size:clamp(1.6rem,7vw,2.4rem);color:#fff}.tag{font-size:1.15rem;color:var(--violet);font-style:italic;font-weight:600}.how{max-width:32ch;color:#ffffffd1;line-height:1.5;font-size:.95rem;margin-bottom:6px}.final{font-size:clamp(3rem,15vw,5rem);font-weight:800;color:var(--gold)}.best{color:#ffffffbf;letter-spacing:.03em}.play{margin-top:6px;padding:14px 34px;font-size:1.15rem;font-weight:700;font-family:inherit;color:#241046;background:linear-gradient(180deg,#ffe9a8,var(--gold));border:none;border-radius:999px;box-shadow:0 8px 26px #ffc85a73;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}