/* Synapse Rush — the public site's styles, shared by every page.

   The look is the app's own (core/designsystem): its dark scheme, the cyan logo with a glow,
   magenta HUD labels, the neon-green "Tap to start" slab as the call to action, the soft plum,
   moss and teal discs of AnimatedBackground, and the CRT scanlines of CrtOverlay. Each game tile
   takes its brand* colour from Color.kt through --c.

   Type: Bungee for display and Orbitron for labels, the app's two families. Long text is set in
   Chakra Petch, because Orbitron at paragraph length is tiring to read.

   Motion: the logo flicker, hover lifts and smooth scrolling all stop under
   prefers-reduced-motion. Nothing on the site flashes. */
:root {
    color-scheme: dark;

    --ground:   #0a1112;
    --band:     #0c1415;
    --surface:  #111819;
    --deep:     #070c0d;
    --line:     #1f2a2c;
    --line-hi:  #263133;

    --ink:      #eef3f3;
    --text:     #c4cdce;
    --dim:      #a9b3b4;
    --faint:    #8c9798;

    --cyan:     #00e5ff;
    --cyan-hi:  #c3f5ff;
    --magenta:  #ff4a8d;
    --green:    #39ff14;
    --green-ink:#062200;
    --yellow:   #ffe81a;
    --mint:     #00ffa3;
    --orchid:   #c08cff;
    --flame:    #ff8c1a;

    --shell: min(1200px, 100% - 3rem);
    --display: "Bungee", "Arial Black", sans-serif;
    --hud: "Orbitron", "Segoe UI", sans-serif;
    --body: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--cyan); }
a:hover { color: var(--cyan-hi); }

img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.shell { width: var(--shell); margin-inline: auto; }

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

/* ── Type roles ──────────────────────────────────────────────────────── */
.eyebrow {
    margin: 0 0 16px;
    font-family: var(--hud);
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c, var(--cyan));
}
.title {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.04;
    color: var(--ink);
    text-wrap: balance;
}
.lede {
    margin: 24px 0 0;
    max-width: 32em;
    font-size: 18px;
    color: #b8c2c3;
}
.hud-label {
    font-family: var(--hud);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--green);
    color: var(--green-ink);
    text-decoration: none;
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: 0.08em;
    padding: 20px 30px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cta:hover {
    color: var(--green-ink);
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--green), 0 0 36px rgba(57, 255, 20, 0.5);
}
.cta svg { flex: none; }
.cta--sm { font-size: 14px; letter-spacing: 0.06em; padding: 12px 18px; gap: 10px; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(10, 17, 18, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.topbar__in {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding-block: 10px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    text-decoration: none;
    color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand span { font-family: var(--display); font-size: 20px; letter-spacing: 0.02em; }
.nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}
.nav__link {
    font-family: var(--hud);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--dim);
    text-decoration: none;
    padding: 14px 12px;
}
.nav__link:hover { color: var(--cyan); }
.nav .cta { margin-left: 8px; }
@media (max-width: 640px) {
    .nav__link--opt { display: none; }
}

/* ── Backdrop: the app's AnimatedBackground discs, held still ────────── */
.backdrop { position: relative; overflow: hidden; }
.backdrop > .disc,
.backdrop > .deco { position: absolute; pointer-events: none; }
.disc { border-radius: 50%; }
.disc--plum  { width: 820px; height: 820px; left: -300px; top: -360px; background: #1d1920; }
.disc--moss  { width: 680px; height: 680px; right: -220px; top: 160px; background: #11201a; }
.disc--teal  { width: 760px; height: 760px; left: 34%; bottom: -520px; background: #0e2124; }
.backdrop > .shell { position: relative; }

/* CrtOverlay: faint scanlines over the hero only. */
.scan::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { border-bottom: 1px solid var(--line); }
.hero__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
    padding-block: 96px 112px;
}
.hero__copy { flex: 1 1 520px; min-width: 0; }
.hero .eyebrow { color: var(--magenta); letter-spacing: 0.32em; margin-bottom: 22px; }
.logo {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(58px, 9vw, 128px);
    line-height: 0.9;
    color: var(--cyan);
    transform: skewX(-8deg);
    transform-origin: left bottom;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.7), 0 0 56px rgba(0, 229, 255, 0.4);
    animation: flicker 7s infinite;
}
@keyframes flicker {
    0%, 90%, 100% { opacity: 1; }
    91% { opacity: 0.78; }
    92% { opacity: 1; }
    94% { opacity: 0.88; }
    95% { opacity: 1; }
}
.motto {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    margin-top: 30px;
    font-family: var(--hud);
    font-size: 14px;
    letter-spacing: 0.28em;
    color: var(--magenta);
}
.motto::before,
.motto::after { content: ""; height: 1px; background: #3a4547; }
.motto::before { width: 40px; flex: none; }
.motto::after { flex: 1; }
.hero .lede { margin-top: 30px; font-size: 20px; line-height: 1.55; color: var(--text); }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    margin-top: 40px;
}
.perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-family: var(--hud);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--dim);
}
.perks li { display: flex; align-items: center; gap: 8px; }
.perks li::before { content: ""; width: 8px; height: 8px; background: var(--c); }

