/* css/finn-scenes.css — the result-screen scene layer (js/finn/end-scenes.js), ported from
   finn_anim/style.part.css and scoped entirely under .finn-scene-stage so it never touches the rest of
   the app. The player's kit Finn (.finn-stage) is mounted inside the stage; these rules only style the
   scene UI (banner, big numbers, stars, hearts, bar, rank-up stamp, flash, bubble, particles). Everything
   animates via WAAPI (transform/opacity) in JS — the CSS here is static layout + paint. */

.finn-scene-stage {
  color: #fff;
  font-family: "Arial Black", system-ui, -apple-system, Segoe UI, sans-serif;
  overflow: visible;
}
/* the kit Finn slot is placed like the reference .finn-pos (left 65 / top 344 / 260x390) by end-scenes.js */
.finn-scene-stage .finn-scene-finn { will-change: transform; }

/* while a scene runs, kill the kit's 0.32s rig transitions so WAAPI owns the rig cleanly (spec Step 1) */
.finn.finn-scene-active .rig-f,
.finn.finn-scene-active .rig-fe,
.finn.finn-scene-active .rig-fh,
.finn.finn-scene-active .rig-b,
.finn.finn-scene-active .rig-h { transition: none !important; }

.finn-scene-stage .scene-ui { position: absolute; inset: 0; pointer-events: none; }
.finn-scene-stage .scene-ui > * { position: absolute; left: 0; right: 0; text-align: center; }

