/* Zakładka Okręty — ranking kadłubów, gdzie kupić ulepszenia i stocznia. Układ jak handel.css.
 * Pasek podzakładek i zakładka główna mają te same reguły co Handel (style.css), tylko
 * dopisane dla `body.page-ships`, żeby nie ruszać wspólnych list selektorów. */

/* Poza zakładką Okręty cała powłoka znika (jak w pozostałych zakładkach). */
body:not(.page-ships) .ships-shell {
  display: none !important;
}

.ships-shell {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: calc(100dvh - var(--site-header-h));
  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;
}

/* Ranking i Ulepszenia: dwie kolumny (tabela ma szerokość), statystyki w stoczni dochodzą trzecią. */
.ships-content {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  grid-template-areas: "setup main";
  gap: 0.5rem 1rem;
  min-height: 0;
  align-items: start;
}

.ships-content.has-detail {
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(340px, 380px);
  grid-template-areas: "setup main detail";
}

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

.ships-setup {
  grid-area: setup;
}

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

/* Bez position:relative — nadpisywałoby .panel-sticky (jak w handel.css). */
.ships-detail {
  grid-area: detail;
}

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

/* Klasy z display:flex/grid nadpisują atrybut hidden — bez tego widoki byłyby widoczne naraz. */
.ships-shell [hidden] {
  display: none !important;
}

.ships-note {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--muted);
  line-height: 1.45;
}

.ships-status {
  margin: 0;
}

.ships-unavailable {
  margin: 0;
}

/* --- Przełącznik widoku w pasku podzakładek (jak .handel-view-tabs) --- */

body.page-ships .page-subnav {
  display: flex;
}

body.page-ships .page-subnav-anchor > .ships-view-tabs:not([hidden]) {
  display: grid !important;
}

.page-subnav .ships-view-tabs {
  grid-area: unset;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  width: auto;
  margin: -1px 0 0;
  padding: 0.2rem 0.45rem 0.3rem;
  gap: 0;
  box-sizing: border-box;
  border: 1px solid var(--selected-border);
  border-radius: 0 0 10px 10px;
  background:
    linear-gradient(to bottom, var(--selected-bg), rgba(196, 92, 38, 0.06) 75%),
    rgb(22, 18, 14);
  box-shadow:
    inset 0 1px 0 rgba(232, 194, 122, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.35);
  overflow-x: auto;
  scrollbar-width: none;
}

.page-subnav .ships-view-tabs::-webkit-scrollbar {
  display: none;
}

body.page-ships .top-tab[href="/ships"] {
  color: var(--accent-2);
  background: var(--selected-bg);
}

/* Zakładka główna z obwódką i łącznikiem jak w Handlu (style.css, zakładka „aria-current”). */
body.page-ships .top-tab[aria-current="page"] {
  position: relative;
  z-index: 2;
  border-color: transparent;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 1px 0 rgba(232, 194, 122, 0.08);
  margin-bottom: calc(-1 * var(--top-nav-pad-b));
  padding-bottom: calc(0.42rem + var(--top-nav-pad-b));
}

body.page-ships .top-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -2px;
  border: 1px solid var(--selected-border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

/* --- Panel boczny: pola i przełącznik trybu --- */

.ships-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}

.ships-check input {
  margin-top: 0.2rem;
}

/* Podpowiedzi wyszukiwarki pod polem (jak w encyklopedii): lista przewijana, bez ramki wokół każdej pozycji. */
.ships-search {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

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

.ships-search-result {
  appearance: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  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-sm) var(--font-body);
}

.ships-search-result:hover,
.ships-search-result:focus-visible {
  background: rgba(232, 194, 122, 0.12);
}

.ships-search-lead {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ships-search-lead .ships-class-icon {
  margin-left: 0;
}

.ships-search-result small {
  font-weight: 400;
  font-size: var(--fs-2xs);
  color: var(--muted);
  white-space: nowrap;
}

.ships-mode {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ships-mode-title {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.ships-mode-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

/* .ships-mode-btn: to samo co .ui-tab (style.css) — przyciski mają obie klasy w index.html. */

.ships-clear {
  justify-self: start;
}

/* --- Nagłówki i tekst w panelu środkowym --- */

.ships-section-title {
  margin: 0;
  color: var(--accent-2);
  font: 600 1rem var(--font-display);
}

.ships-title-link {
  font-size: 1rem;
}

.ships-subhead {
  margin: 0.4rem 0 0;
  font: 600 var(--fs-sm) var(--font-body);
  color: var(--accent-2);
  letter-spacing: 0.02em;
}

/* Sekcja pod modelem: słowo między zanikającymi kreskami, ten sam krój co nazwa kadłuba. */
.ships-yard-upgrades {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0.15rem 0 0.75rem;
  color: var(--accent-2);
  font: 600 1.35rem var(--font-display);
  letter-spacing: 0.03em;
  line-height: 1;
}

.ships-yard-upgrades::before,
.ships-yard-upgrades::after {
  content: "";
  flex: 1 1 2.5rem;
  max-width: 6.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 75%, transparent));
}

.ships-yard-upgrades::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 75%, transparent), transparent);
}

