Mejoras y optimizaciones en general.

banderas/styles.css

@@ -73,4 +73,68 @@ h1 {
 }
 @media (max-width: 520px) {
   .flags, .countries { grid-template-columns: 1fr;}
+}
+/* Controles y accesibilidad */
+#controls {
+  margin: 1rem auto 0.5rem auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+#controls select#pairs-count {
+  font-size: 1em;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.flag, .country {
+  outline: none;
+}
+.flag:focus-visible, .country:focus-visible {
+  box-shadow: 0 0 0 3px rgba(35, 105, 143, 0.35);
+}
+.flag[aria-disabled="true"], .country[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.85;
+}
+
+/* Modo oscuro básico */
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #0f1222;
+    color: #eaeaf0;
+  }
+  #score, #status {
+    color: #a0a3b0;
+  }
+  .flag, .country {
+    background: #20233a;
+    color: #eaeaf0;
+    border-color: #2c3252;
+    box-shadow: 0 2px 10px rgba(61, 90, 254, 0.12);
+  }
+  .flag.selected, .country.selected {
+    background: #1e3a8a;
+    border-color: #3d5afe;
+    box-shadow: 0 0 0 2px #3d5afe;
+  }
+  .flag.matched, .country.matched {
+    background: #1b5e20;
+    color: #d7ffd9;
+    border-color: #66bb6a;
+    box-shadow: 0 0 0 2px #66bb6a;
+  }
+  #restart-btn {
+    background: #3d5afe;
+  }
+  #restart-btn:hover {
+    background: #0a2459;
+  }
+  #controls select#pairs-count {
+    background: #20233a;
+    color: #eaeaf0;
+    border-color: #2c3252;
+  }
 }