/* ─────────────────────────────────────────────────────────────────────────
   金胎不二 · 紺紙金泥之設色
   紺青為地，金泥為線，朱為點睛。題簽縱書，如奉一卷裝裱之曼荼羅。
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --kon: #0a0e1a;          /* 紺青之地 */
  --kon-deep: #060912;
  --gold: #d8b36a;         /* 金泥 */
  --gold-dim: #a8854a;
  --gold-faint: rgba(216, 179, 106, .28);
  --shu: #c4502f;          /* 朱 */
  --moon: #e9e2cf;         /* 月白 */
  --ink-soft: rgba(233, 226, 207, .62);
  --cjk: "LXGW WenKai TC", "Songti TC", serif;
  --latin: "Cormorant Garamond", Georgia, serif;
}

/* 悉曇真形（vendor 自帶，離線可用） */
@font-face {
  font-family: "Noto Sans Siddham";
  src: url("../vendor/fonts/NotoSansSiddham-Regular.ttf") format("truetype");
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--kon-deep);
  color: var(--moon);
  font-family: var(--cjk);
  -webkit-font-smoothing: antialiased;
}

#gl {
  position: fixed;
  inset: 0;
  display: block;
  cursor: grab;
  touch-action: none;
}
#gl:active { cursor: grabbing; }

/* 砂子 · 紙肌 */
#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 裱框 */
#frame {
  position: fixed;
  inset: 10px;
  pointer-events: none;
  z-index: 20;
  border: 1px solid var(--gold-faint);
  outline: 1px solid rgba(216, 179, 106, .1);
  outline-offset: 4px;
}

/* 題簽 · 縱書 */
#title {
  position: fixed;
  top: 34px;
  right: 36px;
  z-index: 22;
  writing-mode: vertical-rl;
  pointer-events: none;
  user-select: none;
}
#title h1 {
  font-size: 31px;
  font-weight: 500;
  letter-spacing: .42em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(216, 179, 106, .45);
}
#title p {
  margin-right: 12px;
  font-size: 12px;
  letter-spacing: .5em;
  color: var(--gold-dim);
  opacity: .85;
}

/* 界相 · 左上 */
#realm {
  position: fixed;
  top: 34px;
  left: 38px;
  z-index: 22;
  pointer-events: none;
  user-select: none;
}
#realm-name {
  display: block;
  font-size: 21px;
  letter-spacing: .34em;
  color: var(--ink-soft);
  transition: color .8s;
}
#realm-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--gold-dim);
  opacity: .7;
}
body.advaya #realm-name { color: var(--gold); text-shadow: 0 0 18px rgba(216,179,106,.5); }

/* 四鈕 · 縱書右列 */
#controls {
  position: fixed;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 22;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 24px);
  transition: gap .45s ease;
}
#controls button {
  writing-mode: vertical-rl;
  font-family: var(--cjk);
  font-size: 16px;
  letter-spacing: .3em;
  padding: 16px 9px;
  color: var(--ink-soft);
  background: rgba(10, 14, 26, .55);
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all .35s;
}
#controls button:hover {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(216, 179, 106, .25);
}
#controls button.lit {
  color: var(--kon-deep);
  background: var(--gold);
  border-color: var(--gold);
  text-shadow: none;
}

/* 法具欄之收展：#btn-fold 為樞，餘鈕可摺 */
#btn-fold {
  font-size: 13px;
  padding: 10px 7px;
  opacity: .72;
}
#btn-fold:hover { opacity: 1; }
#controls button:not(#btn-fold) {
  max-height: 220px;
  transition: max-height .45s ease, opacity .45s ease, transform .45s ease,
              padding .45s ease, border-color .45s ease,
              color .35s, background .35s, box-shadow .35s;
}
#controls.folded { gap: 0; }
#controls.folded button:not(#btn-fold) {
  max-height: 0;
  opacity: 0;
  transform: translateX(14px);
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  overflow: hidden;
  pointer-events: none;
}
#controls.folded #btn-fold { opacity: 1; }
/* 收摺之際，諸鈕魚貫而隱 */
#controls.folded button:nth-child(3) { transition-delay: .02s; }
#controls.folded button:nth-child(4) { transition-delay: .04s; }
#controls.folded button:nth-child(5) { transition-delay: .06s; }
#controls.folded button:nth-child(6) { transition-delay: .08s; }
#controls.folded button:nth-child(7) { transition-delay: .1s; }
#controls.folded button:nth-child(8) { transition-delay: .12s; }
#controls.folded button:nth-child(9) { transition-delay: .14s; }
#controls.folded button:nth-child(10) { transition-delay: .16s; }

