:root {
  color-scheme: light;
  --bg-left: #d9f1ff;
  --bg-right: #8cc9ff;
  --ink: #114481;
  --ink-soft: rgba(17, 68, 129, 0.86);
  --ink-green: #1c7a69;
  --white: #fffdf7;
  --accent-red: #f34738;
  --accent-red-deep: #ef4b32;
  --accent-orange: #ff8854;
  --accent-yellow: #f7c75f;
  --accent-green: #20a867;
  --accent-blue: #2e83dc;
  --card: rgba(255, 255, 255, 0.88);
  --card-strong: rgba(255, 255, 255, 0.96);
  --card-blue: rgba(243, 250, 255, 0.9);
  --shadow: 0 18px 44px rgba(20, 83, 154, 0.18);
  --shadow-strong: 0 24px 56px rgba(14, 62, 123, 0.2);
  --page-transition: 1.15s;
  --text-entry-gap: 0.68s;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.82), transparent 24%),
    linear-gradient(135deg, var(--bg-left) 0%, #f6fbff 34%, var(--bg-right) 100%);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
}

body.record-mode {
  cursor: none;
}

button {
  font: inherit;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
}

.phone-frame {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #ffffff;
}

.pages {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.page.page-1 {
  background-image: url("../assets/images/page3-choice.png");
}

.page.page-2 {
  background-image: url("../assets/images/page2-memory.png");
}

.page.page-3 {
  background-image: url("../assets/images/page1-cover.png");
}

.page.page-4 {
  background-image: url("../assets/images/page4-reveal.png");
}

.page.page-5 {
  background-image: url("../assets/images/page5-result.png");
}

.page.is-active,
.page.is-leaving {
  visibility: visible;
}

.page.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.page.is-leaving {
  opacity: 1;
  z-index: 1;
}

.page.enter-from-bottom {
  animation: pageEnterFromBottom var(--page-transition) cubic-bezier(0.22, 0.78, 0.18, 1) forwards;
}

.page.enter-from-right {
  animation: pageEnterFromRight var(--page-transition) cubic-bezier(0.22, 0.78, 0.18, 1) forwards;
}

.page.enter-zoom {
  animation: pageEnterZoom 1.28s cubic-bezier(0.18, 0.76, 0.18, 1) forwards;
}

.page.leave-to-top {
  animation: pageLeaveToTop var(--page-transition) cubic-bezier(0.3, 0.05, 0.68, 0.25) forwards;
}

.page.leave-to-left {
  animation: pageLeaveToLeft var(--page-transition) cubic-bezier(0.3, 0.05, 0.68, 0.25) forwards;
}

.page.leave-fade {
  animation: pageLeaveFade 0.9s ease forwards;
}

@keyframes pageEnterFromBottom {
  0% {
    opacity: 1;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pageEnterFromRight {
  0% {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pageEnterZoom {
  0% {
    opacity: 0;
    transform: scale(1.045);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pageLeaveToTop {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes pageLeaveToLeft {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes pageLeaveFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.page-content {
  position: absolute;
  inset: 0;
  min-width: 0;
}

.safe-area {
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-right: calc(24px + env(safe-area-inset-right));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  padding-left: calc(24px + env(safe-area-inset-left));
}

.position-box {
  position: absolute;
  min-width: 0;
}

.motion-wrap {
  display: block;
  width: 100%;
  opacity: 0;
}

.motion-inner {
  width: 100%;
}

.page.page-animate .motion-wrap {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.78, 0.22, 1);
  animation-delay: calc(var(--enter-delay, 0s) + var(--page-text-delay, 0s));
}

.page.page-animate .enter-left {
  animation-name: enterFromLeft;
  animation-duration: var(--enter-duration, 1.16s);
}

.page.page-animate .enter-right {
  animation-name: enterFromRight;
  animation-duration: var(--enter-duration, 1.16s);
}

.page.page-animate .enter-top {
  animation-name: enterFromTop;
  animation-duration: var(--enter-duration, 1.28s);
}

.page.page-animate .enter-bottom {
  animation-name: enterFromBottom;
  animation-duration: var(--enter-duration, 1.18s);
}

.page.page-animate .enter-bottom-left {
  animation-name: enterFromBottomLeft;
  animation-duration: var(--enter-duration, 1.18s);
}

.page.page-animate .fade-up {
  animation-name: fadeUp;
  animation-duration: var(--enter-duration, 0.96s);
}

.page.page-animate .gentle-sway {
  animation: gentleSway 3.9s ease-in-out infinite;
  animation-delay: calc(var(--page-text-delay, 0s) + var(--enter-delay, 0s) + var(--enter-duration, 1.2s) + 0.06s);
}

.page.page-animate .gentle-sway--soft {
  animation-name: gentleSwaySoft;
  animation-duration: 4.1s;
}

.page.page-animate .gentle-sway--tiny {
  animation-name: gentleSwayTiny;
  animation-duration: 3.7s;
}

@keyframes enterFromLeft {
  0% {
    transform: translateX(-115vw);
    opacity: 0;
  }
  82% {
    transform: translateX(6px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes enterFromRight {
  0% {
    transform: translateX(115vw);
    opacity: 0;
  }
  82% {
    transform: translateX(-6px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes enterFromTop {
  0% {
    transform: translateY(-105vh);
    opacity: 0;
  }
  82% {
    transform: translateY(6px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes enterFromBottom {
  0% {
    transform: translateY(105vh);
    opacity: 0;
  }
  82% {
    transform: translateY(-6px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes enterFromBottomLeft {
  0% {
    transform: translate(-78vw, 70vh);
    opacity: 0;
  }
  82% {
    transform: translate(4px, -4px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    transform: translateY(24px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes gentleSway {
  0%,
  100% {
    transform: translateX(-2px) rotate(-0.35deg);
  }
  50% {
    transform: translateX(2px) rotate(0.35deg);
  }
}

@keyframes gentleSwaySoft {
  0%,
  100% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(1px);
  }
}

@keyframes gentleSwayTiny {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #2a76db;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px rgba(49, 122, 228, 0.12);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.headline,
.section-title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(30px, 8vw, 37px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.headline-line {
  display: block;
}

.ad-emphasis {
  white-space: nowrap;
}

.ad-red {
  color: var(--accent-red);
}

.ad-green {
  color: var(--accent-green);
}

.section-note,
.subline,
.helper,
.result-desc {
  margin: 0;
  max-width: 100%;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow);
}

.primary-btn {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-red-deep) 100%);
}

.secondary-btn {
  color: #1863b1;
  background: rgba(255, 255, 255, 0.94);
}

.btn-pulse {
  animation: buttonPulse 3s ease-in-out infinite;
}

@keyframes buttonPulse {
  0%,
  100% {
    box-shadow: 0 18px 34px rgba(243, 67, 55, 0.24);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 24px 42px rgba(243, 67, 55, 0.34);
    transform: scale(1.018);
  }
}

.music-toggle {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.music-toggle__icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(42, 118, 219, 0.4);
  box-shadow: 0 0 0 0 rgba(42, 118, 219, 0.2);
}

.music-toggle__label {
  font-size: 14px;
  font-weight: 800;
}

.music-toggle.is-playing .music-toggle__icon {
  background: var(--accent-green);
  animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes pulseDot {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(32, 168, 103, 0.36);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(32, 168, 103, 0);
  }
}

body.record-mode .music-toggle {
  display: none;
}

.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bubble,
.star,
.plane,
.highlight,
.milk-sheen,
.photo-glow,
.ring,
.ribbon-sheen,
.gift-glow,
.cloud-sheen {
  position: absolute;
  opacity: 0;
}

.page.page-animate .bubble,
.page.page-animate .star,
.page.page-animate .plane,
.page.page-animate .highlight,
.page.page-animate .milk-sheen,
.page.page-animate .photo-glow,
.page.page-animate .ring,
.page.page-animate .ribbon-sheen,
.page.page-animate .gift-glow,
.page.page-animate .cloud-sheen {
  opacity: 1;
}

.bubble {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.2) 58%, rgba(255, 255, 255, 0) 72%);
  border: 1px solid rgba(255, 255, 255, 0.36);
  animation: bubbleFloat 7.2s linear infinite;
}

@keyframes bubbleFloat {
  0% {
    transform: translateY(0) scale(0.92);
    opacity: 0;
  }
  10% {
    opacity: 0.55;
  }
  90% {
    opacity: 0.28;
  }
  100% {
    transform: translateY(-110px) scale(1.08);
    opacity: 0;
  }
}

.star {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 185, 0.95) 0%, rgba(255, 228, 132, 0.76) 35%, rgba(255, 230, 168, 0) 70%);
  box-shadow: 0 0 12px rgba(255, 227, 141, 0.4);
  animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.plane {
  width: 42px;
  height: 28px;
  background: rgba(255, 255, 255, 0.96);
  clip-path: polygon(0 56%, 100% 0, 70% 54%, 100% 100%);
  filter: drop-shadow(0 8px 14px rgba(45, 116, 211, 0.16));
}

.plane::before,
.plane::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.94);
}

.plane::before {
  left: 14px;
  top: 8px;
  width: 18px;
  height: 10px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0.9;
}

.plane::after {
  left: 8px;
  top: 12px;
  width: 14px;
  height: 8px;
  clip-path: polygon(0 10%, 100% 50%, 0 90%);
  opacity: 0.82;
}

.page.page-animate .plane {
  animation: planeGlide 5.1s ease-in-out 1 forwards;
}

@keyframes planeGlide {
  0% {
    transform: translate(-80px, 30px) rotate(-8deg);
    opacity: 0;
  }
  12% {
    opacity: 0.92;
  }
  100% {
    transform: translate(120px, -18px) rotate(9deg);
    opacity: 0.86;
  }
}

.highlight,
.milk-sheen,
.ribbon-sheen,
.cloud-sheen {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.46) 42%, rgba(255, 255, 255, 0) 100%);
  filter: blur(2px);
}

.highlight {
  width: 90px;
  height: 280px;
  animation: sweepLight 4s ease-in-out infinite;
}

.highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 100%);
}

@keyframes sweepLight {
  0%,
  100% {
    transform: translateX(-28px) rotate(-6deg);
    opacity: 0.12;
  }
  50% {
    transform: translateX(22px) rotate(2deg);
    opacity: 0.42;
  }
}

.milk-sheen {
  animation: milkGlow 4.8s ease-in-out infinite;
}

@keyframes milkGlow {
  0%,
  100% {
    opacity: 0.14;
    transform: translateX(-12px);
  }
  50% {
    opacity: 0.3;
    transform: translateX(12px);
  }
}

.photo-glow {
  left: 74px;
  top: 210px;
  width: 132px;
  height: 92px;
  border-radius: 22px;
  background: radial-gradient(circle, rgba(255, 247, 204, 0.32) 0%, rgba(255, 247, 204, 0.08) 52%, rgba(255, 247, 204, 0) 74%);
  animation: pulseGlow 4.2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.44;
    transform: scale(1.05);
  }
}

.ring {
  left: 50%;
  top: 46%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.6px solid rgba(255, 234, 187, 0.58);
  box-shadow: 0 0 24px rgba(255, 242, 198, 0.2);
  animation: ringPulse 3.4s ease-in-out infinite;
}

.ring--outer {
  width: 172px;
  height: 172px;
}

.ring--inner {
  width: 120px;
  height: 120px;
  animation-duration: 3s;
}

@keyframes ringPulse {
  0%,
  100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 0.54;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.gift-glow {
  left: 114px;
  top: 218px;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 247, 212, 0.36) 0%, rgba(255, 247, 212, 0.1) 54%, rgba(255, 247, 212, 0) 76%);
  animation: pulseGlow 3.8s ease-in-out infinite;
}

.ribbon-sheen {
  left: 78px;
  top: 420px;
  width: 220px;
  height: 40px;
  transform: rotate(-7deg);
  animation: ribbonSweep 4.1s linear infinite;
}

@keyframes ribbonSweep {
  0% {
    opacity: 0;
    transform: translateX(-32px) rotate(-7deg);
  }
  20% {
    opacity: 0.3;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateX(24px) rotate(-7deg);
  }
}

.cloud-sheen {
  right: 24px;
  top: 198px;
  width: 224px;
  height: 250px;
  border-radius: 50%;
  animation: cloudSweep 5.2s ease-in-out infinite;
}

@keyframes cloudSweep {
  0%,
  100% {
    opacity: 0.08;
    transform: translateX(-16px);
  }
  50% {
    opacity: 0.22;
    transform: translateX(16px);
  }
}

.page-content--home .home-tag {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(28px + env(safe-area-inset-top));
}

.page-content--home .home-title {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(78px + env(safe-area-inset-top));
  width: 236px;
}

.page-content--home .home-title--second {
  top: calc(126px + env(safe-area-inset-top));
}

.home-headline {
  color: #ffffff;
  text-shadow:
    0 4px 12px rgba(14, 62, 123, 0.42),
    0 1px 0 rgba(14, 62, 123, 0.32),
    0 0 18px rgba(14, 62, 123, 0.12);
}

.page-content--home .home-subline {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(208px + env(safe-area-inset-top));
  width: 214px;
}

.page-content--home .subline {
  color: rgba(255, 255, 255, 0.98);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  text-shadow:
    0 3px 10px rgba(14, 62, 123, 0.36),
    0 1px 0 rgba(14, 62, 123, 0.22);
}

.page-content--home .home-action {
  left: calc(24px + env(safe-area-inset-left));
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(76px + env(safe-area-inset-bottom));
}

.page-content--home .home-helper {
  left: calc(24px + env(safe-area-inset-left));
  bottom: calc(30px + env(safe-area-inset-bottom));
  width: 264px;
}

.page-content--home .helper {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(17, 68, 129, 0.58);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(17, 68, 129, 0.22);
  text-shadow: 0 2px 6px rgba(8, 36, 72, 0.28);
  white-space: nowrap;
}

.page-content--memory .memory-tag,
.page-content--choice .choice-tag,
.page-content--reveal .reveal-tag,
.page-content--result .result-tag {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(28px + env(safe-area-inset-top));
}

.page-content--memory .memory-title {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(78px + env(safe-area-inset-top));
  width: 220px;
}

.page-content--memory .memory-title--second {
  top: calc(126px + env(safe-area-inset-top));
}

.page-content--memory .section-title,
.page-content--memory .section-note {
  color: var(--ink);
  text-shadow: none;
}

.page-content--memory .memory-note {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(184px + env(safe-area-inset-top));
  width: 226px;
}

.section-note {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.42;
  font-weight: 700;
}

.memory-grid,
.choice-list {
  position: absolute;
  left: calc(24px + env(safe-area-inset-left));
  display: grid;
}

.memory-grid .position-box,
.choice-list .position-box,
.badge-row .position-box {
  position: relative;
}

.memory-grid {
  top: calc(232px + env(safe-area-inset-top));
  width: 245px;
  gap: 10px;
}

.choice-list {
  top: calc(230px + env(safe-area-inset-top));
  width: 222px;
  gap: 12px;
}

.card-slot {
  width: 100%;
}

.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 68px;
  padding: 13px 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow);
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.choice-card strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.16;
}

.choice-card span {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.card-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.card-sheen::before {
  content: "";
  position: absolute;
  inset: -20% 0;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.46) 46%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%);
}

.choice-card.is-selected .card-sheen::before {
  animation: cardSweep 3.1s ease-in-out infinite;
}

@keyframes cardSweep {
  0%,
  100% {
    transform: translateX(-120%);
  }
  60% {
    transform: translateX(120%);
  }
}

.card-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-burst::before,
.card-burst::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
}

.choice-burst-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: choiceBurstFloat 1.08s ease-out forwards;
}

@keyframes choiceBurstFloat {
  0% {
    opacity: 0.95;
    transform: translate(0, 0) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(var(--burst-x, 0px), var(--burst-y, -24px)) scale(1.16);
  }
}

.choice-card.is-selected .card-burst::before,
.choice-card.is-selected .card-burst::after {
  animation: burstFloat 1.2s ease-out;
}

.choice-card.is-selected .card-burst::before {
  left: 14px;
  bottom: 12px;
  background: rgba(255, 246, 191, 0.94);
}

.choice-card.is-selected .card-burst::after {
  right: 14px;
  top: 12px;
  background: rgba(183, 228, 255, 0.92);
  animation-delay: 0.08s;
}

@keyframes burstFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(1.18);
  }
}

.choice-card.is-selected {
  transform: scale(1.03);
  background: var(--card-strong);
  border-color: rgba(243, 191, 102, 0.94);
  box-shadow: 0 18px 42px rgba(243, 182, 86, 0.2);
}

.choice-card.is-popping {
  animation: selectPop 0.42s ease;
}

@keyframes selectPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1.03);
  }
}

.memory-card.is-muted,
.type-card.is-muted {
  opacity: 0.8;
  filter: brightness(0.98);
}

.type-card--energy.is-selected {
  border-color: rgba(244, 128, 88, 0.95);
  box-shadow: 0 18px 42px rgba(244, 128, 88, 0.22);
}

.type-card--sharing.is-selected {
  border-color: rgba(243, 191, 102, 0.94);
  box-shadow: 0 18px 42px rgba(243, 191, 102, 0.2);
}

.type-card--summer.is-selected {
  border-color: rgba(64, 182, 170, 0.92);
  box-shadow: 0 18px 42px rgba(64, 182, 170, 0.18);
}

.memory-feedback,
.choice-feedback {
  left: calc(24px + env(safe-area-inset-left));
  width: 220px;
}

.memory-feedback {
  top: calc(456px + env(safe-area-inset-top));
}

.choice-feedback {
  top: calc(496px + env(safe-area-inset-top));
}

.hint-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1d6ec5;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(49, 122, 228, 0.12);
}

