/* ==========================================================================
   Kieszonkowy Las  –  style.css
   --------------------------------------------------------------------------
   Tu jest cały wygląd strony. Plik ma części (szukaj po numerach):
     1. KOLORY I CZCIONKI  (zmieniasz kolory tylko tutaj, na samej górze)
     2. Pasek na górze     3. Góra strony      4. Przyciski
     5. Pojawianie się     6. Teksty           7. Kafle
     8. Liczby             9. Karty o lesie   10. Ramki z uwagami
    11. Odznaki           12. Rozwijane wpisy 13. Galeria
    14. Quiz              15. Stopka          16. Świetliki
    17. Kolory "Ślady i Tropy"   18. Wyszukiwarka
    19. Odznaki: niejadalny i ochrona   20. Kalendarz
    21. Obrazki drzew (na samym dole, długie linijki, nie trzeba ich ruszać)

   Wskazówka: kolory zapisane są jako zmienne, np. var(--kurka). Jeśli zmienisz
   --kurka w punkcie 1, zmieni się wszędzie, gdzie jest użyty ten kolor.
   ========================================================================== */

/* ===== 1. KOLORY I CZCIONKI ===== */
:root{
  --noc:#0e2217; --noc2:#08150e; --igla:#17382a; --mech:#2f7048; --lisc:#a5d070;
  --kurka:#f4b942; --kora:#b0764a; --muchomor:#e0483a;
  --papier:#f5f8ef; --tekst:#17301f; --jasny:#d9e6cf; --biel:#f3f8ea;
  --nagl:"Alegreya",Georgia,serif;
  --czyt:"Alegreya Sans",Candara,"Segoe UI",sans-serif;
  --pismo:"Caveat","Bradley Hand",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--noc) linear-gradient(180deg,var(--noc) 0,#0b1c13 50%,var(--noc2) 100%) no-repeat;
  color:var(--jasny);font-family:var(--czyt);font-size:1.2rem;line-height:1.6}
h1,h2,h3{font-family:var(--nagl);font-weight:800;color:var(--biel);line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,8vw,3.6rem)}
h2{font-size:clamp(1.6rem,5vw,2.1rem);margin-top:2.2em}
a{color:var(--lisc);text-underline-offset:3px}
a:hover{color:var(--kurka)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--kurka);outline-offset:3px;border-radius:6px}
.wrap{max-width:900px;margin:0 auto;padding:0 1.15rem}
main.wrap{flex:1;width:100%;padding-top:2.2rem;padding-bottom:3.5rem;position:relative;z-index:1}

