/* Kaamko games: Memory Match (docs/49_GAMES.md). Linked from src/pages/games/memory.astro. */
.gmemory {
  --mm-back: var(--ice-palette-navy-900);
  --mm-back-ink: var(--ice-palette-navy-700);
  --mm-face: var(--ice-color-surface);
  --mm-a: var(--ice-palette-navy-700);
  --mm-b: var(--ice-palette-forest-700);
  --mm-c: var(--ice-palette-crimson-600);
  --mm-d: var(--ice-palette-terracotta-800);
  --mm-done: var(--ice-color-surface-muted);
  max-width: 640px;
  margin-inline: auto;
}
[data-theme='dark'] .gmemory {
  --mm-back: var(--ice-palette-graphite-700);
  --mm-back-ink: var(--ice-palette-graphite-300);
  --mm-face: var(--ice-palette-graphite-900);
  --mm-a: var(--ice-palette-navy-100);
  --mm-b: var(--ice-palette-forest-300);
  --mm-c: var(--ice-palette-crimson-300);
  --mm-d: var(--ice-palette-terracotta-300);
  --mm-done: var(--ice-palette-graphite-950);
}
.gmemory__board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(6px, 1.6vw, 10px);
  max-width: calc(var(--cols, 4) * 104px);
  margin-inline: auto;
}
.gmemory__card {
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 600px;
  touch-action: manipulation;
}
.gmemory__card:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 2px; border-radius: 8px; }
.gmemory__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .35s ease;
}
.gmemory__card.is-up .gmemory__inner,
.gmemory__card.is-matched .gmemory__inner { transform: rotateY(180deg); }
.gmemory__back,
.gmemory__front {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .2rem;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.gmemory__back {
  background: var(--mm-back);
  border: 2px solid var(--mm-back);
}
.gmemory__back svg { width: 45%; fill: none; stroke: var(--mm-back-ink); stroke-width: 1.2; }
.gmemory__front {
  transform: rotateY(180deg);
  background: var(--mm-face);
  border: 2px solid var(--ice-color-border-strong, var(--ice-color-border));
}
.gmemory__front svg { width: 58%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gmemory__name { font-size: clamp(.55rem, 1.8vw, .72rem); font-weight: 600; color: var(--ice-color-on-surface); text-align: center; line-height: 1.1; padding-inline: 2px; }
.gmemory__card[data-c='a'] .gmemory__front { color: var(--mm-a); }
.gmemory__card[data-c='b'] .gmemory__front { color: var(--mm-b); }
.gmemory__card[data-c='c'] .gmemory__front { color: var(--mm-c); }
.gmemory__card[data-c='d'] .gmemory__front { color: var(--mm-d); }
.gmemory__card.is-matched .gmemory__front { background: var(--mm-done); border-color: currentColor; }
.gmemory__card.is-matched { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .gmemory__inner { transition: none; }
}