/* ═══════════════════════════════════════════════
   CODERUDRA-X COMMAND CENTER · STYLE SHEET v6.0
   Features: Ocean Blend, Canvas HUD, Holographic Modals, 
   Sector Drill-Down & Intel Floating Popups
═══════════════════════════════════════════════ */

:root {
  --hud:#00ff88; --hud-dim:rgba(0,255,136,.2); --hud-glow:rgba(0,255,136,.6);
  --amber:#f0a500; --khaki:#c8a96e; --red:#ff3333; --olive:#3a5020;
  --glass:rgba(3,10,4,.94); --glass2:rgba(4,12,5,.92);
  --border:rgba(0,255,136,.18); --border-lit:rgba(0,255,136,.5);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;
  font-family:'Share Tech Mono',monospace;cursor:crosshair;}

/* ── OVERLAYS ── */
#noise{position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  opacity:.28;mix-blend-mode:overlay;}
#scanlines{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.055) 2px,rgba(0,0,0,.055) 4px);}

/* ═══════════════════════════════════════════════
   BOOT SCREEN & PRELOADER
═══════════════════════════════════════════════ */
#boot{position:fixed;inset:0;z-index:1000;
  background:radial-gradient(ellipse at 50% 40%,#060e06 0%,#000 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1s ease;}
#boot.out{opacity:0;pointer-events:none;}

.b-logo{font-family:'Orbitron',monospace;font-size:clamp(2.2rem,8vw,5.5rem);
  font-weight:900;color:var(--hud);letter-spacing:.3em;text-align:center;
  text-shadow:0 0 40px var(--hud),0 0 80px rgba(0,255,136,.12),0 0 140px rgba(0,255,136,.05);
  animation:glitch 5s infinite;}
.b-mantra{font-family:'Rajdhani',sans-serif;font-size:clamp(.85rem,2.5vw,1.45rem);
  color:var(--amber);letter-spacing:.45em;margin-top:.7rem;opacity:.88;text-align:center;
  text-shadow:0 0 22px rgba(240,165,0,.4);animation:amber-pulse 2.5s ease infinite;}
.b-line{width:clamp(200px,48vw,420px);height:1px;
  background:linear-gradient(90deg,transparent,var(--hud),transparent);
  margin:2rem 0 1.5rem;animation:scanbar 2.2s infinite;}
.b-log{height:5.8em;overflow:hidden;font-size:clamp(.55rem,1.4vw,.72rem);
  color:rgba(0,255,136,.55);text-align:center;line-height:2.2;
  min-width:clamp(280px,55vw,500px);}
.b-log .ln{animation:sup .28s ease both;opacity:0;}

.boot-progress-wrap{position:relative;width:clamp(200px,48vw,420px);height:2px;
  background:rgba(0,255,136,.08);margin-top:1.2rem;overflow:visible;}
.boot-progress-bar{height:100%;width:0;
  background:linear-gradient(90deg,var(--olive),var(--hud));
  box-shadow:0 0 8px var(--hud);transition:width .1s ease;}
.boot-pct{position:absolute;right:0;top:-20px;
  font-size:.55rem;color:var(--hud);letter-spacing:.2em;}

.belt-area{margin-top:2.5rem;display:flex;flex-direction:column;
  align-items:center;gap:.9rem;cursor:pointer;user-select:none;}
.belt-wrap{position:relative;width:clamp(230px,48vw,360px);height:68px;
  border:2px solid var(--khaki);background:linear-gradient(135deg,#110d00,#221800);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 24px rgba(200,169,110,.3),inset 0 0 24px rgba(0,0,0,.6);
  transition:transform .15s,box-shadow .15s;}
.belt-wrap:hover{transform:scale(1.03);box-shadow:0 0 40px rgba(200,169,110,.55);}
.belt-wrap:active{transform:scale(.96);}
.strap{position:absolute;width:38%;height:100%;
  background:repeating-linear-gradient(90deg,#3a2800,#4a3400 5px,#3a2800 10px);
  border:1px solid #6a5020;transition:transform .72s cubic-bezier(.4,0,.2,1);}
.sl{left:0;transform-origin:right center;}
.sr{right:0;transform-origin:left center;}
.belt-wrap.open .sl{transform:translateX(-115%) rotate(-8deg);}
.belt-wrap.open .sr{transform:translateX( 115%) rotate( 8deg);}
.buckle-body{width:68px;height:48px;
  background:linear-gradient(135deg,#7a5c18,#d4a840,#7a5c18);
  border:2px solid #e0b848;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;z-index:2;position:relative;
  box-shadow:0 0 18px rgba(210,160,50,.65),inset 0 1px 0 rgba(255,255,255,.15);}
.buckle-body::after{content:'DEPLOY';position:absolute;bottom:-22px;
  font-size:.52rem;letter-spacing:.35em;color:var(--khaki);}
.tap-hint{font-size:clamp(.52rem,1.3vw,.7rem);
  color:rgba(200,169,110,.5);letter-spacing:.3em;animation:blink 1.5s infinite;}

/* ═══════════════════════════════════════════════
   DROP SCREEN
═══════════════════════════════════════════════ */
#drop{position:fixed;inset:0;z-index:900;display:none;overflow:hidden;}
#drop.on{display:block;}
#drop.shaking{animation:cam-shake .65s ease forwards;}

#sky{position:absolute;inset:0;
  background:linear-gradient(180deg,#000408 0%,#010c18 35%,#030f06 70%,#081404 100%);}
#stars{position:absolute;inset:0;animation:stars-rush 4.5s ease-in forwards;}
.star{position:absolute;border-radius:50%;background:#fff;}
#terrain-rush{position:absolute;bottom:0;left:0;right:0;height:0;
  background:linear-gradient(0deg,#0e1c08,#182808,#202e10);
  animation:terrain-up 4.5s cubic-bezier(.08,0,.45,1) forwards;
  border-top:1px solid rgba(0,255,136,.15);}
#terrain-rush::before{content:'';position:absolute;top:-60px;left:0;right:0;height:60px;
  background:linear-gradient(0deg,rgba(14,28,8,.8),transparent);}
#clouds{position:absolute;inset:0;pointer-events:none;
  animation:clouds-scroll 4.5s linear forwards;}
.cloud{position:absolute;border-radius:50%;}
#speed-lines{position:absolute;inset:0;pointer-events:none;}
.spd{position:absolute;background:linear-gradient(180deg,transparent,rgba(180,220,180,.22),transparent);width:1px;}

#op{position:absolute;left:50%;top:25%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;z-index:10;}
.chute-svg{width:clamp(100px,22vw,160px);
  filter:drop-shadow(0 0 10px rgba(200,169,110,.45));
  animation:chute-open .5s ease .3s both;}
.lines-svg{width:clamp(44px,10vw,68px);margin-top:-2px;}
.op-fig{width:clamp(32px,7vw,52px);height:clamp(32px,7vw,52px);
  background:linear-gradient(135deg,#1e2c10,#3a5020);
  border:2px solid var(--khaki);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(.9rem,2.5vw,1.5rem);
  box-shadow:0 0 18px rgba(200,169,110,.45);margin-top:-2px;
  animation:op-sway 4.5s ease forwards;}

#dhud{position:absolute;inset:0;pointer-events:none;padding:clamp(10px,3vw,20px);}
.drow{display:flex;justify-content:space-between;}
.dblk{font-size:clamp(.46rem,1.25vw,.65rem);color:var(--hud);line-height:2.1;opacity:.82;}
.d-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(64px,14vw,104px);height:clamp(64px,14vw,104px);pointer-events:none;}
.d-cross::before,.d-cross::after{content:'';position:absolute;background:rgba(0,255,136,.38);}
.d-cross::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);}
.d-cross::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%);}
.cring{position:absolute;inset:0;border:1px solid rgba(0,255,136,.22);
  border-radius:50%;animation:cpulse 1s infinite;}
.alt-disp{position:absolute;right:clamp(12px,3vw,24px);top:50%;transform:translateY(-50%);
  font-family:'Orbitron',monospace;font-size:clamp(1.3rem,4.5vw,2.4rem);
  color:var(--amber);text-align:right;
  text-shadow:0 0 20px rgba(240,165,0,.5);line-height:1.2;}
.alt-disp small{font-size:.4em;color:var(--khaki);display:block;letter-spacing:.2em;}
#lflash{position:absolute;inset:0;background:rgba(140,220,100,.2);
  opacity:0;pointer-events:none;}
