/* ==========================================================
   墨迹 · INK TRACE
   零依赖 / 无外部素材 / Canvas 2D 生成式
   ========================================================== */

/* ---- reset ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
dl,dd{margin:0}

/* ---- tokens --------------------------------------------- */
:root{
  --ink:        #0a0908;
  --ink-2:      #12100e;
  --paper:      #f2efe9;
  --paper-dim:  #8c877e;
  --line:       rgba(242,239,233,.12);
  --line-soft:  rgba(242,239,233,.06);
  --seal:       #c8402f;

  --ease-ink: cubic-bezier(.16,1,.3,1);
  --ease-std: cubic-bezier(.4,0,.2,1);
  --t-fast: .2s;
  --t-base: .6s;
  --t-slow: 1.2s;

  --f-cn:  "Songti SC","STSong","SimSun","Source Han Serif SC","Noto Serif SC",serif;
  --f-en:  "Helvetica Neue","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  --f-mono: ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  --t-hero:  clamp(40px, 8.4vw, 132px);
  --t-title: clamp(40px, 7vw, 116px);
  --t-claim: clamp(26px, 4.4vw, 68px);
  --t-body:  clamp(15px, 1.05vw, 18px);

  --pad: clamp(20px, 4.5vw, 72px);
  --z-grain: 90; --z-cursor: 120; --z-loader: 200;
}

html{background:var(--ink);scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-en);
  font-size:var(--t-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--seal);color:var(--paper)}

.micro{
  font-family:var(--f-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-dim);
}

:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px}

/* ---- grain + vignette ----------------------------------- */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:var(--z-grain);pointer-events:none;
  opacity:.14;mix-blend-mode:overlay;
}
.vignette{
  position:fixed;inset:0;z-index:calc(var(--z-grain) - 1);pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(0,0,0,.55) 100%);
}

/* ---- custom cursor -------------------------------------- */
.cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;opacity:0}
html.cursor-on .cursor{opacity:1}
html.cursor-on,html.cursor-on a,html.cursor-on button{cursor:none}
.cursor__dot{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--paper);transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(242,239,233,.45);
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  transition:width var(--t-fast) var(--ease-std),height var(--t-fast) var(--ease-std),
             background-color var(--t-fast) var(--ease-std),border-color var(--t-fast) var(--ease-std);
}
.cursor.is-active .cursor__ring{width:74px;height:74px;background:var(--seal);border-color:var(--seal)}
.cursor.is-active .cursor__dot{opacity:0}
.cursor__label{
  font-family:var(--f-cn);font-size:15px;color:var(--paper);
  opacity:0;transition:opacity var(--t-fast) var(--ease-std);
}
.cursor.is-active .cursor__label{opacity:1}

/* ---- loader --------------------------------------------- */
.loader{
  position:fixed;inset:0;z-index:var(--z-loader);background:var(--ink);
  display:grid;place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--t-slow) var(--ease-ink);
}
.loader.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
html:not(.js) .loader{display:none}
.loader__inner{width:min(420px,72vw);text-align:left}
.loader__num{font-family:var(--f-mono);font-size:clamp(48px,9vw,104px);line-height:1;letter-spacing:-.03em}
.loader__bar{margin-top:20px;height:1px;background:var(--line);overflow:hidden}
.loader__bar > i{display:block;height:100%;width:0;background:var(--seal)}
.loader__cap{margin-top:14px}

/* ---- progress rail -------------------------------------- */
.rail{
  position:fixed;right:clamp(14px,2.2vw,30px);top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.rail__track{display:block;width:1px;height:min(34vh,260px);background:var(--line);position:relative}
.rail__fill{position:absolute;inset:0 auto auto 0;width:100%;height:0;background:var(--seal)}
.rail__num{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--paper-dim)}
.rail__num--end{color:rgba(242,239,233,.25)}

