/* ============================================================
   Ellan 艾尔岚 · 玩法百科电影化长页
   依赖 main.css 的颜色、字体、按钮、导航与 reveal 基座
   ============================================================ */

body.gameplay-page { background: var(--bg); }

/* 阅读进度 */
.reading-progress {
	position: fixed;
	top: 71px;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 1100;
	pointer-events: none;
	transition: opacity .18s ease;
}
html.page-leaving .reading-progress,
html.page-arriving .reading-progress { opacity: 0; }
.reading-progress > i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--grad);
	box-shadow: 0 0 16px rgba(143, 221, 85, .45);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* ---------- 开场：无图电影片名 ---------- */
.game-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
}
.game-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background:
		radial-gradient(circle at 50% -12%, rgba(245, 190, 79, .22), transparent 42%),
		radial-gradient(circle at 50% 112%, rgba(94, 214, 196, .17), transparent 44%),
		linear-gradient(180deg, #090a08, var(--bg));
}
.game-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(rgba(244, 242, 230, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(244, 242, 230, .022) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.game-hero-glow {
	position: absolute;
	inset: 13% 9%;
	z-index: -1;
	border: 1px solid rgba(244, 242, 230, .07);
	border-radius: 50%;
	filter: blur(.2px);
	animation: slowOrbit 28s linear infinite;
}
.game-hero-glow::before,
.game-hero-glow::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}
.game-hero-glow::before {
	inset: 7% -4%;
	border: 1px solid rgba(143, 221, 85, .07);
}
.game-hero-glow::after {
	inset: -9% 8%;
	border: 1px solid rgba(94, 214, 196, .06);
}
@keyframes slowOrbit { to { transform: rotate(360deg); } }
.game-hero-inner {
	position: relative;
	width: min(1380px, calc(100% - 48px));
	padding: 120px 0 72px;
	text-align: center;
}
.game-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 7px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--text-faint);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	animation: heroRise .8s var(--ease-out) .04s both;
}
.game-breadcrumb a { color: var(--text-dim); transition: color .2s ease; }
.game-breadcrumb a:hover { color: var(--leaf); }
.game-breadcrumb strong { color: var(--text); font-weight: 700; }
.game-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .24em;
	color: var(--text-dim);
	animation: heroRise .9s var(--ease-out) .1s both;
}
.game-hero-eyebrow::before,
.game-hero-eyebrow::after {
	content: "";
	width: 42px;
	height: 1px;
	background: var(--line-strong);
}
.game-hero h1 {
	margin-top: 28px;
	font-family: var(--font-display);
	font-size: clamp(64px, 13.2vw, 190px);
	font-weight: 800;
	line-height: .88;
	letter-spacing: -.015em;
	filter: drop-shadow(0 18px 60px rgba(0,0,0,.55));
	animation: heroRise 1s var(--ease-out) .22s both;
}
.game-hero-cn {
	margin-top: 24px;
	font-size: clamp(22px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: .18em;
	animation: heroRise 1s var(--ease-out) .38s both;
}
.game-hero-intro {
	max-width: 760px;
	margin: 22px auto 0;
	color: var(--text-dim);
	font-size: 15px;
	line-height: 2;
	animation: heroRise 1s var(--ease-out) .5s both;
}
.first-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding: 10px 18px;
	border: 1px solid rgba(245, 190, 79, .35);
	border-radius: 999px;
	background: rgba(245, 190, 79, .07);
	color: var(--gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	animation: heroRise 1s var(--ease-out) .6s both;
}
.first-badge b {
	font-family: var(--font-display);
	font-size: 10px;
	letter-spacing: .13em;
}
.hero-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 920px;
	margin: 62px auto 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	animation: heroRise 1s var(--ease-out) .72s both;
}
.hero-stat {
	padding: 22px 26px 24px;
}
.hero-stat + .hero-stat { border-left: 1px solid var(--line); }
.hero-stat strong {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1;
	color: var(--text);
}
.hero-stat:nth-child(1) strong { color: var(--gold); }
.hero-stat:nth-child(2) strong { color: var(--leaf); }
.hero-stat:nth-child(3) strong { color: var(--aqua); }
.hero-stat span {
	display: block;
	margin-top: 10px;
	color: var(--text-faint);
	font-size: 11px;
	letter-spacing: .08em;
}

