/* =========================================================
   TOPBAR FUSION — 导航栏与主视觉大图融为一体
   引用顺序须在 styles.css / styles2.css / styles3.css / hero.css 之后

   思路：
     1) 导航栏改为 fixed 悬浮，初始完全透明并叠在 hero 大图上，
        视觉上"导航就长在图上"，与图片是一体的；
     2) 页面向下滚动后追加 .scrolled，恢复深色毛玻璃 + 描边，
        保证脱离大图后文字依旧清晰可读；
     3) hero 向上延伸到视口顶部（补足导航高度），使图片本身
        就铺满导航区域，不留任何空白色带。
   ========================================================= */

:root{
  --topbar-h: 64px;
}

/* ---------- 1. 悬浮透明导航 ---------- */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:900;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .34s ease, backdrop-filter .34s ease,
             border-color .34s ease, box-shadow .34s ease;
}

/* 顶部一层自上而下的淡黑渐变：让白色文字在亮部图片上也能看清，
   同时不会像纯色条那样把导航从图片里"切"出来 */
.topbar::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:calc(var(--topbar-h) + 46px);
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(180deg,rgba(10,13,17,.62) 0%,rgba(10,13,17,.26) 55%,transparent 100%);
  transition:opacity .34s ease;
}

/* ---------- 2. 滚动后恢复实心导航 ---------- */
.topbar.scrolled{
  background:rgba(18,21,26,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.26);
}
.topbar.scrolled::before{opacity:0}

/* 透明态下把内部控件也调得更"轻"，减少色块感 */
.topbar:not(.scrolled) .main-tabs{
  background:rgba(14,17,21,.34);
  border-color:rgba(255,255,255,.1);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.topbar:not(.scrolled) .mtab:not(.active){color:rgba(236,239,243,.9)}
.topbar:not(.scrolled) .mtab:not(.active):hover{background:rgba(255,255,255,.11)}
.topbar:not(.scrolled) .user-chip{
  background:rgba(14,17,21,.34);
  border-color:rgba(255,255,255,.1);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.topbar:not(.scrolled) .user-chip:hover{background:rgba(20,24,29,.6)}
.topbar:not(.scrolled) .brand-text span{color:rgba(214,219,226,.76)}
.topbar:not(.scrolled) .brand-text strong{text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* 进度条跟随悬浮导航，避免被大图盖住 */
.topbar-progress{
  position:fixed;
  top:var(--topbar-h);
  left:0;right:0;
  z-index:901;
  pointer-events:none;
}

/* ---------- 3. hero 上移到视口顶部，与导航共用同一张图 ---------- */
/* 导航已脱离文档流，主体需要补回被占据的高度 */
.app{padding-top:calc(26px + var(--topbar-h))}

.hero.cinematic{
  /* 负外边距抵消 .app 的上内边距，让大图真正顶到浏览器顶端 */
  margin-top:calc(-26px - var(--topbar-h));
  /* 内容整体下压半个导航高度，避免标题与导航挤在一起 */
  padding-top:var(--topbar-h);
  min-height:clamp(520px,82vh,860px);
}

/* 压暗层顶部略微加深，与导航渐变自然接续 */
.hero.cinematic .hero-veil{
  background:linear-gradient(180deg,rgba(14,17,22,.64) 0%,rgba(14,17,22,.24) 30%,
             rgba(14,17,22,.20) 54%,rgba(14,17,22,.78) 100%);
}

/* 右上角日期避让导航 */
.hero.cinematic .hero-date{top:calc(var(--topbar-h) + 12px)}

/* 非通栏大图的视图（提交战绩等）不需要顶到顶部 */
.view:not(#view-board) .hero{margin-top:0;padding-top:0}

/* ---------- 4. 响应式 ---------- */
@media (max-width:1180px){
  :root{--topbar-h:64px}
}
@media (max-width:900px){
  /* 窄屏导航换行后高度不固定，改用自动高度并关闭负边距叠压，
     防止导航压住标题导致无法阅读 */
  :root{--topbar-h:104px}
  .hero.cinematic .hero-date{top:calc(var(--topbar-h) + 8px)}
}
@media (max-width:560px){
  :root{--topbar-h:112px}
  .topbar::before{height:calc(var(--topbar-h) + 30px)}
}

/* ---------- 5. 降低动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .topbar,.topbar::before{transition:none}
}