@font-face { font-family: 'Shippori Mincho'; font-weight: 400; font-display: swap; src: url('/site/fonts/shippori-mincho-regular.woff2') format('woff2'); }
@font-face { font-family: 'Shippori Mincho'; font-weight: 600; font-display: swap; src: url('/site/fonts/shippori-mincho-semibold.woff2') format('woff2'); }

:root {
  --night: #0d0906;     /* the alley, matches the video's darks */
  --paper: #f1e6d6;
  --gold: #c8973a;      /* main-menu button gold, from the game */
  --gold-bright: #ffd16a;
  --gold-deep: #9a6e20;
  --bar: 3rem;          /* fixed footer height; page content clears it */
}

* { box-sizing: border-box; }
html {
  background: var(--night);
  color-scheme: dark;
  scroll-snap-type: y mandatory; /* two full pages: street, then inside */
  scrollbar-width: thin;
  scrollbar-color: rgb(241 230 214 / .25) var(--night);
}
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 400 1.125rem/1.6 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hero: the rainy entrance loop, logo and pitch on the pavement in front of it. */
.hero, .signup { scroll-snap-align: start; }

/* Mouse/keyboard: site.js holds the page still and slides <main> one page at a time. */
html.glide { overflow: clip; scroll-snap-type: none; }
html.glide main {
  translate: 0 calc(var(--page, 0) * -100svh);
  transition: translate 1.1s cubic-bezier(.65, 0, .35, 1); /* GLIDE_MS in site.js */
  will-change: translate;
}
html.glide main.no-transition { transition: none; }
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-video.is-active { opacity: 1; }
.hero::after {
  /* shade the roof behind the logo and the wet pavement under the text */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(13 9 6 / .45), transparent 22% 50%, rgb(13 9 6 / .75) 78%, var(--night));
}
/* Pitch and links down on the pavement; the logo above them (placement per orientation below). */
.hero-text {
  text-wrap: balance;
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: max(6svh, 40px) 16px calc(var(--bar) + max(7svh, 64px)); /* clear of the chevron and bar */
  text-align: center;
  text-shadow: 0 2px 14px #000;
}
.hero h1 { margin: 0 0 auto; padding-bottom: 1.5rem; line-height: 0; } /* portrait: up on the roof */
.logo { width: min(640px, 82vw, 62svh); height: auto; filter: drop-shadow(0 4px 24px rgb(0 0 0 / .8)); }
.pitch { max-width: 34ch; margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; }
.hook { margin: .5rem 0 1.75rem; opacity: .8; font-style: italic; }
.hook span { display: block; } /* one question per line */
.when { margin: 1rem 0 0; font-size: .95rem; opacity: .65; letter-spacing: .06em; }
@media (orientation: landscape) {
  /* Landscape: the logo sits in the gap between the noren (bottom edge ~37% down the frame) and the
     pitch, sized to that gap. Short windows squeeze the gap above first, so the logo rides up over
     the noren rather than shrinking below 120px or covering the text. */
  .hero-text { height: 100svh; padding-top: 0; justify-content: flex-end; }
  .hero-text::before { content: ''; flex: 0 1 37svh; min-height: max(6svh, 40px); }
  .hero h1 { position: relative; flex: 1 1 0; min-height: 120px; max-height: 250px; width: min(640px, 82vw); margin: 0 0 1.5rem; padding: 0; }
  .logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
}
@media (orientation: landscape) and (max-height: 860px) {
  /* Laptop heights: single-line pitch and hook and tighter spacing, to leave the logo its gap. */
  .hero h1 { min-height: 96px; margin-bottom: 1rem; }
  .pitch { max-width: none; font-size: 1.3rem; }
  .hook { max-width: none; margin: .25rem 0 1rem; font-size: 1rem; }
  .when { margin-top: .5rem; }
  .hero .socials { margin-top: .5rem; }
  .hero-text { padding-bottom: calc(var(--bar) + 56px); }
  .more { bottom: calc(var(--bar) + 4px); }
}

/* Calls to action: the game's main-menu text buttons (design/main-menu-text-buttons.html, variant 02).
   The brush stroke rests half-drawn so they read as links, and sweeps out on hover. */
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.75rem; }
.cta {
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 4px 0 10px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: .08em;
  color: var(--gold);
  text-decoration: none;
  outline: none;
  transition: color .2s cubic-bezier(.25, .46, .45, .94), transform .12s cubic-bezier(.25, .46, .45, .94);
}
.cta svg { width: 20px; height: 20px; fill: currentColor; }
button.cta { background: none; border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.cta::after {
  content: '';
  position: absolute; left: 10%; bottom: 0;
  width: 80%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright) 20%, var(--gold-bright) 80%, transparent);
  filter: blur(.5px);
  opacity: .45;
  transition: width .3s cubic-bezier(.16, 1, .3, 1), left .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.cta:hover, .cta:focus-visible { color: var(--gold-bright); }
