/* The approved neon reference palette. Dark navy is the default;
   the ice-blue light theme deepens game colors for contrast. */
:root {
  color-scheme: dark;
  --ground: #000e1b;
  --raised: #031428;
  --surface: #061a32;
  --surface-2: #0b2340;
  --line: rgb(73 142 229 / 0.22);
  --line-strong: rgb(88 164 255 / 0.45);
  --ink: #f5f7ff;
  --muted: #92bfff;
  --faint: #7399c5;
  --signal: #00e9f5;
  --signal-ink: #00252e;
  --danger: #ff5d5d;
  --good: #4fd18b;
  --on-tone: #0b0c0e;
  --grid-dot: rgb(236 239 243 / 0.075);
  --glass: rgb(11 12 14 / 0.74);
  --shadow: 0 1px 0 rgb(0 0 0 / 0.35), 0 16px 40px rgb(0 0 0 / 0.4);
  --tile-off: #1b1e23;
  --tile-off-edge: rgb(236 239 243 / 0.06);
  --ball: #3a3f47;
  --ball-edge: rgb(236 239 243 / 0.22);
  --art-bg: #001022;
  --art-ink: #f2f4f7;
  --ambient:
    radial-gradient(1100px 520px at 12% -12%, rgb(255 194 26 / 0.07), transparent 60%),
    radial-gradient(900px 480px at 92% -8%, rgb(78 168 255 / 0.06), transparent 62%);

  --tone-reaction: #24efbd;
  --tone-aim: #ff5a5f;
  --tone-number-memory: #9b87ff;
  --tone-visual-memory: #4ea8ff;
  --tone-typing: #ffd552;
  --tone-aim-accuracy: #ff7a45;
  --tone-object-tracking: #2fd4c4;
  --tone-rhythm: #f062c0;
  --tone-blind-timer: #b9e84a;
  --tone-match-three: #00e9f5;
  --tone-stacker: #6dc7ff;
  --tone-color-guesser: #e594ff;
  --tone-equal-split: #ffb467;
  --tone-quick-count: #80e1d0;
  --tone-perfect-circle: #b8a1ff;
  --tone-memory-match: #ff8db5;
  --tone-sudoku: #f2ce73;
  --tone-color-sudoku: #b6a0ff;
  --tone-snake: #83ef73;
  --tone-orbit-timing: #62d9ff;
  /* Match three's five reference silhouettes; color always has a distinct shape. */
  --gem-red: #ff625c;
  --gem-orange: #00d5ed;
  --gem-yellow: #b06aff;
  --gem-green: #20e9ae;
  --gem-blue: #ffd23d;
  --gem-purple: #a866ff;
  --reaction-wait: #5a1f27;
  --reaction-wait-ink: #ffe3e3;
  --reaction-go: #3ddc84;
  --reaction-go-ink: #062414;

  --font-ui: 'Archivo Variable', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-ui);
  --font-logo: var(--font-ui);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --r-control: 10px;
  --r-panel: 16px;
  --r-tile: 12px;
  --control-ink: #b9d9ff;
  --control-fill-hover: color-mix(in srgb, var(--signal) 9%, var(--surface));
  --control-fill-pressed: color-mix(in srgb, var(--signal) 15%, var(--surface));
  --control-edge-hover: color-mix(in srgb, var(--signal) 38%, transparent);
  --control-halo: color-mix(in srgb, var(--signal) 13%, transparent);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-quick: 120ms;
  --t-state: 200ms;
  --t-screen: 320ms;
  --bar-h: 98px;
  --gutter: clamp(20px, 3.45vw, 72px);
  --content: 1920px;
}

