/* home-polish.css — visual hierarchy pass on the homepage
   ────────────────────────────────────────────────────────────
   Additive overrides on top of home.css + _shared.css. Fixes:

   1. Section headings (.sec-label h2)     → bigger, gradient accent,
                                              more breathing room
   2. Card headers (.ttl)                   → clearer separator, subtle
                                              amber tint on hover
   3. Trader rows (.lb-row / table.t tbody) → pointer cursor + amber
                                              left-edge slice on hover,
                                              subtle nudge
   4. Champion hero                         → warmer premium glow,
                                              gold rank badge shine
   5. Section spacing rhythm                → consistent 32 px between
                                              major blocks

   Kept small enough that any single override is easy to revert. */

/* ── Section labels — proper hierarchy ──────────────────────── */
main.shell .sec-label {
  margin: 34px 0 12px !important;
  align-items: baseline;
  gap: 12px;
}
main.shell .sec-label h2 {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  background: linear-gradient(90deg, #ffffff 0%, #b8c5d9 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  padding-left: 12px;
}
/* Amber accent bar to the left of every section title */
main.shell .sec-label h2::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fcb040 0%, #ff775f 100%);
  opacity: .85;
}
main.shell .sec-label .hint {
  font-size: 11.5px !important;
  letter-spacing: .02em;
  color: var(--c-color-text-caption);
}

/* ── Card titles (.ttl) — subtler divider, tighter alignment ── */
main.shell .glass > .ttl {
  padding: 14px 18px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
}
main.shell .glass > .ttl .k {
  font-size: 13px !important;
  font-weight: 600;
  color: #e7ecf6;
}
main.shell .glass > .ttl .sub {
  font-size: 10px !important;
  letter-spacing: .10em !important;
  color: rgba(139, 149, 168, 0.75);
}
/* Winners/losers panel titles get a stronger tone match */
main.shell .glass[data-block="lb-winners"] > .ttl { border-bottom-color: rgba(22, 199, 132, 0.14) !important; }
main.shell .glass[data-block="lb-losers"]  > .ttl { border-bottom-color: rgba(234, 57, 67, 0.14)  !important; }

/* ── Leaderboard rows — clickable-feeling ─────────────────────
   Every .lb-row (link or not) reads as a click target: pointer
   cursor, amber slice on the left border, and a small translate
   into the row on hover. Non-link rows still respond so the
   whole card feels alive. */
main.shell .lb-row {
  position: relative;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background .14s, transform .14s, box-shadow .14s;
}
main.shell .lb-row::before {
  content: "";
  position: absolute; left: 4px; top: 12px; bottom: 12px;
  width: 2px; border-radius: 2px;
  background: transparent;
  transition: background .14s;
}
main.shell .lb-row:hover {
  background: rgba(108, 182, 255, 0.055) !important;
  transform: translateX(2px);
}
main.shell .lb-row:hover::before {
  background: linear-gradient(180deg, #fcb040, #ff775f);
}
/* Winners hover in green, losers in red, whales stays blue */
main.shell .glass[data-block="lb-winners"] .lb-row:hover::before {
  background: linear-gradient(180deg, #34d399, #16c784);
}
main.shell .glass[data-block="lb-losers"] .lb-row:hover::before {
  background: linear-gradient(180deg, #f87171, #ea3943);
}

/* ── Winners/ROI tables — same hover treatment ────────────── */
main.shell table.t tbody tr {
  cursor: pointer;
}
main.shell table.t tbody tr:hover {
  background: rgba(108, 182, 255, 0.055) !important;
}
main.shell table.t tbody tr td:first-child {
  position: relative;
}
main.shell table.t tbody tr:hover td:first-child::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #fcb040, #ff775f);
}

/* ── Champion hero — premium treatment ────────────────────── */
main.shell .glass.hero {
  min-height: 340px !important;
}
main.shell .glass.hero::after {
  /* extra ambient glow: gold from top-left, faint magenta bottom-right */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 400px at 8% -10%, rgba(252, 176, 64, 0.14), transparent 65%),
    radial-gradient(500px 400px at 100% 110%, rgba(255, 119, 95, 0.08), transparent 65%);
}
/* Gold rank badge on the champion — sharper gradient + inner shine */
main.shell .hero .rank-gold {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 0 0 1px rgba(255, 226, 138, 0.5),
    0 0 22px rgba(245, 179, 1, 0.25);
}
/* Champion address in mono, brighter */
main.shell .hero .hero-who .addr {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.12);
}
/* PnL number gets a soft green glow */
main.shell .hero .hero-pnl {
  text-shadow: 0 0 32px rgba(22, 199, 132, 0.32);
}

/* ── Duel section — slight bump so it feels like the hero row ── */
main.shell .glass.duel {
  min-height: 380px !important;
  margin-top: 12px !important;
}
main.shell .glass.duel .notional {
  font-family: var(--c-font-family-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── Consistent rhythm: block gaps ────────────────────────── */
main.shell .tables { margin-top: 20px !important; gap: 18px !important; }
main.shell .grid-2 { gap: 18px !important; }
main.shell .grid-3 { gap: 18px !important; }
main.shell .glass.hero { margin-top: 20px !important; }
main.shell section.glass[data-block="oi-treemap"] { margin-top: 8px; }

/* ── Trader link — brighter on hover ─────────────────────── */
main.shell .trd-link:hover .ad,
main.shell .trd-link:hover .addr {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(108, 182, 255, 0.4);
}

/* ── Ribbon — quiet gradient fade so it doesn't shout ────── */
main.shell + .ribbon,
.ribbon {
  opacity: .92;
}

/* Mobile: shrink section-label extras so hierarchy still reads */
@media (max-width: 640px) {
  main.shell .sec-label { margin: 24px 0 8px !important; gap: 8px; }
  main.shell .sec-label h2 { font-size: 18px !important; padding-left: 10px; }
  main.shell .sec-label h2::before { width: 2.5px; }
  main.shell .sec-label .hint { font-size: 10.5px !important; }
}