/* ============================================================
   LunarStar | Sprint 1 Day 1 — Skeleton CSS
   No animation. No Three.js. No GSAP.
   ============================================================ */

/* ——— Reset ——— */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  background: #06070B;
  color: #F5F3EE;
  overflow-x: hidden;
}

/* ——— Color Tokens ——— */
:root {
  --bg:        #06070B;
  --bg-deep:   #0D1220;
  --gold:      #BFA06A;
  --gold-hover:#CCAE78;
  --warm:      #F5F3EE;
  --moon:      #E7E3DA;
  --moon-dark: #A8A29C;
  --border:    rgba(191,160,106,0.15);
  --glass-bg:  rgba(13,18,32,0.52);
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-card: 24px;
  --radius-btn:  12px;
  --radius-pill: 999px;
}

/* ——— Universe Background (shared, one per page) ——— */
#universe-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 45%, #0D1220 0%, #06070B 70%, #020308 100%);
  /* Nebula layer */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.10;
    background:
      radial-gradient(ellipse 55% 35% at 45% 40%, #7A6B8A 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 55% 60%, #4A5A6A 0%, transparent 75%);
  }
  /* Stars layer */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(0.5px 0.5px at 12% 8%,   rgba(245,243,238,0.7), transparent),
      radial-gradient(1px 1px at 23% 15%,       rgba(245,243,238,0.5), transparent),
      radial-gradient(1.5px 1.5px at 8% 22%,    rgba(245,243,238,0.8), transparent),
      radial-gradient(0.5px 0.5px at 35% 10%,   rgba(245,243,238,0.4), transparent),
      radial-gradient(1px 1px at 42% 5%,         rgba(245,243,238,0.6), transparent),
      radial-gradient(1px 1px at 55% 18%,        rgba(168,180,196,0.5), transparent),
      radial-gradient(0.5px 0.5px at 68% 8%,    rgba(245,243,238,0.4), transparent),
      radial-gradient(1.5px 1.5px at 78% 12%,   rgba(245,243,238,0.9), transparent),
      radial-gradient(0.5px 0.5px at 88% 22%,   rgba(245,243,238,0.5), transparent),
      radial-gradient(1px 1px at 95% 10%,       rgba(245,243,238,0.6), transparent),
      radial-gradient(0.5px 0.5px at 15% 35%,   rgba(245,243,238,0.5), transparent),
      radial-gradient(1px 1px at 28% 40%,        rgba(168,180,196,0.5), transparent),
      radial-gradient(1.5px 1.5px at 40% 32%,   rgba(245,243,238,0.8), transparent),
      radial-gradient(0.5px 0.5px at 52% 38%,   rgba(245,243,238,0.6), transparent),
      radial-gradient(1px 1px at 65% 28%,        rgba(245,243,238,0.5), transparent),
      radial-gradient(1.5px 1.5px at 73% 35%,   rgba(245,243,238,0.8), transparent),
      radial-gradient(1px 1px at 20% 55%,       rgba(245,243,238,0.5), transparent),
      radial-gradient(1.5px 1.5px at 45% 60%,   rgba(245,243,238,0.9), transparent),
      radial-gradient(0.5px 0.5px at 58% 52%,   rgba(245,243,238,0.5), transparent),
      radial-gradient(1px 1px at 70% 58%,        rgba(245,243,238,0.7), transparent),
      radial-gradient(1px 1px at 25% 78%,       rgba(245,243,238,0.6), transparent),
      radial-gradient(1.5px 1.5px at 50% 80%,   rgba(245,243,238,0.8), transparent),
      radial-gradient(0.5px 0.5px at 75% 85%,   rgba(168,180,196,0.5), transparent),
      radial-gradient(1.5px 1.5px at 44% 95%,   rgba(245,243,238,0.8), transparent),
      radial-gradient(1px 1px at 68% 92%,       rgba(245,243,238,0.6), transparent);
  }
}

/* HTML overlay — above bg, below sections */
#html-overlay {
  position: relative;
  z-index: 1;
}

