/* ════════════════════════════════════════════════════════════════
   home.css — page-local styles for the production home page.
   Ported verbatim from the home-final mockup's inline <style>, plus
   the funnel CTAs, compliance disclaimer, and data-binding state
   classes (loading / stale / hidden) appended at the end.
   Built on design-system tokens (--c-*) and _shared.css vars
   (--brand, --pos, --neg, --glass-*). No mock-only assumptions.
   ════════════════════════════════════════════════════════════════ */

/* Default zoom — page reads best at +10% (matches the user's preferred
   browser zoom). `zoom` is the faithful equivalent of browser zoom and
   keeps sticky header/ticker offsets correct. Reset on small screens so
   mobile isn't over-scaled. */
body { zoom: 1.1; }
@media (max-width: 820px) { body { zoom: 1; } }

/* Header is exempt from the page-level +10% zoom so it renders at the SAME
   scale as every other page's header (the trader page is the canonical
   reference: 32px logo mark, logo flush-left at 24px). Without this the
   1.1× zoom inflated the wordmark/nav to 35px and pushed the logo to 26px,
   making the home header visibly larger than the rest of the site. The
   inverse zoom cancels the body zoom for the header subtree only; the page
   content below keeps its intended +10%. Matches the ≤820px reset above:
   there body zoom is already 1, and 1/1 = 1, so this is a no-op on mobile. */
.cmc-header { zoom: calc(1 / 1.1); }
@media (max-width: 820px) { .cmc-header { zoom: 1; } }

/* ── segment toggle ─────────────────────────────────────────────── */
.seg-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 4px; flex-wrap: wrap; }
.tog { display: inline-flex; padding: 4px; border-radius: 12px; gap: 4px; }
.tog button {
  appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--c-font-family-mono); font-size: 12px; font-weight: 600;
  color: var(--c-color-text-caption); padding: 7px 16px; border-radius: 9px;
  letter-spacing: .01em; transition: .15s; display: inline-flex; align-items: center; gap: 7px;
}
.tog button .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.tog button.on {
  background: linear-gradient(180deg, rgba(108,182,255,.16), rgba(108,182,255,.05));
  border-color: rgba(108,182,255,.3); color: var(--brand);
}
.tog button.on .d { opacity: 1; box-shadow: 0 0 8px currentColor; }
.seg-note { font-family: var(--c-font-family-mono); font-size: 11.5px; color: var(--c-color-text-caption); }
.seg-note b { color: #fff; }

/* ── DUEL hero (from B) ─────────────────────────────────────────── */
.duel { position: relative; margin-top: 8px; min-height: 360px;
  display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.duel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 460px at -2% 50%, rgba(22,199,132,.20), transparent 62%),
    radial-gradient(620px 460px at 102% 50%, rgba(234,57,67,.18), transparent 62%),
    linear-gradient(90deg, rgba(22,199,132,.05) 0%, transparent 38%, transparent 62%, rgba(234,57,67,.05) 100%); }
.duel .rift { position: absolute; z-index: 3; pointer-events: none;
  top: 14px; bottom: 14px; left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.10) 12%, rgba(159,208,255,.85) 50%, rgba(255,255,255,.10) 88%, transparent);
  box-shadow: 0 0 18px 3px rgba(108,182,255,.45), 0 0 42px 8px rgba(108,182,255,.18); }
.duel .rift::before { content: 'VS'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--c-font-family-mono); font-weight: 600; font-size: 12px; letter-spacing: .12em;
  color: #fff; background: rgba(13,20,33,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  width: 38px; height: 38px; display: grid; place-items: center;
  box-shadow: 0 0 22px rgba(108,182,255,.4), 0 1px 0 rgba(255,255,255,.1) inset; }