.memory-action,
.choice-action {
  left: calc(24px + env(safe-area-inset-left));
  bottom: calc(44px + env(safe-area-inset-bottom));
  width: 222px;
}

.page-content--choice .choice-title {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(84px + env(safe-area-inset-top));
  width: 206px;
}

.page-content--choice .choice-title--second {
  top: calc(130px + env(safe-area-inset-top));
}

.page-content--choice .section-title,
.page-content--choice .section-note {
  color: var(--ink);
  text-shadow: none;
}

.page-content--choice .choice-note {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(184px + env(safe-area-inset-top));
  width: 220px;
}

.page-content--choice .choice-card {
  min-height: 72px;
  background: rgba(255, 255, 255, 0.92);
}

.page-content--reveal .reveal-title {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(82px + env(safe-area-inset-top));
  width: 220px;
}

.page-content--reveal .reveal-title--second {
  top: calc(128px + env(safe-area-inset-top));
}

.page-content--reveal .section-title,
.page-content--reveal .section-note {
  color: #ffffff;
  text-shadow: 0 4px 12px rgba(14, 62, 123, 0.34);
}

.page-content--reveal .reveal-note {
  left: calc(24px + env(safe-area-inset-left));
  top: calc(186px + env(safe-area-inset-top));
  width: 218px;
}

