/* ========================================
   I CHING REALM — 沉浸式东方神秘科技
   ======================================== */

:root {
  --black: #05070c;
  --black-2: #090d17;
  --ink: #10141f;
  --gold: #d9b968;
  --gold-2: #8c6d31;
  --paper: #f4ecdc;
  --muted: rgba(244, 236, 220, .68);
  --soft: rgba(244, 236, 220, .12);
  --line: rgba(217, 185, 104, .24);
  --jade: #4f907b;
  --cyan: #66afbd;
  --red: #9d3341;
  --cinnabar: #c23c2e;
  --font-serif: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-han: "Ma Shan Zheng", "Noto Serif SC", serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --neon-cyan: #00e5ff;
  --neon-gold: #ffd54f;
  --neon-cyan-dim: rgba(0, 229, 255, .35);
  --neon-gold-dim: rgba(255, 213, 79, .25);
  --scanline-opacity: .035;
  --glow-cyan: 0 0 20px rgba(0, 229, 255, .4), 0 0 60px rgba(0, 229, 255, .15);
  --glow-gold: 0 0 20px rgba(255, 213, 79, .4), 0 0 60px rgba(255, 213, 79, .15);
  --transition-layer: 900ms var(--ease);
  --transition-slow: 1800ms var(--ease);
}

* { box-sizing: border-box; }
html { background: var(--black); overflow: hidden; }

body {
  margin: 0; min-height: 100vh; color: var(--paper);
  background:
    radial-gradient(circle at 50% 8%, rgba(102,175,189,.14), transparent 32%),
    radial-gradient(circle at 80% 80%, rgba(194,60,46,.04), transparent 40%),
    linear-gradient(180deg, var(--black) 0%, #08101e 45%, #0b0908 100%);
  font-family: var(--font-sans); overflow: hidden;
}

/* Grid overlay */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse at 50% 35%, black, transparent 74%);
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button { cursor: pointer; }

/* ========================================
   PERSISTENT LAYERS
   ======================================== */
#realm-canvas, #smoke-canvas, #seal-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
#smoke-canvas { z-index: 1; opacity: .6; }

/* Ink border — 墨边框 */
.ink-border {
  position: fixed; inset: 0; z-index: 51; pointer-events: none;
  border: 1px solid rgba(194,60,46,.12);
  box-shadow: inset 0 0 80px rgba(5,7,12,.5), inset 0 0 200px rgba(5,7,12,.3);
}

/* Scanline overlay */
.scanline-overlay {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,var(--scanline-opacity)) 2px, rgba(0,0,0,var(--scanline-opacity)) 4px);
  mix-blend-mode: multiply;
}
.scanline-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.12), rgba(217,185,104,.08), transparent);
  animation: scanline-sweep 7s linear infinite;
}
@keyframes scanline-sweep {
  0% { top: -3px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100vh; opacity: 0; }
}

/* Mouse glow */
.mouse-glow {
  position: fixed; width: 500px; height: 500px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(0,229,255,.06), rgba(194,60,46,.03) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: left 60ms ease-out, top 60ms ease-out;
  will-change: left, top;
}

/* ========================================
   TOPBAR
   ======================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 52;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 54px);
  background: linear-gradient(180deg, rgba(5,7,12,.92), rgba(5,7,12,.6) 80%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 21px; }
.brand__seal {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(194,60,46,.6);
  background: linear-gradient(145deg, rgba(194,60,46,.95), rgba(88,24,33,.95));
  color: var(--paper); font-family: var(--font-han); border-radius: 4px;
  box-shadow: 0 0 30px rgba(194,60,46,.34), 0 0 60px rgba(194,60,46,.12);
}
.topbar nav { display: flex; gap: clamp(14px, 3vw, 34px); color: rgba(244,236,220,.74); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.topbar nav a:hover { color: var(--neon-cyan); text-shadow: 0 0 12px rgba(0,229,255,.5); }
.state-indicator { color: var(--neon-cyan); font-family: var(--font-sans); font-size: 13px; letter-spacing: .2em; font-weight: 600; text-shadow: 0 0 12px rgba(0,229,255,.4); }

/* ========================================
   REALM LAYER SYSTEM
   ======================================== */
.realm-layer {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px clamp(18px, 4vw, 54px) 24px;
  overflow-y: auto; overflow-x: hidden;
  opacity: 0; visibility: hidden; transform: scale(1.03);
  transition: opacity var(--transition-layer), visibility 0s var(--transition-layer), transform var(--transition-layer);
  pointer-events: none;
}
.realm-layer.is-active {
  opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto;
  transition: opacity var(--transition-layer), visibility 0s 0s, transform var(--transition-layer);
  z-index: 2;
}
.realm-layer.is-exiting {
  opacity: 0; transform: scale(.97); pointer-events: none; z-index: 3;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
.kicker { margin: 0 0 14px; color: var(--gold); font-weight: 700; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; letter-spacing: 0; }
h1 { font-size: clamp(52px, 8vw, 118px); line-height: .9; text-shadow: 0 22px 80px rgba(0,0,0,.72); }
.han {
  display: block; margin-bottom: 10px; color: var(--gold);
  font-family: var(--font-han); font-weight: 400; letter-spacing: .08em;
  text-shadow: 0 0 20px rgba(217,185,104,.5), 0 0 60px rgba(217,185,104,.2), 0 0 100px rgba(194,60,46,.08);
}
.lead { max-width: 58ch; margin: 24px 0 0; color: var(--muted); font-family: var(--font-serif); font-size: clamp(19px, 2vw, 25px); line-height: 1.45; }

/* ========================================
   BUTTONS
   ======================================== */
.hero-actions, .closing-actions, .path-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  min-height: 50px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 4px; padding: 14px 22px;
  color: var(--paper); background: transparent; font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), background 260ms var(--ease), box-shadow 260ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  color: #090a0e; border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, #f0d68a, var(--gold) 45%, var(--gold-2));
  box-shadow: 0 18px 54px rgba(217,185,104,.22), var(--glow-gold);
}
.btn-gold:hover { box-shadow: 0 22px 64px rgba(217,185,104,.35), 0 0 40px rgba(255,213,79,.2); }
.btn-ghost { border-color: rgba(244,236,220,.24); background: rgba(244,236,220,.045); }
.btn-ghost:hover { border-color: rgba(0,229,255,.62); box-shadow: 0 0 20px rgba(0,229,255,.15); }
.btn-cinnabar {
  border-color: rgba(194,60,46,.4); background: linear-gradient(135deg, rgba(194,60,46,.15), rgba(194,60,46,.08));
  color: var(--cinnabar); letter-spacing: .1em;
  box-shadow: 0 0 30px rgba(194,60,46,.12);
}
.btn-cinnabar:hover {
  background: linear-gradient(135deg, rgba(194,60,46,.25), rgba(194,60,46,.12));
  box-shadow: 0 0 40px rgba(194,60,46,.25);
  transform: translateY(-2px);
}
.btn-cinnabar:disabled { opacity: .5; cursor: wait; transform: none; }
.btn-wide { width: 100%; }

/* ========================================
   LAYER 1: GATE
   ======================================== */
.gate-layout {
  display: grid; grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr);
  gap: clamp(28px, 6vw, 90px); align-items: center; width: min(1240px, 100%);
}
.gate-copy { transform: translateY(12px); }
.culture-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 34px; }
.culture-strip span {
  min-width: 76px; padding: 8px 12px; text-align: center;
  border: 1px solid rgba(194,60,46,.2); background: rgba(194,60,46,.04);
  border-radius: 4px; color: rgba(244,236,220,.86); font-family: var(--font-han); font-size: 18px;
  box-shadow: inset 0 0 24px rgba(194,60,46,.04);
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.culture-strip span:hover { border-color: var(--neon-cyan-dim); box-shadow: 0 0 16px rgba(0,229,255,.15), inset 0 0 24px rgba(0,229,255,.04); }

.gate-stage { min-height: clamp(430px, 70vh, 720px); display: grid; place-items: center; perspective: 1500px; }
.bagua-orbit {
  position: absolute; width: min(580px, 86vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(217,185,104,.2); animation: orbit 60s linear infinite;
  filter: drop-shadow(0 0 32px rgba(217,185,104,.12));
}
.bagua-orbit::before, .bagua-orbit::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  border: 1px solid rgba(0,229,255,.22);
}
.bagua-orbit::after { inset: 19%; border-color: rgba(194,60,46,.22); }
.bagua-orbit span {
  --a: calc(var(--i) * 45deg - 90deg); position: absolute; left: 50%; top: 50%;
  color: rgba(217,185,104,.9); font-family: var(--font-han); font-size: clamp(22px, 4vw, 34px);
  transform: rotate(var(--a)) translateX(min(290px, 43vw)) rotate(calc(var(--a) * -1));
  transform-origin: 0 0;
  text-shadow: 0 0 24px rgba(217,185,104,.45), 0 0 48px rgba(0,229,255,.15);
}

.stone-gate {
  position: relative; width: min(470px, 74vw); aspect-ratio: .72;
  transform-style: preserve-3d; filter: drop-shadow(0 55px 70px rgba(0,0,0,.75));
  transition: transform 1800ms var(--ease);
}
.stone-gate.is-open { transform: translateZ(220px) scale(1.08); }
.door {
  position: absolute; top: 4%; bottom: 8%; width: 50%; overflow: hidden;
  border: 1px solid rgba(194,60,46,.25);
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 20% 80%, rgba(0,0,0,.42)),
    radial-gradient(circle at 50% 35%, rgba(0,229,255,.08), transparent 28%),
    linear-gradient(180deg, #2b2d34, #141821 46%, #0c0e14);
  box-shadow: inset 0 0 55px rgba(0,0,0,.68), inset 0 0 100px rgba(194,60,46,.03);
  transition: transform 1900ms cubic-bezier(.18,.78,.18,1), filter 600ms var(--ease);
}
.door::before {
  content: ""; position: absolute; inset: 11%;
  border: 1px solid rgba(194,60,46,.15); border-radius: 48% 48% 12% 12%;
  background:
    radial-gradient(circle, transparent 31%, rgba(194,60,46,.12) 32% 33%, transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(194,60,46,.05) 27px 28px);
}
.door strong {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  color: rgba(217,185,104,.76); font-family: var(--font-han);
  font-size: clamp(80px, 10vw, 126px); font-weight: 400;
  text-shadow: 0 0 28px rgba(217,185,104,.28), 0 0 56px rgba(0,229,255,.12);
}
.door i { position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(0,229,255,.06), transparent 42%); }
.door-left { left: 0; border-radius: 48% 0 0 10% / 11% 0 0 6%; transform-origin: left center; }
.door-right { right: 0; border-radius: 0 48% 10% 0 / 0 11% 6% 0; transform-origin: right center; }
.stone-gate:hover .door, .stone-gate.is-open .door { filter: brightness(1.18); }
.stone-gate.is-open .door-left { transform: rotateY(-82deg) translateX(-18px); }
.stone-gate.is-open .door-right { transform: rotateY(82deg) translateX(18px); }

