@import "https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap";:root{--light:white;--dark:#825490;--highlight:green}.board_wrapper{aspect-ratio:1;height:100vh;position:relative}.board{flex-direction:var(--col-direction);-webkit-user-select:none;user-select:none;touch-action:none;background-size:cover;height:100%;display:flex;position:relative;overflow:hidden}.board:before{content:"";background-image:var(--bg-img);transform:var(--flip);z-index:-1;background-size:cover;position:absolute;inset:0}.board.blur{filter:blur(3px)}.board .row{flex-direction:var(--row-direction);height:12.5%;display:flex}.board .square{aspect-ratio:1;border-radius:10px;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.board.grabbed{cursor:grabbing}.board .square img{cursor:grab;width:115%;height:115%}.board .square .coordinates.number{color:#000;position:absolute;top:10%;left:6%}.board .square .coordinates.letter{color:#000;position:absolute;bottom:2%;right:10%}.board .square img.wall{filter:blur(3px)}.board.grabbed .square img{cursor:grabbing}@media (width<=700px){.board_wrapper{aspect-ratio:1;width:100vw;height:auto}.board .square{aspect-ratio:1;border-radius:6px;justify-content:center;align-items:center;height:100%;display:flex}}.board .square.legalSquare{position:relative}.board .square.legalSquare:after{content:"";background:linear-gradient(to top left, white, var(--highlight));z-index:11;border-radius:50%;width:25%;height:25%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.board .square.capturableSquare:after{content:"";-webkit-mask-composite:xor;background:linear-gradient(45deg,#fff 10%,green 90%);border-radius:50%;width:70%;height:70%;padding:5px;animation:2s linear infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.board .square.currentTurnOpponents.legalSquare:after{content:"";z-index:11;background:linear-gradient(to top left,#fff,red);border-radius:50%;width:25%;height:25%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.board .square.currentTurnOpponents.capturableSquare:after{content:"";-webkit-mask-composite:xor;background:linear-gradient(45deg,#fff 10%,red 90%);border-radius:50%;width:70%;height:70%;padding:5px;animation:2s linear infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes spin{to{transform:translate(-50%,-50%)rotate(360deg)}}.board .square.selectedSquare{background:radial-gradient(circle,green,#fff)}.board .square.selectedSquare.dark{background:radial-gradient(circle, green, var(--dark))}.board .square.currentTurnOpponents.selectedSquare{background:radial-gradient(circle,red,#fff)}.board .square.currentTurnOpponents.selectedSquare.dark{background:radial-gradient(circle, red, var(--dark))}.board .square.lastMoveSquare{box-shadow:inset 0 0 0 5px #00e000}.board .square.lastTurnOpponents.lastMoveSquare{box-shadow:inset 0 0 0 5px red}.board .square.checkSquare{background:radial-gradient(circle, #f009, var(--light))}.board .square.dark.checkSquare{background:radial-gradient(circle, #f009, var(--dark))}.board .square.markedSquare{background:#ee5353;box-shadow:none!important}.board .square.dark.markedSquare{background:#da4040}.board .square.markedSquare-shift{background:#2cbaf1}.board .square.dark.markedSquare-shift{background:#269bc9}.board .square.markedSquare-alt{background:#e4e416}.board .square.dark.markedSquare-alt{background:#c4c412}.board .square.markedSquare-ctrl{background:#32b732}.board .square.dark.markedSquare-ctrl{background:#219d21}@keyframes ghostPieceAnimation{0%{transform:translate(-50%,-50%)scale(1)}60%{transform:translate(-50%,-50%)scale(1.25)}to{transform:translate(-50%,-50%)scale(1)}}@media (width<=700px){.board .square.lastMoveSquare{box-shadow:inset 0 0 0 2.5px #00e000}.board .square.lastTurnOpponents.lastMoveSquare{box-shadow:inset 0 0 0 2.5px red}}.promotionDiv{aspect-ratio:1;z-index:11;justify-content:center;align-items:center;height:100%;display:flex;position:absolute;top:0;left:0}.promotionDiv .container{justify-content:center;align-items:center;gap:2vw;width:100%;display:flex}.promotionDiv .container img{cursor:pointer;border-radius:20px;width:20%}.restartDiv{aspect-ratio:1;z-index:11;justify-content:center;align-items:center;height:100%;display:flex;position:absolute;top:0;left:0}.restartDiv .container{transform-origin:50%;border-radius:20px;width:60%;animation:.5s ease-out forwards popIn;overflow:hidden}@keyframes popIn{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.05)}to{transform:scale(1)}}.restartDiv .top{color:#fff;background:#3c3a38;flex-direction:column;justify-content:center;align-items:center;padding:2rem 0;display:flex}.restartDiv .top h1{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:3rem}.restartDiv .top h3{color:#d8d7d7;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;font-size:1.3rem}.restartDiv .bottom{background:#262421;justify-content:center;align-items:center;display:flex}.restartDiv .button{margin:2rem}.restartDiv button.close{color:#9f9b9a;cursor:pointer;background:0 0;border:none;font-family:Arial,Helvetica,sans-serif;font-size:2rem;position:absolute;top:10px;right:20px}@media (width<=700px){.restartDiv{width:100vw}.restartDiv .container{width:90%}.promotionDiv{width:100vw}.promotionDiv .container{grid-template-rows:1fr 1fr;grid-template-columns:auto auto;justify-content:center;justify-items:center;gap:4vw;width:100%;padding:16vw;display:grid}.promotionDiv .container img{width:100%}}.button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#00c6ff,#0072ff);border:none;border-radius:10px;width:100%;margin-top:2rem;padding:1rem 2rem;font-size:2rem;font-weight:700;position:relative;overflow:hidden}.button:after{content:"";background:linear-gradient(120deg,#0000,#fff9,#0000);width:100%;height:100%;transition:all .5s;position:absolute;top:0;left:-100%}.button:hover:after{left:100%}@media (width<=700px){.button{border-radius:5px;padding:.8rem 2rem;font-size:1.5rem}}.leftSide .headingContainer{display:none}@media (width<=700px){.leftSide .headingContainer{justify-content:center;display:flex}}.rightSide{background:var(--dark-gray)}.headingContainer{align-items:center;height:10vh;display:flex}.notationContainer{height:60vh}.controlsContainer{height:10vh}.playersContainer{height:20vh}.notationContainer{background:var(--light-gray);border-radius:10px;position:relative}.notationContainer .export{justify-content:end;align-items:center;height:10%;padding-right:1rem;display:flex;position:relative}.notationContainer .export img{cursor:pointer}.notationContainer .export div{display:flex;position:absolute;top:45px;right:0}.notationContainer .export div button{background:var(--dark-gray);color:#fff;cursor:pointer;border:none;border-radius:5px;width:4rem;margin:.2rem;padding:.5rem 1rem}.notationContainer .container{grid-template-columns:2fr 1fr;place-content:start space-around;height:90%;padding:0 2rem 2rem;display:grid;position:relative;overflow:hidden scroll}.notationContainer .container::-webkit-scrollbar{width:4px}.notationContainer .container::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px}.notationContainer .container .box{margin:.8rem 0;display:flex}.notationContainer .container .box h1{font-size:1.7rem;font-weight:400}.notationContainer .container .box h1.check{color:#6cd8ff}.notationContainer .container .box h1.capture{color:#000;background-color:#fff;padding:0 .5rem}.notationContainer .container .box .moveCount{width:1.5rem;margin-right:1rem}.notationContainer .container .box .pgn-1{padding-left:1rem}.controlsContainer{justify-content:space-around;align-items:center;display:flex;position:relative}.controlsContainer div{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;height:100%;display:flex}.controlsContainer div:active{transition:transform .1s;transform:scale(.88)}.controlsContainer img{cursor:pointer;height:80%}.playersContainer{padding-bottom:1rem}.playersContainer .container{background:var(--light-gray);border-radius:10px;flex-direction:column;height:100%;padding:.5rem;display:flex}.player{border-radius:10px;align-items:center;height:50%;padding:.5rem 0;display:flex}.player.smallScreen{display:none}.player.black{flex-direction:row-reverse}.player .profilePhoto{aspect-ratio:1;border:3px solid #fff;border-radius:5px;height:90%;margin:0 .7rem}.player.black .profilePhoto{border:3px solid #000}.player .pawn{border-radius:10px;height:90%}.player .name{font-size:1.7rem;font-weight:400}.pgnfenInputDiv{position:absolute;top:-9vh}.pgnfenInputDiv input{background:var(--dark-gray);color:#fff;border:none;border-radius:7px;height:7vh;padding:1rem 2rem;font-size:1.5rem}.pgnfenInputDiv input:focus{outline:none}@media (width<=700px){.headingContainer{height:calc(var(--unit) * 4)}.notationContainer{height:calc(var(--unit) * 2)}.controlsContainer,.player{height:var(--unit)}.rightSide{flex-direction:column;display:flex;padding:0!important}.notationContainer{background:0 0;padding:1rem 3vw 0}.controlsContainer{height:calc(var(--unit) * 2);align-items:center;display:flex}.notationContainer .container{height:8vh}.notationContainer .export{z-index:999;padding:.5rem;position:absolute;right:20px}.pgnfenInputDiv,.playersContainer{display:none}.player .profilePhoto{height:120%;border:none!important}.player .pawn{display:none}.player .name{font-size:1.7rem}.player.smallScreen{display:flex}.rightSide .headingContainer{display:none}.rightSide{background:var(--light-gray)}.notationContainer{font-size:.5rem!important}.notationContainer .container .box h1{font-size:1.5rem;font-weight:700}.controlsContainer .control{cursor:pointer;background:#ffffff0f;border:none;border-radius:14px;outline:none;flex:1;justify-content:center;align-items:center;height:54px;margin:0 .5rem;display:flex}.pgnfenInputDiv{padding:0;top:-9vh}.pgnfenInputDiv input{width:95vw;height:9vh}}:root{--dark-gray:#21201e;--light-gray:#302e2b}*{box-sizing:border-box;margin:0;padding:0}body{font-optical-sizing:auto;color:#fff;background:var(--light-gray);font-family:Inter Tight,sans-serif}.mainContainer{width:75%;margin:auto;display:flex}.mainContainer .middle{position:relative}.mainContainer .leftSide{display:none}.mainContainer .rightSide{flex:1;padding:0 1rem}.heading{background:linear-gradient(135deg,#fff 0%,#a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.5rem}@media (width<=700px){html{font-size:14px}.mainContainer{--board-size:100vw;--remaining:calc(100dvh - var(--board-size));--unit:calc(var(--remaining) / 10);flex-direction:column;width:100%;height:100dvh}.mainContainer .leftSide{display:block}.mainContainer .rightSide{padding:2rem}.heading{text-align:center}}.homescreen-root{-webkit-user-select:none;user-select:none;cursor:grab;width:100dvw;height:100dvh;transition:opacity .3s;position:fixed;inset:0;overflow:hidden}.homescreen-arc-svg{pointer-events:none;width:100dvw;height:100dvh;position:absolute;inset:0}.homescreen-root.homescreen-dragging{cursor:grabbing}.homescreen-root.homescreen-dimmed{opacity:.3;pointer-events:none}.homescreen-desc-box{pointer-events:none;width:20vw;position:absolute;top:50px;right:200px}.homescreen-desc-name{color:#ffffffe6;margin-bottom:7px;font-size:40px;line-height:1.3}.homescreen-desc-body{color:#ffffff80;margin-bottom:12px;font-size:18px;line-height:1.3}.homescreen-desc-button{text-align:center;cursor:pointer;pointer-events:auto;background:#000;border:1px solid #000;border-radius:5px;width:100%;padding:1rem 0;font-size:1.5rem}.homescreen-label-wrapper{pointer-events:none;position:absolute;transform:translate(-50%,-50%)}.homescreen-label-text{white-space:nowrap;text-align:center;transition:color .12s,letter-spacing .12s;display:block}@media (width<=640px){.homescreen-desc-box{width:50vw;top:30px;right:30px}.homescreen-desc-name{font-size:30px}.homescreen-desc-body{font-size:14px}}.setup-backdrop{z-index:100;opacity:0;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.setup-backdrop--in{opacity:1}.setup-panel{opacity:0;background:#0e0e0ef7;border:.5px solid #ffffff1a;border-radius:16px;width:min(560px,88vw);max-height:94dvh;transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);overflow:hidden auto;transform:translateY(28px)scale(.96)}.setup-panel--in{opacity:1;transform:translateY(0)scale(1)}.setup-header{align-items:center;gap:14px;padding:24px 24px 20px;display:flex}.setup-back{color:#ffffff8c;cursor:pointer;background:0 0;border:.5px solid #ffffff26;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s,color .15s;display:flex}.setup-back:hover{color:#ffffffe6;background:#ffffff12}.setup-variant-name{color:#ffffffeb;font-size:22px;font-weight:600;line-height:1.2}.setup-divider{background:#ffffff12;height:.5px}.setup-body{flex-direction:column;gap:14px;padding:24px;display:flex}.setup-body--mode{gap:20px;padding:32px 24px}.setup-body--online{align-items:center;gap:0;padding:28px 24px 32px}.setup-body--online .setup-tab-row,.setup-body--online .setup-start-btn{width:100%}.setup-mode-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.setup-mode-btn{cursor:pointer;color:#ffffffb3;background:#ffffff08;border:.5px solid #ffffff1a;border-radius:12px;flex-direction:column;align-items:center;gap:10px;padding:28px 16px 22px;transition:background .15s,border-color .15s,transform .12s;display:flex}.setup-mode-btn:hover{background:#ffffff12;border-color:#ffffff38;transform:translateY(-2px)}.setup-mode-btn:active{transform:translateY(0)scale(.98)}.setup-mode-icon{color:#fff9}.setup-mode-label{color:#ffffffe6;font-size:17px;font-weight:600}.setup-mode-sub{color:#ffffff52;font-size:12px}.setup-field-group{flex-direction:column;gap:7px;display:flex}.setup-field-label{color:#ffffff61;text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:7px;font-size:12px;display:flex}.setup-field-color{border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block}.setup-field-color--white{background:#fff;box-shadow:0 0 0 1px #ffffff40}.setup-field-color--black{background:#2a2a2a;border:1px solid #ffffff2e}.setup-input{color:#ffffffd9;box-sizing:border-box;background:#ffffff0d;border:.5px solid #ffffff1f;border-radius:8px;outline:none;width:100%;padding:13px 15px;font-size:16px;transition:border-color .15s,background .15s}.setup-input::placeholder{color:#ffffff2e}.setup-input:focus{background:#ffffff12;border-color:#ffffff47}.setup-start-btn{color:#000;cursor:pointer;box-sizing:border-box;background:#ffffffeb;border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;min-height:52px;padding:15px 0;font-size:16px;font-weight:700;transition:background .15s,transform .12s;display:flex}.setup-start-btn:hover{background:#fff}.setup-start-btn:active{transform:scale(.98)}.setup-start-btn--disabled{color:#00000059;cursor:not-allowed;background:#ffffff26}.setup-start-btn--disabled:hover{background:#ffffff26}.setup-start-btn--waiting{color:#fff9;cursor:default;background:#ffffff14;border:.5px solid #ffffff1f}.setup-start-btn--waiting:hover{background:#ffffff14}.waiting-label{align-items:center;gap:0;display:flex}.waiting-dots{gap:1px;margin-left:2px;display:inline-flex}.waiting-dots span{opacity:0;font-size:18px;line-height:1;animation:1.4s infinite dot-fade}.waiting-dots span:first-child{animation-delay:0s}.waiting-dots span:nth-child(2){animation-delay:.22s}.waiting-dots span:nth-child(3){animation-delay:.44s}@keyframes dot-fade{0%,60%,to{opacity:0}30%{opacity:1}}.setup-tab-row{background:#ffffff0a;border:.5px solid #ffffff1a;border-radius:8px;gap:0;padding:3px;display:flex}.setup-tab{color:#ffffff61;cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:10px 0;font-size:14px;transition:background .15s,color .15s}.setup-tab--active{color:#ffffffe6;background:#ffffff1a;font-weight:500}.setup-room-code-row--create{justify-content:center;align-items:center;gap:10px;display:flex}.setup-room-code--centered{gap:6px;width:fit-content;display:flex}.setup-room-code{flex:1;gap:6px;margin:30px 0;display:flex}.setup-room-char{color:#ffffffe6;background:#ffffff0d;border:.5px solid #ffffff1f;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:48px;font-size:20px;font-weight:700;display:flex}.setup-room-char--input{color:#ffffffe6;text-align:center;caret-color:#0000;text-transform:uppercase;cursor:text;background:#ffffff0d;border:.5px solid #ffffff1f;border-radius:8px;outline:none;flex-shrink:0;width:44px;height:48px;padding:0;font-size:20px;font-weight:700;transition:border-color .15s,background .15s}.setup-room-char--input:focus{background:#ffffff14;border-color:#ffffff59}.setup-copy-wrap{flex-shrink:0;position:relative}.setup-copy-btn{color:#ffffff80;cursor:pointer;background:#ffffff0a;border:.5px solid #ffffff1f;border-radius:7px;justify-content:center;align-items:center;width:34px;height:34px;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.setup-copy-btn:hover{color:#fffc;background:#ffffff14;border-color:#fff3}.setup-copy-btn--copied{color:#78dc96e6;background:#78dc960f;border-color:#78dc9640}.setup-copy-toast{color:#78dc96f2;white-space:nowrap;pointer-events:none;z-index:10;background:#1e1e1ef7;border:.5px solid #ffffff24;border-radius:6px;padding:5px 10px;font-size:12px;animation:.18s cubic-bezier(.22,1,.36,1) toast-in;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.setup-copy-toast:after{content:"";border:5px solid #0000;border-top-color:#ffffff24;position:absolute;top:100%;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (width<=640px){.setup-panel{border-radius:14px;width:94vw;max-height:90dvh}.setup-header{padding:18px 18px 14px}.setup-variant-name{font-size:19px}.setup-body{gap:12px;padding:18px}.setup-body--mode{padding:24px 18px}.setup-body--online{padding:22px 18px 26px}.setup-room-char,.setup-room-char--input{width:38px;height:44px;font-size:18px}.setup-copy-btn{width:30px;height:30px}.setup-start-btn{min-height:48px;padding:14px 0;font-size:15px}.setup-input{padding:12px 13px;font-size:15px}.setup-room-code{flex:1;gap:6px;margin:18px 0;display:flex}}