/* ============================================================
   佩奇的灵感菇树林 — 样式表
   风格：塔罗暗调（深夜林底 / 暗金描边 / 象牙文字）
   ============================================================ */

/* ---------- 变量 ---------- */
:root {
  /* 底色：由深到浅的夜林层次 */
  --night-0:      #0E0F0C;
  --night-1:      #13150F;
  --night-2:      #191C14;
  --night-3:      #20241A;
  --night-4:      #272C20;

  /* 暗金 */
  --gold:         #C6A15B;
  --gold-bright:  #E0C078;
  --gold-dim:     #8E7540;
  --gold-line:    rgba(198, 161, 91, .34);
  --gold-line-strong: rgba(224, 192, 120, .58);
  --gold-glow:    rgba(224, 192, 120, .16);

  /* 文字 */
  --ivory:        #EDE3CE;
  --ivory-soft:   #BFB49C;
  --ivory-faint:  #8B836F;

  /* 点缀 */
  --moss:         #6E7F55;
  --ember:        #B8543C;
  --error:        #D98770;

  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-lg: 4px;
  --r-md: 3px;
  --r-sm: 2px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ============================================================
   顶栏
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 15, 12, .92);
  border-bottom: 1px solid var(--gold-line);
  backdrop-filter: blur(10px);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 30px);
  height: 56px;
}

/* 最左：品牌 */
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ivory);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.topbar__brand svg { color: var(--gold-bright); flex: 0 0 auto; }
.topbar__brand:hover,
.topbar__brand:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: rgba(198, 161, 91, .08);
}

/* 中偏左：功能入口 */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .34rem .78rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ivory-soft);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.topbar__link svg { opacity: .85; flex: 0 0 auto; }
.topbar__link:hover,
.topbar__link:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: rgba(198, 161, 91, .08);
}

/* 当前所在页高亮 */
.topbar__link[aria-current="page"] {
  color: var(--gold-bright);
  border-color: var(--gold-line-strong);
  background: rgba(198, 161, 91, .12);
  box-shadow: inset 0 0 12px rgba(224, 192, 120, .1);
}

/* 最右：外部入口，靠右推开 */
.topbar__ext {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  flex: 0 0 auto;
  padding: .34rem .8rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  background: rgba(198, 161, 91, .06);
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease), box-shadow .18s var(--ease);
}
.topbar__ext:hover,
.topbar__ext:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold-line-strong);
  background: rgba(198, 161, 91, .14);
  box-shadow: 0 0 16px rgba(224, 192, 120, .16);
}

/* 子页面的「返回主页」按钮 */
.back-home {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  margin-bottom: clamp(8px, 1.2vh, 14px);
  padding: .3rem .72rem .3rem .56rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ivory-soft);
  text-decoration: none;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  background: rgba(198, 161, 91, .05);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.back-home:hover,
.back-home:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold-line-strong);
  background: rgba(198, 161, 91, .12);
}
.back-home svg { flex: 0 0 auto; }

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night-1);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* 细密的暗金噪点纹理：只落在页面留白，不干扰阅读 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(58deg,  rgba(198, 161, 91, .05) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-32deg, rgba(198, 161, 91, .035) 0 1px, transparent 1px 12px);
  background-size: 220px 220px, 260px 260px;
}

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

a { color: var(--gold-bright); text-underline-offset: 3px; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: .6rem 1rem;
  background: var(--night-3);
  color: var(--gold-bright);
  border: 1px solid var(--gold-line-strong);
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 页面骨架：整页滚动，首屏仍是上 50% / 下 50% ---------- */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   上半区：主图（11.png）
   首屏占 50vh；整页滚动时它随页面一起滚走
   ============================================================ */
.hero {
  position: relative;
  flex: 0 0 auto;
  /* 顶栏固定占 56px，这里扣掉，保证「顶栏 + 主图」正好是半屏 */
  height: calc(50vh - 56px);
  min-height: 300px;
  overflow: hidden;
  background: var(--night-0);
  isolation: isolate;
}

.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 数值越大画面越靠下：92% 让图片上移，多露出原图下半部分 */
  object-position: center 92%;
  /* 照片本身偏暖偏亮，降一点饱和与高光，让它融进夜林但不至于发黑 */
  filter: brightness(.92) saturate(.88) contrast(1.05);
}

/* 压暗集中在左侧与顶部，右侧留出照片本来的光，标题仍压得住 */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 12, 8, .62) 0%,
      rgba(10, 12, 8, .34) 30%,
      rgba(10, 12, 8, .04) 58%,
      rgba(10, 12, 8, 0) 74%),
    linear-gradient(96deg,
      rgba(10, 12, 8, .74) 0%,
      rgba(10, 12, 8, .42) 34%,
      rgba(10, 12, 8, .06) 62%,
      rgba(10, 12, 8, 0) 82%),
    radial-gradient(120% 80% at 76% 4%, rgba(224, 192, 120, .12), transparent 58%),
    linear-gradient(0deg, var(--night-1) 0%, rgba(19, 21, 15, 0) 22%);
}

.hero__copy {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 6vw, 88px);
  top: clamp(28px, 7vh, 74px);
  right: clamp(20px, 6vw, 88px);
  max-width: min(760px, 82%);
  color: var(--ivory);
  text-shadow: 0 2px 18px rgba(6, 8, 4, .8), 0 1px 3px rgba(6, 8, 4, .6);
}

.hero__eyebrow {
  margin: 0 0 .55rem;
  font-size: .75rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* 标题下的暗金细线，取塔罗牌的镶边感 */
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5.4vw, 4.15rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .08em;
  color: var(--ivory);
}

.hero__title::after {
  content: "";
  display: block;
  width: clamp(72px, 12vw, 168px);
  height: 1px;
  margin-top: .7rem;
  background: linear-gradient(90deg, var(--gold-bright), rgba(224, 192, 120, 0));
}

.hero__sub {
  margin: 1rem 0 0;
  font-size: clamp(.9375rem, 1.35vw, 1.0625rem);
  line-height: 1.8;
  color: var(--ivory-soft);
  max-width: 34em;
  font-weight: 400;
}

.hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  font-size: .75rem;
  letter-spacing: .3em;
  color: var(--gold-dim);
  font-weight: 600;
  animation: bob 3.2s var(--ease) infinite;
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: .6; }
  50%      { transform: translate(-50%, 5px); opacity: 1; }
}

/* ============================================================
   下半区：深夜林功能区
   不再自己做内部滚动，高度随内容增长，滚动交给整个页面
   ============================================================ */
.deck {
  position: relative;
  flex: 1 1 auto;
  background:
    radial-gradient(90% 120% at 50% 0%, var(--night-3) 0%, var(--night-1) 62%),
    var(--night-1);
  color: var(--ivory);
  padding: clamp(16px, 2.6vh, 34px) clamp(20px, 4.2vw, 64px) 104px;
}

/* 桌面端为右下角的科学提示预留一条留白，正文不会压到它下面 */
@media (min-width: 1024px) {
  .deck {
    padding-right: calc(clamp(20px, 4.2vw, 64px) + 196px);
  }
}

/* 与主图之间的暗金分隔线与微光 */
.deck::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(224, 192, 120, 0) 0%,
    var(--gold-line-strong) 22%,
    var(--gold-bright) 50%,
    var(--gold-line-strong) 78%,
    rgba(224, 192, 120, 0) 100%);
  opacity: .8;
}

.deck::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 90px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, var(--gold-glow), transparent 70%);
}

/* 分隔处的金色菱形纹饰 */
.deck__ornament {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0 auto clamp(10px, 1.6vh, 18px);
  max-width: 1080px;
  color: var(--gold);
  opacity: .85;
}