.reveal-summary {
  position: absolute;
  left: calc(24px + env(safe-area-inset-left));
  top: calc(238px + env(safe-area-inset-top));
  width: 196px;
}

.reveal-summary-slot {
  width: 100%;
}

.summary-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.82) 0%, rgba(239, 248, 255, 0.74) 100%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 30px rgba(20, 83, 154, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.summary-badge strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
}

.summary-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(31, 89, 166, 0.44);
}

.reveal-zone {
  position: absolute;
  left: 84px;
  right: 34px;
  top: 176px;
  bottom: 126px;
  pointer-events: none;
}

.reveal-hotspot {
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: 28px;
  pointer-events: auto;
}

.page.page-4.revealing .reveal-hotspot {
  pointer-events: none;
}

.reveal-action {
  left: calc(24px + env(safe-area-inset-left));
  bottom: calc(66px + env(safe-area-inset-bottom));
  width: 255px;
}

.reveal-btn {
  box-shadow: 0 20px 40px rgba(239, 75, 50, 0.28);
}

.reveal-btn.is-pressed {
  animation: buttonPress 0.25s ease;
}

@keyframes buttonPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1.02);
  }
}

.page.page-4.revealing {
  animation: none;
}

.page.page-4.revealing::after {
  content: "";
  position: absolute;
  left: 98px;
  top: 168px;
  width: 178px;
  height: 260px;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0) 70%);
  animation: revealBottleScale 0.46s ease forwards;
  pointer-events: none;
}

