/* ============================================================================
   FRENZY96 — Deep-Sea Redesign · WALLET  (fz-wallet.css)
   ----------------------------------------------------------------------------
   Reskin of the wallet modal (#modal-wallet .wv, built by wallet-v2.js).
   PURE UI. Balance/turnover/txns are appearance-only; deposit/withdraw/refresh/
   view-all use existing callbacks; game tickets + in-game wallet kept (reskinned,
   not removed). Local --w-* tokens (declared on .wv) remapped to deep-sea.
   Loaded last → wins by source order.
   ============================================================================ */

/* ── 1 · Local token remap + fzw aliases used by wallet-v2.js txn colours ─── */
#modal-wallet .wv {
  --w-bg: var(--fz-navy-deep);
  --w-surface: var(--fz-surface);
  --w-surface2: var(--fz-surface-2);
  --w-border: var(--fz-line);
  --w-border2: var(--fz-line-2);
  --w-text: var(--fz-white);
  --w-text2: var(--fz-text);
  --w-text3: var(--fz-text-2);
  --w-text4: var(--fz-text-3);
  --w-muted: var(--fz-text-3);
  --w-dim: var(--fz-text-3);
  --w-gold: var(--fz-gold);
  --w-green: var(--fz-green);
  --w-green-dep: var(--fz-green-deep);
  --w-blue: var(--fz-cyan);
  --w-purple: var(--fz-cyan-deep);
  --fzw-gold: var(--fz-gold);
  --fzw-green: var(--fz-green);
  background: var(--fz-navy-deep);
}

