:root {
  color-scheme: dark;
  --ink: #efe7d4;
  --muted: #b9a98c;
  --panel: rgba(22, 18, 14, 0.68);
  --line: rgba(239, 217, 176, 0.22);
  --gold: #d6a84a;
  --gold-2: #f0d58a;
  /* 頁面底圖與龜殼空間佈局：這裡按 1200px 寬的 homepageBG.webp 調整 */
  --mock-page-width: 1200px;
  --mock-page-height: 1800px;
  --page-fit-scale: 1;
  /* 龜殼空間位置與尺寸，UI控件不會跟著縮放 */
  --module-left: 375px;
  --module-top: 94px;
  --module-width: 820px;
  --module-height: 621px;
  --module-feather: 5%;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  /* 2026-09-15：臨時檢查底色 #d9d9d9 已換成命宮報告的 BlueBG 平鋪，見檔尾 --page-bg-* */
  background-color: var(--page-bg-color);
  color: var(--ink);
  font-family: "Times New Roman", "Microsoft YaHei", "PingFang SC", serif;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 【補 302】2026-09-19 移除：#app 底下所有文字一律 transform: scaleX(.8)。
   這是舊時代的「手工入框」——不管塞不塞得下，先全部壓成 0.8 寬；
   跟 layout-editor 以前寫在行內的 0.8／0.9 是同一套思路。
   現在橫向塞不下統一交給 homepage-fitx.js 的入框處理（只壓不拉），
   所以整條拿掉：塞得下就照原寬排，塞不下才壓。 */

#divinationModule :is(button, label, span, p, h1, h2, h3, select, input) {
  transform: none;
}

#divinationModule .question-panel,
#divinationModule .hud {
  transform: translateX(-50%);
}

#pageShell {
  width: var(--mock-page-width);
  height: calc(var(--mock-page-height) * var(--page-fit-scale));
  margin: 0 auto;
  transform-origin: top center;
  overflow: hidden;
}

#app {
  width: var(--mock-page-width);
  min-height: var(--mock-page-height);
  position: relative;
  overflow: hidden;
  background-image: url("./homepageImages/homepageBG.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

@media (max-width: 1200px) {
  #pageShell {
    margin-left: 0;
    margin-right: 0;
  }

  #app {
    transform: scale(var(--page-fit-scale));
    transform-origin: top left;
  }
}

#divinationModule {
  position: absolute;
  left: var(--module-left);
  top: var(--module-top);
  width: var(--module-width);
  height: var(--module-height);
  overflow: hidden;
  background: #100e0d;
}

#divinationModule.is-transparent {
  background: transparent;
}

#divinationModule.is-feathered {
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 var(--module-feather),
      #000 calc(100% - var(--module-feather)),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 var(--module-feather),
      #000 calc(100% - var(--module-feather)),
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 var(--module-feather),
      #000 calc(100% - var(--module-feather)),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 var(--module-feather),
      #000 calc(100% - var(--module-feather)),
      transparent 100%
    );
  mask-composite: intersect;
}
#stage {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  background: transparent;
}

.mode-panel {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 18;
}

.start-panel {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 17;
  text-align: center;
  transform: translateX(-50%);
}

.oracle-title {
  width: 260px;
  color: #ffe7a7;
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(214, 168, 74, 0.52);
}

.oracle-title.gold-svg-title {
  height: 36px;
  text-shadow: none;
}

.shell-gold-title-svg {
  display: block;
  overflow: visible;
}

.start-divination-button {
  width: auto;
  min-width: 210px;
  margin: 155px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffe7a7;
  font: 24px/1 "Times New Roman", "Microsoft YaHei", "PingFang SC", serif;
  cursor: pointer;
  backdrop-filter: none;
  box-shadow: none;
  text-shadow:
    0 0 10px rgba(255, 220, 140, 0.82),
    0 0 28px rgba(214, 168, 74, 0.5);
}

.start-divination-button:hover {
  background: transparent;
  color: #fff2c5;
}

.oracle-guidance {
  width: 100%;
  margin: 8px 0 0;
  color: rgba(239, 231, 212, 0.88);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.74);
}

.question-panel {
  position: absolute;
  left: 50%;
  top: 88px;
  z-index: 17;
  width: min(430px, calc(100% - 250px));
  text-align: center;
  transform: translateX(-50%);
}

.question-prompt {
  margin: 0 0 9px;
  color: #ffe7a7;
  font-size: 20px;
  line-height: 1;
  text-shadow:
    0 0 9px rgba(255, 220, 140, 0.78),
    0 0 24px rgba(214, 168, 74, 0.42);
}

.question-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.question-picker button {
  min-height: 28px;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid rgba(240, 213, 138, 0.36);
  border-radius: 7px;
  background: rgba(16, 14, 13, 0.58);
  color: var(--gold-2);
  font: 12px/1.1 "Times New Roman", "Microsoft YaHei", "PingFang SC", serif;
  cursor: pointer;
  box-shadow: inset 0 0 14px rgba(214, 168, 74, 0.08);
}

.question-picker button:hover {
  background: rgba(214, 168, 74, 0.16);
  box-shadow: 0 0 16px rgba(214, 168, 74, 0.28);
}

.selected-question {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 7px 15px;
  border: 1px solid rgba(240, 213, 138, 0.28);
  border-radius: 999px;
  color: rgba(239, 231, 212, 0.84);
  font-size: 20px;
  line-height: 1;
  background: rgba(16, 14, 13, 0.5);
}

.selected-question span {
  margin-left: 4px;
  color: var(--gold-2);
  white-space: nowrap;
}

/* 【補 294】可選的問題欄位：跟著「選擇領域」那一步出現。
   只是使用者自己的筆記，不參與占斷、不影響收費，所以刻意做得比領域選項低調。 */
.user-question {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(240, 213, 138, 0.22);
  border-radius: 9px;
  background: rgba(16, 14, 13, 0.46);
  text-align: left;
}

/* 【補 296】點下第一枚銅錢之後，問題已經寫完了：
   只留「你寫的問題」那一行，標籤／說明／字數收起來。
   （曾經還做過「卦卡出現就整塊藏起來」與右上角小 ×，使用者 2026-09-19 決定撤回：
     讓問題類型與問題一直留在畫面上，一來使用者可以隨時對照，
     二來卡牌永遠被壓到一角，對盜版有一點嚇阻作用。） */
.user-question.is-compact {
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.user-question.is-compact .user-question-label,
.user-question.is-compact .user-question-hint,
.user-question.is-compact .user-question-count {
  display: none;
}

.user-question-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(239, 231, 212, 0.74);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.user-question-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-question-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(240, 213, 138, 0.3);
  border-radius: 7px;
  background: rgba(10, 9, 8, 0.72);
  color: #f3ead6;
  font: 13px/1.2 "Times New Roman", "Microsoft JhengHei", system-ui, serif;
  outline: none;
}

.user-question-input:focus {
  border-color: rgba(255, 231, 167, 0.7);
}

.user-question-count {
  color: rgba(239, 231, 212, 0.45);
  font-size: 11px;
  white-space: nowrap;
}

.user-question-hint {
  margin: 6px 0 0;
  color: rgba(239, 231, 212, 0.42);
  font-size: 11px;
  line-height: 1.35;
}

.question-picker[hidden],
.selected-question[hidden],
.user-question[hidden],
.question-panel[hidden],
.start-divination-button[hidden],
.oracle-guidance[hidden],
.card-prompt[hidden],
.hud[hidden],
.meter[hidden] {
  display: none;
}

.hud {
  position: absolute;
  left: 50%;
  top: 154px;
  z-index: 16;
  width: min(520px, calc(100% - 48px));
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
}

.card-prompt {
  position: absolute;
  right: 132px;
  top: 45%;
  z-index: 18;
  color: #ffe7a7;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 0 10px rgba(255, 220, 140, 0.9),
    0 0 30px rgba(214, 168, 74, 0.52);
  animation: cardPromptPulse 1.4s ease-in-out infinite;
  pointer-events: none;
}

