/* ============================================================
   JUE 珏 — 星座道馆独立排版 (halls/constellation.css)
   星空 · 十二宫 —— 蓝紫夜空 / 星轨 / 星点连线
   仅星座道馆首页 (home-constellation.ejs) 时由 header 引入。
   ============================================================ */

/* ================= Hero · 星空命轨 ================= */
.hz-hero {
  position: relative;
  min-height: 100svh; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: calc(var(--nav-h) + 3rem) 1.5rem 4rem;
  background:
    radial-gradient(55% 44% at 50% 18%, rgba(183,140,255,.20), transparent 62%),
    radial-gradient(70% 55% at 84% 92%, rgba(74,58,138,.38), transparent 66%),
    radial-gradient(60% 50% at 10% 86%, rgba(130,110,220,.28), transparent 62%),
    linear-gradient(180deg, #1b1432 0%, #16102a 46%, #120c22 78%, #0e0918 100%);
}
/* 星空星点 */
.hz-stars {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(235,222,255,.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 28% 12%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 42% 32%, rgba(216,196,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 58% 18%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 72% 28%, rgba(235,222,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 86% 14%, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 18% 62%, rgba(226,214,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 66% 70%, rgba(222,208,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 82% 58%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 52% 88%, rgba(235,222,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 90% 84%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 8% 88%, rgba(226,214,255,.7) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 96% 40%, rgba(226,214,255,.7) 50%, transparent 52%);
  opacity: .8;
}
/* 星轨大环（十二宫轮） */
.hz-orbit {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 88vmax; height: 88vmax; transform: translate(-50%, -50%);
  opacity: .5; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 10%,
      rgba(190,140,255,.16) 10% 10.6%,
      transparent 10.6% 24%,
      rgba(190,140,255,.12) 24% 24.5%,
      transparent 24.5% 38%,
      rgba(190,140,255,.10) 38% 38.5%,
      transparent 38.5% 52%,
      rgba(190,140,255,.08) 52% 52.5%,
      transparent 52.5% 66%,
      rgba(190,140,255,.06) 66% 66.5%,
      transparent 66.5% 100%);
}
.hz-hero-inner { position: relative; z-index: 1; max-width: 44rem; }
.hz-gem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 6rem; height: 6rem; margin: 0 auto 1rem; border-radius: 50%;
  font-size: 2.6rem; color: #e6d9ff;
  background: linear-gradient(160deg, rgba(183,140,255,.28), rgba(74,58,138,.35)), #1b1432;
  border: 1px solid rgba(183,140,255,.55);
  box-shadow: 0 0 42px rgba(183,140,255,.32), inset 0 0 20px rgba(183,140,255,.14);
  text-shadow: 0 0 18px rgba(235,222,255,.6);
}
.hz-title {
  font-family: var(--zh); font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: .34em; color: var(--ink-text); margin: 1rem 0 .4rem;
}
.hz-lead { color: var(--muted); font-size: 1.06rem; line-height: 1.9; margin: .8rem auto 2rem; max-width: 34rem; }
.hz-cta { margin-top: .6rem; }
.hz-scroll {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: var(--muted-2); font-size: var(--fs-micro); letter-spacing: .3em;
}
.hz-hero .hall-picker { position: relative; z-index: 2; margin-top: 2.6rem; padding-top: 0; }

/* ================= 通用分区 ================= */
.hz-section { padding: var(--space-6) 0; }
.hz-h2 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--ink-text); line-height: 1.15; }
.hz-titleEn { font-family: var(--serif); font-style: italic; color: var(--accent-soft); font-size: 1.2rem; margin: .6rem 0 1rem; }

/* ================= 理念 · 星命签名 ================= */
.hz-split { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 3rem; align-items: center; }
@media (max-width: 1080px) { .hz-split { grid-template-columns: 1fr; gap: 2rem; } }
.hz-seal-wrap { display: flex; justify-content: center; }
.hz-seal {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 11rem; height: 11rem; border-radius: 50%;
  font-family: var(--zh); font-size: 3.6rem; color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(160deg, #e6d9ff, #b78cff 55%, #7a5cc0);
  filter: drop-shadow(0 0 26px rgba(183,140,255,.4));
}
.hz-seal::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(183,140,255,.45);
}
.hz-seal::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%;
  border: 1px solid rgba(183,140,255,.22);
}
.hz-split-body .lead { margin-top: 1rem; }

/* ================= 十二宫轮盘 · 12 星座卡 ================= */
.hz-signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
@media (max-width: 1080px) { .hz-signs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .hz-signs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hz-signs { grid-template-columns: 1fr; } }
.hz-sign {
  position: relative; text-align: center; padding: 1.6rem 1.2rem 1.4rem; overflow: hidden;
  border: 1px solid rgba(190,140,255,.26);
  background: linear-gradient(150deg, rgba(190,140,255,.10), transparent 55%), #1a1230;
  transition: transform .5s var(--ease-lux), border-color .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
.hz-sign:hover { transform: translateY(-5px); border-color: rgba(183,140,255,.7); box-shadow: 0 20px 44px -20px rgba(183,140,255,.4); }
.hz-sign-sym {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%; margin-bottom: .7rem;
  font-size: 1.4rem; color: #e6d9ff;
  border: 1px solid rgba(183,140,255,.5);
  background: radial-gradient(circle at 35% 30%, rgba(183,140,255,.3), transparent 70%);
  box-shadow: 0 0 18px rgba(183,140,255,.24);
}
.hz-sign-head { display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
.hz-sign-zh { font-family: var(--zh); font-size: 1.25rem; color: var(--ink-text); }
.hz-sign-en { font-family: var(--serif); font-style: italic; color: var(--accent-soft); font-size: .78rem; }
.hz-sign-date { display: block; color: var(--muted-2); font-size: var(--fs-micro); letter-spacing: .08em; margin: .35rem 0; }
.hz-sign-elem { display: inline-block; color: var(--accent); font-size: var(--fs-small); margin-bottom: .6rem; }
.hz-sign-text { color: var(--muted); font-size: var(--fs-small); line-height: 1.8; }
.hz-sign-link {
  display: inline-block; margin-top: .7rem; font-size: var(--fs-small);
  color: var(--accent-soft); letter-spacing: .1em;
  transition: color .3s var(--ease-lux);
}
.hz-sign-link:hover { color: var(--ink-text); }

/* ================= 四象星命 · 火土风水 ================= */
.hz-elems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
@media (max-width: 1080px) { .hz-elems { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hz-elems { grid-template-columns: 1fr; } }
.hz-elem { text-align: center; padding: 1.8rem 1.2rem; border: 1px solid rgba(190,140,255,.22); background: rgba(255,255,255,.015); }
.hz-elem-zh { display: block; font-family: var(--zh); font-size: 1.5rem; color: #e6d9ff; }
.hz-elem-en { display: block; font-family: var(--serif); font-style: italic; color: var(--accent-soft); font-size: .85rem; margin: .2rem 0 .6rem; }
.hz-elem-signs { display: block; color: var(--accent); font-size: var(--fs-small); }
.hz-elem-char { display: block; color: var(--muted); font-size: var(--fs-micro); letter-spacing: .1em; margin: .3rem 0; }
.hz-elem-text { color: var(--muted); font-size: var(--fs-small); line-height: 1.85; }

/* ================= 星轨十二站 ================= */
.hz-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; position: relative; }
@media (max-width: 1080px) { .hz-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hz-track { grid-template-columns: 1fr; } }
.hz-track-step { text-align: center; padding: 1.7rem 1.2rem; border: 1px solid rgba(190,140,255,.22); background: rgba(255,255,255,.015); }
.hz-track-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: .7rem;
  font-family: var(--zh); font-size: 1.05rem; color: #e6d9ff;
  border: 1px solid rgba(183,140,255,.5); border-radius: 50%;
  background: linear-gradient(160deg, rgba(183,140,255,.28), transparent);
  box-shadow: 0 0 20px rgba(183,140,255,.24);
}
.hz-track-name { font-family: var(--zh); font-size: 1.12rem; color: var(--ink-text); letter-spacing: .1em; margin-bottom: .4rem; }
.hz-track-name em { font-family: var(--serif); font-style: italic; color: var(--accent-soft); font-size: .8rem; margin-left: .3rem; }
.hz-track-text { color: var(--muted); font-size: var(--fs-small); line-height: 1.8; }
.hz-track-star {
  position: absolute; right: -1.2rem; top: 50%; transform: translateY(-50%);
  color: var(--accent-soft); font-size: 1.1rem; opacity: .6;
}

/* ================= 星座集市 ================= */
.hz-tags { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 1.6rem 0 2.4rem; }
.hz-tag {
  position: relative; padding: .5rem 1.2rem;
  border: 1px solid rgba(183,140,255,.4); border-radius: 2rem;
  color: var(--muted); font-size: var(--fs-small); letter-spacing: .1em;
  transition: all .4s var(--ease-lux);
}
.hz-tag::before {
  content: ""; position: absolute; inset: 3px; border-radius: 2rem;
  border: 1px dashed rgba(183,140,255,.2); pointer-events: none;
}
.hz-tag:hover { color: var(--ink-text); border-color: rgba(183,140,255,.8); box-shadow: 0 0 20px rgba(183,140,255,.24); }
.hz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 1080px) { .hz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hz-grid { grid-template-columns: 1fr; } }
/* 星点商品卡 */
.hz-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(190,140,255,.24); border-radius: 14px;
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .5s var(--ease-lux);
}
.hz-card::before {
  content: "✦"; position: absolute; right: .9rem; top: .7rem;
  color: rgba(183,140,255,.6); font-size: .9rem; pointer-events: none; z-index: 2;
}
.hz-card:hover { transform: translateY(-6px); border-color: rgba(183,140,255,.6); box-shadow: 0 24px 50px -24px rgba(183,140,255,.4); }

/* ================= 星语引句 ================= */
.hz-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 1080px) { .hz-quotes { grid-template-columns: 1fr; } }
.hz-quote { text-align: center; padding: 2rem 1.4rem; border-top: 1px solid rgba(183,140,255,.35); }
.hz-quote-text { font-family: var(--serif); font-size: 1.25rem; color: var(--ink-text); line-height: 1.7; }
.hz-quote-zh { display: inline-block; margin-top: .7rem; color: var(--accent); font-family: var(--zh); font-size: var(--fs-small); letter-spacing: .3em; }