@keyframes revealBottleScale {
  0% {
    transform: scale(1);
    opacity: 0.18;
  }
  100% {
    transform: scale(1.04);
    opacity: 0.5;
  }
}

.page.page-4.revealing .ring--outer {
  animation: revealRingOuter 0.82s ease forwards;
}

.page.page-4.revealing .ring--inner {
  animation: revealRingInner 0.72s ease forwards;
}

@keyframes revealRingOuter {
  0% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@keyframes revealRingInner {
  0% {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.52);
  }
}

.reveal-particles {
  position: absolute;
  inset: 0;
}

.reveal-particle {
  position: absolute;
  left: 188px;
  top: 310px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 245, 218, 0.92);
  box-shadow: 0 0 16px rgba(255, 245, 218, 0.4);
  opacity: 0;
}

.page.page-4.revealing .reveal-particle {
  animation: revealParticle 1.12s ease-out forwards;
  animation-delay: var(--particle-delay, 0s);
}

@keyframes revealParticle {
  0% {
    opacity: 0.95;
    transform: translate(0, 0) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-x, 0px), var(--particle-y, -60px)) scale(1.22);
  }
}

.flash-layer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 252, 244, 0.98) 0%, rgba(255, 246, 224, 0.72) 34%, rgba(255, 255, 255, 0) 64%),
    rgba(255, 252, 244, 0.32);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}

