/* Softlaunch Interactive: shared styles.
   Layout: Version C, "Player Select". The site plays like a game: a title screen with a menu, Heart Machine-style
   colour-blocked rows, values as unlocked achievements, a character-select screen for the founders, a multiplayer
   lobby band for Discord, a "save your progress" sign-up and a black Slug Disco-style footer.
   Every colour, font and shadow comes from the tokens in :root. */

/* fonts: self-hosted from Google Fonts (SIL Open Font License, see fonts/README.txt) */
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url("fonts/bebas-neue-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url("fonts/bebas-neue-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chewy'; font-weight: 400; font-display: swap; src: url("fonts/chewy-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand'; font-weight: 500 700; font-display: swap; src: url("fonts/quicksand-var-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-weight: 500 700; font-display: swap; src: url("fonts/quicksand-var-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url("fonts/space-mono-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url("fonts/space-mono-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: swap; src: url("fonts/space-mono-700-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: swap; src: url("fonts/space-mono-700-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;

  /* palette */
  --void: #07051a;
  --deep: #120a2e;
  --plum: #3a0122;
  --berry: #8c1559;
  --berry-deep: #5c0b3d;
  --magenta: #e2409c;
  --hot: #ff5fae;
  --orange: #ff8a1e;
  --gold: #ffd27a;
  --cream: #fff3e2;
  --muted: #c8bfe0;
  --blush: #ffe0f0;
  --blush-deep: #ffd0e8;
  --online: #4ade80;
  --green: #4ade80;
  --green-deep: #1f9d55;
  --green-glow: rgba(74, 222, 128, 0.35);
  --black: #000;
  --white: #fff;

  /* founder colours, taken from each portrait's background */
  --p1: #ff4a52;
  --p2: #b07cff;
  --p3: #4f9dff;


  /* see-through layers */
  --line: rgba(255, 243, 226, 0.16);
  --line-strong: rgba(255, 243, 226, 0.34);
  --surface-0: rgba(255, 243, 226, 0.03);
  --surface-1: rgba(255, 243, 226, 0.06);
  --surface-2: rgba(255, 243, 226, 0.08);
  --surface-3: rgba(255, 243, 226, 0.1);
  --void-0: rgba(7, 5, 26, 0);
  --void-10: rgba(7, 5, 26, 0.1);
  --void-45: rgba(7, 5, 26, 0.45);
  --void-75: rgba(7, 5, 26, 0.75);
  --void-85: rgba(7, 5, 26, 0.85);
  --void-92: rgba(7, 5, 26, 0.92);
  --magenta-15: rgba(226, 64, 156, 0.15);
  --magenta-20: rgba(226, 64, 156, 0.2);
  --magenta-22: rgba(226, 64, 156, 0.22);
  --magenta-28: rgba(226, 64, 156, 0.28);
  --magenta-35: rgba(226, 64, 156, 0.35);
  --orange-60: rgba(255, 138, 30, 0.6);
  --plum-18: rgba(58, 1, 34, 0.18);
  --ink-60: rgba(42, 5, 32, 0.6);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-40: rgba(255, 255, 255, 0.4);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-45: rgba(0, 0, 0, 0.45);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-55: rgba(0, 0, 0, 0.55);
  --shadow: rgba(4, 2, 16, 0.6);
  --orange-glow: rgba(255, 138, 30, 0.22);
  --gold-70: rgba(255, 210, 122, 0.7);
  --gold-0: rgba(255, 210, 122, 0);
  --chat-glass: rgba(18, 10, 46, 0.3);
  --chat-glass-head: rgba(7, 5, 26, 0.3);
  --chat-react: rgba(255, 243, 226, 0.08);
  --chat-react-line: rgba(255, 243, 226, 0.22);

  /* shadows */
  --shadow-logo: 0 12px 30px var(--shadow);
  --shadow-bunny: 0 30px 40px var(--magenta-35);
  --shadow-cover: 0 24px 50px var(--black-45);
  --shadow-card: 0 22px 40px var(--black-50);
  --shadow-save: 0 0 0 6px var(--magenta-15), 0 30px 60px var(--shadow);
  --shadow-text-hard: 0 3px 0 var(--black-55);

  /* spacing scale (4 px base). Optical nudges of 1-6 px that line Bebas Neue up in its boxes stay as literals. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --pad-section: clamp(64px, 8vw, 110px);
  --pad-band: clamp(56px, 7vw, 90px);
  --pad-row: clamp(48px, 6vw, 72px);
  --bar-h: 66px;
  --menu-indent: 44px;
  --menu-indent-on: 52px;

  /* corner radius scale */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-round: 50%;

  /* type scale. step-* is body and headings; ui-* is Bebas Neue labels; text-label* is Space Mono */
  --text-label: 0.72rem;
  --text-label-lg: 0.8rem;
  --ui-xs: 0.95rem;
  --ui-sm: 1.2rem;
  --ui-md: 1.35rem;
  --ui-lg: 1.5rem;
  --ui-xl: 1.9rem;
  --ui-2xl: 2.6rem;
  --fluid-tag: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
  --fluid-menu: clamp(1.7rem, 1.3rem + 1vw, 2.2rem);
  --fluid-name: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  --fluid-stamp: clamp(2rem, 1.2rem + 3vw, 3.6rem);

  /* type families and steps */
  --font-ui: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-sticker: "Chewy", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Quicksand", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --step-0: 1.0625rem;
  --step-1: 1.22rem;
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --step-3: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem);
  --step-4: clamp(3.2rem, 1.8rem + 6vw, 6.6rem);
  --step-lead: clamp(1.22rem, 0.85rem + 0.75vw, 1.6rem);
  --step-big: clamp(3rem, 1.6rem + 3.8vw, 5.4rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* anchors and keyboard focus stop below the sticky top bar. Set on what sits under the bar, never on the html
   element: a page-wide scroll-padding makes focusing anything in the bar itself jump the page to the top. */
main [id], main :focus, .footer :focus { scroll-margin-top: var(--bar-h); }
img { max-width: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--void); color: var(--cream); font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--void); }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }
.skip { position: fixed; left: var(--space-4); top: -100px; z-index: 70; background: var(--gold); color: var(--plum); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 700; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + var(--space-3)); }
main { overflow-x: clip; }
/* on laptops and wider, every section fills the screen under the top bar, content centred, so a jump from the menu
   shows that section alone (owner, 2026-10-22). A section taller than that (the founders on a short laptop) just
   grows. Phones are left alone: their sections are taller than the screen anyway. */
