/* Reset + base */
* { box-sizing: border-box; }
:root {
  --bg: #0b0c10;   /* Hintergrund dunkel */
  --fg: #e6e6f0;   /* Text */
  --ball: #ffffff; /* Bälle weiß */
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.visually-hidden {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

.wrap {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 48px 24px 24px;
}

.title {
  margin: 0;
  font-size: clamp(28px, 6vw, 72px);
  font-weight: 800;
  text-align: center;
  color: var(--fg);
}

.subtitle {
  margin: 0 auto;
  text-align: center;
  opacity: 0.7;
  font-weight: 600;
}

/* Gooey stage */
#stage {
  position: relative;
  width: min(1100px, 92vw);
  height: min(600px, 60vh);
  margin: 24px auto;
  filter: url(#goo);
  border-radius: 28px;
  background: transparent;
  overflow: hidden;
}

/* Weiße Bälle */
.ball {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--ball);
  will-change: transform;
  pointer-events: none;
}

.hint {
  text-align: center;
  opacity: 0.6;
  font-size: 14px;
}