/* =========================================================================
   BARWY D — „GLINA”   (do układu „Warsztat”)
   -------------------------------------------------------------------------
   Wersja plastyczna: wszystko wygląda jak wylepione z miękkiej masy.
   Każdy klocek ma światło od góry i cień pod spodem, więc karty, przyciski
   i pola ćwiczeń naprawdę wystają z tła, a wciśnięty przycisk zapada się
   pod palcem. To nie jest „inna kolorystyka” — to inna faktura strony.

   Cztery barwy, każda z własną robotą — od razu wiadomo, na co się patrzy:
     zieleń morska  interfejs, przyciski, postęp, poprawna odpowiedź
     błękit         wszystko po niemiecku (słowa, formy, kwestie dialogu)
     pomarańcz      odsłuch i uwagi — to, co ma zaczepić wzrok
     czerwień       pułapki i błędy
   Tło mineralne, chłodne; barwy grają na nim pełnym głosem, bez różu.

   Pismo: Nunito (okrągłe, do interfejsu i tekstu) + Fraunces (niemiecki
   i ozdoby) — oba z plików kursu, nic nie leci z internetu.

   Warstwa wierzchnia: nie zmienia ani jednej klasy w HTML-u i nie dotyka
   skryptów — nagrania, ćwiczenia, postęp i profile działają jak dziś.

   Tokeny, których wymaga układ warsztatu:
     --atr    ciemny pas (szyna kursu, pasek zakładek panelu)
     --zolty  barwa zaznaczenia na tym pasie
   ========================================================================= */

/* ============================================================== TOKENY === */

html[data-wyglad="glina"] {
  --zielen:    #0fa37f;   /* barwa wiodąca: interfejs i potwierdzenia */
  --zielen-2:  #2fc79b;   /* jaśniejsza zieleń do gradientów */
  --blekit:    #2b7fff;   /* język niemiecki */
  --blekit-2:  #5fa3ff;   /* jaśniejszy błękit do gradientów */
  --pomarancz: #ff8a30;   /* odsłuch, podpowiedzi, uwagi */
  --czerwien:  #e8483c;   /* pułapki i błędy */

  --atr:      #0d3b44;   /* granat — ciemne pasy interfejsu */
  --zolty:    #ffb23f;   /* zaznaczenie na ciemnym pasie */

  --tlo:        #e9eff2;
  --arkusz:     #ffffff;
  --arkusz-2:   #f0f5f7;
  --arkusz-3:   #e1eaee;
  --atrament:   #0d3b44;
  --na-atramencie: #eaf6f7;
  --plama:      #0fa37f;
  --na-plamie:  #ffffff;

  --tekst:      #123039;
  --tekst-2:    #4a626c;
  --tekst-3:    #8099a3;

  --linia:      rgba(18,48,57,.10);
  --linia-2:    rgba(18,48,57,.18);
  --linia-3:    #0fa37f;
  --linia-mocna: rgba(18,48,57,.38);

  --lekcja:     #0fa37f;
  --lekcja-tlo: rgba(15,163,127,.12);

  --szyna-tlo-1:      #0d3b44;
  --szyna-tlo-2:      #082c33;
  --szyna-tekst:      #eaf6f7;
  --szyna-tekst-2:    rgba(234,246,247,.82);
  --szyna-tekst-3:    rgba(234,246,247,.50);
  --szyna-nakladka:   rgba(234,246,247,.09);
  --szyna-nakladka-2: rgba(43,127,255,.30);
  --szyna-linia:      rgba(234,246,247,.12);
  --szyna-linia-2:    rgba(234,246,247,.24);
  --szyna-dziura:     #0d3b44;
  --szyna-tor:        rgba(234,246,247,.16);
  --szyna-postep-1:   #2b7fff;
  --szyna-postep-2:   #ffb23f;

  --ok:    #0f9c7a;  --ok-tlo:    #dff6ee;
  --zle:   #d63f33;  --zle-tlo:   #fde9e6;
  --uwaga: #b86d14;  --uwaga-tlo: #fdeeda;

  --cien-1: 0 1px 2px rgba(18,48,57,.05), 0 4px 12px rgba(18,48,57,.06);
  --cien-2: 0 3px 8px rgba(18,48,57,.06), 0 16px 34px rgba(18,48,57,.10);
  --cien-3: 0 8px 20px rgba(18,48,57,.10), 0 30px 70px rgba(18,48,57,.16);

  /* --- światło i cień gliny ---------------------------------------------
     Każda bryła dostaje trzy warstwy naraz: jasną krawędź u góry (światło),
     ciemniejsze podbrzusze (własny cień materiału) i cień rzucany na tło.
     To z tego bierze się wrażenie miękkiej masy, a nie płaskiej karty. */
  --glina:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -10px 18px -10px rgba(13,59,68,.16),
    0 2px 5px -2px rgba(13,59,68,.18),
    0 20px 38px -20px rgba(13,59,68,.45);
  --glina-l:
    inset 0 3px 0 rgba(255,255,255,.95),
    inset 0 -16px 26px -14px rgba(13,59,68,.18),
    0 4px 10px -4px rgba(13,59,68,.20),
    0 34px 60px -28px rgba(13,59,68,.50);
  --glina-wklesle:
    inset 0 3px 7px rgba(13,59,68,.16),
    inset 0 -2px 0 rgba(255,255,255,.85);
  --glina-barwna:
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -10px 16px -10px rgba(0,0,0,.22),
    0 4px 10px -4px rgba(15,163,127,.45),
    0 22px 40px -20px rgba(15,163,127,.60);

  --f-tytul: "Nunito kursu", "Segoe UI", system-ui, sans-serif;
  --f-tekst: "Nunito kursu", "Segoe UI", system-ui, sans-serif;
  --f-de:    "Fraunces kursu", Georgia, serif;
  --f-dek:   "Fraunces kursu", Georgia, serif;

  --r-s: 14px; --r: 22px; --r-l: 30px; --r-xl: 40px;
  --miara: 64ch;
  --gora-h: 56px;
}

