/* ============================================================
   DBRANKED OPERATIONS — COMMAND TABLE LAYER (opst-)
   Companion to assets/operations.css. All selectors namespaced.
   ============================================================ */
.opst-room{
  --opst-void:#05080d; --opst-cyan:#57d8ff; --opst-cyan-deep:#4aa3ff; --opst-red:#ff4058;
  --opst-gold:#ffd166; --opst-green:#39d98a; --opst-steel:#9fb4c8; --opst-dim:#5b6b7d;
  --opst-mono:"Spline Sans Mono",monospace; --opst-disp:"Chakra Petch",sans-serif; --opst-prose:"Rajdhani",sans-serif;
  --opst-chamfer:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  position:relative;min-height:92vh;display:flex;flex-direction:column;
  font-family:var(--opst-mono);color:var(--opst-steel);
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(87,216,255,.10), transparent 60%),
    radial-gradient(900px 560px at 88% -4%, rgba(255,64,88,.07), transparent 60%),
    var(--opst-void);
  overflow:hidden;margin:0 -0px;
}
.opst-room::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(87,216,255,.045) 1px, transparent 1px),
             linear-gradient(90deg, rgba(87,216,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 60%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 60%, #000 30%, transparent 78%);}
.opst-room::after{content:"";position:absolute;left:50%;top:0;width:min(860px,92vw);height:64%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 50% 0%, rgba(87,216,255,.10), transparent 70%);}

/* atmosphere */
.opst-walls{position:absolute;inset:0;pointer-events:none;z-index:1}
.opst-ws{position:absolute;border:1px solid rgba(87,216,255,.10);
  background:linear-gradient(180deg, rgba(87,216,255,.05), rgba(87,216,255,.01));
  box-shadow:inset 0 0 30px rgba(87,216,255,.05);opacity:.55;}
.opst-ws::before{content:"";position:absolute;inset:8%;
  background:linear-gradient(rgba(87,216,255,.07) 1px, transparent 1px);background-size:100% 9px;}
.opst-ws.f1{animation:opstWsflick 7s steps(1) infinite}
.opst-ws.f2{animation:opstWsflick 11s steps(1) infinite 3s}
@keyframes opstWsflick{0%,92%{opacity:.55}93%,95%{opacity:.25}96%,100%{opacity:.55}}
.opst-dust{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.opst-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(87,216,255,.4);
  filter:blur(1px);animation:opstDrift linear infinite}
@keyframes opstDrift{from{transform:translateY(12vh)}to{transform:translateY(-78vh)}}
.opst-vig{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse 120% 100% at 50% 42%, transparent 55%, rgba(2,4,8,.55) 100%)}

/* strip */
.opst-strip{position:relative;z-index:6;display:flex;align-items:center;gap:18px;padding:18px 26px 8px;flex-wrap:wrap}
.opst-kick{color:var(--opst-cyan);letter-spacing:.24em;font-size:11px;text-transform:uppercase}
.opst-kick b{color:var(--opst-gold)}
.opst-strip h1{font-family:var(--opst-disp);font-weight:700;font-size:clamp(26px,3.6vw,44px);
  color:#eaf6ff;letter-spacing:.06em;text-transform:uppercase;line-height:1;margin:0;
  text-shadow:0 0 26px rgba(87,216,255,.35);}
.opst-chips{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.opst-chip{font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;
  border:1px solid rgba(87,216,255,.28);color:var(--opst-cyan);clip-path:var(--opst-chamfer);
  background:rgba(87,216,255,.05);white-space:nowrap;}
.opst-chip.gold{border-color:rgba(255,209,102,.4);color:var(--opst-gold);background:rgba(255,209,102,.05)}

/* stage / world */
.opst-stage{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;align-items:center;
  perspective:1300px;perspective-origin:50% 18%;padding:2px 12px 0;}
.opst-world{position:relative;transform-style:preserve-3d;transition:transform .18s ease-out;width:min(900px,96vw);}
.opst-dossier{position:relative;z-index:8;margin:2px auto 0;width:min(620px,94%);
  clip-path:var(--opst-chamfer);border:1px solid rgba(87,216,255,.35);
  background:linear-gradient(180deg, rgba(9,20,32,.82), rgba(7,13,21,.68));
  box-shadow:0 0 44px rgba(87,216,255,.14), inset 0 0 34px rgba(87,216,255,.05);
  padding:11px 18px 13px;backdrop-filter:blur(4px);transform:translateZ(90px);}
.opst-dossier::after{content:"";position:absolute;left:50%;top:100%;width:70%;height:66px;transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(87,216,255,.10), transparent 80%);
  clip-path:polygon(18% 0,82% 0,60% 100%,40% 100%);pointer-events:none;}
.opst-drow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.opst-dslot{font-family:var(--opst-disp);font-size:30px;color:rgba(87,216,255,.5);font-weight:700}
.opst-dossier h2{font-family:var(--opst-disp);font-size:clamp(19px,2.5vw,27px);color:#eaf6ff;
  letter-spacing:.08em;text-transform:uppercase;margin:0}
.opst-droute{margin-left:auto;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--opst-gold)}
.opst-droute.loud{color:var(--opst-red)} .opst-droute.quiet{color:var(--opst-cyan-deep)}
.opst-droute.live{color:var(--opst-green)}
.opst-dossier p{font-family:var(--opst-prose);font-size:16.5px;font-weight:500;color:#c6d6e4;margin:6px 0 0;line-height:1.45;max-width:56ch}
.opst-dlanes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.opst-dlanes span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;
  border:1px solid rgba(159,180,200,.25);color:var(--opst-steel);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

/* table */
.opst-tablewrap{position:relative;margin-top:-34px;transform-style:preserve-3d}
.opst-table{position:relative;width:100%;aspect-ratio:940/560;transform:rotateX(56deg);transform-style:preserve-3d;}
.opst-slab{position:absolute;inset:0;transform:translateZ(-14px);
  background:linear-gradient(160deg,#0a121d,#060b12 60%,#0a1420);
  border:1px solid rgba(87,216,255,.14);
  box-shadow:0 0 80px rgba(0,0,0,.8), 0 0 120px rgba(87,216,255,.06);
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 26px),calc(100% - 26px) 100%,26px 100%,0 calc(100% - 26px),0 26px);}
.opst-slab::before{content:"";position:absolute;inset:10px;border:1px solid rgba(87,216,255,.10);clip-path:inherit;}
.opst-map{position:absolute;inset:26px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(87,216,255,.16), transparent 70%),
    linear-gradient(rgba(87,216,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,216,255,.10) 1px, transparent 1px),
    linear-gradient(rgba(87,216,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,216,255,.05) 1px, transparent 1px),
    rgba(8,18,30,.6);
  background-size:auto,88px 88px,88px 88px,22px 22px,22px 22px,auto;
  box-shadow:inset 0 0 60px rgba(87,216,255,.10);overflow:hidden;}
.opst-map::after{content:"";position:absolute;inset:-20%;
  background:linear-gradient(105deg, transparent 46%, rgba(87,216,255,.10) 50%, transparent 54%);
  animation:opstSweep 9s linear infinite;}
@keyframes opstSweep{from{transform:translateX(-46%)}to{transform:translateX(46%)}}
.opst-blocks{position:absolute;inset:0}
.opst-blocks i{position:absolute;background:rgba(87,216,255,.07);border:1px solid rgba(87,216,255,.14)}
.opst-routes{position:absolute;inset:0;width:100%;height:100%}
.opst-routes path{fill:none;stroke-linecap:round}
.opst-r-main{stroke:rgba(87,216,255,.75);stroke-width:2.2;filter:drop-shadow(0 0 5px rgba(87,216,255,.7));stroke-dasharray:6 7;animation:opstFlow 1.6s linear infinite}
.opst-r-loud{stroke:rgba(255,64,88,.8);stroke-width:2;filter:drop-shadow(0 0 5px rgba(255,64,88,.7));stroke-dasharray:4 8;animation:opstFlow 1.1s linear infinite}
.opst-r-quiet{stroke:rgba(74,163,255,.7);stroke-width:2;filter:drop-shadow(0 0 4px rgba(74,163,255,.6));stroke-dasharray:2 9;animation:opstFlow 2.1s linear infinite}
.opst-r-gold{stroke:rgba(255,209,102,.6);stroke-width:2;filter:drop-shadow(0 0 4px rgba(255,209,102,.5));stroke-dasharray:3 8;animation:opstFlow 2.4s linear infinite}
.opst-r-locked{stroke:rgba(159,180,200,.22);stroke-width:1.6;stroke-dasharray:3 6;animation:none}
@keyframes opstFlow{to{stroke-dashoffset:-26}}

/* nodes */
.opst-node{position:absolute;transform-style:preserve-3d;width:0;height:0}
.opst-ring{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(87,216,255,.55);
  box-shadow:0 0 16px rgba(87,216,255,.35), inset 0 0 10px rgba(87,216,255,.2);}
.opst-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(87,216,255,.4)}
.opst-pillar{position:absolute;left:-2px;bottom:0;width:4px;height:74px;transform-origin:bottom center;
  transform:rotateX(-56deg);
  background:linear-gradient(180deg, transparent 4%, rgba(87,216,255,.9));
  box-shadow:0 0 14px rgba(87,216,255,.65);}
.opst-pillar::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);background:rgba(87,216,255,.9);box-shadow:0 0 12px rgba(87,216,255,.9)}
.opst-node.is-live .opst-ring,.opst-node.is-forming .opst-ring{border-color:var(--opst-green);
  box-shadow:0 0 22px rgba(57,217,138,.55), inset 0 0 12px rgba(57,217,138,.3);animation:opstPulse 2.2s ease-in-out infinite}
.opst-node.is-live .opst-pillar,.opst-node.is-forming .opst-pillar{background:linear-gradient(180deg, transparent 4%, rgba(57,217,138,.9));box-shadow:0 0 16px rgba(57,217,138,.7)}
.opst-node.is-live .opst-pillar::after,.opst-node.is-forming .opst-pillar::after{background:var(--opst-green);box-shadow:0 0 14px rgba(57,217,138,.9)}
.opst-node.is-forming .opst-ring{animation-duration:3.4s;border-style:dashed}
.opst-node.is-sealed .opst-ring{border-color:rgba(255,209,102,.6)}
.opst-node.is-sealed .opst-pillar{background:linear-gradient(180deg, transparent 4%, rgba(255,209,102,.7));box-shadow:0 0 10px rgba(255,209,102,.4);height:52px}
.opst-node.is-sealed .opst-pillar::after{background:var(--opst-gold);box-shadow:0 0 10px rgba(255,209,102,.7)}
.opst-node.is-passed .opst-ring{border-color:rgba(87,216,255,.3);box-shadow:none}
.opst-node.is-passed .opst-pillar{background:linear-gradient(180deg, transparent 4%, rgba(87,216,255,.4));box-shadow:none;height:46px}
.opst-node.is-passed .opst-pillar::after{background:rgba(87,216,255,.5);box-shadow:none;width:7px;height:7px}
.opst-node.is-locked .opst-ring,.opst-node.is-cold .opst-ring{border-color:rgba(159,180,200,.25);box-shadow:none}
.opst-node.is-locked .opst-pillar,.opst-node.is-cold .opst-pillar{background:linear-gradient(180deg, transparent, rgba(159,180,200,.3));box-shadow:none;height:34px}
.opst-node.is-locked .opst-pillar::after,.opst-node.is-cold .opst-pillar::after{background:rgba(159,180,200,.4);box-shadow:none;width:6px;height:6px}
.opst-node.is-cold .opst-ring{animation:opstPulse 3.6s ease-in-out infinite;border-color:rgba(87,216,255,.35)}
.opst-node.is-loud .opst-ring{border-color:rgba(255,64,88,.55)}
.opst-node.is-loud .opst-pillar{background:linear-gradient(180deg, transparent 4%, rgba(255,64,88,.75))}
.opst-node.is-loud .opst-pillar::after{background:var(--opst-red);box-shadow:0 0 12px rgba(255,64,88,.8)}
.opst-node.is-quiet .opst-ring{border-color:rgba(74,163,255,.55)}
.opst-node.is-quiet .opst-pillar{background:linear-gradient(180deg, transparent 4%, rgba(74,163,255,.7))}
.opst-node.is-quiet .opst-pillar::after{background:var(--opst-cyan-deep);box-shadow:0 0 12px rgba(74,163,255,.8)}
.opst-node.is-vault .opst-ring{border-radius:0;transform:rotate(45deg)}
@keyframes opstPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.opst-node button{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:transparent;border:0;cursor:pointer;padding:0}
.opst-node button:focus-visible{outline:2px solid var(--opst-gold);outline-offset:3px}
.opst-node.is-sel .opst-ring{border-width:2.5px}