.cta:hover::after { opacity: 1; }
.cta:focus-visible::after { width: 100%; left: 0; opacity: .8; }
.cta:active { color: var(--gold-deep); transform: scale(.96); transition-duration: 60ms; }
.cta:active::after { width: 40%; left: 30%; opacity: .6; }

/* The hero fills the screen, so hint that the page continues. */
.more {
  position: absolute; bottom: calc(var(--bar) + 12px); left: 50%; z-index: 1;
  translate: -50% 0;
  display: grid; place-items: center; width: 44px; height: 44px;
  opacity: .6;
  transition: opacity .2s;
}
.more:hover, .more:focus-visible { opacity: 1; }
.more svg { width: 26px; height: 26px; fill: none; stroke: var(--paper); stroke-width: 1.5; filter: drop-shadow(0 1px 6px #000); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .more svg { animation: nudge 2.4s ease-in-out infinite; }
}
@keyframes nudge { 50% { translate: 0 5px; } }

/* Ambience toggle: sound needs a click before browsers allow it. */
.sound {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: .45rem .9rem;
  font: inherit; font-size: .9rem;
  color: var(--paper);
  background: rgb(13 9 6 / .35);
  border: 1px solid rgb(241 230 214 / .25);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s, border-color .2s;
}
.sound:hover, .sound:focus-visible, .sound[aria-pressed="true"] { opacity: 1; border-color: rgb(241 230 214 / .5); }

/* Second page: inside the bar, the sign-up on the dark floor in front of the counter. */
.signup {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 16px;
  background: linear-gradient(to bottom, transparent 45%, rgb(13 9 6 / .8) 75%, var(--night)),
              url('/site/media/bar-1920.webp') 30% center / cover;
  text-align: center;
}
@media (max-width: 1000px) {
  .signup { background-image: linear-gradient(to bottom, transparent 45%, rgb(13 9 6 / .8) 75%, var(--night)), url('/site/media/bar-1280.webp'); }
}
/* Screenshot carousel: a native snap strip, so swiping and trackpads work without script. */
.gallery {
  position: relative;
  /* as tall as the page leaves room for (sign-up and bar below), up to 1280px wide */
  width: min(100%, calc(clamp(200px, 100svh - 440px, 720px) * 16 / 9));
  margin: 0 auto 2.5rem;
}
.gallery-track img { cursor: zoom-in; }
.gallery-full {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 40px; height: 40px;
  padding: 0;
  background: rgb(13 9 6 / .35);
  border: 1px solid rgb(241 230 214 / .25);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
}
.gallery-full:hover, .gallery-full:focus-visible { opacity: 1; }
.gallery-full svg { width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 1.5; }

/* Full screen viewer (site.js animates the screenshot in from the strip). */
html.viewing { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: rgb(0 0 0 / .94);
  cursor: zoom-out;
}
.viewer[hidden] { display: none; }
.viewer img { width: min(100vw, 100vh * 16 / 9); height: auto; aspect-ratio: 16 / 9; transform-origin: 0 0; }
.viewer-close {
  position: fixed; top: 16px; right: 16px;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0;
  background: rgb(13 9 6 / .5);
  border: 1px solid rgb(241 230 214 / .25);
  border-radius: 50%;
  cursor: pointer;
}
.viewer-close svg { width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 1.5; }

/* Trailer player: a modal <dialog>, so focus trapping, Escape and stacking come with it. */
.trailer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgb(0 0 0 / .94);
  color: var(--paper);
}
.trailer[open] { display: grid; place-items: center; }
.trailer::backdrop { background: none; }
.trailer video { width: min(100vw, 100dvh * 16 / 9); aspect-ratio: 16 / 9; background: #000; }
.trailer-end {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: rgb(13 9 6 / .7);
}
.trailer-end[hidden] { display: none; }
.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 3px;
  box-shadow: 0 10px 40px rgb(0 0 0 / .7);
}
.gallery-track img {
  flex: 0 0 100%;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  scroll-snap-align: center;
  display: block;
}
.gallery-step {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0;
  background: rgb(13 9 6 / .35);
  border: 1px solid rgb(241 230 214 / .25);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
}
.gallery-step:hover, .gallery-step:focus-visible { opacity: 1; }
.gallery-step[data-step="-1"] { left: 12px; }
.gallery-step[data-step="1"] { right: 12px; }
.gallery-step svg { width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 1.5; }
.gallery-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--paper); opacity: .3; transition: opacity .3s; }
.gallery-dots span.is-current { opacity: .9; }

