* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000;
  font-family: -apple-system, sans-serif; }
#app, #app canvas { position: absolute; inset: 0; }
#crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 22px; opacity: 0.7; pointer-events: none; }
#hint { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  color: #fff; background: rgba(0,0,0,0.6); padding: 18px 28px; border-radius: 8px;
  text-align: center; line-height: 1.7; pointer-events: none; }
#hud { position: absolute; top: 10px; left: 12px; color: #fff;
  background: rgba(0,0,0,0.45); padding: 8px 12px; border-radius: 6px;
  font-size: 14px; display: flex; gap: 16px; pointer-events: none; }
#toolbar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center;
  background: rgba(0,0,0,0.55); padding: 8px 10px; border-radius: 8px; }
#toolbar button { background: #2a2a2e; color: #ddd; border: 1px solid #444;
  padding: 7px 10px; border-radius: 5px; cursor: pointer; font-size: 13px; }
#toolbar button:hover { background: #3a3a40; }
#toolbar button.active { background: #c3a75b; color: #111; border-color: #c3a75b; }
#toolbar span { color: #888; }