/* Portal Mandala — rotating Wuxing-Bagua when gate opens */
.portal-mandala {
  position: absolute; inset: 0; margin: auto;
  width: clamp(200px, 28vw, 320px); aspect-ratio: 1;
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.3) rotate(-90deg);
  transition: opacity 1400ms var(--ease), transform 1800ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.stone-gate.is-open .portal-mandala {
  opacity: 1; transform: scale(1) rotate(0deg);
}
/* Glow aura behind mandala */
.portal-mandala::before {
  content: ""; position: absolute;
  width: 140%; height: 140%; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(217,185,104,.25) 0%,
    rgba(194,60,46,.15) 30%,
    rgba(194,60,46,.06) 50%,
    transparent 70%);
  animation: portal-glow-pulse 3s ease-in-out infinite;
}
@keyframes portal-glow-pulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.12); opacity: 1; }
}
/* Decorative ring borders */
.portal-mandala::after {
  content: ""; position: absolute;
  width: 105%; height: 105%; border-radius: 50%;
  border: 1px solid rgba(217,185,104,.18);
  animation: portal-mandala-spin 40s linear infinite reverse;
  pointer-events: none;
}

/* Outer trigram ring — 8 trigrams */
.portal-mandala-trigrams {
  position: absolute; width: 100%; height: 100%;
  animation: portal-mandala-spin 25s linear infinite;
}
.portal-mandala-trigrams span {
  --pma: calc(var(--pmi) * 45deg - 90deg);
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-han); font-size: clamp(20px, 3vw, 30px);
  color: rgba(217,185,104,.9);
  text-shadow: 0 0 14px rgba(217,185,104,.6), 0 0 28px rgba(194,60,46,.25);
  transform: rotate(var(--pma)) translateY(calc(min(105px, 14vw) * -1)) rotate(calc(var(--pma) * -1));
  transform-origin: 0 0;
}

/* Middle wuxing ring — 5 elements */
.portal-mandala-wuxing {
  position: absolute; width: 72%; height: 72%;
  animation: portal-mandala-spin 15s linear infinite reverse;
}
.portal-mandala-wuxing span {
  --pwa: calc(var(--pwi) * 72deg - 90deg);
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-han); font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 600;
  transform: rotate(var(--pwa)) translateY(calc(min(62px, 8.5vw) * -1)) rotate(calc(var(--pwa) * -1));
  transform-origin: 0 0;
  text-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
}

/* Central taiji — larger, glowing yin-yang */
.portal-mandala-taiji {
  width: clamp(52px, 7vw, 76px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(194,60,46,.5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='200' height='200' fill='%23f4ecdc'/%3E%3Cpath d='M100,0 A100,100 0 0,1 100,200 A50,50 0 0,0 100,100 A50,50 0 0,1 100,0Z' fill='%2305070c'/%3E%3Ccircle cx='100' cy='50' r='15' fill='%2305070c'/%3E%3Ccircle cx='100' cy='150' r='15' fill='%23f4ecdc'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:
    0 0 40px rgba(217,185,104,.4),
    0 0 80px rgba(194,60,46,.2),
    0 0 120px rgba(217,185,104,.1),
    inset 0 0 16px rgba(0,0,0,.5);
  animation: portal-taiji-breathe 4s ease-in-out infinite;
}
@keyframes portal-taiji-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(217,185,104,.4), 0 0 80px rgba(194,60,46,.2), inset 0 0 16px rgba(0,0,0,.5); }
  50% { transform: scale(1.06); box-shadow: 0 0 60px rgba(217,185,104,.6), 0 0 120px rgba(194,60,46,.3), inset 0 0 20px rgba(0,0,0,.5); }
}

@keyframes portal-mandala-spin { to { transform: rotate(360deg); } }

/* Wuxing-Bagua Mandala — replaces old taiji-lock */
.wuxing-bagua-mandala {
  position: absolute; inset: 0; margin: auto;
  width: clamp(160px, 22vw, 220px); aspect-ratio: 1;
  display: grid; place-items: center;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.stone-gate:hover .wuxing-bagua-mandala {
  animation: mandala-spin 8s linear infinite;
}
.stone-gate.is-open .wuxing-bagua-mandala {
  opacity: 0; transform: scale(.6) rotate(180deg);
}

/* Outer Bagua ring — 8 trigram symbols */
.mandala-outer {
  position: absolute; width: 100%; height: 100%;
  animation: mandala-spin 30s linear infinite;
}
.mandala-outer span {
  --ma: calc(var(--mi) * 45deg - 90deg);
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-han); font-size: clamp(16px, 2.5vw, 22px);
  color: rgba(217,185,104,.8);
  text-shadow: 0 0 12px rgba(217,185,104,.4), 0 0 24px rgba(0,229,255,.15);
  transform: rotate(var(--ma)) translateY(calc(min(80px, 11vw) * -1)) rotate(calc(var(--ma) * -1));
  transform-origin: 0 0;
}

/* Wuxing (Five Phases) ring — 5 elements */
.mandala-wuxing {
  position: absolute; width: 72%; height: 72%;
  animation: mandala-spin 18s linear infinite reverse;
}
.mandala-wuxing span {
  --wa: calc(var(--wi) * 72deg - 90deg);
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-han); font-size: clamp(14px, 2vw, 18px);
  font-weight: 600;
  transform: rotate(var(--wa)) translateY(calc(min(48px, 6.5vw) * -1)) rotate(calc(var(--wa) * -1));
  transform-origin: 0 0;
  text-shadow: 0 0 10px currentColor;
}
.wuxing-wood { color: #4ade80; }
.wuxing-fire { color: #f97316; }
.wuxing-earth { color: #d9b968; }
.wuxing-metal { color: #e2e8f0; }
.wuxing-water { color: #38bdf8; }

/* Central Taiji — small yin-yang at core */
.mandala-taiji {
  width: clamp(40px, 6vw, 56px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(194,60,46,.4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='200' height='200' fill='%23f4ecdc'/%3E%3Cpath d='M100,0 A100,100 0 0,1 100,200 A50,50 0 0,0 100,100 A50,50 0 0,1 100,0Z' fill='%2305070c'/%3E%3Ccircle cx='100' cy='50' r='15' fill='%2305070c'/%3E%3Ccircle cx='100' cy='150' r='15' fill='%23f4ecdc'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow: 0 0 30px rgba(217,185,104,.3), 0 0 60px rgba(194,60,46,.12), inset 0 0 12px rgba(0,0,0,.5);
  animation: lock-breathe 4.8s ease-in-out infinite;
}

/* Mandala decorative rings */
.wuxing-bagua-mandala::before,
.wuxing-bagua-mandala::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(194,60,46,.15);
  pointer-events: none;
}
.wuxing-bagua-mandala::before {
  width: 90%; height: 90%;
  border-color: rgba(217,185,104,.12);
  box-shadow: 0 0 20px rgba(217,185,104,.06);
}
.wuxing-bagua-mandala::after {
  width: 65%; height: 65%;
  border-color: rgba(0,229,255,.1);
  border-style: dashed;
  animation: mandala-spin 25s linear infinite reverse;
}

@keyframes mandala-spin { to { transform: rotate(360deg); } }
.threshold {
  position: absolute; left: 50%; bottom: 0; width: 90%; height: 15%;
  transform: translateX(-50%) rotateX(72deg);
  background: radial-gradient(ellipse, rgba(194,60,46,.2), rgba(217,185,104,.12) 42%, transparent 74%);
  filter: blur(2px);
}

/* ========================================
   LAYER 2: VOID TRANSIT
   ======================================== */
#vortex-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.void-content { position: relative; z-index: 2; text-align: center; max-width: 600px; }
.void-content h2 {
  font-size: clamp(34px, 5vw, 56px); line-height: 1; margin-bottom: 16px;
  border-right: 2px solid var(--neon-cyan); animation: blink-caret .75s step-end infinite;
}
.void-sub {
  color: var(--cinnabar); font-family: var(--font-han); font-size: 28px;
  text-shadow: 0 0 20px rgba(194,60,46,.5), 0 0 60px rgba(194,60,46,.15);
  letter-spacing: .3em;
}
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--neon-cyan); } }

/* ========================================
   LAYER 3: PATH SELECT
   ======================================== */
.path-content { width: min(1180px, 100%); }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(34px, 5vw, 66px); line-height: 1; }
.section-head p:not(.kicker) { color: var(--muted); font-size: 17px; line-height: 1.75; }
.path-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.path-card {
  min-height: 250px; padding: 20px;
  border: 1px solid rgba(194,60,46,.12); border-radius: 8px;
  background: linear-gradient(180deg, rgba(194,60,46,.03), rgba(244,236,220,.02));
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), background 260ms var(--ease), box-shadow 260ms var(--ease), opacity 600ms var(--ease);
  opacity: 0; transform: translateY(40px) scale(.95);
}
.realm-layer.is-active .path-card { opacity: 1; transform: translateY(0) scale(1); transition-delay: var(--reveal-delay, 0ms); }
.path-card:hover, .path-card.is-active {
  transform: translateY(-4px); border-color: rgba(0,229,255,.55);
  background: linear-gradient(180deg, rgba(0,229,255,.06), rgba(244,236,220,.03));
  box-shadow: 0 0 30px rgba(0,229,255,.08), 0 0 60px rgba(194,60,46,.04);
}
.path-card span { color: var(--neon-cyan); font-family: var(--font-serif); font-size: 34px; }
.path-card h3 { margin: 20px 0 10px; font-size: 27px; }
.path-card p { color: var(--muted); line-height: 1.6; }
.path-card em {
  display: block; margin-top: 18px; color: rgba(194,60,46,.84);
  font-style: normal; font-family: var(--font-han); font-size: 18px;
  text-shadow: 0 0 16px rgba(194,60,46,.25);
}
.cosmos-panel {
  margin-top: 18px; display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr);
  align-items: center; gap: clamp(24px, 5vw, 70px); min-height: 420px;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid rgba(194,60,46,.18); border-radius: 10px;
  background:
    radial-gradient(circle at 24% 30%, rgba(194,60,46,.08), transparent 38%),
    linear-gradient(135deg, rgba(0,229,255,.03), rgba(244,236,220,.02));
  overflow: hidden; box-shadow: 0 0 40px rgba(194,60,46,.04);
}
.cosmos-core { position: relative; min-height: 320px; display: grid; place-items: center; }
.yin-yang-disc {
  width: min(260px, 54vw); aspect-ratio: 1; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='200' height='200' fill='%23f4ecdc'/%3E%3Cpath d='M100,0 A100,100 0 0,1 100,200 A50,50 0 0,0 100,100 A50,50 0 0,1 100,0Z' fill='%2305070c'/%3E%3Ccircle cx='100' cy='50' r='15' fill='%2305070c'/%3E%3Ccircle cx='100' cy='150' r='15' fill='%23f4ecdc'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow: 0 0 70px rgba(0,229,255,.24), 0 0 140px rgba(194,60,46,.08);
  animation: orbit 18s linear infinite;
}
.phase-ring {
  position: absolute; width: min(340px, 66vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(194,60,46,.18);
  background: conic-gradient(from 0deg, rgba(0,229,255,.15), rgba(194,60,46,.15), rgba(255,213,79,.15), rgba(200,211,221,.12), rgba(0,229,255,.14), rgba(0,229,255,.15));
  mask-image: radial-gradient(circle, transparent 54%, black 55% 58%, transparent 59%);
  animation: orbit 38s linear reverse infinite;
}
.hex-stack { position: absolute; display: grid; gap: 12px; width: 160px; transform: translateY(185px) scale(.78); opacity: .8; }
.hex-stack b { height: 10px; border-radius: 99px; background: var(--gold); box-shadow: 0 0 18px rgba(217,185,104,.42), 0 0 36px rgba(194,60,46,.08); }
.hex-stack b:nth-child(2), .hex-stack b:nth-child(5) { background: linear-gradient(90deg, var(--gold) 0 42%, transparent 42% 58%, var(--gold) 58%); }
.cosmos-panel h2 { font-size: clamp(34px, 5vw, 66px); line-height: 1; }
.cosmos-panel p:not(.kicker) { color: var(--muted); font-size: 17px; line-height: 1.75; }
.path-actions { margin-top: 34px; display: flex; justify-content: center; }

/* ========================================
   LAYER 4: ORACLE CHAMBER — IMMERSIVE RITUAL ALTAR
   ======================================== */
.oracle-ritual {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Ambient aura rings — 5 expanding layers */
.oracle-aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.aura-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(194,60,46,.1);
  animation: aura-breathe 6s ease-in-out infinite;
}
.aura-ring-1 { width: 400px; height: 400px; animation-delay: 0s; border-color: rgba(194,60,46,.14); box-shadow: inset 0 0 60px rgba(194,60,46,.04); }
.aura-ring-2 { width: 560px; height: 560px; animation-delay: 0.8s; border-color: rgba(194,60,46,.10); box-shadow: inset 0 0 40px rgba(194,60,46,.02); }
.aura-ring-3 { width: 720px; height: 720px; animation-delay: 1.6s; border-color: rgba(0,229,255,.08); box-shadow: inset 0 0 50px rgba(0,229,255,.02); }
.aura-ring-4 { width: 900px; height: 900px; animation-delay: 2.4s; border-color: rgba(217,185,104,.06); box-shadow: inset 0 0 60px rgba(217,185,104,.01); }
.aura-ring-5 { width: 1100px; height: 1100px; animation-delay: 3.2s; border-color: rgba(194,60,46,.04); border-style: dashed; }
@keyframes aura-breathe {
  0%, 100% { transform: scale(1); opacity: .3; }
  50% { transform: scale(1.08); opacity: .7; }
}

/* Floating trigram symbols — drift around the chamber */
.oracle-trigrams-float {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.oracle-trigrams-float span {
  position: absolute; left: 50%; top: 50%;
  color: rgba(194,60,46,.15);
  font-family: var(--font-han); font-size: clamp(28px, 5vw, 48px);
  transform: translate(var(--tf-x), var(--tf-y));
  animation: trigram-drift var(--tf-d) ease-in-out infinite alternate;
  text-shadow: 0 0 30px rgba(194,60,46,.15);
  opacity: 0;
  transition: opacity 2s var(--ease);
}
#layer-oracle.is-active .oracle-trigrams-float span {
  opacity: 1;
  transition-delay: calc(var(--tf-i) * 0.2s);
}
@keyframes trigram-drift {
  0% { transform: translate(var(--tf-x), var(--tf-y)) rotate(0deg); }
  100% { transform: translate(calc(var(--tf-x) * 0.7), calc(var(--tf-y) * 1.3)) rotate(15deg); }
}

/* Oracle chamber smoke canvas */
#oracle-smoke-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: .5;
}

