html{--nord-polar-night-1:#2f3541;--nord-polar-night-2:#3c4353;--nord-polar-night-3:#444d5f;--nord-polar-night-4:#4d576a;--nord-snow-storm-1:#d8dee9;--nord-snow-storm-2:#e5e9f0;--nord-snow-storm-3:#eceff4;--nord-frost-1:#8fbcbb;--nord-frost-2:#87bfcf;--nord-frost-3:#81a1c1;--nord-frost-4:#5d81ac;--nord-aurora-red:#be6069;--nord-aurora-orange:#d18771;--nord-aurora-yellow:#ebca89;--nord-aurora-green:#a4bf8d;--nord-aurora-purple:#b48ead;--font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-family:var(--font-family)}body{margin:0;padding:1.75rem;color:var(--nord-snow-storm-1);background-color:var(--nord-polar-night-1)}.title{text-align:center;padding:0;margin:0 0 3rem;font-size:2.25rem}.title--small{font-size:1.75rem}.title-group>*{margin-bottom:.5rem}.title-group>:last-child{margin-bottom:0}.title-group{margin-bottom:3rem}.red{color:var(--nord-aurora-red)}.yellow{color:var(--nord-aurora-yellow)}.main{width:100%;max-width:35rem;margin:0 auto}.main--full-height{height:calc(100vh - 3.5rem)}.field{display:flex;flex-direction:column;margin-bottom:2em}.field__label{font-size:1.25rem;margin-bottom:.25rem}.field__input{background-color:var(--nord-polar-night-3);color:var(--nord-snow-storm-1);border:.125rem solid var(--nord-polar-night-4);border-radius:.125rem;padding:.75rem}.field__radios{border:none;margin:0;padding:0}.field__input:focus,.field__input:hover{border-color:var(--nord-frost-2)}.field__input:focus{box-shadow:0 0 .125rem .125rem rgba(135,191,207,.35)}.field--invalid .field__input{box-shadow:none;border-color:var(--nord-aurora-red)}.field--invalid .field__input:focus{box-shadow:0 0 .125rem .125rem rgba(190,96,105,.35)}.field__feedback{margin:.25rem 0 0}.field--invalid .field__feedback{color:var(--nord-aurora-red)}.radio{margin-bottom:.25rem}.radio:last-of-type{margin-bottom:0}.radio__label{cursor:pointer}.radio__input{display:none}.radio__input+:before{content:"";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;border-radius:50%;border:.125rem solid var(--nord-snow-storm-1)}.radio__input:checked+:before{background:radial-gradient(var(--nord-frost-2) 0,var(--nord-frost-2) 30%,transparent 40%,transparent);border-color:var(--nord-frost-2)}.radio__input:checked+*{color:var(--nord-frost-2)}.button{background-color:var(--nord-frost-4);cursor:pointer;padding:.75rem;border:none;color:var(--nord-snow-storm-1);border:.125rem solid var(--nord-polar-night-4);border-radius:.125rem;width:100%;font-size:1.175rem;margin-bottom:.25rem}.button--danger{background-color:var(--nord-aurora-red)}.button--secondary{background-color:var(--nord-frost-3)}.button:last-of-type{margin-bottom:0}.button:hover{border-color:var(--nord-frost-2)}.button:active{box-shadow:0 0 .125rem .125rem rgba(135,191,207,.35)}.games{width:100%;height:calc(100% - 10rem);display:flex;flex-direction:column}.available-games{overflow-y:auto;width:calc(100% - 2.75rem);height:calc(100% - 2.75rem);border:.125rem solid var(--nord-polar-night-4);border-radius:.125rem;margin-bottom:1.5rem;padding:1.25rem}.available-games__info{text-align:center;margin:0}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading:after{content:"";position:relative;justify-content:center;top:calc(50% - 2rem);margin:0 auto;height:0;width:0;border-top:2rem solid var(--nord-snow-storm-1);border:2rem solid var(--nord-snow-storm-1);border-top-color:var(--nord-frost-4);border-radius:50%;animation:spin 1.5s linear infinite}.loading:after,.pending-game{display:flex;align-items:center}.pending-game{margin-bottom:1.175rem}.pending-game:last-of-type{margin-bottom:1.25rem}.pending-game__join{margin-right:1rem;color:var(--nord-frost-2)}.pending-game__player{margin:0;font-size:1.25rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.board{background-color:var(--nord-frost-4);padding:5% 5% 13%;border-radius:.125rem;display:grid;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(7,1fr);grid-gap:2.5%;margin-bottom:1.5rem}.board__slot{width:100%;background-color:var(--nord-polar-night-1);border:none;border-radius:100%;padding:0;margin:0;cursor:pointer}.board__slot:after{content:"";display:block;padding-bottom:100%}.board__slot--red{background-color:var(--nord-aurora-red)}.board__slot--yellow{background-color:var(--nord-aurora-yellow)}