/* 观音灵签 / 关帝灵签两页的主题动画（owner 2026-11-08：两页风格要不一样）。只在两页加载，基础签筒 / 筊杯结构见 qigua.css。
 *   观音 .lq-guanyin：青瓷莲台、晨雾圆光；慢摇（2.3s 轻摆）、花瓣飘落、签缓缓浮起、筊杯轻落起涟漪、圣杯时圆光转亮。
 *   关帝 .lq-guandi ：朱漆金箍、暗红金纹；猛摇（1.3s 急颤＋震台）、火星迸射、签猛地弹出带闪光、筊杯重落震波、圣杯时金芒四射、吉凶盖朱印。
 * 粒子 .lq-p 由 qigua-lingqian.js 按 --lq-x/-y/-dx/-dy/-r/-t/-a 生成（脚本运行时赋值，CSS 里一律带兜底值）。变量一律 --c-* 或本文件内定义（CssTokenTest）。 */
/* 高度按「签筒 220 + 签从筒口浮出（观音直上 78px）」留足：之前 290 让观音签顶出舞台被裁掉（owner 2026-11-08 报） */
.lq-stage { display: flex; align-items: flex-end; justify-content: center; gap: 34px; min-height: 360px; padding-top: 30px; padding-bottom: 22px; }
.lq-bg, .lq-fx { position: absolute; inset: 0; pointer-events: none; }
.lq-stage .qg-aigc { left: auto; bottom: auto; right: 12px; top: 8px; }   /* 左下角会被签筒压住 */
.lq-fx { z-index: 3; overflow: hidden; }
.lq-stage .qg-tube, .lq-stage .qg-jiao { z-index: 2; }
.lq-p { position: absolute; left: var(--lq-x, 50%); top: var(--lq-y, 50%); pointer-events: none; }
.lq-stage .qg-tube-body { flex-direction: column; gap: 2px; }
.lq-emblem { font-style: normal; font-size: 17px; line-height: 1; font-family: var(--font-serif); }
.lq-stage .qg-tube-body span { font-size: 21px; }

/* ================= 观音：青瓷、莲、圆光 ================= */
.lq-guanyin .lq-stage { --lq-glow: rgba(255, 246, 214, .55); color: #24463e;
  background: linear-gradient(rgba(238, 246, 241, .35), rgba(207, 230, 220, .5)), var(--qg-bg, none) center 40% / cover no-repeat, linear-gradient(180deg, #eef6f1 0%, #cfe6dc 45%, #8fbcaf 100%); }
.lq-guanyin .lq-stage::after { background: radial-gradient(60% 30% at 50% 100%, rgba(255,255,255,.55), transparent 70%); }
.lq-guanyin .lq-halo { position: absolute; left: 50%; top: 18px; width: 230px; height: 230px; margin-left: -115px; border-radius: 50%;
  background: radial-gradient(circle, var(--lq-glow) 0 35%, rgba(255,246,214,.18) 55%, transparent 70%); animation: lqBreath 4s ease-in-out infinite; }
.lq-guanyin .lq-halo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,240,200,.18) 0 6deg, transparent 6deg 18deg); animation: lqTurn 40s linear infinite; }
.lq-guanyin.lq .lq-stage.lq-glow { --lq-glow: rgba(255, 236, 170, .95); }
@keyframes lqBreath { 50% { transform: scale(1.06); opacity: .85; } }
@keyframes lqTurn { to { transform: rotate(360deg); } }
.lq-guanyin .qg-tube-body { background: linear-gradient(90deg, #6fa897, #b9e0d2 45%, #78ae9e); box-shadow: inset 0 6px 0 #f4f1e6, inset 0 -6px 0 #f4f1e6, 0 8px 18px rgba(36, 70, 62, .35); }
.lq-guanyin .qg-tube-body span { color: #fffdf6; text-shadow: 0 1px 2px rgba(36,70,62,.5); }
.lq-guanyin .lq-emblem { color: #e89aae; }
.lq-guanyin .qg-sticks i { background: linear-gradient(#e9d9a8, #c4a86a); }
.lq-guanyin .qg-stick-out { background: linear-gradient(90deg, #e2cf98, #f8ecc4, #e2cf98); box-shadow: 0 0 16px rgba(255, 236, 170, .9); transition: opacity .6s, transform 1s cubic-bezier(.25,.8,.3,1); }
.lq-guanyin .qg-out .qg-stick-out { transform: translate(0, -78px); }
.lq-guanyin .qg-stick-out b { color: #2f5d52; }
.lq-sway { animation: lqSway .58s ease-in-out 4 alternate; transform-origin: 50% 100%; }
@keyframes lqSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.lq-sway .qg-sticks i { animation: qgJig .3s ease-in-out infinite alternate; }
.lq-guanyin .qg-bei { background: linear-gradient(#d98a73, #a9513f); }
.lq-guanyin .qg-throw .qg-bei { animation: lqToss 1.6s cubic-bezier(.35,.7,.35,1) both; }
@keyframes lqToss { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-110px) rotate(360deg); } 85% { transform: translateY(0) rotate(700deg); } 100% { transform: translateY(0) rotate(720deg); } }
.lq-guanyin .qg-a-flat .qg-bei:nth-child(1), .lq-guanyin .qg-b-flat .qg-bei:nth-child(2) { background: linear-gradient(#f2c9a8, #d99a72); }
.lq-guanyin .qg-sheng .qg-bei { box-shadow: 0 0 0 3px #fff3c4, 0 0 18px rgba(255, 236, 170, .9); }
.lq-petal { width: 12px; height: 16px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #fbd3dd, #ef9fb4); opacity: 0;
  animation: lqFall var(--lq-t, 2s) ease-in both; }
@keyframes lqFall { 0% { opacity: 0; transform: translate(0, -20px) rotate(0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--lq-dx, 0px), var(--lq-dy, 0px)) rotate(var(--lq-r, 0deg)); } }
.lq-ripple { left: 75%; top: 86%; width: 40px; height: 12px; margin: -6px 0 0 -20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); animation: lqRipple 1.2s ease-out both; }
@keyframes lqRipple { to { transform: scale(6); opacity: 0; } }

/* ================= 关帝：朱漆、金箍、火星 ================= */
.lq-guandi .lq-stage { color: #f7dfa0;
  background: linear-gradient(rgba(40, 4, 3, .42), rgba(24, 2, 2, .7)), var(--qg-bg, none) center 35% / cover no-repeat, radial-gradient(120% 90% at 50% 0%, #8a1a12 0%, #4a0907 55%, #1c0303 100%); }
.lq-guandi .lq-stage::after { background: repeating-linear-gradient(45deg, rgba(217,161,61,.06) 0 2px, transparent 2px 16px), repeating-linear-gradient(-45deg, rgba(217,161,61,.06) 0 2px, transparent 2px 16px); }
.lq-guandi .lq-halo { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: radial-gradient(60% 100% at 50% 100%, rgba(255,120,40,.28), transparent 70%); animation: lqFlicker 1.8s ease-in-out infinite; }
@keyframes lqFlicker { 50% { opacity: .55; } }
.lq-guandi .qg-tube-body { background: linear-gradient(90deg, #120605, #3a110b 45%, #140605); box-shadow: inset 0 7px 0 #d9a13d, inset 0 -7px 0 #d9a13d, inset 0 0 0 2px #8a5a1d, 0 8px 18px rgba(0,0,0,.6); }
.lq-guandi .qg-tube-body span { color: #f2c560; text-shadow: 0 0 8px rgba(242,197,96,.5); }
.lq-guandi .lq-emblem { color: #d9a13d; }
.lq-guandi .qg-sticks i { background: linear-gradient(#d49a4a, #8f5420); }
.lq-guandi .qg-stick-out { transition: opacity .15s, transform .45s cubic-bezier(.2,1.6,.4,1); }
.lq-guandi .qg-out .qg-stick-out { transform: translate(72px, -14px) rotate(32deg); }
.lq-rattle { animation: lqRattle .065s linear 20 alternate; transform-origin: 50% 100%; }
@keyframes lqRattle { from { transform: rotate(-11deg) translate(-3px, -4px); } to { transform: rotate(11deg) translate(3px, 2px); } }
.lq-rattle .qg-sticks i { animation: qgJig .06s linear infinite alternate; }
.lq-quake { animation: lqQuake .32s linear 1; }
@keyframes lqQuake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 1px); } }
.lq-guandi .qg-bei { background: linear-gradient(#b81f17, #5f0b07); box-shadow: inset 0 0 0 2px #d9a13d, 0 4px 10px rgba(0,0,0,.6); }
.lq-guandi .qg-throw .qg-bei { animation: lqSlam 1.1s cubic-bezier(.5,0,.75,0) both; }
.lq-guandi .qg-throw .qg-bei:nth-child(2) { animation-delay: .04s; }
@keyframes lqSlam { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-150px) rotate(720deg); animation-timing-function: cubic-bezier(.6,0,1,1); } 82% { transform: translateY(0) rotate(1260deg); } 90% { transform: translateY(-6px) rotate(1270deg); } 100% { transform: translateY(0) rotate(1260deg); } }
.lq-guandi .qg-a-flat .qg-bei:nth-child(1), .lq-guandi .qg-b-flat .qg-bei:nth-child(2) { background: linear-gradient(#e2a54e, #9c5a17); }
.lq-guandi .qg-sheng .qg-bei { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 22px rgba(255, 190, 60, .9); }
.lq-ember { width: 4px; height: 4px; border-radius: 50%; background: #ffcf6b; box-shadow: 0 0 6px 2px #ff8a2a; opacity: 0; animation: lqRise var(--lq-t, .9s) ease-out both; }
@keyframes lqRise { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--lq-dx, 0px), var(--lq-dy, 0px)) scale(.3); } }
.lq-flash { inset: 0; left: 0; top: 0; background: radial-gradient(circle at 60% 45%, rgba(255,240,190,.9), rgba(255,190,60,.25) 35%, transparent 60%); animation: lqFlash .5s ease-out both; }
@keyframes lqFlash { from { opacity: 1; } to { opacity: 0; } }
.lq-shock { left: 76%; top: 88%; width: 50px; height: 14px; margin: -7px 0 0 -25px; border-radius: 50%; border: 3px solid #ffcf6b; box-shadow: 0 0 12px #ff8a2a; animation: lqShock .6s ease-out both; }
@keyframes lqShock { to { transform: scale(7, 4); opacity: 0; } }
.lq-ray { width: 3px; height: 120px; margin: -120px 0 0 -1.5px; transform-origin: 50% 100%; background: linear-gradient(transparent, rgba(255,214,110,.9)); transform: rotate(var(--lq-a, 0deg)) scaleY(.1); opacity: 0; animation: lqRay 1.1s ease-out both; }
@keyframes lqRay { 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--lq-a, 0deg)) scaleY(1.4); } }

/* ================= 签文卡 ================= */
.lq-card { position: relative; overflow: hidden; }
.lq-card header { padding-right: 70px; }
.lq-seal { position: absolute; right: 14px; top: 12px; min-width: 48px; padding: 6px 8px; text-align: center; font-family: var(--font-serif); font-size: 15px; font-weight: 700; }
.lq-card-guanyin { background: linear-gradient(180deg, #f5fbf8, #fff); border-color: #b9dccf; }
.lq-card-guanyin header b { color: #2f6b5c; }
.lq-card-guanyin .lq-seal { border-radius: 20px; background: #e4f3ec; color: #2f6b5c; border: 1px solid #9ccbb9; animation: tyIn .8s ease-out .6s both; }
.lq-card-guanyin .lq-seal.lq-lv-bad { background: #f1f1ee; color: var(--c-ink-2); border-color: var(--c-line); }
.lq-card-guanyin .qg-poem span { color: #24463e; }
.lq-card-guanyin .qg-will b { color: #2f6b5c; }
.lq-card-guandi { background: #fffaf2; border-color: #d9a13d; box-shadow: inset 0 4px 0 #8a1a12; }
.lq-card-guandi header b { color: #8a1a12; }
.lq-card-guandi .lq-seal { border: 3px double #fff3d6; border-radius: 4px; background: #b3221a; color: #fff6dc; transform: rotate(-8deg); animation: lqStamp .45s cubic-bezier(.3,1.6,.5,1) .5s both; }
.lq-card-guandi .lq-seal.lq-lv-bad { background: #4b4442; }
@keyframes lqStamp { from { transform: rotate(-8deg) scale(2.4); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.lq-card-guandi .qg-poem span { color: #3a0d09; font-weight: 600; }

/* 一百签内链网格 */
.lq-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.lq-index a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; padding: 6px 8px; border-radius: 8px; color: var(--c-ink); text-decoration: none; font-size: 13px; }
.lq-index a:hover { background: var(--c-primary-soft); }
.lq-index b { grid-row: span 2; align-self: center; font-family: var(--font-serif); color: var(--c-primary-deep); }
.lq-index span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-index em { font-style: normal; font-size: 12px; color: var(--c-ink-3); }
.lq-index-guanyin b { color: #2f6b5c; }
.lq-index-guandi b { color: #8a1a12; }

@media (max-width: 560px) {
  .lq-stage { gap: 16px; min-height: 370px; }
  .lq-guanyin .lq-halo { width: 190px; height: 190px; margin-left: -95px; }
}
@media (prefers-reduced-motion: reduce) {
  .lq-halo, .lq-halo::before, .lq-sway, .lq-rattle, .lq-quake, .lq-sway .qg-sticks i, .lq-rattle .qg-sticks i,
  .lq-guanyin .qg-throw .qg-bei, .lq-guandi .qg-throw .qg-bei, .lq-card-guandi .lq-seal, .lq-card-guanyin .lq-seal { animation: none !important; }
}