/*
 * Движок «Подписи к рисунку»: схема с выносками и слова под ней.
 * Общее оформление — в `../common/style.css`.
 */

/* У квадратных схем высота равна ширине, и на невысоком окне подписи под
   рисунком уходили за нижний край — нажать их можно было только прокруткой.
   Поэтому оглядка на высоту окна стоит у схемы по умолчанию, а не списком
   имён: новая квадратная схема иначе приходит без неё, как пришёл
   «человек». Комната шире, чем выше, и в оглядке не нуждается. */
.podpisi-pic {
  position: relative;
  width: min(420px, 100%, 37vh);
  margin: 0 auto;
}

.podpisi-pic--room {
  width: min(420px, 100%);
}

.podpisi-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
  border-radius: 18px;
}

/* Черта выноски: от кружка к месту, с точкой в самом месте. Идёт внутри
   рисунка, поэтому и мерится в его единицах. */
.podpisi-leader {
  stroke: #2e2a4f;
  stroke-width: 1.6;
  opacity: 0.5;
}

.podpisi-dot {
  fill: #2e2a4f;
  opacity: 0.7;
}

/* Кружок сдвинут на половину себя: его середина и есть отмеченная точка. */
.podpisi-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  font: inherit;
  font-size: clamp(13px, 2.4vmin, 16px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--ink);
  border: 2px solid #fff;
  border-radius: 50%;
  /* Кружок мерится от самого рисунка, а не в пикселях экрана: на невысоком
     окне схема ужимается, и выноска в те же 30 пикселей снова наползала бы
     на соседнюю. Ниже 24 не опускаемся — меньше в такой кружок не попасть
     пальцем. */
  width: clamp(24px, 7.2%, 30px);
  aspect-ratio: 1;
  height: auto;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(46, 42, 79, 0.3);
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}

.podpisi-mark:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.podpisi-mark.is-picked {
  background: var(--theme-accent);
}

.podpisi-mark.is-done {
  background: #3bc97d;
  cursor: default;
}

.podpisi-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(560px, 100%);
  margin: 16px auto 0;
}

.podpisi-word {
  font: inherit;
  font-size: clamp(15px, 2.6vmin, 19px);
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(46, 42, 79, 0.14);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.podpisi-word:hover {
  transform: translateY(-1px);
}

.podpisi-word:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(46, 42, 79, 0.14);
}

/* Приложенная подпись уходит на второй план и больше не нажимается. */
.podpisi-word.is-done {
  background: rgba(59, 201, 125, 0.18);
  color: rgba(46, 42, 79, 0.55);
  box-shadow: none;
  cursor: default;
}

.podpisi-fail {
  text-align: center;
  color: var(--ink);
  opacity: 0.7;
}

@media (max-width: 520px) {
  .podpisi-mark {
    width: clamp(22px, 7.2%, 26px);
  }

  .podpisi-word {
    padding: 10px 14px;
    min-height: 44px;
  }
}