/* ============================================================
   通用样式 common.css
   作用：基础 reset、全局变量、顶部导航（Header）、页脚（Footer）
   适用：全站各页面共用
   ============================================================ */

/* ---------- 基础 reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- 全局变量 ---------- */
:root {
  --primary: #0055dd;      /* 品牌主色 */
  --nav-height: 100px;     /* 导航栏高度 */
  --nav-padding: 44px;     /* 导航左右内边距 */
  --footer-bg: #0a0e1a;    /* 页脚底色（与版块一致，浮在纯黑页面上） */
  --page-bg: #000;          /* 网页背景色改为纯黑 */
  --content-width: 1600px; /* 主体内容最大宽度；导航与 banner 不限宽 */
}

/* ---------- 页面基底 ---------- */
html, body {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
  background: var(--page-bg);
  color: #ffffff;
}

/* ============ Header 顶部导航 ============ */
/* 固定导航栏：顶部默认常显；向下滚动隐藏、向上滚动浮起显示 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 100;
  background: transparent;                       /* 默认无背景：顶部时内容从菜单下透出 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: transform 0.35s ease, background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

/* 向下滚动时收起隐藏（不浮起） */
.nav.nav--hidden {
  transform: translateY(-100%);
}

/* 回到页面顶部：固定菜单透明（与默认一致） */
.nav.nav--top {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* 滚动离开顶部后：菜单加半透明背景（毛玻璃），便于文字在内容上可读 */
.nav.nav--scrolled {
  background: rgba(10, 14, 26, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* 左上角 Logo：品牌图片 */
.nav .logo {
  position: absolute;
  left: var(--nav-padding);
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
}

/* Logo 图片：尺寸统一在 CSS 管理，HTML 不写死 width/height */
.nav .logo img {
  display: block;
  width: 161px;
  height: 80px;
  object-fit: contain;
}

/* 居中主菜单：用 transform 实现真正水平居中 */
.nav .menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 50px;
  list-style: none;
}

/* 菜单链接基础样式 */
.nav .menu li a {
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 6px 0;
  position: relative;
  transition: color 0.25s ease;
}

/* 默认隐藏的下划线：从左向右滑出（transform-origin:left，scaleX 0→1） */
.nav .menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

/* 悬停：文字变品牌色 + 下划线从左向右滑出 */
.nav .menu li a:hover {
  color: var(--primary);
}
.nav .menu li a:hover::after {
  transform: scaleX(1);
}

/* 激活项：文字品牌色 + 横线常显 2px（与文字同宽） */
.nav .menu li a.active {
  font-weight: 600;
  color: var(--primary);
}
.nav .menu li a.active::after {
  transform: scaleX(1);
}

/* 右上角语言选择框（毛玻璃质感） */
.nav .lang {
  position: absolute;
  right: var(--nav-padding);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease;
  user-select: none;
}

.nav .lang:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nav .lang img {
  flex-shrink: 0;
}

.nav .lang .globe {
  width: 18px;
  height: 18px;
}

.nav .lang .arrow {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.nav .lang.open .arrow {
  transform: rotate(180deg);
}

/* 下拉面板 */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  background: rgba(18, 22, 36, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 6px;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 200;
}

.nav .lang.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu li {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}

.lang-menu li a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.lang-menu li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lang-menu li.active {
  color: var(--primary);
  font-weight: 600;
}

/* ============================================================
   Footer 页脚 — 1:1 照抄腾讯官网布局（深色主题映射）
   结构：面包屑栏 → 主区(Logo+社交 + 4×2分类网格, 左下留空) → 底栏(语言+版权+法律)
   颜色映射：腾讯白底#fff → 本站 var(--footer-bg)；文字#000 → #fff；#64676a → rgba(255,255,255,.45/.6/.7)；#d9d9d9 → rgba(255,255,255,.12/.25)
   主色：腾讯 #0052d9 → 本站 var(--primary) #0055dd
   ============================================================ */

/* ---- Footer container（对齐腾讯 .container-fluid） ---- */
.footer-container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-inline: 0;
}

/* ---- Footer 通栏整屏（固定占满一屏，不依赖菜单内容撑高） ---- */
#site-footer {
  position: relative;
  min-height: 100vh;
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  background: var(--footer-bg);
  overflow: hidden;
}

/* ---- 1) 面包屑栏（对齐 #footer-breadcrumbs） ---- */
#footer-breadcrumbs {
  background-color: transparent;
}
#footer-breadcrumbs .footer-container {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 32px 0;
}
#footer-breadcrumbs p#breadcrumbs {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
#footer-breadcrumbs p#breadcrumbs span {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
#footer-breadcrumbs p#breadcrumbs a {
  color: #fff;
  position: relative;
}
#footer-breadcrumbs p#breadcrumbs a:hover { color: var(--primary); }
#footer-breadcrumbs .breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 16px;
  color: var(--primary);
  flex-shrink: 0;
}
#footer-breadcrumbs .breadcrumb-separator svg { display: block; }
#footer-breadcrumbs .breadcrumb_last {
  color: rgba(255, 255, 255, 0.6);
}

