* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0d1117;
  color: #c9d1d9;
  font-family: 'Georgia', serif;
  height: 100vh;
  overflow: hidden;
}

/* ── World view ──────────────────────────────────────────────────────────── */
#world-view {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1117;
}

#map-container {
  position: relative;
  flex-shrink: 0;
}

#world-map {
  display: block;
  user-select: none;
}

/* ── Region labels ───────────────────────────────────────────────────────── */
#label-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* layer itself is transparent; buttons handle events */
}

.region-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: all;
  background: transparent;
  border: none;
  color: transparent;
  padding: 3px 9px;
  border-radius: 3px;
  font-family: Georgia, serif;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}
.region-btn:hover {
  background: transparent;
}
/* Reveal the label when keyboard-focused so tab-through users can see
   which region they're on. region-btn text is otherwise transparent. */
.region-btn:focus-visible {
  color: #c9d8f0;
  outline: 1px dotted rgba(110, 170, 230, 0.78);
  outline-offset: 2px;
}

/* ── Coord display (dev mode, press D) ──────────────────────────────────── */
#coord-display, #detail-coord-display {
  position: fixed;
  bottom: 10px;
  left: 12px;
  font-size: 11px;
  color: rgba(180, 200, 220, 0.6);
  pointer-events: none;
  z-index: 300;
  display: none;
  background: rgba(8,12,18,0.78);
  padding: 4px 10px;
  border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace;
  white-space: pre;
  max-width: calc(100vw - 24px);
}
#detail-coord-display.has-bbox { color: #60a5fa; }

/* Box being drawn while shift-dragging in detail dev mode. */
#draw-box {
  position: absolute;
  border: 2px dashed #60a5fa;
  background: rgba(96, 165, 250, 0.10);
  pointer-events: none;
  display: none;
  z-index: 6;
}
#draw-box.editing {
  border-style: solid;
  background: rgba(96, 165, 250, 0.06);
  pointer-events: all;
  cursor: move;
}
.resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #60a5fa;
  border: 1px solid #0d1117;
  border-radius: 2px;
  pointer-events: all;
  display: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
#draw-box.editing .resize-handle { display: block; }
.resize-handle[data-corner="nw"] { left: -7px; top:    -7px; cursor: nwse-resize; }
.resize-handle[data-corner="ne"] { right:-7px; top:    -7px; cursor: nesw-resize; }
.resize-handle[data-corner="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.resize-handle[data-corner="se"] { right:-7px; bottom: -7px; cursor: nwse-resize; }

#bbox-editor {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(8, 12, 18, 0.92);
  border: 1px solid rgba(96, 165, 250, 0.55);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #e6edf3;
  z-index: 7;
  backdrop-filter: blur(4px);
}
#bbox-editor.visible { display: flex; }
#bbox-editor-target {
  color: #60a5fa;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bbox-editor button {
  background: none;
  border: 1px solid rgba(96, 165, 250, 0.55);
  color: #60a5fa;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: background 0.12s, border-color 0.12s;
}
#bbox-editor button:hover { background: rgba(96, 165, 250, 0.16); }
#bbox-editor button.cancel {
  border-color: rgba(180, 200, 220, 0.45);
  color: #b8c2cc;
}
#bbox-editor button:disabled { opacity: 0.45; cursor: default; }
#bbox-editor .status { color: rgba(180, 200, 220, 0.65); }
#bbox-editor .status.ok    { color: #6ee7b7; }
#bbox-editor .status.error { color: #f4a4a4; }

/* ── All-boxes overlay (dev mode) ────────────────────────────────────────── */
/* Renders every PLACE_BOXES entry for the current region as a labelled
   translucent rectangle so misplaced boxes can be spotted at a glance. */
#all-boxes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 4;
  overflow: hidden;
}
#all-boxes-layer.visible { display: block; }
.all-box {
  position: absolute;
  border: 1px solid rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.06);
  border-radius: 2px;
  pointer-events: all;
  cursor: pointer;
  box-sizing: border-box;
}
.all-box:hover {
  background: rgba(96, 165, 250, 0.22);
  border-color: #60a5fa;
  z-index: 6;
}
.all-box-label {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 2px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  line-height: 1.2;
  color: #e2eeff;
  background: rgba(8, 12, 18, 0.78);
  padding: 1px 4px;
  white-space: nowrap;
  border-radius: 2px;
  pointer-events: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.all-box:hover .all-box-label {
  color: #fff;
  background: rgba(96, 165, 250, 0.92);
}

/* ── Global place search (world view) ────────────────────────────────────── */
#search-wrap {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(420px, calc(100vw - 32px));
  font-family: Georgia, serif;
}
#place-search {
  width: 100%;
  background: rgba(8, 12, 18, 0.92);
  border: 1px solid rgba(110, 170, 230, 0.32);
  color: #e6edf3;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s;
  backdrop-filter: blur(4px);
}
#place-search::placeholder { color: rgba(180, 200, 220, 0.45); }
#place-search:focus { border-color: rgba(110, 170, 230, 0.78); }

