/*
 * VueBox portrait phone layout.
 * Loaded separately so the TV/landscape design can remain the base layout.
 */

@media (orientation: portrait) and (max-width: 900px) {
  :root {
    --vb-mobile-topbar: calc(env(safe-area-inset-top, 0px) + 70px);
    --vb-mobile-bottom: env(safe-area-inset-bottom, 0px);
    --vb-mobile-pad: clamp(14px, 4vw, 22px);
    --vb-mobile-radius: 8px;
  }

  html,
  body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
    background: #000 !important;
  }

  button,
  input {
    touch-action: manipulation;
  }

  .topbar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-height: var(--vb-mobile-topbar) !important;
    padding: env(safe-area-inset-top, 0px) 58px 10px 12px !important;
    justify-content: flex-start !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .96), rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .menu {
    flex: 1 1 auto !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow-x: auto !important;
    scroll-padding-inline: 12px !important;
    scroll-snap-type: x proximity;
  }

  .menu-item {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: clamp(.82rem, 3.7vw, 1rem) !important;
    line-height: 1 !important;
    scroll-snap-align: center;
    white-space: nowrap !important;
    transform: none !important;
  }

  .topbar.focused .menu-item.active,
  .topbar.focused .menu-item:focus,
  .menu-item.active,
  .menu-item.selected {
    transform: none !important;
  }

  .logo-right {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    object-fit: contain;
  }

  .menu-content {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    background-position: center top !important;
  }

  .promo-overlay {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .18) 46%, rgba(0, 0, 0, .62) 100%),
      linear-gradient(to right, rgba(0, 0, 0, .52), rgba(0, 0, 0, .08)) !important;
  }

  .promo-details {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: min(50vh, 460px) !important;
    padding: 0 var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 9vh) !important;
    justify-content: flex-end !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .58) 52%, rgba(0, 0, 0, 0) 100%) !important;
  }

  .promo-details .app_icon {
    width: min(48vw, 190px) !important;
    height: auto !important;
    margin: 0 0 18px !important;
  }

  .main_text {
    max-width: 92vw !important;
    font-size: clamp(2.8rem, 14vw, 4.6rem) !important;
    line-height: .92 !important;
    margin-top: 0 !important;
  }

  .promo-title {
    max-width: 92vw !important;
    margin-top: 18px !important;
    font-size: clamp(1.15rem, 4.8vw, 1.55rem) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  .promo-meta,
  .promo-desc {
    max-width: 92vw !important;
    font-size: clamp(.9rem, 3.8vw, 1.02rem) !important;
    line-height: 1.45 !important;
  }

  .promo-desc {
    display: -webkit-box !important;
    max-height: 6.4em !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  .watch-btn {
    min-height: 48px !important;
    margin-top: 24px !important;
    padding: 0 28px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
  }

  .promoLine {
    display: none !important;
  }

  .promo_gradientOverlay {
    width: 100vw !important;
    height: 48vh !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)) !important;
  }

  .start-screen,
  .loading-section {
    min-height: 100dvh !important;
  }

  .startup-logo {
    width: min(52vw, 220px) !important;
    height: auto !important;
  }

  .loading-spinner {
    top: 54% !important;
  }

  #toast,
  .movies-toast,
  #moviesApp .movies-toast,
  #tvShowsApp .movies-toast,
  .sports-toast {
    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
    width: auto !important;
    padding: 12px 14px !important;
    border-radius: var(--vb-mobile-radius) !important;
    font-size: .95rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .exit-app-overlay {
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(var(--vb-mobile-bottom) + 18px) !important;
    align-items: flex-end !important;
  }

  .exit-app-dialog {
    width: 100% !important;
    padding: 24px !important;
  }

  .exit-app-title {
    font-size: clamp(1.8rem, 9vw, 2.6rem) !important;
  }

  .exit-app-actions,
  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .exit-app-button,
  .install_button,
  .start_button,
  .reload_button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  .page-shell {
    width: min(100% - 28px, 520px) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    gap: 22px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 0 calc(var(--vb-mobile-bottom) + 28px) !important;
  }

  .brand-mark {
    margin-bottom: 28px !important;
  }

  .page-shell h1,
  .account_status_text {
    font-size: clamp(2.4rem, 12vw, 3.45rem) !important;
    line-height: .98 !important;
  }

  .lead {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .media-panel {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  .media-panel::before {
    width: 72vw !important;
    max-width: 300px !important;
    height: 170px !important;
  }

  .logo-wrap {
    width: min(76vw, 310px) !important;
    padding: 18px !important;
  }

  .status-card {
    width: 100% !important;
  }

  .popup {
    align-items: flex-end !important;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(var(--vb-mobile-bottom) + 14px) !important;
  }

  .popup-content {
    width: 100% !important;
    max-width: none !important;
    padding: 26px 22px 24px !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  .player-modal,
  #homePlayerContainer,
  #moviesApp .player-modal,
  #tvShowsApp .player-modal,
  #downloadsApp .player-modal {
    min-height: 100dvh !important;
  }

  .player-top,
  .home-player-top,
  #moviesApp .player-top,
  #tvShowsApp .player-top,
  #downloadsApp .player-top {
    left: 14px !important;
    right: 14px !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    gap: 12px !important;
  }

  .player-btn,
  #moviesApp .player-btn,
  #tvShowsApp .player-btn,
  #downloadsApp .player-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .player-meta,
  #moviesApp .player-meta,
  #tvShowsApp .player-meta,
  #downloadsApp .player-meta {
    max-width: calc(100vw - 142px) !important;
  }

  .player-title,
  #moviesApp .player-title,
  #tvShowsApp .player-title,
  #downloadsApp .player-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  .player-subtitle,
  #moviesApp .player-subtitle,
  #tvShowsApp .player-subtitle,
  #downloadsApp .player-subtitle {
    font-size: .8rem !important;
    line-height: 1.25 !important;
  }

  .player-bottom,
  .home-player-bottom,
  #moviesApp .player-bottom,
  #tvShowsApp .player-bottom,
  #downloadsApp .player-bottom {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(var(--vb-mobile-bottom) + 18px) !important;
  }

  .player-controls,
  #moviesApp .player-controls,
  #tvShowsApp .player-controls,
  #downloadsApp .player-controls {
    gap: 8px !important;
  }

  .time-label,
  #moviesApp .time-label,
  #tvShowsApp .time-label,
  #downloadsApp .time-label {
    width: 46px !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
  }

  .player-progress,
  #moviesApp .player-progress,
  #tvShowsApp .player-progress,
  #downloadsApp .player-progress {
    height: 18px !important;
  }

  .player-progress-track,
  #moviesApp .player-progress-track,
  #tvShowsApp .player-progress-track,
  #downloadsApp .player-progress-track {
    height: 5px !important;
  }

  .audio-row,
  #moviesApp .audio-row,
  #tvShowsApp .audio-row,
  #downloadsApp .audio-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-height: 24vh !important;
    overflow-y: auto !important;
  }

  .option-section,
  #moviesApp .option-section,
  #tvShowsApp .option-section {
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: var(--vb-mobile-radius) !important;
    background: rgba(20, 20, 22, .72) !important;
  }

  .option-label,
  #moviesApp .option-label,
  #tvShowsApp .option-label {
    padding: 0 2px !important;
    font-size: .68rem !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  .option-buttons,
  #moviesApp .option-buttons,
  #tvShowsApp .option-buttons {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .option-buttons::-webkit-scrollbar,
  #moviesApp .option-buttons::-webkit-scrollbar,
  #tvShowsApp .option-buttons::-webkit-scrollbar {
    display: none;
  }

  .option-section[data-option-section="subtitle_variant"],
  #moviesApp .option-section[data-option-section="subtitle_variant"],
  #tvShowsApp .option-section[data-option-section="subtitle_variant"] {
    width: 100% !important;
    max-height: 22vh !important;
    padding: 8px !important;
  }

  .option-section[data-option-section="subtitle_variant"] .option-buttons,
  #moviesApp .option-section[data-option-section="subtitle_variant"] .option-buttons,
  #tvShowsApp .option-section[data-option-section="subtitle_variant"] .option-buttons {
    max-height: 16vh !important;
  }

  .audio-btn,
  #moviesApp .audio-btn,
  #tvShowsApp .audio-btn,
  #downloadsApp .audio-btn {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: .85rem !important;
  }

  /* Movies and TV Shows */
  #moviesApp,
  #tvShowsApp {
    overflow: hidden !important;
  }

  #moviesApp::before,
  #tvShowsApp::before {
    height: var(--vb-mobile-topbar) !important;
    background: linear-gradient(to bottom, #030303 0%, rgba(3, 3, 3, .92) 72%, rgba(3, 3, 3, 0) 100%) !important;
  }

  #moviesApp .section-search-btn,
  #tvShowsApp .section-search-btn {
    top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
    left: var(--vb-mobile-pad) !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    gap: 9px !important;
    font-size: .92rem !important;
  }

  #moviesApp .section-search-icon,
  #tvShowsApp .section-search-icon {
    width: 17px !important;
    height: 17px !important;
    border-width: 2px !important;
  }

  #moviesApp .movies-rows,
  #tvShowsApp .movies-rows {
    padding: calc(env(safe-area-inset-top, 0px) + 148px) 0 calc(var(--vb-mobile-bottom) + 44px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #moviesApp .movie-row,
  #tvShowsApp .movie-row,
  #moviesApp .movie-row.is-featured-row,
  #tvShowsApp .movie-row.is-featured-row,
  #moviesApp .movie-row.is-large-poster-row,
  #tvShowsApp .movie-row.is-large-poster-row {
    min-height: auto !important;
    padding-bottom: 30px !important;
  }

  #moviesApp .movie-row-title,
  #tvShowsApp .movie-row-title {
    height: auto !important;
    margin: 0 0 10px !important;
    padding-left: var(--vb-mobile-pad) !important;
    padding-right: var(--vb-mobile-pad) !important;
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
    line-height: 1.22 !important;
  }

  #moviesApp .row-scroller,
  #tvShowsApp .row-scroller {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-padding-inline: var(--vb-mobile-pad) !important;
  }

  #moviesApp .row-track,
  #tvShowsApp .row-track {
    gap: 10px !important;
    padding: 4px var(--vb-mobile-pad) 16px !important;
  }

  #moviesApp .movie-card,
  #tvShowsApp .movie-card {
    width: 32vw !important;
    min-width: 32vw !important;
  }

  #moviesApp .movie-card.is-landscape,
  #tvShowsApp .movie-card.is-landscape,
  #moviesApp .movie-card.is-continue:not(.is-focused),
  #tvShowsApp .movie-card.is-continue:not(.is-focused) {
    width: 68vw !important;
    min-width: 68vw !important;
  }

  #moviesApp .movie-card.is-large-portrait,
  #tvShowsApp .movie-card.is-large-portrait {
    width: 39vw !important;
    min-width: 39vw !important;
  }

  #moviesApp .movie-card.is-focused,
  #tvShowsApp .movie-card.is-focused,
  #moviesApp .movie-card.is-landscape.is-focused,
  #tvShowsApp .movie-card.is-landscape.is-focused,
  #moviesApp .movie-card.is-continue.is-focused,
  #tvShowsApp .movie-card.is-continue.is-focused {
    width: 78vw !important;
    min-width: 78vw !important;
  }

  #moviesApp .movie-card.is-large-portrait.is-focused,
  #tvShowsApp .movie-card.is-large-portrait.is-focused {
    display: block !important;
    width: 82vw !important;
    min-width: 82vw !important;
  }

  #moviesApp .movie-card.is-ranked,
  #tvShowsApp .movie-card.is-ranked {
    padding-left: 38px !important;
  }

  #moviesApp .movie-card.is-ranked.is-large-portrait:not(.is-focused),
  #tvShowsApp .movie-card.is-ranked.is-large-portrait:not(.is-focused) {
    width: 48vw !important;
    min-width: 48vw !important;
  }

  #moviesApp .movie-card.is-ranked.is-large-portrait.is-focused,
  #tvShowsApp .movie-card.is-ranked.is-large-portrait.is-focused {
    width: 88vw !important;
    min-width: 88vw !important;
  }

  #moviesApp .poster-frame,
  #tvShowsApp .poster-frame {
    border-radius: 6px !important;
  }

  #moviesApp .movie-card.is-focused .poster-frame,
  #tvShowsApp .movie-card.is-focused .poster-frame,
  #moviesApp .movie-card.is-continue .poster-frame,
  #tvShowsApp .movie-card.is-continue .poster-frame {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #moviesApp .movie-card.is-large-portrait.is-focused .poster-frame,
  #tvShowsApp .movie-card.is-large-portrait.is-focused .poster-frame {
    width: 48vw !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }

  #moviesApp .rank-img,
  #tvShowsApp .rank-img {
    left: 0 !important;
    top: 4px !important;
    width: 52px !important;
    height: 220px !important;
  }

  #moviesApp .movie-card.is-ranked.is-focused .rank-img,
  #tvShowsApp .movie-card.is-ranked.is-focused .rank-img {
    top: 4px !important;
    width: 52px !important;
    height: 260px !important;
  }

  #moviesApp .card-copy,
  #tvShowsApp .card-copy,
  #moviesApp .movie-card.is-large-portrait.is-focused .card-copy,
  #tvShowsApp .movie-card.is-large-portrait.is-focused .card-copy {
    width: 100% !important;
    min-height: auto !important;
    padding-top: 10px !important;
  }

  #moviesApp .card-title,
  #tvShowsApp .card-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  #moviesApp .card-sub,
  #tvShowsApp .card-sub {
    font-size: .86rem !important;
    line-height: 1.3 !important;
  }

  #moviesApp .card-desc,
  #tvShowsApp .card-desc,
  #moviesApp .movie-card.is-large-portrait.is-focused .card-desc,
  #tvShowsApp .movie-card.is-large-portrait.is-focused .card-desc {
    width: 100% !important;
    max-height: 4.9em !important;
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }

  #moviesApp .details-backdrop,
  #tvShowsApp .details-backdrop {
    opacity: .56 !important;
    object-position: center top !important;
  }

  #moviesApp .details-shade,
  #tvShowsApp .details-shade {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .24) 42%, rgba(3, 3, 3, .72) 100%),
      linear-gradient(to top, rgba(3, 3, 3, .78) 0%, rgba(3, 3, 3, .34) 48%, rgba(3, 3, 3, .08) 100%) !important;
  }

  #moviesApp .details-close,
  #tvShowsApp .details-close {
    left: 14px !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 1rem !important;
  }

  #moviesApp .details-copy,
  #tvShowsApp .details-copy {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 86px) !important;
    padding: 24px var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 22px) !important;
    overflow-y: auto !important;
  }

  #moviesApp .details-logo,
  #tvShowsApp .details-logo {
    max-width: 82vw !important;
    max-height: 14vh !important;
    margin-bottom: 14px !important;
  }

  #moviesApp .details-title,
  #tvShowsApp .details-title {
    font-size: clamp(1.9rem, 9vw, 3.1rem) !important;
    line-height: 1.04 !important;
  }

  #moviesApp .details-meta,
  #tvShowsApp .details-meta {
    gap: 9px !important;
    min-height: 0 !important;
    font-size: .92rem !important;
    line-height: 1.35 !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  #moviesApp .details-desc,
  #tvShowsApp .details-desc {
    width: auto !important;
    max-height: 9.2em !important;
    margin: 14px 0 18px !important;
    font-size: .98rem !important;
    line-height: 1.45 !important;
  }

  #moviesApp .detail-actions,
  #tvShowsApp .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #moviesApp .detail-action,
  #tvShowsApp .detail-action {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: var(--vb-mobile-radius) !important;
    font-size: .9rem !important;
    text-align: center !important;
  }

  #moviesApp .search-panel,
  #tvShowsApp .search-panel {
    padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 20px) !important;
  }

  #moviesApp .search-head,
  #tvShowsApp .search-head {
    gap: 10px !important;
  }

  #moviesApp .search-close,
  #tvShowsApp .search-close {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
  }

  #moviesApp .search-input,
  #tvShowsApp .search-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: var(--vb-mobile-radius) !important;
    font-size: 1rem !important;
  }

  #moviesApp .search-status,
  #tvShowsApp .search-status {
    min-height: 34px !important;
    margin-top: 14px !important;
    font-size: .9rem !important;
  }

  #moviesApp .search-grid,
  #tvShowsApp .search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--vb-mobile-bottom) - 124px) !important;
    gap: 16px 10px !important;
    padding: 4px 2px 32px !important;
    scroll-padding: 4px 2px 32px !important;
  }

  #moviesApp .search-card-title,
  #tvShowsApp .search-card-title {
    font-size: .86rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #tvShowsApp .episodes-layout {
    grid-template-columns: 1fr !important;
    display: block !important;
    gap: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 62px) var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  #tvShowsApp .episodes-top-close {
    position: fixed !important;
    left: 14px !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 1rem !important;
  }

  #tvShowsApp .episodes-head {
    max-height: none !important;
    gap: 0 !important;
  }

  #tvShowsApp .episodes-logo {
    max-width: min(68vw, 280px) !important;
    max-height: 72px !important;
    margin-bottom: 10px !important;
  }

  #tvShowsApp .episodes-title {
    margin-bottom: 6px !important;
    font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }

  #tvShowsApp .episodes-meta,
  #tvShowsApp .episodes-status {
    font-size: .88rem !important;
    line-height: 1.3 !important;
  }

  #tvShowsApp .episodes-desc {
    display: -webkit-box !important;
    max-height: none !important;
    margin: 10px 0 0 !important;
    font-size: .86rem !important;
    line-height: 1.38 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #tvShowsApp .episodes-head .detail-action {
    width: auto !important;
    min-height: 38px !important;
    margin-top: 12px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: .84rem !important;
  }

  #tvShowsApp .episodes-head .episodes-close {
    display: none !important;
  }

  #tvShowsApp .episodes-main {
    margin-top: 14px !important;
  }

  #tvShowsApp .season-tabs {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x;
  }

  #tvShowsApp .season-tab {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: .92rem !important;
  }

  #tvShowsApp .episode-list {
    height: auto !important;
    max-height: none !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
    touch-action: pan-y;
  }

  #tvShowsApp .episode-card {
    grid-template-columns: minmax(112px, 36vw) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin-bottom: 12px !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: var(--vb-mobile-radius) !important;
    background: rgba(18, 18, 20, .76) !important;
    color: #fff !important;
    overflow: visible !important;
  }

  #tvShowsApp .episode-thumb {
    width: 100% !important;
    border-radius: 6px !important;
  }

  #tvShowsApp .episode-copy {
    display: flex !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #tvShowsApp .episode-title {
    width: 100% !important;
    margin-bottom: 4px !important;
    color: #fff !important;
    font-size: .96rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #tvShowsApp .episode-meta,
  #tvShowsApp .episode-desc {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  #tvShowsApp .episode-desc {
    width: 100% !important;
    margin-top: 6px !important;
    -webkit-line-clamp: 2 !important;
  }

  #tvShowsApp .episode-download-btn {
    width: auto !important;
    min-width: 92px !important;
    max-width: 100% !important;
    min-height: 34px !important;
    margin-top: 9px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: .76rem !important;
    text-overflow: clip !important;
  }

  #tvShowsApp .season-tab:focus,
  #tvShowsApp .season-tab.is-focused,
  #tvShowsApp .episode-card:focus,
  #tvShowsApp .episode-card.is-focused {
    background: rgba(28, 28, 31, .86) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .32) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
  }

  #tvShowsApp .season-tab.is-active,
  #tvShowsApp .season-tab.is-active:focus,
  #tvShowsApp .season-tab.is-active.is-focused {
    background: linear-gradient(90deg, rgba(229, 9, 20, .94), rgba(255, 255, 255, .22)) !important;
    color: #fff !important;
  }

  #tvShowsApp .episode-card:focus .episode-title,
  #tvShowsApp .episode-card.is-focused .episode-title {
    color: #fff !important;
  }

  #tvShowsApp .episode-card:focus .episode-meta,
  #tvShowsApp .episode-card.is-focused .episode-meta,
  #tvShowsApp .episode-card:focus .episode-desc,
  #tvShowsApp .episode-card.is-focused .episode-desc {
    color: rgba(255, 255, 255, .72) !important;
  }

  #tvShowsApp .episode-card:focus .episode-download-btn,
  #tvShowsApp .episode-card.is-focused .episode-download-btn {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .22) !important;
  }

  /* Live TV */
  #livetvApp {
    --fav-w: 0px !important;
    --logo-w: 74px !important;
    --gutter-w: 74px !important;
    overflow: hidden !important;
  }

  #livetvApp .live-hero {
    inset: 0 0 60vh 0 !important;
    min-height: 40vh !important;
    padding: calc(env(safe-area-inset-top, 0px) + 90px) var(--vb-mobile-pad) 12px !important;
    background:
      linear-gradient(180deg, rgba(5, 6, 6, .96), rgba(5, 6, 6, .68) 58%, rgba(5, 6, 6, .96)),
      #101211 !important;
  }

  #livetvApp .hero-copy,
  #livetvApp.has-mini-player .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  #livetvApp .hero-clock,
  #livetvApp .hero-channel,
  #livetvApp .hero-meta {
    font-size: .85rem !important;
    line-height: 1.35 !important;
  }

  #livetvApp .hero-title {
    font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #livetvApp .hero-desc {
    max-height: 4.4em !important;
    font-size: .9rem !important;
    line-height: 1.45 !important;
  }

  #livetvApp .hero-progress {
    width: 100% !important;
    height: 4px !important;
  }

  #livetvApp .hero-art {
    top: calc(env(safe-area-inset-top, 0px) + 86px) !important;
    right: var(--vb-mobile-pad) !important;
    width: 30vw !important;
    height: 13vh !important;
    border-radius: var(--vb-mobile-radius) !important;
    opacity: .55 !important;
  }

  #livetvApp.has-mini-player .hero-art {
    top: var(--vb-mobile-topbar) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 39vh !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }

  #livetvApp.has-mini-player .hero-copy {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #livetvApp .guide-shell {
    height: 62vh !important;
    border-top-width: 1px !important;
  }

  #livetvApp .guide-label {
    height: 44px !important;
    gap: 8px !important;
    padding: 0 var(--vb-mobile-pad) !important;
    font-size: .75rem !important;
    line-height: 1.2 !important;
  }

  #livetvApp .guide-action {
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
  }

  #livetvApp .guide-head {
    height: 38px !important;
  }

  #livetvApp .date-cell {
    flex-basis: var(--gutter-w) !important;
    padding-left: 12px !important;
    font-size: .72rem !important;
  }

  #livetvApp .time-slot {
    padding-left: 10px !important;
    font-size: .72rem !important;
  }

  #livetvApp .guide-viewport {
    top: 82px !important;
  }

  #livetvApp .channel-cell {
    gap: 4px !important;
    padding: 7px 6px !important;
    font-size: .68rem !important;
  }

  #livetvApp .channel-cell img {
    max-height: 34px !important;
  }

  #livetvApp .fav-cell {
    display: none !important;
  }

  #livetvApp .program {
    padding: 12px 10px 8px !important;
    border-left-width: 2px !important;
  }

  #livetvApp .program-title {
    font-size: .88rem !important;
    line-height: 1.22 !important;
  }

  #livetvApp .program-time {
    font-size: .72rem !important;
    line-height: 1.25 !important;
  }

  #livetvApp .guide-scroll {
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }

  #livetvApp .category-panel,
  #livetvApp .search-panel {
    left: 10px !important;
    right: 10px !important;
    top: calc(env(safe-area-inset-top, 0px) + 84px) !important;
    bottom: calc(var(--vb-mobile-bottom) + 12px) !important;
    width: auto !important;
    padding: 12px 0 !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  #livetvApp .category-title,
  #livetvApp .search-title {
    height: 42px !important;
    padding: 0 16px !important;
    font-size: .9rem !important;
  }

  #livetvApp .search-box {
    padding: 0 12px 10px !important;
  }

  #livetvApp .search-input {
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: var(--vb-mobile-radius) !important;
    font-size: .95rem !important;
  }

  #livetvApp .category-item,
  #livetvApp .search-item {
    min-height: 54px !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  #livetvApp .category-logo {
    width: 42px !important;
    height: 42px !important;
  }

  #livetvApp .category-name,
  #livetvApp .search-name {
    font-size: .9rem !important;
    line-height: 1.25 !important;
  }

  #livetvApp .pin-card {
    width: calc(100vw - 32px) !important;
    padding: 22px !important;
  }

  #livetvApp .pin-title {
    font-size: 1.5rem !important;
  }

  #livetvApp .pin-grid {
    gap: 8px !important;
  }

  #livetvApp .pin-key {
    min-height: 48px !important;
    border-radius: var(--vb-mobile-radius) !important;
    font-size: 1rem !important;
  }

  #livePlayerModal .player-channel-copy,
  #livePlayerModal .player-channel-title,
  #livePlayerModal .player-channel-sub,
  #livePlayerModal .player-channel-next {
    max-width: calc(100vw - 96px) !important;
  }

  #livePlayerModal .livetv-player-back {
    left: 14px !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 1rem !important;
  }

  #livePlayerModal .livetv-player-cast {
    left: 66px !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: .92rem !important;
  }

  #livePlayerModal .livetv-player-hud {
    min-height: 150px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 72px) var(--vb-mobile-pad) 44px !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  #livePlayerModal .player-channel-logo {
    width: 64px !important;
    height: 48px !important;
  }

  #livePlayerModal .player-channel-title {
    font-size: clamp(1.15rem, 5.8vw, 1.7rem) !important;
    line-height: 1.12 !important;
  }

  #livePlayerModal .player-channel-sub,
  #livePlayerModal .player-channel-next {
    font-size: .9rem !important;
    line-height: 1.28 !important;
  }

  #livePlayerModal .player-badge {
    font-size: .78rem !important;
  }

  #livePlayerModal .player-favorite {
    display: none !important;
  }

  /* Sports */
  #sportsApp .sports-shell {
    padding: calc(env(safe-area-inset-top, 0px) + 84px) var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 18px) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #sportsApp .sports-topline {
    min-height: 44px !important;
  }

  #sportsApp .sports-logo {
    max-width: 48vw !important;
    max-height: 42px !important;
  }

  #sportsApp .sports-league-text,
  #sportsApp .sports-panel-title {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
  }

  #sportsApp .sports-meta-pill {
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: .78rem !important;
  }

  #sportsApp .main-game {
    height: 28vh !important;
    min-height: 210px !important;
  }

  #sportsApp .game-info {
    padding: 9px 10px !important;
  }

  #sportsApp .team .name,
  #sportsApp .score {
    font-size: .9rem !important;
  }

  #sportsApp .sports-panel-header {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #sportsApp .sports-date-controls {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
  }

  #sportsApp .date-step,
  #sportsApp .games-date {
    height: 42px !important;
    font-size: .92rem !important;
  }

  #sportsApp .game-card {
    min-height: 104px !important;
    padding: 10px 12px !important;
  }

  #sportsApp .card-name,
  #sportsApp .card-score {
    font-size: .88rem !important;
  }

  #sportsApp .card-action {
    max-width: 100% !important;
    font-size: .78rem !important;
  }

  #sportsApp .sports-date-popover {
    left: var(--vb-mobile-pad) !important;
    right: var(--vb-mobile-pad) !important;
    top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
    width: auto !important;
  }

  /* Gaming */
  .gaming-app {
    --safe-top: calc(env(safe-area-inset-top, 0px) + 112px) !important;
    --mask-top: calc(env(safe-area-inset-top, 0px) + 104px) !important;
    --search-top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
  }

  .gaming-shell,
  #menu-content .gaming-shell {
    padding: var(--safe-top) var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 24px) !important;
  }

  .gaming-topbar,
  #menu-content .gaming-topbar {
    left: var(--vb-mobile-pad) !important;
    right: var(--vb-mobile-pad) !important;
    top: var(--search-top) !important;
    width: auto !important;
  }

  .gaming-search {
    min-height: 42px !important;
    padding-left: 14px !important;
    font-size: .95rem !important;
  }

  .gaming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .game-card,
  .stream-card {
    border-radius: var(--vb-mobile-radius) !important;
  }

  .game-name {
    font-size: .86rem !important;
  }

  .gaming-app[data-view="streams"] #gamingStreamsView {
    position: fixed !important;
    inset: 0 !important;
  }

  .gaming-app[data-view="streams"] .stream-list-panel {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--vb-mobile-bottom) + 12px) !important;
    max-height: 28vh !important;
    padding: 0 var(--vb-mobile-pad) !important;
    overflow-x: auto !important;
  }

  .stream-card {
    width: min(68vw, 260px) !important;
  }

  /* Downloads */
  #downloadsApp .downloads-shell,
  #downloadsApp.is-root-view .downloads-shell {
    inset: calc(env(safe-area-inset-top, 0px) + 82px) var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 18px) !important;
    gap: 14px !important;
  }

  #downloadsApp .downloads-head {
    gap: 10px !important;
  }

  #downloadsApp .downloads-title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  #downloadsApp .downloads-back {
    min-width: 50px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    font-size: .86rem !important;
  }

  #downloadsApp .downloads-tabs {
    gap: 8px !important;
    overflow-x: auto !important;
  }

  #downloadsApp .downloads-tab {
    flex: 1 0 auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
  }

  #downloadsApp .downloads-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
    padding: 2px 2px 28px !important;
  }

  #downloadsApp .download-name {
    font-size: .95rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #downloadsApp .download-meta,
  #downloadsApp .download-size,
  #downloadsApp .episode-size,
  #downloadsApp .storage-note {
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }

  #downloadsApp .download-actions {
    gap: 8px !important;
  }

  #downloadsApp .download-action {
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
  }

  #downloadsApp .show-hero {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 124px !important;
  }

  #downloadsApp .show-title {
    font-size: 1.55rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #downloadsApp .show-meta {
    font-size: .86rem !important;
  }

  #downloadsApp .season-tabs {
    gap: 8px !important;
    overflow-x: auto !important;
  }

  #downloadsApp .season-tab {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: .86rem !important;
  }

  #downloadsApp .episode-card {
    grid-template-columns: 34vw minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 112px !important;
    padding: 10px !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  #downloadsApp .episode-thumb {
    width: 34vw !important;
  }

  #downloadsApp .episode-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
    min-width: 0 !important;
  }

  #downloadsApp .episode-actions .download-action {
    width: 100% !important;
  }

  #downloadsApp .episode-title {
    font-size: .95rem !important;
    line-height: 1.25 !important;
  }

  #downloadsApp .episode-meta,
  #downloadsApp .episode-desc {
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  /* Settings */
  #settingsApp {
    overflow-y: auto !important;
  }

  #settingsApp .settings-shell {
    width: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 88px) var(--vb-mobile-pad) calc(var(--vb-mobile-bottom) + 22px) !important;
  }

  #settingsApp .settings-header {
    grid-template-columns: 48px 1fr !important;
    gap: 12px !important;
  }

  #settingsApp .settings-mark {
    width: 48px !important;
    height: 48px !important;
  }

  #settingsApp .settings-title {
    font-size: 1.85rem !important;
    line-height: 1.1 !important;
  }

  #settingsApp .settings-grid,
  #settingsApp .language-options {
    grid-template-columns: 1fr !important;
  }

  #settingsApp .settings-panel {
    padding: 16px !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  #settingsApp .settings-row {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  #settingsApp .language-option,
  #settingsApp .settings-action {
    min-height: 44px !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  /* Showcase / events player */
  .showcase-topbar {
    height: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    padding: env(safe-area-inset-top, 0px) 12px 10px !important;
  }

  .back-btn {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
  }

  .back-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .rail {
    height: 26vh !important;
  }

  .rail-inner {
    padding: 12px !important;
    gap: 10px !important;
  }

  .rail-item {
    width: 44vw !important;
    padding: 6px !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  .thumb {
    height: 15vh !important;
    border-radius: var(--vb-mobile-radius) !important;
  }

  .title {
    margin-top: 10px !important;
    font-size: .86rem !important;
    line-height: 1.25 !important;
  }

  .live-badge,
  .viewers-badge {
    font-size: .7rem !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
  }
}

@media (orientation: portrait) and (max-width: 390px) {
  :root {
    --vb-mobile-pad: 12px;
  }

  .menu-item {
    padding: 0 12px !important;
    font-size: .82rem !important;
  }

  #moviesApp .movie-card,
  #tvShowsApp .movie-card {
    width: 36vw !important;
    min-width: 36vw !important;
  }

  #moviesApp .movie-card.is-landscape,
  #tvShowsApp .movie-card.is-landscape,
  #moviesApp .movie-card.is-continue:not(.is-focused),
  #tvShowsApp .movie-card.is-continue:not(.is-focused) {
    width: 74vw !important;
    min-width: 74vw !important;
  }

  #moviesApp .search-grid,
  #tvShowsApp .search-grid,
  #downloadsApp .downloads-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #livetvApp {
    --gutter-w: 66px !important;
    --logo-w: 66px !important;
    --fav-w: 0px !important;
  }

  .gaming-grid {
    gap: 10px !important;
  }
}