/* ============================================================
   Might and Magic III: Isles of Terra — przewodnik
   Motyw: "iluminowany manuskrypt na kamiennej tablicy"
   ============================================================ */

/* ---------- Zmienne ---------- */
:root {
  /* Tło i panele */
  --bg-deep:      #14171f;   /* atramentowo-granatowe tło strony */
  --bg-vignette:  #0d0f15;   /* ciemniejsze rogi winiety */
  --panel:        #1d212c;   /* panel nawigacji / karty */
  --panel-edge:   #2b3140;   /* obwódki paneli */
  --parchment:    #ece3cf;   /* pergaminowy panel treści */
  --parchment-sh: #ddd0b0;   /* cień/krawędź pergaminu */

  /* Tekst */
  --ink:          #221c12;   /* atramentowy tekst na pergaminie */
  --ink-soft:     #4a4031;   /* przygaszony atrament */
  --paper-text:   #d8d2c4;   /* jasny tekst na ciemnym tle */
  --paper-dim:    #8b8675;   /* przygaszony jasny tekst */

  /* Akcenty */
  --gold:         #c9a227;   /* złoto nagłówków */
  --gold-bright:  #e8c34d;   /* rozjaśnione złoto (hover) */
  --copper:       #b5683a;   /* miedziano-rdzawy akcent interakcji */
  --copper-deep:  #8f4d28;

  /* Stany */
  --good:         #5f8f4e;
  --warn:         #c08a2e;
  --bad:          #b04a3f;

  /* Typografia — kroje i rozmiary są w fonts.css */
  /* Czytelny krój interfejsu do tabel i drobnych etykiet.
     Celowo nie korzysta z --f-mono ani ozdobnego kroju, bo Chromium
     słabo renderuje takie nagłówki przy małych rozmiarach. */
  --f-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Noto Sans", "Liberation Sans", Arial, sans-serif;


  /* Wymiary */
  --nav-w: 250px;
  --content-max: 972px;
  --radius: 3px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--paper-text);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--bg-deep) 0%, var(--bg-vignette) 100%) fixed;
  min-height: 100vh;
}

/* ---------- Szkielet strony ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  gap: 0;
  max-width: 1340px;
  margin: 0 auto;
  min-height: 100vh;
}

/* ============================================================
   NAWIGACJA (lewy panel — "spis treści grimuaru")
   ============================================================ */
.nav {
  background: var(--panel);
  border-right: 1px solid var(--panel-edge);
  padding: 0 0 2rem;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav__brand {
  padding: 1.4rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, #232838 0%, var(--panel) 100%);
}
.nav__game {
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.35rem;
}
.nav__title {
  font-family: var(--f-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--paper-text);
  margin: 0;
  font-weight: 600;
}
.nav__sub {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--paper-dim);
  margin: 0.4rem 0 0;
  text-transform: uppercase;
}

/* Przełącznik języka — para "pieczęci" */
.lang {
  display: flex;
  gap: 0.4rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--panel-edge);
}
.lang__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0;
  font-family: var(--f-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--paper-dim);
  background: #181c26;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  transition: all 0.15s ease;
}
.lang__btn:hover { color: var(--gold-bright); border-color: var(--copper); }
.lang__btn--active {
  color: var(--bg-deep);
  background: var(--gold);
  border-color: var(--gold-bright);
  font-weight: 700;
}

/* Lista sekcji */
.nav__section {
  padding: 1rem 1.25rem 0.3rem;
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list a {
  display: block;
  padding: 0.34rem 1.25rem 0.34rem 1.5rem;
  color: var(--paper-text);
  text-decoration: none;
  font-size: 0.92rem;
  border-left: 2px solid transparent;
  transition: all 0.12s ease;
}
.nav__list a:hover {
  background: #232838;
  border-left-color: var(--copper);
  color: var(--gold-bright);
  padding-left: 1.65rem;
}
.nav__list a[aria-current="page"] {
  background: #232838;
  border-left-color: var(--gold);
  color: var(--gold-bright);
  font-weight: 600;
}

/* ============================================================
   TREŚĆ (prawy panel — "pergaminowa tablica")
   ============================================================ */
.main {
  padding: 2.5rem clamp(1rem, 4vw, 3rem) 4rem;
  display: flex;
  justify-content: center;
}
.sheet {
  width: 100%;
  max-width: var(--content-max);
}

/* Nagłówek strony */
.page-head {
  text-align: center;
  margin-bottom: 2.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--panel-edge);
}
.page-head__eyebrow {
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 0.6rem;
}
.page-head h1 {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--gold);
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

