* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0d1117; color:#efeff1; }
body { overflow: hidden; }

.app { height: 100%; display:flex; flex-direction:column; }
.topbar {
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #2f353d; background:#0b0f14;

  
}
.brand { font-weight: 800; letter-spacing: .5px; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.pill {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid #2f353d; border-radius:10px;
  background:#0d1117;
}
.pill input {
  width: 140px; padding:6px 8px; border-radius:8px;
  border:1px solid #2f353d; background:#0b0f14; color:#efeff1;
}
.pill button {
  padding:6px 10px; border-radius:8px; border:1px solid #2f353d;
  background:#161b22; color:#efeff1; cursor:pointer;
}
.pill button:hover { filter: brightness(1.08); }



.main{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  margin: 0;

  flex: 1;
  min-height: 0;     /* ✅ ZAMIAST height: 0 */
  height: 100vh;
  overflow: hidden;
}






@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr; }
}

.playerCard, .statusCard {
  border:1px solid #2f353d; border-radius:14px; background:#0b0f14;
}

/* czat dalej może być hidden */
.statusCard { overflow: hidden; }

/* lewa strona ma scroll */
.playerCard { overflow-y: auto; overflow-x: hidden; }
.playerWrap{
  position: relative;
  width: 100%;
  background: #000;
  /* height: calc(100dvh - 110px);  <-- USUŃ */
}


video { width:100%; height:100%; display:block; background:#000; }

.controls {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:12px; border-top:1px solid #2f353d; background:#0d1117;
}
.controls button {
  padding:8px 10px; border-radius:10px; border:1px solid #2f353d;
  background:#161b22; color:#efeff1; cursor:pointer;
}
.controls button:disabled { opacity:.5; cursor:not-allowed; }
.controls input[type="range"] { flex:1; min-width:160px; }

.time { display:flex; gap:6px; align-items:center; min-width:120px; justify-content:center; }
.sep { opacity: .7; }

.adminPanel {
  padding:12px; border-top:1px solid #2f353d; background:#0b0f14;
}
.adminTitle { font-weight:700; margin-bottom:8px; }
.adminRow { display:flex; gap:10px; align-items:center; }
.adminRow input {
  flex:1; padding:10px 12px; border-radius:12px;
  border:1px solid #2f353d; background:#0d1117; color:#efeff1;
}
.adminRow button {
  padding:10px 12px; border-radius:12px; border:1px solid #2f353d;
  background:#235789; color:#efeff1; cursor:pointer;
}
.adminRow button:disabled { opacity:.5; cursor:not-allowed; background:#161b22; }

.hint { margin-top:10px; font-size: 13px; opacity:.85; }

.statusCard{
  padding: 0;
  height: 60%;
  min-height: 0;      /* bardzo ważne w grid/flex */
  overflow: hidden;
  display: flex;      /* żeby iframe mógł się rozciągnąć */
  flex-direction: column;
}

.twitchChat {
  padding: 0;
  overflow: hidden;
  background: #0d1117;
}

.twitchChat iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}



.statusTitle { font-weight:700; margin-bottom:8px; }
.log {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;

  height: 15vh;        /* 👈 TO JEST „POŁOWA” */
  max-height: 15vh;    /* zabezpieczenie */
  overflow: auto;

  padding: 10px;
  border-radius: 12px;
  border: 1px solid #2f353d;
  background: #0d1117;
}

.overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
}
.overlay.hidden { display:none; }
.overlayBox {
  width:min(420px, 92%); padding:14px; border-radius:14px;
  border:1px solid #2f353d; background:#0b0f14;
}
.overlayBox button{
  margin-top:10px; width:100%;
  padding:10px 12px; border-radius:12px; border:1px solid #2f353d;
  background:#235789; color:#efeff1; cursor:pointer;
}

.twitchChat {
  padding: 0;
  overflow: hidden;
}

.twitchChat iframe {
  width: 100%;
  height: 100%;
  border: none;
}


.playerCard,
.statusCard,
.adminPanel,
.roomBar,
.main,
video,
iframe {
  border-radius: 0 !important;
}

/* lewa kolumna ma pełną wysokość jak czat */
.playerCard{
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* video ma rosnąć do pełnej wysokości */
.playerWrap{
  flex: 1;
  min-height: 0;
}

/* sam <video> wypełnia wrapper */
.playerWrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* <<< TO JEST KLUCZ */
}

/* player przyklejony na górze, scrolluje panel pod spodem */
.playerWrap{
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  max-height: 55vh;
}

.adminPanel{
  flex: 1 1 auto;
  min-height: 0;
}


/* panel admina niech się nie rozpycha (może być przewijany) */
.adminPanel{
  flex: 0 0 auto;
}





.twitchCam{
  position:absolute;
  top:0;
  left:0;
  width:320px;
  height:180px;
  background:#000;
  z-index:10;
  overflow:hidden;
}

/* Twitch ma być normalnie klikalny */
.twitchCam iframe{
  width:100%;
  height:100%;
  border:0;
  pointer-events:auto;
}

/* Uchwyt do rozciągania (tylko on przechwytuje mysz) */
.camHandle{
  position:absolute;
  right:0;
  bottom:0;
  width:18px;
  height:18px;
  cursor:nwse-resize;
  z-index:11;

  /* delikatny „znaczek” jak w oknach */
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(255,255,255,.35) 45% 55%, transparent 55% 70%,
                           rgba(255,255,255,.35) 70% 80%, transparent 80% 100%);
}




.settings {
  display: flex;
  flex-direction: column;   /* ⬅ TO JEST KLUCZ */
  gap: 12px;
  padding: 16px;
}




.settingItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-radius: 12px;
  background: #0d1117;
  border: 1px solid #2f353d;
  cursor: pointer;
}

.settingItem:hover {
  background: #161b22;
}

.settingText {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settingTitle {
  font-weight: 600;
}

.settingDesc {
  font-size: 13px;
  opacity: 0.8;
}

.checkmark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid #2f353d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  opacity: 0;
  transition: .15s;
}

.checkmark.active {
  background: #235789;
  opacity: 1;
}








.twitchCam iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* mniejsze ekrany */
@media (max-width: 900px) {
  .twitchCam {
    width: 220px;
  }
}



.adminLayout {
  display: grid;
  grid-template-columns: 1fr 750px; /* ⬅ SZEROKOŚĆ KAMERKA + CZAT */
  gap: 14px;
  align-items: start;
}



.adminLeft,
.adminRight {
  min-width: 0;
}

.settingItem {
  min-height: 70px;         /* ⬅ TU REGULUJESZ WYSOKOŚĆ */
}






/* ===== Repertuar (Filmweb) ===== */
.repertuar{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #2f353d;
}

.repertuarHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 12px;
}
.repertuarTitle {
  font-size: 18px;
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: .2px;
}
.repertuarDate{ opacity:.7; font-size:14px; }

