/* Life-movie cinematic overlay (js/replay.js). Everything is scoped under .rp */

.rp {
  --bar: clamp(44px, 11vh, 110px);
  --pc: #ffcd3c;
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: #050409; color: #fff8ec;
  font-family: var(--font, 'Nunito', 'Segoe UI', system-ui, sans-serif);
  opacity: 0; transition: opacity .6s ease;
  user-select: none; -webkit-user-select: none;
}
.rp.on { opacity: 1; }
.rp.paused *, .rp.paused *::before, .rp.paused *::after { animation-play-state: paused !important; }
.rp *, .rp *::before, .rp *::after { box-sizing: border-box; }

/* ---------- frame chrome: letterbox, vignette, grain ---------- */
.rp-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 4; transition: height 1.2s cubic-bezier(.6, 0, .2, 1) .15s; }
.rp-bar.top { top: 0; } .rp-bar.bot { bottom: 0; }
.rp.on .rp-bar { height: var(--bar); }
.rp-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 95% 90% at 50% 50%, transparent 70%, rgba(0, 0, 0, .45) 100%); }
.rp-grain { position: absolute; inset: -60px; z-index: 3; pointer-events: none; opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: rpGrain .7s steps(5) infinite; }
@keyframes rpGrain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-23px, 14px); } 40% { transform: translate(17px, -31px); }
  60% { transform: translate(-9px, 27px); } 80% { transform: translate(31px, 8px); } 100% { transform: translate(0, 0); }
}

/* ---------- scenes ---------- */
.rp-stage { position: absolute; inset: 0; z-index: 1; }
.rp-scene { position: absolute; inset: 0; --sc: var(--pc); animation: rpIn 1.1s ease both; }
.rp-scene.out { animation: rpOut 1s ease forwards; z-index: 0; }
@keyframes rpIn { from { opacity: 0; filter: brightness(.2) blur(3px); } to { opacity: 1; filter: none; } }
@keyframes rpOut { to { opacity: 0; filter: brightness(.3); } }

