/* =========================
   完整优化版 CSS（严格版）
   ========================= */

/* 全局 box-sizing 与基础 */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
  color: #fff;
}

/* ========= 外层容器 ========= */
#mobile-wrapper {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: #000;
  color: #fff;
  padding: 10px 16px calc(120px + env(safe-area-inset-bottom, 0px)) 16px;
  border: 1.5px solid transparent;
  border-image: linear-gradient(135deg, #66ccff, #3399ff) 1;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

/* =========================
   滚动通知
   ========================= */
#notice {
  background: #222;
  color: gold;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  margin: 15px 0 10px;
  border-radius: 6px;
}
#notice span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 15s linear infinite;
}
@keyframes scroll { 0%{transform:translateX(0)}100%{transform:translateX(-100%)} }

/* =========================
   banner 文本
   ========================= */
.banner-text {
  font-weight: bold;
  font-size: 16px;
  background: linear-gradient(90deg,#FFD700,#FFA500,#FFD700);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-align:center;
  padding:10px 0;
  letter-spacing:2px;
}

/* =========================
   顶部栏目
   ========================= */
#top-menu{
  display:flex;
  justify-content:space-around;
  background:#111;
  border-top:2px solid gold;
  border-bottom:2px solid gold;
  border-radius:6px;
}
#top-menu div{ padding:10px 0; font-weight:bold; text-align:center; cursor:pointer;}
#top-menu div:hover{ color:gold; }

/* =========================
   轮播容器 & 图片自适应 + 呼吸动画
   ========================= */
#carousel-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/4; /* 高宽比，可按需求调整 */
  margin: 15px 0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(255,215,0,0.3);
  background: linear-gradient(135deg,#111,#333);
}

/* 轮播项：非当前隐藏 */
.carousel-item {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 当前轮播项显示 */
.carousel-item.active {
  display: block;
  z-index: 2;
}

/* 轮播图片自适应 + 呼吸动画 */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  animation: breathe 3s ease-in-out infinite;
}

/* 呼吸动画关键帧 */
@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* =========================
   公共布局
   ========================= */
.section-container{
  margin:15px 0;
  border-left:2px solid rgba(0,153,255,0.3);
  border-right:2px solid rgba(0,153,255,0.3);
  padding:0 8px;
}
.section-title{
  font-size:18px;
  font-weight:bold;
  margin-bottom:10px;
  text-align:left;
}

/* 基本 item 布局 */
.section{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.section .item{
  flex:0 0 calc(33.333% - 12px);
  box-sizing:border-box;
  text-align:center;
  min-width:0;
}

/* 小图标 */
.item img{
  width:65px;
  height:65px;
  border-radius:10px;
  border:2px solid gold;
  display:block;
  margin:0 auto;
  object-fit:cover;
  transform: scale(1.1); /* 放大 110% */
}

/* =========================
   精品推荐（文字按钮）
   ========================= */
#recommend .section{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  width:100%;
  padding:0;
}
#recommend .item{ width:100%; min-width:0; }

#recommend .item .desc{
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 100%;
  padding: 2px 8px; /* PC端padding */
  border-radius: 12px;
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.25);
  font-size: 12px;
  font-weight: 700;
  color: #FFD700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  text-shadow: none;
  margin: 6px auto; /* 修改这里，和捞金专区PC端一致 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 精品推荐标题 */
#recommend .section-title{
  width:100%;
  text-align:left;
  background:linear-gradient(90deg,#FFD700,#FFC300,#FFA500);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
#recommend .section-title .icon{
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:#FFD700;
  vertical-align:middle;
}

/* =========================
   捞金专区（图标+文字按钮）
   ========================= */
#games .section{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
#games .section .item{
  width:calc(33.333% - 12px);
  position:relative;
  box-sizing:border-box;
  text-align:center;
}

/* 图标和文字按钮整体可点击 */
#games .section .item a{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-decoration:none;
}

/* 大背景 */
#games .section .item .bg-wrap{
  width:110px;
  height:110px;
  margin:0 auto;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#5a3e2b,#a17444);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 15px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.2);
  transition:transform .25s ease;
}
#games .section .item .bg-wrap:hover{ transform:scale(1.05); }

/* 图标 */
#games .section .item .bg-wrap img{
  width:75%;
  height:75%;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
  cursor:pointer;
  transform: scale(1.1);  /* 图片放大 110% */
}

/* 文字按钮（放大背景下方） */
#games .section .item .desc{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:2px 8px;
  border-radius:12px;
  background: rgba(255,215,0,0.12);
  border:1px solid rgba(255,215,0,0.25);
  font-size:12px;
  font-weight:bold;
  color:#FFD700;
  margin-top:6px;
  width:auto;
  max-width:100%;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* 捞金标题 */
