/* Interactive world map on /world/ (world_map.js). Colours are the in-game map bands
   (HUD mockup, section "КАРТА МИРА"): city gold, Aster's locations blue, Frontier amber,
   Wild red. Built = solid, planned = dashed and dim. */
.wmp{--wmp-city:#e8c876; --wmp-safe:#4a93e6; --wmp-front:#e0a341; --wmp-wild:#e0565f;
  margin:22px 0 26px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, rgba(24,33,47,.9), rgba(9,13,19,.96) 70%)}
.wmp-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 14px;
  border-bottom:1px solid var(--line-soft); background:rgba(18,26,38,.6)}
.wmp-leg{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-dim)}
.wmp-leg i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px;
  vertical-align:-1px; border:1.5px solid currentColor}
.wmp-leg .city{color:var(--wmp-city)} .wmp-leg .safe{color:var(--wmp-safe)}
.wmp-leg .front{color:var(--wmp-front)} .wmp-leg .wild{color:var(--wmp-wild)}
.wmp-leg .city i,.wmp-leg .safe i,.wmp-leg .front i,.wmp-leg .wild i{background:currentColor; opacity:.55}
.wmp-leg span{color:var(--ink-dim)}
.wmp-leg .plan i{border-style:dashed; color:var(--ink-mute); background:none}
.wmp-leg .sym{color:var(--gold); margin-right:4px}
.wmp-tools{margin-left:auto; display:flex; gap:6px}
.wmp-tools button{min-width:36px; height:32px; padding:0 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-dim); font:inherit; font-size:13px}
.wmp-tools button:hover{color:#fff; border-color:var(--cyan-dim)}
.wmp-body{display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:0}
/* Height is explicit: an svg at height:100% inside an auto row takes its natural viewBox size. */
.wmp-canvas{position:relative; height:560px; overflow:hidden}
.wmp-canvas svg{width:100%; height:100%; display:block; touch-action:none; cursor:grab; user-select:none}
.wmp.grabbing .wmp-canvas svg{cursor:grabbing}
.wmp-hint{position:absolute; left:12px; top:10px; font-size:11.5px; color:var(--ink-mute);
  pointer-events:none; background:rgba(9,13,19,.7); padding:4px 8px; border-radius:6px; transition:opacity .4s}
.wmp.used .wmp-hint{opacity:0}
.wmp-edge{stroke:#56637a; stroke-width:2; stroke-dasharray:5 6; opacity:.7}
.wmp-edge.open{stroke:#c9a95c; stroke-dasharray:none; opacity:.9}
.wmp-region{font-size:34px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-anchor:middle; fill:#9fb0c6; opacity:.26; pointer-events:none; transition:opacity .2s}
.wmp.far .wmp-region{opacity:.8}
.wmp-hex{cursor:pointer; outline:none}
.wmp-hex polygon{stroke-width:2; fill-opacity:.3; transition:fill-opacity .15s}
.wmp-hex.plan polygon{fill-opacity:.1; stroke-dasharray:6 5; stroke-opacity:.75}
.wmp-hex:hover polygon,.wmp-hex:focus polygon{fill-opacity:.5; stroke:#f0dfb0}
.wmp-hex.sel polygon{stroke:#f0dfb0; stroke-width:3.5; stroke-dasharray:none; fill-opacity:.55}
.wmp-hex.city polygon{fill:var(--wmp-city); stroke:var(--wmp-city)}
.wmp-hex.safe polygon{fill:var(--wmp-safe); stroke:var(--wmp-safe)}
.wmp-hex.front polygon{fill:var(--wmp-front); stroke:var(--wmp-front)}
.wmp-hex.wild polygon{fill:var(--wmp-wild); stroke:var(--wmp-wild)}
.wmp-hex text{pointer-events:none; text-anchor:middle; font-family:var(--sans)}
.wmp-hex .nm{font-size:12.5px; font-weight:600; fill:#eef4fb}
.wmp-hex.plan .nm{fill:#b9c5d4; font-weight:500}
.wmp-hex .lv{font-size:11px; fill:var(--ink-dim); font-family:var(--mono)}
.wmp-hex .ic{font-size:11px; fill:var(--gold)}
.wmp.far .wmp-hex text{display:none}
.wmp-card{border-left:1px solid var(--line-soft); padding:18px 18px 16px; overflow:auto;
  background:linear-gradient(180deg, rgba(18,26,38,.7), rgba(13,19,28,.4)); font-size:13.5px; line-height:1.55}
.wmp-card h3{margin:4px 0 12px; font-size:20px; color:#eef4fb}
.wmp-kind{font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.wmp-kind.city{color:var(--wmp-city)} .wmp-kind.safe{color:var(--wmp-safe)}
.wmp-kind.front{color:var(--wmp-front)} .wmp-kind.wild{color:var(--wmp-wild)}
.wmp-rows div{display:flex; justify-content:space-between; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--line-soft)}
.wmp-rows span{color:var(--ink-mute)} .wmp-rows b{color:var(--ink); font-weight:500; text-align:right}
.wmp-card p{margin:12px 0 0; color:var(--ink-dim)}
.wmp-gates{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.wmp-gates span{width:100%; color:var(--ink-mute); font-size:12px}
.wmp-gates button{padding:5px 10px; border-radius:8px; cursor:pointer; font:inherit; font-size:12.5px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-dim)}
.wmp-gates button:hover{color:#fff; border-color:var(--cyan-dim)}
@media (max-width:860px){
  .wmp-body{grid-template-columns:minmax(0,1fr)}
  .wmp-canvas{height:440px}
  .wmp-card{border-left:0; border-top:1px solid var(--line-soft)}
  .wmp-tools{margin-left:0}
}