html[data-wyglad="glina"][data-motyw="ciemny"] {
  --tlo:        #0b2730;
  --arkusz:     #103642;
  --arkusz-2:   #14404d;
  --arkusz-3:   #1b4f5e;
  --atrament:   #07222a;
  --tekst:      #e6f2f3;
  --tekst-2:    #a8c4cb;
  --tekst-3:    #7d9ba3;
  --linia:      rgba(230,242,243,.12);
  --linia-2:    rgba(230,242,243,.22);
  --linia-mocna: rgba(230,242,243,.40);
  --plama:      #2b7fff;
  --na-plamie:  #ffffff;
  --lekcja-tlo: rgba(43,127,255,.20);

  --ok:    #4fd6b0;  --ok-tlo:    rgba(79,214,187,.14);
  --zle:   #ff8d7a;  --zle-tlo:   rgba(255,141,122,.14);
  --uwaga: #ffb23f;  --uwaga-tlo: rgba(255,178,63,.14);

  --glina:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -12px 20px -10px rgba(0,0,0,.45),
    0 3px 8px -3px rgba(0,0,0,.45),
    0 22px 40px -20px rgba(0,0,0,.70);
  --glina-l:
    inset 0 3px 0 rgba(255,255,255,.12),
    inset 0 -18px 28px -14px rgba(0,0,0,.50),
    0 5px 12px -5px rgba(0,0,0,.50),
    0 36px 64px -28px rgba(0,0,0,.75);
  --glina-wklesle:
    inset 0 3px 8px rgba(0,0,0,.45),
    inset 0 -2px 0 rgba(255,255,255,.08);

  --cien-1: 0 1px 2px rgba(0,0,0,.40);
  --cien-2: 0 10px 26px rgba(0,0,0,.50);
  --cien-3: 0 20px 60px rgba(0,0,0,.60);
}

/* ============================================================ PODŁOŻE === */
/* Tło nie jest jednolite: trzy rozmyte plamy barwne dają głębię, a cienka
   ziarnistość na wierzchu zdejmuje z gradientów „cyfrowy” połysk. */

/* Płótno przeglądarki (to, co widać przy odbiciu na końcu przewijania
   i przez ułamek sekundy w trakcie przerysowania) bierze barwę z KORZENIA.
   Bez tych dwóch reguł w motywie ciemnym błyska biel — na telefonie
   wygląda to jak opóźnienie przełącznika. */
html[data-wyglad="glina"] { background: var(--tlo); color-scheme: light; }
html[data-wyglad="glina"][data-motyw="ciemny"] { color-scheme: dark; }

html[data-wyglad="glina"] body {
  position: relative;
  background: var(--tlo);
  font-family: var(--f-tekst);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
html[data-wyglad="glina"] body::before {
  content: "";
  position: fixed; inset: -12vmax;
  z-index: -2;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(43,127,255,.38), transparent 62%),
    radial-gradient(34vmax 34vmax at 86% 6%,  rgba(47,199,155,.26),  transparent 62%),
    radial-gradient(40vmax 40vmax at 72% 88%, rgba(255,138,48,.22),  transparent 62%),
    radial-gradient(30vmax 30vmax at 8% 82%,  rgba(15,163,127,.20),   transparent 62%);
  /* bez filtra rozmycia: same gradienty są już miękkie, a rozmywanie
     warstwy na cały ekran kosztuje tyle, że na słabszym sprzęcie tnie
     przewijanie (i myli przeglądarce zrzuty ekranu) */
  animation: glina-plamy 44s ease-in-out infinite alternate;
}
html[data-wyglad="glina"][data-motyw="ciemny"] body::before { opacity: .55; }
@keyframes glina-plamy {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}
html[data-wyglad="glina"] body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)' opacity='.42'/%3E%3C/svg%3E");
}

