@keyframes jub-v3-surface {
  0%, 100% { filter: drop-shadow(0 7px 8px rgba(12, 25, 7, .3)) brightness(1) saturate(1); }
  50% { filter: drop-shadow(0 10px 12px rgba(12, 25, 7, .36)) brightness(1.055) saturate(1.06); }
}
@keyframes jub-v3-glow {
  0%, 100% { opacity: .18; transform: translateY(5%) scale(.9); }
  50% { opacity: calc(.22 + var(--jub-near, 0) * .14); transform: translateY(4%) scale(1.05); }
}
@keyframes jub-v3-excite {
  0% { transform: translate3d(var(--jub-pull-x, 0), var(--jub-pull-y, 0), 0) scale(1); }
  17% { transform: translate3d(var(--jub-pull-x, 0), calc(var(--jub-pull-y, 0) + 4px), 0) rotate(-5deg) scale(1.14, .83); }
  43% { transform: translate3d(var(--jub-pull-x, 0), calc(var(--jub-pull-y, 0) - 7px), 0) rotate(4deg) scale(.89, 1.16); }
  68% { transform: translate3d(var(--jub-pull-x, 0), var(--jub-pull-y, 0), 0) rotate(-2deg) scale(1.07, .94); }
  100% { transform: translate3d(var(--jub-pull-x, 0), var(--jub-pull-y, 0), 0) scale(1.02, .99); }
}

.jub-b[data-jub-v3] {
  --jub-near: 0;
  --jub-pull-x: 0px;
  --jub-pull-y: 0px;
  width: clamp(100px, 10.5vw, 132px) !important;
  height: clamp(100px, 10.5vw, 132px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 44% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
  perspective: 460px;
  cursor: grab !important;
  touch-action: none;
  animation: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
}
.jub-b[data-jub-v3][data-jub-dragging] { cursor: grabbing !important; }
.jub-b[data-jub-v3][data-jub-busy] { pointer-events: none; }
.jub-b[data-jub-v3] .jub-eyes { display: none !important; }
.jub-v3-motion {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  transform-origin: 50% 76%;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}
.jub-v3-glow {
  position: absolute;
  z-index: -1;
  inset: 27% 17% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 68%, rgba(202, 255, 126, .34), rgba(119, 199, 44, .12) 48%, transparent 72%);
  filter: blur(13px);
  pointer-events: none;
  animation: jub-v3-glow 4.8s ease-in-out infinite;
}
.jub-v3-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 72%;
  transform: translate3d(var(--jub-pull-x), var(--jub-pull-y), 0)
    rotate(calc((var(--jub-near) - .25) * 2deg))
    scaleX(calc(1 + var(--jub-near) * .055))
    scaleY(calc(1 - var(--jub-near) * .025));
  transition: transform .16s cubic-bezier(.22, .8, .25, 1), filter .18s ease;
  will-change: transform, filter;
  animation: jub-v3-surface 4.8s ease-in-out infinite;
}
.jub-b[data-jub-v3]:hover .jub-v3-art,
.jub-b[data-jub-v3]:focus-visible .jub-v3-art {
  animation: jub-v3-excite .76s cubic-bezier(.22, .86, .25, 1.16) 1,
    jub-v3-surface 1.6s .76s ease-in-out infinite;
}
.jub-b[data-jub-v3]:focus-visible {
  outline: 2px solid rgba(202, 255, 139, .92) !important;
  outline-offset: 5px !important;
}
.jub-b[data-jub-v3][data-jub-emotion="excited"] .jub-v3-glow { opacity: .44; filter: blur(15px); }
.jub-b[data-jub-v3][data-jub-emotion="scared"] .jub-v3-art { filter: saturate(.86) brightness(1.08); }

.jub-tip[data-jub-v3-tip] {
  max-width: min(250px, calc(100vw - 20px)) !important;
  white-space: normal !important;
  border: 1px solid rgba(175, 255, 77, .34) !important;
  background: rgba(15, 28, 10, .95) !important;
  color: #f5ffe8 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
}

.jub-p[data-jub-v3-panel] {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(580px, calc(100vw - 24px)) !important;
  height: min(720px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .38) !important;
}
.jub-p[data-jub-v3-panel] .jub-h .av {
  background: transparent url('/jubber-v3/jubber.webp') center / contain no-repeat !important;
  box-shadow: none !important;
}
.jub-p[data-jub-v3-panel] .jub-h .av i { display: none !important; }
.jub-p[data-jub-v3-panel] .jub-m { min-height: 0 !important; flex: 1 1 auto !important; overflow-y: auto !important; }
.jub-p[data-jub-v3-panel] .jub-in { flex: 0 0 auto !important; order: 20; }
.jub-p[data-jub-v3-panel] .jub-tsbar { flex: 0 0 auto !important; order: 21; }
.jub-p[data-jub-v3-panel] .jub-fact { position: relative; padding-right: 92px !important; }
.jub-v3-fact-count {
  position: absolute;
  right: 10px;
  bottom: 3px;
  color: #687660;
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: .03em;
  pointer-events: none;
}

@media (max-width: 700px) {
  .jub-b[data-jub-v3] { width: 92px !important; height: 92px !important; }
  .jub-p[data-jub-v3-panel] {
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px !important;
  }
  .jub-p[data-jub-v3-panel] .jub-h { padding-right: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jub-v3-motion, .jub-v3-glow, .jub-v3-art,
  .jub-b[data-jub-v3]:hover .jub-v3-art,
  .jub-b[data-jub-v3]:focus-visible .jub-v3-art {
    animation: none !important;
    transition: none !important;
  }
}