/* Persistent war status page (docs/WAR_UI_OVERHAUL.md section 3). The site's field kit:
   gunmetal plates, one signal amber, square corners plus the chamfer. Bloc colours are the
   game's seat colours for the two blocs; ownership is always also written as text. */
.war-page [hidden] { display: none !important; }
.war-main { padding-top: calc(var(--bar-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(48px, 6vw, 96px); }

/* ---------- Header ---------- */
.war-head { display: grid; gap: 20px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
@media (min-width: 1024px) { .war-head { grid-template-columns: minmax(0, 1fr) auto; } }
.war-title h1 { margin: 0 0 14px; }
.war-title .lede { margin: 0; }
.war-availability { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.war-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
#war-status { display: inline-flex; align-items: center; gap: 10px; color: var(--warn); font: 600 .9375rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; }
#war-status::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: currentColor; }
#war-status[data-state="online"] { color: var(--ok); }
#war-status[data-state="online"]::before { box-shadow: 0 0 0 4px rgba(79, 192, 141, .18); }
.war-updated { color: var(--text-3); font: 400 .8125rem var(--mono); }
.war-updated:empty { display: none; }
#war-refresh { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
/* Offline: the one Refresh sits in the offline panel. */
.war-availability:has(#war-status[data-state="offline"]) #war-refresh { display: none; }
.war-offline .btn { margin-top: 16px; }
#war-refresh:disabled, #war-retry:disabled { opacity: .55; cursor: progress; }
@media (max-width: 599px) {
  .war-availability { display: grid; grid-template-columns: minmax(0, 1fr); }
  #war-refresh { width: 100%; }
}

/* ---------- Shared plate pieces ---------- */
.war-kicker { margin: 0 0 14px; color: var(--text-3); font: 600 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .16em; }
.war-panel { min-width: 0; padding: clamp(18px, 2vw, 28px); background: var(--ink-2); border: 1px solid var(--line-1); }
.war-help { margin: -4px 0 16px; color: var(--text-3); font-size: .875rem; }

/* ---------- Offline ---------- */
.war-offline {
  display: flex; gap: 18px; align-items: flex-start; max-width: 760px; padding: clamp(20px, 3vw, 32px);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2) 60%); border: 1px solid var(--line-2);
  border-inline-start: 3px solid var(--warn); clip-path: var(--chamfer);
}
.war-offline-icon { width: 28px; height: 28px; flex: none; color: var(--warn); margin-top: 2px; }
.war-offline h2 { margin: 0 0 8px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); text-transform: uppercase; }
.war-offline p { margin: 0; max-width: 60ch; }

/* ---------- Season band ---------- */
.war-live { display: grid; gap: 20px; }
.war-season {
  display: grid; gap: 20px 40px; padding: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2) 55%); border: 1px solid var(--line-2); clip-path: var(--chamfer);
}
@media (min-width: 900px) { .war-season { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); align-items: start; } }
.war-season-head .war-kicker { margin-bottom: 8px; }
.war-season-value { margin: 0 0 6px; color: var(--text-1); font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.1 var(--display); text-transform: uppercase; }
.war-window { margin: 0; color: var(--text-3); font: 400 .8125rem/1.5 var(--mono); }
.war-progress { align-self: center; }
.war-day { margin: 0 0 8px; color: var(--text-2); font: 400 .875rem var(--mono); }
.war-meter { height: 8px; background: var(--ink-1); border: 1px solid var(--line-1); }
.war-meter span { display: block; width: 0; height: 100%; background: var(--amber); }
.war-tug-block .war-kicker { margin-bottom: 10px; }
.war-tug { display: flex; height: 14px; gap: 2px; background: var(--ink-1); border: 1px solid var(--line-1); }
.war-tug span { display: block; min-width: 2px; background: var(--side); }
.war-standings { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; }
.war-standings li { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--text-1); font: 600 .9375rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .06em; overflow-wrap: anywhere; }
.war-standings li::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--side); transform: translateY(-1px); }
.war-standings b { color: var(--text-1); font: 400 1rem var(--mono); }
.war-standings span { color: var(--text-3); font: 400 .8125rem var(--mono); letter-spacing: 0; text-transform: none; }

