/* Switch site parts shared by the homepage and the game pages: the Barlow faces, the bar (pages capsule,
   menus, right-hand buttons), the phone sheet, the 'coming soon' note, the custom scrollbar and the pill
   buttons. Moved out of index.html on 2026-10-13 when rh2.html and boxing-beta.html were rebuilt in the
   homepage's style; the bar's markup lives in each page, its behaviour in the page (index.html) or in
   assets/site.js (the game pages). Pure black and white (context/04-brand.md). */
:root {
  --paper: #ffffff;
  --ease: cubic-bezier(.76, 0, .24, 1);
  --soft: cubic-bezier(.2, .7, .1, 1);
  --header: 72px;
  --edge: clamp(20px, 4vw, 64px);
}
/* The first frame (header + hero) is set in Barlow, a DIN-like face after the SpaceX reference, self-hosted
   (assets/fonts, SIL OFL 1.1). Everything below the first frame keeps Inter Tight. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/Barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/Barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Barlow-700.woff2) format("woff2"); }

/* ---------- The bar ---------- */
/* Owner, 2026-10-13: Features, Games (every supported game), Models, Plans, Discord, and accounts, with
   buttons that look like buttons and menus that sit right. Fixed and clear over the hero, black glass once
   the page moves or a menu is open. The pages sit in one glass capsule, a highlight slides under the one you
   point at; the menus open in ONE panel that centres under its button and glides between the two. */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header);
  display: flex; align-items: center; padding: 0 var(--edge);
  border-bottom: 1px solid transparent; color: var(--paper);
  font: 600 12px/1 "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.bar.is-solid { background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(255,255,255,.08); }