#lflash.fire{animation:lflash .5s ease forwards;}

/* ═══════════════════════════════════════════════
   LEAFLET OVERRIDES
═══════════════════════════════════════════════ */
.leaflet-container {
  background: radial-gradient(ellipse at center, #05131a 0%, #010609 100%) !important;
  cursor: crosshair !important;
}
.leaflet-control-attribution, .leaflet-control-zoom { display:none !important; }
.leaflet-grab { cursor:crosshair !important; }
.leaflet-dragging, .leaflet-dragging .leaflet-grab { cursor:grabbing !important; }

/* ═══════════════════════════════════════════════
   RADAR MARKERS
═══════════════════════════════════════════════ */
.radar-wrap{position:relative;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.radar-core{width:10px;height:10px;border-radius:50%;background:var(--hud);z-index:3;
  box-shadow:0 0 8px var(--hud),0 0 16px rgba(0,255,136,.5),0 0 30px rgba(0,255,136,.2);
  transition:transform .2s,box-shadow .2s;}
.radar-wrap:hover .radar-core{transform:scale(1.6);
  box-shadow:0 0 14px var(--hud),0 0 28px rgba(0,255,136,.8),0 0 50px rgba(0,255,136,.3);}
.rring{position:absolute;border-radius:50%;border:1.5px solid var(--hud);
  animation:radar-pulse 2.4s ease-out infinite;opacity:0;}
.rr1{width:20px;height:20px;}
.rr2{width:34px;height:34px;animation-delay:.7s;}
.rr3{width:50px;height:50px;animation-delay:1.4s;}

.radar-wrap.amber .radar-core{background:var(--amber);
  box-shadow:0 0 8px var(--amber),0 0 16px rgba(240,165,0,.4);}
.radar-wrap.amber .rring{border-color:var(--amber);}
.radar-wrap.amber:hover .radar-core{box-shadow:0 0 14px var(--amber),0 0 28px rgba(240,165,0,.7);}
.radar-wrap.amber .m-label{color:rgba(240,165,0,.85);border-color:rgba(240,165,0,.25);}

.radar-wrap.citadel .radar-core{width:16px;height:16px;
  box-shadow:0 0 14px var(--hud),0 0 28px rgba(0,255,136,.7),0 0 50px rgba(0,255,136,.3);}
.radar-wrap.citadel .rring{border-width:2px;}

.m-label{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  font-size:.5rem;color:rgba(0,255,136,.8);letter-spacing:.15em;
  background:rgba(0,0,0,.72);padding:2px 8px;white-space:nowrap;pointer-events:none;
  border:1px solid rgba(0,255,136,.2);backdrop-filter:blur(6px);
  transition:all .2s;}
.radar-wrap:hover .m-label{color:var(--hud);border-color:rgba(0,255,136,.5);
  background:rgba(0,20,5,.9);box-shadow:0 0 10px rgba(0,255,136,.2);}

/* ═══════════════════════════════════════════════
   MAP SCREEN LAYOUT & GLOBAL UI
═══════════════════════════════════════════════ */
#port{position:fixed;inset:0;z-index:800;display:none;}
#port.on{display:block;animation:maprev .9s ease both;}
#map{position:absolute;inset:0;width:100%;height:100%;}

/* HUD Canvas (hex grid + mission lines) */
#hud-canvas{position:absolute;inset:0;z-index:400;pointer-events:none;width:100%;height:100%;}

/* Scan sweep line */
#scan-line{position:absolute;left:0;right:0;height:2px;z-index:420;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(0,255,136,.3) 20%,rgba(0,255,136,.5) 50%,rgba(0,255,136,.3) 80%,transparent 100%);
  box-shadow:0 0 12px rgba(0,255,136,.25),0 0 24px rgba(0,255,136,.1);
  animation:scan-sweep 14s ease-in-out infinite;}

/* HUD Corners */
.hud-corner{position:absolute;z-index:550;pointer-events:none;
  width:24px;height:24px;border-color:rgba(0,255,136,.45);border-style:solid;}
.hud-tl{top:clamp(46px,8vw,60px);left:0;border-width:2px 0 0 2px;}
.hud-tr{top:clamp(46px,8vw,60px);right:0;border-width:2px 2px 0 0;}
.hud-bl{bottom:clamp(38px,7vw,52px);left:0;border-width:0 0 2px 2px;}
.hud-br{bottom:clamp(38px,7vw,52px);right:0;border-width:0 2px 2px 0;}
.hc-data{position:absolute;font-size:clamp(.4rem,1vw,.52rem);color:rgba(0,255,136,.45);
  letter-spacing:.15em;white-space:nowrap;}
.hud-tl .hc-data{top:4px;left:28px;}
.hud-tr .hc-data{top:4px;right:28px;}
.hud-bl .hc-data{bottom:4px;left:28px;}
.hud-br .hc-data{bottom:4px;right:28px;}

/* Coords */
#map-coords{position:absolute;bottom:clamp(60px,10vw,76px);left:clamp(10px,2.5vw,18px);
  z-index:550;pointer-events:none;
  font-size:clamp(.44rem,1.1vw,.58rem);color:rgba(0,255,136,.38);line-height:1.9;}

