/* ==========================================================
   settlement-map.css — Kartendarstellung

   Nach settlement.css laden: überschreibt die alten .st-map-
   Regeln. Die alten Blöcke in settlement.css darf man stehen
   lassen, sie werden hier vollständig ersetzt.

   aspect-ratio MUSS zu SData.MAP passen (14000 x 11000).
   Weicht es ab, sitzen die Nadeln neben ihren Orten — und die
   Klickumrechnung in toMap() korrigiert nur den Randversatz,
   nicht ein falsches Verhältnis.
   ========================================================== */

.st-map{
  position:relative; width:100%; aspect-ratio:14/11;
  min-height:500px; max-height:85vh;
  background:radial-gradient(ellipse at 46% 40%,#171008,#080604 78%);
  border:1px solid #4a3828; border-radius:8px; overflow:hidden;
  touch-action:none; cursor:grab; outline:none;
  box-shadow:inset 0 0 40px -10px rgba(0,0,0,.7);
}
.st-map:focus-visible{ border-color:var(--gold,#f0c040) }
.st-map.zoomed{ cursor:move }
.st-map-inner{
  position:absolute; inset:0; transform-origin:50% 50%;
  --z:1;
}
.sm-bg{ position:absolute; inset:0; width:100%; height:100%; display:block }
.st-map-fog{ display:none }   /* Vignette steckt jetzt im SVG */

/* ==========================================================
   GELÄNDE
   ========================================================== */
.sm-crest{
  fill:none; stroke:#8c7c66; stroke-width:26; stroke-linejoin:round;
  stroke-linecap:round; opacity:.6;
}
.sm-cont{
  fill:none; stroke:#6a5a44; stroke-width:9; opacity:.34;
  stroke-linecap:round;
}
.sm-wrim{ fill:none; stroke:#0e1a08; stroke-width:14; opacity:.7 }
.sm-frim{ fill:none; stroke:#241b08; stroke-width:12; opacity:.65 }
.sm-mrim{ fill:none; stroke:#0a1a16; stroke-width:16; opacity:.75 }
.sm-qrim{
  fill:none; stroke:#6b5c48; stroke-width:14; opacity:.5;
  stroke-dasharray:52 34;
}

/* Einzelbäume */
.sm-tsh{ fill:#000; opacity:.5 }
.sm-tcrown{ fill:#2c4a1e }
.sm-tcrown2{ fill:#3a6027; opacity:.9 }
.sm-ttrunk{ fill:#2a1c0e }

/* ==========================================================
   WASSER
   ========================================================== */
.sm-rglow{ stroke:#071219; opacity:.85; stroke-linecap:round }
.sm-rbank{ stroke:#0d2f3d; stroke-linecap:round }
.sm-rwater{ stroke:#1a5c76; stroke-linecap:round }
.sm-rshine{ stroke:#3e9cbb; opacity:.55; stroke-linecap:round }

.sm-lglow3{ fill:none; stroke:#071219; stroke-width:96; opacity:.4 }
.sm-lglow2{ fill:none; stroke:#0a2230; stroke-width:58; opacity:.6 }
.sm-lglow1{ fill:none; stroke:#0f3446; stroke-width:26; opacity:.85 }
.sm-lbody{ stroke:#2a7f9c; stroke-width:8; stroke-opacity:.45 }
.sm-depth{
  fill:none; stroke:#3e9cbb; stroke-width:8; opacity:.28;
  stroke-dasharray:70 46;
}
.sm-damwall{ stroke:#a89a86; stroke-width:78; stroke-linecap:round }
.sm-damtick{
  stroke:#e2d6bc; stroke-width:24; stroke-dasharray:64 54; opacity:.6;
}

/* ==========================================================
   WEGE
   ========================================================== */
.sm-rcase{ stroke:#0b0705; stroke-linecap:round }
.sm-rfill{ stroke:#5d5040; stroke-linecap:round }
.sm-rline{
  stroke:#e8d070; stroke-width:9; stroke-dasharray:120 140; opacity:.42;
}
.sm-lane{
  stroke:#463a2a; stroke-width:26; stroke-dasharray:96 74; opacity:.7;
  stroke-linecap:round;
}
.sm-railbed{ stroke:#2e2720; stroke-width:52 }
.sm-rails{
  stroke:#b8ac98; stroke-width:6; opacity:.55;
}
.sm-bridge path{ stroke:#a89a86; stroke-width:17; opacity:.85 }
.sm-blkbar{ stroke:#ae3a28; stroke-width:48; stroke-linecap:round }
.sm-blktick{
  stroke:#e8d070; stroke-width:18; stroke-dasharray:48 42; opacity:.8;
}
.sm-blkdot{ fill:#ae3a28; opacity:.32 }
.sm-block text{ fill:#c85a46 }

/* ==========================================================
   BEBAUUNG
   ========================================================== */
.sm-bshadow{ fill:#000; opacity:.55 }
.sm-bld{ fill:#4e3f2d; stroke:#2a2118; stroke-width:5 }
.sm-bld.big{ fill:#5c4b34 }
.sm-broof{ fill:#6b5740; opacity:.75 }
.sm-grave{ fill:#7c7160; opacity:.7 }
.sm-runway{ fill:#3a342a; stroke:#5a5245; stroke-width:6 }
.sm-runline{
  stroke:#c8bda4; stroke-width:8; stroke-dasharray:80 70; opacity:.6;
}

/* ==========================================================
   BESCHRIFTUNG
   ========================================================== */
.sm-bg text{
  font-family:Oswald,'Rubik',sans-serif; font-weight:500; letter-spacing:6px;
  text-anchor:middle; paint-order:stroke; stroke:#0a0604; stroke-width:11px;
  stroke-linejoin:round; pointer-events:none;
}
.sm-l{ text-anchor:start }
.sm-lbl{ font-size:162px; fill:#d4c2a2 }
.sm-tiny{ font-size:124px; fill:#8a7862; letter-spacing:6px }
.sm-wl{
  font-size:152px; fill:#57a2bd; letter-spacing:12px; font-style:italic;
  stroke-width:9px;
}
.sm-rl{ font-size:140px; fill:#c8a656; letter-spacing:10px }

/* Icons als monochrome Text-Symbole (verhindert schwarze Kästen in Opera GX) */
/* Emojis als einfarbige Vektor-Icons (sicherer in Chrome/Opera GX) */
/* Vektor-Icons statt Emojis */
/* Bild-Icons */
.sm-ico-img{
  opacity:.85; pointer-events:none;
}
.sm-yield-img{
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.st-map.detail .sm-yield-img{ opacity:.85 }
.st-map.no-labels .sm-ico-img,
.st-map.no-labels .sm-yield-img{ opacity:0 }
.st-map.detail .sm-yield{ opacity:.7 }
.st-map.no-labels .sm-lbl,
.st-map.no-labels .sm-wl,
.st-map.no-labels .sm-rl,
.st-map.no-labels .sm-yield,
.st-map.no-labels .sm-geolabels{ opacity:0 }

/* ==========================================================
   REGIONEN
   ========================================================== */
.sm-rhit{ fill:transparent; cursor:pointer }
.sm-rframe{
  fill:rgba(224,101,26,.035); stroke:rgba(224,101,26,.2);
  stroke-width:10; stroke-dasharray:66 48; pointer-events:none;
  transition:fill .18s, stroke .18s, stroke-width .18s;
}
.sm-reg.t-city .sm-rframe{
  fill:rgba(240,192,64,.06); stroke:rgba(240,192,64,.36); stroke-dasharray:none;
}
.sm-reg.t-military .sm-rframe{
  fill:rgba(208,32,32,.08); stroke:rgba(208,32,32,.48); stroke-dasharray:34 26;
}
.sm-reg.t-military .sm-lbl{ fill:#e08878 }
.sm-reg.t-swamp .sm-rframe{ stroke:rgba(53,99,86,.5) }
.sm-reg.t-ridge .sm-rframe{ stroke:rgba(140,124,102,.4) }

.sm-reg.hover .sm-rframe{
  fill:rgba(240,192,64,.12); stroke:rgba(240,192,64,.68); stroke-width:14;
}
.sm-reg.sel .sm-rframe{
  fill:rgba(240,192,64,.16); stroke:var(--gold,#f0c040); stroke-width:18;
  stroke-dasharray:none; animation:smSel 2.4s ease-in-out infinite;
}
@keyframes smSel{
  50%{ stroke-width:24; fill:rgba(240,192,64,.22) }
}
.sm-reg.hover .sm-lbl, .sm-reg.sel .sm-lbl{ fill:var(--gold,#f0c040) }
.sm-reg.hover .sm-yield, .sm-reg.sel .sm-yield{ opacity:.95 }

.sm-dot{ fill:#241c14; stroke:#4a3828; stroke-width:6; pointer-events:none }
.sm-dot.on{ fill:#c05030; stroke:#e88060 }

.sm-heat{
  fill:#d02020; opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.st-map.heat .sm-heat{ opacity:calc(var(--hd) * 0.34) }
.st-map.heat .sm-rframe{ stroke-opacity:.15 }

/* ==========================================================
   ZIERWERK
   ========================================================== */
.sm-cartbg{ fill:rgba(9,6,4,.8); stroke:rgba(212,200,176,.22); stroke-width:8 }
.sm-cartrim{ fill:none; stroke:rgba(212,200,176,.4); stroke-width:6 }
.sm-title{ font-size:344px; fill:#f0c040; letter-spacing:17px }
.sm-sub{ font-size:140px; fill:#b09880; letter-spacing:9px }
.sm-rule{ stroke:rgba(212,200,176,.34); stroke-width:7 }
.sm-ring{ fill:rgba(9,6,4,.7); stroke:rgba(212,200,176,.4); stroke-width:12 }
.sm-ring2{
  fill:none; stroke:rgba(212,200,176,.2); stroke-width:8;
  stroke-dasharray:44 34;
}
.sm-rose{ fill:rgba(212,200,176,.18); stroke:rgba(212,200,176,.4); stroke-width:6 }
.sm-n{ fill:#c04030; stroke:#e2d6bc; stroke-width:9 }
.sm-scalebg{ fill:rgba(9,6,4,.7); stroke:rgba(212,200,176,.2); stroke-width:6 }
.sm-scalebar{ stroke:#e2d6bc; stroke-width:15; fill:none }
.sm-scalefill{ fill:#e2d6bc; opacity:.85 }
.sm-grain{ pointer-events:none }
.sm-vig{ pointer-events:none }

/* ==========================================================
   NADELN UND MARKER
   ========================================================== */
.st-pin{
  position:absolute; z-index:14; cursor:pointer;
  transform:translate(-50%,-50%) scale(var(--z,1));
  transform-origin:50% 50%;
}
.st-pin b{
  width:28px; height:28px; display:grid; place-items:center; border-radius:5px;
  background:linear-gradient(160deg,#1a120a,#0a0604);
  border:2px solid var(--sc,#8fae4e);
  font-family:Oswald,sans-serif; font-size:.6rem; color:var(--sc,#8fae4e);
  box-shadow:0 0 12px -2px var(--sc,#8fae4e), 0 3px 7px rgba(0,0,0,.8);
  transition:transform .15s, box-shadow .15s;
}
.st-pin::after{
  content:''; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  width:0; height:0; border:5px solid transparent;
  border-top-color:var(--sc,#8fae4e); opacity:.8;
}
.st-pin:hover b{ transform:scale(1.22); box-shadow:0 0 22px -2px var(--sc,#8fae4e) }
.st-pin em{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:8px; font-size:.58rem; font-style:normal; white-space:nowrap;
  color:var(--sc,#8fae4e); pointer-events:none;
  background:rgba(8,5,3,.8); padding:1px 6px; border-radius:3px;
  border:1px solid rgba(255,255,255,.08);
}
.st-pin.mine{ z-index:20 }
.st-pin.mine b{
  border-color:var(--gold,#f0c040); color:var(--gold,#f0c040);
  animation:stBeat 2.4s ease-in-out infinite;
}
.st-pin.mine::after{ border-top-color:var(--gold,#f0c040) }
@keyframes stBeat{
  50%{ box-shadow:0 0 26px 0 var(--gold,#f0c040), 0 3px 7px rgba(0,0,0,.8) }
}
.st-pin.mine::before{
  content:''; position:absolute; left:50%; top:50%; width:28px; height:28px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid var(--gold,#f0c040);
  animation:stRadar 3s ease-out infinite; pointer-events:none;
}
@keyframes stRadar{
  0%{ opacity:.7; transform:translate(-50%,-50%) scale(1) }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(4.5) }
}
.st-pin.shield b::after{
  content:'\1F6E1'; position:absolute; top:-10px; right:-10px; font-size:.55rem;
}
.st-pin:not(.mine):hover b{ border-color:#e05040; color:#e05040 }

.st-march{
  position:absolute; z-index:18; pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--z,1));
  display:grid; place-items:center;
}
.st-march-ico{
  font-size:.9rem; filter:drop-shadow(0 2px 4px #000);
  animation:stStep 1.1s ease-in-out infinite;
}
@keyframes stStep{ 50%{ transform:translateY(-3px) } }
.st-march-ring{
  position:absolute; width:22px; height:22px; border-radius:50%;
  border:1px dashed var(--gold,#f0c040); opacity:.55;
  animation:stSpin 6s linear infinite;
}
@keyframes stSpin{ to{ transform:rotate(360deg) } }
.st-march.work .st-march-ring{
  border-style:solid; animation:stWork 1.6s ease-in-out infinite;
}
@keyframes stWork{ 50%{ transform:scale(1.35); opacity:.2 } }
.st-march-bar{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:6px; width:26px; height:3px; border-radius:2px;
  background:rgba(0,0,0,.7); overflow:hidden;
}
.st-march-bar i{
  display:block; height:100%; background:var(--gold,#f0c040);
}

.st-route{
  position:absolute; inset:0; z-index:11; pointer-events:none;
  width:100%; height:100%;
}
.st-route line{
  stroke:var(--gold,#f0c040); stroke-width:.24; opacity:.42;
  stroke-dasharray:1.4 1.6; animation:stDash 1.1s linear infinite;
}
.st-route line.back{ stroke:#7ac850 }
@keyframes stDash{ to{ stroke-dashoffset:-3 } }
.st-map.no-routes .st-route,
.st-map.no-routes .st-march{ display:none }

.st-pick-ring{
  position:absolute; z-index:12; transform:translate(-50%,-50%);
  width:calc(var(--r) * 2); aspect-ratio:1;
  border:2px dashed var(--gold,#f0c040); border-radius:50%;
  background:radial-gradient(circle,rgba(240,192,64,.16),rgba(240,192,64,.03) 70%);
  pointer-events:none; animation:stRing 2.6s ease-in-out infinite;
}
@keyframes stRing{ 50%{ transform:translate(-50%,-50%) scale(1.05) } }
.st-pick-x{
  position:absolute; z-index:13; transform:translate(-50%,-50%) scale(var(--z,1));
  color:var(--gold,#f0c040); font-size:1.1rem; pointer-events:none;
  filter:drop-shadow(0 0 5px #000);
}

/* ==========================================================
   BEDIENLEISTE
   ========================================================== */
.st-map-ui{
  position:absolute; right:9px; top:9px; z-index:36;
  display:flex; flex-direction:column; gap:4px; align-items:stretch;
}
.st-map-ui button{
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(10,6,4,.9); border:1px solid #4a3828;
  color:var(--gold,#f0c040); border-radius:6px; cursor:pointer;
  font-size:.92rem; line-height:1; backdrop-filter:blur(4px);
  transition:border-color .15s, background .15s, color .15s, transform .1s;
}
.st-map-ui button:hover{
  border-color:var(--gold,#f0c040); background:rgba(34,22,8,.95);
}
.st-map-ui button:active{ transform:scale(.92) }
.st-map-ui button.off{ color:#5a4e3e; border-color:#332a20 }
.st-map-ui .sep{
  height:1px; background:#4a3828; margin:3px 2px;
}
.st-map-ui span[data-zlbl]{
  font-family:var(--mono,monospace); font-size:.55rem; text-align:center;
  color:var(--muted,#a89078); background:rgba(10,6,4,.8);
  border:1px solid #332a20; border-radius:4px; padding:2px 0;
}

.st-map-hint{ display:none }

/* ==========================================================
   GEBIETSKARTE
   ========================================================== */
.st-map-card{
  position:absolute; left:9px; right:9px; bottom:9px; z-index:38;
  background:linear-gradient(180deg,rgba(22,15,8,.97),rgba(10,6,4,.97));
  border:1px solid #6a5a3a; border-left:4px solid var(--gold,#f0c040);
  border-radius:6px; padding:11px 13px;
  backdrop-filter:blur(8px); box-shadow:0 8px 28px -8px #000;
  animation:smCardIn .25s ease both;
}
@keyframes smCardIn{ from{ opacity:0; transform:translateY(14px) } }
@media(min-width:700px){
  .st-map-card{ right:auto; max-width:380px }
}
.st-mc-top{ display:flex; align-items:flex-start; gap:10px }
.st-mc-ico{ font-size:1.7rem; flex:0 0 auto; line-height:1 }
.st-mc-id{ flex:1; min-width:0 }
.st-mc-id b{
  display:block; font-family:Oswald,sans-serif; letter-spacing:1.4px;
  color:var(--gold,#f0c040); font-size:.98rem; text-transform:uppercase;
}
.st-mc-id i{
  display:block; font-family:var(--mono,monospace); font-size:.62rem;
  font-style:normal; color:var(--muted,#a89078); margin-top:2px;
}
.st-mc-x{
  background:none; border:1px solid #4a3828; color:var(--muted,#a89078);
  border-radius:4px; width:26px; height:26px; cursor:pointer; flex:0 0 auto;
}
.st-mc-x:hover{ border-color:#d02020; color:#d02020 }
.st-mc-note{
  font-size:.74rem; line-height:1.5; color:#c0b39c; margin:8px 0 0;
}
.st-mc-facts{
  display:flex; gap:5px; flex-wrap:wrap; margin-top:8px;
}
.st-mc-facts span{
  font-family:var(--mono,monospace); font-size:.62rem; padding:3px 7px;
  background:rgba(0,0,0,.4); border:1px solid #4a3828; border-radius:11px;
}
.st-mc-facts span.d1{ border-color:#3a5a28; color:#8ac860 }
.st-mc-facts span.d2, .st-mc-facts span.d3{ border-color:#6a5a28; color:#e0b060 }
.st-mc-facts span.d4, .st-mc-facts span.d5{ border-color:#7a2828; color:#e08070 }
.st-mc-miss{
  display:flex; gap:4px; flex-wrap:wrap; margin-top:8px;
}
.st-mc-miss span{
  font-size:.66rem; padding:3px 8px; background:rgba(240,192,64,.08);
  border:1px solid rgba(240,192,64,.24); border-radius:11px;
  color:#d8c9a8;
}
.st-mc-act{ display:flex; gap:6px; margin-top:10px }
.st-mc-act .st-btn{ flex:1 }

/* ==========================================================
   LEGENDE
   ========================================================== */
.st-map-legend{
  position:absolute; left:9px; bottom:9px; z-index:33;
  background:rgba(10,6,4,.88); border:1px solid #332a20; border-radius:6px;
  padding:8px 11px; font-family:var(--mono,monospace); font-size:.56rem;
  color:var(--muted,#a89078); line-height:1.7; max-width:44%;
  backdrop-filter:blur(4px);
}
.st-map-legend b{ color:var(--gold,#f0c040); display:block; margin-bottom:3px }
.st-map-legend i{ font-style:normal; margin-right:5px }
.st-map.has-card .st-map-legend{ display:none }

/* ==========================================================
   HANDY
   ========================================================== */
@media(max-width:760px){
 .st-map{ aspect-ratio:14/11; height:auto; min-height:450px; max-height:85vh }
  .st-map-hint{ display:none }
  .st-map-legend{ display:none }
  .sm-lbl{ font-size:182px }
  .sm-ico{ font-size:232px }
  .st-mc-note{ font-size:.7rem }
  .st-map-ui button{ width:34px; height:34px; font-size:.82rem }
}

@media(prefers-reduced-motion:reduce){
  .sm-reg.sel .sm-rframe, .st-pin.mine b, .st-pin.mine::before,
  .st-route line, .st-march-ico, .st-march-ring, .st-pick-ring,
  .st-map-card{ animation:none !important }
}