/* Website top bar inserted by site-shell.js: back to home, the page's icon and title, ShineGame.
   Shared by every website page except the home page. Tool pages get it through site-theme.css;
   other pages load this file on its own so their own look stays unchanged. The app build strips
   both tags and draws its own bar (see mobile/scripts/mobile-page.mjs). */
:root {
  --site-ink: #172033;
  --site-brand: #4338ca;
  --site-brand-soft: #eef2ff;
}
/* ---------- App bar (inserted by site-shell.js) */
.site-bar {
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--site-ink); line-height: 1.4;
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; box-sizing: border-box; min-height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: rgba(247, 248, 252, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(227, 232, 241, 0.8);
}
/* Pages style bare `header` elements; keep those rules off the bar. */
.site-bar { width: auto !important; max-width: none !important; margin: 0 !important; justify-content: flex-start !important; border-radius: 0 !important; }
.site-back {
  display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px 6px 4px;
  color: var(--site-brand); font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 10px;
}
.site-back svg { width: 22px; height: 22px; }
.site-back:active { background: var(--site-brand-soft); }
.site-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  color: #fff; font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 5px 12px rgba(67, 56, 202, 0.25);
}
.site-icon.teal { background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 5px 12px rgba(15, 118, 110, 0.25); }
.site-icon.rose { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 5px 12px rgba(225, 29, 72, 0.22); }
.site-icon.sky { background: linear-gradient(135deg, #38bdf8, #0369a1); box-shadow: 0 5px 12px rgba(3, 105, 161, 0.22); }
.site-icon.gold { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 5px 12px rgba(217, 119, 6, 0.28); }
.site-icon.slate { background: linear-gradient(135deg, #94a3b8, #475569); box-shadow: 0 5px 12px rgba(71, 85, 105, 0.22); }
.site-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 800; }

/* Pages lay out their body as flex or grid, so the bar is fixed and the body is pushed down. */
html.site-shell body { padding-top: calc(52px + max(0px, env(safe-area-inset-top) - 8px)) !important; }

/* The page's own title now lives in the bar. */
[data-site-title-source] { display: none !important; }
/* …and whatever followed it no longer needs a gap above it. */
[data-site-title-source] + * { margin-top: 0 !important; }

/* The bar's back link replaces each page's own "回到主页" row. */
html.site-shell #topbar-nav,
html.site-shell body > .topbar,
html.site-shell .wrap > .topbar,
html.site-shell .shell > .topbar,
html.site-shell nav.topbar { display: none !important; }
.site-bar-inner { flex: 1; min-width: 0; max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.site-back:hover { background: var(--site-brand-soft); }
.site-home {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 12px;
  color: var(--site-ink); font-size: 15px; font-weight: 800; text-decoration: none;
}
.site-home img { width: 28px; height: 28px; border-radius: 8px; }
.site-home:hover { background: rgba(255, 255, 255, 0.9); }
@media (max-width: 640px) { .site-home span { display: none; } }

/* Pages outside the tool set: hide only their own home link, keep other controls. */
html.site-shell .toplink#homeLink,
html.site-shell main > nav:has(> a#home),
html.site-shell body > header:has(> a.brand) { display: none !important; }
.site-actions { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.site-actions > button:not([class]) {
  min-height: 34px; padding: 6px 14px; border: 1px solid rgba(67, 56, 202, 0.22); border-radius: 999px;
  background: #fff; color: var(--site-brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.site-actions > button:not([class]):hover { background: var(--site-brand-soft); }
/* Guide library reader: its sticky page tools sit below the fixed bar. */
html.site-shell .reader-tools { top: calc(52px + max(0px, env(safe-area-inset-top) - 8px)) !important; }
/* Admin console: the bar carries the brand and the way back to the site, so the sidebar drops
   its own logo and "back to site" link and sits below the bar. */
html.site-shell[data-site-page="Admin"] .sidebar > .brand,
html.site-shell[data-site-page="Admin"] .side-nav > a[href="index.html"],
html.site-shell[data-site-page="Admin"] .side-nav > .side-sep { display: none !important; }
html.site-shell[data-site-page="Admin"] .admin-shell { min-height: calc(100vh - 52px) !important; }
html.site-shell[data-site-page="Admin"] .sidebar { top: calc(52px + max(0px, env(safe-area-inset-top) - 8px)) !important; }
@media (min-width: 851px) {
  html.site-shell[data-site-page="Admin"] .sidebar { height: calc(100vh - 52px - max(0px, env(safe-area-inset-top) - 8px)) !important; }
}