/* ──────────────────────────────────────────────────────────────
   BUILDING / SHIP MAP WIDGET  (.map-bldg-widget)
   ────────────────────────────────────────────────────────────── */

.map-bldg-widget {
  --map-w:         100%;
  --map-h:         480px;
  --map-bg:        var(--IB-bg-alt, #ddba88);
  --map-bd:        rgba(75,46,18,.35);
  --map-radius:    var(--IB-radius, 16px);
  --map-btn-bg:    var(--btn-800, #ddbe88);
  --map-btn-color: var(--text, #311b06);
  --map-btn-hover: var(--link-color-hover, #7f5c38);
  --map-active-bg: var(--IB-primary, #865D21);
  --map-trans:     .28s ease;
}

.map-bldg-widget {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  gap:            0;
  width:          var(--map-w);
  font-family:    var(--font, 'Times New Roman', serif);
}

.map-bldg-title {
  background:    var(--IB-bg-alt, #ddba88);
  border:        2px solid var(--map-bd);
  border-bottom: none;
  border-radius: var(--map-radius) var(--map-radius) 0 0;
  padding:       10px 16px 8px;
  display:       flex;
  align-items:   center;
  gap:           10px;
}
.map-bldg-title h2 {
  margin:      0;
  font-family: var(--heading-font, Georgia, serif);
  font-size:   1.2em;
  color:       var(--IB-text, #4B2E12);
  flex:        1;
  text-align:  center;
}

.map-bldg-viewport {
  position:     relative;
  width:        100%;
  height:       var(--map-h);
  overflow:     hidden;
  background:   var(--IB-bg-alt-3, rgb(241,218,192));
  border-left:  2px solid var(--map-bd);
  border-right: 2px solid var(--map-bd);
}

.map-layer {
  position:       absolute;
  inset:          0;
  opacity:        0;
  transition:     opacity var(--map-trans);
  pointer-events: none;
  list-style:     none;
}
.map-layer.active {
  opacity:        1;
  pointer-events: auto;
}
.map-layer img {
  width:       100%;
  height:      100%;
  object-fit:  contain;
  display:     block;
  user-select: none;
  -webkit-user-drag: none;
}

.map-layer-list {
  list-style: none;
  margin:     0;
  padding:    0;
}

.map-bldg-controls {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding:         10px 12px;
  background:      var(--map-bg);
  border:          2px solid var(--map-bd);
  border-top:      none;
  border-radius:   0 0 var(--map-radius) var(--map-radius);
  flex-wrap:       wrap;
}

.map-bldg-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       42px;
  height:          38px;
  padding:         0 14px;
  background:      var(--map-btn-bg);
  color:           var(--map-btn-color);
  border:          2px solid rgba(0,0,0,.55);
  border-radius:   10px;
  box-shadow:      2px 2px 5px 1.5px #000;
  font-size:       1.05em;
  font-weight:     700;
  cursor:          pointer;
  transition:      transform var(--map-trans), box-shadow var(--map-trans), color var(--map-trans);
  font-family:     inherit;
  white-space:     nowrap;
  text-decoration: none;
}
.map-bldg-btn:hover,
.map-bldg-btn:focus-visible {
  color:      var(--map-btn-hover);
  box-shadow: 4px 4px 10px 3px #000;
  transform:  translateY(-1px);
  outline:    none;
}
.map-bldg-btn:active  { transform:translateY(0); box-shadow:2px 2px 5px 1px #000; }
.map-bldg-btn:disabled {
  opacity:    .45;
  cursor:     not-allowed;
  transform:  none;
  box-shadow: 2px 2px 5px 1px #000;
}

.map-bldg-indicator {
  flex:          1;
  text-align:    center;
  font-family:   var(--heading-font, Georgia, serif);
  font-size:     1em;
  font-weight:   700;
  color:         var(--IB-text, #4B2E12);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  padding:       0 8px;
}
.map-bldg-indicator span {
  font-weight: 400;
  font-size:   .88em;
  opacity:     .7;
  margin-left: 6px;
}

.map-bldg-floors {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  align-items:    stretch;
  min-width:      110px;
  max-height:     var(--map-h);
  overflow-y:     auto;
  padding:        8px;
  background:     var(--IB-bg-alt-2, rgba(247,236,224,.8));
  border:         2px solid var(--map-bd);
  border-left:    none;
  border-radius:  0 var(--map-radius) var(--map-radius) 0;
  list-style:     none;
  margin:         0;
}
.map-bldg-floor-btn {
  background:    var(--map-btn-bg);
  color:         var(--map-btn-color);
  border:        2px solid rgba(0,0,0,.4);
  border-radius: 8px;
  padding:       6px 10px;
  font-family:   inherit;
  font-size:     .88em;
  font-weight:   600;
  cursor:        pointer;
  text-align:    center;
  transition:    background var(--map-trans), color var(--map-trans), box-shadow var(--map-trans);
  box-shadow:    1px 1px 3px rgba(0,0,0,.4);
}
.map-bldg-floor-btn:hover,
.map-bldg-floor-btn:focus-visible {
  color:      var(--map-btn-hover);
  box-shadow: 2px 2px 6px rgba(0,0,0,.5);
  outline:    none;
}
.map-bldg-floor-btn.is-active {
  background:   var(--map-active-bg);
  color:        #fff;
  border-color: rgba(0,0,0,.55);
  box-shadow:   inset 0 2px 4px rgba(0,0,0,.25), 1px 1px 3px rgba(0,0,0,.4);
}

.map-bldg-middle { display:flex; align-items:stretch; }
.map-bldg-middle .map-bldg-viewport { flex:1; }

@media (max-width: 600px) {
  .map-bldg-floors    { min-width:80px; font-size:.8em; }
  .map-bldg-controls  { justify-content:center; }
}


/* ──────────────────────────────────────────────────────────────
   WORLD MAP WIDGET  (.map-world-widget)
   ────────────────────────────────────────────────────────────── */

.map-world-widget {
  --map-w:            100%;
  --map-h:            520px;
  --map-bg:           var(--IB-bg-alt, #ddba88);
  --map-bd:           rgba(75,46,18,.35);
  --map-radius:       var(--IB-radius, 16px);
  --map-btn-bg:       var(--btn-800, #ddbe88);
  --map-btn-color:    var(--text, #311b06);
  --map-btn-hover:    var(--link-color-hover, #7f5c38);
  --map-active-bg:    var(--IB-primary, #865D21);
  --map-trans:        .2s ease;
  --map-slider-track: rgba(75,46,18,.3);
  --map-slider-thumb: var(--IB-primary, #865D21);

  /* z-index bands — reorderable layers live between 1-99,
     pinned-bottom sits at 100, pinned-top sits at 200+      */
  --map-z-reorder-min: 1;
  --map-z-reorder-max: 99;
  --map-z-pin-bottom:  100;   /* Routes                      */
  --map-z-pin-mid:     110;   /* Settlement Symbols          */
  --map-z-pin-top:     120;   /* Settlement Names            */
}

.map-world-widget {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  width:          var(--map-w);
  font-family:    var(--font, 'Times New Roman', serif);
}

.map-world-title {
  background:    var(--IB-bg-alt, #ddba88);
  border:        2px solid var(--map-bd);
  border-bottom: none;
  border-radius: var(--map-radius) var(--map-radius) 0 0;
  padding:       10px 16px 8px;
}
.map-world-title h2 {
  margin:      0;
  font-family: var(--heading-font, Georgia, serif);
  font-size:   1.2em;
  color:       var(--IB-text, #4B2E12);
  text-align:  center;
}
.map-world-notice {
  margin:      6px auto 0;
  font-family: var(--font, 'Times New Roman', serif);
  font-size:   .82em;
  color:       var(--IB-text, #4B2E12);
  text-align:  center;
  opacity:     .7;
}
.map-world-credit {
  margin:      4px auto 0;
  font-family: var(--font, 'Times New Roman', serif);
  font-size:   .78em;
  color:       var(--IB-text, #4B2E12);
  text-align:  center;
  opacity:     .6;
  font-style:  italic;
}
.map-world-credit a {
  color:           inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-world-credit a:hover {
  opacity: 1;
  color:   var(--link-color-hover, #7f5c38);
}

.map-world-viewport {
  position:     relative;
  width:        100%;
  height:       var(--map-h);
  overflow:     hidden;
  background:   var(--IB-bg-alt-3, rgb(241,218,192));
  border-left:  2px solid var(--map-bd);
  border-right: 2px solid var(--map-bd);
}

.map-world-base {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.map-world-base img {
  width:       100%;
  height:      100%;
  object-fit:  contain;
  display:     block;
  user-select: none;
  -webkit-user-drag: none;
}

/* All overlay layers share this base — JS sets z-index individually */
.map-overlay-layer {
  position:       absolute;
  top:            0;
  left:           0;
  right:          0;
  bottom:         0;
  margin:         0;
  padding:        0;
  opacity:        0;
  transition:     opacity var(--map-trans);
  pointer-events: none;
  list-style:     none;
  font-size:      0;
  line-height:    0;
}
.map-overlay-layer.active {
  opacity: 1; /* JS overrides this inline for slider layers */
}
.map-overlay-layer img {
  width:          100%;
  height:         100%;
  object-fit:     contain;
  display:        block;
  user-select:    none;
  -webkit-user-drag: none;
}

/* Pinned layers — CSS z-index as a hard fallback in case JS hasn't run */
.map-overlay-layer[data-pin="bottom"] { z-index: var(--map-z-pin-bottom); }
.map-overlay-layer[data-pin="mid"]    { z-index: var(--map-z-pin-mid);    }
.map-overlay-layer[data-pin="top"]    { z-index: var(--map-z-pin-top);    }

.map-overlay-list {
  list-style: none;
  margin:     0;
  padding:    0;
  font-size:  0;
}

/* ── Control panel ─────────────────────────────────────────── */
.map-world-controls {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     var(--map-bg);
  border:         2px solid var(--map-bd);
  border-top:     none;
  border-radius:  0 0 var(--map-radius) var(--map-radius);
  overflow:       hidden;
}

.map-world-controls-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 14px 6px;
  border-bottom:   1px solid var(--map-bd);
}
.map-world-controls-header > span {
  font-family: var(--heading-font, Georgia, serif);
  font-weight: 700;
  font-size:   .95em;
  color:       var(--IB-text, #4B2E12);
}

.map-world-util-btn {
  background:    transparent;
  border:        1px solid rgba(0,0,0,.35);
  border-radius: 6px;
  padding:       3px 10px;
  font-family:   inherit;
  font-size:     .8em;
  font-weight:   600;
  color:         var(--map-btn-color);
  cursor:        pointer;
  transition:    background var(--map-trans);
}
.map-world-util-btn:hover,
.map-world-util-btn:focus-visible { background:rgba(0,0,0,.08); outline:none; }
.map-world-util-btns { display:flex; gap:6px; }

/* Toggle-only button row (pinned layers) */
.map-world-toggle-row {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  padding:         10px 12px 8px;
  justify-content: flex-start;
  border-bottom:   1px solid var(--map-bd);
}
.map-world-toggle-row:empty { display:none; }

.map-world-toggle {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       6px 14px 6px 10px;
  background:    var(--map-btn-bg);
  color:         var(--map-btn-color);
  border:        2px solid rgba(0,0,0,.45);
  border-radius: 10px;
  box-shadow:    1px 1px 4px rgba(0,0,0,.4);
  font-family:   inherit;
  font-size:     .9em;
  font-weight:   600;
  cursor:        pointer;
  transition:    background var(--map-trans), color var(--map-trans),
                 box-shadow var(--map-trans), transform var(--map-trans);
  user-select:   none;
}
.map-world-toggle:hover,
.map-world-toggle:focus-visible {
  color:      var(--map-btn-hover);
  box-shadow: 2px 2px 8px rgba(0,0,0,.5);
  transform:  translateY(-1px);
  outline:    none;
}
.map-world-toggle:active  { transform:translateY(0); box-shadow:1px 1px 4px rgba(0,0,0,.4); }
.map-world-toggle.is-on {
  background:   var(--map-active-bg);
  color:        #fff;
  border-color: rgba(0,0,0,.55);
  box-shadow:   inset 0 2px 4px rgba(0,0,0,.2), 1px 1px 4px rgba(0,0,0,.4);
}
.map-world-toggle.is-on:hover { color:#f0e0c8; }

/* Shared swatch + check */
.map-world-toggle-swatch {
  display:       inline-block;
  width:         13px;
  height:        13px;
  border-radius: 3px;
  border:        1.5px solid rgba(0,0,0,.4);
  flex-shrink:   0;
}
.map-world-toggle-check { font-size:.85em; opacity:.7; flex-shrink:0; }
.map-world-toggle.is-on .map-world-toggle-check,
.map-world-slider-toggle.is-on .map-world-toggle-check { opacity:1; }

/* ── Opacity / reorder section ─────────────────────────────── */
.map-world-opacity-section {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.map-world-opacity-header {
  padding:       6px 14px 4px;
  font-family:   var(--heading-font, Georgia, serif);
  font-weight:   700;
  font-size:     .88em;
  color:         var(--IB-text, #4B2E12);
  opacity:       .75;
  border-bottom: 1px solid var(--map-bd);
}

/* Slider row — columns: [▲▼ btns] [toggle btn] [slider] [% label] */
.map-world-slider-row {
  display:               grid;
  grid-template-columns: 30px auto 1fr auto;
  align-items:           center;
  gap:                   10px;
  padding:               7px 14px;
  border-bottom:         1px solid rgba(75,46,18,.12);
  cursor:                default;
  transition:            background var(--map-trans);
}
.map-world-slider-row:last-child { border-bottom:none; }

/* Up/down reorder button pair */
.map-world-reorder-btns {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.map-world-reorder-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          18px;
  background:      var(--map-btn-bg);
  color:           var(--map-btn-color);
  border:          1.5px solid rgba(0,0,0,.35);
  border-radius:   5px;
  font-size:       .6em;
  line-height:     1;
  cursor:          pointer;
  padding:         0;
  transition:      background var(--map-trans), color var(--map-trans),
                   box-shadow var(--map-trans);
  font-family:     inherit;
}
.map-world-reorder-btn:hover,
.map-world-reorder-btn:focus-visible {
  color:      var(--map-btn-hover);
  box-shadow: 1px 1px 4px rgba(0,0,0,.4);
  outline:    none;
}
.map-world-reorder-btn:disabled {
  opacity: .25;
  cursor:  default;
  box-shadow: none;
}

/* Compact toggle inside slider row */
.map-world-slider-toggle {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       4px 10px 4px 8px;
  background:    var(--map-btn-bg);
  color:         var(--map-btn-color);
  border:        2px solid rgba(0,0,0,.4);
  border-radius: 8px;
  box-shadow:    1px 1px 3px rgba(0,0,0,.35);
  font-family:   inherit;
  font-size:     .88em;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background var(--map-trans), color var(--map-trans),
                 box-shadow var(--map-trans), transform var(--map-trans);
  user-select:   none;
}
.map-world-slider-toggle:hover,
.map-world-slider-toggle:focus-visible {
  color:      var(--map-btn-hover);
  box-shadow: 2px 2px 6px rgba(0,0,0,.45);
  transform:  translateY(-1px);
  outline:    none;
}
.map-world-slider-toggle:active  { transform:translateY(0); box-shadow:1px 1px 3px rgba(0,0,0,.35); }
.map-world-slider-toggle.is-on {
  background:   var(--map-active-bg);
  color:        #fff;
  border-color: rgba(0,0,0,.5);
  box-shadow:   inset 0 2px 4px rgba(0,0,0,.2), 1px 1px 3px rgba(0,0,0,.35);
}
.map-world-slider-toggle.is-on:hover { color:#f0e0c8; }

/* Range slider */
.map-world-slider {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             6px;
  border-radius:      3px;
  background:         var(--map-slider-track);
  outline:            none;
  cursor:             pointer;
  transition:         opacity var(--map-trans);
  -webkit-user-drag:  none;  /* prevent slider thumb starting a drag in WebKit */
  user-select:        none;
}
.map-world-slider:disabled { opacity:.35; cursor:not-allowed; }

.map-world-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:         none;
  width:              16px;
  height:             16px;
  border-radius:      50%;
  background:         var(--map-slider-thumb);
  border:             2px solid rgba(0,0,0,.45);
  box-shadow:         0 1px 3px rgba(0,0,0,.4);
  cursor:             pointer;
  transition:         background var(--map-trans);
}
.map-world-slider:not(:disabled)::-webkit-slider-thumb:hover {
  background: var(--link-color-hover, #7f5c38);
}
.map-world-slider::-moz-range-thumb {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--map-slider-thumb);
  border:        2px solid rgba(0,0,0,.45);
  box-shadow:    0 1px 3px rgba(0,0,0,.4);
  cursor:        pointer;
}

/* Percentage value label */
.map-world-opacity-val {
  font-family: var(--font, 'Times New Roman', serif);
  font-size:   .82em;
  font-weight: 600;
  color:       var(--IB-text, #4B2E12);
  min-width:   32px;
  text-align:  right;
  opacity:     .8;
}

/* Responsive */
@media (max-width: 600px) {
  .map-world-toggle          { font-size:.82em; padding:5px 10px 5px 8px; }
  .map-world-slider-toggle   { font-size:.8em;  padding:3px 8px 3px 6px; }
  .map-world-controls-header { flex-wrap:wrap; gap:6px; }
  .map-world-slider-row {
    grid-template-columns: 30px 1fr auto;
    grid-template-rows:    auto auto;
  }
  .map-world-slider-toggle { grid-column: 2 / -1; }
}


/* ──────────────────────────────────────────────────────────────
   PAN / ZOOM  (.map-world-canvas inside .map-world-viewport)
   ────────────────────────────────────────────────────────────── */

/* The canvas is the single element that gets transform applied.
   Every image layer (base + overlays) is a child of this div.  */
.map-world-canvas {
  position:          absolute;
  inset:             0;
  width:             100%;
  height:            100%;
  transform-origin:  0 0;          /* transforms are applied from top-left  */
  will-change:       transform;    /* hint browser to composite on GPU      */
  cursor:            grab;
  user-select:       none;
  -webkit-user-select: none;
  touch-action:      none;         /* we handle touch ourselves             */
}
.map-world-canvas.is-panning { cursor: grabbing; }

/* Base and overlay layers are now children of .map-world-canvas,
   so they fill it 100% as before — no positional changes needed. */
.map-world-canvas .map-world-base,
.map-world-canvas .map-overlay-layer {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}

/* ── Zoom controls (injected into title bar by JS) ── */
.map-world-zoom-controls {
  display:    flex;
  align-items: center;
  gap:        5px;
  flex-shrink: 0;
}

.map-world-zoom-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  background:      var(--map-btn-bg);
  color:           var(--map-btn-color);
  border:          2px solid rgba(0,0,0,.45);
  border-radius:   7px;
  box-shadow:      1px 1px 4px rgba(0,0,0,.4);
  font-size:       1.1em;
  font-weight:     700;
  line-height:     1;
  cursor:          pointer;
  transition:      transform var(--map-trans), box-shadow var(--map-trans), color var(--map-trans);
  font-family:     inherit;
  padding:         0;
}
.map-world-zoom-btn:hover,
.map-world-zoom-btn:focus-visible {
  color:      var(--map-btn-hover);
  box-shadow: 2px 2px 6px rgba(0,0,0,.5);
  transform:  translateY(-1px);
  outline:    none;
}
.map-world-zoom-btn:active {
  transform:  translateY(0);
  box-shadow: 1px 1px 3px rgba(0,0,0,.4);
}

/* Reset button is slightly wider */
.map-world-zoom-btn.reset { width: auto; padding: 0 9px; font-size: .82em; }

/* Zoom level readout */
.map-world-zoom-level {
  font-family:  var(--heading-font, Georgia, serif);
  font-size:    .82em;
  font-weight:  700;
  color:        var(--IB-text, #4B2E12);
  min-width:    38px;
  text-align:   center;
  opacity:      .8;
}