.deck__ornament-line {
  height: 1px;
  flex: 1 1 auto;
  max-width: 220px;
  background: linear-gradient(90deg, rgba(198, 161, 91, 0), rgba(198, 161, 91, .55));
}
.deck__ornament-line:last-child {
  background: linear-gradient(90deg, rgba(198, 161, 91, .55), rgba(198, 161, 91, 0));
}

.deck__ornament svg {
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(224, 192, 120, .45));
}

/* 整页滚动条也走暗调 */
html { scrollbar-color: rgba(198, 161, 91, .35) transparent; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--night-1); }
html::-webkit-scrollbar-thumb {
  background: rgba(198, 161, 91, .28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ---------- 视图与切换 ---------- */
.view[hidden] { display: none; }

.view {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  animation: view-in .3s var(--ease) both;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.view__head { margin-bottom: clamp(12px, 1.9vh, 22px); }

.view__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* 标题前的小金菱形 */
.view__title::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(224, 192, 120, .5);
}

.view__lead {
  margin: .45rem 0 0;
  color: var(--ivory-soft);
  font-size: .9375rem;
}

/* ---------- 首页两张大入口卡 ---------- */
.entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.entry {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon body";
  align-items: start;
  gap: .35rem 1rem;
  padding: clamp(18px, 2.4vw, 26px);
  background:
    linear-gradient(160deg, rgba(39, 44, 32, .92), rgba(19, 21, 15, .92));
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    0 10px 26px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(224, 192, 120, .08);
  color: inherit;
  text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
  overflow: hidden;
}

/* 卡片四角的细小金色角饰 */
.entry::before,
.entry::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border-color: var(--gold-line-strong);
  border-style: solid;
  opacity: .8;
  transition: opacity .22s var(--ease);
}
.entry::before {
  top: 8px; left: 8px;
  border-width: 1px 0 0 1px;
}
.entry::after {
  right: 8px; bottom: 8px;
  border-width: 0 1px 1px 0;
}

.entry:hover,
.entry:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-line-strong);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    0 14px 32px rgba(0, 0, 0, .55),
    0 0 24px rgba(224, 192, 120, .12),
    inset 0 1px 0 rgba(224, 192, 120, .14);
}

.entry:hover::before,
.entry:hover::after,
.entry:focus-visible::before,
.entry:focus-visible::after { opacity: 1; }

.entry:active { transform: translateY(0); }

.entry__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--gold-bright);
  background: radial-gradient(circle at 34% 28%, rgba(224, 192, 120, .16), rgba(224, 192, 120, .03));
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 0 18px rgba(224, 192, 120, .12);
}

.entry__body { grid-area: body; display: block; }

.entry__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ivory);
  line-height: 1.3;
}

.entry__desc {
  display: block;
  margin-top: .3rem;
  color: var(--ivory-soft);
  font-size: .9375rem;
  line-height: 1.65;
}

.deck__note {
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  font-size: .875rem;
  color: var(--ivory-faint);
  text-align: center;
}

/* ---------- 占位卡（占卜 / 调频） ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: clamp(14px, 1.7vw, 20px);
  border: 1px dashed rgba(198, 161, 91, .30);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(32, 36, 26, .72), rgba(19, 21, 15, .72));
  box-shadow: inset 0 1px 0 rgba(224, 192, 120, .05);
}

/* 占卜首页的卡片：整张都是可点的入口 */
.card--link {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease), border-color .22s var(--ease),
              box-shadow .22s var(--ease), background .22s var(--ease);
}

.card--link:hover,
.card--link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-line-strong);
  background: linear-gradient(165deg, rgba(39, 44, 32, .88), rgba(19, 21, 15, .88));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .45),
    0 0 22px rgba(224, 192, 120, .10),
    inset 0 1px 0 rgba(224, 192, 120, .1);
}

.card--link:active { transform: translateY(0); }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  color: var(--gold);
  background: rgba(198, 161, 91, .08);
  border: 1px solid rgba(198, 161, 91, .26);
}

.card__name {
  margin: .05rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.45;
  color: var(--ivory);
}

.card__desc {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ivory-faint);
  flex: 1 1 auto;
}

.card__badge {
  margin-top: .2rem;
  padding: .08rem .58rem;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--gold-dim);
  background: rgba(198, 161, 91, .07);
  border: 1px solid rgba(198, 161, 91, .24);
  border-radius: 999px;
}

/* ---------- 灵摆占卜：一步一步问下来 ---------- */
.pend {
  max-width: 720px;
  margin: 0 auto;
}

.pend__step[hidden] { display: none; }

.pend__step {
  animation: pend-in .28s var(--ease) both;
}

@keyframes pend-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.pend__step:focus { outline: none; }

/* 每一问的那句话：衬线、稍大、留白足 */
.pend__ask {
  margin: 0 0 clamp(14px, 2.2vw, 20px);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.1vw, 1.375rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ivory);
}

.pend__note {
  margin: -.5rem 0 clamp(14px, 2.2vw, 20px);
  font-size: .875rem;
  line-height: 1.75;
  color: var(--ivory-faint);
}

.pend__note strong {
  color: var(--gold-bright);
  font-weight: 700;
}

/* 选项：三枚一行的窄按钮，和主按钮区分开 */
.pend__choices {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 14px);
}

.pend__choice {
  flex: 0 1 auto;
  min-width: 6.5rem;
  padding: .7rem 1.5rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-indent: .14em;
  color: var(--ivory);
  background: rgba(20, 24, 16, .78);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), box-shadow .16s var(--ease);
}

.pend__choice:hover,
.pend__choice:focus-visible {
  transform: translateY(-2px);
  color: var(--gold-bright);
  border-color: var(--gold-line-strong);
  box-shadow: 0 0 18px var(--gold-glow);
  outline: none;
}

.pend__choice:active { transform: translateY(0); }

/* 教程那份字：读起来像册子，不像弹窗 */
.pend__doc {
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.8vw, 28px);
  background: linear-gradient(162deg, rgba(30, 34, 24, .9), rgba(19, 21, 15, .9));
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
}

.pend__h {
  margin: 0 0 .55rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold-bright);
}

.pend__h:not(:first-child) { margin-top: clamp(18px, 2.4vw, 24px); }

.pend__list {
  margin: 0;
  padding-left: 1.35rem;
  color: var(--ivory-soft);
  font-size: .9375rem;
  line-height: 1.9;
}

.pend__list li + li { margin-top: .3rem; }

.pend__list strong {
  color: var(--ivory);
  font-weight: 700;
}

.pend__example {
  margin: 0;
  color: var(--ivory-soft);
  font-size: .9375rem;
  line-height: 1.9;
}

.pend__example + .pend__example { margin-top: .6rem; }

.pend__example strong {
  color: var(--gold-bright);
  font-weight: 700;
}

.pend__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(16px, 2.4vw, 22px);
}

/* 重点提醒：底色与描边都比正文重一档，让人停一下 */
.pend__warn {
  margin-top: clamp(18px, 2.4vw, 24px);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
  background: rgba(90, 38, 20, .18);
  border: 1px solid rgba(224, 192, 120, .42);
  border-left: 3px solid var(--gold-bright);
  border-radius: var(--r-sm);
}

.pend__warn-title {
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-bright);
}

.pend__warn-body {
  margin: 0;
  color: var(--ivory-soft);
  font-size: .9375rem;
  line-height: 1.9;
}

.pend__warn-body strong {
  color: var(--ivory);
  font-weight: 700;
}

.pend__sign {
  margin: .6rem 0 0;
  text-align: right;
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--ivory-faint);
}