/* Oracle chamber circuit overlay */
#layer-oracle::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .15;
  background:
    linear-gradient(0deg, transparent 49.5%, rgba(0,229,255,.06) 49.5%, rgba(0,229,255,.06) 50.5%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(194,60,46,.04) 49.5%, rgba(194,60,46,.04) 50.5%, transparent 50.5%);
  background-size: 80px 80px; animation: circuit-pulse 4s ease-in-out infinite; z-index: 0;
}
@keyframes circuit-pulse { 0%, 100% { opacity: .05; } 50% { opacity: .15; } }

/* Coins floating in orbit — enhanced with depth */
.oracle-coins-orbit {
  position: fixed; top: -40px; right: -40px;
  width: 260px; height: 260px;
  display: grid; place-items: center;
  filter: drop-shadow(0 0 40px rgba(194,60,46,.15));
  opacity: .6;
  z-index: 0;
  pointer-events: none;
}
.coin-orbit-ring {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  border: 1px solid rgba(194,60,46,.15);
  animation: orbit 20s linear infinite;
  box-shadow: inset 0 0 60px rgba(194,60,46,.06), 0 0 30px rgba(194,60,46,.04);
}
.coin-orbit-ring::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  border: 1px solid rgba(0,229,255,.1);
}
.coin-orbit-ring-inner {
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  border: 1px solid rgba(217,185,104,.1);
  animation: orbit 14s linear infinite reverse;
  box-shadow: inset 0 0 30px rgba(217,185,104,.03);
}
.coin-orbit-ring-inner::before {
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
  border: 1px dashed rgba(194,60,46,.08);
}
.coin {
  position: absolute; width: 72px; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; color: #171009;
  background: radial-gradient(circle at 50% 45%, #f0d68a 0 12%, transparent 13%), radial-gradient(circle, #dfbf70, #8a6527 72%);
  border: 5px solid #5d421a; font-family: var(--font-han); font-size: 28px;
  box-shadow: 0 22px 52px rgba(0,0,0,.45), inset 0 0 18px rgba(255,255,255,.24), 0 0 30px rgba(194,60,46,.08);
  overflow: hidden;
  left: 50%; top: 50%;
  transform: rotate(var(--orbit-angle)) translateX(100px) rotate(calc(var(--orbit-angle) * -1)) translate(-50%, -50%);
  filter: brightness(1);
  transition: filter 300ms var(--ease);
}
.coin::after {
  content: ""; position: absolute; inset: -50%;
  background: linear-gradient(105deg, transparent 40%, rgba(0,229,255,.12) 45%, rgba(255,213,79,.16) 50%, rgba(0,229,255,.12) 55%, transparent 60%);
  animation: holographic-sweep 3s ease-in-out infinite;
}
.coin::before {
  content: ""; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid rgba(93,66,26,.6);
  background: radial-gradient(circle, rgba(5,7,12,.4), rgba(93,66,26,.3));
  z-index: 1;
}
@keyframes holographic-sweep { 0% { transform: translateX(-100%) rotate(0deg); } 100% { transform: translateX(100%) rotate(5deg); } }
.coin.is-tossing { animation: coin-toss 1200ms cubic-bezier(.32,1.38,.46,1) var(--delay) both; }
@keyframes coin-toss {
  0% { transform: rotate(var(--orbit-angle)) translateX(100px) rotate(calc(var(--orbit-angle) * -1)) translate(-50%, -50%); }
  22% { transform: translate(-50%, calc(-50% - 170px)) rotateX(720deg) rotateY(360deg) scale(1.08); }
  62% { transform: translate(-50%, calc(-50% + 18px)) rotateX(1260deg) rotateY(760deg) scale(.96); }
  80% { transform: translate(-50%, calc(-50% - 18px)) rotateX(1440deg) rotateY(860deg); }
  100% { transform: rotate(var(--orbit-angle)) translateX(100px) rotate(calc(var(--orbit-angle) * -1)) translate(-50%, -50%); }
}

/* ===== RITUAL ALTAR — full viewport immersive form ===== */
.ritual-altar {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  padding: 40px clamp(20px, 5vw, 48px) 60px;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(194,60,46,.12) transparent;
  /* Subtle radial glow behind the altar content */
  background: radial-gradient(ellipse at 50% 20%, rgba(194,60,46,.04) 0%, transparent 50%);
}
.ritual-altar::-webkit-scrollbar { width: 3px; }
.ritual-altar::-webkit-scrollbar-track { background: transparent; }
.ritual-altar::-webkit-scrollbar-thumb { background: rgba(194,60,46,.15); border-radius: 3px; }

/* ===== INVOCATION — opening ceremony ===== */
.ritual-invocation {
  text-align: center;
  margin-bottom: 48px;
  animation: ritual-scroll-appear 1.2s var(--ease) both;
}
.ritual-seal-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 2px solid rgba(194,60,46,.5);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(194,60,46,.12), rgba(194,60,46,.04));
  color: var(--cinnabar); font-family: var(--font-han); font-size: 28px;
  text-shadow: 0 0 20px rgba(194,60,46,.5);
  margin-bottom: 16px;
  animation: seal-stamp-breathe 3s ease-in-out infinite;
}
@keyframes seal-stamp-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(194,60,46,.2); transform: scale(1); }
  50% { box-shadow: 0 0 40px rgba(194,60,46,.35), 0 0 80px rgba(194,60,46,.1); transform: scale(1.04); }
}
.ritual-invocation h2 {
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 40px rgba(217,185,104,.3), 0 0 80px rgba(217,185,104,.1);
}
.oracle-whisper {
  color: var(--muted); font-size: 14px; font-style: italic;
  max-width: 44ch; margin: 0 auto;
}
/* Ink divider line below invocation */
.ritual-ink-divider {
  margin: 28px auto 0;
  width: min(280px, 60vw); height: 2px;
  background: linear-gradient(90deg, transparent, rgba(194,60,46,.4), rgba(217,185,104,.3), rgba(0,229,255,.2), transparent);
  border-radius: 2px;
  animation: ink-divider-pulse 3s ease-in-out infinite;
}
@keyframes ink-divider-pulse {
  0%, 100% { opacity: .5; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.08); }
}

@keyframes ritual-scroll-appear {
  0% { opacity: 0; transform: translateY(30px); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ===== RITUAL STATIONS — bamboo slip chapters ===== */
.ritual-station {
  width: min(680px, 100%);
  padding: 0 0 12px;
  position: relative;
  /* Hidden by default — progressive reveal */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease), max-height 800ms var(--ease), transform 800ms var(--ease), padding 800ms var(--ease);
  pointer-events: none;
}
/* First station always visible */
.ritual-station.is-active {
  opacity: 1;
  max-height: 400px;
  transform: translateY(0);
  padding-bottom: 32px;
  pointer-events: auto;
}
/* Revealed station (previous step completed) */
.ritual-station.is-revealed {
  opacity: 1;
  max-height: 500px;
  transform: translateY(0);
  padding-bottom: 32px;
  pointer-events: auto;
}
/* Active/revealed station gets a subtle left border decoration */
.ritual-station.is-active::before,
.ritual-station.is-revealed::before {
  content: "";
  position: absolute;
  left: -12px; top: 0; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(194,60,46,.3), rgba(217,185,104,.15), transparent);
  border-radius: 2px;
}
/* Completed station */
.ritual-station.is-complete .station-seal {
  opacity: 1;
  transform: scale(1);
}
.ritual-station.is-complete .station-number {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(217,185,104,.5);
}
/* Completed station dims slightly */
.ritual-station.is-complete.is-revealed,
.ritual-station.is-complete.is-active {
  opacity: .75;
}
.ritual-station.is-complete.is-revealed:hover,
.ritual-station.is-complete.is-active:focus-within {
  opacity: 1;
}

/* Station header */
.station-header {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(194,60,46,.06);
}
/* Decorative dot at left of header */
.station-header::before {
  content: "";
  position: absolute;
  left: -20px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(194,60,46,.25);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(194,60,46,.15);
}
.station-number {
  font-family: var(--font-han); font-size: 24px;
  color: var(--cinnabar);
  text-shadow: 0 0 16px rgba(194,60,46,.4);
  letter-spacing: .1em;
  transition: color 400ms var(--ease), text-shadow 400ms var(--ease);
}
.station-title {
  font-family: var(--font-serif); font-size: 19px;
  color: rgba(244,236,220,.82);
  letter-spacing: .06em;
}
.station-required {
  color: var(--cinnabar); font-size: 18px; font-weight: 700;
  text-shadow: 0 0 8px rgba(194,60,46,.4);
  line-height: 1;
}
/* Seal checkmark — appears when step is complete */
.station-seal {
  margin-left: auto;
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid rgba(217,185,104,.4); border-radius: 3px;
  background: linear-gradient(135deg, rgba(217,185,104,.1), rgba(217,185,104,.03));
  color: var(--gold); font-family: var(--font-han); font-size: 11px;
  text-shadow: 0 0 8px rgba(217,185,104,.4);
  opacity: 0; transform: scale(0);
  transition: opacity 400ms var(--ease), transform 400ms cubic-bezier(.34, 1.56, .64, 1);
}

