/* ---------- inventario: buscador, filtros, etiqueta NEW y outfits con mascota ---------- */
/* Nada de esto se anima (ver css/perf.css): solo se dibuja y se oculta. */

.inv-bar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.inv-bar[hidden] { display: none; }
#invSearch { width: 100%; box-sizing: border-box; font: 600 17px var(--font); padding: 6px 12px; border-radius: 14px;
  border: 3px solid #7fb0dc; outline: none; background: #fff; color: #34506e; }
#invSearch:focus { border-color: #f2b51c; }
#invSearch::placeholder { color: #8aa3bd; }

.inv-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.inv-cat { font: 700 14px var(--font); padding: 3px 9px 4px; border-radius: 999px; cursor: pointer;
  border: 3px solid #7fb0dc; background: #fff; color: #34506e; }
.inv-cat.on { background: #34506e; border-color: #34506e; color: #fff; }
.inv-cat-new.on { background: #ff4d7d; border-color: #ff4d7d; }

/* el armario mide lo mismo que la tarjeta (880 px): así su borde de arriba y el de abajo
   coinciden con los de la tarjeta (antes era de 760 px y quedaba centrado, un poco torcido) */
#card #inventory { height: 880px; }
/* con la barra de búsqueda arriba, la rejilla cabe sin cortar la última fila */
#inventory .inv-grid { max-height: 470px; }

/* la etiqueta de lo recién conseguido (estática, sin animación) */
.inv-new { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 7px 3px; border-radius: 10px;
  background: #ff4d7d; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.18);
  font: 800 12px/1.2 var(--font); letter-spacing: .5px; pointer-events: none; }

/* cosmético de mascota dentro del inventario */
.inv-item.pcos { border-style: dashed; }
.inv-item.pcos .inv-icon { font-size: 46px; line-height: 1.1; }

/* outfits: la foto de la mascota junto al oso */
.of-pics { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.of-petpic { flex: none; }
.of-petpic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.of-petpic .pet-hatbox { position: absolute; inset: 0; pointer-events: none; }
.of-petpic .pet-hat { position: absolute; transform: translateX(-50%); }
.of-petpic .pet-hat svg { width: 100%; display: block; }
.of-pet { font: 600 14px var(--font); color: #5a7390; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-form > small:first-of-type { font: 700 16px var(--font); color: #34506e; }