.reward-grid,
.shop-grid,
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0 24px;
}

.reward-card,
.shop-product,
.service-option,
.picker-card {
  min-height: 150px;
  padding: 12px 9px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-medium);
  color: var(--color-muted);
  background: rgb(255 255 255 / 4%);
  text-align: center;
}

.shop-product--card,
.service-option,
.picker-card {
  display: grid;
  align-content: center;
  gap: 7px;
  width: 100%;
}

.shop-product--card strong,
.service-option strong,
.picker-title {
  color: var(--color-text);
  font-family: var(--font-display);
}

.shop-product--card span,
.service-option span {
  color: var(--color-sand-light);
}

.shop-product--card small,
.picker-card span {
  display: block;
  color: var(--color-muted);
  font: inherit;
  line-height: 1.45;
}

.shop-product[data-sold="true"]::after {
  content: "已售出";
  color: var(--color-sand-light);
  font-weight: 700;
}

.shop-product--locked {
  display: grid;
  place-items: center;
  border-style: dashed;
  opacity: 0.72;
}

.reward-grid .reward-card {
  width: 100%;
  min-height: 190px;
  text-align: left;
}

.shopkeeper-placeholder {
  min-height: 230px;
  margin: 10px 0 14px;
  border-radius: var(--radius-large);
}

.shopkeeper-placeholder.has-art {
  background-color: #a46531;
  background-image:
    linear-gradient(180deg, transparent 52%, rgb(28 17 11 / 74%) 100%),
    url("../assets/characters/IMG_2403.jpg");
  background-position: center, center 31%;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  box-shadow:
    inset 0 0 36px rgb(35 20 12 / 20%),
    0 18px 40px rgb(13 8 5 / 34%);
}

.shop-quote {
  color: var(--color-sand-light);
  font-family: var(--font-display);
  text-align: center;
}

.scene-status,
.scene-currency {
  margin: 8px 0;
  color: var(--color-muted);
  text-align: center;
}

.scene-status[data-tone="danger"] {
  color: #ff9a8f;
}

.scene-currency {
  color: var(--color-sand-light);
  font-family: var(--font-display);
  font-weight: 700;
}

.service-picker {
  display: grid;
  gap: 9px;
  margin: 18px 0 24px;
}

.service-picker[hidden],
.service-grid[hidden] {
  display: none;
}

.picker-title {
  margin: 0 0 3px;
  text-align: center;
}

.picker-card {
  min-height: 78px;
  text-align: left;
}

.picker-card:hover,
.shop-product:hover:not(:disabled),
.service-option:hover {
  border-color: rgb(242 197 92 / 60%);
  background: rgb(242 197 92 / 9%);
  transform: translateY(-1px);
}

@media (max-width: 390px) {
  .reward-grid,
  .shop-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .reward-card,
  .shop-product,
  .service-option {
    min-height: 94px;
  }
}