:root {
  --night: #0b0908;
  --surface: #15110e;
  --moon: #e9ddc8;
  --moon-hi: #f7edda;
  --gold: #d0a763;
  --gold-deep: #71532d;
  --clay: #b95735;
  --moss: #31423d;
  --tiger-aura: #d0a763;
  --leopard-aura: #4f705b;
  --giraffe-aura: #8a7092;
  --zebra-aura: #8ea2ad;
  --crow-aura: #d7dce5;
  --text: #f2e8d6;
  --muted: #b9aa95;
  --quiet: #918473;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--night); }
body { color: var(--text); font-family: "Noto Sans JP", sans-serif; }
button { font: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; isolation: isolate; }
.clip { position: absolute; inset: 0; width: 100%; height: 100%; }

.night-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgb(113 83 45 / 18%) 0, transparent 36%),
    radial-gradient(circle at 84% 52%, rgb(49 66 61 / 18%) 0, transparent 35%),
    var(--night);
}
.night-field::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    radial-gradient(circle at 14px 11px, rgb(247 237 218 / 18%) 0 1px, transparent 1.2px),
    radial-gradient(circle at 39px 33px, rgb(208 167 99 / 12%) 0 1px, transparent 1.2px);
  background-size: 53px 47px, 71px 67px;
  mix-blend-mode: screen;
}
.edge-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 190px 64px var(--night); pointer-events: none; z-index: 55; }
.frame-line { position: absolute; inset: 18px; border: 1px solid rgb(241 231 213 / 7%); z-index: 56; pointer-events: none; }

.brand-lockup {
  position: absolute;
  left: 50%;
  top: 48px;
  translate: -50% 0;
  z-index: 48;
  text-align: center;
}
.brand-en { font: 700 18px/1 "Space Mono", monospace; letter-spacing: .28em; }
.brand-cn { margin-top: 9px; color: var(--quiet); font-size: 13px; letter-spacing: .35em; }
.scene-mark {
  position: absolute;
  right: 50px;
  top: 42px;
  z-index: 58;
  color: var(--quiet);
  font: 700 13px/1 "Space Mono", monospace;
  letter-spacing: .17em;
}

/* 05 / prediction — the player names a sign before the moon answers. */
.prediction-layout {
  position: absolute;
  inset: 0;
  z-index: 24;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.prediction-layout::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 514px;
  width: 1340px;
  height: 510px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(208 167 99 / 9%) 0, rgb(113 83 45 / 3%) 43%, transparent 72%);
  pointer-events: none;
}
.prediction-topline {
  position: absolute;
  left: 86px;
  right: 86px;
  top: 126px;
  z-index: 28;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  color: var(--gold);
  font: 700 12px/1 "Space Mono", monospace;
  letter-spacing: .24em;
}
.prediction-topline .rule { height: 1px; background: linear-gradient(90deg, transparent, rgb(208 167 99 / 34%)); }
.prediction-topline .rule:last-child { background: linear-gradient(90deg, rgb(208 167 99 / 34%), transparent); }
.prediction-copy,
.prediction-head {
  position: absolute;
  left: 50%;
  top: 154px;
  width: 1320px;
  translate: -50% 0;
  z-index: 28;
}
.prediction-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--gold);
  font: 700 12px/1 "Space Mono", monospace;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.prediction-kicker::before,
