/* If a style would be needed for exporting the map to an image, put it here. */

.the-map {
  transform-origin: top left;
  display: inline-block;
  cursor: crosshair;
  overflow: hidden;
  position: relative;
  z-index: 0;
  background-color: rgb(245, 245, 220);
  background-image: url("themes/beige_land/empty_tile1.png");
  background-size: 32px 32px;
  background-position: 8px 8px;
  image-rendering: pixelated;
}

.tile {
  position: absolute;
  margin: 1px;
}

.tile-map * {
  box-sizing: border-box;
  user-select: none;
}

.tile-map {
  position: relative;
  left: 0px;
  top: 0px;
}

.tile-image {
  position: absolute;
  left: -1px;
  top: -1px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.tile-image-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-clip: padding-box;
  left: 0;
  top: 0;
}

.layer-container {
  position: absolute;
  clip-path: inset(-0.1px);
  -webkit-clip-path: inset(-0.1px);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.widget-layer {
  z-index: 10;
  clip-path: unset;
  -webkit-clip-path: unset;
}

.grid-layer {
  position: absolute;
  display: inline-block;
  z-index: 10;
  pointer-events: auto;
  clip-path: unset;
  -webkit-clip-path: unset;
}

.mask-layer-container {
  z-index: 9;
  clip-path: inset(-1px);
  -webkit-clip-path: inset(-1px);
}

.editor-view .mask-layer-container {
  clip-path: inset(0px);
  -webkit-clip-path: inset(0px);
}

.gmoverlay-layer-container {
  z-index: 8;
  display: none;
}

.editor-view .gmoverlay-layer-container {
  display: inherit;
}

.text-layer-container {
  z-index: 7;
}

.separators-layer-container {
  z-index: 6;
}

.images-layer-container {
  z-index: 5;
}

.shapes-layer-container {
  z-index: 4;
}

.elevation-layer-container {
  z-index: 3;
  clip-path: inset(-1px);
  -webkit-clip-path: inset(-1px);
}

.walls-layer-container {
  z-index: 2;
}

.walls-layer {
  filter: drop-shadow(2px 2px 3px #919191);
}

.floors-layer-container {
  z-index: 1;
}

.grid-cell {
  position: absolute;
  display: inline-block;
  border-right: 1px solid rgba(0, 0, 0, 0);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  outline-style: solid;
  outline-width: 2px;
  outline-color: transparent;
  transition: outline-color 2s;
}

.wall-cell {
  position: absolute;
}

.floor-cell {
  position: absolute;
  border-right: 1px solid;
  border-bottom: 1px solid;
  background-color: rgb(245, 245, 220);
  border-color: bisque;
}

.separator-cell {
  position: absolute;
}

.image-cell {
  position: absolute;
}

.shape-cell {
  position: absolute;
  stroke-width: 2;
}

.shape-cell-corner {
  stroke-width: 0;
}

.pit-cell {
  stroke-width: 1;
  stroke-linejoin: round;
  stroke: #d0ba9f;
  border-bottom: none;
  border-right: none;
  background-color: unset;
}

.pit-cell-horizontal {
  margin: -1px 0;
}

.pit-cell-vertical {
  margin: 0 -1px;
}

.pit-cell-primary, .pit-cell-primary {
  z-index: 0;
}

.pit-cell-horizontal, .pit-cell-vertical {
  z-index: 1;
}

.pit-top, .pit-left {
  fill: rgb(198, 198, 174);
}

.pit-right, .pit-bottom {
  fill: rgb(232, 232, 209);
}

.pit-cell-adding {
  opacity: 0.6;
}

.pit-cell-removing {
  opacity: 0.4;
}

.passage-cell {
  position: absolute;
  fill: none;
  stroke-dasharray: 3;
  stroke-width: 2;
}

.passage-cell-adding {
  opacity: 0.8;
}

.passage-cell-removing {
  opacity: 0.5;
}

.passage-cell-dashed-over-floor {
  stroke: rgb(222, 184, 135);
}

.passage-cell-dashed-over-wall {
  stroke: rgb(245, 245, 220);
}

.passage-cell-hidden {
  display: none;
  stroke: mediumvioletred
}

.editor-view .passage-cell-hidden {
  display: inherit;
}

.stairs-cell {
  position: absolute;
  margin: 0 1px 1px 0;
}

.text-cell {
  position: absolute;
  margin: 2px 3px 3px 2px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.inner-text-cell {
  text-align: center;
  white-space: pre-wrap;
  user-select: none;
}

.primary-cell {
  width: 25px;
  height: 25px;
}

.corner-cell {
  width: 7px;
  height: 7px;
}

.vertical-cell {
  width: 7px;
  height: 25px;
}

.horizontal-cell {
  width: 25px;
  height: 7px;
}

.shape-cell-primary, .shape-cell-horizontal, .shape-cell-vertical {
  margin: -1px -0px -0px -1px;
}

.shape-cell-primary, .shape-cell-primary {
  z-index: 0;
}

.shape-cell-horizontal, .shape-cell-vertical {
  z-index: 1;
}

.shape-cell-corner {
  margin: -8px -7px -7px -8px;
  z-index: 2;
}

.shape-cell-adding {
  filter: brightness(1.3);
}

.shape-cell-removing {
  filter: brightness(1.6);
}

.shape-green {
  fill: #009300;
  stroke: darkgreen;
}

.shape-brown {
  fill: #c36b42;
  stroke: #71391f;
}

.shape-blue {
  fill: #93b3d3;
  stroke: blue;
}

.shape-red {
  fill: #ff4b4b;
  stroke: darkred;
}

.shape-orange {
  fill: #f7cd1b;
  stroke: darkorange;
}

.shape-black {
  fill: #717171;
  stroke: black;
}

.shape-white {
  fill: white;
  stroke: #717171;
}

.angled-wall-cell {
  margin: -7px;
  image-rendering: pixelated;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAATUlEQVRYR2NkwAH+Pznyn1HGhhGXPDXEwXaMOmA0BAY8BEApkRopmlwzRnPBaAiMhsBoCIyGwGgIjIbAaAiMhsBoCIyGwGgIMA50xwQAWIXs4R2T9uwAAAAASUVORK5CYII=");
}

/* hsl(34, 56.9, 70.0) */
.wall-cell {
  background-color: rgb(222, 184, 135);
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: bisque;
}

.door-cell {
  background-color: rgb(255, 250, 240);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(100, 100, 100);
  border-radius: 2px;
}

.door-cell-horizontal {
  margin: -2px 4px -1px 3px;
}

.door-cell-vertical {
  margin: 3px -1px 4px -2px;
}

.marked-door-cell {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle cx='50%' cy='50%' r='2' stroke-width='1' stroke='rgb(100, 100, 100)' fill='rgb(100, 100, 100)' /></svg>") rgb(255, 250, 240);
}

.double-door-cell-horizontal {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='50%' y1='0' x2='50%' y2='100%' stroke-width='1' stroke='rgb(100, 100, 100)' /></svg>") rgb(255, 250, 240);
}

.double-door-cell-vertical {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='1' stroke='rgb(100, 100, 100)' /></svg>") rgb(255, 250, 240);
}

.secret-door-cell {
  border-style: dashed;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><text x='50%' y='50%' dominant-baseline='central' text-anchor='middle' font-size='10'>S</text></svg>") rgb(255, 250, 240) no-repeat;
}

.window-cell {
  background-color: rgb(255, 250, 240);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(100, 100, 100);
}

.window-cell-vertical {
  margin: 3px 2px 4px 1px;
}

.window-cell-horizontal {
  margin: 1px 4px 2px 3px;
}

.bars-cell-horizontal {
  margin-right: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='3' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='white' /></svg>") repeat-x;
}

.bars-cell-vertical {
  margin-bottom: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='3' cy='4' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='white' /></svg>") repeat-y;
}

.fence-cell-horizontal {
  margin-right: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><line x1='0' y1='3' x2='100%' y2='3' stroke-width='1' stroke='rgb(100, 100, 100)' /><circle cx='4' cy='3' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='white' /></svg>") repeat-x;
}

.fence-cell-vertical {
  margin-bottom: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><line x1='3' y1='0' x2='3' y2='100%' stroke-width='1' stroke='rgb(100, 100, 100)' /><circle cx='3' cy='4' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='white' /></svg>") repeat-y;
}

.curtain-cell-vertical {
  margin-bottom: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='16'><path d='M 1 0 C 1 3 5 3 5 8 S 1 11 1 16' stroke='rgb(100, 100, 100)' stroke-width='1' fill='transparent'/></svg>") repeat-y;
}

.curtain-cell-horizontal {
  margin-right: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='7'><path d='M 0 1 C 3 1 3 5 8 5 S 11 1 16 1' stroke='rgb(100, 100, 100)' stroke-width='1' fill='transparent'/></svg>") repeat-x;
}

.archway-cell-horizontal {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0%' y1='50%' x2='15%' y2='50%' stroke='rgb(100, 100, 100)' stroke-width='1'/><line x1='15%' y1='0%' x2='15%' y2='100%' stroke='rgb(100, 100, 100)' stroke-width='1'/><line x1='85%' y1='0%' x2='85%' y2='100%' stroke='rgb(100, 100, 100)' stroke-width='1'/><line x1='85%' y1='50%' x2='100%' y2='50%' stroke='rgb(100, 100, 100)' stroke-width='1'/></svg>") repeat-x;
}

.archway-cell-vertical {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='50%' y1='0%' x2='50%' y2='15%' stroke='rgb(100, 100, 100)' stroke-width='1'/><line x1='0%' y1='15%' x2='100%' y2='15%' stroke='rgb(100, 100, 100)' stroke-width='1'/><line x1='0%' y1='85%' x2='100%' y2='85%' stroke='rgb(100, 100, 100)' stroke-width='1'/><line x1='50%' y1='85%' x2='50%' y2='100%' stroke='rgb(100, 100, 100)' stroke-width='1'/></svg>") repeat-x;
}

.text-cell {
  color: rgb(50, 50, 50);
  text-shadow: -1px -1px 0 rgb(245, 245, 220), 1px -1px 0 rgb(245, 245, 220), -1px 1px 0 rgb(245, 245, 220), 1px 1px 0 rgb(245, 245, 220);
}

.gm-note {
  color: mediumvioletred;
  display: none;
}

.editor-view .gm-note {
  display: flex;
}

.image-cell {
  color: rgb(50, 50, 50);
}

.image-black {
  fill: black;
}

.image-green {
  fill: darkgreen;
}

.image-brown {
  fill: sienna;
}

.image-blue {
  fill: blue;
}

.image-red {
  fill: crimson;
}

.text-cell-textarea, .image-cell-textarea, .text-cell {
  font-family: sans-serif;
  font-weight: bold;
}

.stairs-cell-horizontal {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='100%'><line x1='3.4' y1='0' x2='3.4' y2='100%' stroke='rgb(80, 80, 80)' stroke-width='2' /></svg>");
}

.stairs-cell-ascending-left {
  clip-path: polygon(0 0, 100% 9px, 100% calc(100% - 9px), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 9px, 100% calc(100% - 9px), 0 100%);
}

.stairs-cell-ascending-right {
  clip-path: polygon(0 9px, 100% 0, 100% 100%, 0 calc(100% - 9px));
  -webkit-clip-path: polygon(0 9px, 100% 0, 100% 100%, 0 calc(100% - 9px));
}

.stairs-cell-vertical {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='6'><line x1='0' y1='3.4' x2='100%' y2='3.4' stroke='rgb(80, 80, 80)' stroke-width='2' /></svg>");
}

.stairs-cell-ascending-top {
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 9px 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 9px 100%);
}

.stairs-cell-ascending-bottom {
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 100%, 0 100%);
}

.stairs-cell-spiral {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><style>path, line {stroke: rgb(80, 80, 80); stroke-width: 1.5; fill: transparent; vector-effect: non-scaling-stroke;}</style> <path d='M 50 5 A 45 45 0 1 0 95 50'/> <line x1='50' y1='50' x2='50' y2='5'/> <line x1='50' y1='50' x2='50' y2='5' transform='rotate(90 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(135 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(180 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(225 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(270 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(315 50 50)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hidden-cell {
  position: absolute;
  background-color: rgb(50, 50, 50);
  box-shadow: 0 0 0 1px rgb(50, 50, 50);
}

.editor-view .hidden-cell {
  box-shadow: unset;
  background-image: repeating-linear-gradient(45deg, rgba(102, 51, 153, 0.4), rgba(102, 51, 153, 0.4) 3px, rgba(100, 100, 100, 0.4) 3px, rgba(100, 100, 100, 0.4) 6px);
  background-color: transparent;
}

.hidden-secret-door-cell {
  display: none;
  border: 1px dashed mediumvioletred;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><text x='50%' y='50%' dominant-baseline='central' text-anchor='middle' font-size='10' fill='mediumvioletred'>S</text></svg>") rgb(255, 250, 240) no-repeat;
}

.editor-view .hidden-secret-door-cell {
  display: inherit;
}

.gmoverlay-square {
  position: absolute;
  background-color: mediumvioletred;
  opacity: 0.4;
}

.rotated-90 {
  transform: rotate(90deg);
}

.rotated-180 {
  transform: rotate(180deg);
}

.rotated-270 {
  transform: rotate(270deg);
}

.mirrored {
  transform: scaleX(-1);
}

.wall-cover {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}