/* 今生测试 · 三幕剧 */
body {
  margin: 0;
  background: radial-gradient(circle at 30% 10%, #1a0f1a, #0a050a, #030103);
  min-height: 100vh;
  font-family: 'Poppins', 'Noto Serif SC', cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0e6ff;
}

.life-test-container {
  max-width: 600px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  margin: 0 auto;
}

/* 游戏卡片 */
.game-card {
  background: rgba(10, 5, 15, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40px;
  padding: 32px 24px;
  box-shadow: 0 0 40px rgba(80, 0, 40, 0.5), inset 0 0 20px rgba(100, 0, 80, 0.3);
  border: 1px solid #6f4f6f;
  text-align: center;
  transition: opacity 0.3s;
}

/* 进度指示器 */
.stage-indicator {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3a2a4a;
  border: 1px solid #6f4f6f;
  transition: all 0.2s;
}
.stage-dot.active {
  background: #c08aff;
  box-shadow: 0 0 12px #a55cff;
  width: 16px;
  height: 16px;
}
.stage-dot.completed {
  background: #7f5faf;
}

/* 像素装饰 */
.pixel-decor {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  opacity: 0.8;
}
.pixel {
  width: 8px;
  height: 8px;
  background: #a55cff;
  box-shadow: 8px 0 #7f3faf, 0 8px #7f3faf, 8px 8px #3f1f5f;
}

.game-title {
  font-size: 28px;
  font-weight: 700;
  color: #d9c4ff;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.game-subtitle {
  font-size: 14px;
  color: #a08090;
  margin-bottom: 24px;
  font-style: italic;
}

/* 任务区域 */
.task-area {
  margin-bottom: 30px;
}
.task-animation {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 10px #a55cff);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-description {
  font-size: 18px;
  color: #e0d0ff;
  margin-bottom: 16px;
}
.progress-days {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  color: #b0a0c0;
  font-size: 14px;
}
.days-count {
  font-weight: 700;
  color: #ffeaaf;
  font-size: 24px;
}

/* 方案二：虚空边缘 */
.void-canvas {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  background: #0a050a;
  border-radius: 20px;
  border: 2px solid #4a2a4a;
  box-shadow: inset 0 0 30px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.void-object {
  font-size: 64px;
  filter: drop-shadow(0 0 8px white);
  transition: transform 0.3s;
}
.void-creep {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  box-shadow: inset 0 0 30px #000;
  border-radius: 20px;
  background: radial-gradient(circle at 30% 30%, transparent 0%, #000 100%);
  opacity: 0;
  transition: opacity 0.5s;
}
.void-count {
  margin-top: 12px;
  color: #c0a0e0;
}

/* 方案三：灵魂形状 */
.shape-container {
  width: 220px;
  height: 220px;
  margin: 20px auto;
  position: relative;
}
.soul-piece {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #7f3faf;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: 0 0 20px #a55cff;
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}
.soul-piece:hover {
  transform: scale(1.1);
}
.soul-collected {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}
.collected-piece {
  width: 40px;
  height: 40px;
  border-radius: 20% 80% 30% 70% / 40% 30% 70% 60%;
  background: #a55cff;
  box-shadow: 0 0 10px #c08aff;
}

/* 按钮 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 20px 0 10px;
}
.btn {
  background: rgba(20, 8, 25, 0.8);
  border: 1px solid #6f4f6f;
  border-radius: 60px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  color: #e0c0d0;
  transition: all 0.2s;
  min-width: 120px;
}
.btn-primary {
  background: #5f2f4f;
  border-color: #9f6f8f;
  color: #ffeaaf;
  box-shadow: 0 0 15px #7f3f5f;
}
.btn-primary:hover {
  background: #7f3f5f;
  transform: scale(1.02);
}
.btn-secondary {
  background: transparent;
  border: 1px solid #8f7faf;
  color: #c0b0d0;
}
.btn-secondary:hover {
  background: rgba(80, 40, 80, 0.5);
}

/* 结果面板 */
.result-panel {
  margin-top: 24px;
  padding: 20px;
  background: rgba(0,0,0,0.3);
  border-radius: 24px;
  border: 1px solid #8f7faf;
}
.result-tag {
  font-size: 32px;
  font-weight: 900;
  color: #ffeaaf;
  text-shadow: 0 0 15px #aa55ff;
  margin-bottom: 12px;
}
.result-text {
  font-size: 16px;
  line-height: 1.7;
  color: #d0c0e0;
  margin-bottom: 16px;
  font-style: italic;
}
.share-btn {
  width: 100%;
  margin-top: 8px;
}

.hidden {
  display: none !important;
}

@media (max-width: 480px) {
  .life-test-container { padding: 16px; }
  .game-card { padding: 24px 16px; }
  .task-animation { font-size: 40px; }
}