/* ============================================================
   KRONOS ZHOU · 全局顶栏样式（站点级导航 · Cosmic 版）
   路径：shared/site-header.css
   ------------------------------------------------------------
   和 main-page.css 里那套 .site-header（胶囊 + 玻璃）保持同一设计语言：
   只是这份是**自包含**的 ——
     顶栏自己带一套 --kz-* 变量，不读宿主页面的主题变量，
     所以可以安全地塞进自带配色方案的子页面（工具页 / 游戏页 /
     Electron 子应用），顶栏照样是全站统一的深色玻璃胶囊。

   改配色只改下面 --kz-* 那几行；两套顶栏样式要一起改，
   否则引 main-page.css 的页面和引本文件的页面会长得不一样。

   用法（子页面，注意相对路径）：
     <link rel="stylesheet" href="../../shared/site-header.css">
     ...
     <header class="site-header" id="siteHeader">
       <div class="site-header-inner">
         <nav class="site-header-nav site-header-nav-left">…</nav>
         <div class="site-header-center">
           <a class="site-title" href="../../main-page.html" id="siteTitle">…</a>
         </div>
         <nav class="site-header-nav site-header-nav-right">
           … <span class="nav-link auth-status" id="authStatus" style="cursor:pointer;"></span>
         </nav>
       </div>
     </header>
     <script src="../../shared/site-header.js"></script>
   ============================================================ */

/* ============================================================
   顶栏外壳：浮在页面顶部居中
   ============================================================ */
.site-header {
  /* ---------- 顶栏局部变量（唯一配色来源） ---------- */
  --kz-bg: 0 0% 4%;
  --kz-surface: 0 0% 8%;
  --kz-stroke: 0 0% 12%;
  --kz-text-primary: #f5f5f5;
  --kz-text-secondary: #8a8a8a;
  --kz-text-muted: #878787;
  --kz-accent: #4e85bf;
  --kz-accent-light: #89aacc;
  --kz-accent-soft: rgba(78, 133, 191, 0.15);
  --kz-accent-glow: rgba(78, 133, 191, 0.35);
  --kz-border-soft: rgba(255, 255, 255, 0.1);
  --kz-radius-lg: 999px;
  --kz-shadow-panel: 0 8px 26px -10px rgba(0, 0, 0, 0.75);
  --kz-font-main: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 1rem 1rem 0;
  font-family: var(--kz-font-main);
  text-align: left;
  /* 外壳不挡点击，只有胶囊本身接收事件 */
  pointer-events: none;
}

.site-header *,
.site-header *::before,
.site-header *::after {
  box-sizing: border-box;
}

/* ============================================================
   顶栏内层：一条玻璃胶囊（不再"悬停展开"）
   ============================================================ */
.site-header-inner {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 58px;
  padding: 0.5rem;
  background: hsl(var(--kz-surface) / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--kz-border-soft);
  border-radius: 999px;
  box-shadow: none;
  overflow: visible;
  transition: box-shadow 0.32s ease, background 0.32s ease, border-color 0.32s ease;
}

/* 滚过 100px 才压阴影（shared/cosmic-motion.js 加减 .is-scrolled） */
.site-header.is-scrolled .site-header-inner,
.site-header:focus-within .site-header-inner {
  box-shadow: var(--kz-shadow-panel);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ============================================================
   中央标题 = logo：渐变圆环 + 里面的斜体字标
   ============================================================ */
.site-header-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  order: 0;
}

.site-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  padding: 2px;
  font-family: 'Instrument Serif', 'Songti SC', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  color: #fff;
  background-image: linear-gradient(90deg, var(--kz-accent-light), var(--kz-accent));
  -webkit-text-fill-color: currentColor;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
}

.site-title::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: hsl(var(--kz-bg));
  z-index: 0;
}

.site-title > .site-title-text {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.site-title:hover {
  transform: scale(1.1);
  background-image: linear-gradient(270deg, var(--kz-accent-light), var(--kz-accent));
}

/* ============================================================
   左右导航
   ============================================================ */
.site-header-nav {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.nav-divider {
  width: 1px;
  height: 1.25rem;
  background: hsl(var(--kz-stroke));
  margin: 0 0.25rem;
  flex: 0 0 auto;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--kz-text-secondary);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s ease, background 0.22s ease;
}

/* 老版是下划线划动，cosmic 版改成胶囊底色 */
.nav-link::after {
  display: none;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--kz-text-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* 当前页 */
.nav-link.is-active {
  color: var(--kz-text-primary);
  background: hsl(var(--kz-surface));
  box-shadow: inset 0 0 0 1px hsl(var(--kz-stroke));
}

/* ============================================================
   登录状态
   ============================================================ */
.auth-status {
  color: var(--kz-accent-light);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}

.auth-status:hover {
  color: var(--kz-text-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   键盘焦点 / 悬停顶栏：不再改高度，只把阴影压出来
   ============================================================ */
.site-header.keyboard-open .site-header-inner {
  box-shadow: var(--kz-shadow-panel);
  background: hsl(var(--kz-surface) / 0.96);
}

/* ============================================================
   响应式
   ------------------------------------------------------------
   窄屏（≤900px）长什么样**不写在这里**：那是 .mobile-logo + 汉堡按钮
   + 下拉菜单，统一在 shared/site-header-mobile.css，由 site-header.js
   自动挂上（这样引 main-page.css 的页面也能共用同一套窄屏形态）。
   ============================================================ */
@media (max-width: 900px) {
  .site-header {
    padding: 0.6rem 1rem 0;
  }

  .site-header-inner {
    width: 100%;
    max-width: 640px;
    justify-content: space-between;
  }

  /* 左右导航收起，交给窄屏下拉菜单 */
  .site-header-nav,
  .nav-divider {
    display: none;
  }

  .site-header-center {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .site-title {
    width: auto;
    height: auto;
    padding: 0.3rem 0;
    border-radius: 0;
    background: none;
    background-image: none;
    font-family: var(--kz-font-main);
    font-style: normal;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--kz-text-primary);
    -webkit-text-fill-color: currentColor;
  }

  .site-title::before {
    display: none;
  }

  .site-title:hover {
    transform: none;
    background-image: none;
  }
}