@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('../assets/fonts/AlibabaPuHuiTi-3-55-Regular-subset.woff2') format('woff2'),
       url('../assets/fonts/AlibabaPuHuiTi-3-55-Regular-subset.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #ffffff; }
body {
  font-family: 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  background: #ffffff;
  color: #1a1a1a;
}
.screen.active { animation: screenIn 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.app {
  max-width: 480px; margin: 0 auto; min-height: 100%;
  --u: calc(min(100vw, 480px) / 750);
}
.screen { display: none; padding: 40px 24px; min-height: 100vh; }
.screen.active { display: block; }

.brand { font-size: 11px; letter-spacing: 2px; color: #b99a5b; }
.intro-title { font-size: 34px; margin: 18px 0 10px; font-weight: 600; }
.intro-sub { font-size: 15px; color: #9a9aa2; line-height: 1.7; }
  flex: 1; padding: 14px 0; font-size: 16px;
  background: transparent; color: #f5f1ea;
  border: 1px solid #3a3a44; border-radius: 10px;
}

.btn-primary {
  margin-top: 56px;
  display: block; width: 100%; padding: 16px 0; font-size: 16px;
  border: 0; border-radius: 28px;
  background: linear-gradient(90deg, #c9a86a, #b99a5b);
  color: #1a1508; font-weight: 600;
}
.btn-ghost {
  display: block; width: 100%; padding: 14px 0; font-size: 15px;
  background: transparent; border: 1px solid #3a3a44;
  color: #9a9aa2; border-radius: 28px; margin-top: 12px;
}

.intro-foot { margin-top: 20px; font-size: 12px; color: #6a6a72; text-align: center; }


#screen-quiz {
  background: #f9e23a url('../assets/images/quiz/q1/bg.png') center / cover no-repeat;
  color: #1a1a1a;
  padding: 0;
  position: relative;
}
#screen-quiz.active { display: block; min-height: calc(var(--u) * 1624); }
.quiz-header { position: static; }
.quiz-logo {
  position: absolute; top: calc(var(--u) * 65); left: calc(var(--u) * 39);
  width: calc(var(--u) * 463);
}
.quiz-music {
  position: absolute; top: calc(var(--u) * 65); right: calc(var(--u) * 39);
  width: calc(var(--u) * 65);
}
.quiz-count {
  position: absolute; top: calc(var(--u) * 270); left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 15);
  margin: 0;
}
.quiz-count-pre-wrap { position: relative; display: inline-block; }
.quiz-count-pre { width: calc(var(--u) * 88); display: block; }
.quiz-count-num {
  position: absolute; left: 48%; top: 50%; transform: translate(-50%, -50%);
  font-size: calc(var(--u) * 28); font-weight: 700; color: #1a1a1a; line-height: 1;
}
.quiz-count-slash { width: calc(var(--u) * 19); }
/* total.png 已删除，改为文字，样式与题号数字保持一致 */
.quiz-count-total {
  font-size: calc(var(--u) * 28); font-weight: 700; color: #1a1a1a; line-height: 1;
}
.quiz-title-img {
  position: absolute; top: calc(var(--u) * 331); left: calc(var(--u) * 131);
  width: auto; text-align: left; margin: 0;
}
.quiz-title-img img { display: block; }
/* 卡片各题尺寸不同(q1 571x430 / q2 505x463)，宽度由 JS 按切图原始尺寸设置，
   这里用底部对齐，使不同高度的卡片底边都停在设计稿 y=947 */
/* left 90 = (750 - cards 571) / 2，使 q1 卡片水平居中（q2 由 JS 另设 131） */
.quiz-cards {
  position: absolute; bottom: calc(var(--u) * 677); left: calc(var(--u) * 90);
  width: auto; text-align: left; margin: 0;
}
.quiz-cards img { display: block; margin: 0; }
/* q1 星星闪烁装饰：屏级独立图层，位置来自用户标注（设计稿 750 坐标，left/top 为星星左上角）。
   q1/q2/q3 三套装饰各自独立、分别按题显隐，互不干扰：
   q1 → .quiz-decos(屏级) | q2 → .quiz-deco-q2-wrap | q3 → .quiz-deco-q3-wrap
   中心点：deco1(214,658) / deco2(190,610) / deco3(358,646) */
.quiz-decos {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-decos.show { display: block; }
.quiz-deco { position: absolute; height: auto; transform-origin: center; will-change: opacity, transform; }
/* 切图是 1x 资源，宽度必须按 --u 换算（与 cards.png 同一套），否则会按 CSS 原像素放大一倍；
   这里再取原始尺寸的 80%：deco1 40x47→32x38, deco2 21x25→17x20, deco3 20x22→16x18 */
/* 相对原始位置净左移 40：先左移 50 再右移 10（198→158 / 181→141 / 350→310） */
.quiz-deco-1 { left: calc(var(--u) * 158); top: calc(var(--u) * 639); width: calc(var(--u) * 32); animation: deco-twinkle 3.6s ease-in-out infinite; }
.quiz-deco-2 { left: calc(var(--u) * 141); top: calc(var(--u) * 600); width: calc(var(--u) * 17); animation: deco-twinkle 3.6s ease-in-out 1.2s infinite; }
.quiz-deco-3 { left: calc(var(--u) * 310); top: calc(var(--u) * 637); width: calc(var(--u) * 16); animation: deco-twinkle 3.6s ease-in-out 2.4s infinite; }
/* 微微呼吸式明暗 + 极小幅度缩放旋转，不抢主视觉 */
@keyframes deco-twinkle {
  0%, 100% { opacity: .45; transform: scale(.82) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1)   rotate(5deg); }
}

/* q2 装饰图层微微闪烁，位置相对 cards 容器，跟随卡片移动。
   切图已由「图层 97 / 98 / 99」统一重命名为 deco1 / deco2 / deco3，与 q1、q3 命名一致。
   位置按用户标记图换算到 750 设计稿（相对 cards 左上角 131,484）：
   deco1（左上星星，整体下移 100）→ left 74  top 155
   deco2（左下）                  → left 2   top 351
   deco3（右侧）                  → left 430 top 272
   尺寸按切图内容 80%：23→18 / 22→18 / 26→21 */
.quiz-deco-q2-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q2-wrap.show { display: block; }
.quiz-deco-q2 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q2-1 { left: calc(var(--u) * 74); top: calc(var(--u) * 155); width: calc(var(--u) * 18); animation: deco-twinkle 3.6s ease-in-out infinite; }
.quiz-deco-q2-2 { left: calc(var(--u) * 2); top: calc(var(--u) * 351); width: calc(var(--u) * 18); animation: deco-twinkle 3.6s ease-in-out 1.2s infinite; }
.quiz-deco-q2-3 { left: calc(var(--u) * 430); top: calc(var(--u) * 272); width: calc(var(--u) * 21); animation: deco-twinkle 3.6s ease-in-out 2.4s infinite; }
/* q3 星星闪烁装饰（q3/deco1~4，原「图层 102/103/105/104」），
   位置来自用户标注截图测量（相对 cards 左上角 68,506）：
   deco1(原102) 中心(462,-10) → left 446 top -28 | deco2(原103) 中心(549,86) → left 518 top 50
   deco3(原105) 中心(78,130) → left 56 top 106 | deco4(原104) 中心(606,142) → left 595 top 128，
   尺寸为切图原始尺寸 */
.quiz-deco-q3-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q3-wrap.show { display: block; }
.quiz-deco-q3 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q3-1 { left: calc(var(--u) * 446); top: calc(var(--u) * -28); width: calc(var(--u) * 31); animation: deco-twinkle 3.6s ease-in-out infinite; }
.quiz-deco-q3-2 { left: calc(var(--u) * 518); top: calc(var(--u) * 50); width: calc(var(--u) * 61); animation: deco-twinkle 3.6s ease-in-out .9s infinite; }
.quiz-deco-q3-3 { left: calc(var(--u) * 56); top: calc(var(--u) * 106); width: calc(var(--u) * 43); animation: deco-twinkle 3.6s ease-in-out 1.8s infinite; }
.quiz-deco-q3-4 { left: calc(var(--u) * 595); top: calc(var(--u) * 128); width: calc(var(--u) * 22); animation: deco-twinkle 3.6s ease-in-out 2.7s infinite; }
/* q7 星星装饰（q7/deco1，原「图层 122」，86x96）：设计稿(530,476)，q7 卡片容器 (top478,left81)，
   换算容器内坐标 left 449 / top -2 */
.quiz-deco-q7-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q7-wrap.show { display: block; }
.quiz-deco-q7 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q7-1 { left: calc(var(--u) * 449); top: calc(var(--u) * -2); width: calc(var(--u) * 86); animation: deco-twinkle 3.6s ease-in-out infinite; }
/* q9 装饰图层 x8（q9/deco1~8，原「图层 127~134」按顺序对应 1~8）；
   切图原始尺寸即 750 基准，坐标 = 设计稿绝对坐标 - cards(top502,left91) */
.quiz-deco-q9-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q9-wrap.show { display: block; }
.quiz-deco-q9 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q9-1 { left: calc(var(--u) * 183); top: calc(var(--u) * 212); width: calc(var(--u) * 38); animation: deco-twinkle 3.6s ease-in-out .6s infinite; }
.quiz-deco-q9-2 { left: calc(var(--u) * 345); top: calc(var(--u) * 64); width: calc(var(--u) * 141); animation: deco-twinkle 3.6s ease-in-out 2.1s infinite; }
.quiz-deco-q9-3 { left: calc(var(--u) * 305); top: calc(var(--u) * 6); width: calc(var(--u) * 60); animation: deco-twinkle 3.6s ease-in-out infinite; }
.quiz-deco-q9-4 { left: calc(var(--u) * 65); top: calc(var(--u) * 42); width: calc(var(--u) * 37); animation: deco-twinkle 3.6s ease-in-out 1.5s infinite; }
.quiz-deco-q9-5 { left: calc(var(--u) * 101); top: calc(var(--u) * 80); width: calc(var(--u) * 54); animation: deco-twinkle 3.6s ease-in-out .9s infinite; }
.quiz-deco-q9-6 { left: calc(var(--u) * 27); top: calc(var(--u) * 94); width: calc(var(--u) * 19); animation: deco-twinkle 3.6s ease-in-out 2.7s infinite; }
.quiz-deco-q9-7 { left: calc(var(--u) * -1); top: calc(var(--u) * 146); width: calc(var(--u) * 105); animation: deco-twinkle 3.6s ease-in-out 1.8s infinite; }
.quiz-deco-q9-8 { left: calc(var(--u) * 143); top: calc(var(--u) * 36); width: calc(var(--u) * 24); animation: deco-twinkle 3.6s ease-in-out .3s infinite; }
/* q4 纸屑/闪光装饰（q4/deco1~4，原「图层 112/108/110/111」），
   位置来自用户标注截图测量（cards 容器内坐标；q4 容器 top 504、全宽居中）：
   deco1(原112) 左侧白屑 left 146 top 10 | deco2(原108) 顶部紫棒 left 331 top -41
   deco3(原110) 右侧紫角+白屑 left 529 top 23 | deco4(原111) 底部白屑 left 308 top 238，
   尺寸为切图原始尺寸 */
.quiz-deco-q4-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q4-wrap.show { display: block; }
.quiz-deco-q4 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q4-1 { left: calc(var(--u) * 146); top: calc(var(--u) * 10); width: calc(var(--u) * 70); animation: deco-twinkle 3.6s ease-in-out infinite; }
.quiz-deco-q4-2 { left: calc(var(--u) * 331); top: calc(var(--u) * -41); width: calc(var(--u) * 84); animation: deco-twinkle 3.6s ease-in-out .9s infinite; }
.quiz-deco-q4-3 { left: calc(var(--u) * 529); top: calc(var(--u) * 23); width: calc(var(--u) * 35); animation: deco-twinkle 3.6s ease-in-out 1.8s infinite; }
.quiz-deco-q4-4 { left: calc(var(--u) * 308); top: calc(var(--u) * 238); width: calc(var(--u) * 108); animation: deco-twinkle 3.6s ease-in-out 2.7s infinite; }
/* q5 星星闪烁装饰（q5/deco1~2，原「图层 116/115」），
   位置来自用户标注截图测量（相对 cards 左上角 51,494）：
   deco1(原116) 大星 中心(89,2) → left 51 top -38 | deco2(原115) 小星 中心(550,3) → left 526 top -23，
   两颗星都横跨卡片顶缘，尺寸为切图原始尺寸 */
.quiz-deco-q5-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q5-wrap.show { display: block; }
.quiz-deco-q5 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q5-1 { left: calc(var(--u) * 51); top: calc(var(--u) * -38); width: calc(var(--u) * 76); animation: deco-twinkle 3.6s ease-in-out infinite; }
.quiz-deco-q5-2 { left: calc(var(--u) * 526); top: calc(var(--u) * -23); width: calc(var(--u) * 48); animation: deco-twinkle 3.6s ease-in-out 1.8s infinite; }
/* q6 装饰：只保留右上角一个（deco1.png，"/"方向）。
   位置按用户标记图重新换算（design 稿 cards 实际左上 120,420）：
   deco1（右上）→ left 360 top -10（累计下移 350：-360 基础上 +300 再 +50）
   尺寸按切图 80%：79x68 → 63x55 */
.quiz-deco-q6-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q6-wrap.show { display: block; }
.quiz-deco-q6 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q6-1 { left: calc(var(--u) * 360); top: calc(var(--u) * -10); width: calc(var(--u) * 63); animation: deco-twinkle 3.6s ease-in-out infinite; }
/* q8 星星/圆点闪烁装饰（q8/deco1~4，原「图层 123/77/124/124(1)」），
   位置来自用户标注截图测量（相对 cards 左上角 125,496）：
   deco1(原123) 左上白星 中心(-74,46) → left -92 top 26 | deco2(原77) 右上双星 原点(452,-16)
   deco3(原124) 左中粉圆 中心(-18,162) → left -36 top 145 | deco4(原124(1)) 右中粉点 中心(501,233) → left 491 top 223，
   尺寸为切图原始尺寸 */
.quiz-deco-q8-wrap {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; display: none; line-height: 0;
}
.quiz-deco-q8-wrap.show { display: block; }
.quiz-deco-q8 {
  position: absolute; height: auto;
  transform-origin: center; will-change: opacity, transform;
}
.quiz-deco-q8-1 { left: calc(var(--u) * -92); top: calc(var(--u) * 26); width: calc(var(--u) * 35); animation: deco-twinkle 3.6s ease-in-out infinite; }
.quiz-deco-q8-2 { left: calc(var(--u) * 452); top: calc(var(--u) * -16); width: calc(var(--u) * 88); animation: deco-twinkle 3.6s ease-in-out .9s infinite; }
.quiz-deco-q8-3 { left: calc(var(--u) * -36); top: calc(var(--u) * 145); width: calc(var(--u) * 35); animation: deco-twinkle 3.6s ease-in-out 1.8s infinite; }
.quiz-deco-q8-4 { left: calc(var(--u) * 491); top: calc(var(--u) * 223); width: calc(var(--u) * 20); animation: deco-twinkle 3.6s ease-in-out 2.7s infinite; }
/* line-height:0 消除 inline 图片的基线间隙，否则容器被撑高、标签整体上移 */
.quiz-labels {
  position: absolute; bottom: calc(var(--u) * 622);
  left: calc(var(--u) * 49); right: calc(var(--u) * 49);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: calc(var(--u) * 20); margin: 0; padding: 0; line-height: 0;
}
.quiz-label { flex: 1 1 0; min-width: 0; }
.quiz-label-left { text-align: left; }
.quiz-label-right { text-align: right; }
/* 宽度由 JS 按各题切图原始尺寸设置（q1 236/231, q2 206） */
#label-left, #label-right { display: none; max-width: 100%; }
#label-left-text, #label-right-text {
  display: inline-block; font-size: calc(var(--u) * 24); font-weight: 600; line-height: 1.35;
  white-space: pre-line; max-width: 100%; text-align: inherit;
}
#label-left-text { color: #d81b7d; }
#label-right-text { color: #0277bd; }
/* 卡片由左右两张切图并排时，宽度按各自切图原始尺寸(q4: 225/245)，间距 22 */
.quiz-cards-split { display: none; justify-content: center; align-items: flex-start; gap: calc(var(--u) * 22); }
.quiz-cards-split img { display: block; }
.slider-wrap {
  position: absolute; top: calc(var(--u) * 1010); left: calc(var(--u) * 47);
  width: calc(var(--u) * 656); margin: 0;
}
.slider-track {
  width: 100%; height: calc(var(--u) * 38); border-radius: calc(var(--u) * 19);
  background: linear-gradient(90deg,
    #e272a9 0%, #c880b6 25%, #9e99cc 50%, #7fabdd 75%, #5bc0f0 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  position: relative;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s;
}
.slider-track.dragging {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.slider-fill { display: none; }
#quiz-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 100%; background: transparent;
  position: absolute; left: 0; top: 0; margin: 0; padding: 0;
  border: 0; outline: none;
}
#quiz-slider:focus, #quiz-slider:active { outline: none; box-shadow: none; }
#quiz-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: calc(var(--u) * 44); height: calc(var(--u) * 44); border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  cursor: pointer;
}
#quiz-slider::-moz-range-thumb {
  width: calc(var(--u) * 44); height: calc(var(--u) * 44); border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  cursor: pointer;
}
.slider-hint {
  display: block; width: calc(var(--u) * 322);
  margin: calc(var(--u) * 45) auto 0;
}
.quiz-next {
  position: absolute; top: calc(var(--u) * 1189); left: calc(var(--u) * 198);
  display: block; margin: 0;
  background: none; border: 0; padding: 0;
  width: calc(var(--u) * 355); height: calc(var(--u) * 85);
}
.quiz-next-bg { display: block; width: 100%; height: 100%; object-fit: contain; }
.quiz-next-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: calc(var(--u) * 139);
}



