/* ============================================================================
   stream.css — STREAM NA ŻYWO na STRONIE GŁÓWNEJ (index.html). Osobna
   podstrona /stream została usunięta, a jadący cytat (marquee) i logo w rogu
   też — strona główna to teraz sam stream: kadr z YouTube i czat obok, tej
   samej wysokości. Na kadrze: plakietka NA ŻYWO, licznik oglądających oraz
   jedyne dopuszczone kontrolki — wyciszanie, głośność, jakość, pełny ekran.
   Motyw: czerń strony + SZARY (neutralny) akcent.
   ========================================================================== */
:root{
  /* MOTYW SZARY — dawny zielony akcent wymieniony na neutralną biel/szarość. */
  --stream-accent:#c9ccd1;
  --stream-panel:#0a0a0b;
  --stream-panel-2:#141416;
  --stream-line:rgba(255,255,255,0.08);
  --stream-dim:rgba(255,255,255,0.55);
}

/* SCENA — kadr i czat OBOK SIEBIE, jednej wysokości, wyśrodkowane w oknie.
   Wysokość liczymy JAWNIE (--h) i podajemy obu kolumnom, bo w siatce/flexie
   rozciągnięty element zjada aspect-ratio kadru (i player urósł na całą
   stronę). --h to mniejsza z dwóch wartości: ile zostaje wysokości okna po
   HUD-zie ORAZ ile wynosi 9/16 dostępnej szerokości po odjęciu czatu. */
.stream-stage{
  --chat-w:340px;
  --gap:clamp(10px,1.2vw,16px);
  --pad:clamp(10px,2vw,20px);
  --h:min(
    calc(100dvh - clamp(190px,24vh,260px)),
    calc((min(100vw - 2 * var(--pad), 1560px) - var(--chat-w) - var(--gap)) * 9 / 16)
  );
  width:100%;padding:0 var(--pad);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.stream-layout{display:flex;gap:var(--gap);max-width:100%;align-items:flex-start}
/* Lewa kolumna: kadr + pasek kanału pod nim. */
.stream-main{display:flex;flex-direction:column;min-width:0}

/* ---- PLAYER --------------------------------------------------------------- */
.stream-player{
  position:relative;height:var(--h);width:calc(var(--h) * 16 / 9);flex:none;
  border-radius:14px;overflow:hidden;
  background:#000;border:1px solid var(--stream-line);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
/* Ramka 1:1, BEZ skalowania — obraz w natywnych proporcjach i wielkości.
   pointer-events:none sprawia, że mysz nigdy nie „budzi" interfejsu YouTube. */
.stream-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}

/* MASKI NA NAKŁADKĘ YOUTUBE — dwa wąskie pasy (góra: tytuł + kanał, dół:
   „Więcej filmów" + logo). NIE są stałe: pokazują się WYŁĄCZNIE w tych
   momentach, w których YouTube sam wyświetla swoje UI (start materiału,
   wznowienie, zmiana jakości) i po kilku sekundach znikają razem z nim.
   Dzięki temu w normalnym oglądaniu nic nie zasłania obrazu i nic nie jest
   przybliżone, a brandingu YouTube nie widać ani przez moment. */
.stream-mask{
  position:absolute;left:0;right:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
  background:#000;
}
.stream-mask-top{top:0;height:13.5%}
.stream-mask-bottom{bottom:0;height:13.5%}
.stream-player.is-yt-ui .stream-mask{opacity:1}
/* Warstwa łapiąca kliki — bez niej ramka YT reaguje na klik (pauza/logo). */
.stream-player-guard{position:absolute;inset:0;z-index:2}
.stream-live{
  position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:6px;background:rgba(0,0,0,0.62);backdrop-filter:blur(8px);
  font:800 11px/1 var(--font-family);letter-spacing:.12em;
}
.stream-live i{width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:streamPulse 1.6s ease-in-out infinite}
@keyframes streamPulse{0%,100%{opacity:1}50%{opacity:.25}}
/* POWTÓRKA — stała plakietka w lewym górnym rogu kadru, szara (nie czerwona,
   bo to nie jest transmisja na żywo). */
.stream-replay-badge{
  position:absolute;left:14px;top:14px;z-index:3;
  padding:5px 11px;border-radius:6px;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.82);
  font:800 11px/1 var(--font-family);letter-spacing:.12em;
}
.stream-replay-badge[hidden]{display:none}

