/* KindMX v2: tarjetas de artículo (boceto Tarjetas). Las usa la tienda y la vista previa del panel
   (Artículos manuales), para que la vista previa sea exactamente la tarjeta de la tienda. */

/* ---------- grilla y tarjetas ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; gap: 12px; }
/* Siempre un número par de columnas: los lotes (2 columnas) van primero y así nunca quedan huecos. */
@media (max-width: 1099px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.tile {
  position: relative; height: 290px; border-radius: var(--r-tile); overflow: hidden; background: var(--r-common);
  transition: box-shadow var(--ease);
  container: tile / inline-size;   /* el texto de abajo se acomoda según el ancho de la tarjeta, no de la pantalla */
}
.tile.wide { grid-column: span 2; }
.tile.r-uncommon { background: var(--r-uncommon); }
.tile.r-rare { background: var(--r-rare); }
.tile.r-epic { background: var(--r-epic); }
.tile.r-legendary, .tile.r-mythic { background: var(--r-legendary); }
.tile.r-icon, .tile.r-gaminglegends { background: var(--r-icon); }
.tile.r-manual { background: var(--r-manual); }
.tile.r-gold { background: var(--r-gold); }
.tile.has-bg { background: var(--tile-bg); }   /* colores de la oferta (API) o del panel */
/* Lote: borde degradado de 2 px con un pseudo-elemento enmascarado (respeta el radio) y brillo suave */
.tile.bundle { box-shadow: var(--bundle-glow); }
.tile.bundle::after {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 2px; border-radius: inherit; pointer-events: none;
  background: var(--bundle-line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* En el carrito manda el anillo violeta */
.tile.in-cart { box-shadow: var(--ring-cart); }
.tile.bundle.in-cart::after { display: none; }
.tile-img { position: absolute; inset: 0 0 0 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Pista de improvisación: fondo --night (o degradado del color de la portada), portada cuadrada arriba
   que ocupa el alto que deja el texto, y debajo título, artista, V y precio. Sin animación de estilos. */
/* Sin padding en la tarjeta: la container query mide el ancho interior y tiene que ser igual al de las demás. */
.tile.track { display: flex; flex-direction: column; gap: 10px; background: var(--night); }
.tile.track.has-bg { background: var(--tile-bg); }
.track-art { position: relative; flex: 1 1 0; min-height: 0; display: flex; justify-content: center; margin: 12px 14px 0; }
.track-img { height: 100%; max-width: 100%; max-height: 512px; aspect-ratio: 1;   /* nunca más grande que la portada (512 px) */ object-fit: cover; border-radius: 10px; box-shadow: var(--shadow-art); }
.track-fallback { position: absolute; inset: 0; display: none; place-items: center; color: var(--on-night-muted); }
.track-fallback .icon { width: 56px; height: 56px; stroke-width: 1.5; }
.track-art:not(:has(.track-img)) .track-fallback { display: grid; }
.tile.track .tile-info { position: static; gap: 6px; padding: 0 14px 14px; }
/* Título en 1 línea con "…" (el completo va en title="" y en el detalle): la portada gana ese alto */
.tile.track .tile-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 14px var(--font-ui); color: var(--on-night-muted); }
.track-artist span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist .icon { flex: none; }
@container tile (max-width: 199px) {
  .track-artist { font-size: 13px; }
}
@media (max-width: 719px) {
  .tile.track { gap: 8px; }
  .track-art { margin: 10px 10px 0; }
  .tile.track .tile-info { padding: 0 10px 10px; }
}

/* Coche (2 columnas): el render 1024×800 llena la tarjeta, centrado */
.tile.car .tile-img { object-fit: cover; object-position: center; }
/* Coche sin render de tienda: la mejor imagen, centrada arriba del texto y nunca más grande que su tamaño real. */
.tile.car.car-contain .tile-img { inset: 12px 12px 84px; width: auto; height: auto; max-width: calc(100% - 24px); max-height: calc(100% - 96px); margin: auto; object-fit: contain; }
/* Estilos animados: dos imágenes que se alternan con un fundido de 400 ms */
.tile.has-styles .tile-img { transition: opacity 400ms ease-in-out; }
.tile.has-styles .tile-img-alt { opacity: 0; }
.tile.has-styles.alt-on .tile-img:not(.tile-img-alt) { opacity: 0; }
.tile.has-styles.alt-on .tile-img-alt { opacity: 1; }
.tile-art { position: absolute; left: 0; right: 0; top: 0; bottom: 64px; display: grid; place-items: center; color: var(--on-night); }
.tile-art .icon { width: 120px; height: 120px; stroke-width: 1.5; }
.tile-fallback { display: none; opacity: .85; }
.tile:not(:has(.tile-img)) .tile-fallback { display: grid; }   /* sin imagen o si no cargó */
.tile-shade { position: absolute; inset: 0; background: var(--tile-shade); pointer-events: none; }
.tile-open { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: transparent; border-radius: inherit; }
.tile-open:focus-visible { outline-offset: -4px; outline: 3px solid var(--on-night); }
.tile-add {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--r-pill); background: var(--tile-btn); color: var(--ink);
  transition: background-color var(--ease), color var(--ease), transform 150ms ease-out;
}
.tile-add:hover { transform: scale(1.06); }
.tile-add.is-in { background: var(--accent); color: var(--on-night); }
.tile-add .icon { stroke-width: 2.25; }
.tile-add.is-in .icon { stroke-width: 2.5; }
.tile-tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: var(--r-pill); background: var(--tile-chip); color: var(--on-night); font: 700 12px var(--font-ui); pointer-events: none; }
.tile-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.tile-name {
  font: 700 22px/1.05 var(--font-tight); color: var(--on-night);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Fila V-Bucks + precio. Desde 220 px de tarjeta: en la misma fila (V a la izquierda, precio a la derecha,
   8 px mínimo entre ambos); si los números no caben, la píldora baja a la línea siguiente, nunca tapa los V.
   Menos de 220 px: V-Bucks en su línea y la píldora debajo, alineada a la izquierda. */
.tile-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.tile-row > * { flex: none; }
.tile-vb { display: inline-flex; align-items: center; gap: 6px; font: 600 16px var(--font-tight); color: var(--on-night); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-vb s { color: var(--tile-strike); font-weight: 500; }
.tile-note { flex: 1 1 auto; min-width: 0; max-width: 100%; font: 500 15px var(--font-ui); color: var(--on-night-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .price-pill { white-space: nowrap; }

@container tile (max-width: 219px) {
  .tile-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .tile-note { flex: none; }
}
/* Tarjetas angostas (2 columnas en móvil, 3 en tableta): letra más chica */
@container tile (max-width: 199px) {
  .tile-info { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .tile-name { font-size: 18px; }
  .tile-vb { gap: 4px; font-size: 14px; }
  .tile-vb .icon { width: 16px; height: 16px; }
  .tile-note { font-size: 13px; }
  .tile .save-tag { font-size: 12px; padding: 2px 8px; border-radius: 5px; }
  .tile .price-pill { gap: 3px; padding: 3px 9px; }
  .tile .price-pill b { font-size: 16px; }
  .tile .price-pill span { font-size: 11px; }
}

@media (max-width: 719px) {
  .tile { height: 240px; border-radius: var(--r-tile-m); }
  .tile.wide { height: 210px; }
  .tile-shade { background: var(--tile-shade-m); }
  .tile-art { bottom: 58px; }
  .tile-art .icon { width: 90px; height: 90px; }
  .tile-add { top: 8px; right: 8px; width: 34px; height: 34px; }
  .tile-add .icon { width: 18px; height: 18px; }
  .tile.manual .tile-note { display: none; }
}