/* Coinz Hub PoC styles — extends shared/theme.css with Hub-specific
   components: tab pill row, scratchcard calendar, tier ladders,
   VIP benefits table, feature cards. Visual-only PoC; ~6 files total. */

body { padding-top: 0; }

/* ───────── page chrome (mirrors coinz-market PoC) ───────── */
.viewport-shell {
  margin: 0 auto; transition: max-width 0.25s ease;
  container-type: inline-size; container-name: page;
  display: flex; flex-direction: column; min-height: 100vh;
}
.site-body { display: flex; align-items: stretch; flex: 1; min-height: 0; }
.site-main { flex: 1; min-width: 0; }
.page-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }

/* ───────── site header (copied verbatim from coinz-market.css) ───────── */
.site-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 67px; flex-shrink: 0;
  background: var(--surface-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.hdr-icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.hdr-icon-btn:hover { background: rgba(255, 255, 255, 0.10); }

.hdr-logo {
  display: inline-flex; align-items: baseline;
  padding: 0 4px 0 2px;
  font-family: var(--font-family);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  user-select: none; flex-shrink: 0;
}
.hdr-logo-mark { color: var(--text-primary); font-size: 28px; }
.hdr-logo-dot  { color: var(--text-primary); font-size: 28px; margin: 0 1px; }
.hdr-logo-tld  { color: var(--text-secondary); font-size: 14px; font-weight: 700; }

.hdr-search {
  flex: 1; max-width: 320px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: var(--surface-dark-500);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-pill);
}
.hdr-search:focus-within { outline: 2px solid var(--border-primary); }
.hdr-search > .bi { color: var(--text-secondary); font-size: 14px; }
.hdr-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--text-primary); font-family: inherit; font-size: 13px;
}
.hdr-search input::placeholder { color: var(--text-secondary); }
.hdr-search input:focus { outline: none; }

.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.hdr-theme-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface-dark-500);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-pill);
  font-size: 14px; line-height: 1;
}
.hdr-theme-pill .bi-sun-fill  { color: var(--gc-coin-color); }
.hdr-theme-pill .bi-moon-fill { color: var(--text-primary); opacity: 0.55; }

.hdr-balance-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--surface-dark-500);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  color: var(--text-primary); font-weight: 700; font-size: 13px;
  line-height: 1; white-space: nowrap;
}
.hdr-balance-coin {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--alert-success), var(--accent-green));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-inverted-primary); font-size: 12px; font-weight: 900;
}
.hdr-balance-amount::before { content: "$"; opacity: 0.85; margin-right: 1px; }
.hdr-balance-caret { font-size: 9px; opacity: 0.6; }

.hdr-bag-btn {
  width: 48px; height: 38px; border-radius: var(--radius-pill);
  background: var(--accent-cyan-gradient);
  border: 0; color: var(--text-on-cyan); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.hdr-bag-btn:hover { filter: brightness(1.08); }
.hdr-bag-btn:active { transform: scale(0.98); }
.hdr-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-circle);
  background: var(--surface-lightest-x3);
  border: 1px solid var(--border-light);
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
  flex-shrink: 0;
}

/* ───────── sidenav (Social Hub section is anchor for the Hub) ───────── */
.site-sidenav {
  width: 240px; flex-shrink: 0;
  padding: 14px 10px 32px;
  background: var(--surface-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  overflow-y: auto;
  font-family: var(--font-family);
}
.sidenav-section + .sidenav-section { margin-top: 18px; }
.sidenav-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 10px;
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
  user-select: none;
}
.sidenav-section-head .bi { font-size: 11px; opacity: 0.55; }
.sidenav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  color: var(--text-primary); text-decoration: none;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600;
  line-height: 1; cursor: default;
  transition: background 0.12s ease;
}
.sidenav-item .bi {
  font-size: 18px; width: 22px; text-align: center; flex-shrink: 0;
}
.sidenav-item:hover { background: rgba(255, 255, 255, 0.16); }
a.sidenav-item { cursor: pointer; }
a.sidenav-item:hover { background: rgba(255, 255, 255, 0.16); }
.sidenav-item.active {
  background: var(--surface-lightest-x3);
  color: var(--text-primary);
}

/* ───────── tab pill row (the Hub tabs) ───────── */
.page-tabs { display: flex; justify-content: center; margin-bottom: 28px; }
.page-tabs-inner {
  background: var(--surface-dark-500); padding: 4px;
  border-radius: var(--radius-pill); display: inline-flex; gap: 4px;
  flex-wrap: wrap;
}
.page-tab {
  background: transparent; color: var(--text-secondary);
  border: none; padding: 10px 22px; border-radius: var(--radius-pill);
  font-size: var(--text-14); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; transition: all 0.2s ease;
  white-space: nowrap; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.page-tab:hover { color: var(--text-primary); }
.page-tab.active {
  background: var(--surface-plain);
  color: var(--text-inverted-primary); box-shadow: var(--shadow-sm);
}

/* ───────── Home — hero strip ───────── */
.hub-hero {
  display: flex; align-items: center; gap: 28px;
  padding: 24px 28px; margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgba(0, 252, 253, 0.10), rgba(42, 106, 209, 0.16)),
    var(--surface-lightest-x2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.hub-hero-art { font-size: 56px; flex-shrink: 0; }
.hub-hero-copy { flex: 1; min-width: 0; }
.hub-hero h2 {
  font-family: var(--third-family);
  font-size: var(--text-36); font-weight: 800; margin-bottom: 6px;
  color: var(--text-primary);
}
.hub-hero p { color: var(--text-secondary); margin-bottom: 14px; font-size: var(--text-14); }
.hub-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-primary, .cta-ghost {
  font-family: inherit; cursor: pointer;
  padding: 10px 22px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 900;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.15s ease, filter 0.15s ease;
  text-decoration: none; display: inline-flex; align-items: center;
}
.cta-primary {
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan); border: 0;
}
.cta-primary:hover { filter: brightness(1.08); }
.cta-primary:active { transform: scale(0.98); }
.cta-primary:disabled { opacity: 0.45; }
.cta-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-primary);
}
.cta-ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* ───────── Section card (generic container used across pages) ───────── */
.hub-section {
  margin-bottom: 22px;
  padding: 20px 24px;
  background: var(--surface-lightest-x2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.hub-section h3 {
  font-size: var(--text-24); font-weight: 600; margin-bottom: 12px;
  color: var(--text-primary);
}
.hub-section .section-subtitle {
  color: var(--text-secondary); font-size: var(--text-14);
  margin-bottom: 16px;
}

/* ───────── 14-day calendar ───────── */
.calendar-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.calendar-meta strong { color: var(--text-primary); font-family: var(--third-family); font-weight: 700; }
.calendar-grid {
  display: grid; grid-template-columns: repeat(15, 1fr);
  gap: 8px;
}
.calendar-cell {
  aspect-ratio: 1; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-size: 11px; font-weight: 700;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.calendar-cell:hover { transform: translateY(-2px); }
.calendar-cell .day-label { font-size: 10px; letter-spacing: 0.04em; opacity: 0.7; }
.calendar-cell .day-icon  { font-size: 18px; margin-top: 2px; }
.calendar-cell.played {
  background: rgba(38, 255, 34, 0.12);
  border-color: rgba(38, 255, 34, 0.35);
  color: var(--sc-coin-color);
}
.calendar-cell.today {
  background: var(--accent-cyan-gradient);
  border-color: transparent;
  color: var(--text-on-cyan);
  box-shadow: var(--shadow-card);
  animation: today-pulse 2s ease-in-out infinite;
}
@keyframes today-pulse { 50% { transform: scale(1.05); } }
.calendar-cell.locked {
  background: var(--surface-dark-500);
  color: var(--text-tertiary);
  border-color: rgba(255, 255, 255, 0.05);
}
.calendar-cell.cliff {
  background: rgba(201, 31, 62, 0.25);
  border: 1px dashed rgba(201, 31, 62, 0.7);
  color: #fff;
  font-size: 10px;
  padding: 4px;
  text-align: center;
}
.calendar-cell.cliff:hover {
  background: rgba(201, 31, 62, 0.4);
  border-style: solid;
}
.calendar-footnote {
  margin-top: 12px; color: var(--text-secondary); font-size: var(--text-14);
  text-align: center;
}

/* ───────── Features overview (4 cards on Home) ───────── */
.feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.feature-card {
  padding: 18px 16px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none; color: var(--text-primary);
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.feature-card:hover { transform: translateY(-3px); border-color: var(--border-light); }
.feature-card .feature-name { font-weight: 800; font-size: var(--text-18); }
.feature-card .feature-tag  { font-size: var(--text-12); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.feature-card .feature-blurb { font-size: var(--text-14); color: var(--text-secondary); flex: 1; }
.feature-card .feature-open { color: var(--link-color); font-size: var(--text-14); font-weight: 700; margin-top: 4px; }

/* ───────── Tier ladder (horizontal hexagons) ───────── */
.tier-ladder {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 10px;
  overflow-x: auto;
}
.tier-node {
  flex: 1; min-width: 110px;
  padding: 14px 10px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tier-node:hover { transform: translateY(-2px); }
.tier-node .tier-name { font-size: var(--text-14); font-weight: 800; letter-spacing: 0.02em; }
.tier-node .tier-rate { font-family: var(--third-family); font-size: var(--text-24); font-weight: 700; color: var(--text-primary); margin-top: 4px; }
.tier-node .tier-meta { font-size: 10px; color: var(--text-secondary); margin-top: 4px; }
.tier-node.current {
  background: var(--surface-lightest-x3);
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
}
.tier-node.current .tier-rate { color: var(--text-primary); }
.tier-node .tier-current-flag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--accent-blue); color: white;
  font-size: 9px; padding: 2px 8px; border-radius: var(--radius-pill);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tier-progress {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 10px 14px;
  background: var(--surface-dark-500); border-radius: var(--radius-md);
  font-size: var(--text-14); color: var(--text-secondary);
}
.tier-progress strong { color: var(--text-primary); }
.tier-progress-bar {
  flex: 1; height: 6px; background: rgba(255, 255, 255, 0.08);
  border-radius: 6px; overflow: hidden;
}
.tier-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #00fcfd, #0078e5);
}
.see-full-ladder {
  display: inline-block; margin-top: 12px;
  color: var(--link-color); text-decoration: none; font-weight: 700;
}
.see-full-ladder:hover { text-decoration: underline; }

/* ───────── Coinz Back accumulated-progress widget ───────── */
.cb-progress {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(38, 255, 34, 0.06), rgba(0, 252, 253, 0.06));
  border: 1px solid rgba(38, 255, 34, 0.2);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
}
.cb-progress-art { font-size: 48px; flex-shrink: 0; }
.cb-progress-detail { flex: 1; min-width: 240px; }
.cb-progress-amount {
  font-size: var(--text-30); font-weight: 700; color: var(--sc-coin-color);
  font-family: var(--third-family); font-variant-numeric: tabular-nums;
}
.cb-progress-amount .threshold { color: var(--text-secondary); font-size: var(--text-18); }
.cb-progress-bar {
  height: 10px; background: var(--surface-dark-500);
  border-radius: var(--radius-sm); overflow: hidden; margin: 10px 0;
}
.cb-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #00fcfd, #0078e5);
}
.cb-progress-pct { color: var(--text-secondary); font-size: var(--text-14); }
.cb-collect-btn {
  padding: 12px 32px; border-radius: var(--radius-pill);
  background: var(--accent-cyan-gradient); color: var(--text-on-cyan); border: 0;
  font-family: inherit; font-weight: 900; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; min-width: 180px;
}
.cb-collect-btn:active { transform: scale(0.98); }
.cb-collect-btn:disabled, .cb-collect-btn.locked {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary); cursor: not-allowed; box-shadow: none;
}

/* ───────── How-it-works 3-step ───────── */
.howto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.howto-step {
  padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.howto-step .step-num {
  font-size: 11px; font-weight: 900; color: var(--text-secondary);
  letter-spacing: 0.06em;
}
.howto-step .step-name { font-size: var(--text-18); font-weight: 800; margin: 4px 0; }
.howto-step .step-body { color: var(--text-secondary); font-size: var(--text-14); line-height: 1.5; }

/* ───────── FAQ accordion (CSS-only) ───────── */
.faq details {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 8px; padding: 14px 18px;
}
.faq summary {
  font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▾"; color: var(--text-secondary); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin-top: 10px; color: var(--text-secondary); font-size: var(--text-14); line-height: 1.6; }

/* ───────── Coinz Connect sliders ───────── */
.cc-status-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; margin-bottom: 22px;
  background: var(--surface-lightest-x2); border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}
.cc-status-bar .status-label { font-size: var(--text-14); color: var(--text-secondary); }
.cc-status-bar .status-value { font-weight: 800; color: var(--text-primary); }
.cc-status-bar .status-value.off { color: var(--market-down); }
.cc-status-bar .grow { flex: 1; }
.cc-form {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px;
  background: var(--surface-lightest-x2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.cc-form-row {
  display: grid; grid-template-columns: 160px 1fr 100px;
  gap: 16px; align-items: center;
}
.cc-form-row label { font-weight: 700; color: var(--text-primary); font-size: var(--text-14); }
.cc-form-row input[type=range] { width: 100%; }
.cc-form-row .readout {
  text-align: right; font-family: var(--third-family); font-weight: 700;
  color: var(--text-primary); font-size: var(--text-18);
}
.cc-save {
  align-self: flex-end; margin-top: 6px;
  padding: 12px 28px; border-radius: var(--radius-pill);
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan); border: 0;
  font-family: inherit; font-weight: 900; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.cc-save:active { transform: scale(0.98); }

/* ───────── VIP ─────────────────────────────────────────────── */
.vip-progress {
  padding: 22px 24px; margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgba(0, 252, 253, 0.10), rgba(42, 106, 209, 0.14)),
    var(--surface-lightest-x2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.vip-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: var(--text-14); color: var(--text-secondary);
}
.vip-progress-meta strong { color: var(--text-primary); font-family: var(--third-family); }
.vip-progress-bar {
  height: 12px; background: var(--surface-dark-500);
  border-radius: var(--radius-pill); overflow: hidden; margin: 12px 0 4px;
}
.vip-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #00fcfd, #0078e5);
}
.vip-levels {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin: 16px 0 22px;
}
.vip-level {
  padding: 20px 14px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
  position: relative;
}
.vip-level:hover { transform: translateY(-3px); border-color: var(--border-light); }
.vip-level .vip-emoji { font-size: 36px; }
.vip-level .vip-name { font-weight: 900; font-size: var(--text-18); margin-top: 6px; }
.vip-level .vip-pts  { font-size: var(--text-12); color: var(--text-secondary); margin-top: 4px; }
.vip-level.current {
  background: linear-gradient(135deg, rgba(0, 252, 253, 0.14), rgba(42, 106, 209, 0.18));
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
}
.vip-level .vip-you-flag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--accent-blue); color: white;
  font-size: 9px; padding: 2px 8px; border-radius: var(--radius-pill);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.vip-benefits {
  width: 100%; border-collapse: collapse; font-size: var(--text-14);
}
.vip-benefits th, .vip-benefits td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vip-benefits th {
  background: var(--surface-dark-500);
  color: var(--text-primary);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--text-12);
}
.vip-benefits th.perk-name, .vip-benefits td.perk-name {
  text-align: left; color: var(--text-secondary); font-weight: 700;
}
.vip-benefits tr:hover td { background: rgba(255, 255, 255, 0.025); }
.vip-benefits .dash { color: var(--text-tertiary); }

.vip-grants { display: flex; flex-direction: column; gap: 10px; }
.vip-grant {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--text-14);
}
.vip-grant .grant-when { color: var(--text-secondary); margin-left: auto; font-size: var(--text-12); }
.vip-grant.skipped { opacity: 0.65; }
.vip-grant.skipped::before { content: "—"; color: var(--text-tertiary); margin-right: 6px; }

