:root {
  --bg: #030812;
  --panel: rgba(5, 14, 27, 0.72);
  --panel-strong: rgba(4, 10, 18, 0.88);
  --gold: #f6d178;
  --gold-2: #ffb84d;
  --teal: #47d6ff;
  --jade: #72f0c1;
  --rose: #ff7ba8;
  --ember: #ff754a;
  --text: #fff5d6;
  --muted: rgba(255, 241, 206, 0.66);
  --line: rgba(248, 203, 112, 0.35);
  --shadow-gold: 0 0 18px rgba(246, 209, 120, 0.44), 0 0 42px rgba(255, 184, 77, 0.18);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: radial-gradient(circle at 50% 46%, #10223c 0%, #071120 42%, #010409 100%);
}
button {
  font: inherit;
  border: 0;
  color: inherit;
  cursor: pointer;
}
button:disabled { cursor: not-allowed; opacity: 0.55; filter: grayscale(0.4); }
.screen {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.screen.is-active {
  opacity: 1;
  pointer-events: auto;
}
.glass-panel {
  border: 1px solid rgba(255, 219, 138, 0.27);
  background: linear-gradient(145deg, rgba(6, 14, 28, 0.78), rgba(9, 24, 45, 0.52));
  box-shadow: inset 0 0 0 1px rgba(70, 216, 255, 0.08), 0 16px 46px rgba(0,0,0,0.38);
  backdrop-filter: blur(14px);
}
.boot-screen { overflow: hidden; }
.boot-bg {
  position: absolute;
  inset: 0;
  background: url('../assets/ui/landing.png') center / cover no-repeat;
  opacity: 0.68;
  filter: saturate(1.06) contrast(1.05) brightness(0.82);
  transform: scale(1.03);
}
.boot-vignette, .result-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(246, 209, 120, 0.08), transparent 36%),
    linear-gradient(90deg, rgba(0,0,0,0.72), transparent 28%, transparent 72%, rgba(0,0,0,0.72)),
    linear-gradient(180deg, rgba(1,4,9,0.55), rgba(1,4,9,0.2) 36%, rgba(1,4,9,0.78));
}
.topbar, .ritual-hud {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 22px;
}
.profile-chip { display: flex; align-items: center; gap: 12px; }
.avatar-mini {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(248,214,128,0.3), rgba(5,10,22,0.8));
  border: 1px solid var(--line); box-shadow: var(--shadow-gold); font-size: 28px;
}
.profile-chip strong { display: block; letter-spacing: 0.08em; }
.profile-chip span, .ritual-hud small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.mini-nav { display: flex; gap: 10px; }
.mini-nav button, .ghost-btn, .secondary-btn {
  border: 1px solid rgba(246,209,120,0.3);
  background: rgba(6,13,26,0.56);
  border-radius: 999px;
  padding: 10px 16px;
  color: rgba(255,245,214,0.88);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.mini-nav button:hover, .ghost-btn:hover, .secondary-btn:hover { transform: translateY(-1px); border-color: rgba(246,209,120,0.65); background: rgba(255,196,77,0.1); }
.boot-main {
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: 92px 36px 36px;
}
.title-block { text-align: center; margin-top: 6px; text-shadow: var(--shadow-gold); }
.yin-yang { margin: 0 auto 3px; font-size: 28px; color: var(--gold); opacity: 0.9; }
.title-block h1 {
  margin: 0;
  font-size: clamp(52px, 7vw, 112px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: #ffe7a0;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.75));
}
.title-block p { margin: 18px 0 0; font-size: clamp(18px, 2vw, 28px); color: #f9d78b; letter-spacing: 0.38em; }
.matter-orbit {
  position: relative;
  width: min(900px, 78vw);
  height: min(560px, 54vh);
  margin-top: 4px;
}
.matter-orbit::before, .matter-orbit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(246,209,120,0.24);
  box-shadow: 0 0 55px rgba(31, 201, 255, 0.16), inset 0 0 55px rgba(246,209,120,0.09);
}
.matter-orbit::before { width: 60%; aspect-ratio: 1; animation: rotateSlow 24s linear infinite; }
.matter-orbit::after { width: 82%; aspect-ratio: 1; border-color: rgba(70,216,255,0.18); animation: rotateSlow 36s linear reverse infinite; }
.central-master {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -49%);
  width: min(250px, 24vw);
  z-index: 3;
  filter: drop-shadow(0 22px 42px rgba(0,0,0,0.76)) drop-shadow(0 0 24px rgba(246,209,120,0.34));
}
.central-master img { width: 100%; display: block; border-radius: 48%; mix-blend-mode: screen; }
.matter-seal {
  position: absolute;
  z-index: 4;
  width: 180px;
  min-height: 138px;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 14px 12px;
  border-radius: 28px;
  border: 1px solid rgba(255,225,160,0.32);
  background: radial-gradient(circle at 50% 8%, rgba(255,255,255,0.12), rgba(4,11,24,0.72) 55%, rgba(3,8,17,0.9));
  box-shadow: 0 20px 45px rgba(0,0,0,0.42), inset 0 0 35px rgba(255,255,255,0.04);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.matter-seal:hover, .matter-seal.is-selected { transform: translateY(-8px) scale(1.04); border-color: rgba(255,232,166,0.78); box-shadow: var(--shadow-gold), 0 22px 55px rgba(0,0,0,0.48); }
.seal-icon {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  font-size: 44px; font-weight: 900; color: #fff8d6;
  border: 1px solid rgba(255,255,255,0.22);
}
.matter-seal strong { font-size: 24px; letter-spacing: 0.18em; }
.matter-seal em { font-style: normal; font-size: 12px; color: var(--muted); }
.seal-wealth { left: 5%; top: 10%; }
.seal-study { right: 5%; top: 10%; }
.seal-career { left: 9%; bottom: 8%; }
.seal-love { right: 9%; bottom: 8%; }
.seal-wealth .seal-icon { background: radial-gradient(circle, rgba(255,232,132,0.95), rgba(145,88,4,0.55)); box-shadow: 0 0 30px rgba(255,194,69,0.55); }
.seal-study .seal-icon { background: radial-gradient(circle, rgba(99,225,255,0.95), rgba(14,61,141,0.55)); box-shadow: 0 0 30px rgba(71,216,255,0.5); }
.seal-career .seal-icon { background: radial-gradient(circle, rgba(128,255,207,0.88), rgba(8,98,78,0.55)); box-shadow: 0 0 30px rgba(114,240,193,0.44); }
.seal-love .seal-icon { background: radial-gradient(circle, rgba(255,138,176,0.95), rgba(136,22,68,0.55)); box-shadow: 0 0 30px rgba(255,123,168,0.5); }
.cta-panel { z-index: 5; display: grid; justify-items: center; gap: 10px; margin-bottom: 10px; }
.primary-cta {
  min-width: 250px;
  padding: 18px 42px;
  border-radius: 999px;
  color: #281907;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, #fff4c1, #f7c96a 56%, #d99a2a);
  border: 1px solid rgba(255,245,190,0.95);
  box-shadow: var(--shadow-gold), inset 0 2px 0 rgba(255,255,255,0.72);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.primary-cta:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.cta-panel p { margin: 0; color: var(--muted); }
.ritual-screen { background: radial-gradient(circle at center, #11233a, #02050a 70%); }
#webcam, #trackingCanvas, #threeLayer, #effectLayer {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#webcam { object-fit: cover; transform: scaleX(-1); opacity: 0.34; filter: brightness(0.62) saturate(0.78) contrast(1.12); }
#trackingCanvas { z-index: 8; pointer-events: none; }
#threeLayer { z-index: 4; pointer-events: none; }
#effectLayer { z-index: 9; pointer-events: none; overflow: hidden; }
.ritual-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 52%, transparent 0 28%, rgba(0,0,0,0.28) 54%, rgba(0,0,0,0.62) 100%);
}
.ritual-hud { z-index: 20; }
.ritual-hud strong { display: block; font-size: 22px; color: var(--gold); letter-spacing: 0.16em; }
.state-chip { padding: 10px 16px; border-radius: 999px; background: rgba(76,216,255,0.12); border: 1px solid rgba(76,216,255,0.25); color: #a9edff; }
.left-guide {
  position: absolute; left: 30px; top: 130px; width: 290px; padding: 22px; border-radius: 24px; z-index: 20;
}
.left-guide h3 { margin: 0 0 12px; color: var(--gold); letter-spacing: 0.18em; }
.left-guide p { margin: 0 0 18px; line-height: 1.7; color: rgba(255,245,214,0.86); }
.progress-shell { display: grid; gap: 8px; margin: 12px 0 18px; color: var(--muted); font-size: 13px; }
.progress-shell > div { height: 10px; background: rgba(255,255,255,0.1); border-radius: 99px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.progress-shell i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); box-shadow: 0 0 16px rgba(246,209,120,0.7); transition: width 0.1s linear; }
.guide-actions { display: grid; gap: 10px; }
.secondary-btn { border-radius: 18px; padding: 12px 16px; }
.card-ring {
  position: absolute;
  left: 50%; top: 54%;
  width: min(1060px, 76vw);
  height: min(640px, 68vh);
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
}
.tarot-card {
  position: absolute;
  width: clamp(86px, 8.2vw, 132px);
  aspect-ratio: 2/3;
  transform-style: preserve-3d;
  transition: left 0.85s cubic-bezier(.2,.9,.2,1), top 0.85s cubic-bezier(.2,.9,.2,1), transform 0.65s ease, opacity 0.45s ease, filter 0.3s ease;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55));
}
.card-face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(255,230,160,0.55);
  box-shadow: inset 0 0 18px rgba(255,220,128,0.15), 0 0 16px rgba(70,216,255,0.1);
}
.card-front { transform: rotateY(180deg); background: #071020; }
.card-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-back {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at center, rgba(255,219,126,0.2), transparent 25%),
    linear-gradient(135deg, rgba(239,178,75,0.24), rgba(3,10,23,0.95)),
    repeating-linear-gradient(45deg, rgba(255,230,160,0.08) 0 3px, transparent 3px 12px);
}
.card-back::before {
  content: '☯'; width: 58%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,230,160,0.5); color: #ffe79a; font-size: 38px; box-shadow: 0 0 28px rgba(255,210,88,0.24);
}
.tarot-card.is-hover { filter: drop-shadow(0 0 16px rgba(248,214,128,0.86)) drop-shadow(0 0 30px rgba(72,216,255,0.34)); transform: translate(-50%, -54%) rotate(var(--rot,0deg)) scale(1.09); }
.tarot-card.is-selected { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(1.28) rotateY(180deg); z-index: 30; }
.tarot-card.is-dimmed { opacity: 0.18; filter: blur(1px) grayscale(0.45); transform: translate(-50%, -50%) scale(0.88) rotate(var(--rot, 0deg)); }
.talisman {
  position: absolute; z-index: 24; left: 50%; top: 50%; width: 154px; height: 214px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8d37c, #d28831 52%, #805116);
  border: 2px solid rgba(255,244,182,0.92);
  box-shadow: var(--shadow-gold), 0 0 70px rgba(255,86,46,0.22);
  animation: talismanFloat 1.9s ease-in-out infinite;
}
.talisman.hidden { display: none; }
.talisman::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(74,40,4,0.5); border-radius: 8px; }
.talisman span { font-size: 82px; color: #3b1405; font-weight: 900; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.hand-pointer {
  position: fixed;
  left: 50%; top: 50%; z-index: 30;
  width: 34px; height: 34px;
  margin-left: -17px; margin-top: -17px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 12%, var(--teal) 13% 38%, rgba(72,216,255,0.1) 39% 100%);
  box-shadow: 0 0 16px rgba(72,216,255,0.92), 0 0 38px rgba(246,209,120,0.42);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.12s linear;
}
.hand-pointer.is-visible { opacity: 1; }
.hand-pointer.is-pinching { transform: scale(0.74); background: radial-gradient(circle, #fff 0 13%, var(--gold) 14% 48%, rgba(246,209,120,0.1) 49% 100%); }
.result-screen, .share-screen { z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,0.68); }
.result-bg { background: radial-gradient(circle at 50% 20%, rgba(246,209,120,0.15), transparent 45%), rgba(1,4,9,0.7); }
.result-card {
  position: relative;
  width: min(980px, 92vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 32px;
  padding: 36px;
  z-index: 5;
}
.close-btn { position: absolute; right: 20px; top: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); }
.result-kicker { color: var(--gold); letter-spacing: 0.28em; text-align: center; }
.result-card h2 { margin: 10px 0 12px; text-align: center; font-size: 44px; color: #ffe49b; text-shadow: var(--shadow-gold); }
.result-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.result-meta span { padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(246,209,120,0.22); color: var(--muted); }
.result-card blockquote { margin: 16px auto 26px; max-width: 760px; text-align: center; font-size: 28px; line-height: 1.55; color: #fff6d7; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.result-grid article { border: 1px solid rgba(246,209,120,0.18); border-radius: 20px; padding: 18px; background: rgba(3,8,17,0.38); }
.result-grid h3 { margin: 0 0 8px; color: var(--gold); }
.result-grid p, .effect-line, .safe-note { line-height: 1.75; color: rgba(255,245,214,0.84); }
.effect-line { margin: 18px 0 0; text-align: center; color: #bbefff; }
.safe-note { text-align: center; font-size: 13px; color: rgba(255,245,214,0.56); }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.share-wrap { display: grid; grid-template-columns: auto 280px; align-items: center; gap: 24px; }
.share-card {
  position: relative;
  width: min(390px, 82vw);
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255,229,152,0.72);
  box-shadow: var(--shadow-gold), 0 30px 80px rgba(0,0,0,0.65);
  background: #06101e;
}
.share-card-bg { position: absolute; inset: 0; background: url('../assets/ui/landing.png') center / cover no-repeat; opacity: 0.28; filter: blur(1px) saturate(0.95); }
.share-card::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,229,152,0.42); border-radius: 22px; }
.share-card-inner { position: relative; z-index: 2; height: 100%; padding: 30px 28px; display: grid; justify-items: center; align-content: space-between; text-align: center; }
.share-logo { color: var(--gold); letter-spacing: 0.18em; font-size: 18px; }
.share-symbol { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; color: #fff7d8; font-size: 78px; background: radial-gradient(circle, rgba(246,209,120,0.23), rgba(70,216,255,0.06)); border: 1px solid rgba(246,209,120,0.5); box-shadow: var(--shadow-gold); }
.share-card h2 { margin: 0; font-size: 38px; color: #ffe9a8; }
.share-meta { margin: 0; color: var(--teal); }
.share-card blockquote { margin: 0; font-size: 24px; line-height: 1.55; color: #fff8dd; }
#shareComment { color: rgba(255,245,214,0.82); line-height: 1.65; }
.share-footer { font-size: 12px; color: rgba(255,245,214,0.54); }
.share-actions { border-radius: 24px; padding: 22px; display: grid; gap: 12px; }
.fire-particle, .rain-line, .wind-line, .thunder-line { position: absolute; pointer-events: none; }
.fire-particle { bottom: 16%; width: 12px; height: 26px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 20%, #fff1a3, #ff8a2c 50%, rgba(255,60,20,0)); animation: fireRise 1.6s ease-out forwards; filter: blur(0.2px); }
.rain-line { top: -10%; width: 2px; height: 70px; border-radius: 99px; background: linear-gradient(180deg, rgba(180,235,255,0), rgba(180,235,255,0.8)); animation: rainFall 1.1s linear forwards; }
.wind-line { left: 50%; top: 50%; width: 160px; height: 2px; background: linear-gradient(90deg, rgba(141,255,220,0), rgba(141,255,220,0.82), rgba(141,255,220,0)); transform-origin: left center; animation: windSpin 1.6s ease-out forwards; }
.thunder-line { left: 50%; top: 8%; width: 4px; height: 42%; background: #e9fbff; box-shadow: 0 0 20px #71e4ff, 0 0 60px #fff; clip-path: polygon(45% 0, 75% 38%, 58% 38%, 84% 100%, 16% 48%, 40% 48%); animation: thunderFlash 0.95s ease-out forwards; }
.effect-flash { position: absolute; inset: 0; background: rgba(255,255,255,0.32); animation: flash 0.8s ease-out forwards; }
@keyframes rotateSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes talismanFloat { 0%,100% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg); } 50% { transform: translate(-50%, -50%) translateY(-12px) rotate(1deg); } }
@keyframes fireRise { to { transform: translateY(-60vh) scale(0.18); opacity: 0; } }
@keyframes rainFall { to { transform: translateY(120vh); opacity: 0.1; } }
@keyframes windSpin { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(0.2); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--a) + 80deg)) translateX(360px) scaleX(1.25); } }
@keyframes thunderFlash { 0%, 100% { opacity: 0; transform: translateX(-50%) scaleY(0.8); } 10%, 45% { opacity: 1; transform: translateX(-50%) scaleY(1.03); } 70% { opacity: 0.25; } }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 900px) {
  .mini-nav, .left-guide { display: none; }
  .topbar, .ritual-hud { left: 14px; right: 14px; top: 14px; }
  .title-block h1 { font-size: 46px; }
  .matter-orbit { width: 100vw; height: 52vh; }
  .matter-seal { width: 132px; min-height: 112px; padding: 10px; }
  .seal-icon { width: 54px; height: 54px; font-size: 31px; }
  .matter-seal strong { font-size: 19px; }
  .matter-seal em { display: none; }
  .result-grid { grid-template-columns: 1fr; }
  .share-wrap { grid-template-columns: 1fr; justify-items: center; }
}

