/* ═══════════════════════════════════════════════════════════════════════════
   CoinzBack V2 — the cadence card, ONE definition for both surfaces.

   Loaded by casino.html (lobby module) and coinz-back.html (dedicated page).
   Before 2026-07-28 this block was copy-pasted into fun-machine.css AND
   coinz-back.css with a comment telling the next editor to "edit both
   together"; cross-surface consistency is a stated design requirement, so the
   component now has a single home.

   Card CONTENT model is unchanged from the 2026-07-09/10 review. What changed
   on 2026-07-28 is presentation only:
     · actions align across a row regardless of label length
     · empty states are lines, not disabled buttons
     · the PoC state switcher sits outside the card box
   All colors are ratified tokens or allowlisted raw values.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A cell wraps the card plus its review-tool footer, so the switcher can sit
   outside the card's visual box without escaping the grid or rail track. */
.cb-cell { display: flex; flex-direction: column; min-width: 0; }

/* Cards adopt the Jackpots tier-card framework (2026-07-28), laid out across
   the card's width rather than stacked down its centre: centring left the
   right-hand half empty while pushing every element onto its own line. Accent
   is carried on the rim rather than the fill, and the active card lifts by
   elevation instead of colour. Content model is unchanged, presentation only. */
.cb-card {
  position: relative;
  display: flex; flex-direction: column; flex: 1 1 auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-secondary);
  border-bottom-width: 3px;
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(0, 252, 253, 0.10), transparent 60%),
    var(--surface-lighter);
  padding: var(--sp-12) var(--sp-14) var(--sp-14);
  text-align: left;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
/* Rim carries state. A card with something to collect lifts and lightens, the
   way MEGA sits forward of MINOR and MAJOR, rather than being recoloured. */
.cb-card[data-cb-state="claimable"], .cb-card[data-cb-state="ready"] {
  border-color: rgba(38, 255, 34, 0.35);
  border-bottom-color: var(--sc-coin-color);
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(38, 255, 34, 0.10), transparent 60%),
    var(--surface-lightest);
  box-shadow: var(--shadow-card);
}

/* Identity emblem. Base (mobile) sits inline beside the label; the wide-screen
   block below is what lets it break the card's top edge, which costs 46px per
   card row and is only affordable where there is room. */
.cb-medallion {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-14); color: var(--text-on-cyan);
  background: var(--accent-cyan-gradient);
}
/* Instant is threshold-gated, not time-based; gold separates it at a glance. */
.cb-medallion--instant { background: var(--gold-gradient); color: var(--text-inverted-primary); }

/* The body owns the vertical rhythm. Making it a flex column lets the action
   row anchor to the bottom, so every card in a row lands its action on the
   same baseline even when labels wrap. */
.cb-card > [data-cb-body] { display: flex; flex-direction: column; flex: 1 1 auto; }

.cb-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
  margin-bottom: var(--sp-8); min-height: 22px;
}
.cb-id { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; }
/* Timing lives up here so the value row can be a single line. */
.cb-when {
  font-size: var(--text-12); color: var(--text-secondary);
  white-space: nowrap; flex: 0 0 auto;
}
.cb-when strong { color: var(--text-primary); font-family: var(--third-family); font-variant-numeric: tabular-nums; }
.cb-cadence {
  font-weight: 800; font-size: var(--text-14); color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* above the line: building amount + circular ring + "Claim in".
   min-height reserves the two-line case (Instant's "Always on · 10 SC to
   collect") so a wrap does not shove the divider down on one card only. */
.cb-build { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-10); min-height: 36px; }
.cb-ring { flex: 0 0 auto; width: 32px; height: 32px; }
.cb-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 4; }
.cb-ring-prog {
  fill: none; stroke: #00fcfd; stroke-width: 4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dashoffset 1s linear;
}
/* Instant's ring tracks amount-to-threshold, not time — gold to read differently */
.cb-card--instant .cb-ring-prog { stroke: var(--gc-coin-color); }

