/* ══════════════════════════════════════════════════════════════
   古朴神秘质感 —— 两站共用的视觉与仪式动画层
   材质取向：宣纸的糙、墨的洇、朱砂的沉、描金的哑光
   动画取向：仪式感优先于炫技 —— 落柱、掷币、洇墨、盖印
   全部动画在 prefers-reduced-motion 下自动关闭
   ══════════════════════════════════════════════════════════════ */

:root {
  --rice: #EFE9DC;           /* 宣纸 */
  --rice-2: #F6F1E6;
  --ink: #191620;            /* 松烟墨 */
  --ink-soft: #6B6459;
  --cinnabar: #9B2C2C;       /* 朱砂 */
  --gold: #8A6A16;           /* 哑光描金 */
  --gold-lit: #C9A227;
  --hair: rgba(25, 22, 32, .16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --rice: #0C0B0E; --rice-2: #15131A;
    --ink: #EFE8DA; --ink-soft: #9A9184;
    --cinnabar: #C2453A; --gold: #C9A227; --gold-lit: #E0BC4A;
    --hair: rgba(201, 162, 39, .22);
  }
}

/* ── 宣纸肌理：极细噪点 + 帘纹，靠伪元素叠加，不用外部图 ── */
.paper { position: relative; }
.paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .35; mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(120,105,70,.055) 0 1px, transparent 1px 3px),   /* 帘纹 */
    radial-gradient(circle at 20% 30%, rgba(155,44,44,.030) 0, transparent 38%),
    radial-gradient(circle at 78% 72%, rgba(138,106,22,.038) 0, transparent 42%);
}
@media (prefers-color-scheme: dark) {
  .paper::before { mix-blend-mode: screen; opacity: .22; }
}

/* ── 墨韵洇开：结果区出现时像墨滴入纸 ── */
@keyframes ink-bloom {
  from { opacity: 0; filter: blur(9px); transform: scale(.985); }
  60%  { opacity: 1; filter: blur(1.5px); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}
.ink-in { animation: ink-bloom .72s cubic-bezier(.22,.7,.2,1) both; }

/* ── 落柱：四柱自上而下逐根落下，带笔锋擦入 ── */
@keyframes pillar-drop {
  from { opacity: 0; transform: translateY(-16px) scaleY(.86);
         clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0) scaleY(1);
         clip-path: inset(0 0 0 0); }
}
.pillar-drop > * { animation: pillar-drop .5s cubic-bezier(.2,.8,.2,1) both; }
.pillar-drop > *:nth-child(1) { animation-delay: .05s; }
.pillar-drop > *:nth-child(2) { animation-delay: .20s; }
.pillar-drop > *:nth-child(3) { animation-delay: .35s; }
.pillar-drop > *:nth-child(4) { animation-delay: .50s; }

/* ── 起爻：六爻自下而上逐爻生成 ── */
@keyframes yao-rise {
  from { opacity: 0; transform: translateX(-10px) scaleX(.4); }
  to   { opacity: 1; transform: translateX(0) scaleX(1); }
}
.yao-stack .yao {
  transform-origin: left center;
  animation: yao-rise .34s cubic-bezier(.2,.85,.2,1) both;
}
/* 自下而上：视觉上第一行是上爻，故倒序延迟 */
.yao-stack .yao:nth-child(6) { animation-delay: .05s; }
.yao-stack .yao:nth-child(5) { animation-delay: .22s; }
.yao-stack .yao:nth-child(4) { animation-delay: .39s; }
.yao-stack .yao:nth-child(3) { animation-delay: .56s; }
.yao-stack .yao:nth-child(2) { animation-delay: .73s; }
.yao-stack .yao:nth-child(1) { animation-delay: .90s; }

.yao { font-family: var(--serif, "Songti SC", serif); line-height: 1.5;
       letter-spacing: .26em; white-space: nowrap; }
.yao.moving { color: var(--cinnabar); position: relative; }
.yao.moving::after {
  content: "動"; font-size: .58em; margin-left: .5em; letter-spacing: 0;
  color: var(--cinnabar); vertical-align: middle;
  animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

/* ── 掷币：三枚铜钱旋转落定（摇卦仪式） ── */
.coins { display: flex; gap: .9rem; justify-content: center; padding: .4rem 0 }
.coin {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--rice-2);
  display: grid; place-items: center;
  font-family: var(--serif, serif); font-size: .8rem; color: var(--gold);
  position: relative;
  animation: coin-spin .62s cubic-bezier(.3,.1,.3,1) both;
}
.coin::after {           /* 方孔 */
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--gold); opacity: .7;
}
.coin:nth-child(2) { animation-delay: .09s }
.coin:nth-child(3) { animation-delay: .18s }
@keyframes coin-spin {
  0%   { transform: rotateY(0) translateY(-26px); opacity: 0 }
  70%  { transform: rotateY(900deg) translateY(0); opacity: 1 }
  85%  { transform: rotateY(900deg) translateY(-5px) }
  100% { transform: rotateY(900deg) translateY(0); opacity: 1 }
}

/* ── 格线自绘：测名五格逐条画出 ── */
@keyframes rule-draw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.grid-draw > * { position: relative }
.grid-draw > *::before {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--gold); transform-origin: left center;
  animation: rule-draw .5s cubic-bezier(.2,.8,.2,1) both;
}
.grid-draw > *:nth-child(1)::before { animation-delay: .05s }
.grid-draw > *:nth-child(2)::before { animation-delay: .14s }
.grid-draw > *:nth-child(3)::before { animation-delay: .23s }
.grid-draw > *:nth-child(4)::before { animation-delay: .32s }
.grid-draw > *:nth-child(5)::before { animation-delay: .41s }

/* ── 数字跳动：笔画数/五格数滚动到位 ── */
.tick { font-variant-numeric: tabular-nums; }