.eyebrow,
#status,
.meter {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

h1 {
  margin: 2px 0 8px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0;
}

[data-white-svg-title] {
  color: transparent !important;
  overflow: visible;
  /* 【補 302】文字色只在這裡宣告：元素本身的 color 被上面那行弄成透明，
     setWhiteSvgTitle 改建這個自訂屬性來畫浮雕漸層。 */
  --white-svg-color: #efe7d4;
}

.white-svg-title {
  display: inline-block;
  width: 100%;
  height: 1.2em;
  position: relative;
  overflow: visible;
  color: #efe7d4;
}

.white-svg-title svg {
  display: block;
  width: auto;
  height: var(--white-svg-render-height, 100%);
  position: absolute;
  left: var(--white-svg-left, 50%);
  top: 50%;
  transform: translate(var(--white-svg-translate-x, -50%), -50%);
  overflow: visible;
}

.white-svg-title text {
  paint-order: stroke fill;
}

.mode-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.mode-panel select {
  min-width: 108px;
  padding: 5px 9px;
  border: 1px solid rgba(240, 213, 138, 0.28);
  border-radius: 6px;
  background: rgba(16, 14, 13, 0.86);
  color: var(--ink);
  font: 13px/1 "Times New Roman", "Microsoft YaHei", "PingFang SC", serif;
  backdrop-filter: blur(10px);
}

#status {
  min-height: 38px;
  color: #ffe7a7;
  font-size: 22px;
  line-height: 1.25;
  text-shadow:
    0 0 9px rgba(255, 220, 140, 0.85),
    0 0 28px rgba(214, 168, 74, 0.5);
  animation: ritualStatusIn 520ms cubic-bezier(.15,.85,.25,1) both;
}

.meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  margin-top: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(240, 213, 138, 0.18);
  border-radius: 999px;
  background: rgba(16, 14, 13, 0.46);
  backdrop-filter: blur(8px);
}

.meter span {
  min-width: 46px;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}

.meter div {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.meter i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transition: width 180ms ease;
}

@keyframes ritualStatusIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.94);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes cardPromptPulse {
  0%, 100% {
    opacity: .62;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(8px);
  }
}

.icon-button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(240, 213, 138, 0.42);
  border-radius: 50%;
  background: rgba(22, 18, 14, 0.68);
  color: var(--ink);
  font: 24px/1 "Times New Roman", "Microsoft YaHei", "PingFang SC", serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26);
}

.reset-button {
  left: 14px;
  bottom: 14px;
}

.hex-preview {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
  padding: 5px 6px;
  border: 1px solid rgba(240, 213, 138, 0.34);
  border-radius: 8px;
  background: rgba(16, 14, 13, 0.72);
  backdrop-filter: blur(10px);
}

.hex-preview,
#divinationModule > .lil-gui.root {
  display: none;
}

.hex-preview.is-debug-unlocked {
  display: flex;
}

#divinationModule > .lil-gui.root.is-debug-unlocked {
  display: block;
}

.hex-preview button {
  width: auto;
  min-width: 26px;
  height: 24px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid rgba(240, 213, 138, 0.34);
  border-radius: 6px;
  background: rgba(214, 168, 74, 0.14);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.hex-preview button:first-child,
.hex-preview button:last-child {
  font-size: 20px;
  line-height: 1;
}

.hex-preview label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.hex-preview input {
  width: 42px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid rgba(240, 213, 138, 0.28);
  border-radius: 6px;
  background: rgba(16, 14, 13, 0.86);
  color: var(--ink);
  font: inherit;
  text-align: center;
}

button:not(.icon-button) {
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 213, 138, 0.34);
  border-radius: 6px;
  background: rgba(214, 168, 74, 0.13);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

button:hover {
  background: rgba(214, 168, 74, 0.2);
}

.question-picker button {
  width: auto;
  min-height: 28px;
  margin: 0;
  padding: 5px 7px;
}

.question-picker button.is-selected {
  border-color: rgba(255, 231, 167, 0.74);
  background: rgba(214, 168, 74, 0.22);
  color: #fff2b0;
}

.hex-preview button {
  width: auto;
  margin-top: 0;
  padding: 0 7px;
}

#divinationModule > .lil-gui.root {
  position: absolute;
  top: 8px;
  right: 8px;
  max-height: calc(100% - 16px);
  width: 230px;
  z-index: 20;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .hud {
    padding: 14px;
  }

  h1 {
    font-size: 23px;
  }
}

/* =====================================================
   Homepage Layout Prototype
===================================================== */


#app{


width:1200px;

min-height:2347px;

position:relative;

overflow:hidden;

}



.homepage-bg{


position:absolute;

left:0;

top:0;


width:1200px;

height:auto;


z-index:0;


}




#homeLayout{


position:absolute;

left:0;

top:0;


width:1200px;

height:2347px;


z-index:10;


}





.layout-box{


position:absolute;


border:

1px solid rgba(226,196,131,.9);



background:

rgba(0,0,0,.45);



color:

#e2c483;



font-size:20px;


font-family:

"Times New Roman", serif;



display:flex;


align-items:center;


justify-content:center;


text-align:center;



box-sizing:border-box;


}





#divinationBox{


background:

rgba(0,0,0,.25);


}


/* =====================================================
   Homepage Layout Prototype
===================================================== */


#app{

width:1200px;

min-height:2600px;

position:relative;

overflow:hidden;

}



.homepage-bg{

position:absolute;

left:0;

top:0;

width:1200px;

height:auto;

z-index:0;

}




#homeLayout{

position:absolute;

left:0;

top:0;

width:1200px;

min-height:2600px;

z-index:10;

}


#pageShell,
#app,
#homeLayout{

min-height:0;

}




.layout-section{

position:absolute;

box-sizing:border-box;

border:
1px solid rgba(226,196,131,.9);

background-color:
transparent;
background-image:
none;

color:#e2c483;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}




.layout-component{

position:absolute;

box-sizing:border-box;

border:
1px dashed rgba(226,196,131,.8);

background:
rgba(0,0,0,.25);

color:#e2c483;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}



#heroSection{

background-position:center;

background-size:100% 100%;

background-origin:border-box;

background-repeat:no-repeat;

z-index:40;

}



#heroSection::after{

content:"";

position:absolute;

left:-1px;

right:-1px;

top:-1px;

bottom:-1px;

border-width:40px;border-style:solid;border-color:transparent;border-image:url("lifepalace/images/PalaceReportBG/Conner_FrameD.webp") 56 stretch;border-radius:0;

pointer-events:none;

z-index:60;
}



/* ==========================================================================
   2026-09-19：【補 300】EXPLORE OUR ORACLES 整段刪掉，換成 4 張直立 banner。
   每張 banner ＝ 自己的底圖 ＋ 角花邊框（跟 feature-card 用同一套 border-image），
   下緣壓一層暗漸層（scrim），文字才不會被照片吃掉。
   位置／大小在 styles.css 檔尾【補 302】；文字來自 data/ui.<語言>.json 的
   homepage.ancientArts.items；擠壓交給 homepage-fitx.js 的入框處理。
   ========================================================================== */

.oracle-banner{

position:absolute;

border:0;

background-position:center;

background-size:100% 100%;

background-repeat:no-repeat;

background-color:var(--band-fill);

border-radius:var(--block-radius);

background-clip:padding-box;

}

.oracle-banner::after{

content:"";

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

border-width:40px;border-style:solid;border-color:transparent;border-image:url("lifepalace/images/PalaceReportBG/Conner_FrameD.webp") 56 stretch;border-radius:0;

pointer-events:none;

}

.oracle-banner::before{

content:"";

position:absolute;

left:0;

right:0;

bottom:0;

height:48%;

background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.5) 45%, rgba(0,0,0,0));

pointer-events:none;

}

#bannerChime{
background-image:url("homepageImages/HomePageBG_TheChime.webp");
}

#bannerBrush{
background-image:url("homepageImages/HomePageBG_TheBrush.webp");
}

#bannerGuardian{
background-image:url("homepageImages/HomePageBG_TheGuardian.webp");
}

#bannerRedThread{
background-image:url("homepageImages/HomePageBG_TheRedThread.webp");
}

/* 第 2、3 張之間留給裝飾圖的格子：不要邊框、不帶角花。
   圖已經放進去了（補 307）：homepageImages/HomePageBG_DecoA.webp，
   實際的位置與縮放寫在檔尾「補 302」那一段的 #bannerDeco。 */
.oracle-banner-deco{

background:none;

border:0;

}



#todayForYouSection{

background-image:
url("homepageImages/TodayForYouBG.webp");

background-position:center;

background-size:100% 100%;

background-origin:border-box;

background-repeat:no-repeat;

}



#todayForYouSection::after{

