/* =========================================================
   BOTTOM METADATA (optional title + badges)
========================================================= */

#bottom-meta {

    margin-bottom: 10px;

}


#bottom-meta.hidden {

    display: none;

}


#bottom-meta-title {

    font-size: 18px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 6px;

    text-shadow: 0 1px 4px rgba(0,0,0,.6);

}


#bottom-meta-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    align-items: center;

}


.meta-badge {

    font-size: 11px;

    font-weight: 600;

    padding: 3px 8px;

    border-radius: 4px;

    background: rgba(255,255,255,.12);

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

    border: 1px solid rgba(255,255,255,.15);

}


.meta-badge.meta-rating {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background:
        linear-gradient(180deg, #f5c518, #e8b800);

    border-color: transparent;

    color: #000;

    font-weight: 800;

}


/* =========================================================
   SKIP INTRO BUTTON
========================================================= */

#skip-intro-btn {

    /*
     * Positioned top-right, below the
     * top bar - deliberately NOT in
     * the bottom-right corner, since
     * that's where the metadata badge
     * row and (later, at the episode's
     * end) the Up Next card live. All
     * three would otherwise stack on
     * top of each other.
     */

    position: absolute;

    right: 20px;

    top: 76px;

    z-index: 40;

    padding: 10px 18px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 6px;

    background: rgba(20,20,20,.85);

    backdrop-filter: blur(6px);

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

}


#skip-intro-btn:hover {

    background: rgba(40,40,40,.9);

    border-color: rgba(255,255,255,.4);

}


#skip-intro-btn.hidden {

    display: none;

}


/* =========================================================
   STATS FOR NERDS (optional, Settings toggle)
========================================================= */

#stats-overlay {

    position: absolute;

    left: 16px;

    top: 76px;

    z-index: 40;

    padding: 10px 14px;

    border-radius: 6px;

    background: rgba(0,0,0,.75);

    backdrop-filter: blur(6px);

    color: #0f0;

    font-family: monospace;

    font-size: 11px;

    line-height: 1.6;

    white-space: pre-line;

    pointer-events: none;

    max-width: 220px;

}


#stats-overlay.hidden {

    display: none;

}


/* =========================================================
   RESUME CONFIRMATION
========================================================= */

#resume-toast {

    position: absolute;

    left: 20px;

    bottom: 96px;

    z-index: 45;

    display: flex;

    align-items: center;

    gap: 14px;

    max-width: min(360px, 70vw);

    padding: 14px 16px;

    background: rgba(20,20,20,.92);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 10px;

    box-shadow: 0 8px 30px rgba(0,0,0,.5);

    animation: resumeIn .3s var(--ease);

}


@keyframes resumeIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


#resume-toast.hidden {

    display: none;

}


.resume-text {

    flex: 1;

    font-size: 13px;

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

    line-height: 1.4;

}


#resume-time {

    font-weight: 700;

    color: #fff;

}


#resume-btn {

    flex-shrink: 0;

    background: var(--red);

    color: #fff;

    border: 0;

    border-radius: 5px;

    padding: 9px 16px;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: background .15s ease;

}


#resume-btn:hover {

    background: var(--red2);

}


#resume-close {

    position: absolute;

    top: -8px;

    right: -8px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: rgba(0,0,0,.85);

    border: 1px solid rgba(255,255,255,.2);

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

    font-size: 12px;

    line-height: 1;

    cursor: pointer;

}

#resume-close::before {

    content: '\2715';

}

#resume-close:hover {

    color: #fff;

}


/* =========================================================
   ARE YOU STILL WATCHING
========================================================= */

#still-watching {

    position: absolute;

    inset: 0;

    z-index: 900;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,.8);

    backdrop-filter: blur(4px);

    animation: resumeIn .35s var(--ease);

}


#still-watching.hidden {

    display: none;

}


.still-watching-box {

    max-width: min(360px, 82vw);

    text-align: center;

    padding: 28px 26px;

    background: rgba(20,20,20,.95);

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 12px;

    box-shadow: 0 12px 40px rgba(0,0,0,.6);

}


.still-watching-title {

    font-size: 19px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 10px;

}


.still-watching-sub {

    font-size: 13px;

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

    line-height: 1.5;

    margin-bottom: 22px;

}


#still-watching-continue {

    width: 100%;

    padding: 13px;

    background: var(--red);

    color: #fff;

    border: 0;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: background .15s ease;

}


#still-watching-continue:hover {

    background: var(--red2);

}


/* =========================================================
   CINEMA MODE

   A real overlay element sitting
   above the video but below the
   controls - NOT a box-shadow on an
   ancestor, which would paint behind
   the video and never actually be
   visible. Strong enough at the edges
   to read clearly as "lights down"
   the instant it's toggled, fading to
   fully transparent at the center so
   the picture itself is untouched.

   Static filesystem/iframe limits mean
   this can't dim a hosting page
   outside our own boundary - it only
   ever affects the player's own frame.
========================================================= */

#cinema-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;

    opacity: 0;

    transition: opacity .35s var(--ease);

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,.85) 100%
        );

}


body.cinema-mode #cinema-overlay {

    opacity: 1;

}


body.cinema-mode {

    background: #000;

}


.settings-chevron {

    width: 15px;

    height: 15px;

    flex-shrink: 0;

    display: inline-flex;

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

}

.settings-chevron svg {

    width: 100%;

    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.settings-subheader {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 10px 14px;

    font-size: 12.5px;

    font-weight: 700;

    color: #fff;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    position: sticky;

    top: 0;

    background:
        rgba(30,30,32,.96);

}


.settings-back {

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: none;

    border: none;

    color: #fff;

    padding: 0;

    cursor: pointer;

    flex-shrink: 0;

}


.settings-back svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

}


.settings-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 11px 14px;

    font-size: 13px;

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

    cursor: pointer;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    transition:
        background .15s ease;

}


.settings-option:last-child {

    border-bottom: none;

}


.settings-season-header {

    padding: 10px 14px 6px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;

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

    background: rgba(255,255,255,.03);

}


.settings-option:hover {

    background:
        rgba(255,255,255,.05);

}


.settings-option:active {

    background:
        rgba(255,255,255,.08);

}


.settings-option.active {

    color: var(--red);

    font-weight: 600;

}


.settings-option.disabled {

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

    cursor: default;

}


.settings-option svg {

    width: 15px;

    height: 15px;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.4;

    stroke-linecap: round;

    stroke-linejoin: round;

}