.mgd-game{
	--mgd-cols:12;--mgd-rows:9;--mgd-max:960px;
	--mgd-accent:#ea580c;--mgd-card:#1c7ccc;--mgd-bg:#1e1e24;--mgd-text:#f3f4f6;
	box-sizing:border-box;width:100%;max-width:calc(var(--mgd-max) + 44px);margin:0 auto;
	background:var(--mgd-bg);color:var(--mgd-text);border:2px solid var(--mgd-accent);border-radius:16px;
	padding:20px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	display:flex;flex-direction:column;align-items:center;gap:14px;
}
.mgd-game *,.mgd-game *::before,.mgd-game *::after{box-sizing:border-box}

.mgd-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mgd-stat{background:rgba(255,255,255,.09);border-radius:10px;padding:6px 14px;text-align:center;min-width:80px}
.mgd-stat b{display:block;font-size:18px;line-height:1.3;color:inherit}
.mgd-stat span{font-size:12px;opacity:.7}

.mgd-board{
	width:100%;display:grid;
	grid-template-columns:repeat(var(--mgd-cols),1fr);grid-template-rows:repeat(var(--mgd-rows),1fr);
	aspect-ratio:var(--mgd-cols) / var(--mgd-rows);gap:4px;perspective:1000px;container-type:inline-size;
}

/* Reset theme/Divi button styling */
.mgd-card,.mgd-card:hover,.mgd-card:focus,.mgd-card:active{
	-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;box-shadow:none;
	text-shadow:none;min-height:0;min-width:0;line-height:1;font:inherit;color:inherit;text-transform:none;letter-spacing:normal;
}
.mgd-card{width:100%;height:100%;position:relative;cursor:pointer;transform:scale(1);transform-style:preserve-3d;transition:transform .5s}
.mgd-card:active{transform:scale(.97)}
.mgd-card.flip{transform:rotateY(180deg)}
.mgd-card:focus-visible{outline:3px solid var(--mgd-accent);outline-offset:2px;border-radius:6px}
.mgd-card.matched{cursor:default}

.mgd-front,.mgd-back{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
	border-radius:5px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.mgd-back{background:var(--mgd-card);color:#fff;font-weight:700;font-size:calc(40cqw / var(--mgd-cols))}
.mgd-front{background:#fff;transform:rotateY(180deg);box-shadow:inset 0 0 0 2px var(--mgd-card)}
.mgd-front.mgd-emoji{font-size:calc(55cqw / var(--mgd-cols))}
.mgd-front img,.mgd-back img{width:100%;height:100%;object-fit:cover;display:block;max-width:none;margin:0;border:0;border-radius:0;pointer-events:none}
.mgd-card.matched .mgd-front{box-shadow:inset 0 0 0 3px #22c55e}
.mgd-card.matched .mgd-front img{opacity:.9}

.mgd-message{min-height:22px;font-weight:600;color:#4ade80;text-align:center}
.mgd-restart,.mgd-restart:hover,.mgd-restart:focus{
	-webkit-appearance:none;appearance:none;background:var(--mgd-accent);color:#fff;border:0;border-radius:8px;
	padding:10px 22px;font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal;
}
.mgd-restart:hover{filter:brightness(1.1)}
.mgd-restart:focus-visible{outline:3px solid var(--mgd-text);outline-offset:2px}
