*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0a0d14;color:#eaf2ff;
  font-family:"Segoe UI",system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#app{position:relative;width:100vw;height:100vh}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}

/* title */
#title{align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;
  background:radial-gradient(ellipse at 50% 30%,#16203a,#0a0d14 70%)}
.logo{font-weight:900;font-size:clamp(46px,12vw,120px);letter-spacing:.04em;line-height:.95;
  background:linear-gradient(120deg,#39ff14,#2bd0ff,#ffd23c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(43,208,255,.4))}
.logo span{display:block;color:#ff7a1a;-webkit-text-fill-color:#ff7a1a;filter:drop-shadow(0 0 18px rgba(255,122,26,.5))}
.tag{color:#9fb4d6;font-size:clamp(13px,3vw,17px);letter-spacing:.02em}
.how{max-width:600px;color:#b8c6e0;line-height:1.8;font-size:14px}
.how b{color:#ffd23c}
.foot{color:#5b6a86;letter-spacing:.2em;font-size:12px;text-transform:uppercase;margin-top:6px}

.btn{cursor:pointer;border:1px solid #2bd0ff;background:rgba(43,208,255,.12);color:#eaf2ff;border-radius:10px;
  padding:11px 20px;font-size:14px;font-weight:700;letter-spacing:.04em;transition:.12s}
.btn:hover{background:rgba(43,208,255,.26);transform:translateY(-2px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.big{font-size:20px;padding:16px 44px;border-color:#39ff14;background:rgba(57,255,20,.14);color:#dfffe0}
.btn.sm{padding:7px 12px;font-size:13px}

/* game */
#game{flex-direction:column}
#hud{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#0d1220;border-bottom:1px solid #1c2740;flex-wrap:wrap}
#hud .stat{font-size:14px;color:#9fb4d6}
#hud .stat b{color:#fff;font-size:16px}
.spdrow{display:flex;gap:4px;margin-left:auto}
.spd{cursor:pointer;border:1px solid #2a3550;background:#141b2c;color:#cdd9ee;border-radius:8px;width:34px;height:32px;font-size:13px}
.spd.on{border-color:#ffd23c;color:#ffd23c;box-shadow:0 0 8px rgba(255,210,60,.4)}
.btn.start{background:rgba(255,122,26,.16);border-color:#ff7a1a;color:#ffd9b3}
.btn.start.ready{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 16px rgba(255,122,26,.7);transform:scale(1.04)}}

#stage{position:relative;flex:1;overflow:hidden;background:#080b12}
#cv{position:absolute;inset:0;image-rendering:auto}

#palette{display:flex;gap:8px;padding:8px 10px;background:#0d1220;border-top:1px solid #1c2740;overflow-x:auto;justify-content:center}
.tw{flex:0 0 auto;cursor:pointer;border:2px solid #233152;background:#121a2c;border-radius:12px;padding:6px 4px;width:76px;
  display:flex;flex-direction:column;align-items:center;gap:1px;transition:.12s;color:#cdd9ee}
.tw:hover{transform:translateY(-3px);border-color:#2bd0ff}
.tw.on{border-color:#39ff14;box-shadow:0 0 12px rgba(57,255,20,.4);background:#16241c}
.tw.poor{opacity:.5}
.tw .ti{font-size:26px;line-height:1}
.tw .tc{font-size:11px;color:#ffd23c;font-weight:700}
.tw .tn{font-size:10px;color:#8fa3c4;letter-spacing:.02em}

/* tower popup */
#towerPop{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:none;z-index:6;
  background:rgba(13,18,32,.96);border:1px solid #2bd0ff;border-radius:12px;padding:10px 12px;min-width:240px;box-shadow:0 8px 30px #000a}
#towerPop.show{display:block;animation:fade .15s}
.pophead{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.pophead span:first-child{font-size:22px}
.pophead #popName{flex:1}
.pophead button{background:none;border:none;color:#8fa3c4;cursor:pointer;font-size:14px}
#popStats{color:#b8c6e0;font-size:12px;margin:6px 0 8px}
.poprow{display:flex;gap:8px}
.poprow .btn{flex:1}

#combo{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;display:none;
  font-weight:900;font-size:22px;color:#ff7a1a;text-shadow:0 0 12px rgba(255,122,26,.8);letter-spacing:.05em}
#combo.show{display:block;animation:pulse .4s}
#waveBanner{position:absolute;top:40%;left:50%;transform:translateX(-50%);z-index:5;
  font-weight:900;font-size:clamp(22px,5vw,40px);letter-spacing:.04em;text-shadow:0 0 18px #000;opacity:0;pointer-events:none}
#waveBanner.show{animation:banner 1.8s ease-out}
@keyframes banner{0%{opacity:0;transform:translateX(-50%) scale(.6)}15%{opacity:1;transform:translateX(-50%) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1)}}
#redflash{position:absolute;inset:0;z-index:4;background:radial-gradient(ellipse at center,transparent 40%,rgba(255,43,70,.5));opacity:0;pointer-events:none}
#redflash.on{animation:rf .4s}
@keyframes rf{0%{opacity:1}100%{opacity:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* modal + overlays */
.modal,.overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(6,9,16,.82);backdrop-filter:blur(3px)}
.modal.show,.overlay.show{display:flex;animation:fade .2s}
.modbox,.ovbox{background:#0e1424;border:1px solid #2bd0ff;border-radius:16px;padding:26px 30px;text-align:center;
  display:flex;flex-direction:column;gap:16px;min-width:300px}
.modbox h3{letter-spacing:.18em;color:#2bd0ff}
.modbox label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700}
.modbox input[type=range]{flex:1;accent-color:#ff7a1a}
.ovbox h2{font-size:42px;letter-spacing:.06em}
.ovbox.win h2{color:#39ff14;text-shadow:0 0 20px rgba(57,255,20,.5)}
.ovbox.lose h2{color:#ff2b46;text-shadow:0 0 20px rgba(255,43,70,.5)}
.ovbox #winStats,.ovbox #loseStats{color:#c8d6f0;line-height:1.7}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}