/* ============================================================
   RESPONSIVE.CSS — extracted from index.html
   ============================================================ */

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
#mobile-nav-overlay{
  display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.72);
  z-index:55;backdrop-filter:blur(4px);
}
#mobile-nav-overlay.open{display:block;}

@media(max-width:767px){
  #screen-lobby{flex-direction:column !important;}
  #app-sidebar{
    position:fixed;left:-280px;top:0;height:100vh;z-index:60;
    width:264px;min-width:264px;
    transition:left .26s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 28px rgba(0,0,0,.55);
  }
  #app-sidebar.sidebar-open{left:0;}
  #content-area{height:100dvh;}

  /* ---- World Chat: mobile slide-in panel ----
     Previously this panel was force-hidden with display:none !important,
     which meant the floating chat button had nothing to reveal — tapping
     it silently did nothing. It is now a fixed, off-canvas panel that
     slides in from the right and is toggled by the same .chat-collapsed
     class the existing toggleChat() function already uses. */
  #chat-side-panel{
    display:flex !important;
    position:fixed;top:0;right:0;bottom:0;
    height:100vh;height:100dvh;
    width:88%;max-width:360px;min-width:0;
    z-index:70;
    transform:translateX(0);
    opacity:1;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:-10px 0 32px rgba(0,0,0,.6);
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  #chat-side-panel.chat-collapsed{
    transform:translateX(100%);
    opacity:1;width:88%;max-width:360px;min-width:0;
    pointer-events:none;
  }
  #chat-side-panel:not(.chat-collapsed){pointer-events:auto;}
  #chat-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:65;backdrop-filter:blur(2px);
    opacity:0;transition:opacity .25s ease;
  }
  #chat-backdrop.open{display:block;opacity:1;}
  .chat-txt{font-size:16px;} /* prevents iOS Safari auto-zoom on focus */
  .chat-input-row{
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }

  .mobile-menu-btn{display:flex !important;}
  .icon-btn{width:44px;height:44px;} /* comfortable touch target (was 38px) */
  /* Title + points chip + Reward Wallet button don't all fit on one row on
     narrow phones — they used to just overflow past the screen edge and
     get clipped (the "t" in "Reward Wallet" was cut off). Wrapping to a
     second row keeps everything visible instead of hiding it offscreen. */
  .content-topbar{padding:10px 13px;flex-wrap:wrap;row-gap:8px;}
  .content-title{flex:1 1 auto;min-width:0;}
  .topbar-right{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;}
  .lobby-panel{padding:13px;}
  .home-grid{display:flex;flex-direction:column;gap:12px;}
  .hg-left-col,.hg-mid-col,.hg-right-col{display:contents;}
  /* Status pills (Online/Searching/Battles/Rooms) used to be hidden
     entirely on mobile since 4 of them don't fit alongside the points
     chip + Reward Wallet button on a narrow screen. Instead of hiding
     them, give them their own full-width scrollable strip so they're
     still visible — just swipeable instead of all forced into one
     cramped row. */
  .status-mini-pills{
    width:100%;order:3;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .status-mini-pills::-webkit-scrollbar{display:none;}
  .smp{flex-shrink:0;}
}
@media(max-width:767px) and (orientation:landscape){
  #chat-side-panel{width:60%;max-width:420px;}
  #chat-side-panel.chat-collapsed{width:60%;max-width:420px;}
}
@media(min-width:768px) and (max-width:1099px){
  #app-sidebar{width:225px;min-width:225px;}
  #chat-side-panel{width:240px;min-width:240px;}
  .lobby-panel{padding:14px;}
}



/* ============================================================
   HYPE BACKGROUND ART — serve smaller promo images on phones
   (same visual treatment, ~half the file size, less mobile data use)
   ============================================================ */
