/* Watch Fortress cogitator: a monochrome phosphor tube.
   One hue, as on real hardware. Hierarchy comes from brightness, weight,
   inversion and framing, never from a second colour. */

@font-face { font-family: "VT323"; src: url("fonts/vt323-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/vt323-latin-ext-400-normal.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Silkscreen"; src: url("fonts/silkscreen-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("fonts/silkscreen-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --phosphor: #8CFF5A;
  --phosphor-dim: #4C9A33;
  --burn: #1F3D16;
  --glass: #061206;
  --bezel: #0E120C;
  --bezel-edge: #232a1d;
  --glow: 0 0 2px rgba(140, 255, 90, .9), 0 0 9px rgba(140, 255, 90, .35);
  --glow-dim: 0 0 6px rgba(76, 154, 51, .45);
  --read: "VT323", "Lucida Console", monospace;
  --plate: "Silkscreen", "VT323", monospace;
  --s1: 4px; --s2: 8px; --s3: 14px; --s4: 22px; --s5: 34px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bezel);
  color: var(--phosphor);
  font: 22px/1.15 var(--read);
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* ---- the monitor ---- */
.bezel {
  min-height: 100%;
  padding: clamp(8px, 2.2vw, 28px);
  background: var(--bezel);
}
.tube {
  position: relative;
  min-height: calc(100vh - 2 * clamp(8px, 2.2vw, 28px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 540px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "mast mast" "campaign campaign" "chart readout" "status status";
  gap: var(--s3);
  padding: var(--s4);
  background: var(--glass);
  border: 2px solid var(--bezel-edge);
  border-radius: 18px / 22px;
  box-shadow: inset 0 0 90px 18px rgba(0, 0, 0, .85), inset 0 0 0 1px #000;
  overflow: hidden;
  text-shadow: var(--glow);
}
/* scanlines and a faint flicker, laid over everything but never catching clicks */
.tube::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  z-index: 5;
}
@media (prefers-reduced-motion: no-preference) {
  .tube::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
    background: rgba(140, 255, 90, .018);
    animation: flicker 7s steps(1) infinite;
  }
  @keyframes flicker { 0%, 100% { opacity: 1 } 47% { opacity: .4 } 48% { opacity: 1 } 83% { opacity: .7 } 84% { opacity: 1 } }
}

/* ---- framed boxes: double rule, title plate cut into the top edge ---- */
.box {
  position: relative;
  border: 2px solid var(--phosphor-dim);
  outline: 1px solid var(--burn);
  outline-offset: 3px;
  padding: var(--s4) var(--s3) var(--s3);
  margin-top: var(--s3);
}
.box > .plate {
  position: absolute; top: -0.7em; left: var(--s3);
  margin: 0;
  padding: 0 var(--s2);
  background: var(--glass);
  font: 700 15px/1.4 var(--plate);
  letter-spacing: .04em;
  border: 2px solid var(--phosphor-dim);
}

/* ---- masthead ---- */
.mast {
  grid-area: mast;
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3);
  border-bottom: 2px solid var(--phosphor-dim);
  padding-bottom: var(--s2);
}
.mast-origin { margin: 0; color: var(--phosphor-dim); text-shadow: var(--glow-dim); font-size: 20px; }
.mast-region {
  margin: 0;
  font: 700 clamp(24px, 3.4vw, 42px)/1.1 var(--plate);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.mast-sub { margin: 2px 0 0; font-size: 20px; color: var(--phosphor-dim); text-shadow: var(--glow-dim); min-height: 1em; }
.mast-clock { font-size: 26px; white-space: nowrap; }

/* ---- campaign band: the signature. One long meter, read across the whole tube. ---- */
.campaign {
  grid-area: campaign;
  display: grid; align-items: center; gap: var(--s2) var(--s4);
  grid-template-columns: minmax(10em, auto) minmax(0, 1fr) auto auto;
  border: 2px solid var(--phosphor); outline: 1px solid var(--phosphor-dim); outline-offset: 3px;
  padding: var(--s2) var(--s3);
}
.campaign .c-label { display: block; font: 700 12px/1.4 var(--plate); color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.campaign .c-name { display: block; font: 700 clamp(16px, 1.6vw, 22px)/1.15 var(--plate); overflow-wrap: anywhere; }
.campaign .c-meter { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.c-cells { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; }
.c-cells i { flex: 1 1 0; height: 22px; border: 1px solid var(--phosphor-dim); min-width: 2px; }
.c-cells i.on { background: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 6px rgba(140, 255, 90, .55); }
.c-pct { font: 700 clamp(20px, 2.2vw, 30px)/1 var(--plate); min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.c-counts { display: flex; gap: var(--s3); margin: 0; }
.c-counts div { text-align: center; }
.c-counts dt { font: 700 11px/1.3 var(--plate); color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.c-counts dd { margin: 0; font-size: 24px; font-variant-numeric: tabular-nums; }
.c-tl { display: flex; gap: 3px; margin-top: 2px; }
.c-tl i { font: 700 12px/1 var(--plate); font-style: normal; padding: 4px 6px; border: 1px solid var(--phosphor-dim); color: var(--phosphor-dim); text-shadow: none; }
.c-tl i.on { background: var(--phosphor); color: var(--glass); border-color: var(--phosphor); }

/* ---- chart ---- */
.chart { grid-area: chart; display: flex; flex-direction: column; min-height: 0; }
.chart-frame { position: relative; border: 1px solid var(--burn); }
.chart-svg { width: 100%; height: clamp(420px, 68vh, 860px); display: block; touch-action: none; cursor: grab; }
.chart-svg.panning { cursor: grabbing; }
.chart-svg .grid line { stroke: var(--burn); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .halo { fill: none; stroke: var(--burn); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.chart-svg .halo.on { stroke: var(--phosphor-dim); stroke-dasharray: none; }
.chart-svg .lane { stroke: var(--phosphor-dim); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .7; }
.chart-svg .lane.gate { stroke-width: 2; }
.chart-svg .lane.unstable { stroke-dasharray: 5 6; }
.chart-svg .lane.hot { stroke: var(--phosphor); opacity: 1; }
.chart-svg .lane.lit { stroke: var(--phosphor); opacity: 1; stroke-width: 2.5; }
.chart-svg.dim .lane:not(.lit):not(.hot) { opacity: .35; }

.chart-svg .pl { cursor: pointer; outline: none; color: var(--phosphor); }
.chart-svg .pl .hit { fill: transparent; }
.chart-svg .pl use { color: var(--phosphor); }
.chart-svg .pl.st-free use { color: var(--phosphor-dim); }
.chart-svg .pl.threatened use { color: var(--phosphor); }
.chart-svg .pl.locked use { opacity: .55; }
.chart-svg .pl .alarm { fill: none; stroke: var(--phosphor); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart-svg .pl .brackets { fill: none; stroke: var(--phosphor); stroke-width: 1.5; }
.chart-svg .pl:focus-visible .hit, .chart-svg .pl.open .hit { stroke: var(--phosphor); stroke-dasharray: 2 2; stroke-width: 1.5; }
.chart-svg text { font-family: var(--read); paint-order: stroke; stroke: var(--glass); stroke-width: 4px; }
.chart-svg .pl .pname { fill: var(--phosphor); font-size: 17px; display: none; }
.chart-svg.zoomed .pl .pname, .chart-svg .pl.in-sel .pname, .chart-svg .pl.st-defense .pname { display: inline; }
.chart-svg .pl .kt { fill: var(--phosphor); font-size: 15px; display: none; }
.chart-svg.zoomed .pl .kt, .chart-svg .pl.in-sel .kt { display: inline; }
.chart-svg .pl .clock { fill: var(--phosphor); font-size: 15px; }
.chart-svg .sys { cursor: pointer; outline: none; }
.chart-svg .sys text { fill: var(--phosphor); font-family: var(--plate); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.chart-svg .sys:focus-visible text, .chart-svg .sys.on text { text-decoration: underline; }
.chart-svg.far .sys text { font-size: 10px; }
.chart-svg.dim .pl:not(.in-sel) { opacity: .55; }
.chart-svg.dim .sys:not(.on) text { fill: var(--phosphor-dim); }
@media (prefers-reduced-motion: no-preference) {
  .chart-svg .pl .alarm { animation: alarm 1.4s steps(2) infinite; }
  @keyframes alarm { 50% { opacity: .2; } }
}

.zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 6; }
.zoom button {
  font: 700 14px/1 var(--plate); width: 34px; height: 30px; color: var(--phosphor); background: var(--glass);
  border: 2px solid var(--phosphor-dim); cursor: pointer; text-shadow: none;
}
.zoom button:hover { border-color: var(--phosphor); }
.zoom button:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 2px; }
#zoom-fit { font-size: 10px; }

.glyph-defs { position: absolute; width: 0; height: 0; }
.g-fill { fill: currentColor; }
.g-line { fill: none; stroke: currentColor; stroke-width: 2; }
.glyph { width: 15px; height: 15px; color: var(--phosphor); vertical-align: -2px; margin-right: 6px; overflow: visible; }
.glyph.locked { opacity: .55; }

.legend {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  font-size: 19px; color: var(--phosphor-dim); text-shadow: var(--glow-dim);
}
.route-key { display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--phosphor-dim); vertical-align: middle; margin-right: 6px; }
.route-key.unstable { border-top-style: dashed; }

/* ---- readout panel ---- */
.readout { grid-area: readout; max-height: calc(clamp(420px, 68vh, 860px) + 72px); position: relative; min-height: 0; overflow-y: auto; padding-right: var(--s1); scrollbar-width: thin; scrollbar-color: var(--phosphor-dim) transparent; }
.readout p { margin: 0 0 var(--s2); }
.readout .dim { color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.readout .prose { white-space: pre-line; max-width: 34em; }

.rows { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s3); }
.rows dt { color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.rows dt::after { content: ":"; }
.rows dd { margin: 0; overflow-wrap: anywhere; }

/* The signature: projected mortality as a difficulty gauge. The whole ladder
   is always visible so a level reads as a position, not a status word. */
.diff {
  margin: var(--s3) 0;
  border: 2px solid var(--phosphor);
  outline: 1px solid var(--phosphor-dim); outline-offset: 3px;
}
.diff .d-head {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: 4px 8px; border-bottom: 2px solid var(--phosphor);
  font: 700 13px/1.3 var(--plate);
}
.d-steps {
  list-style: none; margin: 0; padding: 8px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
}
.d-step {
  border: 2px solid var(--burn);
  color: var(--phosphor-dim); text-shadow: none;
  text-align: center; padding: 3px 0 2px;
  min-width: 0;
}
.d-step .d-num { display: block; font: 700 14px/1.2 var(--plate); }
.d-step .d-name { display: block; font-size: 14px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.d-step.lit { border-color: var(--phosphor-dim); background: var(--burn); color: var(--phosphor); }
.d-step.here {
  border-color: var(--phosphor); background: var(--phosphor); color: var(--glass);
  box-shadow: 0 0 12px rgba(140, 255, 90, .5);
}
.diff .d-value {
  border-top: 2px solid var(--phosphor);
  padding: 5px 8px 7px; text-align: center;
  font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--plate);
  background: var(--phosphor); color: var(--glass); text-shadow: none;
  box-shadow: 0 0 14px rgba(140, 255, 90, .45);
}
@media (prefers-reduced-motion: no-preference) {
  .diff.arrive .d-step.lit, .diff.arrive .d-step.here { animation: burn-in .4s steps(4) 1 backwards; }
  .diff.arrive .d-step:nth-child(2) { animation-delay: .06s; }
  .diff.arrive .d-step:nth-child(3) { animation-delay: .12s; }
  .diff.arrive .d-step:nth-child(4) { animation-delay: .18s; }
  .diff.arrive .d-step:nth-child(5) { animation-delay: .24s; }
  .diff.arrive .d-step:nth-child(6) { animation-delay: .30s; }
  @keyframes burn-in { from { background: transparent; color: var(--phosphor-dim); border-color: var(--burn); } }
}

/* compact gauge used in planet rows */
.mini { display: inline-flex; align-items: center; gap: 8px; }
.mini-cells { display: inline-flex; gap: 2px; }
.mini-cells i { width: 7px; height: 13px; border: 1px solid var(--phosphor-dim); }
.mini-cells i.on { background: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 4px rgba(140, 255, 90, .6); }

.planets { list-style: none; margin: 0; padding: 0; }
.planets li { border-top: 1px solid var(--burn); }
.planets li:first-child { border-top: 0; }
.planets button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: var(--s2);
  padding: 4px 2px;
}
.planets button:hover .p-name, .planets button[aria-expanded="true"] .p-name { text-decoration: underline; text-underline-offset: 3px; }
.planets button:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 1px; }
.planets .p-class { color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.planets .p-detail { padding: 2px 2px var(--s2) 2.6em; }

.syslist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s3); }
.syslist button { all: unset; cursor: pointer; display: block; padding: 1px 0; }
.syslist button:hover, .syslist button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.syslist button:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 1px; }

.back { all: unset; cursor: pointer; color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.back:hover, .back:focus-visible { color: var(--phosphor); text-shadow: var(--glow); }
.back:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 2px; }

.boot p { margin: 0 0 2px; }
.cursor::after { content: "\2588"; }
@media (prefers-reduced-motion: no-preference) {
  .cursor::after { animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0 } }
}

/* ---- war ---- */
.link { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--phosphor-dim); }
.link:hover { text-decoration-color: var(--phosphor); }
.link:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 2px; }

/* presence: lit cells are enemy strength still on the ground */
.pres { display: inline-flex; gap: 2px; vertical-align: middle; }
.pres i { width: 6px; height: 12px; border: 1px solid var(--phosphor-dim); }
.pres i.on { background: var(--phosphor); border-color: var(--phosphor); }

.ready { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.ready-cells { display: inline-flex; gap: 3px; flex: 1 1 auto; }
.ready-cells i { flex: 1 1 0; height: 18px; border: 1px solid var(--phosphor-dim); }
.ready-cells i.on { background: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 6px rgba(140, 255, 90, .5); }
.ready-num { font: 700 20px/1 var(--plate); }

.factors, .fronts, .contested, .log { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.factors li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: 3px 0; border-top: 1px solid var(--burn); }
.factors .f-detail { grid-column: 1 / -1; font-size: 18px; color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.factors li.off { color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.fronts li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--s2); padding: 2px 0; }
.fronts .kt-name::before { content: "\25B8 "; }
.contested li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 3em; align-items: center; gap: var(--s2); padding: 3px 0; }
.contested .c-enemy, .contested .c-pct { color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.contested .c-pct { text-align: right; }
.log li { padding: 3px 0; border-top: 1px solid var(--burn); font-size: 19px; }
.log li:first-child { border-top: 0; }
.log .l-when { display: block; font-size: 16px; color: var(--phosphor-dim); text-shadow: var(--glow-dim); }

.warpanel { border: 2px solid var(--phosphor); margin: var(--s1) 0 var(--s3); }
.warpanel .w-head { display: flex; justify-content: space-between; gap: var(--s2); padding: 4px 8px; border-bottom: 2px solid var(--phosphor); font: 700 13px/1.3 var(--plate); }
.warpanel .w-meter { display: flex; align-items: center; gap: var(--s2); padding: 8px; flex-wrap: wrap; }
.warpanel .w-meter .pres i { width: 7px; height: 16px; }
.warpanel .w-hp { margin-left: auto; }
.warpanel > .rows { padding: 0 8px 6px; }
.missions { list-style: none; margin: 0; padding: 0 8px; }
.mission { border-top: 1px solid var(--burn); padding: 6px 0; }
.mission .m-top { display: flex; align-items: baseline; gap: var(--s2); }
.mission .m-code { white-space: nowrap; flex: 0 0 auto; font: 700 14px/1.4 var(--plate); padding: 0 6px; background: var(--phosphor); color: var(--glass); text-shadow: none; }
.mission .m-op { font-size: 24px; }
.mission .m-req, .mission .m-yield { font-size: 19px; }
.warpanel .m-how { margin: 6px 8px 8px; font-size: 18px; }

/* ---- status line ---- */
.status {
  grid-area: status;
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  border-top: 2px solid var(--phosphor-dim); padding-top: var(--s2);
  font-size: 19px; color: var(--phosphor-dim); text-shadow: var(--glow-dim);
}

/* ---- small screens: chart above the readout ---- */
@media (max-width: 820px) {
  body { font-size: 20px; }
  .tube {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mast" "campaign" "chart" "readout" "status";
    grid-template-rows: auto auto auto auto auto;
    padding: var(--s3);
    border-radius: 12px;
  }
  .mast { flex-direction: column; align-items: flex-start; }
  .readout { overflow: visible; max-height: none; }
  .syslist { columns: 1; }
  .planets .p-detail { padding-left: 0; }
  .campaign { grid-template-columns: minmax(0, 1fr) auto; }
  .campaign .c-meter { grid-column: 1 / -1; order: 3; }
  .campaign .c-counts { grid-column: 1 / -1; order: 4; justify-content: space-between; }
  .chart-svg { height: clamp(340px, 62vh, 620px); }
}
@media (max-width: 480px) {
  /* too narrow for step names; the numerals and the value below carry it */
  .d-step .d-name { display: none; }
  .d-step .d-num { padding: 3px 0; }
}

/* ---- alerts and war panels ---- */
.box.alert { border-color: var(--phosphor); }
.box.alert > .plate { background: var(--phosphor); color: var(--glass); border-color: var(--phosphor); text-shadow: none; }
.alerts { list-style: none; margin: 0; padding: 0; }
.alerts li { padding: 4px 0 8px; border-top: 1px solid var(--burn); }
.alerts li:first-child { border-top: 0; }
.alerts .a-head { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.alerts p { margin: 2px 0 4px; }
.countdown { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pres.def i.on { background: var(--phosphor); }
.contested li.locked { color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.contested li.locked .link { text-decoration-style: dashed; }
.fronts li.ally .kt-name::before { content: "\25C7 "; }
.log li.warn { color: var(--phosphor); }
.log li.warn::before { content: "! "; }
.planets button .glyph { margin: 0; align-self: center; }
.planets button { grid-template-columns: 1.4em minmax(0, 1fr) auto; }
.warpanel.st-defense { border-style: double; border-width: 4px; }
.warpanel.st-defense .w-head { background: var(--phosphor); color: var(--glass); text-shadow: none; }
.warpanel.locked { border-style: dashed; }
.warpanel.st-free { border-color: var(--phosphor-dim); }
.warpanel .w-note { margin: 4px 8px 6px; font-size: 18px; }
.mission .m-mods { list-style: none; margin: 2px 0; padding: 0; font-size: 18px; }
.mission .m-mod { border: 1px solid var(--phosphor); padding: 0 4px; }

/* ---- planet surface (drill-in) ---- */
.zoom[hidden], .legend[hidden], .surface-back[hidden] { display: none; }
.planets .spotcard button.link { display: inline; padding: 0; width: auto; text-align: left; }
.planets button.surface-btn { display: block; padding: 4px 8px; width: auto; text-align: center; }
.chart-frame.surface .chart-svg { cursor: default; }
.surface-back {
  position: absolute; left: 8px; top: 8px; z-index: 6;
  font: 700 12px/1 var(--plate); padding: 7px 10px; color: var(--glass); background: var(--phosphor);
  border: 2px solid var(--phosphor); cursor: pointer; text-shadow: none;
}
.surface-back:hover { background: var(--glass); color: var(--phosphor); }
.surface-back:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 2px; }
.chart-svg .globe .disc { fill: var(--glass); }
.chart-svg .globe .grat line, .chart-svg .globe .grat ellipse { fill: none; stroke: var(--burn); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .globe .rim { fill: none; stroke: var(--phosphor-dim); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-svg .globe .tick { stroke: var(--phosphor-dim); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-svg .globe .shield-dome { fill: none; stroke: var(--phosphor); stroke-width: 1.5; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; opacity: .8; }
.chart-svg .spread line { stroke: var(--phosphor-dim); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart-svg .spot { cursor: pointer; outline: none; color: var(--phosphor); }
.chart-svg .spot .hit { fill: transparent; }
.chart-svg .spot.cleared { cursor: default; color: var(--phosphor-dim); opacity: .6; }
.chart-svg .spot .fester { fill: none; stroke: var(--phosphor); stroke-width: 1.5; stroke-dasharray: 2 4; }
.chart-svg .spot:focus-visible .hit, .chart-svg .spot.on .hit { stroke: var(--phosphor); stroke-width: 1.5; stroke-dasharray: 3 2; }
.chart-svg .spot .mark { fill: var(--phosphor); font-family: var(--plate); font-weight: 700; font-size: 15px; }
.chart-svg .spot .sbar rect { fill: none; stroke: var(--phosphor-dim); stroke-width: 1; }
.chart-svg .spot .sbar rect.on { fill: var(--phosphor); stroke: var(--phosphor); }
.chart-svg .spot .scode { fill: var(--phosphor); font-size: 18px; }
.chart-svg .spot .clock { fill: var(--phosphor); font-size: 15px; }
.chart-svg .spot .kt { fill: var(--phosphor); font-size: 15px; }
.chart-svg .surf-title { fill: var(--phosphor); font-family: var(--plate); font-weight: 700; font-size: 18px; letter-spacing: .05em; }
.chart-svg .surf-sub { fill: var(--phosphor-dim); font-size: 20px; }
.chart-svg .pl .sites { fill: var(--phosphor); font-size: 14px; display: none; }
.chart-svg.zoomed .pl .sites, .chart-svg .pl.in-sel .sites { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .chart-svg .spot .fester { animation: alarm 1.8s steps(2) infinite; }
}
.fester-key { display: inline-block; width: 14px; height: 14px; border: 2px dashed var(--phosphor); border-radius: 50%; vertical-align: -2px; margin-right: 6px; }

.surface-btn {
  all: unset; display: block; margin: 2px 8px 8px; padding: 4px 8px; cursor: pointer;
  border: 2px solid var(--phosphor); font: 700 12px/1.4 var(--plate); text-align: center;
}
.surface-btn:hover { background: var(--phosphor); color: var(--glass); text-shadow: none; }
.surface-btn:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 2px; }
.spots > .w-note { margin: 0 8px 6px; }
.spotlist { list-style: none; margin: 0; padding: 0 8px; }
.spotcard { border-top: 2px solid var(--burn); padding: 6px 0 4px; }
.spotcard.on { border-top-color: var(--phosphor); box-shadow: inset 3px 0 0 var(--phosphor); padding-left: 8px; }
.spotcard .sc-head { display: flex; align-items: center; gap: var(--s2); }
.spotcard .sc-head .glyph { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.spotcard .sc-mark { font: 700 13px/1.4 var(--plate); border: 1px solid var(--phosphor); padding: 0 5px; flex: 0 0 auto; }
.spotcard .sc-name { font-size: 24px; }
.spotcard .sc-type { display: flex; gap: var(--s2); justify-content: space-between; font-size: 18px; color: var(--phosphor-dim); text-shadow: var(--glow-dim); }
.spotcard .sc-fx { font: 700 11px/1.6 var(--plate); color: var(--glass); background: var(--phosphor-dim); padding: 0 5px; text-shadow: none; }
.spotcard .w-meter { padding: 4px 0; }
.spotcard .sc-text { font-size: 18px; margin: 0 0 4px; }
.spotcard .sc-warn { font-size: 18px; margin: 0 0 4px; }
.spotcard .sc-warn::before { content: "! "; }
.spotcard .rows { margin: 2px 0; }
.spotcard .mission { border-top: 1px dashed var(--burn); }
.spots > .rows { padding: 0 8px; }
@media (max-width: 820px) {
  .chart-frame.surface .chart-svg { height: auto; aspect-ratio: 1 / 1; max-height: 78vh; }
  .chart-svg .surf-title { display: none; }
  .chart-svg .surf-sub { font-size: 17px; }
}
.spotcard .sc-lore { font-style: normal; color: var(--phosphor); }
.warpanel > .diff { margin: 8px; }

/* mission orders carry their own Projected Mortality gauge */
.mission .m-label { font: 700 11px/1.6 var(--plate); letter-spacing: .08em; color: var(--phosphor-dim); text-transform: uppercase; }
.mission > .diff { margin: 6px 0; }
.spotcard .mission { margin-top: 6px; padding-top: 6px; }
.targets-head { display: flex; justify-content: space-between; margin: 4px 8px 6px; padding: 3px 8px; font: 700 13px/1.4 var(--plate); letter-spacing: .1em; text-transform: uppercase; color: var(--glass); background: var(--phosphor); text-shadow: none; }
.mission .diff .d-head { white-space: nowrap; gap: 8px; }
@media (max-width: 420px) { .mission .diff .d-head { font-size: 11px; letter-spacing: .06em; } }
.mission .diff .d-name { font-size: 10px; letter-spacing: 0; }
@media (max-width: 1600px) { .mission .diff .d-name { display: none; } .mission .diff .d-step .d-num { padding: 6px 0; } }
.w-order { letter-spacing: .04em; }

/* ---- enemy fortification */
.diff.fort { margin: 10px 0 12px; }
.diff.fort .d-steps { grid-template-columns: repeat(6, 1fr); }
.diff.fort .d-num { font: 700 13px/1 var(--plate); }
.diff.fort .fort-note { margin: 6px 8px 4px; font-size: 15px; }

/* ---- IMPACT: the standard sits mid-bar */
.ready-cells.has-std { position: relative; }
.ready-cells.has-std::after { content: ''; position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 2px solid var(--phosphor); opacity: .7; }
.ready-note { margin: 4px 0 8px; font-size: 15px; }

/* ---- Kill Marines */
.contract .targets-head { margin: -10px -12px 8px; }
.contract { margin: 14px 0 6px; padding: 10px 12px; border: 1px solid var(--phosphor); box-shadow: inset 0 0 12px rgba(140, 255, 90, .12); }
.contract .k-name { display: block; font: 700 18px/1.3 var(--plate); letter-spacing: .06em; text-transform: uppercase; margin: 4px 0; }
.contract .k-text { margin: 4px 0 8px; }
.contract .k-how-head { margin: 10px 0 2px; font: 700 13px/1.4 var(--plate); letter-spacing: .1em; text-transform: uppercase; }
.contract .k-how { margin: 0 0 8px; padding-left: 22px; }
.contract .k-how li { margin: 4px 0; }
.contract .k-lines { display: block; white-space: pre; margin: 6px 0 2px; padding: 6px 10px; border: 1px dashed var(--phosphor-dim); font: inherit; user-select: all; }
.km-effects { list-style: none; margin: 8px 0; padding: 0; }
.km-effects li { margin: 3px 0; }
.km-tag { font: 700 11px/1.6 var(--plate); color: var(--glass); background: var(--phosphor); padding: 0 5px; text-transform: uppercase; text-shadow: none; }
.chart-svg .spot .kmark { fill: var(--phosphor); font: 700 11px var(--plate); letter-spacing: .08em; }
.fronts li.focus .kt-name { color: var(--phosphor); }

/* ---- spore clouds */
.chart-svg .globe .spore-haze circle { fill: var(--phosphor); opacity: .07; filter: blur(2px); }
.chart-svg .globe .spore-haze circle:nth-child(odd) { opacity: .1; }
@media (prefers-reduced-motion: no-preference) {
  .chart-svg .globe .spore-haze { animation: haze-drift 14s ease-in-out infinite alternate; }
}
@keyframes haze-drift { from { transform: translate(-1.5px, 0); } to { transform: translate(1.5px, -1px); } }

/* ---- deploy and briefing */
.planets button.deploy-btn, .deploy-btn { display: inline-block; width: auto; grid-template-columns: none; margin-top: 8px; font: 700 13px/1 var(--plate); letter-spacing: .08em; text-transform: uppercase; color: var(--glass); background: var(--phosphor); border: 0; padding: 8px 12px; cursor: pointer; text-shadow: none; }
.planets button.deploy-btn:hover, .deploy-btn:hover, .deploy-btn:focus-visible { box-shadow: 0 0 10px rgba(140, 255, 90, .6); outline: none; }
.briefing { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; color: var(--phosphor); background: var(--glass); border: 1px solid var(--phosphor); padding: 16px; box-shadow: 0 0 24px rgba(140, 255, 90, .25); font-family: inherit; }
.briefing::backdrop { background: rgba(0, 0, 0, .75); }
.briefing .b-plate { font: 700 15px/1.4 var(--plate); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--phosphor-dim); padding-bottom: 6px; margin-bottom: 10px; }
.briefing .b-code { float: right; }
.briefing .b-cmd { display: block; margin: 10px 0; padding: 10px; border: 1px dashed var(--phosphor-dim); font: 17px/1.4 inherit; user-select: all; word-break: break-all; }
.briefing .b-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.briefing .b-actions button { font: 700 13px/1 var(--plate); letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; cursor: pointer; border: 1px solid var(--phosphor); }
.briefing .b-copy { color: var(--glass); background: var(--phosphor); }
.briefing .b-close { color: var(--phosphor); background: transparent; }
.briefing .w-meter { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.targets-head { gap: 10px; }
.targets-head > span:last-child { white-space: nowrap; }