/* Biosic Studios · shared styles
   Space-black and logo blue for the studio; each game page sets its own
   --accent (Hungerhold ember, Larry sun, …). Pixel display font for headings
   and buttons, a high-legibility sans for everything you read. */

/* Self-hosted fonts (SIL Open Font License, see /assets/fonts/OFL-*.txt).
   Variable fonts: one file covers every weight. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/pixelify-sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces: cool space black, matched to the astronaut logo */
  --ground: #0e1116;
  --ground-2: #12161d;
  --panel: #171c24;
  --panel-2: #1e2530;
  --line: #27303c;
  --line-strong: #3a4656;

  /* Text */
  --bone: #e8ebef;   /* 15.8:1 on --ground */
  --dust: #aab4c0;   /*  9.0:1 */
  --dim: #8a95a3;    /*  6.2:1 */

  /* Accents */
  --ember: #ef8a3f;
  --ember-hi: #ffac6b;
  --ember-lo: #8a4a1c;
  --leaf: #93bb60;
  --water: #6cb2dc;
  --sun: #f4cb4d;
  --sky: #0084c4;     /* logo blue: large text, graphics */
  --sky-hi: #3fa9e6;  /* logo blue tint for small text (7:1) */

  /* The page accent. Studio pages use logo blue; game pages override it
     (style="--accent: var(--ember)"). Links, eyebrows, focus rings, primary
     buttons and glows all follow it. */
  --accent: var(--sky-hi);
  --on-accent: #0b0f14;  /* dark text on any accent: ≥ 7:1 */

  /* Type */
  --display: "Pixelify Sans", "Courier New", monospace;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 14px;
  --header-h: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: no-common-ligatures; /* Pixelify's "fl" ligature reads as "A" */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: color-mix(in srgb, var(--accent) 65%, #fff); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: color-mix(in srgb, var(--accent) 35%, #fff); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3 { font-family: var(--display); line-height: 1.1; text-wrap: balance; margin: 0; color: var(--bone); }
h1 { font-size: clamp(2.6rem, 5vw + 1.25rem, 4.75rem); font-weight: 700; letter-spacing: 0.04em; }
h2 { font-size: clamp(1.7rem, 2vw + 1.1rem, 2.4rem); font-weight: 600; letter-spacing: 0.02em; }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.02em; }
p { margin: 0; max-width: 68ch; text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--bone); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: 18px; align-content: start; }
.stack-lg { display: grid; gap: 32px; align-content: start; }
section { padding-block: clamp(56px, 8vw, 104px); }
.band { background: linear-gradient(180deg, var(--ground-2), var(--ground) 85%); border-top: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.grid.games { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.grid.pairs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid > *, .grid3 > *, .split > *, .mini-games > *, .versions > * { min-width: 0; } /* big images can't stretch a column */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr; }
}
/* Section heading: eyebrow + title on the left, an optional link on the right */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.section-head > .stack { gap: 12px; }
.section-head > a { font-weight: 700; text-decoration: none; }
.section-head > a:hover { text-decoration: underline; }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.eyebrow.sky { color: var(--sky-hi); }
.eyebrow::before { content: "✦"; content: "✦" / ""; margin-right: 0.55em; font-size: 0.9em; }
.lede { font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem); color: var(--dust); line-height: 1.55; }
/* The big line under a game's name ("Every life teaches the next.") */
.tagline { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.3rem); line-height: 1.15; letter-spacing: 0.01em; color: var(--accent); text-wrap: balance; }
.muted { color: var(--dust); }
.small { font-size: 0.9rem; }

/* ---------- Screen-reader only ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Things that only work with JavaScript stay hidden without it. */
html:not(.js) .needs-js { display: none !important; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 10px; color: var(--on-accent); }

