/* ===== DiscoPlayer 播放器样式（白底 + 迪斯科点缀） ===== */

/* --- 通用：徽章 --- */
.dp-badge {
	display: inline-block;
	font-size: 10px;
	padding: 0 6px;
	border-radius: 8px;
	margin-left: 6px;
	vertical-align: middle;
	font-style: normal;
}

.dp-badge.ai { background: #f0e6ff; color: #8c00ff; }
.dp-badge.original { background: #ffe3f1; color: #c8006f; }

/* --- 首页：3D 全屏背景层 --- */
#scene3d {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	display: block;
}

/* --- 首页：前景唱片机层（固定右侧，竖排，最前面） --- */
.player-layer {
	position: fixed;
	right: 3%;
	top: 50%;
	transform: translateY(-42%);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: none; /* 只让画布和信息卡可点，其余区域穿透 */
}

#player3d {
	width: 300px;
	height: 270px;
	pointer-events: auto;
}

/* --- 唱片机舞台：呼吸光环 + 上下浮动，让人一眼知道它能点 --- */
.pl-stage {
	position: relative;
	animation: stage-bob 2.6s ease-in-out infinite;
	filter: drop-shadow(0 0 16px rgba(255, 47, 146, 0.55)) drop-shadow(0 0 34px rgba(140, 0, 255, 0.35));
}

@keyframes stage-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

/* 霓虹星环：外圈锥形渐变流光（顺时针）+ 内圈虚线环（逆时针）+ 呼吸光晕 */
.pl-stage::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 2%;
	left: 4%;
	right: 4%;
	bottom: 6%;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgba(255, 47, 146, 0.0) 40deg,
		rgba(255, 47, 146, 0.85) 90deg,
		rgba(255, 214, 240, 0.9) 120deg,
		rgba(140, 0, 255, 0.85) 180deg,
		rgba(255, 47, 146, 0.0) 260deg,
		transparent 360deg
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	animation: stage-spin 6s linear infinite;
	pointer-events: none;
	filter: drop-shadow(0 0 6px rgba(255, 47, 146, 0.6));
}

.pl-stage::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 6%;
	left: 8%;
	right: 8%;
	bottom: 10%;
	border: 2px dashed rgba(255, 47, 146, 0.55);
	border-radius: 50%;
	box-shadow:
		0 0 12px rgba(255, 47, 146, 0.35),
		inset 0 0 12px rgba(140, 0, 255, 0.25);
	animation: stage-spin-rev 11s linear infinite, stage-ring-pulse 2.6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes stage-spin {
	to { transform: rotate(360deg); }
}

@keyframes stage-spin-rev {
	to { transform: rotate(-360deg); }
}

@keyframes stage-ring-pulse {
	0%, 100% { border-color: rgba(255, 47, 146, 0.55); box-shadow: 0 0 10px rgba(255, 47, 146, 0.3), inset 0 0 10px rgba(140, 0, 255, 0.2); }
	50% { border-color: rgba(140, 0, 255, 0.65); box-shadow: 0 0 22px rgba(255, 47, 146, 0.55), inset 0 0 18px rgba(140, 0, 255, 0.4); }
}

/* 播放中：星环加速狂转、光晕更猛（夜场电蓝光晕） */
body.playing .pl-stage::before { animation-duration: 1.6s; filter: drop-shadow(0 0 10px rgba(70, 140, 255, 0.9)); }

body.playing .pl-stage::after {
	animation: stage-spin-rev 3s linear infinite, stage-ring-pulse 1s ease-in-out infinite;
}

/* 中心播放键：悬浮在唱片机中央的玻璃霓虹圆钮 */
.pl-center {
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 62px;
	height: 62px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.15) 45%),
		linear-gradient(135deg, rgba(255, 47, 146, 0.85), rgba(140, 0, 255, 0.85));
	box-shadow:
		0 0 18px rgba(255, 47, 146, 0.55),
		0 0 40px rgba(140, 0, 255, 0.3),
		inset 0 0 12px rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, box-shadow 0.3s ease;
	animation: center-breathe 2.6s ease-in-out infinite;
}

