.army-shell {
  /* Szerokość bocznego panelu w siatce .army-content (zob. też media poniżej). */
  --army-side-w: 340px;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0.65rem 1rem 1rem;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 0.45rem;
}

.army-content {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w);
  grid-template-areas: "setup main detail";
  gap: 0.5rem 1rem;
  min-height: 0;
  align-items: start;
}

/* Ranking i drzewko: środek rośnie do szerokości tabeli (drzewka), ale tylko do miejsca, które zostaje po
   bocznych panelach — boki zachowują szerokość, a tabela (drzewko) przewija się dopiero, gdy
   brakuje miejsca. Zakładka nie ma wtedy limitu 1560 px, jak Wędrowcy. Pozostałe
   zakładki bez zmian (ich środek to 1fr). */
.army-shell.is-rank,
.army-shell.is-tree {
  max-width: none;
}

.army-shell.is-rank .army-content,
.army-shell.is-tree .army-content {
  grid-template-columns: var(--side-w) minmax(0, max-content) var(--side-w);
  grid-template-areas: "setup main detail";
  justify-content: center;
}

/* .army-main, .army-detail: patrz components.css (card) */

/* Słupek jak w polityce: karty (filtry, zestawy planu) osobno, z przerwą. */
.army-setup {
  grid-area: setup;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Sekcja lewego panelu: ustawienia tylko dla bieżącej zakładki. */
/* .army-side, .army-side-body: patrz components.css (card-stack) */

/* .army-side: patrz components.css (card) */

.army-side .char-field,
.army-side .army-sets {
  margin: 0;
}

/* Karta „Zapisane plany” jest już ramką — fieldset w środku nie dokłada drugiej. */
.army-side .army-sets {
  border: none;
  padding: 0;
}

.army-main {
  grid-area: main;
  min-height: 0;
}

.army-detail {
  grid-area: detail;
}

.army-view {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Klasy z display:flex/grid nadpisują atrybut hidden — bez tego wszystkie widoki
   (drzewko, ranking, porównanie, planer) i pusta lista wyników były widoczne naraz. */
.army-shell [hidden] {
  display: none !important;
}

/* --- Pola formularzy --- */

.army-plan-table input[type="number"] {
  width: 100%;
  min-width: 0;
  background: rgba(36, 28, 20, 0.75);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-md);
  font: 500 var(--fs-md) var(--font-body);
  padding: 0.4rem 0.6rem;
}

.army-shell button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.army-status {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.army-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-2);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.army-link:hover {
  text-decoration: underline;
}

/* --- Wyszukiwarka jednostki --- */

.army-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.3rem;
}

.army-search-result {
  appearance: none;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0.35rem 0.5rem;
  color: var(--ink);
  cursor: pointer;
  font: 600 var(--fs-md) var(--font-body);
}

.army-search-result:hover,
.army-search-result:focus-visible {
  background: rgba(196, 92, 38, 0.22);
  outline: none;
}

.army-search-result-meta {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --- Przełącznik widoku --- */

.army-view-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Jedna cyfra to koło (wysokość = min. szerokość), każda kolejna poszerza pigułkę. */
.army-tab-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.32em;
  border-radius: var(--radius-pill);
  background: rgba(232, 194, 122, 0.22);
  color: var(--ink);
  font-size: var(--fs-2xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.army-tab-count[hidden] {
  display: none;
}

/* --- Drzewko awansu --- */

.army-tree-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(26, 22, 18, 0.35);
}

.army-tree-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  list-style: none;
  font: 600 1.02rem var(--font-display);
  color: var(--accent-2);
  user-select: none;
}

.army-tree-group-title::-webkit-details-marker {
  display: none;
}

.army-tree-group-title::before {
  content: "▸";
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: transform 0.15s ease;
}

.army-tree-group[open] > .army-tree-group-title::before {
  transform: rotate(90deg);
}

.army-tree-group-count {
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(232, 194, 122, 0.12);
  color: var(--muted);
  font: 600 var(--fs-2xs) var(--font-body);
  line-height: 1.2rem;
}