/* 短屏之制：鈕形漸縮，俾十鈕不溢 */
@media (max-height: 860px) {
  #controls { gap: 9px; }
  #controls button {
    font-size: 14px;
    letter-spacing: .22em;
    padding: 11px 7px;
  }
  #btn-fold { font-size: 12px; padding: 8px 6px; }
}
@media (max-height: 700px) {
  #controls { gap: 6px; }
  #controls button {
    font-size: 12px;
    letter-spacing: .16em;
    padding: 7px 6px;
  }
  #btn-fold { font-size: 11px; padding: 6px 5px; }
}

/* 不二滑尺 */
#slider-wrap {
  position: fixed;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(520px, 62vw);
}
#slider-wrap .end {
  font-size: 15px;
  letter-spacing: .22em;
  color: var(--gold-dim);
  white-space: nowrap;
  user-select: none;
}
.slider-track {
  position: relative;
  flex: 1;
}
.slider-track .mid {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--gold-dim);
  opacity: .8;
  user-select: none;
}
.slider-track .mid::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  height: 8px;
  width: 1px;
  background: var(--gold-faint);
}
#lambda {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim));
  outline: none;
  cursor: pointer;
}
#lambda::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f4e6c0, var(--gold) 60%, var(--gold-dim));
  border: 1px solid rgba(244, 230, 192, .8);
  box-shadow: 0 0 14px rgba(216, 179, 106, .65);
}
#lambda::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold);
  border: 1px solid #f4e6c0;
  box-shadow: 0 0 14px rgba(216, 179, 106, .65);
}

/* 法語 */
#caption {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  width: min(620px, 78vw);
  text-align: center;
  pointer-events: none;
  transition: opacity .6s;
}
#caption.hidden { opacity: 0; }
#caption.pulse #caption-title { animation: rise .9s ease both; }
#caption.pulse #caption-text { animation: rise .9s .15s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#caption-head {
  font-size: 11px;
  letter-spacing: .5em;
  color: var(--shu);
  margin-bottom: 8px;
}
#caption-title {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 8px;
}
#caption-text {
  /* 悉曇殿後：唯漢字拉丁所缺之碼位（真言悉曇行）落於其上 */
  font-family: "LXGW WenKai TC", "Songti TC", "Noto Sans Siddham", serif;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  white-space: pre-line; /* 法語下可綴真言一行 */
}

/* 尊位牌 */
#info {
  position: fixed;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 23;
  width: 252px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 26px 24px 22px;
  background: rgba(8, 11, 20, .82);
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  backdrop-filter: blur(10px);
  transition: opacity .45s, transform .45s;
  /* 細捲軸，合金線暗玻璃之相 */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-faint) transparent;
}
#info::-webkit-scrollbar { width: 6px; }
#info::-webkit-scrollbar-thumb {
  background: var(--gold-faint);
  border-radius: 3px;
}
#info::-webkit-scrollbar-track { background: transparent; }
#info.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-14px);
}
#info-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: var(--gold-dim);
  font-size: 17px;
  cursor: pointer;
}
#info-bija {
  font-family: "Noto Sans Siddham", var(--latin);
  font-size: 52px;
  /* 悉曇懸於頭線，墨偏上；CSS 不能量墨界，故以行高與微移使其於行中視覺居中。
     此移幅微小，羅馬退字（無悉曇時）亦不至失衡。 */
  line-height: 1;
  display: block;
  padding-top: 6px;
  text-shadow: 0 0 24px currentColor;
}
#info-bija-roman {
  font-family: var(--latin);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  opacity: .75;
  margin-top: 2px;
}
#info-name {
  margin-top: 8px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--moon);
}
#info-sk {
  font-family: var(--latin);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .06em;
  color: var(--gold-dim);
  margin-top: 3px;
}
#info-family {
  display: inline-block;
  margin-top: 12px;
  padding: 2px 10px;
  font-size: 11.5px;
  letter-spacing: .3em;
  text-indent: .3em;
  border: 1px solid;
  border-radius: 999px;
}
#info-loc {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--gold-dim);
  line-height: 1.8;
}
#info-desc {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}
#info-mantra-sid {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--gold-faint);
  font-family: "Noto Sans Siddham", serif;
  font-size: 19px;
  color: var(--gold);
  line-height: 1.55;
  text-shadow: 0 0 14px rgba(216, 179, 106, .4);
}
#info-mantra {
  margin-top: 6px;
  font-family: var(--latin);
  font-size: 13px;
  font-style: italic;
  color: var(--gold-dim);
  line-height: 1.7;
}

