/* WAR — штабная комната банды. Материал: уголь, кровь, латунь, трафарет.
   17.10.2026: «не делай так много текста, добавь изображения… не всё одной
   строкой, а отдельной, с плавными анимациями». Каждая вещь — своя строка
   со значком; правила свёрнуты; числа — кольцом и полосой. Анимации —
   только при входе на экран (`.war-body.is-enter`), ступенькой по `--i`;
   при reduced-motion и data-fx="off" их нет. Цвета — токенами на модуле:
   экраны «Штаба» и «Территорий» (viewTeam/viewStreet из app.js)
   перекрашиваются без правки их разметки. */
.war, .war-sheet {
  --void: #0e0c0b; --void-2: #161210; --panel: #1a1513; --panel-2: #211a17;
  --line: #3a2b25; --line-soft: #2a201c; --ink: #efe6dc; --ink-dim: #b3a497; --ink-faint: #85766a;
  --sys: #e2483a; --sys-deep: #8f241b; --sys-glow: rgba(226, 72, 58, 0.3);
  --gold: #d9a441; --gold-soft: rgba(217, 164, 65, 0.14); --upgrade: #d9a441; --blood: #ff6a5a;
  --good: #7cc58a; --good-soft: rgba(124, 197, 138, 0.14); --hot-soft: rgba(226, 72, 58, 0.14);
  --war-gap: 12px; --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.war {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 50% at 50% 0%, #241713 0%, var(--void) 55%);
  color: var(--ink);
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.war-ic { width: 18px; height: 18px; vertical-align: -0.2em; }

/* --- Шапка ------------------------------------------------------------- */
.war-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 12px; background: rgba(14, 12, 11, 0.94);
  border-bottom: 1px solid var(--sys-deep); backdrop-filter: blur(6px);
}
.war-back {
  color: var(--ink); font-size: 26px; line-height: 1; min-width: 44px; min-height: 44px;
  background: none; border: 0;
}
.war-logo {
  font-family: var(--font-data); font-weight: 900; font-size: 22px; letter-spacing: 0.3em; color: var(--sys);
  text-shadow: 0 0 14px var(--sys-glow);
}
.war-sub {
  font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* --- Ресурсы: значок, число, подпись ----------------------------------- */
.war-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 12px 16px 0; }
.war-stat {
  display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; min-width: 0; text-align: center;
  background: var(--void-2); border: 1px solid var(--line-soft); border-radius: 12px;
}
.war-stat .war-ic { width: 20px; height: 20px; color: var(--gold); margin-bottom: 2px; }
.war-stat b {
  font-family: var(--font-data); font-size: 14px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.war-stat span {
  font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.war-stat.is-dim .war-ic, .war-stat.is-dim b { color: var(--ink-faint); }
.war-stat.is-hot { border-color: var(--sys-deep); background: var(--hot-soft); }
.war-stat.is-hot .war-ic, .war-stat.is-hot b { color: var(--blood); }
.war-stat.is-good .war-ic, .war-stat.is-good b { color: var(--good); }
.war-stat.is-ask { border-color: rgba(217, 164, 65, 0.45); background: var(--gold-soft); }
.war-stat.is-ask b { color: var(--gold); }

/* --- Вкладки: значок над подписью, черта едет к выбранной --------------- */
.war-tabs {
  position: relative; display: flex; margin: 12px 16px 0; padding: 4px;
  background: var(--void-2); border: 1px solid var(--line-soft); border-radius: 14px;
}
.war-tab-ink {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  transform: translateX(calc(var(--at) * 100%)); border-radius: 10px;
  background: linear-gradient(180deg, var(--sys), var(--sys-deep)); box-shadow: 0 4px 16px var(--sys-glow);
  transition: transform 0.38s var(--ease);
}
.war-tab {
  position: relative; z-index: 1; flex: 1; display: grid; justify-items: center; gap: 2px;
  min-height: 52px; padding: 6px 4px; background: none; border: 0; color: var(--ink-dim);
  font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  transition: color 0.25s;
}
.war-tab .war-ic { width: 20px; height: 20px; transition: transform 0.3s var(--ease); }
.war-tab.is-on { color: #fff3ec; }
.war-tab.is-on .war-ic { transform: translateY(-1px) scale(1.08); }
.war-dot {
  position: absolute; top: 4px; right: calc(50% - 22px); display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--gold); color: #160b09; font-style: normal; font-size: 11px; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--void-2);
}
.war-subs { display: flex; gap: 6px; margin: 10px 16px 0; overflow-x: auto; scrollbar-width: none; }
.war-subs::-webkit-scrollbar { display: none; }
.war-subtab {
  flex: 0 0 auto; min-height: 36px; padding: 6px 14px; background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line-soft); border-radius: 18px; font-size: 13px; font-weight: 700;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.war-subtab.is-on { color: var(--ink); border-color: var(--gold); background: var(--gold-soft); }

/* --- Тело и секции ----------------------------------------------------- */
.war-body { padding: 12px 16px; display: grid; gap: var(--war-gap); }
.war .panel {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px;
  display: grid; gap: 10px;
}
.war .sys-label, .war-kicker {
  color: var(--gold); font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 11px; margin: 0; font-weight: 800;
}
.war h3 { font-size: 18px; line-height: 1.25; }
.war-sec-head { display: flex; align-items: center; gap: 10px; }
.war-sec-head > div { min-width: 0; }
.war-sec-ic {
  width: 34px; height: 34px; padding: 7px; flex: 0 0 auto; border-radius: 10px;
  color: var(--gold); background: var(--gold-soft);
}
.war-sec.is-hot { border-color: var(--sys-deep); }
.war-sec.is-hot .war-sec-ic { color: var(--blood); background: var(--hot-soft); }
.war-sec-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-dim); }
.war-hot-text { color: var(--blood); }
.war-gold-text { color: var(--gold); }
.war-why {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; font-size: 13px;
  color: var(--ink-dim); background: var(--void-2); border-radius: 10px;
}
.war-calm {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px;
  color: var(--ink-dim); background: var(--void-2); font-size: 14px;
}
.war-calm .war-ic { color: var(--good); width: 22px; height: 22px; }
.war-calm .war-ic.is-dim { color: var(--ink-faint); }

/* Строки со значком: каждая — своя */
.war-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.war-list li {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px;
  background: var(--void-2); border-radius: 10px; font-size: 14px; line-height: 1.35;
}
.war-list li > .war-ic { color: var(--gold); flex: 0 0 auto; }
.war-list li > span:not(.war-pill):not(.war-tag):not(.war-ava) { flex: 1; min-width: 0; }
.war-list li em { font-style: normal; color: var(--ink-faint); font-size: 12px; margin-left: 4px; }
.war-feed li { font-size: 13px; color: var(--ink-dim); min-height: 0; }
.war-feed li > .war-ic { width: 10px; height: 10px; color: var(--ink-faint); }
.war-city li .war-ava { width: 28px; height: 28px; font-size: 13px; }

/* «Как это работает» — свёрнуто */
.war-how { border-top: 1px solid var(--line-soft); padding-top: 4px; }
.war-how summary {
  display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none;
  color: var(--ink-dim); font-size: 13px; font-weight: 700;
}
.war-how summary::-webkit-details-marker { display: none; }
.war-how summary > span { flex: 1; }
.war-how-arrow { transition: transform 0.3s var(--ease); }
.war-how[open] .war-how-arrow { transform: rotate(180deg); }
.war-how[open] summary { color: var(--ink); }
.war-how .war-list li { font-size: 13px; }

/* Метки и таблички */
.war-pill {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 8px; border-radius: 999px;
  font-family: var(--font-data); font-size: 11px; color: var(--gold); background: var(--gold-soft); white-space: nowrap;
}
.war-pill .war-ic { width: 12px; height: 12px; }
.war-tag {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid var(--line);
}
.war-tag .war-ic { width: 12px; height: 12px; }
.war-tag.is-ally { color: var(--gold); border-color: rgba(217, 164, 65, 0.5); }
.war-tag.is-hot { color: var(--blood); border-color: var(--sys-deep); background: var(--hot-soft); }
.war-tag.is-ok { color: var(--good); border-color: rgba(124, 197, 138, 0.4); background: var(--good-soft); }

/* Кольцо и полоса */
.war-ring { position: relative; width: 84px; height: 84px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; }
.war-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.war-ring circle { fill: none; stroke-width: 6; }
.war-ring-bg { stroke: var(--line-soft); }
.war-ring-fg {
  stroke: var(--gold); stroke-linecap: round; stroke-dasharray: var(--dash); stroke-dashoffset: var(--off);
  filter: drop-shadow(0 0 4px rgba(217, 164, 65, 0.45));
}
.war-ring.is-good .war-ring-fg { stroke: var(--good); filter: drop-shadow(0 0 4px rgba(124, 197, 138, 0.45)); }
.war-ring.is-warn .war-ring-fg { stroke: #e08a3c; }
.war-ring.is-hot .war-ring-fg { stroke: var(--sys); filter: drop-shadow(0 0 4px var(--sys-glow)); }
.war-ring b { position: relative; font-family: var(--font-data); font-size: 22px; line-height: 1; }
.war-ring span { position: relative; font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.war-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.war-bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; transform-origin: left;
  background: linear-gradient(90deg, var(--ink-faint), var(--ink-dim));
}
.war-bar.is-gold i { background: linear-gradient(90deg, #a7772a, var(--gold)); }
.war-bar.is-good i { background: linear-gradient(90deg, #4f8f5c, var(--good)); }
.war-bar.is-hot i { background: linear-gradient(90deg, var(--sys-deep), var(--sys)); }

/* Аватар: буква в круге */
.war-ava {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  font-weight: 900; font-size: 15px; color: #fff3ec;
  background: linear-gradient(135deg, hsl(var(--h) 45% 38%), hsl(var(--h) 50% 22%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* --- Плитки ------------------------------------------------------------ */
.war-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war-tiles.is-one { grid-template-columns: 1fr; }
.war-tile {
  display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 104px; padding: 12px 8px;
  text-align: center; color: var(--ink); background: var(--void-2); border: 1px solid var(--line-soft);
  border-radius: 14px; font: inherit;
  transition: transform 0.18s var(--ease), border-color 0.2s, background 0.2s;
}
button.war-tile { cursor: pointer; }
button.war-tile:hover:not(:disabled) { border-color: var(--gold); background: var(--panel-2); }
button.war-tile:active:not(:disabled) { transform: scale(0.96); }
.war-tile:disabled { opacity: 0.45; }
.war-tile b { font-size: 14px; line-height: 1.2; }
.war-tile-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--gold); background: radial-gradient(circle at 50% 35%, rgba(217, 164, 65, 0.28), rgba(217, 164, 65, 0.06));
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.35);
}
.war-tile-ic .war-ic { width: 22px; height: 22px; }
.war-tile-who { font-size: 12px; color: var(--ink-dim); line-height: 1.25; }
.war-tile.is-free { border-style: dashed; }
.war-tile.is-free .war-tile-ic { color: var(--ink-faint); background: none; box-shadow: inset 0 0 0 1px var(--line); }
.war-tile.is-free .war-tile-who { color: var(--ink-faint); }
.war-tile.is-danger .war-tile-ic { color: var(--blood); background: var(--hot-soft); box-shadow: inset 0 0 0 1px var(--sys-deep); }
.war-tiles.is-one .war-tile { min-height: 0; grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; }
.war-tiles.is-one .war-tile-ic { grid-row: span 2; }

/* --- Ждут решения, договоры: карточка со значком слева ----------------- */
.war-asks { display: grid; gap: 8px; }
.war-ask, .war-pact {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px;
  background: var(--void-2); border: 1px solid var(--line-soft); border-radius: 14px;
}
.war-pact + .war-pact { margin-top: 0; }
.war-ask-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--gold); background: var(--gold-soft);
}
.war-ask-ic .war-ic { width: 20px; height: 20px; }
.war-ask-main { display: grid; gap: 6px; min-width: 0; }
.war-ask-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.war-ask-top b { min-width: 0; overflow-wrap: anywhere; }
.war-ask-text { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.4; }
.war-ask-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.war-ask-acts:empty { display: none; }
.war-ask.is-threat, .war-pact.is-ending { border-color: var(--sys-deep); }
.war-ask.is-threat .war-ask-ic { color: var(--blood); background: var(--hot-soft); }
.war-ask.is-threat .war-ask-top b { color: var(--blood); }
.war-ask.is-sign, .war-ask.is-vote, .war-ask.is-pact { border-color: rgba(217, 164, 65, 0.4); }
.war-ask.is-wait { opacity: 0.7; }
.war-pact.is-ending .war-ask-ic { color: var(--ink-faint); background: var(--line-soft); }

/* --- Совет ------------------------------------------------------------- */
.war .war-hero {
  grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(217, 164, 65, 0.12), transparent 60%), var(--panel);
}
.war-hero-main { display: grid; gap: 6px; min-width: 0; }
.war-role {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 12px; border-radius: 999px;
  font-weight: 800; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(217, 164, 65, 0.4);
}
.war-hero-line { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-dim); }
.war-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.war-person {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--void-2);
}
.war-person-main { flex: 1; display: grid; gap: 1px; min-width: 0; }
.war-person-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-person-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-faint); }
.war-person-sub .war-ic { width: 13px; height: 13px; color: var(--gold); }
.war-loy { display: grid; gap: 4px; width: 64px; flex: 0 0 auto; text-align: right; }
.war-loy span { font-family: var(--font-data); font-size: 13px; font-weight: 800; }
.war-icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px;
  color: var(--ink-faint); background: none; border: 1px solid var(--line-soft);
  transition: color 0.2s, border-color 0.2s, transform 0.15s;
}
.war-icon-btn:hover { color: var(--blood); border-color: var(--sys-deep); }
.war-icon-btn:active { transform: scale(0.92); }
.war-vote { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.war-vote > span { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* --- Оборона ----------------------------------------------------------- */
.war .war-post {
  display: grid; gap: 8px; padding: 12px; border-radius: 14px;
  background: var(--void-2); border: 1px solid var(--line-soft);
}
.war .war-post.is-hot { border-color: var(--sys-deep); }
.war .war-post-top { display: flex; align-items: center; gap: 8px; }
.war .war-post-top > .war-ic { color: var(--gold); }
.war .war-post-top b { flex: 1; min-width: 0; }
.war .war-post.is-hot .war-post-top > .war-ic { color: var(--blood); }
.war .war-post .btn { justify-self: start; }
.war .tile { background: var(--panel-2); border-color: var(--line); }

/* --- Кнопки и поля ----------------------------------------------------- */
.war .btn {
  min-height: 44px; background: transparent; border: 1px solid #4a352d; color: var(--ink); font-weight: 700;
  border-radius: 12px; transition: transform 0.15s var(--ease), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.war .btn:hover:not(:disabled) { border-color: var(--gold); }
.war .btn:active:not(:disabled), .war-sheet .btn:active:not(:disabled) { transform: scale(0.97); }
.war .btn-primary, .war-sheet .btn-primary {
  background: linear-gradient(180deg, var(--sys), #c63a2d); border-color: var(--sys); color: #160b09;
  box-shadow: 0 4px 14px var(--sys-glow);
}
.war .btn-ghost, .war-sheet .btn-ghost { border-color: transparent; color: var(--ink-dim); box-shadow: none; }
.war .btn-danger, .war-sheet .btn-danger { border-color: var(--sys); color: var(--blood); background: transparent; }
.war .btn-small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.war .btn-wide { width: 100%; }
.war .btn:disabled, .war-sheet .btn:disabled { opacity: 0.4; box-shadow: none; }
.war-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war .chip.is-on { background: var(--sys); color: #160b09; border-color: var(--sys); }
.war select.input, .war input.input, .war-sheet select.input, .war-sheet input.input {
  width: 100%; min-height: 44px; background: var(--void-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: 15px; transition: border-color 0.2s;
}
.war .input:focus, .war-sheet .input:focus { border-color: var(--gold); outline: none; }
.war-field { display: grid; gap: 6px; font-size: 12px; color: var(--ink-dim); }
.war-field > span { display: flex; align-items: center; gap: 6px; }
.war-seg { display: flex; gap: 4px; padding: 4px; background: var(--void-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.war-seg label { flex: 1; position: relative; }
.war-seg input { position: absolute; opacity: 0; inset: 0; }
.war-seg span {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 9px;
  color: var(--ink-dim); font-weight: 700; font-size: 13px; transition: background 0.25s, color 0.25s;
}
.war-seg input:checked + span { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.5); }
.war-seg input:checked + span .war-ic { color: var(--gold); }
.war-seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }

/* --- Пусто, загрузка --------------------------------------------------- */
.war .panel.war-empty { justify-items: center; text-align: center; border: 1px solid var(--line-soft); background: var(--panel); padding: 24px 16px; }
.war-empty-art {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--gold);
  background: radial-gradient(circle at 50% 35%, rgba(217, 164, 65, 0.25), rgba(217, 164, 65, 0.04));
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.35), 0 0 30px rgba(217, 164, 65, 0.12);
}
.war-empty-art .war-ic { width: 32px; height: 32px; }
.war-empty-title { font-weight: 800; font-size: 16px; margin: 0; }
.war-skel {
  display: block; height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, var(--line-soft) 25%, #3a2c26 50%, var(--line-soft) 75%) 0 0 / 200% 100%;
  animation: war-shimmer 1.4s linear infinite;
}
.war-skel.is-short { width: 60%; }
@keyframes war-shimmer { to { background-position: -200% 0; } }

/* --- Лист подтверждения (живёт в #sheet поверх модуля) ------------------ */
.sheet-body.war-sheet { background: var(--panel); color: var(--ink); border-top: 2px solid var(--sys-deep); gap: 12px; }
.war-sheet-head { display: flex; align-items: center; gap: 12px; }
.war-sheet-art {
  display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 16px; color: var(--gold);
  background: radial-gradient(circle at 50% 30%, rgba(217, 164, 65, 0.3), rgba(217, 164, 65, 0.05));
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.4), 0 6px 20px rgba(217, 164, 65, 0.15);
}
.war-sheet-art .war-ic { width: 28px; height: 28px; }
.war-sheet.is-danger .war-sheet-art {
  color: var(--blood); background: radial-gradient(circle at 50% 30%, rgba(226, 72, 58, 0.32), rgba(226, 72, 58, 0.05));
  box-shadow: inset 0 0 0 1px var(--sys-deep), 0 6px 20px var(--sys-glow);
}
.war-spec, .war-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.war-spec li {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--void-2); font-size: 14px; line-height: 1.4;
}
.war-spec li > .war-ic { color: var(--gold); margin-top: 1px; }
.war-spec li > span { display: grid; gap: 2px; min-width: 0; }
.war-spec em {
  font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint);
}
.war-sheet.is-danger .war-spec li:nth-child(4) > .war-ic { color: var(--blood); }
.war-reqs li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.war-reqs .is-ok { color: var(--good); }
.war-reqs .is-no { color: var(--blood); }
.war-sheet .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war-sheet .btn-row.is-one { grid-template-columns: 1fr; }
.war-sheet .btn { min-height: 46px; border-radius: 12px; transition: transform 0.15s var(--ease); }

/* --- Текстура: зерно бетона и тонкие полосы трафарета -------------------- */
.war::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .85 0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px);
  opacity: 0.9;
}
.war > :not(.war-head) { position: relative; z-index: 1; }
.war .panel {
  background: linear-gradient(180deg, rgba(255, 240, 225, 0.03), transparent 38%), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* --- Герб и портреты ---------------------------------------------------- */
.war-crest {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 46px;
  clip-path: polygon(50% 0, 100% 12%, 100% 58%, 50% 100%, 0 58%, 0 12%);
  background: linear-gradient(160deg, hsl(var(--h) 60% 52%), hsl(var(--h) 55% 24%) 70%);
  color: #fff7ef; font-weight: 900; font-size: 18px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.war-crest::after {
  content: ""; position: absolute; inset: 3px; clip-path: inherit;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 3px, transparent 3px 8px);
}
.war-crest b { position: relative; z-index: 1; }
.war-crest.is-big { width: 64px; height: 74px; font-size: 30px; }
.war-face {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 50%; overflow: hidden; background: var(--void-2);
  box-shadow: 0 0 0 2px var(--line), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.war-face img { width: 100%; height: 100%; object-fit: cover; }
.war-face i { display: none; font-style: normal; font-weight: 900; color: var(--ink-dim); }
.war-face.is-blank img { display: none; }
.war-face.is-blank i { display: block; }
.war-face.is-big { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(217, 164, 65, 0.25); }

/* --- Штаб: баннер банды ------------------------------------------------- */
.war-banner {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 16px; border-radius: 18px; border: 1px solid hsl(var(--h) 40% 30%);
  background:
    radial-gradient(120% 120% at 0% 0%, hsl(var(--h) 60% 30% / 0.55), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 22px),
    linear-gradient(160deg, #1d1512, #0f0b0a);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.war-banner-fx {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 220, 0.09) 50%, transparent 65%);
  transform: translateX(-100%);
}
.war-banner-main { display: grid; gap: 4px; min-width: 0; }
.war-banner-name {
  margin: 0; font-size: 24px; line-height: 1.1; font-weight: 900; letter-spacing: 0.01em;
  overflow-wrap: anywhere; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.war-banner-motto { margin: 0; font-size: 13px; color: var(--ink-dim); font-style: italic; }
.war-xp { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 4px; }
.war-xp span { font-family: var(--font-data); font-size: 11px; color: var(--ink-faint); }
.war-banner-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.war-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  font-family: var(--font-data); font-size: 12px; font-weight: 800; color: var(--ink);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
}
.war-chip .war-ic { width: 14px; height: 14px; color: var(--gold); }
.war-chip.is-fire .war-ic, .war-chip.is-fire { color: #ff9a52; }

/* Плитки дня: число крупно, значок в круге */
.war-gos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war-go {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center; text-align: left; min-height: 68px; padding: 10px 12px;
  color: var(--ink); background: linear-gradient(160deg, var(--panel-2), var(--void-2)); border: 1px solid var(--line-soft);
  border-radius: 14px; font: inherit; transition: transform 0.18s var(--ease), border-color 0.2s;
}
.war-go:active { transform: scale(0.97); }
.war-go:hover { border-color: var(--gold); }
.war-go-ic {
  grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--gold); background: var(--gold-soft);
}
.war-go b { font-family: var(--font-data); font-size: 20px; line-height: 1; }
.war-go > span:last-child { font-size: 11px; color: var(--ink-dim); line-height: 1.2; }
.war-go.is-hot .war-go-ic { color: var(--blood); background: var(--hot-soft); }
.war-go.is-done .war-go-ic { color: var(--good); background: var(--good-soft); }
.war-go::after {
  content: ""; position: absolute; right: -14px; bottom: -14px; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.12), transparent 70%);
}

/* Состав — лица */
.war-mates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.war-mate {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px; min-width: 0;
  background: var(--void-2); border: 1px solid var(--line-soft); border-radius: 12px; color: var(--ink); font: inherit;
}
.war-mate .war-ava { width: 42px; height: 42px; font-size: 17px; }
.war-mate b { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-mate > span:last-child { font-size: 10px; color: var(--ink-faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-mate.is-on .war-ava { box-shadow: 0 0 0 2px var(--void-2), 0 0 0 4px var(--good); }
.war-mate.is-gone { opacity: 0.5; }
.war-mate-role {
  position: absolute; top: 4px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--gold); color: #1a0f08;
}
.war-mate-role .war-ic { width: 12px; height: 12px; }

/* Лента — линия времени */
.war-feed2 { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 0; }
.war-feed2 li {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px 0 6px 16px;
  font-size: 13px; color: var(--ink-dim); border-left: 1px solid var(--line);
}
.war-feed2 li > i {
  position: absolute; left: -5px; top: 11px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--panel);
}
.war-feed2 li em { font-style: normal; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

/* Управление — свёрнуто */
.war-manage summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.war-manage summary::-webkit-details-marker { display: none; }
.war-manage summary > span { flex: 1; display: flex; align-items: center; gap: 8px; }
.war-manage[open] .war-how-arrow { transform: rotate(180deg); }
.war-manage-body { display: grid; gap: 10px; margin-top: 10px; }
.war-manage-body .btn { justify-self: start; }
.war-manage-body .btn-wide { justify-self: stretch; }
.war-code {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--void-2); border: 1px dashed var(--line); font-size: 13px; color: var(--ink-dim);
}
.war-code b { margin-left: auto; font-family: var(--font-data); font-size: 18px; letter-spacing: 0.2em; color: var(--gold); user-select: all; }
.war-icon-btn.is-ok { color: var(--good); border-color: rgba(124, 197, 138, 0.4); }
.war-tag.is-gold { color: var(--gold); border-color: rgba(217, 164, 65, 0.5); }
.war-tag[style*="--c"] { color: var(--c); border-color: var(--c); background: rgba(0, 0, 0, 0.25); }

/* --- Задания ------------------------------------------------------------ */
.war .war-day { background: radial-gradient(120% 140% at 0% 0%, rgba(124, 197, 138, 0.1), transparent 60%), var(--panel); }
.war-rewards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.war-rewards > span {
  display: grid; justify-items: center; gap: 1px; padding: 8px 4px; text-align: center;
  background: var(--void-2); border: 1px solid var(--line-soft); border-radius: 12px;
}
.war-rewards .war-ic { color: var(--gold); }
.war-rewards b { font-family: var(--font-data); font-size: 15px; }
.war-rewards em { font-style: normal; font-size: 10px; color: var(--ink-faint); line-height: 1.2; }
.war-jobs { display: grid; gap: 8px; }
.war-job {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); border-radius: 14px;
  overflow: hidden;
}
.war-job-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--gold);
  background: radial-gradient(circle at 50% 35%, rgba(217, 164, 65, 0.25), rgba(217, 164, 65, 0.05));
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.3);
}
.war-job-ic .war-ic { width: 22px; height: 22px; }
.war-job-main { display: grid; gap: 6px; min-width: 0; }
.war-job-main .btn { justify-self: start; }
.war-job-title { font-size: 14px; line-height: 1.3; }
.war-job-sub { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); }
.war-job.is-bounty {
  border-color: var(--sys-deep);
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(226, 72, 58, 0.16), transparent 60%),
    repeating-linear-gradient(135deg, rgba(226, 72, 58, 0.05) 0 8px, transparent 8px 16px),
    var(--panel);
}
.war-job.is-done { border-color: rgba(124, 197, 138, 0.35); }
.war-job.is-done .war-job-ic { color: var(--good); background: var(--good-soft); box-shadow: inset 0 0 0 1px rgba(124, 197, 138, 0.4); }
.war-job.is-done .war-job-title { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(124, 197, 138, 0.6); }
.war .war-boss {
  grid-template-columns: auto 1fr; align-items: center; gap: 12px; border-color: var(--sys-deep);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(226, 72, 58, 0.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 106, 90, 0.05) 0 10px, transparent 10px 20px), var(--panel);
}
.war-boss .war-face.is-big { box-shadow: 0 0 0 2px var(--sys), 0 0 20px var(--sys-glow); }
.war-boss.is-done { filter: grayscale(0.6); }
.war-versus { justify-items: stretch; text-align: center; }
.war-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.war-vs > span { display: grid; justify-items: center; gap: 6px; }
.war-vs > span b { font-family: var(--font-data); font-size: 22px; }
.war-vs > i {
  font-style: normal; font-weight: 900; font-size: 22px; color: var(--sys); letter-spacing: 0.08em;
  text-shadow: 0 0 14px var(--sys-glow);
}
.war-vs-bar { position: relative; height: 8px; border-radius: 4px; overflow: hidden; background: linear-gradient(90deg, var(--sys-deep), var(--sys)); }
.war-vs-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #a7772a, var(--gold)); transform-origin: left; }
.war-events { display: grid; gap: 6px; }
.war-event {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; text-align: left;
  color: var(--ink); font: inherit; background: var(--void-2); border: 1px solid var(--line-soft); border-radius: 12px;
}
.war-event-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--gold); background: var(--gold-soft); }
.war-event-main { display: grid; gap: 2px; min-width: 0; }
.war-event-main b { font-size: 13px; }
.war-event-main em { font-style: normal; font-size: 12px; color: var(--ink-dim); line-height: 1.3; }
.war-event.is-raid .war-event-ic, .war-event.is-counter .war-event-ic { color: var(--blood); background: var(--hot-soft); }
.war-event.is-boom .war-event-ic { color: var(--good); background: var(--good-soft); }
.war-event.is-expansion .war-event-ic { color: #8fb1d8; background: rgba(111, 147, 189, 0.15); }
.war-event.is-king .war-event-ic { color: #c9a6f0; background: rgba(168, 129, 214, 0.15); }

/* --- Мир: карта — общая с Lvl Up (app.css, .wm); здесь только тёплая тема */
.war .wm {
  --wm-sea0: #1a1210; --wm-sea1: #070505; --wm-land: #1b1513; --wm-land-line: #3a2b25; --wm-key: #2a1c16;
  --wm-key-line: #7a5236; --wm-label: #6f5646; --wm-hatch: rgba(217, 164, 65, 0.05); --wm-line: var(--line);
  --wm-on: var(--gold); --wm-on-ink: #160b09; --wm-bg: #070505;
}

/* Карточка города */
.war .war-city { border-left: 3px solid var(--c); }
.war-city-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.war-city-head h3 { font-size: 20px; }
.war-city-head .war-tag { justify-self: start; }
.war-inf { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line-soft); }
.war-inf.is-big { height: 14px; border-radius: 7px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.war-inf i { flex: 0 0 var(--w); background: var(--c); transform-origin: left; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.4); }
.war-inf i.is-free {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 4px, transparent 4px 8px); box-shadow: none;
}
.war-inf-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.war-inf-legend li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.war-inf-legend li i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.war-inf-legend li b { font-family: var(--font-data); }
.war-foe {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(226, 72, 58, 0.1), transparent 70%), var(--void-2); border: 1px solid var(--line-soft);
}
.war-foe .btn { min-width: 48px; }
.war-crows { display: grid; gap: 4px; padding-top: 4px; }
.war-crow {
  display: grid; grid-template-columns: auto 1fr 84px; gap: 10px; align-items: center; padding: 8px 10px; text-align: left;
  color: var(--ink); font: inherit; background: var(--void-2); border: 1px solid transparent; border-radius: 10px;
}
.war-crow.is-pick { border-color: var(--c); }
.war-crow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.war-crow-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.war-crow-name b { font-size: 14px; }
.war-crow-name .war-ic { width: 13px; height: 13px; color: var(--gold); }
.war-crow-name .war-crow-ev { color: var(--blood); }
.war-crow-name em { flex-basis: 100%; font-style: normal; font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-country summary span { font-weight: 800; color: var(--ink); }

/* --- Движение: только при входе на экран ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fx="off"]) .war-body.is-enter > * { animation: war-in 0.45s var(--ease) both; }
  html:not([data-fx="off"]) .war-body.is-enter > :nth-child(2) { animation-delay: 0.06s; }
  html:not([data-fx="off"]) .war-body.is-enter > :nth-child(3) { animation-delay: 0.12s; }
  html:not([data-fx="off"]) .war-body.is-enter > :nth-child(4) { animation-delay: 0.18s; }
  html:not([data-fx="off"]) .war-body.is-enter > :nth-child(n+5) { animation-delay: 0.24s; }
  html:not([data-fx="off"]) .war-body.is-enter [style*="--i"] {
    animation: war-rise 0.4s var(--ease) both; animation-delay: calc(0.1s + var(--i) * 0.05s);
  }
  html:not([data-fx="off"]) .war-body.is-enter .war-bar i { animation: war-grow 0.9s var(--ease) 0.2s both; }
  html:not([data-fx="off"]) .war-body.is-enter .war-ring-fg { animation: war-ring 1.1s var(--ease) 0.15s both; }
  html:not([data-fx="off"]) .war-body.is-enter .war-ring b { animation: war-pop 0.5s var(--ease) 0.3s both; }
  html:not([data-fx="off"]) .war.is-enter .war-stat { animation: war-rise 0.4s var(--ease) both; }
  html:not([data-fx="off"]) .war.is-enter .war-stat:nth-child(2) { animation-delay: 0.04s; }
  html:not([data-fx="off"]) .war.is-enter .war-stat:nth-child(3) { animation-delay: 0.08s; }
  html:not([data-fx="off"]) .war.is-enter .war-stat:nth-child(4) { animation-delay: 0.12s; }
  html:not([data-fx="off"]) .war.is-enter .war-stat:nth-child(5) { animation-delay: 0.16s; }
  html:not([data-fx="off"]) .war-how[open] .war-list li { animation: war-slide 0.35s var(--ease) both; animation-delay: calc(var(--i) * 0.04s); }
  html:not([data-fx="off"]) .war-sheet .war-spec li { animation: war-slide 0.35s var(--ease) both; animation-delay: calc(0.08s + var(--i) * 0.05s); }
  html:not([data-fx="off"]) .war-sheet-art { animation: war-pop 0.5s var(--ease) both; }
  html:not([data-fx="off"]) .war-empty-art { animation: war-float 3.2s ease-in-out infinite; }
  html:not([data-fx="off"]) .war-stat.is-hot, html:not([data-fx="off"]) .war .war-post.is-hot,
  html:not([data-fx="off"]) .war-ask.is-threat { animation: war-pulse 2.4s ease-in-out infinite; }
  html:not([data-fx="off"]) .war.is-enter .war-dot { animation: war-pop 0.4s var(--ease) both; }
  html:not([data-fx="off"]) .war-banner-fx { animation: war-shine 6s ease-in-out 0.6s infinite; }
  html:not([data-fx="off"]) .war-body.is-enter .war-crest.is-big { animation: war-pop 0.6s var(--ease) 0.1s both; }
  html:not([data-fx="off"]) .war-body.is-enter .war-inf i { animation: war-grow 0.9s var(--ease) 0.25s both; }
  html:not([data-fx="off"]) .war-body.is-enter .war-vs-bar i { animation: war-grow 1s var(--ease) 0.3s both; }
  html:not([data-fx="off"]) .war-job.is-bounty .war-face.is-big,
  html:not([data-fx="off"]) .war-boss .war-face.is-big { animation: war-glow 2.6s ease-in-out infinite; }
  html:not([data-fx="off"]) .war-go:active .war-go-ic { transform: scale(0.9); }
}
@keyframes war-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes war-ping { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
@keyframes war-beat { 50% { transform: scale(1.35); } }
@keyframes war-fade { from { opacity: 0; } }
@keyframes war-glow { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(217, 164, 65, 0.45); } }
@keyframes war-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes war-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes war-slide { from { opacity: 0; transform: translateX(-8px); } }
@keyframes war-grow { from { transform: scaleX(0); } }
@keyframes war-ring { from { stroke-dashoffset: var(--dash); } }
@keyframes war-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes war-float { 50% { transform: translateY(-4px); } }
@keyframes war-pulse { 50% { box-shadow: 0 0 0 1px var(--sys-deep), 0 0 18px var(--sys-glow); } }
@media (prefers-reduced-motion: reduce) {
  .war-tab-ink, .war-how-arrow, .war-tab .war-ic { transition: none; }
  .war-skel { animation: none; }
}
html[data-fx="off"] .war-tab-ink { transition: none; }

@media (max-width: 380px) {
  .war-tab { letter-spacing: 0.02em; font-size: 10px; }
  .war-mates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .war-banner-name { font-size: 21px; }
  .war-crow { grid-template-columns: auto 1fr 64px; }
  .war-strip { gap: 4px; margin: 10px 12px 0; }
  .war-stat { padding: 7px 1px 6px; border-radius: 10px; }
  .war-stat .war-ic { width: 17px; height: 17px; }
  .war-stat span { font-size: 9px; letter-spacing: 0; }
  .war-stat b { font-size: 13px; }
  .war-tabs, .war-subs { margin-left: 12px; margin-right: 12px; }
  .war-body { padding: 12px; }
  .war-ring { width: 76px; height: 76px; }
  .war-tile { min-height: 96px; }
}

/* Постер модуля в хабе. */
.poster.theme-war { background: linear-gradient(170deg, #2b1612, #0e0c0b 70%); color: #efe6dc; }
.poster.theme-war .poster-face { filter: contrast(1.15) saturate(0.9); }
.poster.theme-war .poster-deco {
  background:
    repeating-linear-gradient(135deg, rgba(217, 164, 65, 0.16) 0 10px, transparent 10px 22px),
    linear-gradient(to top, rgba(14, 12, 11, 0.96) 24%, transparent 60%);
}
.poster.theme-war .poster-name { color: #e2483a; letter-spacing: 0.3em; text-shadow: 0 0 16px rgba(226, 72, 58, 0.55); }

/* Кто держит Сеул */
.war .war-rank { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line-soft); }
.war .war-kicker + .war-rank { border-top: 0; }
.war .war-rank-n { font-family: var(--mono, monospace); color: var(--ink-faint); }
.war .war-rank.is-mine .war-rank-name { color: var(--sys); font-weight: 700; }
.war .war-rank-num { color: var(--ink-dim); white-space: nowrap; }
.war .war-hot-t { color: var(--sys); }

/* Карта участков — штабная: тёмная подложка, булавки красным и латунью */
.war .street-plate { border-color: var(--line); background: #120e0c;
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .08), inset 0 0 60px rgba(0, 0, 0, .7); }
.war .street-plate .bigmap-inner { background-color: #b08a6c; background-blend-mode: multiply; }
.war .street-legend .is-held { color: var(--gold); }
.war .street-legend .is-abandoned { color: var(--blood); }
.war .street-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(217, 164, 65, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 164, 65, .06) 1px, transparent 1px);
  background-size: 40px 40px; }
.war .street-pin.is-held .pin-dot { background: var(--gold); }
.war .street-pin.is-mine .pin-dot { background: var(--sys); box-shadow: 0 0 12px var(--sys-glow); }
.war .street-pin.is-threat .pin-dot { outline: 2px solid var(--sys); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .war .street-pin.is-threat .pin-dot { animation: war-pin 1.6s ease-in-out infinite; }
  @keyframes war-pin { 50% { outline-offset: 7px; outline-color: transparent; } }
}

/* Первый вход и Связи (war_ties, 18.10.2026) */
.war .war-gang { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--line-soft); }
.war .war-gang-main { display: grid; gap: 2px; min-width: 0; }
.war .war-gang-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war .war-gang-main span { color: var(--ink-dim); font-size: 12px; }
.war .war-gang-where { margin: 14px 0 2px; display: flex; gap: 6px; align-items: center; }
.war .war-tiers { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.war .war-tiers li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; opacity: .55; }
.war .war-tiers li.is-done { opacity: .85; }
.war .war-tiers li.is-on { opacity: 1; border-color: var(--gold); background: rgba(217, 164, 65, .08);
  box-shadow: 0 0 18px rgba(217, 164, 65, .12); }
