/* ============================================================
 * 「加入傳奇樂章」前台註冊頁 —— 穆茲卡傳奇
 *
 * 設計家族：
 * - 全暗 scrim + 標題置中 + 底部回首頁連結（與 srg-auth 同一組數值）
 * - 表單卡片用 surface-container 的米色 + 圓角，與進版頁 input-vellum 同語感
 * - 蠟封印章「完成註冊，開始冒險」CTA（與 srg-splash-cta 同源）
 *
 * 為什麼 input 用米色底而非透明：
 *   - 範例頁把 input 放在羊皮紙卡片裡，背景是 surface；
 *   - 而本頁的根容器是深色 scrim，所以 input 必須自己有底色才能讀得到字。
 *
 * CLAUDE.md 合規：只用 var(--mh-*)，無字面值顏色（除 scrim rgba）。
 * ============================================================ */

.srg-root.srg-register {
	position: relative;
	min-height: calc(100vh - 24px);
	min-height: calc(100svh - 24px);
	background: var(--mh-ink, #1c1c17);
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	/* 滿版交給根容器上的 `alignfull`（區塊主題的負邊界規則，見 SRG_Auth_Page::render）。
	   這裡原本的 `width:100%; max-width:none; margin-left:0; margin-right:0`
	   只撐滿「父層內容區」，主題那一圈全站內距原封不動留著＝畫面左右各一條空白；
	   而 margin:0 還會把主題的負邊界蓋掉。整組移除，不要補回來。
	   （登入頁 .srg-login 沿用本組樣式，一起修好。） */
}

/* 有設背景圖時：用 CSS 變數鋪滿（圖片網址由 SRG_Register_Page 從 MH_Page_Bg 取）。
   background-size: cover + center 是「重點放中央、橫向填滿」——這也是後台建議的構圖。
   沒有 `background-attachment: fixed`——手機上會被瀏覽器忽略還會多花效能。 */
.srg-root.srg-register.srg-register-has-bg {
	background-image: var(--srg-register-bg, none);
	background-color: var(--mh-ink, #1c1c17);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* 與 srg-auth-scrim 同公式：上下各壓一段、中間留亮，標題與表單都讀得到。 */
.srg-register-scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			rgba(20, 20, 14, .68) 0%,
			rgba(20, 20, 14, .28) 28%,
			rgba(20, 20, 14, .22) 52%,
			rgba(20, 20, 14, .72) 82%,
			rgba(20, 20, 14, .85) 100%
		);
}

/* ---- 主內容層 ---- */
.srg-register-ui {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 5%, 40px);
	text-align: center;
	color: #fff;
}

