/* design/home-page/shared/components.css
   OPTIONAL reference primitives for honest "product glimpse" visuals.
   Heroes may use these as-is, restyle them, or ignore them entirely.
   Built purely on brand.css tokens. The distinctness of each hero comes from
   its concept/layout — not from reinventing a bet card. */

/* ---- Status pill ---- */
.pg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pg-radius-pill);
  font-family: var(--pg-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pg-pill--win {
  background: color-mix(in srgb, var(--pg-win) 18%, transparent);
  color: var(--pg-win);
}
.pg-pill--loss {
  background: color-mix(in srgb, var(--pg-loss) 18%, transparent);
  color: var(--pg-loss);
}
.pg-pill--pending {
  background: color-mix(in srgb, var(--pg-pending) 18%, transparent);
  color: var(--pg-pending);
}
.pg-pill--live {
  background: color-mix(in srgb, var(--pg-amber) 20%, transparent);
  color: var(--pg-amber);
}

/* ---- Bet card ---- */
.pg-betcard {
  background: linear-gradient(180deg, var(--pg-surface-2), var(--pg-surface));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--pg-radius-l);
  box-shadow: var(--pg-e3);
  padding: var(--pg-s5);
  font-family: var(--pg-font-body);
  color: var(--pg-text);
}
.pg-betcard__sel {
  font-family: var(--pg-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.pg-betcard__meta {
  color: var(--pg-text-muted);
  font-size: 13px;
  margin-top: 2px;
}
.pg-betcard__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--pg-s4);
}
.pg-num {
  font-family: var(--pg-font-mono);
  font-weight: 500;
}
.pg-odds {
  color: var(--pg-odds);
}
.pg-payout {
  color: var(--pg-gold);
}

/* ---- Leaderboard ---- */
.pg-lb {
  font-family: var(--pg-font-body);
  color: var(--pg-text);
}
.pg-lb__row {
  display: grid;
  grid-template-columns: 24px 28px 1fr auto;
  align-items: center;
  gap: var(--pg-s3);
  padding: var(--pg-s3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pg-lb__rank {
  font-family: var(--pg-font-mono);
  color: var(--pg-text-muted);
}
.pg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--pg-font-display);
  font-weight: 700;
  font-size: 13px;
  color: #111b2d;
  background: linear-gradient(180deg, #f2ca7a, #d6983b);
}
.pg-profit-up {
  color: var(--pg-win);
  font-family: var(--pg-font-mono);
}
.pg-profit-down {
  color: var(--pg-loss);
  font-family: var(--pg-font-mono);
}

/* ---- Telegram-style settled message ---- */
.pg-chat {
  background: var(--pg-surface);
  border-radius: var(--pg-radius-m);
  padding: var(--pg-s4);
  font-family: var(--pg-font-body);
  max-width: 320px;
  box-shadow: var(--pg-e2);
}
.pg-chat__head {
  font-weight: 700;
  color: var(--pg-win);
}
.pg-chat__body {
  color: var(--pg-text);
  margin-top: 4px;
}
.pg-chat__banter {
  color: var(--pg-text-muted);
  font-style: italic;
  margin-top: 4px;
}