/* Pergaminowy blok treści */
.scroll {
  background: var(--parchment);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  box-shadow:
    0 1px 0 var(--parchment-sh) inset,
    0 12px 30px -12px rgba(0,0,0,0.7);
  border: 1px solid var(--parchment-sh);
  font-size: 1.02rem;
  line-height: var(--lh-body);
}
.scroll p { margin: 0 0 0.75rem; }
.scroll p:last-child { margin-bottom: 0; }

/* Kroki listy (np. "Jak wygrać") — wyraźniejszy odstęp między punktami */
.scroll ol li:not(:last-child) { margin-bottom: 1.1rem; }

/* Przypis redakcyjny — np. gdy EN odstępuje od zasady wierności źródłu */
.editor-note { font-size: 0.78em; font-style: italic; color: var(--ink-soft); }

/* Wprowadzenie pod nagłówkiem grupy */
.scroll__intro {
  font-style: italic;
  color: var(--ink-soft);
  border-left: 3px solid var(--copper);
  padding-left: 1rem;
  margin-bottom: 1.6rem;
}

/* Podgrupy (np. "Positive status changes") */
.group-head {
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--copper-deep);
  margin: 2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--parchment-sh);
  letter-spacing: 0.02em;
}
.group-head:first-child { margin-top: 0; }

/* Wpis nazwa: opis */
.entry { margin: 0 0 0.6rem; }
.entry__name {
  font-weight: 700;
  color: var(--copper-deep);
  font-family: var(--f-body);
}
/* znacznik nazwy własnej (zawsze EN) */
.term { font-weight: 700; color: #6b3f1d; }

/* Karty nawigacyjne (np. wybór szkoły magii) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
  margin: 1.6rem 0 0.5rem;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  background: rgba(181, 104, 58, 0.08);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.15s ease;
}
.card:hover {
  background: rgba(181, 104, 58, 0.16);
  border-color: var(--copper);
  transform: translateY(-2px);
}
.card__title {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--copper-deep);
  font-size: 1.05rem;
}
.card__sub {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Karty obszarów walkthrough — nazwa po lewej, miniatura mapy po prawej */
.cards--map {
  grid-template-columns: repeat(4, 1fr);
}
/* Responsywne progi: 4 → 3 → 2 → 1 kolumna w miarę zwężania okna */
@media (max-width: 980px) {
  .cards--map { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cards--map { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .cards--map { grid-template-columns: 1fr; }
}
.card--map {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
}
.card--map .card__label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.card--map .card__code {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--copper-deep);
  font-size: 1.05rem;
  line-height: 1.2;
}
.card--map .card__name {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.25;
}
.card--map .card__map {
  flex: 0 0 auto;
  width: 96px;
  height: 76px;
  object-fit: cover;
  border: 1px solid var(--parchment-sh);
  border-radius: 4px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.04);
}
.card--map:hover .card__map {
  border-color: var(--copper);
}

/* Puste pole siatki — obszar bez eksploracji (ocean), nieklikalny */
.card--empty {
  cursor: default;
  opacity: 0.55;
  box-shadow: none;
}
.card--empty:hover {
  transform: none;
  border-color: var(--parchment-sh);
  box-shadow: none;
}
.card--empty .card__code {
  color: var(--ink-soft);
}
.card--empty .card__note {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.85;
}
.card--empty .card__map {
  filter: saturate(0.7) brightness(0.95);
}
.card--empty:hover .card__map {
  border-color: var(--parchment-sh);
}

/* Karty najemników — wspólny układ dla en/hirelings.html i pl/hirelings.html */
.hireling-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}
.hireling-card__body {
  min-width: 0;
}
.hireling-card__side {
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
}
.hireling-card__meta {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  color: var(--ink);
}
.hireling-card__meta b {
  font-weight: 500;
}
.hireling-card__fee {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--copper-deep);
  white-space: nowrap;
}
.hireling-card__portrait {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--parchment-sh);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}
@media (max-width: 620px) {
  .hireling-card {
    grid-template-columns: 1fr;
  }
  .hireling-card__side {
    align-items: flex-start;
    text-align: left;
  }
}

/* Tabela danych (hasła, pobierania, statystyki) */
/* Owijka tabeli — pozwala przewinąć szeroką tabelę w bok na wąskich ekranach */
.tbl-wrap {
  overflow-x: auto;
  margin: 1.2rem 0;
  -webkit-overflow-scrolling: touch;
}
.tbl-wrap .tbl { margin: 0; }
.tbl-wrap .tbl th, .tbl-wrap .tbl td { white-space: nowrap; }
/* Tabela z długimi opisami (np. Quest Items) — zawija tekst zamiast rozpychać w bok */
.tbl-wrap .tbl--wrap th, .tbl-wrap .tbl--wrap td { white-space: normal; }
.tbl--wrap td:first-child { white-space: nowrap; } /* nazwa przedmiotu w jednej linii */

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.95rem;
}

.tbl caption {
  text-align: left;
  font-family: var(--f-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--copper-deep);
  letter-spacing: 0.03em;
  padding: 0 0 0.45rem;
  caption-side: top;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--parchment-sh);
  vertical-align: top;
}
.scroll table th,
.tbl th {
  font-family: Tahoma, Ubuntu, var(--f-ui);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.35;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  color: var(--copper-deep);
  background: rgba(181, 104, 58, 0.1);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}
.tbl tr:nth-child(even) td { background: rgba(0, 0, 0, 0.03); }
.tbl code, .tbl .pw {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--copper-deep);
  letter-spacing: 0.03em;
}

/* Lista wpisów (podziękowania, proste wyliczenia) */
.named { margin: 0 0 0.7rem; }
.named__who {
  font-weight: 700;
  color: var(--copper-deep);
}

/* Karty bestiariusza */
.beast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}

.beast__card {
  display: grid;
  grid-template-columns: 71px minmax(0, 1fr);
  column-gap: 0.9rem;
  row-gap: 0;
  padding: 0.9rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
}

.beast__img {
  grid-column: 1;
  grid-row: 1;
  width: 71px;
  height: auto;
  align-self: flex-start;
  border: 1px solid var(--parchment-sh);
  border-radius: 2px;
  image-rendering: pixelated;
  background: transparent;
  transition: transform 0.5s ease;
  cursor: none;
  margin-bottom: 1rem;
}

.beast__img:hover {
  transition-delay: 0.3s;
  transform: scale(4);
}

.beast__body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.beast__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--copper-deep);
  margin: 0 0 0.35rem;
}

.beast__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.4rem;
  align-items: baseline;
  font-family: var(--f-body);
  font-size: 0.86rem;
  line-height: 1;
}

.beast__stat {
  display: inline-flex;
  gap: 0.18rem;
  white-space: nowrap;
}

