/* Integer 2x rendering of the native 96x112 canvas, including short desktops.
   The panel body scrolls if needed; the character is never squeezed or cropped. */
.equipment-stage{height:292px;min-height:292px;flex:none}
.equipment-hero{top:24px;width:192px;height:224px}
.equipment-appearance{display:block;position:relative;isolation:isolate;width:192px;height:224px;max-width:none;image-rendering:pixelated}
.equipment-appearance .equipment-piece,.equipment-appearance .equipment-base{display:contents}
.equipment-appearance img{position:absolute;inset:0;display:block;width:192px;height:224px;max-width:none;image-rendering:pixelated;pointer-events:none;user-select:none}
.equipment-stage .slot-backpack{bottom:5px;height:34px}
.equipment-hero-label{top:-18px}
@media(max-height:700px){
 .equipment-stage{height:286px;min-height:286px}
 .equipment-hero{top:20px;width:192px;height:224px}
 .equipment-stage .slot-backpack{bottom:4px;height:32px}
}
/* Short desktop windows keep the native 2x character and item actions visible.
   This is a desktop repair; mobile uses its own stacked touch layout. */
@media(min-width:1024px) and (max-height:740px){
 #panel[data-view=equipment]{width:660px}
 #panel[data-view=equipment] .panel-body{display:grid;grid-template-columns:minmax(310px,1fr) 260px;gap:10px;align-content:start;align-items:start}
 #panel[data-view=equipment] .equipment-stats,
 #panel[data-view=equipment] .notice,
 #panel[data-view=equipment] .equipment-note{grid-column:1/-1;margin:0}
 #panel[data-view=equipment] .equipment-stage{grid-column:1;margin:0}
 #panel[data-view=equipment] .slot-head,#panel[data-view=equipment] .slot-weapon,#panel[data-view=equipment] .slot-hands,#panel[data-view=equipment] .slot-belt{left:8px}
 #panel[data-view=equipment] .slot-body,#panel[data-view=equipment] .slot-offhand,#panel[data-view=equipment] .slot-cloak,#panel[data-view=equipment] .slot-feet{right:8px}
 #panel[data-view=equipment] .item-detail,
 #panel[data-view=equipment] .equipment-picker{grid-column:2;min-width:0;align-self:start}
 #panel[data-view=equipment] .item-detail{grid-template-columns:42px minmax(0,1fr);gap:8px;padding:12px}
 #panel[data-view=equipment] .detail-icon{width:42px;height:42px}
 #panel[data-view=equipment] .detail-icon .ng-art{width:32px;height:32px}
 #panel[data-view=equipment] .detail-kicker{flex-wrap:wrap;gap:2px 8px}
 #panel[data-view=equipment] .detail-actions{flex-direction:column}
 #panel[data-view=equipment] .detail-actions button{flex:auto;width:100%}
}