146 lines
2.8 KiB
CSS
146 lines
2.8 KiB
CSS
/* ==== Reset y base ==== */
|
|
html {
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
background: #eef2f3;
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
color: #364f6b;
|
|
}
|
|
|
|
/* ==== Encabezado ===== */
|
|
h1 {
|
|
margin-top: 2rem;
|
|
color: #364f6b;
|
|
font-size: clamp(1.8rem, 4vw, 2.7rem);
|
|
}
|
|
|
|
/* ==== Info & botón ==== */
|
|
#info {
|
|
font-size: clamp(1rem, 2.2vw, 1.35em);
|
|
min-height: 2em;
|
|
margin-bottom: 1.2em;
|
|
}
|
|
|
|
#reset-btn {
|
|
background: #fc5185;
|
|
color: #fff;
|
|
font-size: clamp(1em, 2vw, 1.2em);
|
|
border: none;
|
|
border-radius: 0.7rem;
|
|
padding: 0.5em 2em;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
#reset-btn:hover { background: #f31349; }
|
|
|
|
/* ==== Tablero ==== */
|
|
#game-board {
|
|
margin: 2.2rem auto 1.2rem auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(60px,1fr));
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
max-width: 98vw;
|
|
}
|
|
|
|
/* ==== Tarjetas ==== */
|
|
.card {
|
|
aspect-ratio: 1 / 1;
|
|
width: 100%; /* para que rellenen su columna */
|
|
background: #3fc1c9;
|
|
color: #364f6b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.8rem;
|
|
box-shadow: 0 2px 8px #bbb;
|
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background 0.2s, color 0.2s, opacity 0.2s;
|
|
}
|
|
.card.flipped {
|
|
background: #fc5185;
|
|
color: #fff;
|
|
cursor: default;
|
|
}
|
|
.card.matched {
|
|
background: #364f6b;
|
|
color: #fff;
|
|
cursor: default;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ==== MÓVILES: ancho máximo y menos columnas ==== */
|
|
@media (max-width: 600px) {
|
|
h1 {
|
|
margin-top: 3vw;
|
|
font-size: clamp(1.3rem, 7vw, 2.2rem);
|
|
}
|
|
#game-board {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 4vw;
|
|
margin-top: 4vw;
|
|
margin-bottom: 6vw;
|
|
padding: 2vw;
|
|
max-width: 98vw;
|
|
}
|
|
.card {
|
|
border-radius: 5vw;
|
|
font-size: clamp(1.2rem, 12vw, 2.7rem);
|
|
}
|
|
#reset-btn {
|
|
font-size: clamp(1rem, 7vw, 1.7em);
|
|
border-radius: 5vw;
|
|
padding: 3vw 12vw;
|
|
margin-bottom: 4vw;
|
|
}
|
|
#info {
|
|
font-size: clamp(1rem, 6vw, 1.4em);
|
|
}
|
|
}
|
|
|
|
/* ==== Phablets/tablets: más columnas ==== */
|
|
@media (min-width: 601px) and (max-width: 900px) {
|
|
#game-board {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2vw;
|
|
}
|
|
.card {
|
|
font-size: clamp(1.3rem, 5vw, 2.2rem);
|
|
}
|
|
}
|
|
|
|
/* ==== Pantallas grandes (>1200px): tablero más ancho ==== */
|
|
@media (min-width: 1200px) {
|
|
#game-board {
|
|
max-width: 500px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
.card {
|
|
font-size: clamp(2rem, 2vw, 3rem);
|
|
}
|
|
}
|
|
|
|
/* ==== Extra pequeñas (<350px): modo apilado ==== */
|
|
@media (max-width: 350px) {
|
|
#game-board {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: 2vw;
|
|
padding: 1vw;
|
|
}
|
|
.card { font-size: clamp(1rem, 20vw, 2rem); }
|
|
}
|
|
|
|
/* ::::::::::::::::::::::::::: */ |