/* ---------- sticky 章节标尺 ---------- */
.chapter-rail {
	position: sticky;
	top: 72px;
	z-index: 900;
	background: rgba(11, 13, 9, .83);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.chapter-rail-inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow-x: auto;
	scrollbar-width: none;
}
.chapter-rail-inner::-webkit-scrollbar { display: none; }
.chapter-link {
	position: relative;
	flex: 0 0 auto;
	padding: 17px 18px 15px;
	color: var(--text-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	transition: color .2s ease;
}
.chapter-link::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: -1px;
	height: 2px;
	background: var(--grad);
	transform: scaleX(0);
	transition: transform .3s var(--ease-out);
}
.chapter-link:hover,
.chapter-link.active { color: var(--text); }
.chapter-link.active::after { transform: scaleX(1); }
.chapter-link b {
	margin-right: 7px;
	font-family: var(--font-display);
	font-size: 9px;
	color: var(--gold);
}

/* ---------- 通用章节与镜头语言 ---------- */
.game-chapter {
	position: relative;
	padding: 130px 0;
	overflow: clip;
}
.game-chapter.alt { background: rgba(255,255,255,.012); }
.chapter-number {
	position: absolute;
	top: 72px;
	left: max(24px, calc((100vw - var(--container)) / 2 - 90px));
	z-index: -1;
	font-family: var(--font-display);
	font-size: clamp(150px, 24vw, 380px);
	font-weight: 800;
	line-height: .75;
	color: rgba(244, 242, 230, .034);
	pointer-events: none;
	will-change: transform;
}
.chapter-head {
	max-width: 820px;
	margin-bottom: 70px;
}
.chapter-head.center { margin-inline: auto; text-align: center; }
.chapter-head h2 {
	margin-top: 18px;
	font-size: clamp(38px, 5.4vw, 72px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
}
.chapter-head .lead {
	margin-top: 22px;
	color: var(--text-dim);
	font-size: 16px;
	line-height: 2;
}
.reel-break {
	position: relative;
	height: 74px;
	display: grid;
	place-items: center;
	color: var(--text-faint);
	font-family: var(--font-display);
	font-size: 9px;
	letter-spacing: .28em;
}
.reel-break::before {
	content: "";
	position: absolute;
	left: 5%;
	right: 5%;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}
.reel-break span {
	position: relative;
	padding: 0 20px;
	background: var(--bg);
}

/* ---------- 序章 ---------- */
.manifesto-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--line);
	border-radius: 26px;
	overflow: hidden;
}
.manifesto-item {
	min-height: 230px;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: rgba(255,255,255,.018);
}
.manifesto-item + .manifesto-item { border-left: 1px solid var(--line); }
.manifesto-item b {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--text-faint);
}
.manifesto-item h3 {
	font-size: clamp(22px, 2.1vw, 30px);
	line-height: 1.45;
}
.manifesto-item:nth-child(1) h3 { color: var(--gold); }
.manifesto-item:nth-child(2) h3 { color: var(--aqua); }
.manifesto-item:nth-child(3) h3 { color: var(--leaf); }
.manifesto-item:nth-child(4) h3 { color: var(--gold); }
/* ---------- NPC 对白 ---------- */
.npc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
.npc-card {
	position: relative;
	padding: 32px 32px 30px 38px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
	transition: transform .3s var(--ease-out), border-color .3s ease;
}
.npc-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.npc-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 28px;
	bottom: 28px;
	width: 3px;
	background: var(--grad);
	border-radius: 3px;
}
.npc-card blockquote {
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.9;
	color: rgba(244,242,230,.9);
}
.npc-card blockquote::before { content: "“"; color: var(--gold); font-size: 30px; line-height: 0; vertical-align: -.24em; margin-right: 4px; }
.npc-name {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 20px;
}
.npc-name strong { font-size: 18px; }
.npc-name span { color: var(--aqua); font-size: 11px; }
.npc-points { margin-top: 16px; color: var(--text-dim); font-size: 13px; line-height: 1.8; }
.npc-wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 34px;
}
.npc-wall span {
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--text-dim);
	font-size: 11px;
}
.npc-wall strong { color: var(--leaf); }

