/* ==============================================
   Archive Film Club - Player Page Styles v2.0
   Immersive cinema-like video experience
   ============================================== */

/* ---- Player Page Body ---- */
.player-page {
  padding-top: 0 !important;
  background: #07070a !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Player Header ---- */
.player-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 52px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  transition: opacity 0.4s ease, background 0.3s ease;
  pointer-events: none;
}

.player-header:hover,
.player-header.visible {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.player-header * {
  pointer-events: auto;
}

.player-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 var(--space-4);
  max-width: none;
}

/* Back Button */
.player-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.player-back-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Logo */
.player-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.player-logo:hover {
  color: #fff;
}

.player-logo-icon {
  width: 26px;
  height: 26px;
  background: var(--color-brand-gradient);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.player-logo-text {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Header Actions */
.player-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.player-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all 0.2s ease;
}

.player-action-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.player-action-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Theme toggle overrides */
.player-page .theme-toggle {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}

.player-page .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ---- Main Content ---- */
.player-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- Cinema / Video Area ---- */
.player-cinema {
  background: #000;
  width: 100%;
  height: calc(100vh - 52px);
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theater mode - full viewport */
.player-page.theater-mode .player-cinema {
  height: 100vh;
}

.player-page.theater-mode .player-header {
  opacity: 0;
  pointer-events: none;
}

.player-page.theater-mode .player-header:hover {
  opacity: 1;
  pointer-events: auto;
}

.player-page.theater-mode .player-cinema:hover ~ .player-header,
.player-page.theater-mode .player-header:hover {
  opacity: 1;
}

.player-video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
}

.player-video-wrapper video,
.player-video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  object-fit: contain;
}

/* Loader */
.player-page .player-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 5;
  gap: 16px;
}

/* Error State */
.player-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: rgba(255, 255, 255, 0.4);
  gap: 16px;
  text-align: center;
  padding: 32px;
}

.player-error p {
  font-size: 15px;
  line-height: 1.6;
}

.player-error a {
  color: var(--color-accent);
  text-decoration: none;
}

.player-error a:hover {
  text-decoration: underline;
}

/* ---- Controls Bar (top of cinema, clear of native HTML5 controls) ----
   Sits ABOVE the native HTML5 video scrubber, not on top of it. Putting it
   at the bottom (where the native timeline lives) caused clicks/drags on
   empty bar regions to be swallowed by the overlay, breaking seek on
   videos that triggered the bar (multi-episode or multi-quality items).
   Offset by the 52px page header so episode/quality buttons aren't hidden
   under the back/auth buttons; fullscreen resets to top:0 because the
   page header is gone there.
   The bar itself never captures pointer events — only its actual buttons
   do — so even when it visually overlaps anything, clicks pass through
   to the native controls below. */
.player-controls-bar {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Bar is a visual gradient + container — never the click target. Children
     that are actually interactive get pointer-events: auto restored below. */
  pointer-events: none;
}

.player-cinema:hover .player-controls-bar,
.player-controls-bar:focus-within {
  opacity: 1;
  /* Intentionally do NOT toggle pointer-events on the bar itself; the
     gradient/empty regions must always pass clicks through to the video
     element (and its native timeline scrubber) underneath. */
}

/* Hide the bar entirely when nothing inside is currently visible.
   With the playlist/quality controls hidden by inline style on
   single-episode, single-quality videos, the gradient would otherwise
   appear on hover with no content underneath it. */
.player-controls-bar:not(:has(.controls-bar-left > *:not([style*="display:none"]):not([style*="display: none"]))):not(:has(.controls-bar-right > *:not([style*="display:none"]):not([style*="display: none"]))) {
  display: none;
}

.controls-bar-left,
.controls-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Restore interactivity on the actual control groups so their buttons
     remain clickable while the parent bar stays click-through. */
  pointer-events: auto;
}

/* Player control buttons */
.pctl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pctl-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.pctl-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Episode indicator */
.episode-indicator {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  padding: 0 10px;
  white-space: nowrap;
}

/* Quality Selector */
.quality-selector {
  position: relative;
}

.quality-btn {
  padding: 0 10px;
}

.quality-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quality-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(20, 20, 20, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px;
  display: none;
  z-index: 50;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.quality-menu.open {
  display: block;
  animation: qualityMenuIn 0.2s ease;
}

@keyframes qualityMenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.quality-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.quality-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.quality-option.active {
  color: var(--color-accent);
}

.quality-option.active::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.quality-option-size {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

/* Fullscreen on the cinema container — let the video fill the whole screen
   while keeping our Up Next overlay + shortcut indicator visible. */
.player-cinema:fullscreen,
.player-cinema:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.player-cinema:fullscreen .player-video-wrapper,
.player-cinema:-webkit-full-screen .player-video-wrapper {
  height: 100%;
}

.player-cinema:fullscreen .player-controls-bar,
.player-cinema:-webkit-full-screen .player-controls-bar {
  /* Sit above the native HTML5 controls and stay reachable on hover.
     Reset the header offset because the page header is hidden in
     fullscreen mode. */
  top: 0;
  z-index: 12;
}

/* While fullscreen, give the Up Next overlay a bit more breathing room
   and a stronger backdrop because it's competing with the video itself. */
.player-cinema:fullscreen .up-next-overlay,
.player-cinema:-webkit-full-screen .up-next-overlay {
  right: 32px;
  bottom: 56px;
  z-index: 30;
}

.player-cinema:fullscreen .up-next-card,
.player-cinema:-webkit-full-screen .up-next-card {
  background: rgba(8, 8, 12, 0.94);
}

/* ---- Keyboard Shortcut Indicator ---- */
.shortcut-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 20px 28px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.shortcut-indicator.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.shortcut-indicator svg {
  width: 28px;
  height: 28px;
}

/* ---- Resume Prompt ---- */
.resume-prompt {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  animation: resumeSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes resumeSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.resume-prompt-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.resume-btn {
  padding: 6px 16px;
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.resume-btn:hover {
  filter: brightness(1.15);
}

.resume-dismiss {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.resume-dismiss:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ---- Content Below Video ---- */
.player-content {
  display: block;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  background: var(--color-bg-primary);
  flex: 1;
  min-height: 300px;
}

.player-content-main {
  flex: 1;
  min-width: 0;
  padding: 24px 32px;
}

/* ---- Video Info ---- */
.player-video-info {
  margin-bottom: 20px;
}

.player-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.player-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.player-creator,
.player-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.player-creator svg,
.player-date svg {
  opacity: 0.5;
}

/* Action Buttons */
.player-video-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.player-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.player-pill-btn:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-strong);
}

.player-pill-btn:active {
  transform: scale(0.97);
}

.player-pill-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ---- Description Section ---- */
.player-description-section {
  margin-bottom: 20px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.player-description-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

.player-description-toggle:hover {
  background: var(--color-bg-hover);
}

.toggle-chevron {
  transition: transform 0.3s ease;
  color: var(--color-text-tertiary);
}

.player-description-toggle.expanded .toggle-chevron {
  transform: rotate(180deg);
}

.player-description-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.player-description-content.expanded {
  max-height: 800px;
  overflow-y: auto;
  padding: 0 18px 18px;
}

.player-description-content a {
  color: var(--color-accent);
}

/* ---- Downloads Panel ---- */
.player-downloads-panel {
  margin-bottom: 20px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  animation: panelSlideIn 0.3s var(--ease-out);
}

@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.player-downloads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}

.player-downloads-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.player-close-panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.player-close-panel-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.player-download-links {
  padding: 8px 12px;
}

.download-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px 4px;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all 0.15s ease;
  font-size: 13px;
}

.download-item:hover {
  background: var(--color-bg-hover);
}

.download-item svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.download-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.download-item-quality {
  font-weight: 500;
}

.download-item-size {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.download-item-all {
  border-top: 1px solid var(--color-border);
  margin-top: 6px;
  padding-top: 10px;
}

/* ---- Playlist Sidebar ----
   Sizing/position lives in the "Layout v3" section near the end of this
   file; this block is only the rail's own look and internal structure. */
.player-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-bg-secondary);
}

.player-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: 12px;
}

.sidebar-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-header-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.player-sidebar-count {
  font-size: 11px;
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.sidebar-header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-nav-btn:hover:not(:disabled) {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.sidebar-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.player-sidebar-items {
  flex: 1 1 auto;
  /* Lets the list shrink below its content height inside the bounded rail
     so it scrolls internally instead of stretching the whole page. */
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-elevated) transparent;
  overscroll-behavior: contain;
}

.player-sidebar-items::-webkit-scrollbar {
  width: 5px;
}

.player-sidebar-items::-webkit-scrollbar-track {
  background: transparent;
}

.player-sidebar-items::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated);
  border-radius: 3px;
}

/* ---- Playlist Items ---- */
.playlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.playlist-item:hover {
  background: var(--color-bg-hover);
}

.playlist-item.active {
  background: rgba(6, 95, 212, 0.08);
  border-left-color: var(--color-accent);
}

/* Playlist thumbnail */
.playlist-item-thumb {
  width: 100px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg-tertiary);
  position: relative;
}

.playlist-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playlist-item-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 22px;
}

/* Playing indicator on thumbnail */
.playlist-item.active .playlist-item-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.playlist-item-playing-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
  color: #fff;
}

.playlist-item.active .playlist-item-playing-icon {
  display: flex;
}

/* Now-playing equalizer animation */
.playing-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.playing-bars span {
  width: 3px;
  background: #fff;
  border-radius: 1px;
  animation: playingBar 0.8s ease-in-out infinite alternate;
}

.playing-bars span:nth-child(1) { height: 4px; animation-delay: 0s; }
.playing-bars span:nth-child(2) { height: 10px; animation-delay: 0.2s; }
.playing-bars span:nth-child(3) { height: 6px; animation-delay: 0.4s; }

