/* Keep the controls inside the visible page, including an auto-height iframe. */
dialog.appearance-dialog{--settings-padding:20px;--settings-title-size:27px;--settings-control-height:44px;--settings-gap:14px;--settings-thumb:64px;box-sizing:border-box;width:min(720px,calc(var(--settings-visible-width,100vw) - 24px));max-width:calc(var(--settings-visible-width,100vw) - 24px);height:min(480px,calc(var(--settings-visible-height,100dvh) - 24px));max-height:calc(var(--settings-visible-height,100dvh) - 24px);padding:var(--settings-padding);overflow:hidden;font-size:17px;line-height:1.45;margin:auto}
dialog.appearance-dialog[open]{display:flex}
.appearance-dialog #modal-content{display:flex;flex:1;min-width:0;min-height:0;width:100%}
.appearance-dialog .compact-settings{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.appearance-dialog #close-modal{display:none}
.settings-heading{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--settings-gap);min-width:0}
.settings-heading h2{margin:0;min-width:0;font-size:var(--settings-title-size);line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.settings-close{display:grid;place-items:center;width:var(--settings-control-height);height:var(--settings-control-height);flex:0 0 var(--settings-control-height);padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:31px;line-height:1}
.settings-tabs{display:grid;flex:0 0 auto;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px;min-width:0}
.settings-tabs button{min-height:var(--settings-control-height);min-width:0;padding:7px 5px;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{flex:1 1 auto;min-width:0;min-height:0;padding:var(--settings-gap) 6px 6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.settings-panels [role=tabpanel]{min-width:0;min-height:0}
.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 14px;min-height:var(--settings-control-height);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:var(--settings-control-height);padding:8px 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:var(--settings-control-height);padding:7px 18px;font-size:17px}
.appearance-dialog .settings-auditions{display:inline-flex;align-items:center;gap:6px;min-height:var(--settings-control-height);padding:7px 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;min-width:0;max-width:100%}
.appearance-dialog .appearance-option[aria-pressed=true]{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.appearance-dialog .appearance-option strong{font-size:16px;line-height:1.25;margin-top:7px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.appearance-dialog .board-choices .appearance-option{display:grid;grid-template-columns:var(--settings-thumb) minmax(0,1fr);align-items:center;gap:9px;text-align:start}
.appearance-dialog .board-choices .appearance-option strong{margin:0}
.appearance-dialog .board-swatch{width:var(--settings-thumb);height:var(--settings-thumb);aspect-ratio:1;max-height:none;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));border-radius:4px}
.appearance-dialog .board-swatch i{background:var(--swatch-light);min-width:0;min-height:0}
.appearance-dialog .board-swatch i[data-dark]{background:var(--swatch-dark)}
.appearance-dialog .piece-swatch{aspect-ratio:1.35;max-height:105px}
.appearance-dialog .settings-footer{flex:0 0 auto;min-width:0;max-width:none;font-size:15px;line-height:1.35;margin:var(--settings-gap) 0 0;padding:10px 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 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:var(--settings-control-height);max-width:180px;padding:5px 8px;text-decoration:underline;white-space:normal}
@media(max-width:560px){dialog.appearance-dialog{--settings-padding:16px;--settings-title-size:23px;--settings-gap:12px;--settings-thumb:56px;height:min(560px,calc(var(--settings-visible-height,100dvh) - 24px))}.settings-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.settings-tabs button:last-child{grid-column:span 2}.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-choices .appearance-option{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:7px 4px;text-align:center}.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:120px}.appearance-dialog .sound-level{gap:8px;flex-wrap:wrap}.appearance-dialog .sound-level label{font-size:16px;flex-basis:100%}}
/* Use the parent's visible height rather than the iframe's media-query height. */
dialog.appearance-dialog[data-settings-compact=true]{--settings-padding:12px;--settings-title-size:23px;--settings-control-height:38px;--settings-gap:8px;--settings-thumb:48px}
.appearance-dialog[data-settings-compact=true] .settings-tabs{padding-bottom:7px}
.appearance-dialog[data-settings-compact=true] .settings-tabs button{padding:5px 3px;font-size:15px}
.appearance-dialog[data-settings-compact=true] .gameplay-switch{margin-bottom:8px;font-size:16px}
.appearance-dialog[data-settings-compact=true] .settings-help{margin-top:10px;font-size:15px;line-height:1.4}
.appearance-dialog[data-settings-compact=true] .settings-footer{padding-top:8px;font-size:14px}
.appearance-dialog[data-settings-compact=true] .settings-autosave{display:none}
.appearance-dialog[data-settings-compact=true] .settings-footer #reset-appearance{grid-row:1;font-size:14px}
.appearance-dialog[data-settings-compact=true] .piece-swatch{aspect-ratio:2.9;max-height:55px}
.privacy-settings .switch-track{direction:ltr}