:root {
  --design-width: 375;
  --design-height: 812;
  --app-scale: 1;
  --sky-top: #25b8ef;
  --sky-mid: #9ae7ff;
  --sky-bottom: #e8f6ff;
  --quiz-bg: #ffffff;
  --card-blue: #d9f3ff;
  --card-blue-border: #bcefff;
  --line-blue: #cbf1ff;
  --primary: #35b4ee;
  --primary-shadow: #138edf;
  --pink: #f8709d;
  --pink-shadow: #d84a7d;
  --text-main: #101010;
  --text-soft: #78838d;
  --text-blue: #1493e5;
  --text-pink: #ff6d9f;
  --white: #ffffff;
  --shell-shadow: 0 24px 70px rgba(26, 123, 175, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.68), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(248, 112, 157, 0.12), transparent 18%),
    linear-gradient(180deg, #baf0ff 0%, #def6ff 42%, #eef9ff 100%);
  color: var(--text-main);
}

button,
input,
audio {
  font: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
}

.page-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.phone-frame {
  width: calc(var(--design-width) * 1px * var(--app-scale));
  height: calc(var(--design-height) * 1px * var(--app-scale));
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: calc(34px * var(--app-scale));
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shell-shadow);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
}

.screen.is-active {
  display: block;
}

.screen-home,
.screen-result {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 34%, var(--sky-bottom) 100%);
}

.screen-quiz {
  background: var(--quiz-bg);
}

.screen-content {
  position: relative;
  width: 375px;
  height: 812px;
  margin: 0;
  padding: 0;
  transform: scale(var(--app-scale));
  transform-origin: top left;
}

.home-content {
  text-align: center;
}

.home-header {
  position: absolute;
  top: 130px;
  left: 59px;
  width: 256px;
}

.title-image {
  display: block;
  width: 256px;
  height: auto;
}

.hero-figure {
  position: absolute;
  top: 256px;
  left: 97px;
  margin: 0;
}

.hero-figure img,
.result-hero img {
  display: block;
  height: auto;
}

.hero-figure img {
  width: 181px;
}

.rules-pill {
  position: absolute;
  top: 549px;
  left: 142px;
  width: 91px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--pink-shadow);
}

.home-desc {
  position: absolute;
  top: 592px;
  left: 97px;
  width: 183px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #212121;
}

.home-actions {
  position: absolute;
  top: 676px;
  left: 47px;
  width: 280px;
  text-align: center;
}

.action-primary,
.action-secondary {
  width: 100%;
  height: 56px;
  border-radius: 28px;
  font-size: 18px;
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.action-primary:active,
.action-secondary:active,
.audio-button:active,
.option-button:active {
  transform: translateY(2px);
}

.action-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 0 var(--primary-shadow);
}

.action-secondary {
  background: var(--white);
  color: var(--text-blue);
  box-shadow: 0 6px 0 #35b4ee;
}

.voice-credit {
  margin: 14px 0 0;
  color: #afb5bf;
  font-size: 12px;
}

.quiz-content {
  position: relative;
}

.quiz-header {
  position: absolute;
  top: 62px;
  left: 16px;
  width: 343px;
  display: flex;
  align-items: center;
}

.icon-button {
  width: 24px;
  height: 24px;
}

.back-button span {
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px auto 0;
  border-left: 4px solid #000;
  border-bottom: 4px solid #000;
  transform: rotate(45deg);
}

.quiz-progress-text {
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.progress-track {
  position: absolute;
  top: 123px;
  left: 32px;
  width: 311px;
  height: 8px;
  border-radius: 999px;
  background: #e4f7ff;
  overflow: hidden;
}

.progress-fill {
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: #33b7f4;
  transition: width 0.24s ease;
}

.audio-card {
  position: absolute;
  top: 204px;
  left: 32px;
  width: 311px;
  height: 123px;
  padding: 58px 24px 0;
  border: 2px solid var(--card-blue-border);
  border-radius: 32px;
  background: var(--card-blue);
  text-align: center;
  overflow: visible;
}

.audio-button {
  position: absolute;
  top: -28px;
  left: 123px;
  width: 65px;
  height: 65px;
  background: url("./assets/panda-quiz/audio-button.png") center/contain no-repeat;
  z-index: 2;
}

.audio-button.is-playing {
  animation: pulse 1.1s ease-in-out infinite;
}

.speaker-icon {
  display: none;
}

.question-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.audio-hint {
  margin: 10px 0 0;
  font-size: 0;
  color: #5e7483;
}

.options-list {
  position: absolute;
  top: 368px;
  left: 32px;
  width: 311px;
  display: grid;
  gap: 16px;
}

.option-button {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 64px;
  padding: 0 14px;
  background: var(--white);
  border: 2px solid var(--line-blue);
  border-radius: 32px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.option-button:hover {
  transform: translateY(-1px);
}

.option-button.is-selected {
  background: #35b4ee;
  border-color: #35b4ee;
  color: var(--white);
}

.option-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #c9efff;
  color: var(--text-blue);
  font-size: 16px;
  font-weight: 800;
}

.option-button.is-selected .option-mark {
  background: rgba(255, 255, 255, 0.84);
}

.option-label {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.result-content {
  position: relative;
  text-align: center;
}

.screen-result.is-fail .confetti {
  display: none;
}

.result-hero {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 58px;
}

.result-hero img {
  width: 143px;
}

.result-card {
  position: absolute;
  top: 210px;
  left: 36px;
  width: 311px;
  height: 325px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 30px;
  padding: 49px 24px 0;
}

.result-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text-pink);
}

.screen-result.is-fail .result-title {
  color: #111;
}

.result-subtitle {
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.result-divider {
  margin: 52px auto 0;
  width: 88%;
  height: 2px;
  background: #eef0f3;
}

.result-stats {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.result-stat strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: var(--text-blue);
}

.result-stat span {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  color: #b0b4bb;
}

.result-actions {
  position: absolute;
  top: 560px;
  left: 47px;
  width: 280px;
  display: grid;
  gap: 18px;
}

.confetti {
  position: absolute;
  top: 138px;
  width: 84px;
  height: 84px;
  z-index: 0;
}

.confetti::before,
.confetti::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.confetti-left {
  left: 28px;
}

.confetti-right {
  right: 28px;
  transform: scaleX(-1);
}

.confetti::before {
  left: 10px;
  top: 22px;
  width: 14px;
  height: 36px;
  background: #48bfff;
  transform: rotate(28deg);
  box-shadow:
    34px 14px 0 -2px #f98cb2,
    62px 34px 0 -4px #63d392;
}

.confetti::after {
  left: 16px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: #ffca54;
  box-shadow:
    54px 20px 0 #54c7ff,
    68px 50px 0 #a7df6b,
    28px 62px 0 #d49dff;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@media (max-width: 375px) {
  .page-shell {
    padding: 8px;
  }

  .phone-screen {
    box-shadow: none;
  }
}