.phones {
    flex: 0 1 420px;
    margin-inline: auto;
    position: relative;
    display: flex;
    justify-content: center;
}
.phone {
    border: 10px solid #050909;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--line), 0 40px 80px rgba(0, 0, 0, 0.55);
}
.phone--hero {
    position: relative;
    width: 300px;
    max-width: 78vw;
    margin-left: 90px;
    box-shadow: 0 0 0 1px var(--line), 0 0 70px rgba(0, 229, 255, 0.22), 0 40px 80px rgba(0, 0, 0, 0.55);
}
.phone--behind {
    position: absolute;
    left: -10px;
    top: 70px;
    width: 230px;
    border-width: 8px;
    border-radius: 34px;
    transform: rotate(-7deg);
    opacity: 0.55;
}
@media (max-width: 760px) {
    .phone--behind { display: none; }
    .phone--hero { margin-left: 0; }
    .hero__grid { padding-block: 64px 80px; }
}

/* ── HUD strip ───────────────────────────────────────────────────────── */
.hud {
    background: var(--band);
    border-bottom: 1px solid var(--line);
}
.hud__grid {
    margin-block: 0;
    padding-block: 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
}
.hud__grid div { display: flex; flex-direction: column-reverse; gap: 4px; }
.hud__grid dt { font-family: var(--hud); font-size: 12px; letter-spacing: 0.3em; color: var(--faint); }
.hud__grid dd {
    margin: 0;
    font-family: var(--hud);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--c);
}

/* ── Sections ────────────────────────────────────────────────────────── */
.section { border-top: 1px solid var(--line); }
.section--band { background: var(--band); }
.section__in { padding-block: 112px; }
.split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
}
.split > .split__copy { flex: 1 1 400px; min-width: 0; }
.split > .split__side { flex: 1 1 440px; min-width: 0; }
@media (max-width: 760px) {
    .section__in { padding-block: 72px; }
}

