/* Memory Match — page layout (the same simple layout as Number Merge and Snake) */
.cg-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); gap: 20px; margin: 18px 0; align-items: start; }
.cg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; }
.cg-head h1 { font-size: calc(28px * var(--fs, 1)); }
.cg-groups { display: flex; flex-direction: column; gap: 8px; }
.levels { display: flex; gap: 8px; flex-wrap: wrap; }
.levels small { font: 600 calc(13px * var(--fs, 1)) "Plus Jakarta Sans", sans-serif; color: var(--text-2); direction: ltr; }
.actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.side { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.buddy { max-width: 240px; margin: 0 auto; width: 100%; }
.bubble { background: var(--raised); border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px; font-weight: 600; min-height: 56px; }
.win { text-align: center; padding: 18px; }
.win h2 { font-size: calc(24px * var(--fs, 1)); color: var(--primary); }
.win p { margin: 6px 0 12px; }
.stat { color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.confirm { max-width: 420px; }
.confirm-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.confirm-body h2 { font-size: calc(22px * var(--fs, 1)); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.confirm-actions .btn { min-height: 52px; }

/* turns / pairs, or the two players' scores */
.mm-count { display: flex; gap: 18px; justify-content: center; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.mm-count b { color: var(--text); font-family: "Plus Jakarta Sans", sans-serif; }
.mm-players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.mm-player { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--card); font-weight: 700; min-height: var(--tap); }
.mm-player b { font: 800 calc(22px * var(--fs, 1)) "Plus Jakarta Sans", sans-serif; }
.mm-player.now { border-color: var(--logic); background: var(--logic-bg); color: var(--logic); box-shadow: 0 0 0 2px var(--logic); }

.mm-board-card { padding: 12px; }
.mm-board { display: grid; gap: 10px; margin: 0 auto; user-select: none; }
.mm-board.c3 { grid-template-columns: repeat(3, 1fr); max-width: 400px; }
.mm-board.c4 { grid-template-columns: repeat(4, 1fr); max-width: 520px; }
.mm-row { display: contents; }
.mm-card { aspect-ratio: 1; min-width: var(--tap); padding: 0; border: 2px solid var(--logic-line); border-radius: 14px; background: var(--card); cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 3px 0 var(--logic-line); }
.mm-card.down { background: var(--logic); border-color: var(--logic); }
/* the back: a quiet pattern of diamonds, same for every card */
.mm-back { position: absolute; inset: 6px; border-radius: 9px; border: 2px solid var(--logic-bg); opacity: .55;
  background: repeating-linear-gradient(45deg, transparent 0 9px, var(--logic-bg) 9px 11px), repeating-linear-gradient(-45deg, transparent 0 9px, var(--logic-bg) 9px 11px); }
.mm-face { position: absolute; inset: 0; background: var(--face); display: flex; align-items: center; justify-content: center; }
.mm-face img { width: 92%; height: 92%; object-fit: contain; }
.mm-card.found { border-color: var(--ok-ink); box-shadow: 0 0 0 2px var(--ok-ink); cursor: default; }
.mm-card.found .mm-face { opacity: .82; }
.mm-card.flip { animation: mm-flip .28s ease-out; }
@keyframes mm-flip { from { transform: scaleX(0.05); } to { transform: scaleX(1); } }
.mm-card:focus-visible { outline-offset: 2px; }

@media (max-width: 900px) { .cg-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .main-mm { padding: 0 10px; }
  .cg-head h1 { font-size: calc(24px * var(--fs, 1)); }
  .mm-board-card { padding: 8px; }
  .mm-board { gap: 8px; }
  .cg-groups .btn { padding: 0 10px; font-size: calc(15px * var(--fs, 1)); }
}

/* Full screen for play (shared mode in core.js / main.css): the cards as large as the screen allows; turns or the two
   players' scores above (or beside, sideways), New game below; a finished game's card floats over the bottom */
:root[data-focus="on"] .mm-board-card { width: min(100cqw, (var(--pc-fy) - 200px) * var(--cols) / var(--rows)); padding: 0; border: 0; background: none; box-shadow: none; align-self: center; }
:root[data-focus="on"] .mm-board { max-width: none; }
:root[data-focus="on"] .mm-count, :root[data-focus="on"] .mm-players { margin-bottom: 0; }
:root[data-focus="on"] .pc-play-ctrl.actions { margin-top: 0; }
@media (orientation: landscape) { :root[data-focus="on"] .mm-board-card { width: min(60cqw, (var(--pc-fy) - 12px) * var(--cols) / var(--rows)); } }
/* color-blind support: a found pair carries a check mark, the player whose turn it is an arrow — not only a color */
html.pc-cb .mm-card.found::after { content: "✓"; content: "✓" / ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ok-ink); color: var(--card); font: 800 calc(14px * var(--fs, 1))/1 "Plus Jakarta Sans", sans-serif; }
html.pc-cb .mm-player.now::before { content: "▶"; content: "▶" / ""; font-size: calc(14px * var(--fs, 1)); }
html.pc-cb[dir="rtl"] .mm-player.now::before { content: "◀"; content: "◀" / ""; }