/* Blog navigation and bilingual UI additions. */
.site-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-bottom: 8px; font: 12px system-ui, sans-serif; }
.site-links a, .desktop-site-links a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.site-links a:hover, .desktop-site-links a:hover { color: var(--yellow); }
.site-links a:focus-visible, .desktop-site-links a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.desktop-site-links { margin-top: 18px; font: 13px system-ui, sans-serif; }
.hero-kicker strong { font-size: inherit; font-weight: inherit; }
.language-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-bottom: 8px; }
.language-switch button { appearance: none; border: 1px solid var(--paper); background: #0a0a10; color: var(--paper); padding: 4px 10px; min-height: 28px; font: 12px 'Barlow', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif; cursor: pointer; }
.language-switch button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); font-weight: 700; }
.language-switch button:hover { border-color: var(--yellow); }
.language-switch button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
#results .language-switch, #pause .language-switch, #deskblock .language-switch { justify-content: center; margin-bottom: 14px; }
html[lang="zh-CN"] body { font-family: 'Barlow', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', system-ui, sans-serif; }
html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] .btn,
html[lang="zh-CN"] .big, html[lang="zh-CN"] .credits, html[lang="zh-CN"] #banner,
html[lang="zh-CN"] #cdtext { font-family: 'Anton', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; letter-spacing: .02em; }
html[lang="zh-CN"] .hero-kicker, html[lang="zh-CN"] .hero-sub,
html[lang="zh-CN"] .road-label, html[lang="zh-CN"] .mode-body .stats,
html[lang="zh-CN"] .tb-sub, html[lang="zh-CN"] .tag,
html[lang="zh-CN"] .hintline { letter-spacing: .025em; }
html[lang="zh-CN"] .tile-modes > h2 { letter-spacing: .08em; }
html[lang="zh-CN"] .tile .row label { flex: 0 1 auto; min-width: 0; line-height: 1.3; }
html[lang="zh-CN"] .xcolrows .row label { max-width: 88px; font-size: 11px; }
html[lang="zh-CN"] .mode-body h3 { line-height: 1.2; }
html[lang="zh-CN"] .hintline { font-size: 10px; max-width: calc(100vw - 32px); text-align: center; }
@media (max-width: 800px) { .site-links { justify-content: flex-start; } }

/* Keep the menu toolbar on one line, including the optional install action. */
#menu .board-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 2px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex: 0 0 auto;
}
#menu .hero-title { flex: 0 0 auto; padding-left: 10px; }
#menu .board-hero h1 { font-size: 26px; line-height: 1; }
#menu .hero-kicker, #menu .hero-sub, #menu #impbreakdown { display: none; }
#menu .hero-road { flex: 1 0 auto; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
#menu .road-main { gap: 8px; }
#menu .goal-num { font-size: 22px; }
#menu .road-bar { width: 76px; height: 8px; }
#menu .hero-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }
#menu .language-switch, #menu .site-links, #menu .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
#menu .site-links { gap: 10px; }
#menu .hero-actions { gap: 8px; }
#menu .hero-actions .btn { margin: 0; padding: 4px 8px; font-size: 12px; letter-spacing: .02em; }
#menu #buildtag { white-space: nowrap; letter-spacing: 0; }

/* Forms keep their natural height; short windows scroll the whole menu. */
#menu.open { display: block; overflow-y: auto; overflow-x: hidden; }
#menu .board-wrap { height: auto; min-height: 100dvh; max-height: none; }
#menu .board { flex: 1 0 auto; grid-template-rows: minmax(280px, auto) minmax(340px, auto); }
#menu .tile { min-height: min-content; }
#menu .tile-body { flex: 1 0 auto; min-height: auto; overflow: visible; }
#menu .xboard, #menu .xpack { flex: 0 0 auto; min-height: min-content; overflow: visible; }
#menu .xpack { align-content: start; }

@media (max-width: 1440px) {
  #menu #buildtag { display: none; }
  #menu .xpack { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  #menu .hero-road { display: none; }
  #menu .board { grid-template-rows: minmax(240px, auto) minmax(380px, auto) minmax(360px, auto); }
}
@media (max-width: 760px) {
  #menu .board-hero { gap: 12px; }
  #menu .hero-side { gap: 10px; }
  #menu .board { grid-template-rows: repeat(5, auto); }
}