/* ══════════════════════════════════════════════════════════════
   古朴神秘质感 —— 两站共用的视觉与仪式动画层
   材质取向：宣纸的糙、墨的洇、朱砂的沉、描金的哑光
   动画取向：仪式感优先于炫技 —— 落柱、掷币、洇墨、盖印
   全部动画在 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;
}
.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 }