/* ============================================================================
   ENDLESS Legend 2 Guide — base stylesheet
   tokens: 02-design/20260918-endless-legend-2/tokens_ENDLESSLegend2.css (inlined
           verbatim in the token block below; single dark theme, the approved
           one — see 视觉系统_ENDLESSLegend2.md §2)
   layout: the approved design preview (02-design/20260918-endless-legend-2/
           preview/style.css, 视觉系统 v1 / database-wiki + Tidefall 潮位线),
           extended with the components the 24 real routes need: page head,
           breadcrumbs, verdict note, spec grid, related links, footer blocks.
   No web fonts, no bitmaps, no third-party requests.
   ========================================================================== */

/* ============================ token block ================================= */
:root {
  /* --- 背景层（按深度递进，对应游戏里退潮露出的海床分层） --- */
  --bg-abyss: #06131a;         /* 页面最底：Tidefall 之后的深海 */
  --bg-deep: #0b1f29;          /* 页面主背景 */
  --surface-card: #102b36;     /* 卡片 / 表格容器 */
  --surface-raised: #16394a;   /* 抬升块：结论条、粘性表头 */
  --surface-sunken: #081821;   /* 下沉块：来源清单、代码/数值区 */
  --surface-page: #0b1f29;     /* 与 --bg-deep 同值，供脚本配对识别 */

  /* --- 文字 --- */
  --ink-primary: #eaf4f7;      /* 正文与标题 */
  --ink-secondary: #b9cfd8;    /* 次级说明 */
  --ink-muted: #8fa9b4;        /* 元信息、脚注、来源行 */
  --ink-inverse: #06131a;      /* 亮色块上的文字（按钮、徽标） */

  /* --- 品牌与语义 --- */
  --brand: #35c2b0;            /* 品牌色：浅海青（仅用于图形、描边、图标，不用于正文） */
  --brand-text: #5fd9c8;       /* 品牌色文字变体：链接、可点击数字 */
  --accent: #f2a03d;           /* 主行动（琥珀）：主 CTA、当前版本徽标 */
  --border-hairline: #1d3f4e;  /* 分隔线（纯装饰，不套 3:1 门槛） */
  --border-strong: #5590a3;    /* 控件边界、输入框、可点击表格行（在 raised 底上也要 ≥3:1） */

  /* --- 证据分级（本站签名语义色，四种等级各一色） --- */
  --state-official: #6fd3a8;   /* Official：厂商 / 平台一手 */
  --state-media: #7fb4e8;      /* Media：具名媒体实测 */
  --state-community: #e3c86a;  /* Community：社区报告，未交叉验证 */
  --state-stale: #ff8a7a;      /* 已失效：EA 期旧数值、过期促销 */
  --state-unconfirmed: #a9bcc4; /* Unconfirmed：官方未公告 */

  /* --- 排版 --- */
  --font-display: "Avenir Next Condensed", "Futura Condensed Medium", "Haettenschweiler", "Impact", system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step-display: clamp(2.9rem, 7vw, 5.4rem);   /* 首页展示标题 */
  --step-h1: clamp(2rem, 4vw, 2.9rem);          /* 内页 H1 */
  --step-h2: 1.45rem;
  --step-h3: 1.12rem;
  --step-body: 1.0625rem;
  --step-small: 0.875rem;
  --step-micro: 0.75rem;

  /* --- 间距 / 尺寸 --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;
  --space-8: 5rem;

  --measure: 68ch;             /* 正文行宽 */
  --width-content: 78rem;      /* 内容最大宽度 */
  --width-wide: 92rem;         /* 表格可以更宽 */
  --radius-card: 4px;          /* 克制圆角，贴近 ENDLESS 系列 UI 的直角气质 */
  --radius-pill: 999px;
  --row-min: 44px;             /* 表格行最小高度（移动端手指可达） */
}
/* ========================== end token block =============================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.62;
}

a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--accent); color: var(--ink-inverse); padding: var(--space-2) var(--space-4);
}
.skip:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--width-content)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2.5rem, var(--width-wide)); margin-inline: auto; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-abyss) 92%, transparent);
  border-bottom: 1px solid var(--border-hairline);
  backdrop-filter: blur(6px);
}
.nav__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 60px; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.95rem; color: var(--ink-primary); }
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.nav__links { display: flex; gap: var(--space-5); margin-left: auto; font-size: var(--step-small); flex-wrap: wrap; }
.nav__links a { color: var(--ink-secondary); }
.nav__links a[aria-current="page"] { color: var(--ink-primary); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ---------- 首屏 ---------- */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(120% 90% at 12% -10%, #123a48 0%, rgba(6,19,26,0) 62%),
  linear-gradient(180deg, var(--bg-abyss) 0%, var(--bg-deep) 78%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; padding: var(--space-7) 0 var(--space-6); }
.eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--step-small); color: var(--brand-text); margin: 0 0 var(--space-4); }
.hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-display); line-height: 0.94; letter-spacing: 0.005em;
  margin: 0 0 var(--space-4); color: var(--ink-primary);
}
.hero h1 .thin { display: block; font-size: 0.42em; letter-spacing: 0.3em; color: var(--ink-secondary); font-weight: 500; }
.hero__lede { font-size: 1.16rem; color: var(--ink-secondary); max-width: 46ch; margin: 0 0 var(--space-5); text-wrap: pretty; }

