/*
 * AnimeHub Player — стили.
 * Тёмная тема, акцент violet → fuchsia, шрифты Unbounded (бренд) / Inter (UI).
 * Все стили изолированы под .ahp, чтобы не конфликтовать с остальной версткой сайта.
 */

.ahp {
  --ahp-accent: #8b5cf6;
  --ahp-accent-2: #7c3aed;
  --ahp-fuchsia: #d946ef;
  --ahp-accent-soft: rgba(139, 92, 246, 0.35);
  --ahp-track: rgba(255, 255, 255, 0.18);
  --ahp-track-buffered: rgba(255, 255, 255, 0.32);
  --ahp-text: #f4f4f5;
  --ahp-text-dim: #a1a1aa;
  --ahp-radius: 18px;
  --ahp-font: 'Inter', system-ui, -apple-system, sans-serif;
  --ahp-font-display: 'Unbounded', var(--ahp-font);

  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--ahp-radius);
  overflow: hidden;
  font-family: var(--ahp-font);
  color: var(--ahp-text);
  -webkit-user-select: none;
  user-select: none;
  isolation: isolate;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}
.ahp:focus { outline: none; }
.ahp:focus-visible { box-shadow: 0 0 0 2px var(--ahp-accent), 0 20px 60px -20px rgba(0, 0, 0, 0.6); }

.ahp:fullscreen { border-radius: 0; aspect-ratio: auto; }
.ahp:-webkit-full-screen { border-radius: 0; }

.ahp__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* ---------- Затемняющий градиент под панелью ---------- */
.ahp__overlay--gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.ahp[data-controls="visible"] .ahp__overlay--gradient { opacity: 1; }

/* ---------- Бейдж бренда ---------- */
.ahp__brand {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ahp-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(244, 244, 245, 0.8);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.ahp[data-controls="visible"] .ahp__brand { opacity: 1; transform: translateY(0); }
.ahp__brand-accent { color: var(--ahp-accent); }
.ahp__brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ahp-accent), var(--ahp-fuchsia));
  box-shadow: 0 0 10px var(--ahp-accent-soft);
}

/* ---------- Центр: большая кнопка play + спиннер буферизации ---------- */
.ahp__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.ahp__big-play {
  pointer-events: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, var(--ahp-accent), var(--ahp-fuchsia));
  box-shadow: 0 10px 40px -6px var(--ahp-accent-soft), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(1);
  opacity: 0;
  transition: opacity 0.15s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.ahp__big-play:hover { transform: scale(1.08); box-shadow: 0 14px 50px -6px var(--ahp-accent-soft), 0 0 0 1px rgba(255, 255, 255, 0.15); }
.ahp__big-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 3px; }

.ahp[data-state="playing"] .ahp__big-play,
.ahp[data-state="buffering"] .ahp__big-play,
.ahp[data-state="loading"] .ahp__big-play {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.ahp__loading {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(244, 244, 245, 0.85);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ahp__spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ahp-accent);
  opacity: 1;
  animation: ahp-spin 0.8s linear infinite;
}
.ahp[data-state="buffering"] .ahp__loading,
.ahp[data-state="loading"] .ahp__loading { opacity: 1; }
@keyframes ahp-spin { to { transform: rotate(360deg); } }

/* ---------- Ошибка ---------- */
.ahp__error {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(9, 9, 11, 0.92);
  text-align: center;
  padding: 24px;
}
.ahp__error[hidden] { display: none !important; }
.ahp__error-text { margin: 0; color: var(--ahp-text-dim); font-size: 14px; max-width: 320px; }
.ahp__error-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(248, 113, 113, 0.45); color: #fca5a5; font-size: 20px; font-weight: 800; }
.ahp__retry {
  padding: 10px 22px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--ahp-accent), var(--ahp-accent-2));
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px var(--ahp-accent-soft);
  transition: filter 0.15s ease;
}
.ahp__retry:hover { filter: brightness(1.1); }

/* ---------- Панель управления ---------- */
.ahp__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ahp[data-controls="hidden"] .ahp__controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ahp[data-controls="hidden"] { cursor: none; }
.ahp[data-state="error"] .ahp__controls,
.ahp[data-state="error"] .ahp__center { display: none; }