/* ZASŁONA STARTOWA — czarna płachta na kadrze do czasu, aż obraz ruszy.
   Bez niej YouTube pokazuje przez chwilę tytuł, nazwę kanału i swoje przyciski;
   z nią widz widzi wyłącznie czerń i kręcący się wskaźnik. */
.stream-cover{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:#000;transition:opacity .35s ease;
}
.stream-player.is-live .stream-cover{opacity:0;pointer-events:none}
.stream-spin{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.18);border-top-color:rgba(255,255,255,0.75);
  animation:streamSpin .9s linear infinite;
}
@keyframes streamSpin{to{transform:rotate(360deg)}}

/* ---- PASEK KANAŁU (pod kadrem) -------------------------------------------- */
/* Układ jak na Twitchu, ale w naszym języku wizualnym: czerń, szarości, żadnej
   zieleni ani przycisków subskrypcji — sam awatar, tytuł i kategoria. */
.stream-meta{
  display:flex;align-items:center;gap:14px;margin-top:14px;padding:0 2px;
}
.stream-meta[hidden]{display:none}
.stream-meta-av{
  width:clamp(48px,4.4vw,64px);height:clamp(48px,4.4vw,64px);flex:none;
  border-radius:14px;object-fit:cover;
  border:1px solid rgba(255,255,255,0.14);background:#111;
  -webkit-user-select:none;user-select:none;
}
.stream-meta-text{min-width:0}
.stream-meta-title{
  font:900 clamp(16px,1.9vw,23px)/1.2 var(--font-family);letter-spacing:.01em;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* STATYSTYKI POD KADREM — po prawej, szaro: liczba oglądających i czas, ile
   transmisja już leci. W powtórce znikają (js/stream.js). */
.stream-stats{
  margin-left:auto;display:flex;align-items:center;gap:16px;flex:none;
  color:rgba(255,255,255,0.6);font:700 13px/1 var(--font-family);letter-spacing:.02em;
}
.stream-stats[hidden]{display:none}
.stream-stat{display:inline-flex;align-items:center;gap:6px}
.stream-stat svg{width:15px;height:15px;opacity:.75}
.stream-stat b{color:rgba(255,255,255,0.86);font-weight:800}
@media(max-width:720px){
  .stream-stats{gap:11px;font-size:12px}
}

/* Wiersz pod tytułem: STATUS + kategoria + dopisek. */
.stream-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}

/* STATUS — „NA ŻYWO" na czerwono z pulsującą kropką, „OFFLINE" na szaro. */
.stream-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,59,48,0.42);background:rgba(255,59,48,0.12);
  color:#ff6a5f;font:800 11px/1 var(--font-family);letter-spacing:.09em;
}
.stream-status i{
  width:6px;height:6px;border-radius:50%;background:#ff3b30;flex:none;
  box-shadow:0 0 7px rgba(255,59,48,0.8);
  animation:streamPulse 2s ease-in-out infinite;
}
.stream-status.is-offline{
  border-color:var(--stream-line);background:var(--stream-panel-2);
  color:rgba(255,255,255,0.5);
}
.stream-status.is-offline i{background:rgba(255,255,255,0.4);box-shadow:none;animation:none}
.stream-status.is-replay{
  border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.78);
}
.stream-status.is-replay i{background:rgba(255,255,255,0.6);box-shadow:none;animation:none}

/* DOPISEK (np. #WLMS) — ta sama forma co kategoria, tylko przygaszony. */
.stream-meta-tag{
  display:inline-block;padding:4px 10px;border-radius:999px;
  border:1px solid var(--stream-line);background:var(--stream-panel-2);
  font:800 11px/1 var(--font-family);letter-spacing:.08em;color:rgba(255,255,255,0.5);
}
.stream-meta-tag[hidden]{display:none}

/* Kategoria SZARA (nie zielona) — ma być etykietą, nie ozdobą. */
.stream-meta-cat{
  display:inline-block;padding:4px 10px;border-radius:999px;
  border:1px solid var(--stream-line);background:var(--stream-panel-2);
  font:800 11px/1 var(--font-family);letter-spacing:.08em;color:rgba(255,255,255,0.62);
}
.stream-meta-cat[hidden]{display:none}

