:root{ --mg-primary:#ec6719; --mg-dark:#344C59; }
.mg-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:10px; border:0; cursor:pointer; background:var(--mg-primary); color:#fff; font-weight:600; text-decoration:none; transition:transform .05s ease, background .2s ease; }
.mg-btn:hover{ background:var(--mg-dark); color:#fff; } .mg-btn:active{ transform:translateY(1px); }
.memory-wrap{ width:100%; max-width:1200px; margin:0 auto; }
.memory-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; margin-bottom:8px; }
.memory-toolbar .stats{ display:flex; gap:16px; font-weight:600; color:#222; }
.memory-grid{ display:grid; gap:12px; grid-template-columns: repeat(var(--cols,4), 1fr); align-items:stretch; justify-items:stretch; }
.mg-card{ position:relative; width:100%; aspect-ratio:1/1; border:0; background:transparent; cursor:pointer; outline:none; perspective:800px; }
.mg-card .inner{ position:absolute; inset:0; border-radius:16px; overflow:visible; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.mg-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:transform .35s ease, opacity .2s ease; }
/* Flip faces */
.mg-card[data-state="hidden"] .front{ transform:rotateY(180deg); opacity:0; }
.mg-card[data-state="hidden"] .back{  transform:rotateY(0deg);   opacity:1; }
.mg-card[data-state="shown"] .front,
.mg-card[data-state="matched"] .front{ transform:rotateY(0deg); opacity:1; z-index:2; }
.mg-card[data-state="shown"] .back,
.mg-card[data-state="matched"] .back{  transform:rotateY(180deg); opacity:0; z-index:1; }
/* Match effect */
.mg-card.pop .inner{ animation:mg-pop .45s ease; box-shadow:0 0 0 rgba(236,103,25,0); will-change:transform, box-shadow; }
@keyframes mg-pop{ 0%{ transform:scale(1); box-shadow:0 0 0 rgba(236,103,25,0);} 35%{ transform:scale(1.06); box-shadow:0 0 24px rgba(236,103,25,.45);} 100%{ transform:scale(1); box-shadow:0 0 0 rgba(236,103,25,0);} }
/* Confetti */
.confetti-burst{ position:absolute; inset:-6% -6% -6% -6%; pointer-events:none; overflow:visible; z-index:5; }
.confetti-burst i{ position:absolute; left:50%; top:50%; width:6px; height:10px; background:#ec6719; transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg)); animation:mg-confetti linear forwards; animation-duration:calc(var(--t)*1ms); border-radius:2px; }
.confetti-burst i:nth-child(3n){ background:#344C59; } .confetti-burst i:nth-child(3n+1){ background:#00a896; } .confetti-burst i:nth-child(3n+2){ background:#ffd166; }
@keyframes mg-confetti{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg)) translateY(0) scale(1);} 100%{ opacity:0; transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg)) translateY(calc(var(--d)*-8px)) scale(.8);} }
.memory-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s ease; padding:24px; z-index:9999; }
.memory-modal .box{ background:#fff; border-radius:16px; padding:20px; max-width:480px; width:100%; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.memory-modal.show{ opacity:1; pointer-events:auto; } .memory-modal .title{ margin-top:0; }
@media (max-width:480px){ .memory-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
/* v20 grid */
.memory-grid{ display:grid; gap:12px; }
/* /v20 */