/* ---------- Header: a floating glass bar ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: 12px; view-transition-name: site-header; }
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  min-height: 62px; padding: 8px 8px 8px 16px;
  background: rgb(20 25 32 / 0.8);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 14px 34px -20px rgb(0 0 0 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.16em;
  color: #d9d9db; text-decoration: none;
}
.brand img { height: 38px; width: auto; margin-block: -4px; }
.brand span { color: var(--sky-hi); }
.brand:hover { color: var(--bone); }

.nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav > ul > li > a, .menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  color: var(--dust); text-decoration: none; font-weight: 600; font-size: 0.975rem; cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.nav > ul > li > a:hover, .menu > summary:hover { color: var(--bone); background: var(--panel-2); }
.nav > ul > li > a[aria-current="page"], .menu:has(a[aria-current="page"]) > summary { color: var(--bone); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
/* A little pixel in each game's color */
.nav .dot { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--c, var(--accent)); box-shadow: 0 0 10px var(--c, var(--accent)); }
.dot.ember { --c: var(--ember); }
.dot.sun { --c: var(--sun); }
/* Header call to action: always logo blue, whatever page you're on */
.nav > ul > li > a.nav-cta { color: var(--on-accent); background: var(--sky-hi); font-weight: 700; margin-left: 4px; box-shadow: 0 3px 0 color-mix(in srgb, var(--sky-hi) 45%, #000); }
.nav > ul > li > a.nav-cta:hover { color: var(--on-accent); background: color-mix(in srgb, var(--sky-hi) 85%, #fff); }

/* Dropdown (Levitating Larry). A native <details>, so it opens without JS;
   site.js adds close-on-outside-click and Escape. */
.menu { position: relative; }
.menu > summary { list-style: none; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease;
}
.menu[open] > summary { color: var(--bone); background: var(--panel-2); }
.menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.menu-list {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 60; translate: -50% 0;
  width: 320px; max-width: calc(100vw - 32px);
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 28px 56px -22px rgb(0 0 0 / 0.95);
}
.menu-list::before { /* little notch pointing at the button */
  content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg;
  background: var(--panel); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
}
@media (prefers-reduced-motion: no-preference) {
  .menu[open] > .menu-list { animation: menu-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.menu-list a {
  display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 14px; padding: 8px 10px 8px 8px;
  border-radius: 12px; color: var(--bone); text-decoration: none;
}
.menu-list a:hover, .menu-list a:focus-visible { background: var(--panel-2); color: var(--bone); }
.menu-list a[aria-current="page"] { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--sun); }
.menu-list b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1.2; }
.menu-list small { display: block; color: var(--dust); font-size: 0.85rem; }
.menu-art {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 45%, rgb(244 203 77 / 0.22), transparent 72%), #0d1117;
}
.menu-art img { width: auto; height: 38px; image-rendering: pixelated; }
.menu-art.encore { background: linear-gradient(180deg, rgb(255 236 170 / 0.32), transparent 70%) 50% 0 / 60% 100% no-repeat, radial-gradient(50% 30% at 50% 92%, rgb(244 203 77 / 0.3), transparent), #0d1117; }

.show-sm { display: none; }
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .site-header { position: static; padding-top: 10px; }
  .site-header .bar { padding: 8px; border-radius: 16px; }
  .site-header .brand { padding-left: 6px; }
  .nav { width: 100%; }
  .nav > ul { justify-content: space-between; }
  .nav > ul > li > a, .menu > summary { padding: 0 11px; }
  .menu-list { width: 300px; }
}

/* ---------- Buttons ---------- */
.btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration: none; border-radius: 10px; border: 0; cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, background-color 120ms ease;
}
/* primary = the page accent (logo blue on studio pages, the game's color on game pages) */
.btn.primary, .btn.accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 45%, #000); }
.btn.primary:hover, .btn.accent:hover { color: var(--on-accent); filter: brightness(1.07); }
.btn.primary:active, .btn.accent:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 45%, #000); }
.btn.ghost { color: var(--bone); background: rgb(14 17 22 / 0.35); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn.ghost:hover { color: var(--bone); box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(-1px); }
.btn.sun { background: var(--sun); color: #1c1605; box-shadow: 0 4px 0 #8f7415; }
.btn.sun:hover { color: #1c1605; filter: brightness(1.05); }
.btn.sun:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f7415; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 0.95rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 112px); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 50% at 5% 100%, rgb(0 132 196 / 0.08), transparent 70%);
}
.hero h1 .accent { color: var(--accent); }
/* Faint starfield behind every hero, a nod to the astronaut. */
.hero::after, .flagship::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, #d9d9db 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 44%, #9fd3f2 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 82%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 26%, #d9d9db 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 64%, #9fd3f2 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 88%, #fff 50%, transparent 51%);
}

/* ---------- Flagship hero (home + Hungerhold) ----------
   Big game art on the right that fades into space on the left, copy on top. */
.flagship {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--header-h)); padding-block: calc(var(--header-h) + clamp(40px, 6vw, 88px)) clamp(48px, 7vw, 96px);
  min-height: min(86vh, 760px); display: grid; align-items: center;
}
.flagship::after { z-index: -2; opacity: 0.5; }
.flagship-art { position: absolute; inset: 0 0 0 26%; z-index: -1; }
.flagship-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 40% 55%); }
.flagship-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ground) 0%, rgb(14 17 22 / 0.86) 16%, rgb(14 17 22 / 0.35) 42%, transparent 64%),
    linear-gradient(0deg, var(--ground) 0%, transparent 26%),
    linear-gradient(180deg, rgb(14 17 22 / 0.7) 0%, transparent 24%);
}
.flagship > .wrap { width: 100%; }
.flagship-copy { max-width: 600px; }
.flagship-copy h1 { font-size: clamp(3rem, 6vw + 1rem, 5.6rem); text-shadow: 0 4px 0 rgb(0 0 0 / 0.35), 0 0 40px rgb(0 0 0 / 0.6); }
.flagship-copy .lede { color: #c9d0d8; text-shadow: 0 1px 12px rgb(0 0 0 / 0.8); }
.flagship-copy .tagline { text-shadow: 0 2px 18px rgb(0 0 0 / 0.75); }
/* Phones and tablets: the art becomes a banner on top, the copy overlaps its faded bottom */
@media (max-width: 860px) {
  .flagship { display: block; min-height: 0; margin-top: 0; padding-top: 0; }
  .flagship-art { position: relative; inset: auto; aspect-ratio: 16 / 10; max-height: 62vh; width: 100%; }
  .flagship-art::after { background: linear-gradient(0deg, var(--ground) 0%, transparent 46%), linear-gradient(180deg, rgb(14 17 22 / 0.5) 0%, transparent 22%); }
  .flagship > .wrap { position: relative; margin-top: -64px; }
  .flagship-copy h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
}

/* ---------- All games page: one row per game ---------- */
.game-entry .frame { border: 1px solid var(--line-strong); box-shadow: 0 22px 48px -22px rgb(0 0 0 / 0.8); }
.game-entry h2 { font-size: clamp(1.9rem, 2.4vw + 1.1rem, 2.8rem); }

/* ---------- What's new / what's next (Hungerhold versions) ---------- */
.versions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .versions { grid-template-columns: 1fr; } }
.version {
  position: relative; display: grid; gap: 18px; align-content: start; overflow: hidden;
  padding: clamp(20px, 3vw, 32px); border-radius: 20px; border: 1px solid var(--line);
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--v, var(--accent)) 18%, transparent), transparent 70%), var(--panel);
}
.version.now { --v: var(--ember); border-color: color-mix(in srgb, var(--ember) 35%, var(--line)); }
.version.next { --v: var(--sky-hi); border: 1px dashed var(--line-strong); background: radial-gradient(80% 60% at 100% 0%, rgb(63 169 230 / 0.12), transparent 70%), var(--ground-2); }
.version h3 { font-size: clamp(1.4rem, 1vw + 1.1rem, 1.75rem); line-height: 1.15; }
.version h3 small { display: block; font-family: var(--body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v); margin-bottom: 6px; }
.version .frame { border: 1px solid var(--line-strong); }
.version .quote { font-family: var(--display); font-size: 1.15rem; color: var(--bone); border-left: 3px solid var(--v); padding-left: 14px; }
/* A list with little pixel bullets in the panel's color */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--dust); max-width: 68ch; }
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--v, var(--accent)); box-shadow: 0 0 8px var(--v, var(--accent)); }
.ticks b { color: var(--bone); }

