:root{color-scheme:dark;--ink:#f5fbff;--muted:#8faab7;--cyan:#5df4f0;--gold:#ffd15c;--red:#ff5d73;--panel:#0b1721e8;--line:#ffffff18}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#061018;font-family:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
body{color:var(--ink)}
canvas{display:block;width:100vw;height:100vh}
.hidden{display:none!important}
button,input{font:inherit}
button{color:inherit}
#hud{position:fixed;z-index:12;top:max(10px,env(safe-area-inset-top));left:50%;width:min(620px,calc(100% - 132px));transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 5px 18px #0008)}
.core-stat{height:32px;display:flex;align-items:center;gap:9px;padding:6px 11px;border:1px solid var(--line);border-radius:13px 13px 7px 7px;background:#07131cdd;backdrop-filter:blur(8px)}
.core-stat>span,.run-stats small{font-size:.67rem;font-weight:900;letter-spacing:.12em;color:#a9c1cb}
.core-stat>b{min-width:24px;font-size:.75rem;color:#dff}
.hp-track,.xp-track{position:relative;overflow:hidden;flex:1;height:8px;border-radius:99px;background:#ffffff12}
.hp-track i,.xp-track i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#33daca,var(--cyan));box-shadow:0 0 14px #5df4f099;transition:width .18s ease,background .18s ease}
.run-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:5px 12px 6px;border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px;background:#0b1721c7;text-align:center;backdrop-filter:blur(7px)}
.run-stats span{display:flex;justify-content:center;align-items:baseline;gap:7px;border-right:1px solid #ffffff10}
.run-stats span:last-child{border:0}.run-stats b{font-size:.84rem;font-variant-numeric:tabular-nums}.run-stats small{font-size:.56rem}
.xp-track{height:3px;margin:2px 8px 0}.xp-track i{width:0;background:var(--gold);box-shadow:0 0 10px #ffd15c99}
.ability-status{display:flex;justify-content:center;gap:6px;margin-top:5px}.ability-status>span{display:none;align-items:center;gap:5px;padding:4px 8px;border:1px solid #ffffff1c;border-radius:999px;background:#07131cdd;color:#9fb5be;font-size:.53rem;font-weight:900;letter-spacing:.08em;backdrop-filter:blur(7px)}.ability-status>span.active{display:flex}.ability-status i{font-style:normal;color:#ffbd55}.ability-status #lightningStatus i{color:#7dccff}.ability-status b{min-width:19px;color:#fff;font-size:.68rem;font-variant-numeric:tabular-nums}
.icon-button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #ffffff25;border-radius:14px;background:#091721c9;box-shadow:0 6px 20px #0006;color:#d9edf4;font-weight:900;cursor:pointer;backdrop-filter:blur(8px)}
.icon-button:active{transform:scale(.92)}
.top-left{position:fixed;z-index:18;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left))}
.top-actions{position:fixed;z-index:120;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;gap:7px}
.touch-hint{position:fixed;z-index:7;left:50%;bottom:max(22px,env(safe-area-inset-bottom));width:min(94vw,620px);transform:translateX(-50%);display:grid;grid-template-columns:1fr auto 1fr;gap:8px;pointer-events:none;opacity:.92;animation:hintOut .8s 4.2s forwards}
.touch-hint div{padding:8px 12px;border:1px solid #ffffff18;border-radius:13px;background:#07131cbb;color:#c5e1e9;font-size:.6rem;font-weight:900;letter-spacing:.09em;text-align:center;text-shadow:0 2px 7px #000;backdrop-filter:blur(7px)}.touch-hint b{font-size:1.35rem;color:var(--gold)}.touch-hint .desktop-hint b{font-size:1rem;color:#8ffaf4}
@keyframes hintOut{to{opacity:0;visibility:hidden}}
.announcement{position:fixed;z-index:22;left:50%;top:27%;width:min(90vw,700px);transform:translate(-50%,-50%) scale(.75);opacity:0;color:#fff;font-size:clamp(1.5rem,6vw,3.7rem);font-weight:1000;letter-spacing:-.04em;text-align:center;text-shadow:0 5px 30px #000,0 0 30px currentColor;pointer-events:none}
.announcement.show{animation:announce 1.7s ease both}.announcement.warn{color:#ffb85d}.announcement.good{color:var(--cyan)}
@keyframes announce{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}15%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.08)}}
.overlay{position:fixed;z-index:100;inset:0;display:none;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 42%,#10323ad9,#03090ef2 70%);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.overlay.visible{display:flex}
.menu-card{width:min(92vw,410px);padding:28px;border:1px solid #ffffff1f;border-radius:28px;background:linear-gradient(145deg,#112633ed,#08131ced);box-shadow:0 28px 100px #000c,0 0 0 1px #57fff00b inset;text-align:center;backdrop-filter:blur(12px)}
.start-card{position:relative;overflow:hidden}.start-card:before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 30deg,transparent,#5df4f009,transparent 28%);animation:rotate 12s linear infinite;pointer-events:none}@keyframes rotate{to{transform:rotate(1turn)}}
.pexy{position:absolute;z-index:2;top:18px;left:20px;color:#a9c1cb;font-size:.68rem;font-weight:1000;letter-spacing:.13em;text-decoration:none}
.eyebrow{position:relative;margin:6px 0 8px;color:var(--cyan);font-size:.66rem;font-weight:1000;letter-spacing:.18em}
h1,h2{position:relative;margin:0;line-height:.86;letter-spacing:-.065em}h1{font-size:clamp(3.2rem,15vw,5.2rem)}h2{font-size:clamp(2.7rem,12vw,4rem)}
.emblem{position:relative;width:110px;height:110px;margin:24px auto 17px;display:grid;place-items:center}.emblem i,.emblem:before,.emblem:after{content:"";position:absolute;border-radius:50%;border:1px solid #5df4f04d}.emblem i{inset:6px;box-shadow:0 0 30px #5df4f022}.emblem:before{inset:17px;border-style:dashed;animation:rotate 8s linear infinite}.emblem:after{width:52px;height:52px;background:#12394a;box-shadow:0 0 26px #5df4f066}.emblem span{z-index:1;color:#8cffff;font-size:2.3rem;text-shadow:0 0 15px #5df4f0}
.intro{position:relative;margin:20px 0;color:#b7cbd4;line-height:1.6;font-size:.95rem}
.primary,.secondary,.text-button{position:relative;width:100%;border:0;border-radius:15px;padding:14px 18px;font-weight:1000;letter-spacing:.06em;cursor:pointer}.primary{background:linear-gradient(135deg,#ffe087,#ffc347);color:#291d00;box-shadow:0 10px 28px #ffc34734}.primary:hover{filter:brightness(1.08)}.primary:active,.secondary:active{transform:translateY(2px)}.secondary{margin-top:9px;background:#ffffff10;border:1px solid #ffffff1c}.text-button{margin-top:5px;background:transparent;color:#8faab7;font-size:.78rem}
.controls{position:relative;margin:15px 0;color:#829ca7;font-size:.73rem}.controls span{color:#fff;font-weight:900}.best-row{position:relative;display:flex;justify-content:space-between;margin-top:18px;padding-top:15px;border-top:1px solid #ffffff14;color:#8faab7;font-size:.67rem;font-weight:900;letter-spacing:.11em}.best-row b{color:#fff;font-size:.85rem}
.compact{padding:36px 30px}.compact h2{margin-bottom:28px}
.upgrade-screen{background:#040a0ead;backdrop-filter:blur(3px)}.upgrade-wrap{width:min(96vw,920px);text-align:center}.upgrade-wrap h2{margin-bottom:26px;text-shadow:0 0 30px #5df4f055}.upgrade-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.upgrade-choices.two-options{width:min(100%,600px);margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr))}.upgrade-card{--upgrade:#5df4f0;position:relative;min-height:210px;padding:24px 18px;border:1px solid color-mix(in srgb,var(--upgrade) 38%,transparent);border-radius:24px;background:radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--upgrade) 24%,transparent),transparent 42%),linear-gradient(150deg,#122b39f2,#08151ef2);box-shadow:0 18px 50px #0009,0 0 24px color-mix(in srgb,var(--upgrade) 8%,transparent);color:#fff;text-align:left;cursor:pointer;overflow:hidden}.upgrade-card:hover,.upgrade-card:focus-visible{outline:none;border-color:var(--upgrade);transform:translateY(-4px);box-shadow:0 23px 60px #000b,0 0 34px color-mix(in srgb,var(--upgrade) 24%,transparent)}.upgrade-card.chosen{opacity:.32;transform:scale(.96);filter:saturate(.4);cursor:default}.upgrade-card.chosen:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--upgrade);font-size:4rem;text-shadow:0 0 25px currentColor}.upgrade-icon{display:grid;place-items:center;width:54px;height:54px;border:1px solid color-mix(in srgb,var(--upgrade) 65%,white 12%);border-radius:16px;background:color-mix(in srgb,var(--upgrade) 24%,#07131b);box-shadow:0 0 25px color-mix(in srgb,var(--upgrade) 28%,transparent);color:color-mix(in srgb,var(--upgrade) 78%,white);font-size:2rem;font-weight:1000}.upgrade-card h3{margin:14px 0 7px;color:color-mix(in srgb,var(--upgrade) 62%,white);font-size:1.25rem;letter-spacing:-.02em}.upgrade-card p{margin:0;color:#b2c3ca;font-size:.84rem;line-height:1.45}.upgrade-card .level{position:absolute;right:16px;top:16px;color:color-mix(in srgb,var(--upgrade) 60%,#718995);font-size:.65rem;font-weight:900;letter-spacing:.1em}.upgrade-card .key{position:absolute;right:16px;bottom:13px;color:color-mix(in srgb,var(--upgrade) 45%,transparent);font-size:2rem;font-weight:1000}.upgrade-fireRate{--upgrade:#ffd35c}.upgrade-damage{--upgrade:#ff6681}.upgrade-multishot{--upgrade:#aa80ff}.upgrade-movement{--upgrade:#57e2ff}.upgrade-knockback{--upgrade:#71efa0}.upgrade-rockets{--upgrade:#ffcf5a}.upgrade-lightning{--upgrade:#62b9ff}.upgrade-vision{--upgrade:#f2ef9a}.upgrade-flamethrower{--upgrade:#ff713e}.upgrade-starwings{--upgrade:#6ffff5}.key-hint{color:#718b96;font-size:.7rem;letter-spacing:.12em}
.game-over-card{padding:24px;max-height:calc(100vh - 24px);overflow:auto}.game-over-card h2{margin-bottom:10px}.new-best{display:inline-block;margin:3px 0 7px;padding:5px 10px;border-radius:99px;background:var(--gold);color:#251900;font-size:.68rem;font-weight:1000;letter-spacing:.12em}.final-score small,.final-grid small{display:block;color:#829ba6;font-size:.61rem;font-weight:900;letter-spacing:.13em}.final-score b{font-size:2.3rem;font-variant-numeric:tabular-nums}.final-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:12px 0 16px;overflow:hidden;border-radius:13px;background:#ffffff12}.final-grid span{padding:10px;background:#08151e}.final-grid b{display:block;margin-top:3px;font-size:.9rem}
.leaderboard-panel{margin-top:15px;padding-top:13px;border-top:1px solid #ffffff16}.leaderboard-panel h3{margin:0 0 9px;color:#9bb4bf;font-size:.67rem;letter-spacing:.14em}.leaderboard-panel form{display:flex;gap:6px}.leaderboard-panel input{min-width:0;flex:1;border:1px solid #ffffff20;border-radius:10px;padding:9px 10px;background:#050d12;color:#fff;user-select:text}.leaderboard-panel form button{border:0;border-radius:10px;padding:8px 12px;background:var(--cyan);color:#04201f;font-weight:1000;cursor:pointer}.leaderboard-panel form button:disabled{opacity:.45}.leaderboard-panel>p{min-height:15px;margin:5px 0;color:#9fb5be;font-size:.66rem}.leaderboard-panel ol{margin:0;padding:0;list-style:none;text-align:left}.leaderboard-panel li{display:grid;grid-template-columns:22px 1fr auto;gap:7px;padding:4px 2px;border-bottom:1px solid #ffffff0d;font-size:.7rem}.leaderboard-panel li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){#hud{top:max(7px,env(safe-area-inset-top));width:min(68vw,360px)}.core-stat{height:28px;padding:5px 8px}.run-stats{padding:4px 6px 5px}.run-stats small{display:none}.ability-status>span{padding:3px 6px;font-size:.47rem}.icon-button{width:38px;height:38px;border-radius:12px}.top-actions{top:max(76px,calc(env(safe-area-inset-top) + 76px));flex-direction:column;gap:5px}.menu-card{padding:23px}.upgrade-wrap h2{margin-bottom:16px}.upgrade-choices{gap:8px}.upgrade-card{min-height:180px;padding:15px 10px;border-radius:18px}.upgrade-icon{width:42px;height:42px;border-radius:12px;font-size:1.55rem}.upgrade-card h3{margin:10px 0 5px;font-size:.9rem}.upgrade-card p{font-size:.67rem}.upgrade-card .level{right:8px;top:9px;font-size:.5rem}.upgrade-card .key{right:9px;font-size:1.4rem}.touch-hint{gap:5px}.touch-hint div{padding:7px 6px;font-size:.52rem}}
@media(max-width:390px){.upgrade-choices{gap:6px}.upgrade-card{min-height:168px;padding:13px 8px}.upgrade-card h3{font-size:.78rem}.upgrade-card p{font-size:.6rem;line-height:1.35}.upgrade-card .key{display:none}}
@media(max-height:570px) and (orientation:landscape){#hud{width:min(52vw,430px)}.overlay{align-items:flex-start}.start-card{width:min(84vw,660px);padding:16px 28px}.emblem{float:left;width:100px;height:100px;margin:22px 30px 10px 4px}.start-card h1{font-size:3rem}.intro{margin:10px}.start-card .primary{width:220px}.best-row{margin-top:10px;padding-top:9px}.upgrade-wrap{padding:8px 0}.upgrade-wrap h2{font-size:2.5rem;margin-bottom:12px}.upgrade-card{min-height:145px;padding:15px}.upgrade-icon{font-size:1.7rem}.upgrade-card h3{margin:6px 0 4px}.key-hint{margin:7px}.game-over-card{width:min(86vw,680px)}.game-over-card h2{font-size:2.5rem}.final-score{float:left;width:30%;padding-top:16px}.final-grid{width:68%;margin:8px 0 12px auto}.leaderboard-panel{display:none}}
.upgrade-blackHole{--upgrade:#b06cff}.upgrade-blackHole .upgrade-icon{background:radial-gradient(circle,#000 25%,#37105f 44%,#b06cff 58%,#07131b 72%);text-shadow:0 0 12px #fff}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
