/* ========================
   1. 下载按钮样式（带 !important 保证生效）
======================== */
body {
  font-family: Arial, sans-serif !important;
  padding: 20px !important;
  /* 给固定在底部的页脚预留空间，防止内容被遮挡 */
  padding-bottom: 60px !important;
}

.download-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  list-style-type: none !important;
  padding: 0 !important;
}

.download-item {
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  transition: transform 0.3s ease !important;
}

.download-item:hover {
  transform: scale(1.05) !important;
}

.download-item a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: bold !important;
  display: block !important;
  margin: 0 !important;
  font-size: 10px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  -webkit-font-smoothing: antialiased !important;
}

.download-item a:hover {
  opacity: 0.92 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.btn1 { background: linear-gradient(135deg, #409eff, #337ecc) !important; }
.btn2 { background: linear-gradient(135deg, #52c41a, #389e0d) !important; }
.btn3 { background: linear-gradient(135deg, #13c2c2, #0aa699) !important; }
.btn4 { background: linear-gradient(135deg, #faad14, #d48806) !important; color: #212529 !important; }
.btn5 { background: linear-gradient(135deg, #ff4d4f, #d9363e) !important; }
.btn6 { background: linear-gradient(135deg, #722ed1, #5c279e) !important; }
.btn7 { background: linear-gradient(135deg, #1890ff, #096dd9) !important; }
.btn8 { background: linear-gradient(135deg, #fa8c16, #e56909) !important; }
.btn9 { background: linear-gradient(135deg, #787878, #5f5f5f) !important; }
.btn10 { background: linear-gradient(135deg, #9254de, #7a42c6) !important; }
.btn11 { background: linear-gradient(135deg, #36cbcb, #29b4b4) !important; }
.btn12 { background: linear-gradient(135deg, #00a854, #008742) !important; }
.btn13 { background: linear-gradient(135deg, #f5222d, #c41926) !important; }
.btn14 { background: linear-gradient(135deg, #482880, #381e66) !important; }
.btn15 { background: linear-gradient(135deg, #0086ad, #006a8f) !important; }
.btn16 { background: linear-gradient(135deg, #ff7a45, #e86532) !important; }
.btn17 { background: linear-gradient(135deg, #b71dd8, #9a16b6) !important; }
.btn18 { background: linear-gradient(135deg, #00c4ff, #00a8e0) !important; }
.btn19 { background: linear-gradient(135deg, #c87f32, #a66926) !important; }
.btn20 { background: linear-gradient(135deg, #380f32, #166f26) !important; }
.btn21 { background: linear-gradient(135deg, #2a1f32, #a60f16) !important; }
@media (max-width: 768px) {
  .download-list { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .download-item a { font-size: 9px !important; padding: 3px 5px !important; }
}
@media (max-width: 480px) {
  .download-list { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .download-item a { font-size: 8px !important; padding: 2px 4px !important; }
}

/* ========================
   2. 海底弹窗公告（完全隔离）
======================== */
.seabed-notice {
  all: initial;
  display: block;
  position: static;
}
.seabed-notice * {
  all: unset;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.seabed-notice .modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  z-index: 9999;
}
.seabed-notice .card {
  position: relative;
  width: 280px;
  height: 260px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #b2ebf2 0%, #81d4fa 100%);
}
@keyframes coralSway {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
.seabed-notice .stone-bg {
  position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%);
  font-size: 200px; opacity: 0.07; z-index: 0;
}
.seabed-notice .coral-far1 { position: absolute; bottom: -95px; left: -20px; font-size: 160px; opacity: 0.09; z-index: 1; animation: coralSway 12s ease-in-out infinite alternate; }
.seabed-notice .coral-far2 { position: absolute; bottom: -95px; right: -30px; font-size: 140px; opacity: 0.08; z-index: 1; animation: coralSway 13s ease-in-out infinite alternate; }
.seabed-notice .coral-far3 { position: absolute; bottom: -85px; left: 100px; font-size: 120px; opacity: 0.1; z-index: 1; animation: coralSway 11s ease-in-out infinite alternate; }
.seabed-notice .coral-far4 { position: absolute; bottom: -80px; right: 80px; font-size: 95px; opacity: 0.1; z-index: 1; animation: coralSway 14s ease-in-out infinite alternate; }
.seabed-notice .coral-far5 { position: absolute; bottom: -70px; left: 180px; font-size: 85px; opacity: 0.11; z-index: 1; animation: coralSway 10s ease-in-out infinite alternate; }
.seabed-notice .coral-far6 { position: absolute; bottom: -100px; left: 60px; font-size: 130px; opacity: 0.08; z-index: 1; animation: coralSway 15s ease-in-out infinite alternate; }
.seabed-notice .coral-far7 { position: absolute; bottom: -88px; right: 120px; font-size: 105px; opacity: 0.09; z-index: 1; animation: coralSway 12.5s ease-in-out infinite alternate; }
.seabed-notice .coral-far8 { position: absolute; bottom: -78px; left: 140px; font-size: 90px; opacity: 0.1; z-index: 1; animation: coralSway 11.5s ease-in-out infinite alternate; }
.seabed-notice .coral-mid1 { position: absolute; bottom: -50px; left: 40px; font-size: 65px; opacity: 0.25; z-index: 2; animation: coralSway 9s ease-in-out infinite alternate; }
.seabed-notice .coral-mid2 { position: absolute; bottom: -50px; right: 50px; font-size: 50px; opacity: 0.23; z-index: 2; animation: coralSway 8.5s ease-in-out infinite alternate; }
.seabed-notice .coral-mid3 { position: absolute; bottom: -40px; left: 150px; font-size: 48px; opacity: 0.26; z-index: 2; animation: coralSway 9.5s ease-in-out infinite alternate; }
.seabed-notice .coral1 { position: absolute; bottom: -35px; left: 15px; font-size: 52px; opacity: 0.5; z-index: 3; animation: coralSway 7s ease-in-out infinite alternate; }
.seabed-notice .coral2 { position: absolute; bottom: -35px; right: 15px; font-size: 40px; opacity: 0.5; z-index: 3; animation: coralSway 7.5s ease-in-out infinite alternate; }
.seabed-notice .coral3 { position: absolute; bottom: -25px; left: 80px; font-size: 42px; opacity: 0.55; z-index: 4; animation: coralSway 6.5s ease-in-out infinite alternate; }
.seabed-notice .coral4 { position: absolute; bottom: -25px; right: 80px; font-size: 36px; opacity: 0.55; z-index: 4; animation: coralSway 6s ease-in-out infinite alternate; }
.seabed-notice .coral5 { position: absolute; bottom: -15px; left: 45%; transform: translateX(-50%); font-size: 34px; opacity: 0.6; z-index: 5; animation: coralSway 5s ease-in-out infinite alternate; }
.seabed-notice .coral6 { position: absolute; bottom: -22px; left: 180px; font-size: 33px; opacity: 0.57; z-index: 4; animation: coralSway 5.5s ease-in-out infinite alternate; }
.seabed-notice .seabed { position: absolute; inset: 0; z-index: 10; }
.seabed-notice .countdown { position: absolute; top: 12px; right: 12px; font-size: 18px; color: #0277bd; font-weight: 700; z-index: 20; }
.seabed-notice .title { position: absolute; top: 10%; width: 100%; text-align: center; color: #01579b; font-size: 22px; font-weight: 600; z-index: 20; }
.seabed-notice .text { position: absolute; top: 28%; width: 100%; padding: 0 20px; text-align: center; color: #0277bd; font-size: 16px; line-height: 1.5; z-index: 20; }
.seabed-notice .fish { position: absolute; font-size: 20px; z-index: 30; }
.seabed-notice .bubble { background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; position: absolute; z-index: 1; }
.seabed-notice .close-btn {
  all: unset;
  position: absolute !important; left: 50% !important; bottom: 20px !important; transform: translateX(-50%) !important;
  width: 120px !important; height: 40px !important; padding: 0 !important; border: none !important; border-radius: 20px !important;
  background: #4fc3f7 !important; color: #01579b !important; font-size: 16px !important; font-weight: 500 !important;
  text-align: center !important; line-height: 40px !important; cursor: pointer !important;
  appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; z-index: 20 !important;
}
.seabed-notice .close-btn:hover { background: #3db8e8 !important; }
@keyframes wiggle { 0% { transform: rotate(-3deg); } 100% { transform: rotate(3deg); } }
@keyframes swim { 0% { right: -40px; } 100% { right: 320px; } }
@keyframes bubbleAnim { 0% { transform: scale(1); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(0, -260px) scale(1.5); opacity: 0; } }

/* ========================
   3. 底部页脚样式（恢复滚动显示）
======================== */
.footer {
  position: fixed;
  bottom: -100px; /* 初始隐藏在屏幕外 */
  left: 0;
  width: 100%;
  background-color: #274852;
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  transition: bottom 0.3s ease-in-out; /* 平滑动画 */
  z-index: 999; /* 降低层级，避免覆盖按钮 */
  box-sizing: border-box;
}

.footer.show {
  bottom: 0; /* 滚动到底部时显示 */
}

.footer .text-center {
  color: #ffffff;
}
.footer .text-center a {
  color: #72c02c; /* 保持你想要的绿色 */
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}