/* =========================================================
   幻想乡相性测试
   Japanese Wa-style Mobile UI v1.0
   ========================================================= */


/* =========================================================
   01. 色彩变量
   ========================================================= */

:root {

  /* 和纸 */
  --paper: #fffaf1;
  --paper-light: #fffdf8;
  --paper-deep: #f7eee2;

  /* 墨色 */
  --ink: #3f3935;
  --ink-soft: #665e58;
  --ink-light: #8b8179;

  /* 朱红 */
  --red: #c65353;
  --red-dark: #9e4247;
  --red-light: #e8b5ae;

  /* 樱粉 */
  --sakura: #efd7d2;
  --sakura-light: #faece9;

  /* 金 */
  --gold: #c3a064;
  --gold-light: #e8d7b5;

  /* 靛青 */
  --indigo: #586a7c;

  /* 阴影 */
  --shadow-soft:
    0 8px 25px rgba(72, 55, 45, 0.07);

  --shadow-card:
    0 10px 30px rgba(72, 55, 45, 0.08);

  /* 圆角 */
  --radius-card: 20px;
  --radius-button: 15px;
}


/* =========================================================
   02. 基础
   ========================================================= */

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;

  background:
    #f7efe5;
}


body {

  margin: 0;
  padding: 0;

  min-height: 100vh;
  min-height: 100svh;

  color: var(--ink);

  font-family:
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    sans-serif;

  /*
    暂时不用图片。

    用淡淡的和纸色 + 樱粉 + 靛青
    制造日式卡通背景。
  */
  background:

    radial-gradient(
      circle at 12% 7%,
      rgba(234, 190, 181, 0.26),
      transparent 25%
    ),

    radial-gradient(
      circle at 88% 17%,
      rgba(119, 137, 158, 0.13),
      transparent 27%
    ),

    radial-gradient(
      circle at 50% 105%,
      rgba(219, 180, 145, 0.14),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      #fffaf2 0%,
      #fcf6ee 55%,
      #f8f1e8 100%
    );

  display: flex;

  justify-content: center;
  align-items: flex-start;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}


/*
  非常淡的纸纹。

  不使用图片也能让背景不那么“网页白”。
*/
body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: 0.32;

  background-image:

    repeating-linear-gradient(
      0deg,
      rgba(110, 85, 65, 0.018) 0px,
      rgba(110, 85, 65, 0.018) 1px,
      transparent 1px,
      transparent 4px
    );

  z-index: 0;
}


/* =========================================================
   03. 三个主要页面
   ========================================================= */

#start-screen,
#quiz-screen,
#result-screen {

  width: calc(100% - 28px);

  max-width: 560px;

  margin:
    18px
    auto
    42px;

  position: relative;

  z-index: 1;
}


/* =========================================================
   04. 隐藏
   ========================================================= */

.hidden {
  display: none !important;
}


/* =========================================================
   05. 字体基础层级
   ========================================================= */

h1,
h2,
h3,
p {
  margin-top: 0;
}


/*
  标题偏“日式菜单 / 鉴定书”。

  用 Serif 作为系统字体 fallback，
  不依赖额外字体文件。
*/
h1 {

  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "SimSun",
    serif;

  color: var(--ink);

  font-size: 26px;

  line-height: 1.4;

  font-weight: 700;

  letter-spacing: 0.08em;

  margin-bottom: 14px;
}


h2 {

  color: var(--ink);

  font-size: 18px;

  line-height: 1.75;

  font-weight: 600;
}


h3 {

  color: var(--ink-soft);

  font-size: 15px;

  line-height: 1.75;

  font-weight: 600;
}


p {

  color: var(--ink-soft);

  font-size: 14px;

  line-height: 1.9;
}


/* =========================================================
   06. 通用按钮
   ========================================================= */

button {

  font-family: inherit;

  border: 0;

  outline: 0;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    opacity 0.16s ease;
}


button:active {

  transform:
    scale(0.985);
}


/* =========================================================
   07. 开始页面
   ========================================================= */

#start-screen {

  min-height:
    calc(100svh - 36px);

  padding:
    48px
    25px
    46px;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  overflow: hidden;

  border-radius: 28px;

  background:

    linear-gradient(
      160deg,
      rgba(255, 253, 247, 0.92),
      rgba(255, 248, 240, 0.88)
    );

  border:
    1px solid
    rgba(156, 107, 88, 0.13);

  box-shadow:
    0 14px 42px rgba(78, 58, 46, 0.08);
}


/*
  开始页背后的“日轮”
*/
#start-screen::before {

  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  top: -108px;
  right: -92px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(198, 83, 83, 0.11) 0%,
      rgba(198, 83, 83, 0.065) 52%,
      transparent 53%
    );

  pointer-events: none;
}


/*
  左下淡靛青圆形装饰
*/
#start-screen::after {

  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  left: -80px;
  bottom: -68px;

  border-radius: 50%;

  background:
    rgba(88, 106, 124, 0.06);

  pointer-events: none;
}


/* 开始页标题 */

#start-screen h1 {

  position: relative;

  margin:
    0
    0
    17px;

  font-size: 29px;

  line-height: 1.5;

  letter-spacing: 0.15em;

  color: #473c38;

  text-shadow:
    0 2px 0
    rgba(255,255,255,0.9);
}


/*
  标题上方的小樱花印记
*/
#start-screen h1::before {

  content: "❀";

  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-family: serif;

  font-size: 22px;

  line-height: 1;

  font-weight: 400;

  opacity: 0.82;
}


/*
  标题下面的小红线
*/
#start-screen h1::after {

  content: "";

  display: block;

  width: 42px;
  height: 2px;

  margin:
    17px
    auto
    0;

  border-radius: 99px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red),
      transparent
    );

  opacity: 0.72;
}


#start-screen p {

  max-width: 280px;

  margin:
    0
    0
    35px;

  font-size: 13.5px;

  line-height: 1.9;

  letter-spacing: 0.03em;

  color: var(--ink-light);
}


/* =========================================================
   08. 开始按钮
   ========================================================= */

#start-button {

  width: min(100%, 270px);

  min-height: 51px;

  padding:
    13px
    20px;

  border-radius: 14px;

  color: #fffaf4;

  background:

    linear-gradient(
      135deg,
      #cd5b59 0%,
      #ba4c50 48%,
      #a9444a 100%
    );

  box-shadow:

    0 8px 18px
    rgba(148, 61, 66, 0.18),

    inset
    0
    1px
    0
    rgba(255,255,255,0.28);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.16em;

  position: relative;
}


#start-button::before {

  content: "◇";

  margin-right: 9px;

  font-family: serif;

  font-weight: 400;

  opacity: 0.9;
}


#start-button:hover {

  transform:
    translateY(-1px);

  box-shadow:

    0 10px 22px
    rgba(148, 61, 66, 0.24),

    inset
    0
    1px
    0
    rgba(255,255,255,0.3);
}

#open-collection-button {
  margin-top: 17px;
  padding: 7px 4px 5px;
  color: rgba(91, 76, 68, 0.72);
  border-bottom: 1px solid rgba(139, 108, 91, 0.24);
  background: transparent;
  font-size: 12.5px;
  letter-spacing: 0.12em;
}

#open-collection-button::before {
  content: "▦";
  margin-right: 7px;
  color: var(--red-dark);
  opacity: 0.72;
}

#open-collection-button:hover {
  color: var(--red-dark);
  border-bottom-color: rgba(169, 68, 74, 0.42);
  transform: translateY(-1px);
}


/* =========================================================
   09. 答题页面
   ========================================================= */

#quiz-screen {

  padding:
    23px
    3px
    225px;
}


/* =========================================================
   10. 进度
   ========================================================= */

#progress {

  margin:
    0
    5px
    30px;

  padding-bottom: 13px;

  position: relative;

  color: var(--red-dark);

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size: 11px;

  line-height: 1;

  font-weight: 600;

  letter-spacing: 0.12em;

  opacity: 0.82;
}


/*
  下面一根很细的朱红线
*/
#progress::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 54px;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--red),
      rgba(198,83,83,0.15)
    );
}


/* =========================================================
   11. 问题
   ========================================================= */

#question {

  margin:
    0
    7px
    38px;

  color: var(--ink);

  /*
    重点：
    不再像网页大标题。
  */
  font-size: 17px;

  line-height: 1.92;

  font-weight: 550;

  letter-spacing: 0.018em;

  text-align: left;

  text-wrap: pretty;

  white-space: pre-line;
}


