/* ============================================================================
   Main view (SPEC §9): CSS grid — top bar, enemy zone, context strip, player zone,
   weapons row, systems row. Zones 2–4 share the canvas behind the DOM rows.
   Compact mode (#view height < 600) shrinks the fixed rows; targets stay >= 40px.
   Pixel-art pass (ART.md "HUD / overlays"): square steel frames, flat fills, hard 2px
   lines and drops, segmented bars, crisp pixel icons, steps() animations only.
   ========================================================================== */
.mv {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 40px minmax(0, 45fr) 44px minmax(0, 55fr) 6px 56px 6px 56px 6px;
  --tile: 44px;
  --rowh: 56px;
  /* hull steel (ART.md palette), dark -> light */
  --st0: #1b2233;
  --st1: #2c374f;
  --st2: #46546f;
  --st3: #6f7f9c;
  --st4: #a7b4cc;
  --ink: var(--frame-out);
  --steel-frame: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--st3), inset 0 0 0 calc(var(--px) * 2) var(--ink);
  --dim-frame: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--st2), inset 0 0 0 calc(var(--px) * 2) var(--ink);
  overflow: hidden;
  z-index: 0;
  isolation: isolate;          /* keep the HUD's z-indexes below #overlays */
}
.mv.compact {
  grid-template-rows: 36px minmax(0, 45fr) 40px minmax(0, 55fr) 6px 52px 6px 52px 6px;
  --tile: 40px;
  --rowh: 52px;
}
.mv.norun > :not(.mv-canvas) { visibility: hidden; }

.mv-canvas { grid-row: 2 / 5; grid-column: 1; width: 100%; height: 100%; display: block; z-index: 0; image-rendering: pixelated; }
.mv-top    { grid-row: 1; grid-column: 1; z-index: 3; }
.mv-enemy  { grid-row: 2; grid-column: 1; z-index: 1; }
.mv-ctx    { grid-row: 3; grid-column: 1; z-index: 2; }
.mv-player { grid-row: 4; grid-column: 1; z-index: 1; }
.mv-weap   { grid-row: 6; grid-column: 1; z-index: 2; }
.mv-sys    { grid-row: 8; grid-column: 1; z-index: 2; }
.mv-frame  { grid-row: 2 / 5; grid-column: 1; z-index: 4; pointer-events: none; }

/* hard pressed state (input.js toggles .press) */
.mv .press { transform: translateY(var(--px)); filter: brightness(1.25); }

/* pixel icons (view.js pxIcon): integer sizes = 2 CSS px per art pixel */
.pxi { width: 24px; height: 24px; vertical-align: middle; }
.pxi.px8 { width: 16px; height: 16px; }
.pxi svg { shape-rendering: crispEdges; }