/* Top Bar */
#topbar{position:absolute;top:0;left:0;right:0;z-index:600;
  height:clamp(46px,8vw,60px);
  background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,transparent 100%);
  border-bottom:1px solid rgba(0,255,136,.1);
  display:flex;align-items:center;padding:0 clamp(12px,3vw,24px);pointer-events:none;}
.t-name{font-family:'Orbitron',monospace;font-size:clamp(.8rem,2.5vw,1.25rem);
  font-weight:900;color:var(--hud);letter-spacing:.2em;
  text-shadow:0 0 14px rgba(0,255,136,.55);}
.t-sep{color:rgba(0,255,136,.3);margin:0 clamp(6px,1.5vw,12px);}
.t-sub{font-family:'Rajdhani',sans-serif;font-size:clamp(.48rem,1.4vw,.76rem);
  color:var(--khaki);letter-spacing:.22em;opacity:.78;}
@media(max-width:580px){.t-sub{display:none;}}
.t-right{margin-left:auto;display:flex;align-items:center;gap:10px;pointer-events:all;}
.mission-count{display:flex;align-items:baseline;gap:4px;}
.mc-num{font-family:'Orbitron',monospace;font-size:1.1rem;color:var(--hud);
  text-shadow:0 0 10px rgba(0,255,136,.5);}
