.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  perspective: 800px;
}

.memory-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  touch-action: manipulation;
}

.memory-tile:focus-visible {
  outline: 2px solid #c2410c;
  outline-offset: 2px;
}

.memory-tile.flipped,
.memory-tile.matched {
  transform: rotateY(180deg);
}

.memory-tile-back,
.memory-tile-front {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 1.75rem;
}

.memory-tile-back {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.memory-tile-back::after {
  content: "?";
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  opacity: 0.85;
}

.memory-tile-front {
  background: #fff;
  border: 1px solid #fed7aa;
  transform: rotateY(180deg);
}

.memory-tile-emoji {
  font-size: 1.875rem;
  line-height: 1;
}

.memory-tile-image {
  width: 80%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  /* Terracotta brand tint — matches the navbar wordmark (Tailwind orange-700).
     The sprite paths use fill="currentColor", so setting color here colors it. */
  color: #c2410c;
}

.memory-tile.matched .memory-tile-front {
  background: #fff7ed;
  border-color: #fb923c;
  box-shadow: 0 0 0 2px #fed7aa inset;
}

.memory-counter {
  text-align: center;
  font-size: 0.875rem;
  color: #475569;
  margin-top: 0.5rem;
}

/* Overlays sit on top of the board — the wrapper matches the board's footprint
   so inset:0 covers exactly the 4x4 grid (and nothing wider). */
.memory-board-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* Beats Tailwind's `.hidden` (equal specificity, but this file loads later so
   `display:flex` below would otherwise win). Two-class selector keeps it hidden
   regardless of stylesheet order. */
.memory-overlay.hidden {
  display: none;
}

.memory-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  z-index: 10;
  animation: memory-overlay-pop 0.4s ease-out;
}

.memory-overlay-congrats {
  background: rgba(255, 247, 237, 0.92);   /* orange-50, translucent */
  color: #c2410c;                          /* terracotta */
}

.memory-overlay-ready {
  background: rgba(240, 253, 244, 0.94);   /* green-50, translucent */
  color: #166534;                          /* green-800 */
  text-decoration: none;
}

@keyframes memory-overlay-pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}