*{box-sizing:border-box}html,body{color:#e8f6ff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#02030a;height:100%;margin:0;font-family:Trebuchet MS,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}canvas#game{touch-action:none;cursor:crosshair;display:block;position:fixed;inset:0}.hidden{display:none!important}#hud{padding:max(10px, env(safe-area-inset-top)) 64px 0 14px;pointer-events:none;text-shadow:0 0 8px #78dcff99;justify-content:space-between;align-items:flex-start;display:flex;position:fixed;top:0;left:0;right:0}.hud-block{min-width:90px}.hud-block.center{text-align:center}.hud-block.right{text-align:right;flex-direction:column;align-items:flex-end;gap:4px;display:flex}.label{letter-spacing:.12em;text-transform:uppercase;opacity:.7;font-size:11px}.big{font-variant-numeric:tabular-nums;font-size:24px;font-weight:700}.mult{opacity:.6;background:#ffffff14;border-radius:10px;margin-top:2px;padding:1px 8px;font-size:14px;font-weight:700;transition:transform .15s,background .2s,opacity .2s;display:inline-block}.mult.active{opacity:1;background:#4dffc340}.mult.gold{color:#fff3c4;text-shadow:0 0 10px #ffd250;background:#ffd25059}.mult.bump{transform:scale(1.35)}.zone-name{opacity:.8;font-size:12px}.lives{gap:4px;font-size:18px;display:flex}.lives .life{filter:drop-shadow(0 0 6px #ff86e0);transition:opacity .3s,transform .3s}.lives .life.lost{opacity:.2;filter:grayscale();transform:scale(.7)}.energy{background:#ffffff1f;border:1px solid #ffffff40;border-radius:6px;width:120px;height:10px;overflow:hidden}#energy-fill{background:linear-gradient(90deg,#3fd6ff,#4dffc3);width:100%;height:100%;transition:width .15s;box-shadow:0 0 10px #4dffc3}#energy-fill.low{background:linear-gradient(90deg,#ff4a6e,#ff9a5a);animation:.5s infinite alternate blink}@keyframes blink{0%{opacity:1}to{opacity:.35}}#controls{top:max(10px, env(safe-area-inset-top));z-index:5;flex-direction:column;gap:8px;display:flex;position:fixed;right:10px}button{font:inherit;color:#e8f6ff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1428468c;border:1px solid #8cdcff66;border-radius:999px;padding:10px 22px;transition:transform .1s,background .2s,box-shadow .2s}button:hover{background:#285078b3;box-shadow:0 0 14px #4dffc366}button:active{transform:scale(.95)}button.icon{width:42px;height:42px;padding:0;font-size:16px}button.primary{background:linear-gradient(135deg,#3fd6ff80,#ff86e080);padding:12px 40px;font-size:20px;font-weight:700;box-shadow:0 0 20px #78dcff66}.screen{text-align:center;z-index:4;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;animation:.5s fadein;display:flex;position:fixed;inset:0}#screen-title{justify-content:flex-start;padding-top:9vh}#screen-title button.primary{margin-top:auto}#screen-title .record{margin-bottom:8vh}#screen-pause,#screen-over{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#02061499}@keyframes fadein{0%{opacity:0}to{opacity:1}}h1{text-shadow:0 0 18px #3fd6ff,0 0 40px #9b7bff;margin:0;font-size:clamp(34px,8vw,64px);line-height:1.05}h1 span{color:#ffc2f0;text-shadow:0 0 18px #ff86e0;display:block}h2{text-shadow:0 0 16px #3fd6ff;margin:0;font-size:40px}.tutorial{opacity:.9;max-width:460px;margin:0;line-height:1.5}.record,.hint{opacity:.8;margin:0}kbd{border:1px solid #ffffff80;border-radius:4px;padding:0 5px;font-family:inherit;font-size:.9em}.stats{gap:6px;min-width:260px;display:grid}.stats div{border-bottom:1px solid #ffffff1a;justify-content:space-between;gap:24px;padding:4px 0;display:flex}.new-record{color:#ffd250;text-shadow:0 0 14px #ffd250;margin:0;font-size:22px;font-weight:700;animation:.8s infinite alternate glow}@keyframes glow{0%{transform:scale(1)}to{transform:scale(1.08)}}.banner{text-align:center;pointer-events:none;opacity:0;z-index:3;position:fixed;top:30%;left:0;right:0}.banner #banner-name{letter-spacing:.08em;text-shadow:0 0 20px var(--glow,#3fd6ff), 0 0 40px var(--glow,#3fd6ff);font-size:clamp(28px,6vw,48px);font-weight:700}.banner #banner-range{letter-spacing:.2em;text-transform:uppercase;opacity:.8;font-size:14px}.banner.show{animation:2.6s forwards banner}@keyframes banner{0%{opacity:0;letter-spacing:.3em;transform:translateY(16px)scale(.95)}15%{opacity:1;transform:none}75%{opacity:1}to{opacity:0;transform:translateY(-12px)}}@media (width<=520px){#hud{padding-left:10px;padding-right:58px}.big{font-size:19px}.energy{width:84px}.hud-block{min-width:70px}}
