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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* 单页互动，不滚动 */
  background: #FCF5E6;              /* 浅奶油色：比底图边框浅一档，和卡片区分开 */
  touch-action: manipulation;       /* 手机上去掉双击缩放延迟 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

img { -webkit-user-drag: none; }

/* 全局强制继承自定义光标：礼物、按钮、圆点、关闭、图片，任何地方都不出现默认鼠标 */
button, a, [role="button"], .gift-hit, .nav-arrow, .nav-dot, .win-close, img {
  cursor: inherit !important;
}

/* 手机触摸光标：小羊跟随手指移动，只在触摸设备显示 */
#touch-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease, visibility 0.15s ease;
  will-change: transform;
}

#touch-cursor.active {
  opacity: 1;
  visibility: visible;
}

#touch-cursor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* 非触摸设备隐藏手机光标 */
@media (hover: hover) and (pointer: fine) {
  #touch-cursor { display: none !important; }
}

/* ============ 状态一：Loading ============ */

#screen-loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FCF5E6;              /* 深蓝外底 */
  /* 转场用：fade + scale + soft blur */
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
}

#screen-loading.screen-out {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(10px);
  pointer-events: none;
}

/* Loading 舞台：和主页 #stage 完全一致的 1500×2000 等比缩放 */
#loading-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  background: transparent;            /* 舞台透明，亮蓝区交给子元素 */
  will-change: transform;
}

/* Loading 亮蓝卡片背景：大小/位置与主页卡片区完全重合 */
#loading-card-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1380px;
  height: 1840px;
  background: #94DEF4;                /* 亮蓝 */
  border-radius: 24px;                /* 和主页卡片圆角一致 */
  will-change: transform;
}

/* Loading 内容层：与舞台分离，不参与缩放，保证进度条/小羊/数字清晰
 * 位置由 JS 按主页卡片中心精确计算 */
.loading-inner {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-num {
  transition: opacity 0.4s ease;
}

#screen-loading.loading-done .progress-num {
  opacity: 0;                       /* 100% 后只有百分比数字淡出，进度条保留 */
}

/* 小羊 + 进度条轨道（相对定位容器） */
.sheep-track {
  position: relative;
  z-index: 0;
  width: min(80vw, 420px);
}

.sheep {
  position: absolute;
  bottom: 24px;                     /* 骑在进度条上方/前方 */
  left: 0;                          /* left 由 JS 按真实进度 % 驱动 */
  width: clamp(48px, 15vw, 72px);
  animation: sheepBob 1.1s ease-in-out infinite alternate; /* 极轻微上下晃动 */
  will-change: left, transform;
}

@keyframes sheepBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

/* 手绘风进度条：浅蓝主题 */
.progress-track {
  width: 100%;
  height: 16px;
  background: #EAF7FE;
  border: 2px solid #2B363C;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(110, 165, 195, 0.25);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: #A8D9F6;
  /* 淡淡的斜纹肌理，像蜡笔涂色 */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0 8px,
    rgba(255, 255, 255, 0) 8px 16px
  );
  border-radius: 999px;
}

/* 百分比数字：圆润粗体 Fredoka One，参考图红框大小 */
.progress-num {
  margin-top: 16px;
  font-family: "Fredoka One", "Arial Rounded MT Bold", "Comic Sans MS", system-ui, sans-serif;
  font-size: clamp(20px, 5.5vw, 120px);
  font-weight: 400;
  letter-spacing: 1px;
  color: #FFFFFF;
  -webkit-text-stroke: 1.5px #2B363C;

}

/* Loading 顶部文字：Fredoka One 圆润粗体 + 白字 + 深色粗描边 + 实心投影
 * 容器宽度/位置/字号由 JS 按卡片区边界精确计算，严禁溢出亮蓝卡片 */
.loading-top-text {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 0;                                /* JS 会按卡片顶部计算具体位置 */
  transform: translateX(-50%);
  width: 100%;                           /* JS 会覆盖为 (cardWidth - 2*水平内边距) */
  max-width: 100%;
  font-family: "Fredoka One", "Arial Rounded MT Bold", "Comic Sans MS", system-ui, sans-serif;
  font-size: 72px;                       /* JS 会按卡片宽度重新计算，保证单行不溢出 */
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
  -webkit-text-stroke: 2px #2B363C;
  text-shadow: 2px 2px 0 #87BFCE;
}

/* Loading 底部文字：100% 时和蛋糕一起弹出，样式与顶部统一
 * 同样严格限制在卡片区内 */
