:root {
  --card-size: 270px; /* largura/altura da imagem */
  --card-gap: 10px;   /* espaço ao redor de cada imagem */
  --flip-duration: 0.4s;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--card-size)); /* no máximo 4 por linha */
  justify-content: center; /* centraliza o grid no container */
}

/* cada carta ocupa espaço -> margem de 10px ao redor */
.memory-card {
  position: relative;
  width: var(--card-size);
  height: var(--card-size);
  margin: var(--card-gap);
  perspective: 1000px; /* necessário para o flip 3D */
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration) ease;
}

.memory-card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* faces */
.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.card-front {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d6efd 0%, #6ea8fe 100%);
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  user-select: none;
}

.card-back {
  transform: rotateY(180deg);
  background: transparent;
}

.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-card.matched {
  pointer-events: none;
}

.memory-card.matched .card-inner {
  transition: transform var(--flip-duration) ease, opacity 0.4s ease 0.15s;
  opacity: 0; /* ocultar permanentemente após combinar */
}

/* mensagens simples */
.msg {
  padding: .5rem .75rem;
  border-radius: .5rem;
}
.msg-info { background: #e7f1ff; color: #084298; }
.msg-ok { background: #eaf7ea; color: #0f5132; }
.msg-err { background: #fde2e1; color: #842029; }

/* responsivo: se a tela for muito estreita, reduzir colunas automaticamente
   Observação: o requisito é no máximo 4 por linha. Este ajuste só diminui em telas pequenas. */
@media (max-width: 1200px) {
  .game-grid { grid-template-columns: repeat(3, var(--card-size)); }
}
@media (max-width: 900px) {
  .game-grid { grid-template-columns: repeat(2, var(--card-size)); }
}
@media (max-width: 600px) {
  .game-grid { grid-template-columns: repeat(1, var(--card-size)); }
}

/* Overrides responsivos para mobile/desktop */
:root { --card-min: 120px; }
.game-grid {
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--card-gap);
  max-width: calc(4 * var(--card-size) + 3 * var(--card-gap));
  margin-inline: auto;
}
.memory-card {
  width: 100%;
  height: auto; /* garante quadrado usando aspect-ratio */
  aspect-ratio: 1 / 1;
  margin: 0;
}

/* Mantém pares visíveis após combinar (sobrescreve regra anterior) */
.memory-card.matched .card-inner {
  opacity: 1;
  transition: transform var(--flip-duration) ease;
}
/* ===== Tema verde vibrante (alinhado aos outros jogos) ===== */
:root{
  --vv-g900:#0b5d2a; --vv-g800:#0e6e33; --vv-g700:#107a38; --vv-g600:#138a40; --vv-g400:#22c55e;
}

html, body{
  min-height: 100%;
  background: radial-gradient(1200px 600px at 20% -10%, var(--vv-g600), transparent 60%),
              radial-gradient(1200px 600px at 120% 20%, var(--vv-g700), transparent 55%),
              linear-gradient(180deg, var(--vv-g700), var(--vv-g900));
  color: #eafbea;
}

/* Cartas com visual de cartão sobre o verde */
.card-face{
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.card-front{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) ,
    linear-gradient(180deg, var(--vv-g600), var(--vv-g800));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 800;
  letter-spacing: .5px;
}

/* Mensagens com contraste sobre o fundo verde */
.msg-info{ background: rgba(255,255,255,0.12); color:#eafbea; border:1px solid rgba(255,255,255,0.18); }
.msg-ok{ background: rgba(34,197,94,0.16); color:#eaffea; border:1px solid rgba(34,197,94,0.35); }
.msg-err{ background: rgba(239,68,68,0.15); color:#ffe4e6; border:1px solid rgba(239,68,68,0.35); }

/* Controles com a mesma linguagem visual */
.form-select{
  background-color: var(--vv-g800);
  border-color: rgba(255,255,255,0.25);
  color: #f0fff4;
}
.form-select:focus{ border-color: var(--vv-g400); box-shadow: 0 0 0 .2rem rgba(34,197,94,.25); }

#btnReiniciar.btn{
  background-color: #f59e0b; border-color:#d97706; color:#111827;
}
#btnReiniciar.btn:hover, #btnReiniciar.btn:focus{ background:#d97706; border-color:#b45309; color:#fff; }

#btnFechar.btn{ background:#b91c1c; border-color:#991b1b; color:#fff; }
#btnFechar.btn:hover, #btnFechar.btn:focus{ background:#991b1b; border-color:#7f1d1d; color:#fff; }

.badge.text-bg-secondary{ background-color: var(--vv-g600) !important; }

.text-muted{ color:#ffe08a !important; }

.btn-blink{
  animation: ctrl-blink 1s ease-in-out infinite;
}

@keyframes ctrl-blink{
  0%,100%{
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transform: translateY(0);
    opacity: 1;
  }
  50%{
    box-shadow: 0 0 12px rgba(255,255,255,0.45);
    transform: translateY(-1px);
    opacity: 0.8;
  }
}