@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin.woff2?v=2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
}

:root {
  /* Farben 1:1 aus dem Spiel (Neon in GameScene.swift) */
  --bg: #0d0d12;
  --surface: #17171f;
  --surface-2: #22222c;
  --ink: #fafafa;
  --ink-2: #b4b4c2;
  --dark: #0d0d12;
  --cyan: #33f2ff;
  --magenta: #ff33b3;
  --lime: #a6ff4d;
  --violet: #a666ff;
  --amber: #ffbf40;
  --danger: #ff4757;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --xl: clamp(52px, 8vw, 128px);
  --l: clamp(34px, 4.4vw, 64px);
  --m: clamp(22px, 2vw, 30px);
  --body: 18px;
  --s: 15px;

  --gutter: clamp(16px, 2.5vw, 40px);
  --gap: clamp(120px, 14vw, 200px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 600 var(--body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -0.03em; line-height: .95; }
p { margin: 0; }
::selection { background: var(--magenta); color: var(--dark); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.wrap { padding-inline: var(--gutter); }

/* Buttons: Kapsel wie „SPIELEN" im Spiel */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.6em;
  border: 0; border-radius: 999px;
  background: var(--cyan); color: var(--dark);
  font: 900 18px/1 var(--font); letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease), background-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); }
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.btn.small { font-size: 15px; padding: .7em 1.2em; }

/* Navigation */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 24px;
}
.mark { font-weight: 900; font-size: 20px; letter-spacing: -.01em; text-decoration: none; }
.mark span { color: var(--magenta); }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: var(--s); }
.nav ul a { text-decoration: none; color: var(--ink-2); transition: color .15s; }
.nav ul a:hover { color: var(--ink); }
@media (max-width: 860px) { .nav ul { display: none; } }

/* Rechtstexte */
.legal { max-width: 760px; padding-block: 48px var(--gap); }
.legal h1 { font-size: var(--l); margin-bottom: 40px; }
.legal h2 { font-size: var(--m); letter-spacing: -.01em; margin: 48px 0 12px; }
.legal p, .legal li { color: var(--ink); max-width: 68ch; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; }

/* Reveal-Animation (nur mit JS; ohne JS bleibt alles sichtbar) */
.js [data-r] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-r].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-r] { transform: none; transition: opacity .3s; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}