/* ── 2 · Balance card — deep-sea glass ───────────────────────────────────── */
#modal-wallet .wv-bal {
  position: relative;
  margin: 14px 16px 4px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(96, 206, 238, 0.32);
  background: linear-gradient(158deg, rgba(16, 52, 66, 0.86) 0%, rgba(8, 24, 35, 0.93) 55%, rgba(6, 18, 27, 0.96) 100%);
  /* iOS-crash fix (2026-07-15): blur(22px) backdrop-filter crashed Safari in the scrolling
     full-page wallet. Removed; opaque gradient keeps the glass look. */
  box-shadow:
    inset 0 1px 0 rgba(190, 240, 255, 0.22),
    inset 0 -30px 60px rgba(4, 14, 22, 0.5),
    0 24px 60px rgba(2, 12, 22, 0.6),
    0 0 70px rgba(41, 182, 232, 0.14);
  overflow: hidden;
}
/* layer 1 caustic + layer 2 top highlight line */
#modal-wallet .wv-bal::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 55% at 30% 0%, rgba(96, 220, 255, 0.22), transparent 70%),
    linear-gradient(90deg, transparent, rgba(150, 235, 255, 0.6), transparent) top / 100% 1px no-repeat;
}
/* layer 3 floating bubbles */
#modal-wallet .wv-bal::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 38%, rgba(41, 182, 232, 0.2) 44%, transparent 46%),
    radial-gradient(circle, rgba(150, 235, 255, 0.55) 40%, transparent 44%),
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 40%, transparent 44%);
  background-size: 7px 7px, 5px 5px, 4px 4px;
  background-position: 78% 68%, 60% 82%, 88% 40%;
  background-repeat: no-repeat;
  animation: fzw-bubbles 7s var(--fz-ease-in-out) infinite;
}
@keyframes fzw-bubbles { 0% { transform: translateY(8px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
#modal-wallet .wv-bal > * { position: relative; z-index: 1; }

#modal-wallet .wv-bal-lbl { color: var(--fz-text-3); letter-spacing: var(--fz-track-caps); }
#modal-wallet .wv-bal-num { font-family: var(--fz-font-mono); color: var(--fz-white); letter-spacing: var(--fz-track-tight); }
#modal-wallet .wv-bal-sub { color: var(--fz-text-3); }
#modal-wallet .wv-refresh { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--fz-line-2); color: var(--fz-cyan); border-radius: var(--fz-r-md); }
#modal-wallet .wv-refresh:hover { background: var(--fz-cyan-soft); }

/* sub badges */
#modal-wallet .wv-sub { background: rgba(6, 20, 28, 0.5); border: 1px solid var(--fz-line); border-radius: var(--fz-r-md); }
#modal-wallet .wv-sub-lbl { color: var(--fz-text-3); }

/* ── 3 · Actions — Deposit gold / Withdraw dark ──────────────────────────── */
#modal-wallet .wv-act.dep { background: var(--fz-grad-gold); color: var(--fz-on-gold); box-shadow: var(--fz-glow-gold); }
#modal-wallet .wv-act.wd { background: var(--fz-surface); border: 1px solid var(--fz-line-2); color: var(--fz-text); }

/* ── 4 · Existing quick / tickets / in-game — reskinned (kept, not removed) ─ */
#modal-wallet .wv-qi { background: rgba(6, 20, 28, 0.5); border: 1px solid var(--fz-line); border-radius: var(--fz-r-md); }
#modal-wallet .wv-tix-h-l { color: var(--fz-text-3); letter-spacing: var(--fz-track-caps); }
#modal-wallet .wv-tix-h-r { color: var(--fz-cyan); }
#modal-wallet .wv-trow { background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface)); border: 1px solid var(--fz-line); border-radius: var(--fz-r-lg); }
#modal-wallet .wv-tico { border-radius: var(--fz-r-md); }
#modal-wallet .wv-ig { background: linear-gradient(135deg, var(--fz-teal-2), var(--fz-navy)); border: 1px solid var(--fz-teal-line); border-radius: var(--fz-r-lg); }
#modal-wallet .wv-ig-ico { background: var(--fz-cyan-soft); border: 1px solid var(--fz-teal-line); border-radius: var(--fz-r-md); }
#modal-wallet .wv-ig-lbl { color: var(--fz-text-3); }
#modal-wallet .wv-ig-val { font-family: var(--fz-font-mono); color: var(--fz-white); }
#modal-wallet .wv-ig-btn { background: var(--fz-cyan-soft); border: 1px solid var(--fz-cyan); color: var(--fz-cyan); border-radius: var(--fz-r-md); }
#modal-wallet .wv-ig-btn:disabled { opacity: .4; }
#modal-wallet .wv-tip { color: var(--fz-text-3); }

/* ── 5 · Turnover progress card (new) ────────────────────────────────────── */
#modal-wallet .wv-turn {
  margin: 12px 16px 0;
  padding: 14px;
  background: rgba(8, 28, 38, 0.62);
  /* iOS-crash fix (2026-07-15): removed backdrop-filter blur (Safari GPU crash in scroll). */
  border: 1px solid rgba(96, 206, 238, 0.2);
  border-radius: var(--fz-r-lg);
}
#modal-wallet .wv-turn-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
#modal-wallet .wv-turn-lbl { font-size: var(--fz-text-xs); font-weight: var(--fz-w-bold); text-transform: uppercase; letter-spacing: var(--fz-track-caps); color: var(--fz-text-3); }
#modal-wallet .wv-turn-val { font-family: var(--fz-font-mono); font-size: var(--fz-text-sm); font-weight: var(--fz-w-bold); color: var(--fz-text); }
#modal-wallet .wv-turn-track { height: 6px; border-radius: var(--fz-r-full); background: rgba(4, 16, 24, 0.7); overflow: hidden; }
#modal-wallet .wv-turn-fill { height: 100%; border-radius: var(--fz-r-full); background: linear-gradient(90deg, var(--fz-cyan-deep), var(--fz-cyan)); box-shadow: 0 0 12px rgba(41, 182, 232, 0.55); }
#modal-wallet .wv-turn-go { margin-top: 8px; font-size: var(--fz-text-xs); color: var(--fz-text-2); }

/* ── 6 · Recent transactions (new) ───────────────────────────────────────── */
#modal-wallet .wv-tx { padding: 16px; }
#modal-wallet .wv-tx-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#modal-wallet .wv-tx-h-l { font-size: var(--fz-text-xs); font-weight: var(--fz-w-bold); text-transform: uppercase; letter-spacing: var(--fz-track-caps); color: var(--fz-text-3); }
#modal-wallet .wv-tx-h-r { font-size: var(--fz-text-xs); font-weight: var(--fz-w-bold); color: var(--fz-cyan); cursor: pointer; }
#modal-wallet .wv-txrow {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin-bottom: 8px;
  background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface));
  border: 1px solid var(--fz-line); border-radius: 11px;
}
#modal-wallet .wv-txrow:last-child { margin-bottom: 0; }
#modal-wallet .wv-txico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#modal-wallet .wv-txico svg { width: 18px; height: 18px; }
#modal-wallet .wv-txmid { flex: 1; min-width: 0; }
#modal-wallet .wv-txlbl { font-size: 13px; font-weight: var(--fz-w-semibold); color: var(--fz-white); }
#modal-wallet .wv-txsub { font-size: var(--fz-text-xs); color: var(--fz-text-3); margin-top: 1px; }
#modal-wallet .wv-txamt { font-family: var(--fz-font-mono); font-size: 13px; font-weight: var(--fz-w-bold); font-variant-numeric: tabular-nums; flex-shrink: 0; }
#modal-wallet .wv-txempty { text-align: center; padding: 18px; font-size: var(--fz-text-sm); color: var(--fz-text-3); background: rgba(6, 20, 28, 0.4); border: 1px dashed var(--fz-line-2); border-radius: 11px; }

