/* ===========================
   Galaxy Shooter — CSS (wider)
   =========================== */

:root{
  --gs-accent:#00ccff;
  --gs-accent-hover:#00aaff;
  --gs-bg-deep:#050a18;
  --gs-text:#fff;
}

/* === Container with space background === */
#galaxy-shooter-container{
  position:relative;
  width:100%;
  /* was 700px — bump it up, but stay responsive */
  max-width:clamp(360px, 92vw, 1200px);
  margin:40px auto;

  aspect-ratio:16/9;
  overflow:hidden;

  background-color:var(--gs-bg-deep);
  background-image:
    radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.55) 100%),
    url("../assets/bg-space.webp");
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;

  border:2px solid var(--gs-accent);
  border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
}

@supports not (aspect-ratio: 1){
  #galaxy-shooter-container::before{
    content:"";
    display:block;
    padding-top:56.25%;
  }
}

/* === Canvas (transparent so the bg image shows through) === */
#galaxy-shooter-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  background:transparent !important;
  border:0;
  border-radius:10px;
}

/* === Start Screen === */
#start-screen{
  position:absolute;
  inset:0;
  background:rgba(0,0,20,0.90);
  color:var(--gs-accent);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:999;
  text-align:center;
  padding:20px;
  border-radius:10px;
}

#start-screen h1{ font-size:clamp(24px, 3vw, 36px); margin-bottom:20px; }

#player-name{
  padding:8px;
  font-size:16px;
  width:80%;
  max-width:360px;
}

#life-options{ margin:10px 0; font-size:18px; }
#life-options label{ margin:0 10px; }

#start-game-btn,
#view-leaderboard-btn,
#close-leaderboard-btn,
#restart-button{
  margin-top:10px;
  padding:10px 20px;
  font-size:16px;
  background-color:var(--gs-accent);
  border:none;
  color:#000;
  cursor:pointer;
  border-radius:6px;
}
#start-game-btn:hover,
#view-leaderboard-btn:hover,
#restart-button:hover,
#close-leaderboard-btn:hover{
  background-color:var(--gs-accent-hover);
}

/* === Game Over Text === */
#game-over-text{
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(22px, 2.4vw, 32px);
  color:#ff4444;
  text-shadow:0 0 8px #000;
  font-weight:bold;
  z-index:100;
  pointer-events:none;
}

/* === Leaderboard === */
#leaderboard{
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:700px;
  background:rgba(0,0,20,0.95);
  color:var(--gs-text);
  padding:20px;
  border-radius:10px;
  z-index:1000;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
#leaderboard h2{ margin-bottom:10px; }
#leaderboard-content{ max-height:300px; overflow-y:auto; margin-bottom:15px; }