/* labels (screen-space, JS projected) */
.opst-labels{position:absolute;inset:0;pointer-events:none;z-index:9}
.opst-lab{position:absolute;transform:translate(-50%,-100%);width:max-content;
  font-family:var(--opst-disp);font-size:11px;letter-spacing:.14em;color:var(--opst-cyan);
  text-transform:uppercase;white-space:nowrap;padding:3px 8px;
  border:1px solid rgba(87,216,255,.35);background:rgba(7,15,24,.88);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
.opst-lab.is-live,.opst-lab.is-forming{color:var(--opst-green);border-color:rgba(57,217,138,.5)}
.opst-lab.is-sealed{color:var(--opst-gold);border-color:rgba(255,209,102,.4)}
.opst-lab.is-locked,.opst-lab.is-cold{color:var(--opst-dim);border-color:rgba(159,180,200,.2)}
.opst-lab.is-passed{color:rgba(87,216,255,.6)}
.opst-lab.is-loud{color:var(--opst-red);border-color:rgba(255,64,88,.4)}
.opst-lab.is-quiet{color:var(--opst-cyan-deep);border-color:rgba(74,163,255,.4)}
.opst-lab.is-sel{background:rgba(87,216,255,.14)}
.opst-lab .n{opacity:.7;margin-right:5px}

/* crew rail */
.opst-crew{position:relative;z-index:7;display:flex;gap:14px;justify-content:center;
  margin:-46px auto 0;padding:0 12px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;}
.opst-crew::-webkit-scrollbar{display:none}
.opst-seat{position:relative;width:118px;min-width:118px;height:150px;clip-path:var(--opst-chamfer);
  border:1px solid rgba(87,216,255,.30);
  background:linear-gradient(180deg, rgba(10,22,36,.75), rgba(6,12,20,.6));
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:10px;overflow:hidden;text-decoration:none;}
.opst-holo{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:62px;height:96px;
  background:radial-gradient(ellipse 50% 30% at 50% 16%, currentColor 58%, transparent 60%),
             radial-gradient(ellipse 78% 52% at 50% 74%, currentColor 60%, transparent 62%);
  opacity:.5;color:var(--opst-cyan);
  -webkit-mask-image:linear-gradient(#000 2px, transparent 2px);mask-image:linear-gradient(#000 2px, transparent 2px);
  -webkit-mask-size:100% 4px;mask-size:100% 4px;filter:drop-shadow(0 0 8px currentColor);}
.opst-tag{position:relative;font-family:var(--opst-disp);font-size:12px;letter-spacing:.1em;color:#eaf6ff;text-transform:uppercase;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opst-role{position:relative;font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-top:2px;color:var(--opst-cyan)}
.opst-seat.open{border-style:dashed;border-color:rgba(159,180,200,.28);cursor:pointer;
  background:linear-gradient(180deg, rgba(9,15,24,.5), rgba(6,10,16,.4))}
.opst-seat.open .opst-holo{opacity:.16;color:var(--opst-steel)}
.opst-lock{position:absolute;top:44px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:26px;height:26px;border:1.5px solid rgba(159,180,200,.55);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(87,216,255,.15);}
.opst-lock span{transform:rotate(-45deg);font-size:12px;color:var(--opst-steel)}
.opst-seat.open .opst-tag{color:var(--opst-dim)} .opst-seat.open .opst-role{color:var(--opst-dim)}
.opst-seat.open:hover{border-color:rgba(87,216,255,.55)}
.opst-seat.open:hover .opst-tag,.opst-seat.open:hover .opst-lock span{color:var(--opst-cyan)}
.opst-seat.open:hover .opst-lock{border-color:var(--opst-cyan)}
.opst-seat.open:focus-visible{outline:2px solid var(--opst-gold);outline-offset:2px}

/* wren + dock */
.opst-wren{position:relative;z-index:7;text-align:center;margin:14px auto 0;min-height:22px;
  font-size:12.5px;letter-spacing:.06em;color:var(--opst-cyan);max-width:92vw;}
.opst-wren b{color:var(--opst-gold);letter-spacing:.2em}
.opst-cur{display:inline-block;width:8px;height:14px;background:var(--opst-cyan);vertical-align:-2px;
  animation:opstBlink 1s steps(1) infinite;margin-left:2px}
@keyframes opstBlink{50%{opacity:0}}
.opst-dock{position:relative;z-index:7;display:flex;gap:14px;justify-content:center;align-items:center;
  margin:12px auto 24px;flex-wrap:wrap;padding:0 14px;}
.opst-btn{font-family:var(--opst-disp);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 30px;clip-path:var(--opst-chamfer);cursor:pointer;border:0;text-decoration:none;display:inline-block;}
.opst-btn.gold{background:linear-gradient(180deg,#ffd97a,#e9b542);color:#1a1204;box-shadow:0 0 30px rgba(255,209,102,.3)}
.opst-btn.gold:hover{box-shadow:0 0 44px rgba(255,209,102,.5)}
.opst-btn.ghost{background:rgba(87,216,255,.05);border:1px solid rgba(87,216,255,.4);color:var(--opst-cyan)}
.opst-btn.ghost:hover{background:rgba(87,216,255,.12)}
.opst-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.opst-trust{position:relative;z-index:7;text-align:center;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--opst-dim);margin:-12px 0 26px}

/* boot */
.opst-bootveil[hidden]{display:none!important}
.opst-bootveil{position:fixed;inset:0;z-index:60;background:#020409;display:flex;align-items:center;justify-content:center;cursor:pointer}
.opst-term{font-family:var(--opst-mono);font-size:13px;letter-spacing:.08em;color:var(--opst-cyan);min-width:min(420px,86vw)}
.opst-term div{opacity:0;animation:opstBline .12s forwards}
.opst-term .ok{color:var(--opst-green)} .opst-term .warn{color:var(--opst-gold)}
.opst-skip{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.24em;color:var(--opst-dim);text-transform:uppercase}
@keyframes opstBline{to{opacity:1}}
.opst-bootveil.out{animation:opstVeilout .5s forwards}
@keyframes opstVeilout{to{opacity:0;visibility:hidden}}
/* reveal choreography */
.opst-in{transition:opacity .6s ease, transform .6s ease}
.opst-bootable:not(.opst-booted) .opst-in{opacity:0;transform:translateY(10px)}
.opst-in.d1{transition-delay:.05s}.opst-in.d2{transition-delay:.25s}.opst-in.d3{transition-delay:.45s}
.opst-in.d4{transition-delay:.7s}.opst-in.d5{transition-delay:.95s}
.opst-bootable:not(.opst-booted) .opst-routes path{opacity:0}
.opst-booted .opst-routes path{opacity:1;transition:opacity .8s ease}
.opst-booted .opst-r-main{transition-delay:.9s}
.opst-booted .opst-r-loud,.opst-booted .opst-r-quiet{transition-delay:1.5s}
.opst-booted .opst-r-locked,.opst-booted .opst-r-gold{transition-delay:2s}
.opst-bootable:not(.opst-booted) .opst-pillar{transform:rotateX(-56deg) scaleY(0)}
.opst-bootable:not(.opst-booted) .opst-ring{opacity:0}
.opst-booted .opst-pillar{transform:rotateX(-56deg) scaleY(1);transition:transform .55s cubic-bezier(.2,.9,.3,1.2)}
.opst-booted .opst-ring{opacity:1;transition:opacity .4s ease}
.opst-booted .opst-node:nth-of-type(2) .opst-pillar,.opst-booted .opst-node:nth-of-type(2) .opst-ring{transition-delay:.55s}
.opst-booted .opst-node:nth-of-type(3) .opst-pillar,.opst-booted .opst-node:nth-of-type(3) .opst-ring{transition-delay:.75s}
.opst-booted .opst-node:nth-of-type(4) .opst-pillar,.opst-booted .opst-node:nth-of-type(4) .opst-ring{transition-delay:.95s}
.opst-booted .opst-node:nth-of-type(5) .opst-pillar,.opst-booted .opst-node:nth-of-type(5) .opst-ring{transition-delay:1.1s}
.opst-booted .opst-node:nth-of-type(6) .opst-pillar,.opst-booted .opst-node:nth-of-type(6) .opst-ring{transition-delay:1.25s}
.opst-booted .opst-node:nth-of-type(7) .opst-pillar,.opst-booted .opst-node:nth-of-type(7) .opst-ring{transition-delay:1.4s}
.opst-booted .opst-node:nth-of-type(8) .opst-pillar,.opst-booted .opst-node:nth-of-type(8) .opst-ring{transition-delay:1.55s}
.opst-booted .opst-node:nth-of-type(9) .opst-pillar,.opst-booted .opst-node:nth-of-type(9) .opst-ring{transition-delay:1.7s}
.opst-booted .opst-node:nth-of-type(10) .opst-pillar,.opst-booted .opst-node:nth-of-type(10) .opst-ring{transition-delay:1.85s}
.opst-booted.opst-flare .opst-node.is-live .opst-ring,
.opst-booted.opst-flare .opst-node.is-forming .opst-ring{animation:opstPulse 2.2s ease-in-out infinite, opstFlare .9s ease-out 1}
@keyframes opstFlare{0%{box-shadow:0 0 22px rgba(57,217,138,.55)}35%{box-shadow:0 0 60px rgba(57,217,138,.95), 0 0 110px rgba(57,217,138,.5)}100%{box-shadow:0 0 22px rgba(57,217,138,.55)}}

/* motion safety + no-js */
@media (prefers-reduced-motion:reduce){
  .opst-world{transition:none!important}
  .opst-map::after,.opst-ws,.opst-dust i,.opst-routes path,.opst-ring,.opst-cur{animation:none!important}
  .opst-in,.opst-pillar,.opst-booted .opst-routes path{transition:none!important}
}
html.no-js .opst-in,html.no-js .opst-pillar,html.no-js .opst-ring,html.no-js .opst-routes path{opacity:1!important;transform:none!important}
html.no-js .opst-pillar{transform:rotateX(-56deg)!important}

/* mobile */
@media (max-width:760px){
  .opst-stage{perspective:900px}
  .opst-table{transform:rotateX(48deg)}
  .opst-pillar{transform:rotateX(-48deg)}
  .opst-bootable:not(.opst-booted) .opst-pillar{transform:rotateX(-48deg) scaleY(0)}
  .opst-booted .opst-pillar{transform:rotateX(-48deg) scaleY(1)}
  html.no-js .opst-pillar{transform:rotateX(-48deg)!important}
  .opst-dossier{transform:translateZ(40px)}
  .opst-lab{font-size:9px;padding:2px 6px}
  .opst-seat{width:96px;min-width:96px;height:128px}
  .opst-crew{justify-content:flex-start}
}

/* ============ RALLY BEACON + SIGNAL WALL (opst integration layer) ============ */
.opst-flame{position:relative;display:inline-block;width:10px;height:12px;margin-right:7px;vertical-align:-1px;
  background:radial-gradient(ellipse 60% 80% at 50% 90%, currentColor 40%, transparent 70%);
  clip-path:polygon(50% 0,72% 34%,100% 55%,80% 100%,20% 100%,0 55%,28% 34%);opacity:.55;}
.opst-chip.beacon{color:var(--opst-dim);border-color:rgba(159,180,200,.25);text-decoration:none}
.opst-chip.beacon.hot{color:var(--opst-gold);border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.08);
  box-shadow:0 0 18px rgba(255,209,102,.25);}
.opst-chip.beacon.hot .opst-flame{opacity:1;animation:opstFlick .9s ease-in-out infinite alternate}
@keyframes opstFlick{from{transform:scaleY(1)}to{transform:scaleY(1.25) translateY(-1px)}}
.opst-btn.beacon{background:rgba(255,209,102,.05);border:1px solid rgba(255,209,102,.35);color:var(--opst-gold)}
.opst-btn.beacon:hover{background:rgba(255,209,102,.12)}
.opst-btn.beacon.hot{background:linear-gradient(180deg, rgba(255,217,122,.22), rgba(233,181,66,.12));
  box-shadow:0 0 26px rgba(255,209,102,.3);}
.opst-btn.beacon.hot .opst-flame{opacity:1;animation:opstFlick .8s ease-in-out infinite alternate}

.opst-wallfeed{position:absolute;right:18px;top:96px;width:236px;z-index:7;display:flex;flex-direction:column;gap:8px;}
.opst-wallhead{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--opst-cyan);
  padding-bottom:2px;border-bottom:1px solid rgba(87,216,255,.2)}
.opst-wallhead span{color:var(--opst-dim)}
.opst-tx{display:block;text-decoration:none;padding:8px 10px;border:1px solid rgba(87,216,255,.16);
  background:linear-gradient(180deg, rgba(9,18,30,.72), rgba(6,12,20,.55));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.opst-tx:hover{border-color:rgba(87,216,255,.45)}
.opst-txkind{display:inline-block;font-size:8.5px;letter-spacing:.2em;color:var(--opst-cyan);
  border:1px solid rgba(87,216,255,.3);padding:1px 5px;margin-bottom:4px}
.opst-tx.is-aar .opst-txkind{color:var(--opst-gold);border-color:rgba(255,209,102,.4)}
.opst-tx.is-ops .opst-txkind{color:var(--opst-green);border-color:rgba(57,217,138,.35)}
.opst-tx b{display:block;font-family:var(--opst-prose);font-weight:600;font-size:13.5px;color:#d7e5f2;line-height:1.25}
.opst-txmeta{display:block;margin-top:3px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--opst-dim)}
.opst-walllink{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--opst-cyan);text-decoration:none;margin-top:2px}
.opst-walllink:hover{text-shadow:0 0 10px rgba(87,216,255,.6)}
@media (max-width:1219px){.opst-wallfeed{display:none}}

/* ============================================================
   THE DECK — below-fold reskin. Same room, new stations.
   Scoped to .opst-deck: skins existing ops-* markup, never
   touches structure, forms, or JS hooks.
   ============================================================ */
.opst-deck{
  position:relative;
  background:
    radial-gradient(900px 500px at 14% 4%, rgba(87,216,255,.06), transparent 60%),
    radial-gradient(760px 460px at 88% 30%, rgba(255,64,88,.045), transparent 60%),
    radial-gradient(900px 520px at 40% 78%, rgba(87,216,255,.05), transparent 60%),
    #05080d;
  padding:44px clamp(10px,3vw,34px) 60px;
}
.opst-deck::before{ /* the room grid continues */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(87,216,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,216,255,.04) 1px, transparent 1px);
  background-size:44px 44px;
}
.opst-deck > *{position:relative}

/* ---- stations: every console announces itself ---- */
.opst-deck .opst-station{margin-top:58px;position:relative}
.opst-deck .opst-station:first-child{margin-top:16px}
.opst-deck .opst-station::before{
  content:attr(data-station) !important;
  /* hard reset: some panels style their own ::before (decorative diamonds etc.);
     properties MERGE per-property, so every geometry prop must be pinned here */
  position:relative !important;inset:auto !important;left:auto !important;right:auto !important;
  top:auto !important;bottom:auto !important;width:auto !important;height:auto !important;
  transform:none !important;border-radius:0 !important;opacity:1 !important;
  z-index:3;display:table;
  margin:0 0 14px;padding:4px 14px;
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:#57d8ff !important;background:rgba(6,12,20,.9) !important;
  border:1px solid rgba(87,216,255,.45) !important;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  text-shadow:0 0 12px rgba(87,216,255,.6);
  box-shadow:0 0 18px rgba(87,216,255,.15);
}
.opst-deck .opst-station{margin-top:34px}

/* ---- consoles: glass over the void ---- */
.opst-deck .ops-panel{
  background:linear-gradient(165deg, rgba(10,20,33,.85), rgba(6,12,20,.72)) !important;
  border:1px solid rgba(87,216,255,.22) !important;
  box-shadow:0 0 40px rgba(0,0,0,.5), inset 0 0 40px rgba(87,216,255,.03) !important;
  border-radius:0 !important;
}
.opst-deck .ops-panel::after{ /* corner brackets (geometry pinned against merges) */
  content:"" !important;position:absolute !important;inset:0 !important;
  width:auto !important;height:auto !important;transform:none !important;pointer-events:none;
  background:
    linear-gradient(#57d8ff,#57d8ff) top left/14px 2px,
    linear-gradient(#57d8ff,#57d8ff) top left/2px 14px,
    linear-gradient(#57d8ff,#57d8ff) bottom right/14px 2px,
    linear-gradient(#57d8ff,#57d8ff) bottom right/2px 14px;
  background-repeat:no-repeat;opacity:.5;
}
.opst-deck .ops-panel-head{
  border-bottom:1px solid rgba(87,216,255,.18) !important;
}
.opst-deck .ops-panel-head span{
  font-family:"Spline Sans Mono",monospace !important;font-size:10px !important;
  letter-spacing:.24em !important;text-transform:uppercase !important;color:#5b6b7d !important;
}
.opst-deck .ops-panel-head b{
  font-family:"Chakra Petch",sans-serif !important;letter-spacing:.06em !important;
  text-transform:uppercase !important;color:#eaf6ff !important;
  text-shadow:0 0 18px rgba(87,216,255,.25);
}

/* ---- typography: prose becomes briefing text ---- */
.opst-deck p{font-family:"Rajdhani",sans-serif;font-weight:500;color:#b9cbdc}
.opst-deck h1,.opst-deck h2,.opst-deck h3{
  font-family:"Chakra Petch",sans-serif !important;text-transform:uppercase;
  letter-spacing:.05em;color:#eaf6ff;
}

/* ---- chips & buttons speak opst ---- */
.opst-deck .ops-rule-chip{
  font-family:"Spline Sans Mono",monospace !important;font-size:10px !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  border:1px solid rgba(87,216,255,.28) !important;color:#57d8ff !important;
  background:rgba(87,216,255,.05) !important;border-radius:0 !important;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.opst-deck .ops-rule-chip.is-solo{color:#39d98a !important;border-color:rgba(57,217,138,.4) !important;background:rgba(57,217,138,.05) !important}
.opst-deck .ops-rule-chip.is-strong{color:#ffd166 !important;border-color:rgba(255,209,102,.4) !important;background:rgba(255,209,102,.05) !important}
.opst-deck .ops-rule-chip.is-optimal{color:#4aa3ff !important;border-color:rgba(74,163,255,.4) !important;background:rgba(74,163,255,.05) !important}
.opst-deck .ops-btn{
  font-family:"Chakra Petch",sans-serif !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;border-radius:0 !important;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  border:1px solid rgba(87,216,255,.4) !important;background:rgba(87,216,255,.06) !important;color:#57d8ff !important;
}
.opst-deck .ops-btn:hover{background:rgba(87,216,255,.14) !important;box-shadow:0 0 22px rgba(87,216,255,.25)}
.opst-deck .ops-btn.ops-primary{
  background:linear-gradient(180deg,#ffd97a,#e9b542) !important;color:#1a1204 !important;
  border:0 !important;box-shadow:0 0 26px rgba(255,209,102,.3) !important;
}
.opst-deck .ops-btn.ops-primary:hover{box-shadow:0 0 40px rgba(255,209,102,.5) !important}

/* ---- forms: field hardware ---- */
.opst-deck input[type="text"],.opst-deck input[type="password"],.opst-deck input:not([type]),.opst-deck select,.opst-deck textarea{
  background:rgba(5,10,17,.85) !important;border:1px solid rgba(87,216,255,.25) !important;
  color:#d7e5f2 !important;font-family:"Spline Sans Mono",monospace !important;
  border-radius:0 !important;
}
.opst-deck input:focus,.opst-deck select:focus,.opst-deck textarea:focus{
  outline:none !important;border-color:#57d8ff !important;
  box-shadow:0 0 0 1px rgba(87,216,255,.5), 0 0 18px rgba(87,216,255,.2) !important;
}

/* ---- S1 field manual: steps become holo cards ---- */
.opst-deck .ops-howto-step{
  background:linear-gradient(170deg, rgba(9,18,30,.8), rgba(6,11,18,.6)) !important;
  border:1px solid rgba(87,216,255,.18) !important;border-radius:0 !important;
  position:relative;overflow:hidden;
}
.opst-deck .ops-howto-step::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(87,216,255,.05) 1px, transparent 1px);background-size:100% 7px;
  opacity:.5;
}
.opst-deck .ops-howto-step:hover{border-color:rgba(87,216,255,.45) !important;box-shadow:0 0 24px rgba(87,216,255,.12)}

/* ---- meters: progress reads as signal strength ---- */
.opst-deck .ops-recruit-meter,.opst-deck .ops-field-cell-meter,.opst-deck .ops-theater-node-meter,.opst-deck .ops-field-proofbar{
  background:rgba(87,216,255,.08) !important;border-radius:0 !important;
  box-shadow:inset 0 0 8px rgba(0,0,0,.6);
}

/* ---- role strip + archive get the glass too ---- */
.opst-deck .ops-role-strip > *,.opst-deck .ops-archive-card,.opst-deck .ops-dispatch-cards > *{
  background:linear-gradient(170deg, rgba(9,18,30,.75), rgba(6,11,18,.55)) !important;
  border:1px solid rgba(87,216,255,.16) !important;border-radius:0 !important;
}

/* ---- advanced intel: a sealed door ---- */
.opst-deck .ops-advanced{
  border:1px dashed rgba(87,216,255,.3) !important;background:rgba(6,12,20,.5) !important;border-radius:0 !important;
}
.opst-deck .ops-advanced > summary{
  font-family:"Chakra Petch",sans-serif !important;letter-spacing:.12em;text-transform:uppercase;color:#57d8ff !important;
}
.opst-deck .ops-advanced[open]{border-style:solid !important}

@media (prefers-reduced-motion:reduce){
  .opst-deck .ops-howto-step:hover,.opst-deck .ops-btn:hover{box-shadow:none}
}


/* ============ AAA SPACING PASS (v4) ============ */
/* room becomes a grid at desktop: signal wall owns a real column */
@media (min-width:1280px){
  .opst-room{display:grid;grid-template-columns:minmax(0,1fr) 276px;
    grid-template-areas:"strip strip" "stage wall" "crew crew" "wren wren" "dock dock" "trust trust";}
  .opst-strip{grid-area:strip}
  .opst-stage{grid-area:stage;min-width:0}
  .opst-wallfeed{grid-area:wall;position:static;width:auto;align-self:start;
    padding:6px 20px 0 0;margin-top:2px;}
  .opst-crew{grid-area:crew}
  .opst-wren{grid-area:wren}
  .opst-dock{grid-area:dock}
  .opst-trust{grid-area:trust}
}
@media (max-width:1279px){.opst-wallfeed{display:none}}

/* dossier: smaller footprint, breathes */
.opst-dossier{width:min(520px,94%) !important;padding:10px 16px 12px !important;margin-top:6px !important}
.opst-dossier p{font-size:15.5px !important;max-width:52ch}
.opst-dslot{font-size:26px !important}

/* kill the dead band between the projected table and the crew rail */
.opst-tablewrap{margin-bottom:-7.5%}
.opst-crew{margin-top:0 !important}
@media (max-width:760px){.opst-tablewrap{margin-bottom:-5%}}

/* WREN: dead-center, always */
.opst-wren{width:100% !important;max-width:none !important;text-align:center !important;
  margin:16px 0 0 !important}
.opst-dock{margin:14px auto 22px !important}
.opst-trust{margin:-8px 0 28px !important}

/* recruiting console: cards claim real space, no barren right side */
.opst-deck .ops-crews{grid-template-columns:repeat(auto-fit,minmax(320px,480px)) !important;
  justify-content:start !important;gap:16px !important}
.opst-deck .ops-recruit-panel{overflow:visible !important}

/* consistent console rhythm */
.opst-deck .ops-panel{padding:20px !important}
.opst-deck .ops-panel-head{margin-bottom:16px !important}


/* ===== S3 // OPEN FREQUENCIES — field key-art backdrop (2026-07-02) =====
   The recruiting board sits on live battlefield art. Three layers keep it
   native to the deck: readability gradient (top label + bottom edge stay
   dark glass), a cyan field-tint vignette, then the art itself. Cards keep
   their own solid glass, so signal text never fights the image. */
.opst-deck .ops-panel.ops-recruit-panel {
  /* the deck glass rule uses !important — this backdrop must outrank it, and it
     recreates the same glass tones in its top/bottom gradient so nothing clashes */
  background:
    linear-gradient(180deg,
      rgba(6, 11, 19, 0.94) 0%,
      rgba(6, 11, 19, 0.62) 16%,
      rgba(8, 14, 24, 0.42) 42%,
      rgba(8, 14, 24, 0.55) 70%,
      rgba(6, 11, 19, 0.95) 100%),
    radial-gradient(130% 100% at 50% 8%,
      rgba(14, 38, 56, 0.18) 0%,
      rgba(6, 11, 19, 0.05) 45%,
      rgba(4, 8, 14, 0.82) 100%),
    url('ops-recruit-bg.webp') center 30% / cover no-repeat,
    #070c14 !important;
}
/* crew cards float on the art: a touch more shadow so they read as consoles on glass */
.opst-deck .ops-panel.ops-recruit-panel .recruit-card,
.opst-deck .ops-panel.ops-recruit-panel [class*="recruit"] > article {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
@media (max-width: 760px) {
  .opst-deck .ops-panel.ops-recruit-panel {
    background-position: center, center, 62% 30%; /* keep the beam + payload carrier in frame on narrow screens */
  }
}


/* ===== COMMAND TABLE ART DROP + BOARD FIX (2026-07-02) ===================
   1) BOARD FIX: the 3D plane filled its 912px grid column flush-left, and the
      rotateX projection visually bled over the panel's left border. The plane
      is slimmed and centered so the perspective spill stays inside the glass.
   2) The deck gets its cast: crew war-room behind the Command Table, the
      UNKNOWN OPERATOR looming over the Story Graph, sunrise over Sign-On,
      the antenna graveyard behind the Vault. Same three-layer treatment as
      the S3 recruiting backdrop: readability gradient + tint vignette + art. */

/* ---- 1) board alignment fix (desktop grid mode only) ---- */
@media (min-width: 1280px) {
  .opst-room .opst-tablewrap { display: flex; justify-content: center; }
  .opst-room .opst-table { width: 86%; }
}

/* ---- 2) COMMAND TABLE room: the crew is standing at YOUR table ---- */
.opst-room.opst-booted {
  background:
    linear-gradient(180deg,
      rgba(5, 9, 16, 0.90) 0%,
      rgba(5, 9, 16, 0.72) 14%,
      rgba(7, 12, 20, 0.55) 34%,
      rgba(7, 12, 20, 0.86) 62%,
      rgba(5, 9, 16, 0.97) 100%),
    radial-gradient(120% 90% at 50% 0%,
      rgba(13, 34, 50, 0.10) 0%,
      rgba(4, 8, 14, 0.68) 100%),
    url('ops-room-bg.webp') center 12% / cover no-repeat,
    #05080e !important;
}

/* ---- S2 // SIGN-ON: first light over the city — go start something ---- */
.opst-deck .ops-panel.ops-joinstart-panel {
  background:
    linear-gradient(180deg,
      rgba(6, 11, 19, 0.94) 0%,
      rgba(6, 11, 19, 0.66) 20%,
      rgba(8, 14, 24, 0.52) 48%,
      rgba(6, 11, 19, 0.95) 100%),
    radial-gradient(130% 100% at 50% 10%,
      rgba(40, 30, 12, 0.10) 0%,
      rgba(4, 8, 14, 0.80) 100%),
    url('ops-signon-bg.webp') center 24% / cover no-repeat,
    #070c14 !important;
}

/* ---- S6 // THE STORY GRAPH: the UNKNOWN OPERATOR — FOMO by design ----
   The villain art carries the panel; his radial-faded face hangs on the
   right like an unresolved signal. Grayscale + red static treatment via the
   tint layer; the medallion breathes with a slow pulse. */
.opst-deck .ops-panel.ops-teaser-panel {
  background:
    linear-gradient(180deg,
      rgba(8, 8, 14, 0.94) 0%,
      rgba(10, 8, 14, 0.62) 22%,
      rgba(12, 8, 14, 0.58) 55%,
      rgba(8, 8, 14, 0.96) 100%),
    radial-gradient(60% 120% at 84% 45%,
      rgba(255, 64, 88, 0.10) 0%,
      rgba(8, 8, 14, 0.10) 45%,
      rgba(4, 6, 12, 0.75) 100%),
    url('ops-unknown-operator.webp') right 3% center / auto 78% no-repeat,
    url('ops-story-bg.webp') center 18% / cover no-repeat,
    #08080e !important;
  animation: opsUnknownPulse 7s ease-in-out infinite;
}
@keyframes opsUnknownPulse {
  0%, 100% { background-color: #08080e; }
  50%      { background-color: #0c0910; }
}
@media (max-width: 900px) {
  .opst-deck .ops-panel.ops-teaser-panel {
    background:
      linear-gradient(180deg, rgba(8,8,14,.94) 0%, rgba(10,8,14,.66) 30%, rgba(8,8,14,.96) 100%),
      url('ops-story-bg.webp') 62% 18% / cover no-repeat,
      #08080e !important; /* medallion off on phones: faces need room */
  }
}

/* ---- S7 // THE VAULT: the antenna graveyard keeps the archive ---- */
.opst-deck .ops-panel.ops-archive-panel {
  background:
    linear-gradient(180deg,
      rgba(5, 9, 16, 0.95) 0%,
      rgba(5, 9, 16, 0.68) 18%,
      rgba(7, 12, 20, 0.55) 45%,
      rgba(5, 9, 16, 0.96) 100%),
    radial-gradient(130% 100% at 50% 6%,
      rgba(13, 30, 46, 0.12) 0%,
      rgba(4, 8, 14, 0.82) 100%),
    url('ops-vault-bg.webp') center 30% / cover no-repeat,
    #060a12 !important;
}


/* ===== CAMPAIGN TREE: every chapter wears its own scene (2026-07-02) =====
   The nine story nodes are slug-addressable via data-node; each carries a
   motif-focused crop of the campaign art (locks for Cold Boot, the corrupted
   ladder for Broken Ladder, the mask for Operator Null...). One shared
   readability gradient keeps kicker, story text and meters crisp; hover lifts
   the veil a touch — lean in and the scene answers. ~48KB avg per node. */
.opst-deck .ops-story-node[data-node="cold_boot"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-cold-boot.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="first_contact"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-first-contact.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="broken_ladder"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-broken-ladder.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="static_storm"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-static-storm.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="relay_graveyard"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-relay-graveyard.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="blackbox"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-blackbox.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="operator_null"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-operator-null.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="last_transmission"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-last-transmission.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node="cold_archive"] {
  background:
    linear-gradient(180deg, rgba(6,10,17,.80) 0%, rgba(6,10,17,.58) 26%, rgba(6,10,17,.74) 58%, rgba(5,8,14,.94) 100%),
    url('ch-cold-archive.webp') center 26% / cover no-repeat,
    #070b13 !important;
}
.opst-deck .ops-story-node[data-node] {
  position: relative;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.opst-deck .ops-story-node[data-node]::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(5, 8, 14, 0.28);
  pointer-events: none;
  transition: opacity .35s ease;
}
.opst-deck .ops-story-node[data-node]:hover::after { opacity: 0; }
.opst-deck .ops-story-node[data-node]:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(87, 216, 255, .10);
}
.opst-deck .ops-story-node[data-node] > * { position: relative; z-index: 1; }


/* ===== THEATER ALIGNMENT + FULL-WIDTH SHELL (2026-07-02) =================
   1) PUZZLE FIT: tier columns previously top-aligned (align-items:start), so
      Tier 3's two nodes towered while neighbours left voids. Now every tier
      stretches to the row height; single-node tiers grow their card, Tier 3
      splits between its two — all bottoms land flush. Card foot pins to the
      card's base so stretched cards stay composed.
   2) WIDTH MATCH: the ops shell capped at 1240px while the homepage runs
      1320px. At >=1400px viewports the shell now matches the homepage, and
      the fixed-grid Command Table room centers itself in the wider shell. */
@media (min-width: 981px) {
  .opst-deck .ops-theater-map { align-items: stretch; }
  .opst-deck .ops-theater-tier { display: flex; flex-direction: column; }
  .opst-deck .ops-theater-tier-nodes { display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .opst-deck .ops-theater-node { flex: 1 1 0; display: flex; flex-direction: column; gap: 7px; }
  .opst-deck .ops-theater-node .ops-theater-node-foot { margin-top: auto; }
}
@media (min-width: 1400px) {
  .ops-page .ops { max-width: 1320px; }
  .ops-page .ops-hero-meta { max-width: 1320px; }
  .opst-room { justify-content: center; }
}


/* ===== EPIC AMBIENT: the war outside the glass (2026-07-02) ===============
   The square grids retire. The whole Operations shell now floats over the
   battle for London — pre-darkened, blurred for depth, vignette baked in —
   fixed-attachment so the war holds still while the deck scrolls past it.
   Every panel keeps its own solid glass, so the art lives in the gutters,
   the hero, and the seams: always present, never in the way. */
.ops-page {
  background:
    radial-gradient(1000px 560px at 10% -6%, rgba(49, 231, 255, 0.10), transparent 62%),
    radial-gradient(900px 540px at 92% 2%, rgba(255, 47, 143, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(4, 5, 10, 0.30) 0%, rgba(5, 8, 14, 0.44) 42%, rgba(3, 5, 9, 0.74) 100%),
    url('ops-ambient-bg.webp') center top / cover no-repeat fixed,
    #04050a !important;
}
.ops-page::before { display: none !important; }        /* both fixed square grids share this pseudo */
@media (max-width: 900px) {
  .ops-page {
    background:
      linear-gradient(180deg, rgba(4, 5, 10, 0.5) 0%, rgba(3, 5, 9, 0.92) 100%),
      url('ops-ambient-bg.webp') center top / cover no-repeat scroll,
      #04050a !important;  /* fixed attachment is unreliable on mobile */
  }
}
/* the deck lets the war whisper through its seams */
.opst-deck {
  background:
    radial-gradient(900px 500px at 14% 4%, rgba(87, 216, 255, 0.06), transparent 60%),
    radial-gradient(760px 460px at 88% 30%, rgba(255, 64, 88, 0.045), transparent 60%),
    radial-gradient(900px 520px at 40% 78%, rgba(87, 216, 255, 0.05), transparent 60%),
    rgba(4, 7, 12, 0.86) !important;
}