/* Calm temple courtyard; equipment is attached to one responsive paper-doll canvas. */
#screen[data-route="profile"] .profile-scene.character-stage{
 position:relative;isolation:isolate;flex:0 0 auto;width:100%;height:auto;
 aspect-ratio:400/560;min-height:0;max-width:440px;margin:8px auto 0;
}
.profile-scenery{position:absolute;inset:0 -12px;z-index:-1;background:url('./design-assets/profile-background-v2.webp') center 65%/cover no-repeat;opacity:.68;mask-image:linear-gradient(transparent,#000 9%,#000 88%,transparent);pointer-events:none}
.character-figure{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 8px 7px #0008)}
.equipment-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.equipment-connectors path{fill:none;stroke:#b69a5c;stroke-width:1;opacity:.65;vector-effect:non-scaling-stroke}
.equipment-connectors circle{fill:#e2c07b;opacity:.85}
#screen[data-route="profile"] .profile-scene .slot{
 position:absolute;left:var(--socket-x);top:var(--socket-y);right:auto;bottom:auto;
 transform:translate(-50%,-24px);width:94px;min-height:88px;padding:0;
 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
 text-align:center;border:0;background:none;z-index:2;
}
#screen[data-route="profile"] .profile-scene .slot:after{display:none}
#screen[data-route="profile"] .profile-scene .slot-orb{
 flex:0 0 auto;width:48px;height:48px;border:1px dashed #8f805b;
 background:#0b0f12e8;box-shadow:0 3px 12px #0008;display:grid;place-items:center;
}
#screen[data-route="profile"] .profile-scene .slot.filled .slot-orb{border-style:solid;border-color:var(--slot-rarity)}
#screen[data-route="profile"] .profile-scene .slot .item-art{width:40px;height:40px;object-fit:contain}
#screen[data-route="profile"] .profile-scene .slot-label{align-self:center;font-size:8px;line-height:1.4;margin:0;color:#d5b46c;letter-spacing:.6px;text-shadow:0 1px 4px #000}
#screen[data-route="profile"] .profile-scene .slot strong{align-self:center;max-width:94px;white-space:normal;font-size:10px;line-height:1.3;font-weight:500;color:#deded6;text-shadow:0 1px 4px #000,0 1px 8px #000}
#screen[data-route="profile"] .profile-scene .slot:hover .slot-orb{background:#25241b}
#screen[data-route="profile"] .profile-scene .slot:focus-visible{border-radius:8px;outline-offset:4px}
#screen[data-route="profile"] .profile-effects{margin-top:0}
@media(max-width:350px){
 #screen[data-route="profile"] .profile-scene .slot{width:76px;transform:translate(-50%,-22px)}
 #screen[data-route="profile"] .profile-scene .slot-orb{width:44px;height:44px}
 #screen[data-route="profile"] .profile-scene .slot strong{font-size:9px;max-width:76px}
 #screen[data-route="profile"] .profile-scene .slot .item-art{width:36px;height:36px}
}