:root {
  --shell: #2b2140;
  --shell-2: #1a1428;
  --screen: #0f1c16;
  --pixel: #9dffb0;
  --pixel-dim: #4a8a58;
  --hunger: #ff8a5b;
  --energy: #6ecbff;
  --joy: #ffe066;
  --danger: #ff5d6c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 20%, #3d2a5a, transparent 40%),
    radial-gradient(circle at 80% 80%, #1c3a3a, transparent 35%),
    #120e1a;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--pixel);
}

.device {
  width: min(420px, 94vw);
  padding: 22px 22px 16px;
  border-radius: 36px;
  background: linear-gradient(160deg, #4a3a68, var(--shell) 40%, var(--shell-2));
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.device-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
}

.device-brand {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 0.75rem;
  opacity: 0.8;
}

.music-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  background: rgba(29, 61, 42, 0.9);
  color: var(--pixel);
  font-size: 1rem;
  line-height: 1;
  overflow: visible;
}

.music-btn.muted {
  opacity: 0.55;
  background: #2a2038;
}

.music-btn.muted::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 2px;
  background: #ff8a9a;
  transform: rotate(-28deg);
}

.screen {
  position: relative;
  min-height: 560px;
  border-radius: 18px;
  background: var(--screen);
  overflow: hidden;
  border: 4px solid #0a0a0f;
}

.panel {
  position: relative;
  padding: 18px 16px 16px;
  min-height: 560px;
}

