*,
: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;
}

:root {
  interpolate-size: allow-keywords;
  --secondary: #297183;
  --tertiary: #124552;
  --highlight: #f259db;
  --brown: #57280f;
  --blue: #246ed8;
  --blue-highlight: #6fa9fa;
  --black: #191919;
  --grey: #424242;
}

body {
  background-color: var(--brown);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.d-none {
  display: none;
}

.hide {
  opacity: 0;
}

.hide button {
  pointer-events: none;
}

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-wrapper {
  position: relative;
  height: 100px;
  width: 300px;
  display: flex;
  align-items: end;
  justify-content: center;
  pointer-events: none;
  z-index: 99999;
}

.wrapper.fade-in {
  animation: forwards fade-in-world 0.2s;
}

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

.wrapper.fade-out {
  animation: forwards fade-out-world 0.2s;
}

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

.overflow-hidden {
  overflow: hidden;
}

.sprite-container {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
  transition: 0.3s;
  /* border: 1px solid hotpink; */
}

.sprite {
  --w: 20px;
  --h: 32px;
  --m: 2;
  --col: 3;
  --row: 4;
  --mw: 6px;
  --mh: 4px;
  --mx: 7px;
  --my: -3px;
  --bg-color: #fff;
  position: absolute;
  --width: calc(var(--w) * var(--m));
  left: calc(-0.5 * var(--width));
  --height: calc(var(--h) * var(--m));
  --mouth: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAECAYAAAC6Jt6KAAAAQUlEQVR4AZSMwQkAIAwD1QVcw42c0Y1cwwmUKwTy8dHC0ZA0bSU5UZijX0c/3EPjR2HtUx0CwGODdBQwfnAIyh8AAAD//wVJ684AAAAGSURBVAMApRAgCTypvS8AAAAASUVORK5CYII=);
  width: var(--width);
  top: -16px;
  height: var(--h);
  display: flex;
  justify-content: center;
  /* box-shadow: 0 0 0 1px rgb(7, 71, 70); */
}

.sprite .mouth {
  position: absolute;
  --width: calc(var(--m) * var(--mw));
  --height: calc(var(--m) * var(--mh));
  --start-x: -1;
  --end-x: 1;
  width: var(--width);
  height: var(--height);
  z-index: 1;
  left: calc(var(--mx) * var(--m));
  top: calc(var(--my) * var(--m));
  background-image: var(--mouth);
  background-size: calc(var(--m) * var(--mw) * 2) calc(var(--m) * var(--mh));
  display: none;
  background-color: var(--bg-color);
  /* background-color: red;
  opacity: 0.3; */
}

.talk .sprite .mouth {
  display: block;
  animation: infinite 0.3s frame-animation steps(2);
  /* opacity: 0.6;
  background-color: red; */
}

.sprite::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  --width: calc(var(--w) * var(--m));
  width: var(--width);
  height: var(--height);
  background-size: calc(var(--width) * var(--col))
    calc(var(--height) * var(--row));
  background-repeat: no-repeat;
  image-rendering: pixelated;
  --start-x: -1;
  --end-x: -3;
  background-position: 0 calc(var(--height) * var(--by));
  --animation-steps: 2;
}

[dir='left'] .sprite {
  --by: -3;
  --mx: 4px;
  --my: -2px;
}

[dir='right'] .sprite {
  --by: -2;
  --mx: 10px;
  --my: -2px;
}

[dir='down'] .sprite {
  --by: 0;
}

[dir='up'] .sprite {
  --by: -1;
}

[dir='up'] .sprite .mouth {
  display: none;
}

.bunny {
  pointer-events: none;
  --anchor: -34px;
  --sprite: url(data:image/png;base64,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);
}

.sprite::after {
  background-image: var(--sprite);
}

