/* ================= 1. 顶部导航栏暗黑模式 ================= */
html.dark header,
html.dark .sticky {
  background-color: rgba(15, 23, 42, 0.9) !important; /* 深蓝黑半透明背景 */
  border-bottom-color: #1e293b !important;            /* 深色底边框 */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 修复导航栏标题：“小果ID共享站”变纯白 */
html.dark header a span.text-gray-900,
html.dark header a span:first-of-type {
  color: #ffffff !important;
}

/* 修复 Logo 的白色方块底色，避免夜间发白 */
html.dark header a div:first-child {
  background-color: #1e293b !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* ================= 2. 第一组专属：质感暖杏麦黄渐变卡片 ================= */
#tutorialPrompt {
  background: linear-gradient(135deg, #faf7f2 0%, #f3ede4 50%, #eae0d5 100%) !important;
  border-left: 5px solid #bda88e !important;
}

#tutorialPrompt .card-title-text {
  color: #8c7355 !important;
}

html.dark #tutorialPrompt,
body.dark #tutorialPrompt,
.dark #tutorialPrompt {
  background: linear-gradient(135deg, #292524 0%, #44403c 50%, #292524 100%) !important;
  border-left: 5px solid #d6d3d1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

html.dark #tutorialPrompt .card-title-text,
body.dark #tutorialPrompt .card-title-text,
.dark #tutorialPrompt .card-title-text {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark #tutorialPrompt p.text-gray-700,
html.dark #tutorialPrompt p:nth-of-type(2) {
  color: #e7e5e4 !important;
}

/* ================= 3. 第二组专属：海天蓝质感渐变卡片 ================= */
#tutorialPrompt2 {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0e7ff 100%) !important;
  border-left: 5px solid #0284c7 !important;
}

#tutorialPrompt2 .card-title-text {
  color: #0369a1 !important;
}

html.dark #tutorialPrompt2,
body.dark #tutorialPrompt2,
.dark #tutorialPrompt2 {
  background: linear-gradient(135deg, #07192f 0%, #0d325e 50%, #034870 100%) !important;
  border-left: 5px solid #38bdf8 !important;         /* 亮天蓝边条 */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

html.dark #tutorialPrompt2 .card-title-text,
body.dark #tutorialPrompt2 .card-title-text,
.dark #tutorialPrompt2 .card-title-text {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark #tutorialPrompt2 p.text-gray-700,
html.dark #tutorialPrompt2 p:nth-of-type(2) {
  color: #e0f2fe !important;
}

/* ================= 风险提示在夜间模式下的颜色支持 ================= */
html.dark .bg-slate-100 {
  background-color: #0f172a !important;
  border: 1px solid #334155 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

html.dark .bg-slate-100 .text-slate-700 {
  color: #f1f5f9 !important;
}

html.dark .bg-slate-100 .text-slate-600 {
  color: #94a3b8 !important;
}

/* ================= 严禁操作卡片夜间模式（原图1:1像素级取色） ================= */
html.dark .bg-red-50,
body.dark .bg-red-50,
.dark .bg-red-50 {
  background-color: #342432 !important;
  border: 1px solid #8c202e !important;
  box-shadow: none !important;
}

html.dark .bg-red-50 .text-red-600,
body.dark .bg-red-50 .text-red-600,
.dark .bg-red-50 .text-red-600 {
  color: #ef4444 !important;
}

html.dark .bg-red-50 p,
html.dark .bg-red-50 .text-gray-700,
body.dark .bg-red-50 .text-gray-700 {
  color: #f1f5f9 !important;
}



/* 摇摆抖动动画：左右轻晃 + 倾斜摇摆（每隔 2.5 秒晃动一次，自然不刺眼） */
.btn-wobble-shake {
  display: inline-flex !important;
  transform-origin: center center !important;
  animation: wobbleMotion 1.5s infinite ease-in-out !important;
}

@keyframes wobbleMotion {
  0%, 65%, 100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  70% {
    transform: rotate(-6deg) translate3d(-3px, 0, 0);
  }
  75% {
    transform: rotate(5deg) translate3d(3px, 0, 0);
  }
  80% {
    transform: rotate(-4deg) translate3d(-2px, 0, 0);
  }
  85% {
    transform: rotate(3deg) translate3d(2px, 0, 0);
  }
  90% {
    transform: rotate(-1deg) translate3d(-1px, 0, 0);
  }
  95% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}


/* ================= 卡片右上角大数字水印（防溢出修复版） ================= */

/* 第一组卡片：显示数字 1 水印 */
#tutorialPrompt {
  position: relative !important;
  overflow: hidden !important; /* 锁死超出边界的内容 */
}

