/* Peta dunia (galeri) — lihat worldmap.js */
.wm-wrap{ position:relative; width:100%; aspect-ratio:16/10; background:#174356; max-height:calc(100dvh - 210px); min-height:420px; overflow:hidden;
  border:1px solid var(--hair-2); border-radius:var(--r-2); background:#163E4E; touch-action:none; user-select:none; }
.wm-stage, .wm-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wm-wrap::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 120px 30px rgba(8,20,28,.55); }
/* layar penuh di bawah HUD */
.wm-wrap.wm-full{ position:fixed; top:60px; left:0; right:0; bottom:0; z-index:calc(var(--z-hud) - 1); width:auto; aspect-ratio:auto; max-height:none; min-height:0; height:auto; border:0; border-radius:0; cursor:grab; }
html.wm-lock, html.wm-lock body{ overflow:hidden; }
.wm-back{ position:absolute; left:14px; top:14px; z-index:2; height:40px; padding:0 16px; border:1px solid #3A2A1A; border-radius:var(--r-2); background:#F4ECD8; color:#2A1E12; font:700 13px/1 'Cinzel',Georgia,serif; letter-spacing:.06em; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.wm-back:hover{ background:#fff; } .wm-back:active{ transform:translateY(1px); }
.wm-full .wm-legend{ position:absolute; left:14px; bottom:14px; right:70px; z-index:2; margin:0; }
.wm-full .wm-legend span{ color:#EFE2C0; text-shadow:0 1px 3px #000; }
.wm-full .wm-legend button{ background:rgba(16,30,38,.72); border-color:rgba(239,226,192,.35); color:#F4ECD8; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.wm-wrap.dragging{ cursor:grabbing; } .wm-wrap.dragging .wm-lm{ pointer-events:none; }

/* daratan: menyala saat hover, klik = buka benua */
.wm-reg{ cursor:pointer; outline:none; }
.wm-land{ fill:transparent; stroke:transparent; stroke-width:2.5; transition:fill .25s, stroke .25s; }
.wm-reg:hover .wm-land{ fill:rgba(255,236,190,.06); stroke:rgba(245,214,140,.75); stroke-width:9.6; }

/* landmark */
.wm-lm{ cursor:pointer; outline:none; }
.wm-ic{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .28s cubic-bezier(.3,1.6,.5,1); }

.wm-hit{ fill:transparent; }
.wm-ring{ fill:none; stroke:#FFD27A; stroke-width:9.6; opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .2s; }
.wm-lm:hover .wm-ring, .wm-lm:focus-visible .wm-ring{ opacity:.9; animation:wm-ring 1.3s ease-out infinite; }
@keyframes wm-ring{ from{ transform:scale(.8); opacity:.95; } to{ transform:scale(1.9); opacity:0; } }
.wm-lbl{ font:700 54px/1 'Cinzel',Georgia,serif; text-anchor:middle; fill:#FBF3DE; paint-order:stroke; stroke:rgba(20,14,8,.85); stroke-width:12px; stroke-linejoin:round; letter-spacing:.02em; pointer-events:none; transition:fill .2s; }
.wm-lbl.big{ font-size:67px; } .wm-lbl.minor{ font-size:41px; font-weight:600; opacity:.9; }
/* tingkat detail sesuai zoom (data-z diisi worldmap.js) */
.wm-wrap[data-z="far"] .wm-lm.minor, .wm-wrap[data-z="far"] .wm-roads{ display:none; }
.wm-wrap[data-z="far"] .wm-lm:not(.big) .wm-lbl{ display:none; }
.wm-wrap[data-z="far"] .wm-lbl{ font-size:106px; stroke-width:22px; }
.wm-wrap[data-z="far"] .wm-lbl.big{ font-size:138px; }
.wm-wrap[data-z="far"] .wm-sea{ font-size:154px; }
.wm-wrap[data-z="far"] .wm-sea textPath{ font-size:122px; }
.wm-wrap[data-z="mid"] .wm-lm.minor .wm-lbl{ display:none; }
.wm-wrap[data-z="mid"] .wm-lbl{ font-size:61px; } .wm-wrap[data-z="mid"] .wm-lbl.big{ font-size:77px; }
.wm-lm:hover .wm-lbl, .wm-lm:focus-visible .wm-lbl{ fill:#FFC66B; }
.wm-cont{ font-family:'Cinzel',Georgia,serif; font-weight:700; letter-spacing:.32em; text-anchor:middle; fill:#FFF6E0; opacity:.62; paint-order:stroke; stroke:rgba(20,14,8,.55); stroke-width:3px; }
.wm-sea{ font:italic 91px 'Instrument Serif',Georgia,serif; fill:#CFE6E6; opacity:.7; letter-spacing:.06em; text-anchor:middle; }
.wm-sea textPath{ text-anchor:start; font-size:77px; }
.wm-cdir{ font:700 13px 'Cinzel',serif; fill:#EFE2C0; }
.wm-cart-t{ font:700 22px 'Cinzel',serif; fill:#2A1E12; letter-spacing:.12em; }
.wm-cart-s{ font:italic 16px 'Instrument Serif',serif; fill:#5A4632; }
.wm-poison{ opacity:.9; filter:hue-rotate(40deg) saturate(.7); }

/* kota & perisai Gefenia */
.wm-town circle{ fill:#F4ECD8; stroke:#3A2A1A; stroke-width:2.2; }
.wm-dot{ fill:#F4ECD8; stroke:#3A2A1A; stroke-width:2.2; }
.wm-shield ellipse{ fill:rgba(127,184,240,.16); stroke:#7FB8F0; stroke-width:6.7; stroke-dasharray:6 10; transform-box:fill-box; transform-origin:center; animation:wm-shield 4s ease-in-out infinite; pointer-events:none; }
@keyframes wm-shield{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.035); opacity:1; } }

/* garis sihir Asiana */
.wm-barrier use{ fill:none; pointer-events:none; }
.wm-barrier .b1{ stroke:#B98CFF; stroke-width:29; opacity:.22; animation:wm-breathe 5s ease-in-out infinite; }
.wm-barrier .b2{ stroke:#E3D1FF; stroke-width:8.6; stroke-dasharray:30 20; animation:wm-flow 3s linear infinite; }
@keyframes wm-flow{ to{ stroke-dashoffset:-100; } }
@keyframes wm-breathe{ 0%,100%{ opacity:.14; } 50%{ opacity:.34; } }
.wm-barrier + g, .wm-sea textPath{ }
text.wm-sea:first-of-type{ fill:#E3D1FF; }

/* gerak sekitar */

.wm-cloud{ fill:#FFFFFF; opacity:.26; animation:wm-cloud 70s linear infinite; }
@keyframes wm-cloud{ from{ transform:translateX(-240px); } to{ transform:translateX(440px); } }
.wm-rays{ transform-box:fill-box; transform-origin:50% 100%; animation:wm-pulse 3s ease-in-out infinite; }
@keyframes wm-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.wm-spin{ transform-box:fill-box; transform-origin:center; animation:wm-spin 6s linear infinite; }
@keyframes wm-spin{ to{ transform:rotate(360deg); } }
.wm-orb{ animation:wm-pulse 2.4s ease-in-out infinite; }
.wm-blink{ animation:wm-pulse 1.6s ease-in-out infinite; }
.wm-robot{ animation:wm-hop 1.8s ease-in-out infinite; }
@keyframes wm-hop{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.wm-serpent{ animation:wm-serp 5s ease-in-out infinite; }
@keyframes wm-serp{ 0%,100%{ translate:0 0; } 50%{ translate:0 9px; } }
.wm-wrap.paused .wm-svg *{ animation-play-state:paused !important; }
.wm-wrap.still .wm-svg *{ animation:none !important; }

/* kartu info */
.wm-tip{ position:absolute; left:0; top:0; z-index:3; width:260px; overflow:hidden; border-radius:var(--r-2); background:#F4ECD8; color:#2A1E12;
  border:1px solid #3A2A1A; box-shadow:0 14px 30px rgba(0,0,0,.45); cursor:pointer; }
.wm-tip-img{ height:120px; background-size:cover; background-position:50% 22%; border-bottom:1px solid #3A2A1A; }
.wm-tip-b{ display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; }
.wm-tip-b small{ font:600 11px/1.2 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:#7A5E3E; }
.wm-tip-b b{ font:700 18px/1.15 'Cinzel',Georgia,serif; }
.wm-tip-b p{ margin:0; font-size:13px; line-height:1.4; color:#3E3022; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.wm-tip-go{ margin-top:4px; font-weight:700; font-size:12.5px; color:#B33A12; }

/* tombol zoom & pintasan benua */
.wm-ctrl{ position:absolute; right:14px; top:14px; z-index:2; display:flex; flex-direction:column; gap:6px; }
.wm-ctrl button{ width:40px; height:40px; box-shadow:0 6px 18px rgba(0,0,0,.35); border:1px solid #3A2A1A; border-radius:var(--r-2); background:#F4ECD8; color:#2A1E12; font:700 20px/1 var(--f-display); cursor:pointer; }
.wm-ctrl button:hover{ background:#fff; } .wm-ctrl button:active{ transform:translateY(1px); }
.wm-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.wm-legend span{ font:500 11px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); margin-right:4px; }
.wm-legend button{ padding:8px 14px; border:1px solid var(--hair-2); border-radius:999px; background:transparent; color:var(--fg); font:700 12px/1 'Cinzel',serif; letter-spacing:.08em; cursor:pointer; transition:border-color .15s, color .15s; }
.wm-legend button:hover{ border-color:var(--ember); color:var(--ember-2); }

@media (max-width: 700px){
  .wm-wrap{ aspect-ratio:auto; height:min(58dvh, 500px); min-height:400px; max-height:none; }
  .wm-wrap.wm-full{ height:auto; min-height:0; }
  .wm-full .wm-legend{ right:14px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .wm-full .wm-legend span{ display:none; }
  .wm-full .wm-legend button{ flex:none; }
  .wm-tip{ bottom:66px; }
  .wm-tip{ left:8px !important; right:8px; top:auto !important; bottom:60px; width:auto; transform:none !important; display:grid; grid-template-columns:96px 1fr; }
  .wm-tip[hidden]{ display:none; }
  .wm-tip-img{ height:auto; min-height:100%; border-bottom:0; border-right:1px solid #3A2A1A; }
}
@media (prefers-reduced-motion: reduce){ .wm-wrap *{ animation:none !important; transition:none !important; } }

/* ikon bangunan (lapisan di atas medan) */
.wm-img{ transition:filter .2s; }
.wm-img.hot{ filter:brightness(1.12) drop-shadow(0 0 16px rgba(255,210,122,.85)); }

/* kisi kode zona */
.wm-grid{ display:none; }
.wm-wrap.show-grid .wm-grid{ display:inline; }
.wm-grid path{ stroke:rgba(255,246,224,.38); stroke-width:3; fill:none; }
.wm-grid text{ font:600 55px/1 var(--f-mono, monospace); fill:rgba(255,246,224,.85); paint-order:stroke; stroke:rgba(10,20,26,.7); stroke-width:7.2px; }
.wm-ctrl button[aria-pressed="true"]{ background:#2A1E12; color:#F4ECD8; }

/* pin karakter per zona */
.wm-pin{ cursor:pointer; outline:none; }
.wm-pin-ring{ fill:#F4ECD8; stroke:#3A2A1A; stroke-width:4; }
.wm-pin-empty{ fill:#8A7A62; }
.wm-pin-badge{ fill:#B33A12; stroke:#F4ECD8; stroke-width:4; }
.wm-pin text{ font:700 32px/1 'Cinzel',Georgia,serif; fill:#fff; text-anchor:middle; }
.wm-pin:hover .wm-pin-ring, .wm-pin:focus-visible .wm-pin-ring{ stroke:#FFC66B; stroke-width:7; }
.wm-wrap[data-z="far"] .wm-pins{ display:none; }
.wm-tip-list{ display:flex; flex-direction:column; gap:2px; margin-top:4px; max-height:260px; overflow:auto; }
.wm-tip-list button{ display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; padding:4px; border:0; border-radius:6px; background:transparent; text-align:left; cursor:pointer; color:#2A1E12; }
.wm-tip-list button:hover{ background:#E8DCC0; }
.wm-tip-list img{ grid-row:span 2; width:32px; height:32px; border-radius:50%; object-fit:cover; object-position:50% 15%; border:1px solid #3A2A1A; }
.wm-tip-list span{ font:700 13px/1.2 'Cinzel',Georgia,serif; }
.wm-tip-list em{ font:500 11px/1.2 var(--f-mono, monospace); color:#7A5E3E; font-style:normal; }

/* jendela pilih zona */
.wm-pick{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgba(5,5,6,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.wm-pick-card{ width:min(1180px, 100%); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; border:1px solid #3A2A1A; border-radius:var(--r-2); background:#F4ECD8; color:#2A1E12; box-shadow:0 30px 60px rgba(0,0,0,.6); }
.wm-pick-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; }
.wm-pick-head b{ display:block; font:700 18px/1.2 'Cinzel',Georgia,serif; }
.wm-pick-head small{ font-size:13px; color:#5A4630; }
.wm-pick-code{ min-width:64px; padding:8px 12px; border:1px solid #3A2A1A; border-radius:var(--r-2); background:#2A1E12; color:#F4ECD8; font:700 20px/1 var(--f-mono, monospace); text-align:center; }
.wm-pick-map{ flex:1; min-height:0; background:#174356; }
.wm-pick-map svg{ display:block; width:100%; height:100%; max-height:calc(100dvh - 170px); cursor:crosshair; }
.wm-pick-grid path{ stroke:rgba(255,246,224,.45); stroke-width:5; fill:none; }
.wm-pick-grid text{ font:600 67px/1 var(--f-mono, monospace); fill:rgba(255,246,224,.9); paint-order:stroke; stroke:rgba(10,20,26,.75); stroke-width:9.6px; pointer-events:none; }
.wm-pick-names text{ font:700 94px/1 'Cinzel',Georgia,serif; text-anchor:middle; fill:#FBF3DE; paint-order:stroke; stroke:rgba(20,14,8,.85); stroke-width:17px; pointer-events:none; }
.wm-pick-hover{ fill:rgba(255,210,122,.22); stroke:#FFD27A; stroke-width:6; pointer-events:none; }
.wm-pick-sel{ fill:rgba(179,58,18,.35); stroke:#FFC66B; stroke-width:12; pointer-events:none; }
.wm-pick-foot{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; }
.wm-pick-foot .btn-ghost{ color:#2A1E12; border-color:rgba(58,42,26,.5); background:transparent; }
.wm-pick-foot .btn-ghost:hover{ background:#E8DCC0; color:#2A1E12; }

/* isian posisi & ikon di form karakter / profil kerajaan */
.zone-row{ display:flex; gap:8px; align-items:center; }
.zone-row .ce-input{ max-width:110px; text-transform:uppercase; font-family:var(--f-mono, monospace); }
.ke-icons{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:6px; max-height:280px; overflow:auto; padding:2px; }
.ke-icon{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px; border:1px solid var(--hair-2); border-radius:var(--r-2); background:rgba(23,67,86,.55); color:var(--fg); cursor:pointer; }
.ke-icon img{ width:64px; height:64px; object-fit:contain; }
.ke-icon span{ font-size:10.5px; line-height:1.15; text-align:center; }
.ke-icon.on{ border-color:var(--ember); box-shadow:0 0 0 2px var(--ember) inset; }
@media (max-width: 700px){ .wm-pick{ padding:0; } .wm-pick-card{ max-height:100dvh; height:100dvh; border-radius:0; } .wm-pick-map svg{ max-height:none; } }