/* ——— Navbar ——— */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 1.2s cubic-bezier(0.4,0,0.2,1), transform 1.2s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
body.nav-revealed #navbar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#navbar .logo {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold);
  text-decoration: none;
  margin-left: -20px;
}

#navbar nav a {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 12px;
  font-weight: 200;
  color: #A8A29C;
  text-decoration: none;
  margin-left: 24px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}

#navbar nav a.cta {
  color: var(--gold);
  border: 1px solid rgba(191,160,106,0.3);
  border-radius: var(--radius-btn);
  padding: 6px 14px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}
#navbar nav a.cta.logged-in,
.mobile-nav-panel a.cta.logged-in {
  color: #9BC38B;
  border-color: rgba(90,170,90,0.35);
  background: rgba(90,170,90,0.06);
}
#navbar nav a.my-link,
.mobile-nav-panel a.my-link {
  color: var(--gold-dim);
}
#navbar nav a.my-link:hover,
.mobile-nav-panel a.my-link:hover {
  color: var(--gold);
}

/* ——— Hamburger ——— */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px; z-index: 200;
}
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--gold); transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ——— Mobile Nav Overlay ——— */
.mobile-nav-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(6,7,11,.96); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.mobile-nav-panel a {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 14px; color: #A8A29C; text-decoration: none;
  font-weight: 200; letter-spacing: 0.5em; text-indent: 0.5em;
  transition: color .2s;
}
.mobile-nav-panel a:hover { color: var(--gold); }
.mobile-nav-panel a.cta {
  margin-top: 12px; color: var(--gold);
  border: 1px solid rgba(191,160,106,0.3);
  border-radius: var(--radius-btn);
  padding: 8px 24px;
}

/* ——— Responsive ——— */
@media (max-width: 767px) {
  #navbar nav { display: none; }
  .hamburger { display: flex; }
}

