frontend/src/custom.css

/* 天问 Tianwen — 设计语言补充层 (Liquid Glass / 动效 / 专有组件)
   基底 token 由 shadcn preset (黑白灰度) 提供, 此处只放 shadcn 覆盖不到的部分 */

:root {
  /* 衬线字体: 拉丁用 Noto Serif, 中文显式落到宋体类衬线 (否则 generic serif 在 Win 观感偏黑体) */
  --font-serif: "Noto Serif Variable", "Source Han Serif SC", "Noto Serif SC",
    "Songti SC", "STSong", "SimSun", serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 180ms;
  --t-slow: 360ms;
  --gold: #1f1e1a;
  --gold-soft: rgba(31, 30, 26, 0.12);
  --rouge: #a35b5b;
  --glass: rgba(255, 255, 255, 0.6);
  --glass-heavy: rgba(255, 255, 255, 0.84);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 18px 50px rgba(22, 22, 18, 0.12);
  --card-shadow: 0 12px 32px -8px rgba(28, 26, 20, 0.16), 0 2px 6px -2px rgba(28, 26, 20, 0.10), 0 0 0 1px rgba(40, 38, 32, 0.07);
  font-size: 19px; /* 大字即唯一模式 */
}
.dark {
  --gold: #c5a46b;
  --gold-soft: rgba(197, 164, 107, 0.32);
  --glass: rgba(26, 28, 34, 0.55);
  --glass-heavy: rgba(23, 25, 30, 0.88);
  --glass-border: rgba(197, 164, 107, 0.22);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --card-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(197, 164, 107, 0.12);
}

html, body, #root { height: 100%; }
body {
  overflow: hidden;
  overscroll-behavior: none;   /* 杜绝整页橡皮筋滚动, 仅内部元素可滚 */
  font-family: var(--font-serif);
  line-height: 2;
  letter-spacing: 0.05em;
  -webkit-tap-highlight-color: transparent;
}
canvas, svg { user-select: none; -webkit-user-select: none; touch-action: manipulation; }

/* ---------- Liquid Glass 工具类 ---------- */
/* 正文段落行距统一 (卡片内 p 与列表项) */
.glass p, .glass li, .hang-list li { line-height: 1.85; }

/* Sonner Toast: 宽度随内容 (max-content) + 居中。
   关键: toast 用 width:max-content, 绝不能用 auto —— 绝对定位下 auto 塌成
   min-content, 中文逐字换行变成竖排。容器 --width 给一个上限即可。 */
[data-sonner-toaster] { --width: min(90vw, 500px) !important; }
[data-sonner-toaster][data-position*="center"] { left: 50% !important; transform: translateX(-50%) !important; }
[data-sonner-toast] {
  width: max-content !important;
  max-width: min(90vw, 500px) !important;
  min-width: 0 !important;
}
/* 文案区与标题按正常方向换行, 不被压成窄列 (杜绝竖排) */
[data-sonner-toast] [data-content],
[data-sonner-toast] [data-title],
[data-sonner-toast] [data-description] {
  white-space: normal !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
}

/* 全局宣纸肌理: 极淡噪点覆于全站 (含文字), 营造古典纸感 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.dark body::after { mix-blend-mode: screen; opacity: 0.35; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow), var(--glass-inner);
}
.glass-heavy {
  background: var(--glass-heavy);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner);
}

/* 1.8% 纸纹噪点 */
.noise-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.018;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .noise-layer { opacity: 0.04; }

/* 环境光斑: 给玻璃以可折射之物 */
.ambient-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(620px 460px at 16% 6%, rgba(40, 40, 36, 0.035), transparent 70%),
    radial-gradient(720px 540px at 88% 92%, rgba(40, 40, 36, 0.03), transparent 70%);
}

/* ---------- 书法 / 排版 ---------- */
.ink-title {
  font-size: 3.6rem; font-weight: 500;
  letter-spacing: 0.45em; text-indent: 0.45em;
}
.seal-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid currentColor;
  font-size: 0.66rem; line-height: 1.15; text-align: center; border-radius: 3px;
  writing-mode: vertical-rl; letter-spacing: 0.1em;
}
.empty-ink {
  display: block; font-size: 4.2rem; line-height: 1.3;
  opacity: 0.08; font-weight: 500; user-select: none;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadein var(--t-slow) var(--ease); }