#search-results {
  margin-top: 4px;
  background: rgba(8, 12, 18, 0.96);
  border: 1px solid rgba(110, 170, 230, 0.28);
  border-radius: 4px;
  max-height: 60vh;
  overflow-y: auto;
  display: none;
  backdrop-filter: blur(4px);
}
.search-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(110, 170, 230, 0.10);
  color: #c9d1d9;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover,
.search-result.active {
  background: rgba(110, 170, 230, 0.16);
  color: #f0f6ff;
}
.search-result .result-region {
  font-size: 11px;
  color: rgba(180, 200, 220, 0.55);
  flex-shrink: 0;
  white-space: nowrap;
}
#search-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(180, 200, 220, 0.45);
  font-style: italic;
}

/* Hide search whenever the detail modal is up */
body.detail-open #search-wrap { display: none; }

/* ── Detail view (modal) ─────────────────────────────────────────────────── */
#detail-view {
  display: none;
  position: fixed;
  inset: 0;
  background: #0d1117;
  z-index: 100;
}

#detail-dialog {
  width: 100%;
  height: 100%;
  background: #0d1117;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: rgba(8, 12, 18, 0.97);
  border-bottom: 1px solid rgba(110, 170, 230, 0.22);
  flex-shrink: 0;
}

#back-btn {
  background: none;
  border: 1px solid rgba(110, 170, 230, 0.42);
  color: #8bb8e8;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 14px;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
#back-btn:hover {
  background: rgba(110, 170, 230, 0.15);
  border-color: rgba(110, 170, 230, 0.8);
}

#region-title {
  font-size: 19px;
  font-weight: normal;
  color: #e6edf3;
  letter-spacing: 0.4px;
}

#zoom-controls {
  position: absolute;
  bottom: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
  background: rgba(8, 12, 18, 0.75);
  padding: 5px 8px;
  border-radius: 5px;
  backdrop-filter: blur(4px);
}

#zoom-level {
  font-size: 11px;
  color: rgba(180, 200, 220, 0.6);
  min-width: 36px;
  text-align: center;
  font-family: Georgia, serif;
}

.zoom-btn {
  background: none;
  border: 1px solid rgba(110, 170, 230, 0.42);
  color: #8bb8e8;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-btn:hover {
  background: rgba(110, 170, 230, 0.15);
  border-color: rgba(110, 170, 230, 0.8);
}
.zoom-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

#map-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tab-btn {
  background: none;
  border: 1px solid rgba(110, 170, 230, 0.28);
  color: #8bb8e8;
  padding: 4px 11px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-family: Georgia, serif;
  transition: background 0.12s, border-color 0.12s;
}
.tab-btn:hover { background: rgba(110, 170, 230, 0.13); }
.tab-btn.active {
  background: rgba(110, 170, 230, 0.22);
  border-color: rgba(110, 170, 230, 0.72);
  color: #c9d8f0;
}

#map-canvas {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
}
#map-canvas:active { cursor: grabbing; }

#detail-img {
  position: absolute;
  transform-origin: 0 0;
  user-select: none;
  max-width: none;
}

/* ── Highlighted-place overlay (search target) ───────────────────────────── */
/* The pulse fades a dim spotlight in and out, then settles to a plain glowing
   border so the box stays as a "you searched for this" marker without dimming
   the rest of the map. */
#highlight-box {
  position: absolute;
  border: 3px solid #60a5fa;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.7);
  pointer-events: none;
  display: none;
  z-index: 5;
  animation: highlight-pulse 1.4s ease-in-out 2 forwards;
}
/* In dev mode the highlight is grabbable: click it to start editing the
   stored bbox without having to shift-drag a fresh one. */
#highlight-box.dev-grab {
  pointer-events: all;
  cursor: grab;
}
#highlight-box.dev-grab:active { cursor: grabbing; }
@keyframes highlight-pulse {
  0%   { box-shadow: 0 0 0 9999px rgba(8,12,18,0.55), 0 0 6px  rgba(96,165,250,0.6); }
  50%  { box-shadow: 0 0 0 9999px rgba(8,12,18,0.30), 0 0 22px rgba(96,165,250,1.0); }
  100% { box-shadow: 0 0 0 9999px rgba(8,12,18,0.00), 0 0 14px rgba(96,165,250,0.7); }
}

#zoom-hint {
  position: absolute;
  bottom: 60px;
  right: 16px;
  font-size: 11px;
  color: rgba(180, 200, 220, 0.3);
  pointer-events: none;
}