/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body, html { width:100%; height:100%; overflow:hidden; font-family:"Poppins",sans-serif; }

/* Lobby */
.lobby-container {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  text-align:center;
}
.lobby-container h1 { font-size:2.5rem; color:#0ff; text-shadow:0 0 10px cyan; margin-bottom:20px; }
.lobby-container p { margin-bottom:30px; font-size:1.1rem; color:#ccc; }
.btn {
  display:block; width:200px; margin:10px auto; padding:12px 20px;
  border:none; border-radius:12px; font-size:1.2rem;
  cursor:pointer; transition:.3s; color:white;
}
.start-btn { background:#10b981; }
.start-btn:hover { background:#059669; transform:scale(1.05); }
.about-btn { background:#f59e0b; }
.about-btn:hover { background:#d97706; transform:scale(1.05); }

/* Game Canvas */
#game { background:#111; display:block; margin:0 auto; }

/* HUD HP Bars */
#hud {
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:20px; z-index:5;
}
.hp-container { text-align:center; color:white; font-size:14px; }
.hp-bar {
  width:150px; height:15px; background:#333; border-radius:10px; overflow:hidden;
}
.hp-fill {
  height:100%; background:lime; width:100%; transition:width 0.2s;
}
.enemy-hp .hp-fill { background:red; }

/* Mini Map */
#minimap {
  position:fixed; top:10px; right:10px;
  background:#1f2937; border:2px solid #fff; border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,0.6);
}

/* Fire Button */
#fireBtn {
  position:fixed; bottom:40px; right:40px;
  padding:20px 30px; border:none; border-radius:50%;
  background:#ef4444; color:#fff; font-size:1.5rem;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
  cursor:pointer; z-index:5;
}
#fireBtn:active { transform:scale(0.9); }

/* Game Over Screen */
#gameOverScreen {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  color:white; display:none; justify-content:center; align-items:center;
  flex-direction:column; gap:20px; z-index:10;
}
#gameOverMessage { font-size:2.5rem; margin-bottom:20px; }
#restartBtn {
  padding:12px 20px; background:#10b981; border:none; border-radius:10px;
  font-size:1.2rem; cursor:pointer; transition:0.3s;
}
#restartBtn:hover { background:#059669; transform:scale(1.05); }