.beast__stat span,
.beast__stat b {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.beast__stat span {
  color: var(--ink);
  font-weight: 400;
}

.beast__stat b {
  color: var(--ink);
  font-weight: 700;
}

.beast__rows {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 0 0.2rem; /* odstęp między Odporności a linią Łupy */
}

.beast__rows > p.beast__row {
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

.beast__rows > p.beast__row + p.beast__row {
  margin-top: 0.08rem !important;
}

.beast__label {
  color: var(--copper-deep);
  font-weight: 600;
}

.beast__res {
  font-family: var(--f-mono, monospace);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.beast__spoils {
  grid-column: 1 / -1;
  font-family: var(--f-body);
  font-size: 0.88rem;
  line-height: 1.1;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 0.2rem;
  border-top: 1px dotted var(--parchment-sh);
  white-space: nowrap;
  min-width: 0;
}
.beast__spoils-label {
  color: var(--copper-deep);
  font-weight: 700;
}

/* Polecenie interfejsu: mała ikona + nazwa + opis */
/* Karty zaklęć — nazwa + statystyki w rzędzie + opis efektu pod spodem */
.spell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 1.4rem 0;
}
.spell__card {
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
}
.spell__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 0.45rem;
}
.spell__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--copper-deep);
  margin-right: auto;
}
.spell__cost {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  color: var(--ink);
}
.spell__cost b { color: var(--ink); font-weight: 500; }
.spell__level {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 0.4rem;
}
.spell__effect {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

.cmd {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
}
.cmd__icon {
  flex: 0 0 auto;
  width: 38px;
  height: auto;
  border: 1px solid var(--parchment-sh);
  border-radius: 2px;
  image-rendering: pixelated;
  margin-top: 0.15rem;
}
.cmd__body { flex: 1; }
.cmd__name {
  font-weight: 700;
  color: var(--copper-deep);
}

/* Tekstowe linki bez dedykowanej klasy w treści — unikamy domyślnego niebieskiego podkreślenia */
.scroll p a:not([class]),
.scroll li a:not([class]),
.scroll td a:not([class]),
.scroll th a:not([class]),
.scroll dd a:not([class]) {
  color: var(--copper);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted color-mix(in srgb, var(--copper) 45%, transparent);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.scroll p a:not([class]):hover,
.scroll li a:not([class]):hover,
.scroll td a:not([class]):hover,
.scroll th a:not([class]):hover,
.scroll dd a:not([class]):hover,
.scroll p a:not([class]):focus-visible,
.scroll li a:not([class]):focus-visible,
.scroll td a:not([class]):focus-visible,
.scroll th a:not([class]):focus-visible,
.scroll dd a:not([class]):focus-visible {
  color: var(--copper-deep);
  text-decoration: none;
  border-bottom-color: var(--copper-deep);
}

/* Link do karty potwora w bestiariuszu — inny kolor, bez podkreślenia */
.mon-link,
.area-link,
.spoiler-link {
  color: var(--copper);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted color-mix(in srgb, var(--copper) 45%, transparent);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.spoiler-link:hover {
  color: var(--copper-deep);
}
.mon-link:hover,
.area-link:hover {
  color: var(--copper-deep);
  text-decoration: none;
  border-bottom-color: var(--copper-deep);
}

.mon-link[data-tip] {
  position: relative;
}
.mon-link[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.2rem;
  background: var(--ink);
  color: var(--gold-bright);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 20;
}
.mon-link[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Walkthrough: pasek "Obszary sąsiednie" — ten sam jezyk wizualny co .area-mon */
.area-adj {
  margin: 1rem 0 1.4rem;
  padding: 0.7rem 1rem;
  background: rgba(181, 104, 58, 0.07);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.area-adj__label {
  font-weight: 700;
  color: var(--copper-deep);
}
.area-adj__plain {
  color: var(--ink-soft);
  font-style: italic;
}

/* Walkthrough: pasek nawigacji między obszarami (poprzedni / spis / następny) */
.area-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--parchment-sh);
}
.area-nav:last-child {
  margin: 1.6rem 0 0;
  padding-bottom: 0;
  padding-top: 1rem;
  border-bottom: none;
  border-top: 1px solid var(--parchment-sh);
}
.area-nav a {
  font-size: 0.88rem;
  color: var(--copper);
  text-decoration: none;
  font-weight: 600;
}
.area-nav a:hover { color: var(--copper-deep); }

/* Walkthrough: notatki Coraka (intro fabularne obszaru) */
.corak {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* Walkthrough: blok potworów obszaru */
.area-mon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.2rem;
  margin: 1rem 0 1.4rem;
  padding: 0.7rem 1rem;
  background: rgba(181, 104, 58, 0.07);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.area-mon__label {
  font-weight: 700;
  color: var(--copper-deep);
}
.area-mon__boss { color: var(--bad); font-weight: 700; }
.area-mon__monsters { flex: 1 1 auto; }
.area-mon__where {
  flex: 0 0 auto;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
}
.area-mon__where a { font-style: normal; }
@media (max-width: 640px) {
  .area-mon { flex-direction: column; align-items: flex-start; }
}

/* Walkthrough: legenda znaczników mapy (numerowane punkty) */
.legend {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
}
.legend li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}
.legend__num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: var(--parchment);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 3px;
  margin-top: 0.1rem;
}

/* Punkty legendy bez własnej strony — współrzędne kratki na obrazku obszaru po najechaniu myszką */
.coord-pt {
  position: relative;
  border-bottom: 1px dotted var(--copper);
  cursor: help;
}
.coord-pt::after {
  content: attr(data-coord);
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.2rem;
  background: var(--ink);
  color: var(--gold-bright);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 20;
}
.coord-pt:hover::after,
.coord-pt:focus::after {
  opacity: 1;
  visibility: visible;
}

/* Obrazek w treści */
.fig {
  margin: 1.6rem 0;
  text-align: center;
}
.fig img {
  max-width: 100%;
  height: auto;
  border: 3px solid var(--parchment-sh);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6);
  image-rendering: pixelated; /* stare obrazki gry — ostre piksele */
}
.fig figcaption {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 0.5rem;
}

.fig--right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  clear: right;
}

