/*
 * Die Stämme LAN — map
 *
 * Contains map rules only. Every selector starts with a map class so
 * that the file stays neutral on pages without a map. The @media
 * rules of the map live in public/css/mobile.css; only the rules of
 * the parts new in round 5 (axes, mini map) sit in the block at the
 * end of this file.
 *
 * The image references of the terrain tiles (.t-…) and the village
 * graphics (.i-…) are generated by templates/map.php via gfx() in a
 * separate <style> block, because the URLs depend on the installed
 * graphics pack.
 */

/* Page structure: map left, mini map and legend right (map_big and
   map_topo of the original) */
.map-page {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.map-main { flex: 1 1 400px; min-width: 0; }
.map-side { flex: 0 0 340px; max-width: 100%; }

/* Frame with the coordinate axes (map_container of the original) */
.map-frame {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	background: #f4e4bc;
	border: 1px solid #8c5f0d;
}
.map-row { display: flex; }
.map-axis {
	position: relative;
	overflow: hidden;
	flex: none;
	font-size: 8pt;
	color: #603000;
}
.map-axis-y { width: 26px; border: 1px solid transparent; border-width: 1px 0; }
.map-axis-x { height: 18px; border: 1px solid transparent; border-width: 0 1px; }
.map-axis-c { width: 26px; height: 18px; }
.map-axis-inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	will-change: transform;
}
.map-lbl { position: absolute; text-align: center; }
.map-axis-y .map-lbl { left: 0; width: 26px; height: 38px; line-height: 38px; }
.map-axis-x .map-lbl { top: 0; width: 53px; height: 18px; line-height: 18px; }
.map-lbl.k { font-weight: bold; }

/* Viewport and draggable layer */
.map-view {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	border: 1px solid #000;
	background: #4a7a2a;
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.map-view.dragging { cursor: grabbing; }
.map-layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	will-change: transform;
}

/* Terrain tile in the original's dimensions; the picture comes from
   the class per terrain, nothing is set inline per tile */
.map-tile {
	position: absolute;
	width: 53px;
	height: 38px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}
