/* One top bar on every page (21 Oct 2026). The new pages' header (home2.css) on the pages with the old store bar or
   Create's bar: the same rules, scoped to the bar so they can't change anything else on those pages. Desktop and
   laptop only for now; on phones those pages keep their own bar (until we look at mobile). */
.site-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:16px 0;margin:0 0 8px}
.site-bar .bv-wordmark{font-size:26px;text-decoration:none}
.site-bar .h2-nav{display:flex;gap:14px;flex-wrap:wrap}
.site-bar .h2-nav a{text-decoration:none;color:var(--text-2);font:600 14px/18px var(--font-body)}
.site-bar .h2-nav a:hover{color:var(--text-1)}
.site-bar .h2-nav a[aria-current="page"]{color:var(--text-1);box-shadow:inset 0 -3px 0 var(--accent);padding-bottom:4px}
.site-bar .h2-sp{flex:1}
.site-bar .h2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;border:0;border-radius:0;background:var(--bg-2);color:var(--text-1);box-shadow:inset 0 0 0 2px var(--line-2),0 3px 0 var(--line-1);font:700 14px/1 var(--font-body);text-decoration:none;cursor:pointer}
.site-bar .h2-btn:hover{filter:brightness(1.12)}
.site-bar .h2-btn:focus-visible,.site-bar .h2-nav a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.site-bar .h2-btn--agent{background:var(--agent);color:var(--on-agent,#1A0614);box-shadow:0 3px 0 #9E2A72}
.site-bar .h2-btn--discord{background:#5865F2;color:#fff;box-shadow:0 3px 0 #3B44B5;padding:0 9px}
.site-bar .h2-btn--discord svg{flex:none}
.site-bar .h2-btn--discord .h2-hide-sm{display:none}
.site-bar .h2-btn--discord.hidden{display:none}
.site-bar .h2-btn--me{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 0 var(--accent-lip,#B89A12);font:400 10px/1 var(--font-arcade);text-transform:uppercase;letter-spacing:.02em;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-bar .h2-btn--me[aria-current="page"]{box-shadow:0 0 0 2px var(--text-1),0 4px 0 var(--accent-lip,#B89A12)}
@media (min-width:900px){.site-bar .h2-desk-hide{display:none}}
/* the links get a row of their own where the buttons need the room (as on the new pages) */
@media (max-width:999px){.site-bar .h2-nav{order:3;width:100%}}
/* This bar on every size (phones since 21 Oct 2026); Create's own bar stays in the page for its script, hidden */
.has-site-bar .cr-top{display:none!important}
/* 21 Oct 2026 (feedback): the website's pages have no sidebar (worker.js removes it): one column, like the home */
.sh.no-side{display:block;min-height:0}
.site-bar .h2-menu-btn,.site-bar .h2-menu-only{display:none}
/* Phones: ☰ on the left (the sidebar as a drawer, or the links), the logo in the middle, Get <agent> on the right (Discord
   too from 480px), as on the home */
@media (max-width:899px){
  .site-bar{position:relative;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:8px;height:68px;box-sizing:border-box;padding:12px 0;margin:0}
  .cr > .site-bar{padding:12px 16px}
  .site-bar .h2-menu-btn{display:inline-flex;align-items:center;justify-content:center;margin-right:auto;width:40px;height:40px;padding:0;border:0;background:var(--bg-2);color:var(--text-1);box-shadow:inset 0 0 0 2px var(--line-2);font:700 18px/1 var(--font-body);cursor:pointer}
  .site-bar .bv-wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px}
  .site-bar .h2-sp,.site-bar #site-me{display:none}
  .site-bar .h2-btn{min-height:36px;padding:0 10px;font-size:13px}
  .site-bar .h2-nav{display:none;position:absolute;z-index:30;top:100%;left:0;right:0;flex-direction:column;gap:0;width:auto;padding:6px 0;background:var(--bg-1);box-shadow:0 0 0 2px var(--line-2),0 18px 40px -12px rgba(0,0,0,.8)}
  .site-bar .h2-nav.is-open{display:flex}
  .site-bar .h2-nav a{display:block;padding:13px 16px;font-size:16px;line-height:20px;color:var(--text-1);box-shadow:none}
  .site-bar .h2-nav a[aria-current="page"]{color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
  .site-bar .h2-nav a + a{border-top:1px solid var(--line-1)}
  .site-bar .h2-desk-hide,.site-bar .h2-menu-only{display:block}
  .site-bar .h2-menu-only.hidden{display:none}
}
@media (max-width:479px){.site-bar .h2-btn--discord{display:none!important}}
@media (min-width:480px){.site-bar .h2-menu-discord{display:none!important}}
@media (max-width:360px){.site-bar .bv-wordmark{font-size:19px}.site-bar .h2-btn{padding:0 8px;font-size:12px}}
@media (max-width:339px){.site-bar .bv-wordmark{font-size:17px}}
.cr > .site-bar{padding:16px clamp(16px,3vw,32px);margin:0} /* Create: full-width page, so the bar brings its own side room */
/* 21 Oct 2026, desktop and laptop: one column for the bar and the footer on every page, the home's (1056px of content,
   as .h2-wrap: 1120px less 32px each side). Create gets the same column instead of the full width; the sidebar pages
   centre it in their main area, and their content is that wide too, so the bar, the page and the footer line up */
@media (min-width:900px){
  .site-bar{width:100%;max-width:1056px;box-sizing:border-box;margin-left:auto;margin-right:auto}
  .cr > .site-bar{max-width:1120px;padding:16px 32px;margin:0 auto}
  div.sh-main > .site-bar{max-width:1120px;padding-left:32px;padding-right:32px} /* Terms, Privacy: their main area has no side room of its own */
  .has-site-bar .sh .pg.pg--shell{max-width:1056px}
}
/* 21 Oct 2026: the one footer (the home's), desktop and laptop only; phones keep each page's own footer */
.site-foot{display:none}
@media (min-width:900px){
  .has-site-bar footer.pg-foot,.has-site-bar footer.cr-foot,.has-site-bar footer.foot{display:none}
  .site-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;width:100%;max-width:1056px;box-sizing:border-box;margin:clamp(56px,9vw,96px) auto 0;padding:28px 0 40px;box-shadow:inset 0 1px 0 var(--line-1);color:var(--text-3);font:14px/1.5 var(--font-body)}
  .cr > .site-foot,div.sh-main > .site-foot{width:calc(100% - 64px)} /* Create, Terms, Privacy: no side room of their own */
  .site-foot .bv-wordmark{font-size:20px;text-decoration:none}
  .site-foot nav{display:flex;flex-wrap:wrap;gap:10px 18px}
  .site-foot .foot-legal{flex-basis:100%;margin:0;font-size:13px;color:var(--text-3)}
  .site-foot a{color:var(--text-2);text-decoration:none} /* the logo too, as on the home */
  .site-foot nav a{font-weight:400}
  .site-foot a:hover,.site-foot a:focus-visible{color:var(--text-1)}
}
/* 21 Oct 2026: Sign out, in the phone menus only (the account card has it on every screen) */
@media (min-width:900px){.sh-signout{display:none!important}}
.h2-menu-only[hidden],.sh-signout[hidden]{display:none!important}