/* =========================================================
   Gamers Escape — mobile / responsive layer
   Loaded LAST on every page so it wins the cascade.
   ========================================================= */

/* ---------- Universal safety ----------
   DO NOT put `overflow-x` on html/body here. Both values cause real bugs:
     `hidden` -> makes them scroll containers, which silently disables every
                 `position:sticky` descendant (sticky menu bar + headings).
     `clip`   -> leaves sticky working but makes the document unscrollable
                 via window.scrollTo(), breaking the category jump buttons.
   The horizontal overflow that this guard used to paper over has been fixed
   at source (see the grid `min-width:0` rules and the menu-board columns),
   and every page is verified overflow-free at 360 / 390 / 414px. */
html, body { max-width: 100%; }
img, video, iframe, canvas { max-width: 100%; }
* { -webkit-tap-highlight-color: rgba(255,45,155,.18); }

/* iOS notch / home-indicator safe areas */
@supports (padding: max(0px)) {
  footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .cards, .cal-wrap, .gem-grid, .menu-grid { grid-template-columns: 1fr; }
  .about-imgs { grid-template-columns: 1fr 1fr; }
  /* grid/flex children default to min-content width — let them shrink */
  .cards > *, .cal-wrap > *, .gem-grid > *, .menu-grid > *,
  .hero-cta > *, .stats > *, .gb-row > *, .mitem > * { min-width: 0; }
}

/* =========================================================
   PHONES  (<= 640px)
   ========================================================= */