/* Fallback colours while a terrain graphic is missing */
.map-tile.k-gras { background-color: #5a8a34; }
.map-tile.k-wald { background-color: #2f5a1c; }
.map-tile.k-berg { background-color: #7b7360; }
.map-tile.k-see { background-color: #3f6f9f; }

/* Continent borders every 100 fields */
/* Continent borders run over the village pictures (z-index above
   .map-vil) */
.map-tile.bx::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	z-index: 2;
	background: rgba(0, 0, 0, .6);
}
.map-tile.by::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 1px;
	z-index: 2;
	background: rgba(0, 0, 0, .6);
}

/* Village picture on top of the terrain tile */
.map-vil {
	position: absolute;
	left: 0;
	top: 0;
	width: 53px;
	height: 38px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}
.map-vil:hover { filter: brightness(1.15); }

/* Colouring as a dot above the village picture; the pack's pictures
   are opaque, so the colour cannot shine through as in the old
   game. Colours as in the original legend. */
.map-dot {
	position: absolute;
	right: 3px;
	top: 3px;
	width: 8px;
	height: 8px;
	border: 1px solid #000;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	background: #9a4a24;
}
/* The group's symbol at an own village (groups screen) */
.map-gico {
	position: absolute;
	left: 2px;
	top: 2px;
	width: 16px;
	height: 16px;
	filter: drop-shadow(0 0 1px #000);
}
.map-vil.current .map-dot { background: #fff; }
.map-vil.own .map-dot { background: #f0c800; }
.map-vil.tribe .map-dot { background: #0000f4; }
.map-vil.ally .map-dot { background: #00a0f4; }
.map-vil.nap .map-dot { background: #800080; }
.map-vil.enemy .map-dot { background: #f40000; }
.map-vil.barb .map-dot { background: #969696; }
.map-vil.other .map-dot { background: #9a4a24; }

/* Own and current villages are told apart by the dot alone, as in
   the original: no frame around the picture */

/* Jump arrows in the four corners of the map (the original's) */
.map-corner {
	position: absolute;
	z-index: 3;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(244, 228, 188, .85);
	border: 1px solid #603000;
}
.map-corner:hover { background: #fbf4dd; }
.map-corner img { display: block; width: 11px; height: 11px; }
.map-corner.nw { left: 2px; top: 2px; }
.map-corner.ne { right: 2px; top: 2px; }
.map-corner.sw { left: 2px; bottom: 2px; }
.map-corner.se { right: 2px; bottom: 2px; }

/* Arrows around the mini map: 3x3 grid with the map in the middle */
.map-nav {
	display: inline-grid;
	grid-template-columns: 18px auto 18px;
	grid-template-rows: 18px auto 18px;
	gap: 1px;
	padding: 1px;
	background: #ded3b9;
	border: 1px solid #000;
}
.map-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #603000;
	text-decoration: none;
}
.map-nav a:hover { background: #f7eed3; }
.map-nav img { display: block; width: 11px; height: 11px; }
/* Links and the usage hint under the legend */
.map-links { margin: 6px 0 0; }
.map-links a + a { margin-left: 12px; }
.map-hint { display: none; margin: 4px 0 0; }
.map-hint.ready { display: block; }
.map-box { width: 100%; margin-top: 8px; }

/* Mini map (hidden without JavaScript): 200 px for 100x100 or 50x50
   fields around the view centre; the view rectangle sits in the
   middle and the picture moves behind it */
.map-mini { display: none; margin: 0 0 6px; }
.map-mini.ready { display: block; }
.map-mini h3 { margin: 0 0 4px; }
.map-mini p { margin: 4px 0 0; }
.map-mini-box {
	position: relative;
	overflow: hidden;
	background: #2b2b1f;
	cursor: pointer;
}
.map-mini-box canvas { display: block; image-rendering: pixelated; }
.map-mini-frame {
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	border: 1px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .7);
	pointer-events: none;
}

/* Marker colours are set inline; the swatch is also used in the
   marker list of the side column */
.map-swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	border: 1px solid #000;
	vertical-align: middle;
}
.map-marks input[type=color] { width: 28px; height: 20px; padding: 0; vertical-align: middle; }

/* Legend beneath the map, colours identical to the dots above */
.map-legend {
	margin-top: 6px;
	padding: 4px 6px;
	border: 1px solid #8c5f0d;
	background: #f4e4bc;
	font-size: 8pt;
}
.map-legend-row { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; }
.map-legend-head { display: inline-block; min-width: 56px; font-weight: bold; }
.map-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.map-legend .map-swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	border: 1px solid #000;
	background: #9a4a24;
}
.map-legend .map-swatch.current { background: #fff; }
.map-legend .map-swatch.own { background: #f0c800; }
.map-legend .map-swatch.tribe { background: #0000f4; }
.map-legend .map-swatch.ally { background: #00a0f4; }
.map-legend .map-swatch.nap { background: #800080; }
.map-legend .map-swatch.enemy { background: #f40000; }
.map-legend .map-swatch.barb { background: #969696; }
.map-legend .map-swatch.other { background: #9a4a24; }

/* Tooltip on hover or tap, a table.vis like the original popup */
.map-tip {
	position: fixed;
	display: none;
	left: 0;
	top: 0;
	z-index: 100;
	min-width: 160px;
	pointer-events: none;
}
.map-tip table.vis { background: #f0e6c8; border: 1px solid #000; }

/* Context menu of a village (right click): the farm templates */
.map-menu {
	position: fixed;
	z-index: 110;
	background: #f0e6c8;
	border: 1px solid #000;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
	font-size: 11px;
}
.map-menu-head {
	background: #dcc59a; padding: 2px 6px; font-weight: bold;
	white-space: nowrap;
}
.map-farm { padding: 4px 6px; white-space: nowrap; }
.map-farm button { margin-left: 3px; padding: 0 6px; }
.map-tip th, .map-tip td { white-space: nowrap; }

/* Round 5: rules of the axes and the mini map on narrow screens; the
   other map @media rules stay in public/css/mobile.css */
@media (max-width: 600px) {
	.map-frame { display: block; }
	.map-mini-box { margin: 0 auto; }
	.map-tip { max-width: 90vw; }
	.map-tip th, .map-tip td { white-space: normal; }
}

/* Full-screen overlay of the mini map (8 px per field) */
.map-overlay[hidden] { display: none; }
.map-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .7);
}
.map-overlay-box {
	background: #f4e4bc;
	border: 2px solid #603000;
	padding: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
}
.map-overlay-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	font-weight: bold;
	color: #603000;
}
.map-overlay-head a { margin-left: auto; }
.map-overlay canvas {
	display: block;
	border: 1px solid #000;
	cursor: grab;
	image-rendering: pixelated;
}
.map-mini-box canvas { cursor: grab; }