/* ============================================================
   Player CSS — Vertical 9:16 com Cliffhanger e Controles
   ============================================================ */

/* ── Player Page ── */
.player-page{
  position:fixed;inset:0;z-index:150;
  background:#000;
  display:none;flex-direction:column;
}
.player-page.open{display:flex}

/* ── Player Container ── */
.player-wrap{
  flex:1;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:#000;overflow:hidden;
}

/* Proporção 9:16 centralizada */
.player-inner{
  position:relative;
  width:100%;
  max-width:calc(100dvh * 9/16);
  aspect-ratio:9/16;
  background:#111;
  overflow:hidden;
}

@media(min-width:600px){
  .player-inner{
    max-width:380px;
    border-radius:1rem;
    box-shadow:0 0 60px rgba(0,0,0,.8);
  }
}

.player-video{
  width:100%;height:100%;object-fit:cover;
  display:block;
}

/* ── Controls overlay ── */
.player-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  cursor:pointer;
}
.player-overlay.show-controls .player-controls,
.player-overlay.show-controls .player-top {
  opacity:1;pointer-events:all;
}

/* Top bar */
.player-top{
  padding:.75rem 1rem;
  display:flex;align-items:center;gap:.75rem;
  background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent);
  opacity:0;pointer-events:none;transition:.3s;
}
.player-close{
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;flex-shrink:0;
}
.player-drama-title{
  font-size:.82rem;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;
}
.player-ep-badge{
  background:rgba(168,85,247,.8);
  border-radius:100px;padding:.15rem .55rem;
  font-size:.68rem;font-weight:700;color:#fff;flex-shrink:0;
}

/* Center play/pause */
.player-center-btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.player-center-icon{
  width:64px;height:64px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.5rem;
  transform:scale(0);opacity:0;
  transition:.2s cubic-bezier(.4,0,.2,1);
}
.player-center-icon.pop{
  transform:scale(1);opacity:1;
  animation:popFade .5s ease forwards;
}
@keyframes popFade{
  0%{transform:scale(1.2);opacity:1}
  100%{transform:scale(0);opacity:0}
}

/* Bottom controls */
.player-controls{
  margin-top:auto;
  padding:.75rem 1rem 1rem;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  opacity:0;pointer-events:none;transition:.3s;
  display:flex;flex-direction:column;gap:.6rem;
}

.player-progress{
  display:flex;align-items:center;gap:.6rem;
}
.player-seek{
  flex:1;height:3px;
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.25);border-radius:2px;cursor:pointer;
}
.player-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--clr-primary);
  box-shadow:0 0 6px rgba(168,85,247,.8);
  cursor:pointer;
}
.player-time{
  font-size:.7rem;color:rgba(255,255,255,.7);white-space:nowrap;
}

.player-btns{
  display:flex;align-items:center;justify-content:space-between;
}
.player-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;transition:.2s;
  background:rgba(0,0,0,.3);backdrop-filter:blur(6px);
}
.player-btn:hover{background:rgba(255,255,255,.15)}
.player-btn-play{
  width:52px;height:52px;
  background:var(--grad-cta);box-shadow:0 4px 20px rgba(168,85,247,.5);
}
.player-btn-play:hover{opacity:.9;transform:scale(1.05)}
.player-volume{
  display:flex;align-items:center;gap:.4rem;
}
.volume-slider{
  width:60px;height:3px;
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.25);border-radius:2px;cursor:pointer;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:10px;height:10px;border-radius:50%;
  background:#fff;cursor:pointer;
}

/* Episode info side panel */
.player-ep-info{
  position:absolute;right:.75rem;bottom:5rem;
  display:flex;flex-direction:column;gap:.75rem;
  pointer-events:all;
}
.player-action{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  cursor:pointer;color:#fff;
}
.player-action-icon{
  width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  transition:.2s;font-size:1.1rem;
}
.player-action-icon:hover{background:rgba(255,255,255,.15)}
.player-action span{font-size:.62rem;color:rgba(255,255,255,.7)}
.player-action.fav .player-action-icon{color:#ec4899}
.player-action.fav.active .player-action-icon{background:rgba(236,72,153,.3)}

/* ── Cliffhanger Overlay ── */
.cliffhanger{
  position:absolute;inset:0;z-index:10;
  background:rgba(0,0,0,.88);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 1.5rem;text-align:center;
  opacity:0;pointer-events:none;transition:.4s;
}
.cliffhanger.open{opacity:1;pointer-events:all}
.cliffhanger-badge{
  background:var(--grad-cta);border-radius:100px;
  padding:.3rem .9rem;font-size:.7rem;font-weight:700;color:#fff;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:1rem;
  animation:pulse 2s ease infinite;
}
@keyframes pulse{50%{box-shadow:0 0 20px rgba(168,85,247,.5)}}
.cliffhanger h2{
  font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:.4rem;line-height:1.2;
}
.cliffhanger p{
  font-size:.85rem;color:rgba(255,255,255,.65);margin-bottom:1.75rem;max-width:260px;
}
.cliffhanger-timer{
  font-size:3rem;font-weight:900;
  background:var(--grad-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:.5rem;line-height:1;
}
.cliffhanger-timer-label{
  font-size:.72rem;color:rgba(255,255,255,.5);margin-bottom:1.5rem;
}
.cliffhanger-actions{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:240px}
.cliffhanger-next-title{
  font-size:.8rem;color:rgba(255,255,255,.7);margin-top:.5rem;
}

/* Purchase prompt inside player */
.player-purchase{
  position:absolute;inset:0;z-index:10;
  background:linear-gradient(to top,rgba(8,8,16,.98) 0%,rgba(8,8,16,.75) 50%,transparent 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:2rem 1.5rem;text-align:center;
  opacity:0;pointer-events:none;transition:.4s;
}
.player-purchase.open{opacity:1;pointer-events:all}
.player-purchase-lock{
  width:64px;height:64px;border-radius:50%;
  background:rgba(168,85,247,.2);border:2px solid rgba(168,85,247,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;margin-bottom:1rem;
  animation:lockPulse 2.5s ease infinite;
}
@keyframes lockPulse{50%{box-shadow:0 0 25px rgba(168,85,247,.4)}}
.player-purchase h3{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.player-purchase p{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:1.25rem;max-width:240px}
.player-purchase-price{
  font-size:1.5rem;font-weight:800;
  background:var(--grad-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:1rem;
}
.player-purchase-actions{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:260px}