/* Small-screen navigation and readable rankings. */
.ranking-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ranking-scroll:focus-visible { outline: 2px solid #d0b37e; outline-offset: 3px; }
.ranking-scroll #highscoresTable { min-width: 560px; margin: 0; }
.ranking-scroll #highscoresTable a { overflow-wrap: normal; }
.ranking-scroll #highscoresTable td { white-space: nowrap; }
.ranking-scroll #highscoresTable td a { white-space: normal; display: inline-block; min-width: 110px; }
.ranking-scroll-hint { display: none; color: #aebdca; font-size: 12px; }
@media (max-width: 700px) {
  .header-inner { gap: 8px; padding: 10px 12px; }
  .brand { min-width: 0; flex-shrink: 1; gap: 6px; }
  .brand strong { font-size: clamp(19px, 5.5vw, 26px); letter-spacing: 0; }
  .brand-rune { width: 26px; height: 26px; }
  .header-account { padding: 8px; font-size: 10px; flex-shrink: 0; }
  .mobile-menu { flex-shrink: 0; }
  .mobile-menu summary { display: flex; align-items: center; gap: 5px; padding: 10px 7px; min-height: 44px; }
  .mobile-menu summary span { margin-left: 0; }
  .mobile-menu nav { right: 12px; max-width: calc(100vw - 24px); }
  .ranking-scroll-hint { display: block; }
}
@media (max-width: 380px) {
  .brand-rune { display: none; }
  .brand strong { font-size: 20px; }
  .header-inner { gap: 6px; padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .left-sidebar { grid-row: 2; }
  .leftPane { grid-column: 1; grid-row: 1; }
  .rightPane { grid-column: 2; grid-row: 1; }
}