@media (min-width: 861px) {
  main > section { display: grid; align-content: center; min-height: calc(100vh - var(--bar-h)); min-height: calc(100svh - var(--bar-h)); }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-ui); font-size: var(--ui-lg); letter-spacing: 0.05em; line-height: 1;
  padding: 0.5em 1.1em 0.42em; border-radius: var(--radius-md); border: 3px solid currentColor; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.btn svg { width: 0.95em; height: 0.95em; }
.btn-solid { background: var(--cream); color: var(--berry); border-color: var(--cream); }
.btn-solid:hover { background: var(--gold); border-color: var(--gold); color: var(--plum); transform: translateY(-2px); }
.btn-sm { font-size: var(--ui-sm); padding: 0.45em 0.9em 0.38em; }
.kicker { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-label-lg); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.lead { margin: var(--space-4) 0 0; max-width: 52ch; color: var(--muted); font-size: var(--step-1); line-height: 1.6; }
.sticker {
  margin: 0; font-family: var(--font-sticker); font-weight: 400; line-height: 1; color: var(--cream);
  -webkit-text-stroke: 0.045em var(--magenta); paint-order: stroke fill;
  text-shadow: 0.07em 0 0 var(--plum), -0.07em 0 0 var(--plum), 0 0.07em 0 var(--plum), 0 -0.07em 0 var(--plum),
    0.05em 0.05em 0 var(--plum), -0.05em 0.05em 0 var(--plum), 0.05em -0.05em 0 var(--plum), -0.05em -0.05em 0 var(--plum),
    0 0.13em 0 var(--plum), 0 0.22em 0.4em var(--shadow);
  text-wrap: balance;
}

/* top bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--void-85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 3px solid var(--magenta); }
.topbar .wrap { display: flex; align-items: center; gap: var(--space-6); min-height: var(--bar-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-family: var(--font-sticker); font-size: var(--ui-lg); line-height: 1; }
.brand img { width: 40px; height: auto; aspect-ratio: 658 / 616; }
/* scroll progress: the bar's magenta rule fills with an XP-style gradient as the page scrolls (set by main.js) */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, var(--hot), var(--orange)); transform-origin: left center; transform: scaleX(var(--progress, 0)); pointer-events: none; }
.site-nav { margin-left: auto; }
.nav-links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--font-ui); font-size: var(--ui-lg); letter-spacing: 0.04em; text-decoration: none; color: var(--cream); padding-bottom: 2px; border-bottom: 3px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--hot); color: var(--hot); }
/* scrollspy: the link for the section on screen */
.nav-links a[aria-current="location"] { border-bottom-color: var(--gold); color: var(--gold); }
/* small social icons: in the bar after the section links (they replaced the Join Discord button), and in the pause menu */
.socials { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--cream); }
.socials a:hover { background: var(--surface-3); color: var(--hot); }
.socials svg { width: 22px; height: 22px; }
.bar-socials { padding-left: var(--space-5); border-left: 1px solid var(--line-strong); }
.menu-btn { display: none; background: transparent; color: var(--cream); }
.menu-btn:hover { background: var(--cream); color: var(--plum); border-color: var(--cream); }
@media (max-width: 860px) {
  .site-nav { display: none; }
  .bar-socials { margin-left: auto; padding-left: 0; border-left: 0; }
  .topbar .wrap { gap: var(--space-3); }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 640px) {
  /* no room for the icons next to the logo and Menu: they are in the pause menu */
  .bar-socials { display: none; }
  .menu-btn { margin-left: auto; }
}

