/* Results share the menu's toon board, without touching the in-run pixel HUD. */
#finish-skip {
  position: fixed; right: 26px; bottom: 25px; z-index: 30;
  padding: 12px 20px; border: 2px solid #8194aa; border-radius: 13px;
  background: #202b43e8; color: #fff4d8;
  box-shadow: 0 4px 0 #101728; cursor: pointer;
  font: 18px/1.2 var(--ui-display, Impact, sans-serif); letter-spacing: .04em;
}
#finish-skip small { display: block; color: #83f9d1; margin-top: 5px; font: 10px var(--ui-font, sans-serif); }
#finish-skip[hidden], body:not(.cutscene) #finish-skip { display: none; }
#finish-skip:hover { border-color: #83f9d1; }
#finish-skip:focus-visible { outline: 3px solid #83f9d1; outline-offset: 4px; }
body.finished #score-stack, body.finished #hud-right, body.finished #hud-left,
body.finished #player-panel, body.finished #rail-meter,
body.finished #minimap-panel, body.finished #gauge-panel, body.finished #help,
body.finished #hint, body.finished #board-marker, body.finished #proost-marker {
  display: none !important;
}
#finish-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  background: #10152bb3;
  color: var(--ui-cream, #fff4d8);
  font-family: var(--ui-font, "Bahnschrift", "Segoe UI", sans-serif);
  pointer-events: auto;
  transition: none;
}
/* Immediate same-frame protection, even before main's visibility sync runs. */
#finish-overlay.hidden, #finish-overlay[hidden],
body.titlescreen #finish-overlay, body.generating #finish-overlay,
body.cutscene #finish-overlay,
body:has(#menu:not(.hidden), #charbuilder:not(.hidden), #boardtest:not(.hidden)) #finish-overlay {
  display: none !important;
}
#finish-overlay *, #finish-overlay *::before, #finish-overlay *::after { box-sizing: border-box; }
#finish-overlay [hidden], #finish-overlay .hidden { display: none !important; }
#finish-overlay #fin-box {
  display: flex;
  flex-direction: column;
  width: min(710px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 4px solid #4b5275;
  border-radius: 28px;
  background: linear-gradient(135deg, #30354f, #20233e 72%);
  box-shadow: inset 0 3px 0 #8e92ae66, 0 8px 0 #11172d, 0 22px 75px #0c12265e;
}
#finish-overlay .fin-header { display: flex; align-items: center; gap: 17px; padding: 24px 28px 20px; flex-shrink: 0; border-bottom: 2px solid #54566f; }
#finish-overlay .fin-mark { width: 53px; height: 53px; color: var(--ui-mint, #64ffca); flex-shrink: 0; }
#finish-overlay .fin-eyebrow { margin: 0 0 4px; color: var(--ui-muted, #b7bad5); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
#finish-overlay #fin-title { margin: 0; color: var(--ui-cream, #fff4d8); font: italic 52px/.95 var(--ui-display, Impact, sans-serif); letter-spacing: .02em; }
#finish-overlay #fin-track { margin: 7px 0 0; color: #d1d1e2; font-size: 12px; letter-spacing: .055em; }
#finish-overlay #fin-player-row { margin-left: auto; text-align: right; min-width: 0; max-width: 38%; }
#finish-overlay #fin-player-row span { display: block; margin-bottom: 5px; font-size: 9px; letter-spacing: .12em; color: var(--ui-muted, #b7bad5); }
#finish-overlay #fin-player { font: 23px/1.1 var(--ui-display, Impact, sans-serif); overflow-wrap: anywhere; }
#finish-overlay .fin-content { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 28px; scrollbar-width: thin; scrollbar-color: #6c7696 transparent; }
#finish-overlay .fin-verdict-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
#finish-overlay #fin-verdict { margin: 0; font: 22px/1.16 var(--ui-display, Impact, sans-serif); letter-spacing: .025em; animation: none; }
#finish-overlay #fin-verdict.proost { color: var(--ui-mint, #64ffca); }
#finish-overlay #fin-verdict.adten { color: var(--ui-coral, #ff706a); animation: none; }
#finish-overlay #fin-bonus { color: #edddbc; border: 1px solid #807565; background: #6650393b; border-radius: 8px; padding: 7px 9px; font-size: 10px; font-weight: 750; letter-spacing: .04em; white-space: nowrap; }
#finish-overlay .fin-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
#finish-overlay .fin-stat { padding: 16px 18px; min-width: 0; border: 2px solid #4d5677; border-radius: 16px; background: linear-gradient(130deg, #343c58, #282d47); box-shadow: inset 0 2px 0 #8691b22b, 0 3px 0 #151b33; }
#finish-overlay .fin-stat-score { grid-column: 1 / -1; border-color: #578a8a; background: linear-gradient(130deg, #304a55, #293d48); }
#finish-overlay .fin-stat dt { color: #c6c7db; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
#finish-overlay .fin-stat dd { margin: 5px 0 0; font: 41px/1.1 var(--ui-display, Impact, sans-serif); color: var(--ui-cream, #fff4d8); overflow-wrap: anywhere; }
#finish-overlay .fin-stat-score dd { color: var(--ui-mint, #64ffca); }
#finish-overlay #fin-extra { max-width: none; margin: 17px 0 0; font: 600 12px/1.6 var(--ui-font, "Bahnschrift", sans-serif); color: #d5d5e5; }
#finish-overlay #fin-record { display: inline-block; margin-top: 16px; padding: 8px 12px; border: 1px solid #9b8c67; border-radius: 9px; color: #ffe2a6; background: #aa865621; font: 15px/1.2 var(--ui-display, Impact, sans-serif); letter-spacing: .06em; animation: none; }
#finish-overlay #fin-next { margin-top: 18px; font: 600 14px/1.4 var(--ui-font, "Bahnschrift", sans-serif); letter-spacing: .015em; color: var(--ui-mint, #64ffca); }
#finish-overlay #fin-board { margin-top: 18px; font: 600 13px/1.3 var(--ui-font, "Bahnschrift", sans-serif); border-radius: 12px; overflow: hidden; }
#finish-overlay #fin-board .fb-row { grid-template-columns: 22px minmax(0, 1fr) 70px 70px; gap: 9px; padding: 10px 12px; background: #2c334c; border-bottom: 1px solid #515672; align-items: center; }
#finish-overlay #fin-board .fb-row span { overflow-wrap: anywhere; }
#finish-overlay #fin-board .fb-row.win { color: var(--ui-cream, #fff4d8); background: #3b4956; }
#finish-overlay #fin-board .fb-row em { color: var(--ui-mint, #64ffca); font-style: normal; }
#finish-overlay .fin-footer { flex-shrink: 0; padding: 19px 28px 20px; border-top: 2px solid #54566f; background: #1b2039; }
#finish-overlay .fin-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
#finish-overlay button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 54px; padding: 12px 17px; border: 3px solid #586384; border-radius: 15px; color: var(--ui-cream, #fff4d8); background: linear-gradient(135deg, #39415e, #292e48); box-shadow: inset 0 2px 0 #929ab535, 0 4px 0 #0f162d; font: 19px/1.15 var(--ui-display, Impact, sans-serif); letter-spacing: .02em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#finish-overlay button span { font: 25px/1 var(--ui-font, "Bahnschrift", sans-serif); }
#finish-overlay #fin-restart-label { font: inherit; }
#finish-overlay button:hover { border-color: #b6bed6; background: #46506d; }
#finish-overlay button:focus-visible { outline: 3px solid var(--ui-cream, #fff4d8); outline-offset: 4px; }
#finish-overlay button:active { translate: 0 2px; }
#finish-overlay #fin-restart { color: #142c39; background: linear-gradient(130deg, #8cffe0, #59edbd); border-color: #b9ffe1; box-shadow: inset 0 2px 0 #effff080, 0 4px 0 #177e7c; }
#finish-overlay #fin-restart:hover { background: #b0ffe0; border-color: #edfff4; }
#finish-overlay #fin-again { margin: 15px 0 0; text-align: center; color: #b9bed6; font: 11px/1.4 var(--ui-font, "Bahnschrift", sans-serif); }
#finish-overlay #fin-again span { padding: 0 8px; color: #797f9d; }
#finish-overlay #fin-again kbd { font: 600 10px var(--ui-font, "Bahnschrift", sans-serif); padding: 2px 5px; margin-right: 3px; border: 1px solid #626e8d; border-radius: 4px; background: #303a56; color: var(--ui-cream, #fff4d8); }

@media (max-width: 520px) {
  #finish-overlay { padding: 12px; }
  #finish-overlay #fin-box { max-height: calc(100dvh - 24px); border-width: 3px; border-radius: 23px; }
  #finish-overlay .fin-header { padding: 19px 17px 16px; gap: 11px; }
  #finish-overlay .fin-mark { width: 39px; height: 39px; }
  #finish-overlay .fin-eyebrow { font-size: 8px; }
  #finish-overlay #fin-title { font-size: 40px; }
  #finish-overlay #fin-track { font-size: 10px; }
  #finish-overlay #fin-player { font-size: 17px; }
  #finish-overlay .fin-content { padding: 17px; }
  #finish-overlay .fin-verdict-row { display: block; margin-bottom: 17px; }
  #finish-overlay #fin-verdict { font-size: 20px; }
  #finish-overlay #fin-bonus { display: inline-block; margin-top: 9px; font-size: 9px; }
  #finish-overlay .fin-stats { gap: 9px; }
  #finish-overlay .fin-stat { padding: 12px; border-radius: 12px; }
  #finish-overlay .fin-stat dt { font-size: 9px; }
  #finish-overlay .fin-stat dd { font-size: 33px; }
  #finish-overlay .fin-footer { padding: 17px; }
  #finish-overlay .fin-actions { grid-template-columns: 1fr; gap: 11px; }
  #finish-overlay #fin-restart { grid-row: 1; }
  #finish-overlay button { min-height: 46px; padding: 10px 14px; font-size: 17px; }
  #finish-overlay #fin-again { font-size: 10px; }
  #finish-overlay #fin-board .fb-row { grid-template-columns: 18px minmax(0, 1fr) 54px 57px; gap: 6px; padding: 9px; font-size: 11px; }
}
@media (max-height: 600px) and (min-width: 521px) {
  #finish-overlay { padding: 12px; }
  #finish-overlay #fin-box { max-height: calc(100dvh - 24px); }
  #finish-overlay .fin-header { padding: 14px 23px; }
  #finish-overlay #fin-title { font-size: 38px; }
  #finish-overlay .fin-content { padding: 15px 23px; }
  #finish-overlay .fin-stat { padding: 11px 16px; }
  #finish-overlay .fin-stat dd { font-size: 31px; }
  #finish-overlay .fin-footer { padding: 14px 23px; }
}

/* Final standings after the last run of a round (src/leaderboard.js). The
   per-run stats step aside so the table is the whole card. */
#finish-overlay #fin-box.fin-final { width: min(860px, 100%); }
#finish-overlay #fin-box.fin-final .fin-stats,
#finish-overlay #fin-box.fin-final #fin-extra,
#finish-overlay #fin-box.fin-final #fin-record,
#finish-overlay #fin-box.fin-final #fin-bonus { display: none !important; }
#finish-overlay #fin-board .lb-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) 58px 76px 72px 104px;
  padding: 11px 14px; background: #2c334c; border-bottom: 1px solid #515672;
  border-left: 5px solid #8fbaf2;
}
#finish-overlay #fin-board .lb-head {
  background: #1d2238; border-left-color: transparent; color: var(--ui-muted, #b7bad5);
  font-size: 10px; letter-spacing: .12em; padding-top: 8px; padding-bottom: 8px;
}
#finish-overlay #fin-board .lb-row > :nth-child(n+3) { text-align: right; }
#finish-overlay #fin-board .lb-row.win { background: #3b4956; }
#finish-overlay #fin-board .lb-row.win .lb-rank { color: #ffd24a; }
#finish-overlay #fin-board .lb-rank { font: 22px/1 var(--ui-display, Impact, sans-serif); }
#finish-overlay #fin-board .lb-name { overflow-wrap: anywhere; font: 19px/1.1 var(--ui-display, Impact, sans-serif); }
#finish-overlay #fin-board .lb-badge {
  display: inline-block; margin: 4px 0 0 8px; padding: 3px 7px; border-radius: 6px;
  font: 700 9px/1.2 var(--ui-font, "Bahnschrift", sans-serif); letter-spacing: .08em; vertical-align: middle;
}
#finish-overlay #fin-board .lb-badge.fast { color: #142c39; background: var(--ui-mint, #64ffca); }
#finish-overlay #fin-board .lb-badge.slow { color: #fff4d8; background: #b8453a; }
#finish-overlay #fin-board .lb-mult { color: #ffd24a; }
#finish-overlay #fin-board .lb-give { color: var(--ui-mint, #64ffca); font: 21px/1 var(--ui-display, Impact, sans-serif); }
#finish-overlay #fin-board .lb-rules {
  margin: 0; padding: 12px 16px 12px 30px; background: #1b2039; color: #c6c7db;
  font: 600 11px/1.6 var(--ui-font, "Bahnschrift", sans-serif); letter-spacing: .02em;
}
@media (max-width: 620px) {
  #finish-overlay #fin-board .lb-row { grid-template-columns: 24px minmax(0, 1fr) 44px 58px 76px; gap: 6px; padding: 9px; }
  #finish-overlay #fin-board .lb-row .lb-time,
  #finish-overlay #fin-board .lb-head > :nth-child(5) { display: none; }
  #finish-overlay #fin-board .lb-name { font-size: 15px; }
  #finish-overlay #fin-board .lb-give { font-size: 16px; }
}
#finish-overlay #fin-online { display: inline-block; margin: 16px 0 0 8px; padding: 8px 12px; border: 1px solid #4fb89a; border-radius: 9px; color: #b9ffe9; background: #64ffca1c; font: 15px/1.2 var(--ui-display, Impact, sans-serif); letter-spacing: .06em; }
#finish-overlay #fin-online.hidden { display: none; }