:root{--ink:#060912;--paper:#e9f2ff;--cyan:#55cbe8;--gold:#f5c85b;--violet:#c084fc;--mint:#5be8a8;--red:#ff5f5f;--panel:rgba(6,10,20,.93)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020308;color:var(--paper);font-family:"Arial Narrow","DIN Condensed",Impact,system-ui,sans-serif;touch-action:none}
button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#stage{position:relative;width:100vw;height:100dvh;min-height:360px;overflow:hidden;background:#020308;isolation:isolate}
#game{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#game:active{cursor:grabbing}
.hidden{display:none!important}

#hud{position:absolute;z-index:5;left:0;top:0;width:100%;padding:12px clamp(12px,3vw,36px);display:grid;grid-template-columns:auto 1fr 1fr auto auto;align-items:center;gap:clamp(8px,2vw,22px);pointer-events:none;background:linear-gradient(180deg,rgba(2,4,10,.86),rgba(2,4,10,0));text-shadow:0 2px #000}
.brand{font-size:15px;letter-spacing:.1em;white-space:nowrap}.brand b{color:var(--cyan)}.brand span{font-weight:900;color:var(--gold)}
.shield-meter,.core-meter{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;font:700 10px system-ui}
.shield-meter span,.core-meter span{color:#8fa0c2;letter-spacing:.1em}
.shield-meter i,.core-meter i{height:8px;background:#1a2236;border-radius:4px;overflow:hidden}
.shield-meter i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#2fa9d6,var(--cyan));transition:width .2s}
.core-meter i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#c23a3a,var(--red));transition:width .2s}
.mid-stats{display:flex;gap:clamp(10px,2vw,26px);justify-content:center}
.mid-stats>div{text-align:center;position:relative}
.mid-stats span{display:block;color:#8fa0c2;font:700 9px system-ui;letter-spacing:.14em}
.mid-stats b{display:block;font-size:22px;line-height:1.1}
.lvl b{color:var(--gold)}
.lvl i{display:block;width:60px;height:4px;margin:4px auto 0;background:#1a2236;border-radius:2px;overflow:hidden}
.lvl i:after{content:"";display:block;width:var(--xp,0%);height:100%;background:var(--mint)}
.score b{color:var(--cyan)}
.wave b{color:#ff9f4a}
.hud-actions{display:flex;gap:8px;pointer-events:auto}
#sound-btn,#exit-btn{border:1px solid #3a4966;background:#0c1526;padding:7px 10px;cursor:pointer;border-radius:4px;font:700 11px system-ui;color:var(--paper)}
#exit-btn{border-color:#5a2f36;background:#1a0c10;color:#ff9d9d}
#exit-btn:hover{background:#26121a}

#boss-bar{position:absolute;z-index:7;left:50%;top:78px;transform:translateX(-50%);width:min(520px,86vw);opacity:0;pointer-events:none;transition:.3s;text-align:center}
#boss-bar.show{opacity:1}
#boss-bar span{display:block;color:#ff5f9f;font:800 12px system-ui;letter-spacing:.1em;margin-bottom:4px;text-shadow:0 2px 6px #000}
#boss-bar i{display:block;height:10px;background:#1a2236;border-radius:5px;overflow:hidden;border:1px solid #ff5f9f55}
#boss-bar i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#c23a6a,#ff5f9f);transition:width .2s}

#storm-banner{position:absolute;z-index:8;left:50%;top:14%;transform:translate(-50%,-10px);opacity:0;color:var(--red);background:#1a0a0acc;border:1px solid var(--red);padding:10px 22px;font:900 15px system-ui;letter-spacing:.15em;pointer-events:none;transition:.3s;text-shadow:0 0 12px #ff5f5f88}
#storm-banner.show{opacity:1;transform:translate(-50%,0)}
#combo-toast{position:absolute;z-index:8;left:50%;bottom:14%;transform:translate(-50%,8px);opacity:0;color:var(--gold);font:900 20px system-ui;text-shadow:0 2px 8px #000;pointer-events:none;transition:.25s}
#combo-toast.show{opacity:1;transform:translate(-50%,0)}

.overlay{position:absolute;z-index:10;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,4,10,.78);backdrop-filter:blur(5px)}
.overlay.show{display:flex}
.eyebrow{color:var(--cyan);font:800 11px system-ui;letter-spacing:.23em;text-transform:uppercase}
.primary{border:0;background:var(--cyan);color:#031018;padding:16px 22px;font-size:18px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:6px 6px 0 #14415a;transition:transform .12s,box-shadow .12s;border-radius:2px}
.primary:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 #14415a}
.primary i{font-style:normal;margin-left:12px}
.secondary{border:1px solid var(--cyan);background:transparent;color:var(--cyan);padding:12px 18px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:2px;margin-top:10px}
.secondary:hover{background:rgba(85,203,232,.1)}
.secondary i{font-style:normal;margin-left:8px}
.skip{border:0;background:none;color:#8093b8;text-decoration:underline;text-underline-offset:5px;cursor:pointer;padding:12px}
.skip:hover{color:#fff}

#menu{background:radial-gradient(circle at 74% 32%,rgba(85,203,232,.16),transparent 34%),linear-gradient(125deg,#050810 0 50%,#0a1220 50%)}
.menu-panel{position:relative;width:min(560px,88vw);margin-left:-32vw;padding:36px 42px;border-left:4px solid var(--cyan);background:linear-gradient(90deg,rgba(4,8,16,.98),rgba(4,8,16,.7))}
.menu-panel h1{margin:9px 0 0;font-size:clamp(42px,7vw,84px);line-height:.82;letter-spacing:-.03em}
.menu-panel h1 span{color:transparent;-webkit-text-stroke:2px var(--cyan)}
.menu-panel h2{margin:14px 0 20px;color:#9db3d6;font:700 18px system-ui;letter-spacing:.5em}
.tagline{font:600 clamp(14px,1.8vw,19px)/1.7 system-ui;color:#d3ddf2}
.how{display:flex;margin:26px 0 18px;border-top:1px solid #263250;border-bottom:1px solid #263250}
.how div{flex:1;padding:11px 8px;border-right:1px solid #263250;display:flex;gap:8px}
.how div:last-child{border:0}
.how b{color:var(--cyan);font-size:12px}
.how span{font:700 10px/1.5 system-ui;color:#93a5c8}
.best{font:700 11px system-ui;color:#5f7196;letter-spacing:.1em}
.menu-art{position:absolute;right:0;width:54vw;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 60% 50%,#0c1830,#020308 70%)}
.menu-planet{width:min(48vw,420px);filter:drop-shadow(0 0 60px #55cbe855);animation:spin-slow 40s linear infinite}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.upgrade-panel{width:min(980px,94vw);max-height:92vh;overflow:auto;padding:30px;background:#070b16;border-top:4px solid var(--cyan)}
.upgrade-panel h2{font-size:clamp(26px,4vw,42px);margin:10px 0 20px}
.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.upgrade-card{min-height:230px;text-align:left;padding:20px;border:1px solid #263250;background:#0c1526;cursor:pointer;position:relative;transition:.15s;display:flex;flex-direction:column}
.upgrade-card:hover{transform:translateY(-5px);border-color:var(--cyan);background:#0f1c33}
.upgrade-card img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 8px currentColor)}
.upgrade-card .emoji-icon{display:block;width:52px;height:52px;line-height:52px;font-size:38px;text-align:center;filter:drop-shadow(0 0 8px currentColor)}
.upgrade-card h3{font-size:19px;margin:12px 0 4px}
.upgrade-card .tier{color:var(--gold);font:800 11px system-ui;letter-spacing:.1em}
.upgrade-card p{font:500 13px/1.5 system-ui;color:#9fb0d0;flex:1}
.upgrade-card.picked{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 24px #f5c85b88;background:#1a1608}

.score span{display:block;color:#8093b8;font:700 12px system-ui;letter-spacing:.15em}
.score b{font-size:64px;color:var(--gold)}
.sc-earned{color:#ffd166;font:800 14px system-ui;margin:6px 0 4px}

.shop-panel{width:min(640px,92vw);max-height:88vh;overflow:auto;padding:34px;background:var(--panel);border:1px solid #263250;box-shadow:14px 14px 0 #0008}
.shop-panel h2{font-size:clamp(26px,4vw,38px);margin:10px 0 14px}
.sc-balance{color:#ffd166;font:800 15px system-ui;margin-bottom:18px}
.shop-rows{display:grid;gap:12px;margin-bottom:18px}
.shop-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px;border:1px solid #263250;background:#0c1526}
.shop-row h3{font-size:15px;margin:0 0 6px}
.shop-lv{color:var(--gold);font:700 11px system-ui;margin-left:6px}
.shop-row p{font:500 12px/1.5 system-ui;color:#9fb0d0;margin:2px 0}
.shop-row .shop-next{color:#6fd6a0}
.shop-buy{flex:0 0 auto;border:1px solid var(--cyan);background:#0a2130;color:var(--cyan);padding:10px 16px;cursor:pointer;font:800 12px system-ui;white-space:nowrap}
.shop-buy:disabled{opacity:.4;cursor:not-allowed;border-color:#3a4966;color:#7285a8}
.stats{display:flex;gap:1px;margin:18px 0;background:#1c2740}
.stats div{flex:1;padding:14px;background:#0a0f1c}
.stats b{display:block;font-size:22px}
.stats span{font:700 10px system-ui;color:#7285a8;text-transform:uppercase}
.site-links{display:flex;gap:18px;margin-top:14px}
.site-links a{color:#7c8fb2;font:700 11px system-ui;text-underline-offset:4px}
.site-links a:hover{color:var(--cyan)}
.over-panel{width:min(570px,90vw);max-height:94vh;overflow:auto;padding:38px;background:var(--panel);border:1px solid #263250;box-shadow:14px 14px 0 #0008}
.over-panel h2{font-size:clamp(28px,4.5vw,48px);margin:10px 0}
.submit-row{display:flex;gap:8px;margin:14px 0}
.submit-row input{min-width:0;flex:1;border:1px solid #263250;background:#040814;color:var(--paper);padding:11px 12px;font:700 13px system-ui}
.submit-row button{border:1px solid var(--cyan);background:#0a2130;color:var(--cyan);padding:10px 14px;cursor:pointer;font:800 12px system-ui}
.submit-status{min-height:18px;color:#93a5c8;font:700 11px system-ui}
.submit-status a{color:var(--cyan)}
.board-card{margin:10px 0 18px;border:1px solid #1c2740;background:#050914;padding:12px}
.board-title{color:#6478a0;font:800 10px system-ui;letter-spacing:.16em;margin-bottom:7px}
.board-row{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:6px 4px;border-top:1px solid #141c30;font:700 11px system-ui}
.board-rank{color:var(--gold)}
.board-meta,.board-empty{color:#6478a0;font-size:9px}
.board-score{color:var(--cyan)}

#toast{position:absolute;z-index:20;left:50%;top:18%;transform:translate(-50%,-12px);opacity:0;color:#030814;background:var(--gold);padding:9px 16px;font:900 12px system-ui;letter-spacing:.08em;pointer-events:none;transition:.25s;border-radius:2px}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){
  #hud{display:flex;flex-wrap:wrap;padding:8px 10px;gap:6px 10px}
  .brand{display:none}
  .shield-meter,.core-meter{flex:1 1 42%}
  .shield-meter span,.core-meter span{font-size:8px}
  .mid-stats{order:3;flex:1 1 100%;justify-content:flex-start;gap:12px}
  .mid-stats b{font-size:15px}
  .hud-actions{order:4;margin-left:auto}
  #boss-bar{top:104px;width:92vw}
  #boss-bar span{font-size:11px}
  .shop-row{flex-direction:column;align-items:flex-start}
  .shop-buy{width:100%}
  .menu-art{width:100%;opacity:.5}
  .menu-panel{margin:0;width:92vw;padding:24px 20px}
  .menu-panel h1{font-size:46px}
  .how{margin:20px 0 12px}
  .how div{padding:8px 5px}
  .upgrade-grid{grid-template-columns:1fr}
  .upgrade-card{min-height:auto;flex-direction:row;align-items:center;gap:12px}
  .upgrade-card p{display:none}
  .upgrade-panel{padding:18px}
  .over-panel{padding:26px}
  .score b{font-size:48px}
}