.prediction-kicker::after {
  content: "";
  width: 92px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(208 167 99 / 66%));
}
.prediction-kicker::after { transform: scaleX(-1); }
.prediction-title {
  margin: 25px 0 0;
  color: var(--text);
  font: 500 77px/.95 "EB Garamond", Georgia, serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-shadow: 0 12px 46px rgb(0 0 0 / 72%);
}
.prediction-cn {
  margin-top: 15px;
  color: rgb(218 207 188 / 84%);
  font-size: 14px;
  letter-spacing: .34em;
}
.prediction-instruction,
.prediction-note {
  position: absolute;
  left: 50%;
  bottom: 68px;
  translate: -50% 0;
  z-index: 28;
  color: var(--gold);
  font: 700 11px/1 "Space Mono", monospace;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.prediction-instruction-en { color: var(--gold); }
.prediction-instruction-cn {
  margin-top: 10px;
  color: var(--quiet);
  font: 400 12px/1.4 "Noto Sans JP", sans-serif;
  letter-spacing: .18em;
  text-transform: none;
}
.prediction-instruction::before,
.prediction-instruction::after { display: none; }
.prediction-instruction::before,
.prediction-instruction::after,
.prediction-note::before,
.prediction-note::after {
  content: "";
  display: inline-block;
  width: 52px;
  height: 1px;
  margin: 0 17px 4px;
  background: rgb(208 167 99 / 36%);
}

#root[data-interactive-state="prediction"] .prediction-layout { pointer-events: auto; }
#root[data-interactive-state="prediction"] .orbit-anchor,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor {
  cursor: pointer;
  outline: none;
  pointer-events: auto;
}
#root[data-interactive-state="prediction"] .orbit-anchor .sigil-shell,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor .sigil-shell {
  transition: transform .46s cubic-bezier(.22, 1, .36, 1);
}
#root[data-interactive-state="prediction"] .orbit-anchor .beast-aura,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor .beast-aura {
  transition: opacity .42s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
#root[data-interactive-state="prediction"] .orbit-anchor:focus-visible .sigil-shell,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor:focus-visible .sigil-shell {
  /* GSAP establishes the neutral shell transform inline. This state-scoped
     override keeps keyboard focus visible without affecting later phases. */
  transform: translateY(-5px) scale(1.06) !important;
}
#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.1);
}

@media (hover: hover) and (pointer: fine) {
  #root[data-interactive-state="prediction"] .orbit-anchor:hover .sigil-shell,
  [data-composition-id][data-interactive-state="prediction"] .orbit-anchor:hover .sigil-shell {
    /* Deliberately restrained: a 6% lift confirms mouseover without turning it
       into a click/selection animation. */
    transform: translateY(-5px) scale(1.06) !important;
  }

  #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.1);
  }
}
#root[data-interactive-state="prediction"] .orbit-anchor:focus-visible::after,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor:focus-visible::after {
  content: "";
  position: absolute;
  inset: -13px 2px 8px;
  border: 1px solid rgb(208 167 99 / 58%);
  clip-path: polygon(27% 0, 73% 0, 100% 50%, 73% 100%, 27% 100%, 0 50%);
  pointer-events: none;
}

