/* ═══════ MARK VIII · STARK HUD ═══════════════════════════ */
:root{
  --bg:#000308;
  --cyan:#00c8ff;
  --cyan-2:#4ae3ff;
  --cyan-soft:#2aa8cc;
  --cyan-dim:#0a5870;
  --cyan-trace:#0d5570;
  --amber:#ffb84d;
  --red:#ff3b3b;
  --ink:#cfeeff;
  --muted:#4a8aa0;
  --muted-2:#2d6378;
  --panel:rgba(3,14,22,.72);
  --stroke:rgba(0,200,255,.22);
  --stroke-hot:rgba(0,200,255,.65);
  --glow:0 0 8px rgba(0,200,255,.55), 0 0 22px rgba(0,200,255,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:var(--ink);font-family:'Chakra Petch',sans-serif;overflow-x:hidden}
body{
  background:
    radial-gradient(1400px 700px at 50% 40%, rgba(0,50,80,.22), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(0,40,70,.2), transparent 60%),
    var(--bg);
  min-width:1366px; min-height:100vh;
  cursor:crosshair;
}

/* ─── background layers ─── */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
.bg-layer.active{opacity:1}

.circuit-bg{position:absolute;inset:0;width:100%;height:100%}

.dust{position:absolute;inset:0;background:
  radial-gradient(1px 1px at 20% 30%, rgba(0,200,255,.4), transparent 50%),
  radial-gradient(1px 1px at 80% 10%, rgba(0,200,255,.3), transparent 50%),
  radial-gradient(1px 1px at 50% 80%, rgba(0,200,255,.35), transparent 50%),
  radial-gradient(1px 1px at 30% 60%, rgba(0,200,255,.2), transparent 50%),
  radial-gradient(1px 1px at 70% 70%, rgba(0,200,255,.3), transparent 50%);
  background-size:400px 400px, 300px 300px, 500px 500px, 250px 250px, 350px 350px;
  opacity:.6;
}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.85) 100%)}

/* flight mode bg */
#cityCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.motion-blur{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.55) 90%);pointer-events:none}
.flight-reticle{position:absolute;left:50%;top:50%;width:440px;height:440px;transform:translate(-50%,-50%);opacity:.55;mix-blend-mode:screen;animation:reticleFloat 6s ease-in-out infinite}
@keyframes reticleFloat{0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-52%) rotate(1deg)}}
.flight-hud{position:absolute;left:3%;bottom:11%;display:flex;gap:22px;color:var(--cyan);font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.1em;text-shadow:var(--glow)}
.fh-block{display:flex;align-items:baseline;gap:6px;border-left:1px solid var(--stroke-hot);padding-left:10px}
.fh-label{color:var(--muted);font-size:10px}
.fh-val{font-size:22px;font-weight:700;color:var(--cyan-2)}
.fh-unit{font-size:10px;color:var(--muted)}
.fh-target{position:absolute;right:3%;bottom:12%;font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--amber);letter-spacing:.2em;border:1px solid rgba(255,184,77,.45);padding:6px 12px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.tac-panel{position:absolute;opacity:.8;mix-blend-mode:screen}
.tac-panel.tp-tl{top:30px;left:30px;width:190px;height:150px}
.tac-panel.tp-br{top:30px;right:30px;width:230px;height:170px}
.tac-panel svg{width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(0,200,255,.5))}

/* scene picker */
.scene-picker{
  position:absolute;top:30px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;align-items:center;
  background:rgba(0,15,25,.75);border:1px solid var(--stroke-hot);
  padding:6px 10px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.2em;
  z-index:6;
}
.sp-label{color:var(--cyan);margin-right:4px}
.sp-btn{
  background:transparent;border:1px solid var(--stroke);color:var(--muted);
  font-family:inherit;font-size:10px;letter-spacing:.15em;
  padding:5px 10px;cursor:pointer;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  transition:all .15s;
}
.sp-btn:hover{color:var(--cyan);border-color:var(--stroke-hot)}
.sp-btn.act{background:rgba(0,200,255,.2);color:var(--cyan-2);border-color:var(--cyan);box-shadow:inset 0 0 8px rgba(0,200,255,.3)}