/* ============================================ TELEFON: MNIEJ MALOWANIA == */
/* Na telefonie zdejmujemy to, czego i tak nie widać, a co trzeba rastrować
   przy każdym przerysowaniu — najbardziej boli to przy zmianie motywu,
   bo wtedy przerysowuje się cała strona naraz. */

@media (max-width: 1099px) {
  /* ziarno: na ekranie telefonu niewidoczne, a to warstwa na całe okno */
  html[data-wyglad="glina"] body::after { display: none; }

  /* plamy barwne: bez animacji i z dwóch gradientów zamiast czterech */
  html[data-wyglad="glina"] body::before {
    animation: none;
    background:
      radial-gradient(60vmax 60vmax at 15% 5%, rgba(43,127,255,.30), transparent 62%),
      radial-gradient(60vmax 60vmax at 85% 92%, rgba(47,199,155,.22), transparent 62%);
  }

  /* cienie płytsze: koszt malowania rośnie z promieniem rozmycia, a kart
     z cieniem jest na jednej lekcji kilkadziesiąt */
  html[data-wyglad="glina"] {
    --glina:
      inset 0 2px 0 rgba(255,255,255,.95),
      0 1px 3px -1px rgba(13,59,68,.22),
      0 8px 16px -10px rgba(13,59,68,.45);
    --glina-l:
      inset 0 2px 0 rgba(255,255,255,.95),
      0 2px 5px -2px rgba(13,59,68,.24),
      0 12px 22px -12px rgba(13,59,68,.50);
  }
  html[data-wyglad="glina"][data-motyw="ciemny"] {
    --glina:
      inset 0 2px 0 rgba(255,255,255,.10),
      0 2px 5px -2px rgba(0,0,0,.50),
      0 10px 18px -10px rgba(0,0,0,.70);
    --glina-l:
      inset 0 2px 0 rgba(255,255,255,.12),
      0 3px 7px -3px rgba(0,0,0,.52),
      0 14px 24px -12px rgba(0,0,0,.72);
  }
}

/* ======================================================= GŁOWA LEKCJI === */