@media (max-width:767px){
  .final-bg-win{
    background-image:
      linear-gradient(180deg, rgba(6,4,14,.55) 0%, rgba(6,4,14,.85) 100%),
      url("../assets/backgrounds/promo/you-won-mobile.webp") !important;
  }
  .final-bg-lose{
    background-image:
      linear-gradient(180deg, rgba(6,4,14,.60) 0%, rgba(6,4,14,.88) 100%),
      url("../assets/backgrounds/promo/dont-lose-this-one-mobile.webp") !important;
  }
  #screen-result{
    background:
      linear-gradient(180deg, rgba(6,4,14,.88) 0%, rgba(6,4,14,.95) 100%),
      url("../assets/backgrounds/promo/real-voices-real-battles-mobile.webp") !important;
    background-size:cover !important;
    background-position:center !important;
  }
  .battle-top-bar::before{
    background:
      linear-gradient(180deg, rgba(6,4,14,0) 0%, rgba(6,4,14,.9) 100%),
      url("../assets/backgrounds/promo/vs-battle-now-mobile.webp");
    background-size:cover; background-position:center;
  }
  #screen-dogselect{
    background:
      linear-gradient(180deg, rgba(6,4,14,.86) 0%, rgba(6,4,14,.94) 55%),
      url("../assets/backgrounds/promo/pick-your-dog-mobile.webp");
    background-size:cover;background-position:top center;background-repeat:no-repeat;
  }
  #screen-lobby{
    background:
      linear-gradient(180deg, rgba(6,4,14,.90) 0%, rgba(6,4,14,.96) 100%),
      url("../assets/backgrounds/promo/enter-the-arena-mobile.webp");
    background-size:cover;background-position:center top;
    /* background-attachment:fixed dropped on mobile: it disables scroll
       compositing and causes jank/flicker on iOS & Android */
    background-attachment:scroll;
  }
  #screen-auth{
    background:
      linear-gradient(180deg, rgba(6,4,14,.80) 0%, rgba(6,4,14,.72) 45%, rgba(6,4,14,.94) 100%),
      url("../assets/backgrounds/promo/hero-bark-battle-poster-mobile.webp");
    background-size:cover;background-position:center 20%;
  }
  #screen-searching, #screen-matchfound, #screen-hostwait{
    background:
      linear-gradient(180deg, rgba(6,4,14,.82) 0%, rgba(6,4,14,.90) 100%),
      url("../assets/backgrounds/promo/battle-now-wide-mobile.webp");
    background-size:cover;background-position:center;
  }
  #screen-mic, #screen-calibrate{
    background:
      linear-gradient(180deg, rgba(6,4,14,.85) 0%, rgba(6,4,14,.93) 100%),
      url("../assets/backgrounds/promo/how-loud-can-you-bark-mobile.webp");
    background-size:cover;background-position:center;
  }
  #screen-hostjoin, #screen-join{
    background:
      linear-gradient(180deg, rgba(6,4,14,.85) 0%, rgba(6,4,14,.92) 100%),
      url("../assets/backgrounds/promo/challenge-a-friend-mobile.webp");
    background-size:cover;background-position:center;
  }
  #screen-leaderboard{
    background:
      linear-gradient(180deg, rgba(6,4,14,.90) 0%, rgba(6,4,14,.96) 30%),
      url("../assets/backgrounds/promo/global-rivals-leaderboard-mobile.webp");
    background-size:cover;background-position:top center;background-repeat:no-repeat;
  }
  #screen-waitscore{
    background:
      linear-gradient(180deg, rgba(6,4,14,.85) 0%, rgba(6,4,14,.93) 100%),
      url("../assets/backgrounds/promo/loudest-wins-phone-mobile.webp");
    background-size:cover;background-position:center;
  }
}

/* ============================================================
   MOBILE TOP BAR — keep points chip + wallet + chat on the SAME row as the
   title (they used to wrap under it). The topbar still wraps so the status
   pills strip (width:100%) drops to its own line below.
   ============================================================ */
@media(max-width:767px){
  .content-topbar{gap:6px;padding:8px 10px;}
  .content-title{flex:1 1 0;min-width:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .content-title-icon{width:24px;height:24px;}
  .topbar-right{flex:0 0 auto;flex-wrap:nowrap;gap:6px;row-gap:0;}
  .wallet-header-section{display:flex;align-items:center;gap:6px;}
  .reward-points-chip{padding:5px 8px;font-size:.74rem;white-space:nowrap;}
  #reward-wallet-btn{padding:6px 9px;font-size:.72rem;white-space:nowrap;}
  .icon-btn{width:38px;height:38px;}
}
@media(max-width:400px){
  .content-title-icon{display:none;}
  .reward-points-chip{font-size:.7rem;padding:5px 7px;}
  #reward-wallet-btn{font-size:.68rem;padding:6px 8px;}
}

/* Phones: .topbar-right holds [wallet section][chat btn][status pills]. Flatten it
   (display:contents) so pts + wallet + chat sit on the SAME row as the title and
   only the full-width pills strip drops to the next line. */
@media(max-width:767px){
  .topbar-right{display:contents;}
  .content-topbar{flex-wrap:wrap;align-items:center;gap:6px;}
  .content-topbar > .content-title{order:0;flex:1 1 0;min-width:0;}
  .content-topbar .wallet-header-section{order:1;display:flex;align-items:center;gap:6px;flex:0 0 auto;}
  .content-topbar > .icon-btn, .content-topbar .icon-btn{order:2;flex:0 0 auto;}
  .content-topbar .status-mini-pills{order:3;width:100%;flex:0 0 100%;margin-top:4px;}
}

/* Phones: (1) the title lives inside a wrapper (.u-abc799) — that wrapper must be
   the shrinking item so long titles ("LEADERBOARD") ellipsize instead of pushing
   the chat button to the next row; (2) lobby panels are flex columns and children
   like .lb-list{flex:1;overflow:auto} were squashed into tiny inner scrollers —
   give every panel child its natural height so the whole panel scrolls. */
@media(max-width:767px){
  .content-topbar > .u-abc799{order:0;flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;}
  .content-topbar > .u-abc799 .content-title{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-width:900px){
  #content-area .lobby-panel > *{flex:0 0 auto;}
  #content-area .lb-list{flex:0 0 auto;overflow:visible;max-height:none;}
}