/* Tap-to-match activity (match.js). Brand colors: navy #003477, sky #ebf7fd, orange #ff8c0f. */
.match { font-size: 0.62em; }
.match-board { display: grid; grid-template-columns: 30% 1fr; gap: 0.9em; }
.match-col { display: flex; flex-direction: column; gap: 0.45em; }
.match-card {
  font: inherit; text-align: left; padding: 0.5em 0.8em; border-radius: 10px; cursor: pointer;
  border: 2px solid #c6d0da; background: #fff; color: #1F2933; transition: transform 0.12s, background 0.2s;
}
.match-card.term { font-weight: 700; color: #003477; background: #ebf7fd; }
.match-card:hover { border-color: #003477; }
.match-card.picked { border-color: #003477; box-shadow: 0 0 0 3px rgba(0, 52, 119, 0.25); transform: scale(1.02); }
.match-card.matched { border-color: var(--pair); background: color-mix(in srgb, var(--pair) 22%, white); cursor: default; }
.match-card.matched::after { content: " ✓"; color: #1F2933; font-weight: 700; }
.match-card.wrong { border-color: #d9483b; animation: match-shake 0.4s; }
@keyframes match-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.match-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 0.7em; }
.match-score { font-weight: 700; color: #003477; }
.match-reset {
  font: inherit; font-weight: 600; padding: 0.3em 0.9em; border-radius: 999px; cursor: pointer;
  border: 2px solid #003477; background: #fff; color: #003477;
}
.match-key { display: grid; grid-template-columns: 30% 1fr; gap: 0.35em 0.9em; }
.match-key .match-term { font-weight: 700; color: #003477; }