/* ===== V1.1 interaction + visual polish ===== */
.boot-bg { opacity: 0.52; filter: saturate(1.12) contrast(1.1) brightness(0.72); }
.boot-vignette {
  background:
    radial-gradient(circle at 50% 46%, rgba(246, 209, 120, 0.16), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(70, 216, 255, 0.09), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,0.80), transparent 30%, transparent 70%, rgba(0,0,0,0.80)),
    linear-gradient(180deg, rgba(1,4,9,0.72), rgba(1,4,9,0.16) 38%, rgba(1,4,9,0.86));
}
.topbar { top: 18px; left: 28px; right: 28px; padding: 10px 16px; }
.boot-main { padding: 74px 36px 28px; grid-template-rows: auto minmax(400px, 1fr) auto; }
.title-block { margin-top: 0; }
.title-block h1 { font-size: clamp(48px, 5.6vw, 92px); letter-spacing: 0.055em; }
.title-block p { margin-top: 10px; font-size: clamp(16px, 1.55vw, 22px); letter-spacing: 0.32em; }
.matter-orbit { width: min(1120px, 84vw); height: min(550px, 54vh); margin-top: -4px; }
.matter-orbit::before { width: 52%; opacity: 0.86; }
.matter-orbit::after { width: 74%; opacity: 0.76; }
.matter-orbit::before, .matter-orbit::after { animation-duration: 18s; }
.central-master { width: min(245px, 20vw); }
.central-master::before {
  content: '';
  position: absolute;
  left: 50%; top: 62%;
  width: 128%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(246,209,120,0.32) 0 5deg, transparent 5deg 10deg),
    radial-gradient(circle, rgba(246,209,120,0.18), transparent 61%);
  filter: blur(0.1px);
  z-index: -1;
  animation: bootHaloSpin 16s linear infinite;
}
.central-master::after {
  content: '请先择一事';
  position: absolute;
  left: 50%; bottom: -18px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(255,232,166,0.86);
  border: 1px solid rgba(246,209,120,0.28);
  background: rgba(3,8,17,0.56);
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: 0.14em;
  font-size: 13px;
}
.matter-seal { width: 168px; min-height: 124px; border-radius: 24px; }
.seal-wealth { left: 9%; top: 7%; }
.seal-study { right: 9%; top: 7%; }
.seal-career { left: 13%; bottom: 5%; }
.seal-love { right: 13%; bottom: 5%; }
.matter-seal.is-selected::after {
  content: '已选';
  position: absolute;
  top: -10px; right: -8px;
  color: #2d1804;
  background: linear-gradient(180deg, #fff4bd, #f6c45b);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-gold);
}
.cta-panel { margin-bottom: 2px; }
.primary-cta { min-width: 280px; }

#trackingCanvas { mix-blend-mode: screen; }
.hand-pointer {
  width: 44px; height: 44px;
  margin-left: -22px; margin-top: -22px;
  background:
    radial-gradient(circle, #fff 0 8%, #fff2a9 9% 15%, var(--teal) 16% 32%, rgba(72,216,255,0.12) 33% 100%);
  box-shadow: 0 0 18px rgba(72,216,255,1), 0 0 54px rgba(246,209,120,0.58), 0 0 86px rgba(72,216,255,0.22);
}
.hand-pointer::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(246,209,120,0.38);
  animation: pointerPulse 0.9s ease-out infinite;
}
.hand-pointer.is-pinching { transform: scale(0.66); box-shadow: 0 0 24px rgba(255,224,136,1), 0 0 70px rgba(255,113,54,0.46); }
.card-ring { width: min(1120px, 82vw); height: min(660px, 70vh); }
.tarot-card { transition-duration: 0.48s, 0.48s, 0.28s, 0.28s, 0.18s; }
.tarot-card.is-hover::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 22px;
  border: 2px solid rgba(255,236,166,0.72);
  box-shadow: 0 0 24px rgba(246,209,120,0.85), 0 0 52px rgba(70,216,255,0.38);
  animation: cardHoverBreath 0.72s ease-in-out infinite alternate;
}
.left-guide { width: 315px; }
.progress-shell > div { height: 13px; box-shadow: inset 0 0 18px rgba(0,0,0,0.42); }
.progress-shell i { background: linear-gradient(90deg, #47d6ff, #72f0c1, #f6d178, #ff754a); }

.spell-guide {
  position: absolute;
  right: 30px;
  top: 130px;
  z-index: 26;
  width: 300px;
  padding: 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.spell-guide.is-visible { opacity: 1; transform: translateX(0); }
.spell-guide strong { display: block; color: var(--gold); letter-spacing: 0.18em; margin-bottom: 6px; }
.spell-guide p { margin: 0; color: rgba(255,245,214,0.78); line-height: 1.55; font-size: 13px; }
.gesture-diagram { width: 112px; height: 92px; flex: 0 0 auto; display: grid; place-items: center; }
.gesture-diagram svg { width: 112px; height: 92px; overflow: visible; filter: drop-shadow(0 0 12px rgba(246,209,120,0.45)); }
.gesture-diagram .palm { fill: rgba(246,209,120,0.10); stroke: rgba(255,236,166,0.55); stroke-width: 3; }
.gesture-diagram .finger-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }
.gesture-diagram .finger-line.main { stroke: #ffe8a1; animation: gestureLinePulse 1s ease-in-out infinite alternate; }
.gesture-diagram .finger-line.fold { stroke: rgba(92,230,255,0.5); stroke-width: 4; }
.gesture-diagram .spell-dot { fill: #fff; stroke: #f6d178; stroke-width: 3; animation: spellDotPulse 0.9s ease-in-out infinite alternate; }

.spell-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  margin-left: -60px; margin-top: -60px;
  border-radius: 50%;
  border: 2px solid rgba(255,238,170,0.85);
  box-shadow: 0 0 32px rgba(246,209,120,0.55), inset 0 0 28px rgba(70,216,255,0.18);
  animation: spellRingExpand 1.45s ease-out forwards;
}
.spell-ring-fire { border-color: rgba(255,151,67,0.9); box-shadow: 0 0 38px rgba(255,98,42,0.7); }
.spell-ring-thunder { border-color: rgba(198,246,255,0.95); box-shadow: 0 0 42px rgba(96,220,255,0.85); }
.spell-ring-rain { border-color: rgba(141,220,255,0.88); box-shadow: 0 0 36px rgba(88,180,255,0.58); }
.spell-ring-wind { border-color: rgba(151,255,218,0.9); box-shadow: 0 0 40px rgba(104,255,204,0.62); }
.rune-spark {
  position: absolute;
  z-index: 4;
  color: #ffe8a1;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(246,209,120,0.8), 0 0 34px rgba(70,216,255,0.42);
  animation: runeBurst 1.55s ease-out forwards;
}
.rune-fire { color: #ffbd73; }
.rune-thunder { color: #dffbff; }
.rune-rain { color: #afe8ff; }
.rune-wind { color: #b5ffe4; }
.fire-particle { width: 16px; height: 36px; box-shadow: 0 0 18px rgba(255,111,42,0.5); }
.thunder-line { width: 7px; height: 55%; }
.rain-line { height: 92px; box-shadow: 0 0 10px rgba(180,235,255,0.35); }
.wind-line { width: 230px; height: 3px; }

@keyframes bootHaloSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pointerPulse { from { transform: scale(0.7); opacity: 0.8; } to { transform: scale(1.35); opacity: 0; } }
@keyframes cardHoverBreath { from { opacity: 0.55; transform: scale(0.98); } to { opacity: 1; transform: scale(1.04); } }
@keyframes gestureLinePulse { from { stroke-dasharray: 8 10; stroke-dashoffset: 18; } to { stroke-dasharray: 26 3; stroke-dashoffset: 0; } }
@keyframes spellDotPulse { to { r: 8; opacity: 0.72; } }
@keyframes spellRingExpand { 0% { transform: scale(0.25) rotate(0deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: scale(7.2) rotate(160deg); opacity: 0; } }
@keyframes runeBurst { 0% { transform: translate(0,0) scale(0.5) rotate(0deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.28) rotate(220deg); opacity: 0; } }

@media (max-width: 1100px) {
  .spell-guide { right: 16px; top: auto; bottom: 110px; width: 260px; }
  .central-master { width: min(220px, 26vw); }
}

/* ===== V1.2 首页摄像头前置 + 移除顶部悬浮信息卡 ===== */
.boot-main {
  grid-template-rows: auto auto minmax(360px, 1fr) auto;
  padding-top: 34px;
}
.camera-first-panel {
  position: relative;
  z-index: 6;
  width: min(820px, 88vw);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  margin: 16px auto 6px;
  padding: 14px 16px 14px 20px;
  border-radius: 24px;
}
.camera-first-copy { display: grid; gap: 4px; }
.step-tag {
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  color: #1f1303;
  background: linear-gradient(180deg, #fff1b2, #f4c262);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  box-shadow: var(--shadow-gold);
}
.camera-first-copy strong {
  color: #ffe7a0;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.camera-first-copy p {
  margin: 0;
  color: rgba(255, 245, 214, 0.66);
  font-size: 13px;
}
.camera-cta {
  min-width: 150px;
  padding: 13px 20px;
  border-radius: 999px;
  color: #251503;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff3bf, #f7c668 56%, #d89624);
  border: 1px solid rgba(255,245,190,0.88);
  box-shadow: 0 0 18px rgba(246,209,120,0.38), inset 0 1px 0 rgba(255,255,255,0.72);
}
.camera-cta:disabled { filter: none; opacity: 0.78; }
.camera-status {
  min-width: 102px;
  text-align: center;
  padding: 9px 12px;
  border-radius: 999px;
  color: #a9edff;
  background: rgba(70,216,255,0.1);
  border: 1px solid rgba(70,216,255,0.24);
  font-size: 13px;
}
.matter-orbit.is-locked {
  opacity: 0.58;
  filter: grayscale(0.26) saturate(0.76);
}
.matter-orbit.is-locked .matter-seal {
  cursor: not-allowed;
  transform: none !important;
}
.matter-orbit.is-locked .central-master::after {
  content: '先开摄像头';
}

@media (max-width: 900px) {
  .boot-main { padding-top: 18px; grid-template-rows: auto auto minmax(340px, 1fr) auto; }
  .camera-first-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 10px;
    padding: 14px;
  }
  .camera-first-copy { justify-items: center; }
  .camera-first-copy p { display: none; }
}


/* ===== V1.3 重新洗牌动画 ===== */
.card-ring.is-shuffling .tarot-card {
  animation: reshufflePulse 0.86s ease both;
}
.card-ring.is-shuffling .tarot-card:nth-child(2n) { animation-delay: 0.04s; }
.card-ring.is-shuffling .tarot-card:nth-child(3n) { animation-delay: 0.08s; }
@keyframes reshufflePulse {
  0% { filter: drop-shadow(0 0 0 rgba(246,209,120,0)); transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.82); opacity: 0.36; }
  38% { filter: drop-shadow(0 0 28px rgba(246,209,120,0.9)) drop-shadow(0 0 48px rgba(70,216,255,0.42)); transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) + 16deg)) scale(1.12); opacity: 1; }
  100% { filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55)); transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}

/* ===== V1.4 摄像头提示卡收起 + 剑指画符 + 飞剑特效 ===== */
.camera-first-panel.is-hidden {
  display: none;
}
.camera-cta.is-opened {
  min-width: 190px;
  color: #0b2a23;
  background: linear-gradient(180deg, #d9fff1, #72f0c1 56%, #28a47e);
  border-color: rgba(178,255,231,0.92);
  box-shadow: 0 0 20px rgba(114,240,193,0.45), inset 0 1px 0 rgba(255,255,255,0.7);
}
.camera-cta.is-opened:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.gesture-diagram .pattern-frame {
  fill: rgba(5, 14, 27, 0.42);
  stroke: rgba(255,236,166,0.36);
  stroke-width: 2;
}
.gesture-diagram .pattern-line {
  fill: none;
  stroke: #ffe8a1;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(246,209,120,0.9));
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: drawPatternDemo 1.3s ease-in-out infinite;
}
.gesture-diagram .pattern-line:nth-of-type(3) { animation-delay: 0.22s; }
.gesture-diagram .pattern-text {
  fill: rgba(255,245,214,0.82);
  font-size: 14px;
  letter-spacing: 0.12em;
}
.flying-sword {
  position: absolute;
  z-index: 9;
  left: -12vw;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(42px, 5vw, 74px);
  color: #fff8d8;
  text-shadow:
    0 0 10px #fff,
    0 0 26px rgba(246,209,120,0.95),
    0 0 58px rgba(70,216,255,0.55);
  transform: translateY(var(--y)) rotate(var(--r));
  animation: flyingSword 0.92s cubic-bezier(.12,.74,.18,1) forwards;
  pointer-events: none;
}
.flying-sword::before {
  content: '';
  position: absolute;
  right: 78%;
  top: 50%;
  width: 260px;
  height: 4px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,238,160,0.75), rgba(70,216,255,0.22));
  box-shadow: 0 0 18px rgba(246,209,120,0.8);
  border-radius: 999px;
}
.sword-slash {
  position: absolute;
  left: 50%; top: 50%;
  width: 0;
  height: 6px;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff7d0, rgba(70,216,255,0));
  box-shadow: 0 0 26px rgba(246,209,120,0.9), 0 0 70px rgba(70,216,255,0.36);
  animation: swordSlash 0.76s ease-out forwards;
}
@keyframes drawPatternDemo {
  0% { stroke-dashoffset: 160; opacity: 0.38; }
  42% { opacity: 1; }
  78%, 100% { stroke-dashoffset: 0; opacity: 0.98; }
}
@keyframes flyingSword {
  0% { left: -12vw; opacity: 0; transform: translateY(var(--y)) rotate(var(--r)) scale(0.72); filter: blur(1px); }
  12% { opacity: 1; }
  100% { left: 112vw; opacity: 0; transform: translateY(calc(var(--y) * -0.2)) rotate(calc(var(--r) + 6deg)) scale(1.08); filter: blur(0); }
}
@keyframes swordSlash {
  0% { width: 0; opacity: 0; }
  24% { opacity: 1; }
  100% { width: min(74vw, 920px); opacity: 0; }
}


/* ===== V1.5 首页布局压缩 + 卡皮巴拉放大 + 抽卡视觉增强 ===== */
.boot-main {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.2vh, 16px);
  padding: clamp(16px, 2.8vh, 30px) clamp(18px, 3.2vw, 42px) clamp(18px, 3vh, 32px);
  align-items: center;
  overflow: hidden;
}
.title-block {
  transform: translateY(0);
}
.title-block h1 {
  font-size: clamp(42px, 5.05vw, 82px);
  line-height: 0.98;
}
.title-block p {
  margin-top: 8px;
  font-size: clamp(14px, 1.35vw, 20px);
  letter-spacing: clamp(0.12em, 0.36vw, 0.32em);
}
.yin-yang {
  font-size: clamp(22px, 2vw, 28px);
  margin-bottom: 0;
}
.camera-first-panel {
  width: min(760px, 86vw);
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  margin: 6px auto 0;
  padding: 10px 14px 10px 18px;
  border-radius: 22px;
}
.camera-first-copy strong {
  font-size: 17px;
}
.camera-first-copy p {
  font-size: 12px;
  line-height: 1.45;
}
.camera-cta {
  min-width: 144px;
  padding: 11px 18px;
}
.camera-status {
  min-width: 96px;
  padding: 8px 10px;
}
.matter-orbit {
  width: min(1220px, 93vw);
  height: min(620px, 58vh);
  min-height: 390px;
  margin-top: -4px;
}
.matter-orbit::before {
  width: min(520px, 46%);
}
.matter-orbit::after {
  width: min(760px, 70%);
}
.central-master {
  width: clamp(285px, 25.5vw, 390px);
  transform: translate(-50%, -48%);
}
.central-master::before {
  width: 138%;
  opacity: 0.95;
}
.central-master::after {
  bottom: -8px;
  font-size: 14px;
  padding: 6px 16px;
  background: rgba(3,8,17,0.68);
}
.matter-seal {
  width: clamp(145px, 13vw, 188px);
  min-height: clamp(104px, 10.6vw, 136px);
  padding: clamp(9px, 1vw, 14px) 12px;
  border-radius: 26px;
}
.seal-icon {
  width: clamp(56px, 5.8vw, 76px);
  height: clamp(56px, 5.8vw, 76px);
  font-size: clamp(32px, 3.5vw, 46px);
}
.matter-seal strong {
  font-size: clamp(19px, 2vw, 25px);
}
.matter-seal em {
  font-size: clamp(10px, 0.9vw, 12px);
}
.seal-wealth { left: clamp(8px, 4vw, 72px); top: 3%; }
.seal-study { right: clamp(8px, 4vw, 72px); top: 3%; }
.seal-career { left: clamp(24px, 8vw, 130px); bottom: 2%; }
.seal-love { right: clamp(24px, 8vw, 130px); bottom: 2%; }
.cta-panel {
  margin-bottom: 0;
  gap: 7px;
}
.primary-cta {
  min-width: 240px;
  padding: 15px 34px;
  font-size: 20px;
}
.cta-panel p {
  font-size: 13px;
  text-align: center;
}

