/* ==========================================================================
   Football Champion — mobile layer. Loaded LAST. Only affects phones/tablets.
   Goals: every button easy to tap, no sideways scrolling, no iOS input zoom,
          lighter pages on cheap phones.
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, svg, canvas { max-width: 100%; }
a, button, .btn, [onclick] { -webkit-tap-highlight-color: rgba(217,164,65,.25); touch-action: manipulation; }

@media (max-width: 767px) {
  /* Horizontal overflow is already clipped by body in style.css. Do NOT set overflow on both
     html and body, and do NOT set overscroll-behavior on body: together they trap touch swipes
     and stop the page from scrolling on phones. */
  html { overflow-x: hidden; }

  /* iOS zooms the page when an input is smaller than 16px */
  input, select, textarea { font-size: 16px !important; min-height: 46px; }

  /* Comfortable tap targets */
  .btn, button.btn, a.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .footer-links a, .fc-bottomnav a { min-height: 44px; }
  .footer-links { gap: 4px 14px; justify-content: center; }
  .option-btn { min-height: 56px; padding: 14px 16px; font-size: 1rem; }

  /* Popups (login / sign up): always above the top bar, scrollable, never cut off */
  .modal-overlay { z-index: 100010 !important; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch;
                   padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .modal-box { margin: auto; max-height: none; overflow: visible; padding: 22px 18px; }
  .modal-close { width: 40px; height: 40px; z-index: 2; }
  .modal-box .btn-block { min-height: 50px; }
  .modal-box::before { pointer-events: none; }

  /* Layout */
  .container { padding-left: 14px; padding-right: 14px; }
  .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  section { padding-top: 32px; padding-bottom: 20px; }
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; }
  h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .ticket-card { padding: 22px 18px; }
  .price-amount { font-size: clamp(2rem, 11vw, 2.8rem); }

  /* Leaderboard: fits the screen, no sideways scroll */
  .table-wrap { overflow-x: visible; }
  .table-wrap table { min-width: 0 !important; width: 100%; table-layout: auto; }
  .lb-table th, .lb-table td { padding: 10px 6px; }
  .lb-table td:nth-child(2) { word-break: break-word; }
  .lb-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .lb-tabs::-webkit-scrollbar { display: none; }
  .lb-tabs .btn { flex: 0 0 auto; width: auto !important; padding: 10px 14px; font-size: .8rem; white-space: nowrap; }
  .pagination { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .page-btn { min-width: 42px; min-height: 42px; }
  .page-info { width: 100%; text-align: center; }

  /* Other tables (profile, admin) scroll inside their own box instead of the page */
  .admin-table-container, .table-wrap.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Floating buttons must never sit on top of content or each other */
  .fc-help { left: 12px; }
  #fc-top { right: 12px; }

  /* Lighter: no decorative motion on phones */
  .particle-container, .confetti-piece { display: none !important; }
  .slide { transition-duration: .8s; }
}

@media (max-width: 380px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .btn { font-size: .85rem; padding-left: 12px; padding-right: 12px; }
}

/* Landscape phones: keep popups reachable */
@media (max-height: 480px) and (orientation: landscape) {
  .modal-overlay { align-items: flex-start; }
}

/* Landing header on phones: logo + two buttons + menu must not touch */
@media (max-width: 480px) {
  .nav-landing .brand img { width: 84px !important; max-width: 26vw !important; }
  .nav-landing .btn { padding: 8px 10px !important; font-size: .74rem !important; min-height: 40px !important; letter-spacing: .03em; }
  .nav-landing > div:last-child { gap: 6px !important; }
}

/* ==========================================================================
   Phones: tidy landing menu + footer in 3 neat rows
   ========================================================================== */
@media (max-width: 767px) {
  /* Menu: one full-width, evenly spaced list */
  .navlinks.open { align-items: stretch !important; gap: 6px !important; padding: 10px !important; }
  .navlinks > a { justify-content: space-between !important; width: 100% !important; min-height: 50px !important; padding: 12px 16px !important;
                  font-size: 1rem !important; font-weight: 600 !important; text-align: start !important;
                  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; }
  .navlinks > a::after { content: "›" !important; display: block !important; position: static !important; inset: auto !important;
                         width: auto !important; height: auto !important; background: none !important; opacity: .5; font-size: 1.3rem; line-height: 1; }
  [dir="rtl"] .navlinks > a::after { content: "‹" !important; }
  .navlinks .nav-lang-mobile { width: 100%; }
  .navlinks .nav-lang-mobile .fc-lang { width: 100%; }
  .navlinks .nav-lang-mobile .fc-lang a { flex: 1 1 0; }

  /* Footer: 2 columns x 3 rows */
  footer .footer-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 10px !important; max-width: 420px; margin: 12px auto 0; }
  footer .footer-links a { display: flex !important; align-items: center; justify-content: center; text-align: center; min-height: 44px;
                           padding: 8px 6px !important; font-size: .82rem !important; line-height: 1.25;
                           background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
  footer .footer-links a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Footer credit */
.powered-by { margin-top: 6px; text-align: center; font-size: .78rem; color: var(--chalk-dim, #9fb3a8); letter-spacing: .02em; }
.powered-by strong { color: var(--gold-bright, #F0C05C); font-weight: 700; }

/* Google sign-in: sits inside the form like our own fields instead of floating alone */
.g-btn-wrap { display: block !important; width: 100%; min-height: 0 !important; margin: 4px 0 6px !important; padding: 0; }
.g-btn-wrap > div { width: 100%; display: flex; justify-content: center; }
.g-btn-wrap iframe { border-radius: 6px !important; max-width: 100%; }
.or-divider { margin: 8px 0 10px !important; }