/* ───────── DOCS PANEL (V2 Overview) ───────── */
.docs-panel {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0, 7, 36, 0.96);
  backdrop-filter: blur(10px);
  overflow-y: auto; padding: 40px 24px 96px;
}
.docs-panel[hidden] { display: none; }
.docs-panel-inner { max-width: 780px; margin: 0 auto; position: relative; }
.docs-close {
  position: absolute; top: -8px; right: 8px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--text-primary); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.docs-content {
  background: var(--surface-lighter);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 40px 44px 36px;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 15px; line-height: 1.65;
}
.docs-content h1 {
  font-size: var(--text-24); font-weight: 600; margin: 0 0 18px;
  color: var(--text-primary);
}
.docs-content h2 {
  font-size: 20px; font-weight: 700;
  margin: 32px 0 12px; padding-bottom: 8px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.docs-content h3 { font-size: 16px; font-weight: 700; margin: 22px 0 6px; }
.docs-content p { margin: 0 0 12px; }
.docs-content ul, .docs-content ol { margin: 6px 0 16px; padding-left: 22px; }
.docs-content li { margin-bottom: 6px; }
.docs-content strong { color: var(--text-primary); font-weight: 700; }
.docs-content code {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1px 6px; border-radius: var(--radius-sm);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px;
  color: #00fcfd;
}
.docs-content hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); margin: 28px 0; }
.docs-content a { color: var(--link-color); }

/* ───────── Coinz Back promotional landing (Figma 2160-7248) ─────────
   Page-scoped styles for the promotional surface, on ratified tokens:
   cyan-gradient progress fills and CTAs (OQ-2), GC gold accents, navy
   hero field. Club/Select tier names keep their bronze/silver medal
   colors as feature artwork under the OQ-6 latitude. */

/* Hero banner — ratified navy field with cyan + gold washes.
   TODO: replace .cb-hero-logo gradient text with the real 3D logo asset
   (Figma node 2160-7243) once Figma Dev Mode allowed-directories is set. */
.cb-hero-banner {
  position: relative; overflow: hidden;
  padding: 48px 24px 40px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 80% 30%, rgba(0, 252, 253, 0.22), transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(255, 232, 73, 0.16), transparent 55%),
    linear-gradient(135deg, var(--surface-lightest), var(--surface-darkest));
  text-align: center;
  isolation: isolate;
}
.cb-hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 252, 253, 0.10), transparent 70%);
  z-index: -1;
}
.cb-hero-logo-img {
  display: block; margin: 0 auto 12px;
  width: clamp(260px, 38vw, 460px); height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  position: relative; z-index: 1;
}
.cb-hero-tagline {
  color: #ffffff; font-size: var(--text-24); font-weight: 600;
  margin: 0; position: relative; z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Status pill — centered card with tier label + progress + collect */
.cb-status {
  padding: 20px 28px;
  margin-bottom: 28px;
  background: linear-gradient(180deg, var(--surface-lightest), var(--surface-lighter));
  border: 1px solid var(--border-light);
  border-radius: 999px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.cb-status-tier-row {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-18);
}
.cb-status-tier-label { color: var(--text-primary); opacity: 0.85; }
.cb-status-tier-value {
  color: var(--gc-coin-color);
  font-weight: 800; font-size: var(--text-24);
}
.cb-status-progress-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center;
}
.cb-status-progress-label { color: var(--text-primary); font-size: var(--text-14); font-weight: 600; }
.cb-status-keep { color: var(--text-primary); opacity: 0.8; font-size: var(--text-14); }
.cb-status-keep strong { color: var(--gc-coin-color); font-weight: 800; }

/* Progress bar — bright cyan-blue gradient pill */
.cb-bar {
  position: relative;
  min-width: 200px; height: 26px;
  background: var(--surface-dark-500);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill); overflow: hidden;
  flex: 1 1 auto;
  max-width: 320px;
}
.cb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0078e5 0%, #00fcfd 100%);
  border-radius: var(--radius-pill);
}
.cb-bar-amount {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  font-size: var(--text-14); font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  font-family: var(--third-family); font-variant-numeric: tabular-nums;
}
.cb-bar-full { max-width: 180px; }

/* Collect button — primary cyan pill (OQ-2) */
.cb-collect {
  padding: 10px 28px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan);
  font-weight: 900; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; min-width: 140px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.cb-collect:hover:not(:disabled) { filter: brightness(1.08); }
.cb-collect:active:not(:disabled) { transform: scale(0.98); }
.cb-collect:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.cb-collect-small { min-width: 110px; padding: 8px 20px; font-size: var(--text-12); }

/* Section blocks — promotional body */
.cb-section {
  padding: 24px;
  margin-bottom: 22px;
  background: var(--surface-lighter);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
}
.cb-section-title {
  margin: 0 0 12px;
  font-size: var(--text-24); font-weight: 600;
  color: #ffffff;
}
.cb-body {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: var(--text-18);
  line-height: 1.6;
}
.cb-body strong { color: var(--gc-coin-color); font-weight: 800; }

