/* ============================================================
   MOBILE LAYER — additive overrides only.
   Loaded after the inline desktop styles in index.html.
   Everything is gated behind @media (max-width: 700px) (the
   breakpoint the desktop sheet already uses to drop the sidebar),
   so desktop rendering (>700px) is untouched by this file.
   ============================================================ */

/* Mobile nav elements exist in the DOM only on mobile (mobile-nav.js),
   but hide them at desktop widths regardless, before the media query
   below turns them on. */
.tmnav, .tmdrawer { display: none; }

@media (max-width: 700px) {

  :root { --topbar-h: 64px; }

  /* Phones use overlay scrollbars; the themed desktop gutter steals
     8px of layout width here, so drop it on mobile only. */
  html { scrollbar-width: none; }
  ::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

  /* ---------------- topbar ---------------- */
  .wi-top { left: 0 !important; padding: 0 12px !important; gap: 10px !important; box-sizing: border-box !important; max-width: 100vw !important; }
  .wi-tabs, .wi-tickets, .wi-icon-circle { display: none !important; }
  /* Same full logo, but the padding-trimmed cut — the original PNG's large
     transparent margins made it render tiny at topbar size on phones */
  .wi-top-logo img { content: url('/assets/trap-logo-tight.png'); height: 30px; width: auto; }
  .wi-top-back { height: 40px; padding: 0 11px; }
  .wi-top-back span { display: none; }
  .wi-top-right { gap: 8px !important; min-width: 0; }
  .wi-bal-pill { height: 40px; padding: 0 10px; min-width: 0; }
  .wi-bal-pill .amt { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wi-deposit { height: 40px !important; padding: 0 14px !important; }
  /* Avatar (top-right "person" glyph): a <button> carries a default 1px 6px
     padding; force it flush + flex-centered so the glyph (or a profile photo)
     sits dead-centre in the circle, and crop any photo to the circle. */
  .wi-avatar {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important;        /* never let flex compress the WIDTH below the locked 40px height → no oval */
    flex: 0 0 40px !important;         /* grow:0 shrink:0 basis:40px — stays a perfect square in the topbar flex row */
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;     /* restate the circle here too */
    padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden;
  }
  .wi-avatar svg { display: block; margin: 0; }
  .wi-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; display: block; }

  /* ---------------- app shell ---------------- */
  .wi-sidebar { display: none !important; }
  .wi-main {
    margin-left: 0 !important;
    padding: calc(var(--topbar-h) + 10px) 12px calc(86px + env(safe-area-inset-bottom)) !important;
  }
  #trap-page-wrap { left: 0 !important; padding-bottom: 72px !important; }

  /* ---------------- featured carousel ----------------
     mobile-nav-free swipe carousel: one full-width banner per slide
     (slides are rebuilt 1-per-page by trap-whale.js on mobile),
     arrows replaced by dots. */
  .wi-feat-page { grid-template-columns: 1fr !important; }
  .wi-feat-arrow { display: none !important; }
  .wi-feat-track { touch-action: pan-y; }
  /* The "Opening week only" pill reads huge on a phone-width banner — drop it */
  .wi-feat-badge { display: none !important; }
  .wi-feat-dots { display: flex; justify-content: center; align-items: center; margin-top: 6px; }
  .wi-feat-dots button {
    width: 28px; height: 28px; background: transparent; border: 0; padding: 0;
    display: grid; place-items: center; cursor: pointer;
  }
  .wi-feat-dots button i {
    width: 7px; height: 7px; border-radius: 99px;
    background: rgba(255,255,255,.25); transition: width .2s, background .2s;
  }
  .wi-feat-dots button.on i { width: 18px; background: var(--sage); }

  /* ---------------- game tile rows → swipeable strips ---------------- */
  .wi-row-grid {
    display: flex !important; overflow-x: auto !important; gap: 10px !important;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .wi-row-grid::-webkit-scrollbar { display: none; }
  .wi-row-grid > * { flex: 0 0 126px; min-width: 126px; scroll-snap-align: start; }

  /* ---------------- takeover pages ---------------- */
  .trap-page-inner { padding: 18px 14px 56px !important; }
  #game-content img { max-width: 100%; height: auto; }
  /* VIP tier table is ~1040px wide — let it swipe sideways inside the page */
  .tvip-tbl { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  /* Weekly race: stack the two-column grid; the standings table swipes */
  .race-grid { display: block !important; }
  .race-table { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .race-side { width: 100% !important; max-width: 100% !important; margin-top: 14px; box-sizing: border-box; }
  /* Affiliate hero art + claim card. Desktop bleeds the banner to width:148%
     with negative margins (an intentional desktop overflow); on a phone that
     makes it oversized and shifted. Show it at its NATURAL rectangle size,
     centered, fitting the column (!important to beat the page's injected
     desktop rule). */
  .taff-art img {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .taff-pick { padding: 22px 16px 20px; }

  /* Affiliate "How to get started" art (aff-commission.webp) is a WIDE rectangle
     (1200x509) but the box pins min-height:330px with an absolute object-fit:cover
     image — on a phone that reads as a tall ~square with empty gradient above/
     below ("two images tall"). Drop the min-height and let the box shrink to the
     single image at its natural aspect ratio. */
  .taff-how-img { min-height: 0 !important; }
  .taff-how-art {
    position: static !important;
    width: 100% !important; height: auto !important;
    object-fit: contain !important;
  }

  /* Affiliate tabs (Overview / Referred Users / Campaigns / Earnings): the
     inline-flex+wrap left-packed them into an uneven 2-row block. Make a clean,
     balanced 2x2 grid of equal-width tabs. */
  .taff-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .taff-tab { padding: 11px 8px !important; text-align: center !important; }

  /* Affiliate "Claim your code" box: when the row stacks to a column on a phone,
     `.taff-pick-pre`'s `flex:1` resets its flex-basis to 0, which overrides its
     height:52px and collapses the trap.com/r/ box to ~19px (microscopic). A
     min-height (flex-basis can't override it) restores the full 52px box; the
     Claim button stretches full-width below it. */
  .taff-pick-pre { min-height: 52px !important; flex: 0 0 auto !important; width: 100% !important; }
  .taff-pick-go { width: 100% !important; }

  /* "View all" catalog (Originals etc.): the tools row is a 3-col grid
     (search + two .cat-select dropdowns, each min-width:180px). On a phone the
     two selects alone exceed the width, so the WHOLE catalog page scrolled
     sideways and the grid's right edge got cut off. Stack the tools into one
     column and let the selects shrink, so nothing overflows horizontally. */
  .cat-tools { grid-template-columns: 1fr !important; }
  .cat-select { min-width: 0 !important; }

  /* ---------------- topbar popovers → full-width sheets ---------------- */
  .wi-crypto-pop, .wi-account-pop, .trap-w-pop {
    position: fixed !important;
    left: 10px !important; right: 10px !important;
    top: calc(var(--topbar-h) + 8px) !important;
    width: auto !important; max-width: none !important;
    max-height: calc(100vh - var(--topbar-h) - 90px) !important;
    overflow-y: auto !important;
  }
  /* VIP / rewards slide-in drawer takes the full width */
  .tvp-overlay > div { width: 100vw !important; max-width: 100vw !important; }

  /* ---------------- game shell ---------------- */
  .trap-shell .tg-right { min-height: 300px !important; }
  /* Crash pins a desktop card footprint (body 640-860px, stage ≥580px) with
     !important — on a phone that pushes Place Bet under the bottom bar and
     clips the centre multiplier. Relax it to natural flow + a 260px stage. */
  .trap-shell[data-game="crash"] { min-height: 0 !important; padding: 10px 10px 18px !important; }
  .trap-shell[data-game="crash"] .tg-body {
    height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  .trap-shell[data-game="crash"] .tg-right { min-height: 0 !important; }
  .trap-shell[data-game="crash"] .crash-stage { min-height: 0 !important; height: 260px !important; }
  .trap-shell[data-game="crash"] .tg-left { max-width: none !important; }
  .trap-shell[data-game="crash"] .crash-mult .big { font-size: 44px; }

  /* ---------------- bottom navigation bar ---------------- */
  .tmnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: rgba(6, 10, 17, .96);
    border-top: 1px solid rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .tmnav button {
    flex: 1 1 0; min-width: 44px; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #8b93a1; font: 600 10.5px/1 Inter, system-ui, sans-serif;
  }
  .tmnav button svg { width: 21px; height: 21px; }
  .tmnav button:active, .tmnav button.on { color: var(--sage); }

  /* ---------------- slide-in drawer ---------------- */
  .tmdrawer { display: block; position: fixed; inset: 0; z-index: 2000; visibility: hidden; }
  .tmdrawer.open { visibility: visible; }
  .tmdrawer .tmd-scrim {
    position: absolute; inset: 0; background: rgba(0,0,0,.55);
    opacity: 0; transition: opacity .2s;
  }
  .tmdrawer.open .tmd-scrim { opacity: 1; }
  .tmdrawer .tmd-panel {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(82vw, 320px); box-sizing: border-box;
    background: #0a0f18; border-right: 1px solid rgba(255,255,255,.06);
    transform: translateX(-100%); transition: transform .22s ease-out;
    overflow-y: auto;
    padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
  }
  .tmdrawer.open .tmd-panel { transform: none; }
  .tmdrawer .tmd-head {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: 0 4px 6px;
  }
  .tmdrawer .tmd-head img { content: url('/assets/trap-logo-tight.png'); height: 26px; width: auto; }
  .tmdrawer .tmd-close {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: 0; color: #8b93a1; cursor: pointer;
  }
  .tmdrawer .tmd-close svg { width: 20px; height: 20px; }
  .tmdrawer .tmd-sec {
    font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .12em;
    text-transform: uppercase; color: #5b6472; margin: 14px 10px 6px;
  }
  .tmdrawer .tmd-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 48px; padding: 0 10px; box-sizing: border-box;
    background: none; border: 0; border-radius: 10px; cursor: pointer;
    color: #cfd4dc; font: 600 14px/1 Inter, system-ui, sans-serif; text-align: left;
  }
  .tmdrawer .tmd-item:active { background: rgba(255,255,255,.06); }
  .tmdrawer .tmd-item svg { width: 20px; height: 20px; color: #7e8794; flex-shrink: 0; }
}

/* Very narrow phones: tighten the topbar further so the balance pill,
   wallet button and avatar always fit. */
@media (max-width: 430px) {
  .wi-top { gap: 6px !important; padding: 0 10px !important; }
  .wi-bal-pill .amt { max-width: 56px; }
  .wi-deposit { padding: 0 10px !important; }
  .wi-top-logo img { height: 26px; }
  /* guarantee the profile avatar always clears the right screen edge (iPhone 15 etc.) */
  .wi-avatar { margin-right: 2px !important; }
}

/* ============================================================
   MOBILE SCROLL FIX — every game's controls must be reachable.
   The bundle game card (dice/mines/keno/plinko/blackjack/…) was
   PINNED to viewport height with overflow:hidden, so on a phone any
   control below the fold (mines count, Manual/Auto tabs, settings)
   was clipped and unscrollable. Let the card flow to its natural
   height and let the page (#trap-page-wrap, overflow:auto) scroll,
   so the whole game + its footer are reachable. container-type is
   switched to inline-size because size-containment needs a fixed
   height (which is exactly what we're removing). Desktop untouched.
   ============================================================ */
@media (max-width: 700px) {
  #game-content .trap-bundle-stage {
    min-height: 0 !important;
    align-items: stretch !important;
  }
  #game-content .trap-bundle-card {
    height: auto !important;
    min-height: calc(100dvh - var(--topbar-h, 64px) - 16px) !important;
    max-height: none !important;
    overflow: visible !important;
    container-type: inline-size !important;
  }
  #game-content .trap-bundle-card trap-game-provider-wrapper {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: calc(100dvh - var(--topbar-h, 64px) - 16px) !important;
    overflow: visible !important;
    container-type: inline-size !important;
    display: block !important;
    touch-action: pan-y !important;   /* a vertical swipe scrolls the page even over the game board */
  }
  /* The bottom mobile nav is 60px + safe-area; make sure the last game
     control / the footer can always scroll clear of it. iOS momentum scroll
     on the position:fixed wrap. */
  #trap-page-wrap { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; -webkit-overflow-scrolling: touch; }
}