/* Туториал фиксирован на экране, по горизонтали центрирован и не мешает управлению. */
#tutorial-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: clamp(42px, 8vh, 92px) !important;
  background: transparent !important;
  pointer-events: none !important;
  cursor: default !important;
}

.tutorial-card {
  width: min(1040px, 96vw) !important;
  padding: clamp(8px, 1vw, 16px) clamp(12px, 1.5vw, 22px) !important;
  border: 0 !important;
  background: transparent !important;
  color: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  transform: translateY(35px) !important;
}

.tutorial-title,
.tutorial-controls,
.tutorial-gesture-label {
  color: #000 !important;
}

.tutorial-title {
  font-size: clamp(32px, 3.8vw, 58px) !important;
}

.tutorial-controls {
  gap: clamp(28px, 5vw, 72px) !important;
}

.tutorial-gesture-label {
  font-size: clamp(28px, 3vw, 46px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
}

.tutorial-continue {
  display: none !important;
}

.tutorial-gesture-icon-wrap {
  width: 180px !important;
  height: 205px !important;
}

.tutorial-gesture-icon {
  max-width: 158px !important;
  max-height: 158px !important;
}

.tutorial-gesture-icon-wrap--desktop {
  width: 280px !important;
  height: 190px !important;
}

.tutorial-gesture-icon--desktop {
  max-width: 255px !important;
  max-height: 178px !important;
}

.tutorial-gesture-card--desktop {
  min-width: 275px !important;
}

#tutorial-overlay.is-lingering {
  pointer-events: none !important;
}

/* На компьютере показываем управление мышью. */
.tutorial-controls--desktop {
  display: flex !important;
}

.tutorial-controls--touch {
  display: none !important;
}

@media (pointer: coarse) {
  .tutorial-card {
    width: min(900px, 98vw) !important;
    transform: translateY(28px) !important;
  }

  /* На телефоне показываем управление тапом и свайпом. */
  .tutorial-controls--desktop {
    display: none !important;
  }

  .tutorial-controls--touch {
    display: flex !important;
    gap: clamp(34px, 9vw, 86px) !important;
  }

  .tutorial-gesture-card {
    min-width: 205px !important;
  }

  .tutorial-gesture-icon-wrap {
    width: 190px !important;
    height: 215px !important;
  }

  .tutorial-gesture-icon {
    max-width: 168px !important;
    max-height: 168px !important;
  }

  .tutorial-gesture-label {
    font-size: clamp(26px, 4vw, 42px) !important;
  }
}