:root {
  --gold: #ffd76a;
  --pink: #ff7eb3;
  --deep: #1a0b2e;
  --soft: rgba(255, 255, 255, 0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at top, #2a1150 0%, #150826 55%, #0a0414 100%);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  touch-action: none; /* 拖动旋转相框时不触发页面滚动 */
}

/* 星空 */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
    radial-gradient(2px 2px at 40% 70%, #ffe9b0, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, #cfe3ff, transparent),
    radial-gradient(2px 2px at 90% 85%, #fff, transparent),
    radial-gradient(1px 1px at 33% 12%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }

/* 进入页 */
.enter-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 4, 20, 0.55);
  backdrop-filter: blur(6px);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.enter-overlay.hidden { opacity: 0; visibility: hidden; }

.enter-card {
  text-align: center;
  padding: 40px 34px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 215, 106, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(255, 215, 106, 0.08);
  max-width: 86vw;
  animation: floatCard 4s ease-in-out infinite;
}
@keyframes floatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.enter-emoji { font-size: 64px; line-height: 1; margin-bottom: 14px; }
.enter-title { font-size: 28px; font-weight: 700; letter-spacing: 1px; }
.enter-title span { color: var(--gold); text-shadow: 0 0 18px rgba(255, 215, 106, 0.6); }
.enter-sub { margin: 12px 0 26px; color: rgba(255,255,255,0.8); font-size: 15px; }

.enter-btn {
  font-size: 18px;
  font-weight: 700;
  color: #3a1d00;
  border: none;
  border-radius: 999px;
  padding: 14px 34px;
  cursor: pointer;
  background: linear-gradient(135deg, #ffe29a, #ffb86c, #ff7eb3);
  box-shadow: 0 10px 30px rgba(255, 126, 179, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.enter-btn:hover { transform: scale(1.05); box-shadow: 0 14px 40px rgba(255, 126, 179, 0.6); }
.enter-btn:active { transform: scale(0.98); }

.enter-hint { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.5); }

/* 顶部横幅 */
.top-banner {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: clamp(18px, 4.5vw, 30px);
  font-weight: 800;
  letter-spacing: 2px;
  padding: 10px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 215, 106, 0.4);
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 126, 179, 0.7);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  white-space: nowrap;
}
.top-banner .heart { color: var(--pink); }
.top-banner.show { opacity: 1; }

/* 循环祝福语 */
.blessing {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(86vw, 720px);
  text-align: center;
  font-size: clamp(15px, 3.6vw, 21px);
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
  padding: 0 10px;
}
.blessing.show { opacity: 1; }
.blessing .name { color: var(--gold); }

/* 控制条 */
.controls {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  gap: 12px;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.controls.show { opacity: 0.55; pointer-events: auto; }
.controls.show:hover { opacity: 1; }
.ctrl-btn {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 215, 106, 0.35);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.ctrl-btn:hover { background: rgba(255, 215, 106, 0.22); transform: translateY(-2px); }
.ctrl-btn:active { transform: translateY(0); }
.ctrl-btn.active { background: rgba(255, 215, 106, 0.3); }

/* 照片大图灯箱 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 2, 12, 0.92);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.lightbox.show { opacity: 1; visibility: visible; }
.lb-img {
  max-width: 88vw;
  max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  border: 3px solid rgba(255, 215, 106, 0.6);
  transform: scale(0.92);
  transition: transform 0.35s ease;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox.show .lb-img { transform: scale(1); }
.lb-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lb-nav:hover { background: rgba(255, 215, 106, 0.3); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

/* 小屏适配 */
@media (max-width: 600px) {
  .enter-title { font-size: 23px; }
  .blessing { bottom: 84px; }
  .controls { gap: 8px; }
  .ctrl-btn { padding: 8px 12px; font-size: 13px; }
  .lb-nav { width: 44px; height: 44px; font-size: 26px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}