/* ---- 標題區 ---- */
.srg-register-head { flex: 0 0 auto; margin-bottom: 12px; }
.srg-register-title {
	margin: 0;
	font-family: var(--mh-serif, "Fraunces", "Noto Serif TC", Georgia, serif);
	font-size: clamp(28px, 7.5vw, 48px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .06em;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 30px rgba(0, 0, 0, .3);
}
.srg-register-sub {
	margin: 6px 0 0;
	font-size: clamp(11px, 2.8vw, 14px);
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .85;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

/* ---- 中段：表單卡片 ---- */
.srg-register-mid {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 12px 0;
}

/* 表單卡片：米色羊皮紙，與進版頁 input-vellum 同語感 */
.srg-register-form {
	width: min(560px, 100%);
	background: var(--mh-surface, #fcf9f0);
	color: var(--mh-on-surface, #1c1c17);
	border: 1px solid var(--mh-outline-variant, #c6c8ba);
	border-radius: var(--mh-radius-lg, .25rem);
	padding: clamp(20px, 4vw, 32px);
	box-shadow:
		0 18px 48px -16px rgba(0, 0, 0, .55),
		inset 0 0 0 1px rgba(255, 255, 255, .5);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* 摺疊器：原生的 <details>/<summary>，零 JS。
   summary 顯示標題 + 必填/選填 hint + chevron；展開時 chevron 旋轉 180°。 */
.srg-register-collapsible {
	border: 1px solid var(--mh-outline-variant, #c6c8ba);
	border-radius: 14px;
	background: rgba(255, 255, 255, .55);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.srg-register-collapsible[open] {
	border-color: var(--mh-primary, #455529);
	box-shadow: 0 2px 12px -6px rgba(69, 85, 41, .25);
}
.srg-register-collapsible + .srg-register-collapsible {
	margin-top: 4px;
}
.srg-register-collapsible-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;          /* 移除 Firefox 預設 marker */
	user-select: none;
}
.srg-register-collapsible-summary::-webkit-details-marker {
	display: none;              /* 移除 Safari/Chrome 預設 marker */
}
.srg-register-collapsible-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mh-on-surface, #1f1f23);
}
.srg-register-collapsible-hint {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mh-surface-container, #e9ebdf);
	color: var(--mh-on-surface-variant, #45483d);
}
.srg-register-collapsible[open] .srg-register-collapsible-hint {
	background: var(--mh-primary-container, #d4dfa7);
	color: var(--mh-on-primary-container, #1f2912);
}
.srg-register-collapsible-chevron {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform .25s cubic-bezier(.4, .0, .2, 1);
	color: var(--mh-on-surface-variant, #45483d);
}
.srg-register-collapsible[open] .srg-register-collapsible-chevron {
	transform: rotate(180deg);
	color: var(--mh-primary, #455529);
}
.srg-register-collapsible-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 4px 18px 18px;
	border-top: 1px dashed var(--mh-outline-variant, #c6c8ba);
	padding-top: 18px;
}

/* 單一欄位 */
.srg-register-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.srg-register-label {
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mh-on-surface-variant, #45483d);
}

/* input 共用：input-vellum 風格。Material icon 嵌入左側、底色米白、focus 切綠 */
.srg-register-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--mh-outline-variant, #c6c8ba);
	transition: border-color .15s ease;
}
.srg-register-input-wrap:focus-within {
	border-color: var(--mh-primary, #455529);
}
/* 內嵌 SVG icon —— 不依賴外部 Material Symbols 字型，
   避免離線或被 CSP 擋下時圖示變成純文字。 */
.srg-register-input-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mh-outline, #76786c);
	width: 18px;
	height: 18px;
	pointer-events: none;
	transition: color .15s ease;
	display: block;
}
.srg-register-input-wrap:focus-within .srg-register-input-icon {
	color: var(--mh-primary, #455529);
}
.srg-register-input-icon-right {
	left: auto;
	right: 0;
}

/*
 * 多選清單（曾學習樂器，`<select multiple size="6">`）。
 *
 * 這一格與所有單行欄位共用 `.srg-register-input-wrap`，而那一層的裝飾
 * （左側樂器圖示、右側下拉箭頭）都是 `top:50%` 的絕對定位 —— 對一行高的
 * 輸入框剛好置中，對六行高的清單就變成**壓在中間那一個選項上**。
 * 右邊的箭頭已經從 PHP 拿掉（多選清單不會展開，那顆箭頭本來就在說謊），
 * 左邊的圖示改成對齊第一列。
 */
.srg-register-select-multi {
	/* 清單自己有捲軸與逐列 padding，交給瀏覽器排版，不要沿用單行的垂直內距。 */
	padding-top: 6px;
	padding-bottom: 6px;
	height: auto;
	/* 選項字級照 16px 下限走（iOS 聚焦不會放大），行高鬆一點才好點。 */
	font-size: 16px;
	line-height: 1.9;
}
.srg-register-input-wrap:has(.srg-register-select-multi) .srg-register-input-icon {
	top: 14px;
	transform: none;
}
.srg-register-input {
	width: 100%;
	padding: 8px 0 8px 28px;
	background: transparent;
	border: 0;
	outline: none;
	font-family: var(--mh-serif, "Fraunces", "Noto Serif TC", Georgia, serif);
	font-size: 18px;
	color: var(--mh-on-surface, #1c1c17);
}
.srg-register-input::placeholder {
	color: var(--mh-outline, #76786c);
	opacity: .55;
}
.srg-register-input:invalid {
	box-shadow: none; /* 隱藏原生瀏覽器氣泡，自己用錯誤卡 */
}

/* select 比 input 多了右邊箭頭，預留右側空間 */
.srg-register-select {
	padding-right: 24px;
	appearance: none;
	cursor: pointer;
}

/* 欄位下方說明 */
.srg-register-hint {
	margin: 0;
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: 11px;
	color: var(--mh-on-surface-variant, #45483d);
	opacity: .78;
	letter-spacing: .04em;
}

/* 學習時長：兩格並排 */
.srg-register-duration {
	display: flex;
	gap: 12px;
}
.srg-register-duration-cell { flex: 1 1 0; min-width: 0; }
.srg-register-duration-select { font-size: 16px; padding-left: 4px; }

/*
 * **不在 `.srg-register-input-wrap` 裡的欄位，要自己帶焦點指示。**
 *
 * 表單上絕大多數欄位的鍵盤焦點是靠外框做的
 * （`.srg-register-input-wrap:focus-within` 換 border-color），
 * 但年資那兩顆 select 住在 `.srg-register-duration-cell` —— 純排版、沒有外框，
 * 於是**整張註冊表只有這一格，用鍵盤 Tab 過去時完全沒有任何反應**。
 * 用鍵盤填表的人走到這裡會不知道自己站在哪。
 *
 * 遊戲頁沒這個問題，因為 `game.css` 有一條全域的
 * `.srg-root :is(button,a,select,input,…):focus-visible` —— **但那支 CSS
 * 不會載到動線這幾頁**（登入／註冊／重設只載 srg-register / srg-login / srg-auth）。
 * 這和 BGM 鈕缺樣式是同一種形狀：規則住在另一支沒被載進來的 stylesheet 裡。
 *
 * 用 `:focus-visible` 而不是 `:focus`：滑鼠點下去不該冒出外框（會被誤讀成「選取中」）。
 * 靜止時的外觀完全不變，只有鍵盤走到才出現。
 */
.srg-register-duration-cell .srg-register-input:focus-visible {
	outline: 2px solid var(--mh-primary, #455529);
	outline-offset: 2px;
	border-radius: 4px;
}

/* 錯誤卡（送出失敗時顯示） */
.srg-register-error {
	background: var(--mh-error-container, #ffdad6);
	color: var(--mh-on-error-container, #93000a);
	padding: 10px 14px;
	border-radius: var(--mh-radius, .125rem);
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: 13px;
	letter-spacing: .02em;
	line-height: 1.5;
}

/* 「完成註冊」CTA —— 與 srg-auth-cta 同一個蠟封印章視覺 */
.srg-register-actions {
	margin-top: 6px;
}
.srg-register-cta-submit {
	width: 100%;
	min-height: 64px;
	border-radius: var(--mh-radius-pill, 999px);
	border: 2px solid var(--mh-seal-edge, #7a0006);
	background: radial-gradient(circle at 30% 28%,
		var(--mh-seal-a, #c62828),
		var(--mh-seal-b, #93000a));
	color: #fff;
	font-family: var(--mh-serif, "Fraunces", "Noto Serif TC", Georgia, serif);
	font-size: clamp(18px, 4.6vw, 22px);
	font-weight: 700;
	letter-spacing: .12em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	box-shadow:
		0 10px 26px -8px rgba(0, 0, 0, .65),
		inset 0 0 18px rgba(0, 0, 0, .25),
		inset 0 2px 0 rgba(255, 255, 255, .18);
	text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.srg-register-cta-submit:hover { transform: scale(1.02); }
.srg-register-cta-submit:active { transform: scale(.98); }
.srg-register-cta-submit:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}
.srg-register-cta-submit .srg-register-cta-arrow { transition: transform .15s ease; }
.srg-register-cta-submit:hover:not(:disabled) .srg-register-cta-arrow { transform: translateX(4px); }
/* submit 按鈕左側小圖示：inline SVG。 */
.srg-register-cta-submit .srg-register-submit-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--mh-honey, #fed65b);
	transition: transform .15s ease;
}
.srg-register-cta-submit:hover:not(:disabled) .srg-register-submit-icon {
	transform: rotate(12deg);
}

/* 「已有帳號？前往登入」footer 連結 */
.srg-register-foot {
	margin: 4px 0 0;
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: 13px;
	color: var(--mh-on-surface-variant, #45483d);
	text-align: center;
}
.srg-register-foot a {
	color: var(--mh-primary, #455529);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.srg-register-foot a:hover { color: var(--mh-honey, #fed65b); border-color: currentColor; }

/* ---- 已登入 / 未開放 共用 ---- */
.srg-register-welcome,
.srg-register-closed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 28px;
	background: var(--mh-surface, #fcf9f0);
	color: var(--mh-on-surface, #1c1c17);
	border-radius: var(--mh-radius-lg, .25rem);
	min-width: min(420px, 100%);
	box-shadow: 0 18px 48px -16px rgba(0, 0, 0, .55);
}
.srg-register-icon { font-size: clamp(40px, 10vw, 56px); line-height: 1; }
.srg-register-welcome-line,
.srg-register-closed-title {
	margin: 0;
	font-family: var(--mh-serif, "Fraunces", "Noto Serif TC", Georgia, serif);
	font-size: clamp(16px, 4vw, 22px);
	letter-spacing: .04em;
}
.srg-register-closed-note {
	margin: 0;
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: 13px;
	color: var(--mh-on-surface-variant, #45483d);
	opacity: .85;
}
.srg-register-cta-single {
	min-width: 220px;
}

/* 「已關閉」內的回首頁連結（深色底場景） */
.srg-register-closed .srg-register-back {
	color: var(--mh-on-surface-variant, #45483d);
	border-color: var(--mh-outline-variant, #c6c8ba);
}
.srg-register-closed .srg-register-back:hover {
	color: var(--mh-primary, #455529);
	border-color: var(--mh-primary, #455529);
}

/* ---- 底部回首頁（深色場景） ---- */
.srg-register-bottom {
	flex: 0 0 auto;
	margin-top: 16px;
}
.srg-register-back {
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: clamp(12px, 3vw, 14px);
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	letter-spacing: .08em;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	padding-bottom: 2px;
	transition: color .15s ease, border-color .15s ease;
}
.srg-register-back:hover,
.srg-register-back:focus {
	color: var(--mh-honey, #fed65b);
	border-color: var(--mh-honey, #fed65b);
}

/* ---- 手機 ---- */
@media (max-width: 480px) {
	.srg-register-form {
		padding: 18px 16px;
		gap: 16px;
	}
	.srg-register-duration { flex-direction: column; gap: 14px; }
	.srg-register-cta-submit { font-size: 18px; min-height: 56px; }
}

/* ---- 減少動態 ---- */
@media (prefers-reduced-motion: reduce) {
	.srg-register-cta-submit,
	.srg-register-cta-submit .srg-register-cta-arrow,
	.srg-register-input-wrap,
	.srg-register-input-icon { transition: none; }
	.srg-register-cta-submit:hover,
	.srg-register-cta-submit:active { transform: none; }
}