.results-screen { overflow-y: auto; padding: 0 4px 28px; margin-inline: -4px; scrollbar-color: var(--panel-line) var(--cabinet); }
.results { display: none; } .results.active { display: block; }
.verdict { text-align: center; padding: 20px 0 16px; }
.verdict-icon { font-size: 26px; line-height: 1; }
.verdict h1 { margin: 8px 0 12px; font: 700 24px/1.3 var(--font-pixel); }
.result-score { font: 400 12px/1.7 var(--font-pixel); margin: 0; }
.result-score span, .dots-legend span { color: var(--panel-line); padding-inline: 4px; }
.result-summary { margin: 8px 0 2px; font-size: 15px; color: var(--muted); }
.models-beaten { margin: 0; font-size: 15px; color: var(--muted); }
.finish-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 2px solid var(--panel-line); }
.finish-table caption { text-align: left; font: 400 11px var(--font-pixel); color: var(--muted); padding: 0 0 10px; }
.finish-table thead th { height: 30px; color: var(--muted); font: 400 10px var(--font-pixel); text-align: left; }
.finish-table th, .finish-table td { padding: 6px 5px; }
.finish-table th:first-child, .finish-table td:first-child { padding-left: 10px; }
.finish-table th:last-child, .finish-table td:last-child { padding-right: 10px; text-align: right; }
.finish-row { height: 53px; border-top: 1px solid var(--panel-line); }
.finish-row th { text-align: left; font-size: 17px; line-height: 1.1; }
.finish-rank { width: 28px; color: var(--muted); font: 400 11px var(--font-pixel); }
.finish-sprite { width: 36px; text-align: center; }
.finish-model { display: block; font: 400 13px/1.4 var(--font-body); color: var(--muted); margin-top: 3px; }
.finish-score { font: 400 11px var(--font-pixel); white-space: nowrap; }
.finish-time { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finish-you { background: color-mix(in srgb,var(--magenta) 10%,var(--panel)); color: var(--magenta); }
.finish-you .finish-rank, .finish-you .finish-model { color: var(--magenta); }
.result-dots { text-align: center; margin: 18px 0 0; }
.dots-legend { margin: 0 0 10px; font: 400 10px var(--font-pixel); color: var(--muted); }
.dot-row { display: flex; justify-content: center; gap: 14px; }
.dot-pair { display: flex; gap: 4px; }
.result-dot { width: 14px; height: 14px; }
.dot-correct { background: var(--mint); } .dot-wrong { background: var(--coral); }
.dots-model { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.character-story { text-align: center; font-size: 19px; line-height: 1.4; margin: 16px 8px 20px; }
.share-btn { display: none; } .share-btn.active { display: block; }
.next-race { text-align: center; margin: 26px 0 24px; }
.return-countdown { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: center; font: 400 11px var(--font-pixel); color: var(--muted); margin: 0; }
.return-countdown time { font: 400 20px var(--font-pixel); color: var(--lemon); font-variant-numeric: tabular-nums; }
.tomorrow { margin: 8px 0 0; font-size: 16px; color: var(--text); }
.tomorrow b { font: 400 10px var(--font-pixel); color: var(--muted); }
.new-race-button { margin-top: 16px; min-height: 44px; padding: 10px 14px; color: var(--cabinet); background: var(--lemon); border: 0; font: 700 11px var(--font-pixel); }
.result-disclosure { border-top: 2px solid var(--panel-line); }
.install-nudge { padding: 16px; margin: 0 0 24px; border: 2px solid var(--cyan); background: var(--panel); }
.install-nudge h2 { color: var(--cyan); font: 400 12px/1.5 var(--font-pixel); margin: 0; }
.install-nudge p { font-size: 17px; line-height: 1.4; margin: 10px 0; }
.install-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.install-actions button { padding: 10px 12px; min-height: 44px; border: 2px solid var(--cyan); color: var(--cyan); background: var(--cabinet); font: 400 10px/1.5 var(--font-pixel); }
.install-actions button:last-child { border-color: var(--panel-line); color: var(--muted); }
.result-disclosure > summary { padding: 18px 4px; color: var(--cyan); font: 400 11px/1.5 var(--font-pixel); min-height: 56px; cursor: pointer; }
summary:focus-visible { outline: 3px solid var(--lemon); outline-offset: -3px; }
.result-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 6px 0 18px; }
.result-stats div { text-align: center; padding: 10px 2px; background: var(--panel); }
.result-stats dt { font-size: 13px; color: var(--muted); }
.result-stats dd { margin: 6px 0 0; font: 400 12px var(--font-pixel); }
.narrative { margin: 0 0 16px; font-size: 17px; line-height: 1.5; }
.n-win { color: var(--mint); } .n-loss { color: var(--coral); } .n-gold { color: var(--lemon); }
.detail-note { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.timeline-row { padding: 14px 0; border-top: 1px solid var(--panel-line); }
.timeline-heading { display: flex; justify-content: space-between; align-items: center; }
.timeline-badge { font: 400 10px var(--font-pixel); color: var(--muted); }
.timeline-question { font-size: 17px; line-height: 1.4; margin: 8px 0; }
.timeline-time { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 14px; }
.racer-detail { background: var(--panel); margin-bottom: 10px; padding: 0 12px; }
.racer-detail > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 64px; padding: 10px 0; cursor: pointer; font-size: 17px; }
.racer-detail > summary::after { content: '+'; color: var(--cyan); }
.racer-detail[open] > summary::after { content: '−'; }
.racer-detail > summary > span:first-child { flex: 1; }
.racer-detail > summary > span:last-child { color: var(--muted); font-size: 14px; }
.racer-answer { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 12px 0; border-top: 1px solid var(--panel-line); font-size: 15px; line-height: 1.4; }
.racer-answer > span:last-child { color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .finish-row { animation: finish-reveal 240ms steps(3,end) both; animation-delay: calc(var(--row-index) * 80ms); }
  @keyframes finish-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 360px) {
  .result-score { font-size: 10px; } .verdict h1 { font-size: 24px; }
  .finish-table th, .finish-table td { padding-inline: 3px; } .finish-table thead th { font-size: 10px; }
  .finish-sprite { width: 30px; } .finish-row th { font-size: 16px; } .finish-model { font-size: 12px; }
}