:root {
  --va-start-title-color: #f7fbff;
  --va-start-title-glow: rgba(116, 204, 255, 0.38);
  --va-start-text-soft: rgba(220, 236, 255, 0.88);
  --va-start-accent: #7dd3fc;
  --va-start-accent-soft: rgba(125, 211, 252, 0.18);
  --va-start-card-bg: rgba(10, 18, 32, 0.5);
  --va-start-card-border: rgba(148, 197, 255, 0.22);
}

#gameContainer.va-start-screen-ready {
  overflow: hidden;
}

/* ── Pre-init flash guard ──────────────────────────────────────────────────
   Until shared-start-screen.js applies its classes, hide the start screen,
   game-over screen, and in-game HUD so they don't flash in the un-themed
   per-game form, and show a centered spinner so the brief load is legible.
   The :not() rule only matches before JS adds .va-start-screen-ready on
   first paint. The canvas stays visible so the game's own background
   (gradient / starfield) is what shows behind the spinner. */
#gameContainer:not(.va-start-screen-ready) > *:not(#gameCanvas) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

#gameContainer:not(.va-start-screen-ready)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(125, 211, 252, 0.18);
  border-top-color: rgba(125, 211, 252, 0.9);
  border-radius: 50%;
  animation: vaStartLoadingSpin 0.85s linear infinite;
  z-index: 100;
  pointer-events: none;
}

@keyframes vaStartLoadingSpin {
  to { transform: rotate(360deg); }
}

/* Raise game container above mobile controls overlay while start screen is showing */
#gameContainer.va-start-visible {
  z-index: 9500;
}

/* Back arrow is fixed outside the container — keep it above everything on mobile */
@media (pointer: coarse), (max-height: 560px) {
  .back-link {
    z-index: 9600;
  }
}

#gameContainer #startScreen.va-start-screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(18px, 4.4vh, 42px) clamp(12px, 2.6vw, 28px);
  opacity: 1;
  transition: opacity 140ms ease;
  background:
    radial-gradient(1000px 540px at 50% 20%, rgba(44, 98, 173, 0.11), rgba(6, 10, 18, 0.98) 58%),
    linear-gradient(180deg, #070d17, #060b13);
}

#gameContainer #startScreen.va-start-screen::before {
  content: '';
  position: absolute;
  inset: -24% -10%;
  background:
    radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.05), transparent 40%),
    radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.05), transparent 42%),
    radial-gradient(circle at 58% 76%, rgba(14, 165, 233, 0.06), transparent 44%);
  pointer-events: none;
  opacity: 0.5;
}

#gameContainer #startScreen.va-start-screen > * {
  position: relative;
  z-index: 1;
}

#gameContainer #startScreen.va-start-screen.hidden,
#gameContainer #gameOverScreen.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* A hidden start screen must not keep hit-testable children either: the mobile
   H1 re-enables pointer events and visibility on itself for the start state,
   which left an invisible title swallowing taps on the top band of the canvas
   during play (found on Ion Racers's hangar, 2026-09-14). */
#gameContainer #startScreen.va-start-screen.hidden *,
#gameContainer #gameOverScreen.hidden * {
  pointer-events: none !important;
  visibility: hidden !important;
}

#gameContainer #startScreen.va-start-screen.va-start-enter {
  opacity: 0;
}

#gameContainer #startScreen.va-start-screen.va-start-enter > * {
  opacity: 1;
  transform: none;
  animation: none;
}

#gameContainer #startScreen.va-start-screen .va-start-title-source,
#gameContainer #startScreen.va-start-screen h1 {
  font-size: clamp(32px, 7vw, 68px);
  line-height: 1.03;
  font-weight: 720;
  letter-spacing: 0.03em;
  margin: 0 0 clamp(6px, 1.2vh, 12px);
  color: var(--va-start-title-color);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.22),
    0 0 24px var(--va-start-title-glow),
    0 0 60px rgba(56, 189, 248, 0.2);
  transform: translateY(-10px);
  animation: vaTitleFloat 4.8s ease-in-out infinite;
}

