/* Une carte (composant commun) : Exchange Center, boutique TwinPoints, fenêtres...
   data-rarete donne la couleur de la bordure : common, uncommon, rare, double, ir, ultra, sir, hyper, mega_hyper
   Classe owned = petit coche verte (carte possédée). */

.trade-card {
  --c: #9aa0ad;                      /* couleur de la rareté, changée par data-rarete */
  position: relative;
  overflow: hidden;                  /* l'effet holo ne dépasse pas de la carte */
  padding: 6px;
  border: 2px solid var(--c);
  border-radius: 8px;
  background-color: #0f1117;
  text-align: center;
}

.trade-card[data-rarete="rare"]   { --c: #12b5f0; }
.trade-card[data-rarete="double"] { --c: #2ecc71; }
.trade-card[data-rarete="ir"]     { --c: #a66bff; }
.trade-card[data-rarete="sir"]    { --c: #ff5fa2; }
.trade-card[data-rarete="hyper"]  { --c: #eab711; }
.trade-card[data-rarete="uncommon"]   { --c: #c3c8d4; }
.trade-card[data-rarete="ultra"]      { --c: #8a7dff; }
.trade-card[data-rarete="mega_hyper"] { --c: #eab711; }

.trade-card img {
  display: block;
  width: 100%;
  aspect-ratio: 600 / 825;           /* proportions des images TCGdex : la carte garde sa taille pendant le chargement */
  object-fit: cover;
  border-radius: 4px;
  background-color: #1a1d27;         /* fond gris foncé tant que l'image n'est pas chargée */
}

.trade-card p {
  margin: 4px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;           /* "Tony Tony Cho…" si le nom est trop long */
}

.trade-card .trade-card-name {
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;
}

.trade-card .trade-card-info {
  font-size: 0.7rem;
  color: #9aa0ad;
}

.trade-card .rarity {
  width: 7px;
  height: 7px;
  margin-right: 4px;
}

/* Carte demandée que le joueur possède : petit ✓ en haut à droite */
.trade-card.owned::before {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #2ecc71;
  color: #0f1117;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 20px;
}