/* Clash Front MVP client — dark war-room theme (docs/map-engine/01 v0). */
:root {
  --bg: #0a0e13;
  --panel: #11161d;
  --panel-2: #171e27;
  --line: #232c38;
  --ink: #cfd8e3;
  --ink-dim: #7d8a99;
  --ink-faint: #4d5a68;
  --gold: #d9a441;
  --fire: #e2603f;
  --ok: #58b06b;
  --bad: #d9534f;
  --accent: #4f8fe8;
  --radius: 8px;
  --font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
  --mono: 12px/1.4 ui-monospace, "Cascadia Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* keep hidden overlays hidden despite display:flex rules */
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: var(--font); overflow: hidden; }
button { font: inherit; cursor: pointer; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--ink); padding: 5px 10px; }
button:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: #23405f; border-color: #35608c; }
button.danger  { background: #4a2320; border-color: #7a3a33; }

#app { display: flex; height: 100vh; }

/* ── home rail ── */
#rail { width: 264px; min-width: 264px; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 5; }
#rail-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); }
#rail-title { font-weight: 700; letter-spacing: 2px; font-size: 13px; color: var(--gold); }
#rail-player { display: flex; align-items: center; gap: 9px; padding: 9px 12px 8px;
  border-bottom: 1px solid var(--line); background: rgba(23, 29, 38, 0.55); }
#rail-player .avatar { --av: 30px; }
#rail-player span { font-size: 13px; font-weight: 600; color: #e8eef6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rail-player #btn-switch { margin-left: auto; background: none; border: 1px solid #24304a;
  border-radius: 6px; color: #8fa0bd; font-size: 12px; padding: 2px 7px; cursor: pointer; }
#rail-player #btn-switch:hover { color: #e8b93c; border-color: #e8b93c; }
#rail-head .head-btn:first-of-type { margin-left: auto; }
.head-btn { color: #8fa0bd; text-decoration: none; font-size: 13px; border: 1px solid #24304a;
  border-radius: 6px; padding: 0 7px; line-height: 20px; flex: none; }
