@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap";html,body{margin:0;padding:0;font-size:14px}*{box-sizing:border-box}nav{width:100%;min-width:1180px;height:50px;background-color:#303030;color:#fff;text-align:center;line-height:50px;box-shadow:0 6px 20px #00000080;z-index:99}nav span{font-family:"Roboto",sans-serif;font-weight:bold;font-size:25px}nav span:nth-last-of-type(1){color:#e73273}nav span:nth-last-of-type(2){color:#9e1fda}main{min-width:1100px;background:linear-gradient(#722a54 0%,#511e5b 53.99%,#181818 100%)}main #canvas{border-radius:8px}main .container{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;justify-content:center}main .control-bar{padding:10px 0;display:inline-flex;justify-content:space-between;margin:12px 0 4px}main .control-bar .btn{margin-right:.5rem}main .control-bar .btn:last-of-type{margin:0}main .start-game-btn{position:absolute;width:110px;height:38px;line-height:28px;font-size:24px;font-weight:500;top:700px;left:calc(50vw - 55px);background-color:#e73273;color:#fff;outline:none;border:none;border-radius:10px}main .finish-tips{position:absolute;left:48vw;bottom:20px;color:#fff;font-family:"Roboto",sans-serif;font-size:2rem;font-weight:500;text-align:center}.alert-one{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.alert-three{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:90px;padding:.5rem 1.2rem;background-color:#000;border-radius:5px;opacity:.8;animation:animate 1s}footer{padding:50px 0;text-align:center;color:#bdbdbd;background-color:#181818}footer .logo{width:100px;margin-bottom:10px}footer p{font-size:.8rem;margin-block-start:0;margin-block-end:0}.alert-btn{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;max-width:14rem;height:2rem;padding:0 8px;background-color:#000;opacity:.8;text-align:center;color:#fff;border:none;border-radius:5px;animation:animate 1s}@keyframes animate{0%{top:10%;opacity:0}to{top:0%;opacity:1}}.show{display:block}.hidden{display:none}.alert-two{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:90px;padding:.5rem;background-color:#000;border-radius:5px;opacity:.8;animation:animate 1s}.alert-two p{word-break:break-word;line-height:1rem;color:#fff}.confirm-button{float:right;height:2rem;line-height:2rem;padding:0 1rem;background-color:#e73273;text-align:center;color:#fff;border:none;border-radius:5px;outLine:none}button{cursor:pointer}.btn{color:#fff;background-color:#333;border-radius:6px;text-align:center;font-family:"Roboto",sans-serif;font-weight:500;outline:none;border:none;padding:.5rem .9rem .65rem}.btn-select{background-color:#e73273}.btn-small{padding:.2rem .9rem .4rem}.modal{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#383838b3;z-index:99}.modal .modal-container{margin-top:calc(50vh - 200px);margin-left:calc(50vw - 200px);width:400px}.modal .cancel-hint-btn{float:right;border-radius:50%;background-color:#f1f3f4;border:none}.modal .hint-img{width:100%}.hideOverFlow{overflow:hidden}.alert-three .alert-text{color:#fff;margin-top:10px}