.signup-inner { width: 100%; max-width: 34rem; margin: 0 auto calc(var(--bar) + 8svh); text-shadow: 0 2px 14px #000; }
.signup h2 { margin: 0 0 1.25rem; font-size: 1.4rem; font-weight: 600; }
.signup-form { display: flex; gap: .5rem; }
.signup-form input {
  flex: 1; min-width: 0;
  padding: .7rem .9rem;
  font: inherit; font-size: 1rem;
  color: var(--paper);
  background: rgb(241 230 214 / .06);
  border: 1px solid rgb(241 230 214 / .3);
  border-radius: 3px;
}
.signup-form input::placeholder { color: rgb(241 230 214 / .45); }
.signup-form input:focus { outline: none; border-color: rgb(241 230 214 / .6); }
.signup-form button {
  padding: .7rem 1.2rem;
  font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgb(241 230 214 / .35);
  border-radius: 3px;
  cursor: pointer;
}
.signup-form button:hover, .signup-form button:focus-visible { background: rgb(241 230 214 / .12); border-color: rgb(241 230 214 / .6); }
.signup-form button:disabled { opacity: .5; cursor: default; }
.signup-status { min-height: 1.6em; margin: .75rem 0 0; font-size: .95rem; }
.signup-status.error { color: #e8845c; }

.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .5rem; margin-top: 1.25rem; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; opacity: .7; transition: opacity .2s; }
.socials a:hover, .socials a:focus-visible { opacity: 1; }
.socials svg { width: 20px; height: 20px; fill: var(--paper); filter: drop-shadow(0 1px 6px #000); }

/* Fixed bar: the pages scroll behind it. */
footer {
  position: fixed; inset: auto 0 0; z-index: 3;
  height: calc(var(--bar) + 3rem); /* the fade starts above the bar */
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  padding: 3rem 16px 0;
  background: linear-gradient(transparent, rgb(13 9 6 / .85) 60%);
  pointer-events: none; /* the fade mustn't block the chevron beneath it */
  font-size: .85rem;
  color: rgb(241 230 214 / .6);
}
footer nav { display: flex; gap: 1.5rem; }
footer a { text-decoration: none; pointer-events: auto; }
footer a:hover, footer a:focus-visible { color: var(--paper); }

@media (max-width: 480px) {
  .signup-form { flex-direction: column; }
}

/* Press kit: one long page, scrolled normally. */
.press { padding: 0 16px calc(var(--bar) + 5rem); }
.press h2 { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 600; color: var(--gold); letter-spacing: .04em; }
.press h3 { margin: 1.75rem 0 .5rem; font-size: 1.15rem; font-weight: 600; }
.press a:not(.cta) { color: var(--gold); text-underline-offset: 3px; text-decoration-color: rgb(200 151 58 / .45); }
.press a:not(.cta):hover, .press a:not(.cta):focus-visible { color: var(--gold-bright); text-decoration-color: currentColor; }

.press-head { margin: 0 -16px; text-align: center; }
/* Entrance shot with the logo on it, fading into the page. */
.press-banner { position: relative; display: grid; place-items: center; }
.press-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(13 9 6 / .35), transparent 30% 60%, var(--night)); }
.press-art { display: block; width: 100%; height: min(56.25vw, 75svh); object-fit: cover; object-position: center 35%; }
/* on the wet pavement, below the noren */
.press-logo { position: absolute; bottom: 9%; z-index: 1; width: min(520px, 60vw); height: auto; filter: drop-shadow(0 4px 24px rgb(0 0 0 / .8)); }
.press-head h1 { margin: 2rem 0 .25rem; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: .08em; }

.press-intro {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 40rem); gap: 4rem;
  justify-content: center;
  margin: 4.5rem auto 0;
}
@media (max-width: 860px) { .press-intro { grid-template-columns: minmax(0, 40rem); gap: 3rem; } }

