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

.pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  width: min(720px, 100%);
  margin: 0 auto;
}

.pairs-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pair-item {
  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 14px;
  min-height: 52px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(46, 42, 79, 0.14);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.pair-item--right {
  text-align: right;
}

.pair-item:hover {
  transform: translateY(-1px);
}

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

/* Выбранное левое слово ждёт пару: оно подсвечено, но ещё не соединено. */
.pair-item.is-picked {
  background: var(--theme-accent);
  color: #fff;
}

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

@media (max-width: 520px) {
  .pairs {
    gap: 8px 10px;
  }

  .pair-item {
    padding: 10px;
    min-height: 46px;
  }
}