/* ==========================================================================
   bust.fun - VIP / LOYALTY card styles. Reuses the global synthwave design
   tokens (--surface*, --line*, --fg*, --muted, --brand, --accent, --violet,
   --gold, --win, --neon-glow*, --sp-*, --r-*, --fs-*, --fw-*). Feature-scoped:
   every selector is under .vip-* / #view-vip so it can never bleed into other
   views. a11y: AA-contrast text on these surfaces; the only motion is the
   progress-bar width transition + a one-shot claim pulse, both nulled by the
   global prefers-reduced-motion reset (and again here, defensively).
   ========================================================================== */

#view-vip .vip-intro {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-bottom: var(--sp-3);
}

#view-vip .vip-status {
  color: var(--muted);
  font-size: var(--fs-sm);
  min-height: 1.2em;
}

/* ==========================================================================
   REWARDS & VIP — 4-GROUP INFORMATION ARCHITECTURE
   --------------------------------------------------------------------------
   #vip is the ONE rewards home. It reads top-to-bottom as four ORDERED, headed
   groups (a deliberate hierarchy, not a scatter of equal cards):
     1) .rw-group-status — the STATUS hero (#vipCard): tier + XP + next-unlock.
     2) .rw-group-claim  — the CLAIM center: rakeback + level-ups (#vipClaimMount)
                           + daily streak + mystery box, in one consistent grid.
     3) .rw-group-ladder — the read-only VIP roadmap + perks (#vipLadderMount).
     4) .rw-group-earn   — reload offers + cashback (#vipEarnMount) + promo.
   Rhythm is INTENTIONAL: a wide gap SEPARATES groups, a tighter gap packs each
   group's cards — so the eye reads "four regions", not "one uniform stack".
   ========================================================================== */
.vip-card {
  /* The outer .card surface is inherited; here we own the vertical rhythm + width. A generous gap between
     the direct children (section-head, lede, status, the four groups, loading) makes the group boundaries
     legible without rules everywhere. */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: var(--maxw, 1080px);
  margin-left: auto;
  margin-right: auto;
}
/* The header band (title/lede/status) hugs together above group 1 — no big gap under the title. */
.vip-card > .section-head { margin-bottom: 0; }
.vip-card > .rw-lede { margin: 0; font-size: var(--fs-md); color: var(--fg-dim); max-width: 60ch; }
.vip-card > #vipStatus { margin: 0; }
/* Pull the lede/status close to the header; the big --sp-6 gap is reserved for BETWEEN groups. */
.vip-card > .section-head + .rw-lede,
.vip-card > .rw-lede + #vipStatus { margin-top: calc(var(--sp-6) * -1 + var(--sp-2)); }

/* ---- a group: a headed region. The heading uses SCALE CONTRAST (bigger, display face) + an accent tick
   so groups clearly outrank the cards inside them. Cards within a group share a tighter rhythm. ---- */
/* Each group is a query CONTAINER so its card grids respond to the ACTUAL column width — not the viewport.
   Critical for this shell: an open chat drawer docks 360px off the right and shrinks the real content column,
   so a viewport media-query would wrongly fire a 3-col grid into a narrow column (cramped / spilling under the
   chat). Container queries below key off THIS width instead, so the grids collapse gracefully when squeezed. */
.rw-group { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; container-type: inline-size; }
.rw-group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--fg);
  letter-spacing: -.01em;
}
/* the leading icon of a group head reads as a small accent glyph, not chrome */
.rw-group-head [data-icon] { color: var(--violet); width: 20px; height: 20px; flex: 0 0 auto; }
.rw-group-head [data-icon] svg { width: 20px; height: 20px; }
/* an accent tick before the head sets the group apart from card sub-titles */
.rw-group-head::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.1em;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.rw-group-sub { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--muted); max-width: 62ch; }

/* The rendered VIP hero body: a column on mobile. .vip-lead is the identity block. */
.vip-card-body { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.vip-lead { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* ---- GROUP 1: STATUS hero — the most prominent surface. A raised, glowing panel so the player's rank +
   progress lead the page (scale + depth contrast vs the flatter cards below). ---- */
.rw-group-status .vip-lead {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--brand-soft), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-2);
}

/* ---- GROUP 2 + 4 card grids: responsive auto-fit so the claim / earn cards tile intentionally. The
   JS mounts (#vipClaimMount, #vipEarnMount) hold their own cards; the static cards are siblings. ---- */
