Merge branch 'master' of https://git.fermdez.net/fermdez/Juegos

simon-dice/styles.css

@@ -5,7 +5,6 @@ html {
 *, *:before, *:after {
   box-sizing: inherit;
 }
-
 body {
   background: #e1f5fe;
   font-family: Arial, sans-serif;
@@ -13,38 +12,36 @@ body {
   color: #222;
   margin: 0;
   min-height: 100vh;
+  line-height: 1.5;
 }
 
-/* Encabezado */
 h1 {
   margin-top: 2rem;
   color: #01579b;
-  font-size: clamp(1.3rem, 5vw, 2.5rem);
+  font-size: clamp(2rem, 6vw, 3rem); /* más grande en mobile */
 }
 
-/* Panel de botones Simon */
 #game-container {
-  margin: 2.2rem auto 1rem auto;
+  margin: 1.5rem auto 1rem auto;
   width: 100%;
-  max-width: 340px;
+  max-width: 340px; /* se aumenta en móvil */
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 1.2em;
   justify-content: center;
   align-items: center;
-  padding: 0.8em;
+  padding: 1em;
   border-radius: 1.2em;
   background: #ffffffdd;
   box-shadow: 0 2px 14px #bbbe;
-  aspect-ratio: 1 / 1; /* el panel siempre es cuadrado */
+  aspect-ratio: 1 / 1;
 }
 
-/* Botón Simon */
 .color-btn {
   width: 100%;
   height: 100%;
-  border-radius: 1.1em;
+  border-radius: 1.2em;
   box-shadow: 0 2px 8px #bbb;
   cursor: pointer;
   transition: filter 0.2s, border 0.2s;
@@ -53,7 +50,6 @@ h1 {
   min-width: 0;
   min-height: 0;
   aspect-ratio: 1 / 1;
-  /* background colors asignados por id */
 }
 #green   { background: #43a047;}
 #red     { background: #e53935;}
@@ -64,9 +60,8 @@ h1 {
   border: 3px solid #333;
 }
 
-/* Estado y botón inicio */
 #status {
-  font-size: clamp(1em, 2vw, 1.15em);
+  font-size: clamp(1.1em, 2.5vw, 1.3em);
   min-height: 2em;
   margin-bottom: 1em;
   color: #01579b;
@@ -75,62 +70,67 @@ h1 {
 #start-btn {
   background: #01579b;
   color: #fff;
-  font-size: clamp(1em, 2vw, 1.13em);
+  font-size: clamp(1.2em, 2.5vw, 1.5em);
   border: none;
-  border-radius: 0.6em;
-  padding: 0.5em 2em;
+  border-radius: 0.8em;
+  padding: 0.7em 2.5em;
   cursor: pointer;
   transition: background 0.2s;
   box-shadow: 0 2px 8px #01579b33;
-  margin-bottom: 1.4em;
-}
-#start-btn:hover,
-#start-btn:active {
-  background: #263238;
+  margin-bottom: 2em;
 }
 
 /* ==== Pantallas pequeñas/móviles ==== */
-@media (max-width: 600px) {
+@media (max-width: 728px) {
+  html {
+    font-size: 20px;
+  }
   h1 {
     margin-top: 6vw;
-    font-size: clamp(1.1em, 7vw, 2em);
+    font-size: clamp(2em, 9vw, 2.6em); /* mucho más grande */
+    margin-bottom: 4vw;
   }
   #game-container {
-    max-width: 96vw;
-    gap: 6vw;
-    border-radius: 6vw;
-    padding: 2vw;
+    max-width: 92vw;        /* que el panel ocupe casi toda la pantalla */
+    gap: 7vw;               /* separa más los botones */
+    border-radius: 7vw;
+    padding: 3vw;
+    margin-top: 5vw;        /* menos espacio arriba */
+    margin-bottom: 2vw;
   }
   .color-btn {
-    border-radius: 5vw;
-    box-shadow: 0 2px 6px #bbb;
+    border-radius: 7vw;
+    box-shadow: 0 2px 12px #bbb;
+    min-width: 0;
+    min-height: 0;
   }
   #start-btn {
-    font-size: clamp(1em, 8vw, 1.4em);
-    padding: 1em 13vw;
+    font-size: clamp(1em, 7vw, 2em);
+    padding: 1.2em 10vw;     /* botón grande, fácil de clicar */
     border-radius: 5vw;
-    margin-bottom: 6vw;
+    margin-bottom: 4vw;
   }
   #status {
-    font-size: clamp(1em, 7vw, 1.3em);
-    margin-bottom: 5vw;
+    font-size: clamp(1em, 6vw, 1.7em);
+    margin-bottom: 3vw;
   }
 }
 
 /* ==== Pantallas muy pequeñas ==== */
 @media (max-width: 350px) {
+  html { font-size: 17px; }
   #game-container {
-    max-width: 93vw;
-    gap: 3vw;
-    padding: 1vw;
-    border-radius: 10vw;
+    max-width: 96vw;
+    gap: 6vw;
+    padding: 2vw;
+    border-radius: 9vw;
   }
   .color-btn {
     border-radius: 8vw;
   }
   #start-btn {
-    padding: 0.8em 3vw;
+    padding: 1em 4vw;
     border-radius: 8vw;
-    font-size: clamp(0.9em, 13vw, 1.1em);
+    font-size: clamp(1em, 10vw, 1.5em);
   }
 }