content:"";

position:absolute;

left:-1px;

right:-1px;

top:-1px;

bottom:-1px;

border-width:40px;border-style:solid;border-color:transparent;border-image:url("lifepalace/images/PalaceReportBG/Conner_FrameD.webp") 56 stretch;border-radius:0;

pointer-events:none;

}



#freeReportSection{

display:block;

overflow:hidden;

background:var(--band-fill);

z-index:20;

transform-origin:50% 0%;

will-change:transform,opacity;

}

/* 【補 277】#freeReportSection 裡裝的是固定 1200px 寬的完整報告頁
   （免費報告／付費完整報告／命宮報告三個 iframe 共用這個區塊）。
   它原本沿用版面編輯器給其他區塊的 left/right 7px＋左右各 1px 金框，
   iframe 只剩 1184px，報告右邊會被切掉 16px
   （實測：iframe 內 documentElement.clientWidth = 1184、scrollWidth = 1200）。
   這裡把它撐滿 #app 的 1200 並去掉左右邊框，讓報告完整顯示；
   其他區塊的版面完全不受影響。 */
#freeReportSection{

left:0 !important;

right:0 !important;

width:auto !important;

border-left-width:0 !important;

border-right-width:0 !important;

}

/* 賜名圖按 550px 寬展示：550 × 1.5 圖片高度，再加 58px 操作欄。
   【補 530】iframe 最底下固定著 legal-line.js 的合規聲明列（約 27px 高），
   它原本壓在按鈕列上。nameawaken/report.html 的 embed-mode 已改成 body 底部
   留白 36px，所以這裡同步把 883 → 919（825 畫布 ＋ 58 操作欄 ＋ 36 留白）。
   畫布尺寸完全不變，只是把那段留白做出來。 */
#freeReportSection.bestow-result-active{

height:919px !important;

}



#freeReportSection.hidden{

display:none;

}



.free-report-frame{

display:block;

width:100%;

height:100%;

border:0;

background:var(--band-fill);

}

.result-frame-hidden{

display:none;

}



.report-moving-layer{

z-index:30;

}

.free-report-panel-moving{

z-index:15;

}



.divination-host{

display:block;

overflow:hidden;

background:transparent;

}

.experience-stage,
.experience-module,
.experience-frame-host,
.experience-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
}

.experience-stage {
  overflow:hidden;
  background:transparent;
}

.experience-module {
  z-index:1;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 360ms ease, visibility 0s linear 360ms;
}

.experience-module.is-active {
  z-index:2;
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity 360ms ease;
}

.experience-frame {
  display:block;
  border:0;
  background:#050302;
}

.experience-frame-host[data-spirit-guardians-host] iframe {
  background:transparent;
}


.experience-placeholder {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:10px;
  text-align:center;
  color:#e7c87f;
  background:
    radial-gradient(circle at 50% 42%, rgba(122,85,31,.18), transparent 34%),
    rgba(4,3,2,.88);
}

.experience-placeholder strong {
  font-family:"Times New Roman", serif;
  font-size:28px;
  letter-spacing:.12em;
}

.experience-placeholder span {
  color:#aa9672;
  font-size:15px;
}

[data-experience-target].is-active {
  color:#ffe1a0;
  text-shadow:0 0 12px rgba(220,166,68,.62);
}



.divination-host #divinationModule{

left:0;

top:0;

width:100%;

height:100%;

}



#mainNav,
#authButtons{

gap:14px;

}



#mainNav a{

color:#e2c483;

text-decoration:none;

font-size:15px;

letter-spacing:.08em;

}



#mainNav a:hover{

color:#f0d58a;

text-decoration:none;

}



#authButtons button{

width:auto;

height:100%;

margin:0;

padding:0 18px;

border:1px solid rgba(226,196,131,.75);

border-radius:0;

background:rgba(0,0,0,.35);

color:#e2c483;

font-size:15px;

letter-spacing:.08em;

}



#authButtons button:last-child{

background:rgba(226,196,131,.82);

color:#140f0b;

}



.logo-block{

display:block;

padding:18px 16px 10px;

text-align:left;

background:rgba(0,0,0,.16);

}



.site-title{

font-family:"Times New Roman", serif;

font-size:26px;

line-height:1.08;

letter-spacing:.05em;

color:#e7c982;

}



.site-tagline{

margin-top:8px;

font-size:11px;

letter-spacing:.16em;

color:#c9b99a;

}



.hero-title{

margin:0;

font-family:"Times New Roman", serif;

font-size:46px;

line-height:1.08;

font-weight:500;

letter-spacing:.025em;

color:#efe7d4;

background:transparent;

border-color:transparent;

}



.hero-subtitle{

margin:0;

font-size:16px;

line-height:1.25;

font-weight:700;

letter-spacing:.08em;

white-space:nowrap;

color:#d6a84a;

background:transparent;

border-color:transparent;

}



.hero-body-copy{

margin:0;

text-align:center;

font-size:19px;

line-height:1.38;

color:#c9b99a;

background:transparent;

border-color:transparent;

}



#heroCTA{

font-size:17px;

letter-spacing:.08em;

text-align:center;

background:transparent;

white-space:nowrap;

}



#heroNote{

justify-content:center;

padding-left:0;

text-align:center;

font-size:16px;

line-height:1.45;

white-space:nowrap;

color:#c9b99a;

background:transparent;

}



.feature-card{

display:block;

padding:22px 24px;

text-align:left;

background-position:center;

background-size:100% 100%, 100% 100%;

background-repeat:no-repeat;

border:0;

border-radius:0;

background-clip:padding-box;

position:absolute;

cursor:pointer;

}

.feature-card:focus-visible {
  outline:1px solid rgba(255,220,142,.9);
  outline-offset:-7px;
}



.feature-card::after{

content:"";

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

border-width:40px;border-style:solid;border-color:transparent;border-image:url("lifepalace/images/PalaceReportBG/Conner_FrameD.webp") 56 stretch;border-radius:0;

pointer-events:none;

}



#ancientDivination{

background-image:
url("homepageImages/ancientDivationBG.webp");

}



#spiritGuardians{

background-image:
url("homepageImages/spiritGuardiansBG.webp");

}



#nameAwakening{

background-image:
url("homepageImages/nameAwakeningBG.webp");

}

#personalFengShui{

background-image:
url("homepageImages/FengShuiBG.webp");

}

#innerCultivation{

background-image:
url("homepageImages/InnerCultivationBG.webp");

}
.feature-card h3{

margin:0;

color:#efe7d4;

font-family:"Times New Roman", serif;

font-size:22px;

font-weight:500;

letter-spacing:.08em;

line-height:1.1;

display:block;

}



.feature-card p{

margin:16px 0 0;

color:#c9b99a;

font-size:16px;

line-height:1.45;

display:block;

max-width:230px;

}



.feature-card a{

position:absolute;

left:24px;

bottom:18px;

color:#d6a84a;

font-size:15px;

font-weight:700;

letter-spacing:.1em;

text-decoration:none;

transform-origin:left center;

display:inline-block;

}



.feature-card a:hover{

color:#f0d58a;

text-decoration:none;

}



.oracle-banner-title{

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:none;

border:0;

font-family:"Times New Roman", serif;

font-size:18px;

letter-spacing:.14em;

line-height:1.15;

color:#efe7d4;

white-space:nowrap;

}



.oracle-banner-text{

display:block;

text-align:center;

background:none;

border:0;

font-family:"Times New Roman", serif;

font-size:13px;

line-height:1.4;

color:#cec2a6;

}



.today-for-you-title{

justify-content:flex-start;

padding-left:24px;

font-family:"Times New Roman", serif;

font-size:26px;

letter-spacing:.12em;

color:#efe7d4;

background:rgba(0,0,0,.18);

}



.today-for-you-description{

justify-content:flex-start;

padding-left:24px;

text-align:left;

font-size:17px;

line-height:1.55;

color:#c9b99a;

background:rgba(0,0,0,.16);

}



.today-for-you-feature-list{

gap:26px;

justify-content:flex-start;

align-items:center;

padding-left:24px;

background:rgba(0,0,0,.16);

}



.today-for-you-feature-list span,
.today-for-you-standalone{

font-size:13px;

color:#d6a84a;

letter-spacing:.04em;

white-space:nowrap;

}

.today-for-you-standalone{

justify-content:flex-start;

text-align:left;

}

