:root { color-scheme: dark; }

html, body, #root { height: 100%; overscroll-behavior: none; }

body {
  background: #0a0c10;
  color: #e7e9ee;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Namens-Farbverläufe */
.name-fire { background-image: linear-gradient(90deg,#ff512f,#f09819,#ff512f); }
.name-ice { background-image: linear-gradient(90deg,#7de2fc,#b9e8fb,#00c6ff); }
.name-ocean { background-image: linear-gradient(90deg,#005c97,#363795,#00c6ff); }
.name-rainbow { background-image: linear-gradient(90deg,#ff5e5e,#ffd166,#3ddc84,#4fd1c5,#5e7dff,#c86dff); }
.name-purple-neon { background-image: linear-gradient(90deg,#c471f5,#fa71cd,#c471f5); }
.name-cyber { background-image: linear-gradient(90deg,#00fff0,#ff00e0,#00fff0); }
.name-gold { background-image: linear-gradient(90deg,#bf953f,#fcf6ba,#b38728,#fbf5b7); }
.name-matrix { background-image: linear-gradient(90deg,#00ff87,#00c46a,#00ff87); }
.name-sunset { background-image: linear-gradient(90deg,#ff7e5f,#feb47b,#ff7e5f); }
.name-aurora { background-image: linear-gradient(90deg,#00c6ff,#7ee8fa,#a166ff,#00c6ff); }
.name-galaxy { background-image: linear-gradient(90deg,#654ea3,#2a0845,#eaafc8,#654ea3); }

.name-gradient {
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: name-flow 6s linear infinite;
}

@keyframes name-flow {
  0% { background-position: 0% center; }
  100% { background-position: 220% center; }
}

.tabular-digits {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}