/* Chimera -- chimera.co.pl
 *
 * Wartosci kolorow, odstepow i rozmiarow przepisane co do liczby z projektu
 * (Claude Design, "Chimera MUD v2").  Projekt trzymal je w stylach inline
 * przy kazdym elemencie; tu sa raz, w klasach, bo strone sie utrzymuje,
 * a nie tylko oglada.
 *
 * DOLOZONE PONAD PROJEKT: sekcja responsywna na dole.  Projekt nie mial
 * zadnej -- siatka 6 kolumn z liczbami i siatki "190px 1fr" nie mieszcza sie
 * na telefonie, a telefon to polowa ruchu.  Nic poza ta sekcja nie odbiega
 * od projektu.
 */

:root {
  --tlo:              #0c0c0d;
  --tlo-panel:        #101012;
  --tlo-terminal:     #0a0a0b;
  --tlo-panel-hover:  #15131c;
  --tlo-rasa-hover:   #101014;

  --tekst:            #c9c5bb;
  --jasny:            #f0ece1;
  --jasny-2:          #e8e4da;
  --jasny-3:          #ddd8cc;

  --szary:            #a29a8d;
  --szary-2:          #9a9184;
  --szary-3:          #8b8479;
  --przygaszony:      #6b6459;
  --przygaszony-2:    #5e5850;
  --przygaszony-3:    #4d4750;
  --nawigacja:        #7d766b;

  --akcent:           #9c86e8;
  --akcent-jasny:     #c4b4ff;
  --akcent-hover:     #b7a4ff;
  --akcent-linia:     #4a3f78;

  --ramka:            #262628;
  --ramka-kropki:     #2b2a2c;
  --ramka-jasna:      #35343a;

  --ostrzezenie:      #7a2020;
  --ostrzezenie-tekst:#c2734d;

  --kolumna:          1000px;
}

/* --- podstawa -------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tlo);
}

body {
  color: var(--tekst);
  /* JetBrains Mono z Google Fonts, ale lancuch zapasowy jest prawdziwy:
   * strona ma wygladac tak samo, gdy CDN nie odpowie albo gdy ktos blokuje
   * fonty zewnetrzne. */
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 14px;
  line-height: 1.75;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--akcent); color: var(--tlo); }

/* Domyslnie odnosnik jest niewidoczny jako odnosnik -- podkreslenia i kolor
 * dostaja tylko te w tresci (.tresc a).  W projekcie nawigacja i przyciski
 * byly <span onClick>, wiec regula globalna ich nie dotykala; tutaj sa
 * prawdziwymi <a> i bez tego resetu wszystkie zrobilyby sie fioletowe. */
a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

.kolumna {
  max-width: var(--kolumna);
  margin: 0 auto;
  padding: 0 32px;
}

/* Widoczne tylko dla czytnikow ekranu i dla klawiatury (skip link). */
.tylko-dla-czytnika {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tylko-dla-czytnika:focus {
  position: static;
  width: auto; height: auto;
  margin: 0; clip: auto;
  display: inline-block;
  padding: 8px 14px;
  background: var(--akcent);
  color: var(--tlo);
  font-weight: 700;
}

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

@keyframes kursor { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* --- naglowek -------------------------------------------------------------- */

.naglowek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ramka);
  font-size: 12.5px;
  letter-spacing: .06em;
  position: sticky;
  top: 0;
  background: var(--tlo);
  z-index: 20;
}

.znak {
  color: var(--jasny-2);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
/* Ten sam powod co przy znaku wodnym: PNG bez alfy dawalby ciemny kwadracik
 * obok napisu.  screen wtapia jego tlo w tlo naglowka. */
.znak img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .9;
  mix-blend-mode: screen;
}
.znak-domena { color: var(--przygaszony); }

