/* Page chrome shares the portal theme; the arena keeps its original palette and sizing. */
.runner-page {
  color-scheme: dark;
  color: #f5f5ee;
  background: #0d1018;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.runner-page .site-header { border-color: #2a2e3b; }
.runner-page .site-header .brand {
  gap: 11px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -1px;
}
.runner-page .site-header .account-link { color: #bdff45; border-color: #49583b; text-decoration: none; }
.runner-page .runner-header-links { gap: 12px; }
.runner-page .runner-header-links .quiet-link { padding: 12px; }
.runner-page .runner-heading {
  width: min(1240px, calc(100% - 80px));
  height: auto;
  min-height: 160px;
  margin-inline: auto;
  padding: 32px 0;
  background: transparent;
  flex-wrap: wrap;
}
.runner-page .runner-game-title { gap: 18px; }
.runner-page .runner-title-icon { color: #0d1018; background: #bdff45; border: 0; }
.runner-page .runner-heading h1 { font-size: clamp(36px, 5.5vw, 64px); }
.runner-page .runner-heading h1 span { color: #bdff45; font-size: 12px; letter-spacing: .1em; margin-top: 12px; }
.runner-page .runner-heading p { color: #a4a9ba; font-size: 13px; line-height: 1.8; }
.runner-page .runner-heading p strong { color: #bdff45; font-size: 10px; }
.runner-page .runner-ranking,
.runner-page .runner-result {
  width: min(1240px, calc(100% - 80px));
  max-width: none;
  margin: 32px auto 0;
  padding: 28px;
  border: 1px solid #2a2e3b;
  border-radius: 14px;
  background: #171b26;
}
.runner-page .runner-result {
  color-scheme: dark;
  color: #edf2fa;
  border-color: #49583b;
}
#runner-game .runner-result h2 { color: #f5f5ee; }
#runner-game .runner-result p { color: #cbd6e3; font-size: 14px; line-height: 1.6; }
#runner-summary { max-width: 85ch; }
.runner-page .runner-ranking .section-kicker,
.runner-page .runner-result .section-kicker { color: #bdff45; font: 600 10px/1.5 'Courier New', monospace; letter-spacing: 1.7px; }
.runner-page .runner-ranking .section-heading { align-items: flex-start; }
.runner-page .runner-ranking .section-heading > div { min-width: 0; }
.runner-page .runner-ranking .section-heading h2 { font-size: clamp(26px, 3.2vw, 40px); overflow-wrap: anywhere; }
.runner-page .runner-ranking .section-heading button { flex-shrink: 0; min-height: 44px; color: #bdff45; font-size: 12px; }
.runner-page .runner-ranking > p,
.runner-page .runner-ranking li small { color: #a4a9ba; line-height: 1.7; }
.runner-page .runner-ranking li { border-color: #2a2e3b; }
.runner-page .runner-ranking time,
.runner-page .runner-ranking .runner-games { color: #bdff45; }
.runner-page .runner-ranking .runner-games { white-space: normal; text-align: right; }
.runner-page .runner-breakdown span {
  color: #deebf5;
  background: #1d2938;
  border-color: #40576d;
}
.runner-page .runner-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 24px; border-top: 1px solid #2a2e3b; color: #a4a9ba; font-size: 12px; }
.runner-page .runner-footer a { color: #bdff45; }
.runner-page .runner-game,
.runner-page .runner-score-dialog {
  color-scheme: light;
  color: #17231d;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.runner-page .runner-game { scroll-margin-top: 16px; }
.runner-page :is(.site-header, .runner-heading, .runner-ranking, .runner-result, .runner-footer) :focus-visible { outline-color: #bdff45; }
.runner-playing .site-header,
.runner-playing .runner-footer { display: none; }
@media (max-width: 700px) {
  .runner-page .header-inner,
  .runner-page .runner-heading,
  .runner-page .runner-ranking,
  .runner-page .runner-result,
  .runner-page .runner-footer { width: calc(100% - 32px); }
  .runner-page .runner-heading { gap: 20px; padding-block: 26px; }
  .runner-page .runner-heading p { text-align: left; max-width: none; }
  .runner-page .runner-ranking,
  .runner-page .runner-result { padding: 20px; margin-top: 24px; }
  .runner-page .runner-ranking .section-heading { flex-wrap: wrap; gap: 0; }
  .runner-page .runner-ranking .section-heading h2 { margin-bottom: 4px; }
  .runner-page .runner-ranking time { font-size: 18px; }
}

.runner-page .runner-game { grid-template-rows: auto minmax(0, 1fr) auto; }


#runner-game.game-layout #runner-jump { color: #17231d; background: #fffefa; border-color: #758097; }