/* Anchor stock to the centers of the frames painted into each backdrop. */
.merchant-board { container-type: inline-size; }
.merchant-board .merchant-board-slot {
  left: var(--stock-x);
  top: var(--stock-y);
  width: 14.2%;
  height: 22%;
  padding: 2px 2px 3px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: visible;
  z-index: 2;
}
.merchant-board .merchant-board-slot:hover {
  transform: translate(-50%, -50%) scale(1.04);
  filter: drop-shadow(0 0 8px rgba(254, 240, 138, 0.6));
}
.merchant-board-act-1 .merchant-slot-1 { --stock-x: 14.7%; --stock-y: 61.2%; }
.merchant-board-act-1 .merchant-slot-2 { --stock-x: 30.6%; --stock-y: 61.2%; }
.merchant-board-act-1 .merchant-slot-3 { --stock-x: 10%; --stock-y: 83.2%; }
.merchant-board-act-1 .merchant-slot-4 { --stock-x: 25.7%; --stock-y: 83.2%; }
.merchant-board-act-1 .merchant-slot-5 { --stock-x: 41.2%; --stock-y: 83.2%; }
.merchant-board-act-2 .merchant-slot-1 { --stock-x: 17.3%; --stock-y: 54.5%; }
.merchant-board-act-2 .merchant-slot-2 { --stock-x: 33.4%; --stock-y: 54.5%; }
.merchant-board-act-2 .merchant-slot-3 { --stock-x: 49.8%; --stock-y: 54.5%; }
.merchant-board-act-2 .merchant-slot-4 { --stock-x: 25%; --stock-y: 79.5%; }
.merchant-board-act-2 .merchant-slot-5 { --stock-x: 42%; --stock-y: 79.5%; }
.merchant-board-act-3 .merchant-slot-1 { --stock-x: 13.35%; --stock-y: 51.0%; }
.merchant-board-act-3 .merchant-slot-2 { --stock-x: 29.8%; --stock-y: 51.0%; }
.merchant-board-act-3 .merchant-slot-3 { --stock-x: 46.3%; --stock-y: 51.0%; }
.merchant-board-act-3 .merchant-slot-4 { --stock-x: 21.7%; --stock-y: 76.5%; }
.merchant-board-act-3 .merchant-slot-5 { --stock-x: 38%; --stock-y: 76.5%; }
.merchant-board-art-container {
  width: 100%;
  height: clamp(30px, 5.5cqw, 42px);
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1px;
  flex: 0 0 auto;
}
.merchant-board .merchant-board-item-art,
.merchant-board-item-art {
  width: clamp(28px, 5.2cqw, 40px);
  height: clamp(28px, 5.2cqw, 40px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.85));
  display: block;
  transform: none;
  animation: none;
}
.merchant-board-item-name {
  font-size: clamp(8.5px, 1.0cqw, 12px);
  line-height: 1.1;
  margin: 0 0 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: #fff7d6;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
  font-weight: 900;
  text-align: center;
}
.merchant-board-item-rarity {
  font-size: clamp(7px, 0.8cqw, 10px);
  line-height: 1;
  margin: 0 0 3px;
  text-shadow: 0 1px 2px #000;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
}
.merchant-board-buy {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 18px !important;
  max-height: 18px !important;
  padding: 0 8px !important;
  font-size: clamp(8px, 0.9cqw, 11.5px) !important;
  line-height: 18px !important;
  border: 1.5px solid #f6e05e !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fef08a, #d69e2e) !important;
  color: #3d2607 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 0 #744210, 0 2px 4px rgba(0, 0, 0, 0.35) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
}
.merchant-board-buy:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: scale(1.04);
}