/* ==========================================================
   settlement.css — Dragonfall County, Handy zuerst

   GRUNDSATZ: Auf schmalen Schirmen wird die Seitenleiste zu
   einer unteren Reiterleiste. Ein 210-px-Menü links kostet auf
   einem 360-px-Gerät 58 % der Breite — dann bricht jedes
   Kartenraster auf eine Spalte und die Seite wird zur Kolonne.
   ========================================================== */

/* ---------- Kopf ---------- */
.st-pda{
  background:linear-gradient(180deg,#1e1509 0%,#0f0a06 100%);
  border:1px solid #4a3828; border-radius:8px;
  overflow:hidden; margin-bottom:14px; position:relative;
}
.st-pda::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px);
  opacity:.45;
}
.st-top{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:6px 12px; background:#0a0604; border-bottom:1px solid #4a3828;
  font-family:var(--mono,monospace); font-size:.62rem; letter-spacing:1.4px;
  color:var(--gold,#f0c040); text-transform:uppercase;
}
.st-sync{ color:var(--muted,#a89078); white-space:nowrap }
.st-head{ padding:14px }
.st-head h1{
  font-family:Oswald,sans-serif; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gold,#f0c040); margin:0 0 6px; font-size:1.3rem;
}
.st-sub{
  font-family:var(--mono,monospace); font-size:.78rem; line-height:1.55;
  color:var(--muted,#a89078); margin:0;
}

.st-idbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-left:4px solid var(--sc,#8fae4e); padding-left:12px }
.st-crest{
  width:54px; height:54px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--sc,#8fae4e),#0a0604);
  border:2px solid var(--sc,#8fae4e); border-radius:6px;
  box-shadow:0 0 16px -5px var(--sc,#8fae4e);
  animation:stCrest 4s ease-in-out infinite;
}
@keyframes stCrest{ 50%{ box-shadow:0 0 26px -4px var(--sc,#8fae4e) } }
.st-crest b{ font-family:Oswald,sans-serif; font-size:1.1rem; color:#0a0604 }
.st-id{ flex:1 1 200px; min-width:0 }
.st-id h1{ margin:0; font-size:1.25rem }
.st-id-meta{ font-family:var(--mono,monospace); font-size:.68rem;
  color:var(--muted,#a89078); margin-top:3px }
.st-id-stats{ display:flex; gap:7px; flex-wrap:wrap }
.st-chip{
  background:rgba(0,0,0,.35); border:1px solid #4a3828; border-radius:5px;
  padding:6px 11px; text-align:center; min-width:78px;
}
.st-chip span{ font-size:.95rem; display:block }
.st-chip b{ display:block; font-family:Oswald,sans-serif; font-size:1rem;
  color:var(--gold,#f0c040) }
.st-chip i{ font-family:var(--mono,monospace); font-size:.52rem; letter-spacing:.8px;
  color:var(--muted,#a89078); font-style:normal }

/* Ressourcen: waagerecht scrollbar statt umbrechend — zwölf
   Werte in zwei Zeilen kosten auf dem Handy die halbe Höhe. */
.st-resbar{
  display:flex; gap:5px; margin-top:12px; padding:10px 0 2px;
  border-top:1px dashed #4a3828; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.st-resbar::-webkit-scrollbar{ display:none }
.st-res{
  display:flex; align-items:center; gap:5px; padding:5px 10px; flex:0 0 auto;
  background:#0a0604; border:1px solid #4a3828; border-radius:16px;
  font-family:var(--mono,monospace); font-size:.74rem;
  transition:border-color .2s;
}
.st-res b{ color:var(--gold,#f0c040) }
.st-res.up{ animation:stResUp .8s ease }
@keyframes stResUp{
  0%{ border-color:var(--ok,#50a830); box-shadow:0 0 12px -4px var(--ok,#50a830) }
  100%{ border-color:#4a3828 }
}

/* ---------- Layout ---------- */
.st-layout{ display:grid; grid-template-columns:190px 1fr; gap:14px }
.st-side{
  background:#140e08; border:1px solid #4a3828; border-radius:8px;
  padding:10px; align-self:start; position:sticky; top:66px;
}
.st-side h3{ font-family:var(--mono,monospace); font-size:.6rem; letter-spacing:1.8px;
  color:var(--muted,#a89078); margin:0 0 8px; text-transform:uppercase }
.st-side button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:0; border-left:3px solid transparent;
  color:var(--txt,#d8d0c4); padding:9px 9px; cursor:pointer;
  font-family:var(--mono,monospace); font-size:.75rem; border-radius:0 4px 4px 0;
  transition:background .15s, border-color .15s, color .15s;
}
.st-side button:hover{ background:rgba(240,192,64,.06) }
.st-side button.active{
  background:rgba(240,192,64,.1); border-left-color:var(--gold,#f0c040);
  color:var(--gold,#f0c040);
}
.st-side .ico{ font-size:.95rem } .st-side .lbl{ flex:1 }
.st-badge{ background:#c62828; color:#fff; border-radius:9px; padding:0 6px;
  font-size:.62rem; font-weight:700 }
.st-badge.bad{ animation:stPulse 1.3s infinite }
@keyframes stPulse{ 50%{ box-shadow:0 0 10px #c62828 } }

.st-main{ min-width:0 }
.st-wrap{ display:grid; gap:14px; grid-template-columns:1fr 1fr }

.st-panel{
  background:#140e08; border:1px solid #4a3828; border-radius:8px;
  padding:14px; margin-bottom:14px;
  animation:none;
}
.st-panel h2{
  font-family:Oswald,sans-serif; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gold,#f0c040); font-size:.95rem; margin:0 0 10px;
}
.st-panel-head{ display:flex; justify-content:space-between; align-items:center;
  gap:8px; flex-wrap:wrap; margin-bottom:10px }
.st-panel-head h2{ margin:0 }
.st-panel-map{ padding:10px }

.st-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px }
.st-kv{ display:flex; justify-content:space-between; gap:8px; padding:6px 0;
  border-bottom:1px dashed #34281c; font-family:var(--mono,monospace); font-size:.76rem }
.st-kv span{ color:var(--muted,#a89078) }

.st-note{
  background:rgba(240,192,64,.06); border-left:3px solid var(--gold,#f0c040);
  padding:9px 12px; border-radius:0 4px 4px 0; margin:10px 0;
  font-family:var(--mono,monospace); font-size:.74rem; line-height:1.55;
}
.st-note.bad{ background:rgba(208,32,32,.08); border-left-color:#d02020 }
.st-alarm{
  border-left:4px solid #d02020; background:rgba(208,32,32,.09);
  padding:11px 14px; margin-bottom:9px; border-radius:0 5px 5px 0;
  font-family:var(--mono,monospace); font-size:.78rem; line-height:1.55;
  animation:stAlarm 2.4s ease-in-out infinite;
}
@keyframes stAlarm{ 50%{ background:rgba(208,32,32,.15) } }
.st-alarm.warn{ border-left-color:#f0a030; background:rgba(240,160,48,.08);
  animation:none }

/* ---------- Knöpfe ---------- */
.st-btn{
  background:#1a1208; border:1px solid #4a3828; color:var(--txt,#d8d0c4);
  padding:9px 13px; border-radius:4px; cursor:pointer;
  font-family:var(--mono,monospace); font-size:.74rem; letter-spacing:.4px;
  transition:transform .12s, border-color .15s, color .15s, box-shadow .15s;
  min-height:38px;
}
.st-btn:hover:not(:disabled){ border-color:var(--gold,#f0c040);
  color:var(--gold,#f0c040) }
.st-btn:active:not(:disabled){ transform:scale(.96) }
.st-btn.primary{
  background:linear-gradient(180deg,#3e2c10,#1a1208);
  border-color:var(--gold,#f0c040); color:var(--gold,#f0c040); font-weight:700;
}
.st-btn.primary:hover:not(:disabled){ box-shadow:0 0 14px -4px var(--gold,#f0c040) }
.st-btn.sm{ padding:6px 10px; font-size:.68rem; min-height:32px }
.st-btn.full{ width:100% }
.st-btn:disabled{ opacity:.38; cursor:not-allowed }
.st-btn i{ font-style:normal; opacity:.7 }
.st-mini{
  background:none; border:1px solid #4a3828; color:var(--muted,#a89078);
  border-radius:4px; width:30px; height:30px; cursor:pointer; flex:0 0 auto;
  transition:border-color .15s, color .15s;
}
.st-mini:hover{ border-color:#d02020; color:#d02020 }

.st-req-row{ display:flex; align-items:center; gap:9px; padding:9px 11px;
  border:1px solid #4a3828; border-radius:5px; margin-bottom:7px;
  font-family:var(--mono,monospace); font-size:.76rem }
.st-req-row.ok{ border-left:3px solid var(--ok,#50a830) }
.st-req-row.bad{ border-left:3px solid #d02020 }
.st-req-row b{ flex:1 } .st-req-row i{ color:var(--muted,#a89078); font-style:normal }

/* ---------- Siedler ---------- */
.st-npcs{ display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
.st-npc{
  background:linear-gradient(180deg,#1c1409,#0f0a06);
  border:1px solid #4a3828; border-radius:6px; padding:11px;
  position:relative; overflow:hidden; transition:border-color .2s, transform .15s;
}
.st-npc:hover{ border-color:#6a5a3a; transform:translateY(-2px) }
.st-npc.busy{ border-color:#6a5a28 }
.st-npc.hurt::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 82% 0%,rgba(208,32,32,.16),transparent 58%);
}
.st-npc-top{ display:flex; align-items:center; gap:9px; margin-bottom:9px }
.st-npc-face{ width:40px; height:40px; display:grid; place-items:center;
  font-size:1.3rem; background:#0a0604; border:1px solid #4a3828;
  border-radius:50%; flex:0 0 auto }
.st-npc-id{ flex:1; min-width:0 }
.st-npc-id b{ display:block; font-size:.9rem }
.st-npc-id i{ font-family:var(--mono,monospace); font-size:.64rem;
  font-style:normal; color:var(--muted,#a89078) }
.st-traits{ display:flex; gap:3px; flex-wrap:wrap; margin-top:3px }
.st-traits span{ font-size:.56rem; padding:1px 5px; border-radius:8px;
  background:rgba(240,192,64,.1); color:var(--gold,#f0c040);
  font-family:var(--mono,monospace) }
.st-npc-hp{ text-align:center; flex:0 0 auto }
.st-npc-hp b{ display:block; font-family:Oswald,sans-serif; font-size:1rem }
.st-npc-hp i{ font-size:.5rem; color:var(--muted,#a89078); font-style:normal }

.st-stats{ display:grid; gap:3px; margin-bottom:9px }
.st-stat{ display:flex; align-items:center; gap:6px; font-size:.66rem }
.st-stat-bar{ flex:1; height:5px; background:#0a0604; border-radius:3px;
  overflow:hidden }
.st-stat-bar i{ display:block; height:100%; background:#6a7a3a;
  transition:width .5s ease }
.st-stat.spec .st-stat-bar i{
  background:linear-gradient(90deg,var(--gold,#f0c040),#e0651a) }
.st-stat.spec b{ color:var(--gold,#f0c040) }
.st-stat b{ width:15px; text-align:right; font-family:var(--mono,monospace) }

.st-needs{ display:flex; gap:5px; margin-bottom:9px }
.st-need{ flex:1; display:flex; align-items:center; gap:4px; font-size:.66rem }
.st-need i{ display:block; height:5px; border-radius:3px; background:currentColor;
  flex:1; min-width:2px; transition:width .5s ease }
.st-need.ok{ color:var(--ok,#50a830) }
.st-need.warn{ color:#f0a030 }
.st-need.bad{ color:#d02020; animation:stBlink 1.6s infinite }
@keyframes stBlink{ 50%{ opacity:.5 } }

.st-npc-task{ margin-bottom:9px }
.st-npc-acts{ display:grid; grid-template-columns:1fr 1fr; gap:5px }
.st-npc-acts .primary{ grid-column:1/-1 }
.st-task-run{ display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:rgba(240,160,48,.07); border:1px solid #6a5a28; border-radius:5px }
.st-task-run span{ font-size:1.05rem }
.st-task-run b{ display:block; font-size:.76rem }
.st-task-run i{ font-family:var(--mono,monospace); font-size:.64rem;
  font-style:normal; color:var(--muted,#a89078) }
.st-task-run div{ flex:1; min-width:0 }
.st-npc-gear{ display:flex; gap:5px; align-items:center }
.st-gear-slot{ flex:1; padding:5px 7px; border:1px solid #34281c; border-radius:4px;
  font-family:var(--mono,monospace); font-size:.62rem; color:var(--muted,#a89078);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st-gear-slot.set{ border-color:#6a7a3a; color:var(--txt,#d8d0c4) }

/* ---------- Projektkarten ---------- */
.st-cards{ display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.st-card{
  background:#0f0a06; border:1px solid #4a3828; border-radius:6px; padding:11px;
  display:flex; flex-direction:column; gap:7px; transition:border-color .2s;
}
.st-card:hover{ border-color:#6a5a3a }
.st-card.done{ border-color:#3a5a28; background:rgba(80,168,48,.05) }
.st-card.locked{ opacity:.5 }
.st-card.running{ border-color:var(--gold,#f0c040);
  box-shadow:0 0 16px -8px var(--gold,#f0c040) }
.st-card-h{ display:flex; align-items:center; gap:7px }
.st-card-h span{ font-size:1.2rem }
.st-card-h b{ flex:1; font-size:.84rem }
.st-card-h em{ font-family:var(--mono,monospace); font-size:.6rem;
  font-style:normal; color:var(--muted,#a89078) }
.st-card p{ margin:0; font-size:.72rem; line-height:1.45;
  color:var(--muted,#a89078) }
.st-cost{ display:flex; gap:5px; flex-wrap:wrap }
.st-cost span{ font-family:var(--mono,monospace); font-size:.66rem; padding:2px 6px;
  background:#0a0604; border:1px solid #34281c; border-radius:10px }
.st-cost span.bad{ border-color:#7a2020; color:#e06060 }
.st-req-txt{ font-family:var(--mono,monospace); font-size:.64rem;
  color:var(--muted,#a89078) }
.st-req-txt.ok{ color:var(--ok,#50a830) }
.st-owned{ font-family:var(--mono,monospace); font-size:.7rem }
.st-owned b{ color:var(--gold,#f0c040) }

.st-active{
  display:flex; align-items:center; gap:11px; padding:11px 13px; flex-wrap:wrap;
  background:rgba(240,160,48,.08); border:1px solid #6a5a28;
  border-radius:5px; margin-bottom:12px;
}
.st-active.stalled{ background:rgba(208,32,32,.1); border-color:#7a2828 }
.st-active span{ font-size:1.5rem }
.st-active div{ flex:1 1 180px; min-width:0 }
.st-active i{ display:block; font-family:var(--mono,monospace); font-size:.7rem;
  font-style:normal; color:var(--muted,#a89078) }

/* ---------- Expeditions-Dialog ---------- */
.st-exp-head{ display:flex; gap:11px; padding:11px; margin-bottom:12px;
  background:#0a0604; border:1px solid #4a3828; border-radius:6px }
.st-exp-ico{ font-size:1.9rem; flex:0 0 auto }
.st-exp-head b{ display:block; font-size:.82rem; color:var(--gold,#f0c040) }
.st-exp-head i{ display:block; font-size:.74rem; font-style:normal;
  color:var(--muted,#a89078); margin:3px 0; line-height:1.45 }
.st-exp-head em{ display:block; font-family:var(--mono,monospace);
  font-size:.66rem; font-style:normal; color:#8a7a5a }
.st-exp-h{ font-family:var(--mono,monospace); font-size:.66rem; letter-spacing:1.4px;
  color:var(--gold,#f0c040); margin:14px 0 7px; text-transform:uppercase }

.st-mgrid{ display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr)) }
.st-mcard{
  background:#0f0a06; border:1px solid #34281c; border-radius:6px; padding:9px 6px;
  cursor:pointer; text-align:center; color:var(--txt,#d8d0c4);
  transition:border-color .15s, transform .12s, background .15s;
}
.st-mcard:hover{ border-color:#6a5a3a }
.st-mcard:active{ transform:scale(.95) }
.st-mcard.on{ border-color:var(--gold,#f0c040); background:rgba(240,192,64,.09) }
.st-mcard span{ display:block; font-size:1.4rem }
.st-mcard b{ display:block; font-size:.7rem; margin:2px 0 }
.st-mcard i{ font-size:.66rem; font-style:normal; letter-spacing:1px }

.st-sgrid{ display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  max-height:36vh; overflow-y:auto }
.st-scard{
  background:#0f0a06; border:1px solid #34281c; border-radius:6px; padding:8px;
  cursor:pointer; text-align:left; color:var(--txt,#d8d0c4);
  display:grid; grid-template-columns:auto 1fr; gap:2px 7px; align-items:center;
  transition:border-color .15s, background .15s, transform .12s;
}
.st-scard:hover{ border-color:#6a5a3a }
.st-scard:active{ transform:scale(.97) }
.st-scard.on{ border-color:var(--ok,#50a830); background:rgba(80,168,48,.1) }
.st-scard.on::after{ content:'\2714'; position:absolute }
.st-sface{ grid-row:1/3; font-size:1.5rem }
.st-scard b{ font-size:.74rem }
.st-scard i, .st-scard em{ font-family:var(--mono,monospace); font-size:.6rem;
  font-style:normal; color:var(--muted,#a89078); grid-column:2 }

.st-exp-sum{ margin-top:12px; padding:10px; background:#0a0604;
  border:1px solid #4a3828; border-radius:6px }
.st-exp-row{ display:grid; grid-template-columns:88px 1fr; gap:2px 8px;
  padding:5px 0; border-bottom:1px dashed #241c14;
  font-family:var(--mono,monospace); font-size:.74rem }
.st-exp-row:last-child{ border:0 }
.st-exp-row span{ color:var(--muted,#a89078) }
.st-exp-row b{ color:var(--gold,#f0c040) }
.st-exp-row i{ grid-column:2; font-size:.64rem; font-style:normal;
  color:#7a6a52 }
.st-exp-row.ok b{ color:var(--ok,#50a830) }
.st-exp-row.warn b{ color:#f0a030 }
.st-exp-row.bad b{ color:#e06060 }

.st-exp-list{ display:grid; gap:5px; margin-top:9px }
.st-exp-item{ display:flex; align-items:center; gap:9px; padding:7px 9px;
  background:#0f0a06; border-left:3px solid var(--gold,#f0c040); border-radius:0 4px 4px 0 }
.st-exp-item span{ font-size:1.1rem }
.st-exp-item div{ flex:1; min-width:0 }
.st-exp-item b{ display:block; font-size:.76rem; font-weight:500 }
.st-exp-item i{ font-family:var(--mono,monospace); font-size:.64rem;
  font-style:normal; color:var(--muted,#a89078) }

/* ==========================================================
   KARTE
   aspect-ratio MUSS zu SData.MAP passen (14000 x 11000),
   sonst sitzen die Nadeln neben ihren Orten.
   ========================================================== */
.st-map{
  position:relative; width:100%; aspect-ratio:14/11; min-height:300px;
  max-height:76vh; background:#0b0806;
  border:1px solid #4a3828; border-radius:6px; overflow:hidden;
  touch-action:none; cursor:grab;
}
.st-map.zoomed{ cursor:move }
.st-map-inner{
  position:absolute; inset:0; transform-origin:50% 50%;
  will-change:transform; --z:1;
}
.sm-bg{ position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none }
.st-map-fog{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 48%,rgba(0,0,0,.5) 100%) }

.st-map-ui{
  position:absolute; right:8px; bottom:8px; z-index:30;
  display:flex; flex-direction:column; gap:4px; align-items:stretch;
}
.st-map-ui button{
  width:36px; height:36px; background:rgba(10,6,4,.88);
  border:1px solid #4a3828; color:var(--gold,#f0c040); border-radius:5px;
  cursor:pointer; font-size:.95rem; line-height:1;
  transition:border-color .15s, background .15s;
}
.st-map-ui button:hover{ border-color:var(--gold,#f0c040);
  background:rgba(30,20,8,.95) }
.st-map-ui span{ font-family:var(--mono,monospace); font-size:.58rem;
  text-align:center; color:var(--muted,#a89078); padding-top:2px }
.st-map-hint{
  position:absolute; left:8px; bottom:8px; z-index:30; pointer-events:none;
  font-family:var(--mono,monospace); font-size:.58rem; letter-spacing:.6px;
  color:var(--muted,#a89078); background:rgba(10,6,4,.8);
  border:1px solid #34281c; border-radius:4px; padding:4px 8px; max-width:60%;
}

/* ---------- SVG-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:10px;
  stroke-linejoin:round;
}
.sm-l{ text-anchor:start }
.sm-lbl{ font-size:158px; fill:#c8b494 }
.sm-ico{ font-size:200px; stroke:none; stroke-width:0; opacity:.9 }
.sm-tiny{ font-size:120px; fill:#7a6a54; letter-spacing:5px }
.sm-wl{ font-size:150px; fill:#4e93ad; letter-spacing:11px; font-style:italic;
  stroke-width:8px }
.sm-rl{ font-size:138px; fill:#c0a050; letter-spacing:9px }
.sm-blk{ fill:#443628; opacity:.55; stroke:#2a2018; stroke-width:5 }
.sm-reg rect{ fill:rgba(224,101,26,.04); stroke:rgba(224,101,26,.2);
  stroke-width:9; stroke-dasharray:62 46; transition:fill .2s }
.sm-reg:hover rect{ fill:rgba(240,192,64,.11); stroke:rgba(240,192,64,.5) }
.sm-reg.t-military rect{ fill:rgba(208,32,32,.08); stroke:rgba(208,32,32,.45) }
.sm-reg.t-military .sm-lbl{ fill:#d07868 }
.sm-reg.t-swamp rect{ stroke:rgba(49,92,78,.45) }
.sm-reg.t-city rect{ fill:rgba(240,192,64,.06); stroke:rgba(240,192,64,.34);
  stroke-dasharray:none }
.sm-dot{ fill:#2a2018; stroke:#4a3828; stroke-width:5 }
.sm-dot.on{ fill:#c05030; stroke:#e07050 }
.sm-cart rect{ fill:rgba(10,6,4,.75); stroke:rgba(212,200,176,.32); stroke-width:10 }
.sm-title{ font-size:340px; fill:#f0c040; letter-spacing:16px }
.sm-sub{ font-size:138px; fill:#a89078; letter-spacing:8px }
.sm-ring{ fill:rgba(10,6,4,.62); stroke:rgba(212,200,176,.38); stroke-width:12 }
.sm-ring2{ fill:none; stroke:rgba(212,200,176,.18); stroke-width:8;
  stroke-dasharray:40 30 }
.sm-n{ fill:#c04030; stroke:#d4c8b0; stroke-width:9 }
.sm-block text{ fill:#c05040 }

/* ---------- Nadeln: skalieren mit, Inhalt bleibt lesbar ---------- */
.st-pin{
  position:absolute; z-index:12; cursor:pointer;
  transform:translate(-50%,-50%) scale(var(--z,1));
  transform-origin:50% 50%;
}
.st-pin b{
  width:26px; height:26px; display:grid; place-items:center; border-radius:4px;
  background:#0a0604; border:2px solid var(--sc,#8fae4e);
  font-family:Oswald,sans-serif; font-size:.6rem; color:var(--sc,#8fae4e);
  box-shadow:0 0 10px -2px var(--sc,#8fae4e); transition:transform .15s;
}
.st-pin:hover b{ transform:scale(1.18) }
.st-pin em{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:2px; font-size:.58rem; font-style:normal; white-space:nowrap;
  color:var(--sc,#8fae4e); text-shadow:0 1px 3px #000; pointer-events:none;
}
.st-pin.mine{ z-index:18 }
.st-pin.mine b{ border-color:var(--gold,#f0c040); color:var(--gold,#f0c040);
  animation:stBeat 2.2s infinite }
@keyframes stBeat{ 50%{ box-shadow:0 0 22px -2px var(--gold,#f0c040) } }
.st-pin.shield b::after{ content:'\1F6E1'; position:absolute; top:-9px; right:-9px;
  font-size:.55rem }
.st-pin:not(.mine):hover b{ border-color:#d02020; color:#d02020 }

.st-march{
  position:absolute; z-index:15; font-size:.9rem; pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--z,1));
  filter:drop-shadow(0 0 5px #000);
  animation:stMarch 1.9s ease-in-out infinite;
}
@keyframes stMarch{ 50%{ transform:translate(-50%,-64%) scale(var(--z,1)) } }
.st-route{ position:absolute; inset:0; z-index:10; pointer-events:none;
  width:100%; height:100% }
.st-route line{ stroke:var(--gold,#f0c040); stroke-width:.28; opacity:.5;
  stroke-dasharray:1.6 1.6; animation:stDash 1.2s linear infinite }
@keyframes stDash{ to{ stroke-dashoffset:-3.2 } }

.st-pick-ring{
  position:absolute; z-index:11; transform:translate(-50%,-50%);
  width:calc(var(--r) * 2); aspect-ratio:1;
  border:2px dashed var(--gold,#f0c040); border-radius:50%;
  background:rgba(240,192,64,.07); pointer-events:none;
  animation:stRing 2.6s ease-in-out infinite;
}
@keyframes stRing{ 50%{ background:rgba(240,192,64,.14) } }
.st-pick-note{ margin-top:4px; font-family:var(--mono,monospace);
  font-size:.7rem; line-height:1.45; color:var(--muted,#a89078) }

/* ---------- Abwehr, Chronik, Karawane ---------- */
.st-def{ display:flex; gap:16px; flex-wrap:wrap; align-items:center }
.st-def-num{ padding:14px 22px; background:#0a0604;
  border:1px solid var(--gold,#f0c040); border-radius:6px; text-align:center }
.st-def-num b{ display:block; font-family:Oswald,sans-serif; font-size:2rem;
  color:var(--gold,#f0c040); line-height:1 }
.st-def-num i{ font-family:var(--mono,monospace); font-size:.56rem;
  letter-spacing:1.4px; color:var(--muted,#a89078); font-style:normal }
.st-def-parts{ flex:1 1 200px }

.st-log{ display:grid; gap:5px }
.st-log.big{ max-height:58vh; overflow-y:auto }
.st-log-row{ display:flex; gap:9px; padding:8px 9px; background:#0f0a06;
  border-left:2px solid #4a3828; border-radius:0 4px 4px 0 }
.st-log-ico{ font-size:.95rem; flex:0 0 auto }
.st-log-row b{ display:block; font-size:.76rem; font-weight:500 }
.st-log-row i{ font-family:var(--mono,monospace); font-size:.62rem;
  font-style:normal; color:var(--muted,#a89078) }
.st-steps{ display:grid; gap:5px }
.st-step{ display:flex; gap:9px; padding:7px 9px; border:1px dashed #34281c;
  border-radius:4px; font-family:var(--mono,monospace); font-size:.72rem }
.st-step.done{ border-style:solid; border-color:#3a5a28; opacity:.55 }
.st-cara{ display:grid; gap:4px; margin-top:10px }
.st-cara-row{ display:flex; align-items:center; gap:9px; padding:6px 9px;
  background:#0f0a06; border:1px solid #34281c; border-radius:4px }
.st-cara-row b{ flex:1; font-size:.76rem; font-weight:500 }
.st-cara-row i{ font-family:var(--mono,monospace); font-size:.64rem;
  font-style:normal; color:var(--muted,#a89078) }
.st-cara-row input{ width:74px; min-width:74px; margin:0 }
.st-conv{ display:grid; gap:3px }
.st-conv-row{ display:flex; align-items:center; gap:9px;
  font-family:var(--mono,monospace); font-size:.7rem; padding:4px 0;
  border-bottom:1px dashed #34281c }
.st-conv-row b{ min-width:104px; color:var(--gold,#f0c040) }
.st-conv-row i{ font-style:normal; color:var(--muted,#a89078) }
.st-mini-list{ display:flex; gap:5px; flex-wrap:wrap }
.st-mini-npc{ padding:4px 9px; background:#0a0604; border:1px solid #4a3828;
  border-radius:14px; font-family:var(--mono,monospace); font-size:.68rem }
.st-cd{ font-family:var(--mono,monospace) }
.st-cd.bad{ color:#e06060 } .st-cd.warn{ color:#f0a030 } .st-cd.ok{ color:#7ac850 }

/* Auswahlfelder gegen input{width:100%} aus style.css schützen */
.st-picks input[type=radio], .st-picks input[type=checkbox]{
  width:16px; min-width:16px; height:16px; flex:0 0 16px;
  margin:4px 0 0; padding:0; appearance:auto; -webkit-appearance:auto;
}

/* ==========================================================
   HANDY: Seitenleiste wird untere Reiterleiste
   ========================================================== */
@media(max-width:900px){
  .st-wrap{ grid-template-columns:1fr }
  .st-grid2{ grid-template-columns:1fr }
  .st-layout{ grid-template-columns:1fr; gap:0 }

  .st-side{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60;
    display:flex; gap:0; overflow-x:auto; padding:0;
    border:0; border-top:1px solid #4a3828; border-radius:0;
    background:rgba(12,8,5,.97); backdrop-filter:blur(8px);
    scrollbar-width:none; padding-bottom:env(safe-area-inset-bottom,0);
  }
  .st-side::-webkit-scrollbar{ display:none }
  .st-side h3{ display:none }
  .st-side button{
    flex:0 0 auto; flex-direction:column; gap:2px; width:auto;
    min-width:66px; padding:8px 10px 7px; text-align:center;
    border-left:0; border-top:3px solid transparent; border-radius:0;
  }
  .st-side button.active{
    border-left:0; border-top-color:var(--gold,#f0c040);
    background:rgba(240,192,64,.1);
  }
  .st-side .ico{ font-size:1.15rem }
  .st-side .lbl{ font-size:.56rem; letter-spacing:.4px }
  .st-side .st-badge{ position:absolute; top:3px; right:8px }

  /* Platz für die Leiste, sonst deckt sie den letzten Knopf ab */
  .st-main{ padding-bottom:74px }

  .st-npcs{ grid-template-columns:1fr }
  .st-cards{ grid-template-columns:1fr 1fr; gap:8px }
  .st-card{ padding:9px }
  .st-card p{ font-size:.68rem }
  .st-map{ aspect-ratio:auto; height:58vh; min-height:320px; max-height:none }
  .st-map-hint{ font-size:.54rem; max-width:52% }
  .st-id-stats{ width:100%; justify-content:space-between }
  .st-chip{ flex:1 1 0; min-width:0 }
  .st-head h1{ font-size:1.1rem }
  .st-def-num{ width:100% }
  .st-exp-head{ flex-direction:column }
  .st-sgrid{ grid-template-columns:1fr 1fr; max-height:32vh }
  .st-mgrid{ grid-template-columns:1fr 1fr 1fr }
  .st-npc-acts{ grid-template-columns:1fr 1fr }
}
@media(max-width:420px){
  .st-cards{ grid-template-columns:1fr }
  .st-mgrid{ grid-template-columns:1fr 1fr }
  .st-sgrid{ grid-template-columns:1fr }
  .st-side button{ min-width:58px; padding:7px 6px }
}
@media(prefers-reduced-motion:reduce){
  .st-panel, .st-crest, .st-alarm, .st-march, .st-route line,
  .st-pick-ring, .st-need.bad, .st-pin.mine b{ animation:none !important }
}
/* Bild-Icons: nicht verzerren, nicht ausdehnen */
.st-icon{
  display:inline-block; object-fit:contain; flex-shrink:0;
  border-radius:2px; vertical-align:middle;
}
.st-side .st-icon{ margin-right:2px; max-width:16px !important; max-height:16px !important; }
.st-chip .st-icon{ display:block; margin:0 auto 2px; max-width:14px !important; max-height:14px !important; }
.st-res .st-icon{ max-width:14px !important; max-height:14px !important; }
.st-stat .st-icon{ margin-right:3px; max-width:12px !important; max-height:12px !important; }
.st-need .st-icon{ margin-right:3px; max-width:10px !important; max-height:10px !important; }

/* Bau, Forschung, Arsenal */
.st-card-h .st-icon{ margin-right:4px; max-width:18px !important; max-height:18px !important; }
.st-active .st-icon{ margin-right:4px; max-width:22px !important; max-height:22px !important; }
.st-cost .st-icon{ max-width:12px !important; max-height:12px !important; }
.st-owned .st-icon{ max-width:12px !important; max-height:12px !important; }

/* Karten-Dialoge */
.st-mcard .st-icon{ display:block; margin:0 auto 2px; max-width:20px !important; max-height:20px !important; }
.st-scard .st-icon{ margin-right:3px; max-width:14px !important; max-height:14px !important; }
.st-mc-ico .st-icon{ display:block; margin:0 auto; max-width:24px !important; max-height:24px !important; }
.st-mc-miss .st-icon{ margin-right:3px; max-width:14px !important; max-height:14px !important; }

/* Listen und Karte */
.st-exp-item .st-icon{ margin-right:4px; max-width:14px !important; max-height:14px !important; }
.st-march-ico .st-icon{ display:block; max-width:16px !important; max-height:16px !important; }
.st-map-ui .st-icon{ max-width:14px !important; max-height:14px !important; }
.st-map-legend .st-icon{ margin-right:3px; max-width:12px !important; max-height:12px !important; }
/* Catch-all: alle Bilder in kleinen Text-Boxen begrenzen */
.st-cost img, .st-owned img, .st-conv img, .st-cara img,
.st-kv img, .st-exp-row img, .st-mc-facts img,
.st-log-row img, .st-exp-item img, .st-mcard i img,
.st-mc-miss img, .st-mini-npc img, .st-res img,
.st-req-row img, .st-req-txt img, .st-note img,
.st-alarm img, .st-sub img, .st-id-meta img {
  max-width: 14px !important;
  max-height: 14px !important;
  vertical-align: middle;
  object-fit: contain;
}
.st-cost img, .st-owned img, .st-conv img, .st-cara img,
.st-kv img, .st-exp-row img, .st-mc-facts img,
.st-log-row img, .st-exp-item img, .st-mcard i img,
.st-mc-miss img, .st-mini-npc img, .st-res img,
.st-req-row img, .st-req-txt img, .st-note img,
.st-alarm img, .st-sub img, .st-id-meta img {
  max-width: 14px !important;
  max-height: 14px !important;
  vertical-align: middle;
  object-fit: contain;
}
/* ---------- Admin-Sektion ---------- */
.st-admin{
  margin-top:14px; padding-top:10px; border-top:1px dashed #4a3828;
}
.st-admin h3{
  font-family:var(--mono,monospace); font-size:.6rem; letter-spacing:1.8px;
  color:#d02020; margin:0 0 8px; text-transform:uppercase;
}
.st-admin .st-btn{
  border-color:#5a2828; color:#e06060; font-size:.66rem;
}
.st-admin .st-btn:hover:not(:disabled){
  border-color:#d02020; color:#d02020; background:rgba(208,32,32,.1);
}
/* ---------- Tagesbilanz ---------- */
.st-bal{
  display:grid; gap:1px; margin-top:8px;
}
.st-bal-head, .st-bal-row{
  display:grid; grid-template-columns:1fr auto auto auto auto auto; gap:10px;
  padding:6px 10px; align-items:center;
}
.st-bal-head{
  font-family:var(--mono,monospace); font-size:.56rem; letter-spacing:1px;
  color:var(--muted,#a89078); text-transform:uppercase;
  border-bottom:1px solid #4a3828; padding-bottom:4px;
}
.st-bal-row{
  font-family:var(--mono,monospace); font-size:.7rem;
  background:rgba(0,0,0,.2); border-radius:3px;
}
.st-bal-stock{ color:var(--muted,#a89078); }
.st-bal-days{ font-weight:700; text-align:right; min-width:50px; }
.st-bal-days.ok{ color:var(--ok,#50a830) }
.st-bal-days.warn{ color:#f0a030 }
.st-bal-days.bad{ color:#e06060; animation:stBlink 1.6s infinite; }
.st-bal-res{ display:flex; align-items:center; gap:6px; }
.st-bal-prod{ color:var(--ok,#50a830); font-weight:700; text-align:right; min-width:50px; }
.st-bal-cons{ color:#e06060; font-weight:700; text-align:right; min-width:50px; }
.st-bal-net{ font-weight:700; text-align:right; min-width:55px; }
.st-bal-net.ok{ color:var(--ok,#50a830) }
.st-bal-net.bad{ color:#e06060 }

@media(max-width:760px){
  .st-bal-head, .st-bal-row{
    grid-template-columns:1fr auto auto auto auto auto; gap:6px; padding:5px 8px;
  }
  .st-bal-head{ font-size:.5rem; }
  .st-bal-row{ font-size:.62rem; }
}