/* ---------- Asteroids Page Styles ---------- */
:root {
  /* Define theme colors for game UI */
  --border-title-color: magenta;
  --text-light:  #fff;
}

body, html {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Press Start 2P', monospace;
}
#game {
    position: relative;
    /* make the game container fill the viewport */
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}
#game canvas {
    width: 100%;
    height: 100%;
    background: #111;
    display: block;
}
#hud {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2rem;
    color: var(--text-light);
    pointer-events: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Ammo bars for weapons */
#ammoHud {
    /* Positioned by flex layout in #hud */
    z-index: 10;
}
.ammo-bar {
    width: 200px;
    height: 8px;
    background: #444;
    margin: 4px 0;
    border: 1px solid var(--text-light);
    box-sizing: border-box;
}
.ammo-fill {
    width: 0;
    height: 100%;
}
.ammo-bar.missile .ammo-fill { background: #fff; }
.ammo-bar.machine .ammo-fill { background: #0ff; }
.ammo-bar.power   .ammo-fill { background: #00f; }
#shieldHud {
  /* Positioned by flex layout in #hud */
  z-index: 10;
}
.shield-bar {
  width: 200px;
  height: 8px;
  background: #444;
  margin: 4px 0;
  border: 1px solid var(--text-light);
  box-sizing: border-box;
}
.shield-fill {
  width: 0;
  height: 100%;
  background: #0f0;
}
/* HUD bar labels */
.hud-item {
  display: flex;
  align-items: center;
  margin: 2px 0;
}
.hud-label {
  display: inline-block;
  width: 88px; /* increased by 10% to give more space */
  color: var(--text-light);
  font-size: 0.8rem;
  margin-right: 7px; /* increased gap to bar */
}
#startScreen {
    position: absolute;
    /* cover full container: explicit for broad browser support */
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-light);
    font-family: 'Press Start 2P', monospace;
    text-align: center;
    z-index: 20;
}
/* Pause screen overlay */
#pauseScreen {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-light);
    font-family: 'Press Start 2P', monospace;
    text-align: center;
    z-index: 20;
}
#pauseScreen h1 {
    margin: 0 0 10px;
    font-size: 4rem;
    color: var(--border-title-color);
    letter-spacing: 4px;
    text-shadow:
        0 0 5px var(--border-title-color),
        0 0 7px var(--border-title-color),
        0 0 25px var(--border-title-color),
        0 0 90px var(--border-title-color);
}
#pauseScreen p {
    max-width: 600px;
    line-height: 1.4;
    text-align: left;
}
#startScreen h1 {
    margin: 0 0 10px;
    font-size: 4rem;
    color: var(--border-title-color);
    letter-spacing: 4px;
    text-shadow:
        0 0 5px var(--border-title-color),
        0 0 7px var(--border-title-color),
        0 0 25px var(--border-title-color),
        0 0 90px var(--border-title-color);
}
#startScreen p {
    max-width: 600px;
    line-height: 1.4;
    text-align:left;
}
#startScreen #titleImage {
    width: 80%;
    max-width: 400px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}