* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  font-size: calc(100vw / 10);
}

body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#bgm-btn {
 position: fixed;
 top: 20px;
 right: 20px;
 width: 45px;
 height: 45px;
 border-radius: 50%;
 background: radial-gradient(circle at center, #333 18%, #111 20%, #444 22%, #222 40%, #111 60%, #333 80%);
 border: 3px solid #e8a598;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 9999;
 overflow: hidden;
}

#bgm-disc {
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: #e8a598;
 border: 2px solid #fff;
}

#bgm-btn.playing {
 animation: discSpin 3s linear infinite;
}

#bgm-btn.paused {
 animation: none;
}

@keyframes discSpin {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

@keyframes snowfall {
 from { transform: translateY(-20px) rotate(0deg); opacity: 0.6; }
 to { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
@keyframes floatY {
 0%,100% { transform: translateY(0); }
 50% { transform: translateY(-8px); }
}
@keyframes heartbeat {
 0%,100% { transform: scale(1); }
 50% { transform: scale(1.2); }
}
@keyframes spinSlow {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}
@keyframes fadeInUp {
 from { opacity: 0; transform: translateY(30px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes heartFly {
 0% { transform: translate(0,0) scale(0.5); opacity: 1; }
 100% { transform: translate(var(--dx),var(--dy)) scale(1.2); opacity: 0; }
}
@keyframes scalePulse {
 0%,100% { transform: scale(1); }
 50% { transform: scale(1.15); }
}

#p1-bouquet {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 2.2rem;
 height: 4.99rem;
 border-radius: 0.16rem;
 overflow: hidden;
 pointer-events: none;
}

#p1-cat {
 position: absolute;
 top: 13.2rem;
 left: 1.8rem;
 width: 1.4rem;
 height: 1.2rem;
 cursor: pointer;
 pointer-events: all;
}

.snowflake {
 position: fixed;
 pointer-events: none;
 z-index: 100;
 animation: snowfall linear infinite;
}
.snowflake img {
 width: 100%;
 height: 100%;
}

.p1-float-heart {
 position: absolute;
 pointer-events: none;
 animation: floatY ease-in-out infinite;
}

#p2-piano {
 position: absolute;
 top: 5.8rem;
 left: 1.4rem;
 width: 7rem;
 height: 8.5rem;
 border-radius: 0.21rem;
 overflow: hidden;
 pointer-events: none;
}

.p2-envelope {
 position: absolute;
 width: 1.2rem;
 height: 1rem;
 pointer-events: none;
 animation: floatY ease-in-out infinite;
}

.p2-snow-spin {
 position: absolute;
 width: 0.8rem;
 height: 0.8rem;
 pointer-events: none;
 animation: spinSlow linear infinite;
}

#p3-polaroid {
 position: absolute;
 top: 11.39rem;
 left: 2.11rem;
 width: 5.8rem;
 height: 7.95rem;
 transform: rotate(-2deg);
 overflow: hidden;
 pointer-events: none;
}

#p3-heart {
 position: absolute;
 top: 7.29rem;
 left: 6.4rem;
 width: 1.4rem;
 height: 1.25rem;
 animation: heartbeat 1.5s ease-in-out infinite;
 pointer-events: none;
}

.p3-flower-spin {
 position: absolute;
 width: 0.6rem;
 height: 0.6rem;
 pointer-events: none;
 animation: spinSlow linear infinite;
}

.p3-snow-spin {
 position: absolute;
 pointer-events: none;
 animation: spinSlow linear infinite;
}

#p4-orange {
 position: absolute;
 top: 7.5rem;
 left: 3.5rem;
 width: 3rem;
 height: 3rem;
 cursor: pointer;
 pointer-events: all;
}

.p4-float {
 position: absolute;
 pointer-events: none;
 animation: floatY ease-in-out infinite;
}

#p4-address {
 position: absolute;
 top: 15.83rem;
 left: 0.8rem;
 width: 8.4rem;
 height: 0.89rem;
 cursor: pointer;
 pointer-events: all;
}

.p4-spin {
 position: absolute;
 pointer-events: none;
 animation: spinSlow linear infinite;
}

.p5-fadeIn {
 position: absolute;
 pointer-events: none;
 opacity: 0;
}
.p5-fadeIn.active {
 animation: fadeInUp 0.6s ease forwards;
}

.p5-float {
 position: absolute;
 pointer-events: none;
 animation: floatY ease-in-out infinite;
}
.p5-spin {
 position: absolute;
 pointer-events: none;
 animation: spinSlow linear infinite;
}

.p5-popup {
 position: absolute;
 width: 1.2rem;
 height: auto;
 pointer-events: none;
 opacity: 0;
}

#p6-input-wrap {
 position: absolute;
 top: 4.67rem;
 left: 50%;
 transform: translateX(-50%);
 width: 6.28rem;
 height: 1.29rem;
}
#p6-input-wrap .p6-img-btn {
 width: 100%;
 height: 100%;
 display: block;
}
#p6-input {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: transparent;
 border: none;
 outline: none;
 text-align: center;
 font-size: 0.34rem;
 color: #4a5b7e;
 pointer-events: all;
}
#p6-input::placeholder {
 color: #a0b0c8;
}

.p6-option {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 width: 5.23rem;
 height: 1.39rem;
 cursor: pointer;
 pointer-events: all;
}
#p6-opt-1 { top: 8.06rem; }
#p6-opt-2 { top: 9.59rem; }
#p6-opt-3 { top: 11.12rem; }

.p6-option .p6-img-btn {
 width: 100%;
 height: 100%;
 display: block;
}

.p6-checkbox {
 position: absolute;
 right: 0.3rem;
 top: 50%;
 transform: translateY(-50%);
 width: 0.4rem;
 height: 0.4rem;
 border: 2px solid #5a7ba8;
 border-radius: 50%;
 background: transparent;
 transition: background 0.3s;
}
.p6-option.selected .p6-checkbox {
 background: #5a7ba8;
}

#p6-submit-wrap {
 position: absolute;
 top: 14.37rem;
 left: 50%;
 transform: translateX(-50%);
 width: 3.41rem;
 height: 1.37rem;
 cursor: pointer;
 pointer-events: all;
}
#p6-submit-wrap .p6-img-btn {
 width: 100%;
 height: 100%;
 display: block;
}
#p6-submit-wrap.submitted {
 opacity: 0.6;
 pointer-events: none;
}

#p7-countdown {
 position: absolute;
 top: 16.66rem;
 left: 1rem;
 width: 8rem;
 height: 1.07rem;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.43rem;
 color: white;
 font-weight: bold;
 pointer-events: none;
 font-family: 'ZCOOL XiaoWei', 'PingFang SC', cursive;
}

.p7-float-heart {
 position: absolute;
 pointer-events: none;
 animation: floatY ease-in-out infinite;
}