/* Komnata jako kokpit (skok 9, 28.10.2026) — js/game/komnata-kokpit.js. Barwy jak na stronie „Klucze na rzutniku” (jasny i ciemny wygląd),
   czcionki systemowe (CSP strony blokuje czcionki Google). Działa tylko przy klasie kk-wlaczony na <html> (moduł dokłada ją, gdy widzi
   znacznik --komnata-kokpit z tego arkusza) — stary arkusz albo brak modułu = stara Komnata. */
:root { --komnata-kokpit: 1; }

#kokpit { display: none; }

/* tokeny: jasny (domyślny), ciemny według urządzenia albo wybrany przyciskiem (atrybut data-kk-motyw na #page-game); te same barwy
   dostaje okienko „skąd punkty” (#tk-okienko w body — js/game/twoje-klucze.js kopiuje mu atrybut data-kk-motyw) */
html.kk-wlaczony #page-game, html.kk-wlaczony #tk-okienko {
    --kk-bg: #e9eef6; --kk-surface: #ffffff; --kk-surface-2: #f3f6fb; --kk-line: #c9d3e3;
    --kk-ink: #121a2b; --kk-muted: #4b5770; --kk-brass: #8a5f08; --kk-brass-fill: #f0b53a; --kk-brass-soft: #fbedc9;
    --kk-focus: #2557c4; --kk-red: #c0392b; --kk-blue: #2557c4; --kk-green: #1c7d52; --kk-purple: #6f43bd;
    --kk-lekcje: #2557c4; --kk-prace: #1c7d52; --kk-spr: #b03f25;
    --kk-ok: #1c6b47; --kk-ok-soft: #dff1e7; --kk-zle: #a33224; --kk-zle-soft: #fbe3df; --kk-ps-soft: #ece4fb;
    --kk-stara: #1c212b; --kk-stara-tekst: #ecf0f1;
    --kk-f-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    --kk-f-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    html.kk-wlaczony #page-game:not([data-kk-motyw="jasny"]), html.kk-wlaczony #tk-okienko:not([data-kk-motyw="jasny"]) {
        --kk-bg: #0e121a; --kk-surface: #182030; --kk-surface-2: #1f293b; --kk-line: #33405a;
        --kk-ink: #eef2f8; --kk-muted: #a9b3c7; --kk-brass: #f0c25e; --kk-brass-fill: #f0b53a; --kk-brass-soft: #3b3019;
        --kk-focus: #7ea6f5; --kk-red: #ff7a6b; --kk-blue: #7ea6f5; --kk-green: #55c996; --kk-purple: #b99af2;
        --kk-lekcje: #7ea6f5; --kk-prace: #55c996; --kk-spr: #f08f70;
        --kk-ok: #7be0ae; --kk-ok-soft: #173326; --kk-zle: #ffb4a8; --kk-zle-soft: #3d1d19; --kk-ps-soft: #2c2342;
        --kk-stara: #141923; --kk-stara-tekst: #ecf0f1;
        color-scheme: dark;
    }
}
html.kk-wlaczony #page-game[data-kk-motyw="ciemny"], html.kk-wlaczony #tk-okienko[data-kk-motyw="ciemny"] {
    --kk-bg: #0e121a; --kk-surface: #182030; --kk-surface-2: #1f293b; --kk-line: #33405a;
    --kk-ink: #eef2f8; --kk-muted: #a9b3c7; --kk-brass: #f0c25e; --kk-brass-fill: #f0b53a; --kk-brass-soft: #3b3019;
    --kk-focus: #7ea6f5; --kk-red: #ff7a6b; --kk-blue: #7ea6f5; --kk-green: #55c996; --kk-purple: #b99af2;
    --kk-lekcje: #7ea6f5; --kk-prace: #55c996; --kk-spr: #f08f70;
    --kk-ok: #7be0ae; --kk-ok-soft: #173326; --kk-zle: #ffb4a8; --kk-zle-soft: #3d1d19; --kk-ps-soft: #2c2342;
    --kk-stara: #141923; --kk-stara-tekst: #ecf0f1;
    color-scheme: dark;
}

/* stary ekran gry i „Komnata w budowie” (telefon) schowane; strona przewija się w pionie, kokpit u góry */
html.kk-wlaczony #page-game.active > .game-screen { display: none !important; }
html.kk-wlaczony #page-game.active > .mt-w-budowie { display: none !important; }
html.kk-wlaczony #page-game.active {
    align-items: flex-start;
    background: var(--kk-bg);
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
        max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
html.kk-wlaczony #page-game.active > #kokpit { display: block; }

#kokpit { width: 100%; max-width: 1180px; margin: 0 auto; align-self: flex-start; color: var(--kk-ink); font-family: var(--kk-f-body);
    font-size: 16px; line-height: 1.45; text-align: left; }
