* {
  box-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  font-family: Verdana, sans-serif;
  color: #222;
  background-color: #f1f3f3;
}

h1 {
  font-size: 26px;
  line-height: 2;
  font-weight: 600;
}

h2 {
  font-size: 16px;
  line-height: 0;
  font-weight: 600;
  margin-top: 10px;
}

input[type="submit"] {
  height: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: #FFF;
  background-color: #33C3F0;
  width: 100%;
  margin-top: 20px;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
  outline: 0;
  background-color: #1EAEDB;
}

select {
  height: 42px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  background-color: #f7f9f9;
  width: 100%;
  margin-top: 20px;
}

select:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}

#container {
  padding: 0;
  margin: 10px auto;
  width: 600px;
}

#gridBox,
#legend,
#intro,
#settings {
  position: relative;
  float: left;
  width: 600px;
  margin-left: 0px;
  margin-bottom: 10px
}

#gridBox {
  margin-bottom: 90px;
}

#description {
  margin-right: 40px;
  min-height: 300px;
  width: 280px;
  float: left;
}

#description>p {
  min-height: 260px;
}

#description i {
  font-size: 12px;
  font-style: italic;
  color: #888;
}

#xp {
  width: 600px;
  float: left;
}

div#xp>p {
  float: left;
  width: 280px;
  margin-left: 40px;
}

#xp>p:nth-child(even) {
  margin-left: 0;
}

@media (min-width: 960px) {
  #container {
    width: 940px;
  }

  #legend,
  #settings {
    width: 280px;
    margin-left: 40px;
    margin-top: 0px;
  }

  #description {
    margin-right: 0px;
  }

  #xp {
    width: 280px;
  }

  div#xp>p {
    margin-left: 0px;
  }
}

.hud {
  position: absolute;
  z-index: 4;
}

#healthBar {
  top: 515px;
  width: 150px;
}

#level-stats {
  top: 10px;
  width: 80px;
}

div#healthBar>p {
  border-radius: 25px;
  text-align: center;
}

#stats {
  width: 280px;
  float: left;
  height: 90px;
}

#stats>div {
  float: left;
  height: 80px;
  width: 80px;
  margin-left: 20px;
}

#stats>div:first-child {
  margin-left: 0;
}

#game p {
  float: left;
  width: 100%;
  background-color: #f7f9f9;
  padding: 10px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  margin-bottom: 0;
  margin-top: 10px;
}

#logs {
  float: left;
  width: 100%;
}

#logs>p {
  height: 300px;
  overflow-y: scroll;
  scrollbar-width: thin;
  width: 600px;
}

#xp b {
  float: right;
}

#inventory {
  height: 100px;
  /*float: left;*/
  width: 600px;
  position: absolute;
  top:610px;
}

#inventory-list {
  min-height: 40px;
  margin-top: 10px;
  float: left;
}

#inventory-list>span {
  width: 36px;
  height: 36px;
  display: block;
  float: left;
  border: 1px dashed #d1d1d1;
  background-color: #f7f9f9;
  position: relative;
  margin-right: 45px;
}

#inventory-list>span>div {
  /*  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;*/
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#inventory-list>span>span {
  position: absolute;
  left: 110%;
  bottom: 0;
  font-weight: 900;
  border-radius: 10px;
  padding: 0 3px;
  font-size: 12px;
  text-shadow: black 0px 0px 2px;
  line-height: 16px;
}

#inventory-list>span>span::before {
  content: "x";
}

#message {
  position: absolute;
  border: 1px solid #d1d1d1;
  background-color: white;
  width: 600px;
  top: 350px;
  padding: 20px;
  font-size: 16px;
  border-radius: 4px;
  filter: opacity(0%);
  box-shadow: 2px 2px 2px #7c7c7c;
  z-index: 2;
}

#message.visible {
  filter: opacity(100%);
}

#message.disapearing {
  animation: fade-message 1s;
}

@keyframes fade-message {
  from {
    filter: opacity(100%);
    top: 350px;
  }

  to {
    filter: opacity(0%);
    top: 500px;
  }
}