/* TODAY FOR YOU · 2026-09-14 新底圖對位
   底圖（homepageImages/TodayForYouBG.webp）已經畫好黑色名牌與金色按鈕，
   所以這一區的文字一律「無黑底」，並照名牌位置排：
     標題／說明 → 上方大名牌   檔位字 → 中間左邊小名牌
     按鈕字     → 下方金色按鈕（深色字）
    位置（left/top/width/height）、字級與顏色都在 styles.css 檔尾【補 302】
    （原本的 layout-config-homepage.json 與各語 OVERRIDE-homepage-textstyle-*.json 已退役）。 */
#todayForYouSection .layout-component{
background:none;
}
#todayForYouSection .today-for-you-title{
padding-left:6px;
background:none;
}
#todayForYouSection .today-for-you-description{
padding-left:12px;
background:none;
}
#todayForYouSection .today-for-you-feature-list{
padding-left:0;
justify-content:center;
background:none;
}
#todayForYouSection .today-for-you-standalone{
background:none;
}
#todayForYouCreate{
justify-content:center;
text-align:center;
cursor:pointer;
}
#todayForYouCreate:hover{
text-shadow:0 0 10px rgba(255,236,190,.75);
}


.collection-card{

display:block;

padding:22px 24px;

text-align:left;

background-color:transparent;

background-position:center;

background-size:100% 100%, 100% 100%;

background-repeat:no-repeat;

border:0;

}



.collection-card::after{

content:"";

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

border-width:40px;border-style:solid;border-color:transparent;border-image:url("lifepalace/images/PalaceReportBG/Conner_FrameD.webp") 56 stretch;border-radius:0;

pointer-events:none;

}



#forbiddenHexagram{

background-image:
url("homepageImages/forbiddenHexgramBG.webp");

}



#community{

background-image:
url("homepageImages/joinDiscordBG.webp");

}



.collection-card h3{

margin:0;

position:absolute;

left:24px;

top:22px;

color:#efe7d4;

font-family:"Times New Roman", serif;

font-size:24px;

font-weight:500;

letter-spacing:.1em;

line-height:1.1;

display:inline-block;

}



.collection-card p{

margin:0;

position:absolute;

left:24px;

top:64px;

color:#c9b99a;

font-size:16px;

line-height:1.45;

display:inline-block;

}



.collection-card a{

position:absolute;

left:24px;

bottom:20px;

color:#d6a84a;

font-size:15px;

font-weight:700;

letter-spacing:.08em;

text-decoration:none;

transform-origin:left center;

display:inline-block;

}

.feature-card :is(h3, p),
.collection-card :is(h3, p){
transform-origin:left center;
}



.collection-card a:hover{

color:#f0d58a;

text-decoration:none;

}



.social-links{

gap:18px;

justify-content:flex-end;

padding-left:12px;

background:rgba(0,0,0,.14);

}



.social-links a{

display:grid;

place-items:center;

width:20px;

height:20px;

color:#c9b99a;

text-decoration:none;

opacity:.82;

}



.social-links a:hover{

opacity:1;

filter:brightness(1.25);

text-decoration:none;

}



.social-links img{

display:block;

width:16px;

height:16px;

}



.footer-links{

/* 【補 299】使用者指示：footer 每條連結之間要稀疏一點。38 → 60。 */
gap:60px;

background:rgba(0,0,0,.14);

}



.footer-links a{

color:#c9b99a;

font-size:12px;

letter-spacing:.06em;

text-decoration:none;

}



.footer-links span{

color:#8f826d;

font-size:12px;

letter-spacing:.03em;

white-space:nowrap;

}



.footer-links a:hover{

color:#f0d58a;

text-decoration:none;

}



.copyright-text{

color:#8f826d;

font-size:12px;

letter-spacing:.03em;

background:rgba(0,0,0,.1);

justify-content:flex-start;

padding-left:8px;

}



.language-select{

gap:5px;

justify-content:center;

padding:0 10px;

background:rgba(0,0,0,.12);

}



.language-select img{

width:15px;

height:15px;

margin-right:4px;

opacity:.9;

}



.language-select button{

width:auto;

height:24px;

margin:0;

padding:0 10px;

border:1px solid rgba(226,196,131,.58);

border-radius:5px;

background:rgba(0,0,0,.35);

color:#efe7d4;

font-size:14px;

line-height:1;

letter-spacing:0;

white-space:nowrap;

}

.language-select button.is-active{

background:rgba(226,196,131,.9);

color:#171006;

border-color:#f5dda0;

box-shadow:0 0 10px rgba(226,196,131,.55);

font-weight:600;

}



.hidden{

display:none;

}
/* =====================================================
   Free Report Simulation Button
===================================================== */


#toggleReportButton,
#toggleDebugViewButton,
#toggleSectionLinesButton,
#toggleTextEditorButton{

position:fixed;


left:20px;

top:50%;


transform:translateY(-50%);


width:180px;

height:50px;


z-index:9999;


background:

rgba(0,0,0,.8);



border:

1px solid #e2c483;



color:

#e2c483;



cursor:pointer;



font-size:18px;


}



#toggleDebugViewButton{

top:calc(50% + 62px);

font-size:16px;

}



#toggleSectionLinesButton{

top:calc(50% + 124px);

font-size:16px;

}

#toggleTextEditorButton{

top:calc(50% + 186px);

font-size:16px;

}

/* 左侧调试按钮：默认隐藏，输入 456789 后显示 */
html:not([data-home-debug="1"]) #toggleReportButton,
html:not([data-home-debug="1"]) #toggleDebugViewButton,
html:not([data-home-debug="1"]) #toggleSectionLinesButton,
html:not([data-home-debug="1"]) #toggleTextEditorButton,
html:not([data-home-debug="1"]) #heroBgSwitcher{

display:none !important;

}



.hero-bg-switcher{

position:fixed;

left:20px;

top:calc(50% + 248px);

z-index:9999;

display:flex;

flex-direction:column;

gap:8px;

width:180px;

}

.text-style-editor{

position:fixed;

right:18px;

top:18px;

z-index:10000;

width:310px;

max-height:calc(100vh - 36px);

overflow:auto;

padding:14px;

border:1px solid rgba(226,196,131,.75);

background:rgba(7,6,5,.9);

color:#e2c483;

font-family:"Times New Roman", "Microsoft YaHei","PingFang SC",serif;

font-size:14px;

box-shadow:0 14px 40px rgba(0,0,0,.55);

}

.text-style-editor.hidden{

display:none;

}

/* Final divination module overrides: keep homepage text compression away from the embedded ritual UI. */
.divination-host #divinationModule {
  transform: none;
}

#divinationModule.lang-zh,
#divinationModule.lang-zh :is(button, label, span, p, h1, h2, h3, select, input) {
  font-family: KaiTi, STKaiti, "Kaiti SC", "楷体", ReportKaiTi, "Microsoft YaHei", "PingFang SC", serif !important;
}

#divinationModule .start-divination-button {
  width: auto;
  min-width: 210px;
  max-width: 280px;
  margin-left: 0;
  margin-right: 0;
}

#divinationModule .start-panel,
#divinationModule .question-panel,
#divinationModule .hud {
  left: 50%;
  transform: translateX(-50%);
}

#divinationModule #startDivinationButton.start-divination-button {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 130px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffe7a7 !important;
  font-size: 32px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-shadow:
    0 0 10px rgba(255, 220, 140, 0.82),
    0 0 28px rgba(214, 168, 74, 0.5) !important;
  animation: shell-start-breathe 2.2s ease-in-out infinite;
}

#divinationModule #startDivinationButton.start-divination-button[hidden] {
  display: none !important;
}

#divinationModule #startDivinationButton.start-divination-button:hover {
  background: transparent !important;
  color: #fff2c5 !important;
  animation-duration: 1.25s;
}

@keyframes shell-start-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.88;
    text-shadow:
      0 0 8px rgba(255, 220, 140, 0.62),
      0 0 22px rgba(214, 168, 74, 0.34);
  }

  50% {
    transform: scale(1.055);
    opacity: 1;
    text-shadow:
      0 0 14px rgba(255, 235, 170, 0.95),
      0 0 34px rgba(214, 168, 74, 0.62);
  }
}

.text-style-editor h3{

margin:0 0 12px;

font-size:18px;

font-weight:700;

letter-spacing:.06em;

}

