/* wgf-transmog-wardrobe.css - the /transmog-set/ wardrobe layer (transmog_wardrobe_render).
 *
 * The client's character frame: a slot rail on each side of a full-height 3D stage, the weapon
 * row underneath. Linked only when the layer rendered (transmog_wardrobe_render.css_hrefs).
 * Palette: tokens from static/css/_tokens.css only, same plates and rules as
 * wgf-transmog-sets.css. No gradients, no glows.
 */
.wgf-tmw__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "left center right" "bottom bottom bottom";
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}
.wgf-tmw__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wgf-tmw__rail--left { grid-area: left; }
.wgf-tmw__rail--right { grid-area: right; }
.wgf-tmw__rail--bottom {
  grid-area: bottom;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.wgf-tmw__center { grid-area: center; min-width: 0; }
.wgf-tmw__rail:empty { display: none; }
/* A set that dresses only a few slots: no empty side rails, the stage takes the row. */
.wgf-tmw__frame:has(.wgf-tmw__rail--left:empty):has(.wgf-tmw__rail--right:empty) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "center" "bottom";
}
.wgf-tmw__frame:has(.wgf-tmw__rail--left:empty):has(.wgf-tmw__rail--right:empty) .wgf-tmw__center {
  width: 100%;
  max-width: 520px;
  justify-self: center;
}

.wgf-tmw__slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--wgf-well);
  border: 1px solid var(--wgf-well-edge);
  border-radius: 4px;
  min-width: 0;
}
.wgf-tmw__slot--empty { opacity: 0.55; }
.wgf-tmw__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--wgf-metal);
  border-radius: 3px;
  background: var(--wgf-well-edge);
}
.wgf-tmw__icon--empty { display: inline-block; }
.wgf-tmw__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wgf-tmw__slotname {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wgf-metal-soft);
}
.wgf-tmw__name { font-weight: 600; overflow-wrap: anywhere; color: var(--wgf-text); }
.wgf-tmw__name.q-poor { color: var(--q-poor); }
.wgf-tmw__name.q-common { color: var(--q-common); }
.wgf-tmw__name.q-uncommon { color: var(--q-uncommon); }
.wgf-tmw__name.q-rare { color: var(--q-rare); }
.wgf-tmw__name.q-epic { color: var(--q-epic); }
.wgf-tmw__name.q-legendary { color: var(--q-legendary); }
.wgf-tmw__name.q-artifact,
.wgf-tmw__name.q-heirloom { color: var(--q-artifact); }
.wgf-tmw__src,
.wgf-tmw__none,
.wgf-tmw__alt { font-size: 0.78rem; color: var(--wgf-neutral-text); }

.wgf-tmw__stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 62vh, 560px);
  background: var(--wgf-well);
  border: 1px solid var(--wgf-metal);
  border-radius: 6px;
  overflow: hidden;
}
.wgf-tmw__stage canvas { display: block; width: 100% !important; height: 100% !important;
  touch-action: none; }
.wgf-tmw__stage--static { height: auto; min-height: 220px; }
.wgf-tmw__plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}
.wgf-tmw__stage--static .wgf-tmw__plate { position: static; }
.wgf-tmw__plate img { border: 1px solid var(--wgf-metal); border-radius: 4px; }
.wgf-tmw__stage--live .wgf-tmw__plate { display: none; }
.wgf-tmw__caption { margin: 8px 0 4px; font-size: 0.85rem; color: var(--wgf-neutral-text); }
.wgf-tmw__cta { margin: 0; }

.wgf-tmw__list { margin: 8px 0 12px; padding-left: 1.2em; }
.wgf-tmw__list li { margin: 2px 0; }

@media (max-width: 860px) {
  .wgf-tmw__frame {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "center center" "left right" "bottom bottom";
  }
  .wgf-tmw__stage { height: clamp(320px, 70vw, 460px); }
}
@media (max-width: 520px) {
  .wgf-tmw__frame { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "center" "left" "right" "bottom"; }
  .wgf-tmw__rail--bottom { grid-template-columns: minmax(0, 1fr); }
}