/* 版本戳 */
.stamp {
  font-family: var(--font-mono); font-size: var(--step-micro); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-muted); margin: 0 0 var(--space-4);
}

/* hero 数据条 */
.hero__specs {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0; color: var(--ink-secondary); font-size: var(--step-small);
}
.hero__specs span { padding-left: var(--space-4); border-left: 1px solid var(--border-hairline); }
.hero__specs span:first-child { padding-left: 0; border-left: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 46px; padding: 0 var(--space-5);
  border-radius: var(--radius-card); font-weight: 600; font-size: 0.98rem; border: 1px solid transparent; }
.btn--primary { background: var(--accent); color: var(--ink-inverse); }
.btn--primary:hover { text-decoration: none; filter: brightness(1.07); }
.btn--ghost { border-color: var(--border-strong); color: var(--ink-primary); }
.btn--ghost:hover { text-decoration: none; background: var(--surface-card); }

/* 首屏状态卡 */
.status { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); }
.status__line { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--step-small); }
.status__line:last-child { border-bottom: 0; }
.status__k { color: var(--ink-muted); }
.status__v { color: var(--ink-primary); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tidefall 潮位线（本站签名图形） ---------- */
.tide { position: relative; height: 78px; margin-top: var(--space-4); }
.tide svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tide__label {
  position: absolute; left: 0; top: 2px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: var(--step-micro); color: var(--ink-muted);
  background: linear-gradient(90deg, var(--bg-deep) 72%, rgba(11,31,41,0));
  padding: 0 var(--space-4) 0 0;
}

/* ---------- 区块节奏 ---------- */
.section { padding: var(--space-7) 0; border-top: 1px solid var(--border-hairline); scroll-margin-top: 74px; }
.section--sunken { background: var(--surface-sunken); }
.section__head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.section h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step-h2); margin: 0; font-weight: 700; }
.section__note { color: var(--ink-muted); font-size: var(--step-small); margin: 0; }
.section p { max-width: var(--measure); }
.section ul, .section ol { max-width: var(--measure); padding-left: 1.3em; }
.section li { margin: var(--space-2) 0; color: var(--ink-secondary); }
.section li strong { color: var(--ink-primary); }
.section li a { white-space: nowrap; }

/* 三条入口：不等重，第一条是当前位置的主线 */
.routes { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-4); }
.route { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-5); }
.route--lead { border-left-color: var(--accent); background: var(--surface-raised); }
.route h3 { margin: 0 0 var(--space-2); font-size: var(--step-h3); }
.route p { margin: 0 0 var(--space-3); color: var(--ink-secondary); font-size: 0.96rem; }
.route .more { font-size: var(--step-small); margin: 0; }

