/* 视觉测试 · 手机网页端
   设计铁律（与小程序一致）：动画只动 transform/opacity；循环动画 ≤2；进度条用 scaleX。 */

:root {
  --primary: #d85a30;
  --primary-deep: #b8471f;
  --primary-soft: #fdeee8;
  --ink: #2b2b2b;
  --ink-2: #6b6b6b;
  --ink-3: #9a9a9a;
  --bg: #f6f4f1;
  --card: #ffffff;
  --line: #ece8e3;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #e9e5df;
  color: var(--ink);
  line-height: 1.5;
}

/* 手机宽度居中画布（桌面预览时像手机） */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
}

.page { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + var(--safe-b)); animation: pageIn .28s ease both; }
/* 纸雕答题页：整页大纯色背景（颜色随动物主题在 JS 里内联设置），切题平滑过渡 */
.page.pc-theme { transition: background .5s ease; display: flex; flex-direction: column; }
/* 长屏手机：题干+选项区填满剩余高度并垂直居中，避免底部大片留白；短屏内容溢出时容器自动拉伸，不会裁切 */
.page.pc-theme #quiz-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* 纸雕主题页里，进度条轨道与题号文字随底色适配，避免浅色发闷 */
.page.pc-theme .quiz-progress { background: rgba(255, 255, 255, .55); }
.page.pc-theme .quiz-count { color: #5c5c58; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 通用 ---------- */
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 4px rgba(60, 40, 20, .05);
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-primary:active { transform: scale(.97); opacity: .9; }
.btn-primary:disabled { opacity: .5; }

.btn-ghost {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  margin-top: 10px;
  transition: transform .15s ease;
}
.btn-ghost:active { transform: scale(.97); }

.state-box { text-align: center; padding: 64px 24px; color: var(--ink-3); font-size: 14px; }
.state-box .big { font-size: 40px; margin-bottom: 12px; }

.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(100deg, #efe9e2 40%, #f7f3ee 50%, #efe9e2 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -70% 0; } }

/* ---------- 首页 ---------- */
.home-hero {
  background: linear-gradient(135deg, var(--primary), #e8845c);
  border-radius: var(--radius);
  color: #fff;
  padding: 22px 18px;
  margin-bottom: 16px;
}
.home-hero h1 { font-size: 22px; font-weight: 700; }
.home-hero p { font-size: 13px; opacity: .9; margin-top: 4px; }

.test-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform .15s ease;
  box-shadow: 0 1px 4px rgba(60, 40, 20, .05);
}
.test-card:active { transform: scale(.98); }
.test-cover {
  width: 96px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--primary-soft);
  flex-shrink: 0;
}
.test-cover.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary);
}
.test-info { flex: 1; min-width: 0; }
.test-info h3 { font-size: 16px; font-weight: 600; }
.test-info p { font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test-meta { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.test-meta b { color: var(--primary); font-weight: 600; }

.home-foot { margin-top: 20px; text-align: center; }

/* ---------- 新首页：手帐拼贴（仅作用于 .home-page，不影响测试与报告） ---------- */
.home-page { min-height: 100dvh; position: relative; overflow: hidden; padding: max(16px, env(safe-area-inset-top, 0px)) 15px calc(34px + var(--safe-b)); color: #171311; background: #dcd3ff; background-image: radial-gradient(rgba(255,255,255,.34) 1px, transparent 1.5px), linear-gradient(145deg,#e7deff,#cec5f2); background-size: 5px 5px,100% 100%; }
.home-page::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.15; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(100,78,154,.13) 4.5px); }.home-topbar,.home-intro-paper,.home-content,.home-closing{position:relative;z-index:1}.home-topbar{height:50px;display:flex;align-items:center;justify-content:space-between}.home-logo{width:68px;height:37px;transform:rotate(-5deg);border:3px solid #171311;border-radius:18px 13px 16px 12px;background:#ffe145;box-shadow:3px 4px #171311;color:#171311;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:11px;font-size:10px;font-weight:900;letter-spacing:.7px}.home-history{border:2px solid #171311;background:#fffdf6;border-radius:999px;padding:7px 11px;color:#171311;font-size:12px;font-weight:800;box-shadow:2px 3px rgba(23,19,17,.8);cursor:pointer}.home-history:active,.home-feature-card:active,.home-mini-card:active,.home-recent-card:active{transform:scale(.975)!important}.home-history i{font-style:normal;color:#f85896;font-size:10px}.home-doodle{position:absolute;z-index:0;font-weight:900}.home-crown{right:55px;top:76px;font-size:43px;transform:rotate(-12deg);color:#8173c5;opacity:.38}.home-star-one{left:23px;top:437px;font-size:36px;color:#ffcf20}.home-star-two{right:14px;top:587px;font-size:46px;color:#2c1d44;transform:rotate(20deg)}
.home-intro-paper,.home-feature-card,.home-mini-card,.home-recent-card{background:#fffaf0}.home-intro-paper{min-height:295px;margin:14px 5px 24px;padding:34px 22px 18px;position:relative;transform:rotate(-1.5deg);overflow:hidden;box-shadow:0 8px 17px rgba(72,51,129,.18);clip-path:polygon(1% 2%,97% 0,100% 8%,98% 19%,100% 35%,98% 52%,100% 70%,97% 100%,79% 98%,64% 100%,46% 98%,30% 100%,12% 98%,0 100%,2% 81%,0 65%,2% 46%,0 25%)}.home-intro-paper::after,.home-feature-card::after,.home-mini-card::after,.home-recent-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;background-image:radial-gradient(#d7ccbb .6px,transparent .8px);background-size:5px 5px;mix-blend-mode:multiply}.home-hole{position:absolute;left:5px;width:7px;height:7px;border-radius:50%;background:#c9c0ad}.home-hole.h1{top:70px}.home-hole.h2{top:135px}.home-hole.h3{top:200px}.home-tape{position:absolute;display:block;height:15px;background:rgba(249,220,181,.78);box-shadow:0 1px 2px rgba(0,0,0,.08)}.home-tape-top{width:58px;right:30px;top:-5px;transform:rotate(7deg)}.home-kicker{font:700 9px monospace;letter-spacing:1px;color:#8d785e}.home-intro-paper h1{position:relative;z-index:1;margin:6px 0 0;font-size:37px;line-height:1.15;letter-spacing:-2px;font-weight:900}.home-intro-paper h1 em{font-style:normal}.home-underline{display:block;width:175px;height:8px;margin:2px 0 5px 25px;transform:rotate(-4deg);background:#ffdc32}.home-intro-copy{font-size:15px;line-height:1.65;font-weight:600}.home-url-sticker{display:inline-block;margin-top:10px;padding:4px 9px;background:#ffd934;transform:rotate(-4deg);font-size:11px;font-weight:800;letter-spacing:.5px}.home-cloud{position:absolute;right:4px;bottom:1px;width:135px;height:128px;text-align:center;color:#171311;transform:rotate(5deg)}.home-cloud strong{font-size:110px;line-height:96px;color:#fff;filter:drop-shadow(3px 3px 0 #171311)}.home-cloud b{position:absolute;z-index:2;top:-9px;left:38px;font-size:60px;color:#ffd93b;text-shadow:2px 2px #171311}.home-cloud i{position:absolute;z-index:3;top:43px;left:31px;color:#4d28c8;font-style:normal;font-size:18px;letter-spacing:4px;text-shadow:1px 1px #171311}.home-cloud small{position:absolute;bottom:-3px;left:32px;font-size:23px;color:#ffce30;text-shadow:1px 1px #171311}
.home-content{min-height:180px}.home-label{display:inline-block;margin:12px 0 13px;padding:5px 12px;font-size:20px;font-weight:900;letter-spacing:1px;box-shadow:2px 3px rgba(50,40,50,.14)}.label-pink{background:#ff9fc8;transform:rotate(-3deg)}.label-yellow{margin-top:29px;background:#ffe346;transform:rotate(-4deg)}.label-purple{margin-top:31px;background:#c8baff;transform:rotate(-3deg)}.home-feature-card{width:100%;min-height:250px;padding:26px 18px 16px;border:0;position:relative;overflow:hidden;text-align:left;color:#171311;cursor:pointer;box-shadow:0 8px 18px rgba(72,52,127,.18);clip-path:polygon(0 2%,5% 0,18% 2%,32% 0,48% 2%,63% 0,79% 2%,97% 0,100% 13%,98% 32%,100% 50%,98% 69%,100% 91%,95% 100%,78% 98%,64% 100%,47% 98%,31% 100%,16% 98%,1% 100%,2% 84%,0 64%,2% 45%,0 22%);transition:transform .15s}.home-feature-tape.left{width:48px;left:-9px;top:9px;transform:rotate(48deg)}.home-feature-tape.right{width:44px;right:-10px;bottom:7px;transform:rotate(-48deg)}.home-feature-copy{position:relative;z-index:1;display:block;width:57%}.home-feature-copy small{display:block;font:700 8px monospace;color:#796f60}.home-feature-copy>strong{display:block;margin:5px 0 9px;font-size:31px;letter-spacing:-2px;font-weight:900;background:linear-gradient(transparent 58%,#ffdc38 59%)}.home-feature-copy em{display:block;font-style:normal;font-size:12px;line-height:1.6;font-weight:600}.home-feature-copy>b{display:inline-block;margin-top:15px;padding:7px 13px;border:2px solid #171311;border-radius:999px;background:#ffe044;box-shadow:2px 3px #171311;font-size:13px}.home-feature-copy>b i{font-style:normal;font-size:19px;margin-left:3px}.home-observer{position:absolute;right:5px;bottom:13px;width:178px;height:195px;text-align:center}.home-observer>i{display:block;height:44px;overflow:hidden;color:#2d211d;font-style:normal;font-size:35px;letter-spacing:-13px;white-space:nowrap}.home-observer>b{display:block;width:92px;height:71px;padding-top:13px;box-sizing:border-box;margin:-8px auto 0;border:2px solid #171311;border-radius:48% 48% 42% 42%;background:#ffd2ad;font-size:19px;letter-spacing:1px}.home-observer>b small{display:block;font-size:14px}.home-observer>em{display:block;width:116px;height:63px;padding-top:20px;box-sizing:border-box;margin:-3px auto 0;border:2px solid #171311;border-radius:35px 35px 12px 12px;background:#5f97e7;color:#fff;font-style:normal;font-size:11px;font-weight:800}.home-observer>strong{position:absolute;right:2px;bottom:5px;width:63px;height:28px;padding-top:7px;background:#eae3d1;border:2px solid #171311;transform:rotate(-11deg);font-size:12px}.home-observer>u{position:absolute;right:0;top:50px;color:#ffcf22;text-decoration:none;font-size:30px;text-shadow:1px 1px #171311}
.home-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.home-mini-card{height:118px;border:2px solid rgba(255,255,255,.72);padding:12px;position:relative;overflow:hidden;text-align:left;color:#171311;box-shadow:0 5px 9px rgba(72,52,127,.16);cursor:pointer;clip-path:polygon(3% 0,96% 3%,100% 14%,98% 31%,100% 53%,97% 71%,100% 96%,82% 99%,61% 97%,38% 100%,15% 97%,1% 100%,3% 78%,0 60%,3% 41%,0 18%);transition:transform .15s}.home-mini-card.tone-0{background:#ffb4d5}.home-mini-card.tone-1{background:#b9ddff;transform:rotate(2deg)}.home-mini-card.tone-2{background:#ccead9;transform:rotate(-2deg)}.home-mini-icon{display:block;font-size:32px;line-height:34px;font-weight:900}.home-mini-card strong{display:block;position:relative;z-index:1;margin-top:2px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-mini-card small{display:block;position:relative;z-index:1;margin-top:4px;font-size:10px;font-weight:700}.home-recent-list{display:flex;flex-direction:column;gap:12px}.home-recent-card{height:91px;width:100%;border:0;padding:15px 13px;display:flex;align-items:center;position:relative;overflow:hidden;text-align:left;color:#171311;box-shadow:0 5px 10px rgba(72,52,127,.16);cursor:pointer;clip-path:polygon(1% 2%,96% 0,100% 13%,98% 29%,100% 46%,98% 66%,100% 94%,83% 100%,65% 98%,43% 100%,24% 98%,4% 100%,0 82%,2% 61%,0 39%,2% 19%);transition:transform .15s}.home-new-stamp{width:38px;height:38px;padding-top:11px;box-sizing:border-box;background:#ffcf38;border:1px solid #171311;border-radius:50%;font-size:9px;font-weight:900;text-align:center;transform:rotate(-11deg)}.home-recent-copy{margin-left:12px;min-width:0;flex:1}.home-recent-copy strong,.home-recent-copy small{display:block;position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-recent-copy strong{font-size:16px;font-weight:900}.home-recent-copy small{margin-top:3px;font-size:10px;color:#62594e}.home-recent-card>b{font-size:27px}.home-closing{margin:33px 0 6px;text-align:center;font-size:12px;font-weight:700;color:#4f4375;transform:rotate(-2deg)}.home-closing b{color:#ffc919;font-size:17px}.home-skeleton-label{width:105px;height:28px;margin:12px 0}.home-skeleton-card{height:190px;margin-bottom:16px;clip-path:polygon(1% 2%,99% 0,97% 100%,3% 98%)}.home-skeleton-card.small{height:90px}.home-empty-note{margin:10px 0;padding:44px 20px;text-align:center;background:#fffaf0;clip-path:polygon(2% 0,98% 3%,100% 97%,0 100%);font-size:15px;font-weight:700;line-height:1.8}.home-empty-note:first-letter{font-size:30px}.home-empty-note button{margin-top:8px;border:2px solid #171311;border-radius:999px;padding:6px 13px;background:#ffde3f;color:#171311;font-size:12px;font-weight:900;cursor:pointer}

/* 参考稿的核心主体全部换为带 alpha 的 PNG 贴纸，保留纸张与插画本身的细节。 */
.home-logo{border:0!important;background:transparent!important;box-shadow:none!important;width:112px;height:70px;transform:rotate(-2deg)}.home-logo img{display:block;width:100%;height:100%;object-fit:contain}.home-intro-paper{background:transparent;box-shadow:none;overflow:visible;min-height:360px;padding:49px 27px 24px 35px}.home-paper-asset{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1}.home-intro-paper::after{display:none}.home-intro-paper h1{font-family:"STKaiti","KaiTi",serif;font-size:42px;line-height:1.05}.home-intro-copy{font-size:14px;line-height:1.7}.home-duck-asset{position:absolute;z-index:2;right:-10px;bottom:-12px;width:53%;height:auto;filter:drop-shadow(1px 4px 2px rgba(61,49,65,.18))}.home-kicker{display:none}.home-url-sticker{position:absolute;z-index:3;right:66px;bottom:49px}.home-underline{width:190px}.home-hole{z-index:1}.home-feature-card{min-height:268px;padding:45px 20px 22px 28px;background:transparent;box-shadow:none;overflow:visible}.home-feature-card::after{z-index:-1;background-image:url('/nihappy/public/assets/editable/paper-white-b.png');background-size:100% 100%;background-repeat:no-repeat;opacity:1;mix-blend-mode:normal}.home-feature-copy{width:56%}.home-feature-copy>strong{font-family:"STKaiti","KaiTi",serif;font-size:37px}.home-feature-copy em{font-size:12px}.home-feature-asset{position:absolute;z-index:2;right:3px;bottom:7px;width:53%;height:auto;filter:drop-shadow(1px 4px 2px rgba(61,49,65,.16))}.home-feature-heart{position:absolute;z-index:3;right:47%;bottom:67px;width:22px}.home-observer{display:none}.home-mini-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.home-mini-card{height:137px;padding:12px 4px 10px;text-align:center}.home-mini-asset{width:55px;height:56px;object-fit:contain;display:block;margin:0 auto}.home-mini-card strong{font-family:"STKaiti","KaiTi",serif;font-size:17px;margin-top:2px}.home-mini-card small{font-size:9px}.home-recent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.home-recent-card{height:153px;padding:19px 10px 14px 13px;align-items:center}.home-recent-card::after{z-index:-1;background-image:url('/nihappy/public/assets/editable/paper-white-a.png');background-size:100% 100%;background-repeat:no-repeat;opacity:1;mix-blend-mode:normal}.home-recent-asset{width:46%;height:112px;object-fit:contain;order:2;position:relative;z-index:2}.home-recent-copy{order:1;margin:0;align-self:center}.home-recent-copy strong{font-family:"STKaiti","KaiTi",serif;font-size:21px;line-height:1.05;white-space:normal;overflow:visible}.home-recent-copy small{font-size:9px;white-space:normal;overflow:visible;line-height:1.4}.home-recent-copy em{display:inline-block;margin-top:7px;padding:4px 7px;background:#ffdc3a;border:1px solid #171311;border-radius:99px;font-style:normal;font-size:9px;font-weight:900;white-space:nowrap}.home-label{font-family:"STKaiti","KaiTi",serif;font-size:23px}.label-yellow,.label-purple{margin-top:27px}.home-closing{margin-top:24px}.home-feature-tape{z-index:4}

/* ---------- 答题页 ---------- */
.quiz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.quiz-progress {
  flex: 1;
  height: 6px;
  background: #e8e2da;
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress .bar {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .3s ease;
}
.quiz-count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.quiz-card { animation: slideInR .34s cubic-bezier(.22,.82,.28,1) both; will-change: opacity, transform; }
.quiz-card.back { animation: slideInL .34s cubic-bezier(.22,.82,.28,1) both; }
.quiz-card-leaving { animation: slideOutL .18s cubic-bezier(.4,0,1,1) both; pointer-events: none; }
.quiz-card.quiz-leave-lift { animation-name: quizLeaveLift; }
.quiz-card.quiz-leave-tilt { animation-name: quizLeaveTilt; }
.quiz-card.quiz-leave-zoom { animation-name: quizLeaveZoom; }
.quiz-motion-lift { animation-name: quizLiftIn; }
.quiz-motion-tilt { animation-name: quizTiltIn; }
.quiz-motion-zoom { animation-name: quizZoomIn; }
@keyframes slideInR { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes slideInL { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes slideOutL { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-18px); } }
@keyframes quizLeaveLift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
@keyframes quizLeaveTilt { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-14px) rotate(-1deg); } }
@keyframes quizLeaveZoom { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
@keyframes quizLiftIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes quizTiltIn { from { opacity: 0; transform: translateX(18px) rotate(1.2deg); } to { opacity: 1; transform: none; } }
@keyframes quizZoomIn { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }

.quiz-qimg {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--primary-soft);
}
.quiz-qimg.placeholder { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--primary); }
.quiz-prompt { font-size: 17px; font-weight: 600; margin-bottom: 14px; }

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--card);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
  animation: fadeUp .3s ease both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.option:active { transform: scale(.98); }
.option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: scale(1.02);
}
.option .check {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.4);
}
.option.selected .check { opacity: 1; transform: scale(1); transition: .2s cubic-bezier(.34, 1.56, .64, 1); }
.option img {
  width: 64px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--primary-soft);
  flex-shrink: 0;
}
.option img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); }
.option .opt-label { font-size: 15px; font-weight: 500; }

