:root {
  --gold: #f5c76b;
  --gold-deep: #c8902e;
  --ink: #3b2412;
  --paper: #fbf1dc;
  --red: #c8282d;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --song: "Songti SC", "STSong", "SimSun", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #fff;
  background: radial-gradient(ellipse at 50% 120%, #ff9a5a 0%, #b4407a 28%, #3a1e6b 58%, #0c0b2b 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

#stars, #confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#stars { z-index: 0; }
#confetti { z-index: 50; }

.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  z-index: 0;
  animation: drift 14s ease-in-out infinite alternate;
}
.glow-a { width: 420px; height: 420px; background: #ff6fb1; top: -120px; left: -100px; }
.glow-b { width: 480px; height: 480px; background: #ffc35a; bottom: -180px; right: -120px; animation-delay: -7s; }

@keyframes drift {
  to { transform: translate(60px, 40px) scale(1.15); }
}

/* ---------- 屏幕切换 ---------- */
.screen {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.screen.active { display: flex; animation: fadeIn .8s ease both; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 开场 ---------- */
#intro { flex-direction: column; text-align: center; gap: 22px; }

.intro-badge {
  font-size: 14px;
  letter-spacing: 6px;
  color: var(--gold);
  padding: 8px 20px;
  border: 1px solid rgba(245, 199, 107, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
}

.intro-title {
  font-family: var(--kai);
  font-size: clamp(64px, 14vw, 140px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.1;
}
.intro-title span {
  display: inline-block;
  background: linear-gradient(180deg, #fff6d8 0%, #ffd27a 45%, #e59a2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 196, 90, .55));
  animation: rise 1s cubic-bezier(.2, .9, .3, 1.3) both;
}
.intro-title span:nth-child(2) { animation-delay: .15s; }
.intro-title span:nth-child(3) { animation-delay: .3s; }
.intro-title span:nth-child(4) { animation-delay: .45s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(40px) scale(.6); }
  to { opacity: 1; transform: none; }
}

.intro-sub {
  font-family: var(--kai);
  font-size: clamp(18px, 3vw, 24px);
  color: #ffe9c4;
  letter-spacing: 4px;
}
.intro-hint { font-size: 13px; color: rgba(255, 255, 255, .55); letter-spacing: 2px; }

/* ---------- 按钮 ---------- */
.btn {
  position: relative;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 4px;
  padding: 16px 44px;
  border-radius: 999px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  font-family: inherit;
}
.btn span { position: relative; z-index: 1; }
.btn-gold {
  color: #4a2a05;
  background: linear-gradient(135deg, #fff1c1, #f5c76b 40%, #e09a32);
  box-shadow: 0 10px 30px rgba(245, 170, 60, .45), inset 0 2px 0 rgba(255, 255, 255, .7);
}
.btn-gold::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-20deg);
  animation: shine 2.8s infinite;
}
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

.btn-ghost {
  color: #ffe9c4;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 233, 196, .5);
}
.btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.03); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.btn:disabled::after { display: none; }

/* ---------- 契约页 ---------- */
#contract { gap: 48px; flex-wrap: wrap; align-items: center; }

.scroll-wrap {
  width: min(560px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45));
}

.scroll-rod {
  width: 108%;
  height: 26px;
  border-radius: 13px;
  background: linear-gradient(180deg, #8a4b1d, #e3a35a 35%, #6b3510 100%);
  position: relative;
  z-index: 3;
}
.scroll-rod::before, .scroll-rod::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 22px; height: 36px;
  border-radius: 8px;
  background: radial-gradient(circle at 40% 30%, #ffe08a, #c8902e 60%, #7a4a12);
}
.scroll-rod::before { left: -10px; }
.scroll-rod::after { right: -10px; }

.paper {
  position: relative;
  width: 100%;
  color: var(--ink);
  padding: 44px 46px 40px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .7), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(200, 140, 60, .18), transparent 45%),
    linear-gradient(180deg, #fdf6e6, var(--paper) 50%, #f3e1bb);
  border-left: 1px solid #e3c890;
  border-right: 1px solid #e3c890;
  transform-origin: top;
  overflow: clip;
}
#contract.active .paper { animation: unroll 1.2s cubic-bezier(.3, .8, .3, 1) both; }

@keyframes unroll {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

.paper::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid var(--gold-deep);
  outline: 1px solid rgba(200, 144, 46, .5);
  outline-offset: 5px;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 36px; height: 36px;
  border: 3px solid var(--gold-deep);
  z-index: 1;
}
.corner.tl { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.corner.tr { top: 22px; right: 22px; border-left: none; border-bottom: none; }
.corner.bl { bottom: 22px; left: 22px; border-right: none; border-top: none; }
.corner.br { bottom: 22px; right: 22px; border-left: none; border-top: none; }

.paper-head { text-align: center; position: relative; }
.ribbon {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 6px;
  color: #fff;
  background: linear-gradient(90deg, #a51f24, var(--red), #a51f24);
  padding: 4px 18px;
  margin-bottom: 10px;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
.paper-head h2 {
  font-family: var(--kai);
  font-size: 40px;
  letter-spacing: 14px;
  color: #5a2e0e;
  text-shadow: 0 1px 0 #fff;
}
.divider {
  margin: 12px auto 4px;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  position: relative;
}
.divider span {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 0 10px;
  color: var(--gold-deep);
  font-size: 16px;
}

.oath { margin: 26px 0 22px; min-height: 150px; }
.oath-text {
  font-family: var(--kai);
  font-size: 23px;
  line-height: 2.1;
  text-indent: 2em;
  text-align: justify;
  color: #3b2412;
}
.oath-text em {
  font-style: normal;
  color: var(--red);
  font-weight: 700;
  padding: 0 2px;
  background: linear-gradient(transparent 62%, rgba(245, 199, 107, .55) 0);
}
.caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--red);
  vertical-align: -0.15em;
  animation: blink .8s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.paper-foot {
  display: grid;
  gap: 10px;
  font-family: var(--kai);
  font-size: 18px;
}
.field { display: flex; align-items: baseline; gap: 12px; }
.field .label { color: #8a5a2b; min-width: 4.5em; text-align: justify; text-align-last: justify; }
.field .label::after { content: "："; }
.field .value {
  flex: 1;
  border-bottom: 1px dashed #b98a4a;
  padding-bottom: 2px;
  color: #3b2412;
}
.field .value.name { font-size: 22px; font-weight: 700; color: #5a2e0e; }

.sign-area { margin-top: 22px; }
.sign-label { font-family: var(--kai); font-size: 15px; color: #8a5a2b; margin-bottom: 6px; }
.sign-box {
  position: relative;
  height: 130px;
  border-radius: 10px;
  border: 2px dashed #c9a46a;
  background: rgba(255, 255, 255, .45);
  transition: border-color .3s, box-shadow .3s;
}
.sign-box.enabled { border-color: var(--red); box-shadow: 0 0 0 4px rgba(200, 40, 45, .12); }
.sign-box.locked { border-style: solid; border-color: transparent; background: transparent; }
.sign-guide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--kai);
  font-size: 72px;
  color: rgba(140, 90, 40, .12);
  letter-spacing: 16px;
  pointer-events: none;
}
#signPad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.mini-btn {
  position: absolute;
  right: 8px; bottom: 8px;
  font-size: 12px;
  border: 1px solid #c9a46a;
  background: #fff8ea;
  color: #8a5a2b;
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  display: none;
}
.sign-box.enabled .mini-btn { display: block; }

/* 印章 */
.seal {
  position: absolute;
  right: 40px;
  bottom: 54px;
  width: 118px; height: 118px;
  border-radius: 50%;
  border: 5px solid var(--red);
  display: grid;
  place-items: center;
  color: var(--red);
  opacity: 0;
  transform: scale(3) rotate(-30deg);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.75) 61%, #000 75%);
          mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.75) 61%, #000 75%);
}
.seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid var(--red);
}
.seal-inner {
  font-family: var(--kai);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  text-align: center;
  display: flex;
  flex-direction: column;
  letter-spacing: 4px;
}
.seal.stamped {
  animation: stamp .55s cubic-bezier(.5, -0.2, .6, 1.4) forwards;
}
@keyframes stamp {
  0% { opacity: 0; transform: scale(3) rotate(-30deg); }
  70% { opacity: .95; transform: scale(.9) rotate(-14deg); }
  100% { opacity: .88; transform: scale(1) rotate(-14deg); }
}
.paper.shake { animation: shake .4s ease; }
@keyframes shake {
  25% { transform: translateY(3px); }
  50% { transform: translateY(-2px); }
  75% { transform: translateY(1px); }
}

/* ---------- 步骤面板 ---------- */
.steps {
  width: min(320px, 94vw);
  padding: 28px 26px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  text-align: center;
}
.step-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin-bottom: 26px;
  position: relative;
}
.step-list::before {
  content: "";
  position: absolute;
  top: 17px; left: 12%; right: 12%;
  height: 2px;
  background: rgba(255, 255, 255, .2);
}
.step-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  transition: color .3s;
}
.step-list i {
  font-style: normal;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: #2b1c55;
  border: 2px solid rgba(255, 255, 255, .25);
  transition: all .3s;
}
.step-list li.current { color: var(--gold); }
.step-list li.current i {
  background: linear-gradient(135deg, #fff1c1, #f5c76b);
  color: #4a2a05;
  border-color: #fff;
  box-shadow: 0 0 18px rgba(245, 199, 107, .8);
}
.step-list li.finished { color: #9ff0c0; }
.step-list li.finished i { background: #2fbf71; border-color: #9ff0c0; color: transparent; }
.step-list li.finished i::after { content: "✓"; color: #fff; position: absolute; }

.step-panel p {
  font-size: 16px;
  line-height: 1.8;
  color: #ffeccc;
  margin-bottom: 20px;
}
.step-panel small { display: block; margin-top: 12px; color: rgba(255, 255, 255, .55); letter-spacing: 2px; }
.hidden { display: none; }

.thumb {
  position: relative;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle, rgba(255, 90, 90, .35), rgba(200, 40, 45, .15) 60%, transparent 70%);
  display: grid;
  place-items: center;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 110, 110, .55); }
  100% { box-shadow: 0 0 0 26px rgba(255, 110, 110, 0); }
}
.thumb .fp {
  width: 64px; height: 64px;
  fill: none;
  stroke: #ffb3b3;
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke .2s, transform .2s;
}
.thumb.pressing .fp { stroke: #fff; transform: scale(.92); }
.thumb .ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.thumb .ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
}

/* ---------- 完成页 ---------- */
.done-card {
  text-align: center;
  max-width: 520px;
  padding: 48px 36px 36px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 233, 196, .35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.trophy {
  font-size: 84px;
  animation: bounce 1.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(255, 190, 60, .6));
}
@keyframes bounce { 50% { transform: translateY(-12px) rotate(6deg); } }
.done-card h2 {
  font-family: var(--kai);
  font-size: 46px;
  letter-spacing: 8px;
  margin: 10px 0 16px;
  background: linear-gradient(180deg, #fff6d8, #ffc85a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.done-msg { font-size: 18px; line-height: 2; color: #ffeccc; }
.done-msg b { color: var(--gold); font-size: 22px; }
.done-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.done-actions .btn { padding: 14px 28px; font-size: 16px; letter-spacing: 2px; }
.link-btn {
  margin-top: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* 浏览模式下隐藏步骤，显示返回 */
#contract.viewing .steps { display: none; }
.back-float {
  position: fixed;
  top: 18px; left: 18px;
  z-index: 10;
  padding: 10px 20px;
  font-size: 14px;
  letter-spacing: 2px;
}

@media (max-width: 640px) {
  .paper { padding: 36px 26px 30px; }
  .paper-head h2 { font-size: 32px; letter-spacing: 8px; }
  .oath-text { font-size: 19px; }
  .seal { width: 96px; height: 96px; right: 24px; bottom: 44px; }
  .seal-inner { font-size: 21px; }
  #contract { gap: 28px; }
}