/* ==========================================================================
   跃起动力 · 课程播放器样式
   ========================================================================== */

.yqp {
	position: relative;
	overflow: hidden;
	border-radius: var(--yqd-r);
	background: #000;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none; /* iOS 长按 2 倍速时不弹系统菜单 */
	-webkit-tap-highlight-color: transparent;
}

.yqp__stage { position: relative; }

.yqp video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #000;
	cursor: pointer;
}

/* ---------------------------------------------------------------- 中央按钮 */

.yqp__center {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.yqp__big {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 33, 54, .74);
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	backdrop-filter: blur(4px);
	transition: opacity .2s ease, transform .2s ease, background .18s ease;
}

/* 触屏设备 tap 之后 :hover 会一直粘住（直到点别处），所以所有 hover 反馈
   只给真正有鼠标指针的设备。否则手机上「最后点过的那个按钮」会永久带着底色。 */
@media (hover: hover) {
	.yqp__big:hover { background: var(--yqd-primary); }
	.yqp.is-playing:hover .yqp__big { opacity: 1; transform: none; }
	.yqp__btn:hover { background: rgba(255, 255, 255, .16); }
	.yqp__track:hover .yqp__dot { opacity: 1; }
	.yqp__menu button:hover { background: rgba(255, 255, 255, .15); }
}

/*
 * 图标居中修复（2026-09-26）
 * 症状：中央大圆钮 / 底部控制条里的播放、暂停、音量等图标在圆钮内偏上约 4px。
 * 原因：按钮内 <span data-icon> 里的 <svg> 默认 display:inline，按文本基线对齐；
 *       字体 line-height（27.2px）的降部（descender）空间被算进 span 高度（26px 图标 → span 33.2px），
 *       flex 居中的是「含下方空隙的 span」，SVG 本体因此被顶上去。
 * 修复：SVG 块级化，span 高度即 SVG 高度，flex 居中回归真正居中。
 * 注意：切勿对 [data-icon] 本身设 display，否则优先级高过 [hidden]，播放/暂停图标会同时显示。
 */
.yqp [data-icon] > svg { display: block; }

.yqp.is-playing .yqp__big { opacity: 0; transform: scale(.86); }

/* -------------------------------------------------------------- 底部控件 */

.yqp__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 30px 12px 10px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
	transition: opacity .2s ease, transform .2s ease;
}

.yqp.is-idle .yqp__bar { opacity: 0; transform: translateY(6px); pointer-events: none; }

.yqp__btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}

.yqp__btn--text {
	width: auto;
	gap: 5px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}

.yqp__btn svg { display: block; }

.yqp__time {
	flex: none;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .88);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- 进度条 */

.yqp__track {
	position: relative;
	flex: 1;
	height: 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
}

.yqp__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .26);
}

.yqp__buf,
.yqp__played {
	position: absolute;
	left: 0;
	width: 0;
	height: 4px;
	border-radius: 2px;
}

.yqp__buf { background: rgba(255, 255, 255, .42); }
.yqp__played { background: var(--yqd-primary); }

.yqp__dot {
	position: absolute;
	left: 0;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(116, 86, 241, .35);
	opacity: 0;
	transition: opacity .15s ease;
}

/* ------------------------------------------------------------ 音量与菜单 */

.yqp__vol { flex: none; width: 74px; display: flex; align-items: center; }
.yqp.is-muted .yqp__vol { opacity: .45; }

.yqp__vol input {
	width: 100%;
	height: 4px;
	margin: 0;
	appearance: none;
	border-radius: 2px;
	background: rgba(255, 255, 255, .3);
	cursor: pointer;
}

.yqp__vol input::-webkit-slider-thumb {
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
}

.yqp__vol input::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}

.yqp__pick { position: relative; flex: none; }

.yqp__menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 6;
	min-width: 118px;
	padding: 6px;
	border-radius: 6px;
	background: rgba(16, 33, 54, .97);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

.yqp__menu button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.yqp__menu button.is-on { color: #b9a6ff; font-weight: 700; }

/* 选中项前面点一个小圆点，不用特殊符号 */
.yqp__menu button.is-on::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-right: -2px;
	border-radius: 50%;
	background: currentColor;
}

/* 菜单内禁用项（如「还原默认位置」无可还原时）：压暗且不响应 hover */
.yqp__menu button:disabled { opacity: .35; cursor: default; }
.yqp__menu button:disabled:hover { background: none; }

/* ------------------------------------------------------------ 提示与状态 */

.yqp__toast {
	position: absolute;
	left: 50%;
	bottom: 74px;
	transform: translateX(-50%);
	/* nowrap + 居中在窄屏/大字号下会把提示推出播放器两侧、被 overflow:hidden 裁掉
	   （截图里左侧只露出「…续」字的就是它）。改为限宽可换行，居中不变。 */
	max-width: calc(100% - 24px);
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(16, 33, 54, .92);
	color: #fff;
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	pointer-events: none;
}

.yqp__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid rgba(255, 255, 255, .28);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.yqp.is-loading .yqp__spinner,
.yqp.is-switching .yqp__spinner {
	opacity: 1;
	animation: yqp-spin .8s linear infinite;
}

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

/* ------------------------------------------------------------------ 全屏 */

.yqp.is-fs,
.yqp:fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.yqp.is-fs video,
.yqp:fullscreen video { width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------------------------------------------ 手机 */

@media (max-width: 781px) {
	.yqp__bar { gap: 4px; padding: 24px 8px 8px; }
	.yqp__btn { width: 32px; height: 32px; }
	.yqp__btn--text { padding: 0 8px; font-size: 12px; }
	.yqp__vol { display: none; }
	.yqp__time { font-size: 12px; }
	.yqp__big { width: 54px; height: 54px; }
}


/* -------------------------------------------- 播放器 v2：亮度遮罩与层级 */

.yqp__dim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s linear;
}

/* 控件必须在亮度遮罩之上 */
.yqp__center { z-index: 3; }
.yqp__bar { z-index: 4; }
.yqp__toast { z-index: 5; }
.yqp__spinner { z-index: 5; }

/* 菜单在更上层 */
.yqp__menu { z-index: 8; }

/* 触摸时不要触发浏览器的滚动/缩放手势 */
.yqp__stage { touch-action: none; }
.yqp video { touch-action: none; }

/* 切清晰度时的轻微反馈 */
.yqp.is-switching video { opacity: .55; transition: opacity .15s ease; }

/* ------------------------------------------------------------------ 字幕 */

/* 字幕框：可整体拖动；拖过后用内联 left/top，未拖动时贴底部居中 */
.yqp__cc {
	position: absolute;
	left: 50%;
	bottom: 64px;
	transform: translateX(-50%);
	z-index: 4;
	max-width: calc(100% - 32px);
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .72);
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
}

/* 控制条自动隐藏后字幕往下沉，不再和「底部留白」叠在一起 */
.yqp.is-idle .yqp__cc { bottom: 20px; }

.yqp__cc:active { cursor: grabbing; }

.yqp__cc-text { display: block; overflow-wrap: break-word; }