/* ======================================================
   JL FLIX SPA - DESIGN SYSTEM (PLAYER YOUTUBE NATIVO)
====================================================== */
:root {
    --yt-bg: #0f0f0f;
    --yt-surface: #272727;
    --yt-hover: #3f3f3f;
    --yt-text: #f1f1f1;
    --yt-text-dim: #aaaaaa;
    --yt-red: #ff0000;
    --header-h: 56px;
    --chip-h: 56px;
}

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}

body {
    font-family: 'Roboto', -apple-system, sans-serif;
    background-color: var(--yt-bg); color: var(--yt-text);
    overflow-x: hidden; padding-top: calc(var(--header-h) + var(--chip-h));
}

a { text-decoration: none; color: inherit; }

/* ================= HEADER E CATEGORIAS ================= */
.yt-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
    background-color: rgba(15, 15, 15, 0.98); 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 16px; z-index: 4000; border-bottom: 1px solid #222; gap: 12px;
}

.header-left { display: flex; align-items: center; flex-shrink: 0; }
.yt-logo { font-size: 20px; font-weight: bold; letter-spacing: -1px; display: flex; align-items: center; gap: 4px; }
.yt-logo span { color: var(--yt-red); }

.search-wrapper { flex: 1; display: flex; justify-content: center; max-width: 600px; }
.search-box { display: flex; width: 100%; border: 1px solid var(--yt-surface); border-radius: 40px; background-color: #121212; overflow: hidden; }
.search-box input { flex: 1; background: transparent; border: none; color: var(--yt-text); padding: 8px 16px; outline: none; font-size: 15px;}
.search-box button { background: var(--yt-surface); border: none; border-left: 1px solid #303030; padding: 0 20px; color: var(--yt-text-dim); cursor: pointer; transition: 0.2s; }
.search-box button:hover { background: var(--yt-hover); color: var(--yt-text); }

.header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.btn-create { background: var(--yt-surface); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; display:flex; align-items:center; transition: background 0.2s; }
.btn-create:hover { background: var(--yt-hover); }
.btn-create .btn-icon { display: none; }
.avatar-profile { width: 32px; height: 32px; background: #60a5fa; border-radius: 50%; display: grid; place-items: center; font-weight: bold; color: #000; }

.categories-bar {
    position: fixed; top: var(--header-h); left: 0; right: 0; height: var(--chip-h);
    background-color: rgba(15, 15, 15, 0.98); z-index: 1999; 
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; gap: 12px; border-bottom: 1px solid #222;
}

.chips-wrapper { 
    display: flex; gap: 12px; flex: 1; align-items: center; height: 100%;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; 
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.chips-wrapper::-webkit-scrollbar { display: none; }

.yt-chip { 
    background-color: var(--yt-surface); color: var(--yt-text); 
    padding: 6px 14px; border-radius: 8px; font-size: 14px; 
    white-space: nowrap; cursor: pointer; transition: 0.2s;
}
.yt-chip:hover { background-color: var(--yt-hover); }
.yt-chip.active { background-color: var(--yt-text); color: var(--yt-bg); font-weight: 500; }
.yt-chip.chip-action { background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); }
.yt-chip.chip-action:hover { background-color: rgba(255, 255, 255, 0.15); }
.yt-chip.chip-action.active { background-color: var(--yt-text); color: var(--yt-bg); border-color: transparent; }

.sort-select { 
    background-color: #272727; color: #f1f1f1; border: 1px solid #444; 
    padding: 6px 10px; border-radius: 8px; font-size: 13px; outline: none; 
    cursor: pointer; flex-shrink: 0; margin-left: auto; 
}
.sort-select:hover { background-color: #3f3f3f; }

/* ================= MAIN GRID & CARDS ================= */
.main-layout { padding: 24px; max-width: 2200px; margin: 0 auto; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 16px; }
.video-card { cursor: pointer; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease; }
@media (hover: hover) { .video-card:hover { transform: translateY(-4px); } }

.thumbnail-container { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000 url('../thumbnails/loading.gif') center no-repeat; background-size: 30px; }
.thumb-image { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.video-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.video-card.is-playing .thumb-image { opacity: 0; }
.video-card.is-playing .video-preview { opacity: 1; }
.badge-time, .badge-status { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 3px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.badge-status { left: 8px; right: auto; background: var(--yt-red); }

.card-info { display: flex; gap: 12px; }
.channel-avatar { width: 36px; height: 36px; border-radius: 50%; background: #555; display: grid; place-items: center; font-size: 12px; font-weight: bold; flex-shrink: 0; }
.card-text { display: flex; flex-direction: column; gap: 4px; width: 100%; padding-right: 12px; }
.card-title { font-size: 16px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.card-meta { font-size: 14px; color: var(--yt-text-dim); }

/* ================= O PLAYER ================= */
#player-view { position: fixed; z-index: 3000; display: none; background: var(--yt-bg); transition: transform 0.3s ease, opacity 0.3s ease; }
#player-view.full { top: var(--header-h); left: 0; width: 100%; height: calc(100vh - var(--header-h)); overflow-y: auto; display: block; overflow-x: hidden; }

.watch-layout { display: flex; flex-direction: column; gap: 24px; max-width: 1600px; margin: 0 auto; padding: 24px; }
@media (min-width: 1024px) {
    .watch-layout { display: grid; grid-template-columns: 1fr 400px; grid-template-rows: auto 1fr; align-items: start; }
    #playerWrapper { grid-column: 1; grid-row: 1; }
    #videoInfoArea { grid-column: 1; grid-row: 2; margin-top: 0 !important; }
    #sidebarArea { grid-column: 2; grid-row: 1 / span 2; }
}

#playerWrapper { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; position: relative; max-height: 80vh; flex-shrink: 0; }
#playerContainer, #main-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; outline: none; object-fit: contain; }

#playerContainer:fullscreen { cursor: none; }
#playerContainer:fullscreen.show-controls { cursor: default; }
#playerContainer:-webkit-full-screen { cursor: none; }
#playerContainer:-webkit-full-screen.show-controls { cursor: default; }

/* SPINNER YOUTUBE */
.yt-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; display: none; z-index: 10; pointer-events: none; }
.yt-spinner::after { content: " "; display: block; width: 46px; height: 46px; margin: 8px; border-radius: 50%; border: 5px solid #fff; border-color: #fff transparent #fff transparent; animation: yt-spinner 1.2s linear infinite; }
@keyframes yt-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* MINIPLAYER PIP */
#player-view.mini { display: block; position: fixed; bottom: 20px; right: 20px; width: 380px; height: auto; aspect-ratio: 16/9; background: #000; border-radius: 12px; border: 2px solid var(--yt-surface); box-shadow: 0 10px 30px rgba(0,0,0,0.9); overflow: hidden; cursor: pointer; z-index: 5000; }
#player-view.mini .watch-layout { display: block; padding: 0; }
#player-view.mini #videoInfoArea, #player-view.mini #sidebarArea { display: none !important; }
#player-view.mini #playerWrapper { border-radius: 0; position: static !important; max-height: none; }
#player-view.mini #main-video { object-fit: cover; pointer-events: none; } 

#mini-controls { display: none; } 
#player-view.mini #mini-controls { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; z-index: 40; }
#player-view.mini:hover #mini-controls { opacity: 1; }

/* Botões do Miniplayer (Desktop) */
.mini-btn { background: rgba(0,0,0,0.8); color: white; border: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; margin: 0 10px; }
.mini-btn:hover { background: rgba(0,0,0,0.95); transform: scale(1.1); }
#mini-expand { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; }
#mini-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; }

/* TÍTULOS E DESCRIÇÃO */
.play-title { font-size: 20px; margin-bottom: 12px; font-weight: bold; line-height: 1.4; word-break: break-word; overflow-wrap: break-word; }
.player-channel-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.channel-info { display: flex; align-items: center; gap: 12px; }
.btn-subscribe { background: var(--yt-text); color: var(--yt-bg); padding: 10px 16px; border-radius: 20px; font-weight: 600; border: none; cursor: pointer; }
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-group { display: flex; background: var(--yt-surface); border-radius: 20px; overflow: hidden; }
.btn-pill { background: var(--yt-surface); color: var(--yt-text); border: none; padding: 8px 16px; font-weight: 500; font-size: 14px; border-radius: 20px; white-space: nowrap; cursor: pointer; transition: background 0.2s;}
.btn-pill:hover { background: var(--yt-hover); }
.btn-group .btn-pill { border-radius: 0; }
.btn-group .border-l { border-left: 1px solid #444; }
.video-description { background: var(--yt-surface); padding: 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; word-break: break-word; overflow-wrap: break-word; }

/* CARDS RELACIONADOS */
.related-card { display: flex; gap: 12px; cursor: pointer; margin-bottom: 16px; transition: transform 0.2s;}
.related-card:hover { transform: translateY(-2px); }
.related-card .thumbnail-container { width: 168px; flex-shrink: 0; border-radius: 8px; }
.related-card .card-info { padding: 0; }
.related-card .channel-avatar { display: none; }
.related-card .card-title { font-size: 14px; -webkit-line-clamp: 2; }

/* MODO TEATRO */
#player-view.theater-mode-active .watch-layout { display: flex !important; flex-direction: column !important; padding: 0 !important; max-width: 100% !important; }
#player-view.theater-mode-active #playerWrapper { max-width: 100% !important; width: 100% !important; height: 85vh !important; max-height: none !important; border-radius: 0 !important; }
#player-view.theater-mode-active #videoInfoArea { max-width: 1400px !important; margin: 24px auto 0 auto !important; padding: 0 24px !important; }
#player-view.theater-mode-active #sidebarArea { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding: 0 24px !important; }
#player-view.theater-mode-active .related-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 16px !important; }

/* PAGINAÇÃO ========================================== */
.pagination-wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 40px 16px; }
.page-btn { background: var(--yt-surface); padding: 8px 16px; border-radius: 4px; font-size: 14px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
.page-btn:hover { background: var(--yt-hover); }
.page-btn.active { background: var(--yt-text); color: var(--yt-bg); font-weight: 500; }
.page-dots { color: var(--yt-text-dim); padding: 0 4px; display: inline-flex; align-items: flex-end; line-height: 1; }
.empty-state { text-align: center; padding: 40px; color: var(--yt-text-dim); grid-column: 1/-1; }
/* ==================================================== */

/* ======================================================
   BOTÃO CENTRAL DE PLAY/PAUSE (MOBILE)
====================================================== */
.center-play-pause {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; pointer-events: none; 
    z-index: 15; opacity: 0; visibility: hidden; transform: scale(0.9); transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
#playerContainer.show-controls .center-play-pause { opacity: 1; visibility: visible; transform: scale(1); }
.center-icon-bg {
    width: 72px; height: 72px; background: rgba(0,0,0,0.65); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
    pointer-events: auto; cursor: pointer; transition: transform 0.2s, background 0.2s;
}
.center-icon-bg:active { transform: scale(0.95); }
.center-icon-bg svg { width: 40px; height: 40px; }

/* ======================================================
   CONTROLES DE VÍDEO (ESTÉTICA EXATA YOUTUBE)
====================================================== */
.custom-controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 0 12px 10px 12px; display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); 
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; z-index: 20;
}
#playerContainer.show-controls .custom-controls { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* BARRA DE PROGRESSO E BUFFER (ATUALIZADO) */
.progress-container { width: 100%; height: 5px; background: rgba(255,255,255,0.2); cursor: pointer; position: relative; transition: height 0.1s; margin-bottom: 8px; }
.progress-container::before { content: ''; position: absolute; top: -15px; bottom: -15px; left: 0; right: 0; z-index: 1; }
.progress-container:hover { height: 7px; }

/* Novo: Estilo da Barra de Buffer */
.buffer-bar { position: absolute; left: 0; top: 0; height: 100%; background: rgba(255, 255, 255, 0.4); z-index: 1; width: 0%; pointer-events: none; transition: width 0.1s linear; }

.progress-bar { height: 100%; background: var(--yt-red); width: 0%; pointer-events: none; position: relative; z-index: 2; }
.progress-bar::after { content: ''; position: absolute; right: -6px; top: -4.5px; width: 14px; height: 14px; background: var(--yt-red); border-radius: 50%; opacity: 0; transition: opacity 0.2s, transform 0.1s; }
#playerContainer.show-controls .progress-bar::after { opacity: 1; transform: scale(1); }
.progress-container:hover .progress-bar::after { transform: scale(1.3); }

/* BOTÕES INFERIORES NATIVOS YOUTUBE */
.controls-main { display: flex; justify-content: space-between; align-items: center; }
.controls-left, .controls-right { display: flex; align-items: center; gap: 4px; }

.ctrl-pill { display: flex; align-items: center; justify-content: center; height: 44px; background: transparent; }
.time-pill { padding: 0 12px; }

.controls-main button { background: transparent; border: none; color: white; cursor: pointer; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 8px; opacity: 0.9; }
.controls-main button svg { width: 28px; height: 28px; }
.controls-main button:hover { opacity: 1; }
#ctrl-time { font-size: 13px; font-weight: 400; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }

#ctrl-cc { position: relative; }
.cc-underline { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 16px; height: 3px; background-color: var(--yt-red); border-radius: 2px; opacity: 0; transition: opacity 0.2s; }
#ctrl-cc.active svg { opacity: 1; }
#ctrl-cc.active .cc-underline { opacity: 1; }

#ctrl-mute svg path { transition: fill 0.2s; }
#ctrl-mute.muted svg path { fill: #ef4444 !important; }

/* EFEITO VOLUME SLIDER */
.volume-pill { display: flex; align-items: center; width: 44px; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; padding: 0; }
.volume-pill:hover, .volume-pill:focus-within { width: 110px; padding-right: 12px; }
.volume-pill #ctrl-mute { width: 44px; height: 44px; flex-shrink: 0; }
.volume-slider-wrapper { width: 0; opacity: 0; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; display: flex; align-items: center; margin-left: -4px; }
.volume-pill:hover .volume-slider-wrapper, .volume-pill:focus-within .volume-slider-wrapper { width: 60px; opacity: 1; }
#volume-slider { -webkit-appearance: none; width: 100%; height: 4px; background: linear-gradient(to right, #fff 100%, rgba(255, 255, 255, 0.3) 100%); border-radius: 2px; outline: none; cursor: pointer; }
#volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer; }

/* AUTOPLAY SWITCH */
.autoplay-wrapper { display: flex; align-items: center; margin: 0 8px; cursor: pointer; }
.autoplay-toggle { width: 34px; height: 18px; background: rgba(255,255,255,0.2); border-radius: 10px; position: relative; transition: 0.3s; }
.autoplay-toggle.active { background: rgba(255,255,255,0.9); }
.autoplay-circle { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.autoplay-toggle.active .autoplay-circle { left: 18px; background: #000; }
.autoplay-circle svg { width: 10px; height: 10px; display: none; }
.autoplay-toggle.active .autoplay-circle svg { display: block; fill: #fff; }
.autoplay-notice { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.9); color: white; padding: 10px 18px; border-radius: 4px; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 30; }
.autoplay-notice.show { opacity: 1; }

/* ======================================================
   RESPONSIVO CELULAR (BOTÕES 44PX EXATOS)
====================================================== */
@media (max-width: 1023px) {
    #ctrl-theater { display: none; }
}

@media (max-width: 768px) {
    .yt-header { padding: 0 6px !important; gap: 6px !important; }
    .yt-logo { font-size: 16px !important; }
    .yt-logo span { display: inline !important; } 
    .search-wrapper { max-width: none !important; flex: 1 !important; display: flex !important; }
    .search-box { background: #121212 !important; border: 1px solid var(--yt-surface) !important; border-radius: 20px !important; }
    .search-box input { font-size: 14px !important; padding: 6px 10px !important; min-width: 40px !important; flex: 1 !important; background: transparent !important; color: #fff !important; }
    .search-box button { padding: 0 10px !important; font-size: 16px !important; border-left: 1px solid #303030 !important; border-radius: 0 20px 20px 0 !important; }
    
    .btn-create .btn-text { display: none !important; }
    .btn-create .btn-icon { display: block !important; }
    .btn-create { width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; }

    .main-layout { padding: 16px 0 40px !important; }
    .video-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 !important; }
    .thumbnail-container { border-radius: 0 !important; } 
    .card-info { padding: 0 16px !important; }
    .watch-layout { padding: 0 !important; }
    #videoInfoArea, #sidebarArea { padding: 0 16px !important; max-width: 100vw !important; box-sizing: border-box !important; }
    
    #player-view.full #playerWrapper { border-radius: 0 !important; position: sticky !important; top: 0 !important; z-index: 5000 !important; }
    
    .player-channel-row { flex-direction: column !important; align-items: flex-start !important; }
    .action-buttons { overflow-x: auto !important; padding-bottom: 8px !important; width: 100% !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
    .action-buttons::-webkit-scrollbar { display: none !important; } 
    .related-card .thumbnail-container { width: 140px !important; }

    /* MINIPLAYER MOBILE - ÁREAS DE TOQUE 44PX */
    #player-view.mini { width: 260px !important; bottom: 20px !important; right: 10px !important; }
    #player-view.mini #mini-controls { opacity: 1 !important; background: transparent !important; z-index: 40 !important;} 
    
    #mini-expand { position: absolute !important; top: 6px !important; left: 6px !important; background: rgba(0,0,0,0.85) !important; width: 44px !important; height: 44px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    #mini-close { position: absolute !important; top: 6px !important; right: 6px !important; background: rgba(0,0,0,0.85) !important; width: 44px !important; height: 44px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    #mini-expand svg, #mini-close svg { width: 26px !important; height: 26px !important; }
    #mini-play { display: none !important; } 

    /* CONTROLES PRINCIPAIS MOBILE */
    .custom-controls { bottom: 0 !important; left: 0 !important; right: 0 !important; gap: 8px !important; padding: 12px 6px 6px 6px !important; }
    .controls-left, .controls-right { gap: 0 !important; }
    
    .ctrl-pill { height: 44px !important; }
    .time-pill { padding: 0 4px !important; }
    .controls-main button { width: 40px !important; height: 40px !important; padding: 6px !important; }
    .controls-main button svg { width: 26px !important; height: 26px !important; }
    
    #ctrl-time { font-size: 12px !important; }
    .progress-container { height: 4px !important; margin-bottom: 6px !important; }
    .progress-bar::after { width: 14px !important; height: 14px !important; top: -5px !important; right: -7px !important; }
    .volume-pill { width: 40px !important; }
    .volume-pill:hover { width: 40px !important; padding-right: 0; }
    .volume-slider-wrapper { display: none !important; }
}

/* ======================================================
   TELA CHEIA NATIVA
====================================================== */
#playerContainer:fullscreen,
#playerContainer:-webkit-full-screen,
#playerContainer:-moz-full-screen,
#playerContainer:-ms-fullscreen { width: 100vw !important; height: 100vh !important; background-color: #000 !important; position: fixed !important; top: 0 !important; left: 0 !important; z-index: 99999 !important; margin: 0 !important; padding: 0 !important; }
#playerContainer:fullscreen #main-video,
#playerContainer:-webkit-full-screen #main-video { object-fit: contain !important; width: 100% !important; height: 100% !important; }
#playerContainer:fullscreen .custom-controls,
#playerContainer:-webkit-full-screen .custom-controls { bottom: 0 !important; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px !important; }

#playerContainer.fake-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 99999 !important; background: #000 !important; }
#playerContainer.fake-fullscreen #main-video { object-fit: contain !important; }
#playerContainer.fake-fullscreen .custom-controls { bottom: 0 !important; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px !important; }