/* Закрытый парный скин создателя. Растровый ассет приходит только после серверной проверки. */

.vegetable-button.creator-pair-skin {
  bottom: calc(var(--safe-bottom) + 76px);
  width: min(54vw, 282px);
  height: min(49vh, 410px);
  overflow: visible;
}

.vegetable-button.creator-pair-left {
  left: -2%;
}

.vegetable-button.creator-pair-right {
  right: -2%;
}

.vegetable-button.creator-pair-skin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 12px 7px rgba(45, 28, 24, 0.29))
    saturate(0.97);
  transform-origin: 50% 72%;
  will-change: transform;
}

.vegetable-button.creator-pair-left img {
  transform: translateX(2%) rotate(-1.5deg);
}

.vegetable-button.creator-pair-right img {
  transform: translateX(-2%) rotate(1.5deg) scaleX(-1);
}

.vegetable-button.creator-pair-left.is-hit img {
  animation: creator-pair-left-hit 620ms cubic-bezier(0.16, 0.8, 0.24, 1);
}

.vegetable-button.creator-pair-right.is-hit img {
  animation: creator-pair-right-hit 620ms cubic-bezier(0.16, 0.8, 0.24, 1);
}

.vegetable-button.creator-pair-left.creator-pair-react img {
  animation: creator-pair-left-react 720ms cubic-bezier(0.18, 0.72, 0.22, 1);
}

.vegetable-button.creator-pair-right.creator-pair-react img {
  animation: creator-pair-right-react 720ms cubic-bezier(0.18, 0.72, 0.22, 1);
}

.vegetable-button.creator-pair-skin.is-storing-item img {
  animation: garden-item-store 760ms cubic-bezier(0.5, -0.08, 0.7, 0.25) forwards !important;
}

.creator-pair-option .creator-pair-preview {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  width: 100%;
  min-height: 124px;
  overflow: hidden;
  border-bottom: 1px solid rgba(93, 47, 46, 0.3);
  background:
    linear-gradient(rgba(231, 216, 183, 0.66), rgba(207, 190, 151, 0.52)),
    repeating-linear-gradient(8deg, rgba(49, 44, 32, 0.045) 0 1px, transparent 1px 5px);
}

.creator-pair-option .creator-pair-preview img {
  display: block;
  width: 119%;
  max-width: none;
  height: 124px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 5px 3px rgba(54, 35, 28, 0.23));
}

.creator-pair-option .creator-pair-preview img:first-child {
  margin-left: -10%;
}

.creator-pair-option .creator-pair-preview img:last-child {
  margin-left: -9%;
  transform: scaleX(-1);
}

.creator-pair-option.is-active {
  border-color: #7f3548;
  box-shadow:
    inset 0 0 0 2px rgba(127, 53, 72, 0.32),
    0 0 0 1px rgba(238, 195, 160, 0.5);
}

.creator-pair-option .creator-pair-lock-note {
  display: block;
  margin-top: 2px;
  color: #6c4b45;
  font: 700 0.56rem/1.15 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inventory-item.creator-pair-inventory img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(53, 34, 27, 0.22));
}

.inventory-item[data-inventory-item="beet"].creator-pair-inventory img {
  transform: scaleX(-1);
}

@keyframes creator-pair-left-hit {
  0% { transform: translateX(2%) rotate(-1.5deg) scale(1); }
  18% { transform: translate(7%, 2%) rotate(5deg) scaleX(0.88) scaleY(1.08); }
  43% { transform: translate(-3%, -2%) rotate(-6deg) scaleX(1.08) scaleY(0.94); }
  67% { transform: translate(3%, 1%) rotate(3deg) scaleX(0.97) scaleY(1.03); }
  100% { transform: translateX(2%) rotate(-1.5deg) scale(1); }
}

@keyframes creator-pair-right-hit {
  0% { transform: translateX(-2%) rotate(1.5deg) scaleX(-1) scaleY(1); }
  18% { transform: translate(-7%, 2%) rotate(-5deg) scaleX(-0.88) scaleY(1.08); }
  43% { transform: translate(3%, -2%) rotate(6deg) scaleX(-1.08) scaleY(0.94); }
  67% { transform: translate(-3%, 1%) rotate(-3deg) scaleX(-0.97) scaleY(1.03); }
  100% { transform: translateX(-2%) rotate(1.5deg) scaleX(-1) scaleY(1); }
}

@keyframes creator-pair-left-react {
  0% { transform: translateX(2%) rotate(-1.5deg) scale(1); }
  23% { transform: translate(-2%, 1%) rotate(-5deg) scaleX(1.03) scaleY(0.98); }
  48% { transform: translate(3%, -1%) rotate(3deg) scaleX(0.98) scaleY(1.02); }
  72% { transform: translate(0, 1%) rotate(-3deg) scale(1.01); }
  100% { transform: translateX(2%) rotate(-1.5deg) scale(1); }
}

@keyframes creator-pair-right-react {
  0% { transform: translateX(-2%) rotate(1.5deg) scaleX(-1) scaleY(1); }
  23% { transform: translate(2%, 1%) rotate(5deg) scaleX(-1.03) scaleY(0.98); }
  48% { transform: translate(-3%, -1%) rotate(-3deg) scaleX(-0.98) scaleY(1.02); }
  72% { transform: translate(0, 1%) rotate(3deg) scaleX(-1.01) scaleY(1.01); }
  100% { transform: translateX(-2%) rotate(1.5deg) scaleX(-1) scaleY(1); }
}

@media (max-height: 680px) {
  .vegetable-button.creator-pair-skin {
    bottom: calc(var(--safe-bottom) + 68px);
    height: min(43vh, 310px);
  }
}