.poker-card-zone {
  position: relative;
  isolation: isolate;
}

.squishy-mascot-stage {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: -28px;
  width: min(980px, 96vw);
  height: 300px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  touch-action: manipulation;
  transform: translateX(-50%);
}

.clickable-mascot-pair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.clickable-mascot {
  position: absolute;
  bottom: 34px;
  width: clamp(118px, 11vw, 164px);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.clickable-mascot--left {
  left: calc(50% - 270px);
}

.clickable-mascot--right {
  right: calc(50% - 270px);
}

.clickable-mascot::after {
  position: absolute;
  z-index: -1;
  right: 12%;
  bottom: 4%;
  left: 12%;
  height: 22%;
  content: "";
  border-radius: 50%;
  background: rgb(0 0 0 / 58%);
  filter: blur(9px);
  transform: scaleX(0.86);
}

.clickable-mascot__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 12px 8px rgb(0 0 0 / 72%))
    drop-shadow(0 0 11px var(--theme-accent, #48f0bd));
  transform-origin: 50% 82%;
  animation: mascotIdle 2.8s ease-in-out infinite;
  will-change: transform, filter;
}

.clickable-mascot:hover .clickable-mascot__image,
.clickable-mascot:focus-visible .clickable-mascot__image {
  filter:
    drop-shadow(0 14px 9px rgb(0 0 0 / 78%))
    drop-shadow(0 0 19px var(--theme-accent, #48f0bd));
  transform: translateY(-5px) scale(1.06);
}

.clickable-mascot:focus-visible {
  border-radius: 50%;
  outline: 3px solid var(--theme-highlight, #fff089);
  outline-offset: 4px;
}

.clickable-mascot.is-tap-love .clickable-mascot__image {
  animation: mascotTapLove 1.05s cubic-bezier(.22, .85, .32, 1.18);
}

.clickable-mascot.is-dancing .clickable-mascot__image {
  animation: mascotDance 1.35s ease-in-out;
}

.clickable-mascot__hearts {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.clickable-mascot__heart {
  position: absolute;
  top: 44%;
  left: 50%;
  color: #ff507f;
  font-size: clamp(20px, 2.2vw, 31px);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow:
    0 2px 2px rgb(0 0 0 / 55%),
    0 0 9px #ffb5ca;
  animation: mascotHeartFloat 1450ms ease-out var(--heart-delay) forwards;
}

@keyframes mascotIdle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.025, 0.985); }
}

@keyframes mascotTapLove {
  0% { transform: translateY(0) scale(1); }
  16% { transform: translateY(12px) scale(1.18, 0.72); }
  34% { transform: translateY(-24px) scale(0.86, 1.22) rotate(-8deg); }
  52% { transform: translateY(-13px) scale(1.08, 0.94) rotate(9deg); }
  70% { transform: translateY(-8px) scale(0.97, 1.05) rotate(-5deg); }
  86% { transform: translateY(-3px) scale(1.03, 0.98) rotate(2deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes mascotDance {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  18% { transform: translateY(-14px) rotate(-12deg) scale(1.05); }
  38% { transform: translateY(-5px) rotate(13deg) scale(0.98); }
  58% { transform: translateY(-17px) rotate(-10deg) scale(1.07); }
  78% { transform: translateY(-6px) rotate(8deg) scale(1); }
}

@keyframes mascotHeartFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.45) rotate(0);
  }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--heart-x)), var(--heart-y))
      scale(1.18)
      rotate(var(--heart-rotation));
  }
}

@media (max-width: 720px) {
  .squishy-mascot-stage {
    bottom: -12px;
    width: 100vw;
    height: 220px;
  }

  .clickable-mascot {
    bottom: 25px;
    width: clamp(88px, 25vw, 116px);
  }

  .clickable-mascot--left {
    left: calc(50% - 145px);
  }

  .clickable-mascot--right {
    right: calc(50% - 145px);
  }
}

@media (max-width: 430px) {
  .clickable-mascot {
    bottom: 20px;
    width: 92px;
  }

  .clickable-mascot--left {
    left: calc(50% - 142px);
  }

  .clickable-mascot--right {
    right: calc(50% - 142px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clickable-mascot__image {
    animation: none;
  }
}