.text-style-editor label{

display:grid;

grid-template-columns:86px 1fr 48px;

align-items:center;

gap:8px;

margin:8px 0;

}

.text-style-editor select,
.text-style-editor input{

min-width:0;

height:26px;

border:1px solid rgba(226,196,131,.42);

background:rgba(0,0,0,.5);

color:#efe7d4;

font:inherit;

}

.text-style-editor input[type="color"]{

padding:0;

}

.text-style-editor button{

width:100%;

height:34px;

margin-top:10px;

border:1px solid rgba(226,196,131,.75);

background:rgba(226,196,131,.14);

color:#e2c483;

font:inherit;

cursor:pointer;

}



.hero-bg-switcher button{

width:100%;

height:34px;

margin:0;

padding:0 12px;

border:1px solid #e2c483;

border-radius:0;

background:rgba(0,0,0,.72);

color:#e2c483;

font-size:15px;

cursor:pointer;

}



.hero-bg-switcher button.is-active{

background:rgba(226,196,131,.82);

color:#140f0b;

}



.hide-homepage-guides .homepage-bg{

display:none;

}



.hide-homepage-guides #app{

background-image:none;

}



.hide-homepage-guides .layout-component,
.hide-homepage-guides .hero-copy-inner{

border-color:transparent;

}



.hide-section-lines .layout-section{

border-color:transparent;

}

body.show-hero-text-boxes .hero-copy h1,
body.show-hero-text-boxes .hero-copy h2,
body.show-hero-text-boxes .hero-copy p,
body.show-hero-text-boxes #heroTitle,
body.show-hero-text-boxes #heroSubtitle,
body.show-hero-text-boxes #heroBodyCopy,
body.show-hero-text-boxes #heroCTA,
body.show-hero-text-boxes #heroNote{

outline:1px solid rgba(255,80,80,.9);
outline-offset:0;

}

body.show-hero-text-boxes .hero-copy-inner{

outline:1px dashed rgba(80,180,255,.95);
outline-offset:0;

}

body.show-hero-text-boxes .white-svg-title{

outline:1px solid rgba(120,255,140,.95);
outline-offset:0;

}

/* =====================================================
   Expand Animation
===================================================== */


#freeReportSection{


transition:

opacity 1.6s ease,
transform 1.6s ease;


}



#featureBanners,
#oracleBannersSection,
#todayForYouSection,
#collectionSection,
#footerSection{


transition:

transform 1.6s ease;


}

#featureBanners,
#oracleBannersSection,
#todayForYouSection,
#collectionSection,
#footerSection {

background-color:transparent;
box-shadow:none;

}








/* ===== Text Style Editor v2 ===== */
.text-style-editor .tse-langs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin:6px 0 10px;
}
.text-style-editor .tse-lang{
  padding:2px 0;
  font-size:10px;
  text-align:center;
  border:1px solid rgba(226,196,131,.35);
  background:rgba(226,196,131,.08);
  color:#d9bc82;
  border-radius:999px;
  cursor:pointer;
}
.text-style-editor .tse-lang.is-active{
  background:#e2c483;
  color:#17120b;
  border-color:#e2c483;
}
.text-style-editor .tse-actions{
  display:flex;
  gap:6px;
  margin:0 0 10px;
}
.text-style-editor .tse-actions button{
  flex:1;
  font-size:11px;
  padding:5px 4px;
}
.text-style-editor .tse-groups{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.text-style-editor details.tse-group{
  border:1px solid rgba(226,196,131,.22);
  border-radius:8px;
  padding:6px 8px;
  background:rgba(226,196,131,.04);
}
.text-style-editor details.tse-group summary{
  cursor:pointer;
  color:#f0d9a6;
  font-size:12px;
  user-select:none;
  margin-bottom:4px;
}
.text-style-editor .tse-row{
  display:grid;
  grid-template-columns:74px minmax(60px,1fr) 56px 24px;
  gap:5px;
  align-items:center;
  margin:4px 0;
}
.text-style-editor .tse-row label{
  font-size:11px;
  color:#cbb17c;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.text-style-editor .tse-row input[type="range"]{
  width:100%;
  padding:0;
}
.text-style-editor .tse-row input[type="number"]{
  width:100%;
  padding:2px 3px;
  font-size:11px;
}
.text-style-editor .tse-row select{
  width:100%;
  font-size:11px;
  padding:2px;
}
.text-style-editor .tse-row input[type="color"]{
  width:100%;
  height:22px;
  padding:0;
}
.text-style-editor .tse-reset{
  width:22px;
  height:22px;
  padding:0;
  font-size:13px;
  line-height:1;
  border:1px solid rgba(226,196,131,.4);
  background:rgba(226,196,131,.1);
  color:#e2c483;
  cursor:pointer;
  border-radius:5px;
}
.text-style-editor .tse-reset:hover{
  background:rgba(226,196,131,.3);
}

html:not([data-home-debug="1"]) .text-style-editor{display:none !important;}

/* Text Style Editor v2 topbar */
.text-style-editor .tse-fixed{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(7,6,5,.97);
  padding:2px 0 6px;
}
.text-style-editor h3{margin:0 0 6px;font-size:13px;}
.text-style-editor .tse-langs{
  gap:2px;
  margin:0 0 5px;
}
.text-style-editor .tse-lang{
  padding:1px 0;
  font-size:9px;
  line-height:1.25;
  border:1px solid rgba(226,196,131,.25);
  border-radius:3px;
  margin:0;
}
.text-style-editor .tse-actions{margin:0 0 6px;}
.text-style-editor .tse-actions button{padding:3px 4px;font-size:10px;}

.text-style-editor .tse-file{
  font-size:10px;
  color:#9ec7e0;
  font-family:Consolas,monospace;
  padding:2px 4px;
  margin:0 0 6px;
  border:1px dashed rgba(120,180,255,.4);
  border-radius:4px;
  background:rgba(20,30,45,.45);
  cursor:pointer;
  word-break:break-all;
}
/* 每语言正文衬线（页面级补强） */
html[lang="ja"] body, html[lang="ja"] p, html[lang="ja"] li, html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3,
html[lang="ja"] input, html[lang="ja"] button, html[lang="ja"] select, html[lang="ja"] textarea {
  font-family: "NotoSerifJP", "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
}
html[lang="ko"] body, html[lang="ko"] p, html[lang="ko"] li, html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3,
html[lang="ko"] input, html[lang="ko"] button, html[lang="ko"] select, html[lang="ko"] textarea {
  font-family: "NotoSerifKR", Batang, "AppleMyungjo", "Times New Roman", serif;
}
/* 中文正文统一楷体（首页/龟壳 UI 兜底） */
html[lang="zh"] body, html[lang="zh"] p, html[lang="zh"] li, html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3,
html[lang="zh"] input, html[lang="zh"] button, html[lang="zh"] select, html[lang="zh"] textarea {
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "楷體", "ReportKaiTi", "Times New Roman", serif;
}

/* ==========================================================================
   2026-09-19：【補 300】首頁各語字族與字級倍率，收進 CSS 一處。
   ------------------------------------------------------------
   原本這些值寫在 OVERRIDE-homepage-textstyle-<語言>.json（每語一支檔案，
   首頁每次載入都要再抓一支 JSON 回來蓋）。使用者指示：不要這種 json 覆蓋，
   字族／字級留在 CSS，橫向塞不下統一交給「入框處理」（homepage-fitx.js）。
   ．字族：用 html[lang="…"] 改 #homeLayout 的 font-family，子元素沒有
     inline font-family 時就繼承下去（layout-editor 只對「非預設字族」寫 inline）。
   ．字級倍率：--home-fs 是這一語言的整體倍率、--home-fs-<群組> 是個別覆寫；
     homepage-layout-editor.js 套字級時乘上去。
     （漢字／假名／諺文在同樣 px 下看起來比較小，所以中日韓要放大；
       這是 2026-09 各語 JSON 裡原本就有的比例，只是搬家，不是新決定。）
   ========================================================================== */
#homeLayout{
font-family:"Times New Roman", serif;
}

html[lang="zh"] #homeLayout{
font-family:KaiTi, STKaiti, "Kaiti SC", 楷體, ReportKaiTi, "Times New Roman", serif;
}

html[lang="ja"] #homeLayout{
font-family:"NotoSerifJP", "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
}

html[lang="ko"] #homeLayout{
font-family:"NotoSerifKR", Batang, "AppleMyungjo", "Times New Roman", serif;
}