.bear {
  --bg-color: #ebc9a2;
  --anchor: -30px;
  --sprite: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAACACAYAAABX9Ap8AAAAAXNSR0IArs4c6QAABzJJREFUeF7tXb2WFUUQnvsC7DEwMzJankBfBEQDMSBSOBvjA0C8BzQyAAMQfBF9Ao2MzAw88ALj6WFrqKmpv66uudJ7ZxNgb091ffV1V1VXTV8Ow4n9HE4M77ADvu6MnzbDX5yfjRPDh3F49cdb1Rjz2GEYXv35hh2bLS9j9c2KFuWePn8yy7z45v7wQgB9+/xs/AGNvX/3wQp0tryiWIYBRcBlggLkHeXvf8oD2DAwjrJMAWfLixKiAvYuIQ/DXllbG3Cx9zhWLEU5sPBMpryILNAD69gNw7CH6XaqJWQC3GI9zorZ8lp1XDGMFSwflh/LknQcFrqlPItR6XPQb8Xwhw64VT9zSZcJgG38d2pJiWFuXIu8zQFDmLCWuRdwtrxaQrrw0pYT9LC+2MMtcbM8+/FnX4u5tOX8OCfDybNAa86MjcNR13+sxCOqHyWkiyXdApamqqaX9sY9yjSNxbVLu8YJcjpSZwaHm6MABivXgG4BTMOnmWl5FZOsyDlBLYZjhmAcB7hWBnfyYjOtLMD//P7z6AkZFHD5N3e+tnIBTk7Bgr3+wmnVCMSHBk7B8rsC2OsDsDytZOQlA8/LAi4DaOnGo6wWlm59+tH448tLj5h5jCYvQ79FwpCtoBROvDk5tZSmnySTGnCVIUm1KG65a2yAsl/dvDFePns66/7w4vvhp9/+PkjzSMuZc4R0G1CZnH4rwFRBLTx4AE8s37wxDuNhanP8clXSjQKm+lFPbFU2+RyYURBbePq7o3ZtbV5c266Rhw1YvKK1KrAep915sBi5Dp/vDF8HFjUMO8M7w9fMAqveEuCzYhvEQungAGllprwM24slnu/uPhheC41uLRuTUsBWeVkG7LY/HDVg10W8ksvXNuz3/nDEMXCnpqzCOdYnIpM9D0cEUcO0VBk5I2tl31pS1KplrTB6CAdvGqk94bm3MuAmdekPecXsgE9iSbfuu629dOYWaY7DxVh7f/hqX0SY2brf3HVq6fU3m8fhVp9Qns+Mw10AxqehSE9JSmIWcdjbf6XCSlaV5alBBw5wVD9czDhNwLiaUJsDQ8ObKwlFvDTdv1IFJeKwyjPNcVirPEQBS3E90mD/9suL4de//p1xNgOmAj3nV20vRuTBqvBcTdi8Pyz1bKPtUu25e59/Mj6+fDTbnLsXYQLG3tcjkNtbXEmXU1y7uKHtZazjnfOzcapzCe1ctT9cnqPOyBLodSbgKIsCmoKWATkdNR323lINQz2O3RnukbUanXeGa6zV49gQw/C6kdVS9RokW547LFkvddGDvfViWra8DAOKJR4p6/G83sdVPFrl4ROd9hIbfROfrsKq/nAZ7EnQOcCQ4OP2Zou8qAGbi3jHKNFmGrD5eLh1WbW1AEAJaWY4u0IhyZNYthzZ3h+OWg4sCzUtfJkiWtoBdsufWfKwnsVjq+1SDEZaOjWAs+VZy5kzYDNgPCk4CIlhD+BseZSQqoY4Lr5xhTgLMGWkVV7EgLOX9pZApUmoN8yU5/UJHgN2E5ayDNhN4tESTVbdwxZhx0o8vMta8tzgX1KWNAdaKph7e1fUJ0QA0z1txmFvnKtpl1otT/i8tSFO5wF5VWGJMwCnIE74IWvCGY/GMteN5M7g1krh2C06rABbDHCxtPxOa5cCCApeMqD23Vw1+nHGSwGced9XOm5CuchiliNk9QYAeGkPA5ZA/HnU0WxpwEUcrr2faxXxtHDHLU1LXu39Zk6e2S7FIcdbwMMsc9dfpTvEFmArX5AcFdZnBbj1fi7niHB/uEwo3SH2ALZWzTS/ctVX7Q9D7zar4M4ao+K7NDX/AKvGyh1CnQdL6LE+L1uslpSuAUcMuwOOWK2nZ3aGe2Iroisflq5CRVY4Omb/1zKCmmlpiYDn/jBNEjLk4bw/Qoha05IU9Nwf5jKiVnkZBjSLeEXJrJ4u5OVZ8iIGXC1pbzkU7xVtqWbKk+pkNQY0GbacgLovydewW7LwyUwa22rAlKolBzpy+AeQWtUjpeLRohynZLY86xxsrRxswInhyJf10Umw0Gx5mQasAgxVQG5ZRQBny9OYXtSlvY6gRkFrmYGDKn8e04AzwzTMeL70WgpN1IC01uRxPHTFZBlQ7DxobHKT49eDpHgpsWnJyzRgF2Ep04DdJB5RT01jehcMp8fhqPWkzIi+0epxUlpuXqOf1dFYOK2azpyWeETamx55ln4W2DLHJoC5c6vFMlWW7j1P95CTUXRJ6x5avRyPklr89/wfTtzKgN9xbyY0eWkPYItZSeGs+8iil456QkhQtlIQG6TGeUkO1d0ulZjS7vtGjBiRJzkz7lxtAoaHpGzHUzn0himtegKMST1qetW3jHfdH55Yufq6ZezhOMCe+76zokimdTrSDgpaU36+6jvFH/6/MqxqteD2ZM33QVMAlA0Ps4u9zBDiOU3Ncdg7OHNcpLebMX8VwxkT/t8y/gN0x3wXsl9e6QAAAABJRU5ErkJggg==);
}

