body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #f2f7f5;
}

input {
  padding: 10px;
  width: 220px;
  font-size: 16px;
}

button {
  padding: 10px 15px;
  margin: 10px;
  cursor: pointer;
}

.grid {
  display: grid;
  grid-template-columns: repeat(9, 120px); /* cambiamos de 8 a 9 columnas */
  gap: 12px;
  justify-content: center;
}



.header div {
  font-weight: bold;
}
/*
.cuadro {
  padding: 8px;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  opacity: 0;
  transform: scale(0.8);
  animation: aparecer 0.3s forwards;
} */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cuadro {
  opacity: 0;
  animation: aparecer 0.3s forwards; /* forwards mantiene el estado final */
}

.verde { background: #2ecc71; }
.rojo { background: #e74c3c; }


.sugerencias {
  position: absolute;
  top: 100%;  /* justo debajo del input */
  left: 0;
  transform: none;
  background: #222;
  color: #fff;
  border: 1px solid #555;
  max-width: 220px;
  z-index: 100;
}

.sugerencias div {
  padding: 6px 10px;
  cursor: pointer;
}

.sugerencias div:hover {
  background: #444;
}


.victoria {
  font-size: 24px;
  margin-top: 20px;
  color: #27ae60;
  animation: ganar 0.8s ease infinite alternate;
}

@keyframes ganar {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}


.emoji-fiesta {
  position: fixed;
  font-size: 28px;
  pointer-events: none;
  animation: volar 2s linear forwards;
  z-index: 999;
}

@keyframes volar {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-300px) scale(1.5);
    opacity: 0;
  }
}

.cuadro {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-weight: bold;
  margin-bottom: 8px;
  color: white;
  word-wrap: break-word;  /* permite que se parta el texto largo */
  overflow: hidden;
  text-overflow: ellipsis; /* opcional: añade "..." si es demasiado largo */
  height: 80px;  /* fija la altura de la celda */
}

.cuadro img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  margin-bottom: 8px;
}

.naranja {
  background: orange;
  color: white;
}