/* v1 poi-zoom (board A): town marks, dots, chooser, list, area lettering. Loaded after style.css; baseline map only (the .zoomed class is off under Guides). */
.kd{--c:var(--gold);display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #000c}
.kd.trainer,.pin.trainer{--c:#f0cf7e}.kd.supply{--c:#86c5e6}.kd.cook{--c:#e89a6a}.kd.inn{--c:#c8a8e8}.kd.flight,.kd.zeppelin{--c:#b9c8f0}.kd.goods{--c:#9fd49a}.kd.boat{--c:#d2a94a}
/* the town mark: name in small caps, a row of kind dots under it (tier 0). Past tier 0 the dots are the pins themselves, the name stays. */
.tmark{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;color:inherit;pointer-events:none;z-index:5}
.tmark .tm-n{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:auto;cursor:default;font:700 13px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#fbf2d4;text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;padding:4px 3px}
.tmark.camp .tm-n{font-size:11.5px;color:#f1e6c4}
.tmark.zone .tm-n{font-size:16px;color:#ffe9b0;letter-spacing:.18em}
.tmark.city .tm-n{font-size:17px;color:#ffe3a0;cursor:pointer;letter-spacing:.16em}
.tmark.city .tm-n::after{content:" ›";letter-spacing:0}
.tmark.city:hover .tm-n,.tmark.city:focus-visible .tm-n{color:#fff;text-shadow:0 0 3px #000,0 0 8px #f0cf7e,0 1px 2px #000}
.tmark:not(.city) .tm-n:hover,.tmark:focus-visible .tm-n{color:#fff}
.tmark:focus-visible{outline:none}.tmark:focus-visible .tm-n{outline:2px solid var(--gold-2);outline-offset:1px;border-radius:2px}
.tmark .tm-k{position:absolute;left:0;top:11px;transform:translateX(-50%);display:none;gap:3px;pointer-events:none;padding:0}
.tmark.t0 .tm-k{pointer-events:auto;padding:3px 4px}   /* the dot row is a target too: hover opens the town's list, click pins it */
.tmark.t0 .tm-k{display:flex}
.tmark.t0.empty .tm-k{display:none}
/* pins: tier 1 is a small colour dot at the true spot; tier 2 keeps the glyph and tries a name */
.zoomed .pin.zd .gl,.zoomed .pin.zd .gl.bdg{left:-4.5px;top:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--c,var(--gold));border:1.5px solid #14100a;box-shadow:0 0 0 1px #fff3;transform:none}
.zoomed .pin.zd .gl>*{display:none}
.zoomed .pin.zd .nm,.zoomed .pin.zd .num{display:none!important}
.zoomed .pin.zd::after{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%}
.zoomed .pin.zd:hover .gl,.zoomed .pin.zd:focus-visible .gl{transform:scale(1.5);box-shadow:0 0 0 2px #f0cf7e99}
.zoomed .pin .nm{transition:none}
.zoomed .pin:hover .nm.hide,.zoomed .pin:focus-visible .nm.hide{display:block;z-index:3}   /* unplaced names return on hover or focus */
.zoomed .pin.zd:hover .nm.hide{display:none}
.zoomed .pin.zrow{visibility:hidden;pointer-events:none}
.zoomed .pin.zstack .gl{box-shadow:0 0 0 2px #14100a,0 0 0 3.5px #f0cf7ee6,0 2px 6px #000a}   /* more here: the chooser */
.zoomed .pin.zstack.zd .gl{box-shadow:0 0 0 1.5px #14100a,0 0 0 3px #f0cf7ee6}
/* the list: a town's places, the chooser for overlapping pins, a city's key names */
.plist{position:absolute;z-index:15;min-width:230px;max-width:330px;padding:6px 6px 7px;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:#f3e7c5;border:var(--glass-edge);border-radius:5px;box-shadow:var(--glass-hi),var(--glass-shadow);font:12.5px/1.25 var(--sans)}
.plist[hidden]{display:none}
.pl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:700 12px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);padding:3px 6px 6px;border-bottom:1px solid #ffffff1c;margin-bottom:3px}
.pl-head b{font-weight:700}.pl-n{font-weight:400;letter-spacing:0;text-transform:none;color:#e8e0c8;font-size:12.5px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.plist{background:#14100af2}}
.pl-row{display:flex;align-items:center;gap:8px;width:100%;padding:3px 6px;border:0;border-radius:3px;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.pl-row:hover,.pl-row:focus-visible,.pl-row.on{background:#f0cf7e26;outline:none}
.pl-row b{font-weight:700;color:#fff3d7;white-space:nowrap}.pl-row i{font-style:normal;color:#e0d8bf;margin-left:auto;padding-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.pl-row.city{cursor:default}.pl-row.city:hover{background:none}.pl-row.city i{margin-left:0;max-width:170px}
.plist .lg-pin{position:relative;display:inline-block;width:22px;height:22px;flex:none}.plist .lg-pin .gl{left:0;top:0;width:22px;height:22px;transform:none}.plist .lg-pin .gl svg{width:13px;height:13px}
.pl-off{padding:5px 6px 1px;color:#e0d8bf;font-size:11.5px;border-top:1px solid #ffffff1c;margin-top:4px}
/* area names: map lettering. No plate, no hit area, shadow only, fades with zoom; they give way to every pin and town name */
.alabel{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:1}
.alabel span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;font:600 12.5px/1 var(--serif);letter-spacing:.18em;color:#fff3d0d9;text-shadow:0 0 3px #000,0 0 7px #000,0 1px 1px #000}