/* Spatial Arcade: one stylesheet for every page. No third-party requests: fonts are self-hosted (OFL, see fonts/). */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* Tokens, taken from the app icon: night sky, magenta grid, sunset, cyan sight ring, red bullseye. The site is dark in
   both OS appearances (the icon's world is night), so contrast is designed once, against the night. */
:root {
  color-scheme: dark;
  --night: #120a2e;
  --night-2: #1b0f3d;
  --plum: #3b1460;
  --grid: #ff3ec8;
  --sun-top: #ffd45e;
  --sun-low: #ff8a7a;
  --ring: #9cf6ff;
  --bull: #ff4a5e;
  --ink: #f6f0ff;
  --muted: #c4b8e6;
  --faint: #8f80bd;
  --line: rgb(156 246 255 / 0.18);

  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: 16px;
  --measure: 38rem;
  --wide: 72rem;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --step-4: clamp(3.5rem, 2rem + 8vw, 8.5rem);
}
@media (min-width: 40rem) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ring); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.05; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--ink); color: var(--night); padding: 0.5rem 1rem; z-index: 10; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ header */

.site-head {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 18px;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em;
  white-space: nowrap;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-nav { display: flex; gap: 1.1rem; font-size: var(--step--1); }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--grid); }
@media (max-width: 23rem) { .site-nav .nav-optional { display: none; } }

/* ------------------------------------------------------------------ hero: the cabinet at dusk */

.hero {
  --horizon: 78%;
  position: relative;
  min-height: max(40rem, 100svh);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 70% 72%, rgb(255 62 200 / 0.20), transparent 60%),
    linear-gradient(180deg, #0d0724 0%, var(--night-2) 40%, var(--plum) 76%, #4b1670 78%);
}
.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* the sun sits on the horizon (70% down), cut by the floor */
.sun {
  position: absolute;
  left: 50%; top: var(--horizon);
  width: min(64vw, 25rem); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sun-top) 0%, #ffb067 38%, var(--sun-low) 50%, var(--sun-low) 100%);
  clip-path: inset(0 0 50% 0);
}
.hero-sky::before {
  content: ""; position: absolute; left: 50%; top: var(--horizon); width: min(110vw, 52rem); aspect-ratio: 2 / 1;
  transform: translate(-50%, -100%);
  background: radial-gradient(50% 100% at 50% 100%, rgb(255 150 110 / 0.28), transparent 70%);
}
@media (min-width: 60rem) { .hero-sky::before { left: 68%; } }
@media (min-width: 60rem) { .sun { left: 68%; } }