/* ── Reaction test ───────────────────────────────────────────────────── */
.react {
    width: 100%;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 36px;
    border: 2px solid var(--cyan);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 0 32px rgba(0, 229, 255, 0.18);
    font: inherit;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.react__label { font-family: var(--hud); font-size: 12px; letter-spacing: 0.32em; opacity: 0.85; }
.react__big { font-family: var(--display); font-size: clamp(44px, 6vw, 76px); line-height: 1; }
.react__sub { font-size: 17px; max-width: 26em; }
.react__best { font-family: var(--hud); font-size: 12px; letter-spacing: 0.24em; opacity: 0.75; }
.react[data-phase="wait"],
.react[data-phase="early"] {
    background: #1a0b12;
    color: #ffb1c4;
    border-color: var(--magenta);
    box-shadow: inset 0 0 0 1px #3a1424;
}
.react[data-phase="go"] {
    background: var(--green);
    color: var(--green-ink);
    border-color: var(--green);
    box-shadow: 0 0 48px rgba(57, 255, 20, 0.45);
}
.react[data-phase="done"] {
    background: #0e1a14;
    color: #dce4e5;
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px #1f3a26;
}
/* Without scripting the panel cannot work, so it is not offered. */
html:not(.js) .react-wrap { display: none; }

/* ── Cards (modes, policies) ─────────────────────────────────────────── */
.cards {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-hi);
    padding: 26px 24px 24px;
}
/* HUD corner brackets, in the card's colour. */
.card--bracket::before,
.card--bracket::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
}
.card--bracket::before { left: -1px; top: -1px; border-left: 2px solid var(--c); border-top: 2px solid var(--c); }
.card--bracket::after { right: -1px; bottom: -1px; border-right: 2px solid var(--c); border-bottom: 2px solid var(--c); }
.card .hud-label { margin: 0; color: var(--c); }
.card h3 {
    margin: 10px 0 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.1;
    color: var(--ink);
}
.card p { margin: 12px 0 0; font-size: 16px; color: #b1bbbc; }
.facts {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.facts li {
    font-family: var(--hud);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--text);
    border: 1px solid #2e3a3c;
    padding: 5px 8px;
}
.modes__phone { flex: 0 1 300px; margin-inline: auto; }
.modes__phone .phone { width: 280px; max-width: 74vw; border-radius: 38px; }
.modes__cards { flex: 1 1 560px; min-width: 0; }
/* Four modes read as a 2×2 block, never three and an orphan. */
.modes__cards .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.note { margin: 24px 0 0; font-size: 15px; color: var(--faint); }

a.card { display: block; text-decoration: none; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
a.card:hover { border-color: var(--cyan); transform: translateY(-2px); color: var(--text); }

/* ── Games ───────────────────────────────────────────────────────────── */
.pack { margin-top: 64px; }
.pack__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-hi);
}
.pack__name {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    color: var(--c);
}
.pack__tagline { margin: 10px 0 0; font-size: 17px; color: #b8c2c3; }
.pack__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.badge {
    font-family: var(--hud);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c);
    border: 1px solid var(--c);
    padding: 7px 11px;
}
.pack__note { font-size: 14px; color: var(--faint); }
@media (max-width: 640px) {
    .pack__meta { align-items: flex-start; }
}

.tiles {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.tile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tile__glyph {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--c) 12%, transparent);
    color: var(--c);
}
.tile h4 {
    margin: 0;
    font-family: var(--hud);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: var(--ink);
}
.tile p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dim); }

/* ── Terminal panel (Compete) ────────────────────────────────────────── */
.terminal {
    background: var(--deep);
    border: 1px solid #1e3a33;
    padding: 28px 28px 24px;
    font-family: var(--hud);
    font-size: 13px;
    letter-spacing: 0.12em;
}
.terminal__title { margin: 0 0 18px; color: var(--mint); font-size: 11px; letter-spacing: 0.3em; }
.terminal dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
}
.terminal dt { color: var(--faint); }
.terminal dd { margin: 0; text-align: right; color: var(--c); }

