/* ═══════════════════════════════════════════════
   PRL: motywy kolorystyczne v1.0.0 (2026-10-10)
   html[data-motyw="..."] ustawia js/motywy.js (+ skrypt w <head>, bez mignięcia).
   Brak atrybutu = PRL (oryginał, nic się nie zmienia).
   szary   – monochromatyczny (same szarości, filtr grayscale na całej stronie)
   czarny  – czarne tło, czerwony akcent
   bialy   – białe tło, ciemny tekst
   lechia  – „Lechicki srebrny” z lechistan.org (srebro, fiolet, zieleń)
   lechia-n – „Lechicki nocą” z lechistan.org (grafit, fiolet, zieleń)
   Zasada: zmieniamy zmienne z style.css + kilka twardo wpisanych brązów.
   Ciemne „wyspy” (czat, okienka, tablica) w jasnych motywach dostają
   ciemny wariant tej samej rodziny, żeby tekst zawsze miał kontrast.
   ═══════════════════════════════════════════════ */

/* ── 1. Palety (motywy ciemne) ── */
html[data-motyw="szary"]{
  --bakelit:#2a2a2a;--bakelit-2:#333;--krem:#f0f0f0;--krem-2:#c8c8c8;
  --czerwien:#4a4a4a;--czerwien-neon:#e6e6e6;--musztarda:#d0d0d0;--teal:#5e5e5e;--teal-jasny:#bdbdbd;
  --pomarancz:#9a9a9a;--atrament:#1a1a1a;--papier:#e6e6e6;
  --m-top:#1c1c1c;--m-stopka:#181818;--m-panel:#232323;--m-panel-2:#2c2c2c;--m-pole:#141414;--m-wiad:#303030;--m-wiad-moja:#3a3a3a;
  --m-btn-a:#5a5a5a;--m-btn-b:#3a3a3a;--m-btn-ram:#222;--m-ok-a:#5a5a5a;--m-ok-b:#3a3a3a;--m-breaking:#3a3a3a;--m-breaking-ram:#222;
  --m-tytul-t:#fff;--m-cien:rgba(0,0,0,.45);
}
html[data-motyw="czarny"]{
  --bakelit:#0b0b0c;--bakelit-2:#151517;--krem:#f2f2f2;--krem-2:#c4c4c6;
  --czerwien:#c3271c;--czerwien-neon:#ff4f43;--musztarda:#e6e6e6;--teal:#3f7a6e;--teal-jasny:#6cc0ac;
  --atrament:#111113;--papier:#e9e9ea;
  --m-top:#050506;--m-stopka:#060607;--m-panel:#121214;--m-panel-2:#1a1a1d;--m-pole:#050506;--m-wiad:#1c1c1f;--m-wiad-moja:#2a1a18;
  --m-btn-a:#a92318;--m-btn-b:#7c150d;--m-btn-ram:#56100a;--m-ok-a:#2fae57;--m-ok-b:#1e7d3d;--m-breaking:#7c150d;--m-breaking-ram:#56100a;
  --m-tytul-t:#fff;--m-cien:rgba(0,0,0,.6);
}
html[data-motyw="lechia-n"]{
  --bakelit:#101118;--bakelit-2:#14151e;--krem:#e6e8ee;--krem-2:#a4aab4;
  --czerwien:#7650cf;--czerwien-neon:#b39cf0;--musztarda:#b39cf0;--teal:#1f955c;--teal-jasny:#34b37c;
  --pomarancz:#b39cf0;--atrament:#181b24;--papier:#e6e8ee;
  --m-top:#0b0c12;--m-stopka:#0b0c12;--m-panel:#1a1c26;--m-panel-2:#20232f;--m-pole:#0b0c12;--m-wiad:#20232f;--m-wiad-moja:#2a2340;
  --m-btn-a:#7650cf;--m-btn-b:#5a34ab;--m-btn-ram:#3d2380;--m-ok-a:#1f955c;--m-ok-b:#17784b;--m-breaking:#4a2a8f;--m-breaking-ram:#2f1a5e;
  --m-tytul-t:#fff;--m-cien:rgba(0,0,0,.6);
}

