/* The HOUND shared bar, on the Spire (Evan, 19 Oct: "its header should be the same as the Olympus and raffle pages,
   they should share a header").

   PORTED, NOT REDRAWN. The source of truth is the Shopify theme (repo hound-website, branch main = live), ported from
   origin/main 1ab61f72 on 19 Oct 2026:
     snippets/hound-member-bar.liquid     the markup (index.html #site-head mirrors it, data-current="spire")
     assets/hound-member.css              "the shared bar", the member menu (.hm-me-menu) and the rank name styles
     assets/hound-cart.css                the cart pill (.hm-bar-cart)
     snippets/hound-threshold-gate.liquid the "Enter the world?" gate (.hg-gate)
     assets/hound-member.js               mountBar / meMenu / rank colours  ->  spire-bar.mjs
   When any of those change, mirror the change here and in spire-bar.mjs (LAUNCH.md, "Shared header").
   Art and the font are copies of the theme's files in assets/bar/ (the page's CSP serves only 'self' images and fonts).

   What differs from the theme, and why:
   - The bar is position:relative inside #site-head (fixed), not sticky: the Spire's page never scrolls, #journey does.
   - Compact (darker pills, tighter padding) follows #journey's scroll instead of the window's.
   - The Spire is the current item, so it is a plain current link (no external-link chevron, no "soon").
   - No view transitions: play.houndarchives.com is another origin, so cross-document transitions cannot run.
   - The cart pill has no count: Shopify's cart lives on houndarchives.com and cannot be read from this origin.
   Everything else (tokens, sizes, radii, insets, breakpoints, icon art, font) is the theme's, byte for byte where it
   could be. */

