#player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  /*margin: 20px auto;*/
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

#player-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .5s ease, filter .5s ease;
}

#player-box .poster-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  pointer-events: none;
  transition: background .5s ease;
}

#player-box.blur img {
  filter: blur(8px) brightness(0.6);
}

#player-box.blur .poster-overlay {
  background: rgba(0,0,0,0.6);
}


.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 60px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 25px;
  z-index: 2;
  transition: transform .3s ease, background .3s ease;
  animation: pulse 2s infinite;
}

#player-box:hover .play-btn {
  transform: translate(-50%,-50%) scale(1.1);
  background: rgba(0,0,0,0.7);
}


@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 60px; height: 60px;
  border: 6px solid rgba(255,255,255,.3);
  border-top: 6px solid #ff4444;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
  z-index: 3;
  transition: opacity .3s ease;
}
@keyframes spin {100%{transform:translate(-50%,-50%) rotate(360deg)}}

#player-box iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .6s ease, transform .6s ease;
  z-index: 1;
}
#player-box iframe.show {
  opacity: 1;
  transform: scale(1);
}
#prevmore {display:none}