/* ============================================================
   AUN MOBILE UX FIX — /css/aun-mobile.css
      Responsive mobile styles for aunweplay.com
         Add after aun-fixes.css in all HTML pages
            ============================================================ */

@media (max-width: 768px) {

    /* ── GLOBAL ── */
    body {
          overflow-x: hidden !important;
          max-width: 100vw !important;
    }
    section, .proof, .facts, footer, .footer-bottom {
          max-width: 100% !important;
          overflow-x: hidden !important;
    }
    img, video {
          max-width: 100% !important;
          height: auto !important;
    }

    /* ── NAVIGATION ── */
    #nav {
          padding: 0 16px !important;
          height: 56px !important;
          align-items: center !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }
    #nav .nav-links { display: none !important; }
    #nav .nav-cta   { display: none !important; }
    #nav .burger    { display: flex !important; order: 3; }
    #nav .nav-logo  { flex: 1; }
    #nav .nav-logo img { height: 32px !important; width: 32px !important; }

    /* ── BURGER ICON ── */
    #burger {
          width: 32px !important;
          height: 44px !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 6px !important;
          cursor: pointer !important;
          z-index: 1000 !important;
          position: relative !important;
    }
    #burger span {
          display: block !important;
          width: 24px !important;
          height: 2.5px !important;
          background-color: #25443a !important;
          border-radius: 2px !important;
          transition: all 0.3s ease !important;
    }

    /* ── MOBILE DRAWER ── */
    #drawer {
          padding: 80px 24px 40px !important;
          z-index: 900 !important;
    }
    #drawer.open {
          display: flex !important;
          flex-direction: column !important;
    }
    #drawer a {
          font-size: 1.8rem !important;
          padding: 12px 0 !important;
    }
    #drawer .dcta {
          margin-top: 24px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 16px 28px !important;
          font-size: 1.1rem !important;
          border-radius: 100px !important;
          width: 100% !important;
          text-align: center !important;
          box-sizing: border-box !important;
          background: #F5A08C !important;
          color: #1B3B2D !important;
    }

    /* ── HERO ── */
    .hero,
    .inner-hero {
          padding: 80px 20px 48px !important;
          max-width: 100% !important;
          margin: 0 !important;
          min-height: auto !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }
    .hero-headline,
    .inner-hero h1,
    .page-title {
          font-size: 2.2rem !important;
          line-height: 1.12 !important;
          word-break: break-word !important;
    }
    .hero-headline span,
    .hero-headline .hero-hl-accent {
          font-size: 2.2rem !important;
          line-height: 1.12 !important;
          display: inline !important;
    }
    .hero-sub-row {
          max-width: 100% !important;
          width: 100% !important;
          padding-top: 20px !important;
    }
    .hero-sub {
          font-size: 1rem !important;
          line-height: 1.6 !important;
    }
    .hero-actions {
          flex-direction: column !important;
          gap: 12px !important;
          width: 100% !important;
    }
    .hero-actions .btn {
          width: 100% !important;
          text-align: center !important;
          justify-content: center !important;
          padding: 16px 24px !important;
          font-size: 1rem !important;
          box-sizing: border-box !important;
    }
    .hero-note {
          font-size: 0.8rem !important;
          text-align: center !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          display: flex !important;
          gap: 4px !important;
    }
    .trust-pill {
          font-size: 0.8rem !important;
          margin-bottom: 16px !important;
    }

    /* ── FACTS (Stats bar) ── */
    .facts {
          padding: 0 !important;
          width: 100% !important;
    }
    .facts-inner {
          display: flex !important;
          flex-direction: column !important;
          gap: 0 !important;
          padding: 0 20px !important;
          max-width: 100% !important;
          margin: 0 !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }
    .fact {
          padding: 24px 0 !important;
          width: 100% !important;
          box-sizing: border-box !important;
          border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    }
    .fact:last-child { border-bottom: none !important; }
    .fact-num {
          font-size: 3rem !important;
          line-height: 1 !important;
          margin-bottom: 4px !important;
    }
    .fact-label {
          font-size: 0.85rem !important;
          line-height: 1.5 !important;
          max-width: 100% !important;
    }

    /* ── PROOF SECTION ── */
    .proof {
          padding: 0 !important;
          width: 100% !important;
          border-radius: 16px !important;
          margin: 16px 0 !important;
          overflow: hidden !important;
    }
    .proof-inner {
          display: flex !important;
          flex-direction: column-reverse !important;
          gap: 32px !important;
          padding: 40px 20px !important;
          max-width: 100% !important;
          margin: 0 !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }
    .proof-phone {
          width: 200px !important;
          max-width: 180px !important;
          margin: 0 auto !important;
          padding: 8px !important;
    }
    .proof-phone img,
    .proof-phone video {
          max-width: 100% !important;
          border-radius: 24px !important;
    }
    .proof-copy {
          width: 100% !important;
          padding: 0 !important;
          gap: 24px !important;
          box-sizing: border-box !important;
    }
    .proof-copy h2 {
          font-size: 1.7rem !important;
          line-height: 1.2 !important;
    }
    .proof-copy h2 span {
          font-size: 1.7rem !important;
    }

    /* ── SCENARIO FLOW (Steps) ── */
    .scenario-flow {
          gap: 8px !important;
          width: 100% !important;
    }
    .flow-step {
          padding: 16px !important;
          gap: 12px !important;
          width: 100% !important;
          box-sizing: border-box !important;
          border-radius: 12px !important;
          margin-bottom: 0 !important;
    }
    .flow-step h4 {
          font-size: 1rem !important;
          line-height: 1.3 !important;
    }
    .flow-step p {
          font-size: 0.9rem !important;
          line-height: 1.5 !important;
    }
    .step-num {
          width: 32px !important;
          height: 32px !important;
          min-width: 32px !important;
          font-size: 0.85rem !important;
          flex-shrink: 0 !important;
    }

    /* ── PROOF CARD (CTA) ── */
    .proof-card {
          flex-direction: column !important;
          padding: 24px 20px !important;
          gap: 16px !important;
          width: 100% !important;
          box-sizing: border-box !important;
          text-align: center !important;
          align-items: center !important;
    }
    .proof-card .btn {
          width: 100% !important;
          justify-content: center !important;
          text-align: center !important;
          box-sizing: border-box !important;
    }
    .proof-card > div {
          width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
          align-items: center !important;
    }

    /* ── BADGES ── */
    .problem-badge,
    .solution-badge,
    .badge {
          font-size: 0.65rem !important;
          padding: 2px 8px !important;
    }

    /* ── FEATURE PANELS (How it works page) ── */
    .fpanel {
          grid-template-columns: 1fr !important;
          gap: 24px !important;
          padding: 32px 20px !important;
          width: 100% !important;
          box-sizing: border-box !important;
          max-width: 100% !important;
    }
    .fpanel > * {
          width: 100% !important;
          box-sizing: border-box !important;
    }
    .fpanel img {
          max-width: 100% !important;
          height: auto !important;
    }
    .fpanel h2,
    .fpanel-title {
          font-size: 1.8rem !important;
          line-height: 1.15 !important;
    }
    .fpanel p {
          font-size: 1rem !important;
          line-height: 1.6 !important;
    }

    /* ── STEPS ROW (How it works page) ── */
    .steps-row {
          grid-template-columns: 1fr !important;
          gap: 16px !important;
          padding: 0 20px !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }
    .steps-row > * {
          width: 100% !important;
          box-sizing: border-box !important;
    }

    /* ── COMPARISON GRID ── */
    .cmp-grid {
          grid-template-columns: 1fr !important;
          gap: 16px !important;
          padding: 0 20px !important;
          width: 100% !important;
          box-sizing: border-box !important;
          max-width: 100% !important;
    }
    .cmp-grid > * {
          width: 100% !important;
          box-sizing: border-box !important;
    }

    /* ── PERKS GRID (Clubs page) ── */
    .perks-grid,
    .perk-grid {
          grid-template-columns: 1fr !important;
          gap: 16px !important;
          padding: 0 20px !important;
    }

    /* ── CTA BANDS ── */
    .cta-band,
    .cta-inner {
          padding: 32px 20px !important;
          text-align: center !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }
    .cta-inner .btn {
          width: 100% !important;
    }

    /* ── TRUTH BAND ── */
    .truth-band {
          padding: 32px 20px !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }

    /* ── ROADMAP ── */
    .sport-cards {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 12px !important;
    }
    .phase {
          padding: 20px !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }

    /* ── INNER PAGES ── */
    .content-section,
    .legal-body,
    .faq-list {
          padding: 24px 20px !important;
          width: 100% !important;
          box-sizing: border-box !important;
          max-width: 100% !important;
    }
    .faq-item { padding: 16px 0 !important; }
    .faq-q { font-size: 1rem !important; }
    .timeline { padding: 0 20px !important; }
    .timeline-card { padding: 20px !important; }

    /* ── FOOTER ── */
    footer {
          display: flex !important;
          flex-direction: column !important;
          gap: 24px !important;
          padding: 40px 20px 24px !important;
          width: 100% !important;
          box-sizing: border-box !important;
    }
    footer > div { width: 100% !important; }
    .footer-desc {
          font-size: 0.85rem !important;
          line-height: 1.6 !important;
    }
    .fcol-title {
          font-size: 0.7rem !important;
          margin-bottom: 8px !important;
    }
    .fcol-links a {
          font-size: 0.9rem !important;
          padding: 4px 0 !important;
          min-height: 36px !important;
          display: flex !important;
          align-items: center !important;
    }

    /* ── FOOTER BOTTOM ── */
    .footer-bottom {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          gap: 8px !important;
          padding: 12px 20px !important;
          font-size: 0.75rem !important;
          width: 100% !important;
          box-sizing: border-box !important;
          margin-top: 8px !important;
          border-top: 1px solid rgba(37, 68, 58, 0.1) !important;
    }

    /* ── STICKY BAR ── */
    .sticky-bar {
          padding: 10px 16px !important;
          width: 100% !important;
          box-sizing: border-box !important;
          position: fixed !important;
          left: 0 !important;
          right: 0 !important;
          z-index: 800 !important;
          backdrop-filter: blur(10px) !important;
          border-top: 1px solid rgba(37, 68, 58, 0.1) !important;
          box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
    }
    .sticky-bar .btn {
          width: 100% !important;
          text-align: center !important;
          justify-content: center !important;
          padding: 14px 20px !important;
    }

    /* ── TOUCH TARGETS ── */
    a, button { min-height: 44px; }
}

/* ── EXTRA SMALL (max 480px) ── */
@media (max-width: 480px) {
    .hero-headline,
    .hero-headline span,
    .hero-headline .hero-hl-accent {
          font-size: 1.7rem !important;
    }
    .proof-copy h2 { font-size: 1.4rem !important; }
    .fact-num { font-size: 2rem !important; }
    #drawer a { font-size: 1.5rem !important; }
    .inner-hero h1, .page-title { font-size: 1.6rem !important; }
    .fpanel h2, .fpanel-title { font-size: 1.5rem !important; }
}