/* ============================================================
   v12 · MOBILE SIMPLIFY + OVERFLOW SAFETY  (loaded last → wins)
   Goals:
     1. No horizontal overflow on phones (360/390/430).
     2. Simplify the phone view by HIDING decorative / secondary
        elements (never removed from the DOM — desktop is untouched).
   Everything here is guarded by @media (max-width:600px) except the
   universal overflow guard, so ~1400px desktop is byte-for-byte the same.
   ============================================================ */

/* --- overflow safety net (reinforces the existing html,body guard) --- */
html, body{ overflow-x:hidden; max-width:100vw; }

@media (max-width:600px){

  /* --- OVERFLOW FIX ---
     The Learn/Grow section badges were forced onto one line by an
     earlier non-media `flex-wrap:nowrap`, spilling ~3px past 360px.
     Let them wrap so the section never exceeds the viewport. --- */
  .rx-learn-badges{ flex-wrap:wrap !important; }

  /* keep any stray wide media inside the phone bounds */
  img, svg, video{ max-width:100%; }

  /* --- SIMPLIFY: hide decorative-only elements on phones --- */
  .bg-grid{ display:none !important; }   /* full-page background texture */
  .blob-dot{ display:none !important; }  /* floating decorative blob (Meet) */

  /* --- SIMPLIFY: drop the secondary gamification stat stack in Grow.
     The four Challenge / Streak / Points / Achievements cards duplicate
     progress already shown by the Progress card + the Explore
     leaderboard, and add a lot of vertical weight on a phone. --- */
  .rx-xp-stack{ display:none !important; }
}