*{font-family:sans-serif;font-size:14px}html,body{background-color:#222;overflow:hidden}html,body,canvas{width:100%;height:100%;margin:0;padding:0;background:rgba(0,0,0,.4)}div{user-select:none;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}#split{position:absolute;bottom:10px;left:10px;width:100px;height:100px;padding:5px;border:none}#feed{position:absolute;bottom:10px;right:10px;width:100px;height:100px;padding:5px;border:none}#status{position:absolute;padding:10px;background:rgba(0,0,0,.4);color:#fff;font-size:16.1px;top:10px;right:10px;font-weight:700;text-align:left;display:none;opacity:0;transition:opacity 1s ease-in-out}#status .title{font-size:25px}#status .me{color:#f88;font-size:16.1px}.chatbox{position:absolute;width:300px;height:320px;background:rgba(22,22,22,.7);bottom:5px;left:5px;border-radius:5px;pointer-events:none;color:#fff;display:none;opacity:0;transition:opacity 1s ease-in-out}.chatbox .chat-list{padding:5px;margin:0;list-style:none;box-sizing:border-box;height:285px;overflow:hidden}.chatbox .chat-list li{padding:2px;margin:3px}.chatbox .chat-list li.me{color:#ea6153}.chatbox .chat-list li.friend{color:#2ecc71}.chatbox .chat-list li.system{color:#9b59b6;font-style:italic}.chatbox .chat-list li.system:before{content:"» "}.chatbox .chat-input{pointer-events:all;box-sizing:border-box;width:100%;padding:8px;background:transparent;border:none;border-top:1px solid #DDD;outline:none;color:#fff}#startMenu{position:relative;margin:100px auto auto;width:350px;padding:20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;box-sizing:border-box}#startMenu p{padding:0;text-align:center;font-size:x-large;font-weight:700}#playerNameInput{width:100%;text-align:center;padding:10px;border:solid 1px #dcdcdc;transition:box-shadow .3s,border .3s;box-sizing:border-box;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;margin-bottom:10px;outline:none}#playerNameInput:focus,#playerNameInput.focus{border:solid 1px #CCCCCC;box-shadow:0 0 3px 1px #ddd}#startButton,#spectateButton{position:relative;margin:10px auto;width:100%;height:40px;box-sizing:border-box;font-size:large;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.25);background:#2ecc71;border:0;border-bottom:2px solid #28be68;cursor:pointer;-webkit-box-shadow:inset 0 -2px #28be68;box-shadow:inset 0 -2px #28be68;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}#spectateButton:active,#spectateButton:hover,#startButton:active,#startButton:hover{top:1px;background:#55D88B;outline:none;-webkit-box-shadow:none;box-shadow:none}#settingsButton{position:relative;margin:10px auto;width:100%;height:40px;box-sizing:border-box;font-size:large;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.25);background:#2ecc71;border:0;border-bottom:2px solid #28be68;cursor:pointer;-webkit-box-shadow:inset 0 -2px #28be68;box-shadow:inset 0 -2px #28be68;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}#settingsButton:active,#settingsButton:hover{top:1px;background:#55D88B;outline:none;-webkit-box-shadow:none;box-shadow:none}#settings{-webkit-transition:max-height 1s;-moz-transition:max-height 1s;-ms-transition:max-height 1s;-o-transition:max-height 1s;transition:max-height 1s;overflow:hidden;opacity:0;transition:opacity .5s ease-in-out,max-height .5s ease-in-out}#settings{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgb(0,0,0);padding:40px;border-radius:10px;color:#fff;z-index:2000;display:none;min-width:300px;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 20px #00000080,0 0 0 1px #ffffff1a;opacity:0;transition:opacity .2s ease-in-out}#settings.visible{opacity:1}#settings label{display:block;margin:10px 0;color:#fff;font-size:16px}#settings input[type=checkbox]{margin-right:10px}#renderCanvas{width:100%;height:100%;touch-action:none}#gameAreaWrapper{width:100%;height:100%}@media only screen and (min-width : 1224px){#mobile{display:none}}input [type=image]:focus{border:none;outline:1px solid transparent;border-style:none}*:focus{outline:1px solid transparent;border-style:none}#closeSettings{position:absolute;top:10px;right:10px;width:30px;height:30px;border:none;background:transparent;color:#fff;font-size:24px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}#closeSettings:hover{background-color:#ffffff1a}.volume-control{margin:20px 0}.volume-control label{display:block;margin-bottom:8px}.volume-control input[type=range]{width:100%;height:4px;background:rgba(255,255,255,.2);border-radius:2px}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:white;border-radius:50%;cursor:pointer;transition:background .2s}.volume-control input[type=range]::-webkit-slider-thumb:hover{background:#ccc}.volume-control input[type=range]::-moz-range-thumb{width:16px;height:16px;background:white;border:none;border-radius:50%;cursor:pointer;transition:background .2s}.volume-control input[type=range]::-moz-range-thumb:hover{background:#ccc}