style.css

/*
  Basic styling for the pixel world map game.
  This file defines the layout for the map, pixel canvas and colour palette.
*/

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/*
  The palette sits at the top of the page. It contains small swatches
  representing the available colours. When a colour is selected the
  swatch receives a border.
*/
#palette {
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

.color-swatch {
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
}
.color-swatch.selected {
  border-color: #333;
}

/*
  The map container occupies the remainder of the viewport below the palette.
  It holds the Leaflet map and a canvas overlay for our pixel grid.
*/
/*
  The map container holds the world map image and pixel overlay. It occupies
  all available vertical space beneath the palette and scrolls if the
  content exceeds the viewport height. A relative position enables us
  to absolutely position the canvas overlay inside it.
*/
#map-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  overflow: auto;
}

/*
  The Leaflet map takes up the full space of its container.
*/
/* Remove the Leaflet map styles now that we are using a static image. */

/*
  Our pixel canvas sits above the map but does not intercept pointer events.
  This allows the user to pan/zoom the map normally. The canvas is used
  solely for drawing coloured squares corresponding to the pixel grid.
*/
#pixelCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* The world map image should scale to the width of its container while
   maintaining aspect ratio. Setting display:block removes the default
   inline spacing. */
#worldMap {
  width: 100%;
  height: auto;
  display: block;
}