.card-ring {
  width: min(1320px, 88vw);
  height: min(760px, 76vh);
}
.tarot-card {
  width: clamp(118px, 10.3vw, 178px);
  filter:
    drop-shadow(0 22px 38px rgba(0,0,0,0.66))
    drop-shadow(0 0 18px rgba(246,209,120,0.26));
}
.tarot-card::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 45%, rgba(246,209,120,0.24), transparent 58%),
    radial-gradient(circle at 50% 55%, rgba(70,216,255,0.16), transparent 70%);
  opacity: 0.72;
  filter: blur(8px);
  transform: translateZ(-1px);
  pointer-events: none;
}
.card-face {
  border: 2px solid rgba(255,232,166,0.7);
  border-radius: 20px;
  box-shadow:
    inset 0 0 22px rgba(255,220,128,0.2),
    inset 0 0 44px rgba(70,216,255,0.08),
    0 0 20px rgba(246,209,120,0.22),
    0 0 36px rgba(70,216,255,0.12);
}
.card-back {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,242,178,0.28), transparent 23%),
    radial-gradient(circle at center, rgba(70,216,255,0.10), transparent 48%),
    conic-gradient(from 0deg, rgba(246,209,120,0.18), rgba(70,216,255,0.08), rgba(246,209,120,0.18)),
    linear-gradient(135deg, rgba(239,178,75,0.31), rgba(3,10,23,0.96)),
    repeating-linear-gradient(45deg, rgba(255,230,160,0.11) 0 3px, transparent 3px 11px);
}
.card-back::before {
  width: 64%;
  font-size: clamp(40px, 4.2vw, 62px);
  background: radial-gradient(circle, rgba(255,240,170,0.12), rgba(2,8,18,0.4));
  box-shadow: 0 0 34px rgba(255,210,88,0.38), inset 0 0 24px rgba(70,216,255,0.12);
}
.card-back::after {
  content: '八卦命牌';
  position: absolute;
  left: 50%; bottom: 13%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(255,236,166,0.78);
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.18em;
  text-shadow: 0 0 14px rgba(246,209,120,0.6);
}
.tarot-card.is-hover {
  filter:
    drop-shadow(0 0 20px rgba(248,214,128,1))
    drop-shadow(0 0 46px rgba(72,216,255,0.52))
    drop-shadow(0 26px 40px rgba(0,0,0,0.66));
  transform: translate(-50%, -57%) rotate(var(--rot,0deg)) scale(1.16);
}
.tarot-card.is-hover::after {
  inset: -18px;
  border-radius: 30px;
  border: 2px solid rgba(255,241,184,0.92);
  box-shadow:
    0 0 28px rgba(246,209,120,0.96),
    0 0 68px rgba(70,216,255,0.52),
    inset 0 0 18px rgba(255,255,255,0.12);
}
.tarot-card.is-selected {
  transform: translate(-50%, -50%) scale(1.55) rotateY(180deg);
  filter:
    drop-shadow(0 0 30px rgba(246,209,120,0.94))
    drop-shadow(0 0 72px rgba(70,216,255,0.54))
    drop-shadow(0 30px 66px rgba(0,0,0,0.78));
}
.tarot-card.is-dimmed {
  opacity: 0.14;
  filter: blur(1.2px) grayscale(0.52);
}