/* B — center ritual before selection */
.before-layout { position: absolute; inset: 0; z-index: 20; }
.before-topline {
  position: absolute;
  left: 86px;
  right: 86px;
  top: 118px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
}
.before-topline .rule { height: 1px; background: linear-gradient(90deg, transparent, rgb(208 167 99 / 34%)); }
.before-topline .rule:last-child { background: linear-gradient(90deg, rgb(208 167 99 / 34%), transparent); }
.before-topline span { color: var(--gold); font: 700 12px/1 "Space Mono", monospace; letter-spacing: .24em; }
.before-head {
  position: absolute;
  left: 50%;
  top: 158px;
  translate: -50% 0;
  width: 1320px;
  text-align: center;
}
.before-title {
  margin: 0;
  color: var(--text);
  font: 500 76px/.96 "EB Garamond", Georgia, serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.before-cn {
  margin-top: 15px;
  display: inline-block;
  padding: 7px 15px 8px;
  border: 1px solid rgb(208 167 99 / 18%);
  background: rgb(7 7 6 / 88%);
  color: rgb(218 207 188);
  font-size: 15px;
  letter-spacing: .26em;
}
.prediction-chip {
  position: absolute;
  left: 86px;
  top: 172px;
  translate: 0 0;
  min-width: 232px;
  padding: 8px 18px 9px;
  border: 1px solid rgb(208 167 99 / 28%);
  background: rgb(11 9 8 / 76%);
  color: var(--moon);
  font: 700 11px/1 "Space Mono", monospace;
  letter-spacing: .18em;
  text-align: center;
  box-shadow: 0 10px 36px rgb(0 0 0 / 34%);
  z-index: 46;
  pointer-events: none;
}
.prediction-chip:empty { display: none; }
.before-cta {
  position: absolute;
  left: 50%;
  bottom: 50px;
  translate: -50% 0;
  width: 410px;
  z-index: 46;
  text-align: center;
}
.ritual-actions {
  position: relative;
  width: 100%;
  height: 76px;
}
.ritual-action {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 76px;
  padding: 0 27px;
  border: 0;
  border-top: 1px solid rgb(208 167 99 / 78%);
  border-bottom: 1px solid rgb(208 167 99 / 28%);
  background: rgb(11 9 8 / 76%);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  will-change: transform;
  cursor: pointer;
  outline: none;
  transition: border-color .32s ease, background-color .32s ease, color .32s ease, box-shadow .42s ease;
}
.begin-orbit-button {
  opacity: 0;
  transform: scale(.975);
  border-top-color: rgb(208 167 99 / 86%);
  background: linear-gradient(90deg, rgb(11 9 8 / 80%), rgb(32 24 15 / 84%), rgb(11 9 8 / 80%));
  box-shadow: 0 0 38px rgb(208 167 99 / 8%);
}
.stop-button {
  opacity: 0;
  transform: scale(.975);
}
.ritual-action:not(:disabled):hover,
.ritual-action:not(:disabled):focus-visible {
  border-top-color: var(--moon-hi);
  border-bottom-color: rgb(208 167 99 / 64%);
  background: rgb(31 24 17 / 88%);
  box-shadow: 0 0 0 1px rgb(208 167 99 / 12%), 0 0 42px rgb(208 167 99 / 13%);
}
.ritual-action:not(:disabled):focus-visible { outline: 1px solid rgb(247 237 218 / 68%); outline-offset: 5px; }
.ritual-action:disabled,
.ritual-action[aria-disabled="true"] {
  cursor: default;
  color: rgb(185 170 149 / 78%);
  border-top-color: rgb(113 83 45 / 22%);
  border-bottom-color: rgb(113 83 45 / 10%);
  background: rgb(11 9 8 / 42%);
}
.action-caption {
  min-height: 17px;
  will-change: transform, opacity;
}
#stop-cta-cn { margin-top: -17px; opacity: 0; }
.cta-en { font: 700 15px/1 "Space Mono", monospace; letter-spacing: .19em; }
.cta-arrow { color: var(--gold); font-size: 25px; }
.cta-cn { margin-top: 10px; color: var(--quiet); font-size: 12px; letter-spacing: .2em; }
.odds { margin-top: 13px; color: var(--quiet); font: 400 11px/1 "Space Mono", monospace; letter-spacing: .15em; }

/* Shared moon moves from B center to D right horizon. */
.moon-zone { position: absolute; inset: 0; }
.moon-bloom {
  position: absolute;
  left: 960px;
  top: 550px;
  width: 850px;
  height: 850px;
  margin: -425px 0 0 -425px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(247 237 218 / 22%) 0, rgb(233 221 200 / 10%) 30%, rgb(208 167 99 / 5%) 50%, transparent 70%);
  opacity: 0;
  z-index: 7;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.moon-shell {
  position: absolute;
  left: 960px;
  top: 550px;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  z-index: 14;
  will-change: transform, opacity;
}
.moon-shell::before {
  content: "";
  position: absolute;
  inset: 6.1%;
  border-radius: 50%;
  box-shadow: 0 0 34px rgb(247 237 218 / 35%), 0 0 105px rgb(208 167 99 / 18%);
  z-index: -1;
}
.moon-disc-breath { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.moon-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: circle(43.55% at 50% 50%); z-index: 1; filter: none; transform: none; mix-blend-mode: normal; }
.moon-cinema-shade {
  position: absolute;
  inset: 0;
  clip-path: circle(43.55% at 50% 50%);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 25%, transparent 0, transparent 38%, rgb(11 9 8 / 15%) 62%, rgb(11 9 8 / 56%) 100%);
  mix-blend-mode: multiply;
  opacity: .68;
  z-index: 2;
}
.moon-veil {
  position: absolute;
  inset: 0;
  clip-path: circle(43.55% at 50% 50%);
  border-radius: 50%;
  background: rgb(11 9 8 / 78%);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.moon-glint {
  position: absolute;
  inset: 30px;
  clip-path: circle(43.55% at 50% 50%);
  border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgb(247 237 218 / 24%) 0, rgb(247 237 218 / 7%) 17%, transparent 39%);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 4;
}
.orbit-svg { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; z-index: 9; }
.orbit-line { fill: none; stroke: rgb(113 83 45 / 80%); stroke-width: 1.15; }
.orbit-line.inner { stroke: rgb(142 162 173 / 40%); stroke-dasharray: 8 13; }
.orbit-dot { fill: var(--gold); filter: drop-shadow(0 0 8px var(--gold)); }