.quiz-submit { margin-top: 8px; }

.submit-mask {
  position: fixed;
  inset: 0;
  background: rgba(246, 244, 241, .94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 50;
  animation: pageIn .2s ease both;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.submit-mask p { font-size: 14px; color: var(--ink-2); }

/* ---------- 结果页 ---------- */
.result-hero {
  text-align: center;
  padding: 8px 0 18px;
}
.result-img {
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(60, 40, 20, .12);
  background: var(--primary-soft);
  animation: zoomIn .45s cubic-bezier(.34, 1.4, .64, 1) both .05s;
}
.result-img.placeholder { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 64px; color: var(--primary); }
@keyframes zoomIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

.result-code {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 4px 14px;
  border-radius: 999px;
  animation: fadeUp .4s ease both .15s;
}
.result-title { font-size: 26px; font-weight: 800; margin-top: 8px; animation: fadeUp .4s ease both .2s; }
.result-sub { font-size: 14px; color: var(--ink-2); margin-top: 4px; animation: fadeUp .4s ease both .25s; }
.result-desc {
  font-size: 14px;
  color: var(--ink-2);
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 14px;
  animation: fadeUp .4s ease both .3s;
}

.score-card {
  margin-top: 14px;
  animation: fadeUp .4s ease both .35s;
}
.score-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--ink-2); }