.flying-sword {
  font-size: clamp(58px, 7vw, 112px);
  color: #fffbe6;
  text-shadow:
    0 0 10px #fff,
    0 0 32px rgba(246,209,120,1),
    0 0 82px rgba(70,216,255,0.78),
    0 0 120px rgba(255,117,74,0.25);
  animation-duration: 1.16s;
}
.flying-sword::before {
  width: 420px;
  height: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,248,210,0.92), rgba(70,216,255,0.46), rgba(255,255,255,0));
  box-shadow: 0 0 24px rgba(246,209,120,0.95), 0 0 54px rgba(70,216,255,0.52);
}
.sword-slash {
  height: 8px;
  box-shadow: 0 0 34px rgba(246,209,120,1), 0 0 92px rgba(70,216,255,0.52), 0 0 120px rgba(255,117,74,0.25);
  animation-duration: 0.98s;
}
.sword-slash.alt {
  transform: translate(-50%, -50%) rotate(21deg);
  animation-delay: 0.13s;
}
.sword-burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 180px; height: 180px;
  margin-left: -90px; margin-top: -90px;
  border-radius: 50%;
  border: 2px solid rgba(255,246,200,0.78);
  box-shadow:
    0 0 34px rgba(246,209,120,0.9),
    inset 0 0 36px rgba(70,216,255,0.32);
  animation: swordBurstV15 1.05s ease-out forwards;
}
@keyframes swordBurstV15 {
  0% { transform: scale(0.18) rotate(0deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: scale(5.8) rotate(120deg); opacity: 0; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .boot-main { padding-top: 12px; padding-bottom: 12px; gap: 6px; }
  .title-block h1 { font-size: clamp(38px, 4.4vw, 68px); }
  .title-block p { margin-top: 4px; font-size: 14px; }
  .camera-first-panel { margin-top: 2px; padding-top: 8px; padding-bottom: 8px; }
  .matter-orbit { height: min(510px, 56vh); min-height: 340px; }
  .central-master { width: clamp(245px, 23vw, 330px); }
  .matter-seal { width: clamp(132px, 12vw, 166px); min-height: 100px; }
  .seal-icon { width: 52px; height: 52px; font-size: 31px; }
  .matter-seal em { display: none; }
  .primary-cta { padding: 13px 30px; font-size: 18px; }
}

@media (max-width: 900px) {
  .boot-main { overflow-y: auto; padding-bottom: 18px; }
  .central-master { width: clamp(210px, 42vw, 285px); }
  .matter-orbit { height: min(520px, 58vh); min-height: 360px; }
  .matter-seal { width: 132px; min-height: 106px; }
  .seal-wealth { left: 4%; top: 5%; }
  .seal-study { right: 4%; top: 5%; }
  .seal-career { left: 8%; bottom: 4%; }
  .seal-love { right: 8%; bottom: 4%; }
  .tarot-card { width: clamp(94px, 18vw, 132px); }
}


/* ===== V1.6：卡阵收拢 + 卦牌显形悬浮展示 ===== */
.card-ring {
  width: min(940px, 68vw);
  height: min(590px, 64vh);
  top: 55%;
}
.tarot-card {
  width: clamp(96px, 8.6vw, 144px);
}
.tarot-card .card-front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.15), transparent 26%),
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.32));
  box-shadow: inset 0 0 28px rgba(246,209,120,0.22), inset 0 0 46px rgba(70,216,255,0.12);
}
.tarot-card.is-selected {
  transform: translate(-50%, -50%) scale(1.42) rotateY(180deg);
  filter: drop-shadow(0 0 22px rgba(246,209,120,0.86)) drop-shadow(0 0 58px rgba(70,216,255,0.46));
}

