js+css实现小人漫游世界小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js+css实现小人漫游世界小游戏代码，使用箭头键或通过拖动屏幕上的箭头控件来漫游。按Enter键或单击星号按钮进行查看。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          box-sizing: border-box;
          padding: 0;
          margin: 0;
          user-select: none;
        }
        
        p, h1, h2, h3, h4 {
          display: inline-block;
          margin-block-start: 0em;
          margin-block-end: 0em;
          margin-inline-start: 0px;
          margin-inline-end: 0px;
          padding-inline-start: 0px;
        }
        
        body {
          background-color: #006781;
          font-family: Arial, Helvetica, sans-serif;
          overscroll-behavior: contain;
        }
        
        .location {
          position: absolute;
          top: 50px;
          width: 600px;
          max-width: 100%;
          height: 10px;
          background-color: white;
          z-index: 50;
        }
        
        .location_mark {
          position: absolute;
          display: flex;
          width: 100%;
          height: 100%;
        }
        
        .location_mark > div {
          flex-grow: 1;
          height: 100%;
          background-color: #c3ac83;
        }
        
        .location_mark > div:nth-child(odd) {
          background-color: transparent;
        }
        
        .location_mark > div:hover {
          background-color: #7ce6f0;
          cursor: pointer;
        }
        
        .pointer {
          width: 24px;
          height: 30px;
          position: absolute;
          bottom: 5px;
          background-size: 24px 30px;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAeCAYAAAA2Lt7lAAAAAXNSR0IArs4c6QAAANNJREFUSEvNVkEOwCAIg/8/2mVODJJVwRmyHVUoLZXJRFTo/eO2jPYlanru3swBKGXEYX4Ks+uWLDon651BOgDoi3t5ycCdCTmkSSwOqHJrzXd7IHFEVHOnAAyVd3MbF6nKBncdc9FxgJNNfpUoHQBJhAoJ34MvAOKK1dQMqcaton4PymqqhdITaYB/NDlI4GZQQ+C4jiZE/4kUAAE/0gv3NN2VaAbwiYlNbJ8cuuAtqSIAISYo8YxBGsAUaFW5h0EawACk3KAfDNDVrkMt2o5zV+wF49ygD5b06E8AAAAASUVORK5CYII=);
          transform-origin: center bottom;
        }
        
        .display_wrapper,
        .wrapper,
        .inner_wrapper {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .wrapper {
          overflow: hidden;
        }
        
        .display_wrapper {
          pointer-events: none;
          transition: 0.3s;
          flex-direction: column;
          z-index: 100;
        }
        
        .img_display {
          image-rendering: pixelated;
        }
        
        .display_wrapper.display button,
        .display_wrapper.display .close {
          pointer-events: auto;
          opacity: 1;
        }
        
        .display_wrapper.display {
          pointer-events: auto;
          background-color: #032041d7;
        }
        
        .inner_wrapper {
          pointer-events: none;
          top: 100%;
          transition: 0.3s;
          flex-direction: column;
        }
        
        .display_wrapper.display .inner_wrapper {
          top: 0px;
        }
        
        .display_wrapper button {
          padding: 14px 18px;
          border: 0px;
          background-color: #c3ac83;
          border-radius: 50px;
          margin-top: 20px;
          font-size: 18px;
          cursor: pointer;
        }
        
        .display_wrapper button.close {
          background-color: white;
          margin-top: 40px;
        }
        
        .display_wrapper button:hover {
          background-color: #7ce6f0;
        }
        
        .circle::before {
          content: '';
          width: 220px;
          height: 440px;
          position: absolute; 
          left: 0px;
          border-top-left-radius: 220px;
          border-bottom-left-radius: 220px;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAgCAYAAAB5ChbjAAAAAXNSR0IArs4c6QAAAR1JREFUeF7t3LENAkEMBEA+pyZKoFhKoCZyEEifUIBteYcGfJ69lR4QHNfH833xIkCgROBQuBJnQwj8BBTORSBQKKBwhdhGEVA4d4BAgcDrfjs8UhZAG0HgK6Bw7gGBQgGFK8Q2ioDCuQMECgTOop2jfGhSgG5EroDC5WZv8wYBhWtANzJXQOFys7d5ocB/0byHK8Q3Kk9A4fIyt3GjgMI14hudJ6BweZnbuFFA4Rrxjc4TULi8zG3cKKBwjfhG5wkoXF7mNh4g4IvvASE4Qo6AwuVkbdMBAgo3IARHyBFQuJysbTpIwA9QB4XhKPsFFG5/xjYcJKBwg8JwlP0CCrc/YxsOFPCfJgNDcaS9Agq3N1ubDRRQuIGhONJegQ8XhXQZhyzAIAAAAABJRU5ErkJggg==);
          background-size: 220px 32px;
          background-repeat: repeat-y;
          opacity: 0.4;
          transition: 2s;
        }
        
        .element {
          position: absolute;
          transform-origin: bottom center;
          color: hotpink;
          display: flex;
          flex-direction: column;
          background-color: transparent !important;
        }
        
        .element.change {
          color: black;
        }
        
        .bear {
          position: absolute;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAAgCAYAAAALxXRVAAAAAXNSR0IArs4c6QAAA15JREFUeF7tXNGShCAM0///6L05Vx1hKW1KEUdyjytrIE1aqO6tC//IABkYxsA6DJnAZIAMLCUDfgRejrHS9eNr2jjN9MQvB0DjNYp/zRa94z8VPg34G+7ZE8BUBtAWW7gemoBEA34+Kc66fofmn+cTlMYdny9Lsepeb7MBE38Y/5Imi3HpEP+p8GlAoQJOnACmMgBQAbskILMBgYkWh7ZWQOK3MQDwnwOZhKfNjvin1RLP0YDGCqgJTLsOCDBE8NLW0HAEoAFTBkLiIcW/1pFMgL1nQEB41cCPxtcMJl2PWv+N+MUmQ+uWHDD+VPg0oKzsrpnPYKhR+FMZwNrl7JWAzFvQvAJdMnvSHb2rC3o3vsEw1SFAJQwxXsMW1IRv3ZEc84he/1vwaUCeAV1nvrcYQKqA3sdt6FHEbEBWgDYGoisAOhvil7uQXgNG8U8DsgK6KmCUAEcbYDS+24DSGQwtwV4CRuO/WIDH0pJmjLYl0/gAKvBU+DQgK6DkHRrwwkyvBCQ+hvi0ImZhXfOSpaRM4mcv42olRrmO8n+WoSAdOCrgNoUoHTwVnwYUhBsV+EsbXvsZVjKT0fg04JeBqDggb8JU34DRnvMdCbPy3FAT4qPwGwvP+XUgA5uew6HzAvCrTRkprtZC6ZiHSw8BvYjkLKrp2rt+9QxoJVwbBxDvIrwXPir0gMDTgCmJLj0ExOEZBrxsoY6SXNWkViEN7wQ+8veArUb0JqBW3Dx+Bv6Lwivcx6SHfP6tPKDd76fjqxWQBoyxQKvwWmcB4NOA+/FvPwMm1EcnALMBbxTA6C3Y7PhVA1IHbQzkiZAG/OWTBqxUgDb5LQtQiaeIAw1IA0qeCjUAYLx8PiHzcOCH4GpncBqQBqQBywwMMyB0CD8HKy9uRGUg7YUa6YeTQPeP608FWRWi1pRwxN1UASUdBMYf0oH0HFBbv/kX8VIbmgbcD0zvS0CmZgwNWI9/iwGTAFzSkmTa6vM7RwVC8b3jtb5C/i8aplw/UFmsfGm8FyuhVYeGcdH4Lv1rr4X9T9JKqGsCBhas+DTgnowzTi0xroUBjSsaL4MEtiHW+1rHWXGtukJ52u7bGpzSInoRgBI2avxb1//WdUXrBOKJBoym356p45H73hESVt+pPPruEE9/6kRWXWvZA88AAAAASUVORK5CYII=);
          background-repeat: no-repeat;
          background-size: 224px 32px;
          bottom: 0px;
          left: 0px;
          width: 224px;
          height: 32px;
          z-index: 1;
          transform-origin: center bottom;
        }
        
        .bear_wrapper {
          position: absolute;
          width: 32px;
          height: 64px;
          overflow: hidden;
          transform-origin: center bottom;
        }
        
        .bear_wrapper::after {
          position: absolute;
          top: 10px;
          color:  white;
          width: 32px;
          height: 32px;
          image-rendering: pixelated;
          background-repeat: no-repeat !important;
          background-size: 32px !important; 
          content: '';
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGpJREFUOE/tU7ENACAIg/+PxmgESUWD0VEHF2gpFJguHwNeknyG8wQiksMzN9j4iCgE98QanIQpiSr4BIsh7ix9PsRabHJiZWO0B6rWDEfvlawnhpuILZsiXxGT8BZ8/JqgzQUlnyhIHWYBz5dHEcECbOcAAAAASUVORK5CYII=);
          opacity: 0;
          transition: 0.1s;
        }
        
        .bear_wrapper.alert::after {
          top: 0px;
          opacity: 1;
        }
        
        .bear_wrapper > div {
          position: absolute;
          bottom: 0px;
          height: 32px;
          width: 32px;
        }
        
        .right {
          transform: scale(-1, 1);
        }
        
        .tree {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAS1JREFUaEPtmOESgjAMg+H9H1pPlDv1gKZL2NZe/ctWm3xxK66L/vMwSq7Kr5QW+zQWVoDV+L/xEvMkRUDnpxXgdV4qREEgrAC2cQkJhkBYAerGKRItBMIKuLvxJhIeAmEF9G7cRQIhEFbA6MYhElcEwgqYrfFLEkcESoDyjeug1o/pKQmcGdg7WsgRv0CLGt+42CRBvSGLejsPnf/7otQCRjsPkaibmP2lNuzPew/MlnkLzkbiG0cJsCwTP89HwDKod8SQS7ZmIYua4vklCQRT7+hAIwQyzI1uHBJSs5Ai5M4aNQs5DbtteZ6beLbTxoXshaEEuCwTL05BYPckWpTynEJsKllyyEB52iO1WfSfKdUDtbkEvB2gTKQ2F4EiQOavIlQRqghtGRg6SjwBzME8OQGJzeQAAAAASUVORK5CYII=);
        }
        
        .tree.gold {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAATBJREFUaEPtmssRwyAMRE1h6SLt5JR20kUKSyYHcsDGK8zyEbO5wii7egKJGYeN/Hu/np+zkLf7IzD/khrsJ8ytASQ8zTqLBI2AWwOlwtkkqgm4NVArnEXiMgG3BtjCa0kUE3BroLXwqyTMBNwa6C28lAQk4NbAaOFWElkCbg3MJhyR2BGQAeZz6yBW+o5Yj0Augb1Ly/pig30gGnJroLdwdOuk65CAWwOjhVtJqBM3vvZ34dftA7PVPCIbSfzPgAyglJHX1yOAEtS7xDQLjRrirB047tMshM4Oaz13JjQLsTJsjaNZyJqp1vvW6cS9OyybTJABdkoL4/knMMvMU5j4bZ1bqNR5ur/2ErDO/TmdcBpFBmWg8gsuEVAJqYTQNQPWVUIqIZXQ+afGKD+1o8QX8/PsAUSbdP0AAAAASUVORK5CYII=);
        }
        
        .tree.navy {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAStJREFUaEPtmlEOwjAMQ+lpOQbiGJwWJMSEtNE5bbx0Kea3U2bnJU0LlAv7c70/d0M+boX5Smqwt7C0BpDwddpJJHgE0hpoFU4m4SeQ1oBXOIlEP4G0BtjCnSTaCaQ1cLTwThJ2AmkNRAtvJIEJpDUwWriRRJ1AWgNnEw5IbAnIAPO+9SPW6h4xIYFaAqNLy3hjw3NgMZTWQLRw4/6/PIYJpDUwWriRhCbxwbv+Nvy8c+BsNY/Qfkh8e0AGUMrI6/MRQAmKLjGdhUYd4owTWGch1DL09UpP6CxEzzQKqLMQylDU+jyTOHrCkgkV+Ms6+YXscDLAzmhrPF1oWjNGe36zjfZG9u5ixnN/TR7+Zg4ZkwHfP7hEwD0I1QOoSdG6mlhNjGoErKuE/ryEXs8pr9lOa2KxAAAAAElFTkSuQmCC);
        }
        
        .tree.white {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAASZJREFUaEPtmsEOwyAMQ8f/fzTTDt2BjjohHhDkXoOonZeGILW8yE+ttT5tWUopzFdSN/sIS2sACW+zziJBI5DWgFc4m0SYQFoDUeEsEsME0hpgC4+ScBNIa+DfwkdJmAmkNTBbuJcEJJDWwGrhVhJdAmkN7CYckbgRkAHmdevHXu094jwCvQTOLi3rjQ2eA5ehtAZmC0dd5xZH31xaA6uFW0noJEYlyI6few7sVvOI3EXi+w3IAEoZOX4eAZSg2SWmWWjVEGc9ga91cBqdXTo0A6uFW41oFkLdix3XLMTO6Oh+55zEu3UbL5EiA96UkdfnJ7DLzOMFc04X8jpv10ebgHXu7+mE0ygyKAPBP7hEQCWkEkJtBsRVQiohldDzr8YoP9FR4g3ng/Atg0wpIgAAAABJRU5ErkJggg==);
        }
        
        .talking_tree {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAWZJREFUaEPtl1ESgyAMROX+h7bTqp3iCFmSFQxN/6wQsvuChLTwf6sQMjGXpAbbE3MrQEr8bDzFPEoQ0PnHCmh1niqEQcCtAGviFBIWAm4FsBM3kdAQcCvg7sRVJFoIuBXQO/EmEggBtwJGJw6RqBFwK+BpiVdJXBEIAcwb10WszPQpCZQM7F1ayCd+gQYpb1zWSoJyQwb1dh76/h+DphYw2nmIRJzE1p2qmD/vOfC0mpfgfEj84ggBkmXk9/MRkAzqXWLIIRu9kESN8b5KAsHUu3SgFgJp5rLE13V7TCnXXPpfsl4R79JsuBdSLFjVoIgHC6iWzLHwF+GJiOT8+b0inq0XUiwIkWgwpCiAslkVpdEKLdu/9F5ohACK84TaVpF4EwgBKutIk24jQMpPDEPfxOKKvAH/dx8oeWf9CCANZZGbafIeNQRYtkUQIByEJhNNk2MPbA6YTDRNDgJBwFh/UUKEEnoBualyOSdvZPEAAAAASUVORK5CYII=);
        }
        
        .talking_tree.white {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAWZJREFUaEPtmsENwjAMRemlK7EF6zAD67AFK/UCAimVSHC/HTtJXcyRtM7/fk7iSJ1Oxr9lWZ5bIed5niynNA32FubWABKeZ92KhBkBtwakwq1JqAm4NaAVbkWimoBbA9bCtSTEBNwaaC28lgSbgFsDvYVLSUACbg2MFs4lQRJwa2BvwhGJgkAYsLxu/YiV3yOOR4BKYO/S4t7Y4DmQDLk10Fs42nXycUjArYHRwrkk4iRuvO0X4Y97Duyt5hHZRGJdA2EApcx4/HgEUIJ6l1j0QqOaOO4JnJ77n17ocb99TJ8v168kUf+jNSWNR60Jdi8knXCYAbTbJCNJYE4ECc/HpfHUvZB0QmRIGo80gDKPhKRx61Kj5m12Enc3YJV5bW1zCRd34jBQmzqj96ZWBIz0wTBxoYEpavRAsY3WzqMtQW7fT+mD3SgyFgaUX3AFgSihKCG0zYDxKKEooSih7U+NUX60rcQLuHomAMi6N0QAAAAASUVORK5CYII=);
        }
        
        .talking_tree.navy {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAXdJREFUaEPtmjEOwjAMRenCVZk4ABNi4gBMXJUFpKoRIsV823GSOpiRtM7/fk7iqp121r/D5fkz5P08WU5pGmwW5tYAEp6n3YiEHQG3BqTCjUmUE3BroFS4EQk9AbcGrIUXkpATcGugtnAlCT4BtwZaCxeSwATcGugtnEmCJuDWwNaEAxJrAmHA8nnrS6zsOWJAAlQCW5cW84kNnwPJkFsDrYUz9/90GSbg1kBv4UwScRJX3vXX4cc9B7ZW8wjtQuK9BsIASpnx+HgEUIJal1j0Qr2aOOYJ/H+90ON2mk3vj9ePHFH/oyUljkesCXYvJJ4QOBDHYxsAu02aOOnLiaDM5+PieKW9kHhCJgl2QkgDRvu8uDSkyNL1tU7i9gaMMl9c20oSE3yzrgxsvVYoGdUMKH2LbxvAwFZ6Hmnua+1CUh3q61cGtJFKdzFm308vYq1wq9ILA0EAfCOHEhQlhDKExmMXKvsME7/gCAIgA7GIUYmg8c6L+AUC0eXZtlHgCQAAAABJRU5ErkJggg==);
        }
        
        .talking_tree.gold {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAWVJREFUaEPtmlEOAiEMRN176Sn0OPqlx9FT6L00mmAiWKelBbZr/ZTdMtNXoCQ7rYx/1/Px/ivkZneYLKc0DfYU5tYAEp5n3YqEGQG3BqTCrUmoCbg1oBVuRaKagFsD1sK1JMQE3BpoLbyWBJuAWwO9hUtJQAJuDYwWziVBEnBrYG7CEYmCQBiwvG59iZXfI5ZHgEpg79Li3tjgOZAMuTXQWzjadfJxSMCtgdHCuSTiJG687Rfhl3sOzK3mEdlE4r0GwgBKmfH48gigBPUuseiFRjVx3BM4Pfc/vdB6u3+Zvl1OH0mi/kdrShqPWhPsXkg64TADaLdJRpLAnAgSno9L46l7IemEyJA0HmkAZR4JSePWpUbN2+wk7m7AKvPa2uYSLu7EYaA2dUbvTa0IGOmDYeJCA1PU6IFiG62dR1uC3L6f0ge7UWQsDCi/4AoCUUJRQmibAeNRQlFCUUK/PzVG+dG2Eg9rTCIQafEWbQAAAABJRU5ErkJggg==);
        }
        
        .house1 {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAo5JREFUeF7tnMtVwzAQRXEBdERKYAXlwArKgRUlhI4oIBycKIllSzOjN5YU87K1PqM7V+NPnAx3/X4OUWhDj6F2GdQJ1OYAxguKhUCTMRl///E2GX/3/LrqfAt2q9ajapQwYtUFbQngaMbhkBdwGM650CYla5xU7wAjXdejWazrhFdgNg9QBW62j9MmQsAcjPRezxhSzkDvCQlQsmDMyMXASfP4pKAZC2mzUCPH4aRabthRqxtIgJaMxebVNk6ytdRI6erCrQYS4DyF2ZNI78CsRqZq42oGEuAxReotfOvASo10M5AAl2UTDQyZ6+2sKhmFHtfeaxNggnQJwFVvtVAjWvdPAb02kAAzWcoBHMH9txqHGh2A/hlIgAU0ZwCtTykK5txUl3BZdzaQAG35JUAbr1lrAiRAkADYnQa2Bnj/tZ+E8PO4A0Oq090rbthAr0DqYLvM4hV3McA4gBhAryZ6x02AUeatiSdAArRVz3+zhb8/37NkHp5ebOROrQnwBIIABX9oIHhBTYBKgOEyAH2Mph1nczVQu3DpjKEdpxuAYUHoLVHqPUIJWOq41mQ07jB/8YU0AR4JwABLTYkzqDUnNZ92C6Pxxv0JECTaHCAYf/PuBAimgAAJECQAdqeBBAgSALvTQAIECYDduzVQukdG71xAbufuBAiS7Aag9ecT8au2rYwkwFs10GqctM5WRjYzkAAlJYTjAaD3rwKCibVqYnMDCdBo4lrmxWHUMrG6gQRoNC71HYL31qWBYGIIkAB1BFgDdZySrbwBxq+5hZeSeBZWJooAlaBSzQiQAG0EvGtganbWQFteZq0JkACXCXALg2YQIAFOCPBxlpMQ1f61g1vYKWN8HlgIcqsG/gI23LozPmY72QAAAABJRU5ErkJggg==);
        }
        
        .house2 {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAopJREFUeF7tmjFWxCAQQJNeb6TeQBuvY+l1bPQG6o20X595G01IYGYYsrDZb6fAMHw+EBL7rt2fQ5Ba32KqTSZ1BLU7gOGAQiG8kzGLfzjMu+v7Rfii/a3YrYqvqhQxAoBd12kADiqERizo/RuiiTmEnMaQ4if6G4tM/Ur9TYxPxtV0CsDE6ZUCqAJnMNFlnHQCK/bI0uMZUgKgMDPSUt4S4Cw1ac+RDLOWrxg5hLDmAcCAfLMAwxm3Jmo1zFo/18iTGQjA5ZQmT63WgUmGavPfzEBtAtJAapVr8y8GUNthLSDefmPjA6CS7GYAx/5bO1WVXLKrKW42upsIAP/mYPXSMf3jpnfVbBUaaRgzEoDKCUoBzHpLoex3t9VGoL8GAjBjmgGYAW3aBIAAdBJwNsdAADoJOJtjYG2A5/p2plTebgNLJeIUwdy8VN7ZAGPfFlp/6VA6bwAG7lpf1wEQgLbt72KW8OfLc5LMzeOTjdyxNgCPIAAo+IOBwb/mWtcbAJUAxz3J+vgQTog2zu72QO3AJYO1cZoBOA7IeyWSBiSBC8u1JnvzDsef/U3Em8jFA7Qakrt3Sf1ol7AUx1qefZWzdhSrX2rgpeJYx1UdoDXh1uoD0DkjAASgk4CzOQYC0EnA2RwDAegk4GzerIHSFU9753XyEZsDUESUrtAMwNC4q9f3ZObfD3ez8lpGAvBcDbQaJ42zlpHVDASgpESkfAQn7XGZ4f+ajUZuvTee3EAAOtUAIABnBFjChYTI/ipn7Z8lbCUW1AcgAPe1B37d384GdP32MfzOc6DSdAAqQcWqARCANgKcwjZei9oABOC+HmNi88ljjNN0AAJwnQCHiNMMAAKQU9jpwCrAH7m4ujP7Z6WFAAAAAElFTkSuQmCC);
        }
        
        .art {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA8CAYAAAApK5mGAAAAAXNSR0IArs4c6QAAAZlJREFUaEPtWtsRwjAMS/diC9bhk3XYgr3K8QhHw/mkOHbTpuYTEkeyZNflMqWU5jTQZxqW0DzvW6hpemqT0lehILSxujueQvfbdWMaLOGczpfFF1ChYQnlTPQmWOJQKzQcoa0WklqhwxDysiIb11wh9uBahdm4boQy4NYuWAJE8YIQm6G8jrVKaUHp+cKen+M1TwpaILshlIGW3kZNoVSCVdqthiRAiIjUTDZHiCUirQtCn8yomwKbQW+lzGroMIS0RKV9KJ67QghAbRNA8YKQNHpoLbI7hdBIU04S7KyGEts8yyFvI+Ct+6URa7XnUO17DkpIEGLfQFnr1E4MbFyzts1aopZIbVxzQtr3H0QUdT/zGpLaMwLK/t6dEAvUep2b5ayBsvHUhNiuwwLRrpP+lKmeFIYjpM2o9z615byBaeNXE9Ie1GsfHE57AdOeG4S0mVtr359Cax3sfc6Qt7HKpL2uZaHLTFnizwUoy8Q3nf++k7X8NAU0YNZ0fhAqh8GwHPZkWO43R1FDUUO4ZkwfG2G5sNzKlnsA56teKz8x82wAAAAASUVORK5CYII=);
        }
        
        .art.blue {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA8CAYAAAApK5mGAAAAAXNSR0IArs4c6QAAAZlJREFUaEPtWtsRwjAMS0dgBBZkGBZkBEYoxyMcDeeT4thNm5pPSBzJkl2Xy5RSmtNAn2lYQvO8b6Gm6alNSl+FgtDG6u54Cl1v941psIRzOZ8WX0CFhiWUM9GbYIlDrdBwhLZaSGqFDkPIy4psXHOF2INrFWbjuhHKgFu7YAkQxQtCbIbyOtYqpQWl5wt7fo7XPClogeyGUAZaehs1hVIJVmm3GpIAISJSM9kcIZaItC4IfTKjbgpsBr2VMquhwxDSEpX2oXjuCiEAtU0AxQtC0uihtcjuFEIjTTlJsLMaSmzzLIe8jYC37pdGrNWeQ7XvOSghQYh9A2WtUzsxsHHN2jZriVoitXHNCWnffxBR1P3Ma0hqzwgo+3t3QixQ63VulrMGysZTE2K7DgtEu076U6Z6UhiOkDaj3vvUlvMGpo1fTUh7UK99cDjtBUx7bhDSZm6tfX8KrXWw9zlD3sYqk/a6loUuM2WJPxegLBPfdP77Ttby0xTQgFnT+UGoHAbDctiTYbnfHEUNRQ3hmjF9bITlwnIrW+4B5oNeK6uNUQAAAAAASUVORK5CYII=);
        }
        
        .bear_art {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIVJREFUOE/FUkEOgDAIG/9/NAZmtSITEhPlhIxWSpHxMoTwSrnV+dueYs2xFwLViRGRgRykXLMc2JSgUrUiMJzan58mYHApYW92OZ9I8PE5eIKkfnNhLqARAubMRmiNmnkPpY2/3UF3BW5pdonHIeGceZ985rw7PmX0w4n4ltYzgoaRZ8sG2gZiEf2RbPUAAAAASUVORK5CYII=);
        }
        
        .panda_art {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAP9JREFUSEvtltENgzAMRJvh2lnaiWAWGC5VIzlygu27AOWjKl8IIr+cnXOc8rTk24VP+gNRttPrUZbkaUFLy/8wpU2w590MmFKq3xmoCxRY2X2Oz5VATwEimMj7QA8DWVjN6bzCOvo1dGrWR6zplLQDKAXcBFXU3wQixdHhiVsbWUd9UuXdg0LjsydVN4Co81DGr7tWDaAHWH6wVA4BdVBPOWp1Q8DR9B5SyMJQ16EVfh1Y7i6568BtcZotSiDSi4dtUXdNqLQsssv4Oq2WF8u3ea2pb2zjjBxwatM3f9S2+nW7FZoqjd03I0kwUEGFm1qS05l39dNAODuQCy4HvgFiXd/B6wW+XQAAAABJRU5ErkJggg==);
        }
        
        .kitten_art {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAAAXNSR0IArs4c6QAAANJJREFUSEvtls0NwjAMhVOJDZiwsEDvvdI7CyAWhA2QWhnJyLw8J26lcKE5xnY+/yR97U6Py5warg4Bt+OYzs/JRdbsGPgFkGBdDFKza6z6yRkuQJwtxB6ONps1JvEB4AGRsWCVrMImAAt+A7Zkj7OyfbfV/x5wuPbpNdzdEaBd2xGuoDkgcnusD7vK2ZAlgA1aqtFVahtLSiHFh7a2GvTPXrJXyVbQDqh27g9a5OkBfh6sPrh6gGpUEpwdQIWfyWFkj/62MFFn3/vIXgaovp6VDgvMWvpVFT6/uQAAAABJRU5ErkJggg==);
        }
        
        .penguin_art {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAAAXNSR0IArs4c6QAAAQhJREFUWEfdl9ENwjAMRJsPhmBYhBDDlh0KBLmSJdckOTu4RJDPptI938VumublkaeBK/00wPFwffNuXk4uP7sdKIlLZStIFwASJ5DdACzi7IQFwu2ABMj5PKV0qWYeDqCrHw6AjnuoA57sw89ATZwikEufh48daFWtxRlEQnQDILtr4iU3EMSmDZEwCVjEpRtmgGhxgrDEsTpgEfdW7wKglzUEW8fPPdZ7OqM5ivXYRYOntI9a8+sA+ku5O8Dt/qzGu56T2pUswn4SIIDW+m8AVH0zAtmaPS1oEYcAOrvarOD3eB+N382c8PwXWAHC7wPWAYQAi4PK4wACkQDWGNy3YgTh3R8O8AKiVv4jq3+JhAAAAABJRU5ErkJggg==);
        }
        
        .bot_art {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAFNJREFUOE9jlIhN/c9AAWCkqgEvFs8myi0SsalwdSguGDWAgWHgwwAWN88XzcIanZJxaRjigywaQe4DBSRySkN2MzY5jLxAkQHI0YjuClxyFOdGAGIoTaFT0R+lAAAAAElFTkSuQmCC);
        }
        
        .twitter {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAASRJREFUWEftmFsOgjAQRW8h8ZHoEnBp7k2XpjtQE2JUasojQSLeW1sSPsqftJ2enpkR1BSHi8WMLpOASDaSIVauyVAyxAyw8clq6LTffuy9O14ZSz1OgVxgNVi34xCmu6/EkYBcQCWYmzcGM9QzFk8GUk4ZCiOlbOzU306oADHT1BBLQ38DBYilXwJiUFL7tJOiGOpvqFoYg4wCFArRh4sCNNuUxTAVzVCMOmIw8vcQeySoXRYdKKSWFBhvQyGmJgXyNaXC/GXIt9N8YCQgXwDlreBXE0R/lvkaGcLJQGprh85LQMxgMpQMMQNsvK6hYm3YvHr8aYFX+wdgDqCywL0CblW73AKlu9leLuoqb2IvDbBxi9yvUwB5BjwssMiaz+eyWfcG/Gy7wQ2FTmcAAAAASUVORK5CYII=);
        }
        
        .cactus {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABECAYAAADgHze4AAAAAXNSR0IArs4c6QAAALlJREFUaEPtmdsKgCAQBfP/P7pIEmrJ9gJesOk1beeMYqJpiz+76Joinwp1ugoNA5CFZXBXKFfjSvJuAFryEIjHAAAYwAAGMICB5gZKgdoPal2AWjJpopkBADCAgd8ZeKy452LT28AwgNegPQ0AgAEMuA1EDr3ufUw7qq91AIBuBkoh765XAzTPgWkAtEReQ24DACxnQAuU37c8KwZgegN5+EfOgeYApnCmRsa7Iq5sMIABDGAAAyEDB82AbC+zNjHvAAAAAElFTkSuQmCC);
        }
        
        .cactus.gold {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABECAYAAADgHze4AAAAAXNSR0IArs4c6QAAAL9JREFUaEPt2cENgCAMhWEZzC1cx5PruIWDaTxgDAlCm5QS/L0a5PWTIKlhUl7Hvp3vofOyBs2jVIPuidwCpBOnVUslxAJuAUoTayWqBQiAAAIIIICAuUCcIPc9HzdArrJUwkyAAAgg8DuBdMcNrQXcAuQKbSZAAAQQEAtoOl5fXTMC9CsQ35v01FtaI7Wn6qdL5h6gVJE0oFiAAMMJlAqK9816xQToXiDuE25rwDxA7b8jMwECIIAAAgggUCtwAbylmQqAr6brAAAAAElFTkSuQmCC);
        }
        
        .cactus.navy {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABECAYAAADgHze4AAAAAXNSR0IArs4c6QAAAMBJREFUaEPt2WEKgCAMhuE8bceIjtFpC0KhDHEbTMXe/obt80lWVlisx7qfr6HHFiyXMg26C3ULkBfOp62U0At0C1ArbJSQCxAAAQQQQAABd4FUoPQ8nzdAaWa5hJsAARBA4HcCWccNnz1e2mB4NaJuAQq3up0AARBAQC1g+eT1HCNsZOU+QIBmAqmQ9q23FlC8BoYJUJuRVkgtQIDpBGoTiuf9vhUTYHiB2Cf6rQH3AMJ/R34CBEAAAQQQQEAocAEQGCwufsKTvQAAAABJRU5ErkJggg==);
        }
        
        .talking_cactus {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABECAYAAADgHze4AAAAAXNSR0IArs4c6QAAAOZJREFUaEPtmdsOgyAQRMv/fzSNRZq4AfdiAWOPb5rFnTlsplXTK35ksTRFbhVatDdaJkA2lsZdplzFHefTBGjOQ0I8BBAAAQhAAAIQGE6gNuj9QD1XQM+ZJDGMAAIgAIG/I3BI3C1sZhO4JiDnsj6lY1A2rpuS1E0AAcsJON6CjJkBBMwk0Ow1cwjvKaCqqiTquUzGLSyFg2bknyXh6Xb/UsDXlGPALKVmArcRoLm6+lzQnQGtcZSQews0IRDwEtCIln9WpqpShIDHEfhs/8oZGC7AZM5UZPxWxCcbCEAAAhCAQIjAG9Obli+OB/h3AAAAAElFTkSuQmCC);
        }
        
        .talking_cactus.gold {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABECAYAAADgHze4AAAAAXNSR0IArs4c6QAAAOBJREFUaEPtmVEOgjAMQN299BR6HPzS4+gp9F4STZpok2XtsNsCjz8go6+PUthIu8rtcbu8voceTudUc6mqQe9A3QB0YJ2114TbQDeAUuBaE2YDAGAAAxjAAAbCDUiA3Pt8vQC5zLSJMAMAYAADmzOgO25qbWAxwP44fSZBz/v1ZzKkj1s7qdsAAN0NWFdBwmoAgGYGcoGaFeGwAAImJmRfd8bFT0HpXv8NQAJ5v3pLgGYDwwCUMvIachsAYHUGSgnJ+bC1YgCGNyB9olsNhANY/x2FGQAAAxjAAAYwYDUwA8mxwwpMb7ifAAAAAElFTkSuQmCC);
        }
        
        .talking_cactus.navy {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABECAYAAADgHze4AAAAAXNSR0IArs4c6QAAAN9JREFUaEPtmcENgzAMAMm07RRUZYoyLZUQfmAUxQ41iejxAxR8PowhIQ212+O97IbOr1RzqapBa6BmADqwTttpwm+gGUApcKUJuwEAMIABDGAAA+EGJEDufX5fgFxm2kSYAQAwgIG/M6A6bjrM8WSCEdWIzgIsn3FFTM9pNxc6HDcm4DYAQHMD5lWQqBoA4DoDmUjXFWGvAMIlJmRfd8bh9FNQuNm/A5BA3q/eUjWaDXQDUMrIa8htAIDbGSgltJ2PWysGoHsDW59oVwPhAMZ/R3EGAMAABjCAAQwYDXwBoiRWLkY4afIAAAAASUVORK5CYII=);
        }
        
        .npc {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAABACAYAAABP97SyAAAAAXNSR0IArs4c6QAAAblJREFUaEPtW1mygzAMg/sfmjevbRiaZpFiBQJx/zqNLcuyQxa6Lvxni0xW3gVlYcJrCc4ESFF7DzbhMQRfQNv2jbeuuwvGF8JTgscEJQFEmH3GSPDMBEPAQiWTxFpxnGBo8rj34lI7S0FWSUTBYsmwgEAPSvFkBAVEIWIsztQEqYyymU2Uahe8koJdAAs92AXPCdYeD8LHxT0UbOjFJmIojrxEUeCD8vckmCCanF/YFmBbopuC0xAElmamIbU1cHcFTdEDxk5QvbIAki4d4gq6gtEpmrS+BM68RL1EZyvRUPO5E27V2hL1L+/BJxCEti+HzL3a2KpcYZcA+c8pmVqLOkHk8ZUr5ZxS1gqQK1gjOSJBqDRrxGq9FP9uVa62wz/2oBNk1btifNyL3RU8m6QTVDf9CAp2mVzOJpabTf970AlerUYLfphsXMGW7I1g4wqOoIIlBlfQkr0RbF3BEVSwxDCVgiFRj1iy+XbpidulaUr01kRPPxe1TPEttgzBWykpv11qyW5PGwvBLyX3LxdfiMa3WsuyFF/Lht/ZfjLBn+uEniUH+EZE2d1Qgz9W8b/BgJikQ6iY/wCcfGpEPG+uNAAAAABJRU5ErkJggg==);
        }
        
        .crystal {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA4CAYAAADqxUiJAAAAAXNSR0IArs4c6QAAAOhJREFUWEftlzsSgzAMBeMbpM5ZU3JWam5AhkIupBH6xBLNo4fFby1LHq/k892P83p1+7xH5hOply5QO5iAfJXRlYdXDDBFXha1FnHWtdsxwNqh4XVtRu2NOOoaYKGuPeos0OtadQxwptnfDQoi6lURW64BnrNU1qn3DJ9RV7nVXAO8Wq34HvXr0eWW/wHA5Y4JgHIqj3qWE5G6ykqAq3+AD/rox/39mG/nVZtNu8Rhrp6JPxb1v3VtXdBxP37+fpyta8utGASsfujd5QBrSZrl5HXtjTjs2DpQALaqJOyYRx6NOO14FfgHXfHdfSHXfrMAAAAASUVORK5CYII=);
          opacity: 0.8;
        }
        
        .crystal_large {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAABOCAYAAABWpoQXAAAAAXNSR0IArs4c6QAAAUtJREFUaEPtmtsOgyAQRMv/fzSNifiwZrNXlMXps6WTM4eKYPslf3rv/RiytdYyh04d7Ai2fNARkFLMIptGFEHPir5DlKs829UwUQQllexPVFt5lqtuogjKLBD2JeqtPOqqmSiCCovX/YhmVe51VU0UQZXPVvsQnVW51VWRKILS9abgan2iT1WudZUliqDSPZ1xtS7RtyqXXL0RRVDjZindBaxHdJXKOVcvoghqdLM+0VUrv5EtE3QkXzXw+D/FrA9O9uvrdYmu5mr9ez2IOmeVWP3bZLnT6LrPTCCqdNVc/dNkpTcl6u89gSh3hBjddpxNVnJz/L7oKIKeBL5LNFsBLUmzowiqvbUqr7suy3qsnl59VAFrQLejCCqdllgdLUfUGtjrZthRBOWWgV5HyxGVAkfdTHMUQYmT6hW+5HKZ9/CpAllupjs6O+gfg3w4VkZX5DEAAAAASUVORK5CYII=);
          opacity: 0.7;
        }
        
        .talking_crystal {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABYCAYAAAC+uwT3AAAAAXNSR0IArs4c6QAAAf5JREFUeF7tmlFOBDEMQ5l7cQuuwyfX4Rbca9BKW8QWVXZSp7Mq5ndKO86zk1G1x8uiv/M8z9tRx3EcK45ccshNyHbCmqCeUjW5cmIWJg6eiUULOrLgqqyVEbOworlmYmzGWAtWZ01OzMI6ZOovERNDGctasCprMmIWBtCrsmZio0KrLKjO2jQxC0NtVTzXTKwveJUFVVlLE7OwYLZMDA36aEFXWXCWXDhjFha1ArJW8G7ExK6yYDZrNDELE2fLxPqPaFTgZ7FglBzM2L8T9vX58VDE17d3BJ96zu6L7kbSxNgXoNT8WsTumxaGLMi+QJWwtu9I4JCYhd1LtzpjJtYqgCzY1j1Lxkbk/mRsW2FRcqOu14iOsoees91U3hXRwejF0XO0f1nzYA/us9j+T9VFlxMbNZnLhamyxpKNrkt/UllYtNSi9SaGCskObrTP7HNE6mcMsAdZGFup5DoTixbuKkuypMIZu3quWdidALyl6q26rRVXWzJqwXTGLCzabgfrTawrTLh5rGomWVLTGavOmoWNsjmb8aq5djkxtSVnBckyZmGk500MFGp6jqnmmoqUPGOzWbMwNqvkOnpZdq49PbGoJdWCyjJmYe1uIvjLUTYT8na/PTEksCpb5RmzMDY0wXVlGdueWC+wOlvLMra9sGBEppeXZ2z6DZMbfAOp75po1Yh+QQAAAABJRU5ErkJggg==);
          opacity: 0.9;
        }
        
        .sun {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAAAXNSR0IArs4c6QAAArFJREFUeF7tnFFSwzAMRMm9uAXX4ZPrcAvuFQamZohTz+7KSuymy1fBsiw/rSW3tF1eJvtZ13X9H9KyLMtMIU4VzA8YAxPlYWAGJhIgzWtl1dNmqWXT1DADI5VVzAzMwEQCpDlS1my1bHgNuyywo+5Ho4BF90MrLLoAOplPA2y22tKbGPaeF1aYgaEU3cbZI8RmjFxWNjsqTlph7AWz2BnYQQpjlaAmgvWrJna4wtiNPSwwdDRRxlRAqHhF10PzWuvKCjMwlMLGOHuRzVYUCrelHDZe6B8ZtMbZAAyMJHw2qLMu0uEahrgZGCIk3tNId91m0W6Y3iXZ2ta9404HBiYCNLCrABtd5BHHLKWldUkDQymrxg3MwO4SgEcSPQWaXVnoGQDa324+EhJy+PTAEIC62yB7lJCzx9X4a/vdkUQA1AXPBoLWU+PfAUOA1BpQ7L8+P34fvr69b1y0/o42Wo9H/avAdvs3sO2bkFHilqOA1Uorv9eKQwGi8aI01v+0CrsssDqDSHG9GUKKOXpcjd9dsvqghCqQ4Td9tmuydkihSGHoVQ0DEz+qA4GhjJVxJG3kp+52tX1vd0XKQfGVcQNjSd3spgEmxi2bX05hMgFxwnTAsmqZyAGaZ4FKr2EGBnN336C3WwaXbU6zwkSi0wOb5WhmgzqshhlY4wigf46MAud3ICbVLDbBaLnwTb/VDVHtyO6i0fXQvBY4A0OSqsZlYKxC2Ayy/v66FPlNKaxfNs5wl8wOhPVnYOJRUM3ZRDycwlQQrP1wYCgANVPsxrPssuKni37WglkAVD9Z8YeBZSkKbaQGc9S6rF8Du2UkHZh6BFj7UQpj49spPDoxa56BBUkicOyRCS5PT6NrGO0xaGhgIjgDMzCRQNA864W+4PJw2jQ1rERqYDBnWwMDuxiwb91+Zls1trB/AAAAAElFTkSuQmCC);
        }
        
        .moon {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAR5JREFUWEftmdENQiEMRe1ebuE6frqOW7y9MJpgYklzKbfxUYJ/CpTDofYJyoV8lVKKJ4SIiKe/7ksNfgebHtgLiGx6jbsNTw8cDcgah4bTAP8btKkGRjUxDacBPhsUmW4Mb2BUFkC7rtN5Dc+WClYufw1vYDJ31zE8eyo0pjdwcO6ua/h4Pj6Lu97uP4u0PveKHY0vVg6PBuwFH41vAteJa+D6XhvvBbT6eeOvB8wajB4PDUdPyMajgXurRm8/tKB8wHVF7CNaf9u1Kba61JNH2O/hdMAo99j2cMMsEBrfAEflMprY277OqXkb9u690R+mxCymrZv5/LeXemfYJ6A3M9B/HuvcwFtmoo0jo82p2btl6YDZHPcapQ2fDfwCbxDl/dXMDeIAAAAASUVORK5CYII=);
        }
        
        .cloud {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAuCAYAAAC/OZ4cAAAAAXNSR0IArs4c6QAAAUZJREFUaEPt2tEOgjAQRFH7/x9dYwIkFiuzO6UBvT7v0nI6BaMtj4t8aq01MpVSSonUn1V7iUm8bg5AcYmjUOJlt7LZyZyeQACjkVjqz4ZrpzUridMS+PeAKkC78mpfMtiHbdn5qAmWE6hCZCd8KJEsyM7HBlTBkvd1u7YeaDeBAL6vsQwI3PfN0ULuEghgEhC42GN5TeKWQAABjAmY1SRwFCBb15MsAALoCZjdJBBAU8BsJ4EAmgJmOwkE0BQw20kggKaA2U4CATQFzHYS6AKu/fyoEJPk98CY164aQABNAbN9l0CehZoo/wtrTt2qQ0CS+NlOPtoB4CDA9jLq98TscTJzZ8lbLnsfvQE4H9iRsc8Hjk6EuvKjxlUB3PHkBLoDAegKLv1nQ85K3soxLYGz3u4/D9gLcjSZs6Hst/CgHdy9zF0Bn9d21/exmP62AAAAAElFTkSuQmCC);
        }
        
        .touch_wrapper {
          position: fixed;
          bottom: 0px;
          width: 100%;
          margin: 0 auto;
        }
        
        .touch_wrapper > div {
          position: relative;
          margin: 0 auto;
          padding: 10px;
          max-width: 700px;
          display: flex;
          justify-content: space-between;
        }
        
        .touch_control {
          position: relative;
          width: 160px;
          height: 160px;
          background-color: #0cb2c2;
          opacity: 0.8;
          border-radius: 50%;
          transition: 0.3s;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAI5JREFUWEftl9EKwCAIRfP/P9rhQ6NFFNyU68C9xvR0kktJI39C7t+uAFRVbQMiAteBf+zNu0EUAgKYm99AQACec1MAZaAM5DNgIYOm2ikfVrU/BjyyfQexqv8CjPEaaWCO7TwARkY9gq6GOoSnKY5Yz5cDEbvc1SwDZeCfBlJcy6kPkzG2aU8zr8CiD+EDqUpIIc1s8VMAAAAASUVORK5CYII=);
          image-rendering: pixelated;
          background-repeat: no-repeat !important;
          background-size: 160px !important; 
        }
        
        .touch_circle {
          position: absolute;
          top: 0px;
          left: 0px;
          border-radius: 50%;
          width: 90px;
          height: 90px;
          background-position: center;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAJJJREFUWEftlVEKwDAIQ+f9D+3oh1CkxVShbpD9rmr6DKmoqj6Nn1AACZAACVQIiIiMDCv1yBbbcAvRdJ9MoR9eEVGK4usrGANnYisB/kz0zsEEdsO8CU+pQAJ2O49uh/jrHwLGTVtXYKhbTbja96nhlj0Qo/jCTwRRaxTPnmh7jKIMQP9DOYA2y5yjABIggXYCL89q16GHt61fAAAAAElFTkSuQmCC);
          opacity: 0.6;
          image-rendering: pixelated;
          background-repeat: no-repeat !important;
          background-size: 96px !important; 
          transform: translate(35px, 35px);
          cursor: grab;
        }
        
        .action_button {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background-position: center;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAINJREFUSEvtlEEKwDAIBLv/f7Slh0Cx6q4FoZTkmuDEWROYmR2DCxvA7LYUAcBVsKP1O4B1+6VE7ULuYBTgi3e6eHSQFWPTkkFDRW8hUS5pBl1IFnoZsgqpJurHgEjPUlHt+WmTQ/ae1YdHx5R9CXdQa0zVh8XOyX8RK5TtbwA1N67oBIKOo7n10c7nAAAAAElFTkSuQmCC);
          background-color: #d8d7d7ba;
          image-rendering: pixelated;
          background-size: 48px;
          opacity: 1;
          transition: 0.3s;
          z-index: 300;
        }
        
        .action_button:hover {
          opacity: 0.5;
        }
        
        .display_none {
          opacity: 0;
          pointer-events: none;
        }
        
        .element {
          position: absolute;
          background-repeat: no-repeat !important;
        }
        
        .background {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #09274e;
          transition: 2s;
        }
        
        .background:after {
          background: url(data:image/png;base64,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);
          background-repeat: repeat;
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          animation: bg_scrolling infinite linear 15s;
        }
        
        @keyframes bg_scrolling {
          0% { background-position: 0 200px; }
          100% { background-position: 200px 0; }
        }
        
        .background.light {
          background-color: #7ce6f0;
          color: #ffffff05;
        }
        
        .sensei_wrapper {
          height: 48px;
          position: absolute;
          top: 90px;
          width: 600px;
          display: flex;
          justify-content: space-between;
          transition: 0.3s ease;
          pointer-events: none;
        }
        
        .sensei {
          width: 48px;
          height: 48px;
          background-color: #0cb2c2;
          border-radius: 50%;
          background-position: center;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAHlJREFUOE/tUzkOwDAIM/9/NFVoiThi1KFjGQ0YYhNBDwUgB3xBLVcLVVUhYvCrXCyyZo9CQnM/QVY6CWU23G4gihvwZlUjILeQbHYXdvOaWidGaz3nNn9PwKYxHdoG8d1MxCgkvUQm4OSC/7ZRxId4D56+7WmJVn8BTKBrEfKj7O4AAAAASUVORK5CYII=);
          background-size: 32px !important; 
          image-rendering: pixelated;
          background-repeat: no-repeat !important;
          transition: transform 0.3s;
        }
        
        .sensei.talking {
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAHtJREFUOE/tk1ESgCAIROH+h6aRhIAVa5o+8xNwxX3AhEeIiBfxEYJcLRQRIWYNP8rFIr1sp4i0uV8gO52MUgwnDYrmhjigAoFmFhJmo+CXx6v1xYjWcob5e4EySP6LzgfooGv3TmCafY3yGwq2bVsTZ4e+Aru1XVGE+gNU324RwLxFzgAAAABJRU5ErkJggg==);
        }
        
        .speech_wrapper {
          position: relative;
          width: calc(100% - 48px);
          transition: 0.2s ease;
          pointer-events: none;
        }
        
        .speech_bubble::before {
          position: absolute;
          left: -16px;
          top: 15px;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAAAXNSR0IArs4c6QAAADZJREFUKFNjZMAD/v///58RmzxIAiaOogBZAkUBNgm4AnySIEVgK/CagOxInG5A9wlOX2BTCADNSCPmzMMs6AAAAABJRU5ErkJggg==);
          image-rendering: pixelated;
          background-repeat: no-repeat !important;
          width: 16px;
          height: 18px;
          background-size: 16px 18px !important; 
          content: '';
        }
        
        .speech_bubble {
          position: absolute;
          right: 0px;
          width: calc(100% - 25px);
          min-height: 100%;
          background: white;
          padding: 5px 20px 5px 8px;
          transition: 0.3s ease;
        }
        
        .speech_wrapper::after {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGtJREFUOE9jZKAQMIL0H17T/B9E24bUgvmEALJ6FAOIMQSmGaYWbiO6BDZXYFOD4mR8huCSw/AzNoX4DMYaaMgakL2CLZBxhjq6IbhiiDYGUOQFigKRomikKCERoxkWnViTMsWZiVDuwycPAJA1YBGXCWBtAAAAAElFTkSuQmCC);
          image-rendering: pixelated;
          background-size: 16px;
          width: 16px;
          height: 16px;
          position: absolute;
          top: 4px;
          right: 4px;
          content: '';
          pointer-events: auto;
          cursor: pointer;
        }
        
        .speech_wrapper:hover::after {
          filter: invert(100%);
        }
        
        .sensei_wrapper.off .speech_wrapper {
          position: absolute;
  .........完整代码请登录后点击上方下载按钮下载查看