.nawigacja { display: flex; gap: 22px; }
.nawigacja a {
  color: var(--nawigacja);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nawigacja a:hover { color: var(--jasny-2); }
.nawigacja a[aria-current="page"] {
  color: var(--jasny-2);
  border-bottom-color: var(--akcent);
}

/* --- wspolne elementy tresci ----------------------------------------------- */

.wiersz-polecenia { color: var(--przygaszony-2); font-size: 12.5px; }

.sekcja {
  padding: 60px 0;
  border-bottom: 1px solid var(--ramka);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
}
.sekcja--ostatnia { border-bottom: 0; }

.sekcja-tytul {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akcent);
  margin: 0;
  font-weight: 400;
}

.sekcja p { margin: 0 0 20px; color: var(--szary); }
.sekcja p:last-child { margin-bottom: 0; }
.sekcja p.wiodacy { font-size: 17px; color: var(--jasny-3); }
.sekcja p.przypis { color: var(--przygaszony); }

/* Odnosnik w tresci ciaglej -- fioletowy, z podkresleniem.
 *
 * CELOWO ".tresc p a", a nie ".tresc a".  Szersza wersja ma specyficznosc
 * (0,1,1) i bije nia .przycisk-glowny (0,1,0): tekst przycisku dostawal
 * kolor akcentu, czyli DOKLADNIE kolor wlasnego tla, a kafelki miast
 * (tez <a>) dostawaly fioletowa kreske pod spodem.  Odnosniki prozy stoja
 * wylacznie w akapitach, komponenty nigdy -- wiec te dwa swiaty sie
 * rozchodza i zadna ze stron nie musi podbijac specyficznosci. */
.tresc p a {
  color: var(--akcent);
  border-bottom: 1px solid var(--akcent-linia);
}
.tresc p a:hover { color: var(--akcent-jasny); border-bottom-color: var(--akcent); }

strong { color: var(--jasny-2); font-weight: 400; }

/* Lista "tytul + akapit": roznice, gildie, faq.  Jeden wzorzec, trzy uzycia. */
.pozycje { display: flex; flex-direction: column; }
.pozycja { padding: 16px 0; border-top: 1px dotted var(--ramka-kropki); }
.pozycja-tytul { color: var(--jasny); margin: 0; font-size: 14px; font-weight: 400; }
.pozycja p { margin: 6px 0 0; color: var(--szary-2); max-width: 76ch; }
.pozycje-przypis { margin-top: 22px; color: var(--przygaszony); }

/* --- glowka podstron ------------------------------------------------------- */

.glowka { padding: 60px 0 40px; border-bottom: 1px solid var(--ramka); }
.glowka-tytul {
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 300;
  color: var(--jasny);
  margin: 14px 0 0;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.glowka p {
  margin: 20px 0 0;
  max-width: 70ch;
  color: var(--szary);
  font-size: 15px;
}

/* --- start: bohater -------------------------------------------------------- */

.bohater {
  position: relative;
  padding: 70px 0 60px;
  border-bottom: 1px solid var(--ramka);
  overflow: hidden;
}
.bohater-godlo {
  position: absolute;
  right: 10px;
  top: -20px;
  width: 470px;
  height: 470px;
  object-fit: contain;
  opacity: .18;
  filter: grayscale(.5);
  pointer-events: none;

  /* Godlo jest PNG-iem BEZ kanalu alfa, a jego tlo jest odrobine jasniejsze
   * niz tlo strony -- bez tego znak wodny rysuje sie jako widoczny
   * PROSTOKAT z ostrymi krawedziami zamiast wtapiac sie w tlo.
   *
   * screen: wynik = 1-(1-a)(1-b), wiec piksele bliskie czerni znikaja
   * w ciemnym tle, a jasne partie godla zostaja.  Dokladnie do tego ten
   * tryb sluzy i nie wymaga przerabiania samej grafiki.
   *
   * Maska dodatkowo wygasza sam brzeg kadru -- screen radzi sobie z czernia,
   * ale rogi grafiki maja delikatne rozjasnienia, ktore inaczej zdradzaja
   * krawedz. */
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 92%);
}
.bohater-wnetrze { position: relative; }
.bohater .wiersz-polecenia { margin-bottom: 26px; }

