/* Map editor: canvas and scrollbars, coordinate grid and overlays, placed objects per type, selection highlights, resize handles, and direction arrows. */
.map-editor-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
}

.map-column {
  flex-shrink: 0;
}

.map-object-column {
  width: 440px;
  min-width: 440px;
  max-width: 440px;
  flex-shrink: 0;
}

.map-form-column {
  flex: 1;
  min-width: 300px;
}

.map-host-container {
  position: relative;
  display: inline-block;
}

.map-host {
  position: relative;
  width: 768px;
  height: 768px;
  overflow: auto;
  user-select: none;
  cursor: grab;
  background-color: #1a1a2e;
  border: 2px solid #333;
  border-radius: 4px;
}

.map-host::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.map-host::-webkit-scrollbar-track {
  background: #1a1a2e;
}

.map-host::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.map-host::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.map-host:active {
  cursor: grabbing;
}

.map-content {
  position: relative;
}

.map-content img {
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.coordinate-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, transparent 1px);
}

.map-coordinates-overlay {
  position: absolute;
  bottom: 20px;
  left: 8px;
  z-index: 100;
  pointer-events: none;
}

.map-coordinates-overlay .coord-label {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.9);
  color: #00ff00;
  font-family: "Consolas", monospace;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #00aa00;
}

.map-zoom-display {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  pointer-events: none;
}

.map-zoom-display .zoom-label {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.9);
  color: #ffaa00;
  font-family: "Consolas", monospace;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #aa7700;
}

.map-object-select select {
  width: 100%;
}

.map-object, .spawn-other-single, .spawn-other-area, .spawn-npc-single, .spawn-npc-area, .spawn-monster-single, .spawn-monster-area, .gate-exit, .gate-enter {
  position: absolute;
  box-sizing: border-box;
}

.gate-enter {
  --obj-color: rgb(200, 160, 240);
  background: rgba(200, 160, 240, 0.7);
  border: 2px solid rgb(230, 190, 255);
}

.gate-exit {
  --obj-color: rgb(140, 80, 200);
  background: rgba(140, 80, 200, 0.7);
  border: 2px solid rgb(170, 110, 230);
}

.spawn-monster-area {
  --obj-color: rgb(200, 80, 80);
  background: rgba(200, 80, 80, 0.7);
  border: 2px dashed rgb(230, 110, 110);
}

.spawn-monster-single {
  --obj-color: rgb(200, 80, 80);
  background: rgba(200, 80, 80, 0.7);
  border-radius: 50%;
  border: 2px solid rgb(230, 110, 110);
}

.spawn-npc-area {
  --obj-color: rgb(80, 80, 200);
  background: rgba(80, 80, 200, 0.7);
  border: 2px dashed rgb(110, 110, 230);
}

.spawn-npc-single {
  --obj-color: rgb(80, 80, 200);
  background: rgba(80, 80, 200, 0.7);
  border-radius: 50%;
  border: 2px solid rgb(110, 110, 230);
}

.spawn-other-area {
  --obj-color: rgb(200, 200, 80);
  background: rgba(200, 200, 80, 0.7);
  border: 2px dashed rgb(230, 230, 110);
}

.spawn-other-single {
  --obj-color: rgb(200, 200, 80);
  background: rgba(200, 200, 80, 0.7);
  border-radius: 50%;
  border: 2px solid rgb(230, 230, 110);
}

.focused-object {
  opacity: 1 !important;
  border-color: #fff !important;
  border-style: solid !important;
  border-width: 2px !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  z-index: 20 !important;
}

.resizers .resizer {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--obj-color);
  border: 2px solid rgba(255, 255, 255, 0.85);
  position: absolute;
  z-index: 30;
}

.resizers .resizer.top-left {
  left: -8px;
  top: -8px;
  cursor: nwse-resize;
}

.resizers .resizer.top-right {
  right: -8px;
  top: -8px;
  cursor: nesw-resize;
}

.resizers .resizer.bottom-left {
  left: -8px;
  bottom: -8px;
  cursor: nesw-resize;
}

.resizers .resizer.bottom-right {
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  top: 50%;
  margin-left: -5px;
  margin-top: -5px;
}

.arrow.undefined {
  opacity: 0.3;
}

.arrow.east {
  transform: rotate(-45deg);
}

.arrow.southeast {
  transform: rotate(0deg);
}

.arrow.south {
  transform: rotate(45deg);
}

.arrow.southwest {
  transform: rotate(90deg);
}

.arrow.west {
  transform: rotate(135deg);
}

.arrow.northwest {
  transform: rotate(180deg);
}

.arrow.north {
  transform: rotate(225deg);
}

.arrow.northeast {
  transform: rotate(270deg);
}

.map-zoom-toolbar .zoom-display {
  min-width: 70px;
  font-family: monospace;
}

.object-size-label {
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 10px;
  font-family: monospace;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 3px;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}