/* ── 朱砂印：结果落定时盖章 ── */
@keyframes seal-stamp {
  0%   { opacity: 0; transform: rotate(-16deg) scale(2.1) }
  55%  { opacity: 1; transform: rotate(-7deg) scale(.94) }
  75%  { transform: rotate(-7deg) scale(1.04) }
  100% { opacity: 1; transform: rotate(-7deg) scale(1) }
}
.seal {
  width: 58px; height: 58px; display: grid; place-items: center;
  background: var(--cinnabar); color: #F7EFE3;
  font-family: var(--serif, "Songti SC", serif); font-size: 1rem;
  line-height: 1.04; text-align: center; letter-spacing: .04em;
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
  animation: seal-stamp .8s cubic-bezier(.2,1.3,.3,1) both;
  animation-delay: .75s;
  /* 绕**右边缘**放大，不绕中心。
     印章贴在卡片右侧（right:14px），落章动画起手是 scale(2.1) ——
     绕中心放大的话 58px 会瞬间撑到 122px，两边各探出 32px，
     右边那一半直接越过屏幕右缘：手机上那 0.8 秒里页面能横向拖动。
     改成 100% 50% 之后，右缘钉死不动，放大只往左和上下长，
     落章的手感一点没变，页面却再也不会被撑宽。 */
  transform-origin: 100% 50%;
}
.seal span { display: block }

/* ── 罗盘环：氛围底纹，极慢自转 ── */
.luopan {
  position: absolute; pointer-events: none; z-index: 0;
  width: min(74vw, 560px); aspect-ratio: 1; right: -14%; top: -12%;
  opacity: .13; animation: luopan-turn 240s linear infinite;
}
@keyframes luopan-turn { to { transform: rotate(360deg) } }

/* ── 推算中：墨点呼吸 ── */
.casting { display: inline-flex; align-items: center; gap: .5rem;
           color: var(--ink-soft); font-size: .9rem }
.casting i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  display: inline-block; animation: breathe 1.25s ease-in-out infinite;
}
.casting i:nth-child(2) { animation-delay: .18s }
.casting i:nth-child(3) { animation-delay: .36s }
@keyframes breathe {
  0%,100% { opacity: .2; transform: scale(.8) }
  50%     { opacity: 1;  transform: scale(1.25) }
}

/* ── 翻牌：塔罗逐张揭开 ── */
.flip { perspective: 900px }
.flip .face {
  transform-style: preserve-3d;
  animation: card-flip .78s cubic-bezier(.3,.9,.25,1) both;
}
@keyframes card-flip {
  from { transform: rotateY(180deg); opacity: .25 }
  to   { transform: rotateY(0);      opacity: 1 }
}
.flip:nth-of-type(1) .face { animation-delay: .10s }
.flip:nth-of-type(2) .face { animation-delay: .34s }
.flip:nth-of-type(3) .face { animation-delay: .58s }
.flip:nth-of-type(4) .face { animation-delay: .82s }

/* ── 逐字揭示（古法判语，像有人一笔一笔写出来）── */
@keyframes reveal-chars { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
.brush-in { animation: reveal-chars 1.15s steps(24, end) both; animation-delay: .45s }

@media (prefers-reduced-motion: reduce) {
  .ink-in, .pillar-drop > *, .yao-stack .yao, .coin, .grid-draw > *::before,
  .seal, .luopan, .casting i, .flip .face, .brush-in {
    animation: none !important;
  }
  .luopan { display: none }
}

/* ══════════════════════════════════════════════════════════════
   表单归一化 —— 修 iOS/微信内置浏览器的几个经典坑
   ① date/time 输入固有宽度会撑破 grid 容器 → min-width:0 + appearance:none
   ② 字号 <16px 时 iOS 聚焦会整页放大 → 统一 16px
   ③ select 带系统胶囊圆角、date/time 文本默认居中 → 全部归一
   ══════════════════════════════════════════════════════════════ */
.form input,
.form select,
.form textarea {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;              /* 关键：grid/flex 子项不被固有宽度撑破 */
  max-width: 100%;
  border-radius: 0;          /* 去掉 iOS 默认圆角 */
  font-size: 16px;           /* 低于 16px 时 iOS 聚焦会缩放整页 */
  font-family: inherit;
  line-height: 1.4;
  text-align: left;          /* iOS 的 date/time 默认居中，与标签不齐 */
  padding: .72rem .8rem;
  min-height: 2.95rem;       /* iOS 各类型输入高度不一，强制对齐 */
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hair);
}
/* iOS 上 date/time 的内层容器也会溢出，一并压住 */
.form input[type="date"],
.form input[type="time"] {
  display: block;
  -webkit-text-fill-color: var(--ink);
}
.form input[type="date"]::-webkit-date-and-time-value,
.form input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.form input::-webkit-calendar-picker-indicator {
  opacity: .5;
  margin-left: 0;
}
/* select 自绘箭头（appearance:none 后系统箭头会消失） */
.form select {
  padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 2px),
    calc(100% - .8rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form input:focus,
.form select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
/* 两列并排：minmax(0,1fr) 才不会被内容撑破；窄屏直接堆叠 */
.form .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .7rem;
}
@media (max-width: 400px) {
  .form .row { grid-template-columns: 1fr; }
}
/* 容器本身也兜一层，任何情况下不横向溢出 */
.form { min-width: 0; overflow-x: clip; }
.form label {
  display: block; margin: .95rem 0 .38rem;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.form label:first-child { margin-top: 0 }

/* ═══════════════ 全页古朴底 ═══════════════
   之前 .paper 只挂在个别卡片上，页面本体还是一块纯色 —— 质感等于没有。
   这里把帘纹与洇痕铺到 <body> 本身（fixed 底层，不随滚动漂），
   并给出「界纹」竖线与四角包边，整页立刻是宣纸+雅致装帧的观感。 */
body.paper-page { position: relative; }
body.paper-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .55; mix-blend-mode: multiply;
  background-image:
    /* 帘纹：竖向细纹，宣纸的抄制痕 */
    repeating-linear-gradient(90deg,
      rgba(120,105,70,.050) 0 1px, transparent 1px 4px),
    /* 界纹：每 10rem 一道淡竖线，像旧书的版框 */
    repeating-linear-gradient(90deg,
      rgba(120,105,70,.055) 0 1px, transparent 1px 10rem),
    /* 洇痕：几处极淡的墨/朱砂晕，打破平板 */
    radial-gradient(ellipse at 12% 18%, rgba(155,44,44,.032) 0, transparent 40%),
    radial-gradient(ellipse at 84% 34%, rgba(138,106,22,.040) 0, transparent 44%),
    radial-gradient(ellipse at 30% 82%, rgba(60,50,35,.032) 0, transparent 46%),
    radial-gradient(ellipse at 92% 90%, rgba(155,44,44,.026) 0, transparent 38%);
}
/* 四角包边 —— 线装书护角的意思，只用两层描边，不加图片 */
body.paper-page::after {
  content: ""; position: fixed; inset: 10px; pointer-events: none; z-index: 0;
  border: 1px solid rgba(138,106,22,.20);
  box-shadow: inset 0 0 0 4px rgba(138,106,22,.055);
}
/* 排除所有 body 直属的浮层 —— `body.paper-page > *` 的特异性(0,1,1)会压过
   `.rite`(0,1,0)，把 fixed 打回 relative，浮层就沉到内容底下去了。
   仪式层当初栽过一次，结账浮层 .ppmask 又栽了同一个坑：
   position 被改成 relative、z-index 被压成 1，人在页面顶部根本看不见它。
   **任何新加的 body 直属浮层都要往这个 :not() 里补一个类名。** */
