Añadidos juegos

serpiente/styles.css

@@ -0,0 +1,130 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  background: #142850;
+  font-family: Arial, sans-serif;
+  color: #fafafa;
+  text-align: center;
+  margin: 0;
+  min-height: 100vh;
+}
+
+/* Encabezado */
+h1 {
+  margin-top: 2.2rem;
+  color: #00a8cc;
+  font-size: clamp(1.5rem, 4vw, 2.7rem);
+}
+
+/* Contenedor del juego */
+#game-container {
+  margin: 2rem auto;
+  display: block;
+  background: #27496d;
+  border-radius: 1em;
+  box-shadow: 0 2px 10px #1119;
+  padding: 1.1em;
+  max-width: 98vw;
+  width: 100%;
+}
+
+/* Canvas responsive */
+canvas {
+  background: #dae1e7;
+  display: block;
+  margin: 0 auto;
+  border-radius: 0.65em;
+  width: 100%;
+  max-width: 420px;
+  aspect-ratio: 1/1;
+  height: auto;
+  box-shadow: 0 2px 10px #27496d44;
+}
+
+/* Score */
+#score {
+  font-size: clamp(1.1em, 2vw, 1.4em);
+  margin-top: 1em;
+  color: #ffd700;
+}
+
+/* Game over mensaje */
+#game-over-message {
+  font-size: clamp(1.1em, 3vw, 1.5em);
+  color: #fc5185;
+  margin-top: 1em;
+  min-height: 2em;
+}
+
+/* Botón restart */
+#restart-btn {
+  margin-top: 1.1em;
+  font-size: clamp(1em, 2vw, 1.18em);
+  padding: 0.6em 2em;
+  border: none;
+  border-radius: 0.6em;
+  background: #00a8cc;
+  color: #fafafa;
+  cursor: pointer;
+  transition: background 0.2s;
+  box-shadow: 0 2px 8px #00a8cc44;
+}
+#restart-btn:hover,
+#restart-btn:active {
+  background: #145991;
+}
+
+/* ==== Pantallas móviles ==== */
+@media (max-width: 600px) {
+  h1 {
+    margin-top: 5vw;
+    font-size: clamp(1.2rem, 7vw, 2em);
+  }
+  #game-container {
+    border-radius: 6vw;
+    padding: 5vw;
+    margin-top: 6vw;
+    margin-bottom: 8vw;
+    box-shadow: 0 2px 10px #1c254080;
+  }
+  canvas {
+    max-width: 99vw;
+    border-radius: 5vw;
+  }
+  #score {
+    font-size: clamp(1em, 8vw, 1.6em);
+    margin-top: 4vw;
+  }
+  #game-over-message {
+    font-size: clamp(1em, 8vw, 1.3em);
+    margin-top: 4vw;
+  }
+  #restart-btn {
+    font-size: clamp(1em, 8vw, 1.45em);
+    padding: 1em 12vw;
+    border-radius: 6vw;
+    margin-top: 4vw;
+  }
+}
+
+/* ==== Pantallas muy pequeñas ==== */
+@media (max-width: 340px) {
+  #game-container {
+    padding: 2vw;
+    border-radius: 11vw;
+  }
+  canvas {
+    border-radius: 10vw;
+  }
+  #restart-btn {
+    font-size: clamp(0.9em, 8vw, 1.14em);
+    padding: 0.9em 3vw;
+    border-radius: 10vw;
+  }
+}