* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:none; }
html,body{ width:100%; height:100%; overflow:hidden; background:#05050a; color:#e8f6ff; font-family:'Segoe UI',system-ui,sans-serif; }
#gameWrap{ position:relative; width:100%; height:100%; }
canvas{ display:block; width:100%; height:100%; background:radial-gradient(circle at center,#0c1020 0%,#020205 100%); }
#ui{ position:absolute; inset:0; pointer-events:none; }
.no-select{ user-select:none; -webkit-user-select:none; }
#topBar{ display:flex; justify-content:space-between; padding:12px 16px; text-shadow:0 0 12px rgba(0,243,255,0.5); }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat.center{ align-items:center; }
.stat.right{ align-items:flex-end; }
.label{ font-size:10px; letter-spacing:2px; opacity:0.75; }
#scoreVal,#waveVal,#comboVal{ font-size:24px; font-weight:700; }
#comboVal{ color:#ffdf4f; }
.bar{ position:absolute; left:16px; right:16px; height:10px; border-radius:5px; background:rgba(255,255,255,0.08); overflow:hidden; border:1px solid rgba(255,255,255,0.12); }
.barLabel{ position:absolute; top:-15px; left:0; font-size:9px; letter-spacing:1.5px; opacity:0.7; }
#healthWrap{ bottom:40px; }
#energyWrap{ bottom:18px; }
.fill{ height:100%; width:100%; transform-origin:left; }
#healthBar{ background:linear-gradient(90deg,#ff3860,#ff7e38); box-shadow:0 0 12px rgba(255,56,96,0.5); }
#energyBar{ background:linear-gradient(90deg,#00c6ff,#00f3ff,#aaffff); box-shadow:0 0 14px rgba(0,243,255,0.55); }
#centerText{ position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); font-size:42px; font-weight:800; text-align:center; opacity:0; transition:opacity 0.25s; pointer-events:none; }
#startScreen,#gameOverScreen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(5,5,10,0.82); padding:24px; text-align:center; }
.hidden{ display:none !important; }
#logo,#logo2{ width:120px; height:120px; filter:drop-shadow(0 0 18px rgba(0,243,255,0.55)); }
h1{ font-size:42px; letter-spacing:4px; }
h2{ font-size:30px; letter-spacing:3px; color:#ff3860; }
.tagline{ max-width:480px; font-size:16px; opacity:0.85; line-height:1.45; }
.controls{ display:flex; flex-direction:column; gap:8px; font-size:13px; opacity:0.8; max-width:460px; }
button{ padding:16px 42px; font-size:16px; font-weight:700; letter-spacing:2px; border:1px solid rgba(0,243,255,0.45); background:rgba(0,243,255,0.08); color:#e8f6ff; border-radius:8px; cursor:pointer; box-shadow:0 0 20px rgba(0,243,255,0.15); transition:transform 0.1s,background 0.2s; }
button:hover,button:active{ background:rgba(0,243,255,0.18); transform:scale(1.04); }
#finalScore{ font-size:48px; font-weight:700; color:#00f3ff; }
@media (max-width:640px){
  h1{ font-size:30px; }
  h2{ font-size:24px; }
  #centerText{ font-size:28px; }
  .tagline{ font-size:14px; }
  button{ padding:14px 32px; font-size:14px; }
  #scoreVal,#waveVal,#comboVal{ font-size:18px; }
}