/* The "Make your bot" flow. Same house style as play.css. */

/* ============================================================ shared */

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.icon-btn { text-decoration: none; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn svg circle { fill: currentColor; stroke: none; }

/* Screen changes slide a short way and fade; the direction follows the flow. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
html[data-direction="forward"]::view-transition-old(root) { animation-name: vt-out-left; }
html[data-direction="forward"]::view-transition-new(root) { animation-name: vt-in-right; }
html[data-direction="back"]::view-transition-old(root) { animation-name: vt-out-right; }
html[data-direction="back"]::view-transition-new(root) { animation-name: vt-in-left; }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(28px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-28px); } }

/* ============================================================ flow */

.flow {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 560px;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), 10px) var(--gutter) 0;
}
.flow-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; }

.steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.steps li { width: 26px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); transition: width .35s var(--out), background-color .3s; }
.steps li.on { width: 40px; background: var(--accent); }
.steps li.done { background: color-mix(in srgb, var(--accent) 45%, transparent); }

.step-title { margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; outline: none; }
.step-sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

.flow-actions {
  display: grid; grid-template-columns: auto 1fr; gap: 8px;
  padding: 12px 0 max(env(safe-area-inset-bottom), 14px);
  border-top: 1px solid var(--line);
}
.flow-actions .btn { min-height: var(--tap); }
.flow-actions .btn-quiet { padding: 0 16px; gap: 8px; font-size: 15px; }

/* ------------------------------------------------------------ fighter */

.fighter-body { min-height: 0; display: flex; flex-direction: column; }

.preview { position: relative; height: clamp(150px, 27dvh, 280px); min-width: 0; display: flex; justify-content: center; align-items: flex-end; margin: 8px 0 2px; }
/* The same cyan "you" ring the board and the quiz scenes use. */
.you-ring {
  position: absolute; bottom: 5%;
  width: min(48%, 200px); aspect-ratio: 3 / 1; border-radius: 50%;
  border: 3px solid var(--accent);
  background: radial-gradient(closest-side, rgba(34, 211, 238, .22), transparent);
  box-shadow: 0 0 18px rgba(34, 211, 238, .5), inset 0 0 12px rgba(34, 211, 238, .35);
}
.preview-sprite {
  position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
  animation: idle 2.8s ease-in-out infinite;
}
.preview-sprite.pop { animation: pop .38s var(--spring), idle 2.8s ease-in-out .38s infinite; }
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pop { from { opacity: .2; transform: translateY(10px) scale(.82); } to { opacity: 1; transform: none; } }

.picker {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px;
  align-content: start;
  /* Rows take their content's height and the grid scrolls; without this the
     rows squeeze to fit the box (tiles clip, so their minimum height is 0). */
  grid-auto-rows: max-content;
  padding: 10px 3px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 22px), transparent);
}
.tile {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  transition: transform .12s var(--out), border-color .2s, box-shadow .2s;
}
/* The image sets the square (an aspect-ratio on the tile itself collapses
   the grid rows when the tile clips its overflow). */
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transform: scale(1.05); }
.tile:active { transform: scale(.94); }
.tile:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tile[aria-checked="true"] {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .22), 0 8px 20px -8px rgba(34, 211, 238, .7);
}
.tile[aria-checked="true"]::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2304121a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  animation: check .3s var(--spring);
}
@keyframes check { from { transform: scale(0); } to { transform: none; } }
@media (hover: hover) { .tile:hover { border-color: rgba(255, 255, 255, .24); } }

