/* version Waven (agent terrains) : terrains cosmétiques — onglet Terrain (Personnages), Boutique « Terrains », fenêtre d'achat.
   Cartes à plat, couleur de la rareté en bordure (--rc). js/terrain-ui.js */

.ter-tab { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ter-cur { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.3); border: 2px solid var(--lime, #c8e20a); }
.ter-cur .ter-img { flex: 0 0 168px; height: 106px; border-radius: 8px; }
.ter-cur h4 { margin: 2px 0 4px; font-size: 18px; color: #fff; }
.ter-cur p { margin: 0 0 4px; color: #e0d9ff; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ter-cur .hint { display: block; font-size: 12px; line-height: 1.35; }
.ter-img { display: block; background-size: cover; background-position: center; background-color: #1c1630; }

.ter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; overflow-y: auto; padding: 2px 4px 8px 2px; }
.ter-grid.shop { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ter-tab .ter-grid { max-height: 470px; }
.ter-card { position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; overflow: hidden; border-radius: 12px;
  border: 3px solid var(--rc); background: #201a33; color: #fff; font: inherit; transition: transform .15s, border-color .15s; }
.ter-card:hover { transform: translateY(-3px); border-color: #fff; }
.ter-card .ter-img { width: 100%; aspect-ratio: 600 / 380; }
.ter-card.locked .ter-img { filter: saturate(.8) brightness(.85); }
.ter-card.sel { box-shadow: 0 0 0 3px var(--lime, #c8e20a); }
.ter-rar { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--rc); color: #15111f; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ter-sel { position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 6px; background: var(--lime, #c8e20a); color: #1c2300; font-size: 11px; font-weight: 800; }
.ter-info { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 8px; }
.ter-info b { font-size: 14px; line-height: 1.15; }
.ter-info em { font-style: normal; font-size: 12px; color: #c9bff0; }
.ter-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }
.ter-price { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #ffe9a8; }
.ter-price img { width: 18px; height: 18px; }
.ter-card.owned .ter-price { color: #c8e20a; }
.ter-grid.shop .ter-info b { font-size: 16px; }

.sh-kind { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.35); }
.sh-kind button { padding: 8px 18px; border: 0; border-radius: 9px; background: transparent; color: #d9d2f0; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.sh-kind button.on { background: var(--lime, #c8e20a); color: #1c2300; }
.ter-explain { margin: 4px 2px 10px; color: #d9d2f0; font-size: 14px; }

.ter-buy { display: flex; gap: 18px; align-items: stretch; max-width: 860px; }
.ter-buy .ter-img.big { flex: 0 0 470px; height: 298px; border-radius: 12px; border: 3px solid var(--rc); }
.ter-binfo { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.ter-binfo h2 { margin: 0; }
.ter-binfo p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ter-binfo .hint { display: block; }

/* téléphone */
@media (max-width: 900px), (max-height: 500px) {
  .ter-cur .ter-img { flex-basis: 120px; height: 76px; }
  .ter-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .ter-grid.shop { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ter-tab .ter-grid { max-height: none; }
  .ter-buy { flex-direction: column; }
  .ter-buy .ter-img.big { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 600 / 380; max-height: 46vh; }
  .ter-info b { font-size: 12px; }
  .ter-cur .hint { display: none; }
  .ter-cur { padding: 6px; }
  .ter-foot { flex-wrap: wrap; }
}

/* les cartes gardent leur hauteur (boutons du menu à hauteur fixe ailleurs) */
.ter-grid { grid-auto-rows: max-content; align-content: start; }
.ter-card { height: auto !important; min-height: 0; flex-shrink: 0; }
.ter-card .ter-img { flex: none; height: auto; }
.ter-card .ter-info { flex: none; }