/* ==========================================================================
   Farmersi 2.0 — premium.css (06.11.2026)
   Kierunek: western premium, nie dekoracyjny. Zmiany tylko na stronie
   głównej, wspólnej nawigacji, panelu „moje gry” i licznikach.
   Nie dotyka arkusza gry, wykresów, ofert, banera ani testu Izziego.
   ========================================================================== */

:root {
  --fp-surface: #f7f0df;
  --fp-surface-deep: #efe2c8;
  --fp-text: #49301f;
  --fp-accent: #a83b32;
  --fp-gold: #c89435;
  --fp-success: #647b4b;
  --fp-border: rgba(73, 48, 31, 0.2);
  --fp-border-soft: rgba(73, 48, 31, 0.12);
  --fp-shadow: 0 6px 18px rgba(73, 48, 31, 0.09);
  --fp-shadow-hover: 0 9px 24px rgba(73, 48, 31, 0.14);
  --fp-frame: #6b4930;
}

/* --------------------------------------------------------------------------
   TŁO STRONY GŁÓWNEJ — prawdziwy pergamin, ale spokojny
   -------------------------------------------------------------------------- */
body[data-strona="wstep"] {
  background-color: #1d150c;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(200, 148, 53, 0.12), transparent 62%),
    linear-gradient(180deg, #302314 0%, #1b130b 100%);
}

/* WSPÓLNY PAPIER NA KAŻDEJ STRONIE — nie tylko homepage. */
.powloka {
  background-color: #f5ecd8;
  background-image:
    linear-gradient(180deg, rgba(255, 250, 239, 0.30) 0%, rgba(243, 231, 209, 0.48) 100%),
    url("../img/ui/tekstura-pergamin-jasny-1024.webp");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 1024px 1024px;
  background-blend-mode: normal, multiply;
  border-left: 1px solid var(--fp-border);
  border-right: 1px solid var(--fp-border);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
}

@media (max-width: 47.99rem) {
  .powloka {
    background-image:
      linear-gradient(180deg, rgba(255, 250, 239, 0.30) 0%, rgba(243, 231, 209, 0.48) 100%),
      url("../img/ui/tekstura-pergamin-jasny-512.webp");
    background-size: 100% 100%, 512px 512px;
  }
}

/* --------------------------------------------------------------------------
   KARTY STRONY GŁÓWNEJ — ciepły papier, cienka ramka, spokojny cień
   -------------------------------------------------------------------------- */
body[data-strona="wstep"] .karta {
  padding: var(--odst-4);
  background: linear-gradient(180deg, #fffaf0 0%, #f6ebd5 100%);
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(73, 48, 31, 0.18),
    0 10px 22px rgba(73, 48, 31, 0.14);
}

body[data-strona="wstep"] .karta--wyrozniona {
  background: linear-gradient(180deg, #f8eed8 0%, #f0e2c6 100%);
  border-color: #5b3b25;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 0 rgba(73, 48, 31, 0.2),
    0 12px 26px rgba(73, 48, 31, 0.16);
}

body[data-strona="wstep"] .karta--mocna {
  border-color: #5b3b25;
}

body[data-strona="wstep"] .karta-naglowek {
  margin: calc(-1 * var(--odst-4)) calc(-1 * var(--odst-4)) var(--odst-3);
  padding: 0.75rem var(--odst-4) 0.65rem;
  color: var(--fp-text);
  font-size: 1.25rem;
  line-height: 1.25;
  background: linear-gradient(180deg, #eadbc0 0%, #e2d0af 100%);
  border-bottom: 2px solid var(--fp-gold);
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body[data-strona="wstep"] #naglowek-logowanie {
  position: relative;
  padding-right: 2.7rem;
}

body[data-strona="wstep"] #naglowek-logowanie::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 1.7rem;
  height: 1.7rem;
  transform: translateY(-50%);
  background: url("../img/ui/podkowa-192.webp") center / contain no-repeat;
  pointer-events: none;
}

body[data-strona="wstep"] .izzi-cta {
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 rgba(73, 48, 31, 0.16),
    0 10px 22px rgba(73, 48, 31, 0.12);
}

body[data-strona="wstep"] .aktualnosci-ramka {
  border: 2px solid rgba(107, 73, 48, 0.55);
  box-shadow: 0 3px 0 rgba(73, 48, 31, 0.12);
}

body[data-strona="wstep"] .lista-goncza.sekcja--hero {
  background: linear-gradient(180deg, rgba(255, 250, 239, 0.92), rgba(248, 239, 221, 0.92));
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow: 0 4px 0 rgba(73, 48, 31, 0.18), var(--fp-shadow);
}

body[data-strona="wstep"] .aktualnosci-ramka {
  background: rgba(239, 226, 200, 0.72);
  border-color: rgba(73, 48, 31, 0.25);
}

/* --------------------------------------------------------------------------
   PRZYCISKI — główny jak skórzany szyld, drugi jak papier
   -------------------------------------------------------------------------- */
body[data-strona="wstep"] .przycisk {
  min-height: 44px;
  font-family: var(--font-naglowek);
  letter-spacing: 0.035em;
}

body[data-strona="wstep"] .przycisk--glowny {
  color: #f7f0df;
  background-color: var(--fp-accent);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.16) 100%),
    url("../img/ui/tekstura-skora-cta-512.webp");
  background-position: center;
  background-size: cover;
  border: 2px solid #63271f;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(60, 15, 10, 0.25),
    0 4px 0 #63271f,
    0 6px 10px rgba(73, 48, 31, 0.18);
  transition:
    transform 100ms ease,
    box-shadow 100ms ease,
    background-color 100ms ease;
}

body[data-strona="wstep"] .przycisk--glowny:hover {
  color: #fffaf0;
  background-color: #b4463c;
  border-color: #68231e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(60, 15, 10, 0.22),
    0 4px 0 #63271f,
    0 7px 14px rgba(73, 48, 31, 0.22);
  transform: translateY(-1px);
}

body[data-strona="wstep"] .przycisk--glowny:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.28),
    0 1px 0 #63271f;
}

