/* hash_b0t's head, his strike and the impact ring — COPIED rule for rule from
   client/public/mashpit/css/style.css (2026-09-25) so the website's hash_b0t is
   the stream's. client/test/finishers.test.cjs fails if a rule here no longer
   matches the stage's. The site never imports from client/. */
.sprite.bouncer-rig.bouncer-melee {
  animation: bouncerMelee 0.62s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes bouncerMelee {
  0%   { transform: translateX(0) rotate(0deg) scale(1, 1); }
  18%  { transform: translateX(calc(var(--strike-dir, 1) * -14px)) rotate(calc(var(--strike-dir, 1) * -8deg)) scale(0.94, 1.08); }  /* wind up, lean away */
  34%  { transform: translateX(calc(var(--strike-dir, 1) * 26px)) rotate(calc(var(--strike-dir, 1) * 16deg)) scale(1.14, 0.88); }   /* commit — the frame that lands */
  55%  { transform: translateX(calc(var(--strike-dir, 1) * 12px)) rotate(calc(var(--strike-dir, 1) * 6deg)) scale(1.02, 0.98); }
  100% { transform: translateX(0) rotate(0deg) scale(1, 1); }
}
.sprite.bouncer-rig.bouncer-cast {
  animation: bouncerCast 0.9s cubic-bezier(0.3, 0.8, 0.3, 1);
}
@keyframes bouncerCast {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(3px) scale(1.06, 0.93); }                                   /* plant */
  30%  { transform: translateY(-4px) scale(0.93, 1.1) translateX(calc(var(--strike-dir, 1) * 6px)); }  /* thrust */
  75%  { transform: translateY(-2px) scale(0.97, 1.04) translateX(calc(var(--strike-dir, 1) * 4px)); } /* hold while the beam burns */
  100% { transform: translateY(0) scale(1, 1); }
}
.sprite.victim-impact { animation: victimImpact 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes victimImpact {
  0%   { transform: scale(1, 1); }
  16%  { transform: scale(1.32, 0.68); }
  46%  { transform: scale(0.9, 1.14); }
  74%  { transform: scale(1.05, 0.96); }
  100% { transform: scale(1, 1); }
}
.impact-burst {
  position: absolute; width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%; pointer-events: none; z-index: 55;
  border: 3px solid rgba(255, 236, 190, 0.95);
  box-shadow: 0 0 14px rgba(255, 200, 110, 0.8);
  animation: impactBurst 0.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes impactBurst {
  0%   { transform: scale(0.25); opacity: 0; }
  12%  { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(calc(3.4 * var(--burst-power, 1))); opacity: 0; }
}
.sprite.bouncer-rig {
  width: 46px; height: 44px;
  background: none !important; border: none !important; box-shadow: none !important;
  margin-top: 30px; position: relative; overflow: visible;
}
.sprite.bouncer-rig::after { display: none !important; }
.skull { position: absolute; inset: 0; filter: drop-shadow(0 0 7px rgba(79,210,255,.4)); }
.cranium {
  position: absolute; top: 0; left: 5px; width: 36px; height: 26px;
  background: linear-gradient(155deg,#F4F7FA 0%,#B9C3CE 32%,#6E7A88 62%,#39424D 100%);
  border-radius: 48% 48% 38% 38% / 56% 56% 44% 44%;
  border: 1px solid #232A32;
  box-shadow: inset -3px -2px 5px rgba(0,0,0,.55), inset 3px 2px 4px rgba(255,255,255,.6);
}
.temple {
  position: absolute; top: 9px; width: 6px; height: 13px;
  background: linear-gradient(180deg,#9AA5B1,#4A535E);
  border: 1px solid #232A32; border-radius: 3px;
}
.temple.left  { left: 1px;  transform: rotate(-8deg); }
.temple.right { right: 1px; transform: rotate(8deg); }
.socket {
  position: absolute; top: 13px; width: 13px; height: 11px;
  background: radial-gradient(ellipse at 50% 40%, #14181D 0%, #05070A 100%);
  border-radius: 50% 50% 42% 42%; border: 1px solid #1B2128; box-shadow: inset 0 2px 4px rgba(0,0,0,.95);
  display: flex; align-items: center; justify-content: center;
}
.socket.left  { left: 8px; }
.socket.right { right: 8px; }
.ocular {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle,#F1FAFF 0%,#4FD2FF 38%,#0B5E80 100%);
  box-shadow: 0 0 6px #4FD2FF, 0 0 13px #4FD2FF, 0 0 24px rgba(79,210,255,.75);
  animation: ocularIdle 2.6s ease-in-out infinite;
  transition: transform 0.2s ease;
}
@keyframes ocularIdle {
  0%,100% { opacity: .82; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.14); }
}
.looking-right .ocular { transform: translateX(2px) scale(1); }
.looking-left .ocular { transform: translateX(-2px) scale(1); }
.cheek {
  position: absolute; top: 24px; width: 9px; height: 10px;
  background: linear-gradient(180deg,#C6D0DA,#5C6672);
  border: 1px solid #232A32; border-radius: 2px 2px 5px 5px;
}
.cheek.left  { left: 7px; }
.cheek.right { right: 7px; }
.jaw {
  position: absolute; bottom: 0; left: 11px; width: 24px; height: 11px;
  background: linear-gradient(180deg,#8C97A3,#38414B);
  border: 1px solid #232A32; border-radius: 3px 3px 7px 7px;
  display: flex; gap: 1px; padding: 1px; box-sizing: border-box;
  transform-origin: top center; transition: transform 0.2s ease;
}
.jaw span {
  flex: 1; background: linear-gradient(180deg,#F2F5F8,#AFB9C4); border-radius: 0 0 1px 1px;
}
.looking-right .jaw { transform: translateX(2px); }
.looking-left .jaw { transform: translateX(-2px); }
.chomping .jaw, .firing .jaw { animation: jawSnap .16s ease-in-out infinite alternate; }
@keyframes jawSnap { from { transform: scaleY(1); } to { transform: scaleY(.6); } }
.beam {
  position: absolute; top: 17px; left: 50%; height: 3px; width: 0;
  transform-origin: left center; opacity: 0; pointer-events: none; z-index: 50;
  /* Blue with the rest of him. The FIRE fatality below deliberately stays
     orange — that one is a flamethrower, not his eye, so it reads as an
     effect rather than as his own light. */
  background: linear-gradient(90deg, #FFFFFF 0%, #4FD2FF 22%, rgba(79,210,255,0) 100%);
  box-shadow: 0 0 9px #4FD2FF, 0 0 18px rgba(79,210,255,.85); border-radius: 2px;
}
.firing .beam { animation: fireBeam .42s ease-out; }
@keyframes fireBeam {
  0%   { opacity: 0; transform: scaleX(.1); }
  18%  { opacity: 1; transform: scaleX(1); }
  70%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
.fire-beam {
  height: 12px !important;
  background: linear-gradient(90deg, #FFFFFF 0%, #FF4500 22%, rgba(255,0,0,0) 100%) !important;
  box-shadow: 0 0 15px #FF4500, 0 0 30px rgba(255,69,0,.85) !important;
}
.freeze-beam {
  height: 12px !important;
  background: linear-gradient(90deg, #FFFFFF 0%, #00FFFF 22%, rgba(0,255,255,0) 100%) !important;
  box-shadow: 0 0 15px #00FFFF, 0 0 30px rgba(0,255,255,.85) !important;
}