/**
 * Boostabulary — стилі вправи Matching.
 * Кладеться в:  /home/marii430/boost.aizlatka.com/assets/matching.css
 */

.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}

/*
 * На телефоні дві колонки поруч не працюють: за замірами ширина колонки
 * виходить ~170px, це 22 символи в рядок, і визначення ламаються на 4 рядки.
 * Нижче 720px складаємо вертикально — визначення вміщується у два рядки.
 */
@media (max-width: 720px) {
  .match-grid { grid-template-columns: 1fr; gap: 18px; }
}

.match-col { display: flex; flex-direction: column; gap: 8px; }

.match-col-title {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9a8a8e;
  margin-bottom: 2px;
}

.match-chip {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #e8c4cc;
  border-radius: 11px;
  background: #fdfaf6;
  color: #2a1a1f;
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.45;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .2s;
  /* Мінімальна висота дотику — щоб пальцем потрапляти напевно */
  min-height: 44px;
}

.match-chip:hover:not(:disabled) { border-color: #b5687a; }

.match-chip.sel {
  background: #b5687a;
  border-color: #b5687a;
  color: #fff;
  font-weight: 600;
}

.match-chip.bad {
  background: #f5e6e8;
  border-color: #c9899a;
  color: #7a3a4a;
  animation: matchShake .35s;
}

.match-chip.done {
  background: #e6efe5;
  border-color: #9ab897;
  color: #3d5a3a;
  opacity: .65;
  cursor: default;
}

@keyframes matchShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.match-score {
  margin-top: 16px;
  font-size: .85rem;
  color: #7a6a6e;
}

.match-done {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #e6efe5;
  border: 1px solid #9ab897;
  font-size: .92rem;
  color: #3d5a3a;
}

.match-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.match-actions button {
  padding: 11px 20px;
  border: none;
  border-radius: 10px;
  background: #b5687a;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.match-actions button:hover { background: #9a5468; }

.match-actions button.ghost-btn {
  background: #fff;
  color: #b5687a;
  border: 1px solid #e8c4cc;
}

.match-actions button.ghost-btn:hover { background: #faf5ef; }