.pixel-hands-idle, .pixel-hand-idle-right, .pixel-held-rig {
  position: fixed;
  z-index: 2;
  bottom: 0;
  width: min(100vw, 1536px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
  will-change: transform;
}
.pixel-hands-idle, .pixel-hand-idle-right {
  left: 50%;
  height: auto;
  /* The artwork is pixel painted; smooth sampling lets subpixel motion interpolate. */
  image-rendering: auto;
  filter: var(--hand-light-filter, brightness(1));
  transform: translate3d(-50%, 0, 0) translate3d(var(--hand-x, 0px), var(--hand-y, 0px), 0) rotate(var(--hand-roll, 0deg));
}
.pixel-hands-idle { clip-path: inset(0 50% 0 0); transform-origin: 0 100%; }
.pixel-hand-idle-right { clip-path: inset(0 0 0 50%); transform-origin: 100% 100%; }
.pixel-held-rig {
  left: 50%;
  z-index: 3;
  aspect-ratio: 3 / 2;
  transform-origin: 50% 100%;
  transform: translate3d(-50%, 0, 0) translate3d(var(--hand-x, 0px), var(--hand-y, 0px), 0) rotate(var(--hand-roll, 0deg)) scale(1.05);
}
@media (min-width: 1600px) {
  .pixel-held-rig {
    transform: translate3d(-50%, 0, 0) translate3d(var(--hand-x, 0px), var(--hand-y, 0px), 0) rotate(var(--hand-roll, 0deg)) scale(1.18);
  }
}
.pixel-hands-idle.visible, .pixel-hand-idle-right.visible, .pixel-held-rig.visible { opacity: 1; }
.pixel-hand-shade {
  filter: brightness(0);
  opacity: 0;
  mask-image: linear-gradient(var(--shade-angle, 0deg), #000 5%, transparent 95%);
  mask-size: 50% 100%;
  mask-repeat: repeat-x;
}
.pixel-hand-shade.visible { opacity: var(--shade-opacity, 0); }
.pixel-held-rig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  filter: url('./textures/hud/alpha-cut.svg#alpha-cut') brightness(.86) saturate(.9) var(--hand-light-filter, brightness(1));
}
.pixel-held-rig .pixel-hand-shade {
  filter: url('./textures/hud/alpha-cut.svg#alpha-cut') brightness(0);
  opacity: var(--shade-opacity, 0);
}
.pixel-hand-lantern { clip-path: polygon(0 0, 100% 0, 100% 100%, 77.2% 100%, 77.2% 71.7%, 0 71.7%); }
.pixel-lantern-body {
  clip-path: inset(71.7% 22.8% 0 65%);
  transform-origin: 72% 71.7%;
  transform: rotate(var(--lantern-sway, 0deg)) scale(1.17);
}
.pixel-bucket-body {
  /* Keep the swinging layer left of the fingers. The matching hand layer
     stays attached to the arm, so no second hand rotates behind it. */
  clip-path: polygon(65% 60%, 73% 60%, 72% 63%, 73% 66%, 75% 71%, 78% 74%, 80% 78%, 82% 84%, 84% 90%, 86% 100%, 65% 100%);
  transform-origin: 74% 63%;
  transform: rotate(var(--bucket-sway, 0deg)) scale(1.14);
}
.pixel-bucket-hand {
  clip-path: polygon(74% 58%, 100% 58%, 100% 100%, 86% 100%, 84% 90%, 82% 84%, 80% 78%, 78% 74%, 75% 71%, 73% 66%, 72% 63%, 73% 60%);
}
.pixel-wine-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: brightness(.86) var(--hand-light-filter, brightness(1));
}
.pixel-wine-bottle-rig img.pixel-hand-wine-bottle {
  /* The shared alpha cutoff would discard the translucent wine and glass. */
  filter: brightness(.86) saturate(.9) var(--hand-light-filter, brightness(1));
}
.pixel-wine-bottle-rig img.pixel-hand-shade {
  filter: brightness(0);
}
body.editing .pixel-hands-idle, body.editing .pixel-hand-idle-right, body.editing .pixel-held-rig { display: none; }

/* Weapon artwork already includes the matching hands and sleeves. Unlike the other held
   items it fills most of its frame, so it is also sized by the screen's height (the
   muzzle would leave the top of a short window) and not enlarged further. */
.pixel-weapon-rig img { image-rendering: pixelated; }
.pixel-weapon-rig {
  width: var(--weapon-w);
  /* held low and to the right, as a gun is carried, clear of the crosshair */
  transform: translate3d(-50%, 0, 0) translate3d(var(--weapon-x), var(--weapon-y), 0) translate3d(var(--hand-x, 0px), var(--hand-y, 0px), 0) rotate(var(--hand-roll, 0deg));
}
.pixel-revolver-rig { --weapon-w: min(78vw, 1536px, 98vh); --weapon-x: 27%; --weapon-y: 11%; }
.pixel-rifle-rig { --weapon-w: min(82vw, 1536px, 104vh); --weapon-x: 33%; --weapon-y: 17%; }


/* Cehennem Nefesi: the casting hand, a frame at a time, low on the right like the guns. */
.pixel-fire-rig { width: min(78vw, 1536px, 98vh); transform: translate3d(-50%, 0, 0) translate3d(20%, 6%, 0) translate3d(var(--hand-x, 0px), var(--hand-y, 0px), 0) rotate(var(--hand-roll, 0deg)); }
.pixel-fire-rig img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; }
.pixel-fire-rig img.on { opacity: 1; }

/* The shot frame swaps in over the gun for a moment. */
.pixel-weapon-rig .pixel-weapon-fire { opacity: 0; }
.pixel-weapon-rig .pixel-weapon-fire.on { opacity: 1; }
.pixel-weapon-rig img.off { opacity: 0; }
/* every frame swap is instant, the load frames too: only ever one drawing of the hands on screen */
/* Cartridges, bottom right, after Hunt: the rounds in the gun, then the spares in the bag. */
.pixel-ammo {
  position: fixed; z-index: 5; left: calc(50% + min(19vw, 280px) - 16px); bottom: 31px; height: 20px;
  display: flex; align-items: center; gap: 4px;
  pointer-events: none; filter: drop-shadow(0 2px 3px #000c);
  opacity: 0; transition: opacity .2s ease;
}
.pixel-ammo-spare { order: -1; margin-right: 6px; color: #c2bfb8; font: 400 16px/1 'Optimus Princeps', Georgia, serif; text-shadow: 0 1px 2px #000; }
.pixel-ammo-round {
  display: block; flex: 0 0 auto; width: 6px; height: 100%;
  filter: grayscale(1) brightness(.85);                     /* worn steel grey, not brass */
  background: url('./textures/hud/hud-ammo-round.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.pixel-ammo-round.spent { opacity: .18; filter: grayscale(1) brightness(.8); }
.pixel-ammo.visible { opacity: 1; }
body.editing .pixel-ammo { display: none; }
@media (max-width: 760px) { .pixel-ammo { left: calc(50% + 31vw + 4px); height: 16px; bottom: 26px; } }
@media (max-width: 420px) { .pixel-ammo { left: auto; right: 6px; bottom: 60px; } }