/* ===== PVP Developer Player — Frontend Styles ===== */

.pvp-container{
    position:relative;margin:20px auto;
    border-radius:var(--pvp-radius,16px);
    overflow:hidden;background:#000;
    box-shadow:0 0 0 1px rgba(255,255,255,.06),0 8px 40px rgba(0,0,0,.5),0 0 80px color-mix(in srgb, var(--pvp-accent,#6366f1) 10%, transparent);
    transition:box-shadow .4s ease;
}
.pvp-container:hover{
    box-shadow:0 0 0 1px rgba(255,255,255,.1),0 12px 50px rgba(0,0,0,.6),0 0 100px color-mix(in srgb, var(--pvp-accent,#6366f1) 15%, transparent);
}

/* Video.js sizing */
.pvp-container .video-js{
    width:100%!important;height:0!important;
    padding-top:var(--pvp-padding,56.25%);
    background:#000;
    border-radius:var(--pvp-radius,16px);
    overflow:hidden;
}
.pvp-container .video-js .vjs-tech{
    position:absolute;top:0;left:0;width:100%;height:100%;
    object-fit:cover;
    border-radius:var(--pvp-radius,16px);
}
.pvp-container .video-js .vjs-poster{
    background-color:#0a0a0f;
    border-radius:var(--pvp-radius,16px);
}

/* Hide default big play button */
.pvp-container .video-js .vjs-big-play-button{display:none!important}

/* ===== DARK THEME ===== */
.pvp-theme-dark .video-js .vjs-control-bar{
    background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 70%,transparent 100%)!important;
    height:52px!important;padding:0 12px;
    border-radius:0 0 var(--pvp-radius,16px) var(--pvp-radius,16px);
    opacity:0;transition:opacity .3s ease;
}
.pvp-theme-dark .video-js:hover .vjs-control-bar,
.pvp-theme-dark .video-js.vjs-has-started.vjs-user-active .vjs-control-bar{opacity:1}
.pvp-theme-dark .video-js .vjs-play-progress{background:linear-gradient(90deg,var(--pvp-accent,#6366f1),color-mix(in srgb, var(--pvp-accent,#6366f1) 60%, #fff))!important}
.pvp-theme-dark .video-js .vjs-load-progress{background:rgba(255,255,255,.15)!important}
.pvp-theme-dark .video-js .vjs-load-progress div{background:rgba(255,255,255,.08)!important}
.pvp-theme-dark .video-js .vjs-slider{background:rgba(255,255,255,.12)!important}
.pvp-theme-dark .video-js .vjs-volume-level{background:linear-gradient(90deg,var(--pvp-accent,#6366f1),color-mix(in srgb, var(--pvp-accent,#6366f1) 60%, #fff))!important}
.pvp-theme-dark .video-js .vjs-time-control{font-size:12px;letter-spacing:.5px}

/* ===== LIGHT THEME ===== */
.pvp-theme-light{background:#f8f9fa}
.pvp-theme-light .video-js .vjs-control-bar{
    background:linear-gradient(0deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.7) 70%,transparent 100%)!important;
    height:52px!important;padding:0 12px;
    border-radius:0 0 var(--pvp-radius,16px) var(--pvp-radius,16px);
    opacity:0;transition:opacity .3s ease;
    color:#1f2937!important;
}
.pvp-theme-light .video-js:hover .vjs-control-bar,
.pvp-theme-light .video-js.vjs-has-started.vjs-user-active .vjs-control-bar{opacity:1}
.pvp-theme-light .video-js .vjs-play-progress{background:var(--pvp-accent,#6366f1)!important}
.pvp-theme-light .video-js .vjs-slider{background:rgba(0,0,0,.1)!important}
.pvp-theme-light .video-js .vjs-volume-level{background:var(--pvp-accent,#6366f1)!important}
.pvp-theme-light .video-js .vjs-icon-placeholder::before{color:#1f2937!important}
.pvp-theme-light .video-js .vjs-time-control{color:#4b5563!important;font-size:12px}

/* ===== MINIMAL THEME ===== */
.pvp-theme-minimal .video-js .vjs-control-bar{
    background:rgba(0,0,0,.5)!important;
    height:40px!important;padding:0 8px;
    border-radius:0 0 var(--pvp-radius,16px) var(--pvp-radius,16px);
    opacity:0;transition:opacity .3s ease;
}
.pvp-theme-minimal .video-js:hover .vjs-control-bar,
.pvp-theme-minimal .video-js.vjs-has-started.vjs-user-active .vjs-control-bar{opacity:1}
.pvp-theme-minimal .video-js .vjs-play-progress{background:var(--pvp-accent,#6366f1)!important}
.pvp-theme-minimal .video-js .vjs-slider{background:rgba(255,255,255,.2)!important}

/*
 * FIX B: During ad playback, HIDE Video.js custom controls entirely
 * so they cannot overlap IMA SDK's Skip, Countdown, Mute, Close buttons.
 * IMA SDK renders its own ad UI — we must not interfere.
 * Google considers overlapping "Ad Interference" violation.
 */
.pvp-ad-active .video-js .vjs-control-bar{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
}
/*
 * During ad: content video is paused by JS.
 * We do NOT hide .vjs-tech with opacity because on some browsers (iOS Safari)
 * IMA SDK reuses the same <video> element for the ad — hiding it = blank screen.
 * Instead, the ad container (z-index:100 + background:#000) covers content visually.
 */
.pvp-ad-active .video-js .vjs-tech{
    pointer-events:none!important;
}
/* Ensure IMA ad container is above everything and properly sized */
.pvp-container .video-js .vjs-ima-ad-container{
    z-index:100!important;
    position:absolute!important;
    top:0!important;left:0!important;
    width:100%!important;height:100%!important;
    background:#000!important;
}
/* Force ad video elements to be visible and fill container (iOS fix) */
.pvp-container .video-js .vjs-ima-ad-container video,
.pvp-container .video-js .vjs-ima-ad-container iframe{
    position:absolute!important;
    top:0!important;left:0!important;
    width:100%!important;height:100%!important;
    object-fit:contain!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
/* IMA ad container inner divs must not hide content */
.pvp-container .video-js .vjs-ima-ad-container div{
    display:block!important;
    visibility:visible!important;
}
/* iOS: Ensure ads-manager container fills the player */
.pvp-container .video-js > div[style*="ads-manager"],
.pvp-container .video-js .ima-ad-container{
    position:absolute!important;
    top:0!important;left:0!important;
    width:100%!important;height:100%!important;
}
/* After ad ends (.pvp-ad-active is removed), controls show normally */

/* ===== PLAY OVERLAY ===== */
.pvp-overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
    cursor:pointer;
    background:radial-gradient(ellipse at center,rgba(10,10,15,.2) 0%,rgba(10,10,15,.7) 100%);
    transition:opacity .5s ease,visibility .5s ease;
}
.pvp-overlay.pvp-hidden{opacity:0;visibility:hidden;pointer-events:none}

/* Play button base */
.pvp-play-btn{
    position:relative;border-radius:50%;
    display:flex;justify-content:center;align-items:center;
    transition:all .3s ease;
}
.pvp-play-btn svg{
    width:35%;height:35%;margin-left:5%;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.pvp-play-btn:hover{transform:scale(1.08)}

/* Glass style */
.pvp-btn-glass{
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:2px solid rgba(255,255,255,.18);
}
.pvp-btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}

/* Solid style */
.pvp-btn-solid{
    background:var(--pvp-accent,#6366f1);
    border:none;
    box-shadow:0 4px 20px color-mix(in srgb, var(--pvp-accent,#6366f1) 40%, transparent);
}
.pvp-btn-solid:hover{box-shadow:0 6px 30px color-mix(in srgb, var(--pvp-accent,#6366f1) 50%, transparent)}

/* Outline style */
.pvp-btn-outline{
    background:transparent;
    border:2px solid rgba(255,255,255,.5);
}
.pvp-btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Pulse ring */
.pvp-pulse-ring{
    position:absolute;inset:0;border-radius:50%;
    border:2px solid rgba(255,255,255,.12);
    animation:pvpPulse 2s ease-out infinite;
    pointer-events:none;
}
@keyframes pvpPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* Overlay text */
.pvp-overlay-text{
    color:rgba(255,255,255,.7);font-size:14px;font-weight:500;
    letter-spacing:.5px;text-shadow:0 1px 4px rgba(0,0,0,.4);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ===== AD BADGE ===== */
.pvp-ad-badge{
    position:absolute;z-index:60;
    color:#fff;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
    background:linear-gradient(135deg,color-mix(in srgb, var(--pvp-accent,#6366f1) 80%, transparent),color-mix(in srgb, var(--pvp-accent,#6366f1) 60%, #a78bfa));
    backdrop-filter:blur(10px);padding:5px 14px;border-radius:6px;
    display:none;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.pvp-badge-topleft{top:16px;left:16px}
.pvp-badge-topright{top:16px;right:16px}
.pvp-badge-bottomleft{bottom:70px;left:16px}
.pvp-badge-bottomright{bottom:70px;right:16px}

/* ===== DEBUG ===== */
.pvp-debug{
    position:absolute;bottom:0;left:0;right:0;
    background:rgba(0,0,0,.85);color:rgba(255,255,255,.5);
    font-family:'SF Mono',Monaco,Consolas,monospace;font-size:10px;
    padding:8px 12px;max-height:120px;overflow-y:auto;
    line-height:1.5;z-index:65;
    border-radius:0 0 var(--pvp-radius,16px) var(--pvp-radius,16px);
}

/* ===== RESPONSIVE ===== */
@media(max-width:480px){
    .pvp-overlay-text{font-size:12px}
    .pvp-ad-badge{font-size:9px;padding:4px 10px}
}