@charset "utf-8";
/* ============================================================
   52player 皮肤 · 复刻 + 重构样式表
   精灵图：images/player.png (300×400)、images/mode.gif (337×70)
   布局：原版 float 拼 980px → 改为 flex，尺寸/坐标保持不变
   内容：仅保留 980×35 播放器控制条，页面其余区块已移除
   ============================================================ */

* { box-sizing: border-box; }

:root {
	--ink: #1b1f24;
	--ink-3: #8b949e;
	--bg: #eef1f6;
}

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	display: flex;
	align-items: flex-start;      /* 播放器贴页面最顶端 */
	justify-content: center;
	min-height: 100vh;
	padding: 0 16px 24px;         /* 顶部不留白，左右防贴边 */
	font: 14px/1.65 "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ink);
	background:
		radial-gradient(1200px 480px at 50% -160px, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, #f4f6fa 0%, var(--bg) 100%);
	background-attachment: fixed;
}

.page {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}

/* ---------- 播放器舞台 ---------- */
.stage {
	display: flex;
	justify-content: center;
	overflow-x: auto;
	overflow-y: hidden;
}

/* ============================================================
   控制条本体 980×35
   ============================================================ */
.bg      { background: url(../images/player.png) no-repeat; }
.mode-bg { background: url(../images/mode.gif) no-repeat; }

.player {
	display: flex;
	flex: 0 0 auto;
	width: 980px;
	height: 35px;
	margin: 0 auto;
	user-select: none;
	-webkit-user-select: none;
	filter: drop-shadow(0 10px 22px rgba(24, 30, 40, .22));
}

