/* Story mode (arena.js story): broadcast opener, challenger banner, dialogue with portraits and quick-time prompts. */
.story{grid-area:1/1/-1/-1;position:relative;z-index:8;pointer-events:none}
.story[hidden]{display:none}
.story-on .combo-book,.story-on .stage-title,.story-on .masthead .utility>button:not(#story-btn):not(#deck-back):not(#deck-next){opacity:0;pointer-events:none}
.story-on .combo-book{transition:opacity .3s}

/* Designli Arena sting */
.st-sting{position:absolute;left:50%;top:38%;display:flex;align-items:center;gap:22px;padding:22px 40px 22px 34px;transform:translate(-50%,-50%) skewX(-8deg);
 background:linear-gradient(100deg,rgba(9,10,28,.94),rgba(24,20,60,.94));border-left:8px solid var(--coral,#f87565);box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;visibility:hidden}
.st-sting img{height:clamp(40px,4vw,74px);display:block}
.st-sting b{font:900 clamp(40px,4vw,74px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.06em;background:linear-gradient(180deg,#fff,#ffe066 45%,#ff9d1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-sting span{display:flex;align-items:center;gap:8px;margin-left:10px;padding:6px 12px;background:#d4202f;font:800 16px/1 Rubik,sans-serif;letter-spacing:.2em;color:#fff}
.st-sting span i{width:10px;height:10px;border-radius:50%;background:#fff;animation:st-blink 1s steps(2) infinite}
.st-sting::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;mix-blend-mode:overlay}
.st-sting.show{visibility:visible;animation:st-sting-in .55s cubic-bezier(.2,1.3,.4,1) both}
.st-sting.show::after{animation:st-sweep 1.4s .4s ease-out both}

/* Here comes a new challenger */
.st-banner{position:absolute;left:0;right:0;top:64%;height:clamp(90px,10vw,170px);display:grid;place-items:center;transform:translateY(-50%) scaleY(0);opacity:0;
 background:repeating-linear-gradient(-45deg,#b0101c 0 26px,#1a0408 26px 52px);box-shadow:0 0 0 6px #000,0 0 80px rgba(255,30,40,.6)}
.st-banner b{padding:0 .4em;font:900 clamp(38px,4.6vw,88px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.02em;color:#fff;background:#000;-webkit-text-stroke:2px #000;
 text-shadow:0 0 18px rgba(255,60,60,.9);transform:skewX(-10deg)}
.st-banner.show{opacity:1;transform:translateY(-50%);transition:transform .22s cubic-bezier(.2,1.4,.4,1),opacity .1s}
.st-banner.show b{animation:st-blink .3s steps(2) 6}
.alarm .stage::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(255,0,20,.55));animation:st-alarm .48s steps(2) infinite}

/* Conversations cut away from the fight to their own scene: a slanted slash wipes in, you on the left, them on the right,
   the speaker lit and the listener dimmed; it wipes away again when the fight resumes. Lines in the fight are captions. */
.story-on .action-bar,.story-on .input-hud{opacity:0;pointer-events:none;transition:opacity .3s}
.st-aside{position:absolute;inset:0;overflow:hidden;visibility:hidden;--l:63,224,197;--r:255,75,58;
 background:linear-gradient(112deg,rgba(var(--l),.34) 0 49.5%,#fff 49.6% 50.4%,rgba(var(--r),.34) 50.5% 100%),
  repeating-linear-gradient(112deg,rgba(255,255,255,.06) 0 3px,transparent 3px 26px),radial-gradient(ellipse at 50% 110%,#2b2160,#06071a 72%)}
.st-aside.with-mentor{--r:255,210,63}
.st-aside.open{visibility:visible;animation:st-wipe-in .38s cubic-bezier(.75,0,.2,1) both}
.st-aside.closing{animation:st-wipe-out .36s cubic-bezier(.75,0,.2,1) both}
.st-slash{position:absolute;top:-10%;bottom:-10%;left:-13%;width:22px;z-index:6;background:#fff;box-shadow:0 0 40px 14px rgba(255,255,255,.85);transform:skewX(-24deg);opacity:0}
.st-aside.open .st-slash{animation:st-slash .38s cubic-bezier(.75,0,.2,1) both}
.st-aside.closing .st-slash{animation:st-slash .36s cubic-bezier(.75,0,.2,1) both}
.st-vs{position:absolute;left:50%;top:40%;z-index:4;font:900 clamp(90px,9vw,170px)/1 Satoshi,sans-serif;font-style:italic;color:#fff;-webkit-text-stroke:5px #000;paint-order:stroke fill;
 text-shadow:9px 9px 0 #ff4b3a,0 0 50px rgba(255,255,255,.5);transform:translate(-50%,-50%) skewX(-10deg);opacity:0}
.st-aside.with-robot.open .st-vs{animation:st-vs .45s .3s cubic-bezier(.2,1.6,.4,1) both}
.st-aside .st-slot{position:absolute;bottom:0;width:45%;height:93%;--who:#ffd23f;--rgb:255,210,63;transition:filter .25s,transform .3s cubic-bezier(.2,1.3,.4,1)}
.st-aside .st-slot.left{left:1.5%;transform-origin:0 100%}
.st-aside .st-slot.right{right:1.5%;transform-origin:100% 100%}
.st-aside.open .st-slot.left{animation:st-bust-l .55s .1s cubic-bezier(.2,1.2,.3,1) backwards}
.st-aside.open .st-slot.right{animation:st-bust-r .55s .16s cubic-bezier(.2,1.2,.3,1) backwards}
.st-aside .st-slot.dim{filter:grayscale(.7) brightness(.42);transform:scale(.92) translateY(3%)}
.st-aside .st-slot.talk{filter:none;transform:scale(1.03)}
.st-aside .st-slot.pop .st-art img{animation:st-zoom .35s cubic-bezier(.2,1.2,.4,1)}
.who-hero{--who:#3fe0c5;--rgb:63,224,197}.who-robot{--who:#ff4b3a;--rgb:255,75,58}.who-mentor{--who:#ffd23f;--rgb:255,210,63}
.st-art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 38%,rgba(var(--rgb),.55),rgba(8,8,24,.92) 70%)}
.st-slot.left .st-art{clip-path:polygon(0 5%,88% 0,100% 100%,0 100%)}
.st-slot.right .st-art{clip-path:polygon(12% 0,100% 5%,100% 100%,0 100%)}
.st-art::before{content:'';position:absolute;inset:-20%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
 background:repeating-conic-gradient(from 0deg at 50% 42%,rgba(var(--rgb),.9) 0 1.6deg,transparent 2deg 7deg);-webkit-mask-image:radial-gradient(circle at 50% 42%,transparent 0 22%,#000 55%);mask-image:radial-gradient(circle at 50% 42%,transparent 0 22%,#000 55%)}
.st-slot.talk .st-art::before{animation:st-lines .12s steps(2) infinite}
.st-art::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 6px #000,inset 0 0 0 12px var(--who)}
.st-art img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%)}
.st-tag{position:absolute;z-index:3;top:8%;font:900 clamp(40px,4.2vw,84px)/.9 Satoshi,sans-serif;font-style:italic;letter-spacing:-.01em;color:#fff;white-space:nowrap;
 -webkit-text-stroke:4px #000;paint-order:stroke fill;text-shadow:7px 7px 0 var(--who),0 0 30px rgba(0,0,0,.6);transition:opacity .2s}
.st-slot.left .st-tag{left:5%;transform:rotate(-5deg) skewX(-10deg)}
.st-slot.right .st-tag{right:14%;transform:rotate(5deg) skewX(-10deg)}
.st-slot.dim .st-tag{opacity:.25}
.st-slot.pop .st-tag{animation:st-stamp .35s cubic-bezier(.2,1.6,.4,1)}

.st-say{position:absolute;z-index:9;left:50%;bottom:6%;width:min(1180px,62%);padding:26px 34px 30px;background:#0b0b1a;border:5px solid var(--who,#fff);
 box-shadow:12px 12px 0 var(--who,#fff),0 20px 50px rgba(0,0,0,.6);transform:translateX(-50%) skewX(-7deg) translateY(30px);opacity:0;visibility:hidden;--who:#ffd23f}
.st-say.show{opacity:1;visibility:visible;transform:translateX(-50%) skewX(-7deg);transition:transform .2s cubic-bezier(.2,1.4,.4,1),opacity .1s}
.st-say.subtitle{bottom:5%;width:min(1300px,70%);padding:20px 30px 24px}
.st-say.shout.show{animation:st-shake .32s .05s}
.st-who{position:absolute;left:22px;top:-22px;padding:6px 16px;background:var(--who);color:#0b0b1a;font:900 clamp(16px,1.2vw,22px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.08em;box-shadow:4px 4px 0 #000}
.st-line{margin:0;font:800 clamp(24px,2.05vw,42px)/1.28 Rubik,sans-serif;color:#fff;transform:skewX(7deg);min-height:2.56em}
.st-say.subtitle .st-line{font-size:clamp(22px,1.8vw,36px);min-height:0}
.st-line span{display:inline-block;opacity:0;transform:translateY(10px) scale(1.3)}
.st-line span.on{opacity:1;transform:none;transition:opacity .08s,transform .16s cubic-bezier(.2,1.6,.4,1)}
.st-line .hot{color:var(--who);text-shadow:0 0 18px rgba(255,255,255,.25)}
.st-say .st-next{position:absolute;right:20px;bottom:8px;font:700 12px/1 Rubik,sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.4)}

/* The commentary booth: both casters on air in a small box under your health bar, clear of the fighters (the robot fills the
   right side). Whoever is talking lights up and bounces; the line runs beside them. Fight calls are voice only over the big graphics. */
.st-booth{position:absolute;left:1.6%;top:15.5%;display:grid;grid-template-columns:auto auto minmax(0,auto);grid-template-areas:"a b cap" "live live cap";
 align-items:center;column-gap:10px;row-gap:7px;opacity:0;visibility:hidden;transform:translateX(-24px);
 transition:transform .25s cubic-bezier(.2,1.3,.4,1),opacity .15s,visibility 0s .25s}
.st-booth.show{opacity:1;visibility:visible;transform:none;transition:transform .25s cubic-bezier(.2,1.3,.4,1),opacity .15s}
.st-cast{position:relative;width:clamp(64px,4.6vw,92px);aspect-ratio:4/5;background:#120c2a;filter:grayscale(.55) brightness(.5);transition:filter .2s,transform .2s}
.st-cast.a{grid-area:a;clip-path:polygon(0 0,100% 4%,92% 100%,0 100%);--c:#f2f5ff}
.st-cast.b{grid-area:b;clip-path:polygon(0 4%,100% 0,100% 100%,8% 100%);--c:#ff7ad1}
.st-cast img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.st-cast::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 3px #000,inset 0 0 0 6px var(--c)}
.st-cast b{display:none}
.st-cast.talk{filter:none;transform:scale(1.08);animation:st-talk .16s ease-in-out infinite alternate}
.st-live{grid-area:live;justify-self:start;display:flex;align-items:center;gap:6px;padding:4px 9px;background:#d4202f;color:#fff;font:900 12px/1 Satoshi,sans-serif;letter-spacing:.14em;transform:skewX(-10deg)}
.st-live i{width:8px;height:8px;border-radius:50%;background:#fff;animation:st-blink 1s steps(2) infinite}
.st-live small{font:800 9px/1 Rubik,sans-serif;letter-spacing:.16em}
.st-cap{grid-area:cap;margin:0 0 0 6px;padding:11px 20px 14px;max-width:min(560px,30vw);background:rgba(6,8,24,.9);border-left:5px solid #f2f5ff;box-shadow:6px 6px 0 rgba(0,0,0,.45);
 font:900 clamp(17px,1.35vw,27px)/1.22 Satoshi,sans-serif;font-style:italic;color:#fff;transform:skewX(-8deg)}
.st-cap::before{content:'ANNOUNCER';display:block;margin-bottom:6px;font:900 11px/1 Rubik,sans-serif;font-style:normal;letter-spacing:.18em;color:#f2f5ff;opacity:.85}
.st-booth.by-b .st-cap{border-left-color:#ff7ad1}
.st-booth.by-b .st-cap::before{content:'COMMENTATOR';color:#ff7ad1}
.st-cap span{display:inline-block;opacity:0;transform:translateY(10px) scale(1.3)}
.st-cap span.on{opacity:1;transform:none;transition:opacity .08s,transform .16s cubic-bezier(.2,1.6,.4,1)}
.st-cap .hot{color:#ffd23f}
.st-booth.shout .st-cap{animation:st-shake .3s}

/* Quick-time prompts */
.st-qte{position:absolute;left:50%;top:30%;display:flex;flex-direction:column;align-items:center;gap:16px;transform:translate(-50%,-50%) scale(.6);opacity:0;visibility:hidden}
.st-qte.show{visibility:visible;opacity:1;transform:translate(-50%,-50%);transition:transform .25s cubic-bezier(.2,1.5,.4,1),opacity .15s}
.st-qte.cleared{opacity:0;transform:translate(-50%,-50%) scale(1.25);transition:transform .3s,opacity .3s}
.st-qte.miss{animation:st-miss .3s}
.st-qte-title{font:900 clamp(48px,5.2vw,100px)/.9 Satoshi,sans-serif;font-style:italic;transform:skewX(-8deg);padding-right:.15em;
 background:linear-gradient(180deg,#fffbe0,#ffe066 40%,#ff9d1f 72%,#e8401c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #1a0710;filter:drop-shadow(0 6px 0 #1a0710)}
.st-qte.show .st-qte-title{animation:st-pulse .9s ease-in-out infinite alternate}
.st-keys{display:flex;align-items:center;gap:14px;padding:16px 26px;background:rgba(6,8,24,.82);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.st-keys>i{font:900 28px/1 Satoshi,sans-serif;font-style:normal;color:#ffd23f}
.st-keys span{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.45;transition:opacity .12s,transform .12s}
.st-keys kbd{display:grid;place-items:center;width:clamp(58px,4.6vw,86px);height:clamp(58px,4.6vw,86px);border-radius:50%;border:3px solid #0b0b1a;color:#10122c;font:900 clamp(26px,2.2vw,40px)/1 Satoshi,sans-serif;
 background:radial-gradient(circle at 34% 28%,#fff 0,var(--c,#4a5280) 42%,color-mix(in srgb,var(--c,#4a5280) 55%,#000) 100%);box-shadow:0 0 0 4px #4a516f,0 6px 0 4px #05060f}
.st-keys small{font:800 13px/1 Rubik,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#dfe4f3}
.st-keys span.now{opacity:1;transform:scale(1.12)}
.st-keys span.now kbd{animation:st-key .55s ease-in-out infinite alternate}
.st-keys span.done{opacity:1}
.st-keys span.done kbd{background:radial-gradient(circle at 34% 28%,#fff,#ffe066 45%,#c98a12);box-shadow:0 0 0 4px #fff,0 0 30px 8px rgba(255,210,63,.75)}
.st-qte-hint{margin:0;font:700 clamp(15px,1.1vw,20px)/1.3 Rubik,sans-serif;letter-spacing:.04em;color:#fff;text-shadow:0 2px 0 #000,0 0 12px #000}

.st-skip{position:absolute;right:30px;top:clamp(150px,16vh,190px);z-index:4;pointer-events:auto;padding:8px 14px;border:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
 background:rgba(26,30,64,.9);color:#cfd6f2;font:700 12px/1 Rubik,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.st-skip kbd{font:inherit;color:#ffd23f;margin-left:6px}
.st-skip:hover{background:#2b3160}

/* Health bars during the story */
.arcade .p1-health .fill{transition:transform .18s ease-out}
.arcade .health.hit{animation:st-hit .25s steps(2)}
.arcade .p1-health.low .fill{background:linear-gradient(180deg,#ffb3a0,#ff5a3c 45%,#c41d2a)}
.arcade .health.charge .fill,.arcade .health.charge .ghost{animation:st-charge 1.2s cubic-bezier(.2,.8,.3,1) both}

/* The hero's speech: the stare-down without a move name */
.cutin.monologue .ci-title{display:none}

@keyframes st-wipe-in{from{clip-path:polygon(0 0,0 0,-25% 100%,-25% 100%)}to{clip-path:polygon(0 0,125% 0,100% 100%,-25% 100%)}}
@keyframes st-wipe-out{from{clip-path:polygon(0 0,125% 0,100% 100%,-25% 100%)}to{clip-path:polygon(125% 0,125% 0,100% 100%,100% 100%)}}
@keyframes st-slash{0%{left:-13%;opacity:1}100%{left:113%;opacity:1}}
@keyframes st-vs{from{opacity:0;transform:translate(-50%,-50%) skewX(-10deg) scale(2.4)}to{opacity:1;transform:translate(-50%,-50%) skewX(-10deg)}}
@keyframes st-bust-l{from{transform:translateX(-45%)}}
@keyframes st-bust-r{from{transform:translateX(45%)}}
@keyframes st-lines{50%{transform:rotate(1.5deg) scale(1.02)}}
@keyframes st-zoom{from{transform:translateX(-50%) scale(1.25)}to{transform:translateX(-50%)}}
@keyframes st-stamp{from{opacity:0;scale:2.2}}
@keyframes st-shake{20%{translate:-10px 4px}40%{translate:9px -5px}60%{translate:-6px -3px}80%{translate:5px 3px}}
@keyframes st-talk{to{translate:0 -6px}}
@keyframes st-sting-in{from{opacity:0;transform:translate(-50%,-50%) skewX(-8deg) scale(1.6)}to{opacity:1;transform:translate(-50%,-50%) skewX(-8deg)}}
@keyframes st-sweep{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes st-blink{50%{opacity:.25}}
@keyframes st-alarm{50%{opacity:.25}}
@keyframes st-pulse{to{transform:skewX(-8deg) scale(1.06)}}
@keyframes st-key{to{box-shadow:0 0 0 4px #ffd23f,0 6px 0 4px #05060f,0 0 34px 10px rgba(255,210,63,.7)}}
@keyframes st-miss{25%{transform:translate(calc(-50% - 14px),-50%)}75%{transform:translate(calc(-50% + 14px),-50%)}}
@keyframes st-hit{50%{filter:brightness(2.4) saturate(.2)}}
@keyframes st-charge{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.st-sting.show,.st-qte.show .st-qte-title,.st-keys span.now kbd,.alarm .stage::before{animation:none}}

/* The end: the backlog stays cleared. A results card over the arena, the menu theme, no next round. */
.st-end{position:absolute;left:0;right:0;top:50%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:14px;padding:38px 0 34px;
 background:linear-gradient(180deg,rgba(6,8,30,0),rgba(6,8,30,.88) 16%,rgba(6,8,30,.88) 84%,rgba(6,8,30,0));transform:translateY(-50%) scaleY(0);opacity:0;visibility:hidden}
.st-end.show{visibility:visible;opacity:1;transform:translateY(-50%);transition:transform .35s cubic-bezier(.2,1.3,.4,1),opacity .2s}
.st-end b{padding:0 .12em;font:900 clamp(64px,7.4vw,140px)/.9 Satoshi,sans-serif;font-style:italic;letter-spacing:-.01em;
 background:linear-gradient(180deg,#fffbe0,#ffe066 40%,#ff9d1f 72%,#e8401c);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:4px #1a0710;filter:drop-shadow(0 7px 0 #1a0710) drop-shadow(0 0 40px rgba(255,210,63,.6))}
.st-end.show b{animation:st-end-in .6s cubic-bezier(.2,1.4,.4,1) both}
.st-end p{margin:0;font:800 clamp(18px,1.5vw,28px)/1 Rubik,sans-serif;letter-spacing:.06em;color:#fff}
.st-end ul{display:flex;gap:clamp(22px,3vw,56px);margin:10px 0 0;padding:0;list-style:none}
.st-end li{display:flex;flex-direction:column;align-items:center;gap:7px;font:800 12px/1 Rubik,sans-serif;letter-spacing:.18em;color:#aeb8e8}
.st-end em{font:900 clamp(30px,2.6vw,50px)/1 Satoshi,sans-serif;font-style:italic;color:#7ff0ff}
.st-end small{margin-top:8px;font:800 13px/1 Rubik,sans-serif;letter-spacing:.3em;color:rgba(255,255,255,.6)}
.story.ended .st-skip{display:none}
@keyframes st-end-in{from{opacity:0;transform:scale(1.8)}}