/* ---- 2) 主区（对齐 #footer-widgets） ---- */
#footer-widgets {
  background-color: transparent;
  flex: 1;
  font-size: 16px;
  letter-spacing: .25px;
  line-height: 24px;
}
#footer-widgets .footer-container {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 64px 0 0;
}
/* 统一去掉 footer 链接默认下划线 */
#footer-breadcrumbs a,
#footer-widgets a,
footer#footer a { text-decoration: none; }

/* 网格：左列 Logo+社交，右列导航链接（动态，与顶部菜单一致） */
.footer-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px 40px;
}
.footer-widget-area-1 { grid-column: 1; grid-row: 1; }
.footer-nav-area { grid-column: 2; grid-row: 1; }
.footer-widget-area.footer-nav-area .menu {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 16px 56px;
  margin: 0;
  padding: 0;
}
.footer-widget-area.footer-nav-area .menu-item { margin-bottom: 0; }
.footer-nav-area .menu-item.active a { color: var(--primary); }
/* 底部菜单不含首页：若模板条件未生效，用 CSS 兜底隐藏首页链接所在的 li */
.footer-nav-area .menu-item:has(a[href="/"]) { display: none; }
/* 子栏目（后台「导航管理」中挂在顶级项下的二级菜单，动态展开） */
.footer-nav-area .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav-area .nav-parent:has(.sub-menu li) .sub-menu { margin-top: 10px; }
.footer-nav-area .sub-menu .menu-item {
  margin-bottom: 8px;
  font-size: 14px;
}
.footer-nav-area .sub-menu .menu-item:last-child { margin-bottom: 0; }
.footer-nav-area .sub-menu .menu-item a { color: rgba(255, 255, 255, 0.65); }
.footer-nav-area .sub-menu .menu-item a:hover { color: var(--primary); }
.footer-nav-area .sub-menu .menu-item.active a { color: var(--primary); }
/* 一级目录（父级）仅作标题，不做超链 */
.footer-nav-area .nav-parent .nav-parent-name {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  cursor: default;
}
.footer-nav-area .nav-parent .nav-parent-name.active { color: var(--primary); }

/* Logo（对齐 .footer-logo：margin-bottom 64px / max-width 192px） */
.footer-logo { margin-bottom: 64px; max-width: 192px; }
.footer-logo a { display: block; }
.footer-logo a::after { display: none; }
.footer-logo img {
  height: 80px;
  width: 161px;
  object-fit: contain;
  display: block;
}

/* 社交图标（对齐 .footer-social-icons：44px 圆描边，hover 填充主色） */
.footer-social-icons { display: flex; margin: 0; padding: 0; }
.footer-social-icons li { list-style: none; margin-right: 14px; }
.footer-social-icons li a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  height: 44px;
  width: 44px;
  justify-content: center;
  transition: all .3s ease-out;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}
.footer-social-icons li a::after { display: none; }
.footer-social-icons li a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.social-icon-img { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.social-icon-img svg { width: 20px; height: 20px; display: block; }

/* 微信二维码弹层 */
.footer-social-icons li a.wechat-btn { position: relative; z-index: 3; }
.footer-social-icons .wechat-code {
  display: none;
  position: absolute;
  left: 0;
  top: -186px;
  width: 180px;
  max-width: 180px;
  pointer-events: none;
  z-index: 2;
}
.footer-social-icons li a.wechat-btn:hover .wechat-code { display: block; }

/* 分类菜单（对齐 .menu：margin 0 0 64px） */
.footer-widget-area .menu {
  display: block;
  margin: 0 0 64px;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.footer-widget-area .menu-item {
  display: block;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  margin-bottom: 10px;
}
.footer-widget-area .menu-item:last-child { margin-bottom: 0; }

/* 列标题（对齐 .navigation-header：字重 600 + 下方 1px 分隔线） */
.footer-widget-area .menu-item.navigation-header {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 1px;
  position: relative;
  display: block;
  padding: 16px 0;
}
.footer-widget-area .menu-item.navigation-header::after { display: none; }  /* 标题不加 hover 下划线 */
/* 最后一列（对齐 .footer-accordion-last） */
.footer-accordion-last .menu .menu-item.navigation-header { margin-bottom: 0; }

/* 链接 hover 下划线滑入（对齐腾讯 scaleX 动画） */
.footer-widget-area a {
  color: rgba(255, 255, 255, 0.7);
  padding: 0;
  position: relative;
}
.footer-widget-area a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform .25s ease-in-out;
  transition-delay: .15s;
}
.footer-widget-area a:hover { color: var(--primary); }
.footer-widget-area a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
  transition-delay: .15s;
}