.army-tree {
  --army-node-width: 168px;
  --army-tier-gap: 6rem;
  --army-tier-half-gap: 3rem;
  --army-tier-span: calc(var(--army-node-width) + var(--army-tier-gap));
  --army-tree-padding-x: 0.7rem;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-x: auto;
  padding: 0.2rem var(--army-tree-padding-x) 0.8rem;
  cursor: grab;
}

.army-tree.is-panning {
  cursor: grabbing;
  user-select: none;
}

.army-tree.is-panning .army-node {
  cursor: grabbing;
  pointer-events: none;
}

.army-tier-guides {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.army-tier-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(232, 194, 122, 0.26) 0 4px, transparent 4px 8px);
}

/* Gałąź: węzeł po lewej, kolumna dzieci po prawej, bez zawijania. */
.army-branch {
  --army-node-mid: 1.45rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: max-content;
}

.army-children {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: var(--army-tier-gap);
}

/* Kreska od rodzica do pionowej szyny dzieci. */
.army-children::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--army-node-mid);
  width: 0.9rem;
  border-top: 1px solid var(--line);
}

.army-child {
  --army-extra-tier-gap: 0px;
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* Pionowa szyna + kreska do dziecka. */
.army-child::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--army-tier-gap) + 0.9rem);
  top: var(--army-node-mid);
  width: calc(var(--army-tier-gap) - 0.9rem + var(--army-extra-tier-gap));
  border-top: 1px solid var(--line);
}

.army-child::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--army-tier-gap) + 0.9rem);
  top: 0;
  bottom: -0.45rem;
  border-left: 1px solid var(--line);
}

.army-child:first-child::after {
  top: var(--army-node-mid);
}

.army-child:last-child::after {
  bottom: auto;
  height: var(--army-node-mid);
}

.army-child:first-child:last-child::after {
  display: none;
}

.army-edge-cost {
  position: absolute;
  left: calc(-1 * var(--army-tier-gap));
  top: 0;
  width: var(--army-tier-gap);
  height: 100%;
  pointer-events: none;
}

.army-edge-tag {
  position: absolute;
  z-index: 1;
  right: 0.15rem;
  top: calc(var(--army-node-mid) - 0.6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg1);
  color: var(--muted);
  font-size: var(--fs-2xs);
  line-height: 1.1rem;
  white-space: nowrap;
  cursor: help;
  pointer-events: auto;
}

.army-edge-requirement {
  min-width: 0;
}

.army-edge-requirement:empty {
  display: none;
}

.army-edge-gold {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.army-node {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: var(--army-node-width);
  min-height: 2.9rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(36, 28, 20, 0.92);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: 600 var(--fs-sm)/1.2 var(--font-body);
  scroll-margin: 4rem;
}

.army-node:hover {
  border-color: var(--selected-border);
}

.army-node.is-selected {
  border-color: var(--selected-border);
  box-shadow: 0 0 0 1px var(--selected-border) inset;
  background: var(--selected-bg);
}

.army-node-name {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.army-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-weight: 400;
  color: var(--muted);
}

.army-node-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: rgba(232, 194, 122, 0.12);
  font-size: var(--fs-2xs);
  line-height: 1.1rem;
  white-space: nowrap;
}

.army-node-tier {
  color: var(--accent-2);
  font-weight: 600;
}

.army-node-culture {
  background: rgba(196, 92, 38, 0.25);
  color: var(--ink);
}

.army-node-ref {
  min-height: 0;
  width: auto;
  max-width: 168px;
  margin-top: calc(var(--army-node-mid) - 0.8rem);
  padding: 0.2rem 0.5rem;
  border-style: dashed;
  background: transparent;
  font-weight: 500;
  font-size: var(--fs-xs);
}

.army-node-ref .army-node-name {
  color: var(--muted);
}

/* --- Ranking --- */

.army-rank-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.army-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}

.army-check.is-disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

.army-check input[type="checkbox"] {
  accent-color: var(--selected-fill);
}

