/* 主导航：五个主入口（带图标）+「更多」折叠菜单 + 头像账号按钮。
   本文件在 ui.css 之后加载，用来覆盖早期按文字链接写的头部样式。 */

/* ---- 主入口 ---- */
.header nav .nav-link{display:inline-flex;align-items:center;gap:7px;height:42px;margin:0;padding:0 12px;border:1.5px solid transparent;border-radius:11px;font-size:13.5px;font-weight:800;letter-spacing:.01em;color:var(--muted);white-space:nowrap}
/* fx.css 会给导航链接加装饰音符，新的图标入口不需要。 */
.header nav a.nav-link::before,.header nav .nav-more-toggle::before{content:none}
.header nav .nav-link .nav-icon{width:19px;height:19px;flex:none;color:currentColor;opacity:.72;transition:opacity .18s,color .18s}
.header nav .nav-link:hover{background:var(--soft);color:var(--ink)}
.header nav .nav-link:hover .nav-icon{opacity:1;color:var(--pick)}
.header nav .nav-link.active{background:var(--card);border-color:var(--edge);color:var(--ink);box-shadow:2px 2px 0 var(--shadow)}
.header nav .nav-link.active .nav-icon{opacity:1;color:var(--pick)}
.header nav .nav-link.active::after{content:none}

/* ---- 更多 ---- */
.header nav .nav-more{position:relative;display:flex;align-items:center}
.header nav .nav-more-toggle{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 11px;border:1.5px solid transparent;border-radius:11px;background:none;color:var(--muted);font:800 13.5px/1 var(--sans);white-space:nowrap;cursor:pointer}
.header nav .nav-more-toggle .nav-icon{width:19px;height:19px;flex:none;opacity:.72;transition:opacity .18s,color .18s}
.header nav .nav-more-toggle:hover{background:var(--soft);color:var(--ink)}
.header nav .nav-more-toggle:hover .nav-icon{opacity:1;color:var(--pick)}
.header nav .nav-more-toggle[aria-expanded="true"]{background:var(--card);border-color:var(--edge);color:var(--ink);box-shadow:2px 2px 0 var(--shadow)}
.header nav .nav-more-toggle[aria-expanded="true"] .nav-icon{opacity:1;color:var(--pick)}
.header nav .nav-more.is-active .nav-more-toggle:not([aria-expanded="true"]){background:var(--tint);border-color:var(--edge);color:var(--ink);box-shadow:2px 2px 0 var(--shadow)}
.header nav .nav-more.is-active .nav-more-toggle:not([aria-expanded="true"]) .nav-icon{opacity:1;color:var(--pick)}
.header nav .nav-more-dot{display:block;width:7px;height:7px;margin-left:-2px;border-radius:50%;background:var(--pick);box-shadow:0 0 0 2px var(--card)}
.header nav .nav-more-dot[hidden]{display:none}

