/* =========================================
   国风 3D 交互按钮样式 (button.css)
   ========================================= */
.button {
  /* 重新定义国风色彩变量 */
  --page-bg: #f7f6f2;      /* 宣纸白：必须和网页背景色完全一致，用于隐藏外轮廓 */
  --ink-dark: #333333;     /* 水墨黑：用于立体的阴影和边框 */
  --stone-green: #7b8b6f;  /* 石绿色：页面的主题色，作为按钮主体 */

  font-size: 1rem;
  cursor: pointer;
  position: relative;
  /* 改用网页统一的传统衬线字体 */
  font-family: "Noto Serif SC", "SimSun", "Songti SC", serif;
  font-weight: bold;
  line-height: 1;
  padding: 1px;
  transform: translate(-4px, -4px);
  outline: 2px solid transparent;
  outline-offset: 5px;
  /* 将 9999px 改为 8px，呈现古代牌匾的方正感 */
  border-radius: 8px; 
  background-color: var(--ink-dark);
  color: #ffffff; /* 字体改为白色，在石绿色上更清晰 */
  transition: transform 150ms ease, box-shadow 150ms ease;
  text-align: center;
  /* 阴影层叠，颜色替换为水墨黑与宣纸白 */
  box-shadow:
    0.5px 0.5px 0 0 var(--ink-dark),
    1px 1px 0 0 var(--ink-dark),
    1.5px 1.5px 0 0 var(--ink-dark),
    2px 2px 0 0 var(--ink-dark),
    2.5px 2.5px 0 0 var(--ink-dark),
    3px 3px 0 0 var(--ink-dark),
    0 0 0 2px var(--page-bg),
    0.5px 0.5px 0 2px var(--page-bg),
    1px 1px 0 2px var(--page-bg),
    1.5px 1.5px 0 2px var(--page-bg),
    2px 2px 0 2px var(--page-bg),
    2.5px 2.5px 0 2px var(--page-bg),
    3px 3px 0 2px var(--page-bg),
    3.5px 3.5px 0 2px var(--page-bg),
    4px 4px 0 2px var(--page-bg);
  /* 清除默认的 button 边框 */
  border: none; 
}

.button:hover {
  transform: translate(0, 0);
  box-shadow: 0 0 0 2px var(--page-bg);
}

.button:active,
.button:focus-visible {
  outline-color: var(--stone-green);
}

.button:focus-visible {
  outline-style: dashed;
}

/* 按钮内部容器 */
.button > div {
  position: relative;
  pointer-events: none;
  background-color: var(--stone-green);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px; /* 同步改为 8px */
}

/* 动态波点背景纹理 (调低了透明度，使其像宣纸上的暗纹) */
.button > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  opacity: 0.15; /* 透明度降低，更加含蓄 */
  background-image: 
    radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%),
    radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
  mix-blend-mode: hard-light;
  animation: dots 0.8s infinite linear; /* 稍微放慢动画速度，更显稳重 */
}

/* 文本容器 */
.button > div > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  gap: 0.25rem;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2)); /* 阴影调暗，适配白字 */
}

.button > div > span:active {
  transform: translateY(2px);
}

@keyframes dots {
  0% { background-position: 0 0, 4px 4px; }
  100% { background-position: 8px 0, 12px 4px; }
}