/* styles/matching.css
   Styles für das Zuordnungs-Modul (matching.js).
   Nutzt CSS-Variablen aus variables.css, sofern vorhanden — sonst greifen
   die hier definierten Fallback-Werte (zweiter Parameter in var()).
   Kann bei Bedarf einfach in main.css übernommen werden. */

.matching-game {
  font-family: var(--font-body, sans-serif);
  font-weight: var(--font-weight-body, 500);
  max-width: 720px;
  margin: 0 auto;
}

.matching-instructions {
  margin-bottom: 1rem;
  color: var(--color-text, #222);
}

.matching-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .matching-board {
    grid-template-columns: 1fr;
  }
}

.matching-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.matching-item {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--border-radius, 12px);
  background: var(--color-surface, #fff);
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.matching-definition {
  background: var(--color-background, #fff);
}

.matching-item:hover:not(:disabled) {
  border-color: var(--color-primary, #333);
}

.matching-item:disabled {
  cursor: default;
}

.matching-item.is-selected {
  border-color: var(--color-primary, #333);
  background: var(--color-primary-light, #f0f0f0);
}

.matching-item.is-matched {
  background: var(--color-success-bg, #e6f4ea);
  border-color: var(--color-success, #34a853);
  opacity: 0.85;
}

.matching-item.is-shake {
  animation: matching-shake 0.4s;
  border-color: var(--color-error, #d93025);
}

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

.matching-status {
  margin-top: 1rem;
  min-height: 1.2rem;
  font-weight: 500;
}

.matching-status.is-complete {
  color: var(--color-success, #34a853);
}

.matching-status.is-error {
  color: var(--color-error, #d93025);
}