/* MEMORY mini game — Cute Arcade + Kawaii Space.
   Navy / purple / pink / pastel blue / yellow, soft glow, rounded UI.
   Artwork is inline SVG from man-memory.js; animations use transform/opacity. */

.mm-root {
  --gold: #ffe27a; --pink: #ff9ecb; --lilac: #c9b8ff; --sky: #9fd8ff; --ink: #2a2350;
  position: relative; overflow: hidden; color: #f6f3ff; max-width: 900px; margin: 0 auto; padding: 18px 16px 26px;
  border-radius: 26px; user-select: none; font-family: ui-rounded, 'SF Pro Rounded', 'Noto Sans Thai', system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 158, 203, 0.22), transparent 55%),
    radial-gradient(ellipse at 90% 15%, rgba(159, 216, 255, 0.2), transparent 50%),
    linear-gradient(170deg, #2a2466 0%, #1b1a4d 60%, #151338 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 184, 255, 0.25);
}
.mm-root > :not(.mm-decor):not(.mm-win) { position: relative; z-index: 1; }

/* scenery (kept subtle so the cards stay the focus) */
.mm-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mm-decor svg { position: absolute; }
.mm-d-moon { width: 54px; top: 42%; left: 10px; opacity: 0.8; }
.mm-d-planet { width: 76px; top: 26%; right: 8px; opacity: 0.7; animation: mm-float 7s ease-in-out infinite; }
.mm-d-cloud { width: 110px; opacity: 0.35; }
.mm-d-c1 { bottom: 8px; left: -18px; }
.mm-d-c2 { bottom: 24px; right: 70px; width: 90px; }
.mm-d-robot { width: 58px; bottom: 6px; right: 10px; opacity: 0.9; }
.mm-d-wave { transform-origin: 50px 50px; animation: mm-wave 2.4s ease-in-out infinite; }
.mm-d-star { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; opacity: 0.5; animation: mm-twinkle 3s ease-in-out infinite; }
@keyframes mm-float { 50% { transform: translateY(-6px); } }
@keyframes mm-wave { 50% { transform: rotate(-18deg); } }
@keyframes mm-twinkle { 50% { opacity: 1; transform: scale(1.5); } }