.repertuarList{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.repItem{
  position: relative;
  background:#1f2730;
  border-radius: 14px;
  padding: 14px;
  display:grid;
  grid-template-columns: 160px 1fr 90px;
  gap: 16px;
  align-items:start;
}

.repPosterWrap{ position: relative; }
.repPoster{
  width:160px;
  height:120px;
  border-radius:10px;
  object-fit:cover;
  background:#0b0f14;
  display:block;
}

.repBadge{
  position:absolute;
  top:8px;
  left:8px;
  background:#efeff1;
  color:#0b0f14;
  font-weight:700;
  font-size:12px;
  padding:4px 8px;
  border-radius:8px;
}

.repTitle{
  font-weight:700;
  font-size:18px;
  margin-bottom: 6px;
}

.repMeta{
  display:flex;
  gap: 10px;
  font-size: 13px;
  opacity: .75;
  margin-bottom: 10px;
}

.repDesc{
  font-size: 14px;
  line-height: 1.4;
  opacity: .9;
}

.repRating{
  justify-self:end;
  font-weight:700;
  font-size:16px;
}

.repAddRow{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.repAddRow input{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2f353d;
  background: #0d1117;
  color: #efeff1;
}
.repAddRow button{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #2f353d;
  background: #235789;
  color:#efeff1;
  cursor:pointer;
}


#repAddRow { 
  display: none; 
}


.repDel{
  margin-left: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.repDel:hover{
  background: rgba(255,255,255,.12);
}



/* Ujednolicenie kart: Kamerka / Czat z resztą panelu admina */
.settings {
  padding: 0;          /* usuń dodatkowe wcięcie */
  gap: 12px;
}

.settingItem {
  border-radius: 14px; /* TYLE SAMO co reszta paneli */
  background: #0b0f14; /* identyczne tło */
  border: 1px solid #2f353d;
  padding: 16px 18px;
}

/* hover jak reszta */
.settingItem:hover {
  background: #161b22;
}

/* checkmark też bardziej „panelowy” */
.checkmark {
  border-radius: 8px;
}


/* odstęp między Online a Ustawieniami */
.settingsHeader {
  margin-top: 18px;          /* ⬅ ODSTĘP */
  margin-bottom: 10px;

  font-weight: 700;
  font-size: 15px;
  opacity: 0.9;

  padding-left: 2px;         /* lekkie wyrównanie z kartami */
}

/* settings bez dodatkowego paddingu */
.settings {
  padding: 0;
  gap: 12px;
}

.settingsHeader {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

.adminTitle {
  border-top: 1px solid #2f353d;
  padding-top: 14px;   /* odstęp od kreski */
  margin-top: 14px;    /* odstęp od poprzedniego elementu */
}

/* ten sam kolor dla nagłówków sekcji */
.settingsHeader,
.adminTitle {
  color: #efeff1;   /* dokładnie ten sam kolor */
  opacity: 0.9;     /* jak w Ustawieniach */
}













/* Auto-hide controls */
.controls {
  transition: opacity .2s ease, transform .2s ease;
}

.controls.controls-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}




/* ===== YouTube-like controls overlay ===== */
.playerWrap{
  position: relative;
  overflow: hidden;
}

.playerWrap video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* bez pasów (ucinanie). Zmień na contain jeśli wolisz */
}

/* Kontrolki na filmie */
.playerWrap .controls{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 50;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 14px;
  border-top: 0;

  /* tło jak w playerach */
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

/* Auto-hide (to już masz, tylko zostaw) */
.playerWrap .controls.controls-hidden{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* Cienki pasek seek jak na screenie */
.playerWrap .controls #seek{
  flex: 1;
  height: 4px;         /* cienki */
  padding: 0;
  margin: 0 8px;

  appearance: none;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  outline: none;
}

/* Track w WebKit */
.playerWrap .controls #seek::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
}
.playerWrap .controls #seek::-webkit-slider-thumb{
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: -4px; /* centruje kółko na 4px track */
  background: #fff;
}

/* Firefox */
.playerWrap .controls #seek::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.playerWrap .controls #seek::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}

/* Volume mniejszy */
.playerWrap .controls #vol{
  width: 120px;
  height: 4px;
}

/* Ikony/przyciski – żeby wyglądały “playerowo” */
.playerWrap .controls button{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 18px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.playerWrap .controls button:hover{
  background: rgba(255,255,255,.12);
}

/* Czas */
.playerWrap .controls .time{
  color: rgba(255,255,255,.9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* === Kontrolki jak na screenie: na filmie, cienki pasek === */
.playerWrap { position: relative; overflow: hidden; }

/* kontrolki NA filmie (nadpisuje "panelowy" styl .controls) */
.playerWrap .controls{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 50;

  flex-wrap: nowrap;           /* <- żeby nie łamało na 2 linie */
  gap: 14px;
  padding: 10px 14px;

  border-top: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

/* przyciski jak w playerze */
.playerWrap .controls button{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 18px;
  padding: 6px 8px;
  border-radius: 10px;
}
.playerWrap .controls button:hover{ background: rgba(255,255,255,.12); }

/* czas */
.playerWrap .controls .time{
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: auto;
}

/* SEEK: cienki pasek */
.playerWrap .controls #seek{
  flex: 1;
  min-width: 0;       /* <- ważne, żeby się mieścił w jednej linii */
  height: 4px;
  margin: 0 6px;

  appearance: none;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  outline: none;
}

/* WebKit */
.playerWrap .controls #seek::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
}
.playerWrap .controls #seek::-webkit-slider-thumb{
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: -4px;
  background: #fff;
}

/* Firefox */
.playerWrap .controls #seek::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.playerWrap .controls #seek::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}

/* volume krótszy (jak na screenie) */
.playerWrap .controls #vol{
  width: 120px;
  height: 4px;
}



