/* Compact tabbed settings. The native dialog keeps Escape and focus containment. */
dialog.appearance-dialog{width:min(740px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px 24px;overflow:visible;font-size:17px;line-height:1.45;margin:auto}
.appearance-dialog #modal-content{min-width:0}
.appearance-dialog #close-modal{display:none}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.settings-heading h2{margin:0;font-size:27px;line-height:1.2;font-weight:700}
.settings-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:31px;line-height:1}
.settings-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-bottom:1px solid var(--line);padding-bottom:12px}
.settings-tabs button{min-height:44px;min-width:0;padding:8px 6px;font-size:16px;font-weight:600;border:1px solid var(--line);border-radius:7px;background:var(--bg);overflow-wrap:anywhere}
.settings-tabs button[aria-selected=true]{background:var(--lime);border-color:var(--lime);color:#21252b}
.settings-panels{padding-top:18px}
.settings-panels [role=tabpanel]{min-height:230px}
.appearance-dialog .appearance-group{border:0;padding:0;margin:0;min-width:0}
.appearance-dialog .appearance-group>legend{display:none}
.appearance-dialog .gameplay-switch{margin:0 0 18px;font-size:18px}
.appearance-dialog .premove-mode-label{display:block;margin:0 0 7px;font-size:17px}
.appearance-dialog #premove-mode{width:100%;margin:0;font-size:17px;min-height:44px;padding:9px 12px}
.appearance-dialog .settings-help{margin:15px 0 0;font-size:16px;line-height:1.5;max-width:64ch}
.appearance-dialog .sound-level{margin:0;gap:12px}
.appearance-dialog .sound-level label,.appearance-dialog .sound-level output{font-size:17px}
.appearance-dialog #test-sound{width:auto;min-height:44px;padding:8px 18px;font-size:17px}
.appearance-dialog .settings-auditions{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 0;font-size:16px;text-decoration:underline;margin-inline-start:15px}
.appearance-dialog .board-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.appearance-dialog .piece-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.appearance-dialog .appearance-option{padding:8px;border-radius:8px}
.appearance-dialog .appearance-option strong{font-size:16px;line-height:1.25;margin-top:7px;font-weight:600}
.appearance-dialog .board-swatch{aspect-ratio:3.2;border-radius:4px;max-height:58px}
.appearance-dialog .piece-swatch{aspect-ratio:1.35;max-height:105px}
.appearance-dialog .settings-footer{font-size:15px;line-height:1.35;margin-top:15px;padding-top:14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px}
.appearance-dialog #appearance-status{overflow-wrap:anywhere;color:var(--ink)}
.appearance-dialog .settings-autosave{grid-column:1;color:var(--muted)}
.appearance-dialog .settings-footer #reset-appearance{grid-column:2;grid-row:1/span 2;font-size:15px;min-height:44px;padding:5px 8px;text-decoration:underline}
@media(max-width:560px){dialog.appearance-dialog{padding:16px}.settings-heading{margin-bottom:12px}.settings-heading h2{font-size:23px}.settings-panels{padding-top:15px}.settings-panels [role=tabpanel]{min-height:245px}.settings-tabs{gap:4px;padding-bottom:10px}.settings-tabs button{font-size:15px;padding:7px 3px}.appearance-dialog .piece-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.appearance-dialog .piece-swatch{aspect-ratio:2.9;max-height:63px}.appearance-dialog .appearance-option strong{font-size:15px}.appearance-dialog .board-choices{gap:7px}.appearance-dialog .board-swatch{aspect-ratio:2;max-height:52px}.appearance-dialog .settings-auditions{margin-inline-start:0;display:flex}.appearance-dialog .settings-help{font-size:15px;line-height:1.45}.appearance-dialog .settings-footer{font-size:14px}.appearance-dialog .settings-footer #reset-appearance{font-size:14px;max-width:136px}.appearance-dialog .sound-level{gap:8px}.appearance-dialog .sound-level label{font-size:16px}}
/* Landscape phones and high browser zoom: natural page scrolling keeps every control reachable. */
@media(max-height:520px){dialog.appearance-dialog{max-height:none;position:absolute;inset-block-start:12px;inset-block-end:auto;margin:0 auto;padding:12px 18px}.settings-heading{margin-bottom:8px}.settings-heading h2{font-size:22px}.settings-panels{padding-top:10px}.settings-panels [role=tabpanel]{min-height:0}.appearance-dialog .settings-help{margin-top:10px;font-size:15px}.appearance-dialog .settings-footer{margin-top:10px;padding-top:10px}.appearance-dialog .gameplay-switch{margin-bottom:10px}.settings-tabs{padding-bottom:8px}.appearance-dialog .piece-swatch{aspect-ratio:3;max-height:65px}}