/* Lingering words sit over the creature without stealing its drag surface. */
.browser-shell > .residue-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  color: #694b5a;
  font-family: "Hiragino Maru Gothic ProN", "Helvetica Neue", sans-serif;
  user-select: none;
}

.residue-hint {
  position: absolute;
  top: 40px;
  right: 13px;
  z-index: 1;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid #dfcbd1;
  border-radius: 999px;
  background: #fffaf5db;
  color: #ae8194;
  font-size: 8px;
  letter-spacing: .06em;
  line-height: 1.4;
  pointer-events: none;
  transform: rotate(2deg);
}

.residue-word {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 44px;
  max-width: min(44vw, 170px);
  padding: 7px 11px;
  border: 2px solid color-mix(in srgb, var(--residue-color, #b57491) 58%, #fffaf5);
  border-radius: 48% 52% 46% 54%;
  background: color-mix(in srgb, var(--residue-color, #b57491) 18%, #fffaf5);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--residue-color, #b57491) 26%, transparent);
  color: color-mix(in srgb, var(--residue-color, #b57491) 72%, #493942);
  cursor: pointer;
  font-size: clamp(14px, 2.7vw, 18px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: auto;
  touch-action: manipulation;
  transform: translate(-50%, -50%) rotate(var(--residue-tilt, -3deg)) scale(var(--residue-scale, 1), var(--residue-scale-y, 1));
  transition: box-shadow .16s ease, filter .16s ease;
}

.residue-word[data-delivery="true"] {
  cursor: grab;
  touch-action: none;
}

.residue-word[data-dragging="true"] {
  z-index: 4;
  cursor: grabbing;
  animation: none !important;
  transform: translate(-50%, -61%) rotate(-2deg) scale(1.06, .96);
  box-shadow: 0 12px 0 color-mix(in srgb, var(--residue-color, #b57491) 24%, transparent), 0 0 0 3px #fffaf5;
  filter: saturate(1.18) brightness(1.04);
}

.residue-word[data-dragging="true"]::after {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 22px;
  border-left: 1px dashed color-mix(in srgb, var(--residue-color, #b57491) 54%, #fffaf5);
  content: '';
  opacity: .72;
  pointer-events: none;
  transform: rotate(3deg);
  transform-origin: top center;
}

.residue-word:hover,
.residue-word:focus-visible {
  filter: brightness(1.04) saturate(1.08);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--residue-color, #b57491) 30%, transparent), 0 0 0 3px #fffaf5;
}

.residue-word:active {
  filter: brightness(.98);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--residue-color, #b57491) 24%, transparent);
}

.residue-word[data-material="stone"] {
  border-radius: 42% 58% 52% 48%;
  background: color-mix(in srgb, var(--residue-color, #8b7b9d) 21%, #f8f4f0);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--residue-color, #8b7b9d) 38%, transparent);
}

.residue-word[data-material="jelly"] {
  border-radius: 55% 45% 58% 42%;
  background: color-mix(in srgb, var(--residue-color, #68aaa9) 20%, #fbfff9);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--residue-color, #68aaa9) 22%, transparent);
}

.residue-word[data-material="spring"] {
  border-radius: 42% 58% 45% 55%;
  background: color-mix(in srgb, var(--residue-color, #d6a940) 24%, #fffbea);
}

.residue-word[data-motion="hop"] {
  --residue-tilt: -8deg;
  --residue-scale: 1.08;
  animation: residue-hop .54s cubic-bezier(.21,.8,.35,1) both;
}

.residue-word[data-motion="swim"] {
  --residue-tilt: 7deg;
  animation: residue-swim .76s ease-in-out both;
}

.residue-word[data-motion="split"] {
  --residue-tilt: -5deg;
  animation: residue-split .7s cubic-bezier(.2,.8,.3,1) both;
}

.residue-word[data-motion="merge"] {
  z-index: 3;
  animation-name: residue-merge-gum;
  animation-duration: var(--residue-merge-duration, .76s);
  animation-timing-function: cubic-bezier(.2,.78,.28,1);
  animation-fill-mode: both;
}

.residue-word[data-material="jelly"][data-motion="merge"] {
  animation-name: residue-merge-jelly;
  animation-timing-function: ease-in-out;
}

.residue-word[data-material="spring"][data-motion="merge"] {
  animation-name: residue-merge-spring;
  animation-timing-function: cubic-bezier(.15,.9,.3,1);
}

.residue-word[data-material="stone"][data-motion="merge"] {
  animation-name: residue-merge-stone;
  animation-timing-function: cubic-bezier(.35,.65,.4,1);
}

.residue-word[data-fused="true"] {
  border-width: 3px;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--residue-color, #b57491) 38%, transparent), 0 0 0 2px #fffaf5;
  filter: saturate(1.15);
}

.residue-word[data-mixed="true"] {
  border-style: double;
  background: color-mix(in srgb, var(--residue-color, #b57491) 30%, #fffaf5);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--residue-color, #b57491) 42%, transparent), 0 0 0 2px #fffaf5;
  filter: saturate(1.3) hue-rotate(-4deg);
}

.residue-word[data-motion="merge"][data-mixed="true"] {
  filter: saturate(1.45) brightness(1.04);
}

.residue-word[data-grounded="true"] {
  --residue-scale: 1.08;
  --residue-scale-y: .9;
}

.residue-word[data-material="jelly"][data-motion="hop"] { animation-duration: .64s; }
.residue-word[data-material="jelly"][data-motion="swim"] { animation-duration: .9s; }
.residue-word[data-material="jelly"][data-motion="split"] { animation-duration: .83s; }
.residue-word[data-material="spring"][data-motion="hop"] { animation-duration: .42s; }
.residue-word[data-material="spring"][data-motion="swim"] { animation-duration: .59s; }
.residue-word[data-material="spring"][data-motion="split"] { animation-duration: .55s; }
.residue-word[data-material="stone"][data-motion="hop"] { animation-duration: .71s; }
.residue-word[data-material="stone"][data-motion="swim"] { animation-duration: 1s; }
.residue-word[data-material="stone"][data-motion="split"] { animation-duration: .92s; }

@keyframes residue-hop {
  0% { opacity: .76; transform: translate(-50%, -50%) rotate(-10deg) scale(.86, .92); }
  30% { opacity: 1; transform: translate(-50%, -72%) rotate(7deg) scale(1.08, .9); }
  68% { transform: translate(-50%, -45%) rotate(-4deg) scale(.96, 1.04); }
  100% { transform: translate(-50%, -50%) rotate(var(--residue-tilt, -3deg)) scale(var(--residue-scale, 1)); }
}

@keyframes residue-swim {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(.94, 1.03); }
  35% { transform: translate(calc(-50% + 13px), -57%) rotate(10deg) scale(1.04, .95); }
  68% { transform: translate(calc(-50% - 10px), -45%) rotate(-7deg) scale(.96, 1.03); }
  100% { transform: translate(-50%, -50%) rotate(var(--residue-tilt, 7deg)) scale(1); }
}

@keyframes residue-split {
  0% { opacity: .2; transform: translate(-50%, -50%) scale(.4) rotate(-18deg); }
  35% { opacity: 1; transform: translate(-50%, -58%) scale(1.18) rotate(8deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--residue-tilt, -5deg)); }
}

@keyframes residue-merge-gum {
  0% { opacity: .86; transform: translate(-50%, -50%) rotate(-4deg) scale(.92, 1.08); }
  35% { opacity: 1; transform: translate(-50%, -50%) rotate(7deg) scale(1.18, .8); }
  68% { transform: translate(-50%, -50%) rotate(-5deg) scale(.9, 1.12); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1, 1); }
}

@keyframes residue-merge-jelly {
  0% { opacity: .82; transform: translate(-50%, -50%) rotate(-6deg) scale(.9, 1.08); }
  25% { opacity: 1; transform: translate(-50%, -50%) rotate(12deg) scale(1.12, .88); }
  50% { transform: translate(-50%, -50%) rotate(-10deg) scale(.86, 1.14); }
  75% { transform: translate(-50%, -50%) rotate(7deg) scale(1.08, .92); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1, 1); }
}

@keyframes residue-merge-spring {
  0% { opacity: .72; transform: translate(-50%, -50%) rotate(-12deg) scale(.68, .78); }
  45% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg) scale(1.24, .82); }
  72% { transform: translate(-50%, -50%) rotate(-4deg) scale(.94, 1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1, 1); }
}

@keyframes residue-merge-stone {
  0% { opacity: .9; transform: translate(-50%, -54%) rotate(-3deg) scale(.92, 1.08); }
  60% { opacity: 1; transform: translate(-50%, -48%) rotate(3deg) scale(1.05, .92); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .residue-word,
  .residue-word[data-motion="hop"],
  .residue-word[data-motion="swim"],
  .residue-word[data-motion="split"],
  .residue-word[data-motion="merge"] {
    animation: none !important;
    transition: none;
  }

  .residue-word:hover,
  .residue-word:focus-visible {
    box-shadow: 0 4px 0 color-mix(in srgb, var(--residue-color, #b57491) 26%, transparent), 0 0 0 3px #fffaf5;
  }
}

@media (max-width: 520px) {
  .residue-hint {
    top: 36px;
    right: 8px;
    font-size: 7px;
  }

  .residue-word {
    min-width: 46px;
    min-height: 44px;
    padding: 6px 9px;
  }
}