/* Shared web header: the language control occupies the same physical right slot. */
.wt-header { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:24px 0; display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:20px; direction:ltr; }
.wt-header .topbar-actions { display:contents; }
.wt-header .brand { grid-column:1; display:flex; align-items:center; gap:10px; margin:0; min-width:0; overflow:hidden; color:var(--text); font-family:"Noto Serif SC","Songti SC",Georgia,serif; font-size:17px; font-weight:900; text-decoration:none; white-space:nowrap; }
.wt-header .brand > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.wt-header .brand :is(.mark,.logo) { flex:none; }
.wt-header nav { grid-column:2; display:flex; align-items:center; gap:12px; margin:0; padding:0; width:auto; }
.wt-header nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; white-space:nowrap; text-decoration:none; }
.wt-header .header-link { display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap; }
.wt-header .header-link:hover { color:var(--accent); }
.wt-header .header-link .invite-short { display:none; }
/* 拆成并列选择器(而非 :is(...)):含 ID 的 :is() 会取到 ID 特异性,使移动端覆盖失效。 */
.wt-header .account-pill,
.wt-header #accountLink { grid-column:3; justify-self:end; margin:0; min-height:44px; width:auto; max-width:150px; display:inline-flex; align-items:center; justify-content:center; gap:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ADR-0099:登录后显示邮箱缩写 + 中性双字母头像;未登录显示「登录 / Sign in」;不写完整邮箱。 */
/* ADR-0102:账号入口是「图标 + 文字」链接,不是按钮(hover 只变色,不加边框/底色)。 */
.wt-header .account-pill { padding:6px 2px; border:0; background:transparent; border-radius:0; color:var(--text); font-size:14px; font-weight:600; line-height:1.2; }
.wt-header .account-pill:hover { color:var(--accent); }
.wt-header .account-avatar { display:inline-flex; flex:none; align-items:center; justify-content:center; width:20px; height:20px; font-size:10px; font-weight:700; letter-spacing:.02em; line-height:1; }
/* 未登录:人形图标,取当前文字色。 */
.wt-header .account-pill:not([data-account]) .account-avatar { background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 19.5c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E") center/16px 16px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 19.5c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E") center/16px 16px no-repeat; }
/* 登录后:首字母圆标(唯一保留的小圆,用作头像)。 */
.wt-header .account-pill[data-account] .account-avatar { width:22px; height:22px; border-radius:50%; background:var(--soft,#EFEFEA); color:var(--text,#22303F); border:1px solid var(--line,#E4E5DE); }
.wt-header.player-header .account-pill[data-account] .account-avatar { background:var(--control);color:var(--text); }
.wt-header .account-when-in { display:none; min-width:0; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wt-header .account-when-out { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wt-header .account-pill[data-account] .account-when-in { display:inline; }
.wt-header .account-pill[data-account] .account-when-out { display:none; }
/* ADR-0102:自绘 chevron(避免各浏览器原生箭头宽度不同);宽度由 core/locale-control.js 按当前选项贴合。 */
.wt-header :is(#locale,#uiLocale) { grid-column:4; grid-row:1; width:auto; min-height:44px; max-width:150px; margin:0 4px 0 0; -webkit-appearance:none; appearance:none; padding:8px 26px 8px 6px; color:var(--muted); background-color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6672' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:12px; border:1px solid transparent; border-radius:6px; font:inherit; font-size:14px; cursor:pointer; box-shadow:none; }
.wt-header :is(#locale,#uiLocale):hover { background-color:var(--surface,var(--control)); }
.wt-header :is(#locale,#uiLocale):focus { outline:none; }
.wt-header :is(#locale,#uiLocale):focus-visible:not([data-pointer-focus]) { outline:2px solid var(--muted); outline-offset:2px; }
.wt-header :is(#locale,#uiLocale) option { color:var(--text); background:var(--surface,var(--panel)); }
.wt-header.player-header :is(#locale,#uiLocale) { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A9B0B9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media(max-width:760px) {
  /* ADR-0102:移动端空间不够时去掉品牌文字只留图标,让导航/账号/语言挤进同一行;放不下自然换行。 */
  .wt-header { display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:calc(100% - 24px); padding:14px 0; }
  .wt-header .brand { flex:0 0 auto; gap:0; min-width:44px;min-height:44px;justify-content:center;font-size:15px; }
  .wt-header .brand > span { display:none; } /* 只留图标 */
  .wt-header .header-link .invite-full { display:none; }
  .wt-header .header-link .invite-short { display:inline; }
  .wt-header .brand :is(.mark,.logo) { width:28px; height:28px; flex:none; }
  /* 覆盖 site.css 的 `nav{order:2;width:100%}`,让导航留在第一行(放不下才换行)。 */
  .wt-header nav { order:0; width:auto; flex:0 1 auto; flex-wrap:wrap; gap:10px; justify-content:flex-start; font-size:13px; }
  .wt-header :is(#locale,#uiLocale) { width:auto; max-width:132px; font-size:14px; }
  /* 用 ID 选择器保证压过桌面 `.wt-header :is(.account-pill,#accountLink)`(含 #accountLink 的 ID 权重)。 */
  .wt-header :is(#accountPill,#accountLink) { flex:0 0 auto; max-width:120px; }
  /* 移动端账户收成一个图标/头像;文字用视觉隐藏保留无障碍名(display:none 会丢名字)。 */
  .wt-header .account-pill { min-width:44px;padding:6px; }
  .wt-header .account-pill .account-when-out,
  .wt-header .account-pill[data-account] .account-when-in { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; display:inline; }
  /* 登录后只留头像,保持 44px 触控目标。 */
  .wt-header .account-pill[data-account] { padding:6px; }
  .wt-header .account-pill[data-account] .account-avatar { width:32px; height:32px; font-size:11px; }
}

.wt-header .brand :is(.mark,.logo) { display:block;width:32px;height:32px; }
@media(max-width:760px) { .wt-header .brand :is(.mark,.logo) { width:28px;height:28px; } }
/* 超窄屏(≤380px)只留品牌图标,避免「WatchTranslate」被截成半个词。 */
@media(max-width:380px) { .wt-header .brand > span { display:none; } }
::view-transition-old(root),::view-transition-new(root) { animation-duration:120ms; }
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) { animation:none; }
}