:root {
  color-scheme: light;
  font: 16px/1.5 system-ui, sans-serif;
  color: #182d2a;
  background: #eef4ef;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100% - 2rem, 680px); margin: 2rem auto; }
header p { margin: .35rem 0 1.15rem; }
.eyebrow { color: #28594c; font-size: .75rem; font-weight: 750; letter-spacing: .15em; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.08; }
.card { background: #fff; border: 1px solid #cddbd1; border-radius: 20px; padding: clamp(1rem, 4vw, 1.75rem); }
.stats { display: flex; justify-content: space-between; gap: .75rem; font-weight: 700; }
progress { width: 100%; height: .5rem; accent-color: #206550; }
#map { display: block; width: 100%; margin: 1rem 0; background: #f6f9f5; border-radius: 12px; }
#outline { fill: #d0e7d9; stroke: #183d32; stroke-width: 1.6; stroke-linejoin: round; }
label { display: block; margin-bottom: .35rem; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; }
input, button { font: inherit; min-height: 44px; border-radius: 8px; padding: .5rem .85rem; }
input { flex: 1 1 180px; min-width: 0; border: 1px solid #778a81; }
button { cursor: pointer; border: 1px solid #195743; background: #195743; color: white; font-weight: 700; }
button.secondary { background: white; color: #195743; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #336ac7; outline-offset: 3px; }
#feedback { margin: .8rem 0; font-weight: 700; }
#feedback:empty { margin: .5rem 0; }
.correct { color: #176044; }
.revealed { color: #8a441b; }
footer { margin-top: 1rem; color: #486057; font-size: .85rem; }
.card + .card, #leaderboard { margin-top: 1rem; }
h2 { margin: 0 0 .65rem; font-size: 1.35rem; }
#nick { width: 100%; }
fieldset { border: 0; padding: 0; margin: 1rem 0; }
legend { font-weight: 700; padding: 0; }
#continents { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
#continents label { display: flex; align-items: center; gap: .3rem; font-weight: 400; margin: 0; }
#continents input { min-height: auto; accent-color: #195743; }
#setup-status:empty, #board-status:empty { display: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .45rem .35rem; border-bottom: 1px solid #cddbd1; overflow-wrap: anywhere; }