/* ---------- cartes */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px }
/* toutes les cartes ont la même taille : image à proportions fixes, titre sur 2 lignes exactement */
.card { position:relative; border-radius:14px; background:var(--surface); overflow:hidden; cursor:pointer;
  box-shadow:0 0 0 2px var(--t), var(--shadow); display:flex; flex-direction:column; transition:transform .15s }
@media (hover:hover) { .card:hover { transform:translateY(-3px) } }
.card .art { flex:none; aspect-ratio:10/11; background:var(--surface2); position:relative; overflow:hidden }
.card .art img.art-main { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block }
.card .body { padding:8px 9px 9px; display:flex; flex-direction:column; gap:3px; border-top:2px solid var(--t) }
.card .name { font-weight:700; font-size:13.5px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; height:2.4em }
.card .kind { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card .qty { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; font-weight:800;
  padding:2px 8px; border-radius:999px }
.card .new { position:absolute; bottom:8px; right:8px; background:var(--good); color:#fff; font-size:11px; font-weight:800;
  padding:2px 8px; border-radius:6px }
.card .price { position:absolute; bottom:8px; left:8px; display:flex; gap:5px; align-items:center; background:rgba(0,0,0,.72);
  color:#fff; font-weight:800; font-size:13px; padding:3px 9px; border-radius:999px }
.card, .bigcard, .thumb { --t:var(--common) }
.t-common { --t:var(--common) } .t-uncommon { --t:var(--uncommon) } .t-rare { --t:var(--rare) }
.t-epic { --t:var(--epic) } .t-legendary { --t:var(--legendary) }
/* La finition et la géométrie des cinq raretés sont centralisées dans rarity.css. */
.noimg { display:flex; align-items:center; justify-content:center; height:100%; font-size:34px; font-weight:800;
  color:color-mix(in srgb, var(--t) 70%, var(--muted)); background:color-mix(in srgb, var(--t) 12%, var(--surface2)) }

/* étiquettes d'une carte : marqueur de série en haut, prix, quantité et « Nouvelle » en bas. */
.card .ctop, .card .cbot { position:absolute; left:8px; right:8px; z-index:4; display:flex; gap:4px; pointer-events:none }
.card .ctop { top:8px; align-items:flex-start }
.card .cbot { bottom:8px; flex-wrap:wrap-reverse; justify-content:flex-end; align-items:flex-end }
.card .ctop > *, .card .cbot > * { position:static; flex:none }
.card .ctop .smark { margin-left:auto }
.card .cbot > :first-child:not(.new):not(.qty) { margin-right:auto }
.reveal .card .ctop, .reveal .card .cbot, .minirow .card .ctop, .minirow .card .cbot { left:6px; right:6px }
.reveal .card .ctop, .minirow .card .ctop { top:6px }
.reveal .card .cbot, .minirow .card .cbot { bottom:6px }

/* téléphones étroits : le marqueur de série garde sa place dans les paquets */
@media (max-width:400px) {
  .reveal .card .ctop { left:5px; right:5px; gap:2px }
  .reveal .card .ctop .smark { width:16px; height:16px }
}