.rw-claim-grid,
.rw-earn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  min-width: 0;
}
/* the mounts + their child cards must be able to shrink into a grid cell */
.rw-claim-mount, .rw-earn-mount, .rw-ladder-mount { min-width: 0; display: contents; }

/* Inside a grid cell the folded-in claim cards drop their legacy flow margins (the grid `gap` is the single
   spacing authority) — mirrors the old bento fix, now scoped to the group grids. */
.rw-claim-grid > .rw-daily-card,
.rw-claim-grid > #rwBoxCard,
.rw-earn-grid > .rw-promo { margin: 0; min-width: 0; align-self: start; }

/* the JS-rendered claim/earn panels get a real sub-card surface so they read as cards in the grid, matching
   the static daily/box/promo cards beside them. */
.vip-rakeback-wrap,
.vip-levelups-wrap,
.vip-reloads-wrap,
.vip-cashback-wrap {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  align-self: start;
}

/* COMPACT empty state: when a claim/earn card has nothing actionable (no level-ups, 0 rakeback, no live
   reloads, no cashback — the common case for a new/low player) it collapses from a full ~100px padded card
   to a ~34px dashed low-emphasis chip. Presentational only: rewards-vip.js toggles `.is-empty` (no copy or
   money value changes), so a POPULATED card keeps its full surface + Claim button. This is what stops the
   claim/earn grids from reading as a wide row of full-height one-line cards. */
.vip-levelups-wrap.is-empty,
.vip-rakeback-wrap.is-empty,
.vip-reloads-wrap.is-empty,
.vip-cashback-wrap.is-empty {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border-style: dashed;
  align-self: start;
}
.is-empty .vip-section-title { margin: 0; font-size: var(--fs-xs); }
.is-empty .vip-empty { margin: 0; font-size: var(--fs-xs); color: var(--muted-2); }

/* Reload/welcome offer list. Without this the name + terms were two adjacent inline spans with no gap and
   rendered GLUED ("Welcome Bonus100% match up to $100"). Structure each offer as a row: bold name on its own
   line, terms (percent · cap · min · wager) as a muted line below. */
.vip-reload-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.vip-reload {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
}
.vip-reload-name { font-weight: var(--fw-semi); color: var(--fg); }
.vip-reload-terms { font-size: var(--fs-sm); color: var(--muted); }

/* ---- GROUP 3: LADDER + perks — a single read-only panel (roadmap + perks), secondary to status/claim. ---- */
.rw-ladder-mount .vip-ladder-wrap,
.rw-ladder-mount .vip-perks-wrap {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

/* ===== ROOMY COLUMN (>=560px of ACTUAL group width): the claim + earn grids use the horizontal space
   (2 cols). Keyed off the group's CONTAINER width (not the viewport), so an open chat drawer that shrinks
   the column below 560px collapses these to one column instead of cramping two cols into a narrow gutter. ==== */
@container (min-width: 560px) {
  /* 2 columns is the MAX for the claim grid. The four claim items have extreme height variance (empty
     claimables collapse to ~34px chips; the daily-streak + mystery-box cards are ~480px). In DOM order
     [rakeback, level-ups, daily, box] a 2-col flow pairs the two short chips in row 1 and the two tall cards
     in row 2 — dense packing with no orphaned half-row. A 3rd column (the old >=900px rule) only ever
     stranded a blank cell, so it is gone. */
  .rw-claim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: start; }
  /* The tall Mystery Box is pinned to column 2 spanning all three column-1 rows (level-ups + rakeback +
     daily-streak), so its ~600px height is absorbed by the col-1 stack instead of leaving a ~230px gap under
     the shorter daily card. The three col-1 items always render (each collapses to a chip when empty), so the
     span-3 matches the stack. Scoped inside the >=560px container query so the 1-col mobile flow is unaffected. */
  .rw-claim-grid > #rwBoxCard { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; }
  /* If the box is hidden (rewards-box.js adds .hidden on a 404), collapse it so it never holds an empty cell. */
  .rw-claim-grid > #rwBoxCard.hidden { display: none; }
  .rw-earn-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* The promo redeem card is the 3rd earn item; span it full-width so it doesn't strand an empty col-2 cell
     beside a half-width card. Its input row already stretches, so it reads as an intentional redeem bar. */
  .rw-earn-grid > .rw-promo { grid-column: 1 / -1; }
  /* Ladder + perks sit side-by-side (roadmap left, perks right) as one cohesive read-only panel; stretch the
     shorter perks panel to the roadmap height so its right edge isn't a sparse float. */
  .rw-ladder-mount { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-4); align-items: start; }
  .rw-ladder-mount .vip-perks-wrap { align-self: stretch; }
}