/* pause menu: the phone navigation, a full-screen overlay in the title screen's menu style */
html:has(.pause[open]) { overflow: hidden; }
.pause {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: max(var(--space-6), env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)) max(var(--space-6), env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
  color: var(--cream); background: linear-gradient(var(--void-85), var(--void-92)), var(--void) url("assets/space.webp") center top / cover;
  overscroll-behavior: contain;
}
.pause[open] { display: grid; place-items: center; animation: pause-in 0.18s ease-out; }
.pause::backdrop { background: var(--void); }
@keyframes pause-in { from { opacity: 0; } }
.pause-panel { width: min(100%, 380px); }
.pause-title { margin: 0; font-family: var(--font-ui); font-size: var(--step-3); line-height: 0.95; letter-spacing: 0.08em; color: var(--gold); text-shadow: 0 4px 0 var(--plum); }
.pause-menu { margin-top: var(--space-6); }
/* the icons sit under the menu, their glyphs roughly in line with the menu text */
.pause-socials { margin-top: var(--space-7); padding-left: var(--space-7); }
.pause-menu a[aria-current="location"] { color: var(--gold); }
.pause-menu a[aria-current="location"] small { color: var(--gold); }

/* where you are: once you leave the title screen, its menu follows you. A corner panel on wide screens; a pill with
   up, the section name and down on phones and smaller laptops. Hidden (and out of the Tab order) on the title screen. */
.hud { position: fixed; z-index: 15; left: max(var(--space-4), env(safe-area-inset-left, 0px)); bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  padding: 12px 14px 10px; border-radius: var(--radius-lg); background: var(--void-85); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-card);
  transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0s; }
html[data-here="top"] .hud { opacity: 0; translate: 0 12px; visibility: hidden; transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s; }
.hud-title { margin: 0 0 6px; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.hud ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hud a { position: relative; display: block; padding: 4px 10px 2px 26px; border-radius: var(--radius-sm); text-decoration: none; font-family: var(--font-ui); font-size: 1.25rem; letter-spacing: 0.06em; color: var(--cream); }
.hud a::before { content: ""; position: absolute; left: 9px; top: 50%; translate: 0 -50%; border-left: 9px solid var(--orange); border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity: 0; }
.hud a:hover, .hud a[aria-current="location"] { background: var(--magenta-22); color: var(--gold); }
.hud a[aria-current="location"]::before { opacity: 1; }
.hud-step, .hud-now { display: none; }
@media (max-width: 1319px) {
  .hud { left: 50%; translate: -50% 0; display: flex; align-items: center; gap: var(--space-2); padding: 6px; border-radius: 999px; }
  html[data-here="top"] .hud { translate: -50% 12px; }
  .hud-title, .hud ol { display: none; }
  .hud-now { display: block; min-width: 10ch; margin: 0; text-align: center; font-family: var(--font-ui); font-size: 1.3rem; letter-spacing: 0.06em; color: var(--gold); }
  .hud-step { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-round); background: var(--surface-3); color: var(--cream); font-size: 0.9rem; cursor: pointer; }
  .hud-step:hover { background: var(--cream); color: var(--plum); }
  .hud-step:disabled { opacity: 0.35; cursor: default; background: var(--surface-3); color: var(--cream); }
}

/* title screen */
.title-screen { position: relative; overflow: hidden; isolation: isolate; background: var(--void); }
/* far stars: the painted nebula on its own layer, so it can drift slower than the page (main.js sets --sy) */
.title-screen::after { content: ""; position: absolute; inset: 0 0 -40%; z-index: -2; background: url("assets/space.webp") center top / max(100%, 1440px) auto;
  transform: translate3d(0, calc(var(--sy, 0) * 0.3px), 0); }
