/* ==========================================================================
   Drop Bears: the cash leaderboard (/leaderboard/cash/, members only)
   Sits on db.css + board.css + embed.css and reuses their table, tabs, pills
   and quest band. Only adds the top three and the toolbar.

   The top three are the site's own device, not a podium: a hairline grid like
   the fact band, a big numeral hanging off an ember rule, the cash figure in
   the display face and the stats board's translucent ember bar, scaled
   against first place. Ember stays rare: the rule and numeral on first, the
   bar on all three.
   ========================================================================== */

/* ----------------------------------------------------------- toolbar --- */

/* The leaderboard tab row (shared with /leaderboard/, Cash current). The
   period tabs and server toggle sit under it as this board's own controls. */
.board-nav { margin: var(--s4) 0 0; border-bottom: 1px solid var(--line); }

.cash__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  margin: var(--s4) 0 0;
  border-bottom: 1px solid var(--line);
}
.cash__bar .tabs { margin: 0; border-bottom: 0; }
.cash__bar .tab[aria-pressed="true"] { color: var(--bone); border-bottom-color: var(--ember); }
.cash__servers { display: flex; gap: var(--s1); padding-bottom: var(--s2); }
.cash__servers .pill { min-height: 48px; }
.cash__servers .pill[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: var(--ink); }

.cash__when {
  margin: var(--s2) 0 0;
  font-size: .875rem;
  color: var(--mute);
}
.cash__when b { color: var(--bone); font-weight: 700; }
.cash__when--stale b { color: var(--ember); }

.cash__body { margin-top: var(--s4); }
/* Status messages are h2 (straight under the page h1) but keep the quiet
   size the site gives an empty-state h3. */
.empty .cash__msg {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-stretch: 108%;
  line-height: 1.05;
  color: var(--mute);
}
.cash__body .empty .btn { margin-top: var(--s3); }

/* ---------------------------------------------------------- top three --- */

.cash__top {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cash__card {
  position: relative;
  background: var(--char);
  padding: var(--s3) var(--s4) var(--s4);
  border-top: 4px solid var(--line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s3);
  align-content: start;
}
.cash__card--1 { border-top-color: var(--ember); }

/* the numeral hangs off the rule, as on the rest of the site */
.cash__n {
  grid-row: 1 / span 2;
  margin-top: -4px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 4.5rem;
  line-height: .8;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.cash__card--1 .cash__n { color: var(--ember); }

.cash__name {
  margin: 0;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--bone);
  overflow-wrap: anywhere;
}
.cash__amt {
  margin: var(--s1) 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* share of first place: the kills-bar device from stats.dropbears.gg */
.cash__share {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  margin-top: var(--s3);
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.cash__share i {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  background: rgba(240, 98, 26, .55);
  border-radius: 2px;
}

.cash__stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin: var(--s2) 0 0;
}
.cash__stats div { min-width: 0; }
.cash__stats dt { font-size: .75rem; color: var(--mute); }
.cash__stats dd { margin: 2px 0 0; font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- table --- */

table.data.cash__table td.cash__v { font-weight: 700; white-space: nowrap; }
table.data.cash__table th, table.data.cash__table td { white-space: nowrap; }
table.data.cash__table td.name { white-space: normal; overflow-wrap: anywhere; }

.cash__how { max-width: 72ch; }
.cash__own { margin-top: var(--s6); }
.cash__own .btn { justify-self: start; }
.cash__own h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* ------------------------------------------------------ tablet + phone --- */

@media (max-width: 899px) {
  .cash__top { grid-template-columns: 1fr; }
  .cash__card { padding: var(--s3); }
  .cash__stats { max-width: 420px; }
}

@media (max-width: 719px) {
  .cash__bar { align-items: stretch; }
  .cash__bar .tabs { width: 100%; }
  .cash__servers { width: 100%; }
  .cash__servers .pill { flex: 1 1 0; padding-inline: 8px; }
  .cash__n { font-size: 3.5rem; }
  table.data.cash__table th, table.data.cash__table td { padding: 14px 6px; }
}

@media (max-width: 479px) {
  .cash__bar .tab { padding: 12px 10px 10px; }
  .cash__card { padding: var(--s2) var(--s2) var(--s3); column-gap: var(--s2); }
  .cash__n { font-size: 3rem; }
  .cash__amt { font-size: 1.625rem; }
  /* every column stays; if a long name pushes it wider the table scrolls
     inside its own wrapper, never the page */
  table.data.cash__table th, table.data.cash__table td { padding: 12px 4px; font-size: .875rem; }
  /* a clan tag plus a handle squeezed to five lines; two is fine */
  table.data.cash__table td.name { min-width: 136px; }
}