/* V14 desktop/iPad: leave room above the unchanged 16:9 player for the existing live badge.
   Refine only the existing country button in the sidebar header. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > .center {
    position: relative !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .player {
    margin-top: 34px !important;
  }
  html body:not(.toptv-immersive-open):not(.toptv-v14-pin-three) #live.hero > .center > #toptvV14PinnedBadgeBar {
    display: block !important;
    position: absolute !important;
    top: 2px !important;
    left: 11px !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 15 !important;
    transform: none !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body:not(.toptv-immersive-open):not(.toptv-v14-pin-three) #live.hero > .center .videoInfo .toptv-v14-live-badge {
    display: none !important;
  }

  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    top: 2px !important;
    left: -132px !important;
    width: 116px !important;
    max-width: 116px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 1px 3px !important;
    gap: 2px !important;
    font-size: 9px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-toggle-action,
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-current {
    font-size: 9px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-current-flag {
    font-size: 11px !important;
  }
}
@media (min-width: 761px) and (max-width: 1179px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.channels h2 {
    font-size: 12px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    left: -120px !important;
    width: 104px !important;
    max-width: 104px !important;
    font-size: 8.5px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-toggle-action,
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-current {
    font-size: 8.5px !important;
  }
}
@media (min-width: 761px) and (max-width: 900px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.channels h2 {
    font-size: 10px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    left: -98px !important;
    width: 88px !important;
    max-width: 88px !important;
    font-size: 7.5px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-toggle-action,
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-current {
    font-size: 7.5px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-current-flag {
    font-size: 9px !important;
  }
}

/* V14: put the same country button beneath the heading, keep its open panel
   above the live badge, and remove only the center panel's fine outline. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.channels h2 {
    margin-bottom: 44px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    top: 29px !important;
    left: -234px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center {
    border-color: transparent !important;
    box-shadow: none !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > #toptvCountryExplorerV14:has(#toptvCountryExplorerPanelV14:not([hidden])) {
    position: relative !important;
    z-index: 30 !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center:has(#toptvCountryExplorerPanelV14:not([hidden])) > #toptvV14PinnedBadgeBar {
    visibility: hidden !important;
  }
}
@media (min-width: 761px) and (max-width: 1179px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    left: -194px !important;
  }
}
@media (min-width: 761px) and (max-width: 900px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    left: -174px !important;
    width: 104px !important;
    max-width: 104px !important;
  }
}

/* V14: match the country selector's width to the channel rows; half their height.
   Add a small, fixed gap beneath the live badge without resizing the player. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    width: 220px !important;
    max-width: 220px !important;
    height: 26px !important;
    min-height: 26px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .player {
    margin-top: 42px !important;
  }
}
@media (min-width: 761px) and (max-width: 1179px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    width: 180px !important;
    max-width: 180px !important;
  }
}
@media (min-width: 761px) and (max-width: 900px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    width: 160px !important;
    max-width: 160px !important;
  }
}

/* Give the live badge, player, star score and text a clear vertical order. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > .center > .player {
    margin-top: 54px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .videoInfo {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #videoTitle {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    line-height: 1.25 !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #videoTitle .toptv-star-title {
    order: -1 !important;
    align-self: flex-start !important;
    margin: 0 !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #videoSub {
    margin: 8px 0 0 !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #videoStats {
    margin: 5px 0 0 !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls {
    top: 12px !important;
  }
}
@media (min-width: 761px) and (max-width: 1179px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 9px 0 0 auto !important;
  }
}

/* Wide screens: reserve the existing 38px control row, then 16px of air.
   Keep the details on their original left edge and the player untouched. */
@media (min-width: 761px) {
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo {
    padding-top:66px!important;
  }
}
/* Wide-screen identity: the existing live label and controls share a slim
   gold strip outside the media. All pieces remain in normal page flow. */
@media (min-width:761px) {
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero .videoInfo .toptv-v14-live-badge {display:none!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > #toptvV14PinnedBadgeBar {
    display:none!important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .player {
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo::before {
    content:"";
    position:absolute;
    top:-1px;
    left:3px;
    right:3px;
    height:40px;
    box-sizing:border-box;
    border:1px solid #d7b34b;
    border-top:0;
    border-radius:0 0 13px 13px;
    background:#d7b34b url('/assets/fullscreen/toptv-gold-portrait-20260930.jpg') 50% 15% / 200% 800% no-repeat;
    pointer-events:none;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo::after {
    content:"●  TOPTV Live";
    display:inline-flex!important;
    align-items:center;
    box-sizing:border-box;
    border-radius:999px;
    color:#fff;
    background:#ed2342;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    position:absolute!important;
    top:6px!important;
    left:11px!important;
    height:26px!important;
    padding:6px 10px!important;
    margin:0!important;
    font-size:11px!important;
    z-index:2!important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls {
    position:absolute!important;
    top:5px!important;
    right:11px!important;
    left:auto!important;
    bottom:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
    max-width:calc(100% - 128px)!important;
    height:28px!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls > button {
    flex:0 1 28px!important;
    width:28px!important;
    min-width:0!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
  }
}
@media (min-width:761px) {
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls .ico,
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls .toptv-row-fullscreen-icon,
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls > button > svg {display:grid!important;width:20px!important;height:20px!important;transform:none!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls [data-c="prev"] .ico::before {left:7px!important;top:4px!important;border-top-width:6px!important;border-bottom-width:6px!important;border-right-width:9px!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls [data-c="next"] .ico::before {right:7px!important;top:4px!important;border-top-width:6px!important;border-bottom-width:6px!important;border-left-width:9px!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls [data-c="prev"] .ico::after {left:3px!important;top:3px!important;width:2px!important;height:14px!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls [data-c="next"] .ico::after {right:3px!important;top:3px!important;width:2px!important;height:14px!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls [data-c="sound"] .ico::before,
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls [data-c="sound"]:not(.is-muted) .ico::after {display:none!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls [data-c="sound"].is-muted .ico::after {left:0!important;top:9px!important;width:20px!important;height:2px!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls .toptv-own-fullscreen {background-image:none!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls .toptv-own-fullscreen::before,
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls .toptv-own-fullscreen::after {display:none!important;}
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls .toptv-row-fullscreen-icon {background:none!important;}
}
@media (min-width:761px) and (max-width:900px) {
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo::after {
    font-size:10px!important;
    padding-inline:7px!important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls {
    gap:3px!important;
    max-width:calc(100% - 120px)!important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .videoInfo #toptvMobileControls > button {
    flex-basis:26px!important;
    width:26px!important;
    height:26px!important;
    min-height:26px!important;
  }
}

@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    top: 69px !important;
  }
  /* Country selector first, then 24px of air before the channel heading. */
  html body:not(.toptv-immersive-open) #live.hero > aside.channels h2 {
    margin-top: 52px !important;
    margin-bottom: 16px !important;
  }
}


/* Match the existing 140px sidebar and 8px grid gap on narrow iPads. */
@media (min-width: 761px) and (max-width: 959px) and (min-height: 621px) {
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    left: -149px !important;
    width: 140px !important;
    max-width: 140px !important;
  }
}

/* Phone main-player controls: the same clean gold patch as portrait fullscreen.
   Only the existing bar background changes; badge, buttons and geometry stay put. */
html body.toptv-device-phone:not(.toptv-immersive-open) #toptvV14PinnedBadgeBar {
  background-color:#d7b34b!important;
  background-image:url('/assets/fullscreen/toptv-gold-portrait-20260930.jpg')!important;
  background-size:200% 800%!important;
  background-position:50% 15%!important;
  background-repeat:no-repeat!important;
}

/* Join the phone video to its gold control bar as one continuous frame. */
/* Phone details: score first, with breathing room below the gold controls. */
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center > .videoInfo > div:has(> #videoTitle) {
  min-width:0!important;
  max-width:100%!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #videoTitle {
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:8px!important;
  margin-top:12px!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center > .videoInfo #videoTitle .toptv-star-title {
  order:-1!important;
  align-self:flex-start!important;
  margin:0!important;
}

html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center > .player {
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
}

/* The natural-position offsets include the center panel's 1px border.
   Compensate only in normal phone flow; fixed/pinned positioning is already exact. */
html body.toptv-device-phone.toptv-v14-band-ready:not(.toptv-v14-pin-player):not(.toptv-immersive-open) #toptvV14PinnedBadgeBar {
  margin-top:-1px!important;
  margin-left:-1px!important;
}

/* Raise the wide-screen player by 16px and align both sidebar headings with
   its upper border. Country control stays 24px above the left heading.
   Keep all offsets in normal flow; phone and immersive layouts are excluded. */
@media (min-width: 761px) and (min-height: 621px) {
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > .center > .player {
    margin-top: 38px !important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > aside.channels.panel,
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > aside.ranking.panel {
    margin-top: 39px !important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > aside.channels h2 {
    margin-top: 0 !important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero > aside.ranking > h2 {
    padding-top: 0 !important;
  }
  html body.toptv-v14-dynamic-ranking-right-layout:not(.toptv-device-phone):not(.toptv-immersive-open) #live.hero #toptvCountryExplorerV14 .toptv-country-explorer-toggle {
    top: -12px !important;
  }
}

/* 20261012: approved champagne control rail, PHONE ONLY.
   Existing handlers, pinned coordinates, 36px layout reservation and wide UI
   are preserved. The normal-page device class excludes iPad and desktop. */
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center > .player {
  border-color:#e9cd91!important;
  box-shadow:none!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center > #toptvV14PinnedBadgeBar {
  background:linear-gradient(112deg,#e4c58a 0%,#f7e3b2 48%,#e9cc92 100%)!important;
  height:34px!important;
  padding:6px 8px!important;
  border:1px solid #e9cd91!important;
  border-top:0!important;
  border-radius:0 0 13px 13px!important;
  box-shadow:none!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvV14PinnedLiveBadge {
  height:20px!important;
  box-sizing:border-box!important;
  padding:0 8px!important;
  font-size:10px!important;
  font-weight:650!important;
  line-height:1!important;
  background:#ed2342!important;
  color:#fff!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvV14PinnedLiveBadge::before {
  width:6px!important;height:6px!important;margin-right:5px!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls {
  height:30px!important;
  gap:6px!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button {
  box-sizing:border-box!important;
  width:30px!important;min-width:30px!important;
  height:30px!important;min-height:30px!important;
  flex:0 0 30px!important;
  padding:0!important;
  border:1px solid rgba(243,220,164,.8)!important;
  border-radius:50%!important;
  background:#131313!important;
  color:#f3dca4!important;
  -webkit-text-fill-color:#f3dca4!important;
  box-shadow:none!important;
  text-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  display:grid!important;place-items:center!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button:focus-visible {
  outline:2px solid #fff!important;outline-offset:2px!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button > svg {
  width:19px!important;height:19px!important;
  stroke:#f3dca4!important;stroke-width:1.7!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls [data-c="prev"] .ico::before {border-right-color:#f3dca4!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls [data-c="next"] .ico::before {border-left-color:#f3dca4!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls [data-c="prev"] .ico::after,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls [data-c="next"] .ico::after {background:#f3dca4!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > .fav {
  font-size:0!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > .fav::before {
  content:""!important;display:block!important;
  position:static!important;
  width:20px!important;height:20px!important;
  border:0!important;transform:none!important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > .fav.active::before {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23f3dca4%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8Z%22%2F%3E%3C%2Fsvg%3E")!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > .toptv-own-fullscreen::before,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > .toptv-own-fullscreen::after {display:none!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls .toptv-row-fullscreen-icon {
  display:block!important;
  width:19px!important;height:19px!important;
  margin:0!important;transform:none!important;
  border:0!important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203H3v5M16%203h5v5M21%2016v5h-5M8%2021H3v-5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls .toptv-row-fullscreen-icon::before,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls .toptv-row-fullscreen-icon::after {display:none!important;}
@media(max-width:380px) {
  html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls {gap:4px!important;}
  html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button {
    width:27px!important;min-width:27px!important;
    height:27px!important;min-height:27px!important;
    flex-basis:27px!important;
  }
  html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvV14PinnedLiveBadge {
    font-size:9px!important;padding-inline:7px!important;
  }
}

/* The MY TV glyph shares the same simple champagne outline as the other icons. */
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls .toptv-my-tv-save-icon > rect,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls .toptv-my-tv-save-icon > path {
  fill:none!important;stroke:#f3dca4!important;stroke-width:1.7!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls .toptv-my-tv-save-icon > rect:last-of-type,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls .toptv-my-tv-save-icon > path:last-child {display:none!important;}

/* 20261012-v2: compact phone controls matching the approved mockup.
   Uniform SVG artwork prevents platform emoji and stacked legacy icons.
   The champagne bar and player frame above remain untouched. */
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvV14PinnedLiveBadge {
  height:15px!important;
  padding:0 6px!important;
  font-size:8px!important;
  font-weight:600!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvV14PinnedLiveBadge::before {
  width:4px!important;height:4px!important;margin-right:4px!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center > #toptvV14PinnedBadgeBar {padding-block:9px!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls {gap:10px!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button {
  width:24px!important;min-width:24px!important;
  height:24px!important;min-height:24px!important;
  flex-basis:24px!important;
  border-width:.75px!important;
  border-color:rgba(243,220,164,.55)!important;
  background-color:#131313!important;
  background-size:16px 16px!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  font-size:0!important;
  line-height:0!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button > *,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button::before,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button::after {display:none!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button[data-c="prev"] {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%205v14%22%2F%3E%3Cpath%20d%3D%22m18%205-9%207%209%207z%22%20fill%3D%22%23f3dca4%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E")!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button[data-c="next"] {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%205v14%22%2F%3E%3Cpath%20d%3D%22m6%205%209%207-9%207z%22%20fill%3D%22%23f3dca4%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E")!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button.fav {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8Z%22%2F%3E%3C%2Fsvg%3E")!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button.share {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%2011%208-5M8%2013l8%205%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%224.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2219.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E")!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button.toptv-my-tv-save {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%202%204%204%204-4%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2215%22%20rx%3D%223%22%2F%3E%3C%2Fsvg%3E")!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button.toptv-own-fullscreen {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203H3v5M16%203h5v5M21%2016v5h-5M8%2021H3v-5%22%2F%3E%3C%2Fsvg%3E")!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button[data-c="sound"] {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%207%206%2010H3v4h3l4%203zM14%208a6%206%200%200%201%200%208M17%205a10%2010%200%200%201%200%2014%22%2F%3E%3C%2Fsvg%3E")!important;}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button.fav.active {background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23f3dca4%22%20stroke%3D%22%23f3dca4%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8Z%22%2F%3E%3C%2Fsvg%3E")!important;}
/* Preserve the official YouTube sound control: never reveal the hidden duplicate. */
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center:has(iframe[src*="youtube.com"]) #toptvMobileControls > button[data-c="sound"],
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center:has(iframe[src*="youtube-nocookie.com"]) #toptvMobileControls > button[data-c="sound"] {display:none!important;}
@media(max-width:380px) {
  html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls {gap:6px!important;}
  html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button {
    width:23px!important;min-width:23px!important;
    height:23px!important;min-height:23px!important;flex-basis:23px!important;
  }
  html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvV14PinnedLiveBadge {font-size:8px!important;padding-inline:6px!important;}
}

/* Phone-only final alignment: badge center matches the existing control row.
   Explicit .fav selector suppresses the legacy pseudo-heart, whose specificity
   was greater than the generic button rule. The SVG background remains. */
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvV14PinnedLiveBadge {
  position:absolute!important;
  left:8px!important;
  top:18px!important;
  margin:0!important;
  transform:translateY(-50%)!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button.fav::before,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileControls > button.fav::after {
  content:none!important;
  display:none!important;
  background:none!important;
}

/* Approved phone selection finish: neutral black glass and champagne identity.
   Existing player, control rail, non-selected channels and wide UI untouched. */
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileChannels button.toptv-channel-pill.active {
  background:linear-gradient(180deg,rgba(42,42,44,.86),rgba(8,8,9,.92))!important;
  border:2px solid #e9cd91!important;
  box-shadow:0 0 7px rgba(233,205,145,.38),inset 0 1px 0 rgba(255,255,255,.12)!important;
  color:#f8f8f5!important;
  -webkit-text-fill-color:#f8f8f5!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center #toptvMobileChannels button.toptv-channel-pill.active > span {
  color:#f8f8f5!important;
  -webkit-text-fill-color:#f8f8f5!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero > .center .videoInfo .toptv-star-button.toptv-star-title {
  border-color:#e9cd91!important;
}
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero #rankingList .rankRow.active,
html body.toptv-device-phone:not(.toptv-immersive-open) #live.hero #miniList .mini.active {
  border-color:#e9cd91!important;
  border-width:2.5px!important;
}

/* Actual phone selection ring is an outline, not the card border.
   Match the existing player #e9cd91 / 2.5px, keeping the row geometry and fill. */
html[data-toptv-phone-selection] body.toptv-device-phone:not(.toptv-immersive-open)
#live.hero > #top.ranking #rankingList .rankRow.toptv-phone-selection-row.active {
  border:0!important;
  outline:2.5px solid #e9cd91!important;
}

/* Phone lower-section champagne contours; fills, text and dimensions preserved. */
html body.toptv-device-phone:not(.toptv-immersive-open) #toptvBottomPromoV1 .toptv-promo-player,
html body.toptv-device-phone:not(.toptv-immersive-open) #toptvBottomPromoV1 .toptv-bottom-navigation button,
html body.toptv-device-phone:not(.toptv-immersive-open) #toptvBottomPromoV1 .toptv-bottom-card.gold,
html body.toptv-device-phone:not(.toptv-immersive-open) #toptvBottomPromoV1 .toptv-bottom-card .toptv-bottom-cta {border-color:#e9cd91!important;}