/* reported.gg — dark-first minimal UI.
   Palette follows the validated dataviz reference: page plane #0d0d0d,
   card surface #1a1a19, ink #fff/#c3c2b7/#898781, status colors paired
   with icons (never color alone), meters in a single blue hue. */

/* Inter, self-hosted (latin + cyrillic) */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/inter-800-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/inter-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --page:        #0d0d0d;
  --surface:     #1a1a19;
  --surface-2:   #232322;
  --ink:         #ffffff;
  --ink-2:       #c3c2b7;
  --ink-3:       #898781;
  --hairline:    rgba(255,255,255,0.10);
  --grid:        #2c2c2a;
  --accent:      #ff7a1a;   /* brand orange, vivid */
  --good:        #0ca30c;
  --warn:        #fab219;
  --bad:         #d03b3b;
  --bad-soft:    #e66767;
  --radius:      14px;
  --orange:      #ec835a;
  --sus:         #ff3838;   /* "suspicious" red — brighter than the ban red */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- chrome ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
}
.brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.brand .tld { color: var(--accent); }
/* The search box yields space before anything can overlap: it shrinks from
   340px down to 150px as the row tightens. */
.minisearch { flex: 0 1 340px; min-width: 150px; }
.minisearch input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
}
.minisearch input:focus { outline: none; border-color: var(--accent); }
.langsw { display: flex; flex: 1 1 0; justify-content: flex-end; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); }
.langsw a { color: var(--ink-3); text-decoration: none; font-weight: 600; padding: 2px 4px; }
.langsw a:hover { color: var(--ink); }
.langsw a.on { color: var(--accent); }

.brandgroup { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 16px; }
.brandhint { text-align: center; font-size: 12.5px; color: var(--ink-3); line-height: 1.2; white-space: nowrap; }
.brandhint b { color: var(--accent); font-weight: 700; }
/* Tablet: one row can't fit brand + search + hint + lang — drop the hint
   onto its own centered line under the header row. 1100 covers iPad Pro
   portrait (1024). */
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; row-gap: 4px; }
  .brandhint { order: 4; flex-basis: 100%; white-space: normal; }
}

.wrap {
  width: min(1080px, 100% - 48px);
  margin: 0 auto;
  padding: 28px 0 48px;
  flex: 1;
}
.pagefoot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 12px;
}
.credit a { color: var(--accent); text-decoration: none; font-weight: 600; }
.credit a:hover { text-decoration: underline; }