.habitat {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.habitat svg {
  width: 100%;
  height: 100%;
  display: block;
}

.panel.start > *:not(.habitat),
.panel.death > *:not(.habitat) {
  position: relative;
  z-index: 1;
}

.hidden,
[hidden] {
  display: none !important;
}

.start-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.start-copy {
  margin: 0 0 16px;
  text-align: center;
  color: #e8ffe8;
  font-size: 0.88rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.species-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.species-card {
  position: relative;
  display: grid;
  place-items: end center;
  gap: 2px;
  padding: 6px 4px 8px;
  min-height: 138px;
  overflow: hidden;
  background: transparent;
  color: #f4fff4;
  border: 2px solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.species-card .card-habitat {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.species-card .creature,
.species-card .card-label,
.species-card span {
  position: relative;
  z-index: 1;
}

.species-card.dead {
  border-color: rgba(80, 70, 80, 0.7);
  filter: grayscale(0.7) brightness(0.55);
  cursor: not-allowed;
}

.species-card.dead .creature {
  display: none;
}

.card-grave {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 88px;
}

.mini-tomb {
  width: 72px;
  min-height: 78px;
  padding: 8px 6px 6px;
  border-radius: 36px 36px 6px 6px;
  background: linear-gradient(180deg, #6e727a, #3e4248);
  box-shadow: inset 0 -8px 0 #2c2f34, 0 6px 10px rgba(0, 0, 0, 0.35);
  color: #e8e4d8;
  text-shadow: none;
  display: grid;
  place-items: center;
  gap: 2px;
}

.mini-tomb span {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 800;
}

.mini-tomb .grave-name {
  font-size: 0.68rem;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-tomb .grave-age {
  font-size: 0.58rem;
  font-style: normal;
  opacity: 0.8;
}

.panel.start.locked .name-field,
.panel.start.locked #start-btn {
  opacity: 0.45;
  pointer-events: none;
}

.species-card[aria-pressed="true"] {
  border-color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  background: transparent;
}

.species-card span {
  font-size: 0.78rem;
}

.name-field {
  display: grid;
  gap: 6px;
  margin: 16px 0 12px;
  font-size: 0.85rem;
  color: #e8ffe8;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.name-field input {
  border: 1px solid #2d5a3c;
  background: #0c1811;
  color: var(--pixel);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1rem;
}

#start-btn {
  width: 100%;
}

.panel.living {
  padding: 0;
  overflow: hidden;
  --sit-bottom: 16%;
}

.hud-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 58%;
  padding: 6px 10px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(10px);
  color: #143018;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.hud-name {
  font-weight: 800;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
}

.mini-bars {
  display: grid;
  gap: 3px;
}

.mini-bar {
  width: 42px;
  height: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(20, 40, 24, 0.28);
}

.mini-bar .fill {
  display: block;
  height: 100%;
}

.hud-sheet {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 52px;
  z-index: 5;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(14px);
  color: #143018;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.hud-sheet-title {
  margin: 0 0 4px;
  font-weight: 800;
}

.hud-sheet .age {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: #2a4a30;
}

.stat {
  display: grid;
  grid-template-columns: 52px 1fr 32px;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
}

.bar {
  height: 8px;
  background: rgba(20, 40, 24, 0.22);
  border-radius: 8px;
  overflow: hidden;
}

.fill {
  height: 100%;
  width: 100%;
  transition: width 0.25s ease;
}

.fill.hunger {
  background: var(--hunger);
}

.fill.energy {
  background: var(--energy);
}

.fill.joy {
  background: var(--joy);
}

.fill.clean {
  background: #9ae6b0;
}

.fill.low {
  animation: pulse 1s infinite;
}

.help-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  color: #143018;
  backdrop-filter: blur(10px);
  font-size: 1.05rem;
}

.guide {
  position: absolute;
  top: 50px;
  left: 12px;
  right: 12px;
  z-index: 8;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 252, 245, 0.94);
  backdrop-filter: blur(12px);
  color: #1a2e1c;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  animation: unroll 0.35s ease;
}

.guide h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.guide p,
.guide li {
  font-size: 0.82rem;
  line-height: 1.4;
}

.guide ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.creature.sit {
  width: 150px;
  pointer-events: auto;
}

.panel.living .prop {
  z-index: 30;
  pointer-events: auto !important;
}

.creature {
  height: 168px;
  display: grid;
  place-items: end center;
}

.creature.sit {
  position: absolute;
  left: 50%;
  bottom: var(--sit-bottom);
  transform: translateX(-50%);
  margin: 0;
  cursor: grab;
  touch-action: none;
  z-index: 3;
  width: 150px;
  pointer-events: auto;
}

.panel.living[data-habitat="bat"] {
  --sit-bottom: 24%;
}

.panel.living[data-habitat="frog"] {
  --sit-bottom: 13%;
}

.creature.mini {
  height: 92px;
  width: 100%;
  place-items: end center;
}

.creature-art {
  display: grid;
  place-items: center;
  position: relative;
}

.creature-motion {
  width: 150px;
  height: 168px;
  display: grid;
  place-items: end center;
  position: relative;
  transform-origin: 50% 90%;
}

.creature-art svg {
  width: 150px;
  height: 136px;
  overflow: visible;
  animation: bounce 2.6s ease-in-out infinite;
}

.creature.mini .creature-art svg {
  width: 86px;
  height: 78px;
  animation: none;
}

.dirt-layer {
  position: absolute;
  inset: 18% 16% 8%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(90, 58, 28, 0.55) 0 8px, transparent 9px),
    radial-gradient(circle at 68% 55%, rgba(70, 45, 22, 0.5) 0 7px, transparent 8px),
    radial-gradient(circle at 48% 72%, rgba(110, 72, 32, 0.45) 0 10px, transparent 11px),
    radial-gradient(circle at 60% 30%, rgba(80, 50, 24, 0.4) 0 6px, transparent 7px);
  opacity: 0;
  mix-blend-mode: multiply;
}

.sleep-eyes {
  opacity: 0;
}

.creature:not([data-mood="sleeping"]) .open-eyes {
  animation: blink-open 4.4s ease infinite;
}

.creature:not([data-mood="sleeping"]) .sleep-eyes {
  animation: blink-closed 4.4s ease infinite;
}

.creature[data-mood="sleeping"] .open-eyes {
  animation: none;
  opacity: 0;
}

.creature[data-mood="sleeping"] .sleep-eyes {
  animation: none;
  opacity: 1;
}

.mouth-sad,
.mouth-eat,
.mouth-yawn {
  display: none;
}

.creature[data-mood="sad"] .mouth-happy,
.creature[data-mood="hungry"] .mouth-happy,
.creature[data-mood="tired"] .mouth-happy,
.creature[data-mood="critical"] .mouth-happy {
  display: none;
}

