/* Elite Media Center v0.10.5.42-43: remote-control (TV) mode, poster-row arrows and TV poster size. */

/* #14: the row arrows are for a mouse. On touch screens rows scroll with a swipe,
   and with a remote they scroll as the highlight moves, so hide them there. */
@media not all and (hover:hover) and (pointer:fine){
  #homePage .eliteRailArrow{display:none!important}
}
html.elite-tv #homePage .eliteRailArrow{display:none!important}

/* #11: one stop per poster with a remote. OK opens it; holding OK toggles the
   Watchlist, so the small Open/Play, star and remove buttons are not needed. */
html.elite-tv .posterHoverActions,
html.elite-tv .continueQuickActions,
html.elite-tv .continueRemove,
html.elite-tv .favoriteCorner{display:none!important}
html.elite-tv .homeMediaCard,
html.elite-tv .movieCard{position:relative;outline:none;scroll-margin:24px}
html.elite-tv .homeMediaCard:focus,
html.elite-tv .movieCard:focus{outline:none}
/* The highlight is drawn inside the card so a scrolling row can never clip it. */
html.elite-tv .homeMediaCard:focus::after,
html.elite-tv .movieCard:focus::after{
  content:"";position:absolute;inset:0;z-index:30;pointer-events:none;border-radius:inherit;
  border:4px solid #6ec1ff;box-shadow:inset 0 0 0 2px #061725,inset 0 0 22px #6ec1ff66}
html.elite-tv .homeMediaCard:focus .movieTitle,
html.elite-tv .movieCard:focus .movieTitle{color:#fff}

#eliteTvToast{position:fixed;left:50%;bottom:44px;z-index:100000;transform:translate(-50%,16px);opacity:0;
  pointer-events:none;max-width:min(80vw,640px);padding:12px 22px;border-radius:999px;
  background:#0b2240f2;color:#fff;border:1px solid #6ec1ff99;box-shadow:0 10px 30px #000a;
  font-weight:700;font-size:18px;line-height:1.3;text-align:center;transition:opacity .2s ease,transform .2s ease}
#eliteTvToast.show{opacity:1;transform:translate(-50%,0)}

/* v0.10.5.43 (#22): in TV mode posters are sized from the row's width AND the
   screen's height, so about seven fit across and two to three rows fit on
   screen, whatever size the TV reports. Poster size in the Profile menu still
   applies (Small about 8 across, Large about 6). */
/* v0.10.5.44 (#22c): one step smaller on the TV; Medium is what Small was. */
html.elite-tv{--elite-tv-cols:8.3;--elite-tv-grid:8;--elite-tv-gap:12px;--elite-tv-rowh:38vh}
html.elite-tv[data-poster-density="small"]{--elite-tv-cols:9.3;--elite-tv-grid:9;--elite-tv-rowh:34vh}
html.elite-tv[data-poster-density="large"]{--elite-tv-cols:7.3;--elite-tv-grid:7;--elite-tv-rowh:44vh}
html.elite-tv #homePage #homeMovies.mediaRail,
html.elite-tv #homePage #homeTv.mediaRail,
html.elite-tv #homePage #homeDvr.mediaRail{
  /* width share of the row, but never so tall that one row fills the screen (2:3 poster + ~60px title) */
  grid-auto-columns:min(calc((100% - (var(--elite-tv-cols) - 1) * var(--elite-tv-gap)) / var(--elite-tv-cols)),
                        calc((var(--elite-tv-rowh) - 60px) / 1.5))!important;
  gap:var(--elite-tv-gap)!important}
/* Continue Watching cards are wide: about four across. */
html.elite-tv #homePage #homeWatching.mediaRail{
  grid-auto-columns:min(calc((100% - 3.3 * var(--elite-tv-gap)) / 4.3),calc((var(--elite-tv-rowh) - 60px) / 0.5625))!important;
  gap:var(--elite-tv-gap)!important}
html.elite-tv .movieGrid{
  grid-template-columns:repeat(auto-fill,minmax(min(calc((100% - (var(--elite-tv-grid) - 1) * var(--elite-tv-gap)) / var(--elite-tv-grid)),calc((var(--elite-tv-rowh) - 60px) / 1.5)),1fr))!important;
  gap:16px var(--elite-tv-gap)!important}
/* Keep the featured banner from filling the whole TV screen. */
html.elite-tv #homePage .eliteFeatureHero{height:min(46vh,420px)!important;min-height:220px!important}

/* #20: a clear highlight on page buttons too (Play, Resume, seasons, episodes). */
html.elite-tv button:focus,
html.elite-tv a[href]:focus,
html.elite-tv select:focus,
html.elite-tv input:focus,
html.elite-tv [tabindex]:not(.homeMediaCard):not(.movieCard):focus{outline:3px solid #6ec1ff!important;outline-offset:2px}