:root {
  --ground: #0b0e14; --surface: #121722; --line: rgba(255,255,255,0.10);
  --ink: #eef2f7; --ink2: #a3aec0; --ink3: #6b7788;
  --rec: #ff4d57; --mint: #3ee0c0; --gold: #ffd36a;
  --display: "Syne", "Avenir Next", sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 920px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-left)) 48px max(16px, env(safe-area-inset-right)); }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.brand img { border-radius: 10px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rec); margin: 0 0 8px; }
h1, .challenge__title { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: 0 0 6px; }
.lead { color: var(--ink2); font-size: 1.1rem; max-width: 56ch; margin: 16px 0 0; }
.hint { color: var(--ink3); font-size: 0.9rem; margin: 12px 0 0; }
.challenge { border: 1px solid var(--mint); border-radius: 18px; padding: 24px; margin-bottom: 40px; background: var(--surface); }
.challenge .eyebrow { color: var(--mint); }
.code { font-family: var(--mono); font-weight: 600; font-size: clamp(2rem, 10vw, 3.6rem); letter-spacing: 0.22em; color: var(--gold); margin: 18px 0 4px; user-select: all; }
/* Store badges: official artwork. Both files are cropped to the badge edge
   (Google's PNG ships with transparent clear space), so one height makes them
   the same visual size. Apple's minimum on screen is 40px tall. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.badge { display: inline-block; line-height: 0; border-radius: 9px; }
.badge img { display: block; height: 48px; width: auto; }
.badge:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.badge[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.game { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface); }
.game p { margin: 0; color: var(--ink2); font-size: 0.95rem; }
.privacy-note, .note { padding: 36px 0; border-bottom: 1px solid var(--line); }
.privacy-note p, .note p { color: var(--ink2); margin: 0; max-width: 64ch; }
.game .game__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); margin: 0 0 6px; }
.foot { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 28px; color: var(--ink3); font-size: 0.9rem; }
.foot a { color: var(--ink2); }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.doc h2 { margin-top: 32px; }
.doc p, .doc li { color: var(--ink2); max-width: 70ch; overflow-wrap: anywhere; }
.doc .date { font-family: var(--mono); font-size: 12px; color: var(--ink3); }
@media (max-width: 720px) { .games { grid-template-columns: 1fr; } }

/* Hero: the concept site's viewfinder hero (two columns, animated phone). */
.hero { padding: 8px 0 36px; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__grid > * { min-width: 0; }
.hero h1 em { font-style: normal; color: var(--rec); }
.hero__pitch { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink2); max-width: 56ch; margin: 22px 0 0; }
.hero__pitch strong { color: var(--ink); font-weight: 600; }
/* Facts strip: full width under the hero, numbers in the readout font so
   1 and 0 read as digits (Syne draws them like I and O). */
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.fact { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact__n { font-family: var(--mono); font-weight: 600; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fact__n small { font-size: 0.5em; margin-left: 2px; color: var(--ink2); letter-spacing: 0; }
.fact__l { color: var(--ink2); font-size: 0.95rem; line-height: 1.35; text-wrap: balance; }
.phone-wrap { display: flex; justify-content: center; }
.phone { width: min(300px, 100%); max-width: 100%; aspect-ratio: 9 / 19; border-radius: 42px; background: #0a0c10; padding: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.08); position: relative; }
.screen { position: absolute; inset: 10px; border-radius: 34px; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #203042 0%, #0f1722 55%, #0a0f16 100%); color: #eaf1f6; font-family: var(--mono); }
.screen > * { position: absolute; }
.hud-rec { top: 18px; left: 18px; font-size: 11px; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; }
.hud-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d57; animation: blink 1.1s steps(2, end) infinite; }
.hud-combo { top: 16px; right: 18px; font-size: 12px; font-weight: 600; color: #ffd36a; animation: pop 2.4s ease-in-out infinite; transform-origin: right top; }
.lane { top: 16%; left: 0; right: 0; height: 26%; }
.lane__ground { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: rgba(255,255,255,0.35); }
.runner { position: absolute; left: 24%; bottom: 2px; width: 28px; height: 28px; border-radius: 8px; background: #3ee0c0; transform: translateY(-62px); animation: jump 2.4s cubic-bezier(.3,.9,.6,1) infinite; }
.runner::before, .runner::after { content: ""; position: absolute; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #0b0e14; }
.runner::before { left: 7px; } .runner::after { right: 7px; }
.obstacle { position: absolute; bottom: 2px; left: 0; width: 22px; height: 30px; border-radius: 4px 4px 2px 2px; background: #ff4d57; transform: translateX(80px); animation: slide 2.4s linear infinite; }
.obstacle--2 { height: 18px; width: 18px; animation-delay: -1.2s; opacity: .85; }
.face { top: 38%; left: 0; right: 0; bottom: 0; }
.face svg { width: 100%; height: 100%; display: block; }
.mouth { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(1); animation: mouth 2.4s ease-in-out infinite; }
.brackets { inset: 12px; pointer-events: none; }
.brackets::before, .brackets::after, .brackets i::before, .brackets i::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(62,224,192,0.8); }
.brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brackets::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brackets i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.brackets i::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.brackets i { position: absolute; inset: 0; }
.readout { left: 18px; right: 18px; bottom: 18px; font-size: 11px; }
.readout__row { display: flex; justify-content: space-between; color: #bcd; }
.readout__bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); margin-top: 6px; overflow: hidden; }
.readout__fill { position: absolute; inset: 0 auto 0 0; width: 82%; background: #3ee0c0; border-radius: 3px; animation: jawbar 2.4s ease-in-out infinite; }
.readout__tick { position: absolute; top: -3px; bottom: -3px; left: 60%; width: 2px; background: #ff4d57; }
.readout__val { color: #3ee0c0; }
.readout__fire { margin-top: 8px; color: #ffd36a; font-weight: 600; letter-spacing: 0.1em; animation: firelabel 2.4s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes mouth { 0%, 25% { transform: scaleY(0.18); } 36%, 56% { transform: scaleY(1); } 66%, 100% { transform: scaleY(0.18); } }
@keyframes jawbar { 0%, 25% { width: 9%; } 36%, 56% { width: 82%; } 66%, 100% { width: 9%; } }
@keyframes jump { 0%, 34% { transform: translateY(0); } 46%, 58% { transform: translateY(-62px); } 68%, 100% { transform: translateY(0); } }
@keyframes slide { 0% { transform: translateX(300px); } 100% { transform: translateX(-60px); } }
@keyframes pop { 0%, 44% { transform: scale(1); } 50% { transform: scale(1.25); } 60%, 100% { transform: scale(1); } }
@keyframes firelabel { 0%, 34% { opacity: 0; } 36%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@media (max-width: 860px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .phone-wrap { order: -1; } .phone { width: min(260px, 100%); } }
@media (max-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact { padding: 18px; } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .hud-rec i, .hud-combo, .runner, .obstacle, .mouth, .readout__fill, .readout__fire { animation: none; } .readout__fire { opacity: 1; } .obstacle { transform: translateX(150px); } .obstacle--2 { transform: translateX(40px); } }
/* Download prompts: a pill button, and on phones a bar fixed to the bottom
   once the hero badges have scrolled off screen. */
.cta { display: inline-block; background: var(--mint); color: var(--ground); font-weight: 600; text-decoration: none; border-radius: 999px; padding: 8px 18px; line-height: 1.3; }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.challenge__get { color: var(--ink2); margin: 18px 0 0; }
.getbar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(18,23,34,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); text-decoration: none; box-shadow: 0 12px 32px rgba(0,0,0,0.5); transform: translateY(160%); transition: transform 0.25s ease; }
.getbar[hidden] { display: none; }
.getbar--on { transform: none; }
.getbar img { border-radius: 10px; }
.getbar span:not(.cta) { flex: 1; font-size: 0.85rem; color: var(--ink2); line-height: 1.3; }
.getbar strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1rem; }
body:has(.getbar:not([hidden])) .wrap { padding-bottom: 110px; }
@media (prefers-reduced-motion: reduce) { .getbar { transition: none; } }