:root {
  color-scheme: light;
  background: #fff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #fff;
}

body {
  min-height: 100svh;
  overflow: hidden;
}

.dragon-widget {
  --pet-x: 0px;
  --pet-y: 0px;
  position: fixed;
  right: clamp(10px, 2.5vw, 44px);
  bottom: clamp(4px, 1.5vw, 24px);
  z-index: 1;
  width: min(560px, 44vw);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate3d(var(--pet-x), var(--pet-y), 0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.dragon-widget.is-pet-mode {
  pointer-events: auto;
  cursor: grab;
}

.dragon-widget.is-dragging {
  cursor: grabbing;
}

.dragon-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  transform-origin: 66% 78%;
  animation: dragon-idle 4.2s steps(2, jump-none) infinite;
}

.dragon-speech {
  position: absolute;
  right: 61%;
  bottom: 77%;
  z-index: 2;
  min-width: 142px;
  padding: 15px 20px;
  color: #17112e;
  background: #fff;
  border: 4px solid #17112e;
  box-shadow: 6px 6px 0 rgba(255, 54, 95, 0.78);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 950;
  letter-spacing: 0.025em;
  opacity: 0;
  transform: translateY(12px) scale(0.82) rotate(-2deg);
  transform-origin: right bottom;
  visibility: hidden;
}

.dragon-speech::before,
.dragon-speech::after {
  position: absolute;
  content: "";
}

.dragon-speech::before {
  right: 15px;
  bottom: -24px;
  border-top: 24px solid #17112e;
  border-left: 20px solid transparent;
}

.dragon-speech::after {
  right: 20px;
  bottom: -15px;
  border-top: 17px solid #fff;
  border-left: 13px solid transparent;
}

.dragon-speech.is-visible {
  visibility: visible;
  animation: bubble-pop 3.1s steps(4, end) both;
}

@keyframes dragon-idle {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-5px) rotate(-0.7deg);
  }
}

@keyframes bubble-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.82) rotate(-2deg);
  }

  13%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-2deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-9px) scale(0.92) rotate(-2deg);
  }
}

@media (max-width: 700px) {
  .dragon-widget {
    right: -8px;
    bottom: 4px;
    width: min(520px, 92vw);
  }

  .dragon-speech {
    right: 54%;
    min-width: 124px;
    padding: 12px 16px;
  }
}

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

  .dragon-speech {
    display: none;
  }
}