/* Station body */
.station-body {
  padding-top: 4px;
}

/* ===== INK INPUT — brush stroke on xuan paper ===== */
.ink-input-wrap {
  position: relative;
  width: 100%;
}
.ink-input {
  width: 100%;
  padding: 14px 4px;
  color: var(--paper);
  background: transparent;
  border: none;
  border-bottom: none;
  outline: none;
  font-size: 20px;
  font-family: var(--font-han), var(--font-serif);
  letter-spacing: .12em;
  caret-color: var(--cinnabar);
  transition: color 300ms var(--ease);
}
.ink-input::placeholder {
  color: rgba(244,236,220,.18);
  font-style: normal;
  font-size: 16px;
  font-family: var(--font-serif);
  letter-spacing: .04em;
}
.ink-input:focus {
  color: var(--paper);
}
/* Animated ink brush line — draws from center on focus */
.ink-brush-line {
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(194,60,46,.7), rgba(217,185,104,.6), rgba(194,60,46,.7), transparent);
  transition: left 500ms var(--ease), right 500ms var(--ease), height 300ms var(--ease);
  border-radius: 2px;
  filter: drop-shadow(0 0 4px rgba(194,60,46,.3));
}
.ink-input:focus ~ .ink-brush-line {
  left: 0; right: 0;
  height: 3px;
}
/* Filled state — line stays drawn */
.ink-input.is-filled ~ .ink-brush-line {
  left: 0; right: 0;
  background: linear-gradient(90deg, transparent, rgba(217,185,104,.35), rgba(194,60,46,.25), transparent);
}

/* ===== YIN-YANG ENERGY PORTALS ===== */
.portal-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 8px 0;
}
.energy-portal {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 24px 24px;
  border: 1px solid rgba(194,60,46,.08);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(194,60,46,.02), transparent 70%);
  color: var(--muted);
  cursor: pointer;
  transition: all 500ms var(--ease);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  max-width: 220px;
  justify-self: center;
}
/* Glowing ring behind portal */
.portal-ring {
  position: absolute; inset: -12%;
  border-radius: 50%;
  border: 1px solid rgba(194,60,46,.06);
  transition: all 500ms var(--ease);
  pointer-events: none;
}
.energy-portal:hover .portal-ring {
  border-color: rgba(194,60,46,.18);
  box-shadow: 0 0 50px rgba(194,60,46,.06);
}
.energy-portal:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(194,60,46,.2);
}
.portal-symbol {
  font-family: var(--font-han); font-size: clamp(36px, 6vw, 48px);
  color: rgba(217,185,104,.45);
  text-shadow: 0 0 24px rgba(217,185,104,.2);
  transition: all 400ms var(--ease);
}
.portal-trigram {
  font-size: 22px;
  color: rgba(194,60,46,.15);
  transition: all 400ms var(--ease);
}
.portal-label {
  font-size: 12px; letter-spacing: .1em;
  color: rgba(244,236,220,.35);
  transition: color 300ms var(--ease);
}

/* Selected states */
.energy-portal.is-selected {
  border-color: rgba(217,185,104,.45);
  background: radial-gradient(circle at 50% 40%, rgba(217,185,104,.06), transparent 70%);
  transform: translateY(-4px) scale(1.06);
}
.energy-portal.is-selected .portal-ring {
  border-color: rgba(217,185,104,.2);
  box-shadow: 0 0 60px rgba(217,185,104,.1);
}
.energy-portal.is-selected .portal-symbol {
  transform: scale(1.1);
}
.energy-portal.is-selected .portal-label {
  color: var(--paper);
}

/* Yang (male) — gold glow */
.portal-yang.is-selected {
  border-color: rgba(217,185,104,.5);
  box-shadow: 0 0 40px rgba(217,185,104,.15), 0 0 80px rgba(217,185,104,.06);
}
.portal-yang.is-selected .portal-symbol {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(217,185,104,.6), 0 0 48px rgba(217,185,104,.2);
}
.portal-yang.is-selected .portal-trigram {
  color: rgba(217,185,104,.4);
  text-shadow: 0 0 12px rgba(217,185,104,.3);
}

/* Yin (female) — jade glow */
.portal-yin.is-selected {
  border-color: rgba(79,144,123,.45);
  background: radial-gradient(circle at 50% 40%, rgba(79,144,123,.06), transparent 70%);
  box-shadow: 0 0 40px rgba(79,144,123,.15), 0 0 80px rgba(79,144,123,.06);
}
.portal-yin.is-selected .portal-ring {
  border-color: rgba(79,144,123,.2);
  box-shadow: 0 0 60px rgba(79,144,123,.1);
}
.portal-yin.is-selected .portal-symbol {
  color: var(--jade);
  text-shadow: 0 0 24px rgba(79,144,123,.6), 0 0 48px rgba(79,144,123,.2);
}
.portal-yin.is-selected .portal-trigram {
  color: rgba(79,144,123,.4);
  text-shadow: 0 0 12px rgba(79,144,123,.3);
}

/* Center divider with taiji */
.portal-divider {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
}
.portal-taiji {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(194,60,46,.15);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='200' height='200' fill='%23f4ecdc'/%3E%3Cpath d='M100,0 A100,100 0 0,1 100,200 A50,50 0 0,0 100,100 A50,50 0 0,1 100,0Z' fill='%2305070c'/%3E%3Ccircle cx='100' cy='50' r='15' fill='%2305070c'/%3E%3Ccircle cx='100' cy='150' r='15' fill='%23f4ecdc'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow: 0 0 20px rgba(217,185,104,.2);
  animation: lock-breathe 4s ease-in-out infinite;
}

/* ===== CELESTIAL COORDINATES — Birth Date ===== */
.celestial-row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  gap: 0;
  align-items: end;
}
.celestial-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
/* Decorative ring around each node — like armillary sphere */
.celestial-ring {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 90%; height: 80%; border-radius: 50%;
  border: 1px solid rgba(0,229,255,.05);
  pointer-events: none;
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
  animation: celestial-ring-breathe 6s ease-in-out infinite;
}
@keyframes celestial-ring-breathe {
  0%, 100% { opacity: .4; }
  50% { opacity: .8; }
}
.celestial-node:focus-within .celestial-ring {
  border-color: rgba(0,229,255,.15);
  box-shadow: 0 0 40px rgba(0,229,255,.05);
  animation: none;
  opacity: 1;
}
.celestial-label {
  font-family: var(--font-han); font-size: 13px;
  color: rgba(0,229,255,.35);
  letter-spacing: .18em;
  text-shadow: 0 0 8px rgba(0,229,255,.12);
}
.ink-input-celestial {
  text-align: center;
  padding: 12px 4px;
  font-size: 22px;
  font-family: var(--font-serif);
  letter-spacing: .15em;
  -moz-appearance: textfield;
  width: 100%;
}
.ink-input-celestial::-webkit-outer-spin-button,
.ink-input-celestial::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* Connecting lines between celestial nodes — like constellation lines */
.celestial-connector {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.12), transparent);
  align-self: center;
  margin-bottom: 22px;
  position: relative;
}
.celestial-connector::before {
  content: ""; position: absolute;
  left: 50%; top: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,229,255,.15);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0,229,255,.1);
}
.celestial-connector::after {
  content: ""; position: absolute;
  left: 20%; top: -1px; right: 20%;
  height: 1px; border-top: 1px dashed rgba(0,229,255,.06);
}

/* ===== PRAYER SCROLL — Question ===== */
.prayer-scroll {
  width: 100%; padding: 16px 18px 16px 48px;
  border: 1px solid rgba(194,60,46,.12); border-radius: 8px;
  background: linear-gradient(180deg, rgba(194,60,46,.02), rgba(5,7,12,.3));
  position: relative;
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.prayer-scroll:focus-within {
  border-color: rgba(217,185,104,.3);
  box-shadow: 0 0 40px rgba(217,185,104,.06);
}
.prayer-seal {
  position: absolute; top: 12px; left: 12px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid rgba(194,60,46,.25); border-radius: 3px;
  background: linear-gradient(135deg, rgba(194,60,46,.1), rgba(194,60,46,.03));
  color: var(--cinnabar); font-family: var(--font-han); font-size: 14px;
  text-shadow: 0 0 10px rgba(194,60,46,.4);
  pointer-events: none;
}
.prayer-scroll::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(194,60,46,.3), transparent);
}
textarea {
  width: 100%; resize: vertical; min-height: 80px; padding: 12px;
  color: var(--paper); background: rgba(5,7,12,.4);
  border: 1px solid rgba(194,60,46,.08); border-radius: 6px; outline: none;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
  font-size: 16px;
  font-family: var(--font-serif);
}
textarea:focus { border-color: rgba(0,229,255,.4); box-shadow: 0 0 20px rgba(0,229,255,.06); }
textarea::placeholder {
  color: rgba(244,236,220,.2); font-style: italic;
}

/* Preset buttons — oracle bone fragments */
.prompt-row {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: 100%; margin-top: 12px;
}
.preset-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.preset-group-label {
  font-size: 10px; color: rgba(194,60,46,.5); letter-spacing: .1em; text-transform: uppercase;
  margin-right: 4px; font-weight: 700; font-family: var(--font-han);
}
.prompt-row button {
  padding: 6px 10px; color: rgba(244,236,220,.65); font-size: 11px;
  border: 1px solid rgba(194,60,46,.08); border-radius: 3px;
  background: rgba(194,60,46,.03);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
  white-space: nowrap;
}
.prompt-row button:hover {
  border-color: rgba(0,229,255,.4); box-shadow: 0 0 12px rgba(0,229,255,.1);
  background: rgba(0,229,255,.03);
}

/* ===== CAST BUTTON — Grand Ceremony ===== */
.ritual-cast-wrap {
  text-align: center;
  padding-top: 16px;
}
.btn-cast {
  min-height: 56px; font-size: 15px; letter-spacing: .18em;
  padding: 16px 40px; position: relative; overflow: hidden;
  width: min(480px, 90%);
}
.btn-cast::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,213,79,.2), transparent 70%);
  opacity: 0; transform: scale(0);
  transition: opacity 400ms var(--ease), transform 600ms var(--ease);
}
.btn-cast:hover::after {
  opacity: 1; transform: scale(1.5);
}
.cast-icon {
  display: inline-block; margin-right: 8px; font-size: 20px;
  animation: cast-icon-pulse 2s ease-in-out infinite;
}
@keyframes cast-icon-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.ritual-cast-hint {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(194,60,46,.45);
  letter-spacing: .06em;
  font-family: var(--font-sans);
  transition: opacity 400ms var(--ease), color 400ms var(--ease);
}
.ritual-cast-hint.is-ready {
  color: rgba(217,185,104,.6);
  text-shadow: 0 0 12px rgba(217,185,104,.2);
}
.ritual-cast-hint.is-hidden {
  opacity: 0;
}

/* Cast button locked state */
.btn-cast.is-locked {
  opacity: .3;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.btn-cast.is-locked:hover { transform: none; }
.btn-cast.is-locked::after { display: none; }
.btn-cast.is-locked .cast-icon {
  animation: none;
  opacity: .5;
}

/* ===== VALIDATION — field error state ===== */
.ritual-station.is-error .station-required {
  animation: required-pulse 1s ease-in-out infinite;
}
@keyframes required-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(194,60,46,.4); }
  50% { opacity: .5; text-shadow: 0 0 16px rgba(194,60,46,.8); }
}

