@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=B612+Mono&family=Joan&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:#fff;color:#000;font-size:16px;font-family:sans-serif}button,input{font-size:inherit;font-family:inherit;background:inherit;border:inherit;cursor:pointer;color:inherit}html,body{height:100%}input{font-size:inherit;font-family:inherit}.loading-animation{perspective:10em;display:flex;justify-content:center}.loading-animation li{transform-style:preserve-3d;width:1em;height:1em;background:#222;animation:flip 2s infinite;backface-visibility:hidden;animation-fill-mode:forwards;animation-direction:alternate}.loading-animation li:nth-child(2n){background:#ccc}.loading-animation li:nth-child(1){animation-delay:.1s}.loading-animation li:nth-child(2){animation-delay:.2s}.loading-animation li:nth-child(3){animation-delay:.3s}.loading-animation li:nth-child(4){animation-delay:.4s}.loading-animation li:nth-child(5){animation-delay:.5s}.loading-animation li:nth-child(6){animation-delay:.2s}.loading-animation li:nth-child(7){animation-delay:.3s}.loading-animation li:nth-child(8){animation-delay:.4s}.loading-animation li:nth-child(9){animation-delay:.5s}.loading-animation li:nth-child(10){animation-delay:.6s}.loading-animation li:nth-child(11){animation-delay:.3s}.loading-animation li:nth-child(12){animation-delay:.4s}.loading-animation li:nth-child(13){animation-delay:.5s}.loading-animation li:nth-child(14){animation-delay:.6s}.loading-animation li:nth-child(15){animation-delay:.7s}.loading-animation li:nth-child(16){animation-delay:.4s}.loading-animation li:nth-child(17){animation-delay:.5s}.loading-animation li:nth-child(18){animation-delay:.6s}.loading-animation li:nth-child(19){animation-delay:.7s}.loading-animation li:nth-child(20){animation-delay:.8s}.loading-animation li:nth-child(21){animation-delay:.5s}.loading-animation li:nth-child(22){animation-delay:.6s}.loading-animation li:nth-child(23){animation-delay:.7s}.loading-animation li:nth-child(24){animation-delay:.8s}.loading-animation li:nth-child(25){animation-delay:.9s}.loading-animation ul{list-style:none;display:flex;flex-wrap:wrap;width:5em;transform:rotateX(30deg)}@keyframes flip{0%{transform:rotateY(0) translateZ(0)}50%{transform:rotateY(0) translate3d(0,.5em,0)}to{transform:rotateY(180deg) translateZ(0)}}button.sonic{padding:1em 2em;border-radius:.8em;border:solid 2px #ccc;transition:opacity .5s;position:relative}button.sonic:not([disabled]):active{transform:translate(1px,1px)}button.sonic:hover{border-color:#fff}button.sonic[disabled]{opacity:.4}button.sonic .tooltip{position:absolute;font-size:.8em;top:calc(100% + 1.5em);left:50%;width:10em;margin-left:-5em;background:#2196f3;padding:.5em;border-radius:.8em}button.sonic .tooltip:after{content:"";display:block;background:#2196f3;width:1em;height:1em;position:absolute;top:-.5em;left:50%;margin-left:-.5em;transform:rotate(45deg)}button.sonic .pop-up-enter-from,button.sonic .pop-up-leave-to{opacity:0;transform:translateY(2em)}button.sonic .pop-up-enter-active,button.sonic .pop-up-leave-active{transition:all .5s}.menu.lobby .offer li{margin:0 1em}.menu.lobby .offer p{text-align:center}.menu.lobby .offer ul{margin:1em 0;display:flex;list-style:none}.menu.join .open-matches{display:flex;flex-wrap:wrap;justify-content:center}.menu.join .open-matches button{padding:.5em 1em}.menu.join .open-matches h3{white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.menu.join .open-matches li{display:flex;flex-direction:column;align-items:center;padding:.5em;margin:.5rem;width:10em}.main.menu h2{margin-bottom:1em}.main.menu h2 span{color:#2196f3;cursor:pointer}.main.menu h2 span:focus{outline:none}.main.menu>ul{display:flex;list-style:none}.main.menu>ul>li{margin:0 1em}.radio-list{border-radius:.8em;border:solid 2px #ccc;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.radio-list:hover{border-color:#fff}.radio-list input{display:none}.radio-list label{padding:.5em 1em;display:block;width:7em;text-align:center;cursor:pointer;opacity:.3;transition:opacity .5s}.radio-list li.active label{opacity:1}.radio-list li.disabled label{opacity:.1}.radio-list li:not(.disabled):hover label{opacity:1;transition:none}.radio-list ul{display:flex;list-style:none;position:relative;z-index:10}.radio-list .highlight{width:7em;background:#2196f3;box-shadow:0 0 1em inset #00000080;height:100%;position:absolute;top:0;transition:transform .2s ease-in-out}.new.menu h2{margin-bottom:1em}.new.menu>ul{display:flex;flex-direction:column;align-items:center;list-style:none}.new.menu>ul>li{margin-bottom:1em}.menu.splash footer{margin-top:2em;color:#444}main.home{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:#fff;background:linear-gradient(32deg,#222,#444);perspective:60vmin;font-family:Joan,sans-serif}main.home header{margin-bottom:2em;text-align:center}main.home .back{opacity:0;position:absolute;height:10em;width:30em;margin-top:-19em}main.home .menu{padding:2em;position:absolute;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;transition:transform .2s,filter .2s}main.home .flip-enter-active,main.home .flip-leave-active{transition:transform .2s linear}main.home .flip-enter-from,main.home .flip-leave-to{transform:rotateX(180deg)}.countdown-timer{text-align:center}div.unit{position:absolute;transform-style:preserve-3d;transition:transform .2s ease-in,opacity .5s}div.unit.captured{opacity:0}div.unit.player1{color:#000;-webkit-text-stroke:1px white}div.unit span{display:flex;justify-content:center;align-items:flex-end;width:2em;height:2em;transform:rotateX(-45deg);position:absolute;transform-origin:center bottom;bottom:0;left:-1em;line-height:.71em}main.game{display:flex;overflow:hidden;justify-content:center;align-items:center;height:100%;color:#fff;background:linear-gradient(32deg,#222,#444);perspective:60vmin}main.game.inCheck .board-wrapper:after{background:linear-gradient(to bottom,#0000,red,#0000)}main.game.player1 .board-wrapper:after{top:-1.5em}main.game.side0 .rect-canvas{transform:rotateX(-45deg)}main.game.side0 .turn-indicator.side1{top:-10em}main.game.side1 .board-wrapper{transform:rotate(180deg) rotateX(-45deg)}main.game.side1 .rect-canvas{transform:translate(100%,-100%) rotateX(45deg) rotate(180deg)}main.game.side1 .turn-indicator{transform:rotate(180deg) rotateX(-45deg)}main.game.side1 .turn-indicator.side0{bottom:-10em}main.game.side1 .turn-indicator.slide-left-enter-from,main.game.side1 .turn-indicator.slide-left-leave-to{transform:translate(20em) rotate(180deg) rotateX(-45deg)}main.game.side1 .unit span{transform:rotateX(-135deg)}main.game .board{border-radius:1em;overflow:hidden;border:solid 3px white;position:relative;width:100%;height:100%;transform-style:preserve-3d}main.game .board canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;pointer-events:none}main.game .board>div{width:4em;height:4em;background:#fff;transition:background .5s;position:absolute}main.game .board>div.rank-1:nth-child(odd),main.game .board>div.rank-3:nth-child(odd),main.game .board>div.rank-5:nth-child(odd),main.game .board>div.rank-7:nth-child(odd){background:#333}main.game .board>div.rank-2:nth-child(2n),main.game .board>div.rank-4:nth-child(2n),main.game .board>div.rank-6:nth-child(2n),main.game .board>div.rank-8:nth-child(2n){background:#333}main.game .board>div:hover{outline:solid 1px #ffffff;background:#888!important;transition:none;z-index:10}main.game .board-wrapper{position:relative;font-size:2vmin;width:calc(32em + 6px);height:calc(32em + 6px);transform:rotateX(45deg);transform-style:preserve-3d}main.game .board-wrapper:after{content:"";width:100%;height:1em;background:red;display:block;position:absolute;border-radius:.5em;top:calc(100% + .5em);left:0;transition:top .3s ease-in-out;background:linear-gradient(to bottom,#0000,#2196f3,#0000)}main.game .copy-fen{padding:.2em .5em;font-size:inherit}main.game .copy-fen.active span{display:none}main.game .copy-fen.active:before{content:"✓ Copied!"}main.game .end-modal{position:absolute;font-family:Joan,serif;font-size:1.3vmin;width:30em;left:calc(50% - 15em);transform:translate(0) rotateX(-20deg);top:2em;padding:1em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}main.game .end-modal h3{font-size:2em;color:#666}main.game .end-modal p{font-size:5em;text-transform:uppercase;margin-bottom:.5em;line-height:1em}main.game .rect-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform-origin:0 100%}main.game .tools{position:absolute;right:.5em;bottom:.5em;font-size:.5em}main.game .turn-indicator{position:absolute;font-family:Joan,serif;left:50%;width:20em;margin-left:-10em;transform:rotateX(-45deg);display:flex;flex-direction:column;align-items:center;font-size:.8em}main.game .turn-indicator.slide-left-enter-from,main.game .turn-indicator.slide-left-leave-to{transform:translate(20em) rotateX(-45deg)}main.game .turn-indicator.side1{top:-3em}main.game .turn-indicator.side0{bottom:-3em}main.game .turn-indicator .countdown-timer{font-size:.8em;font-family:B612 Mono,monospace}main.game .units{position:absolute;pointer-events:none;font-size:4em;z-index:50;color:#fff;-webkit-text-stroke:1px black;width:100%;height:100%;left:.55em;top:.5em;transform-style:preserve-3d}main.game .promotion-modal{position:absolute;width:30em;height:10em;left:calc(50% - 15em);transform:translate(0) rotateX(-20deg);top:2em;background:linear-gradient(to bottom,#444,#333);box-shadow:0 .5em 1em #00000080;padding:1em;display:flex;flex-direction:column;align-items:center;justify-content:center}main.game .promotion-modal.disabled{pointer-events:none}main.game .promotion-modal.player1 ul{color:#000}main.game .promotion-modal button{padding:.2em .5em;border:solid 1px transparent;background:linear-gradient(to bottom,#555,#555,#222);background-size:100% 200%;background-position:center 90%;transition:all .5s}main.game .promotion-modal button:hover{border-color:#fff;background-position:center 50%;transition:none}main.game .promotion-modal button:hover span{transition:transform .3s;transform:rotateY(360deg)}main.game .promotion-modal h3{text-transform:uppercase;text-align:center;color:#666;font-size:.8em}main.game .promotion-modal li{margin:.5rem}main.game .promotion-modal span{display:block;transition:none}main.game .promotion-modal ul{display:flex;justify-content:center;list-style:none;font-size:3em}.slide-down-enter-active,.slide-down-leave-active{transition:transform .5s}.slide-down-enter-from,.slide-down-leave-to{transform:translateY(-20em)!important}.slide-left-enter-active,.slide-left-leave-active{transition:all .5s}.slide-left-enter-from,.slide-left-leave-to{transform:translate(20em) rotateX(-45deg);opacity:0}@keyframes rotateZ{0%{transform:rotateX(45deg) rotate(0)}to{transform:rotateX(45deg) rotate(360deg)}}@keyframes counterRotateZ{0%{transform:rotate(0) rotateX(-45deg)}to{transform:rotate(-360deg) rotateX(-45deg)}}