/* ═══════════════════════════════════════════════════════════
   YOUOOO INTEL v5 — Global Operations Center
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --bg:      #020509;
  --bg2:     #060d1a;
  --panel:   rgba(4, 9, 20, 0.97);
  --border:  rgba(0,200,255,0.12);
  --border2: rgba(0,200,255,0.25);
  --blue:    #00c8ff;
  --green:   #00ff88;
  --red:     #ff2244;
  --orange:  #ff7700;
  --yellow:  #ffd700;
  --purple:  #aa55ff;
  --cyan:    #00ffd5;
  --text:    #b0cce8;
  --dim:     #3a5570;
  --bright:  #e8f4ff;
  --mono:    'Space Mono', monospace;
  --display: 'Orbitron', monospace;
  --hh: 52px;
  --fh: 34px;
  --lw: 220px;
  --rw: 280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-thumb{background:var(--border2)}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--mono)}

/* ═══════════════════════════════════════════════════════════
   BOOT SEQUENCE
   ═══════════════════════════════════════════════════════════ */
.boot {
  position:fixed;inset:0;z-index:9999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  transition:opacity 0.8s ease, visibility 0.8s ease;
}
.boot.gone{opacity:0;visibility:hidden;pointer-events:none}

.boot-inner{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:min(560px,90vw);
}

.boot-logo{
  font-family:var(--display);
  font-size:clamp(2rem,6vw,3.5rem);
  font-weight:900;
  letter-spacing:0.3em;
  color:var(--blue);
  text-shadow:0 0 30px rgba(0,200,255,0.7),0 0 80px rgba(0,200,255,0.3);
  animation:logo-flicker 0.15s ease infinite alternate;
}
.boot-logo span{color:var(--green);margin-left:6px}

@keyframes logo-flicker{
  from{text-shadow:0 0 30px rgba(0,200,255,0.7),0 0 80px rgba(0,200,255,0.3)}
  to  {text-shadow:0 0 20px rgba(0,200,255,0.5),0 0 60px rgba(0,200,255,0.15)}
}

.boot-tagline{
  font-family:var(--display);font-size:0.6rem;letter-spacing:0.4em;
  color:var(--dim);
}

.boot-sep{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);margin:4px 0}

.boot-lines{
  width:100%;height:120px;overflow:hidden;
  font-size:0.7rem;color:var(--blue);opacity:0.8;
  display:flex;flex-direction:column;gap:3px;
}

.boot-bar-wrap{
  width:100%;height:3px;background:rgba(0,200,255,0.1);border-radius:2px;overflow:hidden;
}
.boot-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--green));
  border-radius:2px;
  box-shadow:0 0 12px var(--blue);
  transition:width 0.15s ease;
}

.boot-corner{position:absolute;width:20px;height:20px}
.boot-corner.tl{top:20px;left:20px;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
.boot-corner.tr{top:20px;right:20px;border-top:2px solid var(--blue);border-right:2px solid var(--blue)}
.boot-corner.bl{bottom:20px;left:20px;border-bottom:2px solid var(--blue);border-left:2px solid var(--blue)}
.boot-corner.br{bottom:20px;right:20px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)}

/* ═══════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════ */
.toasts{
  position:fixed;top:62px;right:14px;z-index:8000;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}

.toast{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;
  border-radius:4px;border:1px solid var(--border2);
  background:rgba(4,9,20,0.98);
  backdrop-filter:blur(12px);
  font-size:0.75rem;
  min-width:240px;max-width:340px;
  animation:toast-in 0.3s ease forwards;
  pointer-events:all;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
}
.toast.leaving{animation:toast-out 0.4s ease forwards}
.toast-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.toast-body{}
.toast-title{font-weight:700;color:var(--bright);margin-bottom:2px}
.toast-msg{color:var(--text);line-height:1.4}
.toast-quake{border-left:3px solid var(--red)}
.toast-fire  {border-left:3px solid var(--orange)}
.toast-storm {border-left:3px solid var(--purple)}
.toast-info  {border-left:3px solid var(--blue)}

