/* Mobile layout — only loaded via media query in index.html (max-width: 768px) */

body.app-mobile {
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: auto;
}

html.app-mobile {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* On list tabs, lock page scroll so only the list scrolls */
body.app-mobile[data-mobile-active="schedule"],
body.app-mobile[data-mobile-active="channels"],
body.app-mobile[data-mobile-active="search"] {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

body.app-mobile[data-mobile-active="schedule"] .app,
body.app-mobile[data-mobile-active="channels"] .app,
body.app-mobile[data-mobile-active="search"] .app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

body.app-mobile[data-mobile-active="schedule"] .app > header,
body.app-mobile[data-mobile-active="channels"] .app > header,
body.app-mobile[data-mobile-active="search"] .app > header,
body.app-mobile[data-mobile-active="schedule"] .mobile-player-host,
body.app-mobile[data-mobile-active="channels"] .mobile-player-host,
body.app-mobile[data-mobile-active="search"] .mobile-player-host {
  flex-shrink: 0;
}

body.app-mobile[data-mobile-active="schedule"] .layout,
body.app-mobile[data-mobile-active="channels"] .layout,
body.app-mobile[data-mobile-active="search"] .layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.app-mobile .app,
body.app-mobile header,
body.app-mobile .mobile-player-host,
body.app-mobile .player-body {
  transition:
    padding 0.22s ease,
    margin 0.22s ease,
    max-height 0.28s ease,
    height 0.28s ease,
    min-height 0.28s ease;
}

body.app-mobile .app {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  padding: 8px 10px calc(72px + env(safe-area-inset-bottom, 0px));
  padding-top: max(8px, env(safe-area-inset-top, 0px));
}

body.app-mobile header {
  margin-bottom: 8px;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

body.app-mobile .logo {
  font-size: 1rem;
  gap: 6px;
  min-width: 0;
  flex-shrink: 1;
}

body.app-mobile .logo__mark {
  width: 30px;
  height: 30px;
}

body.app-mobile .logo__text {
  font-size: 0.98rem;
}

body.app-mobile .livetv-nav-link {
  display: none;
}

body.app-mobile .status {
  font-size: 0.68rem;
  padding: 4px 8px;
  max-width: min(46vw, 180px);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

body.app-mobile .mobile-player-host {
  position: sticky;
  top: max(0px, env(safe-area-inset-top, 0px));
  z-index: 25;
  margin-bottom: 8px;
}

body.app-mobile .player-shell {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  overflow: hidden;
}

body.app-mobile .player-titlebar {
  padding: 5px 10px;
  font-size: 0.74rem;
  gap: 6px;
}

body.app-mobile .player-titlebar__text {
  display: none;
}

body.app-mobile .player-titlebar__btn {
  display: none;
}

body.app-mobile .player-titlebar__icon {
  font-size: 0.85rem;
}

body.app-mobile .player-titlebar__state {
  margin-left: auto;
  font-size: 0.7rem;
  max-width: 48vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact player when browsing other tabs — more room for lists */
body.app-mobile .player-body {
  aspect-ratio: 16 / 9;
  max-height: min(26svh, 168px);
}

/* Play tab: larger, more watchable portrait player */
body.app-mobile[data-mobile-active="play"] .player-body {
  max-height: min(44svh, 300px);
}

/* List tabs: collapse player to a thin status bar so schedule has room */
body.app-mobile:not([data-mobile-active="play"]) .mobile-player-host {
  position: static;
  margin-bottom: 6px;
}

body.app-mobile:not([data-mobile-active="play"]) .player-body,
body.app-mobile:not([data-mobile-active="play"]) .player-progress,
body.app-mobile:not([data-mobile-active="play"]) .player-titlebar__icon {
  display: none !important;
}

body.app-mobile:not([data-mobile-active="play"]) .player-shell {
  box-shadow: none;
  border-radius: 8px;
}

body.app-mobile:not([data-mobile-active="play"]) .player-titlebar {
  padding: 8px 10px;
  min-height: 40px;
}

body.app-mobile:not([data-mobile-active="play"]) .player-titlebar__state {
  max-width: none;
  font-size: 0.78rem;
}

body.app-mobile:not([data-mobile-active="play"]) .app {
  padding-top: max(6px, env(safe-area-inset-top, 0px));
}

body.app-mobile:not([data-mobile-active="play"]) header {
  margin-bottom: 6px;
}

body.app-mobile .tutorial-panel,
body.app-mobile .info--compact {
  display: none !important;
}

body.app-mobile .player-unmute-btn {
  font-size: 0.9rem;
  padding: 12px 16px;
  min-height: 44px;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

body.app-mobile .player-loader__spinner {
  width: 58px;
  height: 58px;
  border-width: 4px;
}

body.app-mobile .player-loader--buffering .player-loader__spinner {
  width: 62px;
  height: 62px;
  border-width: 4px;
}

body.app-mobile .player-overlay__icon {
  width: 48px;
  height: 48px;
  font-size: 1.35rem;
}

body.app-mobile.mobile-landscape .app {
  padding-top: max(4px, env(safe-area-inset-top, 0px));
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
}

body.app-mobile.mobile-landscape header {
  margin-bottom: 4px;
}

body.app-mobile.mobile-landscape .logo {
  font-size: 0.95rem;
}

body.app-mobile.mobile-landscape .status {
  max-width: 38vw;
}

body.app-mobile.mobile-landscape .mobile-player-host {
  margin-bottom: 6px;
}

body.app-mobile.mobile-landscape[data-mobile-active="play"] .player-body {
  aspect-ratio: auto;
  max-height: none;
  width: 100%;
  height: calc(100svh - var(--mobile-chrome, 96px));
  min-height: calc(100svh - var(--mobile-chrome, 96px));
}

body.app-mobile.mobile-landscape:not([data-mobile-active="play"]) .player-body {
  max-height: min(38svh, 200px);
  height: auto;
  min-height: 0;
}

body.app-mobile.mobile-landscape[data-mobile-active="play"] .main-column > .actions,
body.app-mobile.mobile-landscape[data-mobile-active="play"] .main-column > .info--compact,
body.app-mobile.mobile-landscape[data-mobile-active="play"] .main-column > #streamUrlPanel,
body.app-mobile.mobile-landscape[data-mobile-active="play"] .main-column > #diagPanel,
body.app-mobile.mobile-landscape[data-mobile-active="play"] .main-column > #statsPanel {
  display: none !important;
}

body.app-mobile.mobile-landscape[data-mobile-active="play"] .main-column {
  min-height: 0;
  gap: 0;
}

body.app-mobile.mobile-landscape .mobile-bottom-nav {
  padding-top: 4px;
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}

body.app-mobile.mobile-landscape .mobile-bottom-nav__btn {
  min-height: 40px;
  flex-direction: row;
  gap: 5px;
  font-size: 0.68rem;
}

body.app-mobile.mobile-native-fullscreen .mobile-bottom-nav,
body.app-mobile.mobile-native-fullscreen header {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

body.app-mobile.mobile-native-fullscreen .app {
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.app-mobile .app,
  body.app-mobile header,
  body.app-mobile .mobile-player-host,
  body.app-mobile .player-body {
    transition: none;
  }
}

body.app-mobile .player-progress {
  padding: 6px 10px 8px;
}

body.app-mobile .player-progress__text {
  font-size: 0.68rem;
}

body.app-mobile .layout {
  display: block;
  gap: 0;
}

body.app-mobile .sidebar,
body.app-mobile .main-column,
body.app-mobile .channel-rail {
  display: none !important;
  position: static;
  order: unset;
}

body.app-mobile[data-mobile-active="play"] .main-column {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

body.app-mobile[data-mobile-active="play"] .actions {
  margin-top: 2px;
}

body.app-mobile[data-mobile-active="play"] #diagPanel:not(.hidden),
body.app-mobile[data-mobile-active="play"] #statsPanel:not(.hidden),
body.app-mobile[data-mobile-active="play"] #streamUrlPanel:not(.hidden) {
  margin-top: 2px;
}

/* List tabs: fill leftover space inside .app; scroll happens inside the list */
body.app-mobile[data-mobile-active="search"] .sidebar,
body.app-mobile[data-mobile-active="schedule"] .channel-rail,
body.app-mobile[data-mobile-active="channels"] .channel-rail {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}

body.app-mobile[data-mobile-active="schedule"] .panel--channels {
  display: none !important;
}

body.app-mobile[data-mobile-active="channels"] .panel--schedule {
  display: none !important;
}

body.app-mobile[data-mobile-active="schedule"] .panel--schedule,
body.app-mobile[data-mobile-active="channels"] .panel--channels,
body.app-mobile[data-mobile-active="search"] .panel--results {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app-mobile .panel--results {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

body.app-mobile .search-results,
body.app-mobile .schedule-list,
body.app-mobile .channel-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  width: 100%;
}

body.app-mobile .schedule-list {
  padding: 4px 6px 12px;
}

body.app-mobile[data-mobile-active="schedule"] .panel--schedule > :not(.schedule-list),
body.app-mobile[data-mobile-active="channels"] .panel--channels > :not(.channel-list),
body.app-mobile[data-mobile-active="search"] .sidebar > .panel:not(.panel--results) {
  flex-shrink: 0;
}

body.app-mobile .layout,
body.app-mobile .sidebar,
body.app-mobile .main-column,
body.app-mobile .channel-rail,
body.app-mobile .panel--schedule,
body.app-mobile .panel--channels,
body.app-mobile .panel--results {
  min-width: 0;
  max-width: 100%;
}

/* Compact schedule rows: hide venue column so match fits without horizontal swipe */
body.app-mobile .schedule-item,
body.app-mobile .schedule-list-head {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.app-mobile .schedule-item {
  padding: 10px 8px;
  gap: 6px;
  min-height: 52px;
  overflow: hidden;
}

body.app-mobile .schedule-item > .schedule-item__badge,
body.app-mobile .schedule-list-head__badge {
  display: none !important;
}

body.app-mobile .schedule-item__time {
  font-size: 0.64rem;
}

body.app-mobile .schedule-item__clock {
  font-size: 0.64rem;
}

body.app-mobile .schedule-item__match {
  min-width: 0;
  overflow: hidden;
}

body.app-mobile .schedule-fixture {
  gap: 4px;
  width: 100%;
  min-width: 0;
}

body.app-mobile .schedule-fixture__home,
body.app-mobile .schedule-fixture__away {
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

body.app-mobile .schedule-fixture__name {
  font-size: 0.72rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

body.app-mobile .schedule-fixture__center {
  min-width: 34px;
  max-width: 4.2rem;
  flex-shrink: 0;
}

body.app-mobile .schedule-fixture__score {
  font-size: 0.72rem;
  gap: 3px;
}

body.app-mobile .schedule-fixture__logo--crest {
  width: 15px;
  height: 15px;
}

body.app-mobile .schedule-fixture__logo--flag {
  width: 16px;
  height: 11px;
}

body.app-mobile .schedule-fixture__race .schedule-fixture__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.app-mobile .league-picker-scroll {
  max-width: 100%;
  padding: 6px 8px 4px;
}

body.app-mobile .league-picker__btn {
  min-width: 48px;
  padding: 4px 4px 5px;
  gap: 3px;
}

body.app-mobile .league-picker__logo-wrap {
  width: 44px;
  height: 28px;
  padding: 3px 4px;
}

body.app-mobile .league-picker__label {
  font-size: 0.52rem;
}

body.app-mobile .panel-head--schedule {
  gap: 4px;
  padding: 6px 10px 4px;
}

body.app-mobile .panel-head--schedule h3 {
  font-size: 0.88rem;
}

body.app-mobile .panel-head--schedule .panel-head__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 55%;
}

body.app-mobile .panel-head__meta {
  font-size: 0.58rem;
}

body.app-mobile .panel-head__sub {
  font-size: 0.62rem;
}

body.app-mobile .schedule-filter-wrap {
  max-width: 100%;
  min-width: 0;
  padding: 0 8px 4px;
}

body.app-mobile .schedule-filter__btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.72rem;
}

body.app-mobile .schedule-list {
  padding: 4px 6px 12px;
  min-height: 0;
  /* Ensure list gets a usable scroll viewport, not a single row */
  flex: 1 1 auto !important;
}

body.app-mobile .panel--compact {
  padding: 12px 14px;
}

body.app-mobile label {
  font-size: 0.88rem;
  margin-bottom: 8px;
}

body.app-mobile input[type="text"] {
  font-size: 16px;
  padding: 12px 12px;
  min-height: 44px;
}

body.app-mobile .btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 0.9rem;
}

body.app-mobile .input-row--stack .btn {
  width: 100%;
}

body.app-mobile .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.app-mobile .actions .btn {
  width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  padding: 10px 8px;
  font-size: 0.82rem;
}

body.app-mobile .actions #diagBtn {
  grid-column: 1 / -1;
}

body.app-mobile .note {
  font-size: 0.78rem;
  padding: 10px;
}

body.app-mobile .stats-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.app-mobile .stats-grid div {
  padding: 10px;
}

body.app-mobile .stats-grid strong {
  font-size: 1rem;
}

body.app-mobile .panel {
  padding: 12px 14px;
}

body.app-mobile .channel-item {
  padding: 10px;
  min-height: 54px;
  gap: 8px;
}

body.app-mobile .channel-item__name {
  font-size: 0.88rem;
}

body.app-mobile .channel-item__play {
  min-height: 40px;
  min-width: 56px;
  padding: 8px 12px;
}

body.app-mobile .search-item {
  flex-wrap: wrap;
  padding: 10px;
}

body.app-mobile .search-item .btn {
  width: 100%;
  margin-top: 4px;
}

body.app-mobile .search-suggestions {
  max-height: min(240px, 42vh);
}

body.app-mobile .stream-url-field {
  font-size: 0.78rem;
}

body.app-mobile .stream-url-hint {
  font-size: 0.68rem;
}

body.app-mobile .diag-output {
  font-size: 0.72rem;
  max-height: 40vh;
  overflow-y: auto;
}

/* Always pinned to the visual viewport — never only at end of scroll content */
body.app-mobile .mobile-bottom-nav,
.mobile-bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100vw;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin: 0;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 20, 25, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.mobile-bottom-nav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 46px;
  padding: 4px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav__btn:hover,
.mobile-bottom-nav__btn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.mobile-bottom-nav__btn--active {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
}

.mobile-bottom-nav__icon {
  font-size: 1.15rem;
  line-height: 1;
}

.mobile-bottom-nav__btn--live .mobile-bottom-nav__icon {
  color: #f87171;
}

.mobile-desktop-link {
  display: none;
}