.title-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 72% 45%, var(--magenta-28), transparent 70%), linear-gradient(180deg, var(--void-0) 60%, var(--void)); }
.title-screen .planet { position: absolute; z-index: -1; width: clamp(150px, 17vw, 260px); height: auto; right: 3%; top: 5%;
  translate: 0 calc(var(--sy, 0) * 0.45px); animation: bob 9s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-8px) rotate(-2deg); } to { transform: translateY(8px) rotate(2deg); } }
.title-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-6); align-items: center; min-height: min(78vh, 760px); padding-block: var(--space-8) var(--space-10); }
.title-copy { min-width: 0; }
.title-copy h1 { margin: 0; }
.title-copy .logo { display: block; width: min(100%, 560px); height: auto; filter: drop-shadow(var(--shadow-logo)); }
.title-copy .tag { margin: var(--space-4) 0 0; font-family: var(--font-ui); font-size: var(--fluid-tag); letter-spacing: 0.12em; color: var(--gold); }

/* game menu, shared by the title screen and the pause menu. main.js marks the item under the cursor with
   .is-current and moves it with hover, focus and the arrow keys; without script the first item stays lit. */
.menu { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-1); width: min(100%, 380px); }
.menu :is(a, button) { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; margin: 0; border: 0; background: none; cursor: pointer; text-align: left; padding: var(--space-2) var(--space-4) 6px var(--menu-indent); border-radius: var(--radius-sm); text-decoration: none; font-family: var(--font-ui); font-size: var(--fluid-menu); letter-spacing: 0.05em; line-height: 1; color: var(--cream); transition: background-color 0.12s ease, color 0.12s ease, padding 0.15s ease; }
.menu :is(a, button) small { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; color: var(--muted); }
.menu :is(a, button)::before { content: ""; position: absolute; left: 14px; top: 50%; width: 0; height: 0; border-left: 14px solid var(--orange); border-top: 9px solid transparent; border-bottom: 9px solid transparent; transform: translateY(-50%); opacity: 0; }
.menu .is-current, .menu:not(.is-live) li:first-child :is(a, button), .menu:not(.is-live) :is(a, button):is(:hover, :focus-visible) { background: var(--magenta-22); color: var(--gold); padding-left: var(--menu-indent-on); }
.menu .is-current::before, .menu:not(.is-live) li:first-child :is(a, button)::before { opacity: 1; animation: nudge 0.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translate(4px, -50%); } }

/* Press start: a real link to the game row. It blinks a few times on arrival, then holds still (WCAG 2.2.2). */
.press { display: inline-flex; align-items: center; min-height: 44px; margin: var(--space-4) 0 0; padding-inline: var(--space-2); margin-left: calc(-1 * var(--space-2));
  border-radius: var(--radius-sm); text-decoration: none; font-family: var(--font-mono); font-size: var(--text-label-lg); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.press:hover { color: var(--gold); }
.press.is-pressed { color: var(--gold); animation: blink 0.12s steps(2, start) 3; }
@keyframes blink { to { visibility: hidden; } }
.title-art { position: relative; justify-self: center; width: min(100%, 520px); }
.title-art .hero-bunny { display: block; width: 100%; height: auto; filter: drop-shadow(var(--shadow-bunny)); animation: hover 5s ease-in-out infinite alternate; }
@keyframes hover { from { transform: translateY(-6px); } to { transform: translateY(10px); } }
.title-art .pad { position: absolute; left: 10%; right: 10%; bottom: -8%; height: 16%; border-radius: var(--radius-round); background: radial-gradient(closest-side, var(--orange-60), var(--magenta-20) 60%, transparent); filter: blur(4px); z-index: -1; }
/* a small cue that there is more below, for mouse users on wide screens */
.scroll-cue { position: absolute; left: 50%; bottom: var(--space-4); translate: -50% 0; display: grid; justify-items: center; gap: var(--space-1); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.scroll-cue::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; }
.scroll-cue:hover { color: var(--gold); }

/* the title screen's one big moment: everything arrives in a short staggered sequence on load */
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
.title-copy h1 { animation: arrive 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.title-copy .tag { animation: arrive 0.6s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.title-copy .menu li { animation: arrive 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.title-copy .menu li:nth-child(1) { animation-delay: 0.22s; }
.title-copy .menu li:nth-child(2) { animation-delay: 0.29s; }
.title-copy .menu li:nth-child(3) { animation-delay: 0.36s; }
.title-copy .menu li:nth-child(4) { animation-delay: 0.43s; }
.title-copy .menu li:nth-child(5) { animation-delay: 0.5s; }
.title-copy .press { animation: arrive 0.5s 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) both, blink 1.2s 1.2s steps(2, start) 3; }
.title-art { animation: arrive 0.8s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.scroll-cue { animation: arrive 0.5s 0.8s ease-out both; }
@media (max-width: 860px) {
  /* phones (owner's pick, layout B): the name first, then the tagline, a smaller bunny, and the menu */
  .title-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-height: 0; padding-top: var(--space-7); }
  .title-copy { display: contents; }
  .title-copy h1 { order: 1; }
  .title-copy .tag { order: 2; margin-top: 0; }
  .title-art { order: 3; width: min(62%, 260px); margin-block: var(--space-2) var(--space-4); }
  .title-copy nav { order: 4; }
  .title-copy .menu { margin-top: 0; }
  .title-copy .press { order: 5; justify-self: start; margin-top: 0; }
  .title-screen .planet { top: 300px; right: -24px; width: 100px; }
  .scroll-cue { display: none; }
}

/* motto: the title screen's night sky carries on, and the motto sits over the founders' #after-hours chat */
.motto { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--pad-section);
  background: radial-gradient(90% 60% at 50% 115%, var(--orange-glow), transparent 70%), linear-gradient(180deg, var(--void), var(--deep)); }
.motto::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.45;
  background: url("assets/space.webp") center top / max(100%, 1440px) auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 90%); mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 90%); }
.motto-stack { display: grid; justify-items: center; gap: var(--space-9); }
.motto-stack h2 { font-size: var(--step-4); line-height: 0.98; text-align: center; max-width: 14ch; }
/* About is a menu stop: on wide screens it fits one screen too, so it trades its big padding for the centring */
@media (min-width: 861px) { .motto { padding-block: var(--space-7); } }
.chat { width: 100%; max-width: 720px; border-radius: var(--radius-xl); overflow: hidden; background: var(--chat-glass); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chat-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line); background: var(--chat-glass-head); }
.channel { margin: 0; font-weight: 700; color: var(--cream); }
.channel::before { content: "#"; margin-right: 6px; color: var(--muted); font-weight: 500; }
.online { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-label-lg); font-weight: 700; color: var(--muted); }
.online::before { content: ""; order: -1; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--online); box-shadow: 0 0 6px var(--online); }
.online-faces { display: inline-flex; order: -2; }
.online-faces .mini { width: 24px; height: 24px; border-radius: var(--radius-round); object-fit: cover; object-position: 50% 30%; border: 2px solid var(--deep); }
.online-faces .mini + .mini { margin-left: -8px; }
.chat-log { list-style: none; margin: 0; padding: var(--space-3) var(--space-3) var(--space-1); display: grid; gap: var(--space-2); }
.msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.msg-face { width: 44px; height: 44px; border-radius: var(--radius-round); object-fit: cover; object-position: 50% 30%; }
.msg-body { min-width: 0; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); margin: 0; line-height: 1.3; }
.msg-name { font-weight: 700; color: var(--me); }
.msg-time { font-size: var(--text-label); color: var(--muted); }
.msg-text { margin: var(--space-1) 0 0; color: var(--cream); line-height: 1.5; }
.reactions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.reactions span { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 700; color: var(--cream);
  background: var(--chat-react); border: 1px solid var(--chat-react-line); }
/* "Youy is typing..." under the last message, where a chat app shows it */
.chat-typing { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-1) var(--space-6) var(--space-4); font-size: var(--text-label-lg); color: var(--muted); }
.chat-typing b { color: var(--cream); font-weight: 700; }
.dots { display: inline-flex; gap: 4px; padding: 8px 10px; border-radius: 999px; background: var(--chat-react); }
.dots i { width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--muted); animation: typing 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* games: one card per game, Heart Machine style. The card's data-stage drives the progress bar.
   The night sky carries on from the motto: the orange horizon glow straddles the join, and the stars fade back in. */
.games { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--pad-row);
  background: radial-gradient(90% 60% at 50% -15%, var(--orange-glow), transparent 70%), linear-gradient(180deg, var(--deep), var(--void) 55%, var(--deep)); }
.games::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4;
  background: url("assets/space.webp") center bottom / max(100%, 1440px) auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); }
.games .wrap { display: grid; gap: var(--space-10); }
.game-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--space-6), 4vw, var(--space-9)); align-items: center; }
/* the cover: each card sets its own image with --cover (the first game's is a redacted teaser, made by
   tools/make_covers.py from the owner's screens; the originals in source-images/game-teasers never go online) */
.game-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-xs); box-shadow: var(--shadow-cover);
  background: var(--void) var(--cover, none) center / cover no-repeat; }
