@import url(https://fonts.googleapis.com/icon?family=Material+Icons);.timer{background:linear-gradient(90deg,#6c6 50%,#ddd 50%);border-radius:50%;height:16px;width:16px;position:absolute;top:0;left:105%;display:none}.timer.start{display:block}.timer:after{content:'';border-radius:100% 0 0 100%/50% 0 0 50%;height:100%;left:0;position:absolute;top:0;transform-origin:100% 50%;width:50%}.timer.start:after{-webkit-animation:10s steps(10,start) forwards mask;animation:10s steps(10,start) forwards mask}@-webkit-keyframes mask{0%{background:#ddd;transform:rotate(0)}50%{background:#ddd;transform:rotate(-180deg)}50.01%{background:#6c6;transform:rotate(0)}100%{background:#6c6;transform:rotate(-180deg)}}@keyframes mask{0%{background:#ddd;transform:rotate(0)}50%{background:#ddd;transform:rotate(-180deg)}50.01%{background:#6c6;transform:rotate(0)}100%{background:#6c6;transform:rotate(-180deg)}}*{box-sizing:border-box}body{margin:0;padding:0;height:100vh;display:flex}.getting-invite{position:absolute;z-index:99;top:10px;right:10px;width:200px;border-radius:5px}.getting-invite__container{margin:8px 0;background:#fff;box-shadow:-3px 2px 9px #d2d2d2;padding:8px 12px;border:1px solid #e1e1e1;transition:opacity .3s;opacity:0;visibility:hidden}.getting-invite__container.active{opacity:1;visibility:visible;z-index:100}.getting-invite__content{margin:10px 0;text-align:center;font-size:20px}.getting-invite__buttons{display:flex;justify-content:center}.getting-invite__decline span{color:red;cursor:pointer}.getting-invite__accept{margin-right:15px}.getting-invite__accept span{color:#17c417;cursor:pointer}#message{text-align:center;margin-top:20px;font-size:30px;color:#ca4c4c;font-family:sans-serif}.app_wrapper{margin:auto}.battle-area{border-spacing:0;width:600px;display:block;margin:30px auto;position:relative}.battle-area.unactive{opacity:.4}.battle-area.unactive::before{content:'';position:absolute;left:0;cursor:not-allowed;top:0;right:0;bottom:0;width:100%;height:100%;z-index:2}.battle-area td{border:1px solid #a4a4a4;border-bottom:0;border-right:0;height:30px;width:30px;text-align:center}.battle-area td:last-child{border-right:1px solid #a4a4a4}.battle-area td:hover{background-color:rgba(235,235,235,.62)}.battle-area td.active{background-color:rgba(212,212,212,.62);cursor:pointer}.battle-area td.tic{background:url(../img/tic.png) no-repeat}.battle-area td.tac{background:url(../img/tac.png) center/contain no-repeat}.battle-area td.win-coord{-webkit-animation:2.4s forwards blinking;animation:2.4s forwards blinking}.battle-area tr:last-child td{border-bottom:1px solid #a4a4a4}@-webkit-keyframes blinking{16%,50%,83%{opacity:.2}100%,33%,66%{opacity:1}}@keyframes blinking{16%,50%,83%{opacity:.2}100%,33%,66%{opacity:1}}.players_wrapper{position:absolute;left:10px;top:10px;border:1px solid #ccc;padding:5px 22px 5px 12px;width:220px}.players_wrapper__title{border-bottom:1px solid #ccc;padding-bottom:10px;text-align:center}span#expand_more{position:absolute;left:7px;top:2px;display:none}.players{width:100%;padding:0}.players li{margin:6px 0;display:flex;flex-wrap:wrap;justify-content:space-between}.players .username.bold{font-weight:700}.players .invite,.players .invite span{color:teal;cursor:pointer;position:relative}.players .invite span:hover,.players .invite:hover{text-decoration:underline}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.65);z-index:-1;display:flex;opacity:0;visibility:hidden;transition:.5s;max-height:100vh;max-width:100vw}.overlay.active{visibility:visible;opacity:1;z-index:101}.modal{width:300px;margin:auto}.modal input{border:none;height:32px;font-size:18px;width:100%;outline:0;padding:4px 6px;position:relative;z-index:10}.modal input.error{box-shadow:0 0 6px red}@media (max-width:1100px){.players_wrapper{position:static}}@media (max-width:820px){body{flex-direction:column}.players_wrapper{position:absolute;max-height:30px;overflow:hidden;transition:.4s;background:#fff;z-index:100;box-shadow:1px 1px 5px #9d9c9c}.players_wrapper.active{overflow-y:auto;transition:.6s;max-height:350px}span#expand_more{display:block}}@media (max-width:600px){.battle-area{margin-left:10px;margin-right:10px}}@media (max-width:500px){#message{font-size:24px;text-align:left;margin-top:70px;margin-left:20px}}