:root {
	--anc0-bgm-height: 82px;
	--anc0-bgm-pink: #e889a4;
	--anc0-bgm-pink-strong: #d9698a;
	--anc0-bgm-soft: #fff6f8;
	--anc0-bgm-line: #f0d6de;
	--anc0-bgm-ink: #514348;
}

#anc0-bgm-player {
	position: fixed;
	right: 22px;
	bottom: 18px;
	z-index: 100000;
	display: grid;
	grid-template-columns: auto minmax(145px, 220px) minmax(150px, 230px);
	grid-template-areas:
		"buttons track timeline"
		"status volume timeline";
	align-items: center;
	gap: 7px 14px;
	width: min(720px, calc(100vw - 44px));
	min-height: var(--anc0-bgm-height);
	box-sizing: border-box;
	padding: 12px 16px;
	color: var(--anc0-bgm-ink);
	background: rgba(255, 253, 253, .96);
	border: 1px solid var(--anc0-bgm-line);
	border-radius: 22px;
	box-shadow: 0 12px 34px rgba(109, 73, 84, .16);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-size: 13px;
	line-height: 1.35;
}

.anc0-bgm-buttons {
	grid-area: buttons;
	display: flex;
	gap: 7px;
}

.anc0-bgm-button {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: var(--anc0-bgm-pink);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease;
}

.anc0-bgm-button:hover,
.anc0-bgm-button:focus-visible {
	background: var(--anc0-bgm-pink-strong);
	transform: translateY(-1px);
	outline: 3px solid rgba(232, 137, 164, .2);
	outline-offset: 2px;
}

.anc0-bgm-button:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.anc0-bgm-button svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.anc0-bgm-track-wrap {
	grid-area: track;
	min-width: 0;
}

.anc0-bgm-track-wrap select {
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0 32px 0 12px;
	color: var(--anc0-bgm-ink);
	background-color: var(--anc0-bgm-soft);
	border: 1px solid var(--anc0-bgm-line);
	border-radius: 999px;
	font: inherit;
	box-shadow: none;
}

.anc0-bgm-status {
	grid-area: status;
	min-width: 79px;
	color: #9a7b84;
	font-size: 11px;
	letter-spacing: .06em;
}

#anc0-bgm-player.is-playing .anc0-bgm-status {
	color: var(--anc0-bgm-pink-strong);
}

.anc0-bgm-volume {
	grid-area: volume;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.anc0-bgm-volume svg {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	fill: #a7818d;
}

.anc0-bgm-volume input,
.anc0-bgm-timeline input {
	accent-color: var(--anc0-bgm-pink);
	cursor: pointer;
}

.anc0-bgm-volume input {
	width: 100%;
	min-width: 90px;
}

.anc0-bgm-timeline {
	grid-area: timeline;
	display: grid;
	grid-template-columns: 38px minmax(90px, 1fr) 38px;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.anc0-bgm-timeline input {
	width: 100%;
	margin: 0;
}

.anc0-bgm-time {
	color: #806b71;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

#anc0-bgm-site-frame {
	position: fixed;
	inset: 0 0 calc(var(--anc0-bgm-height) + 30px) 0;
	z-index: 99990;
	display: block;
	width: 100%;
	height: calc(100vh - var(--anc0-bgm-height) - 30px);
	background: #fffdfd;
	border: 0;
}

html.anc0-bgm-shell,
body.anc0-bgm-shell {
	overflow: hidden !important;
}

html.anc0-bgm-child #anc0-bgm-player {
	display: none !important;
}

@media (max-width: 720px) {
	:root {
		--anc0-bgm-height: 132px;
	}

	#anc0-bgm-player {
		right: 10px;
		bottom: max(10px, env(safe-area-inset-bottom));
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"buttons track"
			"status volume"
			"timeline timeline";
		width: calc(100vw - 20px);
		min-height: var(--anc0-bgm-height);
		padding: 10px 12px;
		border-radius: 19px;
		gap: 6px 10px;
	}

	.anc0-bgm-track-wrap select {
		height: 32px;
	}

	#anc0-bgm-site-frame {
		bottom: calc(var(--anc0-bgm-height) + 24px + env(safe-area-inset-bottom));
		height: calc(100vh - var(--anc0-bgm-height) - 24px - env(safe-area-inset-bottom));
	}
}

#anc0-bgm-dock {
	display: none;
}

body.anc0-bgm-shell #anc0-bgm-dock {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99995;
	display: block;
	height: calc(var(--anc0-bgm-height) + 30px);
	box-sizing: border-box;
	background: linear-gradient(180deg, #fffafa 0%, #fffdfd 100%);
	border-top: 1px solid var(--anc0-bgm-line);
	box-shadow: 0 -10px 30px rgba(109, 73, 84, .08);
}

@media (max-width: 720px) {
	body.anc0-bgm-shell #anc0-bgm-dock {
		height: calc(var(--anc0-bgm-height) + 24px + env(safe-area-inset-bottom));
	}
}

/* Desktop: integrate the persistent player into the empty space left of header search. */
@media (min-width: 1201px) {
	#anc0-bgm-player {
		top: 5px;
		right: auto;
		bottom: auto;
		left: 8px;
		grid-template-columns: auto minmax(120px, 180px) minmax(90px, 110px) auto;
		grid-template-areas: "buttons track volume timeline";
		gap: 6px 9px;
		width: min(510px, calc(100vw - 610px));
		min-height: 36px;
		padding: 3px 10px;
		border-radius: 999px;
		box-shadow: 0 3px 12px rgba(109, 73, 84, .08);
	}

	.anc0-bgm-button {
		width: 28px;
		height: 28px;
	}

	.anc0-bgm-button svg {
		width: 13px;
		height: 13px;
	}

	.anc0-bgm-track-wrap select {
		height: 28px;
		padding-left: 10px;
		font-size: 12px;
	}

	.anc0-bgm-status {
		min-width: 48px;
		white-space: nowrap;
	}

	.anc0-bgm-volume {
		gap: 5px;
	}

	.anc0-bgm-volume input {
		min-width: 68px;
	}

	.anc0-bgm-timeline {
		grid-template-columns: 34px minmax(65px, 1fr) 34px;
		gap: 5px;
	}

	#anc0-bgm-site-frame {
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
	}

	body.anc0-bgm-shell #anc0-bgm-dock {
		display: none;
	}
}

/* Compact controls: keep numeric time, hide seek and status text. */
.anc0-bgm-status,
.anc0-bgm-timeline label {
	display: none !important;
}

.anc0-bgm-timeline {
	grid-template-columns: auto auto;
	justify-content: end;
	gap: 0;
	white-space: nowrap;
}

.anc0-bgm-timeline .anc0-bgm-time:first-child::after {
	content: " /";
	margin-right: 3px;
	color: #b5969f;
}

@media (max-width: 720px) {
	:root {
		--anc0-bgm-height: 88px;
	}

	#anc0-bgm-player {
		grid-template-areas:
			"buttons track"
			"volume timeline";
		min-height: var(--anc0-bgm-height);
	}

	#anc0-bgm-site-frame {
		bottom: calc(var(--anc0-bgm-height) + 24px + env(safe-area-inset-bottom));
		height: calc(100vh - var(--anc0-bgm-height) - 24px - env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.anc0-bgm-button {
		transition: none;
	}
}