@keyframes toast-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}

/* ═══════════════════════════════════════════════════════════
   KEYBOARD HINT + SOUND BTN
   ═══════════════════════════════════════════════════════════ */
.kbd-hint{
  position:fixed;bottom:44px;left:50%;transform:translateX(-50%);
  z-index:7000;
  display:flex;gap:14px;
  font-size:0.62rem;color:var(--dim);
  background:rgba(2,5,12,0.9);
  border:1px solid var(--border);border-radius:4px;
  padding:5px 14px;
  pointer-events:none;
  transition:opacity 0.4s;
}
.kbd-hint span{display:flex;align-items:center;gap:4px}
.kbd-hint.hidden{opacity:0}

.sound-btn{
  position:fixed;bottom:44px;right:14px;z-index:7000;
  background:rgba(4,9,20,0.9);border:1px solid var(--border2);
  border-radius:4px;padding:4px 10px;font-size:0.85rem;
  color:var(--text);cursor:pointer;
  transition:border-color 0.2s;
}
.sound-btn:hover{border-color:var(--blue)}
.sound-btn.on{border-color:var(--green);color:var(--green)}

/* ═══════════════════════════════════════════════════════════
   HUD SHELL
   ═══════════════════════════════════════════════════════════ */
.hud{
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
  background-image:
    radial-gradient(circle,rgba(0,200,255,0.04) 1px,transparent 1px),
    radial-gradient(ellipse at 20% 0%,rgba(0,80,160,0.07) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 100%,rgba(0,60,120,0.07) 0%,transparent 55%);
  background-size:28px 28px,100% 100%,100% 100%;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.hud-hdr{
  height:var(--hh);flex-shrink:0;
  display:flex;align-items:center;gap:16px;padding:0 16px;
  border-bottom:1px solid var(--border2);
  background:rgba(2,5,12,0.99);
  position:relative;z-index:1000;
  flex-wrap:nowrap;
}
.hud-hdr::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0.4;
}

.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand-w{
  font-family:var(--display);font-size:1.4rem;font-weight:900;letter-spacing:0.2em;
  color:var(--blue);text-shadow:0 0 22px rgba(0,200,255,0.5);
}
.brand-sep{color:var(--dim);font-size:0.9rem}
.brand-s{font-family:var(--display);font-size:0.56rem;letter-spacing:0.28em;color:var(--dim);padding-top:2px}

/* clocks */
.clocks{display:flex;gap:2px;flex-shrink:0}
.ck{
  display:flex;flex-direction:column;align-items:center;
  padding:3px 10px;border:1px solid var(--border);border-radius:3px;
  background:rgba(0,200,255,0.025);
}
.ck-z{font-size:0.54rem;letter-spacing:0.14em;color:var(--dim);font-family:var(--display)}
.ck-t{font-size:0.84rem;font-weight:700;color:var(--blue);letter-spacing:0.06em;font-variant-numeric:tabular-nums}

/* header stats */
.hdr-stats{display:flex;gap:2px;flex-shrink:0}
.hstat{
  display:flex;flex-direction:column;align-items:center;
  padding:3px 10px;border:1px solid var(--border);border-radius:3px;
  min-width:60px;
}
.hstat-l{font-size:0.52rem;letter-spacing:0.12em;color:var(--dim);font-family:var(--display)}
.hstat-v{font-size:1rem;font-weight:800;line-height:1.2}
.hstat-v.red{color:var(--red)}
.hstat-v.orange{color:var(--orange)}
.hstat-v.yellow{color:var(--yellow)}
.hstat-v.cyan{color:var(--cyan)}

/* right */
.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:auto;flex-shrink:0}
.online-pill{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:0.6rem;letter-spacing:0.18em;color:var(--green)}
.blink-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:bpulse 1.4s ease-in-out infinite}
@keyframes bpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.3;transform:scale(0.7)}}
.sync-lbl{font-size:0.58rem;color:var(--dim);letter-spacing:0.1em}