.mc-lbl{font-size:.5rem;color:rgba(0,255,136,.5);letter-spacing:.2em;}
.t-badge{font-size:clamp(.44rem,1.1vw,.6rem);color:var(--hud);
  border:1px solid rgba(0,255,136,.35);padding:3px 9px;letter-spacing:.2em;
  animation:blink 2s infinite;}

/* Radar sweep */
#radar-sweep{position:absolute;top:clamp(52px,9vw,66px);right:clamp(10px,2.5vw,18px);
  z-index:550;pointer-events:none;
  width:clamp(44px,7vw,62px);height:clamp(44px,7vw,62px);}

/* Threat indicator */
#threat-level{position:absolute;top:clamp(120px,18vw,150px);right:clamp(10px,2.5vw,18px);
  z-index:550;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;}
.tl-label,.tl-val{font-size:clamp(.4rem,.9vw,.52rem);color:rgba(240,165,0,.6);letter-spacing:.2em;}
.tl-bars{display:flex;gap:2px;align-items:flex-end;}
.tl-bar{width:4px;height:8px;background:rgba(255,255,255,.1);transition:background .3s;}
.tl-bar:nth-child(1){height:6px;} .tl-bar:nth-child(2){height:9px;} .tl-bar:nth-child(3){height:12px;}
.tl-bar:nth-child(4){height:9px;} .tl-bar:nth-child(5){height:6px;}
.tl-bar.active{background:var(--amber);box-shadow:0 0 6px rgba(240,165,0,.5);}

/* Ticker */
#ticker-wrap{position:absolute;bottom:clamp(38px,7vw,52px);left:0;right:0;
  height:20px;z-index:510;pointer-events:none;
  background:rgba(0,0,0,.55);overflow:hidden;
  border-top:1px solid rgba(0,255,136,.1);
  border-bottom:1px solid rgba(0,255,136,.08);
  display:flex;align-items:center;}
.ticker-label{font-size:.48rem;color:var(--amber);letter-spacing:.2em;
  padding:0 10px;border-right:1px solid rgba(240,165,0,.3);
  white-space:nowrap;flex-shrink:0;}
.ticker-content{font-size:.48rem;color:rgba(0,255,136,.6);letter-spacing:.14em;
  white-space:nowrap;will-change:transform;}

/* Bottom Nav */
#botnav{position:absolute;bottom:0;left:0;right:0;z-index:600;
  height:clamp(38px,7vw,52px);
  background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,transparent 100%);
  border-top:1px solid rgba(0,255,136,.08);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(5px,2vw,16px);}
.nbtn{font-size:clamp(.44rem,1.2vw,.6rem);color:rgba(200,169,110,.62);
  letter-spacing:.2em;cursor:pointer;padding:4px 10px;
  border:1px solid transparent;transition:all .25s;text-decoration:none;
  font-family:'Share Tech Mono',monospace;}