#games .section-title{
  width:100%;
  text-align:left;
  background:linear-gradient(90deg,#FFD700,#FFC300,#FFA500);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
#games .section-title .icon{
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:#FFD700;
}

/* =========================
   弹窗
   ========================= */
.popup{
  background:linear-gradient(135deg,#444444,#777755);
  color:#fff;
  width: 84vw;
  max-width: 420px;
  min-width: 220px;
  padding: 16px;
  padding-top: 36px;
  border-radius:12px;
  box-sizing:border-box;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  text-align:center;
  z-index:9999;
  display:none;
  max-height: calc(80vh - 40px);
  overflow: auto;
  animation: fadeInScale .28s ease-out;
}
.popup.show,
.popup.active { display: block; }
@keyframes fadeInScale { 0% { opacity: 0; transform: translate(-50%, -48%) scale(.98); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.popup .close-btn{
  position:absolute; top:8px; right:8px; font-size:20px;
  cursor:pointer; color:#fff; z-index:20;
  background: rgba(0,0,0,0.25); padding:4px 8px; border-radius:8px;
}
.popup img{ max-width:100px; margin-bottom:10px; border-radius:8px; object-fit:cover; }
.popup p{ margin:8px 0; line-height:1.4; color:#fff; }
.popup .watch-btn{
  background: linear-gradient(90deg,#FFD700,#FFC300);
  color: #000; border: none; border-radius: 8px;
  padding: 8px 12px; font-weight: bold; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.popup .watch-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.32); }

/* =========================
   底飘
   ========================= */
.bottom-banner{
  position:fixed; bottom:10px; left:50%; transform:translateX(-50%);
  width:90%; max-width:480px;
  background:linear-gradient(135deg,#444444,#777755);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 56px 12px 20px;
  border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.5);
  color:#fff; font-weight:bold; z-index:9998; animation: slideUp .6s ease-out;
  font-size:14px;
}
.bottom-banner img{ width:48px; height:48px; border-radius:12px; border:1px solid gold; transform: scale(1.05);}
.bottom-banner .info{ flex:1; margin:0 15px; font-size:14px; }
.bottom-banner .info .title{ font-size:15px; }
.bottom-banner .info .desc{ font-size:13px; line-height:1.3; }
.bottom-banner button{
  background:linear-gradient(90deg,#FFD700,#FFC300);
  color:#000; padding:6px 12px; border:none; border-radius:15px; cursor:pointer; font-weight:bold; box-shadow:0 4px 10px rgba(0,0,0,0.25);
}
.bottom-banner button:hover{ transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.32); }
.bottom-banner .close-btn{ position:absolute; top:8px; right:8px; font-size:20px; cursor:pointer; color:#fff; z-index:20; background: rgba(0,0,0,0.18); padding:3px 8px; border-radius:8px; }
@keyframes slideUp{ from{ transform: translate(-50%,100%);} to{ transform: translate(-50%,0);} }

/* ======================
   手机端覆盖（<=480px）
   ====================== */
@media (max-width:480px){
  body,html{ background:#000; }
  #mobile-wrapper{
    padding-left: calc(clamp(8px,4vw,24px) + env(safe-area-inset-left,0px));
    padding-right: calc(clamp(8px,4vw,24px) + env(safe-area-inset-right,0px));
    padding-bottom: calc(120px + env(safe-area-inset-bottom,0px));
  }
  #recommend .section{ grid-template-columns: repeat(5, minmax(0,1fr)); gap:2.5vw; }
  #recommend .item img{ width:100%; aspect-ratio:1/1; display:block; object-fit:cover; margin:0 auto; transform: scale(1.1); /* 手机端放大 110% */}
  /* 精品推荐文字按钮固定 padding + 和捞金专区一样的 margin-top */
  #recommend .item .desc{
    font-size: clamp(8px, 2.5vw, 12px);
    padding: 2px 8px;
    margin-top: 2vw;
  }
  #games .section .item .bg-wrap{ width: 26vw; height: 26vw; }
  #games .section .item .bg-wrap img{ width: 78%; height: 78%; top: 18%;  transform: scale(1.1); /* 放大 110% */
  }
  /* 捞金专区文字按钮固定 padding */
  #games .section .item .desc{
    font-size: clamp(8px, 2.5vw, 12px);
    padding: 2px 8px;
    margin-top: 2vw;
  }
  .bottom-banner{ bottom:3vw; width:95%; padding:2.5vw 22vw 2.5vw 4vw; font-size:3.5vw; }
  .bottom-banner img{ width:12vw; height:12vw; transform: scale(1.05);}
  .bottom-banner .info .title{ font-size:4vw; }
  .bottom-banner .info .desc{ font-size:3vw; }
  .bottom-banner button{ font-size:3.5vw; padding:1.5vw 3vw; }
  .popup{ width: 92vw; max-width: 420px; max-height: calc(84vh - env(safe-area-inset-bottom, 0px)); }
}