/* the stamp sits a little above the middle so the lit chair still shows underneath it */
.game-art .cover-stamp { position: absolute; inset: 0 0 22%; display: grid; place-content: center; }
.game-art .cover-stamp span { padding: 10px 22px 5px; border: 4px solid var(--white); border-radius: var(--radius-sm); rotate: -6deg; background: var(--void-75);
  font-family: var(--font-ui); font-size: var(--fluid-stamp); letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; color: var(--white); }
.game-info { min-width: 0; }
.game-info h3 { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: var(--step-3); line-height: 0.95; letter-spacing: 0.02em; }
.game-info .lead { color: var(--blush); font-size: var(--step-0); }
.stage { margin: var(--space-6) 0 0; }
.stage-bar { position: relative; height: 22px; border-radius: var(--radius-sm); background: var(--void-45); border: 2px solid var(--cream); overflow: hidden; }
/* the fill is neon green liquid: one solid colour with a glow, and a rounded front that sloshes forward and back
   (owner's pick, sample 2 of 5) */
.stage-bar span { position: absolute; inset: 0 auto 0 0; width: var(--stage-fill, 0%); background: var(--green); filter: drop-shadow(0 0 6px var(--green)); }
.stage-bar span::after { content: ""; position: absolute; top: -35%; bottom: -35%; left: calc(100% - var(--space-5) / 2); width: var(--space-5);
  border-radius: var(--radius-round); background: var(--green); transform-origin: 0 50%; animation: slosh 1.3s ease-in-out infinite alternate; }
@keyframes slosh { from { transform: rotate(-12deg) scaleX(0.75); } to { transform: rotate(12deg) scaleX(1.2); } }
/* when the card scrolls into view (main.js), the bar fills up; the front only shows once it starts filling */
.stage-anim .stage-bar span { width: 0; }
.stage-anim:not(.is-live) .stage-bar span::after { visibility: hidden; }
.stage-anim.is-live .stage-bar span { width: var(--stage-fill, 0%); transition: width 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.game-card[data-stage="concept"] { --stage-fill: 8%; }
.game-card[data-stage="prototype"] { --stage-fill: 38%; }
.game-card[data-stage="playtests"] { --stage-fill: 70%; }
.game-card[data-stage="launch"] { --stage-fill: 100%; }
.stage-steps { list-style: none; display: flex; justify-content: space-between; margin: var(--space-2) 0 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blush-deep); }
.game-card[data-stage="concept"] [data-step="concept"], .game-card[data-stage="prototype"] [data-step="prototype"],
.game-card[data-stage="playtests"] [data-step="playtests"], .game-card[data-stage="launch"] [data-step="launch"] { color: var(--green); }
.game-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.btn-line { background: transparent; color: var(--cream); }
.btn-line:hover { background: var(--cream); color: var(--berry); }
@media (max-width: 860px) { .game-card { grid-template-columns: minmax(0, 1fr); } }
/* wide screens: the game row has a whole screen, so the card is wider than the other rows and everything in it is
   bigger (owner, 2026-10-22) */
@media (min-width: 861px) {
  .games .wrap { max-width: 1320px; }
  .game-info .kicker { font-size: var(--step-0); }
  .game-info h3 { font-size: var(--step-big); }
  .game-info .lead { font-size: var(--step-lead); }
  .stage-bar { height: var(--space-7); }
  .stage-steps { font-size: var(--text-label-lg); }
  .game-links .btn { font-size: var(--ui-xl); }
}

/* what we value: four studio rules as "Achievement unlocked" pop-ups on the night sky. When the section scrolls
   into view (main.js) they pop in one by one; without script, or with reduced motion, they are simply there. */
.values { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--pad-section) calc(var(--pad-section) + var(--space-9));
  background: linear-gradient(180deg, var(--deep), var(--void) 50%, var(--deep)); }
