:root{--antique-gold:#ad8b43;--berry-red:#993c49;--holly-green:#607b50;--cream-paper:#fbf5e7;--story-background-image:none}
/* The original paper/candle wash remains underneath the lobby artwork.
   Background loading selects WebP, then PNG; other screens keep their wash. */
body:has(.story-shell){background-color:#f6f1e6;background-image:url('/assets/paper-grain.svg?v=800bde19804fadfc'),radial-gradient(ellipse at 10% 45%,#f0dcc239,transparent 60%)}
.story-screen{position:relative;isolation:isolate;overflow:hidden;padding:30px 54px 20px;border:2px solid var(--antique-gold);border-radius:18px;background-color:var(--cream-paper);background-image:var(--story-background-image),url('/assets/paper-grain.svg?v=800bde19804fadfc'),radial-gradient(ellipse at 5% 58%,#d8b27645,transparent 32%),radial-gradient(ellipse at 97% 52%,#dfc4a059,transparent 36%),radial-gradient(ellipse at 30% 24%,#b7c7ad20,transparent 50%),linear-gradient(130deg,#fcf9ef,#f8f0df 60%,#fcf9ef);background-size:cover,256px 256px,cover,cover,cover,cover;box-shadow:0 4px 17px #79663c0b}
.story-screen::before{content:'';position:absolute;inset:8px;border:1px solid #a78a48;border-radius:9px;pointer-events:none;z-index:1}
.story-lobby{background-image:var(--lobby-background-image,none),var(--story-background-image),url('/assets/paper-grain.svg?v=800bde19804fadfc'),radial-gradient(ellipse at 5% 58%,#d8b27645,transparent 32%),radial-gradient(ellipse at 97% 52%,#dfc4a059,transparent 36%),radial-gradient(ellipse at 30% 24%,#b7c7ad20,transparent 50%),linear-gradient(130deg,#fcf9ef,#f8f0df 60%,#fcf9ef);background-position:center;background-size:cover,cover,256px 256px,cover,cover,cover,cover}
:root[data-lobby-background=webp] .story-lobby{--lobby-background-image:url('/assets/lobby-bg.webp?v=6ae638b3bc3f418f')}
:root[data-lobby-background=png] .story-lobby{--lobby-background-image:url('/assets/lobby-bg.png?v=2f47248513995ae7')}
:root[data-lobby-background] .story-lobby .story-candle{visibility:hidden}
.story-candle{position:absolute;top:14%;bottom:12%;width:16%;pointer-events:none;opacity:.65;filter:blur(12px);z-index:-1;background:radial-gradient(ellipse 24px 48px at 40% 35%,#fffad4 10%,#f3c57a88 30%,transparent 90%),radial-gradient(ellipse 24px 50px at 72% 48%,#fff5c8 12%,#daa15e66 42%,transparent 90%),radial-gradient(ellipse at center,#edcf9c45,transparent 70%)}
.story-candle.left{left:0}.story-candle.right{right:0;transform:scaleX(-1)}
.story-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
/* Retain the breathing room left by the removed all-roles button. */
.story-lobby .story-content{padding-bottom:24px}
.story-heading{text-align:center;max-width:calc(100% - 100px)}.story-heading h2{font:normal clamp(24px,2.25vw,34px)/1.25 Georgia,serif;color:#39392a;margin:0}.story-heading p{font-size:13px;letter-spacing:.35px;color:#8b7857;margin:9px 0 0}
.story-choices{--story-card-width:clamp(170px,19vw,280px);--story-card-gap:clamp(40px,4.5vw,80px);display:flex;align-items:flex-start;justify-content:center;gap:var(--story-card-gap);margin:29px auto 0;max-width:100%;padding-bottom:68px}
.story-heroes{display:flex;gap:var(--story-card-gap)}
.story-choice{position:relative;width:var(--story-card-width);flex-shrink:0;isolation:isolate}
.story-card{width:100%;aspect-ratio:5/7;display:block;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:0 14px 28px -10px rgba(70,45,20,.35),0 4px 10px rgba(70,45,20,.12);transform:scale(1);transition:transform 200ms ease-out,filter 200ms ease-out,box-shadow 200ms ease-out;position:relative;z-index:2}
.story-card img{width:100%;height:100%;object-fit:contain;display:block;border-radius:7px}.story-card:hover:not(:disabled){background:transparent}.story-card:focus-visible{outline:2px solid #d6ac55;outline-offset:5px}
.story-spotlight{position:absolute;inset:-40px -28% -15px;background:radial-gradient(ellipse at 50% 10%,#fff5c99e,transparent 70%);opacity:0;pointer-events:none;transition:opacity 200ms ease-out;z-index:-1}
.story-card-label{position:absolute;top:calc(100% + 15px);left:-12px;right:-12px;padding:8px 13px;background:linear-gradient(100deg,#f5ead3e6,#fff9eae6 50%,#f5ead3e6);border-top:1px solid #c9ae6e80;border-bottom:1px solid #c9ae6e80;color:#4b4b34;text-align:center;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 200ms ease-out,transform 200ms ease-out,visibility 200ms ease-out;z-index:5;border-radius:3px}
.story-card-label>div{display:flex;gap:10px;align-items:center;justify-content:center}.story-card-label strong{font:normal 19px Georgia,serif}.story-card-label span{font-size:10px;color:#887344}.story-card-label small{display:block;font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7c7157}.story-card-label button{display:none;margin:5px auto 0;padding:4px 15px;font-size:11px;background:var(--green);color:white;border-color:var(--green)}
.story-sparkles{position:absolute;inset:-15px -18px;z-index:3;opacity:0;pointer-events:none;color:#b3964b;transition:opacity 200ms ease-out}
.story-sparkles i{position:absolute;font-size:20px;font-style:normal;text-shadow:0 0 8px #edca61aa}.story-sparkles i:nth-child(1){top:10%;left:-7px}.story-sparkles i:nth-child(2){top:37%;right:-7px;font-size:25px}.story-sparkles i:nth-child(3){bottom:13%;left:-10px;font-size:15px}.story-sparkles i:nth-child(4){top:-12px;right:20%;font-size:35px}
.story-choice:has(:focus-visible) .story-card,.story-choice[data-touched=true] .story-card{transform:translateY(-8px) scale(1.08) perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 22px 40px -12px rgba(70,45,20,.42),0 6px 14px rgba(70,45,20,.14),0 0 30px #f1c96870;filter:brightness(1.025)}
.story-choice:has(:focus-visible) .story-card-label,.story-choice[data-touched=true] .story-card-label{opacity:1;visibility:visible;transform:translateY(0)}
.story-choice:has(:focus-visible) .story-sparkles,.story-choice[data-touched=true] .story-sparkles,.story-choice:has(:focus-visible) .story-spotlight,.story-choice[data-touched=true] .story-spotlight{opacity:1}
.story-choices:has(:focus-visible) .story-choice:not(:has(:focus-visible)) .story-card,.story-choices:has([data-touched=true]) .story-choice:not([data-touched=true]) .story-card{transform:scale(.97);filter:brightness(.8) saturate(.9)}
.story-screen.is-touch .story-card-label button{display:block}.story-screen.is-touch .story-choices{padding-bottom:94px}
@media(hover:hover) and (pointer:fine){
  .story-screen:not(.is-touch) .story-choice:hover .story-card{transform:translateY(-8px) scale(1.08) perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 22px 40px -12px rgba(70,45,20,.42),0 6px 14px rgba(70,45,20,.14),0 0 30px #f1c96870;filter:brightness(1.025)}
  .story-screen:not(.is-touch) .story-choice:hover .story-card-label{opacity:1;visibility:visible;transform:translateY(0)}
  .story-screen:not(.is-touch) .story-choice:hover .story-spotlight,.story-screen:not(.is-touch) .story-choice:hover .story-sparkles{opacity:1}
  .story-screen:not(.is-touch) .story-choices:has(.story-choice:hover) .story-choice:not(:hover) .story-card{transform:scale(.97);filter:brightness(.8) saturate(.9)}
}
.continue-battle{width:min(540px,80%);display:flex;justify-content:center;align-items:center;gap:16px;padding:8px 18px;font-size:12px;letter-spacing:.2px;background:#e5e9da99;border:1px solid #b7b58e7a;color:var(--green);margin:2px 0 8px;border-radius:5px}.continue-battle span:first-child{color:#a08b49}.continue-battle span:last-child{margin-left:auto}.continue-battle span:first-child{margin-right:auto}
.all-seats-link{font-size:12px;background:transparent;border:0;padding:5px 14px;text-decoration:underline;text-underline-offset:4px;color:#60705b}.all-seats-link:hover:not(:disabled){background:#e6e9d86b}
.story-footer{justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;color:#8a826e;font-size:10px;letter-spacing:0}.story-footer .text-button{font-size:10px;color:#64725c;padding:2px 0}.story-footer>span:last-child{opacity:.8}
.skill-note{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin:-12px 0 16px}
@media(max-height:790px) and (min-width:1000px){.story-screen{padding-top:25px;padding-bottom:14px}.story-choices{--story-card-width:min(19vw,calc((100svh - 340px)*5/7),280px);margin-top:24px;padding-bottom:64px}.story-heading h2{font-size:29px}.story-footer{margin-top:11px}}
@media(orientation:landscape) and (max-height:500px){
  .story-shell{padding:8px 18px}.story-shell .header{margin-bottom:9px}.story-shell .header h1{font-size:21px}.story-shell .header .eyebrow{font-size:8px;letter-spacing:1.6px}.story-shell .emblem{width:35px;height:35px;font-size:24px}.story-shell .header-actions{max-width:none;flex-wrap:nowrap;gap:6px}.story-shell .header-actions button{font-size:10px;padding:7px 9px}.story-shell .header-actions .pill{font-size:10px;padding:5px 8px}
  .story-screen{padding:14px 35px 8px;border-radius:12px}.story-screen::before{inset:6px;border-radius:5px}
  .story-lobby .story-content{padding-bottom:18px}
  .story-heading h2{font-size:20px}.story-heading p{font-size:10px;margin-top:5px}.story-choices{--story-card-width:min(15vw,calc((100svh - 226px)*5/7));margin-top:15px;padding-bottom:42px}.story-card{border-radius:4px}.story-card img{border-radius:4px}
  .story-card-label{padding:5px 9px;left:-19px;right:-19px;top:calc(100% + 8px)}.story-card-label strong{font-size:13px}.story-card-label span{font-size:9px}.story-card-label small{font-size:9px;margin-top:3px}.story-card-label>div{gap:7px}.story-card-label button{font-size:10px;padding:3px 16px;min-height:28px;margin-top:4px}.story-screen.is-touch .story-choices{padding-bottom:88px;--story-card-width:min(15vw,calc((100svh - 260px)*5/7))}
  .all-seats-link{font-size:10px;padding:3px 10px}.continue-battle{font-size:10px;padding:4px 15px;margin:0 0 4px;max-width:350px}.story-footer{font-size:9px;margin-top:8px;gap:13px}.story-footer .text-button{font-size:9px}.story-sparkles i{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.story-screen *,.story-screen *::before,.story-screen *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

[data-story-pick="king"] img,.prepare-card[data-role="king"] .prepare-leader-art{view-transition-name:story-card-king}
[data-story-pick="nax"] img,.prepare-card[data-role="nax"] .prepare-leader-art{view-transition-name:story-card-nax}
[data-story-pick="clara"] img,.prepare-card[data-role="clara"] .prepare-leader-art{view-transition-name:story-card-clara}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(story-card-king),::view-transition-group(story-card-nax),::view-transition-group(story-card-clara){animation-duration:380ms;animation-timing-function:cubic-bezier(.2,.7,.25,1)}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* The supplied PNG is already transparent and color-adjusted. Account for
   its transparent margins so visible art sits 9px inside the inner frame.
   If both formats fail, leave just the frame; there is no vector fallback. */
.story-screen{--corner-arm:clamp(90px,10vw,160px);--inner-line:8px}
.story-prepare{--corner-arm:clamp(70px,7vw,100px)}
.story-corner{position:absolute;width:var(--corner-arm);aspect-ratio:1;pointer-events:none;z-index:2;background:var(--story-ornament-image,none) center/contain no-repeat;mix-blend-mode:multiply}
:root[data-story-ornament=webp]{--story-ornament-image:url('/assets/corner-ornament.webp?v=0576b780ee3b9f4e')}
:root[data-story-ornament=png]{--story-ornament-image:url('/assets/corner-ornament.png?v=9e090e0860bd0e45')}
.story-corner.tl,.story-corner.tr{top:calc(var(--inner-line) + 9px - var(--corner-arm)*.0183)}
.story-corner.bl,.story-corner.br{bottom:calc(var(--inner-line) + 9px - var(--corner-arm)*.0183)}
.story-corner.tl,.story-corner.bl{left:calc(var(--inner-line) + 9px - var(--corner-arm)*.0343)}
.story-corner.tr,.story-corner.br{right:calc(var(--inner-line) + 9px - var(--corner-arm)*.0343)}
.story-corner.tr{transform:scaleX(-1)}.story-corner.bl{transform:scaleY(-1)}.story-corner.br{transform:scale(-1)}
@media(orientation:landscape) and (max-height:500px){.story-screen{--inner-line:6px}}

/* Pointer-driven tilt and sheen stay on the card; labels remain flat. */
.story-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--sheen-x,50%) var(--sheen-y,50%),#fffce936,transparent 58%);transition:opacity 200ms ease-out}
.story-card.pointer-active::after{opacity:1}
.story-burst-layer{position:fixed;inset:0;width:100vw;height:100vh;z-index:10000;pointer-events:none;view-transition-name:story-burst-layer}
::view-transition-group(story-burst-layer){animation:none;z-index:10}
::view-transition-old(story-burst-layer){display:none}
::view-transition-new(story-burst-layer){animation:none;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){
  .story-lobby .story-card{transform:none!important}
  .story-card::after,.story-sparkles,.story-burst-layer{display:none!important}
}