/* ---------- Contact ---------- */
.contact-band {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 48px; align-items: center;
  padding: clamp(22px, 4vw, 44px); border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--panel);
}
.contact-cta { justify-items: start; }
@media (max-width: 760px) { .contact-band { grid-template-columns: 1fr; } }
.topic-links { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
  color: var(--bone); background: var(--panel-2); border: 1px solid var(--line-strong);
}
.chip-link:hover { color: var(--bone); border-color: var(--accent); }
.email-big { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw + 0.8rem, 2rem); letter-spacing: 0.02em; word-break: break-word; }
.topic { gap: 12px; }
.topic .links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: auto; font-weight: 700; }
.topic .links a { text-decoration: none; }
.topic .links a:hover { text-decoration: underline; }
.topic .for { font-size: 0.85rem; color: var(--dim); }
.linkish { font: inherit; font-weight: 700; color: var(--bone); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.composer { gap: 16px; }
.composer label { display: grid; gap: 6px; font-weight: 700; font-size: 0.9rem; color: var(--dust); }
.composer input, .composer select, .composer textarea {
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--bone);
  background: var(--ground); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; width: 100%;
}
.composer textarea { min-height: 150px; resize: vertical; }
.composer input:focus, .composer select:focus, .composer textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.composer .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .composer .row2 { grid-template-columns: 1fr; } }
.composer .note { font-size: 0.85rem; color: var(--dim); }

