/* ===========================================================================
   Snap Judgment — 官网样式(v3.1)

   ★底色是米色的原因(v3 起):这款游戏的截图本身就是深苔绿的。
     v1/v2 用深色底 + 深色卡片,截图贴上去整片糊在一起,没有对比也没有呼吸。
     翻成米底之后,深色截图自己会发亮,页面主角从"一堆卡片"变回**游戏本身**。
   ★v3.1 改了三处:顶栏并成一行(原来上面那条细灰事务条像没做完)、
     页脚补齐完整公司信息、全站加了克制的动效。
   ★动效一律尊重 prefers-reduced-motion:关掉动画偏好的人看到的是静态版。
   ★零外部字体 / CDN —— 游戏零网络请求,官网也不该给它加一个。
   =========================================================================== */

:root {
  --paper: #f4f1e6;
  --paper-2: #fbf9f1;
  --ink: #1a2a21;
  --ink-2: #56685b;
  --ink-3: #8b9a8d;
  --line: #ddd7c4;
  --moss: #2f5a45;
  --moss-2: #1b2a22;
  --brass: #9a7c22;
  --brass-2: #c9a63c;
  --teal: #17a2a2;
  --amber: #d98b1f;
  --indigo: #4b4aa0;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
h1, h2, h3 { color: var(--ink); letter-spacing: -.015em; }

/* ---- 顶栏:并成一行 ------------------------------------------------------
   原来是「细灰事务条 + 主栏」两行,上面那条又小又灰,像没做完。
   现在一行装下,主导航与法务链接靠**字重与字号**分层级,不靠分两排。 */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244, 241, 230, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap { display: flex; align-items: center; gap: 22px; height: 78px; }
.mark { display: flex; align-items: center; gap: 13px; color: var(--ink); font-weight: 800; letter-spacing: .09em; }
.mark b { font-size: 18px; }
/* 标志是个方形徽标(不是线性图标),所以 hover 不做旋转 —— 转起来像贴纸。
   改成轻微抬起 + 投影加深,和玩法截图的 hover 是同一种语言。 */
.mark svg {
  display: block; border-radius: 7px;
  box-shadow: 0 2px 6px rgba(26, 42, 33, .22);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
.mark:hover { text-decoration: none; }
.mark:hover svg { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(26, 42, 33, .3); }

.bar nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.bar nav a { position: relative; color: var(--ink-2); font-size: 15.5px; padding: 4px 0; }
.bar nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--brass-2); transition: right .28s ease;
}
.bar nav a:hover { color: var(--ink); text-decoration: none; }
.bar nav a:hover::after { right: 0; }

.bar .legal { display: flex; align-items: center; gap: 18px; padding-left: 24px; border-left: 1px solid var(--line); }
.bar .legal a {
  color: var(--ink-3); font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  padding: 3px 0; border-bottom: 2px solid transparent;
}
.bar .legal a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.bar .legal a.on { color: var(--brass); border-bottom-color: var(--brass-2); }

/* ---- HERO ---------------------------------------------------------------- */
.hero { padding: 92px 0 0; text-align: center; overflow: hidden; }
.hero .kicker {
  display: inline-block; margin-bottom: 26px; color: var(--brass);
  font-size: 12px; letter-spacing: .3em; font-weight: 700;
}
/* max-width 用 ch 控制断行 —— 不写死 <br>,窄屏才不会断得莫名其妙 */
.hero h1 { margin: 0 auto 26px; max-width: 13ch; font-size: 82px; line-height: 1.0; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--brass); }
.hero .lead { margin: 0 auto; max-width: 52ch; font-size: 19px; }

