/* ---------- catálogo de muebles (Tienda de Muebles, js/furniture-shop.js) ----------
   Solo se anima transform (rendimiento): el resto de cambios son instantáneos. */
#furnShop .fs-box { width: 760px; max-width: 94vw; max-height: 88vh; overflow-y: auto; position: relative; box-sizing: border-box;
  padding: 0 26px 24px; border-radius: 34px; border: 6px solid #7a4a22;
  background: radial-gradient(circle, rgba(255, 255, 255, .75) 2px, transparent 3px) 0 0 / 28px 28px,
    linear-gradient(#fff9ec, #ffe6bd); }
#furnShop .x-btn { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* el cartel de madera de arriba */
#furnShop .fs-sign { margin: 0 -26px 14px; padding: 18px 70px 16px 26px; border-radius: 0 0 26px 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: repeating-linear-gradient(90deg, rgba(60, 30, 8, .05) 0 14px, transparent 14px 28px), linear-gradient(#d19555, #9a5f2c);
  border-bottom: 6px solid #6a3f1a; box-shadow: 0 8px 0 rgba(90, 50, 20, .22); }
#furnShop h2 { margin: 0; font: 700 40px var(--font); color: #fff; text-shadow: 0 3px 0 #6a3f1a, 0 0 2px #6a3f1a; }
#furnShop .fs-coins { font: 700 26px var(--font); color: #fff7d6; background: rgba(60, 30, 8, .4); padding: 4px 16px; border-radius: 999px; white-space: nowrap; }
#furnShop .fs-coins b { color: #ffe27a; }
#furnShop .fs-sub { margin: 0 0 12px; font: 600 18px/1.3 var(--font); color: #7a5a3a; }

/* pestañas por tema */
#furnShop .fs-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
#furnShop .fs-tab { border: 4px solid #c9a27a; border-radius: 999px; padding: 6px 18px; background: #fffaf0; cursor: pointer;
  font: 700 20px var(--font); color: #7a4a22; box-shadow: 0 4px 0 #d9b98f; }
#furnShop .fs-tab.on { background: linear-gradient(#ffd45a, #f0a31e); border-color: #b87410; color: #5a3200; box-shadow: 0 4px 0 #b87410; }
#furnShop .fs-tab:active { transform: translateY(2px); }

#fsList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* tarjetas: cada tema tiene su color */
.fs-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 14px 12px; border-radius: 26px;
  background: linear-gradient(#fffdf7, #fff4dc); border: 4px solid #e5cfae; box-shadow: 0 6px 0 #e5cfae; text-align: center;
  transition: transform .18s ease; }
.fs-item:hover { transform: translateY(-4px); }
.fs-item.tema-gamer { background: linear-gradient(#f6f8ff, #e3eaff); border-color: #9fb8ff; box-shadow: 0 6px 0 #9fb8ff; }
.fs-item.tema-embrujado { background: linear-gradient(#fbf7ff, #eee3ff); border-color: #b59be0; box-shadow: 0 6px 0 #b59be0; }

.fs-tier { position: absolute; top: 12px; left: 12px; font: 700 14px var(--font); padding: 3px 10px; border-radius: 999px;
  background: #7ec46b; color: #fff; box-shadow: 0 2px 0 #4f8d43; }
.fs-item.especial .fs-tier { background: linear-gradient(#ffd45a, #f0a31e); color: #5a3200; box-shadow: 0 2px 0 #b87410; }

.fs-art { height: 170px; width: 100%; display: grid; place-items: center; border-radius: 20px;
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .95) 0 38%, rgba(255, 255, 255, 0) 72%); }
.fs-art img { max-height: 166px; max-width: 170px; object-fit: contain; display: block; transition: transform .18s ease; }
.fs-item:hover .fs-art img { transform: scale(1.06); }
.fs-item h3 { margin: 4px 0 0; font: 700 22px/1.1 var(--font); color: #5a3a1e; }
.fs-item p { margin: 0; font: 600 16px/1.25 var(--font); color: #7a5a3a; flex: 1; }
.fs-have { font: 700 15px var(--font); color: #2f7a2a; background: #e4f7dc; border-radius: 999px; padding: 2px 12px; }

.fs-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.fs-price { font: 700 24px var(--font); color: #8a5a00; white-space: nowrap; }
.fs-foot .btn { font-size: 19px; padding: 8px 14px; }
.fs-empty { grid-column: 1 / -1; font: 600 20px var(--font); color: #7a5a3a; text-align: center; margin: 20px 0; }

@media (max-width: 560px) {
  #fsList { grid-template-columns: 1fr; }
  #furnShop h2 { font-size: 30px; }
}