/* ── 2. Palety (motywy jasne) ── */
html[data-motyw="bialy"]{
  --bakelit:#ffffff;--bakelit-2:#f2f2f4;--krem:#15171b;--krem-2:#454a53;
  --czerwien:#b3221a;--czerwien-neon:#c3271c;--musztarda:#7a5a0c;--teal:#2f6a5e;--teal-jasny:#22594e;
  --pomarancz:#a64e17;--atrament:#15171b;--papier:#f5f5f6;
  --m-top:#ffffff;--m-stopka:#f2f2f4;--m-btn-a:#b3221a;--m-btn-b:#8f1a10;--m-btn-ram:#6d130b;--m-ok-a:#1f8a45;--m-ok-b:#17703a;
  --m-breaking:#8f1a10;--m-breaking-ram:#6d130b;--m-tytul-t:#fff;--m-cien:rgba(20,22,30,.14);
}
html[data-motyw="lechia"]{
  --bakelit:#f3f4f6;--bakelit-2:#e9ecf0;--krem:#181b24;--krem-2:#4a505e;
  --czerwien:#6a42c0;--czerwien-neon:#5a34ab;--musztarda:#5a34ab;--teal:#17784b;--teal-jasny:#17784b;
  --pomarancz:#5a34ab;--atrament:#181b24;--papier:#ffffff;
  --m-top:#ffffff;--m-stopka:#e9ecf0;--m-btn-a:#7650cf;--m-btn-b:#5a34ab;--m-btn-ram:#4a2a8f;--m-ok-a:#1f955c;--m-ok-b:#17784b;
  --m-breaking:#4a2a8f;--m-breaking-ram:#2f1a5e;--m-tytul-t:#fff;--m-cien:rgba(40,44,60,.16);
}
/* ciemne wyspy w jasnych motywach: wracają do ciemnej palety tej samej rodziny */
html[data-motyw="bialy"] :is(.czat-popup,.prop-tlo,.pozdro-karta--tablica,.live-panel,.dj-popup,.pg-karta,.ticker,.breaking,#testcard,.lxr-modal,.lxr-nakladka,.sc-okno,.zab-spiker,.t20-samouczek,.t20-dzieki,#pinky-overlay,.wlacznik,.czat-fab,.cz-top){
  --bakelit:#0b0b0c;--bakelit-2:#151517;--krem:#f2f2f2;--krem-2:#c4c4c6;--musztarda:#e0b04f;--czerwien-neon:#ff4f43;--teal-jasny:#6cc0ac;
  --m-top:#050506;--m-panel:#121214;--m-panel-2:#1a1a1d;--m-pole:#050506;--m-wiad:#1c1c1f;--m-wiad-moja:#2a1a18;
}
html[data-motyw="lechia"] :is(.czat-popup,.prop-tlo,.pozdro-karta--tablica,.live-panel,.dj-popup,.pg-karta,.ticker,.breaking,#testcard,.lxr-modal,.lxr-nakladka,.sc-okno,.zab-spiker,.t20-samouczek,.t20-dzieki,#pinky-overlay,.wlacznik,.czat-fab,.cz-top){
  --bakelit:#101118;--bakelit-2:#14151e;--krem:#e6e8ee;--krem-2:#a4aab4;--musztarda:#b39cf0;--czerwien-neon:#b39cf0;--teal-jasny:#34b37c;
  --m-top:#0b0c12;--m-panel:#1a1c26;--m-panel-2:#20232f;--m-pole:#0b0c12;--m-wiad:#20232f;--m-wiad-moja:#2a2340;
}

/* ── 3. Twardo wpisane brązy → zmienne motywu ── */
html[data-motyw] .top{background:var(--m-top);box-shadow:0 1px 0 var(--m-cien)}
html[data-motyw] .stopka,html[data-motyw] .lx-ad--foot{background:var(--m-stopka)}
html[data-motyw] :is(.cz-head,.cz-form-msg,.cz-stopka,.pozdro-karta--tablica,#pinky-overlay){background:var(--m-top)}
html[data-motyw] :is(.czat-popup,.prop-karta){background:var(--m-panel)}
html[data-motyw] .live-panel{background:linear-gradient(180deg,var(--m-panel),var(--m-panel-2))}
html[data-motyw] :is(.cz-tab,#cz-form-auth input,.cz-form-msg input,.prop-karta input){background:var(--m-pole)}
html[data-motyw] .cz-wiad{background:var(--m-wiad)}
html[data-motyw] .cz-wiad.moja{background:var(--m-wiad-moja)}
html[data-motyw] :is(.wlacznik,.czat-fab,.casting-btn-glowny,#cz-auth-btn,.pozdro-wyslij,.cz-pozdro-btn){
  background:linear-gradient(180deg,var(--m-btn-a),var(--m-btn-b));border-color:var(--m-btn-ram)}
html[data-motyw] :is(.wlacznik,.czat-fab,.casting-btn-glowny,.pozdro-wyslij,.cz-pozdro-btn,.nav .nav-pobierz,.cz-propozycja-btn,#prop-wyslij,.tytul span){color:#fff}
html[data-motyw] .breaking{background:var(--m-breaking);border-top-color:var(--m-breaking-ram)}
html[data-motyw] .br-label{border-right-color:var(--m-breaking-ram)}
html[data-motyw] .ticker{border-color:var(--m-breaking)}
html[data-motyw] .tytul span{color:var(--m-tytul-t)}

/* jasne motywy: nagłówek, menu mobilne, stopka */
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .top{border-bottom:3px double var(--krem-2)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav{background:var(--m-top)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav a:hover,
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav-toggle:hover{background:rgba(0,0,0,.05)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav .nav-lechi{color:var(--musztarda)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav a.nav-konto{color:var(--czerwien);background:rgba(0,0,0,.03)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav a.nav-konto:hover{color:#fff;background:var(--czerwien)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .st-dol{color:var(--krem-2);border-top-color:rgba(0,0,0,.18)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .crt-scan{opacity:.05}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .crt-grain{opacity:.03}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .hero{
  background:radial-gradient(60vw 40vh at 50% -6%,rgba(195,39,28,.10),transparent 60%),var(--bakelit)}
html[data-motyw="lechia"] .hero{
  background:radial-gradient(60vw 40vh at 50% -6%,rgba(106,66,192,.14),transparent 60%),radial-gradient(48vw 30vh at 85% 30%,rgba(23,120,75,.10),transparent 70%),var(--bakelit)}
html[data-motyw="lechia-n"] .hero{
  background:radial-gradient(60vw 40vh at 50% -6%,rgba(118,80,207,.28),transparent 60%),radial-gradient(48vw 30vh at 85% 30%,rgba(31,149,92,.12),transparent 70%),var(--bakelit)}
html[data-motyw="czarny"] .hero{
  background:radial-gradient(60vw 40vh at 50% -6%,rgba(195,39,28,.18),transparent 60%),var(--bakelit)}

/* ── 4. Szary: monochromatyczny. Filtr na całej stronie łapie też obrazki,
   SVG, radio, tabliczki, króliczka i widżet bota. Jasność zostaje,
   więc kontrast tekstu się nie zmienia. ── */
html[data-motyw="szary"]{filter:grayscale(1)}
html[data-motyw="szary"] .hero{background:radial-gradient(60vw 40vh at 50% -6%,rgba(255,255,255,.07),transparent 60%),var(--bakelit)}

/* ── 5. Króliczek na jasnym tle: lekki cień, żeby biały zając był widoczny ── */
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .kr-scena-svg{
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.5)) drop-shadow(0 5px 9px rgba(0,0,0,.35))}

/* ── 6. Płynne przejście przy zmianie (tylko na chwilę po kliknięciu) ── */
html.motyw-anim,html.motyw-anim *,html.motyw-anim *::before,html.motyw-anim *::after{
  transition:background-color .32s ease,color .32s ease,border-color .32s ease,fill .32s ease,stroke .32s ease!important}
@media (prefers-reduced-motion:reduce){
  html.motyw-anim,html.motyw-anim *,html.motyw-anim *::before,html.motyw-anim *::after{transition-duration:.12s!important}
}

/* ── 7. Przełącznik (ikona palety w nagłówku) ── */
.mtw{position:relative;flex:none;display:flex;align-items:center;margin-left:6px}
.mtw-btn{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--musztarda);background:rgba(217,164,65,.06);color:var(--krem);
  border-radius:50%;padding:0;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .25s;
}
.mtw-btn:hover{transform:rotate(-14deg) scale(1.06)}
.mtw-btn svg{width:22px;height:22px}
.mtw-btn[aria-expanded="true"]{background:var(--musztarda);color:var(--bakelit)}
.mtw-pas{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;
  display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;
  background:var(--m-panel,#1c1610);color:var(--krem);
  border:1px solid var(--musztarda);border-radius:999px;box-shadow:0 14px 34px rgba(0,0,0,.4);
  transform-origin:calc(100% - 21px) -10px;
  opacity:0;transform:scale(.3) translateY(-8px);pointer-events:none;visibility:hidden;
  transition:opacity .2s ease,transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s .45s;
}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .mtw-pas{background:#fff;box-shadow:0 14px 34px rgba(20,22,30,.18)}
.mtw.otw .mtw-pas{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s ease,transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s}
.mtw-opt{
  width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;position:relative;
  border:2px solid rgba(128,128,128,.55);background:var(--sw);
  opacity:0;transform:scale(.2) translateY(-6px);
  transition:opacity .2s ease,transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.mtw.otw .mtw-opt{opacity:1;transform:none;transition-delay:calc(var(--i) * 45ms + 60ms)}
.mtw-opt:hover{transform:scale(1.12)!important}
.mtw-opt[aria-checked="true"]{box-shadow:0 0 0 3px var(--m-panel,#1c1610),0 0 0 5px var(--czerwien-neon)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .mtw-opt[aria-checked="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--czerwien)}
.mtw-opt[aria-checked="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;
  background:var(--swk,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.mtw-x{
  width:30px;height:30px;border-radius:50%;cursor:pointer;margin-left:4px;
  border:1px solid rgba(128,128,128,.5);background:transparent;color:inherit;font-size:1.1rem;line-height:1;
  opacity:0;transition:opacity .2s ease,background .2s;
}
.mtw.otw .mtw-x{opacity:1;transition-delay:calc(6 * 45ms + 60ms)}
.mtw-x:hover{background:rgba(195,39,28,.25)}
.mtw-nazwa{
  position:absolute;top:calc(100% + 6px);right:12px;white-space:nowrap;
  font:700 .7rem/1.2 'Courier New',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--krem);background:inherit;padding:3px 8px;border-radius:6px;
}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .mtw-nazwa{background:#fff;border:1px solid rgba(0,0,0,.15)}
html:not([data-motyw="bialy"]):not([data-motyw="lechia"]) .mtw-nazwa{background:var(--m-panel,#1c1610);border:1px solid rgba(255,255,255,.18)}
/* próbki */
[data-m=""]{--sw:conic-gradient(#211a13 0 50%,#c3271c 0 75%,#ece0c6 0)}
[data-m="szary"]{--sw:conic-gradient(#2a2a2a 0 50%,#8a8a8a 0 75%,#e6e6e6 0)}
[data-m="czarny"]{--sw:conic-gradient(#0b0b0c 0 50%,#c3271c 0 75%,#f2f2f2 0)}
[data-m="bialy"]{--sw:conic-gradient(#ffffff 0 50%,#b3221a 0 75%,#15171b 0);--swk:#15171b}
[data-m="lechia"]{--sw:conic-gradient(#eef0f3 0 50%,#6a42c0 0 75%,#17784b 0);--swk:#181b24}
[data-m="lechia-n"]{--sw:conic-gradient(#101118 0 50%,#7650cf 0 75%,#34b37c 0)}
@media (max-width:820px){
  .mtw{margin-left:0;position:static}
  .mtw-pas{position:fixed;top:var(--mtw-top,76px);right:12px;max-width:calc(100vw - 24px);gap:6px;padding:8px 8px 8px 10px;transform-origin:calc(100% - 30px) -8px}
  .mtw-opt{width:32px;height:32px}
  .mtw-btn{width:40px;height:40px}
}
@media (max-width:380px){ .mtw-pas{gap:5px} .mtw-opt{width:29px;height:29px} .mtw-x{width:28px;height:28px;margin-left:2px} }
@media (prefers-reduced-motion:reduce){
  .mtw-pas,.mtw-opt{transition-duration:.15s!important}
  .mtw.otw .mtw-opt{transition-delay:0s}
}

/* sekcja w Moje konto */
.mtw-konto{display:flex;flex-wrap:wrap;gap:10px;padding:6px 2px 4px}
.mtw-konto button{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:7px 12px 7px 7px;border-radius:999px;border:2px solid #d4cfc3;background:#fff;color:#1d1a17;
  font:600 .85rem/1.2 Georgia,serif;
}
.mtw-konto button i{width:24px;height:24px;border-radius:50%;background:var(--sw);border:1px solid rgba(0,0,0,.25)}
.mtw-konto button[aria-checked="true"]{border-color:#c3271c;background:#fff6f4}

/* ── 8. Poprawki kontrastu (audyt 10.10). Reguły „html …” działają też w PRL (domyślnym):
   na ciemnym jasna czcionka, na jasnym ciemna. ── */
html .pozdro-razy{color:var(--czerwien-neon)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .pozdro-karta--tablica .pozdro-razy{color:#ff6b60}
html[data-motyw="lechia"] .pozdro-karta--tablica .pozdro-razy{color:#b39cf0}
html[data-motyw] .ram-tab tr.ram-live td{color:#8f1a10}
html[data-motyw="szary"] .ram-tab tr.ram-live td{color:#111}
html[data-motyw="lechia-n"] :is(.ramowka,.wkrotce,.pozdro-karta:not(.pozdro-karta--tablica),.pozdro-popup,.pozdro-legenda-karta,.pozdro-dziekuje-karta){--czerwien:#5a34ab;--musztarda:#5a34ab}
html:is([data-motyw="lechia"],[data-motyw="lechia-n"]) .casting-karta{--czerwien:#3d2380}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) #sluchacze b{color:#17703a!important}
html .dj-fab-live{background:#b3221a}
html .dj-fab{background:linear-gradient(180deg,#17784b,#0f5a37)}
@keyframes mtwSyrena{0%,100%{color:#fff;background:#c62828}50%{color:#fff;background:#1565c0}}
@media (max-width:759px){
  html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav-toggle.t20-syrena-menu{animation-name:mtwSyrena}
}

html #ram-info{color:var(--atrament)}
/* nagłówek w jasnych motywach: Strona Hańby, syrena Top 20, „?” */
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav .nav-hanba{color:#a3201a;background:rgba(195,39,28,.06)}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav .nav-hanba .hb-mini{color:#a3201a}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav .nav-hanba:hover{color:#fff;background:#a3201a}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .nav-top20.t20-syrena{animation-name:mtwSyrena}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .t20-pyt{background:#3a3d44;border-color:#3a3d44}
/* przyciski na kolorowym tle: ciemniejszy odcień, ten sam kolor (AA dla białego napisu) */
html .nav .nav-pobierz,html .cz-propozycja-btn,html #prop-wyslij{background:linear-gradient(180deg,#1e7d3d,#17663a)}
html:is([data-motyw="lechia"],[data-motyw="lechia-n"]) .nav .nav-pobierz,html:is([data-motyw="lechia"],[data-motyw="lechia-n"]) .cz-propozycja-btn,html:is([data-motyw="lechia"],[data-motyw="lechia-n"]) #prop-wyslij{background:linear-gradient(180deg,#17784b,#11603c)}
html .sv-btn--tg{background:#1a6fa0}
html .sv-btn--tg:hover{background:#145a83}
html .nav .nav-pobierz:hover,html .cz-propozycja-btn:hover,html #prop-wyslij:hover{background:linear-gradient(180deg,#17663a,#125430)}
html .ram-tab tr.ram-live td{color:#9a1f17}
html:is([data-motyw="bialy"],[data-motyw="lechia"]) .lx-ad__label{color:#5e4a0e}