/* "Your skins" wardrobe + 3D viewer. Colours come from the world tokens (style.css), so every world matches. */
.wardrobe-head { display: flex; gap: 12px 20px; align-items: end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.wardrobe-head h2 { margin-bottom: 4px; }
.wardrobe-head .dim { margin: 0; }
.wardrobe-tools { display: flex; gap: 12px; align-items: center; }
.skin-count { font: 600 .95rem var(--body); color: var(--text-dim); }
.side-seg, .w-group { display: inline-flex; border: 3px solid #0b0b0b; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.side-seg button, .w-group button { font: 700 .95rem var(--display); padding: 8px 14px; min-height: 40px; cursor: pointer; border: 0;
  color: var(--ink); background: var(--panel); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #6d6d6d; }
.side-seg button + button, .w-group button + button { border-left: 3px solid #0b0b0b; }
.side-seg button[aria-pressed="true"], .w-group button[aria-pressed="true"] { background: var(--gold); color: #2a1c00;
  box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-dark); }

.inventory { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.inventory .skin-card { padding: 10px; gap: 8px; }
.skin-card .slot { position: relative; width: 100%; height: 156px; display: grid; place-items: center;
  background: linear-gradient(var(--sky2, #1a2238), var(--sky3, #3a2d52) 78%, var(--top, #5bbf3a) 78% 84%, var(--soil, #7a5230) 84%);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .35), inset -3px -3px 0 rgba(255, 255, 255, .15); }
.skin-card canvas { width: 60px; height: 120px; image-rendering: pixelated; margin-bottom: 10px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.skin-card .peek { position: absolute; top: 6px; right: 6px; font: 700 .72rem var(--body); letter-spacing: .04em; padding: 2px 6px;
  color: #2a1c00; background: var(--gold); border: 2px solid #0b0b0b; }
.skin-card .cap { margin: 0; width: 100%; font: 500 .88rem/1.3 var(--body); color: var(--ink); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-card.on .slot { outline: 3px solid var(--gold); outline-offset: -3px; }
.skin-card .wear-btn { font: 700 .92rem var(--display); padding: 8px 12px; min-height: 40px; cursor: pointer; border: 2px solid #0b0b0b;
  color: var(--ink); background: #fff; }
.skin-card.on .wear-btn { background: var(--gold); color: #2a1c00; }

/* 3D viewer */
.wardrobe { width: min(860px, calc(100% - 24px)); }
.wardrobe .shop-head { align-items: start; }
.wardrobe h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); overflow-wrap: anywhere; }
.w-meta { margin: 0 0 2px; font: 600 .85rem var(--body); color: var(--ink-dim); }
.w-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 18px; padding: 6px 18px 18px; color: var(--ink); }
.w-stage { position: relative; min-height: 300px; display: grid; place-items: center; border: 3px solid #0b0b0b; overflow: hidden;
  background: linear-gradient(var(--sky1, #0e1320), var(--sky3, #3a2d52) 82%, var(--top, #5bbf3a) 82% 86%, var(--soil, #7a5230) 86%); }
.w-stage canvas { display: block; cursor: grab; touch-action: none; }
.w-stage canvas:active { cursor: grabbing; }
.w-hint { position: absolute; left: 10px; bottom: 8px; font: 600 .8rem var(--body); color: #fff; text-shadow: 0 1px 0 #000; opacity: .85; }
.w-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 56px; font: 700 1.8rem/1 var(--body); cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .45); border: 2px solid rgba(255, 255, 255, .5); }
.w-nav:hover { background: rgba(0, 0, 0, .65); }
.w-nav.prev { left: 8px; } .w-nav.next { right: 8px; }
.w-side { display: grid; gap: 14px; align-content: start; }
.w-group { flex-wrap: wrap; justify-self: start; }
.w-toggles button[aria-pressed="true"] { background: var(--grass); color: #10230a; box-shadow: inset 2px 2px 0 #8de06b, inset -2px -2px 0 var(--grass-dark); }
.w-tex { display: flex; gap: 12px; align-items: center; }
.w-tex img { width: 96px; height: 96px; image-rendering: pixelated; border: 2px solid #0b0b0b;
  background: repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.w-tex p { margin: 0; font: 500 .88rem/1.4 var(--body); color: var(--ink-dim); }
.w-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.w-actions .w-wear { width: 100%; }
.w-actions a, .w-actions button:not(.btn-gold) { font: 700 .92rem var(--display); padding: 8px 12px; min-height: 40px; cursor: pointer;
  text-decoration: none; border: 2px solid #0b0b0b; color: var(--ink); background: #fff; }
.w-actions .w-dl { color: #fff; background: var(--grass); box-shadow: inset 2px 2px 0 #8de06b, inset -2px -2px 0 var(--grass-dark); }
.w-actions .w-remove { color: #8a1c1c; margin-left: auto; }
.w-actions .w-remove[data-confirm="1"] { color: #fff; background: #b42318; }
@media (max-width: 720px) {
  .w-body { grid-template-columns: 1fr; padding: 4px 12px 14px; gap: 12px; }
  .w-stage { min-height: 260px; }
  .inventory { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .side-seg button, .w-group button, .skin-card .wear-btn, .w-actions a, .w-actions button, .w-nav { transition: transform .1s ease-out, filter .1s ease-out; }
  .side-seg button:active, .w-group button:active, .skin-card .wear-btn:active, .w-actions a:active, .w-actions button:active { transform: translateY(2px); }
  .skin-card .slot { transition: transform .12s steps(3, end); }
  .skin-card .slot:hover { transform: translateY(-3px); }
  .skin-card.new canvas { animation: reveal .45s steps(6, end) both; }
}