/* Memory online (assets/play/memory.js): cards with a 3D flip. Prefix mg- (mm- belongs to the site menu). */
.mg-board { display: grid; justify-content: center; gap: 8px; margin: 2px auto 4px; --mg-s: 90px; }
.mg-card { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 700px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; }
.mg-card:focus { outline: none; }
.mg-card:focus-visible .mg-back, .mg-card:focus-visible .mg-face { box-shadow: 0 0 0 4px var(--yellow); }
.mg-in { position: absolute; inset: 0; display: block; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.3, .7, .4, 1.25); }
.mg-card.up .mg-in, .mg-card.got .mg-in, .mg-peek .mg-in { transform: rotateY(180deg); }
.mg-back, .mg-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: calc(var(--mg-s) * .14); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mg-face { transform: rotateY(180deg); background: #fff; box-shadow: 0 0 0 2px var(--line), 0 3px 0 #c9d3e2; }
/* which side shows is switched at the middle of the flip as well, so it never depends on backface culling alone
   (some browsers draw the wrong side while an ancestor animates) */
.mg-face { visibility: hidden; transition: visibility 0s .17s; }
.mg-card.up .mg-face, .mg-card.got .mg-face, .mg-peek .mg-face { visibility: visible; }
.mg-card.up .mg-back, .mg-card.got .mg-back, .mg-peek .mg-back { visibility: hidden; }
.mg-face svg { display: block; width: 100%; height: 100%; }

/* card back: brand blue with a dot pattern and a big question mark */
.mg-back { background:
    radial-gradient(circle, rgba(255, 255, 255, .22) 0 18%, transparent 20%) 0 0 / 33.4% 33.4%,
    linear-gradient(160deg, #2bb3ea, var(--blue) 55%, #0b8fc8);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 4px 0 var(--navy); transition: transform .15s, filter .15s, visibility 0s .17s; }
.mg-back i { font: 800 calc(var(--mg-s) * .52)/1 var(--display); font-style: normal; color: #fff;
  text-shadow: 0 3px 0 var(--navy); transform: translateY(5%); }

/* a pair is found: pop, glow green, stay open */
.mg-card.got { cursor: default; z-index: 1; }
/* pop, wiggle and wave move the face with the separate scale / rotate / translate properties: the button and the
   3D wrapper themselves never animate (an animated ancestor can flatten the flip in some browsers) */
.mg-card.got .mg-face { animation: mg-pop .5s ease-out; }
.mg-card.got .mg-face { box-shadow: 0 0 0 3px var(--green), 0 3px 0 #168a56; }
@keyframes mg-pop { 0% { scale: 1; } 40% { scale: 1.14; } 100% { scale: 1; } }
/* no match: a red ring and a little wiggle before the cards turn back */
.mg-card.miss .mg-face { box-shadow: 0 0 0 3px var(--red), 0 3px 0 #c42a1e; }
.mg-card.miss .mg-face { animation: mg-wiggle .32s ease-in-out; }
@keyframes mg-wiggle { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }

/* sparkles around a matched card */
.mg-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.mg-sparks i { position: absolute; left: 0; top: 0; font-style: normal; font-size: calc(var(--mg-s) * .22); line-height: 1;
  transform: translate(-50%, -50%) scale(.3); opacity: 0; text-shadow: 0 0 4px rgba(255, 255, 255, .95);
  animation: mg-spark .75s ease-out forwards; }
@keyframes mg-spark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(70deg); } }

/* all pairs found: the board does a little wave */
.mg-win .mg-card .mg-face { animation: mg-wave .6s ease-in-out; }
.mg-win .mg-card:nth-child(4n+2) .mg-face { animation-delay: .08s; }
.mg-win .mg-card:nth-child(4n+3) .mg-face { animation-delay: .16s; }
.mg-win .mg-card:nth-child(4n) .mg-face { animation-delay: .24s; }
@keyframes mg-wave { 50% { translate: 0 -8px; scale: 1.05; } }

.mg-peek-btn:disabled { opacity: .45; cursor: default; }
.mg-peek .mg-card { cursor: default; }

@media (hover: hover) {
  .mg-card:not(.up):not(.got):hover .mg-back { transform: translateY(-3px); filter: brightness(1.07); }
  .mg-peek .mg-card:hover .mg-back { transform: none; filter: none; }
}
@media (max-width: 600px) {
  .mg-peek-btn { padding: 6px 10px; font-size: .9rem; }
  .g-top .g-progress { font-size: .86rem; }
}
@media (max-width: 420px) { .mg-peek-txt { display: none; } .mg-peek-btn { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) {
  .mg-in { transition-duration: .01s; }
  .mg-card .mg-face { animation: none !important; }
  .mg-sparks { display: none; }
  .mg-back, .mg-face { transition-delay: 0s; }
}