/* Cat Memory Match. Builds on /assets/styles.css tokens. A storybook table: honey card backs,
   cream card faces with a cat and an item; a matched card keeps a check mark, so nothing relies on colour. */
:root {
  --mm-wood: #c9955f;
  --mm-table: #f3e4cc;
  --mm-face: #fffaf0;
  --mm-gap: clamp(5px, 1.6vw, 9px);
}

.mm-main { padding-block: .25rem 2.5rem; }
.mm-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .35rem; }
.mm-heading h1 { font-size: clamp(1.45rem, 5vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }
.mm-subtitle { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.mm-panel { max-width: 36rem; display: grid; gap: .5rem; padding: .6rem; border: 1px solid var(--line-strong); border-radius: 1.1rem; background: linear-gradient(#fffaf2, #fff 45%); box-shadow: 0 10px 28px rgba(16, 35, 63, .08); }

/* Level picker: three buttons, the chosen one filled (aria-pressed), the pair count always printed. */
.mm-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.mm-level { display: grid; justify-items: center; gap: 0; min-height: 2.9rem; padding: .25rem .3rem; border: 1px solid var(--line-strong); border-radius: .75rem; background: #fff; color: var(--accent-dark); font: inherit; line-height: 1.2; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mm-level-name { font-size: .88rem; font-weight: 820; letter-spacing: .04em; }
.mm-level-pairs { font-size: .76rem; font-weight: 650; color: var(--muted); }
.mm-level[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent); color: #fff; }
.mm-level[aria-pressed="true"] .mm-level-pairs { color: #e6f0fb; }
.mm-level[aria-pressed="true"] .mm-level-name::before { content: "✓ "; }

.mm-stats { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: .35rem; margin: 0; }
.mm-stats div { display: grid; justify-items: center; padding: .15rem .3rem; border-radius: .7rem; background: var(--soft); }
.mm-stats dt { color: var(--muted); font-size: .76rem; font-weight: 700; line-height: 1.3; }
.mm-stats dd { margin: 0; font-size: 1.15rem; font-weight: 820; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-stats .mm-stat-best dd { font-size: .98rem; line-height: 1.45; }

.mm-cheer { display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin: 0; }
.mm-cheer-cat { flex: none; width: 2.75rem; height: 2.75rem; object-fit: contain; }
.mm-bubble { position: relative; padding: .2rem .7rem; border: 2px solid #f0c36b; border-radius: 1rem; background: #fff; font-size: .9rem; font-weight: 650; line-height: 1.45; }
.mm-bubble::before { content: ""; position: absolute; left: -.55rem; top: 50%; margin-top: -.35rem; border: .35rem solid transparent; border-right: .5rem solid #f0c36b; border-left: 0; }

/* The table. Phones stand EASY and HARD up (3×4, 4×5); the width also follows the screen height so a whole board fits. */
.mm-board-wrap { position: relative; }
.mm-board { --cols: 4; --rows: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--mm-gap); width: min(100%, max(16.5rem, (100svh - 20rem) / var(--rows) * var(--cols) * .75)); margin-inline: auto; padding: var(--mm-gap); border-radius: 1rem; background: var(--mm-table); box-shadow: inset 0 0 0 3px var(--mm-wood); user-select: none; -webkit-user-select: none; }
@media (max-width: 35.99rem) {
  .mm-board[data-level="easy"] { --cols: 3 !important; --rows: 4 !important; }
  .mm-board[data-level="hard"] { --cols: 4 !important; --rows: 5 !important; }
}

.mm-card { position: relative; aspect-ratio: 3 / 4; min-width: 0; padding: 0; border: 0; border-radius: .7rem; background: none; font: inherit; cursor: pointer; perspective: 600px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mm-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mm-card[aria-disabled="true"] { cursor: default; }
.mm-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 260ms cubic-bezier(.3, .7, .4, 1); }
.mm-card.is-open .mm-inner { transform: rotateY(180deg); }
.mm-back, .mm-face { position: absolute; inset: 0; overflow: hidden; border-radius: .7rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 2px 0 rgba(16, 35, 63, .14); }
.mm-back img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mm-card:not(.is-open):hover .mm-back { filter: brightness(1.05); }
.mm-face { transform: rotateY(180deg); background: var(--mm-face); box-shadow: inset 0 0 0 2px #e8d3b8, 0 2px 0 rgba(16, 35, 63, .14); }
.mm-cat { position: absolute; left: 2%; top: 3%; width: 80%; height: auto; pointer-events: none; }
.mm-item { position: absolute; right: 4%; bottom: 3%; display: grid; place-items: center; width: 54%; aspect-ratio: 1; border: 2px solid #ecdcc4; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(91, 58, 41, .16); }
.mm-item img { width: 80%; height: 80%; pointer-events: none; }

/* Vol.1 picture cards: the finished picture fills the face, the shared brown frame lies on top */
.mm-face-art { background: var(--mm-face); box-shadow: 0 2px 0 rgba(16, 35, 63, .14); }
.mm-art, .mm-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mm-art { object-fit: cover; }
.mm-card.is-matched .mm-face-art { outline: 3px solid #f2b134; outline-offset: -3px; }

/* matched: a check badge (shape, not only colour) and a soft gold rim */
.mm-check { position: absolute; top: 4%; right: 5%; display: none; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #2f7d4f; box-shadow: 0 0 0 2px #fff; }
.mm-check::after { content: ""; position: absolute; left: 34%; top: 18%; width: 28%; height: 48%; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.mm-card.is-matched .mm-check { display: block; }
.mm-card.is-matched .mm-face { box-shadow: inset 0 0 0 3px #f2b134, 0 2px 0 rgba(16, 35, 63, .14); }
.mm-card.is-pop .mm-inner { animation: mm-pop 360ms ease-out 200ms; }
.mm-card.is-miss .mm-face { animation: mm-miss 300ms ease 260ms; }
@keyframes mm-pop { 0% { scale: 1; } 45% { scale: 1.1; } 100% { scale: 1; } }
@keyframes mm-miss { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

/* Clear screen, over the board. */
.mm-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 5%; border-radius: 1rem; background: rgba(255, 250, 242, .84); }
.mm-overlay[hidden] { display: none; }
.mm-overlay-box { position: relative; width: 100%; max-width: 20rem; padding: 1rem .9rem; border: 2px solid #f0c36b; border-radius: 1rem; background: #fff; text-align: center; box-shadow: 0 10px 28px rgba(16, 35, 63, .14); animation: mm-pop 360ms ease-out; }
.mm-overlay-box:focus { outline: none; }
.mm-overlay-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mm-overlay-box h2 { margin: 0; color: #8a4a00; font-size: clamp(1.6rem, 8vw, 2.1rem); line-height: 1.15; letter-spacing: .04em; }
.mm-overlay-text { margin: .1rem 0 .5rem; font-size: .92rem; font-weight: 700; }
.mm-result { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0 0 .45rem; }
.mm-result div { display: grid; padding: .2rem; border-radius: .7rem; background: var(--soft); }
.mm-result dt { color: var(--muted); font-size: .76rem; font-weight: 700; }
.mm-result dd { margin: 0; font-size: 1.2rem; font-weight: 820; font-variant-numeric: tabular-nums; }
.mm-result-best { margin: 0 0 .7rem; color: var(--muted); font-size: .88rem; font-weight: 700; }
.mm-result-best.is-new { color: #8a4a00; }
.mm-result-best.is-new::before { content: "★ "; }
.mm-overlay-actions { display: grid; gap: .4rem; }
.mm-overlay-actions .primary-button { min-height: 3rem; margin: 0; }
.mm-again, .mm-restart { min-height: 2.75rem; padding: .3rem .9rem; border: 1px solid var(--accent); border-radius: .7rem; background: #fff; color: var(--accent-dark); font: inherit; font-weight: 760; cursor: pointer; touch-action: manipulation; }
.mm-restart.is-confirming { border-color: #b45309; background: #fff4e5; color: #8a3c00; }
.mm-actions { display: flex; justify-content: center; }
.mm-burst { position: absolute; left: 50%; top: 1.6rem; width: 0; height: 0; pointer-events: none; }
.mm-burst span { position: absolute; left: -.35rem; top: -.35rem; width: .7rem; height: .7rem; border-radius: 50%; background: #f2b134; opacity: 0; animation: mm-burst 900ms ease-out 2; }
.mm-burst span:nth-child(2n) { background: #ef8a8a; }
.mm-burst span:nth-child(3n) { background: #8cc8ec; }
.mm-burst span:nth-child(1) { --dx: 0; --dy: -4.2rem; }
.mm-burst span:nth-child(2) { --dx: 3rem; --dy: -3rem; }
.mm-burst span:nth-child(3) { --dx: 4.2rem; --dy: 0; }
.mm-burst span:nth-child(4) { --dx: 3rem; --dy: 3rem; }
.mm-burst span:nth-child(5) { --dx: 0; --dy: 4.2rem; }
.mm-burst span:nth-child(6) { --dx: -3rem; --dy: 3rem; }
.mm-burst span:nth-child(7) { --dx: -4.2rem; --dy: 0; }
.mm-burst span:nth-child(8) { --dx: -3rem; --dy: -3rem; }
@keyframes mm-burst { 0% { opacity: 1; translate: 0 0; scale: .6; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1.1; } }

.mm-level:focus-visible, .mm-again:focus-visible, .mm-restart:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mm-storage-note { margin: 0; color: var(--muted); font-size: .82rem; }
.mm-storage-note[hidden] { display: none; }

.mm-content .key-list { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: .55rem 0; }
.mm-content .key-list dt { font-weight: 760; }
.mm-content .key-list dd { margin: 0; }
.mm-content kbd { display: inline-block; min-width: 1.6em; padding: 0 .3em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: .35rem; background: #fff; font: inherit; font-size: .9em; text-align: center; }

/* Reduced motion: cards change sides at once (no turn), no pops, shakes or confetti. */
@media (prefers-reduced-motion: reduce) {
  .mm-inner { transition: none; }
  .mm-card.is-pop .mm-inner, .mm-card.is-miss .mm-face, .mm-overlay-box { animation: none; }
  .mm-burst { display: none; }
}