/* ── Mobile: full coverage + touch-friendly ── */
@media(max-width:768px){

    /* Shell must fill the overlay completely */
    #pf-db-overlay .pfvjs-shell{
        width:100vw!important;
        height:100dvh!important;   /* dynamic viewport height — handles iOS toolbar */
        height:100vh!important;    /* fallback */
        max-height:100dvh!important;
        border-radius:0!important;
    }

    /* Controls: always visible on mobile (no hover) */
    .pfvjs-ctrl{
        opacity:1!important;
        pointer-events:auto!important;
        padding:0 10px 14px!important;
        background:linear-gradient(to top,rgba(5,5,16,.98) 0%,rgba(5,5,16,.6) 55%,transparent 100%)!important;
    }

    /* Bigger touch targets for buttons */
    .pfvjs-btn{
        padding:11px!important;
        min-width:44px!important;
        min-height:44px!important;
    }
    .pfvjs-btn svg{ width:22px!important; height:22px!important; }
    .pfvjs-source-label{display:none!important}

    /* Bigger seek dot */
    .pfvjs-seek-dot{
        width:20px!important;
        height:20px!important;
        opacity:1!important;
    }
    .pfvjs-seek-track{ height:5px!important; }
    .pfvjs-seek-wrap{ padding:14px 0 6px!important; }

    /* Bigger center play ring */
    .pfvjs-play-ring{ width:70px!important; height:70px!important; }

    /* Time text */
    .pfvjs-time{ font-size:11px!important; }

    /* Volume: hidden on mobile (use device hardware buttons) */
    .pfvjs-vol-wrap{ display:none!important; }

    /* Menus: wider, positioned from bottom */
    .pfvjs-menu{
        min-width:150px!important;
        right:-4px!important;
        bottom:calc(100% + 10px)!important;
    }
    .pfvjs-mi{
        padding:12px 14px!important;
        font-size:14px!important;
        min-height:44px!important;
    }

    /* Close button: always accessible */
    #pf-db-close{
        top:12px!important;
        left:12px!important;
        z-index:99999!important;
        min-height:44px!important;
        min-width:44px!important;
    }

    /* Logo: smaller on mobile */
    .pfvjs-logo img{ height:18px!important; }
    .pfvjs-logo span{ font-size:11px!important; }
    .pfvjs-logo{ top:8px!important; right:10px!important; }

    /* Skip ripples: bigger */
    .pfvjs-ripple{ padding:14px 20px!important; }
}

@media(max-width:380px){
    .pfvjs-time{ display:none!important; }
    .pfvjs-btn{ padding:9px!important; min-width:40px!important; }
}