.creature[data-mood="sad"] .mouth-sad,
.creature[data-mood="hungry"] .mouth-sad,
.creature[data-mood="tired"] .mouth-sad,
.creature[data-mood="critical"] .mouth-sad {
  display: inline;
}

.creature[data-mood="happy"] .mouth-happy {
  transform-origin: 0px 0px;
  animation: smile-pulse 3.2s ease-in-out infinite;
}

.creature[data-anim="eat"] .mouth-happy,
.creature[data-anim="eat"] .mouth-sad {
  display: none;
  animation: none;
}

.creature[data-anim="eat"] .mouth-eat {
  display: inline;
}

.creature[data-anim="joy"] .mouth-sad,
.creature[data-anim="joy"] .mouth-eat {
  display: none;
}

.creature[data-anim="joy"] .mouth-happy {
  display: inline;
  animation: none;
}

.creature[data-anim="wash"] .mouth-sad,
.creature[data-anim="wash"] .mouth-eat {
  display: none;
}

.creature[data-anim="wash"] .mouth-happy {
  display: inline;
  animation: none;
}

.creature[data-idle="yawn"] .mouth-happy,
.creature[data-idle="yawn"] .mouth-sad,
.creature[data-idle="yawn"] .mouth-eat {
  display: none;
}

.creature[data-idle="yawn"] .mouth-yawn {
  display: inline;
}

.creature[data-idle="yawn"] .open-eyes {
  animation: none;
  opacity: 0.25;
}

.creature[data-idle="yawn"] .sleep-eyes {
  animation: none;
  opacity: 0.85;
}

.creature[data-idle="smile"] .mouth-sad,
.creature[data-idle="smile"] .mouth-eat,
.creature[data-idle="smile"] .mouth-yawn {
  display: none;
}

.creature[data-idle="smile"] .mouth-happy {
  display: inline;
  animation: smile-pulse 0.45s ease-in-out 3;
}

.tear {
  opacity: 0;
}

.creature[data-mood="sad"] .tear,
.creature[data-mood="critical"] .tear {
  animation: tear-drop 1.8s ease-in infinite;
}

.eat-bite {
  position: absolute;
  left: 58%;
  top: 42%;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 8px;
  background: #e23d3d;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.creature[data-anim="eat"] .eat-bite {
  animation: nibble 1.2s ease-out;
}

.suds {
  position: absolute;
  inset: 12% 10% 6%;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 28% 40%, rgba(255, 255, 255, 0.95) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 32%, rgba(210, 245, 255, 0.9) 0 6px, transparent 7px),
    radial-gradient(circle at 48% 62%, rgba(255, 255, 255, 0.88) 0 9px, transparent 10px),
    radial-gradient(circle at 72% 58%, rgba(190, 235, 255, 0.85) 0 5px, transparent 6px),
    radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.8) 0 6px, transparent 7px);
}

.creature[data-anim="wash"] .suds {
  animation: suds-burst 0.9s ease-out;
}

.creature[data-mood="hungry"] .creature-art svg,
.creature[data-mood="tired"] .creature-art svg,
.creature[data-mood="sad"] .creature-art svg {
  animation: slump 2.8s ease-in-out infinite;
  filter: saturate(0.75) brightness(0.92);
}

.creature[data-mood="critical"] .creature-art svg {
  animation: shiver 0.25s linear infinite;
  filter: hue-rotate(-18deg) saturate(1.15);
}

.creature[data-mood="sleeping"] .creature-art svg {
  animation: none;
  filter: brightness(0.88) saturate(0.8);
}

.creature[data-anim="eat"] .creature-art svg {
  animation: chew 0.28s ease-in-out 5;
  filter: none;
}

.creature[data-anim="joy"] .creature-art svg {
  animation: joy-bounce 0.75s ease;
  filter: none;
}

.creature[data-anim="wash"] .creature-art svg {
  animation: scrub 0.16s ease-in-out 6;
  filter: brightness(1.08) saturate(1.05);
}

.creature.sit[data-idle="waddle"] {
  z-index: 4;
}

.creature[data-idle="waddle"] .creature-motion {
  animation: idle-waddle 5.2s ease-in-out;
}