/* === Volume popup (pionowy) === */
.volWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* przycisk głośności */
#muteBtn{
  background: rgba(0,0,0,.35);
  border: 0;
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
}

/* popup */
/* === FIX: volume slider ma siedzieć w dymku, nie uciekać === */
.volPopup{
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 140px;

  background: rgba(25,30,38,.85);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;

  /* ważne */
  padding: 0;
  display: block;
}

/* pokazuj popup */
.volWrap:hover .volPopup,
.volWrap:focus-within .volPopup{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}

/* kotwica dla suwaka */
.volPopup{
  position: absolute;
}
.volPopup{ position: absolute; }
.volPopup{ position: absolute; }

/* suwak wycentrowany w dymku */
.volPopup #vol{
  position: absolute;
  left: 50%;
  top: 50%;

  /* długość suwaka po obrocie */
  width: 120px !important;
  height: 6px !important;

  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;

  appearance: none;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  outline: none;
  margin: 0 !important;
}

/* WebKit */
.volPopup #vol::-webkit-slider-runnable-track{
  height:6px;
  border-radius: 999px;
}
.volPopup #vol::-webkit-slider-thumb{
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: -4px;
  background: #fff;
}

/* Firefox */
.volPopup #vol::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.volPopup #vol::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}

/* dymek przycina wszystko do środka */
.volPopup{
  width: 52px;          /* trochę szerszy niż 44 */
  height: 150px;        /* odrobinę wyższy */
  padding: 10px 0;      /* miejsce na thumb */
  overflow: hidden;     /* KLUCZ: nic nie wystaje */
  border-radius: 18px;
}

/* suwak krótszy, żeby nie dotykał brzegów */
.volPopup #vol{
  width: 105px !important;  /* było 120 */
}

/* żeby popup nie znikał w trakcie przejazdu kursorem */
.volWrap{
  position: relative;
}

/* "mostek" - niewidzialny obszar hover między ikoną a popupem */
.volWrap::after{
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: 30px;     /* od ikony w górę */
  height: 26px;     /* mostek do popupu */
}

/* popup pokazuj na hover/focus całego wrappera (jak było) */
.volWrap:hover .volPopup,
.volWrap:focus-within .volPopup{
  opacity: 1;
  pointer-events: auto;
}

/* popup ma być klikalny */
.volPopup{
  pointer-events: none; /* default ukryty */
}
.volWrap:hover .volPopup,
.volWrap:focus-within .volPopup{
  pointer-events: auto;
}


/* === mute button: bez obramówki i bez tła === */
#muteBtn{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* focus (żeby nie było ramki po kliknięciu) */
#muteBtn:focus,
#muteBtn:focus-visible{
  outline: none;
  box-shadow: none;
}


/* === Ikona pauzy na środku ekranu === */
.pauseOverlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 64px;
  color: #fff;
  text-shadow: 0 6px 20px rgba(0,0,0,.6);

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* widoczna tylko przy pauzie */
.pauseOverlay.show{
  opacity: 1;
}

#muteBtn svg{
  display: block;
}

#muteBtn:hover svg{
  opacity: .85;
}



