#skinsDialog{width:min(1080px,calc(100% - var(--hud-space-4)));max-width:calc(100% - var(--hud-space-4));height:min(860px,calc(100dvh - var(--hud-space-4)));max-height:calc(100dvh - var(--hud-space-4));box-sizing:border-box;overflow:hidden;padding:0;}
#skinsDialog[open]{display:flex;flex-direction:column;}
#skinsDialog h2,#skinsDialog h3,#skinsDialog p{margin:0;}
#skinsDialog h2,#skinsDialog h3{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-label);}
.skinsHeader{flex:none;justify-content:space-between;background:var(--hud-surface-overlay);padding:var(--hud-space-4);border-bottom:var(--hud-border-width) solid var(--hud-border-subtle);}
.skinsScroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 var(--hud-space-4) var(--hud-space-4);}
.skinsTools[hidden]{display:none;}
.skinsNav,.skinsTools{margin-block:var(--hud-space-4);}
.skinsTools.hud-row{align-items:flex-end;}
.skinsTools label{flex:1;min-width:0;}
.skinsTools input{display:block;box-sizing:border-box;width:100%;}
.skinsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--hud-space-3);}
.skinCard{min-width:0;overflow-wrap:anywhere;}
.skinCard .btn{margin-top:auto;}
.skinsArt{display:block;width:128px;height:128px;align-self:center;background-repeat:no-repeat;image-rendering:pixelated;}
.skinsDetailArt{width:min(240px,70vw);height:min(240px,70vw);}
.skinsHeroGrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));margin-top:var(--hud-space-3);}
.skinsHeroStage{display:grid;place-items:center;position:relative;padding:var(--hud-space-4);min-width:0;}
.skinsHeroStage .skinsArt{width:100%;height:236px;background:transparent;}
.skinsHeroStage:has(.skinsDetailArt) .skinsArt{height:360px;}
.skinsHeroStage:has(.skinsDetailArt){margin-block:var(--hud-space-2);}
.skinCard:has(.skinsHeroStage) h3{color:var(--hud-accent);}
@media(max-width:600px){.skinsHeroStage .skinsArt{height:220px;}.skinsHeroStage:has(.skinsDetailArt) .skinsArt{height:280px;}}
.skinsMeter{width:100%;accent-color:var(--hud-accent);}
.skinsStatus{color:var(--hud-accent);font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);}
.skinsConcept{display:block;width:100%;max-height:380px;object-fit:contain;image-rendering:pixelated;}
.rankRewardArt{position:relative;display:block;width:128px;height:128px;overflow:hidden;align-self:center;}
.rankRewardArt img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
.rankRewardAtlas img{width:300%;height:300%;max-width:none;object-fit:fill;}
.skinsDetail{max-width:580px;margin-inline:auto;}
.skinsDetail .btn{white-space:normal;}
#skinsNotice{margin-top:var(--hud-space-3);}
.progressionSummaryArt{width:48px;height:48px;flex:none;image-rendering:pixelated;}
#progressionSummary{padding:var(--hud-space-2);font-size:var(--hud-text-sm);}
#progressionSummary .hud-row>div{flex:1;min-width:0;}
@media(max-width:600px){.skinsHeader{padding:var(--hud-space-3);align-items:flex-start;}.skinsScroll{padding:0 var(--hud-space-3) var(--hud-space-3);}.skinsArt{width:112px;height:112px;}.skinsNav>*{flex:1;}.skinsGrid{grid-template-columns:1fr;}}