html[lang="ar"] #homeLayout{
font-family:"NotoNaskhArabic", "Times New Roman", serif;
}

:root{
--home-fs:1;
}

html[lang="zh"]{
/* 舊 zh override 只放大了這 8 組，其餘維持基準級數，所以 --home-fs 保持 1。 */
--home-fs:1;
--home-fs-logoTitle:1.577;
--home-fs-heroTitle:1.65;
--home-fs-heroSubtitle:1.438;
--home-fs-heroBody:0.895;
--home-fs-heroCta:1.353;
--home-fs-navLinks:1.6;
--home-fs-authButtons:1.4;
--home-fs-bannerTitle:1.318;
}

html[lang="ja"]{
--home-fs:1;
--home-fs-heroTitle:1.35;
--home-fs-heroSubtitle:1.25;
--home-fs-navLinks:1.333;
}

html[lang="ko"]{
--home-fs:1;
--home-fs-heroSubtitle:1.25;
--home-fs-navLinks:1.4;
--home-fs-heroNote:0.75;
}

html[lang="ar"]{
--home-fs:1;
--home-fs-navLinks:1.47;
}

/* ==========================================================================
   2026-09-14：footer 加了第四條連結（退款政策）之後的斷行修正。
   .footer-links a 原本沒有 white-space，長標籤（PRIVACY POLICY / TERMS OF
   SERVICE / УСЛОВИЯ ОБСЛУЖИВАНИЯ…）會在字間折成兩行，跟 © 那一格不一致。
   footer 的標籤一律不斷行——寧可整排比參考框寬，也不要一條變兩行。
   ========================================================================== */
.footer-links a{

white-space:nowrap;

}

/* ==========================================================================
   2026-09-15：區塊底圖圓角。底圖（含四周黑邊）用 border-radius 裁掉四角，
   讓角花鏤空處露出頁面底色，黑直角不再把角花壓平。::after 的金色角花是
   border-image，不吃 border-radius，所以角花本身仍是原本的直角造型。
   半徑只有一個變數，要調大調小改 --block-radius 即可。
   ========================================================================== */
:root{

--block-radius:30px;

}

#heroSection,

#oracleBannersSection,

#todayForYouSection,

.feature-card,

.collection-card{

border-radius:var(--block-radius);

}

/* ==========================================================================
   2026-09-15：區塊層次（投影／周邊暖光／內側暗角）。
   三個變數各自獨立，可以單獨關掉（設 none）：
     --block-shadow    對外投影，把區塊從頁面底色上抬起來
     --block-glow      周邊暖金光暈，深色底上用來把相鄰區塊分開
     --block-vignette  內側暗角，讓區塊本身有前後層
   【補 129】帶底改回 #050505 之後，投影在近黑底上等於不存在，
   所以 --block-shadow 與 --block-vignette 一起關掉
   （box-shadow 清單裡不能放 none，會讓整條宣告失效 → 用透明的 0 0 0 0）。
   ========================================================================== */
:root{

--block-shadow:0 0 0 0 rgba(0,0,0,0);

--block-glow:0 0 0 0 rgba(0,0,0,0);

--block-vignette:inset 0 0 0 0 rgba(0,0,0,0);

}

#heroSection,

#oracleBannersSection,

#todayForYouSection,

.feature-card,

.collection-card{

box-shadow:var(--block-glow), var(--block-shadow), var(--block-vignette);

}

/* ==========================================================================
   2026-09-15：頁面底色改用命宮報告的 BlueBG 平鋪。
   --page-bg-dim   壓暗量，0 = 原圖，1 = 全黑。
                   原本 .15；【補 128】改 .4。帶底【補 129】已改回 #050505，
                   這一階連同 #pageShell 的投影一起保留（使用者指定保留
                   「兩側大陰影」）。想再深：往 .55 走；想亮一點：往 .3 走。
   --page-bg-color 最底層色；BlueBG 只有 90% 不透明度，會透一點出來
   ========================================================================== */
:root{

--page-bg-color:#040e15;

--page-bg-dim:.4;

}

body{

background-color:var(--page-bg-color);

background-image:linear-gradient(rgba(0,0,0,var(--page-bg-dim)), rgba(0,0,0,var(--page-bg-dim))), url("lifepalace/images/PalaceReportBG/BlueBG.webp");

background-repeat:repeat, repeat;

background-position:left top, left top;

}

/* ==========================================================================
   2026-09-15：1200 帶的大暗底色（中間帶與兩側分界 ＋ 報告推開區塊時不穿幫）
   分界：#app 本身就是 1200 帶，給它不透明暗底；兩側留 body 的 BlueBG 平鋪，
        所以中間帶與兩側看得到分界。
   穿幫：#freeReportSection 展開時，featureBanners 以降會被 translateY 推開，
        推開動畫期間區塊之間那 20px 的縫原本是透明的，會透出底下正在滑動的
        報告面板。這裡讓這些區塊自己帶不透明底色，再用 0 0 0 10px 的
        box-shadow 把縫補滿（兩邊各 10px＝20px），縫就不會透出報告。
   變數：--band-fill        帶的暗底色（同時是補縫色）
         --band-fill-spread 補縫半徑（區塊間距 20px → 10px）
   ========================================================================== */
:root{

--band-fill:#050505;

--band-fill-spread:10px;

}

#app{

background-color:var(--band-fill);

}

/* 帶與兩側的分界：--band-fill 提亮到 #101a21 之後，兩側的 BlueBG
   （約 rgb(5,20,29)）與帶底（rgb(16,26,33)）擠在同一個亮度，分界消失。
   這裡讓 1200 帶往兩側投影：靠近帶的一圈先壓暗，再往外衰減，
   兩側的 BlueBG 紋理仍然保留。--page-bg-dim 同時再壓暗一階整體外側。 */
#pageShell{

box-shadow:0 0 18px rgba(0,0,0,.7), 0 0 54px rgba(0,0,0,.35);

}

#heroSection,

#oracleBannersSection,

#todayForYouSection{

background-color:var(--band-fill);

box-shadow:var(--block-glow), var(--block-shadow), var(--block-vignette), 0 0 0 var(--band-fill-spread) var(--band-fill);

}

#featureBanners,

#todayForYouBanners,

#collectionSection,

#footerSection{

background-color:var(--band-fill);

box-shadow:0 0 0 var(--band-fill-spread) var(--band-fill);

}


/* ==========================================================================
   2026-09-19：【補 300】首頁「入框藍框」檢視（開發工具；正式上線前整段刪除）
   ------------------------------------------------------------
   跟占卜完整報告同一套：實線＝不可折行、虛線＝可折行，橘色＝這一格被
   入框處理動過（收字距／壓 scaleX／降字級）。框上的小字可以直接選取複製。
   按鈕固定在畫面右側（1200 帶外面），會跟著捲動條跑。
   ========================================================================== */
#fitToggle{
position:fixed;
right:10px;
top:50%;
transform:translateY(-50%);
/* 站上有一條 button:not(.icon-button){width:100%} 的通用規則，
   這顆是開發用的小按鈕，要自己收成內容寬度，否則會被拉成整頁寬。 */
left:auto;
width:auto;
min-width:0;
margin:0;
z-index:9999;
cursor:pointer;
font-family:"Times New Roman", serif;
font-size:11px;
line-height:1.4;
letter-spacing:.06em;
text-align:center;
white-space:nowrap;
user-select:none;
color:#a9c6ff;
background:rgba(10,16,28,.86);
border:1px solid rgba(96,150,255,.45);
border-radius:5px;
padding:7px 6px;
opacity:.88;
}

#fitToggle:hover{
opacity:1;
}

#fitToggle b{
display:block;
font-weight:400;
color:#6f9dff;
font-size:10px;
letter-spacing:.06em;
}

#fitToggle.on{
color:#eef4ff;
border-color:#6fa8ff;
background:rgba(16,28,54,.95);
}

#fitToggle.on b{
color:#9dc0ff;
}

#fitLayer{
position:absolute;
left:0;
top:0;
width:0;
height:0;
z-index:9000;
pointer-events:none;
display:none;
}

body.fit-on #fitLayer{
display:block;
}

.fbox{
position:absolute;
box-sizing:border-box;
border:1px dashed rgba(96,150,255,.95);
}

.fbox.one{
border-style:solid;
border-color:rgba(96,150,255,.5);
}

.fbox em{
position:absolute;
left:-1px;
top:-15px;
font-style:normal;
font-family:"Times New Roman", serif;
font-size:10px;
line-height:14px;
letter-spacing:.04em;
color:#9dc0ff;
background:rgba(8,14,26,.92);
padding:0 4px;
white-space:nowrap;
pointer-events:auto;
user-select:text;
-webkit-user-select:text;
cursor:text;
}

.fbox.hit{
border-color:rgba(255,176,86,.95);
}

.fbox.hit em{
color:#ffc07a;
}

.fbox.hit.one{
border-color:rgba(255,176,86,.75);
}

html[dir="rtl"] #fitToggle{
left:auto;
right:10px;
}


/* ==========================================================================
   2026-09-19：【補 302】首頁版面座標與文字樣式（原本的兩支 json 已經拿掉）
   ------------------------------------------------------------
   使用者指示：「只保留文字內容 json，舊的樣式清理掉，重新做一次乾淨的入框處理。」
     · 版面座標   ← 原 layout-config-homepage.json（50 格）
     · 文字樣式   ← 原 text-style-config-homepage.json（23 格；字族／字級／顏色／
                     粗細／行高／字距／對齊／位移）
     · 原本那些手工 scaleX（0.8／0.9…）一律不搬過來：橫向塞不下交給
       homepage-fitx.js 的入框處理；inline SVG 白浮雕字（heroTitle、feature-card h3、
       today-for-you-title、collection-card h3）則由 setWhiteSvgTitle 依框寬自己壓。
     · 各語字級倍率＝--home-fs-<群組>（見下面「首頁 11 語字族與字級倍率」），
       所以字級寫成 calc(基準px * var(--home-fs-<key>,1))。
   ========================================================================== */

/* ── 版面座標（原 layout-config-homepage.json；x/y 相對於 #homeLayout 的 1200 帶） ── */
#headerSection{position:absolute;left:0px;top:0px;width:1200px;height:100px}
#logoBlock{position:absolute;left:2px;top:2px;width:286px;height:96px}
/* 【補 368】導覽加第 6 項（會員中心）之後，德語等長標籤的內容會頂到 570 的框而觸發 scaleX 壓扁，
   所以把框放寬到 660、同時把中心從 586 挪到 610（＝「logo 副標右緣 272」與「登入鈕左緣 949」
   這個帶狀的正中央）。導覽是 justify-content:center，內容看起來仍然置中，只是可書寫區域變大。 */
#mainNav{position:absolute;left:280px;top:34px;width:660px;height:34px}
#authButtons{position:absolute;left:948px;top:28px;width:250px;height:44px}
#heroSection{position:absolute;left:7px;top:120px;width:1186px;height:550px}
#heroTitle{position:absolute;left:25px;top:62px;width:425px;height:64px}
#heroSubtitle{position:absolute;left:95px;top:136px;width:260px;height:24px}
#heroBodyCopy{position:absolute;left:65px;top:188px;width:320px;height:84px}
#heroCTA{position:absolute;left:95px;top:350px;width:260px;height:54px}
#heroNote{position:absolute;left:45px;top:415px;width:360px;height:64px}
#divinationSpace{position:absolute;left:436px;top:2px;width:750px;height:550px}
#featureBanners{position:absolute;left:7px;top:690px;width:1186px;height:280px}
#ancientDivination{position:absolute;left:0px;top:0px;width:384px;height:280px}
#spiritGuardians{position:absolute;left:400px;top:0px;width:384px;height:280px}
#nameAwakening{position:absolute;left:800px;top:0px;width:384px;height:280px}
#freeReportSection{position:absolute;left:7px;top:690px;width:1186px;height:1610px}
#oracleBannersSection{position:absolute;left:7px;top:1550px;width:1186px;height:400px}
#bannerChime{position:absolute;left:25px;top:20px;width:200px;height:353px}
#bannerChimeTitle{position:absolute;left:49px;top:262px;width:152px;height:26px}
#bannerChimeText{position:absolute;left:49px;top:292px;width:152px;height:52px}
#bannerBrush{position:absolute;left:249px;top:20px;width:200px;height:353px}
#bannerBrushTitle{position:absolute;left:273px;top:262px;width:152px;height:26px}
#bannerBrushText{position:absolute;left:273px;top:292px;width:152px;height:52px}
#bannerDeco{position:absolute;left:493px;top:21px;width:200px;height:350px;
  /* 補 307：第 2、3 張之間的裝飾圖。原圖 200×350，格子就用原尺寸。
     補 308：這個 JPG 的最外一圈 1px 是淺灰（實測亮度約 13，往內立刻掉到 0），
     被 screen 疊上去就變成一圈很弱的邊框。clip-path 把外圍 1.5px 切掉，
     那圈邊就不見了，圖本身不必重做（日後重出圖也一樣有效）。 */
  background:url("homepageImages/HomePageBG_DecoA.webp") center center / 100% 100% no-repeat;
  clip-path:inset(1.5px);
  /* 原圖是「金線畫在黑底」的 JPG，直接貼會看到一個比頁面底色更黑的方塊；
     screen 讓黑底＝不作用（等於去背），金線疊上去發亮。 */
  mix-blend-mode:screen}
#bannerGuardian{position:absolute;left:737px;top:20px;width:200px;height:353px}
#bannerGuardianTitle{position:absolute;left:761px;top:224px;width:152px;height:64px}
#bannerGuardianText{position:absolute;left:761px;top:292px;width:152px;height:52px}
#bannerRedThread{position:absolute;left:961px;top:20px;width:200px;height:353px}
#bannerRedThreadTitle{position:absolute;left:985px;top:262px;width:152px;height:26px}
#bannerRedThreadText{position:absolute;left:985px;top:292px;width:152px;height:52px}
#todayForYouSection{position:absolute;left:7px;top:990px;width:1186px;height:280px}
#todayForYouTitle{position:absolute;left:65px;top:23px;width:360px;height:56px}
#todayForYouDescription{position:absolute;left:95px;top:66px;width:300px;height:40px}
#todayForYouFeatureList{position:absolute;left:101px;top:126px;width:82px;height:42px}
#todayForYouCreate{position:absolute;left:106px;top:181px;width:209px;height:35px}
#collectionSection{position:absolute;left:7px;top:1970px;width:1186px;height:280px}
#forbiddenHexagram{position:absolute;left:0px;top:0px;width:584px;height:280px}
#community{position:absolute;left:600px;top:0px;width:584px;height:176px}
#footerSection{position:absolute;left:7px;top:2270px;width:1186px;height:120px}
#socialLinks{position:absolute;left:118px;top:18px;width:160px;height:30px}
#footerLinks{position:absolute;left:160px;top:72px;width:900px;height:30px}
#languageSelect{position:absolute;left:340px;top:18px;width:740px;height:30px}
#todayForYouBanners{position:absolute;left:7px;top:1290px;width:1186px;height:240px}
#personalFengShui{position:absolute;left:0px;top:0px;width:584px;height:240px}
#innerCultivation{position:absolute;left:600px;top:0px;width:584px;height:240px}

/* ── 文字樣式（原 text-style-config-homepage.json；不含 scaleX） ──
   4 個 inline SVG 白浮雕字（#heroTitle、.feature-card h3、.today-for-you-title、
   .collection-card h3）字級固定用設計基準 px，不乘語言倍率：這幾個標題由
   setWhiteSvgTitle 依框寬自己壓縮，字級再放大只會被壓得更扁。 */