#tutorialPrompt::before {
  content: '1' !important;
  position: absolute !important;
  top: 4px !important;            /* 改为正数，不再向上冲出卡片 */
  right: 12px !important;          /* 距离右边距 */
  font-size: 72px !important;      /* 适度调小，避免占满右上角 */
  font-weight: 900 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1 !important;
  color: rgba(140, 115, 85, 0.13) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  user-select: none !important;
}

/* 第一组夜间模式水印颜色 */
html.dark #tutorialPrompt::before,
body.dark #tutorialPrompt::before,
.dark #tutorialPrompt::before {
  color: rgba(255, 255, 255, 0.08) !important;
}


/* 第二组卡片：显示数字 2 水印 */
#tutorialPrompt2 {
  position: relative !important;
  overflow: hidden !important; /* 锁死超出边界的内容 */
}

#tutorialPrompt2::before {
  content: '2' !important;
  position: absolute !important;
  top: 4px !important;            /* 改为正数，不再向上冲出卡片 */
  right: 12px !important;          /* 距离右边距 */
  font-size: 72px !important;      /* 适度调小，避免占满右上角 */
  font-weight: 900 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1 !important;
  color: rgba(2, 132, 199, 0.14) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  user-select: none !important;
}

/* 第二组夜间模式水印颜色 */
html.dark #tutorialPrompt2::before,
body.dark #tutorialPrompt2::before,
.dark #tutorialPrompt2::before {
  color: rgba(56, 189, 248, 0.12) !important;
}



/* ================= 商城未启用：纯镂空透明背景水印 ================= */
.btn-sealed-disabled {
  position: relative !important;
  cursor: not-allowed !important;
  overflow: visible !important;
  user-select: none !important;
}

/* 按钮微透蒙版：完全去掉磨砂和白雾，保持底色 100% 通透 */
.btn-sealed-disabled::before {
  display: none !important; /* 彻底移除这层白雾蒙版 */
}

/* 核心：纯透明镂空背景 + 清晰红字红框 */
.btn-sealed-disabled::after {
  content: '封印中🔞' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-16deg) !important;
  
  /* 1. 背景全透明（彻底镂空，露出下方的渐变蓝底） */
  background: transparent !important;
  
  /* 2. 鲜明红色文字（保持清晰） */
  color: #ef4444 !important;
  
  /* 3. 鲜明红色虚线印章框 */
  border: 1.5px dashed #ef4444 !important;
  
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  letter-spacing: 1.5px !important;
  z-index: 20 !important;
  pointer-events: none !important;
  
  /* 4. 去除内部阴影，加一层微弱红色外发光增强印章质感 */
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.4) !important;
}

/* 夜间模式适配：同样纯透明背景，文字与边框微调亮红 */
html.dark .btn-sealed-disabled::after,
body.dark .btn-sealed-disabled::after,
.dark .btn-sealed-disabled::after {
  background: transparent !important;
  color: #f87171 !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 5px rgba(248, 113, 113, 0.4) !important;
}




/* 确保父容器开启溢出隐藏，避免横向滚动条 */
.earth-wrapper {
  overflow: hidden !important;
}

/* ================= 纯 CSS 双向动态云朵 (彻底修复堆叠卡死) ================= */
.sky-cloud {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 12;
  border-radius: 50px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  border: 1px solid rgba(186, 230, 253, 0.8);
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.15);
  will-change: transform, opacity;
}

.sky-cloud::before,
.sky-cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
  border-top: 1px solid rgba(186, 230, 253, 0.8);
}