/* ---- 3) 底栏（对齐 footer#footer：语言 25% + 版权法律 75%） ---- */
footer#footer {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  letter-spacing: .25px;
  line-height: 28.8px;
}
footer#footer .footer-container {
  padding: 0 0 44px;
}
.footer-bottom-row {
  display: flex;
  align-items: center;
}

/* 语言切换（对齐 Tencent .footer-language：25%宽，居左，margin-top 32px） */
.footer-language {
  flex: 0 0 25%;
  font-size: 16px;
  text-align: left;
  margin-top: 32px;
  margin-bottom: 32px;
}
.footer-switcher ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  gap: 12px;
}
.footer-switcher ul li a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
.footer-switcher ul li.active a {
  color: var(--primary);
  border-bottom: 1px solid var(--primary);
  padding-bottom: 2px;
}
.footer-switcher ul li.active a::after { display: none; }
.footer-switcher ul li a:hover { color: var(--primary); }

/* 版权 + 法律链接（75%宽） */
.footer-legal { flex: 1; }
.footer-copyright p {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  display: block;
  line-height: 18px;
  margin-top: 12px;
  padding-top: 12px;
}
.footer-privacy .menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-privacy .menu-item {
  line-height: 18px;
  padding: 0 10px;
  position: relative;
}
.footer-privacy .menu-item::after {
  content: "|";
  left: 0;
  position: absolute;
  top: 0;
  color: rgba(255, 255, 255, 0.3);
}
.footer-privacy .menu-item:first-child::after { display: none; }
.footer-privacy .menu-item:first-child { padding-left: 0; }
.footer-privacy .menu-item:last-child { padding-right: 0; }
.footer-privacy .menu-item a {
  color: rgba(255, 255, 255, 0.45);
  position: relative;
  text-decoration: none;
}
.footer-privacy .menu-item a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform .25s ease-in-out;
  transition-delay: .15s;
}
.footer-privacy .menu-item a:hover { color: var(--primary); }
.footer-privacy .menu-item a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
  transition-delay: .15s;
}

/* ============ 全局文字超链接 hover 下划线（腾讯风格：从左向右滑出） ============ */
/* 所有带超链接的文字：默认无下划线，hover 时品牌色下划线从左向右滑出。
   导航菜单与页脚链接已有各自专属下划线（更高优先级），此处补全其余文字链接。 */
a {
  position: relative;
  text-decoration: none;
}
a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
a:hover::after {
  transform: scaleX(1);
}
/* 不需要下划线的链接：Logo、社交图标、整块卡片 */
.nav .logo::after,
.nav .lang::after,
.footer-logo a::after,
.footer-social-icons li a::after,
.game-card::after,
.card::after,
/* 图片超链：包裹 <img> 的链接（含图片型 Logo）不做下划线 */
a:has(img)::after,
/* 按钮型超链：胶囊按钮 / 微信按钮 / 通用 .btn 不做下划线 */
.about-video-btn::after,
.wechat-btn::after,
.btn::after,
a.button::after {
  display: none;
}

/* ---- Footer 响应式（对齐腾讯 col-md-4=3列 / col-12=堆叠） ---- */
@media (max-width: 992px) {
  #site-footer { min-height: calc(100vh - 88px); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-widget-area-1 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .footer-nav-area { grid-column: 1; grid-row: 2; }
  .footer-nav-area .menu { grid-template-columns: repeat(3, max-content); }
  .footer-logo { margin-bottom: 48px; }
  .footer-logo img { height: 27px; width: 200px; }
  .footer-container { padding-inline: 0; }
  #footer-widgets .footer-container { padding-top: 32px; }
  footer#footer .footer-container { padding: 0 0 32px; }
  #footer-breadcrumbs .footer-container { padding: 16px 0; }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-nav-area .menu { grid-template-columns: repeat(2, max-content); }
  .footer-logo img { height: 24px; width: 160px; }
  .footer-social-icons li a { height: 32px; width: 32px; }
  .footer-widget-area .menu { margin-bottom: 0; }
  .footer-bottom-row { flex-direction: column; }
  .footer-language { flex: none; text-align: left; margin-top: 24px; }
  .footer-switcher ul { justify-content: flex-start; }
  .footer-legal { margin-top: 0; flex: none; width: 100%; }
  .footer-container { padding-inline: 0; }
  #footer-widgets .footer-container { padding: 32px 0 0; }
  footer#footer .footer-container { padding: 0 0 32px; }
  #footer-breadcrumbs .footer-container { padding: 16px 0; }
}