.flash-layer.is-visible {
  animation: flashLayerGlow 0.68s ease forwards;
}

@keyframes flashLayerGlow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

.page-content--result .result-tag {
  left: auto;
  right: calc(24px + env(safe-area-inset-right));
  top: calc(62px + env(safe-area-inset-top));
}

.page-content--result .result-title {
  right: calc(24px + env(safe-area-inset-right));
  top: calc(104px + env(safe-area-inset-top));
  width: 224px;
}

.page-content--result .result-title--second {
  top: calc(148px + env(safe-area-inset-top));
}

.result-title-text {
  color: var(--ink);
  font-size: clamp(28px, 7.3vw, 34px);
  line-height: 1.08;
  text-shadow: none;
}

.result-identity {
  right: calc(24px + env(safe-area-inset-right));
  top: calc(224px + env(safe-area-inset-top));
  width: 224px;
}

.identity-name {
  color: var(--ink-green);
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.06;
  font-weight: 900;
  white-space: nowrap;
}

.result-desc-wrap {
  right: calc(24px + env(safe-area-inset-right));
  top: calc(278px + env(safe-area-inset-top));
  width: 224px;
}

.result-desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.44;
  font-weight: 700;
}

.result-card-wrap {
  right: calc(24px + env(safe-area-inset-right));
  top: calc(354px + env(safe-area-inset-top));
  width: 232px;
}