/* ——— Section Base ——— */
section {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

/* ——— Fixed Heights ——— */
/* Opening 盖在上：透明区透出下方 Universe 的球（缩短空距且不挡 Logo/CTA） */
#opening      { height: 100vh; overflow:hidden; position:relative; background: transparent; z-index: 2; }
#opening canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* ——— Day 4 Brand Reveal Overlay ——— */
.opening-brand-layer { position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; transform:translateY(-70px); }
.opening-logo {
  font-family:'Inter',sans-serif; font-weight:200; font-size:clamp(2.2rem,6.5vw,3.2rem);
  color:var(--gold); letter-spacing:0.42em; text-indent:0.42em; line-height:1.4;
  opacity:0; transform:translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.opening-logo.visible { opacity:1; transform:translateY(0); }
.opening-quote {
  font-family:'Noto Sans SC',sans-serif; font-weight:300; font-size:clamp(1.05rem,3vw,1.4rem);
  color:rgba(191,160,106,0.78); letter-spacing:0.35em; text-indent:0.35em;
  margin-top:clamp(16px,3vh,32px); max-width:420px; text-align:center; line-height:1.8;
  opacity:0; transform:translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.opening-quote.visible { opacity:1; transform:translateY(0); }
.opening-cta {
  position:absolute; left:50%; bottom:110px; transform:translateX(-50%) translateY(8px);
  padding:10px 40px; border:1.5px solid rgba(191,160,106,0.7);
  background:rgba(191,160,106,0.15); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(0.9rem,2.2vw,1.05rem);
  color:#E7E3DA; letter-spacing:0.18em; text-indent:0.18em; border-radius:100px; cursor:pointer;
  opacity:0;
  transition: opacity 0.6s ease, transform 0.6s ease, background 0.3s, border-color 0.3s;
  pointer-events:auto;
  z-index:11;
  text-shadow: 0 0 12px rgba(191,160,106,0.4);
}
.opening-cta.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.opening-cta:active { background:rgba(191,160,106,0.3); border-color:rgba(191,160,106,0.9); }

/* Skip — 底部中间 · 淡色 · Tap to enter */
.opening-skip {
  position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
  background:transparent; border:none; padding:10px 20px;
  font-family:'Inter',sans-serif; font-weight:300; font-size:11px;
  color:rgba(231,227,218,0.35); letter-spacing:0.24em; text-indent:0.24em;
  cursor:pointer; opacity:0; z-index:70;
  transition:opacity .8s ease, color .3s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.opening-skip.visible { opacity:1; }
.opening-skip:active { color:rgba(191,160,106,0.75); }
body.playing-opening { overflow:hidden; }


/* ——— Universe ——— */

#lunar-breath { height: 100vh; padding-top: 15vh; }
/* Scene 02 — 单屏 100vh，底部不再拖长 */
#universe {
  height: 100vh;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  z-index: 1;
}
#universe canvas {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  display: block; touch-action: pan-y;
  z-index: 1;
}

/* ——— Universe Info：底部安全区，星球上空完全留给 3D ———
   ui-ux-pro-max: minimal single-column / dark luxury
   中文优先 + Inter 200 / Noto Sans SC 300（站点标准，不用衬线） */
.universe-info {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: max(112px, calc(env(safe-area-inset-bottom, 0px) + 96px));
  transform: translateX(-50%);
  width: min(88vw, 320px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
  /* 轻微 halo，提升可读但不挡球 */
  text-shadow: 0 0 24px rgba(6, 7, 11, 0.55);
}
.universe-info.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.universe-info .ui-rule {
  width: 28px;
  height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(191, 160, 106, 0.55) 50%,
    transparent 100%
  );
}
/* 主标题：中文 */
.universe-info .ui-cn {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 5.5vw, 28px);
  color: var(--moon, #E7E3DA);
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1.5;
  margin: 0 0 6px;
}
/* 副标：英文大写微标签（金色弱对比） */
.universe-info .ui-en {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: clamp(10px, 2.8vw, 12px);
  color: rgba(191, 160, 106, 0.72);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 10px;
}
/* 描述：次级信息，极轻 */
.universe-info .ui-desc {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 200;
  font-size: clamp(11px, 3vw, 13px);
  color: rgba(231, 227, 218, 0.42);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1.7;
  max-width: 16em;
  margin: 0 auto;
}

/* ——— Dock：纯透明 + 精致触控点（≥44pt 热区）——— */
.universe-dock {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 4px;
  background: transparent;
  border: none;
}
.ud-planet {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(245, 243, 238, 0.16);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.ud-planet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.78;
  transition: opacity 0.25s ease;
}
/* 主星（塔罗）：dock 中更大 + 常驻金色标识 */
.ud-planet.main {
  width: 54px;
  height: 54px;
  border-color: rgba(191, 160, 106, 0.55);
  box-shadow: 0 0 0 1px rgba(191, 160, 106, 0.28), 0 0 20px rgba(191, 160, 106, 0.32);
}
.ud-planet.main img { opacity: 1; }
.ud-planet:hover img,
.ud-planet.active img { opacity: 1; }
.ud-planet.active {
  border-color: var(--gold, #BFA06A);
  transform: scale(1.16);
  box-shadow: 0 0 0 1px rgba(191, 160, 106, 0.25), 0 0 16px rgba(191, 160, 106, 0.28);
}
.ud-planet:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .universe-info,
  .ud-planet,
  .ud-planet img { transition: none; }
}
#reading {
  height: 100vh;
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(72px, env(safe-area-inset-top)) 24px max(40px, env(safe-area-inset-bottom));
  overflow: hidden;
}
#philosophy   { height: 100vh; }
#footer       { height: 70vh; }

/* ——— SVG Moon ——— */
.moon {
  border-radius: 50%;
  display: block;
  overflow: hidden;
}

.moon--230 { width: 230px; height: 230px; }
.moon--140 { width: 140px; height: 140px; }
.moon--260 { width: 260px; height: 260px; }
.moon--60  { width: 60px;  height: 60px; }
.moon--80  { width: 80px;  height: 80px; }

/* ——— Brand Typography (Scene 03 unified) ——— */
.brand-logo {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 200;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold);
  margin: var(--space-7) 0 var(--space-6);
  line-height: 1.4;
}