/* ===== ADMIN: mniejszy wiersz dodawania repertuaru ===== */
body.admin-mode .repAddRow input{
  padding: 6px 10px;
  height: 36px;
  font-size: 13px;
}

body.admin-mode .repAddRow button{
  padding: 6px 14px;
  height: 36px;
  font-size: 13px;
}

/* opcjonalnie: trochę ciaśniej */
body.admin-mode .repAddRow{
  gap: 1px;
}

/* ===== ADMIN: repAddRow ma się zawijać i nie wchodzić na Panel Admina ===== */
body.admin-mode .repAddRow{
  display: flex;
  flex-wrap: wrap;      /* KLUCZ: zawijanie do 2 linii */
  gap: 8px;
  align-items: center;
}

/* inputy nie mogą być gigantyczne */
body.admin-mode .repAddRow input{
  padding: 6px 10px;
  height: 36px;
  font-size: 13px;
  min-width: 120px;
}

/* Filmweb URL trochę szerszy, reszta krótsza */
body.admin-mode #filmwebUrl{ flex: 1 1 360px; }
body.admin-mode #repDay{    flex: 0 1 110px; }
body.admin-mode #repTime{   flex: 0 1 120px; }
body.admin-mode #repRating{ flex: 0 1 110px; }

/* przycisk zawsze widoczny i klikalny */
body.admin-mode #addFilmwebBtn{
  flex: 0 0 auto;
  padding: 6px 14px;
  height: 36px;
  font-size: 13px;
  white-space: nowrap;
}

/* bezpieczeństwo: żeby nic nie przykrywało kliknięć */
body.admin-mode .repAddRow{
  position: relative;
  z-index: 2;
}

/* ===== ADMIN: jedna linia – Dodaj obok Oceny ===== */
body.admin-mode .repAddRow{
  display: flex;
  flex-wrap: wrap;       /* dalej bezpieczne */
  gap: 8px;
  align-items: center;
}

/* KLUCZ: zwężamy Filmweb URL */
body.admin-mode #filmwebUrl{
  flex: 0 1 280px;       /* było ~360, teraz węższe */
  min-width: 220px;
}

/* reszta pól kompaktowa */
body.admin-mode #repDay{
  flex: 0 0 90px;
}
body.admin-mode #repTime{
  flex: 0 0 100px;
}
body.admin-mode #repRating{
  flex: 0 0 90px;
}

/* przycisk Dodaj tuż obok Oceny */
body.admin-mode #addFilmwebBtn{
  flex: 0 0 auto;
  padding: 6px 14px;
  height: 36px;
  font-size: 13px;
  white-space: nowrap;
}

/* inputy spójne */
body.admin-mode .repAddRow input{
  padding: 6px 10px;
  height: 36px;
  font-size: 13px;
}


/* ===== SCROLL TYLKO LEWEJ CZĘŚCI, CHAT ZOSTAJE BEZ RUCHU ===== */
html, body { height: 100%; }
body { overflow: hidden; }            /* blokujemy scroll całej strony */

.app { height: 100%; }

.main{
  height: 100vh;                      /* trzymamy cały layout w oknie */
  overflow: hidden;                   /* nic nie ma wyjeżdżać */
}

/* lewa kolumna scrolluje */
.playerCard{
  height: 100%;
  overflow-y: auto;
  min-height: 0;
}

/* prawa kolumna (czat) bez scrolla strony */
.statusCard.twitchChat{
  height: 100%;
  overflow: hidden;
}

/* iframe czatu wypełnia całość */
.statusCard.twitchChat iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* FIX: lewa kolumna ma się przewijać */
.playerCard{
  overflow: visible;   /* odblokuj "hidden" z .playerCard,.statusCard */
  overflow-y: auto;    /* i włącz scroll */
}

/* ===== WIĘKSZY FILM (wideo ma mieć stałą wysokość i nie kurczyć się) ===== */
.playerWrap{
  flex: 0 0 auto;              /* zamiast flex:1 */
  aspect-ratio: 16 / 9;        /* zawsze 16:9 */
  max-height: 72vh;            /* film duży */
}

