Añadidos juegos

2025-08-21 23:42:55 +02:00
parent ec9c7d8d63
commit 90b2643d8d
46 changed files with 3936 additions and 0 deletions
--- a/piedra-papel-tijera/styles.css
+++ b/piedra-papel-tijera/styles.css
@@ -0,0 +1,152 @@
+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;
+  }
+}