.alrigs-bongo {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999999;
  font-family: inherit;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.48));
}

.alrigs-bongo-toggle {
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s ease, filter .18s ease;
}

.alrigs-bongo-toggle:hover {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 0 12px rgba(255,132,0,.48));
}

.alrigs-tarzard-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.12);
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.58));
}

.alrigs-bongo-card {
  position: absolute;
  right: -4px;
  bottom: 72px;
  width: min(330px, calc(100vw - 20px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.58));
}

.alrigs-bongo-card[hidden] {
  display: none !important;
}

.alrigs-bongo-topbar {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
}

.alrigs-bongo-topbar strong {
  display: none;
}

.alrigs-bongo-close {
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10,10,10,.72);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.alrigs-bongo-close:hover {
  background: rgba(255,145,35,.9);
}

.alrigs-bongo-stage {
  position: relative;
  height: 265px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.alrigs-character-wrap {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 200px;
  height: 192px;
  transform: translateX(-50%);
  transform-origin: center 78%;
  transition: transform .08s ease;
  z-index: 4;
}

.alrigs-glow {
  position: absolute;
  inset: 38px 35px 9px;
  border-radius: 50%;
  background: rgba(255,133,0,.18);
  filter: blur(24px);
}

.alrigs-tarzard-character {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 13px 13px rgba(0,0,0,.58));
  z-index: 3;
  user-select: none;
  pointer-events: none;
}

.alrigs-claw {
  position: absolute;
  bottom: 12px;
  width: 54px;
  height: 42px;
  z-index: 8;
  border-radius: 58% 58% 46% 46%;
  background:
    radial-gradient(circle at 45% 32%, #ffd15e 0 10%, transparent 11%),
    linear-gradient(150deg, #f5a21f 0%, #dd6c0c 58%, #9c3e08 100%);
  border: 2px solid rgba(95,37,5,.72);
  box-shadow:
    inset 0 3px 5px rgba(255,235,137,.35),
    0 7px 10px rgba(0,0,0,.4);
  transform-origin: 50% 0;
  transition: transform .07s ease;
}

.alrigs-claw.left-claw {
  left: 4px;
  transform: rotate(18deg);
}

.alrigs-claw.right-claw {
  right: 4px;
  transform: rotate(-18deg);
}

.alrigs-claw i {
  position: absolute;
  bottom: -6px;
  width: 14px;
  height: 18px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(#fff6d5, #d7b784);
  border: 1px solid rgba(92,57,20,.55);
}

.alrigs-claw i:nth-child(1) { left: 4px; transform: rotate(16deg); }
.alrigs-claw i:nth-child(2) { left: 19px; }
.alrigs-claw i:nth-child(3) { right: 4px; transform: rotate(-16deg); }

.alrigs-bongo.hit-left .alrigs-character-wrap {
  transform: translateX(-50%) rotate(-2deg) translateY(3px);
}

.alrigs-bongo.hit-right .alrigs-character-wrap {
  transform: translateX(-50%) rotate(2deg) translateY(3px);
}

.alrigs-bongo.hit-left .left-claw {
  transform: rotate(18deg) translateY(27px) rotate(-8deg);
}

.alrigs-bongo.hit-right .right-claw {
  transform: rotate(-18deg) translateY(27px) rotate(8deg);
}

.alrigs-drum {
  position: absolute;
  bottom: 8px;
  width: 112px;
  height: 62px;
  border: 3px solid #2a1b10;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #ffe0aa 0 34%, #d98b37 36% 65%, #743612 67% 100%);
  cursor: pointer;
  box-shadow:
    0 8px 0 #47210e,
    0 13px 18px rgba(0,0,0,.45);
  transition: transform .07s ease, box-shadow .07s ease;
  z-index: 5;
}

.alrigs-drum.left {
  left: 12px;
}

.alrigs-drum.right {
  right: 12px;
}

.alrigs-drum span {
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(95,43,11,.48);
  border-radius: 50%;
}

.alrigs-drum.is-hit {
  transform: translateY(7px) scale(.97);
  box-shadow:
    0 3px 0 #47210e,
    0 7px 12px rgba(0,0,0,.38);
}

.alrigs-bongo-hint {
  margin-top: -1px;
  color: rgba(255,255,255,.82);
  text-align: center;
  font-size: 12px;
  text-shadow: 0 2px 7px #000;
}

@media (max-width: 480px) {
  .alrigs-bongo {
    right: 10px;
    bottom: 10px;
  }

  .alrigs-bongo-card {
    right: -2px;
    width: min(316px, calc(100vw - 16px));
  }

  .alrigs-character-wrap {
    width: 190px;
  }

  .alrigs-drum {
    width: 105px;
  }
}