/* panel pod filmem może się scrollować */
.adminPanel{
  flex: 1 1 auto;
  min-height: 0;
}

/* ważne: nie tnij wysokości czatu na 60% (to psuje układ) */
.statusCard{
  height: 100% !important;
}

/* ===== UKRYJ PASEK SCROLLA (lewa kolumna) ===== */
.playerCard{
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* stary Edge */
}
.playerCard::-webkit-scrollbar{
  width: 0;
  height: 0;                 /* Chrome/Safari */
}

/* ===== TRYB KINOWY ===== */

/* lewa kolumna scrolluje */
.playerCard{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* FILM = PRAKTYCZNIE CAŁY EKRAN */
.playerWrap{
  position: sticky;
  top: 0;
  height: 92vh;          /* <<< KLUCZ: film prawie fullscreen */
  max-height: 92vh;
  aspect-ratio: unset;  /* NIE ograniczaj 16:9 */
  z-index: 5;
}

/* wideo wypełnia całość */
.playerWrap video{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* albo cover jeśli chcesz crop */
}

/* wszystko POD filmem pojawia się dopiero po scrollu */
.adminPanel{
  margin-top: 20px;
}

/* ===== FILM MA SCROLLOWAĆ RAZEM ZE STRONĄ (bez sticky) ===== */
.playerWrap{
  position: relative !important;
  top: auto !important;
  height: 92vh;        /* możesz dać 96vh lub 100vh */
  max-height: none;
  z-index: 1;
}


/* ===== TRYB KINO: film na cały ekran, kontrolki na wideo ===== */
.playerWrap{
  height: 92vh;          /* albo 96vh / 100vh */
  background: #000;      /* żeby nie było granatu */
  position: relative;
  overflow: hidden;
}

/* wideo ma wypełniać CAŁĄ .playerWrap */
.playerWrap > video,
#video,
#videoPlayer{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* brak granatowych pasów */
  display: block;
}

/* kontrolki jako overlay (nie zabierają wysokości pod filmem) */
.controls{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;

  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  border-top: none !important;
}

/* żeby kliknięcia wideo dalej działały, a kontrolki były klikalne */
.controls *{ pointer-events: auto; }

/* ===== FULLSCREEN FILM: bez widocznego panelu pod spodem ===== */
.playerWrap{
  height: 100vh !important;      /* było 92vh -> teraz pełny ekran */
  max-height: 100vh !important;
  background: #000;
  position: relative;
  overflow: hidden;
}


