.shengbei-page {
  max-width: 980px;
}

.shengbei-input {
  padding-left: 25px;
  padding-right: 25px;
}

.shengbei-intro-image {
  width: min(360px, 90%);
  margin: 0 auto 8px;
}

.shengbei-cups {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  perspective: 800px;
}

.shengbei-cup {
  display: block;
  width: 132px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(45, 25, 20, .22));
  transform-style: preserve-3d;
  transition: transform 180ms ease;
}

.shengbei-input.is-tossing .shengbei-cup--left {
  animation: shengbei-toss-left 520ms cubic-bezier(.3,.8,.35,1) both;
}

.shengbei-input.is-tossing .shengbei-cup--right {
  animation: shengbei-toss-right 520ms cubic-bezier(.3,.8,.35,1) both;
}

@keyframes shengbei-toss-left {
  0% { transform: rotateY(0deg); }
  28% { transform: rotateY(150deg); }
  58% { transform: rotateY(300deg); }
  100% { transform: rotateY(720deg); }
}

@keyframes shengbei-toss-right {
  0% { transform: rotateY(0deg); }
  28% { transform: rotateY(-160deg); }
  58% { transform: rotateY(-320deg); }
  100% { transform: rotateY(-720deg); }
}

.shengbei-message {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--ink-light);
  text-align: center;
}

.shengbei-result {
  padding: 20px;
}

.shengbei-outcome {
  max-width: 520px;
  margin: 20px auto 0;
  padding: 20px;
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  text-align: center;
}

.shengbei-outcome.is-good { border-color: rgba(52, 125, 82, .45); }
.shengbei-outcome.is-neutral { border-color: rgba(170, 125, 45, .45); }
.shengbei-outcome.is-bad { border-color: rgba(170, 70, 62, .45); }

.shengbei-outcome-name {
  color: var(--ink-main);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
}

.shengbei-outcome-luck {
  margin-top: 8px;
  color: var(--accent, #9d302b);
  font-size: 20px;
  font-weight: 700;
}

.shengbei-outcome-summary {
  margin: 12px 0 0;
  color: var(--ink-light);
  line-height: 1.7;
}

@media (max-width: 600px) {
  .shengbei-cup { width: 112px; height: 132px; }
  .shengbei-input { padding-left: 14px; padding-right: 14px; }
  .shengbei-result { padding: 14px; }
  .shengbei-outcome { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .shengbei-input.is-tossing .shengbei-cup { animation: none; }
}