/* ============================================================
 * 「登入和註冊」前台頁 —— 穆茲卡傳奇
 *
 * 視覺與 splash 同一個家族：
 * - 全螢幕 + 深色漸層 scrim（與 srg-splash-scrim 同一組數值）
 * - 兩顆並排的「蠟封印章」CTA（與 srg-splash-cta 同樣的 radial-gradient）
 * - 標題用 mh-serif 襯線字、字距大、字重 700
 *
 * 為什麼自寫而不是直接套用 srg-splash-*：
 * - splash 在 SPA 內（srg-splash-on 狀態），背景圖來自 SRG_Appearance；
 *   這一頁是獨立短代碼頁，背景圖來自平台的 MH_Page_Bg（`auth` 槽），
 *   沒設圖時退回「全暗底 + scrim + 中央卡片」。
 * - CLAUDE.md 說 mh-theme.css 是全平台唯一設計 token；
 *   本檔案只用 mh-* 變數，沒有任何字面值顏色（除 scrim 的 rgba 黑），
 *   之後要換主題只改 mh-theme.css 即可。
 * ============================================================ */

.srg-root.srg-auth {
	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`
	   只撐滿「父層內容區」，而 .entry-content 左右各有一圈全站內距
	   （本站 clamp(30px,5vw,50px)），於是畫面兩側各留一條空白。
	   **移除後不要再補回來**：width:100% 是相對父層內容區算的，負邊界把盒子往外拉
	   之後它反而讓右側空一條；margin:0 則會直接蓋掉主題那條負邊界。 */
}

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

/* 與 splash scrim 同公式：上下各壓一段、中間留亮，標題與按鈕都讀得到。
   沒設圖時底下是純色，這層仍要留著——它同時是暗色 CTA 的對比來源。 */
.srg-auth-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-auth-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-auth-head { flex: 0 0 auto; }
.srg-auth-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-auth-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-auth-mid {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

/* 兩顆並排的蠟封印章按鈕。 */
.srg-auth-pair {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 4vw, 28px);
	justify-content: center;
	align-items: stretch;
}

/* **尺寸規範直接沿用進版頁的 .srg-splash-cta**（game.css）——
 * min-height 60 / padding 0 clamp(28px,8vw,52px) / font-size clamp(20px,5.6vw,30px)，
 * 逐項對齊，只多了 position 與 text-decoration（這裡是 <a> 不是 <button>）。
 *
 * 為什麼不自己另訂一套：登入頁是玩家按下進版頁「開始冒險」之後看到的**下一個畫面**，
 * 兩顆印章跟他剛按下去的那顆是同一種東西。尺寸只要差一點，換頁時就會看出來在跳。
 *
 * 刻意**不指定寬度**（進版頁也沒有）：印章由內容撐開。「登入」「註冊」同為兩字，
 * 自然就一樣寬，不必再靠 flex 等分去湊。
 */
.srg-auth-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 60px;
	padding: 0 clamp(28px, 8vw, 52px);
	border-radius: var(--mh-radius-pill, 999px);
	font-family: var(--mh-serif, "Fraunces", "Noto Serif TC", Georgia, serif);
	font-size: clamp(20px, 5.6vw, 30px);
	font-weight: 700;
	letter-spacing: .12em;
	text-decoration: none;
	color: #fff;
	background: radial-gradient(circle at 30% 28%,
		var(--mh-seal-a, #c62828),
		var(--mh-seal-b, #93000a));
	border: 2px solid var(--mh-seal-edge, #7a0006);
	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;
	cursor: pointer;
}
.srg-auth-cta:hover {
	transform: scale(1.04);
	color: #fff;
}
.srg-auth-cta:active {
	transform: scale(.97);
}

/* 「登入 / 註冊」主字。**字級不在這裡訂**——它就是印章本身的 font-size
   （進版頁的字直接放在按鈕上，沒有這層 span）；在這裡再寫一次 font-size
   就等於偷偷開了第二套規範，改了進版頁不會跟著動。
   （2026-08-22 拿掉了「已有帳號／第一次來」eyebrow 與 → 箭頭：
   兩個字的動詞本身就講完了，多的字只是把印章塞滿。） */
.srg-auth-cta-label {
	white-space: nowrap;
}
.srg-auth-cta-arrow {
	font-size: .8em;
	transition: transform .15s ease;
}
.srg-auth-cta:hover .srg-auth-cta-arrow {
	transform: translateX(4px);
}

/* 「註冊未開放」的禁用態——同樣的形狀但改用 surface-dim，
   視覺上仍是一顆印章（保持版面穩定），但不引導點擊。
   **只有這一顆例外於進版頁規範**：它底下多一行說明，所以必須改直排並自己
   補回上下內距（規範的 padding 上下是 0，那是給單行文字用的）。 */
.srg-auth-cta-disabled {
	flex-direction: column;
	gap: 2px;
	padding-top: 12px;
	padding-bottom: 14px;
	background: var(--mh-surface-dim, #dddad1);
	border-color: var(--mh-outline, #76786c);
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
	color: var(--mh-ink, #1c1c17);
	cursor: not-allowed;
	text-shadow: none;
}
.srg-auth-cta-disabled:hover { transform: none; }
.srg-auth-cta-disabled .srg-auth-cta-label { font-size: clamp(15px, 4vw, 21px); }
.srg-auth-cta-disabled .srg-auth-cta-note {
	margin-top: 4px;
	font-family: var(--mh-sans, "Nunito", "PingFang TC", "Noto Sans TC", sans-serif);
	font-size: clamp(10px, 2.4vw, 12px);
	font-weight: 400;
	letter-spacing: .04em;
	white-space: normal;
	opacity: .8;
	text-align: center;
	max-width: 18em;
}

/*
 * 「已登入」的單顆 CTA（繼續冒險）以前在這裡覆寫 flex-direction / gap /
 * min-height / padding —— 那些現在全都是 .srg-auth-cta 的預設值（＝進版頁規範），
 * 覆寫掉就變成第三套尺寸。整塊移除，class 留在 HTML 上當語意標記。
 */

/* 「已登入」歡迎卡 */
.srg-auth-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.srg-auth-icon {
	font-size: clamp(40px, 10vw, 56px);
	line-height: 1;
}
.srg-auth-welcome-line {
	margin: 0;
	font-family: var(--mh-serif, "Fraunces", "Noto Serif TC", Georgia, serif);
	font-size: clamp(16px, 4vw, 22px);
	letter-spacing: .04em;
	opacity: .95;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* （2026-08-22 移除 .srg-auth-foot「訪客也能直接玩…」說明句：
   下面那條「以訪客身分先玩」連結本身已經把這件事講完了。） */

/* 「以訪客身分先玩」——刻意做成連結而不是第三顆蠟封 CTA：
   它是退路，不是與登入／註冊並列的選項；做成同樣份量的按鈕會讓
   「開個帳號」看起來只是三選一裡最麻煩的那個。 */
.srg-auth-guest {
	margin: 10px 0 0;
	text-align: center;
}
.srg-auth-guest-link {
	font-size: clamp(12px, 3vw, 14px);
	letter-spacing: .08em;
	color: var(--mh-honey, #fed65b);
	text-decoration: none;
	border-bottom: 1px solid rgba(254, 214, 91, .45);
	padding-bottom: 2px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
	transition: color .15s ease, border-color .15s ease;
}
.srg-auth-guest-link:hover,
.srg-auth-guest-link:focus {
	color: #fff;
	border-color: currentColor;
}

/* 底部「回進版頁」 */
.srg-auth-bottom {
	flex: 0 0 auto;
	margin-top: 16px;
}
.srg-auth-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-auth-back:hover,
.srg-auth-back:focus {
	color: var(--mh-honey, #fed65b);
	border-color: var(--mh-honey, #fed65b);
}

/*
 * 這裡以前有一組 @media (max-width:480px)，把兩顆印章改成上下堆疊、
 * 並把 min-width 拉到 240px。**跟著進版頁規範之後整組不需要了**：
 * 規範本身是流體的（padding 8vw、font-size 5.6vw），360px 直式下
 * 一顆約 105px，兩顆加間距約 225px，容器有 320px，排得下。
 * 而且「並排的兩個選項」正是這頁要表達的意思——堆疊會讀成
 * 「主要動作 + 次要動作」。真的擠不下時仍有 .srg-auth-pair 的
 * flex-wrap 接住。
 */

/* 系統開啟「減少動態效果」時，停用 hover/active 變形 */
@media (prefers-reduced-motion: reduce) {
	.srg-auth-cta,
	.srg-auth-cta-arrow { transition: none; }
	.srg-auth-cta:hover,
	.srg-auth-cta:active { transform: none; }
	.srg-auth-cta:hover .srg-auth-cta-arrow { transform: none; }
}