/* ===== Кастомный плеер ===== */
.player-wrap { --pl-ease: cubic-bezier(0.2, 0.8, 0.2, 1); user-select: none; -webkit-user-select: none; }
.player-wrap video { cursor: pointer; }
.player-wrap.idle { cursor: none; }
.player-wrap:fullscreen, .player-wrap:-webkit-full-screen { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; width: 100%; height: 100%; }
.player-wrap:fullscreen video, .player-wrap:-webkit-full-screen video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }

.pl-ui { position: absolute; inset: 0; pointer-events: none; }
.pl-ui button { font-family: inherit; }

/* центральная кнопка и индикатор буферизации */
.pl-big { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #0a0a0a; background: rgba(255,255,255,0.92); border: 0; cursor: pointer; pointer-events: auto; transition: opacity 0.3s ease, transform 0.4s var(--pl-ease); }
.pl-big svg { width: 34px; height: 34px; margin-left: 4px; }
.pl-big:hover { transform: scale(1.1); }
.playing .pl-big { opacity: 0; transform: scale(1.6); pointer-events: none; }
.pl-spinner { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: pl-spin 0.8s linear infinite; transition: opacity 0.2s ease; }
.buffering .pl-spinner { opacity: 1; }
.buffering .pl-big { opacity: 0; }
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* подсказка (±10 с, скорость, ...) */
.pl-toast { position: absolute; top: 18px; left: 50%; padding: 8px 18px; font-size: 13px; font-weight: 500; color: #fff; background: rgba(10,10,10,0.78); border: 1px solid rgba(255,255,255,0.15); border-radius: 18px; backdrop-filter: blur(6px); opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.2s ease, transform 0.3s var(--pl-ease); }
.pl-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* кнопки пропуска */
.pl-skips { position: absolute; right: 20px; bottom: 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: bottom 0.35s var(--pl-ease); }
.idle .pl-skips { bottom: 24px; }
.pl-skip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-size: 14px; font-weight: 600; color: #0a0a0a; background: rgba(255,255,255,0.94); border: 0; border-radius: 22px; cursor: pointer; pointer-events: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: pl-pop 0.4s var(--pl-ease) both; transition: transform 0.2s ease, background 0.2s ease; }
.pl-skip svg { width: 16px; height: 16px; }
.pl-skip:hover { background: #fff; transform: translateY(-2px) scale(1.04); }
.pl-skip:active { transform: scale(0.96); }
.pl-skip[hidden] { display: none; }
.pl-skip.ghost { color: #fff; background: rgba(10,10,10,0.8); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px); }
.pl-skip.ghost:hover { background: rgba(255,255,255,0.2); }
@keyframes pl-pop { from { opacity: 0; transform: translateX(24px) scale(0.9); } to { opacity: 1; transform: none; } }

/* панель управления */
.pl-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 10px; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); pointer-events: auto; transition: opacity 0.3s ease, transform 0.35s var(--pl-ease); }
.idle .pl-controls { opacity: 0; transform: translateY(14px); pointer-events: none; }

.pl-seek { position: relative; height: 18px; cursor: pointer; touch-action: none; }
.pl-seek::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; transition: height 0.15s ease, top 0.15s ease; }
.pl-seek:hover::before, .pl-seek.drag::before { top: 5px; height: 8px; }
.pl-buffer, .pl-progress { position: absolute; left: 0; top: 7px; height: 4px; width: 0; border-radius: 2px; pointer-events: none; transition: height 0.15s ease, top 0.15s ease; }
.pl-buffer { background: rgba(255,255,255,0.28); }
.pl-progress { background: #fff; }
.pl-seek:hover .pl-buffer, .pl-seek:hover .pl-progress, .pl-seek.drag .pl-buffer, .pl-seek.drag .pl-progress { top: 5px; height: 8px; }
.pl-mark { position: absolute; top: 7px; height: 4px; background: rgba(255,214,102,0.85); border-radius: 2px; pointer-events: none; transition: height 0.15s ease, top 0.15s ease; }
.pl-mark.ed { background: rgba(120,200,255,0.85); }
.pl-seek:hover .pl-mark, .pl-seek.drag .pl-mark { top: 5px; height: 8px; }
.pl-thumb { position: absolute; top: 9px; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(255,255,255,0.6); transform: scale(0); transition: transform 0.2s var(--pl-ease); pointer-events: none; }
.pl-seek:hover .pl-thumb, .pl-seek.drag .pl-thumb { transform: scale(1); }
.pl-tip { position: absolute; bottom: 26px; left: 0; padding: 4px 9px; font-size: 12px; color: #fff; background: rgba(10,10,10,0.85); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; transform: translateX(-50%); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.15s ease; }
.pl-seek:hover .pl-tip, .pl-seek.drag .pl-tip { opacity: 1; }

.pl-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.pl-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: transparent; border: 0; border-radius: 50%; cursor: pointer; transition: background 0.2s ease, transform 0.2s var(--pl-ease); }
.pl-btn svg { width: 22px; height: 22px; }
.pl-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
.pl-btn:active { transform: scale(0.92); }
.pl-time { margin: 0 10px; font-size: 13px; color: #d0d0d0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-spacer { flex: 1; }

.pl-vol { display: flex; align-items: center; }
.pl-vrange { width: 0; opacity: 0; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; cursor: pointer; transition: width 0.25s var(--pl-ease), opacity 0.2s ease, margin 0.25s ease; }
.pl-vol:hover .pl-vrange, .pl-vrange:focus-visible { width: 80px; opacity: 1; margin: 0 8px 0 2px; }
.pl-vrange::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.pl-vrange::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

/* меню настроек */
.pl-menu-wrap { position: relative; }
.pl-menu { position: absolute; right: 0; bottom: 50px; width: 220px; padding: 8px; background: rgba(20,20,20,0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; backdrop-filter: blur(10px); box-shadow: 0 12px 34px rgba(0,0,0,0.6); transform-origin: bottom right; animation: pl-menu-in 0.25s var(--pl-ease) both; }
.pl-menu[hidden] { display: none; }
@keyframes pl-menu-in { from { opacity: 0; transform: scale(0.9) translateY(8px); } to { opacity: 1; transform: none; } }
.pl-menu h5 { margin: 6px 10px 4px; font-size: 11px; font-weight: 500; color: #888; }
.pl-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 8px; }
.pl-opt { padding: 6px 12px; font-size: 12px; color: #fff; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; cursor: pointer; transition: all 0.2s ease; }
.pl-opt:hover { background: rgba(255,255,255,0.16); }
.pl-opt.active { background: #fff; color: #0a0a0a; border-color: #fff; font-weight: 600; }
.pl-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; font-size: 12px; color: #e0e0e0; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.08); cursor: pointer; }
.pl-toggle i { position: relative; width: 30px; height: 16px; background: rgba(255,255,255,0.2); border-radius: 8px; transition: background 0.2s ease; }
.pl-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: #fff; border-radius: 50%; transition: transform 0.2s var(--pl-ease); }
.pl-toggle.on i { background: #4ade80; }
.pl-toggle.on i::after { transform: translateX(14px); }

@media (max-width: 768px) {
  .pl-big { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .pl-controls { padding: 30px 8px 6px; }
  .pl-btn { width: 36px; height: 36px; }
  .pl-vol, .pl-pip { display: none; }
  .pl-time { margin: 0 6px; font-size: 12px; }
  .pl-skips { right: 10px; bottom: 80px; }
  .pl-skip { padding: 10px 16px; font-size: 13px; }
  .pl-menu { width: 200px; }
}

/* сообщение об ошибке */
.pl-error { position: absolute; top: 50%; left: 50%; width: min(86%, 460px); padding: 18px 22px; transform: translate(-50%, -50%); text-align: center; font-size: 14px; line-height: 1.6; color: #fff; background: rgba(10,10,10,0.9); border: 1px solid rgba(231,76,60,0.6); border-radius: 8px; pointer-events: auto; animation: pl-pop 0.4s var(--pl-ease) both; }
.pl-error[hidden] { display: none; }
.failed .pl-big { display: none; }