/* Nazwa klasy w nagłówku: ikona typu w jednej linii z tekstem, flex centruje ją w pionie. */
.ships-class-name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ships-class-name .ships-class-icon {
  margin: 0;
}

/* Tabliczka kadłuba nad modelem: nazwa, klasa i cena, pod spodem żagle i wiosła. */
.ships-yard-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.1rem 0.75rem 0.15rem;
}

.ships-yard-head .ships-section-title {
  font-size: 1.7rem;
  line-height: 1.1;
}

.ships-yard-head .ships-title-link {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
}

.ships-yard-head::after {
  content: "";
  width: min(18rem, 72%);
  height: 1px;
  margin-top: 0.15rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 75%, transparent), transparent);
}

.ships-yard-meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.ships-yard-head .ships-yard-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.45rem;
  max-width: 38rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.4;
}

.ships-yard-dot {
  color: var(--muted);
}

/* Ikony HUD z gry (okrety.js hudIcon): typ żagli, wiosła, broń ulepszenia. Brak pliku = brak elementu. */
.ships-hud-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

/* Kompas typu żagli to tarcza kątów wiatru: przy 18 px wzór sektorów się zlewa, więc większy. */
.ships-rigging .ships-hud-icon {
  width: 26px;
  height: 26px;
}

/* Ikona przy wartości w komórce rankingu (map_icons / stat_icons): stoi przed liczbą, liczba zostaje
   przy prawej krawędzi. Komórka ma wspólne .wnd-num (components.css). */
.ships-rank-table .ships-cell-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.3rem;
  object-fit: contain;
  vertical-align: middle;
}

/* Ikona za wartością (złoto przy cenie): odstęp z lewej, a nie z prawej. */
.ships-rank-table .ships-cell-icon.is-after {
  margin-right: 0;
  margin-left: 0.3rem;
}

.ships-rigging,
.ships-oars,
.ships-combat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.ships-combat {
  gap: 0.2rem;
  margin-left: 0.4rem;
}

.ships-yard-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.65rem;
  margin: 0.05rem 0 0;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.ships-yard-head .ships-rigging,
.ships-yard-head .ships-oars {
  padding: 0.28rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent-2) 42%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
}

.ships-slot-combat:empty {
  display: none;
}

.ships-slot-combat .ships-combat {
  margin-left: 0;
}

/* Pary „etykieta: wartość” (miasto, ulepszenie, cena). */
.ships-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 0.8rem;
  margin: 0;
  font-size: var(--fs-sm);
}

.ships-kv dt {
  color: var(--muted);
}

.ships-kv dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* --- Tabele (wzór: handel.css) --- */

.ships-table-wrap {
  overflow-x: auto;
}

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

/* .ships-table th, td, thead th, tbody tr:hover: patrz components.css (list-table) */
.ships-table thead th {
  white-space: normal;
}

.ships-table .ships-num,
.ships-table th.ships-num {
  text-align: right;
}

.ships-rank-table tr.is-unbuyable td {
  color: var(--muted);
}

.ships-row-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 0.08em;
  margin: 0 -0.08em;
  border-radius: var(--radius-xs);
  color: var(--ent-link);
  font: 600 var(--fs-md) var(--font-body);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Kolor i hover jak .ent-link (encyclopedia.css) — te same linki co w pozostałych zakładkach. */
.ships-row-link:hover,
.ships-row-link:focus-visible {
  color: var(--ent-link-hover);
  background: var(--ent-link-bg);
}

.ships-row-link:focus-visible {
  outline: 2px solid var(--ent-link);
  outline-offset: 1px;
}

a.ships-row-link {
  display: inline-block;
}

/* Klasa kadłuba w rankingu: ikona z gry (ship_icons/classes, 18 px) przed nazwą klasy; bez ikony sam tekst. */
.ships-class-cell {
  white-space: nowrap;
}

.ships-class-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 0.35rem;
  object-fit: contain;
  vertical-align: middle;
}

/* Ikona przed nazwą (ranking): odstęp z prawej, a nie z lewej. */
.ships-class-icon.is-lead {
  margin-left: 0;
  margin-right: 0.35rem;
}