/* ---- CZAT ----------------------------------------------------------------- */
.stream-chat{
  width:var(--chat-w);height:var(--h);flex:none;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--stream-panel);border:1px solid var(--stream-line);border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.stream-chat-head{
  padding:12px 14px;border-bottom:1px solid var(--stream-line);
  font:800 12px/1 var(--font-family);letter-spacing:.12em;color:rgba(255,255,255,0.9);
}
/* Strumień wiadomości — DA SIĘ GO PRZEWIJAĆ. Gdy widz odjedzie od dołu,
   js/chat.js przestaje doklejać widok do końca i pokazuje przycisk powrotu,
   żeby nowe wiadomości nie wyrywały mu historii sprzed oczu. */
.stream-chat-body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 14px 14px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:var(--msg-gap,6px);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.22) transparent;
  /* Zaznaczanie i kopiowanie treści czatu — body ma user-select:none. */
  -webkit-user-select:text;user-select:text;
}
.stream-chat-body::-webkit-scrollbar{width:8px}
.stream-chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:6px}
/* „Nowe wiadomości" — powrót na dół po ręcznym przewinięciu. */
.chat-jump{
  position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:6;
  padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.2);
  background:rgba(20,20,22,0.95);color:#fff;cursor:pointer;
  font:800 10px/1 var(--font-family);letter-spacing:.1em;
}
.chat-jump[hidden]{display:none}
.stream-chat{position:relative}
.stream-msg{
  /* line-height 1.7 = stała wysokość wiersza. Emotka (patrz .chat-emote) mieści
     się w tej wysokości, więc wiersz z obrazkiem NIE jest wyższy niż tekstowy —
     czas, odznaka i nick stoją w tej samej linii niezależnie od treści. */
  font:500 13px/1.7 var(--font-family);color:rgba(255,255,255,0.92);
  word-break:break-word;animation:streamMsgIn .18s ease-out;
}
.stream-msg .nick{font-weight:800}
/* Własna wiadomość — delikatnie podświetlona, żeby było widać, że doszła. */
.stream-msg.is-mine{background:rgba(255,255,255,0.06);border-radius:7px;padding:3px 6px;margin:0 -6px}
@keyframes streamMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* PISANIE NA CZACIE — pole + przycisk. Pola tekstowe muszą odzyskać
   zaznaczanie (body ma user-select:none), inaczej nie da się poprawić wpisu. */
/* STOPKA CZATU — dwa wiersze: pole z emotkami w rogu, pod nim pasek akcji
   (zębatka po lewej, WYŚLIJ po prawej). Układ jak na Twitchu, kolory nasze. */
.stream-chat-foot{
  display:flex;flex-direction:column;gap:9px;padding:10px 12px;
  border-top:1px solid var(--stream-line);background:rgba(0,0,0,0.25);
}
.chat-input-wrap{position:relative;display:flex}
/* Pasek z przyciskiem WYŚLIJ — pokazuje się DOPIERO, gdy w polu coś jest
   (js/chat.js). Pusty czat nie potrzebuje przycisku, który i tak nic nie zrobi. */
.chat-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.chat-actions[hidden]{display:none}
/* Pole rośnie razem z wiadomością (js/chat.js: autoGrow), a po pięciu
   linijkach zaczyna się przewijać. Stąd textarea zamiast input. */