.hidden {
  display: none !important;
}

#box {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}

#box>div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#fog {
  background: radial-gradient(circle at 50% 50%, transparent 62%, white 62%, #f1f3f3 68%);
  z-index: 2;
}

#boyCell {
  z-index: 3;
}

#arrows>div {
  position: absolute;
  background-repeat: no-repeat;
  opacity: 0.2;
  height: 70px;
  width: 70px;
  background-image: url(media/actions.png);
  z-index: 4;
}

#arrows>div:hover {
  opacity: 0.6;
}

#arrows>div.undim {
  opacity: 1;
}

#arrows>div.none {
  background-image: none;
}

#arrows>div.move {
  background-position: -90px -40px;
}

#arrows>div.turn-right {
  background-position: -40px 10px;
}

#arrows>div.turn-left {
  background-position: -40px -38px;
}

#arrows>div.stay {
  background-position: -90px 10px;
}

#arrows>div.chop {
  background-position: 10px -90px;
}

#arrows>div.leave {
  background-position: -140px 10px;
}

#arrows>div.atack {
  background-position: -40px -90px;
}

#arrows>div.talk {
  background-position: -90px -90px;
}

#arrows>div.grab {
  background-position: 10px -140px;
}

#arrows>div.eat {
  background-position: 10px -40px;
}

#arrows>div.give {
  background-position: 10px 10px;
}

#KeyW {
  left: 30%;
  top: 10px;
  margin-left: -35px;
  transform: rotate(-30deg);
}

#KeyZ {
  left: 30%;
  bottom: 10px;
  margin-left: -35px;
  transform: rotate(-150deg);
}

#KeyE {
  left: 70%;
  top: 10px;
  margin-left: -35px;
  transform: rotate(30deg);
}

#KeyX {
  left: 70%;
  bottom: 10px;
  margin-left: -35px;
  transform: rotate(150deg);
}

#KeyA {
  left: -18px;
  top: 50%;
  margin-top: -35px;
  transform: rotate(-90deg);
}

#KeyD {
  right: -18px;
  top: 50%;
  margin-top: -35px;
  transform: rotate(90deg);
}

#world {
  height: 100%;
  width: 650px;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: -18px;
}

.row {
  float: left;
}

.row>div {
  float: left;
}

#world.left {
  margin-left: -30px;
}

#world.right {
  margin-left: -6px;
}

.right .row:nth-child(4n+2) {
  margin-left: -12px;
}

.right .row:nth-child(4n) {
  margin-left: 12px;
}

.left .row:nth-child(4n+2) {
  margin-left: 12px;
}

.left .row:nth-child(4n) {
  margin-left: -12px;
}

.node {
  width: 12px;
  height: 12px;
  /*background: red !important;*/
}

.cell {
  width: 36px;
  height: 36px;
  position: relative;
}

.horizontal {
  width: 36px;
  height: 12px;
}

.vertical {
  width: 12px;
  height: 36px;
}

.cell::before {
  font-size: 8px;
  font-weight: 900;
  color: black;
  padding-left: 8px;
}

.track5::before {
  opacity: 0.6;
}

.track4::before {
  opacity: 0.5;
}

.track3::before {
  opacity: 0.4;
}

.track2::before {
  opacity: 0.3;
}

.track1::before {
  opacity: 0.2;
}

.track6::before {
  display: none;
}

.tT::before {
  content: "/";
  text-shadow: 20px -20px 0px black;
}

.tG::before {
  content: "—";
  text-shadow: 24px 8px 0px black;
}

.tV::before {
  content: "\\";
  text-shadow: 6px 26px 0px black;
}

.tC::before {
  content: "/";
  text-shadow: -5px 25px 0px black;
}

.tD::before {
  content: "—";
  text-shadow: 24px 8px 0px black;
}

.tR::before {
  content: "\\";
  text-shadow: -5px -30px 0px black;
}

.rock {
  background: url(media/rock-texture.png) no-repeat;
}

