/* ==========================================================================
   穆茲卡大陸的世界地圖

   ## 這份樣式表只有一件事真正重要

   `.srg-map-vid` 與所有 `.srg-map-spot` 都以 **`.srg-map-stage` 為 100%**。
   試作頁的 bug 是影片貼在視窗上（`position:fixed` + `100vw/100vh` + `cover`）
   而熱點貼在另一個盒子上 —— 兩個矩形的裁切量各自獨立，只有視窗剛好
   1280:712 時才重合。改成同一個盒子之後，百分比在任何尺寸下都精準。
   **不要把影片搬出 `.srg-map-stage`，也不要給它 `cover` 以外的尺寸來源。**

   ## 手機與平板的差別只有兩條宣告

   舞台是 `height:100% + aspect-ratio + width:auto` ——「高度吃滿，寬度自己算」。
   手機上那個寬度會超過螢幕，於是 `.srg-map-pan` 橫向捲動（慣性是瀏覽器原生的）。
   短邊 ≥600 時加一條 `max-width:100%`，舞台就改成被寬度夾住、整張看得見，
   捲動容器自然沒有東西可捲。

   斷點 `(min-width:600px) and (min-height:600px)` 是 `SRGUtil.tabletUp()`
   （`Math.min(w,h) >= 600`）的 CSS 孿生體 —— **不是另一條新的斷點**。
   ========================================================================== */

.srg-root.srg-mapping {
	min-height: calc(100vh - 24px);
	min-height: calc(100svh - 24px);
	max-height: calc(100vh - 24px);
	max-height: calc(100svh - 24px);
	display: flex;
	flex-direction: column;
}

.srg-map-screen {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: #0a0a14;
}

