.plan-canvas .plan-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.plan-canvas {
  aspect-ratio: 1818 / 1022;
}

.plan-canvas .unit-shape circle {
  display: none;
}

.plan-canvas .unit-shape polygon {
  fill: rgba(143, 29, 32, 0);
  stroke: none;
  transition: fill .18s ease;
}

.plan-canvas .unit-shape:hover polygon,
.plan-canvas .unit-shape:focus-visible polygon {
  fill: rgba(143, 29, 32, .38);
}

.plan-canvas .unit-shape.active polygon {
  fill: rgba(143, 29, 32, .55);
}

.plan-canvas .unit-shape text {
  display: block;
  fill: #8f1d20;
  font: 700 22px Arial, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 3px;
  transform: rotate(-12deg);
  transform-box: fill-box;
  transform-origin: center;
}

.plan-canvas .unit-shape:hover text,
.plan-canvas .unit-shape:focus-visible text,
.plan-canvas .unit-shape.active text {
  fill: #fff;
  stroke: rgba(7, 24, 33, .65);
}

@media (max-width: 560px) {
  .plan-canvas .plan-overlay {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .plan-canvas .unit-shape text {
    display: none;
  }
}