.error-message{padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);color:var(--clr-text-primary);background-color:var(--clr-error);position:fixed;z-index:1000;top:1rem;left:50%;translate:-50% 0;border-radius:var(--br-primary)}.friend-request-notification{padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);color:var(--clr-text-primary);background-color:var(--clr-bg-300);position:fixed;z-index:1000;top:1rem;left:50%;translate:-50% 0;border-radius:var(--br-primary);display:flex;align-items:center;justify-content:center;width:min(100% - 2rem,fit-content)}.friend-request-notification span{width:15rem}.friend-request-notification .buttons{display:flex;gap:.5rem;margin-left:.5rem}.friend-request-notification button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;color:var(--clr-text-primary)}.friend-request-notification .accept{background-color:var(--clr-accent)}.friend-request-notification .decline{background-color:var(--clr-error)}.game-request-notification{padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);color:var(--clr-text-primary);background-color:var(--clr-bg-300);position:fixed;z-index:1000;top:1rem;left:50%;translate:-50% 0;border-radius:var(--br-primary);display:flex;align-items:center;justify-content:center;gap:1rem;width:min(100% - 2rem,fit-content)}.game-request-notification span{width:max-content;max-width:calc(100% - 2rem)}.game-request-notification .buttons{display:flex;gap:.5rem;margin-left:.5rem}.game-request-notification button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;color:var(--clr-text-primary)}.game-request-notification .accept{background-color:var(--clr-accent)}.game-request-notification .decline{background-color:var(--clr-error)}.message-notification{padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);color:var(--clr-text-primary);background-color:var(--clr-bg-300);position:fixed;z-index:1000;top:1rem;left:50%;translate:-50% 0;border-radius:var(--br-primary);display:flex;align-items:center;justify-content:center;width:min(100% - 2rem,fit-content)}.friends-menu{position:static;display:flex;justify-content:center;align-items:center;flex-direction:column;width:min(100%,18rem);margin-inline:auto;z-index:1000;color:var(--clr-text-primary);text-align:center;margin-top:4rem}@media (min-width: 40em){.friends-menu{visibility:hidden;position:absolute;translate:-50% 0;width:10rem;padding:1rem;border-radius:var(--br-primary);background-color:var(--clr-bg-200);top:2.5rem;left:50%;margin-top:0}}.friends-menu .friends-list{margin-top:.5rem;overflow-y:auto;max-height:15rem;width:100%}.friends-menu .friends-list li{list-style:none;display:flex;align-items:center;justify-content:center;border-radius:var(--br-primary)}.friends-menu .friends-list li a{text-decoration:none;color:var(--clr-text-primary);padding:.5rem;width:100%}.friends-menu .friends-list li:hover{background-color:var(--clr-bg-300)}.friends-menu form{width:100%;margin-top:.5rem}.friends-menu__input-wrapper{--inactive-decor-color: var(--clr-neutral-100);--active-decor-color: var(--clr-neutral-100);width:100%;position:relative}.friends-menu__input-wrapper:after{content:"";position:absolute;width:4px;height:50%;background-color:var(--inactive-decor-color);top:50%;right:0;translate:0 -50%;border-radius:var(--br-primary) 0 0 var(--br-primary);transition:width .25s ease-in-out}.friends-menu__input-wrapper:focus-within:after{background-color:var(--active-decor-color);width:12px}.friends-menu__input-wrapper input{display:block;width:100%;padding:.75em 1em;background-color:var(--clr-bg-300);border:none;border-radius:var(--br-primary);color:var(--clr-text-primary);outline:none}.friends-menu button{margin-top:.5rem;font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:100%;background-color:var(--clr-primary);color:var(--clr-text-primary)}.friends-menu .friends-menu__error{color:var(--clr-error);margin-top:.5rem}@media (min-width: 40em){.friends-menu:before{content:"";position:absolute;top:0;left:50%;translate:-50% -50%;width:2rem;height:1rem;border-radius:var(--br-primary);background-color:var(--clr-bg-200)}}nav{padding:1rem 2rem;width:100%;display:flex;justify-content:space-between;align-items:center}nav .logo{width:8rem}nav .right-elements{display:none;justify-content:center;align-items:center;gap:1.25rem}@media (min-width: 40em){nav .right-elements{display:flex}}nav .right-elements .username{color:var(--clr-text-primary);font-size:var(--fs-500);font-weight:700;text-decoration:none}nav .right-elements .friends{background-color:transparent;border:none;position:relative}nav .right-elements .friends img{height:1.25rem}@media (min-width: 40em){nav .right-elements .friends:after{content:"";position:absolute;bottom:0;left:50%;translate:-50% 50%;width:2rem;height:2rem;background-color:transparent}nav .right-elements .friends:hover .friends-menu{visibility:visible}}nav .right-elements .log-out{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;color:var(--clr-text-primary);background-color:var(--clr-primary)}nav .toggle-mobile-nav{width:1.5rem;height:1.5rem;background-color:transparent;border:none;cursor:pointer;z-index:2500}@media (min-width: 40em){nav .toggle-mobile-nav{display:none}}nav.mobile-nav-expanded .right-elements{display:grid;grid-template-areas:"friends friends" "username logout";grid-template-columns:1fr auto;grid-template-rows:1fr auto;position:fixed;inset:0;background-color:var(--clr-bg-100);padding:2rem;z-index:2000}@media (min-width: 40em){nav.mobile-nav-expanded .right-elements{display:flex;position:static;inset:unset;background-color:transparent;padding:unset}}nav.mobile-nav-expanded .right-elements .friends{width:100%;height:100%;grid-area:friends}@media (min-width: 40em){nav.mobile-nav-expanded .right-elements .friends{width:unset;height:unset}}nav.mobile-nav-expanded .right-elements .friends img{display:none}@media (min-width: 40em){nav.mobile-nav-expanded .right-elements .friends img{display:unset}}nav.mobile-nav-expanded .right-elements .username{grid-area:username}nav.mobile-nav-expanded .right-elements .log-out{grid-area:logout}.pawn-promoter{height:50%;width:12.5%;position:absolute;background:var(--clr-neutral-100);display:flex;z-index:1000;box-shadow:0 0 6px var(--clr-bg-200)}.pawn-promoter>*{aspect-ratio:1;width:100%;cursor:pointer}.pawn-promoter>*:hover{background-color:var(--clr-neutral-200)}.square-highlight{width:12.5%;aspect-ratio:1;position:absolute;pointer-events:none;z-index:1}.square-highlight.selected-piece,.square-highlight.previous-move{background-color:var(--clr-board-highlight);opacity:.5}.square-highlight.legal-move{background-color:transparent;z-index:2;overflow:hidden}.square-highlight.legal-move:after{content:"";display:block;position:absolute;background-color:var(--clr-bg-100);mix-blend-mode:multiply;opacity:.2;width:35%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;border-radius:1000vmax}.square-highlight.legal-move.on-piece-square:after{width:100%;background-color:transparent;box-shadow:0 0 0 1000vmax var(--clr-bg-100)}.square-highlight.hover-square{background-color:var(--clr-board-highlight);opacity:.25}.board-container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:1rem}.board{width:min(100%,30rem,60vh);aspect-ratio:1;margin-inline:auto;border-radius:var(--br-primary);position:relative}.board:focus{outline:none}@media (min-width: 55em){.board{width:100%}}.squares{width:100%;height:100%;overflow:hidden;border-radius:var(--br-primary);pointer-events:none}.row{width:100%;display:flex}.square{width:12.5%;aspect-ratio:1;background-color:var(--clr-tile-light)}.row:nth-child(2n+1) .square:nth-child(2n),.row:nth-child(2n) .square:nth-child(2n+1){background:var(--clr-tile-dark)}.controls{width:min(100%,30rem,60vh);display:flex;align-items:center;justify-content:space-between}@media (min-width: 55em){.controls{width:100%}}.controls button{width:2rem;height:2rem;border:none;background-color:transparent;display:flex;justify-content:center;align-items:center;cursor:pointer}.controls button img{height:75%}.controls button:hover{opacity:.8}.controls button.disabled{opacity:.5;cursor:default}.controls button.disabled:hover{opacity:.5}.controls .right-buttons{display:flex;gap:.5rem}.piece{position:absolute;width:12.5%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}.sideline ul{position:unset;display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;row-gap:0;padding:.25rem}.sideline__move-group{display:flex;gap:.25rem}.sideline__move{cursor:pointer;padding:0 .25rem}.sideline__move.highlighted{font-weight:700;background-color:var(--clr-neutral-600);border-radius:var(--br-primary)}.sideline__move-counter{cursor:default}.live-moves{width:100%;height:100%;background-color:var(--clr-bg-200);border-radius:var(--br-primary);padding:1rem;color:var(--clr-neutral-100);display:flex;flex-direction:column}.live-moves *{flex:0 0 auto}.live-moves .moves-wrapper{height:auto;flex-grow:1;position:relative;display:flex;flex-direction:column-reverse;overflow-y:auto}.live-moves__moves-list{position:absolute;inset:0;display:flex;flex-direction:column;counter-reset:move-counter;list-style:none;width:100%;padding-block:.5rem;overflow-y:auto}.live-moves__move-group{display:grid;grid-template-columns:3rem 1fr 1fr;width:100%;gap:1rem;counter-increment:move-counter;align-items:center;padding:.5rem}.live-moves__move-group:before{content:attr(data-move-number);text-align:center;font-weight:700}.live-moves__move-group:nth-child(2n-1){background-color:var(--clr-bg-300);border-radius:var(--br-primary)}.live-moves__move{cursor:pointer;width:fit-content;padding:.125rem .5rem}.live-moves__move.highlighted{font-weight:700;background-color:var(--clr-neutral-600);border-radius:var(--br-primary)}.player-info{display:flex;align-items:center;width:min(100%,30rem,60vh);padding:1rem;margin-top:1rem;margin-inline:auto;background-color:var(--clr-bg-200);font-weight:700;position:relative;overflow:hidden;border-radius:var(--br-primary);--time-percent: 0;--bar-color: var(--clr-neutral-600);--time-color: var(--clr-neutral-400);color:var(--clr-text-primary)}@media (min-width: 55em){.player-info{width:100%}}@media (min-width: 55em){.player-info.top{border-radius:var(--br-primary)}}@media (min-width: 55em){.player-info.bottom{border-radius:var(--br-primary) var(--br-primary)}}.player-info:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background-color:var(--clr-bg-300)}.player-info:after{content:"";position:absolute;left:0;right:calc(100% - var(--time-percent) * 100%);top:0;height:6px;background-color:var(--bar-color);transition:right .25s linear}.player-info a{text-decoration:none}.player-info__username{color:var(--clr-text-primary)}.player-info__left{display:flex;flex-direction:column;gap:.125rem}.player-info__bottom{display:flex;align-items:center;gap:.25rem}.player-info__pieces{height:1.5rem;display:flex}.player-info__piece-group{display:flex;align-items:center}.player-info__piece-group+.player-info__piece-group{margin-left:-.25rem}.player-info__piece{height:1.5rem}.player-info__piece+.player-info__piece{margin-left:-1rem}.player-info.active{--bar-color: var(--clr-primary);--time-color: var(--clr-text-primary)}.top-lines{background-color:var(--clr-bg-200);color:var(--clr-text-primary);height:100%;border-radius:var(--br-primary);padding:1rem}.top-lines .lines{margin-top:1rem}.top-lines__line{display:grid;grid-template-columns:7ch 1fr;column-gap:.75rem}.top-lines__line+.top-lines__line{margin-top:.5rem}.top-lines__line__eval{padding:.125rem .25rem;display:flex;align-items:center;justify-content:center;font-weight:700;height:fit-content;color:var(--clr-neutral-900);background-color:var(--clr-neutral-100);border-radius:var(--br-primary)}.top-lines__line__eval.black-adv{color:var(--clr-neutral-100);background-color:var(--clr-neutral-900)}.top-lines__line__moves{display:flex;list-style:none;flex-wrap:wrap;column-gap:.5rem;--row-height: 1.25rem;max-height:calc(var(--row-height) * 3);overflow:hidden}.top-lines__line__moves *{height:var(--row-height)}.top-lines__line__move-group{display:flex;gap:.25rem}.spinner{animation:spinner-loading 1s ease infinite}@keyframes spinner-loading{0%{rotate:0}to{rotate:360deg}}.loading{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:1rem}.loading__message{text-align:center;color:var(--clr-text-primary);font-size:var(--fs-500);max-width:50ch;text-wrap:balance}.analyze{display:flex;flex-direction:column;height:100%}.analyze__container{width:100%;height:100%}@media (min-width: 55em){.analyze__container{display:grid;grid-template-areas:"moves eval board topinfo" "moves eval board bottominfo" "moves eval board toplines" "moves eval board toplines";grid-template-columns:1fr 2rem min(100%,30rem,75vh) 1fr;grid-template-rows:min-content min-content 1fr 40%;overflow-y:hidden}}@media (min-width: 55em){.analyze__container.show-games{grid-template-areas:"moves eval board topinfo" "moves eval board bottominfo" "moves eval board toplines" "games eval board toplines"}}.analyze-moves-container{padding:1rem;grid-area:moves;height:20rem}@media (min-width: 55em){.analyze-moves-container{height:unset}}.past-games-container{grid-area:games;padding:1rem;padding-top:0;height:20rem;margin-top:2rem}@media (min-width: 55em){.past-games-container{height:100%;margin-top:0}}.past-games-container .past-games{background-color:var(--clr-bg-200);width:100%;height:100%;border-radius:var(--br-primary)}.eval-container{grid-area:eval;padding-block:1rem;display:flex;align-items:center;justify-content:center}@media (min-width: 55em){.eval-container{padding-inline:0}}.eval-container .eval{background-color:var(--clr-bg-200);height:1.5rem;border-radius:var(--br-primary);width:min(100%,30rem,60vh);overflow:hidden;position:relative}@media (min-width: 55em){.eval-container .eval{height:100%;width:100%}}.eval-container .eval .white-bar{inset:0;position:absolute;background-color:var(--clr-neutral-100);translate:var(--translate) 0;transition:translate .25s}@media (min-width: 55em){.eval-container .eval .white-bar{translate:0 calc(-1 * var(--translate))}}.eval-container .eval__number{position:absolute;left:var(--start);right:var(--end);top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-weight:700}@media (min-width: 55em){.eval-container .eval__number{left:0;right:0;top:var(--end);bottom:var(--start)}}.top-lines-container{grid-area:toplines;padding:1rem}.past-games{padding:1rem;color:var(--clr-text-primary);position:relative;overflow:auto}.past-games .past-game{list-style:none}.past-games .past-game a{text-decoration:none;display:flex;justify-content:space-between;border-radius:var(--br-primary);padding:.5rem}.past-games .past-game a:hover{background-color:var(--clr-bg-300);cursor:pointer}.past-games .past-game span{color:var(--clr-text-primary);font-weight:700}.past-games .past-game span.win{color:var(--clr-accent)}.past-games .past-game span.loss{color:var(--clr-error)}.past-games .past-game span.draw{color:var(--clr-neutral-200)}.past-games .no-games{position:absolute;top:50%;left:50%;translate:-50% -50%;font-size:var(--fs-500);text-align:center;text-wrap:balance}.home{display:flex;flex-direction:column;height:100%}.home__main{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1rem;flex-wrap:wrap;gap:1rem}@media (min-width: 40em){.home__main{flex-direction:row}}.home__main button{width:12rem;height:12rem;border:none;background-color:var(--clr-bg-200);border-radius:var(--br-primary);cursor:pointer;padding:.5rem;transition:padding .25s ease;display:flex;align-items:center;justify-content:center}.home__main button img{width:95%;transition:width .25s ease}.home__main button:hover img{width:100%}.play-home{display:flex;flex-direction:column;height:100%}.play-home__main{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1rem;flex-wrap:wrap;gap:1rem}@media (min-width: 40em){.play-home__main{flex-direction:row}}.play-home__main a{width:12rem;height:12rem;border:none;background-color:var(--clr-bg-200);border-radius:var(--br-primary);cursor:pointer;padding:.5rem;transition:padding .25s ease;display:flex;align-items:center;justify-content:center}.play-home__main a img{width:95%;transition:width .25s ease}.play-home__main a:hover img{width:100%}.not-found{display:flex;align-items:center;justify-content:center;color:var(--clr-text-primary);height:100%;width:100%;font-size:3rem}.profile__game-modal{position:absolute;inset:0;background-color:#000000b3;z-index:1000;display:flex;justify-content:center;align-items:center}.profile__game-modal__main{display:flex;justify-content:center;align-items:center;gap:1rem;--accent-color: var(--clr-neutral-400);position:absolute;width:min(100% - 2rem,20rem);padding:1rem;border-radius:var(--br-primary);flex-wrap:wrap;background-color:var(--clr-bg-200)}.profile__game-modal__input{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;font-weight:700;flex-wrap:nowrap}.profile__game-modal__input:focus-within{--accent-color: var(--clr-accent)}.profile__game-modal__input label{color:var(--accent-color);transition:color .15s ease}.profile__game-modal input{width:4rem;font-size:2rem;text-align:center;outline:none;background-color:transparent;color:var(--clr-text-primary);border:none;border-bottom:3px solid var(--accent-color);transition:border-bottom .15s ease}.profile__game-modal button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background-color:var(--clr-primary);color:var(--clr-text-primary)}.profile__container{color:var(--clr-text-primary);padding-inline:1rem;display:grid;position:relative}@media (min-width: 40em){.profile__container{grid-template-columns:1fr 10rem;padding-inline:8rem}}.profile__container h2{font-size:var(--fs-800)}.profile__container *+h3{font-size:var(--fs-600);margin-top:2rem;font-weight:400}.profile__name__top{display:flex;align-items:center;gap:2rem;margin-top:2rem}.profile__buttons{display:flex;gap:.5rem}.profile__buttons button{border-radius:var(--br-primary);background-color:var(--clr-primary);padding:.5rem .75rem;font-weight:700;color:var(--clr-text-primary);cursor:pointer;border:none}.profile__buttons .profile__remove-friend{background-color:var(--clr-error)}.profile__buttons .profile__friend-request-sent{border-radius:var(--br-primary);background-color:var(--clr-bg-300);padding:.5rem .75rem;font-weight:700;color:var(--clr-text-primary);border:none}.profile__past-games{color:var(--clr-text-primary);position:relative;overflow:auto;margin-top:1rem;max-width:40rem}.profile__past-games .past-game{list-style:none}.profile__past-games .past-game a{text-decoration:none;display:flex;justify-content:space-between;border-radius:var(--br-primary);padding:.5rem}.profile__past-games .past-game a:hover{background-color:var(--clr-bg-300);cursor:pointer}.profile__past-games .past-game span{color:var(--clr-text-primary);font-weight:700}.profile__past-games .past-game span.win{color:var(--clr-accent)}.profile__past-games .past-game span.loss{color:var(--clr-error)}.profile__past-games .past-game span.draw{color:var(--clr-neutral-200)}.profile__past-games .no-games{position:absolute;top:50%;left:50%;translate:-50% -50%;font-size:var(--fs-500);text-align:center;text-wrap:balance}.profile__friends{background-color:var(--clr-bg-200);border-radius:var(--br-primary);width:100%;height:100%;display:none;padding:1rem}.profile__friends h3{font-size:var(--fs-600)}@media (min-width: 40em){.profile__friends{display:unset}}.profile__friends__list{display:flex;align-items:center;flex-direction:column;margin-top:1rem}.profile__friends li{list-style:none}.profile__friends a{text-decoration:none;color:var(--clr-text-primary);padding:.5rem .75rem;display:flex;justify-content:center;align-items:center;cursor:pointer;width:fit-content;border-radius:var(--br-primary)}.profile__friends a:hover{background-color:var(--clr-bg-300)}.login-demo-notification{padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);color:var(--clr-text-primary);background-color:var(--clr-bg-300);position:fixed;z-index:1000;top:1rem;left:50%;translate:-50% 0;border-radius:var(--br-primary);display:flex;align-items:center;justify-content:center;width:min(100% - 2rem,fit-content);gap:.5rem}.login-demo-notification span{width:max-content}.login-demo-notification button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;color:var(--clr-text-primary);background-color:var(--clr-primary);white-space:nowrap}.login{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1rem;flex-wrap:wrap}.login .logo{width:min(75%,10rem)}.login .login-container{background-color:var(--clr-bg-200);border-radius:var(--br-primary);padding:2rem;margin-top:1rem;margin-inline:1rem}.login .login-container>*+*{margin-top:2rem}.login .local-login .input-wrapper{--inactive-decor-color: var(--clr-neutral-100);--active-decor-color: var(--clr-neutral-100);width:100%;position:relative}.login .local-login .input-wrapper:after{content:"";position:absolute;width:4px;height:50%;background-color:var(--inactive-decor-color);top:50%;right:0;translate:0 -50%;border-radius:var(--br-primary) 0 0 var(--br-primary);transition:width .25s ease-in-out}.login .local-login .input-wrapper:focus-within:after{background-color:var(--active-decor-color);width:12px}.login .local-login .input-wrapper input{display:block;width:100%;padding:.75em 1em;background-color:var(--clr-bg-300);border:none;border-radius:var(--br-primary);color:var(--clr-text-primary);outline:none}.login .local-login>*+*{margin-top:1rem}.login .local-login button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;border:none;background-color:var(--clr-primary);color:var(--clr-text-primary)}.login hr{height:1px;background-color:var(--clr-neutral-100);position:relative;overflow:visible;border:none}.login hr:after{content:"OR";position:absolute;background-color:var(--clr-bg-200);padding:.5rem;color:var(--clr-text-primary);font-weight:700;top:50%;left:50%;translate:-50% -50%}.login .provider-logins>*+*{margin-top:1rem}.login .provider-logins button{border:none;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border-radius:var(--br-primary);font-weight:700;padding:0 var(--fs-400)}.login .provider-logins button img{height:1.25rem}.login .provider-logins button span{padding:calc(var(--fs-400) * 3 / 4) 0}.login .provider-logins--google{background-color:#fff;color:#000}.login .provider-logins--github{background-color:#24292f;color:#fff}.login .sign-up-msg{margin-top:1rem;color:var(--clr-text-primary)}.login .sign-up-msg a{text-decoration:none;color:var(--clr-primary)}.set-username{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:"column";padding:1rem;flex-wrap:wrap}.input-container{padding:1rem;background-color:var(--clr-bg-200);border-radius:var(--br-primary);display:flex;gap:1rem}.input-container button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background-color:var(--clr-primary);color:var(--clr-text-primary);position:relative}.input-container button .spinner{position:absolute;left:50%;top:50%;translate:-50% -50%}.input-wrapper{--inactive-decor-color: var(--clr-neutral-100);--active-decor-color: var(--clr-neutral-100);width:100%;position:relative}.input-wrapper:after{content:"";position:absolute;width:4px;height:50%;background-color:var(--inactive-decor-color);top:50%;right:0;translate:0 -50%;border-radius:var(--br-primary) 0 0 var(--br-primary);transition:width .25s ease-in-out}.input-wrapper:focus-within:after{background-color:var(--active-decor-color);width:12px}.input-wrapper input{display:block;width:100%;padding:.75em 1em;background-color:var(--clr-bg-300);border:none;border-radius:var(--br-primary);color:var(--clr-text-primary);outline:none}.sign-up{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1rem;flex-wrap:wrap}.sign-up .logo{width:min(75%,10rem)}.sign-up .sign-up-container{background-color:var(--clr-bg-200);border-radius:var(--br-primary);padding:2rem;margin-top:1rem;display:flex;gap:2rem}.sign-up .local-sign-up .input-wrapper{--inactive-decor-color: var(--clr-neutral-100);--active-decor-color: var(--clr-neutral-100);width:100%;position:relative}.sign-up .local-sign-up .input-wrapper:after{content:"";position:absolute;width:4px;height:50%;background-color:var(--inactive-decor-color);top:50%;right:0;translate:0 -50%;border-radius:var(--br-primary) 0 0 var(--br-primary);transition:width .25s ease-in-out}.sign-up .local-sign-up .input-wrapper:focus-within:after{background-color:var(--active-decor-color);width:12px}.sign-up .local-sign-up .input-wrapper input{display:block;width:100%;padding:.75em 1em;background-color:var(--clr-bg-300);border:none;border-radius:var(--br-primary);color:var(--clr-text-primary);outline:none}.sign-up .local-sign-up>*+*{margin-top:1rem}.sign-up .local-sign-up button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;border:none;background-color:var(--clr-primary);color:var(--clr-text-primary)}.sign-up hr{width:1px;background-color:var(--clr-neutral-100);position:relative;overflow:visible;border:none}.sign-up hr:after{content:"OR";position:absolute;background-color:var(--clr-bg-200);padding:.5rem;color:var(--clr-text-primary);font-weight:700;top:50%;left:50%;translate:-50% -50%}.sign-up .provider-sign-ups{display:flex;align-items:center;justify-content:center;flex-direction:column}.sign-up .provider-sign-ups>*+*{margin-top:1rem}.sign-up .provider-sign-ups button{border:none;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border-radius:var(--br-primary);font-weight:700;padding:0 var(--fs-400)}.sign-up .provider-sign-ups button img{height:1.25rem}.sign-up .provider-sign-ups button span{padding:calc(var(--fs-400) * 3 / 4) 0}.sign-up .provider-sign-ups--google{background-color:#fff;color:#000}.sign-up .provider-sign-ups--github{background-color:#24292f;color:#fff}.sign-up .log-in-msg{margin-top:1rem;color:var(--clr-text-primary)}.sign-up .log-in-msg a{text-decoration:none;color:var(--clr-primary)}.choose-bot-container .choose-bot{height:100%;background-color:var(--clr-bg-200);border-radius:var(--br-primary);color:var(--clr-text-primary);padding:1rem;display:flex;flex-direction:column}.choose-bot-container .bot-choices{margin-top:1rem;display:flex;align-items:center;justify-content:center;width:100%;flex-direction:row;overflow:auto}@media (min-width: 55em){.choose-bot-container .bot-choices{flex-direction:column}}.choose-bot-container .bot-choices input{position:fixed;opacity:0;pointer-events:none}.choose-bot-container .bot-choices label{padding:.75rem 1rem;display:flex;justify-content:center;align-items:center;cursor:pointer;width:fit-content;border-radius:var(--br-primary)}.choose-bot-container .bot-choices input:checked+label{background-color:var(--clr-bg-300)}.choose-bot-container h3{margin-top:1.5em}.choose-bot-container button{font-size:var(--fs-500);border-radius:var(--br-primary);padding:calc(var(--fs-500) * 3 / 4) var(--fs-500);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:1rem;border:none;background-color:var(--clr-primary);color:var(--clr-text-primary);margin-inline:auto}@media (min-width: 55em){.choose-bot-container button{margin-top:auto}}.choose-bot-container button.inactive{cursor:default;background-color:var(--clr-bg-300)}.game-over{inset:0;position:absolute;display:flex;justify-content:center;align-items:center;color:var(--clr-text-primary);background-color:#0d0b0ebf;backdrop-filter:blur(2px);z-index:1003}.game-over-modal{width:min(20rem,100% - 1rem);display:flex;position:relative;overflow:hidden;background-color:#fff;flex-direction:column;border-radius:var(--br-primary)}.game-over-modal .exit-modal{position:absolute;right:1rem;top:1rem;width:1rem;height:1rem;background-color:transparent;border:none;cursor:pointer}.game-over-modal .game-over__text{padding:1rem;width:100%;text-align:center}.game-over-modal .game-over__text .main-message{font-size:2rem}.game-over-modal[data-status=won] .game-over__text{background-color:var(--clr-primary)}.game-over-modal[data-status=lost] .game-over__text,.game-over-modal[data-status=drawn] .game-over__text{background-color:var(--clr-neutral-400)}.game-over-modal .game-over__buttons{display:flex;padding:1rem;justify-content:center;align-items:center;width:100%;gap:1rem}.game-over-modal a,.game-over-modal .new-game{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background-color:var(--clr-primary);color:var(--clr-text-primary);display:block;text-decoration:none;text-align:center;width:50%}.game-over-modal .new-game{background-color:var(--clr-neutral-400)}.bot-game{display:flex;flex-direction:column;height:100%}.bot-game__container{width:100%;height:100%}@media (min-width: 55em){.bot-game__container{display:grid;grid-template-areas:"moves board topinfo" "moves board bottominfo" "moves board resign" "moves board chat";grid-template-columns:1fr min(100%,30rem,75vh) 1fr;grid-auto-rows:min-content min-content min-content 1fr;column-gap:1rem;overflow-y:hidden}}.bot-moves-container{padding:1rem;grid-area:moves;height:20rem}@media (min-width: 55em){.bot-moves-container{height:unset}}.player-info-container{padding-inline:1rem}.player-info-container.top{grid-area:topinfo}.player-info-container.bottom{grid-area:bottominfo}.resign-container{grid-area:resign;display:flex;justify-content:center;align-items:center}.resign-container .resign{background-color:var(--clr-bg-200);border-radius:var(--br-primary);padding:.75rem;display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;border:none;height:3rem;color:var(--clr-text-primary);max-width:100%;cursor:pointer}.resign-container .resign img{height:100%}.choose-bot-container{grid-row:1/5;grid-column:3/3;padding:1rem}.chat{background-color:var(--clr-bg-200);border-radius:var(--br-primary);padding:1rem;height:100%;color:var(--clr-text-primary);display:flex;flex-direction:column}.chat *{flex:0 0 auto}.chat__window{width:100%;height:auto;position:relative;overflow-y:hidden;flex-grow:1;margin-top:.5rem}.chat__window:after{content:"";position:absolute;left:0;top:0;right:0;height:min(30%,5rem);background:linear-gradient(to bottom,var(--clr-bg-200),transparent)}.chat__window .chat__messages{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column-reverse}.chat__input-wrapper{--inactive-decor-color: var(--clr-neutral-100);--active-decor-color: var(--clr-neutral-100);width:100%;position:relative;margin-top:.5rem}.chat__input-wrapper:after{content:"";position:absolute;width:4px;height:50%;background-color:var(--inactive-decor-color);top:50%;right:0;translate:0 -50%;border-radius:var(--br-primary) 0 0 var(--br-primary);transition:width .25s ease-in-out}.chat__input-wrapper:focus-within:after{background-color:var(--active-decor-color);width:12px}.chat__input-wrapper input{display:block;width:100%;padding:.75em 1em;background-color:var(--clr-bg-300);border:none;border-radius:var(--br-primary);color:var(--clr-text-primary);outline:none}.clock{display:flex;justify-content:space-between;align-items:center;width:min(100%,30rem,60vh);padding:1rem;margin-top:1rem;margin-inline:auto;background-color:var(--clr-bg-200);font-weight:700;position:relative;overflow:hidden;border-radius:var(--br-primary);--time-percent: 0;--bar-color: var(--clr-neutral-600);--time-color: var(--clr-neutral-400);color:var(--clr-text-primary)}@media (min-width: 55em){.clock{width:100%}}@media (min-width: 55em){.clock.top{border-radius:var(--br-primary)}}@media (min-width: 55em){.clock.bottom{border-radius:var(--br-primary) var(--br-primary)}}.clock:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background-color:var(--clr-bg-300)}.clock:after{content:"";position:absolute;left:0;right:calc(100% - var(--time-percent) * 100%);top:0;height:6px;background-color:var(--bar-color);transition:right .25s linear}.clock a{text-decoration:none;color:var(--clr-text-primary)}.clock__time{display:flex;font-size:2rem;color:var(--time-color)}.clock__time__minutes{width:2ch;text-align:right}.clock__time__seconds{width:2ch}.clock__left{display:flex;flex-direction:column;gap:.125rem}.clock__bottom{display:flex;align-items:center;gap:.25rem}.clock__pieces{height:1.5rem;display:flex}.clock__piece-group{display:flex;align-items:center}.clock__piece-group+.clock__piece-group{margin-left:-.25rem}.clock__piece{height:1.5rem}.clock__piece+.clock__piece{margin-left:-1rem}.clock.active{--bar-color: var(--clr-primary);--time-color: var(--clr-text-primary)}.create-game-container .create-game{height:100%;background-color:var(--clr-bg-200);border-radius:var(--br-primary);color:var(--clr-text-primary);padding:1rem;display:flex;flex-direction:column}.create-game-container h3{margin-top:1.5em}.create-game-container .time-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem;gap:1rem;--accent-color: var(--clr-neutral-400)}.create-game-container .time-controls__input{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;font-weight:700}.create-game-container .time-controls__input:focus-within{--accent-color: var(--clr-accent)}.create-game-container .time-controls__input label{color:var(--accent-color);transition:color .15s ease}.create-game-container .time-controls input{width:4rem;font-size:2rem;text-align:center;outline:none;background-color:transparent;color:var(--clr-text-primary);border:none;border-bottom:3px solid var(--accent-color);transition:border-bottom .15s ease}.create-game-container .choose-opponent{margin-top:1rem;display:flex;align-items:center;flex-direction:column;max-height:8rem;overflow:auto}.create-game-container .choose-opponent input{position:fixed;opacity:0;pointer-events:none}.create-game-container .choose-opponent label{padding:.75rem 1rem;display:flex;justify-content:center;align-items:center;cursor:pointer;width:fit-content;border-radius:var(--br-primary)}.create-game-container .choose-opponent input:checked+label{background-color:var(--clr-bg-300)}.create-game-container button{font-size:var(--fs-500);border-radius:var(--br-primary);padding:calc(var(--fs-500) * 3 / 4) var(--fs-500);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:1rem;border:none;background-color:var(--clr-primary);color:var(--clr-text-primary);margin-inline:auto}@media (min-width: 55em){.create-game-container button{margin-top:auto}}.create-game-container button.inactive{cursor:default;background-color:var(--clr-bg-300)}.game{display:flex;flex-direction:column;height:100%}.game__container{width:100%;height:100%}@media (min-width: 55em){.game__container{display:grid;grid-template-areas:"moves board topclock" "moves board bottomclock" "moves board drawresign" "moves board chat";grid-template-columns:1fr min(100%,30rem,75vh) 1fr;grid-auto-rows:min-content min-content min-content 1fr;column-gap:1rem;overflow-y:hidden}}.live-moves-container{padding:1rem;grid-area:moves;height:20rem}@media (min-width: 55em){.live-moves-container{height:unset}}.board-container{grid-area:board}@media (min-width: 55em){.board-container{width:unset;height:unset}}.top-blank{height:0;grid-area:topblank}@media (min-width: 55em){.top-blank{height:1rem}}.bottom-blank{height:0;grid-area:bottomblank}@media (min-width: 55em){.bottom-blank{height:1rem}}.clock-container{padding-inline:1rem}.clock-container.top{grid-area:topclock}.clock-container.bottom{grid-area:bottomclock}.draw-resign-container{grid-area:drawresign;display:flex;justify-content:center;align-items:center}.draw-resign-container .draw-resign{background-color:var(--clr-bg-200);border-radius:var(--br-primary);padding:.75rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:1rem;color:var(--clr-text-primary);max-width:100%}.draw-resign-container .draw-resign button{width:2rem;height:2rem;border:none;background-color:transparent;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:var(--br-primary);padding:.25rem}.draw-resign-container .draw-resign button.confirming{background-color:var(--clr-accent)}.draw-resign-container .draw-resign button.is-rejector img{height:75%}.draw-resign-container .draw-resign button img{height:100%}.draw-resign-container .draw-resign button:hover{opacity:.8}.draw-resign-container .draw-resign .draw-request-buttons{margin-left:1rem;display:flex;gap:.25rem}.draw-resign-container .draw-resign .draw-request-buttons button{padding:.375rem;background-color:var(--clr-bg-300)}.draw-resign-container .draw-resign .draw-request-buttons .accept-draw:hover{background-color:var(--clr-accent);opacity:1}.draw-resign-container .draw-resign .draw-request-buttons .decline-draw:hover{background-color:var(--clr-error);opacity:1}.chat-container{grid-area:chat;height:20rem;padding:1rem}@media (min-width: 55em){.chat-container{height:auto}}.create-game-container,.waiting-container{grid-row:1/5;grid-column:3/3;padding:1rem}.waiting-container .waiting{height:100%;background-color:var(--clr-bg-200);border-radius:var(--br-primary);color:var(--clr-text-primary);padding:1rem;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1rem;text-align:center}.waiting-container button{font-size:var(--fs-400);border-radius:var(--br-primary);padding:calc(var(--fs-400) * 3 / 4) var(--fs-400);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:var(--clr-error);border:none;color:var(--clr-text-primary)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--clr-primary: rgb(138, 29, 255);--clr-accent: hsl(89, 100%, 42%);--clr-bg-100: rgb(13, 11, 14);--clr-bg-200: rgb(31, 28, 33);--clr-bg-300: rgb(43, 40, 47);--clr-neutral-100: rgb(240, 240, 240);--clr-neutral-200: rgb(198, 192, 206);--clr-neutral-400: rgb(116, 109, 123);--clr-neutral-600: rgb(73, 68, 78);--clr-neutral-900: rgb(18, 17, 19);--clr-text-primary: rgb(240, 240, 240);--clr-error: rgb(230, 49, 49);--clr-board-highlight: rgb(255, 95, 212);--clr-tile-dark: hsl(269, 75%, 59%);--clr-tile-light: rgb(240, 240, 240);--fs-400: .875rem;--fs-500: 1rem;--fs-600: 1.5rem;--fs-700: 2rem;--fs-800: 3rem;--ff-primary: Inter, sans-serif;--br-primary: 8px}body{background-color:var(--clr-bg-100);height:100vh;font-family:var(--ff-primary);font-size:var(--fs-400)}#root,.app{height:100%}