:root {
  color-scheme: light;
  --paper: #f7f7f3;
  --ink: #2b2e38;
  --muted: #9296a0;
  --copper: #a37e52;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; }
body { -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }
.scene {
  position: relative;
  height: 100svh;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
/* 两个指定页面各自包含备案节点，不由脚本向其他页面注入。 */
#loadingScene { grid-template-rows: minmax(0, 1fr) auto auto; }
.page-legal {
  min-width: 0; max-width: 100%; text-align: center; color: #606875;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 12px; line-height: 1.45;
  overflow-wrap: anywhere;
}
.page-legal p { margin: 0; }
.page-legal a { display: block; color: inherit; text-decoration: none; }
.page-legal a:hover { color: #b74734; text-decoration: underline; text-underline-offset: .15em; }
.page-legal a:focus-visible { outline: 2px solid #b74734; outline-offset: 3px; }
.wheel-space {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  display: grid; place-items: center;
  container-type: size;
}
.wheel-stage {
  position: relative;
  --wheel-size: min(86vw, calc(100svh - 150px), 760px);
  --wheel-scale: .8;
  width: var(--wheel-size);
  aspect-ratio: 1;
  /* 连同中央文字、侧边和阴影整体缩至上一版的 80%。 */
  transform: scale(var(--wheel-scale));
  transform-origin: center;
  perspective: 1500px;
  display: grid;
  place-items: center;
  touch-action: none;
  user-select: none;
  cursor: grab;
  border-radius: 50%;
}
.loading-wordmark {
  position: absolute; left: 50%; bottom: calc(100% + var(--wheel-size) * .025); transform: translateX(-50%);
  /* 与盘中最大卦名字号相同，并计入中央文字的 .95 倍缩放。 */
  height: calc(clamp(13px, calc(var(--wheel-size) * .075), 42px) * .95); width: auto; max-width: none;
  pointer-events: none;
}
@supports (width: 1cqw) {
  .wheel-stage { --wheel-size: min(90cqw, 97cqh, 760px); }
}
.wheel-stage.is-dragging { cursor: grabbing; }
.wheel-stage:focus { outline: none; }
/* 键盘焦点只提示在卦名下方，拖动时不在盘外画大圈。 */
.wheel-stage:focus-visible:not(.is-dragging) h1 { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.wheel-disc {
  width: 100%; height: 100%; position: relative; border-radius: 50%;
  background: #fff;
  transform: rotateX(var(--tilt-x, 24deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 180ms ease-out;
  will-change: transform;
  box-shadow: 0 5px 0 #e9e9e2, 0 11px 0 -3px #e1e1d9, 0 28px 47px -12px rgb(43 46 56 / 19%);
}
.wheel-drawing { display: block; width: 100%; height: 100%; overflow: visible; }
.disc-outline { fill: none; stroke: var(--ink); stroke-opacity: .17; stroke-width: 2; }
.pointer { fill: #b84b35; }
.hexagram-mark { fill: var(--muted); opacity: .82; }
.hexagram-mark.is-active { fill: var(--ink); opacity: 1; }
.hexagram-mark text { font-family: Georgia, "Times New Roman", serif; font-size: 14px; }
.trigram-mark { fill: #858b98; opacity: .85; }
.wheel-center {
  position: absolute; left: 25%; right: 25%; top: 29%; bottom: 24%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  transform: scale(.95);
  transform-origin: center;
}
.center-glyph { width: 33%; max-width: 118px; height: auto; overflow: visible; flex-shrink: 0; }
h1 {
  margin: clamp(5px, calc(var(--wheel-size) * .02), 15px) 0 clamp(4px, calc(var(--wheel-size) * .014), 11px);
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: clamp(13px, calc(var(--wheel-size) * .075), 42px);
  line-height: 1.3;
  font-weight: 400; letter-spacing: .18em; white-space: nowrap; padding-left: .18em;
}
.trigram-description { margin: 0; font-family: "STSong", "Songti SC", "SimSun", serif; font-size: clamp(9px, calc(var(--wheel-size) * .034), 17px); color: #7f8490; white-space: nowrap; letter-spacing: .07em; }
.hexagram-number { margin: clamp(5px, calc(var(--wheel-size) * .022), 17px) 0 0; color: #969aa3; font-family: "STSong", "Songti SC", "SimSun", serif; font-size: clamp(8px, calc(var(--wheel-size) * .025), 14px); letter-spacing: .2em; }
/* 先为进度和完成后的进入按钮留空间，卦盘只使用剩余区域。 */
.loading-status { width: min(258px, 70vw); margin: 0; height: 136px; text-align: center; }
.progress-meta { display: flex; justify-content: center; align-items: baseline; margin-bottom: 8px; font-size: 13px; color: #757a85; }
.progress-meta strong { font-family: Georgia, serif; font-size: 21px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.percent { margin-left: 4px; font-size: 11px; }
.loading-coins { display: flex; justify-content: center; align-items: center; gap: 14px; height: 42px; }
.loading-coin { position: relative; display: grid; place-items: center; width: 40px; height: 40px; perspective: 300px; }
.loading-coin::before { content: ""; position: absolute; left: 3px; right: 3px; bottom: -4px; height: 8px; border-radius: 50%; background: radial-gradient(ellipse, rgb(52 43 28 / 22%), transparent 70%); }
/* 外圈、币面和侧面都放进同一个旋转体，底座不再留下白色圆片。 */
.coin-turner { --coin-thickness: 1.4px; position: relative; width: 40px; height: 40px; transform-style: preserve-3d; animation: coin-turn 8s cubic-bezier(.42, 0, .25, 1) infinite; }
.loading-coin:nth-child(2) .coin-turner { animation-delay: .32s; }
.loading-coin:nth-child(3) .coin-turner { animation-delay: .64s; }
.coin-turner img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; backface-visibility: hidden; }
.coin-front { transform: translateZ(calc(var(--coin-thickness) / 2)); }
.coin-back { transform: rotateY(180deg) translateZ(calc(var(--coin-thickness) / 2)); }
.coin-edge { position: absolute; left: 50%; top: 50%; width: 5.4px; height: var(--coin-thickness); background: repeating-linear-gradient(90deg, rgb(51 40 22 / 24%) 0 .4px, transparent .4px 1.2px), linear-gradient(#c9beaa, #8e7f65 48%, #b5aa94); transform: translate(-50%, -50%) rotateZ(var(--edge-angle)) translateY(-19px) rotateX(90deg); }
@keyframes coin-turn {
  0%, 10% { transform: translateY(0) rotateY(0); }
  16% { transform: translateY(-4px) rotateY(90deg); }
  22% { transform: translateY(0) rotateY(180deg); }
  28% { transform: translateY(-3px) rotateY(270deg); }
  34%, 100% { transform: translateY(0) rotateY(360deg); }
}
.loading-actions { display: flex; justify-content: center; align-items: center; margin-top: 12px; }
.enter-button-space { flex: 0 0 142px; width: 142px; height: 46px; perspective: 520px; }
.enter-button, .motion-button {
  border: 1px solid rgb(43 46 56 / 8%); background: #fff;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 15px; letter-spacing: .12em;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
  box-shadow: 0 3px 0 #e9e9e2, 0 7px 0 -2px #e1e1d9, 0 11px 18px -8px rgb(43 46 56 / 19%);
}
.enter-button {
  width: 100%; height: 100%; padding: 0 14px; border-radius: 12px;
  transform: translateY(var(--enter-lift, 0px)) rotateX(var(--enter-tilt-x, 12deg)) rotateY(var(--enter-tilt-y, 0deg));
}
.enter-button:disabled { color: #757a85; cursor: wait; }
.enter-button:not(:disabled):active { --enter-lift: 1px !important; }
.motion-button-space { position: absolute; left: 50%; top: var(--motion-top, 70%); width: 118px; height: 44px; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); }
.motion-button { position: relative; flex: 0 0 118px; width: 118px; height: 46px; padding: 0 5px; border-radius: 50%; font-size: 17.6px; letter-spacing: .04em; white-space: nowrap; transform: scale(.5) perspective(520px) rotateX(12deg); }
/* 视觉减半，同时保留约 44px 高的透明点击区域。 */
.motion-button::after { content: ""; position: absolute; inset: -21px 0; }
.motion-button:hover { transform: scale(.5) perspective(520px) translateY(-2px) rotateX(8deg); }
.motion-button:active { transform: scale(.5) perspective(520px) translateY(1px) rotateX(12deg); }
.return-button:hover { background: rgb(163 126 82 / 8%); }
.entry-scene { min-height: 100svh; padding: 30px; display: grid; place-items: center; text-align: center; }
.entry-content { max-width: 520px; }
.entry-content h2 { margin: 28px 0 18px; font-family: "STSong", "Songti SC", "SimSun", serif; font-size: clamp(22px, 4vw, 30px); font-weight: 400; line-height: 1.6; }
.entry-content p { font-size: 14px; color: #777d87; line-height: 1.9; }
.return-button { margin-top: 22px; padding: 11px 20px; border: 1px solid rgb(43 46 56 / 25%); background: transparent; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  /* 原可见盘宽约 .72 × (视口 - 28px)，左右空白各只保留原来的四分之一。 */
  .scene { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
  #loadingScene .wheel-space { padding-top: 44px; }
  .wheel-stage { --wheel-scale: 1; --wheel-size: min(calc(93vw - 5px), calc((100svh - 190px) * .82), 760px); }
  @supports (width: 1cqw) {
    .wheel-stage { --wheel-size: min(calc(93vw - 5px), 82cqh, 760px); }
  }
}
@media (max-height: 420px) {
  .scene { gap: 4px; padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .loading-actions { margin-top: 8px; }
  .entry-scene { padding: 14px; }
  .entry-content h2 { margin: 10px 0; font-size: 20px; }
  .entry-content p { margin: 8px 0; font-size: 12px; }
  .return-button { margin-top: 8px; padding: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-disc, .enter-button, .motion-button { transition: none; }
  .motion-button:hover, .motion-button:active { transform: scale(.5) perspective(520px) rotateX(12deg); }
  .coin-turner { animation: none; }
}