/* ui/MatchResults — contract: ./MatchResults.spec.md. Tokens from ui/Theme. */

.qc-results {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* track = viewport width, so the panel can't overflow */
  justify-items: center;
  /* `safe` matters on a short screen: a centred panel taller than the viewport
     overflows both ends and its top can never be scrolled to. Safe alignment
     falls back to start the moment it would not fit, so the headline stays
     reachable. */
  align-items: safe center;
  padding: 20px 24px 0; /* the sticky actions strip is the bottom edge */
  overflow-y: auto;
  background: radial-gradient(
    ellipse 90% 80% at 50% 45%,
    color-mix(in oklab, var(--qc-space-0) 70%, transparent),
    color-mix(in oklab, var(--qc-space-0) 92%, transparent)
  );
  backdrop-filter: blur(6px);
  animation: qc-results-fade var(--qc-dur) ease-out both;
}

.qc-results__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(880px, 100%);
}

/* The mode's name and the table, one grid area on a wide screen. */
.qc-results__board {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------ header --- */

.qc-results__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  animation: qc-results-rise 560ms var(--qc-ease-out) both;
}

.qc-results__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: var(--qc-text-dim);
}

.qc-results__eyebrow::before,
.qc-results__eyebrow::after {
  content: "";
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--qc-line-strong));
}

.qc-results__eyebrow::after {
  transform: scaleX(-1);
}

.qc-results__title {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* balances the trailing letter-spacing */
  text-transform: uppercase;
  color: var(--qc-text);
  background: linear-gradient(94deg, var(--qc-text) 18%, var(--qc-accent-2) 58%, var(--qc-accent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.qc-results__placement {
  margin: 0;
  font-size: 14px;
  color: var(--qc-text-dim);
}

/* Step H: the server's city ends the placement line; it never splits. */
.qc-results__region {
  white-space: nowrap;
}

.qc-results__place {
  font: 600 14px/1 var(--qc-font-mono);
  color: var(--qc-text);
}

/* ------------------------------------------------------------- mastery --- */

.qc-results-mastery {
  --ship: var(--qc-accent);
  --bar-delay: 520ms;
  --bar-dur: 1100ms;
  display: grid;
  gap: 12px 24px;
  width: 100%;
  padding: 16px 20px 16px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ship) 8%, transparent), transparent 60%),
    var(--qc-glass);
  border: 1px solid var(--qc-line);
  border-radius: var(--qc-radius);
  backdrop-filter: blur(8px);
  animation: qc-results-rise 560ms var(--qc-ease-out) 90ms both;
}

.qc-results-mastery[data-ship="laser"] { --ship: var(--qc-ship-laser); }
.qc-results-mastery[data-ship="tracerTank"] { --ship: var(--qc-ship-laser); }
.qc-results-mastery[data-ship="plasma"] { --ship: var(--qc-ship-plasma); }
.qc-results-mastery[data-ship="heTank"] { --ship: var(--qc-ship-plasma); }
.qc-results-mastery[data-ship="rocket"] { --ship: var(--qc-ship-rocket); }
.qc-results-mastery[data-ship="scatter"] { --ship: var(--qc-ship-scatter); }
.qc-results-mastery[data-ship="canisterTank"] { --ship: var(--qc-ship-scatter); }
.qc-results-mastery[data-ship="arc"] { --ship: var(--qc-ship-arc); }
.qc-results-mastery[data-ship="graviton"] { --ship: var(--qc-ship-graviton); }
.qc-results-mastery[data-ship="mortarTank"] { --ship: var(--qc-ship-graviton); }
.qc-results-mastery[data-ship="shuriken"] { --ship: var(--qc-ship-shuriken); }
.qc-results-mastery[data-ship="gatling"] { --ship: var(--qc-ship-gatling); }
.qc-results-mastery[data-ship="tesla"] { --ship: var(--qc-ship-tesla); }
.qc-results-mastery[data-ship="inferno"] { --ship: var(--qc-ship-inferno); }
.qc-results-mastery[data-ship="flameTank"] { --ship: var(--qc-ship-inferno); }
.qc-results-mastery[data-ship="warden"] { --ship: var(--qc-ship-warden); }
.qc-results-mastery[data-ship="harpoon"] { --ship: var(--qc-ship-harpoon); }
.qc-results-mastery[data-ship="chrono"] { --ship: var(--qc-ship-chrono); }
.qc-results-mastery[data-ship="fuseTank"] { --ship: var(--qc-ship-chrono); }
.qc-results-mastery[data-ship="foundry"] { --ship: var(--qc-ship-foundry); }

.qc-results-mastery__main {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.qc-results-mastery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
}

.qc-results-mastery__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}

.qc-results-mastery__xp {
  margin: 0;
  font-size: 13px;
  color: var(--qc-text-dim);
}

.qc-results-mastery__xp-value {
  font: 600 20px/1 var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--qc-xp);
}

.qc-results-mastery__progress {
  display: grid;
  gap: 8px;
}

.qc-results-mastery__level-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
}

.qc-results-mastery__level {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--qc-text);
}

.qc-results-mastery__level-up {
  padding: 4px 8px 4px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qc-accent-2);
  border: 1px solid color-mix(in oklab, var(--qc-accent-2) 55%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 18px -4px color-mix(in oklab, var(--qc-accent-2) 70%, transparent);
  animation: qc-results-pop 520ms var(--qc-ease-out) both;
  animation-delay: calc(var(--bar-delay) + var(--bar-dur) - 120ms);
}

.qc-results-mastery__bar {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  background: var(--qc-line);
  border-radius: 3px;
}

.qc-results-mastery__fill {
  display: block;
  width: calc(var(--to, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--ship) 55%, transparent), var(--ship));
  border-radius: inherit;
  box-shadow: 0 0 12px color-mix(in oklab, var(--ship) 70%, transparent);
  animation: qc-results-fill var(--bar-dur) var(--qc-ease-out) var(--bar-delay) both;
}

.qc-results-mastery[data-maxed] .qc-results-mastery__level {
  color: var(--qc-rarity-legendary);
}

.qc-results-mastery[data-maxed] .qc-results-mastery__fill {
  background: linear-gradient(90deg, color-mix(in oklab, var(--qc-rarity-legendary) 55%, transparent), var(--qc-rarity-legendary));
  box-shadow: 0 0 12px color-mix(in oklab, var(--qc-rarity-legendary) 70%, transparent);
}

/* Breakdown: a strip of label-over-value pairs that wraps on narrow panels. */
.qc-results-mastery__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
}

.qc-results-mastery__breakdown:empty {
  display: none;
}

.qc-results-mastery__row {
  display: grid;
  gap: 5px;
}

.qc-results-mastery__row-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qc-text-faint);
}

.qc-results-mastery__row-xp {
  margin: 0;
  font: 500 15px/1 var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--qc-text);
}

.qc-results-mastery__row[data-negative] .qc-results-mastery__row-xp {
  color: var(--qc-text-dim);
}

/* Unlocks: tier-edged chips that rise in after the bar, then shine now and then. */
.qc-results-mastery__unlocks {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--qc-line);
}

.qc-results-mastery__unlocks-label {
  margin: 0;
  color: var(--qc-text-dim);
}

.qc-results-mastery__unlock-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qc-results-unlock {
  --tier: var(--qc-rarity-common);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 9px;
  overflow: hidden;
  background: linear-gradient(90deg, color-mix(in oklab, var(--tier) 16%, transparent), transparent 85%);
  border: 1px solid color-mix(in oklab, var(--tier) 55%, transparent);
  border-radius: var(--qc-radius-sm);
  box-shadow: 0 0 26px -12px var(--tier);
  animation: qc-results-unlock 560ms var(--qc-ease-out) both;
  animation-delay: calc(var(--bar-delay) + var(--bar-dur) + var(--i, 0) * 140ms);
}

.qc-results-unlock[data-tier="rare"] { --tier: var(--qc-rarity-rare); }
.qc-results-unlock[data-tier="epic"] { --tier: var(--qc-rarity-epic); }
.qc-results-unlock[data-tier="legendary"] { --tier: var(--qc-rarity-legendary); }

