/* map-loc: 座標にマウスを乗せると出る地図の窓（frontend.js）。色はテーマの --ntg2-* があれば使う */
.ntg-maploc {
	border-bottom: 1px dashed var(--ntg2-accent, #c0533b);
	cursor: pointer;
	--ntg-maploc-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.ntg-maploc::after {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-left: .15em;
	vertical-align: -.05em;
	background: var(--ntg2-accent, #c0533b);
	-webkit-mask: var(--ntg-maploc-pin) center / contain no-repeat;
	mask: var(--ntg-maploc-pin) center / contain no-repeat;
}
.ntg-maploc:focus-visible {
	outline: 2px solid var(--ntg2-accent, #c0533b);
	outline-offset: 2px;
	border-radius: 2px;
}

.ntg-mappop {
	--ntg-mappop-w: 360px;
	position: fixed;
	z-index: 100010; /* 用語カード（#ntg-game-tooltip）より上 */
	top: 0;
	left: 0;
	width: var(--ntg-mappop-w);
	background: var(--ntg2-surface, #fff);
	color: var(--ntg2-text, #222);
	border: 1px solid var(--ntg2-line, #d9d4c7);
	border-radius: 10px;
	box-shadow: var(--ntg2-shadow-float, 0 8px 28px rgba(0, 0, 0, .22));
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* 窓が語に重なっても、マウスが外れた扱いにしない（開閉のちらつき防止） */
	transition: opacity .12s, visibility 0s .12s;
}
.ntg-mappop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .12s;
}
.ntg-mappop__head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1.5;
	border-bottom: 1px solid var(--ntg2-line, #d9d4c7);
}
.ntg-mappop__head b {
	font-weight: 600;
}
.ntg-mappop__head span {
	color: var(--ntg2-muted, #6b665c);
	white-space: nowrap;
}
.ntg-mappop__map {
	position: relative;
	width: var(--ntg-mappop-w);
	height: var(--ntg-mappop-w);
	background-color: #d8cfb8;
	background-repeat: no-repeat;
}
.ntg-mappop__pin {
	position: absolute;
	width: 0;
	height: 0;
}
.ntg-mappop__pin svg {
	position: absolute;
	left: -15px;
	top: -15px;
	overflow: visible;
}
.ntg-mappop__pin .halo {
	fill: none;
	stroke: #fff;
	stroke-width: 4.5;
	stroke-linecap: round;
	opacity: .9;
}
.ntg-mappop__pin .ink {
	fill: none;
	stroke: #d32f2f;
	stroke-width: 2;
	stroke-linecap: round;
}
.ntg-mappop__pin .dot {
	fill: #d32f2f;
	stroke: #fff;
	stroke-width: 1.5;
}