html,
body {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background: #000;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/*                              STAGE                                 */
/* ------------------------------------------------------------------ */

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/*                       SPACE BACKGROUND                             */
/* ------------------------------------------------------------------ */

#space-bg {
  position: absolute;
  /* Oversized so we can drift it for parallax */
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background: url('../images/spaceRace/Background.png') center center / cover
    no-repeat;
}

/* ------------------------------------------------------------------ */
/*                       CELESTIAL BODIES                             */
/* ------------------------------------------------------------------ */

.celestial {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Mars - small & distant, top-left */
#mars {
  width: min(12vw, 12vh);
  top: 8%;
  left: 15%;
  filter: brightness(0.7) blur(1.5px)
    drop-shadow(0 0 20px rgba(255, 150, 50, 0.3));
}

/* Earth - bottom-right corner, behind ships */
#earth {
  width: 80vw;
  max-width: 800px;
  bottom: -45%;
  right: -20%;
  filter: brightness(0.65) blur(1px);
  z-index: 1;
}

/* Moon - proportional, near Earth */
#moon {
  width: 14vw;
  max-width: 140px;
  bottom: 28%;
  right: 25%;
  filter: brightness(0.75) blur(0.4px);
}

/* ------------------------------------------------------------------ */
/*                         RACE LANES                                 */
/* ------------------------------------------------------------------ */

#race-lanes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.ship-wrapper {
  position: absolute;
  will-change: transform;
}

.ship-wrapper img {
  display: block;
  height: 12vh;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}

#you-label {
  position: absolute;
  top: 50%;
  right: 105%;
  transform: translateY(-50%);
  font-size: 2.5vmin;
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 0 10px rgba(0, 200, 255, 0.8),
    0 0 20px rgba(0, 200, 255, 0.4);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 2px;
}

/* Correct answer: rocket thrust flame */
.ship-thrust {
  position: absolute;
  right: 80%;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  width: 200%;
  height: 20%;
  border-radius: 50% 0 0 50%;
  background: linear-gradient(
    to left,
    #ff2200,
    #ff6600,
    #ffaa00,
    #ffdd44,
    transparent
  );
  opacity: 0;
  pointer-events: none;
  filter: blur(3px);
}

/* Speed streaks container */
.speed-streaks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.speed-streak {
  position: absolute;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
  opacity: 0;
  pointer-events: none;
}

/* Incorrect answer: subtle red flash */
.ship-flash {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.4), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/*                         LEADERBOARD                                */
/* ------------------------------------------------------------------ */

#leaderboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  pointer-events: none;
  display: none;
  padding: 10px 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.9);
}

#leaderboard.active {
  display: flex;
}

.lb-slot {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 6px;
  box-sizing: border-box;
}

.lb-label {
  font-size: 1.5vmin;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

#lb-1st .lb-label {
  color: rgba(255, 215, 0, 0.85);
}
#lb-2nd .lb-label {
  color: rgba(192, 192, 192, 0.85);
}
#lb-3rd .lb-label {
  color: rgba(205, 150, 80, 0.85);
}

.lb-ship {
  height: 22px;
  width: auto;
}

.lb-name {
  font-size: 1.75vmin;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  font-weight: 700;
}

.lb-miles {
  font-size: 2.75vmin;
  color: #fff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.lb-miles span {
  font-weight: 300;
  font-size: 1.5vmin;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/*                       RESULTS OVERLAY                              */
/* ------------------------------------------------------------------ */

#results-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
}

.results-title {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 4vmin;
}

.results-time {
  font-size: 24px;
  color: #fff;
  margin-bottom: 4vmin;
  display: flex;
  column-gap: 2vmin;
}

.new-record {
  color: #ffda79;
  font-weight: 700;
}

.results-best {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 20px;
}

.results-time:last-child {
  margin-bottom: 20px;
}

.results-podium {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 240px;
}

.results-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  gap: 20px;
  padding: 2vmin;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}

.results-row.podium-1 {
  background: rgba(255, 215, 0, 0.15);
}

.results-row.podium-2 {
  background: rgba(192, 192, 192, 0.12);
}

.results-row.podium-3 {
  background: rgba(205, 127, 50, 0.1);
}

.results-pos {
  font-size: 3vmin;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  min-width: 30px;
  text-align: center;
}

.results-ship {
  height: 10vmin;
  width: auto;
}

.results-name {
  font-size: 3vmin;
  color: rgba(255, 255, 255, 0.9);
}

.results-buttons {
  display: flex;
  gap: 2vmin;
  margin-top: 4vmin;
}

.results-continue {
  margin-top: 4vmin;
  pointer-events: auto;
}

.results-buttons .results-continue {
  margin-top: 0;
}

/* ------------------------------------------------------------------ */
/*                        START / FINISH LINES                        */
/* ------------------------------------------------------------------ */

#start-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #00ccff,
    #ffffff,
    #00ccff,
    #ffffff,
    #00ccff
  );
  box-shadow:
    0 0 12px 4px rgba(0, 200, 255, 0.6),
    0 0 30px 8px rgba(0, 200, 255, 0.3),
    0 0 60px 16px rgba(0, 200, 255, 0.15);
  filter: blur(1px);
  border-radius: 2px;
}

#finish-line {
  position: absolute;
  top: 0;
  right: -6px;
  width: 4px;
  height: 100%;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    #00ccff,
    #ffffff,
    #00ccff,
    #ffffff,
    #00ccff
  );
  box-shadow:
    0 0 12px 4px rgba(0, 200, 255, 0.6),
    0 0 30px 8px rgba(0, 200, 255, 0.3),
    0 0 60px 16px rgba(0, 200, 255, 0.15);
  filter: blur(1px);
  border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/*                         STAR FIELD                                 */
/* ------------------------------------------------------------------ */

#star-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ------------------------------------------------------------------ */
/*                         START SCREEN                               */
/* ------------------------------------------------------------------ */

#start-screen {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

#start-title {
  font-size: 10vmin;
  font-weight: 900;
  color: #fff;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-shadow:
    0 0 20px rgba(0, 200, 255, 0.6),
    0 0 40px rgba(0, 200, 255, 0.3);
}

#start-single-player,
#start-multi-player,
#results-continue,
#results-rematch,
#results-new-game {
  padding: 2vmin 4vmin;
  min-width: 25vmin;
}

#start-multi-player {
  background-color: var(--blue-colour);
}

/* ------------------------------------------------------------------ */
/*                          COUNTDOWN                                 */
/* ------------------------------------------------------------------ */

#countdown {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 25;
  font-size: 20vmin;
  text-align: center;
  width: 100%;
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 0 30px rgba(0, 200, 255, 0.8),
    0 0 60px rgba(0, 200, 255, 0.4);
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------------ */
/*                      QUESTION MODULE                               */
/* ------------------------------------------------------------------ */

#question-module-container {
  position: absolute;
  inset: 0;
  z-index: 22;
  scale: 0.9;
}

/* ------------------------------------------------------------------ */
/*                      SHIP NAME LABELS                              */
/* ------------------------------------------------------------------ */

.ship-name-label {
  position: absolute;
  /* top and left set by JS to match ship position */
  transform: translate(calc(-100% - 1vmin), -50%);
  font-size: 1.75vmin;
  font-weight: 500;
  color: #fff;
  text-shadow:
    0 0 8px rgba(0, 200, 255, 0.6),
    0 0 16px rgba(0, 200, 255, 0.3);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* ------------------------------------------------------------------ */
/*                      TEAM BADGE                                    */
/* ------------------------------------------------------------------ */

.team-badge {
  position: absolute;
  top: -0.5vmin;
  left: -0.5vmin;
  background: rgba(0, 200, 255, 0.9);
  color: #000;
  font-size: 1.5vmin;
  font-weight: 900;
  padding: 0.3vmin 0.6vmin;
  border-radius: 1vmin;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/*                    MULTIPLAYER LOBBY                                */
/* ------------------------------------------------------------------ */

#mp-lobby {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.mp-lobby-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5vmin;
  padding: 4vmin;
}

.mp-lobby-title {
  font-size: 2vmin;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
}

.mp-lobby-code {
  font-size: 10vmin;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5vmin;
  text-shadow:
    0 0 30px rgba(0, 200, 255, 0.8),
    0 0 60px rgba(0, 200, 255, 0.4);
  font-variant-numeric: tabular-nums;
}

.mp-lobby-url {
  font-size: 5vmin;
  color: var(--yellow-colour);
  font-weight: 600;
}

.mp-lobby-privacy {
  font-size: 1.5vmin;
  color: var(--light-colour);
  max-width: 40vmin;
  text-align: center;
  line-height: 1.4;
  text-wrap: balance;
}

.mp-lobby-players {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5vmin;
  justify-content: center;
  max-width: 70vmin;
  min-height: 6vmin;
}

.mp-waiting {
  font-size: 2vmin;
  color: rgba(255, 255, 255, 0.4);
  animation: pulse-text 1.5s ease-in-out infinite;
  text-transform: uppercase;
  font-weight: 900;
}

@keyframes pulse-text {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

.mp-player-tag {
  display: flex;
  align-items: center;
  gap: 1vmin;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2vmin;
  padding: 1vmin 2vmin;
}

.mp-player-tag img.mp-player-ship {
  height: 4vmin;
  width: auto;
}

.mp-player-tag span {
  font-size: 2vmin;
  font-weight: 700;
  color: #fff;
}

.mp-launch-btn {
  padding: 2vmin 6vmin;
  font-size: 3vmin;
  margin-top: 2vmin;
}

.mp-launch-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}