/* LG webOS TV only. The hosted app opts in with ?platform=webos. */
html.webos-tv,
html.webos-tv body {
  width: 100%;
  min-width: 1280px;
  min-height: 720px;
  overflow-x: hidden;
  scrollbar-width: none;
  background: #050506;
  font-size: 22px;
}

html.webos-tv::-webkit-scrollbar,
html.webos-tv body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.webos-tv {
  --tv-rail-width: 132px;
  --tv-safe-x: 58px;
  --tv-safe-y: 42px;
  --tv-focus: #ffffff;
  --tv-accent: #49e6ad;
  --tv-panel: rgba(19, 21, 26, 0.96);
  letter-spacing: 0;
  cursor: default;
}

body.webos-tv *,
body.webos-tv *::before,
body.webos-tv *::after {
  letter-spacing: 0 !important;
}

body.webos-tv .mobile-nav,
body.webos-tv .mobile-screen-header,
body.webos-tv .home-topbar,
body.webos-tv .channels-label,
body.webos-tv .install-nav,
body.webos-tv .app-exit-nav,
body.webos-tv .profile-fullscreen-hint,
body.webos-tv .player-fullscreen,
body.webos-tv #installSheet {
  display: none !important;
}

body.webos-tv .site-header {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 80;
  width: var(--tv-rail-width) !important;
  height: 100vh !important;
  min-height: 720px;
  padding: 34px 18px 28px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(4, 4, 5, 0.98) !important;
  box-shadow: 24px 0 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: none !important;
}

body.webos-tv .site-header .brand {
  width: 94px !important;
  height: 74px !important;
  min-height: 74px;
  padding: 8px !important;
  border-radius: 6px !important;
}

body.webos-tv .site-header .brand-logo {
  width: 100% !important;
  max-height: 58px !important;
  object-fit: contain;
}

body.webos-tv .main-nav {
  width: 100% !important;
  display: flex !important;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px !important;
}

body.webos-tv .main-nav button {
  position: relative;
  width: 82px !important;
  height: 76px !important;
  min-height: 76px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #a7a7ad !important;
  overflow: visible;
}

body.webos-tv .main-nav button .nav-icon {
  width: 38px !important;
  height: 38px !important;
}

body.webos-tv .main-nav button span:last-child {
  position: absolute;
  left: 90px;
  top: 50%;
  width: max-content;
  padding: 9px 14px;
  border-radius: 4px;
  background: #ffffff;
  color: #09090a;
  font-size: 22px;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transform: translate(-8px, -50%);
  transition: opacity 150ms ease, transform 150ms ease;
}

body.webos-tv .main-nav button:focus span:last-child,
body.webos-tv .main-nav button:hover span:last-child {
  opacity: 1;
  transform: translate(0, -50%);
}

body.webos-tv .main-nav button.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.webos-tv .profile-button {
  width: 80px !important;
  height: 80px !important;
  min-height: 80px;
  border-radius: 50% !important;
  border: 3px solid rgba(255, 255, 255, 0.18) !important;
  overflow: hidden;
}

body.webos-tv .profile-button .profile-name {
  display: none !important;
}

body.webos-tv .profile-button .profile-initial {
  width: 100% !important;
  height: 100% !important;
  display: grid;
  place-items: center;
  font-size: 31px;
}

body.webos-tv .page-shell {
  width: calc(100% - var(--tv-rail-width)) !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 0 0 var(--tv-rail-width) !important;
  padding: 0 0 110px !important;
}

body.webos-tv .search-panel {
  position: relative;
  min-height: 650px !important;
  margin: 0 !important;
  padding: 178px var(--tv-safe-x) 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: #0a0a0c;
}

body.webos-tv .billboard-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  background-position: center 24% !important;
  background-size: cover !important;
}

body.webos-tv .search-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.97) 0%, rgba(5, 5, 6, 0.76) 34%, rgba(5, 5, 6, 0.1) 72%),
    linear-gradient(0deg, #050506 0%, rgba(5, 5, 6, 0.04) 45%);
}