@media (max-width: 620px) {
  .fig--right {
    float: none;
    clear: none;
    margin: 1rem 0;
  }
}

/* Stopka */
.foot {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--panel-edge);
  font-size: 0.75rem;
  color: var(--paper-dim);
  text-align: center;
  line-height: 1.5;
}
.foot a { color: var(--copper); }

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
.nav__toggle { display: none; }

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }

  .nav {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--panel-edge);
  }
  /* zwijane menu na mobile */
  .nav__toggle {
    display: block;
    width: 100%;
    padding: 0.8rem 1.25rem;
    font-family: var(--f-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-align: left;
    color: var(--gold);
    background: #181c26;
    border: none;
    border-top: 1px solid var(--panel-edge);
    cursor: pointer;
  }
  .nav__collapse { display: none; }
  .nav__collapse--open { display: block; }

  .main { padding: 1.6rem 1rem 3rem; }
  body { font-size: 17px; }
}

/* ---------- Dostępność ---------- */
a:focus-visible, button:focus-visible, .lang__btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Mapa świata: schemat kafelkowy 6×4 (map.html)
   Świat przedstawiony schematycznie obok mapy artystycznej.
   Kolumny = litery A..F (lewo→prawo), wiersze = numery 1..4 (góra→dół).
   Karty w HTML są już w kolejności wierszowej (A1 B1 C1 D1 E1 F1 / A2 ...),
   więc grid wypełnia się naturalnie — bez reguł order.
   ZAWSZE 6 kolumn; na wąskich ekranach kafelki maleją (wyższe niż szersze),
   ale kod A1..F4 pozostaje czytelny.
   ============================================================ */

.world-map {
  margin: 1.8rem 0 0.5rem;
}
.world-map__head {
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--copper-deep);
  margin: 0 0 0.3rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--parchment-sh);
  letter-spacing: 0.02em;
}
.world-map__intro {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
}

/* Siatka: zawsze 6 kolumn = litery A..F */
.world-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.3rem, 1.2vw, 0.65rem);
  margin: 0;
}

/* Pojedynczy kafelek obszaru */
.world-grid .tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: clamp(0.3rem, 1vw, 0.5rem);
  background: rgba(181, 104, 58, 0.08);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
a.world-grid__cell.tile:hover {
  background: rgba(181, 104, 58, 0.16);
  border-color: var(--copper);
  transform: translateY(-2px);
}

