140 lines
2.7 KiB
CSS
140 lines
2.7 KiB
CSS
body {
|
|
background: #eaf4f4;
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
color: #22223b;
|
|
}
|
|
h1 {
|
|
margin-top: 32px;
|
|
color: #23698f;
|
|
}
|
|
#score {
|
|
font-size: 1.18em;
|
|
margin-bottom: 10px;
|
|
color: #23698f;
|
|
}
|
|
#game {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 45px;
|
|
margin: 30px auto 30px auto;
|
|
}
|
|
.flags, .countries {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
.flag, .country {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 6px #bbb;
|
|
padding: 8px 12px;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
transition: background .21s, box-shadow .18s;
|
|
border: 2px solid #f4f9fa;
|
|
outline: none;
|
|
}
|
|
.flag.selected, .country.selected {
|
|
background: #82cfff;
|
|
border-color: #23698f;
|
|
box-shadow: 0 0 0 2px #23698f;
|
|
}
|
|
.flag.matched, .country.matched {
|
|
background: #b4f7ab;
|
|
color: #333;
|
|
border-color: #3fb950;
|
|
cursor: default;
|
|
box-shadow: 0 0 0 2px #3fb950;
|
|
}
|
|
#restart-btn {
|
|
background: #23698f;
|
|
color: #fff;
|
|
font-size: 1em;
|
|
border: none;
|
|
border-radius: 7px;
|
|
padding: 8px 30px;
|
|
cursor: pointer;
|
|
margin-bottom: 12px;
|
|
transition: background .18s;
|
|
}
|
|
#restart-btn:hover {
|
|
background: #031c34;
|
|
}
|
|
#status {
|
|
font-size: 1.12em;
|
|
min-height: 2em;
|
|
color: #23698f;
|
|
margin-bottom: 10px;
|
|
}
|
|
@media (max-width: 850px) {
|
|
#game { flex-direction: column; gap: 32px;}
|
|
.flags, .countries { grid-template-columns: repeat(2,1fr);}
|
|
}
|
|
@media (max-width: 520px) {
|
|
.flags, .countries { grid-template-columns: 1fr;}
|
|
}
|
|
/* Controles y accesibilidad */
|
|
#controls {
|
|
margin: 1rem auto 0.5rem auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
#controls select#pairs-count {
|
|
font-size: 1em;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.flag, .country {
|
|
outline: none;
|
|
}
|
|
.flag:focus-visible, .country:focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(35, 105, 143, 0.35);
|
|
}
|
|
.flag[aria-disabled="true"], .country[aria-disabled="true"] {
|
|
cursor: default;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Modo oscuro básico */
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: #0f1222;
|
|
color: #eaeaf0;
|
|
}
|
|
#score, #status {
|
|
color: #a0a3b0;
|
|
}
|
|
.flag, .country {
|
|
background: #20233a;
|
|
color: #eaeaf0;
|
|
border-color: #2c3252;
|
|
box-shadow: 0 2px 10px rgba(61, 90, 254, 0.12);
|
|
}
|
|
.flag.selected, .country.selected {
|
|
background: #1e3a8a;
|
|
border-color: #3d5afe;
|
|
box-shadow: 0 0 0 2px #3d5afe;
|
|
}
|
|
.flag.matched, .country.matched {
|
|
background: #1b5e20;
|
|
color: #d7ffd9;
|
|
border-color: #66bb6a;
|
|
box-shadow: 0 0 0 2px #66bb6a;
|
|
}
|
|
#restart-btn {
|
|
background: #3d5afe;
|
|
}
|
|
#restart-btn:hover {
|
|
background: #0a2459;
|
|
}
|
|
#controls select#pairs-count {
|
|
background: #20233a;
|
|
color: #eaeaf0;
|
|
border-color: #2c3252;
|
|
}
|
|
} |