body.webos-tv .service-switcher {
  position: absolute !important;
  z-index: 5;
  top: var(--tv-safe-y);
  left: 50%;
  width: min(1310px, calc(100% - 150px)) !important;
  height: 92px !important;
  padding: 8px !important;
  display: flex !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 6px !important;
  background: rgba(10, 10, 13, 0.91) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
  overflow-x: auto !important;
  scrollbar-width: none;
}

body.webos-tv .service-switcher::-webkit-scrollbar {
  display: none;
}

body.webos-tv .service-switcher button {
  flex: 0 0 154px !important;
  width: 154px !important;
  height: 74px !important;
  min-width: 154px !important;
  padding: 17px 20px !important;
  border: 3px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
}

body.webos-tv .service-switcher button.active {
  background: #ffffff !important;
}

body.webos-tv .service-switcher img {
  width: 100% !important;
  height: 40px !important;
  max-height: 40px !important;
  object-fit: contain;
}

body.webos-tv .search-copy,
body.webos-tv .billboard-actions,
body.webos-tv .search-form,
body.webos-tv .search-status {
  position: relative;
  z-index: 3;
}

body.webos-tv .search-copy {
  width: min(720px, 48vw) !important;
}

body.webos-tv .search-copy .kicker,
body.webos-tv .screen-kicker {
  color: var(--tv-accent) !important;
  font-size: 22px !important;
  font-weight: 800;
  text-transform: uppercase;
}

body.webos-tv .search-panel h1 {
  max-width: 740px;
  margin: 12px 0 18px !important;
  font-size: clamp(58px, 5vw, 92px) !important;
  line-height: 0.96 !important;
}

body.webos-tv .hero-meta,
body.webos-tv .hero-description {
  font-size: 24px !important;
  line-height: 1.4 !important;
}

body.webos-tv .hero-description {
  max-width: 660px !important;
  color: #d1d1d6 !important;
}

body.webos-tv .billboard-actions {
  margin-top: 28px !important;
  display: flex !important;
  gap: 18px !important;
}

body.webos-tv .primary-action,
body.webos-tv .secondary-action,
body.webos-tv .link-button,
body.webos-tv .library-mode-switch button,
body.webos-tv .watch-episode-nav button {
  min-height: 72px !important;
  padding: 0 31px !important;
  border-radius: 5px !important;
  font-size: 24px !important;
  font-weight: 800;
}

body.webos-tv .search-form {
  width: min(880px, 65vw) !important;
  margin: 32px 0 0 !important;
}

body.webos-tv .search-form input {
  height: 74px !important;
  padding: 0 86px 0 28px !important;
  border-radius: 5px !important;
  font-size: 27px !important;
}

body.webos-tv .continue-section,
body.webos-tv .featured-section,
body.webos-tv .results-section,
body.webos-tv .library-section {
  padding: 38px var(--tv-safe-x) 14px !important;
}

body.webos-tv .section-title h2,
body.webos-tv .results-section > h2,
body.webos-tv .library-hero h1 {
  font-size: 34px !important;
  line-height: 1.15;
}

body.webos-tv .featured-grid,
body.webos-tv .results-list,
body.webos-tv .library-section .featured-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 34px 24px !important;
  overflow: visible !important;
}

body.webos-tv .rail-section {
  overflow: visible !important;
}

body.webos-tv .rail-grid,
body.webos-tv .continue-grid,
body.webos-tv .modal-suggested-grid,
body.webos-tv .modal-episode-grid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 300px !important;
  gap: 24px !important;
  padding: 14px 12px 30px !important;
  margin: 0 -12px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
}

body.webos-tv .rail-grid::-webkit-scrollbar,
body.webos-tv .continue-grid::-webkit-scrollbar,
body.webos-tv .modal-suggested-grid::-webkit-scrollbar,
body.webos-tv .modal-episode-grid::-webkit-scrollbar {
  display: none;
}

