/* map.css – utseendet för den handritade världskartan (worldmap.js).
   Alla klasser har prefixet .wm-. Färgerna kommer från spelets CSS-variabler
   (--paper, --sea, --land, ...) med reservvärden, så ljust/mörkt läge följer med. */

.wm-bg {
  --wm-ink: var(--ink, #3a2e22);
  --wm-ink-soft: var(--ink-soft, #6b5a46);
  --wm-paper: var(--paper, #f6ecd6);
  --wm-paper2: var(--paper-2, #efe0bd);
  --wm-sea: var(--sea, #bfdad6);
  --wm-land: var(--land, #e9c98a);
  --wm-edge: var(--land-edge, #b68a4a);
  --wm-accent: var(--accent, #c8452b);
  --wm-accent2: var(--accent-2, #2f6f6a);
  /* tema-beroende nyanser (ljust läge) */
  --wm-coast: var(--wm-ink);
  --wm-halo: #ffffff;
  --wm-halo-o: .12;
  --wm-vig: #5b4a30;
  --wm-vig-o: .14;
  --wm-deco-fill: var(--wm-paper);
  --wm-deco-ink: var(--wm-ink);
  --wm-tree: var(--wm-accent2);
  --wm-title: var(--wm-accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wm-bg {
    --wm-coast: var(--land-edge, #c9a05c);
    --wm-halo: #8fd0c8;
    --wm-halo-o: .10;
    --wm-vig: #000000;
    --wm-vig-o: .38;
    --wm-deco-fill: var(--paper-2, #35291d);
    --wm-deco-ink: var(--land-edge, #c9a05c);
    --wm-tree: #6f9a58;
  }
  :root:not([data-theme="light"]) .wm-night { display: inline; }
}
:root[data-theme="dark"] .wm-bg {
  --wm-coast: var(--land-edge, #c9a05c);
  --wm-halo: #8fd0c8;
  --wm-halo-o: .10;
  --wm-vig: #000000;
  --wm-vig-o: .38;
  --wm-deco-fill: var(--paper-2, #35291d);
  --wm-deco-ink: var(--land-edge, #c9a05c);
  --wm-tree: #6f9a58;
}
.wm-night { display: none; }
:root[data-theme="dark"] .wm-night { display: inline; }

/* ---------- hav ---------- */
.wm-sea { fill: var(--wm-sea); }
.wm-vig0 { stop-color: var(--wm-vig); stop-opacity: 0; }
.wm-vig1 { stop-color: var(--wm-vig); stop-opacity: var(--wm-vig-o); }
.wm-vignette { fill: url(#wm-vig); pointer-events: none; }
.wm-speck { fill: none; stroke: var(--wm-ink-soft); stroke-width: 1.1; stroke-linecap: round; opacity: .22; }
.wm-grid { fill: none; stroke: var(--wm-ink-soft); stroke-width: .6; stroke-dasharray: 2 6; opacity: .3; }
.wm-grid-main { fill: none; stroke: var(--wm-ink-soft); stroke-width: .8; stroke-dasharray: 7 4 1.5 4; opacity: .42; }
.wm-grid-trop { fill: none; stroke: var(--wm-ink-soft); stroke-width: .6; stroke-dasharray: 3 5; opacity: .36; }
.wm-gridtxt { font: 700 12.5px 'Caveat', cursive; fill: var(--wm-ink-soft); opacity: .8; }
.wm-wave { fill: none; stroke: var(--wm-ink-soft); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; opacity: .38; }
.wm-star { fill: #f6e6b4; opacity: .85; }

/* ---------- land ---------- */
.wm-halo1, .wm-halo2, .wm-halo3 { fill: none; stroke: var(--wm-halo); stroke-opacity: var(--wm-halo-o); stroke-linejoin: round; }
.wm-halo1 { stroke-width: 7; }
.wm-halo2 { stroke-width: 15; }
.wm-halo3 { stroke-width: 26; }
.wm-hatchband { fill: none; stroke: url(#wm-hatch); stroke-width: 9; stroke-linejoin: round; opacity: .55; }
.wm-hatchline { stroke: var(--wm-coast); stroke-width: .65; fill: none; }
.wm-coast { fill: none; stroke: var(--wm-coast); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.wm-land-fill { fill: var(--wm-land); stroke: none; }
.wm-shade { fill: none; stroke: var(--wm-edge); stroke-width: 11; stroke-linejoin: round; opacity: .38; }
.wm-shade-dots { fill: none; stroke: url(#wm-stipple); stroke-width: 22; stroke-linejoin: round; opacity: .55; }
.wm-dot { fill: var(--wm-edge); }
.wm-water { fill: var(--wm-sea); stroke: var(--wm-coast); stroke-width: 1.1; stroke-linejoin: round; }

/* ---------- relief ---------- */
.wm-mtn { fill: var(--wm-paper); fill-opacity: .55; stroke: var(--wm-edge); stroke-width: .95; stroke-linejoin: round; stroke-linecap: round; }
:root[data-theme="dark"] .wm-mtn { fill: var(--wm-land); fill-opacity: .9; stroke: #e8c585; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm-mtn { fill: var(--wm-land); fill-opacity: .9; stroke: #e8c585; } }
.wm-mtn-shade { fill: none; stroke: var(--wm-edge); stroke-width: .6; stroke-linecap: round; opacity: .8; }
.wm-tree { fill: var(--wm-tree); fill-opacity: .6; stroke: var(--wm-tree); stroke-width: .5; stroke-linejoin: round; }
.wm-sanddot { fill: none; stroke: var(--wm-edge); stroke-width: 1.3; stroke-linecap: round; opacity: .55; }
.wm-dune { fill: none; stroke: var(--wm-edge); stroke-width: .8; stroke-linecap: round; opacity: .6; }

/* ---------- namn ---------- */
.wm-ocean { font: italic 500 15px 'Fraunces', Georgia, serif; letter-spacing: .3em; fill: var(--wm-ink-soft); opacity: .6; text-transform: none; }
.wm-cont { font: 600 20px 'Fraunces', Georgia, serif; letter-spacing: .3em; fill: var(--wm-ink); opacity: .22; }

/* ---------- dekor: fartyg, valar, odjur ---------- */
.wm-deco { pointer-events: none; }
.wm-deco .wm-hull, .wm-deco .wm-sail { fill: var(--wm-deco-fill); stroke: var(--wm-deco-ink); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.wm-deco .wm-line { fill: none; stroke: var(--wm-deco-ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.wm-deco .wm-flag { fill: var(--wm-accent); stroke: var(--wm-deco-ink); stroke-width: .8; stroke-linejoin: round; }
.wm-deco .wm-eye { fill: var(--wm-deco-ink); }
.wm-deco .wm-wake { fill: none; stroke: var(--wm-deco-ink); stroke-width: .9; stroke-linecap: round; opacity: .55; }
.wm-deco .wm-spout { fill: none; stroke: var(--wm-deco-ink); stroke-width: 1; stroke-linecap: round; opacity: .7; }

/* ---------- kompassros ---------- */
.wm-compass .wm-ring { fill: var(--wm-paper); fill-opacity: .55; stroke: var(--wm-deco-ink); stroke-width: 1.2; }
.wm-compass .wm-ring2 { fill: none; stroke: var(--wm-deco-ink); stroke-width: .8; opacity: .6; }
.wm-compass .wm-cdark { fill: var(--wm-deco-ink); stroke: var(--wm-deco-ink); stroke-width: .6; stroke-linejoin: round; }
.wm-compass .wm-clight { fill: var(--wm-deco-fill); stroke: var(--wm-deco-ink); stroke-width: .6; stroke-linejoin: round; }
.wm-compass .wm-fleur { fill: var(--wm-accent); stroke: var(--wm-deco-ink); stroke-width: .8; }
.wm-compass-txt { font: 700 14px 'Fraunces', Georgia, serif; fill: var(--wm-deco-ink); }

/* ---------- skala ---------- */
.wm-scale .wm-sc-d { fill: var(--wm-deco-ink); }
.wm-scale .wm-sc-l { fill: var(--wm-deco-fill); }
.wm-scale .wm-sc-o { fill: none; stroke: var(--wm-deco-ink); stroke-width: 1; }
.wm-scale-txt { font: 700 14px 'Caveat', cursive; fill: var(--wm-ink); }

/* ---------- kartusch ---------- */
.wm-cartouche .wm-banner { fill: var(--wm-paper2); stroke: var(--wm-deco-ink); stroke-width: 1.8; stroke-linejoin: round; }
.wm-cartouche .wm-banner-back { fill: var(--wm-edge); fill-opacity: .55; stroke: var(--wm-deco-ink); stroke-width: 1.4; stroke-linejoin: round; }
.wm-cartouche .wm-banner-in { fill: none; stroke: var(--wm-deco-ink); stroke-width: .8; stroke-dasharray: 3 3; opacity: .7; }
.wm-cartouche .wm-line { fill: none; stroke: var(--wm-deco-ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.wm-cartouche .wm-flourish { fill: none; stroke: var(--wm-deco-ink); stroke-width: 1.1; stroke-linecap: round; opacity: .7; }
.wm-title { font: 700 40px 'Caveat', cursive; fill: var(--wm-title); }
.wm-subtitle { font: italic 500 9.5px 'Fraunces', Georgia, serif; letter-spacing: .08em; fill: var(--wm-ink-soft); }

/* ---------- ram ---------- */
.wm-frame rect { fill: none; }
.wm-frame-back { stroke: var(--wm-paper); stroke-width: 4; }
.wm-frame-rail { stroke: var(--wm-coast); stroke-width: 4; stroke-dasharray: 11 11; }
.wm-frame-o { stroke: var(--wm-coast); stroke-width: 1.8; }
.wm-frame-i { stroke: var(--wm-coast); stroke-width: .8; }

/* ---------- interaktion (enableViewport) ---------- */
svg.wm-pan { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
svg.wm-pan .pin { cursor: pointer; }
svg.wm-pan.wm-dragging, svg.wm-pan.wm-dragging .pin { cursor: grabbing; }

/* Valfritt: lägg class="wm-svg" på kartans <svg> så får pin-etiketterna pappersfärgad kontur
   (de ligger ofta över land, inte hav) */
svg.wm-svg .pin text { stroke: var(--paper, #f6ecd6); stroke-opacity: .9; }