.army-rank-reset {
  display: flex;
  justify-content: flex-end;
}

/* --- Ranking: rozwijana lista „Uzbrojenie” --- */

/* Bez .char-field: jego reguła `input` rozciągałaby checkboxy jak pola tekstowe. */
.army-filter {
  display: grid;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.army-filter-option input[type="checkbox"] {
  flex: 0 0 auto;
}

.army-filter-dropdown {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(36, 28, 20, 0.75);
}

/* Zamknięty filtr wygląda jak pole .ui-select-btn (style.css): ten sam tekst, odstępy i strzałka,
   bo w jednym panelu stoją obok siebie. Otwarty odwraca strzałkę. */
.army-filter-dropdown:has(> .army-filter-summary:hover),
.army-filter-dropdown:focus-within {
  border-color: var(--accent-2);
}

.army-filter-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font: 500 var(--fs-base) var(--font-body);
  line-height: 1.25;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.army-filter-summary::-webkit-details-marker {
  display: none;
}

.army-filter-dropdown[open] > .army-filter-summary {
  background-image: linear-gradient(135deg, transparent 50%, var(--muted) 50%),
    linear-gradient(225deg, transparent 50%, var(--muted) 50%);
  background-position: calc(100% - 14px) 45%, calc(100% - 9px) 45%;
}

.army-filter-summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .army-filter-summary {
    min-height: 2.5rem;
  }
}

.army-filter-summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.army-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 340px;
  overflow-y: auto;
  padding: 0.35rem 0.6rem 0.5rem;
  border-top: 1px solid var(--line);
}

.army-filter-group {
  margin-top: 0.35rem;
  color: var(--accent-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.army-filter-group:first-child {
  margin-top: 0;
}

.army-filter-option {
  display: flex;
  width: 100%;
}

.army-filter-name {
  flex: 1;
  min-width: 0;
}

.army-filter-count {
  color: var(--muted);
  font-size: var(--fs-2xs);
}

.army-filter-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.army-filter-match {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.army-filter-clear {
  margin-left: auto;
}

.army-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Tabela nie dotyka krawędzi panelu: linia nagłówka i podświetlenie wiersza kończą się
     tak jak w kartach Okrętów i Ekwipunku (0.85rem od brzegu panelu). */
  padding: 0 0.85rem;
}

/* Tabela jak u wędrowców: jeden wiersz na jednostkę. Bez własnego overflow — przewija
   się .army-main, więc nagłówek przyklejony do góry trzyma się właśnie jego. Lite tła
   przyklejonych komórek jak w .wanderers-shell.
   Szerokość treści, nie widoku: kolumny wychodzą poza panel i przewijają się w nim.
   Minimum to szerokość panelu. Obwódki tu nie ma — krawędź panelu jest krawędzią tabeli. */
.army-rank-table {
  /* Najmniejsza szerokość nazwy, w rem; na telefonie mniejsza (sekcja @media 560px).
     Lita barwa nagłówka i zaznaczenia (--wnd-solid*) jest wspólna z innymi rankingami
     w components.css (.ui-rank-table). */
  --army-name-min: 17rem;
  width: max-content;
  min-width: 100%;
}

/* Ranking jest całą treścią środka: padding zdejmowałby drugą ramkę wokół tabeli. */
.army-shell.is-rank .army-main {
  padding: 0;
}

/* Brak katalogu zostawia sam komunikat — odstęp od ramki panelu, jak w innych widokach. */
.army-shell.is-rank .army-main > .army-view > .char-empty {
  margin: 0.85rem;
}

/* Kultura, formacja i znaczniki w tej samej linii co nazwa; nazwa ucinana wielokropkiem. */
.army-rank-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.army-rank-name .wnd-title-btn {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
}

/* Szerokość nazwy z ikonami (wanderers.css daje 13rem — za mało na kultury i znaczniki).
   army.js (fitRankNameColumn) ustawia --army-name-w: rośnie, gdy tabela mieści się bez
   przewijania, do najszerszej nazwy albo do miejsca po bocznych panelach. Minimum to
   --army-name-min (17rem, na telefonie 10rem). */
.army-rank-table .wnd-table .wnd-first {
  width: var(--army-name-w, var(--army-name-min));
  min-width: var(--army-name-w, var(--army-name-min));
  max-width: var(--army-name-w, var(--army-name-min));
}

/* Przycisk „+”, numer miejsca i kolumny umiejętności mają stałą szerokość także w nagłówku,
   bo inaczej pusty wynik (bez wierszy) zwężałby tabelę, a z nią środek panelu. */
.army-rank-table .wnd-table th:first-child,
.army-rank-table .wnd-table td:first-child {
  width: 3.2rem;
  min-width: 3.2rem;
  max-width: 3.2rem;
}

.army-rank-table .wnd-table .wnd-th-skill {
  width: 2.4rem;
  min-width: 2.4rem;
}

.army-rank-name .army-rank-icon-text {
  min-width: 0;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.army-rank-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
}

/* Tier w linii z ikonami widać tylko na telefonie (sekcja @media 560px). */
.army-rank-tier-sm {
  display: none;
}

.army-rank-compare {
  width: 2.2rem;
  height: 2rem;
  padding: 0;
  font-weight: 700;
}

.army-rank-compare.is-active {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* --- Porównanie --- */

.army-compare-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.army-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(196, 92, 38, 0.25);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.army-compare-chip button,
.army-compare-remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
}

.army-compare-chip button:hover,
.army-compare-remove:hover {
  color: var(--danger);
}

.army-compare-chip .army-link {
  color: var(--accent-2);
  font-size: var(--fs-sm);
  line-height: 1.3;
  padding: 0;
}

.army-compare-chip .army-link:hover {
  color: var(--accent-2);
}

.army-compare-table-wrap {
  overflow-x: auto;
}

/* .army-compare-table: patrz components.css (table-base) */

.army-compare-table th,
.army-compare-table td {
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.army-compare-table td {
  font-variant-numeric: tabular-nums;
}

.army-compare-table thead th {
  vertical-align: bottom;
  border-bottom-color: var(--accent-2);
}

.army-compare-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.3rem;
  white-space: normal;
  min-width: 8rem;
}

.army-compare-table tbody th:first-child,
.army-compare-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg1);
  color: var(--muted);
  font-weight: 600;
}

