Añadidos juegos

reflejos/styles.css

@@ -0,0 +1,129 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background: #f2f2f2;
+  margin: 0;
+  min-height: 100vh;
+  color: #222;
+}
+
+/* Info del juego */
+#game-info {
+  font-size: clamp(1em, 2vw, 1.2em);
+  margin-bottom: 1em;
+}
+
+/* Área de juego */
+#game-area {
+  width: 100vw;
+  max-width: 420px;
+  height: 100vw;
+  max-height: 420px;
+  margin: 2.2rem auto 1.3rem auto;
+  background: #fff;
+  border: 2px solid #2196f3;
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.9em;
+  box-shadow: 0 2px 14px #bbb4;
+  aspect-ratio: 1/1;
+}
+
+/* Círculo responsive */
+.circle {
+  width: clamp(38px, 12vw, 54px);
+  height: clamp(38px, 12vw, 54px);
+  background: #4caf50;
+  border-radius: 50%;
+  position: absolute;
+  cursor: pointer;
+  box-shadow: 0 3px 10px #999;
+  transition: background 0.2s;
+  touch-action: manipulation;
+}
+.circle:active {
+  background: #388e3c;
+}
+
+/* Botón Start */
+#start-btn {
+  font-size: clamp(1em, 3vw, 1.15em);
+  padding: 0.7em 2em;
+  margin-top: 1em;
+  cursor: pointer;
+  background: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 0.45em;
+  box-shadow: 0 2px 8px #2196f366;
+  transition: background 0.2s;
+}
+#start-btn:hover,
+#start-btn:active {
+  background: #1976d2;
+}
+
+/* Game Over */
+#game-over {
+  margin-top: 1.3em;
+  font-size: clamp(1em, 2vw, 1.15em);
+}
+
+/* Oculto */
+.hidden {
+  display: none !important;
+}
+
+/* ==== Pantallas móviles ==== */
+@media (max-width: 728px) {
+  #game-area {
+    max-width: 98vw;
+    max-height: 98vw;
+    border-radius: 6vw;
+    box-shadow: 0 2px 8px #2196f350;
+    margin-top: 5vw;
+    margin-bottom: 4vw;
+  }
+  .circle {
+    width: clamp(33px, 20vw, 54px);
+    height: clamp(33px, 20vw, 54px);
+  }
+  #start-btn {
+    font-size: clamp(1em, 8vw, 1.5em);
+    padding: 1em 14vw;
+    border-radius: 5vw;
+    margin-top: 4vw;
+  }
+  #game-info {
+    font-size: clamp(1em, 6vw, 1.25em);
+    margin-bottom: 4vw;
+  }
+}
+
+/* ==== Pantallas muy pequeñas ==== */
+@media (max-width: 340px) {
+  #game-area {
+    max-width: 94vw;
+    max-height: 94vw;
+    border-radius: 13vw;
+  }
+  .circle {
+    width: clamp(22px, 33vw, 38px);
+    height: clamp(22px, 33vw, 38px);
+  }
+  #start-btn {
+    font-size: clamp(0.9em, 10vw, 1.2em);
+    padding: 0.5em 8vw;
+    border-radius: 8vw;
+  }
+}
+
+/* ::::::::::::::::::::::::::::::::: */