/* StreamFlix hybrid presentation: no dependency on a heavyweight native player. */
html{width:100%;height:100%;-webkit-text-size-adjust:100%}
html.sf-touch-mode,html.sf-touch-mode *{-webkit-tap-highlight-color:transparent}
html.sf-touch-mode{touch-action:pan-x pan-y}
html.sf-touch-mode body{-webkit-overflow-scrolling:touch}
html.sf-dpad-mode .hs,html.sf-dpad-mode .cc,html.sf-dpad-mode .sf-server-list{scroll-behavior:auto!important}
html.sf-dpad-mode .sf-spatial-focus,
html.sf-dpad-mode :focus-visible{outline:3px solid var(--sf-primary,var(--red,#fff))!important;outline-offset:3px!important;box-shadow:0 0 0 5px rgba(0,0,0,.8),0 0 18px var(--sf-primary,var(--red,#e50914))!important;z-index:4}
html.sf-dpad-mode .sf-card.sf-spatial-focus,html.sf-dpad-mode .sf-cat-card.sf-spatial-focus{transform:scale(1.04);overflow:visible}
html.sf-dpad-mode #box .ui{pointer-events:auto}
html.sf-dpad-mode.sf-tv-active #box .ui{opacity:1;pointer-events:auto}
html.sf-dpad-mode #box .cc{pointer-events:auto}
html.sf-dpad-mode .bc.sf-spatial-focus{outline-offset:6px!important}
html.sf-dpad-mode .ui button:focus-visible{background:rgba(255,255,255,.25)}
html.sf-low-memory .gm,html.sf-low-memory .ui,html.sf-low-memory .sf-bottom-nav,html.sf-low-memory .cast-card,html.sf-low-memory .share-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.sf-low-memory .sf-card,html.sf-low-memory .pc{transition:none!important;animation:none!important}
html.sf-low-memory .sf-fx-pulse:hover{animation:none!important}
@media (max-width:620px){
  #app{max-width:100%;min-width:0}
  #app .grid{min-width:0}
  .sf-bottom-nav{max-width:calc(100vw - 12px);box-sizing:border-box}
  .sf-card.pc{min-width:0!important}
  .sf-hero{max-width:100%;overflow:hidden}
}
@media (min-width:1920px){
  #app{width:min(100%,1860px);margin-inline:auto}
  html.sf-dpad-mode .sf-card.sf-spatial-focus{transform:scale(1.035)}
}
/* Video should fill the screen without forcing a crop on high-DPI TVs. */
#box{max-width:100vw;max-height:100dvh}
#box .ui{min-width:0}
#box .top{min-width:0;max-width:100%;box-sizing:border-box}
#box .title-box{min-width:0}
#box .tr{min-width:0}
#box .bot{min-width:0;max-width:100%;box-sizing:border-box}
#box button{touch-action:manipulation;max-width:100%}
#box .cl,#box .cr{min-width:0;flex-wrap:wrap}
@media(max-width:560px){
  #box .top{gap:5px;row-gap:3px}
  #box .tr{max-width:100%}
  #box .title-box{max-width:100%;overflow:hidden}
  #box .ct{gap:3px;min-width:0}
  #box .td{font-size:clamp(9px,2.8vw,12px)}
}
@media(max-height:390px) and (orientation:landscape){
  #box .top{padding-top:4px;padding-bottom:0}
  #box .title-box{height:24px}
  #box .tr{gap:2px}
  #box .eb,#box .rb{height:28px;min-height:28px}
  #box .bot{padding-top:2px;padding-bottom:3px}
  #box .ct{min-height:28px}
  #box .bt{height:30px;width:30px;padding:5px}
  #box .cc{transform:translate(-50%,-44%) scale(.80)}
}
@media(max-height:290px) and (orientation:landscape){#box .cc{display:none}}
@media(prefers-reduced-motion:reduce){html.sf-dpad-mode .sf-spatial-focus{transition:none!important}}