/* 目标输入 */
.pend__form {
  margin-top: clamp(14px, 2vw, 18px);
}

.pend__label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--serif);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-bright);
}

.pend__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .6rem;
}

.pend__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: .65rem .9rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ivory);
  background: rgba(20, 24, 16, .78);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  transition: border-color .18s, box-shadow .18s;
}

.pend__input::placeholder {
  color: var(--ivory-faint);
}

.pend__input:focus {
  outline: none;
  border-color: var(--gold-line-strong);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.pend__error {
  margin: .55rem 0 0;
  font-size: .8125rem;
  color: #E39B7A;
}

.pend__error[hidden] {
  display: none;
}

/* ---------- 占卜台：整幅画面就是那张成图 ----------
   桌面、羊皮纸、手臂、绕在腕上的链子、垂下来的水晶，全都已经烘在成图里，
   所以这里不再拼桌子、不再拼纸、也不再拼手，只放两张成图外加一行字。
   棋盘的 3:2 和成图的 3:2 是同一个比例，cover 就是精确铺满：
   不裁一刀、不拉伸，图里的每个坐标都能直接当棋盘百分比用 */
.pend-board {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: clamp(14px, 2.2vw, 22px) auto 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: #0C0F13;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(198, 161, 91, .18);
}

.pend-board__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* 两张成图各管一只手：默认（data-hand="right"）开右手那张，
   data-hand="left" 时开左手那张。JS 只在容器上写一个属性，画面就整幅换掉 */
.pend-board__scene--right {
  display: none;
}

.pend-board[data-hand="right"] .pend-board__scene--left {
  display: none;
}

.pend-board[data-hand="right"] .pend-board__scene--right {
  display: block;
}

/* 纸上写下的那句占卜目标，位置往右上角挪了一点。
   水晶最低点落在 0.674，纸的下缘是一道斜的 —— 沿 x 逐列量过去，最浅处只到 0.752，
   所以字块的底边钉在 0.69 左右都还在纸上；文案长到换行时多出来的行往上长，
   从水晶尖旁边绕过去（水晶悬在纸前面，遮住几个字也合物理） */
.pend-board__goal {
  position: absolute;
  z-index: 2;
  left: 55.5%;
  bottom: 30.5%;
  width: 48%;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(.75rem, 1.5vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .06em;
  text-align: center;
  color: #150C04;
  /* 深字压在暗纸上：往上一点点的暖高光给出「刻在羊皮纸上」的凹感，
     再垫一层淡淡的暗影让笔画边缘不糊进纸纹里 */
  text-shadow: 0 1px 0 rgba(255, 242, 216, .22), 0 1px 3px rgba(0, 0, 0, .55);
  word-break: break-word;
}

/* 成图里那颗水晶被一块纸色补丁盖住。
   补丁是从原图同一块地方按行左右插值补出来的，再叠了邻居纸面的纸纤维颗粒，
   四边羽化，所以看不出接缝 —— 水晶于是可以换成下面那层能摆动的 */
.pend-board__patch {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.pend-board__patch--left {
  left: 48.7%;
  top: 28.3%;
  width: 6.1%;
  display: block;
}

.pend-board__patch--right {
  left: 48.7%;
  top: 28.3%;
  width: 6.1%;
  display: none;
}

.pend-board[data-hand="right"] .pend-board__patch--left { display: none; }
.pend-board[data-hand="right"] .pend-board__patch--right { display: block; }

/* 会摆的那整根灵摆：链子在上、水晶在下，同在一张图里。
   枢轴钉在图上沿正中，也就是手指夹住链子的那个点 —— 转起来才是「链子吊着水晶荡」。
   摆动由容器上的 data-swing 决定：ccw/cw × big/small，still 就是不动 */
.pend-board__swing {
  position: absolute;
  z-index: 3;
  left: 48.9333%;
  top: 28%;
  width: 5.3333%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 0%;
  transform: rotate(0deg);
  will-change: transform;
}

/* 两张成图里灵摆挂在同一个位置，所以左右手共用同一张悬空图，不用镜像 */

/* ---------- 摆动：绕一个圆锥转，不是左右拉锯 ----------

   真的灵摆挂在手指上荡起来，走的不是一条直线，而是一个圆锥：水晶尖端绕着
   挂点下方画圈，一圈里依次经过「纸面内（最低，正对纸）」「左侧」
   「纸面外（被拉回来，最短）」「右侧」四个方位。所以它不是「摆过去、停住」，
   而是绕着这几个点一直转，转不停。

   CSS 里用一个 rotate 做摆角、一个 scale 做「远近」：
     tip = (Rx·sinφ, D + Ry·cosφ)
     k   = |tip| / D      —— 离眼睛近了就放大，远了就缩小，画面才读得出纵深
     a   = -atan2(tx, ty) —— CSS 的 rotate 在 y 朝下的坐标系里顺时针为正
   transform: rotate(a) scale(k) 就把整根灵摆送到 tip 上，而挂点纹丝不动。

   Ry 比 Rx 小得多（约四分之一）不是偷懒，是几何上的必然：半锥角 20° 的摆，
   尖端的横向摆幅是 L·sin20° ≈ 0.34L，纵向起伏只有 L·(1 − cos20°) ≈ 0.06L。
   于是画面上看到的是「左右荡得开、进退只一点点」，正是俯视看一个真摆的样子。

   关键帧由 _g7.py 算出：一圈 24 帧、1.55s 一圈；角速度上叠了一点正弦，
   每圈经过纸面内外时略慢、两侧略快，像被手轻轻带了一下，不是匀速转盘。 */

@keyframes pend-orbit-ccw-big {
  0% { transform: rotate(0deg) scale(1.095); }
  4.167% { transform: rotate(-3.08deg) scale(1.095); }
  8.333% { transform: rotate(-6.201deg) scale(1.096); }
  12.5% { transform: rotate(-9.364deg) scale(1.097); }
  16.667% { transform: rotate(-12.503deg) scale(1.097); }
  20.833% { transform: rotate(-15.449deg) scale(1.095); }
  25% { transform: rotate(-17.922deg) scale(1.088); }
  29.167% { transform: rotate(-19.528deg) scale(1.071); }
  33.333% { transform: rotate(-19.785deg) scale(1.043); }
  37.5% { transform: rotate(-18.164deg) scale(1.003); }
  41.667% { transform: rotate(-14.223deg) scale(0.957); }
  45.833% { transform: rotate(-7.911deg) scale(0.92); }
  50% { transform: rotate(0deg) scale(0.905); }
  54.167% { transform: rotate(7.911deg) scale(0.92); }
  58.333% { transform: rotate(14.223deg) scale(0.957); }
  62.5% { transform: rotate(18.164deg) scale(1.003); }
  66.667% { transform: rotate(19.785deg) scale(1.043); }
  70.833% { transform: rotate(19.528deg) scale(1.071); }
  75% { transform: rotate(17.922deg) scale(1.088); }
  79.167% { transform: rotate(15.449deg) scale(1.095); }
  83.333% { transform: rotate(12.503deg) scale(1.097); }
  87.5% { transform: rotate(9.364deg) scale(1.097); }
  91.667% { transform: rotate(6.201deg) scale(1.096); }
  95.833% { transform: rotate(3.08deg) scale(1.095); }
  100% { transform: rotate(0deg) scale(1.095); }
}

@keyframes pend-orbit-ccw-small {
  0% { transform: rotate(0deg) scale(1.042); }
  4.167% { transform: rotate(-1.439deg) scale(1.042); }
  8.333% { transform: rotate(-2.897deg) scale(1.041); }
  12.5% { transform: rotate(-4.377deg) scale(1.04); }
  16.667% { transform: rotate(-5.844deg) scale(1.037); }
  20.833% { transform: rotate(-7.213deg) scale(1.033); }
  25% { transform: rotate(-8.334deg) scale(1.026); }
  29.167% { transform: rotate(-9.005deg) scale(1.017); }
  33.333% { transform: rotate(-8.99deg) scale(1.004); }
  37.5% { transform: rotate(-8.076deg) scale(0.989); }
  41.667% { transform: rotate(-6.163deg) scale(0.974); }
  45.833% { transform: rotate(-3.352deg) scale(0.962); }
  50% { transform: rotate(0deg) scale(0.958); }
  54.167% { transform: rotate(3.352deg) scale(0.962); }
  58.333% { transform: rotate(6.163deg) scale(0.974); }
  62.5% { transform: rotate(8.076deg) scale(0.989); }
  66.667% { transform: rotate(8.99deg) scale(1.004); }
  70.833% { transform: rotate(9.005deg) scale(1.017); }
  75% { transform: rotate(8.334deg) scale(1.026); }
  79.167% { transform: rotate(7.213deg) scale(1.033); }
  83.333% { transform: rotate(5.844deg) scale(1.037); }
  87.5% { transform: rotate(4.377deg) scale(1.04); }
  91.667% { transform: rotate(2.897deg) scale(1.041); }
  95.833% { transform: rotate(1.439deg) scale(1.042); }
  100% { transform: rotate(0deg) scale(1.042); }
}

@keyframes pend-orbit-cw-small {
  0% { transform: rotate(0deg) scale(1.042); }
  4.167% { transform: rotate(1.439deg) scale(1.042); }
  8.333% { transform: rotate(2.897deg) scale(1.041); }
  12.5% { transform: rotate(4.377deg) scale(1.04); }
  16.667% { transform: rotate(5.844deg) scale(1.037); }
  20.833% { transform: rotate(7.213deg) scale(1.033); }
  25% { transform: rotate(8.334deg) scale(1.026); }
  29.167% { transform: rotate(9.005deg) scale(1.017); }
  33.333% { transform: rotate(8.99deg) scale(1.004); }
  37.5% { transform: rotate(8.076deg) scale(0.989); }
  41.667% { transform: rotate(6.163deg) scale(0.974); }
  45.833% { transform: rotate(3.352deg) scale(0.962); }
  50% { transform: rotate(0deg) scale(0.958); }
  54.167% { transform: rotate(-3.352deg) scale(0.962); }
  58.333% { transform: rotate(-6.163deg) scale(0.974); }
  62.5% { transform: rotate(-8.076deg) scale(0.989); }
  66.667% { transform: rotate(-8.99deg) scale(1.004); }
  70.833% { transform: rotate(-9.005deg) scale(1.017); }
  75% { transform: rotate(-8.334deg) scale(1.026); }
  79.167% { transform: rotate(-7.213deg) scale(1.033); }
  83.333% { transform: rotate(-5.844deg) scale(1.037); }
  87.5% { transform: rotate(-4.377deg) scale(1.04); }
  91.667% { transform: rotate(-2.897deg) scale(1.041); }
  95.833% { transform: rotate(-1.439deg) scale(1.042); }
  100% { transform: rotate(0deg) scale(1.042); }
}

@keyframes pend-orbit-cw-big {
  0% { transform: rotate(0deg) scale(1.095); }
  4.167% { transform: rotate(3.08deg) scale(1.095); }
  8.333% { transform: rotate(6.201deg) scale(1.096); }
  12.5% { transform: rotate(9.364deg) scale(1.097); }
  16.667% { transform: rotate(12.503deg) scale(1.097); }
  20.833% { transform: rotate(15.449deg) scale(1.095); }
  25% { transform: rotate(17.922deg) scale(1.088); }
  29.167% { transform: rotate(19.528deg) scale(1.071); }
  33.333% { transform: rotate(19.785deg) scale(1.043); }
  37.5% { transform: rotate(18.164deg) scale(1.003); }
  41.667% { transform: rotate(14.223deg) scale(0.957); }
  45.833% { transform: rotate(7.911deg) scale(0.92); }
  50% { transform: rotate(0deg) scale(0.905); }
  54.167% { transform: rotate(-7.911deg) scale(0.92); }
  58.333% { transform: rotate(-14.223deg) scale(0.957); }
  62.5% { transform: rotate(-18.164deg) scale(1.003); }
  66.667% { transform: rotate(-19.785deg) scale(1.043); }
  70.833% { transform: rotate(-19.528deg) scale(1.071); }
  75% { transform: rotate(-17.922deg) scale(1.088); }
  79.167% { transform: rotate(-15.449deg) scale(1.095); }
  83.333% { transform: rotate(-12.503deg) scale(1.097); }
  87.5% { transform: rotate(-9.364deg) scale(1.097); }
  91.667% { transform: rotate(-6.201deg) scale(1.096); }
  95.833% { transform: rotate(-3.08deg) scale(1.095); }
  100% { transform: rotate(0deg) scale(1.095); }
}

/* linear + infinite：一圈接一圈地转，没有终点也没有顿挫。
   big 的尖端横向摆 ±0.36 个摆长（约 20°），small 是 ±0.16（约 9°）；
   纵向前后只差 19%，所以看上去是「左右荡得开、进退一点点」 */
.pend-board[data-swing="ccw-big"] .pend-board__swing {
  animation: pend-orbit-ccw-big 1.55s linear infinite;
}

.pend-board[data-swing="ccw-small"] .pend-board__swing {
  animation: pend-orbit-ccw-small 1.55s linear infinite;
}

.pend-board[data-swing="cw-small"] .pend-board__swing {
  animation: pend-orbit-cw-small 1.55s linear infinite;
}

.pend-board[data-swing="cw-big"] .pend-board__swing {
  animation: pend-orbit-cw-big 1.55s linear infinite;
}

/* 占卜失败：一动不动。连那点「远近」都不给，就是彻底静止 */
.pend-board[data-swing="still"] .pend-board__swing {
  animation: none;
  transform: rotate(0deg) scale(1);
}

/* 成图上方那条占卜目标：先让人看清自己在算什么，再请人闭眼 */
.pend-board__target {
  margin: clamp(10px, 1.8vw, 16px) auto 0;
  max-width: 46rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.9vw, 1.25rem);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
  color: var(--gold-bright);
  word-break: break-word;
}

.pend-board__target::before,
.pend-board__target::after {
  content: '「';
  color: var(--gold-line);
  color: rgba(198, 161, 91, .55);
}

.pend-board__target::after {
  content: '」';
}

.pend__ask--tight {
  margin-top: clamp(6px, 1.2vw, 10px);
  font-size: clamp(.875rem, 1.5vw, 1rem);
  font-weight: 400;
  color: var(--ivory-soft);
}

/* 结果：摆完才出现，先报摆法，再补一句怎么读 */
.pend-board__result {
  margin: clamp(14px, 2.2vw, 20px) auto 0;
  text-align: center;
}

.pend-board__result[hidden] {
  display: none;
}

.pend-board__verdict {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold-bright);
}

.pend-board__hint {
  margin: .45rem 0 0;
  font-size: clamp(.8125rem, 1.4vw, .9375rem);
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--ivory-faint);
}