/* The start-screen title source (the <h1>, tagged .va-start-title-source by
   shared-start-screen.js) IS the visible start-screen title. Legacy per-game
   CSS sets `.start-title { opacity: 0 }` to defer to the floating #inGameTitle,
   but this start screen is opaque (z-index 6) and fully covers that floating
   title (z-index 5) — on desktop that left the start screen with NO title at
   all (mobile only worked via a va-mobile-hud-ready re-show rule). Force the
   title source visible whenever the start screen is up; the floating
   #inGameTitle remains purely for the in-play title animation. */
#gameContainer #startScreen.va-start-screen .va-start-title-source,
#gameContainer #startScreen.va-start-screen h1.start-title {
  opacity: 1 !important;
  visibility: visible !important;
}

#gameContainer #startScreen.va-start-screen .va-start-subtitle,
#gameContainer #startScreen.va-start-screen .subtitle {
  margin: -4px 0 clamp(6px, 1vh, 10px);
  font-size: clamp(12px, 1.6vw, 18px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--va-start-accent);
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.35);
}

#gameContainer #startScreen.va-start-screen .va-start-how-to-play,
#gameContainer #startScreen.va-start-screen .how-to-play {
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  max-width: min(92%, 820px);
  font-size: clamp(11px, 1.25vw, 15px);
  line-height: 1.36;
  color: var(--va-start-text-soft);
}

#gameContainer #startScreen.va-start-screen .va-start-controls,
#gameContainer #startScreen.va-start-screen .controls {
  width: min(96%, 860px);
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto clamp(14px, 2vh, 22px);
}

#gameContainer #startScreen.va-start-screen .va-start-control,
#gameContainer #startScreen.va-start-screen .control {
  min-width: 108px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--va-start-card-border);
  background: linear-gradient(180deg, rgba(18, 29, 46, 0.82), var(--va-start-card-bg));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 22px rgba(14, 165, 233, 0.11);
}

#gameContainer #startScreen.va-start-screen .va-start-key,
#gameContainer #startScreen.va-start-screen .key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ecfeff;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(125, 211, 252, 0.42);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.22);
}

#gameContainer #startScreen.va-start-screen .va-start-key-label,
#gameContainer #startScreen.va-start-screen .key-label {
  margin-top: 5px;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(212, 231, 255, 0.9);
}

#gameContainer #startScreen.va-start-screen .va-start-prompt,
#gameContainer #startScreen.va-start-screen .prompt {
  margin-top: clamp(16px, 3vh, 30px);
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(230, 244, 255, 0.95);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 600;
  box-shadow: none;
  text-shadow: 0 0 10px rgba(125, 211, 252, 0.36);
  animation: vaPromptPulse 1.2s ease-in-out infinite;
}

#gameContainer .va-shared-in-game-title,
#gameContainer #inGameTitle {
  position: absolute;
  top: clamp(14px, 4vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(84%, 560px);
  text-align: center;
  pointer-events: none;
  user-select: none;
  font-size: clamp(11px, 1.8vw, 18px);
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
  color: rgba(228, 241, 255, 0.74);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.14), 0 0 14px rgba(74, 222, 255, 0.14);
  transition:
    opacity 220ms ease,
    transform 240ms ease,
    filter 240ms ease;
}

#gameContainer .va-shared-in-game-title.title-start,
#gameContainer #inGameTitle.title-start {
  opacity: 0;
}

#gameContainer .va-shared-in-game-title.title-playing,
#gameContainer #inGameTitle.title-playing {
  opacity: 0.32;
  transform: translateX(-50%) scale(0.99);
  filter: blur(0.1px);
}

#gameContainer .va-shared-in-game-title.title-hidden,
#gameContainer #inGameTitle.title-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-6px) scale(0.98);
}

