/* Angielski (repo lingoza) — kremowe tło, pastelowe karty, drukarskie nagłówki (Libre Baskerville) i Jost do tekstu. Bez kursywy. */
@font-face { font-family: 'Jost'; src: url('fonts/Jost.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; src: url('fonts/LibreBaskerville.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --tlo: #F5F2EA; --karta: #FCFAF5; --tusz: #1D1C22; --szary: #77736B; --linia: #E5E0D4; --oliwka: #A0986A;
  --lila: #C9C5F7; --rozowy: #F6C7EE; --zolty: #F4EE90; --mietowy: #C5EFDC; --zielony: #2F9B5A; --brzoskwinia: #F9D7AF;
  --niebieski: #C0E4F5; --krem: #F1E7BF;
  --ok: #2F9B5A; --ok-tlo: #DDF4E6; --zle: #D6455D; --zle-tlo: #FBE1E5;
  --r: 22px; --cien: 0 1px 0 rgba(29,28,34,.04), 0 10px 26px -14px rgba(29,28,34,.28);
  --dol: env(safe-area-inset-bottom, 0px); --gora: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tusz); font: 17px/1.45 Jost, -apple-system, system-ui, sans-serif; min-height: 100dvh; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.serif { font-family: 'Libre Baskerville', Baskerville, Georgia, serif; font-weight: 400; letter-spacing: -.015em; }
em, i { font-style: normal; }
.maly, small { font-size: 13px; color: var(--szary); }
.ukryta { display: none !important; }

.ekran { max-width: 620px; margin: 0 auto; padding: calc(var(--gora) + 16px) 16px calc(var(--dol) + 96px); }
.logo { font-size: 24px; text-align: center; padding: 10px 0; }

/* nawigacja dolna */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; gap: 4px;
  padding: 8px 12px calc(var(--dol) + 8px); background: rgba(245,242,234,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linia); }
.nav a { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 14px; font-size: 12px; color: var(--szary); }
.nav a.akt { color: var(--tusz); background: var(--krem); font-weight: 500; }
.nav-ik { font-size: 21px; line-height: 1.1; }
body.w-lekcji .nav { display: none; }

/* nagłówek ekranu głównego */
.naglowek { display: flex; align-items: center; gap: 10px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--rozowy); display: grid; place-items: center; font-size: 24px; }
.naglowek-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.naglowek-txt b { font-weight: 500; }
.ikona-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linia); background: var(--karta); display: grid; place-items: center; font-size: 18px; cursor: pointer; }
.ikona-btn.maly { width: 32px; height: 32px; font-size: 15px; }
.tytul { font-size: clamp(34px, 9.6vw, 46px); line-height: 1.08; margin: 18px 0 16px; }
.tytul em { color: var(--oliwka); }
.podtytul { color: var(--szary); margin: -4px 0 16px; }