/* ---------- 证据分级徽标（签名组件 1） ---------- */
.ev { display: inline-flex; align-items: center; gap: 5px; font-size: var(--step-micro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px 2px 6px;
  border: 1px solid currentColor; border-radius: var(--radius-pill); white-space: nowrap; }
.ev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ev--official { color: var(--state-official); }
.ev--media { color: var(--state-media); }
.ev--community { color: var(--state-community); }
.ev--stale { color: var(--state-stale); }
.ev--unconfirmed { color: var(--state-unconfirmed); }

/* ---------- 可扫描表格（签名组件 2） ---------- */
.tablewrap { position: relative; overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--surface-card); }
table.dense { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.95rem; }
table.dense caption { text-align: left; padding: var(--space-3) var(--space-4); color: var(--ink-muted); font-size: var(--step-small); }
table.dense thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-raised);
  text-align: left; font-weight: 600; font-size: var(--step-small); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-secondary);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
table.dense td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-hairline); vertical-align: top; min-height: var(--row-min); }
table.dense tbody tr:hover { background: color-mix(in srgb, var(--surface-raised) 60%, transparent); }
table.dense td.name { font-weight: 600; }
table.dense th:first-child, table.dense td:first-child { position: sticky; left: 0; background: var(--surface-card); z-index: 1; }
table.dense thead th:first-child { z-index: 3; background: var(--surface-raised); }
.swipe { display: none; }

/* 已失效值：EA 期旧数据 */
.stale { color: var(--state-stale); text-decoration: line-through; text-decoration-thickness: 1px; }
.is-stale td { background: color-mix(in srgb, var(--state-stale) 7%, transparent); }
.is-stale td.name { background: color-mix(in srgb, var(--state-stale) 12%, var(--surface-card)); }
.stale-note { display: block; margin-top: 4px; color: var(--ink-muted); font-size: var(--step-micro); }

/* ---------- 来源对账账本（签名组件 3） ---------- */
.ledger { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); overflow: hidden; max-width: none; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); padding: var(--space-4); background: var(--surface-sunken); border-bottom: 1px solid var(--border-hairline); align-items: start; margin: 0; color: var(--ink-secondary); }
.section--sunken .ledger li { background: var(--surface-card); }
.ledger li > .ev { margin-top: 4px; }
.ledger li:last-child { border-bottom: 0; }
.ledger b { font-weight: 600; color: var(--ink-primary); }
.ledger .meta { grid-column: 1 / -1; color: var(--ink-muted); font-size: var(--step-small); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.ledger cite { font-style: normal; color: var(--ink-secondary); }

/* 结论条：一级权重断言 */
.verdict { background: var(--surface-raised); border: 1px solid var(--border-strong); border-left: 4px solid var(--accent);
  border-radius: var(--radius-card); padding: var(--space-5); }
.verdict h2 { font-size: var(--step-h2); margin: 0 0 var(--space-3); }
.verdict p { margin: 0; color: var(--ink-primary); max-width: none; }
.verdict p + p { margin-top: var(--space-3); color: var(--ink-secondary); font-size: 0.96rem; }
.verdict ul, .verdict ol { max-width: none; color: var(--ink-secondary); }
.verdict .cta-row { margin-top: var(--space-5); }
.verdict__note { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--step-micro); color: var(--ink-muted) !important; margin: 0 0 var(--space-3) !important; }
.verdict .tablewrap { margin-top: var(--space-4); }

/* 待核实提示：不是装饰，是内容状态 */
.pending { border: 1px dashed var(--state-unconfirmed); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--state-unconfirmed) 8%, var(--surface-sunken)); color: var(--ink-secondary); max-width: none; margin-top: var(--space-5); }

/* 关键规格网格（首页 aboutGame） */
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1px;
  background: var(--border-hairline); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); margin-top: var(--space-5); overflow: hidden; }