.values::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4; background: url("assets/space.webp") center / max(100%, 1440px) auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.values-head { margin-bottom: var(--space-8); text-align: center; }
.values-head .sticker { margin-inline: auto; font-size: var(--step-3); }
.toasts { list-style: none; max-width: 980px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.toasts li:nth-child(even) { translate: 0 var(--space-9); }
.toast { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  border-radius: 999px; background: var(--void-85); border: 1px solid var(--line-strong); box-shadow: 0 0 0 4px var(--surface-1), var(--shadow-card); }
.toast h3 { margin: 2px 0 0; font-family: var(--font-ui); font-weight: 400; font-size: var(--ui-xl); letter-spacing: 0.03em; line-height: 1; }
.toast-label { margin: 0; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.toast-desc { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
/* badges: neon hex plates rendered in Blender (art-source/badges/render_badges.py, set "line"), one per value */
.toast { grid-template-columns: 84px minmax(0, 1fr); }
.badge { width: 84px; height: 84px; border-radius: var(--radius-round); background: center / 112% no-repeat; }
.badge-1 { background-image: url("assets/badges/value-1.webp"); }
.badge-2 { background-image: url("assets/badges/value-2.webp"); }
.badge-3 { background-image: url("assets/badges/value-3.webp"); }
.badge-4 { background-image: url("assets/badges/value-4.webp"); }
@media (max-width: 760px) {
  .values { padding-bottom: var(--pad-section); }
  .toasts { grid-template-columns: minmax(0, 1fr); }
  .toasts li:nth-child(even) { translate: none; }
  .toast { border-radius: 40px; }
}
/* the pop-in: each toast slides in, then its badge gives a gold "ding" */
.toasts-anim:not(.is-live) .toast { opacity: 0; }
.toasts-anim.is-live .toast { animation: toast-in 0.6s cubic-bezier(0.2, 0.8, 0.25, 1.15) both; }
.toasts-anim.is-live .toast .badge { animation: ding 0.9s ease-out 0.35s both; }
.toasts-anim.is-live .toast:nth-child(2) { animation-delay: 0.3s; }
.toasts-anim.is-live .toast:nth-child(2) .badge { animation-delay: 0.65s; }
.toasts-anim.is-live .toast:nth-child(3) { animation-delay: 0.6s; }
.toasts-anim.is-live .toast:nth-child(3) .badge { animation-delay: 0.95s; }
.toasts-anim.is-live .toast:nth-child(4) { animation-delay: 0.9s; }
.toasts-anim.is-live .toast:nth-child(4) .badge { animation-delay: 1.25s; }
@keyframes toast-in { from { opacity: 0; transform: translateX(48px) scale(0.94); } }
@keyframes ding { from { box-shadow: 0 0 0 0 var(--gold-70); } to { box-shadow: 0 0 0 18px var(--gold-0); } }
/* wide screens: with the heading alone on top, the pop-ups grow into the screen (the badge art is 252 px, sharp at
   120) and the padding shrinks so the section still fits one screen (owner, 2026-10-22) */
@media (min-width: 861px) { .values { padding-block: var(--space-7) calc(var(--space-7) + var(--space-9)); } }
/* the bigger pop-ups need the room of a 1280 px screen, or the longer titles break onto two lines */
@media (min-width: 1280px) {
  .values .wrap { max-width: 1320px; }
  .toasts { max-width: none; gap: var(--space-6) var(--space-8); }
  .toast { grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4); }
  .badge { width: 120px; height: 120px; }
  .toast h3 { font-size: var(--ui-2xl); }
  .toast-label { font-size: var(--text-label-lg); }
  .toast-desc { font-size: var(--step-0); }
}

/* founders: one trading card each, all three dealt at once, on the night sky. It carries on from What we value
   (which ends deep) into the lobby (which starts void). On phones and small tablets the cards are a swipe row, and
   main.js moves the dots under it to the card in the middle. */
.crew { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--pad-section);
  background: linear-gradient(180deg, var(--deep), var(--void) 60%); }
.crew::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4; background: url("assets/space.webp") center / max(100%, 1440px) auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.crew-head { text-align: center; margin-bottom: clamp(var(--space-7), 4vw, var(--space-9)); }
.crew-head .sticker { margin-inline: auto; font-size: var(--step-3); }
.deck { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 2.6vw, var(--space-8)); }
.tcard { padding: var(--space-2); border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--me), color-mix(in srgb, var(--me) 40%, var(--void)) 55%, var(--me));
  box-shadow: 0 0 0 3px var(--void), 0 0 40px color-mix(in srgb, var(--me) 30%, transparent), var(--shadow-card); transition: transform 0.25s ease; }