.pend-board__result--fail .pend-board__verdict {
  color: #C9735B;
}

/* ---------- 写完目标之后先弹一层：请人闭眼默念七遍 ----------
   这一层压在整个页面上（比 .skip-link 的 60 还高一层），不是压在棋盘里 ——
   要闭眼的是人，不是纸。右上角关掉、右下角确认，
   两个键都只是把这一层收起来，收起来之后灵摆才开始转。 */
.pend-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(8, 9, 6, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: pend-modal-in .22s var(--ease) both;
}

.pend-modal[hidden] {
  display: none;
}

@keyframes pend-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pend-modal__panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  padding: clamp(28px, 5vw, 40px) clamp(22px, 4.4vw, 34px) clamp(20px, 3.6vw, 28px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 26% 8%, rgba(255, 246, 222, .09), rgba(0, 0, 0, 0) 62%),
    linear-gradient(162deg, rgba(32, 36, 26, .98), rgba(20, 22, 16, .98));
  border: 1px solid var(--gold-line);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .66),
    0 0 0 1px rgba(0, 0, 0, .4),
    inset 0 0 40px rgba(198, 161, 91, .06);
  text-align: center;
  animation: pend-modal-rise .26s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes pend-modal-rise {
  from { transform: translateY(10px) scale(.985); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 右上角那颗叉：不是链接，就是一个按钮，但长得像个印刷体的小符号 */
.pend-modal__close {
  position: absolute;
  top: clamp(10px, 1.8vw, 14px);
  right: clamp(10px, 1.8vw, 14px);
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1;
  color: var(--ivory-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}

.pend-modal__close:hover,
.pend-modal__close:focus-visible {
  outline: none;
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: rgba(198, 161, 91, .1);
}

.pend-modal__label {
  margin: 0;
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ivory-faint);
}

/* 要算的那句话摆在正中间：它是这一屏唯一的主角，比什么都大 */
.pend-modal__goal {
  margin: clamp(14px, 2.6vw, 20px) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--gold-bright);
  word-break: break-word;
}

.pend-modal__hint {
  margin: clamp(12px, 2.2vw, 18px) 0 0;
  font-size: clamp(.875rem, 1.6vw, .9375rem);
  line-height: 1.85;
  letter-spacing: .02em;
  color: var(--ivory-soft);
}

/* 确认键靠右下：读完了、可以开始了，手自然落在右下 */
.pend-modal__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(18px, 3.2vw, 26px);
}