/*
  问题最前面放一个淡红色竖线，
  有点像和风书页 / 台词框。
*/
#question::before {

  content: "";

  display: inline-block;

  width: 3px;
  height: 17px;

  margin-right: 11px;

  vertical-align: -2px;

  border-radius: 99px;

  background:
    var(--red);

  opacity: 0.62;
}


/* =========================================================
   12. 答案区
   ========================================================= */

#answers {

  display: flex;

  flex-direction: column;

  gap: 12px;

  width: 100%;

  margin-top: 0;
}


/* =========================================================
   13. 普通选项
   ========================================================= */

.answer-button {

  width: 100%;

  min-height: 0;

  margin: 0;

  padding:
    13px
    15px;

  position: relative;

  overflow: hidden;

  border-radius:
    var(--radius-button);

  color:
    #554d48;

  /*
    和纸卡片
  */
  background:

    linear-gradient(
      145deg,
      rgba(255,253,247,0.97),
      rgba(252,246,238,0.94)
    );

  border:

    1px solid
    rgba(137, 98, 78, 0.14);

  box-shadow:

    0 4px 13px
    rgba(84, 62, 49, 0.05);

  font-size:
    14px;

  line-height:
    1.7;

  font-weight:
    400;

  letter-spacing:
    0.005em;

  text-align:
    left;

display: flex;
align-items: flex-start;
}


/*
  左侧的小菱形
*/

.answer-button::before {

  content: "";

  display: inline-block;

  width: 14px;
  height: 14px;

  margin-right: 10px;
  margin-top: 4px;

  flex-shrink: 0;

  border-radius: 50%;

  background:

    radial-gradient(
      circle at 50% 25%,
      #fffaf1 0 12%,
      var(--red) 13% 25%,
      transparent 26%
    ),

    radial-gradient(
      circle at 50% 75%,
      var(--red) 0 12%,
      #fffaf1 13% 25%,
      transparent 26%
    ),

    linear-gradient(
      90deg,
      var(--red) 0 50%,
      #fffaf1 50% 100%
    );

  border:
    1px solid
    rgba(198, 83, 83, 0.42);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.42) inset;

  opacity: 0.82;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


/* hover */

.answer-button:hover {

  border-color:
    rgba(174, 76, 76, 0.28);

  background:

    linear-gradient(
      145deg,
      #fffdf8,
      #fdf4eb
    );

  box-shadow:

    0 7px 19px
    rgba(87, 62, 47, 0.08);

  transform:
    translateY(-1px);
}


/* =========================================================
   14. 多选：选中
   ========================================================= */

.answer-button.selected {

  color:
    #493f3b;

  background:

    linear-gradient(
      135deg,
      #fff8f3 0%,
      #fcebe8 100%
    );

  border:

    1px solid
    rgba(186, 75, 78, 0.46);

  box-shadow:

    0 6px 18px
    rgba(157, 73, 74, 0.10);

  outline: none;

  transform: none;
}


.answer-button.selected::before {

  opacity: 1;

  transform: rotate(180deg) scale(1.06);

  border-color:
    rgba(158, 66, 71, 0.58);

  box-shadow:
    0 0 8px rgba(198, 83, 83, 0.18),
    0 0 0 1px rgba(255,255,255,0.55) inset;
}


.answer-button.selected::after {

  background:
    var(--red);

  opacity:
    0.45;
}


/* =========================================================
   15. 多选提示
   ========================================================= */

.multi-info {

  margin:
    -9px
    5px
    5px;

  color:
    var(--ink-light);

  font-size:
    11.5px;

  line-height:
    1.6;

  font-weight:
    500;

  letter-spacing:
    0.03em;
}


/* =========================================================
   16. 多选确认按钮
   ========================================================= */

.multi-confirm-button {

  width:
    100%;

  min-height:
    48px;

  margin-top:
    14px;

  padding:
    12px
    16px;

  border-radius:
    14px;

  color:
    #fffaf5;

  background:

    linear-gradient(
      135deg,
      #c75857,
      #a94348
    );

  box-shadow:

    0 7px 16px
    rgba(146, 61, 64, 0.16);

  font-size:
    13.5px;

  font-weight:
    700;

  letter-spacing:
    0.12em;
}


.multi-confirm-button::before {

  content: "✓";

  margin-right:
    8px;
}


.multi-confirm-button:disabled {

  opacity:
    0.32;

  cursor:
    default;

  box-shadow:
    none;
}


/* =========================================================
   17. 结果页面
   ========================================================= */

#result-screen {

  padding:
    25px
    2px
    60px;
}


/* 结果总标题 */

#result-screen > h1 {

  margin:
    5px
    0
    31px;

  text-align:
    center;

  color:
    #473d38;

  font-size:
    24px;

  letter-spacing:
    0.15em;
}


#result-screen > h1::before {

  content:
    "❀";

  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--red);

  font-family:
    serif;

  font-size:
    18px;

  font-weight:
    400;
}


#result-screen > h1::after {

  content:
    "";

  display:
    block;

  width:
    44px;

  height:
    2px;

  margin:
    15px
    auto
    0;

  border-radius:
    99px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--red),
      transparent
    );
}


/* =========================================================
   18. 结果卡片公共
   ========================================================= */

#result-screen section {

  margin-bottom:
    17px;

  padding:
    21px
    18px;

  border-radius:
    19px;

  background:

    linear-gradient(
      155deg,
      rgba(255,253,247,0.94),
      rgba(250,244,235,0.90)
    );

  border:

    1px solid
    rgba(138, 99, 80, 0.14);

  box-shadow:
    var(--shadow-soft);

  position:
    relative;

  overflow:
    hidden;
}


/*
  角落淡淡的圆形印章效果
*/
#result-screen section::after {

  content:
    "縁";

  position:
    absolute;

  right:
    -8px;

  bottom:
    -19px;

  color:
    rgba(174, 70, 73, 0.055);

  font-family:
    "Songti SC",
    serif;

  font-size:
    78px;

  line-height:
    1;

  font-weight:
    700;

  pointer-events:
    none;
}


/* =========================================================
   19. 第一名
   ========================================================= */

#result-screen section:first-of-type {

  padding:
    27px
    20px
    25px;

  text-align:
    left;

  border:

    1px solid
    rgba(177, 76, 73, 0.23);

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(213, 118, 105, 0.12),
      transparent 32%
    ),

    linear-gradient(
      160deg,
      rgba(255,253,248,0.98),
      rgba(252,242,235,0.97)
    );

  box-shadow:
    var(--shadow-card);
}


/*
  最适合你
*/
#result-screen section:first-of-type > h2:first-child {

  margin-bottom:
    12px;

  color:
    var(--red-dark);

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    700;

  letter-spacing:
    0.12em;
}


/*
  第一名名字
*/
#result-screen section:first-of-type > h1 {

  margin:
    3px
    0
    9px;

  color:
    #493c38;

  font-size:
    27px;

  letter-spacing:
    0.10em;
}


/*
  第一名百分比
*/
#result-screen section:first-of-type > h2:nth-of-type(2) {

  width:
    fit-content;

  margin:
    0
    0
    19px;

  padding:
    5px
    10px;

  color:
    #a14447;

  background:
    rgba(199, 83, 83, 0.08);

  border-radius:
    999px;

  font-size:
    13px;

  line-height:
    1.4;

  font-weight:
    700;

  letter-spacing:
    0.05em;
}


/*
  结局标题
*/
#result-screen section:first-of-type h3 {

  margin:
    17px
    0
    19px;

  padding:
    11px
    13px;

  border-top:

    1px solid
    rgba(190, 147, 99, 0.25);

  border-bottom:

    1px solid
    rgba(190, 147, 99, 0.25);

  color:
    #6c5546;

  background:
    rgba(226, 205, 171, 0.08);

  text-align:
    center;

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size:
    14px;

  font-weight:
    600;

  letter-spacing:
    0.07em;
}


/* =========================================================
   20. 结果正文
   ========================================================= */

#result-screen section p {

  margin:
    0
    0
    16px;

  position:
    relative;

  z-index:
    1;

  color:
    #655c56;

  font-size:
    13.5px;

  line-height:
    1.95;

  letter-spacing:
    0.01em;
}


#result-screen section p:last-child {

  margin-bottom:
    0;
}


#result-screen strong {

  color:
    #50433f;

  font-weight:
    700;
}


/* =========================================================
   21. 第二名 / 最不合
   ========================================================= */

