/* ===== StarrKit — Skins (galerie + showcase 3D) ===== */
.skins-showcase { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 18px; }
.skins-hint { color: var(--text-dim); font-size: .85rem; text-align: center; max-width: 420px; }

.skins-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.skin-card {
    display: flex; flex-direction: column; gap: 8px; padding: 14px; cursor: pointer;
    background: var(--surface); border: 2px solid var(--border); border-radius: 16px;
    box-shadow: 0 5px 0 var(--border); transition: transform .12s ease;
}
.skin-card:hover { transform: translateY(-3px); }
.skin-card.is-active { border-color: var(--cta); }
.skin-card.rarity-rare      { border-left: 5px solid var(--good); }
.skin-card.rarity-epic      { border-left: 5px solid #c084fc; }
.skin-card.rarity-legendary { border-left: 5px solid var(--gold); }

.skin-thumb { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent), var(--accent-2)); }
.skin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.skin-thumb span { font-family: var(--display); font-size: 2.4rem; color: var(--accent-contrast); }

.skin-meta { display: flex; flex-direction: column; }
.skin-name { font-family: var(--display); }
.skin-brawler { font-size: .78rem; color: var(--text-dim); }
.skin-action { margin-top: auto; }

/* ===== Drill-down par brawler ===== */
.skins-brawlers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); align-items: start; }
.brawler-group { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; box-shadow: 0 5px 0 var(--border); overflow: hidden; }
.brawler-group[open] { grid-column: 1 / -1; }
.brawler-group.has-active { border-color: var(--cta); }
.brawler-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; }
.brawler-tile::-webkit-details-marker { display: none; }
.brawler-tile__img { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent), var(--accent-2)); }
.brawler-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.brawler-tile__img span { font-family: var(--display); font-size: 1.5rem; color: var(--accent-contrast); }
.brawler-tile__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.brawler-tile__name { font-family: var(--display); }
.brawler-tile__count { font-size: .78rem; color: var(--text-dim); }
.brawler-tile__chevron { transition: transform .15s ease; color: var(--text-dim); font-size: 1.1rem; }
.brawler-group[open] .brawler-tile__chevron { transform: rotate(180deg); }
.brawler-group > .skins-gallery { padding: 4px 14px 16px; }

/* Raretés — bordure gauche (compléments) */
.skin-card.rarity-super_rare  { border-left: 5px solid #3b82f6; }
.skin-card.rarity-mythic      { border-left: 5px solid #ef4444; }
.skin-card.rarity-hypercharge { border-left: 5px solid #f472b6; }