/* ============================================================
   心岛 v1.0 · 屏 -2 · 标题（B01 标题海域）
   ------------------------------------------------------------
   按 01-运行素材与定位清单 §1「画面分区」：
     - B01 整景 = 2560×1440 contain 铺底
     - 文案 / 按钮：水平居中，垂直 30%（画面下方）
   ============================================================ */

.s-title {
  background-color: var(--ink-deeper, #1d262e);
}

.s-title-content {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, 0);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--paper, #f7f1e3);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  pointer-events: none;   /* 子元素再开 */
  width: 90%;
  max-width: 720px;
}
.s-title-content > * { pointer-events: auto; }

.s-title-logo {
  font-family: var(--font-display, "ZCOOL KuaiLe", sans-serif);
  font-size: 96px;
  letter-spacing: 0.18em;
  margin: 0 0 8px 0;
  color: var(--paper, #f7f1e3);
  line-height: 1.1;
}
.s-title-subtitle {
  font-family: var(--font-body, "Noto Serif SC", serif);
  font-size: 18px;
  letter-spacing: 0.18em;
  color: rgba(247, 241, 227, 0.85);
  margin: 0 0 36px 0;
}

.s-title-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.s-title-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 32px;
  border: 0;
  border-radius: 6px;
  background: rgba(247, 241, 227, 0.92);
  color: var(--ink-deep, #3f4e5a);
  font-family: var(--font-body, "Noto Serif SC", serif);
  font-size: 18px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--t-quick, 180ms) var(--e-out, ease),
              transform var(--t-quick, 180ms) var(--e-out, ease);
  min-width: 160px;
}
.s-title-btn:hover,
.s-title-btn:focus-visible {
  background: var(--paper, #f7f1e3);
  transform: translateY(-2px);
  outline: none;
}
.s-title-btn:active { transform: translateY(0); }
.s-title-btn--primary {
  background: var(--light, #d4a574);
  color: var(--ink, #1d262e);
  font-weight: 500;
}
.s-title-btn--primary:hover,
.s-title-btn--primary:focus-visible {
  background: #e6b687;
}
.s-title-btn-hint {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-shadow, rgba(0,0,0,0.5));
  font-weight: 400;
}

/* 关于按钮（角落） */
.s-title-menu {
  position: fixed;
  top: var(--sp-3, 16px);
  right: var(--sp-3, 16px);
  z-index: 90;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 241, 227, 0.18);
  color: var(--paper, #f7f1e3);
  font-family: var(--font-body, "Noto Serif SC", serif);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--t-quick, 180ms) var(--e-out, ease);
}
.s-title-menu:hover,
.s-title-menu:focus-visible {
  background: rgba(247, 241, 227, 0.32);
  outline: none;
}

@media (max-width: 720px) {
  .s-title-logo { font-size: 64px; }
  .s-title-subtitle { font-size: 14px; }
  .s-title-btn { font-size: 16px; padding: 10px 24px; min-width: 130px; }
}