/* ══ PARITY (2026-07-05, side-by-side vs STANDALONE) ══════════════════════════
   Panel shell: design has NO gold — underwater gradient + cyan hairline + r18.
   The .modal panel carried a gold border + gold glow (overriding wv-v2 inline
   border:none). Override scoped to the wallet modal only. */
#modal-wallet .modal {
  border: 1px solid rgba(41, 182, 232, 0.30) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(2, 12, 22, 0.6), 0 0 60px rgba(41, 182, 232, 0.10) !important;
  overflow: hidden !important;
}
/* underwater gradient body (was flat navy-deep) */
#modal-wallet .wv {
  background: linear-gradient(158deg, rgba(16,52,66,0.90) 0%, rgba(8,24,35,0.94) 55%, rgba(6,18,27,0.96) 100%) !important;
}
/* Title = design display: Oswald, uppercase, tracked (was Inter 15/none) */
#modal-wallet .wv-title {
  font-family: var(--fz-font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--fz-track-caps, 0.04em) !important;
  color: var(--fz-white) !important;
}

/* ══════════ Wallet = FULL-PAGE form on desktop (≥980); mobile <980 keeps the sheet ══════════
   Same verified recipe as Account (fz-profile.css) / Promotions. Presentation-only:
   #modal-wallet show/hide + data-w handlers + id all untouched. 2026-07-11.
   Kills the dim backdrop + the double panel shell (gold/cyan frame) — content sits in a
   plain 560 column over the SAME body ocean bg; page scroll locked, only the column scrolls. */
@media (min-width: 980px) {
  html body #modal-wallet.modal-backdrop {
    position: fixed !important;
    inset: 64px 0 0 0 !important;
    background: transparent !important;      /* no dim mask */
    padding: 0 !important;
    align-items: initial !important;         /* undo wallet-v2.css bottom-sheet flex-end */
    justify-content: initial !important;
  }
  html body #modal-wallet.modal-backdrop.show {
    display: block !important;               /* not flex-center */
    z-index: 200 !important;
    background: transparent !important;      /* share home's fixed ocean bg */
    overflow-y: auto !important;             /* scrollbar hugs the viewport right edge */
    overflow-x: hidden !important;
  }
  /* lock page scroll + hide the home foreground (APK banner + page content) — ocean bg stays */
  body:has(#modal-wallet.modal-backdrop.show) { overflow: hidden !important; }
  body:has(#modal-wallet.modal-backdrop.show) #apk-banner,
  body:has(#modal-wallet.modal-backdrop.show) .bs-container { visibility: hidden !important; }
  /* neutralize BOTH shells → plain 560 content column, no frame/glass/shadow/slide */
  html body #modal-wallet .modal {
    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: 24px 16px !important;
    animation: none !important;
  }
  html body #modal-wallet .wv {
    background: transparent !important;
    border-radius: 0 !important;
    max-height: none !important;
    animation: none !important;
  }
  /* header: back-chevron in, floating X + drag grip out */
  #modal-wallet .wv-top { justify-content: flex-start !important; align-items: center !important; padding: 0 0 4px !important; }
  #modal-wallet .wv-x, #modal-wallet .wv-grip { display: none !important; }
  /* (back-chevron sizing unified to 34px for every width — see rule below) */
}
@media (max-width: 979px) {
  /* 2026-07-17: mobile is a full page now — back chevron shows (rule below);
     this block intentionally left as an anchor for the old sheet-era override */
}

