/* Reset y base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body con animacion entrada y fondo cambiante*/
body {
  background: linear-gradient(-45deg, #ff0080, #8000ff, #00ff80, #ff8000);
  background-size: 400% 400%;
  animation:
    gradient 15s ease infinite,
    lock-reveal 6s forwards ease-in-out;

  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;

  mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIGZpbGw9IiMwMDAwMDAiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI3Ljc3NCAyNy43NzQiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEwLjM5OCwyMi44MTFoNC42MTh2NC45NjRoLTQuNjE4VjIyLjgxMXogTTIxLjA1OCwxLjU5NEMxOS44NTQsMC41MzIsMTcuNjEyLDAsMTQuMzMsMGMtMy43MTEsMC02LjIwNSwwLjUxNC03LjQ4MiwxLjU0Mw0KCQljLTEuMjc3LDEuMDI3LTEuOTE2LDMuMDI3LTEuOTE2LDZMNC45MTEsOC41NTFoNC41NzdsLTAuMDItMS4wNDljMC0xLjQyNCwwLjMwMy0yLjM3NywwLjkwNy0yLjg1NA0KCQljMC42MDQtMC40NzcsMS44MTQtMC43MTcsMy42MzItMC43MTdjMS45MzYsMCwzLjE4NCwwLjIyOCwzLjc0LDAuNjc2YzAuNTU5LDAuNDUxLDAuODM3LDEuNDU3LDAuODM3LDMuMDE3DQoJCWMwLDEuODgzLTAuNzQ1LDMuMTMzLTIuMjM3LDMuNzUybC0xLjc5NywwLjc2NmMtMS44ODIsMC43ODEtMy4wNDQsMS41MzgtMy40ODksMi4yN2MtMC40NDIsMC43MzItMC42NjUsMi4yNDItMC42NjUsNC41MjloNC42OA0KCQl2LTAuNjQ2YzAtMS40MSwwLjk4Ny0yLjUzMywyLjk2NS0zLjM2NWMyLjAzLTAuODYxLDMuMzQzLTEuNzQ2LDMuOTM1LTIuNjUxYzAuNTkyLTAuOTA4LDAuODg4LTIuNDk4LDAuODg4LTQuNzcxDQoJCUMyMi44NjMsNC42MjUsMjIuMjYxLDIuNjU1LDIxLjA1OCwxLjU5NHoiLz4NCjwvZz4NCjwvc3ZnPg==);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 50px;
}

/*Animación gradiente que mueve el fondo gradiente */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


@keyframes lock-reveal {
  0% {
    mask-size: 50px;
    /* empieza en valor inicial*/
  }

  100% {
    mask-size: 10000vh;
    /* termina siendo tan grande que "desaparece" */
  }
}

/* Caja principal centrada, fondo blanco, bordes redondeados y una sombra agradable */
#box {
  background-color: white;
  width: 100%;
  max-width: 450px;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/*Cajas que informativas de intentos y rango */
.info-panel {
  display: flex;
  /* Usa Flexbox para colocar los elementos hijos en fila */
  flex-wrap: wrap;
  /* Permite que las cajas bajen a la siguiente línea si no hay espacio */
  justify-content: center;
  /* Centra horizontalmente las cajas dentro del contenedor */
  align-items: center;
  /* Centra verticalmente las cajas dentro del contenedor */
  gap: 20px;
  /* Espacio de 20px entre cada caja */
  margin-top: 30px;
  /* Espacio superior del contenedor */
  margin-bottom: 30px;
  /* Espacio inferior del contenedor */
}

.try-range {
  margin: 10px auto;
  /* 10px de margen vertical, centrado horizontalmente */
  padding: 16px;
  /* Espaciado interno entre contenido y bordes */
  border: 1px solid #ccc;
  /* Borde gris claro alrededor de la caja */
  border-radius: 8px;
  /* Bordes redondeados (8px) */
  background: #d1b6f079;
  /* Color de fondo violeta claro con transparencia */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Sombra suave para dar sensación de relieve */
  line-height: 1.5;
  /* Espaciado entre líneas del texto */
  text-align: center;
  /* Centra el texto horizontalmente */
}

.info-box {
  flex: 1 1 150px;
  /* flex-grow: 1  → permite crecer si hay espacio flex-shrink: 1 → permite reducir su tamaño si falta espacio flex-basis: 150px → ancho base o mínimo sugerido */
  max-width: 200px;
  /* Ancho máximo de cada caja */
}


/*boton*/
#contentBox {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
/*Contenedor individual del botón */
.buttonBox {
  margin: 0 20px 40px;
  position: relative;
  max-width: 200px;
  min-width: 150px;
  flex: 20%;
}
/*Botón principal*/
button {
  width: 100%;
  height: 80px;
  position: relative;
  background: rgba(103, 126, 234, 0.8);
  text-transform: uppercase;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
  font-size: 15px;
  outline: none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  cursor: pointer;
}

