/* ==========================================================================
   inkrift.net — 官网样式（墨卷设计语言）
   取自游戏内主题：src/ui/theme/tokens.css + recipes.css
   规则：纸面/墨/朱砂三色；字距永不归零；元素落在网格上（唯一旋转=印章 -2°）；
        每屏至多一处 ambient 动效；文字必须有自己的底（不裸压图片）。
   ========================================================================== */

/* 自托管子集字体：只含页面实际用字（各 ~200KB，由 pyftsubset 生成）。
   未命中的字符回退到系统楷/宋栈（--font-ui / --font-display 的后半段）。 */
@font-face {
  font-family: 'LXGW WenKai';
  src: url('fonts/lxgw-wenkai-subset.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif SC';
  src: url('fonts/noto-serif-sc-black-subset.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  --paper: #ede4cf;
  --paper-hi: #f6efdd;
  --paper-lo: #e2d6bc;
  --ink: #211d18;
  --ink-soft: #4a4139;
  --accent: #a63c2c;          /* 朱砂·信号（细线/菱点） */
  --accent-surface: #8f3426;  /* 朱砂·面（按钮底/hover） */
  --plate: rgba(30, 23, 16, 0.93);
  --plate-text: #efe7d2;
  --rod: #5a4633;
  --strip-hi: #fffcf2;
  --strip-lo: #f3ead4;

  --shadow-sticker: 0 2px 8px rgba(60, 45, 30, 0.28);
  --shadow-card: 0 4px 16px rgba(60, 45, 30, 0.22);
  --shadow-plate: 0 4px 16px rgba(0, 0, 0, 0.45);

  --font-ui: 'LXGW WenKai', 'Kaiti SC', 'KaiTi', 'STKaiti', 'Noto Serif CJK SC', serif;
  --font-display: 'Noto Serif SC', 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif;
  --font-latin: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;

  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-in: 0.5s;

  --page-max: 1120px;
  --gutter: clamp(20px, 5vw, 72px);
}

/* 世界主题色（三个世界各带自己的强调色，对应游戏 Tier 1/2 主题） */
.world-card--sanguo    { --w-accent: #9a7420; }
.world-card--wenxin    { --w-accent: #a63c2c; }
.world-card--xuanhuan  { --w-accent: #5f7ec2; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.05vw + 10px, 18px);
  line-height: 1.75;
  letter-spacing: 0.06em;      /* 正文最小字距，永不归零 */
  -webkit-font-smoothing: antialiased;
}

/* 纸纹：feTurbulence data-URI，零资源成本 */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* 跳转到主内容（键盘可达性） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--plate);
  color: var(--plate-text);
  padding: 10px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 通用母题 ---------- */

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 双线墨规：2px 墨线 + 左端 18% 朱砂短线 */
.rule {
  position: relative;
  border-bottom: 2px solid var(--ink);
  margin: 0 0 clamp(28px, 5vh, 56px);
}
.rule::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 18%;
  border-bottom: 2px solid var(--accent);
}

/* 印章（全站唯一允许旋转的元素） */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  background: var(--accent);
  color: #f3e9d8;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1em;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
  transform: rotate(-2deg);
}

/* 墨签（小梯形墨牌，用于分区标签） */
.kind-label {
  display: inline-block;
  background: var(--plate);
  color: var(--plate-text);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  padding: 4px 0.9em 4px 0.7em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 100%, 0.7em 100%);
}

