/* MOTHERSHIP — deep-space gunmetal chrome around the pixel cutaway. Warm
   amber + cyan phosphor accents, bulkhead panel edges, inset wells, chunky
   pixel buttons with hard borders and offset shadows. */
:root {
  --bg0: #090c12;
  --bg1: #131821;
  --panel: #1a212b;
  --panel2: #161c25;
  --well: #0b0f15;
  --edge: #04060a;
  --edge-hi: #33404f;
  --edge-lo: #0e1319;
  --ink: #d6dde6;
  --muted: #8792a3;
  --amber: #f2b23e;
  --amber-hi: #ffd98c;
  --amber-ink: #2a1c06;
  --cyan: #5fd8ee;
  --green: #58c470;
  --red: #e06050;
  --px: 'Silkscreen', ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 13px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(95, 216, 238, 0.10) 0%, rgba(95, 216, 238, 0) 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(242, 178, 62, 0.06) 0%, rgba(242, 178, 62, 0) 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 50%, #0d1119 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* bulkhead panel: hard black border, light inner lip, dark inner groove, offset shadow */
.bulkhead {
  border: 2px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--edge-hi),
    inset 0 0 0 3px var(--edge-lo),
    4px 4px 0 rgba(0, 0, 0, 0.5);
}

/* ---- header -------------------------------------------------------------- */
.hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 10px;
  max-width: 1440px;
  margin: 0 auto;
}
.hdr-title { flex: 1; min-width: 0; }
.wordmark {
  margin: 0;
  font-family: var(--px);
  font-size: 22px;
  letter-spacing: 3px;
  color: #f1e6c6;
  text-shadow: 2px 2px 0 #000, 0 0 16px rgba(95, 216, 238, 0.25);
}
.subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}
.demo-tag {
  font-family: var(--px);
  font-size: 9px;
  padding: 4px 7px 3px;
  color: #ffb09d;
  background: #4a1f28;
  border: 2px solid var(--edge);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.crew-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--px);
  font-size: 11px;
  color: var(--cyan);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #203140, 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 7px 11px 5px;
  white-space: nowrap;
  position: relative;
}
.crew-chip::before, .crew-chip::after {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  width: 3px;
  background: var(--cyan);
  opacity: 0.6;
}
.crew-chip::before { left: 2px; }
.crew-chip::after { right: 2px; }
.crew-count { color: var(--amber-hi); }
.crew-dot {
  width: 8px; height: 8px;
  background: #3c4566;
  border: 1px solid #000;
}
.crew-dot.is-on {
  background: var(--green);
  box-shadow: 0 0 7px rgba(88, 196, 112, 0.8);
  animation: pulse 2s steps(2, end) infinite;
}
@keyframes pulse { 50% { opacity: 0.55; } }

/* ---- layout ---------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  /* wide screens reach a 2x or 3x integer scale (contract "The stage"); the comms column collapses */
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 14px 14px;
  height: calc(100dvh - 76px);
  min-height: 420px;
}

/* ---- stage: tabs over the canvas well ---------------------------------------- */
.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2c3744 transparent;
}
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 6px;
}
.tab {
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--panel2);
  border: 2px solid var(--edge);
  border-bottom: none;
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 7px 14px 5px;
  cursor: pointer;
  position: relative;
  top: 2px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--amber-hi);
  background: #070a10;
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 3px 0 var(--amber);
  padding-bottom: 7px;
  top: 2px;
  z-index: 2;
}
.tabs-fill { flex: 1; }
.war-chip {
  font-family: var(--px);
  font-size: 9px;
  color: #ffb09d;
  background: #4a1f28;
  border: 2px solid var(--edge);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  padding: 4px 7px 3px;
  margin-bottom: 6px;
  animation: pulse 1s steps(2, end) infinite;
}

.scene-wrap {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #070a10;
  border: 2px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--edge-hi),
    inset 0 0 0 3px var(--edge-lo),
    inset 0 12px 32px rgba(0, 0, 0, 0.55),
    4px 4px 0 rgba(0, 0, 0, 0.5);
  min-width: 0;
  overflow: hidden;
}
#scene, #surface {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  background: #05060e;
}
#surface { background: #2f2c2a; }

/* ---- muster roll: the roster sheet under the surface ------------------------- */
.muster-panel {
  flex: none;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  max-height: clamp(150px, 34vh, 340px);
  min-height: 0;
  background: var(--panel2);
  border: 2px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--edge-hi),
    inset 0 0 0 3px var(--edge-lo),
    4px 4px 0 rgba(0, 0, 0, 0.5);
}
.muster-head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--amber-hi);
  background: linear-gradient(180deg, #232c38, #1a212b);
  border: none;
  border-bottom: 2px solid var(--edge);
  box-shadow: inset 0 -1px 0 var(--edge-hi);
  padding: 9px 12px 7px;
  margin: 3px 3px 0;
  cursor: pointer;
  text-align: left;
  flex: none;
}
.muster-count { color: var(--cyan); }
.muster-army { flex: 1; color: var(--muted); font-size: 8px; text-align: right; }
.muster-head .orders-caret { transition: transform 0.15s steps(2, end); }
.muster-head[aria-expanded="false"] .orders-caret { transform: rotate(-90deg); }
.muster-head[aria-expanded="false"] + .muster { display: none; }
.muster {
  overflow-y: auto;
  min-height: 0;
  padding: 4px 10px 8px;
  margin: 0 3px 3px;
  scrollbar-width: thin;
  scrollbar-color: #2c3744 transparent;
}
.muster-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 5px 4px;
  border-bottom: 1px solid #141a22;
  cursor: pointer;
}
.muster-row:hover { background: rgba(255, 255, 255, 0.03); }
.muster-sprite {
  width: 48px; height: 93px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  justify-self: center;
}
.muster-vehicles {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
}
.muster-name {
  font-family: var(--px);
  font-size: 10px;
  color: #f1e6c6;
  text-shadow: 1px 1px 0 #000;
  border-bottom: 2px solid var(--sys, transparent);
  display: inline-block;
  padding-bottom: 2px;
  word-break: break-word;
}
.muster-rank {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--amber-hi);
}
.muster-units { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.muster-count-x { font-family: var(--px); font-size: 8px; color: var(--cyan); letter-spacing: 1px; }
.muster-count-x.is-none { color: var(--muted); }
.muster-count-x.is-hostile { color: #ffb09d; }
.muster-pts { font-size: 12px; color: var(--ink); text-align: right; white-space: nowrap; }
.muster-pts b { font-family: var(--px); font-size: 11px; color: var(--amber-hi); }
.muster-xp { display: block; font-size: 10px; color: var(--muted); }
.muster-medals { display: inline-flex; gap: 4px; min-width: 52px; justify-content: flex-end; }
.muster-hostile {
  margin-top: 8px;
  padding: 8px 10px;
  background: #1f1412;
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #3a2520;
}
.muster-hostile-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 6px; }
.muster-hostile-name { font-family: var(--px); font-size: 10px; color: #ffb09d; letter-spacing: 1px; }
.muster-hostile-sub { font-size: 10px; color: var(--muted); }
.muster-hostile-units { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---- feed panel ------------------------------------------------------------ */
.feed-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel2);
  border: 2px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--edge-hi),
    inset 0 0 0 3px var(--edge-lo),
    4px 4px 0 rgba(0, 0, 0, 0.5);
}
.feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--amber-hi);
  background: linear-gradient(180deg, #232c38, #1a212b);
  border-bottom: 2px solid var(--edge);
  box-shadow: inset 0 -1px 0 var(--edge-hi);
  padding: 9px 12px 7px;
  margin: 3px 3px 0;
}
.jump-new {
  font-family: var(--px);
  font-size: 9px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 3px 6px 2px;
  cursor: pointer;
}
.feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 6px;
  margin: 0 3px;
  scrollbar-width: thin;
  scrollbar-color: #2c3744 transparent;
}

.ev { margin-bottom: 10px; }
.ev-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.ev-dot {
  width: 8px; height: 8px;
  align-self: center;
  border: 1px solid #000;
  flex: none;
}
.ev-agent {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--sys, transparent);
  padding-bottom: 1px;
}
.ev-time {
  margin-left: auto;
  color: #5e6880;
  font-size: 10px;
  white-space: nowrap;
}
.ev-body {
  margin-top: 2px;
  padding-left: 15px;
  color: #c3cbd8;
  word-break: break-word;
}
.ev-body.is-status { font-style: italic; color: #9ea9bf; }
.ev-tag {
  font-family: var(--px);
  font-size: 8px;
  padding: 2px 5px 1px;
  border: 1px solid #000;
}
.tag-handoff { color: #ffd98c; background: #4a3414; box-shadow: 1px 1px 0 #000; }
.tag-done { color: #bdf2cb; background: #1d4a2a; box-shadow: 1px 1px 0 #000; }
.ev-topic {
  font-size: 10px;
  color: #8fd8e8;
  background: #14262e;
  border: 1px solid #0a1418;
  padding: 1px 5px;
}
.ev-quiet {
  color: #636d86;
  font-size: 11px;
  text-align: center;
}
.ev-checkin .ev-time, .ev-leave .ev-time { display: none; }
.ev-war .ev-body { white-space: pre-line; }
.tag-work { color: #d8c89a; background: #3a3220; box-shadow: 1px 1px 0 #000; }
.tag-build { color: #ffe2a0; background: #5a3a14; box-shadow: 1px 1px 0 #000; }
.tag-ship { color: #2a1c06; background: #f2b23e; box-shadow: 1px 1px 0 #000; }
.tag-war { color: #ffb09d; background: #5a1f1a; box-shadow: 1px 1px 0 #000; }
.tag-choice { color: #bdf2cb; background: #1d4a2a; box-shadow: 1px 1px 0 #000; }
.tag-order { color: #cfe2ff; background: #1d3350; box-shadow: 1px 1px 0 #000; }

/* ---- orders panel ------------------------------------------------------------ */
.orders-panel {
  margin: 0 3px;
  border-top: 2px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  background: #11161e;
  flex: none;
}
.orders-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-hi);
  background: linear-gradient(180deg, #1f2733, #171d26);
  border: none;
  border-bottom: 1px solid var(--edge);
  padding: 7px 12px 5px;
  cursor: pointer;
  text-align: left;
}
.orders-count { color: var(--cyan); }
.orders-caret { transition: transform 0.15s steps(2, end); }
.orders-head[aria-expanded="false"] .orders-caret { transform: rotate(-90deg); }
.orders-head[aria-expanded="false"] + .orders { display: none; }
.orders {
  max-height: 120px;
  overflow-y: auto;
  padding: 6px 12px 4px;
  scrollbar-width: thin;
  scrollbar-color: #2c3744 transparent;
}
.order {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  margin-bottom: 7px;
  font-size: 12px;
}
.order-id {
  font-family: var(--px);
  font-size: 8px;
  color: var(--muted);
  padding-top: 3px;
}
.order-body { word-break: break-word; color: #c3cbd8; }
.order-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
}
.order-status {
  font-family: var(--px);
  font-size: 8px;
  padding: 2px 5px 1px;
  border: 1px solid #000;
}
.order-status.is-open { color: #ffe2a0; background: #4a3a14; }
.order-status.is-claimed { color: #bdf2cb; background: #1d4a2a; }
.order-holder { color: var(--ink); }

/* ---- composer mode toggle ------------------------------------------------------ */
.mode-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}
.mode-toggle { display: flex; }
.mode {
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 5px 9px 3px;
  cursor: pointer;
}
.mode + .mode { border-left: none; }
.mode[aria-pressed="true"] {
  color: var(--amber-ink);
  background: var(--amber);
  box-shadow: inset 0 0 0 1px #ffe2a8;
}
.order-project {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 11px;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 4px 6px;
}
.composer.is-order input:focus { border-color: var(--cyan); }
.composer.is-order .composer-row button { background: var(--cyan); color: #06222a; box-shadow: inset 0 0 0 1px #b9f1fb, 3px 3px 0 #000; }

/* ---- composer -------------------------------------------------------------- */
.composer {
  border-top: 2px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  background: #11161e;
  padding: 9px 12px 12px;
  margin: 0 3px 3px;
}
.composer-label {
  display: block;
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-row { display: flex; gap: 8px; }
.composer input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36;
  padding: 8px 9px;
  outline: none;
}
.composer input:focus { border-color: var(--amber); }
.composer-row button {
  font-family: var(--px);
  font-size: 10px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 8px 12px 6px;
  cursor: pointer;
}
.composer-row button:active, .jump-new:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}

/* ---- commander picker -------------------------------------------------------- */
.picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 9px;
}
.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 5px 2px 3px;
  color: var(--muted);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 2px 2px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-family: var(--px);
  font-size: 6.5px;
  letter-spacing: 0;
}
.pick canvas {
  width: 32px; height: 48px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pick-label {
  max-width: 100%;
  text-align: center;
  line-height: 1.25;
  hyphens: manual;
  overflow-wrap: anywhere;
}
.pick:hover { border-color: var(--edge-hi); color: var(--ink); }
.pick:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 1px #202a36, 1px 1px 0 rgba(0, 0, 0, 0.5); }
.pick[aria-pressed="true"] {
  color: var(--amber-hi);
  background: #1c170f;
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px #5a4418, 2px 2px 0 rgba(0, 0, 0, 0.5), 0 0 10px rgba(242, 178, 62, 0.3);
}
.picker-note {
  min-height: 14px;
  font-size: 10px;
  color: var(--muted);
  margin: -4px 0 10px;
}

/* ---- drawer ---------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 10, 0.65);
  z-index: 40;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 340px);
  z-index: 50;
  background: var(--panel);
  border-left: 2px solid var(--edge);
  box-shadow: inset 1px 0 0 var(--edge-hi), inset 3px 0 0 var(--edge-lo), -6px 0 24px rgba(0, 0, 0, 0.6);
  padding: 16px 16px 16px 18px;
  overflow-y: auto;
}
.drawer-name {
  font-family: var(--px);
  font-size: 15px;
  color: #f1e6c6;
  text-shadow: 1px 1px 0 #000;
  word-break: break-word;
}
.drawer-sub { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.sys-badge {
  font-family: var(--px);
  font-size: 8px;
  text-transform: uppercase;
  color: #0c0f1e;
  background: var(--sys, #8792a3);
  border: 1px solid #000;
  padding: 2px 5px 1px;
}
.presence-chip {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px 1px;
  border: 1px solid #000;
  color: var(--muted);
  background: #242b3a;
}
.presence-chip.is-online { color: #bdf2cb; background: #1d4a2a; }
.presence-chip.is-idle { color: #ffe2a0; background: #4a3a14; }
.presence-chip.is-offline { color: #a9d6f0; background: #1b3346; }
.drawer-close {
  font: 18px/1 ui-monospace, monospace;
  color: var(--ink);
  background: #262e3c;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px var(--edge-hi), 2px 2px 0 #000;
  width: 30px; height: 30px;
  cursor: pointer;
}
.drawer-close:active { transform: translate(2px, 2px); box-shadow: none; }
.drawer-meta {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 5px 10px;
  margin: 0 0 14px;
  padding: 10px;
  font-size: 12px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, inset 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.drawer-meta dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 2px;
}
.drawer-meta dd { margin: 0; word-break: break-word; }
.drawer-section-head {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-hi);
  border-top: 2px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  padding-top: 10px;
  margin-bottom: 8px;
}
.drawer-events .ev-time { font-size: 9px; }
.rank-line {
  margin-top: 6px;
  font-family: var(--px);
  font-size: 9px;
  color: var(--amber-hi);
  letter-spacing: 1px;
}
.prog { margin-bottom: 14px; }
.prog-rank {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.prog-rank-title {
  font-family: var(--px);
  font-size: 11px;
  color: #f1e6c6;
  text-shadow: 1px 1px 0 #000;
}
.prog-xp { font-size: 10px; color: var(--muted); }
.xp-bar {
  height: 8px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
  margin-bottom: 8px;
}
.xp-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  transition: width 0.4s steps(8, end);
}
.xp-fill.is-max { background: linear-gradient(180deg, #ffe9a0, #e2a23b); }
.medals {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 9px;
  min-height: 16px;
}
.medal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 0.5px;
  color: var(--ink);
  background: var(--well);
  border: 1px solid #000;
  padding: 3px 6px 2px 4px;
}
.medal-pip {
  width: 7px; height: 7px;
  background: var(--medal, #888);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}
.medal-none { font-size: 10px; color: var(--muted); }
.war-record {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 8px 6px 6px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, inset 2px 2px 0 rgba(0, 0, 0, 0.6);
  text-align: center;
}
.war-record dt {
  grid-row: 2;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 1px;
}
.war-record dd {
  grid-row: 1;
  margin: 0;
  font-family: var(--px);
  font-size: 12px;
  color: #f1e6c6;
}

/* ---- war recap ---------------------------------------------------------------- */
.scrim-recap { z-index: 60; }
.recap {
  position: fixed;
  z-index: 70;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 600px);
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--edge-hi),
    inset 0 0 0 3px var(--edge-lo),
    6px 6px 0 rgba(0, 0, 0, 0.6), 0 0 48px rgba(0, 0, 0, 0.6);
  padding: 16px 18px 16px;
}
.recap-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.recap-headings { flex: 1; min-width: 0; }
.recap-title {
  font-family: var(--px);
  font-size: 16px;
  letter-spacing: 1px;
  color: #f1e6c6;
  text-shadow: 2px 2px 0 #000;
}
.recap-title.is-victory { color: var(--amber-hi); }
.recap-title.is-defeat { color: #ff8a7a; }
.recap-sub { margin-top: 4px; color: var(--muted); font-size: 12px; }
.upgrades {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.upgrades:empty { display: none; }
.upgrade {
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 0.5px;
  color: #bdf2cb;
  background: #15301e;
  border: 1px solid #000;
  padding: 3px 6px 2px;
}
.upgrades-label { font-size: 10px; color: var(--muted); align-self: center; }
.recap-table-wrap { overflow-x: auto; }
.recap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
  margin-bottom: 10px;
}
.recap-table th {
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--muted);
  text-align: left;
  padding: 7px 8px 5px;
  border-bottom: 1px solid var(--edge);
}
.recap-table td { padding: 6px 8px; border-bottom: 1px solid #141a22; }
.recap-table tr:last-child td { border-bottom: none; }
.recap-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.recap-table .is-mvp td { background: #1c170f; }
.recap-who { display: inline-flex; align-items: center; gap: 6px; }
.recap-who .ev-dot { display: inline-block; }
.crown {
  width: 18px; height: 14px;
  image-rendering: pixelated;
  vertical-align: middle;
  margin-left: 2px;
}
.recap-rank { font-size: 10px; color: var(--amber-hi); text-transform: uppercase; letter-spacing: 1px; }
.recap-invaders {
  font-size: 12px;
  color: #c3cbd8;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: #1f1412;
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #3a2520;
}
.recap-invaders b { color: #ffb09d; font-weight: 700; }
.options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.option {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  min-width: 0;
  padding: 10px 10px 9px;
  color: var(--ink);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 3px 3px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font: inherit;
}
.option:hover:not(:disabled) { border-color: var(--amber); }
.option:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #202a36, 1px 1px 0 rgba(0, 0, 0, 0.5); }
.option:disabled { cursor: default; opacity: 0.55; }
.option.is-chosen {
  opacity: 1;
  border-color: var(--green);
  background: #15301e;
  box-shadow: inset 0 0 0 1px #2a5a3a, 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.option-id {
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--amber-hi);
}
.option.is-chosen .option-id { color: #bdf2cb; }
.option-label { font-size: 12px; font-weight: 700; word-break: break-word; }
.option-effect { font-size: 11px; color: var(--muted); }
.callsign-row { margin: 6px 0 4px; }
.recap-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.btn-ghost {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--cyan);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #203140, 3px 3px 0 #000;
  padding: 7px 11px 5px;
  cursor: pointer;
}
.btn-ghost:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #203140, 1px 1px 0 #000; }
.callsign-row .composer-row button {
  font-family: var(--px);
  font-size: 10px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 8px 12px 6px;
  cursor: pointer;
}
.callsign-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36;
  padding: 8px 9px;
  outline: none;
}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .scene-wrap { padding: 8px; flex: none; }
  .muster-panel { max-height: none; }
  .muster { max-height: 46dvh; }
  .muster-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 8px; }
  .muster-sprite { width: 32px; height: 62px; }
  .muster-units { grid-column: 2 / -1; }
  .muster-medals { grid-column: 3; grid-row: 1; justify-content: flex-end; min-width: 0; }
  .muster-pts { grid-column: 3; grid-row: 2; }
  .muster-army { display: none; }
  .feed-panel { min-height: 0; }
  .feed { max-height: 44dvh; min-height: 160px; }
  .orders { max-height: 96px; }
  .options { grid-template-columns: minmax(0, 1fr); }
  .recap { padding: 14px 12px; }
  .hdr { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px 8px; }
  .wordmark { font-size: 18px; }
  .layout { padding: 0 14px 14px; }
}
@media (max-width: 420px) {
  .wordmark { font-size: 15px; letter-spacing: 2px; }
  .crew-chip { font-size: 9px; padding: 6px 8px 4px; }
  .composer-row button { padding: 8px 9px 6px; }
  .pick { padding: 4px 1px 2px; }
  .tab { padding: 6px 10px 4px; font-size: 9px; }
  .war-record dd { font-size: 10px; }
}

/* ---- economy: HUD buttons, drill picker ----------------------------------------- */
.tabs { position: relative; }
.hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 7px 12px 5px;
  margin: 0 0 6px;
  cursor: pointer;
  white-space: nowrap;
}
.hud-btn:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.hud-btn-drill { color: var(--cyan); background: var(--well); box-shadow: inset 0 0 0 1px #203140, 3px 3px 0 #000; }
.hud-btn-drill:active { box-shadow: inset 0 0 0 1px #203140, 1px 1px 0 #000; }
.hud-btn-drill[aria-expanded="true"] { color: var(--amber-ink); background: var(--cyan); box-shadow: inset 0 0 0 1px #b9f1fb, 3px 3px 0 #000; }
.hud-req {
  font-size: 8px;
  color: #3a2608;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.45);
  padding: 2px 4px 1px;
}
.drill-picker {
  position: absolute;
  right: 6px;
  top: 100%;
  z-index: 20;
  width: min(92vw, 330px);
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 0 0 3px var(--edge-lo), 5px 5px 0 rgba(0, 0, 0, 0.6);
  padding: 11px 12px 8px;
}
.drill-picker-head { font-family: var(--px); font-size: 9px; letter-spacing: 1px; color: var(--amber-hi); margin-bottom: 8px; }
.drill-picker-sub { color: var(--muted); margin-left: 6px; }
.drill-threats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.threat {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 8px 4px 6px;
  cursor: pointer;
}
.threat small { display: block; margin-top: 3px; font: 10px/1.2 ui-monospace, monospace; letter-spacing: 0; color: var(--muted); }
.threat:hover { border-color: var(--amber); color: var(--amber-hi); }
.threat:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #202a36, 1px 1px 0 rgba(0, 0, 0, 0.5); }
.threat[data-threat="heavy"]:hover { border-color: var(--red); color: #ff8a7a; }

/* ---- armory ------------------------------------------------------------------------ */
.armory {
  position: fixed;
  z-index: 70;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(96vw, 780px);
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--edge-hi),
    inset 0 0 0 3px var(--edge-lo),
    6px 6px 0 rgba(0, 0, 0, 0.6), 0 0 48px rgba(0, 0, 0, 0.6);
  padding: 16px 18px 14px;
}
.armory-title { color: var(--amber-hi); }
.armory-command { margin-bottom: 10px; }
.armory-command-row { display: flex; align-items: center; gap: 10px; }
.armory-portrait {
  width: 32px; height: 62px;
  flex: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
}
.armory-command-row .order-project { flex: 1; min-width: 0; padding: 7px 8px; }
.wallet {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--px);
  color: var(--cyan);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #203140;
  padding: 8px 11px 6px;
  white-space: nowrap;
}
.wallet b { font-size: 16px; color: var(--amber-hi); text-shadow: 1px 1px 0 #000; font-weight: 400; }
.wallet span { font-size: 9px; letter-spacing: 1px; }
.wallet small { flex-basis: 100%; font: 10px/1.2 ui-monospace, monospace; color: var(--muted); text-align: right; }
.armory-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.atab {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 7px 12px 5px;
  cursor: pointer;
}
.atab:hover { color: var(--ink); }
.atab[aria-selected="true"] { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8; }
.armory-base-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.armory-base-row .composer-label { margin: 0; }
.armory-base-row .order-project { flex: 1; min-width: 0; }
.armory .picker-note { margin: 0 0 8px; }
.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
  scrollbar-color: #2c3744 transparent;
}
.item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 9px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 3px 3px 0 rgba(0, 0, 0, 0.5);
  min-width: 0;
}
.item.is-maxed { border-color: #2a5a3a; }
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.item-label { font-family: var(--px); font-size: 10px; color: #f1e6c6; text-shadow: 1px 1px 0 #000; }
.item-owned { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.item-owned .pip { margin-right: 0; }
.item-blurb { font-size: 11px; color: #c3cbd8; }
.item-effect { font-size: 11px; color: var(--cyan); }
.item-visual { font-size: 10px; color: var(--muted); font-style: italic; }
.item-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.item-cost { font-family: var(--px); font-size: 10px; color: var(--amber-hi); }
.item.is-poor .item-cost { color: #ff8a7a; }
.buy {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 7px 12px 5px;
  cursor: pointer;
}
.buy:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.buy:disabled { cursor: default; color: var(--muted); background: #242b3a; box-shadow: inset 0 0 0 1px #2e3748, 3px 3px 0 #000; }
.item.is-maxed .buy:disabled { color: #bdf2cb; background: #15301e; box-shadow: inset 0 0 0 1px #2a5a3a, 3px 3px 0 #000; }
.pip {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--pip, #888);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}
.pip.is-empty { background: #1e2630; box-shadow: none; }

/* ---- muster: wallet + upgrade pips ----------------------------------------------- */
.muster-req { display: block; margin-top: 2px; font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--cyan); }
.muster-pips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.muster-pips:empty { display: none; }

/* ---- unit card ------------------------------------------------------------------------ */
.unit-card {
  position: fixed;
  z-index: 55;
  width: 290px;
  max-width: 94vw;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 0 0 3px var(--edge-lo), 5px 5px 0 rgba(0, 0, 0, 0.6);
  padding: 12px 12px 10px;
}
.unit-card-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; }
.unit-card-headings { flex: 1; min-width: 0; }
.uc-portrait {
  width: 32px; height: 62px;
  flex: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
}
.uc-unit {
  width: 40px; height: 40px;
  flex: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #2f2c2a;
  border: 2px solid var(--edge);
}
.unit-card-type { font-family: var(--px); font-size: 12px; color: #f1e6c6; text-shadow: 1px 1px 0 #000; }
.unit-card-owner { margin-top: 4px; font-size: 12px; color: var(--ink); border-bottom: 2px solid var(--sys, transparent); display: inline-block; padding-bottom: 1px; }
.unit-card-rank { margin-top: 3px; font-size: 10px; letter-spacing: 1px; color: var(--amber-hi); }
.unit-stats {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: 12px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, inset 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.unit-stats dt { color: var(--muted); text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 2px; }
.unit-stats dd { margin: 0; }
.unit-stats dd small { color: var(--muted); }
.uc-action { font-family: var(--px); font-size: 9px; letter-spacing: 1px; color: var(--cyan); text-transform: uppercase; }
.uc-action.is-firing { color: var(--amber-hi); }
.uc-action.is-hit, .uc-action.is-destroyed { color: #ff8a7a; }
.uc-upgrades { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; min-height: 16px; }
.uc-upgrades .medal { gap: 5px; }
.unit-card .recap-actions { margin-top: 4px; }

/* ---- drill result ---------------------------------------------------------------------- */
.drill-card { width: min(94vw, 520px); }
.drill-stats { margin-bottom: 10px; }
.drill-stats dd.is-victory { color: var(--amber-hi); }
.drill-stats dd.is-defeat { color: #ff8a7a; }
.drill-mvp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  font-size: 12px;
  background: #1c170f;
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #5a4418;
}
.drill-mvp .drill-portrait { width: 32px; height: 62px; image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
.drill-mvp .crown { margin-left: 6px; }
.drill-mvp b { font-family: var(--px); font-size: 10px; color: var(--amber-hi); font-weight: 400; }
.drill-mvp span { color: var(--muted); }

/* ---- toasts ----------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: max-content;
  max-width: 94vw;
}
.toast {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 7px 12px 5px;
  max-width: 94vw;
  text-align: center;
  animation: toast-in 0.18s steps(3, end);
}
.toast.is-error { color: #ffb09d; background: #4a1f28; box-shadow: inset 0 0 0 1px #6a2f38, 3px 3px 0 #000; }
.toast.is-info { color: var(--cyan); background: var(--well); box-shadow: inset 0 0 0 1px #203140, 3px 3px 0 #000; }
.toast.is-out { opacity: 0; transition: opacity 0.25s steps(3, end); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 768px) {
  .items { grid-template-columns: minmax(0, 1fr); }
  .armory { padding: 14px 12px 12px; }
  .armory-command-row { flex-wrap: wrap; }
  .wallet { flex: 1; justify-content: flex-start; }
  .wallet small { text-align: left; }
  .unit-card { inset: auto 0 0 0 !important; width: auto; max-width: none; border-left: none; border-right: none; }
  .drill-picker { right: 0; left: 0; width: auto; }
  /* phones: toasts sit under the header so they never cover the unit card's bottom sheet */
  .toasts { bottom: auto; top: 64px; }
}
@media (max-width: 420px) {
  .hud-btn { font-size: 9px; padding: 6px 9px 4px; gap: 5px; }
  .atab { padding: 6px 9px 4px; font-size: 8px; }
  .tabs { gap: 3px; }
  .tab { padding: 6px 8px 4px; }
}

/* ---- people: header chip -------------------------------------------------------- */
.me-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--amber-hi);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #2a2416, 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 5px 6px 5px 10px;
  white-space: nowrap;
  min-width: 0;
}
.me-label { color: var(--muted); font-size: 8px; }
.me-name {
  color: #f1e6c6;
  text-shadow: 1px 1px 0 #000;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.me-switch {
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 2px 2px 0 #000;
  padding: 4px 7px 3px;
  cursor: pointer;
}
.me-switch:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.me-chip.is-anon { color: #ffb09d; box-shadow: inset 0 0 0 1px #4a1f28, 3px 3px 0 rgba(0, 0, 0, 0.5); }
.me-chip.is-anon .me-label { color: #ffb09d; font-size: 9px; }
.you-tag {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 1px solid #000;
  padding: 2px 4px 1px;
  vertical-align: middle;
}
.hud-btn-brief { color: #f1e6c6; background: #3a2a4e; box-shadow: inset 0 0 0 1px #6a4f8a, 3px 3px 0 #000; }
.hud-btn-brief:active { box-shadow: inset 0 0 0 1px #6a4f8a, 1px 1px 0 #000; }

/* ---- COMMS: filter chips, mentions, aimed orders ---------------------------------- */
.feed-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px 4px;
  margin: 0 3px;
  background: #11161e;
  border-bottom: 1px solid var(--edge);
}
.chip {
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 4px 7px 2px;
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8; }
.feed[data-filter="orders"] .ev:not([data-cat~="orders"]),
.feed[data-filter="wars"] .ev:not([data-cat~="wars"]),
.feed[data-filter="armory"] .ev:not([data-cat~="armory"]),
.feed[data-filter="work"] .ev:not([data-cat~="work"]) { display: none; }
.mention { color: var(--cyan); font-weight: 700; }
.mention.is-me { color: var(--amber-hi); background: #2a2010; border: 1px solid #5a4418; padding: 0 3px; }
.tag-aimed { color: #e9d8ff; background: #3a2a4e; box-shadow: 1px 1px 0 #000; }
.order-holder { color: var(--amber-hi); font-weight: 700; }
.order-to { flex: 1; }
.mode-row { flex-wrap: wrap; }

/* ---- muster: owner groups -------------------------------------------------------- */
.muster-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin: 8px -4px 2px;
  padding: 6px 8px 4px;
  background: linear-gradient(180deg, #1f2733, #171d26);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
}
.muster-group.is-me { background: linear-gradient(180deg, #2a2010, #1c170f); box-shadow: inset 0 0 0 1px #5a4418; }
.muster-group.is-unassigned { opacity: 0.85; }
.muster-group-name { font-family: var(--px); font-size: 10px; letter-spacing: 1px; color: #f1e6c6; text-shadow: 1px 1px 0 #000; }
.muster-group.is-me .muster-group-name { color: var(--amber-hi); }
.muster-group-total { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* ---- login: WHO ARE YOU --------------------------------------------------------- */
.scrim-login { z-index: 80; background: rgba(3, 5, 10, 0.78); }
.login {
  position: fixed;
  z-index: 85;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(96vw, 720px);
  max-height: 94dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow:
    inset 0 0 0 1px var(--edge-hi),
    inset 0 0 0 3px var(--edge-lo),
    6px 6px 0 rgba(0, 0, 0, 0.6), 0 0 64px rgba(0, 0, 0, 0.7);
  padding: 18px 20px 14px;
  scrollbar-width: thin;
  scrollbar-color: #2c3744 transparent;
}
.login-title { font-size: 20px; letter-spacing: 3px; color: #f1e6c6; text-shadow: 2px 2px 0 #000, 0 0 16px rgba(242, 178, 62, 0.25); }
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
.people .ev-quiet { grid-column: 1 / -1; padding: 12px 0; }
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 12px 8px 10px;
  color: var(--ink);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 3px 3px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.person:hover { border-color: var(--amber); }
.person:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #202a36, 1px 1px 0 rgba(0, 0, 0, 0.5); }
.person.is-me { border-color: var(--amber); background: #1c170f; box-shadow: inset 0 0 0 1px #5a4418, 3px 3px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(242, 178, 62, 0.25); }
.person-portrait {
  width: 48px; height: 93px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.person-name { font-family: var(--px); font-size: 12px; color: #f1e6c6; text-shadow: 1px 1px 0 #000; word-break: break-word; margin-top: 4px; }
.person-meta { font-size: 10px; color: var(--muted); }
.login-new .composer-row { margin-bottom: 10px; }
.login-new input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36;
  padding: 8px 9px;
  outline: none;
}
.login-new input:focus { border-color: var(--amber); }
.login-new .composer-row button, .token-row .composer-row button {
  font-family: var(--px);
  font-size: 10px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 8px 12px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.login-new .composer-row button:active, .token-row .composer-row button:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.login-new .picker { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.login-foot { display: flex; justify-content: space-between; gap: 10px; border-top: 2px solid var(--edge); box-shadow: inset 0 1px 0 var(--edge-hi); padding-top: 8px; }
.link-btn {
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
.link-btn[aria-expanded="true"] { color: var(--cyan); }
.token-row { margin-top: 8px; padding: 10px; background: var(--well); border: 2px solid var(--edge); box-shadow: inset 0 0 0 1px #203140; }
.token-row .composer-label { white-space: normal; }
.token-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: #070a10;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36;
  padding: 8px 9px;
  outline: none;
}
.token-row input:focus { border-color: var(--cyan); }
.token-row .picker-note { margin: 6px 0 0; }

/* ---- briefing ----------------------------------------------------------------------- */
.briefing { width: min(94vw, 680px); }
.brief-body { font-size: 13px; line-height: 1.6; }
.brief-sec { margin-bottom: 6px; }
.brief-sec .drawer-section-head { margin-top: 4px; }
.brief-p { margin: 0 0 8px; color: #c3cbd8; }
.brief-live { color: var(--amber-hi); font-family: var(--px); font-size: 10px; letter-spacing: 1px; font-weight: 400; text-shadow: 1px 1px 0 #000; }
.brief-code-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.brief-code {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  font: 12px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--cyan);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #203140, inset 2px 2px 0 rgba(0, 0, 0, 0.6);
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}
.brief-copy { align-self: flex-start; }

/* ---- first-run tour --------------------------------------------------------------- */
.tour {
  position: fixed;
  z-index: 90;
  width: min(320px, calc(100vw - 16px));
  background: #1c170f;
  color: var(--ink);
  border: 2px solid var(--amber);
  box-shadow: inset 0 0 0 1px #5a4418, 5px 5px 0 rgba(0, 0, 0, 0.6), 0 0 24px rgba(242, 178, 62, 0.25);
  padding: 12px 14px 10px;
  animation: toast-in 0.18s steps(3, end);
}
.tour::before {
  content: '';
  position: absolute;
  left: calc(var(--arrow-x, 50%) - 7px);
  width: 10px; height: 10px;
  background: #1c170f;
  border: 2px solid var(--amber);
  transform: rotate(45deg);
}
.tour[data-side="below"]::before { top: -7px; border-right: none; border-bottom: none; }
.tour[data-side="above"]::before { bottom: -7px; border-left: none; border-top: none; }
.tour[data-side="none"]::before { display: none; }
.tour-step { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--muted); }
.tour-title { font-family: var(--px); font-size: 12px; color: var(--amber-hi); text-shadow: 1px 1px 0 #000; margin: 3px 0 5px; }
.tour-text { font-size: 12px; color: #d6dde6; margin-bottom: 8px; }
.tour .recap-actions { margin-top: 0; }
.is-tour { outline: 3px solid var(--amber); outline-offset: 3px; position: relative; z-index: 86; }

@media (max-width: 768px) {
  .hdr { flex-wrap: wrap; }
  .me-chip { order: 3; }
  .me-name { max-width: 110px; }
  .login { padding: 14px 12px 12px; width: 96vw; }
  .login-title { font-size: 16px; letter-spacing: 2px; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .login-new .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .login-foot { flex-wrap: wrap; }
  .briefing { padding: 14px 12px 12px; }
  .brief-code-row { flex-wrap: wrap; }
  .muster-group { margin: 8px 0 2px; }
  .feed-filters { padding: 6px 8px 4px; }
}
@media (max-width: 520px) {
  /* phones: the wordmark keeps its own row; the three chips share the next one */
  .hdr-title { flex: 1 1 100%; }
  .hdr { row-gap: 6px; }
  .subtitle { margin-top: 0; }
  .toasts { top: 104px; }
}
@media (max-width: 420px) {
  .me-chip { font-size: 9px; gap: 6px; padding: 4px 4px 4px 8px; }
  .me-name { max-width: 84px; }
  .chip { padding: 4px 5px 2px; font-size: 7px; }
  .person { padding: 10px 6px 8px; }
  .person-name { font-size: 10px; }
}

/* ---- keys: notice bar, header buttons, read-only --------------------------------- */
@media (min-width: 769px) { .layout { height: calc(100dvh - 76px - var(--notice-h, 0px)); } }
.key-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: min(calc(100% - 28px), 1412px);
  margin: 0 auto 10px;
  padding: 9px 12px;
  color: #ffd98c;
  background: linear-gradient(180deg, #3a2a10, #2a1e0c);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #6a4f1a, 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.key-notice-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.key-notice-text b { font-family: var(--px); font-size: 10px; letter-spacing: 1px; font-weight: 400; color: var(--amber-hi); text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.key-notice-text span { font-size: 12px; color: #e9d8a8; }
.key-notice-form { display: flex; gap: 8px; flex: 1 1 320px; max-width: 460px; }
.key-notice-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: #070a10;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36;
  padding: 7px 9px;
  outline: none;
}
.key-notice-form input:focus { border-color: var(--amber); }
.key-notice-form button {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 7px 11px 5px;
  cursor: pointer;
  white-space: nowrap;
}
.key-notice-form button:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.me-key { color: #06222a; background: var(--cyan); box-shadow: inset 0 0 0 1px #b9f1fb, 2px 2px 0 #000; }
.me-key:active { box-shadow: inset 0 0 0 1px #b9f1fb, 1px 1px 0 #000; }
.me-chip.is-readonly { color: #ffd98c; box-shadow: inset 0 0 0 1px #6a4f1a, 3px 3px 0 rgba(0, 0, 0, 0.5); }
.me-chip.is-readonly .me-label { color: #ffd98c; font-size: 9px; }
.hdr .hud-btn-admin { margin: 0; padding: 6px 10px 4px; font-size: 9px; color: #f1e6c6; background: #4a1f28; box-shadow: inset 0 0 0 1px #7a3a48, 3px 3px 0 #000; }
.hdr .hud-btn-admin:active { box-shadow: inset 0 0 0 1px #7a3a48, 1px 1px 0 #000; }
.hud-btn-connect { color: #06222a; background: var(--cyan); box-shadow: inset 0 0 0 1px #b9f1fb, 3px 3px 0 #000; }
.hud-btn-connect:active { box-shadow: inset 0 0 0 1px #b9f1fb, 1px 1px 0 #000; }
.hud-btn:disabled { cursor: default; color: var(--muted); background: #242b3a; box-shadow: inset 0 0 0 1px #2e3748, 3px 3px 0 #000; }
.composer.is-readonly input, .composer.is-readonly .composer-row button { opacity: 0.5; cursor: not-allowed; }
.composer.is-readonly .composer-label { color: #ffd98c; }
.login.is-readonly .person, .login.is-readonly .pick, .login.is-readonly .login-new input, .login.is-readonly .login-new .composer-row button { opacity: 0.45; cursor: not-allowed; }
.login.is-readonly .person:hover { border-color: var(--edge); }
.login.is-readonly .token-row { border-color: var(--amber); box-shadow: inset 0 0 0 1px #5a4418, 0 0 12px rgba(242, 178, 62, 0.2); }
.login.is-locked .people { grid-template-columns: minmax(150px, 220px); }
.btn-ghost.is-danger { color: #ffb09d; box-shadow: inset 0 0 0 1px #4a1f28, 3px 3px 0 #000; }
.btn-ghost.is-danger:active { box-shadow: inset 0 0 0 1px #4a1f28, 1px 1px 0 #000; }

/* ---- key menu --------------------------------------------------------------------------- */
.scrim-key { z-index: 60; }
.key-menu {
  position: fixed;
  z-index: 70;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 460px);
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 0 0 3px var(--edge-lo), 6px 6px 0 rgba(0, 0, 0, 0.6), 0 0 48px rgba(0, 0, 0, 0.6);
  padding: 16px 18px 14px;
}
.key-menu-title { color: var(--cyan); }
.key-value {
  display: block;
  margin: 0 0 10px;
  padding: 10px 12px;
  font: 13px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--cyan);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #203140, inset 2px 2px 0 rgba(0, 0, 0, 0.6);
  word-break: break-all;
  user-select: all;
}
.key-value.is-masked { letter-spacing: 1px; color: #8fd8e8; }
.key-menu-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.key-replace { margin: 4px 0 8px; }
.key-replace input {
  flex: 1; min-width: 0; font: inherit; color: var(--ink); background: #070a10;
  border: 2px solid #000; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36; padding: 8px 9px; outline: none;
}
.key-replace input:focus { border-color: var(--cyan); }
.key-replace button, .invite-row button, .hand-form .invite-row button {
  font-family: var(--px); font-size: 10px; color: var(--amber-ink); background: var(--amber);
  border: 2px solid #000; box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000; padding: 8px 12px 6px; cursor: pointer; white-space: nowrap;
}
.key-replace button:active, .invite-row button:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.invite-row button:disabled { cursor: default; color: var(--muted); background: #242b3a; box-shadow: inset 0 0 0 1px #2e3748, 3px 3px 0 #000; }
.key-menu .picker-note { margin: 0; }

/* ---- admin panel ------------------------------------------------------------------------- */
.admin { width: min(96vw, 760px); }
.admin-people { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.admin-person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 10px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
}
.admin-person.is-me { background: #1c170f; box-shadow: inset 0 0 0 1px #5a4418; }
.admin-portrait { width: 32px; height: 62px; image-rendering: pixelated; image-rendering: crisp-edges; justify-self: center; }
.admin-person-id { min-width: 0; }
.admin-person-name { font-family: var(--px); font-size: 11px; color: #f1e6c6; text-shadow: 1px 1px 0 #000; }
.admin-slug { font: 11px/1 ui-monospace, monospace; color: var(--muted); text-shadow: none; margin-left: 4px; }
.admin-person-cmdrs { font-size: 11px; color: #c3cbd8; margin-top: 3px; word-break: break-word; }
.admin-person-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10px; color: var(--muted); text-align: right; white-space: nowrap; }
.admin-person-meta b { font-family: var(--px); font-size: 10px; color: var(--amber-hi); font-weight: 400; }
.admin-person-keys { font-family: var(--px); font-size: 7px; letter-spacing: 1px; color: var(--cyan); }
.admin-person-keys.is-none { color: #ffb09d; }
.invite-form { margin-bottom: 10px; }
.invite-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.invite-row input, .hand-form input {
  flex: 1 1 160px; min-width: 0; font: inherit; color: var(--ink); background: var(--well);
  border: 2px solid #000; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36; padding: 8px 9px; outline: none;
}
.invite-row input:focus, .hand-form input:focus { border-color: var(--amber); }
.invite-form .picker-note { margin: 0 0 4px; }
.invite-result { margin: 0 0 12px; padding: 10px; background: #1c170f; border: 2px solid var(--amber); box-shadow: inset 0 0 0 1px #5a4418, 0 0 16px rgba(242, 178, 62, 0.2); }
.invite-warn { font-size: 12px; color: #ffd98c; margin-bottom: 8px; }
.invite-warn b { color: #f1e6c6; }
.invite-result .brief-code-row { margin-bottom: 0; }
.admin-keys { display: flex; flex-direction: column; gap: 4px; }
.key-row {
  display: grid;
  grid-template-columns: minmax(60px, 0.8fr) minmax(0, 1.4fr) auto minmax(60px, 0.8fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
}
.key-row-head { background: none; border-color: transparent; box-shadow: none; padding: 0 10px; font-family: var(--px); font-size: 7px; letter-spacing: 1px; color: var(--muted); }
.key-row.is-revoked { opacity: 0.55; }
.key-owner { font-family: var(--px); font-size: 10px; color: #f1e6c6; word-break: break-word; }
.key-label { color: #c3cbd8; word-break: break-word; }
.key-id { font: 11px/1.4 ui-monospace, monospace; color: var(--cyan); }
.key-created { font-size: 10px; color: var(--muted); white-space: nowrap; }
.key-revoked { font-family: var(--px); font-size: 7px; letter-spacing: 1px; color: #ffb09d; white-space: nowrap; }
.key-revoke { padding: 5px 9px 3px; font-size: 8px; }
.admin-invite-btn { padding: 5px 9px 3px; font-size: 8px; white-space: nowrap; }

/* ---- connect an agent -------------------------------------------------------------------- */
.connect { width: min(96vw, 760px); }
.connect-tabs { align-items: center; }
.connect-tabs .btn-ghost { padding: 6px 9px 4px; font-size: 8px; }
.connect-body { font-size: 12px; line-height: 1.55; }
.snippet { margin-bottom: 12px; }
.snippet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.snippet-title { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--amber-hi); }
.snippet-copy { padding: 5px 9px 3px; font-size: 8px; }
.snippet-code { font-size: 11.5px; }
.snippet-note { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }
.connect-steps { margin: 0 0 8px; padding-left: 22px; color: #c3cbd8; }
.connect-steps li { margin-bottom: 5px; }
.connect-steps li::marker { font-family: var(--px); font-size: 9px; color: var(--cyan); }
.connect-id-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.connect-id-row .composer-label { margin: 0; }
.connect-id-row .snippet-note { flex-basis: 100%; margin: 0; }
.connect-id {
  flex: 1 1 200px; min-width: 0; font: inherit; color: var(--cyan); background: var(--well);
  border: 2px solid #000; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #203140; padding: 7px 9px; outline: none;
}
.connect-id:focus { border-color: var(--cyan); }
.hand-form .drawer-section-head { margin-top: 6px; }
.hand-form .picker { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.hand-system { flex: 1 1 150px; padding: 8px 6px; }
.hand-form .invite-row .snippet-note { flex: 1 1 240px; margin: 0; }
.hand-form .picker-note { margin: 4px 0 0; }

@media (max-width: 768px) {
  .admin, .connect, .key-menu { padding: 14px 12px 12px; }
  .admin-person { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .admin-person-meta { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; text-align: left; white-space: normal; }
  .admin-invite-btn { grid-column: 3; grid-row: 1 / span 2; }
  .key-row { grid-template-columns: minmax(0, 1fr) auto; }
  .key-row-head { display: none; }
  .key-label, .key-created { grid-column: 1; }
  .key-revoke, .key-revoked { grid-column: 2; grid-row: 1 / span 3; }
  .hand-form .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .login.is-locked .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  /* phones: HUD buttons take their own row above the two scene tabs */
  .tabs { flex-wrap: wrap; row-gap: 2px; }
  .tabs .hud-btn, .tabs .war-chip { order: 0; }
  .tabs .tabs-fill { order: 1; flex: 1 1 100%; height: 0; }
  .tabs .tab { order: 2; }
  .key-notice-form { flex-basis: 100%; max-width: none; }
  .hdr .hud-btn-admin { order: 4; }
}
@media (max-width: 420px) {
  .key-menu-actions .btn-ghost { flex: 1 1 40%; text-align: center; }
  .snippet-code { font-size: 10.5px; }
}

/* ---- war playback: SKIP overlay, pending-choice chip, LATER ------------------------ */
.scene-wrap { position: relative; }
.war-skip {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 5;
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000;
  padding: 7px 11px 5px;
  cursor: pointer;
  animation: toast-in 0.18s steps(3, end);
}
.war-skip:hover { background: var(--amber-hi); }
.war-skip:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.choice-chip {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 2px 2px 0 #000;
  padding: 4px 7px 3px;
  margin-bottom: 6px;
  cursor: pointer;
  white-space: nowrap;
  animation: pulse 2.4s steps(2, end) infinite;
}
.choice-chip:hover { animation: none; background: var(--amber-hi); }
.choice-chip:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 1px #ffe2a8, 1px 1px 0 #000; }
.recap-later { margin-right: auto; color: var(--cyan); }
@media (max-width: 420px) {
  .choice-chip { font-size: 8px; padding: 4px 6px 3px; }
  .war-skip { right: 10px; bottom: 10px; }
  /* phones: LOG/ORDER takes its own row so the project + assign-to selects get a readable width */
  .mode-row .mode-toggle { flex: 1 1 100%; }
  .mode-row .order-project { flex: 1 1 40%; }
  /* the war recap table: rank lives in MUSTER too, dropping it keeps LOST on screen */
  #recap .recap-table th:nth-child(2), #recap .recap-table td:nth-child(2) { display: none; }
  .recap-table th, .recap-table td { padding: 6px 5px; }
}

/* ---- ownership clarity: OWNERS legend, person swatches, owner lines ------------- */
.owners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 6px 8px 4px;
  background: #0d1118;
  border: 2px solid var(--edge);
  border-bottom: none;
  box-shadow: inset 0 0 0 1px #1a222c;
}
.owners-label { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--muted); margin-right: 2px; }
.owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 3px 7px 2px 5px;
  cursor: pointer;
  white-space: nowrap;
}
.owner-chip:hover { box-shadow: inset 0 0 0 1px var(--c, #33404f); }
.owner-chip.is-me { background: #2a2010; box-shadow: inset 0 0 0 1px #5a4418; }
.owner-chip.is-unassigned { opacity: 0.8; }
.owner-chip.is-lit { color: #0b0f16; background: #f4efdf; box-shadow: inset 0 0 0 1px #fff; animation: pulse 0.5s steps(2, end) infinite; }
.owner-chip.is-lit .owner-units { color: #0b0f16; }
.owner-chip .you-tag { margin-left: 0; }
.owner-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  flex: none;
  background: var(--c, #8792a3);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.owner-units { color: var(--cyan); }
.unit-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
  border-bottom: none;
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: #f1e6c6;
  text-shadow: 1px 1px 0 #000;
}
.unit-card-commander { color: var(--ink); font-size: 12px; letter-spacing: 0; text-shadow: none; font-family: inherit; border-bottom: 2px solid var(--sys, transparent); padding-bottom: 1px; }
.drawer-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
}
.drawer-owner:empty { display: none; }
.muster-group { border-left: 4px solid var(--person, var(--edge)); }
.muster-group .owner-swatch { margin-right: 6px; vertical-align: middle; }
@media (max-width: 420px) {
  .owners { padding: 5px 6px 3px; gap: 3px 4px; }
  .owner-chip { font-size: 7px; padding: 3px 5px 2px 4px; gap: 4px; }
  .owners-label { display: none; }
}

/* ---- character sheet: the drawer (docs/CONTRACT.md "Character sheet") -------- */
.drawer.sheet {
  width: min(94vw, 380px);
  padding: 14px 16px 16px 18px;
}
/* the drawer is position: fixed with no transform, so a fixed child pins to its top-right corner and stays put while the sheet scrolls */
.sheet-close { position: fixed; top: 10px; right: 10px; z-index: 2; }
.drawer.is-over { z-index: 75; }
.scrim.is-over { z-index: 72; }
.sheet-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 8px 8px 0;
  margin: 0 0 10px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 82%, color-mix(in srgb, var(--person, #8792a3) 18%, transparent), transparent 72%),
    var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, inset 0 14px 28px rgba(0, 0, 0, 0.5), 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.sheet-render {
  display: block;
  width: 288px; height: 352px;            /* 36×44 at 8× */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.sheet-id { margin-bottom: 10px; padding-right: 36px; }
.sheet-id .drawer-name { font-size: 16px; }
.sheet-id .rank-line { margin-top: 5px; }
.sheet-id .drawer-owner { margin: 7px 0 0; }
.sheet-id .drawer-sub { margin-top: 7px; }
.sheet-meta { grid-template-columns: 64px 1fr; font-size: 11px; padding: 8px 10px; margin-bottom: 12px; }
.slots, .troops { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.slot {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: start;
  min-width: 0;
  padding: 7px 8px 6px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, inset 3px 0 0 var(--person, #202a36);
}
.slot-label { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--amber-hi); padding-top: 3px; }
.slot-body { min-width: 0; }
.slot-name { font-size: 12px; font-weight: 700; color: #f1e6c6; word-break: break-word; }
.slot-detail { margin-top: 1px; font-size: 10.5px; color: var(--muted); }
.slot-next { margin-top: 3px; font-size: 10.5px; color: #c3cbd8; }
.slot-next-tag { font-family: var(--px); font-size: 7px; letter-spacing: 1px; font-weight: 400; color: var(--cyan); }
.slot-next-tag.is-maxed { color: #bdf2cb; }
.slot-next-tag.is-rank { color: var(--amber-hi); }
.slot-cost { color: var(--amber-hi); }
.slot-cost.is-short { color: #ff8a7a; }
.slot-act { display: flex; align-items: flex-start; justify-content: flex-end; min-width: 40px; }
.slot-buy { padding: 6px 10px 4px; font-size: 8px; }
.slot-lock {
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--muted);
  background: #141a22;
  border: 1px solid #000;
  padding: 3px 5px 2px;
  white-space: nowrap;
  cursor: help;
}
/* a tier-up or a purchase arriving over SSE lights the row it dressed for ~1.2s */
.slot.is-flash { animation: slot-flash var(--flash-ms, 1200ms) steps(6, end) both; }
@keyframes slot-flash {
  from { background: #4a3a14; box-shadow: inset 0 0 0 1px var(--amber-hi), inset 3px 0 0 var(--amber-hi), 0 0 14px rgba(242, 178, 62, 0.45); }
  to { background: var(--well); box-shadow: inset 0 0 0 1px #202a36, inset 3px 0 0 var(--person, #202a36); }
}
.troops-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin-bottom: 2px;
  background: #11161e;
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
}
.troops-head .muster-vehicles { flex: none; }
.troops-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.troops-sum b { font-family: var(--px); font-size: 10px; letter-spacing: 1px; font-weight: 400; color: var(--cyan); }
.troops-sum span { font-size: 10.5px; color: var(--muted); }
.veteran-line { margin: -2px 0 8px; font-size: 10.5px; color: var(--muted); }
.veteran-status {
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 400;
  color: var(--ink);
  background: #242b3a;
  border: 1px solid #000;
  padding: 2px 5px 1px;
  margin-right: 4px;
}
.veteran-status.is-scarred { color: #ffe2a0; background: #4a3a14; }
.veteran-status.is-grizzled { color: #e9d8ff; background: #3a2a4e; }
.class-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 9px;
  background: var(--well);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36;
}
.class-lock-portrait { width: 32px; height: 48px; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.class-lock-name { font-family: var(--px); font-size: 10px; color: #f1e6c6; text-shadow: 1px 1px 0 #000; }
.class-lock-note { margin-top: 3px; font-size: 10.5px; color: var(--muted); }
/* the ARMORY opened from a sheet's BUY lands on that item */
.item.is-focus { border-color: var(--amber); box-shadow: inset 0 0 0 1px #5a4418, 3px 3px 0 rgba(0, 0, 0, 0.5), 0 0 14px rgba(242, 178, 62, 0.35); }
/* recap and drill rows open the commander's sheet */
.recap-table tr.is-click { cursor: pointer; }
.recap-table tr.is-click:hover td { background: #1a222c; }
.recap-table tr.is-mvp.is-click:hover td { background: #26200f; }
@media (max-width: 768px) {
  /* phones: the sheet is a full-width panel, the render at 6× */
  .drawer.sheet { width: 100vw; padding: 12px 12px 16px; }
  .sheet-render { width: 216px; height: 264px; }
  .slot { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 6px 5px; }
  .sheet-meta { grid-template-columns: 58px 1fr; }
}

/* ---- War v2: header buttons, camera, war bar, build mode ------------------------ */
.hdr .hud-btn-hdr { margin: 0; padding: 6px 10px 4px; font-size: 9px; }
.hud-btn-general { color: #f1e6c6; background: #2a3a2a; box-shadow: inset 0 0 0 1px #4f6d4a, 3px 3px 0 #000; }
.hud-btn-general:active { box-shadow: inset 0 0 0 1px #4f6d4a, 1px 1px 0 #000; }
.hud-btn-doctrine { color: #f1e6c6; background: #2a2f4a; box-shadow: inset 0 0 0 1px #4f5a8a, 3px 3px 0 #000; }
.hud-btn-doctrine:active { box-shadow: inset 0 0 0 1px #4f5a8a, 1px 1px 0 #000; }
.hud-btn-update { animation: pulse 1.6s steps(2, end) infinite; }
.hud-btn-build { color: #e9e3cf; background: #3a4250; box-shadow: inset 0 0 0 1px #6a7383, 3px 3px 0 #000; }
.hud-btn-build:active { box-shadow: inset 0 0 0 1px #6a7383, 1px 1px 0 #000; }
.hud-btn-build[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000; }

.cam-bar {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: rgba(7, 10, 16, 0.82);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.cam-btn {
  min-width: 24px; height: 22px;
  font-family: var(--px);
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  background: var(--panel2);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #2c3744;
  cursor: pointer;
  padding: 0 5px;
}
.cam-btn-wide { font-size: 8px; letter-spacing: 1px; }
.cam-btn:hover:not(:disabled) { color: var(--amber-hi); }
.cam-btn:disabled { color: #4a5262; cursor: default; }
.cam-btn[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8; }
.cam-zoom { min-width: 22px; text-align: center; font-family: var(--px); font-size: 8px; color: var(--amber-hi); }
/* ORBIT keeps its CREW HUD top-right, so the bar sits bottom-right there */
.scene-wrap.is-orbit .cam-bar { top: auto; bottom: 12px; }
.build-hint {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 4;
  max-width: calc(100% - 240px);
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #ffe2a8, 2px 2px 0 #000;
  padding: 4px 8px 3px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-wrap.is-demolishing .build-hint { color: #ffe0d8; background: #7a2a28; box-shadow: inset 0 0 0 1px #b8463e, 2px 2px 0 #000; }
.scene-wrap.is-building #surface, .scene-wrap.is-demolishing #surface { cursor: crosshair !important; }

.war-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--panel2);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 0 0 3px var(--edge-lo), 4px 4px 0 rgba(0, 0, 0, 0.5);
  min-width: 0;
}
.war-bar-stats { display: flex; gap: 6px; flex: none; }
.hud-stat {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-hi);
  background: var(--well);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 4px 7px 3px;
  white-space: nowrap;
}
.hud-stat-def { color: var(--cyan); }
.fuse {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 6px, rgba(0, 0, 0, 0) 6px 12px),
    var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #202a36;
  overflow: hidden;
}
.fuse-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5px, rgba(0, 0, 0, 0.22) 5px 6px),
    linear-gradient(180deg, #8a5a12, #c0841c 45%, #8a5a12);
  box-shadow: inset 0 1px 0 rgba(255, 226, 168, 0.5), 2px 0 0 #ffd98c;
  transition: width 0.6s steps(12, end);
}
.fuse.is-hot .fuse-fill {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5px, rgba(0, 0, 0, 0.22) 5px 6px),
    linear-gradient(180deg, #c0841c, var(--amber) 45%, #c0841c);
  animation: fuse-hot 0.9s steps(2, end) infinite;
}
.fuse.is-war .fuse-fill { width: 100% !important; background: repeating-linear-gradient(135deg, #5a1f1a 0 8px, #7a2a22 8px 16px); }
@keyframes fuse-hot { 50% { filter: brightness(1.35); box-shadow: inset 0 1px 0 rgba(255, 226, 168, 0.7), 2px 0 0 #fff2c8, 0 0 10px rgba(242, 178, 62, 0.7); } }
.fuse-label {
  position: absolute;
  top: 2px; bottom: 2px; left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 8px);
  background: rgba(7, 10, 16, 0.82);
  box-shadow: 0 0 0 1px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  color: #f1e6c6;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 8px;
}
.hdr-btn, .hud-btn-declare { margin: 0; }
.hud-btn-declare { color: #ffe0d8; background: #7a2a28; box-shadow: inset 0 0 0 1px #b8463e, 3px 3px 0 #000; flex: none; padding: 6px 10px 4px; font-size: 9px; }
.hud-btn-declare:active { box-shadow: inset 0 0 0 1px #b8463e, 1px 1px 0 #000; }
.hud-btn-declare.is-cooling { opacity: 0.75; }

.build-palette {
  flex: none;
  margin-top: 8px;
  padding: 8px;
  background: var(--panel2);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 0 0 3px var(--edge-lo), 4px 4px 0 rgba(0, 0, 0, 0.5);
  min-width: 0;
}
.build-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.build-tabs { margin: 0; flex: 1; min-width: 0; }
.btab-tool { margin-left: 6px; }
.btab-tool[aria-pressed="true"] { color: #ffe0d8; background: #7a2a28; box-shadow: inset 0 0 0 1px #b8463e; }
.build-wallet { font-family: var(--px); font-size: 9px; color: var(--muted); white-space: nowrap; }
.build-wallet b { color: var(--amber-hi); font-size: 12px; }
.build-as { color: var(--ink); }
.build-exit { padding: 5px 10px 3px; }
.build-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}
.build-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  min-width: 0;
  padding: 5px 7px 5px 5px;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #202a36, 2px 2px 0 #000;
  cursor: pointer;
  font: inherit;
}
.build-item:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--amber), 2px 2px 0 #000; }
.build-item[aria-pressed="true"] { background: #2a2210; box-shadow: inset 0 0 0 2px var(--amber), 2px 2px 0 #000; }
.build-item:disabled { cursor: default; opacity: 0.5; }
.struct-icon {
  width: 24px; height: 48px;
  flex: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #2f2c2a;
  border: 1px solid #000;
}
.build-item-text { display: flex; flex-direction: column; min-width: 0; }
.build-item-label { font-family: var(--px); font-size: 8px; letter-spacing: 0.5px; color: #f1e6c6; line-height: 1.3; }
.build-item-cost { font-size: 10px; color: var(--muted); white-space: nowrap; }
.build-item.is-poor .build-item-cost { color: #ff8a7a; }

.sc-icon { width: 24px; height: 48px; }
.struct-card .recap-actions { margin-top: 8px; }

/* ---- War v2: declare dialog, recap additions ------------------------------------- */
.declare { width: min(94vw, 640px); }
.declare-title { color: #ff8a7a; }
.faction-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.faction-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 7px 8px 8px;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #2a1c1c, 2px 2px 0 #000;
  cursor: pointer;
  font: inherit;
  min-width: 0;
}
.faction-card:hover { box-shadow: inset 0 0 0 1px #b8463e, 2px 2px 0 #000; }
.faction-card[aria-pressed="true"] { background: #2a1414; box-shadow: inset 0 0 0 2px #e06050, 2px 2px 0 #000; }
.faction-art { width: 104px; height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; margin-bottom: 2px; }
.faction-name { font-family: var(--px); font-size: 10px; color: #ffb09d; letter-spacing: 0.5px; }
.faction-mix { font-size: 10px; color: var(--amber-hi); text-transform: uppercase; letter-spacing: 1px; }
.faction-trait { font-size: 11px; color: var(--muted); line-height: 1.35; }
.declare-threats .threat[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8, 2px 2px 0 #000; }
.declare-threats .threat[aria-pressed="true"] small { color: var(--amber-ink); }
.declare-cost { margin: 10px 0 4px; }
.declare-cost-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.declare-cost-row select { flex: 1; min-width: 160px; }
.picker-note.is-warn { color: #ff8a7a; }
.declare-go { color: #ffe0d8; background: #b8342c; box-shadow: inset 0 0 0 1px #e86a5e, 3px 3px 0 #000; }

.recap-faction { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; font-size: 12px; color: var(--ink); }
.recap-faction-line b { color: #ffb09d; font-family: var(--px); font-size: 10px; letter-spacing: 1px; margin-right: 4px; }
.recap-faction-line.is-siege { color: #ffd98c; }
.recap-faction-line.is-horn { color: #ffb09d; }
.recap-faction-line.is-walls { color: #9fe0ec; }
.recap-table tr.is-walls td { background: #0f1c22; color: #9fe0ec; }
.walls-mark { color: var(--cyan); font-size: 11px; }

/* ---- COMMS additions: dispatches, doctrine, library ------------------------------ */
.feed[data-filter="dispatches"] .ev:not([data-cat~="dispatches"]) { display: none; }
.tag-dispatch { color: #d6f5ff; background: #1c3a4a; box-shadow: 1px 1px 0 #000; }
.tag-doctrine { color: #e2dcff; background: #33295a; box-shadow: 1px 1px 0 #000; }
.tag-library { color: #f1e6c6; background: #3a3020; box-shadow: 1px 1px 0 #000; }
.ev-chip {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: #161c25;
  border: 1px solid #0a0e14;
  padding: 0 5px;
  margin-left: 4px;
  text-transform: lowercase;
}
.ev-chip.is-bot { color: #c7f0d0; background: #15301e; }
.ev-chip.is-candidate { color: #ffd98c; background: #3a2c10; }
.ev-chip.is-retired { color: #ffb09d; background: #3a1a1a; text-transform: uppercase; }
.ev-chip.is-trait { color: #ffd98c; background: #3a2010; }
.ev-chip.is-src-moonbase { color: #e2dcff; background: #2a2440; }
.ev-chip.is-src-warpdrive { color: #9fe0ec; background: #12303a; }
.ev-chip.is-src-mirror { color: #c7f0d0; background: #15301e; }
.ev-chip.is-src-manual { color: #f1e6c6; background: #2e2a20; }
.ev-memory { font-family: var(--px); font-size: 9px; letter-spacing: 0.5px; color: #e2dcff; margin-top: 2px; }
.ev-library .ev-memory { color: #f1e6c6; }
.ev.is-click { cursor: pointer; }
.ev.is-click:hover { background: rgba(255, 255, 255, 0.025); }

/* ---- GENERAL panel ------------------------------------------------------------------ */
.general { width: min(94vw, 680px); }
.general-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.general-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #24301f, 2px 2px 0 #000;
}
.general-card.is-paused { box-shadow: inset 0 0 0 1px #4a3a1a, 2px 2px 0 #000; }
.general-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.general-card-title { font-family: var(--px); font-size: 11px; color: #c7f0d0; letter-spacing: 1px; }
.general-card-state { font-family: var(--px); font-size: 7px; letter-spacing: 1px; color: #0c1a10; background: var(--green); padding: 3px 5px 2px; border: 1px solid #000; }
.general-card-state.is-paused { color: var(--amber-ink); background: var(--amber); }
.general-card-sub { font-size: 11px; color: var(--muted); }
.general-card-line { font-size: 11px; color: var(--amber-hi); }
.general-report {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  background: #0e141b;
  border-left: 3px solid #4f6d4a;
  padding: 6px 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.general-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.general-controls select { flex: 1 1 90px; min-width: 0; }
.general-iv { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.general-interval {
  width: 56px;
  font: inherit;
  color: var(--ink);
  background: var(--panel2);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 4px 5px;
}
.general-paused { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
.general-run { align-self: flex-start; }
.general-orders, .doc-textarea, .doc-input, .doc-search {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #202a36;
  padding: 7px 8px;
  resize: vertical;
}
.general-orders:disabled, .doc-textarea:disabled { color: var(--muted); }
.general-count { text-align: right; }

/* ---- DOCTRINE / LIBRARY / BRIEFS ------------------------------------------------------ */
.doctrine { width: min(94vw, 760px); }
.doctrine-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; min-width: 0; }
.doc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.doc-search { flex: 1 1 180px; width: auto; min-width: 0; }
.doc-toolbar .buy, .doc-toolbar .btn-ghost { flex: none; }
.doc-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.lib-sources { flex: 1 1 260px; }
.doc-list, .lib-list { display: flex; flex-direction: column; gap: 6px; }
.doc-row {
  padding: 8px 10px;
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #262a44, 2px 2px 0 #000;
  min-width: 0;
}
.doc-row.is-retired { opacity: 0.6; }
.doc-row-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.doc-title { font-family: var(--px); font-size: 10px; color: #e2dcff; letter-spacing: 0.5px; }
.doc-ver { font-family: var(--px); font-size: 8px; color: var(--amber-hi); }
.doc-body { margin: 4px 0; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.doc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted); }
.doc-meta .btn-ghost { padding: 4px 8px 2px; font-size: 8px; }
.doc-meta .btn-ghost:first-of-type { margin-left: auto; }
.doc-draft { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #12162a; border: 2px solid #000; box-shadow: inset 0 0 0 1px #3a3f6a; }
.doc-input[readonly] { color: var(--muted); }
.lib-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #2a2a24, 2px 2px 0 #000;
  cursor: pointer;
  min-width: 0;
}
.lib-row:hover { box-shadow: inset 0 0 0 1px var(--amber), 2px 2px 0 #000; }
.lib-name { font-size: 12.5px; color: #f1e6c6; overflow-wrap: anywhere; }
.lib-meta { font-size: 11px; color: var(--muted); }
.lib-meta .ev-chip { margin-left: 0; }
.lib-mirrors { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lib-mirror {
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 0.5px;
  color: #c7f0d0;
  background: #15301e;
  border: 1px solid #000;
  padding: 3px 6px 2px;
  cursor: pointer;
}
.lib-mirror.is-stale { color: #ffd98c; background: #3a2c10; animation: pulse 2.4s steps(2, end) infinite; }
.lib-reader-name { flex: 1 1 160px; min-width: 0; font-size: 12px; color: #f1e6c6; overflow-wrap: anywhere; }
.lib-edit { min-height: 260px; font-size: 12px; }
.md {
  padding: 10px 12px;
  background: #0e1218;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #202a36;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  min-width: 0;
}
.md-h { font-family: var(--px); color: #f1e6c6; margin: 10px 0 4px; letter-spacing: 0.5px; }
.md-h:first-child { margin-top: 0; }
.md-h1 { font-size: 14px; color: var(--amber-hi); }
.md-h2 { font-size: 11px; color: #e2dcff; }
.md-h3, .md-h4, .md-h5, .md-h6 { font-size: 9px; color: var(--cyan); }
.md-p { margin: 0 0 8px; }
.md-list { margin: 0 0 8px; padding-left: 20px; }
.md-list li { margin: 1px 0; }
.md-box { color: var(--muted); }
.md-box.is-done { color: var(--green); }
.md-quote { margin: 0 0 8px; padding: 4px 10px; border-left: 3px solid #4f5a8a; color: #b8c0d8; }
.md-pre { margin: 0 0 8px; padding: 8px; background: #070a0f; border: 1px solid #000; font-size: 12px; overflow-x: auto; white-space: pre; }
.md-code { font-size: 12px; color: #ffd98c; background: #1a1610; padding: 0 3px; }
.md-hr { border: none; border-top: 1px dashed #2c3744; margin: 10px 0; }
.md-link { color: var(--cyan); }
.md-doclink { display: inline; padding: 0; font: inherit; color: var(--cyan); text-decoration: underline; }

@media (max-width: 768px) {
  .general-cards { grid-template-columns: minmax(0, 1fr); }
  .war-bar { flex-wrap: wrap; gap: 6px; }
  .fuse { flex: 1 1 100%; order: 3; }
  .war-bar-stats { flex: 1; }
  .build-hint { max-width: calc(100% - 24px); bottom: auto; top: 44px; }
  .cam-bar { top: 10px; right: 10px; }
  .scene-wrap.is-orbit .cam-bar { top: auto; bottom: 10px; }
}
@media (max-width: 420px) {
  .hdr .hud-btn-hdr { padding: 5px 7px 3px; font-size: 8px; }
  .build-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faction-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cam-btn { min-width: 22px; height: 20px; padding: 0 4px; }
  .doc-meta .btn-ghost:first-of-type { margin-left: 0; }
}

/* ---- Shipwright (docs/CONTRACT.md "SHIPWRIGHT mode") ----------------------------------- */
.cam-btn-wright { color: #f1e6c6; }
.build-hint.is-wright { color: #0b1a14; background: #8fe3a0; box-shadow: inset 0 0 0 1px #c8f5d2, 2px 2px 0 #000; }
.refit-card { width: 300px; }
.refit-kicker { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--cyan); margin-bottom: 4px; }
.refit-title { line-height: 1.4; }
.refit-card .recap-actions { margin-top: 8px; }
.general-hull .general-controls select { flex: 1; min-width: 0; }
@media (max-width: 420px) {
  .cam-btn-wright { font-size: 7px; letter-spacing: 0.5px; }
  .refit-card .recap-actions { flex-wrap: wrap; }
}

/* ---- the stage: collapsible comms, fullscreen, the skirmish ticker (contract "The stage") ------- */
@media (min-width: 769px) {
  /* explicit cells, so the handle can straddle the gap without bumping the column to a new row */
  .layout > .stage { grid-column: 1; grid-row: 1; }
  .layout > .feed-panel { grid-column: 2; grid-row: 1; }
  .layout > .comms-handle { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; margin-left: -19px; z-index: 6; }
  .layout.is-comms-collapsed { grid-template-columns: minmax(0, 1fr) 24px; column-gap: 4px; }
  .layout.is-comms-collapsed > .feed-panel { display: none; }
  .layout.is-comms-collapsed > .comms-handle { margin-left: 0; }
}
.comms-handle {
  width: 24px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 0 6px;
  font-family: var(--px);
  font-size: 13px;
  line-height: 1;
  color: var(--amber-hi);
  background: var(--panel2);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 2px 2px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.comms-handle:hover { color: var(--ink); background: #1c2430; }
.comms-handle:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 1px #202a36, 1px 1px 0 rgba(0, 0, 0, 0.5); }
.comms-unread {
  min-width: 16px;
  font-size: 8px;
  text-align: center;
  color: var(--amber-ink);
  background: var(--amber);
  border: 1px solid #000;
  padding: 2px 2px 1px;
}
.comms-who { font-size: 8px; color: var(--cyan); }
@media (max-width: 768px) { .comms-handle { display: none; } }

.cam-btn-full { font-size: 13px; }
.scene-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  padding: 0;
  border: none;
  box-shadow: none;
  background: #000;
}
/* the war bar rides over the canvas in fullscreen; SKIP lifts clear of it */
.scene-wrap:fullscreen > .war-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  margin: 0;
  z-index: 4;
}
.scene-wrap:fullscreen > .war-skip { bottom: 64px; }

.skirmish-ticker {
  flex: none;
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber-hi);
  background: var(--well);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #3a2f1a;
  padding: 4px 7px 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.skirmish-ticker.is-live { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8; }
.skirmish-ticker.is-off { color: var(--muted); box-shadow: inset 0 0 0 1px #202a36; }

.toast.is-skirmish { color: #ffe6b0; background: #3a2a10; box-shadow: inset 0 0 0 1px #8a6424, 3px 3px 0 #000; }
.toast.is-click { pointer-events: auto; cursor: pointer; }
.toast.is-click:hover { filter: brightness(1.15); }
@media (max-width: 420px) {
  .skirmish-ticker { font-size: 8px; padding: 4px 5px 3px; letter-spacing: 0.5px; }
}
.war-record-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* skirmishes sit under WARS only: one every few minutes would bury ALL */
.feed[data-filter="all"] .ev-skirmish { display: none; }
.ev-skirmish { cursor: pointer; }
.ev-skirmish .ev-quiet { color: #e9c98a; }
.ev-skirmish:hover .ev-quiet { color: var(--amber-hi); }

/* ---- War v3: the bell, the orders bar, the WAR ROOM (docs/CONTRACT.md "War v3" → UI) ---------- */
.hud-btn-bell { color: var(--cyan); background: var(--well); box-shadow: inset 0 0 0 1px #203140, 3px 3px 0 #000; gap: 5px; }
.hud-btn-bell:active { box-shadow: inset 0 0 0 1px #203140, 1px 1px 0 #000; }
.hud-btn-bell.is-ringing { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000; }
.bell-ico { display: block; image-rendering: pixelated; }
.hud-btn-bell.is-ringing .bell-ico { animation: bell-ring 1.2s steps(2, end) 3; }
@keyframes bell-ring { 50% { transform: rotate(-12deg); } }
.bell-count {
  font-family: var(--px);
  font-size: 8px;
  color: #fff;
  background: #b8262e;
  border: 1px solid #000;
  padding: 2px 4px 1px;
  line-height: 1;
}
.atab .bell-count { margin-left: 4px; }
.hud-btn-warroom { color: #f1e6c6; background: #4a3420; box-shadow: inset 0 0 0 1px #8a6a3a, 3px 3px 0 #000; }
.hud-btn-warroom:active { box-shadow: inset 0 0 0 1px #8a6a3a, 1px 1px 0 #000; }

/* the orders bar: under the map, the surface's selection and what it can be told */
.orders-bar {
  margin: 0 0 8px;
  background: var(--panel2);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 0 0 3px var(--edge-lo), 4px 4px 0 rgba(0, 0, 0, 0.5);
  padding: 8px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ob-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-scope { font-family: var(--px); font-size: 9px; letter-spacing: 1px; color: var(--amber-hi); white-space: nowrap; }
.ob-sel { flex: 1; min-width: 0; font-size: 11px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-clock { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: #ffe0d8; background: #7a2a28; border: 1px solid #000; padding: 3px 6px 2px; white-space: nowrap; }
.ob-clear { position: static; flex: none; }
.ob-cols { display: flex; flex-wrap: wrap; gap: 4px; }
.ob-cols:empty { display: none; }
.ob-col { font-size: 10px; color: var(--muted); background: var(--well); border: 1px solid #000; box-shadow: inset 0 0 0 1px #202a36; padding: 2px 6px; white-space: nowrap; }
.ob-col b { color: #f1e6c6; font-weight: 400; }
.ob-col.is-locked { opacity: 0.6; }
.ob-kinds { display: flex; flex-wrap: wrap; gap: 5px; }
.ob-kind {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--cyan);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #203140, 3px 3px 0 #000;
  padding: 6px 9px 4px;
  cursor: pointer;
}
.ob-kind:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #203140, 1px 1px 0 #000; }
.ob-kind[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8, 3px 3px 0 #000; }
.ob-kind.is-go { color: #0d2414; background: var(--green); box-shadow: inset 0 0 0 1px #b6f0c4, 3px 3px 0 #000; }
.ob-kind:disabled { cursor: default; color: var(--muted); background: #242b3a; box-shadow: inset 0 0 0 1px #2e3748, 3px 3px 0 #000; }
.ob-hint { font-size: 11px; color: var(--muted); min-height: 1.5em; }

/* the WAR ROOM: the armory's dialog frame, five tabs, one scrolling body */
.warroom-title { color: var(--amber-hi); }
.wr-tabs { margin-bottom: 8px; }
.wr-as { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wr-as-label { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--muted); white-space: nowrap; }
.wr-as .order-project { flex: 1; min-width: 0; padding: 7px 8px; }
.warroom .picker-note:empty { display: none; }
.wr-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
  scrollbar-color: #2c3744 transparent;
}
.wr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 6px 0 0; }
.wr-head-sub { font: 10px/1.2 ui-monospace, monospace; letter-spacing: 0; color: var(--muted); text-transform: none; }
.wr-line { font-size: 12px; color: #c3cbd8; }
.wr-line b { color: #f1e6c6; font-weight: 400; font-family: var(--px); font-size: 10px; }
.wr-line.is-warn { color: #ff8a7a; }
.wr-rows { display: flex; flex-direction: column; gap: 3px; }
.wr-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 10px;
  background: var(--well);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #1c2530;
  padding: 6px 8px;
}
.wr-row.is-click { cursor: pointer; }
.wr-row.is-click:hover { box-shadow: inset 0 0 0 1px var(--amber); }
.wr-row.is-on { box-shadow: inset 0 0 0 1px var(--amber); background: #1c170f; }
.wr-name { font-family: var(--px); font-size: 9px; letter-spacing: 0.5px; color: #f1e6c6; }
.wr-meta { font-size: 11px; color: var(--muted); min-width: 0; }
.wr-cost { font-family: var(--px); font-size: 9px; color: var(--amber-hi); white-space: nowrap; }
.wr-row .buy, .wr-row .btn-ghost { padding: 5px 9px 3px; font-size: 8px; }
.wr-card { gap: 6px; }
.wr-card.is-battalion { border-color: #5a4420; }
.wr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.wr-input {
  font: 12px ui-monospace, monospace;
  color: var(--ink);
  background: #070a0f;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px #202a36;
  padding: 6px 7px;
  min-width: 0;
  outline: none;
}
.wr-input:focus { box-shadow: inset 0 0 0 1px var(--amber); }
.wr-num { width: 64px; }
.wr-select { padding: 6px 7px; min-width: 0; }
.wr-split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 6px; border-top: 1px dashed #263040; }
.wr-split label { display: inline-flex; align-items: center; gap: 4px; }
.wr-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 12px; }
.wr-field { display: flex; align-items: center; gap: 6px; }
.wr-field .wr-meta:first-child { flex: 1; }
.wr-check { display: flex; flex-direction: column; gap: 2px; }
.wr-check .picker-note { margin: 0; }
.wr-warn { color: var(--amber-hi); }
.wr-ok { color: var(--green); }
.wr-stages { display: inline-flex; gap: 2px; }
.wr-stage { width: 10px; height: 6px; background: #1e2630; border: 1px solid #000; }
.wr-stage.is-on { background: #e06050; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3); }
.wr-landing.is-camp { border-color: #5a3a20; }
.wr-landing.is-outpost { border-color: #7a3a28; }
.wr-landing.is-fortress { border-color: #b8262e; }
.wr-march { border-color: #4a2a48; }

/* replay: a scrubber over the snapshots, moments as ticks on the track, the recap below */
.wr-replay { display: flex; flex-direction: column; gap: 6px; }
.wr-replay:empty { display: none; }
.wr-scrub { display: flex; align-items: center; gap: 10px; }
.wr-play { flex: none; padding: 5px 10px 3px; font-size: 8px; }
.wr-range { flex: 1; min-width: 0; accent-color: var(--amber); }
.wr-clock { font-family: var(--px); font-size: 9px; color: var(--amber-hi); white-space: nowrap; }
.wr-marks { position: relative; height: 10px; margin: -4px 64px 0 64px; }
.wr-mark {
  position: absolute;
  top: 0;
  width: 4px; height: 10px;
  margin-left: -2px;
  padding: 0;
  background: var(--cyan);
  border: 1px solid #000;
  cursor: pointer;
}
.wr-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-side { font-family: var(--px); font-size: 8px; letter-spacing: 0.5px; color: var(--ink); background: var(--well); border: 1px solid #000; padding: 4px 7px 3px; }
.wr-side.is-friend { color: #bdf2cb; background: #15301e; }
.wr-side.is-foe { color: #ffd0c4; background: #3a1714; }
.wr-events { display: flex; flex-direction: column; gap: 1px; font-size: 11px; white-space: pre; overflow-x: auto; }
.wr-event { color: #c3cbd8; }
.wr-event.is-foe, .wr-moment.is-foe .wr-name { color: #ffb09d; }
.wr-event.is-friend, .wr-moment.is-friend .wr-name { color: #bdf2cb; }
.wr-recap-title { font-size: 14px; }
.wr-mvp { color: var(--amber-hi); }
.wr-moment { grid-template-columns: 44px minmax(0, 1fr); }

@media (max-width: 768px) {
  .wr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wr-row .wr-meta { grid-column: 1 / -1; grid-row: 2; }
  .wr-moment { grid-template-columns: 44px minmax(0, 1fr); }
  .wr-moment .wr-name { grid-column: 2; grid-row: 1; }
  .wr-marks { margin: -4px 0 0; }
}
/* phones: the orders bar is a bottom sheet (the WAR ROOM drawer's own is under "RTS controls") */
@media (max-width: 420px) {
  .wr-tabs .atab { padding: 6px 7px 4px; font-size: 8px; }
  .wr-scrub { flex-wrap: wrap; }
  .wr-range { flex-basis: 100%; order: 3; }
  .wr-num { width: 56px; }
  .orders-bar {
    position: fixed;
    z-index: 55;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    max-height: 46dvh;
    overflow-y: auto;
    border-left: none; border-right: none; border-bottom: none;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .ob-kind { padding: 7px 8px 5px; font-size: 8px; }
  .hdr .hud-btn-bell { padding: 5px 7px 3px; }
}

/* ---- ARMORY v2: search, filters, tiers, gates, compare; the MUSTER YARD ------------------ */
.armory-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.armory-search { flex: 1 1 220px; min-width: 0; padding: 7px 8px; }
.armory-filter { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 6px 7px; font-size: 11px; }
.armory-check { display: inline-flex; align-items: center; gap: 5px; font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.armory-check input { accent-color: var(--amber); margin: 0; }
.armory-count { font: 10px/1.3 ui-monospace, monospace; color: var(--muted); margin: 0 0 6px; }
.armory-muster {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 7px 9px; font-size: 11px; color: #c3cbd8;
  background: #14130c; border: 1px dashed #5a4420;
}
.armory-muster .buy { padding: 6px 10px 4px; font-size: 8px; }
.tier-pips { display: inline-flex; gap: 2px; flex: none; }
.tier-pip { width: 6px; height: 6px; background: #1e2630; border: 1px solid #000; }
.tier-pip.is-on { background: var(--amber); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35); }
.item-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.item-chips:empty { display: none; }
.item-chip { font-family: var(--px); font-size: 7px; letter-spacing: 1px; color: var(--amber-ink); background: var(--amber); padding: 2px 4px 1px; }
.item-chip.is-dim { color: var(--muted); background: #141a22; box-shadow: inset 0 0 0 1px #263040; }
.item-chip.is-on { color: #0f2a17; background: var(--green); }
.item-chip.is-up { color: #2a1c06; background: var(--amber-hi); }
.item-replaces { font-size: 10px; color: var(--muted); }
.item-gate { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: #ff9a7a; }
.item-thumb { width: 40px; height: 52px; image-rendering: pixelated; image-rendering: crisp-edges; align-self: flex-start; background: #10151c; border: 1px solid #000; }
.item-compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; padding: 5px 6px 4px; font-size: 10px; background: #0f141b; box-shadow: inset 0 0 0 1px #1e2834; }
.cmp-now { color: var(--muted); }
.cmp-arrow { color: var(--muted); }
.cmp-delta.is-up { color: var(--green); }
.cmp-delta.is-down { color: #ff8a7a; }
.item.is-locked { opacity: 0.72; }
.item.is-locked .item-label { color: #b8b2a0; }
.item.is-outranked { opacity: 0.55; }
.item.is-equipped { border-color: #2a5a3a; box-shadow: inset 0 0 0 1px #1d4029, 3px 3px 0 rgba(0, 0, 0, 0.5); }
.item.is-upgrade { border-color: #5a4420; }
.slot-tier { margin-left: 4px; color: var(--amber-ink); background: var(--amber); padding: 1px 3px 0; }
.troops-mix { display: block; margin-top: 2px; font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--cyan); white-space: normal; }
.pip.pip-tier { width: auto; height: auto; min-width: 9px; padding: 1px 2px 0; font-family: var(--px); font-size: 6px; line-height: 7px; color: #000; text-align: center; }
.muster-fitted { font-family: var(--px); font-size: 7px; letter-spacing: 1px; color: var(--muted); align-self: center; }
.muster-units { flex-wrap: wrap; row-gap: 3px; }
.muster-mix { white-space: normal; overflow-wrap: anywhere; }

.mix { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.mix-bar { display: flex; height: 12px; background: #10151c; border: 2px solid var(--edge); box-shadow: inset 0 0 0 1px #202a36; overflow: hidden; }
.mix-seg { flex: 1 1 0; min-width: 3px; background: var(--mix); box-shadow: inset -1px 0 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.mix-seg.is-squad { background: repeating-linear-gradient(90deg, var(--mix) 0 3px, rgba(0, 0, 0, 0.35) 3px 4px); }
.mix-empty { font-size: 9px; color: var(--muted); padding: 0 6px; line-height: 8px; }
.mix-legend { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: var(--cyan); overflow-wrap: anywhere; }
.yard { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.yard-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 8px 8px 7px; background: var(--well); border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.yard-card.is-own { border-color: #2a5a3a; }
.yard-card.is-locked { opacity: 0.7; }
.yard-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.yard-sprite { width: 68px; height: 36px; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; background: #10151c; box-shadow: inset 0 0 0 1px #1e2834; }
.yard-id { min-width: 0; }
.yard-name { font-family: var(--px); font-size: 9px; letter-spacing: 1px; color: #f1e6c6; }
.yard-stats { font-size: 10px; color: var(--muted); }
.yard-owned { font-size: 11px; color: #c3cbd8; }
.yard-owned b { font-family: var(--px); font-size: 10px; font-weight: 400; color: var(--amber-hi); }
.yard-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.yard-cost { font-family: var(--px); font-size: 9px; color: var(--amber-hi); }
.yard-mark { font-family: var(--px); font-size: 7px; letter-spacing: 1px; color: #bdf2cb; }
.yard-mark.is-marked { color: #ffb08a; }
.yard-gate { font-family: var(--px); font-size: 8px; letter-spacing: 1px; color: #ff9a7a; }
.yard-field { font-size: 10px; color: var(--muted); }
.yard-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper-btn { padding: 3px 7px 2px; font-size: 10px; box-shadow: inset 0 0 0 1px #203140, 2px 2px 0 #000; }
.stepper-btn:disabled { color: #3a4556; cursor: default; }
.stepper-n { min-width: 18px; text-align: center; font-family: var(--px); font-size: 9px; color: #f1e6c6; }
.yard-buy { padding: 6px 8px 4px; font-size: 8px; flex: 1 1 auto; }

@media (max-width: 768px) {
  .yard { grid-template-columns: minmax(0, 1fr); }
  .armory-search { flex-basis: 100%; }
  .armory-filter { flex: 1 1 30%; }
}

/* ---- RTS controls: the command card, FORM BATTALION, the WAR ROOM drawer, coachmarks ------------
   (docs/CONTRACT.md "War v3" → UI → "RTS controls and the command card") */
.cmd-card {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: calc(100% - 24px);
  pointer-events: none;   /* the gap between the panels is still the map */
}
.cmd-card[hidden] { display: none; }
.cmd-card > * { pointer-events: auto; }
.cc-portraits {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 3px;
  padding: 4px;
  max-height: 150px;
  overflow-y: auto;
  background: rgba(7, 10, 16, 0.86);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 2px 2px 0 rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
}
.cc-port {
  position: relative;
  display: block;
  width: 40px; height: 34px;
  padding: 0;
  background: #10151c;
  border: 2px solid var(--trim, #888);
  box-shadow: inset 0 0 0 1px #000;
  cursor: pointer;
}
.cc-port:hover { filter: brightness(1.2); }
.cc-port.is-sub { outline: 2px solid var(--amber); outline-offset: 0; }
.cc-port.is-locked { opacity: 0.55; }
.cc-port.is-routing { animation: pulse 1s steps(2, end) infinite; }
.cc-port.is-battalion::before { content: ''; position: absolute; top: 1px; left: 1px; width: 5px; height: 5px; background: var(--amber); box-shadow: 1px 1px 0 #000; }
.cc-sprite { position: absolute; left: 1px; top: 1px; width: 34px; height: 18px; image-rendering: pixelated; image-rendering: crisp-edges; }
.cc-count { position: absolute; right: 2px; top: 17px; font: 7px/1 var(--px); color: #fff; text-shadow: 1px 1px 0 #000; }
.cc-group { position: absolute; right: 1px; top: 1px; font: 7px/8px var(--px); color: var(--amber-ink); background: var(--amber); padding: 0 2px; }
.cc-hp { position: absolute; left: 1px; right: 1px; bottom: 5px; height: 3px; background: #3a1714; }
.cc-hp-fill { display: block; height: 100%; background: var(--green); }
.cc-hp-fill.is-low { background: var(--red); }
.cc-react { position: absolute; left: 1px; bottom: 1px; height: 3px; width: 0; background: var(--cyan); }
.cc-react.is-landed { background: var(--amber-hi); }
.cc-more { align-self: center; font: 8px/1 var(--px); color: var(--muted); }
.cc-main {
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  background: rgba(7, 10, 16, 0.9);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px #202a36, 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.cc-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cc-scope { font: 8px/1 var(--px); letter-spacing: 1px; color: var(--amber-hi); white-space: nowrap; }
.cmd-card.is-battle .cc-scope { color: #ffb09d; }
.cc-sel { flex: 1; min-width: 0; font-size: 10px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-clear { flex: none; width: 22px; height: 22px; font-size: 14px; }
.cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.cc-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 3px 3px;
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 0.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--cyan);
  background: var(--well);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #203140, 2px 2px 0 #000;
  cursor: pointer;
}
.cc-btn:hover { color: var(--amber-hi); box-shadow: inset 0 0 0 1px var(--amber), 2px 2px 0 #000; }
.cc-btn:active:not([aria-disabled="true"]) { transform: translate(1px, 1px); box-shadow: inset 0 0 0 1px #203140, 1px 1px 0 #000; }
.cc-btn[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 1px #ffe2a8, 2px 2px 0 #000; }
.cc-btn.is-engage { color: #ffc4b4; }
.cc-btn.is-action { color: #bdf2cb; }
.cc-btn[aria-disabled="true"] { cursor: not-allowed; color: #4f5b6c; background: #161b24; box-shadow: inset 0 0 0 1px #232b38, 2px 2px 0 #000; }
.cc-key { position: absolute; top: 2px; right: 2px; font: 7px/1 var(--px); color: var(--amber-hi); }
.cc-btn[aria-disabled="true"] .cc-key { color: #4f5b6c; }
/* why a button is off: on hover and on keyboard focus */
.cc-btn[aria-disabled="true"]:hover::after,
.cc-btn[aria-disabled="true"]:focus-visible::after {
  content: attr(data-why);
  position: absolute;
  left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  z-index: 7;
  width: max-content;
  max-width: 180px;
  padding: 4px 6px 3px;
  font: 10px/1.3 ui-monospace, monospace;
  letter-spacing: 0;
  white-space: normal;
  color: #ffd0c4;
  background: #3a1714;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 #000;
  pointer-events: none;
}
/* an ability's cooldown ring: the share of the cooldown that has run, swept clockwise */
.cc-ab { background: conic-gradient(rgba(95, 216, 238, 0.3) calc(var(--cd, 1) * 360deg), rgba(0, 0, 0, 0.6) 0), var(--well); }
.cc-ab.is-cooling { color: #8a97a8; }
.cc-cd { position: absolute; left: 2px; bottom: 2px; font: 7px/1 var(--px); color: var(--amber-hi); }
.cc-stances { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.cc-stances[hidden] { display: none; }
.cc-stance-label { margin-right: 2px; font: 7px/1 var(--px); letter-spacing: 1px; color: var(--muted); }
.cc-stance { padding: 4px 4px 3px; font: 7px/1 var(--px); letter-spacing: 0.5px; color: var(--muted); background: var(--well); border: 1px solid #000; box-shadow: inset 0 0 0 1px #202a36; cursor: pointer; }
.cc-stance:hover { color: var(--ink); }
.cc-stance[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); }
.cc-stance[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-acts[hidden] { display: none; }
.cc-acts .buy, .cc-acts .btn-ghost, .cc-split .buy, .cc-split .btn-ghost { padding: 5px 8px 3px; font-size: 7px; }
.cc-go { flex: 1 1 auto; }
.cc-hint { min-height: 1.3em; font-size: 10px; line-height: 1.3; color: var(--muted); }
.cc-split { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.cc-split-head { font: 8px/1.2 var(--px); color: var(--amber-hi); }
.cc-split-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--ink); }
.cc-split-acts { display: flex; gap: 4px; }

/* FORM BATTALION */
.form-sheet { width: min(96vw, 480px); }
.form-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; margin-bottom: 8px; }
.form-row { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; background: var(--well); border: 2px solid var(--edge); box-shadow: inset 0 0 0 1px #202a36; }
.form-row.is-blocked { opacity: 0.75; }
.form-row .picker-note { margin: 0; }
.form-row-head { font-size: 11px; color: #c3cbd8; }
.form-row-head b { font-family: var(--px); font-size: 9px; font-weight: 400; color: #f1e6c6; }
.form-name { width: 100%; }
.form-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.form-field .wr-meta { min-width: 76px; font-family: var(--px); font-size: 8px; letter-spacing: 1px; }
.form-field .wr-select { flex: 1; min-width: 0; }
.form-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.form-swatch { width: 22px; height: 22px; padding: 0; background: var(--c); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); cursor: pointer; }
.form-swatch[aria-checked="true"] { outline: 2px solid var(--amber-hi); outline-offset: 1px; }

/* WAR ROOM v2: a drawer over the comms column (the column collapses while it is open) */
.wr-drawer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 10px 12px;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 0 0 3px var(--edge-lo), 4px 4px 0 rgba(0, 0, 0, 0.5);
  animation: wr-in 0.16s steps(4, end);
}
.wr-drawer[hidden] { display: none; }
@keyframes wr-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes wr-up { from { transform: translateY(40px); opacity: 0; } }
.wr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wr-title { font-family: var(--px); font-size: 12px; letter-spacing: 1px; color: var(--amber-hi); text-shadow: 1px 1px 0 #000; }
.wr-key { margin-left: 4px; padding: 2px 4px 1px; font: 8px/1 var(--px); color: var(--amber-ink); background: var(--amber); vertical-align: middle; }
.wr-close { position: static; flex: none; }
.wr-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-bottom: 6px; }
.wr-tab { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px 5px; font-size: 8px; white-space: nowrap; }
.wr-tab-ico { flex: none; }
.wr-what { margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.wr-drawer .wr-body { flex: 1; min-height: 0; }
.wr-drawer .yard { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.wr-card.is-battalion { border-left: 4px solid var(--banner, #5a4420); }
.wr-col-row { grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto auto; }
.wr-slider { flex-direction: column; align-items: stretch; gap: 2px; }
.wr-slider-top { display: flex; justify-content: space-between; gap: 6px; }
.wr-slider-val { font-family: var(--px); font-size: 9px; font-weight: 400; color: var(--amber-hi); white-space: nowrap; }
.wr-slider-words { font-size: 10px; color: #5f6b7c; }
.wr-handle-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
.wr-eta { color: var(--amber-hi); }
@media (min-width: 769px) {
  .layout > .wr-drawer { grid-column: 2; grid-row: 1; }
  .layout.is-wr-open, .layout.is-wr-open.is-comms-collapsed { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 12px; }
  .layout.is-wr-open > .feed-panel, .layout.is-wr-open > .comms-handle { display: none; }
  .scrim-wr { display: none; }
}
@media (max-width: 768px) and (min-width: 421px) {
  .wr-drawer { position: fixed; z-index: 65; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); }
  .scrim-wr { display: none; }
}

/* PLANS: the handles over the map */
.plan-handles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.plan-handles[hidden] { display: none; }
.ph-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-line { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 4 3; }
.ph-back { stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 2 3; }
.ph-pin {
  position: absolute;
  transform: translate(-50%, calc(-100% - 6px));
  padding: 4px 5px 3px;
  font: 7px/1 var(--px);
  letter-spacing: 1px;
  color: var(--amber-ink);
  background: var(--amber);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.ph-pin::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 6px; margin-left: -1px; background: #000; }
.ph-pin.is-fallback { color: #06222a; background: var(--cyan); }
.ph-pin.is-reserve { color: #0d2414; background: #bdf2cb; }
.ph-pin.is-unset { opacity: 0.7; border-style: dashed; }
.ph-pin.is-drag { opacity: 1; cursor: grabbing; }
.ph-pin:disabled { cursor: default; }

/* the first-visit coachmarks: on the map, top-left, clear of the card and the camera bar */
.coach { position: absolute; left: 12px; top: 12px; z-index: 6; width: min(300px, calc(100% - 24px)); }
.coach::before { display: none; }

@media (max-width: 420px) {
  /* phones: the card and the drawer are bottom sheets, stacked, never wider than the screen */
  .cmd-card {
    position: fixed;
    z-index: 55;
    left: 0; right: 0; bottom: 0;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(7, 10, 16, 0.96);
    border-top: 2px solid var(--edge);
    pointer-events: auto;
  }
  .cc-portraits { display: flex; overflow-x: auto; max-height: none; background: transparent; border: none; box-shadow: none; }
  .cc-port { flex: none; }
  .cc-main { width: auto; background: transparent; border: none; box-shadow: none; }
  .cc-btn { min-height: 44px; font-size: 8px; }
  .wr-drawer {
    position: fixed;
    z-index: 70;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    max-height: 88dvh;
    border-left: none; border-right: none; border-bottom: none;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    animation: wr-up 0.16s steps(4, end);
  }
  .wr-tab { gap: 3px; padding: 6px 2px 4px; font-size: 7px; }
  .wr-drawer .yard { grid-template-columns: minmax(0, 1fr); }
  .form-sheet { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 88dvh; border-left: none; border-right: none; border-bottom: none; }
  .coach { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; }
}

/* --- the settlement on the planet (contract "Territory, roads and rearranging"; spec §3, §6, §7) --- */
/* the right-click card: MOVE · DEMOLISH · INFO, small and close to the click */
.ctx-card { width: 260px; z-index: 56; }
.ctx-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ctx-actions button { flex: 1 1 auto; min-height: 30px; }
/* the muster card: a commander's barracks, its mix and where each part stands */
.muster-card { width: 320px; z-index: 56; }
.muster-rows { display: grid; gap: 3px; margin: 0 0 8px; padding: 6px 8px; background: var(--well); border: 2px solid var(--edge); }
.muster-row { display: grid; grid-template-columns: 34px 28px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; font-size: 12px; }
.muster-row .yard-sprite { grid-row: span 2; image-rendering: pixelated; image-rendering: crisp-edges; }
.muster-n { font-family: var(--px); font-size: 10px; color: var(--amber-hi); text-align: right; }
.muster-type { color: var(--ink); }
.muster-where { grid-column: 2 / 4; font-size: 10px; color: #8792a3; letter-spacing: 0.5px; }
/* ARMY tab: one row per commander, the mix as the yard's own sprites */
.wr-row.army-row { grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto auto auto; }
.army-mix { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.army-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 1px; background: var(--well); border: 1px solid var(--edge); }
.army-chip .yard-sprite { width: 34px; height: 18px; image-rendering: pixelated; image-rendering: crisp-edges; }
.army-chip-n { font-family: var(--px); font-size: 9px; color: var(--amber-hi); }
.army-loc { font-family: var(--px); font-size: 8px; letter-spacing: 1px; padding: 3px 5px 2px; border: 1px solid currentColor; color: #8fd16a; white-space: nowrap; }
.army-loc.is-away { color: var(--amber-hi); }
.army-loc.is-battle { color: #ff6a4a; }
.cam-labels { min-width: 74px; }
@media (max-width: 768px) {
  .ctx-card, .muster-card { inset: auto 0 0 0 !important; width: auto; max-width: none; border-left: none; border-right: none; }
  .wr-row.army-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .army-row .army-mix { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 420px) {
  .cam-labels { min-width: 0; font-size: 7px; letter-spacing: 0; padding: 0 3px; }
}