:root {
  --xr-night: #07090b;
  --xr-ivory: #f7f0df;
  --xr-pearl: #e8edf0;
  --xr-aurora-cyan: #9ccdd1;
  --xr-aurora-gold: #d8b978;
  --xr-aurora-deep: #647f83;
}

/* 02 / Lunar Aurora. Every luminous field in this sheet is built from the
   approved raster plates. The original moon and sigil pixels remain untouched. */
.lunar-aurora-grain {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  object-fit: cover;
  opacity: .055;
  z-index: 54;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

/* Three deterministic raster-star families take turns breathing. The small
   phase offsets keep the sky alive without making the whole field flash as a
   single sheet. */
.lunar-background-stars {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.lunar-background-star {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}

/* The former CSS pin-dots remain only as a very faint depth bed underneath
   the independently breathing raster stars. */
.night-field::after { opacity: .07; }

.lunar-aurora-ambient {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.lunar-aurora-layer,
.xr-raster-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 1920px;
  height: 1080px;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.lunar-aurora-layer { transition: opacity 1.45s cubic-bezier(.22, 1, .36, 1); }
.lunar-aurora-veil-a { z-index: 1; }
.lunar-aurora-veil-b { z-index: 2; }
.lunar-aurora-dust { z-index: 3; }
.lunar-aurora-bokeh { z-index: 4; }

#root[data-interactive-state="prediction"] .lunar-aurora-veil-a,
[data-composition-id][data-interactive-state="prediction"] .lunar-aurora-veil-a { opacity: .22; }
#root[data-interactive-state="prediction"] .lunar-aurora-veil-b,
[data-composition-id][data-interactive-state="prediction"] .lunar-aurora-veil-b { opacity: .08; }
#root[data-interactive-state="prediction"] .lunar-aurora-dust,
[data-composition-id][data-interactive-state="prediction"] .lunar-aurora-dust { opacity: .25; }
#root[data-interactive-state="prediction"] .lunar-aurora-bokeh,
[data-composition-id][data-interactive-state="prediction"] .lunar-aurora-bokeh { opacity: .18; }

#root[data-interactive-state="locking"] .lunar-aurora-veil-a,
[data-composition-id][data-interactive-state="locking"] .lunar-aurora-veil-a { opacity: .30; }
#root[data-interactive-state="locking"] .lunar-aurora-veil-b,
[data-composition-id][data-interactive-state="locking"] .lunar-aurora-veil-b { opacity: .17; }
#root[data-interactive-state="locking"] .lunar-aurora-dust,
[data-composition-id][data-interactive-state="locking"] .lunar-aurora-dust { opacity: .31; }
#root[data-interactive-state="locking"] .lunar-aurora-bokeh,
[data-composition-id][data-interactive-state="locking"] .lunar-aurora-bokeh { opacity: .23; }

#root[data-interactive-state="armed"] .lunar-aurora-veil-a,
[data-composition-id][data-interactive-state="armed"] .lunar-aurora-veil-a { opacity: .36; }
#root[data-interactive-state="armed"] .lunar-aurora-veil-b,
[data-composition-id][data-interactive-state="armed"] .lunar-aurora-veil-b { opacity: .24; }
#root[data-interactive-state="armed"] .lunar-aurora-dust,
[data-composition-id][data-interactive-state="armed"] .lunar-aurora-dust { opacity: .35; }
#root[data-interactive-state="armed"] .lunar-aurora-bokeh,
[data-composition-id][data-interactive-state="armed"] .lunar-aurora-bokeh { opacity: .28; }

#root[data-interactive-state="accelerating"] .lunar-aurora-veil-a,
[data-composition-id][data-interactive-state="accelerating"] .lunar-aurora-veil-a { opacity: .48; }
#root[data-interactive-state="accelerating"] .lunar-aurora-veil-b,
[data-composition-id][data-interactive-state="accelerating"] .lunar-aurora-veil-b { opacity: .39; }
#root[data-interactive-state="accelerating"] .lunar-aurora-dust,
[data-composition-id][data-interactive-state="accelerating"] .lunar-aurora-dust { opacity: .46; }
#root[data-interactive-state="accelerating"] .lunar-aurora-bokeh,
[data-composition-id][data-interactive-state="accelerating"] .lunar-aurora-bokeh { opacity: .34; }

#root[data-interactive-state="orbiting"] .lunar-aurora-veil-a,
[data-composition-id][data-interactive-state="orbiting"] .lunar-aurora-veil-a { opacity: .43; }
#root[data-interactive-state="orbiting"] .lunar-aurora-veil-b,
[data-composition-id][data-interactive-state="orbiting"] .lunar-aurora-veil-b { opacity: .34; }
#root[data-interactive-state="orbiting"] .lunar-aurora-dust,
[data-composition-id][data-interactive-state="orbiting"] .lunar-aurora-dust { opacity: .43; }
#root[data-interactive-state="orbiting"] .lunar-aurora-bokeh,
[data-composition-id][data-interactive-state="orbiting"] .lunar-aurora-bokeh { opacity: .31; }

#root[data-interactive-state="stopping"] .lunar-aurora-veil-a,
[data-composition-id][data-interactive-state="stopping"] .lunar-aurora-veil-a { opacity: .53; }
#root[data-interactive-state="stopping"] .lunar-aurora-veil-b,
[data-composition-id][data-interactive-state="stopping"] .lunar-aurora-veil-b { opacity: .47; }
#root[data-interactive-state="stopping"] .lunar-aurora-dust,
[data-composition-id][data-interactive-state="stopping"] .lunar-aurora-dust { opacity: .52; }
#root[data-interactive-state="stopping"] .lunar-aurora-bokeh,
[data-composition-id][data-interactive-state="stopping"] .lunar-aurora-bokeh { opacity: .38; }

#root[data-interactive-state="result"] .lunar-aurora-veil-a,
[data-composition-id][data-interactive-state="result"] .lunar-aurora-veil-a { opacity: .20; }
#root[data-interactive-state="result"] .lunar-aurora-veil-b,
[data-composition-id][data-interactive-state="result"] .lunar-aurora-veil-b { opacity: .12; }
#root[data-interactive-state="result"] .lunar-aurora-dust,
[data-composition-id][data-interactive-state="result"] .lunar-aurora-dust { opacity: .24; }
#root[data-interactive-state="result"] .lunar-aurora-bokeh,
[data-composition-id][data-interactive-state="result"] .lunar-aurora-bokeh { opacity: .18; }

/* One approved orbit plate, split into a rear and foreground half at exactly
   the same coordinates. This gives the moon a real front/back relationship. */
.lunar-orbit-trail {
  position: absolute;
  left: 160px;
  top: 170px;
  width: 1600px;
  height: 760px;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  transition: opacity 1.15s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.lunar-orbit-trail img {
  display: block;
  width: 1600px;
  height: 760px;
  object-fit: contain;
}

.lunar-orbit-trail-rear {
  z-index: 8;
  clip-path: polygon(0 0, 100% 0, 100% 50.35%, 0 50.35%);
}

.lunar-orbit-trail-front {
  z-index: 18;
  clip-path: polygon(0 49.65%, 100% 49.65%, 100% 100%, 0 100%);
}

.lunar-orbit-star {
  position: absolute;
  left: 960px;
  top: 550px;
  width: 156px;
  height: 156px;
  margin: -78px 0 0 -78px;
  z-index: 19;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  transition: opacity .9s ease;
  will-change: transform, opacity;
}

.lunar-orbit-flow-particle {
  display: block;
  object-fit: contain;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

#root[data-interactive-state="armed"] .lunar-orbit-trail,
[data-composition-id][data-interactive-state="armed"] .lunar-orbit-trail { opacity: .56; }
#root[data-interactive-state="armed"] .lunar-orbit-star,
[data-composition-id][data-interactive-state="armed"] .lunar-orbit-star { opacity: .58; }
#root[data-interactive-state="accelerating"] .lunar-orbit-trail,
[data-composition-id][data-interactive-state="accelerating"] .lunar-orbit-trail { opacity: .96; }
#root[data-interactive-state="accelerating"] .lunar-orbit-star,
[data-composition-id][data-interactive-state="accelerating"] .lunar-orbit-star { opacity: .98; }
#root[data-interactive-state="orbiting"] .lunar-orbit-trail,
[data-composition-id][data-interactive-state="orbiting"] .lunar-orbit-trail { opacity: .84; }
#root[data-interactive-state="orbiting"] .lunar-orbit-star,
[data-composition-id][data-interactive-state="orbiting"] .lunar-orbit-star { opacity: .88; }
#root[data-interactive-state="stopping"] .lunar-orbit-trail,
[data-composition-id][data-interactive-state="stopping"] .lunar-orbit-trail { opacity: 1; }
#root[data-interactive-state="stopping"] .lunar-orbit-star,
[data-composition-id][data-interactive-state="stopping"] .lunar-orbit-star { opacity: 1; }

/* Retire the former vector orbit without affecting JS geometry calculations. */
.orbit-line,
.orbit-dot { opacity: 0 !important; }

/* The lunar breath and card aura reuse the approved soft-glint plate. */
.moon-bloom { background: url("../assets/vfx/lunar-aurora/soft-glint.png") center / contain no-repeat !important; }
.moon-shell::before { box-shadow: none !important; }
.moon-glint { background: url("../assets/vfx/lunar-aurora/soft-glint.png") 33% 27% / 62% 62% no-repeat !important; }

.beast-aura,
.tiger-aura,
.leopard-aura,
.giraffe-aura,
.zebra-aura,
.crow-aura {
  background: url("../assets/vfx/lunar-aurora/soft-glint.png") center / contain no-repeat !important;
  border: 0;
  box-shadow: none;
  mix-blend-mode: screen;
}

#root[data-interactive-state="prediction"] .orbit-anchor .beast-aura,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor .beast-aura {
  opacity: .20;
  transform: scale(.88);
}

#root[data-interactive-state="prediction"] .orbit-anchor:focus-visible .beast-aura,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor:focus-visible .beast-aura {
  opacity: .68;
  transform: scale(1.10);
}

@media (hover: hover) and (pointer: fine) {
  #root[data-interactive-state="prediction"] .orbit-anchor:hover .beast-aura,
  [data-composition-id][data-interactive-state="prediction"] .orbit-anchor:hover .beast-aura {
    opacity: .68;
    transform: scale(1.10);
  }
}

/* English is the visual anchor; Chinese is a small supporting label. */
.sigil-name {
  width: 108px;
  height: 34px;
  margin-top: -2px;
  padding: 4px 7px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-color: rgb(156 205 209 / 30%);
  background: rgb(7 9 11 / 82%);
  color: var(--xr-pearl);
  text-align: center;
  z-index: 3;
}

.sigil-name b {
  display: block;
  font: 700 10px/1 "Space Mono", monospace;
  letter-spacing: .17em;
}

.sigil-name small {
  display: block;
  color: rgb(232 237 240 / 68%);
  font: 400 8px/1 "Noto Sans JP", sans-serif;
  letter-spacing: .18em;
}

.orbit-anchor.is-predicted .sigil-name {
  border-color: rgb(216 185 120 / 66%);
  color: var(--xr-ivory);
}

/* 02 palette adjustments for the surrounding interface. */
.scene-mark,
.prediction-kicker,
.prediction-instruction-en,
.result-kicker,
.result-side-mark,
.cta-arrow { color: var(--xr-aurora-gold); }

.prediction-topline .rule,
.before-topline .rule { background: linear-gradient(90deg, transparent, rgb(156 205 209 / 30%)); }
.prediction-topline .rule:last-child,
.before-topline .rule:last-child { background: linear-gradient(90deg, rgb(156 205 209 / 30%), transparent); }
.prediction-title,
.before-title,
.result-title { color: var(--xr-ivory); }
.prediction-cn,
.before-cn,
.result-cn { color: rgb(232 237 240 / 76%); }

/* Approved result typography: 03 / Celestial Archive. The raster moon, sigils
   and result particles stay in their existing layers; only the reading zone,
   archive spine and typographic hierarchy change. */
.result-layout {
  z-index: 46;
}

.result-layout::before {
  content: "";
  position: absolute;
  left: 58px;
  top: 112px;
  width: 880px;
  height: 865px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(7 9 11 / 96%) 0%, rgb(7 9 11 / 79%) 70%, transparent 100%);
}

.result-copy {
  left: 148px;
  top: 165px;
  width: 720px;
  z-index: 2;
}

.result-kicker {
  gap: 0;
  color: var(--xr-aurora-gold);
  font-size: 17px;
  letter-spacing: .15em;
}

.result-kicker::before { display: none; }

.result-title {
  margin-top: 26px;
  font-size: 106px;
  line-height: .86;
  letter-spacing: -.045em;
  text-shadow: none;
}

#root[data-result-mode="miss"] .result-title,
[data-composition-id][data-result-mode="miss"] .result-title {
  font-size: 88px;
}

.result-cn {
  margin-top: 23px;
  color: var(--xr-pearl);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .14em;
}

.result-cn::after {
  content: "";
  display: block;
  width: 560px;
  height: 1px;
  margin-top: 25px;
  background: linear-gradient(90deg, rgb(216 185 120 / 66%), rgb(216 185 120 / 16%) 78%, transparent);
}

#root[data-result-mode="miss"] .result-cn,
[data-composition-id][data-result-mode="miss"] .result-cn {
  color: var(--xr-pearl);
}

#root[data-result-mode="miss"] .result-cn::after,
[data-composition-id][data-result-mode="miss"] .result-cn::after {
  background: linear-gradient(90deg, rgb(142 162 173 / 58%), rgb(142 162 173 / 14%) 78%, transparent);
}

.result-description-en {
  width: 620px;
  margin-top: 27px;
  color: var(--xr-ivory);
  font: 700 20px/1.45 "EB Garamond", Georgia, serif;
  letter-spacing: .035em;
}

.result-description-cn {
  width: 650px;
  margin-top: 17px;
  color: rgb(242 232 214 / 92%);
  font-size: 22px;
  line-height: 1.58;
  letter-spacing: .035em;
}

.result-description-cn span + span { margin-top: 5px; }

.result-traits {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.result-traits span {
  padding: 9px 12px;
  border-color: rgb(216 185 120 / 34%);
  color: var(--xr-ivory);
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .055em;
}

#root[data-result-mode="miss"] .result-traits span,
[data-composition-id][data-result-mode="miss"] .result-traits span {
  border-color: rgb(142 162 173 / 34%);
}

.result-action {
  width: 510px;
  margin-top: 24px;
  padding: 14px 0 12px;
  background: transparent;
}

.result-action-en {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 17px;
  letter-spacing: .08em;
}

.result-action-cn {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: .14em;
}

.result-side-mark {
  left: 80px;
  right: auto;
  top: 150px;
  bottom: 105px;
  width: 34px;
  z-index: 3;
  border-left: 1px solid rgb(216 185 120 / 52%);
  writing-mode: vertical-rl;
  color: var(--quiet);
  font: 700 11px/1 "Space Mono", monospace;
  letter-spacing: .14em;
}

.result-side-mark span,
.result-side-mark b {
  position: absolute;
  left: 9px;
  font: inherit;
}

.result-side-mark span { top: 0; }
.result-side-mark b { bottom: 0; color: var(--xr-aurora-gold); }

#root[data-result-mode="miss"] .result-side-mark,
[data-composition-id][data-result-mode="miss"] .result-side-mark {
  border-left-color: rgb(142 162 173 / 44%);
}

#root[data-result-mode="miss"] .result-side-mark b,
[data-composition-id][data-result-mode="miss"] .result-side-mark b {
  color: var(--xr-aurora-cyan);
}

/* Raster result system. The moon and drawn sigil remain in their native layers;
   these containers only hold approved aurora, bokeh, flare, glint and particles. */
#relic-fx-back,
#relic-fx-front,
#relic-particles {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  pointer-events: none;
}

#relic-fx-back { z-index: 12; mix-blend-mode: screen; }
#relic-fx-front { z-index: 41; mix-blend-mode: screen; }
#relic-particles { z-index: 43; mix-blend-mode: screen; }

.xr-mode,
.xr-semantic,
.xr-driver-pulse {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.xr-raster-mode {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.xr-raster-layer.xr-aurora-a { z-index: 1; }
.xr-raster-layer.xr-aurora-b { z-index: 2; }
.xr-raster-layer.xr-dust-field { z-index: 3; }
.xr-raster-layer.xr-depth-bokeh { z-index: 4; }
.xr-raster-layer.xr-anamorphic-flare { z-index: 5; }
.xr-raster-layer--aurora-a { z-index: 1; }
.xr-raster-layer--aurora-b { z-index: 2; }
.xr-raster-layer--dust { z-index: 3; }
.xr-raster-layer--bokeh { z-index: 4; }
.xr-raster-layer--flare { z-index: 5; }
.xr-raster-layer.xr-soft-glint {
  inset: auto;
  width: 560px;
  height: 560px;
  object-fit: contain;
  z-index: 6;
}

.xr-raster-layer--glint {
  right: auto;
  bottom: auto;
  object-fit: contain;
  z-index: 6;
}

.xr-mode--hit .xr-aurora-a { opacity: .94; }
.xr-mode--hit .xr-aurora-b { opacity: .88; }
.xr-mode--hit .xr-dust-field { opacity: .66; }
.xr-mode--hit .xr-depth-bokeh { opacity: .38; }
.xr-mode--hit .xr-anamorphic-flare { opacity: .72; }
.xr-mode--miss .xr-aurora-a { opacity: .52; }
.xr-mode--miss .xr-aurora-b { opacity: .12; }
.xr-mode--miss .xr-dust-field { opacity: .34; }
.xr-mode--miss .xr-depth-bokeh { opacity: .18; }
.xr-mode--miss .xr-anamorphic-flare { opacity: .06; }

.xr-raster-particles,
.xr-dom-particles,
.xr-impact-particles {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.xr-raster-particle,
.xr-dom-particle {
  position: absolute;
  left: var(--xr-x, 50%);
  top: var(--xr-y, 50%);
  display: block;
  width: var(--xr-size, 18px);
  height: var(--xr-size, 18px);
  opacity: 0;
  border: 0;
  background: url("../assets/vfx/lunar-aurora/soft-particle.png") center / contain no-repeat;
  object-fit: contain;
  mix-blend-mode: screen;
  transform: scale(.4);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.xr-raster-particle[src],
.xr-dom-particle[src] { background: none; }
.xr-mode--hit .xr-raster-particle,
.xr-mode--hit .xr-dom-particle { opacity: .82; }
.xr-mode--miss .xr-raster-particle,
.xr-mode--miss .xr-dom-particle { opacity: .46; }

.xr-selection-pulse-layer {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 44;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.xr-selection-glint {
  position: absolute;
  width: 320px;
  height: 320px;
  margin: 0;
  opacity: 0;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Any old vector relic nodes are deliberately silenced during the migration. */
.xr-line,
.xr-lunar-orbit,
.xr-lunar-arc,
.xr-card-frame,
.xr-ribbon,
.xr-ray,
.xr-star,
.xr-corona-ring,
.xr-heaven-slit,
.xr-heaven-echo,
.xr-impact-frame,
.xr-rain-streak,
.xr-orbit-node { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .lunar-aurora-layer,
  .lunar-orbit-trail,
  .lunar-orbit-star,
  .beast-aura { transition-duration: .01ms !important; }

  .xr-mode,
  .xr-raster-layer,
  .xr-raster-particle,
  .xr-dom-particle,
  .lunar-background-star { will-change: auto; }
}