.world-map-window { width: 960px; max-width: calc(100vw - 16px); }
.world-map-window .ttd-window__body { min-width: 0; overflow: auto; }
.world-map__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}
.world-map__viewport {
  box-sizing: border-box;
  width: 100%;
  height: 405px;
  min-width: 0;
  margin: 4px 2px;
  overflow: hidden;
  border: 3px solid;
  border-color: var(--ttd-bevel-dark) var(--ttd-bevel-light) var(--ttd-bevel-light) var(--ttd-bevel-dark);
  background: #101820;
}
.world-map__canvas { display: block; width: 100%; height: 100%; cursor: crosshair; image-rendering: pixelated; }
.world-map__modes {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 2px;
  padding: 3px 2px;
}
.world-map__mode {
  box-sizing: border-box;
  width: 44px;
  min-height: 42px;
  padding: 2px 1px;
  font: 11px/12px "OpenTTD Sans", sans-serif;
  white-space: normal;
  overflow-wrap: anywhere;
}
.world-map__mode.is-active,
.world-map__zoom.is-active { background: #d2d2a0; }
.world-map__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 28px;
  padding: 2px;
  border-top: 2px solid var(--ttd-bevel-dark);
}
.world-map__controls .ttd-btn { flex: 0 0 auto; min-height: 24px; padding: 1px 7px; }
.world-map__zoom { min-width: 36px; }
.world-map__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 1px 4px;
  max-height: 105px;
  overflow: auto;
  padding: 3px;
}
.world-map__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 23px;
  padding: 1px 3px;
  overflow: hidden;
  color: var(--ttd-ink);
  background: var(--ttd-bg);
  border: 1px solid transparent;
  font: inherit;
  text-align: left;
  text-shadow: none;
  white-space: nowrap;
}
button.world-map__legend-item { cursor: pointer; }
.world-map__legend-item.is-active { border-color: var(--ttd-bevel-dark) var(--ttd-bevel-light) var(--ttd-bevel-light) var(--ttd-bevel-dark); }
.world-map__legend-swatch { flex: 0 0 17px; width: 17px; height: 17px; border: 1px solid #474138; }
.world-map__legend-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.world-map__message { min-height: 18px; padding: 0 5px; color: #651717; text-shadow: none; }

@media (max-width: 760px) {
  .world-map__layout { grid-template-columns: minmax(0, 1fr); }
  .world-map__viewport { height: min(405px, 42vh); }
  .world-map__modes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .world-map__mode { width: auto; min-height: 30px; }
  .world-map__legend { grid-template-columns: 1fr; }
}