/* ---- next-unlock TEASER (status hero): one advertised payoff line under the progress bar. ---- */
.vip-next-unlock {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
}
.vip-next-unlock-lbl {
  font-weight: var(--fw-bold);
  color: var(--gold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.vip-next-unlock-txt { color: var(--accent-text); }

/* ---- header: trophy + level name ---- */
.vip-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.vip-ico {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--gold);
  flex: 0 0 auto;
}
.vip-ico svg { width: 22px; height: 22px; }
/* VIP MEDALLIONS (chrome illustration set, /img/selected/vip-<tier>.png). The tier class paints the
   medallion as a contained background; the trophy SVG inside is hidden when a medallion is painted (it
   remains in the DOM as a graceful fallback if the image 404s). */
.vip-ico[class*="vip-ico-"] {
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
}
.vip-ico[class*="vip-ico-"] svg { display: none; }
.vip-ico-bronze   { background-image: url('/img/selected/vip-bronze.png') !important; }
.vip-ico-silver   { background-image: url('/img/selected/vip-silver.png') !important; }
.vip-ico-gold     { background-image: url('/img/selected/vip-gold.png') !important; }
.vip-ico-platinum { background-image: url('/img/selected/vip-platinum.png') !important; }
.vip-ico-diamond  { background-image: url('/img/selected/vip-diamond.png') !important; }

/* TIER-UP medallion "mint-stamp": a ONE-SHOT punch-in (scale 0.6 -> overshoot 1.12 -> 1) with a gold glow
   flare, fired by JS (rewards-vip.js adds .vip-tierup) only on a genuine rank increase. Uses the shared
   spring easing (--ease-spring = cubic-bezier(.34,1.56,.64,1)) + the --gold-glow token so it matches the
   rest of the synthwave card. Reduced-motion -> NO-OP (guarded below). Display-only; no money/rewards. */
@keyframes vip-tierup-stamp {
  0%   { transform: scale(.6);  filter: drop-shadow(0 0 0 var(--gold-glow)); }
  55%  { transform: scale(1.12); filter: drop-shadow(0 0 14px var(--gold-glow)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 var(--gold-glow)); }
}
.vip-ico.vip-tierup {
  animation: vip-tierup-stamp var(--dur-4, 600ms) var(--ease-spring) both;
  z-index: 1; /* lift the punching medallion above neighbours during the overshoot */
}
.vip-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vip-kicker {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: var(--fw-semi);
}
.vip-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--fg);
  margin: 0;
  text-shadow: var(--neon-glow-text);
}

/* ---- XP progress ---- */
.vip-progress-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.vip-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.vip-xp {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--violet);
  font-variant-numeric: tabular-nums;
}
.vip-next {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.vip-bar {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--bg-1);
  border: 1px solid var(--line);
  overflow: hidden;
}
.vip-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow: var(--glow-brand);
  transition: width var(--dur-3) var(--ease-out);
  min-width: 0;
}
.vip-pct {
  align-self: flex-end;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- section titles ---- */
.vip-section-title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--sp-2);
}

/* ---- perks list ---- */
.vip-perks-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.vip-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.vip-perk {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.vip-perk-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}
.vip-perk-on .vip-perk-mark { background: var(--win-soft); color: var(--win); }
.vip-perk-off .vip-perk-mark { background: var(--surface-3); color: var(--muted-2); }
.vip-perk-on .vip-perk-text { color: var(--fg); }
.vip-perk-off .vip-perk-text { color: var(--muted); }
.vip-blurb {
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  line-height: 1.5;
  margin: 0;
}

/* ---- claimable level-up rewards ---- */
.vip-levelups-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.vip-levelup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.vip-levelup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
}
.vip-levelup-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vip-levelup-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--fg);
}
.vip-levelup-amt {
  font-size: var(--fs-sm);
  color: var(--win);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}

/* Claim button (synthwave CTA). >=44px touch target. */
.vip-claim-btn {
  flex: 0 0 auto;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.vip-claim-btn:hover { box-shadow: var(--glow-accent); }
.vip-claim-btn:active { transform: translateY(1px); }
.vip-claim-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.vip-claim-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--surface-3);
  background-image: none;   /* kill any accent gradient so the inactive state never reads as an enabled CTA */
  /* disabled label on the elevated --surface-3 fill — --muted (3.86:1) fails AA; --muted-2 lifts it ≥4.5:1
     (contrast audit, systemic --muted-on-elevated-surface fix). */
  color: var(--muted-2);
  border: 1px solid var(--line-2);   /* a clear inert outline — unmistakably not a filled/enabled button */
  box-shadow: none;
}