/* Miniatura mapy obszaru — kwadratowo-zbliżona, skaluje się z kolumną.
   aspect-ratio utrzymuje proporcje; gdy kolumna się zwęża, miniatura maleje. */
.world-grid .tile__map {
  width: 100%;
  aspect-ratio: 96 / 76;
  object-fit: cover;
  border: 1px solid var(--parchment-sh);
  border-radius: 3px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.04);
  display: block;
}
a.world-grid__cell.tile:hover .tile__map {
  border-color: var(--copper);
}

/* Etykieta: kod obszaru zawsze widoczny + nazwa własna */
.world-grid .tile__code {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--copper-deep);
  font-size: clamp(0.82rem, 2.2vw, 1rem);
  line-height: 1.1;
  text-align: center;
}
.world-grid .tile__name {
  font-size: clamp(0.6rem, 1.5vw, 0.78rem);
  color: var(--ink-soft);
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Pole bez osobnej solucji — nieklikalne, przygaszone */
.world-grid .tile--empty {
  cursor: default;
  opacity: 0.6;
}
.world-grid .tile--empty .tile__code {
  color: var(--ink-soft);
}
.world-grid .tile--empty .tile__name {
  font-style: italic;
}
.world-grid .tile--empty .tile__map {
  filter: saturate(0.7) brightness(0.97);
}

/* Bardzo wąskie ekrany: chowamy nazwę własną, zostaje kod + miniatura.
   Kafelki robią się wyższe niż szersze, ale nadal czytelne i przydatne. */
@media (max-width: 560px) {
  .world-grid {
    gap: 0.3rem;
  }
  .world-grid .tile__name {
    display: none;
  }
  .world-grid .tile {
    padding: 0.28rem;
    gap: 0.25rem;
  }
}
   PROPOZYCJA: walkthrough.html jako liniowy spis treści (Zadanie 4)
   Nowe klasy — NIE kolidują z istniejącymi (.toc prefix)
   ============================================================ */

.toc__lede {
  font-style: italic;
  color: var(--ink-soft);
  border-left: 3px solid var(--copper);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.toc__act { margin: 0 0 2.6rem; }
.toc__act:last-child { margin-bottom: 0; }

.toc__act-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 0.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--parchment-sh);
}
.toc__act-num {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--parchment);
  background: var(--copper-deep);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.toc__act-title {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--copper-deep);
  margin: 0;
  letter-spacing: 0.01em;
}
.toc__act-where {
  font-size: 0.82rem;
  color: var(--paper-dim);
  margin-left: auto;
  font-style: italic;
  white-space: nowrap;
}
.toc__act-desc {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0.7rem 0 1.3rem;
}

.toc__steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.2rem;
  position: relative;
}
/* pionowa "kreska oprawy" łącząca kroki, jak grzbiet zwoju */
.toc__steps::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--copper), var(--parchment-sh));
  opacity: 0.55;
}

.toc__step {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 0.85rem;
  padding-left: 0;
}
.toc__step-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--parchment);
  border: 2px solid var(--copper);
  color: var(--copper-deep);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toc__step--boss .toc__step-num {
  border-color: var(--bad);
  color: var(--bad);
}
.toc__step--optional .toc__step-num {
  border-style: dashed;
  opacity: 0.75;
}

.toc__step-card {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: rgba(181, 104, 58, 0.055);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem 0.7rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.toc__step-card:hover {
  background: rgba(181, 104, 58, 0.11);
  border-color: var(--copper);
}
.toc__step-body { flex: 1 1 auto; min-width: 0; }

.toc__step-map {
  display: block;
  flex: 0 0 auto;
  width: 96px;
  height: 76px;
  border: 1px solid var(--parchment-sh);
  border-radius: 4px;
  overflow: hidden;
}
.toc__step-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.04);
}
.toc__step-card:hover .toc__step-map { border-color: var(--copper); }

/* Na wąskich ekranach miniatura znika — karta wraca do pełnej szerokości tekstu */
@media (max-width: 560px) {
  .toc__step-map { display: none; }
}

