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

html, body {
  width: 100%;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: #4a2e52;
  -webkit-font-smoothing: antialiased;
}

body {
  background: linear-gradient(180deg, #ffe4ef 0%, #f5e0ff 45%, #e8e0ff 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
}

/* ========== 飘落层（稳定经典版） ========== */
.bg-decor {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 通用：用真实 left 定位水平位置，top:-5% 从屏顶外面开始
   关键帧只负责：translateY(下落) + translateX(左右摇摆) + rotate(自旋转) + opacity
   —— 纯 2D，所有手机/浏览器都稳定 —— */
.fall {
  position: absolute;
  top: -5%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ===== 🌸 樱花（主力 10 朵） ===== */
.sakura { font-size: 18px; animation-name: fallSakura; }
.s1  { left: 5%;  font-size: 15px; animation-duration: 22s; animation-delay: -0s; }
.s2  { left: 15%; font-size: 23px; animation-duration: 26s; animation-delay: -4s; }
.s3  { left: 25%; font-size: 17px; animation-duration: 24s; animation-delay: -9s; }
.s4  { left: 35%; font-size: 21px; animation-duration: 23s; animation-delay: -2s; }
.s5  { left: 45%; font-size: 16px; animation-duration: 28s; animation-delay: -13s; }
.s6  { left: 55%; font-size: 24px; animation-duration: 25s; animation-delay: -6s; }
.s7  { left: 65%; font-size: 18px; animation-duration: 27s; animation-delay: -18s; }
.s8  { left: 75%; font-size: 20px; animation-duration: 22s; animation-delay: -11s; }
.s9  { left: 85%; font-size: 17px; animation-duration: 26s; animation-delay: -20s; }
.s10 { left: 94%; font-size: 22px; animation-duration: 28s; animation-delay: -7s; }

/* ===== 💖 爱心 5 个 ===== */
.heart { font-size: 22px; animation-name: fallHeart; }
.h1 { left: 10%; font-size: 20px; animation-duration: 19s; animation-delay: -2s; }
.h2 { left: 30%; font-size: 26px; animation-duration: 22s; animation-delay: -11s; }
.h3 { left: 50%; font-size: 22px; animation-duration: 18s; animation-delay: -5s; }
.h4 { left: 70%; font-size: 25px; animation-duration: 23s; animation-delay: -16s; }
.h5 { left: 90%; font-size: 20px; animation-duration: 21s; animation-delay: -8s; }

/* ===== ✨ 星星 4 颗 ===== */
.star { font-size: 15px; animation-name: fallStar; }
.st1 { left: 3%;  animation-duration: 17s; animation-delay: -1s; }
.st2 { left: 30%; animation-duration: 19s; animation-delay: -13s; }
.st3 { left: 60%; animation-duration: 16s; animation-delay: -6s; }
.st4 { left: 92%; animation-duration: 20s; animation-delay: -18s; }

/* ===== 🦋 蝴蝶 3 只（慢） ===== */
.butterfly { font-size: 26px; animation-name: fallButterfly; }
.b1 { left: 15%; font-size: 24px; animation-duration: 34s; animation-delay: -1s; }
.b2 { left: 52%; font-size: 30px; animation-duration: 38s; animation-delay: -17s; }
.b3 { left: 85%; font-size: 27px; animation-duration: 36s; animation-delay: -8s; }

/* ===== 🫧 泡泡 3 个 ===== */
.bubble { font-size: 16px; animation-name: fallBubble; }
.bu1 { left: 12%; animation-duration: 26s; animation-delay: -5s; }
.bu2 { left: 50%; animation-duration: 30s; animation-delay: -19s; }
.bu3 { left: 88%; animation-duration: 28s; animation-delay: -11s; }

/* ===== 关键帧（纯 2D transform：translateY + 可选 translateX + rotate + opacity） ===== */

/* 樱花：S 形柔摆 */
@keyframes fallSakura {
  0%   { transform: translateY(0) rotate(0deg);             opacity: 0; }
  8%   {                                                    opacity: 0.8; }
  25%  { transform: translateY(25vh) translateX(20px) rotate(80deg); }
  50%  { transform: translateY(55vh) translateX(-15px) rotate(180deg); }
  75%  { transform: translateY(82vh) translateX(25px) rotate(280deg); }
  95%  {                                                    opacity: 0.5; }
  100% { transform: translateY(115vh) translateX(-10px) rotate(360deg); opacity: 0; }
}

/* 爱心：直一点，略斜 */
@keyframes fallHeart {
  0%   { transform: translateY(0);                       opacity: 0; }
  10%  {                                                   opacity: 0.9; }
  30%  { transform: translateY(30vh) translateX(-8px) rotate(-4deg); }
  55%  { transform: translateY(60vh) translateX(10px) rotate(5deg); }
  80%  { transform: translateY(90vh) translateX(-5px) rotate(-2deg); opacity: 0.6; }
  100% { transform: translateY(115vh);                     opacity: 0; }
}

/* 星星：直线下落 + 偶尔"亮一下" */
@keyframes fallStar {
  0%   { transform: translateY(0);       opacity: 0; }
  10%  {                               opacity: 0.95; }
  25%  { transform: translateY(28vh);   opacity: 0.4; }
  40%  {                               opacity: 1; }
  60%  { transform: translateY(65vh);   opacity: 0.4; }
  75%  {                               opacity: 0.9; }
  90%  { transform: translateY(95vh);   opacity: 0.35; }
  100% { transform: translateY(115vh);  opacity: 0; }
}

/* 蝴蝶：大摇摆，优雅慢 */
@keyframes fallButterfly {
  0%   { transform: translateY(0) rotate(0deg);              opacity: 0; }
  10%  {                                                     opacity: 0.85; }
  25%  { transform: translateY(22vh) translateX(70px) rotate(-8deg); }
  50%  { transform: translateY(50vh) translateX(-55px) rotate(10deg); }
  75%  { transform: translateY(82vh) translateX(75px) rotate(-10deg); }
  95%  {                                                     opacity: 0.4; }
  100% { transform: translateY(115vh) translateX(-15px) rotate(5deg); opacity: 0; }
}

/* 泡泡：从下往上（反向） */
@keyframes fallBubble {
  0%   { transform: translateY(120vh);  opacity: 0; }
  10%  {                              opacity: 0.6; }
  35%  { transform: translateY(80vh) translateX(10px); }
  60%  { transform: translateY(50vh) translateX(-8px); }
  85%  { transform: translateY(20vh) translateX(12px);  opacity: 0.4; }
  100% { transform: translateY(-15vh);                  opacity: 0; }
}

/* ========== 页面 ========== */
.page {
  position: relative; z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 18px 48px;
}

.hero { text-align: center; padding: 18px 8px 10px; margin-bottom: 16px; }

.welcome-tag {
  display: inline-block;
  padding: 10px 22px;
  border: 2px dashed #ff7ab0;
  border-radius: 999px;
  color: #e7558c;
  font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.55);
  margin-bottom: 24px;
}

.shop-title {
  font-size: 46px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(90deg, #ff6ab0 0%, #c38bff 50%, #a29bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.small-deco { font-weight: 600; font-size: 38px; margin: 0 2px; }
.shop-subtitle { color: #b35e92; font-size: 15px; font-weight: 500; }

/* 卡片 */
.card {
  position: relative;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 26px;
  padding: 28px 22px 26px;
  margin-bottom: 18px;
  box-shadow: 0 8px 28px rgba(255, 140, 190, 0.14), 0 2px 6px rgba(210, 160, 240, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 240, 250, 0.62));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.about-card::before, .notice-card::before {
  content: "";
  position: absolute; left: 0; top: 26px; bottom: 26px; width: 5px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #ff7ab0, #c38bff);
}

.section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 800; color: #4a2a66;
  margin-bottom: 16px; padding-left: 4px;
}
.title-bar {
  display: inline-block; width: 5px; height: 22px; border-radius: 4px;
  background: linear-gradient(180deg, #ff7ab0, #c38bff);
}

.about-text { font-size: 15px; line-height: 1.85; color: #6a4a76; margin-bottom: 18px; padding-left: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 4px; }
.tag {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #8a56b0;
  background: linear-gradient(90deg, #f4d9ff, #ffd7e6);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.entry-card { text-align: center; padding: 32px 22px 28px; }

.entry-card-featured {
  padding: 44px 26px 34px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(255, 138, 188, 0.55);
  box-shadow: 0 18px 48px rgba(255, 120, 180, 0.26), 0 4px 12px rgba(190, 130, 240, 0.18);
  position: relative; overflow: hidden;
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .entry-card-featured {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 235, 247, 0.88));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.entry-card-featured::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: 28px; padding: 2px;
  background: linear-gradient(135deg, #ff8fc0, #c38bff, #a2b8ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.65;
}
.featured-ribbon {
  position: absolute; top: 14px; right: -38px; transform: rotate(35deg);
  background: linear-gradient(90deg, #ff6ab0, #c377ff);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  padding: 6px 46px; z-index: 2;
}

.icon-circle-lg { width: 110px; height: 110px; margin-bottom: 20px; }
.icon-circle-lg .emoji-icon { font-size: 48px; }
.entry-title-lg {
  font-size: 30px; margin-bottom: 10px;
  background: linear-gradient(90deg, #e74a84, #9a5be6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.code-box-lg { font-size: 18px; padding: 18px 16px; margin-bottom: 24px; border: 1.5px solid #ffc9df; }
.cta-btn-lg {
  max-width: 340px; padding: 18px 20px; font-size: 20px; letter-spacing: 1.5px;
  background: linear-gradient(90deg, #ff589a 0%, #d36bff 50%, #9d77ff 100%);
  box-shadow: 0 14px 32px rgba(210, 90, 200, 0.32), 0 4px 12px rgba(160, 90, 255, 0.22);
}

.entry-card-compact {
  text-align: center; padding: 22px 20px 20px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.78);
}
.icon-circle-md { width: 72px; height: 72px; margin-bottom: 12px; }
.icon-circle-md .emoji-icon { font-size: 32px; }
.entry-card-compact .entry-title { font-size: 22px; margin-bottom: 6px; }
.entry-card-compact .entry-desc { font-size: 13px; margin-bottom: 14px; }
.code-box-sm { font-size: 15px; padding: 12px 12px; margin-bottom: 16px; }
.cta-btn-md {
  width: 100%; max-width: 280px;
  padding: 13px 16px; font-size: 16px; letter-spacing: 1px;
  box-shadow: 0 10px 22px rgba(210, 90, 200, 0.22), 0 3px 8px rgba(160, 90, 255, 0.18);
}

.icon-circle {
  width: 92px; height: 92px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(160, 140, 255, 0.28), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.icon-blue   { background: linear-gradient(135deg, #a5d0ff, #c9a8ff); }
.icon-pink   { background: linear-gradient(135deg, #ffc4da, #ffb5c8); }
.icon-orange { background: linear-gradient(135deg, #ffe1a8, #ffc2a5); }
.emoji-icon { font-size: 40px; }

.entry-title { font-size: 28px; font-weight: 800; color: #4a2a66; margin-bottom: 8px; }
.entry-desc { font-size: 14px; color: #9a7aab; margin-bottom: 22px; letter-spacing: 0.5px; }

.code-box {
  background: #ffffff; color: #e74a84;
  font-size: 17px; font-weight: 700; letter-spacing: 1px;
  padding: 16px 14px; border-radius: 16px; margin-bottom: 22px;
  box-shadow: inset 0 2px 6px rgba(255, 180, 210, 0.22), 0 2px 8px rgba(255, 180, 220, 0.12);
  border: 1px solid #ffe2ee;
}

.cta-btn {
  width: 100%; max-width: 320px;
  padding: 16px 18px; border: none; border-radius: 999px;
  background: linear-gradient(90deg, #ff6fa8 0%, #c377ff 60%, #a77bff 100%);
  color: #fff; font-size: 19px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(210, 90, 200, 0.24), 0 3px 8px rgba(160, 90, 255, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: inherit;
}
.cta-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cta-btn:active { transform: translateY(1px) scale(0.99); }

.notice-list { list-style: none; padding-left: 4px; }
.notice-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; font-size: 15px; line-height: 1.75; color: #6a4a76;
}
.notice-list li + li { border-top: 1px dashed rgba(255, 170, 210, 0.35); }
.heart { color: #ff7ab0; font-size: 16px; margin-top: 2px; flex-shrink: 0; }

.footer {
  text-align: center; color: #a888b5; font-size: 13px;
  padding: 16px 0 6px; letter-spacing: 0.5px;
}

@media (max-width: 360px) {
  .page { padding: 28px 14px 40px; }
  .shop-title { font-size: 38px; }
  .small-deco { font-size: 32px; }
  .entry-title { font-size: 24px; }
  .welcome-tag { font-size: 12px; padding: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fall { animation: none !important; display: none !important; }
}