/* Szlakiem Złotych Miast — wspólny arkusz stylów */

:root{
  --tlo:#1c1410; --tlo-2:#221812; --karta:#2a1e16; --ramka:#4a3826;
  --zloto:#d9a93c; --zloto-jasne:#f0c968; --tekst:#f3e9d8; --szary:#b9a88f;
  --f-tytul:'Metamorphous',Georgia,serif;
  --f-naglowek:'Marcellus',Georgia,serif;
  --f-tekst:'Alegreya',Georgia,serif;
}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;color:var(--tekst);font:1.0625rem/1.65 var(--f-tekst);
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(217,169,60,.16), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(217,169,60,.10) 1px, transparent 1.5px) 0 0/28px 28px,
    var(--tlo);}
a{color:var(--zloto)}
img{max-width:100%}

/* ---------- Nagłówek ---------- */
.naglowek{text-align:center;padding:2.2rem 16px 1.4rem}
.slonce{width:76px;height:76px;display:block;margin:0 auto .6rem}
.naglowek h1{font:400 2.9rem/1.15 var(--f-tytul);color:var(--zloto);margin:0;
  text-shadow:0 2px 18px rgba(217,169,60,.25)}
.podtytul{font-style:italic;color:var(--szary);margin:.35rem 0 0;font-size:1.15rem}

/* ---------- Nawigacja ---------- */
.nawigacja{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.4rem;
  border-top:1px solid var(--zloto);border-bottom:1px solid var(--zloto);
  padding:.6rem 16px;font:1.05rem var(--f-naglowek)}
.nawigacja a{color:var(--tekst);text-decoration:none;padding:.15rem 0}
.nawigacja a:hover{color:var(--zloto-jasne)}
.nawigacja a.aktywna{color:var(--zloto);border-bottom:2px solid var(--zloto)}

/* ---------- Treść ---------- */
main{max-width:1000px;margin:0 auto;padding:1.8rem 16px 2.5rem}
h2{font:400 1.75rem var(--f-naglowek);color:var(--zloto);text-align:center;margin:2.2rem 0 1rem}
h3{font:400 1.3rem var(--f-naglowek);color:var(--zloto);margin:.2rem 0 .35rem}
.wstep{max-width:680px;margin:0 auto;text-align:center;font-size:1.15rem}

/* ---------- Licznik ---------- */
.licznik{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:1.8rem 0 .5rem}
.licznik div{background:var(--karta);border:1px solid var(--ramka);border-radius:10px;
  min-width:108px;padding:.7rem .6rem;text-align:center}
.licznik b{display:block;font:400 2rem/1.1 var(--f-tytul);color:var(--zloto)}
.licznik span{font:.78rem var(--f-naglowek);color:var(--szary);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Kafelki modułów ---------- */
.moduly{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem}
.kafel{display:block;background:var(--karta);border:1px solid var(--ramka);border-radius:12px;
  padding:1rem;text-decoration:none;color:var(--tekst);transition:border-color .2s,transform .2s}
.kafel:hover{border-color:var(--zloto);transform:translateY(-3px)}
.kafel p{margin:0;font-size:.97rem;color:var(--szary)}
.avatar{height:150px;margin-bottom:.7rem;border:2px dashed var(--zloto);border-radius:8px;opacity:.7;
  display:flex;align-items:center;justify-content:center;font:.8rem var(--f-naglowek);color:var(--szary)}
.avatar.ikona{border:none;opacity:1;font-size:4.2rem}

/* ---------- Zaprzyjaźnione strony ---------- */
.przyjaciele{margin-top:2.8rem;border:1px solid var(--zloto);border-radius:12px;padding:1.2rem;text-align:center;
  background:linear-gradient(180deg,rgba(217,169,60,.07),transparent)}
.przyjaciele h2{margin:0 0 .8rem;font-size:1.35rem}
.przyjaciele ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.przyjaciele a{display:inline-block;padding:.45rem 1rem;border:1px solid var(--ramka);border-radius:999px;
  font-family:var(--f-naglowek);text-decoration:none;background:var(--karta)}
.przyjaciele a:hover{border-color:var(--zloto)}

/* ---------- Stopka ---------- */
.stopka{text-align:center;color:var(--szary);font-size:.88rem;padding:1.6rem 16px;border-top:1px solid var(--ramka)}

/* ---------- Podstrony: nagłówek modułu ---------- */
.modul-tytul{margin-top:.4rem}
.modul-wstep{max-width:720px;margin:0 auto 1.8rem;text-align:center;color:var(--szary);font-size:1.08rem}

/* ---------- Karty postaci (naprzemiennie lewo/prawo) ---------- */
.postac{display:flex;gap:1.6rem;align-items:flex-start;background:var(--karta);border:1px solid var(--ramka);
  border-radius:14px;padding:1.3rem;margin:0 0 1.4rem}
.postac:nth-of-type(even){flex-direction:row-reverse}
.postac .avatar{flex:0 0 200px;height:300px;margin:0}
.postac-tresc{flex:1;min-width:0}
.postac h3{font-size:1.65rem;margin-top:0}
.postac ul{margin:.4rem 0 0;padding-left:1.15rem}
.postac li{margin:.3rem 0}
.postac li::marker{color:var(--zloto)}

/* ---------- Spoilery ---------- */
details.spoiler{margin-top:.9rem;border:1px solid var(--ramka);border-radius:8px;background:rgba(0,0,0,.18)}
details.spoiler summary{cursor:pointer;padding:.45rem .8rem;font:.95rem var(--f-naglowek);color:var(--zloto);list-style:none}
details.spoiler summary::-webkit-details-marker{display:none}
details.spoiler summary::before{content:"⚠ "}
details.spoiler[open] summary{border-bottom:1px solid var(--ramka)}
details.spoiler p{margin:0;padding:.6rem .8rem}

/* ---------- Podsekcje (np. Hiszpanie / Olmekowie) ---------- */
h3.podsekcja{font-size:1.4rem;text-align:center;margin:2rem 0 1rem;color:var(--zloto-jasne);letter-spacing:.04em}
h3.podsekcja::before,h3.podsekcja::after{content:"✦";color:var(--zloto);font-size:.8em;margin:0 .6rem;vertical-align:.15em}

/* ---------- Siatka kafelków (Artefakty, Miejsca, Historia) ---------- */
.siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem}
div.kafel:hover{transform:none;border-color:var(--ramka)}
.kafel .avatar{height:140px}
.kafel h3{font-size:1.2rem}
.kafel .typ{font:.75rem var(--f-naglowek);color:var(--szary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15rem}
.kafel p{color:var(--tekst);font-size:.98rem}
.realne{display:inline-block;margin-left:.35rem;padding:0 .45rem;border:1px solid var(--zloto);border-radius:999px;
  color:var(--zloto);text-transform:none;letter-spacing:0;font-size:.72rem;line-height:1.5}

/* ---------- Tabela odcinków ---------- */
.tabela-wrap{overflow-x:auto;border:1px solid var(--ramka);border-radius:12px;background:var(--karta)}
.tabela-wrap table{border-collapse:collapse;width:100%;font-size:.98rem}
.tabela-wrap th,.tabela-wrap td{border-bottom:1px solid var(--ramka);padding:.6rem .75rem;text-align:left;vertical-align:top}
.tabela-wrap th{font:400 1rem var(--f-naglowek);color:var(--zloto);background:rgba(0,0,0,.2);position:sticky;top:0}
.tabela-wrap td:first-child{font:400 1.15rem var(--f-tytul);color:var(--zloto);text-align:center;width:3.2rem}
.tabela-wrap td:nth-child(2){font-family:var(--f-naglowek);width:30%}
.tabela-wrap tr:last-child td{border-bottom:none}
.tabela-wrap tbody tr:hover{background:rgba(217,169,60,.05)}
.en{display:block;color:var(--szary);font:italic .85rem var(--f-tekst);margin-top:.15rem}
@media (max-width:640px){.tabela-wrap td:nth-child(2){width:auto}.tabela-wrap th,.tabela-wrap td{padding:.5rem}}

/* ---------- Telefon ---------- */
@media (max-width:640px){
  .naglowek h1{font-size:2.1rem}
  .nawigacja{gap:.25rem 1rem;font-size:.97rem}
  .licznik div{min-width:92px}
  .postac,.postac:nth-of-type(even){flex-direction:column;align-items:center}
  .postac .avatar{flex:none;width:190px;height:280px}
  .postac-tresc{width:100%}
}

/* =========================================================================
   Pasek narzędzi, A+/Kontrast, hamburger, wydruk
   Przeniesione z Kroniki Wojowniczek (style.css v8.19) i dopasowane do palety.
   ========================================================================= */
body{padding-top:44px}
.top-utility-bar{position:fixed;top:0;left:0;right:0;z-index:50;height:44px;
  display:flex;align-items:center;justify-content:flex-end;gap:.6rem;padding:0 1rem;
  background:rgba(20,14,10,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ramka);font-family:var(--f-naglowek)}
.util-bar-left{display:flex;align-items:center;gap:.4rem;margin-right:auto;position:relative}
.util-icon-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--ramka);background:rgba(255,255,255,.04);color:var(--tekst);
  cursor:pointer;transition:background .2s,border-color .2s;touch-action:manipulation;padding:0}
.util-icon-btn:hover,.util-icon-btn:focus-visible{background:rgba(217,169,60,.15);border-color:var(--zloto)}
.util-icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.share-menu{position:absolute;top:38px;left:0;z-index:60;min-width:190px;background:rgba(34,24,18,.98);
  border:1px solid var(--ramka);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  padding:.4rem;display:none;flex-direction:column;gap:.15rem}
