body {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.1rem;
  margin: 0;
}
main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem;
}

#map {
  display: block;
  width: 100%;
}
#legend-title { margin: 0.75rem 0; }

#guess-form { display: flex; gap: 0.5rem; }
#guess { flex: 1; font: inherit; }
button { font: inherit; }

#guesses { padding-left: 2rem; }
#guesses li { margin: 0.4rem 0; }

/* feedback highlights */
.exact   { background: #2e9e44; color: #fff; }
.related { background: #ffe066; color: #000; }
.wrong   { background: #ddd; color: #000; }
.exact, .related, .wrong { padding: 0 0.15em; }