/* the floor: a magenta grid running to the horizon */
.floor {
  position: absolute; left: -50%; right: -50%; top: var(--horizon); bottom: 0;
  perspective: 22vh;
  perspective-origin: 50% 0;
  overflow: hidden;
  background: linear-gradient(180deg, #2a0a44, #160626);
}
.floor::before {
  content: "";
  position: absolute; inset: 0 0 -100% 0;
  transform-origin: 50% 0;
  transform: rotateX(62deg);
  background-image:
    linear-gradient(90deg, var(--grid) 2px, transparent 2px),
    linear-gradient(180deg, var(--grid) 2px, transparent 2px);
  background-size: 64px 64px;
  background-position: center 0;
  animation: floor-run 2.4s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.floor::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: #ff9be0; box-shadow: 0 0 18px 2px rgb(255 62 200 / 0.8);
}
@keyframes floor-run { to { background-position: center 64px; } }

/* the sight: the icon's crosshair, aiming at the sun; on a fine pointer it follows the pointer (site.js) */
.sight {
  position: absolute;
  left: 50%; top: var(--horizon);
  width: min(96vw, 36rem);
  transform: translate(calc(-50% + var(--aim-x, 0px)), calc(-58% + var(--aim-y, 0px)));
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 0 10px rgb(156 246 255 / 0.55));
}
@media (min-width: 60rem) { .sight { left: 68%; } }
.sight .ring { stroke: var(--ring); }
.sight .bars { fill: #fff; }
.sight .dot { fill: var(--bull); }
.sight .ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring-draw 1.1s 0.2s cubic-bezier(.6,0,.2,1) forwards; }
.sight .bars { opacity: 0; animation: settle 0.5s 0.9s ease-out forwards; }
.sight .dot { transform-origin: 50% 50%; transform-box: fill-box; transform: scale(0); animation: pop 0.35s 1.25s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { to { transform: scale(1); } }

.hero-copy {
  position: relative;
  padding-top: 7rem;
  padding-bottom: calc(100svh * 0.22 - 2.5rem);
}
.hero h1 {
  font-size: var(--step-4);
  font-weight: 850;
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 30px rgb(18 10 46 / 0.6);
}
.hero h1 span { display: block; }
.hero .tagline {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.1;
  color: #ffe2b8;
  margin: 1rem 0 0.75rem;
  max-width: 30ch;
}
.hero .lede {
  max-width: 34rem;
  color: var(--ink);
  font-size: var(--step-0);
  text-shadow: 0 1px 12px rgb(18 10 46 / 0.9);
}
/* on small screens the text sits above the sun; keep it legible over the grid */
@media (max-width: 59.99rem) {
  .hero { align-items: start; }
  .hero { --horizon: 84%; }
  .hero-copy { padding-top: 6.5rem; padding-bottom: 48vh; }
}

/* ------------------------------------------------------------------ store button (not Apple's badge) */

.store {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.7rem 1.2rem 0.75rem 0.9rem;
  border: 1.5px solid var(--ring);
  border-radius: 14px;
  background: rgb(18 10 46 / 0.72);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
  margin-top: 0.5rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.store svg { grid-row: span 2; width: 28px; height: 28px; }
.store strong { font-weight: 650; font-size: 1.0625rem; }
.store small { color: var(--muted); font-size: var(--step--1); }
a.store:hover { background: rgb(156 246 255 / 0.12); }
.store[aria-disabled="true"] { cursor: default; }

/* ------------------------------------------------------------------ sections */

.section { padding-block: clamp(4rem, 10vw, 8rem); }
.section-head { max-width: var(--measure); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head p { color: var(--muted); font-size: var(--step-1); line-height: 1.45; margin-top: 1rem; }

/* features: a sight marker beside each line, two columns from tablet up */
.features {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2.25rem 3.5rem;
}
@media (min-width: 46rem) { .features { grid-template-columns: 1fr 1fr; } }
.features li {
  display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 1rem;
}
.features li > svg { width: 2.25rem; height: 2.25rem; margin-top: 0.1rem; }
.features h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.features p { color: var(--muted); margin: 0; max-width: 34rem; }

.mini-sight circle { fill: none; stroke: var(--ring); stroke-width: 2; }
.mini-sight path { stroke: var(--ink); stroke-width: 2.5; }
.mini-sight .c { fill: var(--bull); stroke: none; }

/* ------------------------------------------------------------------ the app itself: real captures, not pixel art */

.showcase {
  background:
    radial-gradient(70% 45% at 50% 38%, rgb(255 62 200 / 0.12), transparent 70%),
    var(--night);
}
.screens { display: grid; gap: 2.5rem 1.75rem; align-items: start; }
.screen { margin: 0; min-width: 0; }
.screen picture { display: block; }
.screen img {
  width: 100%;
  background: #0b0620;
  border: 1px solid rgb(156 246 255 / 0.35);
  border-radius: 10px;
  box-shadow: 0 0 0 5px #07041a, 0 0 0 6px rgb(255 62 200 / 0.35), 0 30px 60px -20px rgb(0 0 0 / 0.8);
}
.screen figcaption { margin-top: 0.9rem; font-size: var(--step--1); color: var(--muted); max-width: var(--measure); }
.screen figcaption b { color: var(--ink); font-weight: 600; font-size: var(--step-0); display: block; }
/* the Vision Pro capture is the product: it runs the full width, with the sight's ring around it */
.screens .lead { grid-column: 1 / -1; margin-bottom: 1rem; }
.screens .lead img {
  border-radius: 14px;
  box-shadow: 0 0 0 6px #07041a, 0 0 0 7px var(--ring), 0 0 40px 4px rgb(156 246 255 / 0.25), 0 40px 80px -30px rgb(0 0 0 / 0.9);
}
.screens .lead figcaption { margin-top: 1.4rem; }
.screens .lead figcaption b { font-family: var(--display); font-weight: 700; font-size: var(--step-2); line-height: 1.1; margin-bottom: 0.2rem; }
/* tablet: iPhone play across, the two libraries side by side; desktop: the three in one row */
@media (min-width: 40rem) {
  .screens { grid-template-columns: 1fr 1fr; }
  .screens .play { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .screens { grid-template-columns: repeat(3, 1fr); }
  .screens .play { grid-column: auto; }
}

/* ------------------------------------------------------------------ Target Range */

.range {
  background:
    linear-gradient(180deg, var(--night) 0%, #1a0b38 100%);
  border-top: 1px solid var(--line);
}
.range-intro { display: grid; gap: 1.5rem 3rem; align-items: end; margin-bottom: 2.5rem; }
@media (min-width: 60rem) { .range-intro { grid-template-columns: 1.1fr 1fr; } }
.range-intro .kicker {
  font-family: var(--display); font-weight: 600; font-size: var(--step-1); color: var(--sun-top); margin: 0 0 0.5rem;
}
.range-intro p { color: var(--muted); max-width: var(--measure); }

/* screenshots are 4:3 pixel art, 2x nearest-upscaled: keep the pixels square */
.shot {
  margin: 0;
}
.shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  image-rendering: pixelated;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 2px, transparent 2px 4px),
    #0b0620;
  border: 1px solid rgb(156 246 255 / 0.35);
  border-radius: 6px;
  box-shadow: 0 0 0 6px #07041a, 0 0 0 7px rgb(255 62 200 / 0.35), 0 30px 60px -20px rgb(0 0 0 / 0.8);
}
.shot figcaption { margin-top: 0.9rem; font-size: var(--step--1); color: var(--muted); }
.shot figcaption b { color: var(--ink); font-weight: 600; font-size: var(--step-0); display: block; }

.gallery { display: grid; gap: 2.5rem 1.75rem; }
.gallery .lead { grid-column: 1 / -1; }
/* tablet: title across, then the stages and the tally two by two */
@media (min-width: 40rem) { .gallery { grid-template-columns: 1fr 1fr; } }
/* desktop: title + tally on top, the three stages in order below */
@media (min-width: 60rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery .lead { grid-column: 1 / 3; grid-row: 1; }
  .gallery .tally { grid-column: 3; grid-row: 1; align-self: end; }
}

/* the score legend: real values from the game */
.legend-wrap { display: grid; gap: 2.5rem 4rem; margin-top: clamp(3rem, 7vw, 5rem); }
@media (min-width: 60rem) { .legend-wrap { grid-template-columns: 1.2fr 1fr; } }
.legend { width: 100%; border-collapse: collapse; }
.legend caption { text-align: left; font-family: var(--display); font-weight: 700; font-size: var(--step-2); padding-bottom: 1rem; }
.legend th, .legend td { padding: 0.8rem 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.legend th { font-weight: 600; padding-right: 1rem; white-space: nowrap; }
.legend th svg { width: 1.6rem; height: 1.6rem; vertical-align: -0.4rem; margin-right: 0.6rem; }
.legend td { color: var(--muted); font-size: var(--step--1); }
.legend td.pts {
  font-family: var(--display); font-weight: 700; font-size: var(--step-1); color: var(--sun-top);
  text-align: right; white-space: nowrap; padding-left: 1rem; font-variant-numeric: tabular-nums;
}
.legend tr.neg td.pts { color: var(--bull); }
@media (max-width: 39.99rem) {
  .legend tr { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); padding: 0.7rem 0; }
  .legend th, .legend td { border: 0; padding: 0; }
  .legend td.pts { grid-column: 2; grid-row: 1; }
  .legend td:not(.pts) { grid-column: 1 / -1; padding: 0.25rem 0 0 2.2rem; }
}
.rules h3 { margin-bottom: 1rem; }
.rules ul { margin: 0; padding: 0; list-style: none; }
.rules li { padding: 0.8rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.rules li b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ bring your own games: a real sequence */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 2.5rem 2rem; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; position: relative; padding-top: 4.75rem; }
.steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-weight: 800; font-size: 4.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--grid);
}
.steps h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.steps p { color: var(--muted); margin: 0; }
.path { color: var(--ink); font-weight: 600; white-space: nowrap; }

.note {
  margin-top: 3rem; padding: 1.25rem 1.4rem; max-width: 46rem;
  border-left: 3px solid var(--sun-top);
  background: rgb(255 212 94 / 0.06);
  color: var(--muted);
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

/* ------------------------------------------------------------------ platforms + closing CTA, on the horizon */

.closing {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(5rem, 12vw, 9rem) clamp(9rem, 22vw, 14rem);
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 40%, var(--plum) 100%);
  text-align: center;
}
.closing .floor { top: auto; height: clamp(6rem, 18vw, 10rem); z-index: -1; }
.closing .floor::before { animation: none; }
.closing h2 { font-size: var(--step-3); max-width: 18ch; margin-inline: auto; }
.platforms {
  list-style: none; padding: 0; margin: 2rem auto 2.25rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2.5rem;
}
.platforms li { text-align: center; }
.platforms b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--step-2); }
.platforms span { color: var(--muted); font-size: var(--step--1); }

