body {
  font-family: 'Georgia', serif;
  background: #f1e4c6;
  color: #3b2f2f;
  text-align: center;
}

header {
  background: #6a4e3a;
  color: white;
  padding: 10px;
}

#map {
  margin-top: 30px;
}

.territory {
  margin: 10px;
  padding: 20px;
  background: #bda27a;
  border: 2px solid #6a4e3a;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
}

.territory:hover {
  background: #d1b996;
}

#map .territory {
  fill: #d8b98a;
  stroke: #3b2f2f;
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.2s;
}

#map .territory:hover {
  fill: #a6752e;
}

#territory-info {
  position: absolute;
  background-color: #fff7e6;
  border: 1px solid #333;
  font-size: 14px;
  pointer-events: none;
}