/* Flag memory: card grid with a CSS flip; the symbol and text never depend on color alone. */
.memory-grid { width: 100%; max-width: 560px; margin: 16px auto; padding: 8px; border-radius: 16px; border: 1px solid #789cac; background: #12232e; }
.memory-row { display: grid; grid-template-columns: repeat(var(--memory-columns, 4), minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.memory-row:last-child { margin-bottom: 0; }
.games-main .memory-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 0; width: 100%; aspect-ratio: 4 / 3; padding: 4px; overflow: hidden; border: 2px solid #607c88; border-radius: 10px; box-shadow: none; background: #182e3b; color: #f0f7fa; font: 700 .7rem var(--font-mono); line-height: 1.1; touch-action: manipulation; cursor: pointer; }
.games-main .memory-card:hover { border-color: #789cac; }
.games-main .memory-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; z-index: 1; }
.games-main .memory-card[aria-disabled="true"] { cursor: default; }
.memory-back { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 6px; background: repeating-linear-gradient(45deg, #142631 0 8px, #1c3543 8px 16px); color: #65dbea; font: 800 clamp(1.1rem, 5vw, 1.8rem) var(--font-mono); }
.memory-card img { display: block; width: 100%; min-height: 0; flex: 1 1 auto; object-fit: contain; border-radius: 4px; pointer-events: none; }
.memory-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.55rem, 2.2vw, .75rem); font-weight: 600; color: #e9f8fc; }
.memory-card--up { background: #214b58; border-color: #789cac; }
.games-main .memory-card--matched { border-color: #5fd68a; background: #1f4a37; }
.memory-check { position: absolute; top: 2px; right: 4px; padding: 0 4px; border-radius: 6px; background: #5fd68a; color: #06171e; font-weight: 800; font-size: .8rem; line-height: 1.3; }
.memory-card--flip { animation: memory-flip .35s ease-out; }
@keyframes memory-flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@media (max-width: 540px) {
  .memory-grid { padding: 6px; }
  .memory-row { gap: 6px; margin-bottom: 6px; }
  .memory-grid[style*="--memory-columns: 6"] .memory-name { display: none; }
  .memory-grid[style*="--memory-columns: 6"] .memory-check { top: 0; right: 0; padding: 0 2px; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .memory-card--flip { animation: none; } }