@media (max-width: 719px) {
  .pend-modal__panel {
    max-width: 100%;
  }

  .pend-modal__goal {
    font-size: 1.125rem;
  }
}

/* ---------- 硬币占卜：桌子、硬币、接住它的那只左手 ----------
   桌子111.png 是 2560x1440，正好 16:9，所以棋盘也用 16:9，
   图按 cover 铺满就是一比一落在框里，不裁不拉，坐标可以直接当百分比用。 */
.coin-stage {
  margin-top: clamp(16px, 2.6vw, 26px);
}

.coin-stage[hidden] {
  display: none;
}

.coin-board {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: #0B0C0A;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(198, 161, 91, .18);
}

.coin-board__table {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* 抛之前的硬币：正面朝上，摆在桌子正中，边上压着一圈极淡的投影 */
.coin-board__coin {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  width: 11%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .72));
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}

/* 接住之后手才进来：从桌面下沿伸上来，硬币已经烘在手背上了 */
.coin-board__hand {
  position: absolute;
  z-index: 3;
  left: 4%;
  bottom: -10%;
  width: 27%;
  height: auto;
  display: none;
  filter: brightness(.94) saturate(.92) drop-shadow(0 12px 22px rgba(0, 0, 0, .66));
  user-select: none;
  -webkit-user-drag: none;
}

/* 四档状态：idle 只有硬币；flying 硬币被弹起来；三档结果各露一只手 */
.coin-board[data-stage="flying"] .coin-board__coin {
  animation: coin-toss .62s cubic-bezier(.3, .1, .4, 1) both;
}

.coin-board[data-stage="yes"] .coin-board__coin,
.coin-board[data-stage="no"] .coin-board__coin {
  display: none;
}

.coin-board[data-stage="yes"] .coin-board__hand--yes {
  display: block;
  animation: coin-hand-in .42s cubic-bezier(.2, .8, .3, 1) both;
}

.coin-board[data-stage="no"] .coin-board__hand--no {
  display: block;
  animation: coin-hand-in .42s cubic-bezier(.2, .8, .3, 1) both;
}

/* 没接住：手不出现，硬币弹开、落在桌上，最后斜着停在桌面上不动了 */
.coin-board[data-stage="fail"] .coin-board__coin {
  animation: coin-drop .9s cubic-bezier(.34, .1, .46, .98) both;
}

@keyframes coin-toss {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  34% { transform: translate(-50%, -156%) rotate(-38deg) scale(.78); }
  68% { transform: translate(-50%, -122%) rotate(-74deg) scale(.72); opacity: 1; }
  100% { transform: translate(-50%, -70%) rotate(-108deg) scale(.62); opacity: 0; }
}

@keyframes coin-hand-in {
  from { transform: translateY(18%) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes coin-drop {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  20% { transform: translate(-46%, -148%) rotate(96deg) scale(.74); }
  44% { transform: translate(-20%, -66%) rotate(214deg) scale(.86); }
  62% { transform: translate(10%, -30%) rotate(292deg) scale(.92); }
  74% { transform: translate(22%, -46%) rotate(322deg) scale(.9); }
  86% { transform: translate(30%, -26%) rotate(344deg) scale(.93); }
  100% { transform: translate(34%, -22%) rotate(352deg) scale(.94); }
}

.coin-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(14px, 2.4vw, 22px);
}

.coin-go[hidden] {
  display: none;
}

.coin-result {
  margin-top: clamp(14px, 2.4vw, 20px);
  text-align: center;
}

.coin-result[hidden] {
  display: none;
}

.coin-verdict {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--gold-bright);
}

.coin-result--fail .coin-verdict {
  color: #C9735B;
}

.coin-hint {
  margin: clamp(8px, 1.4vw, 12px) 0 0;
  font-size: clamp(.8125rem, 1.4vw, .9375rem);
  line-height: 1.85;
  color: var(--ivory-faint);
}

@media (max-width: 719px) {
  .coin-board__coin {
    width: 15%;
  }

  .coin-board__hand {
    left: 2%;
    width: 34%;
    bottom: -8%;
  }
}

/* ---------- 硬币占卜的两层提示框 ----------
   与灵摆那个弹层同一套骨架，单独一套类名是为了两边各自能改而不互相牵动。 */
.coin-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(8, 9, 6, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: pend-modal-in .22s var(--ease) both;
}

.coin-modal[hidden] {
  display: none;
}

.coin-modal__panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: clamp(28px, 5vw, 40px) clamp(22px, 4.4vw, 34px) clamp(20px, 3.6vw, 28px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 26% 8%, rgba(255, 246, 222, .09), rgba(0, 0, 0, 0) 62%),
    linear-gradient(162deg, rgba(32, 36, 26, .98), rgba(20, 22, 16, .98));
  border: 1px solid var(--gold-line);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .66),
    0 0 0 1px rgba(0, 0, 0, .4),
    inset 0 0 40px rgba(198, 161, 91, .06);
  text-align: left;
  animation: pend-modal-rise .26s cubic-bezier(.2, .8, .3, 1) both;
}

.coin-modal__close {
  position: absolute;
  top: clamp(10px, 1.8vw, 14px);
  right: clamp(10px, 1.8vw, 14px);
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1;
  color: var(--ivory-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}

.coin-modal__close:hover,
.coin-modal__close:focus-visible {
  outline: none;
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: rgba(198, 161, 91, .1);
}

.coin-modal__label {
  margin: 0 clamp(1.6rem, 4vw, 2.2rem) 0 0;
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .3em;
  color: var(--ivory-faint);
}

.coin-modal__lead {
  margin: clamp(14px, 2.6vw, 20px) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--ivory);
}