/* ---- topbar --------------------------------------------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,28px) var(--pad);
  mix-blend-mode:difference;
}
.topbar__brand{display:flex;align-items:baseline;gap:10px}
.topbar__brand b{font-family:var(--f-cn);font-size:20px;font-weight:400;line-height:1}
.topbar__nav{display:flex;gap:clamp(12px,1.6vw,22px)}
.topbar__nav a{
  font-family:var(--f-cn);font-size:14px;letter-spacing:.1em;
  color:var(--paper-dim);transition:color var(--t-fast) var(--ease-std);
}
.topbar__nav a:hover{color:var(--paper)}

/* ======== ACT 1 · 起 ===================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:0 var(--pad)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5}
.hero__inner{position:relative;z-index:1;width:100%;max-width:1400px;margin:0 auto}
.hero__eyebrow{margin-bottom:clamp(18px,3vw,38px)}
.hero__title{font-weight:400;line-height:.82}
.hero__cn{
  display:inline-block;font-family:var(--f-cn);font-size:var(--t-hero);
  letter-spacing:-.02em;
}
.hero__en{
  font-family:var(--f-en);font-weight:500;
  font-size:clamp(18px,2.5vw,40px);letter-spacing:.42em;
  margin-top:clamp(6px,1vw,14px);color:var(--paper);
}
.hero__sub{
  margin-top:clamp(22px,3.4vw,44px);max-width:34ch;
  font-family:var(--f-cn);font-size:clamp(16px,1.5vw,22px);
  letter-spacing:.06em;color:var(--paper-dim);
}
.hero__cta{margin-top:clamp(28px,4vw,52px);display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.hero__cta .btn{margin-top:0}
.hero__hintnote{color:var(--paper-dim)}

.hero__hint{
  position:absolute;right:var(--pad);bottom:clamp(24px,4vw,52px);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1;
}
.hero__hintline{display:block;width:1px;height:56px;background:var(--line);position:relative;overflow:hidden}
.hero__hintline::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--paper);
  animation:hintrun 2.4s var(--ease-std) infinite;
}
@keyframes hintrun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}

/* ======== 内容版块 ======================================= */
.band{position:relative;padding:clamp(80px,13vh,168px) var(--pad);overflow:hidden}
.band--plain{background:var(--ink-2)}
.band__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.34;pointer-events:none}
.band__inner{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.band__title{
  font-family:var(--f-cn);font-weight:400;
  font-size:clamp(26px,4.2vw,60px);line-height:1.3;letter-spacing:.01em;
  margin:clamp(16px,2.4vw,30px) 0 clamp(20px,3vw,36px);
}
.band__lead{font-family:var(--f-cn);font-size:clamp(16px,1.5vw,21px);letter-spacing:.04em;max-width:44ch}
.band__foot{margin-top:clamp(32px,5vw,60px)}

.notice{
  margin-top:clamp(24px,3.4vw,42px);max-width:60ch;
  border-left:2px solid var(--seal);padding:2px 0 2px 16px;
  font-family:var(--f-cn);font-size:clamp(13px,1.05vw,15px);line-height:1.9;
  color:var(--paper-dim);letter-spacing:.03em;
}

/* 玩法列表 */
.rules{list-style:none;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.rule{display:flex;gap:clamp(14px,2vw,28px);align-items:baseline;background:var(--ink-2);padding:clamp(16px,2vw,24px) 2px}
.band--plain .rule{background:var(--ink)}
.rule__n{flex:0 0 auto;color:var(--seal)}
.rule p{font-family:var(--f-cn);font-size:clamp(14px,1.2vw,18px);letter-spacing:.03em;line-height:1.75;max-width:52ch}

/* 做工清单 */
.checks{list-style:none;margin-top:clamp(32px,5vw,60px);display:grid;gap:14px}
.checks li{
  font-family:var(--f-cn);font-size:clamp(14px,1.1vw,17px);line-height:1.8;
  color:var(--paper-dim);letter-spacing:.03em;padding-left:18px;position:relative;max-width:62ch;
}
.checks li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--seal)}
.checks b{color:var(--paper);font-weight:400;margin-right:10px}

/* ======== 数据 ========================================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(20px,3vw,48px)}
.stat{border-top:1px solid var(--line);padding-top:14px}
.stat__v{font-family:var(--f-mono);font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.04em;margin-top:8px;font-variant-numeric:tabular-nums}
.stat__v--seal{color:var(--seal)}

/* ======== ACT 4 · 合 ===================================== */
.end{position:relative;border-top:1px solid var(--line);padding-bottom:clamp(20px,3vw,36px)}
.marquee{overflow:hidden;border-bottom:1px solid var(--line);padding:14px 0}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__track span{
  font-family:var(--f-cn);font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.16em;color:var(--paper-dim);padding:0 24px;white-space:nowrap;
}
.marquee__track span b{color:var(--seal);font-weight:400}

