/* Template "memory": a memory game with the photos; the letter opens once every pair is found.
   Colours only from themes.css. */

body[data-layout="memory"] .show { background: radial-gradient(80% 60% at 50% 25%, var(--bg-2), var(--bg) 75%); }
body[data-layout="memory"] .mem-stage { min-height: 100%; display: grid; align-content: center; justify-items: center; gap: 20px; padding: 80px 16px 36px; }
body[data-layout="memory"] .mem-head { text-align: center; }
body[data-layout="memory"] .mem-head .eyebrow { margin: 0; }
body[data-layout="memory"] .mem-title { margin: .2rem 0 .3rem; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.1; color: var(--text); }
body[data-layout="memory"] .mem-score { margin: 0; font-size: .8rem; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
body[data-layout="memory"] .mem-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 14px);
  width: min(92vw, 620px, calc((100svh - 270px) * var(--cols, 4) / var(--rows, 3) * .75));
}
body[data-layout="memory"] .mem-card { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; perspective: 900px; }
body[data-layout="memory"] .mem-card:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
body[data-layout="memory"] .mem-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s var(--ease); }
body[data-layout="memory"] .mem-card.up .mem-inner { transform: rotateY(180deg); }
body[data-layout="memory"] .mem-back,
body[data-layout="memory"] .mem-front { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
body[data-layout="memory"] .mem-back {
  display: grid; place-items: center; font-size: clamp(1.2rem, 4vw, 1.8rem); color: color-mix(in srgb, var(--paper) 85%, transparent);
  background:
    radial-gradient(circle at 50% 50%, transparent 38%, color-mix(in srgb, var(--paper) 14%, transparent) 39% 41%, transparent 42%),
    repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--paper) 7%, transparent) 10px 11px),
    linear-gradient(150deg, var(--accent-deep), color-mix(in srgb, var(--accent-deep) 55%, var(--bg)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 16px rgba(0, 0, 0, .28);
  transition: transform .25s var(--ease);
}
body[data-layout="memory"] .mem-card:hover .mem-back { transform: translateY(-3px); }
body[data-layout="memory"] .mem-front { transform: rotateY(180deg); background: var(--paper); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
body[data-layout="memory"] .mem-front img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-layout="memory"] .mem-sym { display: grid; place-items: center; height: 100%; font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--accent-deep); }
body[data-layout="memory"] .mem-card.matched { cursor: default; }
body[data-layout="memory"] .mem-card.matched .mem-front { box-shadow: 0 0 0 3px var(--gold), 0 0 26px color-mix(in srgb, var(--gold) 55%, transparent); }
body[data-layout="memory"] .mem.won .mem-title { color: var(--gold); }
body[data-scheme="light"][data-layout="memory"] .mem.won .mem-title { color: var(--accent-deep); }

body[data-layout="memory"] .mem-after { padding: 12px 18px 56px; display: grid; justify-items: center; gap: 36px; }
body[data-layout="memory"] .mem-after .sheet { width: min(100%, 640px); scroll-margin-top: 76px; animation: memUp 1s var(--ease) both; }
body[data-layout="memory"] .mem-after .prints { width: min(100%, 760px); animation: memUp 1s var(--ease) .3s both; }
@keyframes memUp { from { opacity: 0; transform: translate3d(0, 36px, 0); } }

@media (prefers-reduced-motion: reduce) {
  body[data-layout="memory"] .mem-inner, body[data-layout="memory"] .mem-back { transition: none; }
  body[data-layout="memory"] .mem-after .sheet, body[data-layout="memory"] .mem-after .prints { animation: none; }
}