/* ============================================================
   64 卦抽签工具 - 样式表
   风格：简洁水墨 + 拟古竹简
   ============================================================ */

/* ---------- 字号五档（统一规范） ---------- */
/* 除"特殊(special)"外，所有文字必须引用以下四档之一，确保界面和谐。
   special 用于与卦象图强绑定的特殊排版文字，允许独立取值。 */
:root {
  --fs-sm: 16px;
  /* 小：版权、卦辞爻辞正文、说明 */
  --fs-md: 20px;
  /* 中：提示语、按钮、序号、说明屏文案 */
  --fs-lg: 24px;
  /* 大：屏标题、卦名主体 */
  --fs-xl: 48px;
  /* 特大：开始屏主标题、记录页标题（原 68px） */
}

/* ---------- 重置 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
    "SimSun", serif;
  color: #222;
  background-color: #f5f0e6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* ---------- 应用根容器 ---------- */
.appContainer {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f5f0e6;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120, 90, 60, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(80, 60, 40, 0.04) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
}

/* ---------- 屏幕切换 ---------- */
.screen {
  display: none;
  width: 100%;
  min-height: 100vh;
  padding: 32px 24px;
  animation: screenFadeIn 0.4s ease;
}

.screenActive {
  display: flex;
  flex-direction: column;
}

@keyframes screenFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.screenInner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 24px;
}

.screenTitle {
  font-size: var(--fs-lg);
  font-weight: normal;
  letter-spacing: 0.4em;
  color: #3a2f24;
  margin-bottom: 8px;
}

/* ---------- 开始屏 ---------- */
.startTitle {
  font-size: var(--fs-xl);
  font-weight: normal;
  letter-spacing: 0.2em;
  line-height: 1.3;
  color: #1a1a1a;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.startSeal {
  margin: 16px 0;
}

.taijiImage {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
}

/* ---------- 按钮 ---------- */
.inkButton {
  min-width: 200px;
  min-height: 48px;
  padding: 10px 28px;
  font-size: var(--fs-md);
  letter-spacing: 0.2em;
  color: #f5f0e6;
  background-color: #3a2f24;
  border: 1px solid #3a2f24;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.inkButton:active {
  transform: translateY(1px);
  background-color: #1a1a1a;
}

.inkButtonGhost {
  color: #3a2f24;
  background-color: transparent;
  border: 1px solid #3a2f24;
}

.inkButtonGhost:active {
  background-color: rgba(58, 47, 36, 0.08);
}

.inkButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 结果屏按钮容器：两行按钮，等宽（flex 弹性平分容器），自适应手机屏宽，不会溢出 */
.buttonRowPair {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  /* 撑满全宽，使左右按钮分别与上方彖传文字左/右对齐（screenInner 为 align-items:center） */
  width: 100%;
}

/* 两行之间间距收紧为 4px（原 8px 的一半），第一行距上方结果区保持 8px */
.buttonRowPair + .buttonRowPair {
  margin-top: 4px;
}

