:root {
  --district-slums: #e8d4d1;
  --district-low: #e6dccf;
  --district-artisan: #ead1b0;
  --district-market: #fff2b2;
  --district-high: #d1e7e4;
  --district-temple: #e7ddf6;
  --district-magic: #dcd0f8;
  --district-necropolis: #d8d8d8;
  --district-foreign: #e0d8c5;
  --district-docks: #d4e4ec;
  --district-fort: #f2d3d3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

canvas {
  background-color: #ffffff;
  display: block;
  margin: 2rem auto;
}

h1,
h2,
.map-title {
  font-family: 'IM Fell English SC', serif;
}

.map-title {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.map-title h1 {
  margin: 0;
  font-size: 2em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.map-title p {
  margin: 0;
  font-size: 1.1em;
  color: #555;
}

.legend {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 20px;
  background: white;
  z-index: 1;
}

.swatch-slums {
  background: var(--district-slums);
}

.swatch-low {
  background: var(--district-low);
}

.swatch-artisan {
  background: var(--district-artisan);
}

.swatch-market {
  background: var(--district-market);
}

.swatch-high {
  background: var(--district-high);
}

.swatch-temple {
  background: var(--district-temple);
}

.swatch-magic {
  background: var(--district-magic);
}

.swatch-necropolis {
  background: var(--district-necropolis);
}

.swatch-foreign {
  background: var(--district-foreign);
}

.swatch-docks {
  background: var(--district-docks);
}

.swatch-fort {
  background: var(--district-fort);
}

#customMenu {
  position: absolute;
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  padding: 4px;
  list-style: none;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 1000;
}

#customMenu li:hover {
  background-color: #eee;
}

ul {
  padding-left: 0;
  margin: 0;
}

ul li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #000;
}

.context-menu {
  position: absolute;
  display: none;
  background-color: white;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 5px;
  cursor: pointer;
}

.context-menu-item:hover {
  background-color: #eee;
}

#buttons {
  position: absolute;
  top: 10px;
  z-index: 2;
}

button:hover {
  cursor: pointer;
}

.risks span {
  position: relative;
}

.risks span::after {
  position: absolute;
  top: -15px;
  left: 0;
  opacity: .15;
  font-size: 1.5em;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
}

.risks span.risk-1::after {
  content: "1r";
}

.risks span.risk-2::after {
  content: "2r";
}

.risks span.risk-3::after {
  content: "3r";
}

.poi-text,
#settlement-name,
#settlement-type {
  min-width: 100px;
  padding: 2px 4px;
  border: 1px dashed #ccc;
  border-radius: 3px;
  cursor: text;
}

.poi-text {
  display: inline-block;
}

#settlement-name,
#settlement-type {
  max-width: 780px;
  margin: 0 auto;
}

.poi-text:focus,
#settlement-name:focus,
#settlement-type:focus {
  outline: none;
  border-color: #666;
  background: #f8f8f8;
}

@media print {
  .map-title {
    margin-top: 0;
    margin-bottom: .5rem;
  }

  canvas {
    page-break-inside: avoid;
  }

  #buttons {
    display: none;
  }

  .poi-text {
    border: none;
    padding: inherit;
  }

  #settlement-name,
  #settlement-type {
    border: none;
  }
}