/* ═══════════════════════════════════════════════════════════════
   KICKBOWL ULTRA — Complete Mobile-First CSS
   Upload: /public/css/mobile.css
═══════════════════════════════════════════════════════════════ */

/* ── BASE MOBILE FIXES ─────────────────────────────────────── */
/* IMPORTANT: overflow-x:hidden without overflow-y forces overflow-y:auto
   per CSS spec. We must give html/body a height so that overflow-y:auto
   has something to scroll — otherwise NOTHING scrolls (PC or mobile). */
html, body {
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-text-size-adjust: 100%;
  max-width: 100vw;
}

* { box-sizing: border-box; }

img, video, iframe { max-width: 100%; }

/* ── VIEWPORT FIX ──────────────────────────────────────────── */
:root {
  --bottom-nav-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE ONLY (max 900px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* BODY */
  body {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 4px) !important;
    font-size: 14px;
  }

  /* NAV TOP */
  nav, #kb-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    height: 48px !important;
  }

  .nav-inner {
    padding: 0 10px !important;
    height: 48px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .nav-mark { width: 28px !important; height: 28px !important; }
  .nav-name { font-size: 12px !important; letter-spacing: .04em !important; }
  .nav-tag  { display: none !important; }

  /* Hide desktop nav links — bottom nav handles it */
  .nav-link:not(.nav-back),
  .nav-links-desktop,
  .hide-mob { display: none !important; }

  /* XP pill — very compact */
  .xp-pill { font-size: 10px !important; padding: 3px 8px !important; }

  /* LIVE dot */
  .live-dot { width: 6px !important; height: 6px !important; }

  /* SYNC button */
  .sync-btn { padding: 6px 10px !important; font-size: 11px !important; }
  #sync-lbl { display: none !important; }

  /* Google auth button */
  .kb-login-btn { padding: 4px 8px !important; font-size: 11px !important; }
  .kb-login-btn img { width: 14px !important; height: 14px !important; }

  /* LIVE SCORE BANNER */
  .live-score-banner {
    position: sticky !important;
    top: 48px !important;
    z-index: 99 !important;
  }
  .lsb-badge { padding: 0 8px !important; font-size: 9px !important; }
  .lsb-team { font-size: 10px !important; }
  .lsb-score { font-size: 12px !important; padding: 1px 6px !important; }
  body.has-live-banner { padding-top: 0 !important; }
  body.has-live-banner #kb-nav { top: 0 !important; }

  /* BOTTOM NAV */
  .bottom-nav {
    height: calc(var(--bottom-nav-h) + var(--safe-b)) !important;
    padding-bottom: var(--safe-b) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5) !important;
  }

  .bottom-nav-inner {
    height: var(--bottom-nav-h) !important;
    padding: 0 2px !important;
  }

  .bn-item {
    padding: 6px 4px !important;
    min-width: 0 !important;
    flex: 1 !important;
    font-size: 9px !important;
    gap: 2px !important;
    letter-spacing: 0 !important;
  }

  .bn-icon { font-size: 20px !important; }

  .bn-item.special {
    padding: 8px 10px !important;
    transform: translateY(-8px) !important;
    border-radius: 12px !important;
    min-width: 60px !important;
    max-width: 70px !important;
  }

  /* MAIN CONTENT GRID → single column */
  .main-grid,
  .content-grid,
  [class*="grid-2"],
  [class*="grid2"],
  .grid2, .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Container padding */
  .container {
    padding: 12px 10px calc(var(--bottom-nav-h) + var(--safe-b) + 16px) !important;
  }

  /* CARDS */
  .card, .a-card, .match-card {
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  /* HERO SECTION */
  #hero-feat {
    min-height: 200px !important;
    border-radius: 10px !important;
  }

  #hero-hl {
    font-size: clamp(18px, 4.5vw, 26px) !important;
  }

  /* NEWS CARDS */
  .kb-card { border-radius: 8px !important; }

  /* TABS — horizontal scroll */
  .tabs, .page-tabs, .tab-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 3px !important;
    padding: 3px !important;
  }
  .tabs::-webkit-scrollbar,
  .page-tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar { display: none !important; }

  .tab, .ptab, .tab-btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* FLOATING BUTTONS — proper stacking left side */
  .kb-visitor-widget {
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 8px) !important;
    left: 8px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }

  .kb-vc-num  { font-size: 11px !important; }
  .kb-vc-stat { gap: 1px !important; }
  .kb-vc-label{ font-size: 8px !important; }
  .kb-vc-divider { width: 1px !important; height: 20px !important; }

  /* MUSIC FAB — left side above visitor */
  .kb-mp-fab {
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 54px) !important;
    left: 8px !important;
    max-width: 140px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .kb-mp-fab-label { font-size: 9px !important; max-width: 80px !important; }

  /* MUSIC PLAYER CARD — left aligned */
  .kb-mp {
    left: 8px !important;
    right: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: 280px !important;
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 88px) !important;
  }

  /* LANGUAGE SWITCHER — right side */
  #kb-lang-sw {
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 8px) !important;
    right: 60px !important;
    width: 36px !important;
    height: 36px !important;
  }

  #kb-lang-menu {
    right: 8px !important;
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 50px) !important;
    max-height: 60vh !important;
  }

  /* FOOTBALL FAB (AI chat) */
  .ai-fab {
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 8px) !important;
    right: 8px !important;
    width: 46px !important;
    height: 46px !important;
  }

  /* AI PANEL */
  .ai-panel {
    left: 6px !important;
    right: 6px !important;
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 60px) !important;
    max-height: 70vh !important;
    max-width: none !important;
    width: auto !important;
  }

  /* SETTINGS BUTTON */
  .kb-settings-btn {
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 58px) !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .kb-settings {
    right: 6px !important;
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 96px) !important;
    width: calc(100vw - 12px) !important;
    max-width: 290px !important;
  }

  /* LEADERBOARD BUTTON */
  .kb-leaderboard-btn {
    right: 8px !important;
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 96px) !important;
  }

  /* SCORE PILL */
  .kb-score-pill {
    top: 54px !important;
    right: 8px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* GOALPOST */
  .goalpost {
    top: 54px !important;
    width: 160px !important;
    height: 100px !important;
  }

  /* BACK BUTTON */
  .kb-back-btn, .nav-back {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* WC BANNER */
  .wc-banner { padding: 24px 12px !important; }
  .wc-banner h1 { font-size: clamp(22px, 5vw, 32px) !important; }
  .countdown { gap: 8px !important; }
  .cd-box { padding: 8px 10px !important; min-width: 56px !important; }
  .cd-num { font-size: 22px !important; }

  /* FAN ZONE HERO */
  .fan-hero { padding: 24px 12px !important; }
  .fan-hero h1 { font-size: clamp(24px, 6vw, 36px) !important; }

  /* MATCH CARDS */
  .mc-flag { font-size: 24px !important; }
  .mc-name { font-size: 11px !important; }
  .mc-score { font-size: 22px !important; }

  /* ARTICLE PAGE */
  .article-body { padding: 16px 12px !important; }
  h1 { font-size: clamp(18px, 4.5vw, 28px) !important; }

  /* TABLE OVERFLOW */
  .table-wrap, table { overflow-x: auto !important; display: block !important; }

  /* POLL POPUP */
  .kb-poll-overlay { padding: 10px 8px !important; align-items: flex-end !important; }
  .kb-poll-card { border-radius: 16px 16px 0 0 !important; }

  /* HEADINGS */
  .card-title { font-size: 11px !important; }

  /* GRID 3 → 2 on small mobile */
  .grid3, .grid-3, [class*="grid-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* HYPE TEAMS GRID */
  .hype-teams-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  .hype-team { padding: 8px 4px !important; }
  .hype-team-flag { font-size: 22px !important; }
  .hype-team-name { font-size: 9px !important; }

  /* PWA BANNER */
  #kb-pwa-banner {
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 10px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* USER MENU (Google login dropdown) */
  .kb-user-menu {
    right: 6px !important;
    top: 52px !important;
    min-width: 200px !important;
  }

  /* XP toast */
  .xp-toast { right: 10px !important; font-size: 12px !important; }

  /* GOAL TEXT */
  .goal-text { font-size: clamp(50px, 12vw, 90px) !important; }
}

/* ── VERY SMALL PHONES (< 380px) ──────────────────────────── */
@media (max-width: 380px) {
  .bn-item { font-size: 8px !important; padding: 5px 2px !important; }
  .bn-icon  { font-size: 18px !important; }
  .nav-name { display: none !important; }
  .xp-pill  { display: none !important; }
  .kb-vc-stat:last-child { display: none !important; }
  .kb-vc-divider:last-of-type { display: none !important; }
  .hype-teams-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── LANDSCAPE MOBILE ─────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
  .ai-fab       { bottom: 12px !important; }
  .kb-mp-fab    { bottom: 12px !important; }
  #kb-lang-sw   { bottom: 12px !important; }
  .kb-visitor-widget { bottom: 10px !important; }
}

/* ── PWA STANDALONE ───────────────────────────────────────── */
@media (display-mode: standalone) {
  nav, #kb-nav { padding-top: env(safe-area-inset-top) !important; }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom) !important; }
}

/* ── TOUCH IMPROVEMENTS ───────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  button, a, [role="button"] { min-height: 38px; }
  .bn-item { min-height: 44px !important; }
  .kb-poll-opt { min-height: 44px !important; }
  .tab, .ptab { min-height: 38px !important; }
  /* Remove hover effects */
  .match-tile:hover,
  .hl-card:hover,
  .watch-link:hover { background: initial !important; transform: none !important; }
  /* Active feedback instead */
  button:active, a:active { opacity: 0.75; }
}