/* 生肖頁（神秘科技風）：白天夜間同一套深色星空，由 Application\Shengxiao 接在 horoscope.css 之後引入 */
#hsPage.hs-sx {
  --hs-bg: #0b0a20; --hs-grid: rgba(150,130,255,0.05); --hs-grid-size: 40px; --hs-glow: rgba(112,72,232,0.42);
  --hs-panel: rgba(16,14,44,0.82); --hs-line: rgba(150,130,255,0.3); --hs-line-soft: rgba(150,130,255,0.16); --hs-dash: rgba(150,130,255,0.18);
  --hs-text: #EDEBFA; --hs-text-2: #B9B6D6; --hs-text-3: #9C99C2;
  --hs-sign: #45E6D2; --hs-sign-mix: 100%;
  --hs-signal: #45E6D2; --hs-label: #A99BFF; --hs-head-label: #45E6D2; --hs-accent: #FFC107; --hs-accent-bg: rgba(255,193,7,0.08);
  --hs-num: #ffffff; --hs-cell-empty: rgba(255,255,255,0.08); --hs-cell-border: transparent;
  --hs-good: #7BD684; --hs-good-bg: rgba(67,160,71,0.1); --hs-good-line: rgba(67,160,71,0.45);
  --hs-bad: #FF8E8A; --hs-bad-bg: rgba(229,57,53,0.1); --hs-bad-line: rgba(229,57,53,0.45);
  --hs-chip: rgba(150,130,255,0.07); --hs-radius: 12px; --hs-on-signal: #0b0a20; --hs-tab-active-bg: rgba(69,230,210,0.12);
  --sx-glow: rgba(69,230,210,0.45);
  overflow: hidden;
}

/* 星空與天盤 */
.hs-sx .sx-sky { position: absolute; top: 0; left: 0; right: 0; height: 620px; overflow: hidden; pointer-events: none; }
.hs-sx .sx-sky::before, .hs-sx .sx-sky::after { content: ''; position: absolute; inset: 0; background-repeat: repeat; }
.hs-sx .sx-sky::before {
  background-image: radial-gradient(1px 1px at 24px 40px, #fff, transparent), radial-gradient(1px 1px at 130px 90px, #cfc7ff, transparent), radial-gradient(1.5px 1.5px at 210px 30px, #fff, transparent), radial-gradient(1px 1px at 280px 150px, #9df5e8, transparent);
  background-size: 320px 200px; animation: sx-twinkle 5s ease-in-out infinite;
}
.hs-sx .sx-sky::after {
  background-image: radial-gradient(1px 1px at 70px 130px, #fff, transparent), radial-gradient(1.5px 1.5px at 170px 170px, #d9d2ff, transparent), radial-gradient(1px 1px at 250px 70px, #fff, transparent);
  background-size: 280px 220px; animation: sx-twinkle 7s ease-in-out 2s infinite;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.hs-sx .sx-dial { position: absolute; top: -130px; right: max(-140px, calc(50% - 760px)); opacity: 0.4; fill: none; stroke: #8E7CFF; stroke-width: 0.8; }
.hs-sx .sx-dial text { fill: #A99BFF; stroke: none; font-size: 15px; text-anchor: middle; }
.hs-sx .sx-dial text.stem { fill: #45E6D2; font-size: 13px; }
.hs-sx .sx-dial .dash { stroke-dasharray: 2 6; }
.hs-sx .sx-dial polygon { stroke: #45E6D2; stroke-opacity: 0.45; }
.hs-sx .sx-dial-outer, .hs-sx .sx-dial-inner { transform-origin: 200px 200px; }
.hs-sx .sx-dial-outer { animation: sx-spin 120s linear infinite; }
.hs-sx .sx-dial-inner { animation: sx-spin 80s linear infinite reverse; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-twinkle { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.35; } }
@keyframes sx-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(69,230,210,0.5), 0 0 18px var(--sx-glow); } 50% { box-shadow: 0 0 0 1px rgba(150,130,255,0.7), 0 0 34px rgba(150,130,255,0.55); } }
@keyframes sx-blink { 50% { opacity: 0; } }
@keyframes sx-sweep { to { transform: translateX(320%) skewX(-18deg); } }

/* 頁首 */
.hs-sx .hs-head { justify-content: flex-start; padding: 36px 0 26px; }
.hs-sx .hs-lead { text-shadow: 0 1px 8px #0b0a20; }
.hs-sx h1.hs-title { display: inline-block; color: #fff; background: linear-gradient(100deg, #fff 20%, #C9BEFF 62%, #45E6D2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 16px rgba(142,124,255,0.45)); }
.hs-sx .hs-kicker::after { content: '_'; margin-left: 4px; animation: sx-blink 1.2s steps(1) infinite; }

/* 面板：掃描角框 */
.hs-sx .hs-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.35); }
.hs-sx .hs-panel::before, .hs-sx .hs-panel::after { content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--hs-signal); pointer-events: none; }
.hs-sx .hs-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 12px; }
.hs-sx .hs-panel::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 12px; }

/* 生肖選擇格：光束掃過 */
.hs-sx .hs-signgrid a, .hs-sx .hs-signs a { position: relative; overflow: hidden; }
.hs-sx .hs-signgrid a::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: translateX(0) skewX(-18deg); opacity: 0; pointer-events: none; }
.hs-sx .hs-signgrid a:hover, .hs-sx .hs-signgrid a:focus-visible { border-color: var(--hs-signal); box-shadow: 0 0 20px rgba(69,230,210,0.28), inset 0 0 18px rgba(142,124,255,0.18); }
.hs-sx .hs-signgrid a:hover::after { opacity: 1; animation: sx-sweep 0.8s ease-out; }
.hs-sx .hs-signgrid .hs-ic { transition: transform 0.25s, filter 0.25s; filter: drop-shadow(0 4px 12px rgba(142,124,255,0.4)); }
.hs-sx .hs-signgrid a:hover .hs-ic { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 14px var(--sx-glow)); }
.hs-sx .hs-signs a.cur { box-shadow: 0 0 16px rgba(69,230,210,0.3); }

