.masthead nav button { background: none; border: 0; padding: 10px 0; color: #726877; }
.board-button { background: #eee7f3; color: #72538c; border: 1px solid #d8cbe2; border-radius: 5px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }
.result-board { display: block; background: none; border: 0; padding: 8px 0 0; color: #f0d695; font-size: 11px; margin: 0 auto; text-decoration: underline; }
.leaderboard-dialog { width: min(790px, calc(100vw - 32px)); }
#leaderboard-intro { font-size: 12px; line-height: 1.7; color: #7e6b86; max-width: 540px; margin: 16px 0 21px; }
.board-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.board-filters button { background: #efe9f1; border: 1px solid #d8cbe1; border-radius: 7px; padding: 11px 8px; color: #735e80; font-size: 12px; font-weight: bold; }
.board-filters button small { display: block; font-size: 10px; font-weight: normal; margin-top: 4px; }
.board-filters button[aria-pressed=true] { background: #73588d; border-color: #73588d; color: #fff8e8; }
.board-subhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 23px 0 13px; }
.board-subhead strong { font: normal 20px Georgia, serif; color: #644777; }
.board-subhead span { font: 8px 'Courier New', monospace; color: #8d7b96; letter-spacing: .6px; }
.board-empty { text-align: center; background: #efe8f2; padding: 30px 16px; border: 1px dashed #cab9d7; border-radius: 8px; }
.board-empty > span { font-size: 28px; color: #a487b9; }
.board-empty h3 { font: normal 22px Georgia, serif; color: #6c507e; margin: 12px 0 9px; }
.board-empty p { font-size: 12px; line-height: 1.7; color: #8b7497; }
.board-table-wrap { max-width: 100%; overflow-x: auto; }
#leaderboard-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#leaderboard-table th { color: #95809e; font: 9px 'Courier New', monospace; text-align: left; padding: 9px 6px; border-bottom: 1px solid #d9ccdf; }
#leaderboard-table th:nth-child(1) { width: 8%; }
#leaderboard-table th:nth-child(2) { width: 35%; }
#leaderboard-table th:nth-child(3) { width: 20%; }
#leaderboard-table th:nth-child(4) { width: 16%; }
#leaderboard-table th:nth-child(5) { width: 21%; }
#leaderboard-table td { padding: 14px 6px; border-bottom: 1px solid #e4dae8; vertical-align: middle; overflow-wrap: anywhere; }
#leaderboard-table tbody tr:first-child { background: #f1e8ce; }
.rank-cell { font: 12px 'Courier New', monospace; color: #aa8ba6; }
.rank-wizard { color: #644876; font-size: 12px; }
.rank-wizard img { width: 34px; height: 34px; vertical-align: middle; margin-right: 7px; image-rendering: pixelated; }
.rank-wizard small { display: block; margin-top: 5px; color: #9b7d98; font-size: 9px; }
.rank-wizard details p { font-size: 10px; line-height: 1.6; }
.rank-score { color: #675177; font: bold 18px 'Courier New', monospace; }
.rank-difficulty,.rank-outcome { color: #897192; font-size: 10px; }
.board-note { color: #8d7a94; font-size: 10px; line-height: 1.7; margin: 16px 0 0; }
@media(max-width:580px) {
  .board-button { padding: 6px; font-size: 9px; }
  .leaderboard-dialog { padding: 17px; }
  .leaderboard-dialog .roster-heading h2 { font-size: 25px; }
  #leaderboard-intro { font-size: 11px; }
  .board-subhead strong { font-size: 18px; }
  #leaderboard-table th { font-size: 8px; padding: 7px 3px; }
  #leaderboard-table td { padding: 12px 3px; }
  .rank-wizard { font-size: 11px; }
  .rank-wizard img { display: block; margin: 0 0 5px; width: 28px; height: 28px; }
  .rank-score { font-size: 14px; }
  .rank-outcome,.rank-difficulty { font-size: 10px; }
  .rank-cell { font-size: 10px; }
  .stage.has-result .overlay-copy { padding: 10px 3%; }
  .stage.has-result .overlay h2 { font-size: 28px; }
  .stage.has-result .overlay-copy>p:not(.eyebrow) { margin: 8px 0; }
  .result-board { font-size: 10px; }
}
