/*
 * 落地页专用样式 —— 内联在landing.php 里，只对该页生效。
 *
 * 为什么内联而不是单独 css 文件：
 *   libHTML 的 <head> 由 starthtml() 固定输出，可注入点只有
 *   Config::customHeader()，而 config.php 不在仓库内（.gitignore），
 *   无法提交改动。页面内 <style> 是唯一零副作用的扩展方式。
 *
 * 命名一律带 landing- 前缀，避免与 global.css / gamepanel.css 冲突。
 * 颜色取自 B 方案「战报新闻」：纸底 + 墨黑 + 印章红。
 */

/* ---------- 版心 ---------- */
div.landing{
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 16px 40px;
	text-align: left;
}

/* ---------- Hero ---------- */
.landing-hero{
	position: relative;
	padding: 40px 0 32px;
	border-bottom: 1px solid var(--rule-strong);
}
/*
 * Hero 背景图：1914 战报头版（images/art/hero-newspaper.jpg）。
 * 氛围不是主体 —— multiply 叠在纸面上、低不透明度、边缘径向渐隐，
 * 保证最弱文字（--ink-faint）压在图最暗处仍有 4.5:1 以上对比度
 * （.13 是按最暗处验算后的定稿值，不要随手调高）。
 * 深色模式下本文件共用，multiply 在深纸面上自然隐去，无需另写规则。
 */
.landing-hero-art{
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url('images/art/hero-newspaper.jpg') center / cover no-repeat;
	opacity: .13;
	mix-blend-mode: multiply;
	-webkit-mask-image: radial-gradient(120% 105% at 50% 42%, #000 52%, transparent 98%);
	mask-image: radial-gradient(120% 105% at 50% 42%, #000 52%, transparent 98%);
	pointer-events: none;
}
.landing-hero-in{
	position: relative;
	z-index: 1;
}
.landing-eyebrow{
	display: block;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--seal);
	margin-bottom: 12px;
}
.landing-title{
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0 0 16px;
	color: var(--ink);
}
.landing-lede{
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 46ch;
	margin: 0 0 26px;
}
.landing-acts{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.landing-btn-primary,
.landing-btn-ghost{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	/* 两个按钮同宽下限：文案一长一短时不会一边大一边小 */
	min-width: 132px;
	padding: 0 22px;
	border-radius: 3px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	transition: background 150ms ease-out, border-color 150ms ease-out;
}
.landing-btn-primary{
	background: var(--seal);
	color: var(--paper-pure);
}
.landing-btn-primary:hover{
	background: var(--seal-bright);
}
.landing-btn-ghost{
	background: transparent;
	border: 1.5px solid var(--ink-faint);
	color: var(--ink);
}
.landing-btn-ghost:hover{
	border-color: var(--ink);
}
/*
 * 按钮也是 <a>，会被 global.css 的全局链接色吃掉：
 *   a:visited (0,1,1) 压过单类 (0,1,0)，访问过的 登录/注册 会变成
 *   「红底红字/纸底红字」；a:hover 还带 !important。
 * 这里用 a.类名:visited/:hover/:active 同权重或更高 + hover/active
 * 上 !important，把按钮的四个状态都钉死在按钮配色上。
 */
a.landing-btn-primary,
a.landing-btn-primary:link,
a.landing-btn-primary:visited{
	color: var(--paper-pure);
	text-decoration: none;
}
a.landing-btn-primary:hover,
a.landing-btn-primary:active{
	color: var(--paper-pure) !important;
}
a.landing-btn-ghost,
a.landing-btn-ghost:link,
a.landing-btn-ghost:visited{
	color: var(--ink);
	text-decoration: none;
}
a.landing-btn-ghost:hover,
a.landing-btn-ghost:active{
	color: var(--ink) !important;
}
.landing-note{
	font-size: 13.5px;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.6;
}

/* ---------- 区块 ---------- */
.landing-sec{
	padding: 34px 0;
	border-bottom: 1px solid var(--rule-strong);
}
.landing-sec-alt{
	background: var(--paper-raised);
	padding-left: 20px;
	padding-right: 20px;
	margin-left: -20px;
	margin-right: -20px;
}
.landing-sec-title{
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--ink);
	margin: 0 0 6px;
}
.landing-sec-sub{
	font-size: 14.5px;
	color: var(--ink-soft);
	margin: 0 0 22px;
}
.landing-sec-cta{
	text-align: center;
	border-bottom: 0;
	padding-top: 40px;
}
.landing-sec-cta p{
	font-size: 15px;
	color: var(--ink-soft);
	margin: 0 0 18px;
}
.landing-sec-cta .landing-btn-primary,
.landing-sec-cta .landing-btn-ghost{
	margin: 0 4px;
}

/* ---------- 真实对局预览 ---------- */
.landing-games{
	margin-top: 4px;
}
.landing-game{
	margin-bottom: 16px;
}
.landing-empty{
	padding: 28px 20px;
	text-align: center;
	background: var(--paper-raised);
	border: 1px dashed var(--rule-double);
	border-radius: 4px;
	font-size: 14.5px;
	color: var(--ink-soft);
}
.landing-empty a{
	color: var(--seal);
	font-weight: bold;
}

/* ---------- 移动端 ---------- */
@media (max-width: 620px){
	div.landing{ padding: 0 14px 30px; }
	.landing-hero{ padding: 28px 0 24px; }
	.landing-title{ font-size: 38px; }
	.landing-lede{ font-size: 16px; }
	.landing-acts{ flex-direction: column; }
	.landing-btn-primary,
	.landing-btn-ghost{ width: 100%; }
	.landing-sec{ padding: 26px 0; }
	.landing-sec-cta .landing-btn-primary,
	.landing-sec-cta .landing-btn-ghost{
		display: flex;
		width: 100%;
		margin: 0 0 8px;
	}
}