.bit-companion {
  position: fixed;
  right: clamp(10px, 2.4vw, 38px);
  bottom: max(4px, env(safe-area-inset-bottom));
  z-index: 160;
  width: clamp(126px, 11.2vw, 172px);
  pointer-events: none;
  isolation: isolate;
  contain: layout style;
}

.bit-companion__button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 265 / 302;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 42%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform-origin: 50% 88%;
  animation: bit-idle-float 3.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.bit-companion__button::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 23%;
  right: 23%;
  bottom: 4.5%;
  height: 7%;
  border: 1px solid color-mix(in srgb, var(--accent-ui, #c9ff45) 32%, transparent);
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .66;
  transform: scaleX(.88);
  transition: opacity .25s ease, transform .25s ease;
}

.bit-companion__button:focus-visible {
  outline: 2px solid var(--accent-ui, #c9ff45);
  outline-offset: 3px;
}

.bit-companion__sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 10px 13px rgba(4, 9, 6, .26));
}

[data-theme='light'] .bit-companion__sprite {
  filter: drop-shadow(0 10px 14px rgba(34, 46, 38, .22));
}

.bit-companion.is-hopping .bit-companion__button {
  animation: bit-hover-hop .72s cubic-bezier(.22, .8, .3, 1);
}

.bit-companion.is-clicked .bit-companion__button {
  animation: bit-click-hop .78s cubic-bezier(.2, .82, .28, 1);
}

.bit-companion.is-waking .bit-companion__button {
  animation: bit-wake .54s cubic-bezier(.2, .8, .25, 1);
}

.bit-companion.is-standby .bit-companion__button {
  animation: bit-standby-breathe 4.8s ease-in-out infinite;
}

.bit-companion.is-standby .bit-companion__button::after {
  opacity: .28;
  transform: scaleX(.7);
}

@keyframes bit-idle-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  45% { transform: translate3d(0, -3px, 0) scale(1.006); }
  55% { transform: translate3d(0, -3px, 0) scale(1.006); }
}

@keyframes bit-hover-hop {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  18% { transform: translate3d(0, 3px, 0) scale(1.055, .95); }
  48% { transform: translate3d(0, -17px, 0) scale(.98, 1.035); }
  70% { transform: translate3d(0, 1px, 0) scale(1.045, .965); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bit-click-hop {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  16% { transform: translate3d(0, 4px, 0) scale(1.07, .94); }
  46% { transform: translate3d(0, -23px, 0) rotate(-1.5deg) scale(.97, 1.04); }
  70% { transform: translate3d(0, 2px, 0) scale(1.06, .95); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bit-wake {
  0% { transform: translate3d(0, 2px, 0) rotate(2deg); }
  35% { transform: translate3d(-2px, -4px, 0) rotate(-2deg); }
  65% { transform: translate3d(2px, -2px, 0) rotate(1deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes bit-standby-breathe {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(0deg); opacity: .94; }
  50% { transform: translate3d(0, 1px, 0) rotate(.35deg); opacity: 1; }
}

@media (max-width: 780px) {
  .bit-companion {
    right: 3px;
    bottom: max(1px, env(safe-area-inset-bottom));
    width: clamp(96px, 25vw, 116px);
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .bit-companion { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .bit-companion__button,
  .bit-companion.is-hopping .bit-companion__button,
  .bit-companion.is-clicked .bit-companion__button,
  .bit-companion.is-waking .bit-companion__button,
  .bit-companion.is-standby .bit-companion__button {
    animation: none;
    transform: none;
  }
}

@media print {
  .bit-companion { display: none !important; }
}