/*
  CLICK TV reference design integration - 2026-08-11
  Visual source: Final design al device.html
  This file changes presentation only. Production player IDs and playback code
  remain owned by app.js, series.js and the existing player styles.
*/
:root{
  --ref-bg:#06080d;
  --ref-surface:#0b1019;
  --ref-surface-2:#0e1622;
  --ref-surface-3:#121c2b;
  --ref-line:#273349;
  --ref-line-2:#1d293b;
  --ref-text:#f5f7fb;
  --ref-muted:#91a0b4;
  --ref-pink:#ff304f;
  --ref-pink-2:#e51f43;
  --ref-green:#14d99a;
  --ref-font:"Manrope","Noto Sans Bengali","Plus Jakarta Sans","Nirmala UI",sans-serif;
  --ref-notice-h:22px;
  --ref-header-h:54px;
}

html,body,button,input,select,textarea{font-family:var(--ref-font)!important}
html,body{background:var(--ref-bg)!important;color:var(--ref-text)!important}
body{
  min-height:100dvh!important;
  background:
    radial-gradient(900px 520px at 12% -15%,rgba(45,69,105,.18),transparent 58%),
    radial-gradient(900px 540px at 90% 0%,rgba(255,48,79,.08),transparent 62%),
    linear-gradient(180deg,#06080d,#020106)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Thin top notice from the supplied design; its existing close/state logic stays intact. */
.sticky-notice{
  position:relative!important;
  z-index:1000!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:var(--ref-notice-h)!important;
  min-height:var(--ref-notice-h)!important;
  padding:0 34px 0 18px!important;
  overflow:hidden!important;
  border:0!important;
  border:0!important;
  background:#0a0f17!important;
  color:#d8dee8!important;
  font-size:13px!important;
  font-weight:750!important;
}
.sticky-notice .marquee-text{font-family:"Noto Sans Bengali",var(--ref-font)!important}
.sticky-notice[hidden],.sticky-notice.notice-dismissed{display:none!important}
.sticky-notice .close-btn{
  right:7px!important;z-index:3!important;width:20px!important;height:20px!important;border:0!important;
  background:transparent!important;color:#c4cedb!important;font-size:16px!important;
  pointer-events:auto!important;touch-action:manipulation!important;
}
.sticky-notice .close-btn:hover,.sticky-notice .close-btn:focus-visible{color:#fff!important;background:rgba(255,255,255,.07)!important}

/* Desktop top bar */
.app-header{
  display:grid!important;
  grid-template-columns:225px minmax(0,1fr) auto!important;
  align-items:center!important;
  width:100%!important;
  height:var(--ref-header-h)!important;
  min-height:var(--ref-header-h)!important;
  padding:0 24px!important;
  gap:18px!important;
  border:0!important;
  background:linear-gradient(180deg,#0b1019,#070a10)!important;
}
.app-header .header-left{min-width:0!important}
.app-header .brand h1{gap:9px!important;font-size:22px!important;letter-spacing:-.6px!important}
.app-header .brand-mark{
  width:29px!important;height:29px!important;flex:0 0 29px!important;
  border:3px solid var(--ref-pink)!important;box-shadow:none!important;
}
.app-header .brand-mark::after{
  inset:auto!important;left:9px!important;top:6px!important;width:0!important;height:0!important;
  border-left:10px solid var(--ref-pink)!important;border-top:6px solid transparent!important;
  border-bottom:6px solid transparent!important;border-radius:0!important;background:transparent!important;
}
.app-header .header-center{
  position:static!important;display:flex!important;align-self:stretch!important;
  width:auto!important;max-width:none!important;transform:none!important;
}
.desktop-main-navigation.final-nav-shell{
  display:block!important;width:100%!important;height:100%!important;padding:0!important;
  border:0!important;background:transparent!important;
}
.desktop-main-navigation .final-nav-arrow{display:none!important}
.desktop-main-navigation .final-main-nav{
  display:flex!important;align-items:stretch!important;justify-content:flex-start!important;
  height:100%!important;gap:8px!important;overflow:visible!important;
}
.desktop-main-navigation .final-main-button{
  position:relative!important;display:grid!important;place-items:center!important;
  min-width:125px!important;height:100%!important;padding:0 16px!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  color:#e8edf5!important;font-size:15px!important;font-weight:800!important;
}
.desktop-main-navigation .final-main-button.active{
  border:0!important;border-radius:0!important;background:transparent!important;color:#ff4962!important;box-shadow:none!important;
}
.desktop-main-navigation .final-main-button.active::after{
  content:"";position:absolute;left:27px;right:27px;bottom:0;height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--ref-pink-2),var(--ref-pink));
  box-shadow:0 0 16px rgba(241,18,105,.5);
}
.desktop-main-navigation .final-main-button[data-final-key="favorites"]{display:none!important}
.app-header .header-right{min-width:0!important;gap:10px!important}
@media (min-width:1181px){
  .app-header .header-right{min-width:286px!important;justify-content:flex-end!important}
}
.app-header .search-wrap{
  width:40px!important;height:38px!important;border:1px solid #2a3549!important;
  border-radius:11px!important;background:#0b111b!important;transition:width .2s ease!important;
}
.app-header .search-wrap:focus-within{width:235px!important}
.app-header .search-wrap.search-open{width:235px!important}
.app-header .search-wrap input{width:0!important;min-width:0!important;padding:0!important;opacity:0!important}
.app-header .search-wrap:focus-within input{width:auto!important;padding:0 12px!important;opacity:1!important}
.app-header .search-wrap.search-open input{width:auto!important;padding:0 12px!important;opacity:1!important}
.app-header .search-btn{width:40px!important;flex:0 0 40px!important;border:0!important;color:#fff!important}
.app-header .header-glow-btn{
  height:38px!important;padding:0 13px!important;border:1px solid #2a3549!important;
  border-radius:11px!important;background:#0b111b!important;font-size:13px!important;font-weight:800!important;
}
.app-header #subscribeBtn{border:0!important;background:linear-gradient(135deg,#d91f3e,var(--ref-pink))!important}
.mobile-bottom-action{display:none}

/* Three-column desktop workspace */
.youtube-layout.final-shell{
  display:grid!important;
  grid-template-columns:215px minmax(0,1fr) clamp(390px,24vw,460px)!important;
  grid-template-areas:"rail player catalog"!important;
  gap:10px!important;width:100%!important;max-width:none!important;
  height:calc(100dvh - var(--ref-notice-h) - var(--ref-header-h))!important;
  padding:14px 18px 16px!important;margin:0!important;overflow:hidden!important;align-items:stretch!important;
}
.desktop-category-rail{
  grid-area:rail;display:flex;flex-direction:column;min-width:0;min-height:0;
  padding:10px;overflow:hidden;border:1px solid var(--ref-line);border-radius:15px;
  background:linear-gradient(180deg,#0d1420,#0a1019);
}
.category-rail-title{
  min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;
  border:1px solid #2a384e;border-radius:10px;background:#101824;font-size:15px;font-weight:900;
}
.category-rail-title small{color:#ff5369;font-size:8px;font-weight:900}
.desktop-sub-navigation.final-sub-shell{
  display:block!important;margin-top:7px!important;padding:0!important;border:0!important;background:transparent!important;
}
.desktop-sub-navigation .final-nav-arrow{display:none!important}
.desktop-sub-navigation .final-sub-nav{display:flex!important;flex-direction:column!important;gap:0!important;overflow:visible!important}
.desktop-sub-navigation .final-sub-button{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;
  width:100%!important;min-height:50px!important;padding:0 14px 0 38px!important;text-align:left!important;
  border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;
  color:#e8edf5!important;font-size:14px!important;font-weight:800!important;
}
.desktop-sub-navigation .final-sub-button::before{
  content:"◌";position:absolute;left:14px;width:18px;text-align:center;color:#dce5f2;font-size:12px;
}
.desktop-sub-navigation .final-sub-button[data-final-key="today-match"]::before{content:"▣"}
.desktop-sub-navigation .final-sub-button[data-final-key="upcoming"]::before{content:"▱"}
.desktop-sub-navigation .final-sub-button[data-final-key="sports-channel"]::before{content:"◉"}
.desktop-sub-navigation .final-sub-button.active{
  border-color:rgba(255,48,79,.58)!important;
  background:linear-gradient(135deg,rgba(255,48,79,.18),rgba(17,25,38,.54))!important;
  color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.16)!important;
}
.category-rail-note{margin:14px 8px 0;padding-top:13px;border-top:1px solid #243047;color:#8795a8;font-size:10px;line-height:1.55}
.left-column{grid-area:player!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-content:start!important;justify-content:stretch!important;gap:10px!important;width:100%!important;height:100%!important}
.mobile-main-navigation,.mobile-sub-navigation,.final-mobile-search{display:none!important}
.video-container-wrap{
  width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;aspect-ratio:16/9!important;
  border:1px solid var(--ref-line)!important;border-radius:15px!important;background:#010106!important;box-shadow:none!important;
}
.video-container-wrap .video-container,#videoPlayer{height:100%!important;background:#010106!important}
.video-container-wrap #videoPlayer{object-fit:contain!important;object-position:center center!important}
.video-container-wrap .player-controls{padding:16px 13px 10px!important;background:linear-gradient(transparent,rgba(0,0,0,.95))!important}
.video-container-wrap .ctrl-btn{border-color:#2a3548!important;background:#080d14db!important;border-radius:999px!important}
.video-container-wrap .progress-fill{background:var(--ref-pink)!important;box-shadow:0 0 13px rgba(255,48,79,.65)!important}
.video-meta{
  height:84px!important;min-height:84px!important;max-height:84px!important;margin:0!important;padding:10px 14px!important;
  border:1px solid var(--ref-line)!important;border-radius:14px!important;
  background:linear-gradient(180deg,#0d1420,#0a1019)!important;overflow:hidden!important;
}
.video-meta #metaTitle{font-size:18px!important;font-weight:900!important}
.video-meta .meta-title-row::before{
  content:"NOW PLAYING";position:absolute;left:0;top:1px;color:var(--ref-green);font-size:9px;font-weight:950;letter-spacing:1px;
}
.video-meta .meta-title-row{position:relative!important;min-height:100%!important;margin:0!important;padding-top:17px!important}
.video-meta .meta-actions{flex:0 0 auto!important;gap:8px!important}
.current-resolution-badge{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  min-width:76px!important;height:30px!important;padding:0 10px!important;border:1px solid rgba(20,217,154,.34)!important;
  border-radius:999px!important;background:linear-gradient(145deg,rgba(20,217,154,.13),rgba(9,25,26,.72))!important;
  color:#8fffd7!important;font-size:10px!important;font-weight:900!important;letter-spacing:.25px!important;white-space:nowrap!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.current-resolution-badge i{color:var(--ref-green)!important;font-size:9px!important}
@media (min-width:981px){
  .video-meta .meta-title-row{flex-wrap:nowrap!important;gap:10px!important}
  .video-meta #metaTitle{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* Readable fullscreen catalogue: current category by default, global only while searching. */
.video-container-wrap .fs-drawer{
  width:min(78vw,380px)!important;right:min(-78vw,-380px)!important;padding:9px!important;
}
.video-container-wrap .fs-drawer.open{right:0!important}
.video-container-wrap .fs-drawer:has(#fsDrawerList:is(.movie-drawer-grid,.movie-search-grid)){width:min(78vw,310px)!important;right:min(-78vw,-310px)!important}
.video-container-wrap .fs-drawer.open:has(#fsDrawerList:is(.movie-drawer-grid,.movie-search-grid)){right:0!important}
.video-container-wrap .fs-drawer-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:21px!important;margin:0 1px 6px!important;color:#f4f7fb!important}
.video-container-wrap .fs-drawer-heading strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important;font-weight:850!important;letter-spacing:.1px!important}
.video-container-wrap .fs-drawer-heading span{flex:0 0 auto!important;color:#96a3b5!important;font-size:9px!important;font-weight:750!important;white-space:nowrap!important}
.video-container-wrap .fs-drawer-header{display:flex!important;align-items:center!important;gap:6px!important;margin-bottom:7px!important}
.video-container-wrap .fs-drawer-search-wrap{position:relative!important;display:flex!important;align-items:center!important;min-width:0!important;flex:1 1 auto!important}
.video-container-wrap .fs-drawer-search-wrap>i{position:absolute!important;left:9px!important;z-index:2!important;color:#7f8b9e!important;font-size:9px!important;pointer-events:none!important}
.video-container-wrap .fs-drawer-search{width:100%!important;height:30px!important;padding:5px 31px 5px 25px!important;font-size:10px!important}
.video-container-wrap .fs-drawer-search::-webkit-search-cancel-button{display:none!important}
.video-container-wrap .fs-drawer-clear{position:absolute!important;right:4px!important;z-index:2!important;display:grid!important;width:22px!important;height:22px!important;padding:0!important;place-items:center!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important;color:#b8c1ce!important;cursor:pointer!important}
.video-container-wrap .fs-drawer-clear[hidden]{display:none!important}
.video-container-wrap .fs-drawer-clear:hover,.video-container-wrap .fs-drawer-clear:focus-visible{background:rgba(255,45,86,.18)!important;color:#fff!important;outline:1px solid rgba(255,45,86,.7)!important}
.video-container-wrap .fs-drawer-close{width:26px!important;height:26px!important;flex:0 0 26px!important}
.video-container-wrap .fs-drawer-search:focus-visible{outline:2px solid rgba(255,45,86,.78)!important;outline-offset:1px!important}
.video-container-wrap .fs-drawer-status{grid-column:1/-1!important;display:flex!important;min-height:150px!important;padding:24px 12px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:8px!important;text-align:center!important;color:#dce3ee!important}
.video-container-wrap .fs-drawer-status i{font-size:20px!important;color:#768398!important}
.video-container-wrap .fs-drawer-status strong{font-size:12px!important;font-weight:850!important}
.video-container-wrap .fs-drawer-status span:not(.fs-drawer-spinner){max-width:220px!important;color:#8996a9!important;font-size:9px!important;line-height:1.4!important}
.video-container-wrap .fs-drawer-spinner{width:22px!important;height:22px!important;border:2px solid rgba(255,255,255,.13)!important;border-top-color:#ff2d56!important;border-radius:50%!important;animation:fsDrawerSpin .75s linear infinite!important}
@keyframes fsDrawerSpin{to{transform:rotate(360deg)}}
.video-container-wrap .fs-drawer-match{padding:0!important;background:transparent!important;color:#ff5b79!important;font:inherit!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:76px!important;gap:8px!important;padding:1px 1px 8px!important;
}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-item{
  display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;grid-template-rows:1fr!important;align-items:center!important;
  box-sizing:border-box!important;width:100%!important;height:76px!important;min-height:76px!important;max-height:76px!important;padding:8px!important;gap:9px!important;
  border-radius:10px!important;background:rgba(255,255,255,.055)!important;
}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-item:hover{border-color:rgba(255,255,255,.2)!important;background:rgba(255,255,255,.085)!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-item:focus-visible{outline:2px solid #ff2d56!important;outline-offset:1px!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-item.active{border-color:#ff2d56!important;box-shadow:inset 3px 0 0 #ff2d56,0 0 0 1px rgba(255,45,86,.12)!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-logo-wrap{
  box-sizing:border-box!important;width:56px!important;height:56px!important;min-width:56px!important;aspect-ratio:1!important;border-radius:9px!important;
  background:rgba(255,255,255,.055)!important;
}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-logo-wrap{overflow:hidden!important;isolation:isolate!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-logo-wrap img{transition:opacity .18s ease,transform .18s ease!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-item:hover .fs-drawer-logo-wrap img{transform:scale(1.025)!important}
@media (prefers-reduced-motion:reduce){.video-container-wrap .fs-drawer-spinner{animation:none!important}.video-container-wrap #fsDrawerList .fs-drawer-logo-wrap img{transition:none!important;transform:none!important}}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-logo-wrap img{object-fit:contain!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-item.is-movie .fs-drawer-logo-wrap img{object-fit:contain!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-card-copy{display:flex!important;min-width:0!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;padding:0!important;overflow:hidden!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-title{font-size:11.5px!important;line-height:1.18!important;-webkit-line-clamp:2!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-meta{display:block!important;color:#94a1b3!important;font-size:8.5px!important;font-weight:750!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-rank{display:none!important}

/* Movie catalogue mirrors the main movie grid: poster first, then title and category. */
.video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail){grid-auto-rows:174px!important;gap:7px!important}
.video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;height:174px!important;min-height:174px!important;max-height:174px!important;padding:6px!important;gap:5px!important;
}
.video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie .fs-drawer-logo-wrap{
  position:relative!important;width:100%!important;height:118px!important;min-width:0!important;flex:0 0 118px!important;aspect-ratio:auto!important;border-radius:8px!important;
  background-color:#111824!important;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;
}
.video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie .fs-drawer-logo-wrap::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:1!important;background:rgba(7,12,20,.34)!important;pointer-events:none!important;
}
.video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie .fs-drawer-logo-wrap img{
  position:relative!important;z-index:2!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))!important;
}
.video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie .fs-drawer-card-copy{width:100%!important;min-height:43px!important;justify-content:flex-start!important;padding:1px 2px 0!important}
.video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie .fs-drawer-title{font-size:13px!important;line-height:1.16!important}
@media (max-width:600px){
  .video-container-wrap .fs-drawer{width:min(82vw,320px)!important;right:min(-82vw,-320px)!important;padding:8px!important}
  .video-container-wrap .fs-drawer.open{right:0!important}
  .video-container-wrap .fs-drawer:has(#fsDrawerList:is(.movie-drawer-grid,.movie-search-grid)){width:min(84vw,300px)!important;right:min(-84vw,-300px)!important}
  .video-container-wrap .fs-drawer.open:has(#fsDrawerList:is(.movie-drawer-grid,.movie-search-grid)){right:0!important}
  .video-container-wrap #fsDrawerList:not(.series-drawer-detail){grid-auto-rows:66px!important;gap:6px!important}
  .video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-item{grid-template-columns:48px minmax(0,1fr)!important;height:66px!important;min-height:66px!important;max-height:66px!important;padding:6px!important;gap:7px!important}
  .video-container-wrap #fsDrawerList:not(.series-drawer-detail) .fs-drawer-logo-wrap{width:48px!important;height:48px!important;min-width:48px!important}
  .video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail){grid-auto-rows:164px!important;gap:6px!important}
  .video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie{height:164px!important;min-height:164px!important;max-height:164px!important;padding:5px!important;gap:4px!important}
  .video-container-wrap #fsDrawerList:is(.movie-drawer-grid,.movie-search-grid):not(.series-drawer-detail) .fs-drawer-item.is-movie .fs-drawer-logo-wrap{width:100%!important;height:108px!important;min-width:0!important;flex-basis:108px!important}
}
.video-meta .fav-action-btn{border-color:#2b374b!important;background:#0b111b!important;border-radius:10px!important}
.video-meta .meta-subtitle-row{display:none!important}

.sidebar-section.side-panel{
  grid-area:catalog!important;height:100%!important;max-height:none!important;min-height:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.youtube-layout.final-shell:has(.sidebar-section.channel-grid-mode),
.youtube-layout.final-shell:has(.sidebar-section.sports-grid-mode){
  grid-template-columns:215px minmax(0,1fr) clamp(390px,24vw,460px)!important;
}
.youtube-layout.final-shell:has(.sidebar-section.movie-mode){
  grid-template-columns:215px minmax(0,1fr) clamp(390px,24vw,460px)!important;
}
.sidebar-scroll-area{padding:0 3px 0 10px!important;background:transparent!important;scrollbar-width:none!important;scrollbar-color:#53657f transparent!important}
.sidebar-scroll-area:hover,.sidebar-list:focus-visible{scrollbar-width:thin!important}
.sidebar-scroll-area::-webkit-scrollbar{display:block!important;width:0!important}
.sidebar-scroll-area:hover::-webkit-scrollbar,.sidebar-list:focus-visible::-webkit-scrollbar{width:4px!important}
.sidebar-scroll-area::-webkit-scrollbar-thumb{background:#53657f!important;border-radius:999px!important}
.sidebar-top-bar.card-list-meta{min-height:34px!important;padding:1px 5px 9px!important;border-bottom:1px solid #202b3d!important}
.sidebar-count{color:#f5f7fb!important;font-size:17px!important;font-weight:900!important}
.sort-select.sort-text{display:none!important}
.sidebar-list{gap:8px!important;padding-top:7px!important}
.sidebar-list.upcoming-grid{display:flex!important;flex-direction:column!important;gap:3px!important}
.sidebar-list.upcoming-grid .sidebar-item{
  grid-template-columns:100px minmax(0,1fr) auto!important;min-height:90px!important;height:90px!important;max-height:90px!important;
}
.sidebar-list.upcoming-grid .sidebar-logo-wrap{width:100px!important;min-width:100px!important;height:66px!important;padding:0!important}
.sidebar-item{
  grid-template-columns:50px minmax(0,1fr)!important;min-height:88px!important;padding:7px 8px!important;gap:8px!important;
  border:1px solid #202b3d!important;border-radius:10px!important;background:linear-gradient(180deg,#101825,#0b111b)!important;box-shadow:none!important;
}
.sidebar-item.active{border-color:var(--ref-pink)!important;background:linear-gradient(90deg,rgba(255,48,79,.14),rgba(11,17,27,.94))!important;box-shadow:inset 3px 0 0 #f11269!important}
.sidebar-logo-wrap{width:50px!important;min-width:50px!important;height:50px!important;border:1px solid #2b384d!important;border-radius:9px!important;background:#111a27!important;padding:3px!important}
.sidebar-details{padding-right:23px!important;gap:4px!important}
.sidebar-name{font-size:11.5px!important;line-height:1.22!important}
.sidebar-channel-num{top:6px!important;left:6px!important;background:#0b1220!important}
.card-fav-btn{right:6px!important;bottom:6px!important}
.source-route-badges{display:none!important}
.sidebar-list.movie-grid .movie-card{height:205px!important;min-height:205px!important;max-height:205px!important;border-color:#202b3d!important;background:#101825!important;box-shadow:none!important}
.sidebar-list.movie-grid .movie-card.active{border-color:var(--ref-pink)!important}

@media (min-width:981px){
  .sidebar-section.channel-grid-mode .sidebar-list,
  .sidebar-section.sports-grid-mode .sidebar-list{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start!important;gap:8px!important;
  }
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card{
    position:relative!important;display:grid!important;grid-template-columns:70px minmax(0,1fr)!important;
    align-items:center!important;width:100%!important;height:112px!important;min-height:112px!important;max-height:112px!important;
    padding:10px 9px!important;gap:10px!important;overflow:hidden!important;border-radius:14px!important;
    background:#090d13!important;border:1px solid #263244!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
  }
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card.active,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card.active{
    background:#0b0f16!important;border-color:#ff405b!important;box-shadow:inset 4px 0 0 #ff304f!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap{
    width:70px!important;min-width:70px!important;height:70px!important;margin:0!important;padding:5px!important;
    border-radius:14px!important;background:#f6f7f8!important;border:1px solid #354258!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-details,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-details{min-width:0!important;padding:0 23px 0 0!important;gap:5px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-name,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-name{
    min-height:32px!important;font-size:15px!important;line-height:1.08!important;font-weight:950!important;
    white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .source-route-badges,
  .sidebar-section.sports-grid-mode .channel-ref-card .source-route-badges{display:flex!important;gap:4px!important;margin-top:3px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .source-route-badge,
  .sidebar-section.sports-grid-mode .channel-ref-card .source-route-badge{height:18px!important;padding:0 5px!important;font-size:7px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-channel-num,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-channel-num{
    z-index:5!important;top:6px!important;left:6px!important;width:29px!important;height:29px!important;
    display:grid!important;place-items:center!important;border:1px solid #ff6a7d!important;border-radius:50%!important;
    background:linear-gradient(180deg,#ff405b,#c51d3c)!important;color:#fff!important;font-size:11px!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .card-fav-btn,
  .sidebar-section.sports-grid-mode .channel-ref-card .card-fav-btn{
    top:auto!important;right:7px!important;bottom:7px!important;width:30px!important;height:30px!important;border-radius:50%!important;
  }
}

/* Live Sports only: keep event and sports-channel logos fully visible. */
.sidebar-section.event-list-mode .sidebar-logo-wrap,
.sidebar-section.sports-grid-mode .sidebar-logo-wrap{
  padding:5px!important;
}
.sidebar-section.event-list-mode .sidebar-logo-wrap img,
.sidebar-section.sports-grid-mode .sidebar-logo-wrap img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Series module: keep its data/playback handlers, match the supplied two-column detail. */
.sidebar-section.series-mode{border:1px solid var(--ref-line)!important;border-radius:15px!important;background:linear-gradient(180deg,#0d1420,#0a1019)!important}
.sidebar-section.series-mode .sidebar-scroll-area{padding:0!important}
.series-detail-shell{padding:12px 10px 14px!important}
.series-episode-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.series-episode-card{grid-template-columns:44px minmax(0,1fr) auto!important;min-height:72px!important;padding:7px!important}
.series-episode-number{min-height:55px!important;font-size:19px!important}

/* Mid-size desktops preserve the same composition with tighter columns. */
@media (max-width:1180px) and (min-width:981px){
  .app-header{grid-template-columns:190px minmax(0,1fr) auto!important;padding-inline:16px!important}
  .desktop-main-navigation .final-main-button{min-width:100px!important;padding-inline:9px!important;font-size:13px!important}
  .youtube-layout.final-shell{grid-template-columns:195px minmax(0,1fr) 390px!important;padding-inline:12px!important;gap:10px!important}
  .category-rail-title small{display:none}
}

@media (max-width:1439px) and (min-width:1181px){
  .youtube-layout.final-shell{grid-template-columns:215px minmax(0,1fr) 390px!important}
}

/* Phone/tablet reference design */
@media (max-width:980px){
  :root{--ref-header-h:58px;--ref-notice-h:26px}
  html,body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
  body{display:block!important;padding-bottom:0!important}
  .sticky-notice{flex:0 0 var(--ref-notice-h)!important;height:var(--ref-notice-h)!important;min-height:var(--ref-notice-h)!important;padding:0 27px 0 9px!important;font-size:9.2px!important}
  .sticky-notice .close-btn{width:20px!important;height:20px!important;font-size:16px!important}
  .app-header{
    position:fixed!important;left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;z-index:1500!important;
    display:flex!important;width:auto!important;height:58px!important;min-height:58px!important;padding:0 13px!important;
    border:1px solid #2a3549!important;border-radius:14px!important;background:linear-gradient(180deg,#111a29,#0b111b)!important;
    box-shadow:0 12px 35px rgba(0,0,0,.52)!important;
  }
  .app-header .brand h1{font-size:20px!important;gap:8px!important}
  .app-header .brand-mark{width:27px!important;height:27px!important;flex-basis:27px!important;border-width:3px!important}
  .app-header .brand-mark::after{left:8px!important;top:5px!important;border-left-width:9px!important;border-top-width:6px!important;border-bottom-width:6px!important}
  .app-header .header-center,.app-header .desktop-search,.app-header .header-glow-btn{display:none!important}
  .app-header .header-right{display:flex!important;margin-left:auto!important;gap:8px!important}
  .mobile-bottom-action{position:relative;display:grid!important;place-items:center;width:38px;height:38px;padding:0;border:0;background:transparent;color:#eef3fa;font-size:17px}
  .mobile-notify-dot{position:absolute;right:1px;top:1px;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:var(--ref-pink);color:#fff;font-size:7px;font-weight:900}

  .youtube-layout.final-shell{
    display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:0!important;
    padding:0 9px 76px!important;gap:0!important;overflow:visible!important;
  }
  .desktop-category-rail{display:none!important}
  .left-column{display:flex!important;flex:0 0 auto!important;flex-direction:column!important;width:100%!important;height:auto!important;gap:0!important}
  .mobile-main-navigation{
    order:1!important;display:block!important;width:calc(100% + 18px)!important;height:62px!important;margin:0 -9px!important;padding:8px 9px 7px!important;border:0!important;border-radius:0!important;background:transparent!important;
  }
  .mobile-main-navigation .final-nav-arrow{display:none!important}
  .mobile-main-navigation .final-main-nav{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important;width:100%!important;overflow:visible!important;
  }
  .mobile-main-navigation .final-main-button{
    position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    min-width:0!important;min-height:47px!important;height:47px!important;padding:3px 1px!important;border:0!important;border-radius:0!important;
    background:transparent!important;color:#dce3ed!important;font-size:10px!important;font-weight:800!important;line-height:1.15!important;
  }
  .mobile-main-navigation .final-main-button::before{display:block;margin-bottom:4px;font-family:"Font Awesome 6 Free";font-size:19px;font-weight:900;line-height:1}
  .mobile-main-navigation .final-main-button[data-final-key="sports"]::before{content:"\f1e3"}
  .mobile-main-navigation .final-main-button[data-final-key="live-tv"]::before{content:"\f26c"}
  .mobile-main-navigation .final-main-button[data-final-key="movies"]::before{content:"\f008"}
  .mobile-main-navigation .final-main-button[data-final-key="drama"]::before{content:"\f630"}
  .mobile-main-navigation .final-main-button[data-final-key="favorites"]{display:none!important}
  .mobile-main-navigation .final-main-button.active{color:var(--ref-pink)!important}

  .video-container-wrap{order:3!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;border-radius:14px!important}
  .video-container-wrap .player-controls{padding:7px 7px 8px!important}
  .video-container-wrap .ctrl-btn{width:29px!important;min-width:29px!important;height:29px!important;font-size:9px!important}
  .video-container-wrap .controls-row{gap:3px!important}
  .video-container-wrap .ctrl-left,.video-container-wrap .controls-right{gap:3px!important}
  .video-container-wrap #volumeSlider{display:none!important}
  .video-container-wrap .live-indicator-pill{min-width:32px!important;height:28px!important;padding:0 5px!important;font-size:8px!important}
  .video-meta{order:4!important;height:56px!important;min-height:56px!important;max-height:56px!important;margin:1px 0 0!important;padding:8px 10px!important;border:0!important;border-radius:0!important;background:transparent!important}
  .video-meta .meta-title-row::before{color:#ff4d62!important}
  .current-resolution-badge{display:none!important}
  .video-meta .meta-title-row{padding-top:15px!important}
  .video-meta .meta-title-row::before{top:1px!important;font-size:8px!important}
  .video-meta #metaTitle{font-size:17px!important;line-height:1.15!important}
  .video-meta .meta-subtitle-row{display:none!important}
  .video-meta .fav-action-btn{height:42px!important;min-height:42px!important;padding:0 13px!important;border-color:#2b374b!important;background:#0b111b!important}
  #mobileSearchToggleBtn{display:none!important}
  .final-mobile-search{order:5!important;margin:0 0 7px!important}
  .final-mobile-search[style*="display: flex"]{display:flex!important}
  .mobile-sub-navigation{
    order:2!important;display:block!important;width:calc(100% + 18px)!important;height:46px!important;margin:0 -9px 3px!important;padding:2px 9px 9px!important;border:0!important;border-radius:0!important;background:transparent!important;
  }
  .mobile-sub-navigation .final-nav-arrow{display:none!important}
  .mobile-sub-navigation .final-sub-nav{display:flex!important;gap:7px!important;overflow-x:auto!important;scrollbar-width:none!important}
  .mobile-sub-navigation .final-sub-button{
    flex:0 0 auto!important;min-height:34px!important;height:34px!important;padding:0 12px!important;border:1px solid #29374c!important;border-radius:10px!important;
    background:#0d1521!important;color:#e3e9f2!important;font-size:10px!important;font-weight:800!important;
  }
  .mobile-sub-navigation .final-sub-button.active{border-color:var(--ref-pink)!important;background:rgba(255,48,79,.12)!important;color:#fff!important}
  .sidebar-section.side-panel{flex:0 0 auto!important;width:100%!important;height:auto!important;min-height:0!important;margin-top:6px!important;border:0!important;background:transparent!important}
  .sidebar-scroll-area{height:auto!important;padding:0 7px 12px!important;overflow:visible!important;background:transparent!important}
  .sidebar-top-bar.card-list-meta{display:none!important}
  .sidebar-list{display:flex!important;flex-direction:column!important;gap:6px!important;padding-top:0!important}
  .sidebar-item,.sidebar-list.upcoming-grid .sidebar-item{
    display:grid!important;grid-template-columns:82px minmax(0,1fr) auto!important;width:100%!important;
    min-height:78px!important;height:78px!important;max-height:78px!important;padding:6px 8px!important;gap:8px!important;
    border:1px solid #202b3d!important;border-radius:10px!important;background:linear-gradient(180deg,#101825,#0b111b)!important;
  }
  .sidebar-item.active{border-color:var(--ref-pink)!important;box-shadow:inset 3px 0 0 var(--ref-pink)!important}
  .sidebar-logo-wrap,.sidebar-list.upcoming-grid .sidebar-logo-wrap{width:82px!important;min-width:82px!important;height:64px!important;padding:3px!important}
  .sidebar-details{padding-right:28px!important}
  .sidebar-name{font-size:12px!important;line-height:1.2!important}
  .sidebar-meta-row{font-size:8px!important}
  .card-fav-btn{right:7px!important;top:7px!important;bottom:auto!important}
  .sidebar-list.movie-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .sidebar-list.movie-grid .movie-card{height:230px!important;min-height:230px!important;max-height:230px!important;border-radius:12px!important}
  .sidebar-section.series-mode{border:1px solid var(--ref-line)!important;border-radius:13px!important;overflow:hidden!important}
  .series-detail-shell{padding:10px!important}
  .series-detail-main{grid-template-columns:102px minmax(0,1fr)!important;gap:12px!important}
  .series-detail-poster{width:102px!important;height:154px!important}
  .series-episode-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .series-episode-card{position:relative!important;grid-template-columns:42px minmax(0,1fr)!important;height:63px!important;min-height:63px!important;max-height:63px!important;padding:6px!important;gap:6px!important}
  .series-episode-number{min-height:49px!important;font-size:17px!important}
  .series-episode-copy strong{font-size:8.5px!important;white-space:nowrap!important;display:block!important}
  .series-episode-copy small{font-size:7px!important}
  .series-episode-state,.series-episode-state-placeholder{position:absolute!important;right:3px!important;bottom:3px!important;min-height:14px!important;padding-inline:4px!important;font-size:6px!important}
}

@media (max-width:420px){
  .mobile-main-navigation .final-main-button{font-size:9.5px!important}
  .sidebar-item,.sidebar-list.upcoming-grid .sidebar-item{grid-template-columns:82px minmax(0,1fr) auto!important}
  .sidebar-list.movie-grid .movie-card{height:220px!important;min-height:220px!important;max-height:220px!important}
}

@media (max-width:360px){
  .app-header{left:5px!important;right:5px!important;bottom:5px!important}
  .youtube-layout.final-shell{padding-inline:5px!important}
  .mobile-main-navigation .final-main-button{font-size:8.8px!important}
  .mobile-sub-navigation .final-sub-button{padding-inline:10px!important}
  .video-container-wrap .ctrl-btn{width:27px!important;min-width:27px!important;height:27px!important}
  .sidebar-item,.sidebar-list.upcoming-grid .sidebar-item{grid-template-columns:72px minmax(0,1fr) auto!important}
  .sidebar-logo-wrap,.sidebar-list.upcoming-grid .sidebar-logo-wrap{width:72px!important;min-width:72px!important}
  .sidebar-list.movie-grid .movie-card{height:200px!important;min-height:200px!important;max-height:200px!important}
}

/* Live TV and Live Sports > Sports: compact glass cards. */
@media (min-width:981px){
  .sidebar-section.channel-grid-mode .sidebar-list,
  .sidebar-section.sports-grid-mode .sidebar-list{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;align-content:start!important;
  }
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card{
    position:relative!important;display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;align-items:center!important;
    width:100%!important;height:88px!important;min-height:88px!important;max-height:88px!important;padding:8px 10px!important;gap:9px!important;
    overflow:hidden!important;border-radius:13px!important;background:linear-gradient(145deg,rgba(19,30,47,.82),rgba(10,17,27,.72))!important;
    border:1px solid rgba(89,111,145,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card:hover,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card:hover{background:linear-gradient(145deg,rgba(24,38,58,.9),rgba(12,21,33,.8))!important;border-color:#3a4a61!important}
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card.active,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card.active{background:linear-gradient(145deg,rgba(28,38,56,.94),rgba(12,20,31,.88))!important;border-color:#d63353!important;box-shadow:inset 4px 0 0 #e02d4f!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap{
    width:50px!important;min-width:50px!important;height:50px!important;margin:0!important;padding:3px!important;border-radius:10px!important;
    background:linear-gradient(145deg,rgba(34,48,69,.72),rgba(13,22,35,.68))!important;border:1px solid rgba(122,145,178,.32)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 14px rgba(0,0,0,.2)!important;
    backdrop-filter:blur(10px) saturate(125%)!important;-webkit-backdrop-filter:blur(10px) saturate(125%)!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap img,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap img{
    width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;
    padding:0!important;border:0!important;border-radius:7px!important;background:transparent!important;object-fit:contain!important;object-position:center!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-details,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-details{min-width:0!important;padding:0!important;gap:4px!important;align-self:center!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-name,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-name{
    display:-webkit-box!important;min-height:0!important;margin:0!important;color:#fff!important;font-size:15px!important;line-height:1.08!important;font-weight:950!important;
    white-space:normal!important;overflow:hidden!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-sub-info,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-sub-info{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:4px 6px!important;margin-top:4px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .card-live-badge,
  .sidebar-section.sports-grid-mode .channel-ref-card .card-live-badge{display:inline-flex!important;height:14px!important;padding:0 4px!important;font-size:6px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-meta-row,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-meta-row{
    display:block!important;max-width:100%!important;color:#8794a7!important;font-size:9px!important;line-height:1!important;font-weight:850!important;
    text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .source-route-badges,
  .sidebar-section.sports-grid-mode .channel-ref-card .source-route-badges,
  .sidebar-section.channel-grid-mode .channel-ref-card .card-fav-btn,
  .sidebar-section.sports-grid-mode .channel-ref-card .card-fav-btn{display:none!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-channel-num,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-channel-num{
    z-index:8!important;top:5px!important;left:5px!important;width:27px!important;height:27px!important;display:grid!important;place-items:center!important;padding:0!important;
    border-radius:50%!important;background:#07101e!important;border:1px solid #1d2d43!important;color:#fff!important;font-size:11px!important;line-height:1!important;
    font-weight:950!important;box-shadow:0 2px 8px rgba(0,0,0,.44)!important;
  }
}

@media (min-width:981px) and (max-width:1439px){
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card{grid-template-columns:48px minmax(0,1fr)!important;gap:8px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap{width:48px!important;min-width:48px!important;height:48px!important}
}

@media (max-width:980px){
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card{grid-template-columns:46px minmax(0,1fr)!important;gap:7px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap{
    width:46px!important;min-width:46px!important;height:46px!important;padding:3px!important;border-radius:9px!important;
    background:linear-gradient(145deg,rgba(34,48,69,.72),rgba(13,22,35,.68))!important;border:1px solid rgba(122,145,178,.32)!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap img,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;padding:0!important;background:transparent!important;object-fit:contain!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .source-route-badges,
  .sidebar-section.sports-grid-mode .channel-ref-card .source-route-badges,
  .sidebar-section.channel-grid-mode .channel-ref-card .card-fav-btn,
  .sidebar-section.sports-grid-mode .channel-ref-card .card-fav-btn{display:none!important}
}

/* All portal scroll handles: hidden until hover/focus, then only 3px wide. */
html,body,.sidebar-scroll-area,.sidebar-list,.fs-drawer-list,.chips-container-wrap,.movie-subcategory-bar,
.final-main-nav,.final-sub-nav,.series-season-strip,.series-drawer-seasons,.fs-series-seasons,.fs-series-episodes,.series-detail-scroll{
  scrollbar-width:none!important;scrollbar-color:rgba(102,123,153,.72) transparent!important;
}
html:hover,body:hover,.sidebar-scroll-area:hover,.sidebar-list:hover,.sidebar-list:focus-visible,
.fs-drawer-list:hover,.fs-drawer-list:focus-within,.chips-container-wrap:hover,.movie-subcategory-bar:hover,
.final-main-nav:hover,.final-sub-nav:hover,.series-season-strip:hover,.series-drawer-seasons:hover,
.fs-series-seasons:hover,.fs-series-episodes:hover,.fs-series-episodes:focus-within,.series-detail-scroll:hover,.series-detail-scroll:focus-within{
  scrollbar-width:thin!important;
}
html::-webkit-scrollbar,body::-webkit-scrollbar,.sidebar-scroll-area::-webkit-scrollbar,.sidebar-list::-webkit-scrollbar,
.fs-drawer-list::-webkit-scrollbar,.chips-container-wrap::-webkit-scrollbar,.movie-subcategory-bar::-webkit-scrollbar,
.final-main-nav::-webkit-scrollbar,.final-sub-nav::-webkit-scrollbar,.series-season-strip::-webkit-scrollbar,
.series-drawer-seasons::-webkit-scrollbar,.fs-series-seasons::-webkit-scrollbar,.fs-series-episodes::-webkit-scrollbar,.series-detail-scroll::-webkit-scrollbar{
  display:block!important;width:0!important;height:0!important;
}
html:hover::-webkit-scrollbar,body:hover::-webkit-scrollbar,.sidebar-scroll-area:hover::-webkit-scrollbar,
.sidebar-list:hover::-webkit-scrollbar,.sidebar-list:focus-visible::-webkit-scrollbar,.fs-drawer-list:hover::-webkit-scrollbar,
.chips-container-wrap:hover::-webkit-scrollbar,.movie-subcategory-bar:hover::-webkit-scrollbar,.final-main-nav:hover::-webkit-scrollbar,
.final-sub-nav:hover::-webkit-scrollbar,.series-season-strip:hover::-webkit-scrollbar,.series-drawer-seasons:hover::-webkit-scrollbar,
.fs-series-seasons:hover::-webkit-scrollbar,.fs-series-episodes:hover::-webkit-scrollbar,.series-detail-scroll:hover::-webkit-scrollbar{
  width:3px!important;height:3px!important;
}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track,.sidebar-scroll-area::-webkit-scrollbar-track,.sidebar-list::-webkit-scrollbar-track,
.fs-drawer-list::-webkit-scrollbar-track,.chips-container-wrap::-webkit-scrollbar-track,.movie-subcategory-bar::-webkit-scrollbar-track,
.final-main-nav::-webkit-scrollbar-track,.final-sub-nav::-webkit-scrollbar-track,.series-season-strip::-webkit-scrollbar-track,
.series-drawer-seasons::-webkit-scrollbar-track,.fs-series-seasons::-webkit-scrollbar-track,.fs-series-episodes::-webkit-scrollbar-track,.series-detail-scroll::-webkit-scrollbar-track{background:transparent!important}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,.sidebar-scroll-area::-webkit-scrollbar-thumb,.sidebar-list::-webkit-scrollbar-thumb,
.fs-drawer-list::-webkit-scrollbar-thumb,.chips-container-wrap::-webkit-scrollbar-thumb,.movie-subcategory-bar::-webkit-scrollbar-thumb,
.final-main-nav::-webkit-scrollbar-thumb,.final-sub-nav::-webkit-scrollbar-thumb,.series-season-strip::-webkit-scrollbar-thumb,
.series-drawer-seasons::-webkit-scrollbar-thumb,.fs-series-seasons::-webkit-scrollbar-thumb,.fs-series-episodes::-webkit-scrollbar-thumb,.series-detail-scroll::-webkit-scrollbar-thumb{
  background:rgba(102,123,153,.72)!important;border-radius:999px!important;
}

/* No dead player on Upcoming, on a phone.
 *
 * Nothing on Upcoming can be played - every card there is a fixture with a
 * kickoff still ahead of it - so on a phone the player was a black
 * half-screen sitting between the tabs and the list, pushing the first
 * fixture below the fold for no return.
 *
 * Unconditional while Upcoming is showing, including when a stream started
 * on Today Match is still running. Hiding it only while idle was tried and
 * is close to useless: the first playable Today match starts on a first
 * visit, so something is decoding almost whenever a viewer reaches this
 * tab, and the player would still be there.
 *
 * The one consequence, stated rather than designed around: a match that
 * was playing keeps its sound while Upcoming is open. Tapping Today Match
 * brings the player and its controls straight back, which is one tap on
 * the row directly above the list.
 *
 * Phone and tablet only. The desktop layout puts the player in its own
 * column beside the list, where it costs the list nothing.
 */
@media (max-width: 1000px) {
  body.upcoming-view #videoContainer,
  body.upcoming-view .video-section > .video-meta{
    display:none!important;
  }
}

/* The handle starts where the cards start.
 *
 * A scrollbar track is as tall as the element that scrolls, and the element
 * that scrolled was .sidebar-scroll-area - which holds the section header as
 * well as the list. So the track began at the top of the panel, 34 to 42px
 * above the first card, in every category:
 *
 *     Today Match   scroll area top 98   first card top 138
 *     Upcoming      scroll area top 98   first card top 140
 *     Live TV       scroll area top 98   first card top 132
 *
 * There is no way to shorten a track, so the list itself becomes the
 * scroller and the header stops scrolling with it. The header was already
 * the first flex item of a column flex container, so it only has to stop
 * flexing; the list takes the remaining height and scrolls inside it.
 *
 * Desktop only, on purpose. Below 1001px app.css hands the whole panel to
 * the page scroll and reference-design gives .sidebar-scroll-area
 * overflow:visible under 980px - and a touch device shows no handle at all
 * (see the block above), so there is nothing here to line up.
 */
@media (min-width: 1001px) {
  .sidebar-scroll-area{overflow:hidden!important}
  .sidebar-scroll-area > .sidebar-top-bar.card-list-meta{flex:0 0 auto!important}
  .sidebar-scroll-area > .sidebar-list{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }
}

/* The list handle answers to the cursor, and to nothing else.
 *
 * It used to answer to `:focus-within` as well, and that is what made it
 * stick. #sidebarList carries tabindex="0", so ONE click or tap anywhere in
 * the list focused it, `:focus-within` stayed true for as long as focus sat
 * there, and the handle stayed drawn with the cursor nowhere near it.
 *
 * Measured in Chromium on the published build, cursor parked in the corner:
 *
 *     idle                  scrollbar-width: none
 *     cursor over the list  scrollbar-width: thin     <- wanted
 *     cursor moved away     scrollbar-width: none
 *     after one click       scrollbar-width: thin     <- :hover false,
 *                                                        :focus-within true
 *
 * `:focus-visible` in its place keeps a keyboard user their handle - they
 * still need to see what they are scrolling - while a mouse click and a
 * touch tap, neither of which match it, leave the handle alone.
 *
 * A touch device gets no handle at all, which is how it behaved before: it
 * has no cursor to reveal one with, and a tap that focused the list was the
 * only thing that ever produced one.
 */
@media (hover: none) {
  .sidebar-scroll-area,.sidebar-scroll-area:hover,
  .sidebar-list,.sidebar-list:hover,.sidebar-list:focus-visible{
    scrollbar-width:none!important;
  }
  .sidebar-scroll-area::-webkit-scrollbar,.sidebar-scroll-area:hover::-webkit-scrollbar,
  .sidebar-list::-webkit-scrollbar,.sidebar-list:hover::-webkit-scrollbar,
  .sidebar-list:focus-visible::-webkit-scrollbar{
    width:0!important;height:0!important;
  }
}

/* Modern Today/Upcoming event cards. Other catalog cards keep their approved design. */
.sidebar-section.event-list-mode .sidebar-list.upcoming-grid{display:flex!important;flex-direction:column!important;gap:10px!important;padding:7px 0 12px!important}
.sidebar-section.event-list-mode .event-ref-card{
  position:relative!important;display:grid!important;grid-template-columns:112px minmax(0,1fr) 48px!important;align-items:center!important;
  width:100%!important;height:144px!important;min-height:144px!important;max-height:144px!important;padding:10px!important;gap:11px!important;overflow:hidden!important;
  border:1px solid rgba(79,98,127,.48)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(22,34,52,.96),rgba(10,16,27,.97) 72%)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;cursor:pointer!important;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.sidebar-section.event-list-mode .event-ref-card:hover,.sidebar-section.event-list-mode .event-ref-card:focus-visible{border-color:rgba(255,64,91,.68)!important;background:linear-gradient(135deg,rgba(30,44,66,.98),rgba(12,19,31,.98) 72%)!important;box-shadow:0 10px 25px rgba(0,0,0,.25),0 0 0 1px rgba(255,45,86,.10)!important;outline:0!important}
.sidebar-section.event-list-mode .event-ref-card.active{border-color:#ff405b!important;box-shadow:inset 3px 0 0 #ff304f,0 10px 25px rgba(0,0,0,.23)!important}
.sidebar-section.event-list-mode .event-card-art{position:relative!important;width:112px!important;height:100px!important;min-width:112px!important;overflow:hidden!important;border:1px solid rgba(95,113,141,.42)!important;border-radius:11px!important;background:linear-gradient(145deg,#172338,#0b1220)!important;isolation:isolate!important}
.sidebar-section.event-list-mode .event-card-art img,.sidebar-section.event-list-mode .event-card-art .logo-placeholder{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:inherit!important}
.sidebar-section.event-list-mode .event-card-art .logo-placeholder{place-items:center!important;background:radial-gradient(circle at 35% 25%,rgba(255,64,91,.24),transparent 45%),linear-gradient(145deg,#17253b,#0a111d)!important;color:#edf4ff!important;font-size:20px!important;font-weight:950!important;letter-spacing:1px!important}
.sidebar-section.event-list-mode .event-card-art-shade{position:absolute!important;inset:auto 0 0!important;height:30%!important;z-index:2!important;background:linear-gradient(transparent,rgba(4,8,15,.34))!important;pointer-events:none!important}
.sidebar-section.event-list-mode .event-card-details{display:flex!important;min-width:0!important;height:100%!important;flex-direction:column!important;justify-content:center!important;gap:4px!important;padding:2px 0!important}
.sidebar-section.event-list-mode .event-card-title{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow-wrap:anywhere!important;color:#f6f8fc!important;font-size:14.5px!important;font-weight:900!important;line-height:1.16!important}
.sidebar-section.event-list-mode .event-card-competition{display:-webkit-box!important;min-width:0!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow-wrap:anywhere!important;color:#aeb9c9!important;font-size:10.5px!important;font-weight:750!important;line-height:1.25!important}
.sidebar-section.event-list-mode .event-card-competition i{margin-right:5px!important;color:#ffc53d!important;font-size:9px!important}
.sidebar-section.event-list-mode .event-card-footer{display:flex!important;min-width:0!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;overflow:visible!important;white-space:nowrap!important}
.sidebar-section.event-list-mode .event-status-pill{display:inline-flex!important;height:20px!important;flex:0 0 auto!important;align-items:center!important;gap:4px!important;padding:0 8px!important;border-radius:999px!important;font-size:8px!important;font-weight:950!important;letter-spacing:.2px!important}
.sidebar-section.event-list-mode .event-status-pill.live{border:1px solid rgba(25,221,157,.42)!important;background:rgba(7,120,88,.22)!important;color:#65ffd0!important}
.sidebar-section.event-list-mode .event-status-pill.upcoming{border:1px solid rgba(255,190,35,.43)!important;background:rgba(137,94,0,.22)!important;color:#ffd36b!important}
.sidebar-section.event-list-mode .event-card-time{display:flex!important;min-width:0!important;align-items:center!important;gap:4px!important;overflow:visible!important;color:#b9c4d2!important;font-size:9.5px!important;font-weight:800!important;white-space:nowrap!important}
.sidebar-section.event-list-mode .event-card-action{display:flex!important;min-width:48px!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;color:#b6c1d0!important;font-size:8.5px!important;font-weight:850!important}
.sidebar-section.event-list-mode .event-card-action i{display:grid!important;width:29px!important;height:29px!important;place-items:center!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:50%!important;background:rgba(255,255,255,.055)!important;font-size:10px!important}
.sidebar-section.event-list-mode .event-card-action.watch i{border-color:rgba(25,221,157,.35)!important;background:rgba(7,120,88,.18)!important;color:#61ffd0!important}
.sidebar-section.event-list-mode .event-card-action.reminder i{border-color:rgba(255,190,35,.34)!important;background:rgba(137,94,0,.16)!important;color:#ffd36b!important}
.sidebar-section.event-list-mode .event-ref-card .sidebar-channel-num{top:5px!important;left:5px!important;z-index:5!important;background:rgba(5,11,20,.92)!important}
.sidebar-section.event-list-mode .event-ref-card .card-fav-btn{top:6px!important;right:6px!important;width:24px!important;height:24px!important;min-width:24px!important;background:rgba(6,12,21,.72)!important}

/* Metadata-only upcoming preview: no failed playback route is started. */
.event-preview-overlay{position:absolute!important;inset:0!important;z-index:34!important;display:flex!important;align-items:flex-end!important;overflow:hidden!important;visibility:hidden!important;opacity:0!important;background:linear-gradient(180deg,rgba(4,8,14,.18),rgba(4,8,14,.92))!important;color:#fff!important;transition:opacity .2s ease,visibility .2s ease!important;pointer-events:none!important}
.event-preview-overlay.show{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.event-preview-art{position:absolute!important;inset:0!important;background-color:#0b1220!important;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important}
.event-preview-art>span{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;color:rgba(255,255,255,.22)!important;font-size:70px!important;font-weight:950!important;letter-spacing:5px!important}
.event-preview-content{position:relative!important;z-index:2!important;width:min(620px,82%)!important;padding:28px 30px 32px!important;text-shadow:0 2px 10px rgba(0,0,0,.45)!important}
.event-preview-status{display:inline-flex!important;height:25px!important;align-items:center!important;gap:6px!important;padding:0 10px!important;border:1px solid rgba(255,198,55,.48)!important;border-radius:999px!important;background:rgba(128,87,0,.35)!important;color:#ffe08a!important;font-size:9px!important;font-weight:950!important;text-transform:uppercase!important}
.event-preview-content h3{max-width:620px!important;margin:11px 0 5px!important;color:#fff!important;font-size:25px!important;font-weight:950!important;line-height:1.12!important}
.event-preview-league{margin:0 0 11px!important;color:#bdc8d6!important;font-size:11px!important;font-weight:750!important}
.event-preview-time{display:flex!important;align-items:center!important;gap:7px!important;margin:0 0 12px!important;color:#ffe08a!important;font-size:13px!important;font-weight:900!important}
.event-preview-note{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important;color:#cad3df!important;font-size:10px!important;font-weight:700!important}.event-preview-note i{color:#54e9bd!important}
.event-preview-close{position:absolute!important;top:12px!important;right:12px!important;z-index:4!important;display:grid!important;width:34px!important;height:34px!important;place-items:center!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;background:rgba(5,10,18,.72)!important;color:#fff!important;cursor:pointer!important;backdrop-filter:blur(8px)!important}
.event-preview-close:hover,.event-preview-close:focus-visible{border-color:#ff405b!important;background:rgba(255,45,86,.22)!important;outline:0!important}
@media (max-width:1000px){.sidebar-section.event-list-mode .sidebar-list.upcoming-grid{gap:8px!important}.sidebar-section.event-list-mode .event-ref-card{grid-template-columns:104px minmax(0,1fr) auto!important;height:94px!important;min-height:94px!important;max-height:94px!important;padding:7px!important;gap:9px!important}.sidebar-section.event-list-mode .event-card-art{width:104px!important;min-width:104px!important;height:70px!important}.sidebar-section.event-list-mode .event-card-title{font-size:12px!important}.sidebar-section.event-list-mode .event-card-competition{font-size:8.5px!important;-webkit-line-clamp:1!important}.sidebar-section.event-list-mode .event-status-pill{height:18px!important;padding:0 7px!important;font-size:7px!important}.sidebar-section.event-list-mode .event-card-time{font-size:8px!important;overflow:hidden!important;text-overflow:ellipsis!important}.sidebar-section.event-list-mode .event-card-action{font-size:7px!important}.event-preview-content{width:90%!important;padding:22px 18px 25px!important}.event-preview-content h3{font-size:20px!important}}
@media (max-width:480px){.sidebar-section.event-list-mode .event-ref-card{grid-template-columns:92px minmax(0,1fr) 34px!important;height:88px!important;min-height:88px!important;max-height:88px!important;padding:6px!important;gap:8px!important;border-radius:12px!important}.sidebar-section.event-list-mode .event-card-art{width:92px!important;min-width:92px!important;height:66px!important}.sidebar-section.event-list-mode .event-card-title{font-size:11px!important}.sidebar-section.event-list-mode .event-card-competition{display:none!important}.sidebar-section.event-list-mode .event-card-action{min-width:30px!important}.sidebar-section.event-list-mode .event-card-action span{display:none!important}.sidebar-section.event-list-mode .event-card-time{font-size:7.5px!important}.event-preview-content{width:100%!important;padding:18px 15px 22px!important}.event-preview-content h3{font-size:17px!important}.event-preview-note{font-size:9px!important}}

/* RUMAN-26: exact mobile portal contract from the supplied reference design. */
.desktop-main-navigation .final-main-button[data-final-key="favorites"]{display:grid!important}

@media (max-width:980px){
  html,body{height:100%!important;min-height:100%!important;overflow:hidden!important}
  body{display:flex!important;flex-direction:column!important}
  .sticky-notice:not([hidden]):not(.notice-dismissed){display:flex!important;flex:0 0 var(--ref-notice-h)!important}
  .sticky-notice{font-size:10px!important;padding-inline:8px 28px!important}

  .youtube-layout.final-shell{
    display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
    width:100%!important;height:auto!important;min-height:0!important;
    padding:0 9px 74px!important;gap:0!important;overflow:hidden!important;
  }
  .left-column{display:flex!important;flex:0 0 auto!important;min-height:0!important;overflow:visible!important}

  .mobile-main-navigation{height:62px!important;min-height:62px!important;flex:0 0 62px!important}
  .mobile-main-navigation .final-main-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:1px!important}
  .mobile-main-navigation .final-main-button,
  .mobile-main-navigation .final-main-button.active{
    min-width:0!important;height:49px!important;min-height:49px!important;padding:2px 0!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  .mobile-main-navigation .final-main-button::before{content:none!important;display:none!important}
  .mobile-main-navigation .final-main-button[data-final-key="favorites"]{display:flex!important}
  .mobile-main-navigation .final-main-button.active{color:var(--ref-pink)!important}
  .mobile-main-navigation .final-main-button.active::after{
    content:""!important;position:absolute!important;left:calc(50% - 14px)!important;bottom:0!important;
    width:28px!important;height:2px!important;border-radius:999px!important;background:var(--ref-pink)!important;
  }
  .final-main-icon{display:grid!important;width:23px!important;height:23px!important;place-items:center!important;margin-bottom:3px!important}
  .final-main-icon svg{display:block!important;width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .final-main-label{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  .mobile-sub-navigation{height:46px!important;min-height:46px!important;flex:0 0 46px!important}
  .mobile-sub-navigation.sports-subnav .final-sub-nav{justify-content:center!important;width:100%!important}

  .video-meta{
    display:flex!important;height:64px!important;min-height:64px!important;max-height:64px!important;
    margin:0!important;padding:5px 4px 3px!important;overflow:visible!important;
  }
  .video-meta .meta-title-row{display:flex!important;width:100%!important;min-height:0!important;padding-top:14px!important;gap:7px!important;align-items:center!important}
  .video-meta .meta-title-row::before{top:2px!important;left:3px!important}
  .video-meta #metaTitle{min-width:0!important;margin:0!important;font-size:17px!important;line-height:1.08!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .video-meta .meta-actions{margin-left:auto!important}
  .video-meta .fav-action-btn{height:40px!important;min-height:40px!important;padding:0 11px!important}

  .sidebar-section.side-panel{
    display:block!important;flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important;
    margin:2px 0 0!important;overflow:hidden!important;
  }
  .sidebar-scroll-area{
    width:100%!important;height:100%!important;min-height:0!important;padding:0 4px 12px!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
  }
  .sidebar-list{min-height:min-content!important;padding-bottom:8px!important}

  .sidebar-section.channel-grid-mode .sidebar-list,
  .sidebar-section.sports-grid-mode .sidebar-list{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start!important;gap:7px!important;
  }
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card{
    display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;
    width:100%!important;height:84px!important;min-height:84px!important;max-height:84px!important;
    padding:7px!important;gap:7px!important;overflow:hidden!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap{
    width:52px!important;min-width:52px!important;height:52px!important;padding:3px!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-details,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-details{min-width:0!important;padding:0!important;gap:3px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-name,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-name{
    display:-webkit-box!important;font-size:11.5px!important;line-height:1.12!important;font-weight:900!important;
    white-space:normal!important;overflow:hidden!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
  }
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-meta-row,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-meta-row{display:block!important;font-size:7.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .card-fav-btn,
  .sidebar-section.sports-grid-mode .channel-ref-card .card-fav-btn{display:grid!important;width:22px!important;height:22px!important;min-width:22px!important;top:4px!important;right:4px!important;font-size:9px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-details,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-details{padding-right:16px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-channel-num,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-channel-num{width:22px!important;height:22px!important;top:4px!important;left:4px!important;font-size:8px!important}

  .sidebar-section.event-list-mode .sidebar-list.upcoming-grid{display:flex!important;flex-direction:column!important;gap:8px!important}
  .sidebar-section.movie-mode .sidebar-list.movie-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:380px){
  .mobile-main-navigation .final-main-button{font-size:8px!important}
  .final-main-icon,.final-main-icon svg{width:21px!important;height:21px!important}
  .sidebar-section.channel-grid-mode .sidebar-item.channel-ref-card,
  .sidebar-section.sports-grid-mode .sidebar-item.channel-ref-card{grid-template-columns:46px minmax(0,1fr)!important;height:78px!important;min-height:78px!important;max-height:78px!important;padding:6px!important;gap:6px!important}
  .sidebar-section.channel-grid-mode .channel-ref-card .sidebar-logo-wrap,
  .sidebar-section.sports-grid-mode .channel-ref-card .sidebar-logo-wrap{width:46px!important;min-width:46px!important;height:46px!important}
}

/* RUMAN-30: clearer event cards. Notice rules are kept at the end of the file. */
.sidebar-section.event-list-mode .event-ref-card{
  background:linear-gradient(135deg,rgba(18,29,45,.98),rgba(8,14,24,.98))!important;
  border-color:rgba(115,137,170,.32)!important;
}
.sidebar-section.event-list-mode .event-status-pill.live{
  border-color:rgba(35,230,165,.45)!important;background:rgba(4,107,77,.24)!important;color:#62ffd0!important;
}
.sidebar-section.event-list-mode .event-card-title{font-size:15px!important;line-height:1.18!important}
.sidebar-section.event-list-mode .event-card-competition{font-size:10.5px!important}
.sidebar-section.event-list-mode .event-card-time{font-size:10px!important}

@media (max-width:980px){
  .sidebar-section.event-list-mode .event-card-title{font-size:12.5px!important;line-height:1.18!important}
  .sidebar-section.event-list-mode .event-card-competition{font-size:9px!important}
  .sidebar-section.event-list-mode .event-card-time{font-size:9px!important;line-height:1.2!important}
}

/* Short landscape phones: keep the player and catalogue simultaneously reachable. */
@media (max-width:980px) and (orientation:landscape) and (max-height:500px){
  .youtube-layout.final-shell{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(270px,36vw)!important;
    grid-template-rows:minmax(0,1fr)!important;width:100%!important;
    height:calc(100dvh - var(--ref-notice-h))!important;min-height:0!important;
    padding:0 8px 68px!important;gap:8px!important;overflow:hidden!important;
  }
  .left-column{grid-column:1!important;display:flex!important;height:100%!important;min-height:0!important;overflow:hidden!important}
  .mobile-main-navigation{height:45px!important;min-height:45px!important;flex:0 0 45px!important;padding-block:1px!important}
  .mobile-main-navigation .final-main-button{height:42px!important;min-height:42px!important}
  .final-main-icon,.final-main-icon svg{width:18px!important;height:18px!important}
  .mobile-sub-navigation{height:38px!important;min-height:38px!important;flex:0 0 38px!important;padding-bottom:3px!important}
  .mobile-sub-navigation .final-sub-button{height:30px!important;min-height:30px!important}
  .video-container-wrap{flex:1 1 auto!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important}
  .video-container-wrap .video-container,#videoPlayer{object-fit:contain!important}
  .video-meta{height:50px!important;min-height:50px!important;max-height:50px!important}
  .video-meta .meta-title-row{min-height:44px!important;padding-top:12px!important}
  .video-meta #metaTitle{font-size:14px!important;max-height:31px!important}
  .sidebar-section.side-panel{grid-column:2!important;height:100%!important;min-height:0!important;margin:0!important;overflow:hidden!important}
  .sidebar-scroll-area{height:100%!important;min-height:0!important;padding-bottom:8px!important;overflow-y:auto!important}
}

/* RUMAN-29: final authoritative mobile contract. Keep this block last. */
@media (max-width:980px){
  /* Notice remains readable when animation is disabled on low-memory phones. */
  .sticky-notice{overflow:hidden!important;justify-content:center!important;padding:0 38px 0 10px!important}
  .sticky-notice .marquee-wrapper{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;overflow:hidden!important}
  .sticky-notice .marquee-text{display:block!important;max-width:100%!important;padding-left:0!important;color:#e8eef7!important;font-size:10px!important;font-weight:800!important;line-height:1.25!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html.lite-performance .sticky-notice .marquee-text,
  html.ultra-lite-performance .sticky-notice .marquee-text,
  .mobile-playback-performance .sticky-notice .marquee-text{animation:none!important;transform:none!important}
  .sticky-notice .close-btn{right:3px!important;top:50%!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;transform:translateY(-50%)!important;font-size:20px!important;line-height:1!important}

  /* Five equal main categories; selection is underline-only. */
  .mobile-main-navigation .final-main-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .mobile-main-navigation .final-main-button,
  .mobile-main-navigation .final-main-button.active{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  .mobile-main-navigation .final-main-button[data-final-key="favorites"]{display:flex!important}

  /* Sports chips are centred; all other chip rows start at the left. */
  .mobile-sub-navigation .final-sub-nav{justify-content:flex-start!important;scrollbar-width:none!important}
  .mobile-sub-navigation .final-sub-nav::-webkit-scrollbar{display:none!important}
  .mobile-sub-navigation.sports-subnav .final-sub-nav{justify-content:center!important}

  /* Compact metadata with readable two-line title and no list overlap. */
  .video-meta{height:64px!important;min-height:64px!important;max-height:64px!important;padding:4px!important;overflow:hidden!important}
  .video-meta .meta-title-row{min-height:58px!important;padding:15px 0 0!important;align-items:center!important}
  .video-meta #metaTitle{display:-webkit-box!important;min-width:0!important;max-height:38px!important;margin:0!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;text-overflow:ellipsis!important;font-size:17px!important;line-height:1.12!important}
  .video-meta .meta-actions{flex:0 0 auto!important;margin-left:7px!important}
  .video-meta .fav-action-btn{height:42px!important;min-height:42px!important;padding:0 11px!important}

  /* Only the catalogue list scrolls; navigation/player/dock remain stable. */
  .sidebar-section.side-panel{min-height:0!important;overflow:hidden!important}
  .sidebar-scroll-area{height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  .sidebar-scroll-area::-webkit-scrollbar{display:none!important}

  /* Movie and series cards share one stable outer height. Posters never crop. */
  .sidebar-list.movie-grid .movie-card,
  .sidebar-list.movie-grid .catalog-series-card{height:220px!important;min-height:220px!important;max-height:220px!important;border-radius:12px!important;overflow:hidden!important}
  .sidebar-section.movie-mode .sidebar-list.movie-grid .movie-card>img.movie-poster,
  .sidebar-list.movie-grid .series-catalog-poster .movie-poster{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:linear-gradient(145deg,#1b2637,#090e17)!important}
  .sidebar-list.movie-grid .movie-card-title,
  .sidebar-list.movie-grid .series-catalog-copy h3{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;font-size:12.5px!important;line-height:1.2!important}
  .sidebar-list.movie-grid .series-catalog-copy{min-height:72px!important;padding:7px!important}
  .sidebar-list.movie-grid .series-catalog-continue{margin-top:auto!important}

  /* Today/Upcoming stay single-column and long event metadata remains legible. */
  .sidebar-section.event-list-mode .sidebar-list.upcoming-grid{display:flex!important;flex-direction:column!important;gap:8px!important}
  .sidebar-section.event-list-mode .event-ref-card{grid-template-columns:96px minmax(0,1fr) 42px!important;height:102px!important;min-height:102px!important;max-height:102px!important;padding:7px!important;gap:9px!important}
  .sidebar-section.event-list-mode .event-card-art{width:96px!important;min-width:96px!important;height:78px!important}
  .sidebar-section.event-list-mode .event-card-title{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;white-space:normal!important;font-size:11.5px!important;line-height:1.15!important}
  .sidebar-section.event-list-mode .event-card-competition{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:1!important;font-size:8px!important;line-height:1.15!important}
  .sidebar-section.event-list-mode .event-card-footer{display:flex!important;flex-wrap:wrap!important;gap:3px 5px!important;overflow:visible!important}
  .sidebar-section.event-list-mode .event-card-time{max-width:100%!important;overflow:visible!important;white-space:normal!important;text-overflow:clip!important;font-size:8px!important;line-height:1.15!important}
  .sidebar-section.event-list-mode .event-card-action{min-width:38px!important;font-size:7px!important}

  /* One clean floating glass dock, without a second opaque strip. */
  .app-header{background:linear-gradient(145deg,rgba(18,29,45,.86),rgba(8,14,24,.78))!important;border-color:rgba(133,158,196,.30)!important;box-shadow:0 12px 34px rgba(0,0,0,.38)!important;backdrop-filter:blur(18px) saturate(145%)!important;-webkit-backdrop-filter:blur(18px) saturate(145%)!important}
  body::after{display:none!important;content:none!important}
  .youtube-layout.final-shell{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}

  /* Mobile movie-only transport layout. Live and event controls are untouched. */
  html.movie-playback-context .video-container-wrap .player-controls{background:none!important}
  html.movie-playback-context .video-container-wrap .controls-row{display:grid!important;grid-template-columns:1fr auto!important;align-items:end!important}
  html.movie-playback-context .video-container-wrap .ctrl-left{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important}
  html.movie-playback-context .video-container-wrap #playPauseBtn{width:42px!important;min-width:42px!important;height:42px!important;border-color:rgba(255,255,255,.48)!important;font-size:15px!important}
  html.movie-playback-context .video-container-wrap #skipBackBtn,
  html.movie-playback-context .video-container-wrap #skipFwdBtn,
  html.movie-playback-context .video-container-wrap #prevChBtn,
  html.movie-playback-context .video-container-wrap #nextChBtn,
  html.movie-playback-context .video-container-wrap #movieLockBtn{display:grid!important;width:32px!important;min-width:32px!important;height:32px!important}
  html.movie-playback-context .video-container-wrap #liveIndicator{display:none!important}
  .video-container-wrap.movie-controls-locked .player-controls button:not(#movieLockBtn),
  .video-container-wrap.movie-controls-locked .progress-container{opacity:.18!important;pointer-events:none!important}
}

/* The centred "tap to resume" overlay duplicates the transport's own
   play/pause button, so it never shows for the movie player. */
html.movie-playback-context #centerPlayBtn{display:none!important}

@media (max-width:380px){
  .sidebar-list.movie-grid .movie-card,
  .sidebar-list.movie-grid .catalog-series-card{height:202px!important;min-height:202px!important;max-height:202px!important}
  .sidebar-section.event-list-mode .event-ref-card{grid-template-columns:86px minmax(0,1fr) 38px!important}
  .sidebar-section.event-list-mode .event-card-art{width:86px!important;min-width:86px!important}
}

/* RUMAN-30 AUTHORITATIVE NOTICE: keep after every legacy mobile override. */
@keyframes clicktv-r30-notice{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.sticky-notice{height:30px!important;min-height:30px!important;flex:0 0 30px!important;padding:0 40px 0 0!important;overflow:hidden!important}
.sticky-notice .marquee-wrapper{display:block!important;width:100%!important;overflow:hidden!important;white-space:nowrap!important}
/* `transform` must NOT be declared here. An !important author declaration
   outranks a running animation, so `transform:translateX(0)!important` froze
   the marquee at offset 0 while `padding-left:100%` held the whole sentence
   outside the clipped wrapper — the notice looked blank and never scrolled. */
.sticky-notice .marquee-text,
html.lite-performance .sticky-notice .marquee-text,
html.ultra-lite-performance .sticky-notice .marquee-text,
.mobile-playback-performance .sticky-notice .marquee-text{
  display:inline-block!important;width:max-content!important;max-width:none!important;padding-left:100%!important;
  color:#f2f6fc!important;font-size:14px!important;font-weight:800!important;line-height:30px!important;
  text-align:left!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  animation:clicktv-r30-notice 22s linear infinite!important;will-change:transform!important;
}
.sticky-notice .close-btn{right:3px!important;top:50%!important;width:32px!important;height:30px!important;min-width:32px!important;min-height:30px!important;transform:translateY(-50%)!important}
@media (max-width:980px){
  .sticky-notice{padding:0 40px 0 0!important;justify-content:initial!important}
  .sticky-notice .marquee-wrapper{display:block!important;justify-content:initial!important}
  .sticky-notice .marquee-text,
  html.lite-performance .sticky-notice .marquee-text,
  html.ultra-lite-performance .sticky-notice .marquee-text,
  .mobile-playback-performance .sticky-notice .marquee-text{
    display:inline-block!important;max-width:none!important;padding-left:100%!important;font-size:12.5px!important;
    line-height:30px!important;text-align:left!important;overflow:visible!important;text-overflow:clip!important;
    animation:clicktv-r30-notice 18s linear infinite!important;
  }
}
/* Battery saver and "remove animations" on Android report reduced motion. The
   marquee stops there by design, so the notice becomes swipeable instead —
   otherwise the sentence is simply cut off with no way to read the rest. */
@media (prefers-reduced-motion:reduce){
  .sticky-notice .marquee-wrapper{
    overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;overscroll-behavior-x:contain!important;
  }
  .sticky-notice .marquee-wrapper::-webkit-scrollbar{display:none!important}
  .sticky-notice .marquee-text,
  html.lite-performance .sticky-notice .marquee-text,
  html.ultra-lite-performance .sticky-notice .marquee-text,
  .mobile-playback-performance .sticky-notice .marquee-text{
    padding-left:0!important;padding-right:16px!important;transform:none!important;animation:none!important;
  }
}

/* Mobile landscape movie controls: screenshot-matched bottom transport bar. */
@media (max-width:980px) and (orientation:landscape){
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen{
    position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;
    margin:0!important;border:0!important;border-radius:0!important;z-index:10000!important;background:#000!important;
  }
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .video-container,
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen video{width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .player-controls,
  html.movie-playback-context .video-container-wrap:fullscreen .player-controls,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .player-controls{
    left:4%!important;right:4%!important;bottom:14px!important;width:auto!important;
    min-height:0!important;padding:38px 12px 7px!important;border:0!important;border-radius:0!important;
    background:none!important;
  }
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .progress-container,
  html.movie-playback-context .video-container-wrap:fullscreen .progress-container,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .progress-container{
    display:grid!important;grid-template-columns:66px minmax(0,1fr) 66px!important;align-items:center!important;gap:8px!important;
    position:absolute!important;left:12px!important;right:12px!important;top:11px!important;margin:0!important;
  }
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .time-display-row,
  html.movie-playback-context .video-container-wrap:fullscreen .time-display-row,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .time-display-row{display:contents!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #currentTime,
  html.movie-playback-context .video-container-wrap:fullscreen #currentTime,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #currentTime{grid-column:1!important;grid-row:1!important;text-align:left!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #durationTime,
  html.movie-playback-context .video-container-wrap:fullscreen #durationTime,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #durationTime{grid-column:3!important;grid-row:1!important;text-align:right!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #currentTime,
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #durationTime,
  html.movie-playback-context .video-container-wrap:fullscreen #currentTime,
  html.movie-playback-context .video-container-wrap:fullscreen #durationTime,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #currentTime,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #durationTime{color:#fff!important;font-size:13px!important;font-weight:700!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .progress-wrapper,
  html.movie-playback-context .video-container-wrap:fullscreen .progress-wrapper,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .progress-wrapper{grid-column:2!important;grid-row:1!important;height:4px!important;margin:0!important;background:rgba(255,255,255,.72)!important;border-radius:4px!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .progress-fill,
  html.movie-playback-context .video-container-wrap:fullscreen .progress-fill,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .progress-fill{background:var(--ref-pink)!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .controls-row,
  html.movie-playback-context .video-container-wrap:fullscreen .controls-row,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .controls-row{
    position:relative!important;display:grid!important;grid-template-columns:repeat(12,minmax(24px,1fr))!important;
    align-items:center!important;gap:0!important;width:100%!important;height:54px!important;
  }
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .ctrl-left,
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .controls-right,
  html.movie-playback-context .video-container-wrap:fullscreen .ctrl-left,
  html.movie-playback-context .video-container-wrap:fullscreen .controls-right,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .ctrl-left,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .controls-right{display:contents!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen .ctrl-btn,
  html.movie-playback-context .video-container-wrap:fullscreen .ctrl-btn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen .ctrl-btn{
    grid-row:1!important;place-self:center!important;width:40px!important;min-width:40px!important;height:40px!important;border:0!important;border-radius:50%!important;
    background:transparent!important;color:#fff!important;box-shadow:none!important;font-size:19px!important;text-shadow:0 1px 4px rgba(0,0,0,.8)!important;
  }
  /* Button-to-column assignment now lives in the authoritative mobile movie
     transport block at the end of this file. Only shared chrome stays here. */
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #skipBackBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #skipBackBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #skipBackBtn{grid-column:4!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #prevChBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #prevChBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #prevChBtn{grid-column:5!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #playPauseBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #playPauseBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #playPauseBtn{
    grid-column:6 / span 2!important;width:58px!important;min-width:58px!important;height:58px!important;border:1.5px solid rgba(255,255,255,.88)!important;
    background:rgba(0,0,0,.18)!important;font-size:24px!important;
  }
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #playPauseBtn i,
  html.movie-playback-context .video-container-wrap:fullscreen #playPauseBtn i,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #playPauseBtn i{font-size:24px!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #nextChBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #nextChBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #nextChBtn{grid-column:8!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #skipFwdBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #skipFwdBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #skipFwdBtn{grid-column:9!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #skipBackBtn,
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #skipFwdBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #skipBackBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #skipFwdBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #skipBackBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #skipFwdBtn{position:relative!important;font-size:22px!important}
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #skipBackBtn::after,
  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #skipFwdBtn::after,
  html.movie-playback-context .video-container-wrap:fullscreen #skipBackBtn::after,
  html.movie-playback-context .video-container-wrap:fullscreen #skipFwdBtn::after,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #skipBackBtn::after,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #skipFwdBtn::after{
    content:"10"!important;position:absolute!important;left:50%!important;top:52%!important;transform:translate(-50%,-50%)!important;
    color:#fff!important;font-size:8px!important;font-weight:800!important;line-height:1!important;text-shadow:0 1px 2px #000!important;
  }

  html.movie-playback-context .video-container-wrap.clicktv-mobile-fullscreen #networkBtn,
  html.movie-playback-context .video-container-wrap:fullscreen #networkBtn,
  html.movie-playback-context .video-container-wrap:-webkit-full-screen #networkBtn{display:none!important}
}

/* ==========================================================================
   CLICKTV MOBILE MOVIE TRANSPORT — AUTHORITATIVE. KEEP THIS BLOCK LAST.

   Rotate screen and Picture-in-Picture are not part of the movie player in
   any state - they stay hidden. Resolution (qualityBtn) lives inside the
   transport row itself, never as a floating top-right overlay.

   Non-fullscreen (compact) row - only:
     [volume] [prev] [PLAY] [next] [quality] [full]
   Fullscreen row - the full transport, left to right:
     [lock] [volume] [quality] [-10s] [prev] [PLAY] [next] [+10s] [fit] [full]

   `html.mobile-movie-controls` is set by updateContextualPlayerButtons() and
   is never present for live TV or events, which keep their own layout.
   ========================================================================== */
@media (max-width:980px){
  html.mobile-movie-controls .video-container-wrap .controls-row{
    position:relative!important;display:grid!important;grid-template-columns:repeat(6,minmax(20px,1fr))!important;
    align-items:center!important;gap:0!important;width:100%!important;
  }
  /* Both wrappers dissolve so their buttons become direct grid children. */
  html.mobile-movie-controls .video-container-wrap .ctrl-left,
  html.mobile-movie-controls .video-container-wrap .controls-right,
  html.mobile-movie-controls .video-container-wrap .volume-slider-wrap{display:contents!important}
  html.mobile-movie-controls .video-container-wrap .volume-range-slider,
  html.mobile-movie-controls .video-container-wrap .mute-pointer-tooltip,
  html.mobile-movie-controls .video-container-wrap #liveIndicator,
  html.mobile-movie-controls .video-container-wrap #networkBtn{display:none!important}

  html.mobile-movie-controls .video-container-wrap .controls-row .ctrl-btn{
    grid-row:1!important;place-self:center!important;border:0!important;border-radius:50%!important;
    background:transparent!important;color:#fff!important;box-shadow:none!important;text-shadow:0 1px 4px rgba(0,0,0,.8)!important;
  }

  /* Compact (non-fullscreen) row: volume, previous, play/pause, next,
     resolution, fullscreen. Lock, seek, speed and screen-fit come back
     once fullscreen is entered - see the block below. */
  html.mobile-movie-controls .video-container-wrap #muteBtn{grid-column:1!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap #prevChBtn{grid-column:2!important}
  html.mobile-movie-controls .video-container-wrap #playPauseBtn{grid-column:3!important}
  html.mobile-movie-controls .video-container-wrap #nextChBtn{grid-column:4!important}
  html.mobile-movie-controls .video-container-wrap #qualityBtn{grid-column:5!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap #fullscreenBtn{grid-column:6!important;display:grid!important}

  html.mobile-movie-controls .video-container-wrap #movieLockBtn,
  html.mobile-movie-controls .video-container-wrap #skipBackBtn,
  html.mobile-movie-controls .video-container-wrap #skipFwdBtn,
  html.mobile-movie-controls .video-container-wrap #speedBtn,
  html.mobile-movie-controls .video-container-wrap #aspectBtn{display:none!important}

  /* Rotate screen and Picture-in-Picture are removed from the movie player. */
  html.mobile-movie-controls .video-container-wrap #movieRotateBtn,
  html.mobile-movie-controls .video-container-wrap #pipBtn{display:none!important}

  /* Inline (non-fullscreen) sizing. */
  html.mobile-movie-controls .video-container-wrap .controls-row{height:44px!important}
  html.mobile-movie-controls .video-container-wrap .controls-row .ctrl-btn{
    width:32px!important;min-width:32px!important;height:32px!important;font-size:15px!important;
  }
  html.mobile-movie-controls .video-container-wrap .controls-row .ctrl-btn i{font-size:15px!important}
  html.mobile-movie-controls .video-container-wrap #playPauseBtn{
    width:42px!important;min-width:42px!important;height:42px!important;
    border:1.5px solid rgba(255,255,255,.88)!important;background:rgba(0,0,0,.18)!important;font-size:17px!important;
  }
  html.mobile-movie-controls .video-container-wrap #playPauseBtn i{font-size:17px!important}
}

/* Fullscreen / landscape sizing — the exact proportions of the screenshots. */
@media (max-width:980px){
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen .controls-row,
  html.mobile-movie-controls .video-container-wrap:fullscreen .controls-row,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen .controls-row{
    grid-template-columns:repeat(11,minmax(24px,1fr))!important;height:54px!important;
  }
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen .controls-row .ctrl-btn,
  html.mobile-movie-controls .video-container-wrap:fullscreen .controls-row .ctrl-btn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen .controls-row .ctrl-btn{
    width:42px!important;min-width:42px!important;height:42px!important;font-size:22px!important;
  }
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen .controls-row .ctrl-btn i,
  html.mobile-movie-controls .video-container-wrap:fullscreen .controls-row .ctrl-btn i,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen .controls-row .ctrl-btn i{font-size:22px!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #playPauseBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #playPauseBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #playPauseBtn{
    width:58px!important;min-width:58px!important;height:58px!important;font-size:24px!important;
  }
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #playPauseBtn i,
  html.mobile-movie-controls .video-container-wrap:fullscreen #playPauseBtn i,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #playPauseBtn i{font-size:24px!important}
  /* The right cluster reads slightly smaller than the transport, as designed. */
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen :is(#aspectBtn,#qualityBtn,#fullscreenBtn) i,
  html.mobile-movie-controls .video-container-wrap:fullscreen :is(#aspectBtn,#qualityBtn,#fullscreenBtn) i,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen :is(#aspectBtn,#qualityBtn,#fullscreenBtn) i{font-size:20px!important}

  /* Fullscreen restores the full transport row: lock, volume, seek/prev/
     play/next/seek, then resolution, screen-fit and the exit-fullscreen
     toggle. Speed is a compact/desktop-only control - not part of this row. */
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #movieLockBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #movieLockBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #movieLockBtn{grid-column:1!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #muteBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #muteBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #muteBtn{grid-column:2!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #skipBackBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #skipBackBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #skipBackBtn{grid-column:3!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #prevChBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #prevChBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #prevChBtn{grid-column:4!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #playPauseBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #playPauseBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #playPauseBtn{grid-column:5 / span 2!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #nextChBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #nextChBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #nextChBtn{grid-column:7!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #skipFwdBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #skipFwdBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #skipFwdBtn{grid-column:8!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #qualityBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #qualityBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #qualityBtn{grid-column:9!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #aspectBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #aspectBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #aspectBtn{grid-column:10!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #fullscreenBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #fullscreenBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #fullscreenBtn{grid-column:11!important;display:grid!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #speedBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #speedBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #speedBtn{display:none!important}

  /* The "10" glyph inside the seek buttons, kept from the previous layout. */
  html.mobile-movie-controls .video-container-wrap #skipBackBtn,
  html.mobile-movie-controls .video-container-wrap #skipFwdBtn{position:relative!important}
  html.mobile-movie-controls .video-container-wrap #skipBackBtn::after,
  html.mobile-movie-controls .video-container-wrap #skipFwdBtn::after{
    content:"10"!important;position:absolute!important;left:50%!important;top:52%!important;transform:translate(-50%,-50%)!important;
    color:#fff!important;font-size:8px!important;font-weight:800!important;line-height:1!important;text-shadow:0 1px 2px #000!important;
  }

  /* Lock dims the transport but never itself. */
  html.mobile-movie-controls .video-container-wrap.movie-controls-locked .player-controls button:not(#movieLockBtn),
  html.mobile-movie-controls .video-container-wrap.movie-controls-locked .progress-container{opacity:.18!important;pointer-events:none!important}
}

/* ==========================================================================
   NARROW-VIEWPORT FULLSCREEN TRANSPORT GUARD. KEEP LAST.

   The fullscreen movie transport lays out 11 grid columns, but its control
   sizing was fixed at 42px while the column width is viewport/11. On a phone
   held in PORTRAIT while fullscreen is active (412px wide -> ~37px columns) the
   42px buttons overflowed their cells and visibly overlapped - caught by
   scripts/browser-target-matrix-check.py on the Android Chrome profile, not by
   the landscape-only harness that preceded it.

   Sizing the controls so 11 of them fit the narrowest supported viewport fixes
   it without touching the landscape proportions, which remain as designed.
   ========================================================================== */
@media (max-width:560px){
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen .controls-row .ctrl-btn,
  html.mobile-movie-controls .video-container-wrap:fullscreen .controls-row .ctrl-btn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen .controls-row .ctrl-btn{
    width:28px!important;min-width:28px!important;height:28px!important;font-size:15px!important;
  }
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen .controls-row .ctrl-btn i,
  html.mobile-movie-controls .video-container-wrap:fullscreen .controls-row .ctrl-btn i,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen .controls-row .ctrl-btn i{font-size:15px!important}
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #playPauseBtn,
  html.mobile-movie-controls .video-container-wrap:fullscreen #playPauseBtn,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #playPauseBtn{
    width:38px!important;min-width:38px!important;height:38px!important;font-size:17px!important;
  }
  html.mobile-movie-controls .video-container-wrap.clicktv-mobile-fullscreen #playPauseBtn i,
  html.mobile-movie-controls .video-container-wrap:fullscreen #playPauseBtn i,
  html.mobile-movie-controls .video-container-wrap:-webkit-full-screen #playPauseBtn i{font-size:17px!important}
}