/* ===========================================================
   ISSAART · Brand Founder Personality Lab
   Magazine Cut · 米色纸 + 大字 + 错落卡片 + 漫画网点
   =========================================================== */

:root {
  /* 黑白灰调色板（warm paper + deep ink） */
  --bg:        #EFE4D0;   /* warm paper 主背景 */
  --bg-2:      #E3D6BC;   /* 深米色 */
  --bg-3:      #F5EEDF;   /* 浅米色 */
  --ink:       #0a0a0a;   /* deep ink 主文字 */
  --ink-2:     #1f1d18;   /* 软黑 */
  --gray-1:    #c9bda3;   /* 浅灰米 */
  --gray-2:    #8a8270;   /* 中灰 */
  --gray-3:    #5a544a;   /* 深灰 */
  --gray-4:    #2a2722;   /* 更深 */
  --white:     #ffffff;

  /* halftone 网点（漫画灰） */
  --dot-ink:  radial-gradient(circle, #0a0a0a 1.4px, transparent 1.7px);
  --dot-ink-s:radial-gradient(circle, #0a0a0a 1.0px, transparent 1.2px);
  --dot-w:    radial-gradient(circle, #fff 1.4px, transparent 1.7px);

  /* 字体 */
  --f-display: "Inter", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-serif:   "Georgia", "Times New Roman", "Songti SC", "Source Han Serif SC", serif;
  --f-mono:    ui-monospace, Menlo, monospace;

  /* 节奏 */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* 锁死禁止横向滚动 · iOS Safari 必须双层写 */
  overscroll-behavior-x: none; /* iOS 16+ 必备 · 防止内容被滑出安全区 */
  touch-action: pan-y;         /* 禁止水平触摸滑动 · iOS Safari 灰滚动条 */
  position: relative;
  width: 100%;
  max-width: 100%;
}
body { min-height: 100vh; overscroll-behavior-x: contain; }

#app {
  max-width: 480px; margin: 0 auto; padding: 0 22px 60px;
  position: relative;
  width: 100%;
  overflow-x: clip;             /* 第三层兜底 · clip 不创建滚动容器 · 比 hidden 更稳 */
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

/* ---------- 动效 ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.86); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cellIn {
  0%   { opacity: 0; transform: scale(.4); }
  65%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%  { transform: translate(6px, -4px) rotate(calc(var(--rot, 0deg) + 1deg)); }
  100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ringPulse {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes artFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(0); }
}
@keyframes spkTw {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.2); }
}

.rise { animation: riseIn .55s var(--ease) both; animation-delay: var(--d, 0ms); }
.pop  { animation: popIn .62s var(--spring) both; animation-delay: var(--d, 0ms); }
.cell-in { animation: cellIn .42s var(--spring) both; animation-delay: var(--d, 0ms); }
.float { animation: floatY 4.5s ease-in-out infinite; }
.drift { animation: drift 6s ease-in-out infinite; }

/* ---------- 屏幕切换 ---------- */
.screen { display: none; position: relative; }
.screen.is-active { display: block; animation: screenIn .48s var(--ease) both; }

/* ===========================================================
   INTRO · magazine cover
   =========================================================== */

/* 顶 nav 横条 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: 14px 0 12px;
  background: linear-gradient(to bottom, var(--bg) 78%, rgba(239, 228, 208, 0));
}
.progress-row { display: flex; align-items: center; gap: 12px; }
.progress-track {
  flex: 1; height: 4px; border-radius: 0;
  background: var(--ink); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0;
  background: var(--bg);
}
.progress-num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--ink); font-weight: 700;
}
.lang-btn {
  background: var(--ink); color: var(--bg);
  border: 0; padding: 6px 10px; font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; font-family: var(--f-mono); cursor: pointer;
}

/* intro screen 主体 */
[data-screen="intro"] {
  position: relative;
  padding-top: 12px;
}

/* ============ intro 装饰层：6 个独立 PNG 按首页配图摆放位置精确布局 ============ */
/* 三层 z-index 设计 */
.z-anim-deco { z-index: 2; }   /* 6 个装饰元素（盖住 tile 卡，让位给文案） */
.z-anim-text { z-index: 3; }   /* hero / intro-top / facts / ticker / foot 文案 */

/* 装饰元素容器：铺满 intro screen（不滚动），所有元素相对此定位 */
.intro-deco {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 60;   /* 提到最高层：盖过文案(z3)/卡片(z2)/顶栏(z30)，6 个元素都可选中、可见 */
}
.intro-pet {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  height: auto;   /* PNG 按原比例自适应，宽度决定高度 */
  transform-origin: center center;   /* 旋转 / 缩放以中心为基准 */
}
/* 内层 img 承载图形与眨眼动画，和外层定位/旋转解耦，避免 transform 冲突 */
.intro-pet-img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}
/* -- 6 个元素按参考图（12 星座/首页配图摆放位置.png 966×1357）相对位置 -- */
/* 金箭（射手符号）：左上角，一半被裁探出 */
.intro-pet-arrow {
  top: 17.5%;  left: -10.8%;
  width: 31.1%;
  transform: rotate(0.0deg) scale(1.00);
}
/* 龙：右上中段（参考图：35%-65% left, 0%-30% top） */
.intro-pet-dragon {
  top: 10.9%;  left: 50.8%;
  width: 38.0%;
  transform: rotate(0.0deg) scale(1.00);
}
.intro-pet-dragon .intro-pet-img {
  transform-origin: 50% 26%;
  animation: none; /* 暂关眨眼：用户先定位，定位完再恢复 */
}
/* 金天平：hero 下半部偏左，"13 QUESTIONS" 旁 */
.intro-pet-scale {
  top: 62.9%; left: 50.4%;
  width: 24.8%;
  transform: rotate(0.0deg) scale(1.00);
}
/* 牛+金花瓶：右侧 stat 行高度，箭头与花瓶呼应 */
.intro-pet-ox {
  top: 41.1%; left: 83.2%;
  width: 44.7%;
  transform: rotate(-25.0deg) scale(1.10);
}
.intro-pet-ox .intro-pet-img {
  transform-origin: 50% 32%;
  animation: none; /* 暂关眨眼：用户先定位，定位完再恢复 */
}
/* 狗：PORTFOLIO 卡右下，跨越卡右边缘 */
.intro-pet-dog {
  top: 73.9%; left: 52.7%;
  width: 30.0%;
  transform: rotate(0.0deg) scale(1.00);
}
.intro-pet-dog .intro-pet-img {
  transform-origin: 50% 30%;
  animation: none; /* 暂关眨眼：用户先定位，定位完再恢复 */
}
/* 兔：紧邻狗右侧 */
.intro-pet-rabbit {
  top: 75.1%; left: 79.8%;
  width: 25.7%;
  transform: rotate(0.0deg) scale(1.00);
}
.intro-pet-rabbit .intro-pet-img {
  transform-origin: 50% 28%;
  animation: none; /* 暂关眨眼：用户先定位，定位完再恢复 */
}

/* 眨眼：scaleY 1→0.55→1，4-6s 错开周期，弱动效（仅动物） */
@keyframes blink {
  0%, 92% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(0.55); }
  100%    { transform: scaleY(1); }
}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  .intro-pet-dragon .intro-pet-img, .intro-pet-ox .intro-pet-img, .intro-pet-dog .intro-pet-img, .intro-pet-rabbit .intro-pet-img { animation: none; }
}

/* 平板及以上：横向空间大，元素横向略放大、字下方金天平位置略下移 */
@media (min-width: 720px) {
  .intro-pet-arrow  { width: 31.1%; top: 17.5%; left: -10.8%; transform: rotate(0.0deg) scale(1.00); }
  .intro-pet-dragon { width: 38.0%; top: 10.9%; left: 50.8%; transform: rotate(0.0deg) scale(1.00); }
  .intro-pet-scale  { width: 24.8%; top: 62.9%; left: 50.4%; transform: rotate(0.0deg) scale(1.00); }
  .intro-pet-ox     { width: 44.7%; top: 41.1%; left: 83.2%; transform: rotate(-25.0deg) scale(1.10); }
  .intro-pet-dog    { width: 30.0%; top: 73.9%; left: 52.7%; transform: rotate(0.0deg) scale(1.00); }
  .intro-pet-rabbit { width: 25.7%; top: 75.1%; left: 79.8%; transform: rotate(0.0deg) scale(1.00); }
}

/* 桌面端（>= 720px）适度放大 · 但仍贴边角，避开内容 */
@media (min-width: 720px) {
  .intro-deco-dragon { width: 26%; right: -6%; top: 1%; }
  .intro-deco-ox     { width: 22%; right: -16%; top: 54%; }
  .intro-deco-dog    { width: 13%; right: -4%;  top: 74%; }
  .intro-deco-rabbit { width: 10%; right: 8%;   top: 78%; }
}

/* profile 屏底色（承载 12 生肖漂浮） */
[data-screen="profile"] {
  position: relative;
  padding-top: 12px;
}

/* top dot-line */
.intro-top {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--ink); font-weight: 700;
  padding: 14px 0 4px;
}
.intro-top .dot { width: 8px; height: 8px; background: var(--ink); border-radius: 50%; }
.intro-top .grow { flex: 1; }
.intro-top .v { color: var(--gray-2); }