.head-btn:hover { color: #fff; border-color: var(--accent); }
.pip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pip.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.pip.connecting { background: var(--gold); }
.pip.down { background: var(--bad); box-shadow: 0 0 6px var(--bad); }
#rail-body { overflow-y: auto; flex: 1; padding-bottom: 12px; }
.rail-sec { padding: 8px 12px 2px; }
.rail-sec h3 { margin: 0 0 4px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; }
.rail-ct { font: var(--mono); font-size: 17px; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.rail-ct #btn-buyct { font-size: 10.5px; padding: 1px 7px; color: var(--gold); border-color: #4a3a1c; background: none; }
.rail-ct #btn-buyct:hover { border-color: var(--gold); }
.rail-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin: 1px -6px;
  border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.rail-row:hover { background: var(--panel-2); }
.rail-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rail-row .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row .meta { color: var(--ink-dim); font: var(--mono); font-size: 11px; flex: none; }
.rail-row.alert { color: #f0c9a0; }
.rail-row.alert .meta { color: var(--fire); }
.rail-empty { color: var(--ink-faint); font-size: 12px; padding: 2px 0 4px; }
.rail-sub { padding: 0 6px 3px 20px; margin: -2px -6px 1px; font: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.rail-sub.low { color: var(--fire); }
.feed-row { padding: 3px 0; font-size: 12px; color: var(--ink-dim); cursor: pointer;
  border-bottom: 1px dotted #1b232d; }
.feed-row:hover { color: var(--ink); }
.feed-row .t-battle { color: var(--fire); }
.feed-row .t-good { color: var(--ok); }
.feed-row .t-gold { color: var(--gold); }
.feed-row .t-tie { color: #9aa4ae; }

/* ── map ── */
#map-wrap { flex: 1; position: relative; overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; display: block; }
#map.dragging { cursor: grabbing; }
#map.targeting { cursor: crosshair; }
/* Tile search — jump to a parcel by its token id (top-centre of the map). */
#tile-search { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 16; display: flex; gap: 5px; align-items: center;
  background: rgba(17, 22, 29, 0.92); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 4px 4px 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
#tile-search::before { content: "⌖"; color: var(--ink-dim); margin-right: 4px; font-size: 14px; }
#tile-search input { width: 216px; background: transparent; border: 0; outline: none;
  color: var(--ink); font: var(--mono); }
#tile-search input::placeholder { color: var(--ink-faint); }
#tile-search input.nf { color: var(--bad); }
#tile-search button { border: 0; border-radius: 999px; padding: 4px 13px; cursor: pointer;
  background: var(--gold); color: #1a1206; font-weight: 700; font-size: 12px; }
#tile-search button:hover { filter: brightness(1.08); }
/* Atmospheric vignette — cinematic war-room framing over the map viewport.
   Sits above the map canvas (z-index 1) yet below every HUD overlay (z-index >= 12),
   with pointer-events:none, so it only deepens the map's edges and never touches
   interaction, layout, banners, toasts, or the battle overlay. Purely presentational:
   a radial edge falloff (center 60% fully clear) plus a faint top/bottom depth wash. */
#map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 115% at 50% 44%, transparent 60%, rgba(6, 9, 13, 0.16) 84%, rgba(3, 5, 8, 0.44) 100%),
    linear-gradient(to bottom, rgba(9, 13, 19, 0.12) 0, transparent 13%, transparent 87%, rgba(3, 5, 8, 0.20) 100%);
}
/* Drifting cloud shadows — a slow GPU-composited layer that sweeps soft shade over the
   land, giving the map cinematic life + a parallax feel (the shadows move independently of
   the terrain). pointer-events:none, z-index 1 (below every HUD overlay), inset −25% so the
   drift never bares an edge. One transform animation, near-zero cost; no JS, no mechanics. */
#map-wrap::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(40% 32% at 18% 26%, rgba(0, 0, 0, 0.11), transparent 60%),
    radial-gradient(32% 27% at 60% 18%, rgba(0, 0, 0, 0.08), transparent 62%),
    radial-gradient(46% 36% at 82% 64%, rgba(0, 0, 0, 0.10), transparent 60%),
    radial-gradient(30% 26% at 38% 80%, rgba(0, 0, 0, 0.07), transparent 62%);
  background-repeat: no-repeat;
  animation: cf-clouds 150s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cf-clouds {
  from { transform: translate3d(-5%, -3%, 0) scale(1.02); }
  to   { transform: translate3d(5%, 3%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { #map-wrap::before { animation: none; } }

#tooltip { position: absolute; pointer-events: none; background: rgba(10, 14, 19, 0.92);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 12px;
  max-width: 230px; z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
#tooltip .tt-name { font-weight: 600; color: #fff; }
#tooltip .tt-sub { color: var(--ink-dim); font-size: 11.5px; }

#select-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: #1c2b3d; border: 1px solid var(--accent); border-radius: 20px; padding: 5px 16px;
  font-size: 12.5px; z-index: 15; }
#select-banner b { color: #9cc4f5; }
#select-banner button { margin-left: 10px; padding: 1px 8px; font-size: 11px; }

#march-popover { position: absolute; z-index: 25; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); font-size: 12.5px; }
#march-popover h4 { margin: 0 0 6px; font-size: 13px; color: #fff; }
#march-popover .row { display: flex; justify-content: space-between; padding: 2px 0;
  color: var(--ink-dim); }
#march-popover .row b { color: var(--ink); }
#march-popover .vs { margin: 6px 0; padding: 6px 8px; background: var(--panel-2);
  border-radius: 6px; }
#march-popover .vs .bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  margin-top: 4px; background: #333; }
#march-popover .btns { display: flex; gap: 8px; margin-top: 9px; }
#march-popover .btns button { flex: 1; }
#march-popover .warn { color: var(--gold); font-size: 11.5px; margin-top: 5px; }
/* COMMAND-vs-AUTO (docs/04 §3a): gold-accented "March & Command" + slot hint. */
#march-popover .mp-command-hint { font-size: 11px; color: var(--muted, #93a2b5); margin-top: 8px; line-height: 1.5; }
#march-popover .mp-command-hint .cmd { color: var(--gold); }
#march-popover .cmd-slots { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px;
  background: rgba(212,175,55,0.14); color: var(--gold); font-weight: 600; }
#march-popover .cmd-slots.full { background: rgba(168,58,48,0.18); color: #e2887e; }
#march-popover .cmd-full-note { color: #e2887e; }
#march-popover button.command { background: linear-gradient(180deg,#7a5f16,#5c4711); border-color: var(--gold);
  color: #ffeab0; font-weight: 600; }
#march-popover button.command:hover:not(:disabled) { background: linear-gradient(180deg,#8f6f1a,#6b5313); }

/* ── toasts ── */
#toasts { position: absolute; top: 12px; right: 14px; z-index: 30; display: flex;
  flex-direction: column; gap: 8px; width: 290px; pointer-events: none; }
.toast { pointer-events: auto; background: rgba(17, 22, 29, 0.95); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 12px; font-size: 12.5px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.55); animation: toast-in 0.25s ease-out; }
.toast.battle { border-left-color: var(--fire); background: rgba(38, 18, 12, 0.95); }
.toast.gold { border-left-color: var(--gold); }
.toast.good { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }
.toast.tie { border-left-color: #9aa4ae; background: rgba(26, 29, 33, 0.95); }
.toast b { color: #fff; }
.toast .sub { color: var(--ink-dim); font-size: 11.5px; margin-top: 2px; }
.toast.fading { opacity: 0; transition: opacity 0.6s; }
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } }

/* ── parcel card ── */
#card { position: absolute; right: 14px; bottom: 14px; width: 264px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; z-index: 12;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55); }
#card h3 { margin: 0 0 2px; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 7px; }
#card h3 .dot { width: 10px; height: 10px; border-radius: 3px; }
#card .owner { color: var(--ink-dim); font-size: 12px; margin-bottom: 8px; }
#card .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12px;
  color: var(--ink-dim); margin-bottom: 8px; }
#card .stats b { color: var(--ink); font-weight: 600; }
#card .garr { background: var(--panel-2); border-radius: 6px; padding: 6px 8px; font-size: 12px;
  margin-bottom: 8px; }
