@charset "utf-8";
/* ==========================================================================
   djmaomao — 音乐播放器样式
   --------------------------------------------------------------------------
   0) 隐藏「作者」
   1) 播放器卡片浅色皮肤 —— 首页 .player-card / 文章页 .music-box 共用
      （两处选择器始终成对出现，保证外观完全一致）
   2) 首页 Hero 布局
   3) 文章页卡片在正文流中的定位
   4) 移动端适配
   ========================================================================== */


/* ==========================================================================
   0. 隐藏「作者」
   --------------------------------------------------------------------------
   本站曲目是 DJ 音乐，没有作者概念。APlayer 内核在 audio.artist 缺省时
   会把列表里的作者兜底成「Audio artist」（见 xqplayer.js 中的
   `artist = e.artist || e.author || "Audio artist"`），
   所以这里必须显式隐藏，而不是只清空数据。
   ========================================================================== */

.aplayer .aplayer-music .aplayer-author,
.aplayer .aplayer-list ol li .aplayer-list-author {
	display: none !important;
}


/* ==========================================================================
   1. 播放器卡片浅色皮肤（首页 / 文章页共用）
   ========================================================================== */

.player-card,
.music-box {
	position: relative;
	padding: 10px;
	border: 1px solid #e2ecf6;
	border-radius: 22px;
	background: #ffffff;
	box-shadow:rgba(19, 94, 147, 0.1) 0px 18px 30px, rgba(19, 94, 147, 0.06) 0px 2px 6px;
	transition: box-shadow .3s ease;
}

/* 播放中：轻微的蓝色外发光 */
.player-card.playing,
.music-box.playing {
	box-shadow:
		0 14px 40px rgba(47, 146, 216, 0.12),
		0 4px 12px rgba(47, 146, 216, 0.08),
		0 0 12px rgba(74, 170, 240, 0.14);
}

.player-card .aplayer,
.music-box .aplayer {
	background: transparent !important;
	box-shadow: none !important;
	margin: 0 !important;
	border-radius: 14px;
	overflow: hidden;
}

.player-card .aplayer .aplayer-info,
.music-box .aplayer .aplayer-info {
	background: transparent !important;
	border-bottom: 0 !important;
}

/* 曲名 */
.player-card .aplayer .aplayer-music .aplayer-title,
.music-box .aplayer .aplayer-music .aplayer-title {
	color: #1c4266 !important;
	font-weight: 700;
	letter-spacing: .5px;
}

/* 时间与时间栏图标 */
.player-card .aplayer .aplayer-controller .aplayer-time,
.music-box .aplayer .aplayer-controller .aplayer-time {
	color: #93a9bd !important;
}

.player-card .aplayer .aplayer-controller .aplayer-time .aplayer-icon path,
.music-box .aplayer .aplayer-controller .aplayer-time .aplayer-icon path {
	fill: #7f9ab1 !important;
}

.player-card .aplayer .aplayer-controller .aplayer-time .aplayer-icon:hover path,
.music-box .aplayer .aplayer-controller .aplayer-time .aplayer-icon:hover path {
	fill: #135E93 !important;
}

/* ==========================================================
   唱片位（原「封面」字段已移除）
   --------------------------------------------------------------------------
   APlayer 把 .aplayer-pic 渲染成 66px 的方块（「封面」「歌词」两个字段均已移除，
   恒为 66px），播放 / 暂停按钮就叠在这个方块上。本站曲目是 DJ 音乐、不配封面，这里用纯 CSS 画一枚
   黑胶唱片（打碟盘）代替封面：
     · 唱片本体做在 ::before 伪元素上 —— 它是独立图层，自转不会带动按钮；
     · 播放时匀速旋转，暂停时「原地停住」（切换 animation-play-state，
       而不是删掉动画，所以不会跳回 0° 重新开始）；
     · 播放 / 暂停按钮是 .aplayer-pic 的子元素，始终浮在唱片之上。
   内核会给 .aplayer-pic 写入内联 background-color（主题色），
   所以下面带背景的声明一律 !important 压过内联样式。
   ========================================================== */
.player-card .aplayer .aplayer-pic,
.music-box .aplayer .aplayer-pic {
	border-radius: 50%;
	overflow: visible;
	background: transparent !important;
	box-shadow: none !important;
}

