:root {
  --bg-dark: #050614;
  --bg-panel: rgba(13, 15, 40, 0.85);
  --neon-pink: #ff007f;
  --neon-cyan: #00ffff;
  --neon-violet: #8a2be2;
  --neon-yellow: #ffd700;
  --neon-orange: #ff4500;
  --text-white: #ffffff;
  --text-grey: #a0a5c0;
  --glow-pink: 0 0 10px rgba(255, 0, 127, 0.6);
  --glow-cyan: 0 0 10px rgba(0, 255, 255, 0.6);
  --glow-violet: 0 0 10px rgba(138, 43, 226, 0.5);
  --glow-yellow: 0 0 10px rgba(255, 215, 0, 0.6);
  --font-title: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-white);
  font-family: var(--font-body);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Starfield Canvas Background */
#starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 9:16 Container */
.game-container {
  position: relative;
  width: 100%;
  max-width: 480px; /* Perfect mobile width for desktop simulation */
  height: 95vh;
  aspect-ratio: 9 / 16;
  background: radial-gradient(circle at center, rgba(16, 20, 60, 0.4) 0%, rgba(5, 6, 20, 0.95) 100%);
  border: 2px solid rgba(138, 43, 226, 0.3);
  box-shadow: 0 0 30px rgba(138, 43, 226, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

/* HUD Header */
.hud-header {
  height: 80px;
  background: linear-gradient(to bottom, rgba(13, 15, 40, 0.9) 0%, rgba(5, 6, 20, 0) 100%);
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 20;
}

.live-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.status-online {
  background-color: #00ff66;
  color: #00ff66;
  animation: pulse-green 1.5s infinite alternate;
}

.status-offline {
  background-color: #ff3b30;
  color: #ff3b30;
  animation: pulse-red 1.5s infinite alternate;
}

.status-text {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-label {
  font-size: 10px;
  color: var(--text-grey);
  letter-spacing: 2px;
  font-weight: bold;
}

.timer-countdown {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 900;
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  margin-top: -2px;
}

.passenger-counter {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
}

.passenger-counter span {
  color: var(--neon-pink);
  text-shadow: var(--glow-pink);
}

.icon-pulse {
  animation: pulse-icon 2s infinite ease-in-out;
}

/* Mid Section: Viewport for Shuttle */
.shuttle-viewport {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  z-index: 15;
}

/* Space Shuttle Container */
.shuttle-container {
  position: relative;
  width: 90%;
  height: 98%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s ease-out; /* For screen shakes */
}

/* Shuttle Silhouette Background Image */
.shuttle-silhouette {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 90%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 350' fill='none'%3E%3Cpath d='M120 5 L108 25 L108 55 L96 85 L84 125 L72 175 L50 205 L30 225 L10 245 L10 270 L30 270 L50 255 L72 245 L72 285 L120 320 L168 285 L168 245 L190 255 L210 270 L230 270 L230 245 L210 225 L190 205 L168 175 L156 125 L144 85 L132 55 L132 25 Z' fill='rgba(138, 43, 226, 0.05)' stroke='rgba(138, 43, 226, 0.15)' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  pointer-events: none;
  z-index: -1;
}

/* The 400 Grid Slots */
.shuttle-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(35, 1fr);
  width: 100%;
  height: 90%;
  gap: 2.5px;
  padding: 10px;
}

/* Individual Slot styles */
.shuttle-slot {
  border-radius: 3px;
  background: rgba(138, 43, 226, 0.08);
  border: 1px solid rgba(138, 43, 226, 0.25);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Active empty slots glow subtly */
.shuttle-slot.active-empty:hover {
  background: rgba(138, 43, 226, 0.2);
  border-color: rgba(138, 43, 226, 0.6);
  box-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

/* Occupied Slot Styles (Avatar populated) */
.shuttle-slot.occupied {
  background: rgba(5, 6, 20, 0.95);
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
  transform: scale(1.08);
  z-index: 2;
  animation: slot-enter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Alt color for slots joined by special methods or randomized colors */
.shuttle-slot.occupied:nth-child(2n) {
  border-color: var(--neon-pink);
  box-shadow: var(--glow-pink);
}

/* Slot Avatar Image */
.shuttle-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  animation: fadeIn 0.3s ease-out 0.2s forwards;
}

/* Thrust Engine Particle Canvas */
#thrustCanvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  display: none;
}

/* Bottom HUD Footer */
.hud-footer {
  background: linear-gradient(to top, rgba(13, 15, 40, 0.95) 0%, rgba(5, 6, 20, 0.8) 100%);
  border-top: 1px solid rgba(138, 43, 226, 0.2);
  display: flex;
  flex-direction: column;
  padding: 10px 15px 15px;
  z-index: 20;
}

/* Latest Passenger Joined Ticker */
.ticker-box {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 13px;
  align-items: center;
  gap: 8px;
}

.ticker-label {
  font-family: var(--font-title);
  color: var(--neon-cyan);
  font-size: 11px;
  font-weight: bold;
}

.ticker-content {
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Leaderboard Hall of Fame */
.leaderboard-section {
  flex: 1;
  background: rgba(6, 7, 25, 0.6);
  border: 1px solid rgba(138, 43, 226, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  max-height: 145px;
  display: flex;
  flex-direction: column;
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 5px;
  margin-bottom: 6px;
}

.leaderboard-header h3 {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--neon-yellow);
  text-shadow: var(--glow-yellow);
}

.leaderboard-header .subtext {
  font-size: 10px;
  color: var(--text-grey);
}

.leaderboard-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}

/* Custom scrollbar for leaderboard list */
.leaderboard-list::-webkit-scrollbar {
  width: 4px;
}
.leaderboard-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.leaderboard-list::-webkit-scrollbar-thumb {
  background: rgba(138, 43, 226, 0.4);
  border-radius: 2px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  border-left: 2px solid rgba(138, 43, 226, 0.3);
  animation: slideIn 0.3s ease-out;
}

.leaderboard-item.top-three {
  border-left-color: var(--neon-yellow);
  background: rgba(255, 215, 0, 0.05);
}

.rank-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.rank-number {
  font-family: var(--font-title);
  font-weight: bold;
  font-size: 10px;
  width: 14px;
  text-align: center;
}

.leaderboard-item.top-three .rank-number {
  color: var(--neon-yellow);
  text-shadow: var(--glow-yellow);
}

.user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.username-display {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  color: var(--text-white);
}

.flights-count {
  font-family: var(--font-title);
  font-weight: bold;
  font-size: 11px;
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  display: flex;
  align-items: center;
  gap: 3px;
}

.empty-leaderboard {
  text-align: center;
  font-size: 12px;
  color: var(--text-grey);
  padding: 15px 0;
  font-style: italic;
}

/* Launch Overlay Warning */
.launch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 6, 20, 0.85);
  backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.launch-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.launch-alert-content {
  padding: 20px;
  border: 2px solid var(--neon-orange);
  background: rgba(13, 10, 5, 0.95);
  box-shadow: 0 0 30px rgba(255, 69, 0, 0.5), inset 0 0 15px rgba(255, 69, 0, 0.2);
  border-radius: 12px;
  max-width: 80%;
  animation: warning-border 1s infinite alternate;
}

.warning-text {
  font-family: var(--font-title);
  font-size: 50px;
  color: var(--neon-orange);
  text-shadow: 0 0 15px rgba(255, 69, 0, 0.7);
  animation: text-pulse 0.5s infinite alternate;
}

.launch-alert-content h2 {
  font-family: var(--font-title);
  font-size: 20px;
  margin-top: 10px;
  letter-spacing: 2px;
}

.warning-subtext {
  font-size: 12px;
  color: var(--text-grey);
  letter-spacing: 1px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.warning-grid-size {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--neon-cyan);
  font-weight: bold;
}

/* Animations Trigger Classes */
.shuttle-shake {
  animation: shake 0.1s infinite;
}

.shuttle-liftoff {
  animation: liftoff 10s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* Keyframes Animations */
@keyframes pulse-green {
  from { box-shadow: 0 0 2px #00ff66, 0 0 4px #00ff66; }
  to { box-shadow: 0 0 10px #00ff66, 0 0 15px #00ff66; }
}

@keyframes pulse-red {
  from { box-shadow: 0 0 2px #ff3b30, 0 0 4px #ff3b30; }
  to { box-shadow: 0 0 10px #ff3b30, 0 0 15px #ff3b30; }
}

@keyframes pulse-icon {
  0% { transform: scale(1); filter: drop-shadow(0 0 0px var(--neon-pink)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px var(--neon-pink)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0px var(--neon-pink)); }
}

@keyframes slot-enter {
  0% { transform: scale(0.3) rotate(-15deg); opacity: 0; filter: brightness(3); }
  70% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes text-pulse {
  from { transform: scale(0.95); opacity: 0.8; }
  to { transform: scale(1.05); opacity: 1; }
}

@keyframes warning-border {
  from { border-color: var(--neon-orange); box-shadow: 0 0 15px rgba(255, 69, 0, 0.3); }
  to { border-color: #ffd700; box-shadow: 0 0 35px rgba(255, 215, 0, 0.7); }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-0.5deg); }
  20% { transform: translate(-3px, 0px) rotate(0.5deg); }
  30% { transform: translate(0px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(0.5deg); }
  50% { transform: translate(-1px, 2px) rotate(-0.5deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-0.5deg); }
  80% { transform: translate(-1px, -1px) rotate(0.5deg); }
  90% { transform: translate(2px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-0.5deg); }
}

@keyframes liftoff {
  0% {
    transform: translateY(0px) scale(1);
  }
  3% {
    transform: translateY(15px) scale(0.99); /* Compression look */
  }
  15% {
    transform: translateY(-80px) scale(0.95);
  }
  35% {
    transform: translateY(-400px) scale(0.6);
    opacity: 1;
  }
  50% {
    transform: translateY(-1200px) scale(0.2);
    opacity: 0;
  }
  75% {
    /* Kept invisible while resetting on backend */
    transform: translateY(1200px) scale(0.2);
    opacity: 0;
  }
  100% {
    /* Descent back down and fade in */
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Control & Simulation Panel (Streamer Dashboard) */
.control-panel {
  position: absolute;
  top: 2.5vh;
  right: 20px;
  width: 320px;
  background: var(--bg-panel);
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.control-panel.closed {
  transform: translateX(calc(100% - 40px));
}

.toggle-btn {
  position: absolute;
  top: 15px;
  left: -145px;
  height: 40px;
  width: 145px;
  background: rgba(13, 15, 40, 0.95);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--neon-cyan);
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
}

.toggle-btn:hover {
  color: var(--text-white);
  background: rgba(20, 25, 60, 0.95);
}

.panel-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 90vh;
  overflow-y: auto;
}

.panel-content h2 {
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--neon-cyan);
  text-transform: uppercase;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  color: white;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.input-group input:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn {
  padding: 10px;
  border: none;
  border-radius: 6px;
  color: white;
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background: var(--neon-cyan);
  color: var(--bg-dark);
}
.btn-primary:hover {
  background: #33ffff;
  box-shadow: var(--glow-cyan);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-danger {
  background: #ff3b30;
}
.btn-danger:hover {
  background: #ff453a;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.5);
}

.btn-warning {
  background: var(--neon-orange);
}
.btn-warning:hover {
  background: #ff5722;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

.btn-info {
  background: var(--neon-violet);
}
.btn-info:hover {
  background: #9d4edd;
  box-shadow: var(--glow-violet);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.helper-text {
  font-size: 11px;
  color: var(--text-grey);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}