/* ---------- Copy button ---------- */
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.copy {
  min-height: 34px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--bone);
  background: var(--panel-2); border: 1px solid var(--line-strong);
}
.copy:hover { border-color: var(--accent); }
.copy.is-done { color: var(--leaf); border-color: var(--leaf); }

/* ---------- Media frames ---------- */
.shot {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  image-rendering: pixelated; background: var(--panel);
  box-shadow: 0 22px 48px -22px rgb(0 0 0 / 0.8);
}
.frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: var(--panel-2);
}
a.frame { display: block; }
.frame > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.frame.pixel > img { image-rendering: pixelated; }
/* Shown behind an image, and on its own if the image fails to load. */
.frame .fallback, .video .fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: 0.06em;
  color: var(--dim);
  background:
    linear-gradient(135deg, transparent 0 48%, rgb(255 255 255 / 0.03) 48% 52%, transparent 52%) 0 0 / 16px 16px,
    var(--panel-2);
}
.frame > img.is-broken, .video > img.is-broken { display: none; }
/* .fit: show the whole picture (no cropping) on a backdrop that matches the
   art's own edge color, for covers that aren't 16:9. Set --fit-bg per frame. */
.frame.fit { background: var(--fit-bg, var(--panel-2)); }
.frame.fit > img { object-fit: contain; }
.frame.fit:has(> img:not(.is-broken)) > .fallback { display: none; }
.video .fallback { place-items: end center; padding-bottom: 12%; }