.side { position: relative; z-index: 2; padding: 26px 30px 30px; display: flex; flex-direction: column; }
.side.bull { align-items: flex-start; text-align: left; }
.side.bear { align-items: flex-end; text-align: right; }
.side .kicker { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--c-font-family-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; }
.bull .kicker { color: var(--c-color-positive); }
.bear .kicker { color: var(--c-color-negative); }
.kicker .tag { padding: 2px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .08em; }
.bull .kicker .tag { background: rgba(22,199,132,.14); border: 1px solid rgba(22,199,132,.3); color: var(--c-color-positive); }
.bear .kicker .tag { background: rgba(234,57,67,.14); border: 1px solid rgba(234,57,67,.3); color: var(--c-color-negative); }
.side .coin { display: flex; align-items: center; gap: 11px; margin: 18px 0 6px; }
.bear .coin { flex-direction: row-reverse; }
.side .coin .sym { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.side .coin .lev { font-family: var(--c-font-family-mono); font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: 6px; color: var(--c-color-text-caption);
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.notional { font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums;
  font-size: 46px; font-weight: 600; line-height: 1.02; letter-spacing: -.02em; margin: 2px 0 4px; }
.bull .notional { color: var(--c-color-positive); text-shadow: 0 0 28px rgba(22,199,132,.4); }
.bear .notional { color: var(--c-color-negative); text-shadow: 0 0 28px rgba(234,57,67,.4); }
.notional-cap { font-size: 11px; color: var(--c-color-text-caption); font-family: var(--c-font-family-mono); letter-spacing: .04em; }
.side .meta { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.bull .meta { align-items: flex-start; }
.bear .meta { align-items: flex-end; }
.trader { display: flex; align-items: center; gap: 9px; }
.bear .trader { flex-direction: row-reverse; }
.trader .addr { font-family: var(--c-font-family-mono); font-size: 13px; font-weight: 500; }
.rowstats { display: flex; gap: 22px; }
.bear .rowstats { flex-direction: row-reverse; }
.stat .lbl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-color-text-caption); display: block; margin-bottom: 3px; }
.stat .val { font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.open-badge { position: absolute; z-index: 4; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--c-font-family-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  padding: 5px 12px; border-radius: 999px; color: #d8e6ff;
  background: rgba(13,20,33,.86); border: 1px solid rgba(108,182,255,.34);
  box-shadow: 0 6px 22px -10px rgba(0,0,0,.7), 0 0 18px rgba(108,182,255,.2); backdrop-filter: blur(10px); }
.open-badge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-color-positive);
  box-shadow: 0 0 0 0 rgba(22,199,132,.6); animation: pulse 2.2s infinite; }

/* ── CHAMPION hero (from A) ──────────────────────────────────────── */
.hero { position: relative; margin-top: 16px; min-height: 320px;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.hero .aura { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 320px at 22% 18%, rgba(22,199,132,.20), transparent 62%),
    radial-gradient(500px 380px at 88% 88%, rgba(22,199,132,.10), transparent 60%); }