/* map */

.map-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  image-rendering: pixelated;
}

.map {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s;
  pointer-events: none;
}

.map.transition {
  transition: 0s;
}

.map.slow-pan {
  transition: 1s;
}

.indicator {
  position: absolute;
  top: 24px;
  right: 16px;
  color: #57280f;
  font-size: 12px;
  opacity: 0.8;
  z-index: 999;
  pointer-events: none;
  height: 32px;
  line-height: 40px;
  /* display: none; */
}

.move-control {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAINJREFUSEvtlkkOACEIBIf/P3qMJpARF5xI40UvHjRdFnGjZ629k2lkRVgTZuE6e5g1GvgTbsJ6kB0AA6tcDfEANKAvxBNQgUIhCAuxYRM4BAkoNtnkQqwrS8ZvuZZLxbsr98gdRmGHkdURNkUi9IJE2IjAkZfRw6hZ+NHfij5sW/+uBC3UGRNNw/4YAAAAAElFTkSuQmCC);
  background-size: 100px;
  image-rendering: pixelated;
  opacity: 0.2;
}

.move-handle {
  position: absolute;
  width: 52px;
  height: 52px;
  left: 0px;
  top: 0px;
  transform: translate(24px, 24px);
  transition: 0.2s;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAENJREFUKFNjZEAD/////48uxsjIyIgsBudgU4xLM1gTMRpgBoBsJU8TKbbAbRuOmugX5LBgJCYUYfGKkqZwORU97QEA0oUz+q/qdUYAAAAASUVORK5CYII=);
  background-size: 52px;
  image-rendering: pixelated;
  opacity: 0.8;
}

.walk .sprite::after {
  animation: walk infinite 0.4s steps(var(--animation-steps));
}

@keyframes walk {
  0% {
    background-position: calc(var(--width) * var(--start-x))
      calc(var(--height) * var(--by));
  }
  100% {
    background-position: calc(var(--width) * var(--end-x))
      calc(var(--height) * var(--by));
  }
}

.map-object {
  position: absolute;
  width: 0;
  height: 0;
  display: flex;
  justify-content: center;
  /* box-shadow: 0 0 0 1px red; */
}

.base {
  position: absolute;
  /* background-color: rgba(255, 0, 0, 0.346); */
}

/* uncomment this to see collision box */
/* .base::after {
  position: absolute;
  content: '';
  background-color: rgba(20, 101, 67, 0.665);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, calc(-50% - var(--h) / 2));
} */

