/*
 * results.css - the end-of-flight score report.
 *
 * Sits above the 3D canvas like the other destinations, but unlike the gate and
 * the leaderboard it uses a semi-transparent backdrop: the player has just spent
 * minutes watching this vehicle and the crash site or landing pad behind the
 * panel is part of the result. The panel itself is opaque so the numbers stay
 * readable over a bright sky.
 */

.results-host {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
}

.results-host:not(.results-host--hidden) {
  display: block;
}

.results-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  background: radial-gradient(120% 90% at 50% 0%, rgba(19, 26, 43, 0.86) 0%, rgba(8, 11, 20, 0.92) 70%);
  backdrop-filter: blur(3px);
}

.results-panel {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 18px;
  overflow: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ verdict */

.results-verdict {
  align-self: center;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 999px;
}

.results-verdict.is-ok {
  color: var(--good);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.results-verdict.is-bad {
  color: var(--bad);
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
}

.results-headline {
  margin: 2px 0 0;
  font-size: 15px;
  text-align: center;
  color: var(--ink);
}

/* -------------------------------------------------------------------- total */

.results-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0 12px;
}

.results-total__num {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  /* Tabular figures: without this the number jitters as digits change width. */
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: var(--hud-glow);
}

.results-total__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}

.results-total__cap {
  font-size: 11px;
  color: var(--ink-faint);
}

/* -------------------------------------------------------------------- money */

.results-money {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-panel-2);
}

.results-money__head {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.results-money__line,
.results-money__net {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-dim);
}

.results-money__net {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}

.results-money__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.results-money__net .results-money__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--good);
}

/* A losing flight is stated in the negative colour. Not merely a smaller number:
   the whole point of the economy is that this outcome has teeth. */
.results-money.is-loss .results-money__net .results-money__value {
  color: var(--bad);
}

/* --------------------------------------------------------------- comparison */

.results-cmp {
  align-self: center;
  padding: 3px 12px;
  font-size: 12px;
  border-radius: var(--r-sm);
}

.results-cmp--best {
  color: var(--warn);
  background: rgba(251, 191, 36, 0.12);
}

.results-cmp--first {
  color: var(--accent);
  background: var(--accent-dim);
}

.results-cmp--tie {
  color: var(--ink-dim);
  background: rgba(140, 156, 184, 0.12);
}

.results-cmp--below {
  color: var(--ink-dim);
  background: rgba(140, 156, 184, 0.1);
}

.results-note {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--warn);
  background: rgba(251, 191, 36, 0.08);
  border-left: 2px solid var(--warn);
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------- item list */

.results-items {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.results-items__head {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  background: var(--bg-panel-2);
  border-bottom: 1px solid var(--line);
}

.results-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.results-item:last-child {
  border-bottom: none;
}

.results-item.is-missed {
  /* Dimmed, not hidden: "I did not do this" is information the player needs. */
  opacity: 0.55;
}

.results-item__mark {
  width: 14px;
  flex: 0 0 14px;
  font-size: 13px;
  text-align: center;
  color: var(--good);
}

.results-item.is-missed .results-item__mark {
  color: var(--ink-ghost);
}

.results-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.results-item__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}

.results-item__tag {
  padding: 1px 6px;
  font-size: 10px;
  color: var(--cat-recovery);
  background: rgba(250, 204, 21, 0.12);
  border-radius: 999px;
}

.results-item__detail {
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.results-item__points {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.results-empty {
  margin: 0;
  padding: 14px 12px;
  font-size: 12px;
  text-align: center;
  color: var(--ink-faint);
}

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

.results-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 520px) {
  .results-total__num {
    font-size: 44px;
  }

  .results-actions {
    flex-direction: column-reverse;
  }

  .results-actions .btn {
    width: 100%;
  }
}