.guoshoujing-quiz-active .scene-header,
.guoshoujing-quiz-active .game-status,
.guoshoujing-quiz-active .feedback-overlay,
.guoshoujing-quiz-active .feedback-toast,
.guoshoujing-quiz-active .hint-bar,
.guoshoujing-quiz-active .game-choice,
.guoshoujing-quiz-active .game-choice__badge {
  display: none !important;
}

.guoshoujing-quiz-active .game-scene__base {
  opacity: 0 !important;
}

.guoshoujing-quiz-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.guoshoujing-quiz-layer,
.guoshoujing-quiz-success,
.guoshoujing-quiz-question,
.guoshoujing-quiz-option {
  position: absolute;
}

.guoshoujing-quiz-layer,
.guoshoujing-quiz-success,
.guoshoujing-quiz-question,
.guoshoujing-quiz-option img {
  display: block;
}

.guoshoujing-quiz-option {
  transition: transform 120ms ease, filter 120ms ease;
}

.guoshoujing-quiz-option.is-selected {
  transform: scale(1.04);
  filter: drop-shadow(0 0 10px rgba(130, 217, 255, 0.38))
    drop-shadow(0 0 24px rgba(130, 217, 255, 0.28));
}

.guoshoujing-quiz-option.is-wrong {
  animation: guoshoujing-cross-shake 0.28s ease-out;
}

.guoshoujing-quiz-toast {
  position: absolute;
  left: 50%;
  top: 1038px;
  transform: translateX(-50%);
  min-width: 420px;
  min-height: 74px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(136, 30, 30, 0.92);
  border: 2px solid rgba(255, 220, 220, 0.36);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  color: #fff6f6;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0;
}

.guoshoujing-quiz-toast.is-visible {
  opacity: 1;
}

.guoshoujing-quiz-success-dimmer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
}

.guoshoujing-quiz-success-dimmer.is-visible {
  opacity: 1;
}

.guoshoujing-quiz-success {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.guoshoujing-quiz-success.is-visible {
  opacity: 1;
}

@keyframes guoshoujing-cross-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  12% {
    transform: translateX(-10px) rotate(-3deg);
  }

  28% {
    transform: translateX(9px) rotate(3deg);
  }

  44% {
    transform: translateX(-8px) rotate(-2deg);
  }

  60% {
    transform: translateX(7px) rotate(2deg);
  }

  76% {
    transform: translateX(-4px) rotate(-1deg);
  }
}
