/* Encyklopedia: linki encji w czacie, szuflada z kartą i zakładka /encyclopedia. */

:root {
  --ent-link: #93c9c1;
  --ent-link-hover: #c1e6e0;
  --ent-link-bg: rgba(147, 201, 193, 0.14);
  --ency-drawer-w: 460px;
}

/* --- Link encji ---------------------------------------------------------
   Celowo inny niż **pogrubienie** (złote, 600): chłodny kolor, zwykła grubość
   — bez podkreślenia i bez ikonki typu. */

.ent-link {
  color: var(--ent-link);
  font-weight: inherit;
  text-decoration: none;
  border-radius: var(--radius-xs);
  padding: 0 0.08em;
  margin: 0 -0.08em;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  overflow-wrap: anywhere;
}

.ent-link:hover,
.ent-link:focus-visible {
  color: var(--ent-link-hover);
  background: var(--ent-link-bg);
}

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

button.ent-link {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
}

.ency-summary + .ency-links:not([hidden]) {
  margin-top: 0.35rem;
}

.ent-link.is-current {
  color: var(--accent-2);
}

.army-eq-name.ent-link {
  margin: 0;
  padding: 0;
}

/* --- Szuflada ----------------------------------------------------------- */

.ency-drawer[hidden] {
  display: none !important;
}

.ency-drawer-backdrop {
  display: none;
}

.ency-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 45;
  width: min(var(--ency-drawer-w), 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: rgba(26, 21, 16, 0.98);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
  animation: ency-slide-in 0.2s ease-out;
  outline: none;
}

@keyframes ency-slide-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.ency-panel-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
}

.ency-panel-title {
  flex: 1;
  min-width: 0;
  font: 600 var(--fs-sm) var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ency-icon-btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(20, 16, 12, 0.5);
  color: var(--ink);
  font: 600 1.05rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}

.ency-icon-btn:hover,
.ency-icon-btn:focus-visible {
  color: var(--accent-2);
  border-color: var(--accent-2);
  outline: none;
}

.ency-icon-btn[hidden] {
  display: none;
}

/* Ikony w pasku szuflady rysowane SVG, a nie glifami: ← ⤢ × mają w każdym foncie
   inne marginesy i wyglądały nierówno obok siebie (najbardziej na telefonie). */
.ency-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ency-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Ta sama rezerwa co .panel-sticky: pasek nie zwęża karty w szufladzie.
     Prawy padding jest o rezerwę węższy, więc bez paska obie krawędzie są równe. */
  scrollbar-gutter: stable;
  padding: 0.6rem 0.95rem 1.4rem;
  padding-inline-end: calc(0.95rem - var(--scroll-gutter));
}

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

.ency-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/* × w panelach Handlu/Mapy — w wierszu kickera, przy prawej krawędzi. */
.ency-card-head .ency-embed-close {
  position: relative; /* kotwica dla krzyżyka rysowanego w .icon-close */
  float: none;
  margin: 0;
  flex-shrink: 0;
}

.ency-card-head-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ency-card-back {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  position: relative;
  font-size: 0; /* glif ← ma nierówne marginesy — strzałka rysowana poniżej */
}

.ency-card-back::before,
.ency-card-back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
}

/* trzon */
.ency-card-back::before {
  width: 0.75rem;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

/* grot */
.ency-card-back::after {
  width: 0.4rem;
  height: 0.4rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-0.3rem, -50%) rotate(45deg);
}

.ency-kicker {
  display: block;
  font: 600 var(--fs-2xs) var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 0;
}

.ency-card-name {
  margin: 0;
}

.ency-hero-portrait {
  align-self: center;
  margin: 0.15rem 0 0.35rem;
  /* Pełna szerokość karty i wysokość sceny 3D (army.css .army-3d-stage), jak zakładki nad nim — portret 480×480 ma głowę na środku (kadr ustawia mod). */
  width: 100%;
  height: 320px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line);
}

/* Bohater i okręt: zakładki Portret / 3D (Obraz / 3D) nad kadrem (encyclopedia.js: modelViewToggle); scena 3D z army.css (.army-3d*). */
.ency-hero-model {
  align-self: stretch;
  margin: 0.15rem 0 0.35rem;
}