:root[data-theme='light'] {
  color-scheme: light;
  --ground: #e5effa;
  --raised: #dce9f8;
  --surface: #f0f6ff;
  --surface-2: #dce9fa;
  --line: rgb(22 24 27 / 0.1);
  --line-strong: rgb(22 24 27 / 0.2);
  --ink: #16181b;
  --muted: #405e83;
  --faint: #7a8089;
  --signal: #007387;
  --signal-ink: #ffffff;
  --control-ink: #245b90;
  --control-fill-hover: color-mix(in srgb, var(--signal) 7%, var(--surface));
  --control-fill-pressed: color-mix(in srgb, var(--signal) 13%, var(--surface));
  --control-halo: color-mix(in srgb, var(--signal) 9%, transparent);
  --danger: #c62f3a;
  --good: #13804a;
  --on-tone: #ffffff;
  --grid-dot: rgb(22 24 27 / 0.1);
  --glass: rgb(227 229 232 / 0.78);
  --shadow: 0 1px 0 rgb(22 24 27 / 0.06), 0 14px 34px rgb(22 24 27 / 0.12);
  --tile-off: #d3d7dc;
  --tile-off-edge: rgb(22 24 27 / 0.06);
  --ball: #5d636c;
  --ball-edge: rgb(22 24 27 / 0.25);
  --art-bg: #f1f2f4;
  --art-ink: #1d2025;
  --ambient:
    radial-gradient(1100px 520px at 12% -12%, rgb(255 194 26 / 0.16), transparent 60%),
    radial-gradient(900px 480px at 92% -8%, rgb(36 112 208 / 0.08), transparent 62%);

  --tone-reaction: #12864b;
  --tone-aim: #d23a40;
  --tone-number-memory: #6a50e0;
  --tone-visual-memory: #2470d0;
  --tone-typing: #a86600;
  --tone-aim-accuracy: #c4501c;
  --tone-object-tracking: #0d8a80;
  --tone-rhythm: #b4318a;
  --tone-blind-timer: #5a8600;
  --tone-match-three: #007f94;
  --tone-stacker: #176cb7;
  --tone-color-guesser: #9b38bc;
  --tone-equal-split: #b85b12;
  --tone-quick-count: #117b6a;
  --tone-perfect-circle: #7151c7;
  --tone-memory-match: #bf3d70;
  --tone-sudoku: #936100;
  --tone-color-sudoku: #7151c7;
  --tone-snake: #337e22;
  --tone-orbit-timing: #00769c;
  --gem-red: #ed514b;
  --gem-orange: #00abc5;
  --gem-yellow: #9850e2;
  --gem-green: #08b78a;
  --gem-blue: #edbd20;
  --gem-purple: #8c47f0;
  --reaction-wait: #8a2532;
  --reaction-wait-ink: #fff1f1;
  --reaction-go: #2ccf73;
  --reaction-go-ink: #052012;
}

[data-game] {
  --tone: var(--signal);
  --tone-ink: var(--on-tone);
  --tone-soft: color-mix(in srgb, var(--tone) 11%, transparent);
  --tone-line: color-mix(in srgb, var(--tone) 46%, transparent);
  --tone-glow: color-mix(in srgb, var(--tone) 34%, transparent);
}
[data-game='reaction'] {
  --tone: var(--tone-reaction);
}
[data-game='aim'] {
  --tone: var(--tone-aim);
}
[data-game='number-memory'] {
  --tone: var(--tone-number-memory);
}
[data-game='visual-memory'] {
  --tone: var(--tone-visual-memory);
}
[data-game='typing'] {
  --tone: var(--tone-typing);
}
[data-game='aim-accuracy'] {
  --tone: var(--tone-aim-accuracy);
}
[data-game='object-tracking'] {
  --tone: var(--tone-object-tracking);
}
[data-game='rhythm'] {
  --tone: var(--tone-rhythm);
}
[data-game='blind-timer'] {
  --tone: var(--tone-blind-timer);
}
[data-game='match-three'] {
  --tone: var(--tone-match-three);
}
[data-game='stacker'] {
  --tone: var(--tone-stacker);
}
[data-game='color-guesser'] {
  --tone: var(--tone-color-guesser);
}
[data-game='equal-split'] {
  --tone: var(--tone-equal-split);
}
[data-game='quick-count'] {
  --tone: var(--tone-quick-count);
}
[data-game='perfect-circle'] {
  --tone: var(--tone-perfect-circle);
}
[data-game='memory-match'] {
  --tone: var(--tone-memory-match);
}
[data-game='sudoku'] {
  --tone: var(--tone-sudoku);
}
[data-game='color-sudoku'] {
  --tone: var(--tone-color-sudoku);
}
[data-game='snake'] {
  --tone: var(--tone-snake);
}
[data-game='orbit-timing'] {
  --tone: var(--tone-orbit-timing);
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --bar-h: 56px;
  }
}

