:root {
  --bg-dark: #0a0a0a;
  --accent-dark: #1a3c54;
  --highlight: #75E4FF;
  --text-light: #ffffff;
  --success: #2ecc71;
  --warning: #f1c40f;
  --neutral: #999999;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  padding: 20px;
  
  background-color: #000;
  background-image: 
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 60%, #aaa, transparent),
    radial-gradient(1px 1px at 50% 80%, #fff, transparent),
    radial-gradient(1px 1px at 30% 50%, #ccc, transparent),
    radial-gradient(1px 1px at 60% 20%, #eee, transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
}


.game-container {
  background: linear-gradient(to bottom right, var(--bg-dark), var(--accent-dark));
  padding: 35px 25px;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(117, 228, 255, 0.1);
  text-align: center;
  max-width: 420px;
  width: 100%;
  animation: fadeIn 0.8s ease-out;
  position: relative;
}

h1 {
  font-size: 28px;
  color: var(--highlight);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 2px;
  animation: bounce 2s infinite;
  text-shadow: 0 0 10px rgba(117, 228, 255, 0.3);
}

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  justify-items: center;
}

/* Cartas */
.card {
  width: 80px;
  height: 80px;
  perspective: 900px; /* importante para efeito 3D */
  cursor: pointer;
  user-select: none;
  position: relative;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Quando estiver virada */
.card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Faces da carta */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  user-select: none;

  /* Efeito vidro */
  background: rgba(255, 255, 255, 0.15);      /* branco transparente */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);  /* sombra suave */
  backdrop-filter: blur(8px);                  /* desfoque */
  -webkit-backdrop-filter: blur(8px);          /* suporte Safari */
  
  border: 1px solid rgba(255, 255, 255, 0.3); /* borda delicada */

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Cores do texto */
.card-front {
  color: var(--text-light);
}

.card-back {
  color: var(--text-light);
  transform: rotateY(180deg);
}

/* Cartas combinadas */
.card.matched .card-inner {
  box-shadow: 0 0 20px var(--success);
  background-color: var(--success);
  cursor: default;
  pointer-events: none;
  transition: box-shadow 0.3s ease;
}

/* Hover só na carta que não está virada */
.card:not(.flipped):hover .card-inner {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--highlight);
}

/* Animações */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes matchAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

/* Responsividade */
@media (max-width: 600px) {
  .game-board {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .card {
    width: 70px;
    height: 70px;
  }

  .card-front,
  .card-back {
    font-size: 24px;
  }

  h1 {
    font-size: 22px;
  }

  .game-container {
    padding: 25px 15px;
  }
}