/* ============================================================================
   FRENZY96 — Deep-Sea Redesign · APP CHROME  (fz-chrome.css)
   ----------------------------------------------------------------------------
   Phase 1 — RESKIN ONLY. Top nav + bottom nav keep their existing markup,
   items and event wiring (Menu/Wallet/Promos/LiveChat/Account). This file only
   restyles colour / type / shape / active-state to the deep-sea theme.
   Nav RESTRUCTURE (center gold Deposit FAB, item reorder, desktop links) is a
   separate later phase.

   Loaded last → wins by source order. No !important EXCEPT where the base rule
   in mobile-phase1.css is itself !important (you can only beat !important with
   !important); those are surgical, single-property, and commented.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   TOP NAV (desktop + mobile header) — not !important-driven, overrides cleanly
   ══════════════════════════════════════════════════════════════════════════ */
/* stanley-header.css + mobile-phase1.css set .top-nav background/border with
   !important (hard-coded hex). Matched !important is the only legal override —
   surgical, not a pile-up. */
header.top-nav {
  background: linear-gradient(180deg, var(--fz-teal-deep) 0%, var(--fz-navy) 100%) !important;
  border-bottom: 1px solid var(--fz-teal-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 18px -12px rgba(0, 0, 0, 0.8);
}

/* Hamburger — deep surface tile with cyan-tinted icon */
header.top-nav .hamburger,
header.top-nav #btn-open-drawer {
  background: linear-gradient(135deg, var(--fz-surface-2), var(--fz-surface));
  border: 1px solid var(--fz-line-2);
  color: var(--fz-cyan);
  border-radius: var(--fz-r-md);
  min-width: 44px;   /* §6.6 tap target — was 32px wide on mobile */
  min-height: 44px;
}

/* ── Auth pills (logged-out) ─────────────────────────────────────────────── */
.topnav-btn-login,
.topnav-btn-register {
  font-family: var(--fz-font-body);
  font-weight: var(--fz-w-bold);
  border-radius: var(--fz-r-full);          /* pill */
  letter-spacing: var(--fz-track-wide);
  padding: 7px 16px;
  transition: transform var(--fz-dur-fast) var(--fz-ease-out),
              box-shadow var(--fz-dur-fast) var(--fz-ease-out),
              background var(--fz-dur-fast) var(--fz-ease-out);
}
.topnav-btn-login {
  background: transparent;
  color: var(--fz-gold);
  border: 1px solid var(--fz-gold-deep);
}
.topnav-btn-login:hover {
  background: var(--fz-gold-soft);
  border-color: var(--fz-gold);
}
/* Register = primary gold CTA with the casino "pop" glow */
.topnav-btn-register {
  background: var(--fz-grad-gold);
  color: var(--fz-on-gold);
  border: none;
  box-shadow: var(--fz-glow-gold);
}
.topnav-btn-register:hover {
  transform: translateY(-1px);
  box-shadow: var(--fz-glow-gold-hover);
}

/* ── Wallet balance pill (logged-in) — gradient surface + mono money + faint AUD */
.topnav-balance {
  background: var(--fz-grad-surface);
  border: 1px solid var(--fz-line-2);
  border-radius: var(--fz-r-full);
  color: var(--fz-text);
  padding: 6px 12px;
  gap: 7px;
  box-shadow: var(--fz-shadow-sm);
}
.topnav-balance > svg { color: var(--fz-gold); }         /* wallet glyph = money gold */
#topnav-balance-amt {
  font-family: var(--fz-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fz-w-semibold);
  letter-spacing: var(--fz-track-tight);
  color: var(--fz-text);
}
.topnav-balance-unit {
  color: var(--fz-text-3);
  font-weight: var(--fz-w-semibold);
  letter-spacing: var(--fz-track-eyebrow);
}

