/* ui/RunResults — a modular run's end. Contract: ./RunResults.spec.md.
   Mobile first: one column, the actions a bar pinned to the bottom; two columns
   from 900 px. Tokens only (ui/Theme C8); nothing under 12 px (Theme C16). */

.sp-run {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: var(--sp-text);
  background: radial-gradient(
    ellipse 90% 80% at 50% 40%,
    color-mix(in oklab, var(--sp-space-0) 62%, transparent),
    color-mix(in oklab, var(--sp-space-0) 92%, transparent)
  );
  backdrop-filter: blur(6px);
  animation: sp-run-fade var(--sp-dur) ease-out both;
}

@keyframes sp-run-fade { from { opacity: 0; } }
@keyframes sp-run-rise { from { opacity: 0; transform: translateY(12px); } }

.sp-run__sheet {
  display: grid;
  gap: 14px;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
}

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

.sp-run__header {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  animation: sp-run-rise 520ms var(--sp-ease-out) both;
}

.sp-run__eyebrow { color: var(--sp-danger); }

.sp-run__title {
  margin: 0;
  font: 300 clamp(26px, 7vw, 46px)/1.05 var(--sp-font-display);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--sp-text);
  text-shadow: 0 0 var(--sp-glow-lg) color-mix(in srgb, var(--sp-danger) 35%, transparent);
}

.sp-run__test { margin: 0; padding: 8px 12px; border: 1px dashed var(--sp-line); border-radius: 10px; color: var(--sp-text-dim); font-size: 13px; }
.sp-run__sub {
  margin: 0;
  font: 500 13px/1.3 var(--sp-font-mono);
  color: var(--sp-text-dim);
}

/* --------------------------------------------------------------- grid --- */

.sp-run__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.sp-run__col {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 900px) {
  .sp-run__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .sp-run__sheet { padding-top: max(64px, env(safe-area-inset-top)); gap: 20px; }
}

.sp-run__card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 14px;
  background: var(--sp-glass);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  animation: sp-run-rise 560ms var(--sp-ease-out) both;
}

.sp-run__card[data-part="run-killer"] { border-color: color-mix(in srgb, var(--sp-danger) 45%, var(--sp-line)); }

.sp-run__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.sp-run__heading-text {
  font: 600 13px/1 var(--sp-font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-text-faint);
}

.sp-run__heading-extra {
  font: 500 12px/1 var(--sp-font-mono);
  color: var(--sp-text-dim);
}

/* --------------------------------------------------------- the ships --- */

.sp-run__ship-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

@media (min-width: 900px) {
  .sp-run__ship-row { grid-template-columns: 132px minmax(0, 1fr); }
}

.sp-run__ship {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sp-accent) 12%, transparent), transparent 70%);
  border-radius: 50%;
}

