/* ===== Clean layout & styles ===== */
:root{--bg:#000;--muted:#b3b3b3}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#fff;font-family:system-ui,Arial,Helvetica,sans-serif}
header{padding:12px 16px;text-align:center}

/* Page wrapper */
.wrap{max-width:1200px;margin:0 auto;padding:12px}

/* Player */
#playerSection{display:none;text-align:center;margin:10px 0}
.player-wrap{position:relative;display:inline-block;width:100%;max-width:900px;}
#player{width:95%;max-width:900px;border-radius:8px;background:#000;display:block;}
.video-info{max-width:900px;margin:10px auto;text-align:left;padding:0 10px}
.backBtn{background:#222;color:#fff;border:0;padding:8px 12px;border-radius:6px;cursor:pointer;margin-top:8px}

/* Poster overlay styles */
.player-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  pointer-events: none;
  transition: opacity .25s ease;
  opacity: 1;
  z-index: 3;
}
.player-poster.hidden { opacity: 0; pointer-events: none; }

/* Play button overlay */
.poster-play-btn {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  width: 64px;
  height: 64px;
  font-size: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .2s ease, transform .15s ease;
}
.poster-play-btn.hidden { opacity: 0; transform: translate(-50%, -50%) scale(.9); pointer-events: none; }

/* Main grid */
#videoList{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 12px;
  padding: 0;
  list-style:none;
}

/* Card */
.card{
  width:100%;
  max-width:100%;
  background:transparent;
  border-radius:8px;
  overflow:hidden;
}

/* Thumbnail */
.image-display{
  width:100%;
  height:220px;
  background-size:cover;
  background-position:center;
  border-radius:8px;
  display:block;
  position:relative;
}

/* Time badge */
.time {
            position: absolute;
            bottom: 5px;
            right: 10px;
            color: white;
            padding: 5px;
            border-radius: 5px;
            font-size: 14px;
}

/* Info row */
.info{display:flex;gap:12px;align-items:center;padding:10px 8px}
.info img{width:50px;height:50px;border-radius:50%;object-fit:cover}
.details p{margin:0;color:#fff;font-weight:600}
.details small{display:block;color:var(--muted);font-size:13px}
.details sst{
    position: relative;
    margin-top: 35px;
    left: -75px;
    color:var(--muted);
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
}
/* Skeleton */
.skeleton-image{width:100%;height:220px;border-radius:8px}
.skeleton-avatar{width:50px;height:50px;border-radius:50%}
.content{display:none;opacity:0;transition:opacity .35s ease}

/* RELATED: vertical list container (we will render related via cloning from DOM) */
#relatedContainer { margin-top: 16px; max-width:920px; margin-left:auto; margin-right:auto; padding:0 10px; }
#relatedList { margin:0; padding:0; box-sizing:border-box; }

/* Responsive */
@media (max-width:1100px){
  #videoList{grid-template-columns: repeat(3, 1fr);}
  .image-display{height:200px}
  .player-poster { border-radius: 6px; }
}
@media (max-width:700px){
  #videoList{grid-template-columns: 1fr;}
  .image-display{height:180px}
  .poster-play-btn { width:56px; height:56px; font-size:24px; }
}
.gap {
    margin-bottom: 40px;
}
.gab {
    margin-top: 50px;
}