/* 導覽與表格 */
.hs-sx .hs-nav a.active { box-shadow: 0 0 16px var(--sx-glow); }
.hs-sx table.hs-rank tbody tr { transition: background 0.2s; }
.hs-sx table.hs-rank tbody tr:hover { background: rgba(142,124,255,0.1); }

/* 進場：文字依序浮現，1 秒內全部出現；純 CSS，不影響爬蟲與無 JS 環境 */
@keyframes sx-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes sx-wipe { from { clip-path: inset(-100% 100% -100% -20%); } to { clip-path: inset(-100% -20% -100% -20%); } }
@keyframes sx-fade { from { opacity: 0; } }
.hs-sx .hs-signs { animation: sx-fade 0.35s ease-out backwards; }
.hs-sx .hs-headic { animation: sx-fade 0.35s ease-out 0.05s backwards, sx-pulse 4s ease-in-out 0.4s infinite; }
.hs-sx .hs-kicker { animation: sx-fade 0.3s ease-out 0.1s backwards; }
.hs-sx h1.hs-title { animation: sx-wipe 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s backwards; }
.hs-sx .hs-lead { animation: sx-rise 0.4s ease-out 0.35s backwards; }
.hs-sx .hs-nav { animation: sx-rise 0.4s ease-out 0.45s backwards; }
.hs-sx .hs-panel { animation: sx-rise 0.4s ease-out 0.55s backwards; }

@media (max-width: 767px) {
  .hs-sx .sx-dial { width: 380px; height: 380px; top: -110px; right: -170px; opacity: 0.32; }
  .hs-sx .hs-head { padding: 24px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-sx .sx-sky::before, .hs-sx .sx-sky::after, .hs-sx .sx-dial-outer, .hs-sx .sx-dial-inner, .hs-sx .hs-signs, .hs-sx .hs-headic, .hs-sx .hs-kicker, .hs-sx .hs-kicker::after, .hs-sx h1.hs-title, .hs-sx .hs-lead, .hs-sx .hs-nav, .hs-sx .hs-panel, .hs-sx .hs-signgrid a:hover::after { animation: none; }
}