/* Ikony z mapy gry (katalog map_icons): poziom stoczni w Ulepszeniach. */
.ships-yard-level-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.3rem;
  object-fit: contain;
  vertical-align: -3px;
}

/* Ikony statystyk w tabeli stoczni (mapa gry albo stat_icons): stoją za nazwą statystyki, przy jej ostatnim słowie. */
.ships-stat-last {
  white-space: nowrap;
}

.ships-head-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 0.3rem;
  object-fit: contain;
  vertical-align: -5px;
}

.ships-yard-level {
  white-space: nowrap;
}

/* Stocznia z cyfrą jak na mapie: shipyard_lvlN (sama cyfra u dołu pola) leży na ikonie Shipyard. */
.ships-yard-level-badge {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.ships-yard-level-badge .ships-yard-level-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.ships-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(120, 90, 70, 0.22);
  color: var(--muted);
  font-size: var(--fs-2xs);
  line-height: 1.15rem;
  white-space: nowrap;
  vertical-align: middle;
}

/* Lista ulepszeń i miast (widok Ulepszenia, panel stoczni). */
.ships-piece-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ships-piece-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  font-size: var(--fs-sm);
}

/* Ulepszenia i kultury na liście są linkami: rozmiar i krój z otoczenia (li / meta), kolor linku. */
.ships-piece-list .ships-row-link {
  font: inherit;
}

.ships-piece-meta {
  color: var(--muted);
  font-size: var(--fs-2xs);
}

/* Koszt zakupu kadłuba wg klasy w karcie ulepszenia: ikona klasy, nazwa, cena i złoto za wartością. */
.ships-cost-classes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
}

.ships-cost-class {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.ships-cost-class .ships-class-icon {
  margin: 0;
}

.ships-cost-name {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.ships-cost-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ships-cost-class .ships-cell-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Miniatury ulepszeń i kadłubów (bl_import/ship_icons.py); brak ikony = brak elementu. */
.ships-piece-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ships-piece-art {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.25);
}

.ships-piece-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  align-self: center;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
}

.ships-slot-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(36, 28, 20, 0.6);
}

.ships-slot-name {
  margin: 0;
  font: 600 var(--fs-sm) var(--font-body);
  color: var(--accent-2);
}

/* --- Stocznia: sloty i wybór ulepszeń --- */

.ships-slots {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Nazwa slotu i cena w pierwszym wierszu; w drugim miniatura wybranego ulepszenia i wybór (pełna szerokość
   bez miniatury, gdy nic nie wybrano — kolumna zostaje pusta, żeby wiersze były równe). */
.ships-slot-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem 0.5rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(36, 28, 20, 0.6);
}

.ships-slot-label {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ships-slot-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.ships-slot-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
}

.ships-slot-title {
  font: 600 var(--fs-sm) var(--font-body);
  color: var(--ink);
}

.ships-slot-thumb-wrap {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.ships-slot-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ships-slot-choice {
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
}

.ships-slot-cost {
  grid-column: 3;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--accent-2);
  white-space: nowrap;
}

/* Cena z ikoną złota (stat_icons.coin): nagłówek okrętu, koszt ulepszenia, statystyki ceny i opcja slotu (ui-select.js). Złoto stoi za liczbą. */
.ships-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ships-coin {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 0.3rem;
  object-fit: contain;
  vertical-align: -3px;
}

/* Ikona przed tekstem w opcji filtra (ui-select.js): klasa kadłuba z gry (18 px), tekst zostaje obok. */
.ships-option-class {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.45rem;
  object-fit: contain;
  vertical-align: middle;
}

/* Pod nagłówkiem „Ulepszenia”: suma cen ulepszeń i cena okrętu z nimi, z ikonami złota. */
.ships-upgrades-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.45rem;
  margin: -0.35rem 0 0.9rem;
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* Model 3D kadłuba nad wyborem ulepszeń (static/ship_3d.js): pusty kontener nic nie zajmuje. */
.ships-3d-stage:empty {
  display: none;
}

.ships-3d-stage {
  margin-bottom: 1rem;
}

