/* ============ 全局 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #fff;
  background: #2b1a2e;
}

/* ============ 视频背景 ============ */
#bgVideo {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.overlay {
  position: fixed; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(60,20,50,.55) 0%,
    rgba(40,15,45,.35) 45%,
    rgba(30,10,40,.65) 100%);
}

/* ============ 开启遮罩（极简请柬风） ============ */
#startOverlay {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(120% 120% at 50% 30%,
    rgba(70,25,65,.55) 0%, rgba(28,10,34,.88) 70%, rgba(18,6,24,.96) 100%);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.2s ease, visibility 1.2s;
  overflow: hidden;
}
#startOverlay.gone { opacity: 0; visibility: hidden; }

/* 背景装饰细环 */
.start-deco { position: absolute; border-radius: 50%; border: 1px solid rgba(255,170,200,.14); }
.s-ring1 { width: 62vmin; height: 62vmin; animation: ringPulse 6s ease-in-out infinite; }
.s-ring2 { width: 88vmin; height: 88vmin; border-style: dashed; opacity: .5; animation: spinSlow 60s linear infinite; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.06);opacity:.4} }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.start-card { position: relative; text-align: center; animation: rise 1.4s ease; padding: 0 24px; }
.s-eyebrow {
  font-size: 12px; letter-spacing: 10px; text-indent: 10px;
  color: rgba(255,214,232,.75); margin-bottom: 26px; font-weight: 300;
}
.s-title {
  font-family: Georgia, "STZhongsong", "SimSun", serif;
  font-size: clamp(52px, 11vw, 92px);
  font-weight: 400; letter-spacing: 8px; line-height: 1.15;
  color: #fff; text-shadow: 0 4px 40px rgba(255,130,175,.45);
}
.s-title span {
  background: linear-gradient(120deg, #ffd9e8 0%, #ff8fbe 25%, #fff3b0 50%, #ff8fbe 75%, #ffd9e8 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s linear infinite;
  filter: drop-shadow(0 0 22px rgba(255,140,185,.65));
}
@keyframes shimmer { to { background-position: 220% center; } }

/* 华丽层：花瓣 + 星光 */
#sPetals, #sStars { position: absolute; inset: 0; pointer-events: none; }
.petal {
  position: absolute; top: -30px; width: 16px; height: 16px;
  background: radial-gradient(circle at 30% 30%, #ffc2da, #ff7fb0);
  border-radius: 100% 0 100% 0;
  opacity: 0; animation: petalFall linear forwards;
  filter: drop-shadow(0 0 6px rgba(255,130,175,.5));
}
@keyframes petalFall {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg) translateX(0); }
  10%  { opacity: .9; }
  50%  { transform: translateY(52vh) rotate(180deg) translateX(6vw); }
  100% { opacity: 0; transform: translateY(106vh) rotate(400deg) translateX(-4vw); }
}
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(255,220,240,.9);
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.15; transform:scale(.7)} 50%{opacity:1; transform:scale(1.4)} }
.s-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 0 22px; }
.s-divider i { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,177,207,.6)); display: block; }
.s-divider i:last-child { background: linear-gradient(90deg, rgba(255,177,207,.6), transparent); }
.s-divider b { color: #ff9ec4; font-size: 13px; font-weight: 400; animation: beat 1.6s infinite; }
.s-names { font-size: 20px; letter-spacing: 6px; color: rgba(255,255,255,.92); }
.s-names em { font-style: normal; color: #ff9ec4; margin: 0 8px; font-family: Georgia, serif; }
.s-date { font-size: 12px; letter-spacing: 5px; color: rgba(255,255,255,.55); margin: 14px 0 44px; }

#startBtn {
  padding: 0; width: 168px; height: 52px;
  background: transparent; color: #ffd6e8;
  border: 1px solid rgba(255,177,207,.55); border-radius: 52px;
  font-size: 15px; letter-spacing: 4px; text-indent: 4px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: color .4s, border-color .4s, box-shadow .4s, transform .3s;
}
#startBtn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #ff6b9d, #c44d8c);
  transform: translateY(101%); transition: transform .4s ease;
}
#startBtn span { position: relative; z-index: 1; }
#startBtn:hover { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255,107,157,.45); }
#startBtn:hover::before { transform: translateY(0); }
@keyframes beat { 0%,100%{transform:scale(1)} 30%{transform:scale(1.25)} 45%{transform:scale(1)} }
@keyframes rise { from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none} }

