/* 诸葛神算 zhuge-shensuan.html（2026-11-08）：夜空星图 + 八阵图八门转盘 + 三字数笔画 + 竹签展开。
 * 变量一律 --c-* 或本文件内 --zg-*（CssTokenTest）；脚本赋值的 --qg-i 带兜底。 */
.zg-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin: 0 0 12px; }
.zg-cell { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--c-ink-2); }
.zg-cell input { width: 100%; height: 56px; text-align: center; font-family: var(--font-serif); font-size: 30px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-paper-card); color: var(--c-ink); }
.zg-cell input:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.zg-form .btn { height: 56px; padding: 0 22px; }

.zg .zg-stage { --zg-gold: #e8c879; position: relative; min-height: 340px; display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "wheel chars" "calc calc" "slip slip"; gap: 14px 18px; align-items: center;
  color: #ece6d3; background: linear-gradient(rgba(10, 14, 32, .55), rgba(6, 8, 22, .82)), var(--qg-bg, none) center 35% / cover no-repeat, radial-gradient(120% 90% at 50% 0%, #1f2a55 0%, #11173a 55%, #070a1e 100%); }
.zg-stage::after { display: none; }
.zg-sky { position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 12%, #fff, transparent),
    radial-gradient(1px 1px at 82% 34%, #fff, transparent), radial-gradient(1.5px 1.5px at 48% 26%, #dfe6ff, transparent), radial-gradient(1px 1px at 90% 70%, #fff, transparent); animation: zgTwinkle 4s ease-in-out infinite alternate; }
@keyframes zgTwinkle { to { opacity: .25; } }

.zg-wheel { grid-area: wheel; position: relative; width: 160px; height: 160px; border-radius: 50%; border: 2px solid var(--zg-gold); box-shadow: 0 0 18px rgba(232, 200, 121, .3), inset 0 0 0 18px rgba(232, 200, 121, .08); }
.zg-wheel span { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; line-height: 22px; text-align: center; font-family: var(--font-serif); font-size: 15px; color: var(--zg-gold);
  transform: rotate(calc(var(--qg-i, 0) * 45deg)) translateY(-62px) rotate(calc(var(--qg-i, 0) * -45deg)); }
.zg-wheel b { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif); font-size: 24px; color: #1a1430; background: radial-gradient(circle, #f6e3ad, #c9a250); }
.zg-spin { animation: zgSpin 1.6s cubic-bezier(.4, 0, .4, 1) infinite; }
@keyframes zgSpin { to { transform: rotate(360deg); } }

.zg-chars { grid-area: chars; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; z-index: 1; }
.zg-ch { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px dashed rgba(232, 200, 121, .35); }
.zg-ch b { font-family: var(--font-serif); font-size: 44px; line-height: 1.1; color: rgba(236, 230, 211, .35); }
.zg-ch em { font-style: normal; font-size: 14px; color: var(--zg-gold); min-height: 1.4em; }
.zg-ch i { font-style: normal; font-size: 12px; opacity: .7; }
.zg-in b { color: #fff8e6; animation: zgDrop .55s cubic-bezier(.3, 1.5, .5, 1) both; text-shadow: 0 0 12px rgba(232, 200, 121, .6); }
.zg-done { border-style: solid; border-color: var(--zg-gold); }
@keyframes zgDrop { from { transform: translateY(-40px) scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }

.zg-calc { grid-area: calc; position: relative; z-index: 1; min-height: 3em; font-size: var(--t-body); }
.zg-calc .qg-cap { margin: 0; text-align: center; }
.zg-line { margin: 2px 0; }
.zg-line b { color: var(--zg-gold); font-size: 1.15em; }
.zg-line small { margin-left: 6px; opacity: .75; }
.zg-big { font-family: var(--font-serif); font-size: 1.6em !important; letter-spacing: .1em; }
.zg-sub { padding-left: 1em; }

.zg-slip { grid-area: slip; justify-self: center; position: relative; z-index: 1; width: 64px; height: 0; overflow: hidden; border-radius: 6px; background: linear-gradient(90deg, #c9a250, #f3dfa4, #c9a250);
  box-shadow: 0 0 18px rgba(232, 200, 121, .7); transition: height .8s cubic-bezier(.3, .9, .35, 1); display: grid; place-items: center; }
.zg-slip b { width: 1em; line-height: 1.15; word-break: break-all; font-family: var(--font-serif); font-size: 20px; color: #3a2a10; }
.zg-slip.zg-open { height: 168px; }

.zg-card { background: linear-gradient(180deg, #f5f4fb, #fff); border-color: #c9c3e2; box-shadow: inset 0 4px 0 #1f2a55; position: relative; }
.zg-card header { padding-right: 70px; }
.zg-card header b { color: #1f2a55; }
.zg-card .qg-poem span { color: #1b1f3d; }
.zg-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;
  border-radius: 50%; background: #1f2a55; color: #f6e3ad; border: 2px solid #c9a250; animation: tyIn .8s ease-out .6s both; }
.zg-seal.zg-lv-bad { background: #4a4a52; }

.zg-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
.zg-index a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 4px; align-items: center; padding: 5px 8px; border-radius: 8px; color: var(--c-ink); text-decoration: none; font-size: 13px; }
.zg-index a:hover { background: var(--c-primary-soft); }
.zg-index b { font-family: var(--font-serif); color: #1f2a55; text-align: right; }
.zg-index span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-index em { font-style: normal; font-size: 12px; color: var(--c-ink-3); }

@media (max-width: 560px) {
  .zg-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zg-form .btn { grid-column: 1 / -1; height: 46px; }
  .zg .zg-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wheel" "chars" "calc" "slip"; justify-items: stretch; }
  .zg-wheel { justify-self: center; width: 130px; height: 130px; }
  .zg-wheel span { transform: rotate(calc(var(--qg-i, 0) * 45deg)) translateY(-48px) rotate(calc(var(--qg-i, 0) * -45deg)); }
  .zg-ch b { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .zg-sky, .zg-spin, .zg-in b, .zg-seal { animation: none !important; } .zg-slip { transition: none; } }