/* ============================================================
   ENKO — wardrobe page (PFP maker), enko design system
   ============================================================ */

/* ══════════════════════════════════════
   New wardrobe layout (3-col, matches enko reference)
══════════════════════════════════════ */

/* portrait frame must be square for canvas */
.wardrobe-portrait .portrait-frame {
  aspect-ratio: 1 !important;
  width: 100%;
  max-width: 100%;
}
.wardrobe-portrait .portrait-frame #ppc {
  width: 100%; height: 100%; display: none;
}
.wardrobe-portrait .portrait-frame .port-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); font-style: italic;
}

/* wardrobe head right column */
.wardrobe-head-right {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.wardrobe-head-right p {
  font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 44ch;
}

/* swatch image — absolute fill */
.swatch img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* backgrounds cover, characters/accessories contain */
.swatch-grid.bg-grid .swatch img { object-fit: cover; }
.swatch-grid:not(.bg-grid) .swatch img { object-fit: contain; padding: 6px; }

/* drag-hint inside portrait-meta cell */
.portrait-meta .drag-hint {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: opacity .4s;
}

/* ── WARDROBE NAV (back button style) ── */
.wd-back {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule);
  color: var(--ink-soft); padding: .4rem 1rem; cursor: pointer;
  transition: all .2s;
  width: fit-content;
}
.wd-back:hover { border-color: var(--ink); color: var(--ink); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .wardrobe-grid { grid-template-columns: 1fr !important; }
  .wardrobe-summary { display: none; }
}