/* A single, keyboard-accessible row stays at the map's bottom at every size. */
.board .map-legend {
  top: auto; bottom: 26px; left: 12px; right: 12px;
  display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  padding: 6px; pointer-events: auto; border-radius: 28px;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.map-legend button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface);
  color: var(--text); font: inherit; font-size: 16px; line-height: 1.25;
  cursor: pointer;
}
.map-legend button i { flex: 0 0 12px; height: 12px; }
.map-legend button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.map-legend button[aria-pressed="true"]::after { content: '✓'; }
.map-legend button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.board .map-count { top: 12px; bottom: auto; left: 72px; right: 12px; text-align: right; pointer-events: none; }
.board .map-count span { font-size: 15px; line-height: 1.4; background: var(--surface); }
.board .map-hint { top: 62px; bottom: auto; left: 72px; right: 12px; }
.board .map-hint span { font-size: 14px; line-height: 1.4; background: var(--surface); }
@media (max-width: 899px) {
  .board .board-map { height: 420px; }
  .board .map-hint { text-align: right; }
}