:root {
  --bg-0: #050b16;
  --bg-1: #08162a;
  --bg-2: #13243d;
  --fg: #ecf4ff;
  --muted: #9db2d3;
  --good: #68ff9c;
  --warn: #ffd85a;
  --bad: #ff5e6f;
  --card: rgba(14, 30, 55, 0.8);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--fg);
  font-family: "Trebuchet MS", "Avenir Next Condensed", sans-serif;
  position: relative;
  background:
    radial-gradient(145vw 95vh at 12% 8%, rgba(76, 151, 246, 0.35) 0%, rgba(28, 60, 115, 0.12) 42%, transparent 74%),
    radial-gradient(118vw 82vh at 82% 16%, rgba(78, 73, 143, 0.33) 0%, rgba(33, 39, 84, 0.12) 40%, transparent 75%),
    linear-gradient(180deg, #0f2752 0%, #081a36 42%, #040b19 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20vh -10vw;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(42vw 30vh at 18% 30%, rgba(76, 202, 255, 0.15) 0%, rgba(76, 202, 255, 0.02) 62%, transparent 72%),
    radial-gradient(48vw 28vh at 76% 58%, rgba(153, 93, 255, 0.13) 0%, rgba(153, 93, 255, 0.02) 60%, transparent 72%),
    radial-gradient(34vw 25vh at 52% 76%, rgba(255, 113, 171, 0.09) 0%, rgba(255, 113, 171, 0.01) 66%, transparent 78%);
  filter: blur(26px);
  opacity: 0.95;
  animation: nebulaDriftA 24s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.24) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 64%, rgba(189, 230, 255, 0.2) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 40%, rgba(255, 217, 170, 0.18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 14% 70%, rgba(196, 180, 255, 0.16) 0 1.2px, transparent 1.9px);
  background-size: 240px 240px, 330px 330px, 420px 420px, 520px 520px;
  opacity: 0.34;
  animation: starDrift 42s linear infinite;
  z-index: 0;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(2, 7, 18, 0.46), rgba(2, 8, 22, 0.58));
  backdrop-filter: blur(3px);
}

.screen h1, .screen h2 {
  letter-spacing: 0.22rem;
  margin: 0.2rem 0 0.6rem;
}

.subtitle {
  margin: 0 0 1.2rem;
  color: var(--muted);
}

.hint {
  margin: 0.25rem 0;
  color: var(--muted);
}

#playerList {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0.45rem 0.7rem;
  width: min(680px, 92vw);
  margin-bottom: 1rem;
}

.player-row {
  border: 1px solid rgba(188, 218, 255, 0.35);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  background: rgba(11, 22, 43, 0.72);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player-row.ready {
  border-color: rgba(104, 255, 156, 0.6);
  box-shadow: 0 0 16px rgba(104, 255, 156, 0.25) inset;
}

#levelCards {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 0.5rem;
  width: min(780px, 95vw);
  margin: 0.8rem 0 1rem;
}

.level-card {
  background: var(--card);
  border: 1px solid rgba(170, 198, 240, 0.28);
  border-radius: 12px;
  padding: 0.7rem 0.4rem;
}

.level-card.selected {
  border-color: rgba(255, 216, 90, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 216, 90, 0.3);
}

.level-card.locked {
  opacity: 0.35;
}

#hud {
  position: absolute;
  inset: 0;
}

#hudTop {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0.8rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #d6e6ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

#thrusterBars {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  display: flex;
  gap: 0.35rem;
}

.thruster-bar {
  width: 18px;
  height: 56px;
  border: 1px solid rgba(192, 210, 240, 0.3);
  border-radius: 5px;
  background: rgba(6, 16, 33, 0.7);
  overflow: hidden;
}

.thruster-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #ffe08a, #ff8a41 55%, #ff4f5f);
  transform-origin: bottom;
}

.hidden {
  display: none !important;
}

@keyframes nebulaDriftA {
  0% {
    transform: translate3d(-2vw, 0.8vh, 0) scale(1.02);
  }
  100% {
    transform: translate3d(2vw, -1.2vh, 0) scale(1.08);
  }
}

@keyframes starDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-8vw, 6vh, 0);
  }
}

@media (max-width: 760px) {
  #playerList {
    grid-template-columns: 1fr;
  }
  #levelCards {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}