.cb-build-amount { font-family: var(--third-family); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.cb-coin { font-size: 11px; font-weight: 800; color: var(--sc-coin-color); }

.cb-divider { border-top: 1px dashed var(--border-secondary); margin: var(--sp-8) 0; }

/* ── below the line: exactly ONE state-carrying CTA ──────────────────────────
   Per the 2026-07-09 decision, every state is the same button in the same
   place: enabled to claim/collect, ghosted and disabled when there is nothing,
   green on the claim confirmation. One element that morphs teaches a returning
   player where their claim lives, and each disabled label carries its own
   reason. The min-height keeps the row identical in every state so actions
   align across a row of cards. */
.cb-cta {
  /* margin-inline auto centres it: left-aligned at less than full width, the
     14px left gutter against a 54px right one read lopsided. Centred, both
     gutters are 34px and the action still sits ~15% shorter than full-bleed. */
  margin-top: auto; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  /* Not full-bleed. The card reads left-to-right now, so the action carries a
     consistent right inset instead of running edge to edge, roughly 13% shorter
     without losing its weight as the primary control. */
  width: calc(100% - var(--sp-40)); min-height: 40px;
  font: inherit; font-weight: 900; font-size: var(--text-14); text-transform: uppercase; letter-spacing: 0.02em;
  text-align: center; padding: 8px 14px;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: transform .15s, filter .15s;
}
.cb-cta .bi { margin-right: 6px; }
.cb-cta--go { color: var(--text-on-cyan); background: var(--accent-cyan-gradient); }
.cb-cta--go:hover { filter: brightness(1.08); }
.cb-cta--go:active { transform: scale(0.98); }
.cb-cta:focus-visible { outline: 2px solid #00fcfd; outline-offset: 2px; }

/* Inactive and confirmation states: same button, same footprint, softer type
   so they read as status rather than as an invitation to press. */
.cb-cta--off, .cb-cta--done {
  cursor: default; text-transform: none; letter-spacing: 0;
  font-weight: 700; font-size: var(--text-14);
}
.cb-cta--off { color: var(--text-secondary); background: var(--surface-lightest-x2); }
/* Confirmation stays in the CTA's own colour family rather than switching to
   success-green: green is already carrying the SC coin, the claimable rim and
   the tick pulse, and one more meaning on it helps nobody. It is a TINT, not
   the live gradient, because a disabled button wearing the full cyan gradient
   looks pressable everywhere else in this UI. Same family, visibly spent. */
.cb-cta--done { color: #00fcfd; background: rgba(0, 252, 253, 0.15); }

/* Instant's action slot below the threshold: a progress track toward 10 SC.
   Same footprint as the CTA (40px, pill) so the action row still aligns across
   a row of cards, and built from existing tokens: gold reads as Instant's
   colour, held at low opacity so it stays a status track, not a button. */
/* Instant below the threshold: the action slot becomes a progress track toward
   10 SC. It IS the CTA element (.cb-cta) with a modifier, so it inherits the
   action row's geometry and stays aligned with the other three cards by
   construction rather than by a matching height declaration. */
.cb-cta--progress {
  position: relative; overflow: hidden;
  cursor: default; text-transform: none; letter-spacing: 0;
  font-weight: 700; font-size: var(--text-14);
  color: var(--text-primary); background: var(--surface-lightest-x2);
}
.cb-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  /* Cyan, not Instant's gold: gold at low alpha over the blue track muddied to
     olive, and cyan tells the truer story anyway, the track is filling toward
     the cyan claim button it becomes. Instant's identity is already carried by
     its gold emblem and ring. */
  background: var(--accent-cyan-gradient); opacity: 0.30;
  transition: width .4s ease;
}
.cb-progress-label {
  position: relative;
  font-size: var(--text-14); font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.cb-pulse { animation: cb-pulse 0.6s ease; }
@keyframes cb-pulse { 0% { color: var(--sc-coin-color); } 100% { color: inherit; } }

/* ── PoC state switcher: review tool, OUTSIDE the card box ────────────────── */
.cb-poc-tools {
  margin-top: var(--sp-8);
  display: flex; align-items: center; gap: var(--sp-8);
  opacity: 0.75;
}
.cb-poc-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); flex: 0 0 auto;
}
.cb-poc-select {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: var(--text-12); font-weight: 600;
  color: var(--text-secondary); background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill);
  padding: 3px 10px; cursor: pointer;
}
.cb-poc-select:hover { color: var(--text-primary); border-color: var(--border-secondary); }
.cb-poc-tools:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cb-ring-prog, .cb-progress-fill { transition: none; }
  .cb-pulse { animation: none; }
}

/* The emblem overflows the card's top edge by 22px. Any scroll container or
   grid holding these cards must reserve that space, otherwise a horizontally
   scrolling rail (overflow-x: auto also clips vertically) shears the emblem. */
.cb-cell { padding-top: 26px; }

/* ═══════════════════════════════════════════════════════════════════════════
   GENEROUS VARIANT — dedicated-page grid on wide screens only (2026-07-28)

   Everything above is the compact, mobile-first card. This block is the only
   place the roomier treatment exists, and it is scoped to the dedicated page's
   grid at >=701px: the lobby rail stays compact at every width because a rail
   is space-constrained regardless of screen size.

   Measured before this split: the lobby module was 456px (54% of an 844px
   viewport) and the dedicated page ran 4144px, 4.8 screens of scroll on mobile.
   The overflowing emblem alone costs 46px per card row.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 701px) {
  .cb-cadence-grid .cb-cell { padding-top: 26px; }
  .cb-cadence-grid .cb-card { padding: calc(var(--sp-28) + var(--sp-8)) var(--sp-16) var(--sp-16); }
  .cb-cadence-grid .cb-head { margin-bottom: var(--sp-12); }
  .cb-cadence-grid .cb-medallion {
    position: absolute; top: -22px; left: var(--sp-16);
    width: 52px; height: 52px; border-radius: var(--radius-md);
    font-size: var(--text-24);
    border: 3px solid var(--surface-dark);
    box-shadow: var(--shadow-card);
  }
  .cb-cadence-grid .cb-ring { width: 44px; height: 44px; }
  .cb-cadence-grid .cb-build { min-height: 48px; gap: var(--sp-12); }
  .cb-cadence-grid .cb-build-amount { font-size: 28px; }
  .cb-cadence-grid .cb-divider { margin: var(--sp-12) 0; }
  .cb-cadence-grid .cb-cta { min-height: 46px; padding: 10px 16px; font-size: 15px; width: calc(100% - var(--sp-48)); }
}

/* Layout for a host of cadence cells. Lives with the card rather than with one
   page's stylesheet: the Hub hero, the lobby module and the dedicated page all
   mount the same module, and only one of them used to load this rule. */
.cb-cadence-grid {
  display: grid;
  /* 200px, not 240: at the Hub hero's width four cards at 240 overflowed to
     3 + 1, leaving Instant orphaned on a lopsided second row. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-16);
  margin-bottom: var(--sp-12);
  align-items: stretch;
}
@container page (max-width: 600px) {
  .cb-cadence-grid { grid-template-columns: 1fr; gap: var(--sp-12); }
}