/* Estudio: más espacio para el modelo, controles compactos y personajes. */
.config-dialog{border:1px solid #e2e7db;box-shadow:0 24px 90px #19231540}.config-stage{background:radial-gradient(ellipse at 48% 30%,#fcfdf8 0,#eef2e7 60%,#e0e7d6 100%)}.config-stage:before{opacity:.32;background-size:280px 140px}.config-top{background:#fcfbf5}.config-top h2{font-weight:600}.config-canvas{inset:46px 0 116px}.config-stage-top{top:15px;left:18px;right:18px}.config-stage-title{display:none}.render-quality{position:absolute;z-index:2;right:18px;top:15px;display:flex;align-items:center;gap:7px;font-size:8px;color:#63745d}.render-quality select{border:1px solid #dce4d5;background:#fafcf5d9;border-radius:20px;padding:7px 10px;color:#43583c;font-size:9px;max-width:120px}.config-stage-tag{background:#fbfcf6d9;font-size:7px;letter-spacing:.8px;border-color:#dce4d5}.inflation-panel{inset:auto auto 77px 50%;transform:translateX(-50%);width:min(360px,calc(100% - 36px));padding:0;border-color:#d7e0cd;background:#fbfcf7ed;border-radius:10px;box-shadow:0 6px 22px #3d51320c}.inflation-heading{padding:10px 12px;cursor:pointer;list-style:none}.inflation-heading::-webkit-details-marker{display:none}.inflation-heading strong{font-size:9px}.inflation-heading output{font-size:10px}.motion-chevron{font-size:13px;margin-left:6px;color:#6a795f}.inflation-panel[open] .motion-chevron{transform:rotate(180deg)}.inflation-track{margin:0 12px 9px}.inflation-buttons{padding:0 12px}.inflation-buttons button{font-size:9px;padding:7px 10px}.inflation-panel p{position:static;font-size:8px;margin:8px 12px 11px;max-width:none!important}#inflation-enable{position:static;margin:8px 12px;padding:0;background:transparent;font-size:9px}.config-view-tools{bottom:30px;border-radius:24px;padding:4px 7px;border-color:#d7e0cd;box-shadow:0 4px 15px #3d51320c}.config-view-tools button{height:29px;min-width:31px;padding:0 8px}.config-stage-foot{bottom:7px;left:18px;right:18px;justify-content:center}.config-stage-foot>span{display:none}.config-stage-foot strong{font-size:7px;opacity:.7}.no-webgl .render-quality{display:none}.design-library-toolbar{padding:9px 11px;background:#f2f5eb;gap:5px}.design-library-toolbar button{font-size:9px;padding:3px 1px}#design-characters-open{color:#7150a1}.character-launch{display:flex;width:100%;gap:12px;align-items:center;text-align:left;background:#f0eefa;border:1px solid #e0dced;border-radius:11px;padding:10px 13px;margin:0 0 20px}.character-launch>span:first-child{width:45px;flex-shrink:0}.character-launch svg{width:45px;height:42px;display:block}.character-launch>span:nth-child(2){flex:1}.character-launch strong{display:block;font-size:12px;color:#574577}.character-launch small{display:block;margin-top:5px;font-size:10px;color:#82758f}.character-launch>b{color:#76618f}.character-slots{display:flex;gap:7px;margin-bottom:14px}.character-slots button{flex:1;min-width:0;text-align:left;padding:10px;border:1px solid #dbe1d1;border-radius:8px;background:#fffdf8}.character-slots button[aria-pressed=true]{border-color:#8462b1;box-shadow:0 0 0 1px #8462b1;background:#f3effa}.character-slots span{display:block;font-size:7px;letter-spacing:.8px;color:#91839e}.character-slots strong{display:block;font-size:11px;margin-top:6px;color:#58426c}.character-search-label{display:block;font-size:10px;color:#63705c;margin:12px 0}.character-search-label input{display:block;width:100%;margin-top:6px;border:1px solid #dce1d4;border-radius:8px;padding:10px 12px;background:#fffdf7;font-size:11px}.character-filters{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0}.character-filters button{font-size:8px;border:1px solid #dce1d4;border-radius:20px;padding:6px 9px}.character-filters button[aria-pressed=true]{background:#654b80;color:#fff;border-color:#654b80}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.character-card{min-width:0;border:1px solid #e0e4d7;background:#fffdf7;border-radius:10px;padding:3px 3px 10px;overflow:hidden}.character-card svg{display:block;width:100%;height:74px}.character-card>strong{display:block;font-size:10px;line-height:1.4}.character-card>span{display:block;font-size:7px;line-height:1.4;margin-top:4px;color:#8b8192}.character-card[aria-pressed=true]{border-color:#8b66b0;background:#f1ebf8;box-shadow:0 0 0 1px #8b66b0}.character-card:hover{border-color:#a791b9}.character-placement{border:1px solid #dce3d0;border-radius:10px;padding:12px;margin-top:18px;background:#f3f6ec}.character-placement .config-select-label{align-items:center;line-height:1.5}.character-placement select{font-size:9px;max-width:200px}.character-placement label+label{margin-top:10px}#character-palette{font-size:10px;color:#556c43;padding:11px 0 0;text-align:left}#character-palette:disabled{opacity:.5}.character-filters button:focus-visible,.character-card:focus-visible{outline:2px solid #82629d;outline-offset:2px}#design-characters>.step-intro{font-size:10px;margin-bottom:16px}#design-characters h3{font-size:24px}.config-summary{z-index:2}
@media(min-width:1100px){.config-layout{grid-template-columns:minmax(0,1fr) 400px}.config-canvas{inset:38px 0 111px}.character-card svg{height:84px}}
@media(min-width:641px) and (max-width:850px){.config-layout{grid-template-columns:minmax(0,1fr) 355px}.render-quality{top:46px;right:12px}.config-stage-tag{font-size:6px;padding:6px 8px}.config-canvas{inset:78px 0 116px}.config-view-tools{gap:1px}.config-view-tools button{min-width:27px;padding:0 5px}.config-view-tools button[data-view],#design-dimensions{font-size:8px}}
@media(max-width:640px){.config-stage{height:310px;min-height:310px;flex-basis:310px}.config-canvas{inset:34px 0 97px}.config-stage-top{top:10px;left:12px}.config-stage-tag{font-size:6px;padding:6px 8px}.render-quality{top:9px;right:12px;font-size:7px;gap:4px}.render-quality select{font-size:8px;padding:6px 8px;max-width:103px}.inflation-panel{bottom:62px;width:calc(100% - 36px)}.inflation-heading{padding:8px 11px}.inflation-heading strong{font-size:8px}.inflation-panel p{font-size:7px;margin:6px 12px 8px}.inflation-buttons button{padding:5px 10px;font-size:8px}.inflation-track{margin-bottom:7px}.config-view-tools{bottom:22px;padding:3px 6px;gap:3px}.config-view-tools button{min-width:29px;height:26px;font-size:13px}.config-view-tools button[data-view],#design-dimensions{font-size:8px}.config-stage-foot{bottom:3px}.config-stage-foot strong{font-size:6px}.design-library-toolbar{padding:7px 11px}.character-grid{gap:8px}.character-card svg{height:80px}.character-card>strong{font-size:11px}.character-slots strong{font-size:12px}.character-filters button{font-size:9px}.character-placement select{font-size:10px}.character-launch strong{font-size:12px}#inflation-enable{font-size:8px;margin:7px 12px}}
@media(max-width:640px) and (max-height:720px){.config-stage{height:250px;min-height:250px;flex-basis:250px}.config-canvas{inset:30px 0 91px}.inflation-panel{bottom:58px}.config-view-tools{bottom:20px}}

#design-characters .character-search-label{font-size:0;margin:8px 0}#design-characters .character-search-label input{font-size:11px;margin:0}#design-characters .gallery-kicker{margin-bottom:6px}#design-characters>.step-intro{margin:7px 0 12px}.character-slots{margin-bottom:8px}.character-filters{margin:9px 0}.character-slots button{padding:9px}#design-characters h3{font-size:23px}@media(max-width:640px){#design-characters .gallery-kicker{display:none}#design-characters h3{font-size:22px}.character-slots strong{font-size:11px}.character-filters button{font-size:8px;padding:5px 8px}.character-card svg{height:70px}}

/* Small raster previews; detailed artwork is loaded only for the selected characters. */
.character-card .character-art{padding:7px 5px 5px;overflow:visible;filter:drop-shadow(0 3px 2px #23334418)}
.character-launch .character-art{padding:3px}.config-art-status{position:absolute;top:71px;left:22px;z-index:3;border:1px solid #d8dfd3;border-radius:20px;background:#fffdf5e8;padding:8px 12px;font-size:10px;color:#556345;pointer-events:none}.config-art-status[hidden]{display:none}
@media(max-width:640px){.config-art-status{top:39px;left:12px;font-size:8px;padding:5px 9px}}

/* Each illustration has its own controls; expanding reuses the same canvas. */
.character-modes{display:flex;gap:4px;padding:4px;background:#eaece3;border-radius:9px;margin:12px 0}
.character-modes button{flex:1;padding:9px 6px;border-radius:6px;font-size:10px;color:#718064}
.character-modes button[aria-pressed=true]{color:#4d3e5d;background:#fffdf8;box-shadow:0 1px 4px #2c342415}
.character-modes button:disabled{opacity:.45;cursor:default}
.character-edit-preview{display:flex;gap:16px;align-items:center;padding:4px 5px 5px}
.character-edit-preview>span{width:56px;height:65px;flex-shrink:0}
.character-edit-preview svg{width:100%;height:100%;overflow:visible}
.character-edit-preview small{display:block;font-size:7px;letter-spacing:.8px;color:#8b7799}
.character-edit-preview strong{display:block;font-size:16px;margin:5px 0}
.character-edit-preview button{font-size:9px;text-decoration:underline;text-underline-offset:3px;color:#786286;padding:3px 0}
.config-form fieldset.character-placement{display:block;border:1px solid #dce3d0;border-radius:10px;padding:10px 13px 11px;margin:14px 0 0;background:#f3f6ec;min-width:0}
.config-form .character-placement legend{float:none;width:auto;padding:0 5px;margin:0;font-size:9px;letter-spacing:0;color:#657553}
.character-placement .config-select-label{margin:3px 0 10px!important;align-items:center}
.character-placement .config-select-label select{width:54%;font-size:10px;padding:8px;min-width:0}
.character-placement .character-rotation{margin-top:16px}
.character-placement .character-rotation input[type=range]{width:100%;margin:14px 0 5px;accent-color:#88689f}
.character-range-labels{font-size:8px!important;color:#8a927e}
.character-flip{display:flex;gap:9px;align-items:center;font-size:11px;margin:17px 0 10px;cursor:pointer}
.character-flip input{accent-color:#88689f;width:16px;height:16px;flex-shrink:0}
.config-form .character-flip>span{margin-left:0;font-size:11px;color:#42533a}
.character-flip small{display:block;margin-top:4px;font-size:9px;color:#7e8973}
.character-reset{font-size:9px;color:#6e7b61;text-decoration:underline;text-underline-offset:3px;padding:8px 0 0}
.character-edit-note{font-size:9px;line-height:1.7;color:#857592;margin:10px 0 0}
.character-modes button:focus-visible,.character-reset:focus-visible,.config-expand:focus-visible{outline:2px solid #82629d;outline-offset:2px}
.config-expand{position:absolute;top:53px;right:18px;z-index:2;border:1px solid #dce4d5;border-radius:7px;padding:8px 11px;background:#fbfcf6e8;color:#506346;font-size:9px}
.config-expand:hover{background:#fffdf8;border-color:#9cab8d}
.viewer-expanded .config-layout{display:block}
.viewer-expanded .config-form{display:none}
.viewer-expanded .config-stage{height:100%;min-height:0;width:100%;flex-basis:auto}
.viewer-expanded .config-canvas{inset:42px 0 111px}
.viewer-expanded .render-quality{top:15px;right:18px}
.viewer-expanded .config-expand{top:53px;right:18px}
@media(min-width:641px) and (max-width:850px){.config-expand{top:84px;right:12px}}
@media(max-width:640px){
  .config-expand{top:39px;right:12px;font-size:8px;padding:6px 9px}
  .character-modes button{padding:10px 6px;font-size:11px}
  .character-edit-preview{gap:12px}.character-edit-preview>span{height:57px;width:48px}
  .character-placement .config-select-label select{font-size:11px}
  .character-edit-note{font-size:10px}
  .viewer-expanded .config-canvas{inset:36px 0 97px}
  .viewer-expanded .render-quality{top:9px;right:12px}
  .viewer-expanded .config-expand{top:39px;right:12px}
}