/* The war map (warmap.js), on the GM Console and the player page. Colours come from the
   console's tokens; the terrain and the lords' colours are part of the map itself. */
.warmap { display: grid; gap: 8px; }
.warmap-frame { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); height: min(68vh, 620px); touch-action: none; }
.warmap-svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
.warmap-svg:active { cursor: grabbing; }
.warmap.picking .warmap-svg { cursor: crosshair; }
.wm-terrain polygon { stroke: rgba(0, 0, 0, .18); stroke-width: .4; }
.wm-road { stroke: #d8c79a; stroke-width: 1.4; stroke-opacity: .6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wm-road.major_road { stroke-width: 2; stroke-opacity: .75; }
.wm-road.patrol_road { stroke-dasharray: 3 2; }
.wm-domain-edge { fill: none; stroke-width: .7; stroke-opacity: .55; stroke-dasharray: 2 2; }
.wm-realm-edge { fill: none; stroke-width: 2.2; stroke-opacity: .95; stroke-linecap: round; }
.wm-town { fill: #f2ead8; stroke: #2a2520; stroke-width: 1; }
.wm-label { font: 600 7px var(--serif); fill: #f6efde; paint-order: stroke; stroke: rgba(20, 17, 14, .85); stroke-width: 2.4px;
  pointer-events: none; }
.wm-sight { fill: rgba(0, 0, 0, .25); stroke-width: 1.6; stroke-dasharray: 3 2; }
.wm-sight-q { font: 700 8px var(--sans, sans-serif); pointer-events: none; }
.wm-sight-area { fill: none; stroke-width: 1.8; stroke-dasharray: 4 3; }
.wm-siege { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 3 2.5; }
.wm-battle path { stroke: var(--bad); stroke-width: 2.4; stroke-linecap: round; }
.wm-route { fill: none; stroke-width: 1.6; stroke-dasharray: 4 3; stroke-opacity: .85; }
.wm-route.sel { stroke-width: 2.6; stroke-opacity: 1; }
.wm-dest { fill: none; stroke-width: 1.6; }
.wm-route-pending { fill: none; stroke-width: 1.4; stroke-dasharray: 1.5 3; stroke-opacity: .7; stroke-linecap: round; }
.wm-route-pending.sel { stroke-width: 2.2; stroke-opacity: 1; }
.wm-dest-pending { stroke-width: 1.6; stroke-opacity: .85; }
.wm-pending g { cursor: help; }
.wm-army { cursor: pointer; }
.wm-army-body { stroke: #14110e; stroke-width: 1.2; }
.wm-army.sel .wm-army-body { stroke: #fff; stroke-width: 2.4; }
.wm-army-ring { fill: none; stroke-width: 1.6; stroke-dasharray: 2.5 2; }
.wm-army-ring.besieging { stroke: var(--warn); }
.wm-army-ring.pillaging { stroke: var(--bad); stroke-dasharray: none; }
.wm-army-ring.held { stroke: var(--info); }
.wm-army-n { font: 700 6.5px var(--mono); fill: #f6efde; paint-order: stroke; stroke: rgba(20, 17, 14, .9); stroke-width: 2px;
  pointer-events: none; }
.warmap-tip { position: absolute; z-index: 3; max-width: 340px; padding: 6px 9px; border-radius: 5px; font-size: 12px; line-height: 1.35;
  background: var(--card-2); color: var(--bright); border: 1px solid var(--border); box-shadow: var(--shadow); pointer-events: none; }
.warmap-ctl { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; z-index: 2; }
.warmap-ctl button { width: 30px; height: 30px; border-radius: 5px; border: 1px solid var(--border); background: var(--card);
  color: var(--bright); font-size: 16px; line-height: 1; cursor: pointer; }
.warmap-ctl button:hover { background: var(--card-hover); }
.warmap-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text); }
.warmap-legend span { display: inline-flex; align-items: center; gap: 5px; }
.warmap-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0, 0, 0, .4); }
.warmap-legend i.sq { border-radius: 2px; background: var(--dim); }
.warmap-legend i.ring { background: none; border: 1.5px dashed var(--warn); }
.warmap-legend i.ghost { width: 16px; height: 0; border-radius: 0; border: 0; border-top: 2px dotted var(--dim); }
.warmap-legend i.q { border: 1.5px dashed var(--dim); background: none; font-style: normal; font-size: 8px; text-align: center; line-height: 9px; }
.warmap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--card-2); border: 1px solid var(--border); font-size: 13px; }
.warmap-bar .dim { font-size: 12px; }
.warmap-layers { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--dim); }
.warmap-layers label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
@media (max-width: 860px) { .warmap-frame { height: 60vh; } }