/* ---------- home ---------- */
.hero {
  max-width: 760px;
  margin: 22vh auto 0;
  text-align: center;
}
.hero h1 { font-size: 32px; letter-spacing: -0.02em; margin: 0 0 10px; }
.hero .sub { color: var(--ink-2); margin: 0 0 28px; }
.bigsearch { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.bigsearch input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 14px 18px;
  font: inherit;
}
.bigsearch input:focus { outline: none; border-color: var(--accent); }
.bigsearch button {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 0 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bigsearch button:hover { filter: brightness(1.1); }
/* example lookups under the search box */
.examples { margin-top: 15px; color: var(--ink-3); font-size: 13.5px; }
.examples a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.examples a:hover { color: var(--accent); }
.hint { margin-top: 30px; color: var(--ink-3); font-size: 13px; }
.hint p { margin: 4px 0; }
.urldemo {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 15px;
  color: var(--ink-2);
}
.urldemo.dim { font-size: 12.5px; color: var(--ink-3); }
.urldemo .e {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- profile layout: sidebar + main ---------- */
.pgrid {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 18px;
  align-items: start;
}
.side {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
}
.avatar {
  border-radius: 12px;
  background: var(--surface-2);
  align-self: center;
}
/* Stands in for the <img> when identity is degraded and no avatar was ever
   stored, so the sidebar keeps its layout instead of collapsing. */
.avatar-blank {
  width: 96px;
  height: 96px;
}
.side .idmeta { align-items: center; text-align: center; }
.side .verdict { align-items: center; }
.side .sidestats { justify-content: center; }
.side h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nicklink { color: var(--ink); text-decoration: none; }
.nicklink:hover { color: var(--accent); }
/* Trusted player: green nickname + verified seal, kept green on hover so the
   status reads consistently. */
.nicklink.trusted { color: var(--good); }
.nicklink.trusted:hover { color: var(--good); opacity: 0.85; }
.vbadge {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  cursor: default;
}
.vbadge svg { display: block; }
.vbadge .vseal { fill: var(--good); }
.vbadge .vcheck { fill: #fff; }
.flagchip { font-size: 18px; }
.idmeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.sitelinks { display: flex; gap: 8px; justify-content: center; }
.sitelinks a {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  transition: border-color .15s;
}
.sitelinks a:hover { border-color: var(--accent); }
.sitelinks img { width: 16px; height: 16px; object-fit: contain; }
.sidestats { display: flex; gap: 18px; }
.sidestat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sidestat dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
/* equal-height value row so the playtime number centers against the
   level circle beside it */
.sidestat dd {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  font-size: 13px;
}
.sideids { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sideids h3, .sumgroup h3, .seasons h3 {
  margin: 0;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 600;
}
.mainx { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chip {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s;
}
.chip:hover { border-color: var(--accent); }
.chip.copied { border-color: var(--good); color: var(--good); }

.verdict {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.banage { color: var(--ink-3); font-size: 12px; }

/* ---------- badges (icon + label, never color alone) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  background: var(--surface-2);
}
.badge.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.badge.bad { color: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge.neutral { color: var(--ink-2); }

/* ---------- source grid ---------- */
/* Five sources on a six-column track: two wide cards on the first row, three
   on the second. Deliberately positional rather than auto-fill — auto-fill
   would reflow 5 cards into 3+2 with a ragged tail, and the two cards that
   carry the most content (FACEIT, Leetify) are the ones given the extra width.
   Adding or removing a source means revisiting the spans below. */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.grid > .slot:nth-child(-n + 2) { grid-column: span 3; }
.grid > .slot:nth-child(n + 3)  { grid-column: span 2; }
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.slot .card:not(.skeleton) { animation: cardin .25s ease-out; }
@keyframes cardin {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.cardhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cardhead h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cardhead h2 a { color: var(--ink); text-decoration: none; }
.cardhead h2 a:hover { color: var(--accent); }
.cardsub {
  color: var(--ink-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
a.cardsub.link { text-decoration: none; }
a.cardsub.link:hover { color: var(--accent); text-decoration: underline; }
.elochip {
  flex: none;
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: #ff5500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* stat tiles: label muted, value primary ink, tabular for alignment */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px 14px;
  margin: 0;
}
.stat dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 1px;
}
.stat dd {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat dd.lv1 { color: var(--orange); }
.stat dd.lv2 { color: var(--sus); }
/* Peak elo: brand orange ties it to the ELO figure in the card header. */
.stat dd.peakelo { color: var(--accent); font-weight: 700; }
/* Peak elo comes from the slowest upstream call of the lot, so the tile holds
   its place with a spinner until the value streams in over SSE. */
.peakspin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--grid);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -1px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.agesub { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
/* graded metrics carry a threshold tooltip; hint it with a help cursor and a
   dotted underline under just the label text (text-decoration, so it never
   spans the cell or grows the row) */
.hastip { cursor: help; position: relative; }
.stat.hastip dt,
.sumitem.hastip dt,
.bar.hastip .barlabel {
  text-decoration: underline dotted var(--ink-3);
  text-underline-offset: 2px;
}

/* custom themed tooltip (replaces the browser default) */
.hastip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(230px, 70vw);
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  background: #232322;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 8px 11px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 60;
  pointer-events: none;
}
.hastip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #232322;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  z-index: 61;
  pointer-events: none;
}
.hastip:hover::after,
.hastip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hastip:hover::before,
.hastip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
/* ---------- CSTracker trust score ---------- */
/* The number is the card's headline, so it gets display weight; its color
   ramps green->red in trustColor (render.go) rather than through classes,
   because the score is continuous. Color is never the only signal — the
   percentage is right there. */
.trust {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.trustlabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.trustval {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Only a score with a breakdown is hoverable; a bare 100 has nothing to show. */
.hastrust { cursor: help; }
.hastrust .trustlabel {
  text-decoration: underline dotted var(--ink-3);
  text-underline-offset: 2px;
}
/* A real element, not a ::after — attr() content cannot carry the two-column
   rows and per-sign coloring this breakdown needs. Matches .hastip's surface. */
.trusttip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  width: max-content;
  min-width: 190px;
  max-width: min(260px, 76vw);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink);
  background: #232322;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 9px 11px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 60;
  pointer-events: none;
}
.hastrust:hover .trusttip,
.hastrust:focus-visible .trusttip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ttrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ttrow span { color: var(--ink-2); }
.ttrow b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ttrow b.up { color: var(--good); }
.ttrow b.down { color: var(--bad-soft); }

.delta { font-size: 11px; font-weight: 600; margin-left: 2px; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad-soft); }

/* meters: thin track, single hue fill, value labeled (not color-alone) */
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.barlabel { width: 76px; color: var(--ink-3); }
.track {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--grid);
  overflow: hidden;
}
.fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
}
.fill.lv1 { background: var(--orange); }
.fill.lv2 { background: var(--sus); }
.barval {
  width: 52px;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.barval.lv1 { color: var(--orange); }
.barval.lv2 { color: var(--sus); }

/* recent form: letter carries meaning, color reinforces */
.form { display: flex; align-items: center; gap: 5px; }
.formlabel { font-size: 11px; color: var(--ink-3); margin-right: 4px; }
.res {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.res.w { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.res.l { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad-soft); }

.note { color: var(--ink-3); font-size: 13px; margin: 0; }
.note.err { color: var(--warn); }

/* ---------- rank visuals ---------- */

/* CS2 Premier rating: the in-game skewed strip with the rating on top.
   Sized to sit beside the 68px map-rank badges; white ink per spec. */
.premier { display: flex; }
.prating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 24px;
  padding: 0 12px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5);
  font-variant-numeric: tabular-nums;
}
.prating.sm {
  min-width: 64px;
  height: 20px;
  padding: 0 9px;
  font-size: 11.5px;
}
/* digits in the rank's own color — the bright in-game tier hues, kept
   readable on the light strip artwork by the dark outline shadow */
.prating.tier-common    { color: #b0c3d9; }
.prating.tier-uncommon  { color: #5e98d9; }
.prating.tier-rare      { color: #4b69ff; }
.prating.tier-mythical  { color: #8847ff; }
.prating.tier-legendary { color: #d32ce6; }
.prating.tier-ancient   { color: #eb4b4b; }
.prating.tier-unusual   { color: #e4ae39; }
.prating[class*="tier-"] {
  text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 3px rgba(0,0,0,0.55);
}
/* header placement — top-right of the card, like the ELO chip */
.prating.hdr {
  flex: none;
  align-self: center;
  min-width: 68px;
  height: 21px;
  padding: 0 10px;
  font-size: 12px;
}

/* Competitive MM rank badges (1..18 in-game images) */
.mmranks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mmrank {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.mmrank img {
  width: 68px;
  height: auto;
  border-radius: 4px;
}
.mmrank figcaption {
  font-size: 10.5px;
  color: var(--ink-3);
}

/* FACEIT level: SVG ring — gray track, colored arc filling from the left
   over the top proportional to level, colored number centered */
.fcring { flex: none; align-self: center; }
.fcring .bg { fill: #1f1f1e; }
.fcring .tr { fill: none; stroke: #3a3a38; stroke-width: 3.2; stroke-linecap: round; }
.fcring .pr { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.fcring text {
  fill: currentColor;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font);
}
.fcring.fl1  { color: #cdcdcd; }
.fcring.fl23 { color: #3ddc53; }
.fcring.fl47 { color: #ffc800; }
.fcring.fl89 { color: #ff6309; }
.fcring.fl10 { color: #fe1f00; }

.cardfoot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 11px;
  padding-top: 4px;
}
/* Pinned right even when it is the only child, which space-between would
   otherwise push to the left edge. */
.cardage { margin-left: auto; }
.stalemark { color: var(--accent); }
.card.stale { opacity: 0.92; }

/* ---------- source logos in card headers ---------- */
.srclogo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
  align-self: center;
  border-radius: 3px;
}

/* ---------- cheat-check summary ---------- */
.slot-wide .card { animation: cardin .25s ease-out; }
.summary .cardhead h2 { font-size: 15px; }
/* threshold legend, top-right of the summary header */
.sumlegend {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.sumlegend .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.sumlegend .dot.r { margin-left: 7px; }
.sumlegend .dot.o { background: var(--orange); }
.sumlegend .dot.r { background: var(--sus); }
/* Aligned rows: fixed label column + five shared metric columns, so
   values line up vertically across sources and scan as a table. */
.sumtable { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sumrow {
  display: grid;
  grid-template-columns: 118px repeat(5, minmax(78px, 1fr));
  /* Column gap deliberately tighter than the 16px it started at: the metric
     columns sit near their 78px minimum on a full row, so a wide value in the
     last one (a dd like "17.05.2026" at 16px/650) overran its track and ended
     up all but touching the season column's divider. The 4px reclaimed from
     each of the five gaps widens the tracks instead. */
  gap: 8px 12px;
  align-items: center;
  padding: 10px 0;
}
.sumrow + .sumrow { border-top: 1px solid var(--hairline); }
.sumsrc {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 7px;
}
.sumitem { display: flex; flex-direction: column; gap: 1px; }
.sumitem dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.sumitem dd {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* suspicion levels: orange = unusual, red = very suspicious */
.sumitem.lv1 dd { color: var(--orange); }
.sumitem.lv2 dd { color: var(--sus); }
/* A row whose source has not answered yet: holds its place across the metric
   columns so the finished rows never shift when it fills in. */
/* The placeholder stands in for a row of metrics, not for the whole grid. At
   the full 2/-1 span it claimed all five metric columns and ran right up to
   the season column's divider, reading as if it belonged to that box. No real
   row fills more than four columns, so three is the honest width for a
   stand-in, and max-width keeps it inside the table whatever the grid does. */
.sumrow .sumwait {
  grid-column: 2 / 5;
  height: 20px;
  max-width: 100%;
}
/* The block streams once per source, so only its first paint fades in. */
.slot-wide .card.upd { animation: none; }
/* Legend already claims the free space; the "still filling" dot rides beside it. */
.summary .pulse-dot { margin-left: 8px; }

/* summary body: metric rows left, season history right */
/* The gap is the last metric column's breathing room against the season
   divider, so it carries the space reclaimed from .sumrow's column gap. */
.sumbody { display: flex; gap: 32px; align-items: flex-start; }

/* premier season history plus the VAC Live verdict — vertical, one row per
   season, centered as a single block against the metric rows beside it.
   align-self overrides .sumbody's flex-start so the column sits on the
   vertical middle; the symmetric padding-block keeps its first and last rows
   off the divider by the same amount, which is what makes the centering read
   as deliberate rather than accidental. */
.seasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  padding-left: 20px;
  padding-block: 6px;
  border-left: 1px solid var(--hairline);
  align-self: center;
}
.seasonlist { display: flex; flex-direction: column; gap: 6px; }

/* VAC Live: a verdict, not a metric — label and count centered as one compact
   unit under the season rows. Deliberately NOT stretched to the column edges
   like the season rows: those need their strips to line up, this is a single
   pair, and space-between left the count stranded far from what it counts.
   Only :not(:first-child) gets the rule above, so the line stands alone
   cleanly when a player has no season history. */
.vacline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  /* Tight: the colon already joins the pair, a wider gap would pull them
     back apart. */
  gap: 6px;
  font-size: 12px;
}
.vacline:not(:first-child) {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.vaclabel { color: var(--ink-3); }
.vacval {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--good);
}
.vacline.lv1 .vacval { color: var(--orange); }
.vacline.lv2 .vacval { color: var(--sus); }
/* Fixed columns so rows align even when a season has no "best" part — and a
   reserved minimum on that third column so the whole block keeps one width
   across profiles. As plain `auto` it collapsed to zero for any player whose
   every season ended at its own peak (last == best hides the strip), which
   made the column render ~110px narrower than usual and read as broken rather
   than as empty. 112px is the widest that cell gets: "best" label + 6px gap +
   an .sm rating strip. */
.season {
  display: grid;
  grid-template-columns: 24px 78px minmax(112px, auto);
  align-items: center;
  gap: 8px;
}
.scell { display: flex; align-items: center; gap: 6px; }
.slabel { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.sbest { font-size: 11px; color: var(--ink-3); }

/* Game Coordinator, compact sidebar form */
.gcside { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.gcside h3 {
  margin: 0;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 600;
  text-align: center;
}
.gcrows { display: flex; flex-direction: column; gap: 4px; }
.gcrow { display: flex; justify-content: space-between; font-size: 12.5px; }
.gcrow dt { color: var(--ink-3); }
.gcrow dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.gcgroup { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.gcgroup h4 {
  margin: 0 0 1px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}
.gcrow.sub { padding-left: 10px; border-left: 2px solid var(--grid); }

/* who-made-this — a full-width bar above the player profile, edges flush with
   the grid below so it reads as a sibling block. Quiet by default, brand accent
   on the name; lifts on hover. */
.exposetop {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 18px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
}
.exposetop .ex-head { font-size: 12.5px; color: var(--ink-2); }
.exposetop .ex-head b { color: var(--accent); font-weight: 700; }
.exposetop .ex-dot { color: var(--ink-3); }
.exposetop .ex-sub { font-size: 12.5px; color: var(--ink-3); }
.exposetop:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); }
.exposetop:hover .ex-head { color: var(--ink); }
.exposetop:hover .ex-sub { color: var(--ink-2); }

/* merged map ranks, sidebar */
.maprows { display: flex; flex-direction: column; gap: 5px; }
.maprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.maprow .mapname { color: var(--ink-2); }
.maprow img { width: 58px; height: auto; border-radius: 3px; }

/* kills-by-weapon breakdown (csstats): labeled sub-block, one weapon per
   row with the value right-aligned */
.wkills {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.wkhead { display: flex; flex-direction: column; gap: 1px; margin-bottom: 3px; align-items: center; text-align: center; }
.wkhead dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.wkhead dd {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.wkill {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  padding-left: 10px;
  border-left: 2px solid var(--grid);
}
.wkill b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- skeletons ---------- */
.pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: auto;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
.shimmer {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--grid) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.w50 { width: 50%; } .w70 { width: 70%; } .w90 { width: 90%; }

/* Below the two-wide/three-narrow layout the spans stop helping: fall back to
   two even columns, then one. */
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid > .slot:nth-child(-n + 2),
  .grid > .slot:nth-child(n + 3) { grid-column: span 1; }
}
@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .pgrid { grid-template-columns: 1fr; }
  .side { position: static; }
  .sumbody { flex-direction: column; }
  .seasons { border-left: none; padding-left: 0; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 24px); }
  .hero { margin-top: 6vh; }
  .bigsearch { flex-direction: column; }
  .bigsearch button { padding: 12px; }
  .sumrow { grid-template-columns: repeat(3, 1fr); }
  .sumrow .sumsrc { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer, .pulse-dot, .peakspin, .slot .card:not(.skeleton) { animation: none; }
}