/* ============================================================
   JUE 珏 — Themes (五道馆专属氛围)
   玉石 · 木质 · 水晶 · 金银 · 钻石
   布局骨架共用一套（base/motion/shop 不变），这里只加"氛围与质感"。
   ============================================================ */

/* ============================================================
   1. 主题切换过渡 —— 换肤时的色彩渐变（平滑、不闪）
   ============================================================ */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.7s var(--ease-lux), border-color 0.7s var(--ease-lux), color 0.5s var(--ease-lux), box-shadow 0.7s var(--ease-lux) !important;
}

/* ============================================================
   2. 道馆切换器（导航）
   ============================================================ */
/* 道馆导航条（集市页顶部：五道馆入口） */
.hall-nav {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 2.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line-soft);
}
.hall-nav-label {
  font-size: var(--fs-micro); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted-2); margin-right: 0.6rem;
}
.hnav {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem; border: 1px solid var(--line-soft);
  color: var(--muted); transition: all 0.4s var(--ease-lux);
}
.hnav:hover { color: var(--ink-text); border-color: var(--line); }
.hnav.on {
  color: var(--text-on-accent); border-color: var(--accent); background: var(--accent);
}
.hnav-char { font-family: var(--zh); font-size: 1.05rem; line-height: 1; }
.hnav-zh { font-size: var(--fs-small); letter-spacing: 0.12em; }

.hall-switch { position: relative; display: inline-flex; }
.hall-current {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--glass-bg);
  transition: border-color 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), transform 0.4s var(--ease-lux);
}
.hall-current:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ghost-fill); }
.hall-char {
  font-family: var(--zh); font-size: 1.05rem; line-height: 1;
  color: var(--accent-soft);
  text-shadow: 0 0 12px var(--aurora-g1);
}
.hall-menu {
  position: absolute; top: calc(100% + 0.7rem); right: 0; z-index: 260;
  min-width: 11.5rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  padding: 0.4rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.35s var(--ease-lux), transform 0.35s var(--ease-lux), visibility 0.35s;
}
.hall-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.hall-opt {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.62rem 0.8rem; text-align: left; cursor: pointer;
  border-radius: 5px; font-family: var(--sans);
  color: var(--muted);
  transition: background 0.3s, color 0.3s;
}
.hall-opt:hover { background: var(--ghost-fill); color: var(--ink-text); }
.hall-opt.on { color: var(--accent-soft); }
.hall-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--muted-2);
}
.hall-opt[data-theme-key="jade"] .hall-dot { background: #9db9a5; }
.hall-opt[data-theme-key="wood"] .hall-dot { background: #d8a85c; }
.hall-opt[data-theme-key="crystal"] .hall-dot { background: #7fc6d8; }
.hall-opt[data-theme-key="constellation"] .hall-dot { background: #b78cff; }
.hall-opt-zh { font-family: var(--zh); font-size: 0.95rem; letter-spacing: 0.15em; }
.hall-opt-en { margin-left: auto; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted-2); }
.hall-opt.on .hall-opt-en { color: var(--accent-dim); }
@media (max-width: 1080px) {
  .hall-menu { position: fixed; top: calc(var(--nav-h) + 0.6rem); right: 0.9rem; }
}

/* ============================================================
   2b. 语言切换器（20 语）
   ============================================================ */
.lang-switch { position: relative; display: inline-flex; }
.lang-current {
  height: 2.15rem; padding: 0 0.7rem; border-radius: 6px;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 0.35rem;
  cursor: pointer; background: var(--glass-bg);
  color: var(--muted);
  font-size: 0.7rem; letter-spacing: 0.06em;
  transition: border-color 0.4s var(--ease-lux), color 0.4s var(--ease-lux);
}
.lang-current:hover { border-color: var(--accent); color: var(--ink-text); }
.lang-caret { font-size: 0.6rem; opacity: 0.7; }
.lang-menu {
  position: absolute; top: calc(100% + 0.7rem); right: 0; z-index: 261;
  width: 15.5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.1rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  padding: 0.35rem;
  max-height: 21rem; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.35s var(--ease-lux), transform 0.35s var(--ease-lux), visibility 0.35s;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-opt {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0.45rem 0.6rem; text-align: left; cursor: pointer;
  border-radius: 5px; font-family: var(--sans);
  color: var(--muted);
  transition: background 0.3s, color 0.3s;
  line-height: 1.25;
}
.lang-opt:hover { background: var(--ghost-fill); color: var(--ink-text); }
.lang-opt.on { color: var(--accent-soft); }
.lang-opt-name { font-size: 0.82rem; }
.lang-opt-en { font-size: 0.6rem; letter-spacing: 0.05em; color: var(--muted-2); text-transform: uppercase; }
.lang-opt.on .lang-opt-en { color: var(--accent-dim); }
@media (max-width: 1080px) {
  .lang-menu { position: fixed; top: calc(var(--nav-h) + 0.6rem); right: 0.9rem; }
}

/* ============================================================
   3. 择道 · 道馆下拉选择（首页：五道馆切换入口）
   ============================================================ */
.hall-picker {
  padding-top: calc(var(--nav-h) + var(--space-5));
  text-align: center;
}
.hall-picker .hp-eyebrow {
  color: var(--accent);
  letter-spacing: 0.34em; text-transform: uppercase;
  font-size: var(--fs-micro);
}
.hp-select { position: relative; display: inline-block; margin-top: 1.4rem; }
.hp-current {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  cursor: pointer; min-width: 16rem; text-align: left;
  transition: border-color 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), transform 0.4s var(--ease-lux);
}
.hp-current:hover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ghost-fill); }
.hp-char {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--zh); font-size: 1.3rem; color: var(--accent-soft);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  text-shadow: 0 0 14px var(--aurora-g1);
}
.hp-mid { display: inline-flex; flex-direction: column; gap: 0.15rem; }
.hp-name { font-family: var(--zh); font-size: 1.1rem; letter-spacing: 0.18em; color: var(--ink-text); }
.hp-en { font-size: var(--fs-micro); letter-spacing: 0.18em; color: var(--muted-2); text-transform: uppercase; }
.hp-arrow { margin-left: auto; color: var(--muted-2); transition: transform 0.35s var(--ease-lux); }
.hp-current[aria-expanded="true"] .hp-arrow { transform: rotate(180deg); }

