/* Calmer header: icon-only audio, equal 40px icon buttons, inline player count. */
.header .sr-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#audio-toggle{min-width:0;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:0}
#audio-toggle[aria-pressed="true"]{background:transparent;color:var(--text);border-color:var(--line,#314056)}
#audio-toggle[aria-pressed="false"]{color:var(--muted)}
#audio-toggle[aria-pressed="true"] .audio-mute,#audio-toggle[aria-pressed="false"] .audio-waves{display:none}
@media(max-width:600px){
  .header{padding-inline:12px;gap:8px}
  .header-actions{gap:2px;flex:none}
  /* 44px tap targets, but no box: the icons read as quiet controls, not three buttons. */
  .header .header-actions .icon-btn,.header #settings,.header #audio-toggle,.header #club-menu{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-color:transparent;background:transparent}
  .header .header-actions .icon-btn:focus-visible,.header #club-menu:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .header-actions .icon-btn svg{width:20px;height:20px}
  /* Hamburger alone on phones; the label stays for screen readers via aria-label. */
  #club-menu .menu-label{display:none}
  .header .brand{margin-right:auto;min-width:0}
  /* Player count sits inline as quiet text, not a tab over the logo. */
  .header button.players-online{position:static;transform:none;height:44px;min-height:44px;min-width:44px;justify-content:center;padding:0 4px;border:0;background:none;font-size:12px;gap:5px;pointer-events:auto}
  .players-online [data-online-word] .online-long{display:none}
}
@media(max-width:360px){.players-online [data-online-word]{display:none}.header{gap:6px;padding-inline:10px}.header-actions{gap:0}}