/* 唱片本体（独立图层，负责自转） */
.player-card .aplayer .aplayer-pic::before,
.music-box .aplayer .aplayer-pic::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-image:
		/* 斜向高光带：唱片转动时最醒目的视觉线索 */
		linear-gradient(118deg,
			rgba(255, 255, 255, 0) 34%,
			rgba(255, 255, 255, .14) 44%,
			rgba(255, 255, 255, .40) 50%,
			rgba(255, 255, 255, .14) 56%,
			rgba(255, 255, 255, 0) 66%),
		/* 左上柔光，模拟盘面反光 */
		radial-gradient(circle closest-side at 34% 26%,
			rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 62%),
		/* 极淡的彩色反光，做出「打碟」的通透质感 */
		conic-gradient(from 210deg,
			rgba(82, 196, 255, .20), rgba(150, 122, 255, .14),
			rgba(255, 122, 190, .14), rgba(120, 255, 214, .12),
			rgba(82, 196, 255, .20)),
		/* 盘缘两道细亮环，增强黑胶边缘质感 */
		radial-gradient(circle closest-side at 50% 50%,
			rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, .16) 95%, rgba(255, 255, 255, 0) 100%),
		/* 细密同心圆唱片纹 */
		repeating-radial-gradient(circle closest-side at 50% 50%,
			rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, .08) 1px,
			rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 4px),
		/* 盘面底色：中心稍亮、边缘压暗，做出黑胶的厚度 */
		radial-gradient(circle closest-side at 50% 50%,
			#3a4048 0%, #262b31 42%, #191c21 72%, #0e1013 100%);
	background-repeat: no-repeat;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .12),
		inset 0 -4px 9px rgba(0, 0, 0, .45),
		0 3px 10px rgba(9, 40, 70, .28);
	animation: uc-vinyl-spin 60s linear infinite;
	/* 默认静止；播放中由下面的 :has 规则切到 running */
	animation-play-state: paused;
	will-change: transform;
}

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

/* 播放中：唱片开始自转（按钮换成 pause 类后立即生效）；
   暂停时 animation-play-state 回到 paused，碟子原地停住。 */
.player-card .aplayer:has(.aplayer-button.aplayer-pause) .aplayer-pic::before,
.music-box .aplayer:has(.aplayer-button.aplayer-pause) .aplayer-pic::before {
	animation-play-state: running;
}

/* ==========================================================
   播放 / 暂停按钮 —— 透明按钮 + 放大的白色图标
   --------------------------------------------------------------------------
   按钮仍是内核的同一个 .aplayer-button 元素（在 aplayer-play /
   aplayer-pause 两个 class 之间切换），零 JS 改动：
     · 去掉内核的白圈 / 半透明底 / 阴影，按钮完全透明；
     · 44px 的透明热区居中在唱片上，点击手感更好；
     · 内核自带的 SVG 图标放大并居中显示，配柔和投影，
       保证在深色盘面上清晰可读。
   ========================================================== */
.player-card .aplayer .aplayer-pic .aplayer-button,
.music-box .aplayer .aplayer-pic .aplayer-button {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	bottom: 50% !important;
	right: 50% !important;
	margin: 0 -22px -22px 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	opacity: 1 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
}

/* 内核 SVG 图标：脱离内核的绝对定位，交给 flex 居中并放大 */
.player-card .aplayer .aplayer-pic .aplayer-button svg,
.music-box .aplayer .aplayer-pic .aplayer-button svg {
	position: static !important;
	display: block !important;
	width: 27px !important;
	height: 27px !important;
	top: auto !important;
	left: auto !important;
	margin: 0 !important;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
	transition: transform .18s ease, filter .18s ease;
}

/* 播放三角的图形重心天然偏左，补 2px 让它看起来正居中 */
.player-card .aplayer .aplayer-pic .aplayer-play svg,
.music-box .aplayer .aplayer-pic .aplayer-play svg {
	margin-left: 4px !important;
}

/* 悬停：图标微微放大提亮，提示可点 */
.player-card .aplayer .aplayer-pic .aplayer-button:hover svg,
.music-box .aplayer .aplayer-pic .aplayer-button:hover svg {
	transform: scale(1.1);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65)) brightness(1.08);
}

/* 尊重系统「减少动态效果」：唱片不转、悬停不再缩放，但功能照常可用 */
@media (prefers-reduced-motion: reduce) {
	.player-card .aplayer .aplayer-pic::before,
	.music-box .aplayer .aplayer-pic::before {
		animation: none !important;
	}

	.player-card .aplayer .aplayer-pic .aplayer-button svg,
	.music-box .aplayer .aplayer-pic .aplayer-button svg {
		transition: none !important;
	}
}

/* 进度条 / 音量条 */
.player-card .aplayer .aplayer-bar,
.music-box .aplayer .aplayer-bar {
	background: #e5eef7 !important;
}

.player-card .aplayer .aplayer-bar .aplayer-loaded,
.music-box .aplayer .aplayer-bar .aplayer-loaded {
	background: #d2e2f0 !important;
}

.player-card .aplayer .aplayer-volume-bar,
.music-box .aplayer .aplayer-volume-bar {
	background: #e5eef7 !important;
}