.rp-bg { position: absolute; inset: 0; background: #0b0916;
  background: radial-gradient(ellipse 70% 80% at 38% 48%, color-mix(in srgb, var(--sc) 62%, #120c22) 0%, color-mix(in srgb, var(--sc) 22%, #0a0714) 45%, #050409 100%);
  animation: rpBreath var(--dur, 6s) ease-in-out both; }
.rp-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, .5) 78%, rgba(0, 0, 0, .85) 100%); }
.rp-bg::after { content: ''; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255, 255, 255, .025) 60px 62px); }
@keyframes rpBreath { from { transform: scale(1.12); filter: saturate(.7) brightness(.8); } to { transform: scale(1); filter: saturate(1.05) brightness(1); } }
.rp-bg-title { background: radial-gradient(ellipse 60% 55% at 50% 45%, color-mix(in srgb, var(--pc) 28%, #110c1f) 0%, #06050b 70%); }
.rp-bg-final { background: radial-gradient(ellipse 60% 70% at 50% 38%, color-mix(in srgb, var(--sc) 30%, #1a1426) 0%, #08060e 75%); filter: sepia(.15); }

.rp-bigicon { position: absolute; right: -4vw; top: 50%; font-size: min(62vh, 46vw); line-height: 1; opacity: .07; filter: blur(2px) saturate(.5);
  transform: translateY(-50%); animation: rpDrift var(--dur, 6s) linear both; pointer-events: none; }
@keyframes rpDrift { from { transform: translate(4vw, -46%) rotate(-6deg) scale(.95); } to { transform: translate(-3vw, -54%) rotate(4deg) scale(1.08); } }

/* hero avatar with Ken Burns */
.rp-hero { position: absolute; left: 50%; top: 50%; width: min(46vh, 40vw); aspect-ratio: 1; transform: translate(-50%, -52%);
  animation: rpKen var(--dur, 6s) cubic-bezier(.3, .1, .3, 1) both; }
@keyframes rpKen { from { transform: translate(-56%, -48%) scale(.9); } to { transform: translate(-46%, -55%) scale(1.14); } }
.rp-halo { position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc) 70%, #fff) 0%, color-mix(in srgb, var(--sc) 45%, transparent) 35%, transparent 68%);
  opacity: .55; animation: rpPulse 3.2s ease-in-out infinite; }
@keyframes rpPulse { 50% { opacity: .8; transform: scale(1.05); } }
.rp-hero-a, .rp-hero-b { position: absolute; inset: 0; display: grid; place-items: center; }
.rp-hero-b { opacity: 0; }
.rp-av { width: 100%; height: 100%; display: grid; place-items: center; }
.rp-av-svg svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.rp-av-emoji { font-size: min(30vh, 26vw); line-height: 1; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }

/* chapter title */
.rp-chapter { position: absolute; left: max(5vw, 20px); top: calc(var(--bar) + 4vh); max-width: 44vw; animation: rpRise 1.3s .35s cubic-bezier(.2, .7, .2, 1) both; }
.rp-chapter small { display: block; font-family: Georgia, 'Times New Roman', serif; font-style: italic; letter-spacing: .32em; text-transform: uppercase; font-size: clamp(.7rem, 1.4vw, .95rem); color: color-mix(in srgb, var(--sc) 45%, #fff); }
.rp-chapter h2 { font-family: var(--font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: clamp(1.8rem, 5.2vw, 4.2rem); line-height: 1; margin: .15em 0 .2em;
  text-shadow: 0 4px 30px color-mix(in srgb, var(--sc) 70%, transparent), 0 2px 0 rgba(0, 0, 0, .3); }
.rp-span { font-size: clamp(.8rem, 1.5vw, 1rem); opacity: .7; letter-spacing: .08em; }
@keyframes rpRise { from { opacity: 0; transform: translateY(18px); letter-spacing: .02em; } to { opacity: 1; transform: none; } }

/* age counter */
.rp-agebox { position: absolute; left: max(5vw, 20px); bottom: calc(var(--bar) + 3vh); line-height: .85; animation: rpRise 1.2s .6s ease both; }
.rp-agebox small { display: block; font-family: Georgia, serif; font-style: italic; opacity: .7; font-size: clamp(.8rem, 1.6vw, 1.1rem); margin-left: .2em; }
.rp-age { display: inline-block; font-family: var(--font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: clamp(3.4rem, 11vw, 8.5rem); font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 40px color-mix(in srgb, var(--sc) 80%, transparent); }
.rp-age.tick { animation: rpTick .35s ease; }
@keyframes rpTick { from { transform: translateY(-6px); opacity: .55; } to { transform: none; opacity: 1; } }

/* sparkline */
.rp-spark { position: absolute; right: max(4vw, 16px); bottom: calc(var(--bar) + 3vh); width: min(300px, 38vw); padding: 10px 12px 8px;
  border-radius: 14px; background: rgba(8, 6, 16, .45); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .1);
  animation: rpRise 1.2s .8s ease both; }
.rp-spark svg { display: block; width: 100%; height: clamp(50px, 9vh, 84px); overflow: visible; }
.rp-spark path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rp-ghost { stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; }
.rp-zero { stroke: rgba(255, 255, 255, .18); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.rp-nw { stroke: #ffcd3c; stroke-width: 2.6; filter: drop-shadow(0 0 4px rgba(255, 205, 60, .7)); }
.rp-joy { stroke: #ff7eb6; stroke-width: 2; opacity: .9; }
.rp-dot-nw { fill: #ffcd3c; } .rp-dot-joy { fill: #ff7eb6; }
.rp-spark-legend { display: flex; justify-content: space-between; gap: 10px; font-size: clamp(.72rem, 1.3vw, .9rem); margin-top: 6px; opacity: .92; }
.rp-spark-legend .nw b { color: #ffcd3c; } .rp-spark-legend .joy b { color: #ff9cc8; }
.rp-spark-legend b { font-variant-numeric: tabular-nums; }

/* badges */
.rp-badges { position: absolute; right: max(4vw, 16px); top: calc(var(--bar) + 4vh); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-height: calc(100% - 2 * var(--bar) - 30vh); }
.rp-badge { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 8px 14px 8px 10px; border-radius: 14px; background: var(--cream, #fff8ec); color: var(--cream-ink, #2b2340);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 3px color-mix(in srgb, var(--sc) 70%, transparent);
  animation: rpPop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.rp-badge span { grid-row: span 2; font-size: 1.7rem; line-height: 1; }
.rp-badge em { font-style: normal; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; opacity: .6; font-weight: 800; }
.rp-badge b { font-family: var(--font-display, 'Fredoka', sans-serif); font-size: 1rem; }
.rp-badge.ach { background: linear-gradient(180deg, #ffe48a, #ffc23a); }
@keyframes rpPop { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 60% { opacity: 1; } 100% { transform: none; } }

/* ---------- title card ---------- */
.rp-title { position: absolute; inset: var(--bar) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16px; }
.rp-rank { font-family: var(--font-display, 'Fredoka', sans-serif); font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: .2em; text-transform: uppercase; color: #ffcd3c; margin-bottom: 2.5vh; animation: rpFade 1.4s .1s both; }
.rp-rank.small { font-size: clamp(.8rem, 1.6vw, 1rem); margin-bottom: 1vh; }
.rp-presents { font-size: clamp(.65rem, 1.2vw, .85rem); letter-spacing: .5em; text-transform: uppercase; opacity: .55; animation: rpFade 1.6s .3s both; }
.rp-lifeof { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(1.2rem, 3vw, 2.2rem); opacity: .85; margin-top: 2.2vh; animation: rpFade 1.6s .9s both; }
.rp-name { font-family: var(--font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: clamp(3rem, 11vw, 8rem); line-height: 1; letter-spacing: -.01em;
  text-shadow: 0 0 60px currentColor; animation: rpTitle 2.6s 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rpTitle { from { opacity: 0; letter-spacing: .35em; filter: blur(10px); } to { opacity: 1; filter: none; } }
.rp-years { display: flex; align-items: center; gap: 14px; margin-top: 1.5vh; font-family: Georgia, serif; letter-spacing: .3em; opacity: .65; animation: rpFade 1.6s 2s both; }
.rp-years::before, .rp-years::after { content: ''; width: 60px; height: 1px; background: currentColor; opacity: .6; }
.rp-title-av { width: min(18vh, 130px); aspect-ratio: 1; margin-top: 2.5vh; animation: rpFloatIn 2s 2.2s ease both; }
.rp-title-av .rp-av-emoji { font-size: min(14vh, 100px); }
@keyframes rpFloatIn { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
.rp-birth-traits { display: flex; gap: 8px; margin-top: 1.4vh; flex-wrap: wrap; justify-content: center; }
.rp-birth-traits .rp-badge { display: inline-block; padding: 4px 12px; font-weight: 800; font-size: .85rem; }
@keyframes rpFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- final card ---------- */
.rp-final { position: absolute; inset: var(--bar) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1vh 16px; gap: .5vh; }
.rp-memory { font-family: Georgia, serif; font-style: italic; letter-spacing: .3em; text-transform: uppercase; font-size: clamp(.7rem, 1.4vw, .9rem); opacity: .65; animation: rpFade 1.6s .2s both; }
.rp-crown { font-family: var(--font-display, 'Fredoka', sans-serif); font-size: clamp(1.1rem, 3vw, 2rem); color: #ffcd3c; letter-spacing: .1em; text-shadow: 0 0 30px rgba(255, 205, 60, .8); animation: rpTitle 1.8s .2s both; }
.rp-final-av { width: min(19vh, 150px); aspect-ratio: 1; animation: rpFloatIn 1.8s .3s ease both; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--sc) 60%, transparent)); }
.rp-final-av .rp-av-emoji { font-size: min(14vh, 110px); }
.rp-final.winner .rp-final-av { animation: rpFloatIn 1.8s .3s ease both, rpBob 2.4s 2.1s ease-in-out infinite; }
@keyframes rpBob { 50% { transform: translateY(-8px) rotate(2deg); } }
.rp-final h2 { font-family: var(--font-display, 'Fredoka', sans-serif); font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1; text-shadow: 0 0 40px currentColor; animation: rpFade 1.4s .6s both; }
.rp-dates { font-family: Georgia, serif; letter-spacing: .12em; opacity: .8; font-size: clamp(.8rem, 1.6vw, 1.05rem); animation: rpFade 1.4s 1s both; }
.rp-epitaph { font-family: Georgia, serif; font-style: italic; font-size: clamp(.95rem, 2vw, 1.3rem); max-width: 720px; margin: .6vh 0; line-height: 1.4; opacity: .95; animation: rpFade 1.6s 1.5s both; }
.rp-dream { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); font-size: clamp(.8rem, 1.5vw, .98rem); animation: rpFade 1.2s 2.1s both; }
.rp-dream.met { background: rgba(47, 191, 113, .2); border-color: rgba(47, 191, 113, .6); }
.rp-facts { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; font-size: clamp(.75rem, 1.4vw, .92rem); opacity: .75; animation: rpFade 1.2s 2.4s both; }
.rp-achrow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: clamp(1.2rem, 2.6vw, 1.7rem); }
.rp-achrow span { animation: rpPop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.rp-score { margin-top: .6vh; display: flex; align-items: baseline; gap: 12px; animation: rpFade 1s 2.5s both; }
.rp-score small { font-family: Georgia, serif; font-style: italic; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-size: .8rem; }
.rp-score b { font-family: var(--font-display, 'Fredoka', sans-serif); font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; color: #ffcd3c; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(255, 205, 60, .6); }
.rp-parts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rp-parts div { padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); min-width: 62px; animation: rpPop .5s ease both; }
.rp-parts small { display: block; font-size: .66rem; opacity: .7; white-space: nowrap; }
.rp-parts b { font-size: .95rem; }
.rp-parts b.neg { color: #ff5d73; }
.rp-final-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 1vh; min-height: 40px; animation: rpFade 1s 3.4s both; }
.rp-upnext { font-family: Georgia, serif; font-style: italic; opacity: .75; display: flex; align-items: center; gap: 10px; }
.rp-upnext span { width: 120px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); position: relative; overflow: hidden; }
.rp-upnext span::after { content: ''; position: absolute; inset: 0; width: var(--w); background: #ffcd3c; }

/* ---------- subtitles (sit in the bottom letterbox) ---------- */
.rp-subs { position: absolute; left: 50%; bottom: calc(var(--bar) * .5); transform: translate(-50%, 50%); z-index: 5; width: min(900px, 92vw);
  text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rp-sub { font-size: clamp(.9rem, 2vw, 1.25rem); line-height: 1.3; text-shadow: 0 2px 6px #000; }
.rp-sub.now { color: #fff8ec; font-weight: 600; }
.rp-sub.prev { font-size: clamp(.72rem, 1.5vw, .95rem); opacity: .45; animation: rpDim .5s ease both; }
@keyframes rpDim { from { opacity: 1; transform: translateY(8px); } to { opacity: .45; transform: none; } }
.rp-sub.it { font-family: Georgia, serif; font-style: italic; }
.rp-sub .ghost { opacity: 0; }
.rp-sub .tx::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -.12em; background: #ffcd3c; animation: rpCaret .8s steps(1) infinite; }
.rp-sub.done .tx::after { opacity: 0; }
@keyframes rpCaret { 50% { opacity: 0; } }
.rp-sub-age { display: inline-block; margin-right: 10px; padding: 0 7px; border-radius: 6px; font-size: .75em; font-weight: 800; vertical-align: .08em;
  background: color-mix(in srgb, var(--pc) 75%, #000); color: #fff; }

/* ---------- progress + controls ---------- */
.rp-progress { position: absolute; top: calc(var(--bar) * .5 - 2px); left: max(4vw, 16px); right: max(4vw, 16px); z-index: 6; display: flex; gap: 5px; opacity: 0; transition: opacity .6s 1s; }
.rp.on .rp-progress { opacity: .85; }
.rp-progress i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.rp-progress span { display: block; height: 100%; width: 0; background: var(--pc); }
.rp-controls { position: absolute; right: max(2vw, 10px); bottom: 8px; z-index: 7; display: flex; align-items: center; gap: 6px; opacity: .35; transition: opacity .3s; }
.rp-controls:hover, .rp-controls:focus-within, .rp.paused .rp-controls { opacity: 1; }
.rp-ic, .rp-txt { border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 10px; height: 34px; cursor: pointer; font: inherit; font-size: .9rem; }
.rp-ic { width: 34px; }
.rp-txt { padding: 0 12px; font-weight: 700; }
.rp-ic:hover, .rp-txt:hover { background: rgba(255, 255, 255, .24); }
.rp-keys { font-size: .7rem; opacity: .6; margin: 0 4px; letter-spacing: .08em; }
.rp-btn { border: 0; border-radius: 14px; padding: .65rem 1.2rem; font: inherit; font-weight: 800; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: 0 4px 0 rgba(0, 0, 0, .4); }
.rp-btn:hover { filter: brightness(1.2); }
.rp-btn.primary { background: linear-gradient(180deg, #ffd85a, #ffb703); color: #3a2600; box-shadow: 0 4px 0 #b37a00; }

.rp.paused .rp-stage::after { content: '❚❚  paused'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; font-family: Georgia, serif; letter-spacing: .3em; font-size: 1.1rem; padding: 10px 20px; border-radius: 12px; background: rgba(0, 0, 0, .55); }

/* ---------- confetti ---------- */
.rp-confetti { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.rp-confetti i { position: absolute; top: -20px; border-radius: 2px; animation-name: rpConfetti; animation-timing-function: cubic-bezier(.3, .6, .6, 1); animation-iteration-count: 2; animation-fill-mode: both; }
@keyframes rpConfetti { from { transform: translate(0, -20px) rotate(0); } to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .rp { --bar: 64px; }
  .rp-hero { width: min(40vh, 70vw); top: 46%; }
  .rp-chapter { max-width: 70vw; }
  .rp-badges { top: auto; bottom: calc(var(--bar) + 20vh); right: 12px; }
  .rp-badge { padding: 5px 10px 5px 8px; }
  .rp-badge span { font-size: 1.3rem; }
  .rp-spark { width: 46vw; }
  .rp-av-emoji { font-size: min(30vh, 48vw); }
  .rp-final { gap: 2px; justify-content: safe center; overflow-y: auto; scrollbar-width: none; }
  .rp-final-av { width: 13vh; }
  .rp-final-av .rp-av-emoji, .rp-title-av .rp-av-emoji { font-size: 11vh; }
  .rp-parts div { min-width: 0; padding: 3px 7px; }
  .rp-parts small { font-size: .6rem; }
  .rp-btn { padding: .5rem .9rem; font-size: .9rem; }
  .rp-final-actions { gap: 6px; }
  .rp-keys { display: none; }
  .rp-controls { bottom: auto; top: 8px; }
  .rp-progress { top: auto; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-grain, .rp-hero, .rp-bg, .rp-bigicon, .rp-halo { animation: none !important; }
}