/* ---------- 世界区域 ---------- */
.world-regions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
.region-card {
	position: relative;
	min-height: 350px;
	padding: 38px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 26px;
	overflow: hidden;
	isolation: isolate;
	background: #11150d;
}
.region-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	transition: transform 1s var(--ease-out);
}
.region-card:hover::before { transform: scale(1.04); }
.region-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8,9,7,.08), rgba(8,9,7,.95));
}
.region-card.city::before { background-image: url("../img/world-city-street-hd.webp"); }
.region-card.valley::before { background-image: url("../img/gameplay-daily.jpg?v=20260802"); }
.region-card.iron::before { background-image: url("../img/showcase-stall-01-hd.webp"); }
.region-card.borderland::before { background-image: url("../img/hero-world-hd.webp"); }
.region-code { font-family: var(--font-display); font-size: 10px; letter-spacing: .18em; color: var(--gold); }
.region-card h3 { margin-top: 10px; font-size: 31px; }
.region-card p { max-width: 520px; margin-top: 10px; color: var(--text-dim); font-size: 13px; line-height: 1.85; }
.region-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.region-meta span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; color: var(--text-dim); }
.freedom-banner {
	margin-bottom: 28px;
	padding: 23px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border: 1px solid rgba(143,221,85,.22);
	border-radius: 18px;
	background: rgba(143,221,85,.045);
}
.freedom-banner strong { font-size: 18px; color: var(--leaf); }
.freedom-banner p { color: var(--text-dim); font-size: 13px; }

/* ---------- 四大生活玩法焦点镜头 ---------- */
.focus-system {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
	gap: 70px;
	align-items: center;
	min-height: 720px;
	padding: 80px 0;
	border-top: 1px solid var(--line);
}
.focus-system.flip .system-copy { order: 2; }
.focus-system.flip .system-visual { order: 1; }
.system-index {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--gold);
}
.system-copy h3 { margin-top: 18px; font-size: clamp(35px, 4.4vw, 62px); line-height: 1.1; }
.system-tagline { margin-top: 12px; color: var(--leaf); font-size: 18px; font-weight: 700; }
.system-copy > p { margin-top: 20px; color: var(--text-dim); line-height: 2; }
.step-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.step-line span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); font-size: 10px; }
.step-line i { align-self: center; color: var(--leaf); font-style: normal; }
.system-visual {
	position: relative;
	min-height: 480px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 30px;
	background:
		radial-gradient(circle at center, rgba(143,221,85,.07), transparent 60%),
		rgba(255,255,255,.018);
	overflow: hidden;
}
.system-visual::before {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(244,242,230,.045);
	border-radius: 22px;
}
.visual-label {
	position: absolute;
	left: 26px;
	top: 22px;
	font-family: var(--font-display);
	font-size: 9px;
	letter-spacing: .16em;
	color: var(--text-faint);
}

