/* Printed nature cards. Shared kids header, colors and controls stay intact. */
.board-wrap { background: #f5ebd9; border: 1px solid #dbcaab; box-shadow: inset 0 0 0 5px #fffaf0, 0 10px 28px #754a2420; }
.card { border:0; padding:0; background:transparent; font:inherit; }
.card:focus-visible { outline:3px solid #286b60; outline-offset:3px; }
.face { border-radius:12px; box-shadow: inset 0 0 0 2px #fff7e4, inset 0 -5px 0 #00000012, 0 3px 4px #67472f22; }
.face.back { background: radial-gradient(circle at 5px 5px,#fff1c333 1.5px,transparent 2px) 0 0/13px 13px, #397c70; color:#fff1cb; }
.face.back::before { content:''; position:absolute; inset:9%; border:1px solid #f2e3b680; border-radius:8px; }
.face.back svg { width:51%; height:51%; }
.face.front { background:#fffaf0; }
.face.front svg { width:88%; height:88%; }
.card.matched .face.front { background:#e1eedc; box-shadow:inset 0 0 0 2px #74a37b, 0 2px 3px #67472f22; }
.card.matched::after { content:'✓'; position:absolute; right:4%; bottom:3%; width:22%; height:22%; display:grid; place-items:center; background:#356d53; color:white; border-radius:50%; font:bold clamp(8px,1.2vw,13px)/1 Inter,sans-serif; pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .card,.card-inner { transition:none; } }
/* Keep tiny Hard-mode cards rectangular instead of turning into circles. */
.card, .card-inner, .face { border-radius: min(12px, calc(var(--cell) * .12)); }
.face.back::before { border-radius: inherit; }