.grass {
  background: url(media/grass-texture.png) no-repeat;
}

.dirt {
  background: url(media/dirt-texture.png) no-repeat;
}

.pavement {
  background: url(media/pavement-texture.png) no-repeat;
}

.var0.cell {
  background-position: 0px 0px;
}

.var0.vertical {
  background-position: -36px 0px;
}

.var0.horizontal {
  background-position: 0px -36px;
}

.var0.node {
  background-position: -36px -36px;
}

.var1.cell {
  background-position: -48px 0px;
}

.var1.vertical {
  background-position: -84px 0px;
}

.var1.horizontal {
  background-position: -48px -36px;
}

.var1.node {
  background-position: -84px -36px;
}

.var2.cell {
  background-position: -96px 0px;
}

.var2.vertical {
  background-position: -132px 0px;
}

.var2.horizontal {
  background-position: -96px -36px;
}

.var2.node {
  background-position: -132px -36px;
}

.cell>div {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.bottomLabel {
  position: absolute;
  left: -4px;
  bottom: -4px;
  font-weight: 900;
  border-radius: 10px;
  padding: 0 4px;
  font-size: 12px;
  text-shadow: black 0px 0px 2px;
  line-height: 14px;
  width: auto;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.topLabel {
  position: absolute;
  left: -4px;
  top: -4px;
  font-weight: 900;
  border-radius: 2px;
  padding: 0 1px;
  font-size: 10px;
  line-height: 12px;
  width: auto;
  height: auto;
  background: rgba(0, 0, 0, 1);
  z-index: 1;
}

.bar {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  z-index: 1;
}

.cloud {
  position: absolute;
  z-index: 2;
  width: 37px;
  bottom: 70px;
  left: 0;
  animation: float 1s linear;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 -1px 1px black;
  opacity: 0;
}

@keyframes float {
  0% {
    bottom: 20px;
    margin-left: 0px;
    opacity: 1;
  }

  20% {
    margin-left: 5px;
  }

  40% {
    margin-left: 0px;
  }

  60% {
    margin-left: 5px;
  }

  80% {
    margin-left: 0px;
  }

  100% {
    bottom: 70px;
    margin-left: 5px;
    opacity: 0;
  }
}

/*.d18>span,
.d17>span,
.d16>span,
.d15>span,
.d14>span,
.d13>span,
.d12>span,
.d11>span,
.d10>span,
.d9>span {
  display: none;
}*/
/*.d18 {
  filter: opacity(0%);
}

.d17 {
  filter: opacity(3%);
}

.d16 {
  filter: opacity(6%);
}

.d15 {
  filter: opacity(10%);
}

.d14 {
  filter: opacity(15%);
}

.d13 {
  filter: opacity(20%);
}

.d12 {
  filter: opacity(25%);
}

.d11 {
  filter: opacity(50%);
}

.d10 {
  filter: opacity(70%);
}

.d9 {
  filter: opacity(85%);
}*/
.few>div {
  background-size: 75%;
}

.several>div {
  background-size: 50%;
}

.lots>div {
  background-size: 33%;
}

.plenty>div {
  background-size: 25%;
}

.several>div,
.lots>div,
.plenty>div {
  background-position: 0 0;
  background-repeat: repeat;
}

.Boy>div,
.DeadBoy>div,
.Bug>div,
.DeadBug>div,
.Octopus>div,
.DeadOctopus>div,
.Flower>div,
.DeadFlower>div,
.Stew>div,
.Jam>div,
.AppleTree>div,
.Apple>div,
.YellowCherryTree>div,
.YellowCherry>div,
.RedCherryTree>div,
.RedCherry>div,
.Stump>div,
.Exit>div,
.Pot>div,
.Cook>div,
.Granny>div {
  background: url(media/sprite.png) no-repeat;
}

.AppleTree>div {
  background-position: -36px -144px;
}

.Apple>div {
  background-position: 0px -144px;
}

.YellowCherryTree>div {
  background-position: -144px -180px;
}

.YellowCherry>div {
  background-position: -144px -144px;
}

.RedCherryTree>div {
  background-position: -108px -144px;
}

.RedCherry>div {
  background-position: -72px -144px;
}

.white>span,
.gray>span {
  color: #FFFFFF;
}

.blue>span,
.inverse>span {
  color: #9FEBFF;
}

.green>span {
  color: #ddffd0;
}

.yellow>span {
  color: #EBFF9F;
}

.red>span,
.rainbow>span {
  color: #FFB39F;
}

.violet>span {
  color: #E39FFF;
}

.Stump>div {
  background-position: -144px -108px;
}

.Exit>div {
  background-position: -144px -72px;
}

.Pot>div {
  background-position: -144px -216px;
}

.Cook>div {
  background-position: 0px -216px;
}

.Granny>div {
  background-position: -36px -216px;
}

.Granny.red>div {
  filter: hue-rotate(140deg);
}

.Granny.yellow>div {
  filter: hue-rotate(180deg);
}

.Granny.green>div {
  filter: hue-rotate(270deg);
}

.Jam>div {
  background-position: -72px -216px;
}

.Jam.blue>div {
  filter: hue-rotate(250deg);
}

.Jam.red>div {
  filter: hue-rotate(395deg);
}

.Jam.yellow>div {
  filter: hue-rotate(72deg);
}

.Jam.green>div {
  filter: hue-rotate(188deg);
}

.Stew>div {
  background-position: -108px -216px;
}

.Octopus>div {
  background-position: 0px -72px;
}

.DeadOctopus>div {
  background-position: -108px -72px;
}

.Octopus.hitting>div {
  background-position: -72px -72px;
}

.Octopus.recovering>div {
  background-position: -36px -72px;
}

.Flower>div {
  background-position: 0px -180px;
}

.DeadFlower>div {
  background-position: -108px -180px;
}

.Flower.hitting>div {
  background-position: -72px -180px;
}

.Flower.recovering>div {
  background-position: -36px -180px;
}

.Flower.rainbow>div,
.DeadFlower.rainbow>div {}

.Flower.inverse>div,
.DeadFlower.inverse>div {
  filter: invert();
}

.Flower.gray>div,
.DeadFlower.gray>div {
  filter: grayscale(0.9);
}

.Flower.yellow>div,
.DeadFlower.yellow>div {
  filter: sepia(0.9);
}

.Octopus.green>div,
.DeadOctopus.green>div {
  filter: hue-rotate(90deg);
}

.Octopus.blue>div,
.DeadOctopus.blue>div {
  filter: hue-rotate(210deg);
}

.Octopus.violet>div,
.DeadOctopus.violet>div {
  filter: hue-rotate(280deg);
}

.Bug>div {
  background-position: 0px -108px;
}

.DeadBug>div {
  background-position: -108px -108px;
}

.Bug.hitting>div {
  background-position: -72px -108px;
}

.Bug.recovering>div {
  background-position: -36px -108px;
}

.Bug.green>div,
.DeadBug.green>div {
  filter: hue-rotate(40deg);
}

.Bug.blue>div,
.DeadBug.blue>div {
  filter: hue-rotate(100deg);
}

.Bug.violet>div,
.DeadBug.violet>div {
  filter: hue-rotate(150deg);
}

.Bug.yellow>div,
.DeadBug.yellow>div {
  filter: hue-rotate(290deg);
}

.Boy.walking>div {
  background-position: 0px 0px;
}

.Boy.waiting>div {
  background-position: -36px 0px;
}

.Boy.recovering>div {
  background-position: -72px 0px;
}

.Boy.hitting>div {
  background-position: -108px 0px;
}

.DeadBoy>div {
  background-position: -144px 0px;
}

.Girl.Boy.walking>div {
  background-position: 0px -36px;
}

.Girl.Boy.waiting>div {
  background-position: -36px -36px;
}

.Girl.Boy.recovering>div {
  background-position: -72px -36px;
}

.Girl.Boy.hitting>div {
  background-position: -108px -36px;
}

.Girl.DeadBoy>div {
  background-position: -144px -36px;
}

.T>div {
  transform: rotate(-150deg);
}

.G>div {
  transform: rotate(-90deg);
}

.V>div {
  transform: rotate(-30deg);
}

.C>div {
  transform: rotate(30deg);
}

.D>div {
  transform: rotate(90deg);
}

.R>div {
  transform: rotate(150deg);
}

.T.left>div {
  animation: tLeft 0.2s;
}

@keyframes tLeft {
  from {
    transform: rotate(-90deg)
  }

  to {
    transform: rotate(-150deg);
  }
}

.G.left>div {
  animation: gLeft 0.2s;
}

@keyframes gLeft {
  from {
    transform: rotate(-30deg)
  }

  to {
    transform: rotate(-90deg);
  }
}

.V.left>div {
  animation: vLeft 0.2s;
}

@keyframes vLeft {
  from {
    transform: rotate(30deg)
  }

  to {
    transform: rotate(-30deg);
  }
}

.C.left>div {
  animation: cLeft 0.2s;
}

@keyframes cLeft {
  from {
    transform: rotate(90deg)
  }

  to {
    transform: rotate(30deg);
  }
}

.D.left>div {
  animation: dLeft 0.2s;
}

@keyframes dLeft {
  from {
    transform: rotate(150deg)
  }

  to {
    transform: rotate(90deg);
  }
}

.R.left>div {
  animation: rLeft 0.2s;
}

@keyframes rLeft {
  from {
    transform: rotate(210deg)
  }

  to {
    transform: rotate(150deg);
  }
}

.T.right>div {
  animation: tRight 0.2s;
}

@keyframes tRight {
  from {
    transform: rotate(-210deg);
  }

  to {
    transform: rotate(-150deg);
  }
}

.G.right>div {
  animation: gRight 0.2s;
}

@keyframes gRight {
  from {
    transform: rotate(-150deg);
  }

  to {
    transform: rotate(-90deg);
  }
}

.V.right>div {
  animation: vRight 0.2s;
}

@keyframes vRight {
  from {
    transform: rotate(-90deg);
  }

  to {
    transform: rotate(-30deg);
  }
}

.C.right>div {
  animation: cRight 0.2s;
}

@keyframes cRight {
  from {
    transform: rotate(-30deg);
  }

  to {
    transform: rotate(30deg);
  }
}

.D.right>div {
  animation: dRight 0.2s;
}

@keyframes dRight {
  from {
    transform: rotate(30deg);
  }

  to {
    transform: rotate(90deg);
  }
}

.R.right>div {
  animation: rRight 0.2s;
}

@keyframes rRight {
  from {
    transform: rotate(90deg);
  }

  to {
    transform: rotate(150deg);
  }
}

.got-hit {
  animation: red-pulse-animation 0.2s;
}

@keyframes red-pulse-animation {
  from {
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);
  }

  to {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}

.just-healed {
  animation: blue-pulse-animation 0.2s;
}

@keyframes blue-pulse-animation {
  from {
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.3);
  }

  to {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}

.just-hit.T>div {
  animation: lean-t 0.2s;
}

@keyframes lean-t {
  0% {
    margin-top: 0%;
    margin-left: 0%;
  }

  70% {
    margin-top: -10%;
    margin-left: 5%;
  }

  100% {
    margin-top: 0%;
    margin-left: 0%;
  }
}

.just-hit.G>div {
  animation: lean-g 0.2s;
}

@keyframes lean-g {
  0% {
    margin-top: 0%;
    margin-left: 0%;
  }

  70% {
    margin-top: 0%;
    margin-left: 10%;
  }

  100% {
    margin-top: 0%;
    margin-left: 0%;
  }
}

.just-hit.V>div {
  animation: lean-v 0.2s;
}

@keyframes lean-v {
  0% {
    margin-top: 0%;
    margin-left: 0%;
  }

  70% {
    margin-top: 10%;
    margin-left: 5%;
  }

  100% {
    margin-top: 0%;
    margin-left: 0%;
  }
}

.just-hit.C>div {
  animation: lean-c 0.2s;
}

@keyframes lean-c {
  0% {
    margin-top: 0%;
    margin-left: 0%;
  }

  70% {
    margin-top: 10%;
    margin-left: -5%;
  }

  100% {
    margin-top: 0%;
    margin-left: 0%;
  }
}

.just-hit.D>div {
  animation: lean-d 0.2s;
}

@keyframes lean-d {
  0% {
    margin-top: 0%;
    margin-left: 0%;
  }

  70% {
    margin-top: 0%;
    margin-left: -10%;
  }

  100% {
    margin-top: 0%;
    margin-left: 0%;
  }
}

.just-hit.R>div {
  animation: lean-r 0.2s;
}

@keyframes lean-r {
  0% {
    margin-top: 0%;
    margin-left: 0%;
  }

  70% {
    margin-top: -10%;
    margin-left: -5%;
  }

  100% {
    margin-top: 0%;
    margin-left: 0%;
  }
}

.just-missed.T>div {
  animation: shake-ct 0.2s;
}

.just-missed.G>div {
  animation: shake-gd 0.2s;
}

.just-missed.V>div {
  animation: shake-rv 0.2s;
}

.just-missed.C>div {
  animation: shake-ct 0.2s;
}

.just-missed.D>div {
  animation: shake-gd 0.2s;
}

.just-missed.R>div {
  animation: shake-rv 0.2s;
}

@keyframes shake-ct {
  0% {
    margin-top: 4%;
    margin-left: 3%;
  }

  33% {
    margin-top: -4%;
    margin-left: -3%;
  }

  66% {
    margin-top: 4%;
    margin-left: 3%;
  }
}

@keyframes shake-rv {
  0% {
    margin-top: 4%;
    margin-left: -3%;
  }

  33% {
    margin-top: -4%;
    margin-left: 3%;
  }

  66% {
    margin-top: 4%;
    margin-left: -3%;
  }
}

@keyframes shake-gd {
  0% {
    margin-top: 5%;
  }

  33% {
    margin-top: -5%;
  }

  66% {
    margin-top: 5%;
  }
}

.move-T {
  animation: move-t 0.2s;
}

@keyframes move-t {
  0% {
    margin: 0;
  }

  100% {
    margin: -48px -24px 48px 24px;
  }
}

.move-R {
  animation: move-r 0.2s;
}

@keyframes move-r {
  0% {
    margin: 0;
  }

  100% {
    margin: -48px 24px 48px -24px;
  }
}

.move-V {
  animation: move-v 0.2s;
}

@keyframes move-v {
  0% {
    margin: 0;
  }

  100% {
    margin: 48px -24px -48px 24px;
  }
}

.move-C {
  animation: move-c 0.2s;
}

@keyframes move-c {
  0% {
    margin: 0;
  }

  100% {
    margin: 48px 24px -48px -24px;
  }
}

.move-D {
  animation: move-d 0.2s;
}

@keyframes move-d {
  0% {
    margin-left: 0;
    margin-right: 0;
  }

  100% {
    margin-left: -48px;
    margin-right: 48px;
  }
}

.move-G {
  animation: move-g 0.2s;
}

@keyframes move-g {
  0% {
    margin-left: 0;
    margin-right: 0;
  }

  100% {
    margin-left: 48px;
    margin-right: -48px;
  }
}

.T.just-moved>div,
.T.just-moved>span {
  animation: move-c 0.2s reverse;
}

.G.just-moved>div,
.G.just-moved>span {
  animation: move-d 0.2s reverse;
}

.V.just-moved>div,
.V.just-moved>span {
  animation: move-r 0.2s reverse;
}

.C.just-moved>div,
.C.just-moved>span {
  animation: move-t 0.2s reverse;
}

.D.just-moved>div,
.D.just-moved>span {
  animation: move-g 0.2s reverse;
}

.R.just-moved>div,
.R.just-moved>span {
  animation: move-v 0.2s reverse;
}