body.paper-page > *:not(.rite):not(.ppmask) { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  body.paper-page::before { mix-blend-mode: screen; opacity: .30; }
  body.paper-page::after {
    border-color: rgba(201,162,39,.20);
    box-shadow: inset 0 0 0 4px rgba(201,162,39,.05);
  }
}
@media (max-width: 480px) {            /* 手机上收窄包边，别挤内容 */
  body.paper-page::after { inset: 5px; }
}

/* 结果卡逐张浮现 —— 让「算出来」有个过程感，而不是一整屏砸下来 */
.out.on > .card, .out.on > .sugar, .out.on > .interpret, .out.on > .wall {
  animation: rise-in .5s cubic-bezier(.22,.68,0,1) both;
}
.out.on > *:nth-child(1) { animation-delay: .00s }
.out.on > *:nth-child(2) { animation-delay: .07s }
.out.on > *:nth-child(3) { animation-delay: .14s }
.out.on > *:nth-child(4) { animation-delay: .21s }
.out.on > *:nth-child(5) { animation-delay: .28s }
.out.on > *:nth-child(6) { animation-delay: .35s }
.out.on > *:nth-child(n+7) { animation-delay: .42s }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px) }
  to   { opacity: 1; transform: none;             filter: none }
}
@media (prefers-reduced-motion: reduce) {
  .out.on > * { animation: none !important }
}

/* ══════════════ 起盘仪式 ══════════════
   八字一秒弹出来，用户不会觉得"算过了"。这里让排盘走一段有次第的过程：
   罗盘转、逐句报进度、朱印落定，全程约 2.6 秒 —— 够慢到显得慎重，
   又不至于让人等得烦。真正的计算早就回来了，仪式只是把它郑重地交出去。 */
.rite{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;flex-direction:column;
  background:radial-gradient(ellipse at 50% 42%,
    rgba(20,17,26,.94) 0, rgba(8,7,10,.985) 62%);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .45s}
.rite.on{opacity:1;pointer-events:auto}
@media (prefers-color-scheme:light){
  .rite{background:radial-gradient(ellipse at 50% 42%,
    rgba(246,241,230,.95) 0, rgba(232,225,210,.99) 62%)}
}
/* 罗盘：三层同心环，反向慢转 */
.rite .dial{position:relative;width:min(62vw,236px);aspect-ratio:1;margin-bottom:2.1rem}
.rite .ring{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(201,162,39,.34)}
.rite .ring.r2{inset:13%;border-color:rgba(201,162,39,.24);
  animation:dial-cw 16s linear infinite}
.rite .ring.r3{inset:26%;border-color:rgba(194,69,58,.30);
  animation:dial-ccw 11s linear infinite}
