/* The win/lose end screen's look (EndScreen.js), shared by the player page
   and the builder preview. Each page owns where the screen mounts and how
   it lays out (player.css, builder/BuilderEndSurface.css); this file owns
   what the banner and the buttons look like, so the two stay identical. */

:root {
  --height-button-large: 55px;
  --height-button-small: 40px;
  --shadow-accent-glow: 0 6px 20px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/* ============================================
   Outcome banner
   ============================================ */

/* The element OutcomeBanner's SVG is placed in. --outcome-color drives both
   the text fill and the glow so they stay in sync; .win / .lose swap it. */
.outcome-banner {
  --outcome-color: var(--color-accent);
}

.outcome-banner.win {
  --outcome-color: var(--color-success);
}

.outcome-banner.lose {
  --outcome-color: var(--color-error);
}

.outcome-banner svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.outcome-banner text {
  /* Baseline font-size; OutcomeBanner.fit overrides this inline after the
     SVG is in the DOM so the text spans the full SVG width regardless of
     which characters the phrase contains. */
  font-size: 96px;
  font-weight: 900;
  letter-spacing: 4px;
  fill: var(--outcome-color);
}

/* Glow ripples per letter. Each <tspan> reads --i (its index) for
   animation-delay, and --n (total letter count, set in JS on the SVG) for
   animation-duration. With duration = stagger * n + pause, the wave
   traverses then rests briefly before restarting. */
.outcome-banner tspan {
  animation: outcome-ripple calc(var(--n, 8) * 75ms + 1500ms) ease-out infinite;
  animation-delay: calc(var(--i, 0) * 75ms);
}

@keyframes outcome-ripple {
  from {
    filter: drop-shadow(0 0 4px var(--outcome-color));
  }
  to {
    filter: drop-shadow(0 0 50px color-mix(in srgb, var(--outcome-color) 0%, transparent));
  }
}

/* ============================================
   Buttons
   ============================================ */

/* The big accent button: the end screen's choices, and the player page's
   Start / Resume row. */
.play-button {
  height: var(--height-button-large);
  padding: 0 calc(var(--space-3) * 2);
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.play-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent) 85%, black);
  border-color: color-mix(in srgb, var(--color-accent) 85%, black);
  box-shadow: var(--shadow-accent-glow);
}

.play-button:disabled {
  cursor: not-allowed;
}

/* Only the first button in a row carries the accent fill. The second
   (Restart beside Resume, Replay beside Continue, Find More beside Replay)
   takes the shared .button look so the row reads as one main choice and
   one fallback. */
.play-button-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.play-button-secondary:hover:not(:disabled) {
  background: var(--color-background);
  border-color: var(--color-accent);
  box-shadow: none;
}

@media (max-width: 450px) {
  .play-button {
    height: var(--height-button-small);
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
  }
}