.islemap-page{background:#090e18}
.islemap{max-width:1360px;padding:0 clamp(16px,3.5vw,48px) 72px}
.islemap [hidden]{display:none!important}
.islemap-heading{padding:48px 0 26px;max-width:780px}
.islemap h1{margin:0 0 18px;font-family:Georgia,serif;font-weight:400;font-size:clamp(44px,6vw,80px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.islemap-lead{margin:0 0 12px;max-width:64ch;color:#d9d7d3;font-size:clamp(17px,1.4vw,19px);line-height:1.7}
.islemap-truth{margin:0;color:var(--muted);font-size:14px}

.islemap-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:clamp(18px,3vw,40px);align-items:start}
.islemap-stage{position:sticky;top:84px;margin:0}
.islemap-canvas{position:relative;width:100%;max-height:calc(100vh - 150px);margin:0 auto;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b3a52;box-shadow:0 24px 60px #0008}
.islemap-canvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.islemap-svg{position:absolute;inset:0;width:100%;height:100%}

.zone-poly{cursor:pointer;outline:none}
.zone-poly polygon{fill:var(--zone);fill-opacity:0;stroke:var(--zone);stroke-opacity:.55;stroke-width:2.5;stroke-linejoin:round;transition:fill-opacity .15s,stroke-opacity .15s}
.zone-poly:hover polygon,.zone-poly:focus-visible polygon,.zone-poly.is-hover polygon{fill-opacity:.22;stroke-opacity:1}
.zone-poly.is-selected polygon{fill-opacity:.28;stroke-opacity:1;stroke-width:4}
.islemap.has-selection .zone-poly:not(.is-selected):not(:hover) polygon{stroke-opacity:.28}
.islemap-labels text{fill:#fff;font:700 24px Georgia,serif;text-anchor:middle;paint-order:stroke;stroke:#05080f;stroke-width:5;stroke-linejoin:round;pointer-events:none;opacity:.92}
.islemap.has-selection .islemap-labels text:not(.is-selected){opacity:.5}
.islemap-labels text.is-selected{opacity:1}

.islemap-spawns circle{fill:#ff5a4a;stroke:#2a0a07;stroke-width:2;opacity:.95}
.islemap-spawns circle.is-dim{opacity:.18}
.zaap-marker circle{fill:#14213d;stroke:#f4d27a;stroke-width:3}.zaap-marker path{fill:#f4d27a}
.npc-marker{stroke:#05080f;stroke-width:2.5;fill:#ffd166}
.npc-merchant,.npc-dot.npc-merchant{fill:#7bdcb5;background:#7bdcb5}.npc-banker,.npc-dot.npc-banker{fill:#8ab4ff;background:#8ab4ff}.npc-auction,.npc-dot.npc-auction{fill:#ff9ec4;background:#ff9ec4}.npc-quest,.npc-dot.npc-quest{fill:#ffd166;background:#ffd166}.npc-npc{fill:#d0d4dc}
.islemap-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:13px;color:var(--muted)}
.lg{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:6px}
.lg-zaap{background:#f4d27a;transform:rotate(45deg) scale(.8)}.lg-npc{background:#ffd166;border-radius:50%}.lg-spawn{background:#ff5a4a;border-radius:50%}

.islemap-panel{display:grid;gap:18px;min-width:0}
.islemap-zones{display:grid;gap:6px}
.islemap-zones a{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:12px;padding:10px 14px;color:var(--text);text-decoration:none;background:#101828;border:1px solid var(--line);border-left:4px solid var(--zone);border-radius:8px}
.islemap-zones a:hover,.islemap-zones a:focus-visible{background:#16223a;border-color:var(--zone)}
.islemap-zones a[aria-current]{background:#1b2a47;border-color:var(--zone)}
.zone-dot{width:10px;height:10px;border-radius:50%;background:var(--zone)}.zone-link-name{font-weight:650}.zone-link-level{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.islemap-hint{margin:0;padding:18px;color:var(--muted);background:#121b2bcc;border:1px dashed var(--line);border-radius:10px;font-size:14px}

.islemap-details{display:grid;gap:16px}
.zone-card{padding:22px 22px 24px;background:#121b2bcc;border:1px solid var(--line);border-top:4px solid var(--zone);border-radius:12px;scroll-margin-top:90px}
.zone-level{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--zone)}
.zone-card h2{margin:0 0 10px;font:400 clamp(28px,3vw,38px)/1.15 Georgia,serif;letter-spacing:-.015em}
.zone-desc{margin:0 0 6px;font-size:15px;line-height:1.7;color:#d9d7d3}
.zone-card h3{margin:22px 0 10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.zone-creatures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.zone-creatures a{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px 10px;color:var(--text);text-decoration:none;background:#0f1726;border:1px solid var(--line);border-left:3px solid var(--rarity);border-radius:8px}
.zone-creatures a:hover{border-color:var(--gold);background:#16223a}
.zc-art{grid-row:1/3;display:grid;place-items:center;width:56px;height:56px;border-radius:8px;background:radial-gradient(circle at 50% 40%,#26354f 0,#0f1726 78%)}.zc-art img{width:52px;height:52px;object-fit:contain}
.zc-name{font-weight:650;font-size:15px;line-height:1.25}.zc-name em{margin-left:4px;font-size:10px;font-style:normal;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;color:#1b160d;background:var(--gold);border-radius:4px}.zc-meta{font-size:12px;color:var(--muted)}
.zone-creatures li.is-focus a{border-color:var(--gold);background:#1b2a47}
.zone-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.zone-list li{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0f1726;border:1px solid var(--line);border-radius:8px;font-size:14px}
.zone-npcs small{margin-left:auto;color:var(--muted);font-size:12px}
.npc-dot{width:10px;height:10px;border-radius:50%;background:#d0d4dc;flex-shrink:0}
.zone-empty{margin:14px 0 0;color:var(--muted);font-style:italic}

/* With JavaScript only the selected zone is shown; without it every zone card is listed. */
.islemap.js .zone-card{display:none}.islemap.js .zone-card.is-selected{display:block}

@media(max-width:980px){.islemap-layout{grid-template-columns:1fr}.islemap-stage{position:static}.islemap-canvas{max-height:none;max-width:640px}.islemap-labels text{font-size:30px}}
@media(prefers-reduced-motion:reduce){.zone-poly polygon{transition:none}}