/* The ammo bar in #ammoBar (task AM, src/ui/ammobar.js). styles.css only places the box.
   Eight little fish (or tennis balls) in a dark pill, all CSS shapes, no pictures. A bright
   one is ready, a grey one is spent, and the next one back fills up from the left
   (ammobar.js writes --p, 0..1, on that pip). Nobody presses it - FIRE is the STOP
   button's slot - so it lets every touch through. */
#ammoBar{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:rgba(10,18,34,.5);border:1px solid var(--edge);
  opacity:1;transition:opacity .45s ease,visibility 0s linear 0s}
#ammoBar.ammoOff{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
#ammoBar .pip{position:relative;display:block;width:34px;height:20px;flex:none;
  transition:transform .18s ease}
#ammoBar .pip.on{transform:none}
#ammoBar .pip:not(.on){transform:scale(.88)}
#ammoBar .sh{position:absolute;inset:0;display:block}
/* the grey one underneath, the bright one on top cut off at --p */
#ammoBar .base{filter:grayscale(1) brightness(.55);opacity:.55}
#ammoBar .fill{clip-path:inset(-4px calc((1 - var(--p,0)) * 100%) -4px -2px)}

/* A FISH, nose to the right: an orange oval body with one white band, a forked
   tail on the left made of two borders, one black eye. */
#ammoBar.fish .sh{left:9px;right:0;top:2px;bottom:2px;border-radius:50%;
  background:linear-gradient(90deg,#e0620f 0,#ff8a1f 30%,#ff8a1f 52%,#fff6e8 52%,#fff6e8 66%,#ffa43c 66%);
  box-shadow:inset 0 -3px 0 rgba(150,60,0,.28)}
#ammoBar.fish .sh::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-8px;
  width:0;height:0;border-style:solid;border-width:8px 0 8px 12px;
  border-color:transparent transparent transparent #e0620f}
#ammoBar.fish .sh::after{content:"";position:absolute;right:4px;top:4px;width:4px;height:4px;
  border-radius:50%;background:#15181d;box-shadow:0 0 0 1.5px #fff}
/* the clip must let the tail through: it hangs 10 px out to the left */
#ammoBar.fish .fill{clip-path:inset(-4px calc((1 - var(--p,0)) * (100% + 10px)) -4px -12px)}

/* A TENNIS BALL: fuzzy yellow-green with the two white seam arcs. */
#ammoBar.ball .pip{width:24px;height:24px}
#ammoBar.ball .sh{border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#e9f56a 0,#c6e22e 55%,#9fb81e 100%)}
#ammoBar.ball .sh::before,#ammoBar.ball .sh::after{content:"";position:absolute;top:-3px;
  width:22px;height:26px;border-radius:50%;border:2px solid #fdfdf4}
#ammoBar.ball .sh::before{left:-17px}
#ammoBar.ball .sh::after{right:-17px}

/* one just left: a little hop (two names for one animation, so it can restart) */
@keyframes ammoHopA{0%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(1.07)}100%{transform:translateX(-50%) scale(1)}}
@keyframes ammoHopB{0%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(1.07)}100%{transform:translateX(-50%) scale(1)}}
#ammoBar.ammoShotA{animation:ammoHopA .2s ease-out}
#ammoBar.ammoShotB{animation:ammoHopB .2s ease-out}

/* A phone: smaller, tighter. */
@media (max-width:700px),(max-height:500px){
  #ammoBar{gap:4px;padding:5px 9px}
  #ammoBar .pip{width:26px;height:15px}
  #ammoBar.fish .sh{left:7px;top:1px;bottom:1px}
  #ammoBar.fish .sh::before{left:-8px;margin-top:-6px;border-width:6px 0 6px 9px}
  #ammoBar.fish .sh::after{right:3px;top:3px;width:3px;height:3px}
  #ammoBar.ball .pip{width:18px;height:18px}
  #ammoBar.ball .sh::before,#ammoBar.ball .sh::after{width:17px;height:20px}
  #ammoBar.ball .sh::before{left:-13px}
  #ammoBar.ball .sh::after{right:-13px}
}