/* 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: 340px 1fr 1fr; gap: 10px; padding: 0 14px 12px; }
.fb-body:has(.fb-col[hidden]) { grid-template-columns: 340px 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-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); }