/**
 * Shared end-of-match results styling — stats table + fun-fact awards.
 * Pairs with fun_stats.js.
 *
 * Deliberately theme-neutral. Each game sets --fs-accent (and optionally the
 * text/edge tokens) on any ancestor, so the same markup reads as native inside
 * Koloss's sodium-amber panels and Nightfall's cold blue overlay. Fonts are
 * inherited, never declared.
 */

:root {
  --fs-accent: #ffd700;
  --fs-text: #e8e8e8;
  --fs-dim: rgba(232, 232, 232, 0.55);
  --fs-edge: rgba(255, 255, 255, 0.12);
  --fs-panel: rgba(255, 255, 255, 0.05);
}

.fs-empty { display: none !important; }

/* ---------------- awards grid ---------------- */

.fs-awards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.fs-award {
  display: flex;
  align-items: center;
  gap: 12px;
  /* a grid item's automatic minimum size is its content, so one long player
     name would widen the whole track and push the card sideways — this is
     what lets the name ellipsize instead */
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--fs-edge);
  border-left: 3px solid var(--fs-accent);
  border-radius: 6px;
  background: var(--fs-panel);
  text-align: left;
}

/* The local player's award — the one row they came to find. */
.fs-award.fs-mine {
  background: color-mix(in srgb, var(--fs-accent) 14%, transparent);
  border-color: var(--fs-accent);
}

.fs-award-icon { font-size: 26px; line-height: 1; flex: none; }
.fs-award-info { min-width: 0; }

.fs-award-title {
  color: var(--fs-accent);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fs-award-player {
  color: var(--fs-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-award-value { color: var(--fs-dim); font-size: 0.82rem; }

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

/* Wide stat tables must scroll inside their own box rather than pushing the
   whole results overlay sideways on a phone. A silently clipped table reads as
   a table with fewer stats, so the box always ADVERTISES the overflow: a thin
   always-on accent scrollbar plus a right-edge fade. */
.fs-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fs-accent) var(--fs-edge);
}
.fs-table-wrap::-webkit-scrollbar { height: 6px; }
.fs-table-wrap::-webkit-scrollbar-track { background: var(--fs-edge); border-radius: 3px; }
.fs-table-wrap::-webkit-scrollbar-thumb { background: var(--fs-accent); border-radius: 3px; }

/* Added by fun_stats.js only when the table really is wider than its box, so a
   table that fits is never dimmed for nothing. */
.fs-table-wrap.fs-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
/* Scrolled to the end: nothing left to hint at, so stop dimming the last column. */
.fs-table-wrap.fs-scrollable.fs-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.fs-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--fs-text);
  font-variant-numeric: tabular-nums;
}

.fs-table th,
.fs-table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--fs-edge);
  white-space: nowrap;
}

.fs-table th {
  color: var(--fs-accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.fs-table .fs-rank-col { width: 2.5em; text-align: center; color: var(--fs-dim); }
/* Names are nowrap like every other cell, so one long name used to widen the
   table past its card and silently push the stat columns behind the wrap's
   horizontal scroll. Cap it and ellipsise instead — same treatment the award
   cards already give the player name. */
.fs-table .fs-name-col {
  text-align: left;
  max-width: 15em;
  overflow: hidden;
}
/* Only the name text truncates — the BOT chip after it stays whole. */
.fs-table .fs-name-col .fs-name-txt {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.fs-table .fs-name-col:has(.fs-bot) .fs-name-txt { max-width: calc(100% - 3.4em); }
.fs-table tbody tr.fs-mine { background: color-mix(in srgb, var(--fs-accent) 12%, transparent); }
.fs-table tbody tr.fs-mine .fs-name-col { color: var(--fs-accent); font-weight: 700; }

.fs-bot {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--fs-edge);
  border-radius: 3px;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--fs-dim);
  vertical-align: middle;
}

@media (max-width: 560px) {
  .fs-awards { grid-template-columns: 1fr; }
  .fs-table th, .fs-table td { padding: 6px 7px; font-size: 0.85rem; }
  .fs-table .fs-name-col { max-width: 9em; }
}