/* public/assets/test/css/game/game-all-search-v2.css */

.ga2{
  --ga2-max: 1180px;
  --ga2-gap: 26px;
  --ga2-card-r: 18px;
  --ga2-soft: rgba(15,23,42,.06);
  --ga2-text: #111827;
  --ga2-muted:#6b7280;
  --ga2-yellow:#fbbf24;

  /* ✅ 两张图由 Blade 注入：
     --ga2-bg  = search-bg.jpg
     --ga2-art = search-allgame.jpg
  */
  --ga2-bg: none;
  --ga2-art: none;

  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  isolation: isolate;

  color: var(--ga2-text);
  background: #fff; /* 底色兜底 */
}

.ga2 *{ box-sizing: border-box; }
.ga2 a{ color: inherit; text-decoration: none; }
.ga2 img{ display:block; max-width:100%; }

.ga2-sr{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* show/hide helpers */
.fm-desktop-only{ display:block; }
.fm-mobile-only{ display:none; }

/* =========================================================
   ✅ 全局背景（你要求：顶部 0 + 渐变铺满全页）
   - ::before 只放 search-bg.jpg（顶到 0）
   - ::after 负责整页渐变（铺满整个页面）
========================================================= */
.ga2::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 760px;               /* ✅ 顶部背景图展示高度（够露出 hero + 上半屏） */
  background-image: var(--ga2-bg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: -3;
  pointer-events:none;
}

.ga2::after{
  content:"";
  position:absolute;
  inset:0;
  /* ✅ 从上到下渐变铺满全页（你要的“渐变铺满整个页面”） */
  background: linear-gradient(
    to bottom,
    rgba(246,241,223,0.00) 0%,
    rgba(246,241,223,0.55) 26%,
    rgba(246,241,223,0.95) 56%,
    rgba(255,255,255,1.00) 100%
  );
  z-index: -2;
  pointer-events:none;
}

/* -------------------------
   Hero（透明，让全局背景生效）
------------------------- */
.ga2-hero{
  position: relative;
  overflow: hidden;
  background: transparent;
}
/* ✅ Hero 顶到 0，不再为 header 留空 */
.ga2-hero{
  padding: 40px 18px 18px;
}

/* ✅ 搜索区自己往下推（等于放在 header 下面） */
.ga2-hero-inner{
  padding-top: calc(var(--hv2-h, 72px) + 18px);
}


/* ✅ All Games 装饰图层：在搜索框背后 */
.ga2-hero-art{
  position: absolute;
  left: 50%;
  top: calc(var(--hv2-h, 72px) + 10px);
  transform: translateX(-50%);
  width: min(1040px, 92vw);
  height: 240px;

  background-image: var(--ga2-art);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;

  z-index: 0;
  pointer-events:none;
}

.ga2-hero-inner{
  position: relative;
  z-index: 1; /* ✅ 内容层压在装饰图上 */
  max-width: var(--ga2-max);
  margin: 0 auto;
}

/* -------------------------
   Search（要压在装饰图上）
------------------------- */
.ga2-search{
  display:flex;
  align-items:center;
  gap: 10px;
  width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;

  background: rgba(255,255,255,.94);
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
}

.ga2-search--hero{
  position: relative;
  z-index: 2;
  height: 60px;
  padding: 0 18px;

  /* ✅ 关键：把搜索框压到 All Games 装饰图的“后面区域”上 */
  margin-top: 160px;
}

.ga2-ic{ width: 18px;height:18px; display:inline-flex; color:#111; opacity:.85; }

.ga2-input{
  flex:1;
  border:0; outline:0;
  height:100%;
  background: transparent;
  font-size: 14px;
  color: var(--ga2-text);
}
.ga2-input::placeholder{ color: rgba(17,24,39,.45); }

.ga2-clear{
  width: 34px;height: 34px;
  border-radius: 999px;
  border:0;
  background: rgba(15,23,42,.07);
  color:#111;
  cursor:pointer;
}

/* top search 2 cards */
/* PC 搜索结果：跟主容器同宽，卡片保持原来的视觉尺寸 */
.ga2-topgrid{
  margin-top: 18px;
  width: 100%;                 /* ✅ 不要 560px */
  max-width: var(--ga2-max);   /* ✅ 跟页面容器一致 */
  margin-left: auto;
  margin-right: auto;

  display: grid;
  gap: 18px;

  /* ✅ 关键：每张卡一个固定宽度区间，自动排 4~6 个 */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}


/* empty box (search no result) */
.ga2-hero-empty{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}
.ga2-emptybox{
  width: min(760px, 100%);
  min-height: 220px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 16px 36px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 12px;
  color: rgba(17,24,39,.55);
  text-align:center;
  padding: 22px;
}
.ga2-empty-ic{ opacity:.55; }
.ga2-empty-txt{
  max-width: 520px;
  line-height: 1.45;
  font-size: 14px;
  color: rgba(17,24,39,.65);
}

/* -------------------------
   Shell / Layout（透明，别盖掉全局渐变）
------------------------- */
.ga2-shell{
  padding: 18px 18px 48px;
  background: transparent;
}

.ga2-layout{
  max-width: var(--ga2-max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--ga2-gap);
  align-items:start;
}

/* sidebar */
.ga2-sidecard{
  position: sticky;
  top: calc(var(--hv2-h, 72px) + 14px);
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
  overflow:hidden;
}
.ga2-sidetitle{
  font-weight: 700;
  font-size: 13px;
  color: rgba(17,24,39,.85);
  margin: 2px 6px 10px;
}

/* category icon */
.ga2-catic{
  width: 20px;
  height: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  color: rgba(17,24,39,.55);
}
.ga2-catic svg{ width:20px; height:20px; }
.ga2-catic svg path{ stroke: currentColor; }

.ga2-cat{
  display:flex;
  align-items:center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 14px;
  color: rgba(17,24,39,.70);
}
.ga2-cat:hover{ background: rgba(255,255,255,.65); }
.ga2-cat.is-active{
  background: rgba(15,23,42,.06);
  color: #111;
}
.ga2-cat.is-active .ga2-catic{ color:#111; }

/* main head */
.ga2-mainhead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 6px 0 14px;
}
.ga2-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* sort pill */
.ga2-sort{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.ga2-sort{
  background: rgba(255,255,255,.72);     /* ✅ 更透 */
  backdrop-filter: blur(10px);           /* ✅ 玻璃感 */
  border: 1px solid rgba(15,23,42,.08);
}
.ga2-sort a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(17,24,39,.70);
}
.ga2-sort a.is-active{
  background: #111;
  color: #fff;
}

/* -------------------------
   Cards
------------------------- */
.ga2-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ga2-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(15,23,42,.10);
  background: #e5e7eb;
  aspect-ratio: 3 / 4;
}
.ga2-cardimg{ position:absolute; inset:0; }
.ga2-cardimg img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.ga2-badge{
  position:absolute;
  top: 10px;
  right: 10px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ga2-yellow);
  color:#111;
  font-size: 12px;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ga2-cardinfo{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 12px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color:#fff;
}
.ga2-cardname{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.ga2-cardmeta{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  opacity: .92;
}

/* ✅ 销量靠右下角（在 meta 行的右侧） */
.ga2-sales{
  margin-left: auto;
  text-align: right;
  opacity: .92;
}

/* ✅ 你说不要点，就彻底隐藏（即使旧 HTML 里还有也不会显示） */
.ga2-dot{ display:none !important; }

.ga2-star{ color: var(--ga2-yellow); }
.ga2-card--big{ aspect-ratio: 3 / 4; }

.ga2-sentinel{ height: 1px; }

/* -------------------------
   Footer pager
------------------------- */
.ga2-foot{
  margin-top: 18px;
  padding-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  color: rgba(17,24,39,.65);
  font-size: 12px;
}

.ga2-pager{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.ga2-pageinfo{
  white-space: nowrap;
  color: rgba(17,24,39,.70);
}

.ga2-nav{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  color: rgba(17,24,39,.70);
}
.ga2-nav:hover{ background: rgba(255,255,255,1); }
.ga2-nav.is-disabled{
  opacity:.35;
  pointer-events:none;
}

/* -------------------------
   Mobile tabs + drawer
------------------------- */
.ga2-mtabs{
  position: sticky;
  top: var(--hv2-h, 56px);
  z-index: 30;

  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;
  background: rgba(246,241,223,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.ga2-mtabs-scroll{
  flex: 1;
  display:flex;
  align-items:flex-end;
  gap: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ga2-mtabs-scroll::-webkit-scrollbar{ display:none; }

.ga2-mtab{
  position: relative;
  padding: 10px 0;
  font-size: 16px;
  color: rgba(17,24,39,.55);
  font-weight: 500;
}
.ga2-mtab.is-active{
  color: #111;
  font-weight: 800;
}
.ga2-mtab.is-active::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 2px;
  width: 66px;
  height: 6px;
  border-radius: 999px;
  background: var(--ga2-yellow);
}

.ga2-mtabs-btn{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ga2-mtabs-ic{
  width: 20px;
  height: 20px;
  color: rgba(17,24,39,.75);
}
.ga2-mtabs-ic svg{ width:20px; height:20px; }

/* drawer */
.ga2-drawer{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display:none;
}
.ga2-drawer.is-open{ display:block; }

.ga2-drawer-mask{
  position:absolute; inset:0;
  background: rgba(2,6,23,.42);
}

.ga2-drawer-panel{
  position:absolute;
  left:0; right:0; bottom:0;
  background:#fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  max-height: 72vh;
  overflow:auto;
  box-shadow: 0 -18px 50px rgba(15,23,42,.18);
  padding: 14px 14px 18px;
}

.ga2-drawer-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 4px 2px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.ga2-drawer-title{
  font-weight: 800;
  font-size: 14px;
  color:#111;
}
.ga2-drawer-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  font-size: 22px;
  line-height: 1;
}

.ga2-drawer-list{
  padding-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ga2-drawer-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(15,23,42,.02);
  color: rgba(17,24,39,.80);
}
.ga2-drawer-item.is-active{
  background: rgba(15,23,42,.06);
  color:#111;
}

/* -------------------------
   Responsive
------------------------- */
@media (max-width: 1024px){
  .ga2-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px){
  .fm-desktop-only{ display:none; }
  .fm-mobile-only{ display:flex; }

  .ga2-hero{
    padding: calc(var(--hv2-h, 56px) + 14px) 14px 14px;
  }

  .ga2-hero-art{
    top: calc(var(--hv2-h, 56px) + 6px);
    height: 200px;
    width: min(980px, 94vw);
  }

  .ga2-search--hero{
    height: 56px;
    width: min(720px, 100%);
    margin-top: 128px; /* ✅ 手机端稍微提上来 */
    padding: 0 16px;
  }

  .ga2-topgrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 12px;
    margin-top: 16px;
  }

  .ga2-shell{ padding: 12px 14px 40px; }
  .ga2-layout{ grid-template-columns: 1fr; gap: 12px; }
  .ga2-mainhead{ margin-top: 6px; }
  .ga2-title{ font-size: 16px; }

  .ga2-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

  .ga2-foot{ display:none; }
}

@media (max-width: 360px){
  .ga2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ✅ 强制：PC 不显示 mtabs，手机才显示（放在 CSS 最底部） */
.ga2 .fm-mobile-only{ display:none !important; }
.ga2 .fm-desktop-only{ display:block !important; }

@media (max-width: 768px){
  .ga2 .fm-mobile-only{ display:flex !important; }
  .ga2 .fm-desktop-only{ display:none !important; }
}
#page_main {
    padding-top: 0px !important;
}

/* ✅ 干掉浏览器自带 search 清除 X，避免和 .ga2-clear 重叠 */
.ga2 .ga2-input[type="search"]{
  -webkit-appearance: none;
  appearance: none;
}

.ga2 .ga2-input[type="search"]::-webkit-search-cancel-button,
.ga2 .ga2-input[type="search"]::-webkit-search-decoration,
.ga2 .ga2-input[type="search"]::-webkit-search-results-button,
.ga2 .ga2-input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
  display: none;
}

.ga2 .ga2-input::-ms-clear,
.ga2 .ga2-input::-ms-reveal{
  display: none;
  width: 0;
  height: 0;
}

@media (max-width: 768px){

  /* ✅ 让内容整体更靠上（header 透明，你就别留太大空） */
  .ga2 .ga2-hero-inner{
    padding-top: calc(var(--hv2-h, 56px) + 6px) !important;
  }

  /* ✅ All Games（装饰图）放大：至少 2 倍体感 */
  .ga2 .ga2-hero-art{
    width: min(1400px, 130vw) !important; /* 更宽 = 字更大 */
    height: 360px !important;            /* 更高 = 视觉更大 */
    top: calc(var(--hv2-h, 56px) - 6px) !important; /* 往上抬一点 */
  }

  /* ✅ 搜索框距离顶部更近（减少 margin-top） */
  .ga2 .ga2-search--hero{
    margin-top: 92px !important;  /* 原来如果更大，就改小 */
    height: 56px !important;
  }
}
/* ✅ 空状态：透明，不要白底卡片 */
.ga2 .ga2-hero-empty{ background: transparent !important; }

.ga2 .ga2-emptybox{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;   /* 你要更紧凑就保留；想保持高度就删掉这行 */
  padding: 18px 10px !important;
}

@media (max-width: 768px){
  .ga2-topgrid{
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;

    width: 100%;
    max-width: 100%;
  }
  .ga2-topgrid::-webkit-scrollbar{ display:none; }

  /* ✅ 每个卡片固定占 2 列的宽度：约等于屏宽的一半 */
  .ga2-topgrid .ga2-card{
    flex: 0 0 calc((100% - 12px) / 2);
    scroll-snap-align: start;
  }
}
/* ✅ Pager 区域强制靠右（防止被全局样式搞乱） */
.ga2-foot{
  width: 100%;
}

.ga2-footr{
  margin-left: auto;      /* ✅ 核心：把右侧推到最右 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ga2-footl{
  min-width: 0;
}