/* ============ 主体 ============ */
#mainContent {
  position: relative; z-index: 10;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  padding: 24px;
  transition: opacity 1.2s ease;
}
#mainContent.hidden { opacity: 0; pointer-events: none; }

.counter-card, .quote-card, .player-card {
  background: transparent;
  border: none;
  border-radius: 22px;
  box-shadow: none;
}

/* 在一起天数 */
.counter-card { text-align: center; padding: 26px 52px; animation: rise 1s .2s both; }
.counter-label { font-size: 15px; letter-spacing: 4px; opacity: .85; }
.counter-num { font-size: 58px; font-weight: 700; margin: 6px 0; color: #ffd6e8; text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 24px rgba(255,150,190,.55); }
.counter-num span { font-family: Georgia, serif; }
.counter-sub { font-size: 13px; opacity: .7; letter-spacing: 2px; }

/* 情话 */
.quote-card { padding: 10px 26px; max-width: 88vw; text-align: center; animation: rise 1s .45s both; }
#quoteText { font-size: 16px; letter-spacing: 1.5px; line-height: 1.8; opacity: .95; transition: opacity .8s; text-shadow: 0 1px 8px rgba(0,0,0,.8); }

/* 播放器 */
.player-card {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; width: min(420px, 88vw);
  animation: rise 1s .7s both;
}
.disc { font-size: 34px; animation: spin 6s linear infinite; }
.disc.paused { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.player-info { flex: 1; }
#songTitle { font-size: 15px; margin-bottom: 8px; letter-spacing: 1px; }
.progress-wrap { height: 5px; background: rgba(255,255,255,.25); border-radius: 3px; cursor: pointer; }
.progress-bar { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #ff9ec4, #ff6b9d); }
.time-row { display: flex; justify-content: space-between; font-size: 11px; opacity: .7; margin-top: 5px; }
.ctrl {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 18px; color: #fff;
  background: linear-gradient(135deg, #ff6b9d, #c44d8c);
  box-shadow: 0 4px 16px rgba(255,107,157,.5);
  transition: transform .2s;
}
.ctrl:hover { transform: scale(1.1); }

/* ============ 漂浮爱心 ============ */
.float-heart {
  position: fixed; bottom: -40px; z-index: 5;
  font-size: 20px; opacity: 0; pointer-events: none;
  animation: floatUp linear forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  12%  { opacity: .85; }
  100% { opacity: 0; transform: translateY(-105vh) rotate(40deg); }
}
/* 点击冒心 */
.click-heart {
  position: fixed; z-index: 40; pointer-events: none;
  font-size: 26px; animation: popHeart 1s ease forwards;
}
@keyframes popHeart {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(.4); }
  100% { opacity: 0; transform: translate(-50%,-160%) scale(1.5); }
}

@media (max-width: 480px) {
  .counter-num { font-size: 44px; }
  .counter-card { padding: 20px 36px; }
  .s-title { letter-spacing: 4px; }
}

/* ============ 进门暗号 ============ */
#gateBox { margin-bottom: 30px; }
#gateInput {
  width: 240px; padding: 12px 18px; font-size: 20px; letter-spacing: 6px;
  text-align: center; color: #ffd6e8;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,177,207,.45); border-radius: 14px;
  outline: none; caret-color: #ff9ec4;
  transition: border-color .3s, box-shadow .3s;
}
#gateInput::placeholder { color: rgba(255,255,255,.45); font-size: 14px; letter-spacing: 2px; }
#gateInput:focus { border-color: #ff9ec4; box-shadow: 0 0 18px rgba(255,140,185,.35); }
#gateInput.error { border-color: #ff5c5c; animation: shake .4s; }
#gateHint { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 10px; letter-spacing: 3px; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }