@import url('photo-sources.css');
/* Memory: large cards that turn over, a clear mark on the pairs found. */
.mem-grid { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 12px; max-width: min(760px, max(300px, calc((100svh - 480px) * var(--columns) / var(--rows)))); margin: 0 auto; }
.mem-card { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; perspective: 800px; }
.mem-card__back, .mem-card__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; transition: transform .35s ease; }
.mem-card__back { background: #2f5d45 radial-gradient(circle at 50% 50%, #3d7a5a 0 22%, transparent 23%) center / 28px 28px; box-shadow: 0 3px 8px rgba(31, 41, 55, .18); }
.mem-card__face { background: #fff; border: 2px solid #e1ded6; transform: rotateY(180deg); }
.mem-card__face svg { width: 72%; height: 72%; }
.mem-card.is-up .mem-card__back { transform: rotateY(180deg); }
.mem-card.is-up .mem-card__face { transform: rotateY(0); }
.mem-card.is-found { cursor: default; }
.mem-card.is-found .mem-card__face { border-color: #8fc1a4; background: #eef4f0; }
.mem-card:focus-visible { outline: 3px solid #f2b705; outline-offset: 3px; }
/* A tip: the cards to take pulse in a thick yellow ring; the cards not seen yet get a quiet dashed one. */
.mem-card.is-hint .mem-card__back { box-shadow: 0 0 0 4px #f2b705, 0 0 0 8px rgba(242, 183, 5, .35); animation: mem-hint 1.1s ease-in-out infinite; }
.mem-card.is-new .mem-card__back { outline: 3px dashed #d99a00; outline-offset: 3px; }
@keyframes mem-hint { 50% { box-shadow: 0 0 0 4px #f2b705, 0 0 0 13px rgba(242, 183, 5, .12); } }

/* Larger: the cards may take more of a wide screen. More contrast: firm edges. */
.sp--large .mem-grid { max-width: min(900px, max(320px, calc((100svh - 440px) * var(--columns) / var(--rows)))); }
.sp--contrast .mem-card__back { background-color: #1f4431; box-shadow: 0 0 0 2px #0f2419; }
.sp--contrast .mem-card__face { border-color: #1f2937; }
.sp--contrast .mem-card.is-found .mem-card__face { border: 3px solid #1f6b3a; }
.sp--contrast .mem-card.is-new .mem-card__back { outline-color: #7a5a00; }

@media (prefers-reduced-motion: reduce) {
  .mem-card__back, .mem-card__face { transition: none; }
  .mem-card.is-hint .mem-card__back { animation: none; }
}
@media (max-width: 760px) { .mem-grid { gap: 8px; } }
/* A photo theme (the management pages' series): the photo fills the card. The choice of theme above the cards. */
.mem-card__face--photo { padding: 0; overflow: hidden; }
.mem-card__face--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.mem-themes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: 0 auto 12px; }
.mem-themes__label { font-weight: 700; font-size: 16px; color: #374151; }
.mem-themes__item { min-height: 40px; padding: 6px 14px; border: 1.5px solid #c9c4b8; border-radius: 999px; background: #fff; font: 600 16px/1.2 Inter, system-ui, sans-serif; color: #1f2937; cursor: pointer; }
.mem-themes__item[aria-pressed="true"] { background: #2f5d45; border-color: #2f5d45; color: #fff; }