/* ========================================
   LAYER 5: CASTING
   ======================================== */
.casting-content { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.countdown { position: relative; }
.countdown span {
  display: block; font-family: var(--font-serif); font-size: clamp(120px, 20vw, 200px);
  font-weight: 600; color: var(--neon-cyan);
  text-shadow: 0 0 40px rgba(0,229,255,.5), 0 0 100px rgba(0,229,255,.2);
  animation: countdown-pulse 800ms ease-out;
}
@keyframes countdown-pulse { 0% { transform: scale(1.4); opacity: .5; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.hexagram-assembly { width: 200px; display: grid; gap: 14px; }
.hexagram-assembly span {
  height: 14px; border-radius: 99px; background: rgba(244,236,220,.18);
  opacity: 0; transform: translateX(-200px) scaleX(0);
  transition: opacity 400ms var(--ease), transform 600ms cubic-bezier(.34, 1.56, .64, 1);
}
.hexagram-assembly span.is-assembled { opacity: 1; transform: translateX(0) scaleX(1); }
.hexagram-assembly span.yang { background: var(--gold); box-shadow: 0 0 20px rgba(217,185,104,.36), 0 0 40px rgba(255,213,79,.15); }
.hexagram-assembly span.yin { background: linear-gradient(90deg, var(--gold) 0 42%, transparent 42% 58%, var(--gold) 58%); box-shadow: 0 0 20px rgba(217,185,104,.36), 0 0 40px rgba(255,213,79,.15); }
.hexagram-assembly span.changing { background-color: var(--cinnabar); box-shadow: 0 0 24px rgba(194,60,46,.54); animation: pulse-changing 1.2s ease-in-out infinite; }
@keyframes pulse-changing { 0%, 100% { box-shadow: 0 0 24px rgba(194,60,46,.54); } 50% { box-shadow: 0 0 40px rgba(194,60,46,.8), 0 0 80px rgba(194,60,46,.3); } }
.energy-signature { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; height: 100px; align-items: end; width: 240px; }
.energy-signature i { display: block; height: 0; border-radius: 99px 99px 4px 4px; background: linear-gradient(180deg, var(--neon-cyan), var(--gold)); box-shadow: 0 0 12px rgba(0,229,255,.25); transition: height 800ms cubic-bezier(.34, 1.56, .64, 1); }
.energy-signature i.is-filled { height: var(--v, 50%); }

/* ========================================
   LAYER 6: READING — DRAMATIC REVELATION
   ======================================== */
#layer-reading {
  align-items: flex-start;
  justify-content: center;
}
.reading-revelation {
  display: flex; flex-direction: column; align-items: center;
  max-width: 680px; width: 100%; text-align: center;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(194,60,46,.15) transparent;
}
.reading-revelation::-webkit-scrollbar { width: 3px; }
.reading-revelation::-webkit-scrollbar-track { background: transparent; }
.reading-revelation::-webkit-scrollbar-thumb { background: rgba(194,60,46,.15); border-radius: 3px; }

/* Floating mystical symbols */
.reading-float-symbols {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.reading-float-symbols span {
  position: absolute;
  color: rgba(217,185,104,.06);
  font-family: var(--font-han); font-size: clamp(60px, 10vw, 120px);
  animation: reading-symbol-float var(--rfs-d, 18s) ease-in-out infinite alternate;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.reading-float-symbols span:nth-child(1) { left: 5%; top: 15%; --rfs-d: 18s; }
.reading-float-symbols span:nth-child(2) { right: 8%; top: 25%; --rfs-d: 22s; animation-delay: -3s; }
.reading-float-symbols span:nth-child(3) { left: 12%; bottom: 20%; --rfs-d: 20s; animation-delay: -6s; }
.reading-float-symbols span:nth-child(4) { right: 5%; bottom: 15%; --rfs-d: 24s; animation-delay: -9s; }
.reading-float-symbols span:nth-child(5) { left: 25%; top: 60%; --rfs-d: 19s; animation-delay: -2s; }
.reading-float-symbols span:nth-child(6) { right: 20%; top: 50%; --rfs-d: 21s; animation-delay: -5s; }
#layer-reading.is-active .reading-float-symbols span {
  opacity: 1;
  transition-delay: calc(var(--rfs-i) * 0.3s + 1s);
}
@keyframes reading-symbol-float {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-20px) rotate(5deg); }
}

/* Shrine — hexagram centerpiece with multi-layered glow */
.reading-shrine {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 16px; margin-bottom: 32px;
}
.shrine-glow {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,185,104,.14), rgba(194,60,46,.06) 40%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: shrine-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
/* Second glow layer — cyan accent */
.shrine-glow-2 {
  position: absolute; width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.08), rgba(217,185,104,.04) 50%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: shrine-pulse 4s ease-in-out infinite reverse;
  pointer-events: none;
}
/* Light rays emanating from shrine */
.shrine-rays {
  position: absolute; width: 600px; height: 600px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg, rgba(217,185,104,.04) 5deg, transparent 10deg,
      transparent 30deg, rgba(194,60,46,.03) 35deg, transparent 40deg,
      transparent 60deg, rgba(217,185,104,.04) 65deg, transparent 70deg,
      transparent 90deg, rgba(194,60,46,.03) 95deg, transparent 100deg,
      transparent 120deg, rgba(217,185,104,.04) 125deg, transparent 130deg,
      transparent 150deg, rgba(194,60,46,.03) 155deg, transparent 160deg,
      transparent 180deg, rgba(217,185,104,.04) 185deg, transparent 190deg,
      transparent 210deg, rgba(194,60,46,.03) 215deg, transparent 220deg,
      transparent 240deg, rgba(217,185,104,.04) 245deg, transparent 250deg,
      transparent 270deg, rgba(194,60,46,.03) 275deg, transparent 280deg,
      transparent 300deg, rgba(217,185,104,.04) 305deg, transparent 310deg,
      transparent 330deg, rgba(194,60,46,.03) 335deg, transparent 340deg,
      transparent 360deg
    );
  animation: shrine-rays-rotate 30s linear infinite;
}
@keyframes shrine-rays-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes shrine-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .5; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
.hexagram-display {
  width: 140px; display: grid; gap: 10px; margin: 0 auto;
  position: relative; z-index: 1;
}
.hexagram-display span {
  height: 12px; border-radius: 99px; background: rgba(244,236,220,.18);
  opacity: 0; transform: scaleX(0);
  transition: transform 600ms cubic-bezier(.34, 1.56, .64, 1), opacity 400ms var(--ease);
}
.hexagram-display span.is-revealed { opacity: 1; transform: scaleX(1); }
.hexagram-display span.yang { background: var(--gold); box-shadow: 0 0 20px rgba(217,185,104,.36), 0 0 40px rgba(255,213,79,.15); }
.hexagram-display span.yin { background: linear-gradient(90deg, var(--gold) 0 42%, transparent 42% 58%, var(--gold) 58%); }
.hexagram-display span.changing { background-color: var(--cinnabar); box-shadow: 0 0 24px rgba(194,60,46,.54); animation: pulse-changing 1.2s ease-in-out infinite; }
.reading-shrine h2 {
  font-size: clamp(30px, 4.5vw, 48px); line-height: 1; position: relative; z-index: 1;
  text-shadow: 0 0 40px rgba(217,185,104,.3);
}
.reading-meta {
  color: var(--neon-cyan); font-size: 13px; letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(0,229,255,.2); position: relative; z-index: 1;
}

/* Scroll of wisdom — unfurling parchment with ornaments */
.reading-scroll {
  width: 100%; text-align: left;
  padding: 28px 28px; margin-bottom: 20px;
  border: 1px solid rgba(194,60,46,.18); border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(194,60,46,.04), rgba(5,7,12,.4)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(194,60,46,.02) 27px 28px);
  box-shadow: 0 0 40px rgba(194,60,46,.04);
  position: relative; overflow: hidden;
  animation: scroll-unfurl 1.2s var(--ease) both;
}
@keyframes scroll-unfurl {
  0% { opacity: 0; }
  30% { opacity: .5; }
  100% { opacity: 1; }
}
.reading-scroll::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(194,60,46,.5), rgba(0,229,255,.3), transparent);
}
/* Scroll ornaments — decorative dividers */
.scroll-ornament {
  width: 100%; height: 12px; position: relative;
  margin: 8px 0;
}
.scroll-ornament::before {
  content: ""; position: absolute; top: 50%; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,60,46,.2), rgba(217,185,104,.15), rgba(194,60,46,.2), transparent);
}
.scroll-ornament::after {
  content: "◆"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(194,60,46,.3); font-size: 8px;
  background: var(--black); padding: 0 6px;
}
.scroll-ornament-bottom { margin-top: 16px; }
.reading-scroll .kicker { margin-bottom: 20px; }
.reading-judgment, .reading-image {
  color: var(--muted); font-family: var(--font-serif); font-size: 17px; line-height: 1.7;
  margin-bottom: 16px; padding: 14px 18px; border-left: 2px solid rgba(194,60,46,.25); text-align: left;
}
.reading-judgment { border-left-color: rgba(255,213,79,.25); }
.reading-body {
  color: var(--paper); font-size: 16px; line-height: 1.85;
  margin-bottom: 0; min-height: 60px; text-align: left;
}

/* AI Deep Reading — Immersive Panel */
.ai-reading {
  width: 100%; margin-top: 0; margin-bottom: 20px;
  padding: 0; text-align: left;
  border: 1px solid rgba(194,60,46,.25); border-radius: 10px;
  background: linear-gradient(180deg, rgba(194,60,46,.06), rgba(5,7,12,.3));
  box-shadow: 0 0 60px rgba(194,60,46,.08);
  position: relative;
  transition: border-color 800ms var(--ease), box-shadow 800ms var(--ease);
}
.ai-reading.is-streaming {
  border-color: rgba(0,229,255,.3);
  box-shadow: 0 0 80px rgba(0,229,255,.1), 0 0 120px rgba(194,60,46,.06);
}
.ai-reading.is-complete {
  border-color: rgba(217,185,104,.35);
  box-shadow: 0 0 60px rgba(217,185,104,.12), 0 0 120px rgba(194,60,46,.06);
}
.ai-reading.is-loading {
  border-color: rgba(194,60,46,.4);
  animation: ai-panel-pulse 2s ease-in-out infinite;
}
@keyframes ai-panel-pulse {
  0%, 100% { box-shadow: 0 0 60px rgba(194,60,46,.08); }
  50% { box-shadow: 0 0 100px rgba(194,60,46,.2), 0 0 160px rgba(0,229,255,.05); }
}
.ai-reading::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(194,60,46,.6), rgba(0,229,255,.3), transparent);
}
.ai-reading.is-streaming::before {
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.6), rgba(194,60,46,.3), transparent);
  animation: ai-border-stream 3s linear infinite;
}
@keyframes ai-border-stream {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ai-reading .kicker { color: var(--cinnabar); margin-bottom: 16px; padding: 24px 24px 0; }
.ai-reading-body {
  color: var(--paper); font-size: 15px; line-height: 1.85; white-space: pre-wrap;
  padding: 0 24px 24px;
}

/* AI Loading — Ritual Trigram Spin */
.ai-loading {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 40px 24px;
}
.ai-loading-trigrams {
  display: flex; gap: 8px; font-size: 20px;
}
.ai-trigram-spin {
  display: inline-block; color: var(--cinnabar);
  animation: trigram-appear 0.5s var(--ease) var(--td) both;
  text-shadow: 0 0 16px rgba(194,60,46,.5);
}
@keyframes trigram-appear {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.ai-loading-text {
  color: var(--cinnabar); font-family: var(--font-han); font-size: 20px;
  letter-spacing: .15em;
  animation: ai-text-pulse 1.5s ease-in-out infinite;
}
@keyframes ai-text-pulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; text-shadow: 0 0 20px rgba(194,60,46,.5); }
}

