.sd-page {
  padding: 8mm;
  height: 297mm;
  display: flex;
  flex-direction: column;
  gap: 4mm;
  font-family: Georgia, "Times New Roman", serif;
  color: #1a1a1a;
  background: #fff;
}

.sd-page-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1.5px solid #2c1810;
  padding-bottom: 2mm;
}

.sd-page-head h1 {
  margin: 0;
  font-size: 5mm;
  letter-spacing: 0.02em;
}

.sd-page-head .meta {
  font-size: 2.8mm;
  color: #555;
  font-family: Arial, sans-serif;
}

.sd-section-title {
  margin: 0;
  font-size: 3.4mm;
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: #333;
}

.sd-cut-hint {
  font-size: 2.4mm;
  color: #777;
  font-family: Arial, sans-serif;
  margin: 0;
}

.sd-hex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3mm;
  justify-content: center;
  align-content: flex-start;
  flex: 1;
}

.sd-hex {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: none;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #1a1408;
  box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.25);
}

.sd-hex .label {
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sd-hex .icon {
  opacity: 0.85;
  line-height: 1;
}

.sd-hex.wood { background: linear-gradient(160deg, #6d9b4e, #4e7a35); color: #f4ffe8; }
.sd-hex.brick { background: linear-gradient(160deg, #c46a4a, #9a3f2a); color: #fff4ef; }
.sd-hex.sheep { background: linear-gradient(160deg, #9fca6a, #7aaa48); color: #1a2a0a; }
.sd-hex.wheat { background: linear-gradient(160deg, #e6c35c, #d0a22e); color: #2a2008; }
.sd-hex.ore { background: linear-gradient(160deg, #8a9199, #5e666f); color: #f5f7fa; }
.sd-hex.desert { background: linear-gradient(160deg, #e8d5a3, #d2b978); color: #4a3a18; }
.sd-hex.sea { background: linear-gradient(160deg, #6eb4d4, #3d87ad); color: #f0fbff; }
.sd-hex.port { background: linear-gradient(160deg, #d9e7ef, #b8cddc); color: #1a2a33; }

.sd-size-small .sd-hex {
  width: 28mm;
  height: 32.2mm;
  font-size: 2.4mm;
}
.sd-size-small .sd-hex .icon { font-size: 5mm; margin-bottom: 0.5mm; }

.sd-size-standart .sd-hex,
.sd-size-standard .sd-hex {
  width: 36mm;
  height: 41.5mm;
  font-size: 3mm;
}
.sd-size-standart .sd-hex .icon,
.sd-size-standard .sd-hex .icon { font-size: 7mm; margin-bottom: 1mm; }

.sd-size-big .sd-hex {
  width: 48mm;
  height: 55.4mm;
  font-size: 3.8mm;
}
.sd-size-big .sd-hex .icon { font-size: 10mm; margin-bottom: 1.2mm; }

.sd-elements {
  display: flex;
  flex-direction: column;
  gap: 4mm;
  flex: 1;
}

.sd-element-block {
  border: 1px dashed #999;
  border-radius: 2mm;
  padding: 3mm;
}

.sd-element-block h3 {
  margin: 0 0 2mm;
  font-size: 3mm;
  font-family: Arial, sans-serif;
}

.sd-piece-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5mm;
  align-items: center;
}

.sd-road {
  background: #5d4037;
  border: 0.5px solid #3e2723;
}

.sd-size-small .sd-road { width: 10mm; height: 2.2mm; }
.sd-size-standart .sd-road,
.sd-size-standard .sd-road { width: 14mm; height: 3mm; }
.sd-size-big .sd-road { width: 18mm; height: 4mm; }

.sd-settlement {
  width: 0;
  height: 0;
  border-left: solid transparent;
  border-right: solid transparent;
  border-bottom: solid #c62828;
  position: relative;
  filter: drop-shadow(0 0 0.3px #000);
}

.sd-size-small .sd-settlement { border-left-width: 3mm; border-right-width: 3mm; border-bottom-width: 5mm; }
.sd-size-standart .sd-settlement,
.sd-size-standard .sd-settlement { border-left-width: 4mm; border-right-width: 4mm; border-bottom-width: 7mm; }
.sd-size-big .sd-settlement { border-left-width: 5.5mm; border-right-width: 5.5mm; border-bottom-width: 9mm; }

.sd-city {
  background: #1565c0;
  border: 0.5px solid #0d47a1;
  position: relative;
}

.sd-city::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -45%;
  height: 55%;
  background: inherit;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.sd-size-small .sd-city { width: 5mm; height: 4mm; }
.sd-size-standart .sd-city,
.sd-size-standard .sd-city { width: 7mm; height: 5.5mm; }
.sd-size-big .sd-city { width: 9mm; height: 7mm; }

.sd-number {
  border-radius: 50%;
  background: #f5f0e1;
  border: 0.7px solid #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1;
}

.sd-number .n { }
.sd-number .dots {
  font-size: 0.55em;
  letter-spacing: 0.05em;
  margin-top: 0.15em;
  color: #444;
}

.sd-number.hot { color: #c62828; }

.sd-size-small .sd-number { width: 9mm; height: 9mm; font-size: 3.2mm; }
.sd-size-standart .sd-number,
.sd-size-standard .sd-number { width: 12mm; height: 12mm; font-size: 4.4mm; }
.sd-size-big .sd-number { width: 16mm; height: 16mm; font-size: 5.8mm; }

.sd-resource {
  border: 0.7px solid #333;
  border-radius: 1mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sd-size-small .sd-resource { width: 16mm; height: 22mm; font-size: 2.2mm; }
.sd-size-standart .sd-resource,
.sd-size-standard .sd-resource { width: 22mm; height: 30mm; font-size: 2.8mm; }
.sd-size-big .sd-resource { width: 28mm; height: 38mm; font-size: 3.4mm; }

.sd-resource .icon { font-size: 1.8em; margin-bottom: 0.3em; }
.sd-resource.wood { background: #d7ecc8; }
.sd-resource.brick { background: #f2d0c4; }
.sd-resource.sheep { background: #e4f2c8; }
.sd-resource.wheat { background: #f7ecc0; }
.sd-resource.ore { background: #d9dde2; }

.sd-port-chip {
  border: 0.7px solid #333;
  border-radius: 1.5mm;
  background: #e8f1f6;
  font-family: Arial, sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

.sd-size-small .sd-port-chip { width: 14mm; height: 10mm; font-size: 2mm; }
.sd-size-standart .sd-port-chip,
.sd-size-standard .sd-port-chip { width: 18mm; height: 13mm; font-size: 2.5mm; }
.sd-size-big .sd-port-chip { width: 24mm; height: 16mm; font-size: 3.2mm; }