/* Uchwyt do przeciągania kamerki */
.camDragBar{
  position:absolute;
  left:0; right:0; top:0;
  height: 26px;
  cursor: move;
  z-index: 12;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* opcjonalnie: lekka “kreska” żeby było widać uchwyt */
.camDragBar::after{
  content:"";
  position:absolute;
  left:10px; right:10px; top:10px;
  height:2px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
}


/* ===== Ikonka przesuwania kamerki ===== */
.camMove{
  position:absolute;
  top:8px;
  left:8px;
  width:22px;
  height:22px;
  z-index:20;
  cursor: move;
  opacity:.85;
}

/* rysujemy krzyżyk-strzałki (bez SVG) */
.camMove::before,
.camMove::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#fff,#fff) center/2px 100% no-repeat,
    linear-gradient(#fff,#fff) center/100% 2px no-repeat;
}

/* hover – delikatnie widoczniejsze */
.twitchCam:hover .camMove{
  opacity:1;
}


/* ===== PLUS DO PRZESUWANIA KAMERKI ===== */
.camMove{
  position:absolute;
  top:8px;
  right:8px;      /* <<< TU */
  left:auto;      /* <<< DODAJ */
  width:18px;
  height:18px;
  cursor: move;
  z-index:30;
  opacity:0;
}


/* rysujemy biały plus */
.camMove::before,
.camMove::after{
  content:"";
  position:absolute;
  background:#fff;
  border-radius:2px;
}

/* pion */
.camMove::before{
  width:2px;
  height:100%;
  left:50%;
  top:0;
  transform:translateX(-50%);
}

/* poziom */
.camMove::after{
  height:2px;
  width:100%;
  top:50%;
  left:0;
  transform:translateY(-50%);
}

/* pokazuj TYLKO przy najechaniu na kamerkę */
.twitchCam:hover .camMove{
  opacity:.9;
}


/* ===== PRZERZUCANIE CZATU LEWO/PRAWO (PEWNY FIX) ===== */




/* żeby szerokości zostały takie same */
body.chat-left .main{
  grid-template-columns: 360px minmax(0, 1fr);
}



/* ===== PRZERZUCANIE CZATU LEWO/PRAWO (POPRAWNY GRID) ===== */

/* układ domyślny: player (1fr) + czat (360px) */
.main{
  grid-template-columns: minmax(0, 1fr) 360px;
}

/* czat po lewej: odwracamy kolumny */
body.chat-left .main{
  grid-template-columns: 360px minmax(0, 1fr);
}

/* przypisujemy elementy do kolumn */
.playerCard{ grid-column: 1; }
.statusCard.twitchChat{ grid-column: 2; }

body.chat-left .playerCard{ grid-column: 2; }
body.chat-left .statusCard.twitchChat{ grid-column: 1; }


/* jak czat wyłączony -> jedna kolumna */
body.chat-hidden .main{
  grid-template-columns: minmax(0, 1fr) !important;
}
body.chat-hidden .statusCard.twitchChat{
  display:none !important;
}


/* Układ domyślny: player + czat po prawej */
.main{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  height: 100vh;
  overflow: hidden;
  align-items: stretch;
}

/* Czat po lewej */
body.chat-left .main{
  grid-template-columns: 360px minmax(0, 1fr);
}

/* Elementy zawsze w 1. wierszu */
.playerCard{ grid-column: 1; grid-row: 1; }
.statusCard.twitchChat{ grid-column: 2; grid-row: 1; height: 100% !important; }

/* Po przełączeniu */
body.chat-left .playerCard{ grid-column: 2; }
body.chat-left .statusCard.twitchChat{ grid-column: 1; }

/* Ukrycie czatu */
body.chat-hidden .main{
  grid-template-columns: minmax(0, 1fr) !important;
}
body.chat-hidden .statusCard.twitchChat{
  display: none !important;
}


/* Układ domyślny: player + czat po prawej */
.main{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  height: 100vh;
  overflow: hidden;
  align-items: stretch;
}

/* Czat po lewej */
body.chat-left .main{
  grid-template-columns: 360px minmax(0, 1fr);
}

/* Elementy zawsze w 1. wierszu */
.playerCard{ grid-column: 1; grid-row: 1; }
.statusCard.twitchChat{ grid-column: 2; grid-row: 1; height: 100% !important; }

/* Po przełączeniu */
body.chat-left .playerCard{ grid-column: 2; }
body.chat-left .statusCard.twitchChat{ grid-column: 1; }

/* Ukrycie czatu */
body.chat-hidden .main{
  grid-template-columns: minmax(0, 1fr) !important;
}
body.chat-hidden .statusCard.twitchChat{
  display: none !important;
}



/* puste pole gdy OFF + ptaszek gdy ON */
.toggle-check{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.35);
  background: transparent;          /* OFF = przezroczyste */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}

.toggle-check:hover{
  border-color: rgba(59,130,246,.9);
}

.toggle-check.active{
  background: #3b82f6;
  border-color: #3b82f6;
}

.toggle-check::after{
  content: "✓";
  color: #fff;
  font-size: 14px;
  opacity: 0;                       /* OFF = brak ptaszka */
  transform: scale(.8);
  transition: opacity .12s ease, transform .12s ease;
}

.toggle-check.active::after{
  opacity: 1;
  transform: scale(1);
}

.toggle-check:active{
  transform: scale(.92);
}

.toggle-check{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.35);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.toggle-check.active{
  background: #3b82f6;
  border-color: #3b82f6;
}