html[data-wyglad="glina"] .lekcja-glowa {
  position: relative;
  margin-bottom: 2.4rem;
  padding: clamp(24px, 3.4vw, 42px) clamp(22px, 3.2vw, 44px) clamp(22px, 3vw, 34px);
  border: none;
  border-radius: var(--r-xl);
  background:
    linear-gradient(150deg, rgba(43,127,255,.16), rgba(47,199,155,.10) 52%, rgba(255,138,48,.12)),
    var(--arkusz);
  box-shadow: var(--glina-l);
  overflow: hidden;
}
/* wielka „duchowa” cyfra lekcji — numer podaje zbuduj.py w data-numer */
html[data-wyglad="glina"] .lekcja-glowa::after {
  content: attr(data-numer);
  position: absolute; right: -.06em; top: -.30em;
  font-family: var(--f-dek); font-weight: 900;
  font-size: clamp(9rem, 20vw, 17rem); line-height: 1;
  color: var(--zielen);
  opacity: .09;
  pointer-events: none;
}
html[data-wyglad="glina"] .lekcja-etykieta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 11px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  color: #fff;
  font-weight: 800; font-size: .8rem; letter-spacing: .04em;
  box-shadow: var(--glina-barwna);
}
html[data-wyglad="glina"] .lekcja-etykieta::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--zolty);
  box-shadow: 0 0 0 4px rgba(255,178,63,.28);
}
html[data-wyglad="glina"] .lekcja-glowa h1 {
  margin: 18px 0 10px;
  font-family: var(--f-tytul); font-weight: 900;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.02;
  letter-spacing: -.035em;
  background: linear-gradient(112deg, var(--tekst) 14%, var(--blekit) 54%, var(--zielen));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
html[data-wyglad="glina"] .lekcja-glowa h1::after { content: none; }
html[data-wyglad="glina"] .lead {
  max-width: 62ch;
  font-family: var(--f-tekst);   /* szkielet daje tu krój ozdobny — tu ma być okrągły */
  color: var(--tekst-2);
  font-size: 1.08rem;
}

/* cele lekcji jako miękkie kafelki z ptaszkiem */
html[data-wyglad="glina"] ul.cele {
  display: grid; gap: 10px;
  margin: 24px 0 0; padding: 0;
  list-style: none;
}
@media (min-width: 720px) { html[data-wyglad="glina"] ul.cele { grid-template-columns: 1fr 1fr; } }
html[data-wyglad="glina"] ul.cele .de { font-size: .95rem; }
html[data-wyglad="glina"] ul.cele li {
  /* UWAGA: tu NIE wolno dać display:flex — wtedy każdy kawałek zdania
     i każde niemieckie słowo stają się osobnym elementem układu i tekst
     rozjeżdża się po liniach. Ptaszek wieszamy bezwzględnie. */
  position: relative;
  margin: 0; padding: 11px 15px 11px 46px;
  border: none; border-radius: var(--r-s);
  background: var(--arkusz-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -8px rgba(13,59,68,.40);
  color: var(--tekst-2);
  font-size: .95rem; line-height: 1.5;
}
html[data-wyglad="glina"] ul.cele li::before {
  content: "✓";
  position: absolute; left: 13px; top: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin: 0;
  border-radius: 8px;
  background: linear-gradient(140deg, #3ddca8, var(--zielen-2));
  color: #fff; font-size: .78rem; font-weight: 900;
  box-shadow: 0 4px 9px -3px rgba(47,199,155,.75), inset 0 1px 0 rgba(255,255,255,.5);
}

/* pasek postępu jako rurka wypełniana masą */
html[data-wyglad="glina"] .pasek-postepu {
  height: 14px;
  border: none; border-radius: 999px;
  background: var(--arkusz-3);
  box-shadow: var(--glina-wklesle);
  overflow: hidden;
}
html[data-wyglad="glina"] .pasek-postepu > i {
  background: linear-gradient(90deg, var(--zielen), var(--blekit) 55%, var(--zielen-2));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 0 16px rgba(15,163,127,.55);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.22,.9,.28,1);
}

/* ====================================================== NAGŁÓWKI TOKU === */

html[data-wyglad="glina"] main h2 {
  /* to samo co przy celach: nagłówek bywa ze słowem po niemiecku w środku */
  position: relative;
  padding-left: 32px;
  margin: 3.2rem 0 1.1rem;
  font-family: var(--f-tytul); font-weight: 900;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  letter-spacing: -.028em;
  color: var(--tekst);
}
html[data-wyglad="glina"] main h2::before {
  content: "";
  display: block;
  position: absolute; left: 0; top: .12em;
  width: 16px; height: 34px;
  border-radius: 999px;
  background: linear-gradient(170deg, var(--blekit), var(--zielen) 60%, var(--zielen-2));
  box-shadow: var(--glina-barwna);
}
html[data-wyglad="glina"] main h3 {
  margin: 2.2rem 0 .7rem;
  font-family: var(--f-tytul); font-weight: 800;
  font-size: 1.12rem; letter-spacing: -.012em;
  color: var(--zielen);
}
html[data-wyglad="glina"][data-motyw="ciemny"] main h3 { color: var(--zielen-2); }

/* ========================================================== NIEMIECKI === */

html[data-wyglad="glina"] .de {
  font-family: var(--f-de);
  font-weight: 600;
  color: var(--blekit);
}
html[data-wyglad="glina"][data-motyw="ciemny"] .de { color: #8ec2ff; }
html[data-wyglad="glina"] .forma {
  /* zwykły tekst w środku: 207 form ma w sobie <b> albo <span>, a układ
     elastyczny wstawiałby między nie odstęp i rozbijał zapis formy */
  display: inline-block;
  padding: 2px 6px 2px 11px;
  border-radius: 999px;
  background: rgba(43,127,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 5px -2px rgba(13,59,68,.35);
  font-family: var(--f-de); font-weight: 600;
  color: var(--blekit);
}
html[data-wyglad="glina"][data-motyw="ciemny"] .forma {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  color: #a9d2ff;
}
html[data-wyglad="glina"] .ipa { color: var(--tekst-3); font-family: var(--f-tekst); }

/* ============================================================== KARTY === */

html[data-wyglad="glina"] .karta,
html[data-wyglad="glina"] .klocek,
html[data-wyglad="glina"] .tabela-opak,
html[data-wyglad="glina"] figure.grafika {
  border: none;
  border-radius: var(--r-l);
  background: var(--arkusz);
  box-shadow: var(--glina);
}
html[data-wyglad="glina"] .karta,
html[data-wyglad="glina"] .klocek { padding: 20px 22px; }
html[data-wyglad="glina"] figure.grafika { padding: 16px; overflow: hidden; }
html[data-wyglad="glina"] figure.grafika svg,
html[data-wyglad="glina"] figure.grafika img { border-radius: var(--r-s); }
html[data-wyglad="glina"][data-motyw="ciemny"] .svg-biale {
  background: #eaf6f7; border-radius: var(--r-s); padding: 6px;
}

/* UWAGA: tu NIE wolno dać `overflow: hidden` — szkielet daje tabelom
   `overflow-x: auto`, bo na telefonie szersza tabela (odmiana czasownika,
   rodzajniki) musi dać się przesunąć palcem. Przy `hidden` ostatnie
   kolumny są po prostu ucięte i nie da się do nich dojść. */
html[data-wyglad="glina"] .tabela-opak {
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
html[data-wyglad="glina"] thead th {
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  color: #fff; font-weight: 800;
  border: none;
}
html[data-wyglad="glina"] thead th:first-child { border-radius: var(--r-s) 0 0 0; }
html[data-wyglad="glina"] thead th:last-child  { border-radius: 0 var(--r-s) 0 0; }
html[data-wyglad="glina"] tbody tr:nth-child(even) td { background: var(--arkusz-2); }
html[data-wyglad="glina"] tbody td { border-color: var(--linia); }

/* ===================================================== RAMKI TEMATYCZNE = */
/* Cztery rodzaje wskazówek. Każda dostaje własny kolor, własny „kamyk”
   z ikoną i to samo miękkie światło, więc czyta się je jednym rzutem oka. */

html[data-wyglad="glina"] .ramka {
  position: relative;
  margin: 1.8rem 0;
  padding: 18px 20px 18px 64px;
  border: none;
  border-radius: var(--r-l);
  background: var(--arkusz);
  box-shadow: var(--glina);
}
html[data-wyglad="glina"] .ramka::before {
  content: "";
  /* szkielet „Kokpitu” wygasza tę kreskę (display:none) — włączamy z powrotem */
  display: block;
  position: absolute; left: 18px; top: 18px;
  width: 32px; height: 32px;
  border-radius: 12px;
  background: var(--r-barwa, var(--zielen));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -8px 12px -8px rgba(0,0,0,.30),
    0 6px 14px -5px var(--r-cien, rgba(15,163,127,.65));
}
html[data-wyglad="glina"] .ramka::after {
  content: var(--r-znak, "★");
  display: flex;
  position: absolute; left: 18px; top: 18px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; font-weight: 900;
}
html[data-wyglad="glina"] .ramka-regula  { --r-barwa: linear-gradient(140deg,#5fa3ff,#2b7fff); --r-cien: rgba(43,127,255,.65);  --r-znak: "§"; }
html[data-wyglad="glina"] .ramka-tip     { --r-barwa: linear-gradient(140deg,#3ddca8,#2fc79b); --r-cien: rgba(47,199,155,.65);  --r-znak: "✦"; }
html[data-wyglad="glina"] .ramka-uwaga   { --r-barwa: linear-gradient(140deg,#ffb23f,#ff8a30); --r-cien: rgba(255,138,48,.65);  --r-znak: "!"; }
html[data-wyglad="glina"] .ramka-pulapka { --r-barwa: linear-gradient(140deg,#ff7d6d,#e8483c); --r-cien: rgba(232,72,60,.65);  --r-znak: "✕"; }
html[data-wyglad="glina"] .ramka-tytul {
  margin-bottom: .45rem;
  font-family: var(--f-tytul); font-weight: 900;
  font-size: .94rem; letter-spacing: .01em;
  color: var(--tekst);
}

/* ====================================================== PRZYCISKI itp. == */
/* Przycisk ma grubą podstawę pod spodem — wciśnięcie zjeżdża na nią w dół.
   Palec dostaje odpowiedź, zanim skrypt zdąży cokolwiek policzyć. */

html[data-wyglad="glina"] .btn {
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  background: var(--arkusz);
  color: var(--tekst);
  font-family: var(--f-tekst); font-weight: 800;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 4px 0 -1px var(--arkusz-3),
    0 10px 20px -10px rgba(13,59,68,.55);
  transition: transform .10s ease, box-shadow .10s ease, background .14s;
}
html[data-wyglad="glina"] .btn:hover { background: var(--arkusz-2); transform: translateY(-1px); }
html[data-wyglad="glina"] .btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 6px rgba(13,59,68,.28);
}
html[data-wyglad="glina"] .btn-glowny {
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.40),
    0 5px 0 -1px #0a7a5e,
    0 16px 26px -12px rgba(15,163,127,.85);
}
html[data-wyglad="glina"] .btn-glowny:hover { filter: brightness(1.06); }
html[data-wyglad="glina"] .btn-glowny:active {
  transform: translateY(4px);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.30);
}
html[data-wyglad="glina"] .btn-maly { padding: 7px 15px; font-size: .86rem; }

html[data-wyglad="glina"] .ikonka {
  border: none; border-radius: 50%;
  background: var(--arkusz);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 3px 0 -1px var(--arkusz-3), 0 10px 18px -10px rgba(13,59,68,.6);
  transition: transform .10s ease, box-shadow .10s ease;
}
html[data-wyglad="glina"] .ikonka:hover { transform: translateY(-1px); }
html[data-wyglad="glina"] .ikonka:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(13,59,68,.30); }

html[data-wyglad="glina"] .chip {
  border: none; border-radius: 999px;
  padding: 8px 16px;
  background: var(--arkusz);
  font-family: var(--f-de); font-weight: 600;
  color: var(--blekit);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 3px 0 -1px var(--arkusz-3), 0 10px 18px -10px rgba(13,59,68,.55);
  transition: transform .10s ease, box-shadow .10s ease;
}
html[data-wyglad="glina"] .chip:hover { transform: translateY(-2px); }
html[data-wyglad="glina"] .chip:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(13,59,68,.28); }
html[data-wyglad="glina"][data-motyw="ciemny"] .chip,
html[data-wyglad="glina"][data-motyw="ciemny"] .btn,
html[data-wyglad="glina"][data-motyw="ciemny"] .ikonka {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.10), 0 4px 0 -1px #07222a, 0 12px 22px -12px rgba(0,0,0,.9);
  color: var(--tekst);
}
html[data-wyglad="glina"] .tag {
  border-radius: 999px;
  background: var(--lekcja-tlo);
  color: var(--zielen);
  font-weight: 800;
  border: none;
}

/* przycisk odsłuchu — żółty marker marki zostaje, ale wylepiony z gliny:
   bez twardej obwódki, z własną podstawą, która chowa się przy wciśnięciu */
html[data-wyglad="glina"] .mow,
html[data-wyglad="glina"] .btn-sluch {
  min-height: 38px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(140deg, #ffd97a, var(--pomarancz));
  color: #3c2c08;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.60),
    0 3px 0 -1px #d18a22,
    0 12px 20px -12px rgba(255,138,48,.95);
  transition: transform .10s ease, box-shadow .10s ease, filter .14s;
}
html[data-wyglad="glina"] .forma > .mow { margin-left: 5px; }
html[data-wyglad="glina"] .mow {
  min-height: 0;
  width: 28px; height: 28px; padding: 0;
  font-size: .78rem; line-height: 1;
  vertical-align: middle;
}
html[data-wyglad="glina"] .mow:hover,
html[data-wyglad="glina"] .btn-sluch:hover {
  background: linear-gradient(140deg, #ffe294, var(--pomarancz));
  transform: translateY(-1px);
}
html[data-wyglad="glina"] .mow:active,
html[data-wyglad="glina"] .btn-sluch:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 7px rgba(80,50,0,.35);
}
html[data-wyglad="glina"] .klik-mow {
  border-bottom: 2px solid rgba(255,138,48,.55);
  border-radius: 5px;
  transition: background .14s;
}
html[data-wyglad="glina"] .klik-mow:hover { background: rgba(255,138,48,.18); }

/* ========================================================= ĆWICZENIA === */

html[data-wyglad="glina"] .cw {
  border: none;
  border-radius: var(--r-xl);
  background: var(--arkusz);
  box-shadow: var(--glina-l);
  overflow: hidden;
}
html[data-wyglad="glina"] .cw-glowa {
  padding: 16px 20px;
  border: none;
  background: linear-gradient(140deg, rgba(43,127,255,.16), rgba(47,199,155,.10));
}
html[data-wyglad="glina"] .cw-nr,
html[data-wyglad="glina"] .zadanie-nr {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  color: #fff; font-weight: 900; font-size: .84rem;
  box-shadow: var(--glina-barwna);
}
html[data-wyglad="glina"] .cw-tytul {
  font-family: var(--f-tytul); font-weight: 900;
  letter-spacing: -.01em; color: var(--tekst);
}
html[data-wyglad="glina"] .cw-stopka {
  border-top: 1px solid var(--linia);
  background: var(--arkusz-2);
}

/* pola do wpisania są WKLĘSŁE — od razu widać, że to miejsce na palec */
html[data-wyglad="glina"] .luka {
  border: none;
  border-radius: 11px;
  padding: 5px 12px;
  background: var(--arkusz-3);
  box-shadow: var(--glina-wklesle);
  font-family: var(--f-de); font-weight: 600;
  color: var(--tekst);
  transition: box-shadow .16s, background .16s;
}
html[data-wyglad="glina"] .luka:focus {
  outline: none;
  background: var(--arkusz);
  box-shadow: inset 0 2px 6px rgba(13,59,68,.14), 0 0 0 4px rgba(15,163,127,.28);
}
html[data-wyglad="glina"] .luka.ok  { background: var(--ok-tlo);  box-shadow: inset 0 2px 5px rgba(15,156,133,.20), 0 0 0 3px rgba(47,199,155,.30); }
html[data-wyglad="glina"] .luka.zle { background: var(--zle-tlo); box-shadow: inset 0 2px 5px rgba(217,84,63,.20),  0 0 0 3px rgba(232,72,60,.30); }

html[data-wyglad="glina"] .opcja,
html[data-wyglad="glina"] .szyk-el,
html[data-wyglad="glina"] .para-el {
  border: none; border-radius: var(--r-s);
  background: var(--arkusz-2);
  font-weight: 700;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 4px 0 -1px var(--arkusz-3), 0 12px 20px -12px rgba(13,59,68,.55);
  transition: transform .10s ease, box-shadow .10s ease, background .14s;
}
html[data-wyglad="glina"] .opcja:hover,
html[data-wyglad="glina"] .para-el:hover { transform: translateY(-2px); background: var(--arkusz); }
html[data-wyglad="glina"] .opcja:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(13,59,68,.28); }
html[data-wyglad="glina"] .opcja[aria-pressed="true"] {
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 -1px #0a7a5e, 0 14px 24px -12px rgba(15,163,127,.85);
}
html[data-wyglad="glina"] .szyk-zapas,
html[data-wyglad="glina"] .szyk-wynik {
  border: none; border-radius: var(--r);
  background: var(--arkusz-3);
  box-shadow: var(--glina-wklesle);
}
html[data-wyglad="glina"] .odp { border-radius: var(--r-s); }
html[data-wyglad="glina"] .podpowiedz-btn {
  border: none; border-radius: 999px;
  background: var(--uwaga-tlo);
  color: var(--uwaga); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -8px rgba(255,138,48,.8);
}
html[data-wyglad="glina"] .podpowiedz-tresc,
html[data-wyglad="glina"] .wyjasnienie {
  border: none; border-radius: var(--r-s);
  background: var(--arkusz-2);
  box-shadow: var(--glina-wklesle);
}

/* ================================================ DIALOG I CZYTANKA === */

html[data-wyglad="glina"] .dialog,
html[data-wyglad="glina"] .czytanka {
  border: none;
  border-radius: var(--r-xl);
  background: var(--arkusz);
  box-shadow: var(--glina-l);
  overflow: hidden;
}
html[data-wyglad="glina"] .dialog-scena {
  border: none;
  border-radius: var(--r);
  background: linear-gradient(140deg, rgba(43,127,255,.14), rgba(255,138,48,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  font-style: normal; color: var(--tekst-2);
}
/* kwestie jak dymki rozmowy — pytający z lewej, odpowiadający z prawej */
html[data-wyglad="glina"] .kwestia {
  padding: 12px 16px;
  border: none; border-radius: 20px 20px 20px 6px;
  background: var(--arkusz-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px -12px rgba(13,59,68,.6);
}
html[data-wyglad="glina"] .kwestia:nth-child(even) {
  border-radius: 20px 20px 6px 20px;
  background: rgba(43,127,255,.10);
}
html[data-wyglad="glina"] .kwestia-kto {
  color: var(--blekit); font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; font-size: .72rem;
}
html[data-wyglad="glina"] .kwestia-de { font-family: var(--f-de); font-weight: 600; color: var(--tekst); }
html[data-wyglad="glina"] .kwestia-pl { color: var(--tekst-3); }

html[data-wyglad="glina"] .czytanka-glowa {
  border: none;
  background: linear-gradient(140deg, rgba(47,199,155,.16), rgba(43,127,255,.12));
}
html[data-wyglad="glina"] .czytanka-etykieta {
  border-radius: 999px;
  background: linear-gradient(140deg,#3ddca8,var(--zielen-2));
  color: #fff; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(47,199,155,.8);
}
html[data-wyglad="glina"] .czytanka-tytul { font-family: var(--f-tytul); font-weight: 900; letter-spacing: -.02em; }
html[data-wyglad="glina"] .czytanka-tresc { font-family: var(--f-de); }
html[data-wyglad="glina"] .czytanka-pl { color: var(--tekst-3); }
html[data-wyglad="glina"] .czytanka-pytania {
  border: none; border-radius: var(--r);
  background: var(--arkusz-2);
  box-shadow: var(--glina-wklesle);
}
html[data-wyglad="glina"] .czytanka-obrazek { border-radius: var(--r); overflow: hidden; }

/* ======================================================= SZYNA I GÓRA == */

html[data-wyglad="glina"] .szyna {
  border-right: none;
  background: linear-gradient(185deg, var(--szyna-tlo-1), var(--szyna-tlo-2));
  box-shadow: 14px 0 40px -20px rgba(7,32,39,.85);
}
html[data-wyglad="glina"] .marka b { font-family: var(--f-tytul); font-weight: 900; letter-spacing: -.02em; }
html[data-wyglad="glina"] .marka-plytka {
  border-radius: 14px;
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 8px 16px -8px rgba(0,0,0,.8);
}
html[data-wyglad="glina"] .szyna-grupa {
  color: var(--zolty); font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; font-size: .66rem;
}
html[data-wyglad="glina"] .poz {
  margin: 2px 10px;
  border-radius: 14px;
  font-weight: 700;
  transition: background .16s, transform .12s;
}
html[data-wyglad="glina"] .poz:hover { background: var(--szyna-nakladka); transform: translateX(2px); }
html[data-wyglad="glina"] .poz.aktywna,
html[data-wyglad="glina"] .poz[aria-current="page"] {
  background: linear-gradient(140deg, rgba(43,127,255,.55), rgba(15,163,127,.30));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -10px rgba(0,0,0,.9);
  color: #fff;
}
html[data-wyglad="glina"] .poz-ikona {
  border-radius: 10px;
  background: rgba(234,246,247,.10);
  font-weight: 900;
}
html[data-wyglad="glina"] .poz.aktywna .poz-ikona,
html[data-wyglad="glina"] .poz[aria-current="page"] .poz-ikona {
  background: var(--zolty); color: #0d3b44;
  box-shadow: 0 4px 10px -3px rgba(255,178,63,.8);
}
html[data-wyglad="glina"] .postep-belka > i {
  background: linear-gradient(90deg, var(--szyna-postep-1), var(--szyna-postep-2));
  border-radius: 999px;
}

html[data-wyglad="glina"] .gora {
  border-bottom: none;
  background: color-mix(in srgb, var(--tlo) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 10px 30px -22px rgba(13,59,68,.9);
}

/* ====================================================== STOPKA LEKCJI == */

html[data-wyglad="glina"] .stopka-lekcji {
  margin-top: 3rem;
  padding: 22px;
  border: none; border-radius: var(--r-xl);
  background: var(--arkusz);
  box-shadow: var(--glina);
}


/* ====================================== BARWY WOŁANE PRZEZ RYSUNKI ====== */
/* Rysunki w lekcjach malują część kształtów zmiennymi kursu, nie sztywnym
   zapisem barwy. Tutaj przestawiamy te zmienne na paletę „Gliny”, żeby
   drzewo rodziny, tabele rodzajników i żetony statystyk grały z resztą.
   Kod rodzajników zostaje systemem — zmienia się odcień, znika róż. */

html[data-wyglad="glina"] {
  --rodz-der: #2b7fff;  --rodz-der-tlo: #e3efff;
  --rodz-die: #e8483c;  --rodz-die-tlo: #fde9e6;
  --rodz-das: #0fa37f;  --rodz-das-tlo: #dff4ee;
  --rodz-pl:  #e07a12;

  --indygo:   #2b6fd0;  --indygo-tlo:   #e3eeff;
  --turkus:   #0b8394;  --turkus-tlo:   #dff1f4;
  --szmaragd: #0fa37f;  --szmaragd-tlo: #dff4ee;
  --bursztyn: #b86d14;  --bursztyn-tlo: #fdeeda;
  --fiolet:   #e07a12;  --fiolet-tlo:   #fdeeda;
  --koral:    #d63f33;  --koral-tlo:    #fde9e6;
}

html[data-wyglad="glina"][data-motyw="ciemny"] {
  --rodz-der: #8ab4ff;  --rodz-der-tlo: rgba(43,127,255,.22);
  --rodz-die: #ff8d7a;  --rodz-die-tlo: rgba(232,72,60,.22);
  --rodz-das: #4fd6b0;  --rodz-das-tlo: rgba(15,163,127,.22);
  --rodz-pl:  #ffb23f;

  --indygo:   #8ab4ff;  --indygo-tlo:   rgba(43,127,255,.22);
  --turkus:   #5cd0dc;  --turkus-tlo:   rgba(11,131,148,.22);
  --szmaragd: #4fd6b0;  --szmaragd-tlo: rgba(15,163,127,.22);
  --bursztyn: #ffb23f;  --bursztyn-tlo: rgba(184,109,20,.24);
  --fiolet:   #ffc27a;  --fiolet-tlo:   rgba(224,122,18,.22);
  --koral:    #ff8d7a;  --koral-tlo:    rgba(214,63,51,.24);
}

/* ============================================ RUCH TYLKO NA ŻYCZENIE === */

@media (prefers-reduced-motion: reduce) {
  html[data-wyglad="glina"] body::before { animation: none; }
  html[data-wyglad="glina"] * { transition-duration: .01ms !important; }
}