.hp-menu {
  position: absolute; top: calc(100% + 0.8rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 240; width: 100%; min-width: 18rem;
  background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.75);
  padding: 0.45rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease-lux), transform 0.35s var(--ease-lux), visibility 0.35s;
}
.hp-menu.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hp-opt {
  display: flex; align-items: center; gap: 0.8rem; width: 100%;
  padding: 0.72rem 0.85rem; text-align: left; cursor: pointer;
  border-radius: 6px; font-family: var(--sans); color: var(--muted);
  transition: background 0.3s, color 0.3s;
}
.hp-opt:hover { background: var(--ghost-fill); color: var(--ink-text); }
.hp-opt.on { color: var(--accent-soft); }
.hp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted-2); }
.hp-opt[data-hall-key="jade"] .hp-dot { background: #9db9a5; }
.hp-opt[data-hall-key="wood"] .hp-dot { background: #d8a85c; }
.hp-opt[data-hall-key="crystal"] .hp-dot { background: #7fc6d8; }
.hp-opt[data-hall-key="constellation"] .hp-dot { background: #b78cff; }
.hp-opt-char { font-family: var(--zh); font-size: 1.05rem; width: 1.4rem; text-align: center; }
.hp-opt-zh { font-family: var(--zh); font-size: 0.95rem; letter-spacing: 0.15em; }
.hp-opt-en { margin-left: auto; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted-2); }
.hp-opt.on .hp-opt-en { color: var(--accent-dim); }
.hp-opt-go { font-size: 0.8rem; opacity: 0; transform: translateX(-4px); transition: opacity 0.3s, transform 0.3s; }
.hp-opt:hover .hp-opt-go { opacity: 1; transform: translateX(0); }

.hp-hint {
  margin-top: 1.6rem; color: var(--muted-2);
  font-size: var(--fs-micro); letter-spacing: 0.26em; text-transform: uppercase;
}

/* 移动端：下拉居中，宽度自适应 */
@media (max-width: 560px) {
  .hp-current { min-width: 13.5rem; }
  .hp-menu { min-width: 15rem; }
}

/* ============================================================
   4. 各道馆专属氛围叠加（非玉道馆的视觉差异）
   ============================================================ */

/* ---- 木质 · wood：米黄黄昏 + 木纹细线 ---- */
html[data-theme="wood"] #siteAurora {
  background:
    radial-gradient(44% 36% at 20% 16%, rgba(216,168,92,.16), transparent 62%),
    radial-gradient(48% 42% at 84% 82%, rgba(122,74,36,.18), transparent 64%),
    radial-gradient(64% 58% at 52% 44%, rgba(216,168,92,.08), transparent 72%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
/* 木纹纹理（全站细线，轻微） */
html[data-theme="wood"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035;
  background-image: repeating-linear-gradient(92deg, transparent 0 7px, rgba(216,168,92,.5) 7px 8px);
}

/* ---- 水晶 · crystal：白蓝毛玻璃 ---- */
html[data-theme="crystal"] body {
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(160,215,245,.55), transparent 60%);
  background-attachment: fixed;
}
/* 毛玻璃卡片：给常见面板加 backdrop blur 质感 */
html[data-theme="crystal"] .sheet,
html[data-theme="crystal"] .piece-card,
html[data-theme="crystal"] .board-tile,
html[data-theme="crystal"] .exhi-card,
html[data-theme="crystal"] .pillar {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--glass-line);
}
/* 冰晶微光 */
html[data-theme="crystal"] #siteAurora {
  background:
    radial-gradient(44% 36% at 20% 16%, rgba(150,210,245,.28), transparent 62%),
    radial-gradient(48% 42% at 84% 82%, rgba(120,190,235,.22), transparent 64%),
    radial-gradient(64% 58% at 52% 44%, rgba(170,225,250,.14), transparent 72%),
    linear-gradient(180deg, #e6f3fb 0%, #d6eaf8 100%);
}
html[data-theme="crystal"] .grain::after { opacity: 0.02; }

/* ---- 星座 · constellation：星夜紫光晕 + 紫星点 ---- */
html[data-theme="constellation"] #siteAurora {
  background:
    radial-gradient(44% 36% at 20% 16%, rgba(183,140,255,.22), transparent 62%),
    radial-gradient(48% 42% at 84% 82%, rgba(74,58,138,.24), transparent 64%),
    radial-gradient(64% 58% at 52% 44%, rgba(157,140,255,.12), transparent 72%),
    linear-gradient(180deg, #261c40 0%, var(--bg) 100%);
}
/* 紫星点微光 */
html[data-theme="constellation"] .star-drift { opacity: 1; }
html[data-theme="constellation"] .brand-mark {
  background: linear-gradient(120deg, #e0ccff, #fff 40%, #b78cff 60%, #e0ccff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(183,140,255,.45));
}
html[data-theme="constellation"] .btn { box-shadow: 0 0 0 1px rgba(183,140,255,.16), 0 8px 30px -12px rgba(183,140,255,.28); }

/* 禁用 JS 时：择道下拉等隐藏态内容可见 */
html:not(.js) .hall-menu { opacity: 1; visibility: visible; transform: none; position: static; }
html:not(.js) .hp-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); position: static; }
html:not(.js) .hp-select { display: block; }
html:not(.js) .hp-current { pointer-events: none; }