.army-compare-section th {
  padding-top: 0.75rem;
  color: var(--accent-2) !important;
  font: 600 var(--fs-base) var(--font-display);
  border-bottom: 0;
}

/* Tytuł sekcji (Basics, Skills…) przykleja się przy przesuwaniu w bok, tak jak opis wiersza.
   left = padding komórki, żeby po przyklejeniu stał w tym samym miejscu. */
.army-compare-section-label {
  position: sticky;
  left: 0.55rem;
  display: inline-block;
}

.army-compare-best {
  color: var(--accent-2);
  font-weight: 700;
  background: rgba(232, 194, 122, 0.08);
}

/* --- Planer armii --- */

.army-planner-summary {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.army-planner-units {
  padding-top: 0.15rem;
}

.army-plan-table-wrap {
  overflow-x: auto;
}

/* .army-plan-table: patrz components.css (table-base) */

.army-plan-table th,
.army-plan-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.army-plan-table th {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.army-plan-table .army-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.army-plan-table input[type="number"] {
  width: 5rem;
  padding: 0.2rem 0.4rem;
}

.army-plan-sub {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.army-plan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
}

.army-plan-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.6rem;
  background: rgba(36, 28, 20, 0.6);
}

.army-plan-stat span {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.army-plan-stat strong {
  font-size: 1.15rem;
  color: var(--accent-2);
}

.army-plan-stat small {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

/* --- Karta jednostki --- */

.army-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.4rem 0 0.5rem;
}

.army-card-name {
  font: 700 1.3rem/1.15 var(--font-display);
  color: var(--ink);
}

.army-card-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.army-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

.army-card-actions .char-save {
  padding: calc(0.35rem - var(--text-nudge)) 0.7rem calc(0.35rem + var(--text-nudge));
  font-size: var(--fs-sm);
}

.army-card-actions .ghost {
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-sm);
}

.army-card-section {
  margin-top: 0.9rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--accent-2);
}

/* .army-card-tabs: patrz components.css (segment) */

.army-card-tab {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .army-card-tab.is-active: patrz components.css (tabs-selected) */

.army-card-tab-panel {
  min-width: 0;
}

.army-card-tab-panel > .army-card-section:first-child {
  margin-top: 0.15rem;
}

.army-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.35rem;
}

/* Statystyki karty jednostki: kafelki dopasowują szerokość do treści (np. długa rasa w TAOM). */
.army-tiles.army-tiles-flex {
  display: flex;
  flex-wrap: wrap;
}

.army-tiles.army-tiles-flex .army-tile {
  flex: 0 1 auto;
  min-width: 72px;
  max-width: 100%;
}

.army-tile.is-text .army-tile-value {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.army-tiles-armor {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.35rem;
}

.army-tile {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(26, 22, 18, 0.45);
  min-width: 0;
}

.army-tile.is-total {
  border-color: rgba(232, 194, 122, 0.5);
}

/* Pięć kafelków w wąskim panelu: mniejszy margines w poziomie, żeby podpis
   w skali --fs-2xs („Głowa”, „Голова”) nie ucinał się wielokropkiem. */
.army-tiles-armor .army-tile {
  padding-inline: 0.35rem;
}

.army-tiles-armor .army-tile-value {
  text-align: center;
  /* Stała wysokość wiersza: po zmniejszeniu czcionki (fitTileValues) liczba
     zostaje w pionie tam, gdzie liczby o pełnym rozmiarze. */
  line-height: 1.2rem;
}

.army-tiles-armor .army-tile-label {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  min-height: 1.45rem;
}

.army-armor-icon {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
  object-fit: contain;
}

.army-armor-bit {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
}

.army-armor-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.35rem;
  margin: 0.15rem 0 0.35rem;
}

.army-row-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.wnd-armor-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}

.army-tile-label {
  font-size: var(--fs-2xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.army-tile-value {
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.army-tile-value small {
  color: var(--muted);
  font-weight: 400;
}

.army-skill-group {
  margin: 0.7rem 0 0.15rem;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.army-card-tab-panel > .army-skill-group:first-child,
.ency-section > .army-skill-group:first-child {
  margin-top: 0.15rem;
}

.army-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 2.2rem;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  margin-top: 0.12rem;
}

.army-skill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.army-skill-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.army-skill-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(214, 185, 140, 0.15);
  overflow: hidden;
}

.army-skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--selected-fill), var(--accent-2));
}

.army-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.army-chip-label {
  min-width: 100%;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.army-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(36, 28, 20, 0.85);
  color: var(--ink);
  font: 600 var(--fs-xs) var(--font-body);
  cursor: pointer;
}

.army-chip:hover:not(:disabled) {
  border-color: var(--selected-border);
}

.army-chip small {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-2xs);
}

.army-chip.is-current {
  border-color: var(--accent-2);
  color: var(--accent-2);
  cursor: default;
}

/* Drabinka awansu: tier | szyna z kropką | nazwa (ucięta) + koszt kroku pod nią. */
.army-ladder {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.army-ladder-row {
  display: grid;
  grid-template-columns: 2.1rem 1rem minmax(0, 1fr);
  align-items: stretch;
  column-gap: 0.35rem;
}

.army-ladder-tier {
  align-self: center;
  text-align: right;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.army-ladder-rail {
  position: relative;
}

.army-ladder-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}

.army-ladder-row:first-child .army-ladder-rail::before {
  top: 50%;
}

.army-ladder-row:last-child .army-ladder-rail::before {
  bottom: 50%;
}

.army-ladder-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--bg0);
  transform: translate(-50%, -50%);
}

.army-ladder-row.is-current .army-ladder-rail::after {
  border-color: var(--accent-2);
  background: var(--accent-2);
}

