/* ============================================================
 * 前台選角頁（[music_hub_avatar_select]）。
 *
 * 色票一律取自 mh-theme.css 的 token，這裡不定義任何顏色字面值——
 * 平台的門面改版就是在收拾「兩份色票並存」的下場。
 *
 * 滿版策略：容器撐滿 `100dvh`（動態 viewport，行動裝置網址列伸縮時
 * 不留白；不支援 dvh 的瀏覽器退回 100vh）。背景鋪上 `--mh-paper`，
 * 跟「節奏測試」等前台頁同一張羊皮紙。
 *
 * 樂器卡、立繪卡都是**水平 carousel**：用 CSS scroll-snap 對齊卡片，
 * 觸控/滑鼠滾輪都能滑，JS 只負責左右箭頭與進度點。
 * ============================================================ */

.mh-avsel {
	/* 滿版交給根容器上的 `alignfull`（區塊主題自己的負邊界規則，見 render() 的註解）。
	   這裡以前是 `width/max-width: 100vw !important` + `margin: auto !important`，
	   **那個寫法從來沒有置中過**：CSS 2.1 §10.3.3 規定元素比容器寬時 auto 邊界
	   一律當成 0，結果是左邊留一條主題內距、右邊溢出一條水平捲軸
	   （2026-08-23 實測 947px 視窗：left=47.4、body scrollWidth=995）。

	   overflow-x 防止卡片溢出造成的水平捲軸——carousel 的橫向滑動在
	   .mh-avsel-track 自己的 overflow 裡處理，不受影響。

	   **用 clip 而不是 hidden**：CSS 規定一軸非 visible 時，另一軸的 visible
	   會被計算成 auto——`overflow-x: hidden` 等於把本容器變成一個**垂直捲動
	   容器**。那正是背景遮罩失效的原因（見下方 .mh-avsel-has-bg）。
	   `clip` 沒有這條連坐規則，overflow-y 維持 visible，容器不再自己捲動。
	   舊瀏覽器（不認 clip）會退回上一行的 hidden，行為與修正前相同。 */
	overflow-x: hidden;
	overflow-x: clip;
	/* 上下滿版：用 100dvh 撐滿動態視窗（行動裝置網址列伸縮時不留白）。
	   dvh 不支援的瀏覽器退回 vh。Header/footer 是 .mh-avsel 之外的主題
	   元素，本來就會佔走它們的空間，**不要再扣 200px**——扣了就會
	   底部留白，破壞「上下滿版」的效果。
	   設 display: flex + flex-direction: column（下方），加上
	   .mh-avsel-carousel 的 flex: 1 1 auto，會自動吸收剩餘高度。
	   內容比視窗高時（罕見，因為卡片高度會受 max-width 限制），
	   內容比視窗高時（步驟二的立繪卡就會），**用 min-height 讓容器自己長高**，
	   而不是固定 height 再讓內部捲動——固定高度時背景圖釘在 border box、
	   遮罩卻跟著內容捲走，兩層一分開，圖的下半截就露出未壓暗的原色。 */
	min-height: 100vh;
	min-height: 100dvh;
	padding: 16px 16px 24px;
	/* 步驟二立繪的高度（寬度由它按原比例跟上，見 .mh-avsel-art img）。
	   **立繪必須由高度驅動，不能由寬度驅動**：後台上傳的圖長寬比從 1:1（1024×1024）
	   到 2:3（848×1264）都有，寬度固定時越瘦長的圖畫得越高——460px 寬的 2:3 立繪
	   就是 686px 高，加上標題與說明整頁超過一個視窗，使用者要捲動才看得到按鈕。
	   換成「視窗高度扣掉版面家具」之後，任何螢幕上步驟二都是一個畫面看得完。

	   420px 是量出來的家具總和（步驟 pill 50＋標題 40＋譜號列 50＋兩行說明 48
	   ＋卡片自己的內距/邊框/圖說 62＋進度點 16＋容器上下內距 112＋餘裕），
	   **不是猜的**；改版面時要跟著校準。上限 520px：再大只是把圖放到失真。
	   下限 160px：極矮的視窗（實測 436px）本來就塞不下，讓它捲，不要把圖縮到看不清。
	   dvh 那行是主要值，vh 是不支援 dvh 的瀏覽器的退路。 */
	--mh-avsel-art-h: clamp(160px, calc(100vh - 420px), 520px);
	--mh-avsel-art-h: clamp(160px, calc(100dvh - 420px), 520px);
	font-family: var(--mh-sans);
	color: var(--mh-ink);
	background: var(--mh-paper, #fcf9f0);
	display: flex;
	flex-direction: column;
}

/* ============================================================
 * 背景圖（後台〈音樂學習中心 → 設定 → 頁面背景圖〉的 avatar_select 槽）
 *
 * 圖片網址由 MH_Avatar_Select::render() 以行內 `--mh-avsel-bg` 傳進來，
 * **掛在容器本身**而不是塞一個 scrim 子元素——mh-avatar-select.js 的
 * draw() 每次換步驟都 `host.innerHTML = ''`，PHP 寫進去的子元素第一次
 * 重繪就會被清掉。
 *
 * scrim 與 srg-register.css 同公式：上下壓深、中間留亮，並把直接落在
 * 圖上的文字（標題、說明、步驟 pill）改成淺色。卡片本身是不透明的
 * surface，維持原本的深色墨字，不必動。
 *
 * **為什麼 scrim 是 background-image 的一層，不是 ::before**
 * 原本 scrim 是 `::before { position: absolute; inset: 0 }`。容器當時是
 * `height: 100dvh` + `overflow-x: hidden`，而 `overflow-x: hidden` 會讓
 * `overflow-y: visible` 被計算成 `auto`——容器其實是個垂直捲動容器。
 * 步驟二的立繪卡比 100dvh 高，容器就真的捲得動，於是：
 *   - `background-image`（attachment 預設 scroll）釘在 border box **不動**；
 *   - `::before` 是容器的絕對定位子孫，**跟著內容一起捲走**。
 * 兩層一分家，遮罩就「長度不到底」，圖的下半截露出沒壓暗的原色。
 * 把漸層改成背景圖層之後，兩層永遠是同一個盒子、同一組 background-size，
 * 物理上不可能再錯開；上面的 min-height + overflow-x: clip 則讓容器不再
 * 自己捲動，改由頁面捲，遮罩自然跟著長到內容的實際高度。
 * ============================================================ */

.mh-avsel-has-bg {
	position: relative;
	/* 第一層＝scrim 漸層（畫在上面），第二層＝立繪背景照。 */
	background-image:
		linear-gradient(
			to bottom,
			rgba(20, 20, 14, .70) 0%,
			rgba(20, 20, 14, .30) 30%,
			rgba(20, 20, 14, .26) 55%,
			rgba(20, 20, 14, .72) 84%,
			rgba(20, 20, 14, .86) 100%
		),
		var(--mh-avsel-bg, none);
	background-color: var(--mh-ink, #1c1c17);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* 內容留在 scrim 之上（背景層本來就在內容之下，這條現在只是保險：
   立繪卡有自己的 transform/scale，明確給 stacking 順序比較不會出意外）。
   排除 .mh-avsel-actions——它是 `position: fixed`，這裡若把它改成
   relative 會讓它掉回文件流、被立繪推出視窗（那正是它當初改 fixed 的原因）。 */
.mh-avsel-has-bg > *:not(.mh-avsel-actions) {
	position: relative;
	z-index: 1;
}

/* 直接落在圖上的文字：改淺色 + 陰影，否則深色墨字在照片上讀不出來。 */
.mh-avsel-has-bg .mh-avsel-h {
	color: var(--mh-paper, #fcf9f0);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 30px rgba(0, 0, 0, .3);
}

.mh-avsel-has-bg .mh-avsel-sub,
.mh-avsel-has-bg .mh-avsel-desc,
.mh-avsel-has-bg .mh-avsel-empty,
.mh-avsel-has-bg .mh-avsel-line .mh-avsel-meta,
.mh-avsel-has-bg .mh-avsel-done-name {
	color: rgba(255, 255, 255, .88);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

/* 步驟 pill 與進度點在照片上要有底才看得見（surface token 是為羊皮紙底調的）。 */
.mh-avsel-has-bg .mh-avsel-step {
	background: rgba(20, 20, 14, .55);
	color: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.mh-avsel-has-bg .mh-avsel-step-n {
	background: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .9);
}
.mh-avsel-has-bg .mh-avsel-dot { background: rgba(255, 255, 255, .35); }
.mh-avsel-has-bg .mh-avsel-dot.is-on { background: var(--mh-honey, #fed65b); }

/* 底部行動鈕的漸層底原本是羊皮紙色——鋪在深色 scrim 上會變成一條突兀的亮條。 */
.mh-avsel-has-bg .mh-avsel-actions {
	background: linear-gradient(
		180deg,
		rgba(20, 20, 14, 0) 0%,
		rgba(20, 20, 14, .78) 35%,
		rgba(20, 20, 14, .92) 100%
	);
}

/* 標題與步驟指示固定在頂部，不被 carousel 蓋掉 */
.mh-avsel-head {
	flex: 0 0 auto;
}

/* 步驟指示器（pill） */
.mh-avsel-steps {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 auto 14px;
	padding: 0;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 600px;
}

.mh-avsel-step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 6px;
	border-radius: var(--mh-radius-pill);
	background: var(--mh-surface);
	color: var(--mh-muted);
	font-size: 14px;
}

.mh-avsel-step-n {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mh-surface-dim);
	color: var(--mh-muted);
	font-weight: 700;
	font-size: 13px;
}

.mh-avsel-step.is-active { background: var(--mh-primary-soft); color: var(--mh-primary); }
.mh-avsel-step.is-active .mh-avsel-step-n { background: var(--mh-primary); color: var(--mh-on-primary); }
.mh-avsel-step.is-done .mh-avsel-step-n { background: var(--mh-honey); color: var(--mh-gold-ink); }

/* ---- 標題 ---- */

.mh-avsel-h {
	font-family: var(--mh-serif);
	font-size: clamp(22px, 4vw, 30px);
	text-align: center;
	margin: 0 0 6px;
	color: var(--mh-primary);
}

.mh-avsel-sub,
.mh-avsel-desc {
	text-align: center;
	color: var(--mh-muted);
	margin: 0 auto 14px;
	max-width: 46em;
	line-height: 1.6;
}

.mh-avsel-desc { font-size: 15px; }

/* ============================================================
 * Carousel：scroll-snap-x 容器
 *
 * 三段式斷點：
 *   手機 (< 600px)            → 一次看 1 張大卡（佔 78% �）
 *   平板 (600px ~ 960px)     → 一次看 2 張（各 44%）
 *   桌機 (>= 960px)          → 一次看 3 張（各 30%）
 * ============================================================ */

.mh-avsel-carousel {
	/* 撐滿剩餘高度，讓大卡在視窗中看起來「滿版」 */
	flex: 1 1 auto;
	min-height: 0;
	/* 左右不設 padding——箭頭是 absolute 在 .mh-avsel 兩側，
	   如果這裡給 padding 56px，track 的內容區會比 .mh-avsel 還寬，
	   把 viewport 撐大造成水平捲軸。 */
	padding: 0;
	position: relative;
}

.mh-avsel-track {
	/* 真正的 scroll 容器 */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 16px;
	/* iOS 慣性滑動 */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mh-avsel-track::-webkit-scrollbar { display: none; }

.mh-avsel-row {
	/* 卡片橫向排列。gap 用 padding 而非 flex gap，才能在
	   兩端卡片也對齊容器邊緣（視覺飽滿）。
	   `width: max-content` 是 carousel 箭頭能不能用的關鍵——
	   flex 子元素的寬度如果小於父層，scrollWidth == clientWidth，
	   瀏覽器就認為「沒有 scroll 空間」，下一張按鈕永遠 disabled。
	   強制讓 row 的寬度 = 內容撐出來的寬度，scroll 就有餘裕。 */
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	padding: 4px 16px 12px;
}

/* 頭尾留白墊片：寬度由 JS 的 padEdges() 量出來寫在行內樣式。
   有它們第一張與最後一張才捲得到正中央（＝才聚焦得起來）。 */
.mh-avsel-pad {
	flex: 0 0 auto;
	width: 0;
	pointer-events: none;
}

/* ---- 樂器卡 ---- */

.mh-avsel-card {
	/* 每張卡片的尺寸：scroll-snap 對齊點 */
	scroll-snap-align: center;
	scroll-snap-stop: always;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 18px 22px;
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-lg);
	background: var(--mh-surface-hi);
	box-shadow: var(--mh-shadow-card);
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	/* flex-basis + shrink:0 讓卡片保持自己設定的�度，不要被擠扁 */
	flex: 0 0 auto;
}

/* 卡片寬度：一次可見的卡數。
   桌機 30vw → 一次可見 3 張卡。平板 44vw → 2 張。手機 78vw → 1 張大卡。
   （原本這裡寫「資料剛好 3 張時箭頭會 disabled，這是正確的」——
   加了頭尾墊片之後不再成立：每一張都要能捲到正中央才聚焦得起來，
   所以只要不只一張卡就一定有 scroll 空間。真正沒東西可捲的只剩
   「總共一張」，那時墊片正好把它撐在中間，箭頭照樣 disabled。） */
.mh-avsel-card {
	width: 78vw;
	max-width: 320px;
}
@media (min-width: 600px) {
	.mh-avsel-card { width: 44vw; max-width: 360px; }
}
@media (min-width: 960px) {
	.mh-avsel-card { width: 30vw; max-width: 380px; }
}

.mh-avsel-card:hover,
.mh-avsel-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--mh-shadow-lift);
	border-color: var(--mh-primary-dim);
}

.mh-avsel-card.is-current { border-color: var(--mh-honey); border-width: 2px; }

.mh-avsel-icon {
	width: clamp(72px, 12vw, 120px);
	height: clamp(72px, 12vw, 120px);
	object-fit: contain;
}

.mh-avsel-icon-text {
	display: grid;
	place-items: center;
	font-size: clamp(40px, 8vw, 64px);
	line-height: 1;
}

.mh-avsel-inst {
	font-family: var(--mh-serif);
	font-size: clamp(18px, 3vw, 22px);
	color: var(--mh-primary);
}

/* 「魔法器」小標籤——卡片頂部小 pill，標示這張是「魔法器」
   而不是「角色」。配色跟主視覺一致（金色 + 蜂蜜底），讓使用者
   一眼分辨「這是步驟 1 的選擇」。 */
.mh-avsel-tag {
	display: inline-block;
	padding: 2px 10px;
	margin-bottom: -2px;
	border-radius: var(--mh-radius-pill);
	background: var(--mh-honey);
	color: var(--mh-gold-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

.mh-avsel-name { font-size: 14px; color: var(--mh-ink); }
.mh-avsel-meta { font-size: 13px; color: var(--mh-muted); }

/* 譜號圖示。高度固定、寬度自適應——譜號符號的長寬比差很多
   （高音譜號很瘦長、低音譜號接近方形），固定寬度會把某些壓扁。 */
.mh-avsel-clef {
	height: 44px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: 2px auto 0;
}

.mh-avsel-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 12px;
	min-height: 1px;
}
.mh-avsel-line .mh-avsel-clef { height: 38px; margin: 0; }

.mh-avsel-badge {
	margin-top: 4px;
	padding: 2px 10px;
	border-radius: var(--mh-radius-pill);
	background: var(--mh-honey);
	color: var(--mh-gold-ink);
	font-size: 12px;
	font-weight: 700;
}

/* ---- 步驟二：立繪 carousel ---- */

.mh-avsel-arts-track {
	/* 立繪比樂器高，每張卡更「畫作」感。
	   卡片之間不要 padding（讓畫作看起來連續）。 */
	padding: 4px 0 12px;
}

.mh-avsel-art {
	scroll-snap-align: center;
	scroll-snap-stop: always;

	position: relative;
	display: block;
	padding: 8px;
	border: 2px solid transparent;
	border-radius: var(--mh-radius);
	background: var(--mh-surface);
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease,
		transform .22s ease, opacity .22s ease, filter .22s ease;
	flex: 0 0 auto;

	/* 沒被選到的立繪往後退：縮小、降透明、去一點彩度。
	   選角是「聚焦在一個人身上」，三張一樣亮的話眼睛不知道該看誰，
	   也看不出中央那張才是會被送出去的那張。
	   transform-origin 置中，縮放不會改變卡片中心點——carousel 的
	   centerIdx／scrollToIdx 都是拿中心點在算的，位置判定不受影響。 */
	transform: scale(.9);
	transform-origin: center center;
	opacity: .55;
	filter: saturate(.7);
	/* **寬度由圖片撐開**（`width: auto`），不再寫死 78/44/30vw ——
	   卡片是由 --mh-avsel-art-h 決定高度、再按原比例反推寬度的。
	   max-width 保留舊的三段斷點當上限：一次看得到幾張仍然是手機 1、平板 2、桌機 3，
	   只是遇到特別扁的圖時不會撐破那個配額。 */
	width: auto;
	max-width: min(78vw, 360px);
	margin: 0 8px;
}
@media (min-width: 600px) {
	.mh-avsel-art { max-width: min(44vw, 420px); }
}
@media (min-width: 960px) {
	.mh-avsel-art { max-width: min(30vw, 460px); }
}

.mh-avsel-art img {
	display: block;
	/* 高度是規範、寬度自己跟上（見 .mh-avsel 的 --mh-avsel-art-h）。
	   object-fit 是保險：碰到比卡片上限還寬的橫幅圖時寬度會被 max-width 夾住，
	   這時讓它自己留邊，而不是把人像拉扁。 */
	height: var(--mh-avsel-art-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto;
	border-radius: var(--mh-radius-sm);
}

.mh-avsel-art:hover,
.mh-avsel-art:focus-visible {
	border-color: var(--mh-primary-dim);
	/* 滑過的那張先回到全彩，讓人知道「點它就會換成它」，
	   但不放大——放大會讓旁邊的卡在指標經過時整排跳動。 */
	opacity: .85;
	filter: none;
}

/* 選中的那張＝正中央那張（JS 的 onSettle 保證），所以聚焦樣式直接掛在 is-on。 */
.mh-avsel-art.is-on {
	border-color: var(--mh-primary);
	box-shadow: var(--mh-shadow-lift);
	transform: scale(1);
	opacity: 1;
	filter: none;
}

.mh-avsel-art.is-on::after {
	content: "✓";
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mh-primary);
	color: var(--mh-on-primary);
	font-size: 16px;
	font-weight: 700;
}

.mh-avsel-art-name {
	display: block;
	margin-top: 6px;
	text-align: center;
	font-size: 14px;
	color: var(--mh-muted);
}

/* ============================================================
 /* 左右箭頭（carousel 控件）
  *
  * 桌面、平板才顯示。手機讓使用者用 finger 滑。
  *
  * z-index 50：卡片/立繪的圖片是 scroll 容器裡的兄弟元素，
  * 若箭頭跟它們同層（或更低），圖片會蓋住按鈕——把箭頭抬到
  * 整個選角頁控件層的最上面，任何裝置尺寸下都按得到。 */
 .mh-avsel-arrow {
 	display: none;
 	position: absolute;
 	top: 50%;
 	transform: translateY(-50%);
 	width: 44px;
 	height: 44px;
 	border: 1px solid var(--mh-border);
 	border-radius: 50%;
 	background: var(--mh-surface-hi);
 	color: var(--mh-primary);
 	font-size: 22px;
 	font-weight: 700;
 	cursor: pointer;
 	box-shadow: var(--mh-shadow-card);
 	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
 	z-index: 50;
 }

.mh-avsel-arrow:hover {
	transform: translateY(-50%) scale(1.06);
	box-shadow: var(--mh-shadow-lift);
}

.mh-avsel-arrow:disabled,
.mh-avsel-arrow[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
	transform: translateY(-50%);
}

.mh-avsel-arrow-prev { left: 12px; }
.mh-avsel-arrow-next { right: 12px; }

@media (min-width: 600px) {
	.mh-avsel-arrow { display: grid; place-items: center; }
	.mh-avsel-arrow-prev { left: 16px; }
	.mh-avsel-arrow-next { right: 16px; }
}

/* ============================================================
 * 進度點（dots）：carousel 在第幾張
 * ============================================================ */

.mh-avsel-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.mh-avsel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mh-surface-dim);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
	position: relative;
	z-index: 50;
}

.mh-avsel-dot.is-on {
	background: var(--mh-primary);
	transform: scale(1.3);
}

/* ---- 行動鈕 ----
 *
 * 原本用 `position: relative; z-index: 50` 是想「畫在所有東西之上」，但實務上
 * `.mh-avsel` 本身只 100dvh，carousel 用 `flex: 1 1 auto` 撐滿中間區段時，
 * 立繪卡（.mh-avsel-art 高 ~550px）會把 actions 擠到 viewport 之外——
 * 使用者一進到步驟二看到的只剩一排立繪，按鈕要靠滾輪才看得到。
 *
 * 解法：把 actions 改成 `position: fixed` 釘在 viewport 底部 16px 處，
 * 不再依賴 `.mh-avsel` 的 flex 流或 sticky offset 計算。
 *
 * 為什麼不用 sticky / absolute：
 *   - `.mh-avsel` 有 `overflow-x: hidden`，sticky 會被它的滾動容器邊界
 *     限制住，且 `.mh-avsel` 本身只 100dvh、沒多餘滾動空間，sticky 沒
 *     機會「卡」住——元素根本沒有進入滾動路徑。
 *   - `.mh-avsel` 因為頁面 header/footer 上下推擠，top:320 但 height:620，
 *     所以它的「底部」實際上落在頁面 y=940，**比 viewport（620）還低**——
 *     用 `position: absolute; bottom: 0` 釘在 `.mh-avsel` 底部等同於釘在
 *     viewport 之外，使用者一樣看不到。
 *
 * carousel 因為 actions 脫離 flex 流（fixed 也算脫離），會自動吃掉那塊
 * 空間；立繪 .mh-avsel-art 仍是 carousel 的內容，它 overflow 進 actions
 * 區的視覺部分會被 backdrop 蓋掉。
 *
 * 半透明 backdrop：立繪很滿、底部常會有畫作內容延伸過來；
 * 沒有 backdrop 時按鈕雖然能點，但視覺上會「黏在圖上」看不清楚——
 * 背景從透明漸層到羊皮紙色，配合 backdrop-filter 毛玻璃，
 * 讓兩者清楚分離但又不像實心橫條那麼突兀。
 *
 * `z-index: 100` 確保在所有 carousel 元件（箭頭 z=50、dot z=50）之上。
 *
 * �️ viewport 邊界：actions 釘在 viewport 底，但本插件其他子頁面（如
 * step 1、step 3）的 controls 仍走 flex 流——fixed 不會影響它們，因為
 * 本規則只作用在 step 2/3 渲染出來的 `.mh-avsel-actions`。
 */
.mh-avsel-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 12px 16px;
	/* fixed 釘 viewport 底部 16px；left/right 0 讓背景滿版延伸 */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 100;
	/* 從透明漸層到羊皮紙色：上方保留透明讓立繪透出來，
	   下方不透明避免按鈕本體被穿透。 */
	background: linear-gradient(180deg, rgba(252,249,240,0) 0%, var(--mh-paper, #fcf9f0) 35%, var(--mh-paper, #fcf9f0) 100%);
	/* backdrop-filter 在不支援的瀏覽器自動退化、無副作用 */
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* 行動鈕是 `position: fixed`（見上），已經脫離文件流——**內容必須自己讓出那條高度**，
   否則短視窗（實測 600px 高）時 carousel 的底部會被壓在按鈕底下。
   只在真的有行動鈕的步驟（2／3）讓：步驟一沒有 actions，讓了就只是底部白留一塊。
   不認得 :has() 的瀏覽器退回舊行為（＝這次修正前的樣子），不會更糟。 */
.mh-avsel:has(.mh-avsel-actions) {
	padding-bottom: 96px;
}

.mh-avsel-btn {
	appearance: none;
	border: 0;
	border-radius: var(--mh-radius-pill);
	padding: 12px 28px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
}

.mh-avsel-btn[disabled] { opacity: .6; cursor: default; }

/* 蠟封印章＝主要行動（與平台其他畫面同一套語彙）。 */
.mh-avsel-btn-seal {
	background: linear-gradient(180deg, var(--mh-seal-a), var(--mh-seal-b));
	border: 1px solid var(--mh-seal-edge);
	color: #fff;
	box-shadow: var(--mh-shadow-card);
}

/* 次要行動（「上一步」「重新選擇」）。
 *
 * **不能是透明底的線框鈕。** 這一頁的行動列有兩種背景：沒設底圖時是羊皮紙色，
 * 設了底圖時 .mh-avsel-has-bg 會把它換成幾乎全黑的漸層。透明底 + var(--mh-muted)
 * 的深墨字在後者上等於隱形（#45483d 對 rgba(20,20,14,.92)，對比度 ~1.3:1，
 * 使用者回報「看不見」）。
 *
 * 改成不透明的亮面藥丸：兩種底色下都讀得到，而且**不必為深色底再寫一條覆寫**
 * ——分成兩套就會有一套沒人維護。與主要動作的區別改由「蠟封紅漸層 vs 素色」
 * 表達，份量差異仍在。 */
.mh-avsel-btn-ghost {
	background: var(--mh-surface-hi);
	border: 1px solid var(--mh-outline);
	color: var(--mh-ink);
	box-shadow: var(--mh-shadow-card);
}

.mh-avsel-btn-ghost:hover,
.mh-avsel-btn-ghost:focus-visible {
	background: var(--mh-surface);
	border-color: var(--mh-primary-dim);
	color: var(--mh-primary);
}

/* 步驟一的「不換了，回關卡選擇」。
 *
 * **走一般文件流，不進 .mh-avsel-actions。** 那條是 position:fixed 的主要行動列，
 * 而步驟一沒有主要行動（點樂器卡就直接進下一步）；把返回鍵釘在視窗底部會讓它
 * 看起來像這一步的主要動作，也會撞上上面那條 `:has(.mh-avsel-actions)` 的
 * 96px 讓位規則。按鈕本體沿用 .mh-avsel-btn-ghost（不透明藥丸，有無底圖都讀得到）。 */
.mh-avsel-back {
	display: flex;
	justify-content: center;
	margin: 24px 0 8px;
}

/* ---- 其他 ---- */

.mh-avsel-hero {
	display: block;
	max-width: 320px;
	width: 100%;
	height: auto;
	margin: 0 auto 12px;
	border-radius: var(--mh-radius);
	box-shadow: var(--mh-shadow-card);
}

.mh-avsel-done-name {
	text-align: center;
	font-family: var(--mh-serif);
	font-size: 24px;
	margin: 0 0 4px;
	color: var(--mh-primary);
}

.mh-avsel-error {
	text-align: center;
	color: var(--mh-danger);
	font-weight: 700;
	margin: 0 0 12px;
}

.mh-avsel-empty {
	text-align: center;
	color: var(--mh-muted);
	padding: 32px 12px;
}

@media (prefers-reduced-motion: reduce) {
	.mh-avsel-card,
	.mh-avsel-art,
	.mh-avsel-arrow,
	.mh-avsel-dot { transition: none; }
	.mh-avsel-card:hover,
	.mh-avsel-card:focus-visible { transform: none; }
}