.toggle-check::after{
  content: "✓";
  color: #fff;
  opacity: 0;
}

.toggle-check.active::after{
  opacity: 1;
}


/* ===== Pasek postępu – część obejrzana (Chrome/Edge) ===== */
#seek{
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 6px;
  background: #2b2f36; /* nieobejrzana */
  cursor: pointer;
}

/* część obejrzana */
#seek::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    #3b82f6 0%,
    #3b82f6 var(--progress, 0%),
    #2b2f36 var(--progress, 0%),
    #2b2f36 100%
  );
}

/* kółko */
#seek::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #3b82f6;
  border-radius: 50%;
  margin-top: -4px;
}


/* ===== PIONOWY PASEK GŁOŚNOŚCI ===== */
#vol{
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 110px;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

#vol{
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 110px;
  background: transparent;
  cursor: pointer;

  border-radius: 6px;
  overflow: hidden;
}


#vol::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;

  /* idealne wyśrodkowanie */
  margin-left: -3px;
  margin-top: -6px;

  /* wypełnienie (niebieskie) */
  box-shadow: -1000px 0 0 1000px #3b82f6;
}


/* === Layout kontrolek: cur | SEEK | dur + głośnik === */
.playerWrap .controls{
  flex-wrap: nowrap !important;
}

.playerWrap .controls .time-left{
  min-width: 64px !important;
}

.playerWrap .controls #seek{
  flex: 1 !important;
  min-width: 0 !important;
}

.playerWrap .controls .time-right{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;        /* było 10px */
  min-width: auto !important; /* BYŁ PROBLEM */
  justify-content: flex-end !important;
}


.playerWrap .controls .time-right .volWrap{
  display: inline-flex !important;
  align-items: center !important;
}


/* ===== SEEK BAR – OD ZERA ===== */

#seek{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #2b2f36;
  outline: none;
}

/* niebieski progress – Chrome / Edge */
#seek::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #3b82f6 0%,
    #3b82f6 var(--seek-progress, 0%),
    #2b2f36 var(--seek-progress, 0%),
    #2b2f36 100%
  );
}

/* kółko */
#seek::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  margin-top: -4px;
  cursor: pointer;
}

/* Firefox */
#seek::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: #2b2f36;
}
#seek::-moz-range-progress{
  height: 4px;
  border-radius: 999px;
  background: #3b82f6;
}
#seek::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
}

/* FIX: żeby #seek nie skakał przy zmianie ▶ / ⏸ */
.playerWrap .controls #playPauseBtn{
  width: 44px;
  min-width: 44px;
  text-align: center;
  flex: 0 0 44px;
  padding-left: 0;
  padding-right: 0;
}

/* opcjonalnie: żeby fullscreen też nie mieszał */
.playerWrap .controls #fsBtn{
  width: 44px;
  min-width: 44px;
  text-align: center;
  flex: 0 0 44px;
  padding-left: 0;
  padding-right: 0;
}

.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;

  background: linear-gradient(to top, #0b0f14, #0b0f14ee);
  border-top: 1px solid #2f353d;
  z-index: 100;
}

.footer a{
  display: flex;
  align-items: center;
  gap: 8px;

  color: #efeff1;
  text-decoration: none;
  font-weight: 500;
  opacity: .85;
  transition: opacity .15s ease;
}

.footer a:hover{
  opacity: 1;
}

.footer svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}


/* ===== WIĘKSZA GWIAZDKA + OCENA ===== */

.repRating{
  color: #f5c518; /* złoty jak IMDb */
  font-size: 18px;        /* ← ZWIĘKSZA CAŁOŚĆ */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.repRating .star{
  font-size: 22px;
  line-height: 1;
}

/* ===== KOLOR OCEN===== */

.repRating{
  color: #c9c9ce; /* ten sam niebieski co panel admina */
  font-weight: 600;
}


.altChat{
  padding: 0;
  overflow: hidden;
  background: #0d1117;
}

.altChat iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}