/* pips (systems row, context strip, weapon cards): flat blocks, hard edges */
.mv .pips { display: inline-flex; gap: 1px; align-items: center; }
.mv .pip {
  display: block; width: 5px; height: 8px; flex: none;
  background: #0c1a12;
  box-shadow: inset 0 0 0 1px #2f7a45;
}
.mv .pip.on { background: var(--power); box-shadow: inset 0 2px 0 #b4f5c3; }
.mv .pip.off { background: #0c1a12; }
.mv .pip.ion {
  /* 1px checkerboard dither */
  background: repeating-conic-gradient(var(--ion) 0 25%, #241c4f 0 50%) 0 0 / 2px 2px;
  box-shadow: inset 0 0 0 1px var(--ion);
}
.mv .pip.dmg {
  background: linear-gradient(180deg, var(--danger) 0 3px, #2a070b 3px 5px, var(--danger) 5px);
  box-shadow: none;
}

/* ---------------------------------------------------------------- 1. top bar */
.mv-top {
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: var(--st0);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--st2), 0 var(--px) 0 var(--ink);
}
.tb-hull { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--hull-ok); }
.tb-hull.mid { color: var(--hull-mid); }
.tb-hull.low { color: var(--hull-low); }
.hb-track {
  flex: 1; min-width: 40px; height: 16px;
  display: flex; gap: 1px; padding: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 var(--px) var(--st2);
}
.hb-track > i, .ez-hbar > i { display: block; flex: 1 1 0; min-width: 0; background: #1d2536; }
.hb-track > i.on { background: currentColor; box-shadow: inset 0 var(--px) 0 rgba(255, 255, 255, 0.35); }
.tb-hull.low .hb-track > i.on { animation: mv-blink 0.8s steps(1, end) infinite; }
.hb-txt { font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap; }
.hb-txt small { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.tb-resrow { display: flex; gap: 6px; flex: none; }
.tb-res {
  display: flex; align-items: center; gap: 3px; min-width: 38px; height: 24px; padding: 0 5px 0 3px;
  font-weight: 700; font-size: 15px; line-height: 1;
  background: var(--ink); box-shadow: inset 0 0 0 var(--px) var(--st1);
}
.tb-res b { color: var(--text); }
.tb-res.zero b { color: var(--danger); }
.tb-res.zero { box-shadow: inset 0 0 0 var(--px) #7a2a2f; }
.mv-menu {
  position: relative; flex: none; width: 40px; height: 40px; margin-right: -4px;
  border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  color: var(--st4); background: transparent;
}
/* enlarged hit area (>= 44px, compact >= 40px) */
.mv-menu::after { content: ''; position: absolute; inset: -2px -4px -4px -4px; }
.mv-menu.press { color: var(--accent); }
.mv.compact .mv-menu { width: 40px; height: 36px; }
.mv.compact .mv-menu::after { inset: 0 -4px -6px -4px; }

/* ---------------------------------------------------------------- 2. enemy zone */
.mv-enemy { position: relative; min-height: 0; }
.ez-combat { position: relative; }
.ez-head {
  position: relative; z-index: 1;
  height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 8px;
  background: #2c1119;
  box-shadow: inset 0 calc(var(--px) * -1) 0 #6b2330;
  font-size: var(--fs-s); line-height: 1;
}
.ez-head.phase2 { background: #5e1320; box-shadow: inset 0 calc(var(--px) * -1) 0 var(--danger); }
.ez-id { min-width: 0; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; overflow: hidden; }
.ez-name { color: #ffd6d6; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.ez-fac { color: #d99a9a; font-size: var(--fs-s); }
.ez-st { display: flex; align-items: center; gap: 8px; flex: none; }
.ez-sh { display: inline-flex; gap: 2px; }
.shp {
  position: relative; width: 10px; height: 10px; overflow: hidden;
  background: #0b2233; box-shadow: inset 0 0 0 var(--px) var(--shield);
}
.shp i { position: absolute; inset: 0; background: var(--shield); transform-origin: left center; opacity: 0.5; }
.shp.up i { opacity: 1; }
.shp.up { box-shadow: inset 0 0 0 var(--px) #bfeaff; }
.shp.dead { box-shadow: inset 0 0 0 var(--px) var(--text-faint); background: transparent; }
.ez-eva { color: var(--text-dim); font-size: var(--fs-s); }
.ez-hull { display: inline-flex; align-items: center; gap: 4px; }
.ez-hbar {
  display: flex; gap: 1px; width: 60px; height: 8px; padding: 1px;
  background: var(--ink); color: var(--hull-ok);
}
.ez-hbar.mid { color: var(--hull-mid); }
.ez-hbar.low { color: var(--hull-low); }
.ez-hbar > i.on { background: currentColor; }
.ez-hn { font-weight: 700; font-size: 12px; color: #ffd6d6; min-width: 34px; text-align: right; }
.ez-weap { position: relative; z-index: 1; height: 16px; display: flex; align-items: center; gap: 4px; padding: 0 8px; overflow: hidden;
  background: rgba(5, 7, 14, 0.82); }
.ez-chips { display: flex; gap: 4px; min-width: 0; }
.ewc {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; height: 16px;
  padding: 0 4px; background: #24101a; box-shadow: inset var(--px) 0 0 #7a2a35;
}
.ewn { font-size: var(--fs-s); line-height: 11px; color: #ffcaca; white-space: nowrap; }
.ewb { position: relative; display: block; height: 3px; background: #3a1a22; }
.ewb i { position: absolute; inset: 0; background: #ff8a7a; transform-origin: left center; }
.ewc.off { opacity: 0.45; filter: grayscale(1); }
.ewc.hot { animation: mv-hot 0.5s steps(1, end) infinite; }
.ewc.hot .ewb i { background: var(--danger); }
.ez-volley {
  font-size: var(--fs-s); line-height: 14px; padding: 0 4px; color: var(--accent);
  background: #2a1d08; box-shadow: inset 0 0 0 1px var(--accent);
}
.ez-ftl { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--danger);
  font-size: var(--fs-s); line-height: 1; font-weight: 700; white-space: nowrap; animation: mv-blink 0.6s steps(1, end) infinite; }
.ez-ftlbar { position: relative; display: block; width: 44px; height: 4px; background: #3a1418; }
.ez-ftlbar i { position: absolute; inset: 0; background: var(--danger); transform-origin: left center; }

/* hub: beacon info card (steel panel with a sector-colored stripe) */
.ez-card {
  --sector: #58c7d6;
  position: absolute; left: 10px; top: 10px; max-width: min(300px, calc(100% - 20px));
  padding: 10px 12px 10px 16px;
  background: var(--st0);
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--st3), inset 0 0 0 calc(var(--px) * 2) var(--ink),
              inset calc(var(--px) * 4) 0 0 var(--sector), var(--pix-drop);
  display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-s);
}
.bc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bc-sector { font-size: 15px; color: var(--text); }
.bc-type { color: var(--sector); font-weight: 600; }
.bc-kind { color: var(--accent); font-weight: 700; font-size: 14px; }
.bc-line { color: var(--text-dim); }
.bc-line.danger { color: var(--danger); font-weight: 700; }
.bc-line.warn { color: var(--warn); }
.mv.compact .ez-card { top: 6px; padding: 6px 10px 6px 14px; gap: 1px; }

/* ---------------------------------------------------------------- 3. context strip */
.mv-ctx {
  position: relative; padding: 0 8px; min-width: 0;
  background: #141b2e;
  box-shadow: inset 0 var(--px) 0 var(--st2), inset 0 calc(var(--px) * -1) 0 var(--st2),
              0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink);
}
.cx { height: 100%; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cx .btn {
  min-height: 40px; height: 40px; padding: 0 10px; font-size: 13.5px;
  box-shadow: inset 0 0 0 var(--px) var(--st3), inset 0 0 0 calc(var(--px) * 2) var(--ink);
}
.cx .btn.primary { box-shadow: inset 0 0 0 var(--px) #ffd894, inset 0 calc(var(--px) * -2) 0 #c9832a; }
.cx .btn.ghost { box-shadow: inset 0 0 0 var(--px) var(--st2); }
.cx .btn.press { box-shadow: inset 0 0 0 var(--px) var(--frame-hi), inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.mv .btn.disabled { opacity: 0.35; pointer-events: auto; }
.cx-l1 { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; font-size: 13.5px; line-height: 1.2; }
.cx-sub { font-size: var(--fs-s); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cx-sub.danger { color: var(--danger); }
.cx-l1 .danger { color: var(--danger); }

.cx-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cx-haz { font-size: var(--fs-s); color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cx-haz:empty { display: none; }
.cx-haz.note { color: var(--danger); }
.cx-ftl { flex: none; width: 120px; height: 40px; display: flex; align-items: center; }
.cx-ftlbar { width: 120px; display: flex; flex-direction: column; gap: 3px; }
.cx-ftltrack { position: relative; height: 10px; background: var(--ink); box-shadow: inset 0 0 0 var(--px) #1f4a66; }
.cx-ftltrack i { position: absolute; inset: 2px; background: var(--shield); transform-origin: left center; }
.cx-ftltrack::after {
  content: ''; position: absolute; inset: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--ink) 6px 8px);
}
.cx-ftltxt { font-size: var(--fs-s); color: var(--shield); line-height: 1.1; white-space: nowrap; }
.cx-ftlbar.bad .cx-ftltxt { color: var(--danger); }
.cx-ftlbar.bad .cx-ftltrack { box-shadow: inset 0 0 0 var(--px) #6b2330; }
.cx-flee { width: 96px; flex: none; gap: 4px !important; padding: 0 6px !important; animation: mv-flash 1.2s steps(1, end) infinite; }
.cx-volley { width: 64px; flex: none; padding: 0 !important; }
.cx .cx-volley.on { background: #3d2a0c; color: var(--accent); box-shadow: inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) var(--ink); }

.cx-wlabel { flex: none; min-width: 58px; max-width: 76px; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; overflow: hidden; }
.cx-wlabel b { color: var(--accent); font-size: 13px; white-space: nowrap; margin-left: -4px; }
.cx-wlabel span { font-size: var(--fs-s); color: var(--text-dim); white-space: nowrap; }
.cx-wlabel span.danger { color: var(--danger); }
.cx-wnote {
  flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center;
  font-size: var(--fs-s); line-height: 1.2; color: var(--danger); font-weight: 600; overflow: hidden;
}
.cx-qp {
  flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.cx-qp::-webkit-scrollbar { display: none; }
.qp {
  flex: none; width: 40px; height: 40px; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #ffd6d6;
  background: #3a1520; box-shadow: inset 0 0 0 var(--px) #8a3040, inset 0 0 0 calc(var(--px) * 2) var(--ink);
}
.qp.dmg { color: var(--danger); background: #54121c; box-shadow: inset 0 0 0 var(--px) var(--danger), inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.qp.ion { color: var(--ion); box-shadow: inset 0 0 0 var(--px) var(--ion), inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.qp.cur { background: #4a3512; color: var(--accent); box-shadow: inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.cx-sq {
  flex: none; width: 48px; padding: 0 !important; flex-direction: column; gap: 0 !important;
  font-size: var(--fs-s) !important; line-height: 1.1;
}
.cx .cx-sq.on { color: var(--power); box-shadow: inset 0 0 0 var(--px) var(--power), inset 0 0 0 calc(var(--px) * 2) var(--ink); }

.cx-disc {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  color: var(--race, #f2c29b); background: var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--accent);
}
.cx-disc .pxi { width: 16px; height: 16px; }
.cx-ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cx-ctext b { color: var(--accent); }
.cx-hp { color: var(--text-dim); font-size: var(--fs-s); }
.cx-hp.danger { color: var(--danger); }

.cx-pm { width: 56px; flex: none; padding: 0 !important; font-size: 24px !important; font-weight: 700; }
.cx-smid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cx-smid .cx-l1 { gap: 6px; }
.cx-sicon { color: var(--power); display: inline-flex; }
.cx-sval { font-weight: 700; color: var(--power); }

.cx-hub { gap: 6px; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.cx-hub b { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.cx-hub .danger { color: var(--danger); }

/* ---------------------------------------------------------------- 4. player zone */
.mv-player { position: relative; min-height: 0; }
.crew-panel {
  position: absolute; left: 8px; top: 8px; bottom: 8px; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.crew-panel > * { pointer-events: auto; }
.crew-grid {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 5), var(--tile));
  grid-auto-columns: var(--tile);
  gap: 4px;
  pointer-events: none;
}
.crew-grid > * { pointer-events: auto; }
.ctile {
  --race: #f2c29b;
  position: relative; width: var(--tile); height: var(--tile); cursor: pointer;
  background: rgba(27, 34, 51, 0.94);
  box-shadow: inset 0 0 0 var(--px) var(--st2), inset 0 0 0 calc(var(--px) * 2) var(--ink);
}
/* race-colored pixel bust (view.js pxIcon 'c_<race>') */
.cdisc {
  position: absolute; left: 50%; top: 5px; width: 16px; height: 16px; margin-left: -8px;
  color: var(--race); display: block;
}
.cdisc .pxi { display: block; width: 16px; height: 16px; }
.mv.compact .cdisc { top: 4px; }
.cn { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 12.5px; line-height: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.mv.compact .cn { bottom: 6px; }
.cbadge {
  position: absolute; right: 2px; top: 2px; min-width: 12px; height: 12px; padding: 0 1px;
  font-size: 12px; line-height: 12px; font-weight: 700; text-align: center; color: var(--accent-ink); background: var(--power);
}
.cbadge:empty { display: none; }
.cbadge.t-repair { background: var(--accent); }
.cbadge.t-fire { background: var(--fire); }
.cbadge.t-breach { background: var(--shield); }
.cbadge.t-walk { background: var(--text-dim); }
.chp { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: var(--ink); }
.chp i { position: absolute; inset: 0; background: var(--good); transform-origin: left center; }
.ctile.hurt .chp i { background: var(--danger); }
.ctile.hurt { animation: mv-hurt 1s steps(1, end) infinite; }
.ctile.sel {
  background: #4a3512;
  box-shadow: inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) var(--ink);
}
.crew-all {
  width: var(--tile); min-height: 40px !important; height: 40px; padding: 0 !important;
  flex-direction: column; gap: 0 !important; font-size: var(--fs-s) !important; line-height: 1.1;
}
.mv-pill {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 3;
  padding: 3px 10px; white-space: nowrap; pointer-events: none;
  font-size: var(--fs-s); color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 calc(var(--px) * -1) 0 #c9832a, var(--pix-drop);
  display: none;
}
.mv.paused .mv-pill { display: block; }
.mv.paused .mv-frame { box-shadow: inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) rgba(5, 7, 14, 0.6); }

/* ---------------------------------------------------------------- 5. weapons row */
.mv-weap { display: flex; gap: 4px; padding: 0 8px; min-width: 0; }
.wr-cards { flex: 1; min-width: 0; display: flex; gap: 4px; }
.wcard {
  position: relative; flex: 1 1 0; max-width: 74px; min-width: 0; height: 100%; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; padding: 6px 7px 6px;
  background: var(--st0);
  box-shadow: var(--dim-frame);
  color: var(--text-dim);
}
.wcard.on { color: var(--text); background: #1f2840; box-shadow: var(--steel-frame); }
.wcard.full { box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--power), inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.wcard.wait { box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) #b3802f, inset 0 0 0 calc(var(--px) * 2) var(--ink); }
/* charged but no target (missiles drop theirs after each shot): blinking amber frame + 选目标 badge */
.wcard.idle { color: var(--text); box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) var(--ink);
  animation: mv-idle 0.8s steps(1, end) infinite; }
.wcard.on.idle .wc-bar i { background: var(--accent); }
.wc-tgt.pick { color: var(--accent); }
.wcard.nomis { box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) #8a3040, inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.wcard.armed {
  background: #4a3512; color: var(--text); animation: none;
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) var(--ink), var(--pix-drop);
}
.wcard.empty { cursor: default; background: transparent; box-shadow: none; outline: var(--px) dashed var(--st1); outline-offset: -2px; align-items: center; justify-content: center; opacity: 0.7; }
.wc-empty { font-size: var(--fs-s); color: var(--text-faint); }
.wc-top { display: flex; align-items: baseline; gap: 4px; line-height: 1; min-width: 0; }
.wc-n { font-size: 11px; color: var(--text-faint); font-weight: 700; }
.wc-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mv .wc-tgt.tag { display: inline; padding: 0; background: none; box-shadow: none; line-height: 1; color: var(--missile); font-weight: 600; font-size: var(--fs-s); opacity: 0.85; }
.wc-bar { position: relative; display: block; height: 6px; background: var(--ink); }
.wc-bar i { position: absolute; inset: 0; background: #2f7a45; transform-origin: left center; }
.wc-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 4px, var(--ink) 4px 6px);
}
.wcard.on .wc-bar i { background: #3fae5f; }
.wcard.full .wc-bar i { background: var(--power); }
.wcard.wait .wc-bar i { background: var(--accent); }
.wcard:not(.on) .wc-bar i { background: #50586e; }
.wc-bot { display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 12px; }
.mv .wc-pips { display: inline-flex; gap: 2px; }
.mv .wc-pips .pip { width: 6px; height: 6px; background: #0c1a12; box-shadow: inset 0 0 0 1px #2f7a45; }
.mv .wc-pips .pip.on { background: var(--power); box-shadow: inset 0 -2px 0 #2f9c4b; }
.wc-tgt { font-size: var(--fs-s); font-weight: 700; color: var(--accent); white-space: nowrap; line-height: 1; }
.wcard.nomis .wc-tgt { color: var(--danger); }
.wcard[data-type="missile"].on .wc-name { color: var(--missile); }

.wr-hubrow { flex: 1; min-width: 0; display: flex; gap: 6px; }
.wr-hub { flex: 1 1 0; max-width: 110px; height: 100%; min-height: 0; flex-direction: column; gap: 2px; padding: 0 6px; font-size: 13.5px; }

.pause-btn {
  flex: none; margin-left: auto; width: 52px; height: 100%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--text);
  background: var(--panel-3); box-shadow: var(--steel-frame);
}
.pause-btn.paused {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) #ffd894, inset 0 calc(var(--px) * -2) 0 #c9832a;
  animation: mv-flash 1.2s steps(1, end) infinite;
}

/* ---------------------------------------------------------------- 6. systems row */
.mv-sys { display: flex; gap: 6px; padding: 0 8px; justify-content: space-between; min-width: 0; }
.mv-sys .reactor, .mv-sys .schip {
  position: relative; flex: 1 1 52px; max-width: 64px; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--st0); box-shadow: var(--steel-frame);
}
.mv-sys .reactor {
  gap: 0; background: #0f2418;
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) #2f7a45, inset 0 0 0 calc(var(--px) * 2) var(--ink);
}
.rx-lbl { display: none; }
.rx-free { font-size: 24px; line-height: 24px; color: var(--power); }
.mv-sys .reactor.empty .rx-free { color: var(--text-dim); }
.rx-used { font-size: 12px; line-height: 12px; color: #7fd293; font-weight: 600; }
.mv .rx-pips { display: flex; gap: 1px; margin-top: 3px; }
.mv .rx-pips .pip { width: 3px; height: 5px; background: #0c1a12; box-shadow: none; }
.mv .rx-pips .pip.on { background: var(--power); }
.schip { cursor: pointer; padding-top: 2px; }
.sc-ico { line-height: 1; color: var(--power); display: inline-flex; }
.schip.zero .sc-ico { color: var(--text-faint); }
.schip.ion .sc-ico { color: var(--ion); }
.schip.dmg .sc-ico { color: var(--danger); }
.mv-sys .schip.ion { box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--ion), inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.mv-sys .schip.dmg { background: #2a1119; box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--danger), inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.mv-sys .schip.focus {
  background: #4a3512;
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) var(--ink);
}
.schip.missing { opacity: 0.25; pointer-events: none; }
.sc-lvl { position: absolute; right: 5px; top: 4px; font-size: 12px; line-height: 12px; color: var(--text-faint); font-weight: 700; }
.mv.compact .sc-lvl { top: 3px; }

/* ---------------------------------------------------------------- targeting callout */
.mv-callout {
  position: absolute; z-index: 6; height: 28px; padding: 0 12px; transform: translateX(-50%);
  line-height: 28px; white-space: nowrap; pointer-events: none;
  font-size: 13.5px; font-weight: 700; color: var(--accent);
  background: var(--ink);
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--accent), var(--pix-drop);
}

/* ---------------------------------------------------------------- coach tips (G.Tips) */
.tip-layer { z-index: 40; }
.tip-ring {
  position: absolute; pointer-events: none !important; border: var(--px) solid var(--accent);
  box-shadow: 0 0 0 var(--px) var(--frame-out), inset 0 0 0 var(--px) var(--frame-out);
  animation: mv-blink 1s steps(1, end) infinite;
}
.tip-bubble {
  position: absolute; padding: 14px 14px 12px; font-size: var(--fs-m); line-height: 1.5;
  background: #1b2233;
  box-shadow: 0 0 0 var(--px) var(--frame-out), inset 0 0 0 var(--px) var(--accent), inset 0 0 0 calc(var(--px) * 2) var(--frame-out),
              0 calc(var(--px) * 3) 0 0 var(--frame-shade);
  animation: sheet-in 160ms steps(4, end);
}
.tip-bubble p { margin: 0 0 10px; }
.tip-ok { width: 100%; min-height: 44px; }
/* stepped pixel pointer (solid accent), 14×8: points down (above), up (below) or left (side) */
.tip-arrow {
  position: absolute; bottom: -8px; width: 14px; height: 8px; background: var(--accent);
  clip-path: polygon(0 0, 14px 0, 14px 2px, 12px 2px, 12px 4px, 10px 4px, 10px 6px, 8px 6px, 8px 8px,
                     6px 8px, 6px 6px, 4px 6px, 4px 4px, 2px 4px, 2px 2px, 0 2px);
}
.tip-bubble.below .tip-arrow { bottom: auto; top: -8px; transform: scaleY(-1); }
.tip-bubble.side .tip-arrow {
  bottom: auto; left: -8px !important; width: 8px; height: 14px;
  clip-path: polygon(8px 0, 8px 14px, 6px 14px, 6px 12px, 4px 12px, 4px 10px, 2px 10px, 2px 8px, 0 8px,
                     0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0);
}

/* ---------------------------------------------------------------- animation (steps only) */
@keyframes mv-blink { 50% { opacity: 0.45; } }
@keyframes mv-hurt { 50% { background: #4a1620; } }
@keyframes mv-hot { 50% { filter: brightness(1.6); } }
@keyframes mv-flash { 50% { filter: brightness(1.2); } }
@keyframes mv-idle { 50% { background: #3d2a0c; } }

@media (max-width: 370px) {
  .tb-resrow { gap: 4px; }
  .tb-res { min-width: 34px; font-size: 14px; padding: 0 4px 0 2px; gap: 2px; }
  .cx-ftl { width: 108px; }
  .cx-ftlbar { width: 108px; }
  .cx-flee { width: 96px; }
}