/* Character selection is scoped to the investigator atelier. */
.avatar-anime-illustration { display:block; max-width:100%; }
#ermittler-bild .avatar-anime-illustration { width:100%; height:100%; aspect-ratio:1; border-radius:50%; }
#ermittler-portrait .ermittler-stift { width:18px; height:18px; line-height:18px; font-size:12px; background:#d8b575; color:#192321; border:1px solid #192321; }
.avatar-atelier { --avatar-gold:#d8b575; display:grid; grid-template-columns:minmax(246px,286px) minmax(0,1fr); gap:20px; align-items:start; }
.avatar-atelier > .menu-heading { grid-column:1/-1; margin-bottom:0; }
.avatar-atelier .avatar-buehne { position:sticky; top:12px; display:flex; flex-direction:column; align-items:stretch; gap:14px; margin:0; padding:12px; border:1px solid #76624266; border-radius:12px; background:linear-gradient(145deg,#29291f,#141b1b); }
.avatar-atelier .avatar-gross { width:100%; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:#151c1e; }
.avatar-atelier .avatar-gross svg { width:100%; height:auto; border:0; border-radius:0; }
.avatar-atelier .avatar-buehne-text { flex:0 0 auto; min-width:0; }
.avatar-atelier #avatar-worte { margin:0 0 12px; font-size:12px; line-height:1.65; }
.avatar-atelier #avatar-worte:not(:empty) { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.avatar-atelier .row-actions { gap:6px; }
.avatar-atelier .row-actions .btn { flex:1 1 auto; min-height:44px; }
.avatar-atelier-controls { min-width:0; }
.avatar-stile { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.avatar-stil { min-height:44px; padding:10px 12px; border:1px solid #404840; border-radius:7px; background:#17201e; color:var(--text); font:600 13px/1.4 var(--font-ui); cursor:pointer; }
.avatar-stil[aria-checked=true] { border-color:var(--avatar-gold); background:#d8b57518; box-shadow:inset 0 -2px var(--avatar-gold); }
.avatar-stil:focus-visible { outline:2px solid #f5d395; outline-offset:3px; }
@media (forced-colors:active) { .avatar-stil[aria-checked=true] { outline:2px solid Highlight; } }
.avatar-figuren { display:flex; gap:8px; margin:0 0 20px; }
.avatar-figur { flex:1; min-height:44px; padding:8px 12px; border:1px solid #404840; border-radius:7px; background:#17201e; color:var(--text); cursor:pointer; }
.avatar-figur[aria-checked=true] { border-color:var(--avatar-gold); background:#d8b57518; }
.avatar-gallery-heading { margin:0 0 10px; font:600 15px/1.4 var(--font-ui); }
.avatar-galerie { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.avatar-background-option { position:relative; display:grid; align-content:start; gap:7px; min-width:44px; padding:4px 4px 9px; color:var(--text); background:#131b1b; border:1px solid #3f4943; border-radius:8px; font:500 11px/1.4 var(--font-ui); cursor:pointer; overflow-wrap:anywhere; }
.avatar-background-preview { display:block; width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; border-radius:5px; background:radial-gradient(at 20% 20%,#7b7970,#343b3f 55%,#18232c); }
.avatar-background-option[aria-checked=true] { border-color:var(--avatar-gold); background:#d8b57518; box-shadow:0 0 0 1px var(--avatar-gold); }
.avatar-background-option[aria-checked=true]::after { content:'✓'; position:absolute; right:7px; top:7px; width:20px; height:20px; display:grid; place-items:center; color:#192321; background:var(--avatar-gold); border-radius:50%; font-weight:700; }
.avatar-mode-note { margin:9px 0 17px; font-size:12px; line-height:1.6; color:var(--muted); }
.avatar-bereiche { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; border-bottom:1px solid #4b5046; padding-bottom:8px; margin-bottom:16px; }
.avatar-bereich { min-width:0; min-height:44px; padding:8px 4px; background:transparent; border:0; border-radius:5px; color:var(--muted); cursor:pointer; font:600 12px/1.4 var(--font-ui); }
.avatar-bereich[aria-selected=true] { color:#f2dfb9; background:#d8b5751a; }
.avatar-atelier .avatar-teile { gap:18px; }
.avatar-atelier .avatar-feld { gap:7px; }
.avatar-atelier .avatar-optionen { display:grid; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); gap:7px; }
.avatar-atelier .avatar-option { position:relative; min-height:60px; padding:7px 4px; gap:5px; align-content:center; border:1px solid #404840; background:#17201e; border-radius:7px; }
.avatar-atelier .avatar-option.is-gewaehlt { border-color:var(--avatar-gold); background:#d8b57518; box-shadow:inset 0 -2px var(--avatar-gold); }
.avatar-atelier .avatar-punkt { width:25px; height:25px; }
.avatar-atelier .avatar-wort { font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.avatar-miniature { display:block; width:100%; height:58px; overflow:hidden; }
.avatar-miniature svg { display:block; width:100%; height:100%; }
.avatar-atelier :is(.avatar-figur,.avatar-background-option,.avatar-bereich,.avatar-option):focus-visible { outline:2px solid #f5d395; outline-offset:3px; }
.avatar-atelier .avatar-code { padding-top:16px; border-top:1px solid #3f4943; }
.avatar-atelier [hidden] { display:none !important; }
@media (max-width:700px) {
  .avatar-atelier { grid-template-columns:minmax(0,1fr); gap:18px; }
  .avatar-atelier .avatar-buehne { position:static; display:flex; flex-direction:column; gap:14px; align-items:stretch; }
  .avatar-atelier .avatar-gross { width:min(200px,100%); align-self:center; }
  .avatar-atelier .avatar-optionen { grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); }
}
@media (forced-colors:active) {
  .avatar-background-option[aria-checked=true],.avatar-atelier .avatar-option.is-gewaehlt { outline:2px solid Highlight; }
}
.avatar-gallery-portrait { display:block;max-width:100%;overflow:hidden;border-radius:8px; }
.avatar-gallery-portrait img { display:block;width:100%;height:100%;object-fit:cover; }
.avatar-gallery-face img { transform:scale(1.85);transform-origin:50% 25%; }
#ermittler-bild .avatar-gallery-portrait { border-radius:50%; }
.avatar-portraits { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;max-height:430px;overflow:auto;padding:5px;margin-bottom:12px; }
.avatar-portrait-option { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px;border:1px solid #404840;border-radius:8px;background:#17201e;color:var(--text);font:600 12px/1.5 var(--font-ui);cursor:pointer; }
.avatar-portrait-option[aria-checked=true] { border-color:#d8b575;box-shadow:inset 0 -3px #d8b575;background:#d8b57518; }
.avatar-portrait-option:focus-visible { outline:2px solid #f5d395;outline-offset:2px; }
.avatar-portrait-preview { display:block;max-width:100%; }
@media(forced-colors:active){.avatar-portrait-option[aria-checked=true]{outline:2px solid Highlight;}}
.avatar-gallery-face img { object-position:50% 0;transform:scale(1.65);transform-origin:50% 0; }
.avatar-full-portrait { display:block;max-width:100%;max-height:100%;aspect-ratio:4/5;overflow:hidden;border-radius:8px; }
.avatar-full-portrait img { display:block;width:100%;height:100%;object-fit:contain;object-position:center; }
.avatar-full-size-64 { width:64px; }.avatar-full-size-88 { width:88px; }.avatar-full-size-128 { width:128px; }.avatar-full-size-256 { width:256px; }
.avatar-atelier .avatar-gross:has(> .avatar-full-portrait) { grid-template-columns:minmax(0,1fr); }
.avatar-atelier .avatar-gross > .avatar-full-portrait { width:min(256px,100%);height:auto;min-width:0; }
#ermittler-bild .avatar-full-portrait { width:100%!important;height:100%!important;border-radius:8px; }
.avatar-full-status { display:block;max-width:256px;font:500 12px/1.5 var(--font-ui);color:var(--muted); }

/* Generated portraits share the office card's exact picture column. */
.avatar-generated-image { display:block;object-fit:cover;border-radius:50%; }
.office-shell .ermittler-bild .avatar-generated-image { width:48px;height:48px; }
#avatar-generator > img:not([hidden]) { display:block;max-width:100%;height:auto;border-radius:12px;margin:16px 0; }
#avatar-generator textarea { resize:vertical;min-height:96px; }
#avatar-generator > .row-actions { flex-wrap:wrap;gap:10px; }
#avatar-generator > .row-actions button { min-height:44px; }
@media(max-width:560px) {
 .office-shell .ermittler-bild .avatar-generated-image { width:44px;height:44px; }
}