body[data-strona="wstep"] .przycisk--drugi {
  color: var(--fp-text);
  background: linear-gradient(180deg, #fffaf0, #f3e7d0);
  border: 2px solid #6b4930;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(73, 48, 31, 0.15),
    0 3px 0 rgba(73, 48, 31, 0.22);
}

body[data-strona="wstep"] .przycisk--glowny:disabled,
body[data-strona="wstep"] .przycisk--glowny[aria-disabled="true"],
body[data-strona="wstep"] .przycisk--drugi:disabled {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
  filter: grayscale(0.25);
}

@media (hover: none) {
  body[data-strona="wstep"] .przycisk--glowny:hover,
  body[data-strona="wstep"] .przycisk--drugi:hover {
    transform: none;
  }
}

body[data-strona="wstep"] .przycisk--drugi:hover {
  color: var(--fp-text);
  background: #f8eedb;
  border-color: var(--fp-gold);
}

body[data-strona="wstep"] .przycisk:focus-visible,
body[data-strona="wstep"] .nowa-gra-kafelek:focus-visible {
  outline: 3px solid var(--fp-gold);
  outline-offset: 3px;
}

body[data-strona="wstep"] .przycisk--glowny {
  min-height: 46px;
}

/* --------------------------------------------------------------------------
   FORMULARZE — jak pola na papierze, bez przebudowy etykiet
   -------------------------------------------------------------------------- */
body[data-strona="wstep"] .pole label {
  color: #5f452e;
  font-weight: 700;
}

body[data-strona="wstep"] .pole input,
body[data-strona="wstep"] .pole select {
  color: var(--fp-text);
  background: #fffaf0;
  border: 1px solid rgba(73, 48, 31, 0.34);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(73, 48, 31, 0.06);
}

body[data-strona="wstep"] .pole input:focus-visible,
body[data-strona="wstep"] .pole select:focus-visible {
  border-color: var(--fp-gold);
  outline: 2px solid rgba(200, 148, 53, 0.42);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(200, 148, 53, 0.12);
}

@media (max-width: 47.99rem) {
  body[data-strona="wstep"] .pole input,
  body[data-strona="wstep"] .pole select {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   NAWIGACJA — wspólna dla wszystkich stron
   -------------------------------------------------------------------------- */
.nawigacja {
  background: linear-gradient(180deg, #74502c 0%, #5a3d21 100%);
  border-bottom: 2px solid #2a1c10;
  box-shadow: 0 3px 12px rgba(30, 20, 12, 0.28);
}

.nawigacja-ikona {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(20, 12, 6, 0.45));
}

.nawigacja-zaloguj {
  gap: 0.45rem;
}

.nawigacja-lista > li > a {
  gap: 0.5rem;
}

.nawigacja-lista a:hover,
.nawigacja-lista a:focus-visible {
  background: rgba(245, 236, 216, 0.11);
  color: #ffe9a8;
}

.nawigacja-lista a[aria-current="page"] {
  background: rgba(200, 148, 53, 0.16);
  box-shadow: inset 0 -3px 0 var(--fp-gold);
  color: #fff3d2;
}

@media (min-width: 60rem) {
  .nawigacja-lista > li > a {
    gap: 0.45rem;
    padding: 0.8rem 0.95rem;
    font-size: 1.05rem;
  }

  .nawigacja-lista > li > a .nawigacja-ikona {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 59.99rem) {
  .nawigacja-lista a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .nawigacja-lista .nawigacja-ikona {
    width: 22px;
    height: 22px;
  }
}

/* --------------------------------------------------------------------------
   MOJE GRY — ten sam krój dla listy i akcji „nowa gra”
   -------------------------------------------------------------------------- */
.panel-gry {
  background: linear-gradient(180deg, #5d4125 0%, #4a321b 100%);
  border-bottom-color: #24180e;
}

.panel-gry .panel-gry-nazwa,
.panel-gry-nowa-gra {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-m);
  font-weight: 700;
}

.panel-gry .panel-gry-nazwa {
  color: #f8efd9;
}

.panel-gry .panel-gry-termin {
  color: #d9c8a9;
}

.panel-gry-element {
  border-bottom-color: rgba(245, 236, 216, 0.1);
}

.panel-gry-nowa {
  border-top: 1px solid rgba(200, 148, 53, 0.48);
  margin-top: 0.15rem;
}

.panel-gry-nowa-gra {
  gap: 0.55rem;
  color: #ffe9a8;
}

.panel-gry-nowa-ikona {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.panel-gry .panel-gry-link:hover,
.panel-gry .panel-gry-link:focus-visible,
.panel-gry-element:focus-within .panel-gry-nazwa {
  color: #ffe9a8;
}

/* --------------------------------------------------------------------------
   LICZNIKI — ikony i czytelne liczby
   -------------------------------------------------------------------------- */
body[data-strona="wstep"] .licznik {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
  padding: 0.8rem 0.6rem 0.65rem;
  background: linear-gradient(180deg, #fbf4e5 0%, #f2e3c8 100%);
  border: 1px solid var(--fp-border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body[data-strona="wstep"] .licznik:nth-child(even) {
  background: linear-gradient(180deg, #f7eedc 0%, #efdfc2 100%);
}

body[data-strona="wstep"] .licznik-ikona {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 0.15rem;
}

body[data-strona="wstep"] .licznik-wartosc {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--fp-accent);
}

body[data-strona="wstep"] .licznik-etykieta {
  color: #6b573f;
}

/* --------------------------------------------------------------------------
   DELIKATNE MIKROANIMACJE — tylko przyciski; reszta bez ruchu
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-strona="wstep"] .przycisk,
  body[data-strona="wstep"] .przycisk:hover,
  body[data-strona="wstep"] .przycisk:active {
    transition: none !important;
    transform: none !important;
  }
}



/* ==========================================================================
   KOREKTA HUD 06.11.2026 — MOBILE, WIĘKSZE IKONY, GRA
   ========================================================================== */
@media (max-width: 47.99rem) {
  body[data-strona="wstep"] .karta {
    padding: 12px;
  }

  body[data-strona="wstep"] .karta-naglowek {
    margin: -12px -12px 12px;
    padding: 10px 12px 9px;
    font-size: 1.125rem;
    border-radius: 4px 4px 0 0;
  }

  body[data-strona="wstep"] .licznik {
    padding: 0.65rem 0.4rem 0.55rem;
  }

  body[data-strona="wstep"] .licznik-ikona {
    width: 42px;
    height: 42px;
  }

  body[data-strona="wstep"] .licznik-wartosc {
    font-size: 1.55rem;
  }

  body[data-strona="wstep"] .przycisk--glowny:active {
    transform: translateY(2px);
  }
}

/* LICZNIKI — ikona jest głównym akcentem, nie dodatkiem. */
body[data-strona="wstep"] .licznik {
  border: 2px solid rgba(107, 73, 48, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 rgba(73, 48, 31, 0.14);
}

body[data-strona="wstep"] .licznik-wartosc {
  font-size: 1.75rem;
  line-height: 1.1;
}

body[data-strona="wstep"] .licznik-etykieta {
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* NAWIGACJA — ikony większe, ale bez przeładowania paska. */
.nawigacja-ikona {
  width: 24px;
  height: 24px;
}

.nawigacja-zaloguj .nawigacja-ikona {
  width: 22px;
  height: 22px;
}

@media (min-width: 60rem) {
  .nawigacja-lista > li > a .nawigacja-ikona {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 59.99rem) {
  .nawigacja-lista .nawigacja-ikona {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   ARKUSZ GRY — ten sam HUD, bez zmiany układu i logiki
   ========================================================================== */
body[data-strona="arkusz"] .arkusz-grupa {
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 0 rgba(73, 48, 31, 0.16),
    0 8px 18px rgba(73, 48, 31, 0.1);
}

body[data-strona="arkusz"] .arkusz-grupa--rozliczenie {
  background: linear-gradient(180deg, #f3e7d1 0%, #e9dcc3 100%);
}

body[data-strona="arkusz"] .arkusz-grupa--plan {
  background: linear-gradient(180deg, #eee4cf 0%, #e7d9bd 100%);
  border-color: #5b3b25;
}

body[data-strona="arkusz"] .arkusz-grupa-naglowek {
  padding: 0.55rem 0.75rem;
  margin: -0.25rem -0.25rem var(--odst-2);
  background: rgba(232, 219, 195, 0.75);
  border-left: 4px solid var(--fp-gold);
  border-radius: 4px;
}

body[data-strona="arkusz"] .arkusz-grupa-tytul {
  color: #5b3b25;
}

body[data-strona="arkusz"] .arkusz-grupa .zakladki {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 0.54rem;
  padding: 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-strona="arkusz"] .arkusz-grupa .zakladki a {
  min-width: max-content;
  min-height: 44px;
  padding: 0.42rem 0.28rem;
  gap: 0.12rem;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border-radius: 6px;
}

body[data-strona="arkusz"] .arkusz-grupa .zakladki a:not([aria-current="page"]) {
  background: #f8eedb;
}

body[data-strona="arkusz"] .arkusz-grupa .zakladki a:not([aria-current="page"]):hover {
  background: #fffaf0;
}

body[data-strona="arkusz"] .arkusz-grupa .zakladki a[aria-current="page"] {
  background: #fff8e6;
  color: #7a1f1f;
  border: 1px solid var(--fp-gold);
  box-shadow: inset 0 3px 0 var(--fp-gold), 0 1px 3px rgba(58, 42, 26, 0.18);
}

body[data-strona="arkusz"] .arkusz-karta {
  background: linear-gradient(180deg, #fffaf0 0%, #f7ecd7 100%);
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 rgba(73, 48, 31, 0.14);
}

body[data-strona="arkusz"] .arkusz-karta > h2,
body[data-strona="arkusz"] .arkusz-karta > h3 {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(200, 148, 53, 0.55);
}

body[data-strona="arkusz"] .arkusz-grupa .przycisk,
body[data-strona="arkusz"] .arkusz-karta .przycisk {
  border: 2px solid #63271f;
  border-radius: 6px;
  min-height: 46px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(60, 15, 10, 0.22),
    0 3px 0 #63271f,
    0 5px 9px rgba(73, 48, 31, 0.16);
}

body[data-strona="arkusz"] .arkusz-grupa .przycisk--drugi,
body[data-strona="arkusz"] .arkusz-karta .przycisk--drugi {
  border: 2px solid #6b4930;
  background: linear-gradient(180deg, #fffaf0, #f2e4ca);
  color: #49301f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 3px 0 rgba(73, 48, 31, 0.18);
}

body[data-strona="arkusz"] .arkusz-grupa .przycisk-mini,
body[data-strona="arkusz"] .arkusz-karta .przycisk-mini {
  border: 1px solid #6b4930;
  border-radius: 5px;
  background: #f8eedb;
  box-shadow: 0 2px 0 rgba(73, 48, 31, 0.18);
}

body[data-strona="arkusz"] .pole-arkusza input[type="number"],
body[data-strona="arkusz"] .pole-arkusza select {
  border: 2px solid rgba(107, 73, 48, 0.55);
  border-radius: 5px;
  background: #fffaf0;
}

body[data-strona="arkusz"] .limit-panel {
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 rgba(73, 48, 31, 0.16);
}

body[data-strona="arkusz"] .limit-panel .limit-tytul {
  border-bottom: 1px solid rgba(200, 148, 53, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  body[data-strona="arkusz"] .arkusz-grupa .przycisk,
  body[data-strona="arkusz"] .arkusz-grupa .przycisk:hover,
  body[data-strona="arkusz"] .arkusz-grupa .przycisk:active,
  body[data-strona="arkusz"] .arkusz-karta .przycisk,
  body[data-strona="arkusz"] .arkusz-karta .przycisk:hover,
  body[data-strona="arkusz"] .arkusz-karta .przycisk:active {
    transition: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   POPRAWKI PO TEŚCIE 06.11.2026
   ========================================================================== */

/* 1. JEDEN KOLOR GŁÓWNYCH RAMEK — bez jaśniejszych wyjątków dla niusów. */
body[data-strona="wstep"] .karta,
body[data-strona="wstep"] .karta--gazeta,
body[data-strona="wstep"] .karta--mocna,
body[data-strona="wstep"] .aktualnosci-ramka .karta--gazeta {
  border: 2px solid var(--fp-frame);
}

body[data-strona="wstep"] .karta--wyrozniona {
  border-color: var(--fp-frame);
}

body[data-strona="wstep"] .aktualnosci-ramka {
  border: 2px solid var(--fp-frame);
}

body[data-strona="wstep"] .komiks img {
  border: 2px solid var(--fp-frame);
  border-radius: 7px;
}

/* 2. ARCHIWUM NIUSÓW — równy odstęp po otwarciu <details>. */
body[data-strona="wstep"] .nius-archiwum[open] {
  display: grid;
  gap: 0;
}

body[data-strona="wstep"] .nius-archiwum > summary {
  margin: 0;
  grid-column: 1 / -1;
}

body[data-strona="wstep"] .nius-archiwum[open] > .karta--gazeta {
  margin: 0 0 var(--odst-4, 1rem);
}

body[data-strona="wstep"] .nius-archiwum[open] > .karta--gazeta:first-of-type {
  margin-top: 0;
}

body[data-strona="wstep"] .nius-archiwum[open] > .karta--gazeta:last-child {
  margin-bottom: 0;
}

/* 3. OSTATNIO NA FORUM — ta sama karta i ten sam rytm co reszta. */
body[data-strona="wstep"] .sekcja--forum {
  background: transparent;
}

body[data-strona="wstep"] .forum-ostatnie-ramka {
  padding: var(--odst-3);
  background: linear-gradient(180deg, #fffaf0 0%, #f6ebd5 100%);
  border: 2px solid var(--fp-frame);
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(73, 48, 31, 0.18),
    0 10px 22px rgba(73, 48, 31, 0.14);
}

body[data-strona="wstep"] .forum-ostatnie-poz {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(107, 73, 48, 0.2);
}

body[data-strona="wstep"] .forum-ostatnie-poz:last-child {
  border-bottom: 0;
}

body[data-strona="wstep"] .forum-ostatnie-link {
  padding: 4px 0 0;
}

body[data-strona="wstep"] .forum-ostatnie-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

/* 4. STOPKA — jeden ciemny kierunek z ciepłą górną krawędzią. */
body[data-strona="wstep"] .stopka {
  background: linear-gradient(180deg, #4a3218 0%, #2e1f10 100%);
  border-top: 2px solid var(--fp-gold);
}

body[data-strona="wstep"] .stopka-tresc {
  gap: 10px;
  text-align: center;
}

body[data-strona="wstep"] .stopka-dol {
  gap: 8px;
}

body[data-strona="wstep"] .stopka a,
body[data-strona="wstep"] .stopka-facebook-link {
  color: #f5ecd8;
}

body[data-strona="wstep"] .stopka a:hover,
body[data-strona="wstep"] .stopka-facebook-link:hover {
  color: #ffe9a8;
}

body[data-strona="wstep"] .stopka-linki a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

/* 5. NAWIGACJA — mniej szeroka, ikony bez zmniejszania. */
@media (min-width: 60rem) {
  .nawigacja-lista > li > a {
    gap: 0.38rem;
    padding: 0.8rem 0.6rem;
    font-size: 0.98rem;
  }
}

/* 6. ARKUSZ — bez podwójnej ramki na istniejących obudowach. */
body[data-strona="arkusz"] .arkusz-grupa--arkusz,
body[data-strona="arkusz"] .arkusz-karta--pastwiska {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 7. MOBILE — stopka i forum bez wystających elementów. */
@media (max-width: 47.99rem) {
  body[data-strona="wstep"] .stopka-tresc {
    gap: 8px;
    padding-inline: var(--odst-4);
  }

  body[data-strona="wstep"] .stopka-dol {
    gap: 6px;
  }

  body[data-strona="wstep"] .stopka-linki {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 10px;
  }

  body[data-strona="wstep"] .forum-ostatnie-ramka {
    padding: 10px;
  }

  body[data-strona="wstep"] .nius-archiwum[open] > .karta--gazeta {
    margin-bottom: 12px;
  }

  body[data-strona="wstep"] .nius-archiwum[open] > .karta--gazeta:last-child {
    margin-bottom: 0;
  }
}


/* MOBILE ZAKŁADEK — zgodnie z przyjętym wariantem: tylko ikony. */
@media (max-width: 47.99rem) {
  body[data-strona="arkusz"] .arkusz-grupa .zakladki {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    gap: 0.54rem;
    padding: 0.2rem;
  }

  body[data-strona="arkusz"] .arkusz-grupa .zakladki a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.15rem;
  }
}


/* SYMULATORY I OPIS MIASTA — ramki, których brakowało na arkuszu. */
body[data-strona="arkusz"] .arkusz-symulator {
  padding: 0.55rem;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ebd5 100%);
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 3px 0 rgba(73, 48, 31, 0.16);
}

body[data-strona="arkusz"] .arkusz-symulator--otwarty {
  background: #fffaf0;
  border: 2px solid #6b4930;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(73, 48, 31, 0.18),
    0 10px 22px rgba(73, 48, 31, 0.12);
}

body[data-strona="arkusz"] .arkusz-opis {
  background: linear-gradient(180deg, #ead8b8 0%, #e2cda9 100%);
  border-left: 3px solid #a67c3b;
  border-radius: 0 5px 5px 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(73, 48, 31, 0.08);
}


/* AKORDEON „O GRZE W SKRÓCIE” I KARTY RANKINGU — wspólna ramka HUD. */
.akordeon--wyrozniony {
  border: 2px solid var(--fp-frame);
  border-radius: 7px;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ebd5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(73, 48, 31, 0.18),
    0 10px 22px rgba(73, 48, 31, 0.14);
}

body[data-strona="statystyki"] .karta {
  border: 2px solid var(--fp-frame);
  border-radius: 7px;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ebd5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(73, 48, 31, 0.18),
    0 10px 22px rgba(73, 48, 31, 0.14);
}


/* MOBILE — numer w tabeli wyników i korona nie mogą być przycięte. */
@media (max-width: 47.99rem) {
  body[data-strona="arkusz"] .miasteczko-col--num {
    padding-top: 7px;
  }

  body[data-strona="arkusz"] .miasteczko-korona {
    transform: translateX(-60%) rotate(-6deg) translateY(30%);
  }
}


/* SALOON: nad panelem limitu, także na mobile. */
body[data-strona="arkusz"] .saloon-gry {
  z-index: 200;
}

/* TYLKO wariant w przepływie potrzebuje position; duży i szuflada są fixed. */
body[data-strona="arkusz"] .saloon-gry--sredni {
  position: relative;
  z-index: 200;
}

body[data-strona="arkusz"] .saloon-gry--popup {
  z-index: 210;
}

body[data-strona="arkusz"] .saloon-gry-tlo {
  z-index: 205;
}

body[data-strona="arkusz"] .saloon-gry-fab {
  /* Ikona ma być POD panelem limitu (45 desktop / 150 mobile),
     ale nad dolnym paskiem menu. */
  z-index: 40;
}

/* SALOON NA STRONIE GŁÓWNEJ — pole i WYŚLIJ w jednej linii, mniejszy
   przycisk i ciaśniejsze pigułki. */
@media (max-width: 47.99rem) {
  body[data-strona="wstep"] .saloon-pole {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
  }

  body[data-strona="wstep"] .saloon-pole input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
  }

  body[data-strona="wstep"] .saloon-pole .przycisk {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }

  body[data-strona="wstep"] .saloon-szybkie {
    gap: 0.25rem;
    margin-top: 0.35rem;
  }

  body[data-strona="wstep"] .saloon-szybki-tekst {
    padding: 0.2rem 0.45rem;
    min-height: 25px;
    font-size: 0.75rem;
    line-height: 1.2;
  }
}


/* POWITANIE „WITAJ LOGIN!” — link do strony głównej bez podkreślenia. */
.nawigacja-login {
  display: inline-block;
  color: #ffe9a8;
  text-decoration: none;
}

.nawigacja-login:hover {
  color: #ffe9a8;
  text-decoration: none;
}

.nawigacja-login:focus-visible {
  color: #ffe9a8;
  text-decoration: none;
  outline: 2px solid var(--fokus-na-ciemnym);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ARCHIWUM 1.0 — graficzny przycisk pod Mistrzem dnia. */
.archiwum-cta {
  text-align: center;
}

.archiwum-cta-link {
  display: block;
  max-width: 30rem;
  margin: 0.25rem auto 0;
  line-height: 0;
  text-decoration: none;
}

.archiwum-cta-link picture,
.archiwum-cta-link img {
  display: block;
  width: 100%;
  height: auto;
}

.archiwum-cta-link img {
  filter: drop-shadow(0 3px 4px rgba(73, 48, 31, 0.18));
  transition: transform 120ms ease;
}

.archiwum-cta-link:hover img {
  transform: translateY(-1px);
}

.archiwum-cta-link:focus-visible {
  outline: 3px solid var(--fp-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.archiwum-cta-podpis {
  margin: 0.55rem 0 0;
  color: #6b573f;
  font-size: var(--rozmiar-s);
}


/* EMOTIKONY SALOONU */
.emotka {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin: 0 0.08em;
  vertical-align: -0.28em;
  object-fit: contain;
}

.saloon-emotki-pomoc {
  margin-left: 0.1rem;
}

.pomoc-dymek table {
  width: 100%;
  margin-top: 0.45rem;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.pomoc-dymek th,
.pomoc-dymek td {
  padding: 0.18rem 0.35rem;
  border-bottom: 1px solid rgba(73, 48, 31, 0.18);
  text-align: left;
}

.pomoc-dymek th {
  font-family: var(--font-naglowek);
  font-size: 0.72rem;
  color: #5b3b25;
}

.pomoc-dymek td:first-child {
  width: 2.2rem;
  font-size: 1.05rem;
  text-align: center;
}

/* „ARCHIWUM” — nagłówek tak jak pozostałe karty, bez centrowania. */
.archiwum-cta {
  text-align: left;
}

.archiwum-cta-link,
.archiwum-cta-podpis {
  text-align: center;
}


/* EMOTIKONY WIĘKSZE — rozmiar jak awatar wpisu (24 px). */
.saloon-tresc .emotka,
.saloon-gry-tresc .emotka {
  width: 24px;
  height: 24px;
  margin: 0 0.1em;
  vertical-align: middle;
}

.pomoc-dymek .emotka {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}