#kokpit * { box-sizing: border-box; }
#kokpit :focus-visible { outline: 3px solid var(--kk-focus); outline-offset: 2px; }
#kokpit [hidden] { display: none !important; }
.kk-start { display: grid; gap: 14px; }

/* nagłówek */
.kk-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.kk-tytuly { display: grid; gap: 2px; min-width: 0; }
.kk-h1 { margin: 0; font-family: var(--kk-f-display); font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--kk-ink); }
.kk-h1:focus { outline: none; }
.kk-kto { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--kk-muted); }
.kk-narzedzia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kk-btn { min-height: 44px; padding: 8px 14px; border: 2px solid var(--kk-line); border-radius: 12px; background: var(--kk-surface);
    color: var(--kk-ink); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.kk-btn:hover { border-color: var(--kk-ink); }
.kk-wybor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; color: var(--kk-muted); }
.kk-wybor select { min-height: 44px; max-width: 100%; padding: 6px 10px; border: 2px solid var(--kk-line); border-radius: 12px;
    background: var(--kk-surface); color: var(--kk-ink); font-family: inherit; font-size: 16px; }

/* panele */
.kk-panel { display: grid; gap: 10px; align-content: start; padding: 16px 18px; border: 2px solid var(--kk-line); border-radius: 16px;
    background: var(--kk-surface); min-width: 0; }
.kk-panel-glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.kk-h2 { margin: 0; font-family: var(--kk-f-display); font-size: 1.5rem; font-weight: 700; color: var(--kk-ink); }
.kk-h3 { margin: 0; font-family: var(--kk-f-display); font-size: 1.2rem; font-weight: 700; color: var(--kk-ink); }
.kk-suma { margin: 0; font-size: 1.1rem; color: var(--kk-ink); }
.kk-suma b { font-family: var(--kk-f-display); font-size: 2.1rem; line-height: 1; color: var(--kk-brass); font-variant-numeric: tabular-nums; }
.kk-suma span { color: var(--kk-muted); font-size: 0.95rem; }
.kk-opis, .kk-maly { margin: 0; font-size: 0.95rem; color: var(--kk-muted); }
.kk-pusto, .kk-blad { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--kk-brass-soft); color: var(--kk-ink); }