.pl-center svg {
	width: 26px;
	height: 26px;
	fill: #fff;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.pl-center .ic-play { margin-left: 3px; } /* 三角形视觉居中 */

.pl-center:hover {
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow:
		0 0 24px rgba(255, 47, 146, 0.8),
		0 0 56px rgba(140, 0, 255, 0.45),
		inset 0 0 14px rgba(255, 255, 255, 0.45);
}

.pl-center.playing { animation-duration: 1.1s; }

@keyframes center-breathe {
	0%, 100% { box-shadow: 0 0 14px rgba(255, 47, 146, 0.45), 0 0 30px rgba(140, 0, 255, 0.25), inset 0 0 12px rgba(255, 255, 255, 0.3); }
	50% { box-shadow: 0 0 24px rgba(255, 47, 146, 0.75), 0 0 52px rgba(140, 0, 255, 0.45), inset 0 0 16px rgba(255, 255, 255, 0.45); }
}

/* 引导气泡（已停用，保留样式防旧缓存引用） */
.pl-bubble {
	position: absolute;
	top: -4%;
	right: -6%;
	z-index: 3;
	padding: 6px 12px;
	border-radius: 14px;
	background: linear-gradient(135deg, #ff2f92, #c8006f 45%, #8c00ff);
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	font-family: "宋体";
	white-space: nowrap;
	box-shadow: 0 0 14px rgba(255, 47, 146, 0.85);
	animation: bubble-pulse 1.1s ease-in-out infinite;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.pl-bubble::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 22px;
	border: 7px solid transparent;
	border-top-color: #d6007f;
}

@keyframes bubble-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.14); }
}

.pl-bubble.hide {
	opacity: 0;
}

.pl-info {
	pointer-events: auto;
	width: 300px;
	padding: 12px 16px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(6px);
	box-shadow: 0 4px 18px rgba(200, 0, 111, 0.18);
	text-align: center;
	box-sizing: border-box;
}

/* 手机端：回到文档流（内容区与黑板之间），从上到下排列、水平居中 */
@media (max-width: 991px) {
	.player-layer {
		position: static;
		transform: none;
		margin: 6px auto;
	}

	#player3d {
		width: 220px;
		height: 198px;
	}

	.pl-info {
		width: 280px;
		padding: 8px 12px 8px;
	}

	/* 音乐页唱片卡片不溢出 */
	.disco-card {
		width: 100%;
		max-width: 460px;
		padding: 14px 14px 12px;
		gap: 12px;
	}
}

.pl-title {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
}

.pl-artist {
	font-size: 12px;
	color: #999;
	margin: 2px 0 6px;
}

.pl-tip {
	font-size: 11px;
	color: rgba(120, 0, 90, 0.5);
	margin-bottom: 6px;
}

.pl-controls {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 8px;
}

/* 播放/暂停等圆钮：迪斯科闪光风（流光扫过动画在 site.css 统一定义） */
.hud-btn {
	position: relative;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff2f92, #c8006f 45%, #8c00ff);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(200, 0, 111, 0.35);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: disco-glow 2.4s ease-in-out infinite;
}

.hud-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 16px rgba(255, 47, 146, 0.55);
}

.hud-btn.main {
	width: 48px;
	height: 48px;
	font-size: 18px;
}

/* 播放模式钮：小一号，下方带模式名 */
.hud-btn.mode {
	width: 34px;
	height: 34px;
	font-size: 13px;
	align-self: center;
}