/* ------------------------------------------------------------------ prose pages (privacy, support) */

.page-head {
  position: relative;
  padding-top: 7.5rem; padding-bottom: 3rem;
  background:
    radial-gradient(90% 120% at 85% 0%, rgb(255 62 200 / 0.18), transparent 60%),
    linear-gradient(180deg, #0d0724, var(--night));
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(3rem, 2rem + 6vw, 6rem); line-height: 0.88; }
.page-head p { color: var(--muted); font-size: var(--step-1); max-width: var(--measure); margin-top: 1rem; }

.prose { max-width: var(--measure); padding-block: 3rem 5rem; }
.prose h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); margin: 3rem 0 1rem; line-height: 1; }
.prose h3 { font-size: var(--step-1); font-family: var(--body); font-weight: 650; line-height: 1.3; margin: 2rem 0 0.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--grid); }
.prose .meta { color: var(--faint); font-size: var(--step--1); }

.toc { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--step--1); }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem 0; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--ring);
  background: radial-gradient(circle, var(--bull) 0 3px, transparent 3.5px);
  background-size: 0 0; background-repeat: no-repeat; background-position: center;
  transition: background-size 0.15s;
}
.faq details[open] summary::after { background-size: 100% 100%; }
.faq details > div { padding-bottom: 1rem; color: var(--muted); }
.faq details > div p:last-child { margin-bottom: 0; }

