* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #050510;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
canvas {
  display: block; width: 100%; height: 100%;
  cursor: crosshair;
  image-rendering: auto;
  transition: filter 0.3s ease;
}
canvas.blur-bg {
  filter: blur(2px) brightness(0.7);
}
@media (hover: none) and (pointer: coarse) {
  canvas { cursor: default; }
}
#footer {
  position: fixed; bottom: 4px; left: 50%; transform: translateX(-50%);
  z-index: 100; font-family: 'Share Tech Mono', monospace; font-size: 11px;
  pointer-events: auto;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
#footer:hover {
  opacity: 1;
}
#footer a {
  color: #444; text-decoration: none;
  transition: color 0.4s ease, text-shadow 0.4s ease, letter-spacing 0.3s ease;
  letter-spacing: 0.5px;
}
#footer a:hover {
  color: #0ff;
  text-shadow: 0 0 12px rgba(0,255,255,0.7), 0 0 24px rgba(0,255,255,0.3);
  letter-spacing: 1.5px;
}