/* ============================================================
   LE TRAK-EUR — droidex.css
   Styles spécifiques à la page Droidex.
   ============================================================ */

:root{
  /* paliers de rareté déjà définis dans style.css (--tier-*) */
}

.droidex-page{ max-width:1080px; }

/* --- bloc principal : titre + compteur global + barre --- */
.droidex-hero{ margin-bottom:36px; }

.droidex-progress{ margin-top:22px; }
.droidex-count-row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px;
}
.droidex-count{
  font-family:var(--font-mono);
  font-size:1.6rem;
  color:var(--text);
}
.droidex-pct{
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--accent);
}
.progress-bar{
  height:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent), #6bffcf);
  box-shadow: 0 0 12px rgba(63,231,200,.5);
  transition: width .35s ease;
}

/* --- sélecteur de variantes (7 raretés + Iconique) --- */
.variant-section{ margin-bottom:22px; }
.variant-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap:12px;
}
.variant-card{
  --vc: var(--accent);
  cursor:pointer;
  text-align:left;
  padding:14px 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  font-family:var(--font-ui);
  display:flex; flex-direction:column; gap:5px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.variant-card:hover{ transform:translateY(-2px); border-color: rgba(255,255,255,.25); }
.variant-card.active{
  border-color: var(--vc);
  box-shadow: 0 0 0 1px var(--vc), 0 0 22px -6px var(--vc);
}
.variant-name{ font-weight:700; font-size:.98rem; color: var(--vc); }
.variant-count{ font-family:var(--font-mono); font-size:.82rem; color:var(--text-dim); }

/* Beskar : reflet métallique animé */
.variant-card[data-variant="beskar"] .variant-name,
.droid-grid-title[data-variant="beskar"]{
  background: linear-gradient(100deg, #8b929c 20%, #f4f6fa 45%, #8b929c 70%);
  background-size: 220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shine 3.5s linear infinite;
}
@keyframes shine{ to{ background-position: -220% center; } }

/* Arc-en-ciel : dégradé animé */
.variant-card[data-variant="rainbow"] .variant-name,
.droid-grid-title[data-variant="rainbow"]{
  background: linear-gradient(90deg, #ff5f6d, #ffc93c, #6bffcf, #7fd7ff, #a56bff, #ff5f6d);
  background-size: 300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: rainbow 5s linear infinite;
}
@keyframes rainbow{ to{ background-position: -300% center; } }
.variant-card[data-variant="rainbow"].active{
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 22px -4px #a56bff;
}

/* Iconique : léger scintillement doré */
.variant-card[data-variant="iconic"] .variant-name{
  color: var(--tier-iconic);
  text-shadow: 0 0 10px rgba(255,244,138,.5);
}
.variant-card[data-variant="iconic"].active{
  border-color: var(--tier-iconic);
  box-shadow: 0 0 0 1px var(--tier-iconic), 0 0 22px -6px var(--tier-iconic);
}

/* --- grille des droïdes --- */
.droid-section{ margin-bottom:24px; }
.droid-grid-title{
  --vc: var(--accent);
  font-family:var(--font-display);
  font-size:1.1rem; letter-spacing:.04em;
  color: var(--vc);
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px;
}
.droid-grid-sub{
  font-family:var(--font-ui); font-weight:600; font-size:.78rem;
  color:var(--text-dim); text-transform:none; letter-spacing:0;
}

.droid-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:12px;
}
.droid-card{
  --rc: var(--accent);
  cursor:pointer;
  text-align:center;
  padding:12px 10px 14px;
  background: rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text-dim);
  font-family:var(--font-ui);
  transition: all .15s ease;
}
.droid-card:hover{ transform:translateY(-1px); border-color: rgba(255,255,255,.2); }
.droid-card.owned{
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-color: var(--rc);
  box-shadow: 0 0 14px -6px var(--rc);
}

.droid-img-wrap{
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
  border-radius:6px;
  background: rgba(255,255,255,0.02);
}
.droid-img{
  width:100%; height:100%; object-fit:contain;
  filter: grayscale(1) brightness(.55);
  opacity:.35;
  transition: filter .2s ease, opacity .2s ease;
}
.droid-card.owned .droid-img{
  filter:none;
  opacity:1;
}
.droid-img-missing{
  width:60%; height:60%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim);
  font-size:.7rem;
  text-align:center;
  opacity:.5;
}

.droid-name{
  display:block;
  font-weight:700; font-size:.86rem;
  letter-spacing:.02em;
  color:var(--text-dim);
}
.droid-card.owned .droid-name{ color:var(--text); }

.droid-tier{
  display:block;
  font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin-top:3px;
}
.droid-power{
  display:block;
  font-size:.72rem; font-weight:500;
  color:var(--text-dim);
  margin-top:6px;
  line-height:1.35;
}

.empty-state{
  padding:32px 16px;
  text-align:center;
  color:var(--text-dim);
  font-size:.9rem;
  border:1px dashed var(--line);
  border-radius:10px;
}

@media (max-width:520px){
  .variant-grid{ grid-template-columns: repeat(2, 1fr); }
  .droid-grid{ grid-template-columns: repeat(2, 1fr); }
  .toolbar{ flex-direction:column; }
  .filter-select{ width:100%; }
}