Mejoras y optimizaciones en general.

memoria/styles.css

@@ -143,4 +143,85 @@ h1 {
   .card { font-size: clamp(1rem, 20vw, 2rem); }
 }
 
-/* ::::::::::::::::::::::::::: */
+/* ::::::::::::::::::::::::::: */
+/* Controles y HUD */
+#controls {
+  margin: 1rem auto 0.5rem auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+#controls select#difficulty {
+  font-size: 1em;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+#hud {
+  font-size: 1rem;
+  color: #364f6b;
+  margin: 0.4rem 0 0.8rem 0;
+}
+
+/* Accesibilidad: foco visible y estado deshabilitado */
+.card {
+  outline: none;
+  border: none;
+}
+.card:focus-visible {
+  box-shadow: 0 0 0 4px rgba(252, 81, 133, 0.35);
+}
+.card[aria-disabled="true"] {
+  cursor: default;
+}
+
+/* Ajustes de tablero para rejillas dinámicas desde JS */
+#game-board {
+  /* JS establecerá grid-template-columns dinámicamente */
+}
+
+/* Modo oscuro mejorado */
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #0f1222;
+    color: #eaeaf0;
+  }
+  h1, #info {
+    color: #eaeaf0;
+  }
+  #hud {
+    color: #a0a3b0;
+  }
+  #controls select#difficulty {
+    background: #20233a;
+    color: #eaeaf0;
+    border-color: #2c3252;
+  }
+  #game-board {
+    /* sin cambios, deja que JS decida columnas */
+  }
+  .card {
+    background: #20233a;
+    color: #eaeaf0;
+    box-shadow: 0 2px 10px rgba(61, 90, 254, 0.12);
+  }
+  .card.flipped {
+    background: #3d5afe;
+    color: #fff;
+  }
+  .card.matched {
+    background: #172441;
+    color: #fff;
+    opacity: 0.8;
+  }
+  #reset-btn {
+    background: #3d5afe;
+  }
+  #reset-btn:hover {
+    background: #0a2459;
+  }
+  .card:focus-visible {
+    box-shadow: 0 0 0 4px rgba(61, 90, 254, 0.35);
+  }
+}