/* Local hue and crisp silhouettes follow the founder's menu reference. */
.game-art {
  --art-wash: #0066db;
  --art-wash-opacity: 0.075;
  --art-cyan-top: #21edfb;
  --art-cyan-bottom: #00bcee;
  --art-coral-top: #ff8a7d;
  --art-coral-bottom: #ff444b;
  --art-violet-top: #ce96ff;
  --art-violet-bottom: #783cff;
  --art-mint-top: #80ffcf;
  --art-mint-bottom: #20e9b6;
  --art-number-top: #dfbeff;
  --art-number-middle: #af74ff;
  --art-number-bottom: #713bff;
  --art-cell-top: #0d3e7c;
  --art-cell-bottom: #082651;
  --art-cell-blue: #0061ff;
  --art-cell-edge: #096bcc;
  --art-cell-lit-edge: #00dafa;
  --art-cell-bevel: #4c99e5;
  --art-reaction-ring: #00d8b1;
  --art-reaction-line: #82ffe0;
  --art-aim-line: #ff585a;
  --art-accuracy-main: #ff8d25;
  --art-accuracy-ring: #ff791b;
  --art-accuracy-ball: #ff9c37;
  --art-accuracy-cross: #ff8a27;
  --art-typing-ink: #ffe379;
  --art-typing-caret: #ffd35c;
  --art-tracking-orbit: #27f7ef;
  --art-tracking-ball: #16eee5;
  --art-rhythm-line: #ff65d8;
  --art-timer-line: #c2ff65;
  --art-timer-ink: #d2ff96;
}

.game-art-reaction {
  --art-wash: #00bf8f;
  --art-wash-opacity: 0.13;
}
.game-art-aim {
  --art-wash: #e72736;
  --art-wash-opacity: 0.13;
}
.game-art-number-memory {
  --art-wash: #6513e6;
  --art-wash-opacity: 0.26;
}
.game-art-visual-memory {
  --art-wash: #034ed8;
  --art-wash-opacity: 0.12;
}
.game-art-typing {
  --art-wash: #d18c0b;
  --art-wash-opacity: 0.15;
}
.game-art-aim-accuracy {
  --art-wash: #f12e0c;
  --art-wash-opacity: 0.15;
}
.game-art-object-tracking {
  --art-wash: #00b3bb;
  --art-wash-opacity: 0.1;
}
.game-art-rhythm {
  --art-wash: #da30ac;
  --art-wash-opacity: 0.13;
}
.game-art-blind-timer {
  --art-wash: #8cc231;
  --art-wash-opacity: 0.1;
}
.game-art-stacker,
.game-art-color-guesser,
.game-art-equal-split,
.game-art-quick-count,
.game-art-perfect-circle,
.game-art-memory-match,
.game-art-sudoku,
.game-art-color-sudoku,
.game-art-snake,
.game-art-orbit-timing {
  --art-wash: var(--tone);
  --art-wash-opacity: 0.14;
}

