/* Settings tabs sound / picture / keys + corner mute button (roadmap item 81, src/settings-ui.js). */
#settings-dialog .settings-options{overflow:visible}
.settings-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:6px;border-bottom:1px solid #e0ccb0;background:#f1e1c7}
.settings-tab{min-height:38px;border:1px solid transparent;border-radius:8px;background:transparent;color:#7a634a;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.settings-tab[aria-selected=true]{background:#fffaf0;border-color:#d1b591;color:#4f3e2f;box-shadow:0 1px 0 #c9ad86}
.settings-tab:focus-visible,.keybind-slot:focus-visible,.settings-choice button:focus-visible{outline:2px solid #5f7c50;outline-offset:2px}
.settings-panel[hidden],.settings-common[hidden]{display:none}
.settings-panel>.settings-row+.settings-row,.settings-common>.settings-row+.settings-row{border-top:1px solid #e0ccb0}
.settings-common{border-top:2px solid #e0ccb0}
.settings-volume{display:flex;align-items:center;gap:8px;min-width:0}
.settings-volume input[type=range]{width:min(180px,34vw);accent-color:#627c57;margin:0}
.settings-volume output{min-width:42px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.settings-choice{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.settings-row .settings-choice button{min-height:36px;padding:7px 10px}
.settings-row button[aria-pressed=true]{background:#627c57;color:#fff9e9;border-color:#536b48}
.settings-mode-row{flex-wrap:wrap}.settings-mode-row>span{flex:1 1 100%}.settings-mode-row .settings-choice{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,1fr);justify-content:stretch}
.settings-density{font-variant-numeric:tabular-nums}
/* keys */
.settings-panel[data-settings-panel=keys]{padding:10px 12px 12px}
.keybind-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin-bottom:8px}
.keybind-note{margin:0;font-size:12px;color:#7d6850}
.keybind-status{margin:0;font-size:12px;color:#5d7a4f;min-height:1em;flex:1 1 auto}
.keybind-status.bad{color:#a34a2c}
.keybind-reset-all,.keybind-reset,.keybind-prompt button{border:1px solid #bea383;border-radius:8px;background:#f7ebd6;color:#64503c;font:inherit;font-size:12px;padding:6px 10px;min-height:32px;cursor:pointer}
.keybind-reset:disabled{opacity:.35;cursor:default}
.keybind-prompt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;padding:9px 11px;border:1px solid #c7a978;border-radius:10px;background:#fff4dc;font-size:13px}
.keybind-prompt[hidden]{display:none}
.keybind-prompt small{color:#86704f}
.keybind-prompt .keybind-yes{background:#627c57;color:#fff9e9;border-color:#536b48}
.keybind-group h3{margin:10px 0 4px;font-size:13px;color:#8a6c46}
.keybind-row{display:grid;grid-template-columns:minmax(0,1fr) 78px 78px auto;align-items:center;gap:6px;padding:4px 0}
.keybind-row+.keybind-row{border-top:1px dashed #e4d2b7}
.keybind-name{font-size:13px;min-width:0;overflow-wrap:anywhere}
.keybind-slot{min-height:34px;border:1px solid #bea383;border-radius:7px;background:#fffaf0;color:#4f3e2f;font:inherit;font-size:12px;font-weight:700;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.keybind-slot.empty{color:#b3a088;font-weight:400}
.keybind-slot.capturing{background:#fff1c9;border-color:#c99b3f;color:#7a5418;animation:keybind-wait 1s ease-in-out infinite alternate}
@keyframes keybind-wait{to{box-shadow:0 0 0 3px #e7c37a80}}
@media(max-width:480px){.keybind-row{grid-template-columns:minmax(0,1fr) 64px 64px auto;gap:4px}.keybind-reset{padding:5px 6px}.settings-volume input[type=range]{width:min(130px,30vw)}}
@media(prefers-reduced-motion:reduce){.keybind-slot.capturing{animation:none}}
/* corner mute button (ถาม 76) */
#game .hud-mute{position:absolute;z-index:31;top:12px;right:250px;width:40px;height:40px;padding:0;display:grid;place-items:center;border:2px solid #d9c49c;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3c5a50,#22362f);color:#f7ecd2;box-shadow:0 3px 10px #0007;cursor:pointer;touch-action:manipulation}
#game .hud-mute svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#game .hud-mute[aria-pressed=false]{color:#f1b7a3;border-color:#c99a86}
#game .hud-mute:focus-visible{outline:2px solid #fff3c8;outline-offset:2px}