/* Plyr theming — match the ShortDrama accent and give the player a richer feel. */

.plyr {
  --plyr-color-main: #E5084A;
  --plyr-video-background: transparent;
  --plyr-video-control-color: rgba(255, 255, 255, 0.88);
  --plyr-video-control-color-hover: #ffffff;
  --plyr-video-control-background-hover: rgba(255, 255, 255, 0.14);
  --plyr-range-fill-background: #E5084A;
  --plyr-range-thumb-background: #ffffff;
  --plyr-range-track-height: 5px;
  --plyr-range-thumb-height: 14px;
  --plyr-range-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(229, 8, 74, 0.5);
  --plyr-tooltip-background: rgba(20, 20, 22, 0.95);
  --plyr-tooltip-color: #ffffff;
  --plyr-tooltip-radius: 6px;
  --plyr-tooltip-arrow-size: 4px;
  --plyr-control-icon-size: 17px;
  --plyr-control-spacing: 10px;
  --plyr-control-radius: 6px;
  --plyr-font-family: inherit;
  --plyr-font-size-small: 12px;
  --plyr-font-size-time: 12px;
  --plyr-menu-background: rgba(20, 20, 22, 0.96);
  --plyr-menu-color: rgba(255, 255, 255, 0.92);
  --plyr-menu-radius: 10px;
  --plyr-menu-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  --plyr-menu-arrow-color: rgba(20, 20, 22, 0.96);
  font-family: inherit;
}

/* Bottom control bar: gradient that fades into the video instead of a flat strip. */
.plyr--video .plyr__controls {
  padding: 28px 12px 10px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Big center play button: solid accent circle, no halo, no scale animation. */
.plyr--video .plyr__control--overlaid {
  background: #E5084A;
  border: none;
  padding: 18px;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
  opacity: 1;
  transition: background-color 0.15s ease;
}
.plyr--video .plyr__control--overlaid:hover,
.plyr--video .plyr__control--overlaid:focus {
  background: #FD4955;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}
.plyr--video .plyr__control--overlaid svg {
  width: 22px;
  height: 22px;
  position: relative;
  left: 1px; /* optical centering — play triangle is offset right of its bbox */
}

/* Control buttons: subtle hover/active feedback, no aggressive focus ring. */
.plyr__control:not(.plyr__control--overlaid) {
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  border-radius: 6px;
}
.plyr__control:not(.plyr__control--overlaid):active {
  transform: scale(0.92);
}
.plyr__control:not(.plyr__control--overlaid):focus-visible {
  outline: 2px solid rgba(229, 8, 74, 0.85);
  outline-offset: 1px;
}
/* Don't keep the hover background after a click (Plyr applies focus styles too). */
.plyr__control:not(.plyr__control--overlaid):focus:not(:focus-visible):not(:hover) {
  background: transparent;
}

/* Skip buttons: text labels (-5 / +5), slightly larger than icon controls. */
.plyr__control[data-plyr="rewind"] svg,
.plyr__control[data-plyr="fast-forward"] svg {
  width: 22px;
  height: 22px;
}

/* Progress bar polish */
.plyr__progress input[type="range"] {
  color: #E5084A;
}
.plyr__progress__buffer {
  color: rgba(255, 255, 255, 0.22);
}

/* Tooltip: rounded, slight blur, soft border */
.plyr__tooltip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Settings menu polish */
.plyr__menu__container {
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}
.plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
  background: #E5084A;
}
.plyr__menu__container .plyr__control:hover {
  background: rgba(229, 8, 74, 0.18);
  color: #ffffff;
}

/* Time labels: monospace look without changing the font */
.plyr__time {
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

/* === RICH FULLSCREEN OVERLAY ===
   Sits in the top-left of the .plyr container. Only visible when Plyr is in
   fullscreen, and fades in lockstep with the controls (so it disappears
   during quiet playback alongside the bottom bar). */
.plyr-brand-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: none;
  pointer-events: none;
  padding: 18px 22px;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
  color: #fff;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  transition: opacity 250ms ease;
}
.plyr.plyr--fullscreen-active .plyr-brand-overlay {
  display: block;
  opacity: 1;
}
.plyr.plyr--fullscreen-active.plyr--hide-controls .plyr-brand-overlay {
  opacity: 0;
}

.plyr-brand-overlay__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plyr-brand-overlay__brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: 0 4px 14px -3px rgba(229, 8, 74, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.plyr-brand-overlay__wordmark {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.plyr-brand-overlay__wordmark .accent {
  color: #E5084A;
}

.plyr-brand-overlay__meta {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 70%;
}
.plyr-brand-overlay__title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plyr-brand-overlay__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.plyr-brand-overlay__platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-weight: 600;
  font-size: 11px;
  backdrop-filter: blur(8px);
}
.plyr-brand-overlay__platform img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}

/* Larger title on big screens (desktop / TV fullscreen). */
@media (min-width: 768px) {
  .plyr-brand-overlay { padding: 26px 32px; padding-top: max(26px, env(safe-area-inset-top)); }
  .plyr-brand-overlay__brand img { width: 40px; height: 40px; border-radius: 11px; }
  .plyr-brand-overlay__wordmark { font-size: 17px; }
  .plyr-brand-overlay__title { font-size: 24px; }
  .plyr-brand-overlay__sub { font-size: 13px; }
  .plyr-brand-overlay__meta { margin-top: 18px; max-width: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .plyr-brand-overlay { transition: none; }
}