/* ========== 全局 ========== */
:root {
  --ink: #2b2620;
  --paper: #f5f1e8;
  --accent: #b03a2e;   /* 朱砂红 */
  --gold: #c9a227;
  --muted: #8a8273;
  --radius: 14px;
}

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

/* 手机端:去掉双击缩放延迟,按钮文字不可长按选中 */
button { touch-action: manipulation; user-select: none; -webkit-user-select: none; font-family: inherit; }

body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #e9e3d5;
  color: var(--ink);
  display: flex;
  justify-content: center;
  min-height: 100dvh;
}

.app {
  width: 100%;
  max-width: 430px;
  background: var(--paper);
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* ========== 屏幕切换(前进从右滑入,返回从左滑入) ========== */
.screen { display: none; min-height: 100dvh; }
.screen.active { display: block; }
/* 双保险:未激活的屏幕一律隐藏。!important 可压过任何 id 选择器
   (否则 #screen-cover 的 display:flex 会让封面永远显示,题目被挤到页面下方) */
.screen:not(.active) { display: none !important; }
.screen.active.slide-fwd { animation: slideFwd .4s ease; }
.screen.active.slide-back { animation: slideBack .4s ease; }

@keyframes slideFwd {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideBack {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}

/* ========== 封面 ========== */
#screen-cover {
  background:
    radial-gradient(circle at 20% 15%, rgba(201,162,39,.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(176,58,46,.16), transparent 50%),
    linear-gradient(160deg, #221d16 0%, #3a3025 100%);
  color: #f3ecdc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
  position: relative;
}

.cover-mark {
  position: absolute;
  top: 6%;
  right: -8%;
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 220px;
  color: rgba(243, 236, 220, .05);
  user-select: none;
  line-height: 1;
}

.cover-badge {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--gold);
  border: 1px solid rgba(201, 162, 39, .45);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.cover-title {
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 34px;
  line-height: 1.4;
  margin-bottom: 14px;
}
.cover-title span {
  display: block;
  background: linear-gradient(90deg, var(--gold), #e8c96a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cover-sub { font-size: 14px; color: rgba(243, 236, 220, .65); margin-bottom: 48px; }

.btn-primary {
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 6px;
  padding: 16px 58px;
  color: #221d16;
  background: linear-gradient(135deg, #e8c96a, var(--gold));
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(201, 162, 39, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(201, 162, 39, .45); }
.btn-primary:active { transform: scale(.97); }

/* ========== 答题页 ========== */
#screen-quiz { padding: 24px 22px 40px; }

.quiz-header { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }

.btn-back {
  width: 36px; height: 36px;
  border: 1px solid #d8cfba;
  background: #fff;
  border-radius: 50%;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.progress-track { flex: 1; height: 6px; background: #e3dccb; border-radius: 999px; overflow: hidden; }
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 999px;
  transition: width .35s ease;
}

.q-num { font-size: 13px; color: var(--accent); letter-spacing: 2px; margin-bottom: 10px; }

.q-text {
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 28px;
}

.q-options { display: flex; flex-direction: column; gap: 12px; }

.option {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  padding: 16px 18px;
  background: #fffdf8;
  border: 1px solid #e0d8c4;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  animation: optionIn .35s ease backwards;
}
.option:nth-child(2) { animation-delay: .05s; }
.option:nth-child(3) { animation-delay: .1s; }
.option:nth-child(4) { animation-delay: .15s; }

@keyframes optionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.option:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(176, 58, 46, .1); }
.option:active { transform: scale(.98); }

/* ========== 结果页 ========== */
#screen-result { padding: 32px 22px 48px; display: none; }
/* 用 auto margin 居中:内容超高一屏时不会像 justify-content:center 那样裁掉顶部 */
#screen-result.active { display: flex; flex-direction: column; align-items: center; }

.result-loading { font-size: 15px; color: var(--muted); letter-spacing: 2px; margin: auto 0; }
.dots::after {
  content: '...';
  animation: blink 1.2s steps(4) infinite;
}
@keyframes blink { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.result-card {
  width: 100%;
  margin: auto 0;
  border-radius: 22px;
  padding: 40px 26px 34px;
  text-align: center;
  color: #fff;
  box-shadow: 0 24px 60px rgba(43, 38, 32, .35);
  animation: popIn .5s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(30px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.result-eyebrow { font-size: 13px; letter-spacing: 3px; opacity: .75; margin-bottom: 16px; }

.result-title {
  font-size: 15px;
  letter-spacing: 5px;
  opacity: .9;
  margin-bottom: 6px;
  font-weight: normal;
}

.result-name {
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 52px;
  letter-spacing: 8px;
  margin-bottom: 18px;
}

.result-quote {
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 15px;
  font-style: italic;
  opacity: .85;
  margin-bottom: 22px;
}

.result-desc {
  font-size: 14px;
  line-height: 1.9;
  opacity: .95;
  text-align: left;
  margin-bottom: 24px;
}

.result-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.result-tags span {
  font-size: 12px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
}

.result-hint { font-size: 12px; opacity: .6; margin-bottom: 18px; }

.btn-restart {
  font-family: inherit;
  font-size: 15px;
  padding: 13px 44px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s ease;
}
.btn-restart:active { transform: scale(.96); }

/* ========== AI 专属解读 ========== */
.ai-block {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: left;
  margin-bottom: 24px;
}

.ai-label {
  font-size: 12px;
  letter-spacing: 3px;
  opacity: .85;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-label::before { content: '✦'; color: #ffd868; }

.ai-text { font-size: 13.5px; line-height: 1.9; min-height: 26px; }
.ai-text.loading { animation: pulse 1.2s ease-in-out infinite; }
.ai-text.typing::after { content: '▍'; animation: blink-cursor .8s steps(1) infinite; }

@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes blink-cursor { 50% { opacity: 0; } }