/* match — two columns, joined by carrying.
 *
 * Left and right sit side by side even at 360px. Stacking them would put the
 * two halves of a pair a scroll apart, and you cannot join what you cannot see
 * at the same time.
 */

.ba-mt__how {
  margin: 0 0 var(--bt-s3);
  font-size: var(--bt-fs-small);
  font-weight: 700;
  color: var(--bt-ink-soft);
}

.ba-mt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bt-s3);
  align-items: start;
}

.ba-mt__col {
  display: flex;
  flex-direction: column;
  gap: var(--bt-s2);
}

.ba-mt__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bt-s1);
  min-height: calc(var(--bt-tap) + var(--bt-s2));
  padding: var(--bt-s2) var(--bt-s3);
  text-align: center;
  font-size: var(--bt-fs-body);
  font-weight: 600;
  overflow-wrap: anywhere;
  background: var(--bt-card);
  border: 2px solid var(--bt-line);
  border-radius: var(--bt-radius-sm);
  transition: border-color var(--bt-t-quick) var(--bt-ease),
              background var(--bt-t-quick) var(--bt-ease),
              opacity var(--bt-t) var(--bt-ease);
}

.ba-mt__card img {
  max-width: 100%;
  max-height: 3.4rem;
  object-fit: contain;
}

/* Only the left column is picked up, so only it gets the grab cursor and has
   to take the browser's touch gestures away. */
.ba-mt__left {
  cursor: grab;
  touch-action: none;
}

.ba-mt__card.is-joined {
  border-color: var(--bt-right);
  background: var(--bt-right-soft);
  cursor: default;
  touch-action: auto;
}

.ba-mt__card.is-right { border-color: var(--bt-right); }

/* A wrong join: a shake, and nothing else. No colour, no sound of failure —
   it was a guess, and guessing is how somebody finds out. */
.ba-mt__card.is-miss { animation: baMtMiss var(--bt-t-slow) var(--bt-ease); }

@keyframes baMtMiss {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .ba-mt__card.is-miss { animation: none; }
}

.ba-mt__says {
  display: block;
  font-size: var(--bt-fs-small);
  font-weight: 700;
  color: var(--bt-right);
}