/* A soft diagonal shine that sweeps across, then rests. */
.qc-results-unlock::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in oklab, var(--qc-text) 16%, transparent) 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
  animation: qc-results-shine 4200ms ease-in-out infinite;
  animation-delay: calc(var(--bar-delay) + var(--bar-dur) + 500ms + var(--i, 0) * 180ms);
}

.qc-results-unlock__swatch {
  --swatch-hull: var(--qc-accent);
  --swatch-accent: var(--qc-accent);
  flex: none;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--swatch-hull) 0 58%, var(--swatch-accent) 58% 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--qc-text) 22%, transparent),
    0 0 14px -2px color-mix(in oklab, var(--swatch-hull) 60%, transparent);
}

.qc-results-unlock__swatch[data-hull="laser"] { --swatch-hull: var(--qc-ship-laser); }
.qc-results-unlock__swatch[data-hull="plasma"] { --swatch-hull: var(--qc-ship-plasma); }
.qc-results-unlock__swatch[data-hull="rocket"] { --swatch-hull: var(--qc-ship-rocket); }
.qc-results-unlock__swatch[data-hull="crimson"] { --swatch-hull: var(--qc-paint-crimson, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="solar"] { --swatch-hull: var(--qc-paint-solar, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="ember"] { --swatch-hull: var(--qc-paint-ember, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="emerald"] { --swatch-hull: var(--qc-paint-emerald, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="ice"] { --swatch-hull: var(--qc-paint-ice, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="chrome"] { --swatch-hull: var(--qc-paint-chrome, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="void"] { --swatch-hull: var(--qc-paint-void, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="magenta"] { --swatch-hull: var(--qc-paint-magenta, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="gold"] { --swatch-hull: var(--qc-paint-gold, var(--qc-accent)); }
.qc-results-unlock__swatch[data-hull="aurora"] { --swatch-hull: var(--qc-paint-aurora, var(--qc-accent)); }

.qc-results-unlock__swatch[data-accent="laser"] { --swatch-accent: var(--qc-ship-laser); }
.qc-results-unlock__swatch[data-accent="plasma"] { --swatch-accent: var(--qc-ship-plasma); }
.qc-results-unlock__swatch[data-accent="rocket"] { --swatch-accent: var(--qc-ship-rocket); }
.qc-results-unlock__swatch[data-accent="crimson"] { --swatch-accent: var(--qc-paint-crimson, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="solar"] { --swatch-accent: var(--qc-paint-solar, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="ember"] { --swatch-accent: var(--qc-paint-ember, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="emerald"] { --swatch-accent: var(--qc-paint-emerald, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="ice"] { --swatch-accent: var(--qc-paint-ice, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="chrome"] { --swatch-accent: var(--qc-paint-chrome, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="void"] { --swatch-accent: var(--qc-paint-void, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="magenta"] { --swatch-accent: var(--qc-paint-magenta, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="gold"] { --swatch-accent: var(--qc-paint-gold, var(--qc-accent)); }
.qc-results-unlock__swatch[data-accent="aurora"] { --swatch-accent: var(--qc-paint-aurora, var(--qc-accent)); }

.qc-results-unlock__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.qc-results-unlock__name {
  font-size: 14px;
  font-weight: 600;
}

.qc-results-unlock__tier {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tier);
}

.qc-results-mastery__hint {
  margin: 0;
  font-size: 12px;
  color: var(--qc-text-faint);
}

/* Wide panels: unlocks become a side column, which keeps the dialog short
   enough that the headline stays in view when the parent focuses Play again. */
@media (min-width: 761px) {
  .qc-results-mastery:has(> .qc-results-mastery__unlocks) {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.34fr);
  }

  .qc-results-mastery__unlocks {
    align-content: start;
    padding-top: 0;
    padding-left: 28px;
    border-top: 0;
    border-left: 1px solid var(--qc-line);
  }

  .qc-results-mastery__unlock-list {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ----------------------------------------------------------- standings --- */

.qc-results__scroll {
  width: 100%;
  overflow-x: auto;
  background: var(--qc-glass);
  border: 1px solid var(--qc-line);
  border-radius: var(--qc-radius);
  backdrop-filter: blur(8px);
}

.qc-standings {
  --ship: var(--qc-accent);
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.qc-standings th,
.qc-standings td {
  padding: 8px 16px;
  white-space: nowrap;
  vertical-align: middle;
}

.qc-standings thead th {
  padding-top: 11px;
  padding-bottom: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qc-text-faint);
  border-bottom: 1px solid var(--qc-line);
}

.qc-standings tbody tr + tr > * {
  border-top: 1px solid color-mix(in oklab, var(--qc-line) 55%, transparent);
}

.qc-standings__rank {
  width: 72px;
  text-align: left;
}
/* The rank is a short number read left: the pilot cell's own left side is the
   gap, so the rank gives its right side to the pilot tag. */
.qc-standings .qc-standings__rank { padding-right: 0; }

.qc-standings__pilot {
  max-width: 0; /* the pilot column takes the slack, and its tag ellipsises inside it */
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.qc-standings__stat {
  width: 1%; /* shrink to content; the pilot column takes the slack */
  text-align: right;
}

.qc-standings tbody .qc-standings__rank,
.qc-standings tbody .qc-standings__stat {
  font: 500 13px/1 var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--qc-text-dim);
}

.qc-standings tbody .qc-standings__pilot {
  font-weight: 500;
  color: var(--qc-text);
}

/* What the match was scored on, above the table. */
.qc-results__mode {
  margin: 0;
  text-align: center;
  color: var(--qc-text-faint);
}

/* A crew's block header. TDM's board is read crew by crew: modeOrder already
   puts the winning crew on top, so one flat list would read 6th as a personal
   verdict the match never passed (docs/modes.md 3.2). */
.qc-standings__crew {
  --crew: var(--qc-text-dim);
}

.qc-standings__crew[data-team="0"] { --crew: var(--qc-accent-2); }

.qc-standings__crew[data-team="1"] { --crew: var(--qc-rarity-legendary); }

.qc-standings__crew-cell {
  padding: 16px 12px 7px;
  border-bottom: 1px solid color-mix(in oklab, var(--crew) 34%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.qc-standings tbody:first-of-type .qc-standings__crew-cell {
  padding-top: 8px;
}

.qc-standings__crew-cell::before {
  content: "◆";
  margin-right: 8px;
  font-size: 12px;
  color: var(--crew);
}

.qc-standings__crew-name {
  color: var(--crew);
}

.qc-standings__crew-score {
  margin-left: 10px;
  font-family: var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--qc-text-dim);
}

/* The winner is named in a word, never by its colour alone. */
.qc-standings__crew-tag {
  margin-left: 10px;
  padding: 2px 7px 3px;
  border: 1px solid color-mix(in oklab, var(--crew) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--crew) 16%, transparent);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: color-mix(in oklab, var(--crew) 45%, var(--qc-text));
}

/* Crown time and takes sit with the other numbers, monospaced and never wrapped. */
.qc-standings__stat[data-stat="crown"],
.qc-standings__stat[data-stat="takes"] {
  white-space: nowrap;
  color: var(--qc-text);
}

.qc-standings__row {
  animation: qc-results-row 420ms var(--qc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms + 140ms);
}

.qc-standings__row[data-ship="laser"] { --ship: var(--qc-ship-laser); }
.qc-standings__row[data-ship="tracerTank"] { --ship: var(--qc-ship-laser); }
.qc-standings__row[data-ship="plasma"] { --ship: var(--qc-ship-plasma); }
.qc-standings__row[data-ship="heTank"] { --ship: var(--qc-ship-plasma); }
.qc-standings__row[data-ship="rocket"] { --ship: var(--qc-ship-rocket); }
.qc-standings__row[data-ship="scatter"] { --ship: var(--qc-ship-scatter); }
.qc-standings__row[data-ship="canisterTank"] { --ship: var(--qc-ship-scatter); }
.qc-standings__row[data-ship="arc"] { --ship: var(--qc-ship-arc); }
.qc-standings__row[data-ship="graviton"] { --ship: var(--qc-ship-graviton); }
.qc-standings__row[data-ship="mortarTank"] { --ship: var(--qc-ship-graviton); }
.qc-standings__row[data-ship="shuriken"] { --ship: var(--qc-ship-shuriken); }
.qc-standings__row[data-ship="gatling"] { --ship: var(--qc-ship-gatling); }
.qc-standings__row[data-ship="tesla"] { --ship: var(--qc-ship-tesla); }
.qc-standings__row[data-ship="inferno"] { --ship: var(--qc-ship-inferno); }
.qc-standings__row[data-ship="flameTank"] { --ship: var(--qc-ship-inferno); }
.qc-standings__row[data-ship="warden"] { --ship: var(--qc-ship-warden); }
.qc-standings__row[data-ship="harpoon"] { --ship: var(--qc-ship-harpoon); }
.qc-standings__row[data-ship="chrono"] { --ship: var(--qc-ship-chrono); }
.qc-standings__row[data-ship="fuseTank"] { --ship: var(--qc-ship-chrono); }
.qc-standings__row[data-ship="foundry"] { --ship: var(--qc-ship-foundry); }

.qc-standings__dot {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--ship);
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in oklab, var(--ship) 70%, transparent);
}

/* How each human played (ui/PilotTag's DeviceMark): a narrow, quiet column.
   Two classes, so it outranks `.qc-standings th`/`td`'s 16 px sides: under them
   a 14 px mark took a 46 px column and cut a titled pilot's tag short. */
.qc-standings .qc-standings__device {
  position: relative; /* contains the header's visually hidden word */
  width: 28px;
  padding-inline: 6px 0; /* its gap from the tag's last chip on a phone */
  text-align: center;
  line-height: 0;
}

/* Winner: gold rank, heavier name. */
.qc-standings__row[data-winner] .qc-standings__rank {
  font-weight: 700;
  color: var(--qc-rarity-legendary);
}

.qc-standings__row[data-winner] .qc-pilot-tag__name {
  font-weight: 700;
}

/* The local pilot: tinted row with an accent edge. */
.qc-standings__row[data-local] > * {
  background: color-mix(in oklab, var(--qc-accent-2) 8%, transparent);
}

.qc-standings__row[data-local] > :first-child {
  box-shadow: inset 2px 0 0 var(--qc-accent-2);
}

.qc-standings__row[data-local] .qc-standings__stat {
  color: var(--qc-text);
}

/* ------------------------------------------------- leaderboard nudge --- */

/* One line, and it never grows into a panel: leaderboards.md §6.2. */
.qc-results__nudge {
  margin: -6px 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--qc-text);
}

.qc-results__nudge[data-tone="dim"] {
  color: var(--qc-text-faint);
}

/* The words "sign in", inside the sentence, as a real button. */
.qc-results__nudge-action {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--qc-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.qc-results__nudge-action:hover {
  color: var(--qc-text);
}

/* ------------------------------------------------------------ actions --- */

/* The way out is always in view: the footer sticks to the bottom of the
   dialog on an opaque strip, and anything that still overflows scrolls under
   it. */
.qc-results__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  padding: 12px 0 max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--qc-space-0) 72%, transparent);
}

.qc-results__actions .qc-button--ghost {
  padding: 16px 28px; /* matches the primary button's height */
}

/* Between online matches: the countdown leads the actions row. */
.qc-results__next {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: 0 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--qc-text-dim);
}

.qc-results__next-seconds {
  min-width: 2ch;
  font: 500 20px/1 var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: right;
  color: var(--qc-text);
}

@media (max-width: 560px) {
  /* Clear of the Quanta counter in the top right: the headline wraps before it reaches it. */
  .qc-results__title {
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    padding-inline: 56px;
    overflow-wrap: break-word;
  }

  .qc-results__eyebrow::before,
  .qc-results__eyebrow::after {
    display: none;
  }

  .qc-standings th,
  .qc-standings td {
    padding-left: 12px;
    padding-right: 12px;
  }

  .qc-results-mastery {
    padding: 18px 16px 20px;
  }

  .qc-results-mastery__breakdown {
    gap: 12px 22px;
  }
}

/* The Theme policy already makes motion near-instant; this also drops the
   delayed bar fill and the repeating shine outright, so the final state shows
   at once and nothing flickers. */
@media (prefers-reduced-motion: reduce) {
  .qc-results-mastery__fill,
  .qc-results-mastery__level-up,
  .qc-results-unlock {
    animation: none;
  }

  .qc-results-unlock::after {
    display: none;
    animation: none;
  }
}

@keyframes qc-results-fade {
  from { opacity: 0; }
}

@keyframes qc-results-rise {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes qc-results-row {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes qc-results-fill {
  from { width: calc(var(--from, 0) * 100%); }
}

@keyframes qc-results-pop {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes qc-results-unlock {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
}

@keyframes qc-results-shine {
  0% { transform: translateX(-110%); }
  30%, 100% { transform: translateX(110%); }
}

/* A landscape phone. Nine standings rows, a mastery card and a headline cannot
   share 300px of height, so the dialog scrolls; what this pass buys is how much
   of it lands in the first screenful. Everything shrinks except the buttons,
   which stay thumb-sized. */
@media (max-height: 520px) {
  .qc-results { padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  .qc-results__panel { gap: 10px; }

  .qc-results__header { gap: 4px; }
  .qc-results__eyebrow { gap: 10px; font-size: 12px; }
  .qc-results__eyebrow::before,
  .qc-results__eyebrow::after { width: 36px; }
  .qc-results__title { font-size: clamp(16px, 2.6vw, 22px); letter-spacing: 0.2em; text-indent: 0.2em; }
  .qc-results__placement,
  .qc-results__place { font-size: 12px; }

  .qc-results-mastery { gap: 8px 18px; padding: 10px 14px 12px; }
  .qc-results-mastery__main { gap: 8px; }
  .qc-results-mastery__title { font-size: 12px; }
  .qc-results-mastery__xp { font-size: 12px; }
  .qc-results-mastery__xp-value { font-size: 15px; }
  .qc-results-mastery__progress { gap: 7px; }
  .qc-results-mastery__level { font-size: 17px; }
  .qc-results-mastery__bar { height: 4px; }
  .qc-results-mastery__breakdown { gap: 6px 16px; }
  .qc-results-mastery__row { gap: 4px; }
  .qc-results-mastery__row-label { font-size: 12px; }
  .qc-results-mastery__row-xp { font-size: 12px; }
  .qc-results-mastery__unlocks { gap: 6px; padding-top: 10px; }
  .qc-results-mastery__hint { font-size: 12px; }
  .qc-results-unlock { gap: 8px; padding: 5px 10px 5px 6px; }
  .qc-results-unlock__swatch { width: 20px; height: 20px; }
  .qc-results-unlock__name { font-size: 12px; }

  .qc-standings { font-size: 12px; }
  .qc-standings th,
  .qc-standings td { padding: 5px 12px; }
  .qc-standings thead th { padding-top: 7px; padding-bottom: 6px; font-size: 12px; }
  .qc-standings tbody .qc-standings__rank,
  .qc-standings tbody .qc-standings__stat { font-size: 12px; }
  .qc-standings__rank { width: 46px; }

  /* The minor columns go, headers and cells: Rank, Pilot, Kills, Deaths fit. */
  .qc-standings [data-stat="assists"],
  .qc-standings [data-stat="level"],
  .qc-standings [data-stat="asteroids"] { display: none; }

  /* The way out is always in view: the footer sticks to the bottom of the
     scrolling dialog on an opaque strip, and the rows scroll under it. */
  .qc-results { padding-bottom: 0; }
  .qc-results__actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    align-self: stretch;
    gap: 8px 12px;
    margin: 0 -16px;
    padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--qc-space-0) 78%, transparent);
  }
  .qc-results__next { font-size: 12px; }
  .qc-results__next-seconds { font-size: 16px; }
}

/* ——— What the match paid (docs/premium-pass.md §2.6, mockup 04) and Daily Ops (§3.3) ——— */
.qc-results__earnings {
  display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: start; gap: 24px;
  width: 100%;
}
.qc-results-quanta, .qc-results-ops {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--qc-line);
  background: var(--qc-glass);
  backdrop-filter: blur(6px);
}
.qc-results-quanta__title {
  margin: 0 0 6px;
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text);
}
.qc-results-quanta__rows, .qc-results-ops__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.qc-results-quanta__row, .qc-results-quanta__total { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; font-size: 14px; }
/* §2.6: after the mastery bar (520 ms delay + 1100 ms fill), one line every 120 ms, the total last. */
.qc-results-quanta__row, .qc-results-quanta__total {
  animation: qc-results-land 260ms var(--qc-ease-out) both;
  animation-delay: calc(1620ms + var(--i, 0) * 120ms);
}
@keyframes qc-results-land { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* The counter the sparks fly to, where the deck's top bar keeps it. The dialog's
   backdrop-filter makes it the containing block of anything fixed, so the counter
   shares the panel's grid cell and sticks to the top of the dialog's scroll. */
.qc-results__panel { grid-area: 1 / 1; }
.qc-results__counter {
  position: sticky; z-index: 1; grid-area: 1 / 1; align-self: start; justify-self: end;
  top: max(14px, env(safe-area-inset-top)); margin-right: max(0px, calc(env(safe-area-inset-right) - 24px));
  padding: 18px 0 6px; /* room for the + N the counter floats above itself while sparks land */
}
@media (prefers-reduced-motion: reduce) {
  .qc-results-quanta__row, .qc-results-quanta__total { animation: none; }
}
.qc-results-quanta__label { color: var(--qc-text-dim); }
.qc-results-quanta__amount {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--qc-quanta);
}
.qc-results-quanta__row[data-key="cap"] .qc-results-quanta__amount { color: var(--qc-text-faint); }
/* The Factory Pass line (meta/Quanta `pass`): the pass paying, not something the match did. */
.qc-results-quanta__row[data-key="pass"] .qc-results-quanta__label { color: var(--qc-text); font-weight: 600; }
.qc-results-quanta__total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--qc-line); }
.qc-results-quanta__total .qc-results-quanta__label { font-family: var(--qc-font-display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qc-text); }
.qc-results-quanta__total .qc-results-quanta__amount { gap: 8px; font-size: 22px; color: var(--qc-text); }
.qc-results-quanta__double {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin-top: 8px;
  padding: 0 16px; border-radius: var(--qc-radius-sm); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--qc-quanta) 55%, transparent);
  background: color-mix(in srgb, var(--qc-quanta) 8%, var(--qc-space-2)); color: var(--qc-text);
  font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
}
.qc-results-quanta__double:disabled { cursor: default; opacity: 0.6; justify-content: center; }
/* What the balance buys next: a line while it is short, a way to the Hangar once it is enough. */
.qc-results-quanta__next {
  display: block; width: 100%; margin: 8px 0 0; padding: 0; border: 0; background: none; text-align: start;
  font-family: var(--qc-font-body); font-size: 13px; line-height: 1.35; color: var(--qc-text-dim); overflow-wrap: break-word;
}
button.qc-results-quanta__next {
  min-height: 44px; padding: 8px 16px; border-radius: var(--qc-radius-sm); cursor: pointer; text-align: center;
  border: 1px solid color-mix(in srgb, var(--qc-accent) 60%, transparent);
  background: color-mix(in srgb, var(--qc-accent) 10%, var(--qc-space-2)); color: var(--qc-text); font-weight: 600;
}
/* When today's missions are replaced. */
.qc-results-ops__refresh { margin: 8px 0 0; font-size: 12px; color: var(--qc-text-dim); }
/* A landscape phone has no line to spare under the missions. */
@media (max-height: 520px) {
  .qc-results-ops__refresh,
  .qc-results-quanta__next[data-part="results-quanta-tomorrow"] { display: none; }
}
@media (max-width: 759px) {
  .qc-results__earnings { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* The counter keeps the top-right corner; on a narrow screen the headline starts under it. */
  .qc-results__panel { padding-top: 48px; }
}
.qc-results-ops__row { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; align-items: center; gap: 10px; font-size: 14px; }
/* An op's words wrap: "Destroy 2 pilots with your special" is the whole task, never "…your sp…". */
.qc-results-ops__text { min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
@media (max-width: 759px) {
  .qc-results-ops__row { grid-template-columns: minmax(0, 1fr) 48px auto; gap: 8px; }
}
.qc-results-ops__bar { position: relative; height: 4px; border-radius: 2px; background: var(--qc-space-2); overflow: hidden; }
.qc-results-ops__bar i {
  position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--qc-accent);
  width: calc(var(--to) * 100%);
  animation: qc-results-ops-fill 500ms var(--qc-ease-out) both;
}
.qc-results-ops__row[data-completed="true"] .qc-results-ops__bar i { background: var(--qc-quanta); box-shadow: 0 0 8px var(--qc-quanta); }
.qc-results-ops__count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--qc-text-dim); }
.qc-results-ops__row[data-completed="true"] .qc-results-ops__count { color: var(--qc-quanta); }
@keyframes qc-results-ops-fill { from { width: calc(var(--from) * 100%); } to { width: calc(var(--to) * 100%); } }

/* ——— Fitting the screen (spec: Fitting the screen) ——— */

/* Wide: the board and the mastery card on the left, the earnings in a column
   of their own on the right, so nothing stacks five panels deep. */
@media (min-width: 1000px) and (min-height: 521px) {
  .qc-results__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
      "header header"
      "mastery earnings"
      "nudge earnings"
      "board earnings"
      "actions actions";
    grid-template-rows: auto auto auto 1fr auto;
    align-items: start;
    gap: 14px 20px;
    width: min(1180px, 100%);
  }
  .qc-results__header { grid-area: header; justify-self: center; }
  .qc-results-mastery { grid-area: mastery; }
  .qc-results__earnings { grid-area: earnings; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .qc-results__nudge { grid-area: nudge; margin: 0; }
  .qc-results__board { grid-area: board; }
  .qc-results__actions { grid-area: actions; }
  /* The unlocks sit beside the progress, as on any wide card. */
  .qc-results-mastery:has(> .qc-results-mastery__unlocks) { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.3fr); }
}

/* Where the room is short, the breakdowns fold to their totals. */
@media (max-width: 759px), (max-height: 520px) {
  .qc-results-mastery__breakdown { display: none; }
  .qc-results-quanta__rows { display: none; }
  /* The Quanta card becomes one row: its title, the total, then the offer. */
  .qc-results-quanta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
  }
  .qc-results-quanta__title { margin: 0; }
  .qc-results-quanta__total { margin: 0; padding: 0; border-top: 0; justify-content: flex-end; }
  .qc-results-quanta__total .qc-results-quanta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .qc-results-quanta__double { grid-column: 1 / -1; margin-top: 2px; }
  .qc-results-ops__rows { gap: 5px; }
  .qc-results-ops__row { font-size: 13px; }
}

/* A phone held upright: one column, as tight as it will go. */
@media (max-width: 759px) and (min-height: 521px) {
  .qc-results { padding: 12px 14px 0; }
  .qc-results__panel { gap: 12px; }
  .qc-results__eyebrow { display: none; }
  .qc-results__header { gap: 6px; }
  .qc-standings th,
  .qc-standings td { padding: 7px 10px; }
  .qc-standings__rank { width: 40px; }
  /* The minor columns go, as on a landscape phone, so the table fits the width. */
  .qc-standings [data-stat="assists"],
  .qc-standings [data-stat="level"],
  .qc-standings [data-stat="asteroids"] { display: none; }
  .qc-results-quanta, .qc-results-ops { padding: 12px 16px; }
}

/* A landscape phone: the standings alone on the left, everything the match
   paid on the right, the header one line across the top. */
@media (max-height: 520px) and (min-width: 600px) {
  .qc-results__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "board mastery"
      "board nudge"
      "board earnings"
      "actions actions";
    grid-template-rows: auto auto auto 1fr auto;
    align-items: start;
    gap: 8px 14px;
    width: 100%;
  }
  .qc-results__header { grid-area: header; flex-direction: row; justify-content: center; align-items: baseline; gap: 14px; }
  .qc-results__eyebrow { display: none; }
  .qc-results-mastery { grid-area: mastery; }
  .qc-results__earnings { grid-area: earnings; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qc-results__nudge { grid-area: nudge; margin: 0; font-size: 12px; }
  .qc-results__board { grid-area: board; }
  .qc-results__actions { grid-area: actions; }
  .qc-results-mastery__unlocks { display: none; } /* the hidden summary still names them */
  .qc-results-quanta, .qc-results-ops { padding: 8px 12px; gap: 4px; }
  .qc-results-quanta__title { font-size: 13px; }
  .qc-results-quanta__total .qc-results-quanta__amount { font-size: 16px; }
  .qc-results-quanta__double { min-height: 36px; font-size: 13px; }
  .qc-results-ops__row { font-size: 12px; grid-template-columns: minmax(0, 1fr) 56px auto; }
}

/* Phones, both ways up: a one-column mastery card whose title and XP share a
   line, and the unlocks as one row (label, chip) without the hint. */
@media (max-width: 759px), (max-height: 520px) {
  .qc-results-mastery,
  .qc-results-mastery:has(> .qc-results-mastery__unlocks) { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px; }
  /* The title and the XP share a line when they fit and take two when they don't
     (MAÎTRISE LASER SHIP, +100 XP de maîtrise): nothing is cut or runs past the card. */
  .qc-results-mastery__head { flex-wrap: wrap; gap: 4px 16px; }
  .qc-results-mastery__title { letter-spacing: 0.12em; min-width: 0; overflow-wrap: break-word; }
  .qc-results-mastery__xp { min-width: 0; }
  .qc-results-mastery__xp-value { font-size: 16px; }
  .qc-results-mastery__main { gap: 8px; }
  .qc-results-mastery__progress { gap: 6px; }
  .qc-results-mastery__level { font-size: 18px; }
  .qc-results-mastery__unlocks { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--qc-line); }
  .qc-results-mastery__unlock-list { flex-direction: row; }
  .qc-results-mastery__hint { display: none; }
  .qc-results-unlock { padding: 4px 10px 4px 5px; gap: 8px; }
  .qc-results-unlock__swatch { width: 20px; height: 20px; }
}

/* Upright: the countdown on its own short line, the two buttons side by side. */
@media (max-width: 759px) and (min-height: 521px) {
  .qc-results__panel { padding-top: 36px; gap: 10px; }
  .qc-results__title { font-size: 24px; }
  .qc-results__actions { gap: 8px 10px; padding-top: 8px; }
  .qc-results__next { flex-basis: 100%; justify-content: center; margin: 0; }
  .qc-results__actions .qc-button { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
}

/* 1280 × 720 and the like: a few pixels more off the top. */
@media (min-width: 1000px) and (min-height: 521px) and (max-height: 800px) {
  .qc-results { padding-top: 12px; }
  .qc-results__header { gap: 6px; }
}

/* Phones: the Quanta card is one row, the total beside the offer; the ◈ says
   what the number is, so the title steps aside (the section keeps its label). */
@media (max-width: 759px), (max-height: 520px) {
  .qc-results-quanta { grid-template-columns: auto minmax(0, 1fr); padding-block: 8px; }
  .qc-results-quanta > .qc-results-quanta__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .qc-results-ops > .qc-results-quanta__title { margin: 0; font-size: 13px; }
  .qc-results-quanta__total { justify-content: flex-start; }
  .qc-results-quanta__double-label { text-wrap: balance; }
  .qc-results-quanta__double { grid-column: auto; margin: 0; }
  .qc-results-quanta__double { min-height: 44px; padding: 0 12px; letter-spacing: 0.04em; font-size: 13px; }
  /* The next unlock and tomorrow's bonus take a row of their own under the total:
     beside it, the unlock button was a column five lines tall. */
  .qc-results-quanta__next { grid-column: 1 / -1; margin: 0; }
  button.qc-results-quanta__next { min-height: 40px; padding: 6px 12px; }
  .qc-results__actions { background: linear-gradient(to top, var(--qc-space-0) 86%, transparent); }
}

/* Upright: a fixed table, so a long name ellipsises instead of pushing Deaths
   off the edge. */
@media (max-width: 759px) and (min-height: 521px) {
  .qc-standings { table-layout: fixed; }
  .qc-standings thead th { letter-spacing: 0.06em; }
  .qc-standings th,
  .qc-standings td { padding: 6px 8px; }
  .qc-standings thead .qc-standings__rank { width: 48px; }
  .qc-standings thead .qc-standings__stat { width: 60px; }
  .qc-standings__dot { margin-right: 6px; }
  .qc-results__nudge { font-size: 13px; }
}

/* Landscape: shorter rows, the paint chip left to the summary, and the counter
   pulled up clear of the mastery card. */
@media (max-height: 520px) and (min-width: 600px) {
  .qc-standings th,
  .qc-standings td { padding: 4px 10px; }
  .qc-results-mastery__unlocks { display: none; }
  .qc-results-mastery { padding: 8px 12px; gap: 6px; }
  .qc-results__counter { top: 4px; padding: 0; }
  .qc-results__header { justify-content: flex-start; padding-left: 8px; }
  .qc-results__actions { padding-top: 6px; }
  .qc-results__actions .qc-button--ghost { padding-block: 12px; }
}

/* The last few pixels, so nine rows and every panel share one screen. */
@media (max-width: 759px) and (min-height: 521px) {
  .qc-results__panel { padding-top: 24px; gap: 8px; }
  .qc-standings th,
  .qc-standings td { padding-block: 5px; }
}

@media (max-height: 520px) and (min-width: 600px) {
  .qc-results__panel { row-gap: 6px; }
  .qc-results-ops__rows { gap: 3px; }
  .qc-results-quanta { padding-block: 6px; }
  .qc-standings th,
  .qc-standings td { padding-block: 3px; }
}

/* A short desktop (1280 × 720): the headline says the match is over without
   its eyebrow, and the rows give back a few pixels each. */
@media (min-width: 1000px) and (min-height: 521px) and (max-height: 800px) {
  .qc-results__eyebrow { display: none; }
  .qc-results__title { font-size: 36px; }
  .qc-results__panel { row-gap: 10px; }
  .qc-standings th,
  .qc-standings td { padding-block: 6px; }
  .qc-results-mastery { padding-block: 12px; }
}

@media (max-width: 759px) and (min-height: 521px) {
  .qc-standings th,
  .qc-standings td { padding-block: 3px; }
  .qc-results-ops__rows { gap: 3px; }
  .qc-results-ops { gap: 4px; padding-block: 8px; }
  .qc-results__nudge { margin: 0; }
}

/* ——— Your build: a button beside the placement, and the sheet as a layer over
   the panel's own box, so opening it never changes the dialog's size ——— */
.qc-results__panel { position: relative; }
.qc-results__build-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid var(--qc-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--qc-space-1) 60%, transparent);
  color: var(--qc-text);
  font: 600 13px/1 var(--qc-font-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.qc-results__build-open::after { content: "›"; color: var(--qc-text-dim); }
.qc-results__build-open:hover,
.qc-results__build-open:focus-visible,
.qc-results__build-open[aria-expanded="true"] { border-color: var(--qc-accent-2); }
.qc-results__build-open:focus-visible { outline: 2px solid var(--qc-accent-2); outline-offset: 2px; }
.qc-results__build {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 0;
  padding: 12px 16px;
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius);
  background: var(--qc-space-1);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--qc-space-0) 80%, transparent);
}
/* Under the layer nothing shows or takes focus: Play again's focus brackets
   reach past the panel's edge, and would peek out from under its corner. */
