/* Better Music Song Page styles. Adjust this file to tune all song learning pages. */

.bm-song-page {
	--bm-page-bg: #f6f8fb;
	--bm-ink: #0f172a;
	--bm-muted: #64748b;
		--bm-secondary: #475569;
		--bm-line: #e2e8f0;
		--bm-paper: #ffffff;
		--bm-soft: #f8fafc;
		--bm-navy: #1e293b;
		--bm-blue-gray: #5b6f94;
		--bm-red: #fee2e2;
		--bm-red-text: #991b1b;
		--bm-yellow: #fef3c7;
		--bm-yellow-text: #92400e;
		--bm-blue: #dbeafe;
		--bm-blue-text: #1e40af;
		--bm-purple: #ede9fe;
		--bm-purple-text: #5b21b6;
		--bm-green: #dcfce7;
		--bm-green-text: #166534;
		--bm-dark: #e2e8f0;
		--bm-dark-text: #334155;
	background: var(--bm-page-bg);
		color: var(--bm-ink);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}

	.bm-song-page * {
		box-sizing: border-box;
	}

	.bm-song-page-shell {
		max-width: 1120px;
		margin: 0 auto;
		padding: 32px 18px 56px;
	}

	.bm-song-page-hero {
		display: grid;
		grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
		gap: 22px;
		align-items: stretch;
		margin-bottom: 24px;
	}

	.bm-song-page-panel,
	.bm-song-page-player,
	.bm-song-page-card,
	.bm-song-page-summary,
	.bm-song-page-empty {
		background: var(--bm-paper);
		border: 1px solid var(--bm-line);
		border-radius: 10px;
		box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
	}

	.bm-song-page-panel {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 26px 28px;
	}

	.bm-song-page-kicker {
		margin: 0 0 10px;
		color: var(--bm-blue-text);
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.bm-song-page h1 {
		margin: 0;
		color: var(--bm-ink);
		font-size: 36px;
		line-height: 1.16;
		font-weight: 700;
		letter-spacing: .02em;
	}

	.bm-song-page-subtitle {
		margin: 10px 0 6px;
		color: #334155;
		font-size: 20px;
		line-height: 1.45;
		font-weight: 500;
	}

	.bm-song-page-intro,
	.bm-song-page-meta {
		margin: 0;
		color: var(--bm-muted);
		font-size: 17px;
		line-height: 1.6;
	}

	.bm-song-page-player {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		overflow: hidden;
		background: #000000;
	}

	.bm-song-page-player iframe,
	.bm-song-page-player-placeholder {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		border: 0;
	}

	.bm-song-page-player-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
		background: #f8fafc;
		color: var(--bm-muted);
		text-align: center;
	}

	.bm-song-page-section-title {
		margin: 28px 0 14px;
		font-size: 24px;
		line-height: 1.3;
	}

	.bm-song-page-list {
		display: grid;
		gap: 16px;
	}

	.bm-song-page-card {
		padding: 22px;
	}

	.bm-song-page-line-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		margin-bottom: 12px;
		border-radius: 50%;
		background: #e7efff;
		color: var(--bm-blue-text);
		font-weight: 700;
	}

	.bm-song-page-lyric-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 14px;
		margin-bottom: 8px;
	}

	.bm-song-page-chinese {
		margin: 0;
		color: var(--bm-ink);
		font-size: 34px;
		line-height: 1.35;
		font-weight: 700;
		letter-spacing: .02em;
	}

	.bm-song-page-play-line {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		border: 0;
		border-radius: 50%;
		background: var(--bm-navy);
		color: #ffffff;
		font-size: 18px;
		font-weight: 700;
		cursor: pointer;
	}

	.bm-song-page-token-strip {
		display: flex;
		flex-wrap: wrap;
		gap: 7px;
		margin: 0 0 12px;
		padding: 10px;
		border: 1px solid #e8eef6;
		border-radius: 8px;
		background: #f8fafc;
	}

	.bm-song-page-token {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
		border: 1px solid #e7edf5;
		border-bottom: 3px solid #d7e0eb;
		border-radius: 8px;
		background: #ffffff;
		color: #334155;
		font-size: 22px;
		font-weight: 600;
		cursor: pointer;
	}

	.bm-song-page-pinyin {
		margin: 0 0 8px;
		color: var(--bm-blue-gray);
		font-size: 21px;
		line-height: 1.5;
		font-weight: 500;
	}

	.bm-song-page-english {
		margin: 0 0 16px;
		color: var(--bm-secondary);
		font-size: 18px;
		line-height: 1.7;
	}

	.bm-song-page-vocab {
		border-top: 1px solid var(--bm-line);
		padding-top: 14px;
	}

	.bm-song-page-vocab summary {
		cursor: pointer;
		width: fit-content;
		padding: 10px 14px;
		border: 1px solid #dbe4ef;
		border-radius: 12px;
		background: #ffffff;
		color: #1e293b;
		font-weight: 600;
	}

	.bm-song-page-vocab summary:hover,
	.bm-song-page-vocab summary:focus {
		background: #f1f6fd;
		outline: 3px solid rgba(91, 111, 148, .12);
	}

	.bm-song-page-vocab[open] summary {
		margin-bottom: 16px;
	}

	.bm-song-page-group {
		margin-top: 14px;
		padding: 14px;
		border: 1px solid #edf2f7;
		border-radius: 8px;
		background: var(--bm-soft);
	}

	.bm-song-page-group-title {
		margin: 0 0 10px;
		font-size: 15px;
		font-weight: 700;
	}

	.bm-song-page-words {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.bm-song-page-word {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: 100%;
		padding: 8px 10px;
		border: 1px solid #e7edf5;
		border-radius: 8px;
		background: #ffffff;
		color: var(--bm-ink);
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	.bm-song-page-term {
		color: #334155;
		font-size: 21px;
		font-weight: 600;
		white-space: nowrap;
	}

	.bm-song-page-meaning {
		color: var(--bm-muted);
		font-size: 14px;
	}

	.bm-song-page-label {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
		padding: 3px 7px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;
		white-space: nowrap;
	}

	.bm-song-page-label.hsk-1 { background: var(--bm-red); color: var(--bm-red-text); }
	.bm-song-page-label.hsk-2 { background: var(--bm-yellow); color: var(--bm-yellow-text); }
	.bm-song-page-label.hsk-3 { background: var(--bm-blue); color: var(--bm-blue-text); }
	.bm-song-page-label.hsk-4 { background: var(--bm-purple); color: var(--bm-purple-text); }
	.bm-song-page-label.hsk-5 { background: var(--bm-green); color: var(--bm-green-text); }
	.bm-song-page-label.hsk-advanced { background: var(--bm-dark); color: var(--bm-dark-text); }

	.bm-song-page-summary,
	.bm-song-page-empty {
		margin-top: 28px;
		padding: 24px;
	}

	.bm-song-page-summary-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.bm-song-page-summary-box {
		padding: 16px;
		border: 1px solid #edf2f7;
		border-radius: 8px;
		background: var(--bm-soft);
	}

	.bm-song-page-summary-box h3 {
		margin: 0 0 8px;
		font-size: 17px;
	}

	.bm-song-page-summary-box p,
	.bm-song-page-empty p {
		margin: 0;
		color: var(--bm-muted);
		line-height: 1.55;
	}

	.bm-song-page-game {
		margin-top: 28px;
		padding: 24px;
		background: var(--bm-paper);
		border: 1px solid var(--bm-line);
		border-radius: 10px;
		box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
	}

	.bm-song-page-game-header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 18px;
	}

	.bm-song-page-game-header h2 {
		margin: 0 0 6px;
		font-size: 24px;
	}

	.bm-song-page-game-header p {
		margin: 0;
		color: var(--bm-muted);
		line-height: 1.55;
	}

	.bm-song-page-game-score {
		flex: 0 0 auto;
		padding: 8px 12px;
		border-radius: 999px;
		background: #eef2f7;
		color: #334155;
		font-size: 14px;
		font-weight: 700;
	}

	.bm-song-page-game-board {
		display: grid;
		grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
		gap: 16px;
	}

	.bm-song-page-game-prompt,
	.bm-song-page-game-choices {
		border: 1px solid #edf2f7;
		border-radius: 10px;
		background: #f8fafc;
		padding: 18px;
	}

	.bm-song-page-game-word {
		margin: 0;
		color: var(--bm-ink);
		font-size: 42px;
		line-height: 1.2;
		font-weight: 700;
		letter-spacing: .02em;
	}

	.bm-song-page-game-pinyin {
		margin: 8px 0 16px;
		color: var(--bm-blue-gray);
		font-size: 18px;
		font-weight: 500;
	}

	.bm-song-page-game-speak,
	.bm-song-page-game-next {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		padding: 10px 14px;
		border: 0;
		border-radius: 12px;
		background: var(--bm-navy);
		color: #ffffff;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}

	.bm-song-page-game-choices {
		display: grid;
		gap: 10px;
	}

	.bm-song-page-game-choice {
		width: 100%;
		min-height: 48px;
		padding: 12px 14px;
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		background: #ffffff;
		color: #334155;
		font: inherit;
		font-size: 16px;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
	}

	.bm-song-page-game-choice.is-correct {
		border-color: #bbf7d0;
		background: #f0fdf4;
		color: #166534;
	}

	.bm-song-page-game-choice.is-wrong {
		border-color: #fecaca;
		background: #fef2f2;
		color: #991b1b;
	}

	.bm-song-page-game-feedback {
		min-height: 28px;
		margin: 12px 0 0;
		color: var(--bm-secondary);
		font-weight: 600;
	}

	@media (max-width: 780px) {
		.bm-song-page-shell {
			padding: 20px 12px 40px;
		}

		.bm-song-page-hero,
		.bm-song-page-summary-grid,
		.bm-song-page-game-board {
			grid-template-columns: 1fr;
		}

		.bm-song-page-game-header {
			align-items: flex-start;
			flex-direction: column;
		}

		.bm-song-page h1 {
			font-size: 30px;
		}

		.bm-song-page-chinese {
			font-size: 29px;
		}
	}