#result-screen section:not(:first-of-type) h2 {

  margin-bottom:
    9px;
}


#result-screen section:not(:first-of-type) h2:first-child {

  color:
    var(--ink-light);

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.08em;
}


#result-screen section:not(:first-of-type) h2:nth-child(2) {

  color:
    #4e4540;

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size:
    20px;

  font-weight:
    700;
}


/* 最不合的最大冲突 */

#result-screen section h3 {

  margin:
    14px
    0
    11px;

  color:
    var(--red-dark);

  font-size:
    13px;
}


/* =========================================================
   22. 去掉旧的横线
   ========================================================= */

#result-screen > hr {

  display:
    none;
}


/* =========================================================
   23. 调试数据
   ========================================================= */

#result-screen details {

  margin-top:
    27px;

  padding:
    15px
    15px;

  border-radius:
    13px;

  border:

    1px dashed
    rgba(112, 91, 77, 0.20);

  background:
    rgba(255,252,246,0.52);

  color:
    var(--ink-light);
}


#result-screen summary {

  cursor:
    pointer;

  color:
    #8c8179;

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    600;

  letter-spacing:
    0.05em;
}


#result-screen details p {

  margin:
    7px
    0;

  color:
    #958a82;

  font-size:
    10.5px;

  line-height:
    1.65;
}


#result-screen details hr {

  margin:
    14px
    0;

  border:
    0;

  border-top:

    1px solid
    rgba(110, 91, 78, 0.12);
}


/* =========================================================
   23.1 开发者署名与分享纪念
   ========================================================= */

.developer-share-card {
  margin: 14px 0 16px;
  padding: 14px;
  border: 1px solid rgba(169, 68, 74, 0.13);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 252, 246, 0.82),
      rgba(199, 75, 82, 0.045)
    );
}

#result-screen details .developer-share-title {
  margin: 0 0 3px;
  color: var(--red-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

#result-screen details .developer-share-author {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#result-screen details .developer-share-copy {
  margin-bottom: 5px;
}

#result-screen details .developer-share-hint {
  margin: 0 0 12px;
  color: rgba(132, 119, 110, 0.72);
  font-size: 9.5px;
}

.share-project-button {
  width: auto;
  min-height: 38px;
  padding: 9px 17px;
  border: 0;
  border-radius: 10px;
  color: #fffaf4;
  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-dark)
    );
  box-shadow: 0 5px 13px rgba(146, 50, 57, 0.15);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  cursor: pointer;
}

.share-project-button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.share-project-link {
  display: block;
  margin-top: 9px;
  overflow-wrap: anywhere;
  color: rgba(153, 76, 78, 0.72);
  font-size: 9.5px;
  line-height: 1.55;
  text-decoration: none;
}

#result-screen details .share-project-status {
  min-height: 17px;
  margin: 8px 0 0;
  color: #8c8179;
}

#result-screen details .share-project-status[data-state="success"] {
  color: #9f474d;
}

#result-screen details .share-project-status[data-state="error"] {
  color: #aa514d;
}

.share-reward-frame {
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(255, 253, 247, 0.96),
      rgba(222, 201, 179, 0.48)
    );
}

.share-reward-seal {
  width: 67%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 4px;
  position: relative;
  color: rgba(164, 54, 62, 0.9);
  border: 3px double rgba(164, 54, 62, 0.76);
  border-radius: 50%;
  transform: rotate(-5deg);
  box-shadow:
    inset 0 0 0 5px rgba(255, 252, 246, 0.65),
    0 5px 13px rgba(122, 68, 55, 0.09);
}

.share-reward-seal::before,
.share-reward-seal::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(164, 54, 62, 0.42);
  border-radius: 50%;
}

.share-reward-seal::after {
  inset: 17%;
  border-style: dashed;
  opacity: 0.55;
}

.share-reward-seal span,
.share-reward-seal small {
  position: relative;
  z-index: 1;
  text-align: center;
}

.share-reward-seal span {
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(15px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
}

.share-reward-seal small {
  font-size: clamp(6px, 0.75vw, 9px);
  letter-spacing: 0.12em;
}

.share-reward-card.is-locked .share-reward-seal {
  color: rgba(91, 82, 76, 0.3);
  border-color: rgba(91, 82, 76, 0.25);
  filter: grayscale(1);
  opacity: 0.42;
}

.share-reward-note {
  margin: 8px 4px 0;
  color: rgba(117, 101, 91, 0.72);
  font-size: 9px;
  line-height: 1.55;
}

@media (max-width: 520px) {
  .share-project-button {
    width: 100%;
  }

  .share-reward-seal span {
    font-size: 14px;
  }

  .share-reward-note {
    font-size: 8.5px;
  }
}


/* =========================================================
   24. 手机端
   ========================================================= */

@media (max-width: 480px) {


  #start-screen,
  #quiz-screen,
  #result-screen {

    width:
      calc(100% - 28px);
  }


  /* -----------------
     开始页
     ----------------- */

  #start-screen {

    margin-top:
      18px;

    padding:
      42px
      23px;

    min-height:
      calc(100svh - 36px);
  }


  #start-screen h1 {

    font-size:
      27px;
  }


  /* -----------------
     答题
     ----------------- */

  #quiz-screen {

    margin-top:
      0;

    padding-top:
      23px;
  }


  #progress {

    margin-bottom:
      30px;
  }


  #question {

    /*
      手机端重要参数：
      字不大，行距较高。
    */

    margin:
      0
      6px
      38px;

    font-size:
      16.5px;

    line-height:
      1.92;
  }


  #answers {

    gap:
      12px;
  }


  .answer-button {

    padding:
      13px
      14px;

    border-radius:
      14px;

    font-size:
      13.5px;

    line-height:
      1.72;
  }


  .multi-confirm-button {

    font-size:
      13px;
  }


  /* -----------------
     结果
     ----------------- */

  #result-screen {

    padding-top:
      22px;
  }


  #result-screen > h1 {

    font-size:
      22px;
  }


  #result-screen section:first-of-type > h1 {

    font-size:
      25px;
  }

}


/* =========================================================
   25. 小屏手机
   ========================================================= */

@media (max-width: 360px) {


  #start-screen,
  #quiz-screen,
  #result-screen {

    width:
      calc(100% - 20px);
  }


  #start-screen {

    border-radius:
      23px;
  }


  #start-screen h1 {

    font-size:
      25px;
  }


  #question {

    font-size:
      16px;

    line-height:
      1.9;

    margin-bottom:
      34px;
  }


  .answer-button {

    padding:
      12px
      13px;

    font-size:
      13px;

    line-height:
      1.7;
  }

}


/* =========================================================
   26. 平板 / PC
   ========================================================= */

@media (min-width: 700px) {


  #start-screen,
  #quiz-screen,
  #result-screen {

    max-width:
      560px;
  }


  #quiz-screen {

    padding-top:
      42px;
  }


  #question {

    font-size:
      18px;
  }


  .answer-button {

    padding:
      14px
      17px;
  }

}


/* =========================================================
   27. 鼠标设备 hover
   ========================================================= */

@media (hover: hover) {


  .answer-button:hover {

    padding-left:
      18px;
  }


  #start-button:hover {

    letter-spacing:
      0.18em;
  }

}


/* =========================================================
   28. 减少动态效果
   ========================================================= */

@media (prefers-reduced-motion: reduce) {


  *,
  *::before,
  *::after {

    transition:
      none !important;
  }

}


/* =========================================================
   收藏物次级详情页
   ========================================================= */

.collection-card.is-unlocked {
  cursor: pointer;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.collection-card.is-unlocked:hover,
.collection-card.is-unlocked:focus-visible {
  border-color: rgba(169, 68, 74, 0.34);
  box-shadow: 0 12px 27px rgba(88, 65, 48, 0.11);
  outline: none;
  transform: translateY(-3px);
}

.collection-card-detail-hint {
  min-height: 16px;
  margin: 7px 4px 0;
  display: block;
  color: rgba(158, 66, 71, 0.70);
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

#collection-detail-screen {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 30px 24px;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#collection-detail-screen:not(.hidden) {
  display: flex;
  animation: hiddenScreenEnter 0.55s ease both;
}

.collection-detail-stage {
  width: 100%;
  max-width: 560px;
  min-height: calc(100svh - 60px);
  padding: 34px 25px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139, 108, 91, 0.15);
  border-radius: 27px;
  background:
    radial-gradient(
      circle at 90% 7%,
      rgba(198, 83, 83, 0.07),
      transparent 30%
    ),
    linear-gradient(
      155deg,
      rgba(255, 253, 248, 0.96),
      rgba(247, 238, 226, 0.90)
    );
  box-shadow: 0 18px 50px rgba(76, 57, 44, 0.09);
}

