/* Shared by the two map pages, /map (index2.html) and /play (play2.html): the view
   switcher and the sound button. Each page used to carry its own copy. */
#mapmode a, #mapmode button{ white-space:nowrap; }
#mapmode{ position:fixed; left:14px; bottom:14px; z-index:21; display:flex; gap:4px; background:rgba(11,15,27,.78); border:1px solid rgba(var(--gold-rgb),.25); border-radius:999px; padding:5px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#mapmode button.active{ background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); color:var(--gold-ink); }
.audio-toggle{ position:fixed; right:16px; bottom:16px; z-index:120; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:11px; cursor:pointer; border:1px solid rgba(255,255,255,.14); background:rgba(12,14,30,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .15s, opacity .15s; }
.audio-toggle svg{ width:18px; height:18px; fill:none; stroke:#c9c2b4; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.audio-toggle:hover{ border-color:rgba(var(--gold-rgb),.5); }
.audio-toggle:hover svg{ stroke:var(--gold-hi); }
.audio-toggle.off{ opacity:.55; }
.audio-toggle.off svg{ stroke:#8f8b7f; }
@media (max-width:760px){ .audio-toggle{ right:12px; bottom:calc(var(--bnav-h,0px) + 14px); } }

/* the map theme picker, the last pill of the mode bar */
#mapmode .mm-theme{ appearance:none; -webkit-appearance:none; background:transparent; color:var(--gold-hi);
  border:0; border-left:1px solid rgba(255,255,255,.12); border-radius:0; margin-left:2px;
  padding:7px 22px 7px 11px; font:600 12px/1.2 inherit; font-family:inherit; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-hi) 50%),linear-gradient(135deg,var(--gold-hi) 50%,transparent 50%);
  background-position:calc(100% - 11px) 52%,calc(100% - 7px) 52%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
#mapmode .mm-theme:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; border-radius:8px; }
#mapmode .mm-theme option{ background:#0b0f1b; color:#efe6cf; }
/* a narrow phone: the picker shrinks, and the rules link (the bottom bar has
   "Regulament" too) gives way so the bar keeps inside the screen */
@media (max-width:420px){
  #mapmode .mm-theme{ max-width:150px; text-overflow:ellipsis; font-size:12px; padding:7px 18px 7px 8px; }
  #mapmode a[href="/reguli"]{ display:none !important; }
}

/* phones: the view switch, the map-theme picker and "reset view" are what a
   thumb uses on the map, 44px tall (they were 34-37px) */
@media (max-width:760px) and (pointer:coarse){
  body:not(.in-match) #mapmode button, body:not(.in-match) #mapmode .mm-theme,
  #hud-drawer #mapmode button, #hud-drawer #mapmode .mm-theme{ min-height:44px; }
  .globe-app .dock #reset{ min-width:44px; min-height:44px; }
}