/* ============================================================
   konkursy.css — CSS specyficzny dla aplikacji Konkursy
   ------------------------------------------------------------
   Treść Markdown/LaTeX i widgety, układanki (edytor kratki i 13 innych
   trybów), boksy wskazówek, animacje wejścia, trening rachunkowy, fotki
   zadań i prób, drobne klasy aplikacyjne (statystyki, medale, heatmapa,
   plakietki statusu).

   Tokeny (--bg, --ink, --accent, --ok, --warn, --bad, --gold, --radius…)
   oraz komponenty ogólne (karty, przyciski, formularze, nawigacja, .tag)
   są w astra.css. Ten plik jest ładowany PO astra.css i tylko z niego
   bierze kolory — nie ma tu własnych hexów ani odwołań do Bootstrapa.

   Sekcja „Układanki" jest przeniesiona dosłownie ze starego style.css
   (zmienione są wyłącznie nazwy tokenów i cztery stałe hexy → tokeny);
   nazwy selektorów muszą zostać, bo zależy od nich 14 trybów układanek
   w JS.
   ============================================================ */

/* ============================================================
   Treść Markdown / LaTeX
   ============================================================ */
.md-content { line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
/* długie wzory (KaTeX display) i szerokie tabele przewijają się w poziomie zamiast rozpychać stronę na 375 px */
.md-content .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.md-content table { display: block; max-width: 100%; overflow-x: auto; }
.md-content table { border-collapse: collapse; margin: .5rem 0; }
.md-content td, .md-content th {
    border: 1px solid var(--line);
    padding: .25rem .5rem;
}
/* Rysunek wektorowy w treści zadania: skaluje się do szerokości i bierze kolor motywu,
   więc ten sam rysunek jest czytelny w jasnym i ciemnym. */
.md-content svg {
    display: block;
    /* width:100% jest tu konieczne: rysunki mają samo viewBox, bez atrybutu width,
       a takiemu SVG przeglądarka daje domyślne 300 px i limit 600 px nic by nie zmienił */
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: .75rem auto;
    color: var(--ink);
}

/* Widget w treści (::widget:nazwa::) — rysunek, którym uczeń sam rusza */
.kk-widget-moneta,
.kk-widget-pilka,
.kk-widget-bryla,
.kk-widget-skladanie,
.kk-widget-niezmiennik,
.kk-widget-ciecia,
.kk-widget-lustro {
    max-width: 420px;
    margin: .75rem auto;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

/*
 * Pasek z nazwą widgetu. Widget bez podpisu wygląda w rozwiązaniu jak przerwa
 * między akapitami — zwłaszcza ten, który jest tylko liczbą i dwoma guzikami.
 */
.kk-widget-naglowek {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--link);   /* --accent w dark ginie na tle; --link ma wariant dark */
    border-bottom: 1px solid var(--line);
    padding-bottom: .35rem;
    margin-bottom: .5rem;
}

/* Widget bryły: rzuty obok siebie i plansza wysokości pod nimi */
.kk-bryla-rzuty {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.kk-bryla-rzuty figure {
    margin: 0;
}

.kk-bryla-rzuty figcaption {
    font-size: .75rem;
    opacity: .7;
}

.kk-bryla-rzuty svg {
    max-width: 90px;
}

.kk-bryla-wiersz {
    display: flex;
}

/*
 * Pola planszy wysokości są kwadratowe i na tyle duże, żeby dało się w nie trafić palcem;
 * bez min-width przeglądarka zwęża je do szerokości cyfry.
 */
.kk-bryla-pole {
    min-width: 2rem;
    height: 2rem;
    border: 1px solid var(--line);
    background: transparent;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.kk-bryla-pole:hover {
    border-color: var(--accent);
}

/* Suwaki widgetów nie mają rozpychać karty na całą szerokość rozwiązania
   (.form-range zostaje jako alias, dopóki widgety generują suwaki z tą klasą) */
.kk-widget-skladanie input[type="range"],
.kk-widget-ciecia input[type="range"],
.kk-widget-skladanie .form-range,
.kk-widget-ciecia .form-range {
    max-width: 160px;
}

.kk-widget-lustro svg,
.kk-widget-skladanie svg,
.kk-widget-niezmiennik svg,
.kk-widget-ciecia svg {
    max-width: 100%;
}

/* Ilustracje wstawiane w treści rozwiązania (np. rendery brył 3D).
   Tło celowo białe także w motywie ciemnym: rendery mają białe tło wewnątrz
   obrazka, więc ciemna ramka wokół nich wyglądałaby jak błąd. */
.md-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: .75rem auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: white;
}

/* ============================================================
   Układanki (edytor kratki)
   ============================================================ */
/* karta startuje ukryta i pokazuje ją dopiero skrypt — bez tego mrugałaby pusta ramka
   na każdym zadaniu bez układanki (Bootstrap ma tę regułę, ale nie polegamy na CDN-ie) */
[data-ukladanka][hidden] { display: none !important; }

.ukladanka-kratka {
    max-width: 100%;
    height: auto;
    touch-action: manipulation;   /* bez czekania na podwójne stuknięcie na telefonie */
}
.ukladanka-kratka .pole {
    fill: var(--surface);
    stroke: var(--muted);
    stroke-width: 2;
}
.ukladanka-kratka .pole-stale { fill: var(--surface-2); }
.ukladanka-kratka .wartosc {
    text-anchor: middle;
    dominant-baseline: central;
    font-size: 24px;
    font-weight: 700;
    fill: var(--ink);
    pointer-events: none;
    user-select: none;
}
.ukladanka-kratka .pole-grupa { cursor: pointer; }
.ukladanka-kratka .pole-grupa-stala { cursor: not-allowed; }
.ukladanka-kratka .pole-grupa:not(.pole-grupa-stala):hover .pole { fill: var(--accent-soft); }
.ukladanka-kratka .pole-grupa:focus { outline: none; }
.ukladanka-kratka .pole-grupa:focus-visible .pole {
    stroke: var(--accent);
    stroke-width: 4;
}
/* ---- tryb kawałków: figura na kratce + paleta kształtów ---- */
.ukladanka-kawalki {
    max-width: 100%;
    height: auto;
    touch-action: manipulation;
    user-select: none;
}
.ukladanka-kawalki .pole {
    fill: var(--surface);
    stroke: var(--muted);
    stroke-width: 2;
}
.ukladanka-kawalki .kawalek {
    stroke: var(--surface);
    stroke-width: 2;
    fill-opacity: .85;
}
.ukladanka-kawalki .podglad-dobry,
.ukladanka-kawalki .podglad-zly {
    pointer-events: none;
    fill-opacity: .45;
}
.ukladanka-kawalki .podglad-dobry { fill: var(--ok); }
.ukladanka-kawalki .podglad-zly { fill: var(--bad); }
.ukladanka-kawalki .etykieta {
    text-anchor: middle;
    dominant-baseline: central;
    font-size: 20px;
    font-weight: 700;
    fill: var(--ink);
    pointer-events: none;
}
/* przezroczysta nakładka na całą kratkę: jedno miejsce, w którym łapiemy klik i ruch myszy */
.ukladanka-kawalki .lapacz { fill: transparent; cursor: pointer; }

/* ---- tryb bryły: kanwa three.js ---- */
.ukladanka-bryla {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
    touch-action: none;     /* przeciąganie obraca kamerę, a nie przewija stronę */
}
.ukladanka-bryla canvas { display: block; max-width: 100%; cursor: pointer; }
.ukladanka-bryla-blok:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- tryb modelu paskowego: wielkości z treści zadania jako paski na wspólnej skali ---- */
.ukladanka-model { display: flex; flex-direction: column; gap: .5rem; }
.model-wiersz {
    display: grid;
    grid-template-columns: minmax(5.5rem, 9rem) 1fr minmax(3.5rem, auto);
    align-items: center;
    gap: .5rem;
}
.model-etykieta { font-size: .9rem; color: var(--ink); }
.model-tor {
    position: relative;
    height: 2rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    touch-action: none;      /* przeciąganie ustawia pasek, a nie przewija stronę */
    overflow: hidden;
}
.model-tor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model-wypelnienie { height: 100%; width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
/* pasek nietknięty ma być widocznie PUSTY, a nie wyglądać jak ustawione zero */
.model-wypelnienie.pusty { background: transparent !important; }
/* pasek dany w zadaniu (cena z tablicy) — widoczny, ale nie do ruszenia, jak pole stałe w kratce */
.model-tor.model-dany { background: var(--surface-2); cursor: not-allowed; }
.model-liczba { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.model-jednostka { font-weight: 400; color: var(--muted); font-size: .85rem; }

/* ---- tryb zbiorów: rozstrzyganie o każdym kandydacie z osobna ---- */
.zbiory-pytanie { font-weight: 600; margin-bottom: .5rem; }
.zbiory-wiersz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .35rem;
    background: var(--surface);
}
/* pozycja jeszcze nierozstrzygnięta ma być widoczna — to ona wstrzymuje zakończenie pracy */
.zbiory-wiersz.nierozstrzygniety { border-style: dashed; }
.zbiory-etykieta { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.zbiory-przyciski { display: flex; gap: .35rem; }
.zbiory-guzik {
    padding: .25rem .6rem;
    font-size: .85rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.zbiory-guzik:hover { border-color: var(--accent); }
.zbiory-tak.wybrany { border-color: var(--ok); background: var(--ok); color: var(--accent-ink); }
.zbiory-nie.wybrany { border-color: var(--muted); background: var(--surface-2); }

/* ---- tryb sita: kandydaci na warunki, rozstrzyganie komórka po komórce ---- */
.sito-polecenie { font-weight: 600; margin-bottom: .5rem; }
/* tabela ma własne przewijanie w poziomie: strona nie może jechać na boki na telefonie */
.sito-przewijanie { overflow-x: auto; }
.sito-tabela { border-collapse: collapse; min-width: 100%; }
.sito-tabela th, .sito-tabela td {
    border: 1px solid var(--line);
    padding: .35rem .5rem;
    text-align: center;
}
.sito-naglowek-warunku {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    max-width: 11rem;
    vertical-align: bottom;
}
.sito-kandydat {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.sito-komorka {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.1rem;
    line-height: 1;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.sito-komorka:hover { border-color: var(--accent); }
/* komórka nierozstrzygnięta ma być widoczna — to ona wstrzymuje zakończenie pracy */
.sito-komorka.nierozstrzygnieta { border-style: dashed; color: var(--muted); }
.sito-komorka.spelnia { border-color: var(--ok); background: var(--ok); color: var(--accent-ink); }
.sito-komorka.nie-spelnia { border-color: var(--muted); background: var(--surface-2); }
/* wiersz z samymi ptaszkami: rysunek własnej pracy dziecka, nie podpowiedź silnika */
.sito-wiersz.sito-przezywa .sito-kandydat { font-weight: 700; color: var(--ok); }
.sito-odpowiedz { margin-top: .75rem; }
.sito-pytanie { font-weight: 600; margin-bottom: .35rem; }
.sito-wybor { display: flex; flex-wrap: wrap; gap: .35rem; }
.sito-guzik-odpowiedzi {
    padding: .3rem .7rem;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.sito-guzik-odpowiedzi:hover { border-color: var(--accent); }
.sito-guzik-odpowiedzi.wybrany { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

/* ---- tryb tabeli kroków: proces rozpisany wiersz po wierszu ---- */
.kroki-polecenie { font-weight: 600; margin-bottom: .5rem; }
/* tabela ma własne przewijanie w poziomie: strona nie może jechać na boki na telefonie */
.kroki-przewijanie { overflow-x: auto; }
.kroki-tabela { border-collapse: collapse; }
.kroki-tabela th, .kroki-tabela td {
    border: 1px solid var(--line);
    padding: .2rem .3rem;
    text-align: center;
}
.kroki-tabela thead th { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.kroki-numer { color: var(--muted); font-weight: 600; font-size: .85rem; }
.kroki-komorka {
    width: 4rem;
    height: 2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
}
.kroki-liczbowa:focus { border-color: var(--accent); outline: none; }
.kroki-wyborowa { width: 7rem; cursor: pointer; font-size: .85rem; }
.kroki-wyborowa.pusta { border-style: dashed; color: var(--muted); }
/* pole dane w treści zadania: widoczne, ale nie do ruszenia — jak pole stałe w kratce */
.komorka-dana { background: var(--surface-2); color: var(--muted); font-weight: 700; }
/* wpis nieczytelny albo spoza zakresu zostaje na ekranie, ale do serwera nie jedzie */
.kroki-komorka.nieczytelna { border-color: var(--warn); }
/* wiersz, który się jeszcze nie wydarzył: widoczny, ale przygaszony */
.kroki-wiersz-pusty { opacity: .55; }
.kroki-odpowiedz { margin-top: .75rem; }
.kroki-pytanie { display: block; font-weight: 600; margin-bottom: .35rem; }
.kroki-pole-odpowiedzi {
    width: 6rem;
    padding: .25rem .4rem;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
}
.kroki-pole-odpowiedzi.nieczytelna { border-color: var(--warn); }

/* ---- tryb wymiarów: wielkości z rysunku wpisywane w podpisane pola ---- */
.wymiary-polecenie { font-weight: 600; margin-bottom: .5rem; }
.wymiary-lista { display: flex; flex-direction: column; gap: .4rem; max-width: 26rem; }
.wymiary-wiersz { display: flex; align-items: center; gap: .5rem; }
.wymiary-etykieta { flex: 1 1 auto; font-size: .95rem; }
.wymiary-pole {
    flex: 0 0 auto;
    width: 5rem;
    padding: .25rem .4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
}
.wymiary-pole:focus { border-color: var(--accent); outline: none; }
.wymiary-pole.nieczytelna { border-color: var(--warn); }
.wymiary-jednostka { flex: 0 0 2.5rem; font-size: .85rem; color: var(--muted); }

/* ---- tryb ścieżki: rysowanie figury bez odrywania ołówka ---- */
.sciezka-polecenie { font-weight: 600; margin-bottom: .5rem; }
.sciezka-rysunek { width: 100%; max-width: 26rem; height: auto; }
.kreska { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.kreska.dostepna { stroke: var(--accent); }
.kreska.narysowana { stroke: var(--ink); stroke-width: 6; }
/* gruby przezroczysty łapacz: palec dwunastolatka ma w co trafić */
.kreska-lapacz { stroke: transparent; stroke-width: 24; cursor: pointer; }
.sciezka-punkt {
    fill: var(--surface);
    stroke: var(--muted);
    stroke-width: 2;
    cursor: pointer;
}
.sciezka-punkt.start-do-wyboru { stroke: var(--accent); stroke-dasharray: 3 2; }
.sciezka-punkt.olowek { fill: var(--accent); stroke: var(--accent); }
.sciezka-dlugosc {
    font-size: 13px;
    text-anchor: middle;
    fill: var(--ink);
    font-variant-numeric: tabular-nums;
}
.sciezka-krotnosc { font-size: 13px; text-anchor: middle; fill: var(--accent); font-weight: 700; }
.sciezka-etykieta { font-size: 12px; fill: var(--muted); }

/* ---- tryb przekształceń: napis i jego odbicie w szybie ---- */
.lustro-polecenie { font-weight: 600; margin-bottom: .5rem; }
.lustro-podpis { font-size: .8rem; color: var(--muted); margin: .35rem 0 .2rem; }
.lustro-rzad { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.lustro-kolumna { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.lustro-znak {
    width: 3rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
}
.lustro-zrodlo .lustro-znak { background: var(--surface-2); }
/* Cyfra rysowana siedmioma segmentami, jak na tablicy z zadania. Ten sam glif w obu rzędach,
   więc napis na szybie i jego odbicie są tym samym pismem. */
.lustro-glif { width: 1.5rem; height: 2.5rem; fill: currentColor; }
/* prawdziwe odbicie rysunku: przy zapisie segmentowym odbita dwójka staje się piątką — i o to
   w tym zadaniu chodzi. Odbijamy sam glif, nie ramkę pola */
.lustro-znak.odbity .lustro-glif { transform: scaleX(-1); transform-origin: center; }
.lustro-znak.pusty { color: var(--muted); border-style: dashed; }
.lustro-wybor { cursor: pointer; }
.lustro-wybor:hover { border-color: var(--accent); }
.lustro-odbij {
    font-size: .75rem;
    padding: .1rem .45rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.lustro-odbij.wybrany { border-color: var(--accent); background: var(--accent-soft); }
/* szyba między napisem a odbiciem — bez niej trudno zobaczyć, gdzie jest oś lustra */
.lustro-szyba {
    height: 3px;
    margin: .5rem 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .6;
}

/* ---- tryb składania klap: trzy siatki, jedna pod drugą ---- */
.siatka-polecenie { font-weight: 600; margin-bottom: .5rem; }
.siatka-etap { margin-bottom: .9rem; }
.siatka-podpis { font-size: .8rem; color: var(--muted); margin: .3rem 0 .25rem; }
.siatka-kratka { display: grid; gap: 2px; }
.siatka-komorka {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
}
.siatka-klikalna { cursor: pointer; }
.siatka-klikalna:hover { border-color: var(--accent); }
/* otwór = dziura w klapie: pole prześwituje, więc liczbę widać wyraźnie */
.siatka-komorka.otwor { background: var(--accent-soft); border-color: var(--accent); }
/* brak otworu = klapa zasłania liczbę */
.siatka-komorka.bez-otworu { background: var(--surface-2); color: var(--muted); opacity: .55; }
/* pole, o którym dziecko jeszcze nie rozstrzygnęło — wstrzymuje zakończenie pracy */
.siatka-komorka.nierozstrzygniete { border-style: dashed; }
.siatka-rysunek .siatka-komorka { font-size: .75rem; }

/* ---- tryb kolejności: pasek miejsc z imionami ---- */
.kolejnosc-polecenie { font-weight: 600; margin-bottom: .5rem; }
.kolejnosc-lista { display: flex; flex-direction: column; gap: .3rem; max-width: 22rem; }
.kolejnosc-wiersz { display: flex; align-items: center; gap: .5rem; }
.kolejnosc-numer { width: 2rem; text-align: right; font-weight: 700; color: var(--muted); }
.kolejnosc-osoba {
    flex: 1;
    padding: .4rem .7rem;
    text-align: left;
    font-size: 1rem;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
}
.kolejnosc-osoba:hover { border-color: var(--accent); }
/* miejsce jeszcze nieobsadzone — wstrzymuje zakończenie pracy */
.kolejnosc-osoba.puste { border-style: dashed; color: var(--muted); }
.kolejnosc-podpis { font-size: .8rem; color: var(--muted); margin-top: .4rem; }

/* ---- pasek z klockami / kształtami, wspólny dla obu trybów ---- */
.ukladanka-paleta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}
.ukladanka-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 66px;
    padding: .35rem .4rem;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
}
.ukladanka-slot:hover { border-color: var(--accent); }
.ukladanka-slot.wybrany {
    border-color: var(--accent);
    background: var(--accent-soft);
}
/* klocek, który już stoi w budowli — zostaje na swoim numerze, żeby cyfry się nie przestawiały */
.ukladanka-slot.uzyty { opacity: .4; }
.ukladanka-slot-podpis { font-size: .75rem; line-height: 1; }
.ukladanka-mini { display: block; height: 34px; width: auto; }
.ukladanka-mini .mini-pole {
    fill: var(--accent);
    fill-opacity: .8;
    stroke: var(--surface);
    stroke-width: 1;
}

/* Układanka wycofana z użycia (np. przestała być zatwierdzona) — widać ją, ale nie reaguje.
   To jest wyłącznie warstwa wyglądu: `pointer-events` nie tłumi fokusu ani klawiatury,
   więc prawdziwą blokadę zakłada tryb w `zablokuj()` (tabindex="-1" + wyjście na wejściu). */
.ukladanka-zamknieta { opacity: .55; pointer-events: none; }

/* Ułożenie z próby: ta sama blokada, ale bez przygaszenia. Przygaszenie znaczy „ta układanka
   przestała działać"; tutaj plansza jest treścią do przeczytania — tata ocenia po niej pracę,
   więc ma być czytelna jak zwykła kratka. Blokada (tabindex, brak reakcji) zostaje. */
.ukladanka-podglad .ukladanka-zamknieta { opacity: 1; }
.ukladanka-podglad .ukladanka-kratka .pole-grupa { cursor: default; }

/* Wynik sprawdzania czyta się w napięciu — zwłaszcza ten po nieudanej próbie — więc kontrast
   musi wychodzić powyżej 4,5:1 WCAG AA. W starej palecie wymagało to trzech osobnych,
   ciemniejszych hexów; tokeny Astry (--ok, --warn, --accent) są strojone pod tekst na
   powierzchni i próg spełniają w obu motywach, więc lokalne zmienne tylko je przepinają
   (nazwy --kk-ukl-* zostają — nic w JS ich nie czyta, ale nie ma powodu ich zmieniać). */
.ukladanka-komunikaty {
    font-size: .95rem;
    --kk-ukl-dobrze: var(--ok);
    --kk-ukl-zle: var(--warn);
    --kk-ukl-czekam: var(--accent);
}
.ukladanka-komunikaty.dobrze { color: var(--kk-ukl-dobrze); font-weight: 600; }
.ukladanka-komunikaty.zle { color: var(--kk-ukl-zle); }
.ukladanka-komunikaty.niedokonczone { color: var(--kk-ukl-czekam); }
.ukladanka-komunikaty.niepewne { color: var(--muted); font-style: italic; }
.ukladanka-komunikaty.info { color: var(--muted); }

/* ============================================================
   Boksy wskazówek / rozwiązania
   ============================================================ */
.hint-box {
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
}
.solution-box {
    border-left: 4px solid var(--ok);
    background: var(--ok-soft);
    color: var(--ink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: .75rem 1rem;
}

/* ============================================================
   Animacje wejścia (tylko transform/opacity)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .kk-enter {
        animation: kkFadeUp 420ms var(--kk-ease, cubic-bezier(.22, .61, .36, 1)) both;
    }
    /* kaskada dla list kart: 80ms odstępu */
    .kk-stagger > * { animation: kkFadeUp 420ms var(--kk-ease, cubic-bezier(.22, .61, .36, 1)) both; }
    .kk-stagger > *:nth-child(1) { animation-delay: 0ms; }
    .kk-stagger > *:nth-child(2) { animation-delay: 80ms; }
    .kk-stagger > *:nth-child(3) { animation-delay: 160ms; }
    .kk-stagger > *:nth-child(4) { animation-delay: 240ms; }
    .kk-stagger > *:nth-child(5) { animation-delay: 320ms; }
    .kk-stagger > *:nth-child(6) { animation-delay: 400ms; }
    .kk-stagger > *:nth-child(n+7) { animation-delay: 480ms; }
}
@keyframes kkFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Trening rachunkowy: duży przykład, klawiatura ekranowa, heatmapa
   Kolory werdyktu jak w układankach — jeden język w całej aplikacji.
   ============================================================ */
/* Tresc przykladu. Font UI, nie mono: wieksza czesc promptow to zdania po polsku
   ("Jaka jest cyfra jednosci liczby 8^15?"), a mono ma dla nich zle proporcje i zjada
   szerokosc. Cyfry i tak dostaja tabularne szerokosci, wiec liczby sa rowne.
   Rozmiar bazowy jest pod ZDANIE; krotkie dzialania powieksza .kk-drill-prompt-krotki
   (klase ustawia trening.js po dlugosci tresci). */
.kk-drill-prompt {
    font-family: var(--font-ui);
    font-size: clamp(1.35rem, 4vw, 2.1rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1.25;
    text-wrap: balance;
}
.kk-drill-prompt-krotki {
    font-size: clamp(2.2rem, 8vw, 3.4rem);
    letter-spacing: .01em;
    line-height: 1.1;
}
.kk-drill-prompt-dlugi { font-size: clamp(1.2rem, 3.2vw, 1.7rem); }
/* Wykladnik jako prawdziwy <sup> — rowna linia bazowa i jedna szerokosc cyfr,
   czego unicode'owe indeksy gorne (8¹⁵) nie daja. */
.kk-drill-prompt sup {
    font-size: .55em;
    font-weight: 700;
    line-height: 0;
    vertical-align: super;
    margin-left: .04em;
}
.kk-drill-odp {
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    font-variant-numeric: tabular-nums;
    text-align: center;
    width: 100%;
    max-width: 12ch;
    padding: .3rem .5rem;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--ink);
}
.kk-drill-odp:focus { outline: none; border-color: var(--accent); }
.kk-drill-odp-mala { max-width: 6ch; }
.kk-drill-kreska {
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    color: var(--muted);
}
.kk-drill-stoper {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.kk-drill-karta { transition: background var(--anim) var(--kk-ease, ease); }
.kk-drill-karta.dobrze { background: var(--ok-soft); }
.kk-drill-karta.zle    { background: var(--bad-soft); }
.kk-drill-werdykt { min-height: 2.2rem; font-weight: 600; }
.kk-drill-werdykt.dobrze { color: var(--ok); }
.kk-drill-werdykt.zle    { color: var(--bad); }
.kk-drill-werdykt.info   { color: var(--muted); font-weight: 500; }

/* Klawiatura ekranowa — pod tablet i telefon; na dużym ekranie też działa myszą. */
.kk-numpad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    max-width: 20rem;
    margin: 0 auto;
}
.kk-numpad button {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    padding: .55rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}
.kk-numpad button:active { transform: translateY(1px); }
.kk-numpad button.kk-numpad-akcja { background: var(--accent-soft); color: var(--green); }
.kk-numpad button.kk-numpad-szeroki { grid-column: span 2; }

/* Heatmapa tabliczki: obrazek zamiast tabeli liczb. */
.kk-heat { border-collapse: separate; border-spacing: 2px; font-size: .72rem; }
.kk-heat th {
    color: var(--muted);
    font-weight: 500;
    text-align: center;
    padding: 0 .2rem;
}
.kk-heat td {
    width: 1.7rem; height: 1.7rem;
    text-align: center; vertical-align: middle;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
/* Tokeny --heat-* (astra.css): pełne kolory zamiast pasteli, bo 5 odcieni „-soft" zlewało
   się w jedną plamę (tata, 14 IX 2026). Opanowane = pełna zieleń z jasną cyfrą. */
.kk-heat td.brak       { background: var(--heat-brak);      color: var(--heat-brak-ink); }
.kk-heat td.slaby      { background: var(--heat-slaby);     color: var(--heat-slaby-ink); font-weight: 600; }
.kk-heat td.sredni     { background: var(--heat-sredni);    color: var(--heat-sredni-ink); }
.kk-heat td.dobry      { background: var(--heat-dobry);     color: var(--heat-dobry-ink); }
.kk-heat td.opanowany  { background: var(--heat-opanowany); color: var(--heat-opanowany-ink); font-weight: 600; }
.kk-heat-legenda span {
    display: inline-block; width: .9rem; height: .9rem;
    border-radius: 3px; vertical-align: -2px; margin-right: .25rem;
}

/* ============================================================
   Odznaki etapów treningu: gwiazdka z numerem poziomu w środku.
   Kruszec = tempo (patrz DrillService.stopien), pusta gwiazdka = etap
   zaliczony, ale wolniej niż 5 s. Nietkniety etap to puste kolko.
   Kruszce biorą kolory z tokenów (brąz = --orange, srebro = --muted,
   złoto = --gold), więc motyw ciemny nie potrzebuje osobnych nadpisań.
   ============================================================ */
.kk-medale { display: inline-flex; gap: .2rem; vertical-align: middle; }
.kk-medal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    line-height: 1;
}
.kk-medal-gwiazdka {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.kk-medal-nr {
    position: relative;
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* numer siedzi na gwiazdce, wiec potrzebuje wlasnego kontrastu */
    color: var(--ink);
    text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface);
}
/* Etap niedomkniety: kolko zamalowane KWADRATEM postepu (patrz DrillService.wypelnienie).
   conic-gradient zamiast paska, zeby bylo widac "ile kolka juz jest". */
.kk-medal-kolko {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: conic-gradient(var(--accent) 0 var(--kk-fill, 0%),
                               transparent var(--kk-fill, 0%));
}
.kk-medal-wtoku .kk-medal-kolko { border-color: var(--accent); }
.kk-medal-brak  .kk-medal-nr    { color: var(--muted); text-shadow: none; }
.kk-medal-wtoku .kk-medal-nr    { color: var(--ink); }
.kk-medal-pusta .kk-medal-gwiazdka { color: var(--surface-2); }
.kk-medal-braz  .kk-medal-gwiazdka { color: var(--orange); }
.kk-medal-srebro .kk-medal-gwiazdka { color: var(--muted); }
.kk-medal-zloto .kk-medal-gwiazdka { color: var(--gold); }
.kk-medal-pusta .kk-medal-nr,
.kk-medal-braz  .kk-medal-nr,
.kk-medal-srebro .kk-medal-nr,
.kk-medal-zloto .kk-medal-nr { color: var(--ink); text-shadow: none; }

.kk-legenda {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
}
.kk-legenda li { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }

/* Rysunek do zadania (geometria, katy) i przyciski TAK/NIE. */
.kk-drill-figura svg { max-height: 160px; }
.kk-drill-taknie {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 6rem;
    padding: .5rem 1.25rem;
}
.kk-drill-taknie.active { background: var(--accent); color: var(--accent-ink); }

/* „Jak to policzyc" po pomylce — rachunek na konkretnych liczbach, nie regulka. */
.kk-drill-wyjasnienie {
    font-family: var(--font-ui);
    font-size: clamp(.95rem, 2.4vw, 1.15rem);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    display: inline-block;
    max-width: 40rem;
}
.kk-drill-wyjasnienie sup { font-size: .6em; line-height: 0; vertical-align: super; }

/* ============================================================
   Zdjęcia
   ============================================================ */
.task-photo {
    max-width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    cursor: zoom-in;
}
/* .kk-fotka-proby siedzi na tym samym <img> — to hak dla JS (lightbox), bez własnego wyglądu */
.attempt-photo {
    max-width: 180px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    cursor: zoom-in;
}

/* ============================================================
   Drobne klasy aplikacyjne
   ============================================================ */
/* Zdobyta odznaka: złote tło zamiast samej zielonej ramki. Gradient jest bardzo płaski
   (dwa bliskie przystanki), żeby tekst na kafelku dalej czytał się bez wysiłku;
   drugi przystanek bierze --gold-soft-2, a gdy astra.css go nie ma — jednolite --gold-soft. */
.kk-ach-earned {
    background: linear-gradient(145deg, var(--gold-soft) 0%, var(--gold-soft-2, var(--gold-soft)) 100%);
    box-shadow: 0 6px 18px rgba(164, 123, 52, .18);
    border-color: var(--gold-border);
}
.kk-ach-earned .muted {
    color: var(--gold) !important;   /* opis na złotym tle — szary siada za nisko na kontraście */
}
.kk-ach-earned .tag {
    background: rgba(255, 255, 255, .55) !important;
    color: var(--gold) !important;
}
.kk-ach-earned .badge-medal { background: var(--gold); color: #fff; }   /* pełne złoto pod ikoną */
.kk-ach-earned h3, .kk-ach-earned strong { color: #5a4210; }
:root[data-theme="dark"] .kk-ach-earned h3, :root[data-theme="dark"] .kk-ach-earned strong { color: #fbe9b5; }
:root[data-theme="dark"] .kk-ach-earned .badge-medal { color: #2a2008; }
:root[data-theme="dark"] .kk-ach-earned .tag {
    background: rgba(0, 0, 0, .25) !important;
}

/* ============================================================
   Arena (mecze na zestawach treningu)
   ============================================================ */
/* Kolumny siatki .split mają min-width:auto, więc długa opcja listy przykładów i tabela
   meczów rozpychały stronę na telefonie do 441 px (zmierzone 15.09.2026). */
.kk-arena-hub > * { min-width: 0; }
input.kk-arena-kod-pole { width: 9.5ch; text-transform: uppercase; letter-spacing: .12em; }
.kk-arena-kod {
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 8vw, 3.6rem);
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--green);
    margin: 0;
}
.kk-arena-lobby {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.kk-arena-odliczanie {
    font-family: var(--font-head);
    font-size: clamp(4rem, 18vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    margin: 0;
}
/* Wskaźnik łącza: kropka + słowo. Kolor to stan, słowo to to samo dla czytnika. */
.kk-arena-lacze { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.kk-arena-lacze::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--muted);
}
.kk-arena-lacze[data-stan="ok"]::before    { background: var(--ok); }
.kk-arena-lacze[data-stan="slabe"]::before { background: var(--warn); }
.kk-arena-lacze[data-stan="brak"]::before  { background: var(--bad); }

/* Lina: węzeł jedzie w stronę prowadzącego. Środek toru = remis. */
.kk-arena-lina {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ok-soft), var(--surface-2) 50%, var(--bad-soft));
    border: 1px solid var(--line);
}
.kk-arena-lina-srodek {
    position: absolute;
    left: 50%; top: -4px; bottom: -4px;
    width: 2px;
    background: var(--line);
}
.kk-arena-lina-wezel {
    position: absolute;
    left: 50%; top: 50%;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: var(--shadow);
    transform: translate(-50%, -50%);
    transition: left .35s var(--kk-ease, ease);
}
@media (prefers-reduced-motion: reduce) {
    .kk-arena-lina-wezel { transition: none; }
}
.kk-arena-paski { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.kk-arena-paski li.ja strong { color: var(--green); }

.kk-arena-podium { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kk-arena-podium li {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.kk-arena-podium li.pierwszy { background: var(--gold-soft); border: 1px solid var(--gold-border); }
.kk-arena-podium li.ja { outline: 2px solid var(--accent); outline-offset: -2px; }
.kk-arena-miejsce { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; }

/* ============================================================
   Ustawienia: wybór odcienia tła (próbka: lewa połowa jasny, prawa ciemny)
   Kolory próbek powtarzają palety z astra.css §10 — zmiana tam = zmiana tu.
   ============================================================ */
.kk-odcienie { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.kk-odcien { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.kk-odcien input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kk-odcien:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kk-odcien:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.kk-odcien-nazwa { font-size: 13px; font-weight: 600; text-align: center; }
.kk-odcien-probka { display: grid; grid-template-columns: 1fr 1fr; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.kk-odcien-probka > span { padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; background: var(--p-bg); }
.kk-odcien-probka i { display: block; height: 14px; border-radius: 3px; background: var(--p-surface); border: 1px solid var(--p-line); }
.kk-odcien-probka i + i { width: 70%; }
[data-probka=ZIELONY] .jasny  { --p-bg: #f6f7f2; --p-surface: #fff;    --p-line: #e6e9e0; }
[data-probka=ZIELONY] .ciemny { --p-bg: #16251f; --p-surface: #1d2e26; --p-line: #34463b; }
[data-probka=SZARY] .jasny    { --p-bg: #f5f5f4; --p-surface: #fff;    --p-line: #e4e4e1; }
[data-probka=SZARY] .ciemny   { --p-bg: #1b1c1d; --p-surface: #232527; --p-line: #3a3d40; }
[data-probka=CZARNY] .jasny   { --p-bg: #f3f3f4; --p-surface: #fff;    --p-line: #e2e2e5; }
[data-probka=CZARNY] .ciemny  { --p-bg: #09090a; --p-surface: #131314; --p-line: #2a2a2d; }
[data-probka=ZOLTY] .jasny    { --p-bg: #f8f5ea; --p-surface: #fffdf7; --p-line: #e8e0c8; }
[data-probka=ZOLTY] .ciemny   { --p-bg: #1f1a0c; --p-surface: #282112; --p-line: #4a3f23; }
[data-probka=CZERWONY] .jasny { --p-bg: #f8f1f0; --p-surface: #fffafa; --p-line: #eadad7; }
[data-probka=CZERWONY] .ciemny { --p-bg: #211213; --p-surface: #2b191a; --p-line: #4c2e30; }

/* Plakietki statusu zadania (jedyna definicja — astra.css ich nie powtarza). */
.tag.status-NOWE        { background: var(--surface-2);  color: var(--ink); }
.tag.status-ROZWIAZANE  { background: var(--soft);       color: var(--green); }
/* OTWARTE = uczeń widział treść, ale nic jeszcze nie oddał — celowo bliżej „nietkniętego"
   niż treningu, żeby plakietka nie sugerowała pracy, której nie było */
.tag.status-OTWARTE     { background: var(--surface-2);  color: var(--muted); }
.tag.status-W_TRENINGU  { background: var(--warn-soft);  color: var(--warn); }
.tag.status-OPANOWANE   { background: var(--ok-soft);    color: var(--ok); }
[data-theme=dark] .tag.status-ROZWIAZANE { color: #cee1b2; }