/* Widżet modelu (także w karcie okrętu w encyklopedii): kanwa w ramce, światło i powiększenie w rogach. */
.ship-3d {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Okręt: kadr modelu (16:9, na wąskim ekranie 4:3) plus pas przycisków u góry. Pas jest częścią ramki, więc
   żaden okręt — także najwyższy — nie wchodzi pod przyciski, a kadr zostaje ten sam dla każdego kadłuba.
   `padding-top` liczy się od szerokości, tak jak wcześniej `aspect-ratio`; `--v3d-band` to wysokość pasa
   (viewer3d.css .v3d-band), więc model dostaje dokładnie tyle miejsca, ile miał wcześniej. */
.ship-3d-box {
  --v3d-band: 3.05rem;
  position: relative;
  width: 100%;
  padding-top: calc(56.25% + var(--v3d-band));
  box-sizing: border-box;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 70%, #000 30%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  cursor: grab;
  touch-action: none;
}

.ship-3d-box:active {
  cursor: grabbing;
}

/* Scena okrętu: kanwa zaczyna się pod pasem przycisków, żeby maszty i bandery nie wchodziły pod przyciski. */
.ship-3d-view {
  position: absolute;
  top: var(--v3d-band);
  right: 0;
  bottom: 0;
  left: 0;
}

.ship-3d-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Przyciski sceny okrętu (światło, żagle i menu opcji po lewej, zapis PNG i powiększenie po prawej) stoją w pasie
   sceny z viewer3d.css (.v3d-band): przy wąskiej karcie pas przewija się w bok, więc nie nachodzą na siebie. */

/* Przycisk żagli z ikoną z gry (HUD, sail_square_open/closed); glif SVG ma ten sam rozmiar 18 px. */
.ship-3d-sail-img {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
}

.ship-3d-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.ship-3d-note[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .ship-3d-box {
    padding-top: calc(75% + var(--v3d-band));
  }
}

/* Karta okrętu w encyklopedii: model na całą szerokość nagłówka, pod nim podpis o kadłubie bez ulepszeń. */
.ency-ship-3d-slot {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0.15rem 0 0.35rem;
}

.ency-ship-3d-base {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* --- Statystyki okrętu (prawy panel) --- */

.ships-stats-table {
  table-layout: fixed;
  font-size: var(--fs-sm);
}

.ships-stats-table th,
.ships-stats-table td {
  padding: 0.3rem 0.3rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ships-stats-table thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.ships-stats-table th:first-child,
.ships-stats-table td:first-child {
  width: 34%;
}

.ships-stats-table th.ships-num,
.ships-stats-table td.ships-num {
  width: 22%;
}

.ships-stats-table th:first-child {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
}

.ships-stats-table td.is-good {
  color: var(--delta-up);
}

.ships-stats-table td.is-bad {
  color: var(--delta-down);
}

.ships-stats-table td.is-neutral {
  color: var(--muted);
}

.ships-stats-table td.ships-num {
  font-weight: 600;
}

/* Ranking: filtry w lewym panelu (jak w Armii), środek rośnie do szerokości tabeli, ale tylko do
   miejsca, które zostaje po panelu; tabela przewija się dopiero, gdy go brakuje. Prawa kolumna
   (pusta w rankingu) jest tej samej szerokości co lewa, więc środek stoi na środku strony.
   Filtry mają swoją naturalną wysokość (nie rozciągają się do środka). */
.ships-shell.is-rank {
  max-width: none;
}

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

/* Ranking na desktopie: tabela rośnie w dół do końca ekranu, ale nie dłużej niż ma wyniki
   (krótka lista = niższy panel). Limit = wysokość panelu środka minus jego padding i ramka. */
@media (min-width: 1101px) {
  .ships-shell.is-rank .ships-rank-scroll {
    max-height: calc(var(--panel-max-h) - var(--panel-tabs-offset) - 2 * 0.85rem - 2px);
  }
}

/* Wąski ekran: panele jeden pod drugim (od 1100 px panele boczne są już szufladami). */
@media (max-width: 1100px) {
  .ships-content,
  .ships-content.has-detail,
  .ships-shell.is-rank .ships-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "setup" "main" "detail";
  }
}

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

  .ships-table th,
  .ships-table td {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .ships-table thead th {
    letter-spacing: 0;
  }

}

/* Ranking: wszystkie kadłuby w tabeli przewijanej w pionie; nagłówek i kolumna nazwy
   zostają widoczne (przyklejenie daje wspólny .wnd-table w components.css). */
.ships-rank-scroll {
  max-height: min(72vh, 680px);
  overflow: auto;
}

/* Kultury na końcu tabeli: węższa komórka, zawijanie; przy wielu kulturach rozwijana lista. */
.ships-rank-table td.ships-culture-cell {
  max-width: 14rem;
  white-space: normal;
}

.ships-culture-toggle {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-2);
  text-decoration: underline dotted;
  cursor: pointer;
}

.ships-culture-list {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--muted);
}

.ships-rank-table td.ships-culture-cell {
  max-width: 8rem;
}

/* Nazwa okrętu zawija się w ograniczonej szerokości, zamiast rozpychać tabelę
   (przyklejenie i tło kolumny daje wspólny .wnd-first z components.css). */
.ships-rank-table td.wnd-first {
  white-space: normal;
  min-width: 8.5rem;
  max-width: 12rem;
}