/* Forces — its own window (src/forces/forces-window.js): the theatre map
   (force-map.js) and the hangar (force-hangar.js). Glass panels over a dark
   tactical map; the hangar floor is a grid that runs out to the horizon. */

/* ---- the Forces window (src/forces/forces-window.js) ---------------------------------- */

.mg-btn--icon svg { width: 15px; height: 15px; }

.fs-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.fs-body[hidden] { display: none; }
.fs-map, .fs-hangar { position: absolute; inset: 0; }
.fs-map[hidden], .fs-hangar[hidden] { display: none; }
.fs-picto { display: block; width: 100%; height: 100%; }

/* ====================================================================================
   THE THEATRE MAP
   ==================================================================================== */

.fm { color: #dbe8f6; font: 12px "Segoe UI", system-ui, sans-serif; background: #0a0f17; }
.fm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; touch-action: none; }

.fm-top {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 340px);
  pointer-events: none;
}
.fm-top > * { pointer-events: auto; }
.fm-seg { display: inline-flex; padding: 2px; background: rgba(8, 13, 22, 0.88); border: 1px solid rgba(120, 184, 255, 0.24); border-radius: 7px; }
.fm-seg button {
  height: 22px;
  padding: 0 9px;
  color: #9fb3c9;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: 650 11px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.fm-seg button.is-on { color: #eaf4ff; background: rgba(61, 139, 255, 0.35); }
.fm-tog {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  color: #a9bdd4;
  background: rgba(8, 13, 22, 0.88);
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
}
.fm-tog input { position: absolute; opacity: 0; pointer-events: none; }
.fm-tog i { position: relative; width: 24px; height: 13px; background: rgba(120, 184, 255, 0.18); border-radius: 7px; transition: background 0.15s; }
.fm-tog i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; background: #8fa0b4; border-radius: 50%; transition: transform 0.15s, background 0.15s; }
.fm-tog input:checked + i { background: rgba(78, 230, 180, 0.4); }
.fm-tog input:checked + i::after { transform: translateX(11px); background: #4ee6b4; }
.fm-tog input:checked ~ span { color: #eaf4ff; }
.fm-legend { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; background: rgba(8, 13, 22, 0.8); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 7px; }
.fm-legend span { display: inline-flex; align-items: center; gap: 3px; color: var(--lc); font: 700 10px "Segoe UI", system-ui, sans-serif; letter-spacing: 0.02em; }
.fm-legend svg { width: 12px; height: 12px; }

.fm-live {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  color: #a9bdd4;
  background: rgba(8, 13, 22, 0.88);
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.fm-live .b { color: #5fb0ff; font-weight: 800; }
.fm-live .r { color: #ff5f52; font-weight: 800; }

.fm-zoomtag { position: absolute; left: 14px; bottom: calc(var(--tray-h, 112px) + 14px); color: rgba(160, 180, 205, 0.55); font: 10px ui-monospace, Consolas, monospace; pointer-events: none; }
.fm-hint { position: absolute; left: 60px; right: 330px; bottom: calc(var(--tray-h, 112px) + 14px); color: rgba(190, 210, 232, 0.65); font-size: 11px; text-shadow: 0 1px 2px #000; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tray-h, 112px) + 28px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  color: #eaf4ff;
  background: rgba(10, 16, 27, 0.96);
  border: 1px solid rgba(120, 184, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  z-index: 4;
}
.fm-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fm-toast[data-tone="ok"] { border-color: rgba(78, 230, 180, 0.55); }
.fm-toast[data-tone="warn"] { border-color: rgba(232, 160, 74, 0.7); color: #ffe3c7; }
.fm-toast button { height: 22px; padding: 0 9px; color: #04121f; background: #8cc8ff; border: 0; border-radius: 5px; font: 700 11px "Segoe UI", system-ui, sans-serif; cursor: pointer; }

/* ---- the side panel ------------------------------------------------------------- */

.fm-side {
  position: absolute;
  top: 46px;
  right: 10px;
  bottom: calc(var(--tray-h, 112px) + 16px);
  width: 300px;
  overflow-y: auto;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.94), rgba(9, 14, 24, 0.95));
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.fm-side-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--sc, rgba(120, 184, 255, 0.3)); }
.fm-side-icon { flex: none; width: 34px; height: 24px; color: var(--sc, #9fd2ff); }
.fm-side-icon svg { width: 100%; height: 100%; }
.fm-side-icon--glyph { width: 20px; height: 20px; }
.fm-side-icon--picto { width: 36px; height: 22px; }
.fm-side-title { flex: 1; min-width: 0; color: #eaf4ff; font-size: 13px; letter-spacing: 0.04em; }
.fm-side-head input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  color: #eaf4ff;
  background: rgba(4, 8, 15, 0.7);
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 6px;
  font: 650 13px "Segoe UI", system-ui, sans-serif;
  outline: none;
}
.fm-side-head input:focus { border-color: rgba(140, 196, 255, 0.7); }
.fm-x {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #8fa0b4;
  background: transparent;
  border: 1px solid rgba(120, 184, 255, 0.2);
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.fm-x:hover { color: #fff; border-color: rgba(140, 196, 255, 0.6); }
.fm-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.fm-side select {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  color: #eaf4ff;
  background: rgba(4, 8, 15, 0.85);
  border: 1px solid rgba(120, 184, 255, 0.28);
  border-radius: 6px;
  font: 12px "Segoe UI", system-ui, sans-serif;
}
.fm-side select option { background: #0d1420; }
.fm-side textarea {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  color: #eaf4ff;
  background: rgba(4, 8, 15, 0.7);
  border: 1px solid rgba(120, 184, 255, 0.22);
  border-radius: 6px;
  font: 11.5px/1.4 "Segoe UI", system-ui, sans-serif;
  resize: vertical;
  outline: none;
}
.fm-sub { margin: 12px 0 5px; color: #8fa0b4; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fm-sub span { color: #64768b; font-weight: 400; letter-spacing: 0; text-transform: none; }
.fm-note { margin: 4px 0; color: #8fa0b4; font-size: 11px; line-height: 1.45; }
.fm-note b { color: #dbe8f6; }
.fm-warn { margin: 6px 0; padding: 5px 8px; color: #ffe0b0; background: rgba(224, 145, 63, 0.12); border-left: 2px solid rgba(224, 145, 63, 0.85); border-radius: 0 4px 4px 0; font-size: 11px; }
.fm-chips { display: inline-flex; gap: 4px; }
.fm-chips--wrap { display: flex; flex-wrap: wrap; }
.fm-c {
  height: 22px;
  padding: 0 8px;
  color: #a9bdd4;
  background: rgba(70, 120, 180, 0.08);
  border: 1px solid rgba(120, 184, 255, 0.2);
  border-radius: 11px;
  font: 600 10.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.fm-c:hover { color: #fff; border-color: rgba(140, 196, 255, 0.55); }
.fm-c.is-on { color: #eaf4ff; background: color-mix(in srgb, var(--lc, #6eb0ff) 28%, transparent); border-color: color-mix(in srgb, var(--lc, #6eb0ff) 70%, transparent); }
.fm-c--blue.is-on { --lc: #5fb0ff; }
.fm-c--red.is-on { --lc: #ff5f52; }
.fm-stock { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #8fa0b4; font-size: 11px; }
.fm-stock em { color: #dbe8f6; font-style: normal; font-variant-numeric: tabular-nums; }
.fm-bar { position: relative; flex: 1; height: 6px; overflow: hidden; background: rgba(120, 184, 255, 0.12); border-radius: 3px; }
.fm-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: #4ee6b4; border-radius: 3px; }
.fm-bar b[data-level="thin"] { background: #e8c84a; }
.fm-bar b[data-level="bad"] { background: #ff6b5e; }
.fm-entries { display: flex; flex-direction: column; gap: 4px; }
.fm-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  background: rgba(70, 120, 180, 0.06);
  border: 1px solid rgba(120, 184, 255, 0.14);
  border-radius: 7px;
  cursor: pointer;
}
.fm-entry:hover, .fm-entry.is-on { border-color: rgba(140, 196, 255, 0.5); background: rgba(61, 139, 255, 0.12); }
.fm-entry-pic { flex: none; width: 34px; height: 21px; color: #9fd2ff; }
.fm-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fm-entry-main b { color: #eaf4ff; font-size: 12px; }
.fm-entry-main small { color: #75879c; font-size: 10px; }
.fm-entry-main em { color: #a9bdd4; font-size: 10.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.fm-entry-tools { display: flex; gap: 3px; }
.fm-entry-tools button { width: 22px; height: 22px; padding: 0; color: #8fa0b4; background: transparent; border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 5px; cursor: pointer; }
.fm-entry-tools button:hover { color: #fff; border-color: rgba(140, 196, 255, 0.6); }
.fm i.warn, .fm .warn { color: #ffd08a; font-style: normal; }
.fm-lines { display: flex; flex-direction: column; gap: 3px; }
.fm-line {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  color: #cfe0f3;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(120, 184, 255, 0.12);
  border-left: 3px solid var(--lc);
  border-radius: 5px;
  font: 11px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.fm-line:hover { background: color-mix(in srgb, var(--lc) 12%, transparent); }
.fm-line i { flex: none; width: 14px; height: 14px; color: var(--lc); }
.fm-line b { color: var(--lc); }
.fm-line em { margin-left: auto; color: #ffb366; font-weight: 800; font-style: normal; }
.fm-route { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; color: #eaf4ff; font-size: 13px; }
.fm-route span { color: #64768b; }
.fm-who { display: flex; flex-direction: column; gap: 3px; }
.fm-who span { display: flex; align-items: center; gap: 7px; color: #dbe8f6; font-size: 11.5px; }
.fm-who svg { width: 28px; height: 18px; color: #9fd2ff; }
.fm-kvs { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0; }
.fm-kv { display: contents; }
.fm-kv span { color: #8fa0b4; font-size: 11px; }
.fm-kv b { color: #eaf4ff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fm-orders { margin: 0 0 6px; color: #eaf4ff; font-size: 12px; line-height: 1.5; }
.fm-orders i { color: #8fa0b4; font-style: normal; font-size: 11px; }
.fm-range { display: flex; align-items: center; gap: 8px; margin: 5px 0; color: #8fa0b4; font-size: 11px; }
.fm-range span { width: 52px; }
.fm-range input { flex: 1; accent-color: #6eb0ff; }
.fm-range b { width: 34px; color: #eaf4ff; text-align: right; font-variant-numeric: tabular-nums; }
.fm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fm-btn {
  height: 28px;
  padding: 0 11px;
  color: #d6e6f8;
  background: rgba(70, 120, 180, 0.12);
  border: 1px solid rgba(120, 184, 255, 0.28);
  border-radius: 6px;
  font: 650 11.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.fm-btn:hover { color: #fff; border-color: rgba(140, 196, 255, 0.6); background: rgba(61, 139, 255, 0.2); }
.fm-btn--primary { color: #eaf4ff; background: linear-gradient(180deg, rgba(61, 139, 255, 0.55), rgba(42, 104, 210, 0.42)); border-color: rgba(140, 196, 255, 0.7); }
.fm-btn--bad:hover { border-color: rgba(255, 120, 110, 0.65); background: rgba(255, 90, 80, 0.2); }
.fm-btn--bad.is-armed { color: #fff; background: rgba(255, 90, 80, 0.6); border-color: rgba(255, 140, 130, 0.9); }
.fm-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #a9bdd4; font-size: 11.5px; line-height: 1.45; }
.fm-steps b { color: #eaf4ff; }
.fm-steps i { font-style: normal; font-weight: 700; }

/* ---- the tray of unit cards ------------------------------------------------------------ */

.fm-tray {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  max-height: 45%;
  padding: 6px 8px 8px;
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.94), rgba(9, 14, 24, 0.96));
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 10px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
}
.fm-tray-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.fm-tray-head b { color: #eaf4ff; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.fm-tray-head span { color: #64768b; font-size: 10.5px; }
.fm-cards { flex: none; display: flex; gap: 6px; min-height: 60px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.fm-card {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 104px;
  padding: 4px 6px;
  color: #dbe8f6;
  background: linear-gradient(180deg, rgba(30, 46, 72, 0.7), rgba(16, 25, 40, 0.8));
  border: 1px solid rgba(120, 184, 255, 0.22);
  border-radius: 8px;
  font: 11px "Segoe UI", system-ui, sans-serif;
  cursor: grab;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.fm-card:hover { border-color: rgba(140, 196, 255, 0.7); box-shadow: 0 0 14px rgba(61, 139, 255, 0.3); transform: translateY(-1px); }
.fm-card:active { cursor: grabbing; }
.fm-card-pic { width: 46px; height: 28px; color: #bfe0ff; font-size: 22px; line-height: 28px; text-align: center; }
.fm-card b { max-width: 100%; overflow: hidden; color: #eaf4ff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fm-card small { max-width: 100%; overflow: hidden; color: #75879c; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.fm-card--new { border-style: dashed; cursor: pointer; background: rgba(232, 200, 74, 0.05); border-color: rgba(232, 200, 74, 0.4); }
.fm-card--new .fm-card-pic { color: #f0c75e; }

/* ---- "what does this line mean?" ---------------------------------------------------- */

.fm-pop {
  position: absolute;
  z-index: 5;
  width: 340px;
  padding: 10px 10px 8px;
  background: linear-gradient(180deg, rgba(16, 25, 40, 0.98), rgba(10, 16, 27, 0.98));
  border: 1px solid rgba(140, 196, 255, 0.45);
  border-radius: 11px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 22px rgba(61, 139, 255, 0.15);
  animation: fm-pop 0.16s cubic-bezier(.2, .9, .3, 1.1);
}
.fm-pop[hidden] { display: none; }
@keyframes fm-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.fm-pop-head { display: flex; align-items: center; gap: 8px; }
.fm-pop-head b { flex: 1; min-width: 0; color: #eaf4ff; font-size: 13px; }
.fm-pop-head b span { color: #64768b; margin: 0 2px; }
.fm-chip { padding: 1px 7px; color: #a9bdd4; background: rgba(120, 184, 255, 0.12); border-radius: 9px; font: 700 9.5px "Segoe UI", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; }
.fm-chip--red { color: #ffd2cd; background: rgba(255, 95, 82, 0.22); }
.fm-chip--own { color: #cfe6ff; background: rgba(95, 176, 255, 0.2); }
.fm-pop-q { margin: 6px 0 7px; color: #8fa0b4; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.fm-opts { display: flex; flex-direction: column; gap: 4px; }
.fm-opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 9px;
  color: #dbe8f6;
  text-align: left;
  background: rgba(70, 120, 180, 0.05);
  border: 1px solid rgba(120, 184, 255, 0.14);
  border-left: 3px solid var(--lc);
  border-radius: 7px;
  font: 11px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.fm-opt:hover { background: color-mix(in srgb, var(--lc) 16%, transparent); border-color: color-mix(in srgb, var(--lc) 60%, transparent); }
.fm-opt i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--lc); }
.fm-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fm-opt b { color: var(--lc); font-size: 12.5px; }
.fm-opt small { color: #a9bdd4; font-size: 11px; line-height: 1.35; }
.fm-opt em { font-style: normal; font-size: 10.5px; }
.fm-opt em.ok { color: #8fe8c9; }
.fm-opt em.warn { color: #ffd08a; }
.fm-cargo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 7px; color: #8fa0b4; font-size: 10.5px; }
.fm-cargo span { margin-right: 2px; }
.fm-cargo button { height: 20px; padding: 0 7px; color: #a9bdd4; background: transparent; border: 1px solid rgba(78, 230, 180, 0.25); border-radius: 10px; font: 600 10px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fm-cargo button.is-on { color: #04121f; background: #4ee6b4; border-color: #4ee6b4; }
.fm-newpt { width: 100%; margin-top: 7px; height: 26px; color: #f0c75e; background: transparent; border: 1px dashed rgba(232, 200, 74, 0.5); border-radius: 6px; font: 650 11px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fm-newpt:hover { background: rgba(232, 200, 74, 0.1); }

/* ====================================================================================
   THE HANGAR — a garage: the unit on a turntable, its slots in a row beneath it
   ==================================================================================== */

.fh { display: flex; flex-direction: column; z-index: 6; background: #12171e; color: #dbe8f6; font: 12px "Segoe UI", system-ui, sans-serif; }
.fh[hidden] { display: none; }
.fh-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  flex: none;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(22, 30, 42, 0.98), rgba(14, 20, 29, 0.98));
  border-bottom: 1px solid rgba(240, 199, 94, 0.22);
}
.fh-title { color: #f0c75e; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.fh-name {
  width: 240px;
  height: 30px;
  padding: 0 10px;
  color: #ffffff;
  background: rgba(4, 8, 15, 0.6);
  border: 1px solid rgba(240, 199, 94, 0.28);
  border-radius: 6px;
  font: 700 14px "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.02em;
  outline: none;
}
.fh-name:focus { border-color: rgba(240, 199, 94, 0.8); }
.fh-role { color: #8fa0b4; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.fh-flex { flex: 1; }
.fh-btn {
  height: 30px;
  padding: 0 12px;
  color: #d6e6f8;
  background: rgba(70, 120, 180, 0.12);
  border: 1px solid rgba(120, 184, 255, 0.28);
  border-radius: 6px;
  font: 650 11.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.fh-btn:hover { color: #fff; border-color: rgba(140, 196, 255, 0.6); background: rgba(61, 139, 255, 0.2); }
.fh-btn--sm { height: 24px; padding: 0 9px; font-size: 11px; }
.fh-btn--ghost { background: transparent; border-color: rgba(120, 184, 255, 0.18); }
.fh-btn--bad:hover { border-color: rgba(255, 120, 110, 0.65); background: rgba(255, 90, 80, 0.2); }
.fh-btn.is-armed { color: #fff; background: rgba(255, 90, 80, 0.6); border-color: rgba(255, 140, 130, 0.9); }
/* the big one, like "To battle!" */
.fh-btn--go {
  height: 34px;
  padding: 0 18px;
  color: #1d1300;
  background: linear-gradient(180deg, #ffd56b, #e8a92e);
  border: 1px solid #ffe08a;
  box-shadow: 0 0 18px rgba(255, 196, 70, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font: 800 12.5px "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fh-btn--go:hover { color: #1d1300; background: linear-gradient(180deg, #ffe08a, #f0b53c); box-shadow: 0 0 26px rgba(255, 196, 70, 0.6); }
.fh-x { flex: none; width: 24px; height: 24px; padding: 0; color: #8fa0b4; background: transparent; border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 5px; font-size: 14px; cursor: pointer; }
.fh-x:hover { color: #fff; border-color: rgba(140, 196, 255, 0.6); }
.fh-x--sm { width: 20px; height: 20px; font-size: 12px; }

.fh-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.fh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.fh-canvas:active { cursor: grabbing; }

/* its numbers, on the left */
.fh-ttx {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 260px;
  padding: 12px 13px;
  background: linear-gradient(180deg, rgba(14, 20, 30, 0.86), rgba(9, 13, 20, 0.9));
  border: 1px solid rgba(120, 184, 255, 0.18);
  border-left: 3px solid #f0c75e;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.fh-ttx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fh-ttx-pic { flex: none; width: 52px; height: 32px; color: #f0c75e; }
.fh-ttx-head b { display: block; color: #ffffff; font-size: 14px; }
.fh-ttx-head small { color: #8fa0b4; font-size: 10.5px; }
.fh-ttx-row { display: grid; grid-template-columns: 70px 1fr 54px; align-items: center; gap: 8px; margin: 5px 0; }
.fh-ttx-row span { color: #8fa0b4; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.fh-ttx-row i { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.fh-ttx-row b { height: 6px; background: rgba(255, 255, 255, 0.09); }
.fh-ttx-row b.on { background: linear-gradient(180deg, #ffd56b, #e8a92e); box-shadow: 0 0 4px rgba(255, 196, 70, 0.45); }
.fh-ttx-row em { color: #eaf4ff; font-style: normal; font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.fh-ttx-sub { margin: 11px 0 3px; padding-top: 8px; border-top: 1px solid rgba(120, 184, 255, 0.12); color: #8fa0b4; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.fh-range { display: flex; align-items: center; gap: 7px; margin: 5px 0 0; color: #8fa0b4; font-size: 10.5px; }
.fh-range span { width: 54px; letter-spacing: 0.04em; text-transform: uppercase; }
.fh-range input { flex: 1; accent-color: #f0c75e; }
.fh-range b { width: 46px; color: #eaf4ff; text-align: right; font-variant-numeric: tabular-nums; }

/* the slot row under the unit */
.fh-loadout {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.fh-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 128px;
  height: 108px;
  padding: 7px 8px 6px;
  color: #dbe8f6;
  text-align: center;
  background: linear-gradient(180deg, rgba(30, 40, 54, 0.92), rgba(14, 20, 29, 0.95));
  border: 1px solid rgba(160, 180, 205, 0.28);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.fh-slot:hover { border-color: rgba(240, 199, 94, 0.6); transform: translateY(-2px); }
.fh-slot.is-active { border-color: #f0c75e; box-shadow: 0 0 20px rgba(240, 199, 94, 0.4), 0 10px 24px rgba(0, 0, 0, 0.5); }
.fh-slot.is-target { border-color: #ffe08a; box-shadow: 0 0 26px rgba(255, 224, 138, 0.6); transform: translateY(-3px); }
.fh-slot.is-pop { animation: fh-pop 0.4s ease-out; }
@keyframes fh-pop { 0% { box-shadow: 0 0 0 0 rgba(255, 224, 138, 0.8); } 100% { box-shadow: 0 0 0 14px rgba(255, 224, 138, 0); } }
.fh-slot-label { color: #f0c75e; font: 800 9px "Segoe UI", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; }
.fh-slot-pic { width: 56px; height: 34px; color: #dfe9f5; }
.fh-slot-pic svg { width: 100%; height: 100%; }
.fh-slot-pic--glyph { width: 30px; height: 34px; color: #f0c75e; }
.fh-slot b { max-width: 100%; overflow: hidden; color: #ffffff; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.fh-slot small { max-width: 100%; overflow: hidden; color: #8fa0b4; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.fh-slot.is-builtin { border-style: dashed; }
.fh-slot.is-builtin small { color: #6f8196; font-style: italic; }

/* what can go into the slot, above the row */
.fh-drawer {
  position: absolute;
  left: 50%;
  bottom: 136px;
  width: min(1060px, calc(100% - 300px));
  margin-left: 130px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, rgba(18, 26, 38, 0.96), rgba(10, 15, 23, 0.97));
  border: 1px solid rgba(240, 199, 94, 0.35);
  border-radius: 8px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  animation: fh-rise 0.16s ease-out;
}
.fh-drawer[hidden] { display: none; }
@keyframes fh-rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.fh-drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.fh-drawer-head b { color: #f0c75e; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.fh-drawer-head span { flex: 1; color: #64768b; font-size: 10.5px; }
.fh-mods { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.fh-group { display: flex; align-items: stretch; gap: 5px; padding-right: 8px; border-right: 1px solid rgba(120, 184, 255, 0.12); }
.fh-group:last-child { border-right: 0; }
.fh-group-label { writing-mode: vertical-rl; transform: rotate(180deg); color: #64768b; font: 800 9px "Segoe UI", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.fh-mod {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 116px;
  padding: 7px 6px 6px;
  color: #dbe8f6;
  text-align: center;
  background: linear-gradient(180deg, rgba(34, 46, 62, 0.75), rgba(18, 26, 37, 0.85));
  border: 1px solid rgba(160, 180, 205, 0.22);
  border-radius: 6px;
  font: 11px "Segoe UI", system-ui, sans-serif;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.fh-mod:hover { border-color: rgba(240, 199, 94, 0.6); transform: translateY(-1px); }
.fh-mod.is-on { border-color: #f0c75e; box-shadow: 0 0 12px rgba(240, 199, 94, 0.35); }
.fh-mod-pic { width: 48px; height: 28px; color: #dfe9f5; }
.fh-mod-pic svg { width: 100%; height: 100%; }
.fh-mod b { max-width: 100%; overflow: hidden; color: #ffffff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fh-mod small { display: -webkit-box; overflow: hidden; color: #75879c; font-size: 9.5px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* your units, along the bottom */
.fh-carousel {
  display: flex;
  flex: none;
  gap: 4px;
  min-height: 92px;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.98), rgba(6, 9, 14, 1));
  border-top: 1px solid rgba(240, 199, 94, 0.2);
}
.fh-car {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 116px;
  min-height: 70px;
  padding: 5px 6px;
  color: #dbe8f6;
  background: linear-gradient(180deg, rgba(30, 38, 50, 0.8), rgba(16, 21, 29, 0.9));
  border: 1px solid rgba(160, 180, 205, 0.18);
  border-radius: 4px;
  font: 11px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fh-car:hover { border-color: rgba(240, 199, 94, 0.5); }
.fh-car.is-on { border-color: #f0c75e; box-shadow: inset 0 -3px 0 #f0c75e, 0 0 14px rgba(240, 199, 94, 0.25); }
.fh-car-pic { width: 50px; height: 30px; color: #cfdbe8; font-size: 22px; line-height: 30px; }
.fh-car-pic svg { width: 100%; height: 100%; }
.fh-car b { max-width: 100%; overflow: hidden; color: #ffffff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fh-car small { max-width: 100%; overflow: hidden; color: #75879c; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.fh-car--new { border-style: dashed; border-color: rgba(240, 199, 94, 0.45); }
.fh-car--new .fh-car-pic { color: #f0c75e; }

.fh-toast {
  position: absolute;
  left: 50%;
  top: 14px;
  padding: 6px 12px;
  color: #eaf4ff;
  background: rgba(10, 16, 27, 0.95);
  border: 1px solid rgba(120, 184, 255, 0.4);
  border-radius: 8px;
  font-size: 12px;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.fh-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.fh-toast[data-tone="ok"] { border-color: rgba(78, 230, 180, 0.55); }
.fh-toast[data-tone="warn"] { border-color: rgba(232, 160, 74, 0.7); }

/* the behaviour sheet */
.fh-brain {
  position: absolute;
  top: 46px;
  right: 0;
  bottom: var(--car-h, 92px);
  width: 410px;
  overflow-y: auto;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.97), rgba(9, 14, 24, 0.98));
  border-left: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: -16px 0 36px rgba(0, 0, 0, 0.4);
  z-index: 4;
}
.fh-brain[hidden] { display: none; }
.fh-brain-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fh-brain-head b { color: #d9cdff; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.fh-brain-head span { flex: 1; color: #8fa0b4; font-size: 11px; }
.fh-brain-note { margin: 0 0 8px; color: #8fa0b4; font-size: 11px; line-height: 1.45; }
.fh-brain-note b { color: #f0c75e; }
.fh-rules { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.fh-rule { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: start; padding: 6px; background: rgba(4, 8, 15, 0.5); border: 1px solid rgba(120, 184, 255, 0.12); border-radius: 7px; }
.fh-rule.is-int { border-color: rgba(232, 200, 74, 0.45); background: rgba(232, 200, 74, 0.05); }
.fh-rule--else { border-style: dashed; }
.fh-rule-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fh-when, .fh-then { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fh-if { color: #75879c; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.fh-arrow { color: #a78bfa; font-weight: 800; }
.fh-cond { display: inline-flex; align-items: center; gap: 3px; }
.fh-rule select { max-width: 210px; height: 23px; padding: 0 4px; color: #eaf4ff; background: rgba(4, 8, 15, 0.85); border: 1px solid rgba(120, 184, 255, 0.26); border-radius: 4px; font: 11px "Segoe UI", system-ui, sans-serif; }
.fh-rule select option { background: #0d1420; }
.fh-int, .fh-not, .fh-rule-tools button { height: 21px; padding: 0 5px; color: #75879c; background: transparent; border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 4px; font: 700 10px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fh-int { width: 22px; padding: 0; font-size: 11px; filter: grayscale(1); opacity: 0.6; }
.fh-int.is-on { filter: none; opacity: 1; color: #241a02; background: #e8c84a; border-color: #e8c84a; }
.fh-not.is-on { color: #fff; background: rgba(255, 107, 94, 0.45); border-color: rgba(255, 140, 130, 0.7); }
.fh-rule-tools { display: flex; gap: 2px; opacity: 0.35; transition: opacity 0.15s; }
.fh-rule:hover .fh-rule-tools { opacity: 1; }
.fh-rule-tools button:disabled { opacity: 0.3; cursor: default; }

/* ---- the map: a unit in hand, what a unit carries ------------------------------------- */

.fm-place {
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  color: #eaf4ff;
  background: rgba(14, 20, 30, 0.95);
  border: 1px solid rgba(240, 199, 94, 0.6);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(240, 199, 94, 0.25), 0 12px 28px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.fm-place[hidden] { display: none; }
.fm-place b { color: #f0c75e; }
.fm-place-pic { width: 40px; height: 25px; color: #f0c75e; }
.fm-tip {
  position: absolute;
  z-index: 4;
  width: 300px;
  padding: 8px 9px;
  background: rgba(10, 15, 23, 0.97);
  border: 1px solid rgba(240, 199, 94, 0.4);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.fm-tip[hidden] { display: none; }
.fm-tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fm-tip-head b { color: #ffffff; font-size: 12.5px; }
.fm-tip-head span { color: #a9bdd4; font-size: 11px; }
.fm-tip-row { color: #dbe8f6; font-size: 11.5px; }
.fm-tip-foot { margin-top: 6px; color: #75879c; font-size: 10.5px; }
.fm-hp { display: inline-flex; gap: 2px; }
.fm-hp i { width: 9px; height: 4px; background: rgba(255, 255, 255, 0.15); transform: skewX(-18deg); }
.fm-hp i.on { background: #4ee6b4; }
.fm-loadout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.fm-loadout .fh-slot { width: auto; height: 74px; padding: 4px 3px; transform: none; box-shadow: none; }
.fm-loadout .fh-slot-pic { width: 36px; height: 20px; }
.fm-loadout .fh-slot-pic--glyph { width: 18px; height: 20px; }
.fm-loadout .fh-slot b { font-size: 10px; }
.fm-loadout .fh-slot small { font-size: 8.5px; }
.fm-loadout--tip .fh-slot { height: 66px; cursor: default; }

/* ---- the unit card on the map: a programmed unit's reasons ---------------------------- */

.bc-force { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding: 6px 8px; background: rgba(232, 200, 74, 0.06); border-left: 2px solid rgba(232, 200, 74, 0.7); border-radius: 0 5px 5px 0; font-size: 11px; color: #dbe8f6; }
.bc-force i { display: inline-block; width: 58px; color: #8fa0b4; font-style: normal; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.bc-force em { color: #8fa0b4; font-style: normal; }
.bc-force b { color: #f0d77a; font-weight: 650; }
.bc-force-pending { color: #ffd08a; }
.bc-force-open { align-self: flex-start; margin-top: 3px; padding: 3px 8px; color: #241a02; background: #e8c84a; border: 0; border-radius: 4px; font: 700 10.5px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.bc-force-open:hover { background: #f3d76c; }

@media (max-width: 900px) {
  .fm-side { width: 240px; }
  .fh-brain { width: 320px; }
  .fh-name { width: 150px; }
}

/* ---- bases and zones: the tray's tabs, zone sides, base tips ------------------------------ */

.fm-tabs { display: inline-flex; gap: 2px; padding: 2px; background: rgba(4, 8, 15, 0.55); border: 1px solid rgba(120, 184, 255, 0.18); border-radius: 6px; }
.fm-tabs button {
  padding: 2px 10px;
  color: #8fa0b4;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font: 700 10.5px "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.fm-tabs button:hover { color: #eaf4ff; }
.fm-tabs button.is-on { color: #0b111a; background: #f0c75e; }
.fm-tray-head { align-items: center; }
.fm-card--base .fm-card-pic, .fm-card--zone .fm-card-pic { width: 40px; height: 26px; }
.fm-card--base .fm-card-pic svg, .fm-card--zone .fm-card-pic svg { width: 100%; height: 100%; }
.fm-card--zone .fm-card-pic { width: 24px; }
.fm-card--zone { border-color: color-mix(in srgb, var(--zc, #6eb0ff) 45%, transparent); }
.fm-card--zone:hover { border-color: var(--zc, #6eb0ff); box-shadow: 0 0 14px color-mix(in srgb, var(--zc, #6eb0ff) 40%, transparent); }
.fm-card--base small { display: flex; gap: 2px; justify-content: center; }
.fm-card--base small i { display: inline-block; width: 18px; height: 11px; color: #bfe0ff; }
.fm-card--base small i svg { width: 100%; height: 100%; }
.fm-place-pic i { display: inline-block; width: 22px; height: 22px; }
.fm-place-pic svg { width: 100%; height: 100%; }
.fm-tip-units { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.fm-tip-units span { display: inline-flex; align-items: center; gap: 3px; color: #bfe0ff; }
.fm-tip-units span svg { width: 26px; height: 16px; }
.fm-tip-units em { color: #eaf4ff; font-style: normal; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.fm-line i { display: inline-block; flex: none; width: 15px; height: 15px; color: var(--lc, #9fd2ff); }
.fm-line i svg { width: 100%; height: 100%; }
.fm-row select { width: 100%; height: 26px; color: #dbe8f6; background: rgba(4, 8, 15, 0.6); border: 1px solid rgba(120, 184, 255, 0.24); border-radius: 5px; font: 11px "Segoe UI", system-ui, sans-serif; }
.fm-btn--sm { padding: 3px 8px; font-size: 10.5px; }

/* ---- hangar: bases and zones ------------------------------------------------------------- */

.fh-modes { display: inline-flex; gap: 2px; padding: 2px; background: rgba(4, 8, 15, 0.6); border: 1px solid rgba(240, 199, 94, 0.22); border-radius: 7px; }
.fh-modes button {
  padding: 4px 12px;
  color: #8fa0b4;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: 800 10.5px "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.fh-modes button:hover { color: #ffffff; }
.fh-modes button.is-on { color: #0b111a; background: linear-gradient(180deg, #ffd56b, #e8a92e); box-shadow: 0 0 12px rgba(240, 199, 94, 0.4); }
.fh-ttx-pic--base svg, .fh-ttx-pic--glyph svg { width: 100%; height: 100%; }
.fh-ttx-pic--glyph { width: 30px; }
.fh-ttx-note { margin: 8px 0 0; color: #a9bdd4; font-size: 10.5px; line-height: 1.4; }
.fh-ttx-note--auto { color: #ffc56b; }
.fh-accepts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fh-accepts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 4px;
  color: #eaf4ff;
  background: color-mix(in srgb, var(--lc, #6eb0ff) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--lc, #6eb0ff) 55%, transparent);
  border-radius: 10px;
  font-size: 10.5px;
}
.fh-accepts i { width: 13px; height: 13px; color: var(--lc, #6eb0ff); }
.fh-accepts i svg { width: 100%; height: 100%; }
.fh-accepts em { color: #8fa0b4; font-size: 10.5px; }
.fh-slot-pic i { display: block; width: 100%; height: 100%; }
.fh-slot-pic i svg { width: 100%; height: 100%; }
.fh-slot-base { display: block; width: 100%; height: 100%; color: #f0c75e; }
.fh-slot-base svg { width: 100%; height: 100%; }
.fh-slot-pics { display: flex; justify-content: center; gap: 2px; height: 100%; }
.fh-slot-pics svg { width: 30px; height: 100%; }
.fh-mod-base { display: block; width: 100%; height: 100%; color: #f0c75e; }
.fh-mod-base svg { width: 100%; height: 100%; }
.fh-mod-pic i { display: block; width: 26px; height: 26px; margin: 0 auto; }
.fh-mod-pic i svg { width: 100%; height: 100%; }
.fh-car-pic--base { color: #f0c75e; }
.fh-garr { flex: 0 0 250px; display: flex; flex-direction: column; gap: 3px; max-height: 118px; overflow-y: auto; padding-right: 8px; border-right: 1px solid rgba(120, 184, 255, 0.12); }
.fh-garr-row { display: flex; align-items: center; gap: 7px; padding: 3px 6px; background: rgba(4, 8, 15, 0.5); border: 1px solid rgba(160, 180, 205, 0.18); border-radius: 5px; }
.fh-garr-pic { width: 34px; height: 20px; color: #dfe9f5; }
.fh-garr-pic svg { width: 100%; height: 100%; }
.fh-garr-row b { flex: 1; color: #ffffff; font-size: 11px; }
.fh-garr-row em { width: 22px; color: #f0c75e; font-style: normal; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.fh-garr-row button:not(.fh-x) { width: 22px; height: 20px; color: #dbe8f6; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(160, 180, 205, 0.25); border-radius: 4px; cursor: pointer; }
.fh-garr-row button:not(.fh-x):hover { border-color: #f0c75e; color: #fff; }
.fh-garr-empty { margin: 2px 0; color: #8fa0b4; font-size: 11px; }


/* ---- the Forces window ------------------------------------------------------------------- */

/* the whole screen: over the top bar and the mode dock, under the global overlays */
.fw { z-index: 9400; }
.fw .mg-win { inset: 0; border: 0; border-radius: 0; box-shadow: none; background: #0a0f17; backdrop-filter: none; }
.fw:fullscreen { background: #0a0f17; }
.fw .mg-win::before { border-color: #f0c75e; }
.fw .mg-win::after { border-color: #f0c75e; }
.fw-mark { color: #f0c75e !important; filter: drop-shadow(0 0 8px rgba(240, 199, 94, 0.5)) !important; }
.fw-btn--gold {
  color: #1d1300 !important;
  background: linear-gradient(180deg, #ffd56b, #e8a92e) !important;
  border-color: #ffe08a !important;
  box-shadow: 0 0 14px rgba(255, 196, 70, 0.35) !important;
}
.fw-btn--gold:hover { box-shadow: 0 0 20px rgba(255, 196, 70, 0.55) !important; }
.fw .mg-foot-hint { margin-left: auto; }
.forces-launcher { display: inline-flex; align-items: center; gap: 5px; }
.forces-launcher svg { width: 14px; height: 14px; }
.forces-launcher.is-on {
  color: #1d1300;
  background: linear-gradient(180deg, #ffd56b, #e8a92e);
  border-color: #ffe08a;
  box-shadow: 0 0 10px rgba(255, 196, 70, 0.45);
}

/* ---- formations on the theatre map ------------------------------------------------------ */

.fm-tray-find { display: inline-flex; align-items: center; gap: 6px; }
.fm-tray-find[hidden] { display: none; }
.fm-tray-find input {
  width: 200px;
  height: 22px;
  padding: 0 8px;
  color: #eaf4ff;
  background: rgba(4, 8, 15, 0.7);
  border: 1px solid rgba(120, 184, 255, 0.26);
  border-radius: 5px;
  font: 11px "Segoe UI", system-ui, sans-serif;
  outline: none;
}
.fm-tray-find input:focus { border-color: rgba(240, 199, 94, 0.7); }
.fm-seg--sm button { padding: 1px 8px; font-size: 10px; }
.fm-tray-empty { margin: auto; color: #64768b; font-size: 11px; }
.fm-card--formation { width: 118px; cursor: pointer; border-color: color-mix(in srgb, var(--zc, #6eb0ff) 40%, transparent); }
.fm-card--formation.is-on { border-color: #f0c75e; box-shadow: 0 0 14px rgba(240, 199, 94, 0.4); }
.fm-card--formation .fm-card-pic { display: flex; align-items: center; justify-content: center; }
.fm-card--formation .fm-card-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fm-frame { display: inline-block; width: 30px; height: 20px; border: 2px solid #5fb0ff; background: rgba(18, 40, 70, 0.9); }
.fm-frame--red { width: 20px; height: 20px; border-color: #ff5f52; background: rgba(80, 20, 22, 0.9); transform: rotate(45deg) scale(0.8); }
.fm-side-icon--badge { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.fm-side-icon--badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fm-tag { padding: 0 5px; color: #1d1300; background: #f0c75e; border-radius: 3px; font-style: normal; font-size: 9.5px; font-weight: 700; }
.fm-men input { width: 90px; height: 24px; padding: 0 6px; color: #eaf4ff; background: rgba(4, 8, 15, 0.6); border: 1px solid rgba(120, 184, 255, 0.26); border-radius: 5px; font: 700 12px "Segoe UI", system-ui, sans-serif; text-align: right; }
.fm-men span { color: #8fa0b4; font-size: 11px; }
.fm-shares { display: flex; flex-direction: column; gap: 3px; }
.fm-share { display: grid; grid-template-columns: 22px 78px 1fr 34px 48px; align-items: center; gap: 5px; color: #b9cde4; font-size: 10.5px; }
.fm-share-pic { width: 22px; height: 13px; color: var(--c); }
.fm-share-pic svg { width: 100%; height: 100%; }
.fm-share-dot { width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.fm-share-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fm-share input { width: 100%; accent-color: var(--c); }
.fm-share b { color: #eaf4ff; text-align: right; font-variant-numeric: tabular-nums; }
.fm-share em { color: #75879c; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.fm-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-fields span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; color: #cfe0f2; background: rgba(4, 8, 15, 0.5); border: 1px solid rgba(120, 184, 255, 0.18); border-radius: 4px; }
.fm-fields span svg { width: 24px; height: 14px; }
.fm-fields b { color: #f0c75e; font-size: 11px; }
.fm-btn--go { color: #1d1300; background: linear-gradient(180deg, #ffd56b, #e8a92e); border-color: #ffe08a; font-weight: 700; }
.fm-btn--go:hover { color: #1d1300; background: linear-gradient(180deg, #ffe08a, #f0b53c); }
.fm-btn--ghost { background: transparent; }
.fm-check { display: flex; gap: 7px; align-items: flex-start; margin: 6px 0; color: #cfe0f2; font-size: 11px; line-height: 1.35; cursor: pointer; }
.fm-check input { margin-top: 2px; accent-color: #f0c75e; }
.fm-check i { color: #75879c; font-style: normal; }
.fm-tip-bars { display: flex; height: 6px; margin: 6px 0 2px; overflow: hidden; border-radius: 3px; }
.fm-tip-bars span { background: var(--c); }
.fm-line-badge { display: inline-flex !important; align-items: center; justify-content: center; width: 18px !important; height: 18px !important; }
.fm-line-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---- the hangar: formations ------------------------------------------------------------- */

.fh[data-mode="formations"] [data-act="dup"],
.fh[data-mode="formations"] [data-act="delete"] { display: none; }
.fh[data-mode="formations"] .fh-name { width: 340px; cursor: default; }
.fh-ttx-pic--badge { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.fh-ttx-pic--badge img, .fh-car-pic--badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fh-car-pic--badge { display: flex; align-items: center; justify-content: center; border-bottom: 2px solid var(--sc, #5fb0ff); }
.fh-shares { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 520px; }
.fh-share { display: grid; grid-template-columns: 30px 110px 1fr 44px 92px; align-items: center; gap: 8px; color: #b9cde4; font-size: 11.5px; }
.fh-share-pic { width: 30px; height: 18px; color: var(--c); }
.fh-share-pic svg { width: 100%; height: 100%; }
.fh-share-dot { display: block; width: 11px; height: 11px; margin-left: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.fh-share input { width: 100%; accent-color: var(--c); }
.fh-share b { color: #ffffff; text-align: right; font-variant-numeric: tabular-nums; }
.fh-share em { color: #8fa0b4; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.fh-ttx .fh-range input[type="number"] { flex: 1; height: 24px; padding: 0 6px; color: #fff; background: rgba(4, 8, 15, 0.6); border: 1px solid rgba(240, 199, 94, 0.3); border-radius: 5px; font: 700 12px "Segoe UI", system-ui, sans-serif; text-align: right; }


/* ---- Forces: map | board ------------------------------------------------------------------ */

.fw-views { display: inline-flex; padding: 2px; margin-left: 10px; background: rgba(4, 8, 15, 0.6); border: 1px solid rgba(240, 199, 94, 0.26); border-radius: 8px; }
.fw-views button {
  height: 26px;
  padding: 0 16px;
  color: #9fb3c9;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 800 11px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.fw-views button:hover { color: #fff; }
.fw-views button[aria-selected="true"] { color: #1d1300; background: linear-gradient(180deg, #ffd56b, #e8a92e); box-shadow: 0 0 12px rgba(240, 199, 94, 0.35); }
.fs-board { position: absolute; inset: 0; }
.fs-board[hidden] { display: none; }

/* ---- the board ------------------------------------------------------------------------------ */

.fb { display: flex; flex-direction: column; color: #dbe8f6; font: 12px "Segoe UI", system-ui, sans-serif; background: #0a0f17; }
.fb-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; flex-wrap: wrap; }
.fb-find { width: 260px; height: 28px; padding: 0 10px; color: #fff; background: rgba(4, 8, 15, 0.7); border: 1px solid rgba(120, 184, 255, 0.28); border-radius: 6px; font: 12px "Segoe UI", system-ui, sans-serif; outline: none; }
.fb-find:focus { border-color: rgba(240, 199, 94, 0.7); }
.fb-sel { height: 28px; padding: 0 8px; color: #dbe8f6; background: rgba(4, 8, 15, 0.7); border: 1px solid rgba(120, 184, 255, 0.28); border-radius: 6px; font: 12px "Segoe UI", system-ui, sans-serif; }
.fb-planned { margin: 0 4px; }
.fb-count { margin-left: auto; color: #8fa0b4; font-variant-numeric: tabular-nums; }
.fb-kinds { display: flex; gap: 5px; padding: 0 14px 8px; flex-wrap: wrap; }
.fb-kinds button { height: 24px; padding: 0 9px; color: #b9cde4; background: rgba(70, 120, 180, 0.1); border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 12px; font: 11px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fb-kinds button b { margin-left: 3px; color: #75879c; font-weight: 700; }
.fb-kinds button:hover { color: #fff; border-color: rgba(140, 196, 255, 0.5); }
.fb-kinds button.is-on { color: #1d1300; background: #f0c75e; border-color: #ffe08a; }
.fb-kinds button.is-on b { color: #5a4300; }
.fb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); gap: 10px; padding: 0 14px 12px; }
.fb-body:has([data-col="red"][hidden]) { grid-template-columns: minmax(0, 1fr) 340px; }
.fb-body:has([data-col="blue"][hidden]) { grid-template-columns: 340px minmax(0, 1fr); }
.fb-empty { grid-column: 1 / -1; margin: 60px auto; max-width: 560px; color: #8fa0b4; font-size: 13px; line-height: 1.5; text-align: center; }
.fb-compare { overflow-y: auto; padding: 10px 12px; background: linear-gradient(180deg, rgba(16, 24, 38, 0.92), rgba(10, 15, 23, 0.95)); border: 1px solid rgba(120, 184, 255, 0.18); border-radius: 10px; }
.fb-cmp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(120, 184, 255, 0.14); }
.fb-cmp-head b { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.fb-cmp-head span { color: #75879c; font-size: 10.5px; }
.fb-cmp { display: grid; grid-template-columns: 54px 1fr 74px 1fr 54px; align-items: center; gap: 6px; margin: 3px 0; }
.fb-cmp-n { color: #eaf4ff; font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.fb-cmp-n--b { text-align: right; color: #9fd2ff; }
.fb-cmp-n--r { color: #ffb0a8; }
.fb-cmp-bar { height: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; overflow: hidden; display: flex; }
.fb-cmp-bar--b { justify-content: flex-end; }
.fb-cmp-bar--b i { background: linear-gradient(90deg, rgba(95, 176, 255, 0.4), #5fb0ff); border-radius: 4px; }
.fb-cmp-bar--r i { background: linear-gradient(90deg, #ff5f52, rgba(255, 95, 82, 0.4)); border-radius: 4px; }
.fb-cmp-bar i { display: block; height: 100%; }
.fb-cmp-pic { display: flex; flex-direction: column; align-items: center; color: #dfe9f5; }
.fb-cmp-pic svg { width: 30px; height: 18px; }
.fb-cmp-pic small { color: #8fa0b4; font-size: 9.5px; white-space: nowrap; }
.fb-note { margin: 10px 0 0; color: #64768b; font-size: 10.5px; line-height: 1.4; }
.fb-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: rgba(12, 18, 28, 0.6); border: 1px solid rgba(120, 184, 255, 0.12); border-radius: 10px; }
.fb-col[hidden] { display: none; }
.fb-col-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(120, 184, 255, 0.12); }
.fb-col-head b { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.fb-col-head span { color: #8fa0b4; font-size: 11px; }
.fb-cards { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; gap: 8px; padding: 8px; }
.fb-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(24, 34, 50, 0.95), rgba(14, 20, 30, 0.95));
  border: 1px solid rgba(120, 184, 255, 0.16);
  border-left: 3px solid var(--sc);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.fb-card:hover { border-color: rgba(240, 199, 94, 0.55); border-left-color: var(--sc); box-shadow: 0 0 16px rgba(240, 199, 94, 0.18); transform: translateY(-1px); }
.fb-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fb-badge { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.fb-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fb-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-card-title b { overflow: hidden; color: #ffffff; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.fb-card-title small { overflow: hidden; color: #8fa0b4; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.fb-card-title em { color: #f0c75e; font-style: normal; }
.fb-men { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.fb-men b { color: #ffffff; font-size: 15px; font-variant-numeric: tabular-nums; }
.fb-men small { color: #75879c; font-size: 9.5px; }
.fb-kits { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fb-kit { display: inline-flex; align-items: center; gap: 3px; color: #dfe9f5; }
.fb-kit svg { width: 26px; height: 16px; }
.fb-kit b { color: #f0c75e; font-size: 11px; font-variant-numeric: tabular-nums; }
.fb-kit.is-set b { color: #ffffff; }
.fb-bars { display: flex; flex-direction: column; gap: 2px; }
.fb-bar { display: flex; height: 4px; overflow: hidden; border-radius: 2px; }
.fb-bar i { display: block; height: 100%; }
.fb-tags { display: flex; gap: 4px; }
.fm-tag--blue { color: #04121f; background: #5fb0ff; }
.fb-more { grid-column: 1 / -1; height: 30px; color: #dbe8f6; background: rgba(70, 120, 180, 0.12); border: 1px dashed rgba(120, 184, 255, 0.35); border-radius: 6px; cursor: pointer; }
.fb-more:hover { border-color: rgba(240, 199, 94, 0.7); color: #fff; }

/* ---- what it may have: map inspector, tips, tray, hangar ------------------------------------- */

.fm-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.fm-kititem { display: grid; grid-template-columns: 24px 1fr 18px auto 18px; align-items: center; gap: 4px; padding: 2px 4px; background: rgba(4, 8, 15, 0.45); border: 1px solid rgba(120, 184, 255, 0.12); border-radius: 4px; }
.fm-kititem.is-set { border-color: rgba(255, 255, 255, 0.35); }
.fm-kititem-pic { width: 24px; height: 14px; color: #dfe9f5; }
.fm-kititem-pic svg { width: 100%; height: 100%; }
.fm-kititem-name { overflow: hidden; color: #b9cde4; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.fm-kititem b { min-width: 34px; color: #f0c75e; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.fm-kititem.is-set b { color: #ffffff; }
.fm-kititem button { width: 18px; height: 18px; padding: 0; color: #dbe8f6; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(160, 180, 205, 0.25); border-radius: 3px; font-size: 11px; line-height: 1; cursor: pointer; }
.fm-kititem button:hover { border-color: #f0c75e; color: #fff; }
.fm-fnbar { display: flex; height: 8px; margin: 4px 0; overflow: hidden; border-radius: 4px; }
.fm-fnbar i { display: block; height: 100%; }
.fm-fnlegend { display: flex; flex-wrap: wrap; gap: 3px 9px; color: #8fa0b4; font-size: 10px; }
.fm-fnlegend span { display: inline-flex; align-items: center; gap: 4px; }
.fm-fnlegend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.fm-tip-kit { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 6px 0 2px; }
.fm-tip-kit span { display: inline-flex; align-items: center; gap: 2px; color: #dfe9f5; }
.fm-tip-kit svg { width: 24px; height: 14px; }
.fm-tip-kit b { color: #f0c75e; font-size: 10.5px; }
.fm-card-kit { display: flex !important; align-items: center; justify-content: center; gap: 3px; }
.fm-card-kit i { display: inline-block; width: 16px; height: 10px; color: #bfe0ff; }
.fm-card-kit i svg { width: 100%; height: 100%; }
.fh-kits { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; align-content: start; max-height: 150px; overflow-y: auto; min-width: 520px; }
.fh-kit { display: grid; grid-template-columns: 30px 1fr 22px 52px 22px; align-items: center; gap: 5px; padding: 3px 6px; background: rgba(4, 8, 15, 0.5); border: 1px solid rgba(160, 180, 205, 0.18); border-radius: 5px; }
.fh-kit.is-set { border-color: rgba(255, 255, 255, 0.45); }
.fh-kit.is-flash { animation: fh-kit-flash 1.4s ease-out; }
@keyframes fh-kit-flash { 0%, 30% { border-color: #f0c75e; box-shadow: 0 0 14px rgba(240, 199, 94, 0.55); } 100% { box-shadow: none; } }
.fh-kit-pic { width: 30px; height: 18px; color: #dfe9f5; }
.fh-kit-pic svg { width: 100%; height: 100%; }
.fh-kit-name { overflow: hidden; color: #cfe0f2; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.fh-kit b { color: #f0c75e; text-align: center; font-variant-numeric: tabular-nums; }
.fh-kit.is-set b { color: #ffffff; }
.fh-kit button { width: 22px; height: 20px; color: #dbe8f6; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(160, 180, 205, 0.25); border-radius: 4px; cursor: pointer; }
.fh-kit button:hover { border-color: #f0c75e; color: #fff; }
.fh-kit-add { height: 28px; color: #dbe8f6; background: rgba(4, 8, 15, 0.6); border: 1px dashed rgba(240, 199, 94, 0.4); border-radius: 5px; font: 11px "Segoe UI", system-ui, sans-serif; }
.fh-ttx-kind { margin-left: 4px; color: #f0c75e; letter-spacing: 0; text-transform: none; font-weight: 600; }
.fh-ttx-kit { display: flex; flex-wrap: wrap; gap: 3px 9px; margin-top: 4px; }
.fh-ttx-kit span { display: inline-flex; align-items: center; gap: 3px; color: #dfe9f5; }
.fh-ttx-kit svg { width: 26px; height: 16px; }
.fh-ttx-kit b { color: #f0c75e; font-size: 11px; }


/* ---- round 8: the globe up front, readable formation cards, the journal ------------------- */

.fm-globe {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0 4px;
  padding: 8px 12px;
  color: #04121f;
  text-align: left;
  background: linear-gradient(180deg, #8fd0ff, #4f9ee8);
  border: 1px solid #bfe4ff;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(95, 176, 255, 0.35);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}
.fm-globe:hover { box-shadow: 0 0 24px rgba(95, 176, 255, 0.6); transform: translateY(-1px); }
.fm-globe svg { flex: none; width: 26px; height: 26px; }
.fm-globe span { display: flex; flex-direction: column; line-height: 1.15; }
.fm-globe b { font-size: 13px; letter-spacing: 0.02em; }
.fm-globe small { color: #10304d; font-size: 10.5px; }
.fm-linkbtn { padding: 0; color: #f0c75e; background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.fm-btn[disabled] { opacity: 0.4; cursor: default; }
.fm-evtext { margin: 8px 0; color: #dbe8f6; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.fm-evtext a, .fj-main a { color: #8fd0ff; }

/* formation cards in the tray: badge on the left, words you can read */
.fm-fcard {
  flex: none;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 8px;
  width: 214px;
  min-height: 64px;
  padding: 5px 9px 5px 6px;
  color: #dbe8f6;
  background: linear-gradient(180deg, rgba(30, 44, 66, 0.92), rgba(15, 22, 34, 0.94));
  border: 1px solid color-mix(in srgb, var(--zc, #6eb0ff) 45%, transparent);
  border-left: 3px solid var(--zc, #6eb0ff);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.fm-fcard:hover { border-color: #f0c75e; box-shadow: 0 0 14px rgba(240, 199, 94, 0.3); transform: translateY(-1px); }
.fm-fcard.is-on { border-color: #f0c75e; box-shadow: 0 0 16px rgba(240, 199, 94, 0.45); }
.fm-fcard-pic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.fm-fcard-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fm-fcard-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fm-fcard-txt b { overflow: hidden; color: #ffffff; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.fm-fcard-txt small { overflow: hidden; color: #9fb3c9; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.fm-fcard-txt em { display: flex; align-items: center; gap: 2px; color: #f0c75e; font-style: normal; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.fm-fcard-txt em i { display: inline-block; width: 18px; height: 11px; color: #cfe0f2; }
.fm-fcard-txt em i svg { width: 100%; height: 100%; }

/* ---- the journal ------------------------------------------------------------------------- */

.fs-journal { position: absolute; inset: 0; }
.fs-journal[hidden] { display: none; }
.fj { display: flex; flex-direction: column; color: #dbe8f6; font: 12px "Segoe UI", system-ui, sans-serif; background: #0a0f17; }
.fj-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid rgba(120, 184, 255, 0.12); }
.fj-find { width: 300px; height: 28px; padding: 0 10px; color: #fff; background: rgba(4, 8, 15, 0.7); border: 1px solid rgba(120, 184, 255, 0.28); border-radius: 6px; font: 12px "Segoe UI", system-ui, sans-serif; outline: none; }
.fj-find:focus { border-color: rgba(240, 199, 94, 0.7); }
.fj-count { margin-left: auto; color: #8fa0b4; font-variant-numeric: tabular-nums; }
.fj-body { flex: 1; min-height: 0; overflow-y: auto; }
.fj-list { max-width: 1100px; margin: 0 auto; padding: 6px 18px 30px; }
.fj-empty { margin: 60px auto; max-width: 560px; color: #8fa0b4; font-size: 13px; text-align: center; line-height: 1.5; }
.fj-group { position: sticky; top: 0; z-index: 1; margin: 14px 0 6px; padding: 6px 0; color: #f0c75e; background: #0a0f17; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid rgba(240, 199, 94, 0.25); }
.fj-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; margin: 6px 0; padding: 10px 12px; background: linear-gradient(180deg, rgba(22, 32, 48, 0.92), rgba(13, 19, 29, 0.94)); border: 1px solid rgba(120, 184, 255, 0.14); border-left: 3px solid #5d6b7a; border-radius: 8px; }
.fj-item--new { border-left-color: #ffd56b; box-shadow: 0 0 14px rgba(255, 213, 107, 0.12); }
.fj-item--recent { border-left-color: #eaf2fb; }
.fj-item--old { border-left-color: #8c99a8; }
.fj-item.is-focus { border-color: #f0c75e; box-shadow: 0 0 18px rgba(240, 199, 94, 0.35); }
.fj-date { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.fj-date b { color: #ffffff; font-size: 22px; font-variant-numeric: tabular-nums; }
.fj-date span { margin-top: 3px; color: #9fb3c9; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.fj-main { min-width: 0; }
.fj-main h4 { margin: 0 0 4px; color: #ffffff; font-size: 13px; line-height: 1.3; }
.fj-main p { margin: 0 0 6px; color: #b9cde4; font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.fj-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: #8fa0b4; font-size: 10.5px; }
.fj-kind { padding: 0 6px; color: #1d1300; background: #f0c75e; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fj-how { color: #64768b; }
.fj-go { display: flex; flex-direction: column; gap: 4px; }
.fj-dated { margin: 0 4px; }

/* the globe's badge / pin caption is a body-level tip: not over Forces or Node Studio */
body.forces-open .formation-icon-label,
body.mapgraph-open .formation-icon-label { display: none !important; }

/* ---- round the pick: roads, bridges, towns ------------------------------------------------- */
.fm-infra { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 8px; color: #cfdbe8; font-size: 11.5px; line-height: 1.35; }
.fm-infra > div > i[class] { display: inline-block; margin-right: 7px; vertical-align: middle; }
.fm-infra > div > i:not([class]) { color: #8fa0b4; font-style: normal; }
.fm-infra-road { width: 16px; height: 3px; background: #f1dca0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(6, 10, 16, 0.8); }
.fm-infra-bridge { width: 16px; height: 4px; background: #7fe0ff; border-radius: 2px; }
.fm-infra-town { width: 9px; height: 9px; border: 1px solid rgba(205, 220, 240, 0.7); border-radius: 50%; background: rgba(205, 220, 240, 0.2); }

/* ---- Armies: every country's armed forces (src/forces/force-armies.js) ---------------------- */
.fs-armies { position: absolute; inset: 0; }
.fs-armies[hidden] { display: none; }
.fa { --fa-card: linear-gradient(180deg, rgba(20, 30, 46, 0.94), rgba(12, 18, 28, 0.96)); --fa-line: rgba(120, 184, 255, 0.14); --fa-mute: #8fa0b4; --fa-dim: #64768b;
  display: flex; flex-direction: column; color: #dbe8f6; font: 12px "Segoe UI", system-ui, sans-serif; background: #0a0f17; }
.fa-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid rgba(120, 184, 255, 0.12); }
.fa-mode button { padding: 0 12px; }
.fa-find { width: 340px; height: 28px; padding: 0 10px; color: #fff; background: rgba(4, 8, 15, 0.7); border: 1px solid rgba(120, 184, 255, 0.28); border-radius: 6px; font: 12px "Segoe UI", system-ui, sans-serif; outline: none; }
.fa-find:focus { border-color: rgba(240, 199, 94, 0.7); }
.fa-count { margin-left: auto; color: var(--fa-mute); font-variant-numeric: tabular-nums; }
.fa-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 1fr; }
.fa-body > .fa-sheet, .fa-body > .fa-map { grid-column: 2; grid-row: 1; }
.fa-none { color: var(--fa-mute); padding: 10px 0; }

/* the country list */
.fa-list { grid-row: 1; overflow-y: auto; padding: 6px; border-right: 1px solid rgba(120, 184, 255, 0.12); background: rgba(8, 12, 19, 0.7); }
.fa-li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 7px; text-align: left; font: inherit; cursor: pointer; }
.fa-li:hover { background: rgba(61, 139, 255, 0.1); border-color: rgba(120, 184, 255, 0.2); }
.fa-li.is-on { background: linear-gradient(90deg, rgba(240, 199, 94, 0.16), rgba(240, 199, 94, 0.03)); border-color: rgba(240, 199, 94, 0.5); }
.fa-li-code { color: #75879c; font: 700 10px Consolas, ui-monospace, monospace; letter-spacing: 0.04em; }
.fa-li.is-on .fa-li-code { color: #f0c75e; }
.fa-li-main { min-width: 0; display: flex; flex-direction: column; }
.fa-li-main b { overflow: hidden; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.fa-li-main small { overflow: hidden; color: #75879c; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.fa-li-main .fa-li-hint { color: #f0c75e; }
.fa-li-n { position: relative; min-width: 62px; padding-bottom: 4px; color: #b9cde4; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.fa-li-n i { position: absolute; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(95, 176, 255, 0.25), #5fb0ff); border-radius: 1px; }
.fa-li.is-on .fa-li-n i { background: linear-gradient(90deg, rgba(240, 199, 94, 0.3), #f0c75e); }

/* the sheet */
.fa-sheet { min-width: 0; overflow-y: auto; padding: 16px 22px 34px; }
.fa-sheet[hidden] { display: none; }
.fa-wrap { max-width: 1560px; margin: 0 auto; }
.fa-empty { max-width: 620px; margin: 60px auto; color: #b9cde4; line-height: 1.55; }
.fa-empty h3 { margin: 0 0 8px; color: #fff; font-size: 16px; }
.fa-empty code, .fa-empty pre { color: #f0c75e; font: 11.5px Consolas, ui-monospace, monospace; }
.fa-empty pre { padding: 10px 12px; background: rgba(4, 8, 15, 0.8); border: 1px solid rgba(240, 199, 94, 0.3); border-radius: 6px; white-space: pre-wrap; }

.fa-head { padding: 16px 18px; background: var(--fa-card); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 12px; }
.fa-title { display: flex; align-items: center; gap: 12px; }
.fa-title h2 { margin: 0; color: #fff; font-size: 22px; letter-spacing: 0.01em; }
.fa-title small { color: var(--fa-mute); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.fa-code { padding: 4px 8px; color: #1d1300; background: linear-gradient(180deg, #ffd56b, #e8a92e); border-radius: 5px; font: 800 12px Consolas, ui-monospace, monospace; box-shadow: 0 0 12px rgba(240, 199, 94, 0.35); }
.fa-head-acts { display: flex; gap: 6px; margin-left: auto; }
.fa-people { display: flex; flex-wrap: wrap; gap: 30px; margin: 14px 0 10px; }
.fa-pp { display: flex; flex-direction: column; }
.fa-pp b { color: #fff; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.fa-pp:first-child b { color: #f0c75e; text-shadow: 0 0 14px rgba(240, 199, 94, 0.3); }
.fa-pp small { color: var(--fa-mute); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.fa-split { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: 4px; }
.fa-split i { display: block; min-width: 2px; }
.fa-split-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; color: #b9cde4; font-size: 11px; }
.fa-split-key span { display: inline-flex; align-items: center; gap: 5px; }
.fa-split-key i { width: 8px; height: 8px; border-radius: 2px; }
.fa-split-key b { color: #fff; font-variant-numeric: tabular-nums; }
.fa-split-key small { color: #75879c; }
.fa-note { margin: 8px 0 4px; color: #9fb3c9; font-size: 11.5px; line-height: 1.5; max-width: 110ch; }

/* headline kit */
.fa-kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; margin: 12px 0; }
.fa-kit { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 9px 11px; color: #dfe9f5; background: rgba(14, 22, 34, 0.9); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 9px; text-align: left; font: inherit; }
button.fa-kit { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
button.fa-kit:hover { border-color: rgba(240, 199, 94, 0.55); box-shadow: 0 0 14px rgba(240, 199, 94, 0.16); }
.fa-kit svg { grid-row: 1 / 3; width: 34px; height: 21px; color: #9fd2ff; }
.fa-kit b { color: #f0c75e; font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fa-kit small { color: var(--fa-mute); font-size: 10px; line-height: 1.15; }
.fa-kits--sm { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 8px 0 4px; }
.fa-kits--sm .fa-kit { padding: 6px 9px; grid-template-columns: 26px 1fr; background: rgba(10, 16, 26, 0.7); }
.fa-kits--sm .fa-kit svg { width: 26px; height: 16px; }
.fa-kits--sm .fa-kit b { font-size: 14px; }

/* tabs */
.fa-tabs { display: flex; gap: 4px; margin: 16px 0 12px; border-bottom: 1px solid var(--fa-line); }
.fa-tabs button { position: relative; height: 34px; padding: 0 16px; color: #9fb3c9; background: none; border: 0; font: 700 11.5px "Segoe UI", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.fa-tabs button:hover { color: #fff; }
.fa-tabs button.is-on { color: #fff; }
.fa-tabs button.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: #f0c75e; box-shadow: 0 0 10px rgba(240, 199, 94, 0.6); border-radius: 2px; }
.fa-tabs b { margin-left: 5px; padding: 0 6px; color: #1d1300; background: rgba(240, 199, 94, 0.85); border-radius: 8px; font-size: 10px; letter-spacing: 0; }

/* forces: services navigator + one service */
.fa-forces { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; }
.fa-snav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 160px); overflow-y: auto; padding: 6px; background: rgba(10, 16, 26, 0.75); border: 1px solid var(--fa-line); border-radius: 10px; }
.fa-sn { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 6px 8px 6px calc(8px + var(--d) * 14px); color: #b9cde4; background: none; border: 0; border-left: 2px solid transparent; border-radius: 6px; text-align: left; font: inherit; cursor: pointer; }
.fa-sn span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fa-sn[style*="--d:0"] span { color: #eaf2fb; font-weight: 700; }
.fa-sn small { color: var(--fa-dim); font-variant-numeric: tabular-nums; }
.fa-sn:hover { background: rgba(61, 139, 255, 0.1); }
.fa-sn.is-on { background: rgba(240, 199, 94, 0.12); border-left-color: #f0c75e; }
.fa-sn.is-on span { color: #fff; }
.fa-sn.is-on small { color: #f0c75e; }
.fa-sv { min-width: 0; }
.fa-sv-head .fa-crumb { display: block; margin-bottom: 2px; color: var(--fa-dim); font-size: 10.5px; letter-spacing: 0.04em; }
.fa-sv-head > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fa-sv-head h3 { margin: 0; color: #fff; font-size: 19px; }
.fa-str { color: #f0c75e; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-sv-head small { color: var(--fa-dim); font-size: 11px; }
.fa-sect { margin: 20px 0 10px; padding-bottom: 6px; color: #9fd2ff; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--fa-line); }

/* cards in columns, packed like a wall */
.fa-cards { columns: 360px; column-gap: 12px; }
.fa-cards--wide { columns: 420px; }
.fa-card { break-inside: avoid; margin: 0 0 12px; padding: 10px 12px 10px; background: var(--fa-card); border: 1px solid var(--fa-line); border-radius: 10px; }
.fa-card > header { display: flex; align-items: baseline; gap: 8px; margin: -2px 0 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(120, 184, 255, 0.1); }
.fa-card > header > span { flex: 1; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.fa-card > header > b { color: #f0c75e; font-size: 14px; font-variant-numeric: tabular-nums; }
.fa-card-note { margin: -2px 0 6px; color: var(--fa-mute); font-size: 11px; }
.fa-cat.is-flash { animation: fa-flash 1.4s ease-out; }
@keyframes fa-flash { 0% { box-shadow: 0 0 0 2px rgba(240, 199, 94, 0.7), 0 0 26px rgba(240, 199, 94, 0.35); } 100% { box-shadow: none; } }

/* a type line and its models */
.fa-tr { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; margin-top: 6px; padding: 3px 0 2px calc(var(--d) * 14px); }
.fa-tr + .fa-tr { margin-top: 2px; }
.fa-tcode { padding: 0 5px; color: #9fd2ff; background: rgba(61, 139, 255, 0.14); border-radius: 3px; font: 700 10px Consolas, ui-monospace, monospace; }
.fa-tname { min-width: 0; color: #c9d8ea; font-size: 11.5px; }
.fa-tname small { color: var(--fa-dim); }
.fa-tn { color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fa-tn.is-sum { color: #9fb3c9; }
.fa-ml { margin: 3px 0 2px; padding: 0; list-style: none; }
.fa-mi { display: grid; grid-template-columns: 46px 1fr; gap: 6px; padding: 2px 0; border-top: 1px dashed rgba(120, 184, 255, 0.07); font-size: 11.5px; line-height: 1.35; }
.fa-mi:first-child { border-top: 0; }
.fa-mi > b { color: #f0c75e; font-variant-numeric: tabular-nums; text-align: right; }
.fa-mi > span { min-width: 0; color: #e6eef8; }
.fa-mi small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; color: var(--fa-dim); font-size: 10.5px; }
.fa-mi.has-more { cursor: pointer; }
.fa-mi.has-more:hover small { color: #8fa0b4; }
.fa-mi.is-open small { display: block; -webkit-line-clamp: unset; }
.fa-mi.is-doubt > span { color: #b9c4cf; }
.fa-mi sup { color: #ff9f43; }
.fa-mi--note { grid-template-columns: 1fr; }
.fa-mi--note span { color: var(--fa-mute); font-style: italic; }

/* units */
.fa-ul { margin: 0; padding: 0; list-style: none; }
.fa-ul li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 2px 0; font-size: 11.5px; line-height: 1.38; }
.fa-ul li > b { color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.fa-ul li > span { min-width: 0; color: #dbe8f6; }
.fa-ul li em { color: #f0c75e; font-style: normal; font-weight: 600; }
.fa-ul li small { display: block; color: var(--fa-dim); font-size: 10.5px; }
.fa-ul--plain li { grid-template-columns: 1fr; padding-left: 12px; position: relative; }
.fa-ul--plain li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px; background: rgba(120, 184, 255, 0.6); transform: rotate(45deg); }
.fa-grp { margin: 6px 0 2px; }
.fa-grp h6 { margin: 0 0 2px; color: #f0c75e; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* parts of a service */
.fa-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fa-part { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; color: inherit; background: var(--fa-card); border: 1px solid var(--fa-line); border-left: 3px solid #5fb0ff; border-radius: 9px; text-align: left; font: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.fa-part:hover { border-color: rgba(240, 199, 94, 0.55); box-shadow: 0 0 14px rgba(240, 199, 94, 0.14); }
.fa-part b { color: #fff; font-size: 12.5px; }
.fa-part span { color: #f0c75e; font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-part small { grid-column: 1 / -1; color: var(--fa-dim); font-size: 10.5px; }

/* abroad / hosted */
.fa-pane-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #b9cde4; }
.fa-pane-head b { color: #f0c75e; font-variant-numeric: tabular-nums; }
.fa-pane-head .fm-btn { margin-left: auto; }
.fa-dep { border-left: 3px solid #f0c75e; }
.fa-dep > header { font-size: 13.5px; }
.fa-dep > header > b { margin-left: auto; }
.fa-link { padding: 0; color: #fff; background: none; border: 0; border-bottom: 1px dashed rgba(240, 199, 94, 0.6); font: 700 13px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fa-link:hover { color: #f0c75e; }
.fa-mis + .fa-mis { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(120, 184, 255, 0.12); }
.fa-mis-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 3px; }
.fa-org { padding: 0 6px; color: #cfe7ff; background: rgba(61, 139, 255, 0.22); border-radius: 3px; font-size: 10.5px; font-weight: 700; }
.fa-org--svc { color: #1d1300; background: rgba(240, 199, 94, 0.8); }
.fa-mname { color: #dbe8f6; font-size: 11.5px; }
.fa-pers { margin-left: auto; color: #f0c75e; font-variant-numeric: tabular-nums; }
.fa-mis-head small { color: var(--fa-dim); }
.fa-mis-part { margin: 6px 0 2px 2px; padding-left: 10px; border-left: 2px solid rgba(240, 199, 94, 0.35); }
.fa-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.fa-chips span { padding: 0 6px; color: #dfe9f5; background: rgba(70, 120, 180, 0.12); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 4px; font-size: 10.5px; line-height: 1.6; }
.fa-places { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fa-place { padding: 1px 8px; color: #ffe8a8; background: rgba(240, 199, 94, 0.1); border: 1px solid rgba(240, 199, 94, 0.3); border-radius: 10px; font-size: 10.5px; }
.fa-place::before { content: "\25C6"; margin-right: 4px; color: #f0c75e; font-size: 8px; }
.fa mark { color: #1d1300; background: #f0c75e; border-radius: 2px; }
.fa-src { margin-top: 22px; padding-top: 8px; color: var(--fa-dim); font-size: 10.5px; border-top: 1px solid rgba(120, 184, 255, 0.1); }

@media (max-width: 1100px) {
  .fa-forces { grid-template-columns: 1fr; }
  .fa-snav { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
  .fa-sn { width: auto; padding-left: 8px; }
}

/* ---- the bases map (src/forces/armies-map.js) ---- */
.fam { position: relative; min-width: 0; overflow: hidden; background: #05080e; }
.fam[hidden] { display: none; }
.fam-canvas { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; }
.fam-canvas:active { cursor: grabbing; }
.fam-bar { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.fam-bar > * { pointer-events: auto; }
.fam-bar .fm-seg button { height: 26px; padding: 0 12px; }
.fam-bar .fm-seg button[disabled] { opacity: 0.4; cursor: default; }
.fam-small { margin: 0; padding: 4px 9px; background: rgba(8, 13, 22, 0.85); border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 7px; align-items: center; }
.fam-sum { margin-left: auto; padding: 5px 10px; color: #cfe0f2; background: rgba(8, 13, 22, 0.85); border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 7px; font-variant-numeric: tabular-nums; }
.fam-legend { position: absolute; left: 12px; bottom: 44px; display: flex; flex-direction: column; gap: 2px; max-width: 240px; padding: 0; }
.fam-legend:not(:empty) { padding: 8px 10px; background: rgba(8, 13, 22, 0.88); border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 9px; }
.fam-legend button, .fam-legend span { display: flex; align-items: center; gap: 7px; padding: 2px 4px; color: #dbe8f6; background: none; border: 0; border-radius: 4px; font: 11px "Segoe UI", system-ui, sans-serif; text-align: left; cursor: pointer; }
.fam-legend span { color: var(--fa-mute, #8fa0b4); cursor: default; }
.fam-legend button:hover { background: rgba(61, 139, 255, 0.15); }
.fam-legend i { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.fam-key { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 14px; padding: 5px 10px; color: #b9cde4; background: rgba(8, 13, 22, 0.85); border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 7px; font-size: 10.5px; }
.fam-key span { display: inline-flex; align-items: center; gap: 6px; }
.fam-k-base { width: 8px; height: 8px; background: #f0c75e; transform: rotate(45deg); }
.fam-k-pres { width: 10px; height: 10px; background: rgba(240, 199, 94, 0.75); border-radius: 50%; }
.fam-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.fam-zoom button { width: 30px; height: 30px; color: #dbe8f6; background: rgba(8, 13, 22, 0.88); border: 1px solid rgba(120, 184, 255, 0.28); border-radius: 7px; font: 700 15px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fam-zoom button:hover { color: #fff; border-color: rgba(240, 199, 94, 0.6); }
.fam-tip { position: absolute; z-index: 3; max-width: 320px; padding: 5px 9px; color: #dbe8f6; background: rgba(6, 10, 16, 0.94); border: 1px solid rgba(240, 199, 94, 0.4); border-radius: 6px; font-size: 11px; pointer-events: none; white-space: nowrap; }
.fam-tip[hidden] { display: none; }
.fam-tip b { color: #fff; }
.fam-card { position: absolute; z-index: 2; top: 54px; right: 12px; bottom: 54px; width: 400px; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(18, 27, 42, 0.97), rgba(10, 15, 24, 0.98)); border: 1px solid rgba(240, 199, 94, 0.35); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
.fam-card[hidden] { display: none; }
.fam-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid rgba(120, 184, 255, 0.14); }
.fam-card-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fam-card-head b { color: #fff; font-size: 14px; }
.fam-card-head small { color: #8fa0b4; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.fam-x { width: 26px; height: 26px; color: #9fb3c9; background: none; border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 6px; font-size: 16px; cursor: pointer; }
.fam-x:hover { color: #fff; }
.fam-card-body { flex: 1; overflow-y: auto; padding: 8px 12px 12px; }
.fam-entry { margin: 4px 0 10px; padding: 8px 10px; background: rgba(12, 19, 30, 0.85); border: 1px solid rgba(120, 184, 255, 0.12); border-left: 3px solid var(--oc); border-radius: 8px; }
.fam-entry-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.fam-entry-head > b { margin-left: auto; color: #f0c75e; font-variant-numeric: tabular-nums; }
.fam-entry-head small { color: #8fa0b4; }
.fam-owner { padding: 0 5px; color: #05080e; background: var(--oc); border-radius: 3px; font: 800 10px Consolas, ui-monospace, monospace; }
.fam-mis + .fam-mis { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(120, 184, 255, 0.12); }
.fam-mis-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: #dbe8f6; font-size: 11.5px; }
.fam-mis-head > b { margin-left: auto; color: #f0c75e; font-variant-numeric: tabular-nums; }
.fam-part { margin: 5px 0 0 2px; padding-left: 9px; border-left: 2px solid rgba(240, 199, 94, 0.35); }
.fam-ul { margin: 3px 0 0; padding: 0; list-style: none; }
.fam-ul li { position: relative; padding: 1px 0 1px 11px; color: #cfe0f2; font-size: 11px; line-height: 1.38; }
.fam-ul li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 4px; height: 4px; background: rgba(120, 184, 255, 0.6); transform: rotate(45deg); }
.fam-kit { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.fam-kit span { padding: 0 5px; color: #dfe9f5; background: rgba(70, 120, 180, 0.12); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 4px; font-size: 10.5px; }

/* Forces: the simulation switch in the window's header (same as the dock's LIVE). */
.fw-sim { gap: 6px; }
.fw-sim svg { width: 15px; height: 15px; }
.fw-sim .fw-sim-state { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(220, 228, 240, 0.7); }
.fw-sim.is-live { border-color: rgba(96, 214, 150, 0.55); box-shadow: 0 0 0 1px rgba(96, 214, 150, 0.18), 0 0 14px rgba(96, 214, 150, 0.18); }
.fw-sim.is-live .fw-sim-state { background: rgba(96, 214, 150, 0.22); color: #9df0bf; }

/* Forces map: Move mode (drag points and badges) and a zone's size row. */
.fm.is-moving .fm-canvas { cursor: move; }
.fm-tog--move:has(input:checked) { color: #ffd479; }
.fm-zsize { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.fm-zsize .fm-btn { min-width: 30px; justify-content: center; font-size: 15px; font-weight: 800; }
.fm-zsize b { flex: 1; text-align: center; font-size: 12px; }

/* Forces: Export / Import of this map's Forces (the file menu in the header). */
.fw-file { position: relative; display: inline-flex; }
.fw-file svg { width: 15px; height: 15px; }
.fw-file .mg-btn.is-on { color: #eaf4ff; border-color: rgba(240, 199, 94, 0.6); background: rgba(240, 199, 94, 0.14); }
.fw-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 290px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(16, 25, 40, 0.98), rgba(10, 16, 27, 0.98));
  border: 1px solid rgba(240, 199, 94, 0.32);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: mg-pop 0.16s cubic-bezier(.2, .9, .3, 1.1);
}
.fw-menu[hidden] { display: none; }
.fw-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 9px;
  color: #dfe9f5;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font: 12px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.fw-menu button:hover, .fw-menu button:focus-visible { background: rgba(240, 199, 94, 0.12); outline: none; }
.fw-menu button b { color: #f4f8ff; font-weight: 700; }
.fw-menu button small { color: rgba(200, 214, 232, 0.66); font-size: 11px; line-height: 1.3; }
.fw-menu-note { margin: 4px 9px 3px; padding-top: 6px; color: rgba(200, 214, 232, 0.55); font-size: 10.5px; line-height: 1.35; border-top: 1px solid rgba(120, 184, 255, 0.14); }

/* ---- Command: everyone who moves by themselves (src/forces/force-command.js) ---------- */

.fm-cmd {
  position: absolute;
  left: 10px;
  top: calc(var(--top-h, 34px) + 18px);
  bottom: calc(var(--tray-h, 112px) + 16px);
  width: 284px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}
.fm-cmd[hidden] { display: none; }
.fm-cmd.is-folded { width: 36px; }
.fm-cmd-main,
.fm-cmd-strip {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.94), rgba(9, 14, 24, 0.95));
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
/* the whole panel scrolls (its head sticks), so a scrollbar narrows the head
   and the rows alike and Blue / Red stay over their switches */
.fm-cmd-main { min-height: 0; max-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(120, 184, 255, 0.3) transparent; }
.fm-cmd.is-folded .fm-cmd-main { display: none; }

/* folded: a strip of glyphs, each with its state */
.fm-cmd-strip { display: none; flex-direction: column; align-items: center; gap: 3px; width: 36px; padding: 5px 0; }
.fm-cmd.is-folded .fm-cmd-strip { display: flex; }
.fm-cmd-strip-btn { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #9fb3c9; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.fm-cmd-strip-btn:hover { color: #eaf4ff; background: rgba(61, 139, 255, 0.2); }
.fm-cmd-strip-btn svg { width: 16px; height: 16px; }
.fm-cmd-strip-btn i { position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; background: #3a4656; box-shadow: 0 0 0 1.5px rgba(9, 14, 24, 0.95); }
.fm-cmd-strip-btn i[data-state="on"] { background: #4ee6b4; }
.fm-cmd-strip-btn i[data-state="half"] { background: linear-gradient(90deg, #4ee6b4 50%, #3a4656 50%); }
.fm-cmd.is-stopped .fm-cmd-strip-btn i[data-state="on"],
.fm-cmd.is-stopped .fm-cmd-strip-btn i[data-state="half"] { background: #6b6650; }
.fm-cmd-strip-btn i[data-strip-dot="live"][data-state="off"] { background: #ff7a6c; }

/* head and rows share one grid, so Blue and Red sit over their switches */
.fm-cmd-head,
.fm-cmd-line { display: grid; column-gap: 4px; align-items: center; padding-left: 8px; padding-right: 8px; }
.fm-cmd-head { position: sticky; top: 0; z-index: 1; grid-template-columns: 1fr 48px 48px 22px; padding-top: 8px; padding-bottom: 6px; background: rgba(13, 20, 33, 0.98); border-bottom: 1px solid rgba(120, 184, 255, 0.14); }
.fm-cmd-head > b { padding-left: 4px; color: #eaf4ff; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.fm-cmd-cols { display: contents; }
.fm-cmd-col { height: 20px; padding: 0; color: var(--sc); background: transparent; border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); border-radius: 5px; font: 700 10px "Segoe UI", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.fm-cmd-col[data-state="on"] { background: color-mix(in srgb, var(--sc) 20%, transparent); }
.fm-cmd-col[data-state="half"] { background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 20%, transparent) 50%, transparent 50%); }
.fm-cmd-col[data-state="off"] { color: #66778b; border-color: rgba(120, 184, 255, 0.18); }
.fm-cmd-col:hover { border-color: var(--sc); }
.fm-cmd-fold { width: 22px; height: 20px; padding: 0; color: #8fa0b4; background: transparent; border: 1px solid rgba(120, 184, 255, 0.2); border-radius: 5px; cursor: pointer; }
.fm-cmd-fold:hover { color: #fff; border-color: rgba(140, 196, 255, 0.6); }

/* the master switch */
.fm-cmd-master { display: flex; align-items: center; gap: 9px; margin: 8px; padding: 7px 10px; color: #dbe8f6; text-align: left; background: rgba(255, 90, 80, 0.1); border: 1px solid rgba(255, 120, 110, 0.4); border-radius: 8px; font: inherit; cursor: pointer; }
.fm-cmd-master.is-live { background: rgba(78, 230, 180, 0.08); border-color: rgba(78, 230, 180, 0.42); }
.fm-cmd-master:hover { filter: brightness(1.15); }
.fm-cmd-master-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: #ffb3a9; background: rgba(255, 90, 80, 0.18); border-radius: 50%; }
.fm-cmd-master.is-live .fm-cmd-master-ico { color: #4ee6b4; background: rgba(78, 230, 180, 0.16); box-shadow: 0 0 10px rgba(78, 230, 180, 0.35); }
.fm-cmd-master-ico svg { width: 14px; height: 14px; }
.fm-cmd-master-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fm-cmd-master-copy b { color: #eaf4ff; font-size: 12px; }
.fm-cmd-master-copy small { color: #8fa0b4; font-size: 10px; line-height: 1.3; }
.fm-cmd-master em { color: #ff8a7a; font: 800 10px "Segoe UI", system-ui, sans-serif; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.fm-cmd-master.is-live em { color: #4ee6b4; }

.fm-cmd-rows { padding-bottom: 4px; }
.fm-cmd-row { border-top: 1px solid rgba(120, 184, 255, 0.1); }
.fm-cmd-row:hover { background: rgba(61, 139, 255, 0.05); }
.fm-cmd-row.is-open { background: rgba(61, 139, 255, 0.07); }
.fm-cmd-line { grid-template-columns: 20px 1fr 48px 48px 22px; padding-top: 6px; padding-bottom: 6px; }
.fm-cmd-line .fm-cmd-sw--wide { grid-column: span 2; }
.fm-cmd-eye { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; color: #8fa0b4; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.fm-cmd-eye:hover { color: #eaf4ff; }
.fm-cmd-eye.is-off { color: #4c5b6c; }
.fm-cmd-eye svg { width: 14px; height: 14px; }
.fm-cmd-name { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0; color: #dbe8f6; text-align: left; background: transparent; border: 0; cursor: pointer; }
.fm-cmd-name b { overflow: hidden; font: 600 11.5px "Segoe UI", system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.fm-cmd-glyph { flex: none; width: 16px; height: 16px; color: #9fd2ff; }
.fm-cmd-glyph svg { display: block; width: 100%; height: 100%; }
.fm-cmd-sw { display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 6px; color: #66778b; background: rgba(6, 10, 18, 0.6); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 11px; font: 700 10.5px "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.fm-cmd-sw i { flex: none; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; }
.fm-cmd-sw em { overflow: hidden; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.fm-cmd-sw:hover { border-color: rgba(140, 196, 255, 0.55); }
.fm-cmd-sw.is-on { color: #eaf4ff; background: color-mix(in srgb, var(--sc, #4ee6b4) 15%, rgba(6, 10, 18, 0.6)); border-color: color-mix(in srgb, var(--sc, #4ee6b4) 60%, transparent); }
.fm-cmd-sw.is-on i { background: var(--sc, #4ee6b4); border-color: var(--sc, #4ee6b4); box-shadow: 0 0 6px var(--sc, #4ee6b4); }
.fm-cmd.is-stopped .fm-cmd-sw.is-on { opacity: 0.6; }
.fm-cmd-more { width: 22px; height: 22px; padding: 0; color: #8fa0b4; background: transparent; border: 0; cursor: pointer; transition: transform 0.15s; }
.fm-cmd-row.is-open .fm-cmd-more { color: #eaf4ff; transform: rotate(90deg); }

/* a row's knobs */
.fm-cmd-body { padding: 0 12px 10px 32px; }
.fm-cmd-body[hidden] { display: none; }
.fm-cmd-what { margin: 0 0 6px; color: #75879c; font-size: 10.5px; line-height: 1.4; }
.fm-cmd-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; color: #8fa0b4; font-size: 11px; }
.fm-cmd .fm-range span { width: 56px; }
.fm-cmd .fm-actions { margin-top: 8px; }
.fm-cmd .fm-kvs { font-size: 11px; }
.fm-cmd-types,
.fm-cmd-weapons { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.fm-cmd-type { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; color: #75879c; background: rgba(6, 10, 18, 0.6); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 5px; font: 600 10.5px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fm-cmd-type:hover { border-color: rgba(140, 196, 255, 0.55); }
.fm-cmd-type.is-on { color: #eaf4ff; background: rgba(78, 230, 180, 0.12); border-color: rgba(78, 230, 180, 0.5); }
.fm-cmd-type em { color: #8fa0b4; font-style: normal; font-variant-numeric: tabular-nums; }
.fm-cmd-order { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0 8px; }
.fm-cmd-air { margin: 0 0 8px; padding: 8px; background: rgba(6, 10, 18, 0.4); border: 1px solid rgba(120, 184, 255, 0.16); border-radius: 7px; }
.fm-cmd-air[hidden] { display: none; }
.fm-cmd-wdot { display: inline-block; flex: none; width: 7px; height: 7px; background: var(--wc); border-radius: 50%; box-shadow: 0 0 5px var(--wc); }
.fm-cmd-strike { margin: 6px 0; padding: 7px 8px; background: rgba(6, 10, 18, 0.45); border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent); border-left: 3px solid var(--sc); border-radius: 7px; }
.fm-cmd-strike-head { display: flex; align-items: center; gap: 6px; }
.fm-cmd-strike-head b { flex: 1; display: flex; align-items: center; gap: 5px; color: #eaf4ff; font-size: 11.5px; }
.fm-cmd-strike-head em { color: var(--sc); font: 700 10px "Segoe UI", system-ui, sans-serif; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.fm-cmd .fm-btn.is-on { color: #eaf4ff; background: rgba(61, 139, 255, 0.3); border-color: rgba(140, 196, 255, 0.7); }
.fm-seg--wrap { flex-wrap: wrap; }

/* the map's hints keep clear of it; the line of what moves opens it */
.fm-hint { left: calc(var(--cmd-w, 0px) + 60px); }
.fm-zoomtag { left: calc(var(--cmd-w, 0px) + 14px); }
.fm-live { font: inherit; font-size: 11px; text-align: left; pointer-events: auto; cursor: pointer; }
.fm-live b { color: #eaf4ff; font-weight: 800; }
.fm-live:hover { border-color: rgba(140, 196, 255, 0.6); }
.fm-live.is-stopped { color: #ffd9c2; border-color: rgba(232, 160, 74, 0.65); }
.fm-live.is-stopped b { color: #ffb08a; }
.fm-place-pic--strike { display: grid; place-items: center; width: 26px; }
.fm-place-pic--strike svg { width: 20px; height: 20px; }
.fm-note--ai { padding: 6px 8px; background: rgba(240, 199, 94, 0.07); border: 1px solid rgba(240, 199, 94, 0.28); border-radius: 6px; }
.fm-ai-tag { display: inline-block; margin-right: 4px; padding: 0 4px; color: #1d1300 !important; background: #f0c75e; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }

/* ---- the Theater desk's Command card (src/ui/chrome.js, mountTheaterCommandCard) ---- */

.tcmd { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px; font-size: 11px; }
.tcmd-row { display: grid; grid-template-columns: 1fr 54px 54px; gap: 6px; align-items: center; padding: 3px 0; color: #a9bdd4; border-bottom: 1px solid rgba(120, 184, 255, 0.08); }
.tcmd-row > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tcmd-row b { color: #eaf4ff; font-weight: 700; }
.tcmd-row i { color: #66778b; font-style: normal; }
.tcmd-head { padding-bottom: 4px; border-bottom-color: rgba(120, 184, 255, 0.2); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.tcmd-head > b { color: #ff8a7a; }
.tcmd-head.is-live > b { color: #4ee6b4; }
.tcmd-b { color: #5fb0ff; }
.tcmd-r { color: #ff5f52; }
.tcmd-more { padding-top: 4px; color: #8fa0b4; font-size: 10.5px; }
.tcmd-open { width: 100%; height: 30px; color: #eaf4ff; background: linear-gradient(180deg, rgba(61, 139, 255, 0.4), rgba(42, 104, 210, 0.3)); border: 1px solid rgba(140, 196, 255, 0.6); border-radius: 7px; font: 700 11px "Segoe UI", system-ui, sans-serif; letter-spacing: 0.04em; cursor: pointer; }
.tcmd-open:hover { background: linear-gradient(180deg, rgba(61, 139, 255, 0.55), rgba(42, 104, 210, 0.42)); }