.spec { background: var(--surface-card); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.spec__k { color: var(--ink-muted); font-size: var(--step-micro); text-transform: uppercase; letter-spacing: 0.1em; }
.spec__v { font-variant-numeric: tabular-nums; }
.spec__asof { color: var(--ink-muted); font-size: var(--step-micro); }

/* ---------- 内页页头 ---------- */
.crumbs { font-size: var(--step-small); color: var(--ink-muted); padding: var(--space-5) 0 0; margin: 0; }
.crumbs a { color: var(--ink-muted); }
.pagehead { padding: var(--space-4) 0 var(--space-5); border-bottom: 1px solid var(--border-hairline); }
.vstamprow { margin: 0 0 var(--space-3); }
.vstamp { font-family: var(--font-mono); font-size: var(--step-micro); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-pill); padding: 2px 10px; }
.pagehead h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--step-h1); margin: 0 0 var(--space-3); line-height: 1.02; text-wrap: balance; }
.byline { color: var(--ink-muted); font-size: var(--step-small); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
.byline span { display: inline-flex; align-items: center; }
.hero .byline { margin-top: var(--space-5); }

/* 相关页面 */
.related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: none; }
.related li { margin: 0; }
.related a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-card); color: var(--ink-primary); font-size: var(--step-small); }
.related a:hover { background: var(--surface-card); text-decoration: none; }

/* ---------- 页脚 ---------- */
footer.site { border-top: 1px solid var(--border-hairline); background: var(--bg-abyss); padding: var(--space-6) 0; color: var(--ink-muted); font-size: var(--step-small); }
footer.site .cols { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; }
footer.site a { color: var(--ink-secondary); }
footer.site .footer__about { max-width: 58ch; }
footer.site .footer__stamp { margin: var(--space-3) 0 0; }
footer.site .footer__official { margin: var(--space-3) 0 0; }
footer.site nav { max-width: 34ch; }

/* ---------- 移动端 ---------- */
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  .routes { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .wrap, .wrap--wide { width: min(100% - 1.75rem, var(--width-wide)); }
  .nav__inner { gap: var(--space-3); }
  .brand { white-space: nowrap; font-size: 0.76rem; letter-spacing: 0.1em; }
  .brand svg { width: 18px; height: 18px; }
  .nav__links { flex-wrap: nowrap; overflow-x: auto; gap: var(--space-4); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; font-size: var(--step-small); }
  .hero__grid { padding: var(--space-5) 0 var(--space-4); }
  .hero h1 { font-size: clamp(1.95rem, 10.5vw, 2.6rem); text-wrap: balance; }
  .hero h1 .thin { font-size: 0.34em; letter-spacing: 0.15em; }
  .hero__lede { font-size: 1rem; }
  .stamp { font-size: 0.7rem; letter-spacing: 0.04em; }
  .hero__specs { gap: var(--space-1) var(--space-3); }
  .hero__specs span { padding-left: var(--space-3); }
  .btn { flex: 1 1 auto; justify-content: center; }
  .tide { height: 54px; }
  .ledger li { grid-template-columns: 1fr; }
  .section { padding: var(--space-6) 0; }
  .section h2 { font-size: 1.25rem; }
  .pagehead h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  /* 表格保持横向滚动，不改卡片流：列对齐是这类页的全部价值 */
  table.dense { min-width: 640px; font-size: 0.9rem; }
  table.dense caption { max-width: calc(100vw - 4rem); text-wrap: pretty; }
  table.dense td, table.dense thead th { padding: var(--space-3); }
  .swipe { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted);
    font-size: var(--step-micro); text-transform: uppercase; letter-spacing: 0.12em; padding: var(--space-2) var(--space-1) 0; }
  .tablewrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; pointer-events: none;
    background: linear-gradient(90deg, rgba(16,43,54,0), var(--surface-card)); }
  .specs { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  footer.site .cols { flex-direction: column; }
  footer.site nav { max-width: none; }
}