@keyframes playingBar {
  0% { height: 4px; }
  100% { height: 14px; }
}

/* Episode duration badge on thumbnail */
.playlist-item-duration-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}

/* Playlist item number */
.playlist-item-number {
  width: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  font-weight: 500;
}

.playlist-item.active .playlist-item-number {
  color: var(--color-accent);
}

/* Playlist item info */
.playlist-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.playlist-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.playlist-item.active .playlist-item-title {
  color: var(--color-accent);
  font-weight: 600;
}

.playlist-item-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-tertiary);
  flex-wrap: wrap;
  font-weight: var(--font-weight-medium);
}

.playlist-item-meta svg {
  width: 11px;
  height: 11px;
  opacity: 0.6;
}

.playlist-item-meta .playlist-item-index {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.playlist-item.active .playlist-item-meta .playlist-item-index {
  color: var(--color-accent);
}

/* ---- Share Modal ---- */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.share-modal {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
  max-width: 480px;
  width: 90vw;
  text-align: center;
}

.share-modal h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.share-modal-input {
  width: 100%;
  padding: 12px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 16px;
  outline: none;
}

.share-modal-input:focus {
  border-color: var(--color-accent);
}

.share-modal-close {
  padding: 8px 24px;
  background: var(--color-accent);
  border: none;
  border-radius: 20px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-modal-close:hover {
  filter: brightness(1.1);
}

/* ---- Light Theme Overrides ---- */
[data-theme="light"] .player-page {
  background: #f0f2f5 !important;
}

[data-theme="light"] .player-cinema {
  background: #000;
}

[data-theme="light"] .player-header:hover,
[data-theme="light"] .player-header.visible {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="light"] .player-content {
  background: #ffffff;
}

[data-theme="light"] .player-sidebar {
  background: #fafbfc;
}

[data-theme="light"] .player-description-section {
  background: #f5f6f8;
}

[data-theme="light"] .player-downloads-panel {
  background: #f5f6f8;
}

[data-theme="light"] .player-back-btn {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .player-back-btn:hover {
  color: #fff;
}

[data-theme="light"] .playlist-item.active {
  background: rgba(6, 95, 212, 0.06);
}

[data-theme="light"] .playlist-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .player-content-main {
    padding: 20px 24px;
  }

  .playlist-item-thumb {
    width: 80px;
    height: 45px;
  }
}

/* ==============================================
   MOBILE — Player page polish
   ============================================== */

@media (max-width: 768px) {
  /* Safe-area-aware header. The video sits flush against the bottom of the
     header, so any extra notch space needs to live INSIDE the header
     rather than as separate body padding. */
  .player-header {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  .player-header-content {
    height: 52px;
    padding: 0 max(var(--space-3), env(safe-area-inset-left))
             0 max(var(--space-3), env(safe-area-inset-right));
  }

  /* Back button collapses to icon-only with a full 40×40 tap target. */
  .player-back-btn {
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
    border-radius: 50%;
    gap: 0;
  }

  .player-back-text {
    display: none;
  }

  .player-logo-text {
    display: none;
  }

  .player-content-main {
    padding: 16px max(16px, env(safe-area-inset-left))
             calc(20px + env(safe-area-inset-bottom, 0px))
             max(16px, env(safe-area-inset-right));
  }

  .player-video-info {
    margin-bottom: 14px;
  }

  .player-title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
  }

  .player-meta-row {
    gap: 12px;
    margin-bottom: 12px;
  }

  /* Action pills: bigger touch targets + horizontal scroll instead of
     wrapping. YouTube-mobile pattern — pills sit in a single row, scroll
     under the user's thumb. */
  .player-video-actions {
    gap: 8px;
    margin: 12px 0 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the edges so the last pill peeks, signaling scrollability. */
    margin-left: -16px;
    margin-right: -16px;
    padding: 4px 16px 8px;
    scroll-padding-left: 16px;
  }

  .player-video-actions::-webkit-scrollbar {
    display: none;
  }

  .player-pill-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    flex-shrink: 0;
  }

  /* ----------------------------------------------------------------
     MOBILE CONTROLS — keep the video frame clean.

     Native <video controls> already gives mobile users play/seek/
     volume/fullscreen/Picture-in-Picture/captions/playback-speed, so
     every custom overlay button here is redundant on a phone — with
     ONE exception: video quality. Native controls can't switch between
     the separate progressive MP4 files we stream from Archive.org, so
     the quality picker has to stay reachable.

     So instead of a full-width strip across the top of the video, we
     hide everything except quality and tuck that single chip into the
     bottom-right corner. Result: nothing covers the picture except, at
     most, one small quality chip — exactly where it was requested. */
  .player-controls-bar,
  .player-cinema:fullscreen .player-controls-bar,
  .player-cinema:-webkit-full-screen .player-controls-bar {
    /* Re-anchor: was top:52px / left:0 / right:0 (a full-width strip
       pinned to the top of the frame). Now a corner cluster. */
    top: auto;
    left: auto;
    right: 8px;
    /* Float ABOVE the native HTML5 control bar (~48px tall) so the chip
       never lands on top of the native fullscreen / overflow buttons,
       which share the bottom-right corner. The native bar auto-hides,
       so most of the time the chip simply sits in the lower-right. */
    bottom: 56px;
    width: auto;
    padding: 0;
    opacity: 1;
    background: transparent;
    justify-content: flex-end;
  }

  /* Episode prev/next + the "3 / 12" indicator: redundant with the
     playlist below the video (plus auto-advance and the Up Next card),
     and the only reason the bar ever spanned the full width. Dropping
     the whole left group lets the bar shrink to a corner chip. */
  .controls-bar-left {
    display: none;
  }

  /* Captions, Picture-in-Picture and playback speed are all reachable
     from the native video controls on mobile — don't duplicate them as
     overlay chips. (!important so the JS show/hide that toggles inline
     display can't re-reveal them on a phone.) */
  #speedSelector,
  #captionsBtn,
  #pipBtn {
    display: none !important;
  }

  /* The lone survivor: a compact, legible quality chip. Its own dark
     backdrop keeps it readable on bright video frames. */
  .player-controls-bar .pctl-btn {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .player-controls-bar .pctl-btn:hover {
    background: rgba(0, 0, 0, 0.75);
  }

  /* The quality menu now opens UPWARD: its button sits at the bottom of
     the frame, so the default downward drop would fall behind the
     native controls or off the video entirely. Right-aligned to the
     corner. */
  #qualitySelector .quality-menu {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
  }

  /* Description toggle: full row, taller tap target. */
  .player-description-toggle {
    padding: 14px 16px;
    min-height: 48px;
    font-size: 14px;
  }

  .player-description-content {
    padding: 0 16px 16px;
  }

  /* ---- Playlist (flows below the video on mobile; see Layout v3) ---- */
  .player-sidebar-items {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .playlist-item {
    padding: 12px 16px;
    min-height: 60px;
    gap: 12px;
  }

  .playlist-item-thumb {
    width: 96px;
    height: 54px;
    flex-shrink: 0;
  }

  .sidebar-nav-btn {
    width: 36px;
    height: 36px;
  }

  /* ---- Resume / toast banners ---- */
  .resume-prompt {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    transform: none;
  }

  @keyframes resumeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .resume-prompt-content {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .player-content-main {
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* The pill row bleeds to the content edges; match the 12px padding above
     (the 768px rule assumed 16px, which left a 4px horizontal overflow). */
  .player-video-actions {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    scroll-padding-left: 12px;
  }

  .player-title {
    font-size: 17px;
  }

  .player-meta-row {
    gap: 10px;
  }

  /* Keep thumbnails on phone — they're a key visual anchor for which
     episode you're on. The previous rule hid them entirely. Just make
     them a touch smaller. */
  .playlist-item-thumb {
    width: 80px;
    height: 45px;
  }

  .playlist-item {
    padding: 10px 14px;
    gap: 10px;
  }
}

/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==============================================
   Player metadata pills (under the title)
   ============================================== */
.player-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 16px;
}

.player-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.player-meta-pill svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.player-meta-pill.tone-success {
  color: var(--color-success);
  background: var(--color-success-bg);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.player-meta-pill.tone-success svg {
  opacity: 1;
}

.player-meta-pill.tone-accent {
  color: var(--color-accent);
  background: var(--color-accent-light);
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.player-meta-pill.tone-accent svg {
  opacity: 1;
}

.player-meta-pill.tone-star {
  color: #f5b400;
  background: rgba(245, 180, 0, 0.1);
  border-color: rgba(245, 180, 0, 0.3);
}

/* ==============================================
   Player tags row (subjects/topics)
   ============================================== */
.player-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
}

.player-tags-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.player-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.player-tag:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* ==============================================
   Sidebar: Series header card
   ============================================== */
.player-series-card {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
}

.player-series-cover {
  flex-shrink: 0;
  width: 88px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}

.player-series-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.player-series-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.player-series-eyebrow {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 3px;
}

.player-series-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.player-series-creator {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-series-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
}

.player-series-stats .dot {
  opacity: 0.5;
}

/* ==============================================
   Sidebar: Toolbar (search + density)
   ============================================== */
.player-sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-bg-secondary);
  z-index: 5;
}

.player-sidebar-search {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  height: 32px;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.player-sidebar-search:focus-within {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.player-sidebar-search > svg {
  position: absolute;
  left: 9px;
  pointer-events: none;
  color: var(--color-text-tertiary);
}

.player-sidebar-search-input {
  flex: 1;
  min-width: 0;
  padding: 0 26px 0 28px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 13px;
  height: 100%;
}

.player-sidebar-search-input::placeholder {
  color: var(--color-text-tertiary);
}

.player-sidebar-search-clear {
  position: absolute;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--transition-base), color var(--transition-base);
}

.player-sidebar-search-clear:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.player-sidebar-density {
  display: flex;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
  flex-shrink: 0;
}

.player-sidebar-density .density-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.player-sidebar-density .density-btn:hover {
  color: var(--color-text-primary);
}

.player-sidebar-density .density-btn.active {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

/* ==============================================
   Sidebar: Empty filter state
   ============================================== */
.player-sidebar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  color: var(--color-text-tertiary);
  gap: 10px;
}

.player-sidebar-empty svg {
  opacity: 0.5;
}

.player-sidebar-empty p {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* ==============================================
   Sidebar: Playlist items — additions for v2
   ============================================== */
.playlist-item {
  outline: none;
}

.playlist-item:focus-visible {
  background: var(--color-bg-hover);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.playlist-item.watched .playlist-item-number {
  color: var(--color-success);
}

.playlist-item.watched .playlist-item-thumb img {
  opacity: 0.55;
}

.playlist-item-thumb {
  position: relative;
}

.playlist-item-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-brand-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand-color) 60%, transparent);
  border-radius: 0 2px 0 0;
  z-index: 3;
}

.playlist-item-meta .dot {
  opacity: 0.4;
}

.playlist-item-meta .watched-tag {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.playlist-item-meta .resume-tag {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* Compact density */
.player-sidebar[data-density="compact"] .playlist-item {
  padding: 6px 16px;
  gap: 10px;
}

.player-sidebar[data-density="compact"] .playlist-item-thumb {
  width: 56px;
  height: 32px;
}

.player-sidebar[data-density="compact"] .playlist-item-duration-badge {
  display: none;
}

.player-sidebar[data-density="compact"] .playlist-item-title {
  font-size: 12px;
  -webkit-line-clamp: 1;
}

.player-sidebar[data-density="compact"] .playlist-item-meta {
  font-size: 10px;
  gap: 6px;
}

.player-sidebar[data-density="compact"] .player-series-card {
  padding: 10px 16px;
}

.player-sidebar[data-density="compact"] .player-series-cover {
  width: 72px;
}

/* ==============================================
   Up Next overlay
   ============================================== */
.up-next-overlay {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  width: 360px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.96);
  transition: opacity var(--transition-base), transform var(--transition-spring);
}

.up-next-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.up-next-card {
  position: relative;
  background: rgba(15, 15, 18, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}

.up-next-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.up-next-body {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.up-next-thumb {
  flex-shrink: 0;
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.up-next-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.up-next-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.up-next-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.up-next-countdown {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.up-next-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.up-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-fast), color var(--transition-base);
}

.up-next-btn:active {
  transform: scale(0.97);
}

.up-next-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.up-next-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.up-next-btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.up-next-btn-primary:hover {
  background: var(--color-accent-hover);
}

.up-next-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.up-next-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  transform-origin: left;
  animation: upNextProgress 8s linear forwards;
}

.up-next-overlay:not(.visible) .up-next-progress > span {
  animation: none;
}

@keyframes upNextProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Mobile up next */
@media (max-width: 640px) {
  .up-next-overlay {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }

  .up-next-thumb {
    width: 80px;
  }
}

/* =========================================================
   Buffering indicator (mid-playback only)
   ========================================================= */
.player-buffering {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 60;
}
.player-buffering.visible {
  display: flex;
}
.player-buffering .loading-spinner {
  width: 56px;
  height: 56px;
}

/* =========================================================
   Keyboard shortcuts help overlay (triggered by `?`)
   ========================================================= */
.shortcuts-help {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.18s ease;
  padding: 16px;
}
.shortcuts-help.visible {
  opacity: 1;
}
.shortcuts-help[hidden] {
  display: none;
}
.shortcuts-help-panel {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.shortcuts-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.shortcuts-help-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.shortcuts-help-close {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shortcuts-help-close:hover {
  background: var(--color-bg-secondary);
}
.shortcuts-help-grid {
  padding: 12px 20px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
@media (max-width: 480px) {
  .shortcuts-help-grid {
    grid-template-columns: 1fr;
  }
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.shortcut-row span {
  margin-left: auto;
  color: var(--color-text-primary);
}
.shortcut-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--color-bg-elevated, var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* =========================================================
   Captions / CC button
   ========================================================= */
.captions-btn {
  position: relative;
}
.captions-btn .captions-underline {
  display: block;
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.captions-btn.active {
  color: var(--accent-color, #fff);
}
.captions-btn.active .captions-underline {
  opacity: 1;
  transform: scaleX(1);
}

/* =====================================================
   PLAYER COMMENTS — YouTube-inspired, members-only
   ===================================================== */

.player-comments-section {
  margin-bottom: 24px;
}

.comments-section {
  background: transparent;
  color: var(--color-text-primary);
}

/* ---- Header ---- */
.comments-section-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.comments-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.comments-section-title [data-comments-count] {
  font-variant-numeric: tabular-nums;
}

.comments-sort {
  position: relative;
}
.comments-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.comments-sort-btn:hover {
  background: var(--color-bg-hover);
}
.comments-sort-btn svg {
  opacity: 0.85;
}
.comments-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  padding: 6px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.comments-sort-menu[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.comments-sort-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.comments-sort-menu button:hover {
  background: var(--color-bg-hover);
}
.comments-sort-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  opacity: 0;
  color: var(--color-text-primary);
}
.comments-sort-menu button[data-active="true"] .comments-sort-check {
  opacity: 1;
}

/* ---- Avatar ---- */
.comments-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  user-select: none;
  line-height: 1;
}
.comments-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.comments-avatar--muted {
  background: var(--color-bg-tertiary) !important;
  color: var(--color-text-tertiary);
  text-shadow: none;
  font-weight: 500;
}

/* ---- Composer ---- */
.comments-composer-area {
  margin-bottom: 24px;
}
.comments-composer {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.comments-composer-body {
  flex: 1 1 auto;
  min-width: 0;
}
.comments-composer-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
  resize: none;
  outline: none;
  transition: border-color var(--transition-fast), padding var(--transition-fast);
  max-height: 240px;
  overflow-y: auto;
}
.comments-composer-input::placeholder {
  color: var(--color-text-tertiary);
}
.comments-composer-input:focus,
.comments-composer--active .comments-composer-input {
  border-bottom-color: var(--color-text-primary);
  border-bottom-width: 2px;
  padding-bottom: 7px;
}
.comments-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.comments-composer-counter {
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.comments-composer-buttons {
  display: flex;
  gap: 8px;
}
.comments-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
  line-height: 1;
  letter-spacing: 0.01em;
}
.comments-btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
}
.comments-btn--ghost:hover {
  background: var(--color-bg-hover);
}
.comments-btn--primary {
  background: var(--accent-color, #065fd4);
  color: #fff;
}
.comments-btn--primary:hover {
  background: var(--accent-color-dark, #0950b8);
}
.comments-btn--primary:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.comments-composer--reply {
  margin-top: 12px;
}
.comments-composer--inline {
  margin: 4px 0 0 0;
}

/* ---- Sign-in prompt ---- */
.comments-signin-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text-secondary);
  font-size: 14px;
}
.comments-signin-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  position: relative;
}
.comments-signin-avatar::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  opacity: 0.5;
}
.comments-signin-avatar::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 14px;
  border-radius: 13px 13px 0 0;
  background: var(--color-text-tertiary);
  opacity: 0.5;
}
.comments-signin-text a {
  color: var(--accent-color, #065fd4);
  font-weight: 600;
  text-decoration: none;
  margin-right: 4px;
}
.comments-signin-text a:hover {
  text-decoration: underline;
}

/* ---- List, comment, threads ---- */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.comment-thread {
  display: flex;
  flex-direction: column;
}

.comment {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.comment--reply {
  gap: 12px;
}
.comment-main {
  flex: 1 1 auto;
  min-width: 0;
}
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.comment-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.comment-badge--admin {
  background: var(--accent-color, #065fd4);
  color: #fff;
}
.comment-time, .comment-edited {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.comment-deleted-label {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-style: italic;
}
.comment-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.comment-body a {
  color: var(--accent-color, #065fd4);
  text-decoration: none;
}
.comment-body a:hover {
  text-decoration: underline;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.comment-like-btn,
.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}
.comment-like-btn:hover,
.comment-reply-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.comment-like-btn.is-liked {
  color: var(--accent-color, #065fd4);
}
.comment-like-btn svg {
  display: block;
}
.comment-like-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comment-like-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 8px;
}

/* ---- Kebab menu ---- */
.comment-kebab {
  position: relative;
  flex-shrink: 0;
  margin-top: -4px;
}
.comment-kebab-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.comment:hover .comment-kebab-btn,
.comment-kebab[data-open="true"] .comment-kebab-btn,
.comment-kebab-btn:focus-visible {
  opacity: 1;
}
.comment-kebab-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.comment-kebab-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  padding: 6px;
  z-index: 25;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.comment-kebab[data-open="true"] .comment-kebab-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.comment-kebab-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.comment-kebab-menu button:hover {
  background: var(--color-bg-hover);
}

/* ---- Replies ---- */
.comments-show-replies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-left: 56px;
  align-self: flex-start;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--accent-color, #065fd4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.comments-show-replies:hover {
  background: color-mix(in srgb, var(--accent-color, #065fd4) 14%, transparent);
}
.comments-show-replies svg {
  transition: transform var(--transition-fast);
}
.comments-show-replies.is-open svg {
  transform: rotate(180deg);
}
.comment-replies {
  margin-top: 16px;
  margin-left: 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comment-replies[hidden] {
  display: none;
}
.comment-reply-form-slot:empty {
  display: none;
}
.comment-reply-form-slot {
  margin-left: 56px;
  margin-top: 12px;
}

/* ---- Edit form ---- */
.comment-edit-wrap {
  margin-top: 4px;
}

/* ---- Load more, empty, loading ---- */
.comments-load-more {
  align-self: flex-start;
  margin-top: 20px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--accent-color, #065fd4);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.comments-load-more:hover {
  background: color-mix(in srgb, var(--accent-color, #065fd4) 14%, transparent);
}

.comments-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-secondary);
}
.comments-empty-icon {
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}
.comments-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.comments-empty-sub {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.comments-error {
  padding: 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.comments-loading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.comment-skeleton {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.comment-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
  animation: comments-shimmer 1.4s ease-in-out infinite;
}
.comment-skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.comment-skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: var(--color-bg-tertiary);
  animation: comments-shimmer 1.4s ease-in-out infinite;
}
@keyframes comments-shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ---- Light theme tweaks ---- */
[data-theme="light"] .comments-sort-menu,
[data-theme="light"] .comment-kebab-menu {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

/* ---- Mobile ---- */
@media (max-width: 700px) {
  .comments-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .comments-show-replies,
  .comment-replies,
  .comment-reply-form-slot {
    margin-left: 48px;
  }
  /* Touch has no hover state, so the per-comment menu trigger is always
     visible on mobile. */
  .comment-kebab-btn {
    opacity: 1;
  }
  /* iOS auto-zooms text inputs with font-size below 16px when they get
     focus. Bumping to 16px keeps the layout stable when the user taps the
     composer. */
  .comments-composer-input {
    font-size: 16px;
    padding: 10px 0;
  }
  .comments-btn {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 40px;
  }
  .comments-composer-actions {
    margin-top: 12px;
  }
  /* Make the composer fit comfortably alongside the avatar on narrow
     phones — 16px gap was bleeding the input off-screen. */
  .comments-composer {
    gap: 12px;
  }
  /* Sort dropdown / load-more sit a bit roomier. */
  .comments-load-more,
  .comments-load-more-replies {
    min-height: 40px;
    padding: 10px 16px;
  }
}

/* ---- "Show more replies" button (paginated reply loading) ---- */
.comments-load-more-replies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--accent-color, #065fd4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.comments-load-more-replies:hover {
  background: color-mix(in srgb, var(--accent-color, #065fd4) 14%, transparent);
}
.comments-load-more-replies:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- Comment modals (delete confirm, report reason) ---- */
.comments-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 1000);
  animation: fadeIn 0.15s ease;
}
.comments-modal {
  background: var(--color-bg-secondary, #1f1f1f);
  border: 1px solid var(--color-border, #303030);
  border-radius: 14px;
  padding: 24px;
  width: 90vw;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.comments-modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
}
.comments-modal-body {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary, #aaa);
}
.comments-modal-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  margin-bottom: 18px;
  background: var(--color-bg-tertiary, #121212);
  border: 1px solid var(--color-border, #303030);
  border-radius: 8px;
  color: var(--color-text-primary, #fff);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.comments-modal-textarea:focus {
  border-color: var(--accent-color, #065fd4);
}
.comments-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.comments-btn--danger {
  background: #d93025;
  color: #fff;
}
.comments-btn--danger:hover {
  filter: brightness(1.1);
}

/* ==============================================
   Layout v3 — video column + sticky playlist rail
   ==============================================
   .player-main
     └ .player-layout        grid: [primary] or [primary | sidebar]
         ├ .player-primary   cinema + title/description/comments
         │   ├ .player-cinema
         │   └ .player-content
         └ .player-sidebar   playlist rail (rendered only for multi-part
                             items; PlayerPlaylist adds body.has-playlist)

   Why: the rail used to be an unbounded flex column beside the description,
   so a 100-episode series stretched the page to thousands of pixels and the
   (viewport-tall) video scrolled away while you browsed the list. Now:

   Desktop ≥1025px, playlist  → YouTube-style two columns. The rail is pinned
                                 under the fixed header, never taller than the
                                 viewport, and the episode list scrolls INSIDE
                                 it. The video keeps a 16:9 box beside it.
   Desktop, theater mode       → full-bleed cinema; the rail moves under the
                                 video beside the description, still pinned.
   Desktop, single video       → unchanged full-bleed cinema.
   ≤1024px (tablet / phone)    → one column. The video is sticky under the
                                 header so it stays in view while you scroll
                                 the description or a long playlist; the
                                 playlist flows in the page (no nested
                                 scroll area to fight with on touch). */

.player-page {
  --player-header-h: 52px;
  --player-gutter: 24px;
  --player-sidebar-w: 400px;
}

.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "primary";
  width: 100%;
  flex: 1;
}

.player-primary {
  grid-area: primary;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.player-sidebar {
  grid-area: sidebar;
}

@media (max-width: 1280px) {
  .player-page {
    --player-sidebar-w: 360px;
  }
}

/* ---------- Desktop: two columns ---------- */
@media (min-width: 1025px) {
  .player-page.has-playlist:not(.theater-mode) .player-layout {
    grid-template-columns: minmax(0, 1fr) var(--player-sidebar-w);
    grid-template-areas: "primary sidebar";
    column-gap: var(--player-gutter);
    max-width: 1800px;
    margin: 0 auto;
    padding: calc(var(--player-header-h) + var(--player-gutter)) var(--player-gutter) 0;
  }

  /* The header no longer floats over a black cinema here, so give it a
     solid backdrop instead of the see-through gradient. */
  .player-page.has-playlist:not(.theater-mode) .player-header {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .player-page.has-playlist:not(.theater-mode) .player-cinema {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - var(--player-header-h) - var(--player-gutter) * 2);
    border-radius: var(--radius-lg);
  }

  /* The overlay bar was offset to clear the fixed header; the cinema now
     starts below the header, so pin the bar to the frame's top edge. */
  .player-page.has-playlist:not(.theater-mode) .player-controls-bar {
    top: 0;
  }

  .player-page.has-playlist:not(.theater-mode) .player-content {
    max-width: none;
    background: transparent;
  }

  .player-page.has-playlist:not(.theater-mode) .player-content-main {
    padding: 20px 0 32px;
  }

  .player-page.has-playlist:not(.theater-mode) .player-sidebar {
    position: sticky;
    top: calc(var(--player-header-h) + var(--player-gutter));
    align-self: start;
    max-height: calc(100vh - var(--player-header-h) - var(--player-gutter) * 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* Theater mode with a playlist: cinema spans both columns; the rail
     drops beside the description and stays pinned while it scrolls. */
  .player-page.has-playlist.theater-mode .player-layout {
    grid-template-columns: minmax(0, 1fr) var(--player-sidebar-w);
    grid-template-areas:
      "cinema  cinema"
      "content sidebar";
    column-gap: var(--player-gutter);
  }

  .player-page.has-playlist.theater-mode .player-primary {
    display: contents;
  }

  .player-page.has-playlist.theater-mode .player-cinema {
    grid-area: cinema;
  }

  .player-page.has-playlist.theater-mode .player-content {
    grid-area: content;
    max-width: none;
  }

  .player-page.has-playlist.theater-mode .player-sidebar {
    position: sticky;
    top: var(--player-gutter);
    align-self: start;
    max-height: calc(100vh - var(--player-gutter) * 2);
    margin: var(--player-gutter) var(--player-gutter) var(--player-gutter) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

/* ---------- Tablet + phone: one column, sticky video ---------- */
@media (max-width: 1024px) {
  .player-page {
    --player-stick-top: calc(var(--player-header-h) + env(safe-area-inset-top, 0px));
    /* Actual on-screen height of the cinema (16:9 of the full width, but
       never more than 45% of the viewport so landscape phones keep room
       for content underneath). Used to stack the sticky playlist header
       directly below the video. */
    --player-cinema-h: min(56.25vw, 45vh);
  }

  .player-page.theater-mode {
    --player-stick-top: 0px;
  }

  .player-layout {
    display: block;
  }

  /* Flatten the video column so the sticky cinema's containing block is
     the whole page column (video + description + playlist). Left as a
     real box, the cinema could only stick until the description ended
     and would scroll away as soon as the playlist began. */
  .player-primary {
    display: contents;
  }

  .player-cinema {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: var(--player-cinema-h);
    margin-top: var(--player-stick-top);
  }

  .player-page.theater-mode .player-cinema {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 0;
  }

  .player-content {
    max-width: none;
  }

  .player-sidebar {
    width: 100%;
    border-top: 1px solid var(--color-border);
  }

  /* Page-flow playlist: no nested scroll area on touch. */
  .player-sidebar-items {
    flex: none;
    overflow: visible;
  }

  .player-sidebar-header {
    position: sticky;
    top: calc(var(--player-stick-top) + var(--player-cinema-h));
    z-index: 6;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 16px;
    background: var(--color-bg-secondary);
  }

  .player-sidebar-toolbar {
    top: calc(var(--player-stick-top) + var(--player-cinema-h) + 56px);
    z-index: 5;
  }
}

/* Only pin the video when there is room under it; on a short landscape
   viewport a pinned 16:9 frame would hide everything below it. */
@media (max-width: 1024px) and (min-height: 560px) {
  .player-cinema {
    position: sticky;
    top: var(--player-stick-top);
    z-index: 30;
  }

  .player-page.theater-mode .player-cinema {
    top: 0;
  }
}

@media (max-width: 1024px) and (max-height: 559px) {
  /* No sticky video → nothing for the playlist header to stack under. */
  .player-sidebar-header,
  .player-sidebar-toolbar {
    position: static;
  }
}

/* ---------- Phone header: make room for the actions cluster ----------
   The centered logo is absolutely positioned, so on a narrow phone the
   Sign in / Sign up / bookmark / collection / theme cluster slid over it.
   The back arrow already leads home, so drop the logo, and (as the site
   header does) keep only "Sign in" — the sign-up path is one tap further. */
@media (max-width: 640px) {
  .player-logo {
    display: none;
  }

  .player-header .header-auth-link--primary {
    display: none;
  }

  .player-header-actions {
    gap: 4px;
  }
}