.mm-btn { font: inherit; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(201, 184, 255, 0.45); color: #f6f3ff; padding: 9px 15px; border-radius: 999px; cursor: pointer; touch-action: manipulation; }
.mm-btn:hover { border-color: var(--pink); background: rgba(255, 158, 203, 0.15); }
.mm-primary { background: linear-gradient(135deg, #ffe27a, #ffc15e); color: var(--ink); border-color: transparent; font-weight: 900; box-shadow: 0 6px 18px rgba(255, 193, 94, 0.35); }
.mm-primary:hover { background: linear-gradient(135deg, #fff0a8, #ffd27a); }
.mm-sound[aria-pressed="false"] { color: #a79fd0; }

/* intro */
.mm-intro { text-align: center; padding: 22px 12px 8px; }
.mm-logo { font-size: 32px; font-weight: 900; letter-spacing: 0.14em; color: #fff; text-shadow: 0 3px 0 #ff9ecb, 0 0 22px rgba(255, 158, 203, 0.45); }
.mm-logo b { color: var(--gold); }
.mm-tag { color: #d7d0ff; margin: 10px 0 20px; font-size: 13.5px; }
.mm-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 620px; margin: 0 auto 22px; }
.mm-level { font: inherit; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-radius: 20px; border: 2px solid rgba(201, 184, 255, 0.3); background: rgba(255, 255, 255, 0.07); color: #fff; cursor: pointer; touch-action: manipulation; transition: transform 0.2s ease, border-color 0.2s ease; }
.mm-level:hover { transform: translateY(-3px); }
.mm-level b { font-size: 16px; letter-spacing: 0.06em; }
.mm-level span { font-size: 12px; color: #d7d0ff; }
.mm-level em { font-style: normal; font-size: 11px; color: #a79fd0; }
.mm-level.on { border-color: var(--gold); background: rgba(255, 226, 122, 0.12); box-shadow: 0 0 20px rgba(255, 226, 122, 0.25); }
.mm-level.on b { color: var(--gold); }
.mm-intro-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mm-intro-actions .mm-primary { padding: 12px 32px; font-size: 16px; }

/* in-game bar */
.mm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mm-title { font-weight: 900; letter-spacing: 0.12em; font-size: 16px; }
.mm-title b { color: var(--gold); }
.mm-lvl { font-size: 10.5px; letter-spacing: 0.1em; font-weight: 800; color: var(--ink); background: var(--pink); padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.mm-stats { display: flex; gap: 8px; margin-left: auto; }
.mm-stats div { min-width: 70px; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(159, 216, 255, 0.35); text-align: center; }
.mm-stats span { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #bfe6ff; }
.mm-stats b { font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; }
.mm-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* board + cards */
.mm-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; perspective: 1000px; max-width: 500px; margin: 0 auto; padding-bottom: 36px; }
.mm-board[data-level="hard"] { max-width: 720px; gap: 10px; }
.mm-card { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease; }
.mm-card:not(.open):hover { transform: translateY(-5px); }
.mm-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1); will-change: transform; }
.mm-card.open .mm-inner { transform: rotateY(180deg); }
.mm-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mm-back-face { border: 2.5px solid rgba(201, 184, 255, 0.85); box-shadow: 0 0 14px rgba(201, 184, 255, 0.35), 0 6px 14px rgba(0, 0, 0, 0.3); }
.mm-back-face svg { width: 100%; height: 100%; display: block; }
.mm-card:not(.open):hover .mm-back-face { border-color: var(--pink); box-shadow: 0 0 20px rgba(255, 158, 203, 0.55), 0 10px 18px rgba(0, 0, 0, 0.3); }
.mm-front-face { transform: rotateY(180deg); background: linear-gradient(170deg, #fffaf3 0%, #f3eeff 100%); border: 2.5px solid #ffffff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); }
.mm-art { display: block; width: 72%; aspect-ratio: 1; }
.mm-art svg { width: 100%; height: 100%; display: block; }
.mm-front-face small { font-size: clamp(9px, 1.6vw, 12px); font-weight: 800; letter-spacing: 0.04em; color: #6a5fa8; }

/* match: glow + soft bounce + star burst */
.mm-card.matched { cursor: default; }
.mm-card.matched .mm-front-face { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 226, 122, 0.55), 0 0 24px rgba(255, 226, 122, 0.6); }
.mm-card.matched .mm-inner { animation: mm-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s; }
.mm-burst { position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none; }
.mm-burst i { position: absolute; width: 10px; height: 10px; margin: -5px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: mm-burst 0.75s ease-out 0.3s forwards; opacity: 0; }
.mm-burst i:nth-child(even) { background: var(--pink); }
@keyframes mm-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); } }
@keyframes mm-pop { 40% { transform: rotateY(180deg) scale(1.07); } 70% { transform: rotateY(180deg) scale(0.98); } }

/* mismatch: gentle shake then flip back */
.mm-card.miss .mm-front-face { border-color: #ffb3c7; }
.mm-card.miss .mm-inner { animation: mm-shake 0.32s ease 0.36s; }
@keyframes mm-shake { 25% { transform: rotateY(180deg) translateX(-3px); } 75% { transform: rotateY(180deg) translateX(3px); } }

/* win */
.mm-win { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(20, 18, 56, 0.6); backdrop-filter: blur(5px); animation: mm-fade 0.3s ease; }
.mm-win[hidden] { display: none; }
.mm-win-card { width: min(420px, 92%); text-align: center; padding: 26px 18px; border-radius: 28px; border: 2px solid var(--gold); background: radial-gradient(ellipse at 50% 0%, rgba(255, 158, 203, 0.3), transparent 60%), linear-gradient(170deg, #2e2877, #1b1a4d); box-shadow: 0 0 50px rgba(255, 226, 122, 0.3); animation: mm-rise 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); color: #fff; }
.mm-win-title { font-size: 26px; font-weight: 900; letter-spacing: 0.14em; color: var(--gold); text-shadow: 0 3px 0 #ff9ecb, 0 0 18px rgba(255, 226, 122, 0.5); }
.mm-win-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.mm-win-grid div { padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(201, 184, 255, 0.35); }
.mm-win-grid span { display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #bfe6ff; }
.mm-win-grid b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mm-win-grid em { display: block; font-style: normal; font-size: 10px; font-weight: 800; color: var(--pink); letter-spacing: 0.1em; }
.mm-win-actions { display: flex; gap: 8px; justify-content: center; }
@keyframes mm-fade { from { opacity: 0; } }
@keyframes mm-rise { from { opacity: 0; transform: translateY(14px) scale(0.95); } }

@media (max-width: 640px) {
  .mm-root { padding: 14px 10px 22px; border-radius: 20px; }
  .mm-logo { font-size: 26px; }
  .mm-levels { grid-template-columns: 1fr; }
  .mm-stats { margin-left: 0; width: 100%; }
  .mm-stats div { flex: 1; min-width: 0; }
  .mm-bar-actions { width: 100%; }
  .mm-bar-actions .mm-btn { flex: 1; padding: 8px 6px; }
  .mm-board { gap: 8px; }
  .mm-board[data-level="hard"] { --cols: 4 !important; }
  .mm-d-moon, .mm-d-planet { width: 36px; opacity: 0.45; }
  .mm-d-robot { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-inner { transition-duration: 0.01s; }
  .mm-card.matched .mm-inner, .mm-card.miss .mm-inner, .mm-burst i, .mm-win, .mm-win-card, .mm-decor * { animation: none !important; }
}