.bohater-tytul {
  font-size: clamp(38px, 7vw, 74px);
  line-height: 1.06;
  font-weight: 300;
  color: var(--jasny);
  letter-spacing: -.02em;
  margin: 0;
}
.bohater-tytul .mocny { font-weight: 700; }
.bohater-tytul .akcent { color: var(--akcent); font-weight: 700; }
.kursor { color: var(--akcent); animation: kursor 1.1s step-end infinite; }

.bohater-opis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  margin-top: 44px;
  max-width: 820px;
}
.bohater-opis p { margin: 0; color: var(--szary); font-size: 15px; }

.przyciski {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
}
.przycisk-glowny {
  padding: 12px 20px;
  background: var(--akcent);
  color: var(--tlo);
  font-weight: 700;
}
.przycisk-glowny:hover { background: var(--akcent-hover); color: var(--tlo); }
.przycisk-drugi {
  padding: 12px 20px;
  border: 1px solid var(--ramka-jasna);
  color: var(--tekst);
}
.przycisk-drugi:hover { border-color: var(--akcent); }
.podpowiedz { color: var(--przygaszony-2); padding-left: 6px; }

/* --- start: liczby --------------------------------------------------------- */

.liczby {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--ramka);
}
.liczba { padding: 24px 14px 24px 0; }
.liczba-n { font-size: 22px; color: var(--jasny); font-weight: 500; }
.liczba-l {
  font-size: 11.5px;
  color: var(--przygaszony);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* --- miasta ---------------------------------------------------------------- */

/* Odstepy miedzy kafelkami robi tlo kontenera przez gap:1px -- stad kreski
 * o grubosci wlosa bez pojedynczych border-ow. */
.miasta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ramka);
}
.miasto { background: var(--tlo-panel); padding: 24px 26px; display: block; }
a.miasto:hover { background: var(--tlo-panel-hover); }
.miasto-glowka { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.miasto-klucz { color: var(--akcent); }
.miasto-nazwa { font-size: 20px; color: var(--jasny); font-weight: 500; }
.miasto-region {
  font-size: 12px;
  color: var(--przygaszony);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.miasto p { margin: 12px 0 0; color: var(--szary); max-width: 640px; }

/* Wariant na stronie "swiat": kafelki sa tam trescia glowna, nie zajawka. */
.miasta--duze { margin-top: 40px; }
.miasta--duze .miasto { padding: 30px; }
.miasta--duze .miasto-nazwa { font-size: 24px; }
.miasta--duze .miasto p { margin-top: 14px; max-width: 70ch; }

/* Przypis pod lista, poza siatka sekcji (rasy, zawody). */
.blok-przypis { padding: 40px 0 60px; color: var(--przygaszony); }
.blok-przypis--waski { padding: 34px 0 20px; }
.blok-ramka { padding: 0 0 60px; }

/* --- rasy ------------------------------------------------------------------ */

.rasy { padding-top: 20px; }
.rasa {
  display: grid;
  grid-template-columns: 44px 170px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px dotted var(--ramka-kropki);
}
.rasa:hover { background: var(--tlo-rasa-hover); }
.rasa-nr { color: var(--przygaszony-3); }
.rasa-nazwa { color: var(--jasny); }
.rasa-opis { color: var(--szary-2); }

/* --- zawody ---------------------------------------------------------------- */

.grupy-zawodow { padding-top: 20px; }
.grupa-zawodow {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
  padding: 22px 0;
  border-top: 1px dotted var(--ramka-kropki);
}
.grupa-tytul {
  color: var(--akcent);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 400;
}
.zawody { display: flex; flex-wrap: wrap; gap: 8px; }
.zawod {
  padding: 7px 13px;
  border: 1px solid var(--ramka);
  color: var(--tekst);
  background: var(--tlo-panel);
}
.ramka-info {
  border: 1px solid var(--ramka);
  padding: 20px 24px;
  color: var(--szary-2);
}

/* --- pomoc ----------------------------------------------------------------- */

.kroki-uklad {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  padding: 40px 0 0;
  align-items: start;
}
.krok {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px dotted var(--ramka-kropki);
}
.krok-nr { color: var(--akcent); }
.krok-tekst { color: var(--jasny-3); }

.uwaga {
  margin-top: 28px;
  border-left: 2px solid var(--ostrzezenie);
  padding: 4px 0 4px 18px;
}
.uwaga-tytul {
  color: var(--ostrzezenie-tekst);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.uwaga p { margin: 8px 0 0; color: var(--szary); }

.terminal {
  border: 1px solid var(--ramka);
  background: var(--tlo-terminal);
  padding: 22px 24px;
  line-height: 2;
  overflow-x: auto;
}
.terminal-etykieta { color: var(--przygaszony-3); }
.terminal-etykieta + .terminal-etykieta,
.terminal > * + .terminal-etykieta { margin-top: 14px; }
.terminal-komenda { color: var(--jasny); }
.terminal-zwykly { color: var(--szary); }
.terminal-slowo { color: var(--akcent); }

.spolecznosc { display: flex; gap: 12px; flex-wrap: wrap; }
.spolecznosc a {
  padding: 12px 22px;
  border: 1px solid var(--ramka);
  color: var(--tekst);
}
.spolecznosc a.wyroznione {
  border-color: var(--akcent-linia);
  color: var(--akcent-jasny);
  background: rgba(75, 60, 140, .18);
}

/* --- stopka ---------------------------------------------------------------- */

.stopka {
  border-top: 1px solid var(--ramka);
  padding: 36px 0 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  font-size: 12.5px;
  color: var(--przygaszony-2);
}
.stopka-tekst { max-width: 70ch; }
.stopka-znak { color: var(--szary-3); letter-spacing: .1em; }
.stopka p { margin: 12px 0 0; }
.stopka p + p { margin-top: 8px; }
.stopka-nawigacja { display: flex; flex-direction: column; gap: 8px; }
.stopka-nawigacja a:hover { color: var(--tekst); }

/* --- responsywnosc (poza projektem) ---------------------------------------- */

@media (max-width: 900px) {
  .liczby { grid-template-columns: repeat(3, 1fr); }
  .kroki-uklad { grid-template-columns: 1fr; gap: 34px; }
  .bohater-godlo { width: 340px; height: 340px; right: -40px; opacity: .12; }
}

@media (max-width: 720px) {
  .kolumna { padding: 0 20px; }

  .naglowek {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* Przyklejony naglowek w dwoch wierszach zjadlby na telefonie jedna
     * trzecia ekranu -- na waskim niech sie przewija razem z trescia. */
    position: static;
  }
  .nawigacja { gap: 16px; flex-wrap: wrap; }

  .sekcja,
  .grupa-zawodow { grid-template-columns: 1fr; gap: 16px; }
  .sekcja { padding: 44px 0; }

  .bohater { padding: 48px 0 44px; }
  .bohater-opis { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .bohater-godlo { width: 260px; height: 260px; top: 0; right: -60px; opacity: .1; }

  .liczby { grid-template-columns: repeat(2, 1fr); }
  .liczba { padding: 18px 12px 18px 0; }

  .miasto { padding: 20px; }
  .miasta--duze .miasto { padding: 22px 20px; }

  .rasa { grid-template-columns: 34px 1fr; gap: 6px 14px; }
  .rasa-opis { grid-column: 2; }

  .glowka { padding: 44px 0 30px; }

  .stopka { grid-template-columns: 1fr; gap: 24px; }
  .stopka-nawigacja { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}

/* Kursor miga w nieskonczonosc -- dla kogos z nadwrazliwoscia na ruch to
 * realna przeszkoda w czytaniu, a nic nie wnosi poza klimatem. */
@media (prefers-reduced-motion: reduce) {
  .kursor { animation: none; }
  * { transition: none !important; }
}