.toc__step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.toc__step-title {
  font-weight: 700;
  color: var(--copper-deep);
  text-decoration: none;
  font-size: 1.02rem;
}
.toc__step-title:hover { color: var(--copper); text-decoration: underline; }

.toc__tag {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  color: var(--parchment);
  white-space: nowrap;
}
.toc__tag--town    { background: var(--gold); color: #3a2e08; }
.toc__tag--land    { background: var(--ink-soft); }
.toc__tag--cavern  { background: var(--copper); }
.toc__tag--dungeon { background: #5a4a3a; }
.toc__tag--castle  { background: var(--copper-deep); }
.toc__tag--optional {
  background: transparent;
  border: 1px solid var(--warn);
  color: var(--warn);
}
.toc__tag--boss {
  background: var(--bad);
}

.toc__step-desc {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
}

.toc__step-req {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
}
.toc__step-req a { color: var(--copper); font-weight: 600; text-decoration: none; }
.toc__step-req a:hover { text-decoration: underline; }

.toc__sidenote {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.8rem;
  background: rgba(192, 138, 46, 0.1);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.toc__sidenote strong { color: var(--copper-deep); }

/* dungeons.html — lista bez numerów kroków */
.dng__list { list-style: none; margin: 0; padding: 0; }
.dng__list li { margin: 0 0 0.85rem; }

/* map-toggle — przełączanie in-game ↔ guide po kliknięciu */
.map-toggle { cursor: pointer; }
.map-toggle__hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-left: 0.45rem;
  font-style: normal;
}
/* Outdoor guide maps są portretowe — ogranicz wysokość żeby nie rozsadzały layoutu */
.map-toggle--outdoor img {
  max-height: 680px;
  object-fit: contain;
  width: auto;
}
/* Guide aktywny: pokaż w oryginalnym rozmiarze, wyłącz pixel-art rendering */
.map-toggle.map-toggle--is-guide img {
  max-height: none;
  width: auto;
  image-rendering: auto;
}


/* ============================================================
   Rozwiązania zagadek (Etap 3)
   ============================================================ */

/* Wyróżnienie odsłonionej odpowiedzi/hasła w treści */
.answer {
  display: inline-block;
  background: var(--gold);
  color: #2b2106;
  font-weight: 700;
  font-family: var(--f-display);
  letter-spacing: 0.04em;
  padding: 0.05rem 0.6rem;
  border-radius: 3px;
}

/* Spis zagadek na spoilers.html */
.spoiler-list {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
}
.spoiler-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  background: rgba(181, 104, 58, 0.05);
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.spoiler-item:hover {
  background: rgba(181, 104, 58, 0.11);
  border-color: var(--copper);
}
.spoiler-item__num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: var(--parchment);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 3px;
  margin-top: 0.15rem;
}
.spoiler-item__body { flex: 1 1 auto; min-width: 0; }
.spoiler-item__loc {
  display: block;
  font-weight: 700;
  color: var(--copper-deep);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}
.spoiler-item__q {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Link powrotny do solucji obszaru, na dole strony odpowiedzi */
.spoiler-back {
  margin-top: 1.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--parchment-sh);
  font-size: 0.9rem;
}
.spoiler-back a { color: var(--copper); font-weight: 600; text-decoration: none; }
.spoiler-back a:hover { text-decoration: underline; }

/* Luźne spostrzeżenia: spis wpisów + kotwice */
.obs-toc {
  margin: 0 0 1.6rem;
  padding-left: 1.4rem;
}
.obs-toc li { margin: 0 0 0.35rem; }
.obs-entry {
  margin: 0 0 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--parchment-sh);
}
.obs-entry:first-of-type { border-top: none; padding-top: 0; }
.obs-entry__title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--copper-deep);
  margin: 0 0 0.5rem;
  scroll-margin-top: 1rem;
}
.obs-entry__date {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-left: 0.5rem;
}

