/* V32 (refine audit RUI-10): an owned Legendary outfit in Collection > Characters shows its Magic Stars (three stars and
   an "N of 3 Magic Stars" label between the picture and Equip) and, while a next star can be refined, a Refine button to
   the Shop's Legendary tab in the Shop's refine colours. Text keeps the 11px floor and 4.5:1 contrast (#6d5320 on the
   Legendary card's #fff3c8: 6.5:1; #4f2470 on the button: 7.7:1). Screens 601 x 601 and up give the card row a fixed
   height (collection-ownership-v32.css): every card keeps its box, Refine sits beside Equip and only this card's picture
   gives up the star row's height (one 13px line down to 1280 x 720). Phones keep their scrolling strip: Refine goes
   under Equip, 8px apart. The label is a span: the old `.skin-card small` rules (teal, 7-9px) must not reach it. */
.skins-cards .skin-card .skin-stars{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px 3px;margin:5px 0 0;padding:0;color:#6d5320;font:800 11px/13px 'Nunito Sans',sans-serif;letter-spacing:0;text-align:center}
.skins-cards .skin-stars-icons{display:inline-flex;gap:0}
.skins-cards .skin-stars-icons span{display:block}
.skins-cards .skin-stars svg{display:block;width:11px;height:11px;fill:#d9d3c3;stroke:#a89c7c;stroke-width:1.5}
.skins-cards .skin-stars [data-lit=true] svg{fill:#ffcf3f;stroke:#b8841d}
.skins-cards .skin-stars-label{white-space:nowrap}
.skins-cards .skin-card[data-rarity=legendary] .skin-refine{padding-left:3px;padding-right:3px;background:linear-gradient(#fbf1ff,#e5c9fb);border-color:#fbefff;color:#4f2470;box-shadow:0 3px 0 #9e6fc6}
@media (min-width:601px) and (min-height:601px){
 #profile-dialog .skins-cards .skin-card[data-refine=true]{display:grid;grid-template:minmax(0,1fr) auto auto/minmax(0,1fr) auto;column-gap:3px}
 #profile-dialog .skins-cards .skin-card[data-refine=true]>:not(button){grid-column:1/-1}
}