/* ── Splash: the front door at ballcrap.com ───────────────── */
.splash {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg-dark, #0a0c18);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  cursor: pointer;
}
.splash[hidden] { display: none; }

/* Once the choice buttons are up, the screen stops being one big click
   target — the buttons are the only things that do anything. */
.splash--choosing { cursor: default; }

.splash__stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; flex: 1; justify-content: center;
}

/* ── Logo ─────────────────────────────────────────────────── */
.splash__logo {
  width: min(300px, 62vw);
  display: flex; align-items: center; justify-content: center;
}
.splash__logo img {
  width: 100%; height: auto; display: block;
  /* The die is gold on black; the glow lifts it off the background the same
     way the BALL CRAP wordmark is lit on the lobby screen. */
  filter: drop-shadow(0 0 24px rgba(255, 200, 0, 0.35));
}

/* The animation: the logo swings in from nothing, overshoots very slightly,
   and settles. One beat, ~1.1s, then it is simply the logo. */
.splash__logo--in { animation: splash-logo-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes splash-logo-in {
  0%   { opacity: 0; transform: scale(0.55) rotate(-24deg); }
  55%  { opacity: 1; }
  70%  { transform: scale(1.06) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Fallback when the logo art is missing — the wordmark carries it rather
   than the page showing a broken-image frame. */
.splash__logo--text {
  font-family: var(--font-logo, var(--font-main));
  font-size: clamp(2rem, 9vw, 3.4rem);
  color: var(--text-gold); letter-spacing: 0.04em;
  text-shadow: 0 0 24px rgba(255, 200, 0, 0.45);
  aspect-ratio: auto; width: auto;
}

/* ── "Tap anywhere" ───────────────────────────────────────── */
.splash__hint {
  font-family: var(--font-main); font-size: 0.46rem;
  color: var(--text-secondary); letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0; animation: splash-fade-up 600ms ease-out 1100ms both;
}
.splash__hint--pulse { animation: splash-fade-up 600ms ease-out both, splash-hint-pulse 2s ease-in-out 600ms infinite; }
.splash__hint[hidden] { display: none; }

@keyframes splash-hint-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Choice state ─────────────────────────────────────────── */
.splash__choice {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  animation: splash-fade-up 420ms ease-out both;
}
.splash__choice[hidden] { display: none; }

@keyframes splash-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash__play {
  font-family: var(--font-logo, var(--font-main)); font-size: 1.15rem;
  color: var(--text-gold); letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255, 200, 0, 0.45);
  text-align: center;
}

.splash__buttons {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.splash__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 190px; padding: 12px 24px;
  border: 2px solid #000; border-radius: 3px;
  box-shadow: 4px 4px 0 #000;
  font-family: var(--font-main); cursor: pointer;
  text-decoration: none; text-align: center;
  transition: transform 0.05s, box-shadow 0.05s;
}
.splash__btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }

.splash__btn--apple   { background: #000; color: #fff; border-color: #444; }
.splash__btn--browser { background: var(--accent-green); color: #fff; }

.splash__btn-sub  { font-size: 0.36rem; opacity: 0.75; letter-spacing: 0.04em; }
.splash__btn-main { font-size: 0.62rem; font-weight: bold; letter-spacing: 0.02em; }

/* ── Footer ───────────────────────────────────────────────── */
.splash__footer {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-main); font-size: 0.36rem;
  color: var(--text-secondary);
}
.splash__privacy { color: var(--text-secondary); text-decoration: underline; }
.splash__privacy:hover { color: var(--text-gold); }

@media (prefers-reduced-motion: reduce) {
  .splash__logo--in,
  .splash__hint,
  .splash__hint--pulse,
  .splash__choice { animation: none; opacity: 1; transform: none; }
}