/* 原典 · 詳情框中之歷史絹本投影（博物館壁牌之位） */
#info-genten {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--gold-faint);
}
#info-genten.hidden { display: none; }
#info-genten a { display: block; }
#info-genten-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  border-radius: 2px;
  background: rgba(0, 0, 0, .25);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .4);
  transition: filter .35s;
}
#info-genten a:hover #info-genten-img { filter: brightness(1.08); }
#info-genten figcaption {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
#info-genten-title { display: block; letter-spacing: .04em; }
#info-genten-credit {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gold-dim);
  text-decoration: none;
}
#info-genten-credit:hover { color: var(--gold); }

/* 原典帖 · 獨立陳列，與壇城零圖片之內核物理隔離 */
#genten-view {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  padding: 64px 6vw 72px;
  background: rgba(5, 7, 13, .94);
  backdrop-filter: blur(14px);
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}
/* visibility 隨淡出而隱：閉時退出 tab 序與輔助技術樹，淡出仍在 */
#genten-view.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
#genten-close {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 61;
  background: none;
  border: none;
  color: var(--gold-dim);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color .25s;
}
#genten-close:hover { color: var(--gold); }
#genten-view header { max-width: 680px; margin: 0 auto 40px; text-align: center; }
#genten-h {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--moon);
}
#genten-intro {
  margin-top: 14px;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--gold-dim);
}
#genten-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 26px;
  max-width: 1180px;
  margin: 0 auto;
}
.genten-card {
  width: 208px;
  display: flex;
  flex-direction: column;
}
.genten-card a { display: block; }
.genten-card img {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: contain;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  box-shadow: 0 3px 18px rgba(0, 0, 0, .45);
  transition: filter .3s, border-color .3s;
}
.genten-card a:hover img { filter: brightness(1.1); border-color: var(--gold-dim); }
.genten-card h3 {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--moon);
}
.genten-card p {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.genten-card .genten-credit {
  margin-top: 9px;
  font-family: var(--latin);
  font-size: 10.5px;
  letter-spacing: .07em;
  color: var(--gold-dim);
  text-decoration: none;
}
.genten-card .genten-credit:hover { color: var(--gold); }
@media (max-width: 560px) {
  #genten-view { padding: 56px 20px 64px; }
  .genten-card { width: 100%; max-width: 320px; }
}

/* 蒙眼之幕 */
#veil {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04060c;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
#veil.on { opacity: .97; }
#veil span {
  font-size: 22px;
  letter-spacing: .65em;
  text-indent: .65em;
  color: var(--gold-dim);
}

/* 證金剛身之光 */
#flash {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: radial-gradient(circle at 50% 46%,
    rgba(244, 230, 192, .92), rgba(216, 179, 106, .55) 40%, rgba(216, 179, 106, 0) 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s ease-out;
}
#flash.on { opacity: 1; transition: opacity .12s ease-in; }

/* 三語之擇 */
#langs {
  margin-top: 16px;
  display: flex;
  gap: 4px;
  pointer-events: auto;
}
#langs button {
  padding: 2px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--cjk);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: rgba(168, 133, 74, .55);
  cursor: pointer;
  transition: all .3s;
}
#langs button:hover { color: var(--gold); }
#langs button.active {
  color: var(--gold);
  border-color: var(--gold-faint);
}

/* 結緣之行 */
#bond-line {
  display: block;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--gold-faint);
  font-family: var(--cjk);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--gold-dim);
  cursor: pointer;
  pointer-events: auto;
  transition: color .3s;
}
#bond-line:hover { color: var(--gold); }
#bond-line.hidden { display: none; }

/* 取證 */
#info-card {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px 0;
  font-family: var(--cjk);
  font-size: 13.5px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--gold);
  background: rgba(216, 179, 106, .08);
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s;
}
#info-card:hover { background: var(--gold); color: var(--kon-deep); }
#info-card.hidden { display: none; }

/* 浮名 */
#tooltip {
  position: fixed;
  z-index: 24;
  padding: 4px 12px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--gold);
  background: rgba(8, 11, 20, .85);
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .2s;
}
#tooltip.hidden { opacity: 0; }

/* 提示 */
#hint {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(168, 133, 74, .55);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* 開卷 */
#loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--kon-deep);
  transition: opacity 1.4s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading .seed {
  font-size: 44px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--gold);
  text-shadow: 0 0 34px rgba(216, 179, 106, .6);
  animation: breathe 2.6s ease-in-out infinite;
}
#loading .sub {
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .5em;
  color: var(--gold-dim);
}
@keyframes breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 720px) {
  #title { top: 22px; right: 20px; }
  #title h1 { font-size: 23px; }
  #realm { top: 22px; left: 22px; }
  #controls { right: 20px; }
  #info { left: 16px; width: 218px; }
  #slider-wrap { width: 74vw; bottom: 30px; }
}