/* Editor-preview end-screen overlay shown when a Level/Game win/lose
   effect fires (the builder's surface for the shared EndScreen, built
   by Builder.#openEndSurface). Renders the curved outcome banner + a
   particle canvas (confetti on win, rain on lose). Level modes also
   render the same primary/secondary buttons as the player page
   (Continue+Replay on win, Try Again on lose) so the preview can
   advance or reset the level without leaving the editor. */

.end-screen {
  position: absolute;
  inset: 0;
  /* The 2D game-UI layer is a fixed body child at --z-canvas-ui, so the
     screen only covers it through the shared Z scale (see style.css).
     Editing furniture and panel chrome stay above it on purpose. */
  z-index: var(--z-canvas-end);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  /* Matches the player page's pause overlay: 25% see-through tint plus
       a backdrop blur over the editor preview canvas behind it. */
  background: color-mix(in srgb, var(--color-background) 75%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.end-screen.visible {
  opacity: 1;
  /* Absorb clicks like the player page's visible overlay, so the game UI
     under the screen cannot be driven through it. Buttons opt back in. */
  pointer-events: auto;
}

/* A framed end screen (a camera move ran) fades in over the second half
   of the move and completes as the camera lands, matching the player
   page's end-state fade (B1D_System.END_SCREEN_AT_MS through
   END_CAMERA_MS). Unframed screens keep the base 250ms fade. */
.end-screen.framed {
  transition: opacity 0.5s ease-out;
}

/* Particle canvas fills the overlay behind the banner. The confetti
   palette and rain stroke color live on :root (style.css) so Confetti.js
   / Rain.js can read them via getComputedStyle on any ancestor and the
   play / editor surfaces stay in sync. */
.end-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Outcome banner centered in the overlay. Its look (color, letters,
   ripple) is .outcome-banner in common/scene/EndScreen.css. */
.end-outcome {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  z-index: 1;
}

/* The run's leaderboard block (Leaderboard.css) hangs under the arc,
   clear of the button row straddling its bottom edge. */
.end-outcome .leaderboard {
  position: absolute;
  top: calc(100% + var(--space-10));
  left: 0;
  right: 0;
}

/* Action buttons (Continue+Replay on level-win, Try Again on level-lose).
   Skipped for game-win/lose since those terminate the game in the real
   flow. Anchored inside the arc, below the curved text. The buttons are
   the shared .play-button (common/scene/EndScreen.css). */
.end-buttons {
  /* Anchored inside the banner wrap so the row sits inside the arc shape.
       width: max-content overrides the shrink-to-fit clamp that left:50%
       imposes on an abs-positioned element -- otherwise two buttons would
       wrap because the available width is only half the banner wrap. */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  pointer-events: auto;
  z-index: 2;
  display: flex;
  gap: var(--space-2);
}

/* The row is max-content, not a full-width flex, so a floor keeps
   Continue and Replay equal width regardless of label length. */
.end-buttons .play-button {
  min-width: 11em;
}