.content {
  --line-color: var(--color-dark-6);
  /* --line-color-active: var(--color-light-1); */
  --line-color-active: black;
  --line-color-blocked: linear-gradient(
    90deg,
    var(--line-color-active),
    var(--line-color-active) 48%,
    #800000 48%,
    #800000 52%,
    var(--line-color-active) 52%,
    var(--line-color-active)
  );
  --line-color-hidden: repeating-linear-gradient(
    90deg,
    var(--line-color-active),
    var(--line-color-active) 20px,
    transparent 20px,
    transparent 40px
  );
  --line-color-hover: var(--color-dark-4);
  --line-thickness: 6px;
  --shape-inactive-color: var(--color-dark-6);
  --shape-active-color: white;
  --circ-color: var(--color-dark-5);
  --diamond-color: white;

  --color-barren: #e5c999;
  --color-dry: #fceb97;
  --color-grey: #cececc;
  --color-sparse: #d1db8e;
  --color-sharp: #ce9c9c;
  --color-teeming: #b3f28c;
  --color-still: #8cf2e9;
  --color-soft: #8cd2f2;
  --color-overgrown: #14960d;
  --color-vivid: #0fdd04;
  --color-sodden: #0d964d;
  --color-lush: #1bba55;

  --hex-size: 400px;

  --global-offset-x: 1050px;
  --global-offset-y: 400px;

  overflow: hidden;
  background-color: var(--color-aqua-5);
}

#global-parent {
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}

#global-parent.min {
  --shape-inactive-color: transparent;
  --line-color: transparent;
}

.content .hex-outer {
  position: absolute;
  pointer-events: none;
}

.content .map-frame {
  position: relative;
  width: var(--hex-size);
  height: var(--hex-size);
  min-width: var(--hex-size);
  min-height: var(--hex-size);
}

.content .map-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.content .map-frame .line {
  background-color: var(--line-color);
  height: var(--line-thickness);
  cursor: pointer;
  border-radius: var(--line-thickness);
  pointer-events: all;
}
.content .map-frame .line:hover {
  background-color: var(--line-color-hover);
  border: 2px solid var(--line-color-hover);
  border-left: none;
  border-right: none;

  z-index: 3;
  margin-top: -2px;
}
.content .map-frame .line.active {
  z-index: 5;
}
.content .map-frame .line.blocked {
  z-index: 7;
}
.content .map-frame .line.transparent {
  z-index: 9;
}

.content .map-frame .shape {
  z-index: 100;
  cursor: pointer;
  pointer-events: all;
}
.content .map-frame .shape:hover {
  border: 4px solid var(--color-dark-4);
  margin-left: -4px;
  margin-top: -4px;
}
.content .map-frame .circ {
  background-color: var(--circ-color);
}
.content .map-frame .shape.active {
  z-index: 105;
  background-color: var(--shape-active-color);
  filter: drop-shadow(0px 0px 1px black);
  /* border: 4px solid var(--color-dark-3);
  margin-left: -4px;
  margin-top: -4px; */
}
.content .map-frame .shape.entrance {
  z-index: 50;
  pointer-events: none;
  border: 3px solid var(--color-mint-4);
  margin-left: -3px;
  margin-top: -3px;
  background-color: var(--color-dark-1-50);
}
.content .map-frame .shape.secret.entrance {
  border-style: dashed;
}

.content .map-frame .line.blocked::before {
  content: "";
  background-color: var(--line-color-active);
  height: var(--line-thickness);
  width: calc(var(--hex-size) * 0.1);
  position: relative;
  display: block;
  transform: rotate(90deg);
  left: calc(40%);
}

.hexagon {
  position: absolute;
  background: var(--color-dark-3);
  -webkit-clip-path: polygon(
    0% 50%,
    93.5% 25%,
    93.5% 75%,
    100% 50%,
    6.5% 75%,
    6.5% 25%
  );
  clip-path: polygon(
    50% 0%,
    93.5% 25%,
    93.5% 75%,
    50% 100%,
    6.5% 75%,
    6.5% 25%
  );
  display: none;
}

.save-hex {
  position: fixed;
  bottom: 5vh;
  cursor: pointer;
  text-align: center;
  left: calc(100% - max-content);
  cursor: pointer;
  max-width: max-content;
}
.minify {
  cursor: pointer;
  position: fixed;
  text-align: center;
  left: calc(100% - max-content);
  bottom: 3vh;
  cursor: pointer;
  max-width: max-content;
}

.instructions {
  position: absolute;
  left: 20px;
  top: 20px;
  text-align: left;
  z-index: 150;
  font-size: var(--font-size-18);
  color: black;
}

.hex-outer button.add-hex {
  position: absolute;
  border-radius: 50%;
  pointer-events: all;
  opacity: 10%;

  background-color: var(--color-dark-1);
  color: white;
}
button.add-hex:hover {
  opacity: 100%;
}
#global-parent.min .add-hex {
  display: none;
}

.hex-outer button.remove-hex {
  position: absolute;
  border-radius: 50%;
  pointer-events: all;
  top: 35%;
  left: 40%;

  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 25%;
  background-color: var(--color-warm-3);
  color: white;
}
button.remove-hex:hover {
  opacity: 100%;
}
#global-parent.min .remove-hex {
  display: none;
}

.content .node-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: black;
}
.content .diamond .node-label {
  transform: rotate(-45deg);
}
.content .triangle .node-label {
  top: 15%;
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

body [aria-busy="true"] {
  pointer-events: none;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: var(--color-dark-5) !important;
  color: transparent !important;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0.25rem;
}

[aria-busy="true"] * {
  opacity: 0% !important;
  pointer-events: none;
}