.stream-chat-input{
  flex:1;min-width:0;min-height:42px;max-height:130px;
  /* Miejsce po prawej na ikonkę emotek wewnątrz pola. */
  /* Miejsce po prawej na DWIE ikonki (emotki + ustawienia). */
  padding:11px 82px 11px 13px;border-radius:10px;resize:none;overflow-y:hidden;
  border:1px solid var(--stream-line);background:var(--stream-panel-2);color:#fff;
  font:500 13px/1.35 var(--font-family);outline:none;
  -webkit-user-select:text;user-select:text;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.25) transparent;
}
.stream-chat-input::-webkit-scrollbar{width:6px}
.stream-chat-input::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22);border-radius:6px}
.stream-chat-input::placeholder{color:var(--stream-dim)}
.stream-chat-input:focus{border-color:rgba(255,255,255,0.42)}
/* WYŚLIJ — szary, w kolorystyce strony (nie zielony). */
.stream-chat-send{
  height:38px;padding:0 22px;border:0;border-radius:9px;
  background:var(--stream-accent);color:#0a0a0b;cursor:pointer;
  font:800 12px/1 var(--font-family);letter-spacing:.06em;
  transition:background .16s ease;
}
.stream-chat-send:hover{background:#e6e8ea}
.stream-chat-send:disabled{opacity:.5;cursor:default}

/* ---- PASEK PRZEWIJANIA (tryb POWTÓRKI) ------------------------------------ */
/* Siedzi WEWNĄTRZ paska sterowania, między głośnością a wyborem jakości.
   Wcześniej wisiał nad paskiem jako osobna warstwa i pasek go zasłaniał —
   kliknięcia trafiały w tło, więc przewijanie w ogóle nie działało. */
.stream-seek{
  flex:1;min-width:60px;display:flex;align-items:center;gap:10px;
}
.stream-seek[hidden]{display:none}
.stream-seek-range{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;height:5px;
  border-radius:4px;cursor:pointer;outline:none;
  background:linear-gradient(to right,#fff var(--seek,0%),rgba(255,255,255,0.28) var(--seek,0%));
}
.stream-seek-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;
}
.stream-seek-range::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.stream-seek-time{
  flex:none;color:rgba(255,255,255,0.72);font:700 11px/1 var(--font-family);letter-spacing:.03em;
}
.stream-seek-time b{color:#fff}

/* ---- PASEK STEROWANIA ----------------------------------------------------- */
/* Jedyne kontrolki: dźwięk, jakość, pełny ekran. Na myszy wyjeżdżają po
   najechaniu na kadr, na dotyku są widoczne stale (@media hover:none niżej). */
.stream-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:10px;padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,0.78),rgba(0,0,0,0));
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;
}
.stream-player:hover .stream-bar,
.stream-bar:focus-within,
.stream-player.is-bar-open .stream-bar{opacity:1;transform:none}
.stream-bar-right{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}
.stream-ctl{
  min-width:36px;height:36px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;border-radius:9px;background:transparent;color:#fff;cursor:pointer;
  font:800 11px/1 var(--font-family);letter-spacing:.08em;
  transition:background .18s ease;
}
.stream-ctl:hover{background:rgba(255,255,255,0.14)}
.stream-ctl svg{width:19px;height:19px;flex:none}
.stream-ctl-text{padding:0 11px}
/* PLAY / PAUZA — jedna ikona przełączana klasą is-paused na .stream-player. */
#stream-play .ic-play{display:none}
.stream-player.is-paused #stream-play .ic-play{display:block}
.stream-player.is-paused #stream-play .ic-pause{display:none}

/* NA ŻYWO — mały czerwony znacznik w PRAWYM GÓRNYM rogu kadru. */
.stream-live-tag{
  position:absolute;right:12px;top:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:5px;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);
  color:#ff5a4f;font:800 10px/1 var(--font-family);letter-spacing:.12em;
}
.stream-live-tag[hidden]{display:none}
.stream-live-tag i{
  width:6px;height:6px;border-radius:50%;background:#ff3b30;flex:none;
  box-shadow:0 0 7px rgba(255,59,48,0.8);
  animation:streamPulse 2s ease-in-out infinite;
}
/* Przy planszy offline i w powtórce znacznik znika. */
.stream-player.is-offline .stream-live-tag{display:none}
.stream-ctl .ic-off,
.stream-player.is-muted .stream-ctl .ic-on{display:none}
.stream-player.is-muted #stream-mute .ic-off{display:block}
.stream-ctl .ic-close,
.stream-player.is-full .stream-ctl .ic-open{display:none}
.stream-player.is-full #stream-fs .ic-close{display:block}

/* GŁOŚNOŚĆ — głośniczek zawsze widoczny, suwak wyjeżdża dopiero po najechaniu
   (albo po wejściu na niego klawiaturą). Dzięki temu pasek jest czysty, a przy
   powtórce zostaje miejsce na timeline. */