/* 两行小字提醒：字号压下去、色也压下去，是注解不是正文 */
.coin-modal__list {
  margin: clamp(12px, 2.2vw, 16px) 0 0;
  padding-left: 1.15rem;
  list-style: disc;
  font-size: clamp(.8125rem, 1.5vw, .875rem);
  line-height: 1.9;
  color: var(--ivory-faint);
}

.coin-modal__list li + li {
  margin-top: .35rem;
}

.coin-modal__steps {
  margin: clamp(14px, 2.6vw, 20px) 0 0;
  padding-left: 1.35rem;
  font-size: clamp(.875rem, 1.6vw, .9375rem);
  line-height: 1.9;
  color: var(--ivory-soft);
}

.coin-modal__steps li + li {
  margin-top: .45rem;
}

.coin-modal__steps strong {
  color: var(--gold-bright);
  font-weight: 700;
}

.coin-modal__note {
  margin: clamp(14px, 2.4vw, 18px) 0 0;
  padding-top: clamp(12px, 2vw, 16px);
  border-top: 1px solid var(--gold-line);
  font-size: clamp(.8125rem, 1.5vw, .875rem);
  line-height: 1.9;
  color: var(--ivory-faint);
}

.coin-modal__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(18px, 3.2vw, 26px);
}

@media (max-width: 719px) {
  .coin-modal__panel {
    max-width: 100%;
  }
}

@media (max-width: 719px) {
  /* 窄屏仍是 3:2：成图不动一刀，水晶才不会跑位、字也还压在纸上。
     只是字排得更宽、字号更小，长句才不至于顶到水晶尖 */
  .pend-board__goal {
    left: 55%;
    bottom: 31%;
    width: 56%;
    font-size: .75rem;
    line-height: 1.55;
  }

  .pend-board__target {
    font-size: .9375rem;
    line-height: 1.7;
  }
}

/* ---------- 占卜：纸人替身子页 ---------- */
.paper-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.paper-form {
  width: 100%;
  max-width: 640px;
  margin-top: .15rem;
}

.paper-form__label {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .1em;
  color: var(--gold-bright);
}

.paper-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: stretch;
}

.paper-form__input {
  flex: 1 1 130px;
  min-width: 0;
  padding: .5rem .7rem;
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--ivory);
  background: rgba(10, 12, 8, .72);
  border: 1px solid rgba(198, 161, 91, .32);
  border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.paper-form__input::placeholder { color: #6E6853; }

.paper-form__input:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(224, 192, 120, .16);
}

.paper-form .btn {
  flex: 0 0 auto;
  padding: .5rem 1rem;
  font-size: .875rem;
}

/* ---------- 一张纸：没有边框，只有纸自己的影子 ---------- */
.paper {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* 剪刀出场的瞬间把系统光标收起来 */
.paper--cutting { cursor: none; }
.paper--burnt { cursor: default; }

.paper__sheet {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 2px;
  color: #6C5C42;
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, .5))
    drop-shadow(0 2px 3px rgba(0, 0, 0, .32));
  transition: color .3s var(--ease), filter .3s var(--ease);
}

.paper__sheet text,
.paper__sheet tspan {
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 会动的剪刀 ---------- */
.paper__scissors {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 32px;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
  transition: opacity .14s var(--ease);
}

.paper--cutting .paper__scissors { opacity: 1; }
.paper--burnt .paper__scissors { opacity: 0; }

.paper__blade {
  transform-origin: 15.6px 16px;
}

.paper__blade--a {
  animation: blade-a 1.05s cubic-bezier(.45, .05, .55, .95) infinite;
}

.paper__blade--b {
  animation: blade-b 1.05s cubic-bezier(.45, .05, .55, .95) infinite;
}

/* 一张一合 */
@keyframes blade-a {
  0%, 100% { transform: rotate(0deg); }
  44%, 56% { transform: rotate(17deg); }
}

@keyframes blade-b {
  0%, 100% { transform: rotate(0deg); }
  44%, 56% { transform: rotate(-17deg); }
}

/* 咬下去的那一下：刀刃迅速合死再弹开，让每一刀都有自己的动静 */
.paper__scissors--snip .paper__blade--a {
  animation: snap-a .28s cubic-bezier(.22, .9, .3, 1);
}

.paper__scissors--snip .paper__blade--b {
  animation: snap-b .28s cubic-bezier(.22, .9, .3, 1);
}

@keyframes snap-a {
  0% { transform: rotate(0deg); }
  38% { transform: rotate(26deg); }
  100% { transform: rotate(0deg); }
}

@keyframes snap-b {
  0% { transform: rotate(0deg); }
  38% { transform: rotate(-26deg); }
  100% { transform: rotate(0deg); }
}

/* ---------- 剪下的纸屑 ---------- */
.paper__fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
}

.paper__chip {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 1px;
  background: linear-gradient(150deg, #F7EFDC, #DFCFB0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  animation: chip-fly .66s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes chip-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(.5); }
}

.paper__flick {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 246, 214, .8);
  animation: flick-out .46s ease-out forwards;
}

@keyframes flick-out {
  0% { opacity: .92; transform: scale(.32); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ---------- 剪刀走过的那条线 ---------- */
/* 拖的时候看得见：一道细的深褐虚线，像剪刀沿纸纤维划过去。
   松手之后这道线不再画了——它落成遮罩上的真缝，那一路上的纸就没了 */
.paper__seam-live path {
  stroke: rgba(74, 56, 30, .82);
  stroke-width: 1.1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.8 2.2;
  filter: drop-shadow(0 0 1px rgba(255, 250, 235, .75));
}

/* ---------- 命运写在纸人身上 ---------- */
.paper__fate-text {
  font-family: var(--serif);
  font-weight: 700;
  fill: #6B4F22;
  paint-order: stroke;
  stroke: rgba(255, 251, 238, .62);
  stroke-width: .8px;
}

/* ---------- 大部分裁完 → 右下角的确认键 ---------- */
.paper-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 1000px;
}

/* 纸上怎么剪：一行小字加一把小剪刀 */
.paper-hint {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--ivory-faint);
}

.paper-hint__scissors {
  font-size: 1rem;
  color: var(--gold);
  animation: hint-snip 2.4s ease-in-out infinite;
}

@keyframes hint-snip {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* 开始剪了就把提示让给确认键 */
.paper-foot--cutting .paper-hint { opacity: .45; }

/* 一键裁剪：和确认键并排，裁完才轮到烧 */
.paper-auto[hidden] { display: none; }

.paper-auto:disabled {
  opacity: .5;
  cursor: default;
}

.paper-go {
  min-width: 5.5rem;
  font-size: .8125rem;
  letter-spacing: .18em;
  padding: .5rem 1.1rem .5rem 1.2rem;
  box-shadow: 0 0 0 1px rgba(224, 192, 120, .3), 0 4px 14px rgba(0, 0, 0, .4);
  animation: paper-go-in .28s var(--ease) both;
}

.paper-go[hidden] { display: none; }

@keyframes paper-go-in {
  from { opacity: 0; transform: translateY(5px) scale(.96); }
}

/* 火头前面的焦痕：宽度由 JS 逐帧跟着火线推 */
.paper__scorch {
  opacity: .72;
}

.paper__ember {
  animation: ember-rise 1.25s cubic-bezier(.3, .2, .6, 1) forwards;
}

@keyframes ember-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  14% { opacity: 1; transform: translate(0, -3px) scale(1); }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(.25); }
}

