/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(circle, #222, #000);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#contenedor {
  background: linear-gradient(to bottom, #444, #111);
  border: 8px solid gold;
  border-radius: 20px;
  padding-top: 5px;
  padding-left: 1px;
  padding-right: 1px;
  text-align: center;
  width: 500px;
  position: relative;
  box-shadow: 0 0 30px gold, inset 0 0 20px #000;
  height: 400px;
}

h1 {
  border-radius: 10px;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgb(37, 34, 18);
  background: linear-gradient(90deg, hsla(190, 82%, 59%, 1) 0%, hsla(302, 100%, 46%, 1) 100%);
  border: 3px solid gold;

  


}
div.frutas{
    background: linear-gradient(90deg, hsla(190, 82%, 59%, 1) 0%, hsla(302, 100%, 46%, 1) 100%);
    border-radius: 10px;
   margin-left: 10px;
   margin-right: 10px;
   border: 10px solid gold;
   padding: 10px;
}

.frutas {
  display: flex;
  justify-content: space-evenly;
  margin: 20px 0;
}

.frutas img {
  width: 80px;
  height: 80px;
  border: 4px solid gold;
  border-radius: 10px;
  background: #fcf9f9;
  box-shadow: 0 0 10px #fff;
  transition: transform 0.3s ease;
}

.frutas img.animar {
  animation: girar 1s ease-in-out;
}

@keyframes girar{
    from{
        transform: rotate(0);

    }
    to{
        transform: rotate(1440deg); 
        /* 4 vueltas *360º  */
    }
}

#resultado {
  margin-top: 20px;
  font-size: 1.3rem;
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
}
div#vidas.vidas{
    background-color: rgb(139, 26, 252);
    margin: 0 10px 0 10px;
}

.vidas {
  margin-bottom: 10px;
}

.corazon {
  font-size: 1.5rem;
  margin: 0 3px;
  color: hotpink;
  text-shadow: 0 0 5px deeppink;
}

/* Palanca estilo */
.palanca-container {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
}

.palanca {
  width: 30px;
  height: 100px;
  background: linear-gradient(to bottom, #999, #555);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 10px #fff;
  transition: transform 0.2s;
}

.palanca::after {
  content: '';
  width: 30px;
  height: 30px;
  background: red;
  border: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: 0;
  box-shadow: 0 0 10px red;
}

.palanca.animada {
  transform: rotate(30deg);
}
#contenedor.ganar {
  animation: lucesCasino 1s infinite;
  border-color: #0f0;
  box-shadow: 0 0 20px #0f0, inset 0 0 15px #0f0;
}

@keyframes lucesCasino {
  0% { box-shadow: 0 0 20px #0f0, inset 0 0 15px #0f0; }
  50% { box-shadow: 0 0 40px #ff0, inset 0 0 25px #ff0; }
  100% { box-shadow: 0 0 20px #0f0, inset 0 0 15px #0f0; }
}