/* Shared reel stage. Used by the live player and the MP4 renderer.
   Every animation here is driven by script (Web Animations currentTime), never by the clock,
   so a frame at time t renders identically in the browser and in the video. */
:root{
  --ink:#16216A; --ink-2:#0F1750; --pad:#FBF1A9; --pad-rule:#9DB4E8; --pad-margin:#E56A6A;
  --hl:#FF6FB0; --stamp:#E5322D; --stamp-warm:#B9600A; --stamp-cool:#2E6B4F; --paper-ink:#1D2140; --white:#FFFFFF;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --f-legal:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
.stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  background:radial-gradient(120% 80% at 80% 0%,var(--ink) 0%,var(--ink-2) 70%);color:var(--white);user-select:none;-webkit-user-select:none}
.bars{position:absolute;top:3.5cqw;left:4cqw;right:4cqw;display:flex;gap:1.2cqw;z-index:3}
.bar{flex:1;height:.9cqw;min-height:2px;border-radius:9px;background:rgba(255,255,255,.28);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--white)}
.scene{position:absolute;inset:0;padding:12cqw 7cqw 9cqw;display:flex;flex-direction:column}
.chiprow{display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.chip{font:500 3.1cqw/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:1.8cqw 2.6cqw;border-radius:99px;background:rgba(255,255,255,.12)}
.count{font:500 3.1cqw/1 var(--f-mono);opacity:.7}
.padcard{margin-top:6cqw;background:var(--pad);color:var(--paper-ink);border-radius:2cqw;padding:5cqw 5cqw 5cqw 11cqw;position:relative;font:italic 500 4.3cqw/7cqw var(--f-legal);
  background-image:linear-gradient(90deg,transparent 7.5cqw,var(--pad-margin) 7.5cqw,var(--pad-margin) calc(7.5cqw + 2px),transparent calc(7.5cqw + 2px)),repeating-linear-gradient(var(--pad) 0 calc(7cqw - 1px),var(--pad-rule) calc(7cqw - 1px) 7cqw);background-position:0 0,0 5cqw;
  transform:rotate(-1.2deg);box-shadow:0 2cqw 6cqw rgba(0,0,0,.35)}
.padcard mark{color:inherit;background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 60%/0% 78%;padding:0 .1em;border-radius:.2em}
.stamp{position:absolute;right:-2cqw;top:-5cqw;transform:rotate(9deg);font:800 3.6cqw/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--stamp);border:.7cqw solid var(--stamp);padding:1.6cqw 2.4cqw;border-radius:1.4cqw;background:rgba(251,241,169,.92)}
.stamp.warm{color:var(--stamp-warm);border-color:var(--stamp-warm)}
.stamp.cool{color:var(--stamp-cool);border-color:var(--stamp-cool)}
.headline{margin-top:auto;font:800 11cqw/.98 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.plain{margin-top:4cqw;font:500 4.5cqw/1.4 var(--f-body);opacity:.88;max-width:34ch}
.kicker{font:500 3.3cqw/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.big{font:800 13cqw/.95 var(--f-display);letter-spacing:-.03em;margin-top:3cqw;text-wrap:balance;overflow-wrap:anywhere}
.big .hlw{color:var(--ink-2);background:var(--pad);padding:0 .12em;border-radius:.08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.stats{display:flex;gap:6cqw;margin-top:8cqw}
.stat b{display:block;font:800 9cqw/1 var(--f-display)}
.stat span{font:500 3cqw/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.hook{margin-top:auto;font:500 5.6cqw/1.3 var(--f-body)}
.gauge{width:100%;margin-top:6cqw}
.gauge .track{stroke:rgba(255,255,255,.16)}
.gauge .val{stroke:var(--hl)}
.score{font:800 22cqw/1 var(--f-display);text-align:center;margin-top:-30cqw;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.score small{font-size:6cqw;opacity:.7;letter-spacing:0}
.scorelab{text-align:center;font:500 3.2cqw/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-top:2cqw}
.verdict{margin-top:auto;font:600 5.4cqw/1.3 var(--f-body);text-wrap:pretty}
.signoff{margin-top:4cqw;font:500 3.2cqw/1.4 var(--f-mono);opacity:.65}

@keyframes rise{from{opacity:0;transform:translateY(5cqw)}to{opacity:1;transform:none}}
@keyframes slam{0%{opacity:0;transform:scale(1.35)}60%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes drop{from{opacity:0;transform:translateY(-8cqw) rotate(-1.2deg)}to{opacity:1;transform:rotate(-1.2deg)}}
@keyframes thunk{0%{opacity:0;transform:rotate(9deg) scale(2.2)}70%{opacity:1;transform:rotate(9deg) scale(.92)}100%{opacity:1;transform:rotate(9deg) scale(1)}}
@keyframes sweep{from{background-size:0% 78%}to{background-size:100% 78%}}
@keyframes arc{from{stroke-dashoffset:100}}
.a-rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.a-slam{animation:slam .55s cubic-bezier(.2,.8,.2,1) both}
.padcard.a-drop{animation:drop .5s cubic-bezier(.2,.8,.2,1) both}
.stamp.a-thunk{animation:thunk .35s cubic-bezier(.3,1.4,.5,1) both}
.padcard mark{animation:sweep .7s ease-out both}
.gauge .val{animation:arc 1.6s cubic-bezier(.2,.8,.2,1) .3s both}