/* AI Error State */
.ai-error {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 24px; text-align: center;
}
.ai-error-icon { font-size: 28px; }
.ai-error span { color: var(--cinnabar); }
.ai-error-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ai-error code {
  background: rgba(0,229,255,.08); color: var(--neon-cyan); padding: 2px 8px;
  border-radius: 3px; font-size: 12px;
}
.ai-error-steps {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
  padding: 16px; border: 1px solid rgba(194,60,46,.15); border-radius: 8px;
  background: rgba(5,7,12,.4);
}
.ai-error-steps code {
  display: block; text-align: left; font-size: 13px;
  background: rgba(0,229,255,.06); color: var(--neon-cyan);
  padding: 6px 12px; border-radius: 4px;
}
.ai-error-note {
  font-size: 12px; color: var(--muted); margin-top: 4px;
}

/* Old spinner — kept for compat */
.ai-reading-body .ai-loading {
  display: flex; align-items: center; gap: 12px; color: var(--cinnabar);
  font-family: var(--font-han); font-size: 20px; letter-spacing: .15em;
}
.ai-reading-body .ai-loading::after {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(194,60,46,.3); border-top-color: var(--cinnabar);
  animation: ai-spin .8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Energy bars */
.energy-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 60px; align-items: end; margin: 0 auto 20px; max-width: 240px; }
.energy-bars i { display: block; height: 0; border-radius: 99px 99px 4px 4px; background: linear-gradient(180deg, var(--neon-cyan), var(--gold)); box-shadow: 0 0 12px rgba(0,229,255,.25); transition: height 800ms cubic-bezier(.34, 1.56, .64, 1); }
.energy-bars i.is-filled { height: var(--v, 50%); }
.closing-actions { justify-content: center; margin-top: 8px; }

/* ========================================
   LAYER 7: GATE SEALED — GRAND CEREMONY
   ======================================== */
#seal-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}

/* Ink splash effect */
.seal-ink-splash {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(194,60,46,.15), transparent 60%);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.seal-ink-splash.is-active {
  opacity: 1;
  animation: ink-splash-pulse 800ms ease-out forwards;
}
@keyframes ink-splash-pulse {
  0% { opacity: 0; transform: scale(.3); }
  30% { opacity: 1; transform: scale(1.2); }
  60% { opacity: .6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

.gate-close-anim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}

/* Seal ring — enhanced with trigram orbit */
.seal-ring {
  position: absolute; width: 340px; height: 340px;
  border-radius: 50%; border: 3px solid rgba(194,60,46,.6);
  display: grid; place-items: center;
  box-shadow: 0 0 80px rgba(194,60,46,.3), inset 0 0 60px rgba(194,60,46,.15);
  opacity: 0; transform: scale(0) rotate(-720deg);
  transition: opacity 800ms var(--ease), transform 1600ms cubic-bezier(.16, 1, .3, 1);
}
.seal-ring.is-sealing {
  opacity: 1; transform: scale(1) rotate(0deg);
  box-shadow: 0 0 100px rgba(194,60,46,.4), inset 0 0 60px rgba(194,60,46,.2), 0 0 200px rgba(194,60,46,.1);
}
.seal-ring.is-sealed {
  opacity: 1; transform: scale(1.15) rotate(0deg);
  box-shadow: 0 0 150px rgba(194,60,46,.6), inset 0 0 100px rgba(194,60,46,.25), 0 0 300px rgba(194,60,46,.15);
  animation: sealed-ring-breathe 3s ease-in-out infinite;
}
@keyframes sealed-ring-breathe {
  0%, 100% { box-shadow: 0 0 150px rgba(194,60,46,.6), inset 0 0 100px rgba(194,60,46,.25); }
  50% { box-shadow: 0 0 200px rgba(194,60,46,.8), inset 0 0 120px rgba(194,60,46,.35), 0 0 400px rgba(194,60,46,.2); }
}
.seal-ring-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2;
}
.seal-trigram {
  color: rgba(217,185,104,.5); font-size: 24px;
  text-shadow: 0 0 12px rgba(217,185,104,.3);
}
.seal-stamp {
  font-family: var(--font-han); font-size: 110px; color: var(--cinnabar);
  text-shadow: 0 0 40px rgba(194,60,46,.6), 0 0 100px rgba(194,60,46,.3);
  line-height: 1;
}

/* Rotating trigram orbit around seal ring */
.seal-trigram-orbit {
  position: absolute; width: 100%; height: 100%;
  animation: seal-text-rotate 12s linear infinite;
}
.seal-trigram-orbit span {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-han); font-size: 14px;
  color: rgba(194,60,46,.5);
  text-shadow: 0 0 10px rgba(194,60,46,.3);
  transform: rotate(calc(var(--sto-i) * 45deg)) translateY(-165px) rotate(calc(var(--sto-i) * -45deg));
  transform-origin: 0 0;
  letter-spacing: .1em;
}

/* Close doors — enhanced with texture and runes */
.close-doors {
  position: absolute; inset: 0; display: flex; perspective: 1200px;
}
.close-door {
  width: 50%; height: 100%;
  background: linear-gradient(90deg, #141821, #0c0e14);
  border: 1px solid rgba(194,60,46,.2);
  opacity: 0;
  transition: opacity 600ms var(--ease), transform 1600ms cubic-bezier(.16, 1, .3, 1);
  position: relative;
  overflow: hidden;
}
/* Door texture — stone-like pattern */
.door-texture {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(194,60,46,.04) 48px 50px),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(0,229,255,.02) 48px 50px),
    radial-gradient(circle at 50% 40%, rgba(0,229,255,.04), transparent 60%);
}
/* Door rune characters */
.door-rune {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-han); font-size: clamp(80px, 12vw, 140px);
  color: rgba(217,185,104,.12);
  text-shadow: 0 0 40px rgba(217,185,104,.06), 0 0 80px rgba(194,60,46,.03);
}
.door-rune-l { right: 20%; }
.door-rune-r { left: 20%; }

.close-door-l { transform-origin: left center; transform: rotateY(90deg); }
.close-door-r { transform-origin: right center; transform: rotateY(-90deg); }
.close-doors.is-closing .close-door { opacity: 1; }
.close-doors.is-closing .close-door-l { transform: rotateY(0deg); }
.close-doors.is-closing .close-door-r { transform: rotateY(0deg); }

.sealed-content {
  position: relative; z-index: 3; text-align: center;
  opacity: 0; transform: translateY(30px);
  transition: opacity 800ms var(--ease) 2000ms, transform 800ms var(--ease) 2000ms;
}
.sealed-content.is-revealed { opacity: 1; transform: translateY(0); }

/* Seal mark — the ornate circular stamp */
.sealed-seal-mark {
  margin-bottom: 28px;
  animation: seal-float 4s ease-in-out infinite;
}
@keyframes seal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.seal-circle {
  width: 160px; height: 160px; margin: 0 auto; position: relative;
  border-radius: 50%;
  border: 2px solid rgba(194,60,46,.5);
  display: grid; place-items: center;
  box-shadow: 0 0 60px rgba(194,60,46,.25), inset 0 0 40px rgba(194,60,46,.1);
  background: radial-gradient(circle, rgba(194,60,46,.08), transparent 70%);
}
.seal-char {
  font-family: var(--font-han); font-size: 72px; color: var(--cinnabar);
  text-shadow: 0 0 30px rgba(194,60,46,.5), 0 0 60px rgba(194,60,46,.2);
  line-height: 1;
}
.seal-ring-text {
  position: absolute; width: 100%; height: 100%;
  font-family: var(--font-han); font-size: 14px; color: rgba(194,60,46,.5);
  letter-spacing: .3em;
  animation: seal-text-rotate 20s linear infinite;
}
@keyframes seal-text-rotate { to { transform: rotate(360deg); } }

.sealed-content h2 {
  font-size: clamp(38px, 6vw, 76px); margin-bottom: 12px;
  text-shadow: 0 0 40px rgba(217,185,104,.2);
}
.sealed-sub {
  color: var(--cinnabar); font-family: var(--font-han); font-size: 20px;
  letter-spacing: .2em; margin-bottom: 8px;
  text-shadow: 0 0 16px rgba(194,60,46,.3);
}
.sealed-verse {
  color: var(--muted); font-family: var(--font-serif); font-size: 17px;
  font-style: italic; max-width: 40ch; margin: 0 auto 28px;
  line-height: 1.6;
}
.sealed-content p:not(.sealed-sub):not(.sealed-verse) { color: var(--muted); margin-bottom: 24px; }

/* ========================================
   SCREEN SHAKE + GLITCH
   ======================================== */
@keyframes screen-shake {
  0% { transform: translate(0, 0); } 10% { transform: translate(-5px, 3px); }
  20% { transform: translate(4px, -4px); } 30% { transform: translate(-3px, 5px); }
  40% { transform: translate(5px, -2px); } 50% { transform: translate(-4px, 3px); }
  60% { transform: translate(3px, -5px); } 70% { transform: translate(-5px, 2px); }
  80% { transform: translate(4px, 4px); } 90% { transform: translate(-2px, -3px); }
  100% { transform: translate(0, 0); }
}
.screen-shake { animation: screen-shake 700ms ease-out; }

@keyframes glitch-flash {
  0% { opacity: 0; } 10% { opacity: .8; } 20% { opacity: 0; }
  30% { opacity: .4; } 40% { opacity: 0; } 100% { opacity: 0; }
}
.glitch-overlay {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: linear-gradient(0deg, transparent 48%, rgba(0,229,255,.15) 49%, rgba(194,60,46,.1) 50%, transparent 51%);
  animation: glitch-flash 400ms ease-out forwards;
}

