@import url("https://fonts.googleapis.com");

* {
  font-family: "Fredoka", sans-serif;
  box-sizing: border-box;
}

.geometric-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

/* CSS do Botão SAIR (Bubble Style) */
.btn-back {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: #ff5757;
  color: white !important;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: bold;
  border: 4px solid white;
  box-shadow: 0 6px 0px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-back:hover {
  transform: scale(1.1);
  background: #ff4040;
}
.btn-back:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.2);
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* Cartões de Termos e Definições */
.term-card,
.definition-card {
  background: white;
  padding: 20px;
  border-radius: 20px;
  cursor: pointer;
  border: 4px solid #eee;
  box-shadow: 0 6px 0px #ddd;
  transition: all 0.2s ease;
}

.term-card:hover:not(.matched),
.definition-card:hover:not(.matched) {
  transform: translateY(-5px);
  border-color: #a5b4fc;
  box-shadow: 0 10px 0px #c7d2fe;
}

.selected {
  background: #eef2ff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 4px 0px #4338ca !important;
  transform: scale(1.02);
}

.matched {
  background: #f0fdf4 !important;
  border-color: #4ade80 !important;
  box-shadow: none !important;
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

/* Animações */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
.float-animation {
  animation: float 4s ease-in-out infinite;
}

.progress-fill {
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shake {
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
    border-color: #ef4444;
  }
  75% {
    transform: translateX(8px);
    border-color: #ef4444;
  }
}