.orbit-anchor {
  position: absolute;
  left: 960px;
  top: 550px;
  width: 148px;
  height: 186px;
  margin: -93px 0 0 -74px;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.sigil-shell { position: relative; width: 148px; height: 186px; display: flex; flex-direction: column; align-items: center; z-index: 2; background: transparent; }
.sigil-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 158px;
  height: 184px;
  translate: -50% -50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / 56%) 0, rgb(0 0 0 / 28%) 44%, transparent 73%);
  z-index: 0;
  pointer-events: none;
}
.sigil-shell img {
  display: block;
  /* Render the plaque at 3x its display box, then downsample it. The result
     animation enlarges the whole anchor, so a 122x158 compositor texture was
     visibly soft at the final 2.7-2.85x scale. */
  width: 366px;
  height: 474px;
  margin-bottom: -316px;
  object-fit: fill;
  clip-path: polygon(26% .7%, 74% .7%, 99.2% 50%, 74% 99.3%, 26% 99.3%, .8% 50%);
  filter: saturate(.78) contrast(.95) brightness(.94);
  transform: scale(.333333);
  transform-origin: 50% 0;
  mix-blend-mode: normal;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  position: relative;
  z-index: 2;
  transition: filter .56s cubic-bezier(.22, 1, .36, 1), opacity .42s ease;
}
#root[data-interactive-state="result"] .orbit-anchor.is-drawn,
[data-composition-id][data-interactive-state="result"] .orbit-anchor.is-drawn {
  will-change: auto;
}
#root[data-interactive-state="result"] .orbit-anchor.is-drawn .sigil-shell img,
[data-composition-id][data-interactive-state="result"] .orbit-anchor.is-drawn .sigil-shell img {
  filter: none;
  image-rendering: auto;
}
#root[data-interactive-state="prediction"] .orbit-anchor:focus-visible .sigil-shell img,
[data-composition-id][data-interactive-state="prediction"] .orbit-anchor:focus-visible .sigil-shell img {
  filter: saturate(.82) contrast(1) brightness(1.12) drop-shadow(0 0 18px rgb(208 167 99 / 26%));
}