/* ========================================
   KEYFRAMES
   ======================================== */
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes lock-breathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.045); filter: brightness(1.18); } }
@keyframes lock-spin { to { transform: rotate(360deg) scale(1.04); } }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 980px) {
  .gate-layout, .cosmos-panel { grid-template-columns: 1fr; }
  .gate-copy { order: 2; text-align: center; }
  .gate-stage { order: 1; min-height: 430px; }
  .culture-strip, .hero-actions, .closing-actions, .path-actions { justify-content: center; }
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oracle-coins-orbit { width: 260px; height: 260px; }
  .coin-orbit-ring { width: 220px; height: 220px; }
  .coin-orbit-ring-inner { width: 140px; height: 140px; }
  .coin { width: 72px; font-size: 28px;
    transform: rotate(var(--orbit-angle)) translateX(100px) rotate(calc(var(--orbit-angle) * -1)) translate(-50%, -50%);
  }
  .oracle-trigrams-float span { font-size: 28px; }
  .wuxing-bagua-mandala { width: 150px; }
  .mandala-outer span { font-size: 16px; }
  .mandala-wuxing span { font-size: 14px; }
  .mandala-taiji { width: 36px; }
  .portal-mandala { width: 180px; }
  .portal-mandala-trigrams span { font-size: 18px; }
  .portal-mandala-wuxing span { font-size: 14px; }
  .portal-mandala-taiji { width: 42px; }
  .seal-ring { width: 280px; height: 280px; }
  .seal-trigram-orbit span { transform: rotate(calc(var(--sto-i) * 45deg)) translateY(-130px) rotate(calc(var(--sto-i) * -45deg)); }
}
@media (max-width: 640px) {
  .topbar { display: none; }
  .brand__text { display: none; }
  .topbar nav { gap: 12px; font-size: 11px; }
  .bagua-orbit { width: min(390px, 88vw); }
  .bagua-orbit span { transform: rotate(var(--a)) translateX(min(195px, 44vw)) rotate(calc(var(--a) * -1)); }
  .path-grid { grid-template-columns: 1fr; }
  .btn, .hero-actions a, .hero-actions button { width: 100%; }
  .ritual-altar { padding: 30px 16px 40px; }
  .ritual-invocation h2 { font-size: 36px; }
  .oracle-coins-orbit { width: 200px; height: 200px; top: -30px; right: -30px; }
  .coin-orbit-ring { width: 160px; height: 160px; }
  .coin-orbit-ring-inner { width: 100px; height: 100px; }
  .coin { width: 56px; font-size: 22px;
    transform: rotate(var(--orbit-angle)) translateX(68px) rotate(calc(var(--orbit-angle) * -1)) translate(-50%, -50%);
  }
  .oracle-trigrams-float { display: none; }
  .portal-row { grid-template-columns: 1fr 28px 1fr; gap: 8px; }
  .energy-portal { padding: 20px 14px 16px; max-width: 160px; }
  .portal-symbol { font-size: 28px; }
  .celestial-row { grid-template-columns: 1fr 16px 1fr 16px 1fr; }
  .ink-input-celestial { font-size: 18px; padding: 10px 2px; }
  .reading-float-symbols { display: none; }
  .wuxing-bagua-mandala { width: 120px; }
  .mandala-outer span { font-size: 14px; }
  .mandala-wuxing span { font-size: 12px; }
  .mandala-taiji { width: 28px; }
  .portal-mandala { width: 140px; }
  .portal-mandala-trigrams span { font-size: 14px; }
  .portal-mandala-wuxing span { font-size: 12px; }
  .portal-mandala-taiji { width: 32px; }
  .seal-ring { width: 240px; height: 240px; }
  .seal-stamp { font-size: 80px; }
  .seal-trigram-orbit span { transform: rotate(calc(var(--sto-i) * 45deg)) translateY(-110px) rotate(calc(var(--sto-i) * -45deg)); font-size: 12px; }
  .seal-circle { width: 120px; height: 120px; }
  .seal-char { font-size: 52px; }
  .shrine-rays { display: none; }
  .door-rune { font-size: 80px; }
  .btn-cast { width: 100%; padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  .path-card { opacity: 1 !important; transform: none !important; }
  .ritual-station { opacity: 1 !important; max-height: none !important; transform: none !important; overflow: visible !important; pointer-events: auto !important; }
}

/* ================================================
   AUTH OVERLAY — Immersive Mystical Design
   ================================================ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,12,.94);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 400ms;
}
.auth-overlay:not([hidden]) { opacity: 1; visibility: visible; }

.auth-card, .pricing-card, .history-card {
  position: relative;
  max-width: 420px; width: calc(100% - 32px); max-height: 90vh;
  overflow-y: auto; overflow-x: hidden;
  padding: 0;
  border: 1px solid rgba(194,60,46,.2);
  border-radius: 20px;
  background: linear-gradient(175deg, rgba(18,14,20,.98) 0%, rgba(10,8,12,.99) 100%);
  box-shadow:
    0 0 80px rgba(194,60,46,.08),
    0 0 160px rgba(5,7,12,.5),
    inset 0 1px 0 rgba(217,185,104,.06);
  transform: scale(.92) translateY(16px);
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.auth-overlay:not([hidden]) .auth-card,
.auth-overlay:not([hidden]) .pricing-card,
.auth-overlay:not([hidden]) .history-card { transform: scale(1) translateY(0); }

/* ── Decorative background mandala ── */
.auth-card-bg {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden; border-radius: 20px;
}
.auth-card-ring {
  position: absolute; top: -60%; left: -30%; width: 160%; height: 160%;
  border-radius: 50%;
  border: 1px solid rgba(194,60,46,.04);
  animation: auth-ring-drift 25s linear infinite;
}
.auth-card-ring-2 {
  top: -70%; left: -40%; width: 180%; height: 180%;
  border-color: rgba(217,185,104,.03);
  animation-direction: reverse; animation-duration: 35s;
}
@keyframes auth-ring-drift { to { transform: rotate(360deg); } }

.auth-card-char {
  position: absolute;
  font-family: var(--font-han); font-size: 28px;
  color: rgba(194,60,46,.04);
  --a: calc(var(--acc-i) * 45deg);
  animation: auth-char-float 12s ease-in-out infinite alternate;
}
.auth-card-char:nth-child(3) { top: 8%; left: 12%; --a: 0deg; animation-delay: 0s; }
.auth-card-char:nth-child(4) { top: 5%; right: 15%; --a: 45deg; animation-delay: -1.5s; }
.auth-card-char:nth-child(5) { top: 40%; right: 8%; --a: 90deg; animation-delay: -3s; }
.auth-card-char:nth-child(6) { bottom: 25%; right: 10%; --a: 135deg; animation-delay: -4.5s; }
.auth-card-char:nth-child(7) { bottom: 8%; right: 20%; --a: 180deg; animation-delay: -6s; }
.auth-card-char:nth-child(8) { bottom: 5%; left: 18%; --a: 225deg; animation-delay: -7.5s; }
.auth-card-char:nth-child(9) { bottom: 30%; left: 6%; --a: 270deg; animation-delay: -9s; }
.auth-card-char:nth-child(10) { top: 35%; left: 10%; --a: 315deg; animation-delay: -10.5s; }
@keyframes auth-char-float {
  0% { transform: translateY(0) rotate(0deg); opacity: .5; }
  100% { transform: translateY(-6px) rotate(4deg); opacity: 1; }
}

/* ── Close button ── */
.auth-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(244,236,220,.03); border: 1px solid rgba(244,236,220,.06);
  border-radius: 50%; color: rgba(244,236,220,.35);
  font-size: 16px; cursor: pointer; line-height: 1;
  transition: all 250ms var(--ease);
}
.auth-close:hover {
  color: var(--paper); border-color: rgba(194,60,46,.35);
  background: rgba(194,60,46,.06);
  box-shadow: 0 0 20px rgba(194,60,46,.12);
}

/* ── Header — Seal + Title ── */
.auth-header {
  text-align: center;
  padding: 40px 32px 24px;
  position: relative;
}
.auth-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(150deg, rgba(194,60,46,.85), rgba(88,24,33,.95));
  color: var(--paper); font-family: var(--font-han);
  font-size: 28px; margin-bottom: 18px;
  border: 2px solid rgba(217,185,104,.15);
  box-shadow:
    0 0 40px rgba(194,60,46,.25),
    0 0 80px rgba(194,60,46,.08),
    inset 0 0 20px rgba(0,0,0,.3);
  animation: auth-seal-breathe 3.5s ease-in-out infinite;
}
@keyframes auth-seal-breathe {
  0%, 100% { box-shadow: 0 0 40px rgba(194,60,46,.25), 0 0 80px rgba(194,60,46,.08), inset 0 0 20px rgba(0,0,0,.3); transform: scale(1); }
  50% { box-shadow: 0 0 55px rgba(194,60,46,.4), 0 0 100px rgba(194,60,46,.12), inset 0 0 24px rgba(0,0,0,.3); transform: scale(1.04); }
}
.auth-header h2 {
  font-family: var(--font-serif); font-size: 28px;
  color: var(--gold); margin: 0;
  text-shadow: 0 0 40px rgba(217,185,104,.2);
  letter-spacing: .06em;
}
.auth-subtitle {
  margin: 8px 0 0; font-size: 13px;
  color: rgba(244,236,220,.3); font-style: italic;
  font-family: var(--font-serif); letter-spacing: .06em;
}

/* ── Tabs ── */
.auth-tabs {
  display: flex; gap: 0;
  margin: 0 32px;
  border-bottom: 1px solid rgba(194,60,46,.1);
  position: relative;
}
.auth-tab {
  flex: 1; padding: 12px 0;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: rgba(244,236,220,.35); font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer;
  transition: color 300ms, border-color 300ms, text-shadow 300ms;
}
.auth-tab:hover { color: rgba(244,236,220,.6); }
.auth-tab.is-active {
  color: var(--cinnabar); border-bottom-color: var(--cinnabar);
  text-shadow: 0 0 16px rgba(194,60,46,.3);
}

/* ── Form ── */
.auth-form {
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px 32px 32px;
}
.auth-form[hidden] { display: none; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-field label {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244,236,220,.4);
}

/* Input with icon */
.auth-input-wrap {
  position: relative; display: flex; align-items: center;
}
.auth-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: rgba(194,60,46,.3);
  pointer-events: none; z-index: 1;
  transition: color 300ms;
}
.auth-input-wrap:focus-within .auth-input-icon {
  color: rgba(194,60,46,.55);
}

.auth-input {
  width: 100%;
  background: rgba(244,236,220,.025);
  border: 1px solid rgba(194,60,46,.1);
  border-radius: 10px;
  padding: 13px 14px 13px 40px; color: var(--paper);
  font-family: var(--font-sans); font-size: 15px;
  caret-color: var(--cinnabar);
  transition: border-color 300ms, box-shadow 300ms, background 300ms;
}
.auth-input::placeholder { color: rgba(244,236,220,.18); }
.auth-input:focus {
  outline: none;
  border-color: rgba(194,60,46,.35);
  box-shadow: 0 0 24px rgba(194,60,46,.06), inset 0 0 16px rgba(194,60,46,.02);
  background: rgba(244,236,220,.04);
}

/* Password strength meter */
.auth-pwd-meter {
  height: 3px; border-radius: 3px;
  background: rgba(244,236,220,.06);
  overflow: hidden; margin-top: -2px;
}
.auth-pwd-bar {
  height: 100%; width: 0%; border-radius: 3px;
  transition: width 400ms var(--ease), background 400ms;
  background: rgba(244,236,220,.15);
}
.auth-pwd-bar.is-weak { width: 25%; background: #9d3341; }
.auth-pwd-bar.is-fair { width: 50%; background: #c28a2e; }
.auth-pwd-bar.is-good { width: 75%; background: var(--gold); }
.auth-pwd-bar.is-strong { width: 100%; background: var(--jade); }

.auth-password-hint {
  font-size: 11px; color: rgba(244,236,220,.3); margin-top: 2px;
}

.auth-error {
  color: #ff6b6b; font-size: 13px; min-height: 18px;
  padding: 0 2px;
}

/* ── Submit Button ── */
.auth-submit {
  padding: 15px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, rgba(194,60,46,.8) 0%, rgba(140,40,30,.95) 100%);
  color: var(--paper); font-family: var(--font-serif);
  font-size: 17px; font-weight: 600; letter-spacing: .1em;
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 0 30px rgba(194,60,46,.12), 0 6px 20px rgba(0,0,0,.3);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.auth-submit-icon {
  display: inline-block; margin-right: 6px; font-size: 14px;
  vertical-align: middle;
}
.auth-submit::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,213,79,.15), transparent 70%);
  opacity: 0; transform: scale(0);
  transition: opacity 400ms, transform 600ms;
}
.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 50px rgba(194,60,46,.2), 0 10px 28px rgba(0,0,0,.4);
}
.auth-submit:hover::after { opacity: 1; transform: scale(1.6); }
.auth-submit:active { transform: translateY(0); }