/* Mini progress rows inside the promo body */
.cb-mini-bar-row {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0;
}
.cb-mini-bar-row-cta { justify-content: flex-start; }
.cb-arrow {
  color: #00fcfd;
  font-size: var(--text-24);
  font-weight: 900;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

/* Tier table */
.cb-tier-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--text-14);
}
.cb-tier-table thead th {
  text-align: left;
  font-size: var(--text-12); letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.cb-tier-table tbody td {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cb-tier-table tbody tr:last-child td { border-bottom: 0; }
.cb-tier-table tbody tr.current {
  background: linear-gradient(90deg, rgba(254, 224, 57, 0.12), rgba(254, 224, 57, 0.02));
  position: relative;
}
.cb-tier-table tbody tr.current td:first-child {
  border-left: 3px solid var(--gc-coin-color);
}
.cb-tier-num {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600; font-family: var(--third-family);
  width: 80px;
}
.cb-tier-name {
  font-weight: 900; font-size: var(--text-18);
}
/* Club/Select keep bronze/silver medal colors as feature artwork (OQ-6) */
.cb-tier-name-club     { color: #cd9b6a; }
.cb-tier-name-select   { color: #c0c8d4; }
.cb-tier-name-elite    { color: #00fcfd; }
.cb-tier-name-prime    { color: var(--gc-coin-color); }
.cb-tier-name-pinnacle { color: var(--surface-plain); }
.cb-tier-pct {
  font-weight: 800; color: #ffffff;
  text-align: right;
}

/* Keep playing CTA section */
.cb-keep-playing {
  text-align: center;
  padding: 28px 24px 32px;
}
.cb-keep-playing-lead {
  font-size: var(--text-24); color: var(--text-primary);
  margin: 0 0 4px; opacity: 0.85;
}
.cb-keep-playing-tagline {
  font-size: var(--text-18); margin: 0 0 20px;
}
.cb-keep-playing-tagline strong { color: #ffffff; font-weight: 800; }
.cb-cta {
  display: inline-block;
  padding: 14px 40px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan);
  font-weight: 900; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.cb-cta:hover { filter: brightness(1.08); }
.cb-cta:active { transform: scale(0.98); }

/* Responsive — stack status pill content on small viewports */
@container page (max-width: 600px) {
  .cb-status { border-radius: var(--radius-lg); }
  .cb-status-progress-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cb-bar { max-width: 100%; min-width: 0; }
  .cb-mini-bar-row-cta { flex-wrap: wrap; }
  .cb-hero-art { display: none; }
  .cb-hero-banner { padding: 36px 18px 30px; }
}

/* ───────── Modal popup (mirrors coinz-market/coinz-market.css) ───────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px); z-index: 9990;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal-card {
  background: linear-gradient(165deg, var(--surface-lightest), var(--surface-lighter));
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.modal-card h2 {
  color: var(--text-primary);
  font-size: var(--text-24); font-weight: 600; margin-bottom: 14px;
}
.modal-card p { color: var(--text-secondary); font-size: var(--text-14); line-height: 1.55; margin-bottom: 10px; }
.modal-card ul, .modal-card ol { color: var(--text-secondary); font-size: var(--text-14); line-height: 1.6; margin: 8px 0 12px 18px; }
.modal-card li { margin-bottom: 4px; }
.modal-close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--text-primary); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.15); }

/* ───────── Responsive ───────── */
@container page (max-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .vip-levels   { grid-template-columns: repeat(3, 1fr); }
}
@container page (max-width: 900px) {
  .site-sidenav { display: none; }
  .hdr-search { display: none; }
  .hdr-theme-pill { display: none; }
  .howto { grid-template-columns: 1fr; }
  .cc-form-row { grid-template-columns: 1fr; }
  .cc-form-row .readout { text-align: left; }
  .vip-benefits { font-size: var(--text-12); }
}
@container page (max-width: 600px) {
  .calendar-grid { grid-template-columns: repeat(5, 1fr); }
  .feature-grid  { grid-template-columns: 1fr; }
  .vip-levels    { grid-template-columns: 1fr; }
  .tier-node     { min-width: 90px; }
  .hub-hero      { flex-direction: column; text-align: center; }
  .modal-card    { padding: 22px 18px 18px; }
  .modal-card h2 { font-size: var(--text-24); }
}
@container page (max-width: 480px) {
  .hdr-balance-pill { display: none; }
  .site-header { gap: 8px; padding: 0 12px; }
  .hdr-logo-mark, .hdr-logo-dot { font-size: 22px; }
}

/* ───────── Calendar reset button (reviewer-only debug affordance) ───────── */
.calendar-reset-btn {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: var(--text-primary);
  font: inherit; font-size: var(--text-14); font-weight: 600;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.calendar-reset-btn:hover {
  border-color: var(--border-primary);
  background: rgba(255, 255, 255, 0.08);
}
.calendar-reset-btn i { font-size: 16px; color: #00fcfd; }
.calendar-reset-tag {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--alert-warning);
  color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
}

/* ───────── Archive banner (vip.html — out of V1 scope) ───────── */
.archive-banner {
  margin: 20px 0 24px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: rgba(158, 133, 4, 0.12);
  border: 1px solid rgba(158, 133, 4, 0.5);
  border-left: 4px solid var(--alert-warning);
}
.archive-banner-title {
  font-weight: 800; font-size: var(--text-18);
  color: var(--gc-coin-color);
  margin-bottom: 6px;
}
.archive-banner-title i { margin-right: 8px; }
.archive-banner-body {
  font-size: var(--text-14); color: var(--text-secondary);
  margin: 0;
}
.archive-banner-body a {
  color: var(--link-color); font-weight: 700;
  text-decoration: none;
}
.archive-banner-body a:hover { text-decoration: underline; }

/* ───────── Engagement-feature teasers (R8 Hub Home fold-in) ───────── */
/* Reuses .feature-grid + .feature-card; adds button-element reset + icon spacing + section footnote */
button.feature-card {
  font: inherit; cursor: pointer; text-align: left;
  appearance: none; -webkit-appearance: none;
}
.feature-card .feature-name i {
  margin-right: 6px; color: #00fcfd;
}
.section-footnote {
  margin-top: 12px; color: var(--text-secondary);
  font-size: var(--text-14); font-style: italic;
}

/* ───────── Sidenav product selector (Casino | Predictions) ───────── */
/* Sits between the stable COINZ HUB section above and the dynamic
   product-category list below. Two-button toggle, mutually exclusive active state. */
.sidenav-product-selector {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 18px 0 14px;
  padding: 4px;
  background: var(--surface-dark-500);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}
.product-selector-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.product-selector-btn .bi {
  font-size: 16px;
}
.product-selector-btn:hover { color: var(--text-primary); }
.product-selector-btn.active {
  background: var(--surface-lightest-x3);
  border-color: transparent;
  color: var(--text-primary);
}

/* The dynamic product-category section inherits .sidenav-section base styles;
   add a subtle visual separation since there's no section header for these. */
.sidenav-section-product {
  margin-top: 0 !important;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ───────── Mobile bottom navigation (Casino / Predictions / Buy / Support / Menu) ───────── */
/* Hidden on desktop; revealed at phone breakpoint by the container query below.
   The Buy slot in the middle gets the red CTA treatment. */
.mobile-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 30;
  height: 64px;
  background: var(--surface-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px 8px 10px;
  align-items: center; justify-content: space-around;
}
.bottom-nav-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 4px 2px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 11px; font-weight: 600;
  line-height: 1.1;
  transition: color 0.12s ease;
}
.bottom-nav-item .bi {
  font-size: 22px;
}
.bottom-nav-item:hover, .bottom-nav-item:active {
  color: var(--text-primary);
}
.bottom-nav-item.active {
  color: var(--text-primary);
}
.bottom-nav-item span {
  white-space: nowrap;
}
/* The Buy slot — primary cyan round CTA, raised slightly above the bar */
.bottom-nav-buy {
  position: relative;
  color: var(--text-primary);
}
.bottom-nav-buy .bi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-circle);
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan);
  font-size: 22px;
  margin-top: -22px;
  box-shadow: var(--shadow-card);
}
.bottom-nav-buy span {
  margin-top: -2px;
  color: var(--text-primary);
  font-weight: 700;
}

/* Show bottom-nav + hide sidenav on phone viewport (container-query driven) */
@container page (max-width: 600px) {
  .site-sidenav { display: none; }
  .mobile-bottom-nav { display: flex; }
  .page-wrap { padding-bottom: 96px; }   /* keep content clear of fixed bottom-nav */
  #prototype-tools { bottom: 76px; }     /* nudge reviewer chrome above the bottom-nav */
  /* Hide the header hamburger button on mobile — it's redundant with
     the bottom-nav Menu button. The hamburger is the only .hdr-icon-btn
     that's a direct child of .site-header (the notification bell sits
     inside .hdr-right). */
  .site-header > .hdr-icon-btn { display: none; }
}

/* ───────── Mobile menu drawer ───────── */
/* On mobile, tapping the bottom-nav "Menu" button adds `mobile-menu-open` to body.
   The desktop sidenav becomes a slide-in drawer with the same content + a mobile header
   (Menu label + close X). A backdrop dismisses on tap. Desktop is unaffected. */
.sidenav-mobile-header { display: none; }
.mobile-menu-backdrop { display: none; }
.sidenav-close-btn {
  width: 36px; height: 36px; border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  font-size: 22px; line-height: 1;
  align-items: center; justify-content: center;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sidenav-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-primary);
}
.sidenav-mobile-header-title {
  font-size: 14px; font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.10em;
}

@container page (max-width: 600px) {
  body.mobile-menu-open .mobile-menu-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: 49;
    animation: mobileMenuFadeIn 0.18s ease-out;
  }
  /* Bottom-sheet drawer: slides up from the bottom, full-width with rounded top */
  body.mobile-menu-open .site-sidenav {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: 100%; max-width: none;
    max-height: 88vh;
    z-index: 50;
    overflow-y: auto;
    padding: 0 14px 24px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-card);
    animation: mobileMenuSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Drag-handle pill + title + close X stacked, sticky at top of the sheet */
  body.mobile-menu-open .sidenav-mobile-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 8px;
    margin: 0 -14px 8px;
    padding: 4px 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-dark);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  /* Drag-handle bar (iOS-style affordance) — spans both grid columns above the title row */
  body.mobile-menu-open .sidenav-mobile-header::before {
    content: '';
    grid-column: 1 / -1;
    justify-self: center;
    width: 44px; height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    margin: 6px 0 6px;
  }
  body.mobile-menu-open .sidenav-close-btn { display: flex; }

  /* In the bottom sheet, lay the COINZ HUB items in a 2-column grid
     (denser, fits more above the fold). Header keeps full width.
     Casino/Predictions category lists stay single-column — long labels
     ("Social Live Casino", "Entertainment", "Bonus Codes") scan better
     full-width and the category list is a primary nav surface. */
  body.mobile-menu-open .sidenav-section-hub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    row-gap: 8px;
  }
  body.mobile-menu-open .sidenav-section-hub .sidenav-section-head {
    grid-column: 1 / -1;
  }
}
@keyframes mobileMenuFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ───────── Prototype-tools collapse toggle ───────── */
/* When the panel has .collapsed, hide everything except the toggle pill.
   Chevron rotates 180° when expanded so it visually means "collapse →" or "← expand". */
.pt-collapse-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-size: 11px; line-height: 1;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  margin-right: 6px; padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pt-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-primary);
}
.pt-collapse-toggle .bi { transition: transform 0.2s ease; font-size: 11px; }
#prototype-tools:not(.collapsed) .pt-collapse-toggle .bi { transform: rotate(180deg); }
#prototype-tools.collapsed > :not(.pt-collapse-toggle) { display: none !important; }
/* Shrink the prototype-tools container to just-the-toggle when collapsed —
   override any padding / min-width / gap inherited from shared/theme.css. */
