/* Tactile card surfaces. Frame, navigation and economic rules belong elsewhere. */
#skillsPanel .loadout-collection-card,#shopPanel .shop-card{transition:transform 140ms ease,box-shadow 140ms ease,border-color 140ms ease;transform-origin:center 65%;}
#skillsPanel .loadout-card-select{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;}
#skillsPanel .loadout-collection-card:focus-within,#shopPanel .shop-card:focus-within{border-color:#f1d59a;box-shadow:0 4px 15px #0005,0 0 0 1px #dabb7377;}
@media(hover:hover) and (pointer:fine){
 #skillsPanel:not(.is-dragging) .loadout-collection-card:hover,#shopPanel .shop-card:hover{transform:translateY(-3px);border-color:#e7c98b;box-shadow:0 9px 20px #08050c88;}
 #skillsPanel .loadout-card-select:active,#shopPanel .shop-inspect:active{transform:scale(.985);}
}
#skillsPanel.is-dragging,#skillsPanel.is-dragging *{cursor:grabbing!important;user-select:none!important;}
#skillsPanel .loadout-collection-card.is-card-lifted{opacity:.25;transform:scale(.985);border-style:dashed;box-shadow:inset 0 0 0 2px #c9a86555;}
#skillsPanel .is-card-lifted .is-drag-source{opacity:1;}
#skillsPanel .loadout-slot.is-card-lifted{opacity:.3;}
#skillsPanel .loadout-slot-grid>.loadout-slot{position:relative;height:122px;min-height:122px;padding:19px 4px 5px;gap:3px;border-radius:5px;transition:border-color 100ms ease,box-shadow 100ms ease;}
#skillsPanel .loadout-slot-art{display:block;width:100%;height:52px;min-height:24px;flex:1;overflow:hidden;border-radius:2px;}
#skillsPanel .loadout-slot-art .card-medallion{width:28px;height:28px;border-width:1px;box-shadow:none;}
#skillsPanel .loadout-slot-art .card-medallion svg{width:80%;height:80%;}
#skillsPanel .loadout-slot-identity{display:block;max-width:100%;font:9px/1.15 system-ui,sans-serif;color:var(--card-accent,#dec28e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#skillsPanel .loadout-slot-label{display:block;font-size:11px;line-height:12px;min-height:24px;max-height:none;}
#skillsPanel .loadout-slot-key{position:absolute;z-index:2;top:2px;left:5px;min-width:15px;padding:1px 3px;background:#1b111be6;border:1px solid #c9a56b55;border-radius:2px;}
#skillsPanel .loadout-slot[data-empty=true] .loadout-slot-art{display:grid;place-items:center;}
#skillsPanel.is-dragging .loadout-slot:not(:disabled){border-color:#d4b46c;box-shadow:inset 0 0 0 1px #d4b46c33;}
#skillsPanel.is-dragging .loadout-slot.is-drop-target{border-color:#fff0b7;box-shadow:0 0 0 2px #f2ce80,0 8px 18px #0007;}
#skillsPanel .loadout-slot.is-drop-target:after{content:attr(data-drop-action);position:absolute;inset:auto 0 0;padding:5px 2px;background:#422333f5;border-top:1px solid #f2ce80;color:#fff0c1;font:600 11px/1.2 system-ui,sans-serif;text-align:center;}
#skillsPanel .loadout-slot.is-card-settled{animation:card-settle 230ms ease-out;}
@keyframes card-settle{0%{transform:scale(1.045);box-shadow:0 0 0 3px #ffe2a0;}100%{transform:none;box-shadow:0 0 0 0 #ffe2a000;}}
.loadout-drag-ghost{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important;contain:layout style;}
.loadout-drag-ghost *{pointer-events:none!important;}
@media(max-height:620px) and (orientation:landscape){
 #skillsPanel .loadout-slot-grid>.loadout-slot{height:86px;min-height:86px;padding:16px 2px 3px;gap:2px;}
 #skillsPanel .loadout-slot-art{height:30px;min-height:24px;}
 #skillsPanel .loadout-slot-identity{font-size:9px;line-height:10px;}
 #skillsPanel .loadout-slot-label{font-size:10px;line-height:10px;min-height:20px;}
}
@media(max-width:700px) and (orientation:portrait){
 #skillsPanel .loadout-slot-grid>.loadout-slot{height:88px;min-height:88px;padding:17px 2px 3px;gap:2px;}
 #skillsPanel .loadout-slot-art{height:30px;min-height:24px;}
 #skillsPanel .loadout-slot-label{font-size:10px;line-height:11px;min-height:22px;}
}
@media(prefers-reduced-motion:reduce){
 #skillsPanel .loadout-collection-card,#shopPanel .shop-card,#skillsPanel .loadout-slot{transition:none!important;animation:none!important;transform:none!important;}
 #skillsPanel .loadout-card-select:active,#shopPanel .shop-inspect:active{transform:none!important;}
 .loadout-drag-ghost{transform:none!important;}
}
@media(forced-colors:active){#skillsPanel .loadout-slot.is-drop-target{outline:3px solid Highlight;}#skillsPanel .loadout-slot.is-drop-target:after{background:Canvas;color:CanvasText;border-color:CanvasText;}}