/* EKRAN ROLEK /rolki - osobny od lenty (decyzja wlasciciela z 02.10).

   ZASADY (zamki w RolkiEkranTest):
   - CZARNE TLO, film na caly ekran; kolory WPISANE WPROST, nie z motywu
     (ta sama zasada, co pelny ekran rolek i karta wizytowki);
   - ZERO ZAOKRAGLEN, awatar i znaki KWADRATOWE - zadnego kolka;
   - JEDNA ZLOTA ZALEWKA na karte: guzik na cala szerokosc u dolu;
   - PRZEWIJANIE TO SAM CSS (`scroll-snap`) - zadnego kodu, ktory chodzi
     caly czas; linia postepu jedzie `transform` ze zmiennej `--postep`. */

body.tryb-rolki{background:#000;overflow:hidden}
body.tryb-rolki .topbar,body.tryb-rolki .tabbar,body.tryb-rolki #pwabar{display:none}

.re{position:fixed;inset:0;z-index:5000;background:#000;color:#fff}

/* ------------------------------------------------ gora */
.re-gora{position:absolute;left:0;right:0;top:0;z-index:3;padding:calc(6px + env(safe-area-inset-top)) 6px 10px;
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;
  /* Prawka 280: zaslona pod napisami na KAZDYM filmie - .72 tam, gdzie
     stoja "Ludzie / Firmy" i krzyzyk (bylo .55 malejace od razu; zakladki
     staly w samym zanikaniu - 1.2:1 na bialym filmie). */
  background:linear-gradient(rgba(0,0,0,.74),rgba(0,0,0,.72) 86%,rgba(0,0,0,0))}
.re-postep{position:absolute;left:0;right:0;top:env(safe-area-inset-top);height:2px;background:rgba(255,255,255,.22)}
.re-postep::after{content:"";position:absolute;inset:0;background:#E3C765;transform-origin:0 50%;
  transform:scaleX(var(--postep,0))}
.re-x{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:none;border:0;padding:0;cursor:pointer}
.re-podpis{min-width:0;text-align:center;font-family:var(--f-cond);font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.re-tryby{grid-column:1 / -1;display:flex;justify-content:center;gap:22px}
.re-tryby a{display:flex;align-items:center;min-height:36px;border-bottom:2px solid transparent;color:#D8D2C4;
  text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:14px}
.re-tryby a.on{color:#fff;border-bottom-color:#E3C765}

/* ------------------------------------------------ tasma */
.re-lista{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none}
.re-lista::-webkit-scrollbar{display:none}
.re-k{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;background:#000}
.re-okl,.re-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.re-kadr{position:absolute;inset:0}
/* Wolna siec: kadr + "Odtworz" na srodku (rolki-ekran.js, punkt 8). */
.re-graj{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;
  min-height:52px;padding:0 20px;background:rgba(0,0,0,.72);border:1px solid #E3C765;color:#fff;cursor:pointer;
  font-family:var(--f-display);font-weight:800;font-size:15px}
.re-graj .re-i{width:22px;height:22px;fill:#E3C765;stroke:#E3C765}
.re-graj[hidden]{display:none}
.re-pula{display:none}

/* ------------------------------------------------ dol karty */
.re-dol{position:absolute;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:end;gap:8px;padding:40px 8px 0 14px;
  /* Prawka 280: od .72 tam, gdzie zaczyna sie tekst (40 px), nie .6 na
     samym dole - liczniki i podpis staly na szarosci bialego filmu. */
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72) 40px,rgba(0,0,0,.8))}
.re-autor{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0}
.re-ava{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;overflow:hidden;background:#22222A}
.re-ava img{width:40px;height:40px;object-fit:cover;display:block}
.re-ava i{font-style:normal;font-family:var(--f-display);font-weight:800;font-size:17px}
.re-kto{min-width:0}
.re-kto b{display:block;font-family:var(--f-display);font-weight:800;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.re-kto i{display:block;font-style:normal;font-size:13px;color:#D8D2C4;overflow-wrap:anywhere}
.re-m{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0 0;font-size:13px;color:#D8D2C4}
.re-szuka{color:#7FD39B;font-weight:700}
.re-stawka{color:#E3C765;font-weight:800}
.re-t{margin:8px 0 0;font-size:14px;line-height:1.4;overflow-wrap:anywhere;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.re-t.otwarty{display:block;max-height:38dvh;overflow-y:auto}
.re-wiecej{margin:2px 0 0;padding:4px 0;background:none;border:0;color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.re-wiecej[hidden]{display:none}

.re-p{display:flex;flex-direction:column;align-items:center;gap:6px}
.re-p form{margin:0}
.re-ak{width:48px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:0;background:none;border:0;color:#fff;text-decoration:none;cursor:pointer}
.re-ak b{font-size:12px;font-weight:700}
.re-i{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.re-ak.jest{color:#E3C765}
.re-ak.jest .re-i{fill:#E3C765}

/* ------------------------------------------------ jeden zloty guzik */
.re-guziki{position:absolute;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:2;
  display:flex;gap:8px}
.re-guziki>*{flex:1 1 0;min-width:0}
.re-guziki form{margin:0;display:flex}
.re-zl,.re-linia{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 10px;
  font-family:var(--f-display);font-weight:800;font-size:15px;text-decoration:none;text-align:center;cursor:pointer}
.re-zl{background:#E3C765;color:#14130F;border:0}
.re-linia{background:none;color:#fff;border:1px solid rgba(255,255,255,.62)}

.re-blysk{position:absolute;left:50%;top:50%;z-index:2;width:104px;height:104px;margin:-52px 0 0 -52px;
  display:grid;place-items:center;color:#E3C765;pointer-events:none;animation:re-blysk .6s ease-out forwards}
.re-blysk svg{width:104px;height:104px;fill:#E3C765;stroke:#E3C765;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
@keyframes re-blysk{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.08)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.re-blysk{animation-duration:.5s;animation-timing-function:steps(1,end)}}

/* LAPTOP: rolki w KOLUMNIE 9:16 na srodku (decyzja wlasciciela z 18.10),
   po bokach czern. Szerokosc liczy sie z wysokosci okna, wiec film ma te
   same proporcje, co na telefonie; waskie okno dostaje cala szerokosc. */
@media (min-width:1024px){
  .re-k,.re-gora{width:min(100%,calc(100vh * 9 / 16));width:min(100%,calc(100dvh * 9 / 16));margin:0 auto}
}