/* Reset y Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; min-height: 100vh; display: flex; flex-direction: column; }
header { text-align: center; padding: 1rem; }
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
footer { text-align: center; padding: 1rem; background: rgba(0,0,0,0.1); }

/* Slot Machine */
#slot { 
  display: flex; 
  justify-content: center; 
  gap: 0.5rem; 
  margin-bottom: 1rem; 
  background: #000; 
  padding: 1rem; 
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
}
.reel { 
  width: 80px; 
  height: 80px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 3rem; 
  background: #fff; 
  color: #333; 
  border-radius: 5px; 
  transition: transform 0.1s ease; 
  overflow: hidden; 
}
@media (max-width: 480px) { .reel { width: 60px; height: 60px; font-size: 2rem; } }

/* Animación de Giro */
@keyframes spin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-200px); } /* Ajusta para más "frames" si agregas más símbolos */
}
.spinning { 
  animation: spin 0.3s linear infinite; 
  background: #ffeb3b; /* Destello dorado */
}

/* Botón */
#spin { 
  background: #4CAF50; 
  color: white; 
  border: none; 
  padding: 1rem 2rem; 
  font-size: 1.2rem; 
  border-radius: 5px; 
  cursor: pointer; 
  margin-bottom: 1rem; 
  transition: background 0.3s; 
}
#spin:hover:not(:disabled) { background: #45a049; }
#spin:disabled { background: #ccc; cursor: not-allowed; }

/* Resultado */
#result { 
  text-align: center; 
  font-size: 1.1rem; 
  min-height: 2rem; 
  padding: 1rem; 
  background: rgba(255,255,255,0.1); 
  border-radius: 5px; 
  max-width: 400px; 
}
#result a { 
  display: inline-block; 
  background: #2196F3; 
  color: white; 
  padding: 0.5rem 1rem; 
  text-decoration: none; 
  border-radius: 3px; 
  margin-top: 0.5rem; 
}
#result a:hover { background: #0b7dda; }

/* Responsive */
@media (max-width: 768px) { 
  h1 { font-size: 1.5rem; } 
  #slot { gap: 0.2rem; padding: 0.5rem; } 
}