/* 飞灰：比火星慢、比火星淡，一路往上飘还一路打转，最后才散。
   打转要绕自己那片灰的中心转，所以把变换原点钉在它自己的包围盒上，
   否则会绕着整张纸的左上角甩出去 */
.paper__ash {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ash-rise 1.9s cubic-bezier(.25, .12, .58, 1) forwards;
}

@keyframes ash-rise {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.55); }
  10% { opacity: .72; }
  38% { opacity: .58; transform: translate(calc(var(--ax) * .42), calc(var(--ay) * .48)) rotate(calc(var(--ar) * .45)) scale(1); }
  72% { opacity: .3; transform: translate(calc(var(--ax) * .82), calc(var(--ay) * .86)) rotate(calc(var(--ar) * .82)) scale(.86); }
  100% { opacity: 0; transform: translate(var(--ax), var(--ay)) rotate(var(--ar)) scale(.6); }
}

/* ---------- 剪下来的整块纸：飘下去，淡掉 ---------- */
.paper__fall {
  transform: translate(0, 0) rotate(0deg);
  transform-box: fill-box;
  transform-origin: 50% 30%;
  opacity: 1;
  will-change: transform, opacity;
}

.paper__fall--go {
  transition:
    transform 1.5s cubic-bezier(.34, .06, .44, .98),
    opacity 1.5s cubic-bezier(.5, .12, .74, .5);
  transform: translate(var(--fx), var(--fy)) rotate(var(--frot));
  opacity: 0;
}

/* ---------- 烧过之后的话 ---------- */
.paper__msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 8%;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.1vw, 1.375rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.7;
  color: #F7DFA4;
  text-shadow: 0 0 18px rgba(240, 170, 68, .6), 0 0 46px rgba(240, 140, 48, .34);
  pointer-events: none;
  animation: msg-in .55s var(--ease) both;
}

.paper__msg[hidden] { display: none; }

@keyframes msg-in {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
}

@media (max-width: 719px) {
  .paper-form { max-width: 100%; }
}

/* ---------- 调频：表单 ---------- */
.tune-form {
  padding: clamp(14px, 1.8vw, 20px);
  background: linear-gradient(165deg, rgba(32, 36, 26, .9), rgba(19, 21, 15, .9));
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(224, 192, 120, .07);
}

.tune-form__label {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .1em;
  color: var(--gold-bright);
  margin-bottom: .6rem;
}

.tune-form__row {
  display: flex;
  gap: .6rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.tune-form__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: .72rem .9rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ivory);
  background: rgba(10, 12, 8, .72);
  border: 1px solid rgba(198, 161, 91, .32);
  border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.tune-form__input::placeholder { color: #6E6853; }

.tune-form__input:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(224, 192, 120, .16);
}

.tune-form__input[aria-invalid="true"] {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(184, 84, 60, .22);
}

/* 目标输入框的字数计数 */
.tune-form__counter {
  flex: 0 0 auto;
  align-self: center;
  font-size: .75rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-faint);
}

.btn {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .08em;
  padding: .72rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease), color .16s var(--ease);
  white-space: nowrap;
}

.btn--primary {
  color: #15170F;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: #D7B36A;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(224, 192, 120, .18);
}
.btn--primary:hover { background: linear-gradient(180deg, #EDD28E, var(--gold-bright)); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, .5); }

.tune-form__error {
  margin: .5rem 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--error);
}
.tune-form__error[hidden] { display: none; }

/* ---------- 调频：已确认目标（铭牌式，非输入框） ---------- */
.goal-plate {
  position: relative;
  margin: clamp(4px, .8vw, 8px) 0 clamp(6px, 1vw, 10px);
  padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 32px);
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(198, 161, 91, .11), transparent 62%);
  border-top: 2px solid var(--gold-line);
  border-bottom: 2px solid var(--gold-line);
}

/* 上下双细线 + 中央菱形 */
.goal-plate::before,
.goal-plate::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(56px, 12vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line-strong), transparent);
}
.goal-plate::before { top: 5px; }
.goal-plate::after { bottom: 5px; }

.goal-plate__tag {
  margin: 0 0 .45rem;
  font-family: var(--sans);
  font-size: .6875rem;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--ivory-faint);
}

.goal-plate__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.4vw, 2.125rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-indent: .14em;
  line-height: 1.35;
  color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(224, 192, 120, .22);
  overflow-wrap: anywhere;
}

/* 右下角的小修改按钮 */
.goal-plate__edit {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .55rem;
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--ivory-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.goal-plate__edit:hover,
.goal-plate__edit:focus-visible {
  color: var(--gold-bright);
  border-color: rgba(198, 161, 91, .45);
  background: rgba(198, 161, 91, .1);
}
.goal-plate__edit:focus-visible { outline: none; }

@media (max-width: 560px) {
  .goal-plate { padding-left: 0; padding-right: 0; }
  .goal-plate__edit {
    position: static;
    transform: none;
    display: flex;
    margin: .7rem auto 0;
  }
}

/* ---------- 调频：板块填写区 ---------- */
.tune-boards { margin-top: clamp(14px, 2vw, 20px); }

.tune-boards__head { margin-bottom: clamp(10px, 1.5vw, 14px); }

.tune-boards__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ivory);
}

.tune-boards__lead {
  margin: .25rem 0 0;
  font-size: .875rem;
  color: var(--ivory-faint);
}

/* 板块行 */
.boards {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.board {
  display: flex;
  align-items: flex-end;
  gap: .7rem;
  padding: .7rem .8rem;
  background: linear-gradient(165deg, rgba(32, 36, 26, .85), rgba(19, 21, 15, .85));
  border: 1px solid rgba(198, 161, 91, .28);
  border-radius: var(--r-md);
}

.board__field { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.board__field--name { flex: 2 1 200px; }
.board__field--value { flex: 3 1 260px; }

.board__label {
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--ivory-faint);
}

.board__input,
.board__number {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ivory);
  background: rgba(10, 12, 8, .72);
  border: 1px solid rgba(198, 161, 91, .3);
  border-radius: var(--r-sm);
  padding: .5rem .65rem;
  min-width: 0;
}
.board__input::placeholder { color: #6E6853; }

/* 名称输入框下方的字数提示 */
.board__counter {
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--ivory-faint);
  align-self: flex-end;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.board__input:focus,
.board__number:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(224, 192, 120, .16);
}

.board__value-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.board__range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--gold);
  height: 24px;
}

.board__number { flex: 0 0 5.2em; text-align: center; }

.board__remove {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: .1rem;
  color: var(--ivory-faint);
  background: transparent;
  border: 1px solid rgba(198, 161, 91, .24);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.board__remove:hover,
.board__remove:focus-visible {
  color: var(--ember);
  border-color: rgba(184, 84, 60, .6);
  background: rgba(184, 84, 60, .1);
}

.boards__actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: clamp(12px, 1.8vw, 18px);
}

.btn--add {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: var(--gold);
  background: transparent;
  border: 1px dashed rgba(198, 161, 91, .5);
  padding: .66rem 1.05rem;
}
.btn--add:hover,
.btn--add:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  background: rgba(198, 161, 91, .1);
}

.boards-done__title {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .8rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold-bright);
}

.boards-done__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.boards-done__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .5rem .65rem;
  background: rgba(10, 12, 8, .5);
  border: 1px solid rgba(198, 161, 91, .18);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease),
              padding-bottom .2s var(--ease), box-shadow .2s var(--ease);
}

/* 拖动已改动、尚未确认：整条微微发亮 */
.boards-done__item--dirty {
  border-color: rgba(224, 192, 120, .46);
  background: rgba(20, 22, 15, .66);
}

