/* Два места под компактные плитки */
.chests__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Плитка раздела сундуков */
.chest-tile {
  display: flex;
  align-items: flex-end;

  width: 100%;
  min-width: 0;
  min-height: var(--touch-target-size);
  aspect-ratio: 1;
  padding: var(--space-4);

  color: var(--color-text);
  background:
    radial-gradient(
      circle at top right,
      rgb(223 187 120 / 18%),
      transparent 75%
    ),
    var(--color-surface);

  border-radius: var(--radius-medium);

  text-align: left;
  
}

.chest-tile__title {
  max-width: 100%;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 700;
  line-height: var(--line-height-heading);
  overflow-wrap: break-word;
}

/* Торговец с сундуком */
.chest-tile--chests {
  background-image:
    linear-gradient(
      to bottom,
      transparent 40%,
      rgb(5 12 8 / 80%) 100%
    ),
    url("../assets/images/chests-merchant.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chest-tile--chests .chest-tile__title {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 5px rgb(0 0 0 / 90%);
}

/* Торговец в Потайной Лавке */
.chest-tile--shop {
  background-image:
    linear-gradient(
      to bottom,
      transparent 40%,
      rgb(5 12 8 / 80%) 100%
    ),
    url("../assets/images/secret-shop-merchant.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chest-tile--shop .chest-tile__title {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 5px rgb(0 0 0 / 90%);
}

/* Торговец со свитком заданий */
.chest-tile--quests {
  background-image:
    linear-gradient(
      to bottom,
      transparent 40%,
      rgb(5 12 8 / 80%) 100%
    ),
    url("../assets/images/quests-merchant.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chest-tile--quests .chest-tile__title {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 5px rgb(0 0 0 / 90%);
}

/* Торговец с мечом для испытаний */
.chest-tile--challenges {
  background-image:
    linear-gradient(
      to bottom,
      transparent 40%,
      rgb(5 12 8 / 80%) 100%
    ),
    url("../assets/images/challenges-merchant.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chest-tile--challenges .chest-tile__title {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 5px rgb(0 0 0 / 90%);
}