/* ---------- 標題列 ---------- */
.srg-map-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;           /* 288px 上一定會折，不要用 nowrap（那會變溢出） */
	padding: 6px 12px;
}
.srg-map-heads { flex: 1 1 auto; min-width: 0; }
.srg-map-title {
	margin: 0;
	font-size: clamp(17px, 3.6vw, 26px);
	letter-spacing: .06em;
	color: var(--srg-honey, #f5d27a);
	text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}
.srg-map-sub {
	margin: 2px 0 0;
	font-size: clamp(11px, 2.2vw, 14px);
	letter-spacing: .14em;
	color: #e8dcc0;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

/* ---------- 捲動容器 ---------- */
.srg-map-pan {
	/* ⚠ basis 是 0 不是 auto：高度要純粹來自剩餘空間，與裡面的舞台無關 ——
	   worldmap.js 會量這個高度回填給舞台，basis:auto 會讓那次量測變成循環。 */
	flex: 1 1 0;
	min-height: 0;
	overflow-x: auto;
	/* clip 而非 hidden：hidden 會讓它變成一個可捲動的容器，
	   連帶把縱向也變成捲動軸（見 mh-avatar-select.css 的同一條註解）。 */
	overflow-y: clip;
	overscroll-behavior-x: contain;   /* 捲到底不要把整頁一起帶走 */
	-webkit-overflow-scrolling: touch;
	/* proximity 不是 mandatory：地圖是連續的地形，mandatory 會讓玩家
	   沒辦法停在兩境之間看地形，而且在窄螢幕上會跟手指拉扯。 */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	display: flex;
	align-items: center;
}
.srg-map-pan::-webkit-scrollbar { display: none; }

/* ---------- 舞台：熱點百分比的基準 ---------- */
.srg-map-stage {
	position: relative;
	flex: 0 0 auto;
	margin-inline: auto;          /* 舞台比容器窄時置中（橫放手機會用到） */

	/*
	 * ★ 尺寸只有一條算式：**高度吃滿可用空間，寬度＝高度 × 比例**。
	 *
	 * `--srg-map-avail` 是 worldmap.js 量出來的 `.srg-map-pan` 高度。
	 * ⚠ **不可以改回 `height:100%`。** 實測那條路在這個版面上從來沒有生效：
	 * flex 會先把寬度定下來（`width:auto` ＝內容寬），`aspect-ratio` 於是
	 * 反過來拿寬度算高度，整張地圖被壓成 360×200（＝ min-height 的地板）。
	 * 五種視窗、五種寫法都量過，只有這一條成立。
	 */
	height: var(--srg-map-avail, 200px);
	width: calc(var(--srg-map-avail, 200px) * var(--srg-map-arn, 1.7978));

	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(20, 10, 0, .45),
		inset 0 0 0 1px rgba(255, 220, 140, .18);
}

/* ★ 影片與底圖鋪滿**熱點所在的那一個盒子**。見檔頭。 */
.srg-map-vid,
.srg-map-still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

/* ---------- 熱點 ---------- */
.srg-map-spot {
	position: absolute;
	transform: translate(-50%, -50%);
	/* 6% 的高度在 473px 的舞台上只有 28px —— 摸不到。44 是觸控目標的地板。 */
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	touch-action: manipulation;
	z-index: 5;
}
.srg-map-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff8d9 0%, #f5d27a 50%, #b78b2d 100%);
	box-shadow: 0 0 8px 2px rgba(245, 210, 122, .65), 0 0 18px 4px rgba(245, 210, 122, .35);
	transition: transform .25s ease, box-shadow .25s ease;
	z-index: 2;
}
.srg-map-pulse {
	position: absolute;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 2px solid rgba(245, 210, 122, .8);
	background: radial-gradient(circle, rgba(245, 210, 122, .18) 0%, rgba(245, 210, 122, 0) 70%);
	animation: srg-map-pulse 2.6s ease-out infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes srg-map-pulse {
	0%   { transform: scale(.55); opacity: .85; }
	80%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* 還沒開放／目前沒有課程：畫得出來、點得開，只是暗的。
   **不要藏起來** —— 地圖破一個洞看起來像壞了（game.js:2646 的同一條規約）。 */
.srg-map-spot.is-locked .srg-map-dot {
	background: radial-gradient(circle at 35% 35%, #e8e4f2 0%, #b39ddb 50%, #5e4a86 100%);
	box-shadow: 0 0 6px 2px rgba(179, 157, 219, .5);
}
.srg-map-spot.is-locked .srg-map-pulse { animation-duration: 4.2s; border-color: rgba(179, 157, 219, .7); }

/* ⚠ hover 一定要關在 media query 裡。觸控螢幕上，瀏覽器對「hover 會改變外觀」
   的元素實作的是第一下套 hover、第二下才送 click（2026-09-02 實機回報）。 */
@media (hover: hover) {
	.srg-map-spot:hover .srg-map-dot { transform: scale(1.4); }
}
.srg-map-spot:focus-visible { outline: none; }
.srg-map-spot:focus-visible .srg-map-dot {
	box-shadow: 0 0 0 3px rgba(245, 210, 122, .95), 0 0 18px 6px rgba(245, 210, 122, .7);
}

/* 吸附點：看不見、不可點，只是給 scroll-snap 用的標記。 */
.srg-map-snap {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	pointer-events: none;
	scroll-snap-align: center;
}

/* ---------- 邊緣漸層（掛在畫面上，不在捲動容器裡） ---------- */
.srg-map-edge {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	z-index: 6;
}
.srg-map-edge.on { opacity: 1; }
.srg-map-edge.l { left: 0; background: linear-gradient(90deg, rgba(10, 10, 20, .85), transparent); }
.srg-map-edge.r { right: 0; background: linear-gradient(270deg, rgba(10, 10, 20, .85), transparent); }

/* ---------- 底下那一列 ---------- */
.srg-map-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding: 6px 12px 10px;
}
.srg-map-hint {
	flex: 1 0 100%;
	margin: 0;
	text-align: center;
	font-size: clamp(10px, 2vw, 12.5px);
	letter-spacing: .05em;
	color: #c8b48a;
}
.srg-map-dots { display: flex; gap: 9px; align-items: center; }
.srg-map-pip {
	position: relative;
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	background: rgba(245, 226, 184, .38);
	transition: width .2s ease, background .2s ease;
}
.srg-map-pip.on { width: 26px; background: var(--srg-honey, #f5d27a); }
/* 9px 摸不到：用一層看不見的外擴當觸控目標（與 .srg-splash-dot 同一招）。 */
.srg-map-pip::before { content: ''; position: absolute; inset: -12px; }
.srg-map-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.srg-map-links .srg-btn { padding: 6px 12px; font-size: 13px; }

/* ---------- 浮動說明 ---------- */
.srg-map-tip {
	position: absolute;
	min-width: 200px;
	max-width: 272px;
	padding: 13px 15px;
	border-radius: 10px;
	background: linear-gradient(160deg, rgba(20, 12, 6, .94) 0%, rgba(38, 22, 8, .96) 100%);
	border: 1px solid rgba(245, 210, 122, .55);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .6), 0 0 22px rgba(245, 210, 122, .18);
	color: #fbf2d8;
	line-height: 1.55;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 18px)) scale(.95);
	transition: opacity .18s ease, transform .18s ease;
	z-index: 40;
}
.srg-map-tip.is-visible { opacity: 1; transform: translate(-50%, calc(-100% - 18px)) scale(1); }
.srg-map-tip.flip-down { transform: translate(-50%, 18px) scale(.95); }
.srg-map-tip.flip-down.is-visible { transform: translate(-50%, 18px) scale(1); }
.srg-map-tip-eyebrow { display: inline-block; font-size: 10px; letter-spacing: .2em; color: #f5d27a; }
.srg-map-tip-title { margin: 3px 0 1px; font-size: 16px; font-weight: 700; color: #fff5d8; }
.srg-map-tip-en { margin: 0 0 7px; font-size: 11px; letter-spacing: .1em; color: #d8c08a; }
.srg-map-tip-desc { margin: 0; font-size: 12.5px; color: #f3e2b8; }
.srg-map-tip-hint { margin: 7px 0 0; font-size: 10px; letter-spacing: .1em; text-align: right;
	font-style: italic; color: rgba(245, 210, 122, .7); }

/* ---------- 地誌卡片 ---------- */
.srg-map-card { position: fixed; inset: 0; z-index: 100; display: flex;
	align-items: center; justify-content: center; }
.srg-map-card-bg { position: absolute; inset: 0;
	background: radial-gradient(ellipse at center, rgba(10, 8, 4, .6) 0%, rgba(0, 0, 0, .86) 100%); }
.srg-map-card-win { position: relative; z-index: 1; width: min(92vw, 540px);
	max-height: 86svh; overflow: auto; overscroll-behavior: contain;
	filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .65)); }
.srg-map-card-x {
	position: absolute; top: 2px; right: 2px; width: 38px; height: 38px; border-radius: 50%;
	border: 2px solid #f5d27a; background: linear-gradient(160deg, #3a2a14, #1d130a);
	color: #f5d27a; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; z-index: 2;
}
.srg-map-parch {
	background:
		radial-gradient(ellipse at 20% 10%, rgba(255, 240, 200, .6), transparent 50%),
		radial-gradient(ellipse at 80% 90%, rgba(120, 80, 30, .18), transparent 55%),
		linear-gradient(180deg, #f4e6c3 0%, #d9c08c 100%);
	color: #2a1a08; border-radius: 6px; padding: 6px;
	box-shadow: inset 0 0 28px rgba(120, 70, 20, .35), inset 0 0 0 1px rgba(80, 40, 10, .25);
}
.srg-map-parch-inner {
	padding: 26px 26px 22px; border: 1px dashed rgba(120, 70, 20, .4); border-radius: 4px;
	background: linear-gradient(180deg, rgba(255, 250, 230, .2), transparent 70%);
}
.srg-map-card-eyebrow { margin: 0 0 6px; text-align: center; font-size: 11px;
	letter-spacing: .28em; color: #6b4a18; }
/* ⚠ 不要用 `font:` 簡寫配 inherit —— 整條會被瀏覽器丟掉（見 CLAUDE.md）。 */
.srg-map-card-title { margin: 0; text-align: center; font-size: clamp(21px, 4.6vw, 29px);
	font-weight: 700; letter-spacing: .06em; color: #2a1a08; }
.srg-map-card-en { display: block; margin-top: 2px; font-size: 13px; font-weight: 500;
	letter-spacing: .12em; color: #7a5a25; }
.srg-map-card-tag { margin: 6px 0 0; text-align: center; font-style: italic;
	font-size: 13px; color: #6b4a18; }
.srg-map-card-rule { position: relative; width: 60%; height: 1px; margin: 14px auto 16px;
	background: linear-gradient(90deg, transparent, rgba(120, 70, 20, .6) 50%, transparent); }
.srg-map-card-rule::before { content: '✦'; position: absolute; top: -10px; left: 50%;
	transform: translateX(-50%); padding: 0 8px; background: #f4e6c3; color: #8a6420; font-size: 12px; }
.srg-map-card-body { font-size: 14.5px; line-height: 1.85; color: #3a2611; text-align: justify; }
.srg-map-card-body p + p { margin-top: 10px; }
.srg-map-card-body em { font-style: normal; color: #6b4a18;
	border-bottom: 1px dotted rgba(107, 74, 24, .5); }
.srg-map-card-foot { margin: 16px 0 0; text-align: center; font-size: 11px;
	letter-spacing: .16em; font-style: italic; color: #7a5a25; }
.srg-map-card-act { margin-top: 16px; padding-top: 14px; text-align: center;
	border-top: 1px solid rgba(120, 70, 20, .25); }
.srg-map-prog { font-size: 13px; letter-spacing: .08em; color: #6b4a18; margin-bottom: 8px; }
.srg-map-go { min-height: 46px; }
.srg-map-lock { margin: 0; font-size: 13.5px; line-height: 1.7; color: #6b4a18; }
.srg-map-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #b32d2e; }

/* ---------- 平板以上：整張看得到，沒有東西可捲 ----------
   斷點是 SRGUtil.tabletUp()（短邊 ≥600）的孿生體，不是新的一條。 */
@media (min-width: 600px) and (min-height: 600px) {
	.srg-map-pan { overflow-x: clip; justify-content: center; }
	/*
	 * 平板以上要「整張都看得見」，所以寬度再夾一層 `min(100%, …)`，
	 * 高度改由 `aspect-ratio` 反推。
	 *
	 * ⚠ **不可以只加 `max-width:100%` 而把高度留著。** 高度是定值時
	 * `aspect-ratio` 讓不了步，被夾住的只有寬度 —— 實測 768×1024 會畫成
	 * 746×967（比例 0.77，整張地圖被拉成直的）。要夾寬度就得把高度放回 auto。
	 */
	.srg-map-stage {
		width: min(100%, calc(var(--srg-map-avail, 200px) * var(--srg-map-arn, 1.7978)));
		height: auto;
		aspect-ratio: var(--srg-map-ar, 1280 / 712);
	}
	.srg-map-edge { display: none; }
}

/* 橫放手機：上下兩列讓出高度給地圖。 */
@media (max-height: 560px) {
	.srg-map-bar, .srg-map-foot { padding-block: 3px; }
	.srg-map-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.srg-map-pulse { animation: none; opacity: .5; }
	.srg-map-tip { transition: none; }
}

/* ---------- 由 game.js 塞進來的幾塊 ---------- */

/* 「← 回地圖」。排在 .srg-content 第一個，是這一頁唯一的出口
   （沉浸模式下沒有瀏覽器的返回鍵，2026-09-07 有玩家因此被困住）。 */
.srg-map-back {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.srg-map-back-btn { min-height: 40px; }
.srg-map-back-where {
	font-size: clamp(15px, 3.4vw, 20px);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--srg-ink, #2a1a08);
}

.srg-map-test {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(245, 210, 122, .18);
	border: 1px solid rgba(245, 210, 122, .5);
	color: #f5d27a;
	font-size: 12px;
	white-space: nowrap;
}

/* 選角引導卡疊在地圖上（那裡才看得到「每一境都沒有我的課程」那個空）。 */
.srg-map-nudge {
	position: absolute;
	left: 50%;
	bottom: 68px;
	transform: translateX(-50%);
	width: min(92%, 420px);
	z-index: 30;
	text-align: center;
}
@media (max-height: 560px) {
	.srg-map-nudge { bottom: 44px; }
}

/* 這一境一關都看不到時的說明卡（深連結進來最容易撞到）。 */
.srg-map-empty { margin-top: 12px; text-align: center; }
.srg-map-empty .srg-btn { margin-top: 12px; }