/* One stage. Night, ink, cinnabar, bronze. No page fade. */
html { background: #100e0c; color: #eadcc8; color-scheme: dark; }
html, body { margin: 0; background: #100e0c; }
html[lang="zh-Hant"] body, html[lang="zh-Hant"] { font-family: "Noto Serif CJK TC", "Noto Serif CJK SC", serif; }
body {
  min-height: 100%;
  font-family: "Noto Serif CJK SC", "Noto Serif CJK TC", Palatino, serif;
  font-size: 16px;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid rgba(224, 181, 106, .85); outline-offset: 3px; }

.lang {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 6;
  display: flex;
  gap: 8px;
}
.lang button {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(234, 220, 200, .62);
}
.lang button[aria-pressed="true"] { color: #e6c48a; }

.world {
  position: fixed;
  inset: 0 0 34px 0;
  background: #100e0c;
  perspective: 860px;
  perspective-origin: 50% 42%;
}
#view { position: absolute; inset: 0; transform-style: preserve-3d; overflow: visible; }
.sheet { position: absolute; inset: 0; transform-style: preserve-3d; background: transparent; overflow: visible; }
.sheet.recede {
  z-index: 6;
  animation: recede .7s linear forwards;
  pointer-events: none;
}
/* Off the right by animation only. No transform property, so it cannot override advance. */
.sheet.wait {
  z-index: 2;
  animation: park .7s linear forwards;
  pointer-events: none;
}
.sheet.advance {
  z-index: 3;
  animation: advance .7s linear forwards;
  pointer-events: none;
}
@keyframes recede {
  from { transform: translateX(0); }
  to { transform: translateX(-110vw); }
}
@keyframes park {
  from { transform: translateX(110vw); }
  to { transform: translateX(110vw); }
}
@keyframes advance {
  from { transform: translateX(110vw); }
  to { transform: translateX(0); }
}

/* Words leave before the next page is seen. Graphics may still travel. */
.sheet.recede .notes,
.sheet.recede .back,
.sheet.recede .switch,
.sheet.recede .piece .name,
.sheet.recede p,
.sheet.recede .set-btn,
.sheet.recede input,
.sheet.recede .line,
.sheet.wait .notes,
.sheet.wait .back,
.sheet.wait .switch,
.sheet.wait .piece .name,
.sheet.wait p,
.sheet.wait .set-btn,
.sheet.wait input,
.sheet.wait .line {
  visibility: hidden;
}

footer.site {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #100e0c;
  z-index: 4;
}
.disclaimer {
  margin: 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(234, 220, 200, .32);
  text-align: center;
}

.back {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(234, 220, 200, .6);
}
.notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 42em;
  text-align: center;
}
.one {
  margin: 0;
  max-width: 38em;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(234, 220, 200, .5);
}
.switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.switch button {
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(234, 220, 200, .48);
}
.switch button[aria-current="page"] { color: #e6c48a; }

.sheet-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 52px 14px 12px;
  box-sizing: border-box;
  overflow: visible;
}
.hero {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: visible;
}

/* Gate */
.fit { position: absolute; inset: 0; overflow: visible; }
.cluster {
  position: absolute;
  inset: 18px 1.2vw 4px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: 16px;
  transform-style: preserve-3d;
}
.floor {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 46px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(90, 58, 28, .28), transparent 70%);
  transform: rotateX(70deg);
  pointer-events: none;
}
.piece {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  transform-style: preserve-3d;
  transition: transform .55s ease, filter .55s ease;
}
.piece.sz { grid-area: 1 / 1; z-index: 1; }
.piece.zw { grid-area: 1 / 2; z-index: 1; }
.piece.lr { grid-area: 1 / 3; z-index: 1; }
.piece.ly { grid-area: 2 / 1; z-index: 3; }
.piece.mh { grid-area: 2 / 2; z-index: 3; }
.piece.wish { grid-area: 2 / 3; z-index: 3; }
.piece.ly, .piece.mh, .piece.wish { transform: scale(1.12); }
.piece.sz, .piece.zw, .piece.lr { transform: scale(0.72); }
.cluster.armed .piece {
  transition-delay: .4s;
  filter: brightness(.6);
}
.cluster.armed .piece.ly,
.cluster.armed .piece.mh,
.cluster.armed .piece.wish { transform: translateZ(-90px) scale(.96); }
.cluster.armed .piece.sz,
.cluster.armed .piece.zw,
.cluster.armed .piece.lr { transform: translateZ(-90px) scale(.62); }
.cluster.armed .piece.near {
  z-index: 5;
  filter: brightness(1);
}
.cluster.armed .piece.near.ly,
.cluster.armed .piece.near.mh,
.cluster.armed .piece.near.wish { transform: translateZ(90px) scale(1.34); }
.cluster.armed .piece.near.sz,
.cluster.armed .piece.near.zw,
.cluster.armed .piece.near.lr { transform: translateZ(90px) scale(0.92); }
.piece .name {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: .1em;
  color: #fff4e4;
  text-shadow: 0 1px 0 #000, 0 2px 8px rgba(0, 0, 0, .85);
  pointer-events: none;
  white-space: nowrap;
}

.coins-mark {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  perspective: 900px;
  pointer-events: none;
}
.piece.ly .coin { width: 112px; height: 112px; }
.piece.ly .coin .disc,
.piece.ly .coin.c0 .disc,
.piece.ly .coin.c1 .disc,
.piece.ly .coin.c2 .disc {
  animation: none;
  transform: rotateX(58deg) rotateY(-18deg) rotateZ(-8deg);
}
.piece.ly .coin.c1 .disc { transform: rotateX(64deg) rotateY(12deg) rotateZ(7deg); }
.piece.ly .coin.c2 .disc { transform: rotateX(52deg) rotateY(-8deg) rotateZ(4deg); }
.piece.ly .hole { width: 26px; height: 26px; }
.piece.ly .side.char b { font-size: 20px; top: 16%; }
.mh-mark {
  width: 248px;
  height: 250px;
  position: relative;
  perspective: 900px;
  pointer-events: none;
}
.ring-u, .ring-l {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
}
.ring-u {
  width: 236px;
  height: 236px;
  left: 2px;
  top: 0;
  border: 20px solid #e0b56a;
  transform: rotateX(50deg);
  box-shadow: 0 16px 0 #3a2410, 0 22px 14px rgba(0,0,0,.35), inset 0 0 0 2px rgba(90, 50, 16, .45);
}
.ring-l {
  width: 156px;
  height: 156px;
  left: 42px;
  top: 118px;
  border: 13px dashed #d4a05a;
  transform: rotateX(50deg);
  box-shadow: 0 12px 0 #3a2410, 0 16px 10px rgba(0,0,0,.3);
}
.seal-mark {
  width: 168px;
  height: 168px;
  box-sizing: border-box;
  display: block;
  border: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 210, 190, .22) 0%, transparent 22%),
    linear-gradient(160deg, #d24b3c 0%, #b4332c 46%, #8a261f 100%);
  clip-path: polygon(
    7% 16%, 14% 7%, 78% 6%, 90% 11%, 97% 20%, 92% 28%, 98% 36%,
    98% 76%, 91% 91%, 76% 97%, 22% 96%, 8% 88%, 3% 74%, 4% 32%, 6% 20%
  );
  filter: drop-shadow(8px 10px 0 rgba(62, 16, 12, .62));
  transform: rotateX(12deg) rotate(-2deg);
  position: relative;
  pointer-events: none;
}
.seal-mark::before,
.seal-mark::after {
  content: none;
  border: 0;
}
.pillars-mark {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  height: 150px;
  min-width: 160px;
  perspective: 700px;
  pointer-events: none;
}
.pillars-mark i {
  display: block;
  width: 26px;
  height: 140px;
  background: linear-gradient(90deg, #14110e 0%, #f3e6c8 14%, #b89258 36%, #3a3024 68%, #0e0c0a 100%);
  box-shadow: inset 2px 0 0 rgba(255, 244, 220, .85), 5px 0 0 #120e0a, 0 8px 8px rgba(0,0,0,.45);
}
.zw-mini {
  width: 168px;
  height: 168px;
  position: relative;
  transform: rotateX(52deg);
  transform-style: preserve-3d;
  pointer-events: none;
}
.zw-mini i {
  position: absolute;
  width: 30px;
  height: 22px;
  border: 1px solid rgba(230, 206, 170, .92);
  background: linear-gradient(160deg, rgba(220, 190, 150, .28), rgba(16, 12, 10, .55));
  box-shadow: 0 5px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255, 236, 210, .5);
}
.lr-mini {
  width: 168px;
  height: 168px;
  position: relative;
  display: block;
  pointer-events: none;
}
.lr-mini .tilt {
  position: absolute;
  inset: 0;
}
.plate {
  position: absolute;
  border-radius: 50%;
  background: #a8743a;
}
.plate.earth {
  inset: 0;
  background: #8d6230;
  box-shadow: inset 0 0 0 8px #e7c48a, inset 0 0 0 14px #4a3014;
}
.plate.heaven {
  width: 102px;
  height: 102px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #c4924c;
  box-shadow: inset 0 0 0 7px #f3ddb0, inset 0 0 0 12px #5a3a16;
}

/* Coins, shared */
.coin {
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  perspective: 600px;
}
.coin .disc {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: none;
  transform: rotateX(58deg) rotateY(-14deg) rotateZ(-12deg);
}
@keyframes idle {
  0%, 100% { transform: rotateX(56deg) rotateY(-14deg) rotateZ(-12deg); }
  50% { transform: rotateX(68deg) rotateY(16deg) rotateZ(11deg); }
}
.side {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 13%, rgba(70, 40, 14, .28) 14% 18%, transparent 19% 21%),
    radial-gradient(circle at 34% 30%, #f8e6c2 0%, #e4b45e 26%, #a86b2c 55%, #5c3816 78%, #2c1a0c 100%);
  box-shadow:
    inset 0 0 0 5px #efd7a4,
    inset 0 0 0 8px #6a4218,
    0 2px 0 #6a4318,
    0 4px 0 #583614,
    0 6px 0 #452810,
    0 8px 0 #321c0c,
    0 11px 14px rgba(0,0,0,.45);
}
.side.char { transform: rotateY(180deg); }
.hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  background: #100e0c;
  box-shadow: 0 0 0 2px #d7b36a, inset 0 0 0 1px rgba(80, 50, 16, .8);
}
.side.char b {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 600;
  color: #3a220c;
  line-height: 1;
}
.coin.toss .disc { animation: flip-back 1.4s cubic-bezier(.22, .61, .24, 1) forwards; }
.coin.toss.c1 .disc { animation-name: flip-back-b; }
.coin.toss.c2 .disc { animation-name: flip-back-c; }
.coin.toss.zi .disc { animation-name: flip-zi; }
.coin.toss.zi.c1 .disc { animation-name: flip-zi-b; }
.coin.toss.zi.c2 .disc { animation-name: flip-zi-c; }
.coin.show-back .disc { animation: none; transform: rotateX(60deg) rotateY(0deg) rotateZ(-8deg); }
.coin.show-zi .disc { animation: none; transform: rotateX(60deg) rotateY(180deg) rotateZ(8deg); }
@keyframes flip-back {
  0% { transform: rotateX(62deg) rotateY(0deg) rotateZ(-10deg); }
  100% { transform: rotateX(58deg) rotateY(360deg) rotateZ(6deg); }
}
@keyframes flip-back-b {
  0% { transform: rotateX(68deg) rotateY(12deg) rotateZ(8deg); }
  100% { transform: rotateX(60deg) rotateY(360deg) rotateZ(-8deg); }
}
@keyframes flip-back-c {
  0% { transform: rotateX(56deg) rotateY(-8deg) rotateZ(10deg); }
  100% { transform: rotateX(64deg) rotateY(360deg) rotateZ(3deg); }
}
@keyframes flip-zi {
  0% { transform: rotateX(62deg) rotateY(0deg) rotateZ(-10deg); }
  100% { transform: rotateX(58deg) rotateY(540deg) rotateZ(6deg); }
}
@keyframes flip-zi-b {
  0% { transform: rotateX(68deg) rotateY(12deg) rotateZ(8deg); }
  100% { transform: rotateX(60deg) rotateY(540deg) rotateZ(-8deg); }
}
@keyframes flip-zi-c {
  0% { transform: rotateX(56deg) rotateY(-8deg) rotateZ(10deg); }
  100% { transform: rotateX(64deg) rotateY(540deg) rotateZ(3deg); }
}
/* Entering the rite, the three coins sit. A toss is the only motion. */
.ly-hero .coin .disc {
  animation: none;
  transform: rotateX(58deg) rotateY(-18deg) rotateZ(-8deg);
}
.ly-hero .coin.c1 .disc { transform: rotateX(64deg) rotateY(12deg) rotateZ(7deg); }
.ly-hero .coin.c2 .disc { transform: rotateX(52deg) rotateY(-8deg) rotateZ(4deg); }
.ly-hero .coin.toss .disc { animation: flip-back 1.4s cubic-bezier(.22, .61, .24, 1) forwards; }
.ly-hero .coin.toss.c1 .disc { animation-name: flip-back-b; }
.ly-hero .coin.toss.c2 .disc { animation-name: flip-back-c; }
.ly-hero .coin.toss.zi .disc { animation-name: flip-zi; }
.ly-hero .coin.toss.zi.c1 .disc { animation-name: flip-zi-b; }
.ly-hero .coin.toss.zi.c2 .disc { animation-name: flip-zi-c; }
.ly-hero .coin.show-back .disc,
.ly-hero .coin.show-back.c1 .disc,
.ly-hero .coin.show-back.c2 .disc { animation: none; transform: rotateX(60deg) rotateY(0deg) rotateZ(-8deg); }
.ly-hero .coin.show-zi .disc,
.ly-hero .coin.show-zi.c1 .disc,
.ly-hero .coin.show-zi.c2 .disc { animation: none; transform: rotateX(60deg) rotateY(180deg) rotateZ(8deg); }