.qc-results__panel:has(> .qc-results__build) > :not(.qc-results__build) { visibility: hidden; }
/* Short (a landscape phone): the layer's padding goes to the sheet, which
   then fits without scrolling. */
@media (max-height: 520px) {
  .qc-results__build { padding: 6px 12px; }
}

/* ——— The vote row (docs/modes.md §8.5): a heading with the countdown, one big card per kind ——— */
.qc-results-vote {
  display: grid;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 14px;
  border: 1px solid color-mix(in oklab, var(--qc-accent) 45%, var(--qc-line));
  border-radius: var(--qc-radius);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--qc-accent) 12%, transparent), transparent 70%),
    var(--qc-glass);
  box-shadow: 0 0 32px -14px var(--qc-accent);
  backdrop-filter: blur(8px);
  animation: qc-results-rise 560ms var(--qc-ease-out) 160ms both;
}
.qc-results-vote__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.qc-results-vote__title {
  margin: 0;
  font-family: var(--qc-font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text);
}
.qc-results-vote__countdown {
  flex: none;
  font: 500 16px/1 var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--qc-text);
}
.qc-results-vote__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}

/* A card: the two icons beside the mode over the build, the count; the words;
   the bar along its bottom edge. */
.qc-results-vote__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icons label count"
    "desc desc desc";
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
  min-height: 64px;
  box-sizing: border-box;
  padding: 9px 10px 12px;
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius-sm);
  background: color-mix(in oklab, var(--qc-space-1) 70%, transparent);
  color: var(--qc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--qc-dur-fast) var(--qc-ease-out), background-color var(--qc-dur-fast) var(--qc-ease-out),
    box-shadow var(--qc-dur-fast) var(--qc-ease-out);
}
.qc-results-vote__card:hover { border-color: var(--qc-accent-2); }
.qc-results-vote__card:focus-visible { outline: 2px solid var(--qc-accent-2); outline-offset: 2px; }
/* Your vote, lit. */
.qc-results-vote__card[data-mine] {
  border-color: var(--qc-accent);
  background: color-mix(in oklab, var(--qc-accent) 18%, var(--qc-space-1));
  box-shadow: 0 0 0 1px var(--qc-accent), 0 0 20px -4px var(--qc-accent);
}
.qc-results-vote__tick {
  position: absolute;
  top: -7px;
  right: -7px;
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--qc-accent);
  color: var(--qc-space-0);
  font: 700 12px/1 var(--qc-font-ui);
}
.qc-results-vote__card[data-mine] .qc-results-vote__tick { display: grid; }

