/* =========================================================
   PLAYER
========================================================= */

#player-container {

    display: none;

    /*
     * FIX: position:fixed + dvh/dvw instead
     * of position:absolute + a 100% box.
     *
     * position:fixed anchors the player to
     * the browser's actual visual viewport,
     * not the document. dvh/dvw track that
     * same real, currently-visible area and
     * update live as the address bar shows
     * or hides — so a seek-bar drag can no
     * longer leave the controls stranded
     * below the fold. vh/vw are kept as a
     * fallback for older browsers that don't
     * support dvh/dvw.
     */

    position: fixed;

    inset: 0;

    width: 100vw;

    width: 100dvw;

    height: 100vh;

    height: 100dvh;

    background: #000;

    overflow: hidden;

    overscroll-behavior: none;

    touch-action: none;

    -webkit-user-select: none;

    user-select: none;

    -webkit-touch-callout: none;

    -webkit-user-drag: none;

}


/*
 * Belt-and-braces: block native
 * long-press / selection / drag
 * UI on every element inside the
 * custom player.
 */

#player-container * {

    -webkit-user-select: none;

    user-select: none;

    -webkit-touch-callout: none;

    -webkit-user-drag: none;

}


/* actual media layer */

#media-layer {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background: #000;

    transition: filter .3s ease;

}


#media-layer video {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    background: #000;

}


/*
IMPORTANT:

No native controls.

This removes browser's native:
- 3 dot
- white volume
- native fullscreen button
- native timeline
*/

#media-layer video {

    -webkit-appearance: none;

}


/* =========================================================
   WATERMARK
========================================================= */

#watermark {

    position: absolute;

    top: calc(clamp(16px, 3vw, 30px) + env(safe-area-inset-top, 0px));

    right: calc(clamp(16px, 3vw, 30px) + env(safe-area-inset-right, 0px));

    z-index: 200;

    /*
     * SIZE — change these two lines to resize the
     * watermark. Each is: clamp(MIN, PREFERRED, MAX).
     * MIN = smallest size on tiny phone screens.
     * MAX = largest size on big/desktop screens.
     * PREFERRED (the vw value) scales it in between.
     * Keep the width:height ratio roughly the same
     * as the logo's own aspect ratio so it doesn't
     * look squashed/stretched.
     */

    width: clamp(70px, 10vw, 110px);

    height: clamp(18px, 2.6vw, 26px);

    background-image: url('/assets/images/NEXFLIX_Logo.svg');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: right center;

    opacity: .70;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;

    -webkit-user-drag: none;

    /*
     * Some TV/desktop browsers render <video> via a
     * hardware-accelerated overlay layer that ignores
     * normal CSS z-index/stacking, especially in
     * fullscreen. Forcing this element into its own
     * GPU-composited layer (translateZ trick) makes it
     * stack correctly above that overlay instead of
     * being painted underneath it.
     */

    transform: translateZ(0);

    -webkit-transform: translateZ(0);

    will-change: transform;

}


/* =========================================================
   TOP GRADIENT
========================================================= */

#top-gradient {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    height: 160px;

    z-index: 100;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.25),
            rgba(0,0,0,.08) 55%,
            transparent
        );

}


/* =========================================================
   BOTTOM GRADIENT
========================================================= */

#bottom-gradient {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 170px;

    z-index: 100;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.3),
            rgba(0,0,0,.1) 45%,
            transparent
        );

}
    /* =========================================================
   TOP BAR (title / back button, opt-in via URL params)
========================================================= */

#top-bar {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    z-index: 500;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        max(14px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        0
        max(10px, env(safe-area-inset-left));

    transition:
        opacity .28s var(--ease),
        transform .28s var(--ease);

}


#top-bar.hidden {

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-10px);

}


#top-bar #back-btn {

    color: #fff;

}


#top-bar-text {

    display: flex;

    flex-direction: column;

    min-width: 0;

}



#top-bar-title {

    /*
     * Kept in the DOM (some code paths
     * still reference the element) but
     * never shown - the title already
     * appears once in the bottom
     * metadata block, larger and with
     * its rating badges, so a second
     * copy up here was pure clutter.
     */

    display: none;

}


#top-bar-episode {

    margin-top: 1px;

    font-size: 11.5px;

    color: rgba(255,255,255,.55);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


#top-bar-title:empty,
#top-bar-episode:empty {

    display: none;

}