/* One compact period readout for the overview and period-information page. */
.wars-ui .w-game-period {padding:8px 10px;background:var(--w-alt);color:var(--w-ink);font-size:13px;line-height:1.45}
.wars-ui .w-period-heading {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 10px}
.wars-ui .w-game-period .w-period-name {font-weight:700;color:var(--w-ink);font-size:14px;text-decoration:none}
.wars-ui .w-game-period[data-phase=prewar] .w-period-name {color:var(--w-action)}
.wars-ui .w-game-period[data-phase=war] .w-period-name {color:var(--w-danger)}
.wars-ui .w-period-season {display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--w-muted);white-space:nowrap}
.wars-ui .w-period-season img {max-height:20px;width:auto;vertical-align:middle}
.wars-ui .w-period-countdown {display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin-top:3px}
.wars-ui .w-period-countdown strong {font-size:14px;font-variant-numeric:tabular-nums;color:var(--w-ink)}
.wars-ui .w-period-deadline {font-size:12px;color:var(--w-muted);margin-top:2px;overflow-wrap:anywhere}
.wars-ui .w-game-period [hidden] {display:none!important}

/* PERIOD2: phase colours - development green, prewar blue, war red; noticeable but calm. */
.wars-ui.w-design-a .lenta.w-game-period[data-phase] {--phase:#3f7d46;--phase-soft:rgba(63,125,70,.11);box-sizing:border-box;width:auto;max-width:none;margin:6px 10px;padding:7px 12px 7px 12px;border:1px solid var(--w-line);border-inline-start:4px solid var(--phase);border-radius:6px;background:linear-gradient(90deg,var(--phase-soft),transparent 75%),var(--w-surface)}
.wars-ui.w-design-a .lenta.w-game-period[data-phase=prewar] {--phase:#3a64a8;--phase-soft:rgba(58,100,168,.12)}
.wars-ui.w-design-a .lenta.w-game-period[data-phase=war] {--phase:#a8352b;--phase-soft:rgba(168,53,43,.12)}
.wars-ui.w-design-a .lenta.w-game-period:is([data-phase=ended],[data-phase=unset]) {--phase:var(--w-muted);--phase-soft:transparent}
.wars-ui.w-design-a[data-theme=dark] .lenta.w-game-period[data-phase] {--phase:#7cc283;--phase-soft:rgba(124,194,131,.14)}
.wars-ui.w-design-a[data-theme=dark] .lenta.w-game-period[data-phase=prewar] {--phase:#8eb0ea;--phase-soft:rgba(142,176,234,.15)}
.wars-ui.w-design-a[data-theme=dark] .lenta.w-game-period[data-phase=war] {--phase:#e8857b;--phase-soft:rgba(232,133,123,.15)}
.wars-ui.w-design-a .lenta.w-game-period[data-phase] .w-period-name {display:inline-flex;align-items:center;gap:7px;color:var(--phase);font-size:14px;font-weight:700}
.wars-ui.w-design-a .lenta.w-game-period[data-phase] .w-period-name::before {content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--phase);box-shadow:0 0 0 3px var(--phase-soft)}
.wars-ui.w-design-a .lenta.w-game-period[data-phase=war] .w-period-name::before {animation:w-period-pulse 2.4s ease-in-out infinite}
.wars-ui.w-design-a .lenta.w-game-period[data-phase] .w-period-countdown {margin-top:1px;gap:0 5px;font-size:12px;color:var(--w-muted)}
.wars-ui.w-design-a .lenta.w-game-period[data-phase] .w-period-countdown strong {font-size:13px;color:var(--w-ink)}
/* The exact date stays in the markup (and on the period page link) but is not repeated here. */
.wars-ui.w-design-a.w-family-overview .lenta.w-game-period[data-phase] .w-period-deadline {display:none}
@keyframes w-period-pulse {0%,100%{box-shadow:0 0 0 3px var(--phase-soft)}50%{box-shadow:0 0 0 6px transparent}}
@media(prefers-reduced-motion:reduce) {.wars-ui.w-design-a .lenta.w-game-period[data-phase=war] .w-period-name::before {animation:none}}

/* PERIOD3: a full-width band instead of a small card - phase line on top, tint fading down, live clock. */
.wars-ui.w-design-a .lenta.w-game-period[data-phase] {margin:0;padding:8px 12px 9px;border:0;border-top:3px solid var(--phase);border-bottom:1px solid var(--w-line);border-radius:0;background:linear-gradient(180deg,var(--phase-soft),transparent 85%),var(--w-surface)}
.wars-ui.w-design-a .lenta.w-game-period[data-phase] .w-period-countdown {margin-top:2px;align-items:baseline}
.wars-ui.w-design-a .lenta.w-game-period[data-phase] .w-period-countdown strong {font-size:15px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--w-ink)}

/* PERIOD4: the phase line sits on the bottom edge; the tint rises from it. */
.wars-ui.w-design-a .lenta.w-game-period[data-phase] {border-top:0;border-bottom:3px solid var(--phase);background:linear-gradient(0deg,var(--phase-soft),transparent 85%),var(--w-surface)}