/* Greybox player skin (Increment 1: custom player).
 * Scoped to the video-player area only (.gx-player-stage + Plyr overrides).
 * Surrounding modal chrome (header, episode bar) is untouched. Consumes the
 * Phase 1 tokens (css/tokens.css): near-black cinematic base, restrained
 * warm-amber accent, glass surfaces. Vanilla CSS, no framework. */

.gx-player-stage {
  position: relative;
  background: #000;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--gx-border-faint);
  box-shadow: var(--gx-shadow-pop);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 220px);
  width: 100%;
}

.gx-player-stage .plyr,
.gx-player-stage video {
  width: 100%;
  height: 100%;
}

.gx-player-stage video {
  background: #000;
  object-fit: contain;
}

/* ---- Plyr theme: Greybox, not a library demo ---- */
.gx-player-stage {
  --plyr-color-main: var(--gx-accent, #d0a24f);
  --plyr-video-background: #000;
  --plyr-menu-background: rgba(16, 16, 24, 0.96);
  --plyr-menu-color: var(--gx-text, #f4f3ee);
  --plyr-menu-border-color: rgba(255, 255, 255, 0.09);
  --plyr-menu-border-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --plyr-control-icon-size: 18px;
  --plyr-control-radius: 10px;
  --plyr-font-family: inherit;
  --plyr-range-track-height: 5px;
  --plyr-tooltip-background: rgba(16, 16, 24, 0.95);
  --plyr-tooltip-color: var(--gx-text, #f4f3ee);
  --plyr-captions-background: rgba(0, 0, 0, 0.72);
  --plyr-captions-text-color: #fff;
}

.gx-player-stage .plyr {
  font-family: inherit;
  border-radius: inherit;
}

.gx-player-stage .plyr__controls {
  background: linear-gradient(transparent, rgba(5, 5, 10, 0.82));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 2px;
}

.gx-player-stage .plyr__control {
  border-radius: var(--plyr-control-radius);
  transition: background var(--gx-transition), transform var(--gx-transition);
}

.gx-player-stage .plyr__control:hover {
  background: rgba(255, 255, 255, 0.1);
}

.gx-player-stage .plyr__control[aria-pressed="true"],
.gx-player-stage .plyr__control.plyr__tab-focus {
  background: var(--gx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--gx-accent-border);
}

.gx-player-stage .plyr__control--overlaid {
  background: rgba(10, 10, 16, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  transition: transform var(--gx-transition), background var(--gx-transition), opacity var(--gx-transition);
}

.gx-player-stage .plyr__control--overlaid:hover {
  background: var(--gx-accent);
  color: #0a0a10;
  transform: scale(1.04);
}

.gx-player-stage .plyr__progress__buffer {
  background: rgba(255, 255, 255, 0.18);
}

.gx-player-stage .plyr__menu__container .plyr__control {
  color: var(--gx-text);
}

.gx-player-stage .plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
  background: var(--gx-accent);
}

.gx-player-stage .plyr__captions {
  font-size: 1rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.gx-player-stage .plyr--loading .plyr__progress__container {
  opacity: 0.85;
}

/* Keyboard focus stays visible inside the stage. */
.gx-player-stage .plyr__control:focus-visible {
  outline: 2px solid var(--gx-accent);
  outline-offset: 2px;
}

/* ---- mobile ---- */
@media (max-width: 640px) {
  .gx-player-stage {
    border-radius: 0.65rem;
    aspect-ratio: 16 / 10;
    max-height: calc(100vh - 190px);
  }

  .gx-player-stage {
    --plyr-control-icon-size: 16px;
  }

  .gx-player-stage .plyr__controls {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .gx-player-stage .plyr__captions {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gx-player-stage .plyr__control,
  .gx-player-stage .plyr__control--overlaid {
    transition: none;
  }
}