html,body,canvas{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Arial, Helvetica, sans-serif;color:#1d1d1d;background:#bf995b;font-size:24px;line-height:60px;text-align:center}h1,h2,ul,li,pre{margin:0;padding:0}h1,h2{letter-spacing:-2px;font-weight:bold;text-shadow:0 1px 1px #d8b98a}h1{font-size:50px}h2{font-size:30px}input,select{display:block;color:#1d1d1d;background:#d8b98a;border:none;margin:2px 0;font-size:24px;box-sizing:border-box;width:100%;height:40px;outline:none;border-radius:0}input{padding:0 5px}input::-webkit-input-placeholder{color:#642}input::-moz-placeholder{color:#642}input:-ms-input-placeholder{color:#642}button{display:inline-block;color:#1d1d1d;background:#bf995b;border:3px solid #1d1d1d;font-size:24px;font-weight:bold;line-height:40px;text-shadow:0 1px 1px #d8b98a;cursor:pointer;outline:none;width:135px}button:hover{background:#1d1d1d;color:#bf995b;text-shadow:none}ul{width:100%;height:170px;background:#d8b98a;overflow:auto}li{border-bottom:1px solid #997c49;list-style:none;line-height:20px;font-size:18px;padding:5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}li pre{display:none;font-size:12px;line-height:14px}li.sel{background:#997c49}li.sel pre{display:block}#game,#chat{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto}#game.hide,#chat.hide{display:none}#game{top:30px;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}#game h1{margin-bottom:140px}#game div{-webkit-align-self:center;align-self:center}#chat{line-height:24px;overflow:hidden}#chat input{height:30px;text-align:left;background:transparent;border:0}#chat span{display:block}#chat div{width:50%;height:100%;padding:5px}#chat div.texts{text-align:left;color:rgba(0,0,0,0.5)}#chat div.room{float:right;text-align:right;color:rgba(0,0,0,0.5)}#count{position:absolute;display:-webkit-flex;display:flex;top:30px;right:0;bottom:0;left:0;font-size:180px;font-weight:bold;-webkit-justify-content:center;justify-content:center}#count div{-webkit-align-self:center;align-self:center;opacity:.7}#count div.off{opacity:.0;transition:opacity 0.3s}#sfx{position:absolute;border-radius:50%;background:#d8b98a;top:5px;right:5px;width:30px;height:30px;line-height:30px;font-size:24px;cursor:pointer}#sfx.off{text-decoration:line-through}#note{position:absolute;background:#d8b98a;border:3px solid #997c49;top:20px;left:50%;width:300px;margin-left:-150px;letter-spacing:-1px;transition:-webkit-transform 0.3s;transition:transform 0.3s}#note.hide{-webkit-transform:translateY(-100px);transform:translateY(-100px)}.bt,.br,.bb,.bl{background:#bf995b;position:fixed;display:-webkit-flex;display:flex;top:0;left:0;right:0;bottom:0;padding:10px;box-sizing:border-box;transition:-webkit-transform 0.5s;transition:transform 0.5s}.bt{bottom:50%;border-bottom:3px solid #997c49;-webkit-transform-origin:center top;-webkit-justify-content:center;transform-origin:center top;justify-content:center}.bt div{-webkit-align-self:flex-end;align-self:flex-end}.bb{top:50%;border-top:3px solid #997c49;-webkit-transform-origin:center bottom;-webkit-justify-content:center;transform-origin:center bottom;justify-content:center}.bb input{margin:10px 0;text-align:center}.bl{right:50%;border-right:3px solid #997c49;-webkit-transform-origin:left center;-webkit-justify-content:flex-end;transform-origin:left center;justify-content:flex-end}.bl div{width:100%;min-width:140px;max-width:240px;-webkit-align-self:center;align-self:center}.br{left:50%;border-left:3px solid #997c49;-webkit-transform-origin:right center;transform-origin:right center}.br div{width:100%;min-width:140px;max-width:240px;-webkit-align-self:center;align-self:center}.open .bt{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.open .bb{-webkit-transform:translateY(100%);transform:translateY(100%)}.start .bl{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.start .br{-webkit-transform:translateX(100%);transform:translateX(100%)}