/*
  Базовые стили плеера. Всё, что касается внешнего вида,
  вынесено в переменные --pl-* — каждый макет перекрашивает их под себя.
*/
.pl {
  --pl-accent: #FCEDB0;
  --pl-on-accent: #3A2D54;
  --pl-ui-bg: rgba(20, 14, 34, 0.55);
  --pl-ui-ink: #fff;
  --pl-radius: 18px;

  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--pl-radius);
  background: #1b1430;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.pl__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  background: #1b1430;
}

.pl.is-fullscreen {
  aspect-ratio: auto;
  border-radius: 0;
}
.pl.is-fullscreen .pl__video { object-fit: contain; }

/* --- большая кнопка play --- */
.pl__big {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, rgba(26, 18, 45, 0.08), rgba(26, 18, 45, 0.42));
  cursor: pointer;
  transition: opacity 0.25s ease;
  padding: 0;
}
.pl__big span {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pl-accent);
  color: var(--pl-on-accent);
  box-shadow: 0 10px 30px rgba(20, 12, 40, 0.35);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.pl__big svg { width: 26px; height: 26px; fill: currentColor; margin-left: 2px; }
.pl:hover .pl__big span { transform: scale(1.07); }
.pl.is-playing .pl__big { opacity: 0; pointer-events: none; }
.pl.is-playing:hover .pl__big { opacity: 1; pointer-events: auto; background: none; }
.pl.is-playing:hover .pl__big span { background: rgba(255, 255, 255, 0.22); color: #fff; backdrop-filter: blur(6px); }

/* --- панель управления --- */
.pl__ui {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--pl-ui-bg);
  backdrop-filter: blur(10px);
  color: var(--pl-ui-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
/* Панель появляется только после старта — до этого карточка чистая, как обложка в ленте. */
.pl.is-started:hover .pl__ui,
.pl.is-started:focus-within .pl__ui,
.pl.is-started.is-playing .pl__ui {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pl__btn {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.pl__btn:hover { background: rgba(255, 255, 255, 0.16); }
.pl__btn svg { width: 17px; height: 17px; fill: currentColor; }

.pl__bar {
  flex: 1 1 auto;
  position: relative;
  height: 14px;
  min-width: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.pl__bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}
.pl__buf,
.pl__prog {
  position: absolute;
  left: 0;
  height: 3px;
  border-radius: 3px;
  width: 0;
}
.pl__buf { background: rgba(255, 255, 255, 0.3); }
.pl__prog { background: var(--pl-accent); }
.pl__prog::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pl-accent);
  transform: translateY(-50%) scale(0);
  transition: transform 0.18s ease;
}
.pl__bar:hover .pl__prog::after,
.pl__bar:focus-visible .pl__prog::after { transform: translateY(-50%) scale(1); }

.pl__time {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl__vol {
  flex: none;
  width: 0;
  opacity: 0;
  height: 3px;
  accent-color: var(--pl-accent);
  transition: width 0.22s ease, opacity 0.22s ease;
  cursor: pointer;
}
.pl__ui:hover .pl__vol { width: 46px; opacity: 1; }

@media (max-width: 640px) {
  .pl.is-started .pl__ui { opacity: 1; transform: none; pointer-events: auto; }
  .pl__time { display: none; }
  .pl__vol { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pl__big span,
  .pl__ui,
  .pl__prog::after { transition: none; }
}