/* The site frame: a fixed left sidebar and a sticky top bar (layout after the owner's reference, in Hiro's black
   glass and chrome). Below 1000px the sidebar slides in from the left behind the menu button. */
:root { --side: 248px; --topbar: 68px; }

body.has-shell { padding-left: var(--side); }
body.has-shell .dock { display: none; }

.hx-side { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: var(--side); display: flex; flex-direction: column; gap: 14px;
  padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, #0b0c10, #060709); border-right: 1px solid rgba(255, 255, 255, 0.07); overflow-y: auto; scrollbar-width: thin; }
.hx-side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px; }
.hx-logo { display: inline-flex; align-items: center; gap: 10px; }
.hx-logo img { width: 36px; height: 36px; }
.hx-logo span { font: italic 900 32px/1 var(--display); letter-spacing: 0.02em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.12em; }

.hx-nav { display: grid; gap: 3px; }
.hx-nav a { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; color: #c9ccd2; font: 600 16px var(--body); transition: background 0.15s, color 0.15s; }
.hx-nav a svg, .hx-nav a .hx-vicon { width: 22px; height: 22px; flex: none; }
.hx-nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--fur); }
.hx-nav a[aria-current='page'] { background: rgba(255, 255, 255, 0.09); color: #fff; box-shadow: inset 3px 0 0 var(--fur), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

.hx-label { margin: 0; padding: 0 14px 8px; color: #7d828b; font: 600 12px var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.hx-yours { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.hx-yours ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hx-yours a { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; color: #d7d9de; font: 600 15px var(--body); }
.hx-yours a:hover { background: rgba(255, 255, 255, 0.06); }
.hx-yours img { width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: cover; }
.hx-yours small { display: block; color: #7d828b; font-size: 12px; font-weight: 600; }

.hx-side-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 10px; }
.hx-social { display: flex; gap: 4px; padding: 0 6px; }
.hx-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #9aa0a8; }
.hx-social a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.hx-social svg { width: 19px; height: 19px; }
.hx-create { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--chrome); color: #07080b; font: 700 17px var(--body);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08); transition: transform 0.12s, box-shadow 0.2s; }
.hx-create svg { width: 20px; height: 20px; }
.hx-create:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.16); }

.hx-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--topbar); padding: 0 max(22px, env(safe-area-inset-right, 0px)) 0 24px;
  background: rgba(3, 3, 3, 0.78); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hx-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #d7d9de; cursor: pointer; }
.hx-icon:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.hx-icon svg { width: 24px; height: 24px; }
.hx-burger, .hx-mlogo, .hx-side .hx-close { display: none; }
.hx-search { display: flex; align-items: center; gap: 12px; flex: 0 1 560px; margin: 0 auto; height: 46px; padding: 0 10px 0 16px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); color: #8a8f97; font: 400 16px var(--body); text-align: left; cursor: text; transition: border-color 0.15s, background 0.15s; }
.hx-search:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.07); }
.hx-search svg { width: 21px; height: 21px; flex: none; color: #c9ccd2; }
.hx-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-search kbd { padding: 3px 9px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); color: #a3a8b0; font: 600 13px var(--body); }
.hx-right { display: flex; align-items: center; gap: 8px; }
.hx-shards { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-shards[hidden] { display: none; }
.hx-shards img { width: 24px; height: 24px; }
.hx-bellwrap { position: relative; }
.hx-dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--eye); box-shadow: 0 0 0 2px #050505; }
.hx-dot[hidden] { display: none; }
.hx-news { position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, calc(100vw - 24px)); display: grid; gap: 2px; padding: 12px 8px 8px; border-radius: 16px;
  background: #0f1116; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); }
.hx-news[hidden] { display: none; }
.hx-news a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; }
.hx-news a:hover { background: rgba(255, 255, 255, 0.06); }
.hx-news b { font-weight: 600; }
.hx-news span { color: #9aa0a8; font-size: 14px; line-height: 1.45; }

/* The account button lives in the top bar: picture, name, a chevron; its menu opens downward. */
.hx-top #account .who { display: inline-flex; align-items: center; gap: 10px; height: 44px; max-width: 220px; padding: 0 10px 0 4px; border: 0; border-radius: 999px; background: transparent; color: var(--fur); font: 600 16px var(--body); cursor: pointer; }
.hx-top #account .who:hover { background: rgba(255, 255, 255, 0.07); }
.hx-top #account .who-pic { width: 36px !important; height: 36px !important; }
.hx-top #account .who::after { content: ''; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; flex: none; }
.hx-top .who-menu { top: calc(100% + 10px); bottom: auto; }

.hx-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); }
.hx-scrim[hidden] { display: none; }

@media (max-width: 999px) {
  body.has-shell { padding-left: 0; }
  .hx-side { transform: translateX(-104%); transition: transform 0.28s cubic-bezier(.2, .8, .2, 1); box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5); }
  body.side-open .hx-side { transform: none; }
  .hx-side .hx-close { display: grid; }
  .hx-burger, .hx-mlogo { display: grid; }
  .hx-mlogo img { width: 30px; height: 30px; }
  .hx-top { gap: 8px; padding: 0 12px; }
  .hx-search { flex: 1; margin: 0; height: 42px; }
  .hx-search kbd { display: none; }
}
@media (max-width: 560px) {
  .hx-search span { font-size: 0; }
  .hx-search { flex: 0 0 42px; justify-content: center; padding: 0; margin-left: auto; border-color: transparent; background: transparent; }
  .hx-search span { display: none; }
  .hx-shards b { font-size: 14px; }
  .hx-top #account .who-name, .hx-top #account .who::after { display: none; }
  .hx-top #account .who { padding: 0 4px; }
}

/* Hiro's ad spaces (src/ads.js siteAd): only on Hiro's pages, never in games, gone for Hiro Plus. Labelled, and they take
   no room until Google fills them. */
.hx-ad { display: block; margin: 30px auto; max-width: 980px; text-align: center; }
.hx-ad small { display: block; margin-bottom: 6px; color: #6f747c; font: 600 11px var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.hx-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.hx-ad-rail { margin: 22px 0 0; max-width: 300px; }
.ex-ad, [data-ad] { display: contents; }