#app {
  background-color: rgb(48, 48, 56);
}

.the-map {
  background-color: #2c354f;
  background-image: url("empty_tile1.png");
}

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

.floor-cell {
  background-color: #2c354f;
  border-color: #5c6782;
}

.wall-cell {
  background-color: #454e6a;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: #5c6782;
  box-shadow: 0 0 0 0.3px #5c6782;
}

.wall-cell-adding, .wall-cell-editing {
  background-color: #454e6a;
  opacity: 0.8;
}

.wall-cell-removing {
  background-color: #454e6a;
  z-index: 1;
  opacity: 0.6;
}

.angled-wall-cell {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAVElEQVRYR2N09cv6z4AFiEtKMLx8/gKbFNXEQHYwjjpgNAQGPARi0puw5gKqJXUCBo3mgtEQGA2B0RAYDYHREBgNgdEQGA2B0RAYDYHREGAc6I4JAD5OoqE5rVGbAAAAAElFTkSuQmCC");
}

.text-cell {
  color: beige;
  text-shadow: -1px -1px 0 #2c354f, 1px -1px 0 #2c354f, -1px 1px 0 #2c354f, 1px 1px 0 #2c354f;
}

.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(200, 200, 200)' /><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(200, 200, 200)' /><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(200, 200, 200)' 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(200, 200, 200)' 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='lightgrey' stroke-width='1'/><line x1='15%' y1='0%' x2='15%' y2='100%' stroke='lightgrey' stroke-width='1'/><line x1='85%' y1='0%' x2='85%' y2='100%' stroke='lightgrey' stroke-width='1'/><line x1='85%' y1='50%' x2='100%' y2='50%' stroke='lightgrey' 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='lightgrey' stroke-width='1'/><line x1='0%' y1='15%' x2='100%' y2='15%' stroke='lightgrey' stroke-width='1'/><line x1='0%' y1='85%' x2='100%' y2='85%' stroke='lightgrey' stroke-width='1'/><line x1='50%' y1='85%' x2='50%' y2='100%' stroke='lightgrey' stroke-width='1'/></svg>") repeat-x;
}

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

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

.window-cell {
  background-color: rgb(255, 255, 255);
}

.image-black {
  fill: lightgrey;
}

.image-green {
  fill: lime;
}

.image-brown {
  fill: burlywood;
}

.image-blue {
  fill: dodgerblue;
}

.image-red {
  fill: orangered;
}

.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(180, 180, 180)' stroke-width='2' /></svg>");
}

.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(180, 180, 180)' stroke-width='2' /></svg>");
}

.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(180, 180, 180); 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;
}

.editor-view .hidden-cell {
  background-image: repeating-linear-gradient(45deg, rgba(255, 0, 255, 0.4), rgba(255, 0, 255, 0.4) 3px, rgba(100, 100, 100, 0.4) 3px, rgba(100, 100, 100, 0.4) 6px);
}

.editor-view .hidden-cell-adding {
  background-image: repeating-linear-gradient(45deg, rgba(255, 0, 255, 0.3), rgba(255, 0, 255, 0.3) 3px, rgba(100, 100, 100, 0.3) 3px, rgba(100, 100, 100, 0.3) 6px);
}

.editor-view .hidden-cell-removing {
  background-image: repeating-linear-gradient(45deg, rgba(255, 0, 255, 0.2), rgba(255, 0, 255, 0.2) 3px, rgba(100, 100, 100, 0.2) 3px, rgba(100, 100, 100, 0.2) 6px);
}

.gm-note {
  color: magenta;
}

.gmoverlay-square {
  background-color: magenta;
}

.gmoverlay-square-adding {
  opacity: 0.3;
}

.gmoverlay-square-removing {
  opacity: 0.2;
}

.pit-cell {
  stroke: #545f7a;
  background-color: transparent;
}

.pit-top, .pit-left {
  fill: rgb(55, 67, 101);
}

.pit-right, .pit-bottom {
  fill: #757fa0;
}

.passage-cell-dashed-over-floor {
  stroke: #707483;
}

.passage-cell-dashed-over-wall {
  stroke: #9e9e9e;
}