/* ── Footer Links ── */
.auth-footer-links {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 4px;
}
.auth-footer-links a {
  font-size: 12px; color: rgba(0,229,255,.5); text-decoration: none;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(0,229,255,.15);
  transition: color 200ms, border-color 200ms;
}
.auth-footer-links a:hover {
  color: var(--neon-cyan); border-bottom-color: var(--neon-cyan);
}

.auth-gift {
  text-align: center; padding: 10px 16px; border-radius: 8px;
  border: 1px solid rgba(217,185,104,.15);
  background: linear-gradient(135deg, rgba(217,185,104,.04), rgba(217,185,104,.01));
  color: var(--gold); font-size: 12px; letter-spacing: .02em;
}
.auth-gift strong { color: var(--neon-gold); }

.auth-success {
  text-align: center; padding: 32px;
  color: var(--gold); font-size: 15px; line-height: 1.6;
}
.auth-success-icon {
  font-size: 36px; margin-bottom: 12px;
  animation: auth-success-pulse 1.5s ease-in-out infinite;
}
@keyframes auth-success-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); text-shadow: 0 0 30px rgba(217,185,104,.5); }
}

/* AI Button State Styles */
.ai-btn-main { display: block; }
.ai-btn-sub {
  display: block; font-size: 11px; font-weight: 400;
  letter-spacing: .06em; opacity: .7; margin-top: 2px;
}

/* ================================================
   USER MENU (Topbar)
   ================================================ */
.user-menu { position: relative; margin-left: 12px; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,236,220,.08); color: var(--paper);
  font-family: var(--font-serif); font-size: 14px; font-weight: 600;
  border: 2px solid var(--line);
  transition: border-color 200ms;
}
.user-tier-badge {
  width: 8px; height: 8px; border-radius: 50%;
  position: absolute; bottom: 2px; right: 2px;
}
.user-tier-badge.is-seeker { background: var(--muted); }
.user-tier-badge.is-oracle { background: var(--gold); }
.user-tier-badge.is-mystic { background: var(--neon-cyan); }

.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px; padding: 12px 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(16,20,31,.98);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.user-dropdown-header {
  padding: 8px 16px; display: flex; align-items: baseline; gap: 8px;
}
.user-dropdown-name {
  color: var(--paper); font-weight: 600; font-size: 14px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-dropdown-tier {
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
.user-dropdown-credits {
  padding: 4px 16px 8px; color: var(--gold); font-size: 13px;
}
.user-dropdown-divider {
  border: none; border-top: 1px solid var(--line); margin: 4px 0;
}
.user-dropdown-item {
  display: block; padding: 8px 16px;
  color: var(--muted); text-decoration: none;
  font-size: 13px; transition: color 200ms, background 200ms;
}
.user-dropdown-item:hover {
  color: var(--paper); background: rgba(244,236,220,.04);
}

/* ================================================
   PRICING OVERLAY
   ================================================ */
.pricing-card { max-width: 720px; padding: 36px 32px; }
.pricing-header { text-align: center; margin-bottom: 28px; }
.pricing-sub {
  color: var(--muted); font-size: 14px; margin-top: 6px;
  font-style: italic;
}

.pricing-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 28px;
}
.pricing-tier {
  position: relative; padding: 24px 16px; border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(16,20,31,.5);
  text-align: center;
  transition: border-color 300ms, box-shadow 300ms;
}
.pricing-tier.is-current { border-color: rgba(244,236,220,.3); }
.pricing-tier-oracle {
  border-color: rgba(217,185,104,.3);
  box-shadow: 0 0 20px rgba(217,185,104,.06);
}
.pricing-tier h3 {
  font-family: var(--font-serif); font-size: 20px;
  color: var(--gold); margin: 0 0 8px;
}
.pricing-price {
  font-family: var(--font-serif); font-size: 28px;
  color: var(--paper); margin-bottom: 16px;
}
.pricing-price span { font-size: 14px; color: var(--muted); }
.pricing-features {
  list-style: none; padding: 0; margin: 0 0 20px;
  font-size: 13px; color: var(--muted); text-align: left;
}
.pricing-features li { padding: 4px 0; }
.pricing-features li::before { content: "✓ "; color: var(--jade); }
.pricing-features .pricing-disabled::before { content: "✗ "; color: var(--red); }
.pricing-features .pricing-disabled { opacity: .5; }

.pricing-popular {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 2px 12px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--black); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.pricing-badge {
  display: inline-block; padding: 4px 16px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.pricing-cta { width: 100%; font-size: 12px; padding: 10px; }
.pricing-cta:disabled { opacity: .4; cursor: not-allowed; }

/* ── Credit pack buttons ── */
.pricing-packs {
  display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
}
.pricing-pack-btn {
  width: 100%; font-size: 12px; padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 6px; text-align: left;
}
.pricing-pack-btn .pack-savings {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(217,185,104,.15); color: var(--gold);
  font-weight: 600; letter-spacing: .04em;
}
.pricing-pack-btn.is-loading,
.pricing-cta.is-loading {
  opacity: .6; pointer-events: none;
  position: relative;
}
.pricing-pack-btn.is-loading::after,
.pricing-cta.is-loading::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid transparent; border-top-color: var(--gold);
  border-radius: 50%; animation: pay-spin .6s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

/* ── Network label ── */
.pricing-network {
  color: var(--muted); font-size: 12px; margin-top: 4px;
  letter-spacing: .04em;
}
.pricing-network strong { color: var(--gold); }

/* ── Payment status ── */
.pricing-pay-status {
  text-align: center; padding: 20px 16px; margin: 16px 0;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(16,20,31,.6);
}
.pay-status-icon { font-size: 28px; margin-bottom: 8px; }
.pay-status-text { color: var(--paper); font-size: 15px; font-weight: 600; }
.pay-status-detail { color: var(--muted); font-size: 12px; margin-top: 4px; }

.pricing-faq { border-top: 1px solid var(--line); padding-top: 20px; }
.pricing-faq h3 {
  font-family: var(--font-serif); font-size: 18px;
  color: var(--gold); margin: 0 0 12px;
}
.pricing-faq details {
  border-bottom: 1px solid rgba(244,236,220,.06);
  padding: 10px 0;
}
.pricing-faq summary {
  color: var(--paper); font-size: 14px; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between;
}
.pricing-faq summary::after { content: "+"; color: var(--muted); }
.pricing-faq details[open] summary::after { content: "−"; }
.pricing-faq p { color: var(--muted); font-size: 13px; margin: 8px 0 0; line-height: 1.6; }

/* ================================================
   HISTORY PANEL
   ================================================ */
.history-card { max-width: 560px; padding: 36px 32px; }
.history-header { text-align: center; margin-bottom: 20px; }

.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item {
  padding: 12px 16px; border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(16,20,31,.4);
  cursor: pointer; transition: border-color 200ms, background 200ms;
}
.history-item:hover {
  border-color: rgba(194,60,46,.3);
  background: rgba(194,60,46,.04);
}
.history-item-header {
  display: flex; align-items: center; gap: 8px;
}
.history-item-han {
  font-family: var(--font-han); font-size: 20px; color: var(--gold);
}
.history-item-name {
  flex: 1; font-size: 14px; color: var(--paper);
}
.history-item-date {
  font-size: 11px; color: var(--muted);
}
.history-item-question {
  font-size: 13px; color: var(--muted); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-item-detail {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.7; color: var(--paper);
}

.history-pagination {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 16px;
}
.history-page-btn {
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 4px; background: none;
  color: var(--muted); font-size: 12px; cursor: pointer;
  transition: all 200ms;
}
.history-page-btn.is-active,
.history-page-btn:hover {
  border-color: var(--cinnabar); color: var(--cinnabar);
}

/* ================================================
   TOAST
   ================================================ */
.auth-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 101; padding: 12px 24px; border-radius: 8px;
  border: 1px solid rgba(217,185,104,.3);
  background: rgba(16,20,31,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--gold); font-size: 14px;
  opacity: 0; visibility: hidden;
  transition: opacity 400ms, transform 400ms var(--ease), visibility 400ms;
  pointer-events: none;
}
.auth-toast.is-visible {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ================================================
   MOBILE AUTH BUTTON
   ================================================ */
.mobile-auth-btn {
  display: none; position: fixed; top: 12px; right: 12px; z-index: 98;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(194,60,46,.4);
  background: rgba(16,20,31,.9); cursor: pointer;
  align-items: center; justify-content: center;
}
.mobile-auth-btn .auth-seal {
  width: 28px; height: 28px; font-size: 14px; margin: 0;
  box-shadow: none;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 980px) {
  .pricing-tiers { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto 28px; }
  .pricing-popular { top: -10px; }
}
@media (max-width: 640px) {
  .mobile-auth-btn { display: flex; }
  .user-menu { display: none !important; }
  .auth-form { padding: 24px 20px 28px; }
  .auth-header { padding: 32px 20px 20px; }
  .auth-tabs { margin: 0 20px; }
  .pricing-card { padding: 24px 16px; }
  .auth-header h2 { font-size: 24px; }
  .user-dropdown-name { max-width: 80px; }
}

/* ================================================
   CLIFFHANGER — Blur preview for free users
   ================================================ */
.ai-cliffhanger-blur {
  filter: blur(8px);
  user-select: none;
  transition: filter 300ms;
}
.ai-cliffhanger-cta {
  text-align: center; margin-top: 20px;
}

/* ================================================
   SHARE BUTTON
   ================================================ */

/* ================================================
   RITUAL THEMES — CSS variable overrides
   ================================================ */
:root, [data-theme="bronze"] {
  /* Default palette — already defined in :root, nothing to override */
}

[data-theme="jade"] {
  --gold: #4f907b;
  --gold-2: #2d5a4a;
  --cinnabar: #3d8b6e;
  --neon-cyan: #7ecba1;
  --neon-gold: #4f907b;
  --jade: #4f907b;
}
[data-theme="jade"] .btn-gold {
  background: linear-gradient(135deg, #6ab89a, var(--gold) 45%, var(--gold-2));
  color: #090a0e;
}

[data-theme="cinnabar"] {
  --gold: #e8a54b;
  --gold-2: #a83228;
  --cinnabar: #d94f3d;
  --neon-cyan: #ff8c69;
  --neon-gold: #ffd54f;
  --jade: #c23c2e;
}
[data-theme="cinnabar"] .btn-gold {
  background: linear-gradient(135deg, #f0c060, var(--gold) 45%, var(--gold-2));
  color: #090a0e;
}

/* ================================================
   USER DROPDOWN — Theme picker
   ================================================ */
.user-dropdown-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px !important; font-size: 13px; color: var(--muted);
}
.theme-options { display: flex; gap: 4px; }
.theme-btn {
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px;
  background: none; color: var(--muted); font-size: 10px;
  cursor: pointer; transition: all 200ms; text-transform: uppercase; letter-spacing: .04em;
}
.theme-btn:hover, .theme-btn.is-active {
  border-color: var(--gold); color: var(--gold);
}

/* ================================================
   REFERRAL OVERLAY
   ================================================ */
.referral-code-display {
  font-family: var(--font-sans); font-size: 28px; font-weight: 700;
  color: var(--gold); letter-spacing: .2em;
}

/* ================================================
   HISTORY — Delete + Upgrade CTA
   ================================================ */
.history-item-delete {
  background: none; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer; padding: 0 4px;
}
.history-item-delete:hover { color: #ff6b6b; }
.history-upgrade-cta {
  text-align: center; padding: 16px; margin-top: 12px;
  border: 1px solid rgba(194,60,46,.2); border-radius: 6px;
  color: var(--muted); font-size: 13px;
}
.history-upgrade-cta a { color: var(--cinnabar); cursor: pointer; }