.nbtn:hover,.nbtn.lit{color:var(--hud);border-color:rgba(0,255,136,.28);
  text-shadow:0 0 10px rgba(0,255,136,.45);background:rgba(0,255,136,.04);}

#zoom-lvl{cursor:default;}

/* Targeting Reticle */
#reticle-container{position:absolute;inset:0;z-index:650;pointer-events:none;}
.t-reticle{position:absolute;pointer-events:none;transform:translate(-50%,-50%);}
.t-reticle .tr-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid var(--hud);}
.t-reticle .tr-r1{width:60px;height:60px;
  animation:tr-contract .5s cubic-bezier(.4,0,.2,1) forwards;}
.t-reticle .tr-r2{width:90px;height:90px;
  animation:tr-contract .5s cubic-bezier(.4,0,.2,1) .08s forwards;opacity:.5;}
.t-reticle .tr-cross-h,.t-reticle .tr-cross-v{
  position:absolute;background:rgba(0,255,136,.6);}
.t-reticle .tr-cross-h{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}
.t-reticle .tr-cross-v{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
.t-reticle .tr-c{position:absolute;width:12px;height:12px;
  border-color:var(--hud);border-style:solid;}
.t-reticle .tr-tl{top:-30px;left:-30px;border-width:2px 0 0 2px;}
.t-reticle .tr-tr{top:-30px;right:-30px;border-width:2px 2px 0 0;}
.t-reticle .tr-bl{bottom:-30px;left:-30px;border-width:0 0 2px 2px;}
.t-reticle .tr-br{bottom:-30px;right:-30px;border-width:0 2px 2px 0;}
.t-reticle.amber .tr-ring{border-color:var(--amber);}
.t-reticle.amber .tr-cross-h,.t-reticle.amber .tr-cross-v{background:rgba(240,165,0,.6);}
.t-reticle.amber .tr-c{border-color:var(--amber);}

/* Tooltip */
#tip{position:fixed;z-index:800;
  background:rgba(2,8,3,.95);border:1px solid rgba(0,255,136,.32);
  padding:5px 13px;font-size:clamp(.48rem,1.2vw,.62rem);
  color:var(--hud);letter-spacing:.18em;
  pointer-events:none;opacity:0;transition:opacity .15s;
  backdrop-filter:blur(8px);white-space:nowrap;}
#tip.show{opacity:1;}

/* ═══════════════════════════════════════════════
   HOLOGRAPHIC MODALS (Replaces old Panels)
═══════════════════════════════════════════════ */
.h-modal {
  position:fixed; inset:0; z-index:850; display:none;
  align-items:center; justify-content:center; pointer-events:none;
}
.h-modal.open { display:flex; pointer-events:all; }
.hm-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.75);
  backdrop-filter:blur(4px); animation:backdrop-in .3s ease forwards; cursor:pointer;
}
.hm-content {
  position:relative; z-index:1; width:min(860px, 92vw); max-height:85vh;
  background:var(--glass); backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--border-lit); padding:clamp(20px,4vw,30px);
  overflow-y:auto; animation:modal-in .4s cubic-bezier(.4,0,.2,1) both;
  display:flex; flex-direction:column;
  box-shadow: 0 0 40px rgba(0,255,136,.1);
}
.hm-wide { width:min(1000px, 96vw); }
.hm-narrow { width:min(600px, 90vw); }
.hm-content::-webkit-scrollbar { width:2px; }
.hm-content::-webkit-scrollbar-thumb { background:var(--hud); }

.hm-corner {
  position:absolute; width:20px; height:20px;
  border-color:var(--hud); border-style:solid; z-index:5;
}
.hm-tl { top:0; left:0; border-width:2px 0 0 2px; }
.hm-tr { top:0; right:0; border-width:2px 2px 0 0; }
.hm-bl { bottom:0; left:0; border-width:0 0 2px 2px; }
.hm-br { bottom:0; right:0; border-width:0 2px 2px 0; }

.p-close{position:absolute;top:15px;right:15px;
  width:30px;height:30px;border:1px solid rgba(200,169,110,.32);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--khaki);font-size:.88rem;transition:all .2s;z-index:10;}
.p-close:hover{background:rgba(200,169,110,.12);color:#fff;
  border-color:var(--khaki);box-shadow:0 0 10px rgba(200,169,110,.3);}

.ptag{font-size:.52rem;color:var(--amber);letter-spacing:.42em;margin-bottom:5px;opacity:.85;}
.ptitle{font-family:'Orbitron',monospace;font-size:clamp(1.1rem,2.5vw,1.6rem);
  font-weight:700;color:var(--hud);
  text-shadow:0 0 15px rgba(0,255,136,.4);
  margin-bottom:12px;line-height:1.3;}
