/* Unified responsive video player v4 — Canva mockup layout, NajirEXE theme.
 * Mobile-first: stacked layout on phones, 3-column grid on desktop (1024px+).
 * One player code for both — no more desktop/mobile split.
 *
 * Mobile order (top to bottom):
 * - Video (full-bleed)
 * - Back + title, episode info, controls, server/language, volume
 * - Up Next + seasons + episode list
 * - Recommendations (horizontal scroll)
 * - Settings gear opens a bottom sheet
 *
 * Desktop (1024px+): 3-column grid
 * - Left: back+title, video, episode info, controls, server/lang, volume
 * - Middle: seasons pills, Up Next episodes
 * - Right: recommendation cards
 */

/* ============ MOBILE BASE (stacked) ============ */
/* Clean-slate v4: this file is the ONLY player layout stylesheet on the watch
 * page (beta-overrides.css is not loaded there). No specificity hacks needed. */
.bp4-topnav { display: none; } /* desktop-only; JS doesn't build it on mobile */

body .st-player.st-yt.bp4 {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #0a0a0c;
  max-width: none;
  margin: 0;
  align-items: stretch;
  /* Locked viewport: the outer layout never scrolls. The only scrollable
   * region is the episode list inside the Up Next card (.bp4-eplist). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* Mini-mode (floating mini player) is exempt from the locked layout —
 * higher specificity than stream.css's .st-player.mini-mode so it wins. */
.st-player.st-yt.bp4.mini-mode {
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: visible;
  padding: 0;
}
.st-player.st-yt.bp4.mini-mode .st-yt-main {
  display: block;
  overflow: visible;
}
/* Hide the native sidebar — v4 provides its own episode panel.
 * !important: the engine clears inline display on episode load
 * (side.style.display = ''), which would re-show it. */
.st-player.st-yt.bp4 .st-yt-side {
  display: none !important;
}
/* v4: video stays in normal document flow (not floating) so title/controls
 * don't overlap. The base stream.css fixed-position rule is overridden. */
.st-player.st-yt.bp4:not(.mini-mode) .st-yt-video-wrap {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
}
body .st-player.st-yt.bp4 .st-yt-main {
  max-width: none;
  width: 100%;
  /* Flex column filling the locked viewport; children stack, only the
   * episode list scrolls. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Back + title — locked to 64px to match the app header exactly */
.bp4-backrow {
  display: flex; align-items: center; gap: 10px;
  height: 64px; min-height: 64px; max-height: 64px;
  padding: 0 16px; box-sizing: border-box;
  flex-shrink: 0;
}
/* Breadcrumb: #Title + episode badge (Z-Anime style) */
.bp4-crumb-title {
  font-size: 15px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 55vw;
}
/* Video overlay skip buttons: -10s left, +30s right */
.bp4-skip {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.45); border: 0;
  color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: auto;
}
.bp4-skip span { font-size: 11px; font-weight: 700; margin-top: -4px; }
.bp4-skip-l { left: 16px; }
.bp4-skip-r { right: 16px; }
.bp4-stage:hover .bp4-skip { opacity: 1; }
.bp4-stage.bp4-idle .bp4-skip { opacity: 0; }
.bp4-skip:active { background: rgba(0,0,0,0.65); }
/* Touch: show skip buttons briefly when UI is visible */
@media (hover: none) {
  .bp4-skip { opacity: 1; }
  .bp4-stage.bp4-idle .bp4-skip { opacity: 0; }
}
/* Mobile: no overlay skip buttons — double-tap gestures handle it */
@media (max-width: 700px) {
  .bp4-skip { display: none; }
}
/* Ambient glow stage — blurred video reflection behind the player.
 * Full-bleed: no side margins, the video spans the layout edge to edge. */
.bp4-stage { position: relative; margin: 0; flex-shrink: 0; }
.bp4-ambient {
  position: absolute; inset: -80px; z-index: 0;
  pointer-events: none; overflow: visible;
  /* Centered fade: uniform 80px on all sides, no clipping.
   * The glow radiates evenly and dissolves — no box, no edges. */
}
.bp4-ambient canvas {
  width: 100%; height: 100%;
  filter: blur(60px) saturate(1.2);
  opacity: 0.45;
  /* Fade the canvas itself so the glow dissolves before the container edge */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
.bp4-stage .st-yt-video-wrap { position: relative; z-index: 1; }
/* Fullscreen: video fills the screen, controls overlay (Z-Anime style) */
.bp4-stage:fullscreen,
.bp4-stage:-webkit-full-screen {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: #000; margin: 0; padding: 0;
}
.bp4-stage:fullscreen .st-yt-video-wrap,
.bp4-stage:-webkit-full-screen .st-yt-video-wrap {
  width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
}
.bp4-stage:fullscreen .st-yt-video-wrap .st-p-video,
.bp4-stage:-webkit-full-screen .st-yt-video-wrap .st-p-video {
  object-fit: contain;
}
.bp4-stage:fullscreen .bp4-ambient,
.bp4-stage:-webkit-full-screen .bp4-ambient {
  display: none;
}
.bp4-stage:fullscreen .bp4-player-ui,
.bp4-stage:-webkit-full-screen .bp4-player-ui {
  padding: 24px 20px 16px;
}
.bp4-back {
  background: none; border: 0; color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 700; padding: 0;
}
.bp4-back .material-symbols-outlined { font-size: 24px; }

/* Video: full-bleed on mobile */
.st-yt-video-wrap {
  border-radius: 0;
  border: 0;
  overflow: hidden;
}
/* Mobile keeps native touch controls (see JS); do NOT hide them here. */

/* The base player pins the video fixed on mobile with 12px gaps — give it
 * an opaque background so scrolled content doesn't show through the gaps. */
.st-player.st-yt.bp4:not(.mini-mode) .st-yt-video-wrap {
  background: #0a0a0c;
}

/* Episode info + hosts block — fixed in the locked layout */
.bp4-info { flex-shrink: 0; }
/* Episode info */
.bp4-epinfo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 0;
}
.bp4-epinfo .bp4-ep-title {
  font-size: 14px; font-weight: 600; color: #c9c9d4; margin: 0;
}
.bp4-ep-pill {
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.1); border: 0;
  border-radius: 999px; padding: 5px 14px;
}