.brand-tagline {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-weight: 200;
  font-size: 12px;
  color: rgba(245,243,238,.55);
  margin-bottom: var(--space-7);
  max-width: 18ch;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1.8;
}

/* ——— Button ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: none;
}
.btn--primary {
  background: var(--gold);
  color: var(--bg);
}
.btn--glass {
  background: transparent;
  color: var(--warm);
  border: 1px solid rgba(245,243,238,0.10);
}
.btn--glass:hover { border-color: rgba(191,160,106,0.4); color: var(--gold); }

/* ——— Universe (Scene 03) ——— */
.universe-field {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

.planet {
  position: absolute;
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transform: translate(-50%, -50%);
}
.planet:hover { transform: translate(-50%, -50%) scale(1.1); }
.planet:active { transform: translate(-50%, -50%) scale(0.94); }

/* Planet sizes */
.planet--sec  { width: 68px;  height: 68px; }
.planet--sml  { width: 54px;  height: 54px; }

/* ——— Planet Icons ——— */
.planet-icon {
  width: 40%;
  height: 40%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

/* Per-planet icon colors */
.p1 .planet-icon { stroke: #C9A84C; }
.p2 .planet-icon { stroke: #9B8ABF; }
.p3 .planet-icon { stroke: #92B8E8; }
.p4 .planet-icon { stroke: #C4C0B5; }
.p5 .planet-icon { stroke: #C4A860; }
.p6 .planet-icon { stroke: #B0ACA5; }

/* ——— Individual Planet Themes (方案 B) ——— */

/* 塔罗 — Liquid Gold */
.p1 {
  background: radial-gradient(circle at 42% 38%, rgba(255,225,140,0.55) 0%, rgba(218,178,85,0.3) 30%, rgba(191,160,106,0.12) 65%, rgba(120,90,40,0.4) 100%);
  border: 1px solid rgba(218,178,85,0.35);
}

/* 神谕 — Amethyst */
.p2 {
  background: radial-gradient(circle at 42% 38%, rgba(180,150,220,0.5) 0%, rgba(130,110,180,0.28) 30%, rgba(95,78,135,0.14) 65%, rgba(50,35,80,0.45) 100%);
  border: 1px solid rgba(150,120,190,0.35);
}

/* 梦境 — Sky Opal */
.p3 {
  background: radial-gradient(circle at 42% 38%, rgba(190,225,255,0.5) 0%, rgba(156,210,255,0.3) 30%, rgba(120,180,230,0.14) 65%, rgba(40,80,130,0.4) 100%);
  border: 1px solid rgba(156,210,255,0.35);
}

/* 星盘 — Pearl */
.p4 {
  background: radial-gradient(circle at 42% 38%, rgba(255,250,240,0.45) 0%, rgba(245,243,238,0.25) 30%, rgba(215,210,200,0.12) 65%, rgba(140,135,125,0.4) 100%);
  border: 1px solid rgba(231,227,218,0.35);
}

/* 社群 — Honey Amber */
.p5 {
  background: radial-gradient(circle at 42% 38%, rgba(240,200,110,0.5) 0%, rgba(210,170,80,0.28) 30%, rgba(180,140,55,0.14) 65%, rgba(100,70,20,0.4) 100%);
  border: 1px solid rgba(210,170,80,0.35);
}

/* 探索 — Moonlit Silver */
.p6 {
  background: radial-gradient(circle at 42% 38%, rgba(230,225,215,0.45) 0%, rgba(210,205,195,0.25) 30%, rgba(180,175,165,0.12) 65%, rgba(100,96,90,0.4) 100%);
  border: 1px solid rgba(200,195,185,0.35);
}

/* ——— Planet B: Floating Labels ——— */
.planet-label {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.65;
}

.p1 .planet-label { color: #C9A84C; }
.p2 .planet-label { color: #A590C8; }
.p3 .planet-label { color: #9CC7FF; }
.p4 .planet-label { color: #E7E3DA; }
.p5 .planet-label { color: #C4A860; }
.p6 .planet-label { color: #B9B6AD; }

/* ——— Day 8 · Today's Oracle (#reading) ——— */
/* 一屏一事：未翻开牌背 + 一句 + 唯一主 CTA → oracle；禁多入口 / 禁翻牌 */
.ritual {
  width: min(100%, 420px);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.ritual-kicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
}
.ritual-kicker-cn {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 4.8vw, 26px);
  color: var(--moon, #E7E3DA);
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1.5;
}
.ritual-kicker-en {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: clamp(9px, 2.4vw, 11px);
  color: rgba(191, 160, 106, 0.55);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* 未翻开的牌背 — 真实 back.jpg + 金辉泛光 */
.ritual-back {
  width: min(38vw, 152px);
  aspect-ratio: 2 / 3;
  margin: 0 auto 20px;
  overflow: visible;
  background: transparent;
  position: relative;
  border-radius: 6px;
  /* 边界金线 + 多层外散金辉 */
  box-shadow:
    0 0 0 1px rgba(191, 160, 106, 0.20),
    0 0 18px rgba(191, 160, 106, 0.14),
    0 0 48px rgba(191, 160, 106, 0.10),
    0 0 100px rgba(191, 160, 106, 0.06);
  animation: cardPulseGlow 3.5s ease-in-out infinite;
}
/* 内腔自体泛光 — 从牌心向外辐射 */
.ritual-back::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: radial-gradient(
    ellipse 55% 50% at 50% 50%,
    rgba(232, 201, 122, 0.18) 0%,
    rgba(191, 160, 106, 0.08) 40%,
    rgba(191, 160, 106, 0.02) 70%,
    transparent 90%
  );
  pointer-events: none;
  z-index: 2;
  animation: cardInnerGlow 3.5s ease-in-out infinite;
}
/* 外扩金晕 — 牌外的柔光环 */
.ritual-back::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 16px;
  background: radial-gradient(
    ellipse 50% 45% at 50% 50%,
    rgba(232, 201, 122, 0.10) 0%,
    rgba(191, 160, 106, 0.05) 35%,
    rgba(191, 160, 106, 0.02) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  animation: cardOuterGlow 5s ease-in-out infinite;
}
.ritual-back-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.06) brightness(1.06);
  position: relative;
  z-index: 1;
  border-radius: 6px;
}

@keyframes cardInnerGlow {
  0%, 100% { opacity: 0.45; transform: scale(1.0); }
  50%      { opacity: 1.0;  transform: scale(1.015); }
}

@keyframes cardOuterGlow {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1.0; }
}

@keyframes cardPulseGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(191, 160, 106, 0.20),
      0 0 18px rgba(191, 160, 106, 0.14),
      0 0 48px rgba(191, 160, 106, 0.10),
      0 0 100px rgba(191, 160, 106, 0.06);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(232, 201, 122, 0.38),
      0 0 28px rgba(232, 201, 122, 0.26),
      0 0 68px rgba(232, 201, 122, 0.18),
      0 0 140px rgba(232, 201, 122, 0.10);
  }
}}

/* 密封态文案 — 不揭晓今日牌名 */
.ritual-sealed-cn {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 5vw, 26px);
  color: rgba(231, 227, 218, 0.78);
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1.4;
  margin: 0 0 4px;
}
.ritual-sealed-en {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: clamp(10px, 2.6vw, 12px);
  color: rgba(191, 160, 106, 0.45);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  line-height: 1.4;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.ritual-quote-cn {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 3.6vw, 16px);
  color: rgba(231, 227, 218, 0.72);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  line-height: 1.8;
  max-width: 16em;
  margin: 0 auto 6px;
}
.ritual-quote-en {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: clamp(10px, 2.6vw, 12px);
  color: rgba(191, 160, 106, 0.38);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1.6;
  max-width: 18em;
  margin: 0 auto 28px;
}

/* 全站最大主 CTA */
.ritual-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: min(88vw, 300px);
  padding: 16px 36px;
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 3.8vw, 16px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-decoration: none;
  color: #06070B;
  background: var(--gold, #BFA06A);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.35s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 0 rgba(191, 160, 106, 0);
}
.ritual-cta:hover {
  background: var(--gold-hover, #CCAE78);
  box-shadow: 0 0 28px rgba(191, 160, 106, 0.45), 0 0 56px rgba(191, 160, 106, 0.18);
  transform: translateY(-1px);
}
.ritual-cta:active { transform: scale(0.98); }
.ritual-cta.is-leaving {
  opacity: 0.35;
  transform: scale(1.02);
  box-shadow: 0 0 48px rgba(191, 160, 106, 0.55);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.55s ease;
}

.ritual-time {
  margin-top: 14px;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: rgba(245, 243, 238, 0.32);
  line-height: 1.5;
}
.ritual-footer {
  margin-top: 28px;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: rgba(231, 227, 218, 0.18);
  line-height: 1.6;
}

#reading.ritual-section-leaving {
  opacity: 0.15;
  transition: opacity 0.55s ease;
}

/* ——— Scene 06 · 塔罗人格测试 ——— */
#philosophy {
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vh, 100px) 20px clamp(80px, 12vh, 100px);
}

/* ——— Orbit Carousel (Scene 03) ——— */
.orbit-label-wrap {
  position: absolute; z-index: 5; pointer-events: none;
  left: 50%; top: 78%; transform: translate(-50%, -50%);
  text-align: center; text-shadow: 0 0 18px rgba(0,0,0,.55);
}
.orbit-label-en {
  font-family: 'Inter', sans-serif; font-weight: 200;
  font-size: 36px; letter-spacing: .42em; color: #F5F3EE; margin-bottom: 2px;
  text-indent: .42em; line-height: 1.4;
}
.orbit-label-cn {
  font-family: 'Noto Sans SC', sans-serif; font-weight: 300;
  font-size: 14px; letter-spacing: .35em; color: rgba(245,243,238,.7);
  text-indent: .35em; line-height: 1.8;
}
.orbit-dots {
  position: absolute; z-index: 5; display: flex; gap: 10px;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  left: 50%; transform: translate(-50%, 0);
}
.orbit-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(245,243,238,.2); transition: all .25s; cursor: pointer;
}
.orbit-dot.on { background: #F5F3EE; width: 16px; border-radius: 3px; }
.orbit-hint {
  position: absolute; z-index: 5;
  bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) - 4px));
  left: 50%; transform: translate(-50%, 0);
  font-family: 'Noto Sans SC', sans-serif; font-weight: 200;
  font-size: 9px; color: rgba(245,243,238,.2);
  letter-spacing: 0.5em; text-indent: 0.5em;
  pointer-events: none;
}

/* ——— Moon Phase (Scene 04) ——— */
.moon-phase {
  width: clamp(180px, 55vw, 300px);
  height: clamp(180px, 55vw, 300px);
  aspect-ratio: 1 / 1;        /* force 1:1 even if flex tries to shrink height */
  flex-shrink: 0;             /* prevent flex column from squishing into ellipse */
  border-radius: 50%;
  clip-path: circle(50%);     /* reliable iOS-Safari SVG clipping (overflow:hidden+br may fail) */
  -webkit-clip-path: circle(50%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(245,243,238,0.06);
}

.moon-phase-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 24px rgba(245,243,238,0.08));
}

.moon-phase-info {
  text-align: center;
  margin-top: var(--space-6);
  padding: 0 16px;
}

.moon-phase-section-label {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 10px; font-weight: 200;
  letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.45;
  margin-bottom: var(--space-2);
}

.moon-phase-name {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 200;
  color: var(--warm);
  letter-spacing: 0.5em; text-indent: 0.5em;
  margin-bottom: var(--space-3);
}

/* ——— Stats Row ——— */
.moon-phase-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: var(--space-5);
}