.result-card {
  width: 100%;
  padding: 15px 16px 14px;
  border-radius: 24px;
  background: var(--card-blue);
  border: 1px solid rgba(173, 220, 236, 0.92);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.result-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.38;
}

.result-row span {
  flex: 0 0 auto;
  color: rgba(17, 68, 129, 0.72);
  font-weight: 700;
}

.result-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.38;
  font-weight: 900;
  text-align: right;
}

.energy-stars {
  display: inline-flex;
  gap: 2px;
}

.energy-star {
  width: 12px;
  height: 12px;
  clip-path: polygon(50% 0, 63% 34%, 100% 38%, 73% 60%, 81% 100%, 50% 78%, 19% 100%, 27% 60%, 0 38%, 37% 34%);
  background: rgba(36, 111, 187, 0.18);
}

.page.page-5.stars-animate .energy-star {
  animation: starFill 0.34s ease forwards;
}

.page.page-5.stars-animate .energy-star:nth-child(1) {
  animation-delay: 0.18s;
}

.page.page-5.stars-animate .energy-star:nth-child(2) {
  animation-delay: 0.32s;
}

.page.page-5.stars-animate .energy-star:nth-child(3) {
  animation-delay: 0.46s;
}

.page.page-5.stars-animate .energy-star:nth-child(4) {
  animation-delay: 0.6s;
}