/* ── Bell + avatar — circular deep tiles; avatar carries the cyan accent ──── */
.topnav-bell {
  background: var(--fz-surface);
  border: 1px solid var(--fz-line);
  color: var(--fz-text-2);
  border-radius: var(--fz-r-full);
}
.topnav-bell:hover { background: var(--fz-surface-2); color: var(--fz-cyan); }
.topnav-avatar {
  background: linear-gradient(135deg, var(--fz-cyan) 0%, var(--fz-cyan-deep) 100%);
  color: var(--fz-on-cyan);
  border: 1px solid var(--fz-cyan-deep);
  box-shadow: var(--fz-glow-cyan);
}
.topnav-avatar:hover {
  background: linear-gradient(135deg, var(--fz-cyan-bright) 0%, var(--fz-cyan) 100%);
  color: var(--fz-on-cyan);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM NAV (mobile) — already deep-sea (teal bg + cyan active) in
   mobile-phase1.css. Light touch only: dim the INACTIVE labels to the muted
   token so the cyan active item reads as the clear focus (handoff §6.2).
   The base rule sets colour with !important, so this single override matches
   it surgically — this is NOT an !important pile-up, it is the only legal way
   to beat an existing !important on one property.
   ══════════════════════════════════════════════════════════════════════════ */
nav.bottom-nav .bnav-item:not(.active) {
  color: var(--fz-text-3) !important;   /* was #FFFEFC near-white → muted for hierarchy */
}
nav.bottom-nav .bnav-item:not(.active):hover {
  color: var(--fz-cyan) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 2 · HEADER TRANSPLANT (design prototype L121-152)
   topnav-3section.css locks link styles with !important → matched 1:1.
   ══════════════════════════════════════════════════════════════════════════ */
header.top-nav {
  background: rgba(7, 8, 13, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(41, 182, 232, 0.14) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* brand img has inline min-width:150px but stanley squeezes .brand-wrap to ~100px
   → the img overflows its box and covers the first nav link. Make the box fit. */
.top-nav .brand-wrap { min-width: 158px !important; }
/* topnav-3section centers .top-nav-extra; with 7 items the content is wider than
   the flex slot and centered overflow SPILLS LEFT over the logo. Left-align and
   let it scroll instead (matched !important). */
.top-nav .top-nav-extra {
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.top-nav .top-nav-extra::-webkit-scrollbar { display: none; }

/* 6 desktop nav items — uppercase 12/700, cyan active (matched !important) */
.top-nav .top-nav-extra a {
  font-family: var(--fz-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fz-text-2) !important;
  padding: 8px 12px !important;
  border-radius: 8px;
  cursor: pointer;
}
.top-nav .top-nav-extra a:hover {
  color: var(--fz-white) !important;
  background: var(--fz-surface);
}
.top-nav .top-nav-extra a.active {
  color: var(--fz-cyan) !important;
  background: none;
}
/* INVITE green pill (→ existing __pfinvite) */
#fz-topnav-invite {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; cursor: pointer;
  font-family: var(--fz-font-body); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 7px 13px; border-radius: 9px;
  color: var(--fz-green); background: var(--fz-green-soft);
  border: 1px solid rgba(30, 213, 113, 0.4);
  box-shadow: 0 0 12px rgba(30, 213, 113, 0.18);
  white-space: nowrap;
}
#fz-topnav-invite:hover {
  color: var(--fz-on-green);
  background: linear-gradient(180deg, var(--fz-green), var(--fz-green-deep));
  box-shadow: 0 0 16px rgba(30, 213, 113, 0.4);
}
/* App download pill — design spec (left of bell, r999 cyan-soft; APK banner
   retired 2026-07-17, CMS apk.url still drives the click target) */
#fz-topnav-download {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px; border-radius: 999px;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  font-family: var(--fz-font-body); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fz-cyan); background: var(--fz-cyan-soft);
  border: 1px solid rgba(41, 182, 232, 0.4);
  box-shadow: 0 0 12px rgba(41, 182, 232, 0.15);
}
#fz-topnav-download svg { width: 14px; height: 14px; }
#fz-topnav-download:hover {
  background: var(--fz-grad-cyan);
  color: var(--fz-on-cyan);
  box-shadow: 0 0 16px rgba(41, 182, 232, 0.4);
}
/* gold DEPOSIT (desktop only, → existing [data-pf-action=deposit] channel) */
#fz-topnav-deposit {
  height: 34px; padding: 0 16px; border: none; border-radius: 10px; cursor: pointer;
  font-family: var(--fz-font-body); font-size: 12px; font-weight: 800;
  background: var(--fz-grad-gold); color: var(--fz-on-gold);
  box-shadow: var(--fz-glow-gold); white-space: nowrap; flex-shrink: 0;
}
#fz-topnav-deposit:hover { box-shadow: var(--fz-glow-gold-hover); }
@media (max-width: 979px) { #fz-topnav-invite, #fz-topnav-deposit { display: none; } } /* App pill shows on phone since 2026-07-17 (glass) */

/* VIP/turnover chip (approved ②a — JS-created #topnav-vip-chip, CSS-only reskin) */
.topnav-vip-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface)) !important;
  border: 1px solid rgba(245, 200, 66, 0.35) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.topnav-vip-chip #tvc-pct {
  font-family: var(--fz-font-mono); font-size: 11px; font-weight: 700;
  color: var(--fz-gold); font-variant-numeric: tabular-nums;
}
.topnav-vip-chip .topnav-vip-chip-bar { background: var(--fz-navy) !important; border-radius: 3px; overflow: hidden; }
.topnav-vip-chip .topnav-vip-chip-bar-fill { background: linear-gradient(90deg, var(--fz-gold-deep), var(--fz-gold)) !important; }

/* Desktop metrics = design spec verbatim (Mz 2026-07-17 sync pass). The old
   "compact" narrowing (11px/8x6) predates the App pill moving into the right
   group — 4 nav links + INVITE now fit at full design metrics. */
@media (min-width: 980px) {
  header.top-nav { gap: 6px !important; }
  .top-nav .top-nav-extra { gap: 2px !important; }
  .top-nav .top-nav-extra a { padding: 8px 12px !important; font-size: 12px !important; letter-spacing: 0.06em; }
  #fz-topnav-invite { padding: 7px 13px; font-size: 12px; margin-left: 6px; }
  #fz-topnav-deposit { padding: 0 14px; font-size: 12px; }
}

/* ══ PIXEL-CONVERGENCE PASS (2026-07-04) — header density per design ═══════ */
@media (min-width: 980px) {
  /* ② drawer entry is a mobile affordance — hide the hamburger on desktop */
  header.top-nav .hamburger,
  header.top-nav #btn-open-drawer { display: none !important; }

  /* ③ right group at design metrics: 34px circles/pills, 8px gaps (L134-151) */
  .top-nav > .flex.items-center.gap-2 { gap: 8px !important; }
  .topnav-bell, .topnav-avatar { width: 34px !important; height: 34px !important; }
  .topnav-balance { height: 34px !important; padding: 0 12px !important; gap: 7px; }
  #fz-topnav-deposit { height: 34px; padding: 0 14px; }
  .topnav-vip-chip { height: 34px; box-sizing: border-box; }

  /* ③ INVITE de-noised: ghost pill (green text/border, no fill, no glow) */
  #fz-topnav-invite {
    background: transparent;
    box-shadow: none;
    border-color: rgba(30, 213, 113, 0.35);
  }
  #fz-topnav-invite:hover {
    background: var(--fz-green-soft);
    color: var(--fz-green);
    box-shadow: none;
  }
}