/* ---- Map stage: fills all remaining space, map always fully visible ---- */
#map-stage{
  position:relative;
  flex:1;
  min-height:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:
    radial-gradient(900px 500px at 30% 20%, #eaf7ff, transparent 70%),
    linear-gradient(160deg,#dbeeff,#bfe0f5);
}

#map-container{
  position:absolute;
  inset:0;
  touch-action:none;
  cursor:grab;
}
#map-container.panning{cursor:grabbing}
/* meet -> the whole map is scaled to fit the box, never cropped */
#map-container svg{
  width:100%;height:100%;display:block;
  user-select:none;-webkit-user-drag:none;
}

/* ---- Shape states ----------------------------------------------------- */
.svg-drop-target{
  fill:#cdd8e6;
  stroke:#8090a8;
  stroke-width:.4;
  transition:fill .18s ease, stroke .18s ease;
}
.svg-drop-target:hover{fill:#b9c7dc}
/* island territory (lighter) – drawn before .muni-correct so green wins */
.svg-drop-target.island-correct{fill:#8fd3ff;stroke:#2b7fb8;stroke-width:.5}
/* a correctly placed municipality is always green, even inside a placed island */
.svg-drop-target.muni-correct{fill:#3ddc84;stroke:#157f43;stroke-width:.6}
.svg-drop-target.incorrect{animation:flash-bad .5s ease}
@keyframes flash-bad{
  0%,100%{fill:#cdd8e6}
  30%{fill:#ff6b6b;stroke:#b02a37}
}

/* mapping (dev) mode */
.mapping-mode .svg-drop-target{outline:none}
.mapping-highlight{filter:drop-shadow(0 0 4px rgba(124,92,255,.5))}

/* ---- SVG labels ------------------------------------------------------- */
.label-layer{pointer-events:none}
.svg-label{
  fill:#0b2a18;
  stroke:#ffffff;
  paint-order:stroke;
  stroke-linejoin:round;
  font-weight:700;
  font-family:"Segoe UI",system-ui,sans-serif;
}
.svg-label.title{fill:#3a2400;stroke:#fff6df;font-weight:800;letter-spacing:.02em}
.leader-line{stroke:#5b6b86;stroke-width:.35;fill:none}
.leader-arrow-head{fill:#5b6b86}

/* ---- Toolbar (floating, top-right of the map) ------------------------- */
#map-toolbar{
  position:absolute;top:12px;right:12px;
  display:flex;gap:6px;align-items:flex-start;z-index:20;
}
#map-toolbar button,
#map-toolbar summary{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);
  background:var(--panel);backdrop-filter:blur(8px);color:var(--text);
  font-size:16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .1s ease, background .15s ease;list-style:none;
}
#map-toolbar button:hover,#map-toolbar summary:hover{transform:translateY(-1px);background:rgba(46,230,214,.25)}
#map-toolbar button:disabled{opacity:.4;cursor:default;transform:none}
#map-toolbar #edit-mapping.active{background:var(--accent-2);border-color:var(--accent-2)}

.dev-tools{position:relative}
.dev-tools summary::-webkit-details-marker{display:none}
.dev-menu{
  position:absolute;top:44px;right:0;display:flex;flex-direction:column;gap:6px;
  padding:8px;background:var(--panel-solid);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);width:150px;
}
.dev-menu button{width:100%;height:auto;justify-content:flex-start;padding:8px 10px;font-size:13px}

/* ---- Progress bar (bottom of the map) --------------------------------- */
#progress-bar{
  position:absolute;left:12px;right:12px;bottom:12px;height:24px;z-index:20;
  background:rgba(8,12,36,.6);backdrop-filter:blur(6px);
  border:1px solid var(--border);border-radius:30px;overflow:hidden;
  display:flex;align-items:center;
}
#hud-progress-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .35s ease;
}
#hud-progress-text{
  position:relative;width:100%;text-align:center;font-size:12px;font-weight:700;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);
}

@media (max-width:880px){
  #map-stage{background:linear-gradient(160deg,#dbeeff,#bfe0f5)}
}