/* 签牌按钮（官网 CTA：右端箭头切角 + 朱砂菱形点） */
.plate-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--plate);
  color: var(--plate-text);
  text-decoration: none;
  padding: 0.85em 2.6em 0.85em 1.5em;
  clip-path: polygon(0 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 0 100%);
  box-shadow: var(--shadow-plate);
  letter-spacing: 0.3em;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.plate-btn::before {
  content: '';
  position: absolute;
  left: 0.75em;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.2em;
  background: var(--accent);
  transform: rotate(45deg);
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease);
}
.plate-btn:hover::before, .plate-btn:focus-visible::before { opacity: 1; }
.plate-btn:hover, .plate-btn:focus-visible {
  background: var(--accent-surface);
  transform: translateX(0.35em);
  outline: none;
}
.plate-btn--primary { background: var(--ink); }
.plate-btn small {
  font-size: 0.72em;
  letter-spacing: 0.18em;
  opacity: 0.6;
}
.plate-btn[aria-disabled='true'] { cursor: default; }
.plate-btn[aria-disabled='true']:hover { background: var(--plate); transform: none; }

/* ---------- 顶栏：语言切换 ---------- */
.topbar {
  position: absolute;
  top: clamp(12px, 2.4vh, 26px);
  right: var(--gutter);
  z-index: 5;
  display: flex;
  gap: 2px;
  background: var(--plate);
  padding: 6px 10px;
  clip-path: polygon(0.6em 0, 100% 0, calc(100% - 0.6em) 100%, 0 100%);
}
.topbar a {
  color: var(--plate-text);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  padding: 2px 0.55em;
  opacity: 0.62;
  transition: opacity var(--dur-fast) var(--ease);
}
.topbar a:hover, .topbar a:focus-visible { opacity: 1; }
.topbar a[aria-current='true'] { opacity: 1; color: #f0c9a8; }

/* ---------- Hero：Key Art + 右侧纸色渐变 + 竖排题名 ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  background: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 与游戏封面同一套滤镜，统一成墨卷色调 */
  filter: sepia(0.22) saturate(0.82) brightness(0.94);
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(23, 18, 14, 0.08) 40%, var(--paper-lo) 74%, var(--paper) 100%);
}
/* 左下角暗池：给标语一块自己的底（P3：文字不裸压图片赌对比度） */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(135% 105% at 0% 100%, rgba(20, 16, 12, 0.92) 0%, rgba(20, 16, 12, 0.72) 34%, rgba(20, 16, 12, 0.32) 56%, rgba(20, 16, 12, 0) 74%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) var(--gutter);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* 竖排题名块（与游戏封面同构） */
.titleblock {
  display: flex;
  gap: 0.9em;
  align-items: flex-start;
  writing-mode: vertical-rl;
  color: var(--ink);
}
.titleblock__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 6.4vw, 84px);
  letter-spacing: 0.22em;
  line-height: 1;
  margin: 0;
}
.titleblock__sub {
  font-size: clamp(14px, 1.15vw, 19px);
  letter-spacing: 0.5em;
  color: var(--ink-soft);
  border-top: 1px solid var(--accent);
  padding-top: 0.9em;
  margin: 0;
}
.titleblock .seal { align-self: flex-start; margin-top: 0.3em; }
/* 英文版用横排 lockup：竖排会把拉丁字母整体旋转 90°（同游戏封面 en 分支） */
.titleblock--h {
  writing-mode: horizontal-tb;
  flex-direction: column;
  gap: 0.35em;
  align-items: flex-start;
}
.titleblock--h .titleblock__title { letter-spacing: 0.08em; }
.titleblock--h .titleblock__sub {
  border-top: none;
  border-left: 1px solid var(--accent);
  padding: 0 0 0 0.9em;
  letter-spacing: 0.3em;
}
/* 竖排中的拉丁缩写用縦中横，避免整体旋转 90° */
.tcy {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
}

