* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #030306; overflow: hidden; }
body {
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #cfd3e0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: none; }

#hud {
  position: fixed; left: 20px; bottom: 20px;
  padding: 16px 18px 14px;
  background: rgba(6, 7, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
  max-width: 280px;
}
#hud.idle { opacity: 0.18; }
#hud.hidden { opacity: 0; transform: translateY(10px); }
#hud h1 {
  font-size: 13px; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase;
  color: #fff;
}
#hud .sub { opacity: 0.55; margin-top: 2px; }
#hud .preset { margin-top: 10px; font-size: 13px; color: #fff; }
#hud .pill {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border: 1px solid currentColor; border-radius: 99px;
  font-size: 10px; opacity: 0.35; letter-spacing: 0.1em;
}
#hud .pill.on { opacity: 0.9; }
#hud .keys { list-style: none; margin-top: 10px; opacity: 0.6; columns: 1; }
#hud .keys b { color: #fff; font-weight: 500; }

#brush {
  position: fixed; left: 0; top: 0; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s, opacity 0.4s;
  opacity: 0;
}
#brush.repel { border-color: rgba(255, 90, 90, 0.7); border-style: dashed; }
#brush.feed { border-color: rgba(255, 255, 255, 0.8); }

#toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 99px;
  background: rgba(6, 7, 12, 0.6); border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff; letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px;
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
#toast.show { opacity: 1; }

@media (max-width: 600px) {
  #hud { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  #hud .keys { display: none; }
}