.hero > * { position: relative; z-index: 1; }
.hero-left { padding: 28px 28px 28px 32px; display: flex; flex-direction: column; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--c-font-family-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pos); padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(22,199,132,.28); background: rgba(22,199,132,.08); }
.hero-id { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.rank-gold { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #3a2a00; font-family: var(--c-font-family-mono);
  background: linear-gradient(135deg, #ffe9a8, #f5c542 55%, #d99b1c);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 22px -10px rgba(245,197,66,.7); }
.hero-id .av { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
.hero-who { display: flex; flex-direction: column; gap: 5px; }
.hero-who .addr { font-family: var(--c-font-family-mono); font-size: 17px; font-weight: 600; letter-spacing: .01em; color: #fff; }
.hero-who .label { font-size: 12px; color: var(--c-color-text-caption); font-weight: 500; }
.hero-pnl-wrap { margin-top: auto; padding-top: 26px; }
.hero-pnl-cap { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-color-text-caption); font-family: var(--c-font-family-mono); }
.hero-pnl { font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 52px; line-height: 1.04; letter-spacing: -.02em; color: var(--pos); margin-top: 6px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px;
  font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.hero-stats .s { color: var(--c-color-text-caption); }
.hero-stats .s b { color: #fff; font-weight: 600; }
.hero-stats .s .pos { color: var(--pos); }
.hero-stats .sep { width: 1px; align-self: center; height: 12px; background: rgba(255,255,255,.12); }
.hero-right { padding: 22px 26px 22px 26px; display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.05); }
.hero-right .cap-row { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.hero-right .cap-row .t { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-color-text-caption); font-family: var(--c-font-family-mono); }
.hero-right .cap-row .v { font-family: var(--c-font-family-mono); font-size: 12px; color: var(--pos); }
.hero-right svg { width: 100%; flex: 1; min-height: 200px; margin-top: 8px; display: block; }
@keyframes markerPulse { 0%{r:4.5} 50%{r:6} 100%{r:4.5} }
.equity-marker { animation: markerPulse 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(22,199,132,.9)); }
/* Negative champion (all-red 24h → winners[0] is a loss). Sign is set in JS
   ("−$…"); colour follows here so a loss never reads as a green gain. */
.hero-pnl.neg { color: var(--neg); }
/* Decorative flourish, not a data series — dimmed so it reads as chrome. */
.hero-flourish { opacity: .45; }
/* ── Champion empty state (data-empty set by renderChampion) ──
   Hide the identity/PnL/stat scaffold and the flourish; show one centred
   message. No #1 rank / no $0 / no 0x0000 masquerading as a real champion. */
.hero-empty { display: none; }
.hero[data-empty] .hero-id,
.hero[data-empty] .hero-pnl-wrap,
.hero[data-empty] .rank-gold,
.hero[data-empty] .hero-flourish,
.hero[data-empty] .hero-right .cap-row { display: none; }
.hero[data-empty] .aura { opacity: .3; }
.hero[data-empty] .hero-empty {
  display: block; margin-top: 20px; max-width: 34ch;
  font-size: 15px; line-height: 1.5; color: var(--c-color-text-caption); }

/* ── tables (from C) ─────────────────────────────────────────────── */
.tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 1000px) { .tables { grid-template-columns: 1fr; } }
.panel { display: flex; flex-direction: column; }
.panel .body { padding: 6px 8px 10px; }
table.t { width: 100%; border-collapse: collapse; }
table.t thead th { text-align: left; font-family: var(--c-font-family-sans);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .055em;
  color: var(--c-color-text-caption); padding: 8px 10px 7px; white-space: nowrap; }
table.t thead th.r { text-align: right; }
table.t tbody td { padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.045); vertical-align: middle; }
table.t tbody tr { transition: background .12s; }
table.t tbody tr:hover { background: rgba(108,182,255,.045); }
table.t tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.t .num { font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums; }
.t-rank { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  font-family: var(--c-font-family-mono); font-size: 11px; font-weight: 600;
  color: var(--c-color-text-caption); background: rgba(255,255,255,.04); }
.t-rank.g1 { color: #1a1205; background: linear-gradient(135deg, #ffe28a, #f5b301); }
.t-rank.g2 { color: #1a1a1a; background: linear-gradient(135deg, #eef2f7, #b9c2d0); }
.t-rank.g3 { color: #2a1605; background: linear-gradient(135deg, #f0bd8a, #cd7f32); }
.trd { display: flex; align-items: center; gap: 9px; }
.trd .av { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.trd .ad { font-family: var(--c-font-family-mono); font-size: 12px; color: #e3e8f2; letter-spacing: -.01em; }
.cb { display: inline-flex; align-items: center; gap: 6px; font-family: var(--c-font-family-mono);
  font-size: 11.5px; font-weight: 500; padding: 3px 8px 3px 6px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: #d9e0ee; }
.cb .ci { width: 15px; height: 15px; border-radius: 5px; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #0d1117; }
.cb .ns { color: var(--c-color-text-caption); }
.roi-big { font-family: var(--c-font-family-mono); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── trader link (address → profile, stub for now) ───────────────── */
.trd-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 9px; }
.trd-link:hover .ad,
.trd-link:hover .addr { color: var(--brand); }

/* ── leaderboard columns (winners / losers / 24h whales) ─────────────
   Ranked rows: rank pill · avatar · trader (addr + "top COIN · WR")
   · right-aligned primary value + secondary metric. Shared across the
   three grid-3 panels; tone set per-column on the panel root. */
.lb-col { padding: 4px 6px 8px; }
.lb-row { display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center;
  gap: 10px; padding: 9px 10px; border-top: 1px solid rgba(255,255,255,.045);
  border-radius: 9px; transition: background .12s; }
/* Clickable variant — anchor version rendered by home-data.js loadLeaderboardTri.
   Kills the underline/color inherit + shows a pointer cursor so the whole row
   behaves like a link into /trader/{addr}. */
.lb-row-link { text-decoration: none; color: inherit; cursor: pointer; }
.lb-row-link:hover { background: rgba(108,182,255,.07); }
.lb-col .lb-row:first-child { border-top: 0; }
.lb-row:hover { background: rgba(108,182,255,.045); }
.lb-row .av { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; flex: none; }
.lb-row .trd { min-width: 0; display: flex; flex-direction: column; }
.lb-row .trd .ad { display: block; font-family: var(--c-font-family-mono); font-size: 12.5px; color: #e7ecf6;
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .trd .meta { display: block; margin-top: 2px; font-family: var(--c-font-family-mono); font-size: 10.5px;
  color: var(--c-color-text-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .trd .meta .tc { color: #c2cad8; }
.lb-row .rt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.lb-row .rt .big { display: block; font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; }
.lb-row .rt .sub { display: block; margin-top: 2px; font-family: var(--c-font-family-mono); font-size: 10.5px;
  color: var(--c-color-text-caption); }
.lb-row .rt .sub .pos { color: var(--pos); } .lb-row .rt .sub .neg { color: var(--neg); }
/* winners column gets a faint green wash on the header icon, losers red */
.glass[data-block="lb-winners"] .ttl .ic { color: var(--pos); }
.glass[data-block="lb-losers"]  .ttl .ic { color: var(--neg); }

/* ── footer ──────────────────────────────────────────────────────── */
.foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.05);
  text-align: center; font-family: var(--c-font-family-mono); font-size: 11px; color: var(--c-color-text-caption); letter-spacing: .04em; }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .duel { grid-template-columns: 1fr; }
  .duel .rift { top: 50%; left: 14px; right: 14px; bottom: auto; width: auto; height: 2px; transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 12%, rgba(159,208,255,.85) 50%, rgba(255,255,255,.10) 88%, transparent); }
  .duel::after { background:
    radial-gradient(460px 420px at 50% -4%, rgba(22,199,132,.20), transparent 62%),
    radial-gradient(460px 420px at 50% 104%, rgba(234,57,67,.18), transparent 62%); }
  .side.bear { align-items: flex-start; text-align: left; }
  .bear .coin, .bear .trader, .bear .rowstats { flex-direction: row; }
  .bear .meta { align-items: flex-start; }
  .notional { font-size: 40px; }
  .hero { grid-template-columns: 1fr; }
  .hero-right { border-left: none; border-top: 1px solid rgba(255,255,255,.05); padding: 18px 22px 8px; }
  .hero-pnl { font-size: 42px; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCTION ADDITIONS — funnel CTAs, compliance disclaimer, and
   data-binding state classes. (PRD §5.3 funnel, §10 compliance,
   §5.4 honesty.)
   ════════════════════════════════════════════════════════════════ */

/* ── primary CTA below the champion (PRD §5.3) ───────────────────── */
/* Same brand gradient as .bar .cta but larger, centered, with margin. */
.cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 22px auto 4px; padding: 0 26px; height: 46px;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: var(--c-font-family-sans); font-weight: 600; font-size: 14.5px;
  color: #0d1117;
  background: linear-gradient(180deg, var(--brand), #4d8fcc);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 26px -10px rgba(108,182,255,.55);
  transition: transform .12s, box-shadow .12s;
}
.cta-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 14px 30px -10px rgba(108,182,255,.7); }
.cta-primary-wrap { display: flex; justify-content: center; }

/* ── wide connect CTA bar after crowd/rekt (PRD §5.3) ────────────── */
.cta-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 20px 24px;
}
.cta-bar .cta-bar-text { flex: 1; min-width: 220px; }
.cta-bar .cta-bar-text .h { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.cta-bar .cta-bar-text .s { margin-top: 4px; font-family: var(--c-font-family-mono); font-size: 12px; color: var(--c-color-text-caption); }
.cta-bar .cta {
  height: 40px; padding: 0 22px; display: inline-flex; align-items: center;
  border-radius: 10px; border: none; cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: #0d1117;
  background: linear-gradient(180deg, var(--brand), #4d8fcc);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px -8px rgba(108,182,255,.5);
}
@media (max-width: 600px) {
  .cta-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-bar .cta { justify-content: center; }
}

/* ── compliance disclaimer (PRD §10) ─────────────────────────────── */
.disclaimer {
  margin-top: 10px; padding: 0 8px;
  font-family: var(--c-font-family-mono); font-size: 10.5px; line-height: 1.5;
  color: var(--c-color-text-caption); text-align: center; opacity: .8;
}

/* ── data-binding state classes ──────────────────────────────────── */
/* hidden block: JS hides a section when its data key is absent/empty */
.block-hidden { display: none !important; }

/* loading shimmer for skeleton placeholders */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.is-loading {
  position: relative;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.04) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  border-radius: 6px;
}

/* stale-data badge: an orange marker pinned to a section header
   when data.is_stale is true. We show the data honestly (PRD §5.4). */
.is-stale { position: relative; }
.is-stale > .stale-badge,
.stale-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--c-font-family-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .03em; padding: 3px 8px; border-radius: 999px;
  color: var(--c-color-reminder, #f5b97f);
  /* solid backdrop so the pill stays legible even when it sits over a header */
  background: rgba(28,20,10,.92); border: 1px solid rgba(245,185,127,.4);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.7);
}
/* Compact pill pinned to the top-right corner, above any header content.
   Solid background keeps it readable; blocks that already carry their own
   right-aligned header chip get extra top padding so nothing overlaps. */
.is-stale > .stale-badge { position: absolute; top: 8px; right: 12px; z-index: 6; }
.is-stale.duel { padding-top: 26px; }
.is-stale > .ttl { padding-right: 96px; }

/* Duel loading state — applied to the section while the first poll is
   in flight. The hardcoded "—" placeholders sit underneath a faint
   shimmer so users perceive "data coming" instead of stale mock values.
   renderDuel() in home-data.js strips .duel-loading on success. */
.duel.duel-loading .notional,
.duel.duel-loading .coin .sym,
.duel.duel-loading .coin .lev,
.duel.duel-loading .trader .addr,
.duel.duel-loading .rowstats .val {
  position: relative;
  color: transparent !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.06) 100%);
  background-size: 200% 100%;
  background-clip: padding-box;
  border-radius: 6px;
  animation: duelShimmer 1.4s ease-in-out infinite;
  user-select: none;
}
.duel.duel-loading .trader .av {
  filter: grayscale(.5) brightness(.7);
}
@keyframes duelShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ═══ Open-Interest Treemap (replaces Hot-Tokens table) ═══════════════ */
.tm-wrap { padding: 14px 16px 16px; }
.treemap { display: flex; gap: 6px; height: 340px; }
@media (max-width: 700px) { .treemap { height: 460px; } }
.tm-col { display: flex; flex-direction: column; gap: 6px; }
.treemap .tile {
  position: relative; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px 14px; min-width: 0; flex: 1; cursor: pointer;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .12s, filter .12s;
}
.treemap .tile:hover { transform: translateY(-2px); filter: brightness(1.08); }
.treemap .tile .tk { font-weight: 700; letter-spacing: -.01em; line-height: 1.1; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.treemap .tile .st { font-size: 11px; opacity: .82; margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.treemap .tile .vol { position: absolute; top: 12px; left: 14px; font-family: var(--c-font-family-mono); font-size: 11px; opacity: .72; }
/* sentiment fills, tier -3..+3 */
/* sentiment scale — muted/desaturated like the Coins-page reference:
   near-flat fills (very subtle top→bottom shade), dusty salmon → soft brick
   for bearish, calm slate-blue for neutral, soft sage green for bullish.
   No neon, no harsh high-contrast gradients. */
.treemap .s-vbear { background: linear-gradient(180deg, #E05B49, #D9503F); color:#fff; }
.treemap .s-bear  { background: linear-gradient(180deg, #DE7058, #D6644C); color:#fff; }
.treemap .s-sbear { background: linear-gradient(180deg, #DD8C72, #D7805F); color:#fff; }
.treemap .s-neut  { background: linear-gradient(180deg, #62748A, #586A80); color:#eef2f8; }
.treemap .s-sbull { background: linear-gradient(180deg, #4A9D63, #418F58); color:#fff; }
.treemap .s-bull  { background: linear-gradient(180deg, #3F9D5F, #358C52); color:#fff; }
.treemap .s-vbull { background: linear-gradient(180deg, #389A5B, #2C8A4E); color:#fff; }

/* ═══ Crowd vs Smart — compact c-floor format (back in grid-2 w/ Rekt) ═ */
.cvs .crow:last-child { border-bottom: 0; }
/* summary %-line under the two bars (replaces per-bar % labels) */
.cvs .crow .pct { margin-top: 8px; font-family: var(--c-font-family-mono);
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-color-text-caption); }
.cvs .crow .pct .lp { color: var(--pos); } .cvs .crow .pct .sp { color: var(--neg); }
/* coin chip in the row header */
.cvs .ctop .cb .ci { width: 18px; height: 18px; border-radius: 6px; display: inline-grid;
  place-items: center; font-size: 9px; font-weight: 700; color: #0d1117; }

/* ═══ Ticker ribbon (from c-floor) — classes renamed to avoid clashing
   with .track (crowd bars) / .tk (treemap tile) already on this page ═══ */
.ribbon { position: sticky; top: 60px; z-index: 90; height: 40px; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06); isolation: isolate; }
.ribbon::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,17,24,.7), rgba(23,25,36,.6));
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.ribbon::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #0D1421 0%, transparent 5%, transparent 95%, #0D1421 100%); }
.ribbon .ribbon-track { display: flex; align-items: center; gap: 0; height: 100%; width: max-content;
  animation: marquee 46s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tkr { display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; height: 40px;
  font-family: var(--c-font-family-mono); font-size: 12px; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.05); }
.tkr .sym { color: #d9e0ee; font-weight: 500; }
.tkr .sym .ns { color: var(--c-color-text-caption); }
.tkr .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ═══ Top-5 side indicator dots (replace 📈/📉 emoji in titles) ═══════ */
.side-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; position: relative; top: -1px; }
.side-dot.long  { background: var(--pos); box-shadow: 0 0 8px var(--pos); }
.side-dot.short { background: var(--neg); box-shadow: 0 0 8px var(--neg); }