/* Hero 文案 + CTA 压左下 */
/* 左下角「牌叠牌」：标语悬匾 + 独立 CTA 签牌（同游戏封面构图） */
.hero__foot {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(26px, 7vh, 72px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
  max-width: 32em;
}
.hero__lede {
  /* 悬匾墨牌：文字有自己的底，不赌画面明暗 */
  background: var(--plate);
  padding: 1em 1.6em 1.1em;
  box-shadow: var(--shadow-plate);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.9em) 100%, 0.9em 100%);
  width: fit-content;
  max-width: 100%;
}
.hero__tagline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(21px, 2.3vw, 31px);
  letter-spacing: 0.28em;
  margin: 0 0 0.5em;
  color: var(--plate-text);
  text-wrap: balance;
}
.hero__sub {
  margin: 0 0 1.5em;
  color: #e6dcc6;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9em; }

/* ---------- 区块骨架 ---------- */
.section { padding: clamp(48px, 9vh, 96px) 0; }
.section--paper { background: var(--paper); }
.section--tint { background: linear-gradient(180deg, var(--paper-hi), var(--paper-lo)); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1em;
  margin-bottom: 0.6em;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: 0.35em;
  margin: 0;
}
.section-note {
  color: var(--ink-soft);
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  margin: 0 0 clamp(26px, 5vh, 48px);
}

/* 引言块：标语 + 三句卖点 */
.intro__quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(21px, 2.1vw, 30px);
  letter-spacing: 0.24em;
  margin: 0 0 1em;
}
.intro__body { max-width: 46em; }
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(28px, 5vh, 48px);
  padding: 0;
  list-style: none;
}
.points li {
  background: linear-gradient(180deg, var(--strip-hi), var(--strip-lo));
  border-left: 3px solid var(--accent);
  padding: 1.1em 1.3em;
  box-shadow: var(--shadow-sticker);
  clip-path: polygon(0 0, 99% 0, 100% 26%, 98.6% 48%, 100% 72%, 99% 100%, 0 100%);
}
.points strong { display: block; letter-spacing: 0.2em; margin-bottom: 0.25em; }
.points span { color: var(--ink-soft); font-size: 0.92em; letter-spacing: 0.12em; }

/* ---------- 三个世界 ---------- */
.worlds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
}
.world-card {
  background: linear-gradient(180deg, var(--paper-hi), var(--paper));
  border: 1px solid var(--ink-soft);
  border-radius: 0.8% 1.6% 1% 2% / 1.2% 0.8% 1.6% 1%;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.world-card:hover, .world-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(60, 45, 30, 0.3);
}
.world-card__art {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.world-card__art img { width: 100%; height: 100%; object-fit: cover; }
.world-card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 29, 24, 0.05) 45%, rgba(33, 29, 24, 0.78));
}
.world-card__seal {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
}
.world-card__body {
  padding: 1.3em 1.4em 1.6em;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.world-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.28em;
  letter-spacing: 0.18em;
  margin: 0 0 0.2em;
  color: var(--ink);
}
.world-card__name::after {
  content: '';
  display: block;
  width: 2.4em;
  border-bottom: 2px solid var(--w-accent, var(--accent));
  margin-top: 0.35em;
}
.world-card__desc { color: var(--ink-soft); font-size: 0.94em; letter-spacing: 0.1em; margin: 0.6em 0 0.8em; }
.world-card__tags { display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0; margin: auto 0 0; list-style: none; }
.world-card__tags li {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  border: 1px solid rgba(74, 65, 57, 0.45);
  padding: 1px 0.7em;
}
.world-card__tags li:first-child { color: var(--w-accent, var(--accent)); border-color: currentColor; }

/* ---------- 角色与记忆 ---------- */
.cast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 26px);
  align-items: end;
}
.cast figure { margin: 0; text-align: center; }
.cast img {
  height: clamp(220px, 34vh, 380px);
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgba(60, 45, 30, 0.28));
}
.cast figcaption {
  margin-top: 0.7em;
  font-size: 0.84rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.cast__quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(19px, 1.9vw, 27px);
  letter-spacing: 0.24em;
  margin: 0 0 1.4em;
}
.cast__body { max-width: 46em; color: var(--ink-soft); }