/* klucze w przedmiotach */
.kk-lista-kluczy { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.kk-lista-kluczy li { margin: 0; min-width: 0; }
/* wiersz przedmiotu: rząd 1 — nazwa i klucze, rząd 2 — punkty i ile brakuje (na wąskim ekranie zdanie schodzi pod punkty) */
.kk-przedmiot { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 72px;
    margin: 0; padding: 10px 12px; border: 2px solid var(--kk-line); border-left: 7px solid var(--kk-muted); border-radius: 12px;
    background: var(--kk-surface-2); color: var(--kk-ink); font-family: inherit; text-align: left; cursor: pointer; }
.kk-przedmiot:hover { border-color: var(--kk-ink); }
.kk-kolor-red { border-left-color: var(--kk-red); }
.kk-kolor-blue { border-left-color: var(--kk-blue); }
.kk-kolor-green { border-left-color: var(--kk-green); }
.kk-kolor-purple { border-left-color: var(--kk-purple); }
.kk-p-r1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kk-p-r2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.kk-p-nazwa { font-family: var(--kk-f-display); font-size: 1.15rem; font-weight: 700; min-width: 0; overflow-wrap: break-word; }
.kk-przedmiot .tk-kratki { flex: none; gap: 4px; }
.kk-przedmiot .tk-kratka { width: 15px; height: 30px; fill: none; stroke: var(--kk-muted); stroke-width: 1.4; stroke-dasharray: 2.5 2.5; opacity: 0.8; }
.kk-przedmiot .tk-kratka-pelna { fill: var(--kk-brass-fill); stroke: var(--kk-brass); stroke-dasharray: none; opacity: 1; }
.kk-p-pkt { font-size: 0.95rem; color: var(--kk-muted); white-space: nowrap; }
.kk-p-pkt b { font-family: var(--kk-f-display); font-size: 1.35rem; color: var(--kk-ink); font-variant-numeric: tabular-nums; }
.kk-p-brak { margin-left: auto; font-size: 0.95rem; color: var(--kk-ink); text-align: right; }
.kk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* widżety */
.kk-widzety { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.kk-duza { margin: 0; color: var(--kk-ink); }
.kk-duza b { font-family: var(--kk-f-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kk-duza span { color: var(--kk-muted); }
.kk-wpisy { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kk-wpisy li { display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0; }
.kk-data { flex: none; min-width: 3.1em; color: var(--kk-muted); font-variant-numeric: tabular-nums; }
.kk-co { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kk-znacznik { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--kk-muted); border: 0; }
.kk-znacznik.kk-kolor-red { background: var(--kk-red); }
.kk-znacznik.kk-kolor-blue { background: var(--kk-blue); }
.kk-znacznik.kk-kolor-green { background: var(--kk-green); }
.kk-znacznik.kk-kolor-purple { background: var(--kk-purple); }
.kk-ocena { flex: none; padding: 1px 9px; border-radius: 999px; font-weight: 700; white-space: nowrap; background: var(--kk-surface-2); color: var(--kk-ink); }
.kk-ocena-2 { background: var(--kk-ok-soft); color: var(--kk-ok); }
.kk-ocena-1 { background: var(--kk-brass-soft); color: var(--kk-ink); }
.kk-ocena-0, .kk-ocena-w { background: var(--kk-zle-soft); color: var(--kk-zle); }
.kk-ocena-3 { background: var(--kk-surface-2); color: var(--kk-muted); font-weight: 600; }
.kk-ocena-4 { background: var(--kk-ps-soft); color: var(--kk-ink); }
.kk-stan { flex: none; font-size: 0.9rem; font-weight: 700; color: var(--kk-muted); white-space: nowrap; }
.kk-stan-zal { color: var(--kk-ok); }
.kk-wiecej { justify-self: start; min-height: 44px; padding: 8px 14px; border: 2px solid var(--kk-line); border-radius: 12px;
    background: var(--kk-surface-2); color: var(--kk-ink); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.kk-wiecej:hover { border-color: var(--kk-ink); }

/* duże przyciski do reszty Komnaty */
.kk-przyciski { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.kk-duzy { display: grid; place-items: center; gap: 4px; min-height: 92px; padding: 10px; border: 2px solid var(--kk-line); border-radius: 16px;
    background: var(--kk-surface); color: var(--kk-ink); font-family: var(--kk-f-display); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.kk-duzy:hover { border-color: var(--kk-ink); }
.kk-ikona { font-size: 1.9rem; line-height: 1; }

/* okno sekcji: przeniesiony #chamber-content-area — stare sekcje na ciemnej karcie (ich teksty są jasne), oceny w barwach kokpitu */
/* kolumna nie rośnie do najszerszej tabeli starej części (Forma, Egzamin) — szeroka treść przewija się w swoim oknie, nie cała strona */
.kk-sekcja { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.kk-sekcja-tresc { min-width: 0; }
.kk-sekcja-glowa { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 0;
    background: var(--kk-bg); }
.kk-sekcja-tytul { margin: 0; font-family: var(--kk-f-display); font-size: 1.5rem; font-weight: 700; color: var(--kk-ink); }
.kk-sekcja-tytul:focus { outline: none; }
#kokpit .kk-sekcja-tresc > .chamber-content-area { position: static; display: block; width: auto; height: auto; min-height: 0; padding: 16px;
    overflow-x: auto; overflow-y: visible; z-index: auto; border-radius: 16px; backdrop-filter: none; animation: none; }
/* stare części mają pola w jasnych barwach (np. biała lista w Egzaminie) — color-scheme: light, żeby ciemny wygląd nie dał białego tekstu
   na białym tle; jaśniejsza obwódka fokusu na ciemnej karcie */
#kokpit .kk-sekcja-tresc > .chamber-content-area.kk-tresc-stara { background: var(--kk-stara); color: var(--kk-stara-tekst); color-scheme: light; }
#kokpit .kk-tresc-stara :focus-visible { outline-color: #9cc0ff; }
/* overflow: visible — bez przewijania w bok obwódka fokusu kart (3 px na zewnątrz) nie jest przycinana przy zerowym marginesie */
#kokpit .kk-sekcja-tresc > .chamber-content-area.kk-tresc-natywna { padding: 0; overflow: visible; background: transparent; color: var(--kk-ink); }
#kokpit .chamber-section-container { max-width: none; }
/* „Szczegóły kluczy” w barwach kokpitu: bez ramki starych części (zielony obrys, cień) i bez tytułu (stoi w nagłówku okna części) */
#kokpit .kk-tresc-natywna .chamber-section-container { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#kokpit .kk-tresc-natywna .tk-klucze { padding: 0; background: transparent; }
#kokpit .tk-klucze > .tk-tytul { display: none; }
.kk-natywne { display: grid; gap: 8px; }
.kk-dzien { margin: 8px 0 0; font-family: var(--kk-f-display); font-size: 1.05rem; color: var(--kk-muted); }
.kk-wpisy-pelne li { padding: 8px 10px; border: 1px solid var(--kk-line); border-radius: 10px; background: var(--kk-surface); }

@media (max-width: 767px), (max-height: 500px) {
    .kk-h1 { font-size: 1.7rem; }
    .kk-panel { padding: 14px; }
    #kokpit .chamber-section-container { padding: 14px; }
    #kokpit .kk-sekcja-tresc > .chamber-content-area { padding: 10px; }
    /* duże nagłówki starych części („TEMATY EGZAMINACYJNE”) mieszczą się na wąskim telefonie */
    #kokpit .kk-tresc-stara h1, #kokpit .kk-tresc-stara h2 { font-size: 1.4rem; overflow-wrap: anywhere; }
}