/* ============================================================
   memory.css — styles propres à Memory.
   ============================================================ */

.mem-scores { text-align: center; margin-bottom: 4px; }

.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 72px);
  gap: 10px;
  justify-content: center;
}

.mem-card {
  width: 72px; height: 72px; border-radius: 12px;
  font-size: 34px; cursor: default;
  border: 2px solid var(--line);
  background: var(--bg-soft); color: var(--text);
  display: grid; place-items: center;
  transition: transform .1s ease, border-color .12s ease, background .12s ease;
}
.mem-card:not([disabled]) { cursor: pointer; }
.mem-card:not([disabled]):hover { border-color: var(--accent); }
.mem-card.up { background: #2a316a; }
.mem-card.matched { background: #1f4d3a; border-color: var(--good); opacity: .85; }

@media (max-width: 420px) {
  .mem-grid { grid-template-columns: repeat(4, 60px); }
  .mem-card { width: 60px; height: 60px; font-size: 28px; }
}