.army-ladder-body {
  appearance: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink);
  font: 600 var(--fs-xs) var(--font-body);
  text-align: left;
  cursor: pointer;
}

.army-ladder-body:hover:not(:disabled) {
  border-color: var(--selected-border);
}

.army-ladder-row.is-current .army-ladder-body {
  color: var(--accent-2);
  cursor: default;
}

.army-ladder-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.army-ladder-cost {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-2xs);
}

/* Wiersz „Awansuje na (jedną z)” pod bieżącą jednostką: szyna bez kropki. */
.army-ladder-label .army-ladder-rail::after {
  content: none;
}

.army-ladder-label-text {
  padding: 0.35rem 0.4rem 0.1rem;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

/* Opcje awansu: pień idzie dalej szyną (├, ostatnia └), odnoga w bok do kropki — wybór, nie kolejne szczeble. */
.army-ladder-row.is-branch,
.army-ladder-row.army-ladder-label {
  grid-template-columns: 2.1rem 2rem minmax(0, 1fr);
}

.army-ladder-row.is-branch .army-ladder-rail::before,
.army-ladder-row.army-ladder-label .army-ladder-rail::before {
  left: 0.5rem;
}

.army-ladder-row.is-branch .army-ladder-rail::after {
  left: 0.5rem;
  width: 1rem;
  height: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  transform: none;
}

.army-ladder-dot {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--bg0);
  transform: translate(-50%, -50%);
}

/* Nagłówek „Awanse” z łącznym kosztem linii po prawej. */
.army-ladder-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 0.6rem;
}

.army-ladder-total {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font: 400 var(--fs-2xs) var(--font-body);
  color: var(--muted);
}

.army-ladder-total-value {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-xs);
}

/* Drogi zdobycia jednostki (zakładka Rekrutacja, każdy profil; w TAOM surowiec u góry): tytuł
   i koszt w jednej linii, szczegóły (gdzie, z czego, warunki) drobniej pod spodem. */
.army-taom-res-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.25em;
  vertical-align: -0.2em;
  object-fit: contain;
}

.army-taom-res-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
  margin-top: 0.35rem;
}

.army-taom-way-list-rows {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.army-taom-way {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(26, 22, 18, 0.45);
  font-size: var(--fs-sm);
  min-width: 0;
}

.army-taom-way-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.army-taom-way-title {
  min-width: 0;
}

.army-taom-way-cost {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.army-taom-way-cost small {
  margin-left: 0.3em;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.army-taom-way-line {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.army-taom-way-line .army-link,
.army-taom-way-line a {
  font-size: inherit;
}

.army-eq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0;
}

/* .army-eq-tab: patrz components.css (pill) */

/* .army-eq-tab.is-active: patrz components.css (tabs-selected) */

.army-eq-nav {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0.15rem;
}

.army-eq-nav.is-single {
  grid-template-columns: 1fr;
}

.army-eq-nav-label {
  text-align: center;
  color: var(--accent-2);
  font: 700 var(--fs-xs) var(--font-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.army-eq-nav-btn {
  appearance: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(36, 28, 20, 0.75);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.army-eq-nav-btn:hover,
.army-eq-nav-btn:focus-visible {
  border-color: var(--selected-border);
  color: var(--accent-2);
}

.army-eq-list {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
}

.army-eq-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--line);
}

.army-eq-slot {
  color: var(--muted);
  font-size: var(--fs-2xs);
  padding-top: 0.05rem;
}

.army-eq-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.army-eq-name {
  color: var(--ink);
}

.army-eq-stats {
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.army-eq-list .char-note {
  margin-top: 0.4rem;
  color: var(--muted);
}

/* --- Filtr formacji w drzewku --- */

.army-formation-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* .army-formation-pill (baza, :hover, .is-active): patrz components.css (pill, tabs-selected) */

.army-node.is-dimmed {
  opacity: 0.38;
}

.army-node.is-dimmed:hover,
.army-node.is-dimmed.is-selected {
  opacity: 1;
}

/* --- Planer: awans do celu --- */

.army-plan-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: var(--fs-2xs);
}

.army-plan-target select {
  max-width: 100%;
  font-size: var(--fs-xs);
}

@media (max-width: 1200px) {
  .army-shell {
    --army-side-w: 300px;
  }
}

@media (max-width: 1100px) {
  .army-content {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "tabs"
      "setup"
      "main"
      "detail";
    row-gap: 0.75rem;
  }

  .army-shell.is-rank .army-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "setup"
      "main"
      "detail";
  }

  /* Drzewko na wąskim ekranie: jedna kolumna jak wyżej (szeroki układ z .is-tree wyżej to nadpisuje). */
  .army-shell.is-tree .army-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "setup"
      "main"
      "detail";
  }

  /* Ranking na wąskim ekranie przewija się w samym panelu, nie na całej stronie, więc nagłówek
     kolumn (sticky) zostaje na górze tabeli. Wysokość liczona od viewportu i nagłówka strony;
     gdy panel dojdzie do końca, przewijanie strony nadal działa. */
  .army-shell.is-rank #army-main {
    max-height: calc(100vh - var(--site-header-h) - 1.5rem);
    max-height: calc(100dvh - var(--site-header-h) - 1.5rem);
  }

  /* Zakładki karty jednostki zostają przy górze szuflady podczas przewijania karty. */
  #army-detail .army-card-tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(24, 19, 14, 0.97);
  }
}

