/* Pixelvision skin for Video.js 8. Loaded after video-js.min.css on channel pages. */

.player-shell .video-js {
  position: absolute; inset: 0; width: 100%; height: 100%;
  font-family: var(--font); font-size: 11px; color: #fff; background: #000;
}
.video-js .vjs-tech { object-fit: contain; }
.video-js .vjs-poster img { object-fit: cover; }

/* Big play button: round, centered, accent on hover. */
.video-js .vjs-big-play-button {
  top: 50%; left: 50%; width: 84px; height: 84px; margin: 0; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; line-height: 84px; font-size: 44px;
  background: rgba(10, 9, 14, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: background-color .2s, transform .2s;
}
.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus {
  background: var(--accent); color: var(--accent-ink); transform: translate(-50%, -50%) scale(1.06);
}
.video-js .vjs-big-play-button .vjs-icon-placeholder::before { line-height: 84px; }

/* Control bar: taller, on a soft gradient instead of a grey slab. */
.video-js .vjs-control-bar {
  height: 4.4em; padding: 0 0.8em;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
  align-items: center;
}
.video-js .vjs-control { width: 3.6em; }
.video-js .vjs-control .vjs-icon-placeholder::before,
.video-js .vjs-control::before { font-size: 2em; line-height: 2.2; }
.video-js .vjs-button:hover { color: var(--accent); }
.video-js .vjs-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }

.video-js .vjs-progress-control { position: absolute; left: 0.8em; right: 0.8em; top: -0.9em; width: auto; height: 1.8em; }
.video-js .vjs-progress-holder { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); margin: 0; }
.video-js .vjs-progress-control:hover .vjs-progress-holder { height: 6px; }
.video-js .vjs-load-progress { background: rgba(255, 255, 255, 0.28); border-radius: 999px; }
.video-js .vjs-load-progress div { background: transparent; }
.video-js .vjs-play-progress { background: var(--accent); border-radius: 999px; }
.video-js .vjs-play-progress::before { color: var(--accent); font-size: 1.2em; top: -0.35em; }

.video-js .vjs-volume-panel { align-items: center; }
.video-js .vjs-volume-bar { margin: 1.9em 0.6em; }
.video-js .vjs-volume-level { background: var(--accent); }
.video-js .vjs-slider { background: rgba(255, 255, 255, 0.22); border-radius: 999px; }

/* Live UI: red LIVE pill; grey when behind the live edge (click to jump back). */
.video-js .vjs-seek-to-live-control { width: auto; min-width: 0; padding: 0 0.8em; margin-left: auto; }
.video-js .vjs-seek-to-live-control .vjs-seek-to-live-text { font-weight: 700; letter-spacing: 0.06em; font-size: 1.15em; }
.video-js .vjs-seek-to-live-control .vjs-icon-placeholder { color: #8b8994; }
.video-js .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder { color: var(--live); }
.video-js .vjs-live-control { display: none; }
.video-js .vjs-time-control { font-size: 1.25em; line-height: 3.5; padding: 0 0.4em; min-width: 0; }

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background: rgba(20, 19, 26, 0.95); border-radius: 10px; bottom: 2em;
}
.video-js .vjs-menu li.vjs-selected, .video-js .vjs-menu li.vjs-selected:hover { background: var(--accent); color: var(--accent-ink); }

/* Title bar (now playing) at the top while controls are visible. */
.video-js .vjs-title-bar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  padding: 1.4em 1.6em 3em; font-size: 1.1em;
}
.video-js .vjs-title-bar-title { font-size: 1.6em; font-weight: 700; }
.video-js .vjs-title-bar-description { font-size: 1.15em; color: rgba(255, 255, 255, 0.8); margin-top: 0.3em; }

.video-js .vjs-loading-spinner { border-color: rgba(255, 255, 255, 0.2); }
.video-js .vjs-loading-spinner::before, .video-js .vjs-loading-spinner::after { border-top-color: var(--accent); }

/* Chromecast / AirPlay buttons */
.video-js .vjs-chromecast-button .vjs-icon-placeholder { width: 1.9em; height: 1.9em; }
.video-js .vjs-airplay-button .vjs-icon-placeholder { width: 1.9em; height: 1.9em; }

/* Channel bug (logo) in the corner. */
.pv-bug { position: absolute; top: 4%; right: 3%; width: 9%; max-width: 110px; min-width: 44px; opacity: 0.75; pointer-events: none; z-index: 1; transition: opacity .3s; }
.video-js.vjs-has-started.vjs-user-active .pv-bug { opacity: 0.4; }

/* The title bar repeats the page heading, so only show it in fullscreen. */
.video-js:not(.vjs-fullscreen) .vjs-title-bar { display: none; }

/* Overlays: unmute prompt and reconnecting state. */
.pv-unmute {
  position: absolute; left: 16px; top: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.95); color: #111; font: 600 14px/1 var(--font);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.pv-unmute .icon { width: 18px; height: 18px; }
.pv-unmute[hidden] { display: none; }
.pv-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  padding: 12px 18px; border-radius: 12px; background: rgba(10, 9, 14, 0.8); backdrop-filter: blur(8px);
  font: 600 15px/1.3 var(--font); color: #fff; text-align: center; pointer-events: none;
}
.pv-status[hidden] { display: none; }
.video-js.vjs-error .vjs-error-display { display: none; }

@media (max-width: 640px) {
  .player-shell .video-js { font-size: 10px; }
  .video-js .vjs-big-play-button { width: 68px; height: 68px; line-height: 68px; font-size: 36px; }
  .video-js .vjs-big-play-button .vjs-icon-placeholder::before { line-height: 68px; }
  .video-js .vjs-volume-panel { display: none; }
}