/* ========================= BASE ========================= */
body.body{
  margin:0;
  padding:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:radial-gradient(60% 45% at 50% 15%, rgba(255,255,255,0.10), transparent 60%),
             radial-gradient(45% 35% at 15% 85%, rgba(255,45,85,0.08), transparent 60%),
             radial-gradient(45% 35% at 85% 85%, rgba(0,180,255,0.06), transparent 60%),
             linear-gradient(180deg, #15111f 0%, #06060a 60%, #000 100%);
}

/* ========================= CONTAINER ========================= */
.container{
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg,#121212,#090909);
  border-radius:22px;
  overflow:visible;
  box-shadow:0 18px 70px rgba(0,0,0,0.75),
             inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ========================= VIDEO HEAD ========================= */
.video-head{ padding:14px 16px 10px; }

.video-title{
  font-size:18px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
}

.video-meta{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:rgba(255,255,255,.7);
  margin-bottom:8px;
}

.meta-live{ color:#ff375f; font-weight:700; }

.video-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.video-tags span{
  background:rgba(255,255,255,.08);
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  color:#fff;
}

/* ========================= MAIN PLAYER ========================= */
.main-player{
  position:relative;
  margin:14px;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06),
             0 10px 30px rgba(0,0,0,0.6);
}

/* subtle glow */
.main-player::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), transparent 60%);
  opacity:0;
  animation:playerGlow 3.6s infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes playerGlow{
  0%{opacity:0}
  40%{opacity:.25}
  70%{opacity:.15}
  100%{opacity:0}
}

/* base thumbnail */
.thumbnail{
  width:100%;
  height:100%;
  background:#000 center/cover no-repeat;
}

/* intro video */
.intro-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  z-index:2;
}
.main-player.is-intro .intro-video{ opacity:1; }

/* FX noise */
.fx-noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:0;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter>\
<rect width='120' height='120' filter='url(%23n)' opacity='0.04'/>\
</svg>");
  animation:noiseShift .6s infinite;
}
@keyframes noiseShift{
  0%{transform:translate(0,0)}
  50%{transform:translate(-1px,1px)}
  100%{transform:translate(0,0)}
}

/* BIG CTA TEXT */
.big-cta{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:6;
  opacity:0;
}
.big-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,
            rgba(0,0,0,.35) 0%,
            rgba(0,0,0,.65) 55%,
            rgba(0,0,0,.25) 100%);
  z-index:-1;
}
.big-cta-text{
  position:relative;
  margin-top:92px; /* текст ниже кнопки */
  color:#fff;
  font-weight:700;
  font-size:14px;
  background:rgba(0,0,0,.45);
  padding:8px 12px;
  border-radius:10px;
  text-shadow:0 2px 10px rgba(0,0,0,0.7);
}

/* ===== MAIN play triangle ONLY ===== */
.main-player .play-button.main-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:8;
  opacity:0;
}
.main-player .play-button.main-play::after{
  content:'';
  border-left:26px solid rgba(255,255,255,0.95);
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.7));
}

/* progress bar */
.progress-bar{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:42px;
  display:flex;
  align-items:center;
  padding-left:14px;
  padding-right:56px;
  box-sizing:border-box;
  background:linear-gradient(0deg,rgba(0,0,0,0.85),rgba(0,0,0,0.2) 60%,transparent);
  z-index:7;
}
.play-icon{
  width:0;height:0;
  border-left:9px solid rgba(255,255,255,0.95);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  opacity:.9;
}
.progress{
  flex:1;
  height:5px;
  margin:0 12px;
  background:rgba(255,255,255,0.25);
  border-radius:3px;
  position:relative;
}
.progress-filled{
  width:35%;
  height:100%;
  background:rgba(255,255,255,0.95);
  border-radius:3px;
}
.progress-knob{
  position:absolute;
  top:-4px;
  left:35%;
  width:12px;
  height:12px;
  background:rgba(255,255,255,0.95);
  border-radius:50%;
  transform:translateX(-50%);
}
.duration{
  position:absolute;
  right:14px;
  bottom:9px;
  font-size:14px;
  color:#fff;
  opacity:.92;
  pointer-events:none;
}

/* fake motion while "playing" */
@keyframes fakeVideoMotion{
  0%{transform:scale(1) translate(0,0)}
  20%{transform:scale(1.01) translate(-1px,0)}
  45%{transform:scale(1.015) translate(1px,-1px)}
  70%{transform:scale(1.01) translate(0,1px)}
  100%{transform:scale(1) translate(0,0)}
}
.main-player:not(.is-paused) .thumbnail{
  animation:fakeVideoMotion 3.4s infinite linear;
  will-change:transform;
}

/* ========================= VIDEO ACTIONS ========================= */
.video-actions{
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:10px 6px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#111,#0b0b0b);
}
.action-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:13px;
  color:rgba(255,255,255,.75);
  cursor:default;
}
.action-item span{ font-size:12px; opacity:.85; }

/* ========================= PLAYLIST ========================= */
.playlist{
  padding:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.video-item{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06),
             0 6px 18px rgba(0,0,0,0.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.video-item:hover{
  transform:scale(1.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08),
             0 12px 30px rgba(0,0,0,0.75);
}
.video-item .thumbnail{
  width:100%;
  height:100%;
  background:#111 center/cover no-repeat;
}
.video-item .overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.48) 100%);
}

/* IMPORTANT: миниатюры используют обычный .play-button как круг */
.video-item .overlay .play-button{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-item .overlay .play-button::after{
  content:'';
  margin-left:3px;
  border-left:14px solid rgba(255,255,255,0.95);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

.info{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#fff;
}
.lock,.views,.hd-badge{
  background:rgba(0,0,0,0.62);
  padding:3px 7px;
  border-radius:6px;
  font-weight:600;
}
.new-badge{
  background:#ff2d55;
  padding:3px 7px;
  border-radius:6px;
  font-size:10px;
  font-weight:800;
}

/* ========================= POP TUBE FIX ========================= */
.playlist,
.video-item,
.video-item *{
  pointer-events:none;
}

/* ========================= STATES (IMPORTANT) ========================= */
/* start: nothing */
.main-player .big-cta{ opacity:0; }
.main-player .fx-noise{ opacity:0; }
.main-player .play-button.main-play{ opacity:0; }

/* paused: show CTA + noise + blinking PLAY */
.main-player.is-paused .big-cta{ opacity:1; }
.main-player.is-paused .fx-noise{ opacity:1; }
.main-player.is-paused .play-button.main-play{ opacity:1; }

.main-player.is-paused .play-button.main-play::after{
  animation: playBlink 1.15s infinite ease-in-out;
}
@keyframes playBlink{
  0%   { transform: scale(1); opacity: .35; }
  50%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: .35; }
}