/* World map (web\map-ui.js) */
#pt-map {
  --ptm-bg: #0a0e11f5; --ptm-panel: #0f1519f2; --ptm-line: #a38a55; --ptm-line-soft: #a38a5552;
  --ptm-gold: #f2cf86; --ptm-text: #eee2c6; --ptm-dim: #a99f8a; --ptm-teal: #66cfca; --ptm-red: #e0604f; --ptm-plate: #120f0ae6;
  --ptm-label: 12px; --ptm-zone: 22px;
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none;
  color: var(--ptm-text); font: 13px/1.35 system-ui, 'Segoe UI', sans-serif;
}
#pt-map[hidden], #pt-map [hidden] { display: none !important; }
#pt-map * { box-sizing: border-box; }
#pt-map button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#pt-map svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pt-full-map #pb-game-language { visibility: hidden; }

/* the window */
.ptm-window {
  pointer-events: auto; position: relative; display: flex; flex-direction: column;
  width: min(1120px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 32px));
  background: var(--ptm-bg); border: 1px solid var(--ptm-line); border-radius: 6px;
  box-shadow: inset 0 0 0 3px #0a0e11, inset 0 0 0 4px var(--ptm-line-soft), 0 18px 48px #000c;
}
.ptm-window::before, .ptm-window::after {
  content: ''; position: absolute; top: -5px; width: 9px; height: 9px; background: var(--ptm-gold);
  transform: rotate(45deg); box-shadow: 0 0 0 2px #0a0e11; z-index: 2;
}
.ptm-window::before { left: -5px; } .ptm-window::after { right: -5px; }
.ptm-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--ptm-line-soft);
  background: linear-gradient(#171e23, #0d1215); border-radius: 6px 6px 0 0; }
.ptm-title { margin: 0; font: 600 20px/1 Georgia, 'Times New Roman', serif; letter-spacing: .06em; color: var(--ptm-gold); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.ptm-search { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; width: min(300px, 38vw); height: 34px; padding: 0 10px;
  background: linear-gradient(#080b0d, #101315); border: 1px solid #a38a5599; border-radius: 4px; box-shadow: inset 0 2px 5px #000a; color: var(--ptm-dim); }
.ptm-search:focus-within { border-color: var(--ptm-gold); color: var(--ptm-gold); }
.ptm-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--ptm-text); font: inherit; }
.ptm-search input::placeholder { color: #8e8573; }
.ptm-search input::-webkit-search-cancel-button { display: none; }
.ptm-results { position: absolute; top: calc(100% + 4px); left: -1px; right: -1px; z-index: 20; margin: 0; padding: 4px; list-style: none;
  background: #0f1519; border: 1px solid var(--ptm-line); border-radius: 4px; box-shadow: 0 10px 24px #000b; }
.ptm-results li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 3px; cursor: pointer; }
.ptm-results li:hover, .ptm-results li[aria-selected="true"] { background: #a38a5526; }
.ptm-results b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-results small { grid-column: 2; color: var(--ptm-dim); font-size: 11px; }
.ptm-results .ptm-ico { grid-row: span 2; }
.ptm-hbtn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50% !important; color: var(--ptm-gold) !important;
  background: radial-gradient(circle at 50% 35%, #2a2418, #120f0a) !important; border: 1px solid var(--ptm-line) !important; box-shadow: 0 1px 3px #000a; }
.ptm-hbtn:hover { border-color: var(--ptm-gold) !important; box-shadow: 0 0 0 2px #f2cf8633; }

/* world */
.ptm-world { position: relative; flex: 1; min-height: 0; margin: 8px; border: 1px solid var(--ptm-line-soft); border-radius: 4px; overflow: hidden; background: #1d170e; }
.ptm-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.ptm-viewport.ptm-dragging { cursor: grabbing; }
.ptm-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ptm-world-img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; }
/* only while dragging: kept on, Chrome would not redraw the image sharp after a zoom */
.ptm-dragging .ptm-layer { will-change: transform; }
.ptm-world::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px #000c; z-index: 1; }
.ptm-pins { position: absolute; inset: 0; }
.ptm-place { position: absolute; left: 0; top: 0; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 2px 7px !important; max-width: 170px; text-align: center; white-space: normal;
  font: 600 var(--ptm-label)/1.1 Georgia, 'Times New Roman', serif !important; color: #f3e2bb !important;
  background: var(--ptm-plate) !important; border: 1px solid #a38a5580 !important; border-radius: 3px; text-shadow: 0 1px 1px #000;
  box-shadow: 0 1px 4px #0009; transition: border-color .12s, color .12s, box-shadow .12s; }
.ptm-place:hover, .ptm-place.ptm-hover, .ptm-place:focus-visible, .ptm-place.ptm-selected { color: var(--ptm-gold) !important; border-color: var(--ptm-gold) !important;
  box-shadow: 0 0 0 2px #f2cf8640, 0 0 14px #f2cf8655; outline: 0; z-index: 2; }
.ptm-dungeon { position: absolute; left: 0; top: 0; display: grid !important; place-items: center; width: 26px; height: 26px; border-radius: 50% !important;
  color: #0b2a29 !important; background: radial-gradient(circle at 50% 35%, #a8f0ec, #3fb3ad) !important; border: 2px solid #0b1514 !important;
  box-shadow: 0 0 0 1px #66cfca99, 0 2px 6px #000b; transition: box-shadow .12s; }
.ptm-dungeon:hover, .ptm-dungeon.ptm-hover, .ptm-dungeon.ptm-selected { box-shadow: 0 0 0 3px #66cfca77, 0 0 14px #66cfcaaa; z-index: 2; }
#pt-map .ptm-dungeon svg { width: 15px; height: 15px; stroke-width: 2; }
.ptm-me-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.ptm-me-pin span, .ptm-me-pin::before { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; }
.ptm-me-pin span { background: var(--ptm-teal); border: 2px solid #f4fffe; box-shadow: 0 0 10px #66cfcacc; }
.ptm-me-pin::before { content: ''; border: 2px solid var(--ptm-teal); animation: ptm-ping 1.8s ease-out infinite; }
@keyframes ptm-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.ptm-tools { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.ptm-tools button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; color: var(--ptm-text);
  background: #0a0e11e6 !important; border: 1px solid var(--ptm-line-soft) !important; box-shadow: 0 2px 6px #0009; }
.ptm-tools button:hover { color: var(--ptm-gold); border-color: var(--ptm-gold) !important; }
.ptm-status { position: absolute; inset: auto 12px 12px; z-index: 5; margin: 0; padding: 8px 10px; background: #0a0e11e6; border: 1px solid #c0705a; border-radius: 4px; }

/* bosses */
.ptm-bosses { position: absolute; left: 10px; top: 10px; z-index: 4; display: flex; flex-direction: column; width: 290px; max-height: min(360px, calc(100% - 20px));
  background: var(--ptm-panel); border: 1px solid var(--ptm-line-soft); border-radius: 4px; box-shadow: 0 6px 18px #000a; }
.ptm-bosses-head { display: flex !important; align-items: center; gap: 7px; padding: 7px 10px !important; color: var(--ptm-gold) !important;
  font: 600 13px/1 Georgia, serif !important; letter-spacing: .05em; border-bottom: 1px solid var(--ptm-line-soft) !important; }
.ptm-bosses-head span { flex: 1; text-align: left; }
.ptm-bosses-head svg:last-child { transition: transform .15s; }
.ptm-collapsed .ptm-bosses-head { border-bottom: 0 !important; }
.ptm-collapsed .ptm-bosses-head svg:last-child { transform: rotate(-90deg); }
.ptm-collapsed .ptm-bosses-list { display: none; }
.ptm-bosses-list { overflow: auto; padding: 2px 0; scrollbar-width: thin; scrollbar-color: #a38a5566 transparent; }
.ptm-boss { display: flex; align-items: flex-start; gap: 4px; padding: 5px 8px 5px 6px; border-bottom: 1px solid #a38a551c; }
.ptm-boss:hover { background: #a38a5514; }
.ptm-star { flex: none; padding: 1px !important; color: #6d6555 !important; }
.ptm-star:hover, .ptm-fav .ptm-star { color: var(--ptm-gold) !important; }
.ptm-fav .ptm-star svg { fill: var(--ptm-gold); }
#pt-map .ptm-star svg { width: 14px; height: 14px; }
.ptm-boss-main { flex: 1; min-width: 0; text-align: left; line-height: 1.3; }
.ptm-boss-main b { color: var(--ptm-text); font-weight: 600; }
.ptm-boss-main small { color: var(--ptm-dim); font-size: 11.5px; }
.ptm-when { display: block; color: #b9ae96; font-size: 11.5px; }
.ptm-when em { font-style: normal; color: #ff8d6e; }

/* guide window, over the world */
.ptm-guide { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: #00000059; }
.ptm-guide-box { display: flex; flex-direction: column; background: var(--ptm-panel); border: 1px solid var(--ptm-line); border-radius: 5px;
  box-shadow: inset 0 0 0 3px #0a0e11, inset 0 0 0 4px var(--ptm-line-soft), 0 14px 40px #000d; padding: 8px 10px 10px; }
.ptm-guide-head { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; }
.ptm-guide-head h3 { flex: 1; margin: 0; text-align: center; font: 600 17px/1 Georgia, 'Times New Roman', serif; color: var(--ptm-gold); }
.ptm-to-world { padding: 5px 9px !important; font-size: 12px !important; color: var(--ptm-text) !important; border: 1px solid var(--ptm-line-soft) !important;
  border-radius: 3px !important; background: #a38a551a !important; }
.ptm-to-world:hover { border-color: var(--ptm-gold) !important; color: var(--ptm-gold) !important; }
.ptm-guide-head .ptm-hbtn { width: 28px; height: 28px; }
.ptm-guide-map { position: relative; flex: none; width: 320px; height: 320px; border: 1px solid var(--ptm-line-soft); border-radius: 3px; overflow: hidden; background: #000; }
.ptm-guide-map > img { width: 100%; height: 100%; display: block; user-select: none; }
.ptm-captions, .ptm-zones, .ptm-npcs, .ptm-marks { position: absolute; inset: 0; }
.ptm-caption { position: absolute; display: grid; place-items: center; padding: 0 2px; text-align: center; overflow: hidden;
  font: 700 11px/1.05 Georgia, 'Times New Roman', serif; color: #fff1d0; pointer-events: none;
  text-shadow: -1px -1px 0 #1a120a, 1px -1px 0 #1a120a, -1px 1px 0 #1a120a, 1px 1px 0 #1a120a, 0 0 4px #000; }
.ptm-guide-name { position: absolute; left: 8px; top: 8px; z-index: 4; display: grid; gap: 1px; padding: 5px 9px; border-radius: 3px;
  background: #0a0e11e0; box-shadow: 0 0 0 1px var(--ptm-line-soft); pointer-events: none; }
.ptm-guide-name b { font: 600 15px/1.1 Georgia, serif; color: var(--ptm-text); }
.ptm-here { color: var(--ptm-gold); font-size: 12px; font-weight: 600; }
.ptm-zone { position: absolute; left: 0; top: 0; width: var(--ptm-zone); height: var(--ptm-zone); border-radius: 50%;
  background: radial-gradient(circle, #e8382acc, #d42e22a6 45%, #b8221a8c 64%, #7a120e00 72%);
  box-shadow: inset 0 0 0 1.5px #ff7a66cc, 0 0 0 1px #3a0806aa, 0 0 6px #e8382a88; }
.ptm-no-monsters .ptm-zones, .ptm-no-npc .ptm-npcs, .ptm-no-bosses .ptm-marks, .ptm-no-group .ptm-member { display: none; }
.ptm-npc { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  color: #15100a; background: var(--k, #d9c9a3); border: 1.5px solid #0b0905; box-shadow: 0 1px 3px #000c; transition: box-shadow .12s; }
#pt-map .ptm-npc svg { width: 13px; height: 13px; stroke-width: 1.9; }
.ptm-npc.ptm-k-npc { width: 9px; height: 9px; border-width: 1px; }
.ptm-npc:hover, .ptm-npc.ptm-focus { z-index: 3; box-shadow: 0 0 0 3px #fff4, 0 0 12px var(--k, #d9c9a3); }
.ptm-npc.ptm-focus { animation: ptm-bounce .6s ease-in-out infinite alternate; }
@keyframes ptm-bounce { to { box-shadow: 0 0 0 5px #fff6, 0 0 16px var(--k, #d9c9a3); } }
.ptm-boss-mark { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: #f4e9d8; background: radial-gradient(circle at 50% 35%, #4a2420, #1a0b09); border: 2px solid #c9564a; box-shadow: 0 0 10px #c9564a99; }
#pt-map .ptm-boss-mark svg { width: 15px; height: 15px; }
.ptm-member { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 4px; pointer-events: none; transform-origin: 0 0; }
.ptm-member i { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #7fd36b; border: 2px solid #f4fff0; box-shadow: 0 0 6px #7fd36b; }
.ptm-member span { margin-top: -6px; padding: 0 4px; font-size: 11px; font-weight: 600; color: #e8ffe0; background: #0a0e11cc; border-radius: 2px; }
.ptm-me { position: absolute; left: 0; top: 0; z-index: 4; width: 26px; height: 26px; pointer-events: none; filter: drop-shadow(0 0 4px #66cfca) drop-shadow(0 1px 2px #000); }
#pt-map .ptm-me svg { width: 100%; height: 100%; fill: var(--ptm-teal); stroke: #f4fffe; stroke-width: 1.5; }
.ptm-guide-note { position: absolute; inset: auto 8px 8px; margin: 0; padding: 6px 8px; font-size: 12px; color: var(--ptm-dim); background: #0a0e11e0; border-radius: 3px; }
.ptm-guide-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 9px 0 0; }
.ptm-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.ptm-check input { appearance: none; width: 15px; height: 15px; margin: 0; border: 1px solid var(--ptm-line); border-radius: 2px; background: #080b0d; display: grid; place-items: center; cursor: pointer; }
.ptm-check input:checked { background: var(--ptm-line); }
.ptm-check input:checked::after { content: ''; width: 8px; height: 4px; margin-top: -2px; border: solid #120f0a; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.ptm-legend { align-self: center; width: 190px; max-height: 100%; overflow: auto; padding: 8px 10px; background: var(--ptm-panel); border: 1px solid var(--ptm-line-soft);
  border-radius: 4px; box-shadow: 0 8px 22px #000b; }
.ptm-no-legend .ptm-legend { display: none; }
.ptm-legend h4 { margin: 0 0 6px; font: 600 12px/1 Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ptm-dim); }
.ptm-legend-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; }
.ptm-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #15100a; background: var(--k, #d9c9a3); flex: none; }
#pt-map .ptm-ico svg { width: 13px; height: 13px; stroke-width: 1.9; }
.ptm-ico.ptm-region { background: none; border: 1.5px solid var(--ptm-gold); width: 14px; height: 14px; margin: 3px; }
.ptm-ico.ptm-dot { background: none; } .ptm-ico.ptm-dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #d9c9a3; border: 1px solid #0b0905; }
.ptm-ico.ptm-zone-ico { background: radial-gradient(circle, #e8382acc, #d42e22a6 45%, #b8221a8c 64%, #7a120e00 72%); box-shadow: inset 0 0 0 1.5px #ff7a66cc; }
.ptm-ico.ptm-boss-ico { color: #f4e9d8; background: #3a1a17; box-shadow: inset 0 0 0 1.5px #c9564a; }
.ptm-ico.ptm-group-ico { background: none; } .ptm-ico.ptm-group-ico::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #7fd36b; border: 2px solid #f4fff0; }
.ptm-tip { position: absolute; z-index: 10; left: 0; top: 0; display: grid; gap: 2px; padding: 6px 9px; max-width: 260px; pointer-events: none;
  background: #0f1519; border: 1px solid var(--ptm-line); border-radius: 4px; box-shadow: 0 6px 16px #000c; }
.ptm-tip b { color: var(--ptm-gold); font-weight: 600; }
.ptm-tip span { color: var(--ptm-dim); font-size: 11.5px; }
.ptm-tip em { font-style: normal; color: #ff8d6e; }
.ptm-foot { padding: 0 16px 8px; color: #8e8573; font-size: 11px; }
.ptm-done { display: none; }
.ptm-foot kbd { padding: 0 4px; border: 1px solid #a38a5566; border-radius: 3px; font: 600 10px/1.5 system-ui, sans-serif; color: var(--ptm-dim); }

/* NPC kinds */
.ptm-k-smith { --k: #e0a96a; } .ptm-k-shop { --k: #e9c97a; } .ptm-k-warehouse { --k: #c9a27a; } .ptm-k-teleport { --k: #66cfca; }
.ptm-k-clan { --k: #b9a2e6; } .ptm-k-skill { --k: #8fb8f0; } .ptm-k-force { --k: #7fd9f0; } .ptm-k-aging { --k: #f08f7a; }
.ptm-k-mix { --k: #9ee08a; } .ptm-k-craft { --k: #d8b48a; } .ptm-k-bellatra { --k: #f2cf86; } .ptm-k-distributor { --k: #f0b0d0; }
.ptm-k-event { --k: #e58ad6; } .ptm-k-quest { --k: #ffd34d; } .ptm-k-guard { --k: #9fb3c8; } .ptm-k-npc { --k: #d9c9a3; }

/* small screens and phones (landscape) */
@media (max-width: 820px), (max-height: 540px) {
  .ptm-window { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
  .ptm-head { gap: 8px; padding: 6px 8px 6px 12px; }
  .ptm-title { font-size: 16px; }
  .ptm-search { width: auto; flex: 1; height: 32px; }
  .ptm-world { margin: 6px; }
  .ptm-bosses { width: 240px; }
  .ptm-guide { padding: 6px; }
  .ptm-guide-box { padding: 6px 8px 8px; }
  .ptm-foot { display: none; }
}

/* NPC menu (in the tip) and the "go to" notice */
.ptm-tip.ptm-menu { pointer-events: auto; }
.ptm-menu-acts { display: flex; gap: 6px; margin: 6px 0 2px; }
.ptm-menu-acts button { padding: 4px 10px !important; border: 1px solid var(--ptm-line) !important; border-radius: 3px !important; color: var(--ptm-gold) !important; }
.ptm-menu-acts button:disabled { opacity: .45; cursor: default; }
#pt-map-walk { position: fixed; left: 50%; top: 14%; z-index: 41; transform: translateX(-50%); display: grid; gap: 2px; padding: 8px 16px; text-align: center;
  color: #ffd623; font: bold 13px/1.3 Georgia, serif; background: #0b120de8; border: 1px solid #a88a52; box-shadow: 0 4px 12px #000a; cursor: pointer; text-shadow: 0 1px 1px #000; }
#pt-map-walk small { color: #e9e4d2; font: 11px Tahoma, sans-serif; }

/* quests: "!" on NPCs that give quests, "?" on what the journal's quests are about */
.ptm-npc.ptm-giver::after, .ptm-npc.ptm-qtarget::after, .ptm-place.ptm-quest::after, .ptm-dungeon.ptm-quest::after {
  content: '!'; position: absolute; top: -7px; right: -7px; width: 13px; height: 13px; border-radius: 50%;
  font: bold 10px/13px Tahoma, sans-serif; text-align: center; color: #2a1800; background: #ffd34d; border: 1px solid #2a1800; box-shadow: 0 1px 2px #000a; }
.ptm-npc.ptm-qtarget::after, .ptm-place.ptm-quest::after, .ptm-dungeon.ptm-quest::after { content: '?'; background: #8ee07a; }
.ptm-npc.ptm-qtarget { z-index: 2; box-shadow: 0 0 0 2px #8ee07a, 0 0 10px #8ee07a; }
.ptm-zone.ptm-zone-quest { background: radial-gradient(circle, #ffd623cc, #f0c018a6 45%, #d8a8108c 64%, #8a6a0000 72%);
  box-shadow: inset 0 0 0 1.5px #fff2a0dd, 0 0 0 1px #3a2a00aa, 0 0 6px #ffd62388; }
.ptm-ico.ptm-giver-ico { background: #ffd34d; color: #2a1800; font: bold 12px/1 Tahoma, sans-serif; }
.ptm-ico.ptm-qtarget-ico { background: #8ee07a; color: #10240c; font: bold 12px/1 Tahoma, sans-serif; }

/* region borders lit on hover, of the name or of the region itself (paint_world.py outlines, regions.png) */
.ptm-outlines { position: absolute; left: 0; top: 0; pointer-events: none; }
.ptm-outlines img { position: absolute; max-width: none; opacity: 0; transition: opacity .15s; filter: drop-shadow(0 0 2px #ffd623); }
.ptm-outlines img.ptm-lit, .ptm-outlines img.ptm-sel { opacity: 1; }

/* party signals: on the world (at the region) and on the guide map */
.ptm-signal-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.ptm-signal-pin span, .ptm-signal-pin::before { position: absolute; left: -6px; top: -20px; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.ptm-signal-pin span { background: #ff8a3d; border: 2px solid #fff3e6; box-shadow: 0 0 8px #ff8a3d; }
.ptm-signal-pin::before { content: ''; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ff8a3d; transform: none; animation: ptm-ping 1.6s ease-out infinite; }
.ptm-signal { position: absolute; left: 0; top: 0; z-index: 5; width: 18px; height: 18px; border-radius: 50%; background: #ff8a3d; border: 2px solid #fff3e6;
  box-shadow: 0 0 0 4px #ff8a3d55, 0 0 12px #ff8a3d; animation: ptm-bounce .8s ease-in-out infinite alternate; }
.ptm-spot { position: absolute; left: 0; top: 0; z-index: 5; width: 14px; height: 14px; border: 2px solid #ffd623; border-radius: 50%; box-shadow: 0 0 6px #000; pointer-events: none; }
.ptm-guide-map > img { cursor: crosshair; }

/* "go to" on every point of the guide map (monster areas, bosses, signals, empty spots) */
.ptm-zone, .ptm-boss-mark, .ptm-signal, .ptm-npc { cursor: pointer; }
.ptm-zone:hover { z-index: 1; box-shadow: inset 0 0 0 1.5px #ffd0c4, 0 0 0 1px #3a0806aa, 0 0 10px #ff5a44; }
.ptm-boss-mark:hover, .ptm-boss-mark.ptm-focus { z-index: 3; box-shadow: 0 0 0 3px #c9564a66, 0 0 14px #ff6a5a; }
.ptm-boss-mark.ptm-focus { animation: ptm-boss-bounce .6s ease-in-out infinite alternate; }
@keyframes ptm-boss-bounce { to { box-shadow: 0 0 0 6px #c9564a55, 0 0 18px #ff6a5a; } }
.ptm-tip .ptm-hint { color: var(--ptm-gold); font-size: 10.5px; opacity: .8; }
.ptm-spot { z-index: 6; }
/* the heading on the world's "you are here" pin */
.ptm-me-pin i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; z-index: 1; }
#pt-map .ptm-me-pin i svg { display: block; width: 100%; height: 100%; fill: var(--ptm-teal); stroke: #f4fffe; stroke-width: 1.2; filter: drop-shadow(0 0 2px #000); }
/* the layers of points cover the whole map: they let clicks through to the map (empty spot)
   and to the points under them (the monster areas were under the NPC and boss layers) */
.ptm-captions, .ptm-zones, .ptm-npcs, .ptm-marks { pointer-events: none; }
.ptm-zone, .ptm-npc, .ptm-boss-mark { pointer-events: auto; }

/* respawns: one circle per respawn, its size by how many monsters it holds (map_respawns.py) */
.ptm-zone.ptm-respawn { display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, #e8382a66, #d42e2252 55%, #b8221a40 70%, #7a120e1c);
  box-shadow: inset 0 0 0 1.5px #ff7a66d9, 0 0 0 1px #3a0806aa, 0 0 6px #e8382a66; }
.ptm-zone.ptm-respawn::after { content: attr(data-n); font: bold 10px/1 Tahoma, sans-serif; color: #fff4ee; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
.ptm-zone.ptm-respawn.ptm-small::after { content: none; }
.ptm-zone.ptm-respawn:hover { background: radial-gradient(circle, #ff4a3a88, #e8382a70 55%, #d42e2250 70%, #7a120e22); box-shadow: inset 0 0 0 2px #ffd0c4, 0 0 0 1px #3a0806aa, 0 0 10px #ff5a44; }
.ptm-zone.ptm-respawn.ptm-zone-quest { background: radial-gradient(circle, #ffd62366, #f0c01852 55%, #d8a81040 70%, #8a6a001c); box-shadow: inset 0 0 0 1.5px #fff2a0dd, 0 0 0 1px #3a2a00aa; }
.ptm-tip .ptm-mon { color: var(--ptm-text); }
.ptm-tip .ptm-mon small { color: var(--ptm-dim); font-size: 10.5px; }
.ptm-tip .ptm-mon i { font-style: normal; color: var(--ptm-gold); }
.ptm-ico.ptm-zone-ico { border-radius: 50%; }

/* names of the guide map: text only, as the game draws them (light letters, a thin crisp dark
   outline in 8 directions), no box, no background, no blurred halo; over the icons */
.ptm-captions { z-index: 4; }
#pt-map .ptm-caption { overflow: visible; text-shadow: -1px -1px 0 #1a120a, 0 -1px 0 #1a120a, 1px -1px 0 #1a120a, -1px 0 0 #1a120a,
  1px 0 0 #1a120a, -1px 1px 0 #1a120a, 0 1px 0 #1a120a, 1px 1px 0 #1a120a; }
.ptm-caption > span { display: inline-block; }

/* icons moved off a name: a thin line back to the real spot; NPCs together: one icon and a count */
.ptm-leader { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 50%; background: #f2cf86b0; pointer-events: none; z-index: 1; box-shadow: 0 0 1px #000; }
.ptm-leader::before { content: ''; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #f2cf86; box-shadow: 0 0 0 1px #000; }
.ptm-npc .ptm-count { position: absolute; right: -8px; bottom: -6px; min-width: 13px; height: 13px; padding: 0 2px; border-radius: 7px;
  font: bold 9.5px/13px Tahoma, sans-serif; text-align: center; color: #fff; background: #1a120a; box-shadow: 0 0 0 1px var(--k, #d9c9a3); }
/* English: the names drawn on the map, repeated over the icons (a piece of the same image) */
.ptm-caption-art { position: absolute; pointer-events: none; background-repeat: no-repeat; }
/* a name with no free spot near: a slightly smaller plate */
.ptm-caption.ptm-squeezed > span { transform: scale(.85); }