/* ------------------------------------------------------------------ tokens (hound-member.css .hm-t) */
.hm-t {
  --base:#16201D; --cream:#F6F2EA; --on-cream:#16201D;
  --text:#F6F2EA; --muted:rgba(246,242,234,.74); --faint:rgba(246,242,234,.58);
  --glass:rgba(255,255,255,.12); --glass-edge:rgba(255,255,255,.22); --glass-hl:0 0 0 0 transparent;
  --amber:#F0B54A; --amber-ink:#FFD58A; --jade:#7FE0BC;
  --onyx-forge:#E05A47; --chrome-manor:#C9D1DB; --gilded-court:#E6B84F; --sapphire-keep:#5B8FE0;
}
.hm-t, .hm-t *, .hm-t *::before, .hm-t *::after { box-sizing: border-box; }
.hm-t button { font: inherit; color: inherit; cursor: pointer; }
.hm-t img { max-width: none; }
.hm-sr { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* The bar speaks the main theme's face, HoundTektur (19 Oct, Evan), scoped to the bar and its menus. */
@font-face { font-family:'HoundTektur'; src:url('./assets/bar/hound-cyber-tektur.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
.hm-bar.hm-t, .hm-bar .hm-t, .hm-me-menu.hm-t { --ui:'HoundTektur',system-ui,-apple-system,'Segoe UI',sans-serif; }

/* ------------------------------------------------------------------ where it sits on the Spire */
#site-head { position:fixed; top:0; left:0; right:0; z-index:30; pointer-events:none; }
/* Play keeps the whole stage: the shared bar steps aside for a match, a run and its result, and the game's own
   strip (Leave, sound, pause) takes the top exactly as before. */
body[data-screen=game] #site-head .hm-bar { display:none; }

/* ------------------------------------------------------------------ the shared bar (hound-member.css) */
.hm-bar { position:relative; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:1360px; margin:0 auto; padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  color:var(--text); font:400 14px var(--ui); pointer-events:none; transition:padding .2s ease; }
.hm-bar > * { pointer-events:auto; }
.hm-bar[data-compact] { padding-top:max(8px, env(safe-area-inset-top)); padding-bottom:8px; }
.hm-bar[data-compact] .hm-bar-home, .hm-bar[data-compact] .hm-bar-nav, .hm-bar[data-compact] .hm-bar-me, .hm-bar[data-compact] .hm-bar-menu {
  background:rgba(16,24,21,.86); box-shadow:var(--glass-hl),0 10px 30px rgba(0,0,0,.35); }
.hm-bar a { color:var(--text); text-decoration:none; }
.hm-bar-home { flex:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 8px; border-radius:999px;
  background:rgba(16,24,21,.72); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.2); box-shadow:var(--glass-hl); }
.hm-bar { --hm-ink:#e8d7a9; --hm-ink-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
/* The return link is the approved logo on its own: no border, fill, chevron or label. */
.hm-bar .hm-bar-home, .hm-bar[data-compact] .hm-bar-home {
  min-height:0; padding:2px 4px; gap:0; background:none !important; border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-radius:14px;
  transition:transform .18s ease, filter .18s ease; }
.hm-bar-home .hm-brand-logo { display:block; height:40px !important; width:auto !important; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.hm-bar-home:hover { transform:translateY(-1px); filter:brightness(1.12); }
.hm-bar-home:focus-visible { outline:2px solid var(--cream,#F6F2EA); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) { .hm-bar-home { transition:none; } .hm-bar-home:hover { transform:none; } }
@media (max-width:400px) {
  .hm-bar-me[data-state=out]::before { display:none; }
  .hm-bar-me[data-state=out] { padding:0 14px; }
  .hm-bar-home .hm-brand-logo { height:30px !important; width:auto !important; }
  .hm-bar-side { gap:6px; }
}
/* The menu button wears the main theme's drawer trigger: its scroll (hound-quest-bounty-v51). */
.hm-bar .hm-bar-menu > svg { width:28px; height:28px; opacity:1; filter:none; -webkit-mask:none; mask:none;
  background:url('./assets/bar/hound-quest-bounty-v51.webp') center/contain no-repeat; }
.hm-bar-menu > svg > * { visibility:hidden; }
/* Signed out: the main theme's account figure before "Sign in". */
.hm-bar-me[data-state=out]::before { content:''; flex:none; width:24px; height:24px; -webkit-mask:none; mask:none;
  background:url('./assets/bar/hound-ui-account-v52.webp') center/contain no-repeat; }
.hm-bar-nav { position:relative; display:none; height:52px; padding:4px; gap:2px; align-items:center; border-radius:999px;
  background:rgba(16,24,21,.72); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.2); box-shadow:var(--glass-hl); }
.hm-bar-nav a { position:relative; z-index:1; height:44px; padding:0 16px; border-radius:999px; display:flex; align-items:center; gap:6px; font:500 15px var(--ui); white-space:nowrap; transition:background .15s; }
.hm-bar-nav a:hover { background:rgba(255,255,255,.1); }
.hm-bar-nav a[aria-current=page] { color:var(--on-cream); font-weight:600; background:none; }
.hm-bar-nav a:focus-visible, .hm-bar-sheet a:focus-visible, .hm-bar-me:focus-visible, .hm-bar-menu:focus-visible { outline:2px solid var(--cream); outline-offset:2px; }
.hm-bar-pill { position:absolute; z-index:0; top:4px; height:44px; border-radius:999px; background:var(--cream); pointer-events:none; }
.hm-bar-side { position:relative; flex:none; display:flex; align-items:center; gap:8px; }
.hm-bar-me { display:flex; align-items:center; gap:10px; height:44px; padding:0 14px 0 4px; border-radius:999px;
  background:rgba(16,24,21,.72); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.3); box-shadow:var(--glass-hl); font:500 14px var(--ui); }
.hm-bar-me[hidden] { display:none; }
.hm-bar-me .pf-av { --s:34px; }
.hm-bar-me .pf-av-badge { width:16px; height:16px; right:-4px; bottom:-3px; }
.hm-bar-me[data-state=out] { gap:8px; padding:0 18px 0 14px; }
.hm-bar-me[data-state=loading] { width:44px; padding:0; }
.hm-bar-me-name { max-width:11em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-bar-menu { width:44px; height:44px; display:grid; place-items:center; padding:0; border-radius:50%;
  background:rgba(16,24,21,.72); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.2); box-shadow:var(--glass-hl); color:var(--text); }
.hm-bar-menu svg { width:18px; height:18px; }
.hm-bar-sheet { position:absolute; z-index:60; right:16px; top:calc(100% - 4px); width:min(320px,calc(100vw - 32px)); padding:8px; border-radius:28px;
  background:rgba(16,24,21,.94); -webkit-backdrop-filter:blur(30px) saturate(140%); backdrop-filter:blur(30px) saturate(140%);
  border:1px solid rgba(255,255,255,.18); box-shadow:0 28px 70px rgba(0,0,0,.5); }
.hm-bar-sheet[hidden] { display:none; }
.hm-bar-sheet p { margin:6px 14px 8px; font:500 12px var(--ui); color:var(--muted); }
.hm-bar-sheet a { display:flex; align-items:center; gap:12px; min-height:48px; padding:0 16px; border-radius:999px; font:500 16px var(--ui); }
.hm-bar-sheet a:hover { background:rgba(255,255,255,.1); }
.hm-bar-sheet a[aria-current=page] { background:var(--cream); color:var(--on-cream); font-weight:600; }
.hm-bar-sheet a small { margin-left:auto; font:400 12px var(--ui); color:inherit; opacity:.7; }
@media (min-width:1200px) {
  .hm-bar { padding:24px 40px; }
  .hm-bar[data-compact] { padding-top:10px; padding-bottom:10px; }
  .hm-bar-nav { display:flex; }
  .hm-bar-menu { display:none; }
  .hm-bar-sheet { display:none!important; }
  .hm-bar-home { padding:0 16px 0 10px; }
}
/* One inset on every page (19 Oct review): 16px (or the safe area) on phones and tablets, and from 1200px the 1360px
   centred column plus 40px, i.e. max(40px, 50vw - 640px). The logo's left edge lands 20px in on a phone, 84px at 1440. */
.hm-bar { box-sizing:border-box; width:auto !important; max-width:none !important; margin-left:0; margin-right:0;
  padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
@media (min-width:1200px) {
  .hm-bar { padding-left:max(40px, calc(50vw - 640px)); padding-right:max(40px, calc(50vw - 640px)); }
}
@media (max-width:420px) {
  .hm-bar-me-name { display:none; }
  .hm-bar-me { padding:0 4px; }
  .hm-bar-me[data-state=out] { padding:0 14px 0 12px; }
}
@media (prefers-reduced-transparency:reduce) {
  .hm-bar-home, .hm-bar-nav, .hm-bar-me, .hm-bar-menu, .hm-bar-sheet, .hm-bar-cart, .hm-me-menu { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(20,29,26,.97); }
}
@media (prefers-reduced-motion:reduce) {
  .hm-bar-nav a, .hm-bar, .hm-bar-cart { transition:none; }
}
/* The game's low-power mode (perf.mjs) drops every blur; the bar follows it. */
html[data-power=low] :is(.hm-bar-nav,.hm-bar-me,.hm-bar-menu,.hm-bar-sheet,.hm-bar-cart,.hm-me-menu) { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
html[data-power=low] :is(.hm-bar-nav,.hm-bar-me,.hm-bar-menu,.hm-bar-cart) { background:rgba(20,29,26,.9); }

/* ------------------------------------------------------------------ the cart pill (hound-cart.css) */
.hm-bar-cart { position:relative; display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; color:var(--text);
  background:rgba(16,24,21,.72); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.2); text-decoration:none; transition:background .15s; }
.hm-bar-cart:hover { background:rgba(40,52,48,.86); }
.hm-bar-cart:focus-visible { outline:2px solid var(--cream); outline-offset:3px; }
.hm-bar-cart i { display:block; width:28px; height:28px; background:url('./assets/bar/hound-ui-cart-v52.webp') center/contain no-repeat; }
.hm-bar[data-compact] .hm-bar-cart { background:rgba(16,24,21,.86); }

/* ------------------------------------------------------------------ the sound toggle beside the cart (Evan, 22 Oct)
   The theme's header speaker (snippets/header-icons.liquid .ha-music-toggle: hound-ink-icon--spk-on/off from
   hound-nav-icons-v2.webp), drawn in the cart pill's circle. data-muted="1" shows the struck speaker. During play
   spire-bar.mjs moves the same button into the game row, where it takes the row's button size. */
.hm-bar-sound { position:relative; display:grid; place-items:center; width:44px; height:44px; flex:none; padding:0; border-radius:50%; color:var(--text); cursor:pointer;
  background:rgba(16,24,21,.72); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.2); font-size:0; transition:background .15s; }
.hm-bar-sound:hover { background:rgba(40,52,48,.86); }
.hm-bar-sound:focus-visible { outline:2px solid var(--cream); outline-offset:3px; }
.hm-bar-sound i { display:block; width:30px; height:30px; background:center/contain no-repeat; grid-area:1/1; }
.hm-bar-sound .hm-snd-on { background-image:url('./assets/bar/hound-ui-spk-on-v2.webp'); }
.hm-bar-sound .hm-snd-off { background-image:url('./assets/bar/hound-ui-spk-off-v2.webp'); display:none; }
.hm-bar-sound[data-muted="1"] .hm-snd-on { display:none; }
.hm-bar-sound[data-muted="1"] .hm-snd-off { display:block; }
.hm-bar[data-compact] .hm-bar-sound { background:rgba(16,24,21,.86); }
html[data-power=low] .hm-bar-sound { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:rgba(20,29,26,.9); }
.tools .hm-bar-sound i { width:28px; height:28px; }

/* ------------------------------------------------------------------ the signed-in chip's menu (hound-member.css) */
.hm-me-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:5; display:flex; flex-direction:column; gap:2px; min-width:224px; padding:6px; border-radius:22px;
  background:rgba(16,24,21,.97); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 40px rgba(0,0,0,.45); color:var(--text); }
.hm-me-menu[hidden] { display:none; }
.hm-me-menu a, .hm-me-menu button { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 14px; border:0; border-radius:999px; background:none;
  font:500 15px var(--ui); color:inherit; text-decoration:none; text-align:left; cursor:pointer; }
.hm-me-menu .hm-me-ico { display:block; flex:none; width:24px; height:24px; opacity:1; background:center/contain no-repeat; -webkit-mask:none; mask:none; }
.hm-me-menu a:hover, .hm-me-menu button:hover, .hm-me-menu a:focus-visible, .hm-me-menu button:focus-visible { background:rgba(255,255,255,.1); outline:none; }
.hm-me-menu a:focus-visible, .hm-me-menu button:focus-visible { box-shadow:0 0 0 2px var(--cream); }
.hm-me-menu [data-hm-signout] { margin-top:4px; }
.hm-me-menu [data-hm-signout]:disabled { opacity:.6; cursor:default; }
.hm-me-err { margin:4px 10px 6px; font:400 13px/1.35 var(--ui); color:#F2B8A8; }
/* The Spire's one addition: the raffle row carries the bearings this member has banked (RAFFLE-V2-BUILD.md). */
.hm-me-menu .hm-me-count { margin-left:auto; padding-left:10px; font:600 13px var(--ui); color:var(--amber-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:520px) { .hm-me-menu { position:fixed; top:auto; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); min-width:0; }
  .hm-me-menu a, .hm-me-menu button { min-height:48px; font-size:16px; } }

/* ------------------------------------------------------------------ rank names (hound-member.css .hm-rk) */
.hm-rk-g { -webkit-text-fill-color:var(--rk-a); }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hm-rk-g { background-image:linear-gradient(90deg,var(--rk-a) 0%,var(--rk-b) 25%,var(--rk-a) 50%,var(--rk-b) 75%,var(--rk-a) 100%);
    background-size:200% 100%; background-position:0 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  @media (prefers-reduced-motion:no-preference) { .hm-rk-g { animation:hm-rk 7s linear infinite; } }
}
@keyframes hm-rk { to { background-position:100% 0; } }

/* ------------------------------------------------------------------ the threshold gate (hound-threshold-gate.liquid) */
.hg-gate[hidden] { display:none !important; }
.hg-gate { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-family:'HoundTektur', system-ui, -apple-system, 'Segoe UI', sans-serif; color:#F6F2EA; }
.hg-gate .hg-gate__veil { display:block; position:absolute; inset:0; background:rgba(10,14,13,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hg-gate .hg-gate__panel { position:relative; box-sizing:border-box; width:min(440px, 100%); display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:28px 26px 24px; border-radius:30px; border:1px solid rgba(255,255,255,.2); background:rgba(16,24,21,.9);
  -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 28px 70px rgba(0,0,0,.5); }
.hg-gate .hg-gate__ic { display:block; width:56px; height:56px; margin:0 0 2px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.hg-gate .hg-gate__t { margin:0; font-family:inherit; font-size:28px; font-weight:600; line-height:1.1; letter-spacing:0; text-transform:none; color:#F6F2EA; }
.hg-gate .hg-gate__p { margin:0; font-family:inherit; font-size:15px; font-weight:400; line-height:1.55; letter-spacing:0; color:rgba(246,242,234,.82); }
.hg-gate .hg-gate__acts { display:flex; flex-wrap:wrap; gap:10px; width:100%; margin-top:10px; }
.hg-gate .hg-gate__go, .hg-gate .hg-gate__stay { flex:1 1 160px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px; border-radius:999px; font-family:inherit; font-size:15px; font-weight:600; letter-spacing:0; text-transform:none;
  text-decoration:none; cursor:pointer; transition:background .15s; }
.hg-gate .hg-gate__go { background:#F6F2EA; color:#16201D; border:1px solid #F6F2EA; }
.hg-gate .hg-gate__go:hover { background:#fff; }
.hg-gate .hg-gate__stay { background:rgba(255,255,255,.06); color:#F6F2EA; border:1px solid rgba(255,255,255,.2); }
.hg-gate .hg-gate__stay:hover { background:rgba(255,255,255,.12); }
.hg-gate .hg-gate__go:focus-visible, .hg-gate .hg-gate__stay:focus-visible { outline:2px solid #F6F2EA; outline-offset:3px; }
@media (prefers-reduced-transparency:reduce) { .hg-gate .hg-gate__panel { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(20,29,26,.97); } }
@media (max-width:400px) { .hg-gate .hg-gate__panel { padding:24px 20px 20px; } .hg-gate .hg-gate__t { font-size:24px; } }

/* ------------------------------------------------------------------ the Spire's own row, under the bar */
/* Not part of the shared bar: the game's back-to-lobby, its section tabs (desktop) and sound. It lines up with the
   bar's inset. On the game screen (bar hidden) it is the old game header, unchanged. */
.spire-sub { display:flex; align-items:center; gap:8px; pointer-events:none;
  padding:0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.spire-sub > * { pointer-events:auto; }
.spire-sub .tools { margin-left:auto; }
@media (min-width:1200px) { .spire-sub { padding-left:max(40px, calc(50vw - 640px)); padding-right:max(40px, calc(50vw - 640px)); } }
/* From 1200px the bar is 100px with 24px of clear padding under its 52px pills: the row tucks 16px into that padding,
   leaving the same 8px gap the pills keep, so the head costs the lobby 30px, not 46. */
@media (min-width:1200px) and (min-height:551px) { body:not([data-screen=game]) .spire-sub { margin-top:-16px; } }
body[data-screen=game] .spire-sub { height:var(--head-h); align-items:flex-start;
  padding:max(14px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left)); }
@media (orientation:landscape) and (max-height:550px) { body[data-screen=game] .spire-sub { padding-top:max(8px,env(safe-area-inset-top)); } }
@media (min-width:1024px) and (min-height:551px) { body[data-screen=game] .spire-sub { padding:28px 40px 0; align-items:center; height:92px; } }

/* The height the fixed head takes on the menu screens: bar + the Spire's row. --head-h keeps its old values on the
   game screen, so the stage, scoreboard and battle HUD sit exactly where they did. --sub-h is the row plus an 6-8px gap. */
:root { --bar-h:72px; --sub-h:52px; }
@media (min-width:1024px) and (min-height:551px) { :root { --sub-h:58px; } }
@media (min-width:1200px) { :root { --bar-h:100px; } }
@media (min-width:1200px) and (min-height:551px) { :root { --sub-h:42px; } }
@media (orientation:landscape) and (max-height:550px) { :root { --sub-h:4px; } }
body:not([data-screen=game]) { --head-h:calc(var(--bar-h) + var(--sub-h)); }
/* The Spire's row costs the menu screens ~50px. Mid-height phones (iPhone SE/8 class) get it back on the lobby by
   dropping the eyebrow, as the short-phone rules in glass.css already do below 650px, so Ranked Trials and the House
   standings still clear the dock without a scroll. The game screen is untouched. */
@media (max-width:760px) and (min-height:651px) and (max-height:760px) {
  body[data-screen=home] .arrival > .eyebrow { display:none; }
  body[data-screen=home] #journey h1 { font-size:38px; margin:0 0 4px; }
}
/* Landscape phones have no height to spare for a second row: the Spire's back and sound buttons sit in the bar's empty
   middle instead, just right of the logo (the bar's own items do not move). */
@media (orientation:landscape) and (max-height:550px) {
  body:not([data-screen=game]) .spire-sub { position:absolute; top:max(14px, env(safe-area-inset-top)); left:calc(max(16px, env(safe-area-inset-left)) + 92px); padding:0; }
  body:not([data-screen=game]) .spire-sub .tools { margin-left:0; }
}
/* Short desktops (1280x720 class): the title steps down from 72px so the lobby keeps its old clearance above the
   House standings, which sit fixed in the corner. */
@media (min-width:1024px) and (min-height:551px) and (max-height:820px) {
  body[data-screen=home] #journey h1 { font-size:58px; }
}