/* ═══════════════════════════════════════════════════════════
   MAIN GRID
   ═══════════════════════════════════════════════════════════ */
.hud-main{
  flex:1;display:grid;
  grid-template-columns:var(--lw) 1fr var(--rw);
  overflow:hidden;min-height:0;
}

.col{display:flex;flex-direction:column;gap:5px;padding:6px;overflow:hidden}
.col-l{border-right:1px solid var(--border);background:rgba(2,5,12,0.75)}
.col-r{border-left:1px solid var(--border);background:rgba(2,5,12,0.75)}
.col-c{padding:0;position:relative;overflow:hidden}

/* ═══════════════════════════════════════════════════════════
   PANELS
   ═══════════════════════════════════════════════════════════ */
.panel{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:3px;
  background:var(--panel);flex-shrink:0;overflow:hidden;
  position:relative;
}
.panel::before,.panel::after{
  content:'';position:absolute;width:8px;height:8px;z-index:2;pointer-events:none;
}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
.panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)}
.panel-grow{flex:1;min-height:0;overflow:hidden}

/* panel header */
.ph{
  display:flex;align-items:center;gap:6px;padding:6px 10px;
  border-bottom:1px solid var(--border);
  background:rgba(0,200,255,0.025);flex-shrink:0;
  font-family:var(--display);font-size:0.58rem;font-weight:700;
  letter-spacing:0.18em;color:var(--blue);
}
.pd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pd.red   {background:var(--red);  box-shadow:0 0 6px var(--red)}
.pd.orange{background:var(--orange);box-shadow:0 0 6px var(--orange)}
.pd.yellow{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.pd.green {background:var(--green); box-shadow:0 0 6px var(--green)}
.pd.blue  {background:var(--blue);  box-shadow:0 0 6px var(--blue)}
.pd.purple{background:var(--purple);box-shadow:0 0 6px var(--purple)}
.pd.cyan  {background:var(--cyan);  box-shadow:0 0 6px var(--cyan)}

.pbadge{
  margin-left:auto;font-family:var(--display);
  font-size:0.68rem;font-weight:700;color:var(--blue);
}
.live-badge{
  color:var(--red);animation:lblink 1s step-end infinite;
}
@keyframes lblink{0%,100%{opacity:1}50%{opacity:0}}

/* panel body */
.pb{padding:7px 9px;font-size:0.76rem;line-height:1.5;flex:1}
.panel-scroll{overflow-y:auto;min-height:0}
.scan{color:var(--blue);font-size:0.7rem;opacity:0.7;animation:cblink 1.1s step-end infinite}
@keyframes cblink{0%,100%{opacity:0.7}50%{opacity:0.2}}

/* radar bg on threat panel */
.radar-bg{
  position:absolute;bottom:-30px;right:-30px;width:100px;height:100px;
  border-radius:50%;border:1px solid rgba(0,200,255,0.06);
  pointer-events:none;overflow:hidden;opacity:0.4;
}
.radar-sweep{
  position:absolute;top:50%;left:50%;
  width:50px;height:50px;
  background:conic-gradient(from 0deg,transparent 330deg,rgba(0,200,255,0.3) 360deg);
  transform-origin:0% 0%;
  animation:rsweep 3s linear infinite;
}
@keyframes rsweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════
   THREAT MATRIX
   ═══════════════════════════════════════════════════════════ */
.tr-row{
  display:flex;align-items:center;gap:7px;
  padding:5px 0;border-bottom:1px solid rgba(0,200,255,0.05);
}
.tr-row:last-child{border-bottom:none}
.tr-ico{font-size:0.88rem;width:18px;flex-shrink:0}
.tr-name{font-family:var(--display);font-size:0.54rem;letter-spacing:0.1em;color:var(--dim);width:54px;flex-shrink:0}
.tr-bw{flex:1;height:3px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden}
.tr-bf{height:100%;border-radius:2px;transition:width 1.2s ease}
.tr-lv{font-family:var(--display);font-size:0.5rem;letter-spacing:0.08em;width:52px;text-align:right;flex-shrink:0}
.lv-critical{color:var(--red)}
.lv-high    {color:var(--orange)}
.lv-moderate{color:var(--yellow)}
.lv-low     {color:var(--green)}

/* ═══════════════════════════════════════════════════════════
   SEISMIC LIST
   ═══════════════════════════════════════════════════════════ */
.qi{
  display:grid;grid-template-columns:34px 1fr;gap:7px;align-items:center;
  padding:4px 0;border-bottom:1px solid rgba(0,200,255,0.05);
}
.qi:last-child{border-bottom:none}
.qm{font-family:var(--display);font-weight:900;font-size:0.82rem;text-align:center;padding:2px 3px;border-radius:3px;border:1px solid currentColor;line-height:1.2}
.qm.c{color:var(--red);border-color:rgba(255,34,68,0.4);background:rgba(255,34,68,0.08)}
.qm.h{color:var(--orange);border-color:rgba(255,119,0,0.4);background:rgba(255,119,0,0.08)}
.qm.m{color:var(--yellow);border-color:rgba(255,215,0,0.4);background:rgba(255,215,0,0.08)}
.qm.l{color:var(--dim);border-color:rgba(74,104,136,0.4);background:rgba(74,104,136,0.05)}
.qp{font-size:0.72rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt{font-size:0.6rem;color:var(--dim);margin-top:1px}

/* ═══════════════════════════════════════════════════════════
   WIKI LIVE PULSE
   ═══════════════════════════════════════════════════════════ */
.wi{
  display:flex;align-items:flex-start;gap:6px;
  padding:5px 0;border-bottom:1px solid rgba(0,200,255,0.05);
  animation:wi-fade 0.5s ease;
}
@keyframes wi-fade{from{background:rgba(0,200,255,0.05)}to{background:transparent}}
.wi:last-child{border-bottom:none}
.wi-ico{font-size:0.8rem;flex-shrink:0;margin-top:1px}
.wi-body{}
.wi-title{font-size:0.73rem;color:var(--text);line-height:1.3}
.wi-title a{color:var(--text);text-decoration:none}
.wi-title a:hover{color:var(--blue)}
.wi-meta{font-size:0.6rem;color:var(--dim);margin-top:2px}

/* ═══════════════════════════════════════════════════════════
   ASSET MONITOR
   ═══════════════════════════════════════════════════════════ */
.ar{
  display:grid;grid-template-columns:46px 1fr auto;align-items:center;
  gap:5px;padding:4px 0;border-bottom:1px solid rgba(0,200,255,0.05);
}
.ar:last-child{border-bottom:none}
.ar-sym{font-family:var(--display);font-size:0.6rem;font-weight:700;letter-spacing:0.1em;color:var(--dim)}
.ar-price{font-weight:700;font-size:0.8rem;color:var(--bright);font-variant-numeric:tabular-nums}
.ar-chg{font-size:0.7rem;font-weight:700;text-align:right;white-space:nowrap}
.up{color:var(--green)}.down{color:var(--red)}.flat{color:var(--dim)}

/* ═══════════════════════════════════════════════════════════
   AIR TRAFFIC
   ═══════════════════════════════════════════════════════════ */
.air-stat{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px;
}
.as-cell{border:1px solid rgba(255,119,0,0.2);border-radius:3px;padding:6px 8px;background:rgba(255,119,0,0.04)}
.as-lbl{font-family:var(--display);font-size:0.52rem;letter-spacing:0.12em;color:var(--dim);margin-bottom:2px}
.as-val{font-size:1rem;font-weight:800;color:var(--orange)}
.air-list{display:flex;flex-direction:column;gap:4px}
.air-item{
  display:flex;align-items:center;gap:7px;
  font-size:0.7rem;padding:3px 0;border-bottom:1px solid rgba(0,200,255,0.05);
}
.air-item:last-child{border-bottom:none}
.air-ico{font-size:0.85rem;flex-shrink:0;animation:airfly 2s ease-in-out infinite alternate}
@keyframes airfly{from{transform:translateX(-1px)}to{transform:translateX(1px)}}
.air-cs{font-family:var(--display);font-size:0.6rem;font-weight:700;color:var(--orange);width:60px;flex-shrink:0}
.air-info{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.air-alt{color:var(--dim);font-size:0.62rem;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   INTEL / NEWS
   ═══════════════════════════════════════════════════════════ */
.itabs{display:flex;gap:3px;margin-left:auto}
.itab{
  font-family:var(--display);font-size:0.5rem;letter-spacing:0.1em;
  padding:3px 6px;border:1px solid var(--border);border-radius:2px;
  background:transparent;color:var(--dim);cursor:pointer;transition:0.15s;
}
.itab:hover,.itab.active{border-color:var(--blue);color:var(--blue);background:rgba(0,200,255,0.07)}

.ii{padding:6px 0;border-bottom:1px solid rgba(0,200,255,0.05)}
.ii:last-child{border-bottom:none}
.ii-meta{display:flex;gap:8px;margin-bottom:3px}
.ii-src{font-family:var(--display);font-size:0.52rem;letter-spacing:0.12em;color:var(--blue);opacity:0.8}
.ii-time{font-size:0.58rem;color:var(--dim)}
.ii-title{font-size:0.73rem;color:var(--text);line-height:1.4}
.ii-title a{color:inherit;text-decoration:none}
.ii-title a:hover{color:var(--blue)}
.ii-pts{font-size:0.62rem;color:var(--dim);margin-top:2px}

/* ═══════════════════════════════════════════════════════════
   ORBITAL
   ═══════════════════════════════════════════════════════════ */
.og{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px}
.oc{border:1px solid rgba(170,85,255,0.2);border-radius:3px;padding:5px 7px;background:rgba(170,85,255,0.04)}
.ol{display:block;font-family:var(--display);font-size:0.5rem;letter-spacing:0.12em;color:var(--dim);margin-bottom:1px}
.ov{display:block;font-weight:700;font-size:0.85rem;color:var(--purple);font-variant-numeric:tabular-nums}
.over{font-size:0.68rem;color:var(--dim);border-top:1px solid rgba(170,85,255,0.12);padding-top:6px}
.over span{color:var(--purple)}

/* ═══════════════════════════════════════════════════════════
   CENTER MAP
   ═══════════════════════════════════════════════════════════ */
.map-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 10px;height:36px;
  background:rgba(2,5,12,0.98);border-bottom:1px solid var(--border);
  flex-shrink:0;position:relative;z-index:600;
}
.lbtns{display:flex;gap:4px}
.lb{
  font-family:var(--display);font-size:0.54rem;letter-spacing:0.12em;
  padding:4px 8px;border:1px solid var(--border);border-radius:2px;
  background:rgba(2,5,12,0.9);color:var(--dim);cursor:pointer;transition:0.15s;
}
.lb:hover{border-color:var(--border2);color:var(--text)}
.lb.active{border-color:rgba(0,200,255,0.45);color:var(--blue);background:rgba(0,200,255,0.06);box-shadow:0 0 8px rgba(0,200,255,0.1) inset}
.lb[data-layer="aircraft"].active{border-color:rgba(255,119,0,0.5);color:var(--orange);background:rgba(255,119,0,0.06)}
.lb[data-layer="fires"].active   {border-color:rgba(255,80,0,0.5); color:#ff6633;background:rgba(255,80,0,0.06)}
.lb[data-layer="volcanoes"].active{border-color:rgba(180,60,30,0.5);color:#ff7755;background:rgba(180,60,30,0.06)}
.lb[data-layer="storms"].active  {border-color:rgba(170,85,255,0.5);color:var(--purple);background:rgba(170,85,255,0.06)}
.lb[data-layer="iss"].active     {border-color:rgba(0,255,136,0.5); color:var(--green);background:rgba(0,255,136,0.06)}
.map-tag{font-family:var(--display);font-size:0.52rem;letter-spacing:0.2em;color:var(--dim)}

#map{width:100%;height:calc(100% - 36px);background:#01060e}

/* scanlines */
.col-c::after{
  content:'';position:absolute;inset:36px 0 0 0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.05) 3px,rgba(0,0,0,0.05) 4px);
  pointer-events:none;z-index:399;
}

/* leaflet */
.leaflet-popup-content-wrapper{
  background:rgba(3,8,18,0.98)!important;border:1px solid var(--border2)!important;
  border-radius:3px!important;box-shadow:0 0 30px rgba(0,200,255,0.12),0 8px 40px rgba(0,0,0,0.7)!important;
  backdrop-filter:blur(10px);
}
.leaflet-popup-tip{background:rgba(3,8,18,0.98)!important}
.leaflet-popup-content{margin:10px 13px!important}
.leaflet-popup-close-button{color:var(--dim)!important}
.leaflet-control-zoom a{
  background:rgba(3,8,18,0.95)!important;border-color:var(--border)!important;
  color:var(--text)!important;
}
.leaflet-control-zoom a:hover{background:rgba(0,200,255,0.1)!important;color:var(--blue)!important}

.mp{font-family:var(--mono);font-size:0.76rem;line-height:1.6;min-width:150px}
.mp-h{font-family:var(--display);font-size:0.62rem;letter-spacing:0.18em;color:var(--blue);margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.mp-r{color:var(--text)}
.mp-r b{color:var(--bright)}

/* aircraft on map */
.ac-icon{font-size:14px;line-height:1;transform-origin:center center;filter:drop-shadow(0 0 4px rgba(255,119,0,0.8))}

/* market labels */
.mkt-tag{
  font-family:var(--display);font-size:0.58rem;font-weight:700;letter-spacing:0.05em;
  padding:2px 7px;border:1px solid currentColor;border-radius:2px;
  background:rgba(2,5,12,0.88);backdrop-filter:blur(4px);white-space:nowrap;cursor:pointer;
}

/* ISS */
.iss-mk{font-size:20px;line-height:1;filter:drop-shadow(0 0 8px rgba(0,255,136,0.8));animation:iss-bob 3s ease-in-out infinite}
@keyframes iss-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.hud-ftr{
  height:var(--fh);flex-shrink:0;
  display:flex;align-items:center;
  border-top:1px solid var(--border2);
  background:rgba(2,4,10,0.99);overflow:hidden;position:relative;
}
.hud-ftr::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0.35;
}
.fs{flex-shrink:0;padding:0 14px;font-size:0.68rem;color:var(--dim);white-space:nowrap}
.fs strong{color:var(--text)}
.fd{color:var(--dim);opacity:0.3;font-size:0.68rem;flex-shrink:0}
.ftick{flex:1;overflow:hidden;position:relative}
#tickSpan{
  display:inline-block;white-space:nowrap;font-size:0.68rem;color:var(--dim);
  animation:ticker 90s linear infinite;padding-left:100%;
}
#tickSpan:hover{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1300px){:root{--lw:190px;--rw:250px}.ck{padding:3px 7px}}
@media(max-width:1100px){
  body,html{height:auto;overflow:auto}
  .hud{height:auto;min-height:100vh}
  .hud-main{grid-template-columns:1fr;grid-template-rows:auto}
  .col-l,.col-r{border:none;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr)}
  .col-c{height:60vw;min-height:360px}
  #map{height:100%}
  .hud-ftr{height:auto;flex-wrap:wrap;padding:6px 10px;gap:4px}
  .hdr-stats{display:none}
  .clocks{display:none}
}
@media(max-width:660px){
  .col-l,.col-r{grid-template-columns:1fr}
  .lb{font-size:0.48rem;padding:3px 5px}
  .brand-s{display:none}
}