/* Scena warsztatu: tło dzień/noc, postacie (pozy WebP przełączane data-stan), dymki komiksowe, tablica. */
:root{--scena-tlo:url("tlo/dzien.webp");}
[data-theme="dark"]{--scena-tlo:url("tlo/noc.webp");}

/* ---------- scena ---------- */
.scena{container-type:size;position:relative;flex:1 1 auto;min-height:330px;max-height:700px;overflow:hidden;border:3px solid var(--linia);box-shadow:6px 6px 0 var(--cien);background:var(--scena-tlo) center 62%/cover no-repeat,#DDE3E6;}
.scena-postacie{position:absolute;left:1cqw;bottom:0;height:90cqh;display:flex;align-items:flex-end;z-index:1;}
.scena-mowa{position:absolute;z-index:3;top:3cqh;left:calc(1cqw + 52cqh);right:30cqw;max-height:94cqh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:2px 24px 6px 26px;scrollbar-width:thin;}
.tablica-mini{position:absolute;z-index:2;right:2.5cqw;top:24cqh;width:25cqw;min-width:230px;}

/* ---------- postacie ---------- */
.postac{position:relative;height:100%;aspect-ratio:820/1100;animation:p-oddech 4s ease-in-out infinite;}
.postac::after{content:"";position:absolute;left:28%;right:28%;bottom:.6%;height:3.4%;border-radius:50%;background:rgba(10,11,14,.28);filter:blur(3px);z-index:-1;}
.postac img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .22s ease;pointer-events:none;user-select:none;}
.postac:not([data-stan]) .p-slucha,
.postac[data-stan="wita"] .p-wita,
.postac[data-stan="slucha"] .p-slucha,
.postac[data-stan="szuka"] .p-szuka,
.postac[data-stan="mowi"]:not(.usta-otwarte) .p-mowi-b,
.postac[data-stan="mowi"].usta-otwarte .p-mowi-a,
.postac[data-stan="wskazuje"] .p-wskazuje,
.postac[data-stan="ok"] .p-ok,
.postac[data-stan="uwaga"] .p-uwaga,
.postac[data-stan="czerwona"] .p-czerwona{opacity:1;}
.postac .p-mowi-a,.postac .p-mowi-b{transition:none;} /* usta bez przenikania, inaczej mówienie się rozmywa */
@keyframes p-oddech{0%,100%{transform:translateY(0)}50%{transform:translateY(-.25%)}}
.postac[data-stan="wita"] .p-wita{animation:p-machanie 1.6s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes p-machanie{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.2deg)}}
.postac[data-stan="szuka"] .p-szuka{animation:p-kiwanie 1.4s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes p-kiwanie{0%,100%{transform:translateY(0)}50%{transform:translateY(.3%)}}
.postac[data-stan="ok"] .p-ok,.postac[data-stan="uwaga"] .p-uwaga,.postac[data-stan="czerwona"] .p-czerwona,.postac[data-stan="wskazuje"] .p-wskazuje{animation:p-pop .4s ease-out 1;transform-origin:50% 100%;}
@keyframes p-pop{0%{transform:scale(.95)}60%{transform:scale(1.025)}100%{transform:scale(1)}}
.login-postac{animation:none;}

/* ---------- ramka narracyjna i dymki ---------- */
.ramka-pytanie{align-self:flex-start;max-width:100%;background:var(--ramka);color:#1C1B20;border:3px solid #1C1B20;box-shadow:3px 3px 0 #1C1B20;padding:6px 12px 8px;margin-left:-14px;}
.rp-lbl{display:block;font-family:var(--f-tytul);font-size:15px;letter-spacing:.08em;}
.rp-tekst{font-family:var(--f-dymek);font-size:clamp(16px,1.55cqw,19px);line-height:1.2;}
.dymki{display:flex;flex-direction:column;gap:14px;}
.dymek{position:relative;align-self:flex-start;max-width:100%;background:var(--dymek-tlo);color:var(--dymek-tekst);border:3px solid #1C1B20;border-radius:28px;padding:11px 20px 13px;animation:d-wejscie .25s ease-out 1;}
@keyframes d-wejscie{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.dymek-tekst{font-family:var(--f-dymek);font-size:clamp(18px,2cqw,24px);line-height:1.22;white-space:pre-wrap;overflow-wrap:anywhere;}
.dymek-kto{display:block;font-family:var(--f-tytul);font-size:13px;letter-spacing:.08em;color:#9A3A0B;}
.dymek[data-rodzaj="techniczny"]{background:var(--techn-tlo);border-style:dashed;}
.dymek-etykieta{display:inline-block;margin-bottom:5px;background:var(--techn);color:#fff;border:2px solid #1C1B20;font-family:var(--f-tytul);font-size:14px;letter-spacing:.08em;padding:1px 8px;}
/* ogon dymka w stronę mówiącej postaci (po lewej) */
.dymek.ogon::before,.dymek.ogon::after{content:"";position:absolute;border-style:solid;border-color:transparent;}
.dymek.ogon::before{left:-30px;top:18px;border-width:10px 30px 12px 0;border-right-color:#1C1B20;}
.dymek.ogon::after{left:-23px;top:22px;border-width:6px 24px 7px 0;border-right-color:var(--dymek-tlo);}
.dymek.ogon[data-rodzaj="techniczny"]::after{border-right-color:var(--techn-tlo);}
/* dymek „myśli” (Tłoczek szuka w przepisach) */
.dymek.mysli{border-radius:44px;padding:10px 22px 12px;}
.dymek.mysli::before,.dymek.mysli::after{content:"";position:absolute;background:var(--dymek-tlo);border:3px solid #1C1B20;border-radius:50%;}
.dymek.mysli::before{left:-20px;top:30px;width:16px;height:16px;}
.dymek.mysli::after{left:-36px;top:46px;width:10px;height:10px;}
.mysli-narz{display:block;margin-top:3px;font-family:var(--f-mono);font-size:12.5px;color:#4A4852;}
.dymek.blad{background:#FFE3E0;}
.dymek.blad.ogon::after{border-right-color:#FFE3E0;}
.kursor::after{content:"▍";color:var(--akcent);animation:mig 1s steps(2) infinite;}
@keyframes mig{50%{opacity:0}}
.chipy{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:2px 8px;background:var(--akcent-jasny);color:#1C1B20;border:2px solid #1C1B20;border-radius:6px;font-family:var(--f-mono);font-size:12.5px;cursor:pointer;text-align:left;}
.chip:hover{background:#FFD3B8;}
.chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;flex:none;}
.foto-chip{display:inline-block;margin-top:8px;background:#1C1B20;color:var(--ramka);font-family:var(--f-tytul);font-size:14px;letter-spacing:.07em;padding:2px 8px;}

/* ---------- tablica na ścianie (mała) ---------- */
.tm-plansza{position:relative;background:var(--tablica);color:var(--kreda);border:2px solid #1C1B20;outline:7px solid var(--alu);box-shadow:0 0 0 10px #1C1B20,8px 8px 0 10px rgba(10,11,14,.35);margin:10px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;}
.tm-gora{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.tm-tytul{font-family:var(--f-tytul);font-size:22px;letter-spacing:.08em;}
.tm-opis{font-size:15px;line-height:1.35;color:var(--kreda-2);}
.tm-plansza .btn{align-self:flex-start;font-size:19px;color:#1C1B20;}
.tm-plansza .btn.btn-obrys{color:var(--kreda);}
.tm-plakietka,.plakietka{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-tytul);letter-spacing:.06em;border:2px solid #1C1B20;border-radius:999px;box-shadow:2px 2px 0 #1C1B20;padding:2px 10px;font-size:15px;white-space:nowrap;}
.tm-plakietka::before,.plakietka::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #1C1B20;}
[data-werdykt="UN"]{--w-tlo:var(--un);--w-tekst:#fff;}
[data-werdykt="UP"]{--w-tlo:var(--up);--w-tekst:#1C1B20;}
[data-werdykt="UD"]{--w-tlo:var(--ud);--w-tekst:#fff;}
.tm-plakietka[data-werdykt],.plakietka[data-werdykt]{background:var(--w-tlo);color:var(--w-tekst);}
.tm-plakietka.oplata{background:#F3EFE6;color:#1C1B20;}

/* ---------- tablica (pełna odpowiedź) ---------- */
.tablica{margin:auto;padding:0;border:none;background:transparent;width:min(1340px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible;color:var(--kreda);}
.tablica[open]{display:flex;align-items:flex-end;animation:t-wjazd .32s cubic-bezier(.2,.8,.3,1) 1;}
@keyframes t-wjazd{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
.tablica-rama{flex:1;min-width:0;max-height:calc(100dvh - 32px);display:flex;background:var(--alu);border:3px solid #1C1B20;box-shadow:8px 8px 0 rgba(10,11,14,.55);padding:9px;}
.tablica-plansza{flex:1;min-width:0;overflow-y:auto;background:radial-gradient(ellipse at 30% 15%,rgba(255,255,255,.06),transparent 60%),var(--tablica);border:2px solid #1C1B20;padding:16px 22px 20px;display:flex;flex-direction:column;gap:14px;}
.tablica-postac{flex:none;height:min(470px,62dvh);margin-left:-24px;margin-bottom:-6px;pointer-events:none;}
.tablica-gora{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.tablica-gora h2{font-family:var(--f-tytul);font-weight:400;font-size:26px;letter-spacing:.08em;}
.tablica-gora .plakietka{font-size:19px;padding:4px 16px;border-width:3px;box-shadow:3px 3px 0 #000;}
.tablica-tresc{display:flex;flex-direction:column;gap:14px;}
.tt-pytanie{align-self:flex-start;max-width:720px;background:var(--ramka);color:#1C1B20;border:2px solid #1C1B20;padding:7px 14px;transform:rotate(-.5deg);box-shadow:3px 3px 0 rgba(0,0,0,.5);font-family:var(--f-dymek);font-size:19px;line-height:1.25;}
.tt-pytanie b{font-family:var(--f-tytul);font-weight:400;font-size:14px;letter-spacing:.08em;}
.tt-uklad{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start;}
.tt-odp{font-size:17px;line-height:1.55;overflow-wrap:anywhere;}
.tt-odp p{margin:0 0 .7em;}
.tt-odp h3,.tt-odp h4,.tt-odp h5,.tt-odp h6,.tt-sekcja{font-family:var(--f-tytul);font-weight:400;font-size:23px;letter-spacing:.06em;border-bottom:2px dashed rgba(241,238,228,.45);padding-bottom:3px;margin:1em 0 .5em;}
.tt-odp ul,.tt-odp ol{margin:0 0 .8em 1.3em;}
.tt-odp li{margin:.25em 0;}
.tt-odp code{font-family:var(--f-mono);background:var(--tablica-2);padding:0 4px;}
.tt-odp strong{color:#fff;}
.tt-odp .kursor::after{color:#FFD7BF;}
.ref{font-family:var(--f-mono);font-size:.78em;background:var(--tablica-2);color:#FFD7BF;border:1.5px solid #FFD7BF;border-radius:5px;padding:0 5px;cursor:pointer;}
.ref:hover{background:#FFD7BF;color:#1C1B20;}
.tt-dymki{display:flex;flex-direction:column;gap:8px;}
.tt-dymki .dymek{animation:none;}
.tt-foto{display:inline-block;background:#1C1B20;color:var(--ramka);font-family:var(--f-tytul);font-size:16px;letter-spacing:.07em;padding:3px 10px;border:2px solid var(--ramka);}
.usterka{display:flex;gap:12px;align-items:flex-start;padding:6px 0;}
.usterka .kat{flex:none;display:grid;place-items:center;min-width:44px;height:44px;padding:0 4px;border:3px solid #1C1B20;border-radius:22px;font-family:var(--f-tytul);font-size:16px;letter-spacing:.04em;box-shadow:2px 2px 0 #000;}
.kat.UN{background:var(--un);color:#fff;} .kat.UP{background:var(--up);color:#1C1B20;} .kat.UD{background:var(--ud);color:#fff;}
.u-id{display:block;font-family:var(--f-mono);font-size:12.5px;color:var(--kreda-2);margin-top:2px;}
.u-baza{display:block;font-size:14px;color:var(--kreda-2);}
.techn-blok{border:2px dashed #9EC3E6;background:rgba(43,93,140,.18);padding:10px 14px;}
.tt-cytaty{display:flex;flex-direction:column;gap:16px;}
.tt-cytaty h3{font-family:var(--f-tytul);font-weight:400;font-size:22px;letter-spacing:.06em;}
details.cytat{position:relative;background:#FFFDF7;color:#1C1B20;border:2px solid #1C1B20;box-shadow:3px 3px 0 rgba(0,0,0,.55);padding:12px 14px;}
details.cytat:nth-of-type(odd){transform:rotate(.4deg);}
details.cytat:nth-of-type(even){transform:rotate(-.35deg);}
details.cytat::before{content:"";position:absolute;top:-10px;left:50%;width:18px;height:18px;border-radius:50%;border:2px solid #1C1B20;background:var(--un);}
details.cytat:nth-of-type(3n+2)::before{background:var(--techn);}
details.cytat:nth-of-type(3n)::before{background:var(--up);}
details.cytat.podswietl{box-shadow:0 0 0 4px var(--akcent),3px 3px 0 rgba(0,0,0,.55);}
details.cytat summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px;}
details.cytat summary::-webkit-details-marker{display:none;}
.c-id{font-family:var(--f-mono);font-size:13px;font-weight:500;color:#9A3A0B;}
.c-et{font-weight:600;font-size:14.5px;}
.c-tekst{margin-top:8px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;}
.c-meta{margin-top:6px;font-size:13px;}
.c-meta a{color:#1C1B20;font-weight:600;}
.zmiana{display:block;color:#9A3A0B;font-weight:600;margin-bottom:4px;}
.tt-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-top:2px dashed rgba(241,238,228,.35);padding-top:14px;}
.tt-akcje .btn{color:#1C1B20;font-size:18px;}
.tt-akcje .btn-ocena{width:44px;padding:0;background:transparent;color:var(--kreda);border-color:var(--kreda);box-shadow:none;}
.tt-akcje .btn-ocena.wybrana{background:var(--kreda);color:#1C1B20;}
.koszt{font-family:var(--f-mono);font-size:13px;color:var(--kreda-2);}
.tt-stopka{font-size:12.5px;color:var(--kreda-2);}
.tt-pusto{color:var(--kreda-2);font-size:16px;}

/* ---------- węższe ekrany ---------- */
@media (max-width:1100px){
  .tablica-postac{display:none;}
  .tablica{width:min(1000px,calc(100vw - 24px));}
}
@media (max-width:900px){
  .scena-mowa{right:3cqw;}
  .tablica-mini{top:auto;bottom:3cqh;right:3cqw;width:auto;min-width:0;}
  .tm-opis{display:none;}
  .tt-uklad{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .scena{flex:none;height:64svh;min-height:420px;max-height:none;background-position:26% 62%;}
  .scena-postacie{left:-4cqw;height:72cqh;}
  .scena-mowa{top:2cqh;left:30cqw;right:2cqw;max-height:78cqh;padding:2px 6px 6px 22px;gap:10px;}
  .ramka-pytanie{margin-left:0;padding:4px 10px 6px;}
  .rp-lbl{font-size:13px;}
  .rp-tekst{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;}
  .dymek{padding:8px 14px 10px;border-radius:22px;}
  .dymek-tekst{font-size:17px;}
  .tablica-mini{bottom:2cqh;}
  .tm-plansza{flex-direction:row;flex-wrap:wrap;align-items:center;margin:8px;padding:6px 8px;gap:6px 8px;outline-width:5px;box-shadow:0 0 0 8px #1C1B20;}
  .tm-plakietka{font-size:13px;}
  .tm-tytul{font-size:18px;}
  .tm-plansza .btn{font-size:16px;min-height:40px;}
  .tablica{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;}
  .tablica-rama{max-height:100dvh;height:100%;padding:5px;border-width:0;box-shadow:none;}
  .tablica-plansza{padding:12px 14px 16px;}
  .tablica-gora h2{font-size:21px;}
  .tablica-gora .plakietka{font-size:15px;padding:3px 10px;}
  .tt-odp{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  .postac,.postac img,.dymek,.tablica[open]{animation:none!important;transition:none!important;}
  .btn{transition:none;}
}