/* ===== 通用 ===== */
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }

/* 主题变量（颜色可按需调整） */
:root{
  --txt-main: #e5e7eb;   /* 主文字浅灰 */
  --txt-sub:  #a1a1aa;   /* 次文字灰 */
  --acc:      #7c3aed;   /* 主紫 */
  --acc-2:    #a78bfa;   /* 次紫 */

}

/* ===== 顶部条 & 桌面菜单（保留你原布局）===== */
.navbar {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 75px;
  z-index: 2000;
  background: transparent;
}

/* 队徽与队名 */
.logo{
  display: -webkit-flex; display:flex;
  position: relative;
  -webkit-align-items:center; align-items:center;
  margin-right:auto; flex:0 0 auto;
  left:20px; top:8px; height:60px; width:100px;
}
.logo img{ height:3rem; width:auto; margin-right:.5rem; z-index:1000; }
.logo .site-title{ color:#fff; font-size:1.5rem; font-weight:bold; white-space:nowrap; z-index:1000; font-family: var(--ff-serif);}

/* 桌面主菜单 */
.menu{
  background-color: rgba(10,10,10,0.8);
  height: 6rem; z-index: 999; position: relative; top: -80px;
  display:-webkit-flex; display:flex; -webkit-justify-content:flex-end; justify-content:flex-end;
}
.menu ol{ list-style:none; padding:0; }
.menu > ol{
  padding:0 2rem; display:-webkit-flex; display:flex;
  -webkit-justify-content:flex-end; justify-content:flex-end; gap:1rem;
}
.menu > ol > .menu-item{
  -webkit-flex:0 1 auto; flex:0 1 auto;
  padding:.75rem 2rem; -webkit-justify-content:center; justify-content:center;
  min-width:9rem; height:5rem; display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center; text-align:center; position:relative;
}
.menu-item{ line-height:2.5rem; position:relative; }
.menu-item a{ display:block; color:#cecece; font-size:1.15rem; font-family: var(--ff-body); }
.menu-item :hover{ color:#929292; }

/* 桌面二级下拉 */
.sub-menu{
  position:absolute; width:100%; top:100%; left:0; display:none; z-index:1; white-space:nowrap;
}
.menu-item:hover > .sub-menu{ display:block; }

/* 箭头 */
.arrow{
  display:inline-block; width:0; height:0; margin-left:5px;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #929292;
  transition: transform .3s ease;
}
.menu-item:hover .arrow{ transform:rotate(180deg); }

/* 通用链接 */
a{ text-decoration:none; }

/* ===== 汉堡按钮（移动端显示） ===== */
.nav-toggle{
  display:none;                 /* 桌面隐藏 */
  position:absolute; top:1rem; right:1.5rem;
  width:44px; height:36px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  cursor:pointer; z-index:2000;
  align-items:center; justify-content:center; gap:5px;
}
/* JS 会给它加 .hidden 来隐藏 */
.nav-toggle.hidden{ display:none !important; }
/* 三条线 */
.nav-toggle .line,
.nav-toggle .line::before,
.nav-toggle .line::after{
  display:block; position:absolute;
  width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform .3s, top .3s, opacity .3s;
}
.nav-toggle .line{ top:50%; transform:translateY(-50%); }
.nav-toggle .line::before{ content:""; top:-8px; }
.nav-toggle .line::after { content:""; top: 8px; }

/* ===== 遮罩层 ===== */
.mobile-menu-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:1500;
}
.mobile-menu-overlay.open{ opacity:1; visibility:visible; }

/* ===== 右侧抽屉菜单 ===== */
.mobile-menu{
  position:fixed; right:0; height:100%;
  display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;
  -webkit-align-items:flex-start; align-items:flex-start;
  transform:translateX(100%); transition:transform .3s ease;

  background: rgba(20,20,25,0.95);
  width: clamp(260px, 78vw, 340px);
  padding: 18px 14px 28px;
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:-12px 0 32px rgba(0,0,0,.35);
  border-top-left-radius:14px; border-bottom-left-radius:14px;
}
.mobile-menu-overlay.open .mobile-menu{ transform:translateX(0); }

.mobile-menu ul{ list-style:none; padding:0; margin:0; }
.mobile-menu > ul > li + li{ margin-top:1.5rem; }
.mobile-menu .mobile-sub-menu li + li{ margin-top:0; }

.mobile-menu > ul > li.has-children{ position:relative; }
.mobile-menu > ul > li.has-children > a{ padding-right:1.5rem; }

/* 顶层项目 */
.mobile-menu > ul > li > a{
  display:-webkit-flex; display:flex; -webkit-justify-content:flex-start; justify-content:flex-start;
  -webkit-align-items:center; align-items:center;
  height:48px; padding:0 1.5rem;
  color:var(--txt-main); font-size:1.05rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition: background .2s, color .2s;
  font-family: var(--ff-body);
}
.mobile-menu > ul > li > a:hover{ background:rgba(255,255,255,0.06); color:#fff; }

/* 子菜单 */
.mobile-menu .mobile-sub-menu{
  background: rgba(255,255,255,0.03);
  overflow:hidden; transition:max-height .3s ease; max-height:0;
}
.mobile-menu .has-children.open > .mobile-sub-menu{ max-height:1000px; }

.mobile-menu .mobile-sub-menu li a{
  display:-webkit-flex; display:flex; justify-content:flex-start; align-items:center;
  height:40px; padding:0 1.5rem; color:var(--txt-sub); font-size:.95rem;
}
.mobile-menu .mobile-sub-menu li + li a{ border-top:1px solid rgba(255,255,255,0.05); }
.mobile-menu .mobile-sub-menu li a:hover{ color:#fff; background:rgba(255,255,255,0.05); }

/* 小箭头与关闭按钮 */
.mobile-menu .mobile-arrow{
  color:#a78bfa; position:absolute; top:1.5rem; right:1rem;
  transform:rotate(0deg); transition:transform .3s ease;
}
.mobile-menu .has-children.open > .mobile-arrow{ transform:rotate(90deg); }

.nav-close{
  position:absolute; top:1.2rem; right:1.2rem;
  font-size:1.6rem; color:#fff; background:none; border:none; cursor:pointer; opacity:.85;
}
.nav-close:hover{ opacity:1; }

/* ===== 响应式：移动端隐藏桌面导航，仅显示按钮 ===== */
@media (max-width: 1200px){
  .navbar{ background:none; height:0; overflow:visible; }
  .navbar .logo{ display:none; }
  .navbar .menu{ display:none; }

  /* 按钮固定在右上角 */
  .navbar .nav-toggle {
    display: flex;   /* 用 flex 才能保持里面的三条线居中 */
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 3000;
  }

  /* 移动端抽屉宽度（保留一份给 .navbar .mobile-menu 选择器以覆盖旧样式） */
  .navbar .mobile-menu{
    background: rgba(0,0,0,0.95);
    width:80%; max-width:320px;
    padding:1.5rem 1rem;
    box-shadow:4px 0 12px rgba(0,0,0,0.3);
  }
}

/* Safari 小修正 */
@supports (-webkit-appearance: none){
  .menu > ol > .menu-item{ min-width:8rem; }
  .logo{ margin-right:2rem; }
}

/* 主页通用 nav 样式会把 nav.mobile-menu 压成 48px，这里强制重置 */
header.navbar nav.mobile-menu{
  /* 尺寸与定位 */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: clamp(260px, 78vw, 340px) !important;
  box-sizing: border-box !important;

  /* 布局 */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  /* 外观 */
  background: rgba(20,20,25,0.95) !important;
  padding: 18px 14px 28px !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  box-shadow: -12px 0 32px rgba(0,0,0,.35) !important;

  /* 初始隐藏在右侧，等 overlay.open 再滑入 */
  transform: translateX(100%) !important;
  transition: transform .3s ease !important;
}

/* 打开时滑入 */
.mobile-menu-overlay.open nav.mobile-menu{
  transform: translateX(0) !important;
}