.hexagram-reveal {
  position: absolute;
  inset: 0;
  z-index: 32;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.hexagram-reveal.hidden { display: none; }
.hexagram-reveal.is-visible {
  display: grid;
  opacity: 1;
  animation: hexRevealIn 0.42s cubic-bezier(.18,.92,.18,1) both;
}
.hexagram-reveal.is-leaving {
  animation: hexRevealOut 0.36s ease forwards;
}
.hexagram-reveal-aura {
  position: absolute;
  left: 50%; top: 50%;
  width: 470px; height: 470px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(246,209,120,0.42) 0 5deg, transparent 5deg 11deg),
    radial-gradient(circle, rgba(70,216,255,0.26), rgba(246,209,120,0.12) 38%, transparent 64%);
  filter: drop-shadow(0 0 35px rgba(246,209,120,0.7)) drop-shadow(0 0 72px rgba(70,216,255,0.42));
  animation: hexAuraSpin 3.2s linear infinite;
}
.hexagram-reveal-aura::before,
.hexagram-reveal-aura::after {
  content: '';
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,235,170,0.55);
  box-shadow: inset 0 0 30px rgba(70,216,255,0.18), 0 0 30px rgba(246,209,120,0.26);
}
.hexagram-reveal-aura::after {
  inset: 86px;
  border-style: dashed;
  animation: hexAuraSpin 2.3s linear reverse infinite;
}
.hexagram-reveal-card {
  position: relative;
  width: clamp(230px, 22vw, 330px);
  aspect-ratio: 2/3;
  border-radius: 28px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  justify-items: center;
  padding: 14px 14px 18px;
  background:
    linear-gradient(145deg, rgba(255,239,177,0.26), rgba(5,12,26,0.86) 26%, rgba(2,7,16,0.94)),
    radial-gradient(circle at 50% 10%, rgba(246,209,120,0.24), transparent 46%);
  border: 2px solid rgba(255,237,174,0.86);
  box-shadow:
    0 0 0 1px rgba(70,216,255,0.34),
    0 0 34px rgba(246,209,120,0.92),
    0 0 88px rgba(70,216,255,0.42),
    inset 0 0 36px rgba(246,209,120,0.18);
  overflow: hidden;
  animation: hexCardFloat 2s ease-in-out infinite alternate;
}
.hexagram-reveal-card::before {
  content: '';
  position: absolute;
  inset: -42%;
  background: conic-gradient(from 0deg, transparent 0 16%, rgba(255,247,204,0.36) 20%, transparent 24% 48%, rgba(70,216,255,0.26) 52%, transparent 56% 100%);
  animation: hexBorderSweep 1.65s linear infinite;
}
.hexagram-reveal-card::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 22px;
  border: 1px solid rgba(255,235,170,0.34);
  box-shadow: inset 0 0 22px rgba(70,216,255,0.18);
}
.hexagram-reveal-card > * { position: relative; z-index: 1; }
.hexagram-reveal-tag {
  justify-self: center;
  margin-bottom: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: #2c1702;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, #fff6c8, #f6c76a);
  box-shadow: 0 0 18px rgba(246,209,120,0.55);
}
.hexagram-reveal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(255,235,170,0.34);
  box-shadow: inset 0 0 22px rgba(0,0,0,0.4), 0 0 24px rgba(0,0,0,0.35);
}
.hexagram-reveal-card strong {
  margin-top: 12px;
  font-size: 28px;
  color: #ffe8a1;
  letter-spacing: 0.18em;
  text-shadow: 0 0 18px rgba(246,209,120,0.76);
}
.hexagram-reveal-card em {
  margin-top: 4px;
  font-style: normal;
  color: rgba(255,245,214,0.75);
  letter-spacing: 0.1em;
  font-size: 13px;
}
.hex-reveal-spark {
  position: absolute;
  z-index: 31;
  color: #fff0aa;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(246,209,120,0.95), 0 0 34px rgba(70,216,255,0.55);
  animation: hexSparkFly 1.62s ease-out forwards;
}
@keyframes hexRevealIn {
  from { opacity: 0; transform: translateY(22px) scale(0.86); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes hexRevealOut {
  to { opacity: 0; transform: translateY(-18px) scale(1.08); filter: blur(8px); }
}
@keyframes hexAuraSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes hexBorderSweep {
  to { transform: rotate(360deg); }
}
@keyframes hexCardFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-12px) scale(1.025); }
}
@keyframes hexSparkFly {
  0% { transform: translate(0,0) scale(0.5) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.22) rotate(260deg); opacity: 0; }
}

