/**
* Per-palace skins: `` or React `[data-palace-root][data-palace]`.
* Three layers: core orb, lifeline paths (JS), color tokens / gradient / micro-symbol.
* Base layout stays in palace-section-shell.css.
*/
:root {
--palace-symbol-opacity: 0.42;
}
/** 主題 JSON 載入失敗時顯示（由 palace-theme-apply.js 寫入） */
.palace-theme-load-error:empty {
display: none;
}
.palace-theme-load-error:not(:empty) {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
padding: 10px 14px;
font-size: 12px;
color: #fecaca;
background: rgba(69, 10, 10, 0.92);
border-bottom: 1px solid rgba(248, 113, 113, 0.4);
text-align: center;
}
/* ---- Token defaults (命宮) ---- */
:where(html,[data-palace-root])[data-palace="ming"],
html:not([data-palace]) {
--palace-core: #38bdf8;
--palace-core-dim: rgba(56, 189, 248, 0.42);
--palace-abyss-tint: rgba(12, 38, 50, 0.5);
--palace-trunk-pulse: rgba(255, 255, 255, 0.88);
--palace-yin-base: rgba(255, 255, 255, 0.22);
--palace-yin-pulse: #020408;
--palace-title-glow: var(--palace-core);
--palace-gradient-mid: rgba(52, 211, 153, 0.4);
--palace-gradient-gold: rgba(212, 175, 55, 0.9);
}
:where(html,[data-palace-root])[data-palace="guanlu"] {
--palace-core: #f8fafc;
--palace-core-dim: rgba(250, 204, 21, 0.45);
--palace-abyss-tint: rgba(30, 27, 10, 0.55);
--palace-trunk-pulse: rgba(255, 250, 235, 0.92);
--palace-title-glow: #fde68a;
--palace-gradient-mid: rgba(251, 191, 36, 0.55);
--palace-gradient-gold: rgba(253, 230, 138, 0.95);
--void-base: #050408;
}
html[data-palace="guanlu"] body,
[data-palace-root][data-palace="guanlu"] {
background-color: var(--void-base);
}
:where(html,[data-palace-root])[data-palace="caibo"] {
--palace-core: #fbbf24;
--palace-core-dim: rgba(245, 158, 11, 0.5);
--palace-abyss-tint: rgba(40, 28, 6, 0.52);
--palace-trunk-pulse: rgba(255, 237, 180, 0.95);
--palace-title-glow: #fcd34d;
--palace-gradient-mid: rgba(251, 191, 36, 0.55);
--palace-gradient-gold: rgba(212, 175, 55, 0.95);
}
:where(html,[data-palace-root])[data-palace="fuqi"] {
--palace-core: #f472b6;
--palace-core-dim: rgba(244, 114, 182, 0.42);
--palace-abyss-tint: rgba(50, 12, 35, 0.48);
--palace-trunk-pulse: rgba(255, 228, 240, 0.9);
--palace-yin-base: rgba(255, 200, 220, 0.28);
--palace-title-glow: #fbcfe8;
--palace-gradient-mid: rgba(244, 114, 182, 0.45);
--palace-gradient-gold: rgba(251, 182, 206, 0.85);
}
:where(html,[data-palace-root])[data-palace="zinv"] {
--palace-core: #a78bfa;
--palace-core-dim: rgba(167, 139, 250, 0.45);
--palace-abyss-tint: rgba(28, 22, 48, 0.52);
--palace-trunk-pulse: rgba(237, 233, 254, 0.9);
--palace-title-glow: #c4b5fd;
--palace-gradient-mid: rgba(167, 139, 250, 0.5);
--palace-gradient-gold: rgba(196, 181, 253, 0.88);
}
:where(html,[data-palace-root])[data-palace="jie"] {
--palace-core: #5eead4;
--palace-core-dim: rgba(45, 212, 191, 0.38);
--palace-abyss-tint: rgba(8, 40, 38, 0.55);
--palace-trunk-pulse: rgba(220, 255, 250, 0.88);
--palace-yin-base: rgba(180, 255, 245, 0.2);
--palace-title-glow: #99f6e4;
--palace-gradient-mid: rgba(45, 212, 191, 0.48);
--palace-gradient-gold: rgba(94, 234, 212, 0.75);
}
:where(html,[data-palace-root])[data-palace="qianyi"] {
--palace-core: #7dd3fc;
--palace-core-dim: rgba(56, 189, 248, 0.48);
--palace-abyss-tint: rgba(10, 30, 55, 0.52);
--palace-trunk-pulse: rgba(224, 242, 254, 0.92);
--palace-title-glow: #38bdf8;
--palace-gradient-mid: rgba(56, 189, 248, 0.5);
--palace-gradient-gold: rgba(125, 211, 252, 0.85);
}
:where(html,[data-palace-root])[data-palace="nuppu"] {
--palace-core: #94a3b8;
--palace-core-dim: rgba(148, 163, 184, 0.45);
--palace-abyss-tint: rgba(15, 20, 30, 0.55);
--palace-trunk-pulse: rgba(241, 245, 249, 0.88);
--palace-title-glow: #cbd5e1;
--palace-gradient-mid: rgba(148, 163, 184, 0.45);
--palace-gradient-gold: rgba(203, 213, 225, 0.82);
}
:where(html,[data-palace-root])[data-palace="tianzhai"] {
--palace-core: #c4b5a0;
--palace-core-dim: rgba(196, 181, 160, 0.42);
--palace-abyss-tint: rgba(28, 24, 18, 0.52);
--palace-trunk-pulse: rgba(255, 248, 235, 0.9);
--palace-title-glow: #e7e5e4;
--palace-gradient-mid: rgba(180, 160, 120, 0.42);
--palace-gradient-gold: rgba(212, 196, 168, 0.88);
}
:where(html,[data-palace-root])[data-palace="fude"] {
--palace-core: #c4b5fd;
--palace-core-dim: rgba(167, 139, 250, 0.35);
--palace-abyss-tint: rgba(35, 25, 55, 0.45);
--palace-trunk-pulse: rgba(245, 240, 255, 0.85);
--palace-title-glow: #ddd6fe;
--palace-gradient-mid: rgba(167, 139, 250, 0.38);
--palace-gradient-gold: rgba(221, 214, 254, 0.75);
}
:where(html,[data-palace-root])[data-palace="fumu"] {
--palace-core: #fcd34d;
--palace-core-dim: rgba(252, 211, 77, 0.42);
--palace-abyss-tint: rgba(35, 30, 12, 0.52);
--palace-trunk-pulse: rgba(255, 251, 235, 0.9);
--palace-title-glow: #fde68a;
--palace-gradient-mid: rgba(251, 191, 36, 0.48);
--palace-gradient-gold: rgba(253, 230, 138, 0.9);
}
:where(html,[data-palace-root])[data-palace="xiongdi"] {
--palace-core: #67e8f9;
--palace-core-dim: rgba(103, 232, 249, 0.42);
--palace-abyss-tint: rgba(8, 35, 45, 0.5);
--palace-trunk-pulse: rgba(224, 255, 255, 0.9);
--palace-title-glow: #a5f3fc;
--palace-gradient-mid: rgba(34, 211, 238, 0.45);
--palace-gradient-gold: rgba(103, 232, 249, 0.82);
}
/* Wire tokens into shell variables */
:where(html,[data-palace-root])[data-palace] {
--core-blue: var(--palace-core);
--core-blue-dim: var(--palace-core-dim);
--glow-abyss: var(--palace-abyss-tint);
--trunk-pulse: var(--palace-trunk-pulse);
--yin-base: var(--palace-yin-base, rgba(255, 255, 255, 0.2));
--yin-pulse: var(--palace-yin-pulse, #020408);
}
:where(html,[data-palace-root])[data-palace] .abyss-light {
background: radial-gradient(ellipse at center, var(--palace-abyss-tint) 0%, transparent 70%);
}
:where(html,[data-palace-root])[data-palace] .palace-name {
text-shadow: 0 0 15px var(--palace-title-glow);
}
:where(html,[data-palace-root])[data-palace] #pmso-trunk-gradient stop:nth-child(2) {
stop-color: var(--palace-gradient-mid);
}
:where(html,[data-palace-root])[data-palace] #pmso-trunk-gradient stop:nth-child(3) {
stop-color: var(--palace-gradient-gold);
}
/* 財帛：聚合中段 — 略加粗主幹與流光 */
:where(html,[data-palace-root])[data-palace="caibo"] .trunk-body-yang,
:where(html,[data-palace-root])[data-palace="caibo"] .trunk-body-yin {
stroke-width: 2.55px;
}
:where(html,[data-palace-root])[data-palace="caibo"] .energy-flow-yang {
stroke-width: 1.35px;
}
:where(html,[data-palace-root])[data-palace="caibo"] .energy-flow-yin {
stroke-width: 3.5px;
}
/* ---- Core orb variants (replaces default .blue-star look per palace) ---- */
:where(html,[data-palace-root])[data-palace] .blue-star {
background: radial-gradient(circle at 35% 35%, #fff 0%, var(--palace-core) 42%, #020617 88%);
box-shadow:
0 0 40px var(--palace-core-dim),
inset 0 0 15px rgba(255, 255, 255, 0.78);
}
/* 命宮：經典藍球（與原設計一致） */
:where(html,[data-palace-root])[data-palace="ming"] .blue-star,
html:not([data-palace]) .blue-star {
animation-name: blue-star-breathe;
}
/* 官祿：銳角、金白權柄感 + 皇冠外環 */
:where(html,[data-palace-root])[data-palace="guanlu"] .blue-star {
position: relative;
border-radius: 46% 54% 48% 52% / 42% 46% 54% 58%;
background:
radial-gradient(circle at 32% 28%, #fff 0%, #fefce8 18%, #fde68a 42%, #b45309 92%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.35),
0 0 0 3px rgba(250, 204, 21, 0.22),
0 0 36px rgba(250, 204, 21, 0.55),
0 0 8px rgba(255, 255, 255, 0.9),
inset 0 -6px 14px rgba(180, 83, 9, 0.35);
animation-name: blue-star-breathe;
}
:where(html,[data-palace-root])[data-palace="guanlu"] .blue-star::after {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(253, 230, 138, 0.35);
box-shadow:
0 -6px 14px rgba(180, 83, 9, 0.25),
inset 0 0 12px rgba(255, 251, 235, 0.12);
pointer-events: none;
animation: guanlu-crown-ring 8s ease-in-out infinite alternate;
}
@keyframes guanlu-crown-ring {
0% {
transform: scale(0.94);
opacity: 0.55;
}
100% {
transform: scale(1.05);
opacity: 0.9;
}
}
/** 官祿：銳線家族 — 主幹略收束、流光更「向上切」 */
:where(html,[data-palace-root])[data-palace="guanlu"] .app-life-lines .trunk-body-yang {
stroke-width: 1.95px;
opacity: 0.92;
}
:where(html,[data-palace-root])[data-palace="guanlu"] .app-life-lines .energy-flow-yang {
stroke-width: 1.05px;
opacity: 0.98;
}
:where(html,[data-palace-root])[data-palace="guanlu"] .app-life-lines .trunk-body-yin {
stroke-width: 1.35px;
opacity: 0.78;
}
:where(html,[data-palace-root])[data-palace="guanlu"] .palace-name {
letter-spacing: 0.42em;
}
/* 財帛：雙層環 */
:where(html,[data-palace-root])[data-palace="caibo"] .blue-star {
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, transparent 42%, rgba(251, 191, 36, 0.35) 43%, transparent 48%),
radial-gradient(circle at 35% 35%, #fff 0%, #fef3c7 25%, #f59e0b 55%, #b45309 95%);
box-shadow:
0 0 44px rgba(245, 158, 11, 0.55),
inset 0 0 18px rgba(255, 255, 255, 0.85);
animation-name: blue-star-breathe;
}
/* 夫妻：雙月互映 */
:where(html,[data-palace-root])[data-palace="fuqi"] .blue-star {
border-radius: 50%;
background:
radial-gradient(circle at 62% 48%, rgba(255, 255, 255, 0.95) 0%, #fbcfe8 22%, transparent 28%),
radial-gradient(circle at 38% 52%, rgba(255, 255, 255, 0.85) 0%, #f472b6 35%, #9d174d 92%);
box-shadow:
0 0 38px rgba(244, 114, 182, 0.5),
inset 0 0 20px rgba(255, 255, 255, 0.55);
animation-name: blue-star-breathe;
}
/* 子女：光點群聚 */
:where(html,[data-palace-root])[data-palace="zinv"] .blue-star {
background:
radial-gradient(circle at 28% 30%, #fff 0%, transparent 8%),
radial-gradient(circle at 70% 35%, #fff 0%, transparent 7%),
radial-gradient(circle at 50% 65%, #fff 0%, transparent 9%),
radial-gradient(circle at 40% 48%, #c4b5fd 0%, #6d28d9 70%, #312e81 100%);
box-shadow: 0 0 40px rgba(167, 139, 250, 0.55);
animation-name: blue-star-breathe;
}
/* 疾厄：冷青脈衝 */
:where(html,[data-palace-root])[data-palace="jie"] .blue-star {
background: radial-gradient(circle at 40% 38%, #ecfeff 0%, #5eead4 45%, #0f766e 88%);
animation-name: palace-orb-jie-pulse;
}
/* 遷移：流星尾光 */
:where(html,[data-palace-root])[data-palace="qianyi"] .blue-star {
background: radial-gradient(circle at 38% 40%, #fff 0%, #7dd3fc 40%, #0369a1 88%);
box-shadow:
-18px 8px 32px rgba(56, 189, 248, 0.35),
0 0 40px rgba(56, 189, 248, 0.45),
inset 0 0 16px rgba(255, 255, 255, 0.75);
animation-name: blue-star-breathe;
}
/* 福德：柔霧光團 */
:where(html,[data-palace-root])[data-palace="fude"] .blue-star {
filter: saturate(0.92) blur(0.2px);
background:
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(196, 181, 253, 0.5) 45%, rgba(91, 33, 182, 0.35) 100%);
box-shadow:
0 0 50px rgba(167, 139, 250, 0.35),
inset 0 0 28px rgba(255, 255, 255, 0.45);
animation-name: palace-orb-fude-drift;
}
/* 田宅：方圓結合 */
:where(html,[data-palace-root])[data-palace="tianzhai"] .blue-star {
width: 64px;
height: 64px;
border-radius: 22px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.35), transparent 42%),
radial-gradient(circle at 35% 35%, #fff 0%, #d6d3d1 35%, #78716c 88%);
box-shadow:
0 0 36px rgba(196, 181, 160, 0.45),
inset 0 0 14px rgba(255, 255, 255, 0.5);
animation-name: blue-star-breathe;
}
/* 兄弟：雙點共振 */
:where(html,[data-palace-root])[data-palace="xiongdi"] .blue-star {
background:
radial-gradient(circle at 35% 50%, #fff 0%, #67e8f9 28%, transparent 32%),
radial-gradient(circle at 65% 50%, #fff 0%, #22d3ee 28%, transparent 32%),
radial-gradient(circle at 50% 50%, rgba(8, 47, 73, 0.2) 0%, #0e7490 100%);
box-shadow: 0 0 38px rgba(34, 211, 238, 0.45);
animation-name: blue-star-breathe;
}
/* 父母：上緣保護環 */
:where(html,[data-palace-root])[data-palace="fumu"] .blue-star {
background:
radial-gradient(ellipse 120% 40% at 50% 12%, rgba(255, 250, 220, 0.95) 0%, rgba(252, 211, 77, 0.25) 45%, transparent 55%),
radial-gradient(circle at 45% 55%, #fff 0%, #fcd34d 40%, #b45309 92%);
box-shadow:
0 0 40px rgba(252, 211, 77, 0.48),
inset 0 0 16px rgba(255, 255, 255, 0.75);
animation-name: blue-star-breathe;
}
/* 僕役：多點環繞 */
:where(html,[data-palace-root])[data-palace="nuppu"] .blue-star {
background:
radial-gradient(circle at 50% 18%, #fff 0%, transparent 6%),
radial-gradient(circle at 82% 40%, #fff 0%, transparent 5%),
radial-gradient(circle at 18% 42%, #fff 0%, transparent 5%),
radial-gradient(circle at 50% 82%, #fff 0%, transparent 5%),
radial-gradient(circle at 48% 48%, #e2e8f0 0%, #64748b 55%, #0f172a 95%);
box-shadow: 0 0 36px rgba(148, 163, 184, 0.5);
animation-name: blue-star-breathe;
}
@keyframes palace-orb-jie-pulse {
0%,
100% {
transform: scale(0.94);
filter: brightness(0.92) saturate(1.05);
box-shadow: 0 0 22px rgba(45, 212, 191, 0.28), inset 0 0 12px rgba(255, 255, 255, 0.65);
}
50% {
transform: scale(1.05);
filter: brightness(1.1) saturate(1.12);
box-shadow: 0 0 48px rgba(45, 212, 191, 0.5), 0 0 12px rgba(167, 243, 208, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.85);
}
}
@keyframes palace-orb-fude-drift {
0%,
100% {
transform: scale(0.96);
opacity: 0.92;
}
50% {
transform: scale(1.04);
opacity: 1;
}
}
/* 微符號（由 JS 寫入文字） */
.palace-hint-symbol {
font-size: 13px;
line-height: 1;
letter-spacing: 0;
color: rgba(255, 255, 255, var(--palace-symbol-opacity));
text-shadow: 0 0 12px var(--palace-core-dim);
user-select: none;
margin-top: 2px;
}
/* Theme dev picker */
.palace-theme-bar {
position: fixed;
top: 10px;
right: 10px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(15, 23, 42, 0.72);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 11px;
color: rgba(226, 232, 240, 0.9);
}
.palace-theme-bar label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.palace-theme-bar select {
background: rgba(3, 7, 18, 0.85);
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 6px 8px;
font-size: 11px;
max-width: min(52vw, 200px);
}
@media (max-width: 430px) {
.palace-theme-bar {
left: 8px;
right: 8px;
top: auto;
bottom: 10px;
justify-content: space-between;
}
.palace-theme-bar select {
max-width: 60vw;
}
}
@media (prefers-reduced-motion: reduce) {
:where(html,[data-palace-root])[data-palace="guanlu"] .blue-star::after {
animation: none;
opacity: 0.65;
}
}