.war .war-tiers i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); color: var(--ink-dim); font-weight: 700; }
.war .war-tiers li.is-done i { background: var(--gold); color: #1a120c; }
.war .war-tiers div { display: grid; gap: 1px; }
.war .war-tiers span { color: var(--ink-dim); font-size: 12px; }
.war .war-tiers em { font-style: normal; color: var(--gold); font-size: 12px; white-space: nowrap; }
.war .war-big-line { font-size: 18px; font-weight: 700; display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.war .war-big-line em { font-style: normal; font-weight: 400; color: var(--ink-dim); font-size: 13px; }
.war .war-chip.is-tier { border-color: var(--gold); color: var(--gold); }
/* Четыре подвкладки Политики влезают в 360 px без прокрутки. */
@media (max-width: 400px) { .war .war-subtab { padding-left: 10px; padding-right: 10px; } }

/* Районы большого города (Пусан, Инчхон) на карточке города */
.war .war-districts { display: grid; gap: 6px; margin: 10px 0; }
.war .war-district { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--ink-faint);
  border-radius: 10px; color: inherit; font: inherit; cursor: pointer; }
.war .war-district b { grid-column: 1; }
.war .war-district span, .war .war-district em { grid-column: 1; font-size: 12px; color: var(--ink-dim); font-style: normal; }
.war .war-district i { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-style: normal; color: var(--gold); font-size: 12px; }
.war .war-district.is-mine { border-left-color: var(--gold); }
.war .war-district.is-held { border-left-color: var(--sys); }

/* Лица в WAR (17.10.2026): галерея выбора, районы, оборона */
.war .war-hidden-select { display: none; }
.war .war-picks { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 8px; overflow-x: auto;
  padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.war .war-pick { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: inherit; font: inherit; cursor: pointer;
  scroll-snap-align: start; transition: border-color .15s, transform .15s; }
.war .war-pick img, .war .war-pick-blank { width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
  object-position: 50% 20%; background: #120e0c; display: grid; place-items: center; }
.war .war-pick b { font-size: 11px; line-height: 1.2; text-align: center; max-height: 2.4em; overflow: hidden; }
.war .war-pick span { font-size: 10px; color: var(--ink-faint); }
.war .war-pick.is-on { border-color: var(--gold); box-shadow: 0 0 14px rgba(217, 164, 65, .18); transform: translateY(-1px); }
.war .war-district.has-face { grid-template-columns: 44px 1fr auto; }
.war .war-district.has-face b, .war .war-district.has-face span, .war .war-district.has-face em { grid-column: 2; }
.war .war-district.has-face i { grid-column: 3; }
.war .war-district-face { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 10px;
  object-fit: cover; object-position: 50% 20%; align-self: center; }
.war .war-post-face { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; object-position: 50% 20%; flex: none; }

/* Штабы организаций (18.10.2026). */
.war-seats { display: grid; gap: 8px; margin: 10px 0; }
.war-seat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.war-seat { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px 7px; text-align: center;
  background: linear-gradient(180deg, rgba(198, 160, 92, 0.08), transparent 70%), var(--void-2);
  border: 1px solid var(--line-soft); border-radius: 4px;
  animation: war-seat-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.war-seat img, .war-seat > i { width: 54px; height: 54px; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gold), 0 4px 14px rgba(0, 0, 0, 0.5); display: grid; place-items: center; }
.war-seat b { font-size: 12px; line-height: 1.2; }
.war-seat em { font-style: normal; font-size: 10.5px; opacity: 0.65; }
.war-seat.is-gone { filter: grayscale(1); opacity: 0.55; }
@keyframes war-seat-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .war-seat { animation: none; } }

/* Сезон войны (18.10.2026). */
.war-season { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.war-season li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px;
  background: var(--void-2); border-left: 2px solid var(--line-soft); animation: war-seat-in 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 40ms); }
.war-season li:nth-child(-n+3) { border-left-color: var(--gold); }
.war-season li.is-mine { background: linear-gradient(90deg, rgba(198, 160, 92, 0.15), transparent 70%), var(--void-2); }
.war-season b { font-family: var(--font-data); color: var(--gold); }
.war-season em { font-style: normal; font-size: 12px; color: var(--ink-dim); }