/* Memory Grid */
.mg-board { --tile: #4f6178; --lit: #6cc9bc; --bad: #d9786c;
  display: grid; gap: 8px; padding: 12px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 18px 40px rgba(8, 14, 24, .35); touch-action: none; }
.mg-board.rot { transition: transform .7s cubic-bezier(.45, 0, .25, 1); }

.mg-tile { border-radius: 12%; background: var(--tile); border: 0; padding: 0; cursor: pointer;
  box-shadow: 0 2px 4px rgba(8, 14, 24, .22); transition: background .25s ease, box-shadow .25s ease, transform .15s ease; }
.mg-tile.in { animation: mg-in .35s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes mg-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* tiles flip over to reveal their lit face */
.mg-tile.lit { animation: mg-flip-on .38s ease-in-out both; }
.mg-tile.off { animation: mg-flip-off .32s ease-in-out both; }
@keyframes mg-flip-on {
  0% { transform: perspective(400px) rotateY(0); background: var(--tile); }
  49.9% { transform: perspective(400px) rotateY(90deg); background: var(--tile); }
  50% { transform: perspective(400px) rotateY(90deg); background: var(--lit); }
  100% { transform: perspective(400px) rotateY(0); background: var(--lit); box-shadow: 0 0 18px rgba(108, 201, 188, .35); }
}
@keyframes mg-flip-off {
  0% { transform: perspective(400px) rotateY(0); background: var(--lit); }
  49.9% { transform: perspective(400px) rotateY(-90deg); background: var(--lit); }
  50% { transform: perspective(400px) rotateY(-90deg); background: var(--tile); }
  100% { transform: perspective(400px) rotateY(0); background: var(--tile); }
}
.mg-tile.hit { animation: mg-flip-on .3s ease-in-out both; }
.mg-tile.miss { animation: mg-miss .34s ease-in-out both; }
@keyframes mg-miss {
  0% { background: var(--tile); transform: none; }
  30% { background: var(--bad); transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  100% { background: var(--bad); transform: none; }
}
.mg-tile.reveal { animation: none; background: var(--tile); box-shadow: inset 0 0 0 3px var(--lit); }
.mg-board.input .mg-tile:not(.hit):not(.miss):active { transform: scale(.95); background: #5a6e87; }
.mg-board.clear .mg-tile.hit { box-shadow: 0 0 22px rgba(108, 201, 188, .55); }

.mg-msg { margin-top: 16px; font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  min-height: 22px; color: rgba(236, 242, 248, .7); text-align: center; transition: color .25s ease; }
.mg-msg.good { color: #8fdccf; }
.mg-msg.bad { color: #eba196; }

@media (prefers-reduced-motion: reduce) {
  .mg-tile.in { animation-duration: .01s; }
}