body[data-page="fortune"] {
  --font-mobile-serif: "ZhiwuSongti", serif;
}

body[data-page="fortune"] .altar {
  width: min(100%, 500px);
  min-height: 0;
}

.fortune-stage {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1;
  isolation: isolate;
}

.fortune-stage .luopan {
  position: absolute;
  width: min(100%, 340px);
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.fortune-stage .luopan.three-ready {
  width: 100%;
  border-radius: 0;
}

.luopan.three-ready::before,
.luopan.three-ready::after,
.luopan.three-ready > .luopan-ring {
  display: none;
}

.luopan-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.luopan-canvas:active { cursor: grabbing; }

.fortune-stage .shell {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 106px;
  height: 138px;
  margin: 0;
  transform: translate(-50%, -50%);
  animation: none;
  pointer-events: none;
  box-shadow: inset 0 0 24px rgba(255,230,164,.22), inset 0 -18px 36px rgba(0,0,0,.34), 0 14px 32px rgba(67,48,28,.16);
}

body[data-page="fortune"] .coins {
  position: absolute;
  top: 73%;
  left: 50%;
  width: min(62%, 250px);
  height: 50px;
  margin: 0;
  transform: translateX(-50%);
}

body[data-page="fortune"] .coin { cursor: default; }

body[data-page="fortune"] .shake-row {
  margin-top: 8px;
  gap: 12px;
}

body[data-page="fortune"] .shake {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 90px;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff0d1;
  text-shadow: 0 1px 2px rgba(38, 25, 12, .65);
  font-family: "ZhiwuSongti", serif !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  transition: opacity .2s ease, border-color .2s ease;
}

.shake:disabled { opacity: .5; cursor: default; }
.shake:focus-visible { outline: 2px solid var(--seal); outline-offset: 4px; }

body[data-page="fortune"] .stage-label {
  position: static;
  width: auto;
  height: 22px;
  min-height: 22px;
  clip-path: none;
  overflow: visible;
  writing-mode: horizontal-tb;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 22px;
}

body[data-page="fortune"] .lines { margin-top: 20px; }

body[data-page="fortune"] .yao.yang:not(.moving)::after { display: none; }

@media (max-width: 820px) {
  body[data-page="fortune"] .main { padding-top: 8px; }
  body[data-page="fortune"] .page-title { margin: 8px 0; gap: 6px; }
  body[data-page="fortune"] .page-title p:last-child { font-size: 14px; line-height: 1.6; }
  body[data-page="fortune"] .shake-row { margin-top: 4px; }
  body[data-page="fortune"] .lines {
    margin-top: 8px;
    min-height: 120px;
    justify-content: flex-end;
  }
  .fortune-stage .shell { width: 96px; height: 124px; }
  .fortune-stage .shell::before { width: 34px; height: 29px; top: 12px; font-size: 18px; }
  .fortune-stage .scutes { inset: 10px; }
  body[data-page="fortune"] .shake { width: 80px; font-size: 13px; }
}

@media (max-width: 820px) and (max-height: 680px) {
  .fortune-stage {
    width: min(100%, calc(100vh - 304px));
    width: min(100%, calc(100svh - 304px));
  }
  .fortune-stage .shell { width: min(96px, 28%); height: auto; aspect-ratio: 24 / 31; }
  body[data-page="fortune"] .shake { width: min(80px, calc(28% - 8px)); padding: 0 2px; }
  body[data-page="fortune"] .coins { height: 40px; }
  body[data-page="fortune"] .coin { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="fortune"] .luopan-ring { animation: none; }
  body[data-page="fortune"] .coin.flip { animation-duration: .15s; }
}