.loading-bottom-text {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 0;                             /* JS 会按卡片底部计算具体位置 */
  transform: translateX(-50%) scale(0.85);
  width: 100%;                           /* JS 会覆盖为 (cardWidth - 2*水平内边距) */
  max-width: 100%;
  font-family: "Fredoka One", "Arial Rounded MT Bold", "Comic Sans MS", system-ui, sans-serif;
  font-size: 84px;                       /* JS 会按卡片宽度重新计算 */
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
  -webkit-text-stroke: 2px #2B363C;
  text-shadow: 2px 2px 0 #87BFCE;
  opacity: 0;
  visibility: hidden;
  transform-origin: center center;
}

/* 100% 时：HAPPY BIRTHDAY 和蛋糕一起弹出 */
#screen-loading.loading-done .loading-bottom-text {
  animation: hbPop 0.6s cubic-bezier(0.34, 1.4, 0.4, 1) both;
}

@keyframes hbPop {
  0%   { opacity: 0; visibility: visible; transform: translateX(-50%) scale(0.85); }
  55%  { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1.05); }
  100% { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
}

/* 100% 时在进度条右端上方弹出的小蛋糕 */
.cake-pop {
  position: absolute;
  right: -4px;                        /* 进度条最右端 */
  bottom: 24px;                       /* 骑在进度条上方，与小羊同一基线 */
  transform: scale(0.85);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
}

.cake-pop img { width: 62px; display: block; }

.cake-pop.show {
  animation: cakePop 0.6s cubic-bezier(0.34, 1.4, 0.4, 1) both; /* 0.85 → 1.05 → 1 */
}

