/* ======== the premiere show (loaded last; overrides frankenfilm.css) ========
   Rules: square corners, no serif, no brown (gold never sits under black), hairlines are 2px #343a4f or a change of
   fill, nothing meaningful under 18px (24px for anything read during the show), nothing in the webcam box
   (x >= 1440, y <= 300). Motion is transform and opacity; nothing large carries an animated filter. */

/* layers: bg < spot pool < back particles < tint, dim < camera(stage) < curtains < curtain light < vignette < front particles < hint */
.sh-cam { position: absolute; inset: 0; z-index: 5; transform-origin: 50% 50%; will-change: transform; }
.sh-fxb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.sh-rays, .sh-beams, .sh-grain, .sh-flash { display: none !important; }
/* the stage light: seen only where it lands, one soft pool on the floor */
.sh-spot { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen; will-change: opacity; --x: 960px; --c: 220,230,255; }
.sh-spot .pool { position: absolute; left: calc(var(--x) - 640px); top: 800px; width: 1280px; height: 320px; background: radial-gradient(closest-side, rgba(var(--c), .24), rgba(var(--c), .07) 60%, transparent); }
.sh-spot .cone { display: none; }
/* tints and the dark sit behind the stage, never over it */
.sh-grade { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: rgba(4, 6, 12, .45); }
.sh-grade[data-mode="cold"] { background: rgba(6, 12, 30, .55); }
.sh-grade[data-mode="dead"] { background: rgba(2, 3, 8, .62); }
.sh-dim { z-index: 4; }
.sh-vig { z-index: 6; pointer-events: none; }
.sh-fx { z-index: 7; }
.sh-leader { z-index: 20; image-rendering: auto; }
/* a band of light that crosses a surface */
.fx-sweep { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: block; }

/* ===== real velvet (rendered texture), lit from above when it is closed ===== */
.sh-curtain { z-index: 6; border-radius: 0; will-change: transform; background: #1c0206; overflow: hidden; }
.sh-curtain::before { content: ''; position: absolute; inset: 0; background: url(../assets/ui/curtain.jpg) center top / cover no-repeat; }
.sh-curtain.r::before { transform: scaleX(-1); }
.sh-curtain.l::after { content: ''; position: absolute; inset: 0; height: auto; background:
  linear-gradient(180deg, rgba(0,0,0,.3), transparent 16%, transparent 70%, rgba(0,0,0,.62)),
  linear-gradient(270deg, rgba(0,0,0,.5), rgba(0,0,0,.14) 6%, transparent 16%); }
.sh-curtain.r::after { content: ''; position: absolute; inset: 0; height: auto; background:
  linear-gradient(180deg, rgba(0,0,0,.3), transparent 16%, transparent 70%, rgba(0,0,0,.62)),
  linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.14) 6%, transparent 16%); }
/* the top light on the closed velvet: fixed in place, so the cloth moves out of it when it parts */
.sh-cl { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; will-change: opacity; }
.sh-cl i { position: absolute; inset: 0; display: block; }
/* the light lifts the velvet's own red (overlay), and the folds outside it fall off into the dark */
.sh-cl .lt { mix-blend-mode: overlay; background: radial-gradient(900px 980px at 50% -14%, rgba(255,206,184,.82), rgba(255,186,160,.44) 36%, rgba(255,170,150,.12) 60%, transparent 74%); }
.sh-cl .fo { background: radial-gradient(1500px 1150px at 50% -10%, transparent 40%, rgba(2,2,4,.38) 70%, rgba(2,2,4,.62) 100%); }

/* the pause cue: a key cap and an arrow, nothing else (bottom right, out of the way) */
.sh-hint { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; font-size: 0; background: rgba(6,7,11,.88); border: 2px solid #343a4f; color: #f4efe4;
  border-radius: 0; left: auto; right: 40px; bottom: 32px; transform: none; transition: none; }
.sh-hint kbd { font-family: var(--f-d, 'Barlow Condensed'), sans-serif; font-weight: 800; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: #10131c; background: #f3dc95; padding: 5px 10px 4px; border-radius: 0; }
.sh-hint svg { width: 22px; height: 22px; display: block; animation: hintnudge 1.4s ease-in-out infinite; }
@keyframes hintnudge { 50% { transform: translateX(4px); } }
.sh-hint.on { animation: none; opacity: 1; }

/* hushed: a layer that steps back fades, and its gold turns silver */
.hushed, .hushed * { --gold: #a9adbd; }
.hushed .mt-num b.gilt, .hushed .mt-badge.gold { background: none !important; -webkit-text-fill-color: #a9adbd; color: #a9adbd !important; filter: none !important; }

/* ======== key art: the generated one-sheet, set like a real poster (styles js/poster.js output).
   Heads are a montage, not oval cut-outs: tall crops that blend into each other at the sides and burn out into the
   title area. Title in caps, tracked per genre. Billing block in the condensed face, like every real one-sheet. */
.poster .heads { top: 0; height: 700px; }
.poster .head { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 52%, transparent 97%), linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 52%, transparent 97%), linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.poster .head.lead { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 97%), linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 97%), linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%); }
.poster .head img { object-position: 50% 30%; filter: grayscale(1) contrast(1.22) brightness(1.02); }
.poster .head.co img, .poster .head.side img { filter: grayscale(1) contrast(1.15) brightness(.82); }
.poster .head .mono { font-family: var(--f-d); font-weight: 800; font-size: 150px; color: rgba(255,255,255,.08); }
.poster .vignette { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 13%, transparent 50%, var(--pbg) 70%), linear-gradient(90deg, rgba(0,0,0,.35), transparent 18%, transparent 82%, rgba(0,0,0,.35)); }
.poster .names { top: 26px; gap: 26px; font-family: var(--f-d); font-weight: 700; font-size: 21px; letter-spacing: .14em; color: rgba(255,255,255,.94); z-index: 2; }
.poster .ptag { top: 634px; left: 40px; right: 40px; font-family: var(--f-ui); font-style: normal; font-weight: 600; font-size: 17px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.poster .ptitle { top: 670px; left: 28px; right: 28px; line-height: .9; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 10px 40px rgba(0,0,0,.6); }
.poster .prating { left: 40px; bottom: 120px; font-family: var(--f-d); font-weight: 800; font-size: 18px; letter-spacing: .04em; border-width: 1.5px; padding: 0 5px; opacity: .8; }
.poster .pdate { right: 40px; bottom: 121px; font-family: var(--f-d); font-weight: 800; font-size: 22px; letter-spacing: .18em; }
.poster .block { left: 40px; right: 40px; bottom: 30px; font-family: var(--f-d); font-weight: 500; font-size: 17px; line-height: 1.12; letter-spacing: .02em; color: rgba(255,255,255,.66); transform: scaleY(1.18); transform-origin: 50% 100%; }
.poster .block b { font-weight: 700; font-size: 17px; color: rgba(255,255,255,.88); letter-spacing: .04em; }
/* presented on the stage like a print under glass: a hairline and a long shadow, no frame-in-a-frame, no carpet; square */
.poster { box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 40px 90px rgba(0,0,0,.8); border-radius: 0 !important; }
.premiere::after { display: none; }
/* ===== key art: backdrop plate + graded, rim-lit cut-outs ===== */
.poster .kart { background: #05060a; overflow: hidden; }
.poster .kart .kbd { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.05); }
.poster .kshade { position: absolute; left: 0; right: 0; pointer-events: none; }
.poster .kshade.top { top: 0; height: 240px; background: linear-gradient(180deg, rgba(3,4,8,.82), rgba(3,4,8,.35) 45%, transparent); z-index: 1; }
.poster .kshade.bottom { bottom: 0; height: 470px; background: linear-gradient(0deg, rgba(3,4,8,.96) 0%, rgba(3,4,8,.85) 38%, rgba(3,4,8,.35) 72%, transparent); z-index: 4; }
.poster .kheads { position: absolute; inset: 0; height: auto; top: 0; }
.poster .khead { position: absolute; -webkit-mask-image: none; mask-image: none; }
.poster .khead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%); mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
  filter: drop-shadow(0 0 2px rgba(var(--rim), .3)); }
/* the side heads sit back: a touch darker, the same one cheap rim (no SVG grade, no stacked shadows: they cost seconds of paint) */
.poster .khead.co img, .poster .khead.side img { filter: brightness(.84) drop-shadow(0 0 2px rgba(var(--rim), .22)); }
/* grade only the person: a tint masked by their own cut-out */
.poster .khead .kgrade { position: absolute; inset: 0; background: var(--grade); mix-blend-mode: color; pointer-events: none;
  -webkit-mask: var(--m) 50% 0 / cover no-repeat; mask: var(--m) 50% 0 / cover no-repeat; }
.poster .khead.side .kgrade, .poster .khead.co .kgrade { opacity: 1.4; }
/* no clean cut-out yet: the photo, feathered into the scene */
.poster .khead.photo img { -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 42%, #000 55%, transparent 76%); mask-image: radial-gradient(ellipse 48% 50% at 50% 42%, #000 55%, transparent 76%); filter: none; }
.poster .khead.photo .kgrade { -webkit-mask: radial-gradient(ellipse 48% 50% at 50% 42%, #000 55%, transparent 76%); mask: radial-gradient(ellipse 48% 50% at 50% 42%, #000 55%, transparent 76%); }
.poster .kvig { background: radial-gradient(ellipse 85% 75% at 50% 40%, transparent 55%, rgba(0,0,0,.55)); z-index: 5; }
.poster .names, .poster .ptag, .poster .ptitle, .poster .block, .poster .prating, .poster .pdate, .poster .writing { z-index: 6; }
/* the source crops cut through hair and shoulders: feather every crop edge so no straight cut ever shows */
.poster .khead:not(.photo) img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 66%, transparent 97%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 66%, transparent 97%); mask-composite: intersect; }
/* ---- poster billing: two fixed lines; a line that cannot fit wraps balanced (no orphan words) ---- */
.poster .block { text-align: center; }
.poster .block .bl { display: block; white-space: nowrap; overflow: hidden; }
.poster .block .bl.wrap { white-space: normal; text-wrap: balance; overflow: visible; }

/* ===== camera-safe: NymN's webcam sits top right (x >= 1440, y <= 300). Panels start below it ===== */
.sh-right, .sh-leaving { top: 300px !important; bottom: 40px; }
.sh-col { width: 100%; }

/* ======================================================================================================
   The opening (TV): a lower third over the velvet. Two fills, no coloured side bar.
   ====================================================================================================== */
.lt3 { position: absolute; left: 96px; bottom: 120px; z-index: 8; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none; }
.lt3 em { font-style: normal; font-family: var(--f-ui), sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .2em; text-transform: uppercase; color: #c9ccd8; }
.lt3 .lt-row { display: flex; align-items: stretch; }
.lt3 .lt-row b, .lt3 .lt-row span { display: block; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; padding: 16px 24px 13px; }
.lt3 .lt-row b { background: #f4efe4; color: #10131c; }
.lt3 .lt-row span { background: #12151e; color: #f3dc95; }
.lt3 .lt-row span small { font-size: inherit; text-transform: none; }

/* ======================================================================================================
   The arrivals: press photographs, one framing for everyone, lit by the flashes that take them
   ====================================================================================================== */
.ar-venue { position: absolute; inset: 0; z-index: 0; overflow: hidden; background:
    radial-gradient(760px 400px at 50% 0%, rgba(255,214,150,.08), transparent 70%),
    radial-gradient(1500px 620px at 50% 112%, rgba(110,15,31,.30), transparent 70%), #05060a; }
.ar-bokeh { position: absolute; left: -40px; top: 0; width: calc(100% + 80px); height: 100%; opacity: .7; }
/* the wall behind the subject takes each flash (the hard shadow falls on it) */
.ar-wall { position: absolute; left: calc(var(--wx, 960px) - 600px); top: calc(var(--wy, 590px) - 520px); width: 1200px; height: 1040px; opacity: 0; mix-blend-mode: screen; will-change: opacity;
  background: radial-gradient(closest-side, rgba(255,248,236,.5), rgba(255,244,228,.2) 50%, transparent); }
.ar-kick { position: absolute; z-index: 2; top: 116px; left: 0; right: 0; text-align: center; }
.ar-kick i { display: block; font-style: normal; font-family: var(--f-ui, 'Barlow'), sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .3em; text-transform: uppercase; color: #d9b45a; }
.ar-kick b { display: block; margin-top: 8px; font-family: var(--f-d, 'Barlow Condensed'), sans-serif; font-weight: 800; font-size: 60px; letter-spacing: .03em; color: #f4efe4; line-height: 1; }
.ar-row { position: absolute; z-index: 2; left: 0; right: 0; top: 306px; display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.ar-card { position: relative; width: 262px; flex: none; will-change: transform, opacity; }
.ar-card.lead { width: 292px; }
.ar-card.hero { z-index: 3; }
.ar-card:not(.in) { visibility: hidden; }
.ar-shadow { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 9 / 16; background: #000; opacity: 0; pointer-events: none; }
.ar-ph { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #0b0d14; box-shadow: 0 30px 70px rgba(0,0,0,.7); }
.ar-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; filter: saturate(.86) contrast(1.06); }
.ar-ph img.fb { object-position: 50% 20%; }
/* the subject is lit; the backgrounds of a dozen different events fall away into the dark */
.ar-ph::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
    radial-gradient(64% 42% at 50% 35%, transparent 24%, rgba(3,4,8,.6) 66%, rgba(3,4,8,.9) 100%),
    linear-gradient(180deg, transparent 64%, rgba(3,4,8,.6)); }
.ar-ph::before { display: none; }
/* the flash keys the frame from one side */
.ar-key { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: overlay; will-change: opacity; }
.ar-key.l { background: linear-gradient(100deg, #fffcf6 0%, rgba(255,250,240,.85) 26%, rgba(255,248,236,.4) 50%, rgba(0,0,0,.25) 78%, rgba(0,0,0,.4) 100%); }
.ar-key.r { background: linear-gradient(260deg, #fffcf6 0%, rgba(255,250,240,.85) 26%, rgba(255,248,236,.4) 50%, rgba(0,0,0,.25) 78%, rgba(0,0,0,.4) 100%); }
.ar-flash { display: none; }
.ar-sil { position: absolute; inset: 0; color: #1d2230; background: radial-gradient(110% 80% at 50% 25%, #171b26, #090b10 75%); }
.ar-sil svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.ar-pl { margin-top: 16px; text-align: center; }
.ar-pl i { display: block; font-style: normal; font-family: var(--f-ui, 'Barlow'), sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .16em; text-transform: uppercase; color: #a9adbd; }
.ar-pl b { display: block; margin-top: 5px; font-family: var(--f-d, 'Barlow Condensed'), sans-serif; font-weight: 800; font-size: 30px; line-height: 1.05; color: #f4efe4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.ar-card.lead .ar-pl b { font-size: 34px; }
.ar-card.vil .ar-pl i { color: #ff8a98; }
.ar-card.gold .ar-ph { box-shadow: 0 0 0 2px rgba(243,220,149,.45), 0 30px 70px rgba(0,0,0,.7); }
.ar-card.gold.hushed .ar-ph { box-shadow: 0 0 0 2px rgba(169,173,189,.5), 0 30px 70px rgba(0,0,0,.7); }
.ar-card.hushed.vil .ar-pl i { color: #a9adbd; }
.ar-buzz { position: absolute; z-index: 2; top: 950px; left: 0; right: 0; display: flex; justify-content: center; align-items: baseline; gap: 18px; }
.ar-buzz b { font-family: var(--f-d, 'Barlow Condensed'), sans-serif; font-weight: 800; font-size: 50px; line-height: 1; color: #f4efe4; }
.ar-buzz.t-gold b { color: #f3dc95; }
.ar-buzz span { font-family: var(--f-ui, 'Barlow'), sans-serif; font-weight: 500; font-size: 24px; color: #a9adbd; }
.ww-wrap { top: 960px; z-index: 4; }
.ww { font-family: var(--f-ui), sans-serif; font-size: 26px; color: #c9ccd8; }

/* ======================================================================================================
   The rating card: 600 x 880. The poster on the back, the numerals on the face, a 10 px edge between them.
   Built once; everything after that is a compositor move.
   ====================================================================================================== */
.ck { position: absolute; left: 50%; top: 50%; width: 600px; height: 880px; margin: -440px 0 0 -300px; perspective: 1600px; z-index: 2; will-change: transform, opacity; --fc: 52,58,79; }
.ck[data-tier="flop"] { --fc: 255,90,110; } .ck[data-tier="bronze"] { --fc: 255,122,58; } .ck[data-tier="silver"] { --fc: 230,233,242; }
.ck[data-tier="gold"] { --fc: 243,220,149; } .ck[data-tier="legendary"] { --fc: 255,246,220; }
.ck-in { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ck-back, .ck-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0; }
.ck-back { transform: translateZ(5px); background: #05060a; box-shadow: 0 40px 90px rgba(0,0,0,.8); }
.ck-face { transform: rotateY(180deg) translateZ(5px); background: #12151e; color: #f4efe4; text-align: center; box-shadow: 0 40px 90px rgba(0,0,0,.8); }
/* the edge: card stock, seen only when the card is side-on */
.ck-edge { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; transform: rotateY(90deg);
  background: linear-gradient(180deg, #6f7488 0%, #c9ccd8 22%, #f4efe4 50%, #c9ccd8 78%, #6f7488 100%); }
.ck-edge.r { left: auto; right: -5px; }
.ck-edge { opacity: 0; } .ck.turning .ck-edge { opacity: 1; } /* at rest the perspective would show a 1 px sliver of it */
/* the poster: the 660 x 990 one-sheet at .889 fills the card's height */
.rc-art { position: absolute; inset: 0; will-change: transform, opacity, filter; contain: paint; }
.rc-art .poster { position: absolute; left: 50%; top: 50%; width: 660px; height: 990px; margin: -495px 0 0 -330px; transform: scale(.8889); box-shadow: none; border-radius: 0; }
/* ten years later: a saturation layer greys the print without touching it; the restoration wipes it away */
.ck-desat { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #808080; mix-blend-mode: saturation; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.ck-print { position: absolute; left: 0; right: 0; top: 876px; height: 8px; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(255,246,220,.2), #fff6dc 14%, #ffffff 50%, #fff6dc 86%, rgba(255,246,220,.2)); box-shadow: 0 0 22px 4px rgba(255,246,220,.55); }
/* the frame presses on when the card is sealed: 6 px in the charge colour, a 2 px gap to the print */
.ck-frame { position: absolute; inset: 0; border: 6px solid rgb(var(--fc)); box-shadow: inset 0 0 0 2px #05060a; opacity: 0; pointer-events: none; transition: border-color .3s; }
/* light around the card only */
.ck-bloom { position: absolute; left: -300px; right: -300px; top: -240px; bottom: -240px; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(var(--fc), .42), rgba(var(--fc), .14) 50%, transparent 100%); }
.ck[data-tier="bronze"] .ck-bloom { background: radial-gradient(closest-side, rgba(214,224,255,.22), rgba(214,224,255,.07) 50%, transparent 100%); } /* an orange glow at a quarter strength over navy is brown: the light is cool, the copper stays in the card */
.ck[data-tier="legendary"] .ck-bloom { background: radial-gradient(closest-side, rgba(255,246,220,.5), rgba(255,236,190,.16) 52%, transparent 100%); }
/* the face: a graded collectible. Tier on top, the numerals, a rule, the verdict, the title as a footer */
.ck-face { --tc: 230,233,242; }
.ck-face.t-flop { --tc: 255,90,110; } .ck-face.t-bronze { --tc: 255,122,58; } .ck-face.t-silver { --tc: 230,233,242; }
.ck-face.t-gold { --tc: 243,220,149; } .ck-face.t-legendary { --tc: 255,246,220; }
.ck-rim { position: absolute; inset: 0; z-index: 4; border: 6px solid rgb(var(--tc)); box-shadow: inset 0 0 0 2px #05060a; pointer-events: none; }
.ck-face.t-legendary .ck-rim { box-shadow: inset 0 0 0 2px #05060a, inset 0 0 0 4px #d9b45a; }
/* a ghost of the film's key art behind the numerals: grey, about 30% */
.ck-face > .ck-plate { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; overflow: hidden; opacity: .3; isolation: isolate; }
.ck-plate img { position: absolute; display: block; }
.ck-plate .pl-bd { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-plate .pl-lead { left: 11%; top: 4%; width: 78%; height: 70%; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 42%, #000 52%, transparent 80%); mask-image: radial-gradient(ellipse 50% 52% at 50% 42%, #000 52%, transparent 80%); }
.ck-plate .pl-grey { position: absolute; inset: 0; background: #808080; mix-blend-mode: saturation; }
/* a flop's ghost goes red; warm tiers stay grey (a dim warm print reads brown) */
.ck-face.t-flop .ck-plate::after { content: ''; position: absolute; inset: 0; background: #ff5a6e; mix-blend-mode: color; opacity: .45; }
.ck-face.t-silver .ck-plate::after { content: ''; position: absolute; inset: 0; background: #c9d3e6; mix-blend-mode: color; }
/* nothing on the face makes a stacking context (no z-index), so the numeral band blends with the face itself */
.ck-fade { position: absolute; inset: 8px; pointer-events: none; background: linear-gradient(180deg, rgba(18,21,30,.35) 0%, rgba(18,21,30,0) 26%, rgba(18,21,30,0) 46%, rgba(18,21,30,.7) 64%, #12151e 90%); }
.ck-face > div { position: absolute; left: 40px; right: 40px; }
.ck-tier { top: 58px; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: rgb(var(--tc)); }
.ck-num { top: 110px; height: 360px; overflow: hidden; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 380px; line-height: 360px; letter-spacing: .02em; padding-left: .02em; font-variant-numeric: tabular-nums; }
.ck-num span { display: inline-block; color: rgb(var(--tc)); }
.ck-face.t-gold .ck-num span { background: linear-gradient(180deg, #fff6d6 12%, #f3dc95 46%, #e2bd62 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-face.t-silver .ck-num span { background: linear-gradient(180deg, #ffffff 12%, #e6e9f2 50%, #b9c1d2 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-face.t-legendary .ck-num span { color: #fff6dc; -webkit-text-stroke: 8px #d9b45a; paint-order: stroke fill; }
/* one band of light across the numerals; on a legendary it is foil (it tints the ivory as it passes) */
.ck-band { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none; transform: translateX(-130%) skewX(-16deg); mix-blend-mode: overlay; will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 50%, transparent); }
.ck-face.t-legendary .ck-band { width: 46%; mix-blend-mode: multiply; background: linear-gradient(90deg, rgba(255,255,255,0), #f3dc95 22%, #c9d3e6 44%, #f6c9d8 58%, #f3dc95 76%, rgba(255,255,255,0)); }
.ck-verdict { top: 492px; padding-top: 24px; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 58px; line-height: .98; color: #f4efe4; }
.ck-verdict::before { content: ''; position: absolute; top: 0; left: 50%; width: 84px; height: 3px; margin-left: -42px; background: rgb(var(--tc)); opacity: .6; }
.ck-line { top: 586px; font-family: var(--f-ui), sans-serif; font-size: 28px; font-weight: 600; line-height: 1.22; color: #a9adbd; max-width: 470px; margin: 0 auto; text-wrap: balance; }
.ck-legacy { top: 694px; font-family: var(--f-ui), sans-serif; font-size: 26px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f4efe4; }
.ck-legacy b { font-family: var(--f-d), sans-serif; font-weight: 800; color: rgb(var(--tc)); }
.ck-title { bottom: 44px; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 28px; letter-spacing: .16em; text-transform: uppercase; color: #c9ccd8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the charge strip under the card: four segments and the tier word */
.ck-charge { position: absolute; left: -10px; right: -10px; top: calc(100% + 30px); display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; pointer-events: none; }
.ck-ladder { display: flex; gap: 12px; }
.ck-ladder i { width: 140px; height: 14px; background: #1a1e2a; box-shadow: inset 0 0 0 2px #343a4f; transition: background .2s, box-shadow .2s; }
.ck-ladder i.on { box-shadow: none; }
.ck-ladder i.on.l-bronze { background: #ff7a3a; } .ck-ladder i.on.l-silver { background: #e6e9f2; }
.ck-ladder i.on.l-gold { background: #f3dc95; } .ck-ladder i.on.l-legendary { background: #fff6dc; box-shadow: inset 0 0 0 2px #d9b45a; }
.ck-tn { position: relative; width: 100%; height: 64px; overflow: hidden; }
.ck-tn .ck-tname { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 52px; line-height: 64px; letter-spacing: .12em; text-transform: uppercase; }
/* tremble before a big moment (the individual translate property: compositor only) */
.ck.trem-1 .ck-in { animation: ck-trem 120ms steps(2) infinite; --tr: 1.5px; }
.ck.trem-3 .ck-in { animation: ck-trem 80ms steps(2) infinite; --tr: 2.5px; }
@keyframes ck-trem { 0% { translate: var(--tr) calc(var(--tr) * -1); } 50% { translate: calc(var(--tr) * -1) var(--tr); } }
/* the restoration band drops across the top of the print */
.ck-rbn { position: absolute; left: -26px; right: -26px; top: 38px; height: 76px; z-index: 5; display: flex; align-items: center; justify-content: center; background: #f3dc95; box-shadow: 0 14px 34px rgba(0,0,0,.55); will-change: transform, opacity; }
.ck-rbn b { font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 36px; letter-spacing: .16em; padding-left: .16em; text-transform: uppercase; color: #10131c; white-space: nowrap; }
/* the hand-off: only the face travels */
.ck.flying .ck-charge, .ck.flying .ck-bloom, .ck.flying .ck-frame, .ck.flying .aw3-head-pl, .ck.flying .ck-rbn { display: none; }
.ck.flying .ck-back, .ck.flying .ck-face { box-shadow: none; }

/* ======================================================================================================
   Synopsis and reviews
   ====================================================================================================== */
.sy-title { font-size: 84px; line-height: .95; }
.sy-tag { font-family: var(--f-ui), sans-serif; font-style: normal; font-weight: 600; font-size: 28px; color: #d9b45a; margin: 14px 0 26px; }
.sy-text { font-family: var(--f-ui), sans-serif; font-weight: 500; font-size: 30px; line-height: 1.45; color: #c9ccd8; max-width: 980px; margin: 0; }
.sy-text .sy-cast { font-weight: 600; color: #f4efe4; }
/* one left-aligned column: the newest quote big at the top, earlier ones stepped down underneath */
.sh-right.rv3 { left: 820px; width: 1000px; justify-content: flex-start; padding-top: 6px; }
.rv3 .rv-head { font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 26px; letter-spacing: .2em; text-transform: uppercase; color: #d9b45a; margin: 0 0 24px; text-align: left; }
.rv-col { display: flex; flex-direction: column; gap: 30px; }
.rv-it { text-align: left; border: 0 !important; box-shadow: none !important; background: none !important; }
.rv-chip { display: inline-block; font-family: var(--f-ui), sans-serif; font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px 8px; background: #343a4f; color: #f4efe4; border-radius: 0; }
.rv-it.tone-rave .rv-chip { background: #f3dc95; color: #10131c; }
.rv-it.tone-positive .rv-chip { background: #f4efe4; color: #10131c; }
.rv-it.tone-pan .rv-chip { background: #ff5a6e; color: #10131c; }
.rv-it .rv-quote { margin: 18px 0 0; font-family: var(--f-d), sans-serif; font-weight: 700; font-size: 56px; line-height: 1.08; color: #f4efe4; text-wrap: balance; max-width: 980px; }
.rv-it.long .rv-quote { font-size: 48px; }
.rv-it .rv-src { display: block; margin-top: 16px; font-family: var(--f-ui), sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .18em; text-transform: uppercase; color: #a9adbd; }
.rv-it.small { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: baseline; opacity: .6; }
.rv-it.small .rv-chip { font-size: 18px; padding: 6px 10px 5px; }
.rv-it.small .rv-quote { margin: 0; font-weight: 600; font-size: 28px; line-height: 1.16; }
.rv-it.small .rv-src { grid-column: 2; margin-top: 6px; font-size: 18px; }

/* ======================================================================================================
   Meters: square, filled by scale (no width animation), hairlines at 2 px
   ====================================================================================================== */
.mt-label { font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 28px; letter-spacing: .2em; color: #d9b45a; margin-bottom: 8px; }
.mt-bar, .bo-bar { border-radius: 0; background: #12151e; box-shadow: inset 0 0 0 2px #343a4f; }
.mt-fill, .bo-fill { border-radius: 0; width: 100% !important; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.mt-fill::after, .bo-fill::after { display: none; }
.mt-bar i, .bo-bar i { width: 2px; }
.mt-bar span { font-family: var(--f-ui), sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a9adbd; }
.mt-num small, .au-num small { font-size: 30px; color: #a9adbd; }
.mt-num b.gilt { background: linear-gradient(180deg, #fffdf2 0%, #fff0b8 30%, #f4c95a 60%, #ffe7a0 82%, #fff6d6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 26px rgba(255,200,80,.4)); }
.mt-num b.rotten { color: #ff5a6e; text-shadow: 0 0 40px rgba(255,59,85,.35); }
.au-stars.shine s { background: linear-gradient(105deg, #f5c518 0%, #ffe58a 38%, #fffbe6 50%, #ffe58a 62%, #f5c518 100%); background-size: 320% 100%; animation: starshine 1.1s cubic-bezier(.45,0,.2,1) both; }
@keyframes starshine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.au-stars.shine i:nth-child(2) s { animation-delay: .06s; } .au-stars.shine i:nth-child(3) s { animation-delay: .12s; } .au-stars.shine i:nth-child(4) s { animation-delay: .18s; }
.au-stars.shine i:nth-child(5) s { animation-delay: .24s; } .au-stars.shine i:nth-child(6) s { animation-delay: .3s; } .au-stars.shine i:nth-child(7) s { animation-delay: .36s; }
.au-stars.shine i:nth-child(8) s { animation-delay: .42s; } .au-stars.shine i:nth-child(9) s { animation-delay: .48s; } .au-stars.shine i:nth-child(10) s { animation-delay: .54s; }
.au-stars.dull s { filter: saturate(.25) brightness(.7); transition: filter .6s; }
/* verdict badges: an accolade line, not a sticker */
.mt-badge { display: inline-flex !important; align-items: center; gap: 22px; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  font-family: var(--f-d, 'Barlow Condensed'), sans-serif; font-weight: 800; font-size: 40px; letter-spacing: .2em; text-transform: uppercase; line-height: 1; transform: none; }
.mt-badge::before, .mt-badge::after { content: ''; width: 64px; height: 2px; background: currentColor; opacity: .7; }
.mt-badge::before { margin-right: .2em; }
.mt-badge.gold { color: #f3d37a; background: linear-gradient(180deg, #fff6d6 0%, #f3dc95 50%, #e9c46a 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; }
.mt-badge.gold::before, .mt-badge.gold::after { background: #e9c46a; opacity: 1; }
.mt-badge.green { color: #f4efe4 !important; }
.mt-badge.amber { color: #c9ccd8 !important; }
.mt-badge.red { color: #ff5a6e !important; }

/* ======================================================================================================
   The box office: a split-flap board (eight flaps, 110 x 170, a 2 px hinge, 140 px ivory figures)
   ====================================================================================================== */
.fbo .bo-open { display: flex; align-items: baseline; gap: 18px; margin-top: 4px; min-height: 64px; }
.bo-open span { font-family: var(--f-ui), sans-serif; font-size: 26px; font-weight: 600; color: #a9adbd; }
.bo-open b { font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 56px; color: #f4efe4; display: inline-block; }
.fb-wrap { margin-top: 14px; }
.fb { display: flex; gap: 8px; }
.fb-f { position: relative; width: 110px; height: 170px; flex: none; perspective: 560px; }
.fb-h, .fb-l { position: absolute; left: 0; right: 0; height: 85px; overflow: hidden; }
.fb-h.t, .fb-l.t { top: 0; transform-origin: 50% 100%; background: linear-gradient(180deg, #181c27, #12151e); }
.fb-h.b, .fb-l.b { bottom: 0; transform-origin: 50% 0; background: linear-gradient(180deg, #0e1118, #12151e 40%); }
.fb-l { opacity: 0; z-index: 2; backface-visibility: hidden; will-change: transform, opacity; }
.fb-f b { position: absolute; left: 0; right: 0; height: 170px; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 140px; line-height: 170px; text-align: center; color: #f4efe4; white-space: pre; }
.fb-h.t b, .fb-l.t b { top: 0; }
.fb-h.b b, .fb-l.b b { top: -85px; }
.fb-f::after { content: ''; position: absolute; left: 0; right: 0; top: 84px; height: 2px; background: #05060a; z-index: 3; }
.fb.gold .fb-f b { color: #f3dc95; }
.fb.loss .fb-f b { color: #ff5a6e; }
.bo-ww { margin-top: 12px; font-family: var(--f-ui), sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .2em; text-transform: uppercase; color: #a9adbd; }
.fbo .bo-bar { margin-top: 30px; width: 936px; }
.bo-fill { background: linear-gradient(90deg, #6b7086, #c9ccd8 60%, #f4efe4); box-shadow: none; }
.bo-fill.profit { background: linear-gradient(90deg, #c9ccd8, #f3dc95 70%, #fff6dc); }
.bo-bar i.bud { background: #ff5a6e; } .bo-bar i.be { background: #f4efe4; } .bo-bar i.bil { background: #f3dc95; width: 3px; }
.bo-bar i em { top: 32px; font-family: var(--f-ui), sans-serif; font-style: normal; font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: .04em; color: #c9ccd8; }
.bo-bar i.up em { top: auto; bottom: 34px; }
.bo-bar i.up em br { display: none; }
.fbo .mt-badge { margin-top: 84px; }

/* TV: the overnights, drawn as a line against the renewal line */
.tvl-num { margin-top: 6px; display: flex; align-items: baseline; gap: 16px; }
.tvl-num b { font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 140px; line-height: .95; color: #f4efe4; font-variant-numeric: tabular-nums; }
.tvl-num small { font-family: var(--f-ui), sans-serif; font-weight: 600; font-size: 26px; color: #a9adbd; }
.tvl-chart { position: relative; width: 940px; height: 330px; margin-top: 18px; }
.tvl-chart > svg { position: absolute; left: 0; top: 0; }
.tvl-draw { position: absolute; left: 0; top: 0; width: 940px; height: 330px; overflow: hidden; will-change: transform; transform: translateX(-940px); }
.tvl-in { position: absolute; left: 0; top: 0; width: 940px; height: 330px; will-change: transform; transform: translateX(940px); }
.tvl-axis { stroke: #343a4f; stroke-width: 2; }
.tvl-renew { stroke: #f4efe4; stroke-width: 2; stroke-dasharray: 12 9; opacity: .75; }
.tvl-line { fill: none; stroke: #f3dc95; stroke-width: 5; stroke-linejoin: miter; }
.tvl-area { fill: rgba(243,220,149,.09); }
.tvl-pt { fill: #f3dc95; }
.tvl-head { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; background: #fff6dc; box-shadow: 0 0 24px rgba(255,246,220,.8); will-change: transform, opacity; opacity: 0; }
.tvl-num { opacity: 0; }
.tvl-rl { position: absolute; left: 40px; font-family: var(--f-ui), sans-serif; font-style: normal; font-weight: 700; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: #c9ccd8; }
.tvl-x span { position: absolute; top: 306px; transform: translateX(-50%); font-family: var(--f-ui), sans-serif; font-weight: 700; font-size: 18px; color: #a9adbd; }
.tvbo.loss .tvl-line { stroke: #ff5a6e; } .tvbo.loss .tvl-pt { fill: #ff5a6e; } .tvbo.loss .tvl-area { fill: rgba(255,90,110,.08); }
.tvbo .mt-badge { margin-top: 40px; }

/* ======================================================================================================
   The producer's brief: a rubber stamp (6 px border in its ink, -7 degrees)
   ====================================================================================================== */
.bf-banner { top: 40px; gap: 4px; max-width: 940px; width: max-content; }
.bf-banner span { font-family: var(--f-ui), sans-serif; font-size: 22px; letter-spacing: .2em; color: #d9b45a; }
.bf-banner b { white-space: normal; max-width: 940px; display: block; font-size: 48px; line-height: 1.02; text-wrap: balance; }
.bf-meant { display: block; opacity: 0; font-style: normal; margin-top: 8px; font-family: var(--f-ui), sans-serif; font-size: 24px; font-weight: 600; letter-spacing: .5px; color: #c9ccd8; }
.bf-meant strong { color: #f3dc95; font-weight: 800; }
.bf-stamp { position: static; display: inline-flex; align-items: baseline; gap: 14px; margin-top: 16px; padding: 8px 22px 5px; border: 6px solid currentColor; border-radius: 0; background: transparent !important; box-shadow: none !important;
  font-family: var(--f-d), sans-serif; font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; opacity: 0; }
.bf-stamp i { font-style: normal; color: inherit !important; }
.bf-stamp.ok { color: #f3dc95; }
.bf-stamp.miss { color: #ff5a6e; }

/* ======================================================================================================
   Ten years later
   ====================================================================================================== */
.vt-ten { position: absolute; left: 0; right: 0; top: 56px; z-index: 3; text-align: center; pointer-events: none; }
.vt-ten b { display: block; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 120px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #c9ccd8; white-space: nowrap; }
.vt-ten .vt-yr { display: block; margin-top: 12px; font-family: var(--f-d), sans-serif; font-weight: 700; font-size: 34px; letter-spacing: .24em; padding-left: .24em; color: #a9adbd; font-variant-numeric: tabular-nums; }
.vt-name { position: absolute; left: 0; right: 0; top: 60px; margin: 0 auto; max-width: 900px; transform: none; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; white-space: normal; }
.vt-name b { font-family: var(--f-d), sans-serif; font-weight: 900; font-size: 84px; line-height: 1; color: #f4efe4; text-shadow: none; white-space: nowrap; }
.vt-name span { margin-top: 10px; font-family: var(--f-ui), sans-serif; font-size: 28px; font-weight: 600; color: #c9ccd8; text-wrap: balance; }
.vt-name.down b { color: #ff5a6e; }
.vt-name.up b { background: linear-gradient(180deg, #fff6d6, #f3dc95 55%, #e9c46a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
/* the streaming row: forgotten films, a gap at x 960 for this one */
.tl-row { position: absolute; left: 0; right: 0; top: 340px; height: 380px; z-index: 1; will-change: transform, opacity; }
.tl-lab { position: absolute; left: 200px; top: 0; display: flex; align-items: baseline; gap: 18px; }
.tl-lab b { font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 34px; color: #f4efe4; }
.tl-lab span { font-family: var(--f-ui), sans-serif; font-weight: 600; font-size: 24px; color: #a9adbd; }
.tl-track { position: absolute; top: 70px; left: -20px; display: flex; gap: 20px; }
.tl-p { width: 200px; height: 300px; flex: none; background: #12151e; overflow: hidden; }
.tl-p img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .5; }
.tl-gap { background: transparent; box-shadow: inset 0 0 0 2px #343a4f; }

/* ======================================================================================================
   Awards: plaques around the poster (fixed slots), Best Picture across the poster's foot
   ====================================================================================================== */
.aw3 { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.aw3-head { position: absolute; left: 0; right: 0; top: 48px; text-align: center; }
.aw3-head span { display: inline-block; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 66px; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, #fffdf2 0%, #fff0b8 30%, #f4c95a 62%, #ffe7a0 84%, #fff6d6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aw3-head.raz span { background: linear-gradient(180deg, #ffd1e4, #ff4f9a 60%, #ff7db5); -webkit-background-clip: text; background-clip: text; }
.aw3-pl { position: absolute; width: 420px; height: 140px; display: flex; align-items: stretch; background: #12151e; overflow: hidden; will-change: transform, opacity; }
.aw3-fill { position: absolute; inset: 0; background: #f3dc95; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.aw3-pl.raz .aw3-fill { background: #ff4f9a; }
.aw3-face { position: relative; width: 140px; height: 140px; flex: none; }
div.aw3-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 64%, transparent 100%); mask-image: linear-gradient(90deg, #000 64%, transparent 100%); }
.aw3-t { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 22px 0 10px; }
.aw3-pl.noface .aw3-t { padding-left: 28px; }
.aw3-t span { font-family: var(--f-ui), sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: #a9adbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s .18s; }
.aw3-t b { margin-top: 6px; font-family: var(--f-d), sans-serif; font-weight: 800; font-size: 34px; line-height: 1.05; color: #f4efe4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s .18s; }
.aw3-pl.won .aw3-t span { color: #3a3f52; }
.aw3-pl.won .aw3-t b { color: #10131c; }
.aw3-pl.won div.aw3-face img { -webkit-mask-image: none; mask-image: none; }
/* Best Picture: the poster's own plaque, across its foot (card space) */
.aw3-head-pl { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: 128px; z-index: 6; background: rgba(18,21,30,.96); }
.aw3-head-pl .aw3-t { align-items: center; text-align: center; padding: 0 26px; }
.aw3-head-pl .aw3-t span { font-size: 24px; }
.aw3-head-pl .aw3-t b { font-size: 46px; max-width: 100%; }

/* ======================================================================================================
   Twitch chat beside the critics and the audience (js/chat.js). Same column, a neutral chip, the user in their colour.
   ====================================================================================================== */
.rv-it.tone-chat .rv-chip { background: transparent; color: #c9ccd8; box-shadow: inset 0 0 0 2px #343a4f; }
.rv-it .rv-src i { font-style: normal; letter-spacing: .06em; text-transform: none; margin-left: .5em; }
.rv-it .rv-src em { font-style: normal; color: #f4efe4; margin-left: .7em; }
.show .ffc-emo { height: 1.1em; width: auto; vertical-align: middle; display: inline-block; margin: -.1em .04em 0; }
/* five in the column: the earlier ones sit a little closer */
.rv-col:has(> .rv-it:nth-child(5)) { gap: 22px; }
.rv-it.big.tight .rv-quote { font-size: 52px; }
/* the audience panel: the chat line under the accolade */
.au .au-chat { margin-top: 40px; max-width: 980px; opacity: 1; }
.au .au-chat .rv-quote { font-size: 32px; }
.au .au-chat .rv-src { font-size: 20px; }
/* the invite: a lower third in the trades' language (dark type on a gold label, the line in quotes), under the card */
.chat-lt { position: absolute; left: 48px; bottom: 36px; z-index: 8; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 20px 14px 16px; background: rgba(0,0,0,.92); pointer-events: none; will-change: transform, opacity; }
.chat-lt .tk { font-family: var(--f-ui), sans-serif; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #0b0d14; background: #d9b45a; padding: 9px 12px 8px; }
.chat-lt .tx { font-family: var(--f-d), sans-serif; font-weight: 700; font-size: 34px; line-height: 1.05; color: #f4efe4; white-space: nowrap; }
/* an arrival with no photo: initials in type on the dark plate (matches the board's no-photo tile) */
.ar-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #12151e; }
.ar-none b { font-family: var(--f-d), 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 150px; line-height: 1; color: #2a2f44; text-transform: uppercase; letter-spacing: -.01em; }
/* poster breathing room: the tagline sits on its own line above the title (bottom-anchored, so a long one grows up,
   away from the title), and neither runs to the poster's edge */
.poster .ptag { top: auto; bottom: 344px; left: 60px; right: 60px; line-height: 1.25; text-wrap: balance; }
.poster .ptitle { left: 44px; right: 44px; }

/* ---- the trailer credits (v40): black, one name at a time, their photo in black and white, type in Archivo ---- */
.tc { position: absolute; inset: 0; background: #000; z-index: 20; overflow: hidden; }
/* "presents": 66 px (it was 30, about 15 px on a 720p stream), two balanced lines at most */
.tc-intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.tc-intro b { display: block; max-width: 1640px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 66px; line-height: 1.2; letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; color: #ecebe6; text-wrap: balance; opacity: 0; }
/* the cuts are hard: a card is on or it is not (no fade through black) */
.tc-card { position: absolute; inset: 0; opacity: 0; }
.tc-card.on { opacity: 1; }
/* a two-frame flash on each cut, 30% white over the whole frame */
.tc-flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
/* the photo at 620 x 860 (was 460 x 640). Its right edge never passes x 1440: the webcam owns x >= 1440, y <= 300 */
.tc-ph { position: absolute; top: 110px; width: 620px; height: 860px; overflow: hidden; background: #0b0b0d; }
.tc-card.l .tc-ph { left: 240px; }
.tc-card.r .tc-ph { left: 820px; }
.tc-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; filter: grayscale(1) contrast(1.18) brightness(.96); transform-origin: 50% 35%; }
.tc-ph .ar-none { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 75%; font-size: 200px; color: #2a2a2e; }
.tc-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.55)); pointer-events: none; }
.tc-tx { position: absolute; top: 0; bottom: 0; width: 820px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.tc-card.l .tc-tx { left: 930px; width: 830px; }
.tc-card.r .tc-tx { left: 90px; width: 680px; align-items: flex-end; text-align: right; }
.tc-tx i { font-style: normal; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: .42em; text-transform: uppercase; color: var(--tc-acc, #d9b45a); }
.tc-card.r .tc-tx i { margin-right: -.42em; }
.tc-tx b { display: block; width: 100%; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 78%; font-size: 132px; line-height: .9; text-transform: uppercase; color: #f4f1ea; text-wrap: balance; transform-origin: 0 50%; }
.tc-card.r .tc-tx b { transform-origin: 100% 50%; }
/* a name with no photo gets the frame to itself, centred */
.tc-card.solo .tc-tx { left: 260px; width: 1400px; align-items: center; text-align: center; }
.tc-tx b { will-change: transform; }
/* two names on one card (co-star and supporting): the portraits side by side, each name under its photo. The pair spans
   x 500 to 1440, so the right photo stops at the webcam's edge */
.tc-card.duo .tc-fig { position: absolute; top: 96px; width: 440px; }
.tc-card.duo .tc-fig.a { left: 500px; }
.tc-card.duo .tc-fig.b { left: 1000px; }
.tc-card.duo .tc-ph { position: relative; top: auto; left: auto; width: 440px; height: 600px; }
.tc-card.duo .tc-tx { position: relative; top: auto; bottom: auto; left: auto; width: 440px; margin-top: 30px; gap: 12px; align-items: flex-start; text-align: left; }
.tc-card.duo .tc-tx b { transform-origin: 0 50%; }
.tc-card.solo .tc-tx i { margin-right: -.42em; }
.tc-card.solo .tc-tx b { transform-origin: 50% 50%; }
/* the writers' wait sits over the trailer's black (it used to wait unseen behind it) */
.tc ~ .ww-wrap { z-index: 25; }
/* the TV lower third stacks (premiere over the slot) so it clears the poster at the reveal */
.lt3 .lt-row { flex-direction: column; align-items: flex-start; }
/* numbers that arrive late keep their room from the start: the panel never jumps when they land */
.mt-badge { min-height: 40px; }
.tvl-num { min-height: 133px; }
.bo-open b { display: inline-block; min-height: 1em; }
.ck-flash { position: absolute; inset: 0; background: #fff; mix-blend-mode: screen; opacity: 0; pointer-events: none; z-index: 9; }
/* the arrow nudges twice when the cue appears, then rests (an endless nudge kept the page repainting through every pause) */
.sh-hint svg { animation: hintnudge 1.4s ease-in-out 2; }
/* older reviews: one chip column, so every quote starts on the same line */
.rv-it.small { grid-template-columns: 128px minmax(0, 1fr); }
.rv-it.small .rv-chip { justify-self: start; }

/* ======================================================================================================
   Stream-review pass: the verdict, the ladder, the floor light
   ====================================================================================================== */
/* the charge strip keeps its pips; the tier word under the card named the verdict before the flip */
.ck-tn { display: none; }
/* the floor: a cool pool or nothing. A gold glow under the navy sampled brown (55,49,40) on stream */
.sh-bg { background: radial-gradient(900px 520px at 50% 108%, rgba(150,170,230,.07), transparent 70%), radial-gradient(1200px 760px at 50% 42%, #151829 0%, #08090f 58%, #020204 100%); }
/* the face during the roll: steel rim, ivory reels; the tier colour, the tier word and the verdict arrive on the lock */
.ck-rim0 { position: absolute; inset: 0; z-index: 4; border: 6px solid #4a5068; box-shadow: inset 0 0 0 2px #05060a; pointer-events: none; }
.ck-rim { will-change: opacity; }
.ck.veiled .ck-rim, .ck.veiled .ck-tier, .ck.veiled .ck-verdict, .ck.veiled .ck-line, .ck.veiled .ck-legacy, .ck.veiled .ck-num > span { opacity: 0; }
/* the ghost's tier tint (a flop's red, a hit's steel blue) waits for the lock as well: a red face during the roll told the result */
.ck.veiled .ck-face .ck-plate::after { opacity: 0 !important; }
.ck-num > span { will-change: opacity; }
.ck-reels { position: absolute; left: 0; right: 0; top: 0; height: 360px; display: flex; justify-content: center; padding-left: .02em; pointer-events: none; font-style: normal; }
.ck-reels i { font-style: normal; }
.ck-reels .rl { display: block; height: 360px; }
.ck-reels .rs { display: block; will-change: transform; }
.ck-reels b { display: block; height: 360px; font-weight: 800; color: #f4efe4; }
/* awards: every plaque says how it went */
.aw3-res { position: absolute; right: 10px; top: 10px; z-index: 3; padding: 3px 8px 2px; font: 800 13px/1 var(--f-d, 'Barlow Condensed'), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #a9adbd; border: 1px solid #3a4058; background: rgba(10,12,18,.85); }
.aw3-res.w { color: #10131c; background: #f1d47e; border-color: #f1d47e; }
/* mouse players: the "Space to continue" box is a button too, and a click anywhere on the stage answers it */
.gating, .gating .sh-hint { cursor: pointer; }
.sh-hint .sh-or { font-family: var(--f-ui, 'Barlow'), sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #c9ccd8; }