/* The explainer player and the motion show, shared by the landing page (#league) and rules/.
   The show markup is copied per page (asset paths differ); js/show.js drives it. Every size inside the stage is cqw.
   Keyframes state only their start, so each element rests on its final frame: reduced motion shows still scenes. */
.league-reel{position:relative;aspect-ratio:16/9;background:var(--ink);border:2px solid var(--acid);box-shadow:var(--shadow-hard-lg) var(--blood);overflow:hidden;opacity:0;transform:translateX(60px) rotate(2deg)}
.league-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.league-reel::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--scanline) 3px 4px)}
.reel-tag{position:absolute;z-index:2;font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.24em;font-size:12px;text-transform:uppercase;padding:5px 10px;background:var(--ink);color:var(--paper)}
.reel-tag.rec{left:12px;top:12px;display:flex;align-items:center;gap:8px}
.reel-tag.rec::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blood);animation:lt-blink 1.2s steps(2) infinite}
.reel-tag.len{right:12px;bottom:12px;color:var(--acid)}
.reel-sound{position:absolute;z-index:2;left:12px;bottom:12px;border:0;padding:0;background:none;cursor:pointer;font:inherit}
.reel-sound span{display:inline-block;background:var(--acid);color:var(--ink);font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.22em;font-size:12px;padding:7px 12px 7px 16px;transform:skewX(var(--skew));box-shadow:4px 4px 0 var(--blood)}
.reel-sound span>i{display:inline-block;transform:skewX(var(--skew-counter));font-style:italic}
.reel-sound[aria-pressed="true"] span{background:var(--blood-deep);color:var(--paper);box-shadow:4px 4px 0 var(--acid)}
/* The explainer waits on its poster until the visitor presses play (since 2026-09-27; it used to autoplay muted
   when scrolled into view). The whole frame is the button; the stamp sits bottom left, clear of the poster title and clock, and says how long. */
.league-reel video{cursor:pointer}
.league-reel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(11,10,8,.35);transition:opacity .3s}
.league-reel[data-state="playing"]::before{opacity:0}
.reel-play{position:absolute;z-index:2;left:20px;bottom:20px;border:0;padding:0;background:none;cursor:pointer;font:inherit}
.reel-play span{display:inline-flex;align-items:center;gap:12px;background:var(--acid);color:var(--ink);font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:.24em;font-size:16px;padding:14px 24px 14px 26px;transform:skewX(var(--skew));box-shadow:6px 6px 0 var(--blood);transition:background .2s,box-shadow .2s,transform .2s var(--ease-out)}
.reel-play span::before{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor;transform:skewX(var(--skew-counter))}
.reel-play span>i{display:inline-block;transform:skewX(var(--skew-counter));font-style:italic}
.reel-play small{font-size:.8em;opacity:.7;margin-left:4px}
.league-reel:hover .reel-play span,.reel-play:focus-visible span{box-shadow:8px 8px 0 var(--blood);transform:skewX(var(--skew)) translate(-2px,-2px)}
.reel-play:focus-visible{outline:none}
.reel-play:focus-visible span{outline:2px solid var(--paper);outline-offset:3px;transition:none}
.league-reel[data-state="playing"] .reel-play{display:none}
.league-reel:not([data-state="playing"]) .reel-sound{display:none}
.reel-cc{position:absolute;z-index:2;left:12px;bottom:12px;border:0;padding:0;background:none;cursor:pointer;font:inherit}
.reel-cc span{display:inline-block;background:var(--ink);color:var(--paper);border:1px solid var(--paper-40);font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.22em;font-size:12px;padding:7px 12px 7px 16px;transform:skewX(var(--skew))}
.reel-cc span>i{display:inline-block;transform:skewX(var(--skew-counter));font-style:italic}
.reel-cc[aria-pressed="true"] span{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.reel-cc:focus-visible{outline:none}.reel-cc:focus-visible span{outline:2px solid var(--paper);outline-offset:3px}
.league-reel[data-state="idle"] .reel-cc{display:none}
.league-reel video::cue{background:rgba(10,10,10,.85);color:#f4f1ea;font-size:.9em;line-height:1.3}
@media(max-width:640px){.reel-cc{left:8px;bottom:8px}.reel-cc span{font-size:10px;padding:5px 9px 5px 12px}}
@media(max-width:640px){.reel-play{left:10px;bottom:10px}.reel-play span{font-size:12px;padding:9px 14px 9px 16px;gap:9px}.reel-play span::before{border-width:6px 0 6px 10px}}

@keyframes lt-blink{0%{opacity:1}100%{opacity:.15}}

/* the explainer carries its own captions on the left: keep the sound control bottom right, clear of them */
.league-reel .reel-sound{left:auto;right:12px}
@media(max-width:640px){.league-reel .reel-sound{right:8px;bottom:8px}.league-reel .reel-sound span{font-size:10px;padding:5px 9px 5px 12px}}

/* What is Vibers League: the show. A self-running motion piece in 5 scenes (roster, sealed brief, clock, build,
   call), driven by the scene engine near the bottom of the page. Every size inside the stage is in cqw so the whole
   piece scales as one frame. Keyframes state only their start (fill both), so the resting style of every element is
   its final frame: reduced motion and a paused tab both show a finished, readable scene. The 37s explainer opens
   over the stage from the Explainer button and still never autoplays without a press. */
.show{position:relative}
.vl-reveal .show{opacity:0;transform:translateX(60px) rotate(2deg)}
.in .show{transition:transform .8s var(--ease-out) .25s,opacity .5s .25s;opacity:1;transform:none}
.show-stage{position:relative;aspect-ratio:16/10;background:var(--ink);border:2px solid var(--acid);box-shadow:var(--shadow-hard-lg) var(--blood);overflow:hidden;container-type:inline-size;isolation:isolate;
  transform:perspective(1400px) rotateY(calc(var(--mx,0)*1.6deg)) rotateX(calc(var(--my,0)*-1.2deg));transition:transform .2s linear}
.show-stage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--scanline) 3px 4px)}
.show-grid{position:absolute;inset:-4cqw;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--paper-10) 1px,transparent 1px),linear-gradient(90deg,var(--paper-10) 1px,transparent 1px);background-size:4cqw 4cqw;
  transform:translate(calc(var(--mx,0)*-1.2cqw),calc(var(--my,0)*-1cqw))}
.show-grid::after{content:"";position:absolute;inset:0;background:radial-gradient(circle 26cqw at calc(var(--cx,-999px) + 4cqw) calc(var(--cy,-999px) + 4cqw),var(--spot-acid),transparent 70%)}
.show-hud{position:absolute;z-index:3;right:3.4cqw;top:2.6cqw;display:flex;gap:1.4cqw;align-items:center;font-family:var(--font-label);font-weight:700;letter-spacing:.18em;font-size:max(10px,1.15cqw);color:var(--paper-40);text-transform:uppercase;font-variant-numeric:tabular-nums}
.show-hud .rec{display:flex;align-items:center;gap:.6cqw;color:var(--paper)}
.show-hud .rec::before{content:"";width:max(7px,.8cqw);height:max(7px,.8cqw);border-radius:50%;background:var(--blood);animation:lt-blink 1.2s steps(2) infinite}
.crop{position:absolute;z-index:3;width:2.2cqw;height:2.2cqw;border:0 solid var(--paper-40);pointer-events:none}
.crop.c1{left:1.6cqw;top:1.6cqw;border-left-width:2px;border-top-width:2px}.crop.c2{right:1.6cqw;top:1.6cqw;border-right-width:2px;border-top-width:2px}
.crop.c3{left:1.6cqw;bottom:1.6cqw;border-left-width:2px;border-bottom-width:2px}.crop.c4{right:1.6cqw;bottom:1.6cqw;border-right-width:2px;border-bottom-width:2px}

.scene{position:absolute;inset:0;z-index:1;visibility:hidden}
.scene.on{visibility:visible}
.cap{position:absolute;left:5cqw;top:4.4cqw;right:14cqw}
.cap .k{display:flex;align-items:center;gap:1cqw;font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.24em;text-transform:uppercase;font-size:max(10px,1.3cqw);color:var(--acid)}
.cap .k::before{content:"";width:3cqw;height:2px;background:var(--acid)}
.cap .hl{margin:1.1cqw 0 0;max-width:none;font-family:var(--font-display);text-transform:uppercase;font-size:max(20px,5.2cqw);line-height:.94;letter-spacing:.01em;color:var(--paper)}
.cap .hl span,.cap .hl em{display:block;font-style:normal}
.cap .hl em{color:var(--acid)}
.scene.on .cap .k{animation:sh-clipx .5s var(--ease-out) both}
.scene.on .cap .hl span{animation:sh-line .6s var(--ease-out) .08s both}
.scene.on .cap .hl em{animation:sh-line .6s var(--ease-out) .2s both}
.vis{position:absolute;left:5cqw;right:5cqw;top:21cqw;bottom:4.5cqw;display:flex;align-items:center;justify-content:center;gap:4.5cqw}

/* 01 the roster: tiles land, a scan passes, 4 lock on and fill, the rest step back */
.roster{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:.9cqw;width:70cqw}
.tile{position:relative;aspect-ratio:1;opacity:.26}
.tile b{position:absolute;inset:0;display:grid;place-items:center;background:var(--steel);border:1px solid var(--paper-15)}
.tile svg{width:56%;height:56%;fill:var(--paper-40)}
.tile.pk{opacity:1}
.tile s{position:absolute;inset:0;display:grid;place-items:center;background:var(--acid);text-decoration:none}
.tile s svg{fill:var(--ink)}
.tile s em{position:absolute;right:-.7cqw;top:-.9cqw;min-width:2.1cqw;padding:.2cqw .3cqw;background:var(--blood-deep);color:var(--paper);font-family:var(--font-display);font-style:normal;font-size:max(10px,1.3cqw);line-height:1;text-align:center}
.tile.pk::before{content:"";position:absolute;inset:-.6cqw;border:2px solid var(--acid);opacity:0;pointer-events:none}
.scene.on .tile b{animation:sh-pop .45s var(--ease-punch) calc(.25s + var(--d,0)*1s) both}
.scene.on .tile:not(.pk){animation:sh-dim .6s ease 2.7s both}
.scene.on .tile s{animation:sh-fillup .32s var(--ease-out) calc(1.5s + var(--n,0)*.3s) both}
.scene.on .tile.pk::before{animation:sh-lock .7s var(--ease-out) calc(1.4s + var(--n,0)*.3s) both}
.roster::after{content:"";position:absolute;left:-2cqw;right:-2cqw;top:100%;height:2px;background:var(--acid);opacity:0;box-shadow:0 0 0 1px rgba(232,255,42,.25)}
.scene.on .roster::after{animation:sh-scan .8s linear .95s both}
.roster-key{position:absolute;left:0;bottom:0;display:flex;gap:2.4cqw;font-family:var(--font-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:max(10px,1.15cqw);color:var(--paper-70)}
.roster-key span{display:flex;align-items:center;gap:.8cqw}
.roster-key span::before{content:"";width:1.2cqw;height:1.2cqw;border:1px solid var(--paper-40);background:var(--steel)}
.roster-key .pk::before{background:var(--acid);border-color:var(--acid)}
.scene.on .roster-key{animation:sh-rise .5s var(--ease-out) 2.9s both}

/* 02 the sealed brief: the card lands, the seal slams, the whale reads, the redactions lift line by line */
.brief{position:relative;width:40cqw;padding:2.4cqw 2.8cqw 2.6cqw;background:var(--paper);color:var(--ink);transform:rotate(-2deg);box-shadow:1cqw 1cqw 0 var(--blood)}
.brief .bh{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;padding-bottom:.9cqw;margin-bottom:1.3cqw;border-bottom:2px solid var(--ink)}
.brief .bh b{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:max(14px,2.7cqw);line-height:1}
.brief .bh span{font-family:var(--font-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:max(9px,1cqw);color:var(--ink-75)}
.brief ul{list-style:none;margin:0;padding:0}
.brief li{position:relative;width:max-content;font-family:var(--font-label);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:max(11px,1.85cqw);line-height:1.2;margin:.7cqw 0}
.brief li::after{content:"";position:absolute;inset:-.1cqw -.4cqw;background:var(--ink);transform:scaleX(0);transform-origin:right}
.seal{position:absolute;right:2.4cqw;top:46%;padding:.5cqw 1.4cqw;border:.35cqw solid var(--blood);color:var(--blood);font-family:var(--font-display);text-transform:uppercase;font-size:max(18px,4.4cqw);line-height:1;letter-spacing:.04em;opacity:0;transform:rotate(-8deg);background:var(--paper)}
.scene.on .brief{animation:sh-land .7s var(--ease-out) .1s both}
.scene.on .brief li::after{animation:sh-unredact .34s cubic-bezier(.6,0,.4,1) calc(2.25s + var(--i)*.13s) both}
.scene.on .seal{animation:sh-seal 2s linear .75s both}
.voice{display:flex;flex-direction:column;gap:1.2cqw;align-items:flex-start}
.voice span{font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.22em;text-transform:uppercase;font-size:max(10px,1.2cqw);color:var(--paper-70)}
.bars{display:flex;align-items:center;gap:.55cqw;height:10cqw}
.bars i{width:.75cqw;height:calc(var(--h,1)*100%);background:var(--acid);transform:scaleY(.12);transform-origin:center}
.scene.on .voice{animation:sh-rise .5s var(--ease-out) 1.85s both}
.scene.on .bars i{animation:sh-voice .42s ease-in-out calc(1.9s + var(--i)*-.11s) infinite alternate}

/* 03 the clock: 60 minutes in under 4 seconds, 4 lanes build, the twist card lands at 30:00 and the clock holds there a beat for the twist block (js/show.js) */
.clockwrap{display:flex;flex-direction:column;gap:1.2cqw;min-width:30cqw}
.bigclock{font-family:var(--font-display);font-size:13.5cqw;line-height:.82;color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bigclock.late{color:var(--blood)}
.drain{height:.7cqw;background:var(--paper-15)}
.drain i{display:block;height:100%;background:var(--acid);transform-origin:left;transform:scaleX(var(--p,1))}
.bigclock.late+.drain i{background:var(--blood)}
.clock-sub{font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.22em;text-transform:uppercase;font-size:max(10px,1.2cqw);color:var(--paper-70)}
.lanes{position:relative;display:grid;gap:1.5cqw;width:38cqw}
.lane{display:grid;grid-template-columns:7.5cqw 1fr;align-items:center;gap:1.2cqw}
.lane b{font-family:var(--font-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:max(10px,1.2cqw);color:var(--paper-70)}
.lane span{display:block;height:2.4cqw;padding:.35cqw;border:1px solid var(--paper-15);background:var(--steel)}
.lane i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--f));background:repeating-linear-gradient(90deg,var(--acid) 0 1cqw,transparent 1cqw 1.3cqw)}
.twist{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:flex-start;gap:.3cqw;padding:1cqw 2.2cqw 1.2cqw;background:var(--blood-deep);color:var(--paper);box-shadow:.7cqw .7cqw 0 var(--acid);transform:translate(-50%,-50%) skewX(var(--skew)) rotate(-3deg);white-space:nowrap}
.twist b{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:max(16px,3.6cqw);line-height:1}
.twist span{font-family:var(--font-label);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:max(9px,1.05cqw)}
.flash{position:absolute;inset:-30cqw;background:var(--blood);opacity:0;pointer-events:none;mix-blend-mode:normal}
.scene.on .clockwrap{animation:sh-rise .5s var(--ease-out) .05s both}
.scene.on .lane{animation:sh-rise .45s var(--ease-out) calc(.15s + var(--i)*.07s) both}
.scene.on .lane i{animation:sh-grow 3.6s steps(16) .3s both}
.scene.on .twist{animation:sh-slam .5s var(--ease-slam) 2.1s both}
.scene.on .flash{animation:sh-flash .5s ease-out 2.1s both}

/* 04 the build: one frame, 5 kinds of build, cut on the beat */
.device{position:relative;width:42cqw;aspect-ratio:16/10.4;flex:none;border:2px solid var(--acid);background:var(--ink);box-shadow:1cqw 1cqw 0 var(--blood);overflow:hidden}
.dbar{position:absolute;left:0;right:0;top:0;height:2.6cqw;display:flex;align-items:center;gap:.6cqw;padding:0 1.2cqw;border-bottom:1px solid var(--paper-15)}
.dbar>i{width:.8cqw;height:.8cqw;border-radius:50%;background:var(--paper-40)}
.dbar span{margin-left:1.2cqw;font-family:var(--font-label);font-weight:700;letter-spacing:.1em;font-size:max(9px,1.05cqw);color:var(--paper-40);display:flex;align-items:center}
.dbar span b{display:inline-block;width:.6cqw;height:1.3cqw;margin-left:.3cqw;background:var(--acid);animation:lt-blink .9s steps(2) infinite}
.m{position:absolute;inset:2.6cqw 0 0 0;padding:2cqw 2.4cqw;opacity:0}
.scene.on .m{animation:sh-mode .8s linear calc(.45s + var(--i)*.8s) forwards}
.m:last-child{opacity:1}
.scene.on .m:last-child{animation:sh-modein .3s var(--ease-out) calc(.45s + var(--i)*.8s) both}
.phone{width:12cqw;height:100%;margin:0 auto;display:flex;flex-direction:column;gap:.8cqw;padding:1.1cqw;border:2px solid var(--paper-40)}
.phone i{display:block;height:1.9cqw;background:var(--paper-15)}
.phone i.hd{height:3.2cqw;background:var(--acid)}
.phone i.go{margin-top:auto;height:2.2cqw;width:70%;align-self:center;background:var(--blood);transform:skewX(var(--skew))}
.scene.on .m-app .phone i{animation:sh-rise .3s var(--ease-out) .5s both}
.m-web{display:flex;flex-direction:column;gap:1cqw}
.m-web i{display:block;background:var(--paper-15)}
.m-web .nv{height:1.1cqw;width:100%;background:none;border-bottom:1px solid var(--paper-15)}
.m-web .h1{height:3.6cqw;width:72%;background:var(--paper)}
.m-web .p{height:1cqw;width:88%}.m-web .p.s{width:60%}
.m-web .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw;margin-top:auto}
.m-web .cols i{height:7cqw;border-top:3px solid var(--acid)}
.m-film{padding:3cqw 0;display:flex;align-items:center}
.strip{width:100%;height:100%;overflow:hidden;padding:1.6cqw 0;background:var(--steel);
  background-image:repeating-linear-gradient(90deg,var(--ink) 0 1cqw,transparent 1cqw 2.2cqw),repeating-linear-gradient(90deg,var(--ink) 0 1cqw,transparent 1cqw 2.2cqw);
  background-size:100% .8cqw,100% .8cqw;background-position:0 .4cqw,0 calc(100% - .4cqw);background-repeat:repeat-x}
.reel-track{display:flex;gap:1cqw;height:100%;width:max-content;animation:sh-reel 1.6s linear infinite}
.reel-track i{width:11cqw;height:100%;flex:none;background:var(--ink);border:1px solid var(--paper-15);position:relative}
.reel-track i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.reel-track .f1::after{width:4cqw;height:4cqw;border-radius:50%;background:var(--acid)}
.reel-track .f2::after{width:5cqw;height:3cqw;background:var(--blood);transform:translate(-50%,-50%) skewX(var(--skew))}
.reel-track .f3::after{width:0;height:0;border-left:2.6cqw solid transparent;border-right:2.6cqw solid transparent;border-bottom:4.4cqw solid var(--paper)}
.reel-track .f4::after{width:4.4cqw;height:4.4cqw;border:.5cqw solid var(--acid);border-radius:50%}
.m-music{display:flex;align-items:flex-end;padding-bottom:3cqw}
.eq{display:flex;align-items:flex-end;gap:.5cqw;height:100%;width:100%}
.eq i{flex:1;height:calc(var(--h,1)*100%);background:var(--acid);transform-origin:bottom;transform:scaleY(.2);animation:sh-eq .36s ease-in-out calc(var(--i)*-.07s) infinite alternate}
.eq i:nth-child(5n){background:var(--blood)}
.m-game{background-image:linear-gradient(var(--paper-10) 1px,transparent 1px),linear-gradient(90deg,var(--paper-10) 1px,transparent 1px);background-size:3cqw 3cqw;background-position:2.4cqw 2cqw}
.m-game .score{position:absolute;left:2.4cqw;top:1.2cqw;font-family:var(--font-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:max(9px,1.05cqw);color:var(--paper-70)}
.m-game .coin{position:absolute;left:calc(2.4cqw + 3cqw*8);top:calc(2cqw + 3cqw*4);width:3cqw;height:3cqw;background:var(--blood);animation:lt-blink .5s steps(2) infinite}
.m-game .snake{position:absolute;left:calc(2.4cqw + 3cqw*1);top:calc(2cqw + 3cqw*2);width:9cqw;height:3cqw;background:repeating-linear-gradient(90deg,var(--acid) 0 2.7cqw,transparent 2.7cqw 3cqw)}
.scene.on .m-game .snake{animation:sh-snake 1.2s steps(4) calc(.45s + 4*.8s) both}
.kinds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5cqw}
.kinds li{font-family:var(--font-display);text-transform:uppercase;font-size:max(14px,3.1cqw);line-height:1;color:var(--paper-15);transition:none}
.kinds li:last-child{color:var(--acid);transform:translateX(1.4cqw)}
.scene.on .kinds li{animation:sh-kind .8s linear calc(.45s + var(--i)*.8s) forwards}
.scene.on .kinds li:last-child{animation:sh-kindin .25s var(--ease-out) calc(.45s + var(--i)*.8s) both}

/* 05 the call: 3 scorecards deal in, the totals count, the winner's row lights */
.boardwrap{display:flex;flex-direction:column;gap:1.4cqw}
.board{position:relative;isolation:isolate;display:grid;grid-template-columns:11cqw repeat(3,9cqw) 10.5cqw;gap:.55cqw;align-items:stretch}
.board .th{font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.2em;text-transform:uppercase;font-size:max(9px,1.15cqw);color:var(--paper-40);padding-bottom:.4cqw;text-align:center}
.board .th.tt{color:var(--acid)}
.board b{display:flex;align-items:center;font-family:var(--font-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:max(10px,1.35cqw);color:var(--paper-70);padding-left:1cqw}
.board b.w{color:var(--paper)}
.board .pt,.board .tot{display:grid;place-items:center;height:5.4cqw;background:var(--steel);border:1px solid var(--paper-15);font-family:var(--font-display);font-size:max(14px,2.6cqw);line-height:1;color:var(--paper)}
@property --v{syntax:'<integer>';inherits:false;initial-value:0}
.board .tot{--v:var(--n);counter-reset:v var(--v);border:2px solid var(--acid);color:var(--acid);font-size:max(16px,3cqw)}
.board .tot::after{content:counter(v)}
.board .tot.w{background:var(--acid);color:var(--ink)}
.board [style*="--r:0"]{grid-row:2}.board [style*="--r:1"]{grid-row:3}.board [style*="--r:2"]{grid-row:4}.board [style*="--r:3"]{grid-row:5}
.board b{grid-column:1}.board [style*="--c:0"]{grid-column:2}.board [style*="--c:1"]{grid-column:3}.board [style*="--c:2"]{grid-column:4}.board .tot{grid-column:5}
.winbar{grid-column:1/-1;grid-row:3;margin:-.4cqw -.8cqw;background:var(--blood);z-index:-1;transform-origin:left}
.winner{position:absolute;left:calc(100% + 2.2cqw);top:calc(2.4cqw + 5.7cqw);padding:.6cqw 1.6cqw;background:var(--paper);color:var(--ink);font-family:var(--font-display);text-transform:uppercase;font-size:max(14px,2.3cqw);line-height:1;transform:rotate(var(--rotate-stamp));box-shadow:.5cqw .5cqw 0 var(--ink)}
.boardwrap .key{font-family:var(--font-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:max(9px,1.1cqw);color:var(--paper-40)}
.scene.on .board .th{animation:sh-rise .4s var(--ease-out) .1s both}
.scene.on .board b{animation:sh-rise .4s var(--ease-out) calc(.2s + var(--r)*.06s) both}
.scene.on .board .pt{animation:sh-flip .42s var(--ease-punch) calc(.55s + var(--c)*.42s + var(--r)*.07s) both}
.scene.on .board .tot{animation:sh-count .9s cubic-bezier(.3,0,.2,1) calc(2s + var(--r)*.08s) both}
.scene.on .winbar{animation:sh-wipex .5s var(--ease-out) 3.15s both}
.scene.on .board .tot.w{animation:sh-count .9s cubic-bezier(.3,0,.2,1) calc(2s + var(--r)*.08s) both,sh-winfill .3s ease 3.15s both}
.scene.on .winner{animation:sh-stamp .5s cubic-bezier(.2,1.2,.3,1) 3.45s both}
.scene.on .boardwrap .key{animation:sh-rise .5s var(--ease-out) 1.9s both}

/* the cut between scenes: an acid slab, a blood slab behind it */
.show-wipe{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.show-wipe i{position:absolute;top:-10%;bottom:-10%;left:0;width:120%;transform:translateX(-140%) skewX(-12deg)}
.show-wipe i:first-child{background:var(--blood)}
.show-wipe i:last-child{background:var(--acid)}
.show.wiping .show-wipe i:first-child{animation:sh-cut .7s cubic-bezier(.7,0,.3,1) both}
.show.wiping .show-wipe i:last-child{animation:sh-cut .7s cubic-bezier(.7,0,.3,1) .07s both}

/* chapters, pause, explainer */
.show-bar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-top:22px}
.chap-hint{flex-basis:100%;margin-bottom:-4px;font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--paper-40)}
.chap{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;list-style:none;margin:0;padding:0}
.chap button{position:relative;width:100%;display:flex;gap:7px;align-items:baseline;padding:9px 0 4px;border:0;border-top:3px solid var(--paper-15);background:none;cursor:pointer;text-align:left;
  font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--paper-40);transition:color .2s}