.moon-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.moon-stat-value {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 16px; font-weight: 200;
  color: var(--warm);
  letter-spacing: 0.25em; text-indent: 0.25em;
  opacity: 0.7;
}

.moon-stat-label {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 10px; font-weight: 200;
  letter-spacing: 0.5em; text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.35;
}

.moon-stat-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0.2;
}

/* ——— Info Cards ——— */
.moon-card {
  background: rgba(16,22,36,0.5);
  border: 1px solid rgba(245,243,238,0.06);
  border-radius: 12px;
  padding: 16px;
  margin: 0 auto var(--space-3);
  max-width: 340px;
  text-align: center;
}

.moon-card-label {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 9px; font-weight: 200;
  letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 8px;
}

.moon-card-text {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  font-size: 12px; font-weight: 200;
  color: rgba(245,243,238,0.7);
  letter-spacing: 0.12em; line-height: 1.8;
  margin: 0;
}

/* ——— Ritual Do / Don't ——— */
.moon-ritual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto var(--space-3);
}

.moon-ritual-col {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(16,22,36,0.5);
  border: 1px solid rgba(245,243,238,0.06);
  border-radius: 10px;
  padding: 12px;
}

.moon-ritual-badge {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 9px; font-weight: 200;
  letter-spacing: 0.42em; text-indent: 0.42em;
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
  margin-top: 1px;
}

.moon-ritual-badge--do {
  background: rgba(218,165,32,0.12);
  color: #C9A84C;
}

.moon-ritual-badge--dont {
  background: rgba(140,120,160,0.12);
  color: #A090B8;
}

.moon-ritual-text {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 12px; font-weight: 200;
  line-height: 1.6;
  color: rgba(245,243,238,0.55);
  letter-spacing: 0.12em;
}

/* ——— Next Phase ——— */
.moon-phase-next {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 11px; font-weight: 200;
  letter-spacing: 0.5em; text-indent: 0.5em;
  color: rgba(245,243,238,0.35);
  margin-top: var(--space-2);
}

/* ——— Footer ——— */
#footer {
  justify-content: space-between;
  padding: clamp(80px, 15vh, 140px) 24px 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.footer-logo {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 200;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--gold);
  text-decoration: none;
}

.footer-tagline {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,243,238,0.4);
  margin: 0;
}

.footer-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191,160,106,0.4), transparent);
  margin: 40px auto;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: clamp(48px, 10vw, 120px);
  text-align: left;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-col h4 {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 10px; font-weight: 200;
  letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 6px;
}

.footer-col a,
.footer-socials a {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 12px; font-weight: 200;
  color: rgba(245,243,238,0.55);
  text-decoration: none;
  letter-spacing: 0.42em; text-indent: 0.42em;
  transition: color 250ms ease;
}

