/* PlayWhot splash — uses real Whot card art from /web/splash/cards/.
   The PNGs are copies of assets/whot/{Whot_20,Circle_1,Star_8,Cross_5,Square_14}.png
   (the same artwork the Arena renders) so the brand stays consistent end-to-end. */

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  /* (May 2026) — Dark to match the new dark splash + app theme. Was
     #fefffe (cream); the moment the page started loading, the cream
     body painted briefly before #splash mounted on top → visible
     light flash before the splash even started. */
  background-color: #0d1419;
  background-size: 100% 100%;
}

/* ---------------- Splash container ---------------- */

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* (May 2026 — splash continuity) — Was a cream radial gradient
     (#fefffe → #e6dad2). The Flutter app behind this loads with the
     dark theme (bgDeep ≈ #0d1217), so the moment splash dismissed the
     screen flashed light-to-dark. Switched to a dark radial gradient
     that matches the app's first-frame background. The gold card
     accents and amber bg-glow already sit cleanly on dark — better
     than the white treatment they were getting. */
  background:
    radial-gradient(ellipse at 50% 30%, #14202c 0%, #0d1419 55%, #060a0e 100%);
  animation: splashFade 240ms ease-out;
  transition: opacity 260ms ease-out;
  cursor: pointer;
  overflow: hidden;
}

#splash.fade-out { opacity: 0; pointer-events: none; }

@keyframes splashFade { from { opacity: 0; } to { opacity: 1; } }

/* Soft amber glow behind the card fan — adds depth without overpowering. */
.splash-bg-glow {
  position: absolute;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201, 161, 74, 0.25) 0%,
    rgba(201, 161, 74, 0.08) 40%,
    rgba(201, 161, 74, 0) 70%);
  filter: blur(8px);
  animation: glowPulse 2.6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* ---------------- Stage + cards ---------------- */

.splash-stage {
  position: relative;
  width: 360px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-stage .card {
  position: absolute;
  width: 110px;
  height: 154px;
  /* The PNGs are the entire card — face, brown border, transparent corners.
     So the box has NO background, NO rounded box-clip, NO inset rim:
     anything we add ends up showing as a sliver of white between the
     brown border and the box edge. The shadow is applied as a drop-shadow
     filter so it follows the PNG's actual silhouette, not the bounding box. */
  background: transparent;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 26px rgba(114, 78, 80, 0.32))
    drop-shadow(0 4px 8px rgba(114, 78, 80, 0.20));
  transform: translate(var(--from-x, -120vw), var(--from-y, -120vh)) rotate(-30deg) scale(0.5);
  opacity: 0;
  animation: cardFly 900ms cubic-bezier(0.18, 1.2, 0.4, 1) forwards;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.splash-stage .card-hero {
  /* The center WHOT card sits 4-6% larger so it reads as the hero. */
  width: 122px;
  height: 170px;
  filter:
    drop-shadow(0 22px 32px rgba(184, 138, 45, 0.45))
    drop-shadow(0 6px 12px rgba(114, 78, 80, 0.22));
  z-index: 2;
}

/* Each card flies in from a different screen edge, lands at its slot in the fan,
   overshoots for impact, then settles. */
.splash-stage .card-1 {
  --from-x: -120vw; --from-y: -80vh;
  --to-x: -132px;   --to-y: 4px;
  --rot: -16deg;
  animation-delay: 80ms;
}
.splash-stage .card-2 {
  --from-x: 120vw;  --from-y: -80vh;
  --to-x: -68px;    --to-y: -10px;
  --rot: -8deg;
  animation-delay: 200ms;
}
.splash-stage .card-3 {
  --from-x: 0;      --from-y: -120vh;
  --to-x: 0px;      --to-y: -16px;
  --rot: 0deg;
  animation-delay: 320ms;
}
.splash-stage .card-4 {
  --from-x: -120vw; --from-y: 80vh;
  --to-x: 68px;     --to-y: -10px;
  --rot: 8deg;
  animation-delay: 440ms;
}
.splash-stage .card-5 {
  --from-x: 120vw;  --from-y: 80vh;
  --to-x: 132px;    --to-y: 4px;
  --rot: 16deg;
  animation-delay: 560ms;
}

@keyframes cardFly {
  0% {
    transform: translate(var(--from-x), var(--from-y)) rotate(-30deg) scale(0.5);
    opacity: 0;
  }
  60% {
    transform: translate(var(--to-x), var(--to-y)) rotate(var(--rot)) scale(1.18);
    opacity: 1;
  }
  82% {
    transform: translate(var(--to-x), var(--to-y)) rotate(var(--rot)) scale(0.96);
  }
  100% {
    transform: translate(var(--to-x), var(--to-y)) rotate(var(--rot)) scale(1);
    opacity: 1;
  }
}

/* ---------------- Wordmark ---------------- */

.splash-stage .wordmark {
  position: absolute;
  bottom: -56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  letter-spacing: 0.18em;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 28px;
  /* (May 2026) — Wordmark recolored for the new dark splash bg. Was a
     warm brown (#724e50) on cream; against #14202c that read as muddy.
     Switched to the same gold (#C8A24A) the in-app `playwhot` wordmark
     uses, with a faint dark text-shadow for depth. */
  color: #C8A24A;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.splash-stage .wordmark span {
  opacity: 0;
  transform: translateY(8px);
  animation: letterIn 90ms ease-out forwards;
}
.splash-stage .wordmark span:nth-child(1) { animation-delay: 800ms; }
.splash-stage .wordmark span:nth-child(2) { animation-delay: 860ms; }
.splash-stage .wordmark span:nth-child(3) { animation-delay: 920ms; }
.splash-stage .wordmark span:nth-child(4) { animation-delay: 980ms; }
.splash-stage .wordmark span:nth-child(5) { animation-delay: 1040ms; }
.splash-stage .wordmark span:nth-child(6) { animation-delay: 1100ms; }
.splash-stage .wordmark span:nth-child(7) { animation-delay: 1160ms; }
.splash-stage .wordmark span:nth-child(8) { animation-delay: 1220ms; }

@keyframes letterIn {
  to { opacity: 1; transform: translateY(0); }
}

.splash-stage .wordmark-tag {
  position: absolute;
  bottom: -88px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  /* Tagline + skip hint contrast with the new dark bg. */
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
  white-space: nowrap;
  animation: tagIn 380ms 1320ms ease-out forwards;
}
@keyframes tagIn { to { opacity: 0.78; } }

.splash-stage .gold-underline {
  position: absolute;
  bottom: -68px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a14a 50%, transparent);
  transform: translateX(-50%);
  animation: underlineSweep 420ms 1280ms ease-out forwards;
}
@keyframes underlineSweep {
  to { width: 220px; }
}

/* ---------------- Skip hint ---------------- */

.splash-skip-hint {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: hintIn 400ms 2400ms ease-out forwards;
  pointer-events: none;
}
@keyframes hintIn {
  to { opacity: 0.55; }
}

/* Reduced-motion users get a calmer fade. */
@media (prefers-reduced-motion: reduce) {
  .splash-bg-glow { animation: none; }
  .splash-stage .card {
    animation: cardFlyCalm 320ms ease-out forwards;
  }
  @keyframes cardFlyCalm {
    from { opacity: 0; transform: translate(var(--to-x), var(--to-y)) rotate(var(--rot)) scale(0.95); }
    to   { opacity: 1; transform: translate(var(--to-x), var(--to-y)) rotate(var(--rot)) scale(1); }
  }
}