/* Native player occupies a complete rectangle. TOPTV's toolbar is outside it.
   Never zoom/crop the iframe: that also cuts off YouTube's native seek bar. */
html body #toptvFullscreenV14.open{
  position:fixed!important;inset:auto!important;
  top:calc(var(--fs-top,0px) + max(6px,env(safe-area-inset-top,0px)))!important;
  left:calc(var(--fs-left,0px) + max(6px,env(safe-area-inset-left,0px)))!important;
  width:calc(var(--fs-width,100vw) - max(6px,env(safe-area-inset-left,0px)) - max(6px,env(safe-area-inset-right,0px)))!important;
  height:calc(var(--fs-height,100dvh) - max(6px,env(safe-area-inset-top,0px)) - max(6px,env(safe-area-inset-bottom,0px)))!important;
  min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
  display:grid!important;grid-template-rows:minmax(0,1fr) 58px!important;
  margin:0!important;padding:0!important;border:1px solid #d7b34b!important;
  border-radius:16px!important;box-sizing:border-box!important;background:#000!important;
  overflow:hidden!important;box-shadow:none!important;transform:none!important;
  touch-action:auto!important;z-index:2147483646!important;
}
html body #toptvFullscreenV14.open>.toptv-immersive-stage{
  position:relative!important;inset:auto!important;grid-row:1!important;grid-column:1!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;
  transform:none!important;transition:none!important;will-change:auto!important;
  overflow:hidden!important;border:0!important;border-radius:0!important;
  background:#000!important;box-shadow:none!important;touch-action:auto!important;
}
html body #toptvFullscreenV14.open>.toptv-immersive-stage>.player,
html body #toptvFullscreenV14.open .player #youtubePlayer,
html body #toptvFullscreenV14.open .player #toptvTwitchPlayer,
html body #toptvFullscreenV14.open .player #toptvTwitchPlayer>div,
html body #toptvFullscreenV14.open .player iframe{
  position:absolute!important;inset:0!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  max-width:100%!important;max-height:100%!important;aspect-ratio:auto!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  transform:none!important;clip-path:none!important;box-shadow:none!important;
  touch-action:auto!important;pointer-events:auto!important;
}
html body #toptvFullscreenV14.open::before,
html body #toptvFullscreenV14.open::after,
html body #toptvFullscreenV14.open .toptv-immersive-stage::before,
html body #toptvFullscreenV14.open .toptv-immersive-stage::after,
html body #toptvFullscreenV14.open .player::before,
html body #toptvFullscreenV14.open .player::after{content:none!important;display:none!important}
html body #toptvFullscreenV14.open>.toptv-gesture-layer,
html body #toptvFullscreenV14.open>:not(.toptv-immersive-stage):not(#toptvFullscreenToolbarV14):not(.toptv-gesture-layer),
html body #toptvFullscreenV14.open .player>:not(iframe):not(#youtubePlayer):not(#toptvTwitchPlayer):not(.toptv-channel-intro),
html body.toptv-immersive-open>.toptv-immersive-gold-frame{display:none!important;pointer-events:none!important}
html body #toptvFullscreenToolbarV14{
  position:relative!important;grid-row:2;grid-column:1;display:grid!important;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  width:100%;height:100%;min-width:0;margin:0;padding:5px 12px;
  box-sizing:border-box;background:#000;border-top:1px solid #d7b34b;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  z-index:1!important;transform:none!important;
}
#toptvFullscreenToolbarV14 .fs-live{
  display:inline-flex;align-items:center;justify-self:start;gap:7px;
  white-space:nowrap;padding:10px 14px;border-radius:99px;
  background:#f50036;color:#fff;font:750 14px/1.1 system-ui,sans-serif;
}
#toptvFullscreenToolbarV14 .fs-live i{width:8px;height:8px;border:2px solid #fff;border-radius:50%;box-sizing:border-box}
#toptvFullscreenToolbarV14 .fs-navigation{display:flex;align-items:center;gap:22px}
html body #toptvFullscreenToolbarV14 button{
  position:static!important;inset:auto!important;display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  max-width:44px!important;max-height:44px!important;padding:9px!important;margin:0!important;
  border:1px solid #d7b34b!important;border-radius:50%!important;
  background:#000!important;color:#fff!important;box-shadow:none!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  transform:none!important;cursor:pointer;touch-action:manipulation!important;
}
html body #toptvFullscreenToolbarV14 button::before,
html body #toptvFullscreenToolbarV14 button::after{content:none!important;display:none!important}
#toptvFullscreenToolbarV14 button svg{width:24px;height:24px;display:block;pointer-events:none}
html body #toptvFullscreenToolbarV14 button:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}
html body #toptvFullscreenToolbarV14 button:active{background:#352a0b!important}
html body #toptvFullscreenToolbarV14 .toptv-immersive-close{justify-self:end!important}
html body #toptvFullscreenV14:not(.toptv-fs-portrait) #toptvFullscreenToolbarV14 [data-fs-action="landscape"]{display:none!important}
html body #toptvFullscreenV14.toptv-fs-portrait #toptvFullscreenToolbarV14{grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;padding-inline:10px}
#toptvFullscreenV14.toptv-fs-portrait #toptvFullscreenToolbarV14 .fs-navigation{gap:8px}
#toptvFullscreenV14.toptv-fs-portrait #toptvFullscreenToolbarV14 .fs-live{font-size:12px;padding:10px 9px;gap:5px}
@media(max-width:360px){
  html body #toptvFullscreenV14.toptv-fs-portrait #toptvFullscreenToolbarV14{gap:3px;padding-inline:4px}
  #toptvFullscreenV14.toptv-fs-portrait #toptvFullscreenToolbarV14 .fs-navigation{gap:3px}
  #toptvFullscreenV14.toptv-fs-portrait #toptvFullscreenToolbarV14 .fs-live{font-size:11px;padding-inline:6px;gap:4px}
}

