/* Everheim Online Idle - Costumes (wardrobe slots, costume items). Uses the tokens from style.css (light + dark). */
:root {
  /* costume rarity: orchid, apart from the blue/purple gear tiers and the gold uniques */
  --r-costume: #a1306f;
  --r-costume-line: #dc93bd;
  --r-costume-tint: rgba(200, 80, 150, 0.13);
}
:root[data-theme="dark"] {
  --r-costume: #f2a9d2;
  --r-costume-line: #8e4f78;
  --r-costume-tint: rgba(242, 140, 200, 0.14);
}

/* rarity colour + frame, same pattern as the gear tiers in style.css */
.r-costume, .tt-name.r-costume, .eq-slot.r-costume .eq-name { color: var(--r-costume); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico, .costume-ico).r-costume {
  border-color: var(--r-costume-line);
  background-image: linear-gradient(180deg, transparent 40%, var(--r-costume-tint)), var(--tile-bg);
}
.tile.sel.r-costume { border-color: var(--sel); }

/* the inventory tab bar gained a 7th tab (Costumes): tighter tabs keep it on one line in the side panel */
.tabs:has(> .tab[data-key="inv"]) .tab { padding-inline: 8px; }
.tabs:has(> .tab[data-key="inv"]) .tab::after { left: 6px; right: 6px; }

/* "worn" badge on bag tiles (left corner: the lock sits on the right) */
.tile .eqd.worn { right: auto; left: 3px; background: var(--r-costume); color: var(--surface-1); }

.pill.costume-pill { color: var(--r-costume); border-color: var(--r-costume-line); background: var(--r-costume-tint); }
.pill.costume-src { color: var(--text-muted); }

/* tooltip */
.tt-costume { color: var(--text-strong); }
.tt-costume b { color: var(--r-costume); }
.tt-worn { color: var(--good-text, var(--good)); font-weight: 700; }

/* ------------------------------------------------------------------ Character panel: costume slots */
.costume-card .card-head .h4 { margin: 0; }
.costume-grid .eq-slot:last-child:nth-child(odd) { grid-column: 1 / -1; }
.costume-card.is-hidden .costume-slot:not(.empty) { opacity: 0.55; }
.costume-card.is-hidden .costume-slot:not(.empty) .eq-name { text-decoration: line-through; text-decoration-color: var(--text-faint); }

/* ------------------------------------------------------------------ try-on previews */
.costume-preview {
  display: block; flex: none; border-radius: var(--radius); border: 1px solid var(--r-costume-line);
  background: var(--portrait-bg); box-shadow: 0 0 0 3px var(--r-costume-tint); object-fit: contain;
}
.costume-preview:not(.ready) { background-image: linear-gradient(110deg, transparent 30%, var(--gloss-soft, rgba(255, 255, 255, 0.08)) 50%, transparent 70%), var(--portrait-bg); }

.costume-sel .costume-sel-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.costume-desc { color: var(--text-soft); }
.costume-try { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.costume-try figcaption { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }

/* ------------------------------------------------------------------ Market wardrobe */
.costume-list { display: flex; flex-direction: column; }
.costume-row { cursor: pointer; }
.costume-row:hover { background: var(--sel-softer); }
.costume-row.open { background: var(--sel-softer); border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--sel); }
.costume-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.costume-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--tile-bg); }
.costume-detail {
  display: flex; gap: var(--s-3, 12px); align-items: flex-start; padding: 8px 8px 12px 14px;
  border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--sel-softer), transparent);
}
.costume-detail .grow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

@media (max-width: 520px) {
  .costume-sel > .row { flex-wrap: wrap; }
  .costume-detail { flex-direction: column; align-items: center; }
}