/* Smaw_D Night-Ops: base (tokens, reset, hardware panels, hero console). The campaign skin lives in sections.css after the section rules. No build step. */

/* ===== variant tokens (RG orange #ED4D21 kept only as a tiny accent) ===== */
:root{--inf:#5B7F95;--inf-hi:#8CC8F0;--inf-vivid:#5BB4F0;--inf-deep:#1E3A52;--smaw-orange:#ED4D21;--fd:'Big Shoulders Display',Impact,sans-serif;--fs:'Big Shoulders Stencil Display',Impact,sans-serif;--fm:'IBM Plex Mono',ui-monospace,monospace;--fb:'IBM Plex Sans',system-ui,sans-serif}


/* Night-Ops tokens: deep charcoal + electric green/cyan. RG orange #ED4D21 = tiny accent only. */
:root{--bg:#03060a;--bg2:#060d14;--c1:#00D8FF;--c2:#5BB4F0;--deep:#001222;--scr:#05090e;--scr2:#08111a;--ph:#8CC8F0;--ph2:#A9C7DA;--txt:#EEF6FC;--line:rgba(91,160,210,.26);--line2:rgba(170,210,240,.12);--etch:#C4DAEA;--cta1:#8FCBF5;--cta2:#4F8DB8;--ctaTxt:#03111c;--led:#5BB4F0;--glowc:transparent;--yt:#E0352B;
 --emg:linear-gradient(180deg,#CDE8FF 0%,#5BB4F0 45%,#3D86C6 100%);--thumb:grayscale(1) sepia(.65) hue-rotate(170deg) saturate(1.7) contrast(1.18) brightness(.95);--bgf:grayscale(1) brightness(.4) contrast(1.3);--scan:0;--plate:#0d1620}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--txt);font-family:var(--fb);overflow-x:hidden;background:var(--bg);
 background-image:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg) 70%),url(../assets/img/grain.webp);background-blend-mode:normal,soft-light}
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:80;background:url(../assets/img/grain.webp);opacity:.05;mix-blend-mode:overlay}
a{color:inherit}img{max-width:100%;height:auto;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px}
:focus-visible{outline:2px solid var(--ph);outline-offset:3px}
/* ===== hardware: bezel unit + glass screen ===== */
.unit{position:relative;border-radius:7px;padding:26px 12px 12px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.55),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.35),0 1px 0 rgba(0,0,0,.8),0 10px 18px -6px rgba(0,0,0,.6),0 28px 50px -18px rgba(0,0,0,.7)}
.unit>.lbl{position:absolute;top:7px;left:30px;right:30px;display:flex;justify-content:space-between;gap:10px;font:600 10.5px/12px var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--etch);text-shadow:0 -1px 0 rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.08);opacity:1;white-space:nowrap;overflow:hidden}
.unit>.lbl span:last-child{opacity:.7}
.scr{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9cdd1,#7d8287 45%,#3b3e41 75%);box-shadow:0 1px 1px rgba(0,0,0,.7),inset 0 0 0 .5px rgba(0,0,0,.6)}
.scr:after{content:'';position:absolute;left:1px;right:1px;top:4px;height:1.4px;background:rgba(20,20,20,.75);transform:rotate(var(--r,35deg))}
.scr.tl{top:8px;left:9px}.scr.tr{top:8px;right:9px}.scr.bl{bottom:6px;left:9px}.scr.br{bottom:6px;right:9px}
.glass{position:relative;border-radius:4px;padding:16px 16px 18px;overflow:hidden;
 background:radial-gradient(130% 100% at 30% 0%,var(--scr2),var(--scr) 70%);
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),inset 0 2px 10px rgba(0,0,0,.9),inset 0 0 40px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.10)}
.glass:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,rgba(0,0,0,var(--scan)) 0 1px,transparent 1px 3px)}
.glass:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;
 background:linear-gradient(118deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 33%,transparent 37%),linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%)}
.glass>*{position:relative;z-index:2}
.ph,.phc{color:var(--ph);text-shadow:0 0 8px var(--glowc)}
.k{font:500 10.5px var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--ph2)}
/* ===== HUD ===== */
.hud{position:relative;min-height:max(100svh,820px);display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);padding:12px 16px;gap:12px}
.bar{display:flex;align-items:center;gap:22px;padding:10px 18px 10px 40px;border-radius:6px;font:500 11px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--etch)}
.bar.unit{padding-top:10px}
.bar b{color:#fff;font-weight:600}.bar b{color:var(--ph)}
.bar .em{width:28px;filter:grayscale(.3)}
.bar .sp{flex:1}.bar nav{display:flex;gap:4px}
.bar nav a{text-decoration:none;padding:7px 10px;border-radius:3px;color:var(--etch);text-shadow:0 -1px 0 #000}
.bar nav a:hover{background:rgba(0,0,0,.3);color:var(--ph)}
.grid{display:grid;grid-template-columns:minmax(320px,24%) 1fr minmax(300px,23%);gap:12px;min-height:0}
.col{min-width:0;display:flex;flex-direction:column;gap:12px;min-height:0}
.col>.unit:last-child{flex:1}
.col>.unit>.glass{height:100%}
.brief .wmh{width:100%;max-width:280px;margin:2px 0 14px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
h1{font-family:var(--fd);font-weight:800;font-size:clamp(40px,3.3vw,56px);line-height:.9;letter-spacing:.01em;margin:0 0 14px;text-transform:uppercase;color:var(--txt)}
h1 em{font-style:normal;color:var(--ph);text-shadow:0 0 10px var(--glowc)}
.term{font:400 12.5px/1.7 var(--fm);color:var(--ph2);margin:0}.term b{color:var(--ph);font-weight:600}.term i{font-style:normal;color:var(--ph)}
.cur{display:inline-block;width:.55em;height:1.05em;background:var(--ph);vertical-align:-.15em;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.op .tt{font:800 32px/.95 var(--fd);margin:0 0 6px;text-transform:uppercase;letter-spacing:.01em}
.op .when{font:12px var(--fm);color:var(--ph2)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.cd div{border-radius:3px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05);padding:8px 4px 6px;text-align:center}
.cd b{display:block;font:600 30px/1 var(--fm);color:var(--ph);text-shadow:0 0 8px var(--glowc);font-variant-numeric:tabular-nums}
.cd small{font:500 9.5px var(--fm);letter-spacing:.18em;color:var(--ph2)}
.mini{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mini .n{font:800 28px/1 var(--fd);text-transform:uppercase}
.code{font:600 13px var(--fm);letter-spacing:.14em;color:var(--ctaTxt);text-decoration:none;padding:7px 10px;border-radius:3px;background:linear-gradient(180deg,var(--cta1),var(--cta2));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.6)}
/* center feed */
.center{min-width:0;display:flex;flex-direction:column;gap:12px;min-height:0}
.center .feedu{flex:1;display:flex;min-height:420px}
.feed{position:relative;flex:1;border-radius:4px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.1)}
.shot{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.shot.on{opacity:1}
.shot .kb{position:absolute;inset:-2%;animation:kb 16s ease-in-out infinite alternate}
.shot:nth-child(2) .kb{animation-name:kb2}.shot:nth-child(3) .kb{animation-name:kb3}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.13) translate(-1.5%,1.5%)}}
@keyframes kb2{from{transform:scale(1.12) translate(1.5%,0)}to{transform:scale(1.03) translate(-1%,1%)}}
@keyframes kb3{from{transform:scale(1.04) translate(-1%,-1%)}to{transform:scale(1.14) translate(1%,1.5%)}}
.kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:var(--grade)}
.kb img.soft{filter:var(--grade) brightness(.62)}
.kb img.sharp{filter:var(--grade) drop-shadow(0 0 30px rgba(0,0,0,.5))}
.feed .tint{position:absolute;inset:0;background:var(--tint);opacity:var(--tintop);mix-blend-mode:color;pointer-events:none}
.feed .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.9))}
.feed .grn{position:absolute;inset:-50px;background:url(../assets/img/grain.webp);opacity:.22;mix-blend-mode:overlay;pointer-events:none;animation:grn 1s steps(2) infinite}
@keyframes grn{0%{transform:translate(0,0)}50%{transform:translate(-37px,23px)}100%{transform:translate(19px,-41px)}} /* 2 steps/s */
.feed .lines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,var(--scan)) 0 1px,transparent 1px 3px)}
.osd{position:absolute;inset:0;pointer-events:none;font:500 12px var(--fm);letter-spacing:.12em;color:rgba(255,255,255,.88);text-shadow:0 1px 2px rgba(0,0,0,.9)}
.osd .c{position:absolute;width:26px;height:26px;border:solid rgba(255,255,255,.7);opacity:.75}
.osd .c1{top:16px;left:16px;border-width:1.5px 0 0 1.5px}.osd .c2{top:16px;right:16px;border-width:1.5px 1.5px 0 0}.osd .c3{bottom:16px;left:16px;border-width:0 0 1.5px 1.5px}.osd .c4{bottom:16px;right:16px;border-width:0 1.5px 1.5px 0}
.osd .tl{position:absolute;top:24px;left:52px}.osd .tr{position:absolute;top:24px;right:52px;text-align:right}
.osd .rec:before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:#d8382a;margin-right:8px;vertical-align:0;box-shadow:0 0 4px rgba(216,56,42,.8);animation:rec 2s ease-in-out infinite}
@keyframes rec{0%,55%{opacity:1}70%,100%{opacity:.2}} /* 0.5 Hz soft fade */
.osd .ctr{position:absolute;left:50%;top:44%;width:34px;height:34px;transform:translate(-50%,-50%);opacity:.35}
.osd .ctr:before,.osd .ctr:after{content:'';position:absolute;background:#fff}.osd .ctr:before{left:50%;top:0;bottom:0;width:1px}.osd .ctr:after{top:50%;left:0;right:0;height:1px}
.osd .bat{display:inline-block;width:22px;height:10px;border:1px solid currentColor;margin-left:10px;vertical-align:-1px;position:relative;padding:1px}.osd .bat i{display:block;height:100%;width:70%;background:currentColor}
.l3rd{position:absolute;left:24px;right:24px;bottom:24px;pointer-events:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.l3rd .pr{max-width:560px}
.l3rd .tag{display:inline-block;font:600 10.5px var(--fm);letter-spacing:.2em;text-transform:uppercase;background:rgba(0,0,0,.6);color:var(--ph);padding:5px 8px;border-left:2px solid var(--smaw-orange);margin-bottom:8px}
.l3rd p{margin:0;font:800 clamp(28px,2.6vw,42px)/.95 var(--fd);text-transform:uppercase;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.l3rd .meta{white-space:nowrap;font:500 11px/1.7 var(--fm);letter-spacing:.12em;text-transform:uppercase;text-align:right;color:rgba(255,255,255,.85);text-shadow:0 1px 2px #000}
/* big CTAs */
.ctau .glass{padding:14px}
.ctas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:0 20px;border-radius:5px;text-decoration:none;font:800 clamp(22px,1.9vw,30px)/1 var(--fd);letter-spacing:.04em;text-transform:uppercase;transition:transform .12s,box-shadow .12s,filter .2s}
.cta small{display:block;font:500 10px var(--fm);letter-spacing:.2em;margin-bottom:5px;opacity:.85}
.cta .ar{font:600 20px var(--fm)}
.cta.tw{color:var(--ctaTxt);background:linear-gradient(180deg,var(--cta1),var(--cta2));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.25),0 3px 0 rgba(0,0,0,.65),0 10px 22px -8px rgba(0,0,0,.8)}
.cta.kk{color:var(--ph);background:linear-gradient(180deg,#3d4043,#26282b);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(0,0,0,.6),0 3px 0 rgba(0,0,0,.7),0 10px 22px -8px rgba(0,0,0,.8)}
.cta.yt{color:var(--txt);background:linear-gradient(180deg,#3a3c3f,#232527);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(0,0,0,.6),inset 0 -3px 0 var(--yt),0 3px 0 rgba(0,0,0,.7),0 10px 22px -8px rgba(0,0,0,.8)}
.ytb{flex:none;position:relative;width:30px;height:21px;border-radius:5px;background:linear-gradient(180deg,var(--yt),color-mix(in srgb,var(--yt) 70%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.7)}
.ytb:after{content:'';position:absolute;left:12px;top:6px;border:4.5px solid transparent;border-left:7px solid #f4f1ea;border-right:0}
.mbar .ytb{width:24px;height:17px}.mbar .ytb:after{left:9px;top:4.5px;border-width:4px 0 4px 6px}
.ctas.three{grid-template-columns:1fr 1fr 1fr}.ctas.three .cta{font-size:clamp(24px,2.1vw,32px);padding:0 18px;min-width:0}
.led.vod:before{background:radial-gradient(circle at 35% 30%,#ff8c80,var(--yt) 60%)}
.ctog{display:flex;gap:6px}.ctog button{font:600 12px var(--fm);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border:0;border-radius:3px;cursor:pointer;color:var(--ph2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2)}
.ctog button[aria-pressed=true]{color:var(--ctaTxt);background:linear-gradient(180deg,var(--cta1),var(--cta2))}
.ctog button[data-c=yt][aria-pressed=true]{color:#fff;background:#B8241B}
.clip .src{position:absolute;z-index:2;left:10px;top:10px;font:600 10px var(--fm);letter-spacing:.16em;text-transform:uppercase;padding:3px 7px;border-radius:2px;background:rgba(0,0,0,.75);color:#fff}
.clip .src.y{background:#B8241B}
.tabs button[data-k=youtube][aria-selected=true]{color:#fff;background:#B8241B}
.cta:hover{filter:brightness(1.08)}.cta:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(0,0,0,.7)}
.cta .dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.7);flex:none}
.cta.kk .dot{background:#1a1b1c}
.live .cta.tw .dot,.cta .dot.on{background:#e23b2b;box-shadow:0 0 0 0 rgba(226,59,43,.6);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,59,43,.65)}100%{box-shadow:0 0 0 12px rgba(226,59,43,0)}}
.cta .lab{display:flex;align-items:center;gap:12px}
.air{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;font:500 12px var(--fm);letter-spacing:.06em;color:var(--ph2)}
.air b{color:var(--ph);font-weight:600}
.air .st{font:600 10.5px var(--fm);letter-spacing:.2em;padding:4px 8px;border-radius:2px;background:rgba(0,0,0,.5);color:var(--ph2);box-shadow:inset 0 0 0 1px var(--line2)}
.live .air .st{color:#fff;background:#b8291d}
.air a{color:var(--ph);text-underline-offset:3px}
.air .sp{flex:1}
/* right col */
.stl{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line2)}
.stl .n{font:800 24px var(--fd);text-transform:uppercase;letter-spacing:.03em}
.led{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--ph2)}
.led:before{content:'';width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#1c1c1c);box-shadow:inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.1)}
.led.on{color:#ffd9d4}.led.on:before{background:radial-gradient(circle at 35% 30%,#ff9b8f,#d1301f 60%);animation:pulse 1.6s ease-out infinite}
.btns{display:grid;gap:8px;margin-top:14px}
.btn{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--fm);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 14px;border-radius:4px;color:var(--txt);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.06);transition:background .2s}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.p{color:var(--ctaTxt);background:linear-gradient(180deg,var(--cta1),var(--cta2));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.6)}
.disp .q{font:800 23px/1.02 var(--fd);text-transform:uppercase;color:var(--txt);margin:0 0 10px}
.disp p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ph2)}.disp p b{color:var(--txt);font-weight:500}
.meter{height:12px;border-radius:2px;margin:14px 0 6px;position:relative;background:rgba(0,0,0,.5);box-shadow:inset 0 1px 3px rgba(0,0,0,.9);overflow:hidden}
.meter:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.55) 9px 11px)}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(180deg,var(--cta1),var(--cta2))}
.note{font:11px/1.5 var(--fm);color:var(--ph2);letter-spacing:.04em}
/* ticker */
.tick{border-radius:6px;padding:8px 12px}
.tick.unit{padding:8px 34px}
.tick .glass{overflow:hidden;padding:9px 0;white-space:nowrap;font:500 12px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--ph2)}
.tick .tr{display:inline-block;animation:tk 70s linear infinite}.tick span{margin:0 26px}.tick span b{color:var(--ph);font-weight:600}
@keyframes tk{to{transform:translateX(-50%)}}
/* pause CSS animations offscreen (IntersectionObserver adds .off) and when the tab is hidden */
.off,.off *,.tab-hidden *{animation-play-state:paused!important}