/* Trí nhớ siêu phàm: thẻ lật 3D */
.mem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2.6vmin, 22px); width: min(720px, 100%); }
/* dọc: 2 cột × 4 hàng – giới hạn theo chiều cao để chừa chỗ cho Gấu Mì và bong bóng */
@media (orientation: portrait) { .mem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(76vw, 31vh); gap: 12px; } }
.mem-card { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .05s); }
.mem-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s ease; }
.mem-card.up .mem-in { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mem-back { background: linear-gradient(160deg, #6cb8ff, #3a8dff); box-shadow: 0 7px 0 #1d6fd1, 0 14px 22px rgba(40, 80, 140, .2), inset 0 3px 0 rgba(255, 255, 255, .5); }
.mem-back .pic { opacity: .9; }
.mem-front { transform: rotateY(180deg); }
.mem-front .pic.lg { --s: 78%; }
.mem-card.done .mem-front { box-shadow: 0 7px 0 #22a454, 0 0 0 5px var(--good); }
.mem-card.done { animation: bump .6s ease; pointer-events: none; }