html {
  box-sizing: border-box;
  font-size: 16px;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: #fdf6e3;
  font-family: Arial, sans-serif;
  text-align: center;
  color: #222;
  margin: 0;
  min-height: 100vh;
}

/* Encabezado */
h1 {
  margin-top: 2.7rem;
  color: #222;
  font-size: clamp(1.5rem, 4vw, 2.7rem);
}

/* Marcador */
#scoreboard {
  font-size: clamp(1.05em, 2.5vw, 1.2em);
  margin: 0.9em 0 1.8em 0;
}

/* Botones de elección */
#choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  margin-bottom: 2em;
}

#choices button {
  font-size: clamp(1em, 3vw, 1.3em);
  margin: 0 0.4em;
  padding: 0.9em 2em;
  border: none;
  border-radius: 0.7em;
  background: #6ab04c;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  min-width: 100px;
  max-width: 90vw;
  box-shadow: 0 2px 6px #eaeaea;
}

#choices button:hover {
  background: #218c5a;
}

/* Resultado */
#result {
  font-size: clamp(1.05em, 2vw, 1.2em);
  margin: 1.1em 0 1.7em 0;
  min-height: 2em;
}

/* Reset */
#reset-btn {
  font-size: clamp(1em, 2vw, 1.15em);
  padding: 0.6em 2em;
  border: none;
  border-radius: 0.5em;
  background: #f76707;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 1.1em;
  box-shadow: 0 2px 6px #eaeaea;
}
#reset-btn:hover {
  background: #c44210;
}

/* ======= Pantallas pequeñas (móviles) ======= */
@media (max-width: 600px) {
  h1 {
    margin-top: 5vw;
    font-size: clamp(1.2rem, 7vw, 2rem);
  }
  #scoreboard {
    font-size: clamp(1em, 6vw, 1.35em);
    margin-top: 2vw;
    margin-bottom: 5vw;
  }
  #choices {
    gap: 3vw;
    margin-bottom: 5vw;
  }
  #choices button {
    font-size: clamp(1em, 6vw, 2em);
    padding: 1.2em 6vw;
    border-radius: 7vw;
    min-width: 48vw;
  }
  #result {
    font-size: clamp(1em, 7vw, 1.5em);
    margin-bottom: 6vw;
  }
  #reset-btn {
    font-size: clamp(1em, 8vw, 2em);
    padding: 1em 15vw;
    border-radius: 8vw;
    margin-top: 5vw;
  }
}

/* ===== Pantallas muy grandes ===== */
@media (min-width: 1200px) {
  h1 {
    font-size: clamp(2rem, 2vw, 3rem);
  }
  #scoreboard {
    font-size: clamp(1.2em, 2vw, 1.5em);
    margin-bottom: 2.5em;
  }
  #choices button {
    font-size: clamp(1.2em, 2vw, 1.5em);
    padding: 1em 3em;
    border-radius: 1em;
    min-width: 120px;
    max-width: 320px;
  }
  #reset-btn {
    font-size: clamp(1.12em, 2vw, 1.25em);
    padding: 0.8em 2.5em;
    border-radius: 0.8em;
  }
}

/* ===== Pantallas muy pequeñas (<350px) ===== */
@media (max-width: 350px) {
  #choices {
    flex-direction: column;
    gap: 5vw;
  }
  #choices button {
    min-width: 60vw;
    padding: 1em 7vw;
  }
  #reset-btn {
    padding: 1em 8vw;
  }
}