@font-face{font-family:chess;font-display:swap;src:url(/assets/chess-Bsfm_f2J.ttf)}html,body{margin:0;padding:0}body{-webkit-user-select:none;user-select:none;background-color:#ffedb8}a{text-decoration:none}.boarder{border:2px solid #999;border-radius:10%}footer{margin-top:px;color:#d68b00;font-size:20px;position:fixed;bottom:0;left:40%}container{grid-template-rows:auto;grid-template-columns:auto auto;width:1400px;height:910px;margin:auto;padding:50px;display:grid}arena{aspect-ratio:1;text-align:center;background-color:#212121;grid-area:1/1;grid-template-rows:auto auto auto;grid-template-columns:auto;align-items:center;width:860px;height:860px;margin:auto;display:grid}arena .top{color:#fff;grid-area:1/1;grid-template-rows:auto;grid-template-columns:repeat(8,1fr);margin:0 20px;font-size:15pt;display:grid}arena .top div{padding:3px}arena .middle{grid-area:2/1;grid-template-rows:auto;grid-template-columns:auto auto auto;display:grid}arena .middle .left{color:#fff;grid-area:1/1;grid-template-rows:repeat(8,1fr);grid-template-columns:auto;align-items:center;margin:0 5px;font-size:15pt;display:grid}arena .middle .left div{padding:3px}arena .middle #board{grid-gap:10px;z-index:2;grid-area:1/2;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:800px;height:800px;display:grid}arena .middle #board label{border-radius:10%;justify-content:center;align-items:center;display:flex}arena .middle #board label img{width:80px}arena .middle #board label:hover{box-shadow:0 0 10px 5px green}arena .middle .right{color:#fff;grid-area:1/3;grid-template-rows:repeat(8,1fr);grid-template-columns:auto;align-items:center;margin:0 5px;font-size:15pt;display:grid}arena .middle .right div{padding:3px}arena .middle #result{z-index:0;opacity:0;grid-area:1/2;justify-content:center;place-items:center;width:800px;height:800px;display:grid}arena .middle #result #r-0{color:#fff;grid-area:1/1;font-size:50pt;font-weight:700}arena .middle #result #r-1{color:#000;aspect-ratio:1;background-color:#fff;border-radius:100%;outline:30px solid #171716;grid-area:2/1;justify-content:center;align-items:center;width:200px;height:200px;font-family:chess;font-size:100pt;font-weight:700;display:flex}arena .middle #result #r-2{color:#000;grid-area:3/1;font-size:60pt;font-weight:700;display:flex}arena .bottom{color:#fff;grid-area:3/1;grid-template-rows:auto;grid-template-columns:repeat(8,1fr);margin:0 20px;font-size:15pt;display:grid}arena .bottom div{padding:3px}info{grid-area:1/2;grid-template-rows:repeat(2,auto);grid-template-columns:repeat(1,auto);width:400px;margin:0 auto auto;padding:auto;font-size:20pt;display:grid}info #status{grid-area:1/1;width:400px;height:150px}info #status #PHASE{width:100%;font-size:30pt;font-weight:700}info #status #PHASE span{float:left;margin-right:10px}info #status #PHASE play{float:right;margin-left:50px}info #status #PHASE play .play{color:#d36a00;width:40px}info #status #PHASE play .play:hover{color:green}info #status #PHASE play .undo{text-align:right;width:40px}info #status #PHASE play .undo:hover{color:green;text-align:left}info #status #PHASE play .redo{width:40px}info #status #PHASE play .redo:hover{color:green;text-align:right}info #status .status{grid-template-columns:1fr 1fr 1fr;place-items:center;width:100%;margin-top:30px;display:grid}info #status .status #PB{color:#000;background-color:#fff;border-radius:100%;outline:10px solid #171716;justify-content:center;align-items:center;width:60px;height:60px;font-family:chess;font-size:40pt;font-weight:700;display:flex;box-shadow:0 0 15px 12px #ad00ad00}info #status .status button{color:red;background-color:#fff;border:3px solid red;border-radius:10px;width:150px;height:45px;margin:20px;font-size:16pt}info #status .status button:hover{color:#fff;cursor:pointer;background-color:red}info #status .status #PW{color:#000;background-color:#fff;border-radius:100%;outline:10px solid #d1d1d1;justify-content:center;align-items:center;width:60px;height:60px;font-family:chess;font-size:40pt;font-weight:700;display:flex;box-shadow:0 0 15px 12px #ad00ad}info .online{text-align:left;grid-area:2/1;width:100%;height:300px;overflow-y:auto}info .online #lobby-status{margin:8px 0;font-size:13pt}info .online #find-opponent,info .online li button{font:inherit;cursor:pointer;background:#fff8e6;border:1px solid #9b6224;border-radius:6px;padding:6px 10px;font-size:14pt}info .online #find-opponent:disabled,info .online li button:disabled{opacity:.55;cursor:default}info .online li button{margin-bottom:4px}info .online peers h4{text-align:left;color:#00f;border-bottom:1px solid #0000008d;width:80%;font-size:20pt}info .online peers ul{margin-top:5px;font-size:15pt;list-style-type:upper-greek}info .online peers peer{margin:10px;font-size:15pt;display:block}info .online peers peer [dcr=b]{color:#000;background-color:#fff;border-radius:100%;outline:3px solid #171716;margin-right:5px;font-family:chess;font-size:15pt;font-weight:700}info .online peers peer [dcr=w]{color:#000;background-color:#fff;border-radius:100%;outline:3px solid #d1d1d1;font-family:chess;font-size:15pt;font-weight:700}info .online peers peer label{color:#00f;border-radius:100%;margin-right:5px;font-family:chess;font-size:20pt;font-weight:700}.chat-box{z-index:5;text-align:center;opacity:.5;background-color:#fff;border:1px solid #ccc;flex-direction:column;grid-template-rows:auto;grid-template-columns:auto auto;width:500px;height:300px;padding:10px;display:flex;box-shadow:0 0 10px #0003}.chat-box:hover{opacity:1}.chat-box .chat-messages{color:#fff;background-color:#000;border:1px solid #ccc;justify-content:center;align-items:center;height:250px;margin-bottom:10px;padding:5px;font-family:Times New Roman,Times,serif,emoji;font-size:15pt;transition:background-color 1s;display:flex;overflow:auto}.chat-box .chat-messages span{word-wrap:true;font-size:13pt}.chat-box .chat-messages .btn-yes,.chat-box .chat-messages .btn-no{cursor:pointer;color:#fff;border:none;border-radius:3px;width:30px;height:15px;margin:0;padding:0;font-size:10pt;display:inline}.chat-box .chat-messages .btn-yes{background-color:#4caf50}.chat-box .chat-messages .btn-no{background-color:#f44336}.chat-box .chat-messages ul{word-wrap:break-word;word-break:break-all;margin:0;padding-left:20px;display:none}.chat-box .chat-messages .form h3{margin:10px;font-size:20pt}.chat-box .chat-messages .form .usernameInput{text-align:center;color:#fff;background-color:#0000;border:none;border-bottom:1px solid #fff;outline:none;width:50%;margin:10px;font-size:15pt;font-weight:700}.chat-box .chat-input-container{height:50px;display:flex}.chat-box .chat-input-container .chat-input{border:1px solid #ccc;flex:1;margin-right:10px;padding:5px;font-family:Times New Roman,Times,serif,emoji;font-size:15pt}.chat-box .chat-input-container .chat-send{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:10px;width:100px;padding:5px 10px;font-size:15pt}.chat-box .chat-input-container .emoji-button{color:#000;cursor:pointer;background-color:#fff;border:none;font-family:emoji;font-size:20pt}.chat-box .chat-input-container unicode-emoji-picker{--emoji-font-family:emoji;z-index:4;display:none;position:absolute;bottom:10px;left:520px}.buttonBox{float:right;display:flex}.buttonBox button,.buttonBox label{background-color:#0000;justify-content:center;align-items:center;width:100px;height:50px;margin-right:20px;font-size:30px;display:flex}.buttonBox #save{color:green;border:3px solid green;border-radius:10px}.buttonBox #save:hover{color:#fff;cursor:pointer;background-color:green}.buttonBox #load{color:purple;border:3px solid purple;border-radius:10px}.buttonBox #load:hover{color:#fff;cursor:pointer;background-color:purple}nav{color:#fff;z-index:3;background-color:#000000d9;grid-area:1/1;width:250px;height:5000px;padding-top:60px;transition:all .5s;display:block;position:fixed;top:0;left:0;overflow-x:hidden}nav .youtube{vertical-align:middle;display:inline-block}nav .youtube img{vertical-align:middle;width:40px;margin-left:10px}nav a,nav label{color:#818181;padding:8px 8px 8px 32px;font-size:25px;text-decoration:none;transition:all .3s;display:block}nav a:hover,nav label:hover{color:#f1f1f1;cursor:pointer}nav .closebtn{margin-left:50px;font-size:36px;position:absolute;top:0;right:25px}capture{display:none}[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed!important}