/* 水墨晕开加载 */
.ink-loading { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ink-blot {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--gold), transparent 70%);
  animation: inkblot 1.5s var(--ease) infinite;
}
.ink-blot:nth-child(2) { animation-delay: 0.22s; }
.ink-blot:nth-child(3) { animation-delay: 0.44s; }
@keyframes inkblot {
  0%, 100% { transform: scale(0.45); opacity: 0.25; }
  50% { transform: scale(1.35); opacity: 0.85; }
}
.ink-loading-label { color: var(--text-2); font-size: 0.84rem; letter-spacing: 0.3em; }
.fade-in-slow { animation: fadein 2.4s var(--ease); }
@keyframes breathtext { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.breath-text { animation: breathtext 2.4s var(--ease) infinite; }

/* ---------- 玉盘 ---------- */
.jade-canvas {
  width: min(100%, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fdfcf8, #efe9dc 60%, #e2d9c6);
  box-shadow: inset 0 2px 18px rgba(46, 46, 46, 0.1), 0 8px 30px rgba(50, 48, 40, 0.06);
  cursor: pointer; outline: none;
}

/* ---------- 铜钱 3D ---------- */
.coins-row { perspective: 900px; perspective-origin: 50% 18%; }
.coin-slot { position: relative; width: 72px; height: 156px; display: flex; align-items: flex-end; justify-content: center; }
.coin { width: 66px; height: 66px; position: relative; transform-style: preserve-3d; margin-bottom: 18px; z-index: 2; }
.coin.tossing { animation: cointoss var(--toss-dur, 1.3s) cubic-bezier(0.34, 0.12, 0.42, 1); }
@keyframes cointoss {
  0% { transform: translateY(0) rotateZ(0deg); }
  36% { transform: translateY(-132px) rotateZ(7deg); }
  72% { transform: translateY(0) rotateZ(-3deg); }
  84% { transform: translateY(-18px) rotateZ(2deg); }
  93% { transform: translateY(0) rotateZ(0deg); }
  97% { transform: translateY(-5px) rotateZ(0deg); }
  100% { transform: translateY(0) rotateZ(0deg); }
}
.coin-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; will-change: transform; }
.coin .face {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; backface-visibility: hidden;
  background: radial-gradient(circle at 32% 28%, #a8905c 0%, #7d6739 45%, #54431f 100%);
  color: #ebdfbe; border: 1px solid #3a2f15;
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.22), inset 0 2px 4px rgba(255, 240, 200, 0.35);
}
.coin .face::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  background: var(--background); border: 1px solid #3a2f15;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.coin .face.front { transform: translateZ(3.4px); }
.coin .face.back { transform: rotateX(180deg) translateZ(3.4px); filter: brightness(0.7); }
/* 「五铢」分列方孔左右 (正面有字, 背面无字以分正反) */
.coin .face.front b {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; font-weight: 600; font-family: var(--font-serif); line-height: 1;
}
.coin .face.front .cw { left: 8px; }
.coin .face.front .cz { right: 8px; }
.coin .edge { position: absolute; inset: 1px; border-radius: 50%; background: #4d3d1c; }
.coin .e1 { transform: translateZ(-2.2px); }
.coin .e2 { transform: translateZ(-0.8px); }
.coin .e3 { transform: translateZ(0.8px); }
.coin .e4 { transform: translateZ(2.2px); }
.coin-shadow {
  position: absolute; bottom: 2px; left: 50%; width: 56px; height: 12px;
  transform: translateX(-50%); border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35), transparent 68%);
}
.coin-shadow.tossing { animation: coinshadow var(--toss-dur, 1.3s) cubic-bezier(0.34, 0.12, 0.42, 1); }
@keyframes coinshadow {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  36% { transform: translateX(-50%) scale(0.4); opacity: 0.3; }
  72% { transform: translateX(-50%) scale(1.08); opacity: 1; }
  84% { transform: translateX(-50%) scale(0.82); opacity: 0.7; }
  93%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ---------- 爻 ---------- */
.yao { width: 150px; height: 11px; display: flex; gap: 14px; animation: yaorise 0.7s var(--ease); position: relative; }
@keyframes yaorise { from { transform: translateY(-60px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.yao i { flex: 1; border-radius: 2px; background: linear-gradient(90deg, #bfa468, #dcc691, #bfa468); }
.yao.yin i { background: linear-gradient(90deg, #6b6155, #8a7e6e, #6b6155); }
.yao.changing::after {
  content: "动"; position: absolute; right: -30px; top: -5px; font-size: 0.7rem; color: var(--rouge);
  border: 1px solid var(--rouge); border-radius: 50%; width: 19px; height: 19px; line-height: 18px;
}
.yao.shake { animation: yaoshake 0.6s var(--ease) 2; }
@keyframes yaoshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.yao-mini { width: 92px; height: 9px; animation: none; }
.yf-fly { animation: yaofly 0.65s var(--ease) forwards; }
@keyframes yaofly { to { transform: translateY(120px) scale(0.85); opacity: 0; } }

/* ---------- 呼吸圆环 ---------- */
.breath-core {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, transparent 75%);
  animation: breath 5s var(--ease) infinite;
}
@keyframes breath { 0%, 100% { transform: scale(0.6); opacity: 0.5; } 50% { transform: scale(2.1); opacity: 0.95; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.floaty { animation: floaty 5s var(--ease) infinite; }
@keyframes halo { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.65; } }
.halo-ring { animation: halo 3.2s var(--ease) infinite; }

/* ---------- 名帖卡包 ---------- */
.deck-card {
  position: relative; width: 100%; aspect-ratio: 1.586 / 1; border-radius: 14px; overflow: hidden;
  background-color: #fdfcf9;
  background-repeat: no-repeat; background-position: right -16px center; background-size: auto 130%;
  border: 0.5px solid rgba(60, 56, 46, 0.05);
  /* 负扩散把阴影收回卡片轮廓内, 避免被滚动容器裁出"突然截断"感 */
  box-shadow: 0 16px 34px -20px rgba(10, 10, 8, 0.4), 0 4px 12px -8px rgba(10, 10, 8, 0.14);
  cursor: pointer; margin-top: -33%;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.deck-card:first-child { margin-top: 0; }
/* 叠放时被悬停的卡片升到最顶层: 否则上移 10px 会被后一张 (DOM 在后, 默认更高) 盖住,
   光标随即脱离 → 反复 hover/unhover 抖动闪烁 */
.deck-card:hover { z-index: 30; }
.deck-card.cur { z-index: 20; }
.deck-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, #fdfcf9 32%, rgba(253, 252, 249, 0.88) 52%, rgba(253, 252, 249, 0.22) 72%, rgba(253, 252, 249, 0.06));
}
.deck-card:hover { transform: translateY(-10px); box-shadow: 0 24px 44px -18px rgba(10, 10, 8, 0.36), 0 4px 14px -6px rgba(10, 10, 8, 0.16); }
.deck-card.cur { box-shadow: 0 12px 32px rgba(10, 10, 8, 0.26), 0 0 0 1.5px var(--gold); }

/* 生肖名帖 (向导结果 / 设置) */
.zodiac-card {
  position: relative; overflow: hidden; border-radius: 16px;
  background-color: #fdfcf9;
  background-repeat: no-repeat; background-position: right -24px center; background-size: auto 125%;
  border: 1px solid rgba(60, 56, 46, 0.06);
  box-shadow: 0 20px 48px -16px rgba(10, 10, 8, 0.22), 0 4px 14px -6px rgba(10, 10, 8, 0.12);
}
.zodiac-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fdfcf9 38%, rgba(253, 252, 249, 0.78) 62%, rgba(253, 252, 249, 0.15));
}
.zodiac-card > * { position: relative; z-index: 1; }

/* ---------- 干支星盘 SVG ---------- */
.dayun-arc { cursor: pointer; transition: opacity var(--t-fast); }
.dayun-arc:hover { opacity: 1 !important; }
.gz-char { cursor: pointer; }

/* ---------- 滚动条 (极细, 轨道透明, 不溢出圆角容器) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
::-webkit-scrollbar-track { background: transparent; }
/* 圆角内的可滚动区: 裁掉溢出到圆角外的滚动条 */
.cast-history, .deck-cards { overflow-x: hidden; }

/* ---------- 无障碍: 尊重「减少动态效果」系统偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* 呼吸核与浮动等装饰性循环动画直接定格, 不闪烁 */
  .breath-core, .floaty, .halo-ring, .ink-blot { animation: none !important; }
}

/* ---------- 无障碍: 键盘焦点环 (仅键盘导航时出现, 鼠标点击不显) ----------
   不强制 border-radius: 轮廓跟随元素自身圆角 (药丸输入框不再被框成矩形)。
   shadcn 控件 (有 data-slot) 自带 focus-visible ring, 不再叠加全局描边。 */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
[data-slot]:focus-visible { outline: none; }
:focus:not(:focus-visible) { outline: none; }

/* 金线分隔 (设置·外观: 配色与显示语言之间留白) */
.gold-rule {
  height: 1px;
  margin: 1.75rem 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.35;
}

/* 原生 checkbox 统一观感 (随主题着色, 不再是浏览器默认蓝) */
input[type="checkbox"] {
  accent-color: var(--foreground);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* 悬挂缩进项目符: 「·」置于行首, 折行与首字对齐 (不顶到 · 下方) */
.hang-list li {
  padding-left: 1.15em;
  text-indent: -1.15em;
}
.hang-list li::before {
  content: "· ";
  color: var(--gold);
}