diff --git a/simon-dice/styles.css b/simon-dice/styles.css index 5da3a20..85aae1f 100644 --- a/simon-dice/styles.css +++ b/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); } } \ No newline at end of file