Añadidos juegos

topo/styles.css

@@ -0,0 +1,143 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  background: #fae3d9;
+  font-family: Arial, sans-serif;
+  text-align: center;
+  color: #22223b;
+  margin: 0;
+  min-height: 100vh;
+}
+
+/* Encabezado */
+h1 {
+  margin-top: 2rem;
+  color: #9a8c98;
+  font-size: clamp(1.5rem, 5vw, 2.7rem);
+}
+
+/* Score y timer flexibles */
+#score, #timer {
+  font-size: clamp(1em, 2vw, 1.18em);
+  margin-bottom: 0.8em;
+}
+
+/* Tablero de celdas adaptativo y cuadrado */
+#grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 1em;
+  justify-content: center;
+  margin: 1.6em auto 0.8em auto;
+  width: 100%;
+  max-width: 360px;
+  aspect-ratio: 1/1;
+  background: #f5ebe3;
+  border-radius: 1.2em;
+  padding: 1em;
+  box-shadow: 0 2px 10px #bbb7;
+}
+
+/* Celdas circulares */
+.cell {
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 2px 10px #bbb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(1.5em, 6vw, 2.4em);
+  cursor: pointer;
+  transition: background 0.2s;
+  min-width: 0;
+  min-height: 0;
+  aspect-ratio: 1/1;
+}
+.cell.mole {
+  background: #b5838d;
+}
+
+/* Botón start flexible */
+#start-btn {
+  background: #9a8c98;
+  color: #fff;
+  font-size: clamp(1em, 2vw, 1.18em);
+  border: none;
+  border-radius: 0.6em;
+  padding: 0.6em 2em;
+  cursor: pointer;
+  box-shadow: 0 2px 8px #b5838d44;
+  transition: background 0.2s;
+  margin-bottom: 1.3em;
+}
+#start-btn:hover, #start-btn:active {
+  background: #22223b;
+  color: #fff;
+}
+
+/* Mensaje final */
+#end-message {
+  font-size: clamp(1em, 2vw, 1.15em);
+  margin-top: 1.1em;
+  min-height: 2em;
+  color: #b5838d;
+}
+
+/* ==== Pantallas móviles ==== */
+@media (max-width: 600px) {
+  h1 {
+    margin-top: 6vw;
+    font-size: clamp(1.1em, 7vw, 2.1em);
+  }
+  #grid {
+    max-width: 97vw;
+    gap: 4vw;
+    padding: 2vw;
+    border-radius: 7vw;
+    margin-top: 6vw;
+    margin-bottom: 6vw;
+  }
+  .cell {
+    font-size: clamp(1.1em, 10vw, 2.8em);
+    border-radius: 50%;
+  }
+  #start-btn {
+    font-size: clamp(1em, 8vw, 1.5em);
+    padding: 1em 13vw;
+    border-radius: 5vw;
+    margin-bottom: 6vw;
+  }
+  #score, #timer {
+    font-size: clamp(1em, 7vw, 1.3em);
+    margin-bottom: 3vw;
+  }
+  #end-message {
+    font-size: clamp(1em, 7vw, 1.3em);
+    margin-top: 5vw;
+  }
+}
+
+/* ==== Pantallas muy pequeñas ==== */
+@media (max-width: 350px) {
+  #grid {
+    max-width: 92vw;
+    gap: 2vw;
+    border-radius: 13vw;
+    padding: 1vw;
+  }
+  .cell {
+    font-size: clamp(0.8em, 12vw, 1.2em);
+  }
+  #start-btn {
+    font-size: clamp(0.9em, 10vw, 1.1em);
+    padding: 0.7em 3vw;
+    border-radius: 8vw;
+  }
+}