/* Zakładki z army.css (.army-card-tabs) bez górnego odstępu sekcji — stoją tuż nad kadrem. */
.ency-hero-view-tabs {
  margin: 0 0 0.4rem;
}

.ency-hero-model-stage {
  display: flex;
  justify-content: center;
}

.ency-hero-model-stage > .army-3d {
  width: 100%;
}

/* Portret w kadrze zakładek: margines daje .ency-hero-model, tak jak przy scenie 3D. */
.ency-hero-model-stage > .ency-hero-portrait {
  margin: 0;
}

/* Odstępy nad i pod kadrem są takie same w obu widokach: kadr nie dokłada własnych marginesów
   (scena 3D bohatera i slot modelu okrętu z okrety.css mają swoje), więc zostaje odstęp z .ency-hero-model. */
.ency-hero-model-stage > .army-3d,
.ency-ship-view .ency-ship-3d-slot {
  margin: 0;
}

/* Twarz przykładowa (encyclopedia.js: sampleFaceBadge): „!” w prawym górnym rogu kadru, dymek po najechaniu / fokusie.
   W 3D prawy górny róg zajmują przyciski sceny (pas .v3d-band z viewer3d.css), więc znak schodzi pod nie. Dymek mieści
   się w kadrze (portret ma overflow: hidden). */
.ency-hero-portrait,
.ency-hero-model-stage {
  position: relative;
}

.ency-sample-face {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--accent-2);
  border-radius: 50%;
  background: var(--bg0);
  color: var(--accent-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.ency-hero-model-stage.is-3d > .ency-sample-face {
  top: 3rem;
}

/* Drugi znak (dziecko obok przykładowej twarzy) stoi na lewo od pierwszego. */
.ency-sample-face.is-second {
  right: 2.4rem;
}

/* Znak dziecka w rzędzie z nazwą zakładki (Umiejętności !), nie pod paskiem zakładek.
   Dymek liczy się od przycisku, nie od kółka, więc sięga krawędzi zakładki i tam się zawija. */
.army-card-tab.has-notice,
.wnd-card-tab.has-notice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  overflow: visible;
}

.ency-sample-face.is-inline {
  position: static;
  top: auto;
  right: auto;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.75rem;
}

.ency-sample-face.is-inline > .ency-sample-face-tip {
  right: 0.35rem;
  left: 0.35rem;
  width: auto;
  max-width: none;
  transform: none;
  /* Zakładka ma white-space: nowrap — bez tego tekst dymka idzie w jednej linii za krawędź. */
  white-space: normal;
  overflow-wrap: break-word;
  z-index: 4;
}

.ency-sample-face:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.ency-sample-face-tip {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  width: max-content;
  max-width: min(16rem, 70vw);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.ency-sample-face:hover > .ency-sample-face-tip,
.ency-sample-face:focus-visible > .ency-sample-face-tip,
.ency-sample-face.is-open > .ency-sample-face-tip {
  visibility: visible;
  opacity: 1;
}

.ency-hero-portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
}

.ency-title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ency-title-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* Grafika i model stoją pod nazwą karty (encyclopedia.js: renderCard) — odstęp od podpisu daje sam nagłówek
   (.army-card-header, army.css), jak na karcie jednostki (troop-card.js). */
.army-card-header + :is(.ency-hero-model, .ency-hero-portrait, .ency-item-3d-slot, .ency-scene-render, .ency-piece-render, .ency-incident-art-wrap) {
  margin-top: 0;
}

/* Ilustracja zdarzenia (duży obraz z okna gry) pod nazwą, wyśrodkowana jak kadr sceny. */
.ency-incident-art-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 0.5rem;
}

.ency-section-icon {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  object-fit: contain;
  box-sizing: border-box;
}

.ency-section-desc {
  margin: 0.5rem 0 0;
}