/* pasek grywalizacji */
.pasek-gry { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.gra-el { flex: 1; min-width: 70px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 8px 10px; border-radius: 16px; background: var(--karta); border: 1px solid var(--linia); }
.gra-el > :first-child { grid-row: 1 / 3; }
.gra-el b { font-size: 17px; font-weight: 600; line-height: 1.1; }
.gra-el small { font-size: 11px; line-height: 1.1; }
.gra-ik { font-size: 20px; filter: grayscale(.85); opacity: .75; }
.gra-el.plonie .gra-ik { filter: none; opacity: 1; animation: plomien 1.6s ease-in-out infinite; }
@keyframes plomien { 50% { transform: scale(1.12) rotate(-4deg); } }
.pierscien { position: relative; width: 30px; height: 30px; flex: none; }
.pierscien svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pierscien .pt { fill: none; stroke: var(--linia); stroke-width: 5; }
.pierscien .pp { fill: none; stroke: #E9B400; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.pierscien-s { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; }

/* duży przycisk lekcji */
.cta { width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 0; border-radius: var(--r); background: var(--tusz); color: #fff; text-align: left; cursor: pointer; box-shadow: var(--cien); margin-bottom: 18px; }
.cta-txt { flex: 1; display: flex; flex-direction: column; }
.cta-txt b { font-size: 20px; font-weight: 500; }
.cta-txt small { color: #CFCBC2; }
.cta-strzalka { width: 42px; height: 42px; border-radius: 50%; background: var(--zolty); color: var(--tusz); display: grid; place-items: center; font-size: 20px; }
.cta:active { transform: scale(.98); }

/* zakładki jak „Practice / Lessons” */
.zakladki { display: flex; gap: 8px; margin-bottom: 18px; }
.zakladka { flex: 1; border: 0; padding: 11px 8px; background: #F7F1D9; color: var(--szary); cursor: pointer; font-size: 15px;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%); border-radius: 10px 4px 4px 10px; }
.zakladka.akt { background: var(--krem); color: var(--tusz); font-weight: 500; }

/* stos kart działów — talia kart leżąca „na stole”: cały stos pochylony w perspektywie,
   karty z tyłu węższe i ściśnięte (widać tylko tytuł), karta z przodu pełna. Margines górny dopasowuje app.js. */
.stos { display: flex; flex-direction: column; padding: 0 0 8px; transform-origin: 50% 0;
  transform: perspective(1000px) rotateX(-13deg); }
.karta-stos { position: relative; display: block; padding: 20px 22px 20px; border-radius: 26px; min-height: 190px;
  transform-origin: 50% 0;
  transform: scale(max(.82, 1 - var(--d, 0) * .035)) rotate(var(--obrot, 0deg));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cpath d='M70 140 C 60 95, 95 70, 130 78 S 190 60, 168 22 C 155 0, 120 10, 128 38 C 135 62, 175 70, 210 50' fill='none' stroke='white' stroke-opacity='.75' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,.05) 100%);
  background-repeat: no-repeat; background-position: right -10px top -4px, 0 0; background-size: 62% auto, auto;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.06),
    0 6px 0 var(--brzeg, rgba(0,0,0,.12)), 0 -12px 20px -12px rgba(29,28,34,.4), 0 26px 30px -20px rgba(29,28,34,.5);
  transition: transform .2s ease, box-shadow .2s; }
.karta-stos + .karta-stos { margin-top: -34px; }
.karta-stos:active { transform: scale(max(.82, 1 - var(--d, 0) * .035)) rotate(0deg) translateY(4px);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), 0 2px 0 var(--brzeg, rgba(0,0,0,.12)), 0 10px 18px -14px rgba(29,28,34,.5); }
.ks-gora { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ks-tytul { font-size: 23px; line-height: 1.15; }
.ks-emoji, .kp-emoji { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 25px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.98), rgba(255,255,255,.62) 55%, rgba(255,255,255,.34) 100%);
  box-shadow: inset 0 -3px 6px rgba(29,28,34,.08), inset 0 2px 1px rgba(255,255,255,.9), 0 8px 14px -8px rgba(29,28,34,.45);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.ks-emoji, .kp-emoji { text-shadow: 0 3px 4px rgba(29,28,34,.18); }
.ks-opis { font-size: 14px; opacity: .8; margin-top: 4px; max-width: 78%; }
.ks-dol { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.ks-dol small { color: inherit; opacity: .75; }
.gwiazdki { letter-spacing: 2px; font-size: 14px; }
.gw-puste { opacity: .45; }

.kolor-lila { background-color: var(--lila); --tlo-karty: var(--lila); --brzeg: #A7A0EA; } .kolor-rozowy { background-color: var(--rozowy); --tlo-karty: var(--rozowy); --brzeg: #DFA2D3; } .kolor-zolty { background-color: var(--zolty); --tlo-karty: var(--zolty); --brzeg: #D6CD5C; }
.kolor-mietowy { background-color: var(--mietowy); --tlo-karty: var(--mietowy); --brzeg: #98D6BA; } .kolor-zielony { background-color: var(--zielony); --tlo-karty: var(--zielony); color: #fff; --brzeg: #1E6B3C; } .kolor-brzoskwinia { background-color: var(--brzoskwinia); --tlo-karty: var(--brzoskwinia); --brzeg: #E5B57B; }
.kolor-niebieski { background-color: var(--niebieski); --tlo-karty: var(--niebieski); --brzeg: #92C6E0; } .kolor-krem { background-color: var(--krem); --tlo-karty: var(--krem); --brzeg: #D8CA92; }
.kolor-zielony small, .kolor-zielony .maly { color: rgba(255,255,255,.8); }

/* nagłówek działu / pakietu */
.naglowek-dzialu { position: relative; border-radius: var(--r); padding: 54px 20px 20px; margin-bottom: 16px; box-shadow: var(--cien); }
.naglowek-dzialu h1 { font-size: 30px; line-height: 1.12; margin: 6px 0 8px; }
.naglowek-dzialu p { margin: 0; opacity: .85; }
.wstecz { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.6); display: grid; place-items: center; font-size: 19px; cursor: pointer; color: var(--tusz); }
.kat-etykieta { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: inherit; opacity: .7; }
.np-staty { display: flex; gap: 14px; margin-top: 12px; font-size: 14px; }
.np-staty b { font-size: 18px; }
.sekcja { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--szary); font-weight: 500; margin: 22px 2px 10px; }

.lista-pakietow, .lista-art { display: flex; flex-direction: column; gap: 10px; }
.karta-pakietu, .karta-art, .profil-kafel { background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 45%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), 0 5px 0 var(--brzeg, rgba(0,0,0,.12)), 0 18px 24px -18px rgba(29,28,34,.5);
  transition: transform .15s, box-shadow .15s; }
.karta-pakietu:active, .karta-art:active, .profil-kafel:active { transform: translateY(4px);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), 0 1px 0 var(--brzeg, rgba(0,0,0,.12)), 0 8px 14px -12px rgba(29,28,34,.5); }
.karta-pakietu { display: block; padding: 16px; border-radius: var(--r); margin-bottom: 4px; }
.kp-gora { display: flex; gap: 12px; align-items: center; }
.kp-tytul { font-size: 20px; line-height: 1.18; }
.kp-opis { font-size: 14px; opacity: .8; margin: 8px 0 0; }
.kp-postep { margin-top: 10px; }
.kp-pasek { position: relative; height: 7px; border-radius: 5px; background: rgba(255,255,255,.55); overflow: hidden; margin-bottom: 4px; }
.kp-pasek span { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(29,28,34,.25); border-radius: 5px; }
.kp-pasek span.zn { background: var(--tusz); }
.kolor-zielony .kp-pasek span.zn { background: #fff; }

.karta-art { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; margin-bottom: 4px; }
.ka-emoji { font-size: 28px; width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.55); display: grid; place-items: center; flex: none; }
.ka-txt { display: flex; flex-direction: column; }
.ka-tytul { font-size: 18px; line-height: 1.2; }
.ka-meta { opacity: .8; }

/* lista pozycji pakietu */
.lista-pozycji { list-style: none; padding: 0; margin: 0; background: var(--karta); border-radius: 18px; border: 1px solid var(--linia); }
.pozycja { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--linia); }
.pozycja:last-child { border-bottom: 0; }
.poz-obraz { font-size: 24px; }
.poz-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.poz-txt b { font-weight: 500; }
.poz-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--linia); color: var(--szary); white-space: nowrap; }
.poz-status.uczy { background: var(--zolty); color: var(--tusz); }
.poz-status.zna { background: var(--mietowy); color: var(--tusz); }
.poz-status.opan { background: var(--zielony); color: #fff; }

/* przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 12px 20px; border-radius: 16px; border: 0; cursor: pointer; font-size: 16px; font-weight: 500; text-align: center; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.glowny { background: var(--tusz); color: #fff; }
.btn.ciemny { background: var(--tusz); color: #fff; }
.btn.jasny { background: var(--karta); border: 1px solid var(--linia); }
.btn.zielony { background: var(--ok); color: #fff; }
.btn.czerwony { background: var(--zle); color: #fff; }
.btn.pomar { background: #E9952C; color: #fff; }
.btn.niebieski { background: #3C7DD9; color: #fff; }
.btn.szeroki { width: 100%; }
.przyciski { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.przyciski .btn { flex: 1; min-width: 150px; }
.audio-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--linia); background: var(--karta); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 15px; vertical-align: middle; }
.audio-btn.maly { padding: 4px 8px; font-size: 13px; }
.audio-btn.wl { background: var(--zolty); }
.audio-opis { font-size: 12px; font-weight: 600; color: var(--szary); }
.chip { border: 1px solid var(--linia); background: var(--karta); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.chip.akt { background: var(--tusz); color: #fff; border-color: var(--tusz); }
.chip.duzy { font-size: 22px; padding: 4px 8px; }
.chipy { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* wybór profilu */
.profile-wybor h1 { font-size: 38px; line-height: 1.1; text-align: center; margin: 16px 0 26px; }
.profile-wybor h1 em { color: var(--oliwka); }
.profile-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profil-kafel { border: 0; border-radius: var(--r); padding: 22px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.profil-kafel b { font-size: 20px; font-weight: 500; }

/* ---------------- lekcja ---------------- */
.lekcja { position: fixed; inset: 0; z-index: 50; background: var(--tlo); display: flex; flex-direction: column; padding-top: var(--gora); }
.lekcja-gora { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 620px; width: 100%; margin: 0 auto; }
.zamknij { width: 38px; height: 38px; border: 0; background: none; font-size: 22px; color: var(--szary); cursor: pointer; }
.postep { flex: 1; height: 14px; border-radius: 8px; background: var(--linia); overflow: hidden; }
.postep-wew { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #8AD9A8, var(--ok)); transition: width .4s; }
.cw-pole { flex: 1; overflow-y: auto; padding: 8px 16px 160px; max-width: 620px; width: 100%; margin: 0 auto; }
.cw-polecenie { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--szary); margin: 8px 0 14px; font-weight: 500; }
.cw-tekst { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 18px; }
.cw-en, .cw-pl { font-family: 'Libre Baskerville', Georgia, serif; font-size: 26px; line-height: 1.25; }
.cw-pl.maly { font-family: Jost, sans-serif; font-size: 15px; color: var(--szary); }
.cw-en.zdanie { font-size: 23px; }
.duze { font-size: 29px; }
.luka { display: inline-block; min-width: 70px; border-bottom: 3px solid var(--tusz); margin: 0 4px; color: transparent; }
.podpowiedz { font-size: 14px; color: var(--szary); background: var(--karta); border-radius: 10px; padding: 4px 10px; }
.cw-sluchaj { display: flex; align-items: center; gap: 12px; margin: 10px 0 22px; }
.duzy-glosnik { width: 96px; height: 96px; border-radius: 28px; border: 0; background: var(--lila); font-size: 42px; cursor: pointer; box-shadow: var(--cien); }
.duzy-glosnik:active { transform: scale(.95); }
.opcje { display: flex; flex-direction: column; gap: 10px; }
.opcja { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--linia); border-bottom-width: 4px; background: var(--karta); cursor: pointer; font-size: 18px; }
.opcja-nr { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--linia); display: grid; place-items: center; font-size: 13px; color: var(--szary); flex: none; }
.opcja.wyb { border-color: #8AA8F0; background: #EAF0FF; }
.opcja.ok { border-color: var(--ok); background: var(--ok-tlo); }
.opcja.zle { border-color: var(--zle); background: var(--zle-tlo); }
.opcje .opcja-txt { flex: 1; }
.opcje:has(.opcja-txt:only-child) {}
.kafelki { display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; padding: 8px 0; }
.kafelki.odp { border-bottom: 2px solid var(--linia); margin-bottom: 16px; }
.kafelek { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--linia); border-bottom-width: 4px; background: var(--karta); font-size: 18px; cursor: pointer; }
.wpis { width: 100%; padding: 16px; border-radius: 16px; border: 2px solid var(--linia); background: var(--karta); font-size: 20px; outline: none; }
.wpis:focus { border-color: #8AA8F0; }
.wpis.ok { border-color: var(--ok); background: var(--ok-tlo); }
.wpis.zle { border-color: var(--zle); background: var(--zle-tlo); }

.intro { display: flex; flex-direction: column; gap: 10px; }
.intro-obraz { font-size: 72px; line-height: 1; }
.intro-en { font-family: 'Libre Baskerville', Georgia, serif; font-size: 33px; line-height: 1.12; letter-spacing: -.015em; }
.intro-audio { display: flex; gap: 8px; flex-wrap: wrap; }
.intro-pl { font-size: 22px; }
.intro-uwaga, .rozw-uwaga { font-size: 15px; background: var(--krem); border-radius: 12px; padding: 8px 12px; }
.intro-przyklady { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.przyklad { background: var(--karta); border: 1px solid var(--linia); border-radius: 14px; padding: 10px 12px; }
.przyklad-en { font-size: 17px; }
.przyklad-pl { font-size: 14px; color: var(--szary); }
.gram-zasady p { margin: 6px 0; }
.gram-karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: 16px; margin: 14px 0; }
.gram-karta h2 { font-size: 23px; margin: 0 0 8px; }
.fiszka { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: 22px 18px; min-height: 180px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.fiszka-odp { border-top: 1px dashed var(--linia); padding-top: 12px; }
.nagrywanie { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn.mikrofon { background: var(--rozowy); }
.btn.mikrofon.rec { background: var(--zle); color: #fff; animation: plomien 1s infinite; }
.rozw { display: flex; flex-direction: column; gap: 4px; }
.rozw-en { font-size: 19px; font-weight: 500; }
.rozw-pl { font-size: 15px; }
.rozw-przyklad { font-size: 14px; opacity: .8; }

.stopka { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 14px 16px calc(var(--dol) + 14px); background: var(--tlo); border-top: 1px solid var(--linia); display: flex; flex-direction: column; gap: 10px; }
.stopka > * { max-width: 588px; width: 100%; margin: 0 auto; }
.stopka.ok { background: var(--ok-tlo); border-color: transparent; }
.stopka.zle { background: var(--zle-tlo); border-color: transparent; }
.stopka-tytul { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.stopka.ok .stopka-tytul { color: var(--ok); }
.stopka.zle .stopka-tytul { color: var(--zle); }
.stopka.oceny { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.stopka.oceny > * { flex: 1; min-width: 70px; max-width: 150px; margin: 0; }
.btn.ocena { flex-direction: column; gap: 0; padding: 8px 6px; font-size: 14px; min-height: 58px; }
.btn.ocena small { color: rgba(255,255,255,.85); font-size: 11px; }

.podsum { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; padding-top: 30px; }
.podsum-emoji, .pusto-emoji { font-size: 76px; animation: wskok .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes wskok { from { transform: scale(.3); opacity: 0; } }
.podsum h2, .pusto h2 { font-size: 30px; margin: 0; }
.podsum-kafle, .staty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.staty { grid-template-columns: 1fr 1fr; }
.kafel { border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.kafel b { font-size: 26px; font-weight: 600; }
.kafel.zolty { background: var(--zolty); } .kafel.mietowy { background: var(--mietowy); } .kafel.rozowy { background: var(--rozowy); } .kafel.lila { background: var(--lila); }
.kafel small { color: rgba(29,28,34,.65); }
.podsum-cel { font-weight: 500; }
.podsum-odznaki { width: 100%; }
.pusto { text-align: center; padding-top: 40px; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* liga, odznaki, wykres */
.liga { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.liga-wiersz { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--karta); border: 1px solid var(--linia); }
.liga-wiersz.ja { background: var(--zolty); border-color: transparent; }
.liga-miejsce { width: 30px; height: 30px; flex: none; font-size: 16px; display: grid; place-items: center; border-radius: 50%; color: var(--szary); }
.liga-miejsce.podium { color: var(--tusz); background: #fff; box-shadow: inset 0 0 0 1.5px var(--linia); }
.liga-miejsce.m1 { background: var(--zolty); box-shadow: inset 0 0 0 1.5px #D6CD5C; }
.liga-avatar { font-size: 26px; }
.liga-imie { flex: 1; font-weight: 500; }
.wykres { display: flex; gap: 6px; align-items: flex-end; height: 140px; padding: 10px; background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; }
.wykres-kol { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.wykres-slup { width: 70%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: var(--lila); }
.wykres-slup.cel { background: var(--zielony); }
.wykres-kol.dzis small { color: var(--tusz); font-weight: 600; }
.wykres-wart { font-size: 11px; color: var(--szary); }
.odznaki { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.odznaka { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 8px; border-radius: 18px; background: var(--karta); border: 1px solid var(--linia); opacity: .5; filter: grayscale(1); }
.odznaka.zdobyta { opacity: 1; filter: none; background: var(--krem); border-color: transparent; }
.odznaka-emoji { font-size: 34px; }
.uwaga-box { background: var(--krem); border-radius: 14px; padding: 10px 14px; font-size: 14px; }

/* profil */
.profil-gora { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.profil-gora h1 { font-size: 33px; margin: 0; line-height: 1.1; }
.profil-duzy-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--rozowy); display: grid; place-items: center; font-size: 42px; }
.ust { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: 4px 16px 14px; margin-top: 14px; }
.ust .sekcja { margin-top: 14px; }
.wiersz { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linia); }
.wiersz:last-child { border-bottom: 0; }
.wiersz input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--zielony); }
.liczba { display: flex; align-items: center; gap: 10px; }
.wybor-cel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cel-btn { border: 2px solid var(--linia); background: var(--tlo); border-radius: 16px; padding: 10px 6px; display: flex; flex-direction: column; cursor: pointer; }
.cel-btn.akt { border-color: var(--tusz); background: var(--zolty); }
.pole { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linia); background: var(--tlo); margin: 6px 0; }
.pole.krotkie { width: auto; max-width: 180px; margin: 0; }
.ust .btn.szeroki { margin-top: 10px; }
.stopka-app { text-align: center; margin-top: 20px; }

/* ---------------- artykuł ---------------- */
.ekran-art { padding-bottom: calc(var(--dol) + 40px); }
.art { position: relative; border-radius: var(--r); padding: 56px 20px 20px; box-shadow: var(--cien); }
.art-gora { position: absolute; top: 12px; left: 12px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.art-gora .wstecz { position: static; }
.art-meta { font-size: 13px; opacity: .75; }
.art-emoji { font-size: 44px; }
.art-tytul { font-size: 29px; line-height: 1.15; margin: 8px 0 6px; }
.art-tytul-pl { opacity: .75; margin-bottom: 12px; }
.art-legenda { font-size: 13px; margin-bottom: 12px; line-height: 2; }
.art-tekst { padding: 8px 4px; }
.akapit-blok { margin: 14px 0 18px; padding: 6px 8px; border-radius: 14px; transition: background .3s; }
.akapit-blok.czytany { background: var(--krem); }
.akapit { font-size: 20px; line-height: 1.7; margin: 0 0 6px; }
.akapit-pl { font-size: 15px; color: var(--szary); margin: 0 0 6px; border-left: 3px solid var(--linia); padding-left: 10px; }
.akapit-narz { display: flex; gap: 6px; }
.sl { cursor: pointer; border-radius: 5px; padding: 1px 0; }
.sl:hover { background: rgba(201,197,247,.45); }
.sl.zazn { background: var(--lila); }
.fr { cursor: pointer; border-radius: 6px; padding: 1px 2px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fr-idiom { text-decoration-color: #D14FB7; background: rgba(246,199,238,.45); }
.fr-phrasal { text-decoration-color: #3C7DD9; background: rgba(192,228,245,.55); }
.fr-kolokacja, .fr-zwrot { text-decoration-color: #2F9B5A; background: rgba(197,239,220,.6); }
.fr-konstrukcja { text-decoration-color: #C58A00; background: rgba(244,238,144,.6); }
.fr.zazn { outline: 2px solid var(--tusz); }
.art-koniec { padding: 10px 4px 30px; }
.arkusz-tlo { position: fixed; inset: 0; z-index: 60; background: rgba(29,28,34,.25); opacity: 0; pointer-events: none; transition: opacity .2s; }
.arkusz-tlo.wid { opacity: 1; pointer-events: auto; }
.arkusz { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 620px; margin: 0 auto; background: var(--karta); border-radius: 26px 26px 0 0; padding: 10px 20px calc(var(--dol) + 22px); transform: translateY(110%); transition: transform .25s ease; box-shadow: 0 -10px 40px rgba(0,0,0,.15); max-height: 75dvh; overflow-y: auto; }
.arkusz.wid { transform: none; }
.arkusz-uchwyt { width: 44px; height: 5px; border-radius: 3px; background: var(--linia); margin: 0 auto 12px; }
.ark { display: flex; flex-direction: column; gap: 10px; }
.ark-typ { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--szary); }
.ark-gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ark-en { font-size: 27px; line-height: 1.15; }
.ark-baza { font-size: 13px; color: var(--szary); }
.ark-pl { font-size: 20px; }
.ark-uwaga, .ark-zasada { font-size: 15px; background: var(--krem); border-radius: 12px; padding: 10px 12px; }
.ark-zdanie { font-size: 14px; color: var(--szary); border-left: 3px solid var(--linia); padding-left: 10px; }

@media (min-width: 700px) {
  .tytul { font-size: 52px; }
  .stos { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.karta-stos .ks-emoji { width: 48px; height: 48px; font-size: 24px; }
.karta-stos .ks-tytul { font-size: 25px; }
.karta-stos .ks-opis { font-size: 15px; }

/* lekcja wyrosła z karty działu: tło w kolorze karty, treść pojawia się płynnie */
.lekcja.w-kolorze { background-color: var(--tlo-karty); background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 45%); }
.lekcja.w-kolorze .stopka:not(.ok):not(.zle) { background-color: var(--tlo-karty); border-top-color: rgba(29,28,34,.08); }
.lekcja.w-kolorze .postep { background: rgba(255,255,255,.55); }
.lekcja-tytul { max-width: 620px; width: 100%; margin: -4px auto 0; padding: 0 18px; font-size: 19px; opacity: .75; }
.lekcja.z-karty > * { animation: pojaw .32s ease both; }
@keyframes pojaw { from { opacity: 0; transform: translateY(8px); } }
.karta-lot { pointer-events: none; box-shadow: 0 30px 60px -20px rgba(29,28,34,.45) !important; overflow: hidden; }
.karta-stos { cursor: pointer; }
a.ks-emoji { color: inherit; }

/* ilustracje 3D z arkuszy: wychodzą lekko poza bąbel, mają własny cień */
.ks-emoji img, .kp-emoji img { width: 132%; height: 132%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(29,28,34,.18)); }
.ks-emoji:has(img), .kp-emoji:has(img) { overflow: visible; }
.karta-stos .ks-emoji { width: 54px; height: 54px; }
.nagl-ikona { position: absolute; top: 8px; right: 10px; width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(29,28,34,.2)); pointer-events: none; }
.naglowek-dzialu:has(.nagl-ikona) h1, .naglowek-dzialu:has(.nagl-ikona) .kat-etykieta { padding-right: 96px; display: block; }

/* ---------- osoba: inicjał w kółku (bez awatarów-obrazków i bez maskotki — Wojtek 2026-10-24) ---------- */
.inicjal { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--ini-tlo, #fff); color: var(--tusz);
  font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; line-height: 1; letter-spacing: 0; box-shadow: inset 0 0 0 1.5px rgba(29,28,34,.12); }
.avatar { background: none; padding: 0; border-radius: 50%; }
.avatar .inicjal { width: 44px; height: 44px; font-size: 20px; box-shadow: inset 0 0 0 1.5px rgba(29,28,34,.12), 0 3px 0 rgba(29,28,34,.14); }
.avatar:active .inicjal { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(29,28,34,.12), 0 1px 0 rgba(29,28,34,.14); }
.profil-duzy-avatar { width: 76px; height: 76px; font-size: 34px; }
.liga-avatar { width: 38px; height: 38px; font-size: 17px; }
.nav-ik .nav-inicjal { width: 26px; height: 26px; font-size: 13px; }
.nav-ik { display: grid; place-items: center; height: 26px; }

.tytul-wiersz { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tytul-wiersz .tytul { flex: 1; min-width: 0; }

.ikona-cw { width: 30px; height: 30px; object-fit: contain; flex: none; }
.cw-polecenie { display: flex; align-items: center; gap: 8px; }

.odznaka-img { width: 76px; height: 76px; object-fit: contain; display: block; }
.odznaka-emoji { display: grid; place-items: center; }
.podsum-odznaki .odznaka-img { width: 90px; height: 90px; }

.art-obraz { display: block; width: calc(100% + 40px); margin: -56px -20px 12px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r) var(--r) 0 0; }
.art:has(.art-obraz) .art-gora { z-index: 2; }
.ka-obraz { width: 78px; height: 58px; object-fit: cover; border-radius: 12px; flex: none; box-shadow: 0 4px 10px -6px rgba(29,28,34,.4); }

.wiersz small.pod { display: block; font-size: 12px; }

/* wybór profilu: kafelki „rzucone” nierówno — obrót, przesunięcie kolumny, awatar wystający ponad kafelek */
.profile-siatka { gap: 26px 14px; padding: 36px 4px 30px; align-items: start; }
.profil-kafel { position: relative; padding: 66px 12px 18px; transform: rotate(var(--r, 0deg)); border-radius: 30px 26px 30px 14px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cpath d='M-10 120 C 30 80, 60 130, 95 100 S 150 40, 120 20 C 100 5, 80 40, 115 55 C 150 70, 190 40, 215 60' fill='none' stroke='white' stroke-opacity='.7' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 45%);
  background-repeat: no-repeat; background-size: 120% auto, auto; background-position: -10px 100%, 0 0; }
.profil-kafel:nth-child(1) { --r: -3deg; border-radius: 34px 24px 28px 14px; }
.profil-kafel:nth-child(2) { --r: 2.4deg; margin-top: 34px; border-radius: 24px 34px 14px 30px; }
.profil-kafel:nth-child(3) { --r: 2deg; margin-top: -6px; border-radius: 26px 16px 34px 26px; }
.profil-kafel:nth-child(4) { --r: -2.6deg; margin-top: 26px; border-radius: 16px 30px 26px 34px; }
.profil-kafel:active { transform: rotate(0deg) scale(.96); }
.profil-avatar { position: absolute; top: -34px; left: 50%; width: 84px; height: 84px; margin: 0; font-size: 38px;
  transform: translateX(-50%) rotate(calc(var(--r, 0deg) * -1)); box-shadow: 0 4px 0 rgba(29,28,34,.1), 0 14px 18px -10px rgba(29,28,34,.3); }
.profil-kafel b { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.profil-kafel small { background: rgba(255,255,255,.62); border-radius: 999px; padding: 2px 11px; margin-top: 4px; color: rgba(29,28,34,.7); }

/* kafelki i wiersze, które po dotknięciu czytają nagranie */
.klik { cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform .12s, background-color .12s; }
.przyklad.klik:active, .pozycja.klik:active { transform: scale(.98); background-color: rgba(255,255,255,.95); }
.intro-en.klik:active, .rozw-en.klik:active { opacity: .7; }

/* lekcja gramatyki krok po kroku: jedna zasada na ekran, duży znacznik, podświetlone słowo w przykładzie */
.lekcja:has(.gram-lekcja) .lekcja-tytul { display: none; }
.gram-lekcja { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.gram-gora { display: flex; align-items: flex-end; justify-content: space-between; }
.gram-kropki { display: flex; gap: 8px; padding-bottom: 10px; }
.gram-kropki span { width: 12px; height: 12px; border-radius: 50%; background: rgba(29,28,34,.15); transition: all .25s; }
.gram-kropki span.byla { background: rgba(29,28,34,.4); }
.gram-kropki span.akt { width: 30px; border-radius: 6px; background: var(--tusz); }
.gram-krok { position: relative; border-radius: 28px; padding: 22px 20px 20px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), 0 6px 0 var(--brzeg, rgba(0,0,0,.12)), 0 22px 30px -20px rgba(29,28,34,.5);
  background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 50%); animation: krok-wjazd .35s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes krok-wjazd { from { opacity: 0; transform: translateX(26px) rotate(1.5deg); } }
.gram-klucz { display: inline-block; font-size: 46px; line-height: 1.05; background: rgba(255,255,255,.75); border-radius: 18px; padding: 6px 18px 10px; margin-bottom: 12px; box-shadow: 0 4px 0 rgba(29,28,34,.08); }
.gram-tekst { font-size: 21px; line-height: 1.45; margin: 0 0 16px; }
.gram-tekst b { background: rgba(255,255,255,.6); border-radius: 6px; padding: 0 4px; }
.gram-przyklad { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.88); border-radius: 18px; padding: 14px 16px; margin-top: 10px; box-shadow: 0 3px 0 rgba(29,28,34,.06); }
.gram-przyklad:active { transform: scale(.98); }
.gp-glosnik { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--zolty); display: grid; place-items: center; font-size: 20px; }
.gp-en { font-size: 20px; line-height: 1.35; }
.gp-en mark { background: var(--zolty); border-radius: 6px; padding: 0 4px; font-weight: 600; color: var(--tusz); box-shadow: 0 2px 0 rgba(29,28,34,.12); }
.gram-krok.kolor-zolty .gp-en mark, .gram-krok.kolor-zolty .gp-glosnik { background: var(--lila); }
.gp-pl { font-size: 15px; color: var(--szary); margin-top: 2px; }
.gram-kroki-lista { display: flex; flex-direction: column; gap: 16px; margin: 14px 0; }
.gram-klucz.dlugi { font-size: 30px; padding: 8px 16px 10px; }

/* własne okienko potwierdzenia (zamiast systemowego) */
.okno-tlo { position: fixed; inset: 0; z-index: 90; background: rgba(29,28,34,.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.okno-tlo.wid { opacity: 1; }
.okno { position: fixed; left: 12px; right: 12px; bottom: calc(var(--dol) + 12px); z-index: 91; max-width: 460px; margin: 0 auto; background: var(--karta);
  border-radius: 30px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 6px 0 var(--linia), 0 30px 60px -20px rgba(29,28,34,.45);
  transform: translateY(120%); transition: transform .28s cubic-bezier(.2,.9,.3,1.1); }
.okno.wid { transform: none; }
.okno-tytul { font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.okno-tekst { color: var(--szary); margin: 0 0 18px; font-size: 16px; }
.okno-przyciski { display: flex; gap: 10px; }
.okno-przyciski .btn { flex: 1; }

/* quiz po artykule */
.quiz-blok { display: grid; grid-template-columns: 1fr; gap: 6px 12px; align-items: center; background: var(--karta); border: 1px solid var(--linia); border-radius: 24px; padding: 16px; box-shadow: 0 5px 0 var(--linia); }
.quiz-blok .btn { grid-column: 1 / -1; margin-top: 6px; }
.quiz-blok-txt b { font-size: 20px; font-weight: 400; display: block; }
.quiz-info { margin: 2px 0 0; color: var(--szary); font-size: 14px; }
.quiz-pytanie .cw-en { font-size: 22px; }

/* „dotknij obrazka”: siatka 2×2, duże emoji z polskim podpisem */
.opcje.siatka-obrazkow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.siatka-obrazkow .opcja { min-width: 0; flex-direction: column; justify-content: center; text-align: center; padding: 16px 10px; min-height: 128px; gap: 4px; }
.siatka-obrazkow .opcja-nr { display: none; }
.siatka-obrazkow .opcja-txt { font-size: 17px; line-height: 1.25; white-space: pre-line; }
.siatka-obrazkow .opcja-txt::first-line { font-size: 46px; line-height: 1.2; }

/* ikony SVG: głośnik i tempo */
.ik { display: inline-grid; place-items: center; line-height: 0; }
.ik svg { width: 20px; height: 20px; }
.audio-btn { color: var(--tusz); min-width: 40px; min-height: 36px; justify-content: center; }
.audio-btn.maly .ik svg { width: 17px; height: 17px; }
.audio-btn.wl { color: var(--tusz); }
.duzy-glosnik { color: var(--tusz); display: grid; place-items: center; }
.duzy-glosnik .ik svg { width: 46px; height: 46px; }
.duzy-glosnik:active .ik { transform: scale(.9); }
.gp-glosnik { color: var(--tusz); }
.gp-glosnik .ik svg { width: 22px; height: 22px; }
.ark-gora .audio-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--zolty); border: 0; }
.ark-gora .audio-btn .ik svg { width: 24px; height: 24px; }

/* zestaw ikon interfejsu */
.nav-ik .ik svg { width: 24px; height: 24px; }
.nav a.akt .nav-ik .ik { color: var(--tusz); }
.ikona-btn .ik svg { width: 20px; height: 20px; }
.ikona-btn.maly .ik svg { width: 15px; height: 15px; }
.wstecz .ik svg { width: 20px; height: 20px; }
.zamknij .ik svg { width: 24px; height: 24px; }
.gra-ik { filter: none !important; opacity: 1 !important; display: grid; place-items: center; }
.gra-ik .ik svg { width: 24px; height: 24px; }
.gra-el:not(.plonie) .ik-plomien { filter: grayscale(1); opacity: .45; }
.pierscien-s .ik svg { width: 15px; height: 15px; }
.btn .ik svg, .chip .ik svg { width: 18px; height: 18px; }
.chip .ik svg { width: 14px; height: 14px; }
.chip { display: inline-flex; align-items: center; gap: 4px; }
.liga-seria { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px; }
.liga-seria .ik svg, .z-ikona .ik svg { width: 18px; height: 18px; }
.z-ikona { display: inline-flex; align-items: center; gap: 2px; }

.podpowiedz-audio { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(29,28,34,.12); background: rgba(255,255,255,.7); color: var(--tusz); font-size: 15px; cursor: pointer; }
.podpowiedz-audio .ik svg { width: 18px; height: 18px; }
.podpowiedz-audio:active { transform: scale(.96); }

/* kartkówki ze zdjęć podręcznika (sekcja „Przed kartkówką”, bloki, wynik) */
.termin { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.62); border-radius: 999px; padding: 2px 10px; font-weight: 500; margin-bottom: 4px; }
.termin.pilne { background: var(--tusz); color: #fff; }
.lista-pakietow.kartkowki { margin-bottom: 4px; }
.blok-nr { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background-image: radial-gradient(circle at 35% 28%, rgba(255,255,255,.9), rgba(255,255,255,.4) 60%, rgba(255,255,255,.15) 100%);
  box-shadow: inset 0 -3px 6px rgba(29,28,34,.08), 0 6px 10px -7px rgba(29,28,34,.45); }
.kartkowka-tytul { font-size: 30px; line-height: 1.12; margin: 0; }
.kartkowka-polecenie { font-size: 18px; margin: 0; }
.wynik-duzy { font-size: 60px; line-height: 1; }
.pozycja.blad { border-left: 3px solid var(--zle); }
.wyslij { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.wyslij-status { margin: 0; font-size: 14px; color: var(--ok); font-weight: 500; }
.wyslij-kopiuj { min-height: 140px; }
.podsum .przyciski.kolumna { flex-direction: column; width: 100%; }
.podsum .sekcja { align-self: flex-start; margin: 14px 2px 0; }
.podsum .lista-pozycji { width: 100%; text-align: left; }
.kafel.bialy { background: rgba(255,255,255,.75); }
/* bez maskotki: podsumowania zaczynają się nagłówkiem, więc dostają więcej oddechu u góry */
.podsum { padding-top: 60px; }

/* gwiazdki wyniku kartkówki (ikony SVG); gwiazdki postępu na kartach zostają stonowane */
.gwiazdki-wynik { display: inline-flex; gap: 2px; white-space: nowrap; }
.gwiazdki-wynik .ik svg { width: 18px; height: 18px; }
.gwiazdki-wynik .pelna { color: #E9B400; }
.gwiazdki-wynik .pusta { color: rgba(29,28,34,.18); }
.gwiazdki-wynik.duze { gap: 6px; }
.gwiazdki-wynik.duze .ik svg { width: 40px; height: 40px; }

/* ścieżka kursu z podręcznika */
.sciezka-wrap { display: flex; flex-direction: column; gap: 26px; }
.unit-naglowek { border-radius: 26px; padding: 18px 20px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), 0 6px 0 var(--brzeg, rgba(0,0,0,.12)), 0 20px 26px -20px rgba(29,28,34,.5);
  background-image: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 50%); }
.unit-naglowek h2 { font-size: 27px; margin: 2px 0 10px; line-height: 1.1; }
.unit-postep { display: flex; align-items: center; gap: 10px; }
.unit-postep .kp-pasek { flex: 1; margin: 0; height: 9px; }
.droga { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; position: relative; }
.krok { display: flex; align-items: center; gap: 14px; transform: translateX(var(--x, 0)); }
.krok-kolko { position: relative; width: 74px; height: 74px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 7px 0 var(--brzeg, rgba(0,0,0,.15)), 0 16px 20px -14px rgba(29,28,34,.5);
  background-image: radial-gradient(circle at 35% 28%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%); transition: transform .12s; }
.krok-kolko:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 2px 0 var(--brzeg, rgba(0,0,0,.15)); }
.krok-kolko img { width: 44px; height: 44px; object-fit: contain; }
.krok:not(.gotowy):not(.aktualny):not(.powtorka) .krok-kolko { filter: saturate(.55); opacity: .85; }
.krok.aktualny .krok-kolko { outline: 4px solid var(--tusz); outline-offset: 4px; animation: puls 1.8s ease-in-out infinite; }
@keyframes puls { 50% { outline-offset: 8px; } }
.krok-ptaszek { position: absolute; right: -4px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 0 #1E6B3C; }
.krok-ptaszek .ik svg { width: 15px; height: 15px; stroke-width: 3; }
.krok-opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.krok-opis b { font-weight: 500; font-size: 16px; line-height: 1.2; }
.krok-start { min-height: 38px; padding: 6px 18px; margin-top: 6px; align-self: flex-start; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .krok.aktualny .krok-kolko { animation: none; } }
.krok-opis .termin { align-self: flex-start; margin-bottom: 2px; }

/* mówienie z rozpoznawaniem */
.mowa { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.mowa-mik { width: 104px; height: 104px; border-radius: 50%; border: 0; cursor: pointer; background: var(--rozowy); color: var(--tusz); display: grid; place-items: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 7px 0 #DFA2D3, 0 18px 24px -16px rgba(29,28,34,.5); }
.mowa-mik .ik svg { width: 48px; height: 48px; }
.mowa-mik.rec { background: var(--zle); color: #fff; box-shadow: 0 0 0 0 rgba(214,69,93,.5); animation: mowa-puls 1.2s infinite; }
@keyframes mowa-puls { 70% { box-shadow: 0 0 0 22px rgba(214,69,93,0); } }
.mowa-mik:disabled { opacity: .5; }
.mowa-status { font-size: 15px; color: var(--szary); text-align: center; min-height: 22px; }
.mowa-wynik { width: 100%; }
.mowa-zdanie { font-size: 22px; line-height: 1.5; background: var(--karta); border-radius: 16px; padding: 12px 14px; border: 1px solid var(--linia); }
.mowa-zdanie .tak { color: var(--ok); font-weight: 500; }
.mowa-zdanie .nie { color: var(--zle); text-decoration: underline wavy; text-underline-offset: 4px; }
.mowa-uslyszane { font-size: 13px; color: var(--szary); margin-top: 6px; }
.mowa-uslyszane i { font-style: normal; color: var(--tusz); }
.mowa-narz { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mowa-narz .podpowiedz-audio { margin-top: 0; }

/* odpowiedź nauczycielowi i próba generalna */
.nauczyciel { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 14px; }
.dymek { flex: 1; background: var(--karta); border: 1px solid var(--linia); border-radius: 20px 20px 20px 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 0 var(--linia); }
.dymek b { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.3; }
.mowa-czas { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--szary); min-height: 18px; }
.wzor { margin-top: 10px; background: rgba(255,255,255,.65); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.wzor .klik { font-size: 18px; display: flex; align-items: center; gap: 6px; }
.mowa-zdanie mark { border-radius: 5px; padding: 0 3px; color: var(--tusz); }
.m-slowko { background: var(--mietowy); } .m-lacznik { background: var(--zolty); } .m-czestosc { background: var(--lila); }
.proba-opis { margin: 0 0 6px; }
.proba-tematy { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.proba-tematy li { background: var(--karta); border: 1px solid var(--linia); border-radius: 999px; padding: 5px 12px; font-size: 14px; display: inline-flex; align-items: center; gap: 2px; }
.proba-tematy.wynik li.tak { background: var(--ok-tlo); border-color: transparent; color: var(--ok); }
.proba-tematy.wynik li.nie { background: var(--zle-tlo); border-color: transparent; color: var(--zle); }
.proba-tematy .ik svg { width: 15px; height: 15px; }
.proba-raport { text-align: left; align-items: stretch; }
.proba-raport > h2, .proba-raport > p { align-self: center; text-align: center; }
.proba-jezyk, .proba-rady { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* ================= mocniejsze 3D: „klocki” z grubą dolną krawędzią, połyskiem i wciśnięciem ================= */
:root { --polysk: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); --klocek-cien: 0 16px 22px -16px rgba(29,28,34,.45); }
.btn, .opcja, .kafelek, .audio-btn, .duzy-glosnik, .chip, .ikona-btn, .wstecz, .cta, .mowa-mik, .zakladka { transition: transform .1s ease, box-shadow .1s ease; -webkit-tap-highlight-color: transparent; }

/* przyciski */
.btn { border-radius: 18px; background-image: var(--polysk); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), 0 6px 0 var(--btn-brzeg, #000), var(--klocek-cien); margin-bottom: 6px; }
.btn.glowny, .btn.ciemny { --btn-brzeg: #000; background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%); }
.btn.jasny { --btn-brzeg: #D9D2C1; border: 2px solid var(--linia); box-shadow: inset 0 1.5px 0 #fff, 0 6px 0 var(--btn-brzeg), var(--klocek-cien); }
.btn.zielony { --btn-brzeg: #1E6B3C; } .btn.czerwony { --btn-brzeg: #A32C40; } .btn.pomar { --btn-brzeg: #B56E15; } .btn.niebieski { --btn-brzeg: #275AA3; }
.btn.mikrofon { --btn-brzeg: #DFA2D3; }
.btn:not(:disabled):active { transform: translateY(5px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), 0 1px 0 var(--btn-brzeg, #000); }
.btn:disabled { box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.cta { background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%); box-shadow: 0 7px 0 #000, 0 22px 26px -18px rgba(29,28,34,.6); }
.cta:active { transform: translateY(6px); box-shadow: 0 1px 0 #000; }
.cta-strzalka { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.8), 0 4px 0 #C9C15A; }

/* odpowiedzi do wyboru */
.opcja { border: 2px solid var(--linia); border-bottom-width: 2px; border-radius: 18px; background-color: #fff; background-image: var(--polysk);
  box-shadow: 0 6px 0 var(--op-brzeg, #DCD5C4), var(--klocek-cien); margin-bottom: 6px; }
.opcja:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--op-brzeg, #DCD5C4); }
.opcja-nr { background: var(--tlo); box-shadow: inset 0 -2px 0 var(--linia); border-width: 1.5px; }
.opcja.wyb { --op-brzeg: #7F9BE3; border-color: #8AA8F0; background-color: #EAF0FF; transform: translateY(2px); box-shadow: 0 4px 0 var(--op-brzeg), var(--klocek-cien); }
.opcja.wyb .opcja-nr { background: #8AA8F0; color: #fff; border-color: #7F9BE3; box-shadow: none; }
.opcja.ok { --op-brzeg: #5DB980; border-color: var(--ok); background-color: var(--ok-tlo); }
.opcja.zle { --op-brzeg: #E28C9A; border-color: var(--zle); background-color: var(--zle-tlo); animation: potrzasnij .35s; }
@keyframes potrzasnij { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

/* kafelki do układania zdań */
.kafelek { border: 2px solid var(--linia); border-bottom-width: 2px; border-radius: 14px; background-color: #fff; background-image: var(--polysk);
  box-shadow: 0 5px 0 #DCD5C4, 0 12px 14px -12px rgba(29,28,34,.4); margin-bottom: 5px; }
.kafelek:active { transform: translateY(4px); box-shadow: 0 1px 0 #DCD5C4; }
.kafelki.odp { border-bottom: 0; background: rgba(29,28,34,.04); border-radius: 18px; padding: 10px; box-shadow: inset 0 3px 6px rgba(29,28,34,.1); }

/* pole do wpisywania — „wklęsłe” */
.wpis { border-radius: 18px; background: #fff; box-shadow: inset 0 4px 8px rgba(29,28,34,.09), 0 2px 0 #fff; }
.wpis:focus { box-shadow: inset 0 4px 8px rgba(29,28,34,.09), 0 0 0 4px rgba(138,168,240,.25); }

/* głośniki */
.audio-btn { border: 0; background-color: #fff; background-image: var(--polysk); box-shadow: inset 0 0 0 1.5px var(--linia), 0 4px 0 #DCD5C4, 0 10px 12px -10px rgba(29,28,34,.4); margin-bottom: 4px; }
.audio-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--linia), 0 1px 0 #DCD5C4; }
.audio-btn.wl { background-color: var(--zolty); box-shadow: 0 4px 0 #D6CD5C, 0 10px 12px -10px rgba(29,28,34,.4); }
.duzy-glosnik { border-radius: 30px; background-image: radial-gradient(circle at 32% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 8px 0 #A7A0EA, 0 22px 26px -16px rgba(29,28,34,.55); }
.duzy-glosnik:active { transform: translateY(7px); box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 1px 0 #A7A0EA; }
.ikona-btn, .wstecz { border: 0; background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--linia), 0 4px 0 #DCD5C4; }
.ikona-btn:active, .wstecz:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--linia), 0 1px 0 #DCD5C4; }
.chip { border: 0; background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--linia), 0 3px 0 #DCD5C4; margin-bottom: 3px; }
.chip.akt { box-shadow: 0 3px 0 #000; }
.mowa-mik:active { transform: translateY(6px); box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 1px 0 #DFA2D3; }

/* pasek postępu — rurka z połyskiem */
.postep { height: 18px; border-radius: 10px; background: #E2DCCD; box-shadow: inset 0 3px 4px rgba(29,28,34,.14); }
.postep-wew { border-radius: 10px; position: relative; background: linear-gradient(180deg, #9BE3B6, var(--ok)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.postep-wew::after { content: ''; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.55); }

/* treść ćwiczenia na wypukłej karcie */
.cw-tekst { background: #fff; border-radius: 24px; padding: 18px; align-self: stretch; box-shadow: inset 0 1.5px 0 #fff, 0 6px 0 #E3DCCB, 0 20px 26px -20px rgba(29,28,34,.45); }
.lekcja.w-kolorze .cw-tekst { background: rgba(255,255,255,.88); box-shadow: 0 6px 0 rgba(29,28,34,.1), 0 20px 26px -20px rgba(29,28,34,.45); }
.fiszka, .gram-karta, .przyklad, .mowa-zdanie, .lista-pozycji { border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linia), 0 6px 0 #E3DCCB, 0 18px 24px -18px rgba(29,28,34,.4); }
.przyklad { box-shadow: inset 0 0 0 1px var(--linia), 0 4px 0 #E3DCCB; }
.gra-el { border: 0; background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--linia), 0 4px 0 #E3DCCB; }

/* stopka z oceną — wysuwa się jak klocek */
.stopka.ok, .stopka.zle { box-shadow: 0 -6px 0 rgba(29,28,34,.06); animation: wysun-stopke .22s ease-out; }
@keyframes wysun-stopke { from { transform: translateY(40%); opacity: .4; } }
.nav a.akt { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), 0 3px 0 #D8CA92; }

@media (prefers-reduced-motion: reduce) { .opcja.zle, .stopka.ok, .stopka.zle { animation: none; } }

/* ================= czytelność: karta nowego słowa (wszyscy) ================= */
.intro { gap: 16px; }
.intro-karta { background: #fff; border-radius: 28px; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  box-shadow: inset 0 1.5px 0 #fff, 0 7px 0 #E3DCCB, 0 22px 28px -20px rgba(29,28,34,.45); cursor: pointer; }
.intro-karta:active { transform: translateY(5px); box-shadow: 0 2px 0 #E3DCCB; }
.intro-karta .intro-obraz { font-size: 96px; margin-bottom: 4px; }
.intro-karta .intro-pl { color: var(--szary); border-top: 2px dashed var(--linia); padding-top: 10px; margin-top: 6px; align-self: stretch; }
.intro-audio { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; }
.intro-audio .audio-btn { justify-content: center; min-height: 56px; font-size: 17px; border-radius: 18px; }
.intro-audio .audio-btn .audio-opis { font-size: 15px; }
.intro-przyklady { gap: 14px; }
.przyklad { padding: 14px 16px; border-radius: 20px; }

/* ================= styl „dziecko”: wszystko większe, wyraźnie rozdzielone ================= */
body[data-styl="dziecko"] { font-size: 19px; }
body[data-styl="dziecko"] .maly, body[data-styl="dziecko"] small { font-size: 15px; }
/* lekcja */
body[data-styl="dziecko"] .cw-pole { padding: 12px 18px 190px; }
body[data-styl="dziecko"] .cw-polecenie { font-size: 16px; margin: 10px 0 18px; }
body[data-styl="dziecko"] .cw-en, body[data-styl="dziecko"] .cw-pl { font-size: 32px; }
body[data-styl="dziecko"] .cw-en.zdanie { font-size: 27px; }
body[data-styl="dziecko"] .cw-pl.maly { font-size: 18px; }
body[data-styl="dziecko"] .cw-tekst { padding: 22px 20px; gap: 12px; margin-bottom: 24px; }
body[data-styl="dziecko"] .intro-karta { padding: 28px 20px 22px; }
body[data-styl="dziecko"] .intro-karta .intro-obraz { font-size: 120px; }
body[data-styl="dziecko"] .intro-en { font-size: 46px; }
body[data-styl="dziecko"] .intro-pl { font-size: 26px; }
body[data-styl="dziecko"] .intro-uwaga, body[data-styl="dziecko"] .rozw-uwaga { font-size: 18px; padding: 12px 16px; border-radius: 16px; }
body[data-styl="dziecko"] .intro-audio .audio-btn { min-height: 66px; font-size: 20px; }
body[data-styl="dziecko"] .intro-audio .audio-btn .audio-opis { font-size: 18px; }
body[data-styl="dziecko"] .audio-btn { padding: 9px 15px; font-size: 18px; }
body[data-styl="dziecko"] .audio-btn .ik svg, body[data-styl="dziecko"] .audio-btn svg { width: 24px; height: 24px; }
body[data-styl="dziecko"] .przyklad { padding: 18px; }
body[data-styl="dziecko"] .przyklad-en { font-size: 22px; line-height: 1.35; }
body[data-styl="dziecko"] .przyklad-pl { font-size: 18px; margin-top: 4px; }
body[data-styl="dziecko"] .opcje { gap: 16px; }
body[data-styl="dziecko"] .opcja { min-height: 72px; padding: 16px 18px; font-size: 23px; border-radius: 22px; }
body[data-styl="dziecko"] .opcja-nr { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; }
body[data-styl="dziecko"] .kafelki { gap: 12px; }
body[data-styl="dziecko"] .kafelek { padding: 14px 18px; font-size: 23px; border-radius: 18px; }
body[data-styl="dziecko"] .wpis { padding: 20px; font-size: 24px; border-radius: 22px; }
body[data-styl="dziecko"] .podpowiedz { font-size: 17px; padding: 8px 14px; }
body[data-styl="dziecko"] .duzy-glosnik { width: 120px; height: 120px; border-radius: 34px; }
body[data-styl="dziecko"] .fiszka { padding: 28px 22px; min-height: 230px; }
body[data-styl="dziecko"] .postep { height: 22px; border-radius: 12px; }
/* stopka i przyciski */
body[data-styl="dziecko"] .btn { min-height: 64px; font-size: 20px; border-radius: 22px; padding: 14px 22px; }
body[data-styl="dziecko"] .stopka { padding: 18px 18px calc(var(--dol) + 18px); gap: 14px; }
body[data-styl="dziecko"] .stopka-tytul { font-size: 26px; }
body[data-styl="dziecko"] .stopka .rozw-en { font-size: 23px; }
body[data-styl="dziecko"] .stopka .rozw-pl, body[data-styl="dziecko"] .stopka .rozw-przyklad { font-size: 18px; }
body[data-styl="dziecko"] .btn.ocena { min-height: 72px; font-size: 17px; }
/* ekrany główne */
body[data-styl="dziecko"] .ekran { padding-left: 18px; padding-right: 18px; }
body[data-styl="dziecko"] .sekcja { font-size: 15px; margin: 28px 2px 14px; }
body[data-styl="dziecko"] .podtytul { font-size: 18px; }
body[data-styl="dziecko"] .zakladka { padding: 15px 8px; font-size: 18px; }
body[data-styl="dziecko"] .nav a { font-size: 14px; padding: 8px 4px; }
body[data-styl="dziecko"] .nav a svg { width: 28px; height: 28px; }
body[data-styl="dziecko"] .cta { padding: 22px; }
body[data-styl="dziecko"] .gra-el { padding: 12px; }
body[data-styl="dziecko"] .gra-el b { font-size: 20px; }
body[data-styl="dziecko"] .chip { padding: 10px 16px; font-size: 17px; }
body[data-styl="dziecko"] .pozycja { padding: 15px 16px; font-size: 19px; }
body[data-styl="dziecko"] .droga { gap: 26px; }
body[data-styl="dziecko"] .krok-kolko { width: 88px; height: 88px; }
body[data-styl="dziecko"] .krok-kolko img { width: 54px; height: 54px; }
body[data-styl="dziecko"] .krok-opis b { font-size: 20px; }
body[data-styl="dziecko"] .krok-opis { font-size: 16px; }
body[data-styl="dziecko"] .krok-start { min-height: 48px; font-size: 17px; padding: 8px 22px; }
body[data-styl="dziecko"] .unit-naglowek h2 { font-size: 31px; }
body[data-styl="dziecko"] .mowa-zdanie { font-size: 26px; }
body[data-styl="dziecko"] .dymek b { font-size: 24px; }
/* ścieżka u dzieci: każdy krok to osobny duży kafel */
body[data-styl="dziecko"] .droga { gap: 16px; }
body[data-styl="dziecko"] .krok { transform: none; background: #fff; border-radius: 26px; padding: 14px 16px; gap: 16px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--linia), 0 6px 0 #E3DCCB, 0 18px 22px -18px rgba(29,28,34,.4); }
body[data-styl="dziecko"] .krok:active { transform: translateY(4px); box-shadow: inset 0 0 0 1.5px var(--linia), 0 2px 0 #E3DCCB; }
body[data-styl="dziecko"] .krok.aktualny { box-shadow: inset 0 0 0 3px var(--tusz), 0 6px 0 var(--tusz), 0 18px 22px -18px rgba(29,28,34,.4); }
body[data-styl="dziecko"] .krok.aktualny .krok-kolko { outline: none; animation: none; }
body[data-styl="dziecko"] .krok.gotowy { background: #F3FBF6; }
body[data-styl="dziecko"] .krok-opis { flex: 1; }
body[data-styl="dziecko"] .krok-start { align-self: stretch; }
body[data-styl="dziecko"] .lekcja-tytul { font-size: 24px; opacity: .9; }
body[data-styl="dziecko"] .opcje.siatka-obrazkow { gap: 16px; }
body[data-styl="dziecko"] .siatka-obrazkow .opcja { min-height: 158px; }
body[data-styl="dziecko"] .siatka-obrazkow .opcja-txt { font-size: 22px; font-weight: 500; }
body[data-styl="dziecko"] .siatka-obrazkow .opcja-txt::first-line { font-size: 64px; }
/* czytanie u dzieci: akapit = osobna karta, większy tekst i przyciski */
body[data-styl="dziecko"] .akapit-blok { background: #fff; border-radius: 22px; padding: 16px 16px 14px; margin: 0 0 18px;
  box-shadow: inset 0 0 0 1.5px var(--linia), 0 5px 0 #E3DCCB; }
body[data-styl="dziecko"] .akapit-blok.czytany { background: #FFF8DD; }
body[data-styl="dziecko"] .akapit { font-size: 23px; line-height: 1.65; }
body[data-styl="dziecko"] .akapit-pl { font-size: 18px; }
body[data-styl="dziecko"] .akapit-narz { gap: 10px; }
body[data-styl="dziecko"] .akapit-narz .chip { padding: 10px 18px; font-size: 17px; }
body[data-styl="dziecko"] .karta-art { padding: 18px; gap: 16px; margin-bottom: 8px; }
body[data-styl="dziecko"] .ka-tytul { font-size: 22px; }
body[data-styl="dziecko"] .ka-txt small { font-size: 16px; }
body[data-styl="dziecko"] .ka-emoji { width: 62px; height: 62px; font-size: 36px; }
body[data-styl="dziecko"] .ka-obraz { width: 90px; height: 68px; }
body[data-styl="dziecko"] .quiz-blok-txt b { font-size: 23px; }
body[data-styl="dziecko"] .quiz-info { font-size: 16px; }
body[data-styl="dziecko"] .quiz-pytanie .cw-en { font-size: 26px; }
body[data-styl="dziecko"] .wykres-wart { font-size: 13px; }
body[data-styl="dziecko"] .wykres-kol small { font-size: 15px; }
body[data-styl="dziecko"] .art-legenda { display: none; }
body[data-styl="dziecko"] .wstecz { height: 46px; font-size: 17px; padding: 0 18px 0 13px; }
body[data-styl="dziecko"] .ikona-btn { width: 48px; height: 48px; }
/* gramatyka u dzieci */
body[data-styl="dziecko"] .gram-tekst { font-size: 24px; }
body[data-styl="dziecko"] .gram-przyklad { padding: 18px; gap: 14px; margin-top: 14px; }
body[data-styl="dziecko"] .gp-glosnik { width: 54px; height: 54px; }
body[data-styl="dziecko"] .gp-en { font-size: 25px; }
body[data-styl="dziecko"] .gp-pl { font-size: 18px; margin-top: 4px; }
body[data-styl="dziecko"] .gram-karta { padding: 20px; }
body[data-styl="dziecko"] .gram-karta h2 { font-size: 27px; }
body[data-styl="dziecko"] .gram-zasady p { font-size: 20px; }
body[data-styl="dziecko"] .gram-klucz.dlugi { font-size: 36px; }
/* pojedyncze słowo w ćwiczeniu: duże i na środku karty */
body[data-styl="dziecko"] .cw-tekst:has(> .cw-en:not(.zdanie)), body[data-styl="dziecko"] .cw-tekst:has(> .cw-pl:not(.maly)):not(:has(.luka)) { align-items: center; text-align: center; padding: 26px 20px; }
body[data-styl="dziecko"] .cw-en:not(.zdanie) { font-size: 40px; }
/* kafle wyniku: zawsze odcięte od tła lekcji */
.podsum-kafle .kafel { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 5px 0 rgba(29,28,34,.12), 0 14px 18px -14px rgba(29,28,34,.4); }
body[data-styl="dziecko"] .podsum-kafle { gap: 12px; }
body[data-styl="dziecko"] .kafel { padding: 14px; }
body[data-styl="dziecko"] .kafel small { font-size: 15px; }
body[data-styl="dziecko"] .kafel b { font-size: 32px; }
body[data-styl="dziecko"] .podsum h2 { font-size: 34px; }
body[data-styl="dziecko"] .podsum-cel { font-size: 20px; }
body[data-styl="dziecko"] .podsum-odznaki .maly { font-size: 18px; font-weight: 500; color: var(--tusz); }
/* zablokowane kroki ścieżki */
.krok.zablokowany .krok-kolko { filter: grayscale(.85); opacity: .55; }
.krok.zablokowany .krok-opis b { color: var(--szary); }
.krok-klodka { position: absolute; right: -4px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--szary); display: grid; place-items: center; box-shadow: 0 2px 0 var(--linia); }
.krok-klodka .ik svg { width: 16px; height: 16px; }
.krok.zablokowany .krok-info { color: var(--tusz); }
body[data-styl="dziecko"] .krok.zablokowany { background: #F7F4EC; box-shadow: inset 0 0 0 1.5px var(--linia), 0 3px 0 #E3DCCB; }
.krok.potrzasnij { animation: potrzasnij .35s; }
/* rozdziały (Unit) wyróżnione: znaczek z numerem nad tytułem karty i w nagłówku ścieżki */
.ks-etykieta, .unit-znak { display: inline-flex; align-items: center; align-self: flex-start; font-family: Jost, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  background: var(--tusz); color: #fff; border-radius: 999px; padding: 4px 12px 5px; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.ks-etykieta { font-size: 12px; margin-bottom: 6px; }
.karta-stos.z-etykieta .ks-tytul { display: flex; flex-direction: column; align-items: flex-start; }
.unit-naglowek { position: relative; padding-top: 64px; }
.unit-naglowek .wstecz { position: absolute; top: 14px; left: 14px; }
.unit-znak { font-size: 15px; padding: 6px 16px 7px; margin-bottom: 4px; }
body[data-styl="dziecko"] .ks-etykieta { font-size: 14px; }
body[data-styl="dziecko"] .unit-znak { font-size: 17px; }

/* ================= powrót zawsze w lewym górnym rogu: pigułka „← Wróć” / „← Przedmioty” (Wojtek 2026-10-24) ================= */
.wstecz { position: absolute; top: 12px; left: 12px; z-index: 2; width: auto; height: 40px; padding: 0 16px 0 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; font: 500 16px/1 Jost, -apple-system, system-ui, sans-serif; color: var(--tusz); cursor: pointer;
  border: 1.5px solid var(--linia); background: var(--karta); box-shadow: 0 3px 0 #DCD5C4; }
.wstecz:active { transform: translateY(2px); box-shadow: 0 1px 0 #DCD5C4; }
.wstecz .ik { display: grid; place-items: center; }
.wstecz .ik svg { width: 19px; height: 19px; }
.wstecz-txt { white-space: nowrap; }
.gorny-pasek { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 6px; }
.gorny-pasek .wstecz, .lekcja-gora .wstecz, .art-gora .wstecz { position: static; }
.lekcja-gora .wstecz { flex: none; }
.unit-naglowek .wstecz { top: 14px; left: 14px; }
.powitanie { margin-top: 10px; }
body[data-styl="dziecko"] .avatar .inicjal { width: 48px; height: 48px; font-size: 22px; }