/* Native dialog lives independently of the game/modal renderer. */
.appearance-dialog{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:25px;padding:16px;width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);box-shadow:0 18px 80px #0005;overflow:hidden}
.appearance-dialog[open]{display:flex;flex-direction:column;gap:12px}
.appearance-dialog::backdrop{background:#13231dcc}
.appearance-head{display:flex;align-items:center;gap:12px;flex:none}
.appearance-head h2{margin:0;font-size:20px;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.appearance-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 3px 6px}
.appearance-dialog .field{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.appearance-dialog :is(input[type=text],select){width:100%;min-height:44px;padding:9px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--white);box-shadow:none}
.appearance-dialog .icon-btn{width:44px;height:44px;min-width:44px}
.appearance-dialog :is(button,input,select,summary):focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.appearance-dialog :is(button,input,select,summary){touch-action:manipulation}
.appearance-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.appearance-actions .btn{padding:10px 14px}
.appearance-palette-group{border:0;padding:0;margin:12px 0 18px;min-width:0}
.appearance-palette-group legend{font-weight:700;font-size:13px;margin-bottom:7px}
:where(:root[data-ui-compact="true"]) .appearance-palette-grid{grid-template-columns:minmax(0,1fr)}:where(:root[data-ui-compact="true"]) .appearance-head h2{font-size:18px}

/* The same picker is available inside Settings when the table toolbar is full. */

/* Canonical component samples, wrapping without changing game geometry. */
.appearance-skin-row{display:flex;flex-wrap:wrap;gap:12px;padding:4px}
.appearance-skin-choice{display:grid;place-items:center;padding:5px;border:2px solid transparent;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;box-shadow:none;min-width:56px;min-height:56px}
.appearance-skin-choice[aria-pressed=true]{border-color:var(--green);background:var(--color-surface-panel)}
.appearance-skin-art{display:block;width:64px;aspect-ratio:var(--sample-ratio);pointer-events:none}
.appearance-skin-art>svg{display:block;width:100%;height:100%}

.appearance-skin-choice{align-content:start;gap:5px}

#skin-preferences>h3{font-size:15px;margin:14px 0 8px}

.appearance-skin-art[data-preview-family=card-face]{color:var(--color-material-card-ink,#264e43)}

.appearance-skin-row[data-skin-group]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:8px}
.appearance-skin-row[data-skin-group] .appearance-skin-choice{min-width:0;width:100%}
.appearance-skin-art{max-width:100%}

.appearance-confirm-actions{flex-wrap:nowrap;justify-content:flex-end}.appearance-confirm-actions>.btn{flex:1;min-width:0}



.appearance-dialog>.appearance-confirm-actions{flex:none;margin:0;padding:4px 3px 6px;}
.appearance-dialog>.appearance-confirm-actions .btn{flex:1;}

@media(max-height:450px){.appearance-dialog[open]{gap:8px;}.appearance-overview>.appearance-palette-group{margin:0;}.appearance-dialog .appearance-hint{margin:6px 0;}}


.settings-skins{grid-column:1/-1;min-width:0}
.settings-skins>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.settings-skins>header h3{font-size:15px;margin:12px 0}