/* ====== Paleta & tokens ====== */
:root{
  --g1:#3c0a6d;
  --g2:#7b2cbf;
  --g3:#d0b3f0;
  --card-w:120px;        /* ajuste aqui se quiser maior */
  --card-h:150px;
  --radius:18px;         /* cantos suaves */
  --shadow:0 10px 20px rgba(60,10,109,0.35);
}

body {
  font-family: "Fredoka", Arial, sans-serif;
  text-align: center;
  background: #f7f7ff;
  margin: 0;
  padding: 0;
}

h1 { color: #4b0082; }

#game-board {
  display: grid;
  grid-template-columns: repeat(4, var(--card-w));
  gap: 14px;
  justify-content: center;
  margin: 24px auto;
  padding: 8px;
}

/* ====== CARD ====== */
.card {
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;

  /* Verso com gradiente vibrante */
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));

  /* Borda dupla e sombra 3D leve */
  border: 2px solid rgba(36, 6, 66, 0.85);
  box-shadow: 
    0 0 0 3px rgba(123,44,191,0.25) inset,
    0 0 14px 3px rgba(208,179,240,0.5) inset,
    var(--shadow);

  transform-style: preserve-3d;
  transition: transform .25s ease, filter .2s ease, box-shadow .25s ease;
}

/* Hover com pop e brilho */
.card:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 3px rgba(123,44,191,0.35) inset,
    0 0 18px 5px rgba(208,179,240,0.65) inset,
    0 14px 26px rgba(60,10,109,0.45);
}

/* ====== Textura holográfica e partículas SOBRE a imagem ====== */
.card::before{
  content:"";
  position:absolute; inset:0;
  z-index: 2; /* <- fica acima da img */
  background:
    radial-gradient(120px 80px at 50% 35%, rgba(255,255,255,0.22), transparent 60%),
    conic-gradient(from 0deg, rgba(255,255,255,0.12), transparent 40%, rgba(255,255,255,0.08), transparent 80%, rgba(255,255,255,0.12));
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.9;
}
.card::after{
  content:"";
  position:absolute; inset:-20%;
  z-index: 2; /* <- fica acima da img */
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 85% 20%, rgba(255,255,255,0.8), transparent 60%);
  animation: twinkle 4s linear infinite;
  pointer-events:none;
  opacity:.55;
  filter: blur(.2px);
}
@keyframes twinkle{
  0%   { transform: translate(0,0)    rotate(0deg);   opacity:.55; }
  50%  { transform: translate(-6px,4px) rotate(8deg); opacity:.75; }
  100% { transform: translate(0,0)    rotate(0deg);   opacity:.55; }
}

/* ====== Imagem (logo OU frente) ======
   - Centralizada e contida para NÃO cortar o texto da logo.
   - Safe margin (inset) pra dar respiro nas bordas.
*/
.card img{
  position: absolute;
  inset: 6% 6% 6% 6%;         /* margem interna uniforme */
  width: 88%;
  height: 88%;
  object-fit: contain;         /* <- NÃO corta a logo */
  border-radius: calc(var(--radius) - 4px);
  z-index: 1;                  /* <- abaixo dos efeitos */
  backface-visibility: hidden;
  transform: translateZ(1px);
  /* leve sombra interna pra destacar qualquer imagem */
  box-shadow:
    inset 0 -26px 40px rgba(0,0,0,0.18),
    inset 0  2px 10px rgba(0,0,0,0.10);
  transition: filter .2s ease, transform .25s ease;
}

/* Brilho leve ao hover (serve pra logo também) */
.card:hover img{
  filter: saturate(1.06) contrast(1.05);
}

/* ====== Rótulo (palavra) ====== */
.card .label {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  z-index: 3; /* acima da textura e da imagem */
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  color: #2a1650;
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: none; /* controlado no JS */
}

/* ====== Flip 3D suave (se usar .is-flipped no JS) ====== */
.card.is-flipped {
  animation: flipY .45s ease both;
}
@keyframes flipY{
  0%   { transform: rotateY(0deg)   scale(1.02); }
  50%  { transform: rotateY(90deg)  scale(1.02); }
  100% { transform: rotateY(180deg) scale(1.02); }
}

/* Bounce quando acerta */
.card.matched{
  animation: pop .28s ease both;
  box-shadow:
    0 0 0 3px rgba(208,179,240,0.6) inset,
    0 0 20px 6px rgba(208,179,240,0.7) inset,
    0 16px 26px rgba(60,10,109,0.5);
}
@keyframes pop{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ====== Responsivo ====== */
@media (max-width: 520px){
  :root{ --card-w: 96px; --card-h: 128px; --radius:16px; }
  #game-board{ gap: 10px; }
  .card .label{ font-size: 13px; }
}