@media (max-width: 1100px) {
  .card-ring { width: min(760px, 62vw); height: min(520px, 58vh); }
  .tarot-card { width: clamp(86px, 8.8vw, 124px); }
  .hexagram-reveal-aura { width: 390px; height: 390px; }
}
@media (max-width: 900px) {
  .card-ring { width: min(620px, 72vw); height: min(500px, 58vh); }
  .tarot-card { width: clamp(82px, 16vw, 116px); }
}

/* ===== V1.9-from-V1.8：右侧符咒、星空灵气背景、全局流畅度优化 ===== */
.glass-panel {
  backdrop-filter: blur(8px);
}
#webcam,
#trackingCanvas,
#threeLayer,
#effectLayer {
  will-change: opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.card-ring,
.tarot-card,
.spell-guide,
.talisman,
.hexagram-reveal {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
#webcam { z-index: 0; }
.ritual-screen {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 52%, rgba(70,216,255,0.16), transparent 33%),
    radial-gradient(circle at 78% 34%, rgba(255,117,74,0.10), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(246,209,120,0.12), transparent 30%),
    #02050a;
}
.ritual-screen::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    radial-gradient(circle, rgba(255,244,195,0.92) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(70,216,255,0.72) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,117,74,0.54) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(246,209,120,0.08), transparent 36%);
  background-size: 120px 120px, 190px 190px, 260px 260px, 100% 100%;
  background-position: 0 0, 40px 60px, 110px 80px, center;
  animation: altarStarDrift 18s linear infinite;
  mix-blend-mode: screen;
}
.ritual-screen::after {
  background:
    radial-gradient(circle at 50% 52%, transparent 0 24%, rgba(4,11,24,0.22) 48%, rgba(0,0,0,0.66) 100%),
    radial-gradient(circle at 42% 44%, rgba(70,216,255,0.13), transparent 34%),
    radial-gradient(circle at 67% 58%, rgba(246,209,120,0.10), transparent 30%);
}
@keyframes altarStarDrift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-80px, -60px, 0) rotate(0.001deg); }
}