/* Ilustracja zdarzenia: do 200px, nigdy większa niż szerokość kolumny karty (bez powiększania). */
.ency-entity-icon.ency-incident-art {
  width: min(200px, 100%);
  height: min(200px, 100%);
  object-fit: contain;
}
.ency-entity-icon {
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid var(--line);
  /* contain, nie cover — podłużne przedmioty (broń, tarcze) nie mogą być ucinane. */
  object-fit: contain;
  padding: 2px;
  box-sizing: border-box;
  background: rgba(36, 28, 20, 0.75);
}

.ency-index-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  object-fit: contain;
  background: rgba(36, 28, 20, 0.75);
}

/* Miniatura przed linkiem w tekście (umiejętność towarzysza w karcie zadania). */
.ency-ref-with-icon {
  white-space: nowrap;
}

.ency-ref-icon {
  margin-right: 0.3rem;
  vertical-align: -0.25rem;
}

/* Miniatura towaru w komórce tabeli (receptury warsztatu): jak miniatury przedmiotów na liście. */
.ency-cell-refs .ency-item-thumb {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}

/* Każda umiejętność w swoim wierszu (encyclopedia.js: skillRowsNode). */
.ency-refs-row {
  display: block;
}

/* W wąskiej kolumnie wartości nazwa umiejętności zawija się w sobie (nie wypycha karty w bok). */
.ency-refs-row .ency-ref-with-icon {
  white-space: normal;
}

/* Scena osady 16:9 — pełna szerokość karty, bez rozciągania pionowego. */
.ency-scene-render {
  /* Karta jest kolumną flex — bez tego figure zapada się do ramki (overflow: hidden). */
  flex-shrink: 0;
  position: relative; /* kotwica dla przycisku powiększenia (.v3d-corner) w rogu sceny */
  margin: 0.35rem 0 0.5rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.ency-scene-render-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ency-scene-render-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.ency-scene-render-btn:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: -2px;
}

/* Powiększenie sceny: szeroki panel, obraz dopasowany do okna. */
.ency-scene-modal-panel {
  /* Szerokość mieści się w odstępach .auth-modal (1.25rem z każdej strony), także na telefonie. */
  width: min(calc(100vw - 2.5rem), 1600px);
  max-width: none;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}

.ency-scene-modal-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  cursor: zoom-out;
  transition: opacity 0.15s ease;
}

/* Poprzedni obraz zostaje widoczny, przygaszony, aż dojdzie wybrany wariant. */
.ency-scene-modal-img.is-loading {
  opacity: 0.55;
}

/* Sterowanie obrazem sceny: dwa rzędy (poziom muru, stan) w wyglądzie z army.css (.army-eq-tab). */
.ency-scene-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
  max-width: 100%;
}

.ency-scene-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  max-width: 100%;
}

.ency-scene-group-label {
  color: var(--muted);
  font: 600 var(--fs-xs) var(--font-body);
}

.ency-scene-radios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  max-width: 100%;
}

.ency-scene-opt {
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

.ency-scene-opt:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
}