.share-menu.open{display:flex}
.share-menu button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:transparent;
  border:none;color:var(--tekst);font:.85rem var(--f-naglowek);padding:.5rem .6rem;border-radius:6px;cursor:pointer}
.share-menu button:hover{background:rgba(217,169,60,.12)}
.share-menu button svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6}
.share-copied-note{font-size:.75rem;color:var(--zloto);padding:.3rem .6rem .1rem;display:none}
.share-copied-note.show{display:block}

/* A+ (3 poziomy) — skalowanie na <html>, bo rozmiary są w rem */
html.acc-font-1{font-size:112%}
html.acc-font-2{font-size:125%}
.a11y-toggle{display:flex;align-items:center;gap:.35rem;background:var(--tekst);border-radius:999px;
  padding:.3rem .4rem;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.a11y-toggle button{background:transparent;border:none;color:var(--tlo);font:700 .82rem/1 system-ui,sans-serif;
  cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
.a11y-toggle button:hover{background:rgba(28,20,16,.12)}
.a11y-toggle .a11y-contrast-icon{background:linear-gradient(90deg,var(--tlo) 50%,#fff 50%);border:1.5px solid var(--tlo)}

/* Hamburger + dymek „Menu” */
.nav-toggle-btn{display:none}
.nav-toggle-hint{display:none;position:fixed;z-index:59;transform:translateX(-50%);background:rgba(20,14,10,.92);
  color:var(--zloto);border:1px solid var(--ramka);border-radius:999px;padding:.15rem .55rem;font:600 .65rem var(--f-naglowek);
  letter-spacing:.03em;white-space:nowrap;pointer-events:none;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:opacity .2s,visibility .2s}
body.nav-open-lock .nav-toggle-hint{opacity:0;visibility:hidden}
.nav-toggle-hint.is-scrolling{opacity:.3}
@media (max-width:700px){
  .nav-toggle-btn{display:flex;order:-1}
  .nav-toggle-hint{display:block}
  nav.nawigacja{display:none;position:fixed;top:44px;left:0;right:0;bottom:0;z-index:49;
    flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:.9rem;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    background:rgba(20,14,10,.97);border:none;padding:1.4rem 1.6rem 2.4rem;font-size:1.15rem}
  nav.nawigacja.nav-open{display:flex}
  body.nav-open-lock{overflow:hidden}
}
@media (max-width:480px){
  .util-icon-btn{width:26px;height:26px}
  .util-icon-btn svg{width:13px;height:13px}
  .a11y-toggle{padding:.22rem .32rem;gap:.25rem}
  .a11y-toggle button{width:21px;height:21px;font-size:.7rem}
  .top-utility-bar{padding:.4rem .6rem;gap:.4rem;justify-content:flex-start;overflow-x:auto;overflow-y:hidden}
  .top-utility-bar>*{flex-shrink:0}
}

/* Tryb kontrastowy (żółto-czarny) */
html.acc-contrast body{background:#000!important;color:#ffd400!important}
html.acc-contrast *{background-color:#000!important;background-image:none!important;color:#ffd400!important;
  border-color:#ffd400!important;box-shadow:none!important;text-shadow:none!important}
html.acc-contrast a{color:#ffd400!important;text-decoration:underline!important}
html.acc-contrast .kafel,html.acc-contrast .postac,html.acc-contrast .tabela-wrap,html.acc-contrast .realne,html.acc-contrast .licznik div,html.acc-contrast nav.nawigacja,
html.acc-contrast .util-icon-btn,html.acc-contrast .share-menu{border:2px solid #ffd400!important}
html.acc-contrast .slonce *{stroke:#ffd400!important;fill:#ffd400!important}
html.acc-contrast .slonce circle:last-child{fill:none!important;stroke:#000!important}
html.acc-contrast .a11y-toggle{background:#000!important;border:2px solid #ffd400}
html.acc-contrast .a11y-toggle .a11y-contrast-icon{background:linear-gradient(90deg,#000 50%,#ffd400 50%)!important}
html.acc-contrast img{opacity:1!important;filter:none!important}

/* Wydruk */
@media print{
  .top-utility-bar,nav.nawigacja,.nav-toggle-hint,button,.a11y-toggle,.przyjaciele,.avatar{display:none!important}
  html,body{background:#fff!important;color:#111!important;padding-top:0!important}
  *{background-color:transparent!important;background-image:none!important;color:#111!important;box-shadow:none!important;text-shadow:none!important}
  a{color:#111!important;text-decoration:underline}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:.75em;color:#555!important}
  .kafel,.postac,tr{break-inside:avoid;page-break-inside:avoid}
  .siatka{display:block!important}
  .tabela-wrap{overflow:visible!important;border:none!important}
  .tabela-wrap th{position:static!important}
  h2,h3{break-after:avoid;page-break-after:avoid}
  .moduly{display:block!important}
  .kafel,.postac{display:block!important;border:1px solid #999!important;margin-bottom:.8rem}
  details.spoiler{border:1px solid #999!important}
}