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