/* 12 生肖散落云 · 12 张独立图按参考图位置精确排列 · 无框无卡片 */
.animal-cloud {
  position: relative;
  width: 100%;                /* 满宽与 field-label 横线右端对齐 · 86% 会差 30px */
  background: transparent;
  border: 0;
  margin: 8px 0 0;            /* 不再 auto 居中 · 让 right 与 field-label 同位 */
  overflow: hidden;            /* 锁住容器不溢出 · 防 iOS 横向滚动条 */
  border-radius: 4px;
  /* tune-panel 驱动：--zh-scale 缩放整体生肖云 */
  transform: scale(var(--zh-scale, 1));
  transform-origin: 50% 0%;
  transition: transform .18s ease;
}
.cloud-pick {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* z-index 用 auto 而非 1（2026-09-04 修复「狗/羊的字被邻居盖住」）：
     设成具体数值会创建层叠上下文，把子元素 .cp-lbl 的 z-index:3 锁死在按钮内部，
     导致标签永远拼不过别的按钮盒子 —— 表现就是某些动物的名字莫名消失。
     改 auto 后标签的 z-index 参与全局排序，永远浮在其他未选中按钮之上；
     而 .cloud-pick.is-on 的 z-index:10 仍让选中项整体置顶。 */
  z-index: auto;
  overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* 命中区修复（2026-09-02 第84轮）：按钮盒子只做定位容器，自身不吃点击；
     真正可点的只有「看得见的图标」(下方 .cp-img img 设 pointer-events:auto)，
     这样命中框跟随 tune 变换后的图标走，消除「马好点、蛇难点」的误差。 */
  pointer-events: none;
}
.cloud-pick .cp-img {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
  /* 无框：直接透明 PNG，不要投影/底色 */
  filter: none;
  transition: transform .35s var(--spring);
}
.cloud-pick .cp-img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;  /* 贴底：标签在 .cp-lbl 默认 'b' 位置 = 按钮底部 = 图片底部，紧贴图标下沿 */
  /* 只有可见图标接收点击（命中框 = 变换后的图标本身，而非过大的按钮盒子） */
  pointer-events: auto;
  /* 放大原点改到「底边中点」（2026-09-04 修复「点击后鸡/羊向下跳 + 压住文字」）：
     默认 center center 会让放大后的图标底部下移 8%，既盖住下方标签、视觉上又像
     「跳了一下」。改成 center bottom 后底部钉死、只向上长，标签位置纹丝不动。 */
  transform-origin: center bottom;
  /* 选中放大改用独立的 scale 属性（2026-09-02 第85轮修复「鸡狗羊乱跳」）：
     和 tune 的 transform 互不覆盖、复合相乘，tune 定位原封不动、图标原地长大 */
  transition: scale .35s var(--spring);
}
.cloud-pick .cp-lbl {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 4px;
  /* 居中交给 flex，transform 留给 tune 微调偏移用（避免 tune 覆盖 translateX(-50%) 丢居中） */
  display: flex; justify-content: center; align-items: center;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  /* tune-panel 驱动：--zh-font 控制标签字号 */
  font-size: var(--zh-font, 8.5px); font-weight: 500;
  letter-spacing: 0.8px;
  color: rgba(0,0,0,0.42);     /* 参考图：浅灰文字，无背景 */
  background: transparent;
  padding: 0;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  transition: color .2s;
}
/* 手机端可读性（2026-09-04）：8.5px 在手机上远低于可读下限，名字几乎看不清。
   只在窄屏放大默认字号并加深颜色；若 tune-panel 设过 --zh-font 则仍以用户值为准。 */
@media (max-width: 480px) {
  .cloud-pick .cp-lbl {
    font-size: var(--zh-font, 11px);
    letter-spacing: 0.4px;
    color: rgba(0, 0, 0, 0.62);
    margin-top: 5px;
  }
}
.cloud-pick .cp-yr {
  display: none;
  position: absolute; top: 0; right: 0;
  font-family: var(--f-mono); font-size: 8px; color: var(--bg);
  background: var(--ink);
  padding: 1px 4px;
}
.cloud-pick:hover .cp-lbl { color: rgba(0,0,0,0.78); }
.cloud-pick:focus { outline: 0; }
/* 选中态提到最上层 · 避免被 HTML 后渲染的相邻动物（如 dog 覆盖 rooster）遮挡 */
.cloud-pick.is-on { z-index: 5; }
.cloud-pick.is-on .cp-lbl { z-index: 5; }
.cloud-pick:focus-visible {
  outline: 2px dashed var(--gray-3);
  outline-offset: 3px;
}
/* 生肖名字位置变体（按参考图 image#1 每个动物的位置不同） · 覆盖默认「下方居中」 */
.cp-lbl-t  { left: 50%;   top: -2px;  transform: translate(-50%,  -100%); }
.cp-lbl-tl { left: 0;     top: -2px;  transform: translate(0,      -100%); }
.cp-lbl-tr { left: 100%;  top: -2px;  transform: translate(-100%,  -100%); }
.cp-lbl-bl { left: 0;     top: 100%;  transform: translate(0,      4px); }
.cp-lbl-br { left: 100%;  top: 100%;  transform: translate(-100%,  4px); }
.cp-lbl-l  { left: -2px;  top: 50%;   transform: translate(-100%, -50%); }
.cp-lbl-r  { left: 100%;  top: 50%;   transform: translate(4px,    -50%); }
/* .cp-lbl-b = 默认（下方居中），无需 class 覆盖，原 .cp-lbl 规则已生效 */
/* 选中态：动物放大 + 周围发光（无红框） */
.cloud-pick.is-on { z-index: 10; }
.cloud-pick.is-on .cp-img {
  /* 选中也只是放大，不要投影 / 光圈 / 框（放大改到下方 .cp-img img 的 scale 属性） */
  filter: none;
}
/* 放大作用在「图标本体」上、用独立 scale 属性：tune 的 transform 定位保持不动，
   图标原地长大，不再因「从盒子中心缩放、而图标被 tune 推到盒子外」而被甩飞（2026-09-02 第85轮） */
.cloud-pick.is-on .cp-img img {
  scale: 1.16;
}
.cloud-pick.is-on .cp-lbl {
  background: transparent; color: var(--ink);
  font-weight: 700; font-size: 9.5px;
}
.cloud-pick:active { transform: scale(.96); }

/* 三层 z-index（数字越大越上）：
   intro-tiles z:1（START TEST / PORTFOLIO 卡）— 被前景动物 z:2 跨越
   intro-deco-pet z:2（龙/牛/狗/兔 单独装饰）— 盖住 tile 卡右端
   intro-top/hero/facts/ticker/foot z:3（所有文案）— 永远在最前 */
.intro-tiles { z-index: 1; position: relative; }
.intro-top, .hero, .facts, .stat-row, .mag-grid, .ticker, .foot,
.p-head, .field, .cta { z-index: 3; position: relative; }

/* Hero 大字 */
.hero {
  position: relative; z-index: 2;
  padding: 22px 0 0;
  margin-bottom: 6px;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px;
  font-weight: 700; color: var(--ink);
  padding: 4px 9px; border: 1.5px solid var(--ink);
  margin-bottom: 14px;
}
.hero .eyebrow .arrow { display: inline-block; transform: translateY(-1px); }
.hero h1 {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(58px, 14vw, 86px);
  line-height: .88; letter-spacing: -2.4px;
  color: var(--ink); margin: 0;
}
.hero h1 .stroke {
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
}
.hero h1 .italic { font-style: italic; font-weight: 700; }
.hero h1 .chip {
  display: inline-block; padding: 0 10px 4px;
  background: var(--ink); color: var(--bg);
  font-style: normal; line-height: 1; vertical-align: 2px;
  transform: rotate(-2deg);
}
.hero .lead {
  margin-top: 14px; font-family: var(--f-serif);
  font-size: 15px; line-height: 1.45; color: var(--ink-2);
  max-width: 38ch;
}
.hero .lead em { font-style: italic; font-weight: 600; }

/* 大数字三联卡 */
.stat-row {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 1fr 1.4fr;
  gap: 6px; margin: 22px 0 14px;
}
.stat {
  background: var(--white); border: 1.5px solid var(--ink);
  padding: 10px 10px 8px; min-height: 92px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.stat .lbl {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 1.2px;
  color: var(--gray-2); font-weight: 700;
  text-transform: uppercase;
}
.stat .num {
  font-family: var(--f-display); font-weight: 900;
  font-size: 30px; line-height: 1; color: var(--ink);
  letter-spacing: -1.2px;
}
.stat .sub {
  font-family: var(--f-mono); font-size: 8px; color: var(--gray-2);
  letter-spacing: .8px; font-weight: 700;
}
.stat.dark   { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.stat.dark .lbl, .stat.dark .sub { color: rgba(239, 228, 208, .55); }
.stat.dark .num { color: var(--bg); }
.stat.halftone {
  background-color: var(--bg);
  background-image: var(--dot-ink);
  background-size: 6px 6px;
  border-color: var(--ink);
}
.stat.halftone .lbl, .stat.halftone .sub { color: var(--ink); }
.stat.halftone .num { color: var(--ink); }
.stat.bordered::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px; background: var(--ink);
}
.stat.big {
  grid-column: 1 / -1;
  min-height: 120px;
  padding: 18px 20px 14px;
}
.stat.big .num { font-size: 60px; }
.stat.big .lbl { font-size: 10px; }

/* 中部分卡片组（杂志 grid） */
.mag-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px;
  margin: 14px 0;
}
.mag-card {
  position: relative; padding: 12px 12px 10px; min-height: 100px;
  background: var(--bg-3); border: 1.5px solid var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.mag-card.dark {
  background: var(--ink); color: var(--bg);
}
.mag-card.dark .lbl { color: rgba(239, 228, 208, .6); }
.mag-card .lbl {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 1.5px;
  color: var(--gray-2); font-weight: 700;
}
.mag-card .big {
  font-family: var(--f-display); font-weight: 900; font-size: 22px;
  line-height: 1; color: inherit; letter-spacing: -1px; margin-top: 6px;
}
.mag-card .meta {
  font-family: var(--f-serif); font-size: 11px; color: inherit; opacity: .75;
  margin-top: 4px; line-height: 1.35;
}
.mag-card .corner-tag {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--f-mono); font-size: 8px; padding: 2px 5px;
  background: var(--bg); color: var(--ink); font-weight: 800; letter-spacing: 1px;
}
.mag-card.dark .corner-tag { background: var(--bg); color: var(--ink); }

.mag-card .shape-circle {
  position: absolute; right: -10px; bottom: -10px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--ink); opacity: .08;
}
.mag-card.dark .shape-circle { background: var(--bg); opacity: .12; }

.mag-card .stripes {
  position: absolute; right: 0; top: 0; bottom: 0; width: 22px;
  background: repeating-linear-gradient(0deg, transparent 0 4px, var(--ink) 4px 5px);
  opacity: .12;
}
.mag-card.dark .stripes { background: repeating-linear-gradient(0deg, transparent 0 4px, var(--bg) 4px 5px); }