@media (min-width: 960px) {
  .flow { max-width: 1120px; padding: 24px 48px 0; }
  .fighter-body { display: grid; grid-template-columns: 5fr 6fr; grid-template-rows: auto 1fr; column-gap: 48px; min-height: 0; }
  .fighter-head { grid-column: 1; }
  .preview { grid-column: 1; grid-row: 2; height: min(56dvh, 520px); align-self: center; margin: 0; }
  .picker { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .step-title { font-size: 40px; }
  .flow-actions { grid-template-columns: auto auto; justify-content: end; }
  .flow-actions .btn-primary { padding: 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-sprite, .preview-sprite.pop { animation: none; }
}

/* ------------------------------------------------------------ name */

.name-body { min-height: 0; display: flex; flex-direction: column; }
.name-stage { position: relative; flex: 1; min-height: 150px; max-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; margin: 6px 0 10px; }
.name-stage .you-ring { bottom: 4%; }
.name-sprite { position: relative; height: 78%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); animation: idle 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
/* Styled like the arena's own name labels: the name as everyone will see it. */
.name-plate {
  position: relative; z-index: 1; margin-bottom: -4%; max-width: 92%;
  padding: 5px 12px; border-radius: 8px;
  background: rgba(7, 6, 15, .85); border: 1.5px solid var(--accent);
  font-family: var(--display); font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 16px -6px rgba(34, 211, 238, .55);
}
.name-plate.pop { animation: pop .32s var(--spring); }

.name-field { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.name-field input {
  min-width: 0; height: 60px; padding: 0 16px;
  border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .16); background: var(--panel);
  color: var(--text); font-family: var(--display); font-size: 22px; letter-spacing: .01em;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.name-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.name-field .reroll { width: 60px; height: 60px; border-radius: 14px; }
.name-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; padding: 0 4px; }
.name-count { font-variant-numeric: tabular-nums; }
.name-error { grid-column: 1 / -1; margin: 0; min-height: 20px; color: #fda4af; font-size: 14px; padding: 0 4px; }
.name-field.invalid input { border-color: #fb7185; box-shadow: 0 0 0 4px rgba(251, 113, 133, .16); }
.name-field.shake { animation: shake .34s var(--out); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.flow-actions.single { grid-template-columns: 1fr; }

@media (min-width: 960px) {
  /* The input sits in the vertical middle, beside the fighter. */
  .name-body { display: grid; grid-template-columns: 5fr 6fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 48px; }
  .name-stage { grid-column: 1; grid-row: 1 / 5; max-height: none; height: min(62dvh, 560px); align-self: center; }
  .name-body .fighter-head { grid-column: 2; grid-row: 2; margin-bottom: 20px; }
  .name-field { grid-column: 2; grid-row: 3; max-width: 520px; }
  .flow-actions.single { grid-template-columns: auto; justify-content: end; }
}
@media (prefers-reduced-motion: reduce) { .name-sprite, .name-plate.pop, .name-field.shake { animation: none; } }

/* ------------------------------------------------------------ style */

.style-body { min-height: 0; display: flex; flex-direction: column; }
.styles {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: max-content; align-content: start;
  padding: 12px 2px 18px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 22px), transparent);
}
.style-card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: 0; overflow: hidden; cursor: pointer; color: var(--text);
  border-radius: 16px; border: 1px solid var(--line); background: var(--panel);
  font: inherit;
  transition: transform .12s var(--out), border-color .2s, box-shadow .2s;
}
.style-card:active { transform: scale(.97); }
.style-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.style-art {
  display: block; aspect-ratio: 1.15; position: relative;
  background: radial-gradient(ellipse 60% 28% at 50% 88%, rgba(255, 255, 255, .07), transparent 70%);
}
.style-art img { position: absolute; inset: 6% 6% 0; width: 88%; height: 94%; object-fit: contain; object-position: 50% 100%; transition: transform .35s var(--spring); }
.style-text { display: flex; flex-direction: column; gap: 4px; padding: 2px 12px 12px; }
.style-title { font-family: var(--display); font-size: 18px; }
.style-blurb { color: var(--muted); font-size: 13px; line-height: 1.35; }
.style-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 12px; color: var(--text); }
.chip img { width: 20px; height: 20px; }
/* Always present (dimmed) so picking a card never shifts the layout. */
.style-tip { font-size: 13px; line-height: 1.35; color: rgba(245, 243, 255, .55); margin-top: 2px; transition: color .2s; }
.style-card[aria-checked="true"] {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .2), 0 10px 26px -10px rgba(34, 211, 238, .7);
}
.style-card[aria-checked="true"] .style-tip { color: var(--accent); }
.style-card[aria-checked="true"] .style-art img { transform: translateY(-3px) scale(1.04); }
.style-card[aria-checked="true"]::after {
  content: ''; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2304121a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  animation: check .3s var(--spring);
}
@media (hover: hover) { .style-card:hover { border-color: rgba(255, 255, 255, .24); } }

@media (min-width: 960px) {
  .styles { grid-template-columns: repeat(3, 1fr); gap: 18px; align-content: center; }
  .style-card { flex-direction: row; align-items: stretch; }
  /* Two rows must fit any laptop height without scrolling. */
  .style-art { flex: 0 0 40%; aspect-ratio: auto; min-height: clamp(118px, calc((100dvh - 400px) / 2), 230px); }
  .style-text { padding: 16px 16px 16px 4px; justify-content: center; }
  .style-title { font-size: 22px; }
  .style-blurb, .style-tip { font-size: 14px; }
  .style-text { gap: 3px; padding: 12px 14px 12px 2px; }
}