.tcard:hover { transform: translateY(-6px); }
.tcard-in { display: grid; gap: var(--space-3); height: 100%; align-content: start; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--void-92); }
.tcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tcard-top h3 { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: var(--ui-2xl); letter-spacing: 0.03em; line-height: 0.9; }
.tcard-tag { padding: 4px var(--space-2) 1px; border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--me); color: var(--me); font-family: var(--font-ui); font-size: var(--ui-md); letter-spacing: 0.06em; line-height: 1; }
.tcard-class { margin: calc(-1 * var(--space-2)) 0 0; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--me); }
/* the portrait with a foil shine across it; the art itself is untouched */
.tcard-art { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 3px solid var(--cream); }
.tcard-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.tcard-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, var(--white-40) 45%, transparent 56%); mix-blend-mode: soft-light; }
.tcard-stats { margin: 0; display: grid; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line); }
/* label over value, so a long game title stays on one line */
.tcard-stats div { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); }
.tcard-stats div + div { border-top: 1px solid var(--line); }
.tcard-stats dt { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tcard-stats dd { margin: 0; font-family: var(--font-ui); font-size: var(--ui-md); letter-spacing: 0.03em; line-height: 1.1; }
.deck-dots { display: none; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.deck-dots span { width: var(--space-2); height: var(--space-2); border-radius: 999px; background: var(--line-strong); transition: width 0.2s ease, background-color 0.2s ease; }
.deck-dots span.on { width: var(--space-6); background: var(--me); }
/* wide screens: the founders fit one screen as well (see main > section). Less padding, and the cards size themselves
   from the screen height: a card is its width plus about 270px of name, class and stats, so the width runs from 260px
   on a short screen up to the full 340px. */
@media (min-width: 861px) {
  .crew { padding-block: var(--space-7); }
  .crew-head { margin-bottom: var(--space-7); }
  .deck { --card-w: clamp(260px, 100vh - 500px, 340px); --card-w: clamp(260px, 100svh - 500px, 340px);
    grid-template-columns: repeat(3, minmax(0, var(--card-w))); justify-content: center; }
}
@media (max-width: 860px) {
  /* the row spans the screen, so vw units centre the first and last cards */
  .deck { --card-w: min(84vw, 340px); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-4) calc(50vw - var(--card-w) / 2) var(--space-5); scrollbar-width: none; }
  .deck::-webkit-scrollbar { display: none; }
  .tcard { flex: 0 0 var(--card-w); scroll-snap-align: center; }
  .deck-dots { display: flex; }
}

/* lobby: the Discord band, on the same night sky as the rest of the page, with a low orange horizon glow */
.lobby { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--pad-band); color: var(--cream);
  background: radial-gradient(80% 60% at 50% 120%, var(--orange-glow), transparent 70%), linear-gradient(180deg, var(--void), var(--deep)); }
.lobby::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4;
  background: url("assets/space.webp") center top / max(100%, 1440px) auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, transparent 95%); mask-image: linear-gradient(180deg, transparent, #000 35%, transparent 95%); }
/* one centred column, like the section headings above it (the founders' lobby list was dropped by the owner: the
   cards above already show them) */
.lobby-row { text-align: center; }
.lobby h2 { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: var(--step-3); line-height: 0.95; }
.lobby .lead { margin-inline: auto; }
.lobby .btn { margin-top: var(--space-6); }
/* until the owner has an invite link, the band says the server is coming instead of showing a dead button */
.lobby .btn-soon, .lobby .btn-soon:hover { margin-bottom: 0; background: transparent; color: var(--cream); border: 3px dashed var(--line-strong); cursor: default; transform: none; }
/* wide screens: the band has a whole screen to itself, so everything in it is bigger (owner, 2026-10-22) */
@media (min-width: 861px) {
  .lobby .kicker { font-size: var(--step-0); margin-bottom: var(--space-4); }
  .lobby h2 { font-size: var(--step-4); }
  .lobby .lead { margin-top: var(--space-6); font-size: var(--step-lead); }
  .lobby .btn { margin-top: var(--space-8); font-size: var(--ui-xl); }
}

/* footer */
.footer { background: var(--black); padding-block: var(--space-9) var(--space-8); }
.footer-socials { display: flex; justify-content: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.footer-socials a { display: grid; place-items: center; width: 52px; height: 52px; color: var(--white); border-radius: var(--radius-lg); }
.footer-socials a:hover { color: var(--hot); }
.footer-socials svg { width: 40px; height: 40px; }
.footer-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6) var(--space-8); margin-top: var(--space-9); }
.footer-mid .brand { font-size: var(--ui-xl); }
.footer-mid .brand img { width: 48px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--white); text-decoration: none; font-family: var(--font-ui); font-size: var(--ui-md); letter-spacing: 0.05em; }
.footer-links a:hover { color: var(--hot); }
.footer-bottom { margin-top: var(--space-8); text-align: center; color: var(--white); font-weight: 600; }
.footer-bottom p { margin: 0; }
.footer-bottom .mail { margin-top: var(--space-2); color: var(--muted); font-weight: 500; }
@media (max-width: 640px) { .footer-mid { justify-content: center; text-align: center; } .footer-links { justify-content: center; } }
/* room under the footer for the follow-you pill, so it never covers the last line */
@media (max-width: 1319px) { .footer { padding-bottom: calc(var(--space-8) + 72px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}