/* Start screen shown when the game loads. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');

.splash {
  --splash-bg: #1f2a8a;
  --splash-red: #ff4b33;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px 16px 64px;
  color: #ffffff;
  background: var(--splash-bg);
  font-family: var(--cartoon, Fredoka, sans-serif);
  transition: opacity .45s ease, transform .45s cubic-bezier(.5, 0, .75, 0);
}
.splash[hidden] { display: none; }
.splash.is-leaving { opacity: 0; transform: scale(1.12); pointer-events: none; }

/* Star field: two layers of dots that twinkle out of step. */
.splash-stars {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #ffffff 98%, transparent),
    radial-gradient(2px 2px at 28% 72%, #ffffff 98%, transparent),
    radial-gradient(3px 3px at 44% 30%, #fff4a8 98%, transparent),
    radial-gradient(2px 2px at 63% 12%, #ffffff 98%, transparent),
    radial-gradient(2px 2px at 78% 44%, #ffffff 98%, transparent),
    radial-gradient(3px 3px at 88% 80%, #c6f4ff 98%, transparent),
    radial-gradient(2px 2px at 8% 88%, #ffffff 98%, transparent),
    radial-gradient(2px 2px at 54% 90%, #ffffff 98%, transparent);
  background-size: 420px 420px;
  animation: splash-twinkle 3.2s ease-in-out infinite alternate;
}
.splash-stars-far { background-size: 260px 260px; opacity: .55; animation-delay: -1.6s; }
@keyframes splash-twinkle { from { opacity: .35; } to { opacity: 1; } }

/* Cartoon planet with a ring and an orbiting satellite. */
.splash-planet {
  position: absolute;
  right: -9vmin;
  bottom: -14vmin;
  width: min(48vmin, 520px);
  aspect-ratio: 1;
  border: 6px solid #12183d;
  border-radius: 50%;
  background: #ff8a4c;
  box-shadow: inset -28px -18px 0 #e0603a;
  animation: splash-rise .9s .15s cubic-bezier(.2, 1.3, .5, 1) both;
}
.splash-planet::after {
  content: '';
  position: absolute;
  left: -22%;
  top: 38%;
  width: 144%;
  height: 26%;
  border: 6px solid #12183d;
  border-radius: 50%;
  box-shadow: 0 0 0 6px #ffd23f inset;
  transform: rotate(-18deg);
}
.splash-planet i { position: absolute; border: 5px solid #12183d; border-radius: 50%; background: #ffb46b; }
.splash-planet i:nth-child(1) { width: 18%; height: 18%; left: 22%; top: 18%; }
.splash-planet i:nth-child(2) { width: 11%; height: 11%; left: 56%; top: 64%; }
.splash-planet i:nth-child(3) { width: 8%; height: 8%; left: 30%; top: 70%; }
.splash-satellite { position: absolute; inset: -18%; animation: splash-orbit 9s linear infinite; }
.splash-satellite span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 34px;
  height: 22px;
  margin-left: -17px;
  border: 4px solid #12183d;
  border-radius: 6px;
  background: #c6f4ff;
  box-shadow: -24px 0 0 -4px #4b45d9, 24px 0 0 -4px #4b45d9;
}
@keyframes splash-orbit { to { transform: rotate(360deg); } }
@keyframes splash-rise { from { transform: translateY(40%); } to { transform: none; } }

/* Rocket that keeps launching across the screen. */
.splash-rocket {
  position: absolute;
  left: 8%;
  bottom: -30vh;
  width: clamp(54px, 9vmin, 96px);
  overflow: visible;
  animation: splash-launch 6.5s 1s ease-in infinite;
}
.splash-rocket :is(path, rect, circle) { stroke: #12183d; stroke-width: 4; stroke-linejoin: round; }
.splash-flame { fill: #ffd23f; transform-origin: 60px 168px; animation: splash-flicker .12s linear infinite alternate; }
.splash-flame-core { fill: #fff4a8; stroke: none !important; }
@keyframes splash-launch {
  0% { transform: translate(0, 0) rotate(14deg); }
  70%, 100% { transform: translate(55vw, -150vh) rotate(24deg); }
}
@keyframes splash-flicker { from { transform: scaleY(.85); } to { transform: scaleY(1.12); } }

.splash-content { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(18px, 3.5vh, 30px); text-align: center; }

/* Event lockup */
.splash-event {
  display: grid;
  justify-items: center;
  margin: 0;
  font-family: 'Barlow Condensed', var(--sans), sans-serif;
  line-height: .95;
  animation: splash-drop .6s .2s cubic-bezier(.2, 1.4, .5, 1) both;
}
.splash-nasa { color: var(--splash-red); font-weight: 700; font-size: clamp(16px, 2.6vmin, 22px); letter-spacing: .2em; }
.splash-apps { font-weight: 700; font-size: clamp(38px, 7.5vmin, 64px); letter-spacing: .02em; }
.splash-challenge { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(16px, 2.8vmin, 24px); letter-spacing: .3em; }
.splash-challenge b { color: #12183d; background: #ffd23f; border: 3px solid #12183d; border-radius: 999px; padding: 3px 10px 2px 12px; letter-spacing: .12em; }

/* Game title */
.splash-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .28em;
  margin: 0;
  font: 700 clamp(56px, 13vmin, 132px)/1 var(--cartoon, Fredoka, sans-serif);
  color: #ffffff;
  -webkit-text-stroke: .1em #12183d;
  paint-order: stroke fill;
  text-shadow: 0 .08em 0 #12183d;
}
.splash-title span { display: inline-block; animation: splash-pop .7s cubic-bezier(.2, 1.6, .45, 1) both; }
.splash-title span:nth-child(1) { animation-delay: .55s; }
.splash-title span:nth-child(2) { animation-delay: .7s; }
.splash-title span:nth-child(3) { animation-delay: .85s; }
.splash-title .splash-title-nasa { color: #ffd23f; }
@keyframes splash-pop { from { opacity: 0; transform: translateY(-60%) scale(.4) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes splash-drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }

.splash-start {
  min-height: 60px;
  padding: 10px 34px 12px;
  color: #12183d;
  background: #ffd23f;
  border: 4px solid #12183d;
  border-radius: 20px;
  box-shadow: 0 7px 0 #12183d;
  font: 700 clamp(20px, 3.4vmin, 28px)/1 var(--cartoon, Fredoka, sans-serif);
  cursor: pointer;
  animation: splash-pop .6s 1.15s cubic-bezier(.2, 1.6, .45, 1) both, splash-bounce 1.6s 2s ease-in-out infinite;
}
.splash-start:hover { background: #ffe27a; }
.splash-start:active { transform: translateY(5px); box-shadow: 0 2px 0 #12183d; animation: none; }
.splash-start:focus-visible { outline: 4px solid #7de3ff; outline-offset: 5px; }
.splash-start span { font-size: .8em; margin-right: 4px; }
@keyframes splash-bounce { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }

.splash-hint { margin: 0; color: #c6d0ff; font-size: 14px; font-weight: 600; animation: splash-drop .5s 1.4s both; }
.splash-credit {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  color: #c6d0ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

@media (max-width: 560px) {
  .splash-planet { right: -20vmin; bottom: -18vmin; width: 62vmin; }
  .splash-rocket { left: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .splash, .splash * { animation: none !important; }
  .splash-rocket { display: none; }
  .splash.is-leaving { transform: none; }
}