/* ==========================================================================
   SayHub Unified Cinema Player Suite
   Standardized Netflix & Prime Video Grade Player for Film, Live TV,
   Watch Party and 18+ Playback.
   ========================================================================== */

:root {
    --plyr-color-main: var(--accent, #1a98ff);
    --plyr-video-control-color-hover: #ffffff;
    --plyr-video-control-background-hover: transparent;
    --plyr-menu-background: rgba(12, 18, 28, 0.96);
    --plyr-menu-color: #ffffff;
    --plyr-captions-text-size: 19px;
    --plyr-captions-background: rgba(0, 0, 0, 0.78);
    --player-radius: 16px;
    --player-glow: rgba(var(--accent-rgb, 26, 152, 255), 0.25);
}

/* Plyr draws every caption itself. Chrome's native layer is already hidden by plyr.css; Firefox and
   Safari would paint a second, tiny copy of the same line under it, so silence theirs too. */
.plyr--full-ui:not(.plyr--is-ios) video::cue {
    visibility: hidden;
    color: transparent;
    background: transparent;
    text-shadow: none;
}

/* Keep captions off the very bottom edge (fullscreen and letterboxed frames included). While the
   control strip is up, captions sit above it instead of under it; --sayhub-controls-h is the strip's
   measured height (set by the player page), Plyr's own 40px lift is far too small for our taller strip. */
.plyr__captions { bottom: 4%; }
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions:not(.sub-pos-top) {
    transform: translateY(calc(-1 * var(--sayhub-controls-h, 40px))) !important;
}

/* ── Player Shell ────────────────────────────────────────────────────────── */
.player-shell {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: var(--player-radius);
    overflow: hidden;
    box-shadow: 0 24px 75px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
                margin 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-radius 0.35s ease,
                box-shadow 0.35s ease;
}

/* Theater Mode (Cinema Wide 21:9) */
.player-shell.theater-mode {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    aspect-ratio: 21 / 9 !important;
    min-height: min(84vh, 920px) !important;
    border-radius: 0 !important;
    z-index: 95 !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.98);
}
/* Spotlight Dimming Mode */
.player-shell.spotlight-active {
    z-index: 90 !important;
    box-shadow: 0 0 120px rgba(var(--accent-rgb, 26, 152, 255), 0.35), 0 30px 100px rgba(0, 0, 0, 0.98);
}

/* Video Canvas & Plyr Shell */
.player-shell .plyr {
    width: 100%;
    height: 100%;
    background: #000000;
}

.player-shell #video-container,
.player-shell #live-video-wrap,
.player-shell .player-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.player-shell.no-source .plyr {
    visibility: hidden;
    pointer-events: none;
}

/* ── Hero Placeholder & Launcher ────────────────────────────────────────── */
.player-stage-hero {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #0f1723 0%, #05080c 100%);
    overflow: hidden;
    user-select: none;
}

.player-stage-backdrop {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(0.24) saturate(140%);
    transform: scale(1.08);
    pointer-events: none;
}

.player-stage-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb, 26, 152, 255), 0.16) 0%, transparent 68%);
    pointer-events: none;
}

.player-stage-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    max-width: 620px;
    user-select: none;
}

.nuvio-pulse-launcher {
    position: relative;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    user-select: none;
}

.nuvio-pulse-launcher:hover {
    transform: scale(1.12);
}

.nuvio-pulse-launcher:active {
    transform: scale(0.96);
}

.nuvio-ring-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb, 26, 152, 255), 0.45);
    animation: sayhubRingPulse 2.2s infinite cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes sayhubRingPulse {
    0% { transform: scale(0.92); opacity: 0.95; }
    100% { transform: scale(1.48); opacity: 0; }
}

.nuvio-play-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 26, 152, 255), 0.26), rgba(var(--accent-rgb, 26, 152, 255), 0.08));
    border: 2px solid rgba(var(--accent-rgb, 26, 152, 255), 0.75);
    display: grid;
    place-items: center;
    box-shadow: 0 0 35px rgba(var(--accent-rgb, 26, 152, 255), 0.45), inset 0 0 15px rgba(var(--accent-rgb, 26, 152, 255), 0.25);
    transition: all 0.25s ease;
}