.rite .ring.r1{animation:dial-cw 26s linear infinite}
/* 环上的刻度 —— 用 conic-gradient 画 24 格，代表二十四山 */
.rite .ring.r1::before{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(201,162,39,.30) 0 .6deg, transparent .6deg 15deg);
  -webkit-mask:radial-gradient(circle, transparent 0 92%, #000 92%);
  mask:radial-gradient(circle, transparent 0 92%, #000 92%)}
@keyframes dial-cw  { to { transform:rotate(360deg) } }
@keyframes dial-ccw { to { transform:rotate(-360deg) } }
/* 中央太极，缓缓自转并呼吸 */
.rite .taiji{position:absolute;inset:38%;border-radius:50%;
  background:conic-gradient(from 90deg, var(--ink,#EFE8DA) 0 50%, transparent 50% 100%);
  animation:dial-cw 7s linear infinite, rite-breathe 2.6s ease-in-out infinite;
  opacity:.82}
@keyframes rite-breathe{0%,100%{filter:brightness(.86)}50%{filter:brightness(1.16)}}
/* 四柱字在环内依次点亮 */
.rite .gz{position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Songti SC",serif;font-size:1.5rem;letter-spacing:.42em;
  color:var(--gold,#C9A227);opacity:0;text-indent:.42em}
.rite .gz.lit{animation:gz-flash 1.1s ease-out both}
@keyframes gz-flash{
  0%{opacity:0;transform:scale(.82);filter:blur(6px)}
  40%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(1.06);filter:blur(2px)}}
/* 进度句：逐句替换，不叠加 */
.rite .step{font-family:"Songti SC",serif;font-size:1.02rem;letter-spacing:.28em;
  color:var(--muted,#9A9184);min-height:1.6em;text-align:center}
.rite .step b{color:var(--ink,#EFE8DA);font-weight:400}
.rite .step.sw{animation:step-swap .5s ease-out both}
@keyframes step-swap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.rite .bar{width:min(58vw,214px);height:2px;min-height:0;padding:0;border:0;display:block;background:rgba(201,162,39,.20);
  margin-top:1.5rem;overflow:hidden}
.rite .bar i{display:block;height:100%;width:0;background:var(--gold,#C9A227);
  transition:width .5s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){
  .rite .ring,.rite .taiji{animation:none}
  .rite .gz.lit,.rite .step.sw{animation-duration:.01s}
}

/* ══════════════ 付费按钮 ══════════════
   之前解读入口只是一行字，看着像脚注，不像"可以点的东西"。
   这里做成实体按钮：朱砂底、金边、内嵌高光，按下有回弹。 */
.cta{display:inline-flex;align-items:center;gap:.75rem;
  padding:.98rem 2.3rem;border:0;cursor:pointer;text-decoration:none;
  font-family:"Songti SC",serif;font-size:1.12rem;letter-spacing:.32em;
  text-indent:.32em;color:#F6EFDD;position:relative;
  background:linear-gradient(168deg,#B8413A 0%,#9B2C2C 52%,#7E2222 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,225,190,.34),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 1px rgba(201,162,39,.55),
    0 3px 0 rgba(0,0,0,.22),
    0 10px 26px -8px rgba(155,44,44,.62);
  transition:transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .16s}
.cta::after{content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(246,239,221,.26)}
.cta:hover{transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,225,190,.42),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 1px rgba(201,162,39,.85),
    0 5px 0 rgba(0,0,0,.22),
    0 16px 34px -8px rgba(155,44,44,.72)}
.cta:active{transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.34),
    0 0 0 1px rgba(201,162,39,.6),
    0 1px 0 rgba(0,0,0,.2)}
.cta .arrow{font-size:.92em;opacity:.86;letter-spacing:0;text-indent:0}
.cta.gold{color:#241C08;
  background:linear-gradient(168deg,#E7C55A 0%,#C9A227 52%,#A8850F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.55),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 0 1px rgba(120,92,10,.5),
    0 3px 0 rgba(0,0,0,.18),
    0 10px 26px -8px rgba(201,162,39,.55)}
.cta.gold::after{border-color:rgba(60,45,8,.24)}
/* 按钮上方的一层微光扫过，隔几秒一次，提示"这是可点的" */
.cta .sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cta .sheen::before{content:"";position:absolute;top:-60%;left:-40%;
  width:28%;height:220%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  animation:sheen-pass 4.6s ease-in-out infinite}
@keyframes sheen-pass{0%,72%{left:-40%}92%,100%{left:118%}}
@media (prefers-reduced-motion:reduce){ .cta .sheen::before{animation:none} }

/* ══════════════ 仪式 · 分场景 ══════════════
   同一个仪式层，四种法器：八字看罗盘、六爻看掷钱、塔罗看洗牌、
   姓名看落格盖印。场景只是氛围，不预示任何真实结果。 */
.rite .stage{position:relative;width:min(62vw,236px);aspect-ratio:1;
  margin-bottom:2.1rem}
.rite .stage .dial{position:absolute;inset:0;width:auto;margin:0}
.rite .stage .gz{position:absolute;inset:0}
.rite .scene{position:absolute;inset:0;display:none}
.rite[data-kind="iching"] .dial,
.rite[data-kind="tarot"] .dial,
.rite[data-kind="fengshui"] .dial,
.rite[data-kind="name"] .dial{display:none}
.rite[data-kind="fengshui"] .sc-luo{display:block}
.rite[data-kind="iching"] .sc-coins{display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2rem}
.rite[data-kind="tarot"] .sc-cards{display:block}
.rite[data-kind="name"] .sc-grids{display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.6rem}

/* —— 六爻：三枚铜钱翻掷 + 六爻位逐一落定 —— */
.sc-coins .crow{display:flex;gap:1.15rem;perspective:600px}
.sc-coins .ccoin{width:52px;height:52px;border-radius:50%;position:relative;
  border:3px solid var(--gold,#C9A227);
  background:radial-gradient(circle at 34% 30%,
    rgba(255,236,180,.45) 0, rgba(201,162,39,.20) 46%, rgba(120,92,10,.28) 100%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.25);
  animation:ccoin-toss 1.15s cubic-bezier(.35,.05,.4,1) infinite}
.sc-coins .ccoin::after{content:"";position:absolute;inset:0;margin:auto;
  width:15px;height:15px;border:2.5px solid var(--gold,#C9A227)} /* 方孔 */
.sc-coins .ccoin:nth-child(2){animation-delay:.14s}
.sc-coins .ccoin:nth-child(3){animation-delay:.28s}
@keyframes ccoin-toss{
  0%  {transform:translateY(0) rotateY(0)}
  38% {transform:translateY(-30px) rotateY(540deg)}
  70% {transform:translateY(0) rotateY(720deg)}
  82% {transform:translateY(-7px) rotateY(720deg)}
  100%{transform:translateY(0) rotateY(720deg)}}
.sc-coins .cslots{display:flex;flex-direction:column-reverse;gap:9px;
  width:64%}
.sc-coins .cslots i{display:block;height:7px;background:rgba(201,162,39,.16);
  position:relative;overflow:hidden}
.sc-coins.on .cslots i::after{content:"";position:absolute;inset:0;
  transform:scaleX(0);transform-origin:left;background:var(--gold,#C9A227);
  animation:cslot-set .34s ease-out forwards}
.sc-coins.on .cslots i:nth-child(1)::after{animation-delay:.30s}
.sc-coins.on .cslots i:nth-child(2)::after{animation-delay:.64s}
.sc-coins.on .cslots i:nth-child(3)::after{animation-delay:.98s}
.sc-coins.on .cslots i:nth-child(4)::after{animation-delay:1.32s}
.sc-coins.on .cslots i:nth-child(5)::after{animation-delay:1.66s}
.sc-coins.on .cslots i:nth-child(6)::after{animation-delay:2.00s}
@keyframes cslot-set{to{transform:scaleX(1)}}

/* —— 塔罗：五张牌背洗切 —— */
.sc-cards .cd{position:absolute;left:50%;top:50%;width:86px;height:132px;
  margin:-66px 0 0 -43px;border:1.5px solid var(--gold,#C9A227);
  background:
    repeating-linear-gradient(45deg, rgba(201,162,39,.16) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(-45deg, rgba(201,162,39,.12) 0 7px, transparent 7px 14px),
    var(--surface,#15131A);
  box-shadow:0 8px 22px rgba(0,0,0,.35);border-radius:5px}
.sc-cards .cd::after{content:"";position:absolute;inset:6px;
  border:1px solid rgba(201,162,39,.4);border-radius:3px}
.sc-cards.on .c1{animation:cd-shuf1 1.5s ease-in-out infinite}
.sc-cards.on .c2{animation:cd-shuf2 1.5s ease-in-out infinite;animation-delay:.12s}
.sc-cards.on .c3{animation:cd-shuf3 1.5s ease-in-out infinite;animation-delay:.24s}
.sc-cards.on .c4{animation:cd-shuf2 1.5s ease-in-out infinite reverse;animation-delay:.36s}
.sc-cards.on .c5{animation:cd-shuf1 1.5s ease-in-out infinite reverse;animation-delay:.48s}
@keyframes cd-shuf1{0%,100%{transform:translateX(0) rotate(-9deg)}
  50%{transform:translateX(-46px) rotate(-16deg)}}
@keyframes cd-shuf2{0%,100%{transform:translateX(0) rotate(-4deg)}
  50%{transform:translateX(40px) rotate(9deg)}}
@keyframes cd-shuf3{0%,100%{transform:translateY(0) rotate(2deg)}
  50%{transform:translateY(-26px) rotate(5deg)}}

/* —— 风水：罗经正针 —— 二十四山逐格点亮，磁针摆荡后定住 ——
   这一段刻意做得「慢」：真正拿罗盘定向就是要等针停，
   急不得。仪式在这里不是装饰，是把那份郑重还原出来。 */
.sc-luo{position:relative;width:min(66vw,252px);aspect-ratio:1;margin:0 auto}
.sc-luo::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(201,162,39,.34);
  background:radial-gradient(circle at 50% 44%,
    rgba(201,162,39,.10) 0, transparent 68%)}
.sc-luo::after{content:"";position:absolute;inset:14%;border-radius:50%;
  border:1px dashed rgba(201,162,39,.24)}
/* 二十四山刻度 */
.lp24{position:absolute;inset:0}
/* 用 bottom:50% 让刻度底边正落在盘心 —— 配 transform-origin:bottom center
   轴心才在圆心上。写成 top:50% + translateY(-100%) 的话，轴心会掉到
   盘心下方一个身位，刻度绕错点旋转、整圈散到圆环外面去（第一版就是这样）。 */
.lp24 i{position:absolute;left:50%;bottom:50%;width:2px;height:44%;
  margin-left:-1px;transform-origin:bottom center;
  transform:rotate(calc(var(--i) * 15deg));
  background:linear-gradient(0deg,transparent 0 62%,rgba(201,162,39,.8) 62%);
  opacity:.16}
/* 八个正位（子午卯酉四正 + 四维）刻度更长更亮，一眼看出方位骨架 */
.lp24 i:nth-child(3n+2){height:48%;
  background:linear-gradient(0deg,transparent 0 54%,rgba(201,162,39,.95) 54%)}
.sc-luo.on .lp24 i{animation:lp-lit .5s ease-out forwards;
  animation-delay:calc(var(--i) * 90ms)}
@keyframes lp-lit{to{opacity:1}}
/* 天池水与磁针 */
.lpwater{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;
  margin:-17% 0 0 -17%;border-radius:50%;
  border:1px solid rgba(201,162,39,.4);
  background:radial-gradient(circle at 42% 36%,
    rgba(255,255,255,.10) 0, rgba(0,0,0,.16) 70%)}
/* 磁针：南北两头，北头朱砂。同样用 bottom:50% 把轴心钉在圆心。 */
.lpneedle{position:absolute;left:50%;bottom:50%;width:3px;height:32%;
  margin-left:-1.5px;transform-origin:bottom center;z-index:2;
  background:linear-gradient(0deg,transparent 0 3%,
    var(--cinnabar,#C2453A) 3% 100%);
  transform:rotate(0deg)}
.lpneedle::after{content:"";position:absolute;left:0;top:100%;
  width:3px;height:88%;
  background:linear-gradient(180deg,rgba(201,162,39,.6) 0 97%,transparent 97%)}
.sc-luo.on .lpneedle{animation:lp-settle 3.4s cubic-bezier(.22,.68,.24,1) forwards}
/* 针先大幅摆荡，逐次收敛，最后定住 —— 真罗盘就是这样停下来的 */
@keyframes lp-settle{
  0%   {transform:rotate(-64deg)}
  18%  {transform:rotate(41deg)}
  36%  {transform:rotate(-24deg)}
  54%  {transform:rotate(14deg)}
  70%  {transform:rotate(-7deg)}
  84%  {transform:rotate(3deg)}
  93%  {transform:rotate(-1deg)}
  100% {transform:rotate(0deg)}
}
.lphub{position:absolute;left:50%;top:50%;width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;border-radius:50%;z-index:3;
  background:var(--gold,#C9A227);box-shadow:0 0 10px rgba(201,162,39,.6)}

/* —— 姓名：五格逐一落定 + 朱砂盖印 —— */
.sc-grids .grow{display:flex;gap:12px}
.sc-grids .grow b{width:40px;height:40px;border:2px solid rgba(201,162,39,.4);
  position:relative}
.sc-grids .grow b::before{content:"";position:absolute;inset:0;
  background:rgba(201,162,39,.30);transform:scale(0);}
.sc-grids.on .grow b::before{animation:gsq-set .4s ease-out forwards}
.sc-grids.on .grow b:nth-child(1)::before{animation-delay:.25s}
.sc-grids.on .grow b:nth-child(2)::before{animation-delay:.55s}
.sc-grids.on .grow b:nth-child(3)::before{animation-delay:.85s}
.sc-grids.on .grow b:nth-child(4)::before{animation-delay:1.15s}
.sc-grids.on .grow b:nth-child(5)::before{animation-delay:1.45s}
@keyframes gsq-set{to{transform:scale(1)}}
.sc-grids .gseal{width:64px;height:64px;border:3px solid #C2453A;
  position:relative;opacity:0;background:#C2453A;
  display:flex;align-items:center;justify-content:center}
.sc-grids .gseal::after{content:"";position:absolute;inset:5px;
  border:1.5px solid rgba(255,255,255,.72);pointer-events:none}
/* 朱文：白字压红底。印面是空的就不是印章，是个方框。 */
.sc-grids .gseal b{font-family:"Songti SC","STSong",serif;font-weight:700;
  font-size:34px;line-height:1;color:#fff;letter-spacing:0;
  transform:translateY(1px)}
.sc-grids.on .gseal{animation:gseal-stamp .5s cubic-bezier(.2,1.6,.4,1) forwards;
  animation-delay:1.8s;
  /* 同上：起手 scale(1.9)，绕中心放大会向外探出。这枚印靠右下，
     所以钉住右下角，只往内长。 */
  transform-origin:100% 100%}
@keyframes gseal-stamp{
  from{opacity:0;transform:scale(1.9) rotate(-10deg)}
  to  {opacity:.92;transform:scale(1) rotate(-3deg)}}

/* ══════════════ 塔罗结果 · 逐张翻牌 ══════════════
   牌先全部背面朝上落位，再逐张翻开 —— 想先看哪张也可以点它。
   锁住的牌（付费才翻）永远背面：付费=翻开这张牌，比"解锁更多内容"直白得多。 */
.trev{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1rem;margin-top:.8rem;perspective:1400px}
/* 入场动画放在外层 slot —— 若直接放在 .tcard 上，fill-mode 会把
   transform:none 永久钉住，翻转的 rotateY 就再也生效不了 */
.tslot{animation:tcard-deal .5s cubic-bezier(.2,.9,.3,1) both;perspective:1400px}
.tslot:nth-child(1){animation-delay:.05s}.tslot:nth-child(2){animation-delay:.17s}
.tslot:nth-child(3){animation-delay:.29s}.tslot:nth-child(4){animation-delay:.41s}
.tslot:nth-child(5){animation-delay:.53s}.tslot:nth-child(6){animation-delay:.65s}
.tslot:nth-child(7){animation-delay:.77s}.tslot:nth-child(n+8){animation-delay:.89s}
.tcard{position:relative;aspect-ratio:5/7;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.35,.1,.25,1);cursor:pointer}
@keyframes tcard-deal{from{opacity:0;transform:translateY(26px) rotate(2deg)}
  to{opacity:1;transform:none}}
.tcard.flipped{transform:rotateY(180deg)}
.tcard .bk,.tcard .fc{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border-radius:7px;
  border:1.5px solid var(--gold,#C9A227)}
.tcard .bk{display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg, rgba(201,162,39,.15) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(-45deg, rgba(201,162,39,.11) 0 8px, transparent 8px 16px),
    var(--surface,#15131A);
  box-shadow:0 10px 26px rgba(0,0,0,.30)}
.tcard .bk::after{content:"";position:absolute;inset:8px;border-radius:4px;
  border:1px solid rgba(201,162,39,.45)}
/* 牌背中心的印记：双环 + 八芒星。八芒对应八方，
   与全站的罗盘/八卦语汇是同一套，不另起风格。 */
.tcard .bk .pip{width:44px;height:44px;border:2px solid var(--gold,#C9A227);
  border-radius:50%;position:relative;opacity:.85}
.tcard .bk .pip::after{content:"";position:absolute;inset:9px;
  border:2px solid var(--gold,#C9A227);border-radius:50%}
.tcard .bk .pip::before{content:"";position:absolute;inset:-13px;
  background:
    conic-gradient(from 0deg,
      rgba(201,162,39,.55) 0 2deg, transparent 2deg 43deg,
      rgba(201,162,39,.55) 43deg 47deg, transparent 47deg 88deg,
      rgba(201,162,39,.55) 88deg 92deg, transparent 92deg 133deg,
      rgba(201,162,39,.55) 133deg 137deg, transparent 137deg 178deg,
      rgba(201,162,39,.55) 178deg 182deg, transparent 182deg 223deg,
      rgba(201,162,39,.55) 223deg 227deg, transparent 227deg 268deg,
      rgba(201,162,39,.55) 268deg 272deg, transparent 272deg 313deg,
      rgba(201,162,39,.55) 313deg 317deg, transparent 317deg 358deg,
      rgba(201,162,39,.55) 358deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 52%, #000 54%);
  mask:radial-gradient(circle, transparent 52%, #000 54%);
  animation:pip-turn 34s linear infinite}
@keyframes pip-turn{to{transform:rotate(360deg)}}
/* 未翻开时牌背有极缓的呼吸感 —— 让「还没翻」这件事是活的 */
.tcard:not(.flipped) .bk{animation:bk-breathe 5.2s ease-in-out infinite}
@keyframes bk-breathe{
  0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.30),
                     inset 0 0 0 0 rgba(201,162,39,0)}
  50%    {box-shadow:0 10px 30px rgba(0,0,0,.36),
                     inset 0 0 22px 0 rgba(201,162,39,.13)}}
/* 翻开瞬间的金光扫过 */
.tcard.flipped .fc::before{content:"";position:absolute;inset:0;border-radius:7px;
  background:linear-gradient(105deg, transparent 30%,
    rgba(255,236,180,.30) 46%, rgba(255,236,180,.06) 56%, transparent 70%);
  animation:fc-sheen .9s ease-out 1;pointer-events:none}
@keyframes fc-sheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.tcard .bk .lockhint{position:absolute;bottom:10px;left:0;right:0;
  text-align:center;font-size:.66rem;letter-spacing:.14em;
  color:var(--muted,#9A9184)}
.tcard .fc{transform:rotateY(180deg);padding:.8rem .8rem .9rem;overflow:hidden;
  background:var(--raise,#1D1A23);display:flex;flex-direction:column;gap:.3rem}
.tcard .fc .tpos{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted,#9A9184)}
.tcard .fc .tnm{font-family:"Songti SC",var(--serif,serif);font-size:1.02rem;
  line-height:1.35}
.tcard .fc .trv{font-size:.66rem;color:#C2453A;letter-spacing:.1em}
/* 牌面是固定比例的（aspect-ratio 5/7），牌义长了必然放不下。
   原先只写 overflow:hidden —— 于是**从半个字的中间切断**，看着像坏了
   （于雷 2026-08-07 截图：「最后一行半拉字儿」）。
   改成按行截断并加省略号：切在字与字之间，收得干净。
   完整牌义在牌阵下面逐张给全，一个字都不少。 */
.tcard .fc .tmn{font-size:.78rem;color:var(--muted,#9A9184);line-height:1.55;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:6;text-overflow:ellipsis;min-height:0}
/* 逐张全文：牌面放不下的，这里给全 */
.tfull{margin-top:1rem}
.tfull .tf{padding:.85rem 0;border-top:1px solid var(--line,rgba(0,0,0,.1))}
.tfull .tf .th{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin-bottom:.35rem}
.tfull .tf .tp{font-size:.68rem;letter-spacing:.16em;opacity:.7}
.tfull .tf .tn{font-family:"Songti SC",serif;font-size:1.02rem}
.tfull .tf .tr{font-size:.68rem;color:#C2453A;letter-spacing:.1em}
.tfull .tf p{margin:.3rem 0;line-height:1.9;font-size:.9rem}
.tfull .tf .adv{margin-top:.45rem;padding-left:.75rem;
  border-left:2px solid var(--gold,#8A6A16);font-size:.9rem;line-height:1.9}
.tcard.locked{cursor:not-allowed}
.tcard.locked .bk{filter:saturate(.6) brightness(.92)}
@media (prefers-reduced-motion:reduce){
  .tcard{transition-duration:.01s;animation:none}
  .sc-coins .ccoin,.sc-cards .cd{animation:none}}

/* ══════════════ 年月日逐项择定（两站共用） ══════════════ */
.ymd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.ymd>div{position:relative;min-width:0}
.ymd select{width:100%;padding-right:2.5rem;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:none}
.ymd select::-ms-expand{display:none}
.ymd i{position:absolute;right:1.45rem;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:.74rem;color:var(--muted);pointer-events:none;
  font-family:"Songti SC",var(--serif,serif);letter-spacing:0}
.ymd>div::after{content:"";position:absolute;right:.72rem;top:50%;
  width:0;height:0;margin-top:-1px;pointer-events:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--gold);opacity:.72}
.ymd.wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shichen{margin-top:.5rem;position:relative}
.shichen select{width:100%;padding-right:2.5rem;
  -webkit-appearance:none;-moz-appearance:none;appearance:none}
.shichen::after{content:"";position:absolute;right:.72rem;top:50%;
  width:0;height:0;margin-top:-1px;pointer-events:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--gold);opacity:.72}


/* ══════════════ 付款成功提示 ══════════════ */
.paid-note{background:var(--raise,#1D1A23);border:1px solid var(--gold,#C9A227);
  border-left:4px solid var(--gold,#C9A227);padding:1.3rem 1.4rem;margin-bottom:1rem;
  animation:rise-in .5s cubic-bezier(.22,.68,0,1) both}
.paid-note h3{font-family:"Songti SC",var(--serif,serif);font-size:1.2rem;
  margin:0 0 .5rem;color:var(--gold,#C9A227)}
.paid-note p{margin:.4rem 0 0;line-height:1.75}
.paid-note .tiny{font-size:.82rem;color:var(--muted,#9A9184)}
.paid-note a{color:var(--gold,#C9A227)}

/* ══════════════ 已解锁：付费必须更尊贵 ══════════════
   付了钱的界面不能只是「少了马赛克」，要看得出档次差别：
   金色描边、朱印标记、内容区更宽的留白。 */
body.paid .card,
body.paid .sugar{border-color:rgba(201,162,39,.42)}
body.paid .card{box-shadow:0 1px 0 rgba(201,162,39,.14),
  0 18px 40px -28px rgba(0,0,0,.5)}
body.paid .card h3{position:relative;padding-left:1.15rem}
body.paid .card h3::before{content:"";position:absolute;left:0;top:.34em;
  width:.42rem;height:.42rem;background:var(--cinnabar);
  transform:rotate(45deg)}
body.paid .pgroup{border-left-color:var(--gold)}
body.paid .ptag{color:var(--cinnabar)}
/* 付费版整份结果右下角一枚朱印 */
body.paid .out.on::after{content:"全";position:sticky;bottom:1rem;
  margin-left:auto;display:block;width:2.6rem;height:2.6rem;line-height:2.6rem;
  text-align:center;font-family:"Songti SC",serif;font-size:1.2rem;
  color:var(--cinnabar);border:2px solid var(--cinnabar);opacity:.5}

/* ── 解锁条 ────────────────────────────────────────────────
   遮挡旁边就地给入口。原先只有一行灰字「解锁看全部」，
   那是提示不是入口 —— 用户得自己滚到页尾去找 CTA。 */
.unlockbar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:.6rem 0 .2rem;padding:.55rem .7rem;border-radius:8px;
  background:rgba(150,116,32,.09);border:1px solid rgba(150,116,32,.28)}
.unlockbar .ultxt{font-size:.82rem;opacity:.75;flex:1 1 auto}
.unlockbar .ulbtn{flex:0 0 auto;display:inline-block;text-decoration:none;
  padding:.42rem .95rem;border-radius:999px;font-size:.83rem;font-weight:600;
  color:#fff;background:#967420;white-space:nowrap}
.unlockbar .ulbtn:active{transform:translateY(1px)}

/* 时辰旁边的钟点区间 —— 「酉时」后面跟「17:00–19:00」 */
.hrng{font-size:.62em;opacity:.7;font-weight:400;letter-spacing:.02em;
  white-space:nowrap}

/* ── 结果页的「保存」按钮 ────────────────────────────────────
   后端 history 那套早就齐了，缺的一直是这个按钮。
   不保存的免费结果只自动留最近 3 份，所以把这句写在按钮旁边 ——
   用户得知道不点会怎样，否则「保存」看着像多余的。 */
.savebox{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:1rem 0 .2rem}
.savebtn{flex:0 0 auto;padding:.45rem 1.05rem;border-radius:999px;
  border:1px solid var(--gold,#8A6A16);background:transparent;
  color:var(--gold,#8A6A16);font-family:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer;transition:.16s}
.savebtn:hover:not(:disabled){background:rgba(150,116,32,.1)}
.savebtn:disabled{opacity:.55;cursor:default}
.savebtn.on{background:#9B2C2C;border-color:#9B2C2C;color:#fff}
.savenote{font-size:.75rem;opacity:.7;flex:1 1 auto;min-width:12rem}

/* ── 开运诀 ────────────────────────────────────────────────
   口诀体：诀 · 行法 · 凭什么。玄来自古法的精确，不来自包装词。 */
.kaiyun{border-left:3px solid #9B2C2C}
.kyi{margin:.9rem 0 1rem;padding-left:.9rem;
  border-left:2px solid rgba(150,116,32,.35)}
.kyj{font-family:"Songti SC",serif;font-size:1.06rem;font-weight:600;
  letter-spacing:.14em;color:#9B2C2C;margin-bottom:.35rem}
.kyh{line-height:1.95;font-size:.94rem}
.kyi.locked-i .kyj{opacity:.72}
.kyz{margin:1.1rem 0 0;padding:.75rem .9rem;border-radius:6px;
  background:rgba(150,116,32,.07)}
.kyz ul{margin:.4rem 0 0;padding-left:1.1rem}
.kyz li{font-size:.82rem;line-height:1.85;opacity:.86;margin:.25rem 0}

/* ── 遮挡：模糊条，不是黑方块 ──────────────────────────────
   事故（2026-08-07 于雷截图）：满屏 ███████，「太难看」。

   根子是**服务端的占位字符直接当正文渲染了**。服务端用 ▉ 是对的 ——
   遮住的原文根本不下发，前端拿到的本来就只有「露出的头 + N 个占位」，
   CSS 模糊真文本那种做法右键就能看源码，不叫遮挡。
   错的是前端把那串 ▉ 原样画了出来。

   这里把整串占位换成一根**模糊的灰条**：一样是占位，一样什么都没泄露，
   但看着像「后面还有内容，只是没解锁」，而不是像页面坏了。 */
.blurbar{display:inline-block;vertical-align:-.18em;height:1.02em;
  width:calc(var(--n, 10) * .52em);max-width:100%;border-radius:3px;
  background:linear-gradient(90deg,
    rgba(120,110,95,.30) 0%, rgba(120,110,95,.20) 45%,
    rgba(120,110,95,.30) 100%);
  filter:blur(2.5px);opacity:.85}
.blurwrap{display:block;line-height:2.1}
.blurwrap .blurbar{margin:.18em .1em}
@media (prefers-color-scheme: dark){
  .blurbar{background:linear-gradient(90deg,
    rgba(230,220,200,.26) 0%, rgba(230,220,200,.16) 45%,
    rgba(230,220,200,.26) 100%)}
}

/* ── 安产：时辰与钟点要看得见 ────────────────────────────
   这门服务卖的就是「哪一刻进手术室」，而那行字原先跟正文一样大，
   在候选卡里几乎找不到（于雷 2026-08-07：「具体时间数字太小了」）。 */
.hh .sc{font-size:1.24rem;font-weight:600;letter-spacing:.04em}
.hh .sc .hrng{font-size:.78em;opacity:.85;font-weight:500;margin-left:.35em}
.bigscore .lv .hrng{font-size:.62em;opacity:.9;margin-left:.4em}

/* 保存按钮旁的历史入口 —— 存完立刻能点过去看 */
.savelink{flex:0 0 auto;font-size:.8rem;text-decoration:none;
  color:#8A6A16;border-bottom:1px solid rgba(138,106,22,.35);
  padding-bottom:1px}
.savelink:hover{border-bottom-color:#8A6A16}