@media (max-width: 560px) {
  .army-shell {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  body.page-army .page-subnav .army-view-tabs {
    grid-template-columns: 1fr 1fr;
  }

  /* Na telefonie nazwa ma wąską kolumnę, a ikony (z tierem) spadają pod nią, żeby obok od razu
     była suma; kolumny umiejętności przewijają się w poziomie. */
  .army-rank-table {
    --army-name-min: 8.5rem;
  }

  .army-rank-table .wnd-table th:first-child,
  .army-rank-table .wnd-table td:first-child {
    width: 2.6rem;
    min-width: 2.6rem;
    max-width: 2.6rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  /* Odstęp od „+” do nazwy: mały padding po obu stronach zamiast 0.45rem. */
  .army-rank-table .wnd-table .wnd-first {
    padding-left: 0.2rem;
  }

  .army-rank-name {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }

  .army-rank-name .wnd-title-btn {
    flex: 1 1 100%;
  }

  .army-rank-tier-sm {
    display: inline;
    font-weight: 700;
    color: var(--muted);
  }

  .army-col-hide-sm {
    display: none;
  }

  .army-tiles-armor {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .army-skill-row {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 2.2rem;
  }

  /* Porównanie: węższa etykieta wiersza i zawijanie wartości, żeby dwie jednostki mieściły się
     bez przewijania; „×” przy nazwie schodzi pod nią, gdy brakuje miejsca. */
  .army-compare-table th,
  .army-compare-table td {
    white-space: normal;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .army-compare-table td:first-child,
  .army-compare-table tbody th:first-child {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
  }

  .army-compare-head {
    min-width: 5rem;
    flex-wrap: wrap;
  }

  /* Ranking: nazwa w dwóch wierszach zamiast wielokropka; pełna nazwa jest też w karcie. */
  .army-rank-table .wnd-title-btn {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Planer: węższe odstępy i pole liczby, żeby kolumna „×” mieściła się przy 360px. */
  .army-plan-table th,
  .army-plan-table td {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .army-plan-table input[type="number"] {
    width: 4.25rem;
  }
}

.army-3d {
  position: relative;
  margin: 0 0 0.6rem;
}

.army-3d-stage {
  position: relative;
  height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
  overflow: hidden;
  cursor: grab;
  /* Przeciąganie w poziomie obraca, w pionie przewija stronę (telefon). */
  touch-action: pan-y;
  user-select: none;
}

.army-3d-stage:active {
  cursor: grabbing;
}

.army-3d-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.army-3d-status {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  color: var(--muted, var(--ink));
  pointer-events: none;
  z-index: 6; /* nad wskaźnikiem ładowania (viewer3d.css) */
}

.army-3d-status[hidden],
.army-3d-note[hidden] {
  display: none;
}

.army-3d-note {
  margin: 0.35rem 0 0;
  font-size: 0.85em;
}

/* Ikony z gry w karcie jednostki (ui-icons.js). */
.army-meta-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.3em;
  vertical-align: -0.2em;
  object-fit: contain;
}

/* Znaczniki jednostki (tarcza, miotana, dwuręczna) biorą te same flagi co kowalstwo.
   Plik ma własny rozmiar (40 px) i obok niego zostawało stare SVG — w rankingu
   i na karcie flaga ma wypełniać ten sam kwadrat co kultura i formacja. */
.troop-tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #a7936c;
  vertical-align: -0.2em;
}

.troop-tag-icon svg,
.troop-tag-icon img,
.troop-tag-icon .troop-tag-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.troop-tag-icon .craft-flag-img + svg {
  display: none;
}

.army-rank-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  object-fit: contain;
}

.army-tier-icon {
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  vertical-align: -0.1em;
  object-fit: contain;
}

/* Miniatura przedmiotu w wierszu wyposażenia: slot | miniatura | nazwa. */
.army-eq-item {
  grid-template-columns: 5.5rem 4.4rem minmax(0, 1fr);
}

.army-eq-item > .army-eq-main {
  grid-column: 3;
}

.army-eq-thumb {
  width: 4.4rem;
  height: 2.2rem;
  object-fit: contain;
}

.army-rank-pager {
  padding: 0.55rem 0.85rem 0.7rem;
  border-top: 1px solid var(--line);
}

.army-rank-name .army-rank-icon-wrap {
  display: inline-flex;
  flex: none;
}

.army-rank-name .army-rank-icon-text {
  font-size: var(--fs-xs);
}

/* Dotyk (pointer: coarse): cele dotknięcia co najmniej 36px. Część klas (.army-check, .army-card-tab,
   .army-chip, .army-skill-label, .army-eq-nav-btn) używają też heroes, quests,
   kowalstwo i encyklopedia, więc zmiana obejmuje te strony. */
@media (pointer: coarse) {
  .army-check,
  .army-filter-option {
    min-height: 2.25rem;
  }

  .army-filter-option {
    padding-block: 0.3rem;
    align-items: center;
  }

  .army-compare-remove,
  .army-compare-chip > button:not(.army-link) {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  .army-plan-table input[type="number"] {
    min-height: 2.25rem;
  }

  .army-plan-table .ghost {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  .army-card-actions .char-save,
  .army-card-actions .ghost,
  .army-card-tab {
    min-height: 2.25rem;
  }

  .army-eq-nav {
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  }

  .army-eq-nav-btn {
    width: 2.25rem;
    height: 2.25rem;
  }

  .army-eq-name {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
  }

  .army-skill-row > .army-skill-label {
    min-height: 2.25rem;
    line-height: 2.25rem;
  }

  .army-chip {
    min-height: 2.25rem;
  }

  .army-rank-pager > button.ghost {
    min-width: 2.75rem;
    min-height: 2.5rem;
  }
}

/* Przyciski modelu 3D w karcie (troop_3d.js): światło, broń, postawa i koń po lewej, zapis PNG i powiększenie
   po prawej — w pasie sceny z viewer3d.css (.v3d-band), który przy wąskiej karcie przewija się w bok.
   Miniatura broni w dłoni i konia na przycisku (troop_3d.js paintThumb): ta sama ramka co ikona w rogu. */
.army-3d-weapon-thumb,
.army-3d-mount-thumb {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  object-fit: contain;
}

/* Przełącznik koni: pieszo (aria-pressed=false) miniatura konia przygaszona; bez miniatury napis „Koń”. */
.army-3d-mount-btn[aria-pressed="false"] .army-3d-mount-thumb {
  opacity: 0.45;
}

.army-3d-mount-word {
  font: 600 0.7rem/1 var(--font-body);
  color: var(--ink);
}