.sp-run__who {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sp-run__killer-name {
  font: 600 22px/1.1 var(--sp-font-display);
  letter-spacing: 0.04em;
  color: var(--paint, var(--sp-text));
  overflow-wrap: anywhere;
}

.sp-run__killer-name--hazard { margin: 0; color: var(--sp-danger); }

.sp-run__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-run__tag {
  padding: 2px 8px;
  font: 600 12px/1.5 var(--sp-font-mono);
  color: var(--sp-text-dim);
  border: 1px solid var(--sp-line-strong);
  border-radius: 999px;
}

.sp-run__tag--bounty {
  color: var(--sp-rarity-legendary);
  border-color: var(--sp-rarity-legendary);
  background: color-mix(in srgb, var(--sp-rarity-legendary) 14%, transparent);
}

.sp-run__build {
  font: 500 13px/1.3 var(--sp-font-ui);
  color: var(--sp-text-dim);
}

.sp-run__build--own { font-weight: 600; color: var(--sp-text); }

.sp-run__parts { font-size: 12px; color: var(--sp-text-faint); }

.sp-run__best {
  margin: 0;
  font: 600 13px/1.3 var(--sp-font-ui);
  color: var(--sp-text-dim);
}

.sp-run__best[data-best="new"],
.sp-run__best[data-best="first"] { color: var(--sp-rarity-legendary); }

/* ------------------------------------------------------ the last hits --- */

/* Death on the right, the oldest kept hit on the left: --at is 0 at death. */
.sp-run__timeline {
  position: relative;
  height: 22px;
  margin: 0 8px;
  border-bottom: 1px solid var(--sp-line-strong);
}

.sp-run__tick {
  position: absolute;
  bottom: -5px;
  right: calc(var(--at) * 100%);
  width: calc(8px + var(--weight) * 10px);
  height: calc(8px + var(--weight) * 10px);
  transform: translateX(50%);
  background: var(--sp-down);
  border: 1px solid var(--sp-space-0);
  border-radius: 50%;
}

.sp-run__tick[data-fatal="true"] {
  background: var(--sp-danger);
  box-shadow: 0 0 var(--sp-glow-sm) var(--sp-danger);
}

.sp-run__hits {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-run__hit {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 48px;
  grid-template-areas: "time source weapon amount" "time tags tags tags";
  align-items: baseline;
  column-gap: 8px;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: var(--sp-radius-sm);
}

.sp-run__hit:nth-child(odd) { background: color-mix(in srgb, var(--sp-text) 4%, transparent); }
.sp-run__hit[data-fatal="true"] { background: color-mix(in srgb, var(--sp-danger) 12%, transparent); }

.sp-run__hit-time { grid-area: time; font: 500 12px/1.4 var(--sp-font-mono); color: var(--sp-text-faint); }
.sp-run__hit-source { grid-area: source; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sp-run__hit-weapon { grid-area: weapon; color: var(--sp-text-dim); }
.sp-run__hit-amount { grid-area: amount; justify-self: end; font: 600 13px/1.4 var(--sp-font-mono); color: var(--sp-danger); }
.sp-run__hit-tags { grid-area: tags; display: flex; gap: 6px; }
.sp-run__hit-tags:empty { display: none; }

.sp-run__hit-tag {
  padding: 0 6px;
  font: 600 12px/1.5 var(--sp-font-ui);
  letter-spacing: 0.04em;
  color: var(--sp-down);
  border: 1px solid currentColor;
  border-radius: 4px;
}

.sp-run__hit-tag--fatal { color: var(--sp-danger); }

.sp-run__empty { margin: 0; color: var(--sp-text-faint); }

/* ---------------------------------------------------------- your run --- */

.sp-run__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.sp-run__stat {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: color-mix(in srgb, var(--sp-space-2) 70%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
}

.sp-run__stat-value { font: 600 20px/1 var(--sp-font-display); color: var(--sp-text); }
.sp-run__stat-label { font-size: 12px; color: var(--sp-text-faint); text-align: center; }
.sp-run__stat[data-stat="score"] .sp-run__stat-value { color: var(--sp-accent-2); }

/* ----------------------------------------------------------- rewards --- */

.sp-run__quanta {
  display: grid;
  gap: 8px;
}

.sp-run__quanta-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 600 26px/1 var(--sp-font-display);
  color: var(--sp-quanta);
}

.sp-run__glyph { font-size: 20px; }

.sp-run__lines {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--sp-text-dim);
}

.sp-run__line { display: flex; justify-content: space-between; gap: 8px; }
.sp-run__line-amount { font-family: var(--sp-font-mono); color: var(--sp-quanta); }

.sp-run__double {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font: 600 13px/1.2 var(--sp-font-ui);
  color: var(--sp-quanta);
  border: 1px solid var(--sp-quanta);
  border-radius: var(--sp-radius-sm);
  background: color-mix(in srgb, var(--sp-quanta) 10%, transparent);
}

.sp-run__double[data-state="loading"] { opacity: 0.6; }
.sp-run__double-amount { font-family: var(--sp-font-mono); }

.sp-run__missions {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-run__mission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  font-size: 13px;
}

.sp-run__mission-text { color: var(--sp-text); min-width: 0; }
.sp-run__mission-progress { font: 500 12px/1.4 var(--sp-font-mono); color: var(--sp-text-dim); }

.sp-run__mission-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--sp-text-faint) calc(var(--from) * 100%), transparent 0),
    linear-gradient(90deg, var(--sp-accent-2) calc(var(--to) * 100%), var(--sp-line) 0);
}