.hero-shots { display: flex; justify-content: center; align-items: flex-end; gap: 28px; margin-top: 62px; }
.hero-shots figure { margin: 0; }
.hero-shots img {
  display: block; width: 244px; border-radius: 26px;
  box-shadow: 0 28px 64px rgba(26, 42, 33, .26), 0 3px 10px rgba(26, 42, 33, .12);
  animation: float 7s ease-in-out infinite;
}
.hero-shots figure:nth-child(1) img { animation-delay: -1.2s; }
.hero-shots figure:nth-child(3) img { animation-delay: -3.4s; }
.hero-shots figure:nth-child(2) img { width: 302px; margin-bottom: -30px; position: relative; z-index: 2; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---- 数字带 -------------------------------------------------------------- */
.band {
  background: var(--moss); color: #e6efe6; margin-top: 92px; padding: 52px 0;
  position: relative; overflow: hidden;
}
/* 缓慢横移的斜向高光 —— 唯一一处装饰性动效,给这条深色块一点生气 */
.band::after {
  content: ""; position: absolute; inset: -50% -20%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .07) 50%, transparent 58%);
  animation: sheen 9s linear infinite;
}
@keyframes sheen { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
.band .wrap { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; position: relative; z-index: 1; }
.band .n { flex: 1 1 170px; }
.band b { display: block; font-size: 46px; line-height: 1.05; color: #f6f2df; font-weight: 800; letter-spacing: -.02em; }
.band span { display: block; margin-top: 4px; font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; color: #a9c0ac; }

/* ---- 玩法:大图左右交替 -------------------------------------------------- */
.mode { padding: 92px 0; border-bottom: 1px solid var(--line); }
.mode .wrap { display: grid; grid-template-columns: 1fr 300px; gap: 78px; align-items: center; }
.mode.flip .wrap { grid-template-columns: 300px 1fr; }
.mode.flip .copy { order: 2; }
.mode.flip .pic { order: 1; }
.mode img {
  display: block; width: 100%; border-radius: 24px;
  box-shadow: 0 20px 46px rgba(26, 42, 33, .2), 0 2px 8px rgba(26, 42, 33, .1);
  transition: transform .45s cubic-bezier(.2, .8, .3, 1), box-shadow .45s ease;
}
.mode .pic:hover img { transform: translateY(-10px) scale(1.015); box-shadow: 0 34px 70px rgba(26, 42, 33, .3); }
.mode .no { font-size: 12px; letter-spacing: .22em; font-weight: 700; text-transform: uppercase; }
.mode h2 { margin: 8px 0 16px; font-size: 42px; line-height: 1.08; }
.mode p { margin: 0 0 14px; }
.mode p:last-child { margin-bottom: 0; }
.mode.m1 .no { color: var(--brass); }
.mode.m2 .no { color: var(--teal); }
.mode.m3 .no { color: var(--amber); }
.mode.m4 .no { color: var(--indigo); }

/* 弧度条:进入视口时从 0 长出来 */
.arc { display: flex; height: 14px; border-radius: 8px; overflow: hidden; margin: 24px 0 12px; background: #e7e2d1; }
.arc i { display: block; height: 100%; width: 0; transition: width 1.1s cubic-bezier(.2, .8, .25, 1); }
.arc.in i { width: var(--w); }
.arc-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--ink-3); }
.arc-key span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.arc-key i { display: block; width: 10px; height: 10px; border-radius: 3px; }

/* ---- 「不做什么」-------------------------------------------------------- */
.plain { padding: 92px 0; }
.plain h2 { font-size: 42px; margin: 0 0 8px; }
.plain .sub { margin: 0 0 42px; color: var(--ink-3); max-width: 58ch; }
.nots { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 56px; }
.nots li { break-inside: avoid; padding: 0 0 24px; }
.nots b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }
.nots span { color: var(--ink-3); font-size: 15px; }

/* ---- 进场动效:滚到才淡入上浮 -------------------------------------------- */
.rise { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .25, 1); }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .08s; }
.rise.d2 { transition-delay: .16s; }

/* ---- 正文页 -------------------------------------------------------------- */
.doc { padding: 64px 0 92px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: 46px; margin: 0 0 10px; }
.doc .updated { color: var(--ink-3); font-size: 14px; margin: 0 0 36px; }
.doc h2 { font-size: 14px; color: var(--brass); margin: 42px 0 10px; letter-spacing: .16em; text-transform: uppercase; }
.doc ul { padding-left: 22px; }
.doc li { margin: 8px 0; }
.doc .box {
  background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--brass-2);
  border-radius: 14px; padding: 22px 24px; margin: 26px 0;
}
.doc .box b { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 20px 0; }
.doc table th, .doc table td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); }
.doc table th { color: var(--brass); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }

/* ---- 页脚:补齐完整公司信息 -------------------------------------------- */
footer { background: var(--moss-2); color: #9fb3a3; padding: 56px 0 58px; font-size: 14.5px; }
footer a { color: #d9e5d9; }
footer .cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 34px; }
footer .col b { display: block; color: #f0f6ef; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
footer .col p { margin: 0; line-height: 1.75; }
footer .col nav { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
footer .brand svg { border-radius: 6px; }
footer .brand { display: flex; align-items: center; gap: 11px; color: #f0f6ef; font-weight: 800; letter-spacing: .09em; margin-bottom: 12px; }
footer .brand b { font-size: 15px; margin: 0; letter-spacing: .09em; text-transform: none; color: #f0f6ef; }
footer .legal {
  border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; margin-top: 38px;
  color: #7f9384; font-size: 13.5px;
}

/* ---- 窄屏 ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .bar .wrap { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 12px; }
  .bar nav { margin-left: 0; width: 100%; gap: 18px; flex-wrap: wrap; }
  .bar .legal { padding-left: 0; border-left: 0; gap: 14px; }
  .hero { padding-top: 52px; }
  .hero h1 { font-size: 42px; max-width: 16ch; }
  .hero-shots { gap: 14px; margin-top: 42px; }
  .hero-shots img { width: 148px; }
  .hero-shots figure:nth-child(2) img { width: 180px; margin-bottom: -16px; }
  .band { margin-top: 62px; padding: 36px 0; }
  .band b { font-size: 34px; }
  .mode { padding: 56px 0; }
  .mode .wrap, .mode.flip .wrap { grid-template-columns: 1fr; gap: 34px; }
  .mode.flip .copy, .mode.flip .pic { order: initial; }
  .mode .pic { max-width: 240px; }
  .mode h2 { font-size: 30px; }
  .plain { padding: 56px 0; }
  .plain h2 { font-size: 30px; }
  .nots { columns: 1; }
  footer .cols { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- 关掉动画偏好:一律静态 -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
  .arc i { width: var(--w); }
}