:root{
  --bg:#0e0f12;
  --panel:#1a1c22;
  --accent:#4cc9f0;
  --accent-2:#f72585;
  --text:#e6e6e6;
  --success:#7bd389;
  --warn:#f2b705;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
}
#app{position:relative; width:100%; height:100vh; overflow:hidden}

.menu{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.4));
  z-index: 30;
}
.menu h1{margin:0 0 12px 0; font-size:32px; color:var(--accent)}
.menu h2{margin:0 0 12px 0; font-size:24px; color:var(--accent)}
.menu-field{display:flex; flex-direction:column; gap:6px; width:min(420px, 90vw)}
.menu-field input[type="text"], .menu-field input[type="range"], .menu-field select{
  padding:10px; border-radius:8px; border:1px solid #333; background:var(--panel); color:var(--text);
}
.menu button{
  padding:10px 16px; border-radius:8px; border:1px solid #333; background:var(--accent); color:#001018;
  cursor:pointer; width:min(260px, 80vw); font-weight:600;
}
.menu button:hover{filter:brightness(1.05)}
.menu-actions{display:flex; gap:12px}
.hidden{display:none !important}
.visible{display:flex}
.highscore{margin-top:12px}

#game-canvas{position:absolute; inset:0; width:100%; height:100%; z-index: 10;}

#hud{position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; z-index:20; pointer-events:none}
#health-bar{width:180px; height:14px; border:1px solid #333; border-radius:8px; background:#111}
#health-fill{display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--success), #3aa362); border-radius:8px}
#score{font-weight:700}
#reload{color:var(--warn); font-weight:700}
.hud-right > *{pointer-events:auto}
#skill-info{font-weight:700}
#skill-select{display:flex; gap:8px}
#skill-select button, #special-btn{padding:8px 12px; border-radius:8px; border:1px solid #333; background:var(--accent); color:#001018; cursor:pointer; font-weight:600}
#special-btn{margin-left:8px}

.joystick{position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); z-index:25}
.joystick .stick{position:absolute; width:56px; height:56px; left:32px; top:32px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24)}
#joystick-left{left:16px; bottom:16px}
#joystick-right{right:16px; bottom:16px}

#overlay-message{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(0,0,0,.6); padding:16px 20px; border-radius:10px; border:1px solid #333; z-index: 40; pointer-events: auto}
#overlay-content{display:flex; flex-direction:column; align-items:center; gap:12px}
#overlay-message button{padding:10px 16px; border-radius:8px; border:1px solid #333; background:var(--accent); color:#001018; cursor:pointer; font-weight:600}

@media (max-width: 800px){
  .menu h1{font-size:24px}
  .menu h2{font-size:20px}
  #health-bar{width:140px}
  .joystick{width:100px; height:100px}
  .joystick .stick{width:48px; height:48px; left:26px; top:26px}
}

/* Button and HUD interaction fixes */
#hud{z-index:26}
.menu button{touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent}
#skill-select button, #special-btn{touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent}