:root{
  --gunmetal:#12161b; --steel:#222a33; --plate:#2f3944; --slate:#6b8196;
  --cyan:#6fe6ff; --amber:#ffb340; --text:#d8e2ea; --dim:#8da0b0;
  --cut:14px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--gunmetal);color:var(--text);font:500 1.125rem/1.6 'Rajdhani',sans-serif;
  background-image:linear-gradient(rgba(111,230,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(111,230,255,.035) 1px,transparent 1px);
  background-size:48px 48px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.12) 2px 3px)}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3{font-family:'Orbitron',sans-serif;line-height:1.15}

.bar{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:.7rem 1.5rem;background:rgba(18,22,27,.94);border-bottom:2px solid var(--plate);
  box-shadow:0 1px 0 var(--cyan)}
.brand{font:700 1.1rem 'Orbitron',sans-serif;color:var(--text);text-decoration:none;letter-spacing:.12em}
nav{display:flex;gap:1.4rem;align-items:center}
nav a{color:var(--dim);text-decoration:none;font-weight:600;letter-spacing:.06em}
nav a:hover{color:var(--cyan)}
.cta-nav{color:var(--gunmetal);background:var(--cyan);padding:.1rem .9rem;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.cta-nav:hover{color:var(--gunmetal);background:var(--amber)}
.menu{display:none;background:none;border:1px solid var(--slate);color:var(--text);padding:.3rem .8rem;font:inherit}

.hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;overflow:hidden;padding:4rem 1.5rem 1rem}
.ring{display:block;position:relative;width:min(86vw,500px);height:auto;margin:3.5rem auto 0;opacity:0}
.ready .ring{opacity:1;transition:opacity 1.2s ease 1s}
.ring text{font:600 11px 'Orbitron',sans-serif;letter-spacing:.2em}
.ring .spin{transform-origin:200px 200px;animation:spin 120s linear infinite}
.hero-inner{position:relative;max-width:760px}
.boot{font-family:'Rajdhani',sans-serif;color:var(--amber);min-height:1.6em;letter-spacing:.08em;margin-bottom:1rem}
h1{font-size:clamp(2.6rem,9vw,5.6rem);font-weight:900;letter-spacing:.04em;
  text-shadow:0 0 24px rgba(111,230,255,.45);opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s}
.ready h1,.ready .tagline,.ready .actions{opacity:1;transform:none}
.tagline,.hero .actions{opacity:0;transition:opacity .8s .4s}
.tagline{margin:.8rem 0 1.6rem;max-width:34ch;font-size:1.35rem;color:var(--dim)}

.btn{display:inline-block;padding:.6rem 1.5rem;margin:0 .6rem .6rem 0;background:var(--cyan);color:var(--gunmetal);
  font:700 .9rem 'Orbitron',sans-serif;letter-spacing:.08em;text-decoration:none;
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);transition:background .2s}
.btn:hover{background:var(--amber)}
.btn.ghost{background:var(--plate);color:var(--cyan)}
.btn.ghost:hover{background:var(--slate);color:var(--gunmetal)}

.panel-wrap{max-width:1040px;margin:0 auto;padding:4rem 1.5rem 1rem}
h2{font-size:1.7rem;letter-spacing:.1em;margin-bottom:1.5rem;padding-left:1rem;border-left:5px solid var(--cyan)}
h3{font-size:1rem;letter-spacing:.08em;margin-bottom:.6rem;color:var(--cyan)}
.panel{position:relative;background:linear-gradient(160deg,var(--steel),#1a2027);padding:1.6rem;
  border:1px solid var(--plate);border-top:2px solid var(--slate);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.panel p+p,.panel ul{margin-top:1rem}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.objectives{padding-left:1.2rem}.objectives li::marker{color:var(--amber)}
.dim,.note{color:var(--dim)}.note{margin-top:1.2rem}

.meter{height:12px;background:#0b0e11;border:1px solid var(--slate);padding:2px}
.meter i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transition:width 1.4s ease-out}
.val{font:700 1.6rem 'Orbitron',sans-serif;margin-top:.8rem!important}

.timeline{list-style:none;padding:0 0 0 1.5rem;border-left:2px solid var(--plate)}
.timeline li{position:relative;padding:0 0 2rem 1.5rem}
.timeline li::before{content:"";position:absolute;left:-2.15rem;top:.35rem;width:14px;height:14px;background:var(--gunmetal);
  border:2px solid var(--cyan);transform:rotate(45deg)}
.timeline li:first-child::before{background:var(--amber);border-color:var(--amber)}
.timeline time{color:var(--amber);letter-spacing:.1em;font-weight:600}
.timeline h3{color:var(--text);margin:.2rem 0}

.shot{aspect-ratio:16/10;display:grid;place-items:center;position:relative;color:var(--dim);
  background:repeating-linear-gradient(45deg,var(--steel) 0 12px,#1d242b 12px 24px);border:1px solid var(--slate)}
.shot::before,.shot::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--cyan)}
.shot::before{top:8px;left:8px;border-right:0;border-bottom:0}
.shot::after{bottom:8px;right:8px;border-left:0;border-top:0}
.shot figcaption{position:absolute;bottom:10px;left:14px;font-size:.95rem}

footer{margin-top:5rem;padding:2rem 1.5rem;text-align:center;color:var(--dim);font-size:.95rem;border-top:2px solid var(--plate)}
footer p{max-width:70ch;margin:auto}

.roster-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:1rem 1.2rem;background:linear-gradient(160deg,var(--steel),#1a2027);border:2px solid var(--cyan);color:var(--text);cursor:pointer;font:inherit;text-align:left;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.roster-toggle:hover{background:var(--plate)}
.rt-main{display:grid;gap:.15rem}
.rt-main b{font:700 1.1rem 'Orbitron',sans-serif;letter-spacing:.12em;color:var(--cyan);text-transform:uppercase}
.rt-main small{color:var(--amber);font:600 1rem 'Rajdhani',sans-serif;letter-spacing:.08em}
.roster-toggle i{flex:none;width:14px;height:14px;margin-right:.3rem;border-right:3px solid var(--cyan);border-bottom:3px solid var(--cyan);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s}
.roster-toggle[aria-expanded=true] i{transform:rotate(-135deg) translate(-3px,-3px)}
.roster-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.roster-wrap.open{grid-template-rows:1fr}
.roster-inner{overflow:hidden;min-height:0}
.count{margin-top:.4rem;color:var(--amber);font:700 1rem 'Orbitron',sans-serif;letter-spacing:.08em;min-height:1.5em}
.rollcall{list-style:none;padding:0;margin:1.5rem 0 2rem;display:grid;gap:.4rem}
.rollcall li{opacity:0;transform:translateX(-14px);transition:opacity .45s,transform .45s}
.rollcall li.on{opacity:1;transform:none}
.slot{width:100%;display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:var(--steel);color:var(--text);
  border:0;border-left:4px solid var(--slate);font:inherit;cursor:pointer;text-align:left}
.slot:hover{background:var(--plate)}
.slot span{font-family:'Orbitron',sans-serif;font-size:.95rem;letter-spacing:.08em}
.slot b{color:var(--amber);font-family:'Orbitron',sans-serif;font-size:.85rem;letter-spacing:.1em;animation:blink 2.4s steps(2) infinite}
.slot.active{border-left-color:var(--cyan)}
.slot.active b{color:var(--cyan);animation:none;text-shadow:0 0 8px var(--cyan)}
@keyframes blink{50%{opacity:.45}}
dialog{margin:auto;width:min(92vw,440px);padding:1.5rem;background:var(--gunmetal);color:var(--text);border:1px solid var(--cyan);
  box-shadow:0 0 30px rgba(111,230,255,.25)}
dialog::backdrop{background:rgba(5,8,10,.82)}
.gate-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.gate-head h3{margin:0}
.x{background:none;border:1px solid var(--slate);color:var(--text);padding:.2rem .8rem;font:inherit;cursor:pointer}
dialog label{display:block;margin-bottom:1rem;color:var(--dim);font-weight:600}
dialog input{display:block;width:100%;margin-top:.3rem;padding:.7rem;background:#0b0e11;color:var(--cyan);border:1px solid var(--slate);font:inherit;font-size:1.1rem}
dialog select{display:block;width:100%;margin:.3rem 0 1rem;padding:.7rem;background:#0b0e11;color:var(--text);border:1px solid var(--slate);font:inherit;font-size:1.1rem}
#colorPick label{margin-bottom:0}
#roster .grid3{grid-template-columns:minmax(240px,360px)}
.dd{position:relative;margin:.3rem 0 1rem}
.dd>button{width:100%;display:flex;justify-content:space-between;text-align:left;padding:.7rem;background:#0b0e11;color:var(--text);border:1px solid var(--slate);font:inherit;font-size:1.1rem;cursor:pointer}
.dd>button::after{content:"▾";color:var(--cyan)}
.dd ul{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;z-index:5;background:#0b0e11;border:1px solid var(--cyan);max-height:270px;overflow:auto}
.dd li{display:flex;align-items:center;gap:.7rem;padding:.65rem .7rem;cursor:pointer;color:var(--text)}
.dd li:hover,.dd li:focus{background:var(--plate);outline:none}
.dd li[aria-selected=true]{box-shadow:inset 3px 0 var(--amber)}
.dd li i{width:16px;height:16px;border-radius:2px;flex:none}
.dd li.full,.dd li.full:hover{color:#6b7580;text-decoration:line-through;cursor:not-allowed;background:none}
.dd li.full i{opacity:.35}
#colorPick .btn:disabled{opacity:.4;cursor:not-allowed}
#colorLocked p{margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.lock{width:22px;height:22px;flex:none;color:#9aa3ab;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.coll{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--plate);border:1px solid var(--slate);color:var(--cyan);font:700 1rem 'Orbitron',sans-serif;letter-spacing:.08em;padding:.6rem .9rem;cursor:pointer}
.coll i{font-style:normal;font-size:1.3rem;line-height:1}
#intel{margin-bottom:1.5rem}
.drop{position:relative;display:grid;place-items:center;text-align:center;min-height:110px;margin:.8rem 0;padding:1rem;border:2px dashed var(--slate);background:#0b0e11;color:var(--dim);font-weight:600}
.drop:hover,.drop:focus-within{border-color:var(--cyan);color:var(--cyan)}
.drop input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.intel-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.intel-list li{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;align-items:center;padding:.5rem;background:var(--steel);border-left:4px solid var(--cyan);color:var(--text)}
.intel-list .th{width:64px;height:64px;object-fit:cover;background:#000;display:grid;place-items:center;font-size:.7rem;color:var(--dim)}
.intel-list b{display:block;word-break:break-all;font-weight:600}
.intel-list small{color:var(--dim)}
#inMsg{min-height:1.5em;margin-top:.4rem}
dialog.colored .coll{color:#fff}
#confirm p{margin-bottom:1.4rem;font-size:1.2rem}
dialog.colored{background:linear-gradient(rgba(12,16,20,.35),rgba(12,16,20,.35)),var(--tint);border-color:var(--tint);color:#fff;box-shadow:0 0 30px var(--tint)}
dialog.colored h3,dialog.colored dt{color:rgba(255,255,255,.85)}
.loginrow{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.lbtns{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.lbtns .btn{margin:0}
.avatar{width:104px;height:104px;flex:none;border:2px solid var(--slate);background:#000;box-shadow:0 0 14px rgba(111,230,255,.2)}
.avatar svg{display:block;width:100%;height:100%}
.mail{white-space:pre-wrap;word-break:break-word;background:#0b0e11;border:1px dashed var(--amber);color:var(--text);padding:.8rem;font:500 .95rem/1.4 'Rajdhani',sans-serif;margin:1rem 0}
#askText{margin-bottom:1.2rem;font-size:1.2rem}
.dgrid{display:grid;gap:1.5rem;margin-bottom:1.5rem}
@media (min-width:640px){.dgrid{grid-template-columns:1fr 1fr}}
dialog.wide{width:min(94vw,760px)}
.emprev{width:150px;height:150px;border:2px solid var(--slate);margin:.6rem 0 1rem;background:#000}
.emprev svg{display:block;width:100%;height:100%}
.lab{color:var(--dim);font-size:.95rem;margin:.8rem 0 .3rem}
.opts{display:flex;flex-wrap:wrap;gap:.35rem}
.opts button{width:38px;height:38px;padding:3px;background:#0b0e11;border:1px solid var(--slate);color:var(--text);cursor:pointer}
.opts button svg{width:100%;height:100%;display:block}
.opts button[aria-pressed=true]{outline:2px solid var(--amber);outline-offset:1px}
.opts.scroll{max-height:132px;overflow-y:auto;padding:2px}
.opts button img{width:100%;height:100%;object-fit:contain;display:block}
.opts.sw button{width:30px;height:30px;padding:0}
.chk{display:flex;gap:.5rem;align-items:center;margin:1rem 0}
dialog .chk input{display:inline-block;width:auto;margin:0}
#emMsg{min-height:1.5em;margin-top:.6rem}
dialog.colored .lab{color:rgba(255,255,255,.85)}
dialog input:focus{outline:2px solid var(--amber);outline-offset:1px}
.err{color:var(--amber);min-height:1.5em;margin-bottom:.6rem}
#dossier{display:grid;gap:.8rem;margin-bottom:1.5rem}
#dossier dt{color:var(--dim);font-size:.95rem}#dossier dd{margin:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){
  .menu{display:block}
  nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    background:var(--gunmetal);padding:1rem 1.5rem;border-bottom:2px solid var(--plate)}
  nav.open{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .roster-wrap,.roster-toggle i{transition:none}
  html{scroll-behavior:auto}.ring .spin{animation:none}
  h1,.tagline,.hero .actions{opacity:1;transform:none;transition:none}.ring{opacity:1;transition:none}.meter i{transition:none}.rollcall li{opacity:1;transform:none;transition:none}.slot b{animation:none}
}

/* Intro splash */
#splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--gunmetal);cursor:pointer;transition:opacity .7s ease}
#splash.out{opacity:0;pointer-events:none}
.sp-in{text-align:center;padding:1.5rem;width:min(92vw,520px)}
.sp-line{font:700 clamp(.8rem,3.8vw,1.4rem) 'Orbitron',sans-serif;letter-spacing:.14em;color:var(--cyan);text-shadow:0 0 14px rgba(111,230,255,.6);min-height:1.6em;white-space:nowrap}
.sp-bar{height:4px;margin:1.4rem auto .8rem;background:var(--plate);overflow:hidden}
.sp-bar i{display:block;height:100%;width:0;background:var(--amber);animation:spfill 3.4s linear forwards}
#splash small{color:var(--dim);letter-spacing:.1em}
@keyframes spfill{to{width:100%}}
body.splash{overflow:hidden}
body>header,body>main,body>footer{transition:opacity .8s ease}
body.splash>header,body.splash>main,body.splash>footer{opacity:0}
@media (prefers-reduced-motion:reduce){#splash{display:none}body.splash>header,body.splash>main,body.splash>footer{opacity:1}body.splash{overflow:auto}}

/* Transmission screen frame */
#feed{padding-top:2.5rem}
.screen{position:relative;margin:0;padding:2.7rem 1rem;background:linear-gradient(160deg,var(--plate),#161b21);border:2px solid var(--slate);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.scr-bar,.scr-foot{position:absolute;left:0;right:0;height:2.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0 1.2rem;
  font:600 .8rem 'Orbitron',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.scr-bar{top:0;border-bottom:1px solid var(--slate)}
.scr-foot{bottom:0;border-top:1px solid var(--slate);font:600 .95rem 'Rajdhani',sans-serif;letter-spacing:.1em;color:var(--dim)}
.scr-foot b{color:var(--cyan)}
.rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--amber);margin-right:.55rem;animation:blink 2.4s steps(2) infinite}
.scr-view{position:relative;aspect-ratio:16/9;background:#05080b;border:1px solid #000;box-shadow:inset 0 0 40px rgba(111,230,255,.18),0 0 0 2px var(--plate);overflow:hidden}
.scr-view::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.12) 3px 4px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35))}
.scr-view iframe,.scr-view .play{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{display:grid;place-items:center;background:#000 center/cover no-repeat;cursor:pointer;padding:0}
.play i{position:relative;width:72px;height:72px;border:3px solid var(--cyan);border-radius:50%;background:rgba(5,8,11,.55);box-shadow:0 0 18px rgba(111,230,255,.5)}
.play i::after{content:"";position:absolute;left:27px;top:19px;border-left:22px solid var(--cyan);border-top:14px solid transparent;border-bottom:14px solid transparent}
.play:hover i{border-color:var(--amber)}.play:hover i::after{border-left-color:var(--amber)}
.scr-idle{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.4rem;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px);background-size:100% 40px;animation:noise 1.2s steps(6) infinite}
.scr-idle b{font:700 clamp(1rem,4.5vw,1.8rem) 'Orbitron',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 14px rgba(111,230,255,.6)}
.scr-idle small{color:var(--dim);letter-spacing:.16em;text-transform:uppercase}
@keyframes noise{to{background-position:0 40px}}
.br{position:absolute;width:22px;height:22px;border:3px solid var(--cyan)}
.br.tl{top:2.15rem;left:.55rem;border-right:0;border-bottom:0}
.br.tr{top:2.15rem;right:.55rem;border-left:0;border-bottom:0}
.br.bl{bottom:2.15rem;left:.55rem;border-right:0;border-top:0}
.br.brr{bottom:2.15rem;right:.55rem;border-left:0;border-top:0}
@media (max-width:520px){.scr-bar,.scr-foot{padding:0 .8rem;font-size:.68rem}.scr-foot{font-size:.85rem}.scr-bar span+span{text-align:right}}
@media (prefers-reduced-motion:reduce){.scr-idle,.rec{animation:none}}

.hint{color:var(--amber);margin-bottom:.4rem}.hint:empty{display:none}
.slot span{overflow-wrap:anywhere}
#csBlock{margin-top:1.4rem}
#csBlock .btn{margin-top:.2rem}
#csMsg{min-height:1.5em;margin-top:.5rem}

.adminlink{background:none;border:0;color:var(--dim);font:inherit;font-size:.85rem;letter-spacing:.1em;cursor:pointer;margin-top:.8rem;text-decoration:underline}
.adlist{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem;max-height:50vh;overflow:auto}
.adlist li{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;background:var(--steel);border-left:4px solid var(--slate)}
.adlist li.on{border-left-color:var(--cyan)}
.adlist li span{flex:1;font:600 .9rem 'Orbitron',sans-serif;letter-spacing:.05em;overflow-wrap:anywhere}
.adlist li small{color:var(--amber);font-family:'Orbitron',sans-serif;font-size:.7rem}
.adlist .x{padding:.25rem .7rem}
.adlist .x.warn{border-color:var(--amber);color:var(--amber)}
#adMsg{min-height:1.5em;color:var(--amber)}