/* Match & Remember — flip, remember, connect. */
.dxg .mr {
	height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(6px, 1.4vh, 12px); padding: clamp(8px, 1.6vh, 16px) clamp(10px, 2.5vw, 28px);
}
.mr-top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; }
.mr-skill { font-family: var(--g-head); font-size: 0.85rem; padding: 3px 12px; border-radius: 999px; background: #FFF5D1; color: #5C4500; }
.mr-count { font-family: var(--g-head); font-size: 1rem; color: var(--g-navy); font-variant-numeric: tabular-nums; }

.mr-grid {
	flex: 1; min-height: 0; width: min(100%, 880px);
	display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: clamp(8px, 1.6vw, 16px);
}
.mr-grid--8 { grid-template-columns: repeat(4, 1fr); }
.mr-grid--16, .mr-grid--20 { grid-template-columns: repeat(5, 1fr); }

/* A card: 3D flip between a calm back and a readable face */
.mr-card {
	position: relative; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; perspective: 900px;
	min-height: 0; -webkit-tap-highlight-color: transparent;
}
.mr-card__inner {
	position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .32s cubic-bezier(.3, .8, .4, 1);
}
.mr-card.is-up .mr-card__inner, .mr-card.is-done .mr-card__inner { transform: rotateY(180deg); }
.mr-back, .mr-face {
	position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
/* Back: every card looks the same so students remember places, not designs */
.mr-back {
	background: #17706F;
	background-image: radial-gradient(circle at 50% 118%, transparent 38%, rgba(157, 211, 218, .55) 38% 44%, transparent 44% 50%, rgba(246, 216, 120, .55) 50% 56%, transparent 56%);
	border: 3px solid #0F5655; box-shadow: 0 4px 10px rgba(28, 43, 61, .14);
}
.mr-back__mark { font-family: var(--g-head); font-weight: 600; font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); color: rgba(255, 255, 255, .55); }
.mr-card:hover .mr-back { filter: brightness(1.08); }
.mr-card:focus-visible { outline: none; }
.mr-card:focus-visible .mr-back, .mr-card:focus-visible .mr-face { outline: 4px solid var(--g-blue); outline-offset: 3px; }
/* Face */
.mr-face {
	transform: rotateY(180deg); background: #fff; border: 3px solid var(--g-border); padding: 6px;
	box-shadow: 0 4px 10px rgba(28, 43, 61, .10);
}
.mr-face__text { font-family: var(--g-head); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem); color: var(--g-navy); line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
.mr-face__sub { font-family: var(--g-body); font-size: clamp(.8rem, .7rem + .35vw, 1rem); color: var(--g-muted); }
.mr-face--pattern { background: #FFF6D6; border-color: #E0C052; }
.mr-face--pattern .mr-face__text { font-weight: 600; }
.mr-face--definition .mr-face__text { font-family: var(--g-body); font-weight: 700; font-size: clamp(1rem, .9rem + .6vw, 1.3rem); }
.mr-face img { max-width: 80%; max-height: 60%; object-fit: contain; }

/* Mismatch: gentle, readable, then back down */
.mr-card.is-miss .mr-face { border-color: #F2A08F; border-style: dashed; }
.mr-card.is-miss .mr-card__inner { animation: mr-nope .38s ease-in-out; }
@keyframes mr-nope { 25% { transform: rotateY(180deg) translateX(-5px); } 75% { transform: rotateY(180deg) translateX(5px); } }

/* Matched: both cards share a tint + ✓ so students see which ones belong together */
.mr-card.is-done { cursor: default; }
.mr-card.is-done .mr-face { border-width: 3px; border-style: solid; }
.mr-tint0 .mr-face { background: #E2F5F3; border-color: #7CCBC4; }
.mr-tint1 .mr-face { background: #FCE8E3; border-color: #F2A08F; }
.mr-tint2 .mr-face { background: #FFF6D6; border-color: #E0C052; }
.mr-tint3 .mr-face { background: #E6F4EA; border-color: #8FCBA2; }
.mr-tint4 .mr-face { background: #E2F3F5; border-color: #86C4CD; }
.mr-tint5 .mr-face { background: #F3ECFA; border-color: #B8A2D6; }
.mr-check { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; z-index: 2; display: none; place-items: center;
	background: var(--g-aqua); color: #fff; font-weight: 700; font-size: 14px; font-family: var(--g-body); }
.mr-card.is-done .mr-check { display: grid; }
.mr-card.is-done .mr-check::after { content: "✓"; }
.mr-card.is-done .mr-card__inner { animation: mr-yes .45s ease-out; }
@keyframes mr-yes { 0% { transform: rotateY(180deg) scale(1); } 45% { transform: rotateY(180deg) scale(1.07); } 100% { transform: rotateY(180deg) scale(1); } }

.mr-msg { margin: 0; min-height: 1.5em; font-family: var(--g-head); font-weight: 500; font-size: 1.05rem; color: var(--g-blue); text-align: center; }

/* Reduced motion: no 3D turn, just a quick swap */
@media (prefers-reduced-motion: reduce) {
	.mr-card__inner { transition: none; transform: none !important; animation: none !important; }
	.mr-face { transform: none; opacity: 0; }
	.mr-card.is-up .mr-face, .mr-card.is-done .mr-face { opacity: 1; }
	.mr-card.is-up .mr-back, .mr-card.is-done .mr-back { opacity: 0; }
}
@media (max-width: 599px) {
	.mr-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
	.mr-face__text { font-size: 1.55rem; }
	.mr-skill { display: none; }
	.mr-back, .mr-face { border-radius: 12px; }
}