/* =====================================================
   LAODENG Clean CSS v3.1（去吸附版）
   - 三套布局：home / detail / archive(tag+search)
   - 修复：二维码居中 / 标签&搜索双栏 / 侧栏分组间距
          小组件圆角 / 标签列表“与页面同高”
   - 移除：所有 position: sticky 吸附相关样式
   ===================================================== */

/* -------------------- 设计变量 -------------------- */
:root{
  --primary:#1b2838; --secondary:#171a21; --accent:#66c0f4;
  --text:#1d1d1f;   --text-light:#52525b;
  --bg:#f5f5f5;     --card:#fff; --border:#e0e0e0;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --radius:12px;

  --nav-h:60px;
  --safe-top:env(safe-area-inset-top);
  --sticky-top:calc(var(--nav-h) + 12px + var(--safe-top));

  --wrap-w:1300px;
  --main-w:1400px;
  --sidebar-w:350px;
}

/* -------------------- Reset -------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,"Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}

/* -------------------- 包裹容器 -------------------- */
.game-wrap{max-width:var(--wrap-w);margin:28px auto 60px;padding:0 16px}
.main-container{max-width:var(--main-w);margin:28px auto 60px;padding:0 16px}

/* -------------------- 面包屑 -------------------- */
.breadcrumb{font-size:13px;color:#666;margin-bottom:20px;line-height:1.5}
.breadcrumb a{color:#666;text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{margin:0 8px;color:#999}

/* -------------------- 导航（固定 + 占位） -------------------- */
.site-nav-header{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:rgba(245,245,245,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:1000
}
.nav-container{
  max-width:calc(var(--wrap-w) + 50px);
  margin:0 auto;height:var(--nav-h);padding:0 20px;
  display:flex;align-items:center;justify-content:space-between
}
.site-logo{font-size:20px;font-weight:700;color:#1b2838;text-decoration:none;display:flex;gap:8px}
.site-logo:hover{color:var(--accent)}
.desktop-nav{display:flex;gap:0}
.nav-item{
  position:relative;padding:8px 20px;color:#52525b;text-decoration:none;border-radius:6px;
  font-size:14px;font-weight:500;transition:.2s;display:flex;align-items:center;gap:6px
}
.nav-item:hover{background:rgba(229,231,235,.8);color:#1b2838}
.nav-item::after,.nav-item::before{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:4px;height:60%;
  pointer-events:none;border-radius:2px;
  background:linear-gradient(to right,rgba(0,0,0,.15) 0 1px,transparent 1px 3px,rgba(0,0,0,.15) 3px 4px)
}
.nav-item::after{right:0}.nav-item::before{left:0;display:none}.nav-item:first-child::before{display:block}

/* 移动端容器占位（按钮放这里） */
.mobile-nav{display:none}

/* 侧滑菜单/遮罩（原样保留） */
.mobile-menu{position:fixed;top:var(--nav-h);right:-100%;width:min(76vw, 240px);height:calc(100vh - var(--nav-h));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:-2px 0 10px rgba(0,0,0,.1);transition:right .3s;overflow-y:auto;padding:20px 0;z-index:1000}
.mobile-menu.active{right:0}
.mobile-nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#52525b;text-decoration:none;font-size:15px;font-weight:500;transition:.2s}
.mobile-nav-item:hover,.mobile-nav-item:active{background:rgba(245,245,245,.8);color:#1b2838}
.mobile-nav-item::after,.mobile-nav-item::before{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:4px;height:60%;
  pointer-events:none;border-radius:2px;
  background:linear-gradient(to right,rgba(0,0,0,.15) 0 1px,transparent 1px 3px,rgba(0,0,0,.15) 3px 4px)
}
.mobile-nav-item::after{right:0}.mobile-nav-item::before{left:0;display:none}.mobile-nav-item:first-child::before{display:block}
.mobile-overlay{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:.3s;z-index:999}
.mobile-overlay.active{opacity:1;visibility:visible}

/* === 移动端汉堡按钮（三条线） === */
#hamburger{
  position:relative;display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  color:#1b2838;font-size:0;line-height:0;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:center;background-size:24px 2px;
}
#hamburger::before,#hamburger::after{
  content:"";position:absolute;left:8px;right:8px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s, top .25s, opacity .25s, background-size .25s;
}
#hamburger::before{top:12px}
#hamburger::after{top:26px}
#hamburger.active{background-size:0 0}
#hamburger.active::before{top:19px;transform:rotate(45deg)}
#hamburger.active::after{top:19px;transform:rotate(-45deg)}

/* —— 改断点：≤1024px 进入“移动端” —— */
@media (max-width:1024px){
  .desktop-nav{display:none}
  .mobile-nav{display:block}
  .nav-container{padding:0 16px}
  #hamburger{display:block}
}
@media (min-width:1025px){
  #hamburger{display:none}
}

.nav-spacer{height:calc(var(--nav-h) + var(--safe-top))}

/* ====== 搜索 UI 样式（桌面 + 移动） ====== */

/* 桌面“搜索”外观 */
.nav-search-btn .nav-search-icon{ margin-right:6px; }

/* 窄屏时桌面“搜索”只显示图标（仍保留） */
@media (max-width:1024px){
  .nav-search-btn span{ display:none; }
}

/* —— 移动端按钮区域：搜索在汉堡“左侧”并排 —— */
@media (max-width:1024px){
  .mobile-nav{ display:flex !important; align-items:center; gap:8px; }
  #mobileSearchBtn{ display:inline-flex; }
  #hamburger{ margin-left:2px; }
}
@media (min-width:1025px){
  #mobileSearchBtn{ display:none; }
}

/* 移动端搜索按钮 */
.mobile-search-btn{
  width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  color:#1b2838; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; transition:background .15s ease, color .15s ease;
}
.mobile-search-btn:active{ background:rgba(27,40,56,.06); }

/* ===== 搜索弹窗 ===== */
.search-modal{ position:relative; z-index:1100; }
.search-modal .ns-mask{
  position:fixed; left:0; right:0;
  top:calc(var(--nav-h) + var(--safe-top)); bottom:0;
  background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
/* 桌面：水平居中 */
.search-modal .ns-sheet{
  position:fixed; left:50%;
  top:calc(var(--nav-h) + var(--safe-top) + 10px);
  transform:translateX(-50%) translateY(-6px);
  width:min(620px,92vw);
  background:var(--card);
  border:1px solid rgba(27,40,56,.08);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:14px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease;
  z-index:1101;
}
.search-modal.open .ns-mask{ opacity:1; visibility:visible; }
.search-modal.open .ns-sheet{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

/* 表单与控件 */
.ns-form{ display:flex; align-items:center; gap:10px; }
.ns-input{
  flex:1; height:42px; padding:0 14px;
  border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; color:var(--text); font-size:14px; outline:none;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
  transition:border-color .2s, box-shadow .2s;
}
.ns-input::placeholder{ color:#9ca3af; }
.ns-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(102,192,244,.22); }
.ns-submit{
  height:42px; padding:0 16px; border:0; border-radius:12px;
  background:var(--primary); color:#fff; font-weight:700; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.ns-submit:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.ns-submit:active{ transform:translateY(0); }
.ns-close{
  width:34px; height:34px; margin-left:4px; border:0; border-radius:50%;
  background:transparent; color:#64748b; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.ns-close:hover{ background:rgba(27,40,56,.06); color:#334155; }

/* 打开时禁滚动 */
html.nav-lock{ overflow:hidden; }

/* —— 小于等于 1024px：改为贴边卡片并移除水平居中偏移 —— */
@media (max-width:1024px){
  .search-modal .ns-sheet{
    left:8px !important; right:8px !important; width:auto !important;
    transform:translateY(-6px) !important;
    padding:12px; border-radius:16px; box-shadow:0 10px 32px rgba(0,0,0,.16);
  }
  .ns-form{ gap:8px; }
  .ns-input{ height:40px; }
  .ns-submit{ height:40px; padding:0 14px; border-radius:10px; }
  .ns-close{ width:32px; height:32px; }
}



/* -------------------- 侧栏通用 -------------------- */
.sidebar-column,.home-sidebar{display:flex;flex-direction:column;gap:20px;min-height:0}
.sidebar-column > * + *,.home-sidebar > * + *{margin-top:0}
.sidebar-search-wrapper{width:100%;flex-shrink:0}
.sidebar-tags-wrapper{width:100%;flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-self:stretch}
.sidebar-search{
  border-radius:var(--radius);padding:20px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 50%,var(--accent) 100%);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(0,0,0,.06);border:none
}
.sidebar-search h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:16px}
.search-box{display:flex;gap:6px}
.search-input{flex:1;padding:12px 16px;border:none;border-radius:8px;font-size:14px;background:#fff;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.search-input::placeholder{color:#999}
.search-btn{padding:12px 24px;background:#fff;color:var(--primary);border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:.25s;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.search-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* 标签列表容器：与页面同高（= 视口高 - 导航占位） */
.sidebar-tags{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;overflow:hidden;flex:1 1 0;min-height:0}
.sidebar-tags h3{font-size:18px;font-weight:700;color:var(--text);margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--primary);flex-shrink:0}
.sidebar-tag-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:0;padding-right:4px}
.sidebar-tag-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:linear-gradient(135deg, rgba(27,40,56,.05) 0%, rgba(23,26,33,.05) 100%);border-radius:8px;
  text-decoration:none;color:var(--text);font-size:14px;transition:.2s;border:1px solid transparent}
.sidebar-tag-item:hover{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;transform:translateX(4px);border-color:var(--primary)}
.sidebar-tag-name{font-weight:600}
.sidebar-tag-count{font-size:12px;opacity:.8;background:rgba(0,0,0,.1);padding:2px 8px;border-radius:12px}
.sidebar-tag-item:hover .sidebar-tag-count{background:rgba(255,255,255,.25)}
.sidebar-tag-list::-webkit-scrollbar{width:8px}
.sidebar-tag-list::-webkit-scrollbar-track{background:rgba(27,40,56,.05);border-radius:4px}
.sidebar-tag-list::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);border-radius:4px}
.sidebar-tag-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,var(--secondary) 0%,var(--accent) 100%)}

/* ============ 页面：详情（两栏，左窄右侧栏） ============ */
.detail-layout{
  display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-w);gap:24px;align-items:stretch
}
.main-content{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:32px;border:1px solid rgba(0,0,0,.06)
}