/* yoke hint */
.yoke-hint{
  position:absolute;bottom:170px;left:50%;transform:translateX(-50%);
  display:flex;gap:14px;align-items:center;
  font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.15em;
  opacity:.7;pointer-events:none;
}
.yh-k{color:var(--cyan);border:1px solid var(--stroke);padding:3px 8px;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.yh-t{color:var(--amber);font-weight:700;letter-spacing:.3em}
.yh-s{color:var(--muted);margin-left:8px;font-size:9px;letter-spacing:.1em;opacity:.7}

/* ═══════════ COMBAT HUD ═══════════ */
.combat-hud{position:absolute;inset:0;pointer-events:none;display:none;z-index:5}
body.combat .combat-hud{display:block}

/* crosshair follows mouse */
.ch-aim{position:absolute;width:100px;height:100px;margin:-50px 0 0 -50px;color:#ff5050;filter:drop-shadow(0 0 6px rgba(255,80,80,.7));transition:color .1s;mix-blend-mode:screen;pointer-events:none}
.ch-aim.lock{color:#ffdd33}
.ch-aim.lock #chLock{display:block !important}
.ch-aim svg{width:100%;height:100%}

/* weapons panel bottom center */
.weapons-panel{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);pointer-events:auto}
.wp-row{display:flex;gap:6px}
.wp-slot{
  position:relative;
  min-width:120px;padding:8px 14px;
  background:rgba(40,0,0,.8);border:1px solid rgba(255,80,80,.5);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  cursor:pointer;font-family:'Share Tech Mono',monospace;
  transition:all .15s;
}
.wp-slot:hover{background:rgba(60,0,0,.9);border-color:#ff5050}
.wp-slot.act{background:rgba(80,10,10,.9);border-color:#ff8080;box-shadow:inset 0 0 12px rgba(255,80,80,.4)}
.wp-slot.empty{opacity:.45}
.wp-key{font-size:9px;color:#ffaaaa;letter-spacing:.2em;margin-bottom:2px}
.wp-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;color:#fff;letter-spacing:.2em;text-shadow:0 0 6px #ff5050}
.wp-bar{margin-top:4px;width:100%;height:3px;background:rgba(255,80,80,.2);position:relative}
.wp-bar-fill{height:100%;background:linear-gradient(90deg,#ff5050,#ffdd33);transition:width .2s;box-shadow:0 0 6px #ff5050}
.wp-ammo{position:absolute;top:6px;right:10px;font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;color:#ffdd33}

/* score panel top right */
.score-panel{position:absolute;top:110px;right:30px;display:flex;flex-direction:column;gap:3px;font-family:'Share Tech Mono',monospace;font-size:10px}
.sc-row{display:flex;justify-content:space-between;gap:14px;background:rgba(40,0,0,.8);border:1px solid rgba(255,80,80,.4);padding:4px 10px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);min-width:140px}
.sc-row em{color:#ffaaaa;font-style:normal;letter-spacing:.2em}
.sc-row b{color:#fff;font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px}

/* damage screen flash */
.dmg-flash{position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(255,0,0,.6) 100%);pointer-events:none;z-index:99;opacity:0;transition:opacity .3s}
.dmg-flash.hit{opacity:1;animation:dmgPulse .35s ease-out}
@keyframes dmgPulse{0%{opacity:1}100%{opacity:0}}

/* horizon indicator */
.horizon-ind{position:absolute;bottom:180px;left:3%;width:110px;height:110px;opacity:.85}
.horizon-ind svg{width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(0,200,255,.5))}

/* ─── top strip (dates) ─── */
.top-strip{
  position:relative;z-index:5;
  padding:4px 14px 0;
  background:linear-gradient(180deg,rgba(0,20,35,.6),transparent);
  border-bottom:1px dashed var(--stroke);
}
.ts-days{display:flex;justify-content:space-between;gap:1px;font-family:'Share Tech Mono',monospace;font-size:11px;overflow:hidden}
.ts-days .d{min-width:32px;text-align:center;color:var(--muted);padding:4px 3px;letter-spacing:.1em}
.ts-days .d.today{
  color:#001a22;background:var(--cyan);font-weight:700;
  box-shadow:0 0 14px var(--cyan);
  position:relative;
}
.ts-days .d.today::before,.ts-days .d.today::after{
  content:"";position:absolute;top:0;width:4px;height:100%;background:var(--cyan)
}
.ts-days .d.today::before{left:-4px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ts-days .d.today::after{right:-4px;clip-path:polygon(0 0,100% 0,0 100%)}

.top-sub{
  position:relative;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 16px;
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.2em;
  border-bottom:1px solid var(--stroke);
  background:rgba(0,15,25,.4);
}
.ts-left,.ts-right{display:flex;align-items:center;gap:16px}
.ts-id{color:var(--amber)}
.ts-time{color:var(--cyan-2);font-size:14px;letter-spacing:.2em}
.ts-logo-small{color:var(--cyan);font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.25em}
.ts-status{color:var(--cyan-2);display:flex;align-items:center;gap:6px}
.ts-status .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.ts-geo{color:var(--muted)}
.ts-upd{color:var(--muted);font-size:10px}

/* ─── deck grid ─── */
.deck{
  position:relative;z-index:3;
  display:grid;
  grid-template-columns:260px 1fr 280px;
  gap:10px;
  padding:10px 14px 170px;
  min-height:calc(100vh - 120px);
}
.col{display:flex;flex-direction:column;gap:10px}
.col-c{align-items:center;gap:4px}

/* ─── tile base ─── */
.tile{
  position:relative;
  background:var(--panel);
  border:1px solid var(--stroke);
  padding:8px 10px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:inset 0 0 30px rgba(0,200,255,.05);
}
.tile::before{
  content:"";position:absolute;left:0;top:10px;width:2px;height:22px;
  background:linear-gradient(180deg,var(--cyan),transparent);
  box-shadow:0 0 6px var(--cyan);
}

/* ── clock tile ── */
.tile-clock{padding:6px 14px;text-align:center}
.tile-clock svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.3}
.tile-frame{fill:none;stroke:var(--cyan);stroke-width:1}
.clock-time{font-family:'Share Tech Mono',monospace;font-size:26px;color:var(--cyan-2);letter-spacing:.1em;text-shadow:var(--glow)}
.clock-time span{font-size:16px;color:var(--cyan);margin-left:4px;opacity:.8}
.clock-lbl{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.3em;margin-top:-2px}

/* ── big date circle ── */
.tile-date{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:6px}
.date-svg{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(0,200,255,.4))}
.dr-o{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:.55}
.dr-o.thin{stroke-width:.8;opacity:.3}
.dr-dash{fill:none;stroke:var(--cyan);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55;transform-origin:110px 110px;animation:spinR 60s linear infinite}
.dr-prog{fill:none;stroke:var(--cyan-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:427;stroke-dashoffset:150;transform:rotate(-90deg);transform-origin:110px 110px;filter:drop-shadow(0 0 4px var(--cyan))}
.dr-red{fill:none;stroke:var(--red);stroke-width:3;opacity:.9;filter:drop-shadow(0 0 4px var(--red))}
#dateTicks line{stroke:var(--cyan);stroke-width:1;opacity:.6}
#dateTicks line.major{stroke-width:1.5;opacity:.9}
.date-center{position:absolute;text-align:center;line-height:1}
.date-month{font-family:'Share Tech Mono',monospace;color:var(--cyan);font-size:11px;letter-spacing:.3em}
.date-big{font-family:'Orbitron',sans-serif;font-weight:900;font-size:56px;color:#fff;text-shadow:0 0 18px var(--cyan);margin-top:4px}

/* ── dual gauge ── */
.tile-dual{display:flex;gap:6px;padding:8px}
.dual-g{flex:1;display:flex;align-items:center;gap:6px;position:relative}
.dual-g svg{width:66px;height:66px;flex-shrink:0;filter:drop-shadow(0 0 3px rgba(0,200,255,.45))}
.gg-bg{fill:none;stroke:rgba(0,200,255,.18);stroke-width:3.5}
.gg-bg.thin{stroke-width:1.5;opacity:.5}
.gg-fg{fill:none;stroke:var(--cyan);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:60;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .6s ease}
.gg-fg.amber{stroke:var(--amber);filter:drop-shadow(0 0 3px var(--amber))}
.dual-txt{display:flex;flex-direction:column;font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.15em;line-height:1.35}
.dual-txt span{color:var(--cyan)}
.dual-txt b{color:var(--ink);font-weight:400}
.dual-txt b em{color:var(--cyan-2);font-style:normal;font-weight:700}

/* ── row tile ── */
.tile-row{display:flex;align-items:center;gap:10px;padding:8px 10px}
.tile-row.small{padding:6px 10px}
.row-ico{width:48px;height:48px;flex-shrink:0;filter:drop-shadow(0 0 3px rgba(0,200,255,.4))}
.tile-row.small .row-ico{width:38px;height:38px}
.row-info{flex:1;font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.1em}
.row-name{color:var(--cyan);font-family:'Orbitron',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;margin-bottom:2px}
.row-name.amber{color:var(--amber)}
.row-v{display:flex;justify-content:space-between;padding:1px 0}
.row-v em{font-style:normal;color:var(--muted)}
.row-v b{color:var(--ink);font-weight:400}

/* ── comm tile ── */
.tile-comm{padding:10px;font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--ink);letter-spacing:.1em}
.comm-head{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.25em;color:var(--cyan);margin-bottom:6px}
.comm-row{padding:2px 0;color:var(--muted)}
.comm-row span{color:var(--cyan);margin-right:4px}
.comm-row.amber{color:var(--amber)}
.comm-row.amber span{color:var(--amber)}
.pwr-row{display:flex;gap:4px;margin-top:8px}
.pwr-b{flex:1;background:transparent;border:1px solid var(--stroke);color:var(--muted);font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.15em;padding:4px;cursor:pointer;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.pwr-b:hover{color:var(--cyan);border-color:var(--stroke-hot);background:rgba(0,200,255,.08)}

/* ═══════ CENTER HERO RING ═══════ */
.hero-wrap{position:relative;width:100%;max-width:720px;aspect-ratio:1;margin:0 auto}
.hero-ring{width:100%;height:100%;display:block;filter:drop-shadow(0 0 20px rgba(0,200,255,.35))}

/* ring element styles */
.r-thin{fill:none;stroke:var(--cyan);stroke-width:.8;opacity:.35}
.r-solid{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:.7}
.r-dashA{fill:none;stroke:var(--cyan);stroke-width:1.2;stroke-dasharray:10 4;opacity:.65;transform-origin:350px 350px;animation:spinR 48s linear infinite}
.r-dashB{fill:none;stroke:var(--cyan-2);stroke-width:1.2;stroke-dasharray:3 8;opacity:.55;transform-origin:350px 350px;animation:spinL 34s linear infinite}
.r-dashC{fill:none;stroke:var(--amber);stroke-width:1;stroke-dasharray:18 5;opacity:.35;transform-origin:350px 350px;animation:spinR 22s linear infinite}
.r-core{fill:none;stroke:var(--cyan-2);stroke-width:2;opacity:.85}
.r-core.bright{stroke:#eafcff;stroke-width:1.5;filter:drop-shadow(0 0 8px #fff)}
.r-coreDash{fill:none;stroke:var(--cyan);stroke-width:1;stroke-dasharray:4 4;opacity:.6;transform-origin:350px 350px;animation:spinL 12s linear infinite}
.r-white{fill:#ffffff;opacity:.85}
.r-tri{fill:none;stroke:var(--cyan-2);stroke-width:1.5;opacity:.9;animation:triPulse 3s ease-in-out infinite;transform-origin:350px 350px}
.r-red{fill:none;stroke:var(--red);stroke-width:3;filter:drop-shadow(0 0 6px var(--red));opacity:.9;transform-origin:350px 350px;animation:spinR 18s linear infinite}
@keyframes spinR{to{transform:rotate(360deg)}}
@keyframes spinL{to{transform:rotate(-360deg)}}
@keyframes triPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* tick groups (styled via JS but default stroke) */
#r1ticks line,#r4ticks line,#r6ticks line{stroke:var(--cyan)}
#r3nums text,#r5nums text{fill:var(--cyan);font-family:'Share Tech Mono',monospace;font-size:8px;opacity:.7}
#spokes line{stroke:var(--cyan);stroke-width:.6;opacity:.25}

/* identity & labels inside ring */
.hero-id{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:260px;pointer-events:none}
.hid-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:34px;color:#fff;letter-spacing:.28em;text-shadow:0 0 20px var(--cyan)}
.hid-role{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.35em;color:var(--cyan);margin-top:2px}
.hid-greet{font-family:'Chakra Petch',sans-serif;font-size:11px;color:var(--amber);margin-top:8px;letter-spacing:.2em;opacity:.95}

/* side lists (like app list next to ring) */
.side-list{position:absolute;list-style:none;margin:0;padding:0;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.1em;line-height:1.9}
.side-list li{display:flex;align-items:center;gap:6px;transition:color .15s}
.side-list li:hover{color:var(--cyan-2)}
.sl-dot{width:5px;height:5px;background:var(--cyan);box-shadow:0 0 6px var(--cyan);border-radius:50%}
.side-l{left:22%;top:32%}
.side-r{right:18%;top:34%;text-align:right;cursor:pointer}
.side-r li{justify-content:flex-end;padding:2px 0;border-bottom:1px dashed transparent}
.side-r li:hover{border-color:var(--stroke-hot)}
.side-r li b{color:var(--cyan);font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em}
.side-r li:hover b{color:var(--cyan-2);text-shadow:var(--glow)}

.expo-badge{position:absolute;left:6%;top:50%;transform:translateY(-50%) rotate(-7deg);text-align:center;opacity:.75;pointer-events:none}
.ex-1{font-family:'Orbitron',sans-serif;font-weight:900;font-size:24px;color:var(--cyan);letter-spacing:.2em;text-shadow:var(--glow)}
.ex-2{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--amber);letter-spacing:.3em}
.ex-sub{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.25em;margin-top:2px}

/* stark band */
.stark-band{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:16px;letter-spacing:.55em;color:var(--cyan);
  text-align:center;text-shadow:var(--glow);
  margin-top:-20px;opacity:.9;
  border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
  padding:6px 0;width:62%;
}

/* ─── command bar ─── */
.cmd-bar{width:100%;max-width:640px;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cmd-tabs{display:flex;gap:4px}
.cmd-tab{
  flex:1;padding:6px;
  background:transparent;border:1px solid var(--stroke);
  color:var(--muted);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.2em;
  cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:all .2s;
}
.cmd-tab:hover{color:var(--cyan);border-color:var(--stroke-hot)}
.cmd-tab.act{background:rgba(0,200,255,.15);color:var(--cyan-2);border-color:var(--cyan);box-shadow:inset 0 0 10px rgba(0,200,255,.25)}
.cmd-input-row{
  display:flex;align-items:center;gap:6px;
  background:rgba(0,15,25,.85);border:1px solid var(--stroke-hot);
  padding:5px 10px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.cmd-prompt{font-family:'Share Tech Mono',monospace;color:var(--amber);font-size:11px;letter-spacing:.15em}
#cmdInput{flex:1;background:transparent;border:0;outline:0;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px}
#cmdInput::placeholder{color:var(--muted)}
.cmd-btn{width:30px;height:26px;background:rgba(0,200,255,.1);border:1px solid var(--stroke);color:var(--cyan);cursor:pointer;font-size:12px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all .2s}
.cmd-btn:hover{background:rgba(0,200,255,.25);color:var(--cyan-2)}
.cmd-btn.go{background:var(--cyan);color:#001018;font-weight:700}
.cmd-btn.live{background:var(--red);color:#fff;animation:pulse 1s ease infinite}
#langBtn{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.1em;color:var(--amber);border-color:rgba(255,184,77,.4)}
.cmd-log{min-height:52px;max-height:90px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.5;background:rgba(0,8,14,.7);border:1px solid var(--stroke);padding:5px 8px}
.cmd-log .u{color:var(--amber)}
.cmd-log .j{color:var(--cyan-2)}
.cmd-log .s{color:var(--muted);font-style:italic}

/* ═══════ RIGHT COLUMN ═══════ */
.tile-news .nw-head{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.25em;color:var(--cyan)}
.nw-title{font-family:'Orbitron',sans-serif;font-size:13px;color:var(--amber);letter-spacing:.15em;margin:4px 0 6px}
.nw-list{list-style:none;margin:0;padding:0;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--ink)}
.nw-list li{padding:3px 0;border-bottom:1px dashed rgba(0,200,255,.15);letter-spacing:.05em}

/* weather now */
.tile-wnow{padding:10px}
.wn-head{display:flex;justify-content:space-between;align-items:baseline}
.wn-city{font-family:'Orbitron',sans-serif;font-size:13px;color:var(--amber);letter-spacing:.15em}
.wn-upd{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.1em}
.wn-main{display:flex;gap:8px;margin-top:8px;align-items:flex-start}
.wn-icon{font-size:38px;filter:drop-shadow(0 0 6px rgba(0,200,255,.5))}
.wn-t{font-family:'Orbitron',sans-serif;font-weight:900;font-size:38px;color:#fff;text-shadow:var(--glow);line-height:1}
.wn-t sup{font-size:14px;color:var(--muted);margin-left:2px}
.wn-d{flex:1;font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.05em}
.wn-d > div:first-child{font-family:'Orbitron',sans-serif;font-size:11px;color:var(--cyan);letter-spacing:.2em;margin-bottom:4px}
.wn-d ul{list-style:none;margin:0;padding:0}
.wn-d li{padding:1px 0}
.wn-d b{color:var(--ink);font-weight:400}

/* forecast list */
.forecast{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.forecast li{
  display:grid;grid-template-columns:36px 1fr 60px auto;gap:8px;align-items:center;
  padding:6px 10px;
  background:var(--panel);border:1px solid var(--stroke);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.05em;
}
.forecast li .fc-ico{font-size:20px;text-align:center}
.forecast li .fc-day{color:var(--cyan);font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.15em}
.forecast li .fc-day em{display:block;color:var(--muted);font-family:'Share Tech Mono',monospace;font-size:9px;font-style:normal;letter-spacing:.05em;margin-top:1px}
.forecast li .fc-temp{color:var(--ink);font-size:12px;text-align:right;font-family:'Orbitron',sans-serif;font-weight:700}
.forecast li .fc-temp em{color:var(--muted);font-style:normal;font-weight:400;margin-left:4px;font-size:10px}
.forecast li .fc-cond{color:var(--amber);font-size:9px;letter-spacing:.15em;text-align:right}

/* ═══════ BOTTOM STRIP ═══════ */
.bottom-strip{
  position:fixed;left:0;right:0;bottom:0;z-index:4;
  height:150px;
  background:linear-gradient(0deg,rgba(0,14,22,.95),rgba(0,8,14,.6));
  border-top:1px solid var(--stroke);
  display:flex;gap:12px;padding:10px 14px;
}
.bs-left{flex:1;display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--stroke);padding:8px 12px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.bs-right{flex:1;display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--stroke);padding:8px 12px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.bs-label-sm{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.2em;color:var(--cyan)}
#netCanvas{flex:1;width:100%;display:block;min-height:60px}
.bs-stats{display:flex;justify-content:space-around;font-family:'Share Tech Mono',monospace;font-size:11px}
.bs-stats em{color:var(--amber);font-style:normal;margin-right:4px}
.bs-stats b{color:var(--cyan-2);margin-right:6px}
.bs-stats span{color:var(--muted)}
#specCanvas{flex:1;width:100%;display:block}
.bs-label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--cyan);letter-spacing:.3em;text-align:right}

/* ─── flight-mode tweaks ─── */
body.flight .deck{opacity:.93}
body.flight .tile,body.flight .bs-left,body.flight .bs-right{background:rgba(0,10,18,.78)}
body.flight .hero-id .hid-greet{color:var(--cyan-2)}
body.flight #bg-idle{opacity:0}
body.combat{--cyan:#ff5050;--cyan-2:#ff8080;--glow:0 0 10px rgba(255,80,80,.55),0 0 30px rgba(255,60,60,.22)}
body.combat .hero-id .hid-greet{color:#ff9a9a}

/* ═══════════ SERVICE BRIEFING MODAL ═══════════ */
.svc-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;font-family:'Chakra Petch',sans-serif}
.svc-modal.open{display:flex}
.svc-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,20,40,.75),rgba(0,0,0,.92));backdrop-filter:blur(3px);animation:bdFade .3s ease}
@keyframes bdFade{from{opacity:0}to{opacity:1}}

.svc-frame{
  position:relative;width:min(880px,90vw);max-height:88vh;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(0,40,60,.92),rgba(0,15,25,.95));
  border:1px solid var(--cyan);
  box-shadow:0 0 40px rgba(0,200,255,.55), inset 0 0 50px rgba(0,200,255,.12);
  clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);
  animation:modalBoot .55s cubic-bezier(.2,.9,.3,1.1);
}

/* glitchy boot animation with scan + rgb split + flicker */
@keyframes modalBoot{
  0%  {opacity:0;transform:scale(.85) translateY(-10px);filter:brightness(3) contrast(2) hue-rotate(30deg)}
  15% {opacity:.8;transform:scale(1.03);filter:brightness(2) contrast(1.5) hue-rotate(-20deg)}
  22% {opacity:.2;filter:brightness(.4)}
  28% {opacity:.9;transform:scale(1.01) translateX(-4px);filter:brightness(1.4) contrast(1.2) hue-rotate(10deg)}
  35% {opacity:.5;transform:translateX(3px);filter:brightness(.8) saturate(2)}
  45% {opacity:1;transform:scale(1);filter:brightness(1.1)}
  55% {opacity:.7;filter:brightness(.6) contrast(1.5)}
  100%{opacity:1;transform:scale(1);filter:none}
}

/* scan line overlay + rgb split pseudo */
.svc-frame::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(0,255,255,.3) 50%,transparent 100%);
  height:6px;top:-10px;
  animation:scanSweep 1.2s ease-out 1, scanLoop 3s linear 1.2s infinite;
  box-shadow:0 0 16px rgba(0,255,255,.9);
}
@keyframes scanSweep{
  0%  {top:-10px;opacity:1}
  100%{top:100%;opacity:.3}
}
@keyframes scanLoop{
  0%  {top:-10px;opacity:.15}
  100%{top:100%;opacity:0}
}
.svc-frame::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,200,255,.03) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
  animation:flicker .15s steps(2) infinite;
  opacity:.5;
}
@keyframes flicker{0%{opacity:.35}50%{opacity:.55}100%{opacity:.4}}

.svc-frame.flash{animation:flashPulse .22s ease}
@keyframes flashPulse{
  0%{filter:brightness(1)}
  40%{filter:brightness(2.5) hue-rotate(15deg)}
  100%{filter:brightness(1)}
}

/* corner brackets */
.br{position:absolute;width:24px;height:24px;border:2px solid var(--cyan);z-index:6;pointer-events:none;box-shadow:0 0 8px var(--cyan)}
.br.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.br.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.br.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.br.br2{bottom:6px;right:6px;border-left:0;border-top:0}

.svc-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--stroke-hot);
  background:linear-gradient(90deg,rgba(0,200,255,.15),transparent);
  position:relative;z-index:2;
}
.svc-head-l{display:flex;align-items:center;gap:14px}
.svc-head .svc-ico{font-size:34px;color:var(--cyan-2);text-shadow:var(--glow);animation:icoGlow 2s ease-in-out infinite}
@keyframes icoGlow{0%,100%{text-shadow:0 0 10px var(--cyan)}50%{text-shadow:0 0 22px var(--cyan),0 0 40px var(--cyan-2)}}
.svc-kicker{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.35em;color:var(--muted)}
.svc-title{margin:2px 0 0;font-family:'Orbitron',sans-serif;font-weight:900;font-size:22px;letter-spacing:.25em;color:#fff;text-shadow:var(--glow)}
.svc-x{width:30px;height:30px;background:transparent;border:1px solid var(--stroke);color:var(--muted);cursor:pointer;font-size:14px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:all .15s}
.svc-x:hover{color:var(--red);border-color:var(--red)}

.svc-body{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;padding:20px 22px;position:relative;z-index:2;overflow:auto;max-height:60vh}
.svc-body-l{display:flex;flex-direction:column;gap:10px}
.svc-row{display:flex;align-items:baseline;gap:10px;padding:4px 0;border-bottom:1px dashed rgba(0,200,255,.18);font-family:'Share Tech Mono',monospace;font-size:12px}
.svc-k{min-width:78px;color:var(--cyan);letter-spacing:.25em;font-size:10px}
.svc-v{color:var(--ink);letter-spacing:.05em;flex:1;word-break:break-all}
.svc-url{color:var(--cyan-2);text-decoration:none;border-bottom:1px dashed rgba(74,227,255,.4)}
.svc-url:hover{color:#fff;border-color:#fff}
.status-ok{color:#4aff9a}
.status-ok::before{content:"";display:inline-block;width:8px;height:8px;background:#4aff9a;border-radius:50%;margin-right:6px;box-shadow:0 0 8px #4aff9a;animation:pulse 1.4s ease-in-out infinite}
.svc-sub{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.3em;color:var(--cyan);margin:14px 0 4px}
.svc-desc{margin:0;font-size:13px;color:var(--ink);line-height:1.6;letter-spacing:.02em}
.svc-list{list-style:none;margin:0;padding:0;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.08em}
.svc-list li{padding:3px 0 3px 18px;position:relative}
.svc-list li::before{content:"▸";position:absolute;left:0;color:var(--cyan)}

.svc-body-r{display:flex;flex-direction:column;gap:14px;align-items:center}
.svc-gauge{position:relative;width:140px;height:140px}
.svc-gauge svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(0,200,255,.6))}
.svc-gauge .gg-fg{stroke-dasharray:314;stroke-dashoffset:60}
.svc-gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.svc-gauge-c span{font-family:'Orbitron',sans-serif;font-weight:900;font-size:34px;color:#fff;text-shadow:var(--glow)}
.svc-gauge-c em{font-style:normal;color:var(--cyan);font-size:14px;margin-top:-4px}
.svc-gauge-c small{font-family:'Share Tech Mono',monospace;color:var(--muted);letter-spacing:.3em;font-size:9px;margin-top:4px}
.svc-mini{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-family:'Share Tech Mono',monospace;font-size:10px}
.svc-mini > div{border:1px solid var(--stroke);padding:6px 10px;min-width:74px;text-align:center;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.svc-mini em{display:block;color:var(--muted);font-style:normal;letter-spacing:.2em;font-size:9px}
.svc-mini b{display:block;color:var(--cyan-2);font-size:14px;font-family:'Orbitron',sans-serif;font-weight:700;margin-top:2px}
.svc-warn{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--amber);letter-spacing:.1em;border:1px dashed rgba(255,184,77,.4);padding:6px 10px;text-align:center;line-height:1.5}
.svc-warn span{color:var(--amber);font-size:14px;margin-right:4px}

.svc-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 22px;border-top:1px solid var(--stroke-hot);
  background:linear-gradient(0deg,rgba(0,200,255,.12),transparent);
  position:relative;z-index:2;
}
.svc-btn{
  background:transparent;border:1px solid var(--stroke-hot);
  color:var(--cyan);font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.3em;font-weight:700;
  padding:10px 22px;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:all .15s;
  text-transform:uppercase;
}
.svc-btn.cancel{color:var(--muted);border-color:var(--stroke)}
.svc-btn.cancel:hover{color:var(--red);border-color:var(--red)}
.svc-btn.proceed{background:var(--cyan);color:#001018;border-color:var(--cyan);box-shadow:0 0 12px rgba(0,200,255,.6)}
.svc-btn.proceed:hover{background:#fff;color:#000;box-shadow:0 0 20px #fff}
.svc-countdown{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.2em}
.svc-countdown b{color:var(--cyan-2);font-size:13px}

/* scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}