.end__inner{padding:clamp(80px,14vh,180px) var(--pad);max-width:1400px;margin:0 auto;text-align:center}
.end__title{
  display:inline-block;font-family:var(--f-cn);font-weight:400;
  font-size:clamp(72px,13vw,200px);line-height:1;letter-spacing:-.02em;margin:clamp(16px,2vw,28px) 0;
}
.end__sub{font-family:var(--f-cn);color:var(--paper-dim);letter-spacing:.06em;line-height:1.9}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(32px,5vw,64px);
  padding:16px 40px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--f-cn);font-size:15px;letter-spacing:.14em;
  overflow:hidden;isolation:isolate;
  transition:border-color var(--t-base) var(--ease-std),color var(--t-base) var(--ease-std);
  will-change:transform;
}
.btn--primary{border-color:var(--seal);color:var(--paper)}
.btn--primary::before{transform:none}
.btn--primary:hover::before{transform:translateY(-101%)}
.btn--primary:hover{color:var(--paper)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--seal);
  transform:translateY(101%);transition:transform var(--t-base) var(--ease-ink);
}
.btn:hover{border-color:var(--seal)}
.btn:hover::before{transform:none}
.btn__t{display:block;will-change:transform}

.end__meta{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px var(--pad) 0;border-top:1px solid var(--line-soft);
}
.end__clock{font-variant-numeric:tabular-nums;letter-spacing:.2em}

.stage{
  position:fixed;inset:0;z-index:150;background:var(--ink);
  display:flex;flex-direction:column;
}
.stage[hidden]{display:none}
.stage__bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(12px,2vw,24px);border-bottom:1px solid var(--line);
}
.stage__acts{display:flex;gap:8px}
.stage__btn{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:none;
  color:var(--paper-dim);cursor:pointer;
  transition:color var(--t-fast) var(--ease-std),border-color var(--t-fast) var(--ease-std);
}
.stage__btn:hover{color:var(--paper);border-color:var(--seal)}
.stage__frame{
  flex:1;min-height:0;position:relative;
  padding:clamp(8px,1.6vh,20px);
}
/* 游戏是竖屏：桌面端给一个手机比例的框，两侧留墨黑底。
   用绝对定位而非 grid 居中 —— 居中项上的 height:100% 解析不可靠，
   实测会退化成「撑满宽度再按比例算高」，把 iframe 变成 1257x2235。 */
.stage__frame iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:block;border:0;background:#000;
  height:100%;width:auto;aspect-ratio:9/16;
  max-width:100%;max-height:100%;
  border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.55);
}
@media (max-width:900px){
  .stage__frame{padding:0}
  .stage__frame iframe{
    position:absolute;inset:0;transform:none;
    width:100%;height:100%;aspect-ratio:auto;max-width:none;max-height:none;
    border-radius:0;box-shadow:none;
  }
}
html.stage-open{overflow:hidden}

/* ======== reveal states (JS 增强，无 JS 时全部可见) ====== */
.js [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--t-base) var(--ease-std),transform var(--t-base) var(--ease-ink);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}

.js [data-split] .ch{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:inherit}
.js [data-split] .ch > i{
  display:inline-block;font-style:normal;transform:translateY(110%);
  transition:transform var(--t-slow) var(--ease-ink);transition-delay:var(--d,0ms);
}
.js [data-split].is-in .ch > i{transform:none}

/* ======== responsive ==================================== */
@media (max-width:900px){
  .rail{display:none}
  .hero__hint{display:none}
  .band__canvas{opacity:.22}
  .rule{flex-direction:column;gap:6px}
  .end__meta{flex-direction:column}
}
@media (max-width:560px){
  .topbar__nav{gap:14px}
  .hero__en{letter-spacing:.3em}
}

/* ======== reduced motion ================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .js [data-split] .ch > i{transform:none !important}
  .loader{display:none}
  .grain{opacity:.08}
}