/* Shared appearance only. Hosts own positioning, hover and dismissal. */
.racer-card[hidden] {
  /* The host has [hidden] { display: none !important }. Only this card opts in. */
  display: grid !important;
  box-sizing: border-box;
  width: 232px;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--moss);
  background: var(--raised);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  color: var(--parchment);
  font-family: var(--body, sans-serif);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}
.racer-card .card-head { display: flex; align-items: center; gap: 9px; }
.racer-card .avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--raised); flex: none; }
.racer-card .card-who { display: grid; gap: 1px; min-width: 0; }
.racer-card .card-who strong { font-family: var(--display); font-size: 1rem; overflow-wrap: anywhere; }
.racer-card .pronouns { color: var(--muted); font-size: 0.74rem; }
.racer-card .card-span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.racer-card .card-stats { color: var(--parchment); font-family: var(--mono); font-size: 0.76rem; }
.racer-card .card-ratings { display: grid; gap: 2px; color: var(--parchment); font-family: var(--mono); font-size: 0.74rem; }
.racer-card .card-last { color: var(--muted); font-size: 0.76rem; }
/* A label and its value on one line, for the rows where the label reads as a
   prefix rather than a heading: the form squares and the last-raced date. The
   label keeps its own baseline so the squares sit against it. */
.racer-card .card-line { display: flex; align-items: center; gap: 7px; }
.racer-card .card-line .card-span { flex: none; }
.racer-card .form { display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: 2px; }
.racer-card .form > a, .racer-card .form > span { box-sizing: border-box; width: 11px; height: 14px; border: 1px solid var(--edge); background: var(--raised); text-decoration: none; }
/* Gold, as on the stats pages and on the matchup strip: one colour for a win. */
.racer-card .form > .won { background: var(--gold); border-color: var(--gold); }
.racer-card .form > .finished { background: rgba(79, 143, 44, 0.45); border-color: var(--moss); }
.racer-card .form > .dnf { background: transparent; border-color: var(--dodongo); }
.racer-card .form > a:hover { outline: 1px solid var(--gold); }
.racer-card .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.racer-card .where { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding-top: 6px; border-top: 1px solid var(--edge-soft); }
.racer-card .where-pill { padding: 2px 8px; border: 1px solid var(--edge); background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.racer-card a.where-pill:hover { border-color: currentColor; }
.racer-card .where-pill.twitch { border-color: rgba(145, 70, 255, 0.55); color: #a970ff; }
.racer-card .where-pill.twitch:hover { background: rgba(145, 70, 255, 0.12); }
.racer-card .where-pill.rt { border-color: rgba(79, 143, 44, 0.6); color: var(--moss-bright); }
.racer-card .where-pill.rt:hover { background: rgba(79, 143, 44, 0.12); }
.racer-card .where-pill.srl { border-color: rgba(217, 164, 65, 0.5); color: var(--gold); }
.racer-card .where-pill.srl:hover { background: rgba(217, 164, 65, 0.12); }
.racer-card .card-links a { color: var(--gold); font-size: 0.78rem; text-decoration: none; }
.racer-card .card-links a:hover { text-decoration: underline; }
@media (max-width: 620px), (hover: none) {
  .racer-card[hidden] { display: none !important; }
}

/* Matchups inherit the racer card's frame, spacing, fonts and hidden fallback. */
.racer-card.matchup-card[hidden] {
  width: max-content;
  min-width: 232px;
  max-width: min(360px, calc(100vw - 24px));
}
/* One racer a line, picture then name, with "vs." between them.
   Three things across one card width went ragged the moment either name was
   long enough to wrap, and two of the names on a 61-racer bracket are.

   Revised 2026-10-01, twice. First the two of them shared one grid -- a column
   for portraits and a column for names -- so a portrait sat pinned to the card's
   left edge while its name sat centred some distance away, looking like it
   belonged to the card rather than to the person. Grouping each portrait with
   its name fixed that but moved the names: centring [portrait + name] as a unit
   pushes the name right of centre by half the portrait's width, and the names
   are what the header is for.

   So the names hold the centre line -- both of them and the "vs." on one axis --
   and each portrait hangs off the left of its own name. Out of flow to do it:
   anything in flow beside a centred name is width the name has to give back.

   `width: fit-content` with auto margins is what makes this work. It shrinks
   each row's box to its name, so the absolute portrait can be positioned against
   that box -- `right: 100%` is the name's left edge, not the card's. The reserve
   below contributes to the card's natural width: 26px of
   portrait, 8px of gap, and as much again on the other side so the name stays
   centred rather than merely fitting. */
.racer-card .matchup-head {
  display: grid;
  min-width: 0;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.racer-card .matchup-head .card-who {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.racer-card .matchup-head:has(.avatar) { padding-inline: 34px; }
.racer-card .matchup-head .card-who .avatar {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}
.racer-card .matchup-head .card-who strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.racer-card .matchup-head .matchup-v { text-transform: lowercase; letter-spacing: 0.08em; }
.racer-card .matchup-head a { color: inherit; text-decoration: none; }
.racer-card .matchup-head a:hover { color: var(--gold); }
.racer-card .matchup-record { display: grid; gap: 2px; }
.racer-card .matchup-record-line > span { white-space: nowrap; }
.racer-card .matchup-ratings {
  grid-template-rows: repeat(3, auto);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  gap: 3px 7px;
  align-items: baseline;
  font-family: var(--body, sans-serif);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.racer-card .matchup-ratings > span { overflow-wrap: anywhere; text-align: center; }
.racer-card .matchup-ratings > :nth-child(-n + 3) { text-align: left; }
/* The two names labelling the rating rows are cut short rather than broken:
   "DEM_Gaming:" was wrapping to "DEM_Gamin" / "g:", which pushed the row below
   it down and read as a different name. Nothing is lost by truncating -- the
   head above states both names in full, in larger type -- and no title
   attribute is added to restore it, because a tooltip inside an open card is
   the very thing we just took off the links that open one. */
.racer-card .matchup-rating-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The last ten meetings, a row of marks each.
   A filled mark is a meeting that racer finished ahead in. Newest on the left,
   like every other strip on the site: the racer card's own Last 10 and the Last
   Ten Races panel both read that way, and this one no longer disagrees. */
.racer-card .matchup-form { display: grid; gap: 4px; }
.racer-card .matchup-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.racer-card .matchup-form-who {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.racer-card .matchup-form-marks { display: grid; grid-auto-flow: column; gap: 3px; }
.racer-card .matchup-mark {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  /* An empty mark is still drawn: ten slots a row is what makes two rows
     comparable at a glance, and a row that only drew its wins would be a
     different length every time. */
  background: var(--edge);
}
.racer-card .matchup-mark.won { background: var(--gold, #d9a441); }
/* A tie and a race neither finished are not wins for anybody, and they are not
   the same thing either -- one is a dead heat and one is a pair of DNFs. */
.racer-card .matchup-mark.tied { background: var(--muted); }
.racer-card .matchup-mark.none { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); }