.dim-row { margin-bottom: 14px; }
.dim-row:last-child { margin-bottom: 0; }
.dim-labels { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.dim-labels .w { color: var(--primary); font-weight: 700; }
.dim-bar {
  height: 8px;
  background: #efe9e2;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}
.dim-bar .a, .dim-bar .b {
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.22, .9, .36, 1) .35s;
}
.dim-bar .a { background: var(--primary); }
.dim-bar .b { background: #cbb59e; }
.reveal .dim-bar .a, .reveal .dim-bar .b { transform: scaleX(1); }

.score-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.score-row:last-child { margin-bottom: 0; }
.score-row .code { width: 64px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: right; flex-shrink: 0; }
.score-row .code.top { color: var(--primary); }
.score-track { flex: 1; height: 8px; background: #efe9e2; border-radius: 999px; overflow: hidden; }
.score-track .bar {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.22, .9, .36, 1) .35s;
}
.reveal .score-track .bar { transform: scaleX(var(--pct)); }
.score-row .val { width: 24px; font-size: 12px; color: var(--ink-3); }

.result-actions { margin-top: 18px; }
.result-actions .btn-ghost + .btn-ghost { margin-top: 8px; }

/* ---------- 历史页 ---------- */
.rec-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .15s ease;
  box-shadow: 0 1px 4px rgba(60, 40, 20, .05);
}
.rec-card:active { transform: scale(.98); }
.rec-img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--primary-soft);
  flex-shrink: 0;
}
.rec-img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--primary); }
.rec-info { flex: 1; min-width: 0; }
.rec-info h4 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-info p { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.rec-retest {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  background: transparent;
}
.rec-more { text-align: center; font-size: 13px; color: var(--ink-3); padding: 12px; }
.rec-more.loading { opacity: .6; }

/* ---------- 分享落地页 ---------- */
.share-badge {
  text-align: center;
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 5px 14px;
  width: fit-content;
  margin: 0 auto 14px;
  animation: fadeUp .35s ease both;
}
.share-cta { margin-top: 22px; }
.share-cta p { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 10px; }

/* ---------- 纸雕答题场景（what-animal） ---------- */
.pc-wrap {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  animation: slideInR .34s cubic-bezier(.22,.82,.28,1) both;
  will-change: opacity, transform;
}
.pc-wrap.back { animation: slideInL .34s cubic-bezier(.22,.82,.28,1) both; }
.pc-wrap.pc-motion-lift { animation-name: quizLiftIn; }
.pc-wrap.pc-motion-tilt { animation-name: quizTiltIn; }
.pc-wrap.pc-motion-zoom { animation-name: quizZoomIn; }
.pc-wrap-leaving { animation: slideOutL .18s cubic-bezier(.4,0,1,1) both; pointer-events: none; }

.pc-stage {
  position: relative;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
  background: var(--pc-opt, #dfe7c6);
  box-shadow: 0 6px 22px rgba(30, 50, 30, .20);
}
/* 动物图：完整铺满整个舞台（slice 裁切，动物居中不被切） */
.pc-stage svg.pc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .45s cubic-bezier(.22, .9, .36, 1);
  will-change: transform;
}

/* 原图舞台：整场景轻微呼吸 + 部件（尾巴/耳朵）从原图剪出后各自小幅度摆动 */
.pc-breathe {
  transform-box: view-box;
  transform-origin: 50% 100%;
  animation: pcBreathe 4s ease-in-out infinite;
}
.pc-part { will-change: transform; }
.pcSwingA { animation-name: pcSwingA; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.pcSwingB { animation-name: pcSwingB; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.pcSwingC { animation-name: pcSwingC; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes pcBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
@keyframes pcSwingA { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
@keyframes pcSwingB { 0%, 100% { transform: rotate(2.4deg); } 50% { transform: rotate(-2.4deg); } }
@keyframes pcSwingC { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }

/* PART 徽章 */
.pc-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  line-height: 1;
}
.pc-badge span {
  display: inline-block;
  background: var(--pc-badge, #f7d766);
  color: #4a3a12;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 6px 24px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .22);
}

/* 题干铭牌：图片下方的独立木牌，居中，不覆盖图案 */
.pc-qcard {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  text-align: center;
  line-height: 1.45;
  color: #3a2c14;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 12px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, .05) 100%),
    var(--pc-card, #f0dd86);
  border: 1px solid rgba(0, 0, 0, .10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -4px 7px rgba(0, 0, 0, .08),
    0 2px 0 rgba(0, 0, 0, .06),
    0 7px 16px rgba(0, 0, 0, .16);
}
/* 铭牌顶部小钉子，强化"悬挂木牌"道具感 */
.pc-qcard::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 50%),
    var(--pc-accent, #e08a45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.pc-qcard::after { display: none; }

/* 选项区：图片下方 2×2 木牌网格 */
.pc-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  line-height: 1.3;
}
.pc-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
  background: linear-gradient(to bottom, #ffffff 0%, #fbfaf7 100%);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 3px 10px rgba(30, 40, 30, .12),
    0 1px 0 rgba(0, 0, 0, .04);
}
.pc-opt:active { transform: scale(.97); }
.pc-opt.selected {
  background: linear-gradient(to bottom, #ffffff 0%, #f3f1ea 100%);
  border-color: var(--pc-accent, #e08a45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 5px 14px rgba(30, 40, 30, .18);
  transform: scale(1.02);
}
.pc-dot {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 52%),
    var(--pc-card, #f0dd86);
  color: var(--pc-accent, #4a3a12);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 -3px 5px rgba(0, 0, 0, .16),
    inset 0 2px 2px rgba(255, 255, 255, .5),
    0 2px 3px rgba(0, 0, 0, .18);
  border: 2px solid var(--pc-accent, #6f9c4e);
}
.pc-dot svg { position: absolute; width: 62%; height: 62%; pointer-events: none; color: var(--pc-accent, #6f9c4e); opacity: .55; }
.pc-letter { position: relative; z-index: 2; line-height: 1; }
.pc-opt.selected .pc-dot {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%),
    var(--pc-accent, #e08a45);
  color: #fff;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .28), 0 2px 4px rgba(0, 0, 0, .22);
}
.pc-opt.selected .pc-dot svg { display: none; }
.pc-opt.selected .pc-letter { color: #fff; }
.pc-txt { font-size: 13px; color: #2c2c2a; font-weight: 500; line-height: 1.3; }

/* 元素入场（浮起） */
.pc-rise { animation: pcRise .55s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 尊重系统「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .pc-breathe, .pc-part,
  .pig-scene-art, .pig-scene-center, .pig-scene-prop, .pig-scene-spark,
  .pig-object, .pig-observer, .pig-feedback { animation: none; }
  .quiz-card, .quiz-card.back, .quiz-card-leaving, .quiz-leave-lift, .quiz-leave-tilt, .quiz-leave-zoom,
  .pc-wrap, .pc-wrap.back, .pc-wrap-leaving,
  .pig-question-shell, .pig-question-leaving, .pig-motion-lift, .pig-motion-tilt, .pig-motion-zoom, .pig-q1-question.pig-q1-leaving .pig-q1-curtain { animation: none !important; }
  .pc-rise, .option { animation: none !important; }
  .pig-progress-track span { transition: none; }
}

/* ---------- 纯文本选项 A/B/C/D 字母徽章 ---------- */
.opt-letter {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.option.selected .opt-letter { background: var(--primary); }

/* ---------- 友友观察室角色报告 ---------- */
.pig-report { --pig: #e06a8c; --pig-soft: #fbe4ec; }
.pig-report .card.pig-section { --pig: #e06a8c; --pig-soft: #fbe4ec; }
.pig-section h4 { margin: 0 0 12px; font-size: 15px; }

.pig-hero { text-align: center; padding: 6px 4px 18px; }
.pig-hero-emoji { font-size: 54px; line-height: 1; }
.pig-breed { font-size: 26px; font-weight: 800; margin: 6px 0 2px; }
.pig-breed-sub { color: var(--ink-3); font-size: 13px; margin: 0 0 10px; }
.pig-index { display: inline-flex; align-items: baseline; gap: 4px; }
.pig-index-num { font-size: 46px; font-weight: 800; color: var(--pig); }
.pig-index-unit { font-size: 15px; color: var(--ink-3); }
.pig-level-tag {
  display: inline-block; margin-top: 8px; padding: 4px 12px;
  border-radius: 99px; background: var(--pig-soft); color: var(--pig);
  font-size: 13px; font-weight: 600;
}
.pig-report-intro { margin: -4px 0 12px; color: var(--ink-3); text-align: center; font-size: 12px; }
.pig-card-kicker { margin: 0 2px 8px; color: var(--pig); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.friend-paid-body .pig-section, .friend-cliff .pig-section { margin-bottom: 12px; }
.pig-dna-note { background: linear-gradient(135deg, #fff, #f7f0ff); }

.pig-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pig-bar-name { width: 84px; flex: 0 0 84px; font-size: 13px; color: var(--ink-2); }
.pig-bar-track {
  flex: 1 1 auto; width: 100%; height: 10px;
  background: rgba(0, 0, 0, .07); border-radius: 99px; overflow: hidden;
}
.pig-metric { display: grid; grid-template-columns: 1fr 36px; gap: 4px 8px; margin-bottom: 12px; }
.pig-metric:last-child { margin-bottom: 0; }
.pig-metric-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.pig-metric-name { font-size: 14px; font-weight: 500; }
.pig-metric-badge {
  font-size: 12px; padding: 2px 8px; border-radius: 99px;
  background: var(--pig-soft); color: var(--pig); font-weight: 600;
}
.pig-metric .pig-bar-val { text-align: right; }
.pig-fill-mix { background: #8a7fe0; }
.pig-line { font-size: 14px; margin: 6px 0; }
.pig-breed-line { font-weight: 700; color: var(--pig); }
.pig-hybrid-title { margin: 12px 0 6px; font-size: 13px; color: var(--ink-3); }
.pig-meat-overall {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pig-meat-overall b { font-size: 20px; color: var(--pig); }
.pig-conf { display: flex; align-items: center; gap: 10px; }
.pig-conf-num { font-size: 28px; font-weight: 800; color: var(--pig); }
.pig-conf-lv { font-size: 14px; color: var(--ink-2); }
.pig-cook { font-size: 15px; }
.pig-cook b { color: var(--pig); }
.pig-cook-reason { color: var(--ink-3); font-size: 13px; }
.pig-easter { background: linear-gradient(135deg, #fbe4ec, #fff3d6); }
.pig-easter-text { font-size: 14px; line-height: 1.5; }
.pig-verdict p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.pig-share-tip { text-align: center; color: var(--ink-3); font-size: 12px; margin-top: 8px; }

/* ---------- 友友观察室互动答题页 ---------- */
.pig-quiz-page {
  --pig-accent: #e06a8c;
  min-height: 100dvh;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(28px + var(--safe-b));
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.88), transparent 25%),
    linear-gradient(180deg, #fff9f5 0%, #f9edf1 100%);
  color: #3d2930;
  transition: background .55s ease, color .55s ease;
}
.pig-quiz-page::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(126,72,87,.07) .8px, transparent .8px); background-size: 7px 7px; opacity: .45; }
.pig-quiz-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pig-quiz-brand { font-size: 16px; font-weight: 900; letter-spacing: .06em; }
.pig-quiz-sub { margin-top: 1px; color: #ae8792; font-size: 10px; letter-spacing: .08em; }
.pig-quiz-tools { display: flex; align-items: center; gap: 8px; }
.pig-sound-toggle { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(154,101,117,.18); border-radius: 50%; background: rgba(255,255,255,.7); cursor: pointer; }
.pig-quiz-count { color: #9d7781; font-size: 12px; font-variant-numeric: tabular-nums; }
.pig-progress-track { position: relative; z-index: 2; height: 5px; margin: 12px 0 15px; border-radius: 999px; background: rgba(224,106,140,.14); overflow: hidden; }
.pig-progress-track span { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(0); border-radius: inherit; background: linear-gradient(90deg, #e06a8c, #f0a75b); transition: transform .45s cubic-bezier(.22,.9,.36,1); }
#pig-quiz-body { position: relative; z-index: 1; }
.pig-question-shell { animation: pigEpisodeIn .34s cubic-bezier(.2,.75,.3,1) both; will-change: opacity, transform; }
.pig-question-shell.pig-motion-lift { animation-name: pigLiftIn; }
.pig-question-shell.pig-motion-tilt { animation-name: pigTiltIn; }
.pig-question-shell.pig-motion-zoom { animation-name: pigZoomIn; }
.pig-question-leaving { animation: pigEpisodeOut .18s cubic-bezier(.4,0,1,1) both; pointer-events: none; }
.pig-question-shell.pig-leave-lift { animation-name: pigLeaveLift; }
.pig-question-shell.pig-leave-tilt { animation-name: pigLeaveTilt; }
.pig-question-shell.pig-leave-zoom { animation-name: pigLeaveZoom; }
@keyframes pigEpisodeIn { from { opacity: 0; transform: translateX(24px) scale(.982); } to { opacity: 1; transform: none; } }
@keyframes pigLiftIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pigTiltIn { from { opacity: 0; transform: translateX(18px) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes pigZoomIn { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
@keyframes pigEpisodeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-20px); } }
@keyframes pigLeaveLift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
@keyframes pigLeaveTilt { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-14px) rotate(-1deg); } }
@keyframes pigLeaveZoom { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
.pig-question-head { padding: 2px 4px 14px; text-align: center; }
.pig-question-head span { display: block; margin-bottom: 6px; color: #b48691; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.pig-question-head b { display: inline-block; max-width: 90%; margin: 4px auto 0; padding: 11px 22px; font-size: clamp(17px, 4.7vw, 20px); line-height: 1.42; color: #5a3a34; text-align: center; background: linear-gradient(135deg, #fffdfe 0%, #ffe9f1 100%); border: 1px solid rgba(224,106,140,.30); border-radius: 16px; box-shadow: 0 8px 18px rgba(120,70,90,.14), 0 0 0 4px rgba(224,106,140,.06), inset 0 1px 0 rgba(255,255,255,.9); position: relative; }
.pig-scene-wrap { position: relative; }
.pig-scene-art { position: relative; min-height: 218px; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 25px; background: var(--pig-bg, #fff0df); box-shadow: 0 14px 32px rgba(102,54,69,.14), inset 0 1px 0 rgba(255,255,255,.85); animation: pigSceneIn .55s cubic-bezier(.2,.75,.3,1) both; isolation: isolate; }
.pig-scene-art::before, .pig-scene-art::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: var(--pig-accent); opacity: .12; filter: blur(2px); }
.pig-scene-art::before { width: 150px; height: 150px; left: -48px; bottom: -72px; }
.pig-scene-art::after { width: 180px; height: 180px; right: -62px; top: -92px; }
@keyframes pigSceneIn { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
.pig-scene-depth { position: absolute; pointer-events: none; }
.pig-depth-back { inset: 34px 18px 48px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.76), rgba(255,255,255,0) 67%); transform: perspective(300px) translateZ(-20px); }
.pig-depth-floor { left: 15%; right: 15%; bottom: 15px; height: 45px; border-radius: 50%; background: radial-gradient(ellipse, rgba(70,35,48,.16), transparent 70%); filter: blur(4px); }
.pig-scene-label { position: absolute; top: 13px; left: 14px; z-index: 3; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; color: var(--pig-accent); background: rgba(255,255,255,.7); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.pig-scene-caption { position: absolute; left: 0; right: 0; bottom: 13px; z-index: 3; color: color-mix(in srgb, var(--pig-accent), #3d2930 45%); color: var(--pig-accent); text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; opacity: .88; }
.pig-scene-center { position: absolute; top: 51%; left: 50%; z-index: 2; transform: translate(-50%,-48%); font-size: 82px; line-height: 1; filter: drop-shadow(0 12px 10px rgba(80,40,50,.15)); animation: pigCenterFloat 3.4s ease-in-out infinite; }
.pig-scene-prop { position: absolute; z-index: 2; font-size: 33px; line-height: 1; opacity: .88; filter: drop-shadow(0 5px 5px rgba(80,40,50,.12)); animation: pigPropFloat 3s ease-in-out infinite; }
.pig-scene-prop-a { left: 20%; bottom: 25%; }
.pig-scene-prop-b { right: 20%; bottom: 31%; animation-delay: .7s; }
@keyframes pigPropFloat { 0%,100% { transform: translateY(3px) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes pigCenterFloat { 0%,100% { transform: translate(-50%,-46%) rotate(-2deg); } 50% { transform: translate(-50%,-52%) rotate(2deg); } }
.pig-scene-spark { position: absolute; z-index: 2; color: var(--pig-accent); font-size: 24px; animation: pigSpark 2.8s ease-in-out infinite; }
.spark-a { left: 22%; top: 35%; } .spark-b { right: 24%; top: 30%; animation-delay: .5s; } .spark-c { right: 17%; bottom: 25%; animation-delay: 1s; }
@keyframes pigSpark { 0%,100% { opacity: .22; transform: translateY(5px) scale(.8); } 50% { opacity: .88; transform: translateY(-6px) scale(1); } }
.pig-scene-react { animation: pigSceneReact .58s ease both; }
@keyframes pigSceneReact { 35% { transform: scale(.985) rotate(-.5deg); filter: saturate(1.15); } 65% { transform: scale(1.01) rotate(.5deg); } }
.pig-object-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.pig-object { position: relative; min-height: 108px; padding: 11px 8px 9px; overflow: hidden; border: 1px solid rgba(180,125,140,.22); border-radius: 17px; background: rgba(255,255,255,.82); color: #432e36; box-shadow: 0 5px 14px rgba(100,55,70,.08), inset 0 1px 0 white; cursor: pointer; touch-action: manipulation; animation: pigOptionIn .45s ease both; animation-delay: var(--delay); transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .2s ease, box-shadow .15s ease; }
.pig-object::before { content: ''; position: absolute; width: 54px; height: 54px; right: -21px; top: -23px; border-radius: 50%; background: var(--pig-accent, #e06a8c); opacity: .07; }
.pig-object:active { transform: scale(.96); }
.pig-object.selected { border-color: var(--pig-accent, #e06a8c); background: #fff8fa; box-shadow: 0 8px 20px rgba(224,106,140,.2); }
.pig-object-dim { opacity: .34; transform: scale(.97); }
.pig-object-hit { animation: pigObjectHit .56s cubic-bezier(.2,.8,.3,1) both; }
@keyframes pigOptionIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pigObjectHit { 35% { transform: scale(1.055) rotate(-1deg); } 100% { transform: scale(1.015); } }
.pig-object-icon { display: block; font-size: 31px; line-height: 1.05; }
.pig-object-label { display: block; margin-top: 5px; font-size: 12px; font-weight: 800; line-height: 1.25; }
.pig-object-quote { display: block; margin-top: 3px; min-height: 16px; color: #977681; font-size: 10px; line-height: 1.25; }
.pig-object-hint { display: block; margin-top: 4px; color: #c2a0aa; font-size: 9px; letter-spacing: .04em; }
.pig-observer { position: absolute; right: 7px; bottom: 8px; z-index: 5; min-width: 35px; padding: 5px 8px; border-radius: 99px; background: rgba(255,255,255,.84); box-shadow: 0 4px 10px rgba(70,40,50,.13); text-align: center; font-size: 20px; animation: pigObserverIn .4s cubic-bezier(.34,1.56,.64,1) both; }
.pig-observer-2, .pig-observer-3 { opacity: .72; filter: grayscale(.25); }
@keyframes pigObserverIn { from { opacity: 0; transform: translate(8px,8px) scale(.45) rotate(14deg); } to { transform: none; } }
.pig-tip { margin: 12px 0 0; color: #aa8790; text-align: center; font-size: 10px; letter-spacing: .03em; }
/* 实验室场景（layout.type='lab'）：切块资产重新组合 + CSS 动态 UI，背景透出每题 pageBg */
/* 题目文字（lab 题）：卡片放在场景内部，几何来自 layout.promptBox（相对 3:2 场景 %），与编辑器 m-scene 内 1:1 对应 */
/* 场景内纯文字（题目 / 幕数 / 进度）：无框、无背景、无阴影，只留文字本身 */
.pig-lab-promptbox { position: absolute; left: 3%; top: 6%; width: 94%; z-index: 62; box-sizing: border-box; color: #5a3a34; font-size: 4.348cqw; font-weight: 800; line-height: 1.4; text-align: center; white-space: pre-line; }
.pig-lab-promptbox-default { left: 3%; top: 6%; width: 94%; }
.pig-lab-scenetext { position: absolute; z-index: 62; box-sizing: border-box; font-weight: 800; line-height: 1.4; text-align: center; white-space: nowrap; pointer-events: none; }
.pig-lab-act { color: #7a5a52; }
.pig-lab-progress { color: #5a3a34; }
.pig-lab-scene { aspect-ratio: 3 / 2; min-height: 0; container-type: inline-size; }
.pig-lab-scene::before, .pig-lab-scene::after { display: none; }
.pig-lab-asset { position: absolute; height: auto; pointer-events: none; user-select: none; }
/* lab 场景文字元素（编辑器「添加文字」）：纯文字无框无背景，与场景内题文/幕数/进度同款 */
.pig-lab-assettext { position: absolute; height: auto; pointer-events: none; user-select: none; box-sizing: border-box; line-height: 1.4; font-weight: 800; text-align: center; white-space: nowrap; }
/* 「你对TA说」胶囊（layout.sayCapsule，每题独立）：图片高度 auto 随宽等比，场景内最上层（压过题目文字 50 / 气泡 55 / 内置进度喇叭 60） */
.pig-lab-saycapsule { position: absolute; height: auto; z-index: 61; pointer-events: none; user-select: none; transform-origin: center center; }
/* 气泡文本框（layout.bubbleBox）：奶油渐变 + 玻璃高光 + 多层投影，几何相对 3:2 场景 %（与编辑器 1:1）。装饰引号/尾巴均已删除（2026-08-24 二次定稿） */
.pig-lab-bubble { position: absolute; height: auto; z-index: 55; pointer-events: none; user-select: none; transform-origin: center center; }
.pig-lab-bubble-inner { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 3.15cqw 4.35cqw; font-weight: 800; line-height: 1.4; text-align: center; white-space: pre-line; text-wrap: balance; color: #5a3a34;
  border-radius: 12cqw;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #fffdf9 0%, #fdf3e7 55%, #f9e6d4 100%);
  border: 0.33cqw solid rgba(255,255,255,.85);
  box-shadow: 0 1.09cqw 2.6cqw rgba(122,74,64,.20), 0 3.26cqw 8.69cqw rgba(122,74,64,.16), inset 0 0.22cqw 0 rgba(255,255,255,.9); }
/* 气泡内信息层级：场景小标题 → 完整题干 → 统一选择提示。 */
.pig-lab-bubble-inner::before { content: attr(data-label); display: block; margin-bottom: 1.3cqw; color: color-mix(in srgb, var(--pig-accent) 78%, #5a3a34); font-size: .68em; font-weight: 900; letter-spacing: .08em; }
.pig-lab-bubble-inner::after { content: attr(data-hint); display: block; margin-top: 1.3cqw; color: color-mix(in srgb, var(--pig-accent) 50%, #8e7478); font-size: .58em; font-weight: 750; letter-spacing: .035em; }
/* 气泡固定高度（bubbleBox.height>0，app.js 加 .bh 类）：inner 填满高度，三层文字整体居中。 */
.pig-lab-bubble.bh .pig-lab-bubble-inner { height: 100%; }
/* 角色/卡片加投影，从背景中跳出来 */
.pig-lab-char { filter: drop-shadow(0 10px 14px rgba(70,40,45,.22)); }
.pig-lab-index { filter: drop-shadow(0 10px 16px rgba(70,40,45,.26)); }
.pig-lab-plant { filter: drop-shadow(0 5px 8px rgba(70,40,45,.18)); }
.pig-lab-brand, .pig-lab-pig { filter: drop-shadow(0 3px 6px rgba(70,40,45,.14)); }
.pig-lab-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.pig-lab-opt { display: inline-flex; align-items: center; gap: 7px; min-height: 0; max-width: 100%; box-sizing: border-box; padding: 8px 14px; border: 1.5px solid color-mix(in srgb, var(--pig-accent) 38%, rgba(255,255,255,.9)); border-radius: 999px; background: linear-gradient(140deg, rgba(255,255,255,.95), color-mix(in srgb, var(--pig-bg) 62%, white)); box-shadow: 0 4px 12px color-mix(in srgb, var(--pig-accent) 14%, transparent), inset 0 1px 0 #fff; font-size: 12.5px; font-weight: 850; color: #432e36; cursor: pointer; touch-action: manipulation; animation: pigOptionIn .45s ease both; animation-delay: var(--delay); transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .2s ease, box-shadow .15s ease; }
.pig-lab-opt-img { width: 54px; height: 54px; flex: none; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 3px 5px rgba(70,40,45,.16)); }
.pig-lab-opt::before { display: none; }
.pig-lab-opt-letter { display: grid; place-items: center; width: 19px; height: 19px; flex: none; border-radius: 50%; background: var(--pig-accent); color: #fff; font-size: 10.5px; font-weight: 950; }
.pig-lab-opt-label { line-height: 1.3; text-align: center; }
.pig-lab-opt:active { transform: scale(.96); }
.pig-lab-opt.selected { border-color: var(--pig-accent); background: linear-gradient(140deg, #fff, color-mix(in srgb, var(--pig-accent) 16%, white)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pig-accent) 30%, transparent); }
.pig-lab-shell .pig-scene-wrap { margin-bottom: 2px; }
/* 完整题干已进入场景奶油气泡，选项舞台直接衔接场景。 */
.pig-lab-stage-wrap { margin-top: 12px; }
/* 无背景 Lab 题也复用 Q1/Q2/Q3 的玻璃框人物舞台；不放底图，只透出每题 pageBg。 */
.pig-lab-stage-wrap .pig-q1-map { background: transparent; box-shadow: none; border-radius: 22px; }
.pig-lab-stage-wrap .pig-q1-map:has(.pig-q1-map-options:empty) { display: none; }
/* 第12题 Lab 专用档案皮肤：保留人物资产，但统一米白纸张、细线和柔和色块。 */
.pig-archive-lab-scene { background: linear-gradient(145deg, #fbf0df 0%, #f7e5e0 54%, #ebe4f1 100%); border-color: rgba(126,82,99,.16); box-shadow: 0 14px 34px rgba(112,68,83,.14), inset 0 1px 0 rgba(255,255,255,.9); }
.pig-archive-lab-scene::after { content: 'ARCHIVE NOTE 12'; position: absolute; right: 4%; bottom: 3%; z-index: 63; color: rgba(126,82,99,.48); font: 800 2.2cqw ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; pointer-events: none; }
.pig-archive-lab-scene .pig-lab-asset { filter: drop-shadow(0 1.2cqw 1.4cqw rgba(112,68,83,.16)); }
.pig-archive-lab-scene .pig-lab-bubble-inner { background: linear-gradient(160deg, #fffefa 0%, #fdf4e9 58%, #f8e8dc 100%); border-color: rgba(255,255,255,.92); box-shadow: 0 1cqw 2.5cqw rgba(122,74,64,.16), 0 3cqw 7cqw rgba(122,74,64,.12), inset 0 .2cqw 0 rgba(255,255,255,.9); }
.pig-archive-lab-scene .pig-lab-bubble-inner::before { color: #a36c7d; }
.pig-archive-lab-scene .pig-lab-bubble-inner::after { content: '收进观察档案'; color: #b07b89; }
.pig-archive-lab-scene .pig-lab-progress { color: #9b6b7b; }
.pig-archive-lab-scene .pig-lab-track { background: rgba(163,108,125,.14); }
.pig-archive-lab-scene .pig-lab-track span { background: #bd7188; }
.pig-archive-lab-scene + .pig-lab-stage-wrap .pig-q1-map { border: 1px solid rgba(126,82,99,.14); background: rgba(255,252,246,.46); box-shadow: 0 9px 24px rgba(112,68,83,.10); }
.pig-archive-lab-scene + .pig-lab-stage-wrap .pig-q1-map::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,0)); }
.pig-archive-lab-scene + .pig-lab-stage-wrap .pig-q1-map-spot { border-color: rgba(126,82,99,.18); background: rgba(255,252,246,.58); box-shadow: 0 1.4cqw 3.4cqw rgba(112,68,83,.11), inset 0 .2cqw 0 rgba(255,255,255,.9); }
.pig-archive-lab-scene + .pig-lab-stage-wrap .pig-q1-map-badge { background: #bd7188; color: #fff; }
.pig-archive-lab-scene + .pig-lab-stage-wrap .pig-q1-map-quote { color: #8b6170; }
/* 背景色随每题切换（.pig-quiz-page 已有 background .55s transition） */
.pig-quiz-page.pig-lab-active { background: var(--pig-bg, #fdf3f1); }
/* 模板已含 INSPECTION LABORATORY 品牌栏，页面顶部只留声音按钮 + 计数，避免重复 */
.pig-quiz-page.pig-lab-active .pig-quiz-top { justify-content: flex-end; }
.pig-quiz-page.pig-lab-active .pig-quiz-brand, .pig-quiz-page.pig-lab-active .pig-quiz-sub { display: none; }
.pig-quiz-page.pig-lab-active .pig-quiz-tools { gap: 10px; }
.pig-quiz-page.pig-lab-active .pig-quiz-sub { color: color-mix(in srgb, var(--pig-accent) 55%, #8a6b60); }
.pig-quiz-page.pig-lab-active .pig-quiz-count { color: color-mix(in srgb, var(--pig-accent) 60%, #7a5a55); font-weight: 800; }
.pig-quiz-page.pig-lab-active .pig-progress-track { background: color-mix(in srgb, var(--pig-accent) 18%, transparent); }
.pig-quiz-page.pig-lab-active .pig-progress-track span { background: linear-gradient(90deg, var(--pig-accent), color-mix(in srgb, var(--pig-accent) 55%, #f0a75b)); }
/* lab 题：计数器/进度条/声音开关已挪进 lab 场景（lab_assets 内置 progress/track/sound 元素，Lab 场景模式可拖），场景外那套隐藏 */
.pig-quiz-page.pig-lab-top-hidden .pig-quiz-count { display: none; }
.pig-quiz-page.pig-lab-top-hidden .pig-progress-track { display: none; }
.pig-quiz-page.pig-lab-top-hidden .pig-sound-toggle { display: none; }
/* 场景内进度条（lab_assets 内置 track 元素）：轨道背景色可编辑，填充按题号 n/t 动态 scaleX */
.pig-lab-track { position: absolute; z-index: 60; border-radius: 999px; background: #f7dbe2; overflow: hidden; pointer-events: none; }
.pig-lab-track span { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(0); border-radius: inherit; background: #e06a8c; }
/* 场景内声音开关（lab_assets 内置 sound 元素）：圆形按钮，与顶栏喇叭同款，可拖位置（Lab 场景模式） */
.pig-lab-sound { position: absolute; z-index: 60; box-sizing: border-box; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.78); border: 1px solid rgba(154,101,117,.22); cursor: pointer; font-size: 3.478cqw; line-height: 1; padding: 0; transition: transform .12s ease; }
.pig-lab-sound:active { transform: scale(.94); }

/* 选项点击后的极简旁白：恢复最初版本的小粉点，但保留短暂、轻量的闪现。 */
.pig-feedback {
  position: fixed;
  left: 50%;
  bottom: calc(78px + var(--safe-b));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: calc(100vw - 36px);
  box-sizing: border-box;
  transform: translateX(-50%);
  padding: 4px 11px 5px 9px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(57,39,49,.62);
  color: rgba(255,248,241,.92);
  box-shadow: 0 5px 18px rgba(53,31,44,.12);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: pigFeedbackIn .9s ease both;
  pointer-events: none;
}
.pig-feedback-dot {
  display: inline-block;
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f28aa9;
  box-shadow: 0 0 0 2px rgba(242,138,169,.14), 0 0 8px rgba(242,138,169,.5);
}
@keyframes pigFeedbackIn {
  0% { opacity: 0; transform: translate(-50%, 5px); }
  18%, 68% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}
@media (max-width: 430px) {
  .pig-feedback { bottom: calc(70px + var(--safe-b)); max-width: calc(100vw - 28px); }
}


/* 终题：观察档案风格。保留终点感，但去掉黑紫宇宙和廉价特效。 */
.pig-cosmos-page { color: #4b3440; background: linear-gradient(180deg, #fffaf1 0%, #f5e8e7 100%); }
.pig-cosmos-page::before { opacity: .28; background-image: radial-gradient(rgba(138,83,101,.22) .7px, transparent .7px); background-size: 9px 9px; }
.pig-cosmos-page .pig-quiz-sub, .pig-cosmos-page .pig-quiz-count { color: #9c7180; }
.pig-cosmos-page .pig-sound-toggle { color: #7e5263; background: rgba(255,255,255,.68); border-color: rgba(126,82,99,.16); }
.pig-cosmos-page .pig-progress-track { background: rgba(224,106,140,.12); }
.pig-final-shell { animation: pigArchiveOpen .58s cubic-bezier(.2,.75,.3,1) both; }
@keyframes pigArchiveOpen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pig-final-shell .pig-question-head span { color: #ad6b82; }
.pig-final-stage { min-height: 245px; border-color: rgba(138,83,101,.16); background: linear-gradient(145deg, #f8e7d5 0%, #f5d7dd 53%, #e7dff0 100%); box-shadow: 0 14px 34px rgba(112,68,83,.14), inset 0 1px 0 rgba(255,255,255,.92); }
.pig-final-stage::before { width: 180px; height: 180px; left: -54px; bottom: -96px; background: #d98ca4; opacity: .14; }
.pig-final-stage::after { width: 220px; height: 220px; right: -74px; top: -122px; background: #8c83bf; opacity: .12; }
.pig-final-stage .pig-scene-center { z-index: 4; font-size: 84px; color: #8c5b70; filter: drop-shadow(0 10px 6px rgba(112,68,83,.16)); animation: pigArchiveMark 2.2s ease-in-out infinite; }
@keyframes pigArchiveMark { 0%,100% { transform: translate(-50%,-48%) rotate(-2deg); } 50% { transform: translate(-50%,-52%) rotate(2deg); } }
.pig-final-stage .pig-scene-caption, .pig-final-stage .pig-scene-label { color: #7e5263; background: rgba(255,255,255,.68); }
.pig-archive-stamp { position: absolute; top: 18px; right: 17px; z-index: 3; padding: 5px 8px; border: 1px solid rgba(126,82,99,.30); color: #99677a; font: 800 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; transform: rotate(4deg); }
.pig-archive-rule { position: absolute; left: 18%; right: 18%; bottom: 39px; z-index: 2; height: 1px; background: rgba(126,82,99,.18); }
.pig-archive-dots { position: absolute; left: 50%; bottom: 25px; z-index: 2; display: flex; gap: 9px; transform: translateX(-50%); }
.pig-archive-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #c58a9b; box-shadow: 0 0 0 2px rgba(197,138,155,.12); }
.pig-final-options { gap: 10px; }
.pig-final-options .pig-object { min-height: 112px; border-color: rgba(138,83,101,.18); background: rgba(255,252,246,.86); color: #4b3440; box-shadow: 0 7px 18px rgba(112,68,83,.10), inset 0 1px 0 rgba(255,255,255,.95); }
.pig-final-options .pig-object::before { background: #d98ca4; opacity: .10; }
.pig-final-options .pig-object-quote { color: #997786; }
.pig-final-options .pig-object-hint { color: #bd9ba6; }
.pig-final-options .pig-object.selected { border-color: #c67591; background: #fff5f7; box-shadow: 0 9px 22px rgba(198,117,145,.20); }

/* 角色卡整理：底层到高层舒缓叠加，人物最后上浮落位。 */
.pig-analysis-mask { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; overflow: hidden; background: linear-gradient(160deg, #f7e9e2, #f4e4e8 54%, #e9e4f2); color: #4b3440; animation: pageIn .3s ease both; }
.pig-analysis-mask::before { content: ''; position: absolute; width: 70vw; height: 70vw; max-width: 440px; max-height: 440px; border-radius: 50%; background: #ead1d5; opacity: .45; filter: blur(2px); }
.pig-analysis-mask::after { content: ''; position: absolute; width: 38vw; height: 38vw; max-width: 240px; max-height: 240px; right: -8vw; bottom: 12vh; border-radius: 50%; background: #d8d4ea; opacity: .58; }
.pig-analysis-status { position: relative; color: #a36c7d; font: 800 10px ui-monospace, SFMono-Regular, monospace; letter-spacing: .16em; }
.pig-analysis-card-stack { position: relative; z-index: 1; width: min(330px, 76vw); aspect-ratio: 9 / 11; overflow: hidden; border: 9px solid rgba(255,252,246,.72); border-radius: 23px; background: var(--card-bg, #fff7ef); box-shadow: 0 18px 42px rgba(112,68,83,.18), 0 0 0 1px rgba(126,82,99,.13); isolation: isolate; container-type: inline-size; }
.pig-analysis-card-glow { position: absolute; inset: 8%; z-index: 0; border-radius: 50%; background: rgba(255,255,255,.36); filter: blur(20px); }
.pig-analysis-card-unit { position: absolute; inset: 0; z-index: 2; opacity: 0; transform: translateY(12px) scale(.986); transition: opacity .22s ease var(--layer-delay), transform .28s cubic-bezier(.2,.82,.3,1) var(--layer-delay); pointer-events: none; }
.pig-analysis-card-unit.is-on { opacity: 1; transform: none; }
.pig-analysis-card-layer { position: absolute; display: block; box-sizing: border-box; max-width: none; transform-origin: center; }
.pig-analysis-card-layer:not(.pig-analysis-card-text) { object-fit: contain; object-position: center; }
.pig-analysis-card-text { overflow: hidden; padding: 0 2px; line-height: 1.28; white-space: normal; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.pig-analysis-card-text-lines { display: block; width: 100%; height: 100%; overflow: hidden; }
/* 每行必须占用真实的 line-height；固定成 1em 会把中文下半部、英文下行部件裁掉，且多行逐行上移。 */
.pig-analysis-card-text-lines > span { display: block; width: 100%; height: var(--card-line-height, 1em); line-height: var(--card-line-height, inherit); overflow: hidden; white-space: nowrap; text-overflow: clip; }
.pig-analysis-card-portrait { z-index: 30; transform: translateY(24px) scale(.96); }
.pig-analysis-card-text-unit { z-index: 40; }
.pig-analysis-card-text-unit .pig-analysis-card-text { z-index: 41; }
.pig-analysis-card-portrait.is-on { animation: analysisPortraitRise .42s cubic-bezier(.2,.88,.28,1) var(--layer-delay) both; }
@keyframes analysisPortraitRise { from { opacity: 0; transform: translateY(24px) scale(.96); } 70% { opacity: 1; transform: translateY(-3px) scale(1.012); } to { opacity: 1; transform: none; } }
.pig-analysis-title { position: relative; z-index: 1; margin-top: 3px; font-size: 19px; font-weight: 900; letter-spacing: .04em; }
.pig-analysis-step { position: relative; z-index: 1; min-height: 20px; color: #a3828c; font-size: 11px; text-align: center; }
.pig-analysis-continue { position: relative; z-index: 1; min-width: 190px; margin-top: 8px; padding: 12px 22px; border: 0; border-radius: 999px; background: #bd7188; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 9px 20px rgba(155,84,111,.2); cursor: pointer; transition: transform .18s ease, opacity .18s ease; }
.pig-analysis-continue:active { transform: scale(.97); opacity: .88; }
.pig-analysis-continue:focus-visible { outline: 3px solid rgba(189,113,136,.32); outline-offset: 3px; }
.pig-analysis-continue:disabled { opacity: .58; cursor: default; }
.pig-analysis-card-ready .pig-analysis-title { color: #a75d76; }
.pig-analysis-card-ready .pig-analysis-card-stack { animation: analysisCardReady .2s ease both; }
@keyframes analysisCardReady { 50% { transform: translateY(-4px) scale(1.012); } }
.pig-analysis-done { opacity: 0; transform: scale(1.03); transition: opacity .28s ease, transform .28s ease; }

@media (max-height: 740px) {
  /* lab 场景高度由 aspect-ratio 推导，不能给 min-height：高度被顶起后宽度会被比例反推、突破容器 */
  .pig-scene-art:not(.pig-lab-scene) { min-height: 180px; }
  .pig-scene-center { font-size: 69px; }
  .pig-object { min-height: 91px; padding-top: 8px; }
  .pig-object-icon { font-size: 27px; }
  .pig-object-hint { display: none; }
  .pig-question-head { padding-bottom: 9px; }
  .pig-question-head b { min-height: 43px; font-size: 16px; }
}

@media (max-width: 350px) {
  .pig-object-grid { gap: 7px; }
  .pig-object { min-height: 99px; padding-left: 5px; padding-right: 5px; }
  .pig-object-label { font-size: 11px; }
  .pig-object-quote { font-size: 9px; }
}

@media (max-width: 375px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .pc-opts { gap: 8px; margin-top: 12px; }
  .pc-opt { padding: 8px; gap: 6px; border-radius: 10px; }
  .pc-dot { width: 28px; height: 28px; font-size: 12px; }
  .pc-txt { font-size: 12px; }
  .pc-qcard { font-size: 14px; padding: 10px 16px; }
  .pc-stage { border-radius: 16px; }
}

/* ---------- Q1 长图分层互动小剧场 ---------- */
.pig-q1-question .pig-question-head { padding-bottom: 8px; }
.pig-q1-question .pig-question-head b { font-size: clamp(18px,5.2vw,23px); }
.pig-q1-question .pig-tip { margin-top: 9px; color: #9f727c; font-weight: 800; }
.pig-q1-story { position: relative; width: 100%; min-height: 0; aspect-ratio: 9 / 15.2; overflow: hidden; border-radius: 22px; background: #342c43; isolation: isolate; }
.pig-q1-story::before, .pig-q1-story::after { display: none; }
.pig-q1-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; animation: q1LongBgIn 1.05s cubic-bezier(.2,.8,.25,1) both; }
.pig-q1-vignette { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(20,15,30,.16),transparent 25%,transparent 68%,rgba(24,14,19,.28)), radial-gradient(circle at 50% 44%,transparent 45%,rgba(20,14,23,.22)); pointer-events: none; }
.pig-q1-story .pig-scene-label { z-index: 14; top: 14px; left: 14px; }
.pig-q1-story .pig-scene-caption { z-index: 14; top: 49px; left: 16px; color: rgba(255,244,224,.8); }
.pig-q1-character { position: absolute; left: 50%; top: 24%; z-index: 5; width: 43%; aspect-ratio: 5 / 7; transform: translateX(-50%); animation: q1CharacterEnter .8s .28s cubic-bezier(.2,.85,.25,1) both; }
.pig-q1-character-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.98); transition: opacity .12s linear; filter: drop-shadow(0 15px 12px rgba(23,14,22,.28)); }
.pig-q1-frame-idle { opacity: 1; animation: q1IdleBreath 2.8s 1.3s ease-in-out infinite; }
.pig-q1-dialogue { position: absolute; left: 51%; top: 18%; bottom: auto; z-index: 15; padding: 9px 13px; border-radius: 15px; background: rgba(255,255,255,.95); color: #4b343b; box-shadow: 0 8px 22px rgba(24,15,23,.24); font-size: clamp(13px,3.8vw,16px); font-weight: 900; white-space: nowrap; transform: translateX(-50%); animation: q1DialogueIn .52s 1.05s cubic-bezier(.2,.9,.25,1.2) both; }
.pig-q1-dialogue::after { content: ''; position: absolute; left: 50%; bottom: -8px; border: 8px solid transparent; border-top-color: rgba(255,255,255,.95); transform: translateX(-50%); }
.pig-q1-result-line { position: absolute; left: 50%; bottom: 19%; z-index: 16; width: max-content; max-width: 78%; padding: 8px 14px; border-radius: 999px; color: #fff7e9; background: rgba(42,27,38,.78); box-shadow: 0 9px 24px rgba(18,10,18,.22); font-size: 12px; font-weight: 900; letter-spacing: .04em; opacity: 0; transform: translate(-50%,10px); backdrop-filter: blur(8px); }
.pig-q1-hotspot { position: absolute; z-index: 10; display: grid; place-items: center; width: 22%; min-height: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; color: #fff6e8; background: transparent; box-shadow: none; cursor: pointer; opacity: 0; touch-action: manipulation; animation: q1HotspotIn .42s var(--hotspot-delay) ease forwards; }
.pig-q1-hotspot-menu { --hotspot-delay:1.45s; left: 9%; top: 61%; }
.pig-q1-hotspot-clock { --hotspot-delay:1.58s; right: 6%; top: 10%; }
.pig-q1-hotspot-map { --hotspot-delay:1.71s; right: 9%; top: 61%; }
.pig-q1-hotspot-exit { --hotspot-delay:1.84s; right: 2%; top: 42%; }
.pig-q1-hotspot-ring { position: absolute; inset: 14%; border: 2px solid rgba(255,221,159,.75); border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,211,125,.4); animation: q1HotspotPulse 2s var(--hotspot-delay) ease-out infinite; }
.pig-q1-hotspot-icon { position: relative; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(45,31,43,.72); box-shadow: 0 7px 17px rgba(25,14,23,.22); font-size: 23px; backdrop-filter: blur(7px); }
.pig-q1-hotspot-label, .pig-q1-hotspot-quote { position: absolute; left: 50%; z-index: 2; width: max-content; transform: translateX(-50%); text-shadow: 0 2px 5px rgba(25,13,20,.8); }
.pig-q1-hotspot-label { top: 77%; font-size: 10px; font-weight: 900; }
.pig-q1-hotspot-quote { top: 92%; color: #ffe1ab; font-size: 9px; font-weight: 800; }
.pig-q1-hotspot:active .pig-q1-hotspot-icon { transform: scale(.9); }
.pig-q1-stage.is-locked .pig-q1-hotspot:not(.selected) { opacity: 0 !important; transform: scale(.65); pointer-events: none; transition: opacity .18s ease,transform .18s ease; }
.pig-q1-stage.is-locked .pig-q1-hotspot.selected { opacity: 0 !important; pointer-events: none; animation: none; transition: opacity .16s ease; }
.pig-q1-stage.is-locked .pig-q1-dialogue { opacity: 0; transform: translate(-50%,-7px) scale(.92); transition: opacity .16s ease,transform .16s ease; }
.pig-q1-stage.is-menu-selected .pig-q1-frame-idle, .pig-q1-stage.is-clock-selected .pig-q1-frame-idle, .pig-q1-stage.is-map-selected .pig-q1-frame-idle, .pig-q1-stage.is-exit-selected .pig-q1-frame-idle { opacity: 0; animation: none; }
.pig-q1-stage.is-menu-selected .pig-q1-frame-menu { animation: q1MenuActor 1.35s cubic-bezier(.2,.8,.25,1) both; }
.pig-q1-stage.is-clock-selected .pig-q1-frame-clock { animation: q1ClockActor 1.35s cubic-bezier(.2,.8,.25,1) both; }
.pig-q1-stage.is-map-selected .pig-q1-frame-map { animation: q1MapActor 1.35s cubic-bezier(.2,.8,.25,1) both; }
.pig-q1-stage.is-exit-selected .pig-q1-frame-exit { animation: q1ExitActor 1.35s cubic-bezier(.2,.8,.25,1) both; }
.pig-q1-stage.is-menu-selected .pig-q1-result-line::before { content: '他第一反应：吃啥？'; }
.pig-q1-stage.is-clock-selected .pig-q1-result-line::before { content: '他第一反应：现在？'; }
.pig-q1-stage.is-map-selected .pig-q1-result-line::before { content: '他第一反应：去哪？'; }
.pig-q1-stage.is-exit-selected .pig-q1-result-line::before { content: '他第一反应：走。'; }
.pig-q1-stage.is-locked .pig-q1-result-line { animation: q1ResultLine .4s .72s ease both; }
.pig-q1-curtain { position: absolute; top: 0; bottom: 0; z-index: 30; width: 52%; background: #281f31; transform: scaleX(0); pointer-events: none; }
.pig-q1-curtain-left { left: 0; transform-origin: left; }
.pig-q1-curtain-right { right: 0; transform-origin: right; }
.pig-q1-question.pig-q1-leaving .pig-q1-curtain { animation: q1CurtainClose .36s cubic-bezier(.65,0,.85,1) both; }
.pig-q1-question.pig-q1-leaving { pointer-events: none; }
@keyframes q1LongBgIn { from { opacity: 0; transform: scale(1.08); filter: blur(5px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes q1CharacterEnter { from { opacity: 0; transform: translate(-50%,28px) scale(.9); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes q1IdleBreath { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } }
@keyframes q1HotspotIn { from { opacity: 0; transform: scale(.62); } to { opacity: 1; transform: scale(1); } }
@keyframes q1HotspotPulse { 0% { opacity: .9; box-shadow: 0 0 0 0 rgba(255,211,125,.42); } 75%,100% { opacity: .15; box-shadow: 0 0 0 17px rgba(255,211,125,0); } }
@keyframes q1MenuActor { 0% { opacity: 0; transform: translateY(10px) scale(.98); } 13% { opacity: 1; } 42% { transform: translateY(2px) rotate(-2deg) scale(1.025); } 68% { transform: translateY(0) rotate(1.5deg) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes q1ClockActor { 0% { opacity: 0; transform: translateX(-8px) scale(.98); } 13% { opacity: 1; } 38% { transform: translateX(3px) rotate(2deg) scale(1.02); } 62% { transform: translateX(0) rotate(-1deg); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes q1MapActor { 0% { opacity: 0; transform: translateY(12px) scale(.96); } 13% { opacity: 1; } 43% { transform: translateY(-3px) scale(1.035); } 72% { transform: translateY(1px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes q1ExitActor { 0% { opacity: 0; transform: translateX(-8px) scale(.96); } 13% { opacity: 1; } 44% { transform: translateX(18px) rotate(1deg) scale(1.02); } 75% { transform: translateX(45px) scale(1); } 100% { opacity: 1; transform: translateX(65px) scale(.97); } }
@keyframes q1ResultLine { from { opacity: 0; transform: translate(-50%,10px) scale(.94); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes q1CurtainClose { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes q1DialogueIn { from { opacity: 0; transform: translate(-50%,9px) scale(.84); } 72% { opacity: 1; transform: translate(-50%,-2px) scale(1.04); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@media (max-height:740px) { .pig-q1-story { max-height: 58dvh; aspect-ratio: 9 / 14.3; } .pig-q1-question .pig-question-head b { min-height: 0; } .pig-lab-stage-wrap { margin-top: 8px; } }
@media (max-width:350px) { .pig-q1-hotspot-icon { width: 36px; height: 36px; font-size: 20px; } .pig-q1-hotspot-label { font-size: 9px; } .pig-q1-hotspot-quote { font-size: 8px; } }

/* ---------- Q1 校园地图选项布局（图片版） ---------- */
/* container-type: 让舞台成为"尺寸容器"，元素外观值可用 cqw（1cqw=舞台宽1%）。
   设计基准 460px（编辑器舞台最宽），1px = 0.2174cqw，任何屏幕下字号/圆角/边框
   都跟着舞台等比缩放，手机和电脑比例完全一致（数据里的 fontSize 语义=460px 设计宽下的 px） */
.pig-q1-map { position: relative; width: 100%; min-height: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: #f7f0e6; isolation: isolate; container-type: inline-size; box-shadow: 0 14px 34px rgba(90,55,45,.14); }
.pig-q1-map::before, .pig-q1-map::after { display: none; }
.pig-q1-map-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; user-select: none; filter: saturate(1.06) contrast(1.03); animation: pigSceneIn .85s ease both; transition: filter .7s ease, opacity .7s ease; }
.pig-quiz-page.pig-bg-softened .pig-q1-map-bg { opacity: .56; filter: saturate(.82) contrast(.96) blur(7px); transform: scale(1.035); }
.pig-quiz-page.pig-bg-softened .pig-q1-map::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(255,255,255,.12); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pig-q1-map-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 30%, transparent 42%, rgba(70,45,35,.16) 96%), linear-gradient(180deg, rgba(70,45,35,.08), transparent 16%); pointer-events: none; }
.pig-q1-cartoon-font, .pig-question-head b, .pig-q1-subtitle, .pig-q1-map-quote, .pig-q1-map-badge { font-family: "Yuanti SC", "YouYuan", "幼圆", "Comic Sans MS", "PingFang SC", "Microsoft YaHei", sans-serif; }
.pig-q1-subtitle { display: inline-block; margin-top: 16px; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--pig-accent, #b88aa8); letter-spacing: .04em; background: rgba(224,106,140,.10); }
.pig-q1-map-options { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; }

/* 元素级地图：每个元素（bg/spot/badge/quote/char/text）独立绝对定位，
   几何全部来自 pig.json 的 layout.elements（inline style），这里只管外观 */
.pig-el { position: absolute; pointer-events: none; z-index: 3; }

/* bg = 场景底图（编辑器可拖/缩放），几何由 inline style 覆盖默认铺满。
   不做磨砂虚化，仅轻微提饱和/对比；--bg-op 控制底图不透明度（编辑器可调） */
.pig-el.pig-el-bg { z-index: 0; inset: auto; width: auto; height: auto; object-fit: cover; object-position: center; user-select: none; opacity: var(--bg-op, 1); filter: saturate(1.06) contrast(1.03); }

/* spot = 玻璃贴纸 + 唯一点击区（外观 px 值全部换算成 cqw，1px≈0.2174cqw，随舞台等比缩放） */
.pig-q1-map-spot {
  border: 0; cursor: pointer; touch-action: manipulation; z-index: 3; pointer-events: auto;
  border-radius: var(--spot-radius, 4.783cqw);
  background: var(--spot-bg, rgba(255,255,255,.34));
  border: 0.2174cqw solid rgba(255,255,255,.55);
  box-shadow: 0 1.739cqw 4.348cqw rgba(60,40,30,.16), inset 0 0.2174cqw 0 rgba(255,255,255,.85);
  backdrop-filter: blur(var(--spot-blur, 1.304cqw)); -webkit-backdrop-filter: blur(var(--spot-blur, 1.304cqw)); /* 毛玻璃：磨砂框后背景（1.304cqw≈6px 随舞台缩放） */
  transform: rotate(var(--tilt, 0deg));
  animation: q1MapOptIn .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--delay, 0ms);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.pig-el[data-prefix="a"].pig-q1-map-spot { --spot-bg: rgba(255,235,196,.55); --spot-radius: 5.652cqw 3.913cqw 5.217cqw 4.348cqw; }
.pig-el[data-prefix="b"].pig-q1-map-spot { --spot-bg: rgba(255,224,228,.55); --spot-radius: 3.913cqw 5.652cqw 4.348cqw 5.217cqw; }
.pig-el[data-prefix="c"].pig-q1-map-spot { --spot-bg: rgba(210,238,255,.55); --spot-radius: 5.217cqw 4.348cqw 5.652cqw 3.913cqw; }
.pig-el[data-prefix="d"].pig-q1-map-spot { --spot-bg: rgba(216,242,206,.55); --spot-radius: 4.348cqw 5.217cqw 3.913cqw 5.652cqw; }
/* 每题独立构图语言：几何由 pig.json 控制，这里为不同页面补充专属轮廓与材质节奏。 */
.pig-art-diagonal .pig-q1-map-spot { border-radius: 7cqw 3.4cqw 6.2cqw 4cqw; }
.pig-art-midnight-collage .pig-q1-map-spot { border-radius: 3.6cqw 6.2cqw 4.2cqw 5.8cqw; }
.pig-art-triangle .pig-q1-map-spot[data-prefix="a"] { border-radius: 9cqw 9cqw 4cqw 4cqw; }
.pig-art-triangle .pig-q1-map-spot[data-prefix="b"], .pig-art-triangle .pig-q1-map-spot[data-prefix="c"] { border-radius: 4cqw 4cqw 9cqw 9cqw; }
.pig-art-petals .pig-q1-map-spot[data-prefix="a"] { border-radius: 13cqw 4cqw 10cqw 5cqw; }
.pig-art-petals .pig-q1-map-spot[data-prefix="b"] { border-radius: 4cqw 13cqw 5cqw 10cqw; }
.pig-art-petals .pig-q1-map-spot[data-prefix="c"] { border-radius: 5cqw 10cqw 4cqw 13cqw; }
.pig-art-petals .pig-q1-map-spot[data-prefix="d"] { border-radius: 10cqw 5cqw 13cqw 4cqw; }
.pig-art-elevator-stack .pig-q1-map-spot { border-radius: 3.6cqw 8cqw 3.6cqw 8cqw; }
.pig-art-message-stream .pig-q1-map-spot { border-radius: 10cqw 10cqw 10cqw 3cqw; }
.pig-art-message-stream .pig-q1-map-spot[data-prefix="b"], .pig-art-message-stream .pig-q1-map-spot[data-prefix="d"] { border-radius: 10cqw 10cqw 3cqw 10cqw; }
.pig-art-crosswalk .pig-q1-map-spot { border-radius: 4cqw; border-width: .27cqw; }
/* 原纵向单列题改为人物出框舞台：点击区保持等大无交叠，人物独立放大并轻微越过卡片上沿。 */
.pig-art-elevator-stack .pig-q1-map-char,
.pig-art-message-stream .pig-q1-map-char,
.pig-art-crosswalk .pig-q1-map-char,
.pig-art-battery .pig-q1-map-char { object-position: center bottom; }
.pig-art-elevator-stack .pig-q1-map-quote,
.pig-art-message-stream .pig-q1-map-quote,
.pig-art-crosswalk .pig-q1-map-quote,
.pig-art-battery .pig-q1-map-quote { display: flex; align-items: center; justify-content: center; text-align: center; }
.pig-art-scrapbook .pig-q1-map-spot { border-radius: 2.6cqw; box-shadow: 0 1.7cqw 4cqw rgba(60,40,30,.17), inset 0 0 0 .35cqw rgba(255,255,255,.22); }
.pig-art-blueprint .pig-q1-map-spot { border-radius: 2.4cqw; clip-path: polygon(0 0,92% 0,100% 10%,100% 100%,8% 100%,0 90%); }
.pig-art-battery .pig-q1-map-spot { border-radius: 999px; border-width: .33cqw; }
.pig-art-orbit .pig-q1-map-spot { border-radius: 48% 52% 45% 55% / 55% 43% 57% 45%; }
/* Q9 火锅环形布局：用径向遮罩直接挖出四分之一圆，边缘是真正连续曲线，不再用 polygon 折线模拟。 */
.pig-hotpot-ring-stage { --hotpot-notch-radius: 19.8cqw; }
.pig-hotpot-ring-stage .pig-q1-map-spot { border-radius: 6.1cqw; -webkit-mask-image: var(--hotpot-mask); mask-image: var(--hotpot-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.pig-hotpot-ring-stage .pig-q1-map-spot[data-prefix="a"] { --hotpot-mask: radial-gradient(circle var(--hotpot-notch-radius) at 100% 100%, transparent calc(100% - .14cqw), #000 100%); }
.pig-hotpot-ring-stage .pig-q1-map-spot[data-prefix="b"] { --hotpot-mask: radial-gradient(circle var(--hotpot-notch-radius) at 0 100%, transparent calc(100% - .14cqw), #000 100%); }
.pig-hotpot-ring-stage .pig-q1-map-spot[data-prefix="c"] { --hotpot-mask: radial-gradient(circle var(--hotpot-notch-radius) at 100% 0, transparent calc(100% - .14cqw), #000 100%); }
.pig-hotpot-ring-stage .pig-q1-map-spot[data-prefix="d"] { --hotpot-mask: radial-gradient(circle var(--hotpot-notch-radius) at 0 0, transparent calc(100% - .14cqw), #000 100%); }
@media (hover: hover) {
  .pig-q1-map-spot:hover { box-shadow: 0 3.043cqw 6.957cqw rgba(80,45,35,.24), inset 0 0.2174cqw 0 rgba(255,255,255,.95); }
}
.pig-q1-map-spot:active { transform: rotate(var(--tilt, 0deg)) scale(.97); }
.pig-q1-map-spot.selected {
  background: rgba(255,255,255,.92);
  border-color: rgba(224,106,140,.6);
  box-shadow: 0 3.043cqw 7.391cqw rgba(224,106,140,.35), inset 0 0.2174cqw 0 rgba(255,255,255,.95);
}
.pig-q1-map-spot.pig-object-dim { opacity: .32; }

/* char = 人物图（最顶层：盖住字母标/台词，本身 pointer-events:none 不影响点击） */
.pig-q1-map-char {
  z-index: 6; object-fit: contain; object-position: center top;
  filter: drop-shadow(0 1.3043cqw 2.1739cqw rgba(50,30,30,.2));
  transform: rotate(var(--tilt, 0deg));
  animation: q1MapOptIn .55s cubic-bezier(.34,1.56,.64,1) both, q1CharIdle 3.2s ease-in-out infinite;
  animation-delay: var(--delay, 0ms), calc(var(--delay, 0ms) + .55s);
}

/* hotpot = Q9 中央独立火锅素材 */
.pig-q1-map-hotpot {
  z-index: 7; object-fit: contain; object-position: center center;
  filter: drop-shadow(0 1.3043cqw 2.1739cqw rgba(50,30,30,.2));
  pointer-events: none;
  animation: q1MapOptIn .55s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: var(--delay, 0ms);
}

/* badge = 圆形字母标 */
.pig-q1-map-badge {
  z-index: 5; width: auto; height: auto;
  /* 宽度 % 相对舞台宽、高度 % 相对舞台高（舞台 4:5），数据里两者相同会渲染成椭圆；
     渲染时只写 width，高度由 aspect-ratio:1 推导，保证正圆 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f28ca8, var(--pig-accent, #e06a8c) 72%);
  color: #fff; font-size: 2.609cqw; font-weight: 800; line-height: 1;
  display: grid; place-items: center;
  border: 0.3261cqw solid rgba(255,255,255,.95);
  box-shadow: 0 0.8696cqw 2.609cqw rgba(224,106,140,.45);
  transform: rotate(var(--tilt, 0deg));
  animation: q1BadgePop .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--delay, 0ms);
}
.pig-el-badge.selected { background: radial-gradient(circle at 30% 30%, #f2a75b, #e08a3c 72%); box-shadow: 0 0.8696cqw 3.043cqw rgba(224,138,60,.5); }

/* quote = 台词气泡 */
.pig-q1-map-quote {
  z-index: 5; margin: 0; padding: 0.6522cqw 2.1739cqw; border-radius: 999px;
  font-size: 2.826cqw; font-weight: 800; letter-spacing: .02em; color: #7a4a40;
  background: rgba(255,255,255,.92); border: 0.2174cqw solid rgba(224,106,140,.28);
  box-shadow: 0 0.4348cqw 1.739cqw rgba(80,45,35,.10);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: rotate(var(--tilt, 0deg));
  animation: q1MapOptIn .5s ease both; animation-delay: var(--delay, 0ms);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.pig-el-quote.selected { background: var(--pig-accent, #e06a8c); color: #fff; border-color: transparent; }

/* text = 自由文本（层级在人物下方：3 < char 4，与 spot 同层） */
.pig-el-text { z-index: 3; line-height: 1.3; text-shadow: 0 0.2174cqw 0.4348cqw rgba(255,255,255,.5); transform: rotate(var(--tilt, 0deg)); animation: q1MapOptIn .5s ease both; animation-delay: var(--delay, 0ms); }

/* 选中/变暗联动 */
.pig-el.pig-object-dim { opacity: .3; }

@keyframes q1MapOptIn { from { opacity: 0; transform: translateY(3.043cqw) scale(.94) rotate(var(--tilt, 0deg)); } to { opacity: 1; transform: rotate(var(--tilt, 0deg)); } }
@keyframes q1BadgePop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes q1CharIdle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.8696cqw; } }
.pig-q1-leaving .pig-q1-map { opacity: 0; transform: scale(.96); transition: opacity .28s ease, transform .28s ease; pointer-events: none; }

/* 舞台外壳去掉白底/圆角/阴影，整张背景铺满，四周不留白边 */
.pig-q2-map { border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.pig-q2-map .pig-q1-map-bg { object-position: center center; }

@media (max-height: 740px) {
  /* 短屏（手机）不能压 max-height：舞台高度被压扁但宽度仍 100%，
     4:5 比例被破坏 → 所有按 % 定位的元素跑位、变形。
     改为压宽度并居中：宽 = 58dvh × (4/5) ≈ 46.4dvh，高度仍由 aspect-ratio:4/5 推导，
     比例永远和编辑器舞台一致。 */
  .pig-q1-map { width: min(100%, 46.4dvh); margin-inline: auto; }
  /* lab 题：选项区背景透明、无大图，压窄后比题目场景窄一圈（用户反馈"选项被缩放了"），
     直接撑满与题目场景等宽；lab 题页面改纵向滚动，避免场景+选项超屏被 overflow:hidden 截断 */
  .pig-lab-shell .pig-q1-map { width: 100%; margin-inline: 0; }
  .pig-quiz-page:has(.pig-lab-shell) { overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pig-q1-map-char, .pig-q1-map-badge, .pig-el { animation: none !important; }
}

/* ---------- 友友观察室角色报告增强 ---------- */

.pig-report .pig-hero::before { content: 'FRIEND OBSERVATORY / YOUR VIEW'; display: block; margin-bottom: 12px; color: #b68a98; font: 800 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: .16em; }
.pig-report .card.pig-section { border: 1px solid rgba(224,106,140,.12); box-shadow: 0 7px 20px rgba(102,54,69,.07); }
.pig-report-intro { font-weight: 700; letter-spacing: .03em; line-height: 1.55; }
.pig-card-kicker { display: flex; align-items: center; gap: 7px; }
.pig-card-kicker::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(224,106,140,.32), transparent); }
.pig-verdict { background: linear-gradient(135deg, #fff, #fff4f7); }
.pig-report .result-actions { padding-bottom: calc(12px + var(--safe-b)); }
.pig-report .result-actions .btn-ghost { margin-top: 8px; }
.friend-final-portrait-card { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; background: linear-gradient(145deg, #fff8f8, #f7f3fb); }
.friend-final-portrait-frame { display: grid; place-items: end center; width: 92px; height: 118px; overflow: hidden; border-radius: 24px; background: linear-gradient(180deg, #fff, #fbeaf0); }
.friend-final-portrait-frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 6px rgba(80,48,48,.14)); }
.friend-final-portrait-frame span { font-size: 50px; padding-bottom: 24px; }
.friend-final-portrait-label { color: #a57d8b; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.friend-final-portrait-card h4 { margin: 5px 0 0; }
.friend-final-portrait-card p { margin: 4px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.friend-share-hero {
  position: relative;
  overflow: hidden;
  margin: 0 -2px 16px;
  padding: 20px 16px 16px;
  border: 1px solid rgba(224,106,140,.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 2%, rgba(255,220,169,.72), transparent 32%),
    linear-gradient(145deg, #fff9f8 0%, #fff0f4 58%, #f5effb 100%);
  box-shadow: 0 14px 30px rgba(185,91,121,.16), inset 0 1px 0 rgba(255,255,255,.92);
  text-align: center;
}
.friend-share-hero::before {
  content: '';
  position: absolute;
  width: 112px;
  height: 112px;
  left: -48px;
  bottom: -62px;
  border: 1px solid rgba(224,106,140,.14);
  border-radius: 50%;
}
.friend-share-hero::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  top: 22px;
  right: 24px;
  border-radius: 50%;
  background: #f0a75b;
  box-shadow: 15px 20px 0 rgba(224,106,140,.35), -13px 32px 0 rgba(139,123,216,.35);
}
.friend-share-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #b26178;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 3px 10px rgba(185,91,121,.09);
}
.friend-share-hero h3 {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  color: #633547;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: .02em;
}
.friend-share-explain {
  position: relative;
  z-index: 1;
  margin: 9px 2px 13px;
  color: #805f6d;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.friend-share-flow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 0 15px;
  color: #966778;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.friend-share-flow span,
.friend-share-flow strong {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
}
.friend-share-flow strong { color: #7964a4; background: rgba(238,234,251,.9); }
.friend-share-flow i { color: #d9899f; font-size: 13px; font-style: normal; }
.friend-share-primary {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.42);
  background: linear-gradient(105deg, #d9527e 0%, #e67876 54%, #eb9a5f 100%);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 11px 24px rgba(211,83,123,.3), inset 0 1px 0 rgba(255,255,255,.28);
  animation: friendSharePulse 2.8s ease-in-out infinite;
}
.friend-share-primary span { flex: 1; }
.friend-share-primary b { font-size: 21px; line-height: 1; }
.friend-share-primary:active { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .friend-share-primary { animation: none; }
}
.friend-share-hero small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  color: #aa8995;
  font-size: 10px;
  line-height: 1.5;
}
@keyframes friendSharePulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 11px 24px rgba(211,83,123,.3), inset 0 1px 0 rgba(255,255,255,.28); }
  50% { transform: translateY(-2px); box-shadow: 0 15px 29px rgba(211,83,123,.38), inset 0 1px 0 rgba(255,255,255,.28); }
}
.pig-share-tip { line-height: 1.5; }

.friend-hero { padding-bottom: 22px; }
.friend-card-preview-wrap { margin: 0 0 16px; padding: 10px; border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(250,238,242,.82)); box-shadow: 0 12px 30px rgba(112,62,80,.10); }
.friend-card-preview { position: relative; width: 100%; aspect-ratio: 9 / 11; overflow: hidden; border-radius: 20px; background: var(--card-bg, #fff7ef); isolation: isolate; }
.friend-card-preview::after { content: ''; position: absolute; inset: 0; z-index: 40; pointer-events: none; border: 1px solid rgba(126,82,99,.16); border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.friend-card-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #a57d8b; font-size: 12px; }
.friend-card-preview-fallback { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: #563b45; text-align: center; }
.friend-card-preview-fallback span { font-size: 52px; }
.friend-card-preview-fallback b { font-size: 20px; }
.friend-card-preview-fallback small { color: var(--ink-2); font-size: 12px; }
.friend-card-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.friend-card-preview.is-ready { animation: friendCardPreviewIn .42s ease both; }
@keyframes friendCardPreviewIn { from { opacity: .3; transform: translateY(6px) scale(.992); } to { opacity: 1; transform: none; } }
.friend-role-portrait { display: grid; place-items: center; width: 116px; height: 116px; margin: 0 auto 12px; overflow: hidden; border: 1px solid rgba(224,106,140,.18); border-radius: 34px; background: linear-gradient(145deg, #fff, #fff1f5); box-shadow: 0 12px 28px rgba(112,62,80,.12); }
.friend-role-portrait.has-image { background: linear-gradient(145deg, #fff8f7, #f7f1fb); }
.friend-role-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 8px rgba(80,48,48,.16)); }
.friend-role-icon { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 12px; border: 1px solid rgba(224,106,140,.18); border-radius: 30px; background: linear-gradient(145deg, #fff, #fff1f5); box-shadow: 0 12px 28px rgba(112,62,80,.12); font-size: 48px; }
.friend-hero-eyebrow { margin-bottom: 3px; color: #a57d8b; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.friend-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 13px; }
.friend-keywords span, .friend-side-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 11px; border-radius: 99px; background: #fbe9ef; color: #9a536b; font-size: 11px; font-weight: 800; }
.friend-keywords span:nth-child(2) { background: #fbf1dc; color: #936b2f; }
.friend-keywords span:nth-child(3) { background: #eeeafb; color: #7461a0; }
.friend-strength-list { padding-top: 17px; }
.friend-strength { display: grid; grid-template-columns: 38px 1fr; gap: 11px; padding: 14px 0; border-top: 1px solid rgba(115,78,92,.09); }
.friend-strength:first-of-type { border-top: 0; padding-top: 5px; }
.friend-strength-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, #fbe5ed, #fff5dd); color: #b25f79; font-size: 11px; font-weight: 900; }
.friend-strength b { color: #563b45; font-size: 15px; }
.friend-section-lead { margin: 0 0 10px; color: #8e7380; font-size: 12px; line-height: 1.7; }
.friend-observe-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.friend-observe-chips span { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 99px; background: #fff3e6; color: #9a6a3c; font-size: 11px; font-weight: 800; }
.friend-summary-extra { margin: 10px 0 0; color: #8e7380; font-size: 13px; line-height: 1.75; }
.friend-activity-card li b { display: block; color: #4d3540; font-size: 13px; line-height: 1.45; }
.friend-activity-card li p { margin: 4px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.68; }
.friend-strength p, .friend-summary-card p, .friend-hidden-card p, .friend-companion-card p, .friend-consistency-card p { margin: 5px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.72; }
.friend-summary-card { background: linear-gradient(145deg, #fff, #fff5f8); }
.friend-profile-card { position: relative; overflow: hidden; padding: 19px 17px 17px; }
.friend-profile-card::before { content: ''; position: absolute; top: -42px; right: -34px; width: 132px; height: 132px; border-radius: 50%; background: rgba(251,227,235,.52); pointer-events: none; }
.friend-summary-heading { position: relative; z-index: 1; padding-bottom: 13px; border-bottom: 1px solid rgba(115,78,92,.1); }
.friend-summary-kicker { display: block; margin-bottom: 6px; color: #b26e82; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.friend-summary-heading h4 { margin-bottom: 5px; font-size: 20px; line-height: 1.35; }
.friend-summary-subtitle { margin: 0; color: #9a7b87; font-size: 12px; line-height: 1.6; }
.friend-summary-opening { position: relative; z-index: 1; margin: 15px 0 0; color: #563b45; font-size: 15px; font-weight: 600; line-height: 1.92; }
.friend-summary-sides { position: relative; z-index: 1; margin-top: 15px; padding: 13px 13px 12px; border-radius: 14px; background: rgba(255,255,255,.78); }
.friend-summary-sides-label { display: block; color: #b68a98; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.friend-summary-sides .friend-side-tags { margin-top: 9px; }
.friend-summary-sides .friend-summary-extra { margin-top: 11px; font-size: 12px; }
.friend-summary-card .friend-side-tags { margin-top: 14px; }
.friend-profile-texture { margin-top: 14px; padding: 12px 13px; border-left: 3px solid #d6b27a; border-radius: 0 12px 12px 0; background: rgba(255,250,238,.9); }
.friend-profile-texture span, .friend-profile-support span { color: #a27b42; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.friend-profile-texture p { margin: 5px 0 0; color: #795c66; font-size: 12px; line-height: 1.72; }
.friend-profile-gift { margin-top: 12px; padding: 12px 13px; border-left: 3px solid #e2a2b4; border-radius: 0 12px 12px 0; background: rgba(255,248,242,.82); }
.friend-profile-gift span { color: #ae7183; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.friend-profile-gift p { margin: 5px 0 0; color: #795c66; font-size: 12px; line-height: 1.65; }
.friend-moments-card { background: linear-gradient(145deg, #fffdf7, #fff6e8); }
.friend-moment-list { display: grid; gap: 2px; }
.friend-moment { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(115,78,92,.09); }
.friend-moment:first-child { border-top: 0; padding-top: 3px; }
.friend-moment > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: #f8e7cb; color: #ae7c3e; font-size: 10px; font-weight: 900; }
.friend-moment b { color: #563b45; font-size: 13px; line-height: 1.5; }
.friend-moment p { margin: 4px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.65; }
.friend-subtype { display: inline-block; margin-top: 13px; padding: 5px 10px; border-radius: 10px; background: #f4eef8; color: #806a91; font-size: 11px; font-weight: 700; }
.friend-side-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.friend-side-tag { background: #eef2fb; color: #66779d; }
.friend-hidden-card { background: linear-gradient(145deg, #fff9ed, #fff); }
.friend-gift-card { background: linear-gradient(145deg, #f5f3fb, #fff); }
.friend-gift-card h4::before { content: '♡ '; color: #ad7896; }
.friend-profile-support { margin-top: 14px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.72); }
.friend-profile-support span { color: #7d759d; }
.friend-profile-support p { margin: 5px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.68; }
.friend-activity-card { background: linear-gradient(145deg, #f4f8fc, #fff); }
.friend-activity-card ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: activity; }
.friend-activity-card li { position: relative; min-height: 28px; padding: 5px 0 5px 38px; color: var(--ink-2); font-size: 13px; line-height: 1.45; counter-increment: activity; }
.friend-activity-card li::before { content: counter(activity, decimal-leading-zero); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #e7edf7; color: #6f80a2; font-size: 10px; font-weight: 900; }
.friend-hidden-card h4::before { content: '✦ '; color: #d18b48; }
.friend-companion-card b { display: block; color: #a45670; font-size: 15px; }
.friend-consistency-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.friend-consistency-label { color: var(--ink-3); font-size: 12px; }
.friend-consistency-card b { color: #9e536c; font-size: 21px; }
.friend-consistency-card small { display: block; margin-top: 11px; color: #a99099; font-size: 10px; line-height: 1.5; }
.friend-cliff { margin-top: 6px; }
.friend-continue { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 14px; color: #b68a98; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.friend-continue i { width: 7px; height: 7px; border-right: 2px solid #e06a8c; border-bottom: 2px solid #e06a8c; transform: rotate(45deg); animation: friendCliffPulse 1.4s ease-in-out infinite; }
@keyframes friendCliffPulse { 0%, 100% { opacity: .35; transform: translateY(-2px) rotate(45deg); } 50% { opacity: 1; transform: translateY(3px) rotate(45deg); } }
.friend-cliff-card { background: linear-gradient(165deg, #fff8fb, #f7f1fb 56%, #fff); overflow: hidden; }
.friend-cliff-card h3 { margin: 2px 0 8px; font-size: 20px; line-height: 1.35; color: #563b45; }
.friend-cliff-card > p { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; line-height: 1.78; }
.friend-locked-list { display: grid; gap: 10px; }
.friend-locked-chapter { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 11px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(251,233,239,.72)); position: relative; overflow: hidden; }
.friend-locked-chapter::after { content: ''; position: absolute; inset: 0 0 0 42%; background: linear-gradient(90deg, transparent, rgba(255,248,250,.92) 48%); }
.friend-locked-chapter > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: #f4e0e8; color: #b25f79; font-size: 10px; font-weight: 900; }
.friend-locked-chapter b { color: #563b45; font-size: 13px; }
.friend-locked-chapter p { margin: 3px 0 0; color: #9b899f; font-size: 12px; line-height: 1.5; filter: blur(.4px); }
.friend-unlock-cta { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(224,106,140,.22); }
.friend-unlock-cta p { margin: 0 0 12px; color: #795c66; font-size: 13px; line-height: 1.65; }
.friend-unlock-cta .btn-ghost { margin-top: 8px; }
.friend-unlock-cta small { display: block; margin-top: 10px; color: #a99099; font-size: 10px; line-height: 1.5; }
.friend-paid-body { display: grid; gap: 0; }
.friend-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; background: rgba(43, 29, 35, .46); backdrop-filter: blur(8px); }
.friend-overlay[hidden] { display: none; }
.friend-ad-sheet, .friend-pay-sheet { width: min(100%, 480px); padding: 28px 22px calc(22px + var(--safe-b)); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #fffaf7, #fff); text-align: center; box-shadow: 0 -18px 40px rgba(80,40,50,.18); }
.friend-ad-sheet span, .friend-pay-sheet span { color: #b68a98; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.friend-ad-sheet b { display: block; margin: 12px 0 6px; color: #e06a8c; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; }
.friend-pay-sheet strong { display: block; margin: 10px 0 8px; color: #a65382; font-size: 36px; }
.friend-ad-sheet p, .friend-pay-sheet p { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; }
.friend-ad-bar { height: 6px; overflow: hidden; border-radius: 99px; background: #f3e4ea; }
.friend-ad-bar i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #e06a8c, #f0a75b); transition: transform 8s linear; }
.friend-pay-sheet .btn-ghost { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .pig-question-shell, .pig-final-shell, .pig-cosmos-ring,
  .pig-analysis-card-unit, .pig-analysis-card-portrait, .pig-analysis-card-ready .pig-analysis-card-stack,
  .pig-analysis-card-glow { animation: none !important; transition: none !important; }
  .pig-bar-fill { transition: none; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(60px + var(--safe-b));
  transform: translateX(-50%) translateY(20px);
  background: rgba(43, 43, 43, .92);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 99;
  max-width: 80vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 对照页：左「我眼中的你」右「你眼中的你」 ---------- */
/* --pig 原本只定义在 .pig-report 作用域里，对照页取不到 → 第一根条 background
   解析失败、整条不可见。这里补上本页自己的一份。 */
.friend-compare { --pig: #e06a8c; --pig-soft: #fbe4ec; --compare-own: #8b7bd8; }
.friend-compare { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.friend-compare.reveal { opacity: 1; transform: none; }
.compare-hero { padding: 6px 2px 14px; text-align: center; }
.compare-eyebrow { color: var(--pig); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.compare-hero h2 { margin: 8px 0 6px; font-size: 21px; line-height: 1.36; color: #563b45; }
.compare-hero p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.75; }

.compare-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.compare-side { padding: 14px 10px; border-radius: 18px; background: linear-gradient(160deg, #fff, #fff6f9); text-align: center; }
.compare-side:last-child { background: linear-gradient(160deg, #fff, #f4f1fb); }
.compare-side-label { color: #9b7f8b; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.compare-side b { display: block; margin: 8px 0 2px; font-size: 15px; color: #4d3540; }
.compare-side p { margin: 0; color: #93808a; font-size: 11px; line-height: 1.5; }
.compare-portrait { width: 64px; height: 64px; margin: 8px auto 0; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f7ecf1; font-size: 22px; }
.compare-portrait.has-image { background: linear-gradient(145deg, #fff8f7, #f7f1fb); }
/* 与结果页同一套规则：contain + 底部对齐，人物完整可见不被裁掉 */
.compare-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 6px rgba(80,48,48,.14)); }
.compare-vs { color: #b9a2ac; font-size: 11px; font-weight: 800; letter-spacing: .06em; }

.compare-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.compare-stat b { display: block; font-size: 24px; color: var(--pig); }
.compare-stat span { color: var(--ink-3); font-size: 11px; }

.compare-legend { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--ink-3); font-size: 11px; }
.compare-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.compare-legend i.obs, .compare-bar span.obs { background: var(--pig, #e06a8c); }
.compare-legend i.own, .compare-bar span.own { background: var(--compare-own, #8b7bd8); }
/* 分数为 0 时也留一小段可见的条头，避免整根条看起来"没渲染" */
.compare-bar span { min-width: 3px; }

.compare-row { padding: 10px 0; border-bottom: 1px dashed rgba(224,106,140,.16); }
.compare-row:last-child { border-bottom: 0; }
.compare-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.compare-row-top span { font-size: 13px; color: #4d3540; font-weight: 700; }
.compare-row-top i { font-style: normal; font-size: 10px; color: #a99099; }
.compare-row.is-gap .compare-row-top i { color: var(--pig); font-weight: 800; }
.compare-bars { display: grid; gap: 6px; }
/* 每根条自带「谁看 + 分数」，两根条不再共用一行数字 */
.compare-bar-row { display: grid; grid-template-columns: 46px 1fr 28px; align-items: center; gap: 8px; }
.compare-bar-who { color: var(--ink-3); font-size: 10px; text-align: right; }
.compare-bar { height: 8px; border-radius: 999px; background: #f2e7ec; overflow: hidden; }
.compare-bar span { display: block; height: 100%; border-radius: 999px; }
.compare-bar-val { font-size: 11px; font-weight: 700; color: #6b4d58; text-align: right; }
.compare-row-reading { margin: 8px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.78; }
.compare-locked-note { margin: 10px 0 0; color: #a99099; font-size: 11px; }

.compare-narrative { background: linear-gradient(160deg, #fff, #fff6f9); }
.compare-narrative p { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.78; }
.compare-narrative p b { display: block; margin-bottom: 2px; color: #563b45; font-size: 12px; }
.compare-narrative-closing { padding-top: 10px; border-top: 1px dashed rgba(224,106,140,.22); }
.compare-narrative small { display: block; color: #a99099; font-size: 10px; line-height: 1.5; }

/* ---------- 桌面预览时加个边框 + 把场景收成手机尺寸，避免宽屏把地图撑大、选项被拉开 ---------- */
@media (min-width: 520px) {
  #app { box-shadow: 0 0 40px rgba(0, 0, 0, .15); }
  .pig-question-shell { max-width: 460px; margin-inline: auto; }
}