Añadidos juegos

memoria-v2/styles.css

@@ -0,0 +1,179 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  background: #f0f2f6;
+  font-family: Arial, sans-serif;
+  text-align: center;
+  color: #222;
+  margin: 0;
+  min-height: 100vh;
+}
+
+h1 {
+  margin-top: 2.2rem;
+  color: #3d5a80;
+  font-size: clamp(1.6rem, 4vw, 2.7rem);
+}
+
+#hud {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.2rem;
+  margin: 0.5rem auto;
+  font-size: clamp(1em, 2vw, 1.15em);
+  color: #223757;
+  width: 100%;
+  max-width: 650px;
+  padding: 0 1vw;
+}
+
+/* ==== Tablero responsive ==== */
+#game-board {
+  margin: 2.1rem auto 1rem auto;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(45px, 1fr));
+  gap: 1rem;
+  justify-content: center;
+  max-width: 98vw;
+  padding: 0 1vw;
+}
+
+.card {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  background: #98c1d9;
+  color: #293241;
+  font-size: clamp(1.2rem, 4vw, 2.3rem);
+  border-radius: 0.8rem;
+  box-shadow: 0 2px 8px #bbb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s, opacity 0.4s;
+}
+
+.card.flipped {
+  background: #e0fbfc;
+  cursor: default;
+}
+
+.card.matched {
+  background: #3d5a80;
+  color: #fff;
+  opacity: 0.7;
+  cursor: default;
+}
+
+.card.hide {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.45s;
+}
+
+#status {
+  font-size: clamp(1em, 2vw, 1.2em);
+  min-height: 2em;
+  margin-bottom: 1em;
+  color: #3d5a80;
+}
+
+#restart-btn {
+  background: #3d5a80;
+  color: #fff;
+  font-size: clamp(1em, 2vw, 1.16em);
+  border: none;
+  border-radius: 0.6rem;
+  padding: 0.5em 2em;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-bottom: 1.3em;
+}
+#restart-btn:hover {
+  background: #223757;
+}
+
+/* ==== Pantallas móviles ==== */
+@media (max-width: 600px) {
+  h1 {
+    margin-top: 5vw;
+    font-size: clamp(1.3rem, 7vw, 2.1rem);
+  }
+  #hud {
+    font-size: clamp(1em, 5vw, 1.25em);
+    gap: 4vw;
+    max-width: 98vw;
+    padding: 0 2vw;
+  }
+  #game-board {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 5vw;
+    padding: 2vw;
+    margin-top: 5vw;
+    margin-bottom: 5vw;
+    max-width: 98vw;
+  }
+  .card {
+    border-radius: 5vw;
+    font-size: clamp(1.2rem, 11vw, 3rem);
+  }
+  #restart-btn {
+    font-size: clamp(1em, 6vw, 1.3em);
+    border-radius: 5vw;
+    padding: 3vw 10vw;
+    margin-bottom: 5vw;
+  }
+  #status {
+    font-size: clamp(1em, 7vw, 1.3em);
+    margin-bottom: 4vw;
+  }
+}
+
+/* ==== Tablets o pantallas intermedias ==== */
+@media (min-width: 601px) and (max-width: 900px) {
+  #game-board {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2vw;
+  }
+  .card {
+    font-size: clamp(1.3em, 6vw, 2.6rem);
+  }
+}
+
+/* ==== Pantallas muy grandes ==== */
+@media (min-width: 1200px) {
+  #hud {
+    font-size: clamp(1.1em, 1vw, 1.3em);
+    max-width: 800px;
+  }
+  #game-board {
+    max-width: 700px;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 1.5rem;
+  }
+  .card {
+    font-size: clamp(2rem, 2vw, 3rem);
+  }
+}
+
+/* ==== Extra pequeñas ==== */
+@media (max-width: 350px) {
+  #game-board {
+    grid-template-columns: repeat(1, 1fr);
+    gap: 2vw;
+    padding: 1vw;
+  }
+  .card { font-size: clamp(1rem, 23vw, 1.8rem); }
+  #hud {
+    font-size: clamp(1em, 9vw, 1.1em);
+    gap: 2vw;
+  }
+}