/* Kuźnia Księgowych – sceny wideo (sceny.js). Płótno 960×540 skalowane do szerokości sceny. */
@property --th { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

/* Wygląd wg style-guide.html (v2): krem, grafit, pomarańcz, pastele; zasady w skillu scenariusz-wideo.
   Kolory pieniędzy: przychody #2B7BD6, koszty i strata #DC2626, zysk/dochód #1F9D55. Wn #1D4ED8, Ma #C2410C. */
.player.ma-sceny .stage { background: #F8F6F1; }
/* logo i numer lekcji rysuje każda scena (.kk-gora) – pasek odtwarzacza byłby powtórzeniem */
.player.ma-sceny .stage-top { display: none; }
.player.ma-sceny .scene { inset: 0; display: block; }

.kk-c { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; font-family: var(--font-sans); color: #1E1E1E; animation: kkFade 0.4s ease both; isolation: isolate; }
.kk-c * { box-sizing: border-box; }
.kk-ico { width: 1em; height: 1em; flex: none; }
.kk-k { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s; }
.kk-k.on { opacity: 1; transform: none; }
.kk-c .przygas, .kk-c .kk-k.on.przygas { opacity: 0.28; filter: grayscale(0.7); }
/* nic przed ujawnieniem: przygaszamy tylko to, co już weszło – element, którego kolej jeszcze nie przyszła, zostaje niewidoczny */
.kk-c .kk-k.przygas:not(.on) { opacity: 0; }
@keyframes kkFade { from { opacity: 0; } to { opacity: 1; } }
/* „Pomyśl…” – cisza na odpowiedź w myślach po pytaniu do kursanta (sceny.js, pomysl); kółko odlicza czas */
.kk-pomysl { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; background: #FFF4CC; border: 2px solid #1E1E1E; border-radius: 999px; font-size: 19px; font-weight: 700; z-index: 6; animation: kkFade 0.3s ease both; }
.kk-pomysl svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.kk-pomysl circle { fill: none; stroke-width: 4; }
.kk-pomysl .t { stroke: #E8DFC4; }
.kk-pomysl .p { stroke: #F2561D; stroke-dasharray: 94.25; stroke-dashoffset: 0; animation: kkOdliczaj var(--czas, 3000ms) linear both; }
@keyframes kkOdliczaj { to { stroke-dashoffset: 94.25; } }
.kk-m2 .kk-pomysl { background: #EFE6D2; border-color: #5B2A5E; }
.kk-m2 .kk-pomysl .p { stroke: #5B2A5E; }
/* ciąg dalszy tego samego bloku (sceny.js, ciag): bez wygaszania kadru i bez ponownego wejścia postaci */
.kk-c.kk-dalej, .kk-c.kk-m2.kk-dalej { animation: none; }
.kk-dalej .kk-os:not(.kk-k), .kk-dalej .kk-kot:not(.kk-k) { animation: none; }
@keyframes kkPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* logo (style guide: „Kuźnia” + kropka Anny, pod spodem „KSIĘGOWYCH”) i numer lekcji – w każdej scenie.
   W rogu sceny samo „Kuźnia” + kropka (napis „KSIĘGOWYCH” byłby za drobny), pełny znak – na planszy tytułowej. */
.kk-gora { position: absolute; left: 32px; right: 32px; top: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 3; pointer-events: none; }
.kk-gora .nr { font-size: 14px; font-weight: 600; color: #5B5955; }
.kk-logo { display: inline-flex; flex-direction: column; align-items: flex-start; font-size: 24px; line-height: 1; color: #1E1E1E; }
.kk-logo .w { font-weight: 800; letter-spacing: -0.035em; }
.kk-logo .kropka { width: 0.549em; height: 0.549em; margin-left: 0.07em; vertical-align: baseline; fill: #FF662A; }
.kk-logo .sub { display: none; font-weight: 600; font-size: 0.34em; letter-spacing: 0.418em; margin: 0.32em -0.418em 0 0.05em; text-transform: uppercase; }
.kk-logo.duze { font-size: 72px; }
.kk-logo.duze .sub { display: block; }

/* tytuł sceny (fontem tekstu) i odręczny nadtytuł karty (krótki tag, style guide: 1–4 słowa) */
.kk-nad { font-family: var(--font-hand); color: #C2410C; font-size: 28px; line-height: 1; }
.kk-nad.dlugi { font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 1.3; }
.kk-nad-abs { position: absolute; left: 44px; top: 50px; font-family: var(--font-sans); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: #1E1E1E; }
.kk-karta { position: absolute; background: #FFFFFF; border: 1.5px solid #E7E1D6; border-radius: 20px; padding: 20px 24px; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 8px 24px -18px rgba(30, 30, 30, 0.25); }
.kk-tyt { font-weight: 800; font-size: 28px; line-height: 1.18; letter-spacing: -0.02em; margin-top: 4px; }
.kk-pkt { display: flex; gap: 14px; align-items: center; font-size: 21px; line-height: 1.25; margin-top: 14px; font-weight: 600; }
.kk-ico-w { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #FFF1E8; color: #C2410C; display: grid; place-items: center; font-size: 24px; }
.kk-pkt.skreslone .t { text-decoration: line-through; text-decoration-color: #DC2626; text-decoration-thickness: 3px; color: #5B5955; }
.kk-pkt.skreslone .kk-ico-w { background: #FEF2F2; color: #DC2626; }
.kk-pkt.uwaga .kk-ico-w { background: #FFF4CC; color: #B45309; }
.kk-pkt.uwaga .t { font-weight: 800; }
.kk-chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-chipy span { background: #FFDE7B; border-radius: 999px; padding: 4px 16px; font-size: 20px; font-weight: 700; opacity: 0; }
.kk-pkt.on .kk-chipy span { animation: kkPop 0.35s ease both; }
.kk-stopka { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: #FFDE7B; font-size: 19px; font-weight: 700; line-height: 1.3; }
.kk-typ-rozmowa .kk-karta { padding: 18px 22px; }
.kk-typ-rozmowa .kk-tyt { font-size: 25px; }
.kk-typ-rozmowa .kk-pkt { font-size: 20px; margin-top: 10px; }
.kk-typ-rozmowa .kk-ico-w { width: 40px; height: 40px; font-size: 21px; }
.kk-typ-rozmowa .kk-stopka { font-size: 17px; margin-top: 12px; }
.kk-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; background: #F2561D; color: #FFFFFF; border: none; border-radius: 999px; padding: 12px 26px; font: inherit; font-size: 21px; font-weight: 700; cursor: pointer; }
.kk-btn:hover { background: #DE4A12; }
/* drugi przycisk obok głównego (np. „Dalej bez tłumaczenia”) – ten sam kształt, bez wypełnienia */
.kk-btn.kk-btn-2 { background: #FFFFFF; color: #1E1E1E; box-shadow: inset 0 0 0 2px #1E1E1E; }
.kk-btn.kk-btn-2:hover { background: #F4F1EA; }
.kk-m2 .kk-btn.kk-btn-2 { background: #FFFFFF; color: #2E1631; box-shadow: inset 0 0 0 2px #5B2A5E; }
.kk-obraz-akcje { display: flex; gap: 10px; }
.kk-obraz-akcje .kk-btn { margin-top: 0; }
.kk-po-wyj { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 12px; z-index: 5; }
.kk-po-wyj .kk-btn { margin-top: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.kk-po-wyj .kk-btn.kk-btn-2 { box-shadow: inset 0 0 0 2px #1E1E1E, 0 6px 18px rgba(0, 0, 0, .18); }
.kk-btn-l { margin-top: 18px; background: none; border: none; font: inherit; font-size: 19px; color: #5B5955; text-decoration: underline; cursor: pointer; padding: 12px 10px; }

/* postacie */
/* postacie o ok. 12% większe niż w v1 (280×272 = proporcje viewBox) */
.kk-os { position: absolute; bottom: -4px; width: 280px; height: 272px; }
.kk-os.lewa { left: 6px; }
.kk-os.prawa { right: 6px; }
.kk-os:not(.kk-k) { animation: kkWejscie 0.6s ease both; }
@keyframes kkWejscie { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.kk-postac { width: 100%; height: 100%; overflow: visible; animation: kkOddech 4s ease-in-out infinite; }
@keyframes kkOddech { 50% { transform: translateY(-3px); } }
.kk-postac .oczy { transform-box: view-box; transform-origin: 100px 84px; animation: kkMrug 4.6s infinite; }
@keyframes kkMrug { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.kk-postac .macha { transform-box: view-box; transform-origin: 148px 162px; animation: kkMacha 0.5s ease-in-out 6 alternate; }
@keyframes kkMacha { from { transform: rotate(-7deg); } to { transform: rotate(8deg); } }
.kk-postac .usta-o { opacity: 0; }
.player.mowi .kk-anna .usta-o { animation: kkUsta 0.24s ease-in-out infinite alternate; }
.player.mowi .kk-anna .usta-z { animation: kkUsta 0.24s ease-in-out infinite alternate-reverse; }
@keyframes kkUsta { from { opacity: 0; } to { opacity: 1; } }
.kk-os-p { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); white-space: nowrap; background: #1E1E1E; color: #FFFFFF; border-radius: 999px; padding: 3px 12px; font-size: 15px; font-weight: 600; }

/* dymki – tuż nad głową mówiącej osoby (dół dymka ok. 10 px nad włosami) */
.kk-dymek { position: absolute; bottom: 238px; width: 252px; background: #FFFFFF; border: 1.5px solid #E7E1D6; border-radius: 18px; padding: 12px 16px; font-size: 20px; line-height: 1.28; font-weight: 600; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 8px 24px -18px rgba(30, 30, 30, 0.25); z-index: 2; }
.kk-dymek.lewa { left: 16px; }
.kk-dymek.prawa { right: 16px; }
.kk-dymek::after { content: ""; position: absolute; bottom: -9px; width: 16px; height: 16px; background: inherit; border: inherit; border-top: none; border-left: none; transform: rotate(45deg); }
.kk-dymek.lewa::after { left: 120px; }
.kk-dymek.prawa::after { right: 120px; }
.kk-dymek.krotki { width: auto; font-size: 24px; font-weight: 800; padding: 8px 18px; white-space: nowrap; }
/* krótki dymek – wyśrodkowany nad głową (środek głowy: 146 px od krawędzi kadru) */
.kk-dymek.lewa.krotki { left: 146px; transform: translateX(-50%); }
.kk-dymek.prawa.krotki { right: 146px; transform: translateX(50%); }
.kk-dymek.krotki.kk-k { transform: translate(var(--kk-dx), 10px); }
.kk-dymek.lewa.krotki { --kk-dx: -50%; }
.kk-dymek.prawa.krotki { --kk-dx: 50%; }
.kk-dymek.krotki.kk-k.on { transform: translateX(var(--kk-dx)); }
.kk-dymek.krotki::after, .kk-dymek.lewa.krotki::after, .kk-dymek.prawa.krotki::after { left: calc(50% - 8px); right: auto; }
.kk-dymek.od-anna { background: #F2561D; border-color: #F2561D; color: #FFFFFF; }
/* czapka, czapka Mikołaja, słuchawki wystają ok. 50 px nad głowę */
.kk-dymek.wysoko { bottom: 290px; }

/* mapa kursu */
.kk-mapa { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; font-size: 16px; color: #8A857C; white-space: nowrap; }
.kk-mapa .byl { color: #1E1E1E; }
.kk-mapa .teraz { background: #1E1E1E; color: #FFFFFF; border-radius: 999px; padding: 3px 14px; font-weight: 700; }
.kk-mapa i { font-style: normal; color: #BDB5A8; }

/* intro */
.kk-intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 80px; }
.kk-intro .kk-logo { animation: kkPop 0.8s ease both; }
.kk-intro .t1 { font-family: var(--font-heading); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; line-height: 1.15; margin-top: 26px; }
.kk-intro .t2 { color: #5B5955; font-size: 20px; margin-top: 6px; }
.kk-intro-p { display: flex; flex-direction: column; align-items: center; max-width: 760px; padding: 34px 56px 30px; border-radius: 28px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 18px 40px -24px rgba(30, 30, 30, 0.35); }

/* model lekcji */
.kk-model { position: absolute; left: 40px; right: 40px; top: 88px; display: grid; gap: 6px 12px; align-items: stretch; }
/* nagłówek kolumny bez ikony i bez koloru (kolor bez znaczenia = szum); akcent robi przygaszenie pozostałych */
.kk-kol-h { display: flex; flex-direction: column; justify-content: flex-end; text-align: left; border-bottom: 3px solid #1E1E1E; padding: 0 10px 6px; }
.kk-kol-i { width: 34px; height: 34px; border-radius: 50%; background: var(--kol); color: #FFFFFF; display: grid; place-items: center; font-size: 19px; }
.kk-model.duzy .kk-kol-h { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.kk-kol-h .nazwa { font-weight: 800; font-size: 21px; letter-spacing: -0.01em; line-height: 1.1; }
.kk-kol-h .met { font-size: 14px; font-weight: 500; color: #5B5955; line-height: 1.2; }
.kk-model.duzy { top: 100px; gap: 20px 24px; }
.kk-model.duzy .kk-kol-h { background: #FFFFFF; border: 1.5px solid #E7E1D6; border-bottom: 8px solid var(--kol); border-radius: 22px; height: 250px; gap: 8px; padding: 0 12px; box-shadow: 0 18px 40px -24px rgba(30, 30, 30, 0.35); }
.kk-model.duzy .kk-kol-i { width: 96px; height: 96px; font-size: 50px; }
.kk-model.duzy .nazwa { font-size: 30px; line-height: 1.1; }
.kk-model.duzy .met { font-family: var(--font-hand); font-size: 30px; font-weight: 400; color: #C2410C; line-height: 1; }
/* model z wieloma wierszami (gesty: true) – niższe wiersze */
.kk-model.gesty { gap: 4px 10px; }
.kk-model.gesty .kk-cell { min-height: 36px; padding: 2px 8px; font-size: 18px; }
.kk-model.gesty .kk-ct small { font-size: 13px; margin-top: 0; }
.kk-model.gesty .kk-kol-h .met { font-size: 13px; }
.kk-model.gesty .kk-wl { font-size: 16px; }
.kk-wl { display: flex; align-items: center; font-size: 16px; font-weight: 700; color: #5B5955; line-height: 1.15; }
.kk-cell { background: #FFFFFF; border: 1.5px solid #E7E1D6; border-radius: 14px; min-height: 44px; padding: 4px 10px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; font-size: 19px; font-weight: 600; line-height: 1.15; }
.kk-model.duzy .kk-cell { justify-content: center; text-align: center; }
.kk-ct { display: flex; flex-direction: column; align-items: flex-start; }
.kk-model.duzy .kk-ct { align-items: center; }
.kk-ct small { font-size: 15px; font-weight: 500; color: #5B5955; margin-top: 2px; }
.kk-ct .kk-ico { font-size: 26px; }
.kk-cell > .kk-ico { font-size: 26px; color: #2EBB5E; }
.kk-marker { background: #FFDE7B; border-radius: 6px; padding: 0 8px; font-weight: 800; }
.kk-brak { color: #A9A398; font-weight: 500; }
.kk-cell:has(.kk-brak) { background: transparent; border-style: dashed; justify-content: center; }
.kk-bloki { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; }
.kk-blok { border-radius: 8px; padding: 4px; font-size: 15px; font-weight: 700; text-align: center; border: 1.5px dashed #D9D2C5; color: #BDB5A8; }
.kk-blok.tak { border: 1.5px solid transparent; color: #1E1E1E; background: #EFEADF; }
.kk-blok.tak.prz { background: #DCEBFB; color: #1F5FAE; }
.kk-blok.tak.kos { background: #FDE3E0; color: #B91C1C; }
.kk-tt { display: inline-flex; gap: 6px; }
.kk-t { display: inline-grid; grid-template-columns: 1fr 1fr; width: 46px; border-top: 3px solid #1E1E1E; }
.kk-t span { font-size: 12px; font-weight: 800; padding: 2px 0 6px; }
.kk-t .wn { color: #1D4ED8; border-right: 3px solid #1E1E1E; }
.kk-t .ma { color: #C2410C; }
.kk-wiersz { width: 54px; height: 16px; border-radius: 4px; border: 2.5px solid #1E1E1E; background: repeating-linear-gradient(90deg, transparent 0 16px, #1E1E1E 16px 18.5px); }
.kk-kreski { display: inline-flex; gap: 4px; }
.kk-kreski i { width: 14px; height: 22px; border-radius: 4px; background: #E7E1D6; }
.kk-kreski i.tak { background: #1E1E1E; }
.kk-kr-t { font-size: 17px; }
.kk-notka { font-family: var(--font-hand); font-size: 31px; color: #C2410C; text-align: center; line-height: 1.05; margin-top: 4px; transform: rotate(-1.5deg); }
.kk-notka.on { transform: rotate(-1.5deg); }
.kk-notka-sch { position: absolute; }
.kk-stopien span { text-align: center; padding: 0 12px; }
.kk-obraz-btn { position: absolute; right: 40px; bottom: 22px; margin: 0; }
.kk-typ-obraz .kk-model { top: 84px; }

/* drzewo decyzji */
.kk-linie { position: absolute; inset: 0; width: 960px; height: 540px; overflow: visible; }
.kk-linia { fill: none; stroke: #BDB5A8; stroke-width: 3; }
.kk-wezel { position: absolute; transform: translateX(-50%); width: 370px; background: #FFFFFF; border: 1.5px solid #E7E1D6; border-radius: 16px; padding: 10px 14px; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.2; }
.kk-wezel.kk-k { transform: translate(-50%, 10px); }
.kk-wezel.kk-k.on { transform: translateX(-50%); }
.kk-wezel.pytanie { background: #1E1E1E; color: #FFFFFF; font-size: 24px; font-weight: 700; width: auto; white-space: nowrap; padding: 10px 28px; border-radius: 999px; border: none; }
.kk-wezel.pelne { background: #EEF8D2; border-color: #2EBB5E; font-weight: 800; }
.kk-wezel.wybor { background: #EAF3FD; border-color: #58A5EF; font-weight: 800; }
.kk-wezel.uwaga { background: #FFF4CC; border-color: #D97706; }
.kk-wezel .strz { position: absolute; top: -27px; left: 50%; transform: translateX(-50%); font-size: 24px; color: #BDB5A8; }
.kk-wezel small { display: block; font-size: 16px; font-weight: 600; color: #047857; margin-top: 4px; }

/* podstawa podatku – słupki */
.kk-legenda { position: absolute; right: 44px; top: 52px; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: #5B5955; }
.kk-legenda i { width: 26px; height: 16px; border-radius: 4px; background: #FFDE7B; border: 1.5px solid #1E1E1E; }
.kk-br { position: absolute; left: 0; right: 0; height: 46px; }
.kk-be { position: absolute; left: 50px; top: 0; width: 190px; height: 44px; display: flex; align-items: center; font-size: 22px; font-weight: 700; }
.kk-bh { position: absolute; left: 50px; top: 0; font-family: var(--font-hand); font-size: 32px; color: #C2410C; }
.kk-bar { position: absolute; top: 2px; height: 40px; border-radius: 10px; transform-origin: left; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.kk-br.kk-k .kk-bar { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s; }
.kk-br.kk-k.on .kk-bar { transform: none; }
/* kolory pieniędzy: przychody niebieskie, koszty czerwone, dochód zielony, strata czerwona */
.kk-bar.przych { background: #2B7BD6; }
.kk-bar.koszt { background: #DC2626; }
.kk-bar.pusty { border: 2.5px dashed #BDB5A8; color: #A9A398; font-size: 26px; }
.kk-bar.obrys { border: 2px solid #D9D2C5; background: #FFFFFF; }
.kk-bar.minus { background: repeating-linear-gradient(135deg, #FDE3E0 0 8px, transparent 8px 14px); box-shadow: inset 0 0 0 2px #FDE3E0; border-radius: 0 10px 10px 0; transform-origin: right; }
.kk-bar.zysk { background: #1F9D55; border-radius: 10px 0 0 10px; }
.kk-bar.strata { background: #DC2626; }
.kk-bw { position: absolute; top: 0; height: 44px; display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-bw b { font-weight: 800; }
.kk-bw .c-przych { color: #2B7BD6; }
.kk-bw .c-koszt, .kk-bw .c-strata { color: #DC2626; }
.kk-bw .c-zysk { color: #1F9D55; }
.kk-bw-o { font-size: 18px; font-weight: 700; color: #5B5955; }
.kk-razy { position: absolute; top: 0; background: #FFDE7B; color: #1E1E1E; border-radius: 999px; padding: 6px 22px 6px 18px; font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }
.kk-razy b { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }

/* waga */
.kk-waga-svg { position: absolute; inset: 0; width: 960px; height: 540px; overflow: visible; }
.kk-typ-waga { transition: --th 1.1s cubic-bezier(0.3, 1.4, 0.5, 1); }
.kk-typ-waga[data-stan="prawa"] { --th: 9deg; }
.kk-typ-waga[data-stan="lewa"] { --th: -9deg; }
.kk-stojak { stroke: #1E1E1E; stroke-width: 8; stroke-linecap: round; fill: none; }
.kk-belka { transform-box: view-box; transform-origin: 480px 200px; transform: rotate(var(--th)); }
.kk-belka-l { stroke: #1E1E1E; stroke-width: 8; stroke-linecap: round; }
.kk-belka circle { fill: #FF662A; }
.kk-szala { transform-box: view-box; transform: rotate(calc(-1 * var(--th))); }
.kk-sznur { stroke: #8A857C; stroke-width: 2.5; fill: none; }
.kk-misa { fill: #1E1E1E; }
.kk-ciezar { transform-box: view-box; transition: transform 1s ease; }
.kk-ciezar rect { stroke: #1E1E1E; stroke-width: 2.5; }
.kk-cz-lewa rect { fill: #E1F3AB; }
.kk-cz-prawa rect { fill: #FF8555; }
.kk-ciezar text { font-size: 20px; font-weight: 800; fill: #1E1E1E; }
.kk-typ-waga[data-stan="prawa"] .kk-cz-prawa { transform: scale(1.3); }
.kk-typ-waga[data-stan="lewa"] .kk-cz-prawa { transform: scale(0.5); }
.kk-szala-t { font-size: 21px; font-weight: 700; fill: #1E1E1E; }
.kk-waga-et { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.kk-waga-et.kk-k { transform: translate(-50%, 10px); }
.kk-waga-et.kk-k.on { transform: translateX(-50%); }
.kk-waga-et b { display: inline-block; background: #1E1E1E; color: #FFFFFF; border-radius: 999px; padding: 4px 16px; font-size: 20px; }
.kk-waga-et span { display: block; font-family: var(--font-hand); font-size: 32px; color: #C2410C; margin-top: 2px; }

/* schody */
.kk-stopien { position: absolute; width: 230px; border-radius: 16px 16px 0 0; display: flex; justify-content: center; padding-top: 14px; font-size: 24px; font-weight: 800; }
.kk-stopien.s0 { background: #E1F3AB; border: 2px solid #2EBB5E; }
.kk-stopien.s1 { background: #EAF3FD; border: 2px solid #58A5EF; }
.kk-stopien.s2 { background: #FFF1E8; border: 2px solid #FF662A; }
.kk-strz { fill: none; stroke-width: 5; stroke-linecap: round; }
.kk-strz.dol { stroke: #2EBB5E; }
.kk-strz.gora { stroke: #DC2626; stroke-dasharray: 12 10; }
.kk-strz-t { position: absolute; font-family: var(--font-hand); font-size: 32px; white-space: nowrap; }
.kk-strz-t.dol { left: 520px; top: 168px; color: #047857; }
.kk-strz-t.gora { left: 380px; top: 66px; color: #DC2626; }

/* zadanie w filmie */
.kk-zad { padding: 16px 24px 18px; }
.kk-zad .kk-nad { font-size: 28px; }
.kk-zad .kk-tyt { font-size: 22px; line-height: 1.2; }
.kk-zad .kk-zad-opcje { gap: 5px; margin-top: 10px; }
.kk-zad .kk-zad-opcje button { font-size: 17px; padding: 5px 12px; }
.kk-zad .kk-zad-opcje button b { width: 26px; height: 26px; font-size: 14px; }
/* po dojściu lektorki do rozwiązania przyciski nie są już potrzebne */
.kk-zad:has(.kk-rozw.on) .kk-zad-akcje { display: none; }
.kk-pole { display: grid; grid-template-columns: 220px auto 1fr; align-items: center; gap: 12px; margin-top: 10px; }
.kk-pole .e { font-size: 20px; font-weight: 700; }
.kk-in { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; }
.kk-in input { width: 170px; height: 44px; font: inherit; font-size: 22px; font-weight: 700; padding: 4px 12px; border: 2px solid #1E1E1E; border-radius: 12px; background: #FFFFFF; color: #1E1E1E; font-variant-numeric: tabular-nums; }
.kk-in input:focus { outline: 3px solid #FF662A; outline-offset: 2px; }
.kk-fb { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 700; }
.kk-fb.ok { color: #047857; }
.kk-fb.zle { color: #DC2626; }
.kk-fb.odp { color: #B45309; }
.kk-rozw { display: flex; align-items: center; gap: 6px; font-size: 17px; color: #047857; font-weight: 600; margin: 4px 0 0 232px; height: 0; overflow: hidden; }
.kk-rozw.on { height: 24px; }
.kk-zad-opcje { margin-top: 12px; }
.kk-zad-opcje button.wybrana { border-color: #1E1E1E; background: #FFF4CC; }
.kk-rozw.kk-rozw-w { margin-left: 4px; }
.kk-podp { font-size: 16px; color: #B45309; font-weight: 600; margin-top: 6px; }
.kk-podp:empty { display: none; }
.kk-podp.ok { color: #047857; }
.kk-zad-akcje { display: flex; align-items: center; gap: 8px; }
.kk-zad-akcje .kk-btn { margin-top: 8px; }
.kk-zad-akcje .kk-btn-l { margin-top: 8px; }
.kk-zad [data-z="dalej"], .kk-zad [data-z="wyjasnij"] { display: none; }
.kk-c.czeka.zrobione [data-z="dalej"], .kk-c.czeka.zrobione [data-z="wyjasnij"] { display: inline-flex; }
/* zadanie z wytłumaczeniem: wybór widać od razu po odpowiedzi, także gdy film jeszcze nie stanął */
.kk-c.zrobione .kk-zad-opc [data-z="dalej"], .kk-c.zrobione .kk-zad-opc [data-z="wyjasnij"] { display: inline-flex; }
.kk-c.zrobione.wybrano .kk-zad-opc .kk-zad-akcje { display: none; }
.kk-c.zrobione [data-z="sprawdz"], .kk-c.zrobione [data-z="pokaz"] { display: none; }
.kk-czeka { position: absolute; right: 18px; top: -18px; display: none; align-items: center; gap: 6px; background: #FFDE7B; border: 2px solid #1E1E1E; border-radius: 999px; padding: 4px 14px; font-size: 17px; font-weight: 700; animation: kkPuls 1.4s ease-in-out infinite; }
.kk-c.czeka .kk-czeka { display: inline-flex; }
.kk-c.czeka.zrobione .kk-czeka { display: none; }
@keyframes kkPuls { 50% { transform: scale(1.05); } }

/* „Z ustawy” – dosłowny fragment przepisu (sceny.js, przepis) */
.kk-przepis { padding: 12px 20px 12px; border-left: 8px solid #1E1E1E; background: #FFFDF6; }
.kk-przepis-z { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kk-przepis-c { font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.32; margin-top: 6px; }
.kk-przepis-c mark { background: #FFDE7B; color: inherit; padding: 0 3px; border-radius: 4px; font-weight: 700; }
.kk-przepis-zr { font-size: 15px; color: #5B5B5B; margin-top: 8px; font-weight: 600; }
.kk-przepis { cursor: zoom-in; }
/* "miejsce": "nakladka" – model przyciemniony pod kartą */
.kk-przepis-zaslona { position: absolute; inset: 0; background: rgba(30, 30, 30, .42); }
.kk-przepis-zaslona.kk-k { transform: none; }
.kk-przepis-lupa { display: none; position: absolute; right: 14px; top: -26px; align-items: center; gap: 6px; background: #FFDE7B; border: 2px solid #1E1E1E; border-radius: 999px; padding: 4px 14px; font-size: 26px; font-weight: 700; }
.kk-przepis-lupa .kk-ico { width: 26px; height: 26px; }
@media (max-width: 760px) { .kk-przepis-lupa { display: inline-flex; } }
/* powiększony cytat (dotknięcie karty) – zwykłe piksele, poza skalowanym kadrem */
.kk-przepis-duzy { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 20, 20, .66); }
.kk-przepis-duzy .k { max-width: 640px; max-height: 100%; overflow: auto; background: #FFFDF6; color: #1E1E1E; border-left: 6px solid #1E1E1E; border-radius: 12px; padding: 16px 18px; }
.kk-przepis-duzy .z { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kk-przepis-duzy .kk-ico { width: 18px; height: 18px; }
.kk-przepis-duzy .c { font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.45; margin-top: 8px; }
.kk-przepis-duzy .c mark { background: #FFDE7B; color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 700; }
.kk-przepis-duzy .zr { font-size: 14px; color: #5B5B5B; margin-top: 8px; font-weight: 600; }
.kk-przepis-duzy .kk-btn { margin-top: 12px; font-size: 16px; padding: 10px 20px; }
.kk-m2 .kk-przepis { border-left-color: #5B2A5E; }
.kk-m2 .kk-przepis-c mark { background: #EFE6D2; }

/* dekret i konta T */
.kk-dk { position: absolute; left: 60px; right: 60px; top: 92px; display: grid; grid-template-columns: 1fr 1fr 170px; gap: 6px 12px; font-size: 20px; }
.kk-dk .h { font-size: 15px; font-weight: 700; color: #5B5955; border-bottom: 2px solid #1E1E1E; padding-bottom: 4px; }
.kk-dk .kw { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.kk-dk-c { background: #FFFFFF; border-radius: 10px; padding: 6px 10px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-dk-c.wn { background: #EAF3FD; color: #1D4ED8; }
.kk-dk-c.ma { background: #FFF1E8; color: #C2410C; }
.kk-dk-c b { font-weight: 800; }
/* konta T: duże, nazwa raz, kwota tylko na stronie, na którą trafia (bez tabelki dekretu i bez sumy z kwotami) */
.kk-tk-l { position: absolute; left: 30px; right: 30px; top: 116px; display: flex; justify-content: center; gap: 16px; }
.kk-tk-l.ile1, .kk-tk-l.ile2 { gap: 160px; }
.kk-tk { width: 205px; background: #FFFFFF; border: 1.5px solid #E7E1D6; border-radius: 18px; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 8px 24px -18px rgba(30, 30, 30, 0.25); overflow: hidden; }
.kk-tk-l.ile1 .kk-tk, .kk-tk-l.ile2 .kk-tk { width: 300px; }
.kk-tk-l.ile3 .kk-tk { width: 270px; }
.kk-tk .n { text-align: center; font-size: 16px; padding: 12px 8px 10px; border-bottom: 5px solid #1E1E1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-tk-l.ile1 .n, .kk-tk-l.ile2 .n { font-size: 21px; }
.kk-tk .s { display: grid; grid-template-columns: 1fr 1fr; min-height: 120px; }
.kk-tk-l.ile1 .s, .kk-tk-l.ile2 .s { min-height: 170px; }
.kk-tk .s > div { padding: 8px 10px; font-variant-numeric: tabular-nums; }
.kk-tk .s > .wn { border-right: 5px solid #1E1E1E; }
.kk-tk .s > .wn.cel { background: #EAF3FD; }
.kk-tk .s > .ma.cel { background: #FFF1E8; }
.kk-tk i { display: block; font-style: normal; font-size: 16px; font-weight: 800; }
.kk-tk .s > .wn i { color: #1D4ED8; }
.kk-tk .s > .ma i { color: #C2410C; text-align: right; }
.kk-tk-a { display: table; margin-top: 10px; padding: 5px 10px; border-radius: 10px; color: #FFFFFF; font-size: 17px; font-weight: 800; white-space: nowrap; }
.kk-tk-l.ile1 .kk-tk-a, .kk-tk-l.ile2 .kk-tk-a { font-size: 21px; padding: 7px 12px; margin-top: 18px; }
.kk-tk-a.wn { background: #1D4ED8; }
.kk-tk-a.ma { background: #C2410C; margin-left: auto; }
.kk-tk-a.kk-k { transform: translateY(-14px) scale(1.1); }
.kk-tk-a.kk-k.on { transform: none; }
.kk-przeplyw path { fill: none; stroke: #FF662A; stroke-width: 4; stroke-dasharray: 8 7; }
.kk-bal { position: absolute; left: 50%; top: 396px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #E1F3AB; color: #1E1E1E; border-radius: 999px; padding: 8px 22px; font-size: 20px; font-weight: 800; }
.kk-bal .kk-ico { color: #1F9D55; }
.kk-bal.kk-k { transform: translate(-50%, 10px); transition-delay: 0.8s; }
.kk-bal.kk-k.on { transform: translateX(-50%); }

/* szyld Kawiarni Ziarenko */
.kk-szyld { position: absolute; top: 96px; height: 236px; display: flex; flex-direction: column; filter: drop-shadow(0 18px 24px rgba(30, 30, 30, 0.18)); }
.kk-szyld .markiza { height: 46px; border-radius: 12px 12px 0 0; background: repeating-linear-gradient(90deg, #FF662A 0 34px, #FFF1E8 34px 68px); -webkit-mask: radial-gradient(17px 12px at 17px 100%, transparent 98%, #000) 0 0 / 34px 100%; mask: radial-gradient(17px 12px at 17px 100%, transparent 98%, #000) 0 0 / 34px 100%; }
.kk-szyld .tablica { background: #1E1E1E; color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 12px; height: 62px; margin: 0 14px; border-radius: 10px; }
.kk-szyld .nazwa { font-family: var(--font-heading); font-weight: 800; font-size: 31px; letter-spacing: -0.02em; }
.kk-szyld .forma { background: #FFDE7B; color: #1E1E1E; border-radius: 999px; padding: 2px 12px; font-size: 17px; font-weight: 800; }
.kk-szyld .witryna { flex: 1; margin: 0 24px; background: #FFFFFF; border: 3px solid #1E1E1E; border-top: none; display: grid; grid-template-columns: 1fr 70px 1fr; gap: 14px; padding: 14px 14px 0; }
.kk-szyld .okno { background: #EAF3FD; border: 3px solid #1E1E1E; border-radius: 8px 8px 0 0; display: grid; place-items: center; font-size: 46px; color: #8B5E3C; }
.kk-szyld .drzwi { background: #8B5E3C; border: 3px solid #1E1E1E; border-bottom: none; border-radius: 30px 30px 0 0; }
.kk-szyld .od { position: absolute; right: -10px; top: 50px; transform: rotate(6deg); background: #FFFFFF; border: 2px solid #1E1E1E; border-radius: 999px; padding: 2px 12px; font-family: var(--font-hand); font-size: 26px; color: #C2410C; }
.kk-szyld .od.kk-k { transform: rotate(6deg) translateY(10px); }
.kk-szyld .od.kk-k.on { transform: rotate(6deg); }
.kk-szyld-chipy { position: absolute; top: 352px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kk-szyld-chipy .chip { background: #FFFFFF; border: 1.5px solid #E7E1D6; border-radius: 999px; padding: 5px 14px; font-size: 19px; font-weight: 700; box-shadow: 0 8px 20px -14px rgba(30, 30, 30, 0.5); }

/* bilans – dwie wieże */
.kk-wieza { position: absolute; top: 92px; width: 330px; display: flex; flex-direction: column; }
.kk-wieza-n { text-align: center; font-weight: 800; font-size: 20px; padding-bottom: 6px; margin-bottom: 3px; border-bottom: 3px solid #1E1E1E; }
.kk-cegla { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(30, 30, 30, 0.22); font-size: 18px; font-weight: 600; line-height: 1.1; overflow: hidden; }
.kk-cegla b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-cegla.mala { font-size: 15px; }
.kk-wieza.lewa .kk-cegla { background: #CFE4FA; }
.kk-wieza.lewa .kk-cegla.c1 { background: #DCEBFB; }
.kk-wieza.lewa .kk-cegla.c2 { background: #B9D7F6; }
.kk-wieza.lewa .kk-cegla.c3 { background: #E6F0FC; }
.kk-wieza.lewa .kk-cegla.c4 { background: #A9CDF3; }
.kk-wieza.prawa .kk-cegla { background: #E1F3AB; }
.kk-wieza.prawa .kk-cegla.c1 { background: #FBD3DB; }
.kk-wieza.prawa .kk-cegla.c2 { background: #FFE0CF; }
.kk-wieza-s { margin-top: 6px; text-align: center; font-size: 20px; font-weight: 600; }
.kk-wieza-s b { font-weight: 800; font-variant-numeric: tabular-nums; background: #FFDE7B; border-radius: 6px; padding: 0 8px; }
.kk-rowne { position: absolute; left: 480px; top: 226px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; background: #2EBB5E; color: #FFFFFF; display: grid; place-items: center; font-size: 44px; font-weight: 800; }
.kk-rowne-t { position: absolute; left: 480px; top: 298px; transform: translateX(-50%); width: 110px; text-align: center; font-family: var(--font-hand); font-size: 22px; line-height: 1.05; color: #047857; }
.kk-rowne-t.kk-k { transform: translate(-50%, 10px); }
.kk-rowne-t.kk-k.on { transform: translateX(-50%); }
.kk-rowne-t .kk-ico { display: none; }

/* drobne: listy w komórkach, ukryte kolumny, karta w dwóch kolumnach */
.kk-lista { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.kk-lista span { background: #F8F6F1; border-radius: 6px; padding: 1px 6px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.kk-c .kk-nic { visibility: hidden; }
.kk-karta.dwie .kk-pkty { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 28px; }
.kk-typ-rozmowa .kk-karta.dwie { padding: 24px 30px 30px; }
.kk-typ-rozmowa .kk-karta.dwie .kk-pkt { font-size: 23px; margin-top: 22px; }
.kk-typ-rozmowa .kk-karta.dwie .kk-ico-w { width: 50px; height: 50px; font-size: 25px; }

/* pułapki */
.kk-pul-l { position: absolute; left: 44px; top: 100px; width: 640px; }
.kk-pul { display: flex; gap: 16px; align-items: center; background: #FFFFFF; border: 1.5px solid #E7E1D6; border-radius: 18px; padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 8px 24px -18px rgba(30, 30, 30, 0.25); }
.kk-pul .kk-ico-w { background: #FEF2F2; color: #DC2626; }
.kk-pul .tt { display: flex; flex-direction: column; gap: 4px; }
.kk-pul .t { position: relative; font-size: 23px; font-weight: 700; align-self: flex-start; }
.kk-pul .t::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 3px; background: #DC2626; transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease 1s; }
.kk-pul.on .t::after { transform: none; }
.kk-pul .pop { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 600; color: #047857; opacity: 0; transition: opacity 0.4s ease 1.5s; }
.kk-pul.on .pop { opacity: 1; }

/* przypomnij sobie – pytanie przed startem */
.kk-pre { z-index: 5; background: rgba(248, 246, 241, 0.96); }
.kk-pre-k { left: 120px; right: 120px; top: 44px; padding: 18px 26px; }
.kk-pre-z { font-size: 16px; color: #5B5955; margin-top: 2px; }
.kk-pre .kk-tyt { font-size: 23px; margin-top: 8px; }
.kk-opcje { display: grid; gap: 6px; margin-top: 10px; }
.kk-opcje button { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; font-size: 19px; font-weight: 600; background: #F8F6F1; border: 1.5px solid #E7E1D6; border-radius: 14px; padding: 7px 14px; cursor: pointer; color: #1E1E1E; }
.kk-opcje button b { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #1E1E1E; color: #FFFFFF; display: grid; place-items: center; font-size: 16px; }
.kk-opcje button:hover:not(:disabled) { border-color: #1E1E1E; }
.kk-opcje button.ok { background: #EEF8D2; border-color: #2EBB5E; }
.kk-opcje button.zle { background: #FEF2F2; border-color: #DC2626; }
.kk-opcje button:disabled { cursor: default; }
.kk-pre-fb { font-size: 18px; line-height: 1.35; margin-top: 10px; color: #9A3412; min-height: 24px; }
.kk-pre-fb.ok { color: #047857; }
.kk-pre-akcje { display: flex; align-items: center; gap: 8px; }
.kk-pre-akcje .kk-btn, .kk-pre-akcje .kk-btn-l { margin-top: 8px; }
.kk-pre [data-p="start"] { display: none; }
.kk-pre.odp [data-p="start"] { display: inline-flex; }
.kk-pre.odp [data-p="pomin"] { display: none; }

/* pełny ekran odtwarzacza (app.js) – wszystkie lekcje */
/* --kk-h: wysokość okna, --kk-pasek: pasek sterowania w jednym rzędzie (przyciski 40 px + odstępy);
   dvh/dvw – bez pasków przeglądarki (vh/vw zostają dla starszych przeglądarek) */
.player { --kk-h: 100vh; --kk-pasek: 62px; }
@supports (height: 100dvh) { .player { --kk-h: 100dvh; } }
.player.pelny { position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; flex-direction: column; justify-content: center; background: #000000; }
.player:fullscreen { position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; flex-direction: column; justify-content: center; background: #000000; }
.player:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; background: #000000; }
.player.pelny .stage, .player.pelny .controls { width: min(100%, calc((var(--kk-h) - var(--kk-pasek)) * 16 / 9)); margin: 0 auto; }
.player:fullscreen .stage, .player:fullscreen .controls { width: min(100%, calc((var(--kk-h) - var(--kk-pasek)) * 16 / 9)); margin: 0 auto; }
.player:-webkit-full-screen .stage, .player:-webkit-full-screen .controls { width: min(100%, calc((var(--kk-h) - var(--kk-pasek)) * 16 / 9)); margin: 0 auto; }
.player.pelny .stage { aspect-ratio: 16 / 9; height: auto; }
.player:fullscreen .stage { aspect-ratio: 16 / 9; height: auto; }
/* pełny ekran: sterowanie zawsze w jednym rzędzie, suwak zabiera resztę miejsca */
.player.pelny .controls { display: flex; flex-wrap: nowrap; gap: 4px; padding: 8px; }
.player:fullscreen .controls { display: flex; flex-wrap: nowrap; gap: 4px; padding: 8px; }
.player.pelny .controls button { min-width: 40px; min-height: 40px; padding: 0 8px; }
.player:fullscreen .controls button { min-width: 40px; min-height: 40px; padding: 0 8px; }
.player.pelny .controls input[type=range] { flex: 1 1 60px; min-width: 60px; min-height: 40px; }
.player:fullscreen .controls input[type=range] { flex: 1 1 60px; min-width: 60px; min-height: 40px; }
.player.pelny .stage, .player.pelny .controls { flex: none; }
.player:fullscreen .stage, .player:fullscreen .controls { flex: none; }
.player.pelny .controls .time { min-width: 0; font-size: 0.8rem; }
.player:fullscreen .controls .time { min-width: 0; font-size: 0.8rem; }
/* pełny ekran (klasa .chowa, app.js): pasek leży na scenie i chowa się (.ukryte) po 3 s bez dotyku,
   gdy film gra – scena dostaje całą wysokość, a komunikat przeglądarki o pełnym ekranie nie zasłania przycisków */
.player.chowa { --kk-pasek: 0px; }
.player.chowa .controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0)); padding-top: 18px; transition: opacity 0.25s ease; }
.player.chowa.ukryte .controls { opacity: 0; pointer-events: none; }
.player.chowa:not(.ukryte) .caption { bottom: 70px; }
.player.chowa.ukryte { cursor: none; }
html.kk-bez-przewijania, html.kk-bez-przewijania body { overflow: hidden; }
/* telefon w pionie bez prawdziwego pełnego ekranu (iPhone): obracamy odtwarzacz do poziomu –
   jego szerokość to wysokość okna, a wysokość to szerokość okna */
@media (orientation: portrait) and (pointer: coarse) {
  .player.pelny { --kk-w: 100vw; inset: auto; top: 0; left: var(--kk-w); width: var(--kk-h); height: var(--kk-w); transform: rotate(90deg); transform-origin: top left; }
  @supports (width: 100dvw) { .player.pelny { --kk-w: 100dvw; } }
  .player.pelny .stage, .player.pelny .controls { width: min(100%, calc((var(--kk-w) - var(--kk-pasek)) * 16 / 9)); }
}

@media (prefers-reduced-motion: reduce) {
  .kk-c, .kk-c *, .kk-postac, .kk-postac * { animation: none !important; transition: none !important; }
  .kk-c .kk-chipy span { opacity: 1; }
}

/* =====================================================================================
   Motyw kurs2 (II Stopień): paleta „śliwka i mosiądz”, Anna II, kot biura, biuro Anny.
   Włącza go klasa .kk-m2 na płótnie sceny (.kk-c) i na odtwarzaczu (.player) – sceny.js ustawia ją,
   gdy dane lekcji mają "motyw": "kurs2". Bez tej klasy nic poniżej nie działa, więc kurs I wygląda jak dotąd.
   Śliwka #5B2A5E (nagłówki, ramki), ciemna śliwka #2E1631 (plansze), mosiądz #B8893A – tylko linie i ozdoby
   (za słaby kontrast na tekst), tło perłowe #F2F1F6, pastele: lawenda #E6DDEE, szałwia #DCE8E0, piasek #EFE6D2.
   Kolory Wn/Ma i kolory pieniędzy – bez zmian.
   ===================================================================================== */
.player.kk-m2.ma-sceny .stage { background: #F2F1F6; }
.player.kk-m2 .scene { perspective: 1800px; }
/* przejście: wsunięcie z boku jak przewracana karta (translate/rotate nie ruszają skali płótna) */
.kk-c.kk-m2 { animation: kkKarta 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes kkKarta { from { opacity: 0; translate: 70px 0; rotate: y -9deg; } to { opacity: 1; translate: 0 0; rotate: y 0deg; } }

/* logo z odznaką „II STOPIEŃ” i numer „II · R05 · L03” */
.kk-gora-l { display: inline-flex; align-items: center; gap: 12px; }
.kk-st2 { display: inline-block; background: #5B2A5E; color: #FFFFFF; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; padding: 3px 8px 2px; border-radius: 3px; box-shadow: inset 0 0 0 1px #B8893A; white-space: nowrap; }
.kk-st2.duze { font-size: 17px; padding: 6px 14px 5px; margin-top: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #B8893A; }
.kk-m2 .kk-gora .nr { color: #5B2A5E; font-weight: 700; letter-spacing: 0.05em; }

/* plansza tytułowa: ciemna śliwka, mosiężna linia, kot przechodzi po linii */
.kk-m2 .kk-intro2 { background: radial-gradient(ellipse at 50% 38%, #42214A 0%, #2E1631 62%); color: #FFFFFF; overflow: hidden; }
.kk-intro2 .kk-logo { color: #FFFFFF; }
.kk-intro2 .t1 { color: #FFFFFF; margin-top: 20px; max-width: 780px; }
.kk-intro2-l { width: 120px; height: 2px; background: #B8893A; margin-top: 20px; }
.kk-intro2 .t2 { color: #E6DDEE; font-size: 18px; font-weight: 700; letter-spacing: 0.12em; margin-top: 12px; }
.kk-intro2-tor { position: absolute; left: 24px; right: 24px; top: 452px; height: 2px; background: linear-gradient(90deg, transparent, #B8893A 14%, #B8893A 86%, transparent); }
.kk-intro2-kot { position: absolute; left: 72%; top: 357px; width: 150px; height: 96px; animation: kkKotIdzie 7.5s linear 0.9s both; }
.kk-intro2-kot .kk-kot-svg { width: 100%; height: 100%; overflow: visible; }
@keyframes kkKotIdzie { from { transform: translateX(-860px); } to { transform: translateX(300px); } }
.kot-nogi-a { animation: kkNogi 0.45s ease-in-out infinite alternate; }
.kot-nogi-b { animation: kkNogi 0.45s ease-in-out infinite alternate-reverse; }
@keyframes kkNogi { from { transform: translateY(-4px); } to { transform: translateY(1px); } }

/* karty, nadtytuły, ikony liniowe (obrys bez wypełnienia), przyciski */
.kk-m2 .kk-karta { border-color: #DDD5E4; border-radius: 10px; box-shadow: 0 1px 2px rgba(46, 22, 49, 0.06), 0 10px 26px -18px rgba(46, 22, 49, 0.35); }
.kk-m2 .kk-nad { color: #5B2A5E; }
.kk-m2 .kk-nad-abs { color: #2E1631; }
.kk-m2 .kk-nad-abs::before { content: ""; position: absolute; left: -14px; top: 5px; width: 4px; height: 26px; border-radius: 2px; background: #B8893A; }
.kk-m2 .kk-ico-w { background: transparent; border: 1.5px solid #CDBBD9; color: #5B2A5E; border-radius: 8px; }
.kk-m2 .kk-pkt.skreslone .kk-ico-w, .kk-m2 .kk-pul .kk-ico-w { background: transparent; border-color: #F3B4B4; color: #DC2626; }
.kk-m2 .kk-pkt.uwaga .kk-ico-w { background: transparent; border-color: #D8B56A; color: #8A6420; }
.kk-m2 .kk-chipy span { background: #EFE6D2; color: #2E1631; }
.kk-m2 .kk-stopka { background: #EFE6D2; border-left: 4px solid #B8893A; border-radius: 4px; }
.kk-m2 .kk-btn { background: #5B2A5E; }
.kk-m2 .kk-btn:hover { background: #2E1631; }
.kk-m2 .kk-marker { background: #F1DFAE; }
.kk-m2 .kk-mapa .byl { color: #2E1631; }
.kk-m2 .kk-mapa .teraz { background: #5B2A5E; }
.kk-m2 .kk-os-p { background: #2E1631; }
.kk-m2 .kk-notka, .kk-m2 .kk-bh, .kk-m2 .kk-waga-et span { color: #5B2A5E; }

/* dymki-karteczki: proste rogi, mały zagięty narożnik */
.kk-m2 .kk-dymek { border-radius: 3px; background: #FFFDF7; border-color: #E6DCC3; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% + 40px), 0 calc(100% + 40px)); }
.kk-m2 .kk-dymek::before { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 17.5px; height: 17.5px; background: linear-gradient(225deg, transparent 50%, #E3D6B6 50%); border-radius: 0 0 0 3px; }
.kk-m2 .kk-dymek.od-anna { background: #5B2A5E; border-color: #5B2A5E; color: #FFFFFF; }
.kk-m2 .kk-dymek.od-anna::before { background: linear-gradient(225deg, transparent 50%, #8E5A91 50%); }

/* tabela modelu: nagłówek śliwkowy z mosiężną linią, wiersze w lawendowym pasie */
.kk-m2 .kk-kol-h { background: #5B2A5E; color: #FFFFFF; border-bottom: 3px solid #B8893A; border-radius: 6px 6px 0 0; padding: 8px 10px 6px; }
.kk-m2 .kk-kol-h .met { color: #E6DDEE; }
.kk-m2 .kk-model.duzy .kk-kol-h { background: #FFFFFF; color: #1E1E1E; border: 1.5px solid #DDD5E4; border-bottom: 8px solid var(--kol); border-radius: 12px; box-shadow: 0 18px 40px -26px rgba(46, 22, 49, 0.45); }
.kk-m2 .kk-model.duzy .met { color: #5B2A5E; }
.kk-m2 .kk-wl { background: #E6DDEE; color: #2E1631; border-radius: 6px; padding: 0 10px; }
.kk-m2 .kk-cell { background: #FBF9FC; border-color: #E6DDEE; border-radius: 6px; }
.kk-m2 .kk-cell:has(.kk-brak) { background: transparent; }
.kk-m2 .kk-lista span { background: #F2F1F6; }
.kk-m2 .kk-t { border-top-color: #2E1631; }
.kk-m2 .kk-t .wn { border-right-color: #2E1631; }

/* konta T jako karta kartoteki: śliwkowy pasek z dziurką, liniowany papier, mosiężna linia na dole */
.kk-m2 .kk-tk { border-radius: 4px; border-color: #DDD5E4; border-bottom: 3px solid #B8893A; background: #FFFFFF repeating-linear-gradient(transparent 0 27px, #EEE8F3 27px 28px); box-shadow: 0 1px 2px rgba(46, 22, 49, 0.06), 0 12px 24px -18px rgba(46, 22, 49, 0.4); }
.kk-m2 .kk-tk .n { position: relative; background: #5B2A5E; color: #FFFFFF; border-bottom: 2px solid #B8893A; padding-left: 28px; padding-right: 14px; }
.kk-m2 .kk-tk .n::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #F2F1F6; box-shadow: inset 0 0 0 1.5px #B8893A; }
.kk-m2 .kk-tk .s > .wn { border-right: 3px solid #2E1631; }
.kk-m2 .kk-tk .s > .wn.cel { background: rgba(234, 243, 253, 0.8); }
.kk-m2 .kk-tk .s > .ma.cel { background: rgba(255, 241, 232, 0.8); }
.kk-m2 .kk-tk-a { border-radius: 4px; }
.kk-m2 .kk-bal { background: #DCE8E0; }
.kk-m2 .kk-przeplyw path { stroke: #B8893A; }
.kk-m2 .kk-przeplyw marker path { fill: #B8893A; }
.kk-m2 .kk-dk .h { color: #5B2A5E; border-bottom-color: #5B2A5E; }
.kk-m2 .kk-dk-c { border-radius: 4px; }

/* drzewo, bilans, pułapki, waga, zadanie, przypomnij */
.kk-m2 .kk-wezel { border-color: #DDD5E4; border-radius: 8px; }
.kk-m2 .kk-wezel.pytanie { background: #2E1631; border-radius: 6px; }
.kk-m2 .kk-linia { stroke: #CDBBD9; }
.kk-m2 .kk-wieza-n { color: #2E1631; border-bottom-color: #5B2A5E; }
.kk-m2 .kk-wieza-s b { background: #F1DFAE; }
.kk-m2 .kk-cegla { border-radius: 3px; }
.kk-m2 .kk-pul { border-color: #DDD5E4; border-radius: 8px; padding: 11px 16px; margin-bottom: 12px; }
.kk-m2 .kk-pul-l { top: 92px; }  /* trzy pułapki mieszczą się nad napisami (kontrola_scen.js) */
.kk-m2 .kk-belka circle { fill: #B8893A; }
.kk-m2 .kk-razy { background: #EFE6D2; }
.kk-m2 .kk-in input { border-color: #2E1631; border-radius: 6px; }
.kk-m2 .kk-in input:focus { outline-color: #5B2A5E; }
.kk-m2 .kk-czeka { background: #EFE6D2; border-color: #5B2A5E; color: #2E1631; }
.kk-m2 .kk-opcje button { background: #F7F4FA; border-color: #E2D9EA; border-radius: 8px; }
.kk-m2 .kk-opcje button b { background: #5B2A5E; }
.kk-m2 .kk-opcje button:hover:not(:disabled) { border-color: #5B2A5E; }
.kk-m2 .kk-zad-opcje button.wybrana { background: #EFE6D2; border-color: #5B2A5E; }
.kk-pre.kk-m2 { background: rgba(242, 241, 246, 0.96); }

/* tło rozmów: biuro Anny (pod całą treścią) */
/* tło sceny (tla.js): miejsce albo powierzchnia, zawsze pod treścią */
.kk-tlo { position: absolute; left: 0; top: 0; width: 960px; height: 540px; pointer-events: none; z-index: -1; }

/* ---------- kot biura „Saldo” ---------- */
.kk-kot { position: absolute; z-index: 1; }
.kk-kot:not(.kk-k) { animation: kkWejscie 0.6s ease 0.3s both; }
.kk-kot-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kk-kot.lustro .kk-kot-svg, .kk-kot-w.lustro .kk-kot-svg { transform: scaleX(-1); }
.kk-os-kot .kk-kot-w { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); }
.kot-ogon { transform-box: fill-box; transform-origin: 0 100%; animation: kkOgon 3.2s ease-in-out infinite; }
@keyframes kkOgon { 50% { transform: rotate(5deg); } }
.kot-oczy { transform-box: fill-box; transform-origin: center; animation: kkMrug 5.3s infinite; }

/* ---------- nowe typy scen kursu II ---------- */
.kk-kw { font-weight: 800; white-space: nowrap; }
.kk-kw.c-przych { color: #2B7BD6; }
.kk-kw.c-koszt { color: #DC2626; }
.kk-kw.c-zysk { color: #1F9D55; }

/* trzy soczewki: księgi / CIT / VAT */
.kk-ts-op { position: absolute; left: 44px; right: 44px; top: 94px; display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1.5px solid #DDD5E4; border-left: 5px solid #B8893A; border-radius: 6px; padding: 9px 16px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.kk-ts-op .kk-ico { font-size: 24px; color: #5B2A5E; }
.kk-ts-op .kk-kw { margin-left: auto; font-size: 22px; }
.kk-ts { position: absolute; left: 44px; right: 44px; top: 160px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kk-ts.bez-op { top: 100px; }
.kk-ts-k { display: flex; flex-direction: column; min-height: 272px; background: #FFFFFF; border: 1.5px solid #DDD5E4; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(46, 22, 49, 0.06), 0 12px 26px -20px rgba(46, 22, 49, 0.4); }
.kk-ts-h { display: flex; align-items: center; gap: 10px; background: #5B2A5E; color: #FFFFFF; padding: 10px 14px; font-size: 21px; font-weight: 800; border-bottom: 3px solid #B8893A; }
.kk-ts-h .kk-ico { font-size: 22px; color: #E6DDEE; }
.kk-ts-b { flex: 1; padding: 4px 14px; }
.kk-ts-p { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px dashed #E6DDEE; font-size: 18px; font-weight: 600; line-height: 1.2; }
.kk-ts-p:last-child { border-bottom: none; }
.kk-ts-p .kk-kw { font-size: 22px; }
.kk-ts-p.brak .t { color: #8A8290; font-weight: 500; }
.kk-ts-w { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 14px 12px; padding-top: 8px; border-top: 5px double #B8893A; font-size: 18px; font-weight: 800; line-height: 1.2; }
.kk-ts-w.brak { color: #8A8290; }
.kk-ts-w .kk-kw { font-size: 22px; }

/* oś czasu */
.kk-oc-l { position: absolute; left: 56px; right: 56px; height: 4px; margin-top: -2px; background: #5B2A5E; border-radius: 2px; }
.kk-oc-l::after { content: ""; position: absolute; right: -10px; top: -6px; border: 8px solid transparent; border-left: 12px solid #5B2A5E; border-right: none; }
.kk-oc-p { position: absolute; width: 190px; margin-left: -95px; height: 0; }
.kk-oc-p .d { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 20px; font-weight: 800; color: #2E1631; }
.kk-oc-p i { position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #FFFFFF; border: 4px solid #5B2A5E; }
.kk-oc-p .t { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.15; }
.kk-oc-p .kurs { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); white-space: nowrap; background: #E6DDEE; color: #2E1631; border-radius: 4px; padding: 3px 10px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kk-oc-p .kurs small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5B2A5E; margin-right: 6px; }
.kk-oc-p .pod { position: absolute; left: 0; right: 0; top: 100px; text-align: center; font-size: 15px; font-weight: 600; color: #5B5955; line-height: 1.2; }
.kk-oc-p.bilans i { width: 26px; height: 26px; margin-left: -13px; top: -13px; background: #B8893A; border-color: #2E1631; }
.kk-oc-p.bilans .d { left: 50%; right: auto; transform: translateX(-50%); bottom: 22px; white-space: nowrap; background: #2E1631; color: #FFFFFF; border-radius: 4px; padding: 1px 10px; }
.kk-oc-p.zaplata i { background: #5B2A5E; }
.kk-oc-o { position: absolute; height: 22px; border: 3px solid #5B2A5E; border-bottom: none; border-radius: 6px 6px 0 0; }
.kk-oc-o.przerywana { border-style: dashed; }
.kk-oc-o.dol { border: 3px solid #5B2A5E; border-top: none; border-radius: 0 0 6px 6px; }
.kk-oc-o.dol.przerywana { border-style: dashed; }
.kk-oc-o .t { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; background: #F2F1F6; padding: 0 8px; font-size: 18px; font-weight: 700; }
.kk-oc-o.dol .t { bottom: auto; top: 28px; }
.kk-oc-o .kk-kw { font-size: 21px; }
/* oś czasu w kursie I (rok Ziarenka, R00-L01): grafit i pomarańcz zamiast śliwki i mosiądzu kursu II */
.kk-c:not(.kk-m2) .kk-oc-l { background: #1E1E1E; }
.kk-c:not(.kk-m2) .kk-oc-l::after { border-left-color: #1E1E1E; }
.kk-c:not(.kk-m2) .kk-oc-p .d { color: #1E1E1E; }
.kk-c:not(.kk-m2) .kk-oc-p i { border-color: #1E1E1E; }
.kk-c:not(.kk-m2) .kk-oc-p.bilans i { background: #FF662A; border-color: #1E1E1E; }
.kk-c:not(.kk-m2) .kk-oc-p.bilans .d { background: #1E1E1E; color: #FFFFFF; }
.kk-c:not(.kk-m2) .kk-oc-p.zaplata i { background: #FF662A; }
.kk-c:not(.kk-m2) .kk-oc-p .pod { color: #5B5955; }
.kk-c:not(.kk-m2) .kk-oc-o, .kk-c:not(.kk-m2) .kk-oc-o.dol { border-color: #FF662A; }
.kk-c:not(.kk-m2) .kk-oc-o .t { background: #F8F6F1; color: #C2410C; }

/* tabele kursu II: harmonogram i rejestr różnic */
.kk-tab2-w { position: absolute; left: 44px; right: 44px; }
.kk-tab2 { display: grid; background: #FFFFFF; border: 1.5px solid #DDD5E4; border-radius: 8px; overflow: hidden; font-size: 18px; box-shadow: 0 12px 26px -22px rgba(46, 22, 49, 0.45); }
.kk-tab2 .h { background: #5B2A5E; color: #FFFFFF; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; padding: 9px 12px; border-bottom: 3px solid #B8893A; white-space: nowrap; }
.kk-tab2 .h.l { text-align: right; }
.kk-tab2 .c { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border-bottom: 1px solid #EEE8F3; font-weight: 600; line-height: 1.15; }
.kk-tab2 .c.l { justify-content: flex-end; text-align: right; }
.kk-tab2 .c.pas { background: #F4EFF8; }
.kk-tab2 .c.zaplacona { color: #7A7280; }
.kk-tab2 .c.zaplacona .kk-ico { color: #1F9D55; font-size: 18px; }
.kk-tab2 .c.biezaca { background: #EFE6D2; font-weight: 800; }
.kk-tab2 .c.nowa { background: #F6EEDB; font-weight: 800; }
.kk-tab2 em.nowa { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #5B2A5E; color: #FFFFFF; border-radius: 3px; padding: 2px 6px; }
.kk-tab2 .c.suma { background: #FFFFFF; font-weight: 800; border-top: 2px solid #5B2A5E; border-bottom: 6px double #B8893A; }
.kk-tab2.gesty .c { min-height: 34px; padding: 3px 12px; font-size: 17px; }
.kk-hm-p { position: absolute; left: 44px; right: 44px; top: 94px; height: 40px; }
.kk-hm-pp { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; background: #F2F1F6; }
.kk-hm-pp .e { min-width: 210px; font-size: 18px; font-weight: 800; color: #2E1631; white-space: nowrap; }
.kk-hm-pp .pas { position: relative; flex: 1; height: 16px; background: #E6DDEE; border-radius: 8px; overflow: hidden; }
.kk-hm-pp .pas i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #5B2A5E, #7A3F7E); border-radius: 8px; box-shadow: inset -4px 0 0 #B8893A; transform-origin: left; }
.kk-hm-pp.kk-k .pas i { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s; }
.kk-hm-pp.kk-k.on .pas i { transform: none; }

/* lejek: zysk brutto → różnice → dochód → podatek */
.kk-lj-p { position: absolute; height: 48px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 34px; color: #FFFFFF; font-size: 21px; font-weight: 800; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 18px 100%); }
.kk-lj-p.kk-k, .kk-lj-k.kk-k { transform: translate(-50%, 10px); }
.kk-lj-p.kk-k.on, .kk-lj-k.kk-k.on { transform: translateX(-50%); }
.kk-lj-p.zysk, .kk-lj-p.dochod { background: #1F9D55; }
.kk-lj-p.podatek, .kk-lj-p.koszt, .kk-lj-p.strata { background: #DC2626; }
.kk-lj-p.przych, .kk-lj-p.przychod { background: #2B7BD6; }
.kk-lj-p.neutralny { background: #5B2A5E; }
.kk-lj-k { position: absolute; height: 34px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #FFFFFF; border: 1.5px solid #DDD5E4; border-radius: 999px; padding: 0 16px; font-size: 18px; font-weight: 700; }
.kk-lj-k .kk-ico { color: #B8893A; }

@media (prefers-reduced-motion: reduce) {
  .kk-intro2-kot { animation: none !important; }
}