/* ===== Mascot Wrapper ===== */

#mascot-wrap {
  position: fixed;
  bottom: 18px;
  left: 18px;
  width: 140px;
  height: 140px;
  z-index: 12;
  pointer-events: auto;
}

#mascot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

/* hat - positioned above the head */
#mascot-hat {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* mascot parts colored through CSS variables */
.mascot-body { fill: var(--mascot-body, #2bdcff); transition: fill 300ms ease; }
.mascot-head { fill: var(--mascot-head, #00ffa6); transition: fill 300ms ease; }

/* idle wiggle */
@keyframes idleWiggle {
  0% { transform: translateY(0) rotate(0deg) }
  40% { transform: translateY(-6px) rotate(-1deg) }
  80% { transform: translateY(0) rotate(2deg) }
  100% { transform: translateY(0) rotate(0) }
}
.idle { animation: idleWiggle 4.2s ease-in-out infinite; }

/* blink */
.eye { transform-origin: center; }
.blink { animation: blink 6s infinite; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1) }
  95% { transform: scaleY(0.08) }
}


#eyeLeft, #eyeRight {
  transition: cx 0.3s ease, cy 0.3s ease;
}

/* mouth animations */
#mouth { transform-origin: center; transform-box: fill-box; transition: transform 180ms ease; }
.mouth-open { animation: mouthOpen 420ms ease forwards; }
@keyframes mouthOpen {
  0% { transform: scaleY(1) }
  30% { transform: scaleY(1.6) }
  60% { transform: scaleY(1.2) }
  100% { transform: scaleY(1) }
}

/* bubble */
#bubble {
  position: fixed;
  bottom: 170px;
  left: 36px;
  background: #131313;
  border: 1px solid rgba(60, 220, 255, 0.12);
  padding: 10px 12px;
  border-radius: 10px;
  max-width: 240px;
  font-size: 0.92rem;
  color: #dfeff6;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: 300ms ease;
  z-index: 11;
  pointer-events: none;
}

#bubble.show { opacity: 1; transform: translateY(0); }

/* customization panel removed - settings live in miniMenu */