.sp-run__mission[data-complete="true"] .sp-run__mission-progress { color: var(--sp-up); }

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

.sp-run__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: auto;
  padding: 28px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* A fixed fade over the top edge, so a taller bar (the next ship) still reads on solid ground. */
  background: linear-gradient(to top, var(--sp-space-0) calc(100% - 24px), transparent);
}


.sp-run__primary {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.sp-run__respawn {
  min-height: 56px;
  min-width: 300px;
  font-size: 16px;
}

.sp-run__picks {
  font: 500 12px/1 var(--sp-font-mono);
  color: var(--sp-accent-2);
}

.sp-run__secondary {
  min-height: 44px;
  min-width: 96px;
  padding: 10px 22px;
}

/* A phone: the actions are one bar pinned to the bottom, the primary full width. */
.sp-run[data-touch="true"] .sp-run__actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sp-run[data-touch="true"] .sp-run__primary,
.sp-run[data-touch="true"] .sp-run__weapon { grid-column: 1 / -1; }
.sp-run[data-touch="true"] .sp-run__respawn { width: 100%; min-width: 0; }
.sp-run[data-touch="true"] .sp-run__secondary { width: 100%; }
.sp-run[data-touch="true"] .sp-run__secondary:only-of-type { grid-column: 1 / -1; }

.sp-run__secondary { display: inline-grid; place-items: center; text-align: center; }

/* Sproks: the weapon mastery a run fed, its level-ups and the paints it earned; the autoplay line. */
.sp-run__mastery { display: grid; gap: 6px; margin-bottom: 12px; }
.sp-run__mastery-head { display: flex; justify-content: space-between; gap: 8px; font: 600 14px/1.2 var(--sp-font-ui); }
.sp-run__mastery-xp { font: 600 13px/1.2 var(--sp-font-mono); color: var(--sp-xp); }
.sp-run__mastery-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sp-xp) var(--fill, 0%), var(--sp-space-2) var(--fill, 0%));
}
.sp-run__levelup { font: 700 13px/1.2 var(--sp-font-display); letter-spacing: 0.08em; color: var(--sp-up); }
.sp-run__unlocks { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sp-run__unlock { font: 600 13px/1.3 var(--sp-font-ui); color: var(--sp-quanta); }
.sp-run__auto { font: 400 13px/1.2 var(--sp-font-ui); color: var(--sp-text-dim); }

/* The next run's ship (docs/blueprints.md §0): the offer of three on its own line above Respawn. */
.sp-run__next {
  flex-basis: 100%;
  display: grid;
  gap: 8px;
  width: 100%;
  justify-items: center;
}

.sp-run__next-title {
  margin: 0;
}

.sp-run__report {
  justify-self: start;
  min-height: 44px;
  padding: 0 12px;
  font-size: 12px;
}

/* ------------------------------------------------- blueprint runs --- */

/* A blueprint's tier: "T{n}" and the stage's five pips, the HUD's own marks (no level in words). */
.sp-run__tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 3px 8px;
  font: 700 12px/1 var(--sp-font-mono);
  letter-spacing: 0.06em;
  color: var(--sp-accent-2);
  border: 1px solid color-mix(in srgb, var(--sp-accent-2) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sp-accent-2) 10%, transparent);
}

.sp-run__tier-pips { display: inline-flex; gap: 3px; }

.sp-run__tier-pip {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--sp-line-strong);
}

.sp-run__tier-pip[data-on="true"] {
  background: var(--sp-accent-2);
  box-shadow: 0 0 4px color-mix(in srgb, var(--sp-accent-2) 70%, transparent);
}

.sp-run__respawn .sp-run__tier {
  margin-left: 10px;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  vertical-align: middle;
}

/* A blueprint gun's hit: its line's drawn mark in the line's colour, the word for a reader only. */
.sp-run__hit-weapon--line { display: inline-grid; place-items: center start; }

