/* Memory Card Game styles */
.mcg-wrap .mcg-thumb-grid{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.mcg-wrap .mcg-thumb{ position:relative; width:96px; height:96px; border:1px solid #ccd0d4; border-radius:8px; overflow:hidden; background:#f6f7f7; }
.mcg-wrap .mcg-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mcg-wrap .mcg-thumb .mcg-remove{ position:absolute; top:2px; right:5px; font-size:18px; color:#aa0000; text-decoration:none; }
.mcg-wrap .mcg-back-picker{ display:flex; gap:16px; align-items:center; }
.mcg-wrap .mcg-back-preview{ width:120px; height:120px; border:1px solid #ccd0d4; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#f6f7f7; overflow:hidden; }
.mcg-wrap .mcg-back-preview img{ width:100%; height:100%; object-fit:cover; }

.mcg-game{ --mcg-cols:4; --mcg-rows:4; --mcg-gap:10px; --mcg-radius:12px; margin:1rem 0; }
.mcg-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.mcg-toolbar-secondary{ margin-top:-8px; }
.mcg-controls-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mcg-controls-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mcg-audio-inline{ display:flex; align-items:center; gap:6px; }
.mcg-btn{ padding:.5rem .75rem; border:1px solid #ccc; border-radius:10px; background:#fff; cursor:pointer; color:#111 !important; font-weight:600; }
.mcg-btn:hover{ background:#f6f6f6; }

.mcg-stats{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.mcg-stats [data-visible="false"]{ display:none; }

.mcg-scoreboard{ display:flex; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.mcg-score{ display:flex; align-items:center; gap:8px; padding:.35rem .6rem; border:1px solid #ddd; border-radius:10px; background:#fafafa; }
.mcg-score strong{ min-width:1.5em; text-align:center; }
.mcg-score-active{ border-color:#007cba; box-shadow:0 0 0 2px rgba(0,124,186,.15); background:#f0f8ff; }

.mcg-grid{ display:grid; grid-template-columns: repeat(var(--mcg-cols), 1fr); grid-template-rows: repeat(var(--mcg-rows), 1fr); gap: var(--mcg-gap); width:100%; }
.mcg-card{ position:relative; aspect-ratio: 3/4; border:none; padding:0; background:transparent; cursor:pointer; perspective:900px; border-radius: var(--mcg-radius); outline:none; }
.mcg-card:focus-visible{ box-shadow:0 0 0 3px rgba(0,149,255,.5); }

.mcg-face{ position:absolute; inset:0; background-size:cover; background-position:center; border-radius: var(--mcg-radius); backface-visibility:hidden; transform-style:preserve-3d; transition: transform .35s ease, box-shadow .35s ease; }
.mcg-front{ transform: rotateY(180deg); }
.mcg-back{ background:linear-gradient(135deg, #ddd, #bbb); }

.mcg-card.mcg-flipped .mcg-front{ transform: rotateY(0deg); }
.mcg-card.mcg-flipped .mcg-back{ transform: rotateY(180deg); }

.mcg-card.mcg-matched .mcg-front{ box-shadow: 0 0 0 3px rgba(46, 204, 113, .6) inset; }

.mcg-status{ margin-top:.75rem; min-height:1.25em; }

@media (max-width: 480px){ .mcg-grid{ --mcg-gap:8px; } }