.collection-detail-stamp {
  position: absolute;
  right: 13px;
  bottom: 28px;
  color: var(--red-dark);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 106px;
  line-height: 1;
  opacity: 0.045;
  transform: rotate(-7deg);
  pointer-events: none;
}

.collection-detail-kicker {
  margin: 0 0 17px;
  color: var(--ink-light);
  font-family: "Songti SC", "STSong", serif;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  opacity: 0.7;
}

#collection-detail-label {
  margin: 0 0 9px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

#collection-detail-title {
  max-width: 460px;
  margin: 0;
  color: #453a36;
  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    serif;
  font-size: 27px;
  font-weight: 550;
  line-height: 1.65;
  letter-spacing: 0.08em;
}

#collection-detail-character {
  margin: 8px 0 23px;
  color: var(--ink-light);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.08em;
}

.collection-detail-figure {
  width: min(100%, 278px);
  margin: 0 auto 22px;
}

.collection-detail-image-frame {
  width: 100%;
  aspect-ratio: 1;
  padding: 9px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(180, 133, 91, 0.25);
  border-radius: 19px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 247, 0.94),
      rgba(244, 232, 216, 0.75)
    );
  box-shadow:
    0 13px 30px rgba(88, 65, 48, 0.10),
    inset 0 0 22px rgba(197, 155, 111, 0.08);
}

.collection-detail-image-frame::after {
  content: "縁";
  width: 36px;
  height: 36px;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  position: absolute;
  color: rgba(158, 66, 71, 0.35);
  border: 1px solid rgba(158, 66, 71, 0.22);
  border-radius: 5px;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 18px;
  transform: rotate(-7deg);
  pointer-events: none;
}

#collection-detail-screen.is-easter-egg
  .collection-detail-image-frame {
  border-color: rgba(169, 68, 74, 0.36);
  box-shadow:
    0 14px 34px rgba(122, 58, 66, 0.14),
    inset 0 0 24px rgba(198, 83, 83, 0.08);
}

#collection-detail-screen.is-easter-egg
  .collection-detail-image-frame::after {
  content: "彩";
}

.collection-detail-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  opacity: 0;
  filter: blur(2px);
  transform: translateY(5px) scale(0.985);
  transition:
    opacity 0.85s ease,
    filter 0.85s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-detail-image.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

.collection-detail-image-fallback {
  inset: 9px;
  display: none;
  place-items: center;
  position: absolute;
  color: var(--ink-light);
  border: 1px dashed rgba(139, 129, 121, 0.28);
  border-radius: 12px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.collection-detail-image-frame.image-missing
  .collection-detail-image {
  display: none;
}

.collection-detail-image-frame.image-missing
  .collection-detail-image-fallback {
  display: grid;
}

#collection-detail-copy {
  width: 100%;
  max-width: 470px;
}

#collection-detail-copy p {
  margin: 11px auto;
  color: rgba(67, 57, 52, 0.92);
  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    "SimSun",
    serif;
  font-size: 15.5px;
  line-height: 2.05;
  letter-spacing: 0.04em;
}

#collection-detail-copy p + p {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid rgba(180, 133, 91, 0.18);
}

#collection-detail-back-button {
  min-height: 42px;
  margin-top: 23px;
  padding: 10px 18px;
  position: relative;
  z-index: 1;
  color: var(--ink-light);
  border: 0;
  border-bottom: 1px solid rgba(139, 129, 121, 0.28);
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

#collection-detail-back-button:hover {
  color: var(--red-dark);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  #collection-detail-screen {
    padding: 14px;
  }

  .collection-detail-stage {
    min-height: calc(100svh - 28px);
    padding: 30px 19px 27px;
    justify-content: flex-start;
  }

  #collection-detail-title {
    font-size: 23px;
    letter-spacing: 0.055em;
  }

  .collection-detail-figure {
    width: min(100%, 238px);
  }

  #collection-detail-copy p {
    font-size: 14.5px;
    line-height: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  #collection-detail-screen,
  .collection-card.is-unlocked,
  .collection-detail-image {
    animation: none !important;
    transition: none !important;
  }

  .collection-detail-image.is-visible {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* =========================================================
   29. UI 动态效果
   ========================================================= */


/* -------------------------
   页面进入
   ------------------------- */

#result-screen:not(.hidden) {
  animation:
    screenEnter
    0.48s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}


#quiz-screen:not(.hidden) {
  animation:
    quizScreenFade
    0.48s
    ease
    both;
}


@keyframes quizScreenFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


@keyframes screenEnter {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

}


/* -------------------------
   问题进入
   ------------------------- */

#question.question-enter {
  animation:
    questionEnter
    0.45s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}


@keyframes questionEnter {

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

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

}


/* -------------------------
   选项依次出现
   ------------------------- */

.answer-button.answer-enter {

  animation:
    answerEnter
    0.25s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;

  animation-delay:
    calc(var(--answer-index, 0) * 35ms);
}


@keyframes answerEnter {

  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(0.985);
  }

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

}


/* -------------------------
   多选：选中时轻微弹一下
   ------------------------- */

.answer-button.selected {
  animation:
    selectedPop
    0.20s
    ease-out;
}


@keyframes selectedPop {

  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.975);
  }

  100% {
    transform: scale(1);
  }

}


/* -------------------------
   单选点击反馈
   ------------------------- */

.answer-button.picked {

  border-color:
    rgba(186, 75, 78, 0.62);

  background:
    linear-gradient(
      135deg,
      #fff8f3,
      #f8e3df
    );

  transform:
    scale(0.985);
}


.answer-button.picked::before {

  opacity: 1;

  transform: rotate(180deg) scale(1.08);

  border-color:
    rgba(158, 66, 71, 0.62);

  box-shadow:
    0 0 10px rgba(198, 83, 83, 0.22),
    0 0 0 1px rgba(255,255,255,0.55) inset;
}

/* -------------------------
   真正的题目进度条
   ------------------------- */

#progress {

  width: 100%;

  margin:
    0
    5px
    31px;

  padding-bottom:
    17px;
}


/* 进度轨道 */

#progress::before {

  content: "♥";

  position: absolute;

  left: -32px;

  top: 50%;
  margin-top: -15px;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--red);

  background:
    none;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    27px;

  line-height:
    30px;

  text-align:
    center;

  transform:
    scale(1);

  transform-origin:
    50% 50%;

  text-shadow:
    0 3px 8px
    rgba(198, 83, 83, 0.18);

  opacity:
    0.92;

  z-index:
    2;
}

/* 当前进度 */

#progress::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width:
    var(--quiz-progress, 0%);

  height:
    2px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #c65353,
      #d77a6d
    );

  box-shadow:
    0 0 7px
    rgba(198, 83, 83, 0.20);

  transition:
    width
    0.5s
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* -------------------------
   开始按钮小光泽
   ------------------------- */

#start-button {
  overflow: hidden;
}


/* 保留原来的◇，新增一个流动高光 */

#start-button::after {

  content: "";

  position: absolute;

  top: -40%;

  left: -45%;

  width: 35%;
  height: 180%;

  transform:
    rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.24),
      transparent
    );

  animation:
    buttonShine
    4.5s
    ease-in-out
    infinite;
}


@keyframes buttonShine {

  0%,
  68% {

    left: -45%;

  }

  82% {

    left: 115%;

  }

  100% {

    left: 115%;

  }

}


/* -------------------------
   第一名结果卡进入更明显
   ------------------------- */

#result-screen section {

  opacity: 0;

  animation:
    resultCardEnter
    0.5s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}


#result-screen section:nth-of-type(1) {
  animation-delay: 0.10s;
}


#result-screen section:nth-of-type(2) {
  animation-delay: 0.20s;
}


#result-screen section:nth-of-type(3) {
  animation-delay: 0.30s;
}


