/* Sélecteur de cartes (specs/selecteur-de-cartes-2026-09-26.md).

   Son propre fichier plutôt qu'une section de plus dans trade.css : il est chargé sur toutes les
   pages, alors que trade.css ne l'est qu'à l'échange. L'y laisser obligerait à charger tout
   l'écran d'échange partout pour une modale.

   Les proportions viennent du sélecteur d'échange, qui a déjà fait ses preuves : mêmes colonnes,
   même gouttière, mêmes pastilles de rareté. On ne fait pas réapprendre un outil selon l'écran
   d'où on l'ouvre. */
.cp-veil { z-index: 95; display: flex; align-items: center; justify-content: center; padding: var(--s4);
  background: rgba(3, 7, 16, .62); backdrop-filter: blur(6px); }
.cp-modal {
  width: 100%; max-width: 920px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; border-radius: 22px;
  background: rgba(12, 22, 46, .82); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .2), 0 30px 80px rgba(0, 0, 0, .5);
}

.cp-head { display: flex; align-items: center; gap: var(--s3); padding: 20px 22px 0; }
.cp-head > div { flex: 1; min-width: 0; }
.cp-eyebrow { margin: 0; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.cp-head h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; }
.cp-close { width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 1rem;
  background: none; border: 0; box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .18); color: var(--ink-dim); }
.cp-close:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .5); }

.cp-tools { display: flex; gap: var(--s2); align-items: center; padding: var(--s3) 22px 0; }
.cp-search { flex: 1; min-width: 0; }
.cp-sort { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 40px; flex: 0 0 auto;
  border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600;
  background: rgba(6, 12, 27, .7); color: var(--ink-soft); box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .16); }
.cp-sort:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .4); }
.cp-sort-key { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--ink-faint); }

.cp-rarities { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s3) 22px 0; }
.cp-rar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--ink-dim); font: inherit;
  font-size: 0.72rem; letter-spacing: 0.04em; cursor: pointer; transition: .16s; }
.cp-rar:hover { color: var(--ink); }
.cp-rar.is-on { background: var(--accent-soft); border-color: var(--border-strong); color: var(--accent); }
.cp-rar-all { background: var(--ink-dim); }

/* La grille défile, pas la modale : les commandes restent atteignables pendant qu'on cherche.
   `align-content: start` sinon quatre cartes s'étalent sur toute la hauteur.

   `grid-auto-rows: max-content` — PAS `auto`. Même piège que l'inventaire : la grille est un
   élément de flex à hauteur définie (elle défile), et avec des rangées `auto` le navigateur les
   comprime pour tenir dans la hauteur disponible au lieu de laisser défiler. Sur téléphone, où la
   modale est plus courte et les rangées plus nombreuses, les cartes s'écrasaient les unes sur les
   autres. */
.cp-grid { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  grid-auto-rows: max-content; gap: 14px; align-content: start; padding: var(--s4) 22px 22px; }
.cp-empty { grid-column: 1 / -1; padding: var(--s6) 0; text-align: center; color: var(--ink-dim); }

@media (max-width: 720px) {
  /* Réserve pour la barre de navigation, posée en bas par-dessus tout : sans elle, la dernière
     rangée de cartes passe dessous et devient incliquable. */
  .cp-veil { align-items: flex-end; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .cp-modal { max-height: calc(100vh - 150px); }
  .cp-head, .cp-tools, .cp-rarities, .cp-grid { padding-left: var(--s4); padding-right: var(--s4); }
  .cp-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
}