/* ── Effects switches (an illustration of the app's Settings) ────────── */
.switches { background: var(--surface); border: 1px solid var(--line-hi); padding: 12px 24px; }
.switches__title { margin: 14px 0 6px; color: var(--faint); }
.switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-family: var(--hud);
    font-size: 14px;
    letter-spacing: 0.12em;
    color: #dce4e5;
}
.switch button {
    position: relative;
    flex: none;
    width: 52px;
    height: 30px;
    margin: 7px 0;
    padding: 0;
    border: 1px solid var(--green);
    background: #0f2a12;
    cursor: pointer;
}
.switch button::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 25px;
    width: 22px;
    height: 22px;
    background: var(--green);
    transition: left 0.12s ease;
}
.switch button[aria-pressed="false"] { border-color: #3a4547; background: var(--ground); }
.switch button[aria-pressed="false"]::after { left: 3px; background: #6f7b7c; }
html:not(.js) .switches { display: none; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); }
.foot__in {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    padding-block: 40px 48px;
}
.foot__mark { display: flex; gap: 18px; align-items: flex-start; }
.pips { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.pips span { width: 8px; height: 8px; }
.foot__name { margin: 0; font-family: var(--display); font-size: 18px; color: var(--ink); }
.foot__small { margin: 8px 0 0; max-width: 36em; font-size: 14px; color: var(--faint); }
.foot__status {
    margin: 0;
    font-family: var(--hud);
    font-size: 11px;
    letter-spacing: 0.3em;
    line-height: 2;
    color: #75817f;
    text-align: right;
}
.foot__links { margin: 0; font-size: 15px; }

/* ── Document pages (terms, 404) ─────────────────────────────────────── */
.doc-hero { border-bottom: 1px solid var(--line); }
.doc-hero .disc--plum { width: 640px; height: 640px; left: auto; right: -220px; top: -320px; }
.doc-hero .disc--teal { width: 520px; height: 520px; left: -200px; bottom: -380px; }
.doc-hero__in { padding-block: 80px 64px; }
.doc-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(40px, 6vw, 76px);
    line-height: 0.98;
    color: var(--cyan);
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.55), 0 0 52px rgba(0, 229, 255, 0.3);
}
.doc-meta { margin: 22px 0 0; font-family: var(--hud); font-size: 12px; letter-spacing: 0.24em; color: var(--faint); }

.doc-body {
    display: flex;
    gap: 64px;
    align-items: flex-start;
    padding-block: 56px 96px;
    line-height: 1.7;
}
.toc {
    flex: 0 0 240px;
    position: sticky;
    top: 84px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
    display: block;
    padding: 7px 0;
    text-decoration: none;
    color: var(--dim);
    font-size: 14px;
    line-height: 1.35;
}
.toc a::before { content: counter(toc) " · "; color: var(--faint); }
.toc a:hover { color: var(--cyan); }
@media (max-width: 980px) {
    .toc { display: none; }
}

.prose { flex: 1 1 0; min-width: 0; max-width: 760px; }
.prose h2 {
    margin: 72px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-family: var(--display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.15;
    color: var(--ink);
}
.prose h2 .n {
    display: block;
    margin-bottom: 8px;
    font-family: var(--hud);
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--magenta);
}
.prose h3 {
    margin: 36px 0 0;
    font-family: var(--hud);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
}
.prose p { margin: 16px 0 0; }
.prose ul { margin: 16px 0 0; padding-left: 22px; }
.prose li { margin-top: 10px; }
.prose li::marker { color: var(--green); }
.prose strong { color: var(--ink); font-weight: 600; }
/* The privacy policy's address in §14 is one long word; let it break on a phone. */
.prose a { overflow-wrap: anywhere; }
.summary {
    --c: var(--green);
    position: relative;
    background: var(--deep);
    border: 1px solid #1e3a33;
    padding: 28px 28px 24px;
}
.summary .hud-label { margin: 0; color: var(--green); }

.lost { padding-block: 120px; }
.lost .doc-title { color: var(--magenta); text-shadow: 0 0 18px rgba(255, 74, 141, 0.5); }
.lost p { margin: 20px 0 32px; font-size: 18px; }

/* ── Motion off ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .logo { animation: none; }
    .cta, .tile, a.card, .switch button::after { transition: none; }
    .cta:hover, .tile:hover, a.card:hover { transform: none; }
}