/* Vertical barbarian track in the lower left (barbtrack.js). Escalates as the ship nears. */
.barb-panel { --tone: var(--muted); padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.barb-panel.near { --tone: var(--pending); }
.barb-panel.imminent { --tone: var(--missing); }
.barb-panel h3 { color: var(--tone); margin-top: 0; }
.bt-wrap { display: flex; gap: 14px; align-items: stretch; }
.bt-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
/* the route, and how far the ship has come */
.bt-track::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--border); }
.bt-track::after { content: ""; position: absolute; left: 16px; top: 8px; width: 4px; border-radius: 2px;
  height: calc(var(--progress) - 8px); background: var(--tone); }
.bt-step { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.bt-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem;
  background: var(--surface); border: 2px solid var(--border); }
.bt-step.passed .bt-dot { background: color-mix(in srgb, var(--tone) 25%, var(--surface)); border-color: var(--tone); }
.bt-step.ship .bt-dot { border: 3px solid var(--tone); background: var(--surface-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 25%, transparent); font-size: 1.3rem; }
.barb-panel.imminent .bt-step.ship .bt-dot { animation: bt-pulse 1s ease-in-out infinite; }
.bt-step.castle .bt-dot { border-color: var(--pending); color: var(--pending); }
.bt-label { font-size: 0.72rem; color: var(--muted); }
.bt-info { display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; justify-content: center; }
.bt-left { font-size: 1.15rem; color: var(--tone); }
.barb-panel:not(.near) .bt-left { color: var(--text); }
.bt-verdict.ok { color: var(--found); font-weight: 600; }
.bt-verdict.danger { color: var(--missing); font-weight: 700; }
.bt-knights { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.bt-knight { border-bottom: 2px solid var(--who); font-size: 0.78rem; }
/* turn-bar warning */
.bt-alert { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  background: color-mix(in srgb, var(--pending) 20%, var(--surface)); border: 1px solid var(--pending); color: var(--text); }
.bt-alert.danger { background: color-mix(in srgb, var(--missing) 22%, var(--surface)); border-color: var(--missing); animation: bt-pulse 1.2s ease-in-out infinite; }
@keyframes bt-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--missing) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bt-step.ship .bt-dot, .bt-alert.danger { animation: none !important; } }