/* Obecny poziom osady: kropka przy przycisku poziomu. */
.ency-scene-opt.is-current::after {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* Z przełącznikami obraz ma mniej miejsca, więc okno nie zmienia wysokości przy przełączaniu. */
.ency-scene-modal-panel.is-switchable .ency-scene-modal-img {
  max-height: calc(100vh - 14rem);
}

@media (prefers-reduced-motion: reduce) {
  .ency-scene-modal-img {
    transition: none;
  }
}

/* Treść karty jednostki poza flex-gap `.char-summary` (jak `#army-detail-body`). */
.ency-troop-body {
  min-width: 0;
}

.ency-actions {
  flex-wrap: wrap;
}

.ency-action {
  text-decoration: none;
  font-size: var(--fs-sm);
}

/* Ostatnie słowo nazwy + ikonka pytania: zawijają się razem. */
.ency-name-tail {
  white-space: nowrap;
}

/* Ikonka mini czatu (.char-ask-fab) na końcu nazwy karty: sama chmurka, ramka koła dopiero po najechaniu. */
.ency-ask-icon {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.2rem 0 -0.2rem 0.3rem;
  padding: 0;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--accent-2);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.ency-ask-icon svg {
  width: 1rem;
  height: 1rem;
}

.ency-ask-icon:hover,
.ency-ask-icon:focus-visible {
  transform: scale(1.08);
  border-color: var(--selected-border);
  background: var(--selected-bg);
  filter: brightness(1.06);
}

.ency-ask-icon:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .ency-ask-icon {
    width: 2rem;
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ency-ask-icon {
    transition: none;
  }
}

/* Kafelki karty: szerokość z treści (długie etykiety, np. „Koszt wyposażenia”), nie stała siatka. */
.ency-tiles {
  display: flex;
  flex-wrap: wrap;
}

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

/* Kafelek na całą szerokość z opisem zamiast liczby (nagroda zadania „zależna od…”). */
.ency-tiles .army-tile.is-wide {
  flex-basis: 100%;
}

.army-tile.is-wide .army-tile-value {
  white-space: normal;
  overflow-wrap: anywhere;
}

.army-tile-sub,
.ency-hint {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.ency-kv dd .ency-hint {
  display: block;
  margin-top: 0.1rem;
}

.ency-tone-pos,
.ency-bar-pos .army-skill-num {
  color: var(--delta-up);
}

.ency-tone-neg,
.ency-bar-neg .army-skill-num {
  color: var(--delta-down);
}

.ency-bar-pos .army-skill-fill {
  background: var(--delta-up);
}

/* Nazwa skutku, która nie mieści się w kolumnie, zawija się do nowego wiersza (zamiast obcinać się wielokropkiem). */
.ency-section-bars .army-skill-label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Pasek i liczba stoją na wysokości pierwszego wiersza nazwy, nawet gdy nazwa się zawija.
   Pasek jest centrowany w pierwszym wierszu: (wysokość wiersza − grubość paska) / 2. */
.ency-section-bars .army-skill-row {
  align-items: start;
}

.ency-section-bars .army-skill-row > .army-skill-label,
.ency-section-bars .army-skill-num {
  line-height: 1.5;
}

.ency-section-bars .army-skill-bar {
  margin-top: calc((1.5em - 6px) / 2);
}

.ency-bar-neg .army-skill-fill {
  background: var(--delta-down);
}

.ency-text {
  /* Górny odstęp bierze `.ency-more` (równy dołowi przycisku). */
  margin: 0 0 0.55rem;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
}

.ency-text p {
  margin: 0 0 0.5rem;
}

.ency-text.is-folded {
  display: none;
}

.ency-more {
  appearance: none;
  display: block;
  width: fit-content;
  background: none;
  border: 0;
  padding: 0;
  /* Wyśrodkowany; ten sam gap góra/dół względem sąsiednich elementów karty. */
  margin: 0.55rem auto;
  color: var(--accent-2);
  font: 600 var(--fs-sm) var(--font-body);
  cursor: pointer;
}

.ency-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.ency-steps-label {
  font-size: var(--fs-sm);
  opacity: 0.75;
  margin-right: 0.2rem;
}

/* Zakładki rodzaju starcia (bitwa / turniej / arena) w tabeli XP: ciaśniej, żeby trzy
   przyciski mieściły się w jednym rzędzie także w wąskiej karcie. */
.ency-section-table .ency-steps {
  gap: 0.2rem;
}

.ency-section-table .ency-step {
  padding: 0.1rem 0.45rem;
}

.ency-step {
  appearance: none;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
  color: inherit;
  opacity: 0.6;
  font: 600 var(--fs-xs) var(--font-body);
  cursor: pointer;
}

.ency-step.is-active {
  opacity: 1;
  color: var(--accent-2);
}

.ency-section {
  margin-bottom: 0.55rem;
}

.ency-group-title {
  margin: 0.55rem 0 0;
  font: 600 var(--fs-base) var(--font-body);
  color: var(--muted);
}

.ency-section > .ency-group-title:first-child {
  margin-top: 0.2rem;
}

.ency-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 0.8rem;
  margin: 0.35rem 0 0;
  font-size: var(--fs-md);
}

.ency-kv dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
}