/* 播放列表 */
.player-card .aplayer .aplayer-list,
.music-box .aplayer .aplayer-list {
	background: #fbfdff !important;
}

/* 行内右侧图标区改为绝对定位（见 .music-acts），因此这里预留固定宽度：
   标题再长也只会被省略号截断，不会把图标挤到第二行藏进 overflow:hidden 里 */
.player-card .aplayer .aplayer-list ol li,
.music-box .aplayer .aplayer-list ol li {
	color: #3d5f7d !important;
	border-top: 1px solid #eef4fa !important;
	padding-right: 179px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.player-card .aplayer .aplayer-list ol li:hover,
.music-box .aplayer .aplayer-list ol li:hover {
	background: #f2f8fd !important;
}

.player-card .aplayer .aplayer-list ol li.aplayer-list-light,
.music-box .aplayer .aplayer-list ol li.aplayer-list-light {
	background: linear-gradient(90deg, rgba(47, 146, 216, .13), rgba(47, 146, 216, .02)) !important;
	color: #135E93 !important;
}

.player-card .aplayer .aplayer-list ol li .aplayer-list-index,
.music-box .aplayer .aplayer-list ol li .aplayer-list-index {
	color: #a8bccd !important;
}

.player-card .aplayer .aplayer-list ol::-webkit-scrollbar,
.music-box .aplayer .aplayer-list ol::-webkit-scrollbar {
	width: 6px;
}

.player-card .aplayer .aplayer-list ol::-webkit-scrollbar-thumb,
.music-box .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(19, 94, 147, .18);
}

.player-card .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover,
.music-box .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
	background: rgba(19, 94, 147, .32);
}

/* 列表右侧：播放次数 + 收藏 / 点赞 / 下载 三枚灰色实心小图标
   必须绝对定位：原来用 float:right 时，标题一换行，图标的源位置就落到第二行，
   而行高固定 32px 且 overflow:hidden，第二行被裁掉 → 图标像是"消失"了 */
.music-acts {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 13px;
	height: 32px;
	margin-left: 0;
}

/* 播放次数：只读展示（耳机图标 + 数字），不参与点击 */
.music-plays {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #a8bccd;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

.music-plays i {
	font-size: 12px;
	line-height: 1;
}

.music-plays em {
	font-style: normal;
	font-size: 12px;
}

.music-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: #a8bccd;               /* 默认：灰色实心图标 */
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}

.music-act i {
	font-size: 14px;
	line-height: 1;
}

.music-act:hover {
	color: #135E93;
	transform: scale(1.18);
	text-decoration: none;
}

/* 第三枚图标（下载样式）本质是「跳文章页」的普通链接，不是功能按钮：
   未访问 / 已访问 / 悬停 / 按下都保持原本的灰色，也不做放大动效。
   （必须显式写 :link/:visited —— 主题全局 a:visited 的优先级高于单类名，
     否则点过一次文章后这个图标会被染成蓝色。） */
.music-act-post:link,
.music-act-post:visited,
.music-act-post:hover,
.music-act-post:active,
.music-act-post:focus {
	color: #a8bccd;               /* 恒灰，任何状态下都不变色 */
	transform: none;
	text-decoration: none;
}

/* 已收藏 / 已点赞：本站主题蓝 */
.music-act.is-on,
.music-act.is-on:hover {
	color: #1d6fbf;
}

/* 点赞一次后锁定：保持蓝色，去掉悬停动效 */
.music-act[disabled] {
	cursor: default;
	opacity: 1;
}

.music-act[disabled]:hover {
	transform: none;
}


/* ==========================================================================
   2. 首页 Hero 布局
   ========================================================================== */

/* 首页保持主题原本的白底（body 已自带 header_bg.gif 顶部条） */
body.home {
	min-height: 100vh;
}

/* 播放器页（首页 / latest / ranking / playlist）整页高度：
   让 #page 变成一列，header + hero + footer 恰好填满一屏。
   hero 自己撑满中间的剩余空间，页脚被顶到视口底部，
   即便只有一两首歌也不会因为「hero 占满 100vh + 页脚」而多出纵向滚动条。 */
body:has(#hero) #page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#hero {
	position: relative;
	box-sizing: border-box;
	flex: 1 0 auto;
	min-height: 0;
	padding: 30px 0 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
}

body:has(#hero) #footer {
	margin-top: auto;
}

.hero-inner {
	position: relative;
	z-index: 1;
	width: 680px;
	max-width: 100%;
}

/* 仅供读屏 / 搜索引擎的隐藏标题：
   播放器四页（首页、/latest、/ranking、/playlist）视觉上不出现标题，
   但页面仍需要一个 <h1> 来说明本页是什么，故用此隐藏类兜住语义。 */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0 !important;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hero-head {
	margin-bottom: 22px;
	text-align: center;
}

