:root{color-scheme:dark;--orange:#ff8a00;--gold:#ffd34d;--blue:#46b8ff;--ink:#050814;--panel:rgba(5,8,20,.90)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:"Courier New",monospace}body{touch-action:none}#app{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 50% 25%,#111a48 0,#050814 45%,#000 100%)}#game-shell{position:relative;height:100dvh;max-height:100%;aspect-ratio:9/16;max-width:100vw;overflow:hidden;background:#03050d;border-left:1px solid #16234d;border-right:1px solid #16234d}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;background:#02040c}#hud{position:absolute;left:0;right:0;top:0;padding:max(12px,env(safe-area-inset-top)) 14px 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;pointer-events:none;text-shadow:0 2px #000}#hud>div{text-align:center;color:white}.label{display:block;color:var(--blue);font-size:10px;letter-spacing:1px}#hud strong{font-size:16px}#pause-btn{position:absolute;right:10px;top:max(56px,calc(env(safe-area-inset-top) + 44px));z-index:5;width:40px;height:40px;border:2px solid #3252a5;border-radius:8px;background:#0b1533dd;color:white;font-weight:bold;box-shadow:inset 0 0 0 2px #09102a,0 0 10px #2569ff55}.overlay{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px;background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(2,4,12,.94))}.overlay.visible{display:flex}#brand-art{width:min(320px,86vw);height:auto;max-height:36vh;background:transparent;filter:drop-shadow(0 6px 0 #07143b) drop-shadow(0 0 14px #ff8a0055);margin-bottom:2px}.tagline{margin-top:0;margin-bottom:12px;color:var(--blue);font-weight:bold;letter-spacing:1px;text-shadow:0 2px #00102c}.primary,.secondary{min-width:220px;padding:13px 18px;margin:6px;border-radius:7px;font:700 16px "Courier New",monospace;letter-spacing:1px;box-shadow:inset 0 0 0 2px #07112a,0 4px 0 #020713}.primary{background:linear-gradient(#ffb22e,#ff7b00);color:#160800;border:2px solid var(--gold)}.secondary{background:linear-gradient(#10245c,#08142e);color:#d7edff;border:2px solid #2f64b7}.primary:active,.secondary:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #07112a,0 2px 0 #020713}.hint,#control-hint{font-size:10px;letter-spacing:1px;color:#86caff}.hint{margin-top:16px}#control-hint{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;opacity:.7;white-space:nowrap}.title-small{font-size:32px;font-weight:900;color:#ff4c4c;margin-bottom:18px;text-shadow:0 3px #530000}.final-score{font-size:18px;margin-bottom:16px}label{display:grid;gap:7px;color:#86caff;font-weight:bold}input{width:220px;padding:12px;background:#030816;border:2px solid #2f64b7;color:white;text-transform:uppercase;font:700 18px "Courier New",monospace;text-align:center}#hof-list{width:min(340px,90%);padding-left:42px;text-align:left;line-height:1.8;color:white}#hof-list li span{float:right;color:var(--gold)}#event-banner{position:absolute;left:50%;top:17%;transform:translate(-50%,-12px);z-index:8;opacity:0;pointer-events:none;padding:9px 14px;border:2px solid #ff8a00;background:#02040ddd;color:#ffd34d;font:900 15px "Courier New",monospace;letter-spacing:1px;white-space:nowrap;transition:opacity .14s ease,transform .14s ease;box-shadow:0 0 18px #ff8a0044}#event-banner.visible{opacity:1;transform:translate(-50%,0)}

#audio-btn{position:absolute;left:10px;top:max(56px,calc(env(safe-area-inset-top) + 44px));z-index:5;width:40px;height:40px;border:2px solid #3252a5;border-radius:8px;background:#0b1533dd;color:#ffd34d;font:900 20px "Courier New",monospace;box-shadow:inset 0 0 0 2px #09102a,0 0 10px #2569ff55}
#fx-layer{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
#fx-layer i{position:absolute;left:50%;top:58%;font-style:normal;font:900 22px Arial;color:#ffd34d;text-shadow:0 0 8px #ff8a00;animation:catsat-burst var(--d) ease-out forwards}
@keyframes catsat-burst{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.25);opacity:0}}
#hof-list{counter-reset:rank}
#hof-list li{padding:4px 8px;border-bottom:1px dashed #27406f}
#hof-list li::marker{color:#46b8ff;font-weight:700}
#game-over.visible .title-small{animation:gameover-pulse .8s steps(2,end) 2}
@keyframes gameover-pulse{50%{opacity:.45;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){#fx-layer i,.title-small{animation:none!important}}