/* ---------- Map and side column ---------- */
.war-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) { .war-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.war-side { display: grid; gap: 20px; min-width: 0; }
.war-map-panel { background: radial-gradient(ellipse at 50% 40%, var(--ink-3), var(--ink-2) 70%); }
#war-map { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; direction: ltr; }
#war-map .grid { stroke: var(--line-1); stroke-width: 1; }
#war-map .link { stroke: var(--line-2); stroke-width: 3; }
#war-map .link.contested { stroke: var(--amber); stroke-width: 4; stroke-dasharray: 10 7; }
#war-map .plate { fill: var(--ink-1); stroke: var(--side); stroke-width: 2; }
#war-map .plate-fill { fill: var(--side); opacity: .22; }
#war-map .plate-bar { fill: var(--side); }
#war-map .front .plate { stroke: var(--amber); stroke-width: 3; }
#war-map .tick { fill: var(--amber); }
#war-map text { fill: var(--text-1); font: 600 22px var(--display); text-anchor: middle; dominant-baseline: central; text-transform: uppercase; letter-spacing: .04em; }
.war-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-1); list-style: none; color: var(--text-2); font-size: .875rem; }
.war-legend li { display: inline-flex; align-items: center; gap: 8px; }
.war-legend i { display: inline-block; width: 14px; height: 14px; flex: none; background: var(--side); }
.war-legend i.front { background: transparent; border: 2px solid var(--amber); }
.war-legend i.contested { width: 22px; height: 0; border-top: 3px dashed var(--amber); background: none; }

.war-sectors { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.war-sectors li { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px 8px 0; background: var(--ink-1); }
.war-sectors li::before { content: ""; align-self: stretch; background: var(--side); }
.war-sectors strong { color: var(--text-1); font-weight: 600; overflow-wrap: anywhere; }
.war-sectors span { color: var(--text-3); font-size: .875rem; overflow-wrap: anywhere; }
.war-sectors .tag { grid-column: 3; justify-self: end; padding: 3px 8px; border: 1px solid var(--amber); color: var(--amber); font: 600 .6875rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.war-sectors .group { display: block; min-height: 0; margin: 12px 0 4px; padding: 0; background: none; color: var(--text-3); font: 600 .75rem var(--display); text-transform: uppercase; letter-spacing: .14em; }
.war-sectors .group:first-child { margin-top: 0; }
.war-sectors .group::before { content: none; }

.war-empty { margin: 0; padding: 18px; border: 1px dashed var(--line-2); color: var(--text-3); text-align: center; }
.war-battles { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.war-battles li { position: relative; display: grid; gap: 2px; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line-1); overflow-wrap: anywhere; }
.war-battles li:last-child { border-bottom: 0; }
.war-battles li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 8px; height: 8px; background: var(--side); }
.war-battles time { color: var(--text-3); font: 400 .8125rem var(--mono); }
.war-battles strong { color: var(--text-1); }
.war-battles .captured { color: var(--amber); font: 600 .75rem var(--display); text-transform: uppercase; letter-spacing: .12em; }
.war-side-0 { --side: var(--bloc-0); }
.war-side-1 { --side: var(--bloc-1); }

.war-note { margin-top: 28px; color: var(--text-3); font-size: .875rem; }

:root[dir="rtl"] .war-battles li { padding: 10px 22px 10px 0; }
:root[dir="rtl"] .war-battles li::before { left: auto; right: 4px; }
:root[dir="rtl"] .war-sectors li { padding: 10px 0 10px 12px; }
@media (max-width: 520px) { #war-map text { font-size: 28px; } }