@keyframes cakePop {
  0%   { opacity: 0; transform: scale(0.85); }
  55%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* 小星星 / 小闪光（CSS 四角星，无需素材） */
.sparkle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #FFD166;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}

.cake-pop.show .sparkle { animation: starPop 0.7s ease both; }

.sparkle.s1 { left: -22px; top: 2px;    animation-delay: 0.12s; background: #FFD166; }
.sparkle.s2 { right: -18px; top: -10px; width: 15px; height: 15px; animation-delay: 0.2s;  background: #FFFFFF; }
.sparkle.s3 { left: -8px;  top: -20px;  width: 9px;  height: 9px;  animation-delay: 0.28s; background: #CDBCF5; }
.sparkle.s4 { right: -28px; top: 26px;  width: 10px; height: 10px; animation-delay: 0.34s; background: #FFD166; }
.sparkle.s5 { left: -30px; top: 34px;   width: 10px; height: 10px; animation-delay: 0.4s;  background: #FFFFFF; }
.sparkle.s6 { right: -6px; top: 48px;   width: 8px;  height: 8px;  animation-delay: 0.46s; background: #B8E6D4; }

@keyframes starPop {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  60%  { opacity: 1; transform: scale(1.2) rotate(20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============ 状态三：主页 ============ */

#screen-home {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97);
  filter: blur(10px);
  pointer-events: none;
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
}

#screen-home.screen-in {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
}

/* 1500×2000 舞台：JS 计算 scale，永远等比、居中、不裁切 */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  will-change: transform;
}

.stage-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 礼物卡片：底图 + 居中放上去的底盘礼物（九张叠放，一次显示一张） */
.gift-tile {
  position: absolute;               /* left/top/width 由 config 注入 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gift-tile.active {
  opacity: 1;
  pointer-events: auto;
}

.gift-tile.exit-left  { transform: translateX(-70px); }
.gift-tile.exit-right { transform: translateX(70px); }
.gift-tile.no-trans   { transition: none !important; }

.tile-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* 左右切换按钮：橙色实心圆点，叠在卡片两侧 */
.nav-arrow {
  position: absolute;
  top: 960px;                       /* 卡片垂直中线（2000/2=1000），按钮高 80，居中 */
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background: #FC8F32;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, filter 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.nav-arrow:hover { transform: scale(1.08); filter: brightness(1.08); }
.nav-arrow:active { transform: scale(0.94); }

.nav-prev { left: 100px; }        /* 在卡片内部左侧，距卡片边缘约 40px */
.nav-next { right: 100px; }       /* 在卡片内部右侧 */

/* 底部小圆点：颜色与卡片一一对应 */
.nav-dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 1930px;                      /* 卡片放大后，圆点放在卡片底部下方 */
  display: flex;
  justify-content: center;
  gap: 22px;
}

.nav-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-dot.on {
  opacity: 1;
  transform: scale(1.3);
}

/* 礼物：外层做轻微浮动，内层做 hover 放大（避免 transform 冲突） */
.gift-float {
  position: absolute;               /* left/top/width 由 config 按卡片百分比注入 */
  animation: giftFloat 3.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes giftFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }   /* 非常轻的上下浮动 */
}

.gift-hit {
  padding: 36px;                    /* 点击区域比礼物稍大 */
  margin: -36px;                    /* 但视觉上完全透明，看不到按钮框 */
  cursor: pointer;
}

.gift-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gift-hit:hover .gift-img { transform: scale(1.045); }  /* 轻微放大 1.03–1.05 */
.gift-hit:active .gift-img { transform: scale(0.98); }  /* 手机点按反馈 */

/* ============ 状态四：卡牌弹窗 ============ */

#card-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
}

.card-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(252, 246, 232, 0.55);     /* 奶油色轻纱：后面仍是主页的底图背景 */
  backdrop-filter: blur(6px);                /* 非常轻微的 blur */
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
}

/* 卡片界面：电脑小窗口造型，窗口包裹卡牌（无留白、不压缩变形） */
.card-frame {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(90, 50, 70, 0.35);
  display: inline-flex;
  flex-direction: column;
}

/* 窗口标题栏：颜色由 JS 按当前卡牌设置（config.gifts[].title） */
.card-titlebar {
  flex: 0 0 26px;
  background: #B4DCF2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  transition: background 0.3s ease;
}

.win-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 三个窗口按钮：— □ ×（手绘圆角小方块） */
.win-btn {
  position: relative;
  width: 34px;
  height: 30px;
  border: none;
  background: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* — 最小化（装饰） */
.win-min::after {
  content: "";
  width: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: #4A5A66;
}

/* □ 最大化（装饰） */
.win-max::after {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid #4A5A66;
  border-radius: 2.5px;
}

/* × 关闭（真正可点） */
.win-close { cursor: pointer; }

.win-close::before,
.win-close::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 2.5px;
  border-radius: 2px;
  background: #4A5A66;
}

.win-close::before { transform: rotate(45deg); }
.win-close::after  { transform: rotate(-45deg); }

.win-btn:hover { background: rgba(255, 255, 255, 0.55); }
.win-close:hover { background: #FF9EBB; }
.win-close:hover::before,
.win-close:hover::after { background: #FFFFFF; }

/* 窗口内容区：卡牌原比例完整显示，无留白、不压缩 */
.card-body {
  background: #FFFFFF;
  line-height: 0;                             /* 去掉图片下方基线缝隙 */
}

.card-body img {
  display: block;
  max-width: 86vw;                            /* 宽度优先适配屏幕 */
  max-height: calc(84vh - 46px);              /* 高则自动等比缩小（扣掉标题栏） */
  width: auto;
  height: auto;
}

/* 打开：opacity 0→1，scale 0.88→1，轻微上移，柔和 cubic-bezier */
#card-modal.open .card-backdrop { animation: backdropIn 0.45s ease both; }
#card-modal.open .card-frame {
  animation: cardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 关闭：打开动画的反向 */
#card-modal.closing .card-backdrop { animation: backdropOut 0.38s ease both; }
#card-modal.closing .card-frame {
  animation: cardOut 0.38s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}

@keyframes backdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes cardIn {
  from { opacity: 0; transform: scale(0.88) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(14px); }
}

body.modal-open { overflow: hidden; }

/* ============ 背景音乐开关（手绘小喇叭） ============ */
.music-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid #94DEF4;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 2px 3px 0 rgba(43, 54, 60, 0.28);
  display: none;                 /* 有音乐文件才由 JS 显示 */
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 500;
  transition: transform 0.18s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.music-btn.show { display: flex; }
.music-btn:hover  { transform: scale(1.08); }
.music-btn:active { transform: scale(0.92); }

.mb-icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #94DEF4;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mb-speaker { fill: #94DEF4; stroke-width: 2.2; }
.mb-wave { opacity: 0; transition: opacity 0.2s ease; }
.mb-slash { stroke: #E8534E; stroke-width: 3.6; opacity: 0; transition: opacity 0.2s ease; }

.music-btn.is-playing .mb-wave { opacity: 1; }
.music-btn.is-playing .mb-w1 { animation: mbPulse 1.5s ease-in-out infinite; }
.music-btn.is-playing .mb-w2 { animation: mbPulse 1.5s ease-in-out 0.25s infinite; }
.music-btn.is-muted .mb-slash { opacity: 1; }

@keyframes mbPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ============ Loading 阶段的音乐轻提示 ============ */
.bgm-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: none;                       /* 由 JS 决定是否显示 */
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid #2B363C;
  color: #2B363C;
  font-family: "Fredoka One", -apple-system, "Microsoft YaHei", sans-serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  z-index: 30;
  animation: hintPulse 1.9s ease-in-out infinite;
}
.bgm-hint.show { display: flex; }
.bgm-hint:active { transform: translateX(-50%) scale(0.95); }

@keyframes hintPulse {
  0%, 100% { opacity: 0.72; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.045); }
}

/* 进度条跑完、HAPPY BIRTHDAY 弹出时，提示自动让位，避免和底部文字重叠 */
#screen-loading.loading-done .bgm-hint { display: none !important; }