/* ==========================================================================
   ALLANDRICH / CM ZONE — UNIFIED MOBILE APP LAYER
   --------------------------------------------------------------------------
   One consistent, app-style mobile experience for the whole project:
     1. Member dashboard  (body[em-page] user shell)
     2. Admin panel       (.cm-admin-v2 shell)
     3. Public homepage   (.cmz-v3 / .cmz-v4 shell)
   Components (built by em_mobile.js, progressive enhancement):
     - .cmm-tabbar   fixed bottom tab bar w/ raised gold center action
     - .cmm-sheet    bottom-sheet menu drawer (clones existing nav)
   Everything here is gated to <=760px (or requires body.cmm-on which is
   only added by em_mobile.js on small screens), so desktop is untouched.
   ========================================================================== */

/* [1] SHARED MOBILE TOKENS ------------------------------------------------ */
:root{
  --cmm-bar-h: 62px;
  --cmm-safe: env(safe-area-inset-bottom, 0px);
  --cmm-bar-total: calc(var(--cmm-bar-h) + var(--cmm-safe));
  --cmm-radius: 18px;
  --cmm-line: rgba(var(--t-gold-rgb, 212,175,55), .22);
  --cmm-panel: var(--t-panel, #141414);
  --cmm-panel-2: var(--t-panel-2, #1a1a1a);
  --cmm-gold: var(--t-gold, #d4af37);
  --cmm-gold-soft: var(--t-gold-soft, #ffe08a);
  --cmm-ink: var(--t-ink, #14100a);
  --cmm-text: var(--t-text, #f2f2f2);
  --cmm-muted: var(--t-text-3, #aaaaaa);
}

/* Reserve space for the fixed tab bar so nothing hides behind it */
body.cmm-on{padding-bottom: var(--cmm-bar-total) !important;}
body.cmm-on .em_foot{margin-bottom: 0;}
/* Stop background scroll while the sheet is open */
body.cmm-lock{overflow: hidden !important;}

/* [2] BOTTOM TAB BAR ------------------------------------------------------ */
.cmm-tabbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99000;
  display: none;
  height: var(--cmm-bar-total);
  padding: 0 6px var(--cmm-safe);
  background: linear-gradient(180deg, rgba(var(--t-panel-rgb,20,20,20),.97), rgba(var(--t-bg-rgb,10,10,10),.995));
  border-top: 1px solid var(--cmm-line);
  box-shadow: 0 -14px 34px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.cmm-on .cmm-tabbar{display: grid; grid-template-columns: repeat(5, 1fr);}
.cmm-tab{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--cmm-bar-h);
  color: var(--cmm-muted); text-decoration: none;
  font-size:12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
  border: 0; background: none; cursor: pointer; padding: 0; min-width: 0;
}
.cmm-tab i, .cmm-tab svg{font-size: 18px; line-height: 1; transition: transform .18s ease;}
.cmm-tab span{max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cmm-tab:hover{color: var(--cmm-gold-soft);}
.cmm-tab.active{color: var(--cmm-gold);}
.cmm-tab.active i, .cmm-tab.active svg{transform: translateY(-1px);}
.cmm-tab.active span{color: var(--cmm-gold-soft);}
/* raised gold center action */
.cmm-tab.cmm-cta{position: relative;}
.cmm-tab.cmm-cta i, .cmm-tab.cmm-cta svg{
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-top: -26px;
  border-radius: 50%;
  color: var(--cmm-ink);
  background: linear-gradient(135deg, var(--cmm-gold-soft), var(--cmm-gold) 55%, var(--t-gold-deep, #8a6a12));
  border: 3px solid var(--t-bg, #0a0a0a);
  box-shadow: 0 8px 22px rgba(var(--t-gold-rgb,212,175,55), .4), 0 0 0 1px var(--cmm-line);
  font-size: 19px;
  padding: 12px;
  box-sizing: border-box;
}
.cmm-tab.cmm-cta.active i, .cmm-tab.cmm-cta i:hover{filter: brightness(1.08);}
.cmm-tab.cmm-cta span{color: var(--cmm-gold);}
/* tiny dot indicator under active tab */
.cmm-tab.active:not(.cmm-cta):after{
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cmm-gold); box-shadow: 0 0 8px var(--cmm-gold);
}

/* [3] BOTTOM SHEET DRAWER ------------------------------------------------- */
.cmm-sheet-wrap{position: fixed; inset: 0; z-index: 99500; display: none;}
.cmm-sheet-wrap.open{display: block;}
.cmm-scrim{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.cmm-sheet-wrap.open .cmm-scrim{opacity: 1;}
.cmm-sheet{
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 82dvh;
  display: flex; flex-direction: column;
  border: 1px solid var(--cmm-line); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(var(--t-gold-rgb,212,175,55),.14), transparent 42%),
    linear-gradient(180deg, var(--cmm-panel-2), var(--t-bg, #0a0a0a));
  box-shadow: 0 -24px 60px rgba(0,0,0,.65);
  transform: translateY(102%);
  transition: transform .28s cubic-bezier(.32,.72,.28,1);
  padding-bottom: calc(10px + var(--cmm-safe));
}
.cmm-sheet-wrap.open .cmm-sheet{transform: translateY(0);}
.cmm-grip{
  flex: 0 0 auto; display: grid; place-items: center; padding: 10px 0 4px; cursor: grab;
}
.cmm-grip:before{
  content: ""; width: 44px; height: 4px; border-radius: 4px;
  background: rgba(var(--t-gold-rgb,212,175,55), .45);
}
.cmm-sheet-head{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 11px;
  padding: 6px 18px 12px;
  border-bottom: 1px solid rgba(var(--t-gold-rgb,212,175,55), .14);
}
.cmm-sheet-head img{width: 34px; height: 34px; object-fit: contain;}
.cmm-sheet-head b{display: block; color: var(--cmm-gold-soft); font-size: 13px; letter-spacing: .08em;}
.cmm-sheet-head small{display: block; margin-top: 1px; color: var(--cmm-muted); font-size:12px; letter-spacing: .14em; text-transform: uppercase;}
.cmm-sheet-close{
  margin-left: auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--cmm-line); border-radius: 50%;
  background: var(--cmm-panel); color: var(--cmm-gold-soft);
  font-size: 14px; cursor: pointer;
}
.cmm-sheet-nav{
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  align-content: start;
}
.cmm-sheet-nav .cmm-group{
  grid-column: 1 / -1;
  margin: 6px 2px 0;
  color: var(--cmm-muted); font-size:12px; font-weight: 900;
  letter-spacing: .17em; text-transform: uppercase;
}
.cmm-sheet-nav .cmm-group:first-child{margin-top: 0;}
.cmm-sheet-nav a{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; min-height: 74px; padding: 10px 4px;
  border: 1px solid rgba(var(--t-white-rgb,255,255,255), .06);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(var(--t-white-rgb,255,255,255),.045), rgba(var(--t-white-rgb,255,255,255),.015));
  color: var(--cmm-text); text-decoration: none;
  font-size:12px; font-weight: 750; text-align: center; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background .18s ease;
}
.cmm-sheet-nav a i, .cmm-sheet-nav a svg{font-size: 17px; color: var(--cmm-gold);}
.cmm-sheet-nav a span{max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.cmm-sheet-nav a:active{background: rgba(var(--t-gold-rgb,212,175,55), .1);}
.cmm-sheet-nav a.active{
  border-color: rgba(var(--t-gold-rgb,212,175,55), .55);
  background: linear-gradient(180deg, rgba(var(--t-gold-rgb,212,175,55),.16), rgba(var(--t-gold-rgb,212,175,55),.04));
}
.cmm-sheet-nav a.active i, .cmm-sheet-nav a.active svg{color: var(--cmm-gold-soft);}
.cmm-sheet-nav a.cmm-danger i, .cmm-sheet-nav a.cmm-danger svg{color: var(--t-error-soft, #ff98a1);}

/* [4] MEMBER DASHBOARD SHELL ADJUSTMENTS ---------------------------------- */
@media (max-width: 760px){
  /* Hide the legacy sidebar entirely on phones — the tab bar + sheet replace it.
     The .em_head brand strip becomes a compact sticky app header. */
  body.cmm-on .em_head{
    position: sticky; top: 0; left: auto;
    max-width: none; width: auto; height: auto;
    border-right: 0; box-shadow: 0 10px 26px rgba(0,0,0,.4);
  }
  body.cmm-on .em_head .h_menu,
  body.cmm-on .em_head .h_menu.show{display: none !important;}
  body.cmm-on .em_head .h_brand .hb_mob_menu{display: none !important;}
  body.cmm-on .em_head .h_brand{
    min-height: 58px; height: 58px;
    flex-direction: row; align-items: center;
    padding: 6px 14px;
    border-bottom: 1px solid var(--cmm-line);
  }
  /* main column takes full width under the app header */
  body.cmm-on .em_main{margin: 0 !important; padding: 0 12px;}
  body.cmm-on .em_main .cmz-topbar{
    position: relative; margin: 10px 0 12px; border-radius: 14px;
    border-top: 1px solid var(--cmm-line);
  }
  /* the desktop quick topnav duplicates the tab bar — keep only meta chips */
  body.cmm-on .cmz-topbar .cmz-topnav{display: none;}
  body.cmm-on .cmz-topbar{min-height: 0; padding: 8px 12px; justify-content: flex-end;}
  body.cmm-on .em_foot{margin-left: 0 !important; padding: 16px 14px calc(16px) !important;}
}

/* [5] ADMIN PANEL SHELL ADJUSTMENTS --------------------------------------- */
@media (max-width: 760px){
  body.cmm-on .cm-admin-v2 .em_head{
    position: sticky; top: 0;
    max-width: none; height: auto;
    box-shadow: 0 10px 26px rgba(0,0,0,.4);
  }
  body.cmm-on .cm-admin-v2 .em_head .eh_menu,
  body.cmm-on .cm-admin-v2 .em_head .eh_menu.show{display: none !important;}
  body.cmm-on .cm-admin-v2 .em_head .eh_brand .ehb_mob_menu{display: none !important;}
  body.cmm-on .cm-admin-v2 .em_head .eh_brand{height: 58px;}
  body.cmm-on .cm-admin-v2 .em_main{margin: 0 !important; padding: 12px 12px 0;}
  body.cmm-on .cm-admin-topbar{margin: -12px -12px 12px; border-radius: 0;}
}

/* [6] HOMEPAGE SHELL ADJUSTMENTS ------------------------------------------ */
@media (max-width: 760px){
  /* sticky compact header for guests; tab bar handles primary nav */
  body.cmm-on .cmz-v3 .v3-top{
    position: sticky; top: 0; z-index: 60; height: 58px;
  }
  body.cmm-on .cmz-v3 .v3-brand img{width: 130px; max-height: 40px;}
  body.cmm-on .cmz-v3 .v3-auth .v3-btn{min-height: 36px; padding: 0 12px; font-size:12px;}
  body.cmm-on .cmz-v3 .v3-hero{min-height: 0; padding: 26px 0 46px;}
  body.cmm-on .cmz-v4 .v3-copy{padding: 16px;}
  /* homepage sections breathe less on phones */
  body.cmm-on .v3-section{padding: 48px 0;}
  body.cmm-on .v4-story{padding: 48px 0;}
  body.cmm-on .v3-cta{padding: 52px 16px calc(52px);}
}

/* [7] GLOBAL CONTENT POLISH (cards, tables, forms, modals) ---------------- */
@media (max-width: 760px){
  /* Overflow containment: module pages ship their own embedded CSS with
     multi-column grids / wide heroes that ignore the phone viewport. Clamp
     the main column and every known module wrapper so nothing bleeds past
     the screen edge (which would break the fixed tab bar + create x-scroll). */
  body.cmm-on .em_main{overflow-x: hidden;}
  body.cmm-on :is(.pjx, .cj, .pw, .tkc, .nftc, .poolc, .shop, .adv, .stk, .asp,
    .card-center, .trade, .points, .earnings, .em_module, [class$="-center"]){
    max-width: 100% !important; overflow-x: hidden;
  }
  /* Wide embedded grids inside modules collapse to a single readable column */
  body.cmm-on :is(.pjx, .cj, .pw, .tkc, .nftc, .poolc, .shop) [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
  /* Heroes with desktop side-padding for absolute art must not push width out */
  body.cmm-on :is(.pjx, .cj, .pw) [style*="padding-right"]{padding-right: 16px !important;}
  /* Embedded ad iframes / media never exceed the column */
  body.cmm-on :is(.em_ads, .ema_cont, .pjx, .cj, .em_main) iframe,
  body.cmm-on .em_main img{max-width: 100% !important;}
  /* Uniform card feel: every module card family gets the same radius/spacing */
  body.cmm-on :is(.pjx-card, .cj-panel, .cj-stat, .queue-card, .t-panel){
    border-radius: var(--cmm-radius);
  }
  /* Tables never break the viewport: guarantee horizontal scroll wrappers */
  body.cmm-on .em_table{border-radius: 14px;}
  body.cmm-on :is(.pjx-scroll, .cj-table-wrap, .em_table){
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.cmm-on :is(.pjx-scroll, .cj-table-wrap, .em_table)::-webkit-scrollbar{display: none;}
  /* Modals become bottom sheets on phones for one-hand reach */
  body.cmm-on .em_modal{align-items: flex-end;}
  body.cmm-on .em_modal .m_main{
    max-width: none; border-radius: 20px 20px 0 0; border-bottom: 0;
    animation: cmmSheetUp .26s cubic-bezier(.32,.72,.28,1);
  }
  body.cmm-on .em_modal .m_main .mm_content{max-height: 62dvh; padding-bottom: calc(20px + var(--cmm-safe));}
  /* Comfortable touch targets on primary controls */
  body.cmm-on .em_form button[type="submit"],
  body.cmm-on :is(.pjx-btn, .jar-btn, .v3-btn, .t-btn-gold){min-height: 44px;}
  /* Long ids / hashes wrap instead of overflowing */
  body.cmm-on :is(td, code, .payout-id-list){word-break: break-word;}
  /* Fixed alert toasts sit above the tab bar */
  body.cmm-on .em_alert{bottom: calc(var(--cmm-bar-total) + 10px) !important;}
}
@keyframes cmmSheetUp{from{transform: translateY(30%); opacity: .4;} to{transform: none; opacity: 1;}}
@media (prefers-reduced-motion: reduce){
  .cmm-sheet, .cmm-scrim, .cmm-tab, .cmm-tab i{transition: none !important; animation: none !important;}
  body.cmm-on .em_modal .m_main{animation: none !important;}
}

/* [10] REORGANIZED NAVIGATION V2 ----------------------------------------- */
@media (max-width:760px){
  .cmm-sheet{max-height:88dvh;}
  .cmm-sheet-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 12px 12px;}
  .cmm-sheet-nav .cmm-group{position:sticky;top:-1px;z-index:2;margin:10px -2px 1px;padding:8px 5px 5px;background:linear-gradient(180deg,var(--cmm-panel-2) 78%,transparent);color:var(--cmm-gold-soft);font-size:12px;letter-spacing:.14em;}
  .cmm-sheet-nav .cmm-group:first-child{margin-top:0;}
  .cmm-sheet-nav a{min-height:60px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;justify-content:initial;gap:8px;padding:9px 10px;text-align:left;border-radius:12px;}
  .cmm-sheet-nav a i,.cmm-sheet-nav a svg{font-size:16px;justify-self:center;}
  .cmm-sheet-nav a span{display:block;-webkit-line-clamp:unset;line-height:1.25;}
  .cmm-tab span{font-size:11px;letter-spacing:.02em;text-transform:none;}
}
@media (max-width:390px){
  .cmm-sheet-nav{grid-template-columns:1fr;}
  .cmm-sheet-nav a{min-height:54px;}
}


.cmm-table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;}
@media(max-width:760px){
  .cmm-table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    overscroll-behavior-inline:contain;
  }
}

/* [11] PROJECT-WIDE RESPONSIVE HARDENING ----------------------------------
   Final mobile guard for legacy and newly built modules. It does not recolor
   already compliant pages; it only prevents width/overflow/layout breakage. */
@media (max-width:760px){
  body.cmm-on,
  body.cmm-on #emerel-cms,
  body.cmm-on .em_root{
    max-width:100%;
    overflow-x:clip;
  }

  body.cmm-on .em_main{
    width:100%;
    max-width:100vw;
    min-width:0;
    overflow-x:clip;
  }

  body.cmm-on .em_main > *,
  body.cmm-on .em_main :is(
    .ma_col,.ma_row,.ma_content,section,article,form,
    .box,.card,.panel,[class$="-panel"],[class$="-card"],
    [class$="-center"],[class$="-page"]
  ){
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  /* Flex/grid children are the most common cause of mobile horizontal bleed. */
  body.cmm-on .em_main :is(
    [class*="-grid"],[class$="-grid"],[class*="-row"],[class$="-row"],
    [class*="-cards"],[class$="-cards"],[class*="-stats"],[class$="-stats"],
    [class*="-actions"],[class$="-actions"]
  ) > *{
    min-width:0;
    max-width:100%;
  }

  /* Known table/history containers remain readable through local x-scroll. */
  body.cmm-on .em_main :is(
    .em_table,.history-wrap,.claim-history,.coin-table,.ops-table,
    [class*="-table-wrap"],[class$="-table-wrap"],
    [class*="-table-scroll"],[class$="-table-scroll"]
  ){
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }

  body.cmm-on .em_main :is(img,video,canvas,iframe){
    max-width:100%!important;
    height:auto;
  }

  /* Long hashes, wallet addresses, transaction IDs and provider references. */
  body.cmm-on .em_main :is(td,dd,code,pre,.mono,[class*="-hash"],[class*="-txid"],[class*="-address"]){
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Headers/toolbars should wrap rather than force a desktop width. */
  body.cmm-on .em_main :is(
    [class*="-head"],[class$="-head"],[class*="-toolbar"],[class$="-toolbar"],
    [class*="-actions"],[class$="-actions"]
  ){
    max-width:100%;
  }

  /* Fixed/sticky module helpers must clear the single approved mobile tab bar. */
  body.cmm-on .em_main :is(
    [class*="livebar"],[class*="-floating"],[class*="-sticky-action"]
  ){
    max-width:calc(100vw - 24px);
    bottom:calc(var(--cmm-bar-total) + 10px);
  }
}

@media (max-width:430px){
  body.cmm-on .em_main{padding-left:10px;padding-right:10px;}
  body.cmm-on .em_main :is(.em_form button[type="submit"],button,.btn,[class*="-btn"]){
    max-width:100%;
  }
}