/* 安平 An-pêng 官網：五個語系共用這一份樣式。
   顏色取自主視覺：牆面的米黃與紅磚、窗框的青綠、牌桌的深漆色。 */

:root {
	--paper: #f4ecd8;
	--paper-deep: #e8dcbf;
	--ink: #2b1d16;
	--ink-soft: #5a4637;
	--brick: #9a4630;
	--brick-deep: #7a3322;
	--lacquer: #241010;
	--lacquer-soft: #3a1c16;
	--teal: #4f7f73;
	--gold: #d9a441;
	--on-dark: #f1e6d0;
	--on-dark-soft: #c9b79c;
	--radius: 6px;
	--max: 1120px;
	--serif: "Noto Serif TC", "Noto Serif JP", serif;
	--sans: "Noto Sans TC", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 17px/1.85 var(--sans);
	-webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: var(--brick); }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.35; margin: 0 0 .6em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 24px; }

/* ── 頂欄 ───────────────────────────── */
.topbar {
	position: sticky; top: 0; z-index: 20;
	background: rgb(36 16 16 / .92);
	backdrop-filter: blur(6px);
	color: var(--on-dark);
	border-bottom: 1px solid rgb(217 164 65 / .35);
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--serif); font-weight: 700; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 6px; }
.topnav { display: flex; gap: 18px; margin-left: auto; font-size: .95rem; }
.topnav a { color: var(--on-dark-soft); text-decoration: none; }
.topnav a:hover { color: var(--on-dark); }
.lang { position: relative; }
.lang summary {
	list-style: none; cursor: pointer; font-size: .9rem; color: var(--on-dark-soft);
	padding: 4px 10px; border: 1px solid rgb(241 230 208 / .25); border-radius: 999px;
}
.lang summary::-webkit-details-marker { display: none; }
.lang ul {
	position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px 0; list-style: none;
	background: var(--lacquer); border: 1px solid rgb(217 164 65 / .35); border-radius: var(--radius); min-width: 170px;
}
.lang li a, .lang li span { display: block; padding: 6px 14px; color: var(--on-dark); text-decoration: none; font-size: .92rem; }
.lang li a:hover { background: var(--lacquer-soft); }
.lang li span { color: var(--on-dark-soft); opacity: .6; }
.lang li [aria-current] { color: var(--gold); }

/* ── 按鈕 ───────────────────────────── */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 22px; border-radius: 4px;
	font-weight: 700; text-decoration: none; letter-spacing: .04em;
	transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brick); color: #fff7ea; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 3px 0 var(--brick-deep); }
