/* ---- CSS variables (used by canvas export via getComputedStyle) ---- */
:root {
  --bg: #eceae0;
  --text: #2c2c2c;
  --border: #d0cec6;
  --border-light: #e0ded6;
  --map-stroke: #868e98;
  --map-bg: #cdd6e2;
}

/* ---- SVG map interactions (attribute selectors can't be Tailwind) ---- */
.map-container svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  background: var(--map-bg);
}

.map-container svg:active {
  cursor: grabbing;
}

.map-container svg g[data-code] {
  cursor: pointer;
  transition: filter 0.12s ease;
}

.map-container svg g[data-code]:hover {
  filter: brightness(0.90);
}

.map-container svg g[data-code] polygon,
.map-container svg g[data-code] path {
  stroke: var(--map-stroke);
  stroke-width: 1.2;
  paint-order: stroke fill;
  transition: fill 0.2s ease;
}

/* ---- Modal overlay show/hide (JS toggles .show) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.show {
  display: flex;
}