/* 两个按钮各占容器一半：flex:1 + min-width:0 允许收缩，替代原固定 200px（手机窄屏会溢出右侧） */
.buttonRowPair .inkButton {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- 竹筒抽签动画区 ---------- */
.bambooArea {
  width: 100%;
  max-width: 360px;
  height: 360px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 20px;
  overflow: visible;
}

/* 筒+签固定组合体：两者都 absolute 在此容器内，缩放/摇晃整体联动，永不分离 */
.tubeAssembly {
  width: 130px;
  height: 200px;
  position: relative;
  transform-origin: bottom center;
  z-index: 1;
}

/* 签子层（在竹筒下方，z-index 低） */
.sticksLayer {
  width: 130px;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* 竹筒（在签子上方，作为前壁挡住签子下半部分） */
.bambooTube {
  width: 130px;
  height: 150px;
  background: linear-gradient(to right,
      #8b5a2b 0%,
      #a0693a 25%,
      #c19060 50%,
      #a0693a 75%,
      #8b5a2b 100%);
  border-radius: 6px 6px 4px 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow:
    inset -10px 0 20px rgba(0, 0, 0, 0.35),
    inset 10px 0 20px rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.25);
  overflow: visible;
  z-index: 2;
}

/* 竹筒顶部横梁 (口沿) */
.bambooTube::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 14px;
  background: linear-gradient(to bottom,
      #5c3a1e 0%,
      #7a4e28 40%,
      #5c3a1e 100%);
  border-radius: 6px 6px 0 0;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

/* 竹筒底部 */
.bambooTube::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(to bottom,
      #7a4e28 0%,
      #5c3a1e 100%);
  border-radius: 4px;
  z-index: 3;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* 竹筒摇晃动画（作用在整体组合体上，筒和签一起摇晃，签子永不露出筒外） */
@keyframes shakeTube {
  0% {
    transform: rotate(0deg);
  }

  12% {
    transform: rotate(-5deg);
  }

  25% {
    transform: rotate(4deg);
  }

  38% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(2.5deg);
  }

  62% {
    transform: rotate(-1.5deg);
  }

  75% {
    transform: rotate(1deg);
  }

  88% {
    transform: rotate(-0.5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.tubeAssembly.shaking {
  animation: shakeTube 1.5s ease-in-out;
}

/* 竹筒内的竹签 */
.innerStick {
  width: 9px;
  height: 200px;
  background: linear-gradient(to right,
      #b8986a 0%,
      #d4b883 50%,
      #b8986a 100%);
  border-radius: 2px 2px 1px 1px;
  box-shadow:
    inset -1px 0 2px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  opacity: 1;
  z-index: 1;
}

/* 竹签顶部方形 */
.innerStick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to bottom, #c19060 0%, #a87840 100%);
  border-radius: 2px 2px 0 0;
}

/* 所有竹签在摇晃时的轻微跳动 */
@keyframes bounceSticks {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  20% {
    transform: translateY(-4px) rotate(-2deg);
  }

  40% {
    transform: translateY(-8px) rotate(1deg);
  }

  60% {
    transform: translateY(-5px) rotate(-1deg);
  }

  80% {
    transform: translateY(-2px) rotate(0.5deg);
  }
}

.innerStick.bouncing {
  animation: bounceSticks 0.4s ease-in-out infinite;
}

/* 被选中竹签的冒出动画 */
@keyframes popSelected {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-40px);
  }

  100% {
    transform: translateY(-30px);
  }
}

.innerStick.selected {
  z-index: 3;
  box-shadow:
    inset -1px 0 2px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.3);
  animation: popSelected 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- 经卦显示 ---------- */
.trigramSymbolLarge {
  font-size: clamp(96px, 30vw, 144px);
  color: #1a1a1a;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}

.trigramNameLarge {
  font-size: var(--fs-lg);
  font-weight: normal;
  letter-spacing: 0.4em;
  color: #3a2f24;
  text-align: center;
  padding-left: 0.4em;
}

/* ---------- 别卦解读屏 ---------- */
.hexagramSymbolLarge {
  font-size: clamp(96px, 28vw, 140px);
  color: #1a1a1a;
  line-height: 1;
  text-align: center;
  white-space: pre;
  letter-spacing: 0;
}

.hexagramHeaderLarge {
  font-size: var(--fs-lg);
  font-weight: normal;
  letter-spacing: 0.15em;
  color: #3a2f24;
  text-align: center;
  padding-left: 0.15em;
  margin-bottom: 0.3em;
}

/* 结果页顶部行：参考【我的记录】页 .recordHeader，卦名居中 + 右上角分享问号 */
.resultHeaderRow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

.resultHeaderRow .hexagramHeaderLarge {
  text-align: center;
  margin-bottom: 0;
}

/* 问号复用 .recordHelpCircle（absolute right:0 / top:50%），无需额外定位 */

/* 离线模拟结果提示：仅开发环境后端不可用时出现 */
.offline-notice {
  display: inline-block;
  margin-top: 0.4em;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  color: #a8331f;
}

.resultSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(58, 47, 36, 0.15);
}

.resultNoteSection {
  display: none;
}

.resultNoteSection.visible {
  display: flex;
}

.resultNoteSection .resultText {
  color: #3a2f24;
  background-color: rgba(165, 42, 42, 0.04);
  padding: 10px 12px;
  border-radius: 4px;
  text-indent: 0;
}

.resultSection .resultLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resultSection .resultLabel .noteEditBtn {
  font-size: var(--fs-sm);
  color: #8a7f74;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.resultSection .resultLabel .noteEditBtn:active {
  color: #3a2f24;
}

.noteEditor {
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.noteEditor.visible {
  display: flex;
}

.noteEditor textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid rgba(58, 47, 36, 0.25);
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: #3a2f24;
  background-color: rgba(255, 255, 255, 0.6);
  resize: vertical;
  box-sizing: border-box;
  text-indent: 0;
  line-height: 1.6;
}

.noteEditor textarea:focus {
  outline: none;
  border-color: rgba(165, 42, 42, 0.5);
}

.noteEditor .noteEditorMeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: #8a7f74;
}

.noteEditor .noteEditorButtons {
  display: flex;
  gap: 8px;
}

.noteEditor .noteEditorButtons button {
  font-size: var(--fs-sm);
  padding: 5px 14px;
  letter-spacing: 0.1em;
}

.resultLabel {
  font-size: var(--fs-md);
  letter-spacing: 0.4em;
  font-weight: 600;
  color: #5c3a21;
  padding-left: 0.4em;
}

.resultText {
  font-size: var(--fs-md);
  line-height: 1.8;
  color: #2a2a2a;
  text-align: justify;
  text-indent: 2em;
}

/* ---------- 我的记录屏 ---------- */
.recordScreenInner {
  align-items: stretch;
}

.recordHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

.recordTitle {
  font-size: calc(var(--fs-lg) + 4px);
  letter-spacing: 0.5em;
  color: #3a2f24;
  text-indent: 0.5em;
}

/* 圆圈问号（F2 说明气泡开关） */
.recordHelpCircle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(58, 47, 36, 0.4);
  color: #8a7f74;
  font-size: var(--fs-sm);
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  background: none;
  user-select: none;
}

.recordHelpCircle:active {
  background-color: rgba(58, 47, 36, 0.08);
}

/* 说明文本框：默认隐藏，.is-open 展开 */
.recordHelpText {
  display: none;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(58, 47, 36, 0.15);
  border-radius: 6px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: #3a2f24;
  text-align: justify;
  text-indent: 0;
}

.recordHelpText.is-open {
  display: block;
}

.recordCapacity {
  width: 100%;
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: #8a7f74;
  margin-bottom: 12px;
}

.recordList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
  padding: 2px;
}

.recordEmpty {
  text-align: center;
  color: #8a7f74;
  font-size: var(--fs-sm);
  padding: 40px 0;
  letter-spacing: 0.2em;
}

/* 记录卡片 */
.recordCard {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(58, 47, 36, 0.15);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recordCardHead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.recordSeq {
  font-size: var(--fs-md);
  font-weight: 600;
  color: #a52a2a;
  letter-spacing: 0.05em;
}

.recordBiegua {
  font-size: var(--fs-md);
  color: #3a2f24;
  letter-spacing: 0.2em;
}

.recordScopeTag {
  font-size: var(--fs-sm);
  color: #8a7f74;
  border: 1px solid rgba(58, 47, 36, 0.2);
  border-radius: 4px;
  padding: 0 0.4em;
  line-height: 1.5;
}

.recordSourceBadge {
  margin-left: auto;
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 0 0.5em;
  border-radius: 4px;
  letter-spacing: 0.1em;
}

.recordSourceBadge.is-local {
  color: #6b5d4a;
  background-color: rgba(58, 47, 36, 0.08);
}

.recordSourceBadge.is-account {
  color: #1d5b8f;
  background-color: rgba(29, 91, 143, 0.1);
}

.recordCardMeta {
  font-size: var(--fs-sm);
  color: #8a7f74;
}

.recordCardNote {
  font-size: var(--fs-sm);
  color: #3a2f24;
  line-height: 1.6;
  text-indent: 0;
  margin-top: 6px;
  padding: 8px 10px;
  background-color: rgba(255, 253, 247, 0.7);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 预览被截断时的折叠提示：纯文字，无淡化、无遮罩 */
.recordCardNote .noteFoldTail {
  color: #8a7f74;
}

.recordCardActions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.recordBtn {
  flex: 1;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  padding: 7px 0;
  border-radius: 4px;
  cursor: pointer;
  color: #a52a2a;
  background: none;
  border: 1px solid rgba(165, 42, 42, 0.3);
}

.recordBtn:active {
  background-color: rgba(165, 42, 42, 0.08);
}

.recordDelete {
  color: #a8331f;
  border-color: rgba(168, 51, 31, 0.35);
}

/* 回看结果屏顶部来源标记 */
.historySourceTag {
  display: inline-block;
  margin-top: 0.4em;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: #6b5d4a;
}

.recordFooter {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.recordFooter .inkButton {
  flex: 1;
}

/* ---------- 生成结果图 弹层 ---------- */
.modalOverlay {
  position: fixed;
  inset: 0;
  background-color: rgba(30, 22, 14, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}

.modalOverlay.hidden {
  display: none;
}

.modalPanel {
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  background-color: #f6efdd;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(58, 47, 36, 0.15);
}

.modalTitle {
  font-size: var(--fs-md);
  letter-spacing: 0.2em;
  color: #3a2f24;
}

.modalClose {
  font-size: 22px;
  line-height: 1;
  color: #8a7f74;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
}

.modalClose:active {
  color: #3a2f24;
}

.modalBody {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shareField {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shareFieldLabel {
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  color: #5c3a21;
}

/* 底色 switch：与下方「查看详情/再摇一卦」按钮同长宽高，选中即切换 */
.tplSwitch {
  display: flex;
  gap: 10px;
}

.tplOpt {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 28px;
  font-size: var(--fs-md);
  letter-spacing: 0.2em;
  color: #5c3a21;
  background-color: #fff;
  border: 1px solid #5c3a21;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tplOpt.is-on {
  color: #fff;
  background-color: #5c3a21;
  border-color: #5c3a21;
}

.tplOpt:active {
  transform: scale(0.98);
}

.elemGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.elemCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  border: 1.5px solid #cdbfa6;
  border-radius: 10px;
  background: #faf6ec;
  color: #6b6256;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.elemCell.is-on {
  border-color: #5c3a21;
  background: #5c3a21;
  color: #fff;
}

.elemLabel {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.15em;
}

.elemSlot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px dashed #b6a684;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  color: #8a7a5f;
}

.elemCell.is-on .elemSlot {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.elemHint {
  font-size: var(--fs-sm);
  color: #8a7a5f;
  letter-spacing: 0.05em;
  min-height: 18px;
}

.sharePreviewWrap {
  margin-top: 4px;
  background-color: rgba(58, 47, 36, 0.06);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  justify-content: center;
}

#sharePreviewCanvas {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.modalFooter {
  padding: 14px 16px;
  border-top: 1px solid rgba(58, 47, 36, 0.15);
}

.modalFooter .inkButton {
  width: 100%;
}

/* 备注弹层：确认/取消一行左右分布，与文本框留间距 */
.noteModalPanel .modalFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.noteModalPanel .modalFooter .inkButton {
  width: auto;
  flex: 1 1 0;
}

/* 备注弹层：比分享弹层稍大，含文本框与字数统计 */
.noteModalPanel {
  max-width: 480px;
}

.noteTextarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
  padding: 12px 14px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: #3a2f24;
  background-color: #fffdf7;
  border: 1px solid rgba(58, 47, 36, 0.25);
  border-radius: 6px;
  outline: none;
}

.noteTextarea:focus {
  border-color: #8c6f4a;
}

.noteCounter {
  align-self: flex-end;
  font-size: var(--fs-sm);
  color: #8a7f74;
}

.noteCounter.is-over {
  color: #c0392b;
  font-weight: 600;
}

/* ---------- 轻提示 ---------- */
.shareToast {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) translateY(10px);
  background-color: rgba(30, 22, 14, 0.92);
  color: #f6efdd;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  padding: 10px 18px;
  border-radius: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 60;
  max-width: 80vw;
  text-align: center;
}

.shareToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 说明屏（intro1 / intro2） ---------- */
.introScreen {
  background-color: #f4ecd9;
  /* 与其他屏一致的米黄背景 */
  height: 100vh;
  /* 固定一屏高：说明屏1文字区在屏内滚动，不撑高整页 */
  overflow: hidden;
}

.introInner {
  justify-content: center;
  gap: 40px;
  padding: 48px 32px;
  height: 100%;
}

.introText {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

/* 说明屏1：文字区占满剩余空间，内容超高时屏内滚动（滚到底再上滑才翻页） */
#screenIntro1 .introText {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.introText p {
  font-size: var(--fs-md);
  /* 说明屏文案：中档 20px（原大档 24px 在手机屏最长句被迫换行，分行效果差） */
  color: #3a2f24;
  /* 与其他屏一致的深棕字色 */
  line-height: 1.6;
  letter-spacing: 0.18em;
  margin: 0;
}

/* 闪烁的白色大向上箭头（点击/上滑进入说明屏2） */
/* 默认弱化：文字滚动到底后 .atBottom 亮起闪烁，提示"可以上滑翻页了" */
.introArrow {
  font-size: 120px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}

.introArrow.atBottom {
  opacity: 1;
  animation: introArrowBlink 1.4s ease-in-out infinite;
}

.introArrow:active {
  opacity: 0.6;
}

@keyframes introArrowBlink {

  0%,
  100% {
    opacity: 0.25;
    transform: translateY(4px);
  }

  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* ---------- 适配 ---------- */
@media (max-width: 360px) {
  .screen {
    padding: 24px 16px;
  }

  .inkButton {
    min-width: 180px;
  }
}

@media (min-width: 768px) {
  .appContainer {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  }
}

/* 记录页容量文案（多行：当前记录数 + 分线统计） */
.recordCapacity {
  text-align: center;
  color: #6b5d4f;
  font-size: var(--fs-sm);
  margin: 6px 0 12px;
  line-height: 1.5;
  white-space: pre-line;
}

/* ---------- 登录（shunxun 统一账号） ---------- */
.hidden {
  display: none !important;
}

/* 顶部登录状态条（fixed 悬浮，不占布局） */
.authBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(245, 240, 230, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(139, 107, 61, 0.15);
  box-sizing: border-box;
}
.authStatus {
  font-size: 12px;
  color: #8a8378;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.authBtn {
  padding: 5px 14px;
  border: 1px solid #8b6b3d;
  border-radius: 16px;
  background: #8b6b3d;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  flex: 0 0 auto;
}
.authBtnGhost {
  background: transparent;
  color: #5a5348;
  border-color: #c9c2b4;
}
.authBtn:active {
  opacity: 0.8;
}

/* 登录弹层 */
.authModalPanel {
  width: min(92vw, 380px);
}
.authModeTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.authModeTab {
  flex: 1;
  padding: 8px 0;
  border: 1px solid #d8d2c6;
  border-radius: 8px;
  background: #faf8f4;
  color: #5a5348;
  font-size: 14px;
  cursor: pointer;
}
.authModeTab.is-on {
  background: #8b6b3d;
  border-color: #8b6b3d;
  color: #fff;
}
.authInput {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #d8d2c6;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  color: #2f2a22;
  outline: none;
}
.authInput:focus {
  border-color: #8b6b3d;
}
.authMsg {
  min-height: 18px;
  font-size: 12px;
  color: #a05050;
  margin-bottom: 6px;
}
.authSubmit {
  width: 100%;
}
.authTip {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: #8a8378;
}