body.webos-tv .media-card {
  min-width: 0 !important;
  border-radius: 6px !important;
  transform-origin: center;
}

body.webos-tv .card-poster {
  border-radius: 6px !important;
  aspect-ratio: 2 / 3 !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
}

body.webos-tv .continue-card .card-poster,
body.webos-tv .continue-section .card-poster {
  aspect-ratio: 16 / 9 !important;
}

body.webos-tv .media-card strong {
  margin-top: 13px !important;
  font-size: 23px !important;
  line-height: 1.2 !important;
}

body.webos-tv .media-card > span:not(.card-poster):not(.watch-progress):not(.continue-label) {
  font-size: 20px !important;
}

body.webos-tv .page-back-button {
  display: none !important;
}

body.webos-tv .title-modal,
body.webos-tv .profile-sheet,
body.webos-tv .brand-menu,
body.webos-tv .auth-gate {
  z-index: 200 !important;
  background: #050506 !important;
}

body.webos-tv .title-modal .modal-panel {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 0 70px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  background: #050506 !important;
}

body.webos-tv .title-modal .modal-backdrop-art {
  height: 670px !important;
  border-radius: 0 !important;
  background-position: center 25% !important;
}

body.webos-tv .title-modal .modal-backdrop-art::after {
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.96), rgba(5, 5, 6, 0.32) 60%, transparent),
    linear-gradient(0deg, #050506 0%, transparent 64%) !important;
}

body.webos-tv .title-modal .modal-content {
  position: relative !important;
  z-index: 3;
  width: min(1440px, calc(100% - 190px)) !important;
  margin: -365px 0 0 96px !important;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 820px) !important;
  gap: 42px !important;
}

body.webos-tv .title-modal .modal-poster {
  width: 260px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 6px !important;
}

body.webos-tv .title-modal .modal-copy h2 {
  max-width: 900px;
  margin: 8px 0 18px !important;
  font-size: 72px !important;
  line-height: 0.98 !important;
}

body.webos-tv .title-modal .modal-description,
body.webos-tv .title-modal .modal-current-episode {
  max-width: 820px !important;
  font-size: 24px !important;
  line-height: 1.42 !important;
}

body.webos-tv .title-modal .modal-meta span {
  min-height: 48px;
  padding: 10px 17px !important;
  border-radius: 4px !important;
  font-size: 21px !important;
}

body.webos-tv .title-modal .modal-back-button,
body.webos-tv .title-modal .modal-close {
  position: fixed !important;
  z-index: 8;
  top: 48px !important;
}

body.webos-tv .title-modal .modal-back-button {
  left: 52px !important;
  min-height: 72px;
  padding: 0 26px !important;
  border-radius: 5px !important;
  font-size: 24px !important;
}

body.webos-tv .title-modal .modal-close {
  right: 52px !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  font-size: 28px !important;
}

body.webos-tv .modal-show-extras {
  position: relative;
  z-index: 4;
  width: calc(100% - 192px) !important;
  margin: 50px 96px 0 !important;
}

body.webos-tv .modal-tabs button,
body.webos-tv .modal-season-button {
  min-height: 64px !important;
  padding: 0 24px !important;
  font-size: 23px !important;
}

body.webos-tv .modal-episode-grid {
  grid-auto-columns: 350px !important;
}

body.webos-tv .profile-sheet .profile-panel {
  width: 100vw !important;
  min-height: 100vh !important;
  max-width: none !important;
  padding: 74px 110px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050506 !important;
}

body.webos-tv .profile-sheet .install-logo {
  width: 270px !important;
  max-height: 150px !important;
  object-fit: contain;
}

body.webos-tv .profile-sheet h2 {
  margin: 22px 0 42px !important;
  font-size: 62px !important;
}

body.webos-tv .profile-options {
  width: min(1350px, 92vw) !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  gap: 44px !important;
  overflow-x: auto;
  padding: 16px 18px 34px;
  scrollbar-width: none;
}

body.webos-tv .profile-options::-webkit-scrollbar {
  display: none;
}

body.webos-tv .profile-option,
body.webos-tv [data-action="show-add-profile"] {
  flex: 0 0 250px !important;
  min-width: 250px !important;
  min-height: 300px !important;
  padding: 28px 20px !important;
  border: 3px solid transparent !important;
  border-radius: 6px !important;
  background: #141416 !important;
}

body.webos-tv .profile-option img,
body.webos-tv .profile-avatar,
body.webos-tv .profile-add-avatar {
  width: 168px !important;
  height: 168px !important;
}

body.webos-tv .profile-option strong,
body.webos-tv [data-action="show-add-profile"] strong {
  font-size: 29px !important;
}

body.webos-tv .profile-status {
  margin-top: 25px !important;
  font-size: 22px !important;
}

body.webos-tv .auth-card {
  width: 650px !important;
  padding: 48px !important;
  border-radius: 6px !important;
}

body.webos-tv .pin-form label,
body.webos-tv .pin-form input,
body.webos-tv .pin-form button {
  font-size: 26px !important;
}

body.webos-tv[data-screen="watch"] {
  overflow: hidden !important;
}

body.webos-tv[data-screen="watch"] .site-header {
  display: none !important;
}

body.webos-tv[data-screen="watch"] .page-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000;
}

body.webos-tv[data-screen="watch"] .player-section {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  background: #000 !important;
}

body.webos-tv[data-screen="watch"] .hero-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}

body.webos-tv[data-screen="watch"] #playerFrame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000;
}

body.webos-tv[data-screen="watch"] .page-back-button {
  position: fixed !important;
  z-index: 120;
  top: 46px !important;
  left: 52px !important;
  min-width: 150px;
  min-height: 72px;
  padding: 0 24px !important;
  display: flex !important;
  border-radius: 5px !important;
  background: rgba(8, 8, 10, 0.88) !important;
  font-size: 24px !important;
}

body.webos-tv[data-screen="watch"] .watch-episode-nav {
  position: fixed !important;
  z-index: 120;
  right: 52px;
  bottom: 48px;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
  background: rgba(8, 8, 10, 0.9) !important;
}

body.webos-tv[data-screen="watch"] .watch-episode-nav span {
  min-width: 96px;
  font-size: 22px !important;
}

body.webos-tv button:focus,
body.webos-tv a:focus,
body.webos-tv input:focus,
body.webos-tv select:focus,
body.webos-tv textarea:focus,
body.webos-tv iframe:focus,
body.webos-tv [tabindex]:focus {
  position: relative;
  z-index: 30;
  outline: 5px solid var(--tv-focus) !important;
  outline-offset: 5px !important;
  box-shadow: 0 0 0 3px rgba(73, 230, 173, 0.78), 0 18px 44px rgba(0, 0, 0, 0.48) !important;
  transform: scale(1.055);
}

body.webos-tv .service-switcher button:focus,
body.webos-tv .main-nav button:focus,
body.webos-tv .title-modal .modal-back-button:focus,
body.webos-tv .title-modal .modal-close:focus,
body.webos-tv[data-screen="watch"] .page-back-button:focus {
  transform: scale(1.07);
}

body.webos-tv #playerFrame:focus {
  z-index: 2;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.webos-tv button,
body.webos-tv a,
body.webos-tv input,
body.webos-tv select,
body.webos-tv textarea,
body.webos-tv [tabindex] {
  transition: transform 170ms ease, background-color 170ms ease, color 170ms ease, box-shadow 170ms ease, opacity 170ms ease !important;
}

body.webos-tv .startup-video {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
}

@media (prefers-reduced-motion: reduce) {
  body.webos-tv *,
  body.webos-tv *::before,
  body.webos-tv *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}