/* Grundlagen: Farb-Variablen, Seite, Fadenkreuz. Die Bereiche liegen in eigenen Dateien, die index.html in fester
   Reihenfolge lädt (die Kaskade hängt davon ab – Touch-Anpassungen in touch.css müssen nach den anderen kommen). */

:root {
  --accent: #3aa0ff;
  --accent-2: #9b6bff;
  --good: #4be08a;
  --bad: #ff5d5d;
  --gold: #ffcf4a;
  --glass: rgba(14, 17, 24, 0.8); /* ohne Unschärfe-Effekt: der kostet über dem 3D-Bild jedes Frame GPU-Zeit */
  --glass-border: rgba(255, 255, 255, 0.12);
  --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0d12;
  color: #eef1f6;
  font-family: 'Inter', system-ui, sans-serif;
}

canvas { display: block; }

/* Fadenkreuz: Punkt mit Ring, der aufgeht, wenn man auf etwas Benutzbares zielt */
#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  transition: transform 0.15s;
}
#crosshair::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  transform: scale(0.4);
  transition: transform 0.18s, border-color 0.18s;
}
#crosshair.active { background: var(--good); }
#crosshair.active::after { border-color: var(--good); transform: scale(1); }