/* The live map inside the original #world_map box (mcwm-original.css gives its size and green border). */
#world_map.world-map-live { text-align: left; }
#world_map.world-map-live .leaflet-control-attribution { font-size: 9px; }
#world_map .leaflet-tile { image-rendering: auto; }
/* world-map.js draws each tile 1 px larger than its place so no gap shows between tiles; Leaflet's own seam fix
   (mix-blend-mode: plus-lighter) would add the overlapping pixels together into bright lines, so it is off here. */
#world_map .leaflet-tile { mix-blend-mode: normal; }
/* /worlds/<id>/full: the map fills the window, as the original "Fullscreen" page did. */
html.world-full, html.world-full body { height: 100%; margin: 0; background: #1a1a1a; }
html.world-full #world_map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto;
  margin: 0; border: 0; }
/* The footer notice sits under the bar on the right, clear of the map's coordinate and Go to boxes (bottom left). */
html.world-full footer { position: absolute; z-index: 1000; top: 62px; right: 8px; max-width: calc(100% - 70px);
  background: rgba(255,255,255,.8); padding: 0 6px; border-radius: 3px; font-size: 11px; text-align: right; }
/* Coordinates under the pointer (world-map.js, owner 2026-10-25) and the fullscreen page's "Go to X Z" box. */
#world_map .map-coords { display: flex; flex-direction: column; gap: 2px; }
#world_map .map-coords-row { display: flex; align-items: center; gap: 10px; }
#world_map .map-coords-note { font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #c9d1d9; }
#world_map .map-coords-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#world_map .map-goto { display: flex; align-items: center; gap: 10px; }
#world_map .map-coords, #world_map .map-goto {
  margin: 0 0 12px 12px; padding: 6px 6px 6px 12px; border-radius: 6px;
  background: rgba(20, 20, 20, .82); color: #fff; font: 13px Menlo, Consolas, "DejaVu Sans Mono", monospace;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); clear: both;
}
/* color and padding: Bootstrap gives every <output> grey text and a top padding */
#world_map .map-coords output { display: inline-block; min-width: 5ch; padding: 0; color: inherit; font-variant-numeric: tabular-nums; }
#world_map .map-coords-x b { color: #9fd49f; }
#world_map .map-coords-z b { color: #9fc4e8; }
#world_map .map-coords button, #world_map .map-goto button {
  height: 28px; padding: 0 10px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .16); color: #fff;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer;
}
#world_map .map-coords button:hover, #world_map .map-goto button:hover { background: rgba(255, 255, 255, .28); }
#world_map .map-goto label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; }
#world_map .map-goto label span { color: #9fd49f; font-weight: bold; }
#world_map .map-goto label + label span { color: #9fc4e8; }
#world_map .map-goto input {
  width: 8ch; height: 28px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px;
  background: rgba(0, 0, 0, .35); color: #fff; font: inherit;
}
#world_map.world-map-live { cursor: crosshair; }
#world_map.world-map-live.leaflet-drag-target, #world_map.world-map-live .leaflet-dragging { cursor: grabbing; }
/* Keyboard: a cross marks the map's centre, the point arrow keys pin. */
#world_map.world-map-live:focus-visible { outline: 3px solid #8fb4d9; outline-offset: -3px; }
#world_map.world-map-live:focus-visible::after {
  content: ""; position: absolute; z-index: 450; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  pointer-events: none;
  background: linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
  filter: drop-shadow(0 0 1px #000);
}
@media (max-width: 600px) {
  #world_map .map-coords, #world_map .map-goto { margin: 0 0 8px 8px; font-size: 12px; }
  #world_map .map-coords-row, #world_map .map-goto { gap: 8px; }
  /* touch targets: 44 px */
  #world_map .map-coords button, #world_map .map-goto button, #world_map .map-goto input { height: 44px; }
  #world_map .map-coords button { min-width: 64px; }
  #world_map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
}