#vp-overlay{position:fixed;inset:0;background:rgba(10,16,40,.75);z-index:99970;opacity:0;pointer-events:none;transition:opacity .35s ease}
#vp-overlay.vp-show{opacity:1;pointer-events:all}

#vp-card{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.92);
  z-index:99975;
  width:min(78vw,380px,calc(80vh * 9 / 16));
  aspect-ratio:9/16;
  border-radius:18px;
  overflow:hidden;
  background:#0F1A4A;
  box-shadow:0 12px 60px rgba(0,0,0,.55),0 0 0 1px rgba(182,164,39,.3);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
#vp-card.vp-show{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}

#vp-video{width:100%;height:100%;object-fit:cover;display:block;background:#0F1A4A}

#vp-close{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(10,16,40,.55);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;transition:background .2s,transform .2s;
}
#vp-close:hover{background:rgba(10,16,40,.8);transform:rotate(90deg)}

@media(max-width:380px){
  #vp-card{width:min(76vw,calc(78vh * 9 / 16))}
}