/* Shared map styling for the SVG map view. Design pages override the custom
   properties on .mapsvg (or a wrapper) to re-skin without touching JS. */

.mapsvg-container { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.mapsvg {
  --ink: #2b2118;
  --ink-soft: rgba(43, 33, 24, 0.55);
  --paper: #f3ecd9;
  --paper-light: #faf6ea;
  --sea: #cfdbe3;
  --sea-deep: #b9cbd7;
  --land: #ede4cd;
  --water-ink: #3b5b7a;
  --water-fill: #b8cfe0;
  --forest: #a9c48d;
  --forest-edge: #6f8f5a;
  --wetland: #b7c6a8;
  --farmland: #e7dcb2;
  --building: #e3d3b4;
  --rock: #766c60;
  --room: #f5efe0;
  --biome-forest: #b8cf9f;
  --biome-desert: #ecdcb2;
  --biome-tundra: #dcdcd2;
  --biome-grass: #d8dfb4;
  --sel: #d5006c;      /* selection accent: a hue that never appears in the map palette */
  --hov: #ff8f1f;      /* hover accent */
  --preview: #1273d8;  /* extent preview accent */
  --lock: #8a5a1e;
  --danger: #b3261e;
  --k0: #c9776a; --k1: #6f95c2; --k2: #7fb07a; --k3: #c9ad63; --k4: #a284c1; --k5: #64b0b0; --k6: #c98ba8; --k7: #aaa36f;
  --label-font: 'Caveat', 'Segoe Print', cursive;
  --ui-font: 'Inter', system-ui, sans-serif;
  background: var(--paper);
  display: block;
  cursor: crosshair;
  outline: none;
}
.mapsvg.panning { cursor: grabbing; }
.mapsvg .layer { pointer-events: auto; }
.mapsvg .layer-labels, .mapsvg .layer-selection, .mapsvg .layer-grid { pointer-events: none; }
.mapsvg .layer-preview .preview-mask, .mapsvg .layer-preview .preview-frame, .mapsvg .layer-preview .preview-corners, .mapsvg .layer-preview .preview-cross, .mapsvg .layer-preview text { pointer-events: none; }
.mapsvg .layer-preview .preview-body:not(.draggable) { pointer-events: none; }

/* ---- screen-constant symbols and labels ---- */
.mapsvg .sym { transform: translate(var(--x), var(--y)) rotate(var(--rot, 0deg)) scale(var(--uppn, 1)); }
.mapsvg .lbl {
  font-family: var(--label-font);
  fill: var(--ink);
  font-size: calc(var(--upp) * 13);
  paint-order: stroke fill;
  stroke: var(--paper);
  stroke-width: calc(var(--upp) * 3.2);
  stroke-linejoin: round;
  transform: translate(calc(var(--x) + var(--dx, 0) * var(--upp)), calc(var(--y) + var(--dy, 0) * var(--upp)));
  pointer-events: none;
}
.mapsvg .lbl.culled { display: none; }
.mapsvg .lbl-huge { font-size: calc(var(--upp) * 30); letter-spacing: calc(var(--upp) * 4); fill: var(--ink-soft); font-weight: 700; }
.mapsvg .lbl-big { font-size: calc(var(--upp) * 19); letter-spacing: calc(var(--upp) * 2); fill: var(--ink-soft); font-weight: 700; }
.mapsvg .lbl-caps { text-transform: uppercase; }
.mapsvg .lbl-settlement { font-family: var(--ui-font); font-size: calc(var(--upp) * 11.5); font-weight: 700; }
.mapsvg .lbl-metropolis { font-size: calc(var(--upp) * 14); }
.mapsvg .lbl-city { font-size: calc(var(--upp) * 13); }
.mapsvg .lbl-village, .mapsvg .lbl-hamlet { font-weight: 400; font-size: calc(var(--upp) * 10.5); }
.mapsvg .lbl-point { font-family: var(--ui-font); font-size: calc(var(--upp) * 10); font-style: italic; fill: var(--ink-soft); }
.mapsvg .lbl-line { font-size: calc(var(--upp) * 12); font-style: italic; fill: var(--water-ink); }
.mapsvg .lbl-line.t-mountain_range, .mapsvg .lbl-line.t-coast_segment, .mapsvg .lbl-line.t-road, .mapsvg .lbl-line.t-street, .mapsvg .lbl-line.t-major_road { fill: var(--ink-soft); }
.mapsvg .lbl-area { font-size: calc(var(--upp) * 12); fill: var(--ink-soft); }
.mapsvg .lbl.t-sea { fill: var(--water-ink); font-style: italic; letter-spacing: calc(var(--upp) * 1.5); }
.mapsvg .lbl.t-room { font-family: var(--ui-font); font-style: normal; font-size: calc(var(--upp) * 10); }
.mapsvg .lbl.t-district { font-size: calc(var(--upp) * 14); letter-spacing: calc(var(--upp) * 1.5); }
.mapsvg .lbl.t-farmland, .mapsvg .lbl.t-pond { display: none; }

/* Level of detail: tiers hide until zoomed in. */
.mapsvg[data-lod="0"] .tier-1, .mapsvg[data-lod="0"] .tier-2, .mapsvg[data-lod="0"] .tier-3,
.mapsvg[data-lod="1"] .tier-2, .mapsvg[data-lod="1"] .tier-3,
.mapsvg[data-lod="2"] .tier-3 { display: none; }
.mapsvg[data-lod="0"] .glyphs-tree { opacity: 0.45; }
.mapsvg[data-lod="0"][data-scale="atlas"] .glyphs-peak .sym:nth-child(2n) { display: none; }

/* ---- hit targets ---- */
.mapsvg .hit { fill: none; stroke: transparent; stroke-width: 12px; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.mapsvg .hit-point { fill: transparent; stroke: none; pointer-events: all; }
.mapsvg .layer-labels text { pointer-events: none; }

/* ---- background ---- */
.mapsvg .paper { fill: var(--paper); }
.mapsvg .paper.sea { fill: var(--sea); }
.mapsvg .ocean-fill { fill: transparent; pointer-events: visibleFill; }
.mapsvg .region-land, .mapsvg .land-fill { fill: var(--land); stroke: var(--ink); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapsvg .coast-glow { fill: none; stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 8px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.mapsvg .land-fill.island { stroke-width: 1px; }
.mapsvg .land-fill.floating { fill: #efe3d4; stroke-dasharray: 4 2; }
.mapsvg .shadow { fill: var(--ink); fill-opacity: 0.18; }
.mapsvg .ice { fill: #f2f4f6; stroke: #9fb1bf; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.mapsvg .decor.biome path { fill-opacity: 0.55; }
.mapsvg .settlement-footprint { fill: var(--paper-light); stroke: var(--ink); stroke-opacity: 0.25; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }

/* ---- political ---- */
.mapsvg .kingdom-fill { fill: var(--tint); fill-opacity: 0.14; }
.mapsvg .kingdom-border { fill: none; stroke: var(--tint); stroke-width: 2.6px; stroke-opacity: 0.75; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; }
.mapsvg .district-fill { fill-opacity: 0.16; stroke: var(--ink); stroke-opacity: 0.25; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.mapsvg .district-market { fill: #d9a441; } .mapsvg .district-noble { fill: #7d6fc2; } .mapsvg .district-temple { fill: #c26f9b; }
.mapsvg .district-craft { fill: #c07a3a; } .mapsvg .district-poor { fill: #8b8b6a; } .mapsvg .district-docks { fill: #4f8fbf; }

/* ---- water ---- */
.mapsvg .water-fill { fill: var(--water-fill); stroke: var(--water-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapsvg .water-fill.coast { stroke-width: 1.4px; }
.mapsvg .river { fill: none; stroke: var(--water-ink); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mapsvg .river.stream { stroke-opacity: 0.75; }
.mapsvg .water-band { fill: none; stroke: var(--water-fill); stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .water-band.deep { stroke: #7fa6c8; }
.mapsvg .river-band { fill: none; stroke: var(--water-fill); stroke-linecap: butt; stroke-linejoin: round; }
.mapsvg .river-band-edge { fill: none; stroke: var(--water-ink); stroke-opacity: 0.55; stroke-linecap: butt; stroke-linejoin: round; }
.mapsvg[data-scale="atlas"] .road-major { stroke-width: 1.6px; stroke-opacity: 0.7; }
.mapsvg[data-scale="atlas"] .road-casing { stroke-width: 3.5px; }
.mapsvg .crater-rim { fill: none; stroke: var(--ink); stroke-width: 1.2px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.mapsvg .coast-segment { fill: none; stroke: var(--water-ink); stroke-opacity: 0.35; stroke-width: 5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }

/* ---- terrain ---- */
.mapsvg .terrain-fill { fill: var(--ink); fill-opacity: 0.04; stroke: none; }
.mapsvg .ridge { fill: none; stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mapsvg .peak-line { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.mapsvg .peak-shade { fill: var(--ink); fill-opacity: 0.22; }
.mapsvg .hill-line { fill: none; stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1; }
.mapsvg .ledge { fill: none; stroke: var(--ink); stroke-width: 3px; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---- vegetation and land use ---- */
.mapsvg .forest-fill { fill: var(--forest); fill-opacity: 0.55; stroke: var(--forest-edge); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapsvg .tree-glyph { fill: none; stroke: var(--forest-edge); stroke-width: 1; }
.mapsvg .wetland-fill { fill-opacity: 0.9; }
.mapsvg .marsh-line { stroke: var(--water-ink); stroke-opacity: 0.55; stroke-width: 0.8; fill: none; }
.mapsvg .wetland-edge { fill: var(--wetland); fill-opacity: 0.35; stroke: var(--water-ink); stroke-opacity: 0.35; stroke-width: 1px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.mapsvg .farmland-fill { fill: var(--farmland); fill-opacity: 0.8; stroke: var(--ink); stroke-opacity: 0.2; stroke-width: 0.8px; vector-effect: non-scaling-stroke; }
.mapsvg .farm-fields { fill: var(--farmland); stroke: var(--ink); stroke-opacity: 0.2; stroke-width: 0.8px; vector-effect: non-scaling-stroke; }

/* ---- ground (battle maps) ---- */
.mapsvg .paper.ground-grass { fill: #cfdcae; } .mapsvg .paper.ground-dirt { fill: #d8c4a0; } .mapsvg .paper.ground-stone { fill: #cfcbc2; }
.mapsvg .paper.ground-mud { fill: #b5a58c; } .mapsvg .paper.ground-snow { fill: #f2f4f6; } .mapsvg .paper.ground-sand { fill: #ecdfb6; }
.mapsvg .ground { stroke: var(--ink); stroke-opacity: 0.25; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapsvg .ground-grass { fill: #c5d5a2; } .mapsvg .ground-dirt { fill: #cdb48d; } .mapsvg .ground-stone { fill: #bcb8ae; }
.mapsvg .ground-mud { fill: #a48f73; } .mapsvg .ground-sand { fill: #e6d6a5; } .mapsvg .ground-snow { fill: #eef2f5; }
.mapsvg .ground.difficult { stroke-dasharray: 3 2; }
.mapsvg .road-surface { fill: none; stroke: #c9b08a; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .road-surface.major { stroke: #bfb09a; }

/* ---- roads ---- */
.mapsvg .road, .mapsvg .road-casing { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mapsvg .road-casing { stroke: var(--paper-light); stroke-width: 5px; }
.mapsvg .road-major { stroke: var(--ink); stroke-width: 2.4px; }
.mapsvg .road-minor { stroke: var(--ink); stroke-width: 1.3px; stroke-opacity: 0.85; }
.mapsvg .road-trail { stroke: var(--ink); stroke-width: 1px; stroke-dasharray: 3 3; stroke-opacity: 0.8; }
.mapsvg .road-main { stroke: #c9b18a; stroke-width: 5px; }
.mapsvg .road-secondary { stroke: #c9b18a; stroke-width: 3px; }
.mapsvg .road-alley { stroke: #c9b18a; stroke-width: 1.6px; }
.mapsvg[data-scale="settlement"] .road-casing { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 6.5px; }

/* ---- structures ---- */
.mapsvg .wall { fill: none; stroke: var(--ink); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapsvg .plaza { fill: #e8dcc0; stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapsvg .building { fill: var(--building); stroke: var(--ink); stroke-width: 0.9px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapsvg .b-temple, .mapsvg .b-shrine { fill: #d9c6e4; } .mapsvg .b-inn, .mapsvg .b-tavern { fill: #e7c39a; }
.mapsvg .b-keep, .mapsvg .b-manor { fill: #c8c2b5; stroke-width: 1.4px; } .mapsvg .b-warehouse, .mapsvg .b-boathouse { fill: #d3c8ae; }
.mapsvg .b-smithy, .mapsvg .b-workshop { fill: #d9b48f; } .mapsvg .b-farm { fill: #e8dcc0; } .mapsvg .b-guildhall { fill: #d8cdb0; }
.mapsvg .dock { fill: none; stroke: #6b533a; stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linecap: butt; }
.mapsvg .rock { fill: var(--rock); }
.mapsvg .hatch-line { stroke: #2b2118; stroke-opacity: 0.35; stroke-width: 1; }
.mapsvg .dungeon-bound { fill: rgba(255, 255, 255, 0.05); stroke: var(--danger); stroke-width: 2px; stroke-dasharray: 8 4; vector-effect: non-scaling-stroke; }
.mapsvg .room { fill: var(--room); stroke: var(--ink); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapsvg .room.ruined { stroke-dasharray: 10 3; }
.mapsvg .room.lit { fill: #fff8e4; }
.mapsvg .corridor-casing { fill: none; stroke: var(--ink); stroke-linecap: butt; stroke-linejoin: miter; }
.mapsvg .corridor { fill: none; stroke: var(--room); stroke-linecap: butt; stroke-linejoin: miter; }
.mapsvg .corridor.squeeze { stroke-dasharray: 4 2; }
.mapsvg .corridor.entrance { stroke: #e6d8bd; }
.mapsvg .grid-line { fill: none; stroke: var(--ink); stroke-opacity: 0.3; stroke-width: 0.6; }
.mapsvg .map-frame { fill: none; stroke: var(--ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapsvg .hex-line { fill: none; stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 0.5; }
.mapsvg .tile-line { fill: none; stroke: var(--preview); stroke-opacity: 0.55; stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapsvg .tile-hl { fill: var(--preview); fill-opacity: 0.12; stroke: var(--preview); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }

/* ---- point symbols ---- */
.mapsvg .halo { fill: var(--paper-light); stroke: none; }
.mapsvg .body { fill: var(--paper-light); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mapsvg .body.solid { fill: var(--ink); }
.mapsvg .body.stroke-only { fill: none; stroke-width: 1.8; }
.mapsvg .body.thick { stroke-width: 2.4; }
.mapsvg .body.water { fill: var(--water-fill); stroke: var(--water-ink); }
.mapsvg .body.danger { fill: #f3c7c2; stroke: var(--danger); }
.mapsvg .body.light { fill: #ffd76a; stroke: #b98a1a; }
.mapsvg .glow { fill: #ffd76a; fill-opacity: 0.22; stroke: none; }
.mapsvg .inner { fill: var(--ink); stroke: none; }
.mapsvg .mark { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.mapsvg .mark.danger { stroke: var(--danger); fill: var(--danger); }
.mapsvg .mark.arrow { stroke-width: 1.8; }
.mapsvg .star { fill: #d8a300; stroke: var(--ink); stroke-width: 0.8; }
.mapsvg .glyph-text { font-family: var(--ui-font); font-size: 8px; font-weight: 700; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mapsvg .settlement .body { stroke-width: 1.8; }
.mapsvg .settlement.s-metropolis .body, .mapsvg .settlement.s-city .body { stroke-width: 2.2; }
.mapsvg .settlement.capital .halo { fill: #fff3c4; }
.mapsvg .poi .body { stroke-width: 1.6; }
.mapsvg .poi-lair .body { fill: #f0c3bd; stroke: var(--danger); }
.mapsvg .poi-ruin .body { fill: #d8cbb6; }
.mapsvg .poi-cave .body { fill: #6d6157; stroke: var(--ink); }
.mapsvg .poi-tower .body { fill: #d2d2cd; }
.mapsvg .poi-shrine .body { stroke: #a5851c; }
.mapsvg .poi-mine .body { stroke: #8a5a1e; }
.mapsvg .resource .body { fill: #f7f0da; stroke: #8a5a1e; }
.mapsvg .window .body, .mapsvg .body.window { fill: #cfe3f5; stroke: var(--ink); stroke-width: 1; }
.mapsvg .door .body { fill: #c68a4b; stroke: var(--ink); stroke-width: 1.2; }
.mapsvg .door-secret .body { fill: var(--room); stroke-dasharray: 2 1.5; }
.mapsvg .door-locked .mark { fill: var(--ink); }
.mapsvg .stair .body { fill: #e5dcc7; }
.mapsvg .tower-dot .body { fill: var(--ink); stroke: var(--paper-light); }
.mapsvg .gate .body { fill: #e6d2ab; stroke-width: 1.8; }
.mapsvg .obj { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapsvg .obj-tree { fill: #7fa064; } .mapsvg .obj-bush { fill: #a0b87d; } .mapsvg .obj-rock, .mapsvg .obj-boulder { fill: #a9a39a; }
.mapsvg .obj-crates, .mapsvg .obj-barrels, .mapsvg .obj-cart { fill: #c79a5f; } .mapsvg .obj-log, .mapsvg .obj-stump { fill: #a4794a; } .mapsvg .obj-fence { fill: #d2b98a; } .mapsvg .obj-well { fill: #8f8f8f; }
.mapsvg .lock .body { fill: #f3dfb3; stroke: var(--lock); stroke-width: 1.4; }
.mapsvg .lock .stroke-only { fill: none; stroke: var(--lock); stroke-width: 1.4; }
.mapsvg .lock .halo { fill: var(--paper-light); }
.mapsvg.player-view .lock { display: none; }

/* ---- selection and hover ---- */
.mapsvg .dim-veil { display: none; fill: var(--paper); fill-opacity: 0.58; pointer-events: none; }
.mapsvg.focus-dim.has-selection .dim-veil { display: block; }
.mapsvg .hl { pointer-events: none; }
.mapsvg .hl-clone .hit { display: none; }
.mapsvg .hl-glow.area { fill: var(--sel); fill-opacity: 0.16; stroke: var(--sel); stroke-opacity: 0.35; stroke-width: 10px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapsvg .hl-shape.area { fill: none; stroke: var(--sel); stroke-width: 2.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapsvg .hl-glow.line { fill: none; stroke: var(--sel); stroke-opacity: 0.3; stroke-width: 13px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .hl-shape.line { fill: none; stroke: var(--sel); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .hl-shape:not(.area):not(.line) { fill: var(--sel); fill-opacity: 0.25; stroke: var(--sel); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mapsvg .hl-ring { fill: none; stroke: var(--sel); stroke-width: 2.6; }
.mapsvg .hl-ring-outer { fill: var(--sel); fill-opacity: 0.2; stroke: none; animation: mapsvg-pulse 1.6s ease-out infinite; transform-origin: 0 0; }
@keyframes mapsvg-pulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.mapsvg .hl-hov .hl-glow { stroke: var(--hov); fill: var(--hov); stroke-opacity: 0.25; fill-opacity: 0.08; }
.mapsvg .hl-hov .hl-shape { stroke: var(--hov); stroke-width: 2px; }
.mapsvg .hl-hov .hl-ring { stroke: var(--hov); stroke-width: 2; }
.mapsvg .hl-hov .hl-ring-outer { display: none; }
.mapsvg .hl-hov .hl-shape:not(.area):not(.line) { fill: var(--hov); stroke: var(--hov); }
.mapsvg .callout-leader { stroke: var(--sel); stroke-width: 1.5; fill: none; }
.mapsvg .callout-box { fill: #fff; stroke: var(--sel); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.mapsvg .callout-title { font-family: var(--ui-font); font-size: 12px; font-weight: 700; fill: #1a1a1a; }
.mapsvg .callout-sub { font-family: var(--ui-font); font-size: 9px; fill: #666; text-transform: capitalize; }
.mapsvg .el.hovered { cursor: pointer; }

/* ---- extent preview ---- */
.mapsvg .preview-mask { fill: #17110a; fill-opacity: 0.32; }
.mapsvg .preview-body { fill: var(--preview); fill-opacity: 0.06; }
.mapsvg .preview-body.draggable { cursor: move; pointer-events: all; }
.mapsvg .extent-preview.dragging .preview-body { fill-opacity: 0.14; }
.mapsvg .preview-frame { fill: none; stroke: var(--preview); stroke-width: 2px; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; }
.mapsvg .preview-corners { fill: none; stroke: var(--preview); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.mapsvg .preview-cross { fill: none; stroke: var(--preview); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mapsvg .preview-label, .mapsvg .preview-sublabel { font-family: var(--ui-font); font-weight: 700; fill: var(--preview); font-size: calc(var(--upp) * 13); paint-order: stroke fill; stroke: #fff; stroke-width: calc(var(--upp) * 4); stroke-linejoin: round; transform: translate(calc(var(--x) + var(--dx, 0) * var(--upp)), calc(var(--y) + var(--dy, 0) * var(--upp))); }
.mapsvg .preview-sublabel { font-weight: 400; font-size: calc(var(--upp) * 11); fill: #333; }
.mapsvg .preview-handle { cursor: nwse-resize; pointer-events: all; }
.mapsvg .preview-handle.handle-ne, .mapsvg .preview-handle.handle-sw { cursor: nesw-resize; }
.mapsvg .preview-handle .hit { fill: transparent; stroke: none; pointer-events: all; }
.mapsvg .handle-box { fill: #fff; stroke: var(--preview); stroke-width: 2; }

/* ---- symbol mode: flat GIS look, no glyph scatter ---- */
.mapsvg.mode-symbol { --paper: #f4f2ec; --paper-light: #ffffff; --sea: #b9d1e5; --land: #e6e1d3; --water-ink: #2f6fa8; --water-fill: #9dc3e2; --forest: #86ad6a; --forest-edge: #5f8a48; --farmland: #e9dea1; --building: #d9d3c4; --room: #f2f0ea; --rock: #5a544c; --label-font: 'Inter', system-ui, sans-serif; }
.mapsvg.mode-symbol .glyphs { display: none; }
.mapsvg.mode-symbol .decor.biome path { fill-opacity: 0.85; }
.mapsvg.mode-symbol .land-fill, .mapsvg.mode-symbol .region-land { stroke: #6f6a5f; stroke-width: 1px; }
.mapsvg.mode-symbol .coast-glow { display: none; }
.mapsvg.mode-symbol .terrain-fill { fill-opacity: 1; stroke: #8b8478; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mapsvg.mode-symbol .terrain-mountains { fill: #c8c1b3; } .mapsvg.mode-symbol .terrain-hills { fill: #ddd6c5; }
.mapsvg.mode-symbol .ridge { stroke: #5c554b; stroke-opacity: 0.8; stroke-width: 2px; }
.mapsvg.mode-symbol .forest-fill { fill-opacity: 0.85; }
.mapsvg.mode-symbol .kingdom-fill { fill-opacity: 0.22; }
.mapsvg.mode-symbol .kingdom-border { stroke-dasharray: none; stroke-width: 2px; stroke-opacity: 0.9; }
.mapsvg.mode-symbol .lbl { font-family: var(--ui-font); font-style: normal; }
.mapsvg.mode-symbol .lbl-huge, .mapsvg.mode-symbol .lbl-big { font-weight: 700; fill: #4a463f; }
.mapsvg.mode-symbol .halo { fill: #fff; }
.mapsvg.mode-symbol .settlement .body { fill: #fff; stroke: #111; stroke-width: 2; }
.mapsvg.mode-symbol .settlement .inner { fill: #111; }
.mapsvg.mode-symbol .settlement.capital .body { fill: #ffe9a8; }
.mapsvg.mode-symbol .poi .body { stroke-width: 1.5; }
.mapsvg.mode-symbol .poi-ruin .body { fill: #b58a5a; stroke: #5a3d1e; } .mapsvg.mode-symbol .poi-cave .body { fill: #4a4a4a; stroke: #222; }
.mapsvg.mode-symbol .poi-mine .body { stroke: #c2641d; } .mapsvg.mode-symbol .poi-shrine .body { stroke: #c79a00; }
.mapsvg.mode-symbol .poi-tower .body { fill: #7a8aa0; stroke: #2e3a4d; } .mapsvg.mode-symbol .poi-lair .body { fill: #e0433c; stroke: #7a1410; }
.mapsvg.mode-symbol .poi-spring .body, .mapsvg.mode-symbol .poi-waterfall .body { fill: #6fb0e8; stroke: #1e5c95; }
.mapsvg.mode-symbol .road-major { stroke: #7a3b12; stroke-width: 2.6px; } .mapsvg.mode-symbol .road-minor { stroke: #9a5a2a; } .mapsvg.mode-symbol .road-trail { stroke: #9a5a2a; }
.mapsvg.mode-symbol .road-casing { stroke: #fff; }
.mapsvg.mode-symbol .river { stroke: #2f6fa8; }
.mapsvg.mode-symbol .building { stroke: #55504a; }
.mapsvg.mode-symbol .wall { stroke: #222; }
.mapsvg.mode-symbol .hex-line { stroke: #2f6fa8; stroke-opacity: 0.3; }

/* ---- declutter helpers a design may toggle ---- */
.mapsvg.no-glyphs .glyphs { display: none; }
.mapsvg.hide-minor-labels .lbl-hamlet, .mapsvg.hide-minor-labels .lbl-village, .mapsvg.hide-minor-labels .lbl-point { display: none; }