/* 控制钮里的 SVG 线性图标 */
.hud-btn svg {
	width: 16px;
	height: 16px;
	display: block;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pl-mode-name {
	font-size: 12px;
	margin-top: -4px;
	margin-bottom: 6px;
	font-weight: bold;
	font-family: "Segoe Script", "STXingkai", "华文行楷", "KaiTi", "楷体", cursive;
	letter-spacing: 2px;
	background: linear-gradient(90deg, #ff9a00, #ff2f92, #8c00ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: disco-mode-flow 3s linear infinite;
	background-size: 300% 100%;
}

@keyframes disco-mode-flow {
	0% { background-position: 0% 0; filter: drop-shadow(0 0 3px rgba(255, 47, 146, 0.5)); }
	50% { filter: drop-shadow(0 0 7px rgba(140, 0, 255, 0.6)); }
	100% { background-position: 300% 0; filter: drop-shadow(0 0 3px rgba(255, 47, 146, 0.5)); }
}

.pl-progress {
	height: 6px;
	border-radius: 3px;
	background: #f0e6ff;
	cursor: pointer;
	overflow: hidden;
}

.pl-progress .bar {
	height: 100%;
	width: 0%;
	border-radius: 3px;
	background: linear-gradient(90deg, #ff2f92, #ff9a00, #8c00ff);
	transition: width 0.15s linear;
}

.pl-time {
	font-size: 11px;
	color: #999;
	margin-top: 4px;
	font-family: monospace;
}

/* --- 音乐页：大唱片卡片播放器 --- */
.disco-card {
	width: 460px;
	margin: 0 auto 18px;
	padding: 22px 26px 18px;
	border-radius: 14px;
	background: #fff;
	border: 2px solid transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, #ff2f92, #8c00ff) border-box;
	box-shadow: 0 6px 24px rgba(140, 0, 255, 0.12);
	display: flex;
	gap: 20px;
	align-items: center;
	box-sizing: border-box;
}

/* 旋转唱片（CSS 绘制） */
.dp-disc {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	background:
		repeating-radial-gradient(circle, #1a1a1a 0 2px, #262626 2px 4px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(255, 255, 255, 0.08);
}

.dp-disc::before { /* 唱片光泽 */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 200deg, transparent 0deg, rgba(255, 255, 255, 0.12) 40deg, transparent 90deg, transparent 200deg, rgba(255, 255, 255, 0.1) 240deg, transparent 290deg);
}

.dp-disc .dp-label {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: conic-gradient(#ff004c, #ff9a00, #ffe95c, #8c00ff, #ff00a8, #ff004c);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.dp-disc .dp-label::after { /* 中孔 */
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fdfbff;
}

@keyframes dp-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.disco-card.playing .dp-disc {
	animation: dp-spin 2.4s linear infinite;
}

/* 频谱条（CSS 模拟） */
.dp-spectrum {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 26px;
	margin: 8px 0;
}

.dp-spectrum i {
	width: 5px;
	border-radius: 2px;
	background: linear-gradient(180deg, #ff2f92, #8c00ff);
	height: 20%;
}

@keyframes dp-eq {
	0%, 100% { height: 20%; }
	50% { height: 100%; }
}

.disco-card.playing .dp-spectrum i {
	animation: dp-eq 0.9s ease-in-out infinite;
}

.disco-card.playing .dp-spectrum i:nth-child(2) { animation-delay: 0.15s; }
.disco-card.playing .dp-spectrum i:nth-child(3) { animation-delay: 0.3s; }
.disco-card.playing .dp-spectrum i:nth-child(4) { animation-delay: 0.1s; }
.disco-card.playing .dp-spectrum i:nth-child(5) { animation-delay: 0.25s; }
.disco-card.playing .dp-spectrum i:nth-child(6) { animation-delay: 0.05s; }
.disco-card.playing .dp-spectrum i:nth-child(7) { animation-delay: 0.35s; }

.dp-info {
	flex: 1;
	min-width: 0;
}

.dp-track-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
}

.dp-track-artist {
	font-size: 12px;
	color: #999;
	margin-top: 2px;
}

.dp-controls {
	display: flex;
	gap: 10px;
	margin: 8px 0;
}

.dp-controls .hud-btn {
	width: 34px;
	height: 34px;
	font-size: 13px;
}

.dp-controls .hud-btn.main {
	width: 40px;
	height: 40px;
	font-size: 16px;
}

.dp-progress {
	height: 6px;
	border-radius: 3px;
	background: #f0e6ff;
	cursor: pointer;
	overflow: hidden;
}

.dp-progress .bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #ff2f92, #ff9a00, #8c00ff);
	transition: width 0.15s linear;
}

.dp-time {
	font-size: 11px;
	color: #999;
	font-family: monospace;
	margin-top: 4px;
	display: flex;
	justify-content: space-between;
}