/* 详情内容 */
.meta-date{display:inline-block;font-size:12px;color:var(--secondary);font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid rgba(27,40,56,.3);line-height:1}
h1{font-size:28px;font-weight:800;color:#0f172a;margin:0 0 20px;line-height:1.4}

/* 主封面 */
#hero-img{
  max-width:min(100%,900px);height:auto;display:block;margin:24px auto;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08)
}
@media (max-width:768px){#hero-img{max-width:100%}}

/* 描述块 */
.description{margin:28px 0;padding:20px;background:linear-gradient(135deg, rgba(27,40,56,.03) 0%, rgba(23,26,33,.03) 100%);
  border-left:3px solid var(--primary);border-radius:0 8px 8px 0}
.description p{margin:0;color:#64748b;line-height:1.8;font-size:15px}

/* 系统需求 */
.system-requirements{margin:32px 0}
.system-requirements h3{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:16px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.req-item{background:linear-gradient(#fff 0%,#fafbff 100%);border:1px solid rgba(27,40,56,.1);border-radius:10px;padding:20px}
.req-item h4{margin:0 0 12px;color:#0f172a;font-size:16px;font-weight:700;padding-bottom:10px;border-bottom:2px solid rgba(27,40,56,.2)}
.req-content{font-size:14px;color:#64748b;line-height:1.8}
.req-content strong{color:#0f172a;font-weight:600;display:inline-block;min-width:70px}

/* 视频 */
.game-video{margin:28px 0}
.game-video h3{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:12px}
.video-wrap{display:flex;justify-content:center}
#gameVideo{width:min(100%,550px);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);background:#000;outline:none}
.video-playlist{margin-top:10px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.video-switch-btn{padding:8px 12px;font-size:13px;border-radius:8px;border:1px solid rgba(27,40,56,.2);
  background:linear-gradient(135deg,rgba(27,40,56,.05) 0%, rgba(23,26,33,.05) 100%);cursor:pointer}
.video-switch-btn:hover{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;border-color:var(--primary)}
@media (max-width:768px){#gameVideo{width:100%}}

/* 截图 - 容器自适应方案 */
.game-screenshots{margin:32px 0}
.game-screenshots h3{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:16px}
.screenshots-grid{display:flex;flex-direction:column;gap:16px;align-items:center} /* 真实16px间距 */
.screenshot-item{width:auto;max-width:min(100%,550px);background:transparent;border:none;border-radius:0;box-shadow:none;overflow:visible;cursor:pointer;transition:.3s;line-height:0;display:flex;justify-content:center;padding:0;margin:0 auto} /* 容器自适应宽度 */
.screenshot-item img,.screenshot-item video,.screenshot-item .shot-media{width:auto!important;height:auto!important;max-width:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;display:block!important;border-radius:8px!important;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .3s ease,box-shadow .3s ease;margin:0} /* 图片自适应+阴影 */
.screenshot-item:hover img,.screenshot-item:hover video,.screenshot-item:hover .shot-media{transform:scale(1.02);box-shadow:0 8px 20px rgba(27,40,56,.2)} /* hover放大 */
@media (max-width:768px){.screenshots-grid{gap:12px}.screenshot-item{max-width:100%}.screenshot-item:hover img,.screenshot-item:hover video,.screenshot-item:hover .shot-media{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}} /* 移动端优化 */

/* 信息网格 */
.game-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.info-item{background:linear-gradient(#fff 0%,#fafbff 100%);border:1px solid rgba(27,40,56,.1);border-radius:10px;padding:16px;transition:.3s}
.info-item:hover{border-color:rgba(27,40,56,.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(27,40,56,.1)}
.info-label{font-size:12px;color:var(--secondary);text-transform:uppercase;margin-bottom:8px;font-weight:700;letter-spacing:.5px}
.info-value{font-size:15px;color:#0f172a;word-break:break-word;font-weight:600}

/* 下载区 */
.downloads-section{margin:32px 0}
.downloads-section h3{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:16px}
.item{background:linear-gradient(#fff 0%,#fafbff 100%);border:1px solid rgba(27,40,56,.1);border-radius:10px;padding:18px;margin-bottom:16px;transition:.3s}
.item:hover{border-color:rgba(27,40,56,.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(27,40,56,.1)}
.item-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:10px}
.item-type{margin-left:8px}
.type-icon{width:18px;height:18px;margin-left:6px;vertical-align:text-bottom;border-radius:3px}
.view-btn{display:inline-block;padding:8px 20px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  color:#fff;text-decoration:none;border-radius:8px;font-size:14px;font-weight:600;transition:.3s;box-shadow:0 4px 12px rgba(27,40,56,.3)}
.view-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(27,40,56,.4)}
.content-box{margin-top:12px;padding:14px;background:linear-gradient(135deg,rgba(27,40,56,.05) 0%, rgba(23,26,33,.05) 100%);border-radius:8px;border:1px solid rgba(27,40,56,.15)}
.content-text{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:10px;word-wrap:break-word;word-break:break-all}
.btn-container{display:flex;gap:10px;flex-wrap:wrap}
.copy-btn{padding:10px 20px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:.3s}
.copy-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(27,40,56,.3)}
.copy-btn:disabled{opacity:.5;cursor:not-allowed}
.demo-btn{padding:10px 20px;background:#fff;color:var(--primary);border:2px solid var(--primary);border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:.3s}
.demo-btn:hover{background:var(--primary);color:#fff}

/* 使用说明 / 返回按钮 */
.note{background:linear-gradient(135deg,#fff3cd 0%,#ffeaa7 100%);border:2px solid #ffd93d;border-radius:10px;padding:20px;margin:28px 0;font-size:14px;line-height:1.8;color:#856404}
.back{display:inline-block;margin-top:24px;padding:12px 24px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;text-decoration:none;border-radius:8px;font-size:14px;font-weight:600;transition:.3s;box-shadow:0 4px 12px rgba(27,40,56,.3)}
.back:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(27,40,56,.4)}

/* 游戏类型小标签 */
.info-value .genre-link{display:inline-block;padding:3px 10px;margin:2px 4px 2px 0;background:rgba(27,40,56,.06);color:var(--primary);
  text-decoration:none;font-size:12px;font-weight:600;border-radius:4px;border:1px solid rgba(27,40,56,.12);transition:.2s;white-space:nowrap;line-height:1.4}
.info-value .genre-link:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.genre-more{display:inline-block;padding:3px 8px;margin-left:4px;background:rgba(27,40,56,.08);color:#64748b;font-size:11px;font-weight:600;border-radius:4px;border:1px dashed rgba(27,40,56,.15)}
@media (max-width:768px){
  .info-value .genre-link{font-size:11px;padding:2px 8px}
  .genre-more{font-size:10px;padding:2px 6px}
}

/* 相关游戏 */
.related-games-section{margin-top:48px;padding-top:32px;border-top:1px solid #e5e7eb}
.related-games-section h3{font-size:20px;font-weight:600;margin-bottom:20px;color:#111827}
.related-games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.related-game-item{display:block;text-decoration:none;background:#f9fafb;border-radius:10px;overflow:hidden;transition:transform .2s}
.related-game-item:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.related-game-cover{width:100%;aspect-ratio:92/43;border-radius:10px;overflow:hidden;background:#e5e7eb}
.related-game-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.related-game-title{padding:12px;font-size:14px;font-weight:500;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:768px){
  .related-games-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .related-game-title{font-size:13px;padding:8px}
}

/* ============ 页面：标签 & 搜索（共用 archive） ============ */
.tag-layout{
  display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-w);gap:24px;align-items:stretch
}
.tag-main-content{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:32px;border:1px solid rgba(0,0,0,.06)
}
.section-header{margin:12px 0 20px}
.section-title{font-size:22px;font-weight:800;color:var(--text);padding-left:14px;border-left:4px solid var(--primary)}
.games-grid{column-count:3;column-gap:24px}
@media (max-width:800px){.games-grid{column-count:2}}
@media (max-width:500px){.games-grid{column-count:1}}
.game-item{
  display:block;text-decoration:none;color:inherit;background:var(--card);border-radius:18px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08);transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s, border-color .35s;
  border:1px solid rgba(27,40,56,.1);margin-bottom:24px;break-inside:avoid
}
.game-item:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 20px 48px rgba(0,0,0,.15);border-color:var(--text)}
.game-thumbnail{position:relative;width:calc(100% - 32px);margin:16px 16px 0;border-radius:14px;overflow:hidden;background:transparent;aspect-ratio:auto;height:auto;max-height:520px}
.game-thumbnail img{width:100%;height:auto;display:block;border-radius:inherit;transition:transform .45s, filter .45s;max-height:inherit}
.game-thumbnail::after{content:"";position:absolute;top:-50%;left:-50%;width:240%;height:240%;
  background:linear-gradient(120deg,transparent 0,transparent 30%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.6) 48%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.6) 52%,rgba(255,255,255,.15) 60%,transparent 70%,transparent 100%);
  transform:translateX(-100%) translateY(-100%) rotate(-10deg);transition:transform 1.4s cubic-bezier(.25,.46,.45,.94);pointer-events:none;border-radius:inherit;z-index:2}
.game-item:hover .game-thumbnail img{transform:scale(1.03);filter:brightness(1.06) saturate(1.06)}
.game-item:hover .game-thumbnail::after{transform:translateX(100%) translateY(100%) rotate(-10deg)}
.game-content{padding:16px;background:linear-gradient(#fff 0%,#fafbff 100%);transition:background .3s}
.game-item:hover .game-content{background:linear-gradient(#fff 0%,#f8f9fe 100%)}
.game-date{font-size:12px;color:var(--secondary);font-weight:600;margin-bottom:10px;display:inline-block;padding-bottom:6px;border-bottom:2px solid rgba(27,40,56,.3);line-height:1}
.game-title{font-size:19px;font-weight:700;color:#0f172a;margin:0 0 10px;line-height:1.4;overflow:hidden;transition:.3s}
.game-item:hover .game-title{color:var(--primary);transform:translateX(2px)}
.game-desc{
  font-size:14px;color:#64748b;line-height:1.6;margin-bottom:14px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden
}
.game-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--secondary);padding-top:14px;border-top:1px solid rgba(27,40,56,.1)}
/* 修复搜索页滚动条抖动 */
body.page--search {
  overflow-y: scroll !important;
  overflow-x: hidden;
}

/* 避免被外层 overflow 破坏（即使未吸附也不影响） */
.home-layout,.tag-layout,.detail-layout,.home-sidebar,.sidebar-column{overflow:visible}

/* -------------------- 分页 -------------------- */
.pagination-wrap{display:flex;justify-content:center;margin:28px 0 0}
.pagination{display:flex;gap:6px}
.pagination a,.pagination span{
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid #dee2e6;border-radius:8px;background:#fff;color:#495057;text-decoration:none;font-size:13px;transition:.2s
}
.pagination a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .disabled{opacity:.45;cursor:not-allowed}
.loading-state,.empty-state{text-align:center;padding:46px 16px;color:var(--text-light);font-size:14px;column-span:all}

/* ============ 页面：首页（大搜索 + 两栏） ============ */
.site-header{text-align:center;margin-bottom:36px}
.site-title{
  font-size:34px;font-weight:800;margin-bottom:8px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.site-tagline{font-size:15px;color:var(--text-light)}

.search-section{
  margin-bottom:32px;padding:40px 20px;border-radius:20px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 50%,var(--accent) 100%);
  box-shadow:0 10px 40px rgba(37,99,235,.25)
}
.search-wrapper{max-width:650px;margin:0 auto;position:relative;display:flex;align-items:center}
.search-section .search-input{width:100%;padding:16px 120px 16px 20px;border:none;border-radius:14px;background:#fff;color:#333;font-size:15px;outline:none;transition:.25s;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.search-section .search-input::placeholder{color:#999}
.search-section .search-input:focus{box-shadow:0 6px 24px rgba(0,0,0,.15);transform:translateY(-1px)}
.search-section .search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:11px 28px;border:0;border-radius:10px;background:#fff;color:var(--primary);font-size:15px;font-weight:700;cursor:pointer;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.search-section .search-btn:hover{transform:translateY(-50%) translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.search-section .search-btn:active{transform:translateY(-50%) scale(.96)}

.home-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-w);gap:30px;align-items:stretch}
.home-main{min-width:0}
.updates-section{margin-bottom:36px}

/* 首页侧栏：不显示搜索小卡，只显示热榜/标签 */
.home-layout .sidebar-search-wrapper{display:none!important}

/* 热榜组件（共用） */
.hot-panel{background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.hot-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 55%,var(--accent) 100%);padding:12px 14px}
.hot-title{color:#fff;font-size:15px;font-weight:800;letter-spacing:.2px}
.hot-tabs{display:flex;gap:6px}
.hot-tab{appearance:none;border:none;cursor:pointer;padding:6px 10px;border-radius:8px;font-weight:700;font-size:12px;background:rgba(255,255,255,.12);color:#fff;transition:.2s}
.hot-tab:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.hot-tab.active{background:#fff;color:var(--primary)}
.hot-list{list-style:none;margin:0;padding:6px}
.hot-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;transition:background .2s, transform .2s}
.hot-item:hover{background:linear-gradient(135deg,rgba(27,40,56,.05) 0%, rgba(23,26,33,.05) 100%);transform:translateX(2px)}
.hot-rank{min-width:20px;text-align:right;font-weight:800;color:#334155}
.hot-link{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text);text-decoration:none;font-weight:600}
.hot-link:hover{color:var(--primary);text-decoration:underline}
.hot-heat{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:#6b7280}
.hot-icon{width:14px;height:14px;opacity:.55;display:block}
.hot-num{font-weight:700;font-size:12px;opacity:.8}
.hot-meta{display:flex;align-items:center;justify-content:flex-start;padding:8px 10px;border-top:1px solid rgba(0,0,0,.06);color:#64748b;font-size:12px}
.hot-updated{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:768px){.hot-title{font-size:14px}.hot-tab{padding:6px 8px;font-size:12px}}
/* 只显示一份热榜：桌面侧栏版；移动端显示 .mobile-hot */
/* 桌面：显示侧栏热榜，隐藏移动热榜 */
.sidebar-hot-wrapper{display:block!important}
.mobile-hot{display:none!important}

/* 移动端：隐藏侧栏热榜，显示移动热榜 */
@media (max-width:768px){
  .sidebar-hot-wrapper{display:none!important}
  .mobile-hot{display:block!important}
}

/* -------------------- 响应式（通用） -------------------- */
@media (max-width:1024px){
  .detail-layout,.tag-layout{grid-template-columns:1fr}
  /* ← 删除 .sidebar-search-wrapper 和 .sidebar-tags-wrapper 的隐藏规则 */
  .main-content,.tag-main-content{padding:24px}
}

@media (max-width:768px){
  /* ===== 基础优化 ===== */
  h1{font-size:24px}
  .req-grid,.game-info{grid-template-columns:1fr}
  /* ✅ 768px 隐藏桌面侧栏的搜索和标签，但保留热榜容器 */
  .sidebar-search-wrapper,
  .sidebar-tags-wrapper{
    display:none!important;
  }
  
  /* ✅ 核心修复：所有容器宽度 100% */
  .game-wrap,.main-container{
    max-width:100%!important;
    width:100%!important;
    padding:0 8px!important;
    margin:16px auto 40px!important;
    box-sizing:border-box!important;
  }
  
  /* ✅ 主内容区宽度修复 */
  .main-content,.tag-main-content{
    max-width:100%!important;
    width:100%!important;
    padding:20px 12px!important;
    box-sizing:border-box!important;
  }
  
  /* ✅ 首页：热榜移到下方 + 与标签列表同时响应 */
  .home-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:20px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .home-main{order:1;width:100%;max-width:100%}
  .home-sidebar{
    order:2;
    width:100%!important;
    max-width:100%!important;
    transition:all 0.3s ease!important; /* ← 添加过渡动画 */
  }
  
  /* ✅ 详情页和标签页布局修复 */
  .detail-layout,.tag-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .sidebar-column{
    width:100%!important;
    max-width:100%!important;
    display:none!important; /* 移动端隐藏侧栏 */
  }
  
  /* ✅ 热榜组件：统一宽度修复（所有页面生效） */
  .hot-panel,.sidebar-hot-wrapper,.mobile-hot{
    max-width:100%!important;
    width:100%!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .hot-header{padding:10px 12px;flex-wrap:wrap}
  .hot-title{font-size:14px}
  .hot-tabs{gap:4px;flex-wrap:wrap}
  .hot-tab{padding:6px 8px;font-size:11px}
  .hot-list{padding:6px 4px}
  .hot-item{
    padding:6px;
    gap:6px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .hot-rank{min-width:16px;font-size:12px;flex-shrink:0}
  .hot-link{
    font-size:12px;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hot-heat{margin-left:auto;flex-shrink:0}
  .hot-icon{width:12px;height:12px}
  .hot-num{font-size:10px}
  .hot-meta{padding:6px 8px;font-size:11px}
  
  /* ✅ 游戏卡片布局修复 */
  .games-grid{
    column-count:1!important;
    column-gap:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .game-item{
    margin-bottom:16px;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .game-thumbnail{width:calc(100% - 16px)!important;margin:8px 8px 0!important;line-height:0!important}
  .game-thumbnail img,.game-thumbnail video{width:100%!important;height:auto!important;display:block!important;vertical-align:top!important}
  .game-content{padding:12px}
  .game-title{font-size:16px}
  .game-desc{font-size:13px}
  
  /* ✅ 搜索框优化 */
  .search-section{
    padding:24px 12px;
    margin-bottom:20px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .search-wrapper{
    width:100%;
    max-width:100%;
  }
  .search-section .search-input{
    width:100%;
    padding:14px 100px 14px 16px;
    font-size:14px;
    box-sizing:border-box;
  }
  .search-section .search-btn{
    padding:10px 18px;
    font-size:13px;
  }
  
  /* ✅ 侧栏搜索框（详情页/标签页的小搜索框） */
  .sidebar-search-wrapper,.sidebar-search{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .search-box{
    display:flex;
    gap:6px;
    width:100%;
  }
  .search-input{
    flex:1;
    min-width:0;
  }
  .search-btn{
    flex-shrink:0;
  }
  
  /* ✅ 首页标题优化 */
  .site-header{margin-bottom:24px}
  .site-title{font-size:26px}
  .site-tagline{font-size:13px}
  
  /* —— 面包屑：基础（桌面） —— */
  .breadcrumb{
    display:flex;               /* 保证分隔符与项对齐 */
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#666;
    line-height:1.5;
    margin-bottom:20px;
  }
  .breadcrumb a{color:#666;text-decoration:none;transition:color .2s}
  .breadcrumb a:hover{color:var(--primary)}
  .breadcrumb .sep{margin:0 8px;color:#999}

  /* —— ≤1024px：平板与手机都用单行可横向滚动 —— */
  @media (max-width:1024px){
    .breadcrumb{
      font-size:12px;
      margin:8px -8px 16px;     /* 负外边距+内边距，边到边更好点 */
      padding:0 8px;
      white-space:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch; /* 惯性滚动 */
      scrollbar-width:none;             /* Firefox 隐藏滚动条 */
    }
    .breadcrumb::-webkit-scrollbar{display:none}  /* WebKit 隐藏滚动条 */
    .breadcrumb .sep{margin:0 6px}
  }

  /* —— ≤480px：极窄屏可选“只保留首尾”精简模式（纯 CSS 版） —— */
  /* 这段会隐藏中间所有节点，只保留第一个和最后一个（以及它们之间的分隔符会被一并隐藏） */
  @media (max-width:480px){
    .breadcrumb > *:not(:first-child):not(:last-child){display:none}
    /* 给中间位置补一个省略号提示（在最后一项前显示） */
    .breadcrumb::before{
      content:"…";
      color:#999;
      margin-right:6px;
    }
  }

  
  /* ✅ 移动端标签云 */
  .mobile-tags-cloud{
    display:block!important;
    margin-top:24px;
    padding:20px 12px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid rgba(0,0,0,.06);
  }
  .mobile-tags-cloud h3{
    font-size:18px;
    font-weight:700;
    color:var(--text);
    margin-bottom:16px;
    text-align:center;
  }
  .mobile-tags-list{
    display:flex!important;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
  }
  .mobile-tag-chip{
    display:inline-block!important;
    padding:6px 12px;
    background:linear-gradient(135deg,rgba(27,40,56,.05) 0%,rgba(23,26,33,.05) 100%);
    border-radius:16px;
    text-decoration:none;
    color:var(--text);
    font-size:13px;
    transition:.2s;
    border:1px solid transparent;
  }
  .mobile-tag-chip:active{
    background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
    color:#fff;
    border-color:var(--primary);
  }
  .mobile-tag-count{font-size:11px;opacity:.7;margin-left:4px}
  
  /* ✅ 禁用桌面端 hover 动效 */
  .game-item:hover{
    transform:none!important;
    box-shadow:0 4px 12px rgba(0,0,0,.08)!important;
    border-color:rgba(27,40,56,.1)!important;
  }
  .game-item:hover .game-thumbnail img{
    transform:none!important;
    filter:none!important;
  }
  .game-item:hover .game-thumbnail::after{
    transform:translateX(-100%) translateY(-100%) rotate(-10deg)!important;
  }
  .game-item:hover .game-content{
    background:linear-gradient(#fff 0%,#fafbff 100%)!important;
  }
  .game-item:hover .game-title{
    color:#0f172a!important;
    transform:none!important;
  }
}

/* 桌面隐藏移动端标签云 */
@media (min-width:769px){.mobile-tags-cloud{display:none!important}}

/* -------------------- QR 居中 -------------------- */
.pc-qr-area{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.pc-qr-area img,.pc-qr-area canvas{display:block;margin:0 auto}
.code-box{display:flex;align-items:center;justify-content:center;gap:10px}

/* -------------------- Toast -------------------- */
.toast{visibility:hidden;min-width:250px;background:#323232;color:#fff;text-align:center;border-radius:10px;padding:16px 24px;position:fixed;z-index:999;left:50%;top:30%;transform:translateX(-50%);font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;transition:opacity .5s}
.toast.show{visibility:visible;opacity:1}

/* -------------------- 隐藏旧无用元素 -------------------- */
#searchBox,#hot-label-container,#load-more,#top-quick-links,#back-to-top{display:none!important}