.player a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.player a:focus-visible { outline: 2px solid #7fb6ff; outline-offset: 1px; border-radius: 3px; }

.player-l { flex: 0 0 3px; height: 35px; background-position: 0 0; }
.player-r { flex: 0 0 3px; height: 35px; background-position: -11px 0; }

.player-block {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 35px;
	background-position: 0 -38px;
	background-repeat: repeat-x;
}

.seprator {
	flex: 0 0 3px;
	height: 35px;
	background-position: -17px 0;
}

/* ---------- 播放列表下拉 ---------- */
.playlist {
	position: relative;
	flex: 0 0 240px;
	width: 240px;
	height: 18px;
	margin: 0 10px;
	border: 1px solid #6d6d6d;
	background: #585858;
}

.playlist > span {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	height: 18px;
	line-height: 18px;
	padding: 0 10px 0 20px;
	color: #fff;
	background-color: #616161;
	border-right: 1px solid #6d6d6d;
	white-space: nowrap;
	z-index: 2;
}

.playlist > span i {
	position: absolute;
	left: 4px;
	top: 3px;
	display: block;
	width: 10px;
	height: 11px;
	background-position: -43px -13px;
}

.playlist select {
	position: absolute;
	left: 55px;
	top: 0;
	width: 184px;
	height: 18px;
	padding: 0 2px;
	border: 0;
	outline: 0;
	font: 12px/18px "Microsoft YaHei", system-ui, sans-serif;
	color: #fff;
	background: #585858;
	color-scheme: dark;
	cursor: pointer;
	z-index: 1;
}

.playlist select option { background: #3a3a3a; color: #fff; }
.playlist select option:disabled { color: #8a8a8a; }

/* ---------- 控制按钮区 ---------- */
.controls {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 35px;
	padding: 0 5px;
}

.controls > a {
	display: block;
	flex: 0 0 auto;
	cursor: pointer;
}

.pre   { width: 26px; height: 26px; background-position: -92px -40px; margin: 0 2px; }
.next  { width: 26px; height: 27px; background-position: -253px -40px; margin: 0 2px; }
.play  { width: 30px; height: 30px; background-position: -130px -40px; margin: 0 2px; }
.pause { width: 30px; height: 30px; background-position: -171px -40px; margin: 0 2px; }

.pre:hover         { background-position: -92px -5px; }
.next:hover        { background-position: -253px -5px; }
.play:hover        { background-position: -130px -5px; }
.pause:hover       { background-position: -171px -5px; }

/* 播放/暂停图标互斥：paused 时显示 play */
.controls .play { display: none; }
.controls.is-paused .play { display: block; }
.controls.is-paused .pause { display: none; }

/* 音源加载中：当前按钮呼吸闪烁，避免「点了没反应」的错觉 */
.controls.is-loading .play,
.controls.is-loading .pause { animation: btn-pulse .9s ease-in-out infinite alternate; }

@keyframes btn-pulse { from { opacity: 1; } to { opacity: .4; } }

.modes {
	display: flex;
	align-items: center;
	float: none;
	margin: 0 2px;
}

.modes a {
	display: block;
	flex: 0 0 auto;
	cursor: pointer;
}

.random-mode { width: 28px; height: 26px; background-position: -61px -40px; }
.order-mode  { width: 28px; height: 26px; background-position: -31px -40px; }
.single-mode { width: 29px; height: 26px; background-position: 0 -40px; }

.random-mode:hover { background-position: -61px -5px; }
.order-mode:hover  { background-position: -31px -5px; }
.single-mode:hover { background-position: 0 -5px; }

.random-mode.is-active { background-position: -61px -5px; }
.order-mode.is-active  { background-position: -31px -5px; }
.single-mode.is-active { background-position: 0 -5px; }

.download {
	display: block;
	flex: 0 0 auto;
	height: 20px;
	line-height: 20px;
	margin: 0 2px;
	padding-left: 23px;
	color: #fff;
	font-size: 12px;
	background-position: -58px -10px;
	white-space: nowrap;
}

.download:hover { color: #ffd97a; }
.download.is-disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 信息区 ---------- */
.info {
	flex: 1 1 auto;
	min-width: 0;
	height: 35px;
	padding: 0 5px;
	color: #fff;
	font-size: 12px;
	overflow: hidden;
}

.info-top {
	display: flex;
	align-items: center;
	height: 15px;
	margin-top: 5px;
}

.song-name {
	flex: 1 1 auto;
	min-width: 0;
	height: 15px;
	line-height: 15px;
	margin-right: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info-top .time {
	flex: 0 0 auto;
	height: 15px;
	line-height: 15px;
	font-variant-numeric: tabular-nums;
	color: #e8e8e8;
}

.info-top .s {
	flex: 0 0 auto;
	width: 8px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	color: #9a9a9a;
}

.info .tracks {
	position: relative;
	width: 290px;
	max-width: 100%;
	height: 7px;
	margin-top: 4px;
	background-position: 0 -198px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.info .tracks .download-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 7px;
	margin-left: 2px;
	background-position: 0 -231px;
	background-repeat: repeat-x;
	min-width: 2px;
	z-index: 0;
}

.download-bar .l {
	float: left;
	width: 3px;
	height: 7px;
	margin-left: -3px;
	background-position: 0 -224px;
	font-size: 0;
}

.download-bar .r {
	float: right;
	width: 5px;
	height: 7px;
	margin-right: -3px;
	background-position: 0 -238px;
	font-size: 0;
}

.info .tracks .seek-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 7px;
	margin-left: 2px;
	background-position: 0 -271px;
	background-repeat: repeat-x;
	min-width: 2px;
	z-index: 1;
	pointer-events: none;
}

.seek-bar .l {
	float: left;
	width: 4px;
	height: 7px;
	margin-left: -3px;
	margin-top: -1px;
	background-position: 0 -262px;
	font-size: 0;
}

.seek-bar .r {
	position: absolute;
	right: 0;
	width: 3px;
	height: 7px;
	margin-right: -3px;
	background-position: -1px -279px;
	font-size: 0;
}

.seek-bar .point {
	position: absolute;
	right: 0;
	width: 13px;
	height: 13px;
	margin-right: -5px;
	margin-top: -4px;
	background-position: -146px -12px;
}

/* ---------- 音量 ---------- */
.volumn {
	flex: 0 0 110px;
	display: flex;
	align-items: center;
	height: 35px;
	padding: 0 5px;
	color: #fff;
}

.volumn .mute,
.volumn .unmute {
	display: block;
	flex: 0 0 20px;
	width: 20px;
	height: 17px;
	cursor: pointer;
}

/* 原版 52player.css 把两个图标对调了：-287,-2 其实是喇叭（有声），
   -287,-22 才是红叉（静音）。此处按精灵图实测坐标（喇叭 y≈4~14，
   红叉 y≈22~34）重新对齐并纠正映射。 */
.volumn .unmute { background-position: -286px -1px; }   /* 有声：喇叭 */
.volumn .mute   { background-position: -286px -20px; }  /* 静音：红叉 */

.volumn .mute { display: none; }
.volumn.is-muted .mute { display: block; }
.volumn.is-muted .unmute { display: none; }

.volumn .line {
	position: relative;
	flex: 0 0 80px;
	width: 80px;
	height: 10px;
	margin-left: 8px;
	background-position: 0 -107px;
	cursor: pointer;
}

.volumn .line .tracks {
	position: absolute;
	left: 6px;
	right: 0;
	top: 0;
	height: 10px;
}

.volumn-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 10px;
	margin-left: 2px;
	background-position: 0 -85px;
	background-repeat: repeat-x;
	min-width: 2px;
}

.volumn-bar .l {
	float: left;
	width: 4px;
	height: 10px;
	margin-left: -3px;
	background-position: 0 -75px;
	font-size: 0;
}

.volumn-bar .r {
	position: absolute;
	right: 0;
	width: 3px;
	height: 10px;
	margin-right: -3px;
	background-position: -1px -95px;
	font-size: 0;
}

.volumn-bar .point {
	position: absolute;
	right: 0;
	width: 15px;
	height: 15px;
	margin-right: -5px;
	margin-top: -2px;
	background-position: -122px -12px;
}

/* ---------- Toast ---------- */
.toast {
	position: fixed;
	left: 50%;
	bottom: 34px;
	transform: translate(-50%, 14px);
	max-width: min(560px, calc(100vw - 40px));
	padding: 9px 16px;
	border-radius: 10px;
	background: rgba(26, 30, 36, .93);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	box-shadow: 0 10px 26px rgba(16, 24, 40, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s, transform .22s;
	z-index: 99;
}

.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

.toast.warn { background: rgba(150, 44, 44, .95); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1040px) {
	.stage { justify-content: flex-start; }
}