.finn-scene-stage .big-num { font-size: 62px; font-weight: 900; letter-spacing: -1px; text-shadow: 0 4px 0 #0008; }
.finn-scene-stage .big-num.win { color: #3ee08f; }
.finn-scene-stage .big-num.loss { color: #ff5468; }
.finn-scene-stage .mid-num { font-size: 34px; font-weight: 900; color: #ffd34d; text-shadow: 0 3px 0 #0008; }
.finn-scene-stage .mid-num.big { font-size: 50px; }
.finn-scene-stage .caption { font-size: 15px; color: #aeb9d6; font-weight: 600; }

.finn-scene-stage .stars { display: flex; justify-content: center; gap: 18px; height: 84px; }
.finn-scene-stage .star { position: relative; width: 62px; height: 84px; text-align: center; opacity: 0; will-change: transform, opacity; }
.finn-scene-stage .star svg { width: 62px; height: 62px; display: block; }
.finn-scene-stage .star.on path { fill: #ffcf3a; stroke: #b27a00; stroke-width: 1.2; stroke-linejoin: round; }
.finn-scene-stage .star.off path { fill: #323f68; stroke: #4b5a88; stroke-width: 1.2; stroke-linejoin: round; }
.finn-scene-stage .star span { font-size: 13px; font-weight: 700; color: #aeb9d6; }
.finn-scene-stage .star.on span { color: #ffe08a; }

.finn-scene-stage .particles { position: absolute; inset: 0; pointer-events: none; }
.finn-scene-stage .p-conf, .finn-scene-stage .p-coin { position: absolute; opacity: 0; will-change: transform, opacity; }
.finn-scene-stage .p-conf { border-radius: 2px; margin: -6px; }
.finn-scene-stage .p-coin { width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: #ffcf3a; border: 2px solid #c48a00; color: #9a6400; font: 900 12px/18px system-ui, sans-serif; text-align: center; }

.finn-scene-stage .vignette { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 50%, #0000 40%, #ff2a4a88 100%); }

.finn-scene-stage .hearts { display: flex; justify-content: center; gap: 16px; height: 52px; }
.finn-scene-stage .heart { position: relative; width: 52px; height: 52px; }
.finn-scene-stage .heart svg { position: absolute; inset: 0; width: 52px; height: 52px; }
.finn-scene-stage .h-empty path { fill: #2b365c; stroke: #46557f; stroke-width: 1.3; }
.finn-scene-stage .h-l path, .finn-scene-stage .h-r path { fill: #ff4d6a; stroke: #b3203a; stroke-width: 1.2; }
.finn-scene-stage .h-l { clip-path: inset(0 50% 0 0); }
.finn-scene-stage .h-r { clip-path: inset(0 0 0 50%); }
.finn-scene-stage .h-crack { opacity: 0; }
.finn-scene-stage .h-crack path { fill: none; stroke: #1e2846; stroke-width: 1.8; stroke-linejoin: round; }

.finn-scene-stage .bubble { position: absolute; max-width: 210px; padding: 10px 14px; border-radius: 16px; background: #fff; color: #1e2846; font-weight: 800; font-size: 16px; line-height: 1.2; box-shadow: 0 4px 0 #0005; opacity: 0; transform-origin: 15% 100%; }
.finn-scene-stage .bubble::after { content: ""; position: absolute; left: 28px; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }

.finn-scene-stage .sweat { position: absolute; left: 84px; top: 70px; width: 20px; height: 28px; opacity: 0; }
.finn-scene-stage .sweat path { fill: #8fd8ff; stroke: #2b74b8; stroke-width: 1.5; }
.finn-scene-stage .sweat path.hl { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }

.finn-scene-stage .banner { font-size: 44px; font-weight: 900; font-style: italic; color: #fff; letter-spacing: 1px; text-shadow: 0 4px 0 #e0454f, 0 8px 0 #0007; }
.finn-scene-stage .bar { left: 45px !important; right: 45px !important; height: 18px; border-radius: 9px; background: #11182f; border: 2px solid #3a4775; overflow: hidden; }
.finn-scene-stage .bar-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #ffb52e, #ffd84d); transform-origin: 0 50%; transform: scaleX(0); }
.finn-scene-stage .bar-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.finn-scene-stage .bar-lbl { font-size: 14px; font-weight: 700; color: #c7d0ea; }
.finn-scene-stage .rankup { font-size: 38px; font-weight: 900; color: #ffd34d; text-shadow: 0 3px 0 #a04a00, 0 6px 0 #0007; opacity: 0; }
.finn-scene-stage .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }

/* the tap-to-skip catcher sits above the stage; it is the only interactive scene surface */
.finn-skip-catcher { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .finn-scene-stage .p-conf, .finn-scene-stage .p-coin { display: none; }
}

/* ---- in-round corner Finn (§6 celebrations) — bottom-left of the chart, ABOVE the "OUT · in cash" pill ----
   Explicit 72x72 box so the kit SVG renders at full size (QA saw ~30x64). left:8px; bottom clears the position pill
   (pill ≈ 28px tall at bottom:10px → sit at ~48px). pointer-events:none so it never eats a tap on the chart.
   overflow:visible so the corner moves that leave the 72px box aren't clipped (Jet Stream slides sideways, Sky
   Punch / Lock In reach above the head, Red Alert shakes the stage). */
#finnCorner {
  position: absolute; left: 8px; bottom: 48px; width: 72px; height: 72px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  overflow: visible; z-index: 6; pointer-events: none;
  /* launch-fix N: contain the corner Finn's per-frame rig relayout/repaint to this layer so it doesn't ripple into
     the chart canvas beside it. layout+style only (NOT paint/size/strict — the celebration moves leave the 72px box,
     overflow:visible above is required). isolation+will-change give it its own compositing layer. */
  contain: layout style; isolation: isolate; will-change: transform;
}
#finnCorner .finn-stage, #finnCorner .finn { pointer-events: none; }
/* fix 8: ONE bubble — the celebration module's .cel-bubble (This Is Fine etc.). The module sizes it at
   ~6.5% of the stage (9px on the 72px corner Finn — unreadable), so force a readable size on the small
   corner / round Finns, wrap long lines, and keep it out of #chartWrap's clip at 320px (overflow:visible
   on #finnCorner already; the bubble renders above-right of Finn). */
/* fix E: on Rush Over the titles (#roRec "NEW RECORD", .rushGoTitle "RUSH OVER") sit above the 180px Finn, whose
   rank frame/badge and the Evolution banner (.cel-title, module-placed at y:1% translate(-50%,-88%)) poke up over
   them. Reserve a top band on #roMascot so the frame starts below the titles, and pin the celebration labels into
   that band (overriding the module placement) so they read fully, below "RUSH OVER", and aren't clipped at 72px. */
#roMascot { position: relative; padding-top: 46px; overflow: visible; }
#roMascot .cel-title, #roMascot .cel-band {
  top: 2px !important; bottom: auto !important; transform: translate(-50%, 0) !important;
  width: max-content; max-width: 92%; white-space: nowrap;
}

#finnCorner .cel-bubble, #rushFinnStage .cel-bubble {
  font-size: 12px !important; line-height: 1.15;
  /* fix B: white-space:normal alone shrank the bubble to the 72px stage box (one word per line). Size it to its
     content so "This is fine." stays on one line, only wrapping past 150px. */
  width: max-content; max-width: 150px; white-space: normal; overflow-wrap: break-word;
}

/* ---- round-end Finn in the interlude pop-up (#rushFlash) — ~104px, centred, sitting just above "ROUND N ✓" and
   overlapping the bottom of the review chart. A soft dark gradient pools behind Finn so the chart line underneath
   doesn't fight with him. Explicit height so the kit SVG never collapses. pointer-events:none → taps fall through
   to the pop-up's own advance handler ("Tap to continue"). In review mode the zone overflows up over the chart. */
.rf-finn {
  position: relative; width: 100%; height: 116px; margin: 0 auto 6px;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: visible; pointer-events: none;
  background: radial-gradient(58% 86% at 50% 94%, rgba(9,8,20,.82) 0%, rgba(9,8,20,.46) 46%, rgba(9,8,20,0) 78%);
}
/* launch3 fix D (minor): the Flatline (lying) pose is wider than tall and sits higher in its box — the bottom-aligned
   stage + this gap keep it off the "ROUND N" title at 393/430. */
.rf-finn .finn-stage, .rf-finn .finn { pointer-events: none; }

/* round-end fx layers (built in game.js playRoundEndFinn) */
.rf-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: visible; }
.rf-fx .rf-p { position: absolute; border-radius: 2px; opacity: 0; will-change: transform, opacity; }
.rf-fx .rf-sweat { position: absolute; left: 50%; top: 10px; margin-left: 10px; width: 15px; height: 21px; opacity: 0; z-index: 3; }
.rf-fx .rf-sweat svg { width: 15px; height: 21px; display: block; }
.rf-fx .rf-sweat path { fill: #8fd8ff; stroke: #2b74b8; stroke-width: 1.5; }
/* short red loss vignette on the pop-up card edges (centre stays clear so the text reads) */
.rf-vign { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 41; border-radius: inherit;
  background: radial-gradient(132% 100% at 50% 50%, rgba(255,42,74,0) 60%, rgba(255,42,74,.5) 100%); }

@media (prefers-reduced-motion: reduce) {
  .rf-fx .rf-p { display: none; }
}