.site-title{font-size:calc(26px * var(--home-fs-logoTitle,1));color:#e7c982;font-weight:500;line-height:1.08;letter-spacing:0px;text-align:left}
#heroTitle{font-size:40px;color:#efe7d4;--white-svg-color:#efe7d4;font-weight:700;line-height:1.08;letter-spacing:0px;text-align:center;translate:0px 44px}
#heroSubtitle{font-size:calc(16px * var(--home-fs-heroSubtitle,1));color:#c8ac74;font-weight:500;line-height:1.25;letter-spacing:0px;text-align:center;translate:0px 50px}
#heroBodyCopy{font-size:calc(19px * var(--home-fs-heroBody,1));color:#c9b99a;font-weight:500;line-height:1.38;letter-spacing:0px;text-align:center;translate:0px 56px}
#heroCTA{font-size:calc(17px * var(--home-fs-heroCta,1));color:#e2c483;font-weight:500;line-height:1;letter-spacing:0px;text-align:center}
#heroNote{font-size:calc(16px * var(--home-fs-heroNote,1));color:#c9b99a;font-weight:500;line-height:1.45;letter-spacing:0px;text-align:center}
#mainNav a{font-size:calc(15px * var(--home-fs-navLinks,1));color:#c9b99a;font-weight:500;line-height:1;letter-spacing:0px;text-align:center;translate:0px 7px}
#authButtons button{font-size:calc(15px * var(--home-fs-authButtons,1));color:#e2c483;font-weight:500;line-height:1;letter-spacing:0px;text-align:center}
.feature-card h3{font-size:22px;color:#bbb19b;--white-svg-color:#bbb19b;font-weight:700;line-height:1.1;letter-spacing:2.6px;text-align:left}
.feature-card p{font-size:calc(16px * var(--home-fs-bannerBody,1));color:#a0947e;font-weight:500;line-height:1.45;letter-spacing:0px;text-align:left}
.feature-card a{font-size:calc(15px * var(--home-fs-bannerLink,1));color:#d6a84a;font-weight:500;line-height:1;letter-spacing:0px;text-align:left;translate:0px -1px}
.oracle-banner-title{font-size:calc(18px * var(--home-fs-artBannerTitle,1));color:#efe7d4;line-height:1.15;letter-spacing:0px;text-align:center}
.oracle-banner-text{font-size:calc(13px * var(--home-fs-artBannerText,1));color:#cec2a6;line-height:1.4;letter-spacing:0px;text-align:center}

/* 【補 376】2026-09-22 第 3 張 banner（The 28 Celestial Lord）＝兩行標題：
   第一行大字「28」、第二行名稱（各行文字在 data/ui.<語言>.json 的
   homepage.ancientArts.items[2] 的 num／name）。
   子元素字級一律用 em → 跟著母元素的 --home-fs-artBannerTitle 倍率一起縮放，
   橫向塞不下時 homepage-fitx.js 也只要壓母元素這一格。
   方框也從 152×26 長高到 152×64（top 262→224），下緣留在 288，
   跟下面那行說明（top 292）之間仍然是原本的 4px。 */
.oracle-banner-title.ob-split{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
line-height:1;
}

.oracle-banner-title.ob-split .ob-num{
font-size:2.05em;
line-height:1;
letter-spacing:0px;
}

.oracle-banner-title.ob-split .ob-name{
font-size:1em;
line-height:1.15;
letter-spacing:0px;
margin-top:1px;
}

.today-for-you-title{font-size:40px;color:#efe7d4;--white-svg-color:#efe7d4;font-weight:700;line-height:1.05;letter-spacing:2px;text-align:left}
.today-for-you-description{font-size:calc(15px * var(--home-fs-todayForYouBody,1));color:#d8ccb2;font-weight:500;line-height:1.3;letter-spacing:0px;text-align:left}
.today-for-you-feature-list span, .today-for-you-standalone{font-size:calc(17px * var(--home-fs-todayForYouFeatures,1));color:#c9b99a;font-weight:500;line-height:1;letter-spacing:0px;text-align:center}
.today-for-you-feature-list span:first-child{font-size:calc(20px * var(--home-fs-todayForYouExample,1));color:#e8d8ab;font-weight:500;line-height:1;letter-spacing:0px;text-align:center}
#todayForYouCreate{font-size:calc(17px * var(--home-fs-todayForYouCta,1));color:#2b2317;font-weight:500;line-height:1;letter-spacing:0px;text-align:center}
.collection-card h3{font-size:24px;color:#efe7d4;--white-svg-color:#efe7d4;font-weight:400;line-height:1.1;letter-spacing:5.9px;text-align:left;width:400px}
.collection-card p{font-size:calc(16px * var(--home-fs-collectionBody,1));color:#c9b99a;font-weight:400;line-height:1.45;letter-spacing:0px;text-align:left;translate:13px 0px}
.collection-card a{font-size:calc(15px * var(--home-fs-collectionLink,1));color:#d6a84a;font-weight:500;line-height:1;letter-spacing:0px;text-align:left;translate:13px -6px}
.footer-links a, .footer-links span{font-size:calc(12px * var(--home-fs-footerLinks,1));color:#c9b99a;font-weight:500;line-height:1;letter-spacing:0px;text-align:center;translate:0px -4px}
.language-select button{font-size:calc(12px * var(--home-fs-languageButtons,1));color:#efe7d4;font-weight:500;line-height:1;letter-spacing:0px;text-align:center}

/* ==========================================================================
   【補 524】3D 體驗區全螢幕鈕與全螢幕版面（2026-10-08）
   --------------------------------------------------------------------------
   一、按鈕（#spaceFullscreenButton）貼在 3D 舞台的右下角（2026-10-08 從右上角移下來）。
       為什麼從右上角搬到右下角：右上角緊貼著訪客／會員那條直排面板（.mock-bar），
       兩顆疊在同一側會互相搶視線；3D 畫面的右下角本來就是空的，
       鈕擺在那裡最不打擾 3D 主畫面，也跟右上角那組分開。
       它自己帶 .icon-button（38×38 圓形），所以站上那條
        button:not(.icon-button){width:100%} 不會把它拉成整頁寬；這裡只補定位、
       把寬度還原成內容寬度，並壓低平常的存在感（滑過或鍵盤聚焦才亮起來），
       免得蓋在 3D 畫面上太搶眼。
       順帶一提：#spaceFullscreenButton[hidden] 那一條是必要的——.icon-button 是
       作者樣式的 display:grid，會蓋過瀏覽器預設的 [hidden]{display:none}，
       不補這一條，「不支援全螢幕時把按鈕收起來」會收不掉。
   二、:fullscreen 那兩段也是必要的：.experience-stage 原本是 position:absolute，
       跟著 1200 版位跑。作者樣式一定蓋過瀏覽器預設，所以進全螢幕後如果不覆寫成
       fixed，畫面只會停在原本那一小格。同時把 --module-feather 歸零：首頁上那圈
       羽化是為了讓 3D 邊緣融進底色，全螢幕時四周不需要留白。
   三、html[dir="rtl"] 那條是阿拉伯語：比照 #fitToggle，把鈕鏡射到舞台左下角。
       它只改 left／right，top／bottom 沿用上面那一條（bottom:14px、top:auto），
       所以左右鏡射完還是貼著下緣。首頁目前不會把 html[dir] 設成 rtl，
       這條是替未來的 RTL 版首頁預留的，留著比事後補便宜。
   ========================================================================== */
#spaceFullscreenButton{
right:14px;
bottom:14px;
top:auto;
left:auto;
width:38px;
min-width:0;
margin:0;
padding:0;
z-index:60;
color:rgba(240,213,138,.92);
background:rgba(12,10,8,.52);
border-color:rgba(240,213,138,.34);
opacity:.6;
transition:opacity .18s ease,background .18s ease,border-color .18s ease;
}

#spaceFullscreenButton[hidden]{
display:none;
}

#spaceFullscreenButton:hover,
#spaceFullscreenButton:focus-visible{
opacity:1;
background:rgba(28,22,14,.88);
border-color:rgba(240,213,138,.82);
}

#spaceFullscreenButton .fs-icon{
display:block;
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}

/* 平常顯示「放大」圖示；進全螢幕後換成「縮回」圖示 */
#spaceFullscreenButton .fs-icon-exit{
display:none;
}

#spaceFullscreenButton[aria-pressed="true"] .fs-icon-enter{
display:none;
}

#spaceFullscreenButton[aria-pressed="true"] .fs-icon-exit{
display:block;
}

html[dir="rtl"] #spaceFullscreenButton{
right:auto;
left:14px;
}

#experienceStage:fullscreen,
#experienceStage:-webkit-full-screen{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
margin:0;
background:#050302;
--module-feather:0%;
}

#experienceStage::backdrop{
background:#050302;
}

/* 【補 524】手機上 #app 是用 transform:scale 把 1200 版縮到螢幕寬，
   3D 區本來就只佔一小角，全螢幕在這個尺寸下畫質與操作都不理想，
   所以這顆鈕只留給桌機（含筆電）。iOS Safari 沒有元素全螢幕，
   space-fullscreen.js 也會自己把鈕收掉。 */
@media (max-width: 640px){
#spaceFullscreenButton{
display:none;
}
}