html body.toptv-immersive-open .app{visibility:hidden!important}
/* The legacy landscape focus button is also appended on the normal page.
   Phone portrait must not paint its unstyled native button below the footer. */
@media (orientation:portrait){
  html body.toptv-device-phone:not(.toptv-immersive-open)>.toptv-landscape-focus-sink{
    display:none!important;
  }
}
/* The legacy landscape focus target has no portrait styling and paints as a
   native white button outside the frame. It is unused in phone portrait. */
html body.toptv-immersive-open:has(#toptvFullscreenV14.open.toptv-fs-portrait)>.toptv-landscape-focus-sink{
  display:none!important;
}
#toptvFullscreenToolbarV14 .fs-transport{display:none}
#toptvFullscreenV14.toptv-fs-portrait .fs-chevron{display:none}
#toptvFullscreenV14.toptv-fs-portrait .fs-transport{display:inline}

/* Keep more image height on short landscape phones while preserving 44px targets. */
@media(orientation:landscape) and (max-height:600px){
  html body #toptvFullscreenV14.open{grid-template-rows:minmax(0,1fr) 50px!important}
  html body #toptvFullscreenToolbarV14{padding-block:2px}
}

/* Wide view only: keep the whole image height, controls outside the player.
   The validated phone portrait rules above remain unchanged. */
html body #toptvFullscreenV14.open:not(.toptv-fs-portrait){
  grid-template-rows:minmax(0,1fr)!important;
  grid-template-columns:minmax(0,1fr) 72px!important;
}
html body #toptvFullscreenV14.open:not(.toptv-fs-portrait)>#toptvFullscreenToolbarV14{
  grid-row:1!important;grid-column:2!important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:44px minmax(100px,1fr) auto;
  justify-items:center;align-items:center;gap:8px;
  padding:8px 6px;border-top:0;border-left:1px solid #d7b34b;
}
html body #toptvFullscreenV14.open:not(.toptv-fs-portrait) #toptvFullscreenToolbarV14 .toptv-immersive-close{
  grid-row:1;grid-column:1;justify-self:center!important;
}
#toptvFullscreenV14.open:not(.toptv-fs-portrait) #toptvFullscreenToolbarV14 .fs-navigation{
  grid-row:2;grid-column:1;flex-direction:column;gap:12px;
}
#toptvFullscreenV14.open:not(.toptv-fs-portrait) #toptvFullscreenToolbarV14 .fs-live{
  grid-row:3;grid-column:1;justify-self:center;
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  width:58px;box-sizing:border-box;white-space:nowrap;
  padding:7px 3px;text-align:center;font-size:8px;line-height:1.1;border-radius:99px;
}
#toptvFullscreenV14.open:not(.toptv-fs-portrait) #toptvFullscreenToolbarV14 .fs-live i{
  display:block;flex:0 0 5px;width:5px;height:5px;border-width:1.5px;margin:0;
}

/* Preview feedback must not intercept the wide-view navigation rail. */
html body.toptv-immersive-open:has(#toptvFullscreenV14.open:not(.toptv-fs-portrait))>vercel-live-feedback{display:none!important}

/* The legacy gesture player keeps will-change:transform even after its transform
   is removed. Drop that retained containing/compositing layer in wide mode.
   Keep the iframe at its full stage size; never offset or zoom native controls.
   Native iPhone video compositing still needs physical-device confirmation. */
html body #toptvFullscreenV14.open:not(.toptv-fs-portrait)>.toptv-immersive-stage>.player{
  will-change:auto!important;
}

/* viewport-fit:auto already reserves horizontal iPhone safe areas.
   Keep only our normal gutter instead of subtracting the same inset twice. */
html[data-toptv-viewport-fit="auto"] body #toptvFullscreenV14.open:not(.toptv-fs-portrait){
  left:calc(var(--fs-left,0px) + 6px)!important;
  width:calc(var(--fs-width,100vw) - 12px)!important;
}

/* Sample only undecorated gold from each supplied image.
   Percentage crops stay inside the clean patch at every toolbar aspect ratio:
   portrait x25..75%, y13.125..25.625%; wide x13.125..25.625%, y25..75%.
   No bevel, logo or mascot enters either toolbar. */
html body #toptvFullscreenV14.toptv-fs-portrait>#toptvFullscreenToolbarV14{
  background-color:#d7b34b;
  background-image:url('/assets/fullscreen/toptv-gold-portrait-20260930.jpg');
  background-size:200% 800%;background-position:50% 15%;background-repeat:no-repeat;
}
html body #toptvFullscreenV14:not(.toptv-fs-portrait)>#toptvFullscreenToolbarV14{
  background-color:#d7b34b;
  background-image:url('/assets/share/toptv-gold-share-20260928.jpg');
  background-size:800% 200%;background-position:15% 50%;background-repeat:no-repeat;
}

/* Original gesture surface, phone portrait; keep native header/seek edges free. */
html body #toptvFullscreenV14.open.toptv-original-swipe-active>.toptv-gesture-layer{display:block!important;visibility:visible!important;position:absolute!important;left:0!important;right:0!important;pointer-events:auto!important;touch-action:none!important;z-index:2!important;background:transparent!important}