*,
:before,
:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

html,
body {
  overscroll-behavior: none;
  cursor: grab;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #4cbfb9;
  color: white;
}

.world {
  position: absolute;
  width: 2000px;
  height: 2000px;
  pointer-events: none;
  background-color: #50ccc6;
}

.marker {
  position: absolute;
  /* background-color: hotpink;
  border-radius: 50%; */
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  transition: 0.3s;
  /* pointer-events: none;
  z-index: 9999 !important;
  opacity: 0.1; */
  display: none;
}

.m-cat {
  background-color: red;
}

.m-puppy {
  background-color: rgb(8, 106, 28);
}

.m-test {
  background-color: red;
  opacity: 1;
}

.animal {
  position: absolute;
  /* box-shadow: 0 0 0 1px hotpink; */
  --m: 2;
  --width: calc(var(--m) * var(--w));
  --height: calc(var(--m) * var(--h));

  margin-top: calc(var(--w) * -1);
  margin-left: calc(var(--h) * -1);
  transition: 1s linear;
  pointer-events: none;
  z-index: 1;
  --offset-y: 0;
}

.animal div {
  width: var(--width);
  height: var(--height);
  background-size: calc(var(--width) * var(--frame-no)) var(--height);
  /* side */
  background-image: var(--bg);
  animation: frame-animation infinite 0.5s steps(var(--frame-no));
  image-rendering: pixelated;
}

.puppy {
  --w: 48px;
  --h: 48px;
  --frame-col: 2;
  --frame-row: 6;
  --bg: url(data:image/png;base64,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);
}

.animal[pose='right'] div,
.animal[pose='down-right'] div,
.animal[pose='up-right'] div {
  transform: scale(-1, 1);
}

.image {
  position: absolute;
  /* background-color: #fdfdd8; */
  --w: 7;
  --h: 9;
  --width: calc(64px * var(--w) - 64px);
  --height: calc(64px * var(--h) - 64px);
  width: var(--width);
  height: var(--height);
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image img {
  width: auto;
  height: calc(100% - 16px);
  transition: 0.2s;
}

img.show {
  transform: scale(2);
  opacity: 0;
}

.cells {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  height: 0px;
  display: flex;
  flex-wrap: wrap;
  z-index: 99999;
  opacity: 0.3;
}

.cell {
  border: 0px hotpink solid;
  border-width: 0 0 1px 1px;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.cat {
  --w: 36px;
  --h: 36px;
  --frame-col: 2;
  --frame-row: 6;
  --bg: url(data:image/png;base64,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);
}

.animal div {
  background-size: calc(var(--width) * var(--frame-col))
    calc(var(--height) * var(--frame-row));
  animation: frame-animation infinite 0.5s steps(var(--frame-col));
}

.animal[pose='down-left'],
.animal[pose='down-right'] {
  --offset-y: 1;
}

.animal[pose='down'] {
  --offset-y: 2;
}

.animal[pose='up'] {
  --offset-y: 3;
}

.animal[pose='up-left'],
.animal[pose='up-right'] {
  --offset-y: 4;
}

.animal[pose='sitting'] div {
  --offset-y: 5;
}

.cat[pose='sitting'] div {
  animation: none;
  --offset-y: 5;
  background-position: 0px
    calc((var(--frame-row) - var(--offset-y)) * var(--height));
}

@keyframes frame-animation {
  0% {
    background-position: 0px
      calc((var(--frame-row) - var(--offset-y)) * var(--height));
  }
  100% {
    background-position: calc(-1 * var(--width) * var(--frame-col))
      calc((var(--frame-row) - var(--offset-y)) * var(--height));
  }
}

.bunny {
  --w: 32px;
  --h: 32px;
  --frame-col: 3;
  --frame-row: 4;
  --bg: url(data:image/png;base64,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);
}

.bunny[pose='down'] {
  --offset-y: 0;
  --offset-y: 1;
}

.bunny[pose='up'] {
  --offset-y: 2;
}

.bunny[pose='sitting'] div {
  --offset-y: 3;
  animation: none;
  background-position: 0px
    calc((var(--frame-row) - var(--offset-y)) * var(--height));
}

.highlight {
  background-color: rgb(218, 120, 169);
}

.overlay {
  position: fixed;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.overlay img {
  width: auto;
  height: calc(100% - 16px);
  animation: fade-in 0.3s forwards;
  pointer-events: none;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.overlay:has(img) {
  pointer-events: all;
}