/* ═══════════════════════════════════════════════════
   memory.css – Memory tiếng Anh (Phase 7)
   Chỉ chứa style riêng mm-* ; nền tảng dùng english.css + quiz.css
   ═══════════════════════════════════════════════════ */

/* ── Bàn cờ ── */
.mm-board{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  max-width:720px;
  margin:0 auto;
}
.mm-board.cols-5{ grid-template-columns:repeat(5, 1fr); max-width:820px; }

@media (max-width:640px){
  .mm-board,
  .mm-board.cols-5{ grid-template-columns:repeat(3, 1fr); gap:8px; }
}

/* ── Thẻ (lật 3D) ── */
.mm-card{
  position:relative;
  aspect-ratio:3/4;
  perspective:800px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.mm-card-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.4,.2,.2,1);
}
.mm-card.flipped .mm-card-inner,
.mm-card.matched .mm-card-inner{ transform:rotateY(180deg); }

.mm-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px;
  box-sizing:border-box;
}

/* Mặt sau (úp) */
.mm-back{
  background:linear-gradient(145deg,#1b3a5c,#0e2038);
  border:1px solid rgba(90,150,210,.4);
  font-size:30px;
  color:#4f7fb0;
}
.mm-card:hover .mm-back{ border-color:#6fb1ff; }

/* Mặt trước (nội dung) */
.mm-front{
  transform:rotateY(180deg);
  background:linear-gradient(145deg,#16304e,#102540);
  border:1px solid rgba(120,180,240,.5);
  flex-direction:column;
  gap:6px;
}
.mm-front .mm-icon{ font-size:16px; opacity:.85; }
.mm-front .mm-text{
  font-size:16px;
  font-weight:600;
  color:#eaf3fc;
  line-height:1.25;
  word-break:break-word;
}
.mm-front .mm-text.long{ font-size:13px; }

/* Trạng thái ăn cặp */
.mm-card.matched{ cursor:default; }
.mm-card.matched .mm-front{
  border-color:#4ade80;
  background:linear-gradient(145deg,#143a2a,#0e2a1f);
  animation:mm-pop .4s ease;
}
.mm-card.matched .mm-text{ color:#c8f7d8; }

/* Trạng thái sai (nháy đỏ) */
.mm-card.wrong .mm-front{
  border-color:#f87171;
  animation:mm-shake .4s ease;
}

@keyframes mm-pop{
  0%{ transform:rotateY(180deg) scale(1); }
  50%{ transform:rotateY(180deg) scale(1.08); }
  100%{ transform:rotateY(180deg) scale(1); }
}
@keyframes mm-shake{
  0%,100%{ transform:rotateY(180deg) translateX(0); }
  25%{ transform:rotateY(180deg) translateX(-5px); }
  75%{ transform:rotateY(180deg) translateX(5px); }
}

/* Khóa bàn khi đang chờ (không cho lật thêm) */
.mm-board.locked .mm-card:not(.matched){ pointer-events:none; }

/* ── Thống kê ở màn kết quả ── */
.mm-result-stats{
  display:flex;
  justify-content:center;
  gap:26px;
  margin:14px 0 4px;
}
.mm-stat{ text-align:center; }
.mm-stat-val{
  font-size:22px;
  font-weight:800;
  color:#6fb1ff;
}
.mm-stat-label{
  font-size:12px;
  color:#7f9bbb;
  margin-top:2px;
}

@media (prefers-reduced-motion:reduce){
  .mm-card-inner{ transition:none; }
  .mm-card.matched .mm-front,
  .mm-card.wrong .mm-front{ animation:none; }
}