/* Dymek „!” przy etykiecie wiersza stoi nad nią, od lewej krawędzi etykiety, i nakłada się na wiersze powyżej.
   Zamknięty nie zajmuje miejsca (display: none): ukryty dymek przedłużałby przewijaną kartę. Pod ostatnim
   wierszem dymek wychodziłby poza kartę, dlatego stoi nad etykietą. */
.ency-kv dt .ency-sample-face.is-inline > .ency-sample-face-tip {
  display: none;
  top: auto;
  bottom: calc(100% + 0.35rem);
  left: 0;
  right: auto;
  width: min(18rem, 80vw);
}

.ency-kv dt .ency-sample-face.is-inline:hover > .ency-sample-face-tip,
.ency-kv dt .ency-sample-face.is-inline:focus-visible > .ency-sample-face-tip,
.ency-kv dt .ency-sample-face.is-inline.is-open > .ency-sample-face-tip {
  display: block;
}

.ency-kv dd {
  margin: 0;
  min-width: 0;
}

/* Wiersz z ikoną klasy (cena wg klasy kadłuba): ikona jest wyższa od tekstu, więc etykieta i wartość
   idą po środku wiersza, a nie od góry (dd bez tego zostawało przy górnej krawędzi). */
.ency-kv:has(.ency-class-icon) {
  align-items: center;
}

.ency-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-md);
  /* Pełna lista: długa przewija się w sobie, nie ucina wpisów. */
  max-height: 22rem;
  overflow-y: auto;
  /* Zawijany flex ma scrollWidth o piksel szerszy od pudełka (zaokrąglenie szerokości gapów),
     więc bez tego wyskakuje poziomy pasek, którego nie ma czego przewijać. */
  overflow-x: hidden;
}

.ency-links li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