/* 4 张错落 tile（菜单） */
.intro-tiles {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin: 14px 0 8px;
}
.intro-tiles .tile {
  position: relative;
  background: var(--bg); border: 1.5px solid var(--ink);
  padding: 12px 12px 10px; min-height: 100px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; cursor: pointer;
  transition: transform .25s var(--spring);
  overflow: hidden;
}
.intro-tiles .tile:active { transform: scale(.98); }
.intro-tiles .tile .t-lbl {
  font-family: var(--f-display); font-weight: 900;
  font-size: 19px; line-height: 1; letter-spacing: -.5px; color: var(--ink);
  position: relative; z-index: 1;
}
.intro-tiles .tile .t-sub {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 1.2px;
  color: var(--gray-2); font-weight: 700;
  position: relative; z-index: 1;
}
.intro-tiles .tile .corner {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg);
}
.intro-tiles .tile .corner svg { width: 12px; height: 12px; }
.intro-tiles .tile .ic { line-height: 0; }
.intro-tiles .tile .ic svg { width: 28px; height: 28px; color: var(--ink); }

.intro-tiles .tile.primary {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
  grid-column: span 2;
  min-height: 88px;
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 16px 18px;
}
.intro-tiles .tile.primary .t-lbl { color: var(--bg); font-size: 26px; }
.intro-tiles .tile.primary .t-sub { color: rgba(239, 228, 208, .6); }
.intro-tiles .tile.primary .corner { background: var(--bg); color: var(--ink); }
.intro-tiles .tile.primary .ic svg { width: 32px; height: 32px; color: var(--bg); }
.intro-tiles .tile.primary .badge {
  margin-left: auto; padding: 3px 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px;
  border: 1.5px solid var(--bg); color: var(--bg); font-weight: 800;
}

/* 横版 ticker 装饰条 */
.ticker {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 18px;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  padding: 6px 0; margin: 14px -22px 0;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.8px;
  font-weight: 800; color: var(--ink);
  overflow: hidden; white-space: nowrap;
}
.ticker .track { display: flex; gap: 18px; animation: ticker 18s linear infinite; }
.ticker .star { color: var(--ink); }

/* 底部 foot */
.foot {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--ink); font-weight: 700;
}
.foot .grow { flex: 1; }
.foot .num { padding: 3px 8px; background: var(--ink); color: var(--bg); }

/* ===========================================================
   PROFILE / QUIZ / RESULT · 复用旧视觉，但用 paper 背景
   =========================================================== */
[data-screen="profile"], [data-screen="quiz"], [data-screen="loading"], [data-screen="result"] {
  position: relative;
  padding-top: 12px;
}
.p-head, .q-head, .r-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.p-head .p-title, .q-text { font-family: var(--f-display); font-weight: 900; font-size: 28px; line-height: 1.1; color: var(--ink); letter-spacing: -1px; margin: 0; }
.p-sub { font-family: var(--f-serif); font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }
.eyebrow, .eyebrow-pill {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--ink); font-weight: 800;
  padding: 5px 9px; border: 1.5px solid var(--ink); display: inline-block;
}
.eyebrow-pill { background: var(--ink); color: var(--bg); }
.icon-btn {
  background: var(--ink); color: var(--bg); border: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn svg { width: 16px; height: 16px; }
.q-index { font-family: var(--f-mono); font-size: 12px; letter-spacing: 1.5px; font-weight: 800; }

.field { margin: 32px 0 28px; }                /* 加大 field 间距 · 上下不挤 */
.field-label {
  display: block;                       /* 全部左对齐：标题与 hint 同一行左起 */
  font-family: var(--f-mono); font-size: 16px; letter-spacing: 2px;
  color: var(--ink); font-weight: 800; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1.5px solid var(--ink);
}
.field-label .hint {
  display: block;                       /* hint 换行、独立一行 */
  margin-top: 6px;
  color: var(--ink-2); font-weight: 600;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;                      /* 同步放大 */
  letter-spacing: 0;
}

.matrix { display: grid; gap: 5px; width: 100%; box-sizing: border-box; }
/* 关键：用 minmax(0, 1fr) 取代 1fr · 强制忽略 cell min-content 撑开
   5 列 grid 在 iPhone 放大视图 (CSS viewport = 320) 下，5 个 EN 长文案 (UNKNOWN / Type AB)
   累积 min-content > 容器宽度，导致 grid 横向溢出 24-57px。
   minmax(0, 1fr) 把最小尺寸锁 0，让 cell 内部内容负责压缩 / 截断 / wrap，绝不撑开 grid。 */
.m6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.m5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 强制两个 grid 严格同宽对齐 · 防 sub-pixel 漂移 */
#pick-star, #pick-blood { width: 100%; justify-content: stretch; }

/* 星座选：4 列 × 3 行规整网格（无错位），ICON 直接透明 PNG 无框 · 4 列对齐参考图。
   PNG 已用 .workbuddy/whiten2alpha.py 处理为 RGBA 透明底（白底→alpha=0）。
   tune-panel 驱动：--zh-scale 缩放, --zh-gap 控制行/列间距. */
#pick-star {
  height: auto !important;
  gap: var(--zh-gap, 6px) 4px;
  /* tune-panel 驱动：--zh-scale 缩放整体星座网格 */
  transform: scale(var(--zh-scale, 1));
  transform-origin: 50% 0%;
  transition: transform .18s ease;
}
#pick-star .star-pick {
  position: relative !important;       /* 脱离绝对定位，进入 grid 流 */
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1.18;
  /* tune-panel 驱动：--zh-pad 控制星座格内边距 */
  padding: var(--zh-pad, 6px) 2px 4px;
  box-sizing: border-box;
}
#pick-star .star-pick .cp-img {
  position: relative; inset: auto;
  width: 100%; height: 76%;
  filter: none;
}
#pick-star .star-pick .cp-img img { width: 100%; height: 100%; object-fit: contain; }
#pick-star .star-pick .cp-lbl {
  position: static; transform: none;
  margin-top: 2px; text-align: center;
}

/* 防御：防止 cell 子元素 min-content 把 grid column 撑大 */
.matrix .cell { min-width: 0; }

/* 5 列 cell 的英文标签在窄屏允许换行 · 避免撑开 grid */
.matrix .cell-blood .bl-type { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }

/* icon-grid cell · 默认 SVG 风格 */
.matrix .cell {
  aspect-ratio: 1/1;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; position: relative;
  transition: background .2s, transform .2s var(--spring);
}
.matrix .cell svg { width: 62%; height: 62%; color: var(--ink); }
.matrix .cell:hover { background: var(--bg-3); }
.matrix .cell.is-on {
  background: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.matrix .cell.is-on svg { color: var(--bg); }
/* 红框已移除（用户要求：底色变深即可，不要红框） */

/* cell-img · 12 星座用图片版本 · 图标收窄 + 留白加大，卡片视觉更窄、不顶边 */
.matrix .cell.cell-img {
  padding: 10px;
  background: var(--bg);
  aspect-ratio: 1 / 0.82;
}
.matrix .cell.cell-img img {
  width: 82%; height: 82%;
  object-fit: contain; object-position: center;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transition: filter .2s, transform .2s var(--spring);
}
.matrix .cell.cell-img:hover { background: var(--bg-3); }
.matrix .cell.cell-img:hover img { transform: scale(1.06); }
.matrix .cell.cell-img.is-on { background: var(--bg); }
.matrix .cell.cell-img.is-on img {
  transform: scale(1.12);
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 13px rgba(255,255,255,.9));
}

/* cell-blood · 血型只放大字母 + 英文，无图形 · 比例对齐星座格 */
.matrix .cell.cell-blood {
  flex-direction: column;
  background: var(--bg);
  overflow: visible;
  aspect-ratio: 1 / 0.82;
  padding: 6px;
}
.matrix .cell-blood .bl-inner {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .25s var(--spring);
}
.matrix .cell-blood .bl-letter {
  font-family: var(--f-mono);
  font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--ink); letter-spacing: -.5px;
}
.matrix .cell-blood .bl-type {
  font-family: var(--f-mono);
  font-size: 8px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--gray-2); text-transform: uppercase; white-space: nowrap;
}
.matrix .cell-blood.is-on {
  background: var(--bg);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.85);
}
.matrix .cell-blood.is-on .bl-inner { transform: scale(1.12); }
.matrix .cell-blood.is-on .bl-letter {
  color: var(--ink);
  text-shadow: 0 0 10px rgba(255,255,255,.95);
}

.pick {
  aspect-ratio: 1/1; background: var(--bg); border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 8px;
  transition: transform .2s var(--spring), background .2s;
  position: relative;
}
.pick svg { width: 70%; height: 70%; color: var(--ink); }
.pick:hover { background: var(--bg-3); }
.pick.is-on { background: var(--ink); }
.pick.is-on svg { color: var(--bg); }
.pick .yr {
  position: absolute; bottom: 3px; right: 4px;
  font-family: var(--f-mono); font-size: 8px; color: var(--gray-2); font-weight: 700;
}
.pick.is-on .yr { color: rgba(239, 228, 208, .55); }

.cta {
  display: block; width: 100%; background: var(--ink); color: var(--bg);
  border: 0; padding: 18px 20px; font-family: var(--f-display);
  font-weight: 900; font-size: 16px; letter-spacing: 1.5px;
  cursor: pointer; margin: 18px 0; position: relative;
  text-transform: uppercase;
}
.cta .lbl { display: inline-flex; align-items: center; gap: 10px; }
.cta .lbl svg { width: 16px; height: 16px; }
.cta[disabled] { background: var(--gray-1); color: var(--gray-2); cursor: not-allowed; }
.cta.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.cta.sm { padding: 12px 14px; font-size: 12px; }

/* 选项卡（quiz） */
.opt {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg); border: 1.5px solid var(--ink);
  padding: 16px 18px; margin: 8px 0; cursor: pointer; text-align: left; width: 100%;
  font-family: var(--f-display); font-size: 15px; line-height: 1.4;
  color: var(--ink); font-weight: 600;
  transition: background .2s, color .2s;
  position: relative;
}
.opt .ord {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg);
  font-family: var(--f-mono); font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.opt:hover { background: var(--bg-3); }
.opt.is-on { background: var(--ink); color: var(--bg); }
.opt.is-on .ord { background: var(--bg); color: var(--ink); }

/* ===========================================================
   RESULT · 元素卡 · 数据流样式
   Inspired by periodic-table element cards (Y39)
   Massive type · hair-line dividers · dense small fields
   =========================================================== */

/* 元素卡 · 主容器 */
.data-sheet {
  position: relative;
  border: 1.5px solid var(--ink);
  background: var(--bg);
  padding: 0;
  margin: 14px 0 22px;
  font-family: var(--f-display);
  color: var(--ink);
  overflow: hidden;
}
/* 上下小耳 — 让元素卡更"工具卡片" */
.data-sheet::before,
.data-sheet::after {
  content: ''; position: absolute; left: 0; right: 0; height: 6px;
  background: var(--ink);
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, var(--bg) 6px 9px);
}
.data-sheet::before { top: 0; }
.data-sheet::after  { bottom: 0; }