.bar__mark img { display: block; height: 32px; width: auto; transition: transform .5s var(--ease); }
.bar__mark:hover img { transform: rotate(-8deg) scale(1.06); }
.bar__nav {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; background: rgba(18,18,18,.45); border: 1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.bar__glow { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: rgba(255,255,255,.12); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), width .35s var(--ease), opacity .25s var(--ease); }
.navbtn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 17px; border-radius: 999px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: rgba(255,255,255,.78); transition: color .2s; }
.navbtn:hover, .navbtn:focus-visible, .navbtn[aria-expanded="true"] { color: var(--paper); }
.navbtn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.navbtn svg { width: 9px; height: 6px; opacity: .7; transition: transform .3s var(--ease); }
.navbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The right side: Discord outlined, Log in quiet, Create account solid. */
.bar__acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.act { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 17px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.act svg { width: 8px; height: 8px; flex: none; }
.act--line { border-color: rgba(255,255,255,.28); }
.act--line:hover, .act--line:focus-visible { border-color: var(--paper); background: rgba(255,255,255,.06); }
.act--ghost:hover, .act--ghost:focus-visible { background: rgba(255,255,255,.1); }
.act--solid { padding: 0 20px; background: var(--paper); color: #000; }
.act--solid svg { width: 13px; height: 9px; transition: transform .25s var(--ease); }
.act--solid:hover, .act--solid:focus-visible { background: rgba(255,255,255,.84); }
.act--solid:hover svg { transform: translateX(3px); }
.bar__menu { display: none; margin-left: auto; height: 38px; padding: 0 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
/* The menus: one panel under the bar, centred on its button and kept inside the page; it slides and resizes
   from one button to the other, and a caret points at the button. */
.fly {
  position: absolute; top: calc(var(--header) - 8px); left: 0; z-index: 2; width: var(--fw, 600px); height: var(--fh, 300px);
  transform: translate3d(var(--fx, 0px), -6px, 0); opacity: 0; visibility: hidden; pointer-events: none;
  font: 400 14px/1.45 "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none;
  transition: opacity .2s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.fly.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(var(--fx, 0px), 0, 0); transition: opacity .2s var(--ease), transform .38s var(--ease), width .38s var(--ease), height .38s var(--ease); }
.fly.is-fresh { transition: opacity .2s var(--ease), transform .25s var(--ease); }   /* a first open appears in place */
.fly__box { position: absolute; inset: 14px 0 0; overflow: hidden; border-radius: 16px; background: rgba(10,10,10,.97); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.65); }
.fly__caret { position: absolute; top: 8px; left: var(--cx, 50%); z-index: 1; width: 13px; height: 13px; margin-left: -6.5px; transform: rotate(45deg); border-top-left-radius: 3px; background: rgba(10,10,10,.97); border-top: 1px solid rgba(255,255,255,.12); border-left: 1px solid rgba(255,255,255,.12); transition: left .38s var(--ease); }
.fly.is-fresh .fly__caret { transition: none; }
.fly__pane { position: absolute; top: 0; left: 0; padding: 14px; opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), visibility 0s .18s; }
.fly__pane.is-on { opacity: 1; visibility: visible; transition: opacity .25s var(--ease) .08s; }
.mfeat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: min(620px, 80vw); }
.mfeat a { display: block; padding: 14px 16px; border-radius: 10px; transition: background-color .2s; }
.mfeat a:hover, .mfeat a:focus-visible { background: rgba(255,255,255,.07); }
.mfeat b, .mgame b { display: block; font: 600 12px/1.2 "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.mfeat span, .mgame span { display: block; margin-top: 6px; color: rgba(255,255,255,.6); }
.mgames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(660px, 84vw); }
.mgame { display: block; padding: 8px; border-radius: 12px; transition: background-color .2s; }
.mgame:hover, .mgame:focus-visible { background: rgba(255,255,255,.06); }
.mgame img, .mgame__slot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.mgame img { filter: brightness(.86); transition: filter .3s; }
.mgame:hover img { filter: none; }
.mgame__slot { border: 1px dashed rgba(255,255,255,.28); }
.mgame--soon { cursor: default; }
.mgame--soon:hover { background: none; }
/* Narrower desktops: the capsule follows the mark instead of the middle, so it never meets the right side. */
@media (max-width: 1359px) { .bar__nav { position: static; transform: none; margin-left: 28px; } }
/* Phones and narrow windows: everything behind one Menu button, full screen. */
.sheet { position: fixed; inset: 0; z-index: 49; display: none; overflow-y: auto; padding: calc(var(--header) + 12px) var(--edge) 40px; background: #000; color: var(--paper); font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sheet.is-open { display: block; }
.sheet__group { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.sheet__label { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sheet__big { display: block; padding: 6px 0; font-size: clamp(26px, 7.4vw, 38px); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.sheet__item { display: block; padding: 7px 0; font-size: 17px; }
.sheet__item small { color: rgba(255,255,255,.5); font-size: 14px; }
.sheet__acts { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; }
.sheet__acts a { padding: 13px 20px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sheet__acts a.is-main { background: var(--paper); color: #000; border-color: var(--paper); }
@media (max-width: 1023px) {
  .bar__nav, .bar__acts, .fly { display: none; }
  .bar__menu { display: block; }
}
/* A link waiting on the owner says so, briefly, under itself. */
.soon-tip { position: fixed; z-index: 95; padding: 9px 13px; border-radius: 6px; background: var(--paper); color: #000; font: 600 11px/1 "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.soon-tip.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Custom scrollbar: a thin white rule on the right ---------- */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
.sbar { position: fixed; top: 10px; bottom: 10px; right: 2px; z-index: 60; width: 14px; cursor: pointer; }
.sbar::before { content: ""; position: absolute; top: 0; bottom: 0; right: 5px; width: 1px; background: rgba(255,255,255,.12); opacity: 0; transition: opacity .3s var(--ease); }
.sbar__thumb { position: absolute; top: 0; right: 4px; width: 3px; border-radius: 3px; background: rgba(255,255,255,.62); opacity: .3; will-change: transform; transition: opacity .35s var(--ease), width .2s var(--ease), right .2s var(--ease), background-color .2s; }
.sbar.is-awake .sbar__thumb { opacity: 1; }
.sbar:hover .sbar__thumb, .sbar.is-drag .sbar__thumb { width: 6px; right: 2.5px; opacity: 1; background: var(--paper); }
.sbar:hover::before, .sbar.is-drag::before { opacity: 1; }
.sbar.is-none, .theater.is-open ~ .sbar { display: none; }
@media (hover: none) { .sbar { display: none; } }

/* ---------- Pill buttons (the hero, the trailer, the game pages) ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 24px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12px/1 "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn svg { width: 9px; height: 11px; flex: none; }
.btn:hover, .btn:focus-visible { background: var(--paper); color: #000; border-color: var(--paper); }
.btn--sm { gap: 10px; height: 38px; padding: 0 16px; border-color: rgba(255,255,255,.5); font-size: 11px; }