@keyframes resultCardEnter {

  from {

    opacity: 0;

    transform:
      translateY(12px)
      scale(0.99);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


/* -------------------------
   第一名百分比微微呼吸
   ------------------------- */

#result-screen
section:first-of-type
> h2:nth-of-type(2) {

  animation:
    matchBreath
    2.8s
    ease-in-out
    infinite;
}


@keyframes matchBreath {

  0%,
  100% {

    box-shadow:
      0 0 0
      rgba(198,83,83,0);

  }

  50% {

    box-shadow:
      0 0 14px
      rgba(198,83,83,0.10);

  }

}


/* -------------------------
   尊重系统“减少动画”
   ------------------------- */

@media (prefers-reduced-motion: reduce) {

  #quiz-screen,
  #result-screen,
  #question,
  .answer-button,
  #start-button::after,
  #result-screen section,
  #result-screen
  section:first-of-type
  > h2:nth-of-type(2) {

    animation:
      none !important;

    transition:
      none !important;

  }

}

#music-toggle {

  position: fixed;

  top: 16px;
  right: 16px;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  border: 1px solid rgba(198,83,83,.25);

  background:
    rgba(255,250,241,.9);

  color:
    #c65353;

  font-size: 18px;

  z-index: 999;

  box-shadow:
    0 5px 15px rgba(80,50,40,.1);

}

/* =========================================================
   返回上一题
   ========================================================= */

#back-button {

  margin:
    0
    5px
    22px;

  padding:
    5px
    0;

  background:
    transparent;

  color:
    var(--ink-light);

  font-size:
    12px;

  font-weight:
    500;

  letter-spacing:
    0.04em;

  text-align:
    left;
}


#back-button:hover {

  color:
    var(--red-dark);

}

/* =========================================================
   结尾演出
   ========================================================= */

#ending-screen {
  width: 100%;
  max-width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  margin: 0;
  padding: 30px 24px;

  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
}


/* -------------------------
   中央舞台
   ------------------------- */

.ending-stage {
  width: 100%;
  max-width: 560px;

  min-height: calc(100svh - 60px);
  padding: 30px 24px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;
  background: transparent;
}


/* 顶部时间地点 */

#ending-scene-label {
  margin: 0 0 52px;

  color: var(--ink-light);

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.24em;

  opacity: 0.42;
}


/* -------------------------
   普通结尾文字
   ------------------------- */

#ending-line {
  width: 100%;
  max-width: 480px;
  min-height: 110px;

  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(67, 57, 52, 0.92);

  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    "SimSun",
    serif;

  font-size: 19px;
  font-weight: 400;
  line-height: 2.25;
  letter-spacing: 0.12em;
  text-align: center;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 14px rgba(80, 55, 45, 0.06);

  opacity: 0;

  transform:
    translateY(7px)
    scale(0.995);

  filter: blur(2px);

  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.15s ease;
}

#ending-line.visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}


/* -------------------------
   最终揭晓
   ------------------------- */

#ending-reveal {
  width: 100%;

  opacity: 0;
  transform: translateY(10px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

#ending-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.ending-reveal-label {
  margin: 0 0 18px;

  color: rgba(110, 96, 88, 0.65);

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size: 11px;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0.18em;
}


/* 角色名字 */

#ending-character-name {
  margin: 6px 0 22px;

  color: #453a36;

  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    serif;

  font-size: 31px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.18em;

  text-shadow:
    0 3px 16px rgba(85, 58, 48, 0.08);
}


/* 角色结局标题 */

#ending-title {
  margin: 0;
  padding: 11px 15px;

  border-top:
    1px solid rgba(190, 147, 99, 0.28);

  border-bottom:
    1px solid rgba(190, 147, 99, 0.28);

  color: #765d4c;

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.07em;
}


/* -------------------------
   结尾页面进入
   ------------------------- */

#ending-screen:not(.hidden) {
  animation:
    endingScreenEnter
    0.7s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes endingScreenEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* -------------------------
   手机端
   ------------------------- */

@media (max-width: 480px) {

  #ending-screen {
    width: 100%;
    max-width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    margin: 0;
    padding: 28px 22px;
  }

  .ending-stage {
    width: 100%;
    max-width: 100%;

    min-height: calc(100svh - 56px);
    padding: 30px 8px;
  }

  #ending-scene-label {
    margin-bottom: 44px;
    font-size: 10px;
  }

  #ending-line {
    max-width: 430px;
    min-height: 110px;

    font-size: 16px;
    line-height: 2.05;
    letter-spacing: 0.055em;
  }

  .ending-reveal-label {
    font-size: 11.5px;
  }

  #ending-character-name {
    font-size: 27px;
    letter-spacing: 0.13em;
  }

  #ending-title {
    font-size: 13.5px;
    line-height: 1.9;
  }
}


/* -------------------------
   小屏手机
   ------------------------- */

@media (max-width: 360px) {

  #ending-screen {
    width: 100%;
    padding: 24px 17px;
  }

  .ending-stage {
    min-height: calc(100svh - 48px);
    padding: 26px 4px;
  }

  #ending-scene-label {
    margin-bottom: 38px;
  }

  #ending-line {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.045em;
  }

  #ending-character-name {
    font-size: 24px;
  }

  #ending-title {
    font-size: 13px;
  }
}


/* -------------------------
   系统减少动画
   ------------------------- */

@media (prefers-reduced-motion: reduce) {

  #ending-screen,
  #ending-line,
  #ending-reveal {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   30. 樱花飘落
   ========================================================= */

#sakura-layer {
  position: fixed;
  inset: 0;

  overflow: hidden;
  pointer-events: none;

  z-index: 0;

  /* 独立绘制这一层，减少动画对页面其它区域的影响 */
  contain: strict;
}


/* 单片樱花 */

.sakura-petal {
  position: absolute;

  top: -30px;
  left: var(--left);

  width: var(--size);
  height: calc(var(--size) * 0.72);

  border-radius: 80% 0 80% 0;

  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 250, 0.95),
      rgba(239, 183, 192, 0.82)
    );

  box-shadow:
    inset -1px -1px 2px rgba(190, 105, 120, 0.12),
    0 2px 5px rgba(110, 70, 70, 0.05);

  opacity: var(--opacity);

  transform-origin: center;
  backface-visibility: hidden;

  will-change:
    transform,
    opacity;

  animation:
    sakuraFall
    var(--duration)
    linear
    var(--delay)
    forwards;
}


/* 花瓣中间极淡的纹理 */

.sakura-petal::after {
  content: "";

  position: absolute;

  left: 48%;
  top: 16%;

  width: 1px;
  height: 65%;

  background:
    rgba(175, 104, 116, 0.18);

  transform:
    rotate(-25deg);
}


/* -------------------------
   飘落路线
   ------------------------- */

@keyframes sakuraFall {

  0% {
    opacity: 0;

    transform:
      translate3d(0, -5vh, 0)
      rotate(var(--r0));
  }

  8% {
    opacity: var(--opacity);
  }

  25% {
    transform:
      translate3d(var(--x1), 28vh, 0)
      rotate(var(--r1));
  }

  50% {
    transform:
      translate3d(var(--x2), 55vh, 0)
      rotate(var(--r2));
  }

  75% {
    transform:
      translate3d(var(--x3), 82vh, 0)
      rotate(var(--r3));
  }

  100% {
    opacity: 0;

    transform:
      translate3d(var(--x4), 112vh, 0)
      rotate(var(--r4));
  }
}


/* 手机端稍微降低饱和度 */

@media (max-width: 480px) {

  .sakura-petal {
    filter: saturate(0.92);
  }
}


/* 系统要求减少动画时关闭樱花 */

@media (prefers-reduced-motion: reduce) {

  #sakura-layer {
    display: none;
  }
}

/* =========================================================
   答题页小插画
   ========================================================= */

.quiz-illustration {

  position: fixed;

  left: 50%;
  bottom: 0;

  transform:
    translateX(-50%);

  width: 100%;
  max-width: 720px;

  height: 210px;

  margin: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 0;

  opacity: 0.8;
}

.quiz-illustration img {

  position: absolute;

  left: 50%;
  bottom: -8px;

  transform:
    translateX(-50%);

  display: block;

  width: 115%;
  height: 215px;

  object-fit: cover;

  object-position:
center center;

  border-radius: 0;

  opacity: 0;

  transition:
    opacity
    1.15s
    ease-in-out;

  will-change: opacity;

  filter:
    saturate(0.72)
    contrast(0.90)
    brightness(1.04);

  mix-blend-mode:
    multiply;

  -webkit-mask-image:
linear-gradient(
  to bottom,
  transparent 0%,
  black 18%,
  black 100%
);

mask-image:
linear-gradient(
  to bottom,
  transparent 0%,
  black 18%,
  black 100%
);

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,0.10) 10%,
      rgba(0,0,0,0.48) 30%,
      black 58%,
      black 100%
    );
}