/* Player UI overlay — sits over the video, auto-hides on idle */
.bp4-player-ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 24px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  opacity: 1; transition: opacity 0.35s ease;
  /* Let touches pass through to the video for gestures (double-tap seek),
     except on the actual buttons and progress bar */
  pointer-events: none;
}
.bp4-player-ui button,
.bp4-player-ui input,
.bp4-player-ui .bp4-progress {
  pointer-events: auto;
}
.bp4-player-ui.bp4-idle {
  opacity: 0; pointer-events: none;
}
/* Controls */
.bp4-controls {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 4px 0; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.bp4-controls::-webkit-scrollbar { display: none; }
/* Spacer pushes right-side controls to the edge (Z-Anime arrangement) */
.bp4-spacer { flex: 1 1 auto; min-width: 8px; }
/* AUTO label buttons (auto-next, quality) */
.bp4-autolabel {
  flex-shrink: 0; height: 28px; padding: 0 8px; border-radius: 7px;
  background: rgba(255,255,255,0.08); border: 0;
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  cursor: pointer; opacity: 0.55;
}
.bp4-autolabel.on { opacity: 1; background: rgba(255,255,255,0.2); }
/* Inline volume: mute button + compact slider */
.bp4-volinline { display: flex; align-items: center; flex-shrink: 0; }
.bp4-volinline-slider {
  width: 64px; height: 4px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.25); border-radius: 2px; outline: none;
  cursor: pointer; margin: 0 2px;
}
.bp4-volinline-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
}
.bp4-volinline-slider::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff;
}
/* Phones: hide the inline slider, mute button is enough */
@media (max-width: 700px) {
  .bp4-volinline-slider { display: none; }
}
/* Mobile: minimal control bar — gestures handle the rest.
 * Double-tap left/right = ±10s, double-tap center = play/pause,
 * phone buttons = volume. Only essentials stay visible. */
