/* scrollerderby shared game chrome.
   Link AFTER the game's inline <style> so these rules override.
   Restyles page chrome only (back, mute, rules, share, volume). Canvas untouched. */

#back, #mute, #rules, #music, #night, #chill, #share {
  -webkit-appearance: none;
  appearance: none;
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(243,234,216,0.85);
  background: rgba(243,234,216,0.05);
  border: 1px solid rgba(243,234,216,0.22);
  border-radius: 6px;
  padding: 6px 12px;
  line-height: 1;
}
#back { text-decoration: none; }
#mute, #rules, #music, #night, #chill, #share { cursor: pointer; }
#back:hover, #back:focus-visible,
#mute:hover, #mute:focus-visible,
#rules:hover, #rules:focus-visible,
#music:hover, #music:focus-visible,
#night:hover, #night:focus-visible,
#chill:hover, #chill:focus-visible,
#share:hover, #share:focus-visible {
  color: #f3ead8;
  border-color: rgba(243,234,216,0.5);
  background: rgba(243,234,216,0.1);
  outline: none;
}

/* music, night mode, chill mode (spades, mahjong): lit while on */
#music.on, #night.on, #chill.on { color: #ffd98a; border-color: rgba(201,151,63,0.7); background: rgba(201,151,63,0.1); }

/* night (spades, mahjong): a warm multiply tint over the whole page, injected by chill.js.
   Whites go parchment, the felt loses its blue, dark ink stays dark. Sits over everything, passes taps through. */
#sdNight { position: fixed; inset: 0; z-index: 11; pointer-events: none; background: #f0d9bb; mix-blend-mode: multiply; display: none; }
#sdNight.on { display: block; }

/* volume slider (injected by chrome.js, sits left of the mute button) */
#vol {
  position: fixed;
  z-index: 2;
  width: 70px;
  height: 18px;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  opacity: 0.45;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
#vol:hover, #vol:active, #vol:focus-visible { opacity: 1; outline: none; }
#vol::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(243,234,216,0.3);
  border-radius: 1px;
}
#vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3ead8;
  margin-top: -5px;
  border: none;
}
#vol::-moz-range-track {
  height: 2px;
  background: rgba(243,234,216,0.3);
  border-radius: 1px;
}
#vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3ead8;
  border: none;
}

/* phones have hardware volume; keep the chrome quiet */
@media (max-width: 640px) {
  #vol { display: none; }
}

/* share toast (injected by chrome.js on clipboard fallback) */
#sdToast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(243,234,216,0.9);
  background: rgba(20,16,11,0.92);
  border: 1px solid rgba(243,234,216,0.22);
  border-radius: 6px;
  padding: 8px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 6;
}
#sdToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }