/* The world map (the M menu's Map tab): a picture, ink on the book's washi, the realm's world seen
   from high above (www/DESIGN.md, Pictures). The sea is the page's own paper, ringed by the
   coast's ripples; the land a paler wash inside the coast's ink. world_map.rs draws it as SVG and village_panel.rs places
   it; being a picture, it keeps its own colours here. Only what is yours and what is selected take
   the palette's ember on paper (--accent-on-paper). Markers and
   labels sit in `.pin`, scaled by --inv (map units per pixel, set by the camera) so they keep their
   size; the terrain's strokes are in map units, so its ink keeps its weight to its symbols. The
   controls over it and the card of a selection are the page's (index.html, ui.css). */
.world-map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.world-map:active { cursor: grabbing; }
.world-map .ripple { fill: none; stroke: #2a3b3d; stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.world-map .ripple.r0 { opacity: 0.12; stroke-dasharray: 1 3; }
.world-map .ripple.r1 { opacity: 0.18; }
.world-map .ripple.r2 { opacity: 0.28; }
.world-map .coast-shade { fill: none; stroke: #2a3b3d; opacity: 0.07; }
.world-map .land { fill: #f6eedb; fill-opacity: 0.55; }
.world-map .coast { fill: none; stroke: #43362a; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.world-map .lake-shore { fill: none; stroke: #d9d6b4; }
.world-map .lake { fill: #a7bcb4; stroke: #3b5658; stroke-linejoin: round; }
.world-map .lake-ripple { fill: none; stroke: #e4ebdf; opacity: 0.75; }
.world-map .river { fill: none; stroke: #4a7480; stroke-linecap: round; stroke-linejoin: round; }
.world-map .terrain path, .world-map .waves path { stroke-linecap: round; stroke-linejoin: round; }
.world-map :is(.trunk, .hill, .hill-line, .peak-line, .reed, .marsh, .dune, .wave) { fill: none; }
.world-map .trunk { stroke: #4b3f2c; }
.world-map .crown { fill: #8b9a68; stroke: #3a3a27; }
.world-map .crown-shade { fill: #64744a; }
.world-map .hill, .world-map .hill-line { stroke: #6a583c; }
.world-map .hill-line { opacity: 0.7; }
.world-map .peak { fill: #ebe0c4; stroke: #43372a; }
.world-map .peak-shade { fill: #a69677; }
.world-map .peak-line { stroke: #43372a; opacity: 0.6; }
.world-map .rock { fill: #cdc1a5; stroke: #4a3e2e; }
.world-map .rock-shade { fill: #908570; }
.world-map .reed { stroke: #56663e; }
.world-map .marsh { stroke: #557677; opacity: 0.8; }
.world-map .dune { stroke: #8d6b3a; }
.world-map .sand { fill: #8c7350; opacity: 0.7; }
.world-map .wave { stroke: #2a3b3d; opacity: 0.3; }
.world-map .terrain, .world-map .waves, .world-map .rivers, .world-map .road, .world-map :is(.lake, .lake-shore, .lake-ripple) { pointer-events: none; }
.world-map .road { fill: none; stroke: #5e4529; stroke-width: 1.4; stroke-dasharray: 5 4; stroke-linecap: round; opacity: 0.85; vector-effect: non-scaling-stroke; }
/* A frontier: a trail out into the wilds, fainter than a road between villages. */
.world-map .road.frontier { stroke-dasharray: 1.5 4; opacity: 0.7; }
.world-map .pin { transform: scale(var(--inv, 0.05)); }
.world-map .site { cursor: pointer; }
.world-map .hit { fill: transparent; }
.world-map .chosen { fill: none; stroke: none; }
.world-map .selected .chosen { stroke: var(--accent-on-paper); stroke-width: 2; }
/* The ways out of the village you are in (world_map.rs, `live_layer`): each road brushed in jade, the
   torii veils' colour for the way on, up to the territory on it. */
.world-map .way { fill: none; stroke: var(--jade-ink); stroke-width: 3.4; stroke-linecap: round; opacity: 0.7;
  vector-effect: non-scaling-stroke; pointer-events: none; }
/* A territory's seal (world_map.rs, `seal`; the map's cards draw it too): a stamp tinted by what losing
   a fight costs you there, rising from plain to solid. Safe is paper and ink, a jail pale amber in a
   dark frame (never the sand villages' solid ochre), a grave wound solid blood red; where it is not
   known, a dashed outline. Its meter's diamonds fill in the same tint. */
.seal .seal-shadow { fill: #2a2016; opacity: 0.3; }
.seal .seal-face { fill: #efe2c4; stroke: #2f261c; stroke-width: 1.3; }
.seal .seal-rim { fill: none; stroke: #2f261c; stroke-width: 0.7; opacity: 0.5; }
.seal .seal-glyph { fill: #2f261c; }
.seal-unknown .seal-face { stroke-dasharray: 2.5 2; }
.seal-unknown :is(.seal-rim, .seal-shadow) { display: none; }
.seal-jail .seal-face { fill: #eec35e; stroke: #4a2e06; stroke-width: 2; }
.seal-jail .seal-rim { stroke: #4a2e06; opacity: 0.45; }
.seal-jail .seal-glyph { fill: #4a2e06; }
.seal-wound .seal-face { fill: var(--vermilion-deep); stroke: #2a120c; }
.seal-wound .seal-rim { stroke: #f2e6c8; opacity: 0.55; }
.seal-wound .seal-glyph { fill: #f2e6c8; }
.meter .rung { fill: #efe2c4; stroke: #2f261c; stroke-width: 1; stroke-linejoin: round; }
.meter-jail .rung.on { fill: #e0a93a; }
.meter-wound .rung.on { fill: var(--vermilion-deep); }
.world-map .site:hover .seal-face { stroke-width: 2; }
/* The ones you cannot go to from here stand smaller and quieter (their scale is the markup's);
   the one you stand in stands full size and says so, as the village you are in does. */
.world-map .territory.neutral .mark { opacity: 0.82; }
.world-map .territory.neutral:hover .mark { opacity: 1; }
/* A way's seal says its stakes in short words beside it, in the seal's tint. */
.world-map .way-tag { font: italic 600 15px/1 var(--face); text-anchor: start; }
.world-map .way-tag.stakes-safe { fill: #3d3426; }
.world-map .way-tag.stakes-jail { fill: #7a5208; }
.world-map .way-tag.stakes-wound { fill: #8e1c12; }
/* A village's emblem (world_map.rs, `emblem`; the map's cards draw it too): a badge in its
   biome's tone (--tone) with a paper rim and picture, on a shadow. Your home is ringed in the
   accent, with a house on a roundel at its shoulder. Pointed at, it lifts. */
.emblem-wood { --tone: #3d5c2a; }
.emblem-sand { --tone: #a5671c; }
.emblem-water { --tone: #1f5a7c; }
.emblem-stone { --tone: #4c4a4f; }
.emblem-plain { --tone: #5e4529; }
.emblem { transition: transform 0.15s; }
.emblem .e-shadow { fill: #2a2016; opacity: 0.32; }
.emblem .e-badge { fill: var(--tone); stroke: #2a2016; stroke-width: 1.4; stroke-linejoin: round; }
.emblem .e-rim { fill: none; stroke: #f2e6c8; stroke-width: 0.9; opacity: 0.75; stroke-linejoin: round; }
.emblem .e-pic { fill: #f2e6c8; }
.emblem .e-shade { fill: var(--tone); opacity: 0.45; }
.emblem .e-keep { stroke: var(--tone); stroke-width: 1.1; stroke-linejoin: round; paint-order: stroke fill; }
.emblem .e-cut { fill: none; stroke: var(--tone); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.emblem .e-line { fill: none; stroke: #f2e6c8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.emblem .thin { stroke-width: 1.3; }
.emblem .far { opacity: 0.74; }
.emblem .home-halo { fill: none; stroke: #f2e6c8; stroke-width: 5; }
.emblem .home-ring { fill: none; stroke: var(--accent-on-paper); stroke-width: 2.2; }
.emblem .home-mark circle { fill: var(--accent-on-paper); stroke: #f2e6c8; stroke-width: 1.5; }
.emblem .home-mark path { fill: #f2e6c8; }
.world-map .site:hover .emblem { transform: translateY(-2px); }
.world-map .site:hover .e-badge { stroke-width: 2; }
.world-map text { pointer-events: none; text-anchor: middle; paint-order: stroke fill; stroke: #efe2c4; stroke-width: 3.5;
  stroke-linejoin: round; fill: #2f261c; }
.world-map .village-name { font: 600 18px/1 var(--face); }
.world-map .home .village-name { fill: #7a2a06; }
.world-map .you-are-here { font: italic 400 13px/1 var(--face); fill: var(--accent-on-paper); }
/* Where the shinobi you track was last seen (world_map.rs, `tracked`): an eye on a diamond seal,
   ringed by the dashed trail they left, their name over it and how long ago under it. Yours, so its
   trail and rim are the ember on paper; where a grave wound awaited them, the seal is solid blood
   red. It takes no pointer: the map under it keeps it. */
.world-map .tracked { pointer-events: none; }
.world-map .tracked .trail { fill: none; stroke: var(--accent-on-paper); stroke-width: 1.6; stroke-dasharray: 3.5 3; opacity: 0.8; }
.world-map .tracked .last-seen-shadow { fill: #2a2016; opacity: 0.3; }
.world-map .tracked .last-seen-face { fill: #efe2c4; stroke: #2f261c; stroke-width: 1.5; stroke-linejoin: round; }
.world-map .tracked .last-seen-rim { fill: none; stroke: var(--accent-on-paper); stroke-width: 0.9; stroke-linejoin: round; }
.world-map .tracked .last-seen-eye { fill: none; stroke: #2f261c; stroke-width: 1.6; stroke-linejoin: round; }
.world-map .tracked .last-seen-pupil { fill: #2f261c; }
.world-map .tracked.danger .trail { stroke: var(--vermilion-deep); }
.world-map .tracked.danger .last-seen-face { fill: var(--vermilion-deep); stroke: #2a120c; }
.world-map .tracked.danger .last-seen-rim { stroke: #f2e6c8; opacity: 0.55; }
.world-map .tracked.danger .last-seen-eye { stroke: #f2e6c8; }
.world-map .tracked.danger .last-seen-pupil { fill: #f2e6c8; }
.world-map .tracked-name { font: 600 17px/1 var(--face); }
.world-map .tracked.danger .tracked-name { fill: #8e1c12; }
.world-map .tracked-ago { font: italic 400 13px/1 var(--face); fill: #3d3426; }
/* A name that would overlap another's at this zoom (village_panel.rs) shows when its village is selected or hovered. */
.world-map .village-name.crowded { display: none; }
.world-map .site:hover .village-name.crowded, .world-map .selected .village-name.crowded { display: inline; }
/* The compass rose: at one size whatever the zoom, on the page beside the chart. */
.map-compass { pointer-events: none; opacity: 0.85; }
.map-compass circle, .map-compass path { stroke: #43362a; stroke-width: 1.3; fill: none; }
.map-compass .thin { stroke-width: 0.6; }
.map-compass .light { fill: #f6eedb; }
.map-compass .dark { fill: #43362a; }
.map-compass text { fill: #43362a; stroke: #f6eedb; stroke-width: 3; paint-order: stroke fill; text-anchor: middle;
  font: 600 20px var(--face); }