/* Figma 节点 11011:575 / 11012:1767 — textbox 像素级还原 */
.textbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Figma 11012:1767 — 首页 hero：固定文案 + 可滚动按钮区 */
.home-hero.textbox {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
}

/* 文案固定在背景层，不随 .home-content 滚动 */
.home-background .home-hero__title.textbox--fixed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 40px 20px 0;
  pointer-events: none;
}

/* 滚动区占位：Figma 11012:1767 — py40 + title200 + gap60 → 按钮顶 y=300 */
.home-hero__scroll-anchor {
  flex-shrink: 0;
  width: 100%;
  height: 300px;
}

.home-hero__title,
.textbox__title-block {
  width: 100%;
  text-align: center;
}

/* Figma 11012:1769 — 行高 36px，段落无额外 margin */
.home-hero__title [data-node-id="11011:574"],
.textbox--fixed > .title > [data-node-id="11011:574"] {
  font-family: 'Lexend', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 0;
  color: #00ddff;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

.home-hero__title [data-node-id="11011:574"] p,
.textbox--fixed > .title > [data-node-id="11011:574"] p {
  margin: 0;
  line-height: 36px;
}

/* 固定区主文案（兼容旧结构） */
.textbox--fixed {
  position: relative;
  z-index: 2;
  gap: 20px;
  padding: 40px 20px 0;
  pointer-events: none;
}

.textbox--fixed > .title {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.textbox--fixed > .title > [data-node-id="11011:574"] {
  flex-shrink: 0;
  width: 100%;
  font-family: 'Lexend', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 0;
  color: #00ddff;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

.textbox--fixed > .title > [data-node-id="11011:574"] p {
  margin: 0;
  line-height: 36px;
}

/* 滚动区：副标题 + 按钮 */
.textbox--scroll {
  gap: 60px;
  padding: 0 20px;
}

.textbox__subtitle,
[data-node-id="11011:584"] {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  font-family: 'Lexend', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  color: #8800dd;
  text-align: center;
  word-break: break-word;
}

/* 按钮组：Figma 11012:1767 — gap 32px，宽 260px */
.textbox__btns,
.home-buttons.textbox__btns {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 32px;
  width: 260px;
  animation: none;
}

.textbox__btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 260px;
  height: 60px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  font-family: 'Lexend', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  color: #ffffff;
  white-space: nowrap;
  word-break: break-word;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

/* 主按钮 / Continue：#8800dd + 投影 */
.textbox__btn--start,
.textbox__btn--continue,
html.home-page-root .home-welcome-page .home-buttons .start-game-btn,
html.home-page-root .home-welcome-page .home-buttons .continue-btn {
  background: #8800dd;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 16px #8800dd;
  animation: none;
  transform: none;
  position: static;
  overflow: visible;
}

.textbox__btn--start:hover,
.textbox__btn--continue:hover,
html.home-page-root .home-welcome-page .home-buttons .start-game-btn:hover,
html.home-page-root .home-welcome-page .home-buttons .continue-btn:hover {
  background: #8800dd;
  opacity: 0.92;
  transform: none;
  box-shadow: 0 4px 16px #8800dd;
}

.textbox__btn--start:active,
.textbox__btn--continue:active,
html.home-page-root .home-welcome-page .home-buttons .start-game-btn:active,
html.home-page-root .home-welcome-page .home-buttons .continue-btn:active {
  transform: none;
  opacity: 0.88;
}

/* New Game：半透明白底 + 描边 + blur */
.textbox__btn--new,
html.home-page-root .home-welcome-page .home-buttons .new-game-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #ffffff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
  animation: none;
  transform: none;
}

.textbox__btn--new:hover,
html.home-page-root .home-welcome-page .home-buttons .new-game-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  transform: none;
  box-shadow: none;
}

.textbox__btn--new:active,
html.home-page-root .home-welcome-page .home-buttons .new-game-btn:active {
  transform: none;
  opacity: 0.9;
}

/* 覆盖 style.min.css 中 load-btn 默认样式 */
html.home-page-root .home-welcome-page .home-buttons .load-btn {
  width: 260px;
  height: 60px;
  padding: 0;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  animation: none;
}

.textbox__btn-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.textbox__btn-icon img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

@media (max-width: 768px) {
  .home-background .home-hero__title.textbox--fixed {
    padding: 32px 20px 0;
  }

  .home-hero__scroll-anchor {
    /* 窄屏文案多行换行，在 Figma 300 基础上按行高 32px 追加约 2 行余量 */
    height: 364px;
  }

  .home-hero.textbox {
    gap: 0;
    padding: 0;
  }

  .home-hero__title [data-node-id="11011:574"],
  .textbox--fixed > .title > [data-node-id="11011:574"] {
    font-size: 20px;
    line-height: 0;
  }

  .home-hero__title [data-node-id="11011:574"] p,
  .textbox--fixed > .title > [data-node-id="11011:574"] p {
    line-height: 32px;
  }

  .textbox__btns,
  .home-buttons.textbox__btns {
    width: 260px;
    max-width: calc(100vw - 40px);
    gap: 32px;
  }

  html.home-page-root .home-welcome-page .home-buttons .load-btn {
    width: 260px;
    max-width: calc(100vw - 40px);
  }
}