.chap button b{color:var(--acid);font-weight:800}
.chap button:hover,.chap button[aria-current="step"]{color:var(--paper)}
.chap button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (pointer:coarse){.chap button{min-height:44px}}
.chap .pg{position:absolute;left:0;top:-3px;height:3px;width:100%;background:var(--acid);transform:scaleX(0);transform-origin:left}
.chap .done .pg{transform:scaleX(1)}
.chap .cur .pg{animation:sh-prog var(--dur,4s) linear both}
.show.paused .chap .cur .pg,.show.paused .scene *,.show.paused .scene *::before,.show.paused .scene *::after{animation-play-state:paused!important}
.show-btn{flex:none;border:0;padding:0;background:none;cursor:pointer;font:inherit;white-space:nowrap}
.show-btn span{display:inline-block;font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.2em;font-size:12px;padding:8px 13px 8px 16px;transform:skewX(var(--skew));transition:box-shadow .2s,transform .2s var(--ease-out)}
.show-btn span>i{display:inline-block;transform:skewX(var(--skew-counter));font-style:italic}
.show-btn small{font-size:.85em;opacity:.7;margin-left:3px}
.show-toggle span{border:1px solid var(--paper-40);color:var(--paper)}
/* the explainer button sits on its own line under the chapters and reads as the main action (since 2026-10-17) */
.show-film{flex-basis:100%;text-align:left;margin-top:6px}
.show-film span{background:var(--acid);color:var(--ink);box-shadow:5px 5px 0 var(--blood);font-size:15px;letter-spacing:.22em;padding:13px 22px 13px 25px}
.show-film span>i::before{content:"";display:inline-block;margin-right:11px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
.show-btn:hover span{transform:skewX(var(--skew)) translate(-2px,-2px)}
.show-film:hover span{box-shadow:7px 7px 0 var(--blood)}
@media(max-width:640px){.show-film span{font-size:13px;padding:11px 16px 11px 19px}}
@media(max-width:400px){.show-film span{letter-spacing:.12em;padding:11px 14px 11px 16px}}
.show-btn:focus-visible{outline:none}.show-btn:focus-visible span{outline:2px solid var(--paper);outline-offset:3px}
.show.static .show-toggle,.show.film .show-toggle,.show.film .show-film{display:none}
.show.film .chap .pg{transform:scaleX(0)!important;animation:none!important}
/* the explainer is 16:9; the stage takes its shape while it shows, at every width */
.show.film .show-stage{aspect-ratio:16/9!important}

@media (prefers-reduced-motion:reduce){.league>.league-fx{transition:none;opacity:1}}

/* the explainer, opened over the stage */
.show .league-reel{position:absolute;inset:0;z-index:6;aspect-ratio:auto;border:0;box-shadow:none;opacity:1;transform:none}
.show .league-reel[hidden]{display:none}
.reel-close{position:absolute;z-index:3;right:12px;top:12px;border:0;padding:0;background:none;cursor:pointer;font:inherit}
.reel-close span{display:inline-block;background:var(--ink);color:var(--paper);border:1px solid var(--paper-40);font-family:var(--font-label);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.2em;font-size:12px;padding:7px 12px 7px 15px;transform:skewX(var(--skew))}
.reel-close span>i{display:inline-block;transform:skewX(var(--skew-counter));font-style:italic}
.reel-close:focus-visible{outline:none}.reel-close:focus-visible span{outline:2px solid var(--paper);outline-offset:3px}

@keyframes sh-clipx{from{clip-path:inset(0 100% 0 0)}}
@keyframes sh-line{from{opacity:0;transform:translateY(.45em);clip-path:inset(0 0 100% 0)}}
@keyframes sh-rise{from{opacity:0;transform:translateY(2cqw)}}
@keyframes sh-pop{from{opacity:0;transform:scale(.3)}}
@keyframes sh-dim{from{opacity:1}}
@keyframes sh-fillup{from{clip-path:inset(100% 0 0 0)}}
@keyframes sh-lock{0%{opacity:0;transform:scale(1.9)}55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes sh-scan{0%{top:0;opacity:0}6%,88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes sh-land{from{opacity:0;transform:translateY(40%) rotate(5deg)}}
@keyframes sh-unredact{from{transform:scaleX(1)}}
@keyframes sh-seal{0%{opacity:0;transform:rotate(-8deg) scale(2.4)}9%{opacity:1;transform:rotate(-8deg) scale(1)}12%{transform:rotate(-8deg) scale(1.06)}15%,72%{opacity:1;transform:rotate(-8deg) scale(1)}100%{opacity:0;transform:rotate(-14deg) scale(1.3) translateY(-60%)}}
@keyframes sh-voice{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
@keyframes sh-grow{from{transform:scaleX(0)}}
@keyframes sh-slam{from{opacity:0;transform:translate(-50%,-50%) skewX(var(--skew)) rotate(-3deg) scale(2.2)}}
@keyframes sh-flash{0%{opacity:0}1%{opacity:.35}100%{opacity:0}}
@keyframes sh-mode{0%{opacity:1;transform:translateX(5%)}12%{transform:none}99.9%{opacity:1}100%{opacity:0}}
@keyframes sh-modein{from{opacity:0;transform:translateX(5%)}}
@keyframes sh-reel{to{transform:translateX(calc(-4*12cqw))}}
@keyframes sh-eq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes sh-snake{from{transform:translateX(-6cqw)}}
@keyframes sh-kind{0%,99.9%{color:var(--acid);transform:translateX(1.4cqw)}100%{color:var(--paper-15);transform:none}}
@keyframes sh-kindin{from{color:var(--paper-15);transform:none}}
@keyframes sh-flip{from{opacity:0;transform:perspective(400px) rotateX(-90deg)}}
@keyframes sh-count{0%{--v:0;opacity:0}12%{opacity:1}}
@keyframes sh-wipex{from{transform:scaleX(0)}}
@keyframes sh-winfill{from{background:var(--steel);color:var(--acid)}}
@keyframes sh-stamp{from{opacity:0;transform:rotate(var(--rotate-stamp)) scale(2.4)}}
@keyframes sh-cut{0%{transform:translateX(-140%) skewX(-12deg)}100%{transform:translateX(140%) skewX(-12deg)}}
@keyframes sh-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:1100px){.show{max-width:880px}}
@media(max-width:640px){
  .show-stage{aspect-ratio:4/5;box-shadow:var(--shadow-hard) var(--blood)}
  .cap{right:5cqw;top:11cqw}
  .cap .k{font-size:max(10px,2.6cqw)}
  .cap .hl{font-size:max(22px,7cqw);margin-top:2cqw}
  .show-hud{top:4cqw;font-size:10px}
  .show-hud span:last-child{display:none}
  .vis{top:50cqw;bottom:5cqw;flex-direction:column;gap:5cqw}
  .roster{grid-template-columns:repeat(9,1fr);width:86cqw;gap:1.6cqw}
  .roster-key{position:static;font-size:10px;gap:5cqw}
  .roster-key span::before{width:10px;height:10px}
  .s-roster .vis{gap:8cqw}
  .tile s em{font-size:10px;min-width:16px;top:-6px;right:-5px}
  .brief{width:80cqw;padding:4cqw}
  .brief li{font-size:max(11px,3.2cqw);margin:1cqw 0}
  .brief .bh span{font-size:9px}
  .voice{flex-direction:row;align-items:center;gap:4cqw}
  .bars{height:8cqw;gap:1.2cqw}.bars i{width:1.6cqw}
  .clockwrap{min-width:0;width:86cqw}
  .bigclock{font-size:22cqw}
  .drain{height:1.6cqw}
  .lanes{width:86cqw;gap:2cqw}
  .lane{grid-template-columns:18cqw 1fr}
  .lane b,.board b{white-space:nowrap;letter-spacing:.08em}
  .lane span{height:4.4cqw;padding:.8cqw}
  .twist{padding:2cqw 4cqw}
  .twist b{font-size:7cqw}
  .s-build .vis{gap:5cqw}
  .device{width:76cqw}
  .dbar{height:5.4cqw;gap:1.2cqw}.dbar>i{width:1.6cqw;height:1.6cqw}
  .m{inset:5.4cqw 0 0 0;padding:4cqw 4.6cqw}
  .phone{width:24cqw;gap:1.6cqw;padding:2cqw}.phone i{height:3.6cqw}.phone i.hd{height:6cqw}.phone i.go{height:4cqw}
  .m-web{gap:2cqw}.m-web .h1{height:7cqw}.m-web .p{height:2cqw}.m-web .cols i{height:13cqw}
  .reel-track i{width:22cqw}
  @keyframes sh-reel{to{transform:translateX(calc(-4*24cqw))}}
  .m-game{background-size:6cqw 6cqw;background-position:4.6cqw 4cqw}
  .m-game .coin{left:calc(4.6cqw + 6cqw*9);top:calc(4cqw + 6cqw*4);width:6cqw;height:6cqw}
  .m-game .snake{left:calc(4.6cqw + 6cqw*2);top:calc(4cqw + 6cqw*2);width:18cqw;height:6cqw;background:repeating-linear-gradient(90deg,var(--acid) 0 5.4cqw,transparent 5.4cqw 6cqw)}
  .kinds{flex-direction:row;flex-wrap:wrap;gap:2cqw 4cqw;width:84cqw}
  .kinds li{font-size:max(15px,4.6cqw)}
  .kinds li:last-child,.scene.on .kinds li{transform:none}
  .board{grid-template-columns:17cqw repeat(3,14cqw) 17cqw;gap:1cqw}
  .board .pt,.board .tot{height:10cqw}
  .board b{padding-left:0}
  .winner{left:auto;right:0;top:auto;bottom:-13cqw}
  .boardwrap .key{font-size:9px;letter-spacing:.08em;max-width:60%}
  .show-bar{flex-wrap:wrap;gap:12px}
  .chap{flex-basis:100%}
  .chap button span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .show{opacity:1!important;transform:none!important}
  .show-stage,.show-grid{transform:none!important}
  .show *,.show *::before,.show *::after{animation:none!important;transition:none!important}
}