#prototype-tools.collapsed {
  padding: 3px !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 0 !important;
}
#prototype-tools.collapsed .pt-collapse-toggle {
  margin-right: 0;
  border: none;
  background: transparent;
  width: 20px; height: 20px;
}
#prototype-tools.collapsed .pt-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}
@keyframes mobileMenuSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ───────── Predictions Market page ───────── */
.predictions-header {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 28px 24px;
  margin-bottom: 24px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(38, 255, 34, 0.08) 0%, rgba(0, 252, 253, 0.06) 100%);
  border: 1px solid rgba(38, 255, 34, 0.18);
}
.predictions-header-copy h2 {
  font-size: var(--text-24); font-weight: 800;
  margin: 0 0 6px 0;
}
.predictions-header-copy h2 i {
  margin-right: 8px; color: #00fcfd;
}
.predictions-header-copy p {
  margin: 0; color: var(--text-secondary);
  font-size: var(--text-14); max-width: 560px;
}
.predictions-header-stats {
  display: flex; gap: 24px; flex-shrink: 0;
}
.pred-stat {
  display: flex; flex-direction: column; align-items: flex-end;
}
.pred-stat-num {
  font-size: var(--text-24); font-weight: 700; color: var(--sc-coin-color);
  font-family: var(--third-family); font-variant-numeric: tabular-nums;
}
.pred-stat-label {
  font-size: var(--text-12); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.prediction-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.prediction-card {
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.prediction-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-light);
}
.prediction-card-featured {
  background: linear-gradient(135deg, rgba(0, 252, 253, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: var(--border-light);
  padding: 22px 20px;
  gap: 14px;
}
.prediction-card-featured .pred-question {
  font-size: var(--text-18);
}

.pred-tag {
  font-size: var(--text-12); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
}
.pred-question {
  font-size: var(--text-14); font-weight: 700; line-height: 1.35;
  margin: 0;
}
.pred-meta {
  font-size: var(--text-12); color: var(--text-secondary); margin: 0;
}
.pred-outcomes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 4px;
}
.pred-outcome {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font: inherit; font-weight: 700; font-size: var(--text-14);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: filter 0.12s ease;
}
.pred-outcome:hover { filter: brightness(1.15); }
.pred-outcome-yes {
  background: rgba(38, 255, 34, 0.16);
  border: 1px solid rgba(38, 255, 34, 0.42);
  color: var(--sc-coin-color);
}
.pred-outcome-no {
  background: rgba(201, 31, 62, 0.25);
  border: 1px solid rgba(201, 31, 62, 0.6);
  color: #fff;
}
.pred-outcome-label {
  font-weight: 800; letter-spacing: 0.04em;
}
.pred-outcome-price {
  font-family: var(--third-family); font-weight: 700; font-variant-numeric: tabular-nums;
}

.prediction-empty {
  padding: 32px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  text-align: center;
  color: var(--text-secondary);
}
.prediction-empty i {
  font-size: 32px; color: var(--text-secondary); display: block; margin-bottom: 10px;
}
.prediction-empty a {
  color: var(--link-color); text-decoration: none; font-weight: 700;
}
.prediction-empty a:hover { text-decoration: underline; }

@container page (max-width: 768px) {
  .prediction-grid { grid-template-columns: 1fr; }
  .predictions-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .predictions-header-stats { gap: 18px; }
}

/* ───────── PROMO BANDS (Hub Home v3 — "midnight arcade") ─────────
   Marketing-surface treatment per the three Figma promo frames
   (Market 2667:6184, Connect 3021:11556, CoinzBack 2160:7244).
   Skeleton is shared (.promo-band + .band-*); skin varies per band
   via modifier class. Display font: Poppins (per Figma frames).
   Real art in assets/figma/ — see ASSET-MANIFEST.md. */

.promo-band {
  --band-accent: #00fcfd;
  position: relative;
  border-radius: var(--radius-lg);
  padding: 38px 40px;
  margin-bottom: 36px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: var(--surface-lighter);
}

/* per-band fields */
.promo-band--scratch {
  --band-accent: #00fcfd;
  background:
    radial-gradient(46% 60% at 14% 12%, rgba(0, 252, 253, 0.22), transparent 70%),
    radial-gradient(40% 55% at 88% 80%, rgba(42, 106, 209, 0.30), transparent 70%),
    linear-gradient(118deg, var(--surface-lightest) 0%, var(--surface-lighter) 45%, var(--surface-dark) 100%);
}
.promo-band--back {
  --band-accent: var(--gc-coin-color);
  background:
    radial-gradient(50% 65% at 80% 20%, rgba(255, 232, 73, 0.18), transparent 65%),
    radial-gradient(60% 80% at 20% 85%, rgba(0, 252, 253, 0.14), transparent 70%),
    linear-gradient(125deg, var(--surface-lightest) 0%, var(--surface-lighter) 42%, var(--surface-darkest) 100%);
}
.promo-band--connect {
  --band-accent: #00fcfd;
  background:
    radial-gradient(55% 70% at 82% 24%, rgba(0, 252, 253, 0.20), transparent 65%),
    linear-gradient(165deg, var(--accent-blue) 0%, var(--surface-lightest-x2) 48%, var(--surface-lightest) 100%);
}
.promo-band--market {
  --band-accent: var(--gc-coin-color);
  background:
    radial-gradient(70% 45% at 70% 0%, rgba(255, 232, 73, 0.14), transparent 70%),
    var(--surface-darkest);
}

/* sparkle layer (CSS-only particles; respects reduced motion below) */
.promo-band--masthead::after,
.promo-band--scratch::after,
.promo-band--back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 18% 28%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 64% 14%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 82% 58%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 38% 76%, rgba(255,255,255,.5), transparent),
    radial-gradient(2.5px 2.5px at 92% 22%, rgba(254,224,57,.8), transparent),
    radial-gradient(2px 2px at 8% 64%, rgba(254,224,57,.6), transparent);
  animation: sparks-drift 9s ease-in-out infinite alternate;
  opacity: .55;
}
@keyframes sparks-drift { to { transform: translateY(-10px); } }

/* shared skeleton */
.band-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
  margin-bottom: 14px;
}
.band-kicker::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--band-accent);
}
.band-head {
  font-family: var(--third-family);
  font-weight: 800;
  font-size: clamp(26px, 3.4cqw, 40px);
  line-height: 1.13; letter-spacing: -0.01em;
  margin-bottom: 12px; max-width: 24ch;
  position: relative; z-index: 1;
}
.hl-grad {
  background: linear-gradient(90deg, #00fcfd, #0078e5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hl-gold { color: var(--gc-coin-color); }
.band-sub {
  font-family: 'Poppins', var(--font-family);
  font-size: 15px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.80);
  max-width: 54ch; margin-bottom: 20px;
  position: relative; z-index: 1;
}
.band-sub strong { color: #fff; }

/* split layouts */
.band-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 38px; align-items: center; }
.band-split--art-left { grid-template-columns: 0.95fr 1.05fr; }
.band-split--art-left .band-art  { order: 1; }
.band-split--art-left .band-copy { order: 2; }
.band-copy { position: relative; z-index: 1; min-width: 0; }
.band-art { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
.band-art img { max-width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); animation: art-float 7s ease-in-out infinite; }
.band-art--halo::before {
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(50% 50% at 50% 50%, var(--band-halo, rgba(255,255,255,0.16)), transparent 70%);
}
@keyframes art-float { 50% { transform: translateY(-9px); } }

/* CTAs — pill recipe from the Figma frames */
.band-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-family);
  font-weight: 800; font-size: 14px; letter-spacing: -0.01em;
  text-transform: uppercase; text-decoration: none;
  padding: 13px 30px; border-radius: 100px;
  border: 1px solid #fff; cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  position: relative; z-index: 1;
}
.band-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.band-cta--cyan {
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan);
  box-shadow: var(--shadow-sm);
}
.band-cta--cyan:hover { box-shadow: var(--shadow-card); }
/* legacy modifier classes alias to the primary cyan recipe (OQ-2) */
.band-cta--magenta {
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan);
  box-shadow: var(--shadow-sm);
}
.band-cta--magenta:hover { box-shadow: var(--shadow-card); }
.band-cta--gold {
  background: var(--gold-gradient);
  color: var(--text-inverted-primary);
  box-shadow: var(--shadow-sm);
}
.band-cta--gold:hover { box-shadow: var(--shadow-card); }
.band-cta--ghost {
  background: rgba(15, 42, 92, 0.55);
  border-color: rgba(255, 255, 255, 0.85); color: #fff;
}
.band-cta--ghost:hover { background: rgba(15, 42, 92, 0.85); }
.band-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }

/* garnish: status chip, meta row, steps art */
.band-meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; position: relative; z-index: 1; }
.band-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface-dark-500);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
}
.band-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.band-chip--open .dot { background: var(--sc-coin-color); }
.band-chip--closed .dot { background: var(--alert-error); }
.band-chip [data-controller="countdown"] { font-family: var(--third-family); font-weight: 700; font-variant-numeric: tabular-nums; }
.band-chip .urgent { color: var(--gc-coin-color); }
.band-steps-art { height: 52px; width: auto; display: block; }

/* hero band internals: calendar harmonized to the dark field */
.band-divider { height: 1px; background: rgba(255, 255, 255, 0.13); margin: 28px 0 18px; position: relative; z-index: 1; }
.promo-band--scratch .calendar-meta,
.promo-band--scratch .calendar-grid,
.promo-band--scratch .calendar-footnote { position: relative; z-index: 1; }
.promo-band--scratch .calendar-cell { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); border-radius: 12px; }
.promo-band--scratch .calendar-cell.played { background: rgba(38, 255, 34, 0.14); border-color: rgba(38, 255, 34, 0.40); }
.promo-band--scratch .calendar-cell.locked { background: rgba(0, 0, 0, 0.30); border-color: rgba(255, 255, 255, 0.07); }
.promo-band--scratch .calendar-reset-btn { background: rgba(0, 0, 0, 0.25); }

/* hero ticket-fan placeholder art (SVG lives inline in HTML) */
.scratch-art { width: min(300px, 100%); }

/* mini tier ladder inside the Back band */
.promo-band .tier-ladder { margin: 16px 0 8px; position: relative; z-index: 1; }
.promo-band .tier-node { min-width: 82px; padding: 10px 6px; background: rgba(0, 0, 0, 0.25); }
.promo-band .tier-node .tier-rate { font-size: var(--text-18); }
.promo-band .tier-progress { background: rgba(0, 0, 0, 0.35); position: relative; z-index: 1; }

/* Market band: bull scene docked right, masked into the dark field */
.market-scene {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46%;
  background: url("assets/figma/market-bull-bg.png") right top / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
  opacity: 0.92; pointer-events: none;
}
.market-copy { max-width: 56%; }
@container page (max-width: 860px) { .market-copy { max-width: none; } }
.market-wordmark { height: 72px; width: auto; margin-bottom: 16px; display: block; animation: art-float 7s ease-in-out infinite; }
.market-hours-art { height: 46px; width: auto; display: block; }

/* engagement quartet: per-card accent (all ratified values) */
.feature-card { --card-accent: #00fcfd; }
.fc-quests { --card-accent: var(--gc-coin-color); }
.fc-races  { --card-accent: #00fcfd; }
.fc-raf    { --card-accent: var(--sc-coin-color); }
.fc-codes  { --card-accent: var(--accent-blue); }
.feature-card .feature-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 2px;
  background: color-mix(in srgb, var(--card-accent) 18%, transparent);
  color: var(--card-accent);
}
.feature-card:hover { border-color: var(--card-accent); box-shadow: var(--shadow-card); }
.feature-card .feature-tag,
.feature-card .feature-open { color: var(--card-accent); }

/* scroll reveal (driven by reveal_controller.js) */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--ri, 0) * 90ms);
}
.is-revealed [data-reveal] { opacity: 1; transform: none; }

/* responsive collapse (same container-query system as the rest of the page) */
@container page (max-width: 860px) {
  .promo-band { padding: 26px 22px; }
  .band-split, .band-split--art-left { grid-template-columns: 1fr; gap: 22px; }
  .band-split--art-left .band-art { order: 2; }
  .band-split--art-left .band-copy { order: 1; }
  .band-art img { max-width: min(320px, 80%); }
  .market-scene { width: 100%; opacity: 0.22; -webkit-mask-image: none; mask-image: none; }
  .band-head { max-width: none; }
}
@container page (max-width: 600px) {
  .market-wordmark { height: 56px; }
  .band-cta { width: 100%; justify-content: center; }
  .feature-grid-engagement { grid-template-columns: 1fr 1fr; }
}
@container page (max-width: 420px) {
  .feature-grid-engagement { grid-template-columns: 1fr; }
}

/* reduced motion: kill the theatre, keep the content */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .band-art img, .market-wordmark,
  .promo-band--scratch::after, .promo-band--back::after,
  .calendar-cell.today { animation: none !important; }
}

/* calendar fit inside the hero band: shrinkable tracks (D15's text was
   blowing the 15-col grid past the band edge), wrap on mid widths */