.pdiv{width:100%;height:1px;
  background:linear-gradient(90deg,rgba(0,255,136,.4),transparent);
  margin:15px 0;}
.pbody{font-family:'Rajdhani',sans-serif;font-size:clamp(.75rem,2vw,.95rem);
  color:rgba(200,225,185,.85);line-height:1.85;}

/* Mission Modal Split Layout */
.mm-split { display: flex; gap: clamp(15px, 3vw, 25px); flex-wrap: wrap; }
.mm-left { flex: 1.5; min-width: 250px; }
.mm-right { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.mm-right-visual {
  border:1px solid rgba(0,255,136,.15);background:rgba(0,0,0,.4);
  flex:1;display:flex;align-items:center;justify-content:center;min-height:150px;
  position:relative;overflow:hidden;
}
.mm-right-visual::before {
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 18px,rgba(0,255,136,.03) 18px,rgba(0,255,136,.03) 19px),
  repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(0,255,136,.03) 18px,rgba(0,255,136,.03) 19px);
}
.mm-vis-label { font-size:.52rem;color:rgba(0,255,136,.35);letter-spacing:.25em;text-align:center;z-index:1; }
.mm-sector-preview { width:100%; height:100%; object-fit:cover; opacity:.7; z-index:1; }

/* Mission Stats & Tech Stack */
.srow{display:flex;gap:10px;margin:15px 0;flex-wrap:wrap;}
.mm-stat{flex:1;min-width:80px;border:1px solid var(--border);padding:10px;
  text-align:center;background:rgba(0,255,136,.03);position:relative;overflow:hidden;}
.mm-stat::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,255,136,.05),transparent);opacity:0;transition:opacity .3s;}
.mm-stat:hover::before{opacity:1;}
.mm-stat .v{font-family:'Orbitron',monospace;font-size:clamp(1rem,3vw,1.4rem);
  color:var(--amber);display:block;}
.mm-stat .l{font-size:.5rem;color:rgba(200,169,110,.5);letter-spacing:.18em;}

.mm-ttag{display:inline-block;font-size:clamp(.48rem,1.2vw,.6rem);color:var(--hud);
  border:1px solid rgba(0,255,136,.25);padding:4px 10px;margin:3px;letter-spacing:.1em;
  background:rgba(0,255,136,.05);animation:tag-pop .3s cubic-bezier(.34,1.56,.64,1) both;}

.mst{display:inline-block;font-size:.6rem;padding:4px 12px;letter-spacing:.25em;margin-top:5px; margin-bottom: 10px;}
.act{color:#00ff88;border:1px solid #00ff88;background:rgba(0,255,136,.06);}
.cmp{color:var(--amber);border:1px solid var(--amber);background:rgba(240,165,0,.06);}
.cls{color:var(--red);border:1px solid var(--red);background:rgba(255,51,51,.06);}

.deploy-btn {
  display:inline-flex; align-items:center; gap:8px; 
  background:rgba(0,255,136,.1); border:1px solid var(--hud); 
  color:var(--hud); padding:10px 20px; font-family:'Share Tech Mono'; 
  cursor:pointer; letter-spacing:.2em; margin-top:20px; 
  transition:all .2s; align-self:flex-start; font-size: 0.7rem;
}
.deploy-btn:hover { background:var(--hud); color:#000; box-shadow:0 0 20px var(--hud); }
.deploy-btn.hidden { display: none !important; }

/* Dossier specifics */
.pring{width:clamp(62px,13vw,88px);height:clamp(62px,13vw,88px);border-radius:50%;
  border:2px solid var(--khaki);background:linear-gradient(135deg,#1e2c10,#3a5020);
  display:flex;align-items:center;justify-content:center;font-size:clamp(1.7rem,4.5vw,2.7rem);
  margin-bottom:14px;box-shadow:0 0 20px rgba(200,169,110,.28);animation:gring 3s ease infinite;}
.tagline-quote{font-family:'Rajdhani',sans-serif;font-style:italic;
  font-size:clamp(.7rem,1.8vw,.9rem);color:rgba(200,210,170,.7);
  border-left:2px solid var(--amber);padding-left:12px;margin:10px 0;line-height:1.6;}

.skr{margin:10px 0;}
.skl{display:flex;justify-content:space-between;
  font-size:clamp(.55rem,1.4vw,.68rem);color:var(--khaki);margin-bottom:5px;}
.skt{height:4px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;}
.skf{height:100%;background:linear-gradient(90deg,var(--olive),var(--hud));
  transform:scaleX(0);transform-origin:left;animation:barf .9s ease forwards;}
.skt::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(0,255,136,.12) 100%);}

/* Intel Grid specifics */
.intel-grid{display:flex;gap:clamp(12px,2.5vw,20px);flex-wrap:wrap;}
.icard{flex:1;min-width:clamp(140px,25vw,180px);border:1px solid rgba(0,255,136,.15);
  padding:clamp(12px,2.5vw,18px);background:rgba(0,255,136,.03);
  cursor:pointer;transition:all .22s;text-decoration:none;display:block;position:relative;overflow:hidden;}
.icard::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,255,136,.06),transparent);
  opacity:0;transition:opacity .22s;}
