/* fz-chrome-glass.css — 2026-07-06
   Ocean-glass chrome per the updated design baseline. Loaded LAST so it wins.
   Presentation only: no markup handlers/ids touched. Header keeps overflow:visible
   (avatar dropdown must not clip); a separate .topnav-fx layer clips the decoration. */

/* ══════════ A. Top header — ocean-glass shell + light line + decoration ══════════ */
html body header.top-nav {
  position: relative !important;
  overflow: visible !important;              /* avatar dropdown must not be clipped */
  border-bottom: none !important;            /* replaced by the .tnfx-line gradient */
  background:
    radial-gradient(70% 140% at 50% 0%, rgba(41,182,232,.16), transparent 62%),
    linear-gradient(180deg, rgba(14,46,61,.94) 0%, rgba(6,14,22,.95) 100%) !important;
  backdrop-filter: blur(20px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.45) !important;
  box-shadow: inset 0 1px 0 rgba(170,230,252,.18), 0 12px 34px rgba(2,8,14,.5) !important;
}
/* decoration layer: absolute, clipped to the header; content sits above it */
html body header.top-nav .topnav-fx {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit;
}
html body header.top-nav .top-nav-inner { position: relative; z-index: 1; }
/* 1px gradient light line pinned to the bottom edge */
html body header.top-nav .tnfx-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(41,182,232,.55) 30%, rgba(150,235,255,.75) 50%, rgba(41,182,232,.55) 70%, transparent 98%);
}
/* two diagonal light beams (breathing) */
html body header.top-nav .tnfx-beam {
  position: absolute; top: -30px;
  background: linear-gradient(180deg, rgba(190,235,255,.16), transparent 78%);
  transform: skewX(-14deg); filter: blur(7px);
}
html body header.top-nav .tnfx-beam-1 { left: 16%; width: 52px; height: 120px; animation: tnfxBeam 7s ease-in-out infinite; }
html body header.top-nav .tnfx-beam-2 { left: 55%; width: 32px; height: 100px; animation: tnfxBeam 9s ease-in-out infinite; }
@keyframes tnfxBeam { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* micro-bubbles removed entirely (2026-07-12, Mz): %-positioned dots land on nav
   labels at some window widths and read as stray notification badges — same
   complaint that already killed them on mobile (2026-07-06). Beams + line stay. */

/* ══════════ B. Bottom nav — floating ocean-glass dock (mobile <980) ══════════
   STYLING ONLY. CMS bn_seed content (icons/labels/targets) untouched. Center slot (nth-child(3))
   gets the gold Deposit-FAB shell; its content stays CMS (LIVE CHAT) until admin sets it to Deposit. */
@media (max-width: 979px) {
  html body .bottom-nav {
    position: fixed !important;
    left: 10px !important; right: 10px !important; top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; height: auto !important; padding: 0 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(41,182,232,.3) !important;
    background:
      radial-gradient(70% 120% at 50% 0%, rgba(41,182,232,.14), transparent 60%),
      linear-gradient(180deg, rgba(13,42,56,.92), rgba(6,14,22,.97)) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    box-shadow: inset 0 1px 0 rgba(170,230,252,.2), 0 18px 40px rgba(2,8,14,.65), 0 0 26px rgba(41,182,232,.14) !important;
    overflow: visible !important;   /* FAB pokes above the dock */
  }
  html body .bottom-nav .bnav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: end !important;
    padding: 8px 6px 9px !important;
    gap: 0 !important;
    background: none !important;
  }
  /* normal slots */
  html body .bottom-nav .bnav-item {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: flex-end !important;
    gap: 3px !important; position: relative !important;
    background: none !important; padding: 4px 0 !important;
  }
  /* label = the direct <span> (badge is a <div>, icon is <img>); NOT :last-child, because badged
     slots (PROMOS/WALLET) have the badge div after the label — that left their labels at the CMS
     default 9.5px/line-height14.25/white-space:normal while HOME/PROFILE got 10px. Target > span. */
  html body .bottom-nav .bnav-item > span {
    font-size: 10px !important; font-weight: 600 !important;
    white-space: nowrap !important; line-height: 1 !important; overflow: visible !important;
  }
  html body .bottom-nav .bnav-item .bnav-ico,
  html body .bottom-nav .bnav-item > img { width: 20px !important; height: 20px !important; object-fit: contain !important; }
  /* active pill (44x26) behind the icon — excludes the centre FAB */
  html body .bottom-nav .bnav-item.active:not(:nth-child(3))::before {
    content: ""; position: absolute; bottom: 13px; top: auto; left: 50%; transform: translateX(-50%);
    width: 44px; height: 26px; border-radius: 13px; z-index: 0;
    background: var(--fz-cyan-soft, rgba(41,182,232,.16));
    box-shadow: 0 0 14px rgba(41,182,232,.35), inset 0 1px 0 rgba(255,255,255,.1);
  }
  html body .bottom-nav .bnav-item.active:not(:nth-child(3)) > * { position: relative; z-index: 1; }
  html body .bottom-nav .bnav-item.active:not(:nth-child(3)) > span {
    color: var(--fz-cyan, #29B6E8) !important; font-weight: 800 !important;
  }
  /* centre slot = gold Deposit FAB shell (content stays CMS until admin flips bn_seed_3) */
  html body .bottom-nav .bnav-item:nth-child(3) { justify-content: flex-start !important; overflow: visible !important; }
  html body .bottom-nav .bnav-item:nth-child(3) .bnav-ico,
  html body .bottom-nav .bnav-item:nth-child(3) > img,
  html body .bottom-nav .bnav-item:nth-child(3) > span:first-child {
    width: 58px !important; height: 58px !important; margin-top: -30px !important;
    border-radius: 50% !important; padding: 15px !important; box-sizing: border-box !important;
    object-fit: contain !important; overflow: hidden !important;
    background: radial-gradient(circle at 32% 26%, var(--fz-gold-hi, #FFE9A8), var(--fz-gold, #F5C842) 48%, var(--fz-gold-deep, #C08E1A)) !important;
    color: #14110A !important;
    box-shadow: 0 0 0 5px rgba(6,15,23,.95), 0 0 0 6.5px rgba(245,200,66,.4), 0 10px 30px var(--fz-gold-glow, rgba(245,200,66,.5)), inset 0 2px 4px rgba(255,255,255,.6), inset 0 -4px 6px rgba(0,0,0,.32) !important;
  }
  /* FAB label -> gold uppercase small caption (shows CMS text until it's set to DEPOSIT) */
  html body .bottom-nav .bnav-item:nth-child(3) > span:last-child {
    margin-top: 9px !important; font-size: 9px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: .09em !important;
    color: var(--fz-gold, #F5C842) !important; text-shadow: 0 0 10px rgba(245,200,66,.5) !important;
  }
  /* keep content clear of the floating dock */
  html body { padding-bottom: 110px !important; }
}

/* ══════════ A. Header LOGIN / REGISTER -> design text buttons (neutralise CMS brush img) ══════════
   applyAuthBtn injects <img class="sc-auth-img"> (brush art with baked text) + drops data-i18n.
   CSS hides that img and renders the design text state via ::after. id/handlers untouched. 2026-07-06 */
html body #topnav-auth-out, html body header.top-nav #topnav-auth-out { gap: 8px !important; }
html body #topnav-btn-login,
html body #topnav-btn-register {
  position: relative !important;
  height: 34px !important; width: auto !important; max-width: none !important;
  min-height: 34px !important; max-height: 34px !important; /* clamp: CMS inline height:22!important + global button min-height:44 both lose to min/max */
  padding: 0 14px !important; border-radius: 10px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0 !important;                 /* hide native text / baked img text; ::after carries label */
  cursor: pointer !important; box-sizing: border-box !important;
}
html body #topnav-btn-login .sc-auth-img,
html body #topnav-btn-register .sc-auth-img,
html body #topnav-btn-login img,
html body #topnav-btn-register img { display: none !important; }
html body #topnav-btn-login::after,
html body #topnav-btn-register::after {
  font-size: 12px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important; line-height: 1 !important;
}
html body #topnav-btn-login::after  { content: "Log in"; }
html body #topnav-btn-register::after{ content: "Join now"; }
/* ghost login */
html body #topnav-btn-login {
  background: transparent !important;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
  color: var(--fz-text, #E8EAEF) !important;
}
html body #topnav-btn-login:hover { border-color: var(--fz-cyan, #29B6E8) !important; }
/* gold join-now */
html body #topnav-btn-register {
  background: var(--fz-grad-gold, linear-gradient(180deg,#FFE082 0%,#F5C842 55%,#C08E1A 100%)) !important;
  color: var(--fz-on-gold, #14110A) !important; border: none !important;
  box-shadow: var(--fz-glow-gold, 0 6px 22px -6px rgba(245,200,66,.45)) !important;
}
/* >=44px hit area (button is 34px) */
html body #topnav-btn-login::before,
html body #topnav-btn-register::before { content: ""; position: absolute; inset: -5px; }

/* ══════════ B. Bottom-dock 5-slot alignment (390px) ══════════
   Every slot same 52px column, 20px icon in a fixed box, one-line 10px label on one baseline;
   badges float (absolute); centre FAB keeps its raise but its caption sits on the label baseline. */
@media (max-width: 979px) {
  html body .bottom-nav .bnav-item {
    height: 52px !important; gap: 3px !important;
    justify-content: flex-end !important;   /* labels pinned to a common baseline */
  }
  /* fixed 26px icon box, 20px icon centred */
  html body .bottom-nav .bnav-item .bnav-ico,
  html body .bottom-nav .bnav-item > img:not(.sc-auth-img) {
    height: 20px !important; width: 20px !important; object-fit: contain !important;
    margin: 3px 0 !important; flex: 0 0 auto !important;
  }
  /* one-line 10px label */
  html body .bottom-nav .bnav-item > span:last-child {
    font-size: 10px !important; line-height: 1 !important; white-space: nowrap !important; flex: 0 0 auto !important;
  }
  /* badges float, never push the icon */
  html body .bottom-nav .bnav-item .bnav-badge {
    position: absolute !important; top: 4px !important; right: 22% !important; left: auto !important;
    margin: 0 !important; z-index: 2 !important; pointer-events: none !important;
  }
  /* centre FAB: keep the 58px raised circle, but pin its caption to the shared label baseline */
  html body .bottom-nav .bnav-item:nth-child(3) {
    height: 52px !important; justify-content: flex-end !important;
  }
  /* Structural FAB (2026-08-03): the centre grid column raises its icon IN-FLOW via a negative
     top margin — no position:absolute / left:50% / JS coordinates. The grid (repeat(5,1fr)) centres
     the column; align-items:center on the slot centres the circle; overflow:visible lets it poke up.
     It therefore stays pinned to the fixed dock on scroll/refresh and can never float into content. */
  html body .bottom-nav .bnav-item:nth-child(3) .bnav-ico,
  html body .bottom-nav .bnav-item:nth-child(3) > img:not(.sc-auth-img),
  html body .bottom-nav .bnav-item:nth-child(3) > span:first-child {
    position: static !important; top: auto !important; left: auto !important; transform: none !important;
    margin: -28px 0 0 0 !important; align-self: center !important; width: 58px !important; height: 58px !important;
  }
  html body .bottom-nav .bnav-item:nth-child(3) > span:last-child { margin: 0 0 0 0 !important; }
  /* No "Live Chat → Deposit" flash on refresh: hide the raw CMS icon (img) + label of the centre
     slot until makeFab injects the $ (which sets data-bnfix-fab="1"). Layout is preserved
     (visibility), so the slot goes blank→$ within a frame — the wrong Live-Chat content is never painted. */
  html body .bottom-nav .bnav-item:nth-child(3):not([data-bnfix-fab="1"]) > img,
  html body .bottom-nav .bnav-item:nth-child(3):not([data-bnfix-fab="1"]) .bnav-ico,
  html body .bottom-nav .bnav-item:nth-child(3):not([data-bnfix-fab="1"]) > span:last-child { visibility: hidden !important; }
}

/* override the legacy mobile-phase1 3px top-bar (.bnav-item.active::before, all !important) so the
   active state is the design cyan-soft pill BEHIND the icon, not a top bar. 2026-07-06 */
@media (max-width: 979px) {
  html body nav.bottom-nav .bnav-item.active:not(:nth-child(3))::before {
    content: "" !important; position: absolute !important;
    top: auto !important; bottom: 13px !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 44px !important; height: 26px !important; border-radius: 13px !important; z-index: 0 !important;
    background: var(--fz-cyan-soft, rgba(41,182,232,.16)) !important;
    box-shadow: 0 0 14px rgba(41,182,232,.35), inset 0 1px 0 rgba(255,255,255,.1) !important;
  }
}

/* register button is in mobile-phase5 ripple selectors -> ripple hijacks ::after (opacity:0),
   hiding the "Join now" text. Move the label to ::before (ripple only uses ::after) and clear
   the ::after text. Hit-area falls back to the 34px button. 2026-07-06 */
html body #topnav-btn-login::after,
html body #topnav-btn-register::after { content: "" !important; }
html body #topnav-btn-login::before,
html body #topnav-btn-register::before {
  position: static !important; inset: auto !important; width: auto !important; height: auto !important;
  font-weight: 800 !important; font-size: 12px !important; line-height: 1 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
  display: inline-block !important;
}
html body #topnav-btn-login::before  { content: "Log in" !important; }
html body #topnav-btn-register::before{ content: "Join now" !important; color: var(--fz-on-gold, #14110A) !important; }

/* ══════════ B2. Bottom-dock icon alignment — measured fix (not eyeballed) ══════════
   Root causes found: (a) mobile-phase1:960 scales the ACTIVE icon translateY(-1px) scale(1.05);
   (b) CMS icon PNGs have differing internal whitespace so a raw 20px img sits off-centre.
   Fix: every non-FAB icon becomes a FIXED 26px box (img IS the box) with the art contained+centred
   via padding+object-fit, margin 0; kill the active transform; unify label line-height. 2026-07-06 */
@media (max-width: 979px) {
  html body .bottom-nav .bnav-item:not(:nth-child(3)) .bnav-ico,
  html body .bottom-nav .bnav-item:not(:nth-child(3)) > img:not(.sc-auth-img) {
    width: 26px !important; height: 26px !important;
    min-width: 26px !important; min-height: 26px !important;
    padding: 3px !important; box-sizing: border-box !important;
    object-fit: contain !important; object-position: center center !important;
    margin: 0 !important; display: block !important; vertical-align: middle !important;
    flex: 0 0 26px !important; transform: none !important; filter: none !important;
  }
  /* active icon: no scale / translate / drop-shadow so its box & baseline match the rest */
  html body .bottom-nav .bnav-item.active:not(:nth-child(3)) .bnav-ico,
  html body .bottom-nav .bnav-item.active:not(:nth-child(3)) > img:not(.sc-auth-img) {
    transform: none !important; filter: none !important;
  }
  /* slot: fixed column, icon box + one-line label on a common baseline */
  html body .bottom-nav .bnav-item {
    height: 56px !important; gap: 3px !important;
    justify-content: flex-end !important; padding: 0 0 6px !important;
  }
  html body .bottom-nav .bnav-item > span:last-child {
    line-height: 1 !important; margin: 0 !important; flex: 0 0 auto !important;
    font-size: 10px !important; white-space: nowrap !important;
  }
  /* ④ FAB caption: same line-height/margin as the other four labels (same baseline) */
  html body .bottom-nav .bnav-item:nth-child(3) > span:last-child {
    line-height: 1 !important; margin: 0 !important;
  }
}

/* B3. icon center-y still varied 4.2px under flex (badge slots vs not). Decouple: anchor every
   non-FAB icon box absolutely to a fixed bottom offset -> identical y regardless of label/badge. */
@media (max-width: 979px) {
  html body .bottom-nav .bnav-item:not(:nth-child(3)) { position: relative !important; }
  html body .bottom-nav .bnav-item:not(:nth-child(3)) .bnav-ico,
  html body .bottom-nav .bnav-item:not(:nth-child(3)) > img:not(.sc-auth-img) {
    position: absolute !important; bottom: 17px !important; left: 50% !important;
    transform: translateX(-50%) !important; margin: 0 !important;
  }
}

/* ══════════ B4. Dock finishing: tighten height + vertically-centre each slot ══════════
   Prev (B2/B3): items 56px tall with justify-content:flex-end and icons absolutely anchored to
   bottom:17px → the icon+label group sat on the floor, leaving a big empty band at the top.
   Now: equal 6px top/bottom inner padding (safe-area stays on the container bottom offset only),
   each slot fills the 56px content box and CENTRES its group (icon 26 + gap 3 + label 10 = 39px →
   ~8.5px equal whitespace top & bottom). Icons go back into flow so they centre as a unit; badges
   stay absolute. FAB keeps its raised circle (absolute) and its caption is re-pinned to the shared
   label baseline. 2026-07-06 */
@media (max-width: 979px) {
  html body .bottom-nav .bnav-inner {
    height: 68px !important; box-sizing: border-box !important;   /* 56px content + 6px×2 = symmetric */
    padding: 6px !important;
    align-items: stretch !important;   /* each slot stretches to the 56px row */
  }
  /* every slot fills the 56px row and vertically-centres its group (no fixed height → no overflow) */
  html body .bottom-nav .bnav-item {
    height: 100% !important; min-height: 0 !important;
    padding: 0 !important; gap: 3px !important;
    justify-content: center !important;
  }
  /* non-FAB icons back in normal flow (were absolute bottom:17px) so the group centres together */
  html body .bottom-nav .bnav-item:not(:nth-child(3)) .bnav-ico,
  html body .bottom-nav .bnav-item:not(:nth-child(3)) > img:not(.sc-auth-img) {
    position: static !important; transform: none !important;
    margin: 0 auto !important; bottom: auto !important; left: auto !important;
  }
  /* FAB slot centres too; its circle stays absolute, caption re-pinned to the shared baseline */
  html body .bottom-nav .bnav-item:nth-child(3) { justify-content: center !important; }
  html body .bottom-nav .bnav-item:nth-child(3) .bnav-ico,
  html body .bottom-nav .bnav-item:nth-child(3) > img:not(.sc-auth-img),
  html body .bottom-nav .bnav-item:nth-child(3) > span:first-child {
    top: -30px !important;   /* raise; circle centre ≈ dock top edge (tuned by measurement) */
  }
  html body .bottom-nav .bnav-item:nth-child(3) > span:last-child {
    position: absolute !important; left: 0 !important; right: 0 !important;
    bottom: 4.5px !important; margin: 0 !important; text-align: center !important;   /* lands on the other 4 labels' baseline (its 9px line-box sits ~4px higher than the 10px ones) */
  }
}

/* ══════════ Mobile INVITE icon button (left of the bell, <980 only) ══════════
   Desktop keeps the nav INVITE text button (untouched). Click = __pfinvite.open() (auth-gated).
   Same bell spec: thin-border circle. Green gift + glow. >=44px hit area. 2026-07-06 */
html body #topnav-invite-m { display: none !important; }
@media (max-width: 979px) {
  html body #topnav-invite-m {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    position: relative !important; width: 34px !important; height: 34px !important;
    border-radius: 50% !important; padding: 0 !important; flex-shrink: 0 !important; cursor: pointer !important;
    background: rgba(7,8,13,.35) !important; border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
    color: var(--fz-green, #1ED571) !important;
  }
  html body #topnav-invite-m svg { filter: drop-shadow(0 0 6px rgba(30,213,113,.35)) !important; }
  html body #topnav-invite-m:hover { border-color: var(--fz-green, #1ED571) !important; }
  html body #topnav-invite-m::after { content: "" !important; position: absolute !important; inset: -6px !important; }
}

/* ══════════ Item 1: hide mobile hamburger (design has no <980 drawer trigger) ══════════
   Node + handler kept; desktop unchanged. Drawer-only entries relocated into Account menu. 2026-07-06 */
@media (max-width: 979px) {
  /* beat fz-home-shell.css:155 `header.top-nav #btn-open-drawer{display:inline-flex!important}` (1,1,1)
     with a higher-specificity selector (1,1,3) */
  html body header.top-nav #btn-open-drawer { display: none !important; }
}

/* ══════════ Item 2: unify the 3 header round buttons to design spec (<980) ══════════
   gift(#topnav-invite-m) / bell(#topnav-bell) / avatar(#topnav-avatar): 34px circle, 1px line-2 border,
   surface gradient, inset highlight; 16px icons (gift green+glow, bell/avatar white); >=44 hit area.
   Balance pill (999px) + logo untouched here. 2026-07-06 */
@media (max-width: 979px) {
  html body header.top-nav #topnav-invite-m,
  html body header.top-nav #topnav-bell,
  html body header.top-nav #topnav-avatar {
    width: 34px !important; height: 34px !important;
    min-width: 34px !important; max-width: 34px !important;
    min-height: 34px !important; max-height: 34px !important;   /* kill inherited min-height:44 (was making a 34x44 ellipse) */
    border-radius: 50% !important;
    padding: 0 !important; flex-shrink: 0 !important; position: relative !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
    background: linear-gradient(180deg, var(--fz-surface-2,#16333D), var(--fz-surface,#122A33)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  }
  html body header.top-nav #topnav-invite-m svg,
  html body header.top-nav #topnav-bell svg,
  html body header.top-nav #topnav-avatar svg {
    width: 16px !important; height: 16px !important;
  }
  html body header.top-nav #topnav-invite-m svg {
    color: var(--fz-green,#1ED571) !important; stroke: var(--fz-green,#1ED571) !important;
    filter: drop-shadow(0 0 6px rgba(30,213,113,.35)) !important;
  }
  html body header.top-nav #topnav-bell svg,
  html body header.top-nav #topnav-avatar svg {
    color: #fff !important; stroke: #fff !important;
  }
  /* >=44px hit area */
  html body header.top-nav #topnav-invite-m::after,
  html body header.top-nav #topnav-bell::after,
  html body header.top-nav #topnav-avatar::after {
    content: "" !important; position: absolute !important; inset: -5px !important;
  }
  /* bell badge: 17px red-gradient circle, mono 10px, -3px, 1.5px surface stroke */
  html body header.top-nav .topnav-bell-badge {
    top: -3px !important; right: -3px !important; left: auto !important;
    min-width: 17px !important; height: 17px !important; padding: 0 4px !important; border-radius: 999px !important;
    background: linear-gradient(180deg,#FF5C7C,#E0234B) !important; color: #fff !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; font-weight: 700 !important;
    line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    border: 1.5px solid var(--fz-surface,#122A33) !important; box-shadow: 0 2px 5px rgba(224,35,75,.45) !important;
  }
}

/* ══════════ APK banner RETIRED (2026-07-17, Mz) ══════════
   Replaced by header DOWNLOAD entries: #fz-topnav-download (desktop nav pill,
   fz-chrome.css) + #fz-topnav-download-m (mobile icon circle, below). */

/* Mobile APP-DOWNLOAD icon button (<980 only) — same circle spec as #topnav-invite-m,
   cyan icon + glow. Sits left of the auth group, visible logged-in AND logged-out. */
html body #fz-topnav-download-m { display: none !important; }
@media (max-width: 979px) {
  html body #fz-topnav-download-m {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    position: relative !important; width: 34px !important; height: 34px !important;
    min-width: 34px !important; max-width: 34px !important;
    min-height: 34px !important; max-height: 34px !important;
    border-radius: 50% !important; padding: 0 !important; flex-shrink: 0 !important; cursor: pointer !important;
    border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
    background: linear-gradient(180deg, var(--fz-surface-2,#16333D), var(--fz-surface,#122A33)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
    color: var(--fz-cyan, #29B6E8) !important;
  }
  html body #fz-topnav-download-m svg {
    width: 16px !important; height: 16px !important;
    color: var(--fz-cyan, #29B6E8) !important; stroke: var(--fz-cyan, #29B6E8) !important;
    filter: drop-shadow(0 0 6px rgba(41,182,232,.35)) !important;
  }
  html body #fz-topnav-download-m:hover { border-color: var(--fz-cyan, #29B6E8) !important; }
  html body #fz-topnav-download-m::after { content: "" !important; position: absolute !important; inset: -6px !important; }
}

/* ══════════ Trust ticker = design capsule, values verbatim (Mz 2026-07-17
   design-sync pass — supersedes the transparent pass from earlier today).
   Capsule: mt14 / r999 / line hairline / rgba(18,42,51,.5) / pad 7 0 / clip.
   Track: flex max-content, 22s linear loop, content duplicated x2 by
   applyMarquee -> seamless at translateX(-50%). Items pad 0 18px, gold //.
   Stray legacy child plates/hairlines (rgba(0,0,0,.4) bg + gold borders from
   an unenumerable sheet) stay killed. CMS items pipeline untouched. */
html body .bs-d-marquee,
html body #fz-home-root .bs-d-marquee {
  margin-top: 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--fz-line, rgba(255,255,255,.08)) !important;
  background: rgba(18, 42, 51, 0.5) !important;
  padding: 7px 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
html body .bs-d-marquee .bs-d-marquee-track {
  display: flex !important; align-items: center !important;
  width: max-content !important;
  gap: 0 !important; padding: 0 !important;
  animation: fz-mq-scroll 22s linear infinite !important;
}
@keyframes fz-mq-scroll { to { transform: translateX(-50%); } }
html body .bs-d-marquee .bs-d-marquee-item {
  padding: 0 18px !important;
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; text-shadow: none !important;
}
html body .bs-d-marquee .bs-d-marquee-sep {
  color: var(--fz-gold, #F5C842) !important;
  background: transparent !important; border: 0 !important;
}
html body .bs-d-marquee .bs-d-marquee-item * { background: transparent !important; border: 0 !important; }
html body .bs-d-marquee::before,
html body .bs-d-marquee::after,
html body #fz-home-root .bs-d-marquee::before,
html body #fz-home-root .bs-d-marquee::after { display: none !important; }

/* ══════════ Hero breathing room under the header (Mz 2026-07-17) ══════════
   APK banner removal left the hero card flush against the sticky header on
   desktop (mobile already has 10px from Item 4 below). */
@media (min-width: 980px) {
  html body .bs-container .hero-wrap { margin-top: 20px !important; }
}

/* ══════════ Item 4: hero carousel -> card with gutters (<980) ══════════
   Was left16/right21 asymmetric with no top/bottom margin (flush against APK banner + next section).
   Symmetric 16px side gutters + 10px top/bottom margin so the ocean bg shows around the card; r16 +
   overflow:hidden clips all 6 slides. dots/CTA are inside the wrap so their relative pos is unchanged. */
@media (max-width: 979px) {
  html body .bs-container .hero-wrap {
    margin: 10px 16px !important;
    width: auto !important; max-width: none !important; box-sizing: border-box !important;
    border-radius: 16px !important; overflow: hidden !important;
  }
  html body .bs-container .hero-wrap #hero-carousel,
  html body .bs-container .hero-wrap .hero,
  html body .bs-container .hero-wrap .hero-slide { border-radius: 16px !important; }
}

/* ══════════ Item 5: fix trust-bar marquee seamless loop ══════════
   theme-d.css keyframe was translateX(-100%) — it scrolls the ENTIRE track (both copies) off-screen,
   so the bar goes nearly blank each cycle (user saw only a tail of "LICENSED" on the right). The track
   renders 2 content copies (12 items), so a seamless loop must translate exactly -50%. Redefined here
   (loaded last, wins over theme-d.css). // separators already gold via .bs-d-marquee-sep. 2026-07-06 */
@keyframes bs-d-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* The track used flex `gap:38px` — flex gaps sit only BETWEEN children (no trailing gap after the
   last item), so the two content copies aren't symmetric and -50% doesn't align -> a blank stretch.
   Move the spacing onto each child as margin-right (applies to the last item of each copy too), so the
   two halves are identical and -50% is truly seamless. */
html body .bs-d-marquee-track { gap: 0 !important; padding: 0 !important; }
html body .bs-d-marquee-track > * { margin-right: 38px !important; margin-left: 0 !important; }

/* ══════════ Item 6: VIP progress strip — design source L253-297 (<980) ══════════
   Fix mobile: side padding 13px 16px (was 13px 0); gem locked 48x52 (defensive vs collapse);
   Deposit -> sm 34px r10 (kill inherited min-height:44 ellipse); chevron -> 30px circle (was 30x44);
   eyebrow one line (tighter letter-spacing + width priority so title isn't clipped to "VIP …"). */
@media (max-width: 979px) {
  html body #fz-home-vip { padding: 13px 16px !important; align-items: center !important; gap: 10px !important; }
  html body #fz-home-vip #home-vip-gem {
    width: 48px !important; min-width: 48px !important; max-width: 48px !important;
    height: 52px !important; min-height: 52px !important; flex-shrink: 0 !important; display: block !important;
  }
  html body #fz-home-vip [data-pf-action="deposit"] {
    height: 34px !important; min-height: 34px !important; max-height: 34px !important;
    border-radius: 10px !important; padding: 0 14px !important;
  }
  html body #fz-home-vip button[aria-label="VIP Club"] {
    width: 30px !important; min-width: 30px !important; max-width: 30px !important;
    height: 30px !important; min-height: 30px !important; max-height: 30px !important;
  }
  html body #home-vip-cur-name { font-size: 10px !important; letter-spacing: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; }
  html body #home-vip-amounts { flex: 0 0 auto !important; font-size: 10px !important; }
}

/* ══════════ Mobile header logo left-align (<980) ══════════
   Bug: legacy stanley-header.css / mobile-phase1.css carry `.top-nav > div:last-child`
   / `:last-of-type` rules (meant for the old RIGHT cluster) that now also match
   .top-nav-inner (it is the header's last child), giving it display:flex + margin-left:auto.
   The auto margin shoved the whole inner row ~71px right, so the logo floated at ~83px
   instead of the design's flush 16px. The hamburger is already display:none (no placeholder).
   Fix: on mobile make .top-nav-inner a full-width space-between row with a clean 16px gutter
   and no auto margin → logo flush-left 16px, right cluster hugs 16px from the right. Applies
   to logged-in AND logged-out (the LOG IN/JOIN NOW cluster is the same last child). id/handlers
   untouched; logo stays a 24px img (<=32, no clip), click-to-home unchanged. 2026-07-06 */
@media (max-width: 979px) {
  html body header.top-nav { padding-left: 0 !important; padding-right: 0 !important; }
  html body header.top-nav .top-nav-inner {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important; margin: 0 !important;
    padding: 0 16px !important; box-sizing: border-box !important;
    flex: 1 1 auto !important;
  }
  html body header.top-nav .top-nav-inner .brand-wrap { margin: 0 !important; }
}

/* ══════════ Desktop header right-side kit — design L136-167 (2026-07-11, >=980) ══════════
   The 34px unified kit existed ONLY in the <980 mobile-polish block above; desktop never got
   it, so the bell rendered as a bare icon and the unread badge (position:absolute) anchored
   to the header instead of the button — floating in mid-air. This block is the single
   authoritative desktop spec (this file loads last). Values copied verbatim from the design
   prototype. All click handlers / data untouched. */
@media (min-width: 980px) {
  /* right group: one 34px-high row, vertically centred (design L148) */
  html body header.top-nav #topnav-auth-in { display: flex; align-items: center !important; gap: 8px !important; }
  html body header.top-nav #topnav-auth-in.hidden { display: none; }

  /* ── bell = 34px round tile (design L149) ── */
  html body header.top-nav #topnav-bell {
    position: relative !important;
    width: 34px !important; height: 34px !important;
    min-width: 34px !important; max-width: 34px !important;
    min-height: 34px !important; max-height: 34px !important;
    padding: 0 !important; flex-shrink: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
    background: linear-gradient(180deg, var(--fz-surface-2,#16333D), var(--fz-surface,#122A33)) !important;
    color: var(--fz-text, #E8EAEF) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
    cursor: pointer;
  }
  html body header.top-nav #topnav-bell svg { width: 16px !important; height: 16px !important; color: var(--fz-text,#E8EAEF) !important; stroke: var(--fz-text,#E8EAEF) !important; }
  html body header.top-nav #topnav-bell:hover {
    border-color: var(--fz-cyan,#29B6E8) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 14px rgba(41,182,232,.3) !important;
  }
  /* badge pinned to the tile's corner (design L152) */
  html body header.top-nav .topnav-bell-badge {
    position: absolute !important;
    top: -3px !important; right: -3px !important; left: auto !important; bottom: auto !important;
    min-width: 17px !important; height: 17px !important; padding: 0 4px !important; box-sizing: border-box !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #ff5b6a, #e0313f) !important;
    border: 1.5px solid #07080d !important;
    color: #fff !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 0 8px rgba(224,49,63,.6) !important;
  }

  /* ── balance pill (design L155-160) ── */
  html body header.top-nav .topnav-balance {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    height: 34px !important; box-sizing: border-box !important;
    padding: 7px 12px !important; border-radius: 999px !important;
    border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
    background: linear-gradient(180deg, var(--fz-surface-2,#16333D), var(--fz-surface,#122A33)) !important;
    color: var(--fz-text,#E8EAEF) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
    cursor: pointer;
  }
  html body header.top-nav .topnav-balance > svg { width: 15px !important; height: 15px !important; color: var(--fz-gold,#F5C842) !important; }
  html body header.top-nav #topnav-balance-amt {
    font-family: var(--fz-font-mono,'JetBrains Mono',monospace) !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: var(--fz-white,#fff) !important; font-variant-numeric: tabular-nums !important;
  }
  html body header.top-nav .topnav-balance-unit { display: inline !important; font-size: 10px !important; font-weight: 700 !important; color: var(--fz-text-3,#6E7B88) !important; opacity: 1 !important; }
  html body header.top-nav .topnav-balance:hover {
    border-color: var(--fz-gold,#F5C842) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 16px rgba(245,200,66,.25) !important;
  }

  /* ── deposit + invite: kit height (global `button` min-height:44 would stretch them) ── */
  html body header.top-nav #fz-topnav-deposit { height: 34px !important; min-height: 0 !important; border-radius: 10px !important; box-sizing: border-box !important; }
  html body header.top-nav #fz-topnav-invite { height: 34px !important; min-height: 0 !important; box-sizing: border-box !important; }
  html body header.top-nav #fz-topnav-download { height: 34px !important; min-height: 0 !important; box-sizing: border-box !important; }

  /* ── avatar = 34px initials disc (design L165) ── */
  html body header.top-nav #topnav-avatar {
    width: 34px !important; height: 34px !important;
    min-width: 34px !important; max-width: 34px !important;
    min-height: 34px !important; max-height: 34px !important;
    padding: 0 !important; flex-shrink: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
    background: linear-gradient(135deg, var(--fz-teal,#0E4D54), var(--fz-navy-2,#0A1822)) !important;
    color: var(--fz-cyan,#29B6E8) !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  html body header.top-nav #topnav-avatar:hover {
    border-color: var(--fz-cyan,#29B6E8) !important;
    box-shadow: 0 0 14px rgba(41,182,232,.35) !important;
  }
}
/* JS hides the badge with inline display:none (0 unread) — but mobile-phase1.css forces
   `display:flex !important`, which beats inline styles, so a red "0" floated permanently.
   Attribute-selector kill-switch (this file loads last, higher specificity) restores hiding
   at EVERY width. Badge writers (app.js / notifications-v2.js) unchanged. */
html body header.top-nav .topnav-bell-badge[style*="display: none"],
html body header.top-nav .topnav-bell-badge[style*="display:none"],
html body .topnav-bell-badge[style*="display: none"],
html body .topnav-bell-badge[style*="display:none"] { display: none !important; }

/* ══════════ MOBILE (<980): PERSISTENT TOP NAV + design header kit — 2026-07-17 ══════════
   Design ?mobile=1: the glass header stays on screen on every page-form screen.
   1) header = sticky, z70: above page containers (z45), below sheets/masks
      (deposit/withdraw z9000 keep masking it — do NOT regress those).
   2) kit (design final): NO logo; right row gap 8, all 34px — invite gift circle ·
      App pill (cyan) · bell · balance (mono, no AUD word) · avatar. 12px gutters.
   3) page-form screens start at top:60px (= header band) instead of inset:0.
      Wallet already converted (fz-wallet.css); this covers Promotions / Account /
      Complaints / TxHistory / Minigames. Handlers/IDs untouched. */
@media (max-width: 979px) {
  /* 1 · header pinned */
  html body header.top-nav {
    position: sticky !important; top: 0 !important;
    z-index: 70 !important;
    padding: 13px 12px !important;         /* 34px kit + 13/13 = 60px band */
    min-height: 60px !important; box-sizing: border-box !important;
  }
  /* 2 · content: logo retired (design final) — kit right-aligned */
  html body header.top-nav .brand-wrap { display: none !important; }
  html body header.top-nav .top-nav-inner > .flex.items-center.gap-2 { margin-left: auto !important; gap: 8px !important; }
  html body header.top-nav #topnav-auth-in { gap: 8px !important; }
  /* App entry = the cyan pill (same node as desktop); round -m icon retired */
  html body #fz-topnav-download-m { display: none !important; }
  html body header.top-nav #fz-topnav-download { display: inline-flex !important; }
  /* balance pill shows the number only on phone */
  html body header.top-nav .topnav-balance-unit { display: none !important; }

  /* 3 · page-form screens below the header; z45 keeps dock (z50) + header (z70) live */
  html body #modal-promo.pm-v2.modal-backdrop,
  html body #modal-complaints.modal-backdrop,
  html body #modal-history.modal-backdrop {
    inset: 60px 0 0 0 !important;
    z-index: 45 !important;
  }
  html body #fz-minigames-page {
    top: 60px !important;
    z-index: 45 !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; /* clear the dock */
  }
  html body #modal-promo.pm-v2 .pm-page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  html body #modal-complaints .modal,
  html body #modal-history .modal { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

  /* 3b · Account: phone sheet -> PAGE (same recipe as Wallet/desktop-Account) */
  html body #modal-profile.modal-backdrop {
    position: fixed !important;
    inset: 60px 0 0 0 !important;
    background: transparent !important;
    padding: 0 !important;
    align-items: initial !important;
    justify-content: initial !important;
  }
  html body #modal-profile.modal-backdrop.show {
    display: block !important;
    z-index: 45 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    animation: none !important;
  }
  body:has(#modal-profile.modal-backdrop.show) { overflow: hidden !important; }
  body:has(#modal-profile.modal-backdrop.show) #apk-banner,
  body:has(#modal-profile.modal-backdrop.show) .bs-container { visibility: hidden !important; }
  html body #modal-profile .pf-v4 {
    max-width: 560px !important; width: 100% !important; margin: 0 auto !important;
    height: auto !important; min-height: 100% !important; max-height: none !important;
    background: transparent !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important; transform: none !important; animation: none !important;
  }
  html body #modal-profile .pf3-close { display: none !important; }
  html body #modal-profile .pf3-grip { display: none !important; }
  html body #modal-profile .pf3-return-row { display: flex !important; margin: 2px 0 14px !important; }
  html body #modal-profile.modal-backdrop .modal::before { display: none !important; content: none !important; }
}

/* phone kit: pill + balance clamped to the 34px row (global button min-height:44
   and the pill's own padding were stretching them to 44/36) */
@media (max-width: 979px) {
  html body header.top-nav #fz-topnav-download {
    height: 34px !important; min-height: 34px !important; max-height: 34px !important;
    box-sizing: border-box !important; padding: 0 13px !important;
  }
  html body header.top-nav .topnav-balance {
    height: 34px !important; min-height: 34px !important; max-height: 34px !important;
    box-sizing: border-box !important; padding: 0 12px !important;
    display: inline-flex !important; align-items: center !important;
  }
}

/* TxHistory: finish the page-form conversion (<980) — backdrop got inset:60px in the
   persistent-header pass but the inner .modal still bottom-sheeted (flex-end). Top-anchor
   it as a plain column like the other page screens. Handlers untouched. */
@media (max-width: 979px) {
  html body #modal-history.modal-backdrop.show {
    display: block !important;
    overflow-y: auto !important; overflow-x: hidden !important;
  }
  html body #modal-history .modal {
    max-width: 560px !important; width: 100% !important;
    margin: 0 auto !important;
    max-height: none !important;
    border-radius: 0 !important; border: none !important; box-shadow: none !important;
    animation: none !important; transform: none !important;
  }
  html body #modal-history.modal-backdrop .modal::before { display: none !important; content: none !important; }
}