/* ============================================================
   v81 STRONA PUBLICZNA: strona główna, aktualności, podstrony.
   Ta sama kuźnia co gra - ciemne płaszczyzny, żar tylko na
   odnośnikach i akcjach. Jedna jasna rzecz: stronica księgi
   z rachunkiem „Gdy Cię nie było".
   ============================================================ */
:root{
    --papier: #f0e5c9;
    --atrament: #2b1d12;
    --atrament-2: #5b4633;
    --linia-ksiegi: #d3c29b;
    --margines: #a8432f;
    --zielen-ksiegi: #3e5f2a;
    --szlak-linia: #6f5634;
    --w-tresc: 18px;
}

/* ---------- tryby wejścia (index.php) ----------
   gosc  - strona główna z logowaniem,
   gracz - zalogowany: od pierwszej klatki wczytywanie gry, strony nie widać,
   gra   - gra wczytana (ustawia game.js). */
.wczytywanie{ display:none; }
html[data-tryb="gracz"] .wczytywanie{
    display:flex; min-height:100vh; align-items:center; justify-content:center; gap:0.6rem;
    font-family: var(--font-display); color: var(--ember-bright); font-size:1.35rem; letter-spacing:0.04em;
}
html[data-tryb="gracz"] #auth-screen{ display:none; }
.wczytywanie-znak{ display:inline-block; transform-origin: 70% 75%; animation: w-kucie 1.1s ease-in-out infinite; }
@keyframes w-kucie{ 0%,100%{ transform: rotate(0); } 35%{ transform: rotate(-22deg); } 55%{ transform: rotate(5deg); } }