@media (hover: hover) and (pointer: fine) {
  #root[data-interactive-state="prediction"] .orbit-anchor:hover .sigil-shell img,
  [data-composition-id][data-interactive-state="prediction"] .orbit-anchor:hover .sigil-shell img {
    filter: saturate(.82) contrast(1) brightness(1.12) drop-shadow(0 0 18px rgb(208 167 99 / 26%));
  }
}
.orbit-anchor.is-predicted .sigil-shell img {
  filter: saturate(.78) contrast(.98) brightness(1.04) drop-shadow(0 0 20px rgb(208 167 99 / 25%));
}
.orbit-anchor.is-predicted .sigil-name {
  border-color: rgb(208 167 99 / 78%);
  color: var(--moon-hi);
}
.sigil-name {
  width: 98px;
  height: 25px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border: 1px solid rgb(113 83 45 / 62%);
  background: rgb(21 17 14 / 92%);
  color: var(--moon);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  z-index: 3;
}
.beast-aura {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.tiger-aura { background: radial-gradient(circle, rgb(208 167 99 / 32%) 0, rgb(208 167 99 / 10%) 38%, transparent 68%); }
.leopard-aura { background: radial-gradient(circle, rgb(79 112 91 / 36%) 0, rgb(79 112 91 / 10%) 38%, transparent 68%); }
.giraffe-aura { background: radial-gradient(circle, rgb(138 112 146 / 35%) 0, rgb(138 112 146 / 10%) 38%, transparent 68%); }
.zebra-aura { background: radial-gradient(circle, rgb(142 162 173 / 34%) 0, rgb(142 162 173 / 10%) 38%, transparent 68%); }
.crow-aura { background: radial-gradient(circle, rgb(215 220 229 / 55%) 0, rgb(215 220 229 / 17%) 38%, transparent 70%); }

.selection-halo {
  position: absolute;
  left: 1520px;
  top: 520px;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border: 1px solid rgb(215 220 229 / 36%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(215 220 229 / 17%) 0, rgb(215 220 229 / 7%) 36%, transparent 67%);
  box-shadow: 0 0 92px rgb(215 220 229 / 13%);
  opacity: 0;
  z-index: 33;
  pointer-events: none;
  will-change: transform, opacity;
}
.insight-ring {
  position: absolute;
  left: 1520px;
  top: 520px;
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  border: 1px solid rgb(215 220 229 / 60%);
  border-radius: 50%;
  opacity: 0;
  z-index: 34;
  pointer-events: none;
  will-change: transform, opacity;
}
.crow-particle-field { position: absolute; left: 1520px; top: 520px; width: 1px; height: 1px; z-index: 43; pointer-events: none; }
.crow-particle { position: absolute; left: -4px; top: -12px; width: 7px; height: 24px; border-radius: 70% 12% 70% 18%; background: linear-gradient(180deg, var(--crow-aura), rgb(142 162 173 / 42%)); box-shadow: 0 0 12px rgb(215 220 229 / 24%); opacity: 0; will-change: transform, opacity; }

/* Superseded by the exact 05 cosmic-relic system. */
.selection-halo,
.insight-ring,
.crow-particle-field { display: none !important; }

/* D — cinematic result after selection */
.result-layout { position: absolute; inset: 0; z-index: 28; opacity: 0; pointer-events: none; }
.result-copy { position: absolute; left: 102px; top: 152px; width: 840px; z-index: 44; }
.result-copy > *, .result-side-mark { opacity: 0; }
.result-kicker { display: flex; align-items: center; gap: 14px; color: var(--gold); font: 700 13px/1 "Space Mono", monospace; letter-spacing: .2em; }
.result-kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.result-title { margin: 28px 0 0; color: var(--text); font: 500 126px/.87 "EB Garamond", Georgia, serif; letter-spacing: -.04em; text-transform: uppercase; text-shadow: 0 16px 60px rgb(0 0 0 / 68%); }
.result-title span { display: block; }
.result-cn { margin-top: 24px; color: var(--moon); font-size: 21px; letter-spacing: .18em; }
.result-description-en { width: 610px; margin: 35px 0 0; color: var(--muted); font-size: 20px; font-weight: 400; line-height: 1.58; letter-spacing: .025em; }
.result-description-cn { width: 610px; margin-top: 13px; color: var(--quiet); font-size: 14px; line-height: 1.82; letter-spacing: .09em; }
.result-description-cn span { display: block; }
.result-traits { display: flex; gap: 10px; margin-top: 28px; }
.result-traits span { padding: 9px 12px 8px; border: 1px solid rgb(208 167 99 / 31%); color: var(--moon); font: 700 11px/1 "Space Mono", monospace; letter-spacing: .1em; }
.result-action { width: 350px; margin-top: 31px; padding: 16px 18px 15px; border: 0; border-top: 1px solid rgb(208 167 99 / 78%); border-bottom: 1px solid rgb(208 167 99 / 24%); background: rgb(11 9 8 / 48%); color: var(--text); text-align: left; }
.result-action-en { display: flex; justify-content: space-between; font: 700 14px/1 "Space Mono", monospace; letter-spacing: .16em; }
.result-action-en b { color: var(--gold); font-size: 21px; }
.result-action-cn { margin-top: 7px; color: var(--quiet); font-size: 11px; letter-spacing: .18em; }
.result-side-mark { position: absolute; right: 58px; top: 78px; z-index: 45; writing-mode: vertical-rl; color: var(--gold); font: 400 11px/1 "Space Mono", monospace; letter-spacing: .28em; }

#root[data-interactive-state="result"] .result-layout,
[data-composition-id][data-interactive-state="result"] .result-layout { pointer-events: auto; }
#root[data-interactive-state="result"] .orbit-anchor,
[data-composition-id][data-interactive-state="result"] .orbit-anchor { z-index: 52 !important; pointer-events: none; }

#replay-button,
.replay-button {
  cursor: pointer;
  outline: none;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .4s ease;
}
#replay-button:not(:disabled):hover,
#replay-button:not(:disabled):focus-visible,
.replay-button:not(:disabled):hover,
.replay-button:not(:disabled):focus-visible {
  background: rgb(31 24 17 / 82%);
  border-top-color: var(--moon-hi);
  border-bottom-color: rgb(208 167 99 / 58%);
  box-shadow: 0 0 38px rgb(208 167 99 / 12%);
}
#replay-button:not(:disabled):focus-visible,
.replay-button:not(:disabled):focus-visible { outline: 1px solid rgb(247 237 218 / 62%); outline-offset: 5px; }
#replay-button:disabled,
.replay-button:disabled { cursor: default; }

/* Browser audio must be unlocked by a trusted gesture. */
.sound-gate {
  position: absolute;
  left: 47px;
  bottom: 33px;
  z-index: 62;
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgb(208 167 99 / 24%);
  background: rgb(7 6 5 / 78%);
  color: var(--moon);
  cursor: pointer;
  outline: none;
}
.sound-gate-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px rgb(208 167 99 / 48%);
}
.sound-gate-en { font: 700 9px/1 "Space Mono", monospace; letter-spacing: .14em; }
.sound-gate-cn { color: var(--quiet); font-size: 9px; letter-spacing: .12em; }
.sound-gate:hover,
.sound-gate:focus-visible { border-color: rgb(208 167 99 / 48%); background: rgb(21 17 14 / 88%); }
.sound-gate:focus-visible { outline: 1px solid rgb(247 237 218 / 58%); outline-offset: 4px; }
.sound-gate[data-sound-state="loading"] { cursor: wait; color: var(--quiet); }
.sound-gate.is-enabled { border-color: rgb(247 237 218 / 36%); background: rgb(13 11 9 / 72%); }
.sound-gate.is-enabled .sound-gate-dot { background: var(--moon-hi); box-shadow: 0 0 12px rgb(247 237 218 / 64%); }
.sound-gate[data-sound-state="off"] { color: rgb(145 132 115 / 76%); border-color: rgb(145 132 115 / 22%); }
.sound-gate[data-sound-state="off"] .sound-gate-dot { background: rgb(145 132 115 / 72%); box-shadow: none; }
.sound-gate[data-sound-state="blocked"],
.sound-gate[data-sound-state="error"] { border-color: rgb(178 102 76 / 58%); color: rgb(235 194 171 / 94%); }

