/* Total Nuclear Annihilation — reactor-room black with control-panel green, warning magenta as the accent.
   Same token set as guide-themes.css. Contrast solved to WCAG AA: ink/bg 15.4:1, muted/bg 7.2:1,
   accent-ink/bg 7.0:1, line-ui/bg 3.8:1, white on accent 5.4:1, bone/bg 10.9:1. */
body.tna{--bg:#07100c;--paper:#0f1a14;--ink:#dfe8dd;--muted:#8fa393;--line:#1e2f26;--line-ui:#3f7a5a;--accent:#c9177a;--accent-ink:#ff5fb8;--bone:#a4d24a}

/* The opening has no hero art yet: a nine-light reactor bar stands in for it (eight destroyed, one live). */
body.tna.guide-v3 .opening.cinematic .intro{padding-top:96px}
body.tna.guide-v3 .opening.cinematic .intro::before{content:'';display:block;width:min(396px,86%);height:14px;margin:0 auto 34px;
  background:
    linear-gradient(var(--bone),var(--bone)) 100% 0/calc(100%/9*.77) 100% no-repeat,
    repeating-linear-gradient(90deg,var(--accent) 0 calc(100%/9*.77),transparent calc(100%/9*.77) calc(100%/9)) 0 0/calc(100%/9*8) 100% no-repeat;
  animation:tna-live 1.1s steps(1,end) infinite}
@keyframes tna-live{50%{background-size:0 0,calc(100%/9*8) 100%}}
@media (prefers-reduced-motion:reduce){body.tna.guide-v3 .opening.cinematic .intro::before{animation:none}}

/* The two reactor tables are three and four short columns, so they fit a phone without the library's sideways scroll. */
body.tna.guide-v3 .strategy-table table{min-width:0!important;table-layout:fixed!important}
body.tna.guide-v3 .strategy-table td:nth-child(2){min-width:0}
body.tna.guide-v3 .strategy-table td:first-child{font-weight:700;color:var(--bone)}
@media (max-width:600px){
  body.tna.guide-v3 .strategy-table th{letter-spacing:.5px;font-size:11px;padding-right:10px;hyphens:none;overflow-wrap:normal}
  body.tna.guide-v3 .strategy-table td{padding-right:10px}
}
body.tna.guide-v3 .shot strong{color:var(--accent-ink)}

/* Reactor composition: launch corridor, core schematic tableau, red-alert multiball. */
body.tna{--tna-gutter:max(40px,calc((100vw - 1240px)/2 + 40px))}
body.tna .opening.cinematic{overflow:visible}
body.tna .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.tna .opening.cinematic .intro{position:relative;margin-top:-118px;padding-top:0}
body.tna .field-graphic--first-ball-route{position:relative;width:100vw;max-width:none;margin:50px 0 60px calc(50% - 50vw);border:0;border-radius:0;background:none;overflow:hidden}
body.tna .field-graphic--first-ball-route img{width:100%;height:clamp(430px,70vh,740px);object-fit:cover;object-position:50% 50%}
body.tna .field-graphic--first-ball-route figcaption{position:absolute;inset:auto auto 0 0;width:min(49%,650px);padding:90px 150px 42px var(--tna-gutter);background:linear-gradient(90deg,rgba(5,7,12,.97) 0%,rgba(5,7,12,.9) 68%,transparent);font-size:17px}
body.tna .field-graphic--main-progression{position:relative;width:100%;max-width:none;margin:94px 0 52px;border:0;background:none;overflow:visible}
body.tna .field-graphic--main-progression img{width:100%;height:auto;border-radius:8px}
body.tna .field-graphic--main-progression figcaption{position:relative;width:min(620px,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.tna .field-graphic--multiball-flow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);width:100vw;max-width:none;margin:100px 0 62px calc(50% - 50vw);border:0;border-radius:0;background:none;align-items:stretch}
body.tna .field-graphic--multiball-flow img{grid-column:2;grid-row:1;width:100%;height:clamp(430px,70vh,740px);object-fit:cover;object-position:50% 48%}
body.tna .field-graphic--multiball-flow figcaption{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:44px 54px 44px var(--tna-gutter);font-size:17px}
@media(max-width:900px){body.tna .opening.cinematic .art{height:clamp(360px,58vh,490px)}body.tna .opening.cinematic .intro{margin-top:-88px}body.tna .field-graphic--first-ball-route img{height:clamp(300px,62vw,470px)}body.tna .field-graphic--first-ball-route figcaption{position:static;width:auto;padding:24px var(--tna-gutter) 0;background:none}body.tna .field-graphic--multiball-flow{grid-template-columns:1fr}body.tna .field-graphic--multiball-flow img{grid-column:1;grid-row:1;height:clamp(300px,62vw,470px)}body.tna .field-graphic--multiball-flow figcaption{grid-column:1;grid-row:2;padding:24px var(--tna-gutter) 0}}