/* ═══════════════════════════════════════════════════════════════════════════════
   BLOC TCG — AVATAR & WARDROBE STYLES
   Contract: LOBBY-PLAN.md (Wave 2 / Workstream E)
   Paper-doll compositor, Z-order layers, and wardrobe modal.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── PAPER-DOLL COMPOSITOR ── */
.paper-doll {
  position: relative;
  width: 180px;
  height: 360px;
  max-width: 100%;
  aspect-ratio: 256 / 512;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  user-select: none;
}

.paper-doll-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* Z-Index Hierarchy (LOBBY-PLAN.md Section 3.5)
   aura(back) < bottom < kicks < top < head < acc < aura(front) */
.layer-body         { z-index: 15; }
.layer-aura-back    { z-index: 10; filter: blur(3px); }
.layer-bottom       { z-index: 20; }
.layer-kicks        { z-index: 30; }
.layer-top          { z-index: 40; }
.layer-head         { z-index: 50; }
.layer-acc          { z-index: 60; }
.layer-aura-front   { z-index: 70; }

/* ── WARDROBE OVERLAY ── */
#wardrobe-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  flex-direction: column;
  color: var(--text, #efefef);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#wardrobe-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Header */
#wardrobe-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 16, 24, 0.7);
  flex-shrink: 0;
}

#wardrobe-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 3px;
  color: var(--gold, #d4af37);
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
  margin: 0;
}

#wardrobe-hdr-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Two-column Main Workspace */
#wardrobe-main {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 16px;
  padding: 12px 20px;
}

/* Left: Live Preview Panel */
#wardrobe-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(35, 35, 50, 0.5) 0%, rgba(12, 12, 18, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

#wardrobe-preview-panel::after {
  content: '';
  position: absolute;
  bottom: 20px;
  width: 140px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
}

#wardrobe-preview-doll {
  width: clamp(140px, 22vw, 210px);
  height: clamp(280px, 44vw, 420px);
  z-index: 2;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.7));
}

#wardrobe-preview-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--muted, #888);
  text-transform: uppercase;
  margin-top: 8px;
}

/* Right: Slot Selection & Items Grid */
#wardrobe-selector-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

/* Slot Tabs */
#wardrobe-slot-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.wardrobe-slot-tab {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted, #888);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.wardrobe-slot-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.wardrobe-slot-tab.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.08) 100%);
  border-color: var(--gold, #d4af37);
  color: var(--gold, #d4af37);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

/* Items Grid */
#wardrobe-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  overflow-y: auto;
  padding-right: 6px;
  flex: 1;
}

.wardrobe-item-card {
  position: relative;
  background: rgba(18, 18, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.wardrobe-item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(26, 26, 38, 0.95);
}

.wardrobe-item-card.equipped {
  border-color: var(--gold, #d4af37);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}

.wardrobe-item-thumb {
  width: 70px;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.wardrobe-item-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.wardrobe-item-rarity {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.rarity-common    { color: #aaa; background: rgba(255, 255, 255, 0.06); }
.rarity-rare      { color: #4FC3F7; background: rgba(79, 195, 247, 0.12); }
.rarity-epic      { color: #CE93D8; background: rgba(206, 147, 216, 0.15); }
.rarity-legendary { color: #D4AF37; background: rgba(212, 175, 55, 0.18); text-shadow: 0 0 8px rgba(212, 175, 55, 0.4); }

.wardrobe-equipped-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.65rem;
  background: var(--gold, #d4af37);
  color: #000;
  font-weight: 900;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Palette Swatches Bar */
#wardrobe-palette-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

#wardrobe-palette-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--muted, #888);
  text-transform: uppercase;
}

#wardrobe-palette-swatches {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.palette-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: transform 0.2s, border-color 0.2s;
}

.palette-swatch:hover {
  transform: scale(1.15);
  border-color: #fff;
}

.palette-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  transform: scale(1.12);
}

/* ── COMPACT LANDSCAPE TIERS ── */
@media (max-height: 500px) {
  #wardrobe-hdr { padding: 4px 14px; }
  #wardrobe-title { font-size: 1.2rem; }
  #wardrobe-main { padding: 6px 14px; gap: 10px; }
  #wardrobe-preview-doll {
    width: clamp(100px, 18vw, 150px);
    height: clamp(200px, 36vw, 300px);
  }
  .wardrobe-item-thumb { width: 50px; height: 70px; }
  .palette-swatch { width: 22px; height: 22px; }
}