/* ===== WFG animated maps: shared component CSS =====
   Marker kinds set four custom properties (--mc rim, --mb fill, --mi ink, --r radius) and
   one disc rule, one key-chip rule and the legend read them, so a kind is styled once. */
.wmap{--sh:0 2px 0 #000,0 0 0 1px #000;position:relative;min-width:0;width:100%;max-width:calc(62svh * var(--arn));margin:0 auto;scroll-margin-top:calc(var(--sticky-top) + 3.75rem);border:1px solid var(--edge);box-shadow:var(--panel-frame);background:var(--bg-2);font-family:var(--font-ui)}
.wmap-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.1rem var(--s-3);align-items:baseline;padding:.4rem .75rem;background:var(--bar-fill);border-bottom:1px solid var(--edge-inner)}
.wmap-title{color:var(--ink);font-size:var(--fs-sm)}
.wmap-tag{color:var(--ink-3);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.wmap-defs{position:absolute;width:0;height:0;overflow:hidden}
/* stage: the aspect box; base SVG, animated SVG and the HTML overlay fill it */
.wmap-stage{position:relative;aspect-ratio:var(--ar);background:var(--tip-ground);contain:layout style;isolation:isolate}
.wmap-base,.wmap-anim,.wmap-over{position:absolute;inset:0;width:100%;height:100%;display:block}
.wmap-anim{pointer-events:none;will-change:transform;z-index:1}
.wmap-over{z-index:2;pointer-events:none}
/* geometry */
.ground{fill:#0f0e0c}
.lk{fill:none;stroke-linecap:round;stroke-linejoin:round}.lk-stone{stroke:url(#wm-p-stone)}.lk-swim{stroke:url(#wm-p-water)}
.rsh{fill:#000;fill-opacity:.55;transform:translate(0,6px)}
.rm{stroke:#0b0a09;stroke-width:3}.rlt{fill:url(#wm-g-room)}
.t-cave{fill:url(#wm-p-cave)}.t-stone{fill:url(#wm-p-stone)}.t-water{fill:url(#wm-p-water)}.t-arcane{fill:url(#wm-p-arcane)}.t-grass{fill:url(#wm-p-grass)}.t-land{fill:url(#wm-p-land)}.t-snow{fill:url(#wm-p-snow)}.t-lava{fill:url(#wm-p-lava)}
.shelf,.shelf2{fill:none;stroke:#2e4a56;stroke-width:26;stroke-opacity:.35;stroke-linejoin:round}.shelf2{stroke-width:12;stroke-opacity:.5}
.land{stroke:#0b0a09;stroke-width:2.5;fill-rule:evenodd}.coast{fill:none;stroke:#8fa79c;stroke-width:1.2;stroke-opacity:.55}
.zo{fill:var(--accent);fill-opacity:.04;stroke:var(--accent);stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:5 4;rx:0}
/* locator figures: land parts from sea, paths read drawn rather than ruled */
.wmap-locator .shelf{stroke:#2b4d5c;stroke-width:22;stroke-opacity:.45}.wmap-locator .shelf2{stroke-width:9;stroke-opacity:.6}
.wmap-locator .coast{stroke:#a7bcb0;stroke-width:1.6;stroke-opacity:.7}
.wmap-locator .rc{stroke-width:6;stroke-opacity:.4}.wmap-locator .rd{stroke-dasharray:9 7}.wmap-locator .rt-crawl .rd{animation-name:wmap-crawl-l}.lmd{fill:#f1e6c8;stroke:#0b0a09;stroke-width:1.5}.ld{stroke:var(--accent);stroke-width:1.2;stroke-opacity:.7}.ldd{fill:var(--accent)}
/* route: casing, dashes, static arrowheads, traveling glyphs */
.rt{--rt:var(--accent)}.rt-alliance{--rt:#8cc4f2}.rt-horde{--rt:#f0747c}.rt-optional{--rt:var(--ink-3)}.rt-optional .rc{stroke-opacity:.35;stroke-width:5}
.rc,.rd{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rc{stroke:#000;stroke-opacity:.55;stroke-width:7}
.rd{stroke:var(--rt);stroke-width:3;stroke-dasharray:10 8}
.aw{fill:var(--rt);stroke:#000;stroke-width:.8}
.gl{fill:#fff;stroke:var(--rt);stroke-width:1.5;offset-rotate:auto;animation:wmap-glide linear infinite paused}
.rt-crawl .rd{animation:wmap-crawl 1.6s linear infinite paused}
.is-live .gl,.is-live .rt-crawl .rd,.is-live .mk.mk-pin::after,.is-live .mk.mk-pin .mk-d::after{animation-play-state:running}
html[data-motion=quiet] :is(.rd,.mk.mk-pin::after,.mk.mk-pin .mk-d::after){animation:none}
html[data-motion=quiet] .gl{display:none}
@keyframes wmap-glide{to{offset-distance:100%}}
@keyframes wmap-crawl{to{stroke-dashoffset:-18}}
@keyframes wmap-crawl-l{to{stroke-dashoffset:-16}}
@keyframes wmap-pulse{0%{transform:scale(.8);opacity:.9}to{transform:scale(2.2);opacity:0}}
/* HTML overlay: captions */
.rn,.zn,.sea{position:absolute;white-space:nowrap;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.85;text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000;transform:translate(-50%,-50%)}
.rn-start,.zn-start{transform:translate(0,-50%)}
.rn-end,.zn-end{transform:translate(-100%,-50%)}
.zn{font-size:.72rem}.zn-new{color:var(--accent);opacity:1;font-size:.6rem;letter-spacing:.1em}.zn-zone{font-size:.62rem;letter-spacing:.08em;color:var(--ink-3);opacity:.9}
.lm{position:absolute;white-space:nowrap;font-size:.7rem;letter-spacing:.06em;color:var(--ink);text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000;transform:translate(0,-50%)}.lm-end{transform:translate(-100%,-50%)}.zn-panel{color:var(--ink);opacity:1;font-size:.7rem;letter-spacing:.2em}.sea{font:italic .72rem var(--font-body);letter-spacing:.06em;text-transform:none;color:#8fa79c}
/* marker kinds */
.mk,.kn{--d:28px;--mc:var(--accent);--mb:#221a15;--mi:var(--accent);--r:50%}
.mk-final{--d:34px}
.mk-optional{--mc:var(--ink-3);--mb:#1c1a17;--mi:var(--ink-2)}
.mk-rare{--d:26px;--mc:#c4cad1;--mb:#1d2024;--mi:#e3e7eb}
.mk-entrance{--d:30px;--mc:var(--evidence-confirmed);--mb:#14231a;--r:3px}
.mk-event{--mc:var(--evidence-planned);--mb:#1a2434;--r:3px}
.mk-trash{--d:22px;--mc:var(--horde);--mb:#2a1214}
.mk-town,.mk-boat,.mk-town-horde{--d:24px;--mc:#2a2420;--mb:#f1e6c8;--mi:#2a2420}
.mk-town-horde{--mc:var(--horde)}
.mk-pin{--d:30px;--mc:#1c0f00;--mb:var(--accent)}
.mk-area{--d:30px;--mc:var(--accent);--mb:#2a2100}.mk-area .mk-d{border-style:dashed}
.mk-edge{--d:18px}.mk-edge .mk-d{border-width:2px}.mk-edge .mk-i{width:12px;height:12px}
.mk-dungeon{--d:26px;--mc:var(--accent);--mb:#221a15}
/* HTML overlay: markers (every marker is a real link) */
.mk{position:absolute;width:var(--d);height:var(--d);transform:translate(-50%,-50%);pointer-events:auto;text-decoration:none;color:var(--ink);display:block}
.mk::before{content:"";position:absolute;inset:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.mk-d{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--r);background:var(--mb);border:2.5px solid var(--mc);box-shadow:var(--sh);transition:transform var(--t)}
.mk-boss .mk-d,.mk-final .mk-d{box-shadow:var(--sh),inset 0 0 0 2px var(--mb),inset 0 0 0 3px rgba(255,209,0,.35)}
.mk-final .mk-d{border-width:3px}.mk-optional .mk-d{border-style:dashed}.mk-event .mk-d{transform:rotate(45deg)}
.mk-n{font:700 14px/1 var(--font-body);font-variant-numeric:tabular-nums lining-nums;color:var(--mi)}
.mk-final .mk-n{font-size:16px}.mk-event .mk-n{transform:rotate(-45deg);font-size:15px}
.mk-i{width:18px;height:18px;display:block}.mk-trash .mk-i{width:16px;height:16px}
.mk-crown{position:absolute;left:50%;top:-13px;width:22px;height:14px;transform:translateX(-50%)}
.mk.mk-pin::after,.mk.mk-pin .mk-d::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:wmap-pulse 2.4s ease-out infinite paused;pointer-events:none}
.mk.mk-pin .mk-d::after{animation-delay:1.2s;inset:-7px}
/* badges on a disc: skull, roam, water, faction letter */
.bd{position:absolute;width:16px;height:16px;border-radius:50%;background:#141210;border:1.5px solid var(--mc);display:grid;place-items:center;font:400 10px/1 var(--font-ui);box-shadow:0 1px 0 #000}
.bd svg{width:13px;height:13px;display:block}
.bd0{right:-6px;top:-6px}.bd1{left:-6px;top:-6px}
.bd-horde{color:var(--horde-text);border-color:var(--horde)}.bd-alliance{color:#8cc4f2;border-color:var(--alliance)}
/* label plaque */
.mk-l{position:absolute;display:flex;flex-direction:column;align-items:center;padding:.15rem .45rem .2rem;background:rgba(15,14,12,.92);border:1px solid var(--line);box-shadow:0 1px 0 #000;white-space:nowrap;line-height:1.15;text-align:center}
.mk-t{font-size:.78rem}
.mk-s{font:italic .64rem/1.15 var(--font-body);color:var(--ink-3)}
.mk-l-below{top:calc(100% + 5px);left:50%;transform:translateX(-50%)}
.mk-l-above{bottom:calc(100% + 5px);left:50%;transform:translateX(-50%)}
.mk-l-left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.mk-l-right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.mk-final .mk-l-above{bottom:calc(100% + 17px)}
/* hover and focus */
.mk:focus-visible .mk-d{transform:scale(1.12)}.mk-event:focus-visible .mk-d{transform:rotate(45deg) scale(1.12)}
.mk:focus-visible .mk-l{border-color:var(--accent);color:var(--accent)}
@media (hover:hover) and (pointer:fine){.mk:hover{z-index:3}.mk:hover .mk-d{transform:scale(1.12)}.mk-event:hover .mk-d{transform:rotate(45deg) scale(1.12)}.mk:hover .mk-l{border-color:var(--accent);color:var(--accent)}}
.mk:focus-visible{outline:0}.mk:focus-visible .mk-d{outline:2px solid var(--focus);outline-offset:3px}
/* tooltip: one per figure, filled from data-tip */
.wmap-tip{position:absolute;z-index:4;max-width:min(22rem,90%);padding:.3rem .55rem;background:var(--tip-ground);border:1px solid var(--line-strong);box-shadow:var(--sh);font:var(--fs-xs)/1.3 var(--font-body);pointer-events:none;transform:translate(-50%,calc(-100% - 10px))}
.wmap-tip.is-below{transform:translate(-50%,10px)}
/* visible stop list: the text alternative, and the names on phones where plaques hide */
.wmap-key{list-style:none;margin:0;padding:.4rem .6rem;display:flex;flex-wrap:wrap;gap:.25rem .35rem;border-top:1px solid var(--hairline)}
.wmap-key a{display:inline-flex;align-items:center;gap:.35rem;min-height:1.6rem;padding:.1rem .5rem .1rem .2rem;border:1px solid var(--hairline);background:var(--bg-3);color:var(--ink-2);text-decoration:none;font-size:var(--fs-xs);line-height:1.2}
.wmap-key a:hover,.wmap-key a:focus-visible{border-color:var(--accent);color:var(--ink)}
.kn{display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:var(--r);background:var(--mb);border:1.5px solid var(--mc);color:var(--mi);font:700 .68rem/1 var(--font-body);font-variant-numeric:tabular-nums lining-nums}
.kn svg{width:.8rem;height:.8rem}
/* legend and note */
.wmap figcaption{padding:.4rem .6rem .5rem;border-top:1px solid var(--hairline);font-size:var(--fs-2xs);color:var(--ink-3)}
.wmap-legend{list-style:none;margin:0 0 .25rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.wmap-legend li{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2)}
.lg-mk{position:relative;transform:scale(.6);margin:-6px -5px;pointer-events:none}.wmap .lg-mk::after,.wmap .lg-mk .mk-d::after{content:none}
.lg-rt{width:2.4rem;height:.9rem}.lg-zo{width:1.9rem;height:.9rem}
.wmap-note{margin:0;font:italic var(--fs-2xs) var(--font-body)}
/* the hub: one stage per continent; names open on hover and focus, the stop list names them all */
.wmap-hub .mk-l{display:none}.wmap-hub .mk:focus-visible .mk-l{display:flex}.mk:focus-visible{z-index:3}
@media (hover:hover) and (pointer:fine){.wmap-hub .mk:hover .mk-l{display:flex}}
.wmap-stages{display:grid;gap:1px;background:var(--edge)}
@media (min-width:48rem){.wmap-stages{grid-template-columns:1fr 1fr}}
.wmap-hub .wmap-stage{overflow:hidden}
/* a locator keeps its height under the cap by narrowing the stage, never by stretching it; the hub is two stages wide */
.wmap-hub{max-width:calc(124svh * var(--arn))}.wmap-locator .wmap-stage{margin-inline:auto;width:min(100%,calc(62svh * var(--arn)))}
/* target flash after a marker is used */
.map-hit{animation:wmap-hit 1.6s ease-out}
@keyframes wmap-hit{0%,30%{box-shadow:inset 3px 0 0 var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}to{box-shadow:inset 3px 0 0 transparent;background:0 0}}
/* phones: discs and the stop list carry the names; plaques and room captions go */
@media (max-width:39.99rem){
.mk-l,.rn{display:none}
.mk{--d:26px}.mk-final{--d:30px}.mk-dungeon{--d:24px}.mk-edge{--d:18px}.mk-n{font-size:13px}
.wmap-key{display:grid;grid-template-columns:1fr 1fr}.wmap-key a{min-height:2rem}
.zn{font-size:.62rem}.zn-zone{font-size:.58rem}.lm{font-size:.64rem}
}
@media (max-width:19.99rem){.zn-zone{display:none}}
/* owner rule (TJ, 2026-10-09): motion stays on under OS reduced motion, only slower */
@media (prefers-reduced-motion:reduce){.rt-crawl .rd{animation-duration:3.2s}}

/* Page placement. These rules live here, not in topic-guide.css or hero-feed.css, so the
   shared stylesheets (and every edition fingerprinted on them) stay untouched; only map pages
   load this file, and each selector also needs the map figure or the template's has-map class.
   The figure sits right after the TL;DR and its offer in the DOM, so phones read answer, offer,
   map. From 72rem it takes the full width in the first free row under them: row 2 beside a lone
   evidence panel, row 3 under the offer. */
@media (min-width: 72rem) { @container page (width >= 71rem) {
  .tg-top.has-map:not(.has-hero-feed) > [data-tg-answer] { grid-column: 1; grid-row: 1; }
  .tg-top.has-map:not(.has-hero-feed) > [data-tg-evidence] { grid-column: 2; grid-row: 1; }
  .tg-top.has-map.has-cta > [data-tg-evidence] { grid-row: 1 / span 2; }
  .tg-top.has-map:not(.has-hero-feed) > .wmap { grid-column: 1 / -1; grid-row: 2; }
  .tg-top.has-map.has-cta > .wmap { grid-row: 3; }
} }
/* A feed page (hero-feed split) spans the figure under the answer and the feed. */
@media (min-width: 58rem) { @container page (width >= 57rem) {
  .wfg-hero-split:has(> .wmap) > .tg-hero-primary { grid-column: 1; grid-row: 1; }
  .wfg-hero-split:has(> .wmap) > .tg-hero-social { grid-column: 2; grid-row: 1; }
  .wfg-hero-split > .wmap { grid-column: 1 / -1; grid-row: 2; }
} }
/* A page whose answer is a table (the dungeon hub) keeps the table first; the figure follows it across the grid. */
.tg-top > .wmap { grid-column: 1 / -1; }