.qc-results-vote__icons {
  grid-area: icons;
  display: grid;
  gap: 3px;
  align-content: center;
}
.qc-results-vote__glyph {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--qc-text-dim);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Free-for-All: two ships crossing. */
.qc-results-vote__glyph[data-glyph="ffa"] {
  background: var(--qc-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(8 15) rotate(-45)'%3E%3Cpath d='M-6 -4L6 0L-6 4L-3 0Z'/%3E%3C/g%3E%3Cg transform='translate(16 15) rotate(-135)'%3E%3Cpath d='M-6 -4L6 0L-6 4L-3 0Z'/%3E%3C/g%3E%3Ccircle cx='12' cy='5' r='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(8 15) rotate(-45)'%3E%3Cpath d='M-6 -4L6 0L-6 4L-3 0Z'/%3E%3C/g%3E%3Cg transform='translate(16 15) rotate(-135)'%3E%3Cpath d='M-6 -4L6 0L-6 4L-3 0Z'/%3E%3C/g%3E%3Ccircle cx='12' cy='5' r='1.6'/%3E%3C/svg%3E");
}
/* Team Deathmatch: two crews facing, each in its crew colour. */
.qc-results-vote__glyph[data-glyph="tdm"] {
  background: linear-gradient(90deg, var(--qc-accent-2) 50%, var(--qc-rarity-legendary) 50%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 4L10 7.5L1 11L3 7.5Z'/%3E%3Cpath d='M1 13L10 16.5L1 20L3 16.5Z'/%3E%3Cpath d='M23 4L14 7.5L23 11L21 7.5Z'/%3E%3Cpath d='M23 13L14 16.5L23 20L21 16.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 4L10 7.5L1 11L3 7.5Z'/%3E%3Cpath d='M1 13L10 16.5L1 20L3 16.5Z'/%3E%3Cpath d='M23 4L14 7.5L23 11L21 7.5Z'/%3E%3Cpath d='M23 13L14 16.5L23 20L21 16.5Z'/%3E%3C/svg%3E");
}
/* Juggernaut: the crown. */
.qc-results-vote__glyph[data-glyph="juggernaut"] {
  background: var(--qc-rarity-legendary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18L2 7L8 11L12 4L16 11L22 7L21 18Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18L2 7L8 11L12 4L16 11L22 7L21 18Z'/%3E%3C/svg%3E");
}
/* Roguelike: two upgrade cards, fanned. */
.qc-results-vote__glyph[data-glyph="roguelike"] {
  background: var(--qc-rarity-epic);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='10' height='14' rx='2' transform='rotate(-12 8.5 12)'/%3E%3Crect x='10.5' y='5' width='10' height='14' rx='2' transform='rotate(10 15.5 12)' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='10' height='14' rx='2' transform='rotate(-12 8.5 12)'/%3E%3Crect x='10.5' y='5' width='10' height='14' rx='2' transform='rotate(10 15.5 12)' fill='black'/%3E%3C/svg%3E");
}
/* Basic: stat bars. */
.qc-results-vote__glyph[data-glyph="basic"] {
  background: var(--qc-xp);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 20v-6M12 20V9M19 20V4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 20v-6M12 20V9M19 20V4'/%3E%3C/svg%3E");
}

/* The mode over the build, each beside its icon. */
.qc-results-vote__label {
  grid-area: label;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.qc-results-vote__mode,
.qc-results-vote__build {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}
.qc-results-vote__mode {
  font-family: var(--qc-font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
}
.qc-results-vote__sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.qc-results-vote__build {
  font: 700 12px/16px var(--qc-font-ui);
  letter-spacing: 0.04em;
  color: var(--qc-text-dim);
}
.qc-results-vote__desc {
  grid-area: desc;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  color: var(--qc-text-dim);
}
/* "Now playing" and "Unranked": small tabs on the card's top edge, so they cost
   no row — the ui/PilotTag chip (12 px capitals, 1 px edge, small radius) on
   the panel's own dark so the edge line stops behind the words. */
.qc-results-vote__now,
.qc-results-vote__unranked {
  position: absolute;
  top: -8px;
  padding: 0 6px;
  border: 1px solid;
  border-radius: var(--qc-radius-sm);
  background: var(--qc-space-0);
  font: 700 12px/14px var(--qc-font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qc-results-vote__now {
  left: 10px;
  border-color: color-mix(in oklab, var(--qc-accent-2) 55%, transparent);
  color: var(--qc-accent-2);
}
/* Team Deathmatch never ranks: said on the right, clear of the ✓ on the
   corner, muted so it informs without competing with the vote. */
.qc-results-vote__unranked {
  right: 16px;
  border-color: color-mix(in oklab, var(--qc-text-faint) 70%, transparent);
  color: var(--qc-text-dim);
}
/* Now playing and Unranked on one card: two word tags do not fit one edge of a
   narrow card, so Now playing folds to a ▶ mark and its words are read only. */
.qc-results-vote__card[data-current][data-unranked] .qc-results-vote__now {
  display: flex;
  align-items: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 5px;
}
.qc-results-vote__card[data-current][data-unranked] .qc-results-vote__now::before {
  content: "";
  width: 7px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.qc-results-vote__card[data-current][data-unranked] .qc-results-vote__now-words {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.qc-results-vote__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 0 0 calc(var(--qc-radius-sm) - 1px) calc(var(--qc-radius-sm) - 1px);
  background: var(--qc-line);
}
.qc-results-vote__fill {
  display: block;
  width: calc(var(--share, 0) * 100%);
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: color-mix(in oklab, var(--qc-accent-2) 60%, transparent);
  transition: width 420ms var(--qc-ease-out);
}
.qc-results-vote__card[data-leading] .qc-results-vote__fill {
  background: var(--qc-accent-2);
  box-shadow: 0 0 10px color-mix(in oklab, var(--qc-accent-2) 70%, transparent);
}
.qc-results-vote__card[data-mine] .qc-results-vote__fill { background: var(--qc-accent); }
.qc-results-vote__count {
  grid-area: count;
  position: relative; /* contains the visually hidden text */
  align-self: start;
  min-width: 2ch;
  text-align: right;
  font: 700 18px/1 var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--qc-text);
}
/* A count went up: one ring that swells and fades. */
.qc-results-vote__pulse {
  position: absolute;
  inset: -1px;
  border: 2px solid var(--qc-accent-2);
  border-radius: inherit;
  pointer-events: none;
  animation: qc-results-vote-pulse 700ms var(--qc-ease-out) both;
}
@keyframes qc-results-vote-pulse {
  0% { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* Locked: one line naming the winner. */
.qc-results-vote[data-locked] { border-color: var(--qc-accent); }
.qc-results-vote__locked {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  font-family: var(--qc-font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qc-text);
}
.qc-results-vote__locked .qc-results-vote__icons { display: flex; gap: 4px; }
.qc-results-vote__locked .qc-results-vote__glyph { width: 24px; height: 24px; }
/* "Next:" as a small line over the winner, so the kind is never cut short. */
.qc-results-vote__locked-label { display: grid; min-width: 0; }
.qc-results-vote__locked-next { font: 600 12px/1.2 var(--qc-font-ui); letter-spacing: 0.12em; color: var(--qc-text-dim); }
.qc-results-vote__locked-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-results-vote__locked .qc-results-vote__countdown { margin-left: auto; text-transform: none; }

/* With the row, it carries the countdown: the actions' line steps aside for
   the eye only (it still describes Stay). */
.qc-results__panel:has(.qc-results-vote) .qc-results__next {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Folded Daily Ops: the title and "1 of 3 done" on one line. */
.qc-results-ops[data-folded] {
  align-self: stretch;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
.qc-results-ops[data-folded] .qc-results-ops__rows { display: none; }
.qc-results-ops[data-folded] > .qc-results-quanta__title { margin: 0; }
.qc-results-ops__summary {
  margin: 0;
  font-family: var(--qc-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--qc-text-dim);
}

/* Your build sits beside the placement, one line (a landscape phone's header
   is one line already). */
@media (min-height: 521px) {
  .qc-results__header:has(> .qc-results__build-open) {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 14px;
  }
  .qc-results__header:has(> .qc-results__build-open) > :not(.qc-results__placement, .qc-results__build-open) { grid-column: 1 / -1; justify-self: center; }
}

/* A short desktop (1280 × 720) while the vote shows: the Quanta lines fold to
   the total, as they do on a phone, so the vote keeps the top of the column. */
@media (min-width: 1000px) and (min-height: 521px) and (max-height: 800px) {
  .qc-results__panel:has(.qc-results-vote) .qc-results-quanta__rows { display: none; }
  .qc-results__panel:has(.qc-results-vote) .qc-results-quanta__total { margin-top: 0; padding-top: 0; border-top: 0; }
  .qc-results__panel:has(.qc-results-vote) .qc-results-quanta { gap: 4px; padding-block: 12px; }
}

/* A portrait phone: the earnings box dissolves so the row can sit between the
   board and Stay, where a thumb rests. */
@media (max-width: 759px) and (min-height: 521px) {
  .qc-results__panel:has(.qc-results-vote) .qc-results__earnings { display: contents; }
  .qc-results__panel:has(.qc-results-vote) .qc-results-quanta { align-self: stretch; }
  .qc-results__panel:has(.qc-results-vote) .qc-results-vote { order: 1; }
  .qc-results__panel:has(.qc-results-vote) .qc-results__actions { order: 2; }
  /* The paint chip is named in the hidden summary; the vote needs its line. */
  .qc-results__panel:has(.qc-results-vote) .qc-results-mastery__unlocks { display: none; }
  /* Daily Ops folds away here: the vote needs its room, and the menu's Ops
     station has the missions. */
  .qc-results__panel:has(.qc-results-vote) .qc-results-ops { display: none; }
  .qc-results-vote { gap: 8px; padding: 8px 10px 10px; }
  .qc-results-vote__title { font-size: 13px; letter-spacing: 0.08em; }
  .qc-results-vote__cards { gap: 10px 6px; }
  .qc-results-vote__card { min-height: 56px; padding: 7px 8px 10px; gap: 3px 6px; }
  .qc-results-vote__mode { font-size: 14px; }
  .qc-results__panel:has(.qc-results-vote) .qc-standings th,
  .qc-results__panel:has(.qc-results-vote) .qc-standings td { padding-block: 2px; }
  .qc-results__panel:has(.qc-results-vote) { gap: 6px; }
}

/* A landscape phone: the row shares the last line with Stay and Main menu,
   one row of four compact cards, the words dropped. */
@media (max-height: 520px) and (min-width: 600px) {
  .qc-results__panel:has(.qc-results-vote) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.34fr) minmax(0, 0.66fr);
    grid-template-areas:
      "header header header"
      "board mastery mastery"
      "board nudge nudge"
      "board quanta quanta"
      "board ops ops"
      "vote vote actions";
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  .qc-results__panel:has(.qc-results-vote) .qc-results__earnings { display: contents; }
  .qc-results__panel:has(.qc-results-vote) .qc-results-quanta { grid-area: quanta; align-self: start; }
  .qc-results__panel:has(.qc-results-vote) .qc-results-ops { grid-area: ops; align-self: start; }
  .qc-results__panel:has(.qc-results-vote) .qc-results-vote { grid-area: vote; align-self: end; }
  .qc-results__panel:has(.qc-results-vote) .qc-results__actions {
    align-self: end;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0 0 max(6px, env(safe-area-inset-bottom));
    background: none;
  }
  .qc-results__panel:has(.qc-results-vote) .qc-results__actions .qc-button { flex: 1 1 0; min-width: 0; padding-inline: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.08em; }
  .qc-results-vote { gap: 5px; padding: 6px 8px 8px; }
  .qc-results-vote__title { font-size: 13px; letter-spacing: 0.06em; }
  .qc-results-vote__countdown { font-size: 14px; }
  .qc-results-vote__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .qc-results-vote__card {
    grid-template-areas: "icons label count";
    min-height: 44px;
    padding: 5px 12px 8px 7px; /* the ✓ sits on the top-right corner, clear of the count */
    gap: 3px 5px;
  }
  .qc-results-vote__desc { display: none; }
  /* The count rides the top right beside the short mode word, so the build
     ("Roguelike") has the card's width: it read "ROGUELI…" at 844 × 390. */
  .qc-results-vote__card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icons label"; padding-right: 8px; }
  .qc-results-vote__count { position: absolute; top: 5px; right: 10px; }
  .qc-results-vote__mode { padding-right: 22px; }
  .qc-results-vote__icons { gap: 2px; }
  .qc-results-vote__glyph { width: 14px; height: 14px; }
  .qc-results-vote__label { gap: 0; }
  .qc-results-vote__mode { font-size: 13px; line-height: 15px; letter-spacing: 0.04em; }
  .qc-results-vote__build { line-height: 14px; letter-spacing: 0.02em; }
  .qc-results-vote__bar { height: 3px; }
  .qc-results-vote__count { font-size: 14px; }
  .qc-results-vote__now { top: -7px; left: 6px; line-height: 12px; }
  .qc-results-vote__unranked { top: -7px; right: 12px; line-height: 12px; }
  .qc-results-vote__card[data-current][data-unranked] .qc-results-vote__now { height: 14px; }
  .qc-results-vote__locked { min-height: 36px; font-size: 15px; }
  .qc-results-vote__locked .qc-results-vote__glyph { width: 20px; height: 20px; }
  /* Nine rows beside everything else: the tightest the tag allows. */
  .qc-results__panel:has(.qc-results-vote) .qc-standings th,
  .qc-results__panel:has(.qc-results-vote) .qc-standings td { padding-block: 1px; }
  .qc-results__panel:has(.qc-results-vote) .qc-standings thead th { padding-block: 5px 4px; }
}

/* A thumb is not a cursor: every target is at least 44 px on a coarse pointer. */
@media (pointer: coarse) {
  .qc-results-vote__card { min-height: 48px; }
  .qc-results__build-open { min-height: 44px; }
  .qc-results__actions .qc-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .qc-results-vote__pulse { animation: none; display: none; }
  .qc-results-vote__fill { transition: none; }
}

/* ——— The standings give the pilot column the room: the numbers are short, so
   their columns hug them, and the pilot tag gets the rest ——— */
.qc-standings tbody .qc-standings__stat,
.qc-standings thead .qc-standings__stat { padding-inline: 10px; }
.qc-standings thead .qc-standings__stat { letter-spacing: 0.1em; }
@media (max-width: 759px) and (min-height: 521px) {
  .qc-standings thead .qc-standings__rank { width: 40px; letter-spacing: 0.02em; }
  .qc-standings thead .qc-standings__device { width: 18px; }
  .qc-standings thead .qc-standings__stat { width: 52px; letter-spacing: 0.02em; }
  .qc-standings td.qc-standings__stat, .qc-standings th.qc-standings__stat { padding-inline: 4px; }
  .qc-standings__device { padding-inline: 0; }
  .qc-standings__pilot { width: auto; padding-inline: 4px 2px; }
  .qc-standings th,
  .qc-standings td { padding-block: 2px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .qc-standings__rank { width: 28px; }
  .qc-standings thead .qc-standings__stat { letter-spacing: 0.04em; }
  .qc-standings td.qc-standings__stat, .qc-standings th.qc-standings__stat { padding-inline: 6px; }
  .qc-standings__device { padding-inline: 0; }
  .qc-standings th,
  .qc-standings td { padding-block: 2px; }
}

/* A landscape phone with no vote: the right column (mastery, Quanta, three
   missions) is the taller one, so it gives back the pixels. */
@media (max-height: 520px) and (min-width: 600px) {
  .qc-results-mastery { padding-block: 6px; }
  .qc-results-mastery__progress { gap: 4px; }
  .qc-results-ops { gap: 2px; padding-block: 5px; }
  .qc-results-ops > .qc-results-quanta__title { line-height: 16px; }
  .qc-results-ops__rows { gap: 0; }
  .qc-results-ops__row { line-height: 16px; }
}

/* Phones, both ways up: the numbers' headers in plain case and the pilot tag's
   chips a little closer, so a short name is always whole beside its title. */
@media (max-width: 759px) and (min-height: 521px), (max-height: 520px) {
  .qc-standings thead th { text-transform: none; letter-spacing: 0.02em; }
  .qc-standings .qc-pilot-tag { gap: 4px; }
  .qc-standings .qc-pilot-tag__chip { padding: 0 4px; gap: 3px; }
  .qc-standings .qc-pilot-tag__title { max-width: 7em; padding: 0 4px; letter-spacing: 0.02em; }
  .qc-standings__dot { margin-right: 6px; }
}
@media (max-width: 759px) and (min-height: 521px) {
  /* The numbers are a digit or two: their columns are as narrow as their words, and a
     long translated header (Éliminations, Abschüsse, Убийства) hyphenates onto a
     second line rather than ending in an ellipsis. The pilot column takes what
     that frees, so a callsign is whole beside its chips. */
  .qc-standings thead .qc-standings__rank { width: 44px; }
  .qc-standings thead .qc-standings__stat { width: 64px; }
  .qc-standings thead th { white-space: normal; hyphens: auto; overflow-wrap: break-word; line-height: 1.15; }
  .qc-standings .qc-standings__stat { padding-left: 8px; padding-right: 8px; }
  .qc-standings .qc-standings__stat:last-child { padding-right: 12px; }
}
/* The narrowest phones (360 px): a little more for the names still. */
@media (max-width: 380px) and (min-height: 521px) {
  .qc-standings thead .qc-standings__rank { width: 40px; }
  .qc-standings thead .qc-standings__stat { width: 56px; }
  .qc-standings .qc-standings__pilot { padding-left: 6px; padding-right: 6px; }
}

/* ——— The room chat (spec: The room chat; docs/networking.md §8.8) ——— */

/* The Chat button: a 44 px square in the actions row, where the chat folds. */
.qc-results__chat-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--qc-text);
  background: color-mix(in srgb, var(--qc-space-1) 70%, transparent);
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius-sm);
  cursor: pointer;
}
.qc-results__chat-toggle:hover,
.qc-results__chat-toggle:focus-visible,
.qc-results__chat-toggle[aria-expanded="true"] { border-color: var(--qc-accent-2); }
.qc-results__chat-toggle:focus-visible { outline: 2px solid var(--qc-accent-2); outline-offset: 2px; }
.qc-results__chat-glyph {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H11l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H11l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The word is for a screen reader; the glyph and the count are for the eye. */
.qc-results__chat-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qc-results__chat-unread {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font: 700 12px/20px var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--qc-space-0);
  background: var(--qc-accent-2);
  border-radius: 999px;
  text-align: center;
}

/* The chat's own card fills the slot it is given. */
.qc-results-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.qc-results-chat .qc-room-chat { flex: 1 1 auto; }

/* Wide: a panel of its own under the vote; no button, no ✕. */
@media (min-width: 1000px) and (min-height: 521px) {
  .qc-results__chat-toggle { display: none; }
  .qc-results-chat .qc-room-chat__close { display: none; }
  .qc-results-chat .qc-room-chat { padding: 10px 14px; gap: 6px; }
  .qc-results-chat .qc-room-chat__scroll { max-height: 112px; }
}

/* A desktop up to 1100 px tall (1280 × 720, 1440 × 900): Daily Ops folds away
   while the chat shows, and the Quanta total and its offer share one line. The
   vote, the chat and the whole Quanta card are taller than the board beside
   them, which took 1440 × 900 to 1015 px. */
@media (min-width: 1000px) and (min-height: 521px) and (max-height: 1100px) {
  .qc-results__panel:has(.qc-results-chat) .qc-results-ops { display: none; }
  .qc-results__panel:has(.qc-results-chat) .qc-results-quanta__rows { display: none; }
  .qc-results__panel:has(.qc-results-chat) .qc-results-quanta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding-block: 8px; }
  .qc-results__panel:has(.qc-results-chat) .qc-results-quanta > .qc-results-quanta__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .qc-results__panel:has(.qc-results-chat) .qc-results-quanta__total { margin: 0; padding: 0; border-top: 0; justify-content: flex-start; }
  .qc-results__panel:has(.qc-results-chat) .qc-results-quanta__total .qc-results-quanta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .qc-results__panel:has(.qc-results-chat) .qc-results-quanta__double { margin: 0; min-height: 40px; padding: 0 12px; letter-spacing: 0.04em; }
}

/* A short desktop (1280 × 720) while the chat shows: the vote cards give up
   their description too. */
@media (min-width: 1000px) and (min-height: 521px) and (max-height: 800px) {
  /* The cards keep their icons, words and counts; the one-line description goes, as on a landscape phone. */
  .qc-results__panel:has(.qc-results-chat) .qc-results-vote__desc { display: none; }
}

/* Everywhere else the chat folds to the button, and opens as a sheet. */
@media (max-width: 999px), (max-height: 520px) {
  .qc-results-chat:not([data-open="true"]) { display: none; }
  .qc-results-chat[data-open="true"] {
    position: fixed;
    z-index: 6;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 72%;
    padding: 0 max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    animation: qc-results-chat-up 200ms var(--qc-ease-out) both;
  }
  .qc-results-chat[data-open="true"] .qc-room-chat {
    width: min(640px, 100%);
    margin: 0 auto;
    background: var(--qc-space-1);
    border-color: var(--qc-line-strong);
    box-shadow: 0 -12px 40px color-mix(in srgb, var(--qc-space-0) 85%, transparent);
  }
  .qc-results-chat[data-open="true"] .qc-room-chat__scroll { max-height: 34vh; }
}

/* A landscape phone: the chat takes the right-hand side, full height, so the
   keyboard leaves the input and the last lines in view. */
@media (max-height: 520px) and (min-width: 600px) {
  .qc-results-chat[data-open="true"] {
    left: auto;
    top: 0;
    width: min(420px, 55%);
    max-height: none;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 0;
  }
  .qc-results-chat[data-open="true"] .qc-room-chat { height: 100%; }
  .qc-results-chat[data-open="true"] .qc-room-chat__scroll { max-height: none; }
}

/* A landscape phone with the vote: the Chat square joins Stay and Main menu on
   the last line, so the three share it a little tighter. */
@media (max-height: 520px) and (min-width: 600px) {
  .qc-results__panel:has(.qc-results__chat-toggle) .qc-results__actions { gap: 8px; }
  .qc-results__panel:has(.qc-results__chat-toggle) .qc-results__actions .qc-button { padding-inline: 6px; letter-spacing: 0.04em; }
}

@keyframes qc-results-chat-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .qc-results-chat[data-open="true"] { animation: none; }
}