.mini-app {
  --spot-x: 50.4%;
  --spot-y: 57.2%;
  --spot-r: 23.2%;
  --zoom: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(48px, calc(70 * var(--u)), 72px) clamp(16px, calc(20 * var(--u)), 32px) 0;
}

.mini-app_spot_control {
  --spot-x: 50.4%;
  --spot-y: 75.4%;
  --spot-r: 12.7%;
  --zoom: 1.06;
}

.mini-app_spot_friends {
  --spot-x: 50.4%;
  --spot-y: 22.1%;
  --spot-r: 20%;
  --zoom: 1.05;
}

.mini-app_spot_gifts {
  --spot-x: 49.4%;
  --spot-y: 42%;
  --spot-r: 14.8%;
  --zoom: 1.07;
}

.mini-app__text {
  max-width: 290px;
  margin-top: clamp(14px, calc(20 * var(--u)), 22px);
}

.mini-app__tabs {
  margin-top: clamp(14px, calc(20 * var(--u)), 22px);
}

.mini-app__stage {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(100% + 2 * clamp(16px, calc(20 * var(--u)), 32px));
  max-width: 560px;
  margin-top: clamp(18px, calc(25 * var(--u)), 28px);
}

/* Телефон листают пальцем вбок; вертикальная прокрутка страницы при этом работает */
.mini-app__device {
  position: relative;
  width: 77.5%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  translate: var(--drag, 0px) 0;
  transition: translate 0.45s var(--ease-back);
}

.mini-app__device_dragging {
  cursor: grabbing;
  transition: none;
}

.mini-app__device img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.mini-app__phone {
  width: 100%;
  height: auto;
  transform: scale(var(--zoom));
  transform-origin: var(--spot-x) var(--spot-y);
  transition:
    transform 0.9s var(--ease-out),
    transform-origin 0.9s var(--ease-out);
}

.mini-app__spot {
  position: absolute;
  top: var(--spot-y);
  left: var(--spot-x);
  width: calc(var(--spot-r) * 2 * var(--zoom));
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(255 36 134 / 0.75), 0 0 28px 6px rgb(255 36 134 / 0.35);
  translate: -50% -50%;
  pointer-events: none;
  transition:
    top 0.9s var(--ease-out),
    left 0.9s var(--ease-out),
    width 0.9s var(--ease-out);
  animation: mini-app-pulse 2.2s var(--ease-in-out) infinite;
}

.mini-app__arrow {
  position: absolute;
  top: 36%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-back);
}

.mini-app__arrow img {
  width: 11px;
}

.mini-app__arrow_prev {
  left: 0;
}

.mini-app__arrow_prev img {
  transform: rotate(-90deg);
}

.mini-app__arrow_next {
  right: 0;
}

.mini-app__arrow_next img {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .mini-app__arrow:hover {
    background-color: rgb(0 0 0 / 0.05);
  }
}

.mini-app__arrow:active {
  transform: scale(0.88);
}

.mini-app__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mini-app__button {
  width: min(calc(362 * var(--u)), 460px);
  margin-top: clamp(10px, calc(19 * var(--u)), 25px);
}

.mini-app__note {
  margin-top: clamp(12px, calc(15 * var(--u)), 18px);
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-ink-40);
}

@keyframes mini-app-pulse {
  0%,
  100% {
    opacity: 0.55;
    scale: 1;
  }

  50% {
    opacity: 1;
    scale: 1.06;
  }
}

@media (min-width: 768px) {
  .mini-app {
    justify-content: center;
    padding: 48px 32px;
  }
}