/* 全站顶部导航。首页和私服介绍页共用，所以独立成文件，不依赖各自的设计变量。
   刻意不用 position:fixed —— 右上角已经被语言胶囊占着，固定条会打架；
   放在内容流最上方居中，既显眼又不遮挡。 */

.topnav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 0 auto 34px;
  /* 右侧留出语言胶囊的宽度，窄屏时才不会重叠 */
  padding: 0 96px 0 0;
}

.topnav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  overflow-x: auto;
  /* 横向能滚但不显示滚动条：窄屏放不下时可以滑，视觉上仍是一条干净的胶囊 */
  scrollbar-width: none;
}
.topnav-inner::-webkit-scrollbar { display: none; }

.topnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  color: rgba(235, 235, 245, 0.68);
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.topnav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }

/* 当前所在页面：不可点，用底色标出 */
.topnav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  cursor: default;
}

@media (max-width: 640px) {
  .topnav { padding-right: 0; margin-bottom: 26px; justify-content: flex-start; }
  .topnav a { padding: 7px 12px; font-size: 12.5px; }
  /* 窄屏语言胶囊在最上层，导航整体下移一点避开它 */
  .topnav-inner { margin-top: 40px; }
}