/* Version C "CHAIN IT UP!": the anime opening trailer (arena.js story; spec .build/friday/overnight/specs/c.md §6 L1-3).
   Modes come from body[data-mode] (story | aside | dream | play | end). Every rule is scoped to the story or the PS2 boot, so free play is unchanged. */
.tc-instant .tc-bars i,.tc-instant :is(.scoreboard,.action-bar){transition:none!important}
/* Letterbox: STORY only */
.tc-bars i{position:absolute;left:0;right:0;height:12%;background:#000;z-index:8;transition:transform .22s cubic-bezier(.7,0,.84,0)}
.tc-bars i:first-child{top:0;transform:translateY(-100%)} .tc-bars i:last-child{bottom:0;transform:translateY(100%)}
body[data-mode=story] .tc-bars i{transform:none;transition:transform .18s cubic-bezier(.2,.9,.2,1)}
/* HUD follows the mode; story PLAY shows the scoreboard and the combo callout only (override 5: no action bar) */
body.story-on:not([data-mode=play]) :is(.scoreboard,.combo-book,#network,.chain,.input-hud,#combo-panel){opacity:0;transform:translateY(-12px);transition:opacity .12s ease-in,transform .12s ease-in}
body.story-on[data-mode=play] .scoreboard{opacity:1;transform:none;transition:opacity .1s,transform .26s cubic-bezier(.2,1.5,.4,1)}
body.story-on .action-bar{display:none}
body.story-on:not([data-mode=play]) #combo-panel{visibility:hidden}   /* its show animation overrides the opacity rule above */
body.story-on:is([data-mode=aside],[data-mode=dream],[data-mode=end]) .fight-area{opacity:0}
/* STORY = no HUD: the manga stamps carry the hit results (L2-f), so the move flash and the damage numbers stay hidden */
body.story-on[data-mode=story] .arcade .move-flash,body.story-on[data-mode=story] .damage-layer{visibility:hidden}
/* STORY subtitles sit in the bottom bar; the narrator uses trailer type */
body[data-mode=story] .st-say.subtitle{left:0;right:0;bottom:0;width:auto;height:12%;padding:0 8%;transform:none;background:none;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:16px}
body[data-mode=story] .st-say.subtitle .st-who{position:static;flex:none}
body[data-mode=story] .st-say.subtitle .st-line{font-size:clamp(22px,2vw,38px);transform:none;text-align:center}
body[data-mode=story] .st-say.subtitle .st-next{display:none}
.st-say.who-narrator .st-who{display:none}
.st-say.who-narrator .st-line{font:700 clamp(20px,1.9vw,36px)/1.2 'Noto Serif','Noto Serif CJK TC',Georgia,serif;text-transform:uppercase;letter-spacing:.18em;color:#f4f1e8}
.story.carding .st-say.who-narrator{opacity:0}            /* the card text carries the narration; .show stays so record.mjs still logs it */
.story-on .st-qte{display:none}                             /* the hidden log mirror (see qteC) */
/* Cards: full screen, CUT in and out; only the text moves */
.tc-card{position:absolute;inset:0;z-index:10;background:#000;display:none;place-items:center;overflow:hidden}
.tc-card.show{display:grid}
.tc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.tc-card.reveal img{opacity:.45;transition:none;animation:tc-push 4s linear both}   /* p1: a hard cut on "he" (was a .6 s fade) */
.tc-card p{position:relative;margin:0;text-align:center}
.tc-card.narr p{font:700 clamp(34px,3.6vw,72px)/1.25 'Noto Serif','Noto Serif CJK TC',Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:#f4f1e8}
.tc-card.narr p i{display:block;opacity:0;font-style:normal} .tc-card.reveal p i{opacity:1;transition:opacity .35s}
.tc-card:is(.slam,.ask) p{font:900 clamp(90px,11vw,210px)/.9 Satoshi,sans-serif;font-style:italic;letter-spacing:-.02em;transform:skewX(-8deg);padding:0 .1em;
  background:linear-gradient(180deg,#fffbe0,#ffe066 35%,#ff9d1f 62%,#e8401c);-webkit-background-clip:text;background-clip:text;color:transparent;animation:tc-slam .14s cubic-bezier(.2,1.4,.4,1) both}
.tc-card.slam p{font-size:clamp(70px,8.4vw,160px)}
.tc-card.ask p kbd{display:block;width:max-content;margin:.35em auto 0;padding:.35em .6em;font:500 clamp(24px,2.4vw,48px)/1 'DejaVu Sans Mono',monospace;color:#3fe0c5;-webkit-text-fill-color:#3fe0c5;background:#0b0b1a;border:2px solid #3fe0c5;transform:skewX(8deg);min-height:1em;min-width:12em;text-align:left}
.tc-card.red{background:repeating-linear-gradient(-45deg,#d7140f 0 60px,#a50c08 60px 120px) 0 0/169.7px 169.7px;animation:tc-stripes .45s linear infinite}
.tc-card.red p{font:900 italic clamp(64px,7.5vw,150px)/.92 Satoshi,sans-serif;color:#fff;text-transform:uppercase;transform:skewX(-8deg);-webkit-text-stroke:4px #000;paint-order:stroke fill;animation:tc-slam .14s cubic-bezier(.2,1.4,.4,1) both,tc-blink .24s steps(2) .14s 4}
/* Anime energy behind the sung cards: a jittering speed burst */
.tc-card:is(.ask,.slam)::before{content:'';position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 3deg,rgba(255,170,50,.16) 3deg 5deg);animation:tc-jit .1s steps(2) infinite;pointer-events:none}
.tc-card.logo{background:linear-gradient(180deg,rgba(3,4,16,.55),rgba(3,4,16,.88)),url(art-keyart.jpg) center/cover}
.tc-card.logo p{position:static}
.tc-card.logo .vc-logo{animation:tc-logo .7s cubic-bezier(.2,1.3,.4,1) both}
/* The logo: one rule for the logo card and the end card, so the CUT between them is a match cut (.ps-mark at about 70%). */
.vc-logo{position:absolute;left:50%;top:6%;text-align:center;transform:translateX(-50%) skewX(-8deg);white-space:nowrap}
.vc-logo b,.st-end .vc-logo b{display:block;padding:0 .12em;font:900 clamp(68px,7.4vw,140px)/.82 Satoshi,sans-serif;font-style:italic;letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 0,#f2f5ff 30%,#9aa3c0 49%,#5a6280 51%,#e8ecf7 76%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:3px #10122c;filter:drop-shadow(0 6px 0 #10122c) drop-shadow(0 0 30px rgba(255,140,40,.5));animation:none}
.vc-logo b+b,.st-end .vc-logo b+b{background-image:linear-gradient(180deg,#fffbe0,#ffe066 35%,#ff9d1f 62%,#e8401c)}
.vc-logo span{display:inline-block;margin-top:14px;padding:7px 18px;background:#d4202f;color:#fff;font:900 clamp(14px,1.15vw,22px)/1 Satoshi,sans-serif;letter-spacing:.2em;transform:skewX(-10deg)}
/* Sticky-note rain (cold open) */
.tc-rain{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s}
.tc-rain.on{opacity:1}
.tc-rain i{position:absolute;top:-12%;left:var(--x);width:var(--s);aspect-ratio:1;box-sizing:border-box;background:var(--c);color:#2a2238;font:800 calc(var(--s) * .13)/1.1 Rubik,sans-serif;font-style:normal;padding:calc(var(--s) * .08);box-shadow:0 6px 14px rgba(0,0,0,.35);animation:tc-fall var(--t) linear var(--d) infinite}
/* Name cards (Trigger style), edge-only, at most 1.6 s */
.tc-name{position:absolute;top:calc(12% + 2%);left:3%;z-index:3;display:grid;gap:6px;transform:translateX(-40%) skewX(-12deg);opacity:0;pointer-events:none;transition:transform .16s cubic-bezier(.7,0,.84,0),opacity .16s}
.tc-name.right{left:auto;right:3%;text-align:right}
.tc-name.show{opacity:1;transform:skewX(-12deg);transition:transform .22s cubic-bezier(.2,1.4,.4,1),opacity .1s}
.tc-name em{font:900 clamp(40px,5vw,96px)/1 'Noto Serif CJK JP','Noto Serif CJK TC',serif;font-style:normal;color:#ff4b3a;text-shadow:0 4px 18px rgba(0,0,0,.6)}
.tc-name b{font:900 clamp(56px,7vw,140px)/.85 Satoshi,sans-serif;font-style:italic;color:#fff;-webkit-text-stroke:3px #ff4b3a;paint-order:stroke fill;text-shadow:0 6px 24px rgba(0,0,0,.5)}
.tc-name.right em{color:#3fe0c5} .tc-name.right b{-webkit-text-stroke-color:#3fe0c5}
.tc-name span{justify-self:start;padding:6px 14px;background:#000;color:#fff;font:700 clamp(16px,1.3vw,24px)/1 Rubik,sans-serif;letter-spacing:.16em}
.tc-name.right span{justify-self:end}
/* Top bar: the lyric or a fansub TL NOTE (override 6). Lower left: the OP credit, sized for a projector. */
.tc-lyric{position:absolute;left:0;right:0;top:0;height:12%;z-index:11;display:grid;place-items:center;font:700 italic clamp(20px,1.85vw,36px)/1 Rubik,sans-serif;color:#fff;opacity:0;pointer-events:none}
body[data-mode=story] .tc-lyric.on{opacity:1}
.tc-lyric.tl{font:700 clamp(20px,1.75vw,34px)/1.1 Rubik,sans-serif;color:#ffd23f;letter-spacing:.03em}
.tc-lyric.tl b{color:#fff;opacity:.8;font-weight:700}
.tc-lyric .hot,.tc-qte-hint .hot{color:var(--c)}
.tc-credit{position:absolute;left:3%;bottom:calc(12% + 16px);z-index:11;font:800 clamp(18px,1.5vw,28px)/1.3 Rubik,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px #000;border-left:4px solid #ffd23f;padding-left:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.tc-credit em{display:block;font:900 clamp(14px,1.1vw,20px)/1.2 'Noto Serif CJK JP','Noto Serif CJK TC',serif;font-style:normal;letter-spacing:.3em;color:#ffd23f}
body[data-mode=play] .tc-credit{bottom:4%}
.tc-credit.on{opacity:1}
/* Manga stamps (diegetic hit results in STORY; the LOOP stamp in PLAY) */
.tc-stamp{position:absolute;z-index:6;left:var(--x,62%);top:var(--y,30%);display:grid;justify-items:center;gap:4px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg)}
.tc-stamp.on{animation:tc-stamp .55s cubic-bezier(.2,1.6,.4,1) both}
.tc-stamp b{font:900 italic clamp(44px,5vw,96px)/.9 Satoshi,sans-serif;color:#ff4b3a;padding:4px 14px;border:6px solid #ff4b3a;background:rgba(255,255,255,.94)}
.tc-stamp small{font:900 clamp(18px,1.5vw,28px)/1 Rubik,sans-serif;letter-spacing:.1em;color:#fff;background:#000;padding:5px 10px}
.tc-stamp em{font:900 italic clamp(40px,4vw,80px)/1 Satoshi,sans-serif;font-style:italic;color:#ffd23f;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.tc-stamp.teal b{color:#04121a;border-color:#3fe0c5;background:#3fe0c5}
.tc-stamp.teal.on{animation-duration:.6s}
/* QTE (C's own box, bottom centre, over the floor) */
.tc-qte{position:absolute;left:50%;bottom:2%;z-index:10;display:flex;flex-direction:column;align-items:center;gap:16px;transform-origin:50% 100%;transform:translateX(-50%) scale(.5);opacity:0;visibility:hidden;pointer-events:none}
.tc-qte.show{visibility:visible;opacity:1;transform:translateX(-50%) scale(.84);transition:transform .25s cubic-bezier(.2,1.5,.4,1),opacity .15s}
.tc-qte.cleared{opacity:0;transform:translateX(-50%) scale(1.05);transition:transform .3s,opacity .3s}
.tc-qte.miss{animation:tc-miss .3s}
.tc-qte-title{font:900 clamp(40px,4.2vw,84px)/.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)}
.tc-qte.show .tc-qte-title{animation:st-pulse .9s ease-in-out infinite alternate}
.tc-keys{display:flex;align-items:center;gap:14px;padding:16px 26px;background:rgba(6,8,24,.82);border-radius:14px;overflow:visible}
.tc-keys>i{font:900 28px/1 Satoshi,sans-serif;font-style:normal;color:#ffd23f}
.tc-keys span{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.45;transition:opacity .12s,transform .12s}
.tc-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}
.tc-keys small{font:800 13px/1 Rubik,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#dfe4f3}
.tc-keys span.now{opacity:1;transform:scale(1.12)}
.tc-keys span.now kbd{animation:st-key .55s ease-in-out infinite alternate}
.tc-keys span.done{opacity:1}
.tc-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)}
.tc-keys span em{position:absolute;bottom:100%;left:50%;font:900 clamp(22px,1.8vw,34px)/1 Rubik,sans-serif;font-style:normal;letter-spacing:.12em;color:#3fe0c5;text-shadow:0 2px 8px #000,0 0 3px #000;opacity:0;transform:translate(-50%,-22px)}
.tc-keys span.auto{opacity:1}
.tc-keys span.auto em{opacity:1}
.tc-keys span.auto kbd{background:#3fe0c5;color:#04121a;box-shadow:0 0 0 4px #fff,0 0 34px 10px rgba(63,224,197,.8);animation:tc-auto .3s cubic-bezier(.2,1.6,.4,1)}
.tc-qte-hint{margin:0;font:800 clamp(26px,2.2vw,40px)/1.2 Rubik,sans-serif;letter-spacing:.04em;color:#fff;text-shadow:0 2px 0 #000,0 0 12px #000}
.tc-auto{font:900 italic clamp(22px,1.8vw,34px)/1 Rubik,sans-serif;letter-spacing:.06em;padding:8px 20px;border-radius:99px;background:#3fe0c5;color:#04121a;opacity:0;transform:scale(.7)}
.tc-qte.auto .tc-auto{opacity:1;transform:none;transition:transform .2s cubic-bezier(.2,1.5,.4,1),opacity .1s}
/* "I learned the CLI!": the hero's anime bust, framed on his glasses (ck1 v2: lens at 61.0% / 33.3% of the Carlos art-hero.jpg t4 carlos-16; was 60.6% / 33.1%), with a lens glint */
.tc-portrait{position:absolute;left:0;right:0;top:12%;bottom:12%;z-index:2;overflow:hidden;display:none;pointer-events:none;background:radial-gradient(circle at 50% 45%,#1d6e66,#04121a 72%)}
.tc-portrait.on{display:block}
.tc-portrait::before{content:'';position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 2.4deg,rgba(63,224,197,.35) 2.4deg 3.4deg);animation:tc-jit .1s steps(2) infinite}
.tc-pf{position:absolute;left:50%;top:50%;width:68vw;aspect-ratio:700/900;transform-origin:61.0% 33.3%;transform:translate(-61.0%,-33.3%)}
.tc-portrait.on .tc-pf{animation:tc-ppush 1.2s cubic-bezier(.2,.9,.3,1) both}
.tc-pf img{display:block;width:100%;height:100%}
.tc-pglint{position:absolute;left:calc(50% + 2.9vw);top:calc(50% - 2.2vw);z-index:2;width:420px;height:420px;margin:-210px 0 0 -210px;opacity:0;filter:drop-shadow(0 0 12px #bffaff);
  background:radial-gradient(circle,#fff 0 7%,rgba(200,255,250,.5) 12%,rgba(255,255,255,0) 28%),linear-gradient(90deg,transparent 47%,#fff 50%,transparent 53%),linear-gradient(0deg,transparent 47%,#fff 50%,transparent 53%)}
.tc-pglint.on{animation:tc-glint .5s ease-out both}
.tc-vein{position:absolute;left:57%;top:18%;z-index:5;width:clamp(100px,10vw,190px);aspect-ratio:1;opacity:0;pointer-events:none;transform:rotate(-8deg)}
.tc-vein svg{display:block;width:100%;height:100%}
body[data-mode=story] .tc-vein.on{opacity:1;animation:tc-vein .3s ease-in-out infinite alternate}
.tc-gogo{position:absolute;right:6%;top:16%;bottom:16%;z-index:5;width:22%;pointer-events:none;opacity:0}
body[data-mode=story] .tc-gogo.on{opacity:1}
.tc-gogo i{position:absolute;font:900 clamp(80px,8vw,160px)/1 'Noto Sans CJK TC','Noto Serif CJK TC',sans-serif;font-style:normal;color:#b44bff;-webkit-text-stroke:4px #12001f;paint-order:stroke fill;text-shadow:0 0 18px rgba(180,75,255,.6);opacity:0}
.tc-gogo i:nth-child(1){left:0;top:4%;--r:-14deg} .tc-gogo i:nth-child(2){left:44%;top:22%;--r:10deg} .tc-gogo i:nth-child(3){left:6%;top:48%;--r:-6deg} .tc-gogo i:nth-child(4){left:52%;top:70%;--r:16deg}
.tc-gogo.on i{animation:tc-gogo .5s cubic-bezier(.2,1.6,.4,1) both,tc-gojit .14s steps(2) .5s infinite}
.tc-gogo.on i:nth-child(2){animation-delay:.12s,.62s} .tc-gogo.on i:nth-child(3){animation-delay:.24s,.74s} .tc-gogo.on i:nth-child(4){animation-delay:.36s,.86s}
.tc-flash{position:absolute;inset:0;z-index:12;background:#fff;opacity:0;pointer-events:none}
.tc-flash.on{animation:tc-flash .066s steps(2) both}
.tc-speed{position:absolute;inset:-10%;z-index:5;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 2deg,rgba(255,255,255,.55) 2deg 2.6deg);
  -webkit-mask:radial-gradient(circle,transparent 32%,#000 62%);mask:radial-gradient(circle,transparent 32%,#000 62%)}
.tc-speed.on{opacity:1;animation:tc-jit .1s steps(2) infinite}
.stage.tc-punch{transition:transform .25s cubic-bezier(.2,1.4,.4,1);transform:scale(var(--pz,1.08))}
.stage.tc-unpunch{transition:transform .3s ease-out}
.stage.tc-hit{transition:transform .06s ease-out;transform:scale(var(--pz,1.08))}   /* ck1 r2: a snap punch-in on each sung contact */
.tc-glint{position:absolute;z-index:4;width:200px;height:200px;margin:-100px 0 0 -100px;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 6%,rgba(255,255,255,.0) 26%),linear-gradient(90deg,transparent 47%,#fff 50%,transparent 53%),linear-gradient(0deg,transparent 47%,#fff 50%,transparent 53%)}
.tc-glint.on{animation:tc-glint .45s ease-out both}
.tc-shards{position:absolute;z-index:13;pointer-events:none;display:none;overflow:hidden}
.tc-shards.on{display:block}
.tc-shards i{position:absolute;inset:0;background-size:100% 100%;transition:transform .7s cubic-bezier(.3,0,.8,.4),opacity .7s cubic-bezier(.3,0,.8,.4)}
.tc-shards.fly i{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(var(--k,1));opacity:0}
.tc-shards::after{content:'';position:absolute;inset:0;background:var(--cracks) center/100% 100% no-repeat;filter:drop-shadow(0 0 6px #fff)}
.tc-shards.fly::after{opacity:0;transition:opacity .15s}
/* The robot portrait grows on "growing!", and a sweat drop for the hero */
.st-aside .st-slot.right.tc-grow .st-art img{transform:translateX(-50%) scale(1.15);transform-origin:50% 60%;transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.st-aside .st-slot.right.tc-grow{z-index:3}
.st-aside .st-slot.left.tc-sweat::after{content:'';position:absolute;left:62%;top:20%;z-index:4;width:clamp(30px,2.6vw,52px);aspect-ratio:1;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:radial-gradient(circle at 60% 60%,#e8fbff 0 18%,#7fd4ff 40%,#2a8fd8 100%);box-shadow:0 0 0 3px #0b0b1a;animation:tc-drop .6s ease-in both}
/* End card: full screen, staged on beats (1 beat = .354 s at 169.4 BPM) */
.st-end.vc-end{top:0;bottom:0;transform:none;justify-content:flex-end;gap:8px;padding:0 0 4.2%;
 background:linear-gradient(180deg,rgba(3,4,16,.5),rgba(3,4,16,.3) 40%,rgba(3,4,16,.9) 80%),url(art-keyart.jpg) 50% 100%/auto 124% no-repeat,#05060f}   /* art nudged up so Carlos and Keith sit between the logo and the title */
.st-end.vc-end.show{transform:none;transition:none}   /* p3: no fade, the match cut never shows the stage */
.st-end.vc-end .vc-cleared{font-size:clamp(48px,5vw,96px)}
.st-end.vc-end .vc-esrb{bottom:2.4%;left:2.2%}
.vc-end.show :is(.vc-cleared,p,li,.vc-esrb,.vc-thanks){animation:tc-in .2s cubic-bezier(.2,1.4,.4,1) both}
.vc-end.show p{animation-delay:.36s} .vc-end.show li:nth-child(1){animation-delay:.71s} .vc-end.show li:nth-child(2){animation-delay:.86s} .vc-end.show li:nth-child(3){animation-delay:1s}
.vc-end.show .vc-esrb{animation-delay:.35s} .vc-end.show .vc-thanks{animation-delay:1.8s}
.vc-esrb{position:absolute;left:3%;bottom:5%;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:12px 16px;background:#fff;color:#000;border:4px solid #000;font:800 clamp(18px,1.4vw,26px)/1.2 Rubik,sans-serif;text-align:left;max-width:32vw}
.st-end .vc-esrb b{grid-row:span 2;padding:0 8px;font:900 64px/1 Satoshi,sans-serif;font-style:normal;-webkit-text-stroke:0;background:#000;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;filter:none;animation:none}
.vc-esrb strong{font:900 clamp(24px,1.9vw,36px)/1 Satoshi,sans-serif;letter-spacing:.1em}
.st-end .vc-esrb small{margin:0;font:700 clamp(15px,1.15vw,21px)/1.25 Rubik,sans-serif;letter-spacing:.02em;color:#000}
/* Retimed LIDS and dream entrance for C */
.story-on .st-lids.closing i{animation-duration:1.1s}
.story-on .st-lids.opening i{animation-duration:.9s}
.story-on .st-aside.dream.open .st-slot.right{animation-duration:.9s;animation-delay:.2s}
.story-on .st-aside.dream.closing::after{animation:tc-white .22s ease-out both}   /* p2: reaches full white before the cut to the black card (was a .5 s half-fade) */
@keyframes tc-white{from{background:rgba(255,255,255,0)}to{background:#fff;box-shadow:none}}
/* PS2: snappier boot, a readable memory card, and the arena never shows through title→menu→load */
.ps2.at-sce .ps-sce{animation-duration:1.6s} .ps2.at-towers.logo .ps-logo{animation-duration:1.6s} .ps2.at-mc .ps-mc{animation:tc-mc 3.8s ease both}
.ps2.at-menu,.ps2.at-load{background:#03040f}
@keyframes tc-mc{0%{opacity:0}8%,93%{opacity:1}100%{opacity:0}}
@keyframes tc-flash{from{opacity:1}to{opacity:0}}
@keyframes tc-gogo{from{opacity:0;transform:scale(2.4) rotate(var(--r))}to{opacity:1;transform:rotate(var(--r))}}
@keyframes tc-gojit{0%,100%{opacity:1;transform:rotate(var(--r))}50%{opacity:1;transform:rotate(var(--r)) translate(3px,-2px) scale(1.04)}}
@keyframes tc-vein{from{transform:rotate(-8deg) scale(.9)}to{transform:rotate(-8deg) scale(1.15)}}
@keyframes tc-ppush{0%{transform:translate(-61.0%,-33.3%) scale(1.35)}12%{transform:translate(-61.0%,-33.3%) scale(1)}100%{transform:translate(-61.0%,-33.3%) scale(1.06)}}
@keyframes tc-stripes{to{background-position:169.7px 0}}
@keyframes tc-blink{50%{color:#ffd23f}}
@keyframes tc-slam{from{transform:skewX(-8deg) scale(1.4);opacity:0}}
@keyframes tc-logo{from{opacity:0;transform:translateX(-50%) skewX(-8deg) scale(1.6)}}
@keyframes tc-in{from{opacity:0;transform:translateY(14px) scale(1.15)}}
@keyframes tc-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.8)}18%,80%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
@keyframes tc-push{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes tc-fall{to{transform:translateY(125vh) rotate(var(--rot))}}
@keyframes tc-jit{50%{transform:rotate(1.5deg) scale(1.02)}}
@keyframes tc-drop{from{opacity:0;translate:0 -20px}}
@keyframes tc-auto{from{scale:1.5}}
@keyframes tc-miss{25%{translate:-14px 0}75%{translate:14px 0}}
@keyframes tc-glint{0%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.2) rotate(30deg)}100%{opacity:0;transform:scale(.2) rotate(60deg)}}
@media (prefers-reduced-motion:reduce){.tc-rain i,.tc-speed.on,.tc-glint.on{animation:none}.stage.tc-punch,.stage.tc-hit{transform:none}}

/* ---- polish round 1 (p1) ---- */
/* QTE: the teal key fill + the pill already say AUTO; the per-key tags printed over the pill */
.tc-keys span em{display:none}
/* A big tool-name stamp on each sung hit (its own element, so the LOOP stamp is not replaced) */
.tc-stamp.tool b{font-size:clamp(56px,6vw,120px);color:#10122c;background:var(--c,#fff);border-color:#fff;box-shadow:0 8px 0 #10122c}
.tc-stamp.teal.long.on{animation-duration:1.1s}
.tc-stamp.long.on{animation-duration:1s}
/* Gilligan bonks: the +N is the joke, so it grows per bonk */
.tc-stamp.bk2 em{transform:scale(1.3) rotate(7deg);margin-top:.15em}
.tc-stamp.bk3 em{transform:scale(1.75) rotate(-12deg);margin-top:.35em;color:#ff4b3a}
/* The Backlog's name card sits beside the robot (right edge), in its own red */
.tc-name.right.red em{color:#ff4b3a} .tc-name.right.red b{-webkit-text-stroke-color:#ff4b3a}
/* Skill tree: the board kicks on each tool the sensei names */
.st-tree.bump{animation:tc-bump .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes tc-bump{from{scale:1.045}}
/* The skip chip lives in the bottom letterbox corner, quiet; deck chrome hides during the story (still clickable) */
body.story-on .st-skip{top:auto;bottom:3%;right:2%;opacity:.45;z-index:12}
body.story-on :is(.deck-controls,#story-btn){opacity:0;transition:opacity .2s}
body.story-on :is(.deck-controls,#story-btn):hover{opacity:1}
/* End card: the takeaway is the last thing read */
.st-end.vc-end>p{font-size:clamp(28px,2.6vw,52px);line-height:1.1}
/* The dream's TL NOTE (the dream has no letterbox bar): under the skill tree */
.tc-dtl{position:absolute;left:3%;top:75%;width:53%;z-index:6;margin:0;font:700 clamp(20px,1.75vw,34px)/1.25 Rubik,sans-serif;letter-spacing:.02em;color:#ffd23f;text-shadow:0 2px 8px #000,0 0 3px #000;opacity:0;pointer-events:none;transition:opacity .15s}
.tc-dtl b{color:#fff;opacity:.8}
body[data-mode=dream] .tc-dtl.on{opacity:1}

/* ---- polish round 2 ---- */
/* the agent reveal: TILL IT'S DONE slammed over the 3D shot (no black card) */
.tc-card.over{background:transparent;place-items:start center;padding-top:calc(12% + 1.5%)}
.tc-card.over::before{opacity:.45}
.tc-card.slam.over p{font-size:clamp(56px,6.2vw,120px);filter:drop-shadow(0 6px 0 #04121a) drop-shadow(0 0 22px rgba(0,0,0,.65))}   /* top of frame: the hero and the spirit stay clear */
/* the loop beat lives in the QTE box: teal, smaller title */
.tc-qte.loop .tc-qte-title{font-size:clamp(30px,3vw,60px);background:linear-gradient(180deg,#e8fffb,#3fe0c5 60%,#13a58e);-webkit-background-clip:text;background-clip:text}
/* the lyric under the QTE never leaves a lone note on a second line */
.tc-qte-hint{white-space:nowrap;font-size:clamp(22px,1.9vw,34px)}
/* "All of them." on the anime bust: a teal aura */
.tc-portrait.agent{background:radial-gradient(circle at 50% 45%,#3fe0c5,#0d5f56 40%,#04121a 78%)}
.tc-portrait.agent::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 12vw 2vw rgba(63,224,197,.8);mix-blend-mode:screen}

/* ---------- polish round 3 ---------- */
.tc-name:not(.show){transition:none}   /* name cards die with the cut */
.tc-auto{font-size:clamp(28px,2.3vw,44px)}
.tc-keys small{font-size:20px}
body.story-on[data-mode=dream] .st-skip{bottom:auto;top:3%}
.st-lids.closing,.st-lids.shut,.st-lids.opening{z-index:10}   /* the lids cover the dialogue box until they open */
.tc-stamp.tc-tstamp{z-index:7}   /* GITHUB! reads over the Blitz cut-in */
.tc-qte.keysOff :is(.tc-qte-title,.tc-keys,.tc-auto){visibility:hidden;animation:none}   /* payoff: only the sung lyric stays */
.st-tree{scale:var(--tz,1);translate:var(--tx,0%) var(--ty,0%);transition:scale .25s ease,translate .25s ease}
@keyframes tc-bump{from{scale:calc(var(--tz,1) * 1.045)}}
.st-tree.lvup{z-index:20}
.st-tree.lvup .sk-levelup{animation:vc-lvup 1.8s cubic-bezier(.2,1.3,.4,1) both}
@keyframes vc-lvup{0%{opacity:0;transform:translate(calc(-50% + 17.5vw),calc(-50% + 14vh)) scale(3.4)}14%{opacity:1;transform:translate(calc(-50% + 17.5vw),calc(-50% + 14vh)) scale(1.7)}100%{opacity:1;transform:translate(calc(-50% + 17.5vw),calc(-50% + 14vh)) scale(1.8)}}
.tc-portrait.agent{top:33%;bottom:33%;box-shadow:0 0 0 100vmax #000;border-block:4px solid #3fe0c5}   /* "All of them.": an eyes-only band, calm */
.tc-portrait.agent.on .tc-pf{animation-duration:2.6s}
.tc-stamp.nani b{color:#ff4b3a}
.tc-qte.show:not(.cleared){transform:translateX(-50%) scale(.78)}   /* p3c: the title clears the fighters' feet */
.tc-auto{white-space:nowrap}   /* p3d: the bigger pill never wraps 'IT' */
.tc-qte-title .tc-arrow{font-style:normal;-webkit-text-fill-color:#3fe0c5;color:#3fe0c5;background:none}   /* final r1: the ↻ fallback glyph took no gradient fill (a dark hook) */
/* final r2: the wake whiteout takes the whole frame (the tree and LEVEL UP fade with the sensei), then white → black before THIS TIME… */
.story-on .st-aside.dream.closing .st-tree{opacity:0;transition:opacity .35s ease-in}
.story-on .st-aside.dream.closing.toblack::after{animation:tc-wb .3s ease-in-out both}
@keyframes tc-wb{from{background:#fff;box-shadow:none}to{background:#000;box-shadow:none}}
/* c2: fight choreography. The Act 1 flurry shows its −1 chips (STORY otherwise hides the damage numbers); the hero's own damage; Act 3's DODGE!/GUARD! */
body.story-on[data-mode=story].tc-dmg .damage-layer{visibility:visible}
body.tc-dmg .dmg.chip{font-size:110px;color:#fff;-webkit-text-stroke:3px #222a44;paint-order:stroke fill;text-shadow:0 5px 0 #222a44,0 0 16px rgba(0,0,0,.6)}
.dmg.hurt{font-size:150px;-webkit-text-stroke:3px #3d0f18;paint-order:stroke fill;color:#ff5a46;text-shadow:0 4px 0 #3d0f18,0 0 22px rgba(255,80,60,.55)}
.dmg.call{font-size:104px;font-style:italic;color:#3fe0c5;text-shadow:0 5px 0 #0d3a35,0 0 26px rgba(63,224,197,.6);-webkit-text-stroke:2px #04121a;paint-order:stroke fill}
.tc-stamp.tink b{color:#59607e;border-color:#8a90b0;background:rgba(235,238,248,.94)}
/* Title screen: Carlos and Keith on the key art instead of the live arena behind it (the old 3D cast). Same framing as the end card. */
.ps2.at-title{background:#05060f}
.at-title .ps-title{background:linear-gradient(180deg,rgba(3,4,16,.7),rgba(3,4,16,.2) 36%,rgba(3,4,16,.25) 60%,rgba(3,4,16,.9)),url(art-keyart.jpg) 50% 100%/auto 124% no-repeat,#05060f}
.ps-title .ps-mark{top:4%}   /* up and a little smaller, so the logo clears both faces */
.ps-title .ps-mark b{font-size:clamp(80px,8.4vw,160px)}