.header nav .nav-more-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;display:none;grid-template-columns:1fr;gap:2px;min-width:224px;padding:10px;background:var(--card);border:2px solid var(--edge);border-radius:12px;box-shadow:5px 6px 0 var(--shadow)}
.header nav .nav-more[data-open="1"] .nav-more-menu{display:grid}
.header nav .nav-more-label{margin:2px 8px 6px;font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--muted)}
.header nav .nav-more-menu a{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:auto;min-height:0;margin:0;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.header nav .nav-more-menu a:hover{background:var(--soft);color:var(--ink);transform:none}
.header nav .nav-more-menu a.active{background:var(--tint);color:var(--pick);box-shadow:none}
.header nav .nav-more-menu a.active::after{content:none}
.header nav .nav-more-menu a[hidden]{display:none}

/* ---- 账号头像 ---- */
.header .auth-link{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.header .auth-link .auth-face{display:none;width:34px;height:34px;place-items:center;border:1.5px solid var(--edge);border-radius:50%;overflow:hidden;background:var(--tint)}
.header .auth-link .auth-avatar{display:block;width:100%;height:100%;object-fit:cover}
.header .auth-link .auth-initial{display:grid;place-items:center;width:100%;height:100%;color:var(--ink);font-size:14px;font-weight:900}
.header .auth-link .auth-label{white-space:nowrap}
.header .auth-face [hidden]{display:none}
.header .auth-link.is-user{padding:0;border-color:transparent;background:none;box-shadow:none;border-radius:999px}
.header .auth-link.is-user .auth-face{display:grid;width:44px;height:44px;border:1.5px solid var(--edge);box-shadow:2px 2px 0 var(--shadow);transition:box-shadow .18s,transform .18s}
.header .auth-link.is-user .auth-label{display:none}
.header .auth-link.is-user:hover{border-color:transparent;background:none;color:var(--ink);transform:none}
.header .auth-link.is-user:hover .auth-face{transform:translate(-1px,-2px);box-shadow:3px 4px 0 var(--shadow)}
.header .auth-link.is-user:focus-visible{outline:none}
.header .auth-link.is-user:focus-visible .auth-face{outline:3px solid var(--pick);outline-offset:3px}

/* 桌面：导航是 82px 高的横条，链接要跟着其它控件一起垂直居中。 */
@media(min-width:1201px){
  .header nav{gap:4px;align-items:center}
  .header nav .nav-link,.header nav .nav-more-toggle{align-self:center;margin-block:0}
  .header nav .nav-more{align-self:center}
}

/* ---- 折叠成抽屉（与 ui.css 的 ≤1200 断点一致） ---- */
@media(max-width:1200px){
  .header .header-inner{gap:10px}
  .header .auth-link{order:2;margin-left:auto}
  .header .theme-toggle{order:3}
  .header .menu-button{order:4;margin-left:0}
  /* 抽屉比一屏还高时可滚动，避免小屏上看不到最后的链接 */
  .header nav{max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  .header nav .nav-link,.header nav .nav-more-toggle{flex-direction:column;justify-content:center;gap:4px;height:auto;min-height:68px;padding:10px 4px;font-size:12.5px;line-height:1.2;text-align:center}
  .header nav .nav-link .nav-icon,.header nav .nav-more-toggle .nav-icon{width:24px;height:24px}
  .header nav .nav-link.active{box-shadow:none}
  .header nav .nav-more{display:block;grid-column:1/-1;margin-top:8px;padding-top:10px;border-top:1.5px dashed var(--line)}
  .header nav .nav-more-toggle{display:none}
  .header nav .nav-more-menu{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;padding:0;background:none;border:0;box-shadow:none}
  .header nav .nav-more-label{grid-column:1/-1;margin:0 2px 2px}
  .header nav .nav-more-menu a{justify-content:center;padding:9px 6px;border:1px solid var(--line);background:var(--tint);font-size:12.5px}
}
@media(max-width:700px){
  .header .auth-link.is-user .auth-face{width:40px;height:40px}
  .header nav .nav-link,.header nav .nav-more-toggle{font-size:12px;min-height:64px}
}
@media(max-width:480px){
  .header nav .nav-more-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 成就达成提示：从顶部滑下来，几秒后收起；点一下打开成就页。 */
.ach-pop{position:fixed;top:84px;left:50%;z-index:90;display:flex;align-items:center;gap:14px;min-width:min(340px,calc(100vw - 32px));max-width:calc(100vw - 32px);padding:12px 22px 12px 14px;border:2px solid #f2c84b;border-radius:14px;background:linear-gradient(100deg,#1d2440f2,#2c2550f2);color:#fdf6dd;text-decoration:none;box-shadow:0 10px 30px #0006,inset 0 0 0 1px #fff2;translate:-50% -24px;opacity:0;transition:opacity .35s,translate .35s cubic-bezier(.2,.9,.3,1.2)}
.ach-pop.is-in{opacity:1;translate:-50% 0}
.derby-pop .ach-pop-copy b{white-space:normal;font-size:16px}
.ach-pop-medal{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;font-size:24px;background:radial-gradient(circle at 35% 30%,#fff8,transparent 55%),var(--m,#d9a672);box-shadow:0 0 18px #f2c84b88}
.ach-pop-medal.s2{--m:#c4cfdc}.ach-pop-medal.s3{--m:#f2c84b}
.ach-pop-copy{display:grid;line-height:1.35;min-width:0}
.ach-pop-copy small{font-size:11px;font-weight:800;letter-spacing:.08em;color:#f2c84b}
.ach-pop-copy b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-pop-copy i{font-style:normal;color:#f2c84b;font-size:13px;letter-spacing:1px}
.ach-pop-copy em{font-style:normal;font-size:11px;color:#c9c6e0}
@media(prefers-reduced-motion:reduce){.ach-pop{transition:opacity .2s}}