/* ---------- podstawy ---------- */
.witryna, .w-cialo{ font-size: var(--w-tresc); line-height: 1.62; }
.w-cialo{ min-height:100vh; display:flex; flex-direction:column; }
.w-cialo > main{ flex:1 0 auto; }
.witryna h1, .witryna h2, .w-cialo h1, .w-cialo h2{ border-bottom:none; padding-bottom:0; letter-spacing:0.02em; }
.w-pas{ max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.witryna a, .w-cialo a{ color: var(--ember); text-underline-offset: 3px; }
.witryna a:hover, .w-cialo a:hover{ color: var(--ember-bright); }
.witryna :focus-visible, .w-cialo :focus-visible{ outline: 2px solid var(--ember-bright); outline-offset: 3px; border-radius: 4px; }
.witryna input, .witryna select, .witryna textarea,
.w-cialo input, .w-cialo select, .w-cialo textarea{ font-size: 1rem; } /* 16 px: iPhone nie powiększa strony przy wpisywaniu */

.w-pomin{
    position:absolute; left:0.75rem; top:-4rem; z-index:60;
    background: var(--ember-bright); color:#241505 !important; padding:0.5rem 0.9rem; border-radius:6px;
    font-weight:600; text-decoration:none;
}
.w-pomin:focus{ top:0.75rem; }

/* ---------- nagłówek ---------- */
.w-naglowek{
    position: sticky; top:0; z-index:30;
    background: rgba(21,17,12,0.94); border-bottom: 1px solid var(--stone-line);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.w-naglowek-pas{ display:flex; align-items:center; gap:1.5rem; min-height:4rem; }
.witryna .w-znak, .w-cialo .w-znak{
    font-family: var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:0.03em;
    color: var(--ember-bright); text-decoration:none; white-space:nowrap;
}
.w-znak-mlot{ color: var(--ember); }
.w-menu{ display:flex; gap:1.6rem; margin-left:auto; }
.witryna .w-menu a, .w-cialo .w-menu a{
    color: var(--parchment); text-decoration:none; font-size:1rem; padding:0.3rem 0;
    border-bottom: 2px solid transparent;
}
.witryna .w-menu a:hover, .w-cialo .w-menu a:hover{ color: var(--ember-bright); }
.witryna .w-menu a[aria-current="page"], .w-cialo .w-menu a[aria-current="page"]{ color: var(--ember-bright); border-bottom-color: var(--ember); }
.witryna .w-wejscie, .w-cialo .w-wejscie{
    border:1px solid var(--ember-deep); color: var(--ember-bright); background: #21170d;
    padding:0.45rem 1rem; border-radius:8px; text-decoration:none; font-weight:600; font-size:1rem; white-space:nowrap;
}
.witryna .w-wejscie:hover, .w-cialo .w-wejscie:hover{ background:#2e2011; }
.w-menu-tel{ display:none; position:relative; }
.w-menu-tel summary{
    list-style:none; cursor:pointer; padding:0.45rem 0.8rem; border:1px solid var(--stone-line);
    border-radius:8px; color: var(--parchment); font-size:1rem;
}
.w-menu-tel summary::-webkit-details-marker{ display:none; }
.w-menu-tel[open] summary{ background: var(--bg-panel-2); }
.w-menu-tel-lista{
    position:absolute; right:0; top: calc(100% + 0.5rem); min-width: 14rem; z-index:40;
    display:flex; flex-direction:column; padding:0.4rem;
    background: var(--bg-panel); border:1px solid var(--stone-line); border-radius:10px; box-shadow: var(--shadow-deep);
}
.witryna .w-menu-tel-lista a, .w-cialo .w-menu-tel-lista a{ color: var(--parchment); text-decoration:none; padding:0.65rem 0.8rem; border-radius:6px; }
.witryna .w-menu-tel-lista a[aria-current="page"], .w-cialo .w-menu-tel-lista a[aria-current="page"]{ color: var(--ember-bright); background:#2a1d10; }

@media (max-width: 760px){
    .w-menu{ display:none; }
    .w-menu-tel{ display:block; }
    .witryna .w-wejscie, .w-cialo .w-wejscie{ margin-left:auto; }
    .w-naglowek-pas{ gap:0.6rem; min-height:3.5rem; }
}

/* ---------- start: nagłówek strony, karta logowania, księga ---------- */
.w-start{
    padding: 3.5rem 0 4.5rem;
    background: radial-gradient(70% 60% at 12% 0%, rgba(226,161,61,0.11), transparent 70%);
}
.w-start-pas{ display:grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap:3.5rem; align-items:start; }
.witryna .w-start h1{
    font-size: clamp(2.15rem, 1.25rem + 3.1vw, 3.55rem); line-height:1.06; margin:0 0 1.2rem;
    max-width: 15ch; text-wrap: balance;
}
.w-lead{ font-size:1.17em; color: var(--parchment); max-width:32em; margin:0 0 2rem; }

.w-karta.auth-card{
    max-width: 27rem; padding: 1.4rem 1.5rem 1.25rem; margin:0;
    background: var(--bg-panel); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.75);
    scroll-margin-top: 5.5rem;
}
.w-karta .auth-tabs{
    margin:0 0 1.2rem; gap:0; padding:3px;
    background:#120e09; border:1px solid var(--stone-line); border-radius:9px;
}
.w-karta .auth-tab{
    border:none; background:transparent; color: var(--parchment-dim);
    font-size:1rem; font-weight:600; padding:0.55rem 0.75rem; border-radius:6px;
}
.w-karta .auth-tab.active{ background:#3a2a18; color: var(--ember-bright); box-shadow: inset 0 0 0 1px #6b4a26; }
.w-karta .auth-form label{ font-size:0.92rem; }
.w-karta .auth-form input{ padding:0.65rem 0.75rem; }
.w-karta .auth-form button{ font-size:1.05rem; padding:0.7rem 1rem; }
.w-karta-uwaga{ font-size:0.875rem; color: var(--parchment-dim); margin:0.9rem 0 0; line-height:1.5; }
.w-karta #auth-error{ margin:1rem 0 0; }

/* Stronica księgi - jedyna jasna płaszczyzna na stronie. Linie co 2,2 rem,
   czerwony margines jak w księdze rachunkowej; wiersze siedzą na liniach. */
.ksiega{ margin:0.4rem 0 0; }
.ksiega-karta{
    --wiersz: 2.2rem;
    position:relative; color: var(--atrament); border-radius:3px;
    padding: 1.1rem 1.6rem 1.1rem 3.7rem;
    background:
        linear-gradient(90deg, transparent 2.85rem, var(--margines) 2.85rem, var(--margines) calc(2.85rem + 1px), transparent calc(2.85rem + 1px)),
        repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--wiersz) - 1px), var(--linia-ksiegi) calc(var(--wiersz) - 1px), var(--linia-ksiegi) var(--wiersz)),
        var(--papier);
    background-position: 0 0, 0 1.1rem, 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 0 #c4ad80, 0 26px 50px -18px rgba(0,0,0,0.8);
    transform: rotate(-1.1deg);
}
.ksiega-tytul{
    font-family: var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:0.02em;
    line-height: var(--wiersz); margin:0; color: var(--atrament);
}
.ksiega-pod{ font-style:italic; color: var(--atrament-2); line-height: var(--wiersz); margin:0; font-size:1rem; }
.ksiega-wpisy{ list-style:none; margin:0; padding:0; }
.ksiega-wpisy li{
    display:flex; align-items:center; line-height: var(--wiersz); height: var(--wiersz);
    font-size:1.04rem; white-space:nowrap;
}
.kw-co{ overflow:hidden; text-overflow:ellipsis; }
.kw-kropki{ flex:1 1 auto; min-width:1.2rem; margin:0 0.5rem; border-bottom:2px dotted rgba(91,70,51,0.5); position:relative; top:0.3em; }
.kw-ile{ font-weight:600; font-variant-numeric: tabular-nums lining-nums; }
.kw-zdarzenie .kw-co{ font-style:italic; color: var(--atrament-2); }
.kw-minus .kw-ile{ color: var(--margines); }
.kw-suma{ border-top: 3px double var(--atrament-2); }
.kw-suma .kw-co{ font-weight:600; }
.kw-suma .kw-ile{ color: var(--zielen-ksiegi); font-weight:700; font-size:1.18em; }
.ksiega figcaption{ color: var(--parchment-dim); font-size:0.95rem; margin:1.4rem 0 0; max-width:30em; }

/* Jedyny ruch, który nie odpowiada na kliknięcie: wiersze księgi zapisują się
   po kolei przy wejściu (liczby dolicza js/strona.js). */
@media (prefers-reduced-motion: no-preference){
    .ksiega-wpisy li{ animation: kw-wpis 0.55s ease-out both; }
    .ksiega-wpisy li:nth-child(1){ animation-delay: 0.30s; }
    .ksiega-wpisy li:nth-child(2){ animation-delay: 0.48s; }
    .ksiega-wpisy li:nth-child(3){ animation-delay: 0.66s; }
    .ksiega-wpisy li:nth-child(4){ animation-delay: 0.84s; }
    .ksiega-wpisy li:nth-child(5){ animation-delay: 1.10s; }
    .ksiega-wpisy li:nth-child(6){ animation-delay: 1.34s; }
    .ksiega-wpisy li:nth-child(7){ animation-delay: 1.60s; }
}
@keyframes kw-wpis{
    from{ opacity:0; clip-path: inset(0 100% 0 0); }
    to{ opacity:1; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){
    .wczytywanie-znak{ animation:none; }
}

/* ---------- sekcje strony głównej ---------- */
.w-sekcja{ padding: 4.5rem 0; border-top:1px solid var(--stone-line); }
.witryna .w-sekcja h2{ font-size: clamp(1.7rem, 1.25rem + 1.3vw, 2.3rem); margin:0 0 0.75rem; }
.w-wstep{ color: var(--parchment-dim); max-width:36em; margin:0 0 2.75rem; font-size:1.05em; }
.w-dalej{ margin:0; }
.w-dalej a{ font-weight:600; }

/* Szlak: kolejność to naprawdę kolejność przewodnika w grze. */
.szlak{ list-style:none; margin:0; padding:0; }
.szlak-etap{
    position:relative; display:grid; grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 0 2rem; align-items:start; padding-bottom: 3.75rem;
}
.szlak-etap:last-child{ padding-bottom:0; }
.szlak-etap::before{
    content:""; position:absolute; left: calc(1.625rem - 1px); top: 3.6rem; bottom: 0.25rem;
    border-left: 2px dashed var(--szlak-linia);
}
.szlak-etap:last-child::before{ display:none; }
.szlak-znak{
    width:3.25rem; height:3.25rem; display:grid; place-items:center; border-radius:50%;
    background: var(--bg-panel-2); border:1px solid var(--szlak-linia); font-size:1.4rem;
}
.witryna .szlak-tekst h3{
    font-family: var(--font-body); font-weight:600; font-size:1.3rem; letter-spacing:0;
    color: var(--ember-bright); margin:0.6rem 0 0.5rem;
}
.szlak-tekst p{ margin:0; max-width:30em; }
.szlak-ryc{ margin:0; }
.szlak-ryc img{
    display:block; width:100%; height:auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;
    border-radius:8px; border:1px solid var(--stone-line); background: var(--bg-panel);
    box-shadow: 0 16px 36px -18px rgba(0,0,0,0.85);
}
.w-liczby{ margin:3rem 0 0; padding-left:5.25rem; color: var(--parchment-dim); font-style:italic; max-width: 44em; }

/* Aktualności na stronie głównej: data | tytuł i dwa zdania. */
.wiesci{ list-style:none; margin:0 0 1.5rem; padding:0; max-width:54rem; }
.wiesc{ display:grid; grid-template-columns: 11rem minmax(0, 1fr); gap:1.5rem; padding:1.25rem 0; border-top:1px solid var(--stone-line); }
.wiesc:last-child{ border-bottom:1px solid var(--stone-line); }
.wiesc-data{ color: var(--parchment-dim); margin:0.15rem 0 0; font-size:0.95rem; }
.witryna .wiesc h3{ font-family: var(--font-body); font-weight:600; font-size:1.2rem; letter-spacing:0; margin:0 0 0.35rem; }
.witryna .wiesc h3 a{ color: var(--ember-bright); text-decoration:none; }
.witryna .wiesc h3 a:hover{ text-decoration:underline; }
.wiesc-tresc p{ margin:0; color: var(--parchment-dim); }

/* Pytania */
.pytania{ max-width:46rem; border-top:1px solid var(--stone-line); margin:0 0 1.5rem; }
.pytania details{ border-bottom:1px solid var(--stone-line); }
.pytania summary{ cursor:pointer; padding:1rem 0; font-weight:600; font-size:1.06em; color: var(--parchment); }
.pytania summary::marker{ color: var(--ember); }
.pytania summary:hover{ color: var(--ember-bright); }
.pytania details p{ margin:0 0 1.1rem; color: var(--parchment-dim); max-width:38em; }

.w-koniec{ padding-bottom: 5rem; }
.w-koniec p{ color: var(--parchment-dim); margin:0 0 1.5rem; }
.witryna .w-przycisk{ display:inline-block; text-decoration:none; color:#241505; font-size:1.05rem; padding:0.75rem 1.6rem; }
.witryna .w-przycisk:hover{ color:#241505; }

/* ---------- stopka ---------- */
.w-stopka{ border-top:1px solid var(--stone-line); background:#110d09; padding:2.5rem 0 3rem; color: var(--parchment-dim); font-size:0.95rem; }
.w-stopka-pas{ display:grid; grid-template-columns: auto minmax(0, 1fr); gap:0.75rem 2.5rem; align-items:baseline; }
.w-stopka-znak{ font-family: var(--font-display); font-weight:700; color: var(--ember-bright); font-size:1.1rem; margin:0; }
.w-stopka-linki{ list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; margin:0; padding:0; }
.witryna .w-stopka-linki a, .w-cialo .w-stopka-linki a{ color: var(--parchment); text-decoration:none; }
.witryna .w-stopka-linki a:hover, .w-cialo .w-stopka-linki a:hover{ color: var(--ember-bright); text-decoration:underline; }
.w-stopka-uwaga{ grid-column: 1 / -1; margin:0.5rem 0 0; font-size:0.9rem; }

/* ---------- podstrony ---------- */
.w-podstrona{ padding: 3rem 0 4.5rem; }
.w-kolumna{ max-width: 48rem; }
.w-cialo .w-podstrona h1{ font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height:1.1; margin:0 0 1rem; }
.w-tresc{ margin:0 0 1.5rem; }
.w-cialo .w-tresc h2{ font-size:1.55rem; margin:2.1em 0 0.6em; }
.w-cialo .w-tresc h3{ font-family: var(--font-body); font-weight:600; font-size:1.18rem; letter-spacing:0; color: var(--parchment); margin:1.5em 0 0.3em; }
.w-tresc p, .w-tresc li{ max-width:38em; }
.w-tresc ul, .w-tresc ol{ padding-left:1.4em; margin:0 0 1em; }
.w-tresc li{ margin:0 0 0.45em; }
.w-tresc li::marker{ color: var(--ember); }
.w-tresc strong{ color: var(--parchment); font-weight:600; }
.w-lista-linkow{ padding-left:1.2em; }
.w-lista-linkow li{ margin:0 0 0.4em; }
.w-pusto{ color: var(--parchment-dim); font-style:italic; }
.w-szkic{ background:#2a2110; border:1px dashed var(--ember); padding:0.8rem 1rem; border-radius:8px; margin:0 0 1.75rem; }

/* aktualności */
.wiesc-meta{ display:flex; flex-wrap:wrap; gap:0.3rem 1rem; color: var(--parchment-dim); font-size:0.95rem; margin:0 0 0.4rem; }
.wiesc-typ{ color: var(--ember); }
.wiesc-typ-warning, .wiesc-typ-maintenance{ color:#f0a08f; }
.wiesc-na-liscie{ padding:2rem 0; border-top:1px solid var(--stone-line); }
.w-cialo .wiesc-na-liscie h2{ font-size:1.55rem; margin:0 0 0.75rem; }
.w-cialo .wiesc-na-liscie h2 a{ color: var(--ember-bright); text-decoration:none; }
.w-cialo .wiesc-na-liscie h2 a:hover{ text-decoration:underline; }
.wiesc-pelna .w-tresc{ margin-bottom:1rem; }
.wiesc-nagroda{ background:#1d1a0f; border:1px solid #5e5326; border-radius:8px; padding:0.75rem 1rem; margin:0; max-width:38em; }
.w-strony{ display:flex; justify-content:space-between; align-items:center; gap:1rem; border-top:1px solid var(--stone-line); padding-top:1.5rem; }
.w-strony-nr{ color: var(--parchment-dim); }

/* kontakt */
.w-email, .w-jako{ color: var(--parchment-dim); }
.w-blad-formularza{ max-width:36rem; }
.w-formularz{ display:grid; gap:1.15rem; max-width:36rem; margin-top:1.5rem; position:relative; }
.w-pole{ display:grid; gap:0.35rem; color: var(--parchment); font-weight:600; font-size:1rem; }
.w-opc{ font-weight:400; color: var(--parchment-dim); font-size:0.9rem; }
.w-pole-nazwa{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.2rem 0.6rem; }
.w-pole input, .w-pole select, .w-pole textarea{ width:100%; font-weight:400; padding:0.65rem 0.75rem; }
.w-pole textarea{ resize:vertical; min-height:10rem; line-height:1.5; }
.w-pole [aria-invalid="true"]{ border-color: var(--blood); }
.w-pole-blad{ color:#ffb3a3; font-weight:400; font-size:0.92rem; }
.w-pulapka{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.w-uwaga{ color: var(--parchment-dim); font-size:0.92rem; margin:0; }
.w-formularz .btn{ justify-self:start; font-size:1.05rem; padding:0.7rem 1.5rem; }
.w-wyslano{ border:1px solid var(--moss); background:#1a2414; border-radius:10px; padding:1.25rem 1.5rem; max-width:36rem; margin-top:1.5rem; }
.w-cialo .w-wyslano h2{ color:#cbe3b4; font-size:1.4rem; margin:0 0 0.5rem; }

/* ---------- odnośniki pod grą (dla zalogowanych) ---------- */
/* ta sama szerokość co .game-main (1100 px z odstępem 1,5 rem) */
.gra-stopka{ max-width:calc(1100px - 3rem); margin:2.5rem auto 1.5rem; padding:1rem 0 0; border-top:1px solid var(--stone-line); }
@media (max-width: 1100px){ .gra-stopka{ margin-left:1.5rem; margin-right:1.5rem; } }
.gra-stopka:empty{ display:none; }
.gra-stopka-linki{ display:flex; flex-wrap:wrap; gap:0.4rem 1.4rem; font-size:0.85rem; }
.gra-stopka-linki a{ color: var(--parchment-dim); text-decoration:none; }
.gra-stopka-linki a:hover{ color: var(--ember); text-decoration:underline; }

/* ---------- mniejsze ekrany ---------- */
@media (max-width: 900px){
    .w-start{ padding: 2rem 0 3rem; }
    .w-start-pas{ grid-template-columns: minmax(0, 1fr); gap:2.75rem; }
    .witryna .w-start h1{ max-width:none; }
    .ksiega-karta{ transform:none; max-width: 30rem; }
    .szlak-etap{ grid-template-columns: 2.75rem minmax(0, 1fr); gap:0.25rem 1rem; }
    .szlak-znak{ width:2.75rem; height:2.75rem; font-size:1.2rem; }
    .szlak-etap::before{ left: calc(1.375rem - 1px); top:3.1rem; }
    .szlak-ryc{ grid-column:2; margin-top:1rem; }
    .w-liczby{ padding-left:3.75rem; }
}
@media (max-width: 640px){
    .wiesc{ grid-template-columns: minmax(0, 1fr); gap:0.2rem; }
    .w-stopka-pas{ grid-template-columns: minmax(0, 1fr); }
    .w-sekcja{ padding: 3.25rem 0; }
}
@media (max-width: 520px){
    .witryna, .w-cialo{ font-size:17px; }
    .w-pas{ padding: 0 1rem; }
    .w-karta.auth-card{ padding:1.1rem 1rem 1rem; }
    .ksiega-karta{
        padding: 1.1rem 1rem 1.1rem 2.9rem;
        background-position: 0 0, 0 1.1rem, 0 0;
        background-image:
            linear-gradient(90deg, transparent 2.2rem, var(--margines) 2.2rem, var(--margines) calc(2.2rem + 1px), transparent calc(2.2rem + 1px)),
            repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--wiersz) - 1px), var(--linia-ksiegi) calc(var(--wiersz) - 1px), var(--linia-ksiegi) var(--wiersz));
    }
    .ksiega-wpisy li{ font-size:0.98rem; }
    .szlak-etap{ grid-template-columns: 2.5rem minmax(0, 1fr); gap:0.25rem 0.85rem; padding-bottom:2.75rem; }
    .szlak-etap::before{ display:none; }
    .szlak-znak{ width:2.5rem; height:2.5rem; font-size:1.1rem; }
    .witryna .szlak-tekst h3{ margin-top:0.35rem; }
    .szlak-ryc{ grid-column: 1 / -1; }
    .w-liczby{ padding-left:0; }
}