/* ---------- Полоса перемотки ---------- */
.ahp__seek { position: relative; padding: 7px 2px; cursor: pointer; }
.ahp__seek-track {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: var(--ahp-track);
  transition: height 0.12s ease;
}
.ahp__seek:hover .ahp__seek-track,
.ahp__seek.is-scrubbing .ahp__seek-track { height: 6px; }
.ahp__seek-buffered {
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  border-radius: 99px; background: var(--ahp-track-buffered);
}
.ahp__seek-progress {
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  border-radius: 99px; background: linear-gradient(90deg, var(--ahp-accent), var(--ahp-fuchsia));
}
.ahp__seek-thumb {
  position: absolute; top: 50%; left: 0%;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--ahp-accent-soft), 0 2px 8px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
}
.ahp__seek:hover .ahp__seek-thumb,
.ahp__seek.is-scrubbing .ahp__seek-thumb { transform: translate(-50%, -50%) scale(1); }
.ahp__seek-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ahp__seek-tooltip {
  position: absolute; bottom: 20px; transform: translateX(-50%);
  background: #18181b; border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px; border-radius: 8px; font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.ahp__seek.is-hovering .ahp__seek-tooltip,
.ahp__seek.is-scrubbing .ahp__seek-tooltip { opacity: 1; }

/* ---------- Нижняя панель кнопок ---------- */
.ahp__bar { display: flex; align-items: center; gap: 4px; }

.ahp__btn {
  background: transparent; border: none; color: var(--ahp-text);
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.ahp[data-state="playing"] .ahp__icon--play { display: none !important; }
.ahp[data-state="playing"] .ahp__icon--pause { display: block !important; }
.ahp:not([data-state="playing"]) .ahp__icon--pause { display: none !important; }
.ahp__btn:hover { background: rgba(255, 255, 255, 0.1); }
.ahp__btn:active { transform: scale(0.92); }
.ahp__icon { width: 20px; height: 20px; fill: currentColor; }
.ahp__icon--outline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Громкость ---------- */
.ahp__volume { display: flex; align-items: center; }
.ahp__volume-input {
  width: 0; opacity: 0; height: 4px; margin-left: 0; cursor: pointer;
  accent-color: var(--ahp-accent);
  transition: width 0.18s ease, opacity 0.18s ease, margin-left 0.18s ease;
}
.ahp__volume:hover .ahp__volume-input,
.ahp__volume:focus-within .ahp__volume-input { width: 72px; opacity: 1; margin-left: 4px; }

/* ---------- Время ---------- */
.ahp__time {
  font-size: 12.5px; color: var(--ahp-text-dim); font-variant-numeric: tabular-nums;
  display: flex; gap: 4px; white-space: nowrap; margin-left: 4px;
}
.ahp__time-sep { opacity: 0.5; }

.ahp__spacer { flex: 1; }

/* ---------- Качество ---------- */
.ahp__quality { position: relative; }
.ahp__btn--quality { width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 600; }
.ahp__quality-menu {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 5;
  background: rgba(24, 24, 27, 0.92); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
  padding: 6px; min-width: 110px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.6);
}
.ahp__quality-menu[hidden] { display: none !important; }
.ahp__quality-option {
  background: transparent; border: none; color: var(--ahp-text-dim);
  font-size: 13px; text-align: left; padding: 7px 10px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ahp__quality-option:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ahp__quality-option.is-active { color: #fff; }
.ahp__quality-option.is-active::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ahp-accent); box-shadow: 0 0 6px var(--ahp-accent-soft);
}

/* ---------- Адаптив ---------- */
@media (max-width: 520px) {
  .ahp__controls { padding: 8px 10px 10px; }
  .ahp__btn { width: 30px; height: 30px; }
  .ahp__time { font-size: 11.5px; }
  .ahp__volume:hover .ahp__volume-input,
  .ahp__volume:focus-within .ahp__volume-input { width: 46px; }
  .ahp__brand { font-size: 11px; top: 12px; left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ahp * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}