/* 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: 28px 24px;
  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: 30px;
  width: min(880px, 100%);
}

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

.qc-results__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  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(28px, 4.8vw, 56px);
  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);
}

.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: 18px 28px;
  width: 100%;
  padding: 20px 24px 22px;
  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="plasma"] { --ship: var(--qc-ship-plasma); }
.qc-results-mastery[data-ship="rocket"] { --ship: var(--qc-ship-rocket); }

.qc-results-mastery__main {
  display: grid;
  align-content: start;
  gap: 14px;
  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: 12px;
}

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

.qc-results-mastery__level {
  font-size: 24px;
  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: 10px;
  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: 12px 22px;
  margin: 0;
}

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

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

.qc-results-mastery__row-label {
  font-size: 10px;
  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: 10px;
  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: 11px 18px;
  white-space: nowrap;
}

.qc-standings thead th {
  padding-top: 15px;
  padding-bottom: 12px;
  font-size: 10px;
  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;
}

.qc-standings__pilot {
  text-align: left;
}

.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);
}

.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="plasma"] { --ship: var(--qc-ship-plasma); }
.qc-standings__row[data-ship="rocket"] { --ship: var(--qc-ship-rocket); }

.qc-standings__pilot-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qc-standings__dot {
  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);
}

.qc-standings__tag {
  padding: 3px 6px 3px 7px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qc-text-faint);
  border: 1px solid var(--qc-line-strong);
  border-radius: 4px;
}

.qc-standings__tag--you {
  color: var(--qc-accent-2);
  border-color: color-mix(in oklab, var(--qc-accent-2) 50%, transparent);
}

/* 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-standings__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);
}

/* A pilot who left the match: kept in the table, but stepped back. The "Left"
   tag says it; the quieter colours only reinforce it. */
.qc-standings__row[data-left] .qc-standings__name {
  font-weight: 400;
  color: var(--qc-text-dim);
}

.qc-standings__row[data-left] .qc-standings__rank,
.qc-standings__row[data-left] .qc-standings__stat {
  color: var(--qc-text-faint);
}

.qc-standings__row[data-left] .qc-standings__dot {
  opacity: 0.35;
  box-shadow: none;
}

.qc-standings__tag--left {
  border-style: dashed;
}

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

/* One line, and it never grows into a panel: leaderboards.md §6.2. */
.qc-results__nudge {
  margin: -14px 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 --- */

.qc-results__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
}

.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: 11px;
  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) {
  .qc-results__title {
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }

  .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 16px; }
  .qc-results__panel { gap: 10px; }

  .qc-results__header { gap: 4px; }
  .qc-results__eyebrow { gap: 10px; font-size: 9px; }
  .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: 11px; }

  .qc-results-mastery { gap: 8px 18px; padding: 10px 14px 12px; }
  .qc-results-mastery__main { gap: 8px; }
  .qc-results-mastery__title { font-size: 10px; }
  .qc-results-mastery__xp { font-size: 11px; }
  .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: 9px; }
  .qc-results-mastery__row-xp { font-size: 12px; }
  .qc-results-mastery__unlocks { gap: 6px; padding-top: 10px; }
  .qc-results-mastery__hint { font-size: 10px; }
  .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: 11px; }
  .qc-standings th,
  .qc-standings td { padding: 5px 12px; }
  .qc-standings thead th { padding-top: 7px; padding-bottom: 6px; font-size: 9px; }
  .qc-standings tbody .qc-standings__rank,
  .qc-standings tbody .qc-standings__stat { font-size: 11px; }
  .qc-standings__rank { width: 46px; }
  .qc-standings__pilot-inner { gap: 7px; }
  .qc-standings__tag { padding: 2px 5px; font-size: 8px; }

  .qc-results__actions { gap: 8px 12px; }
  .qc-results__next { font-size: 10px; }
  .qc-results__next-seconds { font-size: 16px; }
}