:root[data-theme='light'] .game-art {
  --art-cyan-top: #0bbeda;
  --art-cyan-bottom: #008cba;
  --art-coral-top: #f36a5f;
  --art-coral-bottom: #cd3546;
  --art-violet-top: #ac76e9;
  --art-violet-bottom: #6f34c9;
  --art-mint-top: #37d5a6;
  --art-mint-bottom: #079c77;
  --art-number-top: #a46de3;
  --art-number-middle: #844cc9;
  --art-number-bottom: #6028ae;
  --art-cell-top: #d1e4fa;
  --art-cell-bottom: #b9d2ef;
  --art-cell-blue: #2473d7;
  --art-cell-edge: #4c7fb9;
  --art-cell-lit-edge: #0087ad;
  --art-cell-bevel: #eef7ff;
  --art-reaction-ring: #148d77;
  --art-reaction-line: #107c67;
  --art-aim-line: #d33b48;
  --art-accuracy-main: #c5630e;
  --art-accuracy-ring: #d55816;
  --art-accuracy-ball: #d96b19;
  --art-accuracy-cross: #ce6617;
  --art-typing-ink: #875000;
  --art-typing-caret: #a26500;
  --art-tracking-orbit: #0c8e8d;
  --art-tracking-ball: #08a6a4;
  --art-rhythm-line: #b92c93;
  --art-timer-line: #618e1e;
  --art-timer-ink: #507b13;
}

/* Interlocking reference planes: a single path carries each surface and electric edge. */
.neon-backdrop {
  --neon-surface-start: #001b47;
  --neon-surface-middle: #001838;
  --neon-surface-end: #002858;
  --neon-edge-start: #086aff;
  --neon-edge-middle: #0871ff;
  --neon-edge-end: #0758e6;
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100dvh;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 50% 102%, rgb(0 62 165 / 0.46), transparent 78%),
    var(--ground);
}
.neon-surface-start {
  stop-color: var(--neon-surface-start);
}
.neon-surface-middle {
  stop-color: var(--neon-surface-middle);
}
.neon-surface-end {
  stop-color: var(--neon-surface-end);
}
.neon-edge-start {
  stop-color: var(--neon-edge-start);
}
.neon-edge-middle {
  stop-color: var(--neon-edge-middle);
}
.neon-edge-end {
  stop-color: var(--neon-edge-end);
}
.neon-plane-left {
  opacity: 0.72;
}
.neon-plane-left-return {
  opacity: 0.48;
}
.neon-plane-upper {
  opacity: 0.8;
}
.neon-plane-upper-right {
  opacity: 0.62;
}
.neon-plane-right {
  opacity: 0.75;
}
.neon-plane-right-return {
  opacity: 0.65;
}

:root[data-theme='light'] .neon-backdrop {
  --neon-surface-start: #b8cfe9;
  --neon-surface-middle: #d4e3f4;
  --neon-surface-end: #b3ceee;
  --neon-edge-start: #8aafd5;
  --neon-edge-middle: #739cc9;
  --neon-edge-end: #8eafd5;
  background:
    radial-gradient(ellipse 40% 30% at 50% 102%, rgb(114 167 230 / 0.2), transparent 78%),
    var(--ground);
}
:root[data-theme='light'] .neon-plane-upper {
  opacity: 0.42;
}
:root[data-theme='light'] .neon-plane-left,
:root[data-theme='light'] .neon-plane-right,
:root[data-theme='light'] .neon-plane-right-return {
  opacity: 0.36;
}
:root[data-theme='light'] .neon-plane-left-return,
:root[data-theme='light'] .neon-plane-upper-right {
  opacity: 0.3;
}

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-mono.woff2') format('woff2');
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 var(--font-ui);
}
body::selection {
  background: var(--signal);
  color: var(--signal-ink);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
  border-radius: 4px;
}
button[hidden] {
  display: none;
}
svg {
  display: block;
}
.page-wrap {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 116px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.logo-mark {
  width: 32px;
  height: 40px;
}
.wordmark {
  font-size: 31px;
  font-weight: 750;
  letter-spacing: -1.3px;
  line-height: 1;
}
.site-header nav,
.site-footer nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}
.site-header nav a:hover,
.site-footer a:hover {
  color: var(--signal);
}
.theme-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--signal);
  background: var(--control-fill-hover);
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -80px;
  z-index: 5;
  padding: 12px 20px;
  background: var(--signal);
  color: var(--signal-ink);
}
.skip-link:focus {
  top: 12px;
}
.skip-link:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}
.hero {
  min-height: 660px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding: 72px 0 92px;
}
.eyebrow,
.section-index {
  margin: 0 0 20px;
  font: 11px/1.6 var(--font-mono);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
}
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
.hero h1 {
  font-size: clamp(45px, 5.25vw, 76px);
  line-height: 1.035;
  font-weight: 760;
  letter-spacing: -3.6px;
  margin-bottom: 26px;
}
.hero h1 span {
  color: var(--signal);
}
.hero-description {
  color: var(--muted);
  max-width: 430px;
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 30px;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 23px;
}
.button {
  min-height: 52px;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid transparent;
}
.primary {
  background: var(--signal);
  color: var(--signal-ink);
}
.primary:hover {
  background: color-mix(in srgb, var(--signal) 88%, white);
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
}
.text-link:hover {
  color: var(--signal);
}
.requirements {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.requirements span {
  padding: 0 6px;
  color: var(--faint);
}
.hero-art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 8px 0 20px;
}
.hero-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.07;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
.hero-tile-1,
.hero-tile-3 {
  translate: 0 28px;
}
.hero-tile .game-art {
  width: 100%;
  height: auto;
}
.hero-tile > span {
  position: absolute;
  bottom: 15px;
  left: 17px;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 650;
}
.collection-tag {
  position: absolute;
  bottom: -19px;
  left: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 13px 19px;
  border-radius: 5px;
}
.collection-tag strong {
  font-size: 33px;
  line-height: 1;
  letter-spacing: -1px;
}
.collection-tag span {
  font: 10px/1.5 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 52px;
  padding: 45px 0 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-index {
  display: block;
  color: var(--signal);
  margin-bottom: 13px;
  font-size: 10px;
}
.features h2 {
  font-size: 20px;
  letter-spacing: -0.4px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.features p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 0;
  max-width: 335px;
}
.collection {
  padding: 98px 0 100px;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 32px;
}
.section-heading .eyebrow {
  margin-bottom: 9px;
}
.section-heading h2,
.support h2 {
  font-size: clamp(30px, 3vw, 42px);
  letter-spacing: -1.4px;
  line-height: 1.1;
  margin-bottom: 0;
}
.section-heading > p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 3px;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.game-card {
  background: color-mix(in srgb, var(--surface) 45%, var(--ground));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.game-illustration {
  aspect-ratio: 380 / 230;
  overflow: hidden;
}
.game-illustration .game-art {
  width: 100%;
  height: auto;
}
.game-caption {
  position: relative;
  padding: 5px 19px 23px;
}
.game-caption h3 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
  padding-right: 25px;
}
.game-caption p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 200px;
}
.game-index {
  float: right;
  font: 10px/1.5 var(--font-mono);
  color: var(--faint);
  margin-top: 4px;
}
.support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 55px;
  padding: 52px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.support .eyebrow {
  margin-bottom: 13px;
}
.support p:not(.eyebrow) {
  max-width: 475px;
  color: var(--muted);
  font-size: 14px;
  margin: 19px 0 0;
}
.support-contact {
  justify-self: end;
  max-width: 100%;
}
.email-link {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(16px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: -0.5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--signal);
  color: var(--signal);
  overflow-wrap: anywhere;
}
.email-link svg {
  flex: 0 0 auto;
}
.support-contact > span {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 35px 0;
  color: var(--muted);
  font-size: 12px;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 6px;
}
.footer-divider {
  padding: 0 10px;
  color: var(--line-strong);
}
.privacy-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 740px);
  gap: 80px;
  padding: 70px 0 100px;
}
.policy-nav {
  align-self: start;
  position: sticky;
  top: 25px;
}
.policy-nav nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.policy-nav nav a {
  padding: 6px 0;
  font-size: 13px;
  color: var(--muted);
}
.policy-nav nav a:hover {
  color: var(--signal);
}
.policy-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--signal);
  font-size: 13px;
  margin-top: 24px;
  min-height: 44px;
}
.policy-copy {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.policy-copy h1 {
  font-size: clamp(36px, 4vw, 58px);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -2px;
  margin-bottom: 30px;
}
.policy-copy h2 {
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-top: 42px;
}
.policy-copy h3 {
  font-size: 19px;
  color: var(--ink);
  margin-top: 30px;
}
.policy-copy a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy-copy li {
  margin: 10px 0;
}
.policy-copy strong {
  color: var(--ink);
}
.policy-copy code {
  font: 13px var(--font-mono);
}
.policy-table {
  overflow-x: auto;
}
.policy-copy table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.policy-copy th,
.policy-copy td {
  padding: 12px;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}
.not-found {
  min-height: 65vh;
  padding: 100px 0;
}
.not-found h1 {
  font-size: clamp(44px, 6vw, 80px);
  letter-spacing: -3px;
  line-height: 1;
}
.not-found p:not(.eyebrow) {
  color: var(--muted);
}
.not-found .button {
  margin-top: 20px;
}
@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1.1fr 1fr;
    gap: 30px;
    min-height: 560px;
    padding: 65px 0 80px;
  }
  .hero h1 {
    letter-spacing: -2.5px;
  }
  .features {
    gap: 28px;
  }
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .privacy-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 45px;
  }
}
@media (max-width: 760px) {
  .site-header {
    min-height: 92px;
    gap: 15px;
  }
  .wordmark {
    font-size: 26px;
  }
  .logo {
    gap: 9px;
  }
  .logo-mark {
    width: 25px;
    height: 33px;
  }
  .site-header nav {
    gap: 18px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 52px 0 80px;
  }
  .hero h1 {
    font-size: clamp(43px, 8.5vw, 65px);
  }
  .hero-description {
    max-width: 500px;
    font-size: 17px;
  }
  .hero-art {
    width: min(500px, 100%);
    justify-self: center;
  }
  .hero-tile > span {
    font-size: 15px;
  }
  .features {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 35px 0;
  }
  .features p {
    max-width: 500px;
  }
  .collection {
    padding: 65px 0;
  }
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 16px;
  }
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .game-caption {
    padding: 6px 15px 20px;
  }
  .game-caption h3 {
    font-size: 17px;
    padding-right: 0;
  }
  .game-index {
    display: none;
  }
  .support {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 40px 0;
  }
  .support-contact {
    justify-self: start;
  }
  .email-link {
    font-size: 20px;
  }
  .site-footer {
    align-items: start;
    flex-direction: column;
    gap: 4px;
    padding: 28px 0;
  }
  .site-footer nav {
    flex-wrap: wrap;
    gap: 25px;
  }
  .privacy-layout {
    display: block;
    padding: 40px 0 60px;
  }
  .policy-nav {
    position: static;
    padding-bottom: 30px;
    margin-bottom: 35px;
    border-bottom: 1px solid var(--line);
  }
  .policy-nav nav {
    gap: 2px;
  }
}
@media (max-width: 430px) {
  .site-header {
    flex-wrap: wrap;
    align-content: center;
    gap: 7px;
    padding: 17px 0;
  }
  .site-header nav {
    gap: 15px;
  }
  .site-header nav a {
    font-size: 12px;
  }
  .theme-toggle {
    width: 38px;
    height: 44px;
    border: 0;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 0.7px;
  }
  .hero h1 {
    font-size: 43px;
    letter-spacing: -2px;
  }
  .hero-actions {
    gap: 12px;
  }
  .hero-tile > span {
    font-size: 12px;
    left: 12px;
    bottom: 12px;
  }
  .collection-tag {
    padding: 10px 14px;
  }
  .game-caption h3 {
    font-size: 16px;
  }
  .game-caption p {
    font-size: 11px;
  }
  .email-link {
    font-size: 18px;
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}