.quiz-illustration img.is-visible {
  opacity: 0.92;
}


/* 插画下面的小注记 */

.illustration-caption {

  margin-top: 12px;

  color: var(--ink-light);

  font-family:
    "Songti SC",
    "STSong",
    serif;

  text-align: center;
}


.illustration-caption span {

  display: block;

  font-size: 11px;

  letter-spacing: 0.16em;

  color: var(--ink-soft);
}


.illustration-caption small {

  display: block;

  margin-top: 5px;

  font-size: 10px;

  line-height: 1.7;

  letter-spacing: 0.05em;

  opacity: 0.68;
}
   
/* =========================================================
   好感度进度条
   ========================================================= */

#progress {

  width: calc(100% - 40px);
  height: 4px;

  margin:
    12px
    5px
    36px
    35px;

  padding: 0;

  position: relative;

  /* 隐藏原来的“第 x / X 题” */
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;

  opacity: 1;

  border-radius: 999px;

  background:
    rgba(198, 83, 83, 0.11);

  box-shadow:
    inset 0 1px 2px
    rgba(112, 70, 63, 0.05);

  overflow: visible;
}


/* =========================================================
   左侧大爱心
   ========================================================= */

#progress::before {

  content:"♥";

  position:absolute;
4
  left:-34px;

  top:50%;

  margin-top:-17px;

  color:#c65353;

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size:34px;

  line-height:1;

  font-weight:400;

  text-shadow:
    0 2px 8px rgba(198,83,83,0.18);

  opacity:0.82;

  animation:
    affectionHeartBreath
    3.2s
    ease-in-out
    infinite;
}

/* =========================================================
   当前好感度
   ========================================================= */

#progress::after {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width:
    var(--quiz-progress, 0%);

  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #e9aaa7 0%,
      #d66d69 52%,
      #b94b50 100%
    );

  box-shadow:
    0 0 7px
    rgba(198, 83, 83, 0.17);

  transition:
    width
    0.55s
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   平时轻微呼吸
   ========================================================= */

@keyframes affectionHeartBreath {

  0%,
  100% {

    opacity: 0.82;

    text-shadow:
      0 3px 7px
      rgba(198, 83, 83, 0.14);
  }

  50% {

    opacity: 1;

    text-shadow:
      0 3px 11px
      rgba(198, 83, 83, 0.27);
  }

}


/* =========================================================
   点击选项时：扑通一下
   ========================================================= */

#progress.heart-pulse::before {

  animation:
    affectionHeartPulse
    0.26s
    ease-out;
}


@keyframes affectionHeartPulse {

  0% {
    transform:
      scale(1);
  }

  50% {
    transform:
      scale(1.10);
  }

  100% {
    transform:
      scale(1);
  }

}


/* =========================================================
   手机端
   ========================================================= */

@media (max-width: 480px) {

  #progress {

    width:
      calc(100% - 38px);

    height:
      4px;

    margin:
      10px
      5px
      34px
      33px;
  }


  #progress::before {

    left:
      -30px;

    font-size:
      25px;
  }

}


/* =========================================================
   减少动态效果
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #progress::before {

    animation:
      none !important;
  }


  #progress::after {

    transition:
      none !important;
  }

}

#progress,
#back-button,
#question,
#answers {

  position: relative;

  z-index: 2;
}

/* =========================================================
   灵梦插画缓缓出现
   ========================================================= */

.quiz-illustration {
  opacity: 0;
  animation:
    reimuFadeIn
    2.8s
    ease-out
    0.4s
    forwards;
}


@keyframes reimuFadeIn {

  from {
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(20px);
  }

  to {
    opacity: 0.8;
    transform:
      translateX(-50%)
      translateY(0);
  }

}

.author-sign {

  margin-top: 55px;

  color:
    rgba(70,60,55,0.35);

  font-family:
    "Songti SC",
    "STSong",
    serif;

  font-size: 11px;

  letter-spacing:
    0.35em;

  text-align: center;

  opacity: 0;

  animation:
    authorFade
    2s
    ease
    2.5s
    forwards;
}


@keyframes authorFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 0.35;
  }

}

/* =========================================================
   左侧樱花树背景
========================================================= */

.sakura-tree-bg {

  position: fixed;

  left:48%;

  top:0;

  transform:translateX(-50%);

  width:600px;

  height:100vh;

  pointer-events:none;

  z-index:0;

  opacity:0;

  animation:none;

}

@keyframes sakuraTreeFadeIn {

  from {

    opacity:0;

    transform:
      translateX(-50%)
      translateY(20px);

  }


  to {

    opacity:0.14;

    transform:
      translateX(-50%)
      translateY(0);

  }

}

.sakura-tree-bg.show {

  opacity:0;

  animation:
    sakuraTreeFadeIn
    2.8s
    ease-out
    0.6s
    forwards;

}

.sakura-tree-bg img {

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center bottom;

  display:block;

}


.sakura-tree-bg.ending-hide {

  animation:none !important;

  opacity:0 !important;

  transition:
    opacity 1.5s ease;

}


/* =========================================================
   测试前说明页
========================================================= */

#intro-screen {

  width:calc(100% - 28px);

  max-width:560px;

  min-height:calc(100svh - 36px);

  margin:18px auto 42px;

  padding:42px 28px 38px;

  position:relative;

  z-index:1;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:28px;

  border:1px solid rgba(156, 107, 88, 0.13);

  background:
    linear-gradient(
      160deg,
      rgba(255, 253, 247, 0.94),
      rgba(255, 248, 240, 0.91)
    );

  box-shadow:
    0 14px 42px rgba(78, 58, 46, 0.08);
}

#intro-screen::before {

  content:"";

  position:absolute;

  width:220px;
  height:220px;

  top:-110px;
  right:-95px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(198, 83, 83, 0.09) 0%,
      rgba(198, 83, 83, 0.05) 53%,
      transparent 54%
    );

  pointer-events:none;
}

#intro-screen:not(.hidden) {
  animation:introScreenFade 0.48s ease both;
}

@keyframes introScreenFade {

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

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

.intro-content {

  width:100%;

  max-width:430px;

  position:relative;

  z-index:1;

  text-align:left;
}

.intro-kicker {

  margin:0 0 10px;

  color:var(--red);

  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    serif;

  font-size:12px;

  font-weight:700;

  letter-spacing:0.28em;
}

#intro-screen h1 {

  margin:0 0 24px;

  padding-bottom:16px;

  position:relative;

  font-size:25px;

  letter-spacing:0.11em;
}

#intro-screen h1::after {

  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:48px;
  height:2px;

  border-radius:99px;

  background:
    linear-gradient(90deg, var(--red), transparent);

  opacity:0.75;
}

.intro-copy {
  margin-bottom:20px;
}

.intro-copy p {

  margin:0 0 10px;

  color:var(--ink-soft);

  font-size:13.5px;

  line-height:1.9;
}

.story-intro {

  margin:0 0 16px;

  padding:17px 18px 7px;

  border-left:2px solid rgba(198, 83, 83, 0.48);

  border-radius:0 12px 12px 0;

  background:
    linear-gradient(
      90deg,
      rgba(239, 215, 210, 0.30),
      rgba(255, 253, 248, 0.30)
    );
}

.story-label {

  display:block;

  margin-bottom:8px;

  color:var(--red-dark);

  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    serif;

  font-size:12px;

  font-weight:700;

  letter-spacing:0.18em;
}

.story-intro p {

  margin:0 0 9px;

  color:var(--ink-soft);

  font-size:13px;

  line-height:1.85;
}

#bgm-preload-status {

  margin:0 0 17px;

  color:var(--ink-light);

  font-size:11.5px;

  line-height:1.6;

  letter-spacing:0.03em;
}

#bgm-preload-status::before {

  content:"♪";

  margin-right:7px;

  color:var(--red);
}

#enter-button {

  width:100%;

  min-height:51px;

  padding:13px 20px;

  position:relative;

  overflow:hidden;

  border-radius:14px;

  color:#fffaf4;

  background:
    linear-gradient(
      135deg,
      #cd5b59 0%,
      #ba4c50 48%,
      #a9444a 100%
    );

  box-shadow:
    0 8px 18px rgba(148, 61, 66, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.28);

  font-size:14px;

  font-weight:700;

  letter-spacing:0.16em;
}

#enter-button::before {

  content:"◇";

  margin-right:9px;

  font-family:serif;

  font-weight:400;
}

