.bnc-player {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding: 14px 22px;
	background: rgba(255, 255, 255, .06);
	border-radius: 999px;
	font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

.bnc-player--admin-notice {
	display: block;
	background: #3a2a10;
	color: #f4d35e;
	border: 1px dashed #f4d35e;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: .85rem;
}

.bnc-player audio { display: none; }

.bnc-player .bnc-pbtn,
.bnc-player button.bnc-pbtn {
	all: unset;
	box-sizing: border-box;
	flex: none;
	width: 50px !important;
	height: 50px !important;
	min-width: 50px;
	max-width: 50px;
	border-radius: 50% !important;
	background: var(--gold, #F4D35E) !important;
	color: var(--navy, #1E293B) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .15s ease;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	line-height: 1;
	font-size: 0;
}
.bnc-player .bnc-pbtn:hover { transform: scale(1.06); }
.bnc-player .bnc-pbtn .bnc-icon-play { margin-left: 2px; }
.bnc-player .bnc-pbtn svg { display: block !important; width: 18px !important; height: 18px !important; }

.bnc-player .bnc-seek {
	flex: 1;
	min-width: 170px;
	appearance: none !important;
	-webkit-appearance: none !important;
	height: 8px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .16) !important;
	cursor: pointer;
	outline: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.bnc-seek::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--gold, #F4D35E) 0%,
		var(--gold, #F4D35E) var(--bnc-fill, 0%),
		rgba(255, 255, 255, .16) var(--bnc-fill, 0%),
		rgba(255, 255, 255, .16) 100%
	);
}
.bnc-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--gold, #F4D35E);
	border: 2px solid var(--navy, #1E293B);
	margin-top: -4px;
	cursor: pointer;
}
.bnc-seek::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
}
.bnc-seek::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--gold, #F4D35E);
}
.bnc-seek::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--gold, #F4D35E);
	border: 2px solid var(--navy, #1E293B);
	cursor: pointer;
}

.bnc-time {
	font-size: .8rem;
	color: var(--paper-2, #94A3B8);
	white-space: nowrap;
}

.bnc-player .bnc-speed,
.bnc-player button.bnc-speed {
	all: unset;
	box-sizing: border-box;
	font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace) !important;
	font-size: .74rem !important;
	font-weight: 700 !important;
	color: var(--gold, #F4D35E) !important;
	background: transparent !important;
	border: 1.5px solid rgba(244, 211, 94, .4) !important;
	border-radius: 999px !important;
	padding: 6px 12px !important;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
	flex: none;
}
.bnc-player .bnc-speed:hover { border-color: var(--gold, #F4D35E) !important; }

@media (max-width: 480px) {
	.bnc-player { flex-wrap: wrap; padding: 12px 16px; }
	.bnc-seek { order: 3; flex-basis: 100%; }
}

/* subtle highlight on the chapter that was last clicked to seek */
.chapter.is-active {
	box-shadow: 0 0 0 2px var(--gold, #F4D35E), 0 12px 26px -20px rgba(15,23,42,.22);
}