/* ============================================================
   The map the oxedation's location is picked on.

   The map is a canvas, so almost nothing here is paint: the
   hexagons, the highlight and the bitmap are all drawn in
   map.js. What is left is the frame the canvas fills and the
   bar the confirm button stands on.
   ============================================================ */

.screen-map { background: var(--ground); }

/* Under the instruction and down to the foot of the content area. A height is
   not written: the content area is a different height on every phone, and the
   map is however much of it is left. */
.map-frame {
	position: absolute;
	bottom: 0;
	overflow: hidden;
	background: var(--blue-sea);
}

/* `touch-action: none` is what makes two fingers a pinch rather than the
   browser's own zoom, and one finger a pan rather than a scroll. */
.map-canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: grab;
}
.map-canvas:active { cursor: grabbing; }

/* The bar stands over the map, so it is dark enough under the text to read
   against a coastline and clear enough above it to see what is being chosen.
   It takes no touches of its own: everything but the button is map. */
.map-bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 78px;
	pointer-events: none;
	background: var(--wash-map);
}
.map-bar .wide-button { pointer-events: auto; }

/* The cell about to be recorded, named. A member confirms what they can read. */
.map-cell {
	position: absolute;
	left: 0; right: 0; top: 3.9px;
	text-align: center;
	font-size: var(--size-label);
	color: var(--accent);
	line-height: 1;
}