/* 名称 + 空格 + 初始值 */
.boards-done__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
}

.boards-done__name {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ivory);
  overflow-wrap: anywhere;
}

/* 名称与数值之间的那一个空格 */
.boards-done__space {
  white-space: pre;
}

.boards-done__value {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
}

.boards-done__value--inf {
  font-size: 1.375rem;
  line-height: 1;
  color: #FFF0C0;
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(224, 192, 120, .55);
}

/* 已确认项里的进度条 */
.boards-done__range {
  width: 100%;
  height: 22px;
  margin: 0;
}

.boards-done__range.board__range--inf { accent-color: #FFF0C0; }

/* 全部板块结束后的总确认：放在整个列表的右下角 */
.boards-done__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: .85rem;
}

.boards-done__go {
  min-width: 5.5rem;
  font-size: .8125rem;
  letter-spacing: .18em;
  padding: .5rem 1.1rem .5rem 1.2rem;
}

.boards-done__go[hidden] { display: none; }

/* ---------- 调频动画：整屏接管 ---------- */
.tuning {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(90% 60% at 50% 46%, rgba(224, 192, 120, .1), transparent 62%),
    rgba(9, 10, 7, .97);
  backdrop-filter: blur(3px);
  animation: tuning-in .32s var(--ease) both;
}

.tuning[hidden] { display: none; }

@keyframes tuning-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tuning__inner {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.4vw, 30px);
}

.tuning__label {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--gold-bright);
  text-shadow: 0 0 26px rgba(224, 192, 120, .38);
}

/* 调频完成时：文案换成「调频完成」 */
.tuning--done .tuning__label { color: #FFF0C0; }

/* 小菇飞到正中之后，底下那句「调频中……」就退场，只留它自己 */
.tuning--done .tuning__label {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease .12s, visibility 0s linear .57s;
}

/* 跑道：左边起点，右边终点 */
.tuning__track {
  --token: clamp(52px, 9vw, 78px);
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
}

.tuning__rail,
.tuning__fill {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
}

.tuning__rail {
  background: rgba(198, 161, 91, .26);
}

/* 跟着小菇一起长出来的金色进度 */
.tuning__fill {
  right: auto;
  width: 0;
  background: linear-gradient(90deg, rgba(224, 192, 120, .18), var(--gold-bright));
  box-shadow: 0 0 16px rgba(224, 192, 120, .55);
  animation: tuning-grow 5s cubic-bezier(.45, .05, .55, .95) forwards;
}

@keyframes tuning-grow {
  from { width: 0; }
  to   { width: 100%; }
}

/* 跑动的灵感菇：从跑道左端跑到右端（终点内缩一个身位，不会跑出画面） */
.tuning__token {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: var(--token);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 14px rgba(224, 192, 120, .55));
  animation: tuning-run 5s cubic-bezier(.45, .05, .55, .95) forwards;
}

.tuning__token-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: tuning-bob .62s ease-in-out infinite alternate;
}

/* 5 秒跑完全程；跑完停在右端 */
@keyframes tuning-run {
  from { left: 0; }
  to   { left: calc(100% - var(--token)); }
}

/* 跑动时上下轻微颠一颠 */
@keyframes tuning-bob {
  from { transform: translateY(-3px) rotate(-3deg); }
  to   { transform: translateY(3px) rotate(3deg); }
}

/* 到达终点后：小菇落定、不再颠 */
.tuning--done .tuning__token { animation-play-state: paused; }
.tuning--done .tuning__token-img { animation: none; }
.tuning--done .tuning__fill { opacity: .85; }

/* 跑完之后离开跑道、放大着飘到屏幕正中。
   这里只给终点的位置和尺寸，过程由脚本用 transform 补（FLIP） */
.tuning__token--center {
  position: fixed;
  left: 50%;
  top: 50%;
  width: clamp(150px, 24vw, 240px);
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 0 28px rgba(224, 192, 120, .7));
}

/* 小菇落到正中之后，它正上方那句「调频成功」 */
.tuning__success {
  position: fixed;
  left: 50%;
  top: calc(50% - 128px);
  z-index: 2;
  margin: 0;
  transform: translate(-50%, -100%);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  white-space: nowrap;
  color: #FFF0C0;
  text-shadow: 0 0 18px rgba(224, 192, 120, .75), 0 0 42px rgba(224, 192, 120, .35);
  animation: success-in .5s var(--ease) both;
}

.tuning__success[hidden] { display: none; }

@keyframes success-in {
  from { opacity: 0; transform: translate(-50%, -100%) translateY(8px); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}

/* ---------- 右下角科学提示 ---------- */
.science {
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .46rem .85rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-bright);
  background: rgba(14, 15, 12, .88);
  border: 1px solid var(--gold-line-strong);
  border-left: 3px solid var(--gold-bright);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(224, 192, 120, .1);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.science svg { color: var(--gold-bright); flex: 0 0 auto; }

/* ---------- 无脚本提示 ---------- */
.noscript {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  margin: 0;
  padding: .6rem .9rem;
  font-size: .875rem;
  background: rgba(39, 44, 32, .95);
  border: 1px solid rgba(198, 161, 91, .4);
  border-radius: var(--r-sm);
  color: var(--gold-bright);
}

/* ============================================================
   响应式
   ============================================================ */

/* 中屏：两列 */
@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 窄屏顶栏：品牌在左、外链在右排第一行，两个功能入口排第二行 */
@media (max-width: 640px) {
  .topbar__inner {
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding: .42rem 14px;
    gap: .3rem .5rem;
  }
  .topbar__brand {
    order: 1;
    font-size: .9375rem;
    letter-spacing: .04em;
    margin-right: auto;
  }
  .topbar__ext {
    order: 2;
    margin-left: 0;
    padding: .28rem .58rem;
    font-size: .8125rem;
  }
  .topbar__nav {
    order: 3;
    flex: 1 1 100%;
    gap: .3rem;
  }
  .topbar__link {
    padding: .26rem .58rem;
    font-size: .875rem;
  }
}

/* 窄屏：主图按高度驱动，页面同样整页滚动 */
@media (max-width: 719px) {
  .hero {
    flex: 0 0 auto;
    /* 窄屏顶栏变成两行（约 92px），这里同步扣掉，保证首屏仍是半屏 */
    height: clamp(260px, calc(50vh - 92px), 400px);
    min-height: 260px;
    max-height: 400px;
  }

  /* 窄屏按高度 cover 时纵向无余量，放大到 132% 才有上移空间 */
  .hero__art {
    top: -16%;
    bottom: auto;
    height: 132%;
    object-position: center 50%;
  }

  .hero__copy {
    top: auto;
    bottom: 34px;
    max-width: none;
  }

  .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero__sub { margin-top: .6rem; font-size: .875rem; }
  .br-sm { display: none; }
  .hero__scroll { display: none; }

  .deck {
    flex: 1 1 auto;
    padding: 24px 18px 92px;
  }

  .entries { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }

  .card--link { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
  .card--link .card__icon { width: 46px; height: 46px; }
  .card--link .card__name { flex: 1 1 140px; margin: 0; }
  .card--link .card__desc { flex: 1 1 100%; }
  .card--link .card__badge { margin-top: 0; }

  .science {
    right: 12px;
    bottom: 12px;
    font-size: .8125rem;
    padding: .42rem .7rem;
    letter-spacing: .06em;
  }
}

/* 矮屏：让主图不至于太矮 */
@media (min-width: 720px) and (max-height: 620px) {
  .hero { min-height: 280px; }
  .hero__sub { display: none; }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .entry:hover, .entry:focus-visible { transform: none; }
}