/* Space frame: starfield + a glow, for the astronaut and Larry */
.frame.space-frame { background: radial-gradient(60% 80% at 50% 40%, rgb(0 132 196 / 0.25), transparent 70%), #0d1117; display: grid; place-items: center; }
.frame.space-frame::before {
  content: ""; position: absolute; inset: 0; opacity: 0.8;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 32% 70%, #cfe8f7 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 14%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 26%, #cfe8f7 50%, transparent 51%), radial-gradient(1px 1px at 92% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 84%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 44% 88%, #cfe8f7 50%, transparent 51%);
}
.frame.space-frame > .astro { position: relative; z-index: 1; width: auto; height: 62%; object-fit: contain; }
/* Warm variant + pixel sprite (Levitating Larry): the 22×29 sprite is scaled up crisp */
.frame.space-frame.warm { background: radial-gradient(55% 75% at 50% 45%, rgb(244 203 77 / 0.16), transparent 70%), #0d1117; }
.frame.space-frame > .sprite {
  position: relative; z-index: 1; width: auto; height: 66%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgb(244 203 77 / 0.35)) drop-shadow(0 0 1px rgb(255 240 200 / 0.6));
}
/* Spotlight variant (Levitating Larry Encore): a stage light from above */
.frame.space-frame.spotlight {
  background:
    radial-gradient(42% 14% at 50% 90%, rgb(244 203 77 / 0.28), transparent 72%),
    conic-gradient(from 160deg at 50% -8%, transparent 0deg, rgb(255 236 170 / 0.2) 14deg, rgb(255 236 170 / 0.2) 26deg, transparent 40deg),
    #0b0d12;
}
.frame.space-frame.spotlight::before { opacity: 0.45; }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 60%, var(--ground)));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: grid; gap: 10px; align-content: start;
}
.card h2 { font-size: 1.35rem; letter-spacing: 0.02em; }
.game-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; display: grid; grid-template-rows: auto 1fr;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 160ms ease, box-shadow 160ms ease;
}
.game-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 22px 40px -22px rgb(0 0 0 / 0.9), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.game-card .frame > img { transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.game-card:hover .frame > img { transform: scale(1.04); }
.game-card:hover .frame > img.sprite { transform: none; }
.game-card .frame { border-radius: 0; border-bottom: 1px solid var(--line); }
.game-card .body { padding: 18px 20px 20px; display: grid; gap: 10px; align-content: start; }
.game-card h3 { font-size: 1.25rem; }
.game-card .links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-weight: 700; }
.game-card .links a { text-decoration: none; }
.game-card .links a:hover { text-decoration: underline; }
.game-card .frame-link { display: block; }
.game-card .frame-link:hover img { filter: brightness(1.08); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dust); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.badge.dev { color: var(--ember-hi); box-shadow: inset 0 0 0 1px rgb(239 138 63 / 0.5); }
.badge.live { color: var(--leaf); box-shadow: inset 0 0 0 1px rgb(147 187 96 / 0.5); }
.badge.classic { color: var(--sun); box-shadow: inset 0 0 0 1px rgb(244 203 77 / 0.45); }
.badge.soon { color: var(--water); box-shadow: inset 0 0 0 1px rgb(108 178 220 / 0.5); }
.badge.lg { padding: 6px 14px; font-size: 0.8rem; background: rgb(14 17 22 / 0.7); backdrop-filter: blur(6px); }
/* A pulsing "live" light */
.badge.live.lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 rgb(147 187 96 / 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .badge.live.lg::before { animation: pulse 2s ease-out infinite; }
}
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgb(147 187 96 / 0); } 100% { box-shadow: 0 0 0 0 rgb(147 187 96 / 0); } }

/* ---------- Lists / misc ---------- */
.list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--dust); max-width: 68ch; }
.list b { color: var(--bone); }

/* Screenshot gallery: thumbnails that open the full-size shot */
.gallery figure { margin: 0; display: grid; gap: 8px; }
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.gallery img { display: block; width: 100%; height: auto; transition: transform 200ms ease; }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.03); }
.gallery figcaption { font-size: 0.9rem; color: var(--dust); }
.divider { border: 0; border-top: 1px dashed var(--line-strong); margin: 0; }
.callout {
  border-left: 3px solid var(--accent); background: var(--panel); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0;
}

/* Fine print that folds away (trailer credits) */
.fineprint { color: var(--dust); font-size: 0.9rem; }
.fineprint > summary { cursor: pointer; font-weight: 700; width: max-content; max-width: 100%; }
.fineprint > summary:hover { color: var(--bone); }
.fineprint[open] > summary { margin-bottom: 10px; }
.fineprint .list { font-size: 0.9rem; }
/* A boxed aside with a bit of personality (About the goat) */
.callout.goat { display: grid; gap: 6px; max-width: 760px; padding: 18px 22px; background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--panel); }
.callout.goat p { color: var(--dust); }

/* ---------- Timeline (series pages) ---------- */
.timeline { display: grid; gap: 16px; counter-reset: step; }
.timeline .card { grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; }
.timeline .year {
  grid-row: span 3; min-width: 4.5ch; padding-top: 2px;
  font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--sun);
}
.timeline .card > :not(.year) { grid-column: 2; }
.timeline .card.next { border-style: dashed; background: transparent; }
.timeline .card.next .year { color: var(--water); }

