/* Front Lines: the shared thread through the WWI battle ByteSizes.
   Each hub keeps its own look. It sets these five variables and the strip,
   the ledger and the handoff borrow its colors and type. */
.fl-strip {
  --_bg: var(--fl-bg, #15130f);
  --_ink: var(--fl-ink, #efe7d4);
  --_dim: var(--fl-dim, rgba(239, 231, 212, 0.55));
  --_accent: var(--fl-accent, #c8452f);
  --_font: var(--fl-font, ui-monospace, "Courier New", monospace);
  background: var(--_bg);
  color: var(--_ink);
  font-family: var(--_font);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fl-strip .fl-row {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px max(16px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  align-items: center;
}
.fl-mark { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-weight: 700; }
.fl-mark svg { width: 34px; height: 10px; flex: none; }
.fl-mark span { color: var(--_dim); font-weight: 500; }
.fl-ribbon { position: relative; height: 30px; min-width: 0; }
.fl-ribbon .fl-axis { position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--_dim); }
.fl-ribbon .fl-year { position: absolute; top: 18px; font-size: 0.62rem; color: var(--_dim); transform: translateX(-1px); }
.fl-ribbon .fl-year::before { content: ""; position: absolute; left: 0; top: -9px; width: 1px; height: 6px; background: var(--_dim); }
.fl-tick {
  position: absolute; top: 6px; width: 9px; height: 15px; margin-left: -4px;
  display: block; padding: 0; border: 0; background: transparent; cursor: default;
}
.fl-tick::after { content: ""; position: absolute; left: 4px; top: 0; width: 1px; height: 15px; background: var(--_dim); }
a.fl-tick { cursor: pointer; }
a.fl-tick::after { width: 3px; left: 3px; background: var(--_ink); }
a.fl-tick:hover::after, a.fl-tick:focus-visible::after { background: var(--_accent); }
.fl-tick.fl-here::after { width: 5px; left: 2px; top: -3px; height: 21px; background: var(--_accent); }
.fl-tick:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
.fl-ribbon .fl-label {
  position: absolute; top: -1px; font-size: 0.62rem; color: var(--_accent); font-weight: 700;
  white-space: nowrap; pointer-events: none;
}
@media (max-width: 640px) {
  .fl-strip .fl-row { grid-template-columns: 1fr; }
}

/* The ledger: every battle reports its cost the same way. */
.fl-ledger {
  border-top: 3px double currentColor;
  border-bottom: 3px double currentColor;
  padding: 14px 0 10px;
  margin: 22px 0;
}
.fl-ledger h3 {
  font-family: var(--fl-font, ui-monospace, monospace);
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 10px; font-weight: 700;
}
.fl-ledger dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.fl-ledger dt { font-family: var(--fl-font, ui-monospace, monospace); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.fl-ledger dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fl-ledger dd small { display: block; font-size: 0.8rem; font-weight: 400; opacity: 0.8; margin-top: 3px; line-height: 1.35; }
.fl-ledger p { font-size: 0.82rem; margin: 12px 0 0; opacity: 0.8; max-width: none; }

/* The handoff at the bottom of every battle. */
.fl-next {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  font-family: var(--fl-font, ui-monospace, monospace); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.fl-next a, .fl-next span.fl-soon { font-weight: 700; }
.fl-next .fl-soon-note { opacity: 0.7; font-weight: 400; }