/* Jogo da Memória */

.jogo-memoria {
  --largura-jogo: 560px;
}

.mem {
  display: grid;
  gap: 16px;
}

.mem-placar {
  font-variant-numeric: tabular-nums;
}

/* 12 cartas: 3 por linha no celular (cartas maiores), 4 por linha em telas largas */
.mem-tabuleiro {
  --colunas: 3;
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 560px;
  container-type: inline-size;
}

@media (min-width: 600px) {
  .mem-tabuleiro { --colunas: 4; }
}

.mem-barra {
  max-width: 560px;
}

.mem-carta {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  perspective: 800px;
}

.mem-giro {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .4s ease;
}

.mem-carta.aberta .mem-giro {
  transform: rotateY(180deg);
}

.mem-verso,
.mem-frente {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--raio-p);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--sombra);
}

.mem-verso {
  border: 4px solid var(--cartao);
  background:
    radial-gradient(circle at 50% 50%, var(--sol) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, var(--cobalto) 0 8px, var(--cobalto-forte) 8px 16px);
}

.mem-frente {
  border: 2px solid var(--linha);
  background: var(--cartao);
  font-size: calc(100cqw / var(--colunas) * .5);
  line-height: 1;
  transform: rotateY(180deg);
}

.mem-carta.achada .mem-frente {
  border-color: var(--ok);
  background: var(--ok-suave);
}

.mem-carta:focus-visible {
  outline: none;
}

.mem-carta:focus-visible .mem-giro {
  outline: 3px solid var(--sol);
  outline-offset: 3px;
  border-radius: var(--raio-p);
}

@media (prefers-reduced-motion: reduce) {
  .mem-giro { transition: none; }
}

/* miniatura do início */

.mini-mem {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8%;
  width: 72%;
  aspect-ratio: 1;
}

.mini-mem span {
  display: grid;
  place-items: center;
  border: 3px solid var(--cartao);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, var(--cobalto) 0 5px, var(--cobalto-forte) 5px 10px);
  font-size: 1.6rem;
  line-height: 1;
}

.mini-mem span.aberta {
  border: 2px solid var(--ok);
  background: var(--ok-suave);
}