:root {
  --bg: #e5dfcf;
  --surface: #f7f2e6;
  --surface-2: #e9e3d3;
  --text: #292c23;
  --muted: #626354;
  --border: #c6beaa;
  --accent: #46523b;
  --accent-text: #f7f2e6;
  --danger: #913e32;
  --focus: #9a6e22;
  --ok: #496442;

  --marines: #2a5fa8;
  --civilians: #b07a12;
  --infected: #a8322a;

  --heading-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --label-font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --control-border: #818570;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191c17;
    --surface: #242820;
    --surface-2: #30352a;
    --text: #eee8d8;
    --muted: #b5b6a4;
    --border: #4d5344;
    --accent: #c4ba8e;
    --accent-text: #20251a;
    --danger: #e2937f;
    --ok: #aabe8d;
    --marines: #6d9be0;
    --civilians: #e0aa45;
    --infected: #e0655b;
    --control-border: #858b72;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* The hidden attribute must win over display rules such as button { display: inline-flex }. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--accent); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.plain { list-style: none; margin: 0; padding: 0; }
.eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.25rem; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: 0.5rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Things only meaningful with script, and fallbacks hidden when script runs. */
html:not(.js) .js-only { display: none !important; }
html.js .js-hide { display: none !important; }

/* Top bar */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
.campaign { font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: 2px; font-size: 0.9rem;
}
.who { margin-left: auto; }

/* Forms */
label { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.95rem; }
input, select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 2px; padding: 0.55rem 0.65rem; min-height: 44px; width: 100%;
}
.code-input { text-transform: uppercase; letter-spacing: 0.12em; font-size: 1.15rem; }
button, .button {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 1rem;
  border-radius: 2px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text);
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button.icon { width: 44px; padding: 0; font-size: 1.2rem; }
button.link {
  background: none; border: none; color: var(--accent); padding: 0 0.25rem; min-height: 0;
  text-decoration: underline; font-weight: 500;
}
.danger { color: var(--danger) !important; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row select { flex: 1; min-width: 8rem; width: auto; }
.toggle { display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem; font-weight: 500; }
.toggle input { width: auto; min-height: 0; }

.alert {
  border: 1px solid var(--danger); color: var(--danger); background: var(--surface);
  border-radius: 2px; padding: 0.6rem 0.8rem;
}

/* Cards and panels */
.narrow { max-width: 34rem; margin: 1.5rem auto; padding: 0 16px; display: grid; gap: 1rem; }
.card, .panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1rem;
}
.rooms li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; padding: 0.35rem 0; }
.briefing p { max-width: 60ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 1rem 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

.tag {
  display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); vertical-align: middle;
}
.tag-referee { color: var(--accent); }
.tag-approved { color: var(--ok); }
.tag-pending { color: var(--civilians); }
.tag-declined, .tag-removed { color: var(--danger); }
.tag-hidden { color: var(--infected); border: 1px dashed currentColor; background: none; }
.count {
  display: inline-block; min-width: 1.4rem; text-align: center; border-radius: 2px;
  background: var(--danger); color: var(--surface); font-size: 0.8rem; padding: 0 0.35rem;
}

@media (min-width: 960px) {
  .screen > .next { grid-column: 1 / -1; }
}
.next {
  margin: 0; padding: 0.7rem 1rem; border-radius: 3px; background: var(--surface);
  border-left: 4px solid var(--accent);
}
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.panel-head h2 { margin: 0; }
.map-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; min-width: 0; }

.list > li { padding: 0.55rem 0; border-top: 1px solid var(--border); }
.list > li:first-child { border-top: none; }
.request, .member { display: grid; gap: 0.35rem; }
.assign { display: grid; gap: 0.3rem; }
.assign label { font-weight: 400; display: block; }
.side-h { margin-top: 0.75rem; padding-left: 0.5rem; border-left: 4px solid; }
.side-h.side-marines { border-color: var(--marines); }
.side-h.side-civilians { border-color: var(--civilians); }
.side-h.side-infected { border-color: var(--infected); }
.unit.is-hidden { opacity: 0.75; }
.abbr {
  display: inline-block; min-width: 2.2rem; text-align: center; font-size: 0.7rem; font-weight: 700;
  border-radius: 3px; padding: 0 0.2rem; color: #fff; margin-right: 0.25rem;
}
.abbr.side-marines { background: var(--marines); }
.abbr.side-civilians { background: var(--civilians); }
.abbr.side-infected { background: var(--infected); }
.log li { padding: 0.3rem 0; font-size: 0.9rem; border-top: 1px solid var(--border); }
.log li:first-child { border-top: none; }
.log time { color: var(--muted); font-size: 0.8rem; margin-right: 0.35rem; }
details.panel > summary { cursor: pointer; list-style-position: inside; }
details.panel > summary h2 { display: inline; }

/* Map */
.map-wrap { touch-action: none; }
#map { display: block; width: 100%; height: auto; max-height: 75vh; user-select: none; cursor: grab; }
@media (max-width: 700px) {
  /* Phones get a square window onto the map and pan around it. */
  #map { aspect-ratio: 1 / 1; max-height: 70vh; }
}
#map.dragging { cursor: grabbing; }
.cursor { fill: none; stroke: var(--focus); stroke-width: 2.2; vector-effect: non-scaling-stroke; pointer-events: none; }

.proposed {
  fill: none; stroke: var(--infected); stroke-width: 2; stroke-dasharray: 3 2; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .proposed { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { stroke-opacity: 0.25; } }
}

.inspector { margin-top: 0.75rem; min-height: 3rem; }
.inspector h3 { margin-bottom: 0.25rem; }
.inspector ul { margin: 0.25rem 0 0; }
.legend { margin-top: 0.75rem; }
.legend summary { cursor: pointer; font-weight: 600; }
.swatches { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.swatches li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; }
.swatch { width: 1.3rem; height: 1.4rem; flex: none; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.35rem 0.5rem 0.35rem 0; border-top: 1px solid var(--border); vertical-align: top; }