.contact-card {
  margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px;
  background: rgb(156 246 255 / 0.04);
}
.contact-card h2 { margin-top: 0; }
.contact-card p:last-child { margin-bottom: 0; }

kbd {
  font-family: var(--body); font-size: 0.9em; font-weight: 600;
  padding: 0.05em 0.4em; border: 1px solid var(--line); border-radius: 4px; background: rgb(255 255 255 / 0.04);
}

/* ------------------------------------------------------------------ footer */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  color: var(--faint);
  font-size: var(--step--1);
}
.site-foot .wrap { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .site-foot .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-foot nav a { color: var(--muted); }
.site-foot p { margin: 0; }
.site-foot .fine { grid-column: 1 / -1; display: grid; gap: 0.25rem; }

/* ------------------------------------------------------------------ 404 */

.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 6rem var(--gutter); }
.lost svg { width: 9rem; margin: 0 auto 2rem; filter: drop-shadow(0 0 10px rgb(156 246 255 / 0.5)); }
.lost h1 { font-size: clamp(3rem, 2rem + 6vw, 6rem); }
.lost p { color: var(--muted); max-width: 30rem; margin: 1rem auto 1.5rem; }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .floor::before { animation: none; }
  .sight .ring { stroke-dashoffset: 0; }
  .sight .bars { opacity: 1; }
  .sight .dot { transform: none; }
}

@media print {
  .hero-sky, .site-head nav, .floor { display: none; }
  body { background: #fff; color: #000; }
}