.page.page-5.stars-animate .energy-star:nth-child(5) {
  animation-delay: 0.74s;
}

@keyframes starFill {
  0% {
    background: rgba(36, 111, 187, 0.18);
    transform: scale(0.84);
  }
  100% {
    background: linear-gradient(180deg, #ffe792 0%, #f8c44c 100%);
    box-shadow: 0 0 8px rgba(248, 196, 76, 0.3);
    transform: scale(1);
  }
}

.result-actions {
  right: calc(24px + env(safe-area-inset-right));
  left: calc(24px + env(safe-area-inset-left));
  bottom: calc(34px + env(safe-area-inset-bottom));
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.share-layer {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}

.share-layer.is-open {
  pointer-events: auto;
}

.share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 71, 138, 0.34);
  opacity: 0;
  transition: opacity 0.34s ease;
}

.share-layer.is-open .share-backdrop {
  opacity: 1;
}

body.share-open .page.page-5.is-active .page-content--result,
body.share-open .page.page-5.is-active .ambient--result {
  filter: saturate(0.88) brightness(0.78);
}

body.share-open .page.page-5.is-active .page-content--result {
  transition: filter 0.34s ease;
}

.share-card {
  position: absolute;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: min(314px, calc(100% - 32px));
  padding: 20px 18px 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.96) 100%);
  box-shadow: 0 28px 70px rgba(6, 40, 84, 0.28);
  transform: translate(-50%, 110%);
  transition: transform 0.5s cubic-bezier(0.22, 0.78, 0.18, 1);
}

.share-layer.is-open .share-card {
  transform: translate(-50%, 0);
}

.share-layer.is-closing .share-card {
  transform: translate(-50%, 110%);
}

.share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(17, 68, 129, 0.08);
  color: var(--ink);
  font-size: 22px;
  line-height: 30px;
  text-align: center;
}

.share-title {
  display: block;
  color: #2a76db;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.share-identity {
  margin-top: 10px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1.05;
  font-weight: 900;
  white-space: nowrap;
}

.share-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(17, 68, 129, 0.08);
  font-size: 14px;
  line-height: 1.4;
}

.share-item span {
  color: rgba(17, 68, 129, 0.72);
  font-weight: 700;
}

.share-item strong {
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}

.share-footer {
  margin: 14px 0 0;
  color: rgba(17, 68, 129, 0.72);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 16;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(17, 68, 129, 0.9);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(6, 40, 84, 0.22);
}

.toast.is-visible {
  animation: toastPop 1.5s ease forwards;
}