#card .garr .m { color: var(--fire); }
#card .actions { display: flex; flex-direction: column; gap: 6px; }
#card .actions button { text-align: left; display: flex; justify-content: space-between; }
#card .actions button .cost { color: var(--gold); font: var(--mono); }
#card .army-box { background: var(--panel-2); border-radius: 6px; padding: 7px 8px;
  font-size: 12px; margin-bottom: 8px; }
#card .army-box .ab-head { display: flex; justify-content: space-between; margin-bottom: 2px; }
#card .army-box .ab-head span { color: var(--ink-dim); font: var(--mono); font-size: 11px; }
#card .army-box .ab-prov { color: var(--ink-dim); font: var(--mono); font-size: 11px;
  margin-bottom: 5px; }
#card .army-box > button { width: 100%; font-size: 12px; padding: 4px 8px; }
.prov-form { border-top: 1px dotted var(--line); padding-top: 6px; }
.prov-form .pf-row { display: flex; align-items: center; gap: 6px; padding: 2px 0;
  color: var(--ink-dim); }
.prov-form .pf-row span { flex: 1; text-transform: capitalize; }
.prov-form .pf-row b { min-width: 42px; text-align: center; color: var(--ink);
  font: var(--mono); font-size: 12px; }
.prov-form .pf-row button { padding: 0 8px; font-size: 13px; line-height: 20px; }
.prov-form .pf-quick { display: flex; gap: 5px; margin: 5px 0; }
.prov-form .pf-quick button { flex: 1; font-size: 11px; padding: 3px 2px; }
.prov-form .pf-cost { padding: 3px 0; color: var(--ink-dim); }
.prov-form .pf-cost b { color: var(--gold); font: var(--mono); font-size: 12px; }
.prov-form .pf-cost .why { color: var(--bad); font-size: 11px; }
.prov-form .pf-btns { display: flex; gap: 6px; margin-top: 4px; }
.prov-form .pf-btns button { flex: 1; font-size: 12px; padding: 4px; }
#card .close { position: absolute; top: 6px; right: 9px; border: none; background: none;
  color: var(--ink-faint); font-size: 15px; padding: 2px 5px; }
#card .close:hover { color: #fff; }
#card .hint { color: var(--ink-faint); font-size: 11.5px; margin-top: 6px; }
/* no-army attack warning: loud (gold-bordered), with an inline "go raise" jump button */
#card .warn.no-army { color: var(--gold); font-size: 12px; margin-top: 8px; padding: 7px 9px;
  border: 1px solid rgba(217, 164, 65, .45); border-radius: 6px; background: rgba(217, 164, 65, .08); }
#card .warn.no-army button { display: block; width: 100%; margin-top: 7px; }

/* ── join overlay ── */
#join { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 35%, #141c26, #07090d);
  display: flex; align-items: center; justify-content: center; z-index: 100; }
#join-form { text-align: center; width: 300px; }
#join-form h1 { letter-spacing: 6px; color: var(--gold); font-size: 26px; margin: 0 0 4px;
  text-shadow: 0 0 24px rgba(217, 164, 65, 0.35); }
#join-form .sub { color: var(--ink-dim); margin: 0 0 20px; }
#join-form input { width: 100%; padding: 9px 12px; font: inherit; background: var(--panel);
  color: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 10px;
  text-align: center; }