.promo-band--scratch .calendar-grid { grid-template-columns: repeat(15, minmax(0, 1fr)); }
.promo-band--scratch .calendar-cell { min-height: 0; min-width: 0; }
@container page (max-width: 1240px) {
  .promo-band--scratch .calendar-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@container page (max-width: 600px) {
  .promo-band--scratch .calendar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* the Back wordmark ships on its own purple plate; round it into the band */
.promo-band--back .band-art img { border-radius: 18px; }

/* ───────── v3.1: Hub masthead (band 0) + paired engagement heroes ───────── */

/* smooth anchor scrolling for the masthead chips (motion-guarded) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.promo-band[id] { scroll-margin-top: 16px; }

/* masthead: compact marquee above the feature bands */
.promo-band--masthead {
  --band-accent: #00fcfd;
  padding: 32px 40px 28px;
  background:
    radial-gradient(60% 90% at 85% 8%, rgba(0, 252, 253, 0.18), transparent 65%),
    radial-gradient(45% 80% at 6% 92%, rgba(42, 106, 209, 0.24), transparent 65%),
    linear-gradient(115deg, var(--surface-lighter) 0%, var(--surface-darkest) 55%, var(--surface-dark) 100%);
}
.promo-band--masthead .band-head { font-size: clamp(28px, 3.8cqw, 46px); max-width: none; }
.promo-band--masthead .band-sub { max-width: 72ch; margin-bottom: 4px; }

/* duo bands: one band, two mini-heroes */
.promo-band--duo-compete {
  background:
    radial-gradient(50% 80% at 12% 18%, rgba(254, 224, 57, 0.14), transparent 65%),
    radial-gradient(50% 80% at 88% 82%, rgba(0, 252, 253, 0.14), transparent 65%),
    linear-gradient(125deg, var(--surface-lighter) 0%, var(--surface-darkest) 60%, var(--surface-darkest) 100%);
}
.promo-band--duo-coins {
  background:
    radial-gradient(50% 80% at 12% 18%, rgba(38, 255, 34, 0.13), transparent 65%),
    radial-gradient(50% 80% at 88% 82%, rgba(42, 106, 209, 0.13), transparent 65%),
    linear-gradient(125deg, var(--surface-lighter) 0%, var(--surface-darkest) 60%, var(--surface-darkest) 100%);
}
.duo-grid {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: 34px; align-items: start;
  position: relative; z-index: 1;
}
.duo-rule { background: rgba(255, 255, 255, 0.13); align-self: stretch; }
.duo-half { min-width: 0; }
.duo-half .feature-ico {
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--card-accent) 18%, transparent);
  color: var(--card-accent);
}
.duo-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--card-accent); margin-bottom: 6px;
}
.duo-head {
  font-family: var(--third-family); font-weight: 800;
  font-size: 22px; line-height: 1.2; margin-bottom: 8px;
}
.duo-blurb {
  font-family: var(--third-family);
  font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px; max-width: 44ch;
}
.band-cta--sm { padding: 10px 22px; font-size: 12.5px; }
.band-cta--duo {
  background: color-mix(in srgb, var(--card-accent) 16%, rgba(0, 0, 0, 0.3));
  border-color: color-mix(in srgb, var(--card-accent) 70%, white);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.band-cta--duo:hover {
  box-shadow: var(--shadow-card);
}
.promo-band--duo .section-footnote { margin-top: 22px; position: relative; z-index: 1; }

@container page (max-width: 860px) {
  .duo-grid { grid-template-columns: 1fr; gap: 22px; }
  .duo-rule { height: 1px; width: 100%; align-self: auto; }
  .promo-band--masthead .band-head { font-size: clamp(26px, 6cqw, 34px); }
}

/* ───────── v3.2: scratchcard day carousel ─────────
   Snap-scroll ticket rail replacing the 15-cell grid. States painted by
   scratch_calendar_controller (single authority); .calendar-grid rules
   above are dead after this and go with the next cleanup pass. */
.cal-carousel { position: relative; display: flex; align-items: center; gap: 10px; z-index: 1; }
.cal-rail {
  display: flex; gap: 14px; align-items: flex-end;
  overflow-x: auto; flex: 1; min-width: 0;
  scroll-snap-type: x proximity;
  padding: 16px 4px 10px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cal-rail::-webkit-scrollbar { display: none; }
.cal-card {
  flex: 0 0 auto; width: 128px; height: 170px;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 10px 10px;
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  color: var(--text-primary); font-family: inherit; cursor: pointer;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.cal-card:hover { transform: translateY(-4px); }
.cal-card-day {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.75;
}
.cal-card-ico { font-size: 30px; line-height: 1; margin-top: 6px; }
.cal-card-state { font-size: 11px; font-weight: 700; opacity: 0.85; }
.cal-card-foil {
  margin-top: auto; width: 100%; height: 34px; border-radius: var(--radius-md);
  background: linear-gradient(100deg, #aebbe0, #eef3ff 45%, #c8d4f2);
  display: flex; align-items: center; justify-content: center;
  color: #3a4668; font-size: 11px; font-weight: 800;
}
/* state skins */
.cal-card.played {
  background: linear-gradient(160deg, rgba(38, 255, 34, 0.16), rgba(38, 255, 34, 0.05));
  border-color: rgba(38, 255, 34, 0.35);
}
.cal-card.played .cal-card-ico { color: var(--sc-coin-color); }
.cal-card.played .cal-card-foil { background: rgba(0, 0, 0, 0.30); color: var(--sc-coin-color); }
.cal-card.played .cal-card-foil::after { content: "+0.40 SC"; } /* mock prize, constant for the PoC */
.cal-card.missed { opacity: 0.55; background: rgba(255, 255, 255, 0.04); }
.cal-card.missed .cal-card-ico { color: var(--text-secondary); }
.cal-card.missed .cal-card-foil { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); }
.cal-card.missed .cal-card-foil::after { content: "Forfeited"; }
.cal-card.today {
  width: 146px; height: 186px;
  background: var(--accent-cyan-gradient);
  border-color: transparent;
  box-shadow: var(--shadow-card);
  animation: today-pulse 2s ease-in-out infinite;
}
.cal-card.today::before {
  content: "TODAY"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--surface-plain); color: var(--text-inverted-primary);
  font-size: 9px; font-weight: 900; letter-spacing: 0.12em;
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.cal-card.today .cal-card-ico { color: var(--text-on-cyan); font-size: 34px; }
.cal-card.today .cal-card-day { opacity: 1; color: var(--text-on-cyan); }
.cal-card.today .cal-card-state { color: var(--text-on-cyan); }
.cal-card.today .cal-card-foil::after { content: "SCRATCH ME"; letter-spacing: 0.06em; }
.cal-card.locked { background: rgba(0, 0, 0, 0.30); border-color: rgba(255, 255, 255, 0.08); }
.cal-card.locked .cal-card-ico { color: rgba(255, 255, 255, 0.45); }
.cal-card.locked .cal-card-foil { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.55); }
.cal-card.locked .cal-card-foil::after { content: "?"; }
.cal-card.cliff {
  border: 1px dashed rgba(201, 31, 62, 0.7);
  background: rgba(201, 31, 62, 0.2);
  color: #fff;
}
.cal-card.cliff .cal-card-ico { color: #fff; }
.cal-card.cliff .cal-card-state { color: #fff; }
.cal-card.cliff .cal-card-foil { background: rgba(201, 31, 62, 0.45); color: #fff; }
.cal-card.cliff .cal-card-foil::after { content: "OUT OF CARDS"; font-size: 10px; }
/* rail nav */
.cal-nav {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-circle);
  background: var(--surface-lightest-x2); border: 1px solid var(--surface-lightest-x3);
  color: #fff; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; z-index: 2;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cal-nav:hover { filter: brightness(1.25); transform: scale(1.08); }
.cal-nav:disabled { opacity: 0.35; }
/* progress dots */
.cal-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; position: relative; z-index: 1; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.cal-dot.played { background: var(--sc-coin-color); }
.cal-dot.missed { background: rgba(255, 255, 255, 0.30); }
.cal-dot.today  { background: #00fcfd; width: 9px; height: 9px; }
.cal-dot.cliff  { background: rgba(201, 31, 62, 0.7); }
.promo-band--scratch .calendar-reset-btn { margin-top: 14px; width: 100%; position: relative; z-index: 1; }

@container page (max-width: 600px) {
  .cal-nav { display: none; }
  .cal-card { width: 112px; height: 152px; }
  .cal-card.today { width: 126px; height: 166px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-card.today { animation: none; }
  .cal-card:hover { transform: none; }
}

/* ───────── v3.5: tab pill row scrolls as a single-row carousel ─────────
   Overrides the wrap behavior in the base .page-tabs-inner rule: pills stay
   on one swipeable row at every width (all 6 pages share this markup). The
   inner box caps at 100% and scrolls internally; when content fits, the
   outer flex still centers it. */
.page-tabs-inner {
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.page-tabs-inner::-webkit-scrollbar { display: none; }
.page-tab { flex-shrink: 0; scroll-snap-align: start; }
@container page (max-width: 600px) {
  .page-tabs-inner {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
}

/* ───────── v3.6: Connect band, native labeled steps + framed art ───────── */
.steps-flow { display: flex; align-items: flex-start; position: relative; z-index: 1; }
.steps-flow .step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 74px;
}
.steps-flow .step-num {
  width: 34px; height: 34px; border-radius: var(--radius-circle);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--third-family); font-weight: 800; font-size: 15px;
  background: var(--surface-dark-500);
  border: 2px solid #00fcfd; color: #00fcfd;
}
.steps-flow .step-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.steps-flow .step-link {
  flex: 0 0 22px; height: 2px; margin-top: 16px;
  background: rgba(255, 255, 255, 0.35); border-radius: 2px;
}
/* framed art window: rounded overflow + bottom fade dissolve the raster
   crop edges (hard bottom cut, clipped bolts). Float/drop-shadow disabled
   inside the frame; a moving mask edge reads as a crop slip. */
.connect-art-frame {
  width: 100%; max-width: 320px; height: 240px;
  border-radius: var(--radius-lg); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.connect-art-frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  animation: none; filter: none;
}
@container page (max-width: 860px) {
  .connect-art-frame { height: 190px; max-width: 300px; }
}

/* ───────── v3.7: Hub Home section-jump nav ─────────
   The top tab row on Home becomes a sticky in-page nav: each pill jumps to a
   section band and the active pill tracks the section in view (scrollspy, see
   section_nav_controller.js). Sticky so it stays reachable after a jump; the
   window is the scroll container, so plain top:0 pins it to the viewport once
   the (non-sticky) site header scrolls away. Only Home uses this variant; the
   inner pages keep the base cross-page .page-tabs. */
.page-tabs--sections {
  position: sticky; top: 0; z-index: 30;
  margin-bottom: 24px; padding: 10px 0;
  background: color-mix(in srgb, var(--surface-dark) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Compact the pills so all eight sit on one row at desktop width; on phone the
   v3.5 carousel rule still scrolls them horizontally. */
.page-tabs--sections .page-tab {
  padding: 8px 15px;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Landing offset: a jumped-to section settles just below the sticky bar instead
   of tucking under it. */
#band-scratch, #band-freespins, #band-back, #band-connect, #band-market,
#feat-quests, #feat-races, #feat-raf, #feat-codes {
  scroll-margin-top: 84px;
}

/* ───────── v3.10: engagement features each get their own band ─────────
   The two side-by-side duo bands are split into four full-width sections that
   use the same .band-split skeleton as Coinz Back / Connect. These features
   have no brand art (unlike Back/Connect/Market), so the art column is a glowing
   icon medallion tinted to the band accent. (The old .duo-* / .promo-band--duo
   rules above are now unused on Home.) */
.promo-band--quests {
  --band-accent: var(--gc-coin-color);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(254, 224, 57, 0.16), transparent 60%),
    radial-gradient(55% 70% at 50% 100%, rgba(42, 106, 209, 0.10), transparent 72%),
    linear-gradient(180deg, var(--surface-lighter) 0%, var(--surface-darkest) 100%);
}
.promo-band--races {
  --band-accent: #00fcfd;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(0, 252, 253, 0.16), transparent 60%),
    radial-gradient(55% 60% at 50% 100%, rgba(42, 106, 209, 0.08), transparent 72%),
    linear-gradient(180deg, var(--surface-lighter) 0%, var(--surface-darkest) 100%);
}
.promo-band--raf {
  --band-accent: var(--sc-coin-color);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(38, 255, 34, 0.12), transparent 60%),
    radial-gradient(55% 60% at 50% 100%, rgba(38, 255, 34, 0.08), transparent 72%),
    linear-gradient(180deg, var(--surface-lighter) 0%, var(--surface-darkest) 100%);
}
.promo-band--codes {
  --band-accent: var(--accent-blue);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(42, 106, 209, 0.16), transparent 60%),
    radial-gradient(55% 60% at 50% 100%, rgba(38, 255, 34, 0.08), transparent 72%),
    linear-gradient(180deg, var(--surface-lighter) 0%, var(--surface-darkest) 100%);
}

/* legacy green variant aliases to the primary cyan recipe (OQ-2) */
.band-cta--green {
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan);
  box-shadow: var(--shadow-sm);
}
.band-cta--green:hover { box-shadow: var(--shadow-card); }

/* icon medallion standing in for brand art on the engagement bands */
.feature-art {
  width: clamp(150px, 22cqw, 220px);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(60px, 10cqw, 104px);
  color: var(--band-accent);
  background:
    radial-gradient(60% 60% at 50% 38%, color-mix(in srgb, var(--band-accent) 30%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--band-accent) 42%, rgba(255, 255, 255, 0.12));
  box-shadow: var(--shadow-card);
  animation: art-float 7s ease-in-out infinite;
  position: relative; z-index: 1;
}

.promo-band--codes .section-footnote { margin-top: 22px; position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .feature-art { animation: none; }
}

/* ───────── v3.11: Bonus Codes inline redemption card ─────────
   Redeem flow built into the page (no pop-up). Reproduces the Figma pop-up
   composition inline: neon BONUS CODE artwork on top, royal-blue redeem panel
   below, centered in the band. Controller: bonus_code_controller.js */
.coderedeem {
  max-width: 560px; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-darkest);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-card);
  position: relative; z-index: 1;
}
.coderedeem-art { display: block; line-height: 0; }
.coderedeem-art img { width: 100%; height: auto; display: block; }
.coderedeem-panel {
  position: relative; z-index: 1;
  margin-top: -22px;
  padding: 26px 32px 30px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(180deg, var(--surface-lightest-x3) 0%, var(--surface-lightest) 100%);
  text-align: center;
}
.coderedeem-title {
  font-family: var(--third-family);
  font-weight: 800; font-size: clamp(20px, 2.4cqw, 26px);
  letter-spacing: 0.01em; text-transform: uppercase;
  color: #fff; margin: 0 0 8px;
}
.coderedeem-sub {
  font-family: var(--third-family);
  font-size: 15px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 38ch; margin: 0 auto 18px;
}
/* v2 form dialect (OQ-9): warm off-white fill, dark navy 13/700 text, 14px radius */
.coderedeem-input {
  width: 100%; box-sizing: border-box;
  height: 50px; padding: 0 22px; margin-bottom: 14px;
  border-radius: var(--radius-input-v2);
  background: var(--v2-input-form);
  border: 0;
  color: var(--v2-input-color);
  font-family: var(--font-family); font-size: 13px; font-weight: 700;
  text-align: center;
}
.coderedeem-input::placeholder {
  color: var(--v2-input-placeholder-color);
  font-weight: var(--v2-input-placeholder-weight);
}
.coderedeem-input:focus {
  outline: none;
  border: var(--v2-input-border-focus);
  background: var(--v2-input-background-focus);
}
.coderedeem-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coderedeem-btn {
  padding: 14px 20px; border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-weight: 900; font-size: 15px; letter-spacing: 0.02em;
  text-transform: uppercase; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.coderedeem-btn:hover { filter: brightness(1.08); }
.coderedeem-btn:active { transform: scale(0.98); }
.coderedeem-btn--cancel {
  background: transparent;
  border-color: var(--border-primary); color: #fff;
}
.coderedeem-btn--cancel:hover { background: rgba(255, 255, 255, 0.16); }
.coderedeem-btn--claim {
  background: var(--accent-cyan-gradient); color: var(--text-on-cyan);
  box-shadow: var(--shadow-sm);
}
.coderedeem-msg {
  margin: 14px auto 0; min-height: 1.2em;
  font-size: 14px; font-weight: 700;
  opacity: 0; transition: opacity 0.2s ease;
}
.coderedeem-msg.is-shown { opacity: 1; }
/* alert tokens are chip fills with white text, never bare text on navy (OQ-7) */
.coderedeem-msg[data-kind="success"],
.coderedeem-msg[data-kind="error"] {
  display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill);
  color: #fff;
}
.coderedeem-msg[data-kind="success"] { background: var(--alert-success); }
.coderedeem-msg[data-kind="error"] { background: var(--alert-error); }

@container page (max-width: 600px) {
  .coderedeem-panel { padding: 22px 20px 26px; }
}

/* ───────── v3.13: Refer a Friend inline card ─────────
   Redeem-style card built into the page (no pop-up): purple gradient header with
   the two-friends illustration + title, blue body with referral link + Copy,
   stats panel, and Share. Controller: refer_friend_controller.js. Same card at
   both breakpoints (the Figma desktop + mobile frames share it). */
.refer {
  max-width: 360px; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  position: relative; z-index: 1;
}
.refer-header {
  position: relative; min-height: 224px;
  background: linear-gradient(180deg, var(--accent-blue) 0%, var(--surface-lightest-x3) 100%);
  display: flex; justify-content: center;
}
.refer-title {
  position: relative; z-index: 1; margin: 26px 0 0;
  font-family: var(--third-family);
  font-weight: 700; font-size: 24px; color: #fff; text-align: center;
}
.refer-art {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 94%; max-width: 340px; height: auto; pointer-events: none;
}
.refer-body {
  background: var(--surface-lightest); padding: 22px 16px 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.refer-intro {
  margin: 0; text-align: center;
  font-family: var(--font-family); font-size: 20px; color: #fff;
}
.refer-code { display: flex; flex-direction: column; gap: 6px; }
.refer-code-label { font-size: 15px; color: var(--text-secondary); text-align: center; letter-spacing: -0.4px; }
.refer-input {
  display: flex; align-items: center; gap: 10px; height: 42px;
  background: var(--surface-dark); border-radius: var(--radius-md); padding: 8px 8px 8px 14px;
}
.refer-link {
  flex: 1; min-width: 0; color: var(--text-secondary); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.refer-copy {
  flex-shrink: 0; cursor: pointer; border: 0;
  background: var(--accent-cyan-gradient); color: var(--text-on-cyan);
  border-radius: var(--radius-pill); padding: 6px 12px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.4px;
  font-family: inherit; transition: filter 0.15s ease, background 0.15s ease;
}
.refer-copy:hover { filter: brightness(1.08); }
.refer-copy.is-copied { background: var(--alert-success); color: #fff; }
.refer-stats {
  background: var(--surface-lightest-x3); border-radius: var(--radius-md); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.refer-stat { display: flex; align-items: center; gap: 12px; }
.refer-stat-label { flex: 1; color: #fff; font-size: 16px; }
.refer-stat-label--strong { font-weight: 700; }
.refer-stat-value {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: 16px; font-weight: 600; padding-right: 10px;
}
.sc-coin {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: var(--text-inverted-primary); letter-spacing: -0.5px;
  background: linear-gradient(180deg, var(--accent-green), var(--alert-success));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0.5px 1px rgba(0, 0, 0, 0.25),
              inset 0 0.5px 1px rgba(255, 255, 255, 0.45);
}
.refer-share {
  width: 100%; cursor: pointer; border: 0;
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan); border-radius: var(--radius-pill); padding: 13px 16px;
  font-family: var(--font-family);
  font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.4px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.refer-share:hover { filter: brightness(1.08); }
.refer-share:active { transform: scale(0.98); }
.refer-msg {
  margin: 0; min-height: 1em; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--sc-coin-color);
  opacity: 0; transition: opacity 0.2s ease;
}
.refer-msg.is-shown { opacity: 1; }

/* ───────── v3.15: Daily Quests inline feature ─────────
   Replaces the pop-up with a mission carousel built into the page. Strict
   sequential: only the active quest is actionable, earlier ones show done, later
   ones are locked placeholders with hidden content. GC/SC toggle swaps the reward
   currency (CSS shows/hides the .gc vs .sc spans via the panel mode class).
   Controller: daily_quests_controller.js; snap-rail mirrors the scratchcard hero. */

/* gold GC coin badge (sibling to .sc-coin) */
.gc-coin {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 800; color: var(--text-inverted-primary); letter-spacing: -0.5px;
  background: linear-gradient(180deg, #ffe849 0%, #ffbe08 55%, #b9810f 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0.5px 1px rgba(0, 0, 0, 0.25),
              inset 0 0.5px 1px rgba(255, 255, 255, 0.5);
}
.dquest .sc-coin { width: 20px; height: 20px; font-size: 7.5px; }

.dquest { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }

/* header: logo + currency toggle */
.dquest-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dquest-logo { height: 64px; width: auto; display: block; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4)); }
.dquest-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-dark-500); border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.dq-toggle-btn {
  border: 0; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.7);
  font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 8px 16px; border-radius: 100px;
  transition: background 0.18s ease, color 0.18s ease;
}
.dquest.mode-gc .dq-toggle-gc { background: var(--gold-gradient); color: var(--text-inverted-primary); }
.dquest.mode-sc .dq-toggle-sc { background: linear-gradient(180deg, var(--accent-green), var(--alert-success)); color: var(--text-inverted-primary); }

/* currency show/hide (scoped to the panel) */
.dquest .gc, .dquest .sc { display: inline-flex; align-items: center; gap: 5px; }
.dquest.mode-gc .sc { display: none; }
.dquest.mode-sc .gc { display: none; }

/* meta: progress + total prize pool */
.dquest-meta { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.dquest-progress { flex: 1; min-width: 200px; }
.dquest-progress-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px;
}
.dquest-progress-row strong { color: #fff; font-size: 16px; }
.dquest-bar { height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-dark-500); }
.dquest-bar-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: var(--gold-gradient);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dquest-pool { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.dquest-pool-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.06em; }
.dquest-pool-amt { font-size: 18px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 7px; }

/* carousel */
.dquest-carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.dq-nav {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-circle);
  border: 1px solid var(--surface-lightest-x3); background: var(--surface-lightest-x2);
  color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; transition: filter 0.15s ease, transform 0.15s ease;
}
.dq-nav:hover { filter: brightness(1.25); transform: scale(1.08); }
.dq-nav:disabled { opacity: 0.35; }
.dq-rail {
  display: flex; gap: 16px; flex: 1; min-width: 0;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px 2px 12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.dq-rail::-webkit-scrollbar { display: none; }

/* mission card */
.dq-card {
  position: relative; flex: 0 0 auto; width: 256px; scroll-snap-align: center;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
}
.dq-card-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 232px; }
.dq-card-top { display: flex; align-items: center; justify-content: space-between; }
.dq-thumb { width: 46px; height: 46px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.dq-thumb--play    { background: color-mix(in srgb, #00fcfd 18%, transparent); color: #00fcfd; }
.dq-thumb--refer   { background: color-mix(in srgb, var(--sc-coin-color) 18%, transparent);   color: var(--sc-coin-color); }
.dq-thumb--deposit { background: rgba(254, 224, 57, 0.18); color: var(--gc-coin-color); }
.dq-reward { font-size: 15px; font-weight: 800; color: #fff; }
.dq-title { font-family: var(--third-family); font-weight: 800; font-size: var(--text-18); margin: 2px 0 0; color: #fff; }
.dq-desc { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.72); margin: 0; flex: 1; }
.dq-cta {
  margin-top: auto; cursor: pointer; border: 0; width: 100%;
  background: var(--accent-cyan-gradient); color: var(--text-on-cyan);
  border-radius: var(--radius-pill); padding: 11px 16px;
  font-family: var(--font-family);
  font-weight: 900; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.dq-cta:hover { filter: brightness(1.08); }
.dq-cta:active { transform: scale(0.98); }
.dq-pass {
  cursor: pointer; border: 0; background: transparent; color: rgba(255, 255, 255, 0.5);
  font-family: inherit; font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px;
  padding: 2px; align-self: center; transition: color 0.15s ease;
}
.dq-pass:hover { color: rgba(255, 255, 255, 0.82); }
.dq-done-label {
  display: none; align-items: center; justify-content: center; gap: 6px;
  margin-top: auto; padding: 11px; color: var(--sc-coin-color); font-weight: 800;
  font-size: 13px; text-transform: uppercase;
}
.dq-done-label .bi { font-size: 16px; }

/* card states */
.dq-card.is-active { border-color: var(--gc-coin-color); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.dq-card:not(.is-active) .dq-cta,
.dq-card:not(.is-active) .dq-pass { display: none; }
.dq-card.is-done { opacity: 0.85; background: linear-gradient(165deg, rgba(38, 255, 34, 0.12), rgba(38, 255, 34, 0.03)); border-color: rgba(38, 255, 34, 0.30); }
.dq-card.is-done .dq-done-label { display: flex; }

/* locked overlay (strict sequential: hide content) */
.dq-lock {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px;
  background: rgba(0, 7, 36, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 700;
}
.dq-lock .bi { font-size: 26px; color: rgba(255, 255, 255, 0.55); }
.dq-card.is-locked .dq-lock { display: flex; }
.dq-card.is-locked .dq-card-body { visibility: hidden; } /* strict sequential: hide ahead */

/* let the `hidden` attribute win over the display rules on these blocks */
.dquest-carousel[hidden], .dquest-complete[hidden] { display: none; }

/* completion celebration */
.dquest-complete {
  text-align: center; padding: 22px 16px; border-radius: var(--radius-lg);
  border: 1px solid rgba(254, 224, 57, 0.3);
  background: radial-gradient(70% 90% at 50% 0%, rgba(254, 224, 57, 0.16), transparent 65%), var(--surface-dark-500);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.dquest-complete-ico { font-size: 40px; color: var(--gc-coin-color); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.dquest-complete h3 { font-family: var(--third-family); font-weight: 800; font-size: 22px; margin: 0; color: #fff; }
.dquest-complete p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.dquest-complete-reward { font-size: 22px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; }
.dquest-complete-reward .gc-coin, .dquest-complete-reward .sc-coin { width: 26px; height: 26px; font-size: 9px; }
.dquest-complete-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.dq-cross, .dq-share {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: var(--radius-pill);
  padding: 11px 20px; font-family: inherit; font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
  border: 1px solid var(--border-primary); transition: filter 0.15s ease;
}
.dq-cross { background: transparent; color: #fff; }
.dq-cross:hover { background: rgba(255, 255, 255, 0.16); }
.dq-share { background: var(--accent-cyan-gradient); color: var(--text-on-cyan); border-color: transparent; }
.dq-cross:hover, .dq-share:hover { filter: brightness(1.08); }

/* reviewer-only reset */
.dquest-reset {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.7); border-radius: 100px; padding: 8px 16px;
  font-family: inherit; font-size: 12px; font-weight: 700;
}
.dquest-reset:hover { color: #fff; }
.dquest-reset-tag { font-size: 9px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); }

@container page (max-width: 600px) {
  .dquest-logo { height: 52px; }
  .dq-nav { display: none; }
  .dq-card { width: 80cqw; max-width: 300px; }
  .dquest-pool { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dquest-bar-fill, .dq-card { transition: none; }
}

/* ───────── v3.17: Hourly Races inline leaderboard ─────────
   Replaces the pop-up with a card: Live / History / Info tabs, a GC/SC toggle that
   swaps the live board scores (CSS show/hide .gc vs .sc via panel mode class), and a
   ticking countdown. Controller: hourly_races_controller.js; History reuses the
   snap-rail; rank medals reuse the Coinz Back tier palette. */
.lb { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }

/* header */
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lb-logo { height: 52px; width: auto; display: block; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)); }
.lb-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lb-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-dark-500); border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.10); }
.lb-toggle-btn {
  border: 0; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.7);
  font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 8px 14px; border-radius: 100px; transition: background 0.18s ease, color 0.18s ease;
}
.lb.mode-gc .lb-toggle-gc { background: var(--gold-gradient); color: var(--text-inverted-primary); }
.lb.mode-sc .lb-toggle-sc { background: linear-gradient(180deg, var(--accent-green), var(--alert-success)); color: var(--text-inverted-primary); }
.lb-countdown {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-dark-500); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; color: rgba(255, 255, 255, 0.82);
}
.lb-countdown .bi { color: #00fcfd; }
.lb-countdown strong { font-family: var(--third-family); font-variant-numeric: tabular-nums; color: #fff; }

/* currency show/hide */
.lb .gc, .lb .sc { display: inline; }
.lb.mode-gc .sc { display: none; }
.lb.mode-sc .gc { display: none; }

/* tabs */
.lb-tabs { display: inline-flex; align-self: center; gap: 4px; padding: 4px; background: var(--surface-dark-500); border-radius: var(--radius-pill); }
.lb-tab {
  border: 0; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.72);
  font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.03em;
  padding: 8px 22px; border-radius: 100px; transition: background 0.18s ease, color 0.18s ease;
}
.lb-tab.is-active { background: var(--accent-cyan-gradient); color: var(--text-on-cyan); }
.lb-view[hidden] { display: none; }

/* avatars (gradient circle + initial; hue via --av) */
.lb-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, hsl(var(--av, 210) 75% 58%), hsl(var(--av, 210) 75% 40%));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.lb-avatar--lg { width: 58px; height: 58px; font-size: 22px; }
.lb-avatar--sm { width: 34px; height: 34px; font-size: 13px; }
.lb-avatar--you { box-shadow: inset 0 0 0 2px rgba(254, 224, 57, 0.7); }

/* podium */
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding-top: 6px; }
.lb-place { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; max-width: 150px; min-width: 0; }
.lb-place-name { font-weight: 700; font-size: 13px; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-place-score { font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.lb-crown { color: var(--gc-coin-color); font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.lb-block { width: 100%; border-radius: var(--radius-md) var(--radius-md) 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; margin-top: 2px; color: rgba(0, 7, 36, 0.75); font-family: var(--third-family); font-weight: 900; font-size: 18px; }
.lb-place--1 .lb-block { height: 64px; background: linear-gradient(180deg, #ffe849, #ffbe08); }
.lb-place--2 .lb-block { height: 48px; background: linear-gradient(180deg, #d6def0, #c0c8d4); }
.lb-place--3 .lb-block { height: 36px; background: linear-gradient(180deg, #e0b083, #cd9b6a); }

/* list rows */
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.lb-row--sm { padding: 6px 8px; gap: 8px; background: rgba(255, 255, 255, 0.04); }
.lb-rank {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; background: rgba(255, 255, 255, 0.10);
}
.lb-rank--1 { background: linear-gradient(180deg, #ffe849, #ffbe08); color: var(--text-inverted-primary); }
/* silver/bronze medal colors stay as feature artwork (OQ-6) */
.lb-rank--2 { background: linear-gradient(180deg, #d6def0, #c0c8d4); color: #29303f; }
.lb-rank--3 { background: linear-gradient(180deg, #e0b083, #cd9b6a); color: #3a2400; }
.lb-rank--4, .lb-rank--5 { background: rgba(42, 106, 209, 0.4); color: #fff; }
.lb-rank--you { background: transparent; border: 1px dashed rgba(254, 224, 57, 0.7); color: var(--gc-coin-color); }
.lb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-name { font-weight: 700; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-game { font-size: 12px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-game--muted { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.lb-score { flex-shrink: 0; font-weight: 800; font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.lb-you { background: rgba(254, 224, 57, 0.10); border-color: rgba(254, 224, 57, 0.35); }

.lb-share {
  align-self: stretch; cursor: pointer; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent-cyan-gradient); color: var(--text-on-cyan);
  border-radius: var(--radius-pill); padding: 12px 16px; margin-top: 4px;
  font-family: var(--font-family);
  font-weight: 900; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase;
  box-shadow: var(--shadow-sm); transition: transform 0.15s ease, filter 0.15s ease;
}
.lb-share:hover { filter: brightness(1.08); }
.lb-share:active { transform: scale(0.98); }

/* history carousel */
.lb-history { display: flex; align-items: stretch; gap: 8px; }
.lb-nav {
  flex-shrink: 0; align-self: center; width: 34px; height: 34px; border-radius: var(--radius-circle);
  border: 1px solid var(--surface-lightest-x3); background: var(--surface-lightest-x2); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.lb-nav:hover { filter: brightness(1.25); transform: scale(1.08); }
.lb-nav:disabled { opacity: 0.35; }
.lb-history-rail {
  display: flex; gap: 16px; flex: 1; min-width: 0; overflow-x: auto;
  scroll-snap-type: x proximity; padding: 4px 2px 12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.lb-history-rail::-webkit-scrollbar { display: none; }
.lb-round {
  flex: 0 0 auto; width: 300px; max-width: 86%; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 6px; padding: 14px;
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.10); background: var(--surface-dark-500);
}
.lb-round-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 2px; }

/* info / prizes */
.lb-info-blurb { text-align: center; font-size: 15px; color: rgba(255, 255, 255, 0.85); margin: 4px auto 6px; max-width: 46ch; }
.lb-info-blurb strong { color: var(--gc-coin-color); }
.lb-prizes { display: flex; flex-direction: column; gap: 10px; }
.lb-prize { display: flex; align-items: center; gap: 12px; }
.lb-prize-bar {
  height: 44px; width: var(--w); min-width: 64px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.2); /* medal-bar bevel, kept as artwork (OQ-6) */
}
.lb-prize-bar--1 { background: linear-gradient(90deg, #ffbe08, #ffe849); }
/* silver/bronze medal bars stay as feature artwork (OQ-6) */
.lb-prize-bar--2 { background: linear-gradient(90deg, #aeb8cc, #d6def0); }
.lb-prize-bar--3 { background: linear-gradient(90deg, #cd9b6a, #e6bd8f); }
.lb-prize-bar--4, .lb-prize-bar--5 { background: linear-gradient(90deg, var(--accent-blue), var(--border-light)); }
.lb-prize-rank {
  width: 30px; height: 30px; border-radius: var(--radius-circle); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: var(--text-inverted-primary);
  background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-sm);
}
.lb-prize-amt { font-weight: 800; font-size: 15px; color: #fff; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lb-prize-amt .bi { color: #00fcfd; font-size: 13px; }

@container page (max-width: 600px) {
  .lb-logo { height: 44px; }
  .lb-nav { display: none; }
  .lb-round { width: 84cqw; max-width: 320px; }
  .lb-place-name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-share, .lb-toggle-btn, .lb-tab { transition: none; }
}

/* ───────── v3.18: a11y + tap-target review fixes ─────────
   Visible keyboard focus (controls had outline:none with no replacement), >=44px
   hit areas on interactive controls, contrast bumps on muted text, and de-linking
   the @game captions (they were spans styled as links). */

/* visible keyboard focus for every interactive control (core focus language) */
a:focus-visible, button:focus-visible, input:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--border-primary);
  outline-offset: 2px;
}

/* tap targets: primary controls >= 44px; small secondary controls padded up */
.page-tab { display: inline-flex; align-items: center; min-height: 44px; }
.dq-nav, .lb-nav { width: 44px; height: 44px; }
.dq-toggle-btn, .lb-toggle-btn, .lb-tab { min-height: 44px; display: inline-flex; align-items: center; }
.dq-cta, .lb-share, .dq-share, .dq-cross, .refer-share, .coderedeem-btn { min-height: 44px; }
.dq-pass { padding: 8px 12px; }            /* hit area ~36, visual stays small */
.dquest-reset { min-height: 40px; }
.refer-input { height: 52px; }
.refer-copy { min-height: 40px; }

/* contrast: lift muted text to >= 4.5:1 on the band fields */
.refer-code-label { color: #b9c6df; }
.refer-link { color: #aab8d6; }
.dq-pass { color: rgba(255, 255, 255, 0.72); }
.lb-game--muted { color: rgba(255, 255, 255, 0.72); }

/* @game is metadata, not a link: drop the link affordance */
.lb-game { color: rgba(255, 255, 255, 0.72); text-decoration: none; }

/* ───────── v3.19: review polish ─────────
   Screen-reader-only utility (for feature section headings whose visible header is
   a logo image), and a touch more breathing room under the podium scores. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lb-block { margin-top: 8px; }

/* ───────── v3.20: "Back to Hub" affordance on standalone inner pages ─────────
   Inner pages (Coinz Back/Connect/Market) keep their 4-tab bar (per the PRD's
   4-tab Hub), but this makes "leave this page back to the Hub" explicit so they
   are not dead-ends relative to Home's scroll nav. */
.hub-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: rgba(255, 255, 255, 0.78); font-weight: 700; font-size: 13px; text-decoration: none;
}
.hub-back:hover { color: #fff; }
.hub-back .bi { font-size: 16px; }

/* ───────── v3.22: Hub notifications (new-content indicators) ─────────
   Four surfaces light up when a Hub feature has new content: a starburst seal
   on the feature card (top-left), a dot on its section-nav pill, and an
   aggregate dot on both the sidenav "Coinz Hub" head and the mobile "Menu" nav
   item. Badges are display:none until JS adds .is-on (notifications_controller).
   Dot colour is the ratified --alert-error (OQ-7). */

/* Shared dot — used inline on pills and at the corner of the mobile Menu icon. */
.notif-dot {
  display: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--alert-error);
  box-shadow: 0 0 0 2px rgba(0, 7, 36, 0.6);
}
.notif-dot.is-on { display: inline-block; }

/* Pill dot — trails the label so the carousel's overflow-x can never clip it
   (overflow-x:auto silently makes overflow-y:auto, so a corner dot would cut). */
.page-tab .notif-dot {
  vertical-align: middle; margin-left: 7px;
  position: relative; top: -1px;
}

/* Sidenav "Coinz Hub" entry — label + aggregate dot grouped inline (v3.23: the
   dot moved here from the old section head, which the menu collapse removed). */
.sidenav-item-label { display: inline-flex; align-items: center; gap: 8px; }

/* Mobile "Menu" item — corner dot anchored to the icon glyph. */
.bnav-icon { position: relative; display: inline-flex; }
.bnav-icon .notif-dot { position: absolute; top: -3px; right: -7px; }

/* Aggregate dots gently pulse so the "something's new" read lands. */
.notif-dot--agg.is-on { animation: notif-pulse 1.8s ease-in-out infinite; }

/* Card burst — the starburst seal, top-left of a feature band. A real button so
   keyboard users can dismiss it; aria-label carries the reason. */
.notif-burst {
  display: none;
  position: absolute; top: 14px; left: 14px; z-index: 6;
  width: 34px; height: 34px; padding: 0; border: 0; background: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  animation: notif-burst-pulse 2.4s ease-in-out infinite;
}
.notif-burst.is-on { display: block; }
.notif-burst img { display: block; width: 100%; height: 100%; pointer-events: none; }
.notif-burst:hover { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65)); }
.notif-burst:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }

@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0, 7, 36, 0.6), 0 0 0 0 rgba(201, 31, 62, 0.55); }
  50%      { box-shadow: 0 0 0 2px rgba(0, 7, 36, 0.6), 0 0 0 5px rgba(201, 31, 62, 0); }
}
@keyframes notif-burst-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-dot--agg.is-on, .notif-burst { animation: none; }
}

/* ───────── v3.24: Free Spins band (inline carousel of game grants) ─────────
   A centered band (logo placeholder + copy + a horizontal rail of game cards).
   Each card grants N free spins on a game; Redeem claims it and animates the
   card out. When the rail empties, the empty state shows. Mirrors the Figma
   "Free Spins" frame: game art tile + name + blue "N FREE SPINS" footer, NEW
   badge, round pager arrows below. free_spins_controller.js drives state. */
.promo-band--freespins {
  --band-accent: var(--gc-coin-color);
  text-align: center;
  background:
    radial-gradient(62% 60% at 50% -4%, rgba(254, 224, 57, 0.18), transparent 70%),
    radial-gradient(50% 60% at 10% 96%, rgba(38, 255, 34, 0.12), transparent 70%),
    linear-gradient(170deg, var(--surface-lightest) 0%, var(--surface-dark) 46%, var(--surface-darkest) 100%);
}

/* help affordance — top-right ghost circle (Figma '?') */
.fs-help {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 30px; height: 30px; border-radius: var(--radius-circle);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.85); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fs-help:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.fs-help .bi { font-size: 16px; }

/* head — logo placeholder + copy, centered */
.fs-head { max-width: 56ch; margin: 0 auto; }
.fs-logo {
  font-family: var(--third-family);
  font-weight: 900; font-size: clamp(30px, 4.2cqw, 48px);
  line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 2px 0 12px;
  background: linear-gradient(180deg, #fff 0%, #ffe849 60%, #ffbe08 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.fs-logo .hl-gold { -webkit-text-fill-color: var(--gc-coin-color); color: var(--gc-coin-color); }
.fs-sub { margin: 0 auto 22px; }

/* carousel */
.fs-carousel { position: relative; z-index: 1; }
.fs-rail {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 560px; margin: 0 auto; padding: 6px 4px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.fs-rail::-webkit-scrollbar { display: none; }

.fs-card {
  flex: 0 0 auto; width: 122px;
  scroll-snap-align: start;
  transition: opacity 0.34s ease, transform 0.34s ease,
              width 0.34s ease 0.04s, margin 0.34s ease 0.04s;
}
.fs-card.is-claimed {
  opacity: 0; transform: scale(0.7) translateY(-12px);
  width: 0 !important; margin-inline: -7px; pointer-events: none;
}

/* tile — game art (cover) + name + badge + redeem overlay */
.fs-tile {
  position: relative; width: 122px; height: 150px;
  border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden;
  background-color: var(--surface-dark); background-size: cover; background-position: center;
  box-shadow: var(--shadow-card);
}
.fs-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,0.72) 100%);
}
.fs-tile--aztec   { background-image: url(assets/fs-aztec-bg.jpg); }
.fs-tile--chillies{ background-image: url(assets/fs-chillies.jpg); background-position: center 18%; }
.fs-tile--fruits  { background-image: url(assets/fs-fruits-bg.jpg); }
.fs-tile--clover  { background-image: url(assets/fs-clover-bg.jpg); }

.fs-hero {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 74%; height: auto; z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.fs-tile-name {
  position: absolute; left: 0; right: 0; bottom: 7px; z-index: 2;
  font-family: var(--third-family); font-weight: 800;
  font-size: 12px; line-height: 1.05; color: #fff; text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.fs-badge {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  background: var(--alert-error); color: #fff;
  font-family: var(--third-family); font-weight: 600;
  font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.fs-redeem {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 4; opacity: 0; cursor: pointer;
  font-family: var(--font-family);
  font-weight: 800; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text-on-cyan); padding: 7px 16px; border-radius: var(--radius-pill);
  background: var(--accent-cyan-gradient); border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.fs-card:hover .fs-tile::after { background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.78)); }
.fs-card:hover .fs-redeem,
.fs-card:focus-within .fs-redeem { opacity: 1; }
.fs-redeem:hover { transform: translate(-50%, -50%) scale(1.06); }
.fs-redeem:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* touch devices have no hover — keep Redeem visible so the grant stays claimable */
@media (hover: none) { .fs-redeem { opacity: 1; } }

.fs-count {
  display: flex; align-items: center; justify-content: center;
  height: 38px; width: 122px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2); border-top: none;
  background: var(--accent-cyan-gradient);
  color: var(--text-on-cyan); font-family: var(--third-family); font-weight: 600;
  font-size: 12.5px; letter-spacing: -0.01em; text-transform: uppercase;
}

/* pager — two round arrow buttons centered below the rail (Figma) */
.fs-pager { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.fs-nav {
  width: 40px; height: 40px; border-radius: var(--radius-circle);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-lightest-x2);
  border: 1px solid var(--surface-lightest-x3); color: #fff; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.fs-nav .bi { font-size: 18px; }
.fs-nav:hover:not(:disabled) { filter: brightness(1.25); transform: scale(1.08); }
.fs-nav:disabled { opacity: 0.35; cursor: default; }
.fs-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* empty state */
.fs-empty { max-width: 44ch; margin: 6px auto 0; padding: 18px 0 6px; }
.fs-empty-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: var(--radius-circle);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 35%, rgba(254,224,57,0.3), rgba(255,255,255,0.05));
  border: 1px solid rgba(255, 255, 255, 0.18); color: var(--gc-coin-color);
}
.fs-empty-icon .bi { font-size: 30px; }
.fs-empty-head {
  font-family: var(--third-family); font-weight: 800;
  font-size: 20px; margin-bottom: 8px; color: #fff;
}
.fs-empty-sub {
  font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.78);
  margin-bottom: 18px;
}

/* claim confirmation toast — bottom-center of the band */
.fs-toast {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(8px);
  z-index: 7; pointer-events: none; opacity: 0;
  max-width: 80%;
  background: rgba(0, 7, 36, 0.94); border: 1px solid rgba(38, 255, 34, 0.4);
  color: #fff; font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fs-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fs-card { transition: none; }
}