/* Native controls: one size, a green face and a fine gold rim. */
.game-header .controls {
  gap: 8px; flex-wrap: wrap; justify-content: center;
}
.game-header .controls .draw-toggle {
  display: flex; gap: 8px; border: 0; border-radius: 0;
  background: transparent; overflow: visible;
}
.game-header .controls button,
.mahjong-live .toolbar button,
#sudoku-game .tools button,
#sudoku-game .new-game,
#btn-autoplay.autoplay-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; height: 42px; min-height: 42px; padding: 0 14px;
  border: 1px solid #c5a65a; border-radius: 999px;
  background: linear-gradient(180deg, #246347 0%, #174c35 100%);
  color: #fff0c5; font: 600 13px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: .05px; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff18, 0 2px 3px #001e1840;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
  filter: none; opacity: 1;
}
.game-header .controls button { width: 108px; min-width: 108px; flex: 0 0 108px; }
.game-header .controls .control-label { display: inline; }
.game-header .controls .control-icon,
#btn-autoplay .control-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.game-header .controls button:hover,
.mahjong-live .toolbar button:not(:disabled):hover,
#sudoku-game .tools button:not(:disabled):hover,
#sudoku-game .new-game:hover {
  background: linear-gradient(180deg, #307858, #205e42);
  border-color: #efd48b; box-shadow: inset 0 1px 0 #ffffff24, 0 3px 8px #001e1840;
  transform: translateY(-1px);
}
.game-header .controls button:active,
.mahjong-live .toolbar button:not(:disabled):active,
#sudoku-game .tools button:not(:disabled):active,
#btn-autoplay.autoplay-button:active {
  transform: translateY(1px); box-shadow: inset 0 1px 4px #001e1838;
}
.game-header .controls button:focus-visible,
.mahjong-live .toolbar button:focus-visible,
#sudoku-game .tools button:focus-visible,
#btn-autoplay.autoplay-button:focus-visible {
  outline: 2px solid #fff0b6; outline-offset: 3px;
}
.game-header .controls .toggle-btn.active,
#sudoku-game .tools #notes[aria-pressed="true"] {
  background: linear-gradient(180deg, #397d58, #235d3e);
  border-color: #ffe09a; box-shadow: inset 0 0 0 1px #ffe09a, inset 0 1px 0 #ffffff20, 0 2px 3px #001e1840;
  color: #fff4d0;
}
.game-header .controls .muted { color: #c9cfb2; background: #173d2c; border-color: #938450; }
.game-control .sound-slash { display: none; }
.game-control.muted .sound-slash { display: block; }
.game-control.muted .sound-waves { display: none; }
.game-header .controls button:disabled,
.mahjong-live .toolbar button:disabled,
#sudoku-game .tools button:disabled { opacity: .45; cursor: default; transform: none; }
#btn-autoplay.autoplay-button {
  min-width: 108px; background: linear-gradient(180deg, #ffe6a0, #ecc764);
  color: #263d2b; border-color: #ffe8ac; font-weight: 750;
  box-shadow: inset 0 1px 0 #fff8de, 0 2px 4px #001e1840;
}
#btn-autoplay.autoplay-button:hover {
  background: linear-gradient(180deg, #fff0bc, #f4d47d); border-color: #fff2c9;
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px #e5ba4d26; transform: translateY(-1px);
}
#btn-autoplay.autoplay-button[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffedb2, #f0d27a); border-color: #fff3ce;
}
@media (max-width: 1180px) {
  .game-header .controls { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 760px) {
  .game-header .controls, .game-header .controls.compact {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%; gap: 6px; margin: 2px 0;
  }
  .game-header .controls .draw-toggle { display: contents; }
  .game-header .controls button, .game-header .controls #btn-autoplay.autoplay-button {
    width: 100%; min-width: 0; height: 38px; min-height: 38px;
    padding: 0 8px; gap: 5px; font-size: 12px;
  }
  .game-header .controls.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game-header .controls .control-icon { width: 15px; height: 15px; flex-basis: 15px; }
  .mahjong-live .toolbar button, #sudoku-game .tools button,
  #sudoku-game .tools #btn-autoplay.autoplay-button {
    height: 40px; min-height: 40px; padding: 0 7px; font-size: 11px;
  }
  #sudoku-game .tools button { flex-direction: column; gap: 2px; }
  #sudoku-game .tools #btn-autoplay.autoplay-button { flex-direction: row; gap: 7px; }
}
@media (max-width: 360px) {
  .game-header .controls button, .game-header .controls #btn-autoplay.autoplay-button {
    font-size: 11px; padding: 0 5px; gap: 4px;
  }
  .game-header .controls.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-header .controls .control-icon { width: 14px; height: 14px; flex-basis: 14px; }
  .mahjong-live .new-controls #btn-autoplay.autoplay-button { min-width: 92px; padding: 0 7px; gap: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-header .controls button, .mahjong-live .toolbar button,
  #sudoku-game .tools button, #btn-autoplay.autoplay-button { transition: none; }
}
#btn-autoplay .control-icon { fill: currentColor; stroke: none; }
@media (max-width: 760px) {
  .mahjong-live .toolbar #btn-autoplay.autoplay-button { height: 40px; min-height: 40px; }
  .mahjong-live .toolbar .control-icon { width: 16px; height: 16px; flex: 0 0 16px; }
}
@media (max-width: 360px) {
  .mahjong-live .toolbar .tools button { padding: 0 5px; gap: 4px; }
  .mahjong-live .toolbar .tools .control-label { font-size: 10px; }
}
@media (max-width: 760px) {
  .game-header .controls.compact button,
  .game-header .controls.compact #btn-autoplay.autoplay-button {
    padding: 0 5px; gap: 4px; font-size: 11px;
  }
}
@media (min-width: 761px) {
  html[lang^="de"] .game-header .controls button,
  html[lang^="de"] .game-header .controls #btn-autoplay.autoplay-button {
    padding: 0 6px; gap: 5px; font-size: 12px;
  }
}