/* Custom-chrome video player wrapping the official YouTube IFrame API */

.site-player{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  user-select: none;
}
.site-player-frame{ position:absolute; inset:0; }
.site-player-frame iframe{ width:100%; height:100%; display:block; border:0; pointer-events:none; }

.site-player-poster{
  position:absolute; inset:0;
  background-size: cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index: 2;
}
.site-player-poster::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(11,12,20,.65), rgba(11,12,20,.15) 55%);
}
.site-player-playbtn{
  position:relative; z-index:1;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); border: none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 34px -6px rgba(58,92,255,.6);
  transition: transform .15s ease;
  font-size: 0;
}
.site-player-poster:hover .site-player-playbtn{ transform: scale(1.08); }
.site-player-playbtn::after{
  content:""; width:0; height:0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #0b0c14;
  margin-left: 5px;
}

.site-player-controls{
  position:absolute; left:0; right:0; bottom:0; z-index: 3;
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(11,12,20,.85), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.site-player.is-active .site-player-controls{ opacity:1; transform:none; pointer-events:auto; }

.spc-btn{
  width: 32px; height: 32px; border-radius: 50%; flex-shrink:0;
  border: none; background: rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px;
  transition: background .15s ease;
}
.spc-btn:hover{ background: rgba(255,255,255,.22); }

.spc-progress{
  flex:1; height: 5px; border-radius: 100px; background: rgba(255,255,255,.22);
  cursor:pointer; position:relative;
}
.spc-progress-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  border-radius: 100px; background: var(--accent);
}
.spc-time{ font-size: 12px; color:#fff; font-variant-numeric: tabular-nums; white-space:nowrap; }

.site-player.is-buffering .site-player-controls{ opacity: .6; }