.facts dl { margin: 0; font-size: 1rem; }
.facts dt { margin-top: 1rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: .15rem 0 0; }
.facts-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.facts-note { font-size: .9rem; opacity: .6; }
.facts .recognition-title { margin-top: 2.5rem; }
.about ul + p { margin-top: 1rem; }
.recognition { margin: 0; padding: 0; list-style: none; font-size: 1rem; }
.recognition li + li { margin-top: .9rem; }
.recognition strong { display: block; font-weight: 600; color: var(--gold-bright); }
.recognition span { font-size: .9rem; opacity: .65; }

.about section + section { margin-top: 3rem; }
.about p { margin: 0 0 1rem; }
.about .lede { font-size: 1.3rem; line-height: 1.5; }
.about ul { margin: 0; padding-left: 1.25rem; }
.about li { margin-bottom: .4rem; }
.about li::marker { color: var(--gold); }
.about .note { margin-top: 1.75rem; padding: 1rem 1.25rem; border-left: 2px solid var(--gold-deep); background: rgb(241 230 214 / .04); font-size: 1rem; }

.press-media { max-width: 64rem; margin: 5rem auto 0; }
.press-video { display: block; width: 100%; height: auto; background: #000; }
.press-download { margin: .75rem 0 0; font-size: .95rem; }
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 2rem 1.5rem; align-items: start; }
.asset { margin: 0; }
.asset a { display: block; }
.asset img { display: block; width: 100%; height: auto; box-shadow: 0 8px 30px rgb(0 0 0 / .5); transition: opacity .2s; }
.asset a:hover img, .asset a:focus-visible img { opacity: .85; }
.asset-tall img { max-height: 24rem; width: auto; max-width: 100%; }
.asset-logo a { position: relative; aspect-ratio: 16 / 9; background: rgb(241 230 214 / .05); }
.asset-logo img { position: absolute; inset: 1.5rem; width: calc(100% - 3rem); height: calc(100% - 3rem); object-fit: contain; box-shadow: none; }
.asset figcaption { margin-top: .6rem; font-size: .9rem; line-height: 1.45; opacity: .7; }

footer a[aria-current="page"] { color: var(--paper); }
.asset-light a { background: var(--paper); }
.asset-fit img { max-height: 20rem; width: auto; max-width: 100%; }
.asset-render a { aspect-ratio: 1; }
.asset-white a { background: #fff; }
.press-track { margin: 0 0 .75rem; font-size: 1.2rem; }
.press-track span { opacity: .6; }
.press-audio { display: block; width: 100%; max-width: 32rem; }
.press-terms { margin: .5rem 0 0; font-size: .95rem; opacity: .7; }
.press-zip { margin: .75rem 0 0; font-size: .9rem; opacity: .7; }

/* Links page (links.starball.game): one column of tappable rows over the rainy entrance. */
.links-page {
  min-height: 100svh;
  background: linear-gradient(to bottom, rgb(13 9 6 / .55), rgb(13 9 6 / .8) 45%, var(--night)),
              url('/site/media/press/entrance-1280.webp') center top / cover no-repeat var(--night);
}
.links {
  width: 100%; max-width: 26rem;
  margin: 0 auto; padding: 2.5rem 16px 2rem;
  text-align: center; text-shadow: 0 2px 14px #000;
}
.links h1 { margin: 0; }
.links-logo { width: min(13rem, 55vw); height: auto; filter: drop-shadow(0 4px 24px rgb(0 0 0 / .8)); }
.links-list { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.link {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1rem;
  font: inherit; font-size: 1.1rem; letter-spacing: .04em;
  color: var(--paper); text-decoration: none;
  background: rgb(13 9 6 / .55);
  border: 1px solid rgb(241 230 214 / .3);
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.link svg { width: 20px; height: 20px; fill: currentColor; }
.link:hover, .link:focus-visible { outline: none; background: rgb(241 230 214 / .1); border-color: rgb(241 230 214 / .6); }
.link-primary { color: var(--gold-bright); border-color: rgb(200 151 58 / .7); }
.link-primary:hover, .link-primary:focus-visible { background: rgb(200 151 58 / .15); border-color: var(--gold-bright); }
.links-signup { margin-top: 2rem; }
.links-signup h2 { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 600; }
.links-signup .signup-form { flex-direction: row; }
.links-socials { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.links-socials .link { font-size: 1rem; padding: .8rem .75rem; }
.links-socials .link:last-child:nth-child(odd) { grid-column: 1 / -1; }
.links-foot { margin: 1.5rem 0 0; font-size: .95rem; opacity: .7; }
.links-foot a { color: inherit; }