/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; touch-action: none; }
body { background: #1a1410; color: #3b2c1a; font-family: Georgia, "Times New Roman", serif; }

/* ── Map canvas ── */
canvas#map { display: block; width: 100vw; height: 100vh; cursor: grab; }
canvas#map.dragging { cursor: grabbing; }

/* ── Panel base ── */
.panel {
  position: fixed;
  background: rgba(235, 220, 190, 0.96);
  border: 2px solid #8b7355;
  border-radius: 8px;
  padding: 10px 12px;
  z-index: 100;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  max-width: calc(100vw - 16px);
}
.panel h3, .panel h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.panel h3 { font-size: 14px; margin-bottom: 6px; }
.panel h4 { font-size: 12px; margin: 8px 0 4px; }
.panel .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 5px 0; }
.panel .row > * { flex: 1; }
.panel label { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 3px 0; }
.panel input[type=text],
.panel input[type=number],
.panel select,
.panel textarea {
  width: 100%;
  background: #f5e8d0;
  border: 1px solid #8b7355;
  border-radius: 4px;
  padding: 7px 8px;
  font: inherit;
  font-size: 13px;
  color: #3b2c1a;
}
.panel textarea { min-height: 76px; resize: vertical; }

/* ── Buttons ── */
.panel button {
  background: linear-gradient(rgba(196, 164, 108, 0.5), rgba(168, 133, 74, 0.5));
  border: 1px solid rgba(122, 92, 46, 0.7);
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 11px;
  transition: background 0.15s;
}
.panel button:hover { background: linear-gradient(rgba(210, 180, 120, 0.6), rgba(180, 145, 85, 0.6)); }
.panel button.secondary { background: linear-gradient(#9f957f, #7d735f); border-color: #5f5646; }
.panel button.secondary:hover { background: linear-gradient(#b0a690, #8d8370); }
.panel button.danger { background: linear-gradient(#b26a56, #8f4b38); border-color: #6f3327; }
.panel button.danger:hover { background: linear-gradient(#c27a66, #9f5b48); }
.panel button.toggle { padding: 3px 8px; font-size: 10px; flex: 0 0 auto; }
.panel.collapsed .panel-body { display: none; }

/* ── Utility classes ── */
.small { font-size: 11px; color: #5a4a35; }
.leg-item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.leg-swatch { width: 16px; height: 12px; border: 1px solid #5a4a35; border-radius: 2px; }
.quest-card, .log-line {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(90, 74, 53, 0.22);
  border-radius: 4px;
  padding: 6px;
  margin: 6px 0;
}
.quest-card:hover { background: rgba(0, 0, 0, 0.08); }
.mode-ind {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  background: #8b7355;
  color: #fff;
  font-size: 10px;
  margin-left: 6px;
}

/* ── Panel positions ── */
#controls {
  top: 10px; left: 10px; width: 280px;
  max-height: calc(100vh - 20px); overflow: auto;
}
#editor-panel {
  top: 10px; left: 300px; width: 320px;
  max-height: calc(100vh - 20px); overflow: auto;
}
#info-panel {
  top: 10px; right: 10px; width: 300px;
  max-height: calc(100vh - 80px); overflow: auto;
  display: none;
}
#legend { bottom: 10px; left: 10px; width: 190px; }
#instructions { bottom: 10px; right: 10px; width: 270px; font-size: 11px; line-height: 1.4; }
#quest-panel {
  bottom: 10px; right: 290px; width: 320px;
  max-height: 280px; overflow: auto; display: none;
}
#debug-panel {
  bottom: 10px; left: 210px; width: 430px;
  max-height: 220px; overflow: auto; display: none;
}

/* ── Selection tools (hidden by default) ── */
#selection-tools { display: none; }

/* ── Zoom indicator ── */
#zoom-ind {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 46px;
  background: rgba(235, 220, 190, 0.92);
  border: 1px solid #8b7355;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  z-index: 95;
}

/* ── Footer ── */
#site-footer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 8px; z-index: 95;
  background: rgba(235, 220, 190, 0.92);
  border: 1px solid #8b7355;
  border-radius: 999px;
  padding: 6px 12px;
  display: flex; gap: 8px; align-items: center;
}
#site-footer button { min-height: auto; padding: 4px 10px; }

/* ── Mobile top bar ── */
#mobile-bar {
  display: none;
  position: fixed; top: 8px; left: 8px; right: 8px;
  z-index: 300; gap: 6px;
}
#mobile-bar button {
  flex: 1; min-height: 34px;
  background: rgba(235, 220, 190, 0.5);
  border: 2px solid rgba(139, 115, 85, 0.7);
  border-radius: 8px;
  color: #3b2c1a;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700; font-size: 11px;
}

/* ── Legal modal ── */
#legal-panel {
  display: none;
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 96vw);
  max-height: 90vh; overflow: auto;
  z-index: 400;
}

/* ── Building panel (modal) ── */
#building-panel {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(800px, 96vw);
  max-height: 92vh; overflow: auto;
  background: rgba(240, 228, 200, 0.98);
  border: 3px solid #6a5030;
  border-radius: 8px;
  z-index: 200;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
#building-panel .bp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  border-bottom: 2px solid #8b7355;
  background: rgba(139, 115, 85, 0.1);
}
#building-panel .bp-header span {
  font-size: 15px; font-weight: bold; color: #2a1a0a;
}
#building-panel .bp-body { display: flex; }
#building-panel .bp-canvas-wrap {
  flex: 1; padding: 10px;
  display: flex; align-items: center; justify-content: center;
}
#building-panel .bp-canvas-wrap canvas {
  width: 100%; max-width: 340px;
  border: 1px solid #8b7355;
  border-radius: 4px;
  background: #f0e8d4;
}
#building-panel .bp-info {
  width: 240px; padding: 10px 12px;
  border-left: 1px solid #8b7355;
  overflow: auto; font-size: 11px;
  max-height: 70vh;
}
#building-panel .bp-editor {
  width: 220px; padding: 10px 12px;
  border-left: 1px solid #8b7355;
  overflow: auto; font-size: 11px;
}
#building-panel .bp-editor h4 {
  font-size: 12px; margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.3);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  #mobile-bar { display: flex; }
  #controls {
    top: 56px; left: 8px;
    width: min(92vw, 360px); max-height: 40vh;
  }
  #editor-panel {
    top: calc(56px + 40vh + 8px); left: 8px;
    width: min(92vw, 360px); max-height: 28vh;
    display: none;
  }
  #info-panel {
    top: 56px; right: 8px;
    width: min(92vw, 360px); max-height: 28vh;
    display: none;
  }
  #quest-panel {
    top: calc(56px + 28vh + 8px); right: 8px;
    bottom: auto;
    width: min(92vw, 360px); max-height: 28vh;
    display: none;
  }
  #legend, #instructions { display: none; }
  #debug-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 24vh; }
  #building-panel .bp-body { flex-direction: column; }
  #building-panel .bp-info,
  #building-panel .bp-editor {
    width: auto;
    border-left: none;
    border-top: 1px solid #8b7355;
  }
}