.ency-note {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* Zdarzenia losowe na karcie umiejętności: dwie kolumny — nazwa i dopisek.
   `li` ma `display: contents`, więc komórkami siatki są sam odnośnik i `small.ency-note`;
   każdy dopisek startuje w tym samym x, a nazwa dostaje tyle miejsca, ile potrzebuje
   najdłuższa z nich (max-content), zamiast zwijać się do kilku liter na linię.
   To nadpisuje flex z `.ency-links` (zostaje tylko max-height/overflow pionowy). */
.ency-links-aligned {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: baseline;
  row-gap: 0.3rem;
  column-gap: 0.9rem;
}

.ency-links-aligned > li {
  display: contents;
}

/* Nazwa zawija się tylko na spacji — `.ent-link` łamie wyraz w dowolnym miejscu
   (`overflow-wrap: anywhere`), co w wąskiej kolumnie dawało „Psuci/e/mone/t”. */
.ency-links-aligned > li > :not(.ency-note) {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

/* Dopisek zawija się normalnie (między słowami) w swojej kolumnie. */
.ency-links-aligned > li > .ency-note {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.ency-list-items {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--fs-md);
  line-height: 1.45;
}

.ency-list-items li {
  margin: 0.15rem 0;
}

/* Efekt na plus / na minus (perki, polityki) — kolory zmian jak w karcie postaci. */
.ency-list-items li.is-pos {
  color: var(--delta-up);
}

.ency-list-items li.is-neg {
  color: var(--delta-down);
}

.ency-list-items .char-bonus.is-pos {
  color: var(--delta-up);
}

.ency-list-items .char-bonus.is-neg {
  color: var(--delta-down);
}

.ency-table-wrap {
  margin-top: 0.3rem;
  overflow-x: auto;
}

/* Statystyki broni z kolumnami trybu (fit_width) — skalowane w JS, bez poziomego scrolla. */
.ency-table-wrap--fit {
  overflow-x: hidden;
  overflow-y: hidden;
}

.ency-table-wrap--fit .ency-table-fit-inner {
  display: inline-block;
  vertical-align: top;
}

.ency-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.ency-table th,
.ency-table td {
  padding: 0.28rem 0.45rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.ency-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.ency-table td:not(:first-child) {
  white-space: nowrap;
}

/* Tabela XP na karcie umiejętności (dwie kolumny: czynność i XP): tekst zawija się w każdej
   kolumnie, a stałe proporcje nie pozwalają jej rosnąć wszerz — długi opis schodzi w dół. */
.ency-table.ency-table-xp {
  table-layout: fixed;
}

.ency-table.ency-table-xp th,
.ency-table.ency-table-xp td,
.ency-table.ency-table-xp td:not(:first-child) {
  white-space: normal;
  /* Dzieli wyraz tylko wtedy, gdy sam nie mieści się w kolumnie — nigdy „obrażeni / a”. */
  overflow-wrap: break-word;
  word-break: normal;
}

.ency-table.ency-table-xp th:nth-child(1),
.ency-table.ency-table-xp td:nth-child(1) {
  width: 55%;
}

.ency-table.ency-table-xp th:nth-child(2),
.ency-table.ency-table-xp td:nth-child(2) {
  width: 45%;
}

/* Siatka trafień (tier ofiary, obrażenia, dopłata za zabicie): szerokość kolumny bierze się
   z najdłuższego słowa nagłówka, więc „20 obrażenia” łamie się tylko na spacji. Wąska karta
   może wtedy dać lekki poziomy scroll — lepszy niż urwane „a” w nowej linii. */
.ency-table.ency-table-grid th,
.ency-table.ency-table-grid th:not(:first-child) {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  padding-inline: 0.3rem;
}

.ency-table.ency-table-grid td {
  padding-inline: 0.3rem;
}

/* Równe kolumny o stałej szerokości — nie skaczą między kartami (receptury warsztatu). */
.ency-table.ency-table-fixed {
  table-layout: fixed;
}

.ency-table.ency-table-fixed td {
  white-space: normal;
}

.ency-fold {
  margin: 0.4rem 0;
}

.ency-fold > summary {
  cursor: pointer;
  list-style-position: inside;
}

/* --- Podgląd po najechaniu ---------------------------------------------- */

.ency-peek {
  position: fixed;
  z-index: 60;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.7rem;
  pointer-events: none;
  font-size: var(--fs-sm);
}

.ency-peek[hidden] {
  display: none;
}

.ency-peek-name {
  font: 700 1.05rem/1.15 var(--font-display);
  color: var(--ink);
}

.ency-peek-sub,
.ency-peek-text {
  color: var(--muted);
}

.ency-peek-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  color: var(--ink);
}

/* --- Zakładka /encyclopedia --------------------------------------------- */

body:not(.page-encyclopedia) .ency-shell {
  display: none !important;
}

body.page-encyclopedia .ency-shell {
  min-height: calc(100dvh - var(--site-header-h));
}

body.page-encyclopedia .top-tab[href="/encyclopedia"] {
  color: var(--accent-2);
  background: rgba(196, 92, 38, 0.28);
}

.ency-shell {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0.65rem 1rem 1rem;
}

.ency-shell [hidden] {
  display: none !important;
}

.ency-content {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w);
  gap: 1rem;
  align-items: start;
}

/* .ency-list-pane, .ency-card-pane, .ency-block: patrz components.css (card) */

/* Nagłówki w panelu listy i karty są wyśrodkowane: tytuł listy („Statek”), nazwa karty, sekcje i grupy. */
.ency-shell :is(.ency-list-pane, .ency-card-pane) :is(h2, h3, h4) {
  text-align: center;
}

/* Nazwa karty zostaje przy lewej krawędzi; ikonka pytania stoi za nazwą. */
.ency-shell .ency-card-pane .ency-card-name {
  text-align: left;
}

/* `#ency-page-card` ma też `.char-summary` (flex + gap 0.7rem). W Handlu/Mapie/
   szufladzie karta ląduje w zwykłym body bez tego gapu — bez nadpisania zakładka
   Encyklopedia rozciągała te same elementy (kicker, scena, kafelki, sekcje). */
.ency-card-pane.char-summary {
  gap: 0;
}

.ency-list-pane.panel-stack {
  gap: 0.7rem;
}

.ency-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.ency-block {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

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

.ency-types,
.ency-facet-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Tagi podkategorii wybranej kategorii (płeć, rodzaj osady…) stoją bezpośrednio pod kategorią,
   oddzielone od niej cienką kreską. Listy (kultura, królestwo) są niżej — kolejność pól panelu:
   szukajka, tagi z podtagami, listy, sortowanie. */
.ency-facets {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.ency-facets[hidden] {
  display: none !important;
}

.ency-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.4rem 0.5rem;
  font-size: var(--fs-md);
}

.ency-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

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

.ency-index {
  columns: 3 200px;
  column-gap: 1.2rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-md);
}

/* Kolumny listy wystają o ułamek piksela — bez poziomego paska przewijania. */
#ency-list {
  overflow-x: hidden;
}

