/* ═══ Matching Pairs ══════════════════════════════════════════════════════
   Look → Match → Choose. Bright cards on a white board; each matched pair
   lights up in its own colour. Shares .gx-*, .lu-*, .pp-bar and .mp-sizes. */
[data-game="pairs"] { --c0: #2457F5; --c0s: #E7EDFF; --c1: #1F9D55; --c1s: #E5F6EC; --c2: #E0662B; --c2s: #FFEBDD; --c3: #8B3FD9; --c3s: #F2E8FF; --c4: #D6336C; --c4s: #FFE6EF; --c5: #0F8C9C; --c5s: #DDF5F7; --c6: #B7791F; --c6s: #FDF2DC; --c7: #5A7D1A; --c7s: #EEF6DD; --c8: #3F51B5; --c8s: #E8EAF8; --c9: #8D5B3B; --c9s: #F5EBE3; }
.mx-lab { font-family: var(--f-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-variation-settings: 'wght' 700; }
.mx-size { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mx-size .mp-sizes button { min-height: 44px; padding: 10px 16px; font-size: .95rem; background: var(--cyc); color: var(--ink); }
.mx-size .mp-sizes button[aria-pressed="true"] { background: var(--ink); color: var(--cyc); }

/* set cards */
.mx-sets { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-set { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--cyc); color: var(--ink); cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; }
.mx-set:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--ink); }
.mx-set:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.mx-set-ico { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 2rem; background: var(--wb-soft); }
.mx-set.lv-b1 .mx-set-ico { background: var(--sound-soft); }
.mx-set.lv-b2 .mx-set-ico { background: var(--lab-soft); }
.mx-set-body { display: grid; gap: 5px; min-width: 0; flex: 1; }
.mx-set-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mx-level { font-family: var(--f-display); font-size: .78rem; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: var(--wb-soft); color: var(--wb-2); font-variation-settings: 'wght' 750; }
.lv-b1 .mx-level { background: var(--sound-soft); color: var(--sound-2); }
.lv-b2 .mx-level { background: var(--lab-soft); color: var(--lab-2); }
.mx-set-name { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; font-variation-settings: 'opsz' 36, 'wght' 750; }
.mx-set-why { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.mx-set-meta { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 760px) { .mx-sets { grid-template-columns: minmax(0, 1fr); } }

/* the three steps */
.mx-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.mx-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--cyc-2); font-family: var(--f-display); font-size: .92rem; color: var(--ink-2); font-variation-settings: 'wght' 650; }
.mx-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cyc); font-size: .8rem; }
.mx-steps li.now { background: var(--ink); color: var(--cyc); }
.mx-steps li.now b { background: var(--pen); color: var(--ink); }
.mx-steps li.past b { background: #1F9D55; color: #fff; }
div.lu-top + .mx-steps, .mx-steps:only-child { margin-top: -4px; }
.mx-sound { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--cyc); font-size: 1.2rem; cursor: pointer; }
.mx-sound[aria-pressed="false"] { background: var(--cyc-2); }

/* play buttons */
.mx-say { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: var(--sound); color: #fff; font-size: 1.1rem; padding-left: 3px; box-shadow: 0 6px 16px rgba(36, 87, 245, .32); cursor: pointer; transition: transform .2s var(--ease-out); vertical-align: middle; }
.mx-say.small { width: 44px; height: 44px; font-size: .95rem; }
.mx-say.mini { width: auto; height: auto; min-height: 36px; padding: 6px 12px; border-radius: 999px; font-family: var(--f-display); font-size: .86rem; background: var(--cyc); color: var(--sound-2); box-shadow: inset 0 0 0 1.5px var(--line-2); font-variation-settings: 'wght' 650; margin-right: 4px; }
.mx-say:hover { transform: scale(1.06); }
.mx-say.on { animation: lu-pulse 1s ease-in-out infinite; }
.mx-say.mini.on { animation: none; box-shadow: inset 0 0 0 2px var(--sound); }
.mx-say:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }

/* step 1: look */
.mx-intro { display: flex; gap: 16px; align-items: center; padding: clamp(16px, 3vw, 24px); border-radius: 22px; background: linear-gradient(135deg, var(--pen-soft), #FFFBEA 55%, var(--sound-soft)); }
.mx-intro-ico { flex: none; width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 2.4rem; background: var(--cyc); box-shadow: var(--shadow-1); }
.mx-h { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.1; }
.mx-sub { font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }
.mx-sub b { color: var(--ink); }
.mx-look { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-look li { display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--cyc); animation: gm-in .4s var(--ease-out) both; animation-delay: calc(var(--k) * 40ms); }
.mx-look li > span { display: grid; gap: 1px; min-width: 0; }
.mx-look b { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.01em; font-variation-settings: 'opsz' 24, 'wght' 720; }
.mx-look li > span > span { font-size: 1rem; color: var(--ink-2); line-height: 1.35; }
@media (max-width: 640px) { .mx-look { grid-template-columns: minmax(0, 1fr); } .mx-intro { flex-direction: column; text-align: center; } }

/* step 2: the cards */
.mx-tip { text-align: center; font-size: 1rem; color: var(--ink-2); }
.mx-k { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 7px; font-family: var(--f-display); font-size: .85rem; font-variation-settings: 'wght' 750; vertical-align: 1px; }
.mx-k.w { background: var(--sound); color: #fff; }
.mx-k.d { background: var(--pen); color: var(--ink); }
.mx-grid { display: grid; gap: 10px; perspective: 1200px; }
.mx-card { position: relative; aspect-ratio: 4 / 3; cursor: pointer; border: 0; background: none; padding: 0; color: var(--ink); }
.mx-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--ease-out); }
.mx-card.up .mx-inner, .mx-card.done .mx-inner { transform: rotateY(180deg); }
.mx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: grid; place-items: center; padding: 8px; text-align: center; }
.mx-back { align-content: center; gap: 2px; box-shadow: 0 3px 0 rgba(14, 17, 24, .12), 0 8px 18px -8px rgba(14, 17, 24, .3); transition: transform .2s var(--ease-out); }
.mx-card.word .mx-back { background: var(--sound) radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .25), transparent 55%); color: #fff; }
.mx-card.def .mx-back { background: var(--pen) radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .45), transparent 55%); color: var(--ink); }
.mx-back b { font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1; font-variation-settings: 'opsz' 48, 'wght' 800; }
.mx-back small { font-family: var(--f-display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: 'wght' 700; }
.mx-card:not(.up):not(.done):hover .mx-back { transform: translateY(-3px); }
.mx-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 14px; }
.mx-front { transform: rotateY(180deg); background: var(--cyc); border: 2px solid var(--line-2); font-size: clamp(.9rem, .8rem + .35vw, 1.05rem); line-height: 1.3; }
.mx-card.word .mx-front { font-family: var(--f-display); font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); letter-spacing: -.01em; font-variation-settings: 'opsz' 36, 'wght' 720; border-color: #C9D6FF; }
.mx-card.def .mx-front { border-color: #F2DC7A; }
.mx-card.miss .mx-front { border-color: var(--live); background: #FFF6F5; animation: mx-no .45s both; }
@keyframes mx-no { 20%, 60% { transform: rotateY(180deg) translateX(-5px); } 40%, 80% { transform: rotateY(180deg) translateX(5px); } }
.mx-card.done { cursor: default; }
.mx-card.done .mx-front { border-color: var(--cc); background: var(--cs); color: var(--ink); animation: mx-pop .55s var(--ease-out); }
.mx-card.done .mx-front::after { content: "✓"; position: absolute; top: 6px; right: 7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; font-size: .78rem; font-family: var(--f-display); }
@keyframes mx-pop { 0% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(180deg) scale(1); } }
/* each matched pair gets its own colour (card, dot and the panel below) */
:where(.mx-card, .mx-learn, .mx-dots i) { --cc: var(--c0); --cs: var(--c0s); }
.c1 { --cc: var(--c1); --cs: var(--c1s); } .c2 { --cc: var(--c2); --cs: var(--c2s); }
.c3 { --cc: var(--c3); --cs: var(--c3s); } .c4 { --cc: var(--c4); --cs: var(--c4s); }
.c5 { --cc: var(--c5); --cs: var(--c5s); } .c6 { --cc: var(--c6); --cs: var(--c6s); } .c7 { --cc: var(--c7); --cs: var(--c7s); }
.c8 { --cc: var(--c8); --cs: var(--c8s); } .c9 { --cc: var(--c9); --cs: var(--c9s); }
.mx-dots i.good { background: var(--cc); }
.mx-wait { text-align: center; font-size: 1rem; color: var(--ink-2); padding: 14px; border-radius: 14px; border: 1.5px dashed var(--line-2); }

/* what a pair teaches */
.mx-learn { display: grid; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--cs); border: 2px solid var(--cc); animation: gm-in .35s var(--ease-out); }
.mx-learn-top { display: flex; gap: 14px; align-items: center; }
.mx-learn-w { font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: -.02em; line-height: 1.05; font-variation-settings: 'opsz' 48, 'wght' 800; }
.mx-learn-d { font-size: 1.05rem; color: var(--ink-2); }
.mx-learn-eg { display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--cyc); font-size: 1.12rem; line-height: 1.45; }
.mx-learn-eg mark, .mx-rv-eg mark { background: linear-gradient(transparent 12%, var(--pen) 12%, var(--pen) 88%, transparent 88%); color: var(--ink); padding: 0 .1em; border-radius: 3px; font-weight: 700; }
.mx-learn-vs { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.mx-learn-vs > b { color: #B3241C; }
.mx-learn-vs b { font-weight: 700; }

.mx-clear { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 22px 18px; border-radius: 22px; background: linear-gradient(135deg, #E5F6EC, #F3FBF6 60%, var(--pen-soft)); border: 2px solid #BFE6CD; animation: gm-in .45s var(--ease-out); }
.mx-clear-big { font-size: 3rem; line-height: 1; animation: mx-bounce 1s var(--ease-out); }
@keyframes mx-bounce { 0% { transform: scale(.3) rotate(-20deg); } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: none; } }
.mx-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pen); color: var(--ink); font-family: var(--f-display); font-size: .9rem; font-variation-settings: 'wght' 750; }
.mx-center { justify-content: center; margin-top: 6px; }
.mx-center-t { text-align: center; }

/* step 3: choose */
.mx-q { text-align: center; font-family: var(--f-display); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); letter-spacing: -.02em; font-variation-settings: 'opsz' 36, 'wght' 720; margin-top: -8px; }
.mx-prompt { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); background: linear-gradient(135deg, var(--sound-soft), #F4F7FF 60%, var(--pen-soft)); }
.mx-blank { display: inline-block; min-width: 3em; padding: 0 .3em; border-bottom: 4px solid var(--sound); color: var(--sound); font-family: var(--f-display); font-variation-settings: 'wght' 800; }
.mx-opts .opt { font-family: var(--f-display); font-size: 1.25rem; text-align: center; padding: 18px 18px 18px 48px; min-height: 64px; font-variation-settings: 'opsz' 24, 'wght' 680; }
.mx-ans { display: grid; gap: 12px; padding: 16px 18px; border-radius: 20px; background: #F3FBF6; border: 2px solid #BFE6CD; animation: gm-in .35s var(--ease-out); }
.mx-ans.bad { background: #FFF6F5; border-color: #F6C4BF; }
.mx-ans .lu-res { margin: 0; }
.mx-why { font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.mx-why b { font-weight: 700; }
.mx-other { font-size: 1.02rem; line-height: 1.5; color: var(--ink); padding: 10px 14px; border-radius: 12px; background: var(--cyc); }

/* results */
.gm-results .review li:has(.mx-rv-h) { background: none; padding: 10px 0 0; }
.mx-rv-h { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); font-variation-settings: 'wght' 720; max-width: none; }
.mx-rv { display: flex; gap: 12px; align-items: flex-start; }
.mx-rv-body { display: grid; gap: 4px; min-width: 0; }
.mx-rv-body b { font-family: var(--f-display); font-size: 1.12rem; color: var(--ink); font-variation-settings: 'wght' 750; }
.mx-rv-d { color: var(--ink-2); }
.mx-rv-miss { font-size: .98rem; color: var(--ink); background: #FFF6F5; border-radius: 8px; padding: 6px 10px; }
.mx-rv-miss b { font-size: 1em; font-family: inherit; }
.mx-rv-eg { font-size: 1rem; color: var(--ink); }
.mx-next { font-size: 1.05rem; color: var(--ink-2); }

@media (max-width: 560px) {
  [data-game="pairs"] { padding: 16px 12px; }
  .mx-grid { gap: 7px; }
  .mx-card { aspect-ratio: auto; min-height: 112px; }
  .mx-front { font-size: .86rem; line-height: 1.25; padding: 7px 5px; overflow-wrap: anywhere; hyphens: manual; }
  .mx-card.word .mx-front { font-size: 1rem; }
  .mx-steps li { font-size: .82rem; padding-right: 9px; }
  /* row 1: back + score; row 2: progress + sound */
  .lu-top .mx-steps, .lu-top .lu-dots { order: 3; flex: 1 1 calc(100% - 64px); }
  .lu-top .mx-sound { order: 4; width: 44px; height: 44px; }
  .lu-top > .lu-back + .mx-steps + .mx-sound { order: 0; margin-left: auto; }
  .lu-top .stat { min-width: 58px; padding: 6px 8px; }
  .mx-learn-eg, .mx-learn-vs { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-inner { transition: none; }
  .mx-card.done .mx-front, .mx-card.miss .mx-front, .mx-clear-big, .mx-look li, .mx-learn, .mx-clear, .mx-ans { animation: none; }
  .mx-say.on { animation: none; }
}

[data-game="pairs"] .gm-results .review { padding: 0; margin-inline: 0; }
@media (max-width: 560px) { [data-game="pairs"] .gm-results .review li { padding: 10px; } }