.nuvio-pulse-launcher:hover .nuvio-play-icon-wrap {
    background: linear-gradient(135deg, var(--accent, #1a98ff), #22c55e);
    border-color: var(--accent, #1a98ff);
    box-shadow: 0 0 50px rgba(var(--accent-rgb, 26, 152, 255), 0.75), inset 0 0 20px rgba(255, 255, 255, 0.45);
}

.nuvio-play-icon-wrap svg {
    width: 34px;
    height: 34px;
    color: var(--accent, #1a98ff);
    margin-left: 5px;
    transition: color 0.25s ease, transform 0.2s ease;
}

.nuvio-pulse-launcher:hover .nuvio-play-icon-wrap svg {
    color: #ffffff;
    transform: scale(1.08);
}

.nuvio-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 9999px;
    background: rgba(14, 20, 28, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    color: var(--text-muted, #aab3bd);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.nuvio-beacon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #1a98ff);
    box-shadow: 0 0 8px var(--accent, #1a98ff);
    animation: sayhubBeacon 1.8s infinite;
}

@keyframes sayhubBeacon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.nuvio-media-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.nuvio-season-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #1a98ff);
    background: rgba(var(--accent-rgb, 26, 152, 255), 0.12);
    border: 1px solid rgba(var(--accent-rgb, 26, 152, 255), 0.28);
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: 8px;
}

/* ── Custom Plyr Controls Styling ────────────────────────────────────────── */
.plyr__controls {
    background: linear-gradient(180deg, transparent 0%, rgba(6, 10, 16, 0.72) 36%, rgba(6, 10, 16, 0.96) 100%) !important;
    padding: 24px 18px 14px !important;
    gap: 8px !important;
}

.plyr__controls .sayhub-control {
    color: rgba(255, 255, 255, 0.88);
    transition: color 0.18s, transform 0.18s;
}

.plyr__controls .sayhub-control:hover {
    color: var(--accent, #1a98ff);
    transform: scale(1.12);
}

.plyr__controls .sayhub-control.active {
    color: var(--accent, #1a98ff);
    text-shadow: 0 0 10px rgba(var(--accent-rgb, 26, 152, 255), 0.65);
}

/* Scrubber / Progress Bar Glow */
.plyr__progress__buffer {
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px;
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded='true'] {
    background: transparent !important;
    color: #ffffff !important;
}

/* ── Shared control strip (film/dizi and 18+ players) ─────────────────────── */
/* Nuvio-style control strip: title row, full-width seek row, then
   [play · tools] ............ [volume · time · pip · fullscreen]. */
.sayhub-strip .plyr {
    --plyr-range-fill-background: #fff;
    --plyr-video-range-track-background: rgba(255,255,255,.28);
    --plyr-range-track-height: 4px;
    --plyr-range-thumb-height: 13px;
    --plyr-range-thumb-background: #fff;
    --plyr-control-icon-size: 19px;
}
.sayhub-strip .plyr--video .plyr__controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 56px 22px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.5) 55%, transparent);
}
.plyr-meta { order: -2; flex: 0 0 100%; min-width: 0; padding: 0 2px 8px; text-align: left; pointer-events: none; }
.plyr-meta strong {
    display: block; font-size: 21px; font-weight: 800; color: #fff; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.plyr-meta span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.62); }
.plyr-meta span:empty { display: none; }
.sayhub-strip .plyr__controls .plyr__progress__container { order: -1; flex: 0 0 100%; margin: 0 0 10px; padding: 0; }
.sayhub-strip .plyr__progress input[type="range"]::-webkit-slider-thumb { opacity: 0; transition: opacity .15s; }
.sayhub-strip .plyr__progress:hover input[type="range"]::-webkit-slider-thumb { opacity: 1; }
.sayhub-strip .plyr__controls > [data-plyr="play"] {
    order: 1; width: 42px; height: 42px; padding: 0; margin-right: 10px; border-radius: 50%;
    display: inline-grid; place-items: center; background: #fff; color: #0b0b0b;
}
.sayhub-strip .plyr__controls > [data-plyr="play"]:hover { background: #e6e6e6; color: #0b0b0b; }
.sayhub-strip .plyr__controls > [data-plyr="play"] svg { width: 18px; height: 18px; }
.sayhub-strip #custom-rewind-btn,
.sayhub-strip .plyr__controls > [data-plyr="rewind"] { order: 2; }
.sayhub-strip #custom-forward-btn,
.sayhub-strip .plyr__controls > [data-plyr="fast-forward"] { order: 3; }
.sayhub-strip #custom-subtitle-track-btn,
.sayhub-strip #auto-subs-btn { order: 4; }
.sayhub-strip #custom-audio-track-btn { order: 5; }
.sayhub-strip #custom-source-btn { order: 6; }
.sayhub-strip #custom-quality-btn { order: 7; }
.sayhub-strip .plyr__controls > .plyr__menu { order: 8; }
.sayhub-strip #custom-theater-btn { order: 9; }
.sayhub-strip .plyr__controls > .plyr__volume { order: 20; margin-left: auto; }
.sayhub-strip .plyr__controls > .plyr__time--current { order: 21; margin-left: 10px; }
.sayhub-strip .plyr__controls > .plyr__time--duration { order: 22; }
.sayhub-strip .plyr__controls > .plyr__time + .plyr__time::before { content: '/'; margin-right: 6px; }
.sayhub-strip .plyr__controls > [data-plyr="pip"],
.sayhub-strip #custom-pip-btn { order: 23; margin-left: 6px; }
.sayhub-strip .plyr__controls > [data-plyr="fullscreen"] { order: 24; }
.sayhub-strip #custom-next-ep-btn { order: 25; margin-left: 6px; }
/* Big centre play button: a glass disc (our theme sets Plyr's hover background to transparent). */
.sayhub-strip .plyr__control--overlaid {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.16);
    color: #fff;
    box-shadow: inset 1px 1px 1px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.45);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.sayhub-strip .plyr__control--overlaid:hover,
.sayhub-strip .plyr__control--overlaid:focus-visible { background: rgba(255,255,255,.26) !important; }
.sayhub-strip .plyr__control--overlaid svg { width: 26px; height: 26px; left: 2px; }
.sayhub-strip .plyr__time { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
.sayhub-mini-player .plyr-meta { display: none; }
@media (max-width: 600px) {
    /* Phone-portrait strip. Not for the iPhone fullscreen, which is drawn landscape inside a portrait
       viewport (player-fullscreen.js) and keeps the full strip. */
    .sayhub-strip .plyr--video:not(.plyr--fullscreen-fallback) .plyr__controls { padding: 36px 8px 8px; gap: 0; }
    .sayhub-strip .plyr--video:not(.plyr--fullscreen-fallback) .plyr__controls .plyr__control { min-width: 30px; min-height: 32px; padding: 6px; }
    .sayhub-strip .plyr--video:not(.plyr--fullscreen-fallback) .plyr__progress { width: auto; }
    .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) #custom-next-ep-btn { padding: 6px !important; margin-left: 0; }
    .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) .plyr__controls > [data-plyr="play"] { width: 36px; height: 36px; margin-right: 4px; }
    /* One tool row on phones: the video must stay visible. */
    .plyr:not(.plyr--fullscreen-fallback) .plyr-meta, .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) #custom-theater-btn, .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) #custom-rewind-btn, .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) #custom-forward-btn,
    .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) .plyr__controls > [data-plyr="pip"], .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) #custom-pip-btn,
    .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) #custom-next-ep-btn span { display: none !important; }
    .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) .plyr__controls > .plyr__controls__item { margin-left: 0; }
    .sayhub-strip .plyr:not(.plyr--fullscreen-fallback) .plyr__controls > .plyr__time--current { margin-left: auto; }
}

