html { box-sizing: border-box; font-size: 16px; } *, *:before, *:after { box-sizing: inherit; } body { background: #fae3d9; font-family: Arial, sans-serif; text-align: center; color: #22223b; margin: 0; min-height: 100vh; } /* Encabezado */ h1 { margin-top: 2rem; color: #9a8c98; font-size: clamp(1.5rem, 5vw, 2.7rem); } /* Score y timer flexibles */ #score, #timer { font-size: clamp(1em, 2vw, 1.18em); margin-bottom: 0.8em; } /* Tablero de celdas adaptativo y cuadrado */ #grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1em; justify-content: center; margin: 1.6em auto 0.8em auto; width: 100%; max-width: 360px; aspect-ratio: 1/1; background: #f5ebe3; border-radius: 1.2em; padding: 1em; box-shadow: 0 2px 10px #bbb7; } /* Celdas circulares */ .cell { background: #fff; border-radius: 50%; box-shadow: 0 2px 10px #bbb; display: flex; align-items: center; justify-content: center; font-size: clamp(1.5em, 6vw, 2.4em); cursor: pointer; transition: background 0.2s; min-width: 0; min-height: 0; aspect-ratio: 1/1; } .cell.mole { background: #b5838d; } /* Botón start flexible */ #start-btn { background: #9a8c98; color: #fff; font-size: clamp(1em, 2vw, 1.18em); border: none; border-radius: 0.6em; padding: 0.6em 2em; cursor: pointer; box-shadow: 0 2px 8px #b5838d44; transition: background 0.2s; margin-bottom: 1.3em; } #start-btn:hover, #start-btn:active { background: #22223b; color: #fff; } /* Mensaje final */ #end-message { font-size: clamp(1em, 2vw, 1.15em); margin-top: 1.1em; min-height: 2em; color: #b5838d; } /* ==== Pantallas móviles ==== */ @media (max-width: 600px) { h1 { margin-top: 6vw; font-size: clamp(1.1em, 7vw, 2.1em); } #grid { max-width: 97vw; gap: 4vw; padding: 2vw; border-radius: 7vw; margin-top: 6vw; margin-bottom: 6vw; } .cell { font-size: clamp(1.1em, 10vw, 2.8em); border-radius: 50%; } #start-btn { font-size: clamp(1em, 8vw, 1.5em); padding: 1em 13vw; border-radius: 5vw; margin-bottom: 6vw; } #score, #timer { font-size: clamp(1em, 7vw, 1.3em); margin-bottom: 3vw; } #end-message { font-size: clamp(1em, 7vw, 1.3em); margin-top: 5vw; } } /* ==== Pantallas muy pequeñas ==== */ @media (max-width: 350px) { #grid { max-width: 92vw; gap: 2vw; border-radius: 13vw; padding: 1vw; } .cell { font-size: clamp(0.8em, 12vw, 1.2em); } #start-btn { font-size: clamp(0.9em, 10vw, 1.1em); padding: 0.7em 3vw; border-radius: 8vw; } }