/* Desktop/mobile prompt text toggle */
.va-prompt-mobile {
  display: none;
}

@media (pointer: coarse), (max-height: 560px) {
  .va-prompt-desktop {
    display: none;
  }
  .va-prompt-mobile {
    display: inline;
  }
}

@keyframes vaTitleFloat {
  0%,
  100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes vaPromptPulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  #gameContainer #startScreen.va-start-screen .va-start-control,
  #gameContainer #startScreen.va-start-screen .control {
    min-width: 98px;
    padding: 8px 8px;
  }

  #gameContainer .va-shared-in-game-title,
  #gameContainer #inGameTitle {
    font-size: clamp(10px, 3.6vw, 14px);
    width: min(90%, 460px);
  }
}

@keyframes vaPromptPulseMobile {
  0%, 100% {
    opacity: 0.65;
    text-shadow: 0 0 10px rgba(125, 211, 252, 0.3);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 16px rgba(125, 211, 252, 1),
      0 0 36px rgba(56, 189, 248, 0.7),
      0 0 60px rgba(56, 189, 248, 0.3);
  }
}

/* ── Mobile / short-landscape (actual touch devices + desktop resize testing) */
@media (pointer: coarse), (max-height: 560px) {
  /* Keyboard controls are irrelevant on touch */
  #gameContainer #startScreen.va-start-screen .va-start-controls,
  #gameContainer #startScreen.va-start-screen .controls {
    display: none !important;
  }

  /* Back arrow: hidden during gameplay/game-over, shown on start and while powerup picker is open */
  body.va-body-playing:not(.va-powerup-picker-open) .back-link,
  body.va-body-game-over:not(.va-powerup-picker-open) .back-link {
    display: none !important;
  }

  /* Start screen: spread content over the full gameContainer height.
     --va-crop-top is the cropped zone (game units) when cover-mode scale is active.
     Padding pushes title and prompt into the visible viewport slice. */
  #gameContainer #startScreen.va-start-screen {
    justify-content: space-between;
    padding:
      calc(var(--va-crop-top, 0px) + 24px)
      28px
      calc(var(--va-crop-top, 0px) + 24px);
    gap: 0;
  }

  /* Title */
  #gameContainer #startScreen.va-start-screen .va-start-title-source,
  #gameContainer #startScreen.va-start-screen h1 {
    font-size: clamp(39px, 8.25vw, 81px);
    line-height: 1.0;
    margin: 38px 0 8px;
  }

  /* Subtitle */
  #gameContainer #startScreen.va-start-screen .va-start-subtitle,
  #gameContainer #startScreen.va-start-screen .subtitle {
    font-size: clamp(15px, 2.4vw, 22px);
    letter-spacing: 0.14em;
    margin: 0;
  }

  /* How-to-play: center of screen, bigger, thin outlined box */
  #gameContainer #startScreen.va-start-screen .va-start-how-to-play,
  #gameContainer #startScreen.va-start-screen .how-to-play {
    font-size: clamp(12px, 2vw, 19px);
    line-height: 1.45;
    max-width: min(88%, 600px);
    margin: auto 0;
    padding: 12px 18px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 12px;
    background: rgba(10, 22, 44, 0.45);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
  }

  /* Prompt: pinned to bottom, bigger, brighter pulse */
  #gameContainer #startScreen.va-start-screen .va-start-prompt,
  #gameContainer #startScreen.va-start-screen .prompt {
    font-size: clamp(13px, 2.1vw, 20px);
    letter-spacing: 0.2em;
    margin-bottom: 34px;
    animation: vaPromptPulseMobile 1.4s ease-in-out infinite;
  }

  /* HUD elements: offset down so they're not inside the cover-mode crop zone */
  #gameContainer #ui,
  #gameContainer #tokenUi {
    top: calc(var(--va-crop-top, 0px) + 14px) !important;
  }
}