/* Player modal shared layer.
   Keep page-specific behavior in JS; visual rhythm lives here. */

:root {
  --cost-player-bg: #050507;
  --cost-player-panel: #111118;
  --cost-player-border: rgba(255,255,255,.12);
  --cost-player-muted: rgba(255,255,255,.72);
  --cost-player-red: #e8001c;
}

.player-overlay,
.modal#playerModal {
  padding: clamp(14px, 3vw, 32px) !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(232,0,28,.08), transparent 36%),
    rgba(0,0,0,.94) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  overflow: auto !important;
}

.player-box,
.modal#playerModal .player {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, var(--cost-player-panel), var(--cost-player-bg)) !important;
  border: 1px solid var(--cost-player-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.86) !important;
}

.player-top,
.modal#playerModal .ptop {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px 14px !important;
  padding: 16px 18px !important;
  background: rgba(17,17,24,.98) !important;
  border-bottom: 1px solid var(--cost-player-border) !important;
}

.player-title,
.modal#playerModal .ptitle {
  min-height: 34px !important;
  padding-right: 50px !important;
  color: #fff !important;
  font: 800 13px/1.35 'Outfit', sans-serif !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.player-actions {
  grid-column: 1 / -1 !important;
  order: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding-right: 52px !important;
}

.player-actions .episode-select,
.player-actions .ep-select,
.player-actions .mini-action,
.player-actions .player-mini,
.player-actions .player-provider-select,
.player-actions select,
.player-actions button {
  min-height: 38px !important;
  max-width: min(220px, 48vw) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%) right 9px center / 6px 6px no-repeat,
    rgba(255,255,255,.08) !important;
  border: 1px solid var(--cost-player-border) !important;
  border-radius: 999px !important;
  color: #fff !important;
  cursor: pointer !important;
  font: 800 12px/1.15 'Outfit', sans-serif !important;
  padding: 9px 30px 9px 13px !important;
  white-space: nowrap !important;
  color-scheme: dark !important;
}

.player-actions button.episode-select,
.player-actions button.ep-select,
.player-actions button.mini-action,
.player-actions button.player-mini,
.player-actions button {
  background: rgba(255,255,255,.08) !important;
  padding-right: 13px !important;
}

.player-actions .episode-select:hover,
.player-actions .ep-select:hover,
.player-actions .mini-action:hover,
.player-actions .player-mini:hover,
.player-actions .episode-select.active,
.player-actions .ep-select.active,
.player-actions .mini-action.active,
.player-actions .player-mini.active {
  background-color: var(--cost-player-red) !important;
  border-color: var(--cost-player-red) !important;
  color: #fff !important;
}

.player-actions select:focus,
.player-actions button:focus-visible {
  outline: 2px solid rgba(255,255,255,.55) !important;
  outline-offset: 2px !important;
}

.player-actions option {
  background: #111118 !important;
  color: #fff !important;
}

.player-close,
.modal#playerModal .close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--cost-player-border) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.player-close:hover,
.modal#playerModal .close:hover {
  background: var(--cost-player-red) !important;
  border-color: var(--cost-player-red) !important;
}

.player-frame-wrap,
.modal#playerModal .frame {
  position: relative !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 260px !important;
  max-height: calc(100dvh - 170px) !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
  border-top: 1px solid var(--cost-player-border) !important;
  overflow: hidden !important;
}

.player-frame-wrap iframe,
.modal#playerModal .frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.player-frame-wrap:fullscreen,
.player-frame-wrap:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  background: #000 !important;
}

.player-frame-wrap:fullscreen iframe,
.player-frame-wrap:-webkit-full-screen iframe {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 700px) {
  .player-overlay,
  .modal#playerModal {
    padding: 10px !important;
  }

  .player-box,
  .modal#playerModal .player {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
  }

  .player-top,
  .modal#playerModal .ptop {
    padding: 14px !important;
    gap: 10px !important;
  }

  .player-title,
  .modal#playerModal .ptitle {
    padding-right: 46px !important;
  }

  .player-actions {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-right: 0 !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

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

  .player-actions .episode-select,
  .player-actions .ep-select,
  .player-actions .mini-action,
  .player-actions .player-mini,
  .player-actions .player-provider-select,
  .player-actions select,
  .player-actions button {
    flex: 0 0 auto !important;
    max-width: 190px !important;
  }

  .player-close,
  .modal#playerModal .close {
    top: 12px !important;
    right: 12px !important;
  }

  .player-frame-wrap,
  .modal#playerModal .frame {
    min-height: 220px !important;
    max-height: calc(100dvh - 150px) !important;
    aspect-ratio: 16 / 10 !important;
  }

  body.profile-page nav [data-profile-avatar-btn],
  body:has(#profileArea) nav [data-profile-avatar-btn] {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .player-overlay,
  .modal#playerModal {
    align-items: center !important;
  }

  .player-box,
  .modal#playerModal .player {
    border-radius: 14px !important;
  }

  .player-actions .episode-select,
  .player-actions .ep-select,
  .player-actions .mini-action,
  .player-actions .player-mini,
  .player-actions .player-provider-select,
  .player-actions select,
  .player-actions button {
    min-height: 36px !important;
    font-size: 11px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .player-frame-wrap,
  .modal#playerModal .frame {
    min-height: 210px !important;
  }
}