/* ============================================================
   全站响应式样式（2026-09-29 新增，同日修正游戏卡片信息条）
   说明：本文件在每个页面 <head> 中最后加载；所有规则都写在
   max-width 媒体查询里——桌面端（>1220px）完全不受影响。
   断点：≤1220px 容器留边 / ≤1024px 平板 / ≤768px 手机 / ≤480px 小屏
   原则：只改布局尺寸与排列方式，不改任何卡片头像、
   背景图路径（背景图都是 HTML 里的内联 background-image，
   本文件一律不碰 background-image 相关属性）。
   ============================================================ */

/* ---------- ≤1220px：解除 body 1200px 最小宽，容器两侧留边 ---------- */
@media (max-width: 1220px) {
  body { min-width: 100% !important; }
  .wrapper { min-width: 100% !important; }
  .max-width { padding-left: 16px; padding-right: 16px; }

  /* 首页新闻卡片：左图固定 720px 改为按比例 */
  .nm_left { width: 58% !important; }
  .nm_right { width: auto !important; flex: 1 1 auto !important; }

  /* 首页热门游戏卡片 380px 固定宽 → 三列等分 */
  .newgames_and_newoutfit .new_hotgames li { width: calc(33.333% - 14px) !important; height: auto !important; }
  .newgames_and_newoutfit .new_hotgames li .hg_img img { height: auto !important; aspect-ratio: 400 / 250 !important; }

  /* 游戏大厅：3 列 384px 固定宽 → 三列等分
     注意：.new-games 是 #app(flex 纵向容器) 的直接子元素且带 margin:auto，
     交叉轴 auto margin 会让它按内容收缩；轨道改成 1fr 后内容宽会塌缩，
     必须显式给 100% 宽（桌面端轨道为固定像素，不受此规则影响） */
  .new-games { width: 100% !important; }
  .new-games { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .new-games .new-games_item { width: 100% !important; }

  /* 新闻列表盒随屏留边 */
  .news-list-box { margin-left: 16px; margin-right: 16px; }
}

/* ---------- ≤1024px：导航收紧，双栏区块开始堆叠 ---------- */
@media (max-width: 1024px) {
  /* 顶部导航：间距 60px → 28px，菜单项宽度自适应内容 */
  .new_header .nh_right ul { gap: 28px !important; }
  .new_header ul li { width: auto !important; }
  .new_header ul li a { font-size: 16px !important; padding: 0 2px !important; }

  /* 首页新闻卡片上下堆叠
     新闻大图按原图 768×436 比例整幅显示，不再用固定高度裁切（用户反馈：图片只能看见一半） */
  .nm_card { height: auto !important; flex-direction: column !important; }
  .nm_left { width: 100% !important; height: auto !important; }
  .nm_left .nm_figure { height: auto !important; }
  .nm_left .nm_figure img { width: 100% !important; height: auto !important; aspect-ratio: 768 / 436 !important; object-fit: cover !important; display: block !important; }
  .nm_right { width: 100% !important; flex: none !important; }
  .nm_list li a { height: auto !important; padding: 10px 0 !important; }

  /* 首页热门游戏两列 */
  .newgames_and_newoutfit .new_hotgames li { width: calc(50% - 10px) !important; }

  /* 游戏大厅两列；分类按钮允许换行 */
  .new-games { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .game-cat { flex-wrap: wrap !important; justify-content: flex-start !important; }

  /* 各页 banner 高度与字号收紧 */
  .custom-banner { height: 240px !important; }
  .custom-news-banner { height: 240px !important; }
  .custom-news-banner .news-title { font-size: 36px !important; }
  .custom-news-banner .news-subtitle { font-size: 20px !important; }
  .nn-banner { height: 150px !important; }

  /* 页脚链接条 900px 固定宽 → 撑满容器 */
  .footer ul { width: 100% !important; }
}

/* ---------- ≤768px：手机版布局 ---------- */
@media (max-width: 768px) {
  /* 顶栏压缩为 60px，logo 与五项导航同行排布 */
  .new_header { height: 60px !important; }
  .new_header .logo { width: 110px !important; }
  .new_header .max-width { padding-left: 12px !important; }
  .new_header .nh_right ul { gap: 20px !important; }
  .new_header ul li a { font-size: 15px !important; }

  /* 首页 banner：手机端不再上移到半透明顶栏下面，避免导航遮住背景顶部
     （桌面端 >1220px 保持原设计 -88px 遮罩式叠放，不受本规则影响） */
  .index_banner { margin-top: 0 !important; }
  .index_banner .swiper::after { height: 0 !important; }
  .index_banner .swiper-pagination-bullet { width: 40px !important; }

  /* 首页：区块标题与新闻卡片压缩
     新闻动态与大背景之间间距 35px（用户指定） */
  .nm_section { margin-top: 35px !important; margin-bottom: 36px !important; }
  .nm_title { font-size: 20px !important; }
  .nn_title .nr { font-size: 20px !important; }
  .nm_card { box-shadow: 0 2px 10px rgba(0, 0, 0, .15) !important; }
  .nm_right { padding: 12px 14px !important; }
  .nm_tabs { gap: 16px !important; }
  .nm_tag { left: 12px !important; bottom: 46px !important; }
  .nm_caption { left: 12px !important; right: 12px !important; bottom: 22px !important; font-size: 14px !important; }
  .nm_dots { left: 12px !important; bottom: 8px !important; }
  .nm_list li a { padding: 8px 0 !important; }

  /* 首页热门游戏：单列卡片 */
  .newgames_and_newoutfit { margin-bottom: 36px !important; }
  .newgames_and_newoutfit .new_hotgames li { width: 100% !important; }
  .newgames_and_newoutfit .new_hotgames li .hg_img img { height: auto !important; aspect-ratio: 400 / 250 !important; }
  /* 轮播卡片宽度跟随屏幕，关闭两侧虚化遮罩 */
  .newgames_and_newoutfit .hg_slide { width: calc(100vw - 88px) !important; }
  .newgames_and_newoutfit .hg_swiper .swiper {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* 热门游戏 banner 按原图 400×250 比例整幅显示，不再固定高度裁切（用户反馈：有一部分看不到） */
  .newgames_and_newoutfit .hg_card .hg_img img { height: auto !important; aspect-ratio: 400 / 250 !important; }
  .newgames_and_newoutfit .hg_card .hg_avatar { width: 44px !important; height: 44px !important; }
  .newgames_and_newoutfit .hg_slide:not(.swiper-slide-active) { transform: scale(.92) !important; opacity: .55 !important; }
  /* 轮播左右按钮改横排，节省纵向空间 */
  .newgames_and_newoutfit .new_bt .hg_bt_right { flex-direction: row !important; align-items: center !important; gap: 8px !important; }

  /* 游戏大厅：单列卡片
     注意：生效布局是"底部通栏黑色信息条"（index.css 的 width:100%/height:90px !important），
     信息条必须保持铺满整卡宽度，下载按钮（绝对定位在信息条内 right:10px）才能贴卡片右缘 */
  .new-games {
    grid-template-columns: 1fr !important;
    padding-top: 30px !important;
    margin-bottom: 80px !important;
  }
  .new-games .new-games_item { height: 250px !important; }
  .new-games .new-games_item .games_text { width: 100% !important; max-width: none !important; height: 68px !important; padding: 0 12px !important; }
  .new-games .new-games_item .games_text .game_icon { width: 44px !important; height: 44px !important; border-radius: 10px !important; overflow: hidden !important; }
  /* 图标按容器 44×44 方形裁切显示，修复原始 60px 高 + fill 造成的纵向拉伸（用户反馈：像圆角又被拉伸） */
  .new-games .new-games_item .games_text .game_icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; display: block !important; }
  .new-games .new-games_item .games_text .name { font-size: 15px !important; line-height: 1.2 !important; margin: 0 !important; }
  .new-games .new-games_item .games_text .intro { font-size: 11px !important; margin-top: 2px !important; }
  .game-cat { margin-top: 24px !important; gap: 10px !important; margin-bottom: 18px !important; justify-content: center !important; }
  .game-cat .cat-btn { padding: 6px 14px !important; font-size: 13px !important; }
  .custom-banner { height: 190px !important; }
  /* 游戏大厅 banner 标题：解除不换行约束，避免固定宽撑出横向滚动 */
  .custom-banner .banner-title { font-size: 26px !important; white-space: normal !important; letter-spacing: 2px !important; }
  .custom-banner .banner-subtitle { font-size: 14px !important; white-space: normal !important; }
  .custom-banner .website_p { right: 12px !important; bottom: 12px !important; }

  /* 新闻页 */
  .custom-news-banner { height: 190px !important; }
  .custom-news-banner .news-title { font-size: 26px !important; letter-spacing: 4px !important; }
  .custom-news-banner .news-subtitle { font-size: 14px !important; }
  .news-list-box { padding: 14px !important; margin: 14px 12px !important; }
  .news-tabs { flex-wrap: wrap !important; gap: 8px !important; }
  .news-tabs .tab { padding: 6px 14px !important; }
  .news-list li { padding: 12px 4px !important; }
  .news-list .tag { margin-right: 8px !important; }
  .news-list a { font-size: 14px !important; }

  /* 礼包页 */
  .nn-banner { height: 130px !important; }
  .nn-banner .nn_title { font-size: 22px !important; width: auto !important; }
  .nn-banner .website_p { bottom: 12px !important; right: 12px !important; }
  .nn-banner.gift-banner .banner-title { font-size: 28px !important; }
  .nn-banner.gift-banner .banner-subtitle { font-size: 14px !important; }
  .new-gift { padding-top: 24px !important; padding-bottom: 30px !important; }
  .new-gift .gift_content { padding: 16px !important; }
  .new-gift .gift_content .title { font-size: 18px !important; padding-left: 10px !important; margin-bottom: 14px !important; }
  .new-gift .gift_content .ngg_1 { flex-direction: column !important; align-items: flex-start !important; }
  .gq-bar { flex-direction: column !important; }
  .gq-btn { width: 100% !important; }
  .gq-result { padding: 14px !important; min-height: 160px !important; }

  /* 页脚：纵向居中排列 */
  .footer { padding: 16px 12px !important; }
  .footer ul { width: 100% !important; flex-direction: column !important; }
  .footer .logo { border-right: none !important; padding: 0 !important; height: auto !important; justify-content: center !important; }
  .footer-info { margin-left: 0 !important; }
  .footer-info p { text-align: center !important; }

  /* 侧边悬浮工具条在手机上隐藏 */
  .fix_nav { display: none !important; }

  /* ===== 游戏推荐区：手机端一行2个，卡片等比缩放（图片保持380:270比例） ===== */
  .rec_games { margin: 0 0 30px !important; }
  .rec_games .new_bt { margin-bottom: 16px !important; }
  .rec_games .rec_grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .rec_games .rec_card { width: 100% !important; height: auto !important; border-radius: 10px !important; }
  .rec_games .rec_img img { width: 100% !important; height: auto !important; aspect-ratio: 380 / 270 !important; }
  .rec_games .rec_content { height: auto !important; }
  .rec_games .rec_info { height: auto !important; padding: 8px 10px !important; gap: 8px !important; }
  .rec_games .rec_bar { height: auto !important; padding: 5px 10px 7px !important; }
  .rec_games .rec_avatar { width: 40px !important; height: 40px !important; }
  .rec_games .rec_name { font-size: 13px !important; margin-bottom: 3px !important; }
  .rec_games .rec_intr { font-size: 11px !important; }
  .rec_games .rec_enter { font-size: 12px !important; }
  /* 手机端（无鼠标悬停）：两个区域的进入游戏按钮保持黄色常亮 */
  .newgames_and_newoutfit .hg_card .hg_enter,
  .rec_games .rec_enter { color: #ffd500 !important; }
}

/* ---------- ≤480px：小屏微调 ---------- */
@media (max-width: 480px) {
  .new_header .logo { width: 109px !important; }
  .new_header .nh_right ul { gap: 14px !important; }
  .new_header ul li a { font-size: 14px !important; }
  .index_banner .swiper-pagination-bullet { width: 24px !important; }
  .custom-news-banner .news-title { font-size: 22px !important; }
  .newgames_and_newoutfit .hg_slide { width: calc(100vw - 64px) !important; }
  /* 小屏信息条放不下简介，隐藏简介保留图标+名称+下载按钮 */
  .new-games .new-games_item .games_text .intro { display: none !important; }
}