.avatar-portrait { position:relative; overflow:hidden; isolation:isolate; flex-shrink:0; }
.avatar-portrait img, .avatar-portrait canvas { display:block; width:100%; height:100%; object-fit:contain; }
.avatar.avatar-portrait { background:radial-gradient(circle at 50% 35%,#364158,#20283a 76%); border:1px solid #596274; color:#d4af37; }
.avatar.avatar-portrait[data-avatar-ready="true"] { font-size:0; }
.avatar-profile { display:flex; align-items:center; gap:14px; padding:12px 14px; width:100%; min-height:88px; text-align:left; border:1px solid #515b70; border-radius:20px; background:linear-gradient(125deg,#252c3d,#192030); color:var(--text-primary,#f5f5f5); cursor:pointer; }
.avatar-profile:hover { border-color:#d4af37; }
.avatar.profile-portrait { width:64px; height:64px; border-radius:19px; }
.avatar-profile-copy { display:grid; gap:3px; flex:1; }
.avatar-profile-copy strong { font-size:14px; line-height:1.45; font-weight:600; }
.avatar-profile-copy > span { font-size:13px; color:#ccd1dc; }
.avatar-edit-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#eed484; background:#d4af3715; font-size:12px; }
.avatar-edit-button { padding:0; border:0; cursor:pointer; border-radius:15px; background:transparent; position:relative; flex-shrink:0; min-width:48px; min-height:48px; display:grid; place-items:center; }
.avatar-edit-button::after { content:'✎'; position:absolute; right:-1px; bottom:-1px; border:2px solid #171d2b; border-radius:50%; background:#d4af37; color:#101523; width:18px; height:18px; display:grid; place-items:center; font-size:12px; line-height:1; }
.avatar-edit-button:disabled { cursor:default; opacity:1; }
.avatar-edit-button:disabled::after { display:none; }
.manual-avatar-row { align-items:center; }
.manual-avatar-row > input { min-width:0; }
.manual-avatar-row .avatar-edit-button { min-width:48px; }
/* A definite height keeps WebKit from resolving the nested flex body to zero.
   Header and save controls stay fixed while the choices scroll independently. */
.avatar-editor { position:fixed; inset:0; margin:auto; padding:0; width:min(calc(100% - 40px),960px); max-width:960px; height:min(820px,calc(100vh - 32px)); height:min(820px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); background:#111826; overflow:hidden; border:1px solid #435069; border-radius:28px; box-shadow:0 32px 120px #0008; }
.avatar-editor[open] { display:flex; flex-direction:column; }
.avatar-editor::backdrop { background:#060b14d6; backdrop-filter:blur(12px); }
.avatar-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; flex-shrink:0; border-bottom:1px solid #ffffff0e; background:#131b2a; }
.avatar-editor-heading h2 { margin:0; font-size:25px; line-height:1.2; font-weight:650; letter-spacing:-.8px; }
.avatar-editor-heading > div { min-width:0; flex:1; }
.avatar-editor-heading .icon-button { flex-shrink:0; }
.avatar-editor-heading .eyebrow { margin:0 0 5px; font-size:10px; line-height:1.3; letter-spacing:.13em; max-width:260px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:#c4ab67; }
.avatar-editor-body { display:grid; grid-template-columns:340px minmax(0,1fr); flex:1; min-height:0; overflow:hidden; }
.avatar-stage { display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; min-width:0; padding:28px 20px; background:radial-gradient(ellipse at 50% 35%,#344257 0%,#1b293d 42%,#131d2e 76%); isolation:isolate; overflow:hidden; border-right:1px solid #ffffff0a; }
.avatar-stage-glow { position:absolute; width:250px; height:330px; border-radius:48% 48% 40% 40%; background:linear-gradient(160deg,#e6c9790b,transparent 70%); border:1px solid #e6c97924; top:50%; left:50%; transform:translate(-50%,-64%); z-index:-1; box-shadow:0 0 90px #e6c97908,inset 0 0 40px #ffffff04; }
.avatar-preview { order:1; width:300px; height:300px; max-width:100%; display:grid; place-items:center; position:relative; font-size:36px; color:#d4af37; filter:drop-shadow(0 20px 14px #050a1633); }
.avatar-loading { position:absolute; bottom:134px; margin:0; padding:4px 9px; border-radius:8px; background:#101827de; text-align:center; font-size:11px; color:#ccd4e3; z-index:2; }
.avatar-editor [hidden] { display:none!important; }
.avatar-expression-options { order:3; display:grid; grid-template-columns:repeat(4,1fr); width:100%; max-width:280px; gap:4px; margin-top:18px; padding:4px; border:1px solid #ffffff13; border-radius:16px; background:#0b132233; }
.avatar-expression-options button { background:transparent; border:1px solid transparent; color:#c6cfdf; min-height:52px; border-radius:11px; font-size:10px; line-height:1.3; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; }
.avatar-expression-options button:hover, .avatar-expression-options button[aria-pressed="true"] { background:#e6c9790c; border-color:#e6c97933; color:#f5ddb0; }
.avatar-expression-icon { width:21px; height:21px; flex-shrink:0; color:#d8bd76; }
.avatar-shuffle { order:4; margin:10px 0 0; display:flex; align-items:center; gap:8px; justify-content:center; min-height:44px; font-size:12px; color:#d5c38f; }
.avatar-controls { display:flex; flex-direction:column; min-width:0; min-height:0; background:linear-gradient(160deg,#172031,#111826 70%); }
.avatar-gender { flex-shrink:0; min-width:0; margin:0 0 14px; padding:0; border:0; }
.avatar-gender legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.avatar-gender-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid #354158; border-radius:14px; background:#0d1421; }
.avatar-gender-option { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:6px; border:1px solid transparent; border-radius:10px; color:#aab7cb; background:transparent; font-size:13px; font-weight:600; cursor:pointer; }
.avatar-gender-option input { position:absolute; inset:0; width:100%; height:100%; min-height:0; padding:0; margin:0; border:0; opacity:0; cursor:pointer; }
.avatar-gender-option.is-selected { border-color:#e4c6664d; background:linear-gradient(145deg,#e4c66620,#d4af3710); color:#f1d99b; box-shadow:0 2px 8px #0002; }
.avatar-gender-option:focus-within,.avatar-preset:focus-visible { outline:2px solid #e4c666; outline-offset:3px; }
.avatar-editor .avatar-preset-intro { margin:0 0 18px; font-size:12px; line-height:1.5; color:#a7b4c9; }
.avatar-preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.avatar-preset { position:relative; display:flex; flex-direction:column; min-width:0; padding:5px; border:1px solid #3b4860; border-radius:18px; overflow:hidden; background:#1a2537; color:#e6edf7; text-align:left; cursor:pointer; transition:border-color .15s,background-color .15s; }
.avatar-preset[aria-pressed="true"] { border-color:#e4c666; background:#d4af3719; box-shadow:0 0 0 1px #e4c666; color:#fbe2a4; }
.avatar-preset-portrait { display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:12px; background:radial-gradient(ellipse at 50% 25%,#ffffff88,transparent 80%),var(--preset-backdrop,#dbe3e7); color:#253043; font-size:28px; overflow:hidden; }
.avatar-preset-portrait > img { width:100%; height:100%; object-fit:contain; }
.avatar-preset-copy { display:flex; flex-direction:column; gap:5px; padding:12px 7px 8px; overflow-wrap:anywhere; }
.avatar-preset-copy strong { font-size:14px; font-weight:650; line-height:1.25; letter-spacing:-.2px; }
.avatar-preset-copy > span { font-size:10px; line-height:1.45; color:#aebbd0; }
.avatar-preset-check { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#111827; background:#ead190; border:2px solid #f5e4bb; font-size:10px; box-shadow:0 2px 7px #0002; }
.avatar-preset:disabled,.avatar-gender-option:has(input:disabled) { cursor:wait; opacity:.65; }
.avatar-category-menu { border:1px solid #354158; border-radius:14px; margin:0 0 8px; background:#0f1828; }
.avatar-category-menu > summary { display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 12px; list-style:none; cursor:pointer; color:#e7d7af; }
.avatar-category-menu > summary::-webkit-details-marker,.avatar-view-tools > summary::-webkit-details-marker { display:none; }
.avatar-category-menu > summary > span:first-child { display:grid; gap:3px; flex:1; }
.avatar-category-menu small { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#98a9c2; }
.avatar-category-menu strong { font-size:14px; line-height:1.3; font-weight:600; }
.avatar-category-prompt { font-size:11px; color:#aab7cb; }
.avatar-category-menu[open] > summary > svg { transform:rotate(180deg); }
.avatar-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:0 8px 8px; }
.avatar-categories button { min-width:0; min-height:48px; padding:6px; border:1px solid #354158; border-radius:9px; color:#bdc8da; background:#192437; font-size:11px; line-height:1.3; font-weight:600; cursor:pointer; overflow-wrap:anywhere; }
.avatar-categories button[aria-pressed="true"] { color:#f6dea2; background:#d4af3717; border-color:#c0a656; }
.avatar-edit-tools { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:4px; margin:0 0 12px; }
.avatar-edit-tools button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:44px; padding:4px; border:1px solid transparent; border-radius:10px; color:#bac7da; background:#ffffff04; font-size:11px; line-height:1.3; cursor:pointer; }
.avatar-edit-tools button:hover:not(:disabled) { border-color:#8a7953; color:#f6dea2; }
.avatar-edit-tools button:disabled { opacity:.36; cursor:default; }
.avatar-edit-tools svg { flex-shrink:0; }
.avatar-details { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 16px; margin:0 0 18px; border-bottom:1px solid #ffffff12; }
.avatar-details button { display:flex; align-items:center; justify-content:center; gap:5px; min-height:44px; max-width:100%; padding:8px 12px; border:1px solid #354158; border-radius:10px; background:#192335; color:#bac7da; font-size:11px; font-weight:600; cursor:pointer; }
.avatar-details button[aria-pressed="true"] { border-color:#d3b967; color:#f6dea2; background:#d4af3717; }
.avatar-detail-select { display:none; position:sticky; top:0; z-index:2; background:#141d2d; box-shadow:0 -8px #141d2d,0 8px #141d2d; }
.avatar-category-menu > summary:focus-visible,.avatar-view-tools > summary:focus-visible,.avatar-edit-tools button:focus-visible,.avatar-details button:focus-visible,.avatar-field-lock:focus-visible { outline:2px solid #e4c666; outline-offset:3px; }
.avatar-fields { padding:24px; overflow-y:auto; overscroll-behavior:contain; min-height:0; flex:1; scrollbar-width:thin; scrollbar-color:#42506a transparent; }
.avatar-field { min-width:0; margin:0 0 24px; padding:0; border:0; }
.avatar-field:last-child { margin-bottom:0; }
.avatar-field legend { font-size:13px; font-weight:600; margin-bottom:12px; color:#e6edf7; letter-spacing:-.1px; }
.avatar-field-tools { margin:-6px 0 10px; }
.avatar-editor .avatar-field-lock { display:flex; align-items:center; gap:7px; min-height:44px; padding:6px 10px; color:#aab7cb; border:1px solid #354158; border-radius:10px; background:transparent; font-size:12px; cursor:pointer; }
.avatar-field-lock[aria-pressed="true"] { border-color:#9b874f; color:#f6dea2; background:#d4af3712; }
.avatar-field-hint { margin:0 0 14px; font-size:12px; line-height:1.6; color:#b1bfd2; }
.avatar-field-hint.is-unavailable { padding:10px 12px; border-left:2px solid #d4af37; border-radius:0 8px 8px 0; background:#d4af370c; color:#e3d0a5; }
.avatar-range { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; align-items:center; }
.avatar-range input { width:100%; min-width:0; min-height:44px; margin:0; accent-color:#e4c666; cursor:pointer; }
.avatar-range input:focus-visible { outline:2px solid #e4c666; outline-offset:3px; border-radius:8px; }
.avatar-range output { font-size:12px; font-variant-numeric:tabular-nums; color:#ffdf86; min-width:62px; text-align:right; }
.avatar-range-labels { grid-column:1 / -1; display:flex; justify-content:space-between; color:#ccd1dc; font-size:12px; }
.avatar-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.avatar-choices.is-visual { grid-template-columns:repeat(3,minmax(0,1fr)); }
.avatar-choice.has-portrait { padding:6px 4px 10px; flex-direction:column; gap:2px; min-height:100px; font-size:11px; }
.avatar-option-portrait { width:68px; height:68px; display:grid; place-items:center; overflow:hidden; color:#e8cb78; }
.avatar-option-portrait img,.avatar-option-portrait canvas { transform:scale(1.16); transform-origin:50% 30%; }
.avatar-choice.has-portrait .avatar-choice-check { position:absolute; right:6px; top:6px; background:#ebcc73; border-radius:50%; width:16px; height:16px; display:grid; place-items:center; color:#111827; font-size:9px; }
.avatar-choice { display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:9px 10px; position:relative; border:1px solid #3d4a62; border-radius:13px; background:#1a2537; color:#dce5f2; font-size:12px; line-height:1.3; cursor:pointer; }
.avatar-choice.is-selected { border-color:#e4c666; background:#d4af3717; color:#ffdf86; box-shadow:inset 0 0 0 1px #e4c666; }
.avatar-choice-check { font-size:10px; }
.avatar-choices.is-palette { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.avatar-choice.has-swatch { flex-direction:column; min-height:74px; padding:7px 4px; font-size:10px; border-color:transparent; background:transparent; }
.avatar-choice.has-swatch.is-selected { border-color:#e4c666; background:#d4af3710; box-shadow:none; }
.avatar-swatch { width:32px; height:32px; border-radius:50%; border:1px solid #ffffff55; display:grid; place-items:center; box-shadow:0 2px 8px #0003; }
.avatar-swatch i { background:#0d1428; color:#ffe09b; border:1px solid #ffe09b; border-radius:50%; width:18px; height:18px; display:grid; place-items:center; font-size:9px; }
.avatar-render-note { font-size:12px; line-height:1.5; color:#e8d6a0; padding:10px 12px; background:#d4af3710; border-radius:12px; margin:0 0 18px; }
.avatar-image-note { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 12px; }
.avatar-image-note > p { min-width:0; }
.avatar-enable-3d.text-button { min-height:44px; flex-shrink:0; white-space:nowrap; padding:0; font-size:12px!important; }
.avatar-editor-footer { flex-shrink:0; padding:16px 24px max(16px,env(safe-area-inset-bottom)); border-top:1px solid #ffffff0e; background:#121b2a; }
.avatar-editor-footer > div { display:flex; align-items:center; gap:18px; justify-content:space-between; }
.avatar-editor-footer .button { width:auto; flex:1; max-width:300px; min-height:48px; border-radius:13px; background:linear-gradient(120deg,#e4c666,#d4af37); box-shadow:0 4px 18px #d4af3710; }
.avatar-editor-footer .text-button { min-height:48px; font-size:13px; padding:0 8px; }
.avatar-editor-footer .field-error { margin:0 0 10px; }
.winner-portraits { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:12px 0; }
.winner-portrait { width:104px; height:104px; border-radius:32px; background:radial-gradient(circle at 50% 40%,#c8a9402b,#141b2b); border:1px solid #d4af3755; }
.challenge-avatar { width:88px; height:88px; border-radius:28px; margin:0 auto 16px; }
.avatar-roster { display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; padding:2px 2px 12px; margin:12px 0 8px; scrollbar-width:thin; scrollbar-color:#566076 transparent; }
.avatar-roster-player { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 64px; min-width:0; }
.avatar-roster-player .avatar { width:50px; height:50px; border-radius:17px; }
.avatar-roster-name { display:block; width:100%; min-width:0; text-align:center; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:12px; line-height:1.4; color:#d0d5df; }
.chat-sender { display:flex; align-items:center; gap:8px; min-width:0; }
.chat-message-meta .chat-avatar { width:32px; height:32px; border-radius:11px; font-size:11px; }
.chat-sender strong { min-width:0; }
.avatar-stage-caption { order:2; text-align:center; margin:14px 0 0; }
.avatar-stage-caption > span { display:block; margin-bottom:7px; color:#98a9c2; font-size:9px; line-height:1.3; font-weight:600; text-transform:uppercase; letter-spacing:.15em; }
.avatar-stage-caption strong { display:block; color:#f4f0e8; font-size:27px; line-height:1.15; font-weight:600; letter-spacing:-.7px; }
.avatar-group-hint { margin:18px 0 0!important; color:#92a2bb; font-size:11px; line-height:1.6; }
.avatar-preset:hover { border-color:#a58f59; }
.avatar-preset[aria-pressed="true"]:hover { border-color:#e4c666; }
.avatar-view-tools { position:relative; z-index:4; flex-shrink:0; }
.avatar-view-tools > summary { display:flex; align-items:center; justify-content:center; gap:7px; min-width:44px; min-height:44px; padding:8px 11px; border:1px solid #b7c4db30; border-radius:12px; color:#e2c67d; background:#101b2be8; font-size:11px; cursor:pointer; list-style:none; }
.avatar-view-panel { position:absolute; right:0; top:50px; width:236px; padding:14px 16px 0; border:1px solid #56627b; border-radius:14px; background:#152033f5; box-shadow:0 12px 40px #050b1a88; color:#dce5f2; }
.avatar-view-panel label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; }
.avatar-view-panel output { color:#e8cc80; font-variant-numeric:tabular-nums; }
.avatar-view-hint { margin:0 0 12px; color:#c3b589; font-size:11px; line-height:1.5; }
.avatar-editor .avatar-view-panel input[type="range"],.avatar-editor .avatar-range input[type="range"] { display:block; width:100%; min-width:0; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; accent-color:#d4af37; }
.avatar-view-panel .text-button { display:block; width:100%; min-height:44px; margin:0; padding:0; border-top:1px solid #ffffff12; font-size:11px; }
@media(max-width:640px) {
 .avatar-editor { top:auto; bottom:8px; width:calc(100% - 16px); height:calc(100vh - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); margin:0 auto; border-radius:24px; }
 .avatar-editor-heading { padding:10px 16px; }
 .avatar-editor-heading h2 { font-size:22px; }
 .avatar-editor-heading .eyebrow { font-size:9px; margin-bottom:4px; }
 .avatar-editor-heading .icon-button { min-width:44px; width:44px; min-height:44px; height:44px; }
 .avatar-editor-heading { gap:8px; }
 .avatar-view-tools > summary { width:44px; padding:8px; }
 .avatar-view-tools > summary > span { display:none; }
 .avatar-editor-body { display:flex; flex-direction:column; }
 .avatar-stage { display:grid; grid-template-columns:1fr; grid-template-rows:220px 44px; padding:0 12px 10px; flex-shrink:0; border-right:0; border-bottom:1px solid #ffffff0c; }
 .avatar-stage-glow { width:170px; height:212px; top:12px; transform:translateX(-50%); border-radius:80px 80px 58px 58px; }
 .avatar-preview { grid-row:1; grid-column:1; justify-self:center; align-self:end; width:232px; height:220px; }
 .avatar-stage-caption { position:absolute; left:16px; top:20px; max-width:90px; text-align:left; margin:0; }
 .avatar-stage-caption > span { font-size:8px; line-height:1.5; letter-spacing:.1em; margin-bottom:6px; max-width:64px; }
 .avatar-stage-caption strong { font-size:18px; letter-spacing:-.4px; }
 .avatar-loading { top:186px; bottom:auto; left:50%; transform:translateX(-50%); font-size:10px; white-space:nowrap; }
 .avatar-expression-options { grid-row:2; grid-column:1; justify-self:center; width:240px; max-width:none; margin:0; padding:0; gap:0; border:0; background:transparent; }
 .avatar-expression-options button { min-height:44px; gap:3px; font-size:9px; }
 .avatar-expression-icon { width:19px; height:19px; }
 .avatar-shuffle.text-button { position:absolute; right:12px; top:14px; font-size:0; width:44px; height:44px; min-height:44px; border:1px solid #b7c4db24; border-radius:50%; padding:0; margin:0; background:#101b2b66; }
 .avatar-shuffle > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .avatar-shuffle i { font-size:15px; }
 .avatar-controls { flex:1; }
 .avatar-gender { margin:0 0 12px; }
 .avatar-gender-options { padding:3px; gap:3px; border-radius:12px; }
 .avatar-gender-option { min-height:44px; font-size:12px; border-radius:8px; }
 .avatar-categories { padding:0 6px 6px; gap:5px; }
 .avatar-categories button { min-height:48px; padding:5px 3px; font-size:11px; }
 .avatar-fields { padding:16px; }
 .avatar-details { display:none; }
 .avatar-detail-select { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; margin:0 0 18px; }
 .avatar-detail-select > span { font-size:11px; color:#aab7cb; }
 .avatar-detail-select select { width:100%; min-width:0; min-height:44px; margin:0; padding:10px 12px; border:1px solid #9c884e; border-radius:10px; color:#f0d797; background:#192335; font:inherit; font-size:16px; }
 .avatar-field legend { margin-bottom:9px; }
 .avatar-editor .avatar-preset-intro { font-size:11px; margin-bottom:14px; }
 .avatar-preset-grid { gap:9px; }
 .avatar-preset { padding:4px; border-radius:14px; }
 .avatar-preset-portrait { border-radius:9px; }
 .avatar-preset-copy { padding:9px 4px 7px; gap:4px; }
 .avatar-preset-copy strong { font-size:13px; }
 .avatar-preset-copy > span { font-size:9px; }
 .avatar-preset-check { width:19px; height:19px; top:8px; right:8px; font-size:8px; }
 .avatar-group-hint { font-size:10px; margin-top:14px!important; }
 .avatar-editor-footer { padding:10px 16px max(10px,env(safe-area-inset-bottom)); }
 .avatar-editor-footer .button { min-height:48px; padding:10px 14px; }
}
@media(max-height:700px) and (min-width:641px) {
 .avatar-editor-heading { padding:10px 20px; }
 .avatar-editor-heading .eyebrow { display:none; }
 .avatar-editor-body { grid-template-columns:280px minmax(0,1fr); }
 .avatar-stage { padding:12px 16px; }
 .avatar-preview { width:clamp(140px,calc(100dvh - 320px),260px); height:clamp(140px,calc(100dvh - 320px),260px); }
 .avatar-stage-glow { width:190px; height:240px; }
 .avatar-stage-caption { margin-top:6px; }
 .avatar-stage-caption > span { display:none; }
 .avatar-stage-caption strong { font-size:22px; }
 .avatar-expression-options { margin-top:10px; }
 .avatar-expression-options button { min-height:44px; }
 .avatar-shuffle { margin:4px 0 0; }
 .avatar-gender { margin:0 0 12px; }
 .avatar-fields { padding:18px; }
 .avatar-editor-footer { padding:10px 20px; }
}
@media(max-height:720px) and (max-width:640px) {
 .avatar-editor-heading { padding:6px 12px; }
 .avatar-editor-heading h2 { font-size:20px; }
 .avatar-editor-heading .eyebrow { display:none; }
 .avatar-stage { grid-template-columns:1fr; grid-template-rows:128px 44px; align-items:center; gap:0; padding:0 8px; }
 .avatar-stage-caption { display:none; }
 .avatar-preview { grid-column:1; grid-row:1; width:136px; height:128px; }
 .avatar-stage-glow { width:110px; height:124px; top:4px; left:50%; }
 .avatar-expression-options { grid-row:2; grid-column:1; width:220px; grid-template-columns:repeat(4,1fr); gap:0; }
 .avatar-expression-options button { min-height:44px; }
 .avatar-expression-options button > span:last-child { display:none; }
 .avatar-shuffle.text-button { position:absolute; right:8px; top:8px; }
 .avatar-loading { top:103px; left:50%; width:auto; transform:translateX(-50%); padding:2px 6px; }
 .avatar-gender { margin:0 0 10px; }
 .avatar-fields { padding:12px; }
}
@media(max-height:640px) {
 .avatar-image-note { padding:0 10px; margin-bottom:6px; gap:8px; }
 .avatar-editor .avatar-preset-intro { display:none; }
 .avatar-presets > legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .avatar-preset-copy > span { display:none; }
 .avatar-group-hint { margin-top:10px!important; }
}
@media(max-height:440px) and (orientation:landscape) {
 .avatar-editor { width:calc(100% - 24px); max-width:960px; height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); top:12px; bottom:12px; margin:0 auto; }
 .avatar-editor-heading { padding:0 12px; }
 .avatar-editor-heading .eyebrow { display:none; }
 .avatar-editor-heading h2 { font-size:18px; }
 .avatar-editor-body { display:grid; grid-template-columns:176px minmax(0,1fr); }
 .avatar-stage { display:flex; justify-content:flex-start; padding:0; }
 .avatar-stage-caption { display:none; }
 .avatar-preview { width:136px; height:128px; flex-shrink:0; }
 .avatar-stage-glow { width:104px; height:126px; top:2px; left:50%; transform:translateX(-50%); }
 .avatar-expression-options { width:176px; grid-template-columns:repeat(4,1fr); gap:0; margin:0; padding:0; border:0; background:transparent; }
 .avatar-expression-options button { min-width:44px; min-height:44px; }
 .avatar-expression-options button > span:last-child { display:none; }
 .avatar-shuffle.text-button { position:absolute; left:0; right:auto; top:0; width:44px; height:44px; min-height:44px; padding:0; font-size:0; border:0; background:transparent; }
 .avatar-shuffle > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .avatar-shuffle i { font-size:14px; }
 .avatar-loading { top:105px; left:4px; width:168px; transform:none; font-size:9px; }
 .avatar-gender { margin:0 0 8px; }
 .avatar-gender-options { padding:2px; border-radius:10px; }
 .avatar-gender-option { min-height:44px; font-size:11px; }
 .avatar-categories { padding:0 6px 6px; }
 .avatar-categories button { min-height:48px; padding:4px; font-size:11px; }
 .avatar-fields { min-height:0; padding:8px; }
 .avatar-preset-grid { gap:6px; }
 .avatar-preset { flex-direction:row; align-items:center; padding:3px; border-radius:11px; min-height:48px; }
 .avatar-preset-portrait { width:40px; height:40px; flex-shrink:0; border-radius:7px; }
 .avatar-preset-copy { padding:4px 5px; }
 .avatar-preset-copy strong { font-size:11px; }
 .avatar-preset-check { width:14px; height:14px; top:2px; right:2px; font-size:7px; border-width:1px; }
 .avatar-choice.has-portrait { min-height:60px; padding:4px; font-size:10px; }
 .avatar-option-portrait { width:34px; height:34px; }
 .avatar-editor-footer { padding:6px 12px; }
 .avatar-editor-footer .button { padding:10px 14px; }
 .avatar-editor-footer .text-button { padding:0 8px; }
 .avatar-category-menu > summary { min-height:44px; }
 .avatar-category-menu small { display:none; }
 .avatar-details { padding-bottom:10px; margin-bottom:12px; }
 .avatar-details { display:none; }
 .avatar-detail-select { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; margin:0 0 12px; }
 .avatar-detail-select > span { font-size:11px; color:#aab7cb; }
 .avatar-detail-select select { width:100%; min-width:0; min-height:44px; margin:0; padding:10px 12px; border:1px solid #9c884e; border-radius:10px; color:#f0d797; background:#192335; font:inherit; font-size:16px; }
 .avatar-view-panel { padding-top:10px; }
}
@media(prefers-reduced-motion:reduce) { .avatar-portrait,.avatar-preset { animation:none!important; transition:none!important; } }