@media (max-width: 640px) {

  /* --- Rhythm: reclaim horizontal space --- */
  .wrap { padding-left: 14px; padding-right: 14px; }
  section, .sec { padding-top: 52px; padding-bottom: 52px; }
  .gem, .card, .cal, .gemboard, .jukebox, .controls-inner { padding: 18px; }

  /* --- Gradient headings: render as SOLID colour on phones ---------------
     `-webkit-background-clip:text` is unreliable on iOS Safari (especially on
     inline elements with an animated background-position, and in Low Power
     Mode). When it fails the text goes transparent and you see a bare
     gradient rectangle instead of the words — e.g. "Fan favourites" and even
     "ESCAPE" in the hero. Dropping the clip entirely guarantees the text is
     always visible, and removes a constant repaint that costs battery. */
  .grad-text {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #FF5BB4 !important;
    color: #FF5BB4 !important;
    animation: none !important;
  }

  /* --- Typography --- */
  h1, .display { line-height: 1.05; }
  h2 { font-size: clamp(24px, 7vw, 32px); line-height: 1.1; }
  h3 { font-size: 18px; }
  p, li { font-size: 15px; line-height: 1.55; }
  .eyebrow { font-size: 11px; letter-spacing: .18em; }

  /* --- Buttons: thumb-friendly --- */
  .btn {
    min-height: 48px;
    padding: 13px 18px;
    font-size: 15px;
    justify-content: center;
  }
  .btn svg { width: 18px; height: 18px; flex: 0 0 18px; }

  /* --- Header / nav --- */
  header .nav { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .brand { flex: 0 0 auto; }
  .logo-badge { height: 34px; width: auto; }
  /* compact header buttons so nothing spills off-screen (menu.html) */
  .nav .btn {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .nav .btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
  .burger, .iconbtn { min-width: 44px; min-height: 44px; }

  /* --- Hero --- */
  .hero { padding-top: 104px; padding-bottom: 52px; }
  .hero h1 { font-size: clamp(38px, 11vw, 54px); }
  .hero .sub { font-size: 15px; }
  .hero .tagline { font-size: 15px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero-cta .btn { width: 100%; }
  .stats { flex-wrap: wrap; gap: 14px 20px; }

  /* --- Cards / pricing --- */
  .card { padding: 20px; }
  .card h3 { font-size: 19px; }
  .price { font-size: 30px; }
  .card li { font-size: 14px; }

  /* --- Calendar --- */
  .cal-head h3 { font-size: 17px; }
  .cal-nav button { min-width: 42px; min-height: 42px; }
  .cal-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-cell { min-height: 42px; width: auto; min-width: 0; font-size: 14px; }
  .cal-dow { font-size: 10px; }
  .ev { gap: 12px; padding: 14px; }
  .ev-body h4 { font-size: 15px; }
  .ev-body p { font-size: 13.5px; }

  /* --- GEM leaderboard --- */
  .gemboard-head { flex-wrap: wrap; gap: 8px; }
  .gb-tab { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .gb-list { max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .gb-row { padding: 10px 12px; gap: 10px; }
  .gb-rank { flex: 0 0 28px; font-size: 15px; }
  .gb-name { font-size: 14.5px; }
  .gb-sub { font-size: 11.5px; }
  .gb-elo { font-size: 14.5px; white-space: nowrap; }
  .tiers { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tier { padding: 14px 10px; }
  .tier h4 { font-size: 13px; }
  .tier p { font-size: 11.5px; }

  /* --- Menu tabs: swipe instead of wrap --- */
  .menu-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
    margin-bottom: 4px;
  }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { flex: 0 0 auto; min-height: 42px; padding: 10px 16px; font-size: 14px; }
  /* active tab is white on pink — bump weight so it reads cleanly */
  .menu-tab.active { font-weight: 700; }

  /* --- Search: 16px stops iOS auto-zoom --- */
  input, select, textarea { font-size: 16px !important; }
  .search input { min-height: 48px; }

  /* --- Menu items --- */
  .menu-grid { gap: 10px; }
  .mitem { padding: 10px; gap: 10px; align-items: center; }
  .mthumb, .mitem .mthumb { width: 66px; height: 66px; flex: 0 0 66px; border-radius: 12px; }
  .mn, .mitem .mn { font-size: 15px; line-height: 1.25; }
  .md, .mitem .md {
    font-size: 12.5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mp, .mitem .mp { font-size: 15px; white-space: nowrap; }
  .menu-subhead { font-size: 17px; }
  .mhero h1 { font-size: clamp(32px, 10vw, 46px); }

  /* --- Product popup (menu.html) --- */
  .gm-modal { padding: 12px; align-items: flex-end; }
  .gm-card { width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 14px 14px; }
  .gm-img { aspect-ratio: 16/11; }

  /* --- Jukebox --- */
  .jukebox { grid-template-columns: 1fr; }
  .jukebox iframe { height: 352px; width: 100%; }

  /* --- Backbar / footer --- */
  .backbar { padding: 0 14px 28px; }
  .backbar .btn { width: 100%; }
  footer { padding: 32px 0; text-align: center; }
  footer a { display: inline-block; padding: 8px 4px; }

  /* --- Shared brand.css pages (bingo / imposter / predictions / board) --- */
  .ge-chip { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .orb { display: none; }

  /* --- In-store menu board: 3 columns are unreadable on a phone --- */
  .stage { padding: 20px 16px; }
  .page { columns: 1; column-gap: 0; }
  .cat h2 { font-size: 19px; }
  .item .n { font-size: 15px; }
  .item .p { font-size: 15px; }
}

/* =========================================================
   SMALL PHONES  (<= 400px)
   ========================================================= */
@media (max-width: 400px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .gem, .card, .cal, .gemboard, .jukebox, .controls-inner { padding: 14px; }
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 38px; font-size: 13px; }
  /* logo-only header ONLY where action buttons compete for space (menu.html);
     the homepage keeps its wordmark since it only has a burger */
  .nav:has(.btn) .brand { font-size: 0; gap: 0; }
  .nav .btn { padding: 9px 10px; font-size: 12.5px; }
  .hero h1 { font-size: 36px; }
  .mthumb, .mitem .mthumb { width: 58px; height: 58px; flex: 0 0 58px; }
  .md, .mitem .md { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Landscape phones: trim vertical padding ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: 84px; padding-bottom: 40px; min-height: 0; }
  section, .sec { padding-top: 40px; padding-bottom: 40px; }
}