.ency-list-pager {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Szeroki ekran, lista na kilka stron (.is-paged z encyclopedia.js): panel sięga dołu okna,
   a strona mieści tyle wpisów, ile się w nim zmieści — bez przewijania w panelu.
   Lista na jedną stronę zostaje wysokości treści. */
@media (min-width: 1101px) {
  .ency-list-pane.panel-stack.is-paged {
    height: calc(var(--panel-max-h) - var(--panel-tabs-offset));
  }

  .ency-list-pane.is-paged #ency-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ency-list-pane.is-paged .ency-index {
    flex: 0 0 auto;
    margin-top: 0;
    column-fill: auto;
  }
}

.ency-index li {
  break-inside: avoid;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0;
}

/* --- Responsywność ------------------------------------------------------ */

@media (max-width: 1320px) {
  .top-tab {
    padding: 0.42rem 0.7rem;
  }
}

/* Ten sam próg co pozostałe zakładki: nawigacja i karta hasła stają się wysuwanymi
   panelami (side-drawers.js), zostaje sama lista. */
@media (max-width: 1100px) {
  .ency-content {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Filtry w szufladzie to kolumna o stałej wysokości — wyniki nie mogą się w niej zwijać. */
  .ency-search-results {
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  .ency-index {
    columns: 2 160px;
  }
}

@media (max-width: 640px) {
  .top-nav {
    max-width: 100%;
    overflow-x: auto;
    justify-self: center;
    justify-content: safe center;
  }

  .top-tab {
    padding: 0.42rem 0.6rem;
    white-space: nowrap;
  }

  .ency-panel {
    width: 100vw;
    border-left: 0;
  }

  .ency-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.45);
  }

  .ency-shell {
    padding: 0.5rem 0.6rem 1rem;
  }
}

/* --- Strony-huby (spisy per rodzaj) -------------------------------------
   Renderowane serwerowo w #ency-page-card. Dla robota to jedyna droga do kart
   encji; w przegladarce encyclopedia.js podmienia je na normalny widok, wiec
   te style widac gdy JS jeszcze nie wstal albo jest wylaczony. */

.ency-hub-count {
  color: var(--muted);
  font-size: var(--fs-md);
  margin: 0.15rem 0 0.9rem;
  font-variant-numeric: tabular-nums;
}

