/* Square, two-sided cards: the entire reverse turns away with its background. */
.game { gap: 10px; }
.topbar { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0 8px; }
h1 { color: #2e1b0e; }
.title-wrap p { display: none; }
.board { --gap: 12px; gap: var(--gap); width: auto; height: auto; align-self: center; justify-self: center; margin: 0; grid-template-columns: repeat(4,var(--side,150px)); grid-template-rows: repeat(3,var(--side,150px)); }
.card { width: var(--side,150px); height: var(--side,150px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; isolation: auto; perspective: 1000px; }
.card-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .55s ease-in-out; }
.card.open .card-inner, .card.matched .card-inner { transform: rotateY(180deg); }
.card-face, .cover { position: absolute; inset: 0; border: 5px solid #f39a1d; border-radius: 18%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.card-face { transform: rotateY(180deg); background: white; padding: 6px; }
.card-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover { transform: rotateY(0deg); background: #ffe6a2 url('assets/leaves-cover.webp') center / cover no-repeat; z-index: auto; }
.card.matched { border: 0; box-shadow: none; }
.victory { background: transparent; backdrop-filter: none; }
@media(max-width:570px) { .board { --gap: 7px; } .card-face,.cover { border-width: 3px; } .topbar { flex-wrap: wrap; justify-content: center; gap: 5px; } }
@media(prefers-reduced-motion:reduce) { .card-inner { transition-duration: .01ms; } }