*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#02030a;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif;color:#eaf6ff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
#game-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%,#0a1430 0%,#02030a 70%);}
canvas{display:block;image-rendering:auto;box-shadow:0 0 60px rgba(40,120,255,0.25);border-radius:4px;touch-action:none;}

/* HUD */
#hud{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,calc(100vh*0.6667));max-width:480px;display:flex;justify-content:space-between;padding:10px 14px;pointer-events:none;font-family:'Courier New',monospace;}
.hud-col{display:flex;flex-direction:column;gap:1px;}
.hud-col.center{align-items:center;}
.hud-col.right{align-items:flex-end;}
.hud-label{font-size:9px;letter-spacing:2px;color:#5aa9ff;opacity:.8;}
.hud-label.small{margin-top:4px;}
#score-display{font-size:20px;font-weight:700;color:#bfefff;text-shadow:0 0 10px rgba(90,200,255,.7);}
#stage-display{font-size:20px;font-weight:700;color:#7dffc0;text-shadow:0 0 10px rgba(80,255,170,.7);}
.small-val{font-size:12px;color:#8fc7ff;}
#dual-badge{margin-top:6px;font-size:9px;letter-spacing:1px;color:#0a1430;background:#6ffcff;padding:2px 6px;border-radius:8px;box-shadow:0 0 12px rgba(90,255,255,.7);font-weight:700;}
#sound-toggle{font-size:18px;pointer-events:auto;cursor:pointer;opacity:.85;}
#lives-display{display:flex;gap:3px;margin-top:8px;}
.lifeicon{color:#2ad0ff;text-shadow:0 0 8px #2ad0ff;font-size:15px;}
.hidden{display:none!important;}

/* Screens */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,6,18,.82);backdrop-filter:blur(3px);z-index:10;padding:20px;}
.screen.active{display:flex;}
.screen-inner{text-align:center;max-width:420px;width:100%;animation:pop .35s ease;}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.title-glow{font-family:'Arial Black',sans-serif;font-size:clamp(38px,11vw,66px);font-weight:900;letter-spacing:2px;line-height:.92;color:#bfefff;text-shadow:0 0 24px rgba(90,200,255,.8),0 0 60px rgba(50,120,255,.5);}
.title-glow span{display:block;color:#7dffc0;text-shadow:0 0 24px rgba(90,255,170,.8);}
.subtitle{margin-top:8px;font-size:13px;letter-spacing:6px;color:#6aa8ff;}
.menu{margin:34px 0 22px;display:flex;flex-direction:column;gap:12px;align-items:center;}
.btn{cursor:pointer;pointer-events:auto;font-weight:700;letter-spacing:1px;font-size:14px;padding:13px 26px;border-radius:12px;color:#02030a;background:linear-gradient(180deg,#7ff,#22a8ff);box-shadow:0 0 24px rgba(60,180,255,.5);transition:transform .12s,box-shadow .12s;min-width:230px;}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(90,220,255,.8);}
.btn.ghost{background:transparent;color:#8fc7ff;border:1px solid rgba(120,190,255,.35);box-shadow:none;}
.btn.ghost:hover{border-color:#7ff;color:#bfefff;}
.credits{font-family:'Courier New',monospace;font-size:11px;color:#5f86bb;line-height:1.8;}
.pause-title,.gameover-title{font-family:'Arial Black',sans-serif;font-size:40px;font-weight:900;letter-spacing:2px;margin-bottom:26px;}
.pause-title{color:#7ff;text-shadow:0 0 20px rgba(90,220,255,.7);}
.gameover-title{color:#ff5a7a;text-shadow:0 0 20px rgba(255,90,120,.7);}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;max-width:300px;margin:0 auto 26px;}
.stat{display:flex;justify-content:space-between;padding:8px 14px;background:rgba(30,60,120,.25);border:1px solid rgba(90,160,255,.2);border-radius:10px;font-family:'Courier New',monospace;font-size:13px;}
.stat span:first-child{color:#6aa8ff;}
.stat span:last-child{color:#bfefff;font-weight:700;}
.howto h2{font-family:'Arial Black',sans-serif;color:#7ff;letter-spacing:2px;margin-bottom:18px;font-size:24px;}
.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;text-align:left;}
.howgrid h3{color:#7dffc0;font-size:12px;letter-spacing:1px;margin-bottom:5px;}
.howgrid p{color:#a9c7e8;font-size:12px;line-height:1.5;}
@media (max-width:430px){.howgrid{grid-template-columns:1fr;}}