#enter-button::after {

  content:"";

  position:absolute;

  top:-40%;
  left:-45%;

  width:35%;
  height:180%;

  transform:rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.24),
      transparent
    );

  animation:buttonShine 4.5s ease-in-out infinite;
}

#enter-button:hover {

  transform:translateY(-1px);

  box-shadow:
    0 10px 22px rgba(148, 61, 66, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

@media (max-width:480px) {

  #intro-screen {

    width:calc(100% - 28px);

    padding:36px 22px 30px;
  }

  #intro-screen h1 {
    font-size:23px;
  }
}

@media (max-width:360px) {

  #intro-screen {

    width:calc(100% - 20px);

    padding:31px 19px 27px;

    border-radius:23px;
  }

  #intro-screen h1 {
    font-size:22px;
  }

  .intro-copy p,
  .story-intro p {
    font-size:12.5px;
  }
}

@media (prefers-reduced-motion:reduce) {

  #intro-screen,
  #enter-button::after {

    animation:none !important;
    transition:none !important;
  }

  .sakura-tree-bg.show {

    animation:none !important;

    opacity:0.14;

    transform:
      translateX(-50%)
      translateY(0);
  }
}


/* =========================================================
   隐藏篇（追加模块）
   只复用现有和纸、墨色、朱红与金色变量
   ========================================================= */

#result-screen .hidden-entry {
  margin-top: 34px;
  padding: 30px 24px;
  text-align: center;
  border: 1px solid rgba(198, 83, 83, 0.16);
  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 248, 0.94),
      rgba(247, 238, 226, 0.82)
    );
}

#result-screen .hidden-entry::after {
  content: "秘";
  right: 18px;
  bottom: -22px;
  color: var(--red-dark);
  font-family:
    "Songti SC",
    "STSong",
    "SimSun",
    serif;
  font-size: 88px;
  opacity: 0.045;
}

.hidden-entry-kicker {
  margin: 0 0 8px !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em;
}

#result-screen .hidden-entry h2 {
  margin: 0 0 12px;
  color: var(--red-dark);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

#result-screen .hidden-entry-copy {
  max-width: 390px;
  margin: 0 auto 22px !important;
  color: var(--ink-soft);
  font-family:
    "Songti SC",
    "STSong",
    "SimSun",
    serif;
  font-size: 14px;
  line-height: 1.9;
}

.hidden-entry-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

#open-hidden-button,
#hidden-next-button {
  min-width: 154px;
  min-height: 44px;
  padding: 11px 23px;
  color: #fffaf4;
  border: 0;
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-dark)
    );
  box-shadow:
    0 8px 18px rgba(158, 66, 71, 0.18);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

#open-result-collection-button {
  min-width: 144px;
  min-height: 42px;
  padding: 10px 18px;
  color: var(--red-dark);
  border: 1px solid rgba(169, 68, 74, 0.22);
  border-radius: 13px;
  background: rgba(255, 253, 247, 0.7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

#open-result-collection-button:hover {
  border-color: rgba(169, 68, 74, 0.38);
  transform: translateY(-1px);
}

#hidden-screen {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 30px 24px;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#hidden-screen:not(.hidden) {
  display: flex;
  animation: hiddenScreenEnter 0.7s ease both;
}

.hidden-stage {
  width: 100%;
  max-width: 560px;
  min-height: calc(100svh - 60px);
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hidden-stamp {
  position: absolute;
  right: 8px;
  bottom: 36px;
  color: var(--red-dark);
  font-family:
    "Songti SC",
    "STSong",
    "SimSun",
    serif;
  font-size: 104px;
  line-height: 1;
  opacity: 0.045;
  transform: rotate(-7deg);
  pointer-events: none;
}

.hidden-kicker {
  margin: 0 0 14px;
  color: var(--ink-light);
  font-family:
    "Songti SC",
    "STSong",
    serif;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  opacity: 0.7;
}

#hidden-screen h1 {
  margin: 0;
  color: #453a36;
  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    serif;
  font-size: 31px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.18em;
}

#hidden-page-label {
  margin: 26px 0 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

#hidden-line {
  width: 100%;
  max-width: 480px;
  min-height: 260px;
  padding: 12px 0 24px;
}

#hidden-line.page-enter {
  animation: hiddenPageEnter 0.65s ease both;
}

#hidden-line h2 {
  margin: 0 0 24px;
  color: var(--ink);
  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.1em;
}

#hidden-line p {
  margin: 10px auto;
  color: rgba(67, 57, 52, 0.92);
  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    "SimSun",
    serif;
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.045em;
}

.keepsake-figure {
  width: min(100%, 258px);
  margin: -6px auto 22px;
}

.keepsake-image-frame {
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(180, 133, 91, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 247, 0.92),
      rgba(244, 232, 216, 0.72)
    );
  box-shadow:
    0 13px 30px rgba(88, 65, 48, 0.1),
    inset 0 0 22px rgba(197, 155, 111, 0.08);
}

.keepsake-image-frame::after {
  content: "縁";
  width: 34px;
  height: 34px;
  right: 13px;
  bottom: 13px;
  display: grid;
  place-items: center;
  position: absolute;
  color: rgba(158, 66, 71, 0.34);
  border: 1px solid rgba(158, 66, 71, 0.2);
  border-radius: 4px;
  font-family:
    "Songti SC",
    "STSong",
    "SimSun",
    serif;
  font-size: 18px;
  transform: rotate(-7deg);
  pointer-events: none;
}

.keepsake-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  border-radius: 12px;
  opacity: 0;
  filter: blur(2px);
  transform: translateY(5px) scale(0.985);
  transition:
    opacity 1s ease 0.2s,
    filter 1s ease 0.2s,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  will-change: opacity, filter, transform;
}

.keepsake-image.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.keepsake-figure figcaption {
  margin-top: 12px;
  color: var(--red-dark);
  font-family:
    "Songti SC",
    "STSong",
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.keepsake-image-fallback {
  inset: 8px;
  display: none;
  place-items: center;
  position: absolute;
  color: var(--ink-light);
  border: 1px dashed rgba(139, 129, 121, 0.28);
  border-radius: 12px;
  font-family:
    "Songti SC",
    "STSong",
    serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.keepsake-image-frame.image-missing
  .keepsake-image {
  display: none;
}

.keepsake-image-frame.image-missing
  .keepsake-image-fallback {
  display: grid;
}

.hidden-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}

#hidden-back-button {
  min-height: 42px;
  padding: 10px 16px;
  color: var(--ink-light);
  border: 0;
  border-bottom: 1px solid rgba(139, 129, 121, 0.28);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}

#open-hidden-button:hover,
#hidden-next-button:hover,
#hidden-back-button:hover {
  transform: translateY(-1px);
}

@keyframes hiddenScreenEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hiddenPageEnter {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .sakura-tree-bg {
    left: auto;
    right: -4vw;
    width: 108vw;
    height: 100vh;
    height: 100svh;
    transform: none;
  }

  .sakura-tree-bg.show {
    animation:
      sakuraTreeFadeInMobile
      2.5s
      ease-out
      0.35s
      forwards;
  }

  .sakura-tree-bg img {
    object-position: right bottom;
  }

  #result-screen .hidden-entry {
    padding: 26px 19px;
  }

  #hidden-screen {
    padding: 28px 22px;
  }

  .hidden-stage {
    min-height: calc(100svh - 56px);
    padding: 30px 8px;
  }

  #hidden-screen h1 {
    font-size: 27px;
    letter-spacing: 0.13em;
  }

  #hidden-line {
    min-height: 280px;
  }

  #hidden-line h2 {
    font-size: 22px;
  }

  #hidden-line p {
    font-size: 14.5px;
    line-height: 2;
  }

  .keepsake-figure {
    width: min(100%, 224px);
    margin-bottom: 18px;
  }

  .keepsake-figure figcaption {
    font-size: 14px;
  }

  .keepsake-image {
    transform: translateY(3px) scale(0.985);
  }

  .keepsake-image.is-visible {
    transform: translateY(-9px) scale(1);
  }
}

@keyframes sakuraTreeFadeInMobile {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@media (max-width: 360px) {
  #hidden-screen {
    padding: 24px 17px;
  }

  .hidden-stage {
    min-height: calc(100svh - 48px);
    padding: 26px 4px;
  }

  .hidden-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }

  #hidden-next-button,
  #hidden-back-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hidden-screen,
  #hidden-line {
    animation: none !important;
    transition: none !important;
  }

  .keepsake-image {
    filter: none !important;
    transition: none !important;
  }

  .keepsake-image.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (
  max-width: 480px
) and (
  prefers-reduced-motion: reduce
) {
  .sakura-tree-bg.show {
    opacity: 0.16;
    transform: none;
  }
}