.icard:hover{border-color:var(--hud);transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,255,136,.15);}
.icard:hover::before{opacity:1;}
.ii{font-size:1.6rem;margin-bottom:8px;}
.in{font-size:clamp(.6rem,1.4vw,.75rem);color:var(--hud);letter-spacing:.18em;display:block;}
.id2{font-size:clamp(.5rem,1.1vw,.62rem);color:rgba(200,169,110,.6);letter-spacing:.1em;
  display:block;margin-top:4px;}
.id3{font-size:clamp(.46rem,1vw,.58rem);color:rgba(0,255,136,.4);
  letter-spacing:.08em;display:block;margin-top:4px;}

/* ═══════════════════════════════════════════════
   SECTOR DRILL-DOWN SCREEN
═══════════════════════════════════════════════ */
#sector-screen { position:fixed; inset:0; z-index:900; background:#000; display:none; }
#sector-screen.on { display:block; animation:sector-in .5s ease forwards; }

#sector-topbar {
  position:absolute; top:0; left:0; right:0; z-index:600;
  height:clamp(46px,8vw,60px);
  background:linear-gradient(180deg,rgba(0,0,0,.95),transparent);
  border-bottom:1px solid rgba(0,255,136,.12);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,3vw,24px);
}
.st-status { font-size:.5rem; color:var(--hud); letter-spacing:.3em; animation:blink 1.5s infinite; }
.st-name {
  font-family:'Orbitron',monospace; font-size:clamp(.85rem,2.5vw,1.2rem);
  font-weight:900; color:var(--hud); letter-spacing:.25em;
  text-shadow:0 0 14px rgba(0,255,136,.5);
}
.st-clearance { font-size:.48rem; color:rgba(0,255,136,.45); letter-spacing:.25em; }

#sector-rtb {
  position:absolute; top:70px; left:20px; z-index:950;
  background:rgba(0,0,0,.7); border:1px solid var(--hud);
  color:var(--hud); padding:8px 16px; cursor:pointer;
  font-family:'Share Tech Mono'; backdrop-filter:blur(4px);
  transition:all .2s; font-size: 0.6rem; letter-spacing: .2em;
}
#sector-rtb:hover {
  background:rgba(0,255,136,.2); box-shadow:0 0 15px rgba(0,255,136,.4);
}
.rtb-arrow { font-size:1rem; margin-right: 5px; }

#sector-map { position:absolute; inset:0; width:100%; height:100%; }
#sector-canvas { position:absolute; inset:0; z-index:400; pointer-events:none; width:100%; height:100%; }