.footer-col a:hover,
.footer-socials a:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-copy {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 10px; font-weight: 200;
  color: rgba(245,243,238,0.35);
  letter-spacing: 0.5em; text-indent: 0.5em;
  margin: 0;
}

.footer-socials {
  display: flex;
  gap: 24px;
}

.footer-socials a {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 11px; font-weight: 200;
  letter-spacing: 0.42em; text-indent: 0.42em;
}

@media (max-width: 640px) {
  #footer { padding: 64px 24px 32px; }
  .footer-nav { gap: 36px; }
  .footer-col h4 { font-size: 10px; }
  .footer-col a { font-size: 13px; }
  .footer-divider { margin: 28px auto; }
}

/* ——— Responsive ——— */
@media (min-width: 768px) {
  .brand-logo { font-size: 56px; letter-spacing: 0.25em; }
  .brand-tagline { font-size: 32px; }
  .universe-field { max-width: 460px; }
  .planet--sec  { width: 90px;  height: 90px; }
  .planet--sml  { width: 70px;  height: 70px; }
  .ritual { width: min(100%, 440px); }
  .ritual-back { width: 168px; }
  .ritual-cta { min-width: 320px; }
}

@media (min-width: 1024px) {
  .moon--230 { width: 280px; height: 280px; }
  .moon--260 { width: 320px; height: 320px; }
  .universe-field { max-width: 520px; }
  .brand-logo { font-size: 64px; }
}

@media (min-width: 1440px) {
  .moon--230 { width: 320px; height: 320px; }
  .moon--260 { width: 360px; height: 360px; }
  .universe-field { max-width: 600px; }
  .planet--sec  { width: 110px; height: 110px; }
  .planet--sml  { width: 85px;  height: 85px; }
}

/* ——— Accessibility ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }