/* ======================= EECS 493 Assignment 3 Responsive Final (Scaled + White Background) ======================= */

/* Base font and layout */
body,
button {
  font-family: VT323;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

button {
  font-size: 2vw;
}

/* Main container */
.outer-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 1280px;
  margin: 0 auto;
  background: #fff; /* ✅ white background */
  border: 5px solid gainsboro;
  position: relative;
  overflow: hidden;
}

/* Game window */
.game-window {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: top left;
  scale: calc(min(100vw / 1280, 100vh / 720));
  background: #fff !important; /* ✅ ensure play area is white */
}

/* ---------------- ASTEROIDS + ITEMS ---------------- */
.asteroidSection,
.itemsSection {
  position: absolute;
  height: 720px;
  width: 1280px;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Universal scaling for all in-game objects */
.curAsteroid,
.curPerson,
.curShield,
.curPortal {
  position: absolute;
  height: 5vw; /* ✅ scaled size */
  width: 5vw;
  z-index: 9;
}

.curAsteroid img,
.curPerson img,
.curShield img,
.curPortal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ---------------- SCOREBOARD ---------------- */
#scoreboard {
  position: absolute;
  top: 2vw;
  right: 5vw;
  text-align: center;
  display: none;
  z-index: 20;
  transform-origin: top right;
  transform: scale(1); /* ✅ natural scaling */
}

#scoreboard.open {
  display: block;
}

#scoreboard .score-label {
  font-size: 3vw;
  line-height: 1.0;
}

#scoreboard .score-value {
  font-size: 2.5vw;
  color: #1a33ff;
  line-height: 1.0;
  margin-bottom: 0.5vw;
}

/* ---------------- PAUSE BUTTON ---------------- */
#btn-pause {
  position: absolute;
  top: 1vw;
  right: 1vw;
  width: 3vw;
  height: 3vw;
  border: none;
  background: transparent;
  background-image: url("../images/pause.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  z-index: 21;
  box-shadow: none !important;
}

/* ---------------- GET READY SPLASH ---------------- */
#splash-getready {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  z-index: 15;
}

#splash-getready.open {
  display: flex;
}

#getready-title {
  font-size: 5vw;
  color: #000;
  margin: 0;
}

#getready-help {
  font-size: 3vw;
  color: #000;
  margin: 0;
}

#getready-keys {
  max-width: 15vw;
  height: auto;
}

/* ---------------- PAUSE MENU ---------------- */
#pause-menu {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  z-index: 30;
}

#pause-menu.open {
  display: flex;
}

#pause-card {
  width: 40vw;
  background: #e3e3e3;
  padding: 2vw;
  text-align: center;
}

#pause-title {
  font-size: 4vw;
  margin: 0 0 1vw;
}

#pause-rocket {
  height: 10vw; /* ✅ scaled rocket */
  width: auto;
  display: block;
  margin: 1vw auto 1.5vw;
}

#btn-resume {
  width: 25vw;
  height: 6vw;
  margin: 0 auto 1vw;
  font-size: 2vw;
}

#pause-actions {
  display: flex;
  gap: 1vw;
  justify-content: center;
}

#btn-restart,
#btn-exit {
  width: 12vw;
  height: 5vw;
  font-size: 1.8vw;
}

/* ---------------- RESTART CONFIRM ---------------- */
#restart-confirm {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  z-index: 40;
}

#restart-confirm.open {
  display: flex;
}

#restart-card {
  width: 45vw;
  background: #e3e3e3;
  text-align: center;
  padding: 2vw;
}

#restart-title {
  font-size: 3vw;
  margin: 0 0 2vw;
}

#restart-buttons {
  display: flex;
  justify-content: center;
  gap: 2vw;
}

#btn-restart-yes,
#btn-restart-no {
  width: 10vw;
  height: 4vw;
  font-size: 1.8vw;
}

/* ---------------- RESTARTING SPLASH ---------------- */
#restarting-splash {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  z-index: 35;
}

#restarting-splash.open {
  display: flex;
}

#restarting-splash h2 {
  color: #fff;
  font-size: 3vw;
  letter-spacing: 1px;
  margin: 0;
}

/* ---------------- GAME OVER ---------------- */
#gameover {
  background: url("../images/frontpage_background.jpg") center/cover no-repeat;
}

#gameover #gameover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10vw;
  background-color: darkslateblue;
  border-bottom: 6px groove;
  padding: 0 2vw;
}

#gameover #gameover-header h1 {
  font-size: 7vw;
  color: white;
  margin: 0;
  text-align: center;
}

#gameover .header-asteroid {
  height: 100%;
  width: auto;
}

#gameover-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  background: #4b448c;
  color: #fff;
  text-align: center;
  padding: 2vw;
}

#gameover-card h2 {
  font-size: 4vw;
  margin: 0 0 1vw;
}

#gameover-card p {
  font-size: 2vw;
  margin: 0.5vw 0;
}

#final-score-wrap {
  font-size: 2.2vw;
}

#btn-start-over {
  width: 18vw;
  height: 6vw;
  margin-top: 1vw;
  font-size: 2vw;
}