/* Story mode, the knockout and the dream (arena.js story): a giant K.O., the eyes closing, the sensei in a dream,
   the RPG skill tree he spends the points on, and the eyes opening back on the arena a level higher. */
.story .st-qte{z-index:10}

/* K.O. over a frozen grey frame */
.st-ko{position:absolute;left:50%;top:40%;z-index:6;transform:translate(-50%,-50%);opacity:0;visibility:hidden}
.st-ko b{display:block;padding:0 .12em;font:900 clamp(150px,16vw,320px)/.82 Satoshi,sans-serif;font-style:italic;letter-spacing:-.02em;
 background:linear-gradient(180deg,#fff7d6 0,#ffd23f 36%,#ff6a1a 60%,#c4101c);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:6px #12030a;filter:drop-shadow(0 10px 0 #12030a) drop-shadow(0 0 60px rgba(255,60,30,.7))}
.st-ko.show{visibility:visible;opacity:1;animation:st-ko .5s cubic-bezier(.2,1.5,.35,1) both}
body.st-grey .stage canvas{filter:grayscale(1) blur(0) brightness(.85)}
@keyframes st-ko{0%{opacity:0;transform:translate(-50%,-50%) scale(3.2) rotate(-10deg)}60%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg)}}

/* Eyelids: they flutter shut on the knockout, open into the dream, and open again on the arena */
.st-lids{position:absolute;inset:0;z-index:7;overflow:hidden;visibility:hidden}
.st-lids i{position:absolute;left:-15%;right:-15%;height:62%;background:#000;box-shadow:0 0 70px 50px #000}
.st-lids i:first-child{top:0;border-radius:0 0 50% 50%/0 0 46% 46%;transform:translateY(-125%)}
.st-lids i:last-child{bottom:0;border-radius:50% 50% 0 0/46% 46% 0 0;transform:translateY(125%)}
.st-lids.closing,.st-lids.shut,.st-lids.opening{visibility:visible}
.st-lids.shut i{transform:none}
.st-lids.closing i:first-child{animation:st-lid-top 2.8s ease-in both}
.st-lids.closing i:last-child{animation:st-lid-bot 2.8s ease-in both}
.st-lids.opening i:first-child{animation:st-lid-top 1.7s ease-out reverse both}
.st-lids.opening i:last-child{animation:st-lid-bot 1.7s ease-out reverse both}
body.st-blur .stage canvas{filter:grayscale(1) blur(12px) brightness(.4);transition:filter 2.6s ease-in}
body.st-snap .stage canvas{transition:none}
body.st-waking .stage canvas{transition:filter 1.8s ease-out}
@keyframes st-lid-top{0%{transform:translateY(-125%)}35%{transform:translateY(-40%)}48%{transform:translateY(-64%)}78%{transform:translateY(-16%)}86%{transform:translateY(-26%)}100%{transform:none}}
@keyframes st-lid-bot{0%{transform:translateY(125%)}35%{transform:translateY(40%)}48%{transform:translateY(64%)}78%{transform:translateY(16%)}86%{transform:translateY(26%)}100%{transform:none}}

/* The dream: a violet sky, drifting light and a halo behind the sensei. It uses the conversation scene, without the slash and the VS. */
.st-aside .sd-sky,.st-aside .st-tree{display:none}
.st-aside.dream{z-index:2;background:radial-gradient(ellipse at 72% 34%,#6b4bb0 0,#2c1c6b 30%,#120c3a 62%,#05040f)}
.st-aside.dream.open,.st-aside.dream.closing{animation:none}
.st-aside.dream .st-vs,.st-aside.dream .st-slash{display:none}
.st-aside.dream .sd-sky{display:block;position:absolute;inset:0;overflow:hidden}
.sd-sky::before{content:'';position:absolute;inset:0;opacity:.75;animation:sd-twinkle 4s ease-in-out infinite alternate;
 background:radial-gradient(circle,#fff 0 1px,transparent 1.6px) 0 0/97px 89px,radial-gradient(circle,rgba(200,220,255,.8) 0 1px,transparent 1.5px) 41px 33px/151px 137px,
  radial-gradient(circle,rgba(255,230,200,.7) 0 1.3px,transparent 2px) 77px 59px/223px 191px}
.sd-sky::after{content:'';position:absolute;inset:-20%;filter:blur(24px);animation:sd-drift 16s ease-in-out infinite alternate;
 background:radial-gradient(ellipse at 18% 88%,rgba(255,170,230,.32),transparent 38%),radial-gradient(ellipse at 82% 96%,rgba(140,190,255,.3),transparent 40%),
  radial-gradient(ellipse at 50% 108%,rgba(255,255,255,.22),transparent 46%),radial-gradient(ellipse at 30% 10%,rgba(160,120,255,.25),transparent 40%)}
.sd-halo{position:absolute;right:2%;top:0;width:min(54vw,96vh);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,240,190,.6),rgba(255,210,63,.2) 38%,transparent 66%);animation:sd-breathe 5s ease-in-out infinite}
.sd-mote{position:absolute;left:var(--x);bottom:-4%;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,236,170,.85);opacity:0;animation:sd-mote var(--t) linear var(--d) infinite}
.st-aside.dream::after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;box-shadow:inset 0 0 150px 40px rgba(236,226,255,.45)}
.st-aside.dream.closing::after{animation:sd-white 1s ease-in both}
.st-aside.dream .st-slot{transition:filter .25s,transform .6s cubic-bezier(.6,0,.3,1)}
.st-aside.dream.open .st-slot.left{animation:sd-appear 1.2s ease-out backwards}
.st-aside.dream.open .st-slot.right{animation:sd-appear 1.8s 1.1s ease-out backwards}
.st-aside.dream .st-art{background:radial-gradient(circle at 50% 40%,rgba(var(--rgb),.4),rgba(18,10,54,.25) 70%)}
.st-aside.dream .st-art::after{box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),inset 0 0 70px rgba(var(--rgb),.45)}
.st-aside.dream .st-art::before,.st-aside.dream .st-slot.talk .st-art::before{opacity:.3;transform-origin:50% 42%;animation:sd-rays 50s linear infinite}
.st-aside.dream .st-slot.right .st-art{animation:sd-float 5s ease-in-out infinite}
@keyframes sd-twinkle{to{opacity:.4}}
@keyframes sd-drift{to{transform:translate(4%,-3%) scale(1.06)}}
@keyframes sd-breathe{50%{transform:scale(1.05);opacity:.85}}
@keyframes sd-mote{0%{opacity:0;transform:translate(0,0)}12%{opacity:.9}50%{transform:translate(24px,-55vh)}88%{opacity:.7}100%{opacity:0;transform:translate(-12px,-108vh)}}
@keyframes sd-white{to{box-shadow:inset 0 0 0 100vmax #fff}}
@keyframes sd-appear{from{opacity:0;filter:brightness(3) blur(12px)}}
@keyframes sd-rays{to{transform:rotate(1turn)}}
@keyframes sd-float{50%{translate:0 -10px}}

/* The skill tree: a JRPG menu window. The hero steps aside; the sensei stays on the right. */
.st-aside.dream.tree .st-slot.left{transform:translateX(-120%)}
.st-aside.dream.tree .st-tree{display:block}
.st-tree{position:absolute;z-index:5;left:3%;top:4%;width:59%;height:66%;border-radius:16px;
 background:linear-gradient(180deg,rgba(44,60,168,.93),rgba(16,22,84,.95) 55%,rgba(8,10,44,.96));border:3px solid #eef1ff;
 box-shadow:0 0 0 4px #0b0f33,inset 0 0 0 2px rgba(255,255,255,.16),0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(160,140,255,.4);animation:sk-in .5s cubic-bezier(.2,1.3,.4,1) both}
.st-tree header{position:absolute;left:3%;right:3%;top:4%;display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:2px solid rgba(255,255,255,.22)}
.st-tree header b{flex:1;font:900 clamp(20px,1.7vw,32px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.14em;color:#fff;text-shadow:0 3px 0 #0b0f33}
.sk-lv,.sk-pts{display:flex;align-items:baseline;gap:8px;padding:8px 14px;border-radius:9px;background:rgba(0,0,0,.35);font:800 clamp(12px,.9vw,16px)/1 Rubik,sans-serif;letter-spacing:.14em;color:#cfd8ff}
.sk-lv em,.sk-pts em{font:900 clamp(20px,1.6vw,30px)/1 Satoshi,sans-serif;font-style:normal;color:#ffd23f}
.st-tree.lvup .sk-lv{animation:sk-bump .5s .1s cubic-bezier(.2,1.6,.4,1)}

.sk-board{position:absolute;left:50%;top:14%;bottom:19%;aspect-ratio:1000/470;max-width:96%;transform:translateX(-50%);--o:min(3.6vw,6.4vh)}
.sk-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px rgba(255,210,63,.55))}
.sk-links path{fill:none;stroke-linecap:round}
.sk-links .base{stroke:rgba(170,185,255,.28);stroke-width:5}
.sk-links .lit{stroke:#ffd23f;stroke-width:6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease-out}
.sk-links .lit.on{stroke-dashoffset:0}
.sk-links .flux{stroke:#fffbe6;stroke-width:3;stroke-dasharray:.04 .12;opacity:0}
.st-tree.flow .sk-links .flux.on{opacity:1;animation:sk-flow .55s linear infinite}
.sk-links .sk-chain{stroke:#7ff0ff;stroke-width:10;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease-out}
.sk-links .sk-chain.on{stroke-dashoffset:0}

.sk-node{position:absolute;z-index:1;width:0;height:0}
.sk-orb{position:absolute;left:calc(var(--o) / -2);top:calc(var(--o) / -2);display:grid;place-items:center;width:var(--o);height:var(--o);border-radius:50%;
 background:radial-gradient(circle at 38% 32%,#3b4596,#151b52 72%);box-shadow:0 0 0 3px #0b0f33,0 0 0 6px rgba(170,185,255,.3),0 8px 18px rgba(0,0,0,.45);transition:background .3s,box-shadow .3s}
.sk-orb img{width:54%;height:54%;object-fit:contain;filter:grayscale(1) brightness(.6);transition:filter .3s}
.sk-orb svg{width:52%;height:52%;fill:#8d96c8;stroke:#8d96c8;transition:fill .3s,stroke .3s}
.sk-orb kbd{position:absolute;right:-12%;top:-12%;display:grid;place-items:center;width:40%;height:40%;border-radius:50%;background:#2b3266;color:#aeb8e8;
 font:900 calc(var(--o) * .22)/1 Satoshi,sans-serif;box-shadow:0 0 0 3px #0b0f33}
.sk-orb em{position:absolute;left:50%;bottom:-16%;transform:translateX(-50%);padding:3px 8px;border-radius:7px;background:#0b0f33;
 font:800 calc(var(--o) * .17)/1 Rubik,sans-serif;font-style:normal;letter-spacing:.06em;color:rgba(255,255,255,.5);white-space:nowrap}
.sk-label{position:absolute;left:0;top:calc(var(--o) * .74);transform:translateX(-50%);display:flex;align-items:center;gap:7px;white-space:nowrap}
.sk-label b{font:900 calc(var(--o) * .3)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.03em;color:rgba(255,255,255,.6);text-shadow:0 2px 0 #0b0f33}
.sk-label small{padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.4);font:800 calc(var(--o) * .17)/1 Rubik,sans-serif;letter-spacing:.12em;color:#aeb8e8}
.sk-node.on .sk-orb{background:radial-gradient(circle at 38% 32%,#fff,#eef0ff 55%,#c6cdf3);
 box-shadow:0 0 0 3px #0b0f33,0 0 0 7px var(--c),0 0 30px 8px color-mix(in srgb,var(--c) 70%,transparent)}
.sk-node.on .sk-orb img{filter:none}
.sk-node.on .sk-orb svg{fill:#2a2350;stroke:#2a2350}
.sk-node.on .sk-orb kbd{background:var(--c);color:#10122c}
.sk-node.on .sk-orb em{color:#ffd23f}
.sk-node.on .sk-label b{color:#fff}
.sk-node.on .sk-label small{color:#fff;background:rgba(0,0,0,.55)}
.sk-node.pop .sk-orb{animation:sk-pop .5s cubic-bezier(.2,1.6,.4,1)}
.sk-node.pop .sk-orb::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:4px solid var(--c);animation:sk-ring .6s ease-out both}
.sk-node.pop:not(.root)::after{content:'+1';position:absolute;left:calc(var(--o) * .42);top:calc(var(--o) * -1.05);font:900 calc(var(--o) * .4)/1 Satoshi,sans-serif;font-style:italic;
 color:#ffd23f;-webkit-text-stroke:2px #1a0710;paint-order:stroke fill;animation:sk-plus .9s ease-out both}
.sk-node.hot .sk-orb{animation:sk-hot .55s ease-out}
.st-tree.scan .sk-node:not(.on) .sk-orb{animation:sk-scan .7s ease both;animation-delay:calc(var(--i) * 70ms)}

.sk-cursor{position:absolute;z-index:2;width:0;height:0;opacity:0;transition:left .28s cubic-bezier(.3,1.25,.5,1),top .28s cubic-bezier(.3,1.25,.5,1),opacity .2s}
.sk-cursor.show{opacity:1}
.sk-cursor::before{content:'';position:absolute;right:calc(var(--o) / 2 + 12px);top:-15px;border:15px solid transparent;border-left:24px solid #ffd23f;border-right:0;
 filter:drop-shadow(0 0 8px rgba(255,210,63,.9)) drop-shadow(0 3px 0 #1a0710);animation:sk-nudge .4s ease-in-out infinite alternate}

.sk-combos{position:absolute;left:4%;right:4%;bottom:5%;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sk-combo{position:relative;display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:10px;background:rgba(0,0,0,.35);border:2px dashed rgba(190,200,255,.3);
 filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s,background .3s}
.sk-combo b{font:900 clamp(16px,1.3vw,24px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.04em;color:#fff}
.sk-combo span{display:flex;gap:5px;margin-left:auto}
.sk-combo kbd{display:grid;place-items:center;width:clamp(20px,1.45vw,28px);aspect-ratio:1;border-radius:50%;background:var(--c);color:#10122c;font:900 clamp(11px,.75vw,14px)/1 Satoshi,sans-serif}
.sk-combo i{position:absolute;right:12px;top:-12px;padding:4px 10px;border-radius:6px;background:#2a2f5e;font:900 11px/1 Rubik,sans-serif;font-style:normal;letter-spacing:.14em;color:#aeb8e8}
.sk-combo.open{filter:none;opacity:1;border:2px solid #ffd23f;background:linear-gradient(90deg,rgba(255,210,63,.24),rgba(0,0,0,.3));animation:sk-open .6s cubic-bezier(.2,1.5,.4,1)}
.sk-combo.open i{background:#ff4b3a;color:#fff}
.sk-combo.ult.open{border-color:#ff7ad1;background:linear-gradient(90deg,rgba(255,122,209,.24),rgba(0,0,0,.3))}
.sk-combo.learned{box-shadow:0 0 0 3px #7ff0ff,0 0 34px rgba(127,240,255,.65);animation:sk-open .6s cubic-bezier(.2,1.5,.4,1)}
.sk-combo.learned i{background:#7ff0ff;color:#06102a}

.sk-levelup{position:absolute;left:50%;top:48%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap}
.sk-levelup b{padding:0 .1em;font:900 clamp(70px,7vw,140px)/.9 Satoshi,sans-serif;font-style:italic;letter-spacing:-.01em;
 background:linear-gradient(180deg,#fffbe0,#ffe066 40%,#ff9d1f 75%,#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,.8))}
.sk-levelup small{padding:9px 18px;border-radius:8px;background:rgba(6,8,30,.92);font:800 clamp(14px,1.1vw,20px)/1 Rubik,sans-serif;letter-spacing:.14em;color:#fff}
.st-tree.lvup .sk-levelup{animation:sk-lvup 2.4s cubic-bezier(.2,1.3,.4,1) both}
.st-tree.lvup::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(255,240,190,.7),transparent 60%);animation:sk-flash .9s ease-out both}

/* In the tree phase the dialogue sits under the sensei, clear of the window */
.st-aside.dream.tree~.st-say.in-aside{left:80.5%;bottom:4%;width:35%;padding:22px 28px 26px}
.st-aside.dream.tree~.st-say.in-aside .st-line{font-size:clamp(18px,1.42vw,30px);min-height:0}
.st-aside.dream.tree~.st-say.in-aside.from-left{left:31%;width:50%}
/* Quick-time prompt in the dream: below the tree window */
.story.dreaming .st-qte{top:85%}
.story.dreaming .st-qte-title{font-size:clamp(38px,3.8vw,72px)}

/* The hero's new level on the scoreboard */
.st-lvl{display:none;margin-right:auto;padding:4px 10px;border-radius:6px;background:linear-gradient(180deg,#ffe066,#ff9d1f);color:#1a0710;
 font:900 clamp(13px,1vw,18px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.08em;box-shadow:0 0 0 2px #0b0b1a,0 0 18px rgba(255,210,63,.6)}
body.st-lv2 .st-lvl{display:inline-block;animation:st-stamp .4s cubic-bezier(.2,1.6,.4,1)}

@keyframes sk-in{from{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes sk-bump{50%{transform:scale(1.3)}}
@keyframes sk-flow{from{stroke-dashoffset:.16}to{stroke-dashoffset:0}}
@keyframes sk-pop{40%{transform:scale(1.35)}}
@keyframes sk-ring{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.9)}}
@keyframes sk-plus{from{opacity:0;transform:translateY(10px) scale(.6)}25%{opacity:1;transform:none}to{opacity:0;transform:translateY(-26px)}}
@keyframes sk-hot{0%{transform:scale(1.3);box-shadow:0 0 0 3px #0b0f33,0 0 0 7px #fff,0 0 60px 26px #7ff0ff}}
@keyframes sk-scan{50%{box-shadow:0 0 0 3px #0b0f33,0 0 0 6px #fff,0 0 24px 6px rgba(255,255,255,.6)}}
@keyframes sk-nudge{to{translate:6px 0}}
@keyframes sk-open{40%{transform:scale(1.05)}}
@keyframes sk-lvup{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.04)}}
@keyframes sk-flash{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.sd-mote,.sd-sky::before,.sd-sky::after,.sd-halo,.st-aside.dream .st-slot.right .st-art,.sk-cursor::before,.st-tree.flow .sk-links .flux.on{animation:none}}