#screen-loading {
  background: #fff url('../assets/images/loading/bg.png') center / cover no-repeat;
  display: none; position: relative; min-height: 100vh;
  color: #a22547;
}
#screen-loading.active { display: block; animation: screenIn 0.4s ease; }
.loading-logo {
  position: absolute; left: 33px; top: 50px;
  width: 291px; display: block;
}
.loading-pct {
  position: absolute; top: 343px; left: 0; right: 0;
  text-align: center; font-size: 20px; font-weight: 600; line-height: 1;
  color: #a2003e;
}
.loading-track {
  position: absolute; top: 396px; left: 50%; transform: translateX(-50%);
  width: 298px; height: 17px; box-sizing: border-box;
  border: 1px solid #d6b4b8; border-radius: 8.5px;
  display: flex; align-items: center; padding: 0 3px;
}
.loading-fill {
  height: 11px; width: 0%; border-radius: 5.5px;
  background: #a32448;
  transition: width 0.1s linear;
}
.loading-text {
  position: absolute; top: 451px; left: 0; right: 0;
  text-align: center; font-size: 14px; letter-spacing: 1px;
  line-height: 1; color: #a2003e;
}
.loading-dots { display: inline-block; width: 18px; text-align: left; }

.r-tag { font-size: 13px; color: #b99a5b; }
.r-name { font-size: 38px; margin: 10px 0 8px; font-weight: 600; }
.r-combo { font-size: 13px; color: #9a9aa2; }
.r-slogan { margin: 22px 0; font-size: 17px; color: #e8dcc0; }
.r-card, .r-rare {
  padding: 18px; background: #17181e; border-radius: 14px; font-size: 14px;
}
.r-text { line-height: 1.9; }
.r-dims { margin: 18px 0; }
.dim { margin-bottom: 14px; }
.dim-top { display: flex; justify-content: space-between; font-size: 12px; color: #9a9aa2; }
.dim-bar { height: 6px; background: #2a2a33; border-radius: 3px; margin-top: 6px; }
.dim-fill { height: 100%; background: #b99a5b; border-radius: 3px; }
.r-actions { margin: 28px 0 10px; }

.m-title { font-size: 15px; color: #9a9aa2; text-align: center; }
.m-ring {
  width: 150px; height: 150px; margin: 26px auto 16px; border-radius: 50%;
  border: 2px solid #b99a5b; display: flex;
  align-items: center; justify-content: center;
}
.m-ring span { font-size: 46px; font-weight: 600; }
.m-ring i { font-size: 16px; color: #9a9aa2; font-style: normal; }
.m-level { text-align: center; font-size: 20px; color: #b99a5b; }
.m-pair { display: flex; align-items: center; gap: 14px; margin: 26px 0; }
.m-person { flex: 1; text-align: center; }
.m-person span { display: block; font-size: 12px; color: #6a6a72; }
.m-person b { font-size: 15px; font-weight: 600; }
.m-vs { font-size: 12px; color: #6a6a72; }
.m-diff { margin: 22px 0; }
.m-diff-title { font-size: 13px; color: #6a6a72; margin-bottom: 10px; }
.m-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: #17181e; border-radius: 10px;
  font-size: 13px; margin-bottom: 8px;
}
.m-row b { color: #b99a5b; white-space: nowrap; }

.r-text { white-space: pre-line; }
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px);
  background: #2a2a33; color: #f5f1ea; font-size: 13px;
  padding: 12px 18px; border-radius: 20px; opacity: 0;
  transition: 0.25s; pointer-events: none; max-width: 80%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#screen-intro {
  background: #fff url('../assets/images/home/bg.png') center / cover no-repeat;
  color: #8b0c36;
  position: relative;
}
#screen-intro.active {
  display: block; min-height: calc(var(--u) * 1624);
}
.home-header { position: static; }
.home-logo {
  position: absolute; top: calc(var(--u) * 76); left: calc(var(--u) * 39);
  width: calc(var(--u) * 463); display: block;
}
.home-music {
  position: absolute; top: calc(var(--u) * 65); right: calc(var(--u) * 39);
  width: calc(var(--u) * 65);
}
.home-body { position: static; }
.home-tag-row { position: static; }
.home-tag {
  position: absolute; top: calc(var(--u) * 326); left: calc(var(--u) * 57);
  width: calc(var(--u) * 189); display: block;
}
.home-line {
  position: absolute; top: calc(var(--u) * 374); left: calc(var(--u) * 56);
  width: calc(var(--u) * 42); height: calc(var(--u) * 2);
  background: #1a1a1a; border-radius: calc(var(--u) * 1);
}
.home-title {
  position: absolute; top: calc(var(--u) * 417); left: calc(var(--u) * 56);
  width: calc(var(--u) * 433); display: block;
}
.home-subtitle {
  position: absolute; top: calc(var(--u) * 665); left: calc(var(--u) * 59);
  width: calc(var(--u) * 349); display: block;
}
.home-desc {
  position: absolute; top: calc(var(--u) * 764); left: calc(var(--u) * 58);
  width: calc(var(--u) * 304); display: block;
}
.home-start {
  position: absolute; top: calc(var(--u) * 896); left: calc(var(--u) * 56);
}
.home-start::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 210); height: calc(var(--u) * 210);
  margin-left: calc(var(--u) * -105); margin-top: calc(var(--u) * -105);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(216, 27, 125, 0.28) 0%,
    rgba(216, 27, 125, 0.12) 55%,
    rgba(216, 27, 125, 0) 72%);
  animation: btnHalo 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes btnHalo {
  0%   { transform: scale(0.92); opacity: 0.85; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.home-start-btn {
  width: calc(var(--u) * 210); display: block; position: relative;
  animation: btnBreathe 2.4s ease-in-out infinite;
}
@keyframes btnBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.home-start-btn:active { animation: none; transform: scale(0.96); transition: transform 0.12s; }
.home-query {
  position: absolute; top: calc(var(--u) * 1141); left: calc(var(--u) * 57);
  text-align: left; background: none; border: 0; padding: 0;
  font-size: calc(var(--u) * 22); color: #d81b7d; letter-spacing: calc(var(--u) * 1);
  transition: transform 0.12s;
}
.home-query:active { transform: scale(0.96); }

.modal {
  position: fixed; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 100%; max-width: 480px;
  display: none; z-index: 50;
}
.modal.active { display: block; animation: maskIn 0.24s ease; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.modal-mask {
  position: absolute; inset: 0; background: rgba(0,0,0,0.78);
}
.modal-box {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px;
}
.modal-title {
  font-size: 24px; font-weight: 700; color: #fff;
  margin-bottom: 22px; text-align: center;
}

/* 查询ID弹窗：结构同 inputid，切图改用 querymatchid/dialog.png。
   注意：目前 querymatchid 与 inputid 的 dialog/bg/confirm/input-bg 像素完全一致(差 0.00)，
   仅 placeholder 文案不同；这里仍指向 querymatchid/，方便后续单独换图。 */
.queryid-card {
  background-image: url('../assets/images/querymatchid/dialog.png');
}
/* ===== 答题结束填写ID弹窗（inputid/ref.png，结构与 querymatchid 相同） =====
   卡片 594x277；输入框 517x107（距卡片顶 54）；提示文案 177x28（距输入框底 31）；
   确定按钮 324x98（距卡片底 74）。 */
.inputid-box {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 0 24px;
}
.inputid-card {
  width: calc(var(--u) * 594); height: calc(var(--u) * 277);
  background: url('../assets/images/inputid/dialog.png') center / 100% 100% no-repeat;
  box-sizing: border-box;
  padding-top: calc(var(--u) * 54);
}
.inputid-dialog {
  position: relative;
  width: calc(var(--u) * 517); height: calc(var(--u) * 107);
  margin: 0 auto;
}
.inputid-input-bg { width: 100%; height: 100%; display: block; }
.inputid-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; outline: 0;
  font-size: calc(var(--u) * 30); color: #1a1a1a; text-align: center;
  padding: 0 calc(var(--u) * 20);
}
.inputid-input::placeholder { color: #999; }
.inputid-dialog.error { animation: shake 0.4s; }
.inputid-placeholder {
  display: block;
  width: calc(var(--u) * 177); height: auto;
  margin: calc(var(--u) * 31) auto 0;
}
.inputid-confirm {
  position: relative; background: none; border: 0; padding: 0;
  width: calc(var(--u) * 324); height: calc(var(--u) * 98);
  margin-top: calc(var(--u) * 74);
  transition: transform 0.12s;
}
.inputid-confirm:active { transform: scale(0.96); }
.inputid-confirm-bg { width: 100%; display: block; }
.inputid-confirm-text {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: calc(var(--u) * 34); width: auto;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ===== 首页「查询ID」弹窗（querymatchid/ref.png） =====
   卡片 594x318；输入框 517x107（距卡片顶 95）；提示文案 293x29（距输入框底 33）；
   确定按钮 324x98（距卡片底 73）；关闭 X 在按钮下方。 */
.queryid-box {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 0 24px;
}
.queryid-card {
  width: calc(var(--u) * 594); height: calc(var(--u) * 277);
  background: url('../assets/images/querymatchid/dialog.png') center / 100% 100% no-repeat;
  box-sizing: border-box;
  padding-top: calc(var(--u) * 54);
}
.queryid-dialog {
  position: relative;
  width: calc(var(--u) * 517); height: calc(var(--u) * 107);
  margin: 0 auto;
}
.queryid-input-bg { width: 100%; height: 100%; display: block; }
.queryid-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; outline: 0;
  font-size: calc(var(--u) * 30); color: #1a1a1a; text-align: center;
  padding: 0 calc(var(--u) * 20);
}
.queryid-input::placeholder { color: #999; }
.queryid-dialog.error { animation: shake 0.4s; }
.queryid-placeholder {
  display: block;
  width: calc(var(--u) * 293); height: auto;
  margin: calc(var(--u) * 31) auto 0;
}
.queryid-confirm {
  position: relative; background: none; border: 0; padding: 0;
  width: calc(var(--u) * 324); height: calc(var(--u) * 98);
  margin-top: calc(var(--u) * 74);
  transition: transform 0.12s;
}
.queryid-confirm:active { transform: scale(0.96); }
.queryid-confirm-bg { width: 100%; display: block; }
.queryid-confirm-text {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: calc(var(--u) * 34); width: auto;
}
/* 关闭按钮改用切图（querymatchid/close.png，原「组 18.png」黑圆底白X），去掉文字样式 */
.queryid-close {
  width: calc(var(--u) * 48); height: calc(var(--u) * 48);
  background: none; border: none; padding: 0; margin-top: calc(var(--u) * 40);
}
.queryid-close img { width: 100%; display: block; }
.queryid-close:active { transform: scale(0.92); }

/* ===== 首页「开始测试」隐私弹窗（design-refs/未使用素材-_unused/privatepolicy/首页-隐私条款.png） =====
   卡片 594x332（privacy-card-bg 渐变底，原「图层 38」）；标题装饰行 298x2（距顶37）+ 标题字 172x28；
   白色说明框 555x175（距顶68/左22），文字 504x122 居中；
   同意行：勾选框 19x19 + 勾 23x21 + 文字 296x23（距白框底25）；
   确定按钮 489x92（距卡片底60），文字 352x34，渐变 #710230→#ec588a。 */
.privacy-card {
  width: calc(var(--u) * 594); height: calc(var(--u) * 332);
  background: url('../assets/images/privatepolicy/privacy-card-bg.png') center / 100% 100% no-repeat;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
}
.privacy-title {
  position: relative;
  width: calc(var(--u) * 298); height: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 37);
}
.privacy-title-line { width: 100%; height: 100%; display: block; }
.privacy-title-text {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 172); height: auto;
}
.privacy-body {
  width: calc(var(--u) * 555); height: calc(var(--u) * 175);
  margin-top: calc(var(--u) * 29);
  background: url('../assets/images/privatepolicy/privacy-body-bg.png') center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.privacy-text { width: calc(var(--u) * 504); height: auto; display: block; }
.privacy-agree {
  display: flex; align-items: center;
  margin-top: calc(var(--u) * 25);
  cursor: pointer;
  transition: transform 0.12s;
}
.privacy-agree:active { transform: scale(0.96); }
.privacy-check {
  position: relative;
  width: calc(var(--u) * 19); height: calc(var(--u) * 19);
}
.privacy-check-box { width: 100%; height: 100%; display: block; }
.privacy-check-mark {
  position: absolute; left: calc(var(--u) * -2); top: calc(var(--u) * -1);
  width: calc(var(--u) * 23); height: auto;
  opacity: 0; transition: opacity 0.15s;
}
.privacy-agree.agreed .privacy-check-mark { opacity: 1; }
/* 未勾选就点确定：勾选区域左右抖动提示 */
@keyframes agreeShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(calc(var(--u) * -14)); }
  40%      { transform: translateX(calc(var(--u) * 14)); }
  60%      { transform: translateX(calc(var(--u) * -9)); }
  80%      { transform: translateX(calc(var(--u) * 9)); }
}
.privacy-agree.shake { animation: agreeShake 0.42s; }
/* 同意行文案改为真实文本：设计稿 296x23，色值 #a32648 */
.privacy-agree-text {
  margin-left: calc(var(--u) * 10);
  font-size: calc(var(--u) * 23); line-height: 1;
  color: #a32648; white-space: nowrap;
}
/* 《隐私政策》：行内联按钮，上下负 margin 撑出点击热区不影响排版 */
.privacy-link {
  padding: calc(var(--u) * 10) 0;
  margin: calc(var(--u) * -10) 0;
  background: none; border: 0;
  font-family: inherit; font-size: inherit; line-height: inherit;
  color: #a32648;
}
.privacy-link:active { opacity: 0.6; }
/* ===== 隐私说明页（点击《隐私政策》进入，纯文本） ===== */
#screen-privacy {
  padding: 0; background: #fff; min-height: 100vh;
}
.pp-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 12px;
  background: #fff; border-bottom: 1px solid #f2e3ec;
}
.pp-back {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 15px; color: #d81b7d;
  flex: none;
}
.pp-back:active { opacity: 0.6; }
.pp-logo { width: calc(var(--u) * 380); height: auto; }
.pp-body {
  padding: 22px 24px calc(28px + env(safe-area-inset-bottom));
}
.pp-title {
  font-size: 21px; font-weight: 600; color: #1a1a1a; line-height: 1.5;
  text-align: center;
}
.pp-sub {
  margin-top: 6px; font-size: 12px; color: #d81b7d; text-align: center;
  letter-spacing: 1px;
}
.pp-lead { margin-top: 18px; font-size: 14px; line-height: 1.9; color: #444; }
.pp-h {
  margin-top: 24px; font-size: 15px; font-weight: 600; color: #d81b7d;
}
.pp-p { margin-top: 10px; font-size: 14px; line-height: 1.9; color: #333; text-align: justify; }
.privacy-confirm {
  width: calc(var(--u) * 489); height: calc(var(--u) * 92);
  margin-top: calc(var(--u) * 60);
  border: 0; padding: 0;
  border-radius: calc(var(--u) * 46);
  background: linear-gradient(90deg, #710230 0%, #ec588a 100%);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s;
}
.privacy-confirm:active { transform: scale(0.96); }
.privacy-confirm-text { width: calc(var(--u) * 352); height: auto; display: block; }

/* ===== 查询已有ID的匹配结果页（querymatchresult/ref.png） ===== */
#screen-queryresult {
  position: relative;
  padding: 0;
  background: url('../assets/images/querymatchresult/bg.png') center / cover no-repeat;
}
.qmr-logo { position: absolute; left: calc(var(--u) * 38); top: calc(var(--u) * 74); width: calc(var(--u) * 463); height: calc(var(--u) * 36); }
.qmr-music {
  position: absolute; left: calc(var(--u) * 646); top: calc(var(--u) * 64);
  width: calc(var(--u) * 65); height: calc(var(--u) * 65);
  background: none; border: 0; padding: 0;
}
.qmr-music img { width: 100%; height: 100%; display: block; }
.qmr-title { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 339); width: calc(var(--u) * 646); height: auto; }
/* 分隔横线在标题上方 */
.qmr-divider { position: absolute; left: calc(var(--u) * 48); top: calc(var(--u) * 286); width: calc(var(--u) * 178); height: auto; }

/* 「你」「对方」是两个独立的白色格子，各 309x164 */
.qmr-card {
  position: absolute; width: calc(var(--u) * 309); height: calc(var(--u) * 164);
  background: rgba(255,255,255,0.95); border-radius: calc(var(--u) * 24);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(120, 80, 160, 0.08);
}
.qmr-card-a { left: calc(var(--u) * 50); top: calc(var(--u) * 460); }
.qmr-card-b { left: calc(var(--u) * 390); top: calc(var(--u) * 460); }

.qmr-label { position: absolute; width: auto; height: auto; }
.qmr-label-you { left: calc(var(--u) * 81); top: calc(var(--u) * 467); height: calc(var(--u) * 32); }
.qmr-label-other { left: calc(var(--u) * 424); top: calc(var(--u) * 468); height: calc(var(--u) * 32); }
/* 人格行 / 用户ID / 默契值改为文本渲染（原先是 type-a.png、name-a.png、score.png 静态图） */
.qmr-type { position: absolute; width: calc(var(--u) * 270); }
.qmr-type-a { left: calc(var(--u) * 81); top: calc(var(--u) * 517); }
.qmr-type-b { left: calc(var(--u) * 424); top: calc(var(--u) * 517); }
.qmr-type {
  font-size: calc(var(--u) * 28); line-height: calc(var(--u) * 35);
  font-weight: 700; color: #c8005d; white-space: nowrap;
}
.qmr-name { position: absolute; width: calc(var(--u) * 270); }
.qmr-name-a { left: calc(var(--u) * 79); top: calc(var(--u) * 568); }
.qmr-name-b { left: calc(var(--u) * 427); top: calc(var(--u) * 568); }
.qmr-name {
  font-size: calc(var(--u) * 26); line-height: calc(var(--u) * 28);
  color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.qmr-score-wrap {
  position: absolute; left: calc(var(--u) * 200); top: calc(var(--u) * 640);
  width: calc(var(--u) * 371); height: calc(var(--u) * 371);
}
.qmr-ring { width: 100%; height: 100%; display: block; }
.qmr-score {
  position: absolute; left: calc(var(--u) * 270); top: calc(var(--u) * 795);
  width: calc(var(--u) * 210); text-align: center;
  font-size: calc(var(--u) * 52); line-height: 1.1;
  font-weight: 700; color: #811636;
}
.qmr-score i { font-size: calc(var(--u) * 26); font-style: normal; margin-left: calc(var(--u) * 2); }
.qmr-score-label { position: absolute; left: calc(var(--u) * 301); top: calc(var(--u) * 869); width: calc(var(--u) * 144); height: auto; }

.qmr-desc {
  position: absolute; left: calc(var(--u) * 198); top: calc(var(--u) * 1095);
  width: calc(var(--u) * 353); text-align: center;
  font-size: calc(var(--u) * 24); line-height: 1.6; color: #811636;
}
.qmr-cta {
  position: absolute; left: calc(var(--u) * 128); top: calc(var(--u) * 1233);
  width: calc(var(--u) * 495); height: calc(var(--u) * 102);
  background: none; border: 0; padding: 0;
}
.qmr-cta-bg { width: 100%; height: 100%; display: block; }
.qmr-cta-text {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: calc(var(--u) * 32); width: auto;
}

#screen-getresulting {
  background: #fff url('../assets/images/getresulting/bg.png') center / cover no-repeat;
  display: none; padding: 50px 24px 40px;
}
#screen-getresulting.active { display: block; }
.get-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 260px;
}
.get-logo { width: 232px; }
.get-music { width: 32px; }
.get-text { width: 280px; display: block; margin: 0 auto; }

/* ===== 结果页 =====
   背景图（assets/images/r1~r8/bg.png）已包含全部静态文案（标题/人格名/解析/占比），
   这里只叠加动态部分：三维进度条 + 搭子列表 + 按钮。
   坐标均来自设计稿 750 基准实测 */
#screen-result {
  position: relative; padding: 0; color: #fff;
  /* 底色 = 各页背景图最底行颜色(采样)，页面加长(PAGE_BOTTOM_SAFE)后露出的部分无缝衔接 */
  background: var(--page-end-color, #fff) center top / 100% auto no-repeat;
  /* 页面高度按页配置（r3 是 2768） */
  min-height: calc(var(--u) * var(--page-h, 2738));
  --bar-fill: #e3405e;
  --bar-track: #fea2b4;
}

/* 三维进度条：标签行 y942/1042/1142，轨道 y971/1071/1171，left72 宽605 高15 */
.res-dim { position: absolute; left: calc(var(--u) * 72); width: calc(var(--u) * 605); }
.res-dim:nth-child(1) { top: calc(var(--u) * 942); }
.res-dim:nth-child(2) { top: calc(var(--u) * 1042); }
.res-dim:nth-child(3) { top: calc(var(--u) * 1142); }
.res-dim-top {
  display: flex; justify-content: space-between; align-items: baseline;
  height: calc(var(--u) * 25); line-height: calc(var(--u) * 25);
  font-size: calc(var(--u) * 22); font-weight: 600;
}
.res-dim-top b { font-size: calc(var(--u) * 28); font-weight: 700; }
.res-dim-bar {
  margin-top: calc(var(--u) * 4);
  height: calc(var(--u) * 15); border-radius: calc(var(--u) * 8);
  background: var(--bar-track); overflow: hidden;
}
.res-dim-fill {
  height: calc(var(--u) * 13); margin-top: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 7); background: var(--bar-fill);
  width: 0; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 搭子列表：y2267 起，行高 54，x98-635 */
/* 搭子列表：top 按页配置（各页搭子行 y 不同：r1=2252 r3=2296 r8=2260） */
.res-buddies {
  position: absolute; top: calc(var(--u) * var(--buddy-top, 2252));
  left: calc(var(--u) * 98); width: calc(var(--u) * 537);
  /* 可视 3 行(54x3)，更多搭子由区内滚动条手动查看；不再撑高页面，避免盖住下方 CTA */
  height: calc(var(--u) * 162);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* 细滚动条：轨道透明，滑块浅灰 */
.res-buddies::-webkit-scrollbar { width: calc(var(--u) * 4); }
.res-buddies::-webkit-scrollbar-track { background: transparent; }
.res-buddies::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18); border-radius: calc(var(--u) * 2);
}
.buddy-row {
  display: flex; align-items: center;
  height: calc(var(--u) * 54); font-size: calc(var(--u) * 22);
}
/* 设计稿实测色值：人格 code / 默契值用各页强调色 --buddy-accent，昵称统一 #2a2a2a */
.buddy-type { flex: none; color: var(--buddy-accent, #e73c5c); font-weight: 700; }
.buddy-name {
  /* margin-left 用于把居中点从 flex 剩余空间中心(约 371)推到设计稿实测的 381 */
  flex: 1 1 auto; margin-left: calc(var(--u) * 20);
  text-align: center; color: #2a2a2a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buddy-score {
  flex: none; text-align: right; color: var(--buddy-accent, #e73c5c); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* 搭子空态：占满 3 行高度(54*3)并垂直居中 */
.buddy-loading {
  height: calc(var(--u) * 162);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 24); color: #9a9aa2;
}
.buddy-empty {
  height: calc(var(--u) * 162);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: calc(var(--u) * 10);
}
.buddy-empty-main {
  margin: 0; font-size: calc(var(--u) * 22); color: #2a2a2a;
}
.buddy-empty-sub {
  margin: 0; font-size: calc(var(--u) * 22); font-weight: 700;
  color: var(--buddy-accent, #e73c5c);
}
.card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
}
.card.picked {
  transform: scale(1.04);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.btn-primary, .btn-next, .res-btn-invite, .res-cta-left-hit, .res-restart {
  transition: transform 0.12s ease;
}
.btn-primary:active, .btn-next:active, .res-btn-invite:active,
.res-cta-left-hit:active, .res-restart:active { transform: scale(0.96); }

.buddy-row { animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.buddy-row:nth-child(1) { animation-delay: 0.3s; }
.buddy-row:nth-child(2) { animation-delay: 0.38s; }
.buddy-row:nth-child(3) { animation-delay: 0.46s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* 顶部 LOGO：实测 x38 y74，463x36 */
.res-logo {
  position: absolute; left: calc(var(--u) * 38); top: calc(var(--u) * 74);
  width: calc(var(--u) * 463); height: calc(var(--u) * 36);
}
/* 音乐按钮：实测 x646 y64，65x65 */
.res-music {
  position: absolute; left: calc(var(--u) * 646); top: calc(var(--u) * 64);
  width: calc(var(--u) * 65); height: calc(var(--u) * 65);
  background: none; border: 0; padding: 0;
}
/* 结果页背景深，用 .music-btn-white 取 psource 的白色图标；浅色背景页用黑色版 */
.res-music img { width: 100%; height: 100%; display: block; }
.music-btn { cursor: pointer; }
/* 音乐播放中：图标匀速旋转。
   linear 保证匀速；暂停时 JS 移除 .spin 即停止。
   只作用在 <img> 上，button.qmr-music 不会转，避免与内层 img 叠加成双倍速。 */
@keyframes musicSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.music-btn.spin { animation: musicSpin 4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .music-btn.spin { animation: none; }
}

/* 重新测试：实测 x540 y161，140x30 */
.res-restart {
  position: absolute; left: calc(var(--u) * 540); top: calc(var(--u) * 161);
  width: calc(var(--u) * 140); height: calc(var(--u) * 30);
  background: none; border: 0; padding: 0; color: transparent;
}
.res-restart img { width: 100%; height: 100%; display: block; }
/* 底部按钮：整块 x54 y2492，642x84，内部两个等分 */
/* 底部按钮（设计稿实测）
   邀请好友一起测：白色胶囊按钮 x54 y2492 642x81，圆角 40，黑字 30 左对齐 padding-left 54
   查看更多：白色文字 x152 y2611，字号 20 */
/* 底部两个按钮（设计稿实测，用 psource 切图）
   左 showmore：x55 y2495 308x81 白色填充；整图 308x139，下半是两段说明文字
   右 invitefriend：x386 y2495 308x81 白色描边（透明底） */
/* y 坐标按页配置（各页按钮区顶部不同：r1=2493 r3=2535 …） */
.res-cta-left {
  position: absolute; left: calc(var(--u) * 55); top: calc(var(--u) * var(--cta-top, 2493));
  width: calc(var(--u) * 308); height: calc(var(--u) * 139);
}
.res-cta-left img { width: 100%; height: 100%; display: block; }
/* 点击区只覆盖上半的按钮部分(81)，不挡下方文字 */
.res-cta-left-hit {
  position: absolute; left: 0; top: 0;
  width: 100%; height: calc(var(--u) * 81);
  background: none; border: 0; padding: 0;
}
/* 右 invitefriend：用 psource/invitefriend.png 切图 x386 y2495 308x81（描边+白色文字） */
.res-btn-invite {
  position: absolute; left: calc(var(--u) * 386); top: calc(var(--u) * var(--cta-top, 2493));
  width: calc(var(--u) * 308); height: calc(var(--u) * 81);
  background: none; border: 0; padding: 0;
}
.res-btn-invite img {
  width: 100%; height: 100%; display: block;
}