.ho-pl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.ho-pl--youtube { position: absolute; inset: 0; }
.ho-pl__yt { width: 100%; height: 100%; border: 0; display: block; background: #000; }

.ho-pl__video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.ho-pl__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.ho-pl__overlay > * { pointer-events: auto; }
.ho-pl--controls-hidden {
  cursor: none;
}
.ho-pl--controls-hidden .ho-pl__bar {
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
}
.ho-pl--controls-hidden .ho-pl__overlay > * {
  pointer-events: none;
}
.ho-pl--controls-hidden.ho-pl--paused .ho-pl__bar,
.ho-pl--controls-hidden.ho-pl--paused .ho-pl__bigplay {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ho-pl--controls-hidden.ho-pl--paused {
  cursor: default;
}
.ho-pl--controls-hidden .ho-pl__spinner--on {
  opacity: 1;
  pointer-events: none;
}
.ho-pl__spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.ho-pl__spinner--on { display: flex; }
.ho-pl__spinner span { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: ho-pl-bounce 1s infinite alternate; }
.ho-pl__spinner span:nth-child(2) { animation-delay: .15s; }
.ho-pl__spinner span:nth-child(3) { animation-delay: .3s; }
@keyframes ho-pl-bounce { to { transform: translateY(-8px); opacity: .5; } }
.ho-pl__bigplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border: none; border-radius: 50%;
  background: rgba(220,38,38,.92); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.45); transition: transform .15s;
}
.ho-pl__bigplay:hover { transform: translate(-50%,-50%) scale(1.06); }
.ho-pl__bigplay svg { width: 36px; height: 36px; margin-left: 4px; }
.ho-pl__bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.ho-pl__btn {
  width: 36px; height: 36px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ho-pl__btn:hover { background: rgba(255,255,255,.22); }
.ho-pl__btn--active { background: rgba(220,38,38,.55); }
.ho-pl__btn svg { width: 18px; height: 18px; }
.ho-pl__vol { width: 72px; accent-color: #dc2626; }
.ho-pl__live {
  margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #fca5a5; display: flex; align-items: center; gap: 6px;
}
.ho-pl__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: ho-pl-pulse 1.2s infinite; }
@keyframes ho-pl-pulse { 50% { opacity: .35; } }