.vip-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ---- rakeback claim row + VIP ladder roadmap ----
   (Moved here from a rewards-vip.js JS-injected <style> so all VIP styling ships with the initial CSS —
   no flash of unstyled ladder, no token-pipeline bypass. engagement-css minor fix.) */
.vip-rakeback-wrap, .vip-ladder-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.vip-rakeback-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--line-2);
  border-left: 3px solid var(--violet, var(--brand)); border-radius: var(--r-sm);
}
.vip-rakeback-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vip-rakeback-claimable {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--win); font-variant-numeric: tabular-nums;
}
/* $0 = muted, not affirmative green (green is reserved for a real claimable balance). */
.vip-rakeback-claimable.is-zero { color: var(--muted); }
.vip-rakeback-lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.vip-rakeback-total { font-size: var(--fs-sm); margin: 0; }

/* ladder roadmap rail */
.vip-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vip-ladder-step {
  display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--muted); border: 1px solid transparent;
}
.vip-ladder-dot {
  display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); flex: 0 0 auto;
  background: var(--surface-3); color: var(--muted-2);
}
.vip-ladder-reached { color: var(--fg); }
.vip-ladder-reached .vip-ladder-dot { background: var(--win-soft); color: var(--win); }
.vip-ladder-current { background: var(--surface-2); border-color: var(--gold); }
.vip-ladder-current .vip-ladder-name { color: var(--gold); font-weight: var(--fw-bold); }
.vip-ladder-name { flex: 1 1 auto; }
.vip-ladder-tag {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  color: var(--gold); white-space: nowrap;
}
.vip-ladder-tag-next { color: var(--brand); }
.vip-ladder-note { font-size: var(--fs-xs); margin: 0; }
/* The headline unlock advertised on an upcoming tier ("Next: Gold unlocks 0.20% rakeback"). */
.vip-ladder-unlock {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  /* --secondary (lighter blue) not --accent: raw --accent #2f80ed on the card surface was only 3.2:1;
     the lighter secondary blue clears AA and matches the other link/money blue on the page. */
  color: var(--secondary);
  margin: 2px 0 0 26px;
}
.vip-ladder-step { flex-wrap: wrap; }

/* Motion guard: kill the bar transition + button motion under reduced-motion (the global reset also
   nulls these; this is defensive so a future global change can't re-enable motion here). */
@media (prefers-reduced-motion: reduce) {
  .vip-bar-fill { transition: none !important; }
  .vip-claim-btn { transition: none !important; }
  .vip-claim-btn:active { transform: none !important; }
  /* TIER-UP medallion punch-in: no-op under reduced-motion (the confetti/coin/count-up primitives
     self-gate in ui.js; this nulls the only CSS-driven motion the celebration adds). */
  .vip-ico.vip-tierup { animation: none !important; }
}

/* NEW-USER first-deposit hook in the VIP status hero (entry rank only) — the highest-leverage motivator that
   was missing at level 0. Gold-accented (the money-good color) so it reads as the climb's payoff + a clear
   first action, distinct from the read-only progress bar above it. */
.vip-firstdep {
  margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--gold) 50%, var(--line-2));
  background:
    radial-gradient(130% 170% at 100% 0%, color-mix(in oklab, var(--gold) 18%, transparent), transparent 62%),
    var(--surface-2);
  /* real elevation so the top new-user motivator out-ranks the flat sibling reward cards below it */
  box-shadow: 0 8px 28px -10px rgba(0,0,0,.5), 0 0 22px color-mix(in oklab, var(--gold) 16%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.vip-firstdep-copy { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vip-firstdep-head {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); color: var(--fg); line-height: 1.15; /* bold, full-contrast headline (out-ranks siblings) */
}
.vip-firstdep-txt { margin: 0; font-size: var(--fs-sm); color: var(--fg-dim); line-height: 1.4; }
.vip-firstdep-cta {
  flex: 0 0 auto; white-space: nowrap; padding: 12px 22px; border-radius: var(--r-md); font-size: var(--fs-md);
  background: linear-gradient(180deg, var(--gold), color-mix(in oklab, var(--gold) 80%, #000));
  color: var(--brand-ink); font-weight: var(--fw-bold); text-decoration: none;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--gold) 30%, transparent);
}
.vip-firstdep-cta:hover { filter: brightness(1.06); }
.vip-firstdep-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }