/* Jeden arkusz dla całej strony. Kolejność: czcionka, kolory (5 trybów), podstawy,
   szkielet, przełącznik, spis gier, przyciski. Wszystkie wymiary w rem — A−/A+
   zmienia rozmiar <html>, więc powiększa się cała strona. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Kolory ---- */

/* Łąka jasna — domyślnie. Kontrast: tekst 12,8:1, link 7,2:1. Akcent tylko jako ozdoba. */
:root {
  --tlo: #f6f8f3;
  --tekst: #173322;
  --link: #1c5e3a;
  --akcent: #f2c230;
  --linia: #c9d4c4;
  --cel: max(2.75rem, 44px); /* cel dotyku: min. 44×44 px, rośnie z literami */
  color-scheme: light;
}

/* Łąka ciemna — gdy system ma tryb ciemny i nie wybrano trybu z przełącznika. */
@media (prefers-color-scheme: dark) {
  :root:not([data-kolory]) {
    --tlo: #10231a;
    --tekst: #edf3ea;
    --link: #8fd6a8;
    --linia: #3b5446;
    color-scheme: dark;
  }
}

/* „Zwiększ kontrast” w systemie: linie w kolorze tekstu (tryby z przełącznika już tak mają). */
@media (prefers-contrast: more) {
  :root:not([data-kolory]) {
    --linia: var(--tekst);
  }
}

:root[data-kolory="czarny-bialy"] {
  --tlo: #ffffff; --tekst: #000000; --link: #0000cc; --akcent: #0000cc; --linia: #000000;
  color-scheme: light;
}

:root[data-kolory="bialy-czarny"] {
  --tlo: #000000; --tekst: #ffffff; --link: #ffff00; --akcent: #ffff00; --linia: #ffffff;
  color-scheme: dark;
}

:root[data-kolory="zolty-czarny"] {
  --tlo: #000000; --tekst: #ffff00; --link: #ffffff; --akcent: #ffffff; --linia: #ffff00;
  color-scheme: dark;
}

:root[data-kolory="czarny-zolty"] {
  --tlo: #ffff00; --tekst: #000000; --link: #0000cc; --akcent: #0000cc; --linia: #000000;
  color-scheme: light;
}

/* ---- Podstawy ---- */

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  line-height: 1.5;
  overflow-wrap: break-word;
}

a {
  color: var(--link);
  text-decoration-thickness: max(1px, 0.06em);
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 3px solid var(--tekst);
  outline-offset: 2px;
}

h1,
h2 {
  line-height: 1.2;
  hyphens: auto;
}

h1 {
  font-size: 1.8rem;
  margin: 1rem 0 0.75rem;
}

h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.5rem;
}

p,
ul {
  margin: 0 0 0.75rem;
}

/* Tekst tylko dla czytnika ekranu. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Szkielet: jedna kolumna, wiersz ≤ 80 znaków ---- */

.ustawienia,
header,
main,
footer {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  position: static;
  display: inline-block;
  margin: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
}

header {
  padding-top: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linia);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.site-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.site-name a {
  color: var(--tekst);
  text-decoration: none;
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.langs a[aria-current] {
  color: var(--tekst);
  font-weight: 700;
  text-decoration: none;
}

/* Menu główne: trzecie „piętro” nagłówka, kafle. Bieżący dział wypełniony kolorem tekstu
   (kształt + tło, nie sam kolor napisu). Linki bez podkreślenia — wyróżnia je ramka. */
.menu {
  flex-basis: 100%;
  border-top: 1px solid var(--linia);
  padding-top: 0.75rem;
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cel);
  min-height: var(--cel);
  box-sizing: border-box;
  padding: 0 1rem;
  border: 2px solid var(--link);
  border-radius: 0.375rem;
  font-weight: 700;
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
}

.menu a[aria-current] {
  background: var(--tekst);
  color: var(--tlo);
  border-color: var(--tekst);
}

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--linia);
}

/* ---- Przełącznik kolorów i liter ---- */

/* Bez JavaScriptu przyciski by nie działały — wtedy pasek znika. */
.ustawienia {
  display: none;
}

.js .ustawienia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linia);
}

.grupa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.grupa-et {
  font-weight: 700;
}

.ustawienia button {
  min-width: var(--cel);
  min-height: var(--cel);
  padding: 0 0.5rem;
  border: 2px solid;
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* Każdy przycisk kolorów pokazuje swój tryb. */
.k-zwykle { background: #f6f8f3; color: #173322; border-color: #173322; }
.k-czarny-bialy { background: #ffffff; color: #000000; border-color: #000000; }
.k-bialy-czarny { background: #000000; color: #ffffff; border-color: #ffffff; }
.k-zolty-czarny { background: #000000; color: #ffff00; border-color: #ffff00; }
.k-czarny-zolty { background: #ffff00; color: #000000; border-color: #000000; }

@media (prefers-color-scheme: dark) {
  .k-zwykle { background: #10231a; color: #edf3ea; border-color: #edf3ea; }
}

/* Zaznaczony: gruba ramka do środka (w kolorze napisu przycisku). Do środka, nie na zewnątrz —
   zewnętrzny pierścień zlewał się z obrysem fokusu i fokusu nie było widać. */
.ustawienia button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 max(4px, 0.25rem) currentColor;
}

.l {
  background: var(--tlo);
  color: var(--tekst);
  border-color: var(--tekst);
}

/* Na granicy 8/30 px: wygaszony, ale nadal z fokusem (aria-disabled, nie disabled). */
.l[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Tryb wysokiego kontrastu Windows narzuca własne kolory — nasze przyciski kolorów nic by nie dały. */
@media (forced-colors: active) {
  .grupa-kolory {
    display: none;
  }

  /* Tryb Windows usuwa nasze tła — bieżący kafel w kolorach systemowych „zaznaczenia”. */
  .menu a[aria-current] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  /* forced-color-adjust: none zdejmuje wymuszanie także z obrysu — fokus w kolorze systemowym. */
  .menu a[aria-current]:focus-visible {
    outline-color: CanvasText;
  }
}

/* ---- Spis gier (strona Gry) ---- */

.gra {
  border-left: 0.375rem solid var(--akcent);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

.gra h2 {
  margin-top: 0;
}

/* ---- Przyciski („Zobacz gry”, wejście do gry) ----
   W kodzie to linki (prowadzą na inną stronę), wyglądem — pełne przyciski.
   Kontrast napisu (kolor tła) na tle przycisku (kolor linku) ≥ 7:1 w każdym trybie. */

.przycisk {
  /* inline-block, nie inline-flex: flex rozbiłby napis z <span lang="pl"> na osobne
     kawałki, które nie zawijają się razem (wyjście za ekran przy 30 px) i gubią spację. */
  display: inline-block;
  max-width: 100%;
  min-height: var(--cel);
  box-sizing: border-box;
  padding: 0.5rem 1.25rem; /* zapas dla przeglądarek bez jednostki lh (Safari < 16.4) */
  /* Przy małych literach napis zostaje na środku pola 44 px (1lh = wysokość wiersza). */
  padding-block: max(0.5rem, calc(22px - 0.5lh - 2px));
  border: 2px solid var(--link);
  border-radius: 0.5rem;
  background: var(--link);
  color: var(--tlo);
  font-weight: 700;
  text-decoration: none;
}

.przycisk:hover {
  text-decoration: underline;
}