/* 四季轮盘 */
.season-wheel {
	position: relative;
	width: min(340px, 72vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(
		rgba(143,221,85,.72) 0 25%,
		rgba(245,190,79,.78) 25% 50%,
		rgba(224,90,77,.62) 50% 75%,
		rgba(94,214,196,.66) 75% 100%);
	box-shadow: 0 28px 70px rgba(0,0,0,.35);
}
.season-wheel::before {
	content: "四季农时";
	position: absolute;
	inset: 25%;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #11150d;
	border: 1px solid var(--line-strong);
	font-weight: 800;
	letter-spacing: .12em;
}
.season-wheel span { position: absolute; font-size: 13px; font-weight: 800; color: #11150d; }
.season-wheel .spring { top: 19%; right: 18%; }
.season-wheel .summer { right: 18%; bottom: 19%; }
.season-wheel .autumn { left: 18%; bottom: 19%; }
.season-wheel .winter { top: 19%; left: 18%; color: #0c2a27; }

/* 钓鱼收杆条 */
.fishing-game { width: min(340px, 72vw); text-align: center; }
.fish-track {
	position: relative;
	height: 300px;
	width: 78px;
	margin: auto;
	border: 5px solid #2a3122;
	border-radius: 18px;
	background: linear-gradient(180deg, #10140e, #172017);
	box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 22px 60px rgba(0,0,0,.35);
	overflow: hidden;
}
.fish-zone {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 36%;
	height: 72px;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--leaf), var(--aqua));
	box-shadow: 0 0 20px rgba(143,221,85,.35);
}
.fish-pointer {
	position: absolute;
	left: 2px;
	right: 2px;
	height: 4px;
	background: var(--gold);
	box-shadow: 0 0 12px var(--gold);
	animation: fishSweep 2.6s ease-in-out infinite alternate;
}
@keyframes fishSweep { from { top: 10%; } to { top: 88%; } }
.fishing-game strong { display: block; margin-top: 25px; font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; }
.fishing-game small { display: block; margin-top: 8px; color: var(--text-faint); }

/* 食谱谜语 */
.riddle-card {
	position: relative;
	width: min(360px, 76vw);
	min-height: 300px;
	padding: 34px;
	border: 1px solid rgba(245,190,79,.28);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(245,190,79,.08), rgba(255,255,255,.025));
	box-shadow: 0 24px 70px rgba(0,0,0,.3);
}
.riddle-card .riddle-kicker { font-family: var(--font-display); font-size: 9px; letter-spacing: .18em; color: var(--gold); }
.riddle-card blockquote { margin-top: 35px; font-family: var(--font-serif); font-size: 23px; line-height: 1.7; }
.riddle-answer {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 30px;
	border-radius: inherit;
	background: #151a11;
	text-align: center;
	opacity: 0;
	transform: scale(.97);
	transition: opacity .3s ease, transform .3s var(--ease-out);
}
.riddle-card:hover .riddle-answer,
.riddle-card:focus-within .riddle-answer { opacity: 1; transform: none; }
.riddle-answer strong { font-size: 30px; color: var(--leaf); }
.riddle-answer small { display: block; margin-top: 10px; color: var(--text-dim); }
.riddle-reveal { position: absolute; left: 30px; bottom: 22px; color: var(--text-faint); font-size: 10px; }

/* 酿造星级 */
.brew-study { width: min(400px, 78vw); }
.brew-stars { display: flex; justify-content: space-between; gap: 8px; }
.brew-stars i {
	flex: 1;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-style: normal;
	font-size: 18px;
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 93%, 50% 71%, 21% 93%, 32% 57%, 2% 35%, 39% 35%);
	background: var(--gold);
	color: #2b1b05;
	filter: drop-shadow(0 0 10px rgba(245,190,79,.25));
}
.brew-scale { margin-top: 34px; }
.brew-scale-line { height: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(245,190,79,.12), var(--gold)); position: relative; }
.brew-scale-line::after { content: ""; position: absolute; right: -2px; top: -4px; width: 16px; height: 16px; border: 3px solid #151a11; border-radius: 50%; background: var(--gold); }
.brew-scale-labels { display: flex; justify-content: space-between; margin-top: 12px; font-size: 10px; color: var(--text-faint); }
.brew-study p { margin-top: 34px; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.8; }

/* details 长清单 */
.lore-details {
	margin-top: 28px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.lore-details summary {
	position: relative;
	padding: 19px 38px 19px 2px;
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dim);
}
.lore-details summary::-webkit-details-marker { display: none; }
.lore-details summary::after {
	content: "+";
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--leaf);
}
.lore-details[open] summary::after { content: "−"; }
.lore-details-content { padding: 0 0 24px; color: var(--text-dim); font-size: 13px; line-height: 2; }
.lore-details-content .tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }

/* ---------- 深度系统 ---------- */
.deep-system-grid { display: grid; gap: 24px; }
.deep-card {
	padding: 44px;
	border: 1px solid var(--line);
	border-radius: 26px;
	background: rgba(255,255,255,.018);
}
.deep-head { display: grid; grid-template-columns: 100px 1fr; gap: 28px; align-items: start; }
.deep-no {
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 1;
	color: var(--text-faint);
}
.deep-head h3 { font-size: clamp(30px, 4vw, 50px); line-height: 1.15; }
.deep-head p { margin-top: 12px; color: var(--text-dim); line-height: 1.9; }
.rarity-scale { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 36px; }
.rarity { min-height: 86px; padding: 12px 8px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 9px; color: #0b0d09; }
.rarity b { font-size: 12px; }
.rarity small { font-size: 9px; opacity: .75; }
.rarity.common { background: #f2f0e6; }
.rarity.uncommon { background: #6eb36a; }
.rarity.fine { background: #7dc4ce; }
.rarity.epic { background: #e18b9d; }
.rarity.legend { background: #efad63; }
.rarity.mythic { background: #e9c64c; }
.rarity.curse { background: #d44b45; }
.rarity.skin { background: #efb7c8; }
.feature-family-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
.feature-family { padding: 20px 16px; border: 1px solid var(--line); border-radius: 14px; }
.feature-family b { display: block; color: var(--gold); }
.feature-family span { display: block; margin-top: 8px; color: var(--text-faint); font-size: 10px; line-height: 1.6; }
.furniture-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.furniture-themes span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); font-size: 11px; }
.dragon-table { margin-top: 32px; border-top: 1px solid var(--line); }
.dragon-row {
	display: grid;
	grid-template-columns: 90px 1.2fr 1.8fr;
	gap: 22px;
	align-items: center;
	padding: 19px 4px;
	border-bottom: 1px solid var(--line);
}
.dragon-row time { font-family: var(--font-display); color: var(--gold); }
.dragon-row strong { font-size: 17px; }
.dragon-row span { color: var(--text-dim); font-size: 12px; }
.reward-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.reward-strip div { padding: 20px; text-align: center; }
.reward-strip div + div { border-left: 1px solid var(--line); }
.reward-strip strong { display: block; font-family: var(--font-display); font-size: 24px; color: var(--leaf); }
.reward-strip small { color: var(--text-faint); }

.light-system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.light-card { min-height: 310px; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.light-card b { font-family: var(--font-display); font-size: 10px; letter-spacing: .16em; color: var(--aqua); }
.light-card h3 { margin-top: 18px; font-size: 25px; }
.light-card p { margin-top: 14px; color: var(--text-dim); font-size: 13px; line-height: 1.9; }
.light-card ul { margin-top: 15px; padding-left: 18px; color: var(--text-dim); font-size: 12px; line-height: 1.9; }

/* ---------- 经济 ---------- */
.currency-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.currency-card { min-height: 230px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.currency-card b { font-family: var(--font-display); font-size: 10px; color: var(--gold); }
.currency-card h3 { margin-top: 24px; font-size: 22px; }
.currency-card p { margin-top: 12px; color: var(--text-dim); font-size: 12px; line-height: 1.8; }
.market-panel {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 50px;
	align-items: center;
	margin-top: 42px;
	padding: 44px;
	border: 1px solid var(--line);
	border-radius: 26px;
	background: linear-gradient(120deg, rgba(245,190,79,.045), rgba(94,214,196,.03));
}
.market-copy h3 { font-size: 32px; }
.market-copy p { margin-top: 14px; color: var(--text-dim); line-height: 1.9; }
.factor-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.factor-list span { padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-dim); font-size: 11px; }
.price-chart { position: relative; height: 260px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.price-chart::before,
.price-chart::after { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(245,190,79,.32); color: var(--gold); font-family: var(--font-display); font-size: 9px; }
.price-chart::before { content: "上限 9.2"; top: 18%; padding-top: 5px; }
.price-chart::after { content: "下限 7.2"; bottom: 18%; padding-top: 5px; }
.price-line { position: absolute; inset: 12% 0 13%; background: var(--grad); clip-path: polygon(0 72%, 10% 60%, 20% 68%, 31% 42%, 42% 50%, 52% 24%, 63% 36%, 73% 18%, 84% 43%, 92% 30%, 100% 35%, 100% 38%, 92% 33%, 84% 46%, 73% 21%, 63% 39%, 52% 27%, 42% 53%, 31% 45%, 20% 71%, 10% 63%, 0 75%); }
.price-label { position: absolute; right: 0; bottom: -28px; color: var(--text-faint); font-size: 10px; }

/* ---------- 任务与交易 ---------- */
.order-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.order-card { padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.order-card b { font-family: var(--font-display); font-size: 10px; letter-spacing: .15em; color: var(--gold); }
.order-card h3 { margin-top: 17px; font-size: 25px; }
.order-example { margin-top: 18px; padding: 16px; border-left: 2px solid var(--leaf); background: rgba(143,221,85,.035); color: var(--text-dim); font-size: 12px; line-height: 1.8; }
.order-reward { margin-top: 14px; color: var(--leaf); font-size: 12px; font-weight: 700; }
.weekly-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 24px; margin-top: 20px; }
.weekly-list span { padding-bottom: 9px; border-bottom: 1px solid var(--line); color: var(--text-dim); font-size: 11px; }
.craft-demand { margin-top: 34px; text-align: center; font-size: clamp(24px, 3vw, 38px); font-weight: 800; }
.trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.trade-card { min-height: 270px; padding: 32px 26px; background: rgba(255,255,255,.018); }
.trade-card + .trade-card { border-left: 1px solid var(--line); }
.trade-card b { font-family: var(--font-display); font-size: 30px; color: var(--text-faint); }
.trade-card h3 { margin-top: 42px; font-size: 21px; }
.trade-card p { margin-top: 12px; color: var(--text-dim); font-size: 12px; line-height: 1.8; }

/* ---------- 闭环与成长时间轴 ---------- */
.loop-map {
	display: grid;
	grid-template-columns: 1fr 68px 1.2fr 68px 1.2fr 68px 1fr;
	align-items: stretch;
	gap: 0;
}
.loop-node {
	min-height: 180px;
	padding: 26px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--card);
	text-align: center;
}
.loop-node strong { font-size: 19px; }
.loop-node span { margin-top: 9px; color: var(--text-faint); font-size: 11px; line-height: 1.7; }
.loop-node.highlight { border-color: rgba(143,221,85,.3); background: rgba(143,221,85,.045); }
.loop-arrow { position: relative; display: grid; place-items: center; color: var(--leaf); font-family: var(--font-display); }
.loop-arrow::before { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: var(--grad); }
.loop-arrow b { position: relative; padding: 4px; background: var(--bg); }
.loop-return { margin: 18px 6% 0; padding-top: 20px; border-top: 1px dashed var(--line-strong); text-align: center; color: var(--text-faint); font-size: 11px; }
.growth-route { max-width: 820px; margin: 90px auto 0; }
.growth-route > h3 { text-align: center; font-size: 30px; }
.growth-steps { position: relative; margin-top: 42px; }
.growth-steps::before { content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(var(--gold), var(--leaf), var(--aqua)); }
.growth-step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 0 0 32px; }
.growth-step:last-child { padding-bottom: 0; }
.growth-step b { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); font-family: var(--font-display); font-size: 11px; color: var(--gold); }
.growth-step div { padding-top: 3px; }
.growth-step strong { display: block; font-size: 17px; }
.growth-step span { display: block; margin-top: 5px; color: var(--text-dim); font-size: 12px; }

/* ---------- 收束 CTA ---------- */
.game-finale {
	position: relative;
	padding: 150px 0 130px;
	text-align: center;
	overflow: hidden;
}
.game-finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 70%, rgba(143,221,85,.1), transparent 45%); }
.game-finale h2 { margin-top: 22px; font-size: clamp(40px, 7vw, 92px); line-height: 1.08; }
.game-finale p { max-width: 650px; margin: 24px auto 0; color: var(--text-dim); line-height: 1.9; }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }

/* QA */
.qa-shot .game-hero { min-height: 940px; }
.qa-shot .game-hero * { animation: none !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 1120px) {
	.focus-system { grid-template-columns: 1fr 390px; gap: 42px; }
	.currency-grid { grid-template-columns: repeat(2, 1fr); }
	.trade-grid { grid-template-columns: repeat(2, 1fr); }
	.trade-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
	.trade-card:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
	.reading-progress { top: 63px; }
	.chapter-rail { top: 64px; }
	.chapter-rail-inner { justify-content: flex-start; }
	.game-chapter { padding: 96px 0; }
	.chapter-head { margin-bottom: 50px; }
	.manifesto-grid { grid-template-columns: 1fr 1fr; }
	.manifesto-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
	.manifesto-item:nth-child(4) { border-top: 1px solid var(--line); }
	.npc-grid, .world-regions { grid-template-columns: 1fr; }
	.focus-system, .focus-system.flip { grid-template-columns: 1fr; min-height: auto; padding: 70px 0; }
	.focus-system .system-copy, .focus-system .system-visual,
	.focus-system.flip .system-copy, .focus-system.flip .system-visual { order: initial; }
	.system-visual { min-height: 440px; }
	.feature-family-grid { grid-template-columns: repeat(2, 1fr); }
	.rarity-scale { grid-template-columns: repeat(4, 1fr); }
	.market-panel { grid-template-columns: 1fr; }
	.order-grid { grid-template-columns: 1fr; }
	.loop-map { grid-template-columns: 1fr; gap: 0; }
	.loop-arrow { min-height: 54px; }
	.loop-arrow::before { left: 50%; right: auto; top: 7px; bottom: 7px; width: 1px; height: auto; }
	.loop-arrow b { transform: rotate(90deg); }
	.hero-stat-row { max-width: 680px; }
}
@media (max-width: 600px) {
	.game-hero-inner { width: min(100% - 32px, 1380px); padding-top: 100px; }
	.game-hero h1 { font-size: clamp(48px, 15vw, 82px); }
	.game-hero-cn { letter-spacing: .08em; }
	.hero-stat-row { grid-template-columns: 1fr; margin-top: 40px; }
	.hero-stat + .hero-stat { border-left: 0; border-top: 1px solid var(--line); }
	.hero-stat { padding: 15px; }
	.chapter-link { padding-inline: 14px; }
	.chapter-number { top: 55px; }
	.manifesto-grid { grid-template-columns: 1fr; }
	.manifesto-item { min-height: 170px; }
	.manifesto-item + .manifesto-item { border-left: 0; border-top: 1px solid var(--line); }
	.deep-card, .market-panel { padding: 28px 22px; }
	.npc-card { padding: 27px 24px 25px 30px; }
	.freedom-banner { align-items: flex-start; flex-direction: column; }
	.region-card { min-height: 310px; padding: 28px; }
	.system-visual { min-height: 390px; }
	.deep-head { grid-template-columns: 1fr; gap: 12px; }
	.deep-no { font-size: 34px; }
	.rarity-scale { grid-template-columns: 1fr 1fr; }
	.feature-family-grid { grid-template-columns: 1fr; }
	.dragon-row { grid-template-columns: 75px 1fr; gap: 10px; }
	.dragon-row span { grid-column: 1 / -1; }
	.reward-strip { grid-template-columns: 1fr 1fr; }
	.reward-strip div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
	.reward-strip div:nth-child(4) { border-top: 1px solid var(--line); }
	.light-system-grid, .currency-grid { grid-template-columns: 1fr; }
	.factor-list, .weekly-list { grid-template-columns: 1fr; }
	.trade-grid { grid-template-columns: 1fr; }
	.trade-card + .trade-card { border-left: 0; border-top: 1px solid var(--line); }
	.loop-node { min-height: 145px; }
}

@media (prefers-reduced-motion: reduce) {
	.reading-progress > i, .chapter-number { will-change: auto; }
	.game-hero-glow, .fish-pointer { animation: none !important; }
}