/* Twilight Zone — theme tokens for body.twilight-zone, kept in its own file so the shared
   theme sheet is untouched. Same WCAG targets as guide-themes.css:
     text 4.5:1 on --bg and --paper; --line-ui 3:1 on --paper; --accent-ink 4.5:1 as text.
   Ground: the table's midnight blue. Accent: the playfield's red. Accent-ink: the clock-face
   gold. Bone: the pale blue of the door and the Powerball glow.
   Measured: ink/bg 15.8, ink/paper 14.3, muted/bg 8.4, muted/paper 7.6,
   accent-ink/bg 11.6, accent-ink/paper 10.5, line-ui/paper 4.0, white/accent 6.6. */
body.twilight-zone{--bg:#070a16;--paper:#10162a;--ink:#e8e6dc;--muted:#a3a8bd;--line:#232b48;--line-ui:#6a75a6;--accent:#b3232a;--accent-ink:#e9c257;--bone:#7fb2d6}

/* Twilight composition: television tableau, mechanical side spread, dimensional finale. */
body.twilight-zone{--tz-gutter:max(40px,calc((100vw - 1240px)/2 + 40px))}
body.twilight-zone .opening.cinematic{overflow:visible}
body.twilight-zone .opening.cinematic .art{width:100%;max-width:none;height:clamp(430px,67vh,710px);max-height:none;object-fit:cover;margin:0;-webkit-mask-image:linear-gradient(#000 44%,transparent 93%);mask-image:linear-gradient(#000 44%,transparent 93%)}
body.twilight-zone .opening.cinematic .intro{position:relative;margin-top:-118px;padding-top:0}
body.twilight-zone .field-graphic--first-ball{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);width:100vw;max-width:none;margin:52px 0 62px calc(50% - 50vw);border:0;border-radius:0;background:none;align-items:stretch}
body.twilight-zone .field-graphic--first-ball img{width:100%;height:clamp(430px,70vh,740px);object-fit:cover;object-position:50% 48%}
body.twilight-zone .field-graphic--first-ball figcaption{display:flex;flex-direction:column;justify-content:center;padding:44px var(--tz-gutter) 44px 54px;font-size:17px}
body.twilight-zone .field-graphic--multiball{position:relative;width:100%;max-width:none;margin:92px 0 46px;border:0;background:none;overflow:visible}
body.twilight-zone .field-graphic--multiball img{width:100%;height:auto;border-radius:8px}
body.twilight-zone .field-graphic--multiball figcaption{position:relative;width:min(600px,calc(100% - 30px));margin:-82px 18px 0 auto;padding:28px 34px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:16px}
body.twilight-zone .field-graphic--lost-in-the-zone{position:relative;width:100vw;max-width:none;margin:104px 0 64px calc(50% - 50vw);border:0;border-radius:0;background:none;overflow:hidden}
body.twilight-zone .field-graphic--lost-in-the-zone img{width:100%;height:clamp(440px,72vh,760px);object-fit:cover;object-position:50% 46%}
body.twilight-zone .field-graphic--lost-in-the-zone figcaption{position:absolute;inset:auto 0 0 auto;width:min(49%,650px);padding:92px var(--tz-gutter) 42px 150px;background:linear-gradient(90deg,transparent,rgba(7,10,22,.97) 34%);font-size:17px}
@media(max-width:900px){body.twilight-zone .opening.cinematic .art{height:clamp(360px,58vh,490px)}body.twilight-zone .opening.cinematic .intro{margin-top:-88px}body.twilight-zone .field-graphic--first-ball{grid-template-columns:1fr}body.twilight-zone .field-graphic--first-ball img{height:clamp(300px,62vw,470px)}body.twilight-zone .field-graphic--first-ball figcaption{padding:24px var(--tz-gutter) 0}body.twilight-zone .field-graphic--lost-in-the-zone img{height:clamp(300px,62vw,470px)}body.twilight-zone .field-graphic--lost-in-the-zone figcaption{position:static;width:auto;padding:24px var(--tz-gutter) 0;background:none}}