/* 从隐藏篇返回时，直接恢复结果卡片的最终显示状态。
   修复部分手机浏览器在父层 display:none 后丢失动画填充状态的问题。 */
#result-screen.returned-from-hidden:not(.hidden) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

#result-screen.returned-from-hidden section {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* =========================================================
   31. 彩蛋余页与旅途收藏
   ========================================================= */

#hidden-line.is-easter-egg .keepsake-image-frame {
  border-color: rgba(169, 68, 74, 0.34);
  box-shadow:
    0 14px 34px rgba(122, 58, 66, 0.14),
    inset 0 0 24px rgba(198, 83, 83, 0.08);
}

#hidden-line.is-easter-egg .keepsake-image-frame::after {
  content: "彩";
}

#hidden-line.is-easter-egg figcaption::before {
  content: "意外掉落 · ";
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.12em;
}

#collection-screen {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 30px 24px 46px;
  position: relative;
  z-index: 2;
}

#collection-screen:not(.hidden) {
  display: block;
  animation: hiddenScreenEnter 0.55s ease both;
}

.collection-stage {
  width: min(100%, 900px);
  min-height: calc(100svh - 76px);
  margin: 0 auto;
  padding: 38px 32px 34px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(156, 107, 88, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(
      160deg,
      rgba(255, 253, 247, 0.94),
      rgba(255, 248, 240, 0.9)
    );
  box-shadow: 0 14px 42px rgba(78, 58, 46, 0.08);
}

.collection-stage::before {
  content: "集";
  position: absolute;
  right: 25px;
  top: 12px;
  color: var(--red-dark);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 118px;
  line-height: 1;
  opacity: 0.035;
  transform: rotate(8deg);
  pointer-events: none;
}

.collection-kicker {
  margin: 0 0 11px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

#collection-title {
  margin: 0;
  color: #453a36;
  font-size: 29px;
  letter-spacing: 0.16em;
}

.collection-intro {
  max-width: 520px;
  margin: 12px auto 26px;
  color: var(--ink-light);
  font-size: 13px;
  line-height: 1.8;
}

.collection-tabs {
  width: min(100%, 520px);
  margin: 0 auto 26px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border: 1px solid rgba(139, 108, 91, 0.14);
  border-radius: 14px;
  background: rgba(205, 187, 168, 0.12);
}

.collection-tab {
  min-height: 43px;
  padding: 9px 10px;
  color: var(--ink-light);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.collection-tab span {
  margin-left: 5px;
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.7;
}

.collection-tab.is-active {
  color: var(--red-dark);
  border-color: rgba(169, 68, 74, 0.13);
  background: rgba(255, 253, 247, 0.92);
  box-shadow: 0 4px 12px rgba(93, 68, 54, 0.06);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.collection-card {
  min-width: 0;
  padding: 8px 8px 13px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(161, 124, 96, 0.16);
  border-radius: 17px;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 8px 20px rgba(88, 65, 48, 0.055);
}

.collection-card-image-frame {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 255, 255, 0.82),
      rgba(226, 213, 199, 0.42)
    );
}

.collection-card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.collection-card.is-locked .collection-card-image {
  filter: grayscale(1) brightness(0.1) contrast(0.8);
  opacity: 0.22;
}

.collection-lock-mark {
  width: 30px;
  height: 30px;
  display: none;
  place-items: center;
  position: absolute;
  right: 9px;
  bottom: 9px;
  color: rgba(104, 87, 77, 0.62);
  border: 1px solid rgba(119, 98, 85, 0.2);
  border-radius: 50%;
  background: rgba(255, 252, 246, 0.86);
  font-size: 13px;
}

.collection-card.is-locked .collection-lock-mark {
  display: grid;
}

.collection-character {
  margin: 11px 4px 2px;
  overflow: hidden;
  color: var(--ink-light);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-item-name {
  min-height: 41px;
  margin: 0 4px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.03em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.collection-card.is-locked .collection-item-name {
  color: rgba(105, 91, 83, 0.48);
  letter-spacing: 0.16em;
}

#collection-back-button {
  margin-top: 31px;
  min-width: 150px;
  min-height: 42px;
  padding: 10px 20px;
  color: var(--ink-light);
  border: 0;
  border-bottom: 1px solid rgba(139, 129, 121, 0.28);
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.08em;
}

#collection-back-button:hover {
  color: var(--red-dark);
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
  }
}

@media (max-width: 480px) {
  #collection-screen {
    padding: 14px 14px 28px;
  }

  .collection-stage {
    min-height: calc(100svh - 42px);
    padding: 31px 14px 27px;
    border-radius: 23px;
  }

  #collection-title {
    font-size: 25px;
  }

  .collection-intro {
    margin-bottom: 21px;
    padding: 0 8px;
    font-size: 12.5px;
  }

  .collection-tabs {
    margin-bottom: 18px;
  }

  .collection-tab {
    min-height: 45px;
    padding: 8px 5px;
    font-size: 12px;
  }

  .collection-tab span {
    display: block;
    margin: 1px 0 0;
    font-size: 9.5px;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .collection-card {
    padding: 7px 7px 12px;
  }

  .collection-character {
    font-size: 10px;
  }

  .collection-item-name {
    min-height: 39px;
    font-size: 12.5px;
  }
}

@media (max-width: 340px) {
  .collection-grid {
    gap: 9px;
  }

  .collection-stage {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #collection-screen,
  .collection-card-image {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   四季异变追加层：不改变原 UI 尺寸，只补充场景过渡与结局图鉴
   ========================================================= */

.quiz-illustration .journey-image {
  transition:
    opacity 2.4s ease-in-out,
    transform 12s ease-out;
}

.quiz-illustration .journey-image.is-visible {
  transform: translateX(-50%) scale(1.015);
}

#ending-screen {
  isolation: isolate;
}

#ending-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(
      to bottom,
      rgba(251, 247, 241, 0.90),
      rgba(251, 247, 241, 0.72) 54%,
      rgba(251, 247, 241, 0.94)
    ),
    var(--journey-ending-image, none);
  background-position: center 72%;
  background-size: cover;
  opacity: 0.78;
  filter: saturate(0.76) contrast(0.92);
}

.ending-gallery {
  margin-top: 28px;
  padding: 26px 24px;
}

#result-screen .ending-gallery-kicker {
  margin: 0 0 5px;
  color: #b06b62;
  font-size: 11px;
  letter-spacing: 0.18em;
}

#result-screen .ending-gallery h2 {
  margin: 0 0 8px;
}

#result-screen .ending-gallery-copy {
  margin: 0 0 18px;
  color: #8a7d75;
  font-size: 12px;
}

.ending-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ending-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(164, 102, 93, 0.15);
  border-radius: 13px;
  background: rgba(255, 253, 248, 0.78);
}

.ending-card-image {
  position: relative;
  aspect-ratio: 1.65;
  overflow: hidden;
  background: rgba(111, 100, 93, 0.08);
}

.ending-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}

.ending-card.is-locked .ending-card-image img {
  filter: grayscale(1) brightness(0.60);
  opacity: 0.38;
}

.ending-card-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.88);
  font-size: 23px;
}

.ending-card-copy {
  padding: 10px 11px 12px;
}

#result-screen .ending-card-copy p {
  margin: 0 0 3px;
  color: #a37b69;
  font-size: 9.5px;
}

#result-screen .ending-card-copy h3 {
  margin: 0;
  color: #544943;
  font-size: 13px;
}

@media (max-width: 480px) {
  .quiz-illustration .journey-image {
    object-position: center 72%;
    transition:
      opacity 2.1s ease-in-out,
      transform 10s ease-out;
  }

  #ending-screen::before {
    background-position: center 78%;
  }

  .ending-gallery {
    padding: 22px 18px;
  }

  .ending-gallery-grid {
    grid-template-columns: 1fr;
  }

  .ending-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: stretch;
  }

  .ending-card-image {
    aspect-ratio: auto;
    min-height: 88px;
  }

  .ending-card-copy {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-illustration .journey-image,
  .quiz-illustration .journey-image.is-visible {
    transform: translateX(-50%) !important;
    transition: opacity 0.18s linear !important;
  }
}