:root{--size: 75px;font-family:sans-serif;--gameUIHeight: 100px}*{padding:0;margin:0;box-sizing:border-box}body{background:#121212}.gameView,.loginScreen{display:flex;justify-content:center;align-items:center;flex-direction:column}.gameView{height:calc(100vh - var(--gameUIHeight))}.loginScreen,.menu{height:100vh}.menu{display:flex;flex-direction:column;justify-content:space-around;align-items:center;color:#fff}.menu h1{font-size:50px}.menu p{color:red;position:absolute;top:10px}.menu .options{display:flex;align-items:center;gap:100px}.menu .join{display:flex;gap:10px}.menu input{padding:10px 15px;background:#2a2a2a;color:#fff;outline:none;border:solid 3px white;border-radius:10px}.board{display:grid;grid-template-columns:repeat(7,var(--size));gap:10px}.board:focus{outline:none}p{color:#fff;text-align:center;margin-bottom:10px}.space{width:var(--size);height:var(--size);border:solid 5px black;border-radius:100%}.space:hover{cursor:pointer}.gameUI{width:100%;height:var(--gameUIHeight);position:absolute;bottom:10px;display:flex;align-items:center;justify-content:space-between}.gameUI .currentPlayer,.gameUI .opponentPlayer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;height:100%;margin:10px}.gameUI .playerName{display:flex;align-items:center;justify-content:center;gap:10px;background:#2a2a2a;color:#fff;padding:10px;border-radius:10px;flex:1;height:100%;overflow:hidden}.gameUI .score{width:var(--gameUIHeight);background:#2a2a2a;color:#fff;height:100%;display:flex;justify-content:center;align-items:center;border-radius:10px}.gameUI .currentPlayer .turn{background:red}.gameUI .opponentPlayer .turn{background:yellow;color:#000}.gameUI .opponentPlayer .score,.gameUI .opponentPlayer .playerName,.gameUI .opponentPlayer img{border:solid yellow 3px}.gameUI .currentPlayer .playerName,.gameUI .currentPlayer .score,.gameUI .currentPlayer img{border:solid red 3px}.gameUI .opponentPlayer img{background:yellow}.gameUI .currentPlayer img{background:red}.gameUI img{height:calc(var(--gameUIHeight) + 20px);border-radius:100%;margin-bottom:20px}.gameUI .space{height:calc(var(--gameUIHeight) - 20px);width:calc(var(--gameUIHeight) - 20px)}.buttons{display:flex;flex-direction:column;justify-content:center;gap:5px;height:100%}button{border:solid 3px white;border-radius:10px;background:#2a2a2a;color:#fff;font-size:20px;padding:10px 15px}.buttons button{flex:1;padding:0 15px}button:hover:not(.disabled){cursor:pointer;background:white;color:#2a2a2a}.disabled{opacity:.5}@media screen and (max-height: 700px){:root{--gameUIHeight: 75px;--size: 60px}}@media screen and (max-height: 500px){:root{--gameUIHeight: 60px;--size: 40px}}@media screen and (max-width: 1000px){.gameUI .playerName{display:none}}