.sp-run__line-mark {
  width: 22px;
  height: 14px;
  background: var(--weapon);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--weapon) 60%, transparent));
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.sp-run__hit-weapon[data-line="blaster"] { --weapon: var(--sp-ship-laser); --icon: 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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h15' stroke-width='3.2'/%3E%3Cpath d='M6 9v6' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='12' r='2.4' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.sp-run__hit-weapon[data-line="scatter"] { --weapon: var(--sp-ship-scatter); --icon: 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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h9' stroke-width='3'/%3E%3Cpath d='M11 12l9-6M11 12h10M11 12l9 6' stroke-width='1.8'/%3E%3C/svg%3E"); }
.sp-run__hit-weapon[data-line="rocket"] { --weapon: var(--sp-ship-rocket); --icon: 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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12v8H2z' fill='black'/%3E%3Cpath d='M14 8l6 4-6 4z' fill='black'/%3E%3C/svg%3E"); }

/* The hits list keeps to its last five rows, so the screen fits; the rest scroll. */
.sp-run__hits { max-height: 124px; overflow-y: auto; }

/* The next ship sits compact under the recap, so Respawn stays in view. */
.sp-run__next .sp-offer { width: min(100%, 600px); gap: 12px; }

/* A wide screen: three columns (the death, your run, the rewards), so the recap and the next
   ship fit one screen. */
@media (min-width: 1200px) {
  .sp-run__sheet { width: min(1240px, 100%); padding-top: max(24px, env(safe-area-inset-top)); gap: 14px; }
  .sp-run__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.95fr); align-items: start; }
  .sp-run__grid > .sp-run__col:last-child { display: contents; }
  .sp-run__actions { padding-top: 18px; }
}

/* A desktop window that is wide and not tall (a laptop, a portal's frame): the bar pinned to the
   foot held the next ship's cards at full height and covered the lower half of the recap
   (Jackson, 2026-10-08: "the choose your next ship overshadows the results screen"). The cards
   are squarer and narrower here and the bar is tighter, so the recap shows whole above it. */
@media (min-width: 1200px) and (max-height: 960px) {
  .sp-run:not([data-touch="true"]) .sp-run__next .sp-offer { width: min(100%, 500px); gap: 10px; }
  .sp-run:not([data-touch="true"]) .sp-run__next .sp-offer__art { aspect-ratio: 1 / 1; }
  .sp-run:not([data-touch="true"]) .sp-run__actions { padding-top: 10px; gap: 8px 16px; }
  .sp-run:not([data-touch="true"]) .sp-run__next { gap: 4px; }
  .sp-run:not([data-touch="true"]) .sp-run__respawn { min-height: 48px; }
}

/* A phone: the next ship spans the action bar, so the swipe shows its cards whole. */
.sp-run[data-touch="true"] .sp-run__next { grid-column: 1 / -1; }

/* A phone on its side (375 to 390 px tall): the recap and the actions side by side. Stacked, the
   next ship's cards and the buttons were taller than the screen and the bar pinned to its foot
   covered the whole recap. Here the recap scrolls on the left and the next ship, Respawn and the
   two ways out stand on the right, always in view, clear of the gear in the corner. */
@media (max-height: 520px) and (min-width: 600px) {
  .sp-run { flex-direction: row; overflow: hidden; }
  .sp-run__sheet {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sp-run__title { font-size: 24px; }
  .sp-run__actions,
  .sp-run[data-touch="true"] .sp-run__actions {
    position: static;
    flex: 0 0 min(46%, 400px);
    align-content: center;
    height: 100%;
    margin-top: 0;
    padding: 52px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 12px;
    overflow-y: auto;
    background: color-mix(in srgb, var(--sp-space-0) 86%, transparent);
    border-left: 3px solid var(--sp-seam);
  }
}

/* An extraction: the run ended alive. The currency's brass (what was earned) where a death's is
   danger; never the selection's blue. */
.sp-run[data-extracted="true"] .sp-run__eyebrow,
.sp-run[data-extracted="true"] .sp-run__title { color: var(--sp-quanta); }

.sp-run__extracted-name { color: var(--sp-quanta); }

.sp-run__extracted-pay {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--sp-text-dim);
}

.sp-run__line[data-key="extraction"] {
  color: var(--sp-quanta);
  font-weight: 700;
}