* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { cursor: crosshair; background: #000; }
#screen { position: fixed; inset: 0; overflow: hidden; background: #000; touch-action: none; }
.center-favicon { pointer-events: none; }
.center-favicon { position: absolute; z-index: 1; top: 50%; left: 50%; width: 96px; height: 96px; object-fit: contain; transform: translate(-50%, -50%); image-rendering: auto; }
.bill { position: fixed; z-index: 2; pointer-events: none; display: grid; place-items: center; width: 58px; height: 34px; border: 3px solid #eaff00; border-radius: 2px; color: #eaff00; background: #126b31; font: bold 24px 'Courier New', monospace; box-shadow: 3px 3px 0 #000; animation: shoot .9s cubic-bezier(.1,.8,.35,1) forwards; }
@keyframes shoot { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(.7); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rotation)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .bill { animation-duration: .01ms; } }