/* ══════════ Wallet = FULL-PAGE on MOBILE too (<980) — design sync 2026-07-17 ══════════
   Same Account/desktop recipe, phone edition: bottom-sheet shell retired (grip, floating X,
   gold/cyan rim all gone); content = 560 column floating on the body ocean; header stays
   at top (body scroll locked), bottom dock stays visible & clickable (backdrop z 45 < dock
   z 50, content clears it via padding). #modal-wallet show/hide + data-w handlers untouched. */
@media (max-width: 979px) {
  html body #modal-wallet.modal-backdrop {
    position: fixed !important;
    inset: 60px 0 0 0 !important;             /* below the 60px mobile header band */
    background: transparent !important;       /* no dim mask */
    padding: 0 !important;
    align-items: initial !important;          /* undo bottom-sheet flex-end */
    justify-content: initial !important;
  }
  html body #modal-wallet.modal-backdrop.show {
    display: block !important;
    z-index: 45 !important;                   /* under the fixed dock (z 50) */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    animation: none !important;
  }
  body:has(#modal-wallet.modal-backdrop.show) { overflow: hidden !important; }
  body:has(#modal-wallet.modal-backdrop.show) #apk-banner,
  body:has(#modal-wallet.modal-backdrop.show) .bs-container { visibility: hidden !important; }
  /* neutralise the sheet shells -> plain transparent column */
  html body #modal-wallet .modal {
    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; /* clear the dock */
    animation: none !important;
    transform: none !important;
  }
  html body #modal-wallet .wv {
    background: transparent !important;
    border-radius: 0 !important;
    max-height: none !important;
    animation: none !important;
  }
  #modal-wallet .wv-top { justify-content: flex-start !important; align-items: center !important; padding: 0 0 4px !important; }
  #modal-wallet .wv-x, #modal-wallet .wv-grip { display: none !important; }
  /* sheet-era drag handle painted by main.css/mobile-phase1 `.modal::before` — off on the page form */
  html body #modal-wallet.modal-backdrop .modal::before { display: none !important; content: none !important; }
}

/* back chevron = true 34px circle at EVERY width (global button min-height:44 would stretch it) */
#modal-wallet .wv-back {
  display: flex !important;
  width: 34px !important; height: 34px !important;
  min-height: 0 !important; max-height: 34px !important;
  padding: 0 !important; box-sizing: border-box !important; flex-shrink: 0 !important;
}

/* ══════════ Balance-card glass — design backdrop-filter, EXCEPT iOS ══════════
   Design spec: blur(22px) saturate(1.35) over rgba .66/.82/.86. That exact filter
   crashed iOS Safari (GPU, 2026-07-15) in this scrolling page — iOS keeps the opaque
   inline gradient (no filter); every other engine gets the true glass. iOS detection:
   @supports (-webkit-touch-callout:none) is iOS-only. */
@supports not (-webkit-touch-callout: none) {
  #modal-wallet .wv .wv-balcard {
    background: linear-gradient(158deg, rgba(16, 52, 66, 0.66) 0%, rgba(8, 24, 35, 0.82) 55%, rgba(6, 18, 27, 0.86) 100%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
    backdrop-filter: blur(22px) saturate(1.35) !important;
  }
}