@keyframes toastPop {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  12%,
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.bubble--home-a {
  left: 262px;
  top: 382px;
  width: 34px;
  height: 34px;
  animation-delay: 0.2s;
}

.bubble--home-b {
  left: 306px;
  top: 336px;
  width: 24px;
  height: 24px;
  animation-duration: 8.2s;
}

.bubble--home-c {
  left: 56px;
  top: 446px;
  width: 18px;
  height: 18px;
  animation-duration: 6.8s;
}

.bubble--home-d {
  left: 296px;
  top: 462px;
  width: 16px;
  height: 16px;
  animation-delay: 1s;
}

.bubble--home-e {
  left: 138px;
  top: 356px;
  width: 22px;
  height: 22px;
  animation-duration: 8.8s;
}

.star--home-a {
  left: 312px;
  top: 208px;
}

.star--home-b {
  left: 298px;
  top: 162px;
  animation-delay: 1s;
}

.star--home-c {
  left: 266px;
  top: 236px;
  animation-delay: 1.6s;
}

.plane--home {
  top: 44px;
  right: 24px;
}

.highlight--home-bottle {
  right: 92px;
  top: 248px;
  transform: rotate(-6deg);
}

.milk-sheen--home {
  left: 24px;
  right: 24px;
  bottom: 96px;
  height: 120px;
}

.bubble--memory-a {
  left: 26px;
  top: 176px;
  width: 28px;
  height: 28px;
}

.bubble--memory-b {
  left: 290px;
  top: 214px;
  width: 20px;
  height: 20px;
  animation-duration: 8s;
}

.bubble--memory-c {
  left: 250px;
  top: 164px;
  width: 26px;
  height: 26px;
  animation-delay: 1.2s;
}

.star--memory-a {
  left: 316px;
  top: 88px;
}

.star--memory-b {
  left: 26px;
  top: 280px;
  animation-delay: 1.4s;
}

.plane--memory {
  top: 44px;
  right: 34px;
}

.bubble--choice-a {
  left: 294px;
  top: 154px;
  width: 20px;
  height: 20px;
}

.bubble--choice-b {
  left: 24px;
  top: 430px;
  width: 18px;
  height: 18px;
  animation-duration: 7.8s;
}

.bubble--choice-c {
  left: 54px;
  top: 328px;
  width: 26px;
  height: 26px;
  animation-delay: 1s;
}

.bubble--choice-d {
  left: 302px;
  top: 332px;
  width: 16px;
  height: 16px;
}

.star--choice-a {
  left: 20px;
  top: 196px;
}

.star--choice-b {
  left: 294px;
  top: 78px;
  animation-delay: 1.3s;
}

.plane--choice {
  top: 66px;
  right: 50px;
}

.highlight--choice-bottle {
  right: 24px;
  top: 206px;
  transform: rotate(-4deg);
}

.milk-sheen--choice {
  left: 10px;
  right: 10px;
  bottom: 100px;
  height: 110px;
}

.bubble--reveal-a {
  left: 28px;
  top: 236px;
  width: 36px;
  height: 36px;
}

.bubble--reveal-b {
  left: 308px;
  top: 214px;
  width: 34px;
  height: 34px;
  animation-duration: 8.4s;
}

.bubble--reveal-c {
  left: 286px;
  top: 92px;
  width: 16px;
  height: 16px;
}

.star--reveal-a {
  left: 18px;
  top: 180px;
}

.star--reveal-b {
  left: 316px;
  top: 140px;
  animation-delay: 1s;
}

.star--reveal-c {
  left: 292px;
  top: 298px;
  animation-delay: 1.7s;
}

.highlight--reveal-bottle {
  left: 156px;
  top: 184px;
  transform: rotate(-3deg);
}

.bubble--result-a {
  left: 18px;
  top: 204px;
  width: 18px;
  height: 18px;
}

.bubble--result-b {
  left: 318px;
  top: 118px;
  width: 24px;
  height: 24px;
}

.bubble--result-c {
  left: 266px;
  top: 48px;
  width: 16px;
  height: 16px;
  animation-delay: 1.1s;
}

.star--result-a {
  left: 36px;
  top: 126px;
}

.star--result-b {
  left: 322px;
  top: 88px;
  animation-delay: 1.2s;
}

.plane--result {
  top: 48px;
  right: 72px;
}

.highlight--result-bottle {
  left: 44px;
  top: 220px;
  transform: rotate(-5deg);
}

@media (min-width: 768px) {
  .stage {
    padding: 14px;
  }

  .phone-frame {
    width: min(375px, 100vw);
    height: auto;
    aspect-ratio: 375 / 667;
    border-radius: 28px;
    box-shadow: 0 28px 80px rgba(23, 83, 161, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.65);
  }
}