/* Animaciones personalizadas para las letras del botón “adivinar” */
#tenth>button {
  letter-spacing: 1px;
}

#tenth span {
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  width: 8px;
  transition: all .5s ease-in-out;
}

#tenth:hover span:nth-of-type(1) {
  animation: a1 .5s;
}

#tenth:hover span:nth-of-type(2) {
  animation: d1 .5s;
}

#tenth:hover span:nth-of-type(3) {
  animation: i1 .5s;
}

#tenth:hover span:nth-of-type(4) {
  animation: v1 .5s;
}

#tenth:hover span:nth-of-type(5) {
  animation: i1 .5s;
}

#tenth:hover span:nth-of-type(7) {
  animation: n1 .5s;
  
}

#tenth:hover span:nth-of-type(8) {
  animation: a2 .5s;
  
}

#tenth:hover span:nth-of-type(9) {
  animation: r1 .5s;
  
}

/*Animaciones personalizadas de movimiento para las letras */
@keyframes a1 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(50px, 5px);
  }

  75% {
    transform: translate(5px, 5px);
  }

  80% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes d1 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-4px, 0);
  }

  50% {
    transform: translate(3px, 4px);
  }

  80% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes i1 {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: rotate(360deg);
  }

  50% {
    transform: scale(2);
  }

  80% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes v1 {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-10px, -2px);
  }

  80% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes n1 {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(0, 10px);
  }

  80% {
    transform: translate(0, 32px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes a2 {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(0, -10px);
  }

  40% {
    transform: translate(0, 0);
  }

  60% {
    transform: translate(0, -10px);
  }

  80% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes r1 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: skewY(50deg);
  }

  80% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

/*Ajuste para pantallas*/
@media(max-width: 1200px) {
  #contentBox {
    width: 100%;
  }
}

/* Label aspecto*/
.label-moderno {
  display: block;
  margin-bottom: 8px;
  text-align: center;
}

.label-text {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #2c3e50;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.label-subtext {
  display: block;
  font-size: 0.9rem;
  color: #7f8c8d;
  font-style: italic;
}

/*Input number sin flecha*/
input,
textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid lighten(#667eea, 50%);

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  -moz-appearance: textfield;
  appearance: textfield;
}

/*Caja de resultado*/
#result {
  display: none;
  /* Oculto al inicio */
  margin: 10px auto;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #d1b6f079;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  line-height: 1.5;
  text-align: center;
  transition: all 0.5s ease-in-out;
  /* Suaviza aparición */
}




/* lista de intentos del jugador*/
.attempts-list {
  margin-top: 20px;
  padding: 15px;
  background-color: #F0F4C3;
  border-radius: 10px;
}

.attempts-list h4 {
  color: #333;
  margin-bottom: 10px;
}



/* Pantallas */
.screen {
  display: none;
  width: 100%;
}

.screen.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tarjetas de dificultad */
.difficulty-options {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px 0;
}

/*Personalización tarjeta de dificultad*/
.difficulty-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 200px;
  max-width: 250px;
  border: 3px solid transparent;
}

.difficulty-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border-color: #667eea;
}

.difficulty-card[data-difficulty="easy"]:hover {
  border-color: #4CAF50;
}

.difficulty-card[data-difficulty="hard"]:hover {
  border-color: #f44336;
}

.difficulty-icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.difficulty-card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.difficulty-card p {
  color: #7f8c8d;
  margin-bottom: 15px;
}

.difficulty-info {
  padding-top: 15px;
  border-top: 1px solid #ecf0f1;
}

.difficulty-info span {
  font-size: 0.9rem;
  color: #95a5a6;
  font-style: italic;
}

/* Botón para volver */
.back-button {
  text-align: center;
  margin-top: 20px;
}

.back-button button {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.back-button button:hover {
  background: #7f8c8d;
}

/* Asegurar que el box sea consistente */
.box {
  background-color: white;
  width: 100%;
  max-width: 500px;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin: 20px;
}


/*Boton reinicio */
/* Estilo del botón pequeño de reinicio */
.reset-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  margin-top: 15px;
  transition: transform 0.2s ease;
}

/*animacion del botón */
.reset-btn:hover {
  transform: rotate(180deg);
}

/* Estados del box */
.box.error {
    border: 3px solid #ff6b6b;
    animation: shake 0.5s ease-in-out;
}

.box.success {
    border: 3px solid #4CAF50;
    animation: celebrate 0.5s ease-in-out;
}

/* Animaciones */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

@keyframes celebrate {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}



/*  Ranking de jugadores (lista con nombres y puntajes) */
.ranking-list {
    max-height: 400px;
    overflow-y: auto; /* permite scroll si hay muchos */
    margin: 20px 0;
}

.ranking-item {
    padding: 10px 15px;
    margin: 8px 0;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea; /* línea morada lateral */
}

.ranking-position {
    font-weight: bold;
    margin-right: 10px;
}

.ranking-name {
    font-weight: bold;
}

.ranking-score {
    float: right;
    font-weight: bold;
    color: #667eea;
}