.creature[data-idle="hop"] .creature-motion {
  animation: idle-hop 1.6s ease;
}

.creature[data-idle="hop"] .creature-art svg {
  animation: idle-hop-squash 0.53s ease 3;
}

.creature[data-idle="yawn"] .creature-motion {
  animation: idle-yawn 1.7s ease;
}

.creature[data-idle="smile"] .creature-art svg {
  animation: bounce 0.7s ease-in-out 2;
}

.creature[data-idle="spin"] .creature-art svg {
  animation: idle-spin 1.4s ease-in-out;
}

.creature[data-idle="peek"] .creature-motion {
  animation: idle-peek 1.8s ease-in-out;
}

.creature[data-idle="stretch"] .creature-motion {
  animation: idle-stretch 1.7s ease;
}

.creature[data-idle="scoot"] .creature-motion {
  animation: idle-scoot 2s ease-in-out;
}

.creature[data-idle="wiggle"] .creature-motion {
  animation: idle-wiggle 1.2s ease-in-out;
}

.status-text {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  margin: 0;
  color: #f3fff3;
  font-size: 0.82rem;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 2px 10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 5;
}

.prop {
  position: absolute;
  z-index: 6;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent !important;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.prop svg {
  pointer-events: none;
}

.prop.food {
  left: 4%;
  bottom: 18%;
}

.prop.sponge {
  right: 5%;
  bottom: 28%;
}

.prop.bed {
  right: 6%;
  bottom: 6%;
  cursor: pointer;
  z-index: 6;
}

.prop-art {
  display: block;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.prop.bed .prop-art {
  width: 64px;
  height: 50px;
}

.prop.dragging {
  opacity: 0.35;
}

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 80;
  margin: -28px 0 0 -28px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.drag-ghost svg {
  width: 56px;
  height: 56px;
  display: block;
  pointer-events: none;
}

.heart,
.zzz,
.wash-drop {
  position: absolute;
  pointer-events: none;
  font-weight: 800;
}

.heart {
  left: 50%;
  top: 18%;
  color: #ff6b9d;
  font-size: 1.15rem;
  animation: heart-up 0.9s ease-out forwards;
}

.zzz {
  left: 64%;
  top: 6%;
  color: #3d3a78;
  font-size: 1.05rem;
  text-shadow: 0 1px 0 #fff;
  animation: zzz-float 1.7s ease-out forwards;
}

.wash-drop {
  font-size: 1.05rem;
  z-index: 6;
  animation: wash-pop 0.85s ease-out forwards;
}

button {
  border: 0;
  background: #1d3d2a;
  color: var(--pixel);
  padding: 12px 8px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
}

button:hover:not(:disabled) {
  background: #27563a;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hud-chip:hover,
.help-btn:hover,
.prop:hover {
  background: transparent;
}

.hud-chip:hover {
  background: rgba(255, 255, 255, 0.5);
}

.help-btn:hover {
  background: rgba(255, 255, 255, 0.55);
}

.death {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f2c9c9;
}

.death::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 4, 8, 0.45);
  z-index: 0;
  pointer-events: none;
}

.tomb {
  width: 168px;
  min-height: 168px;
  padding: 18px 14px 16px;
  background: linear-gradient(180deg, #9aa0aa, #6d727c 55%, #5a5e66);
  border-radius: 84px 84px 12px 12px;
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 22px;
  box-shadow:
    inset 0 -14px 0 #4d5158,
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    0 12px 20px rgba(0, 0, 0, 0.35);
}

.rip {
  font-weight: 800;
  color: #2b2e34;
  letter-spacing: 0.28em;
  font-size: 0.95rem;
}

.tomb-name {
  margin: 8px 0 0;
  max-width: 140px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #1f2228;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tomb-age {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #2f333a;
  font-weight: 700;
}

.death-pet {
  position: absolute;
  right: -58px;
  top: 18px;
  filter: grayscale(0.35) brightness(1.05);
}

.death-pet .creature-art svg {
  animation: float 2.4s ease-in-out infinite;
}

.death h1 {
  margin: 0 0 8px;
}

.lock-copy,
.lock-meta,
#death-reason {
  max-width: 280px;
  color: #c9a0a0;
}

#locked-btn,
#grave-btn {
  margin-top: 12px;
  background: #3a1c22;
  color: #f2c9c9;
}