.btn-primary:hover { background: #a8513a; }
.btn-ghost { background: rgb(36 16 16 / .55); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgb(241 230 208 / .45); }
.btn-ghost:hover { background: rgb(36 16 16 / .75); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ── 主視覺 ─────────────────────────── */
.hero {
	position: relative; min-height: min(86vh, 760px);
	display: flex; align-items: center;
	background: #3f78c8 url("assets/hero.webp") 70% 38% / cover no-repeat;
	overflow: hidden;
}
.hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgb(16 26 44 / .72), rgb(16 26 44 / .5) 32%, rgb(16 26 44 / 0) 58%);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; display: flex; justify-content: flex-start; }
.hero-copy { max-width: 520px; text-align: center; color: #fff8ea; }
.hero-logo { width: min(440px, 80vw); margin: 0 auto 18px; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .4)); }
.hero-sub { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .5em; margin: 0 0 18px; padding-left: .5em; text-shadow: 0 2px 8px rgb(0 0 0 / .6); }
.hero-line { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.8; text-shadow: 0 2px 10px rgb(0 0 0 / .7); margin-bottom: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { margin-top: 14px; font-size: .88rem; color: #f0e2c6; text-shadow: 0 1px 6px rgb(0 0 0 / .8); }

/* ── 開場：一段紙上的獨白 ─────────────── */
.prologue { padding-block: 96px 72px; text-align: center; }
.prologue p { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 2.1; max-width: 34em; margin: 0 auto 1.1em; }
.prologue .strong { font-weight: 700; color: var(--brick); }

/* ── 預告片：牌桌的花紋 ───────────────── */
.dark {
	background: var(--lacquer) url("assets/pattern_totem.webp") center / 420px repeat;
	color: var(--on-dark);
	position: relative;
}
.dark::before { content: ""; position: absolute; inset: 0; background: rgb(24 8 8 / .62); }
.dark > * { position: relative; }
.trailer { padding: 80px 0; }
.trailer .yt {
	display: block; width: 100%; border: 0; border-radius: var(--radius);
	box-shadow: 0 0 0 1px rgb(217 164 65 / .5), 0 24px 60px rgb(0 0 0 / .55);
	background: #000; aspect-ratio: 16 / 9;
}

/* ── 特色：圖文交錯 ─────────────────── */
.features { padding-block: 96px 40px; }
.feature {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
	margin-bottom: 96px;
}
.feature:nth-child(even) .feature-media { order: 2; }
.feature-media img, .feature-media video {
	border-radius: var(--radius);
	box-shadow: 0 0 0 6px #fffaf0, 0 0 0 7px var(--paper-deep), 0 18px 40px rgb(60 30 10 / .25);
	cursor: zoom-in;
}
.feature-media video { cursor: default; width: 100%; }
.feature-media.square video { max-width: 440px; margin: 0 auto; }
.duel-clip { width: 100%; max-width: 880px; margin: 32px auto 0; border-radius: var(--radius); box-shadow: 0 0 0 1px rgb(217 164 65 / .45), 0 20px 50px rgb(0 0 0 / .5); }
.taigi .dialogue video { width: 100%; border-radius: 4px; box-shadow: 0 14px 34px rgb(40 20 10 / .3); }
.feature-text .kicker { display: block; font-size: .85rem; letter-spacing: .25em; color: var(--teal); font-weight: 700; margin-bottom: 6px; }
.feature-text .coda { font-family: var(--serif); font-weight: 700; color: var(--brick); }
.stats { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1em; list-style: none; }
.stats li { background: #fffaf0; border: 1px solid var(--paper-deep); border-radius: 999px; padding: 2px 12px; font-size: .92rem; }

/* ── 牌桌 ───────────────────────────── */
.duel { padding: 96px 0; text-align: center; }
.duel .lead { max-width: 36em; margin: 0 auto 40px; color: var(--on-dark-soft); }
.cards { display: flex; justify-content: center; gap: clamp(12px, 3vw, 36px); margin-bottom: 36px; }
.cards figure { margin: 0; width: clamp(96px, 18vw, 180px); }
.cards img { border-radius: 8px; box-shadow: 0 12px 30px rgb(0 0 0 / .5); transition: transform .2s ease; }
.cards figure:nth-child(1) img { transform: rotate(-6deg); }
.cards figure:nth-child(3) img { transform: rotate(6deg); }
.cards figure:hover img { transform: translateY(-8px) rotate(0); }
.cards figcaption { margin-top: 14px; font-family: var(--serif); font-size: 1.1rem; color: var(--gold); }
.duel .rule { font-family: var(--serif); font-size: 1.2rem; letter-spacing: .15em; }
.duel .more { max-width: 36em; margin: 28px auto 0; color: var(--on-dark-soft); }
.duel .more + .more { margin-top: 12px; }
.duel .coda-dark { font-family: var(--serif); font-weight: 700; color: var(--gold); }

/* ── 台語 ───────────────────────────── */
.taigi { padding: 96px 0; background: var(--paper-deep); }
.taigi .grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 900px; }
.taigi .dialogue { margin: 0; }
.taigi .dialogue figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 10px; }
.taigi .poj { font-size: .95rem; color: var(--ink-soft); }

/* ── 畫面 ───────────────────────────── */
.gallery { padding-block: 96px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.shots button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.shots img { aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s ease; }
.shots button:hover img { transform: scale(1.04); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.lightbox::backdrop { background: rgb(12 6 4 / .88); }
.lightbox img { max-height: 90vh; width: auto; border-radius: 4px; }
.lightbox form { position: fixed; top: 14px; right: 18px; }
.lightbox button { background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }

/* ── 關於名字、畫面、開發 ──────────────── */
.notes { padding: 80px 0 96px; background: var(--paper-deep); }
.notes .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.note {
	position: relative;
	background: #fffaf0; padding: 34px 28px 20px; border-radius: 3px;
	box-shadow: 0 1px 0 var(--paper-deep), 0 10px 24px rgb(60 30 10 / .12);
}
/* 一段紙膠帶，跟遊戲裡紙張視窗的關閉膠帶同一個意思 */
.note::before {
	content: ""; position: absolute; top: -10px; left: 50%; width: 92px; height: 22px;
	transform: translateX(-50%) rotate(-2deg);
	background: rgb(79 127 115 / .55);
	box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}
.note:nth-child(2)::before { background: rgb(217 164 65 / .6); transform: translateX(-50%) rotate(2deg); }
.note:nth-child(3)::before { background: rgb(154 70 48 / .5); }
.note h3 { color: var(--brick); }
.note p { font-size: .97rem; line-height: 2; }

/* ── 收尾：Steam ─────────────────────── */
.wishlist { padding: 96px 0; text-align: center; }
.wishlist .quote { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: 36px; }
.wishlist .hero-cta { margin-top: 8px; }
/* Steam 官方的商店小工具：寬度固定 646，窄螢幕縮到滿版（裡面的排版 Steam 自己會擠） */
.steam-widget { display: block; width: 646px; max-width: 100%; height: 190px; border: 0; margin: 0 auto 28px; }
/* 小工具裡已經有願望清單鈕，寬螢幕就不再放自己的；比 680 窄時小工具右半會被切掉，改回自己的兩顆按鈕 */
.wishlist .only-narrow { display: none; }
@media (max-width: 680px) {
	.steam-widget { display: none; }
	.wishlist .only-narrow { display: inline-flex; }
}

/* ── 媒體 ───────────────────────────── */
.press { padding-block: 88px; }
.press .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.facts { width: 100%; border-collapse: collapse; font-size: .95rem; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 9px 0; border-bottom: 1px solid var(--paper-deep); }
.facts th { width: 7.5em; color: var(--ink-soft); font-weight: 500; padding-right: 16px; }
.downloads { list-style: none; padding: 0; margin: 0 0 1.4em; }
.downloads li { margin-bottom: 8px; }
.downloads a { display: inline-flex; gap: 8px; align-items: center; }
.small { font-size: .9rem; color: var(--ink-soft); }

/* ── 頁尾 ───────────────────────────── */
footer { background: var(--lacquer); color: var(--on-dark-soft); padding: 40px 0; font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
footer a { color: var(--on-dark); }
footer ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }

/* ── 窄螢幕 ─────────────────────────── */
@media (max-width: 860px) {
	body { font-size: 16px; }
	.topnav { display: none; }
	.lang { margin-left: auto; }
	/* 窄螢幕：整張圖放上面讓媽祖像露出來，logo 與文字接在下面的深藍底上 */
	.hero {
		display: block; min-height: 0;
		background-color: #142034; background-size: 100% auto; background-position: top center;
		padding-top: 62vw;
	}
	.hero::after { background: linear-gradient(180deg, rgb(20 32 52 / 0) 0, rgb(20 32 52 / 0) 42vw, #142034 75vw); }
	.hero .wrap { justify-content: center; padding-bottom: 48px; }
	.hero-logo { width: min(320px, 72vw); }
	.feature, .taigi .grid, .press .grid { grid-template-columns: 1fr; gap: 24px; }
	.feature:nth-child(even) .feature-media { order: 0; }
	.feature { margin-bottom: 64px; }
	.notes .grid { grid-template-columns: 1fr; }
	.prologue, .features, .duel, .taigi, .gallery, .wishlist, .press { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 520px) {
	.wrap { padding-inline: 16px; }
	.brand span { display: none; }
	.shots { grid-template-columns: 1fr 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* 開場那幾句的斷行是照桌機寬度排的，窄螢幕讓它自己換行 */
@media (max-width: 640px) {
	.prologue br { display: none; }
	.prologue p { text-align: left; }
}

/* ── 各語系的字型：拉丁字母的頁面先用 Noto Sans／Serif（白話字的 o͘、ⁿ 也在裡面），漢字落到 TC ── */
body.locale-en, body.locale-de, body.locale-nan {
	--serif: "Noto Serif", "Noto Serif TC", serif;
	--sans: "Noto Sans", "Noto Sans TC", system-ui, sans-serif;
}
body.locale-ja {
	--serif: "Noto Serif JP", serif;
	--sans: "Noto Sans JP", system-ui, sans-serif;
}
/* 副標的字距是照漢字四個字排的，拉丁字母拉那麼開就散了 */
body.locale-en .hero-sub, body.locale-de .hero-sub, body.locale-nan .hero-sub { letter-spacing: .12em; padding-left: 0; }
body.locale-en .rule, body.locale-de .rule, body.locale-nan .rule { letter-spacing: .02em; }

/* 日文的欄名比較長（パブリッシャー、プラットフォーム） */
body.locale-ja .facts th { width: 9.5em; }