.stream-vol{display:flex;align-items:center;gap:6px}
.stream-vol .stream-volume{
  width:0;opacity:0;margin:0;pointer-events:none;
  transition:width .22s ease,opacity .18s ease;
}
.stream-vol:hover .stream-volume,
.stream-vol:focus-within .stream-volume{width:96px;opacity:1;pointer-events:auto}

/* SUWAK — wygląd spójny w Chrome/Safari (-webkit) i Firefoksie (-moz).
   Wypełnienie po lewej stronie uchwytu rysuje gradient ustawiany z JS
   (--vol: 0–100%), bo natywnego „filled track" nie ma w standardzie. */
.stream-volume{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:3px;
  background:linear-gradient(to right,var(--stream-accent) var(--vol,100%),rgba(255,255,255,0.28) var(--vol,100%));
  outline:none;cursor:pointer;
}
.stream-volume::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;
}
.stream-volume::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.stream-volume::-moz-range-track{height:4px;border-radius:3px;background:transparent}

/* ---- MENU JAKOŚCI --------------------------------------------------------- */
.stream-quality{position:relative}
.stream-quality-menu{
  position:absolute;right:0;bottom:calc(100% + 8px);min-width:132px;z-index:6;
  padding:6px;border-radius:12px;border:1px solid var(--stream-line);
  background:rgba(8,10,9,0.95);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,0.55);
  max-height:min(280px,50vh);overflow-y:auto;
}
.stream-quality-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#fff;
  font:700 12px/1 var(--font-family);letter-spacing:.04em;cursor:pointer;text-align:left;
}
.stream-quality-item:hover{background:rgba(255,255,255,0.12)}
.stream-quality-item::before{
  content:"";width:6px;height:6px;border-radius:50%;background:transparent;flex:none;
}
.stream-quality-item.is-active{color:var(--stream-accent)}
.stream-quality-item.is-active::before{background:var(--stream-accent)}

/* ---- PEŁNY EKRAN / POWIĘKSZENIE ------------------------------------------- */
/* Fullscreen API (desktop, Android) — kadr wypełnia ekran, proporcje pilnuje
   sam YouTube wewnątrz ramki. */
.stream-player:fullscreen,
.stream-player:-webkit-full-screen{
  width:100vw;height:100vh;max-width:none;border-radius:0;border:0;box-shadow:none;
}
/* Tryb „na całe okno" — tam, gdzie Fullscreen API nie działa na elementach
   (iPhone). Kadr jest wtedy PRZENIESIONY do <body> (js/stream.js), bo wewnątrz
   kontenera z transformem `position:fixed` liczyłoby się względem niego, a nie
   względem ekranu — i zamiast pełnego ekranu wychodziło powiększenie strony. */
.stream-player.is-cinema{
  position:fixed;inset:0;z-index:100000;
  width:100vw;height:100dvh;max-width:none;
  border-radius:0;border:0;box-shadow:none;background:#000;
}
/* Pod spodem nic nie ma prawa przewijać się ani wystawać. */
html.cinema-on,
html.cinema-on body{overflow:hidden}
.stream-player-home{display:none}

/* ---- EKRAN OFFLINE -------------------------------------------------------- */
/* Zakrywa CAŁY kadr, gdy YouTube zwróci błąd (film niedostępny/prywatny/
   usunięty) albo gdy transmisja w ogóle nie ruszy — zamiast okienka „Ten film
   jest niedostępny" widać czysty komunikat strony. Klasa is-offline na
   .stream-player chowa przy okazji plakietkę NA ŻYWO i licznik. */
.stream-offline{
  position:absolute;inset:0;z-index:5;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#000;text-align:center;padding:20px;
}
.stream-player.is-offline .stream-offline{display:flex}
.stream-player.is-offline .stream-live,
.stream-player.is-offline .stream-bar,
.stream-player.is-offline .stream-cover{display:none}
/* Licznik ZOSTAJE widoczny — bez transmisji pokazuje twarde „0 oglądających". */
.stream-player.is-offline /* Licznik znika w trybie powtórki (js/stream.js ustawia atrybut hidden). */
.stream-viewers[hidden]{display:none}
.stream-viewers{z-index:6}
.stream-offline svg{width:44px;height:44px;color:rgba(255,255,255,0.35)}
.stream-offline-title{font:900 clamp(20px,3.2vw,34px)/1.1 var(--font-family);letter-spacing:.04em}
.stream-offline-sub{color:var(--stream-dim);font:600 13px/1.4 var(--font-family)}

/* ---- RESPONSYWNOŚĆ -------------------------------------------------------- */
/* Wąskie ekrany — czat ląduje pod kadrem, na stałej, niskiej wysokości. */
/* ---- TELEFON I TABLET ------------------------------------------------------ */
/* Kolejność na wąskim ekranie: PASEK KANAŁU (awatar, tytuł, kategoria, licznik
   i czas) na samej górze, pod nim kadr, a na dole czat wypełniający resztę
   wysokości. Nic się nie nakłada, bo każdy element ma własny wiersz. */
@media(max-width:900px){
  .stream-stage{
    --pad:8px;
    --h:auto;
    width:100%;height:100%;
    /* Górny odstęp musi zmieścić HUD (ikonka konta, język, hamburger) z
       zapasem, żeby tytuł się o niego nie ocierał. Na dole zostawiamy miejsce
       na pasek przeglądarki — Safari na iPhonie trzyma tam wyszukiwarkę, która
       zasłaniałaby pole do pisania. */
    padding:58px var(--pad) calc(28px + env(safe-area-inset-bottom));
    align-items:stretch;
    /* Na telefonie scena ma WYPEŁNIAĆ ekran, a nie wisieć wyśrodkowana —
       inaczej góra i dół zostawały puste, a czat był ściśnięty. */
    justify-content:flex-start;
  }
  .stream-layout{
    flex:1;min-height:0;flex-direction:column;width:100%;gap:8px;
  }

  /* Kadr i pasek kanału zamieniają się miejscami — pasek idzie na górę.
     width:100% jest konieczne: bez niego kolumna zwężała się do treści i kadr
     był węższy od czatu pod spodem. */
  .stream-main{display:flex;flex-direction:column;flex:none;width:100%}
  .stream-player{order:2;width:100%;height:auto;aspect-ratio:16/9;flex:none}
  .stream-meta{order:1;margin:0 0 6px;gap:9px}
  .stream-meta-av{width:36px;height:36px;border-radius:9px}
  .stream-meta-title{font-size:14px;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .stream-meta-row{margin-top:5px;gap:6px}
  .stream-meta-cat,
  .stream-meta-tag,
  .stream-status{font-size:9px;padding:3px 8px}

  /* Licznik i czas schodzą pod tytuł, żeby nie ściskały go przy wąskim ekranie. */
  .stream-stats{
    margin:6px 0 0;gap:12px;font-size:11px;
    flex-basis:100%;order:3;
  }
  .stream-stat svg{width:13px;height:13px}
  .stream-meta{flex-wrap:wrap}

  /* Czat dostaje całą resztę ekranu — im mniej marnujemy na odstępy wyżej,
     tym więcej widać wiadomości. */
  .stream-chat{width:100%;height:auto;flex:1;min-height:220px}
  .stream-chat-head{padding:9px 12px;font-size:11px}
  .stream-chat-body{padding:8px 12px 10px}
  .stream-chat-foot{padding:8px 10px;gap:7px}
}

/* Dotyk — pasek sterowania widoczny cały czas i z większymi celami (44px). */
@media(hover:none){
  .stream-bar{opacity:1;transform:none;padding:22px 10px 10px}
  .stream-ctl{min-width:44px;height:44px}
  .stream-ctl svg{width:21px;height:21px}
  .stream-vol:hover .stream-volume,
  .stream-vol:focus-within .stream-volume{width:84px}
  .stream-quality-item{padding:12px 10px}
  .stream-chat-input,.stream-chat-send{height:44px}
  /* 16px = próg, poniżej którego iOS zoomuje stronę przy wejściu w pole. */
  .stream-chat-input{font-size:16px}
}
@media(max-width:720px){
  .stream-live,/* Licznik znika w trybie powtórki (js/stream.js ustawia atrybut hidden). */
.stream-viewers[hidden]{display:none}
.stream-viewers{font-size:10px;padding:4px 8px}
}