/* Internal review switch — intentionally quiet, outside the ceremony. */
.review-controls,
#review-controls {
  position: absolute;
  right: 47px;
  bottom: 33px;
  z-index: 62;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgb(208 167 99 / 14%);
  background: rgb(7 6 5 / 72%);
  color: var(--quiet);
  font: 700 9px/1 "Space Mono", monospace;
  letter-spacing: .13em;
}
.review-controls::before,
#review-controls::before {
  content: "DEMO";
  padding: 0 8px 0 5px;
  color: rgb(145 132 115 / 62%);
}
[data-review-mode] {
  min-width: 48px;
  padding: 7px 8px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: rgb(185 170 149 / 84%);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
[data-review-mode]:hover,
[data-review-mode]:focus-visible {
  color: var(--moon);
  border-color: rgb(208 167 99 / 30%);
}
[data-review-mode][aria-pressed="true"] {
  color: var(--gold);
  border-color: rgb(208 167 99 / 42%);
  background: rgb(208 167 99 / 8%);
}

.ritual-cursor { position: absolute; left: 0; top: 0; width: 50px; height: 50px; opacity: 0; z-index: 60; pointer-events: none; will-change: transform, opacity; }
.ritual-cursor svg { width: 50px; height: 50px; overflow: visible; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 55%)); }
.click-ripple { position: absolute; left: 960px; bottom: 88px; width: 82px; height: 82px; margin: -41px; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; z-index: 50; pointer-events: none; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .orbit-anchor .sigil-shell,
  .orbit-anchor .beast-aura,
  .ritual-action,
  #replay-button,
  .replay-button,
  .sound-gate,
  [data-review-mode] { transition-duration: .01ms !important; }
}