Mejoras y optimizaciones en general.

adivina/styles.css

@@ -1,43 +1,106 @@
+:root {
+  --bg: #f7f7f7;
+  --text: #222;
+  --muted: #888;
+  --card-bg: #ffffff;
+  --shadow: 0 0 8px #bbb;
+  --accent: #2196f3;
+  --accent-hover: #1769aa;
+  --accent-contrast: #ffffff;
+  --error: #c62828;
+}
+
 body {
-  background: #f7f7f7;
-  font-family: Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Montserrat', Arial, sans-serif;
   text-align: center;
+  margin: 0;
+  padding: 20px;
 }
 
 h1 {
-  margin-top: 40px;
-  color: #222;
+  margin-top: 20px;
+  color: var(--text);
+  font-weight: 700;
 }
 
 #game-box {
-  background: white;
+  background: var(--card-bg);
   width: 350px;
-  margin: 50px auto;
+  max-width: 94vw;
+  margin: 30px auto;
   padding: 30px 20px;
   border-radius: 12px;
-  box-shadow: 0 0 8px #bbb;
+  box-shadow: var(--shadow);
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
 }
 
 input[type="number"] {
-  width: 100px;
+  width: 120px;
   font-size: 1.1em;
-  padding: 6px;
-  margin-right: 12px;
+  padding: 8px 10px;
   margin-bottom: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  outline: none;
+}
+
+input[type="number"]:focus-visible {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
+}
+
+select#difficulty {
+  font-size: 1em;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  margin: 8px 0 14px 0;
 }
 
 button {
   font-size: 1em;
-  padding: 7px 20px;
+  padding: 9px 22px;
   border: none;
-  border-radius: 5px;
-  background: #2196f3;
-  color: white;
+  border-radius: 44px;
+  background: var(--accent);
+  color: var(--accent-contrast);
   cursor: pointer;
   margin-bottom: 10px;
+  transition: transform .12s, box-shadow .16s, background .16s;
 }
+
 button:hover {
-  background: #1769aa;
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(33,150,243,0.3);
+}
+
+button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(33,150,243,0.35);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+#error {
+  color: var(--error);
+  font-size: 0.95em;
+  min-height: 1.6em;
 }
 
 #info {
@@ -48,21 +111,93 @@ button:hover {
 
 #attempts {
   margin-top: 8px;
-  color: #888;
+  color: var(--muted);
+}
+
+#best {
+  margin-top: 6px;
+  color: var(--muted);
+}
+
+#history {
+  margin-top: 16px;
+  text-align: left;
+}
+
+#history h2 {
+  font-size: 1.05em;
+  margin: 8px 0;
+  color: var(--text);
+}
+
+#history-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 160px;
+  overflow-y: auto;
+  border-top: 1px dashed #ddd;
+  padding-top: 8px;
+}
+
+#history-list li {
+  padding: 6px 0;
+  border-bottom: 1px dashed #eee;
+  color: var(--text);
 }
 
 .hidden {
   display: none;
 }
 
+.sr-only {
+  position: absolute !important;
+  height: 1px; width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
+@media (max-width: 480px) {
+  #game-box {
+    padding: 24px 14px;
+  }
+  .input-row {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+
 @media (min-width: 728px) {
-  body,
-  #game-box,
-  input[type="number"],
-  button,
-  #info,
-  #attempts {
-    width: 95%;
-    font-size: 130%;
+  #game-box { width: 450px; }
+  body { font-size: 110%; }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f1222;
+    --text: #eaeaf0;
+    --muted: #a0a3b0;
+    --card-bg: #171a2e;
+    --shadow: 0 0 0 rgba(0,0,0,0);
+    --accent: #3d5afe;
+    --accent-hover: #0a2459;
+    --accent-contrast: #ffffff;
+    --error: #ef5350;
+  }
+  #game-box {
+    box-shadow: 0 6px 24px rgba(61,90,254,0.12);
+    border: 1px solid rgba(255,255,255,0.06);
+  }
+  input[type="number"], select#difficulty {
+    background: #20233a;
+    color: var(--text);
+    border-color: #2c3252;
+  }
+  #history-list {
+    border-top-color: #2c3252;
+  }
+  #history-list li {
+    border-bottom-color: #2c3252;
   }
 }