/* ================= 星物札记 ================= */
.hz-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 1080px) { .hz-stories { grid-template-columns: 1fr; } }
.hz-story { padding: 1.8rem 1.4rem; border: 1px solid rgba(190,140,255,.2); background: rgba(255,255,255,.015); }
.hz-story-text { color: var(--muted); font-size: var(--fs-small); line-height: 1.9; }
.hz-story-title { display: block; margin-top: .9rem; color: var(--ink-text); font-family: var(--zh); }
.hz-story-title em { font-family: var(--serif); font-style: italic; color: var(--accent-soft); font-size: .8rem; margin-left: .3rem; }

/* ================= 藏家寄语 ================= */
.hz-collectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 1080px) { .hz-collectors { grid-template-columns: 1fr; } }
.hz-collector { padding: 1.8rem 1.4rem; border-left: 2px solid rgba(183,140,255,.5); background: rgba(255,255,255,.015); }
.hz-collector-quote { color: var(--ink-text); font-family: var(--serif); font-size: 1.1rem; line-height: 1.8; }
.hz-collector-name { display: block; margin-top: .9rem; color: var(--muted); font-size: var(--fs-small); }
.hz-collector-name em { font-style: normal; color: var(--accent-soft); margin-left: .3rem; }

/* ================= CTA · 星空入宫 ================= */
.hz-cta-band {
  position: relative; overflow: hidden; text-align: center;
  padding: var(--space-5) 0;
  background: linear-gradient(180deg, #1b1432, #16102a);
}
.hz-cta-stars {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 15% 30%, rgba(235,222,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 65% 25%, rgba(222,208,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 25% 85%, rgba(226,214,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 75% 85%, rgba(255,255,255,.55) 50%, transparent 52%);
  opacity: .6;
}
.hz-cta-inner { position: relative; z-index: 1; }
.hz-cta-inner .hz-h2 { margin: .8rem 0 1rem; }
.hz-cta-zh { font-family: var(--zh); letter-spacing: .3em; color: var(--muted); margin-bottom: 2rem; }