.ency-hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.ency-hub-list > li > small {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ency-hub-link {
  color: var(--ent-link);
  text-decoration: none;
  border-radius: var(--radius-xs);
  padding: 0.1rem 0.15rem;
  display: inline-block;
  overflow-wrap: anywhere;
}

.ency-hub-link:hover,
.ency-hub-link:focus-visible {
  color: var(--ent-link-hover);
  background: var(--ent-link-bg);
}

.ency-hub-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.ency-hub-pages > a,
.ency-hub-pages > span {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.ency-hub-pages > a {
  color: var(--ent-link);
  text-decoration: none;
}

.ency-hub-pages > a:hover {
  color: var(--ent-link-hover);
  background: var(--ent-link-bg);
}

.ency-hub-pages > .is-current {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* Herb rysowany na <canvas> (banner.js) — bez tła i przycięcia jak przy ikonach. */
.ency-banner {
  background: none;
}

.ency-links li > .ency-item-thumb {
  width: 1.6rem;
  height: 1.6rem;
  align-self: center;
}

/* Ikony cech: sprite ma przezroczysty margines — większa miniatura, wyśrodkowana do tekstu. */
.ency-trait-icon,
.ency-building-icon,
.ency-class-icon,
.ency-culture-icon {
  width: 1.6rem;
  height: 1.6rem;
  align-self: center;
}

/* Tekst trzyma baseline, więc bez tego siedzi u góry wiersza (ok. 2 px nad środkiem ikony).
   Dopisek (small) zostaje przy swojej interlinii — zawinięty nie może się rozstrzelić. */
.ency-links li:has(> .ency-trait-icon, > .ency-building-icon, > .ency-class-icon, > .ency-culture-icon, > .ency-item-thumb, > .ency-level-badge) > :not(small) {
  line-height: 1.6rem;
}

.ency-links li > .ency-banner,
dd > .ency-banner {
  align-self: center;
  vertical-align: middle;
  margin-right: 0.3rem;
}


.ency-links[hidden] {
  display: none;
}

.ency-piece-render {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 320px;
  margin: 0.15rem 0 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 70%, #000 30%);
}

.ency-piece-render-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(280px, 100%);
  object-fit: contain;
}

.ency-piece-render-rot {
  position: relative;
  max-width: 100%;
}

.ency-piece-render-rot .ency-piece-render-img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Model 3D przedmiotu i części kuźni (item_3d.js): pełna szerokość karty, wysokość jak portret bohatera
   i scena 3D (ency-hero-portrait, army-3d-stage, craft-detail .craft-3d-stage); przyciski w pasie nad sceną
   (viewer3d.css .v3d-band). */
.ency-item-3d-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  margin: 0.15rem 0 0.35rem;
}

.ency-item-3d {
  width: 100%;
  max-width: 100%;
}

.ency-item-3d-stage {
  position: relative;
  width: 100%;
  height: 320px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--panel) 70%, #000 30%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ency-item-3d-stage {
  cursor: grab;
  touch-action: none;
}

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

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

/* Przyciski sceny (światło 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. */

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

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

/* Wiersz umiejętności postaci: miniatura + nazwa w jednej komórce siatki. */
.ency-skill-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

/* Ikona gry na końcu nazwy skutku: stoi w tekście, więc zawija się razem z nazwą. */
.ency-section-bars .army-skill-label > .ency-bar-icon {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: middle;
  object-fit: contain;
}

/* Ekran dotykowy: linki i przyciski encyklopedii większe, a układ bez zmian — dopełnienie idzie
   w pionie, a ujemny margines je kompensuje. */
@media (pointer: coarse) {
  .ent-link {
    padding-block: 0.3rem;
    margin-block: -0.3rem;
  }

  .ency-index li {
    padding-block: 0.6rem;
  }

  .ency-index li > .ent-link {
    display: inline-block;
    padding-block: 0.6rem;
    margin-block: -0.6rem;
  }

  .ency-action {
    min-height: 2.5rem;
  }

  .ency-more {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
  }

  .ency-scene-opt {
    min-height: 2.25rem;
  }

  .ency-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Ikona mapy okrętów w kafelku (wytrzymałość, prędkość, stocznia z cyfrą poziomu): warstwy jedna na drugiej. */
.ency-map-icon {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.3em;
}

/* Stocznia w mieście w linii nazwy: 24 px jak odznaka stoczni w zakładce Okręty (.ships-yard-level-badge).
   Środkowana jak ikony wyżej (align-self), więc trzyma ten sam środek linii co pozostałe ikony listy. */
.ency-level-badge {
  width: 1.5rem;
  height: 1.5rem;
  align-self: center;
}

.ency-map-icon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Okręt: grafika kadłuba z gry w kadrze sceny 3D (16:9, na wąskim ekranie 4:3 jak .ship-3d-box w okrety.css). */
.ency-ship-view .ency-hero-model-stage > * {
  width: 100%;
}

.ency-ship-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  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);
}

.ency-ship-picture-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 640px) {
  .ency-ship-picture {
    aspect-ratio: 4 / 3;
  }
}