/* Radio Lechistan 2.0, STREFA C: MOTION + ZABAWA (zabawa.css 1.0.0)
   Spiker PRL (dymek), pieczatka, fale radiowe, konfetti, telewizor Rubin w Top 20.
   Bez zlota, szeryfow i kursyw. prefers-reduced-motion lagodzi, nie wylacza. */
.zab-fx{position:fixed;inset:0;z-index:2147483646;pointer-events:none;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.zab-fx canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

/* ── fala radiowa (ripple) ── */
.zab-fala{position:absolute;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  border:2.5px solid var(--zc,#ff6a5c);box-shadow:0 0 14px var(--zc,#ff6a5c),inset 0 0 10px var(--zc,#ff6a5c);opacity:0;will-change:transform,opacity}
.zab-fala.kropka{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--zc,#ff6a5c);box-shadow:0 0 12px var(--zc,#ff6a5c)}

/* ── pieczatka ── */
.zab-stamp{position:absolute;left:0;top:0;padding:7px 15px 6px;border:3px double var(--zs,#ff7a6c);border-radius:8px;color:var(--zs,#ff7a6c);
  font:900 1.18rem/1 Oswald,"Bebas Neue",Impact,"Arial Narrow",sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:rgba(20,15,10,.82);box-shadow:0 6px 22px rgba(0,0,0,.45);text-shadow:0 0 1px currentColor;opacity:0;will-change:transform,opacity}
.zab-stamp small{display:block;margin-top:3px;font-size:.62rem;letter-spacing:.2em;font-weight:700;opacity:.9}
.zab-nuta{position:absolute;left:0;top:0;font-weight:900;font-size:1.25rem;line-height:1;color:var(--zc,#ff7a6c);text-shadow:0 0 8px rgba(0,0,0,.6);opacity:0;will-change:transform,opacity}

/* ── Spiker PRL (dymek) ── */
.zab-sp-wrap{position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));z-index:2147483647;display:flex;justify-content:center;pointer-events:none;padding:0 10px}
.zab-sp-wrap[hidden]{display:none!important}
.zab-spiker{--ak:#ff7a5c;position:relative;pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  width:min(500px,100%);padding:12px 12px 14px 12px;border-radius:18px;background:#1c150e;color:#f6f1e3;border:1px solid var(--ak);
  box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 0 3px rgba(0,0,0,.25),0 0 26px -6px var(--ak);overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;transform-origin:0 100%}
.zab-spiker[data-gat="techno"]{--ak:#4fd7ff}
.zab-spiker[data-gat="polo"]{--ak:#ff7ab8}
.zab-spiker[data-gat="hiphop"]{--ak:#ffa14a}
.zab-spiker[data-gat="rock"]{--ak:#ff5a4a}
.zab-spiker[data-gat="reggae"]{--ak:#6fdc7f}
.zab-spiker[data-gat="pop"]{--ak:#c79bff}
.zab-spiker[data-gat="prl"]{--ak:#e8d3a2}
.zab-spiker[data-gat="kontrola"]{--ak:#ff6a5c}
.zab-sp-ik{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transform-origin:50% 90%}
.zab-sp-ik svg{width:46px;height:46px;display:block;overflow:visible}
.zab-sp-ik .fala1,.zab-sp-ik .fala2,.zab-sp-ik .fala3{fill:none;stroke:var(--ak);stroke-width:3;stroke-linecap:round;opacity:.15;animation:zabFala 1s ease-in-out infinite}
.zab-sp-ik .fala2{animation-delay:.18s}.zab-sp-ik .fala3{animation-delay:.36s}
.zab-sp-ik .tuba{transform-origin:20px 30px;animation:zabTuba .5s ease-in-out infinite alternate}
.zab-sp-tr{min-width:0}
.zab-sp-et{display:block;font:800 .66rem/1.2 "Courier New",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ak);margin-bottom:3px}
.zab-sp-tx{margin:0;font-size:.97rem;line-height:1.38;font-weight:600;color:#f6f1e3;word-break:break-word;min-height:1.38em}
.zab-sp-dop{display:block;margin-top:5px;font-size:.84rem;line-height:1.35;font-weight:500;color:#d8d2bd}
.zab-sp-x{align-self:start;width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#f6f1e3;font-size:1rem;cursor:pointer;display:grid;place-items:center;padding:0}
.zab-sp-x:hover{background:rgba(255,77,77,.25)}
.zab-sp-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.zab-sp-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ak);transform-origin:0 50%;opacity:.85}
.zab-spiker.kontrola{width:min(540px,100%)}
.zab-spiker.kontrola .zab-sp-tx{font-size:1.04rem}
@keyframes zabFala{0%,100%{opacity:.12}50%{opacity:1}}
@keyframes zabTuba{from{transform:rotate(-5deg) scale(1)}to{transform:rotate(4deg) scale(1.07)}}
.zab-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── przyciski na calej stronie ── */
#wlacznik,#galka-strojenie{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#wlacznik.zab-trzymany{filter:drop-shadow(0 0 14px rgba(255,106,92,.65))}
.t20-btn-akc,.t20-wyslij{position:relative;overflow:hidden}
.t20-btn-akc::after,.t20-wyslij::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.38) 50%,transparent 80%);transform:translateX(-130%) skewX(-18deg)}
.t20-btn-akc:hover::after,.t20-btn-akc:focus-visible::after,.t20-wyslij:hover::after{animation:zabBlask .8s ease-out}
.t20-glos,.t20-next{position:relative}
.t20-glos:not(.zrobione):hover .t20-serce{display:inline-block;animation:t20Serce .8s ease-in-out infinite}
.t20-next:hover span[aria-hidden]{display:inline-block;animation:zabPlay .7s ease-in-out infinite alternate}
.t20-logo{cursor:pointer}
@keyframes zabBlask{to{transform:translateX(260%) skewX(-18deg)}}
@keyframes zabPlay{to{transform:translateX(4px)}}

/* ── Top 20: otwarcie jak telewizor Rubin ── */
.cz-top:not([hidden]) .t20-okno{animation:zabRubin .95s cubic-bezier(.22,.9,.3,1) both;transform-origin:50% 50%}
.t20-okno::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px)}
.cz-top:not([hidden]) .t20-okno::after{animation:zabSkan 1.4s ease-out both}
@keyframes zabRubin{
  0%{clip-path:inset(49.8% 49.6% 49.8% 49.6% round 4px);filter:brightness(5) saturate(0);opacity:1;transform:none}
  22%{clip-path:inset(49.6% 0 49.6% 0 round 4px);filter:brightness(4) saturate(0);transform:none}
  46%{clip-path:inset(49.6% 0 49.6% 0 round 4px);filter:brightness(3) saturate(.2);transform:none}
  78%{clip-path:inset(0 0 0 0 round 22px);filter:brightness(1.6) saturate(.8);transform:scaleY(1.015)}
  100%{clip-path:inset(0 0 0 0 round 22px);filter:none;transform:none}}
@keyframes zabSkan{0%{opacity:1}60%{opacity:.7}100%{opacity:0}}

/* ── zakladki: plynne podkreslenie ── */
.t20-taby{position:relative}
.zab-ind{position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#ff9a45,#ff6a5c);
  box-shadow:0 0 14px rgba(255,122,60,.8);pointer-events:none;transition:transform .55s cubic-bezier(.3,1.5,.5,1),width .55s cubic-bezier(.3,1.5,.5,1)}

/* ── lista ze sprezynujacym stagger, piatka FLIP z przeregulowaniem ── */
.cz-top .t20-wiersz,.cz-top .t20-pod-k{animation-name:zabWiersz;animation-duration:.62s;animation-timing-function:cubic-bezier(.2,1.25,.4,1)}
.cz-top .t20-rank.cicho .t20-wiersz,.cz-top .t20-rank.cicho .t20-pod-k{animation:none}
.cz-top .t20-slot{transition:transform .7s cubic-bezier(.3,1.45,.5,1),border-color .2s,background .2s}
.cz-top .t20-slot.pelny:hover{border-color:rgba(255,154,69,.55)}
.cz-top .t20-slot.wjazd{animation-name:zabSlot;animation-duration:.8s}
@keyframes zabWiersz{0%{opacity:0;transform:translateY(22px) scale(.95)}55%{opacity:1;transform:translateY(-4px) scale(1.012)}100%{opacity:1;transform:none}}
@keyframes zabSlot{0%{opacity:0;transform:translateX(-26px) scale(.94);box-shadow:0 0 0 0 rgba(255,154,69,.0)}55%{opacity:1;transform:translateX(5px) scale(1.01);box-shadow:0 0 0 4px rgba(255,154,69,.45)}100%{transform:none;box-shadow:0 0 0 0 rgba(255,154,69,0)}}

/* ── ekran: nic nie wystaje poza viewport ── */
@media (max-width:640px){
  .zab-sp-wrap{padding:0 8px}
  .zab-spiker{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:10px 10px 13px}
  .zab-sp-ik{width:46px;height:46px}.zab-sp-ik svg{width:36px;height:36px}
  .zab-sp-tx{font-size:.92rem}
  .zab-stamp{font-size:1rem;padding:6px 11px 5px}
}
/* ── reduced motion: lagodzenie, nie wylaczenie ── */
@media (prefers-reduced-motion:reduce){
  .cz-top:not([hidden]) .t20-okno{animation:zabRubinSpokojnie 1.2s ease-out both}
  @keyframes zabRubinSpokojnie{0%{opacity:0;filter:brightness(2.4);transform:scaleY(.96)}100%{opacity:1;filter:none;transform:none}}
  .cz-top:not([hidden]) .t20-okno::after{animation-duration:2s}
  .cz-top .t20-wiersz,.cz-top .t20-pod-k{animation-name:t20Wiersz;animation-duration:.9s;animation-timing-function:ease-out}
  .cz-top .t20-slot{transition:transform 1s ease-out,border-color .3s,background .3s}
  .cz-top .t20-slot.wjazd{animation-name:t20Wjazd;animation-duration:1s}
  .zab-ind{transition-duration:.9s;transition-timing-function:ease-out}
  .zab-sp-ik .tuba{animation-duration:1.6s}
  .zab-sp-ik .fala1,.zab-sp-ik .fala2,.zab-sp-ik .fala3{animation-duration:2.4s}
  .t20-btn-akc:hover::after,.t20-wyslij:hover::after{animation-duration:1.8s}
}