.avatar-badge {
  display:inline-flex;
  width:54px;
  height:54px;
  flex:none
}
.avatar-badge svg {
  width:100%;
  height:100%;
  overflow:visible
}
.frame-first-light {
  filter:drop-shadow(0 0 5px #b69c4a18)
}
.frame-starbound {
  filter:drop-shadow(0 0 6px #b3a0d038)
}

.companion-button {
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer
}
.companion-button>span:last-child {
  font-size:12px;
  text-align:left;
  color:#afafaf
}
.companion-button small {
  display:block;
  color:#7b7b7b;
  font-size:10px;
  margin-top:5px
}

#wardrobe-dialog {
  width:min(720px,calc(100vw - 28px));
  max-height:90dvh;
  padding:38px;
  border:1px solid #8177615c;
  border-radius:12px;
  background:#000000f5;
  color:#dcdcdc;
  box-shadow:0 30px 100px #000c;
  overflow:auto
}
#wardrobe-dialog::backdrop {
  background:#010201ce;
  backdrop-filter:blur(5px)
}

.wardrobe-kicker {
  font-size:10px;
  letter-spacing:2px;
  color:#8c8c8c
}
.wardrobe-heading h2 {
  font-size:32px;
  margin:13px 0
}
.wardrobe-heading p {
  color:#9c9c9c;
  font-size:14px;
  line-height:1.6;
  margin:0
}
.wardrobe-preview {
  display:flex;
  align-items:center;
  gap:20px;
  margin:25px 0 30px;
  border-bottom:1px solid #d8c49724;
  padding-bottom:24px
}
.wardrobe-preview>.avatar-badge {
  width:100px;
  height:100px
}
.wardrobe-preview>span:last-child {
  font-size:22px;
  color:#dadada
}
.wardrobe-preview small {
  display:block;
  font-size:12px;
  color:#979797;
  margin-top:7px
}

.wardrobe-section {
  margin-top:24px
}
.wardrobe-section h3 {
  font-size:17px;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.wardrobe-section h3 span {
  color:#858585;
  font-size:11px
}
.cosmetic-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}
.cosmetic-option {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:#111111;
  border:1px solid #c5b99425;
  border-radius:8px;
  padding:18px 8px 15px;
  cursor:pointer;
  min-width:0;
  color:#b8b8b8
}
.cosmetic-option>.avatar-badge {
  width:70px;
  height:70px
}
.cosmetic-option strong {
  font-size:12px
}
.cosmetic-option small {
  font-size:10px;
  color:#848484
}
.cosmetic-option:hover {
  background:#202020;
  border-color:#9b9b9b88
}
.cosmetic-option.equipped {
  background:#25231866;
  border-color:#a1a1a199
}
.cosmetic-option.equipped small {
  color:#aaaaaa
}
.cosmetic-option.cosmetic-locked {
  opacity:.48;
  cursor:default
}
.wardrobe-footnote {
  font-size:11px;
  line-height:1.6;
  color:#868686;
  margin:26px 0 0
}

@media(max-width:600px) {
  #wardrobe-dialog {
  padding:27px 20px;
  max-height:92dvh
}
.cosmetic-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.companion-button .avatar-badge {
  width:43px;
  height:43px
}
.companion-button>span:last-child {
  display:none
}
.wardrobe-section h3 span {
  font-size:10px
}
.wardrobe-heading h2 {
  font-size:27px
}

}