/* 右侧法术符咒面板：不遮挡中央卦象 */
.spell-guide {
  right: clamp(18px, 2vw, 34px);
  top: 50%;
  width: clamp(240px, 17vw, 306px);
  min-height: 310px;
  padding: 18px 16px 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: start;
  gap: 10px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 32%, rgba(246,209,120,0.20), transparent 34%),
    linear-gradient(150deg, rgba(6,14,28,0.70), rgba(5,17,33,0.48));
  transform: translate3d(26px, -50%, 0) scale(0.96);
  --spell-x: 50%;
  --spell-y: 50%;
}
.spell-guide.is-visible {
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(1);
}
.spell-guide.is-casting {
  border-color: rgba(255,236,166,0.82);
  box-shadow:
    inset 0 0 0 1px rgba(70,216,255,0.14),
    0 0 28px rgba(246,209,120,0.40),
    0 18px 48px rgba(0,0,0,0.46);
}
.spell-guide.is-complete {
  opacity: 0;
  transform: translate3d(16px, -50%, 0) scale(0.88);
  filter: blur(4px) brightness(1.35);
}
.spell-guide::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,236,166,0.22);
  background:
    repeating-conic-gradient(from 0deg, rgba(246,209,120,0.12) 0 4deg, transparent 4deg 12deg),
    radial-gradient(circle, transparent 0 42%, rgba(70,216,255,0.06) 43% 52%, transparent 53%);
  opacity: 0.72;
  pointer-events: none;
  animation: spellPanelSpin 11s linear infinite;
}
.spell-guide::after {
  content: '';
  position: absolute;
  left: var(--spell-x);
  top: var(--spell-y);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(circle, #fff 0 14%, #ffe38b 15% 38%, rgba(70,216,255,0.32) 39% 72%, transparent 73%);
  box-shadow: 0 0 18px rgba(246,209,120,0.96), 0 0 42px rgba(70,216,255,0.46);
  opacity: 0;
  pointer-events: none;
}
.spell-guide.is-casting::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: left 0.045s linear, top 0.045s linear, transform 0.18s ease, opacity 0.18s ease;
}
@keyframes spellPanelSpin { to { transform: rotate(360deg); } }
.spell-guide .gesture-diagram {
  position: relative;
  z-index: 2;
  width: 174px;
  height: 154px;
  margin-top: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,239,177,0.13), rgba(70,216,255,0.06) 44%, transparent 65%);
  filter: drop-shadow(0 0 22px rgba(246,209,120,0.38));
}
.spell-guide .gesture-diagram svg {
  width: 174px;
  height: 154px;
}
.spell-guide .gesture-diagram .pattern-frame {
  fill: rgba(3,8,17,0.50);
  stroke: rgba(255,236,166,0.58);
  stroke-width: 2.4;
}
.gesture-diagram .pattern-aura {
  fill: none;
  stroke: rgba(70,216,255,0.30);
  stroke-width: 1.4;
  stroke-dasharray: 7 5;
  animation: spellAuraDash 3.4s linear infinite;
}
@keyframes spellAuraDash { to { stroke-dashoffset: -120; } }
.spell-guide .gesture-diagram .pattern-line {
  stroke-width: 9;
  filter: drop-shadow(0 0 10px rgba(246,209,120,1)) drop-shadow(0 0 18px rgba(70,216,255,0.32));
}
.spell-guide.is-casting .gesture-diagram .pattern-line {
  stroke: #fff6d2;
  animation-duration: 0.72s;
}
.spell-guide .spell-follow-dot {
  fill: #fff7d8;
  stroke: #47d6ff;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(246,209,120,0.96));
}
.spell-guide > div:last-child {
  position: relative;
  z-index: 2;
  text-align: center;
}
.spell-guide strong { font-size: 16px; }
.spell-guide p { font-size: 12px; }

