133 lines
2.5 KiB
CSS
133 lines
2.5 KiB
CSS
html {
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
background: #f4f4f4;
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
color: #222;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Encabezado */
|
|
h1 {
|
|
margin-top: 2rem;
|
|
color: #3498db;
|
|
font-size: clamp(1.6rem, 4vw, 2.7rem);
|
|
}
|
|
|
|
/* Tablero responsive */
|
|
#board {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
gap: 0.7rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 2.2rem auto 1.3rem auto;
|
|
width: 100%;
|
|
max-width: 410px;
|
|
aspect-ratio: 1 / 1;
|
|
background: #e9ecef;
|
|
border-radius: 1.2rem;
|
|
padding: 1.2rem;
|
|
box-shadow: 0 2px 14px #bbb4;
|
|
}
|
|
|
|
/* Ficha */
|
|
.tile {
|
|
background: #fff;
|
|
border-radius: 0.6em;
|
|
box-shadow: 0 2px 8px #bbb;
|
|
font-size: clamp(1.1em, 5vw, 2em);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.15s;
|
|
user-select: none;
|
|
min-width: 0; /* Para que flex funcionen perfecto en grid */
|
|
min-height: 0;
|
|
aspect-ratio: 1 / 1;
|
|
/* width y height no son necesarias, grid y aspect-ratio lo ajustan */
|
|
}
|
|
.tile.empty {
|
|
background: #bdd4ea;
|
|
cursor: default;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Estado y botón */
|
|
#status {
|
|
font-size: clamp(1em, 2vw, 1.15em);
|
|
min-height: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#restart-btn {
|
|
background: #3498db;
|
|
color: #fff;
|
|
font-size: clamp(1em, 2vw, 1.15em);
|
|
border: none;
|
|
border-radius: 0.7em;
|
|
padding: 0.5em 2em;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
margin-bottom: 1.4em;
|
|
box-shadow: 0 2px 8px #3498db33;
|
|
}
|
|
#restart-btn:hover {
|
|
background: #217dbb;
|
|
}
|
|
|
|
/* ==== Pantallas pequeñas/móviles ==== */
|
|
@media (max-width: 728px) {
|
|
h1 {
|
|
margin-top: 6vw;
|
|
font-size: clamp(1.1em, 7vw, 2.1em);
|
|
}
|
|
#board {
|
|
max-width: 96vw;
|
|
padding: 2vw;
|
|
gap: 3vw;
|
|
border-radius: 6vw;
|
|
margin-top: 6vw;
|
|
margin-bottom: 6vw;
|
|
}
|
|
.tile {
|
|
font-size: clamp(1em, 10vw, 2.6em);
|
|
border-radius: 5vw;
|
|
}
|
|
#restart-btn {
|
|
font-size: clamp(1em, 8vw, 1.5em);
|
|
padding: 1em 13vw;
|
|
border-radius: 5vw;
|
|
margin-bottom: 5vw;
|
|
}
|
|
#status {
|
|
font-size: clamp(1em, 7vw, 1.3em);
|
|
margin-bottom: 4vw;
|
|
}
|
|
}
|
|
|
|
/* ==== Pantallas muy pequeñas ==== */
|
|
@media (max-width: 350px) {
|
|
#board {
|
|
padding: 1vw;
|
|
gap: 2vw;
|
|
border-radius: 9vw;
|
|
}
|
|
.tile { font-size: clamp(0.9em, 15vw, 1.6em); }
|
|
#restart-btn {
|
|
padding: 0.7em 3vw;
|
|
border-radius: 8vw;
|
|
font-size: clamp(0.9em, 13vw, 1.1em);
|
|
}
|
|
} |