/* ── Track Panel (Audio, Subtitles, Quality) ─────────────────────────────── */
.player-track-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(440px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(10, 15, 24, 0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    user-select: none;
}

.player-track-panel[hidden] {
    display: none !important;
}

.player-track-panel__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 800;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-muted, #aab3bd);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: all 0.2s ease;
}

.panel-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.track-panel-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    box-sizing: border-box;
}

.track-tab-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #aab3bd);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    user-select: none;
}

.track-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.track-tab-btn.active {
    background: rgba(var(--accent-rgb, 26, 152, 255), 0.18);
    color: var(--accent, #1a98ff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.track-tab-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

.track-tab-content[hidden] {
    display: none !important;
}

.panel-setting-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.setting-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted, #aab3bd);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.setting-header-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting-badge-val {
    font-size: 11px;
    font-weight: 800;
    color: var(--accent, #1a98ff);
    background: rgba(var(--accent-rgb, 26, 152, 255), 0.12);
    border: 1px solid rgba(var(--accent-rgb, 26, 152, 255), 0.3);
    padding: 2px 8px;
    border-radius: 9999px;
}

.setting-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.setting-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #aab3bd);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.setting-pill-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

.setting-pill-btn.active {
    background: rgba(var(--accent-rgb, 26, 152, 255), 0.18);
    border-color: var(--accent, #1a98ff);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(var(--accent-rgb, 26, 152, 255), 0.25);
}

.track-cards-list {
    display: grid;
    gap: 6px;
    width: 100%;
}

.track-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #aab3bd);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.track-card-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
}

.track-card-item.active {
    background: rgba(var(--accent-rgb, 26, 152, 255), 0.14);
    border-color: var(--accent, #1a98ff);
    color: #ffffff;
}

.track-card-item .track-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-dim, #79838f);
}

.track-card-item.active .track-badge {
    background: var(--accent, #1a98ff);
    color: #ffffff;
}

.color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

/* ── Keyboard Shortcuts Modal ────────────────────────────────────────────── */
.shortcuts-modal {
    position: absolute;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 10, 16, 0.88);
    backdrop-filter: blur(16px);
    padding: 20px;
}

.shortcuts-modal[hidden] {
    display: none !important;
}

.shortcuts-card {
    background: rgba(14, 20, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    width: min(440px, 92vw);
    padding: 20px 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
}

.shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shortcuts-header h4 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.shortcuts-list {
    display: grid;
    gap: 8px;
}

.sc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted, #aab3bd);
}

.sc-row kbd {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    padding: 2px 7px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
}

/* ── Error Recovery Card ─────────────────────────────────────────────────── */
.player-error-overlay {
    position: absolute;
    inset: 0;
    z-index: 92;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 10, 16, 0.92);
    backdrop-filter: blur(14px);
    padding: 24px;
    text-align: center;
}

.player-error-overlay[hidden] {
    display: none !important;
}

.error-glass-panel {
    background: rgba(18, 24, 34, 0.96);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 18px;
    width: min(460px, 92vw);
    padding: 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(239, 68, 68, 0.15);
}

.error-glass-panel .error-icon {
    font-size: 38px;
    margin-bottom: 12px;
}

.error-glass-panel h4 {
    font-size: 17px;
    font-weight: 800;
    color: #fecaca;
    margin: 0 0 8px;
}

.error-glass-panel p {
    font-size: 13px;
    color: var(--text-muted, #aab3bd);
    margin: 0 0 20px;
    line-height: 1.5;
}

.error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-error-retry {
    background: var(--accent, #1a98ff);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb, 26, 152, 255), 0.35);
    transition: all 0.2s ease;
}

.btn-error-retry:hover {
    background: var(--accent-hover, #4db0ff);
    transform: translateY(-1px);
}

.btn-error-sources {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-radius: 9999px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-error-sources:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ── Ambient Glow Effect ─────────────────────────────────────────────────── */
.player-ambient-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle at center, rgba(var(--accent-rgb, 26, 152, 255), 0.22) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity 0.5s ease;
}

/* IntroDB skip button (intro / recap / credits), shown only inside a marked segment. */
.skip-segment-btn {
    position: absolute;
    right: clamp(14px, 3%, 32px);
    bottom: 84px;
    z-index: 40;
    padding: 12px 22px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    background: rgba(8, 12, 18, 0.72);
    color: #ffffff;
    font: 800 15px/1 'Manrope', sans-serif;
    cursor: pointer;
    backdrop-filter: blur(6px);
    animation: skipSegmentIn 0.2s ease-out;
}
.skip-segment-btn:hover, .skip-segment-btn:focus-visible { background: #ffffff; color: #05080c; }
.skip-segment-btn[hidden] { display: none; }
@keyframes skipSegmentIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 600px) { .skip-segment-btn { bottom: 64px; padding: 9px 14px; font-size: 13px; } }

/* ── Phones: track panel as a floating glass sheet ──────────────────────────
   Inside the 16:9 frame it was a cramped scroll box; as a fixed sheet above the tab bar every setting
   (subtitle size included) is in reach, in fullscreen too. The id beats each page's own panel rules. */
@media (max-width: 767px) {
    #player-track-panel {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: calc(var(--mobile-nav-clearance, 0px) + 10px);
        z-index: 1200;
        width: auto;
        max-width: none;
        max-height: min(64vh, 560px);
        margin: 0;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 28px;
        background: rgba(12, 18, 28, 0.74);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.28), inset -1px -1px 1px rgba(255, 255, 255, 0.08),
                    0 -8px 40px rgba(0, 0, 0, 0.55);
        overscroll-behavior: contain;
        animation: sayhubSheetIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.04);
    }
    .plyr--fullscreen-active #player-track-panel {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    /* Floating page buttons would sit on top of the sheet. */
    body:has(#player-track-panel:not([hidden])) :is(.assistant-fab, .back-to-top) {
        display: none;
    }
}

@keyframes sayhubSheetIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    #player-track-panel { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
    #player-track-panel { background: rgba(10, 15, 24, 0.98); }
}

/* ── Bilingual subtitles (İngilizce + Türkçe) ────────────────────────────────── */
.plyr.dual-on .plyr__captions { visibility: hidden !important; }

.dual-subs {
    position: absolute;
    left: 50%;
    bottom: 9%;
    z-index: 30;
    width: min(94%, 1000px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
    transition: bottom 0.25s ease;
}
.plyr:not(.plyr--hide-controls) .dual-subs { bottom: calc(var(--sayhub-controls-h, 56px) + 12px); }
.dual-subs[hidden] { display: none; }

.dual-subs__en,
.dual-subs__tr {
    max-width: 100%;
    padding: 3px 12px;
    border-radius: 8px;
    background: var(--sayhub-sub-bg, rgba(0, 0, 0, 0.75));
    color: var(--sayhub-sub-color, #ffffff);
    font-size: var(--plyr-captions-text-size, 19px);
    font-weight: 600;
    line-height: 1.45;
    white-space: pre-line;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.dual-subs__tr {
    font-size: calc(var(--plyr-captions-text-size, 19px) * 0.82);
    color: #fde68a;
}
.dual-subs__en:empty,
.dual-subs__tr:empty { display: none; }

.dual-word {
    pointer-events: auto;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}
.dual-word:hover,
.dual-word:focus-visible,
.dual-word.is-picked {
    outline: none;
    background: rgba(var(--accent-rgb, 26, 152, 255), 0.45);
    color: #ffffff;
}

.dual-settings { display: grid; gap: 8px; }
.dual-settings[hidden] { display: none; }
.dual-status { color: var(--text-muted, #aab3bd); font-size: 11px; line-height: 1.4; }
.dual-status:empty { display: none; }

.word-card {
    position: absolute;
    z-index: 96;
    width: min(320px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(12, 18, 28, 0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.25), 0 18px 48px rgba(0, 0, 0, 0.6);
    color: #ffffff;
    text-align: left;
    animation: sayhubSheetIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.04);
}
.word-card[hidden] { display: none; }
.word-card__head { display: flex; align-items: center; gap: 8px; }
.word-card__word { font-size: 18px; font-weight: 800; }
.word-card__phonetic { color: var(--text-muted, #aab3bd); font-size: 13px; }
.word-card__speak,
.word-card__close,
.word-card__save {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}
.word-card__close { margin-left: auto; }
.word-card__body { margin-top: 8px; color: var(--text-muted, #aab3bd); font-size: 13px; }
.word-card__main { margin: 0 0 6px; color: var(--accent, #1a98ff); font-size: 17px; font-weight: 800; }
.word-card__sense { margin: 0 0 4px; line-height: 1.45; }
.word-card__sense em { margin-right: 6px; color: #fde68a; font-style: normal; font-weight: 700; }
.word-card__save { width: 100%; margin-top: 10px; justify-content: center; color: #dffdf7; border-color: rgba(53, 230, 195, .28); background: rgba(53, 230, 195, .1); }
.word-card__save.is-saved { color: #06241d; background: #35e6c3; }
.repeat-speed-label { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; color: var(--text-muted, #aab3bd); font-size: 12px; font-weight: 700; }
.repeat-speed-select { min-height: 34px; padding: 6px 26px 6px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #fff; background: #101822; }

@media (prefers-reduced-motion: reduce) {
    .word-card { animation: none; }
}

/* Automatic (speech) subtitle status pill. */
.auto-subs-note {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 40;
    max-width: calc(100% - 24px);
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(12, 18, 28, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}
.auto-subs-note[hidden] { display: none; }

/* Shared player panel: blocks a player does not offer (e.g. bilingual subtitles without a TMDB match). */
.panel-setting-block[hidden] { display: none !important; }
/* Subtitle opacity / outline picks reach every player through these variables. */
.plyr__caption {
    opacity: var(--sayhub-sub-opacity, 1);
    text-shadow: var(--sayhub-sub-shadow, 0 1px 2px rgba(0, 0, 0, 0.8));
}
.word-card a.word-card__save { display: flex; height: auto; padding: 9px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; text-decoration: none; }