/* ---------- Video (click to load) ---------- */
.video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 160ms ease; }
.video:hover > img { opacity: 1; }
.video .play {
  position: absolute; inset: 0; z-index: 2; margin: auto; width: 76px; height: 54px; border-radius: 12px;
  background: var(--accent); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 45%, #000);
  display: grid; place-items: center;
}
.video .play::before { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--on-accent); margin-left: 4px; }
.video iframe, .video video { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.video.trailer { border-radius: 20px; box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.95), 0 0 0 1px var(--line-strong); }
/* Play button sits in the poster's empty bottom-left corner so it never covers the text */
.video.trailer .play { inset: auto auto clamp(12px, 3vw, 28px) clamp(12px, 3vw, 28px); width: clamp(60px, 9vw, 88px); height: clamp(44px, 6.4vw, 62px); }
.video.trailer > img { opacity: 0.92; }

/* ---------- Levitate (Larry) ---------- */
.levitate { display: block; }
@keyframes levitate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: no-preference) {
  .levitate { animation: levitate 3.2s ease-in-out infinite; }
}
.theme-sun { --accent: var(--sun); }
.trio { color: var(--sun); letter-spacing: 0.2em; font-size: 0.8em; white-space: nowrap; }
a.trio { text-decoration: none; }
a.trio:hover { color: var(--bone); }

/* ---------- More games strip (game pages) ---------- */
.mini-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.mini-game {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 10px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--bone); text-decoration: none;
  transition: border-color 140ms ease, transform 200ms ease;
}
.mini-game:hover { color: var(--bone); border-color: var(--line-strong); transform: translateY(-2px); }
.mini-game .frame { border-radius: 8px; }
.mini-game .frame .fallback { font-size: 0.7rem; padding: 4px; }
.mini-game b { display: block; font-family: var(--display); font-weight: 600; letter-spacing: 0.03em; }
.mini-game span { font-size: 0.85rem; color: var(--dust); }

/* ---------- Press kit ---------- */
.theme-sky { --accent: var(--sky-hi); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.facts dt { color: var(--dim); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 12px; } }
.asset .preview { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; background: #111; padding: 16px; }
.asset .preview { position: relative; overflow: hidden; }
.asset .preview img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { display: grid; grid-template-columns: 44px auto; gap: 4px 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.swatch i { grid-row: span 2; width: 44px; height: 44px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.swatch code { font-size: 0.9rem; color: var(--dust); }

/* ---------- Charm ---------- */
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 0.8; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) translateY(-2px); } 60% { transform: rotate(10deg); } }
@keyframes drift { 0% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(-18px, -22px) rotate(10deg); } 100% { transform: translate(0, 0) rotate(-8deg); } }
@keyframes beam-up { to { transform: translateY(-60px) scale(0.6); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero::after, .frame.space-frame::before { animation: twinkle 3.8s ease-in-out infinite alternate; }
  .brand img { animation: bob 4.5s ease-in-out infinite; transform-origin: 50% 60%; }
  .brand:hover img { animation: wiggle 0.7s ease-in-out; }
  .drift { animation: drift 9s ease-in-out infinite; }
}
.lost-astro { width: min(70%, 260px); margin-inline: auto; filter: drop-shadow(0 20px 30px rgb(0 132 196 / 0.25)); }

/* Back to top: a little astronaut that beams you up (added by site.js) */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 50% 40%, rgb(0 132 196 / 0.35), var(--panel) 70%);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.8);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--sky-hi); }
.to-top img { width: auto; height: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .to-top img { animation: bob 4.5s ease-in-out infinite; }
  .to-top.is-beaming img { animation: beam-up 420ms ease-in forwards; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 40px 44px; color: var(--dust); font-size: 0.95rem; background: var(--ground-2); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.site-footer h2 { font-size: 0.8rem; font-family: var(--body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--dust); text-decoration: none; }
.site-footer a:hover { color: var(--bone); text-decoration: underline; }
.site-footer .legal { max-width: none; grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; color: var(--dim); font-size: 0.875rem; }
@media (max-width: 700px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .about { grid-column: 1 / -1; } }

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}