/* ===== 2. PASEK NA GÓRZE (logo i menu) ===== */
.pasek{position:sticky;top:0;z-index:50;background:rgba(10,25,18,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07)}
.pasek::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,var(--lisc),var(--kurka))}
.pasek-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.55rem;padding-bottom:.55rem}
.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--nagl);font-weight:700;font-size:1.3rem;color:var(--biel);text-decoration:none}
.logo svg{width:1.8rem;height:1.8rem;color:var(--lisc);transition:transform .4s}
.logo:hover{color:var(--biel)}
.logo:hover svg{transform:rotate(-8deg) scale(1.15)}
nav{display:flex;gap:.2rem}
nav a{white-space:nowrap;color:var(--jasny);text-decoration:none;padding:.4rem .8rem;border-radius:999px;font-weight:600;font-size:.98rem;transition:background .2s,color .2s}
nav a:hover{background:rgba(255,255,255,.1);color:var(--biel)}
nav a[aria-current="page"]{background:var(--kurka);color:#2a1d00}
@media(max-width:520px){.logo{display:none}.pasek-in{justify-content:center}nav{gap:0}nav a{padding:.4rem .55rem;font-size:.9rem}}

/* ===== 3. GÓRA STRONY: niebo, księżyc, drzewa, mgła ===== */
.gora{position:relative;overflow:hidden;overflow:clip;background:linear-gradient(180deg,#06120b 0%,#0d2a1c 55%,#1f5238 100%)}
.gora::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;animation:gwiazdy 5s ease-in-out infinite alternate;
  background-image:
  radial-gradient(1.6px 1.6px at 8% 22%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 19% 12%,#fff 50%,transparent 52%),
  radial-gradient(1.6px 1.6px at 33% 30%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 47% 10%,#fff 50%,transparent 52%),
  radial-gradient(1.6px 1.6px at 58% 26%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 71% 14%,#fff 50%,transparent 52%),
  radial-gradient(1.6px 1.6px at 83% 34%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 93% 8%,#fff 50%,transparent 52%)}
@keyframes gwiazdy{to{opacity:.3}}
.gora-duza{padding:3rem 0 10.5rem}
.gora-mala{height:6.2rem}
.ksiezyc{position:absolute;right:1.4rem;top:1.1rem;width:clamp(54px,12vw,104px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fffdf0,#f6ecbd 55%,#dccf94);
  box-shadow:0 0 40px 10px rgba(255,246,196,.25),0 0 120px 40px rgba(255,246,196,.1);
  animation:ksiezyc 7s ease-in-out infinite alternate}
@media(min-width:700px){.ksiezyc{right:12%;top:2.2rem}}
@keyframes ksiezyc{to{box-shadow:0 0 60px 16px rgba(255,246,196,.35),0 0 160px 60px rgba(255,246,196,.16);transform:translateY(6px)}}
.hero{position:relative;z-index:2;max-width:38rem}
.hero>*{animation:wejscie .9s cubic-bezier(.2,.7,.2,1) both}
.hero>*:nth-child(2){animation-delay:.12s}
.hero>*:nth-child(3){animation-delay:.24s}
.hero>*:nth-child(4){animation-delay:.36s}
@keyframes wejscie{from{opacity:0;transform:translateY(26px)}}
.nadtytul{font-family:var(--pismo);font-size:1.8rem;font-weight:700;color:var(--kurka);margin:0 0 .1rem;line-height:1.1}
.hero h1{font-size:clamp(2.4rem,12vw,5.2rem);margin-bottom:.2em}
.hero h1 em{font-style:normal;color:var(--kurka)}
.hero .opis{font-size:1.28rem;color:var(--jasny);max-width:28rem;margin:0 0 1.6rem}
.przyciski{display:flex;flex-wrap:wrap;gap:.9rem}

.las{--h:8rem;position:absolute;left:0;right:0;bottom:-1px;height:var(--h);
  background-image:var(--drzewa-przod),var(--drzewa-srodek),var(--drzewa-tyl);
  background-repeat:repeat-x;background-position:0 100%,0 100%,0 100%;background-size:auto 100%;
  animation:dryf 140s linear infinite}
.gora-duza .las{--h:9rem}
@keyframes dryf{to{background-position:calc(var(--h) * -7.5) 100%,calc(var(--h) * -5) 100%,calc(var(--h) * -3.25) 100%}}
.las::before{content:"";position:absolute;left:0;top:-25%;width:200%;height:75%;pointer-events:none;
  background-image:
  radial-gradient(ellipse 22% 45% at 12% 60%,rgba(225,240,220,.16),transparent),
  radial-gradient(ellipse 26% 40% at 38% 50%,rgba(225,240,220,.11),transparent),
  radial-gradient(ellipse 22% 45% at 66% 62%,rgba(225,240,220,.15),transparent),
  radial-gradient(ellipse 20% 40% at 90% 52%,rgba(225,240,220,.1),transparent);
  background-size:50% 100%;background-repeat:repeat-x;animation:mgla 60s linear infinite}
@keyframes mgla{to{transform:translateX(-50%)}}

/* ===== 4. PRZYCISKI (żółte i przezroczyste) ===== */
.cta{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;background:var(--kurka);color:#2a1d00;font-weight:700;font-size:1.08rem;text-decoration:none;border-radius:999px;
  box-shadow:0 5px 0 #b9821c,0 14px 24px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s}
.cta:hover{color:#2a1d00;transform:translateY(-2px);box-shadow:0 7px 0 #b9821c,0 18px 28px rgba(0,0,0,.35)}
.cta:active{transform:translateY(4px);box-shadow:0 1px 0 #b9821c,0 6px 12px rgba(0,0,0,.3)}
.cta-jasny{background:transparent;color:var(--biel);box-shadow:none;border:2px solid rgba(255,255,255,.35)}
.cta-jasny:hover{color:var(--biel);background:rgba(255,255,255,.1);box-shadow:none;border-color:var(--biel)}
.cta-jasny:active{box-shadow:none}
.cta[hidden]{display:none}
/* ===== 5. ANIMACJA POJAWIANIA SIĘ przy przewijaniu ===== */
html.js .odkryj{opacity:0;translate:0 28px;transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*80ms),translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*80ms)}
html.js .odkryj.widoczny{opacity:1;translate:0 0}

/* ===== 6. TEKSTY (lead, nazwy łacińskie) ===== */
.lead{font-size:1.3rem;max-width:38rem;color:var(--biel)}
.powrot{margin:0 0 1rem;font-size:1rem}
.lac{font-family:var(--pismo);font-size:1.6rem;font-weight:700;color:var(--mech);margin:0 0 .3rem;line-height:1.1}
.pot{font-family:var(--czyt);font-size:1rem;font-weight:400;color:var(--kora)}

/* ===== 7. KAFLE kategorii ===== */
.duze{display:grid;gap:1.1rem;margin:0 0 2rem}
@media(min-width:640px){.duze{grid-template-columns:1fr 1fr}}
.kafel{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:13rem;padding:1.4rem;text-decoration:none;border-radius:28px 8px 28px 8px;transition:transform .3s,box-shadow .3s}
.kafel .tyt{font-family:var(--nagl);font-weight:700;font-size:2.3rem;line-height:1;margin-bottom:.45rem}
.kafel .podp{max-width:20rem;font-size:1.05rem}
.kafel .ikona{position:absolute;right:-.3rem;top:-.2rem;width:8.5rem;height:8.5rem;opacity:.2;transition:transform .5s,opacity .3s}
.kafel:hover .ikona{transform:rotate(-10deg) scale(1.12);opacity:.34}
.kafel:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.kafel.grzyby{background:linear-gradient(145deg,#f7c85c,#e8a02e);color:#2a1d00}
.kafel.grzyby:hover{color:#2a1d00}
.kafel.zwierzeta{background:linear-gradient(145deg,#3f8c5c,#1f5c3a);color:var(--biel)}
.kafel.zwierzeta:hover{color:var(--biel)}

/* ===== 8. LICZBY na stronie głównej ===== */
.staty{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 1rem;margin:2.4rem 0}
@media(min-width:700px){.staty{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:3px solid var(--mech);padding-top:.6rem}
.stat .male{display:block;font-family:var(--pismo);font-size:1.4rem;font-weight:700;color:var(--lisc);line-height:1}
.stat .liczba{display:block;font-family:var(--nagl);font-weight:700;font-size:2.9rem;color:var(--kurka);line-height:1.05}
.stat .podp{display:block;font-size:.98rem;line-height:1.35}

/* ===== 9. KARTY "Las w Polsce" ===== */
.o-lesie h2{margin-top:0}
.info{display:grid;gap:1rem;margin-top:1.4rem}
@media(min-width:680px){.info{grid-template-columns:1fr 1fr}}
.info div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-top:3px solid var(--mech);padding:1rem 1.2rem;border-radius:4px 16px 4px 16px;transition:transform .25s,border-color .25s,background .25s}
.info div:hover{transform:translateY(-4px);border-top-color:var(--lisc);background:rgba(255,255,255,.09)}
.info h3{font-size:1.25rem;color:var(--lisc);margin:0 0 .3em}
.info p{margin:0;font-size:1.05rem}

/* ===== 10. RAMKI z uwagami (żółta i czerwona) ===== */
.uwaga{background:var(--papier);color:var(--tekst);border-left:7px solid var(--kurka);padding:1.1rem 1.3rem;margin:2rem 0;border-radius:0 18px 18px 0;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.uwaga h2{margin:0 0 .3em;font-size:1.4rem;color:var(--igla)}
.uwaga p{margin:0}
.ostrzezenie{background:#fbe3df;color:var(--tekst);border-left:7px solid var(--muchomor);padding:1.1rem 1.3rem;margin:1.6rem 0;border-radius:0 18px 18px 0}
.ostrzezenie a{color:var(--mech)}
.dalej-info{margin-top:1.6rem}

/* ===== 11. ODZNAKI (jadalny, trujący, trop...) ===== */
.znaczek{display:inline-block;padding:.1rem .8rem;border-radius:999px;font-size:.88rem;font-weight:700;white-space:nowrap}
.znaczek.jadalny{background:#d7e9c3;color:#2a5a2d}
.znaczek.trujacy{background:#f8d3cd;color:#8a1f17}
.znaczek.zwierze{background:#eadfd2;color:#5a3a22}

/* ===== 12. ROZWIJANE WPISY (grzyby, zwierzęta, ślady) ===== */
.wpisy{margin-top:1.6rem}
.wpis{margin:0 0 .9rem;background:var(--papier);color:var(--tekst);border-left:8px solid var(--mech);border-radius:4px 20px 4px 20px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .25s,box-shadow .25s}
.wpis:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.4)}
.wpis.trujacy{border-left-color:var(--muchomor)}
.wpis.zwierze{border-left-color:var(--kora)}
.wpis summary{display:grid;grid-template-columns:auto 1fr auto 1.6rem;gap:.15rem .8rem;align-items:start;padding:1rem 1.2rem;cursor:pointer;list-style:none}
.wpis summary::-webkit-details-marker{display:none}
.wpis summary .mini{grid-column:1;grid-row:1 / span 3;width:4.6rem;height:4.6rem;object-fit:cover;border-radius:10px;margin-right:.2rem}
.wpis summary .tyt{grid-column:2;font-family:var(--nagl);font-weight:700;font-size:1.4rem;line-height:1.15;color:var(--igla)}
.wpis summary .podp{grid-column:2;font-size:1.02rem;color:#3a5443;line-height:1.4}
.wpis summary .znaczki{grid-column:3;grid-row:1;display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end;align-content:flex-start;max-width:11rem}
.wpis summary::after{content:"";grid-column:4;grid-row:1;width:.65rem;height:.65rem;margin-top:.35rem;justify-self:center;border-right:3px solid var(--mech);border-bottom:3px solid var(--mech);transform:rotate(45deg);transition:transform .3s}
.wpis[open] summary::after{transform:rotate(225deg);margin-top:.6rem}
.wpis summary:hover .tyt{color:var(--mech)}
.wpis .tresc{padding:0 1.2rem 1.3rem}
.wpis[open] .tresc{animation:rozwin .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes rozwin{from{opacity:0;transform:translateY(-12px)}}
.fakty{margin:.4rem 0 0}
.fakty dt{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mech);margin-top:1.1rem}
.fakty dd{margin:.15rem 0 0;font-size:1.08rem}
@media(max-width:520px){.wpis summary{grid-template-columns:auto 1fr 1.6rem}.wpis summary .mini{width:4rem;height:4rem}.wpis summary .znaczki{grid-column:2;grid-row:auto;justify-content:flex-start;margin-top:.45rem;max-width:none}.wpis summary::after{grid-column:3}}

/* ===== 13. GALERIA ZDJĘĆ (polaroidy) ===== */
.galeria{display:grid;gap:1.6rem 1.1rem;grid-template-columns:1fr 1fr;margin-top:1.8rem}
@media(min-width:720px){.galeria{grid-template-columns:1fr 1fr 1fr}}
.galeria figure{margin:0;background:var(--papier);padding:.55rem .55rem .3rem;border-radius:3px;box-shadow:0 12px 26px rgba(0,0,0,.45);transform:rotate(-2deg);transition:transform .3s,box-shadow .3s}
.galeria figure:nth-child(even){transform:rotate(1.8deg)}
.galeria figure:nth-child(3n){transform:rotate(-.8deg)}
.galeria figure:hover{transform:rotate(0) scale(1.05);z-index:2;box-shadow:0 18px 36px rgba(0,0,0,.55)}
.ramka{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--mech),var(--igla));overflow:hidden}
.ramka::before{content:"";position:absolute;inset:22%;background:var(--ikona-drzewo) center/contain no-repeat;opacity:.35}
.ramka img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.galeria figcaption{font-family:var(--pismo);font-size:1.4rem;font-weight:700;color:var(--tekst);text-align:center;line-height:1.3;padding-top:.15rem}

/* ===== 14. CIEKAWOSTKI I QUIZ ===== */
.ciekawostki{list-style:none;padding:0;max-width:42rem}
.ciekawostki li{position:relative;padding-left:1.9rem;margin:.9rem 0}
.ciekawostki li::before{content:"";position:absolute;left:0;top:.5em;width:.9rem;height:.9rem;background:var(--lisc);border-radius:0 100% 0 100%;transform:rotate(-8deg)}
#quiz{background:var(--papier);color:var(--tekst);padding:1.4rem;border-radius:26px 8px 26px 8px;max-width:38rem;box-shadow:0 14px 36px rgba(0,0,0,.4)}
.postep{height:9px;background:#dfe8d6;border-radius:99px;overflow:hidden;margin-bottom:1.1rem}
.postep span{display:block;height:100%;background:linear-gradient(90deg,var(--mech),var(--lisc));border-radius:99px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.pyt{font-family:var(--nagl);font-weight:700;font-size:1.4rem;line-height:1.25;color:var(--igla);margin:0 0 1rem}
.odp{display:grid;gap:.6rem}
.przycisk{font:inherit;font-size:1.05rem;text-align:left;padding:.75rem 1rem;border:2px solid var(--mech);background:#fff;color:var(--tekst);border-radius:12px;cursor:pointer;transition:transform .15s,background .2s}
.przycisk:hover:not(:disabled){background:#e4efd6;transform:translateX(4px)}
.przycisk:disabled{cursor:default}
.przycisk.dobrze{background:#d7e9c3;border-color:#2a7a35;animation:pop .45s}
.przycisk.zle{background:#f8d3cd;border-color:var(--muchomor);animation:trzes .4s}
@keyframes pop{50%{transform:scale(1.04)}}
@keyframes trzes{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.przycisk.nastepne{margin-top:1rem;background:var(--igla);border-color:var(--igla);color:var(--biel);animation:wejscie .4s both}
.przycisk.nastepne:hover{background:var(--mech);transform:none}
.wyjasnienie{min-height:1.5rem;margin:.9rem 0 0}
.wynik{font-family:var(--nagl);font-weight:700;font-size:3rem;line-height:1;color:var(--igla);margin:0}
.ranga{font-family:var(--pismo);font-size:2.2rem;font-weight:700;color:var(--mech);margin:.2rem 0 1rem}

/* ===== 15. STOPKA z przyciskiem TikTok ===== */
footer{margin-top:auto;position:relative;z-index:1;background:linear-gradient(180deg,transparent,rgba(23,56,42,.95) 30%);padding:3.2rem 0 2rem;text-align:center}
.tt-tyt{font-family:var(--nagl);font-weight:700;font-size:clamp(1.5rem,5vw,2.1rem);color:var(--biel);margin:0 0 1.2rem;line-height:1.15}
.cta-tt{position:relative;font-size:1.2rem;padding:.95rem 1.9rem}
.cta-tt::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(244,185,66,.6);animation:puls 2.4s ease-out infinite;pointer-events:none}
@keyframes puls{70%,100%{box-shadow:0 0 0 18px rgba(244,185,66,0)}}
.uchwyt{display:block;font-family:var(--pismo);font-size:1.6rem;font-weight:700;color:var(--lisc);margin-top:.9rem;line-height:1}
.male-info{margin:1.8rem 0 0;font-size:.92rem;opacity:.7}

/* ===== 16. ŚWIETLIKI ===== */
.swietliki{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.swietliki i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#f7e48a;box-shadow:0 0 10px 3px rgba(247,228,138,.65);opacity:0;animation:swietlik var(--t) linear var(--d) infinite}
@keyframes swietlik{
  0%{transform:translate(0,0);opacity:0}
  15%{opacity:.85}
  50%{transform:translate(var(--dx),var(--dy));opacity:.3}
  85%{opacity:.85}
  100%{transform:translate(calc(var(--dx) * -.6),calc(var(--dy) * 1.7));opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .swietliki{display:none}
}

/* ===== 17. KOLORY kategorii "Ślady i Tropy" ===== */
.kafel.slady{background:linear-gradient(145deg,#9a7550,#5e4631);color:var(--biel)}
.kafel.slady:hover{color:var(--biel)}
.wpis.slad{border-left-color:var(--kurka)}
.znaczek.slad{background:#fbe9bf;color:#6b4a05}

/* wyszukiwarka */
.szukaj{margin:1.8rem 0 1rem}
.szukaj-pole{display:block;position:relative}
.szukaj-pole::before{content:"";position:absolute;left:1.1rem;top:50%;width:1.2rem;height:1.2rem;transform:translateY(-50%);background:var(--ikona-lupa) center/contain no-repeat;pointer-events:none}
.szukaj-pole input{width:100%;font:inherit;font-size:1.1rem;padding:.85rem 1rem .85rem 3rem;border-radius:999px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--biel);transition:border-color .2s,background .2s}
.szukaj-pole input::placeholder{color:rgba(217,230,207,.6)}
.szukaj-pole input:focus{outline:none;border-color:var(--kurka);background:rgba(255,255,255,.12)}
.filtry{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.filtr{font:inherit;font-size:.98rem;font-weight:600;padding:.4rem 1rem;border-radius:999px;border:2px solid rgba(255,255,255,.22);background:transparent;color:var(--jasny);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filtr:hover{background:rgba(255,255,255,.1)}
.filtr[aria-pressed="true"]{background:var(--kurka);border-color:var(--kurka);color:#2a1d00}
.licznik{margin:.7rem 0 0;font-size:.95rem;opacity:.8}
.brak{text-align:center;padding:1.4rem 1rem;margin-bottom:1rem;background:rgba(255,255,255,.06);border-radius:16px}
.brak[hidden],.wpis[hidden]{display:none}
.brak p{margin:0 0 .8rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* niejadalne i ochrona */
.wpis.niejadalny{border-left-color:#8a8f7c}
.znaczek.niejadalny{background:#e6e4da;color:#4b4a3f}
.znaczek.ochrona{background:#d3e6ee;color:#1d4b5f}
.znaczek.moratorium{background:#f3e6b8;color:#6b4e00}

/* kalendarz */
.kafel.kalendarz{background:linear-gradient(145deg,#3f8f95,#235a62);color:var(--biel)}
.kafel.kalendarz:hover{color:var(--biel)}
.miesiace{margin:1.4rem 0 1.2rem}
.filtr.miesiac{min-width:3.3rem;text-align:center;padding:.4rem .7rem}
.chipy{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1.2rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .95rem;border-radius:999px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.16);color:var(--biel);text-decoration:none;font-weight:600;font-size:.98rem;transition:background .2s,transform .2s}
.chip:hover{background:rgba(255,255,255,.16);color:var(--biel);transform:translateY(-2px)}
.chip.jadalny{border-color:rgba(165,208,112,.55)}
.chip.trujacy{border-color:rgba(224,72,58,.65)}
.chip.niejadalny{border-color:rgba(190,193,176,.4)}
.chip .znaczek{font-size:.75rem;padding:0 .5rem}
.grupa{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;margin:1.3rem 0 .2rem;color:var(--biel)}
.grupa::before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--lisc)}
.grupa.trujacy::before{background:var(--muchomor)}
.grupa.niejadalny::before{background:#9a9d8c}
.legenda{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.95rem;margin:0 0 .8rem}
.legenda span{display:inline-flex;align-items:center;gap:.4rem}
.kwadrat{display:inline-block;width:.9rem;height:.9rem;border-radius:4px;background:var(--lisc)}
.kwadrat.niejadalny{background:#9a9d8c}
.kwadrat.trujacy{background:var(--muchomor)}
.tabela-roku{overflow-x:auto;padding:.6rem;background:rgba(255,255,255,.04);border-radius:16px}
.rok-naglowek,.rok-wiersz{display:grid;grid-template-columns:minmax(5.6rem,1fr) repeat(12,1.15rem);gap:2px;align-items:center;min-width:19.5rem}
.rok-mies{font-size:.62rem;text-align:center;color:var(--jasny);opacity:.8}
.rok-mies.teraz-kol{color:var(--kurka);opacity:1;font-weight:700}
.rok-wiersz{padding:.18rem .2rem;border-radius:6px;text-decoration:none;color:var(--jasny);transition:background .2s}
.rok-wiersz:hover{background:rgba(255,255,255,.1);color:var(--biel)}
.rok-nazwa{font-size:.82rem;line-height:1.15;padding-right:.3rem}
.rok-kom{height:1.1rem;border-radius:4px;background:rgba(255,255,255,.06)}
.rok-kom.teraz-kol{box-shadow:0 0 0 1px rgba(244,185,66,.55)}
.rok-kom.on.jadalny{background:var(--lisc)}
.rok-kom.on.niejadalny{background:#9a9d8c}
.rok-kom.on.trujacy{background:var(--muchomor)}

/* dział "Co rośnie teraz?" na stronie głównej */
.teraz{background:linear-gradient(135deg,rgba(244,185,66,.17),rgba(165,208,112,.1));border:1px solid rgba(244,185,66,.32);border-radius:6px 26px 6px 26px;padding:1.3rem 1.4rem;margin:0 0 2.2rem}
.teraz .male{font-family:var(--pismo);font-size:1.5rem;font-weight:700;color:var(--kurka);margin:0;line-height:1}
.teraz h2{margin:.1em 0 .3em;font-size:clamp(1.6rem,5vw,2rem)}
.teraz p{margin:0}
.teraz .chipy{margin:.9rem 0 1.2rem}

/* kalendarz: zakladki i zwierzeta */
.zakladki{display:flex;gap:.6rem;margin:1.4rem 0 .4rem}
.zakladka{flex:1;font:inherit;font-family:var(--nagl);font-weight:700;font-size:1.25rem;padding:.7rem 1rem;border-radius:18px 4px 18px 4px;border:2px solid rgba(255,255,255,.22);background:transparent;color:var(--jasny);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.zakladka:hover{background:rgba(255,255,255,.1)}
.zakladka[aria-pressed="true"]{background:var(--kurka);border-color:var(--kurka);color:#2a1d00}
.chip.godowy{border-color:rgba(244,185,66,.75)}
.chip.mlode{border-color:rgba(243,248,234,.55)}
.chip .mala{font-size:.8rem;font-weight:400;opacity:.85}
.grupa.godowy::before{background:var(--kurka)}
.grupa.mlode::before{background:var(--biel)}
.kwadrat.godowy{background:var(--kurka)}
.kropka{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--biel);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.rok-kom.godowy{background:var(--kurka)}
.rok-kom.mlode{position:relative}
.rok-kom.mlode::after{content:"";position:absolute;left:50%;top:50%;width:.42rem;height:.42rem;border-radius:50%;background:var(--biel);box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.teraz .przyciski{margin-top:.2rem}

/* wyjasnienie ochrony */
.ochrona-info h2{margin-bottom:.6rem}
.ochrona-rzad{display:grid;grid-template-columns:9.5rem 1fr;gap:.3rem 1rem;align-items:start;margin:0 0 .9rem}
.ochrona-rzad .znaczek{justify-self:start;margin-top:.15rem}
.ochrona-rzad p{margin:0}
.ochrona-info .zrodlo{font-size:.9rem;opacity:.75;margin:.6rem 0 0}
@media(max-width:520px){.ochrona-rzad{grid-template-columns:1fr}}


/* kalendarz zwierząt: podzakładki Miesiące / Godziny i tabela doby */
.zakladki.podzakladki{margin:.8rem 0 .2rem}
.podzakladki[hidden],.godzina-wybor[hidden],.filtry.miesiace[hidden]{display:none}
.zakladka.mala-zakl{font-size:1.05rem;padding:.45rem 1rem}
.godzina-wybor{margin:1.2rem 0 1rem}
.godzina-wybor label{display:block;margin-bottom:.4rem}
.godzina-wybor strong{color:var(--kurka)}
.godzina-wybor input[type="range"]{width:100%;accent-color:var(--kurka);cursor:pointer}
.chip.aktywne{border-color:rgba(244,185,66,.75)}
.chip.slabe{border-color:rgba(165,208,112,.5)}
.grupa.aktywne::before{background:var(--kurka)}
.grupa.slabe::before{background:var(--lisc)}
.kwadrat.aktywne{background:var(--kurka)}
.kwadrat.slabe{background:rgba(165,208,112,.55)}
.kwadrat.puste{background:rgba(255,255,255,.1)}
.doba-naglowek,.doba-wiersz{display:grid;grid-template-columns:minmax(5.6rem,1fr) repeat(24,.7rem);gap:2px;align-items:center;min-width:23rem}
.doba-godz{font-size:.62rem;text-align:left;color:var(--jasny);opacity:.8;white-space:nowrap}
.doba-godz.teraz-kol{color:var(--kurka);opacity:1;font-weight:700}
.doba-wiersz{padding:.18rem .2rem;border-radius:6px;text-decoration:none;color:var(--jasny);transition:background .2s}
.doba-wiersz:hover{background:rgba(255,255,255,.1);color:var(--biel)}
.doba-kom{height:1.1rem;border-radius:3px;background:rgba(255,255,255,.06)}
.doba-kom.on.glowna{background:var(--kurka)}
.doba-kom.on.slaba{background:rgba(165,208,112,.55)}
.doba-kom.wybrana-kol{box-shadow:0 0 0 1px rgba(243,248,234,.8)}

/* zwierzęta: podkategorie (rodziny) */
.filtry-przerwa{flex-basis:100%;height:0}
.filtry-etykieta{flex-basis:100%;margin:.5rem 0 -.1rem;font-family:var(--pismo);font-size:1.35rem;font-weight:700;line-height:1;color:var(--kurka)}
.filtry-etykieta:first-child{margin-top:0}
.filtr[data-kat="grupa"]{border-radius:10px;border-color:rgba(165,208,112,.45);color:var(--lisc)}
.filtr[data-kat="grupa"]:hover{background:rgba(165,208,112,.14)}
.filtr[data-kat="grupa"][aria-pressed="true"]{background:var(--lisc);border-color:var(--lisc);color:#10240f}
.podkat[hidden]{display:none}
.podkat{margin-top:2.2rem}
.podkat-tyt{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .3rem;font-size:clamp(1.5rem,5vw,1.9rem)}
.podkat-ile{font-family:var(--czyt);font-size:.9rem;font-weight:700;padding:.05rem .65rem;border-radius:999px;background:rgba(255,255,255,.1);color:var(--jasny)}
.podkat-opis{margin:0;opacity:.85;font-size:1.05rem}
.podkat .wpisy{margin-top:1rem}

/* strona główna: plakietka "teraz w lesie" i losowa ciekawostka */
.hero>*:nth-child(5){animation-delay:.48s}
.teraz-pill{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;padding:.5rem 1rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:var(--jasny);font-size:1rem;text-decoration:none;max-width:100%}
.teraz-pill:hover{background:rgba(255,255,255,.14);color:var(--biel)}
.teraz-pill .kropka{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--kurka);animation:puls-kropka 2s infinite}
@keyframes puls-kropka{0%{box-shadow:0 0 0 0 rgba(244,185,66,.7)}70%,100%{box-shadow:0 0 0 .6rem rgba(244,185,66,0)}}
.losowa{margin:0 0 2.2rem;padding:1.3rem 1.4rem;border-left:4px solid var(--kurka);background:rgba(255,255,255,.05);border-radius:0 18px 18px 0}
.losowa .male{font-family:var(--pismo);font-size:1.5rem;font-weight:700;color:var(--kurka);margin:0;line-height:1}
.losowa-tekst{font-size:1.25rem;line-height:1.5;margin:.4rem 0 1rem;min-height:4.5em}
.losowa .cta{font-size:1rem;padding:.55rem 1.2rem}

/* ===== 21. OBRAZKI DRZEW (tło z leśnym horyzontem) =====
   To są małe rysunki SVG zamienione na tekst. Nie trzeba ich ruszać. */
:root{
  --drzewa-tyl:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='80'%20viewBox='0%200%20260%2080'%3E%3Cg%20fill='%232a6048'%3E%3Cpolygon%20points='25%2C32%2031%2C48%2028%2C48%2034%2C64%2030%2C64%2038%2C80%2012%2C80%2020%2C64%2016%2C64%2022%2C48%2019%2C48'/%3E%3Cpolygon%20points='80%2C42%2085%2C55%2082%2C55%2088%2C67%2084%2C67%2091%2C80%2069%2C80%2076%2C67%2072%2C67%2078%2C55%2075%2C55'/%3E%3Cpolygon%20points='140%2C28%20146%2C45%20143%2C45%20150%2C63%20145%2C63%20154%2C80%20126%2C80%20135%2C63%20130%2C63%20137%2C45%20134%2C45'/%3E%3Cpolygon%20points='205%2C40%20210%2C53%20208%2C53%20214%2C67%20210%2C67%20217%2C80%20193%2C80%20200%2C67%20196%2C67%20202%2C53%20200%2C53'/%3E%3Cpolygon%20points='245%2C46%20250%2C57%20247%2C57%20252%2C69%20249%2C69%20255%2C80%20235%2C80%20241%2C69%20238%2C69%20243%2C57%20240%2C57'/%3E%3C/g%3E%3C/svg%3E");
  --drzewa-srodek:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='80'%20viewBox='0%200%20200%2080'%3E%3Cg%20fill='%231a4331'%3E%3Cpolygon%20points='30%2C18%2039%2C39%2034%2C39%2044%2C59%2038%2C59%2050%2C80%2010%2C80%2022%2C59%2016%2C59%2026%2C39%2021%2C39'/%3E%3Cpolygon%20points='95%2C30%20103%2C47%2099%2C47%20107%2C63%20101%2C63%20112%2C80%2078%2C80%2089%2C63%2083%2C63%2091%2C47%2087%2C47'/%3E%3Cpolygon%20points='160%2C14%20169%2C36%20165%2C36%20175%2C58%20168%2C58%20181%2C80%20139%2C80%20152%2C58%20145%2C58%20155%2C36%20151%2C36'/%3E%3C/g%3E%3C/svg%3E");
  --drzewa-przod:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='80'%20viewBox='0%200%20200%2080'%3E%3Cg%20fill='%230e2217'%3E%3Cpolygon%20points='10%2C36%2016%2C51%2013%2C51%2020%2C65%2015%2C65%2024%2C80%20-4%2C80%205%2C65%20-0%2C65%207%2C51%204%2C51'/%3E%3Cpolygon%20points='62%2C24%2070%2C43%2066%2C43%2074%2C61%2068%2C61%2079%2C80%2045%2C80%2056%2C61%2050%2C61%2058%2C43%2054%2C43'/%3E%3Cpolygon%20points='120%2C40%20126%2C53%20123%2C53%20129%2C67%20125%2C67%20133%2C80%20107%2C80%20115%2C67%20111%2C67%20117%2C53%20114%2C53'/%3E%3Cpolygon%20points='178%2C28%20185%2C45%20182%2C45%20190%2C63%20184%2C63%20194%2C80%20162%2C80%20172%2C63%20166%2C63%20174%2C45%20171%2C45'/%3E%3C/g%3E%3C/svg%3E");
  --ikona-drzewo:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Cg%20fill='%23f5f8ef'%3E%3Cpolygon%20points='32%2C4%2043%2C21%2037%2C21%2049%2C39%2041%2C39%2056%2C56%208%2C56%2023%2C39%2015%2C39%2027%2C21%2021%2C21'/%3E%3Crect%20x='29'%20y='54'%20width='6'%20height='8'/%3E%3C/g%3E%3C/svg%3E");
  --ikona-lupa:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a5d070'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'/%3E%3Cpath%20d='M15.5%2015.5L21%2021'/%3E%3C/svg%3E");
}

/* telefon: kategorie jako mniejsze kafle 2x2 */
@media (max-width: 639px) {
  .duze { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .kafel { min-height: 9.5rem; padding: 1rem; border-radius: 22px 6px 22px 6px; }
  .kafel .tyt { font-size: 1.55rem; margin-bottom: 0; }
  .kafel .podp { display: none; }
  .kafel .ikona { width: 5.5rem; height: 5.5rem; }
}

/* stopka bez bloku TikTok: mniej miejsca u góry */
footer:has(#tiktok-blok[hidden]){padding-top:1.6rem}
#tiktok-blok[hidden]+.male-info{margin-top:0}

/* mały przycisk TikTok w pasku na górze (tylko na szerszych ekranach) */
.pasek-tt{white-space:nowrap;padding:.4rem 1rem;border-radius:999px;border:2px solid var(--kurka);color:var(--kurka);font-weight:700;font-size:.95rem;text-decoration:none;transition:background .2s,color .2s}
.pasek-tt:hover{background:var(--kurka);color:#2a1d00}
@media(max-width:760px){.pasek-tt{display:none}}

/* zdjęcie we wpisie (rozwinięty grzyb): obok tekstu, w całości, w swoich proporcjach (nic się nie przycina) */
.wpis .tresc{display:flow-root}
.foto{float:right;margin:0 0 1rem 1.4rem;max-width:min(18rem,42%)}
.foto a{display:block}
.foto img{display:block;width:auto;height:auto;max-width:100%;max-height:22rem;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:zoom-in}
@media(max-width:600px){
  .foto{float:none;max-width:100%;margin:0 0 1rem;text-align:center}
  .foto a{display:inline-block;max-width:100%}
  .foto img{max-height:18rem}
}

/* powiększone zdjęcie na całym ekranie */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(5,12,8,.92);cursor:zoom-out;animation:lightbox-wejscie .2s ease-out}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 10px 50px rgba(0,0,0,.6)}
.lightbox-zamknij{position:absolute;top:.8rem;right:1rem;width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.lightbox-zamknij:hover{background:rgba(255,255,255,.2)}
.lightbox-otwarty{overflow:hidden}
@keyframes lightbox-wejscie{from{opacity:0}}

/* Roślinność */
.kafel.roslinnosc{background:linear-gradient(145deg,#7bb04f,#41732c);color:var(--biel)}
.kafel.roslinnosc:hover{color:var(--biel)}
.wpis.roslina{border-left-color:var(--lisc)}
.znaczek.roslina{background:#dcebc4;color:#2f5a22}
.znaczek.obrobka{background:#fbe9bf;color:#6b4a05}
/* Przy nieparzystej liczbie kafli ostatni zajmuje całą szerokość */
.duze .kafel:last-child:nth-child(odd){grid-column:1/-1}

/* ROZPOZNAJ */
.rozpoznaj-pole{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin:1rem 0}
.rozpoznaj [hidden]{display:none!important}
#roz-podglad{max-width:100%;max-height:22rem;border-radius:18px;object-fit:contain}
#roz-akcje{display:flex;flex-wrap:wrap;gap:.8rem}
button.cta{border:0;cursor:pointer;font-family:inherit}

/* przycisk w jasnej karcie: ciemny tekst i ramka */
.uwaga .cta-jasny{color:var(--igla);border:2px solid var(--mech)}
.uwaga .cta-jasny:hover{color:var(--igla);background:rgba(47,112,72,.12);border-color:var(--igla)}
.uwaga .cta-jasny:disabled{opacity:.6;cursor:default}

/* baner nowej wersji */
#aktualizacja{position:fixed;left:50%;bottom:1rem;translate:-50% 0;z-index:150;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;max-width:calc(100% - 2rem);background:var(--papier);color:var(--tekst);border-left:6px solid var(--kurka);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:1rem}
#aktualizacja[hidden]{display:none}
#aktualizacja button{font:inherit;font-weight:700;padding:.4rem 1rem;border:0;border-radius:999px;background:var(--kurka);color:#2a1d00;cursor:pointer}

.znaczek.poziom{background:#e7e1f3;color:#43306b}

/* klucz do grzybów: wyniki ze zdjęciami */
.klucz-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.7rem;margin:.6rem 0 1.2rem}
.klucz-karta{display:flex;flex-direction:column;background:var(--papier);color:var(--tekst);border-radius:4px 14px 4px 14px;overflow:hidden;text-decoration:none;border-bottom:5px solid var(--mech);transition:transform .2s}
.klucz-karta:hover{transform:translateY(-3px);color:var(--tekst)}
.klucz-karta.trujacy{border-bottom-color:var(--muchomor)}
.klucz-karta.niejadalny{border-bottom-color:#8a8f7c}
.klucz-karta img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--igla)}
.klucz-karta .kn{padding:.4rem .6rem .1rem;font-family:var(--nagl);font-weight:700;font-size:1.02rem;line-height:1.15}
.klucz-karta .kl{padding:0 .6rem .5rem;font-size:.8rem;opacity:.7}

/* klucz do grzybów: przyciski odpowiedzi ze zdjęciem */
.filtr.z-foto{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:7.2rem;padding:.4rem;border-radius:14px;text-align:center;line-height:1.2}
.filtr.z-foto img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--igla)}

/* Ulubione */
.kafel.ulubione{background:linear-gradient(145deg,#d9604f,#8f2b21);color:var(--biel)}
.kafel.ulubione:hover{color:var(--biel)}
.serce{font:inherit;font-size:.95rem;font-weight:700;margin:0 0 .8rem;padding:.35rem .9rem;border-radius:999px;border:2px solid var(--muchomor);background:transparent;color:var(--muchomor);cursor:pointer;transition:background .2s,color .2s}
.serce:hover{background:rgba(224,72,58,.12)}
.serce[aria-pressed="true"]{background:var(--muchomor);color:#fff}

/* Quiz: przyciski na ekranie wyniku */
.wynik-akcje{display:grid;gap:.6rem}
.przycisk.przycisk-chwal{background:var(--kurka);border-color:var(--kurka);color:#2a1d00;font-weight:700}
.przycisk.przycisk-chwal:hover:not(:disabled){background:#f7c85c;transform:none}
#quiz .zrodlo{margin:.8rem 0 0;font-size:.95rem}

/* kategorie quizu: jeden rząd, przewijany w bok, tej samej szerokości co karta quizu */
.filtry.quiz-kat{flex-wrap:nowrap;overflow-x:auto;max-width:38rem;margin:0 0 1rem;padding-bottom:.3rem;scrollbar-width:none}
.filtry.quiz-kat::-webkit-scrollbar{display:none}
.quiz-kat .filtr{flex:none;white-space:nowrap;font-size:.9rem;padding:.35rem .85rem}

/* ===== QUIZ: nowy wygląd karty ===== */
#quiz{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);color:var(--jasny);padding:1.6rem;border-radius:28px 8px 28px 8px;box-shadow:0 18px 44px rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#quiz .postep{height:8px;background:rgba(255,255,255,.12);margin-bottom:1.3rem}
#quiz .postep span{background:linear-gradient(90deg,var(--lisc),var(--kurka))}
#quiz .pyt{color:var(--biel);font-size:clamp(1.3rem,4.5vw,1.65rem);line-height:1.25;margin-bottom:1.2rem}

/* odpowiedzi z literkami A, B, C, D */
#quiz .odp{counter-reset:o}
#quiz .przycisk{display:flex;align-items:center;gap:.85rem;width:100%;padding:.8rem 1rem;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.18);color:var(--biel);border-radius:14px;transition:transform .15s,background .2s,border-color .2s}
#quiz .odp .przycisk::before{counter-increment:o;content:counter(o,upper-alpha);flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.14);font-family:var(--nagl);font-weight:800;font-size:1rem;transition:background .2s,color .2s}
#quiz .przycisk:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:var(--kurka);transform:translateX(4px)}
#quiz .przycisk:hover:not(:disabled)::before{background:var(--kurka);color:#2a1d00}
#quiz .przycisk:disabled{color:var(--biel);opacity:1}
#quiz .przycisk.dobrze{background:rgba(165,208,112,.22);border-color:var(--lisc)}
#quiz .przycisk.dobrze::before{background:var(--lisc);color:#10240f;content:"✓"}
#quiz .przycisk.zle{background:rgba(224,72,58,.22);border-color:var(--muchomor)}
#quiz .przycisk.zle::before{background:var(--muchomor);color:#fff;content:"✕"}
#quiz .przycisk:disabled:not(.dobrze):not(.zle){opacity:.55}

/* wyjaśnienie i przycisk dalej */
#quiz .wyjasnienie{background:rgba(255,255,255,.07);border-left:4px solid var(--kurka);border-radius:0 12px 12px 0;padding:.7rem 1rem;margin-top:1rem;font-size:1.05rem;min-height:0}
#quiz .wyjasnienie:empty{display:none}
#quiz .przycisk.nastepne{justify-content:center;background:var(--kurka);border-color:var(--kurka);color:#2a1d00;font-weight:700;margin-top:1rem;box-shadow:0 4px 0 #b9821c}
#quiz .przycisk.nastepne:hover:not(:disabled){background:#f8c75a;transform:translateY(-2px)}

/* ekran wyniku */
#quiz .wynik{text-align:center;font-size:4rem;color:var(--kurka);margin:.3rem 0 0}
#quiz .ranga{text-align:center;color:var(--lisc);font-size:2.4rem;margin:.1rem 0 1.4rem}
#quiz .wynik ~ .przycisk{justify-content:center;text-align:center;margin-top:.6rem}

/* ===== RAMKI Z UWAGAMI: ciemny, szklany wygląd jak quiz ===== */
.uwaga{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-left:6px solid var(--kurka);color:var(--jasny);box-shadow:0 14px 36px rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.uwaga h2{color:var(--biel)}
.uwaga strong{color:var(--biel)}
.uwaga a{color:var(--lisc)}
.uwaga a:hover{color:var(--kurka)}

/* czerwone ostrzeżenie (grzyby, klucz) */
.ostrzezenie{background:linear-gradient(160deg,rgba(224,72,58,.22),rgba(224,72,58,.08));border:1px solid rgba(224,72,58,.4);border-left:6px solid var(--muchomor);color:var(--biel)}
.ostrzezenie strong{color:#fff}
.ostrzezenie a{color:var(--kurka)}

/* przyciski wewnątrz ciemnej karty: z powrotem jasne (stara reguła robiła je ciemne) */
.uwaga .cta-jasny{color:var(--biel);border:2px solid rgba(255,255,255,.35)}
.uwaga .cta-jasny:hover{color:var(--biel);background:rgba(255,255,255,.1);border-color:var(--biel)}
.uwaga .cta-jasny:disabled{opacity:.6;cursor:default}

/* karta "Co oznacza ochrona gatunkowa" */
.ochrona-info .zrodlo{opacity:.7}

/* ===== WPISY (grzyby, zwierzęta, ślady, rośliny, lekcje): ciemne szkło ===== */
.wpis{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-left:8px solid var(--mech);color:var(--jasny);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.wpis:hover{background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.06));box-shadow:0 14px 32px rgba(0,0,0,.45)}
.wpis summary .tyt{color:var(--biel)}
.wpis summary .podp{color:var(--jasny);opacity:.85}
.wpis summary:hover .tyt{color:var(--kurka)}
.wpis summary::after{border-color:var(--lisc)}
.fakty dt{color:var(--lisc)}
.fakty dd{color:var(--jasny)}
.fakty strong{color:var(--biel)}
.lac{color:var(--lisc)}
.pot{color:var(--kurka)}
.foto img{box-shadow:0 4px 14px rgba(0,0,0,.5)}

/* kolory pasków z lewej (te same co wcześniej, tylko na ciemnym) */
.wpis.trujacy{border-left-color:var(--muchomor)}
.wpis.zwierze{border-left-color:var(--kora)}
.wpis.slad{border-left-color:var(--kurka)}
.wpis.niejadalny{border-left-color:#8a8f7c}
.wpis.roslina{border-left-color:var(--lisc)}

.quiz-foto{display:block;width:100%;max-height:18rem;object-fit:contain;margin:0 0 1rem;border-radius:12px;background:#e9efe0}

/* quiz: punkty i seria */
.quiz-status{display:flex;justify-content:space-between;align-items:center;margin:0 0 .9rem;font-weight:700;font-size:1rem;color:var(--jasny)}
.quiz-status span[hidden]{display:none}
#q-seria{color:var(--kurka);animation:pop .4s}

/* quiz: napisy pod rangą wyśrodkowane */
#quiz .wynik ~ .zrodlo{text-align:center;margin:.2rem 0}
.wynik-akcje{margin-top:1.2rem}

/* quiz: lista błędów */
.quiz-bledy{margin:1rem 0;background:rgba(255,255,255,.07);border-left:4px solid var(--muchomor);border-radius:0 12px 12px 0;padding:.6rem 1rem}
.quiz-bledy summary{cursor:pointer;font-weight:700;color:var(--biel)}
.quiz-bledy ul{list-style:none;padding:0;margin:.7rem 0 0}
.quiz-bledy li{margin:0 0 .8rem;font-size:1rem;line-height:1.35}
.quiz-bledy .twoja{color:#f0a198;text-decoration:line-through}
.quiz-bledy .dobra{color:var(--lisc)}

/* konfetti w quizie */
.konfetti{position:fixed;inset:0;z-index:180;pointer-events:none;overflow:hidden}
.konfetti i{position:absolute;width:.5rem;height:.85rem;border-radius:2px;opacity:0;animation:konfetti 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes konfetti{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  40%{opacity:1;transform:translate(calc(var(--dx) * .7),var(--dy)) rotate(calc(var(--r) * .5))}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 300px)) rotate(var(--r))}
}

/* karta wyniku do screenshota */
.karta-wyniku{position:relative;overflow:hidden;text-align:center;padding:1.6rem 1.2rem 1.3rem;margin:0 0 .8rem;border-radius:24px 6px 24px 6px;border:1px solid rgba(244,185,66,.4);
  background:radial-gradient(circle at 85% 8%,rgba(255,246,196,.22) 0,transparent 28%),linear-gradient(170deg,#1f5238 0%,#0d2a1c 60%,#08150e 100%);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.karta-wyniku::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.5rem;opacity:.5;pointer-events:none;
  background:var(--drzewa-przod) repeat-x 0 100%/auto 100%}
.karta-marka{font-family:var(--nagl);font-weight:700;font-size:1.15rem;color:var(--biel);margin:0}
.karta-temat{font-family:var(--pismo);font-size:1.4rem;font-weight:700;color:var(--kurka);margin:.1rem 0 .6rem;line-height:1.1}
.karta-adres{position:relative;z-index:1;font-size:.9rem;opacity:.75;margin:.9rem 0 1.4rem;letter-spacing:.03em}
.karta-wyniku .wynik,.karta-wyniku .ranga,.karta-wyniku .zrodlo{position:relative;z-index:1}
#quiz .karta-podp{text-align:center;opacity:.7}

/* przycisk dźwięków lasu w pasku */
.ambient{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;font-size:1.1rem;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.ambient:hover{background:rgba(255,255,255,.1)}
.ambient[aria-pressed="true"]{border-color:var(--kurka);background:rgba(244,185,66,.18)}

/* grzyb i zwierzę dnia: karty ze zdjęciem */
.dnia-siatka{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.8rem}
.dnia-karta{display:flex;flex-direction:column;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px 16px 4px 16px;overflow:hidden;text-decoration:none;color:var(--jasny);transition:transform .2s,background .2s}
.dnia-karta:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);color:var(--jasny)}
.dnia-karta img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--igla)}
.dnia-et{padding:.6rem .8rem 0;font-family:var(--pismo);font-size:1.3rem;font-weight:700;color:var(--kurka);line-height:1}
.dnia-nazwa{padding:.2rem .8rem 0;font-family:var(--nagl);font-weight:700;font-size:1.2rem;line-height:1.15;color:var(--biel)}
.dnia-lac{padding:0 .8rem .7rem;font-size:.85rem;opacity:.7;font-style:italic}

/* przyciski we wpisie: Zapisz i Udostępnij */
.akcje-wpisu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.serce,.udostepnij{font:inherit;font-size:.92rem;font-weight:700;margin:0;padding:.4rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:var(--jasny);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
.serce:hover,.udostepnij:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:var(--biel);transform:translateY(-1px)}
.serce[aria-pressed="true"]{background:rgba(224,72,58,.18);border-color:rgba(224,72,58,.6);color:#ff9d92}
.udostepnij:hover{border-color:var(--lisc);color:var(--lisc)}

.udostepnij{display:inline-flex;align-items:center;gap:.4rem}
.udostepnij svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

a.ambient{display:grid;place-items:center;text-decoration:none}

/* ikony w pasku: lupa, dźwięk, TikTok */
.pasek-ikona{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;color:var(--lisc);cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.pasek-ikona svg{width:1.25rem;height:1.25rem}
.pasek-ikona:hover{background:rgba(255,255,255,.1);color:var(--kurka)}
.pasek-ikona[aria-pressed="true"]{border-color:var(--kurka);color:var(--kurka);background:rgba(244,185,66,.18)}


.pasek-ikony{display:flex;flex-direction:row;align-items:center;gap:.5rem}

.streak-dni{margin:0 0 .6rem;font-weight:700;font-size:1rem;color:var(--kurka)}
.streak-dni[hidden]{display:none}

/* pytanie dnia */
.pd{margin:0 0 2rem;padding:1.4rem;max-width:38rem;border:1px solid rgba(244,185,66,.35);border-radius:28px 8px 28px 8px;background:linear-gradient(160deg,rgba(244,185,66,.14),rgba(255,255,255,.04));box-shadow:0 18px 44px rgba(0,0,0,.4)}
.pd .male{font-family:var(--pismo);font-size:1.5rem;font-weight:700;color:var(--kurka);margin:0;line-height:1}
.pd .pyt{color:var(--biel);font-size:clamp(1.3rem,4.5vw,1.65rem);margin:.3rem 0 1.1rem}
.pd .odp{counter-reset:o}
.pd .przycisk{display:flex;align-items:center;gap:.85rem;width:100%;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.18);color:var(--biel);border-radius:14px}
.pd .przycisk::before{counter-increment:o;content:counter(o,upper-alpha);flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.14);font-family:var(--nagl);font-weight:800;font-size:1rem}
.pd .przycisk:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:var(--kurka)}
.pd .przycisk:hover:not(:disabled)::before{background:var(--kurka);color:#2a1d00}
.pd .przycisk:disabled{color:var(--biel);opacity:1}
.pd .przycisk:disabled:not(.dobrze):not(.zle){opacity:.55}
.pd .przycisk.dobrze{background:rgba(165,208,112,.22);border-color:var(--lisc)}
.pd .przycisk.dobrze::before{content:"✓";background:var(--lisc);color:#10240f}
.pd .przycisk.zle{background:rgba(224,72,58,.22);border-color:var(--muchomor)}
.pd .przycisk.zle::before{content:"✕";background:var(--muchomor);color:#fff}
.pd .wyjasnienie{background:rgba(255,255,255,.07);border-left:4px solid var(--kurka);border-radius:0 12px 12px 0;padding:.7rem 1rem;margin:1rem 0 0;font-size:1.05rem;min-height:0}
.pd .zrodlo{margin:.8rem 0 0;font-size:.95rem;opacity:.75}

.znaczek.zakaz{background:#e0483a;color:#fff}

/* Sobowtóry */
.kafel.sobowtory{background:linear-gradient(145deg,#d06a3a,#8a3416);color:var(--biel)}
.kafel.sobowtory:hover{color:var(--biel)}
.sob{margin:0 0 2rem;padding:1.2rem;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-radius:4px 22px 4px 22px}
.sob-para{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center}
.sob-vs{font-family:var(--pismo);font-size:1.8rem;font-weight:700;color:var(--kurka)}
.sob-grzyb{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;text-decoration:none;color:var(--biel)}
.sob-grzyb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--igla);border-bottom:5px solid var(--mech)}
.sob-grzyb.trujacy img{border-bottom-color:var(--muchomor)}
.sob-grzyb.niejadalny img{border-bottom-color:#8a8f7c}
.sob-nazwa{font-family:var(--nagl);font-weight:700;font-size:1.15rem;line-height:1.15}
.sob-roznice{margin-top:1.1rem}
.sob-wiersz{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .7rem;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.1);font-size:1rem;line-height:1.35}
.sob-cecha{grid-column:1/-1;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lisc)}
.sob-a,.sob-b{padding-left:.6rem;border-left:4px solid var(--mech)}
.sob-a.trujacy,.sob-b.trujacy{border-left-color:var(--muchomor)}
.sob-a.niejadalny,.sob-b.niejadalny{border-left-color:#8a8f7c}
.sob-uwaga{margin:.8rem 0 0;padding:.6rem 1rem;background:rgba(224,72,58,.14);border-left:4px solid var(--muchomor);border-radius:0 12px 12px 0;font-size:1rem}

/* Dziennik obserwacji */
.kafel.dziennik{background:linear-gradient(145deg,#8a6fc4,#4a3a86);color:var(--biel)}
.kafel.dziennik:hover{color:var(--biel)}
.dz-link{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.92rem;font-weight:700;padding:.4rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:var(--jasny);text-decoration:none;transition:background .2s,border-color .2s,color .2s,transform .15s}
.dz-link:hover{background:rgba(255,255,255,.14);border-color:var(--lisc);color:var(--lisc);transform:translateY(-1px)}

.dziennik-form label{display:block;font-weight:700;color:var(--biel);margin:.9rem 0 .3rem}
.dziennik-form label:first-child{margin-top:0}
.dziennik-form select,.dziennik-form input[type="date"],.dziennik-form textarea{width:100%;font:inherit;font-size:1.05rem;padding:.65rem .9rem;border-radius:12px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--biel)}
.dziennik-form select option,.dziennik-form select optgroup{background:#17382a;color:var(--biel)}
.dziennik-form textarea{resize:vertical}
.dziennik-form select:focus,.dziennik-form input:focus,.dziennik-form textarea:focus{outline:none;border-color:var(--kurka)}
.dziennik-form .dz-check{display:flex;align-items:center;gap:.6rem;font-weight:400}
.dziennik-form .dz-check input{width:1.2rem;height:1.2rem;accent-color:var(--kurka)}
.dziennik-form .cta{margin-top:1.1rem}
.dziennik-form .zrodlo{margin:.7rem 0 0;font-size:.95rem}

.dz-wpis{margin:0 0 .8rem;padding:1rem 1.2rem;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-left:6px solid var(--kurka);border-radius:4px 18px 4px 18px}
.dz-gora{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.dz-data{font-family:var(--pismo);font-size:1.4rem;font-weight:700;color:var(--kurka);line-height:1}
.dz-notka{margin:.6rem 0 0;white-space:pre-wrap}
.dz-wpis .zrodlo{margin:.5rem 0 0;font-size:.95rem}
.dz-usun{font:inherit;font-size:.85rem;font-weight:700;margin-top:.7rem;padding:.25rem .8rem;border-radius:999px;border:1px solid rgba(224,72,58,.6);background:transparent;color:#ff9d92;cursor:pointer}
.dz-usun:hover{background:rgba(224,72,58,.18)}

/* ===== TRYB JASNY (do czytania na słońcu) ===== */
html.jasny{
  --jasny:#1b3123; --biel:#0e2216; --lisc:#2a6a2e;
  --szklo:rgba(23,48,31,.07); --obrys:rgba(23,48,31,.25);
  color-scheme:light;
}
html.jasny body{background:#eef3e6}

/* elementy, które zostają ciemne: odwracamy zmienne z powrotem */
html.jasny .gora, html.jasny .pasek, html.jasny footer, html.jasny .kafel,
html.jasny .karta-wyniku, html.jasny .lightbox{
  --jasny:#d9e6cf; --biel:#f3f8ea; --lisc:#a5d070;
}
html.jasny footer{color:var(--jasny)}

/* szkło -> jasne karty (:where = niska specyficzność, kolorowe paski i stany zostają) */
:where(html.jasny) .wpis{background:#fff;border-top-color:var(--obrys);border-right-color:var(--obrys);border-bottom-color:var(--obrys);box-shadow:0 4px 14px rgba(0,0,0,.12)}
:where(html.jasny) .wpis:hover{background:#fbfdf7;box-shadow:0 8px 20px rgba(0,0,0,.18)}
:where(html.jasny) .uwaga{background:#fff;border-top-color:var(--obrys);border-right-color:var(--obrys);border-bottom-color:var(--obrys);box-shadow:0 4px 14px rgba(0,0,0,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
:where(html.jasny) .ostrzezenie{background:#fbe3df;border-top-color:rgba(224,72,58,.5);border-right-color:rgba(224,72,58,.5);border-bottom-color:rgba(224,72,58,.5);color:var(--jasny)}
:where(html.jasny) .ostrzezenie strong{color:#7a1810}
:where(html.jasny) .ostrzezenie a{color:#1d5a2b}
:where(html.jasny) #quiz{background:#fff;border-color:var(--obrys);color:var(--jasny);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 6px 18px rgba(0,0,0,.14)}
:where(html.jasny) #quiz .przycisk{background:var(--szklo);border-color:var(--obrys)}
:where(html.jasny) #quiz .wyjasnienie{background:var(--szklo)}
:where(html.jasny) #quiz .postep{background:var(--szklo)}
:where(html.jasny) .szukaj-pole input{background:#fff;border-color:var(--obrys)}
:where(html.jasny) .szukaj-pole input::placeholder{color:rgba(23,48,31,.55)}
:where(html.jasny) .filtr,:where(html.jasny) .zakladka{border-color:var(--obrys)}
:where(html.jasny) .filtr:hover,:where(html.jasny) .zakladka:hover{background:var(--szklo)}
:where(html.jasny) .filtr[data-kat="grupa"]{border-color:rgba(42,106,46,.5)}
html.jasny .filtr[data-kat="grupa"][aria-pressed="true"]{color:#fff}
:where(html.jasny) .chip{background:#fff;border-color:var(--obrys)}
:where(html.jasny) .chip:hover{background:var(--szklo)}
:where(html.jasny) .teraz,:where(html.jasny) .losowa,:where(html.jasny) .dnia-karta,:where(html.jasny) .info div,:where(html.jasny) .brak,:where(html.jasny) .tabela-roku,:where(html.jasny) .quiz-bledy,:where(html.jasny) .podkat-ile{background:var(--szklo);border-color:var(--obrys)}
:where(html.jasny) .teraz{border-color:rgba(184,120,0,.4)}
:where(html.jasny) .dnia-karta:hover,:where(html.jasny) .rok-wiersz:hover,:where(html.jasny) .doba-wiersz:hover{background:rgba(23,48,31,.12)}
:where(html.jasny) .rok-kom,:where(html.jasny) .doba-kom,:where(html.jasny) .kwadrat.puste{background:rgba(23,48,31,.1)}
:where(html.jasny) .doba-kom.wybrana-kol{box-shadow:0 0 0 1px rgba(23,48,31,.85)}
:where(html.jasny) .serce,:where(html.jasny) .udostepnij{background:#fff;border-color:var(--obrys)}
:where(html.jasny) .serce[aria-pressed="true"]{color:#b3261e}
html.jasny .cta-jasny,html.jasny .uwaga .cta-jasny{border-color:rgba(23,48,31,.4)}
html.jasny .cta-jasny:hover,html.jasny .uwaga .cta-jasny:hover{background:var(--szklo);border-color:var(--biel)}
html.jasny .gora .cta-jasny{border-color:rgba(255,255,255,.35)}

/* żółty jako tekst jest nieczytelny na jasnym tle: ciemny bursztyn */
html.jasny .stat .liczba,html.jasny .filtry-etykieta,html.jasny .teraz .male,
html.jasny .losowa .male,html.jasny .dnia-et,html.jasny .godzina-wybor strong,
html.jasny .streak-dni,html.jasny .rok-mies.teraz-kol,html.jasny .doba-godz.teraz-kol,
html.jasny .pot,html.jasny #q-seria,html.jasny .wpis summary:hover .tyt{color:#8a5a00}
html.jasny .quiz-bledy .twoja{color:#b3261e}
html.jasny .karta-wyniku .zrodlo,html.jasny .karta-wyniku .ranga{color:inherit}