#grave-btn {
  background: #4a3038;
  color: #f6e6e6;
}

#grave-btn:hover:not(:disabled) {
  background: #5c3c44;
}

.hint {
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 12px 0 0;
}

.back-start {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  background: #1d3d2a;
  color: var(--pixel);
  font-size: 0.78rem;
  font-weight: 700;
}

.cheat-reset {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  background: transparent;
  color: rgba(157, 255, 176, 0.55);
  border: 1px dashed rgba(157, 255, 176, 0.28);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.cheat-reset:hover:not(:disabled) {
  background: rgba(29, 61, 42, 0.55);
  color: var(--pixel);
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes shiver {
  from {
    transform: translateX(-2px);
  }
  to {
    transform: translateX(2px);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.55;
  }
}

@keyframes float {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes unroll {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes heart-up {
  to {
    transform: translate(-50%, -36px);
    opacity: 0;
  }
}

@keyframes zzz-float {
  0% {
    transform: translate(0, 0) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(10px, -40px) scale(1.15);
    opacity: 0;
  }
}

@keyframes blink-open {
  0%,
  88%,
  96%,
  100% {
    opacity: 1;
  }
  90%,
  94% {
    opacity: 0;
  }
}

@keyframes blink-closed {
  0%,
  88%,
  96%,
  100% {
    opacity: 0;
  }
  90%,
  94% {
    opacity: 1;
  }
}

@keyframes smile-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18, 1.35);
  }
}

@keyframes chew {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(4px) scaleY(0.92);
  }
}

@keyframes joy-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(-16px) scale(1.07);
  }
  52% {
    transform: translateY(0) scale(1);
  }
  74% {
    transform: translateY(-8px) scale(1.04);
  }
}

@keyframes slump {
  0%,
  100% {
    transform: translateY(3px) rotate(-2deg);
  }
  50% {
    transform: translateY(6px) rotate(2deg);
  }
}

@keyframes tear-drop {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes nibble {
  0% {
    opacity: 0;
    transform: translate(8px, -6px) scale(0.6);
  }
  25% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-4px, 4px) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translate(-8px, 10px) scale(0.4);
  }
}

@keyframes scrub {
  0%,
  100% {
    transform: rotate(-7deg) translateX(-4px);
  }
  50% {
    transform: rotate(7deg) translateX(4px);
  }
}

@keyframes suds-burst {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  35% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes wash-pop {
  0% {
    transform: translateY(6px) scale(0.6);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(-38px) scale(1.15);
    opacity: 0;
  }
}

@keyframes idle-waddle {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  36% {
    transform: translateX(280px);
    opacity: 1;
  }
  40% {
    transform: translateX(280px);
    opacity: 0;
  }
  41% {
    transform: translateX(-280px);
    opacity: 0;
  }
  46% {
    transform: translateX(-280px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes idle-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  12% {
    transform: translateY(-40px);
  }
  24% {
    transform: translateY(0);
  }
  38% {
    transform: translateY(-34px);
  }
  52% {
    transform: translateY(0);
  }
  66% {
    transform: translateY(-26px);
  }
  80% {
    transform: translateY(0);
  }
}

@keyframes idle-hop-squash {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  40% {
    transform: translateY(-10px) scale(0.92, 1.12);
  }
  70% {
    transform: translateY(0) scale(1.08, 0.9);
  }
}

@keyframes idle-yawn {
  0%,
  100% {
    transform: scaleY(1);
  }
  30%,
  70% {
    transform: scaleY(1.08);
  }
}

@keyframes idle-spin {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-18deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes idle-peek {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-22px) rotate(-8deg);
  }
  55% {
    transform: translateX(20px) rotate(8deg);
  }
}

@keyframes idle-stretch {
  0%,
  100% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(0.92, 1.18);
  }
  70% {
    transform: scale(1.06, 0.94);
  }
}

@keyframes idle-scoot {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-24px);
  }
  60% {
    transform: translateX(16px);
  }
}

@keyframes idle-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-8deg);
  }
  80% {
    transform: rotate(6deg);
  }
}