@media (prefers-reduced-motion: no-preference) {
  .inspector { transition: background-color 0.2s; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.row.tight { gap: 0.25rem; }
button.wide { width: 100%; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.threat { margin-bottom: 0.4rem; }
.threat-label { font-weight: 600; }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--infected); }
.pip.on { background: var(--infected); }
.threat form { margin-left: auto; }
.pick-event { margin-top: 0.5rem; }
.proposal {
  margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-left: 4px solid var(--infected);
  border-radius: 3px; background: var(--surface-2);
}
.proposal.cat-respite { border-left-color: var(--ok); }
.proposal.cat-monster, .proposal.cat-wave { border-left-width: 6px; }
.proposal-head { margin-bottom: 0.15rem; }
.effects { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.tag-cat { color: var(--infected); }
.tag-sitrep { color: var(--civilians); border: 1px solid currentColor; background: none; }
.traits summary { cursor: pointer; color: var(--muted); }

/* ---- Dashboard and editor additions ---- */
.next p:last-child { margin-bottom: 0; }
.next form { margin-top: 0.5rem; }
.small-btn { min-height: 36px; padding: 0.25rem 0.75rem; font-size: 0.9rem; }
.access input { min-height: 36px; flex: 1; }
.access summary h2, .access summary { display: inline; cursor: pointer; }
textarea {
  font: inherit; color: var(--text); background: var(--surface); width: 100%;
  border: 1px solid var(--border); border-radius: 2px; padding: 0.55rem 0.65rem; resize: vertical;
}
.tools { display: flex; flex-wrap: wrap; gap: 0.35rem; border: none; padding: 0; margin: 0 0 0.5rem; }
.tool { display: inline-flex; flex-direction: row; font-weight: 600; font-size: 0.9rem; }
.tool input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool span {
  padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: 2px; cursor: pointer; min-height: 36px;
  display: inline-flex; align-items: center;
}
.tool input:checked + span { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.tool input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.tool-opts { margin-bottom: 0.5rem; gap: 0.75rem; }
.tool-opts[hidden] { display: none !important; }
.tool-opts select, .tool-opts input[type=number], .tool-opts input:not([type]) { width: auto; min-height: 36px; padding: 0.3rem 0.5rem; }
label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; }
.swatch-pick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.swatch-pick label {
  display: inline-flex; flex-direction: row; align-items: center; gap: 0.3rem; font-weight: 500; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: 2px; padding: 0.2rem 0.5rem 0.2rem 0.3rem; cursor: pointer;
}
.swatch-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch-pick label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.swatch-pick label:has(input:focus-visible) { outline: 3px solid var(--focus); }
.tool-hint { min-height: 1.4em; font-size: 0.9rem; color: var(--accent); margin: 0 0 0.4rem; font-weight: 600; }
#map[data-tool="terrain"], #map[data-tool="edges"], #map[data-tool="roads"], #map[data-tool="crossings"],
#map[data-tool="units"], #map[data-tool="places"], #map.moving { cursor: crosshair; }
.edit-list .edit-row { display: grid; gap: 0.3rem; }
.edit-list input, .edit-list select { min-height: 34px; padding: 0.25rem 0.45rem; font-size: 0.9rem; }
.edit-list .grow { flex: 1; min-width: 8rem; width: auto; }
.edit-list .num { width: 6rem; }
.edit-list select { width: auto; }
.edit-list li.side-h { border-top: none; font-weight: 700; margin-top: 0.5rem; }
.event-tables { grid-column: 1 / -1; }
.table-scroll { overflow-x: auto; }
table.events { min-width: 900px; }
table.events th[scope=row] { min-width: 12rem; font-weight: 400; }
table.events td.odds, table.events th.odds { text-align: center; white-space: nowrap; width: 3.2rem; }
table.events .now { background: color-mix(in srgb, var(--infected) 14%, transparent); font-weight: 700; }
table.events tr.off { opacity: 0.6; }
table.events td.num { text-align: center; }

/* ---- The map: a printed mapboard with die-cut cardboard counters ----
   Map colors don't follow the page theme: it's paper and ink either way.
   In dark mode a translucent veil dims the board instead. */
:root {
  --ink: #2a2117;
  --paper: #efe5c8;
  --t-sea: #87adc6;
  --t-shallow: #a3c3d6;
  --t-deep: #7499b5;
  --t-river: #87adc6;
  --t-beach: #eed9a0;
  --t-open: #ece2bd;
  --t-urban: #cfc8b6;
  --t-dense: #b3ab9a;
  --t-industrial: #c4b69b;
  --t-forest: #a9c182;
  --t-hills: #dcb57a;
  --t-marsh: #bfd2b1;
  --river: #6c9cc0;
  --river-ink: #2c4c66;
  --road: #c4552f;
  --road-ink: #3b2a1b;
  --ridge: #74431d;
  --cliff: #2a2117;
  --wall: #5d554b;

  --c-marines: #b9c48c;
  --c-civilians: #f4eddb;
  --c-infected: #c4513d;
  --c-monster: #8e2b22;
  --c-nest: #6f4466;
  --c-back: #cdbb8e;
  --c-edge: #6a5739;
  --c-ink-light: #f7efdc;
  --counter-font: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}

.map-wrap {
  border: 3px solid var(--ink); border-radius: 3px; overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink), 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 3px;
}
.terrain use { stroke: var(--ink); stroke-opacity: 0.42; stroke-width: 0.45; }
.t-sea, .t-river { fill: var(--t-sea); }
.t-sea.d1 { fill: var(--t-shallow); }
.t-sea.d3 { fill: var(--t-deep); }
.t-beach { fill: var(--t-beach); }
.t-open { fill: var(--t-open); }
.t-urban { fill: var(--t-urban); }
.t-dense { fill: var(--t-dense); }
.t-industrial { fill: var(--t-industrial); }
.t-forest { fill: var(--t-forest); }
.t-hills { fill: var(--t-hills); }
.t-marsh { fill: var(--t-marsh); }

.texture use { stroke: none; pointer-events: none; }
.tx-sea, .tx-river { fill: url(#p-sea); }
.tx-sea.deep { opacity: 0.6; }
.tx-beach { fill: url(#p-beach); }
.tx-open { fill: url(#p-open); }
.tx-forest { fill: url(#p-forest); }
.tx-hills { fill: url(#p-hills); }
.tx-urban { fill: url(#p-urban); opacity: 0.8; }
.tx-dense { fill: url(#p-dense); opacity: 0.75; }
.tx-industrial { fill: url(#p-industrial); opacity: 0.7; }
.tx-marsh { fill: url(#p-marsh); }
.pt-wave { fill: none; stroke: #4a7898; stroke-width: 0.45; stroke-linecap: round; }
.pt-sand { fill: #a3864a; }
.pt-grass { fill: none; stroke: #8f8a55; stroke-width: 0.4; stroke-linejoin: round; }
.pt-tree { fill: #7aa05a; stroke: #2e4a22; stroke-width: 0.45; }
.pt-trunk { stroke: #2e4a22; stroke-width: 0.5; }
.pt-hill { fill: none; stroke: #8a5527; stroke-width: 0.6; stroke-linecap: round; }
.pt-hachure { stroke: #8a5527; stroke-width: 0.35; stroke-linecap: round; }
.pt-bldg { fill: #a59d8b; stroke: var(--ink); stroke-width: 0.4; }
.pt-tower { fill: #8c8474; stroke: var(--ink); stroke-width: 0.45; }
.pt-hatch { stroke: var(--ink); stroke-width: 0.25; opacity: 0.6; }
.pt-roof { fill: #7a6c56; stroke: var(--ink); stroke-width: 0.35; }
.pt-reed { fill: none; stroke: #3b6a52; stroke-width: 0.4; stroke-linecap: round; }
.pt-pool { fill: none; stroke: #4a7898; stroke-width: 0.5; stroke-linecap: round; }
.pt-grain { fill: #7a6440; opacity: 0.35; }
.pt-fiber { fill: none; stroke: #7a6440; stroke-width: 0.2; opacity: 0.3; }
.paper { fill: url(#p-paper); pointer-events: none; }
.night { display: none; pointer-events: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .night { display: inline; fill: rgba(12, 9, 5, 0.24); }
}
.hexnums text {
  font: 600 3.1px var(--counter-font); fill: var(--ink); opacity: 0.55; text-anchor: middle;
  pointer-events: none; letter-spacing: 0.1px;
}

.coast, [class^="e-"], .road, .road-casing, .side-cursor, #edit-preview line {
  fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.coast { stroke: #2f5068; stroke-width: 0.9; }
.e-river-bank { stroke: var(--river-ink); stroke-width: 3.6; }
.e-river { stroke: var(--river); stroke-width: 2.4; }
.e-stream-bank { stroke: var(--river-ink); stroke-width: 2; }
.e-stream { stroke: var(--river); stroke-width: 1; }
.road-casing { stroke: var(--road-ink); stroke-width: 2.5; }
.road { stroke: var(--road); stroke-width: 1.3; }
.e-ridge-base { stroke: var(--ridge); stroke-width: 1.4; }
.e-ridge { stroke: var(--ridge); stroke-width: 4.4; stroke-dasharray: 0.7 1.6; stroke-linecap: butt; }
.e-cliff-base { stroke: var(--cliff); stroke-width: 1.8; }
.e-cliff { stroke: var(--cliff); stroke-width: 4.4; stroke-dasharray: 0.6 1.3; stroke-linecap: butt; }
.e-wall-base { stroke: var(--cliff); stroke-width: 2.4; }
.e-wall { stroke: var(--paper); stroke-width: 1.1; stroke-dasharray: 1.6 1; }
#crossings-layer line { stroke-linecap: butt; }
.x-bridge .x-under { stroke: var(--ink); stroke-width: 5.4; }
.x-bridge .x-top { stroke: var(--paper); stroke-width: 3.8; }
.x-ford .x-under { stroke: var(--river-ink); stroke-width: 4.6; }
.x-ford .x-top { stroke: var(--t-beach); stroke-width: 3.6; stroke-dasharray: 1.1 0.8; }
.x-pass .x-under { stroke: var(--t-hills); stroke-width: 6.4; }
.x-pass .x-top { stroke: var(--road-ink); stroke-width: 0.9; stroke-dasharray: 1.2 0.9; }
.x-gate .x-under { stroke: var(--ink); stroke-width: 4.6; }
.x-gate .x-top { stroke: var(--paper); stroke-width: 2.4; }

/* Places: printed map symbols with lettering. */
.fmark { fill: var(--paper); stroke: var(--ink); stroke-width: 0.6; }
.feature .glyph { font: 800 4.6px var(--counter-font); text-anchor: middle; fill: var(--ink); pointer-events: none; }
.feature.k-hospital .fmark { fill: #fff; }
.feature.k-hospital .glyph { fill: #b5291c; }
.feature.k-hive .fmark { fill: var(--c-nest); stroke-dasharray: 1 0.6; }
.feature.k-hive .glyph { fill: var(--c-ink-light); }
.feature.hidden { opacity: 0.75; }
.flabel {
  font: 700 4.3px var(--counter-font); text-transform: uppercase; letter-spacing: 0.25px; text-anchor: middle;
  fill: var(--ink); stroke: var(--paper); stroke-width: 1.6px; paint-order: stroke; pointer-events: none;
}
#map.no-labels .flabel { display: none; }

/* Counters: die-cut cardboard with a printed face and a thick brown edge. */
#units-layer { filter: drop-shadow(0.6px 0.9px 0.6px rgba(0, 0, 0, 0.5)); }
.counter .ctr-edge { fill: var(--c-edge); }
.counter .ctr-back { fill: var(--c-edge); stroke: #3d311f; stroke-width: 0.3; }
.counter .ctr { fill: var(--face, var(--c-back)); stroke: #3d311f; stroke-width: 0.35; }
.counter .ctr-line { fill: none; stroke: var(--counter-ink, var(--ink)); stroke-width: 0.3; opacity: 0.55; }
.counter.role-player, .counter.side-marines { --face: var(--c-marines); }
.counter.role-neutral, .counter.side-civilians { --face: var(--c-civilians); }
.counter.role-enemy, .counter.side-infected { --face: var(--c-infected); --counter-ink: var(--c-ink-light); }
.counter.side-infected.kind-monster { --face: var(--c-monster); }
.counter.side-infected.kind-nest { --face: var(--c-nest); }
.counter.contact { --face: var(--c-back); --counter-ink: var(--ink); }
.counter text { font-family: var(--counter-font); text-anchor: middle; fill: var(--counter-ink, var(--ink)); pointer-events: none; }
.ctr-id { font-size: 3.4px; font-weight: 700; letter-spacing: 0.2px; }
.ctr-f { font-size: 4.8px; font-weight: 800; letter-spacing: 0.15px; }
.ctr-q { font-size: 12px; font-weight: 800; fill: var(--c-infected) !important; }
.ctr-n { font-size: 3.2px; font-weight: 800; }
/* Symbols live in <defs> and are drawn through <use>, so selectors can't
   see the counter around them; colors arrive as inherited variables. */
.sym, .sym-frame, .sym-bold { fill: none; stroke: var(--counter-ink, var(--ink)); stroke-linecap: round; stroke-linejoin: round; }
.sym, .sym-frame { stroke-width: 0.55; }
.sym-bold { stroke-width: 0.95; }
.sym-fill { fill: var(--counter-ink, var(--ink)); }
.sym-cut { stroke: var(--face); stroke-width: 0.7; stroke-linecap: round; fill: none; }
.sym-cut-fill { fill: var(--face); }
.counter.mine .ctr { stroke: #e0a100; stroke-width: 1.1; }
.counter.hidden .ctr { stroke-dasharray: 1.4 0.9; stroke-width: 0.7; }
.counter.hidden { opacity: 0.82; }

/* Counter chips in lists match the board. */
.abbr {
  display: inline-block; min-width: 2.2rem; text-align: center; font: 700 0.7rem var(--counter-font); letter-spacing: 0.04em;
  border-radius: 2px; padding: 0.05rem 0.25rem; margin-right: 0.3rem; color: var(--ink);
  border: 1px solid #3d311f; box-shadow: 1.5px 1.5px 0 var(--c-edge);
}
.abbr.side-marines { background: var(--c-marines); }
.abbr.side-civilians { background: var(--c-civilians); }
.abbr.side-infected { background: var(--c-infected); color: var(--c-ink-light); }
.swatch use { stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 0.8; }

/* ---- Command and invites ---- */
.tag-commander { color: var(--c-monster, #8e2b22); border: 1px solid currentColor; background: none; }
.member-tools { gap: 0.25rem 0.75rem; }
select.compact { width: auto; min-height: 34px; padding: 0.2rem 0.4rem; font-size: 0.9rem; }
.invites li.closed { opacity: 0.6; }
.grow-input { flex: 1; min-width: 8rem; min-height: 34px; width: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag-commander { color: #e9907f; }
}

/* ---- Turn clock ---- */
.compact-input { width: auto; min-height: 34px; padding: 0.2rem 0.4rem; font-size: 0.9rem; }
.plain-fieldset { border: none; padding: 0; margin: 0; }
.plain-fieldset legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.schedule { margin-top: 0.75rem; }
.schedule summary { cursor: pointer; font-weight: 600; }
.local-time { color: var(--muted); font-weight: 400; }
#turn-clock form { margin-bottom: 0.4rem; }

.danger-btn { background: var(--danger); border-color: var(--danger); color: #fff; }
.danger-zone summary, .danger-zone summary h2 { display: inline; cursor: pointer; }

/* ---- Fog of war ---- */
.pt-fogwash { fill: #ddd3b8; opacity: 0.62; }
.pt-foghatch { stroke: #6b5e48; stroke-width: 0.35; opacity: 0.5; }
.fog { fill: url(#p-fog); pointer-events: none; }
.fog.ref-fog { display: none; }
#map.show-fog .fog.ref-fog { display: inline; }
.counter.ghost { opacity: 0.6; }
.counter.ghost .ctr { stroke-dasharray: 1.5 1; }
.ctr-seen { font-size: 3.2px; font-weight: 800; }

/* ---- Orders ---- */
.order-form { margin-top: 0.75rem; border: 2px solid var(--accent); border-radius: 3px; padding: 0.6rem 0.8rem; background: var(--surface); }
.order-form summary { cursor: pointer; font-weight: 700; }
.order-form[open] summary { margin-bottom: 0.5rem; }
.dest-hint { color: var(--accent); margin: 0.25rem 0 0; }
.dest-hint.bad { color: var(--danger); }
.tag-order-none { color: var(--danger); }
.tag-order-draft { color: var(--civilians); }
.tag-order-committed, .tag-order-locked { color: var(--ok); }
.order-slot { display: grid; gap: 0.2rem; }
.reach { fill: #f2c94c; fill-opacity: 0.33; stroke: #a87b00; stroke-width: 0.8; pointer-events: none; }
.reach-start { fill: none; stroke: #1d4f91; stroke-width: 2; pointer-events: none; }
.reach-cost { font: 700 4.4px var(--counter-font); fill: #6b4b00; text-anchor: middle; pointer-events: none; }
.order-line, .route-preview { fill: none; stroke: #1d4f91; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.order-line { stroke: #3e5873; opacity: 0.8; }
.order-line.mine { stroke: #1d4f91; opacity: 1; }
.order-line.s-draft { stroke-dasharray: 2.5 1.6; }
.route-preview { stroke: #b5291c; stroke-width: 2; stroke-dasharray: 2 1.2; }
.arrowhead { fill: #1d4f91; }
#orders-layer polyline { pointer-events: stroke; }

/* ---- Stacking ---- */
.reach.full { fill: #9a9a9a; fill-opacity: 0.35; stroke: #555; stroke-dasharray: 1.5 1; }
.counter.full .ctr-n { fill: #b5291c; }
.stack-line.full { color: var(--danger); font-weight: 600; }

/* ---- Unit cards ---- */
.unit-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.unit-link:hover { color: var(--accent); }
.unit-card .card-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.card-counter { width: 96px; height: 96px; flex: none; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.45)); }
.unit-card h1 { margin-bottom: 0.15rem; }
.unit-card h2 { margin-top: 1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.stat-grid div { border: 1px solid var(--border); border-radius: 2px; padding: 0.4rem 0.5rem; text-align: center; background: var(--surface-2); }
.stat-grid dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.stat-grid dd { margin: 0; font: 800 1.5rem var(--counter-font); }
.xp-ladder { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; }
.xp-ladder li { border: 1px solid var(--border); border-radius: 2px; padding: 0.15rem 0.6rem; font-size: 0.85rem; }
.xp-ladder li.now { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.xp-ladder li.now .muted { color: inherit; }
.tag-xp { color: #8a6100; border: 1px solid currentColor; background: none; }
.traits-list dt { font-weight: 700; margin-top: 0.4rem; }
.traits-list dd { margin: 0 0 0 0.75rem; }
.card-dialog { border: none; border-radius: 3px; padding: 0; max-width: min(36rem, calc(100vw - 32px)); width: 100%; background: transparent; }
.card-dialog::backdrop { background: rgba(10, 8, 5, 0.55); }
.card-dialog .unit-card { margin: 0; max-height: calc(100vh - 4rem); overflow-y: auto; }
.card-close { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 1; }
.xp-chevrons { fill: none; stroke: var(--counter-ink, var(--ink)); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.num-xs { width: 4rem; min-height: 30px; padding: 0.1rem 0.3rem; }
.end-op { margin-top: 0.5rem; }

/* ---- Rules ---- */
.rules-page { max-width: 60rem; margin: 1.5rem auto; padding: 0 16px; }
.rules section { margin-top: 1.75rem; }
.rules h2 { font-size: 1.3rem; border-bottom: 2px solid var(--border); padding-bottom: 0.25rem; }
.rules p, .rules li { max-width: 70ch; }
.rules table { margin: 0.5rem 0 1rem; }
.rules th[scope=row] { font-weight: 600; }
.toc { padding: 0.6rem 0.8rem; background: var(--surface-2); border-radius: 3px; line-height: 2; }
.referee-only { border-left: 4px solid var(--infected); padding-left: 0.75rem; }
@media (max-width: 700px) { .rules table { display: block; overflow-x: auto; } }

.orders-in.all-in { color: var(--ok); }

.count.calm { background: var(--ok); }

/* ---- Blind and admin view ---- */
.view-mode { display: inline; }
.chip-btn { min-height: 32px; padding: 0.15rem 0.7rem; border-radius: 2px; font-size: 0.85rem; }
.chip-btn.blind { background: #2b2118; border-color: #2b2118; color: #f2e7cf; }
.chip-btn.admin { background: var(--danger); border-color: var(--danger); color: #fff; }
.blind-note { border-left: 3px solid #2b2118; padding-left: 0.5rem; }

/* ---- Resolution desk ---- */
.desk { border: 2px solid var(--infected); }
.desk-head h2 { margin-bottom: 0.25rem; }
.desk .notes { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.encounter { margin-top: 1rem; padding: 0.75rem; border: 1px solid var(--border); border-left: 5px solid var(--infected); border-radius: 3px; background: var(--surface-2); }
.encounter.settled { border-left-color: var(--ok); }
.enc-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; margin-bottom: 0.5rem; }
.enc-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .enc-sides { grid-template-columns: 1fr; } }
.enc-side { background: var(--surface); border-radius: 2px; padding: 0.5rem 0.6rem; }
.enc-side h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.enc-side.friend h3 { color: var(--accent); }
.enc-side.enemy h3 { color: var(--infected); }
.fighters li { padding: 0.1rem 0; }
table.pool { margin: 0.35rem 0 0; }
table.pool td, table.pool th { padding: 0.15rem 0.3rem 0.15rem 0; border-top: 1px dotted var(--border); }
table.pool .num { text-align: right; width: 2.5rem; font-weight: 700; }
table.pool tr.total th, table.pool tr.total td { border-top: 2px solid var(--border); font-weight: 800; }
.dice { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin: 0.4rem 0 0; }
.die {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 4px; font: 800 0.8rem var(--counter-font);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.die.hit { background: #f6efdc; border-color: #3d311f; color: #2a2117; box-shadow: 1px 1px 0 var(--c-edge, #6a5739); }
.enc-result { margin: 0.6rem 0 0.4rem; }
.enc-form { margin-top: 0.5rem; display: grid; gap: 0.4rem; }
.moves { margin-top: 1rem; }
.moves li.r-enemy { color: var(--infected); }
.chip.score { border-color: var(--ok); color: var(--ok); font-weight: 600; }

/* ---- Reports ---- */
.report { border-top: 1px solid var(--border); padding: 0.4rem 0; }
.report summary { cursor: pointer; }
.report ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.report.aar summary strong { color: var(--accent); }
.aar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.4rem; margin: 0.5rem 0; }
.aar-stats div { background: var(--surface-2); border-radius: 2px; padding: 0.35rem 0.5rem; }
.aar-stats dt { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.aar-stats dd { margin: 0; font-weight: 800; }

/* ---- Map: this turn's resolution ---- */
.res-line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 1.5; pointer-events: stroke; }
.res-line.r-player { stroke: #1d4f91; }
.res-line.r-enemy { stroke: #b5291c; }
.res-line.r-neutral { stroke: #8a6100; }
.enc-mark path { fill: #b5291c; stroke: #2a2117; stroke-width: 0.6; }
.enc-mark.settled path { fill: #2f6b3a; }
@media (prefers-reduced-motion: no-preference) {
  .enc-mark:not(.settled) path { animation: pulse 1.4s ease-in-out infinite; }
}

/* ==== The room as an application: screens, windows, and a status bar ====
   In the spirit of old simulation games: a command-post frame around the
   work, screens you switch between, windows with title strips, ledgers, and a
   status line that always tells you where the clock stands. */
:root {
  --chrome: #30382a;
  --chrome-2: #454d39;
  --chrome-text: #f2ecd9;
  --chrome-muted: #c7c7ac;
  --frame: #b2ac93;
  --titlebar: #ded8c4;
  --titlebar-text: #343c2b;
  --screen-bg: #e5dfcf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chrome: #171b14;
    --chrome-2: #313a28;
    --chrome-text: #eee8d8;
    --chrome-muted: #b8b9a1;
    --frame: #535a47;
    --titlebar: #353d2c;
    --titlebar-text: #e8e2cc;
    --screen-bg: #1c2119;
  }
}
body:has(.statusbar) { background: var(--screen-bg); padding-bottom: 2.6rem; }

.appbar { background: var(--chrome); color: var(--chrome-text); position: sticky; top: 0; z-index: 20; }
.titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.45rem 16px; }
.titlebar .brand { color: var(--chrome-text); letter-spacing: 0.02em; }
.titlebar .campaign { font-weight: 700; }
.titlebar .chip { border-color: var(--chrome-2); color: var(--chrome-text); }
.titlebar .chip .link { color: var(--chrome-muted); }
.titlebar .who { margin-left: 0; }
.titlebar .tag { background: var(--chrome-2); color: var(--chrome-text); }
.spacer { flex: 1; }

.screen-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px; padding: 0.15rem 16px 0; border-bottom: 3px solid var(--screen-bg); }
.screen-tab {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 38px; padding: 0.35rem 1rem;
  border-radius: 2px 2px 0 0; background: var(--chrome-2); color: var(--chrome-text); text-decoration: none;
  font-weight: 600; font-size: 0.92rem; border: 1px solid var(--chrome-2); border-bottom: none; position: relative; top: 3px;
}
.screen-tab:hover { background: color-mix(in srgb, var(--chrome-2) 70%, var(--chrome-text)); }
.screen-tab.active { background: var(--screen-bg); color: var(--text); border-color: var(--screen-bg); }
.screen-tab.tool { background: transparent; border-color: transparent; color: var(--chrome-muted); font-weight: 500; }
.screen-tab.tool:hover { color: var(--chrome-text); }
.screen-tab .count { font-size: 0.75rem; }

.screen { display: grid; gap: 1rem; padding: 1rem 16px; max-width: 1680px; margin: 0 auto; }
.screen .next { margin: 0; }
.cols { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
.col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 960px) {
  .cols-turn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols-events { grid-template-columns: 26rem minmax(0, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-reports { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.map-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .map-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
  .info-col { position: sticky; top: 6.5rem; max-height: calc(100vh - 10rem); overflow-y: auto; }
}
.info-col { display: grid; gap: 1rem; align-content: start; min-width: 0; }

/* Windows: a title strip on top of every panel. */
.screen .panel { border: 1px solid var(--frame); border-radius: 5px; padding: 0 0.9rem 0.9rem; overflow: hidden; }
.screen .panel > h2:first-child,
.screen .panel > .panel-head:first-child,
.screen .panel > summary:first-child,
.screen .desk-head > h2:first-child {
  margin: 0 -0.9rem 0.75rem; padding: 0.4rem 0.9rem; background: var(--titlebar); color: var(--titlebar-text);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em;
}
.screen .panel > h2 .muted, .screen .panel > .panel-head .muted { color: color-mix(in srgb, var(--titlebar-text) 70%, transparent); text-transform: none; letter-spacing: 0; }
.screen .panel > .panel-head:first-child h2 { font-size: inherit; margin: 0; color: inherit; }
.screen .panel > .panel-head:first-child .secondary { color: var(--titlebar-text); border-color: color-mix(in srgb, var(--titlebar-text) 40%, transparent); min-height: 32px; }
.screen .panel > .panel-head:first-child .icon { width: 32px; }
.screen .panel > .panel-head:first-child .toggle { color: var(--titlebar-text); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.screen .panel > summary:first-child { cursor: pointer; display: block; }
.screen .panel > summary:first-child h2 { font-size: inherit; display: inline; }
.screen details.panel:not([open]) { padding-bottom: 0; }
.screen details.panel:not([open]) > summary:first-child { margin-bottom: 0; }
.screen .desk { padding-top: 0; }
.screen .desk-head { margin: 0 -0.9rem; padding: 0 0.9rem 0.6rem; border-bottom: 1px solid var(--frame); }
.screen .desk-head > h2:first-child { margin: 0 -0.9rem 0.6rem; }
.screen .map-panel { padding-bottom: 0.9rem; }
.screen .map-wrap { margin: 0; }
#map { max-height: calc(100vh - 13rem); }

/* Ledgers. */
table.ledger { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.ledger th, table.ledger td { padding: 0.35rem 0.5rem; border-top: 1px solid var(--border); vertical-align: middle; }
table.ledger thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface-2); border-top: none; }
table.ledger tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
table.ledger tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
table.ledger tr.ghost, table.ledger tr.is-hidden { opacity: 0.75; }
table.ledger th[scope=row] { font-weight: 600; white-space: nowrap; }
.ledger-panel .side-h { margin-top: 1rem; }

/* Status bar. */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: stretch; min-height: 2.2rem;
  background: var(--chrome); color: var(--chrome-text); font: 600 0.8rem ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  border-top: 1px solid var(--chrome-2);
}
.status-cells { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; }
.sb-cell { display: flex; align-items: center; gap: 0.4em; padding: 0 0.85rem; border-right: 1px solid var(--chrome-2); white-space: nowrap; }
.sb-cell.good { color: #9fd39a; }
.sb-cell.warn { color: #f2c94c; }
.sb-cell time { color: inherit; }
.sb-live { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.9rem; color: var(--chrome-muted); }
.sb-live::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #8a8577; }
.sb-live.on { color: #9fd39a; }
.sb-live.on::before { background: #b6c39b; box-shadow: none; }
.sb-live.off { color: #f2c94c; }
.sb-live.off::before { background: #f2c94c; }
@media (max-width: 640px) { .statusbar { font-size: 0.72rem; } .sb-cell { padding: 0 0.5rem; } }

/* Setup: the map with its settings beside it, then rows of panels. Nothing
   sticks, so nothing can slide over anything else. */
.setup-top { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.setup-aside { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 1100px) { .setup-top { grid-template-columns: minmax(0, 1fr) 24rem; } }
.setup-screen .edit-list { max-height: 34rem; overflow-y: auto; }

.order-slot .button { justify-self: start; }
@media (max-width: 700px) {
  .appbar { position: static; }
  .titlebar { padding: 0.35rem 12px; gap: 0.3rem 0.6rem; }
  .screen-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0.15rem 12px 0; }
  .screen-tabs::-webkit-scrollbar { display: none; }
  .screen-tab { flex: none; padding: 0.3rem 0.8rem; }
  .screen-tabs .spacer { flex: 0 0 0.5rem; }
}

/* Turn procedure strip. */
.turn-steps { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
@media (max-width: 760px) { .turn-steps { grid-template-columns: 1fr 1fr; } }
.turn-steps li { border: 1px solid var(--frame); border-radius: 2px; padding: 0.5rem 0.65rem; background: var(--surface-2); display: grid; gap: 0.15rem; }
.turn-steps li span { font-size: 0.82rem; color: var(--muted); }
.turn-steps li.done { opacity: 0.6; }
.turn-steps li.done strong::after { content: " ✓"; color: var(--ok); }
.turn-steps li.now { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.turn-steps li.now span { color: inherit; }
.step-action { gap: 0.75rem; }

.rules-screen, .card-screen { max-width: 64rem; }
.rules-screen .rules, .card-screen .unit-card { background: var(--surface); border: 1px solid var(--frame); border-radius: 5px; }

/* Radio lights. */
.radio-light { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.35); }
.radio-light.r-up { background: var(--ok); }
.radio-light.r-down { background: var(--danger); }
.ctr-radio { stroke: #1b1611; stroke-width: 0.35; }
.ctr-radio.r-up { fill: #3fa43a; }
.ctr-radio.r-down { fill: #d23a2a; }
.no-contact { color: var(--danger); }
.radio-cell { white-space: nowrap; }
.radio-set { display: inline-flex; margin-left: 0.4rem; }

.screen-tab.tool.active { background: var(--screen-bg); color: var(--text); border-color: var(--screen-bg); font-weight: 600; }

/* ---- Order lightbox ---- */
.order-dialog { border: 1px solid var(--frame); border-radius: 3px; padding: 0; width: min(34rem, calc(100vw - 24px)); max-height: calc(100vh - 3rem);
  background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.order-dialog::backdrop { background: rgba(12, 10, 6, 0.55); }
.order-dialog .od-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.9rem;
  background: var(--titlebar); color: var(--titlebar-text); position: sticky; top: 0; z-index: 1; }
.order-dialog .od-head h2 { margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.order-dialog .od-head .secondary { color: var(--titlebar-text); border-color: color-mix(in srgb, var(--titlebar-text) 40%, transparent); }
.order-dialog form { padding: 0.9rem; overflow-y: auto; }
.order-dialog #of-dest-row { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 0.25rem 0.6rem; }
.order-dialog #of-dest-row .dest-hint { grid-column: 1 / -1; }
.pick-bar { position: fixed; left: 50%; bottom: 3rem; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  max-width: calc(100vw - 24px); padding: 0.55rem 0.8rem; border-radius: 3px; background: var(--chrome); color: var(--chrome-text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.9rem; }
.pick-bar .secondary { color: var(--chrome-text); border-color: var(--chrome-muted); }

.review.ok { color: var(--ok); }
.review.back { color: var(--danger); }
.review-form { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }

.standing-bar { background: var(--surface-2); border: 1px solid var(--border); padding: .35rem .5rem; justify-content: space-between; margin-bottom: .5rem; }
.standing-note { color: var(--muted); font-style: italic; }

/* ---- Replays ---- */
.cols-single { max-width: 64rem; }
.replay-link { font-size: .85em; margin-left: .25rem; white-space: nowrap; }
.replay-link::before { content: "▶ "; font-size: .8em; }
.order-dialog.replay-dialog { width: min(980px, calc(100vw - 24px)); }
.replay-body { display: grid; gap: .75rem; padding: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .replay-body { grid-template-columns: minmax(0, 1fr) 17rem; } }
.replay-board { display: block; width: 100%; height: auto; max-height: 62vh; aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--border); }
.replay-side { display: grid; gap: .6rem; align-content: start; }
.replay-caption { margin: 0; font-weight: 600; min-height: 2.6em; }
.replay-result { margin: 0; font-size: .9rem; }
.replay-trail { fill: none; stroke-width: 1.6; stroke-dasharray: 3 2; stroke-linecap: round; opacity: .75; }
.replay-trail.friend { stroke: var(--marines); }
.replay-trail.enemy { stroke: var(--infected); }
.replay-hidden { opacity: 0; }
.replay-units .counter { transition: opacity .4s; }
.replay-lost { opacity: .25; }
.replay-lost .ctr { stroke: #a8322a; stroke-width: 1.2; }
.replay-burst { fill: none; stroke: #c4513d; stroke-width: 1.6; stroke-dasharray: 2.5 1.5; animation: burst 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes burst { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.25); } }
.replay-loss { font: 800 7px var(--counter-font, sans-serif); fill: #a8322a; }
.dice-tray { display: grid; gap: .5rem; }
.tray-side { display: grid; gap: .25rem; }
.tray-name { font-size: .85rem; }
.tray-dice { display: flex; flex-wrap: wrap; gap: .25rem; }
.tray-hits { font-size: .8rem; color: var(--muted); }
.die { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--text); border-radius: .25rem;
  background: var(--surface); font: 700 .9rem/1 ui-monospace, monospace; }
.die.rolling { color: var(--muted); }
.die.hit { background: var(--ok); color: var(--surface); border-color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .replay-burst { animation: none; } .replay-units .counter { transition: none; } }

/* ---- Messages ---- */
@media (min-width: 960px) { .cols-messages { grid-template-columns: 18rem minmax(0, 1fr); max-width: 72rem; } }
.channel-list { display: grid; gap: 2px; margin: 0 0 .75rem; }
.channel { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: 4px;
  color: var(--text); text-decoration: none; border: 1px solid transparent; }
.channel:hover { background: var(--surface-2); }
.channel.active { background: var(--surface-2); border-color: var(--border); font-weight: 600; }
.thread { display: grid; gap: .6rem; max-height: min(60vh, 40rem); overflow-y: auto; margin: 0 0 .75rem; padding: .25rem .25rem .25rem 0; }
.msg { border-left: 3px solid var(--border); padding: .3rem .6rem; background: var(--surface); }
.msg.mine { border-left-color: var(--accent); }
.msg.role-referee { border-left-color: var(--civilians); }
.msg-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .15rem; }
.new-line { display: flex; align-items: center; gap: .5rem; color: var(--danger); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.new-line::after { content: ""; flex: 1; border-top: 1px solid var(--danger); }

/* Off the net: other players see the unit where it last reported from. */
.counter.stale { opacity: 0.6; }
.counter.stale .ctr { stroke-dasharray: 1.5 1; stroke-width: 0.8; }
/* Seen only by the viewer's own unit off the net. */
.counter.local .ctr { stroke: #c4513d; stroke-dasharray: 0.8 0.8; stroke-width: 0.9; }

.correct-turn { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.correct-turn summary { cursor: pointer; color: var(--muted); }
.correction { border-left: 3px solid var(--civilians); padding-left: .5rem; }
.notify-panel .row { margin: .25rem 0 .5rem; }

/* ---- Assistant ---- */
.run-list { display: grid; gap: .2rem; margin: 0 0 .5rem; }
.run-failed { color: var(--danger); }
.busy::after { content: " ⏳"; }
.inline-form { display: inline; }
.issue { border: 1px solid var(--border); border-left-width: 4px; padding: .45rem .6rem; margin: .5rem 0; background: var(--surface); }
.issue.sev-blocking { border-left-color: var(--danger); }
.issue.sev-judgment { border-left-color: var(--civilians); }
.issue.sev-info { border-left-color: var(--accent); }
.issue.closed { opacity: .6; }
.issue p { margin: .25rem 0; }
.issue-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.issue-form { display: grid; gap: .35rem; }
.tag-sev-blocking { background: var(--danger); color: #fff; }
.tag-sev-judgment { background: var(--civilians); color: #fff; }
.narrative { border-left: 3px solid var(--accent); padding: .1rem .7rem; margin: .4rem 0 .6rem; font-style: italic; }
.narrative p { margin: .3rem 0; }
.narrative .muted { font-style: normal; }
.narrative-desk { margin: .4rem 0 .6rem; padding: .5rem; background: var(--surface-2); border: 1px solid var(--border); }
.narrative-desk textarea { width: 100%; font-weight: normal; margin-top: .3rem; }

/* ---- The simple game: orders, the desk, facts, cards ---- */
.order-text { margin: .35rem 0; padding: .4rem .7rem; border-left: 3px solid var(--border); background: var(--surface-2);
  white-space: pre-wrap; overflow-wrap: anywhere; font-style: italic; }
.unit-status { color: var(--danger); font-style: italic; }
.num-s { width: 4.5rem; }
.mark-row { display: flex; flex-wrap: wrap; align-items: end; gap: .25rem .6rem; }
.order-mark .pin { fill: #f4efe2; stroke: var(--road-ink); stroke-width: .9; }
.order-mark .pin-dot { fill: var(--road-ink); }
.order-mark.mine .pin { fill: #f2c94c; stroke: #6b4b00; }
.order-mark.editing .pin { fill: #e0a100; stroke: #3d2a00; stroke-width: 1.1; }
.order-mark.s-draft .pin { stroke-dasharray: 1.4 .9; }

.desk-head { display: grid; gap: .35rem; margin-bottom: .5rem; }
.desk-item { border: 1px solid var(--border); border-left: 4px solid var(--marines); padding: .6rem .8rem; margin: .8rem 0; background: var(--surface); }
.item-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.item-head h3 { margin: 0; font-size: 1.05rem; }
.card-peek p { margin: .2rem 0; }
.contest { border: 1px dashed var(--border); padding: .4rem .6rem; margin: .45rem 0; background: var(--surface-2); }
.contest.rolled { border-style: solid; }
.contest.secret { border-color: var(--civilians); }
.contest p { margin: .2rem 0; }
.contest-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.contest-result { font-family: ui-monospace, monospace; font-size: .8rem; }
.tag-win-a { background: var(--ok); color: #fff; }
.tag-win-b { background: var(--danger); color: #fff; }
.tag-win-none, .tag-win-tie { background: var(--civilians); color: #fff; }
.table-dice summary { cursor: pointer; }
.add-roll { margin: .45rem 0; }
.add-roll > summary { cursor: pointer; font-weight: 600; }
.roll-form { padding: .5rem; border: 1px solid var(--border); background: var(--surface-2); margin-top: .35rem; }
.side-fields { border: 0; padding: 0; margin: 0; }
.side-fields legend { font-size: .8rem; font-weight: 600; padding: 0; }
.outcome-form { margin-top: .5rem; }
.outcome-form textarea, .stack textarea { width: 100%; font-weight: normal; }
.ai-draft { border-left: 3px solid var(--accent); padding: .2rem .6rem; margin: .4rem 0; }
.unit-quick { margin-top: .4rem; }
.unit-quick summary { cursor: pointer; color: var(--muted); }
.desk-extra { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.grow { flex: 1; }

.entry { border-top: 1px solid var(--border); padding: .45rem 0; }
.entry.mine .entry-h::after { content: " (yours)"; color: var(--muted); font-weight: normal; font-size: .8rem; }
.entry-h { margin: 0 0 .2rem; font-size: .95rem; }
.entry-text { margin: .25rem 0; white-space: pre-wrap; }
.rolls { margin: .2rem 0 0; color: var(--muted); }
.rolls .secret { color: var(--civilians); }

.fact-list { margin-top: .6rem; }
.fact { border-left: 3px solid var(--border); padding: .3rem .6rem; }
.fact-accepted { border-left-color: var(--ok); }
.fact-rejected { opacity: .65; }
.fact-reply { font-style: italic; }
.fact-decide { margin-top: .3rem; }
.tag-fact-accepted { background: var(--ok); color: #fff; }
.tag-fact-proposed { background: var(--civilians); color: #fff; }

.pre { white-space: pre-wrap; }
.card-edit { border-top: 2px solid var(--border); margin-top: 1rem; padding-top: .5rem; }
.template-card { border: 1px solid var(--border); padding: .4rem .7rem; margin: .5rem 0; }
.template-card h3 { margin: 0; }
.lead { font-size: 1.05rem; }
.rules-list dt { font-weight: 700; margin-top: .4rem; }
.rules-list dd { margin: 0 0 0 1rem; }
.fact-list, .fact { min-width: 0; }
.fact div { white-space: normal; overflow-wrap: anywhere; }
.roll-totals { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: .3rem 0; }
.roll-side { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.roll-name { font-weight: 600; }
.roll-total { font: 800 1.5rem/1 ui-monospace, monospace; padding: .1rem .45rem; border: 2px solid var(--text); border-radius: .3rem; background: var(--surface); }
.roll-vs { color: var(--muted); font-style: italic; }
.bonus-line { margin: .4rem 0; }

.intent-row { display: grid; gap: .25rem; }
.intent-row label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; }
.intent-row label > * { width: auto; }
.ask-player { margin-top: .4rem; }
.ask-player summary { cursor: pointer; color: var(--accent); }

/* ---- The board: free placement over a drawn map or an image ---- */
.grid-lines { fill: none; stroke: #2b2a24; stroke-opacity: .32; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.bg-hex .grid-lines { stroke-opacity: .22; }
#map.no-grid .grid-lines, #map.no-grid .hexnums { display: none; }
.board-image { image-rendering: auto; }
.scalebar .sb-back { fill: rgb(255 255 255 / .82); stroke: #2b2a24; stroke-opacity: .4; vector-effect: non-scaling-stroke; }
.scalebar .sb-bar { stroke: #1c1b17; stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.scalebar .sb-text { font-family: var(--counter-font); font-weight: 800; text-anchor: middle; fill: #1c1b17; }
.feature { cursor: pointer; }
.feature .fdot { fill: var(--ink); stroke: var(--paper); stroke-width: .6; }
.marker { cursor: pointer; }
.as-referee .marker, .setup-screen .marker, .setup-screen .feature { cursor: grab; }
.marker.lifted { opacity: .85; filter: drop-shadow(1px 3px 2px rgb(0 0 0 / .45)); cursor: grabbing; }
.ctr-name { font: 700 3.6px var(--counter-font); text-anchor: middle; fill: var(--ink); stroke: var(--paper);
  stroke-width: 1.4px; paint-order: stroke; pointer-events: none; }
#map.no-labels .ctr-name { display: none; }
#map.picking { cursor: crosshair; }
.ruler { stroke: #0b3d91; stroke-width: 2.5; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.ruler-end { fill: #fff; stroke: #0b3d91; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.ruler-label { fill: #0b3d91; pointer-events: none; }
.ruler-text { font-family: var(--counter-font); font-weight: 800; text-anchor: middle; fill: #fff; pointer-events: none; }
#map.measuring, #map.measuring .marker, #map.measuring .feature { cursor: crosshair; }
.ruler-btn[aria-pressed="true"] { background: #0b3d91; border-color: #0b3d91; color: #fff !important; }
.proposed { vector-effect: non-scaling-stroke; }
.map-wrap { position: relative; }
.map-hint { position: absolute; left: .5rem; top: .5rem; margin: 0; padding: .2rem .5rem; border-radius: 4px;
  background: rgb(0 0 0 / .7); color: #fff; font-size: .85rem; pointer-events: none; }
.map-hint[hidden] { display: none; }
.scale-line { margin: 0; font-weight: 700; font-size: .9rem; }
.panel-head { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }

/* One table: the board on the left, everything you need beside it. */
.table-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.board-col, .side-col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .table-layout { grid-template-columns: minmax(0, 1fr) 26rem; }
}
@media (min-width: 1000px) and (min-height: 820px) {
  /* The map stays in view while the side column scrolls; it's kept short
     enough to fit, so nothing in it ends up out of reach. */
  .board-col { position: sticky; top: 6.5rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; }
  .board-col #map { max-height: calc(100vh - 20rem); }
}
.selected-panel { padding-top: .6rem !important; }
.selected-panel .inspector h3 { margin: 0 0 .2rem; font-size: 1rem; }
.situation .sit-turn { margin: .3rem 0; font-size: 1rem; }
.situation .entry-h { font-size: .95rem; margin: .6rem 0 .1rem; }
.scale-note { color: var(--muted); margin: 0 0 .3rem; }
.briefing-again, .history { margin-top: .6rem; }
.brief { border-left: 3px solid #a87b00; background: rgb(242 201 76 / .14); padding: .3rem .7rem; margin: .5rem 0; }
.brief summary { font-weight: 700; cursor: pointer; }
.brief h2 { font-size: 1rem; margin: .2rem 0; }
.char { border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .5rem; }
.char:first-of-type { border-top: 0; margin-top: 0; }
.char-head { display: flex; gap: .7rem; align-items: center; }
.char-head h3 { margin: 0; font-size: 1.1rem; }
.char-head p { margin: 0; }
.char-head .card-counter { width: 2.6rem; height: 2.6rem; flex: none; }
.char-facts li { margin: .15rem 0; }
.order-box { border: 2px solid var(--accent) !important; }
.order-box textarea { width: 100%; }
.channel-pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.channel-pills .pill { padding: .15rem .55rem; border: 1px solid var(--border); border-radius: 2px; text-decoration: none; font-size: .85rem; }
.channel-pills .pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.talk .thread { max-height: 22rem; overflow-y: auto; }
.you h3 { font-size: .95rem; margin: .6rem 0 .2rem; }
.you .panel { border: 0 !important; padding: 0 !important; }
.board-settings .num-s { width: 5.5rem; }
.upload-form { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--border); }
/* In the Table's side column the turn steps are a compact strip. */
.side-col .turn-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.side-col .turn-steps li { padding: .35rem .45rem; }
.side-col .turn-steps li span { display: none; }
.side-col .turn-steps li strong { font-size: .85rem; }
.side-col .step-action { flex-wrap: wrap; }

/* The referee's selection of several counters. */
.marker.picked .ctr { stroke: #e0a100; stroke-width: 1.6; }
.marker.picked { filter: drop-shadow(0 0 1.6px #f2c94c) drop-shadow(0 0 1.6px #f2c94c); }
.select-box { fill: rgb(242 201 76 / .15); stroke: #e0a100; stroke-width: 1.5; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.multi-btn[aria-pressed="true"] { background: #a87b00; border-color: #a87b00; color: #fff !important; }

/* Folding sections away. The button sits at the right of the header bar. */
.fold-btn { float: right; margin: -.15rem -.35rem 0 .5rem; width: 1.7rem; height: 1.7rem; min-height: 0; padding: 0;
  border: 1px solid color-mix(in srgb, var(--titlebar-text) 40%, transparent); border-radius: 4px; background: transparent;
  color: var(--titlebar-text); font-size: .9rem; line-height: 1; cursor: pointer; }
.fold-btn::before { content: "−"; }
.fold-btn[aria-expanded="false"]::before { content: "+"; }
.fold-btn:hover { background: color-mix(in srgb, var(--titlebar-text) 15%, transparent); }
.panel-head > .fold-btn { float: none; margin: 0 0 0 .25rem; order: 99; }
.screen .panel.is-collapsed { padding-bottom: 0; }
.screen .panel.is-collapsed > :not(h2):not(.panel-head):not(.desk-head),
.screen .panel.is-collapsed > .desk-head > :not(h2),
.screen .panel.is-collapsed > .panel-head ~ * { display: none !important; }
.screen .panel.is-collapsed > h2:first-child, .screen .panel.is-collapsed > .panel-head:first-child { margin-bottom: 0; }

/* Equal halves: the side column is as readable as the map. */
@media (min-width: 1000px) {
  .table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) { .setup-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* The referee's check-in list and move notes. */
.checkin-h { margin: .4rem 0 .2rem; font-size: .95rem; }
.checkins .ci-tag { font-weight: 700; }
.checkin.ci-in .ci-tag { color: var(--ok); }
.checkin.ci-draft .ci-tag { color: var(--civilians); }
.checkin.ci-returned .ci-tag, .checkin.ci-none .ci-tag { color: var(--danger); }
.moved { color: var(--accent); font-style: italic; }
.moves-h { margin: .6rem 0 .2rem; font-size: .9rem; }

.formation-tether { stroke: #655b48; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.formation-pip { fill: #302f26; stroke: #302f26; stroke-width: .5; }
.formation-pip.detached { fill: #f0e6cd; }
.plan-arrow { stroke: #668cad; stroke-width: 1.5; stroke-dasharray: 5 3; }
.plan-ghost { opacity: .5; }
[data-plan][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text) !important; }
.order-launcher { margin-block: .75rem; }
.order-dialog { width: min(38rem, 94vw); }
.order-dialog .order-box { border: 0; margin: 0; }
.turn-splash { position: fixed; inset: 20% 1rem auto; margin: auto; width: fit-content; max-width: calc(100vw - 2rem); padding: 1.3rem 2rem; background: #252e30; color: #fff4d9; border: 1px solid #b7a67d; box-shadow: 0 8px 40px #0006; font-size: clamp(1.1rem, 4vw, 2rem); text-align: center; z-index: 100; pointer-events: none; animation: turn-arrival 4.2s both; }
@keyframes turn-arrival { 0% { opacity: 0; transform: translateY(-.5rem); } 12%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .turn-splash { animation: none; } }

/* Era-neutral field manual: paper, ink, olive cloth, and brass rules.
   These styles belong to the interface; map symbols and side colors come
   from the scenario and keep their own meaning. */
h1 { font-family: var(--heading-font); font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 700; }
h2, h3, .eyebrow, .screen-tab, .tag { font-family: var(--label-font); }
a { text-underline-offset: .18em; }
button, .button { font-family: var(--label-font); letter-spacing: .015em; }
button:not(:disabled):hover, .button:hover { filter: brightness(1.1); }
button:disabled { cursor: default; opacity: .55; }
input, select, textarea { border-color: var(--control-border); accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.card, .panel, .screen .panel { border-radius: 2px; box-shadow: 0 2px 0 rgb(0 0 0 / .08); }
.topbar, .appbar { border-bottom: 2px solid #9e9168; }
.titlebar { padding-block: .6rem; }
.titlebar .brand, .topbar .brand { font-family: var(--label-font); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.titlebar .campaign { font-family: var(--heading-font); font-size: 1.3rem; letter-spacing: .01em; }
.titlebar .chip { border-color: #7f8569; }
.screen-tab { min-height: 40px; letter-spacing: .04em; }
.screen-tab.active { box-shadow: inset 0 3px #9e9168; }
.next { border: 1px solid var(--frame); border-left: 4px solid var(--accent); border-radius: 2px; }
.next strong { font-family: var(--label-font); text-transform: uppercase; letter-spacing: .06em; font-size: .8em; }
.screen .panel > h2:first-child,
.screen .panel > .panel-head:first-child,
.screen .panel > summary:first-child,
.screen .desk-head > h2:first-child { border-bottom: 1px solid var(--frame); padding-block: .55rem; }
.screen .map-panel > .panel-head:first-child h2 { font-family: var(--heading-font); font-size: 1.3rem; letter-spacing: .035em; }
.scale-line { font-family: var(--label-font); font-size: .78rem; font-weight: 500; text-transform: none; letter-spacing: .02em; }
.map-tools { font-family: var(--label-font); font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.screen .panel > .panel-head:first-child .secondary { border-color: var(--control-border); min-height: 36px; }
.screen .panel > .panel-head:first-child .icon { width: 36px; }
.fold-btn { border-radius: 2px; border-color: currentColor; opacity: .85; }
.brief { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.channel-pills .pill { border-radius: 2px; }
.channel-pills .pill.active { color: var(--accent-text); }
.tag { border: 1px solid var(--border); border-radius: 2px; }
.tag-hidden { border-style: dashed; border-color: currentColor; }
.order-text, .entry-text, .briefing p, .brief p { line-height: 1.65; }
.order-launcher { justify-content: space-between; border-width: 1px 1px 3px; }
.order-launcher::after { content: "↗"; margin-left: .75rem; font-size: 1.1em; }
.card-dialog { background: var(--surface); color: var(--text); border: 1px solid var(--frame); padding-top: 3.5rem; max-height: calc(100dvh - 2rem); box-shadow: 0 16px 48px rgb(0 0 0 / .35); }
.card-dialog::backdrop { background: rgb(16 21 13 / .7); }
.card-dialog #unit-card > h1 { padding: 0 1rem .75rem; margin: 0; border-bottom: 2px solid var(--accent); }
.card-dialog .unit-card { max-height: none; overflow: visible; border: 0; border-bottom: 1px solid var(--frame); border-radius: 0; box-shadow: none; }
.card-dialog .card-close { color: var(--accent); background: var(--surface); }
.order-dialog .order-box { border: 0 !important; box-shadow: none; }
.order-dialog h2 { margin-left: 1rem; font-family: var(--heading-font); font-size: 1.35rem; }
.statusbar { border-top: 2px solid #9e9168; font-family: var(--label-font); letter-spacing: .02em; }
.sb-live.on, .sb-cell.good { color: #c0cba6; }
.sb-live.off, .sb-cell.warn { color: #e1c88a; }
.turn-splash { background: var(--chrome); color: var(--chrome-text); border: 1px solid #9e9168; border-block-width: 3px; font-family: var(--heading-font); }
@media (max-width: 700px) {
  .titlebar .campaign { font-size: 1.1rem; }
  .titlebar .spacer { display: none; }
  .card-dialog { max-height: calc(100dvh - 1rem); }
}

/* A single approved illustration accompanies each situation brief. */
.vignette { margin-block: .85rem; min-width: 0; }
.vignette-figure { margin: 0 0 .8rem; }
.vignette-figure img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: contain; background: var(--bg); border: 1px solid var(--border); }
.vignette-figure figcaption { margin-top: .45rem; font-size: .85rem; }
.vignette-desk { border-block-start: 1px solid var(--border); padding-top: .6rem; }
.vignette-desk summary { cursor: pointer; font-weight: 600; }
.vignette-form { margin-top: .85rem; }
.vignette-form textarea { min-height: 7rem; }

.objectives { margin-block: 1rem; padding: .85rem 1rem; border-inline-start: 3px solid var(--accent); background: var(--bg); }
.objectives h2 { margin-top: 0; font-size: 1rem; }
.objectives ol { margin-bottom: 0; padding-left: 1.4rem; }
.objectives li + li { margin-top: .4rem; }

/* Destruction uses shape and text as well as color, at every map zoom. */
.counter.destroyed { --face: #77736a; --counter-ink: #e9e4d9; }
.counter.destroyed .ctr { stroke: #322f2c; stroke-width: 1; stroke-dasharray: 2 1; }
.counter.destroyed > use, .counter.destroyed .ctr-id, .counter.destroyed .ctr-f { opacity: .35; }
.destroyed-cross { fill: none; stroke: #241b19; stroke-width: 2.1; stroke-linecap: square; paint-order: stroke; }
.destroyed-band { fill: #332723; }
.counter text.destroyed-label { fill: #fff4dc; font-size: 3px; font-weight: 900; letter-spacing: .15px; }
.formation-pip.destroyed { fill: none; stroke: #8d2924; }
.pip-loss { fill: none; stroke: #8d2924; stroke-width: .7; }
.destroyed-status { font-weight: 800; color: var(--danger, #a43830); }

.report-details { margin-block: .8rem; border-block: 1px solid var(--border); padding-block: .65rem; }
.report-details > summary { font-weight: 600; }
.private-update { border-inline-start: 3px solid var(--accent); padding-inline-start: .75rem; }