/* Memory (memory/index.php): a grid of card buttons, face down (a ? on the game's color) until flipped; a word card and
   a clue card look different face up (the word bigger), a found pair turns green. The page header, bar and done box are
   the shared play-page pieces (.ec-play-* in css/ui.css; the done box repeated from the anagram game). */
.ec-mm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: 10px; } /* every row as tall as the tallest */
.ec-mm-card { display: grid; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; perspective: 900px; }
.ec-mm-card:focus-visible { outline: 3px solid var(--ec-focus); outline-offset: 3px; }
/* both faces in one grid cell: the card is as tall as its longer text */
.ec-mm-back, .ec-mm-face { grid-area: 1 / 1; min-height: 120px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px;
	border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .35s ease; }
.ec-mm-back { background: var(--t-ink); color: #fff; font-size: 34px; box-shadow: var(--ec-shadow);
	background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .14) 0 18%, transparent 19%), radial-gradient(circle at 80% 75%, rgba(255, 255, 255, .1) 0 22%, transparent 23%); }
.ec-mm-face { transform: rotateY(180deg); background: #fff; border: 2px solid var(--ec-line); color: var(--ec-ink); }
.ec-mm-card.is-up .ec-mm-back { transform: rotateY(-180deg); }
.ec-mm-card.is-up .ec-mm-face { transform: rotateY(0); }
.ec-mm-card.is-matched .ec-mm-face { background: var(--ec-green-soft); border-color: #9fd3a3; }
.ec-mm-card:disabled { cursor: default; }
.ec-mm-kind { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--t-ink); }
.ec-mm-card.is-matched .ec-mm-kind { color: var(--ec-green-ink); }
.ec-mm-text { font: 15px/1.3 "Lato", sans-serif; text-align: center; overflow-wrap: anywhere; }
.ec-mm-card.is-term .ec-mm-text { font: 600 19px/1.25 "Poppins", "Lato", sans-serif; }
@media (prefers-reduced-motion: reduce) { .ec-mm-back, .ec-mm-face { transition: none; } }
/* word cards and clue cards differ face down too (a different color and label), so students can turn over one of each;
   face up, a word card is tinted and its text larger */
.ec-mm-backlabel { font: 700 12px "Lato", sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.ec-mm-card.is-clue .ec-mm-back { background-color: #b45f06; }
.ec-mm-card.is-term .ec-mm-face { background: var(--t-bg); border-color: #9fcbd9; }
.ec-mm-card.is-term.is-matched .ec-mm-face, .ec-mm-card.is-clue.is-matched .ec-mm-face { background: var(--ec-green-soft); border-color: #9fd3a3; }
/* the round's done box, as on the anagram game */
.ec-ag-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 18px; padding: 16px;
	border-radius: 14px; background: var(--ec-green-soft); border: 1px solid #9fd3a3; }
.ec-ag-done[hidden] { display: none; }
.ec-ag-done p { margin: 0; font: 600 20px "Rubik", "Lato", sans-serif; color: var(--ec-green-ink); text-align: center; }
.ec-ag-done .fa-star { color: #d99a00; }
@media (max-width: 575px) {
	.ec-mm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.ec-mm-back, .ec-mm-face { min-height: 104px; }
	.ec-mm-back, .ec-mm-face { padding: 6px; }
	.ec-mm-text { font-size: 13px; }
	.ec-mm-card.is-term .ec-mm-text { font-size: 15px; }
}
.ec-mm-face.is-pic { padding: 6px; background: #fff; }
.ec-mm-pic { display: block; width: 100%; max-height: 130px; object-fit: contain; border-radius: 8px; }
.ec-mm-face.is-pic .ec-mm-text { font-size: 13px; }