/* ── Tracker King's Ultimate Power Orbs (win.html) ─────────────── */
.orb-tracker {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--parchment-sh);
}
.orb-tracker__title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--copper-deep);
  margin: 0 0 0.35rem;
}
.orb-tracker__hint {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.orb-tracker__status {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.orb-tracker__count {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.orb-tracker__need {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.orb-tracker__need.orb-tracker__need--done { color: var(--good); font-weight: 600; }
.orb-tracker__bar-wrap {
  height: 6px;
  background: var(--parchment-sh);
  border-radius: 3px;
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.orb-tracker__bar {
  height: 100%;
  background: var(--copper);
  border-radius: 3px;
  width: 0%;
  transition: width 0.2s, background 0.2s;
}
.orb-tracker__bar--full { background: var(--good); }
.orb-tracker__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem 1.2rem;
}
.orb-tracker__group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}
.orb-tracker__group-head a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--copper);
  text-decoration: none;
}
.orb-tracker__group-head a:hover { text-decoration: underline; }
.orb-tracker__gprog {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.orb-tracker__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.orb-tracker__list li { margin: 0.18rem 0; }
.orb-tracker__list label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
  user-select: none;
}
.orb-tracker__list input[type="checkbox"] {
  width: 0.85rem;
  height: 0.85rem;
  accent-color: var(--copper);
  cursor: pointer;
  flex-shrink: 0;
}
.orb-tracker__list li.orb--done label {
  color: var(--ink-soft);
  text-decoration: line-through;
}
.orb-tracker__reset {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
}
.orb-tracker__reset:hover { color: var(--bad); }

/* ── Wyszukiwarka (search.html) ─────────────────────────────── */
.sr-input-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sr-input {
  flex: 1;
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 0.45rem 0.7rem;
  border: 2px solid var(--parchment-sh);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.sr-input:focus { outline: none; border-color: var(--copper); }
.sr-tabs {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--parchment-sh);
}
.sr-tab {
  font-family: var(--f-ui);
  font-size: 0.8rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.sr-tab:hover { color: var(--ink); border-color: var(--copper); }
.sr-tab--active { background: var(--copper); border-color: var(--copper); color: #fff; }
.sr-section { margin-bottom: 1.3rem; }
.sr-section__head {
  font-family: var(--f-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--parchment-sh);
}
.sr-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--copper);
  background: rgba(181,104,58,.12);
  border-radius: 10px;
  padding: 0.05em 0.5em;
}
.sr-more {
  font-family: var(--f-ui);
  font-size: 0.73rem;
  color: var(--copper);
  background: none;
  border: 1px solid var(--copper);
  border-radius: var(--radius);
  padding: 0.14em 0.48em;
  cursor: pointer;
  margin-left: auto;
}
.sr-more:hover { background: var(--copper); color: #fff; }
.sr-card {
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--parchment-sh);
  border-radius: var(--radius);
  background: rgba(0,0,0,.025);
}
.sr-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.12rem;
}
.sr-card__head strong { color: var(--ink); font-size: 0.96rem; }
.sr-card__link {
  margin-left: auto;
  font-family: var(--f-ui);
  font-size: 0.76rem;
  color: var(--copper);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.sr-card__link:hover { text-decoration: underline; }
.sr-card__meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.08rem; }
.sr-card__body { font-size: 0.85rem; color: var(--ink); line-height: 1.45; }
.sr-tag {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1em 0.42em;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sr-tag--arc { background: #d4e6f7; color: #1a5276; }
.sr-tag--cle { background: #fef9e7; color: #7d6608; border: 1px solid #d4ac0d; }
.sr-tag--nat { background: #d5f5e3; color: #1a6631; }
.sr-num  { font-size: 0.78rem; color: var(--ink-soft); }
.sr-coord { font-size: 0.78rem; color: var(--copper-deep); font-weight: 600; }
.sr-res  { font-family: var(--f-mono); font-size: 0.76rem; color: var(--ink-soft); }
.sr-pw   { font-family: var(--f-mono); font-size: 0.94rem; color: var(--copper-deep); letter-spacing: .05em; }
.sr-empty { color: var(--ink-soft); font-style: italic; font-size: 0.9rem; text-align: center; padding: 2rem 0; }