/* A result is a scene: the human stays on the left, whatever the verdict. */
.outcome-duel {
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:end;gap:clamp(24px,7vw,100px);width:min(100%,760px);margin:0 auto;
}
.outcome-person { position:relative;isolation:isolate;min-width:0;margin:0;text-align:center; }
.outcome-silhouette { position:relative;z-index:1;width:min(100%,260px);margin:0 auto;transform-origin:50% 90%; }
.outcome-silhouette .portrait {
  width:100%;aspect-ratio:3 / 4;background:transparent;border:0;box-shadow:none;
}
.outcome-aura {
  position:absolute;z-index:0;inset:-12% -30% 0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse closest-side,#000 50%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side,#000 50%,transparent 100%);
}
.outcome-aura::before,.outcome-aura::after { content:'';position:absolute;inset:0; }
.outcome-aura::before {
  background:repeating-conic-gradient(from -18deg at 50% 76%,transparent 0deg 13deg,#d9b87648 14deg 17deg,transparent 19deg 31deg,#bda67932 33deg 37deg,transparent 39deg 56deg);
  mask-image:radial-gradient(ellipse at 50% 73%,#000 10%,#000a 38%,transparent 71%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 73%,#000 10%,#000a 38%,transparent 71%);
  transform-origin:50% 76%;
}
.outcome-aura::after { background:radial-gradient(ellipse at 50% 65%,#d9bb6d50,transparent 63%);filter:blur(12px); }
.outcome-person figcaption { position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;margin:-16px -8px 0;min-height:55px; }
.outcome-person-label { color:#b4b7a3;font-size:9px;line-height:1.5;letter-spacing:.13em; }
.outcome-person figcaption b { font-family:var(--display);font-size:clamp(20px,2.8vw,33px);font-weight:400;color:#e5d8b6;line-height:1.2;text-shadow:0 2px 16px #050b0c; }
.outcome-divider { position:absolute;left:50%;top:57%;transform:translate(-50%,-50%) rotate(-9deg);color:#b09b705f;font-family:Georgia,serif;font-size:35px; }
.is-winner .outcome-silhouette { animation:outcome-rise 1.5s cubic-bezier(.19,.7,.2,1) both,outcome-float 4.8s ease-in-out 1.5s infinite; }
.is-winner .outcome-silhouette .portrait { filter:saturate(1.08) brightness(1.12) drop-shadow(0 0 20px #dfb76730); }
.is-winner .outcome-aura { animation:outcome-light 1.8s ease-out both; }
.is-winner .outcome-aura::before { animation:outcome-rays 8s ease-in-out infinite alternate; }
.is-winner .outcome-person-label { color:#ddbd78; }
.is-loser .outcome-silhouette { animation:outcome-recede 2s cubic-bezier(.2,.6,.2,1) both; }
.is-loser .outcome-silhouette .portrait { filter:grayscale(.8) saturate(.35) brightness(.65); }
.is-loser .outcome-aura { animation:outcome-extinguish 1.5s ease-out both; }
.is-loser figcaption b { color:#939d94; }
.is-loser .outcome-person-label { color:#9b9690; }
.is-draw .outcome-silhouette { opacity:.85;transform:scale(.95); }
.is-draw .outcome-aura { opacity:.24; }
.is-draw .outcome-silhouette .portrait { filter:saturate(.7); }
@keyframes outcome-rise { from{opacity:.45;transform:translateY(22px) scale(.86)} to{opacity:1;transform:translateY(-8px) scale(1.07)} }
@keyframes outcome-float { 0%,100%{transform:translateY(-8px) scale(1.07)} 50%{transform:translateY(-18px) scale(1.1)} }
@keyframes outcome-recede { from{opacity:.88;transform:translateY(0) scale(1)} to{opacity:.32;transform:translateY(19px) scale(.78)} }
@keyframes outcome-light { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1.08)} }
@keyframes outcome-extinguish { from{opacity:.5} to{opacity:0} }
@keyframes outcome-rays { from{transform:rotate(-6deg) scale(.97);opacity:.65} to{transform:rotate(7deg) scale(1.05);opacity:1} }

/* The old framed dialog becomes an open, illuminated stage. */
.result-theatre {
  --outcome-light-x:26%;padding:24px;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(ellipse at var(--outcome-light-x) 46%,#74623a39,transparent 55%),linear-gradient(135deg,#07131aeF,#0a1719f5 55%,#040b12f2);
  backdrop-filter:blur(9px);animation:outcome-screen-in .45s ease-out both;
}
.result-theatre[data-outcome="loss"] { --outcome-light-x:74%;background:radial-gradient(ellipse at 74% 45%,#6b553b38,transparent 55%),linear-gradient(120deg,#190e18f5,#0b141bf2); }
.result-theatre[data-outcome="draw"] { --outcome-light-x:50%; }
.result-cinematic { position:relative;isolation:isolate;width:min(960px,100%);margin:auto;text-align:center; }
.result-cinematic::before {
  content:'';position:absolute;inset:10% -2% 18%;z-index:-1;pointer-events:none;
  background:linear-gradient(168deg,transparent 26%,#d4b98707 27% 49%,transparent 50%);
}
.result-heading { position:relative;z-index:3;margin-bottom:4px; }
.result-heading > .eyebrow { color:#b7ad93;letter-spacing:.22em;font-size:9px; }
.result-heading h2 { font-size:clamp(46px,6.6vw,82px);line-height:1.08;letter-spacing:-.04em;color:#e7d6a9;margin:10px 0 8px;transform:rotate(-2deg); }
.result-theatre[data-outcome="loss"] .result-heading h2 { color:#ce9882;transform:rotate(1.2deg); }
.result-theatre[data-outcome="draw"] .result-heading h2 { color:#ccd4bd; }
.result-verdict { max-width:630px;margin:10px auto 0;color:#aebbaa;font-size:13px;line-height:1.7; }
.result-theatre .outcome-duel { width:min(620px,95%);margin:34px auto 0; }
.result-theatre .outcome-silhouette { width:min(100%,clamp(120px,27svh,215px)); }
.result-theatre .outcome-person figcaption b { font-size:clamp(20px,2.8vw,29px); }
.result-footer { position:relative;z-index:3;margin:16px auto 0;max-width:580px; }
.result-footer .result-stats { gap:42px;margin:0 0 17px;font-size:20px; }
.result-footer .result-stats small { font-size:8px;color:#909e94; }
.result-actions { display:flex;flex-direction:column;align-items:center;gap:8px; }
.result-actions .primary { width:auto;max-width:100%;gap:35px;min-height:49px;padding:14px 24px;letter-spacing:.09em;font-size:12px; }
.result-actions .subtle-button { font-size:11px;padding:10px 15px;line-height:1.5; }
.result-theatre[data-outcome="loss"] .result-actions .primary { background:#af806a; }
@keyframes outcome-screen-in { from{opacity:0} to{opacity:1} }

/* Chapter epilogues share the same left/right outcome language. */
.story-screen.chapter-outcome { display:block;overflow:clip;width:min(100%,1160px);padding:32px 5vw 55px; }
.chapter-outcome-stage { position:relative;isolation:isolate; }
.chapter-outcome-heading { position:relative;z-index:3;text-align:center; }
.chapter-outcome-heading > .text-button { width:fit-content;margin-bottom:19px; }
.chapter-outcome-heading > .eyebrow { font-size:10px;letter-spacing:.18em;color:#cfbe98; }
.chapter-outcome-heading h1 { font-size:clamp(45px,5.9vw,76px);line-height:1.12;margin:19px auto 14px;transform:rotate(-1.3deg);text-wrap:balance;max-width:860px; }
.chapter-outcome-heading h1:focus,.finale-caption h1:focus { outline:none; }
.chapter-outcome-heading .story-lead { max-width:720px;margin:0 auto;font-size:19px; }
.chapter-outcome .outcome-duel { margin:55px auto 0; }
.chapter-outcome .outcome-silhouette { width:min(100%,285px); }
.chapter-outcome[data-outcome="loss"] .chapter-outcome-heading h1 { color:#d0a38b; }
.chapter-outcome-story { position:relative;max-width:740px;margin:35px auto 0;padding-top:24px;border-top:1px solid var(--line); }
.chapter-outcome-story .story-paragraphs { max-width:none;margin:0; }
.chapter-outcome-story .story-paragraphs p { font-size:14px;line-height:1.85; }
.chapter-outcome-story .story-actions { gap:12px; }
.chapter-outcome-story .story-actions .primary { max-width:100%; }
.chapter-outcome .story-ending-mark { margin:20px auto 0; }

/* The final painting has its own depth, light and real, animated card faces. */
.finale-splash { position:fixed;inset:0;z-index:45;isolation:isolate;min-height:100svh;overflow:hidden;background:#07111d; }
.finale-art { position:absolute;inset:0;z-index:-3;background:url('./assets/shustry-throne.jpg') center 18% / cover no-repeat;animation:throne-reveal 3.2s cubic-bezier(.12,.55,.2,1) both; }
.finale-splash::after { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#06111df2,transparent 60%),linear-gradient(90deg,#09151d65,transparent 66%); }
.finale-rays {
  position:absolute;inset:-40%;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.35;
  background:repeating-conic-gradient(from -34deg at 52% 35%,transparent 0deg 19deg,#f0c9813b 20deg 23deg,transparent 24deg 42deg,#d5ab6336 43deg 46deg);
  mask-image:radial-gradient(ellipse at 52% 35%,transparent 7%,#0008 28%,transparent 62%);
  -webkit-mask-image:radial-gradient(ellipse at 52% 35%,transparent 7%,#0008 28%,transparent 62%);
  animation:throne-rays 13s ease-in-out infinite alternate;
}
.finale-flight { position:absolute;inset:0;z-index:0;pointer-events:none;perspective:750px;overflow:hidden; }
.finale-flying-card {
  position:absolute;left:50%;top:52%;display:block;width:88px;height:124px;opacity:0;
  transform-style:preserve-3d;will-change:transform,opacity;
  animation:throne-card-flight 10s cubic-bezier(.15,.45,.35,1) var(--flight-delay,0s) infinite;
}
.finale-flying-card .playing-card { width:88px;height:124px;box-shadow:3px 12px 20px #0009,0 0 16px #d2ad6640; }
.finale-caption { position:absolute;z-index:2;left:6vw;right:6vw;bottom:6vh;max-width:850px; }
.finale-caption > .eyebrow { color:#e7c790;letter-spacing:.23em;font-size:10px;text-shadow:0 2px 8px #000; }
.finale-caption h1 { margin:15px 0 12px;font-size:clamp(55px,8vw,112px);line-height:1.04;color:#eddfbd;letter-spacing:-.035em;text-shadow:0 4px 24px #06111d; }
.finale-caption p { max-width:560px;color:#c6cbbd;font-family:Georgia,serif;font-style:italic;font-size:19px;line-height:1.6;margin:0 0 24px; }
.finale-caption .primary { width:fit-content;gap:45px;background:#c3a476;font-size:12px;min-height:49px; }
.finale-skip { position:absolute;z-index:4;right:4vw;top:24px;min-height:44px;max-width:calc(100% - 32px);padding:10px 14px;border:1px solid #c8b68c42;background:#07121baf;color:#b9c2b5;font-size:11px;line-height:1.5; }
.finale-skip:hover { color:#ead5ae;border-color:#c8b68c99; }
@keyframes throne-reveal { from{opacity:.2;transform:scale(1.13);filter:blur(3px)} to{opacity:1;transform:scale(1);filter:blur(0)} }
@keyframes throne-rays { from{transform:rotate(-5deg);opacity:.25} to{transform:rotate(5deg);opacity:.45} }
@keyframes throne-card-flight {
  0%{opacity:0;transform:translate3d(-50%,-50%,-300px) rotateY(-70deg) rotateZ(0deg) scale(.25)}
  12%{opacity:0}
  24%{opacity:.85}
  78%{opacity:.95}
  100%{opacity:0;transform:translate3d(var(--flight-x),var(--flight-y),160px) rotateX(26deg) rotateY(210deg) rotateZ(var(--flight-turn)) scale(var(--flight-scale,1))}
}
@media(max-width:600px) {
  .result-theatre { padding:24px 12px; }
  .result-heading h2 { font-size:53px;margin-top:12px; }
  .result-verdict { max-width:350px;font-size:12px;line-height:1.65; }
  .result-theatre .outcome-duel { gap:24px;width:100%;margin-top:34px; }
  .result-theatre .outcome-silhouette { width:min(100%,190px); }
  .outcome-aura { inset:-8% -16% 0; }
  .outcome-person figcaption { margin:-7px -4px 0;gap:5px; }
  .outcome-person-label { font-size:8px;letter-spacing:.06em; }
  .result-footer { margin-top:24px; }
  .result-actions .primary { font-size:11px;padding:15px 17px;gap:20px; }
  .story-screen.chapter-outcome { padding:26px 5vw 38px; }
  .chapter-outcome-heading h1 { font-size:43px; }
  .chapter-outcome-heading .story-lead { font-size:17px; }
  .chapter-outcome .outcome-duel { gap:24px;margin-top:40px; }
  .chapter-outcome-story { margin-top:23px; }
  .chapter-outcome-story .story-paragraphs p { font-size:13px; }
  .finale-art { background-position:50% 35%; }
  .finale-caption { left:6vw;right:6vw;bottom:5vh; }
  .finale-caption h1 { font-size:clamp(48px,13vw,76px);max-width:450px; }
  .finale-caption p { font-size:16px;max-width:320px;margin-bottom:19px; }
  .finale-caption > .eyebrow { font-size:8px;letter-spacing:.15em; }
  .finale-skip { top:16px;right:16px;font-size:10px; }
}
@media(max-height:560px) and (min-width:601px) {
  .result-theatre { padding:13px 20px; }
  .result-heading h2 { font-size:43px;margin:5px 0; }
  .result-verdict { margin-top:6px;font-size:11px; }
  .result-theatre .outcome-silhouette { width:120px; }
  .result-theatre .outcome-person figcaption { min-height:42px; }
  .result-footer { margin-top:8px; }
  .result-footer .result-stats { position:absolute;left:0;top:4px;gap:22px; }
  .finale-caption h1 { font-size:56px; }
  .finale-caption p { font-size:15px;margin-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .is-winner .outcome-silhouette { opacity:1;transform:translateY(-6px) scale(1.07); }
  .is-loser .outcome-silhouette { opacity:.32;transform:translateY(14px) scale(.78); }
  .is-loser .outcome-aura { opacity:0; }
  .finale-art { opacity:1;transform:none;filter:none; }
  .finale-flying-card { opacity:.45;transform:translate(var(--flight-x),var(--flight-y)) rotate(var(--flight-turn)) scale(.65);will-change:auto; }
  .finale-flying-card:nth-child(n+7) { display:none; }
}