/**
 * Qing 世界地图点位分布小部件样式（源码复刻版）。
 *
 * 结构：
 *   .qing-mm                       地图舞台（flex 居中 + 定位基准 + CSS 变量宿主）
 *     > img.qing-mm__img           地图图片（默认 height:350px，手机端 150px）
 *     > .qing-mm__item             单个点位（绝对定位，left/top 百分比，左上角对齐坐标）
 *         > span.qing-mm__label    药丸标签（点亮/悬停时上方弹出）
 *         > svg.qing-mm__svg       水滴 pin marker
 *
 * 变量（由 PHP selectors 注入到 .qing-mm）：
 *   --mm-size / --mm-normal / --mm-active
 *
 * 颜色与源站一致：普通 #bdbdbd、点亮 #1c59ad。
 */

.qing-mm {
	--mm-size: 20px;
	--mm-normal: #bdbdbd;
	--mm-active: #1c59ad;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	line-height: 0;
}

/* 地图图片：源站默认 width:100% height:350px（拉伸铺满）。 */
.qing-mm__img {
	display: block;
	width: 100%;
	height: 350px;
	object-fit: fill;
	user-select: none;
	pointer-events: none;
}

/* 单个点位：绝对定位，左上角对齐 (left%, top%)，与源站 .wd-* 一致。 */
.qing-mm__item {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	line-height: normal;
	cursor: default;
}

.qing-mm__item:hover,
.qing-mm__item.is-current {
	z-index: 100;
}

/* 药丸标签：默认隐藏在 marker 上方，点亮/悬停时弹出。 */
.qing-mm__label {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate( -50%, -110% ) scale( 0.8 );
	padding: 0 10px;
	width: max-content;
	background-color: var( --mm-active );
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	white-space: nowrap;
	border-radius: 50vw;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
	pointer-events: none;
}

.qing-mm__item:hover .qing-mm__label,
.qing-mm__item.is-current .qing-mm__label {
	transform: translate( -50%, -100% ) scale( 1 );
	opacity: 1;
	visibility: visible;
}

/* 水滴 pin marker：源站 svg width:20px height:auto。 */
.qing-mm__svg {
	display: block;
	width: var( --mm-size );
	height: auto;
}

.qing-mm__svg path {
	fill: var( --mm-normal );
	transition: fill 0.5s;
}

.qing-mm__item:hover .qing-mm__svg path,
.qing-mm__item.is-current .qing-mm__svg path {
	fill: var( --mm-active );
}

/* 手机端：marker 整体缩小到 0.6，图片高度降为 150px（复刻源站 @768）。 */
@media screen and ( max-width: 768px ) {
	.qing-mm__img {
		height: 150px;
	}

	.qing-mm__item {
		transform: scale( 0.6 );
	}
}

/* 尊重系统"减少动态效果"偏好。 */
@media ( prefers-reduced-motion: reduce ) {
	.qing-mm__label,
	.qing-mm__svg path {
		transition-duration: 0.01ms;
	}
}