/* Liuyao rite */
.ly-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; overflow: visible; }
.ly-hero .coin-row { overflow: visible; padding-top: 8px; }
.ly-hero .coin-row { order: 1; }
.ly-hero .hexname { order: 2; }
.ly-hero .subname { order: 3; }
.ly-hero .slots { order: 4; margin-bottom: 0; }
.ly-hero .plinth { order: 5; }
.ly-hero .received { order: 6; }
.sheet-in:has(.ly-hero) .hero { align-items: end; }
.sheet-in:has(.ly-hero) .notes {
  gap: 8px;
  margin-top: 8px;
  width: min(38em, 92vw);
  height: auto;
  max-height: none;
  overflow: visible;
  flex: 0 0 auto;
  margin-bottom: 12px;
  padding: 0 8px;
  mask-image: none;
  box-sizing: border-box;
}
.sheet-in:has(.ly-hero) .notes > .one:first-child {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(242, 230, 214, .9);
}
.sheet-in:has(.ly-hero) .notes > .one:last-child {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(234, 220, 200, .74);
}
.ly-hero .coin { width: 108px; height: 108px; }
.ly-hero .hole { width: 24px; height: 24px; }
.ly-hero .side.char b { font-size: 18px; }
.coin-row { display: flex; gap: 22px; perspective: 900px; align-items: flex-end; }
.slots { display: flex; flex-direction: column-reverse; gap: 7px; width: min(280px, 80vw); }
.yao-row {
  display: grid;
  grid-template-columns: 1.6em 1fr 14px;
  align-items: center;
  gap: 8px;
}
.yao-row.born { animation: none; }
@keyframes rise-slot {
  from { transform: translateY(22px); }
  to { transform: translateY(0); }
}
.mk {
  font-size: 12px;
  text-align: center;
  color: rgba(234, 220, 200, .55);
}
.bar { height: 14px; border-radius: 2px; }
.bar.groove {
  background: linear-gradient(#14110e, #2a2318);
  box-shadow: inset 0 4px 5px rgba(0,0,0,.72), 0 1px 0 rgba(236, 206, 150, .2);
}
.bar.solid {
  background: linear-gradient(#f8e6c4, #d4a04c 40%, #7a4c1c 76%, #3a2410);
  box-shadow: 0 4px 0 #24160c, 0 8px 8px rgba(0,0,0,.35);
}
.bar.broken { display: flex; justify-content: space-between; background: none; height: 14px; }
.bar.broken i {
  width: 42%;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(#f8e6c4, #d4a04c 40%, #7a4c1c 76%, #3a2410);
  box-shadow: 0 4px 0 #24160c, 0 8px 8px rgba(0,0,0,.35);
}
.mov {
  width: 10px;
  height: 10px;
  border: 2px solid #9c4036;
  border-radius: 50%;
  justify-self: center;
}
.mov.x {
  height: 2px;
  border: 0;
  border-radius: 0;
  background: #9c4036;
  box-shadow: 0 4px 0 #9c4036;
}
.hexname { margin: 0; min-height: 1.4em; text-align: center; letter-spacing: .2em; }
.hexname .veil {
  display: inline-block;
  padding: 2px 10px;
  color: rgba(234, 220, 200, .45);
  letter-spacing: .18em;
  font-size: 13px;
  border: 1px solid rgba(180, 140, 80, .28);
  box-shadow: 3px 4px 0 rgba(40, 24, 12, .65);
}
.hexname .real { font-size: 28px; color: #f0d7a8; text-shadow: 0 3px 0 #3a2410; }
.subname { margin: 0; font-size: 18px; letter-spacing: .14em; color: #e6c48a; text-align: center; }
.plinth { display: flex; gap: 16px; min-height: 1.4em; }
.plinth button {
  background: none;
  border: 0;
  letter-spacing: .16em;
  font-size: 13px;
  color: #e6c48a;
  padding: 0;
}
.plinth button:disabled { color: rgba(234, 220, 200, .28); cursor: default; }
#hand-commit[hidden], #again[hidden], #hand-toggle[hidden] { display: none; }
.received {
  width: min(40em, 92vw);
  max-height: 22vh;
  overflow: auto;
  text-align: center;
}
.received .tag {
  margin: 4px 0;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(234, 220, 200, .4);
}
.received .classical {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(240, 226, 206, .88);
}

/* Meihua */
.mh-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(640px, 96vw); }
.sheet-in:has(.mh-hero) .hero { align-items: center; padding-bottom: 22px; box-sizing: border-box; }
.sheet-in:has(.mh-hero) .notes {
  width: min(38em, 92vw);
  height: auto;
  max-height: none;
  overflow: visible;
  flex: 0 0 auto;
  margin-top: 18px;
  margin-bottom: 12px;
  padding: 0 8px;
  mask-image: none;
  box-sizing: border-box;
}
.sheet-in:has(.mh-hero) .notes > .one {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(234, 220, 200, .78);
}
.pair { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ring-wrap { position: relative; perspective: 900px; margin-left: auto; margin-right: auto; }
.ring-wrap.upper { width: 268px; height: 148px; }
.ring-wrap.lower { width: 186px; height: 108px; margin-top: 72px; }
.ring-wrap.lower .orbit { transform: rotateX(70deg) translateZ(-70px); }
.ring-wrap.lower.near .orbit { transform: rotateX(62deg) translateZ(16px); transition: transform .6s ease; }
.orbit {
  width: 252px;
  height: 252px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -126px 0 0 -126px;
  transform: rotateX(64deg);
  transform-style: preserve-3d;
}
.orbit.small {
  width: 172px;
  height: 172px;
  top: 0;
  margin: -78px 0 0 -86px;
}
.orbit.lean { animation: none; }
@keyframes idle-ring {
  0%, 100% { transform: rotateX(64deg) rotateZ(-4deg); }
  50% { transform: rotateX(70deg) rotateZ(5deg); }
}
.hoop {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 16px solid #e0b56a;
  box-shadow: 0 18px 0 #3a2410, inset 0 0 0 2px rgba(90, 48, 16, .4);
  background: transparent;
}
.orbit.small .hoop { border-width: 11px; box-shadow: 0 12px 0 #3a2410; }
.hoop.dashed { border-style: dashed; }
.seat {
  position: absolute;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #f3e0bc;
  font-size: 20px;
  transform: translate(-50%, -50%) rotateX(-64deg);
}
.seat .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(224, 181, 106, .55);
  box-shadow: 0 0 0 5px rgba(70, 42, 16, .4);
}
.seat.on .dot { background: #f6e4bc; box-shadow: 0 0 14px 3px rgba(224, 181, 106, .85); }
.seat.named { color: #f6e4bc; text-shadow: 0 2px 0 #3a2410; font-size: 22px; }
.num-in {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 6em;
  text-align: center;
  background: transparent;
  border: 0;
  font-size: 28px;
  color: #f0d7a8;
  letter-spacing: .08em;
}
.num-in:focus { outline: none; }
.set-btn {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: 0;
  letter-spacing: .14em;
  font-size: 13px;
  color: #e6c48a;
}
.shown-num {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  color: #f0d7a8;
  letter-spacing: .06em;
  text-shadow: 0 2px 0 #3a2410;
}
.mv-num {
  margin: 0;
  font-size: 40px;
  line-height: 1;
  color: #c45a4a;
  text-shadow: 0 3px 0 #3a180e;
  text-align: center;
  letter-spacing: .08em;
}
.stack { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.stack .label {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(234, 220, 200, .48);
}
.stack .hex-name {
  margin: 0;
  font-size: 26px;
  letter-spacing: .18em;
  color: #f0d7a8;
  text-shadow: 0 3px 0 #3a2410;
}
.stack .meta { margin: 0; font-size: 14px; letter-spacing: .12em; color: rgba(240, 220, 190, .8); }
.yao-col { display: flex; flex-direction: column-reverse; gap: 6px; width: 200px; margin: 4px 0; }
.yao-col .bar { height: 16px; }
.yao-col .bar.broken i { height: 16px; }

/* Wish: darker, fewer words, the sentence stays where it was written. */
.sheet:has(.wish-rig) {
  --press: 0;
  background: #070605;
}
.sheet:has(.wish-rig)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--press) * 0.32);
  pointer-events: none;
  z-index: 4;
}
.sheet-in:has(.wish-rig) {
  justify-content: center;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 28px;
}
.sheet-in:has(.wish-rig) .notes {
  gap: 22px;
  margin-top: 12px;
  max-width: 26em;
}
.sheet-in:has(.wish-rig) .notes > .one,
.sheet-in:has(.wish-rig) .hold-hint,
.wish-rig .line {
  font-family: Palatino, "Palatino Linotype", "Noto Serif CJK SC", "Noto Serif CJK TC", serif;
}
.sheet-in:has(.wish-rig) .notes > .one {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .03em;
  color: rgba(232, 220, 204, .72);
}
.wish-rig {
  --press: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  z-index: 1;
}
.hold-hint {
  margin: 0;
  max-width: 22em;
  text-align: center;
  font-size: 15px;
  letter-spacing: .12em;
  color: rgba(240, 214, 170, .92);
}
.line {
  width: min(18em, 80vw);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(156, 64, 54, .45);
  text-align: center;
  font-size: 16px;
  padding: 6px 4px;
  color: #eadcc8;
}
.seal-wrap { position: relative; width: 220px; height: 220px; perspective: 800px; }
.blob {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 150px;
  height: 22px;
  margin-left: -75px;
  border-radius: 50%;
  background: rgba(0, 0, 0, calc(0.45 + var(--press, 0) * 0.45));
  transform: scaleX(calc(0.35 + var(--press, 0) * 0.72));
  opacity: calc(0.18 + var(--press, 0) * 0.62);
  filter: blur(1px);
}
.seal {
  position: absolute;
  left: 10px;
  top: 0;
  width: 200px;
  height: 200px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9c4036;
  --press: 0;
  transform-origin: 50% 86%;
  transform: translateY(calc(var(--press) * 16px)) scale(calc(1 - var(--press) * 0.05)) rotateX(calc(16deg - var(--press) * 8deg));
  transform-style: preserve-3d;
  transition: none;
}
.seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seal { --press: 0; }
.seal .mud { fill: #c23b32; stroke: none; }
.seal .press { fill: #4a1412; stroke: none; opacity: var(--press, 0); }
.notes .rest { margin: 0; }
.notes .rest summary {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(230, 196, 138, .62);
  list-style: none;
}
.notes .rest summary::-webkit-details-marker { display: none; }
.notes .rest .one {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(234, 220, 200, .7);
}
.seal .face, .seal .inner, .seal .track, .seal .prog { fill: none; stroke: none; }
.seal .yin {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 72px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 4px 6px 0 rgba(70, 18, 14, .45);
}
.seal-wrap.drop .seal,
.seal-wrap.drop .blob { animation: none; }

/* Four pillars */
.pillar-stage { perspective: 900px; }
.pillars {
  display: flex;
  align-items: flex-end;
  gap: 64px;
  height: min(520px, 66vh);
  padding: 0 10px 8px;
}
.pillar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 0 0 52px; }
.shaft {
  width: 52px;
  height: min(420px, 54vh);
  flex: none;
  transform-origin: center bottom;
  transform: scaleY(0.02);
  background: linear-gradient(90deg, #100e0c 0%, #f4e7cc 11%, #d8bd88 24%, #8a6840 48%, #2a2218 74%, #0c0a08 100%);
  box-shadow:
    inset 4px 0 0 rgba(255, 246, 226, .9),
    12px 0 0 #1a140e,
    16px 0 0 #0a0806,
    0 18px 16px rgba(0,0,0,.45);
}
.pillar span {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: .22em;
  color: rgba(236, 220, 196, .78);
}

/* Ziwei */
.zw-board {
  width: min(1100px, 94vw);
  height: min(640px, 76vh);
  position: relative;
  perspective: 980px;
}
.ring3 {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  transform: rotateX(28deg);
  transform-style: preserve-3d;
}
.ring3::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 6%;
  bottom: -8%;
  border-radius: 46%;
  background: radial-gradient(ellipse at 50% 46%, rgba(120, 78, 36, .28), rgba(40, 24, 12, .08) 58%, transparent 72%);
  transform: translateZ(-30px);
  pointer-events: none;
}
.zw-cell {
  position: relative;
  border: 1px solid rgba(232, 208, 170, .92);
  background: linear-gradient(180deg, rgba(236, 214, 176, .4), rgba(18, 12, 9, .82));
  box-shadow: 0 16px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255, 240, 214, .65);
  transform: translateY(56px) scale(0.2);
  transform-origin: center center;
}
.gleam {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(236, 214, 170, .35);
  box-shadow: 0 0 16px 6px rgba(236, 214, 170, .28);
  pointer-events: none;
}

/* Liuren */
.lr-scene { width: min(980px, 96vw); height: min(680px, 78vh); position: relative; perspective: 900px; }
.lr-tilt {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 12%;
  bottom: 6%;
  transform: rotateX(52deg);
  transform-style: preserve-3d;
}
.disc {
  border-radius: 50%;
  position: absolute;
  background: radial-gradient(circle at 36% 32%, #f6e4bc, #c8964c 38%, #7a4e20 70%, #2a1a0c 100%);
  box-shadow: 0 16px 0 #3a2410, inset 0 0 0 7px #efd09a, inset 0 0 0 20px rgba(74, 42, 16, .42);
}
.disc.earth { inset: 0; }
.hv-drop {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 20%;
  bottom: 16%;
  transform-style: preserve-3d;
  transform: translateY(-340px) rotateX(52deg);
}
.hv-spin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.hv-spin.turning { animation: hv-turn 36s linear forwards; }
.disc.heaven {
  inset: 0;
  background: radial-gradient(circle at 40% 36%, #f4e2b4, #9a6230 40%, #4e2e12 74%, #1c120c 100%);
  box-shadow: 0 14px 0 #3a2410, inset 0 0 0 8px #f6e4bc, inset 0 0 0 18px rgba(40, 22, 10, .55);
}
.notch {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 78px;
  height: 30%;
  margin-left: -39px;
  background: #100e0c;
  border-left: 11px solid #f6e7c8;
  border-right: 11px solid #f6e7c8;
  box-sizing: border-box;
  z-index: 2;
}
@keyframes hv-turn {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}
.br-layer { position: absolute; inset: 0; pointer-events: none; }
.br {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1;
  color: #f0d7a8;
  font-weight: 650;
  text-shadow: 0 1px 0 #100e0c, 0 0 2px #100e0c;
}
.seal { filter: drop-shadow(calc(6px + var(--press, 0) * 6px) calc(8px + var(--press, 0) * 16px) 0 rgba(22, 6, 4, calc(0.55 + var(--press, 0) * 0.4))); }

@media (max-width: 720px) {
  .piece.ly .coin { width: 140px; height: 140px; }
  .ly-hero .coin { width: 108px; height: 108px; }
  .orbit { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .orbit.small { width: 140px; height: 140px; margin: -64px 0 0 -70px; }
  .ring-wrap.upper { width: 214px; height: 120px; }
  .ring-wrap.lower { width: 154px; height: 90px; }
  .pillars { gap: 28px; }
  .shaft { width: 36px; }
  .zw-board { width: min(100%, 96vw); height: min(520px, 68vh); }
  .zw-cell { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet.recede, .sheet.advance, .sheet.wait,
  .coin .disc, .coin.toss .disc, .ly-hero .coin.toss .disc,
  .orbit.lean, .hv-spin.turning,
  .seal-wrap.drop .seal, .seal-wrap.drop .blob,
  .yao-row.born {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .cluster.armed .piece { transition-delay: 0s; }
}