/* ============================================================
   MICHAELXCHANGE — MOBILE APP SHELL (Android-first UX)
   Injected over the existing pages; desktop/tablet untouched.
   ============================================================ */

html{overflow-x:hidden;overflow-y:auto;width:100%}
body{overflow-x:clip;overflow-y:visible;max-width:100%;touch-action:manipulation;-webkit-touch-callout:none}
*{-webkit-tap-highlight-color:transparent}
img{content-visibility:auto}

/* ---------- shell hidden on tablet+desktop ---------- */
.app-topbar,.app-drawer,.app-overlay,.app-bottomnav,.app-fab,.app-pull,.app-splash{display:none}
.brand-bar,.brand-nav{display:none}

/* ============================================================
   MOBILE          ≤767px
   ============================================================ */
@media (max-width:767px){
  html{-webkit-text-size-adjust:100%}
  body{background:#0B0F14;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));min-height:100%;}

  /* ---- top: brand name only (STATIC, no JS) ---- */
  .mx-nav{display:none}
  .brand-bar{
    position:fixed;top:0;left:0;right:0;z-index:220;
    height:calc(96px + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
    display:flex;align-items:center;justify-content:flex-start;padding-left:16px;
    background:rgba(11,15,20,.98);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .brand-bar > a{font-weight:800;font-size:19px;color:#fff;letter-spacing:-.01em;font-family:'Inter','Plus Jakarta Sans',sans-serif}
  .brand-bar > a span{color:#D4AF37}
  .brand-bar__actions{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    display:flex;align-items:center;gap:8px;
  }
  .brand-bar__wa{
    width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.35);
    color:#25D366;transition:transform .16s ease,filter .2s ease;
  }
  .brand-bar__wa:active{transform:scale(.92)}
  .brand-bar__login{
    height:34px;padding:0 15px;border:0;border-radius:10px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:#D4AF37;color:#111;
    font-family:'Inter','Plus Jakarta Sans',sans-serif;
    font-weight:800;font-size:12px;letter-spacing:.04em;
    transition:transform .16s ease,filter .2s ease;
  }
  .brand-bar__login:active{transform:scale(.94)}
  .brand-bar__login.done{background:transparent;padding:0;width:38px;height:38px;border-radius:50%}
  .brand-bar__login.done:active{transform:scale(.94)}
  body{padding-top:calc(86px + env(safe-area-inset-top,0px)) !important}
  /* JS-injected chrome hidden — static chrome is the source of truth */
  .app-topbar,.app-bottomnav,.app-drawer,.app-overlay,.app-fab{display:none !important}

  /* ---- bottom: full navbar (STATIC, no JS) ---- */
  .brand-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:220;
    display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(62px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(11,15,20,.98);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .brand-nav__i{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:rgba(255,255,255,.5);font-size:9px;font-weight:600;letter-spacing:.02em;
    -webkit-tap-highlight-color:transparent;transition:color .2s;
  }
  .brand-nav__i:active{transform:scale(.92)}
  .brand-nav__i svg{width:20px;height:20px}
  .brand-nav__i span{display:block}
  .brand-nav__i.is-active{color:#D4AF37}
  .brand-nav__i.is-active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:34px;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#E6C25C,#D4AF37);
  }

  /* ---- app top bar 64px ---- */
  .app-topbar{
    display:flex;align-items:center;justify-content:space-between;
    position:fixed;top:0;left:0;right:0;z-index:200;
    height:calc(64px + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) 14px 0;
    background:rgba(11,15,20,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.06);
    transform:translateY(0);
    transition:transform .32s cubic-bezier(.2,.9,.3,1);
    will-change:transform;
  }
  .app-topbar.app-topbar--hide{transform:translateY(-100%)}
  .app-topbar__btn{
    width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;color:#fff;cursor:pointer;border-radius:12px;flex:0 0 auto;
  }
  .app-topbar__btn:active{transform:scale(.92)}
  .app-topbar__logo{
    display:flex;flex-direction:column;align-items:center;line-height:1;
    color:#fff;font-weight:800;font-size:19px;letter-spacing:-.01em;white-space:nowrap;
  }
  .app-topbar__logo b{color:#D4AF37;font-weight:800}
  .app-topbar__logo small{
    margin-top:4px;font-size:8px;font-weight:700;letter-spacing:.4em;color:rgba(255,255,255,.45);
  }
  .app-topbar__login{
    width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;
    color:#fff;cursor:pointer;flex:0 0 auto;
  }
  .app-topbar__login:active,.app-topbar__btn:active{transform:scale(.94)}

  /* ---- drawer (left) ---- */
  .app-overlay{
    position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .33s ease;
  }
  .app-overlay.app-overlay--open{opacity:1;pointer-events:auto}
  .app-drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:310;
    width:85%;max-width:340px;
    display:flex;flex-direction:column;
    background:#11161E;
    border-radius:0 28px 28px 0;
    transform:translateX(-100%);
    transition:transform .38s cubic-bezier(.32,.72,0,1);
    will-change:transform;
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:24px 0 60px rgba(0,0,0,.6);
  }
  .app-drawer.app-drawer--open{transform:none}
  .app-drawer--open{display:flex !important}
  .app-drawer__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 18px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .app-drawer__head .app-drawer__logo{color:#fff;font-weight:800;font-size:18px}
  .app-drawer__head .app-drawer__logo b{color:#D4AF37}
  .app-drawer__close{
    width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.06);
    border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .app-drawer__nav{flex:1;overflow-y:auto;padding:14px 14px 22px}
  .app-drawer a.app-drawer__item{
    position:relative;display:flex;align-items:center;gap:14px;
    padding:18px 14px;border-radius:14px;
    color:rgba(255,255,255,.82);font-size:15px;font-weight:600;letter-spacing:.03em;
    transition:background .22s,color .22s,transform .18s;
  }
  .app-drawer a.app-drawer__item:active{transform:scale(.97)}
  .app-drawer a.app-drawer__item:hover{background:rgba(255,255,255,.05);color:#fff}
  .app-drawer a.app-drawer__item.is-active{color:#D4AF37;background:rgba(212,175,55,.08)}
  .app-drawer a.app-drawer__item.is-active::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:3px;height:24px;border-radius:3px;background:linear-gradient(180deg,#E6C25C,#D4AF37);
  }
  .app-drawer__item svg{flex:0 0 auto}
  .app-drawer__actions{display:flex;flex-direction:column;gap:10px;padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 18px);border-top:1px solid rgba(255,255,255,.07)}

  /* ---- buttons ---- */
  .app-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:52px;border-radius:14px;font-size:14px;font-weight:700;letter-spacing:.06em;
    transition:transform .16s ease,filter .2s ease,box-shadow .2s ease;
  }
  .app-btn:active{transform:scale(.97)}
  .app-btn--ghost{border:1px solid rgba(255,255,255,.15);color:#fff;background:transparent}
  .app-btn--ghost:active{background:rgba(255,255,255,.06)}
  .app-btn--gold{
    background:linear-gradient(135deg,#E6C25C,#D4AF37,#B88919);color:#111;
    box-shadow:0 8px 30px rgba(212,175,55,.30);
  }
  .app-btn--gold:active{filter:brightness(1.08)}

  /* ---- bottom nav ---- */
  .app-bottomnav{
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    display:grid;grid-template-columns:repeat(6,1fr);
    height:calc(68px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(11,15,20,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .app-bottomnav__item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:rgba(255,255,255,.5);font-size:9.5px;font-weight:600;letter-spacing:.01em;
    transition:color .22s,transform .16s;
  }
  .app-bottomnav__item:active{transform:scale(.9)}
  .app-bottomnav__item svg{width:20px;height:20px}
  .app-bottomnav__item.is-active{color:#D4AF37}
  .app-bottomnav__item.is-active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:34px;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#E6C25C,#D4AF37);display:none;
  }
  @media(min-width:420px){.app-bottomnav__item.is-active::before{display:block}}
  .app-bottomnav__badge{
    position:absolute;top:8px;right:calc(50% - 26px);min-width:16px;height:16px;padding:0 4px;
    border-radius:8px;background:#FF3B5C;color:#fff;font-size:9px;font-weight:700;line-height:16px;text-align:center;
  }

  /* ---- FAB / live ---- */
  .app-fab{
    position:fixed;right:16px;z-index:190;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    width:60px;height:60px;border-radius:50%;
    background:linear-gradient(135deg,#E6C25C,#D4AF37,#B88919);border:0;cursor:pointer;
    color:#111;box-shadow:0 10px 30px rgba(212,175,55,.45);
    transition:transform .16s ease;
  }
  .app-fab:active{transform:scale(.92)}
  .app-fab .app-fab__icon{font-size:22px;line-height:1}
  .app-fab .app-fab__label{font-size:9px;font-weight:800;letter-spacing:.06em}
  .app-fab:before{
    content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(212,175,55,.5);
    animation:appRing 2.4s ease-out infinite;pointer-events:none;
  }
  @keyframes appRing{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}

  /* ---- pull to refresh ---- */
  .app-pull{
    position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:0;right:0;z-index:150;
    display:flex;justify-content:center;pointer-events:none;opacity:0;
  }
  .app-pull__spinner{
    width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.15);
    border-top-color:#D4AF37;transform:rotate(0deg);transition:transform .12s linear;
  }

  /* ---- splash / skeleton ---- */
  .app-splash{
    position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
    background:radial-gradient(700px 300px at 80% -10%,rgba(212,175,55,.12),transparent 55%),#0B0F14;
    transition:opacity .45s ease,visibility .45s;padding:0 16px;
    animation:appSplashHide .6s ease 3000ms forwards;
  }
  @keyframes appSplashHide{to{opacity:0;visibility:hidden;pointer-events:none}}
  .app-splash--done{opacity:0;visibility:hidden;pointer-events:none}
  .app-splash__logo{font-weight:800;font-size:24px;color:#fff;letter-spacing:-.01em}
  .app-splash__logo b{color:#D4AF37}
  .app-splash__sk{width:min(300px,80%);height:12px;border-radius:6px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
  .app-splash__sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);animation:appShimmer 1.4s ease infinite}
  .app-splash__sk--s{width:min(180px,50%)}
  @keyframes appShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

  /* ---------- content transforms ---------- */
  h1,.app-h1,[class*="font-display-lg"]{font-size:clamp(22px,6.5vw,28px)!important;line-height:1.18!important;letter-spacing:-.02em!important}
  .cta-btn{font-size:14px!important;padding:10px 22px!important;width:auto!important;letter-spacing:0!important}
  h2,[class*="font-headline-lg-mobile"]{font-size:clamp(19px,5.2vw,24px)!important;line-height:1.2!important}
  h3,[class*="font-headline-md"]{font-size:clamp(15px,4.5vw,19px)!important;line-height:1.25!important}
  .text-[13px]{font-size:12px!important}
  p{font-size:14px}

  /* section breathing room 26px */
  section{padding-top:26px!important;padding-bottom:26px!important}
  [class*="py-xxl"]{padding-top:26px!important;padding-bottom:26px!important}
  [class*="pt-xxl"]{padding-top:26px!important}
  [class*="pb-xl"]{padding-bottom:26px!important}
  [class*="px-margin"]{padding-left:18px!important;padding-right:18px!important}
  .mb-12{margin-bottom:26px!important}
  .mb-xxl{margin-bottom:26px!important}

  /* cards slide up in */
  .fin-card{animation:appUp .5s ease both}
  @keyframes appUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* exchange sections → consistent 20px side margins on mobile */
  .exch-wrap{padding-left:20px !important;padding-right:20px !important}
  section#markets{padding-left:20px !important;padding-right:20px !important}

  /* ---------- exchange cards → 1 per row ---------- */
  .proc-grid{grid-template-columns:1fr !important}
  .proc-slider{margin-left:-24px!important;margin-right:-24px!important;width:auto!important;max-width:none!important;}
  #sportsGrid{grid-template-columns:1fr !important}
  .reels-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;overflow:visible!important}.reels-grid>*{min-width:0;max-width:100%}.reels-grid video{width:100%;height:auto}

  .exch-grid{grid-template-columns:1fr!important;gap:14px!important}
  .exch-grid .fin-card{padding:14px;gap:12px;border-radius:16px}
  .exch-grid .fin-card .flex.items-start{gap:8px;min-width:0}
  .exch-grid .fin-card .min-w-0{min-width:0;overflow:hidden}
  .exch-grid .fin-logo{width:34px;height:34px;font-size:14px;border-radius:9px;flex:0 0 auto}
  .exch-grid .fin-card h3{font-size:13.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .exch-grid .fin-card p[class*="text-[13px]"]{font-size:10px!important;line-height:1.3!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .exch-grid .fin-live{font-size:9px;padding:4px 8px;gap:4px}
  .exch-grid .fin-live span{width:5px!important;height:5px!important}
  .exch-grid .fin-card [style="gap:16px"]{gap:10px!important}
  .exch-grid .fin-row{height:38px;min-width:0;padding:0 9px;border-radius:10px;gap:6px;overflow:hidden}
  .exch-grid .fin-row > .text-sm{flex:0 0 auto;font-size:9.5px!important}
  .exch-grid .fin-copy{min-width:0;flex:1 1 auto;overflow:hidden}
  .exch-grid .fin-copy code{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;font-size:10.5px!important;max-width:100%}
  .exch-grid .fin-copy .material-symbols-outlined{font-size:13px!important;flex:0 0 auto}
  .exch-grid .fin-btn{height:44px;font-size:12.5px;border-radius:10px;gap:6px}

  /* exchanges.html partner cards → 2 per row */
  .exch-grid > .flex.flex-col{padding:14px!important;border-radius:16px!important}
  .exch-grid > .flex.flex-col .mb-4{margin-bottom:10px!important}
  .exch-grid > .flex.flex-col h3{font-size:14px!important}
  .exch-grid > .flex.flex-col p[class*="text-[13px]"]{font-size:10.5px!important;line-height:1.3!important;margin-bottom:10px!important}
  .exch-grid > .flex.flex-col .w-12{width:32px;height:32px;border-radius:9px}
  .exch-grid > .flex.flex-col .flex.items-center.gap-1.px-3{font-size:9px;padding:3px 7px!important}
  .exch-grid > .flex.flex-col .p-3{border-radius:9px;padding:7px 9px!important;overflow:hidden}
  .exch-grid > .flex.flex-col .p-3 > .text-label-sm{flex:0 0 auto;font-size:9.5px!important}
  .exch-grid > .flex.flex-col .p-3 .flex.items-center.gap-2{min-width:0;flex:1 1 auto;overflow:hidden}
  .exch-grid > .flex.flex-col code{font-size:10.5px!important;display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .exch-grid > .flex.flex-col .p-3 .material-symbols-outlined{font-size:13px!important;flex:0 0 auto}
  .exch-grid > .flex.flex-col .gap-3{gap:8px!important}
  .exch-grid > .flex.flex-col a[class*="text-center"]{font-size:12px;margin-top:8px!important;padding:10px 0!important;border-radius:10px}

  /* ---------- how-it-works process grid → compact 2-col ---------- */
  .proc-grid{gap:10px!important}
  .proc-grid > div{padding:14px!important;gap:8px!important;border-radius:14px!important}
  .proc-grid h3{font-size:14.5px!important}
  .proc-grid p{font-size:12px!important;line-height:1.45!important}
  .proc-grid [class*="w-12"],[class*="w-16"]{width:38px;height:38px!important}
  .proc-grid [class*="w-12"]{height:38px}
  .proc-grid .material-symbols-outlined{font-size:20px!important}

  /* generic buttons → thumb friendly */
  .fin-btn{height:52px;border-radius:14px;font-size:14px}
  .mx-nav__cta{height:38px!important;border-radius:10px!important}

  /* ---------- trust bar (marquee under hero) → slim ---------- */
  .trustbar{padding-top:10px !important;padding-bottom:10px !important}
  .trustbar [class*="uppercase"]{font-size:10px !important;gap:7px !important}
  .trustbar .material-symbols-outlined{font-size:15px !important}

  /* ---------- hero (index) ---------- */
  .hero-section{height:auto!important;min-height:0!important;max-height:none!important;margin-top:10px!important}
  .hero-section #hero-slider .slide-item img{width:100%;height:100%;object-fit:contain!important}
  .hero-section [class*="px-margin"]{padding-left:20px!important;padding-right:20px!important}
  .hero-section .flex.flex-wrap,
  .hero-section [class~="flex-wrap"]{flex-direction:column;align-items:center;width:100%;gap:12px}
  .hero-section [class~="flex-wrap"] > *{
    width:100%;max-width:300px;min-height:50px;border-radius:12px;font-size:14px;justify-content:center;display:flex;align-items:center;
  }
  .hero-section .hero-kw-wrap{border-radius:0;padding-top:8px;padding-bottom:8px}
  .hero-section .hero-kw-wrap span[class*="px-6"]{
    background:transparent!important;border-color:transparent!important;
    padding:2px 0!important;font-size:10.5px!important;line-height:1!important;
    color:rgba(255,255,255,.7)!important;gap:7px;
  }
  .hero-section .slider-dot{width:7px!important;height:7px!important}
  .hero-section .slide-hero, .hero-section .slide-item{background-size:cover;background-position:center}

  /* sports / casino / promo / exch sliders */
  .sports-hero,.sports-hero img{padding:0!important;border-radius:0}
  .sports-hero{position:relative!important}
}

/* ---------- carousels (pill rows → snap carousels) ---------- */
.lxc{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px!important;scrollbar-width:none;margin:0 -20px;padding:4px 20px 10px}
.lxc::-webkit-scrollbar{display:none}
.lxc>*{flex:0 0 auto;scroll-snap-align:center}
.lxc>*[class*="rounded-full"]{min-width:170px;justify-content:center}
.lxc>*:not([class*="rounded-full"]){min-width:220px}

/* ---------- page transition ---------- */
body.app-fade{opacity:0;transform:translateY(6px)}
body{transition:opacity .24s ease,transform .24s ease}
/* ---------- sports page mobile: no slider, 1 card per row ---------- */
@media (max-width:767px){
  #sportsGrid{grid-template-columns:1fr!important;gap:16px!important;}
  #sportsGrid{grid-template-columns:1fr!important;gap:16px!important;}
  #sportsGrid .sport-card{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;height:300px!important;overflow:hidden;display:flex;flex-direction:column;}
  #sportsGrid .sport-card .flex.items-center.justify-between{margin-top:auto;}
}

/* ---------- sports page desktop: horizontal slider, 5 per view, scrollable ---------- */
@media (min-width:1024px){
  #sportsGrid{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:20px!important;width:100%!important;}
  #sportsGrid::-webkit-scrollbar{display:none}
  #sportsGrid .sport-card{flex:0 0 calc((100% - 80px)/5);max-width:none!important;scroll-snap-align:start;min-width:0!important;}
}