/* 顶部 row：左 / 右两端对开 meta */
.ds-meta {
  display: flex; justify-content: space-between;
  padding: 12px 12px 8px;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 1.4px;
  font-weight: 800; color: var(--ink); text-transform: uppercase;
  gap: 8px;
}
.ds-meta > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 auto;
}

/* 关键 1px hairline + 较粗黑色 */
.ds-hr {
  height: 1px; background: var(--ink); margin: 0;
}
.ds-hr-thick {
  height: 3px; background: var(--ink);
  position: relative;
}
.ds-hr-thick::before, .ds-hr-thick::after {
  content: ''; position: absolute; top: -3px; width: 8px; height: 8px;
  background: var(--ink); border-radius: 50%;
}
.ds-hr-thick::before { left: -1px; }
.ds-hr-thick::after  { right: -1px; }

/* Hero: 大字 code + 编号 + 名字 */
.ds-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  padding: 14px 14px 14px;
  gap: 10px;
  position: relative;
}
.ds-symbol {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(64px, 18vw, 92px);
  line-height: .82;
  letter-spacing: -3px;
  color: var(--ink);
  text-transform: uppercase;
}
.ds-side {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px;
}
.ds-num {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--gray-3); font-weight: 700; text-transform: uppercase;
  display: flex; align-items: baseline; gap: 6px;
}
.ds-num b {
  font-family: var(--f-display); font-weight: 900; font-size: 22px;
  letter-spacing: -.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ds-cname {
  font-family: var(--f-serif);
  font-size: 16px; line-height: 1.15;
  font-weight: 600;
  color: var(--ink);
}
.ds-enname {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 1.5px;
  color: var(--gray-3); font-weight: 700;
  text-transform: uppercase;
}
.ds-tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12px; line-height: 1.3;
  color: var(--ink-2);
  margin-top: 4px;
}

/* 单行 row: lbl · value · 2026-08-31 改造为韩派卡片样式
   · 浅米色背景（比 --bg 稍亮）+ 圆角 + 极轻阴影
   · 上下间距 + 边线去掉，改用卡片阴影分层
   · lbl 与 value 之间取消左边框线，改成间距 */
.ds-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: start;
  gap: 14px;
  padding: 18px 22px;
  margin: 10px 0 18px 0;
  background: #FBF8F1;        /* 韩系米黄，比主 bg #EFE4D0 稍亮一档 */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  border: 1px solid rgba(20,18,16,.06);
}
.ds-row .ds-lbl {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.8px;
  font-weight: 800; color: var(--ink); text-transform: uppercase;
  border-right: 0;             /* 卡片化后不再需要左边线 */
  padding-right: 0;
  align-self: stretch;
  display: flex; align-items: flex-start;
}

/* 3 栏横向：Phase / Density / Hardness */
.ds-grid3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.ds-grid3 > div {
  padding: 13px 16px;
  border-right: 1px solid var(--ink);
}
.ds-grid3 > div:last-child { border-right: 0; }
.ds-grid3 .ds-lbl {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.6px;
  font-weight: 800; color: var(--gray-3); text-transform: uppercase;
  margin-bottom: 5px;
}
.ds-grid3 .ds-val {
  font-family: var(--f-display); font-weight: 900; font-size: 26px;
  letter-spacing: -.6px; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Electron configuration */
.ds-conf {
  display: flex; flex-wrap: wrap;
  gap: 5px 14px;
  font-family: var(--f-mono); font-size: 13px;
  letter-spacing: .8px; color: var(--ink);
  line-height: 1.5;
}
.ds-conf span { display: inline-flex; align-items: baseline; gap: 6px; }
.ds-conf b {
  font-family: var(--f-display); font-weight: 900; font-size: 15px;
  letter-spacing: -.3px; text-transform: uppercase;
}

/* Appearance 长文本 */
.ds-app {
  font-family: var(--f-serif); font-size: 15px;
  color: var(--ink-2); line-height: 1.5;
}

/* Oxidation 横条 + labels */
.ds-ox {
  display: flex; flex-direction: column; gap: 6px;
}
.ox-track {
  position: relative;
  height: 16px;
  border: 1px solid var(--ink);
  background: var(--bg);
  overflow: hidden;
}
.ox-fill {
  height: 100%; width: 0;
  background: var(--ink);
  background-image: linear-gradient(to right, transparent 0 18%, var(--bg) 18% 19%, transparent 19% 36%, var(--bg) 36% 37%, transparent 37% 100%);
  background-size: 100% 4px;
  background-repeat: repeat-y;
  background-position: 0 0;
  transition: width .8s var(--ease);
}
.ox-vals {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 1.2px;
  font-weight: 800; color: var(--ink);
}

/* 底部 row */
.ds-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.6px;
  font-weight: 800; color: var(--gray-3);
  background: var(--bg-3);
}
.ds-foot .grow { flex: 1; }
.ds-foot span:last-child { color: var(--ink); font-weight: 800; }


/* 保留色块：单独显示（小 swatch 在 info-head 之外不再使用） */
.ds-color { display: none; }

/* ============ 其余：色块 chips / radar / field-label ============ */
.ds-cap { padding: 16px 20px 8px; }
.ds-cap-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px;
  font-weight: 800; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.ds-cap-title::before { content: ''; width: 11px; height: 11px; background: var(--ds-accent, #2F4858); }
.ds-radar { width: 100%; max-width: 300px; margin: 0 auto; }
.ds-radar svg { display: block; width: 100%; height: auto; }

.ds-chips .ds-lbl { margin-bottom: 6px; }
.ds-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; padding: 7px 12px;
  font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1;
  letter-spacing: -.4px; color: var(--ink);
  border: 1.5px solid var(--ink); background: var(--bg);
  font-variant-numeric: tabular-nums;
}
.ds-chip-accent { background: var(--ds-accent, #2F4858); color: var(--ds-on, #fff); border-color: var(--ds-accent, #2F4858); }

/* 字段标题统一加小色块点 */
.field-label::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto;
  background: var(--ds-accent, #2F4858); margin-right: 8px;
}

/* 旧独立 sample-row 块已合并到 .ds-hero，保留 fallback 隐藏 */
.sample-row { display: none; }
.sample-art { border: 0; }

/* ============ 可视化的数据条（4 维得分） ============ */
#tally.tally { display: block; height: auto; border: 0; padding: 0; }
.bar-row { display: grid; grid-template-columns: 50px 1fr 24px; align-items: center; gap: 8px; margin: 10px 0; }
.bar-name { font-family: var(--f-mono); font-size: 9px; letter-spacing: 1px; font-weight: 800; color: var(--ink); text-transform: uppercase; }
.bar-track { position: relative; height: 16px; border: 1.5px solid var(--ink); background: var(--bg); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; background: var(--ds-accent, #2F4858); }
.bar-fill.is-main { background: var(--ink); }
.bar-val { font-family: var(--f-display); font-weight: 900; font-size: 16px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* 样本 thumbnail · 由 persona + 几何 + 12 生肖 + 12 星座 + 血型 拼成 */
.sample-row {
  display: grid;
  grid-template-columns: 152px 1fr;          /* 96→152：缩图加大 */
  gap: 14px;
  align-items: stretch;
  margin: 0 0 20px;
  padding: 12px;
  border: 1.5px solid var(--ink);
  background: var(--bg-3);
}
.sample-art {
  position: relative;
  width: 152px; height: 152px;               /* 96→152 */
  background: var(--ink);
  overflow: hidden;
}
.sample-art svg { display: block; width: 100%; height: 100%; }
.sample-cap {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-width: 0;
}
.sample-title {
  font-family: var(--f-display); font-weight: 900; font-size: 18px;   /* 14→18 */
  letter-spacing: -.3px; line-height: 1.18; color: var(--ink);
  text-transform: uppercase;
  word-break: break-word;
}
.sample-body {
  font-family: var(--f-serif); font-size: 13px; line-height: 1.45;     /* 11.5→13 */
  color: var(--ink-2); margin: 0;
}

/* 老的 .art-wrap / .art-card / .r-title 旧样式保留兼容，但仅作隐藏 */
.art-wrap, .art-card, .r-title, .r-tag, .parts, .avatar-name, .avatar-desc { display: none !important; }
.art-frame {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.art-stage {
  width: 86%; height: 86%;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  animation: art3d 14s linear infinite;
  position: relative;
}
@keyframes art3d {
  0%   { transform: perspective(800px) rotateY(0) rotateX(0); }
  25%  { transform: perspective(800px) rotateY(20deg) rotateX(8deg); }
  50%  { transform: perspective(800px) rotateY(0) rotateX(-6deg); }
  75%  { transform: perspective(800px) rotateY(-20deg) rotateX(8deg); }
  100% { transform: perspective(800px) rotateY(0) rotateX(0); }
}
.art-sparkles { position: absolute; inset: 0; pointer-events: none; }
.art-sparkles .spk { position: absolute; width: 14px; height: 14px; animation: spkTw 2.4s ease-in-out infinite; }
.art-sparkles .s1 { top: 14%; left: 18%; animation-delay: 0s; }
.art-sparkles .s2 { top: 28%; right: 14%; animation-delay: .4s; }
.art-sparkles .s3 { bottom: 30%; left: 14%; animation-delay: .8s; }
.art-sparkles .s4 { bottom: 18%; right: 22%; animation-delay: 1.2s; }
.art-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--ink); color: var(--bg);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; font-weight: 800;
}
.r-title { font-family: var(--f-display); font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -1px; text-align: center; margin: 22px 0 4px; }
.r-tag { font-family: var(--f-serif); font-size: 14px; color: var(--ink-2); text-align: center; margin: 0 0 18px; }
.r-actions { display: flex; gap: 8px; }
.r-actions .cta { flex: 1; margin: 8px 0; }

.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.part {
  background: var(--bg); border: 1.5px solid var(--ink);
  padding: 12px 12px; min-height: 96px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.part .lbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--gray-2); font-weight: 800; }
.part .val { font-family: var(--f-display); font-weight: 900; font-size: 18px; line-height: 1.1; color: var(--ink); }
.part .ic { line-height: 0; }
.part .ic svg { width: 24px; height: 24px; color: var(--ink); }

.tally { display: flex; gap: 4px; align-items: flex-end; height: 90px; padding: 6px 0; border-bottom: 1.5px solid var(--ink); }
.tally .bar { flex: 1; background: var(--ink); position: relative; }
.tally .bar.h { background: var(--ink); }
.tally .bar .v {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-display); font-weight: 900; font-size: 14px; color: var(--ink);
}
.tally .bar .l {
  position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 1px; color: var(--gray-2); font-weight: 800;
}

.buff, .para, .fit-line { font-family: var(--f-serif); font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.list { list-style: none; padding: 0; margin: 0; }
.list li {
  position: relative; padding: 10px 0 10px 22px;
  font-family: var(--f-serif); font-size: 14px; line-height: 1.55; color: var(--ink-2);
  border-bottom: 1px solid var(--ink);
}
.list li:before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 12px; height: 12px; background: var(--ink);
}
.list.tip li:before { background: var(--ink); border-radius: 50%; }
.list.warn li:before { background: transparent; border: 1.5px solid var(--ink); }

/* ============ 结果页报告区·瑞士编辑风重制 ============ */
/* 大节容器：上分隔线、留白 */
.report-inner .field {
  position: relative;
  margin: 26px 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
.report-inner .field:first-of-type { border-top: 0; padding-top: 0; }

/* 大编号 01~05（黑底白字 chip） · 跟随标题放大，原 32×22 → 56×34 */
.rpt-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; height: 34px; padding: 0 12px;
  margin-right: 14px;
  background: var(--ink); color: var(--bg);
  font-family: var(--f-mono); font-weight: 800; font-size: 18px;
  letter-spacing: 1px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
/* 报告区 5 个项目标题 · 字号放大 1 倍（14 → 28）保持视觉权重平衡，
   加大下边距和分隔线粗细，让大字号更"压得住" */
.report-inner .field-label {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 28px; letter-spacing: 2px;
  color: var(--ink); font-weight: 800;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 2.5px solid var(--ink);
  text-align: left;
  line-height: 1.1;
  gap: 4px;
}
.report-inner .field-label > span:not(.rpt-num) {
  flex: 1 1 auto; min-width: 0;
}
.report-inner .field-label::before { display: none; }   /* 关掉小色块点（已被 .rpt-num 取代） */
.report-inner .field-label .hint { display: none; }     /* 报告区无 hint */

/* YOUR STRENGTH：把首句做成大号衬线引文 */
.rpt-quote {
  position: relative;
  font-family: var(--f-serif);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  padding: 6px 0 10px;
  border-left: 3px solid var(--ink);
  padding-left: 14px;
  margin: 0;
}
/* 紧引号（粗黑） */
.rpt-quote::before {
  content: '\201C';                  /* 左双引号 */
  position: absolute;
  left: -4px; top: -10px;
  font-family: var(--f-display);
  font-size: 48px; line-height: 1;
  color: var(--ds-accent, #2F4858);
  font-style: normal;
}

/* HIDDEN RISKS / ACTION PLAN：每项带序号 chip + 粗体小标 + 正文 */
/* 03/04 下方子项 · 不再用数字 01/02/03，改用 N 个点（1/2/3） */
.rpt-list { list-style: none; padding: 0; margin: 0; }
.rpt-list li {
  position: relative;
  padding: 16px 0 16px 0;
  font-family: var(--f-serif); font-size: 15px; line-height: 1.55;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
/* 点容器：固定显示 3 个点圆，按 dots-1/2/3 class 控制显示数量 */
.rpt-list li .dots {
  display: flex; gap: 5px; margin-top: 7px;
  font-size: 0; line-height: 0;
}
.rpt-list li .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); display: block;
}
/* 风险栏目：空心点 + 实心点（更柔和） */
.rpt-risks li .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
/* 默认显示 1 个点 */
.rpt-list li.dots-1 .dot:nth-child(n+2) { display: none; }
.rpt-list li.dots-2 .dot:nth-child(n+3) { display: none; }
/* dots-3：默认全显，不写规则 */

/* BEST FOR：黑底白字，瑞士排版风格 */
.rpt-fit-line {
  background: var(--ink); color: var(--bg);
  font-family: var(--f-display); font-weight: 900;
  font-size: 22px; line-height: 1.25;
  letter-spacing: -.3px; text-transform: uppercase;
  padding: 18px 18px;
  margin: 0;
  position: relative;
}
.rpt-fit-line::before {
  content: '\2192';                  /* 右箭头 */
  display: inline-block;
  margin-right: 10px;
  font-size: 22px; line-height: 1;
}

.avatar-name { font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: -.5px; margin: 18px 0 4px; }
.avatar-desc { font-family: var(--f-serif); font-size: 14px; color: var(--ink-2); margin: 0; }
.btn-row { display: flex; gap: 8px; }
.btn-row .cta { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; font-weight: 800;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  z-index: 80;
}
.toast.is-on { opacity: 1; }

/* ---------- Loading ---------- */
[data-screen="loading"] { display: none; position: relative; }
[data-screen="loading"].is-active { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; }
.orb { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.orb .ring { position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 50%; animation: ringPulse 2.4s ease-out infinite; }
.orb .ring.r2 { animation-delay: .8s; }
.orb .ring.r3 { animation-delay: 1.6s; }
.orb-ic { width: 36px; height: 36px; color: var(--ink); }
[data-screen="loading"] p { font-family: var(--f-display); font-weight: 900; font-size: 14px; letter-spacing: 2px; margin: 20px 0 0; }
.loading-step { font-family: var(--f-mono); font-size: 10px; color: var(--gray-2); letter-spacing: 1.5px; font-weight: 700; margin-top: 6px; }

/* ---------- 响应式微调 ---------- */
@media (max-width: 380px) {
  .hero h1 { font-size: 68px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row .stat:nth-child(3) { grid-column: span 2; }
  .floats .animal { width: 60px !important; }
}
@media (min-width: 520px) {
  .floats .animal { width: 90px !important; }
}

/* 生肖年份说明（选中后文字展示，非卡片） */
.zodiac-caption {
  margin: 32px 0 0;                         /* 拉大与 cloud 的距离 · 不再被放大后的最后排动物遮住 */
  min-height: 28px;
  text-align: center;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 1.5px;   /* 字号 + 间距放大 */
  color: var(--gray-3); line-height: 1.8;     /* 行高从 1.4 拉到 1.8 · 5 个年份一行展示更松 */
  position: relative; z-index: 2;             /* 保证不被云内 absolute 子元素遮挡 */
  background: var(--bg);                      /* 透传背景 · 避免任何透出 */
  padding: 4px 0;
}
.zodiac-caption b { color: var(--ink); font-weight: 900; font-size: 14px; margin-right: 6px; }
.zodiac-caption .yr { color: var(--gray-3); }

/* 首页关键数据 · 纯文字（替换原卡片） */
.facts {
  display: flex; justify-content: space-between; gap: 10px;
  margin: 20px 0 8px; padding: 0;
}
.facts .fact {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding-left: 12px; border-left: 1px solid var(--gray-1);
}
.facts .fact:first-child { padding-left: 0; border-left: 0; }
.facts .fact-num {
  font-family: var(--f-display); font-weight: 900; font-size: 34px;
  line-height: 1; letter-spacing: -1.5px; color: var(--ink);
}
.facts .fact-lbl {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 1.5px;
  font-weight: 800; color: var(--ink); text-transform: uppercase;
}
.facts .fact-sub {
  font-family: var(--f-serif); font-size: 10px; color: var(--gray-2);
  line-height: 1.3; margin-top: 2px;
}

/* ============ Profile Editor mode (?edit=1&screen=profile) ============ */
.is-editor-profile .cloud-pick {
  pointer-events: auto !important;
  cursor: grab;
  outline: 1px dashed rgba(255, 120, 0, 0.35);
  outline-offset: 2px;
}
.is-editor-profile .cloud-pick.is-selected {
  outline: 2px solid #ff7800;
  z-index: 1000;
}
.is-editor-profile .cloud-pick:active { cursor: grabbing; }
.is-editor-profile .cp-handle {
  position: absolute; left: 0; top: -22px;
  font: 700 10px/1 ui-monospace, Menlo, monospace;
  color: #fff; background: #ff7800; padding: 2px 6px; border-radius: 3px;
  white-space: nowrap; z-index: 10; pointer-events: none;
  display: none;
}
.is-editor-profile .cloud-pick.is-selected .cp-handle { display: block; }
.is-editor-profile .cp-rotate {
  position: absolute; right: -10px; top: -10px;
  width: 22px; height: 22px;
  background: #ff7800; color: #fff;
  border-radius: 50%; display: none;
  align-items: center; justify-content: center;
  cursor: alias; z-index: 10; touch-action: none;
}
.is-editor-profile .cloud-pick.is-selected .cp-rotate { display: flex; }
.is-editor-profile .cp-rotate svg { width: 14px; height: 14px; display: block; }
.profile-editor-bar {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  background: #111; color: #fff; padding: 10px 12px; border-radius: 8px;
  font: 12px/1.4 system-ui, sans-serif; max-width: 340px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.profile-editor-bar .peb-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.profile-editor-bar .peb-readout {
  background: #222; padding: 6px 8px; border-radius: 4px; margin: 6px 0;
  font: 11px/1.5 ui-monospace, Menlo, monospace; white-space: pre; min-height: 38px;
}
.profile-editor-bar .peb-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.profile-editor-bar .peb-btn {
  background: #2a2a2a; color: #fff; border: 1px solid #444;
  padding: 5px 8px; border-radius: 4px; cursor: pointer; font: inherit;
}
.profile-editor-bar .peb-btn:hover { background: #3a3a3a; }
.profile-editor-bar .peb-btn.peb-primary { background: #ff7800; border-color: #ff7800; font-weight: 700; }
.profile-editor-bar .peb-btn.peb-primary:hover { background: #ff9a2a; }
.profile-editor-bar .peb-sub { font-size: 10.5px; opacity: 0.6; margin-top: 6px; line-height: 1.4; }
.profile-editor-bar .peb-copied {
  position: fixed; right: 16px; bottom: 220px; z-index: 10000;
  background: #2d8c4a; color: #fff; padding: 6px 12px; border-radius: 4px;
  opacity: 0; transition: opacity 0.2s; font: 12px system-ui, sans-serif;
}

/* ============ Visual Editor mode (?edit=1) ============ */
.is-editor .intro-pet {
  cursor: pointer;
  transition: none !important;
}
/* 编辑时容器不裁切，旋转/放大到边缘也不被切掉 */
.is-editor .intro-deco { overflow: visible; }
.is-editor .intro-pet.is-selected {
  outline: 1px dashed rgba(255, 120, 0, 0.85);
  outline-offset: 2px;
  z-index: 5000;
}
.is-editor .intro-pet .intro-pet-handle {
  position: absolute;
  top: -20px; left: 0;
  background: rgba(255, 120, 0, 0.92);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 0 0 6px 0;
  font-family: ui-monospace, monospace;
  pointer-events: none;
  white-space: nowrap;
  display: none;
}
.is-editor .intro-pet.is-selected .intro-pet-handle { display: block; }
/* 旋转把手：顶部居中圆形箭头，拖动即旋转 */
.is-editor .intro-pet .intro-pet-rotate {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ff7800;
  border: 2px solid #fff;
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  cursor: grab;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.is-editor .intro-pet .intro-pet-rotate::after {
  content: "";
  position: absolute;
  top: 26px; left: 50%;
  width: 1px; height: 14px;
  background: rgba(255, 120, 0, 0.6);
  transform: translateX(-50%);
}
.is-editor .intro-pet.is-selected .intro-pet-rotate { display: flex; }
.intro-pet-rotate svg { width: 15px; height: 15px; display: block; }
.intro-pet-rotate:active { cursor: grabbing; background: #ff9a2a; }
.editor-bar {
  position: fixed; left: 16px; bottom: 16px;
  background: #1a1a1a; color: #fff;
  border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  font-family: ui-monospace, monospace;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 100000;
  max-width: 280px;
}
.eb-title { font-size: 13px; font-weight: 700; }
.eb-hint  { font-size: 11px; opacity: 0.7; }
.eb-btn {
  border: 1px solid #555; background: #2a2a2a; color: #fff;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 12px;
}
.eb-btn.eb-primary { background: #ff7800; border-color: #ff7800; font-weight: 700; }
.eb-btn:hover { background: #3a3a3a; }
.eb-btn.eb-primary:hover { background: #ff9a2a; }
.eb-copied {
  position: fixed; left: 50%; top: 24px; transform: translateX(-50%);
  background: #2a9d2a; color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700;
  opacity: 0; transition: opacity 0.25s;
  z-index: 100001;
  pointer-events: none;
}
/* 编辑器工具栏：精调按钮行 + 实时读数 */
.eb-row { display: flex; gap: 6px; flex-wrap: wrap; }
.eb-readout {
  font-size: 11px; opacity: 0.9; line-height: 1.45;
  background: rgba(255,255,255,.06); padding: 6px 8px; border-radius: 6px;
}
.eb-sub { font-size: 10.5px; opacity: 0.6; margin-top: 2px; line-height: 1.4; }
.eb-btn.is-active { background: #ff9a2a; border-color: #ff9a2a; }


/* ============================================================================
 *  Tune Panel · 选择页实时调参面板（?tune=1 启动）
 *  --------------------------------------------------------------------------
 *  - 右下角浮窗（不挡住选择页核心交互）
 *  - 4 个 range 滑块：批量调节 --zh-scale / --zh-font / --zh-gap / --zh-pad
 *  - 「重置」= 恢复默认;「导出 CSS」= 复制可贴回 :root 的变量块
 *  ============================================================================ */
#tune-panel {
  position: fixed;
  right: 14px; bottom: 14px;
  width: 268px;
  z-index: 99999;
  background: rgba(22, 19, 16, 0.96);
  color: #f5eedf;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 14px 10px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
#tune-panel .tp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
#tune-panel .tp-title {
  font-weight: 800; font-size: 13px; letter-spacing: .5px;
  text-transform: uppercase;
}
#tune-panel .tp-x {
  width: 26px; height: 26px;
  background: rgba(255,255,255,.10); border: 0;
  color: #f5eedf; border-radius: 6px;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#tune-panel .tp-x:hover { background: rgba(255,255,255,.22); }
#tune-panel .tp-hint {
  font-size: 10.5px; opacity: .65; line-height: 1.45;
  margin-bottom: 10px;
}
#tune-panel .tp-rows { display: flex; flex-direction: column; gap: 9px; }
#tune-panel .tp-row {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 7px 9px 8px;
}
#tune-panel .tp-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 3px;
}
#tune-panel .tp-lbl {
  font-size: 11px; opacity: .85; font-weight: 600;
  letter-spacing: .3px;
}
#tune-panel .tp-val {
  font-family: var(--f-mono, "SF Mono", Menlo, monospace);
  font-size: 12.5px; font-weight: 700;
  color: #ffd9a0;
}
#tune-panel input[type=range] {
  width: 100%; height: 14px;
  margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: pointer;
}
#tune-panel input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: rgba(255,255,255,.18); border-radius: 2px;
}
#tune-panel input[type=range]::-moz-range-track {
  height: 4px; background: rgba(255,255,255,.18); border-radius: 2px;
}
#tune-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: #f5eedf;
  border: 2px solid #22a07b;
  border-radius: 50%;
  margin-top: -5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#tune-panel input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: #f5eedf;
  border: 2px solid #22a07b;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#tune-panel .tp-tiny {
  font-size: 9.5px; opacity: .5; line-height: 1.4;
  margin-top: 3px;
}
#tune-panel .tp-foot {
  display: flex; gap: 8px; margin-top: 12px;
}
#tune-panel .tp-btn {
  flex: 1;
  padding: 8px 10px;
  border: 0; border-radius: 8px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
#tune-panel .tp-btn:active { transform: scale(.96); }
#tune-panel .tp-ghost {
  background: rgba(255,255,255,.12); color: #f5eedf;
}
#tune-panel .tp-ghost:hover { background: rgba(255,255,255,.18); }
#tune-panel .tp-primary {
  background: #f5eedf; color: #1a1714;
}
#tune-panel .tp-primary:hover { background: #fff; }
#tune-panel .tp-tip {
  margin-top: 10px; font-size: 9.5px; opacity: .45; line-height: 1.5;
}
#tune-panel .tp-tip code {
  background: rgba(255,255,255,.10); padding: 1px 4px; border-radius: 3px;
  font-size: 9px; font-family: var(--f-mono, monospace);
}

/* 关闭后留 toast 提示用 */
#tp-toast {
  position: fixed; right: 14px; bottom: 14px;
  z-index: 99999;
  background: rgba(22,19,16,.95);
  color: #f5eedf;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
#tp-toast.on { opacity: 1; transform: translateY(0); }


/* ============================================================================
 *  选择页微调结果 · 2026-08-31（ux-tuner 导出 → 校正选择器后固化）
 *  ------------------------------------------------------------------------
 *  校正说明（重要，改动前必读）：
 *  1) 原导出的 `section.screen.is-active { transform: translate(-22px,2px) }`
 *     已剔除：@keyframes screenIn 终态是 transform:none，配合
 *     animation-fill-mode:both 会锁死 section 的 transform，写了也不生效。
 *     若确实要整体移动，改用 margin（不受 transform 动画影响）。
 *  2) 其余规则加 [data-screen="profile"] 限定：result 屏同样有 .field 且
 *     nth-child 序号会撞，不限定的话位移会串到报告页栏目上。
 *  3) 5 张血型卡数值一致，合并为 #pick-blood 下的 class 规则
 *     （.bl-letter/.bl-type 由 app.js 渲染，仅存在于血型卡内）。
 *  4) 生肖 ICON 用 data-val 定位（已唯一），去掉层层 nth-child。
 * ========================================================================== */

/* --- 12 生肖 ICON：位置 / 大小 --- */
/* 用户调过的 9 条 img transform 已撤销（2026-08-31）：
   标签 .cp-lbl 默认 position:absolute; left:50%; top:100%; transform:translateX(-50%)
   挂在按钮底部居中，img 被 transform 移走时标签跟不上，导致「标签远离 ICON」。
   撤销 9 条 transform 后，ICON 回到按钮中心 → 标签自然在 ICON 下方居中，
   12 个生肖统一对齐。
   若以后想微调某个 ICON 的位置/大小，建议把 .cp-lbl 也一起调整偏移量
   （或直接编辑 JS 里的 POS 常量更直观）。 */

.cloud-pick .cp-img img { transform: none; }  /* 兜底：任何残留 transform 都重置 */

.cloud-pick .cp-lbl { /* 确保标签严格在 ICON（cp-img）下方居中 */
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* --- 血型字母卡（A/B/O/AB/? 五张同值，合并） --- */
#pick-blood .bl-letter { transform: translate(0px, -1px) scale(1.5); }
#pick-blood .bl-type   { transform: translate(0px, 5px) scale(1.37); }

/* --- 选择页标题区 --- */
#btn-back-intro     { transform: translate(1px, -6px); }
.p-head .eyebrow    { transform: translate(0px, -6px); }
section.screen[data-screen="profile"] h2.p-title { transform: translate(9px, 2px) scale(1.05); }

/* --- 三个栏目标签（锁定 profile 屏，防串 result 屏） --- */
section.screen[data-screen="profile"] > div.field.rise:nth-child(2) > div.field-label:nth-child(1) { transform: translate(-6px) scale(0.97); }
section.screen[data-screen="profile"] > div.field.rise:nth-child(3) > div.field-label:nth-child(1) { transform: translate(1px) scale(0.98); }
section.screen[data-screen="profile"] > div.field.rise:nth-child(2) > div.field-label:nth-child(1) > span:nth-child(1) { transform: translate(-4px, -16px) scale(1.05); }
section.screen[data-screen="profile"] > div.field.rise:nth-child(3) > div.field-label:nth-child(1) > span:nth-child(1) { transform: translate(-2px, -12px) scale(1.03); }
section.screen[data-screen="profile"] > div.field.rise:nth-child(4) > div.field-label:nth-child(1) > span:nth-child(1) { transform: translate(-70px, -12px) scale(0.86); }

/* --- 首页主 CTA（START TEST 按钮）文字位置 · 2026-08-31 第二轮微调 --- */
/* 说明：原导出用 #btn-start > span:nth-child(3) > span.t-lbl:nth-child(1)，
   已简化为 #btn-start .t-lbl —— 按钮内该 class 唯一，去掉 nth-child 后
   即使按钮内部结构微调也不会失效。
   注：按钮自身带 .pop（popIn 动画，终态 scale(1) + fill-mode:both）会锁死
   按钮的 transform，但这里改的是内部文字 span，不受影响。 */
#btn-start .t-lbl { transform: translate(-39px, -3px) scale(1.12); }
#btn-start .t-sub { transform: translate(-39px, -3px) scale(1.12); }

/* ============================================================================
 *  结果页微调 · 2026-08-31（ux-tuner 导出 → 校正后固化）
 *  ------------------------------------------------------------------------
 *  校正说明（重要）：
 *  1) 裸 SVG 选择器已加作用域：image/text/rect/circle/path/g:nth-child(...)
 *     原本会命中页面上任意 SVG，现统一限定为 #sample-art ...（画面卡容器内）。
 *     实测这些选择器当前都只匹配 1 个元素，加限定后彻底杜绝误伤。
 *  2) div.ds-* / div.ox-* 统一限定为 #data-sheet ...，避免影响其他页面。
 *  3) 已剔除 3 条危险/无效规则（见文件末尾「已剔除」注释）。
 *  4) transform 已化简：删除恒等的 translate(0,0) / scale(1)，
 *     并把相邻的 translate 相加合并（数学等价，可读性更好）。
 * ========================================================================== */
/* ============================================================================
 *  结果页结构 · 2026-08-31 第七十七轮 · 按用户红线骨架重做
 *  ------------------------------------------------------------------------
 *  红线骨架（从顶到底）：
 *    ds-meta  →  ELEMENT CARD · 编号
 *    ds-body  →  左 60% 图片区(锁死) + 右 40% 信息区(字号独立可调)
 *    ds-cap   →  CAPABILITY MATRIX · 雷达（限高 220px）
 *    ds-row ×3 → Electron config / Appearance / Oxidation（韩派卡片）
 *    ds-foot  →  SPECIMEN · 编号
 *  红线本身宽度/边距可调，内文自适应；图片区整体锁定。
 * ========================================================================== */

/* === ds-stage: 左 60% 图片区（外部 card-editor 调整，这里锁死） === */
.ds-stage {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  border-right: 1.5px solid var(--ink);
}
.ds-hero-art {
  position: relative; z-index: 1;
  width: 100%; height: 100%; display: block;
}
.ds-hero-art svg {
  width: 100%; height: auto; display: block;
  cursor: zoom-in; transition: transform .18s ease;
}
.ds-hero-art svg:hover { transform: scale(1.012); }

/* === ds-body: 60/40 grid（但右侧 minmax 165px 保证 4 项 chip 网格能放下） === */
.ds-body {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(165px, 0.72fr);
  gap: 0;
  position: relative;
  align-items: start;
}

/* === ds-info: 右侧信息区（字号独立可调） === */
.ds-info {
  position: relative;
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; overflow: hidden;
}
.ds-info-head {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px;
}
/* PRAG/EMOT 等大字：40% 列宽下要小一档，整词一行 */
.ds-info .ds-symbol {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(18px, 3.8vw, 24px);     /* 再收一档：保证 PRAGMATIC 等长字在 40% 列放得下 */
  line-height: .9; letter-spacing: -.6px;
  color: var(--ink); text-transform: uppercase;
  word-break: keep-all; overflow-wrap: normal;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-info-color { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ds-info-color .ds-swatch { transform: rotate(7deg); box-shadow: 1px 1px 0 var(--ink); flex: 0 0 auto; }
.ds-info-color .ds-color-lbl { font-size: 8.5px; font-family: var(--f-mono); letter-spacing: 1.2px; font-weight: 800; color: var(--gray-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.ds-info .ds-cname {
  font-family: var(--f-serif); font-size: 13px; line-height: 1.2;
  font-weight: 700; color: var(--ink); margin-top: 1px;
}
.ds-info .ds-enname {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 1.4px;
  color: var(--gray-3); font-weight: 800; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-info .ds-tagline {
  font-family: var(--f-serif); font-style: italic; font-size: 10.5px; line-height: 1.35;
  color: var(--ink-2); margin: 3px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4 项得分：2×2 网格（窄列下 4×1 会被压成竖条） */
.ds-info .ds-chips {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  margin-top: auto; padding-top: 6px;
  border-top: 1px solid var(--ink);
}
.ds-chip-item { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; min-width: 0; }
.ds-chip-item .ds-lbl {
  font-family: var(--f-mono); font-size: 7.5px; letter-spacing: 1px;
  font-weight: 800; color: var(--gray-3); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-chip-item .ds-val {
  font-family: var(--f-display); font-weight: 900; font-size: 13px;
  letter-spacing: -.3px; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.ds-chip-item:nth-child(4) {
  background: var(--ds-accent, #2F4858); color: var(--ds-on, #fff);
  padding: 4px 5px; border: 1px solid var(--ink);
}
.ds-chip-item:nth-child(4) .ds-lbl,
.ds-chip-item:nth-child(4) .ds-val { color: var(--ds-on, #fff); }

/* === ds-cap: 能力矩阵（雷达限高，不再占满屏） === */
.ds-cap { padding: 14px 20px 10px; }
.ds-cap-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px;
  font-weight: 800; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.ds-cap-title::before { content: ''; width: 11px; height: 11px; background: var(--ds-accent, #2F4858); }
.ds-radar { width: 100%; max-width: 280px; margin: 0 auto; }
.ds-radar svg { display: block; width: 100%; height: auto; max-height: 220px; }

/* === 报告区：03 Hidden risks / 04 Action plan = 3 列圆角卡片网格 === */
.rpt-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 14px;
}
.rpt-card {
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 16px 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.rpt-card .dots { display: flex; gap: 5px; font-size: 0; line-height: 0; }
.rpt-card .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); display: block;
}
/* 风险 = 空心点（与栏目语义对应） */
.rpt-card.rpt-risks .dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.rpt-card.dots-1 .dot:nth-child(n+2),
.rpt-card.dots-2 .dot:nth-child(n+3) { display: none; }
.rpt-card .text {
  font-family: var(--f-serif);
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2);
}
.rpt-card.rpt-plan .text { color: var(--ink); }

/* 窄屏自动堆叠为单列 */
@media (max-width: 540px) {
  .rpt-cards { grid-template-columns: 1fr; }
  /* 生肖/星座不再强制重置（2026-09-02 第83轮）：
     tune 累积态已全部改写为 calc(var(--tune-k) * px)，
     由 JS 按容器宽写入 --tune-k（窄屏≈0.76）同比缩放，
     手机与电脑呈现同一套故事化比例，故无需再清回 baseline。 */
}


/* --- 已剔除的规则（不要再加回来，除非确认必要） ---
   section.screen.is-active  → screenIn 动画锁死 section 的 transform，
                               写了也不生效；且 is-active 会串到 result 屏。
   #app                      → 整体缩放 98% + 位移 -124px，会让整页偏移，
                               疑为误拖整个应用容器。
   text:nth-child(9)         → 纵向 +559px 异常巨量位移，元素会被移出可视区。
   若确实需要其中某项，告诉我具体意图，我换等价但不破坏布局的写法。
--------------------------------------------------- */

/* ============ 卡片点击全屏浮层（含陀螺仪视差） ========== */
.av-fs-overlay {
  position: fixed; inset: 0;
  background: rgba(14,12,10,.94);
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  perspective: 1200px;
}
.av-fs-overlay.on {
  opacity: 1; pointer-events: auto;
}
.av-fs-card {
  position: relative;
  width: 92vmin; max-width: 720px; height: auto;
  transform-style: preserve-3d;
  /* 不要 CSS transition：陀螺仪高频更新会跟 JS lerp 抢节奏，导致视差糊掉 */
}
.av-fs-card svg { display: block; width: 100%; height: auto; }
.av-fs-card .av-fs-inner-back,
.av-fs-card .av-fs-inner-front {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.av-fs-card .av-fs-inner-back svg,
.av-fs-card .av-fs-inner-front svg {
  width: 100%; height: auto;
}
.av-fs-inner-back  { transform: translateZ(-72px) scale(1.28); opacity: .78; }
.av-fs-inner-front { transform: translateZ(55px);            opacity: .95; }
.av-fs-overlay .av-fs-close {
  position: absolute; top: 18px; right: 18px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 0; padding: 10px 18px; border-radius: 999px;
  font: 700 13px system-ui; cursor: pointer; backdrop-filter: blur(8px);
}
.av-fs-overlay .av-fs-close:hover { background: rgba(255,255,255,.22); }
.av-fs-overlay .av-fs-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(245,238,223,.7);
  font: 11px ui-monospace, Menlo, monospace;
  white-space: nowrap;
  background: rgba(0,0,0,.4); padding: 8px 14px; border-radius: 999px;
}

/* ============ 设计师白标设置 + 底部烤区预览 ========== */
.designer-gear {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 1000;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  background: var(--ink); color: var(--bg);
  border: 0; border-radius: 999px;
  font: 700 12px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.designer-gear .gear-ico { font-size: 14px; line-height: 1; }
.designer-gear:hover { transform: translateY(-1px); }

.ds-modal-mask {
  position: fixed; inset: 0;
  z-index: 1001;
  background: rgba(14,12,10,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.ds-modal-mask[hidden] { display: none; }
.ds-modal {
  width: 100%; max-width: 420px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.ds-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 800 15px/1.2 ui-monospace, Menlo, monospace;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.ds-modal-x {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink);
  padding: 0 4px;
}
.ds-fld {
  display: block; margin-bottom: 14px;
  font: 600 12px/1.4 system-ui, sans-serif;
  color: var(--ink);
}
.ds-fld > span { display: block; margin-bottom: 6px; opacity: .8; }
.ds-fld input {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  font: 500 14px system-ui, sans-serif;
}
.ds-fld input[type=file] { padding: 8px; font-size: 12px; }
.ds-note {
  font: 500 11px/1.5 system-ui, sans-serif;
  color: var(--ink); opacity: .65;
  margin: 4px 0 16px;
}
.ds-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
.ds-modal-actions .cta { flex: 0 0 auto; }

/* 底部烤区预览（页内，提示导出图里会带的内容） */
.card-footer-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-top: 2px solid var(--ds-accent, #2F4858);
}
.card-footer-preview .fp-left {
  display: flex; flex-direction: column;
  min-width: 0;
}
.card-footer-preview .fp-credit {
  font: 800 13px/1.2 ui-monospace, Menlo, monospace;
  color: var(--ink);
}
.card-footer-preview .fp-name {
  font: 600 12px/1.3 system-ui, sans-serif;
  color: var(--ink); opacity: .8; margin-top: 2px;
}
.card-footer-preview .fp-scan {
  font: 500 12px/1.3 system-ui, sans-serif;
  color: var(--ink); opacity: .7; margin-top: 2px;
}
.card-footer-preview .fp-qr {
  width: 76px; height: 76px; flex: 0 0 76px;
  margin-left: auto;
  background: #fff; padding: 4px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.15);
  object-fit: contain;
}
.card-footer-preview .fp-qr-empty {
  display: flex; align-items: center; justify-content: center;
  font: 700 11px ui-monospace, monospace; color: #999;
}

/* 设计要求画像（页面文字，不放卡上） */
.rpt-brief-text { font-size: 15px; line-height: 1.7; }
.rpt-brief-text b { color: var(--ds-accent, #2F4858); }

/* ============================================================
   ux-tuner 微调结果 · 2026-09-01（第一轮图标 + 第二轮文字标签/位移）
   来源：设计师在 /index.html?tune=1 下对「选择页」生肖调整
   作用：图标缩放/留白/位移 + 文字标签位置/字号 + 按钮整体位移
   选择器逐元素精确，避免误伤其它 cloud-pick
   说明：tune 导出为「累积态」——图标 transform 含上一轮 scale 折进 matrix，
        本块直接烤入该累积 transform；文字标签前缀 matrix(-36px) 即
        translateX(-50%) 快照，已改写为文本 translateX(-50%) 以保响应式。
        按钮位移只烤 translate，不含导出里的绝对 left/top（交由 JS 定位）。
   ============================================================ */

/* ---- 容器：#pick-zodiac 固定高度（2026-09-01 第三轮微调） ----
   --tune-k 是 tune 累积态的等比缩放系数：JS 在 renderAnimalCloud 里按
   当前容器宽 / 436（桌面调参基准宽）写入，桌面 k=1 零变化，
   窄屏 k≈0.76 同比缩放，让手机与电脑同比例故事化（2026-09-02 第83轮）。
   这里给默认值 1，JS 未跑时也保持桌面原观感。 */
#pick-zodiac { height: 623px; --tune-k: 1; }

/* ---- 12 生肖 ICON + 容器：缩放 / 留白 / 位移（累积态，勿拆分） ----
   所有绝对 px 偏移均改写为 calc(var(--tune-k) * Npx)，
   --tune-k 由 JS 按「当前容器宽 / 436（桌面调参基准宽）」写入：
   桌面 k=1 零变化；窄屏 k≈0.76 同比缩放 → 手机与电脑同比例故事化。
   matrix() 只保留 unitless 缩放，平移量拆到 translate() 里（matrix 不接受长度）。
   （2026-09-02 第83轮；参考第82轮 cqw/containment 方案会破坏布局的教训） */
button[data-val="ox"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(0.88704,0,0,0.88704,0,0) translate(calc(var(--tune-k) * -16.72px), calc(var(--tune-k) * -32.56px));
  margin-top: calc(var(--tune-k) * 56px);
}
button[data-val="dragon"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(1.04,0,0,1.04,0,0) translate(calc(var(--tune-k) * 8px), calc(var(--tune-k) * -19px)) scale(1.14);
  width: 122%;
  height: calc(var(--tune-k) * 135px);
}
button[data-val="rat"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(0.84,0,0,0.84,0,0) translate(calc(var(--tune-k) * -5px), calc(var(--tune-k) * -98px)) scale(1.06);
  margin-top: calc(var(--tune-k) * -32px);
  margin-bottom: calc(var(--tune-k) * 2px);
  margin-left: calc(var(--tune-k) * 9px);
}
button[data-val="monkey"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(0.9,0,0,0.9,0,0) translate(calc(var(--tune-k) * 2px), calc(var(--tune-k) * -34px)) scale(1);
  margin-bottom: calc(var(--tune-k) * 29px);
  height: calc(var(--tune-k) * 103px);
}
button[data-val="horse"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(1.08,0,0,1.08,0,0) translate(calc(var(--tune-k) * -4px), calc(var(--tune-k) * -53px)) scale(1);
  margin-top: calc(var(--tune-k) * -31px);
  margin-left: calc(var(--tune-k) * 48px);
  height: calc(var(--tune-k) * 115px);
}
button[data-val="snake"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(1.24,0,0,1.24,0,0) translate(calc(var(--tune-k) * 18px), calc(var(--tune-k) * 10px)) scale(1);
  margin-left: calc(var(--tune-k) * 42px);
}
button[data-val="tiger"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(1.08,0,0,1.08,0,0) translate(calc(var(--tune-k) * -26px), calc(var(--tune-k) * -34px)) scale(1.08);
  margin-top: calc(var(--tune-k) * -3px);
  margin-bottom: calc(var(--tune-k) * -2px);
  height: calc(var(--tune-k) * 114px);
}
button[data-val="rabbit"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(1.16,0,0,1.16,0,0) translate(calc(var(--tune-k) * -8px), calc(var(--tune-k) * -91px)) scale(1);
}
button[data-val="dog"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(0.98,0,0,0.98,0,0);  /* 仅尺寸缩放留 img；位移 76px 已并入按钮级 translate，避免选中 scale 放大偏移成「跳」（2026-09-02 第85轮） */
  margin-top: calc(var(--tune-k) * 1px);
  margin-bottom: calc(var(--tune-k) * 26px);
  height: calc(var(--tune-k) * 87px);
}
button[data-val="pig"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: matrix(0.92,0,0,0.92,0,0) translate(calc(var(--tune-k) * 26px), calc(var(--tune-k) * -28px)) scale(1);
  margin-top: calc(var(--tune-k) * 0px);
  margin-bottom: calc(var(--tune-k) * 18px);
  margin-left: calc(var(--tune-k) * 7px);
}
button[data-val="goat"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: none;  /* 位移(-29,-152)已并入按钮级，避免选中放大被甩飞（2026-09-02 第85轮） */
  margin-top: calc(var(--tune-k) * 37px);
  height: calc(var(--tune-k) * 99px);
}
button[data-val="rooster"] > span.cp-img:nth-child(1) > img:nth-child(1) {
  transform: none;  /* 位移(21,-79)已并入按钮级，避免选中放大被甩飞（2026-09-02 第85轮） */
  margin-top: calc(var(--tune-k) * 5px);
  margin-bottom: calc(var(--tune-k) * 9px);
}
/* 图标容器整体位移（GOAT / DOG 微调时连容器一起挪）
   注意：原 DOG/GOAT 的 translate 已上移到「按钮级」（见下方生肖按钮整体位移块），
   这里 .cp-img 只保留尺寸，不再写 transform —— 否则会盖掉 .is-on .cp-img 的 scale(1.16)，
   导致狗/羊选中时不放大反而保留原位（2026-09-02 第84轮修复）。 */
button[data-val="dog"] > span.cp-img:nth-child(1) {
  width: 97%;
  height: calc(var(--tune-k) * 109px);
}
/* GOAT 的 .cp-img 不再需要 transform（已并入按钮级 translate），留空避免覆盖选中缩放 */

/* ---- 12 生肖 文字标签：位置 + 字号（2026-09-01 第二轮，tune 导出） ---- */
button[data-val="ox"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 6px), calc(var(--tune-k) * -8px)) scale(1.18);
}
button[data-val="horse"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 19px), calc(var(--tune-k) * -104px)) scale(1.06);
}
button[data-val="goat"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 5px), calc(var(--tune-k) * -231px)) scale(1.18);
}
button[data-val="pig"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 36px), calc(var(--tune-k) * -173px)) scale(1.12);
}
button[data-val="snake"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 39px), calc(var(--tune-k) * -72px)) scale(1.06);
}
button[data-val="dragon"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 10px), calc(var(--tune-k) * -38px)) scale(1.18);
}
button[data-val="monkey"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 1px), calc(var(--tune-k) * -62px)) scale(1.18);
}
button[data-val="rooster"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 9px), calc(var(--tune-k) * -183px)) scale(1.08);
}
button[data-val="dog"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 187px), calc(var(--tune-k) * -66px)) scale(1.18);
}
button[data-val="rabbit"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * -9px), calc(var(--tune-k) * -98px)) scale(1.18);
}
button[data-val="rat"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * 1px), calc(var(--tune-k) * -101px)) scale(1.18);
}
button[data-val="tiger"] > span.cp-lbl {
  transform: translateX(-50%) translate(calc(var(--tune-k) * -29px), calc(var(--tune-k) * -49px)) scale(1.18);
}