.talisman {
  left: auto;
  right: clamp(48px, 4vw, 86px);
  top: calc(50% + 130px);
  width: 92px;
  height: 116px;
  margin: 0;
  transform: translate3d(0, -50%, 0) rotate(-2deg);
  z-index: 25;
  opacity: 0.96;
  box-shadow:
    0 0 22px rgba(246,209,120,0.62),
    0 0 48px rgba(70,216,255,0.22),
    0 18px 42px rgba(0,0,0,0.46);
  animation: talismanFloatRight 1.9s ease-in-out infinite;
}
.talisman span { font-size: 62px; }
.talisman.is-dissolving {
  animation: talismanDissolve 0.32s ease forwards;
}
@keyframes talismanFloatRight {
  0%,100% { transform: translate3d(0, -50%, 0) translateY(0) rotate(-2deg); }
  50% { transform: translate3d(0, -50%, 0) translateY(-9px) rotate(1deg); }
}
@keyframes talismanDissolve {
  0% { opacity: 1; filter: blur(0) brightness(1); }
  100% { opacity: 0; filter: blur(8px) brightness(1.8); transform: translate3d(18px, -50%, 0) scale(0.72) rotate(8deg); }
}

/* 轻量化粒子与卡牌优化 */
.card-ring {
  filter: drop-shadow(0 0 34px rgba(70,216,255,0.12));
}
.tarot-card {
  contain: layout paint style;
  transition-duration: 0.36s, 0.36s, 0.22s, 0.22s, 0.16s;
}
.tarot-card::before {
  filter: blur(5px);
}
.card-face {
  box-shadow:
    inset 0 0 18px rgba(255,220,128,0.18),
    inset 0 0 34px rgba(70,216,255,0.07),
    0 0 18px rgba(246,209,120,0.18),
    0 0 28px rgba(70,216,255,0.10);
}
.left-guide,
.ritual-hud,
.result-card,
.share-actions {
  backdrop-filter: blur(8px);
}
@media (max-width: 1180px) {
  .spell-guide {
    right: 14px;
    top: auto;
    bottom: 92px;
    transform: translate3d(20px, 0, 0) scale(0.94);
    width: 238px;
    min-height: 250px;
  }
  .spell-guide.is-visible { transform: translate3d(0, 0, 0) scale(1); }
  .spell-guide.is-complete { transform: translate3d(14px, 0, 0) scale(0.88); }
  .spell-guide .gesture-diagram, .spell-guide .gesture-diagram svg { width: 132px; height: 116px; }
  .talisman { right: 44px; top: auto; bottom: 14px; width: 72px; height: 92px; transform: none; }
  .talisman span { font-size: 48px; }
}


/* ===== V2.0 坐标热修复：恢复所有核心元素定位，避免 GPU transform 覆盖布局 ===== */
.ritual-screen .card-ring {
  left: 50%;
  top: 54%;
  width: min(880px, 56vw);
  height: min(620px, 66vh);
  min-width: 680px;
  min-height: 500px;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center;
  z-index: 15;
  pointer-events: none;
  filter: drop-shadow(0 0 32px rgba(70,216,255,0.16));
}
.ritual-screen .tarot-card {
  width: clamp(116px, 8.1vw, 156px);
  transform: translate3d(-50%, -50%, 0) rotate(0deg) !important;
  transform-origin: center center;
}
.ritual-screen .tarot-card.is-hover {
  transform: translate3d(-50%, -56%, 0) scale(1.13) !important;
}
.ritual-screen .tarot-card.is-selected {
  left: 50% !important;
  top: 50% !important;
  transform: translate3d(-50%, -50%, 0) scale(1.44) rotateY(180deg) !important;
}
.ritual-screen .tarot-card.is-dimmed {
  transform: translate3d(-50%, -50%, 0) scale(0.88) !important;
}
.ritual-screen .left-guide {
  left: clamp(16px, 2vw, 30px);
  top: 126px;
  width: clamp(260px, 17vw, 315px);
  z-index: 22;
}
.ritual-screen .spell-guide {
  right: clamp(16px, 2vw, 34px);
  top: 50%;
  transform: translate3d(26px, -50%, 0) scale(0.96);
  z-index: 26;
}
.ritual-screen .spell-guide.is-visible {
  transform: translate3d(0, -50%, 0) scale(1);
}
.ritual-screen .spell-guide.is-complete {
  transform: translate3d(16px, -50%, 0) scale(0.88);
}
.ritual-screen .hexagram-reveal {
  inset: 0;
  display: grid;
  place-items: center;
  transform: none !important;
  z-index: 32;
}
.ritual-screen .hexagram-reveal.hidden { display: none; }
.ritual-screen .talisman {
  left: auto;
  right: clamp(48px, 4vw, 86px);
  top: calc(50% + 130px);
  transform: translate3d(0, -50%, 0) rotate(-2deg);
}
@media (max-width: 1280px) {
  .ritual-screen .card-ring {
    width: min(740px, 58vw);
    height: min(560px, 62vh);
    min-width: 560px;
    min-height: 440px;
  }
  .ritual-screen .tarot-card { width: clamp(96px, 8.2vw, 130px); }
  .ritual-screen .left-guide { width: 260px; }
}
@media (max-width: 980px) {
  .ritual-screen .card-ring {
    top: 53%;
    width: 70vw;
    min-width: 0;
    height: 52vh;
    min-height: 400px;
  }
  .ritual-screen .tarot-card { width: clamp(82px, 14vw, 118px); }
  .ritual-screen .left-guide {
    top: auto;
    bottom: 18px;
    left: 14px;
    width: min(310px, 44vw);
  }
  .ritual-screen .spell-guide {
    top: auto;
    bottom: 18px;
    right: 14px;
    width: min(260px, 42vw);
    min-height: 230px;
    transform: translate3d(16px, 0, 0) scale(0.94);
  }
  .ritual-screen .spell-guide.is-visible { transform: translate3d(0, 0, 0) scale(1); }
  .ritual-screen .spell-guide.is-complete { transform: translate3d(12px, 0, 0) scale(0.88); }
}