/* ============================================================
 *  09-finale.css — Shared base for all three finale variants.
 *  Variant-specific styles live in:
 *    css/09-finale-letter.css
 *    css/09-finale-constellation.css
 *    css/09-finale-rankup.css
 *  The dispatcher in js/09-finale.js adds a class
 *  (finale--letter / finale--constellation / finale--rankup)
 *  to #scene-finale so only the chosen variant's rules apply.
 * ============================================================ */

#scene-finale {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(42, 66, 140, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(10, 16, 48, 0.9) 0%, transparent 60%),
    linear-gradient(180deg, #040818 0%, #0a1238 55%, #060a22 100%);
  overflow: hidden;
}

.finale-host {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  perspective: 900px;
}
.finale-host > * { pointer-events: auto; }

.finale-skip-hint {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-p5-mono);
  font-size: 0.72rem;
  letter-spacing: 5px;
  color: rgba(245, 230, 200, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}
.finale-skip-hint.is-visible {
  opacity: 0.85;
  transition: opacity 0.4s ease-out;
}