/* ================= 6朵云参数配置（起点、高度、尺寸、错峰） ================= */

/* 1号云：左向右 | 上方大云 */
.cloud-L1 {
  width: 48px;
  height: 18px;
  top: 12%;
  left: -60px;
  animation: moveLeftToRight 16s linear infinite;
  animation-delay: 0s;
}
.cloud-L1::before { width: 22px; height: 22px; top: -10px; left: 6px; }
.cloud-L1::after  { width: 16px; height: 16px; top: -7px; right: 7px; }

/* 2号云：右向左 | 中上方中云 */
.cloud-R1 {
  width: 40px;
  height: 15px;
  top: 25%;
  right: -60px;
  animation: moveRightToLeft 18s linear infinite;
  animation-delay: -5s;
}
.cloud-R1::before { width: 18px; height: 18px; top: -9px; left: 5px; }
.cloud-R1::after  { width: 13px; height: 13px; top: -6px; right: 6px; }

/* 3号云：左向右 | 偏下中云 */
.cloud-L2 {
  width: 36px;
  height: 14px;
  top: 65%;
  left: -60px;
  animation: moveLeftToRight 22s linear infinite;
  animation-delay: -9s;
}
.cloud-L2::before { width: 16px; height: 16px; top: -8px; left: 5px; }
.cloud-L2::after  { width: 12px; height: 12px; top: -5px; right: 5px; }

/* 4号云：右向左 | 下方小云 */
.cloud-R2 {
  width: 32px;
  height: 12px;
  top: 72%;
  right: -60px;
  animation: moveRightToLeft 14s linear infinite;
  animation-delay: -3s;
}
.cloud-R2::before { width: 14px; height: 14px; top: -7px; left: 4px; }
.cloud-R2::after  { width: 10px; height: 10px; top: -4px; right: 4px; }

/* 5号云：左向右 | 居中小云 */
.cloud-L3 {
  width: 28px;
  height: 11px;
  top: 42%;
  left: -60px;
  animation: moveLeftToRight 13s linear infinite;
  animation-delay: -11s;
}
.cloud-L3::before { width: 12px; height: 12px; top: -6px; left: 4px; }
.cloud-L3::after  { width: 9px; height: 9px; top: -4px; right: 4px; }

/* 6号云：右向左 | 顶部微云 */
.cloud-R3 {
  width: 24px;
  height: 9px;
  top: 8%;
  right: -60px;
  animation: moveRightToLeft 12s linear infinite;
  animation-delay: -8s;
}
.cloud-R3::before { width: 10px; height: 10px; top: -5px; left: 3px; }
.cloud-R3::after  { width: 8px; height: 8px; top: -3px; right: 3px; }

/* ================= 夜间深色模式适配 ================= */
.dark .sky-cloud {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.12);
}
.dark .sky-cloud::before,
.dark .sky-cloud::after {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ================= 强化两端自然消散感的关键帧 ================= */
@keyframes moveLeftToRight {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7);
  }
  20% {
    opacity: 0.9;
    transform: translate3d(calc((100vw + 120px) * 0.2), -2px, 0) scale(1);
  }
  60% {
    opacity: 0.9;
    transform: translate3d(calc((100vw + 120px) * 0.6), 2px, 0) scale(1);
  }
  88% {
    opacity: 0;
    transform: translate3d(calc((100vw + 120px) * 0.88), 0, 0) scale(0.65); /* 提前在屏幕边缘自然消融 */
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 120px), 0, 0) scale(0.5);
  }
}

@keyframes moveRightToLeft {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7);
  }
  20% {
    opacity: 0.9;
    transform: translate3d(calc((-100vw - 120px) * 0.2), 2px, 0) scale(1);
  }
  60% {
    opacity: 0.9;
    transform: translate3d(calc((-100vw - 120px) * 0.6), -2px, 0) scale(1);
  }
  88% {
    opacity: 0;
    transform: translate3d(calc((-100vw - 120px) * 0.88), 0, 0) scale(0.65); /* 提前在屏幕边缘自然消融 */
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-100vw - 120px), 0, 0) scale(0.5);
  }
}