/* ------------------------------------------------------------ test match */

.bar-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Scores, arena and caption stay together as one group, centred. */
.test-body { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.test-body .scoreboard { justify-content: space-between; }
.score.you { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.score.you::before {
  content: 'You'; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c);
}
.score.won.you::after { content: 'You win'; }

.test-stage { position: relative; flex: 0 1 auto; min-height: 0; display: grid; place-items: center; }
/* Square, and never taller than what's left after the bar, scores, caption
   and footer (about 300px), so nothing overlaps the board. */
.test-stage .arena-frame { width: min(100%, calc(100dvh - 300px)); aspect-ratio: 1; }
.test-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.test[data-phase="loading"] .arena-frame, .test[data-phase="intro"] .arena-frame, .test[data-phase="error"] .arena-frame { opacity: 0; }
.test .arena-frame { transition: opacity .5s var(--out); }

.test-loading, .test-error { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px; text-align: center; color: var(--muted); }
.test[data-phase="loading"] .test-loading { display: grid; }
.test[data-phase="error"] .test-error { display: grid; }
.test-error-text { max-width: 30ch; margin: 0; color: var(--text); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The line-up: your bot and its three opponents, before the fight. */
.intro { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 12px; place-content: center; pointer-events: none; }
.intro-card {
  display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 16px;
  background: var(--panel); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  opacity: 0; transform: translateY(14px) scale(.94);
}
.intro.show .intro-card { animation: card-in .45s var(--spring) forwards; animation-delay: calc(var(--i) * 110ms); }
.intro-card img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 3px var(--c); }
.intro-card span { font-family: var(--display); font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intro-card.you { border-width: 2px; box-shadow: 0 0 24px -6px var(--c); }
.intro-card.you span { color: var(--c); }
@keyframes card-in { to { opacity: 1; transform: none; } }

.fight-banner {
  position: absolute; z-index: 2; font-family: var(--display); font-size: clamp(48px, 14vw, 96px);
  color: #fff; text-transform: uppercase; letter-spacing: .02em;
  text-shadow: 0 0 24px rgba(34, 211, 238, .8), 0 4px 0 rgba(0, 0, 0, .5);
  animation: fight .9s var(--out) forwards; pointer-events: none;
}
@keyframes fight { 0% { opacity: 0; transform: scale(1.6); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }

/* What your bot is thinking: one short line, only when it changes. */
.caption { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; opacity: 0; }
.caption.in { animation: caption .35s var(--out) forwards; }
.caption-you { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.caption-text { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes caption { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.test[data-phase="loading"] .caption, .test[data-phase="intro"] .caption { visibility: hidden; }

@media (min-width: 960px) {
  .test-stage .arena-frame { width: min(100%, calc(100dvh - 320px)); }
  .intro { grid-template-columns: repeat(4, 160px); }
  .caption { justify-content: center; }
  .caption-text { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .intro.show .intro-card { animation: none; opacity: 1; transform: none; } .fight-banner { display: none; } }

/* ------------------------------------------------------------ result */

.result-body { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.result-head { text-align: center; }
.place { font-size: 40px; }
.place[data-place="1"] { color: var(--gold); text-shadow: 0 0 28px rgba(250, 204, 21, .45); }
/* Headroom above the art: the winner stands on the tallest pedestal and its
   name plate reaches above the image. */
.podium { position: relative; width: min(100%, 520px); margin: clamp(48px, 12vw, 76px) auto 0; aspect-ratio: 3 / 2; }
.podium-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.podium-bot {
  position: absolute; width: 22%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0;
}
.podium-bot img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
.podium-name {
  display: flex; gap: 5px; align-items: baseline; margin-bottom: 2px; padding: 2px 7px; border-radius: 6px;
  background: rgba(7, 6, 15, .85); border: 1px solid var(--line);
  font-family: var(--display); font-size: 11px; white-space: nowrap; max-width: 140%; overflow: hidden; text-overflow: ellipsis;
}
.podium-name b { font-weight: 400; color: var(--gold); font-variant-numeric: tabular-nums; }
.podium-bot.you .podium-name { border-color: var(--accent); color: var(--accent); }
.result.landed .podium-bot { animation: land .55s var(--spring) forwards; animation-delay: var(--delay); }
@keyframes land { from { opacity: 0; transform: translate(-50%, -160%); } to { opacity: 1; transform: translate(-50%, -100%); } }
.result.landed .result-head { animation: card-in .5s var(--out) both; }
.story { margin: 6px auto 0; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 420px; width: 100%; }
.story li { padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.4; }
.story li:first-child { color: var(--text); }
.result .flow-actions { grid-template-columns: 1fr 1.4fr; }
/* The map result table: on a phone it stays out of the way (the podium and
   the story are the point); on a desktop it fills the right column. */
.result-side { display: contents; }
.side-title, .mr-table, .mr-legend { display: none; }
.mr-table { margin: 0; padding: 0; list-style: none; gap: 8px; }
.mr-row {
  display: grid; grid-template-columns: 40px 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255, 255, 255, .02) 70%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  opacity: 0; transform: translateX(24px);
}
.result.landed .mr-row { animation: mr-in .5s var(--out) forwards; animation-delay: calc(.35s + var(--i) * .09s); }
@keyframes mr-in { to { opacity: 1; transform: none; } }
.mr-row.first { border-color: color-mix(in srgb, var(--gold) 70%, transparent); box-shadow: 0 0 22px -6px var(--gold); }
.mr-row.you { box-shadow: inset 0 0 0 1px var(--accent); }
.mr-pos { font-family: var(--display); font-size: 18px; color: var(--muted); text-align: center; }
.mr-row.first .mr-pos { color: var(--gold); }
.mr-por { width: 52px; height: 52px; border-radius: 11px; overflow: hidden; border: 2px solid var(--c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 45%, #1a1530), #0b0918); }
.mr-por img { width: 100%; height: 100%; object-fit: cover; }
.mr-main { display: grid; gap: 5px; min-width: 0; }
.mr-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--display); font-size: 17px; white-space: nowrap; overflow: hidden; }
.mr-name em { font-style: normal; padding: 0 5px; border-radius: 4px; background: var(--accent); color: #04121a; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mr-name .chip { padding: 1px 7px 1px 3px; font-family: var(--body, inherit); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: rgba(0, 0, 0, .35); }
.mr-name .chip img { width: 15px; height: 15px; }
.mr-bar { display: flex; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.mr-bar .seg { width: 0; animation: seg-grow 1s var(--out) forwards; animation-delay: calc(.8s + var(--i) * .1s); }
@keyframes seg-grow { to { width: var(--w); } }
.seg.combat, .lg.combat::before { background: #f87171; }
.seg.style, .lg.style::before { background: #c084fc; }
.seg.cargo, .lg.cargo::before { background: #34d399; }
.seg.core, .lg.core::before { background: #facc15; }
.seg.defense, .lg.defense::before { background: #60a5fa; }
.mr-stats { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-score { font-family: var(--display); font-weight: 400; font-size: 30px; font-variant-numeric: tabular-nums; }
.mr-row.first .mr-score { color: var(--gold); }
.mr-legend { flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lg::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

@media (min-width: 960px) {
  .flow.result { max-width: 1280px; }
  .result-body {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 1fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: 48px; align-items: center;
  }
  .result-head { grid-column: 1; grid-row: 1; }
  .place { font-size: 56px; }
  /* Scales with the height too, so it never runs into the footer. */
  .podium { grid-column: 1; grid-row: 2; width: min(100%, 680px, (100dvh - 330px) * 1.5); margin: clamp(40px, 7dvh, 70px) auto 0; align-self: start; }
  .result-side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: 100%; overflow-y: auto; align-self: center; padding-right: 4px; scrollbar-width: thin; }
  .result-body { min-height: 0; height: 100%; overflow: hidden; }
  .side-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .side-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  .mr-table { display: grid; }
  .mr-legend { display: flex; }
  .story { margin: 0; max-width: none; }
  .result .flow-actions { grid-template-columns: auto auto; justify-content: end; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .mr-row { padding: 6px 12px 6px 8px; gap: 10px; grid-template-columns: 32px 42px minmax(0, 1fr) auto; }
  .mr-por { width: 42px; height: 42px; }
  .mr-score { font-size: 24px; }
  .mr-table { gap: 6px; }
  .story li { padding: 7px 12px; font-size: 13px; }
  .story li:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .podium-bot, .mr-row { opacity: 1; transform: none; }
  .result.landed .podium-bot, .result.landed .result-head, .result.landed .mr-row { animation: none; }
  .mr-bar .seg { animation: none; width: var(--w); }
}

/* Scroll areas: a slim scrollbar in the house colours, no arrow buttons. */
.picker::-webkit-scrollbar, .styles::-webkit-scrollbar { width: 6px; }
.picker::-webkit-scrollbar-thumb, .styles::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
.picker::-webkit-scrollbar-button, .styles::-webkit-scrollbar-button { display: none; height: 0; }
.styles { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }