/* ============================================================
   CZYTANKA — style gry w liczenie, liczydła i kolekcji nagród
   (dokładka do styl.css, ta sama paleta)
   ============================================================ */

.trzy-kafle{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ================= ZBIORY PRZEDMIOTÓW ================= */
.karta-licz{
  background:var(--panel);border:3px solid var(--linia);border-radius:24px;
  padding:26px 20px;box-shadow:var(--cien);
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  min-height:130px;
}
.zbior{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px;max-width:420px;
}
.zbior.male{max-width:250px}
.zbior.male .przedmiot.po-piatce{margin-right:0}
.przedmiot{
  font-size:clamp(1.9rem,7vw,2.9rem);line-height:1.1;
  display:inline-block;
}
.zbior.male .przedmiot{font-size:clamp(1.5rem,5vw,2.1rem)}
/* przerwa po każdej piątce — dziecko widzi „pięć i trzy” zamiast liczyć po jednym */
.przedmiot.po-piatce{margin-right:18px}
.przedmiot.odjety{opacity:.28;filter:grayscale(1) blur(.4px);position:relative}
.przedmiot.odjety::after{
  content:"";position:absolute;left:8%;right:8%;top:48%;height:3px;
  background:var(--uwaga);border-radius:2px;
}
.wielka-liczba{
  font-size:clamp(4rem,20vw,7rem);font-weight:800;line-height:1;
  color:var(--akcent);font-variant-numeric:tabular-nums;
}
.dzialanie .znak{
  font-size:clamp(2rem,7vw,3rem);font-weight:800;color:var(--tekst-slaby);flex:none;
}

/* ================= PORÓWNYWANIE ================= */
.para-zbiorow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zbior-wybor{
  background:var(--panel);border:3px solid var(--linia);border-radius:20px;
  padding:20px 12px;box-shadow:var(--cien);min-height:130px;
  display:flex;align-items:center;justify-content:center;
}
.zbior-wybor.dobrze{background:var(--akcent);border-color:var(--akcent)}
.zbior-wybor.zle{background:var(--uwaga-jasny);border-color:#E3CBB2;opacity:.5}
.zbior-wybor.podpowiedz{border-color:var(--akcent);box-shadow:0 0 0 4px rgba(62,124,107,.2)}

/* ================= CIĄG LICZB ================= */
.karta-licz.ciag{gap:10px}
.ogniwo{
  min-width:clamp(46px,13vw,70px);padding:12px 6px;border-radius:14px;
  background:var(--tlo);border:2px solid var(--linia);
  font-size:clamp(1.4rem,5.5vw,2.2rem);font-weight:800;text-align:center;
  font-variant-numeric:tabular-nums;
}
.ogniwo.luka{
  background:var(--akcent-jasny);border-color:var(--akcent);border-style:dashed;
  color:var(--akcent);
}

/* ================= MONETY ================= */
.monety-rzad{gap:12px}
.moneta{display:inline-block;width:clamp(56px,15vw,82px)}
.moneta svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 2px 3px rgba(35,32,28,.18))}
.moneta-duza{width:clamp(74px,20vw,110px)}
.moneta-wybor{
  background:transparent;border:3px solid transparent;border-radius:50%;padding:6px;
}
.moneta-wybor.dobrze{border-color:var(--akcent);background:var(--akcent-jasny)}
.moneta-wybor.zle{opacity:.4}
.moneta-wybor.podpowiedz{border-color:var(--akcent);box-shadow:0 0 0 4px rgba(62,124,107,.2)}

/* ================= PRZYCISKI Z LICZBAMI ================= */
.odp-liczba{
  font-size:clamp(2rem,8vw,3rem);font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;min-height:96px;
}

/* ================= ZAPIS DZIAŁANIA CYFRAMI ================= */
/* Nad liczmanami stoi to samo działanie w zapisie szkolnym. */
.zapis-dzialania{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  margin:0 0 14px;padding:14px 16px;
  background:var(--panel);border:3px solid var(--linia);border-radius:20px;
  box-shadow:var(--cien);font-variant-numeric:tabular-nums;
}
.zapis-dzialania .skladnik{
  font-size:clamp(2.1rem,8vw,3.2rem);font-weight:800;line-height:1;color:var(--tekst);
}
.zapis-dzialania .operator{
  font-size:clamp(1.7rem,6vw,2.5rem);font-weight:800;line-height:1;color:var(--tekst-slaby);
}
.zapis-dzialania .wynik{
  font-size:clamp(2.1rem,8vw,3.2rem);font-weight:800;line-height:1;color:var(--akcent);
}
.zapis-dzialania .wynik.pusty{
  min-width:1.4em;text-align:center;color:var(--akcent);
  background:var(--akcent-jasny);border:2px dashed var(--akcent);border-radius:12px;
  padding:2px 8px;
}
.podpis.srodek{text-align:center;margin-top:10px}

/* ================= LICZYDŁO ================= */
/* liczydło stoi tuż pod odpowiedziami — bez przewijania w dół */
.miejsce-liczydla{padding-top:4px}

.btn-narzedzie{
  width:100%;margin-bottom:14px;padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:1.05em;letter-spacing:.04em;font-weight:750;
  background:var(--akcent-jasny);border-color:#BFDCD1;color:#2C5A4E;
}
.btn-narzedzie span{
  font-size:.72em;font-weight:600;letter-spacing:0;opacity:.75;text-transform:none;
}

.liczydlo{
  background:#F7F3EA;border:3px solid var(--linia);border-radius:20px;
  padding:12px;margin-top:14px;box-shadow:var(--cien);
}
.liczydlo-gora{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 4px 10px;border-bottom:2px solid var(--linia);margin-bottom:10px;
}
.liczydlo-tytul{font-weight:750;letter-spacing:.02em}
.liczydlo-licznik{
  flex:1;color:var(--tekst-slaby);font-size:.95em;
}
.liczydlo-licznik b{
  color:var(--tekst);font-size:1.35em;font-weight:800;font-variant-numeric:tabular-nums;
}
/* zasłonięty licznik — jedyną drogą do wyniku jest przeliczenie kul */
.liczydlo-licznik.zakryty b{
  color:var(--tekst-slaby);background:var(--linia);border-radius:8px;padding:0 10px;
}
#liczydlo-cyfry.wlaczony{background:var(--akcent);color:#fff;border-color:var(--akcent)}
.liczydlo-gora .btn{white-space:nowrap}
.liczydlo-gora .btn{min-height:40px;padding:6px 12px}

/* rama liczydła — drewniana obwódka jak w szkolnym */
.liczydlo-rama{
  background:#8B6A45;border-radius:14px;padding:10px 12px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18);
}
.licz-rzad{
  display:flex;align-items:center;gap:0;
  position:relative;padding:1px 0;
}
/* drut, po którym „jeżdżą” kule */
.licz-rzad::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:rgba(255,255,255,.28);border-radius:1px;
}
.licz-grupa{display:flex;position:relative;z-index:1}
.licz-drut{flex:1;min-width:6px}

.kula{
  width:clamp(20px,4.6vw,30px);height:clamp(20px,4.6vw,30px);
  border-radius:50%;border:2px solid rgba(0,0,0,.22);
  margin:0 1px;padding:0;flex:none;cursor:pointer;
  transition:opacity .12s ease, transform .12s ease;
}
.kula-a{background:radial-gradient(circle at 32% 30%, #F3ECDD, #D9C7A6)}
.kula-b{background:radial-gradient(circle at 32% 30%, #E58B72, #C4543A)}
.kula:not(.przesunieta){opacity:.42}
.kula.przesunieta{opacity:1;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.kula:active{transform:scale(.88)}
body.bez-ruchu .kula{transition:none}

/* ================= KOLEKCJE NAGRÓD ================= */
.naglowek-kolekcji{
  display:flex;align-items:center;gap:10px;
  margin:22px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--linia);
}
.naglowek-kolekcji:first-child{margin-top:0}
.naglowek-kolekcji .ikona-gry{font-size:1.5em;line-height:1}
.naglowek-kolekcji b{font-size:1.1em;letter-spacing:.02em}
.naglowek-kolekcji .podpis{font-size:.9em}
.licznik-kolekcji{
  margin-left:auto;font-weight:700;font-size:.92em;flex:none;
  background:#FBF3E2;border:2px solid #EBD9B4;border-radius:999px;padding:4px 12px;
  font-variant-numeric:tabular-nums;
}

/* ================= DRUK ================= */
@media print{
  .liczydlo,.miejsce-liczydla,.btn-narzedzie{display:none !important}
}

/* ================= DOTYK: PANEL RODZICA I KLUCZ ================= */
/* iPad potrafi przerwać długie przytrzymanie własnym menu — wszystkie
   te elementy reagują na zwykłe stuknięcie i mają wyłączony callout. */
.gear, .status, .kula, .kafel-menu, .poziom, .gracz{
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
.gear{
  font-size:1.5em;opacity:.55;min-width:52px;min-height:52px;
  border-radius:14px;
}
.gear:active{opacity:1;background:var(--panel)}

button.status{
  font-family:inherit;cursor:pointer;
  min-height:44px;
  transition:transform .1s ease;
}
button.status:active{transform:translateY(1px)}
button.status::after{
  content:" ›";font-weight:800;opacity:.6;
}

.okno-szersze{max-width:420px}
.okno-pin input[type=text]{
  width:100%;padding:14px 14px;border:2px solid var(--linia);border-radius:12px;
  font-size:1.05em;font-family:inherit;background:var(--tlo);color:var(--tekst);
  text-align:center;letter-spacing:.02em;
}
.okno-pin .akcje .btn{flex:1;min-width:120px}
.okno-pin .pomoc{
  color:var(--tekst-slaby);font-size:.86em;margin-top:10px;line-height:1.45;
}

/* znacznik wersji — żeby od razu było widać, czy urządzenie ma świeżą grę */
.wersja-app{
  font-size:.72em;font-weight:700;letter-spacing:.06em;
  color:var(--tekst-slaby);opacity:.5;user-select:none;
  padding:0 4px;flex:none;
}

/* ================= ZAKRYTY OBRAZEK ================= */
/* W zadaniu „Przeczytaj" obrazek nie podpowiada. Jest zasłonięty,
   a odkrywa się po poprawnym przeczytaniu — jako potwierdzenie. */
.obrazek-miejsce{
  min-height:clamp(120px,26vw,190px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:0 0 4px;
}
.obrazek-zaslona{
  width:clamp(120px,30vw,200px);min-height:clamp(120px,26vw,190px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--panel);border:3px dashed var(--linia);border-radius:24px;
  cursor:pointer;font-family:inherit;color:var(--tekst-slaby);
  -webkit-touch-callout:none;touch-action:manipulation;
  transition:border-color .15s ease, background .15s ease;
}
.obrazek-zaslona:active{background:var(--tlo);border-color:var(--akcent)}
.obrazek-zaslona .znak-zapytania{font-size:clamp(2.4rem,10vw,3.6rem);line-height:1;opacity:.45}
.obrazek-zaslona .podpis-zaslony{font-size:.82em;font-weight:650;letter-spacing:.01em}
.obrazek-duzy.wjazd{animation:obrazek-pop .34s cubic-bezier(.2,1.2,.4,1)}
@keyframes obrazek-pop{
  from{transform:scale(.72);opacity:0}
  to{transform:scale(1);opacity:1}
}
body.bez-ruchu .obrazek-duzy.wjazd{animation:none}
.potwierdzenie{color:var(--akcent);font-weight:700;margin-top:6px}

/* ================= NAUKA LITER ================= */
#pasek-liter{margin-top:14px;justify-content:center}
#pasek-liter .btn{font-size:.92em}
/* przy poziomach „po kolei" podpis z literami ma być czytelny */
.poziom .opis{font-variant-numeric:tabular-nums}