.character-mask-fields { min-width: 0; margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.character-mask-fields legend { padding: 0 8px; }
.character-mask-fields select { max-width: 100%; }
.character-mask-fields .form-grid { gap: 2px 16px; }
.character-mask-fields .mask-group { margin: 6px 0 12px; color: #c6ad8b; font-size: .7rem; }
/* The preview stays in view while the fields below it scroll inside the dialog. */
.mask-stage { position: sticky; top: -28px; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 -16px 18px; padding: 12px 16px; background: #191e1b; border-bottom: 1px solid var(--line); }
.mask-stage canvas { display: block; flex: 0 1 288px; min-width: 0; width: 288px; max-width: 100%; height: auto; aspect-ratio: 16 / 10; border: 1px solid #424943; border-radius: 6px; background: #101413; }
.mask-stage-actions { display: flex; flex-direction: column; gap: 8px; flex: 1 1 160px; min-width: 0; }
.mask-stage-actions button[aria-pressed=true] { color: #edc7ab; border-color: #a77a5c; background: #34271f; }
.mask-stage-actions p { margin: 0; font-size: .78rem; line-height: 1.5; }
.character-mask-fields input[type=color] { height: 44px; padding: 4px; cursor: pointer; }
.character-mask-fields input[type=range] { padding: 0; height: 28px; border: 0; background: none; accent-color: var(--accent); }
.mask-range-hint { display: flex; justify-content: space-between; margin-top: -4px; font-size: .72rem; color: var(--muted); }
/* Local portrait artwork is selected explicitly. Cards stay usable without hover
   or colour alone: selected options have a visible outline and checkmark. */
.mask-art-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 16px; }
.mask-art-styles [data-mask-art-style], .mask-portrait-options [data-mask-portrait] { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; overflow: hidden; padding: 0; background: #111513; border: 1px solid #475049; border-radius: 8px; text-align: left; box-shadow: 0 4px 14px #0002; }
.mask-art-styles [data-mask-art-style]:hover, .mask-portrait-options [data-mask-portrait]:hover { background: #252b25; border-color: #a79475; }
.mask-art-styles [data-mask-art-style][aria-pressed=true], .mask-portrait-options [data-mask-portrait][aria-pressed=true] { background: #30291f; border-color: #d4b68c; box-shadow: 0 0 0 1px #d4b68c, 0 5px 18px #0003; }
.mask-art-styles [data-mask-art-style][aria-pressed=true]::after, .mask-portrait-options [data-mask-portrait][aria-pressed=true]::after { content: '✓'; position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; border: 1px solid #eed8b5; background: #181c18; color: #f0d5ac; font-size: .9rem; font-weight: 700; box-shadow: 0 2px 8px #0008; }
.mask-art-styles .mask-art-thumb, .mask-portrait-options .mask-art-thumb { display: block; width: 100%; min-width: 0; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; background-color: #171b18; background-repeat: no-repeat; border-bottom: 1px solid #ffffff12; }
.mask-art-styles [data-mask-art-style] strong, .mask-portrait-options [data-mask-portrait] strong { display: block; padding: 10px 9px 4px; font-size: .8rem; line-height: 1.3; color: #eae1d0; font-weight: 600; }
.mask-art-styles [data-mask-art-style] small, .mask-portrait-options [data-mask-portrait] small { display: block; padding: 0 9px 11px; font-size: .68rem; line-height: 1.45; color: #b9bbb0; }
.mask-art-styles [data-mask-art-style=procedural] { grid-column: 1 / -1; padding-right: 36px; box-shadow: none; }
.mask-art-styles [data-mask-art-style=procedural] strong { padding-bottom: 3px; }
.mask-art-styles [data-mask-art-style=procedural] small { padding-bottom: 10px; }
.mask-portrait-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 14px; }
.mask-portrait-options .mask-art-thumb { height: 150px; aspect-ratio: auto; }
.mask-art-note { margin: 12px 0 18px; padding: 11px 13px; border-left: 2px solid #a38b69; background: #25281f; color: #c5c7b8; font-size: .76rem; line-height: 1.6; }
.mask-procedural-controls[hidden], .mask-portrait-options[hidden] { display: none; }
.character-mask-fields [hidden] { display: none !important; }
.mask-art-thumb.mask-art-noir { background-image: url('/assets/masks/noir.png'); }
.mask-art-thumb.mask-art-mythic { background-image: url('/assets/masks/mythic.png'); }
.mask-art-thumb.mask-art-surreal { background-image: url('/assets/masks/surreal.png'); }
.mask-art-thumb.mask-art-heroic { background-image: url('/assets/masks/heroic.png'); }
.mask-art-thumb.mask-art-a { background-size: 200% auto; background-position: left 30%; }
.mask-art-thumb.mask-art-b { background-size: 200% auto; background-position: right 30%; }
@media (max-width: 600px) {
  .character-mask-fields .form-grid { grid-template-columns: 1fr; }
  .mask-stage { gap: 10px; padding: 10px 16px; }
  .mask-stage canvas { flex-basis: 128px; width: 128px; }
  .mask-stage-actions { flex-basis: 110px; gap: 6px; }
  .mask-stage-actions button { padding: 8px 10px; font-size: .8rem; }
  .mask-art-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mask-art-styles .mask-art-thumb { aspect-ratio: 1 / 1; }
  .mask-portrait-options .mask-art-thumb { height: 128px; }
}
@media (max-height: 640px) { .mask-stage { position: static; } }