#join-form input:focus { outline: none; border-color: var(--accent); }
#join-form button { width: 100%; padding: 9px; background: #23405f; border-color: #35608c;
  font-weight: 600; }
.err { color: var(--bad); font-size: 12px; min-height: 16px; }

/* ── modal ── */
#modal { position: fixed; inset: 0; background: rgba(5, 7, 10, 0.72); z-index: 90;
  display: flex; align-items: center; justify-content: center; }
#modal .box { width: 360px; background: var(--panel); border: 1px solid #3a2c1c;
  border-radius: 10px; padding: 18px 20px; box-shadow: 0 0 60px rgba(226, 96, 63, 0.15); }
#modal h2 { margin: 0 0 4px; font-size: 17px; color: var(--gold); }
#modal .sub { color: var(--ink-dim); font-size: 12.5px; margin: 0 0 14px; }
#modal .opts { display: flex; gap: 10px; }
#modal .opt { flex: 1; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; text-align: left; }
#modal .opt:hover:not(:disabled) { border-color: var(--gold); }
#modal .opt h4 { margin: 0 0 4px; font-size: 13.5px; color: #fff; }
#modal .opt p { margin: 0; font-size: 11.5px; color: var(--ink-dim); }
#modal .opt .why { color: var(--bad); }
#modal .timer { margin-top: 10px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }

/* ── goal-tracker chip (FTUE objective, top-left of the map; above the ftue dim) ── */
#goal-chip { position: absolute; top: 10px; left: 12px; z-index: 96; pointer-events: none;
  background: rgba(17, 22, 29, 0.95); border: 1px solid var(--gold); border-radius: 18px;
  padding: 5px 14px; font-size: 12.5px; color: #f0d9a8; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
#goal-chip .gc-ico { color: var(--gold); margin-right: 6px; }
#goal-chip.gc-done { background: #14301d; border-color: var(--ok); color: #bfe8c9;
  animation: gc-pop 0.3s ease; }
#goal-chip.gc-done .gc-ico { color: var(--ok); }
@keyframes gc-pop { from { transform: scale(1.18); } }

/* ── FTUE spotlight overlay (js/ftue.js) — modal(90) < ftue(95) < join(100) ── */
#ftue { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.ftue-dim { position: absolute; background: rgba(3, 5, 9, 0.62); }
.ftue-ring { position: absolute; border: 2px solid var(--gold); border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18), 0 0 24px rgba(217, 164, 65, 0.35);
  animation: ftue-breathe 2.2s ease-in-out infinite; }
@keyframes ftue-breathe { 50% { box-shadow: 0 0 0 5px rgba(217, 164, 65, 0.3), 0 0 30px rgba(217, 164, 65, 0.5); } }
.ftue-card { position: absolute; pointer-events: auto; width: 282px; background: var(--panel);
  border: 1px solid #4a3a20; border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65); }
.ftue-card h4 { margin: 2px 0 6px; font-size: 14px; color: var(--gold); }
.ftue-card p { margin: 0 0 10px; font-size: 12.5px; color: var(--ink); }
.ftue-card p b { color: #fff; }
.ftue-dots { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.ftue-dots .fd { width: 6px; height: 6px; border-radius: 50%; background: #2b3646; flex: none; }
.ftue-dots .fd.past { background: #5a6b82; }
.ftue-dots .fd.on { background: var(--gold); box-shadow: 0 0 6px rgba(217, 164, 65, 0.6); }
.ftue-n { margin-left: auto; font: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.ftue-btns { display: flex; align-items: center; gap: 8px; }
.ftue-skip { color: var(--ink-faint); font-size: 11.5px; text-decoration: none; }
.ftue-skip:hover { color: var(--ink-dim); text-decoration: underline; }
.ftue-btns .primary { margin-left: auto; padding: 4px 16px; }
.ftue-hint { margin-left: auto; font-size: 11.5px; color: #9cc4f5; }
.ftue-hint a { color: var(--ink-faint); text-decoration: none; margin-left: 7px; }
.ftue-hint a:hover { color: var(--ink-dim); }
/* march step phase A: the army's rail row glows alongside its ringed map marker */
.rail-row.ftue-mark { outline: 1px solid var(--gold); background: rgba(217, 164, 65, 0.1);
  box-shadow: 0 0 8px rgba(217, 164, 65, 0.35); }
/* one-shot contextual tips (js/ftue.js TIPS registry) */
#tip-card { position: fixed; z-index: 60; width: 252px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px;
  padding: 9px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
#tip-card h5 { margin: 0 22px 4px 0; font-size: 13px; color: var(--gold); }
#tip-card p { margin: 0; font-size: 12px; color: var(--ink); }
#tip-card .tclose { position: absolute; top: 4px; right: 6px; border: none; background: none;
  color: var(--ink-faint); font-size: 13px; padding: 2px 5px; }
#tip-card .tclose:hover { color: #fff; }
#tooltip .tt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; vertical-align: 1px; }
#tooltip .tt-dot.friend { background: #4da3ff; }
#tooltip .tt-dot.foe { background: #e0483c; }
/* rail-row flash for idle officers (click resolves to nothing on the map) */
.rail-row.row-flash { animation: row-flash 0.8s ease-out; }
@keyframes row-flash { 0% { background: rgba(217, 164, 65, 0.35); } 100% { background: transparent; } }

/* ── fog of war (F1): ?? markers, fuzzy bands, intel-grade chips ── */
#tooltip .tt-unknown { color: #8d97a5; }
#tooltip .tt-unknown b, .tt-fuzzy { color: #c9d4e2; }
.tt-fuzzy { margin-left: 2px; color: var(--gold); font-weight: 700; }
.est { color: var(--ink-faint); font-size: 11px; }
.ig { font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.ig-acc { color: var(--ok); }
.ig-fuz { color: var(--gold); }
.ig-unk { color: #8d97a5; }
#card .garr.unknown { color: #8d97a5; }
#card .garr.unknown b { color: var(--ink); }

/* ── officer picker (compact select: Auto default + free officers) ── */
.ov-pick { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px;
  color: var(--ink-dim); }
.ov-pick select { flex: 1; font: inherit; font-size: 12px; background: var(--panel-2);
  color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.ov-pick select:focus { outline: none; border-color: var(--accent); }
#modal .ov-pick { margin: 10px 2px 0; }
#modal .leave { margin-top: 8px; text-align: center; }
#modal .leave button { font-size: 12px; padding: 4px 14px; color: var(--ink-dim); }

/* ── develop section (F4) ── */
.dev-sec { border-top: 1px dotted var(--line); margin-top: 9px; padding-top: 7px; }
.dev-sec h4 { margin: 0 0 5px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; }
.dev-track { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.dev-track .dt-mid { flex: 1; min-width: 0; }
.dev-track .dt-name { font-size: 12px; color: var(--ink); white-space: nowrap; }
.dev-track .pips { font: var(--mono); font-size: 8.5px; letter-spacing: 1px; color: var(--gold);
  margin-left: 4px; vertical-align: 1px; }
.dev-track .dt-eff { font-size: 10.5px; color: var(--ink-faint); }
.dev-track > button { flex: none; font: var(--mono); font-size: 11px; padding: 3px 8px;
  color: var(--gold); min-width: 78px; text-align: center; }
.dev-track > button:disabled { color: var(--ink-faint); }

/* ── wild raid alerts (F3) ── */
.toast.raid { border-left-color: #c05a2e; background: rgba(36, 22, 10, 0.95); }
.toast.raid.urgent { border-left-color: var(--bad); background: rgba(46, 14, 12, 0.96);
  animation: toast-in 0.25s ease-out, raid-throb 1.6s ease-in-out infinite; }
@keyframes raid-throb { 50% { box-shadow: 0 0 18px rgba(217, 83, 79, 0.45); } }
#raid-banner { position: absolute; top: 44px; left: 12px; z-index: 96; cursor: pointer;
  background: rgba(46, 14, 12, 0.95); border: 1px solid var(--bad); border-radius: 18px;
  padding: 5px 14px; font-size: 12.5px; color: #f3c1ba; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis;
  animation: raid-throb 1.6s ease-in-out infinite; }
#raid-banner b { color: #fff; }
#raid-banner .rb-ico { margin-right: 6px; }

/* ── FS3: training queues (E2) ── */
.rail-sub.muster { color: #7fb4e8; }
.muster-prog { margin: 2px 0 6px; }
.muster-prog .mp-bar { height: 5px; border-radius: 3px; background: #202a36; overflow: hidden; }
.muster-prog .mp-bar span { display: block; height: 100%; background: linear-gradient(90deg, #35608c, #4f8fe8);
  border-radius: 3px; transition: width 0.5s ease; }
.muster-prog .mp-txt { margin-top: 3px; font: var(--mono); font-size: 11px; color: #7fb4e8; }
.muster-prog .mp-warn { font-size: 10.5px; color: var(--ink-faint); }
#march-popover .warn.muster { color: #7fb4e8; }

/* ── FS3: enrich (E3) ── */
.enrich-pool { background: rgba(217, 164, 65, 0.08); border: 1px solid #3a2c1c; border-radius: 6px;
  padding: 6px 8px; font-size: 12px; margin-bottom: 8px; color: #e8d9b0; }
.enrich-pool b { color: var(--gold); font: var(--mono); font-size: 12px; }
.enrich-pool .ep-sub { color: var(--ink-dim); font-size: 11px; margin-top: 1px; }
.enrich-sec { border-top: 1px dotted var(--line); margin-top: 9px; padding-top: 7px; }
.enrich-sec h4 { margin: 0 0 5px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; }
.enrich-sec > button { width: 100%; font-size: 12px; padding: 4px 8px; }
.enrich-sec .en-row { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--ink-dim); margin-bottom: 5px; }
.enrich-sec .en-row input { width: 70px; font: var(--mono); font-size: 12px; padding: 3px 6px;
  background: var(--panel-2); color: var(--gold); border: 1px solid var(--line); border-radius: 6px; }
.enrich-sec .en-row input:focus { outline: none; border-color: var(--gold); }
.enrich-sec .en-row button { font-size: 11px; padding: 2px 8px; }
.enrich-sec .en-note { font-size: 10.5px; color: var(--ink-faint); margin: 4px 0; }
.enrich-sec .en-note b { color: var(--ink); font: var(--mono); font-size: 10.5px; }
.enrich-sec .en-note.gold { color: #b39967; }
.enrich-sec .en-note.gold b { color: var(--gold); font: inherit; font-weight: 600; }
.enrich-sec .en-note.why { color: var(--bad); }
.enrich-sec .pf-btns { display: flex; gap: 6px; margin-top: 5px; }
.enrich-sec .pf-btns button { flex: 1; font-size: 12px; padding: 4px; }

/* ── FS3: raze (E4) ── */
.dev-track .raze-btn { min-width: 0; padding: 3px 6px; font-size: 11px; border-color: #4a2320;
  opacity: 0.75; }
.dev-track .raze-btn:hover:not(:disabled) { border-color: #7a3a33; background: #2c1512; opacity: 1; }
.raze-confirm { background: rgba(74, 35, 32, 0.35); border: 1px solid #4a2320; border-radius: 6px;
  padding: 6px 8px; margin: 3px 0 5px; font-size: 11.5px; color: #e0b8ae; }
.raze-confirm b { color: #fff; }
.raze-confirm .pf-btns { display: flex; gap: 6px; margin-top: 6px; }
.raze-confirm .pf-btns button { flex: 1; font-size: 12px; padding: 3px; }

/* ── FS3: 💰 economy dashboard ── */
#econ { position: fixed; inset: 0; background: rgba(5, 7, 10, 0.72); z-index: 92;
  display: flex; align-items: center; justify-content: center; }
#econ .eco-box { position: relative; width: 500px; max-height: 84vh; display: flex;
  flex-direction: column; background: var(--panel); border: 1px solid #3a2c1c; border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 0 60px rgba(217, 164, 65, 0.12); }
#econ h2 { margin: 0 0 2px; font-size: 16px; color: var(--gold); }
#econ .sub { color: var(--ink-dim); font-size: 11.5px; margin: 0 0 6px; }
#econ .sub b { color: var(--ink); }
#econ h3 { margin: 12px 0 5px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; }
#econ .eco-scroll { overflow-y: auto; padding-right: 4px; }
#econ .num { font: var(--mono); font-size: 11.5px; }
#econ .dim { color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
#econ .gold { color: var(--gold); }
#econ .eco-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden;
  background: #202a36; margin: 2px 0 7px; }
#econ .eco-bar span { display: block; height: 100%; min-width: 0; }
#econ .eco-row { display: flex; align-items: center; gap: 8px; padding: 2.5px 0; font-size: 12px;
  color: var(--ink-dim); }
#econ .eco-row .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
#econ .eco-row .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); }
#econ .eco-row .num { color: var(--ink); flex: none; }
#econ .eco-row .num.dim { color: var(--ink-faint); min-width: 42px; text-align: right; }
#econ .eco-row .fbar { flex: none; width: 120px; height: 7px; border-radius: 3px;
  background: #202a36; overflow: hidden; }
#econ .eco-row .fbar span { display: block; height: 100%; background: #35608c; border-radius: 3px; }
#econ .eco-row.hot { cursor: pointer; margin: 0 -6px; padding: 3px 6px; border-radius: 5px; }
#econ .eco-row.hot:hover { background: var(--panel-2); }
#econ .eco-row .rank { flex: none; width: 16px; text-align: right; font: var(--mono);
  font-size: 10.5px; color: var(--fire); }
#econ .eco-kinds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
#econ .eco-kinds .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 2px 9px; font-size: 10.5px; color: var(--ink-dim); }
#econ .eco-kinds .chip b { color: var(--ink); }
#econ .eco-empty { color: var(--ink-faint); font-size: 12px; padding: 3px 0; }
#econ .eco-err { color: var(--bad); font-size: 12px; padding: 6px 0; }
#econ .close { position: absolute; top: 8px; right: 10px; border: none; background: none;
  color: var(--ink-faint); font-size: 15px; padding: 2px 5px; }
#econ .close:hover { color: #fff; }

/* ── 📖 tutorial library (F5) ── */
#library { position: fixed; inset: 0; background: rgba(5, 7, 10, 0.72); z-index: 92;
  display: flex; align-items: center; justify-content: center; }
#library .lib-box { position: relative; width: 470px; max-height: 82vh; display: flex;
  flex-direction: column; background: var(--panel); border: 1px solid #3a2c1c;
  border-radius: 10px; padding: 16px 18px; box-shadow: 0 0 60px rgba(217, 164, 65, 0.12); }
#library h2 { margin: 0 0 2px; font-size: 16px; color: var(--gold); }
#library .sub { color: var(--ink-dim); font-size: 12px; margin: 0 0 8px; display: flex;
  align-items: center; gap: 10px; justify-content: space-between; }
#library .lib-all { font-size: 11.5px; padding: 3px 10px; flex: none; }
#library .lib-scroll { overflow-y: auto; padding-right: 4px; }
#library h3 { margin: 10px 0 3px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; }
#library .lib-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px;
  margin: 0 -6px; border-radius: 6px; }
#library .lib-row:hover { background: var(--panel-2); }
#library .lib-badge { flex: none; width: 16px; text-align: center; font-size: 11px; }
#library .lib-badge.seen { color: var(--ink-faint); }
#library .lib-badge.unseen { color: var(--gold); text-shadow: 0 0 6px rgba(217, 164, 65, 0.6); }
#library .lib-mid { flex: 1; min-width: 0; }
#library .lib-title { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
#library .lib-kind { font-size: 9.5px; color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px; vertical-align: 1px; letter-spacing: 0.5px; }
#library .lib-sum { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
#library .lib-row > button { flex: none; font-size: 11px; padding: 2px 9px; }
#library .close { position: absolute; top: 8px; right: 10px; border: none; background: none;
  color: var(--ink-faint); font-size: 15px; padding: 2px 5px; }
#library .close:hover { color: #fff; }

/* ── LIVE wild-battle viewer (docs/04 §7b) — js/battle.js ─────────────────── */
#battle { position: absolute; inset: 10px; z-index: 26; display: flex; flex-direction: column;
  background: rgba(8, 11, 16, 0.96); border: 1px solid #3a2c1c; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65); overflow: hidden; }
#battle .bt-hud { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: rgba(17, 22, 29, 0.9); }
#battle .bt-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
#battle .bt-title b { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battle .bt-vs { color: var(--bad); font-size: 12px; white-space: nowrap; }
#battle .bt-live { color: #ff5a3c; animation: btPulse 1.1s ease-in-out infinite; font-size: 10px; }
#battle .bt-live.done { color: #6c7683; animation: none; }
#battle .bt-live.stale { color: #e0b23c; } /* bridge relay quiet — signal lost */
#battle .bt-exh { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--gold);
  border: 1px solid rgba(255, 215, 106, 0.45); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
@keyframes btPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
#battle .bt-stats { display: flex; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap; }
#battle .bt-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
#battle .bt-stat b { color: #fff; }
#battle .bt-stat em { font-style: normal; color: var(--ink-dim); font-size: 11px; display: block; }
#battle .bt-stat > span { display: inline-flex; flex-direction: column; line-height: 1.15; }
#battle .bt-stat .bad { color: var(--bad); }
#battle .bt-prog { width: 110px; height: 7px; background: rgba(224, 72, 60, 0.25); border-radius: 4px;
  overflow: hidden; display: inline-block; }
#battle .bt-prog span { display: block; height: 100%; background: linear-gradient(90deg, #4da3ff, #ffd76a); }
#battle .bt-btns { display: flex; gap: 8px; }
#battle .bt-btns button { background: #232b36; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
#battle .bt-btns button:hover { border-color: #5a6675; color: #fff; }
#battle .bt-btns .bt-steer.on { background: #3a2c14; border-color: var(--gold); color: var(--gold); }
#battle .bt-stage { position: relative; flex: 1; min-height: 0; }
#battle .bt-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
#battle .bt-foot { padding: 6px 12px; border-top: 1px solid var(--line); font-size: 12px;
  color: var(--ink-dim); background: rgba(17, 22, 29, 0.9); }
#battle .bt-foot b { color: var(--gold); }

/* parcel-card live battle block */
.live-battle { margin: 10px 0; padding: 9px 10px; border: 1px solid #4a2c1a; border-left: 3px solid var(--fire);
  border-radius: 7px; background: rgba(38, 18, 12, 0.55); font-size: 12.5px; }
.live-battle button { display: block; width: 100%; margin-top: 8px; }
/* HERO-MODE doorway (engine battles): gold ⚡ Take the field — owner only */
.live-battle .take-field { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.live-battle .take-field:hover { background: rgba(232, 185, 60, 0.12); border-color: var(--gold); }

/* ── Officer avatars (PO 2026-07-03 "personal touch") ─────────────────────── */
.avatar { position: relative; display: inline-flex; width: var(--av, 18px); height: var(--av, 18px);
  border-radius: 50%; overflow: hidden; flex: none; vertical-align: middle;
  background: linear-gradient(160deg, hsl(var(--avh, 200) 42% 38%), hsl(var(--avh, 200) 48% 22%));
  box-shadow: 0 0 0 1.5px var(--av-ring, #8b93a0), 0 1px 3px rgba(0, 0, 0, 0.5); }
.avatar.av-hero { --av-ring: var(--gold, #d9a441); }
.avatar.av-master { --av-ring: #9aa4b2; }
.avatar i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 700; color: rgba(255, 255, 255, 0.92);
  font-size: calc(var(--av, 18px) * 0.44); letter-spacing: 0.02em; user-select: none; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rail-row .avatar { margin-right: 6px; }
.ab-head .avatar, .owner .avatar { margin-right: 4px; }

/* Command-Mode mini-coach (first steerable battle view) + Hero-Mode promise */
#battle .bt-hud.bc-glow { box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(217, 164, 65, 0.35);
  animation: bcGlow 1.2s ease-in-out infinite; }
@keyframes bcGlow { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(217, 164, 65, 0.9), 0 0 18px rgba(217, 164, 65, 0.35); }
  50% { box-shadow: inset 0 0 0 2px rgba(217, 164, 65, 0.35), 0 0 6px rgba(217, 164, 65, 0.15); } }
#battle .bt-coach { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: 300px; background: var(--panel, #171d26); border: 1px solid var(--gold);
  border-radius: 9px; padding: 10px 12px; z-index: 3;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); }
#battle .bt-coach.top { bottom: auto; top: 12px; }
#battle .bt-coach h5 { margin: 0 0 4px; font-size: 13px; color: var(--gold); }
#battle .bt-coach p { margin: 0; font-size: 12px; color: var(--ink); }
#battle .bt-coach .bc-dots { position: absolute; top: 8px; right: 10px; font-size: 8px; color: #4a5462; letter-spacing: 3px; }
#battle .bt-coach .bc-dots .on { color: var(--gold); }
#battle .bt-coach .bc-btns { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
#battle .bt-coach .bc-btns a { color: var(--ink-dim); font-size: 11.5px; text-decoration: none; }
#battle .bt-coach .bc-btns a:hover { color: #fff; }
#battle .bt-coach .bc-btns button { background: var(--gold); color: #1a1408; border: none;
  border-radius: 6px; padding: 4px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
#battle .bt-coach .bc-hint { color: var(--gold); font-size: 11.5px; animation: bcGlowTxt 1.2s ease-in-out infinite; }
@keyframes bcGlowTxt { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
#battle .bt-btns .bt-hero { position: relative; border-color: #4a3a1c; color: #c9b27a; cursor: default; opacity: 0.85; }
#battle .bt-btns .bt-hero[disabled]:hover { border-color: #4a3a1c; color: #c9b27a; }
#battle .bt-btns .bt-hero .soon { position: absolute; top: -7px; right: -8px; background: var(--gold);
  color: #1a1408; font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em;
  border-radius: 6px; padding: 1px 5px; }
#battle .bt-btns .bt-hero.live { border-color: var(--gold); color: var(--gold); cursor: pointer; opacity: 1; }
#battle .bt-btns .bt-hero.live:hover { background: rgba(232, 185, 60, 0.12); }