/* Sector markers */
.sz-wrap {
  position:relative; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sz-core {
  width:8px; height:8px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 8px var(--amber),0 0 16px rgba(240,165,0,.4); z-index:3;
  transition: transform .2s;
}
.sz-ring {
  position:absolute; border-radius:50%; border:1.5px solid var(--amber);
  animation:radar-pulse 2.4s ease-out infinite; opacity:0;
}
.sz-r1 { width:18px; height:18px; }
.sz-r2 { width:30px; height:30px; animation-delay:.8s; }
.sz-label {
  position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
  font-size:.46rem; color:rgba(240,165,0,.8); letter-spacing:.12em;
  background:rgba(0,0,0,.75); padding:3px 8px; white-space:nowrap; pointer-events:none;
  border:1px solid rgba(240,165,0,.2); transition:all .2s;
}
.sz-wrap:hover .sz-core { transform:scale(1.8); }
.sz-wrap:hover .sz-label { color:var(--amber); border-color:rgba(240,165,0,.5); }

/* Sector popup (info card within sector map) */
#sector-popup {
  position:absolute; z-index:700; width:clamp(240px,35vw,360px);
  background:var(--glass); backdrop-filter:blur(20px);
  border:1px solid rgba(240,165,0,.3); border-left:2px solid var(--amber);
  padding:clamp(12px,2.5vw,18px); display:none; pointer-events:all;
  box-shadow:-2px 0 20px rgba(240,165,0,.1);
}
#sector-popup.show { display:block; animation:modal-in .3s ease both; }
.sp-close {
  position:absolute; top:8px; right:8px; width:22px; height:22px;
  border:1px solid rgba(240,165,0,.3); display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--amber); font-size:.7rem; transition:all .2s;
}
.sp-close:hover { background:rgba(240,165,0,.15); }
.sp-tag { font-size:.46rem; color:var(--amber); letter-spacing:.35em; margin-bottom:6px; }
.sp-title {
  font-family:'Orbitron',monospace; font-size:clamp(.72rem,2vw,.9rem);
  font-weight:700; color:var(--hud); margin-bottom:8px; line-height:1.3;
}
.sp-divider { width:100%; height:1px; background:linear-gradient(90deg,var(--amber),transparent); margin:8px 0; }
.sp-body {
  font-family:'Rajdhani',sans-serif; font-size:clamp(.68rem,1.7vw,.85rem);
  color:rgba(200,220,185,.82); line-height:1.75; margin-top: 10px;
}

/* ═══════════════════════════════════════════════
   ALL ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes glitch{
  0%,92%,100%{text-shadow:0 0 40px var(--hud),0 0 80px rgba(0,255,136,.12);transform:none;}
  93%{text-shadow:5px 0 #f00,-5px 0 #0ff;transform:skewX(7deg);}
  95%{text-shadow:-5px 0 #f00,5px 0 #0ff;transform:skewX(-7deg);}
  97%{text-shadow:0 0 40px var(--hud);transform:none;}
}
@keyframes amber-pulse{0%,100%{opacity:.88}50%{opacity:.45}}
@keyframes blink{0%,100%{opacity:.85}50%{opacity:.18}}
@keyframes scanbar{0%{opacity:.3;transform:scaleX(.2)}50%{opacity:1;transform:scaleX(1)}100%{opacity:.3;transform:scaleX(.2)}}
@keyframes sup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes terrain-up{0%{height:0}100%{height:68%}}
@keyframes stars-rush{0%{transform:scale(1);opacity:1}100%{transform:scale(3.5);opacity:.04}}
@keyframes clouds-scroll{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-45%) scale(1.35);opacity:.06}}
@keyframes chute-open{from{transform:scaleY(0);transform-origin:bottom;opacity:0}60%{transform:scaleY(1.1)}to{transform:scaleY(1);opacity:1}}
@keyframes op-sway{0%{transform:translateX(0)}18%{transform:translateX(9px)}36%{transform:translateX(-9px)}54%{transform:translateX(5px)}72%{transform:translateX(-4px)}100%{transform:translateX(0)}}
@keyframes lflash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes cpulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.18);opacity:.8}}
@keyframes cam-shake{0%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-10px,6px) rotate(-.5deg)}16%{transform:translate(10px,-7px) rotate(.5deg)}24%{transform:translate(-8px,8px) rotate(-.4deg)}32%{transform:translate(9px,-5px) rotate(.35deg)}40%{transform:translate(-6px,6px) rotate(-.25deg)}50%{transform:translate(7px,-6px) rotate(.3deg)}60%{transform:translate(-5px,5px) rotate(-.2deg)}70%{transform:translate(5px,-4px) rotate(.15deg)}80%{transform:translate(-3px,3px) rotate(-.1deg)}90%{transform:translate(2px,-2px) rotate(0)}}

/* Map */
@keyframes radar-pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes maprev{from{opacity:0;filter:brightness(.1) saturate(0) blur(4px)}to{opacity:1;filter:brightness(1) saturate(1) blur(0)}}
@keyframes barf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gring{0%,100%{box-shadow:0 0 18px rgba(200,169,110,.25)}50%{box-shadow:0 0 32px rgba(200,169,110,.55)}}
@keyframes sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes scan-sweep{0%{top:0%;opacity:0}3%{opacity:1}97%{opacity:1}100%{top:100%;opacity:0}}

/* Reticle */
@keyframes tr-contract{from{transform:translate(-50%,-50%) scale(2.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* Modal & Sector Animations */
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes tag-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes sector-in{from{opacity:0;filter:brightness(.2)}50%{filter:brightness(.7)}to{opacity:1;filter:brightness(1)}}