/* Profile: central character scene and five interactive equipment sockets.
   Composition follows assets/profile.png; character is a static illustrated skin. */
#screen[data-route="profile"] .section-heading h1{font-size:23px;font-weight:500}
#screen[data-route="profile"] .section-heading .eyebrow{display:none}
#screen[data-route="profile"] .section-heading .quiet{font-size:10px;min-height:36px;padding:6px}
#screen[data-route="profile"] .profile-identity{padding:10px 12px;border:1px solid #ffffff13;border-radius:12px;background:linear-gradient(110deg,#101214,#08090b);gap:12px}
#screen[data-route="profile"] .profile-identity h2{font-size:20px;font-weight:500;line-height:1.25;margin:0}
#screen[data-route="profile"] .profile-identity .text-button{font-size:11px;color:var(--red);padding:5px 0;min-height:30px;text-align:left}
#screen[data-route="profile"] .level-badge{border:1px solid #9c742637;border-radius:8px;background:#0b0d0f;font-size:19px;min-width:55px;padding:7px}
#screen[data-route="profile"] .xp-line{font-size:10px;margin-top:9px}
#screen[data-route="profile"] .character-stage{min-height:230px;margin:6px 0;flex:1}
#screen[data-route="profile"] .brush-circle{width:80%;height:82%;top:7%;background:radial-gradient(ellipse,#601c1a44,#27100d15 65%,transparent 72%);border:2px solid #63211a55}
#screen[data-route="profile"] .character{width:84%;height:100%;max-height:600px;object-fit:contain}
#screen[data-route="profile"] .slot{width:88px;min-height:80px;gap:2px}
#screen[data-route="profile"] .slot-orb{width:51px;height:51px;overflow:hidden;border-color:#80704c;background:#090c10ec}
#screen[data-route="profile"] .slot.filled .slot-orb{border-color:var(--slot-rarity);box-shadow:0 0 15px color-mix(in srgb,var(--slot-rarity) 10%,transparent)}
#screen[data-route="profile"] .slot .sprite-art{width:100%;height:100%;position:relative;min-width:0;overflow:hidden}
#screen[data-route="profile"] .slot .sprite-art>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.48);clip-path:ellipse(46% 48% at 50% 55%)}
#screen[data-route="profile"] .slot-label{color:var(--gold);font-size:8px;text-transform:uppercase;letter-spacing:.6px;margin:3px 0 0}
#screen[data-route="profile"] .slot strong{font-size:9px;line-height:1.35;font-weight:400;max-width:88px}
#screen[data-route="profile"] .slot-head{right:0;top:0}
#screen[data-route="profile"] .slot-artifact{left:0;top:24%}
#screen[data-route="profile"] .slot-accessory{right:0;top:calc(50% - 40px)}
#screen[data-route="profile"] .slot-trophy{left:0;bottom:15px;top:auto}
#screen[data-route="profile"] .slot-weapon{right:0;bottom:0;top:auto}
#screen[data-route="profile"] .scene-note{font-size:6px;bottom:0;color:#777;letter-spacing:1px}
#screen[data-route="profile"] .bonus-strip{background:#0c0e10;border-color:#ffffff13;border-radius:10px;padding:10px 12px;min-height:60px}
#screen[data-route="profile"] .bonus-strip strong{font-size:19px;color:#e0bc72}
#screen[data-route="profile"] .bonus-strip small{font-size:9px}
#screen[data-route="profile"] .profile-collection{color:var(--gold);min-height:38px}
.profile-effects{display:flex;align-items:center;justify-content:center;gap:5px;background:none;border:0;color:var(--muted);font-size:10px;min-height:30px;padding:4px}
.profile-effects .icon{width:12px;height:12px}
.profile-preview-items{display:flex;justify-content:space-evenly;gap:12px;min-height:80px;height:90px;border:1px solid #ffffff14;border-radius:12px;background:linear-gradient(115deg,#0e1012,#08090b)}
.profile-preview-items button{position:relative;flex:1;min-width:0;border:0;background:none;padding:5px;display:flex;align-items:center;flex-direction:column;justify-content:center;color:var(--text)}
.profile-preview-items button:before{content:'';position:absolute;left:10px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--rarity)}
.profile-preview-items .sprite-art,.profile-preview-items .placeholder-art,.profile-preview-items .item-art{height:58px;width:100%;margin:0;object-fit:contain}
.profile-preview-items .sprite-art{position:relative}
.profile-preview-items .sprite-art>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);clip-path:ellipse(46% 48% at 50% 55%)}
.profile-preview-items .placeholder-art .icon{height:38px;width:38px}
.profile-preview-items button>span{font-size:8px;line-height:1.2}
@media(max-height:650px){
 .profile-preview-items{height:65px;min-height:65px}
 .profile-preview-items .sprite-art,.profile-preview-items .placeholder-art,.profile-preview-items .item-art{height:38px}
 .profile-preview-items .sprite-art>span{transform:translate(-50%,-50%) scale(.4)}
 #screen[data-route="profile"] .profile-identity{padding:5px 9px;gap:9px}
 #screen[data-route="profile"] .profile-identity .avatar{width:36px;height:40px}
 #screen[data-route="profile"] .profile-identity h2{font-size:17px}
 #screen[data-route="profile"] .character-stage{min-height:192px;margin:2px 0}
 #screen[data-route="profile"] .slot{width:78px;min-height:62px}
 #screen[data-route="profile"] .slot-orb{height:30px;width:30px}
 #screen[data-route="profile"] .slot strong{font-size:8px;max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #screen[data-route="profile"] .slot-head{top:0}
 #screen[data-route="profile"] .slot-accessory{top:34%}
 #screen[data-route="profile"] .slot-weapon,#screen[data-route="profile"] .slot-trophy{bottom:0}
 #screen[data-route="profile"] .slot-artifact{top:17%}
 #screen[data-route="profile"] .bonus-strip{min-height:48px;padding:5px 10px}
 #screen[data-route="profile"] .xp-line{margin-top:4px}
}
/* Reference-aligned composition: labels beside equipment, body as the visual anchor. */
#screen[data-route="profile"] .section-heading{margin-bottom:4px}
#screen[data-route="profile"] .section-heading h1{font-size:17px}
#screen[data-route="profile"] .profile-identity{padding:7px 10px;gap:10px}
#screen[data-route="profile"] .profile-identity h2{font-size:17px}
#screen[data-route="profile"] .level-badge{display:flex;align-items:center;gap:5px;flex-direction:row-reverse;font-size:12px;padding:8px;min-width:0;white-space:nowrap}
#screen[data-route="profile"] .level-badge small{font-size:8px;letter-spacing:0}
#screen[data-route="profile"] .character-stage{margin:6px -5px 0;min-height:230px}
#screen[data-route="profile"] .character{width:100%;height:100%;max-height:none;top:0;left:51%;pointer-events:none}
#screen[data-route="profile"] .brush-circle{width:92%;height:86%;top:5%;border-width:1px;background:radial-gradient(ellipse,#55181755,#2a101029 64%,transparent 73%)}
#screen[data-route="profile"] .slot{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;row-gap:2px;width:130px;min-height:52px;text-align:left;align-content:center;align-items:center}
#screen[data-route="profile"] .slot-orb{grid-row:1/3;width:52px;height:52px;background:#080b0ebd;position:relative}
#screen[data-route="profile"] .slot-label{align-self:end;font-size:8px;margin:0;letter-spacing:.2px}
#screen[data-route="profile"] .slot strong{align-self:start;font-size:9px;line-height:1.35;max-width:72px}
#screen[data-route="profile"] .slot:after{content:'';position:absolute;width:25px;height:10px;border-top:1px solid #b78a2d;border-left:1px solid #b78a2d;top:-6px;left:27px;opacity:.7;pointer-events:none}
#screen[data-route="profile"] .slot-head{top:6%;right:0}
#screen[data-route="profile"] .slot-artifact{top:34%;left:0;grid-template-columns:minmax(0,1fr) 52px;width:122px}
#screen[data-route="profile"] .slot-artifact .slot-orb,#screen[data-route="profile"] .slot-trophy .slot-orb{grid-column:2}
#screen[data-route="profile"] .slot-artifact .slot-label,#screen[data-route="profile"] .slot-trophy .slot-label{grid-column:1;grid-row:1}
#screen[data-route="profile"] .slot-artifact strong,#screen[data-route="profile"] .slot-trophy strong{grid-column:1;grid-row:2}
#screen[data-route="profile"] .slot-accessory{top:58%;right:0}
#screen[data-route="profile"] .slot-trophy{bottom:8%;left:0;grid-template-columns:minmax(0,1fr) 52px;width:122px}
#screen[data-route="profile"] .slot-weapon{bottom:0;right:0}
#screen[data-route="profile"] .scene-note{bottom:0;font-size:5px;opacity:.65}
.profile-effects{min-height:24px;font-size:9px}
#screen[data-route="profile"] .profile-collection{min-height:32px;font-size:10px}
#screen[data-route="profile"] .profile-collection>span:first-child{color:var(--text);font-size:12px}
.profile-preview-items{height:82px;min-height:70px}
@media(max-height:650px){
 #screen[data-route="profile"] .character-stage{min-height:192px;margin-top:3px}
 #screen[data-route="profile"] .slot{width:113px;grid-template-columns:42px minmax(0,1fr);min-height:42px;column-gap:4px}
 #screen[data-route="profile"] .slot-orb{width:42px;height:42px}
 #screen[data-route="profile"] .slot-artifact,#screen[data-route="profile"] .slot-trophy{width:108px;grid-template-columns:minmax(0,1fr) 42px}
 #screen[data-route="profile"] .slot strong{font-size:8px;white-space:normal;max-width:67px}
 #screen[data-route="profile"] .slot-label{font-size:7px}
 #screen[data-route="profile"] .slot-accessory{top:51%}
 .profile-preview-items{height:65px;min-height:65px}
}