@media (max-width: 700px) {
  .bp4-controls [data-bp4="autonext"],
  .bp4-controls [data-bp4="mute"],
  .bp4-controls [data-bp4="cc"],
  .bp4-controls [data-bp4="quality"],
  .bp4-controls [data-bp4="pip"] {
    display: none;
  }
  .bp4-volinline { display: none; }
}
/* Bottom volume bar */
.bp4-volbar {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 16px 0;
}
.bp4-volbar .material-symbols-outlined { color: #8a8a93; font-size: 24px; flex-shrink: 0; }
.bp4-volbar input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right, rgba(255,255,255,0.5) var(--bp4-vol, 100%), rgba(255,255,255,0.15) var(--bp4-vol, 100%));
  cursor: pointer;
}
.bp4-volbar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; background: #8a8a93;
}
.bp4-volbar input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #8a8a93; border: 0;
}
/* Phones use hardware volume buttons and native video controls — the
 * dedicated volume bar section is redundant and costs vertical space in
 * the locked layout. Placed after the base .bp4-volbar rule so it wins. */
@media (max-width: 700px) {
  .bp4-volbar { display: none; }
}
/* Toggle buttons (CC) — active state */
.bp4-cbtn.bp4-toggle { opacity: 0.55; }
.bp4-cbtn.bp4-toggle.on { opacity: 1; background: rgba(255,255,255,0.2); }
/* Quality button */
.bp4-qbtn {
  flex-shrink: 0; height: 28px; padding: 0 10px; border-radius: 7px;
  background: rgba(255,255,255,0.08); border: 0;
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer;
}
/* Quality popup menu */
.bp4-qmenu {
  position: absolute; right: 12px; bottom: 64px; z-index: 7;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(18,18,22,0.97); border: 0;
  border-radius: 12px; padding: 8px; min-width: 120px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.bp4-qmenu.hidden { display: none; }
.bp4-qmenu button {
  background: transparent; border: 0; color: #c9c9d4;
  font-size: 13px; font-weight: 600; text-align: left;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.bp4-qmenu button.on { color: #fff; background: rgba(255,255,255,0.12); }
/* Seekable progress bar */
.bp4-progress {
  position: relative; height: 26px; margin: 0 4px;
  cursor: pointer; touch-action: none; outline: none;
}
.bp4-progress::before {
  content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 4px;
  border-radius: 2px; background: rgba(255,255,255,0.18);
}
.bp4-progress-buffered {
  position: absolute; left: 0; top: 11px; height: 4px; width: 0;
  border-radius: 2px; background: rgba(255,255,255,0.35);
}
.bp4-progress-played {
  position: absolute; left: 0; top: 11px; height: 4px; width: 0;
  border-radius: 2px; background: #fff;
}
.bp4-progress-handle {
  position: absolute; top: 13px; left: 0; width: 13px; height: 13px;
  border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(0,0,0,0.55);
  pointer-events: none;
}
.bp4-progress:focus-visible .bp4-progress-handle {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}
/* Timer: current / total */
.bp4-timer {
  font-size: 12px; font-weight: 600; color: #c9c9d4;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  margin: 0 2px; user-select: none;
}
/* v4 control bar — progress, timer, playback buttons — shows on all
 * devices; native video controls are always off. (Volume slider hiding
 * lives after the base .bp4-volbar rule so it wins.) */
.bp4-cbtn {
  width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: 0;
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s;
}
.bp4-cbtn:active { opacity: 0.6; }
.bp4-cbtn .material-symbols-outlined { font-size: 18px; }
.bp4-cbtn.bp4-play { background: transparent; width: 34px; height: 34px; }
.bp4-cbtn.bp4-play .material-symbols-outlined { font-size: 20px; }
/* Phones keep larger touch targets */
@media (max-width: 700px) {
  .bp4-cbtn { width: 44px; height: 44px; border-radius: 10px; }
  .bp4-cbtn .material-symbols-outlined { font-size: 24px; }
  .bp4-cbtn.bp4-play { width: 44px; height: 44px; }
  .bp4-cbtn.bp4-play .material-symbols-outlined { font-size: 24px; }
}

/* Video Hosts section (Z-Anime style) */
.bp4-hosts { padding: 16px 16px 0; }
.bp4-hosts-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: #8a8a93; margin: 0 0 10px; text-transform: uppercase;
}
.bp4-hosts-row {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 16px; flex-wrap: wrap;
}
.bp4-langtabs {
  display: inline-flex; gap: 4px; align-items: stretch;
  background: rgba(255,255,255,0.06);
  border: 0;
  border-radius: 999px; padding: 4px; flex-shrink: 0;
  height: 44px; box-sizing: border-box;
}
.bp4-langtabs button {
  padding: 0 20px; border-radius: 999px;
  background: transparent; border: 0;
  color: #8a8a93; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; display: flex; align-items: center;
}
.bp4-langtabs button.on {
  background: #fff; color: #0a0a0c;
}
/* Server dropdown (smart: filters by language, auto-opens on language change) */
.bp4-serverdrop {
  position: relative; flex: 1; min-width: 160px;
  background: rgba(255,255,255,0.06);
  border: 0;
  border-radius: 999px; padding: 4px;
  display: flex; height: 44px; box-sizing: border-box;
}
.bp4-dropbtn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 16px; border-radius: 999px;
  background: transparent; border: 0;
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.bp4-dropbtn .material-symbols-outlined { color: #8a8a93; font-size: 18px; }
.bp4-dropbtn:active { background: rgba(255,255,255,0.1); }
.bp4-dropmenu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: rgba(18,18,22,0.98); border: 0;
  border-radius: 12px; padding: 6px; max-height: 240px; overflow-y: auto;
  /* Soft shadow, no hard edge */
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.bp4-dropmenu.hidden { display: none; }
/* Smart positioning: flip upward when there's no room below */
.bp4-dropmenu.up { top: auto; bottom: calc(100% + 6px); }
.bp4-dropitem {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; color: #c9c9d4;
  font-size: 14px; font-weight: 600; text-align: left;
  padding: 12px 14px; border-radius: 8px; cursor: pointer;
}
.bp4-dropitem:active { background: rgba(255,255,255,0.08); }
.bp4-dropitem.on { color: #fff; background: rgba(255,255,255,0.1); }
.bp4-check { color: #4ade80; font-weight: 800; }
/* Server/language button: prominent, outside the gear menu */
.bp4-server {
  display: flex; align-items: center; gap: 8px;
  margin-left: 8px; padding: 10px 16px;
  background: transparent; border: 0; cursor: pointer;
  color: #8a8a93; font-size: 13px; font-weight: 600;
}
.bp4-server:active { color: #fff; }
.bp4-server .material-symbols-outlined { font-size: 20px; }



/* Seasons + Up Next + Episodes: flexible panel filling the locked viewport.
 * The season tabs stay pinned at its top; only the episode list scrolls. */
.bp4-mid {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 0;
  flex: 1 1 auto; min-height: 0;
  overflow: hidden;
}
/* Season tabs: pinned at the top of the panel while episodes scroll.
 * (On mobile the block sits above the scroll container so it's inherently
 * fixed; on desktop it sticks within the scrolling column.) */
.bp4-seasons-block {
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 5;
  background: #0a0a0c;
}
.bp4-mid h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 600; color: #c9c9d4; margin: 0;
}
.bp4-seasons {
  display: flex; gap: 10px;
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bp4-seasons::-webkit-scrollbar { display: none; }
.bp4-season-pill {
  flex-shrink: 0;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 0;
  color: #c9c9d4; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.bp4-season-pill.active { background: #fff; color: #0a0a0a; border: 0; }

/* Up Next: flexible card; header + search stay fixed, only the episode
 * list scrolls inside it. */
.bp4-upnext {
  background: rgba(255,255,255,0.02);
  border: 0;
  border-radius: 16px;
  padding: 16px;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bp4-upnext-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.bp4-upnext-head h4 {
  font-size: 16px; font-weight: 700; color: #fff; margin: 0;
}
.bp4-upnext-head span { font-size: 13px; color: #8a8a93; }
.bp4-eplist {
  display: flex; flex-direction: column; gap: 10px;
  /* The single scrollable region on the page */
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bp4-ep {
  display: block; position: relative;
  background: rgba(255,255,255,0.03);
  border: 0;
  border-radius: 12px; padding: 0; overflow: hidden;
  cursor: pointer; transition: background 0.2s; width: 100%; text-align: left; color: inherit;
  /* Never squish: each card keeps its natural height, list scrolls */
  flex-shrink: 0;
}
.bp4-ep:active { background: rgba(255,255,255,0.07); }
.bp4-ep.cur { border-color: rgba(255,255,255,0.25); }
.bp4-ep-thumb {
  display: block; width: 100%; aspect-ratio: 16/9;
  background: rgba(255,255,255,0.06); position: relative;
}
.bp4-ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp4-ep-thumb-ph { display: flex; align-items: center; justify-content: center; min-height: 80px; }
.bp4-ep-thumb-ph .bp4-ep-n {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
}
.bp4-ep-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; align-items: flex-end;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}
.bp4-ep-tx { flex: 1; min-width: 0; }
.bp4-ep-tx b { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.bp4-ep-tx span { font-size: 12px; color: #c9c9d4; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp4-ep-tx em { font-size: 11px; color: #8a8a93; font-style: normal; }
/* Episode watch progress bar */
.bp4-ep-prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: rgba(0,0,0,0.5); z-index: 2;
}
.bp4-ep-prog i { display: block; height: 100%; background: #e50914; border-radius: 0 2px 2px 0; }
/* Now Playing badge + provider count chip */
.bp4-now {
  flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: 1px;
  background: #fff; color: #0a0a0c; border-radius: 6px; padding: 4px 8px;
}
/* Episode search — fixed above the scrolling list */
.bp4-epsearch {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 0;
  border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
  flex-shrink: 0;
}
.bp4-epsearch .material-symbols-outlined { color: #8a8a93; font-size: 20px; }
.bp4-epsearch input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: #fff; font-size: 13px;
}
.bp4-epsearch input::placeholder { color: #8a8a93; }

/* Recommendations: horizontal strip (desktop right column; mobile docks
 * inside the episode scroll — see .bp4-recs-wrap). */
.bp4-recs {
  display: flex; flex-direction: row; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding: 16px 16px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.bp4-recs::-webkit-scrollbar { display: none; }
/* Mobile dock: recommendations at the bottom of the episode scroll */
.bp4-recs-wrap { flex-shrink: 0; }
.bp4-recs-label {
  font-size: 13px; font-weight: 700; color: #c9c9d4;
  margin: 6px 0 8px;
}
.bp4-eplist .bp4-recs { padding: 0 0 8px; }
.bp4-rec-card {
  flex: 0 0 120px;
  background: rgba(255,255,255,0.06);
  border: 0;
  border-radius: 12px;
  aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  color: #8a8a93; font-size: 13px; font-weight: 600; text-align: center;
  cursor: pointer; overflow: hidden; padding: 8px;
}
.bp4-rec-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* Settings as bottom sheet on mobile */
.st-player.st-yt.bp4 .st-p-menu {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: auto;
  max-width: none;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background: rgba(18,18,22,0.98);
  border: 0;
  border-bottom: 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  backdrop-filter: blur(20px);
}

/* Dedicated watch page: locked viewport, inner scroll only */
body.bp4-watchpage .st-player.st-yt.bp4 {
  position: static;
  inset: auto;
  z-index: auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Landscape phones / short viewports: side-by-side grid — video left,
 * episode panel right. The stacked layout would push episodes off-screen
 * (a 16:9 video at full width is taller than the viewport here). */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .st-player.st-yt.bp4 .st-yt-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0 16px;
    padding: 0 16px 12px 0;
    overflow: hidden;
  }
  .bp4-backrow { grid-column: 1; grid-row: 1; }
  .bp4-stage { grid-column: 1; grid-row: 2; }
  .bp4-info {
    grid-column: 1; grid-row: 3;
    min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Compact chrome in landscape: every pixel counts */
  .bp4-hosts { padding: 8px 0 0; }
  .bp4-hosts-label { display: none; }
  .bp4-epinfo { padding: 8px 0 0; }
  .bp4-mid { grid-column: 2; grid-row: 1 / span 3; padding: 12px 0 0; }
}

/* ============ DESKTOP (1024px+): 3-column grid ============ */
@media (min-width: 1024px) {

  /* Volume slider: desktop only (phones use system volume buttons) */
  .bp4-volbar {
    display: flex; align-items: center;
  }

  /* Top nav (desktop only) — locked to 64px to match the app header exactly.
   * Explicit height (not padding-derived) so it can never drift. The hairline
   * uses an inset shadow (not border) so it never adds height. */
  .bp4-topnav {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; min-height: 64px; max-height: 64px;
    /* Edge-to-edge: counteract grid's side padding */
    margin: 0 -20px;
    padding: 0 32px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: rgba(10,10,12,0.95);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
  }
  .bp4-topnav-left { display: flex; align-items: center; gap: 28px; }
  .bp4-logo { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: #fff; }
  .bp4-logo span { color: #d4e4fa; }
  .bp4-nav { display: flex; gap: 4px; }
  .bp4-nav button {
    padding: 8px 16px; border-radius: 9999px; background: transparent; border: 0;
    color: #8a8a93; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
  }
  .bp4-nav button:hover { color: #fff; background: rgba(255,255,255,0.06); }
  .bp4-nav button.active { color: #fff; background: rgba(255,255,255,0.1); }
  .bp4-topnav-right { display: flex; gap: 12px; align-items: center; }
  .bp4-icon-btn, .bp4-profile-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: 0;
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; overflow: hidden;
  }
  .bp4-icon-btn:hover { background: rgba(255,255,255,0.12); }
  .bp4-profile-btn img { width: 100%; height: 100%; object-fit: cover; }

  /* 3-column grid — locked viewport, columns scroll independently.
   * Fluid side columns so the video never gets squeezed at ~1024px.
   * Grid items are the player's direct children: topnav (spans all),
   * .st-yt-main (video column), .bp4-mid (episodes), .bp4-recs.
   * The `body` prefix ties specificity with beta-overrides' generic player
   * rules; v4 loads later so it wins. */
  body .st-player.st-yt.bp4 {
    display: grid;
    /* Balanced: video ~42%, episodes ~33%, recs ~19% at 1600px */
    grid-template-columns: minmax(0, 1fr) clamp(350px, 28vw, 450px) clamp(380px, 30vw, 480px);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0 24px;
    /* Breathing room on sides/bottom; topnav spans edge-to-edge via negative margin */
    padding: 0 20px 16px;
    max-width: 1920px;
    margin: 0 auto;
    /* Stretch so columns are constrained to row height and scroll */
    align-items: stretch;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body .st-player.st-yt.bp4 .st-yt-main {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Video balances with controls: never so tall that server/volume are pushed out */
  body .st-player.st-yt.bp4 .bp4-stage {
    flex-shrink: 1;
    min-height: 0;
  }
  body .st-player.st-yt.bp4 .bp4-info {
    flex-shrink: 0;
  }
  .bp4-mid { grid-column: 2; grid-row: 2; min-height: 0; max-height: none; }
  .bp4-recs { grid-column: 3; grid-row: 2; min-height: 0; max-height: none; padding-right: 24px; }

  /* Back + title */
  .bp4-backrow {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    padding: 12px 0;
    min-height: 52px; box-sizing: border-box;
  }
  .bp4-back { font-size: 22px; }
  .bp4-back .material-symbols-outlined { font-size: 28px; }
  .bp4-back:hover { opacity: 0.8; }

  /* Video */
  .st-yt-video-wrap {
    border-radius: 14px;
    border: 0;
  }

  /* Episode info */
  .bp4-epinfo { padding: 0; margin: 14px 0 12px; }

  /* Controls */
  .bp4-controls { padding: 0; margin-bottom: 14px; }
  .bp4-cbtn:hover { background: rgba(255,255,255,0.15); }
  .bp4-server { margin-left: 12px; }
  .bp4-server:hover { color: #fff; }

  /* Volume */
  .bp4-volbar { margin: 0; }

  /* Middle column: seasons fixed at top, Up Next header/search fixed,
   * ONLY the episode cards scroll (in .bp4-eplist). */
  .bp4-mid {
    padding: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }
  .bp4-mid h3 { font-size: 20px; }
  .bp4-seasons-block { flex-shrink: 0; }
  .bp4-upnext {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .bp4-upnext-head, .bp4-epsearch { flex-shrink: 0; }
  .bp4-eplist {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
  }
  .bp4-seasons { flex-wrap: wrap; overflow: visible; }
  .bp4-upnext-head h4 { font-size: 17px; }
  .bp4-ep:hover { background: rgba(255,255,255,0.07); }

  /* Right column: vertical recommendations */
  .bp4-recs {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
  }
  /* Single combo card: vertically centered in the column instead of pinned
   * to the top. Auto margins (not justify-content) so a taller-than-viewport
   * card still top-aligns and scrolls instead of clipping. */
  .bp4-recs > .bp4-slidebox { margin-top: auto; margin-bottom: auto; }
  .bp4-rec-card {
    flex: none;
    width: 100%;
    font-size: 14px;
    padding: 12px;
  }
  .bp4-rec-card:hover { border-color: rgba(255,255,255,0.2); }

  /* Settings: anchored panel on desktop (not bottom sheet) */
  .st-player.st-yt.bp4 .st-p-menu {
    position: absolute;
    left: auto; right: 12px; bottom: auto;
    max-width: calc(100vw - 24px);
    max-height: none;
    border-radius: 12px;
    border-bottom: 0;
    padding: 8px;
  }

}

/* Canva layout: Right column with Related and Recommended sections */
.bp4-relsec { margin-bottom: 24px; }
.bp4-relsec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.bp4-relsec-head h4 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.bp4-relarrows { display: flex; gap: 8px; }
.bp4-relarrows button {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 0; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.bp4-relrow {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 8px;
}
.bp4-relrow::-webkit-scrollbar { display: none; }
.bp4-relcard {
  flex: 0 0 140px;
  background: rgba(255,255,255,0.06); border: 0; border-radius: 12px;
  aspect-ratio: 3/4; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
}
.bp4-relcard img { width: 100%; flex: 1; object-fit: cover; }
.bp4-relcard span { padding: 8px; font-size: 12px; color: #c9c9d4; text-align: center; }

/* ── Gallery + Reviews carousel (right column) ─────────────────────────────
 * ONE box keeps the exact .bp4-rec-card size above (desktop: width 100%,
 * 3/4 ratio; mobile: 120px, 3/4 ratio) — only its inner content changed.
 * Each slide pairs a gallery photo on top with a review below and the whole
 * card crossfades, so rotation can never move or resize anything around it. */
.bp4-slidebox { position: relative; padding: 0; cursor: default; }
.bp4-slidetrack { position: absolute; inset: 0; }
.bp4-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.8s ease;
  pointer-events: none; overflow: hidden;
}
.bp4-slide.on { opacity: 1; z-index: 1; }
/* Combo slide: gallery photo on top, review below — fills the fixed box.
 * Any photo — landscape or vertical — is cropped cleanly with no distortion
 * and no layout shift. */
.bp4-combo { display: flex; flex-direction: column; width: 100%; height: 100%; }
.bp4-combo-photo { flex: 1 1 56%; min-height: 0; overflow: hidden; }
.bp4-combo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Blend: the photo's bottom edge dissolves into the review below, so there
 * is no hard border between the two halves. Skipped on photo-only slides. */
.bp4-combo-photo:not(.solo) img {
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
}
.bp4-combo-photo.solo { flex-basis: 100%; }
.bp4-combo-rev {
  flex: 1 1 44%; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.bp4-combo-rev.solo { flex-basis: 100%; }
/* Floating "Gallery"/"Reviews" chip — absolutely positioned, no layout cost */
.bp4-slidechip {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.45);
  padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
/* Loading spinner / empty state — fills the box, centered */
.bp4-slideph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: #8a8a93; font-size: 13px; font-weight: 600; text-align: center;
}
.bp4-slidespin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15); border-top-color: #fff;
  animation: bp4slidespin 0.8s linear infinite;
}
@keyframes bp4slidespin { to { transform: rotate(360deg); } }
.bp4-slideempty { padding: 16px; }
/* Review half of the combo card: clamped text can never overflow the box */
.bp4-revhead { display: flex; align-items: center; gap: 8px; }
.bp4-slide .bp4-revav {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); color: #fff; font-weight: 700; font-size: 14px;
}
.bp4-revwho b { display: block; font-size: 13px; color: #fff; }
.bp4-revwho em { font-style: normal; font-size: 10px; color: #8a8a93; }
.bp4-stars { font-size: 14px; letter-spacing: 2px; color: #f5c518; }
.bp4-stars span:not(.on) { color: rgba(255,255,255,0.22); }
.bp4-combo-rev p {
  margin: 0; font-size: 12px; line-height: 1.5; color: #d4d4d8;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}