/* ---------- 特性 ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  padding: 0;
  margin: 0;
  list-style: none;
}
.features li {
  background: var(--plate);
  color: var(--plate-text);
  padding: 1.25em 1.4em 1.35em;
  box-shadow: var(--shadow-plate);
  border-bottom: 1px solid rgba(166, 60, 44, 0.75);
}
.features h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.02em;
  letter-spacing: 0.22em;
  margin: 0 0 0.45em;
}
.features p { margin: 0; font-size: 0.88em; letter-spacing: 0.12em; opacity: 0.78; }

/* ---------- 披露 / 小字 ---------- */
.disclosure {
  border-top: 1px solid rgba(74, 65, 57, 0.35);
  margin-top: clamp(34px, 6vh, 64px);
  padding-top: 1.2em;
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  max-width: 60em;
}
.disclosure strong { letter-spacing: 0.2em; }

/* ---------- 页尾 ---------- */
.footer {
  background: var(--ink);
  color: var(--plate-text);
  padding: clamp(34px, 6vh, 64px) 0 clamp(26px, 4vh, 44px);
}
.footer__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em;
  margin-bottom: clamp(26px, 4vh, 44px);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(18px, 3vw, 40px);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
}
.footer h4 {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  opacity: 0.6;
  margin: 0 0 0.7em;
  font-weight: 400;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.4em; }
.footer a { color: var(--plate-text); text-decoration: none; opacity: 0.85; }
.footer a:hover, .footer a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer__base {
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: 1.1em;
  border-top: 1px solid rgba(239, 231, 210, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.6em;
  justify-content: space-between;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  opacity: 0.72;
}
.footer .seal { width: 2.1em; height: 2.1em; font-size: 0.9em; margin-left: 0.5em; vertical-align: middle; }

/* ---------- 印章缓摆（全站唯一 ambient 动效） ---------- */
@keyframes seal-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(-3deg); }
}
.hero .seal { animation: seal-sway 3.6s var(--ease) infinite; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .hero { min-height: auto; display: block; background: var(--paper); }
  .hero__art { position: relative; height: 46vh; min-height: 260px; inset: auto; }
  .hero__veil { display: none; }
  .hero::after { display: none; }          /* 暗池只为桌面左下文案服务 */
  .hero__inner { position: absolute; inset: 0; justify-content: flex-start; align-items: flex-start; padding-top: clamp(18px, 4vh, 34px); }
  /* 竖排在小屏改为横排 lockup，避免标题挤成一条 */
  .titleblock { writing-mode: horizontal-tb; flex-direction: column; gap: 0.4em; align-items: flex-start; }
  .titleblock__title { font-size: clamp(40px, 13vw, 64px); letter-spacing: 0.16em; }
  .titleblock__sub { border-top: none; border-left: 1px solid var(--accent); padding: 0 0 0 0.8em; letter-spacing: 0.32em; }
  .titleblock .seal { margin-top: 0.2em; }
  /* 文案区回到纸面：深色文字压在深底上会读不出来 */
  .hero__foot {
    position: static;
    max-width: none;
    gap: 1.1em;
    padding: 1.5em var(--gutter) 1.9em;
    background: var(--paper);
  }
  .hero__lede { background: none; padding: 0; box-shadow: none; clip-path: none; }
  .hero__tagline { color: var(--ink); text-shadow: none; letter-spacing: 0.22em; }
  .hero__sub { color: var(--ink-soft); text-shadow: none; }
  .hero__cta { gap: 0.7em; }
  .cast { grid-template-columns: 1fr; justify-items: center; }
  .cast img { height: clamp(200px, 30vh, 300px); }
  /* 语言条留在画面右上角（此前是 static，被挤到图下方） */
  .topbar { position: absolute; top: clamp(10px, 2vh, 20px); right: 16px; }
  /* 小字下限 12px（移动端手册 §4.3） */
  .topbar a, .plate-btn small, .world-card__tags li, .footer__base, .kind-label { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .seal { animation: none; }
  * { transition-duration: 0.01ms !important; }
}