/* 覆盖 iris 全局 h1 样式（高度 / 左外边距 / 颜色） */
.hero-title {
	height: auto;
	margin: 0 0 8px 0;
	padding: 0;
	color: #135E93;
	font: 700 30px/1.3 "Microsoft YaHei", "Segoe UI", Tahoma, Arial, sans-serif;
	letter-spacing: 3px;
}

.hero-sub {
	margin: 0;
	color: #8ba3b8;
	font-size: 13px;
	letter-spacing: 1.5px;
}

/* 首页列表高度 */
.player-card .aplayer .aplayer-list,
.player-card .aplayer .aplayer-list ol {
	max-height: min(520px, 60vh) !important;
}

.player-card .aplayer .aplayer-list ol {
	overflow-y: auto !important;
}

/* 分页 */
.home-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 12px 0 0;
}

.home-pager:empty {
	display: none;
}

.home-pager button {
	min-width: 34px;
	height: 32px;
	padding: 0 11px;
	border: 1px solid #dde9f4;
	border-radius: 10px;
	background: #ffffff;
	color: #5f7f9a;
	font: 13px/30px "Microsoft YaHei", "Segoe UI", Tahoma, sans-serif;
	cursor: pointer;
	transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.home-pager button:hover {
	background: #f2f8fd;
	border-color: #bcd8ee;
	color: #135E93;
	transform: translateY(-1px);
}

.home-pager button.active {
	background: linear-gradient(180deg, #3aa0f0, #1d6fbf);
	border-color: #1d6fbf;
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(29, 111, 191, .32);
}

/* 空状态 / 提示 */
.hero-tip {
	margin: 18px 0 0;
	text-align: center;
	color: #a8bccd;
	font-size: 12px;
	letter-spacing: 1px;
}

.hero-tip:empty {
	display: none;
}


/* ==========================================================================
   3. 文章页：卡片在正文流中的定位
   （外观已在第 1 段与首页共用，这里只管位置与宽度）
   ========================================================================== */

.music-box {
	clear: both;
	margin: 14px 0 7px;
}


/* 进度条 2px → 4px */
.player-card .aplayer .aplayer-bar,
.music-box .aplayer .aplayer-bar,
.player-card .aplayer .aplayer-bar .aplayer-loaded,
.music-box .aplayer .aplayer-bar .aplayer-loaded,
.player-card .aplayer .aplayer-bar .aplayer-played,
.music-box .aplayer .aplayer-bar .aplayer-played {
	height: 4px;
}

/* 圆点 10px → 14px，margin 是重新居中用的，别漏 */
.player-card .aplayer .aplayer-thumb,
.music-box .aplayer .aplayer-thumb {
	width: 14px;
	height: 14px;
	margin-top: -5px;
	margin-right: -12px;
}

/* 时间文字 11px → 13px */
.player-card .aplayer .aplayer-controller .aplayer-time,
.music-box .aplayer .aplayer-controller .aplayer-time {
	font-size: 13px;
}

/* —— 放大控制栏右侧的图标按钮：15px → 22px —— */
.player-card .aplayer .aplayer-time .aplayer-icon,
.music-box .aplayer .aplayer-time .aplayer-icon {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   4. 移动端适配
   ========================================================================== */

@media (max-width: 1000px) {
	body.home #page {
		width: 100%;
		max-width: 960px;
		box-sizing: border-box;
		padding-left: 12px;
		padding-right: 12px;
	}

	body.home #nav .page_item a {
		padding: 9px 12px;
	}
}

@media (max-width: 768px) {
	/* 页头在窄屏下改为纵向排布，避免绝对定位的副标题溢出 */
	body.home #headerimg {
		height: auto;
	}

	body.home #description {
		position: static;
		height: auto;
		margin-top: 2px;
	}

	#hero {
		padding: 24px 0 60px;
	}

	.hero-title {
		font-size: 22px;
		letter-spacing: 1px;
	}

	.hero-sub {
		font-size: 12px;
		letter-spacing: .5px;
	}

	.player-card,
	.music-box {
		padding: 12px 10px 2px;
		border-radius: 18px;
	}

	.player-card .aplayer .aplayer-list,
	.player-card .aplayer .aplayer-list ol {
		max-height: 42vh !important;
	}

	.home-pager button {
		min-width: 30px;
		height: 30px;
		font-size: 12px;
		line-height: 28px;
	}
}

@media (max-width: 480px) {
	/* 窄屏下收起音量按钮，给进度条和时间留空间 */
	.player-card .aplayer .aplayer-volume-wrap,
	.music-box .aplayer .aplayer-volume-wrap {
		display: none;
	}

	.player-card .aplayer .aplayer-time,
	.music-box .aplayer .aplayer-time {
		font-size: 10px;
		padding-left: 4px;
	}
}