.map-object::after {
  position: absolute;
  content: '';
  background-image: var(--img);
  width: var(--img-w);
  height: var(--img-h);
  background-size: cover;
  image-rendering: pixelated;
  bottom: 0;
}

.map-object img {
  position: absolute;
  width: var(--img-w);
  height: var(--img-h);
  bottom: 0;
  transition: 0.8s;
}

.base.display img {
  transform: scale(4);
  opacity: 0;
}

.anchor {
  display: flex;
  justify-content: center;
  align-items: end;
  margin-top: var(--anchor);
  height: 0;
}

/* ui */

.pixel-window {
  position: absolute;
  padding: 8px 12px;
  font-size: 1.1em;
  color: var(--brown);
  --bg: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAADZJREFUKFNjZICCcA3+/zA2iF554yMjiAYTIMkV1z8gyzNEaAqAFTFik4SpBCmihwKCjiTkTQAtYSg9eIiJCAAAAABJRU5ErkJggg==);
  border-image: var(--bg) 3 fill / 6px / 0 stretch;

  image-rendering: pixelated;
}

.pixel-window::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  mask: radial-gradient(6px at 6px 6px, #0000 98%, #000) -6px -6px;
  z-index: -1;
}

.pixel-window span {
  opacity: 0;
  animation: forwards fade-in-text 0.2s;
}

.speech-bubble {
  text-wrap: nowrap;
  pointer-events: all;
  --h: 6px;
  margin-bottom: calc(var(--m) * var(--h));
  margin-left: calc(var(--m) * 8px);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: calc(var(--m) * -4px);
  left: 50%;
  transform: translateX(-50%);
  --w: 6px;
  --m: 2;
  width: calc(var(--m) * var(--w));
  height: calc(var(--m) * var(--h));
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAADtJREFUGFdj/P///38GNMAIAjglwjX4/6+4/gGuJ0JTgGHljY+MjMgSMEGQKrgEsiBYAkSAdIG0I7sBAMqWIQcAOXB8AAAAAElFTkSuQmCC);
  image-rendering: pixelated;
}

[type='banner'] .speech-bubble {
  margin-bottom: 0;
  margin-left: 0;
  max-width: calc(100vw - 100px);
}

[type='banner'] .speech-bubble::after {
  --w: 7px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAARUlEQVR4AXSMAQ4AEAhF6QIcgxNxRE7EMTgB1cya5a/fVv8VGFQKbkmvI6BlacNII88FtU+bo+fhbfz2B3BIFxpwQw3YAAAA//9fLvGiAAAABklEQVQDAH5cJZKu1kmaAAAAAElFTkSuQmCC);
  transform: translateY(-50%);
  top: 50%;
  left: calc(var(--m) * (var(--w) * -1 + 3px));
}

.question-bubble {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: all;
  background-size: 40px;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAKxJREFUOE+9lOsRQDAQhKUCyqAiSqQiyqAC5sxs5pw7eSF/xMzly94j6yq2+rbe+X/sflo2h1i/Idg4r7GMS9zQNRWgJ7AEBjKgj0AK0paWSRBowXCBhEYDtYMETQZa3YHyV4C8DEVAWc+spvCUrTRlDM3iv3PIh1brbLbC5JRLn9/tLUO6dBvLLGTXVbfRBlkzDa5GO+Pt6xegrG1IHcU/KvwECCh9efEt8zgAajSkFRYf234AAAAASUVORK5CYII=);
  transition: 0.3s;
}

.action-window-wrapper {
  position: absolute;
  z-index: 9999;
  transition: 0.4s;
  left: 50%;
  translate: -50% 0;
  bottom: 200px;
  display: inline-block;
  height: 0;
}

.action-window {
  position: relative;
  pointer-events: all;
}

.action-window .btn-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-window .btn-slot:not(:empty) + .close-btn-slot {
  margin-top: 8px;
}

.menu-window {
  z-index: 9999;
  pointer-events: all;
  animation: forwards open-up 0.3s;
}

/* button */
.btn {
  background-color: var(--brown);
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 4px 8px;
  font-size: 1.1em;
  margin: 6px;
}

.btn:hover {
  color: var(--brown);
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--brown);
}

.btn.selected {
  background-color: var(--highlight);
}

/* animation */

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

@keyframes scale-out {
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes open-up {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.content-slot {
  padding: 8px 0;
}

.btn-slot {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
}

.action-window:empty,
.pixel-window:empty,
.content-slot:empty {
  display: none;
}

.iframe-wrapper iframe {
  z-index: 9999;
  width: calc(100vw - 20px);
  height: auto;
  aspect-ratio: 2 / 1;
}

.iframe-wrapper {
  pointer-events: all;
  position: absolute;
}

.iframe-wrapper .close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.iframe-wrapper .close:hover {
  opacity: 0.5;
}

.thumb-btn {
  background-image: var(--img);
  width: calc(var(--img-w) / 2);
  height: calc(var(--img-h) / 2);
  image-rendering: pixelated;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
}

.img-display {
  opacity: 1;
  transition: 0.5s;
}

.img-display:empty {
  opacity: 0;
}

.img-display img {
  position: fixed;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  width: auto;
  height: auto;
  left: 50%;
  transform: translate(-50%, calc(-50% - 40px));
}

/* .wrapper:has(.animation-wrapper.enlarge) {
  background-color: #f46d0ddc;
} */

::after {
  pointer-events: all;
}

.map-object img {
  pointer-events: all;
}

.click-block ::after,
.click-block .map-object img {
  pointer-events: none;
}

.pointer-all ::after,
.pointer-all .base,
.pointer-all .map-object img {
  pointer-events: all;
}

/* guide */

.pix {
  --width: calc(var(--w) * var(--m));
  --height: calc(var(--h) * var(--m));
  width: var(--width);
  height: var(--height);
  image-rendering: pixelated;
  background-size: calc(var(--width) * var(--frame-no)) var(--height);
  background-position: calc(var(--width) * var(--frame-index)) var(--height);
}

.appear-effect {
  position: absolute;
  --w: 36px;
  --h: 36px;
  --m: 2;
  --frame-no: 4;
  overflow: hidden;
  background-size: calc(var(--w) * var(--m) * var(--frame-no))
    calc(var(--h) * var(--m));
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAAkCAYAAABmHbPbAAAB4klEQVR4AeyW4U3EMAyFCwvAGDARjAgTwRgwAej7Yel0UiiN63MSv5Oeklwbx37+etf7TR854HBAADnM09ZtE0CiwOWAAHLZp80CSAy4HBBALvu0WQCJAZcD3QC5TtXmZRwQQMu0MqcQAZTj+zKnCqCTWvny9PCDTgo3TZjpAaJppizXOf/t42tDzLPyyDh3aoBoFk0zsc4wsfKZLoBomKmyie+f33evz48bYl7Ji26AAMeefEbW/zJu0ZsAB/WWN6t/3QD1GnXmPhrGU29i3YpPg1Dreub3lpeNmbkcPfs0gOxX6NYmAI2pVTw5kR9i3rov63vy52wbmc+iboAolif/slAahEZs0mWeI87xc8S89nLqBghIgGXvgBGu0xxgR8xHyGmVHLoBujaA5phGbBI5oeu8tfY50A0QzTBgGFmbfClp90wOdANEkQYMI+tYtaPzd4rad+hKlAMugKKSOhIXcHgXQ8yP7NW9fgemB8hvgSJ4HJgeIP4+eQdDzD1mnLW30i/h9ADRdMBBzLNl8NiYnU/0+UsAFG3SkfgGso1H9s54rwAK6FoVeLCuAkDUKQU5IICCjK0SVgBV6XRQnQIoyNgqYQVQlU4H1SmAgoytElYAVel0UJ0C6A9jdWnfgV8AAAD//8Qrpp4AAAAGSURBVAMAN9iwSbPBmHIAAAAASUVORK5CYII=);
  --start-x: 0;
  --end-x: -3;
  animation: frame-animation 0.3s steps(3) forwards;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.guide-wrapper {
  position: relative;
  height: 100px;
  width: 300px;
  display: flex;
  align-items: end;
  justify-content: center;
  pointer-events: none;
  z-index: 99999;
}

.guide-bunny-wrapper {
  position: absolute;
  --m: 2;
  --w: 24px;
  --h: 30px;
  margin-top: calc(var(--h) * -1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.guide-bunny-wrapper .appear-effect {
  transform: none;
}

.guide-bunny-wrapper[type='center'] {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.guide-bunny-wrapper.left {
  transform: scale(-1, 1);
}

/* .guide-bunny-wrapper.left .anchor {
  right: auto;
  left: calc(var(--m) * 1px);
} */

@keyframes appear {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes disappear {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

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

.guide-bunny-wrapper .anchor {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: end;
  top: calc(var(--h) * -0.3);
  left: var(--w);
  height: 0;
}

.guide-bunny-wrapper[type='banner'] .anchor {
  top: calc(var(--h) * 1 + 4px);
  left: calc(var(--w) * 2 + 12px);
  align-items: center;
  justify-content: start;
}

.guide-bunny {
  --w: 24px;
  --h: 32px;
  --m: 2;
  --width: calc(var(--m) * var(--w));
  --height: calc(var(--m) * var(--h));
  width: var(--width);
  height: var(--height);
  image-rendering: pixelated;
  background-size: calc(var(--width) * var(--frame-no)) var(--height);
  animation: frame-animation 0.8s forwards steps(var(--frame-no));
}

[pose='spin'] .guide-bunny {
  --start-x: 0;
  --end-x: 8;
  --frame-no: 8;
  background-image: url(data:image/png;base64,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);
}

[pose='neutral'] .guide-bunny {
  --frame-no: 1;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAABfElEQVR4AeTUUU7DMBAE0MAF4BhwIcoRKRwIvrgC8MtPyVO70tq101gt4gOkkXd3ZnYSK/R6+uW/vw3Y3N3soPeSOOjx5t03YHx6/ZxATZxhhgN15nLdDGBgDKHaLHq1WfRqs+jz2QzIgnPrfxTgnh/mrwrUa69u6Iq281cFa5fTDQUwjOIowOc2cgURyMMbfZxFAAFhkKMnrx3ZVwRk4vH+doI8a9U00OLMugHIS6Ab4HUhQvJT5poGQlef3YBaaInFoK75Xl8EbN++rizoiS2GHs9rR+aLAEQtMFuD1nK+o4D6MyNaA2/W8hYBBIRrFrY0vHZkrgjIxKXqboA7HQnp6bsBI8uXtEWAL8iTgPtcMtYcPZ8dmSsCEAQ7xQFMgcOoOIJz8hbk3BwFzLNp970fM3mygB4f0AfnrL8guv0mVcLL+8fif3SSniybAVyt1zXfzD/jAf0pdAMYhbiGgP55/r0K6INz6vkyFgMImQL6GsE5a05/MoDoHPwAAAD//3pEGGwAAAAGSURBVAMAEKXIQTswjzoAAAAASUVORK5CYII=);
  animation: none;
}

[pose='pointup'] .guide-bunny,
[pose='pointdown'] .guide-bunny {
  --frame-no: 3;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAgCAYAAACxSj5wAAADKElEQVR4AezXTW4TQRAFYMMF4BhwIcIRCRwIVlwB2LIJ/hQ9q93pmu4hFgqJkZ66qt7PdErjmLw+XP9tbuC6oM31HA6bC7p59+YOqgwcVPxszguVDgcVP5vzQqXDQcWblwti/PT15wHUxC3McKBuuZWahxfUvccMB+qen/U8vKDu9WY4UPd8+uGCGBgjUpulV5ulV5uln520PNGpzdKrzdKrzdLPTlqe6NRm6dVm6dVm6dtzuKBW8NLr64Imb8B1QZdakM/ph+O3GqgnubtpmbJBvTtgYpApG9QT+Yne9QbdHr/V4OS+cCEbLhx7ipMNp8FCsWtBC3nPTvJgQb7u9ryC2QgPb/rqpKGt+GrOw1vxmdPQpl89eXh7/dmCCAh70WrPK6PS42gqfjbnlVHpcDQVP5vzymh1ZwtqiY/v3x6gnY1qGhhxWzMe2NLgaEC9Bzww89BApSsXVBkOL4woF+R1g+yj3XJb00B0qycPRN9mtjUNRLd68kD0bWZb00B0/VkuqBcKEQzqnn9sL1M2qB+b1/tlygZ1z1f92YJuv/16JaASC4aK55VR8TiaipcNFc8ro+JxNBUvGyo+3vYX9dmCGD3EuRfCV7wrmtGz/0W+5QVZ0oMFhRhdcmsmeNXrh93KGnHJX3lGn9/3Vf5ofrYgD3eRkXBlxitjS4un29JUHB/IqDSjOc/KkuKlzZt+tqAInuO5siSLgSzHHsoFERKsYq8+uau+VV1ynXs8tBYDvEG5oAgufbqAy/xNLh/IWPHnreEB/Yqv1ZwtyIMFwd4wej4Z7QNGdbT06pFmNJMNI66d3TWN/KAZn0p3gNOgK84WhHOB9gHMAb5HOCdvz4/6m+Pfebk0XzDSbnEjfT+L3znicg/n6Jf/gwUJuft9PxbKGOjxgT6cc/SAaNvzqeS3d6rq+0107JfvPzb/R93Jd7f/U/5wQX7i6uPi4xHQLWAoeQr57uBTEOj7y5YLImSI2an/fPx7LdCbB3q+VdDH69Qn26k3D/Sr2XT08Tr1coNozEHfY3NBxIyBvkc4Z8+t9HzBSB/OOeJnM75gph3x0wWNTC9p9gcAAP//ldsjFAAAAAZJREFUAwCoBWpfXLBXJwAAAABJRU5ErkJggg==);
}

[pose='pointup'] .guide-bunny {
  --start-x: 0;
  --end-x: 4;
  animation: frame-animation 0.3s forwards steps(2);
}

[pose='pointdown'] .guide-bunny {
  animation: point-down 0.3s forwards steps(2);
}

@keyframes point-down {
  0% {
    background-position: calc(var(--width) * 4) var(--height);
  }
  100% {
    background-position: 0 var(--height);
  }
}

.mouth {
  position: absolute;
  --w: 6px;
  --h: 4px;
  --frame-no: 2;
  left: calc(var(--m) * 9px);
  top: calc(var(--m) * 14px);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAECAYAAAC6Jt6KAAAAQUlEQVR4AZSMwQkAIAwD1QVcw42c0Y1cwwmUKwTy8dHC0ZA0bSU5UZijX0c/3EPjR2HtUx0CwGODdBQwfnAIyh8AAAD//wVJ684AAAAGSURBVAMApRAgCTypvS8AAAAASUVORK5CYII=);
  background-color: #fff;
  --start-x: 0;
  --end-x: 2;
  display: none;
}

.talk .mouth {
  animation: frame-animation 0.3s infinite steps(var(--frame-no));
  display: block;
}

[pose='spin'] .mouth {
  display: none;
}

.enlarge {
  animation: appear 0.3s forwards;
}

.animation-wrapper.enlarge {
  animation:
    appear 0.3s forwards,
    float 2s ease-in-out 1s infinite;
}

.animation-wrapper:not(.enlarge) {
  animation: forwards disappear 0.3s;
}

/* .float:not([pose='spin']) {
  animation: float 2s ease-in-out infinite;
} */

@keyframes frame-animation {
  0% {
    background-position: calc(var(--width) * var(--start-x)) var(--height);
  }
  100% {
    background-position: calc(var(--width) * var(--end-x)) var(--height);
  }
}

.remove {
  animation: fade-out forwards 0.5s;
}

.text-box {
  position: absolute;
  font-size: 1.8em;
  color: #fff;
  transform: translateX(-50%);
}

/* .map-object {
  box-shadow: 0 0 0 1px orange;
}

.map-object::after {
  box-shadow: 0 0 0 1px hotpink;
}

.base {
  box-shadow: 0 0 0 1px green;
} */