Mejoras y optimizaciones en general.

4-en-raya/styles.css

@@ -129,4 +129,56 @@ h1 {
   .cell {
     font-size: 2em;
   }
+}
+/* Controles de IA y marcador */
+#controls {
+  margin: 1rem auto 0.5rem auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+#controls select#difficulty {
+  font-size: 1em;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+#score {
+  margin: 0.6rem auto 0.4rem auto;
+  font-size: 1em;
+  color: #444;
+}
+
+/* Botones-celda accesibles */
+.cell {
+  border: none;
+  outline: none;
+}
+.cell:focus-visible {
+  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.35);
+}
+
+/* Resaltado de combinación ganadora */
+.win {
+  background: #c8e6ff;
+  box-shadow: 0 0 0 2px rgba(61, 90, 254, 0.25), 0 2px 10px rgba(61, 90, 254, 0.16);
+}
+
+@media (prefers-color-scheme: dark) {
+  #controls select#difficulty {
+    background: #20233a;
+    color: #eaeaf0;
+    border-color: #2c3252;
+  }
+  #score {
+    color: #a0a3b0;
+  }
+  .cell:focus-visible {
+    box-shadow: 0 0 0 4px rgba(61, 90, 254, 0.35);
+  }
+  .win {
+    background: #172441;
+    box-shadow: 0 0 0 2px rgba(61, 90, 254, 0.35), 0 2px 12px rgba(61, 90, 254, 0.22);
+  }
 }