/* ---- 生肖按钮整体位移（tune 导出，仅 translate，不含绝对 left/top） ----
   第85轮（2026-09-02）把 DOG/GOAT/ROOSTER 各自 IMG 上的「纯位移」也并入按钮级，
   让 IMG 只保留尺寸缩放（matrix(s)）、不再带 translate。这样选中态的 scale 放大
   不会再把 tune 位移一起放大成「跳」，图标原地长大。各值 = 原按钮 translate + 原 IMG translate：
     goat:   34-29=5,     82-152=-70
     dog:    27+76=103,   -23+0=-23
     rooster:-5+21=16,    -25-79=-104 */
button[data-val="goat"]    { transform: translate(calc(var(--tune-k) * 5px),   calc(var(--tune-k) * -70px)); }
button[data-val="dog"]     { transform: translate(calc(var(--tune-k) * 103px), calc(var(--tune-k) * -23px)); }
button[data-val="rooster"] { transform: translate(calc(var(--tune-k) * 16px),  calc(var(--tune-k) * -104px)); }

/* ---- 12 星座 ICON：统一缩到 ~0.88（含 capricorn 补齐，保持整齐） ---- */
button[data-val="sagittarius"] > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="aries"]      > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="leo"]        > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="taurus"]     > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="virgo"]      > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="gemini"]     > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="libra"]      > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="scorpio"]    > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.84); }
button[data-val="cancer"]     > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="aquarius"]   > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="pisces"]     > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }
button[data-val="capricorn"]  > span.cp-img:nth-child(1) > img:nth-child(1) { transform: translate(0px, 0px) scale(0.88); }

/* ---- 星座文字标签：统一贴格底、水平居中，消除远近不一 ---- */
#pick-star .star-pick .cp-lbl {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}