/* ============================================================
   JoyTV — Mobile environment
   A dedicated phone/small-tablet experience layered on top of
   styles.css. Adds: safe-area handling, no-zoom inputs, a clean
   two-row top bar, a fixed app-style bottom tab bar, a wrapping
   player control bar, and bigger touch targets.
   Everything here is scoped so the desktop layout is untouched.
   ============================================================ */

/* Bottom tab bar is mobile-only — hidden on every larger screen. */
.mobile-tabbar { display: none; }

@media (max-width: 768px) {
  :root {
    /* two-row bar height + notch inset — keeps scrollIntoView offsets honest */
    --topbar-h: calc(116px + env(safe-area-inset-top));
    --tabbar-h: 60px;
  }

  /* ---------- Safe areas (notch / home indicator) ---------- */
  .topbar { padding-top: env(safe-area-inset-top); }

  /* ---------- Top bar: brand + actions on row 1, full-width search on row 2 ---------- */
  .topbar-inner {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    padding: 10px 14px;
  }
  .menu-btn { display: none; }            /* the Filters tab opens the drawer instead */
  #favNavBtn { display: none; }           /* Favorites lives in the bottom tab bar */
  .topbar-actions { margin-left: auto; gap: 6px; }
  .search {
    order: 5;
    flex: 1 0 100%;
    max-width: none;
    margin: 0;
  }

  /* visitor counter: compact (icons + numbers only) so it fits row 1 */
  .visitor-stats { gap: 5px; }
  .visitor-stats .vis-lbl { display: none; }
  .vis { height: 30px; padding: 0 8px; gap: 5px; font-size: 12px; border-radius: 9px; }

  /* ---------- No iOS zoom-on-focus: form fields must be >= 16px ---------- */
  .search input { height: 46px; font-size: 16px; }
  select,
  .sort-wrap select,
  .share-link input,
  #shareUrl { font-size: 16px; }

  /* ---------- Stop horizontal overflow ----------
     Grid/flex children default to min-width:auto and refuse to shrink below
     their content, which pushes the page wider than the screen (then
     overflow-x:hidden clips the right edge). Let them shrink, and let wide
     rows wrap. */
  .hero, .hero-content, .fifa-banner, .fifa-banner-left, .fifa-banner-text { min-width: 0; }
  .hero-stats { flex-wrap: wrap; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-primary, .hero-cta .btn-soft { width: 100%; justify-content: center; }

  /* ---------- Hero: tighter so content is reachable sooner ---------- */
  .hero { padding: 24px 18px; margin-bottom: 18px; }
  .hero-title { margin: 10px 0; }
  .hero-sub { margin-bottom: 16px; }
  .hero-stats { gap: 14px 22px; margin-bottom: 18px; }

  /* ---------- Bigger touch targets ---------- */
  .cat-chip { padding: 9px 14px; font-size: 13.5px; }
  .qn { padding: 12px; }

  /* ---------- Player controls: wrap (never clip "Close") ---------- */
  .player-bar {
    flex-wrap: wrap;
    overflow: visible;
    gap: 9px;
    margin: 0;
    padding: 12px 14px 0;
  }
  .player-bar .pb-btn {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    justify-content: center;
  }
  .player-bar .pb-close {
    order: 10;
    flex: 1 0 100%;             /* Close gets its own full-width row — always reachable */
    margin-left: 0;
    color: #ff9aa8;
    background: rgba(251,113,133,.1);
    border-color: rgba(251,113,133,.4);
  }
  .player-section { scroll-margin-top: var(--topbar-h); }

  /* ---------- Keep page content clear of the bottom tab bar ---------- */
  .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }
  .sidebar-scroll {
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  }
  .toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
  .consent {
    left: 10px; right: 10px;
    width: auto;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  }

  /* ---------- Bottom tab bar (the mobile app shell) ---------- */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(180deg, rgba(11,10,26,.86), rgba(11,10,26,.97));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--line);
  }
  html[data-theme="light"] .mobile-tabbar {
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.97));
  }
  .mtab {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 2px 7px;
    color: var(--text-mut);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .2px;
    transition: color .15s var(--ease), transform .12s var(--ease);
  }
  .mtab .ic { width: 22px; height: 22px; transition: color .15s var(--ease); }
  .mtab span:last-child {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mtab:active { transform: scale(.93); }
  .mtab.active { color: var(--text); }
  .mtab.active .ic { color: var(--brand); }
  .mtab.active::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--accent-grad);
  }
  .mtab-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 19px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--brand-2);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--bg-2);
  }
  .mtab-badge[hidden] { display: none; }

  /* Immersive theater mode hides the shell */
  body.theater .mobile-tabbar { display: none; }

  /* ---------- Boot splash: fit small screens, respect safe areas ---------- */
  .boot-inner { gap: 15px; padding: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .boot-glow { width: 460px; height: 460px; }
  .boot-mark { width: 90px; height: 90px; }
  .logo-boot { width: 76px; height: 76px; }
  .boot-logo span { font-size: 38px; }
  .boot-tagline { font-size: 11px; letter-spacing: 1.8px; }
  .boot p { font-size: 13px; }
}