body{margin:0;font-family:monospace}.app{width:max(100vw,400px);min-height:max(100vh,400px);background-color:#2c28ff;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center}footer{width:calc(100% - 1rem);color:#fff;border-top:white .125rem solid;display:flex;flex-direction:row;padding:.5rem}main{flex-grow:1;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;box-sizing:border-box;width:100%;padding:2rem}#serverstatus{width:1rem;height:1rem;border-radius:50%;display:inline;margin-top:.125rem;margin-right:.125rem}#serverstatus.online{background-color:#4cff00}#serverstatus.offline{background-color:red}#logininfo,#roominfo{display:inline;margin-inline:.25rem;font-size:.875rem}.bigbold{font-size:1.125rem;font-weight:900}#disconnectbutton{background-color:#fff;color:#2c28ff;border-radius:.5rem;padding:.125rem 1.5rem;font-weight:900;cursor:pointer}form{color:#fff}label [type=text],label input[type=password]{border-radius:.5rem;background-color:#0000;border:.125rem solid white;margin:.25rem;color:#fff;font-weight:700}button[type=submit]{background:#fff;color:#2c28ff;padding-block:.125rem;padding-inline:1.5rem;margin-block:.25rem;border:.125rem white solid;border-radius:.5rem}button[type=submit]:hover{background:#2c28ff;color:#fff;transition:all .2s}.scoreboard{box-sizing:border-box;display:flex;flex-direction:column;width:14rem;min-height:6rem;color:#fff;border:.125rem solid white;padding:.5rem}.teamCircle{margin-top:.25rem;margin-right:.5rem;width:.5rem;height:.5rem;border-radius:50%;background-color:gray}.scoreboardRow{display:flex;flex-direction:row}.team1{background-color:#8f3beb}.team2{background-color:#3b90eb}.scoreboardTeamName{font-size:xx-small;margin:.125rem .5rem .125rem .125rem;padding-block:.025rem;padding-inline:.75rem;border-radius:.75rem}.scoreboardCurrentPlayer{animation:flashingText .5s infinite}@keyframes flashingText{0%,to{color:gold}50%{color:#fff}}aside{height:100%;display:flex;flex-direction:column}.flexfiller{flex-grow:1}.leftaside{box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:1rem;padding:1rem;color:#fff}.square{border:white solid .125rem;padding:.5rem}.hand{grid-column:span 2;border:solid .125rem;padding:.5rem;display:flex;flex-direction:row;align-items:start;flex-wrap:wrap}.card{font-size:6rem;margin-inline:1.25rem;display:inline-block;cursor:pointer}.handcard:hover{scale:120%;transition:scale .2s}.card.red{color:red}.card.black{color:#000}.chatbox{box-sizing:border-box;border:solid white .125rem;width:14rem;flex-grow:1;margin-top:1rem;display:flex;flex-direction:column}.messageBox{display:flex;flex-direction:row}.messageBoxTextField::placeholder{color:#ffffffc0}.messageBoxTextField{margin:0;width:10rem;background-color:transparent;border:0;border-top:.125rem white solid;color:#fff}.messageBoxSendButton{width:3.5rem;border:white solid .125rem;border-bottom:0;color:#fff;cursor:pointer;background-color:transparent}.chatboxMessagesContainer{padding:.5rem;overflow-y:scroll;height:18rem}.messageSender{color:gold;font-style:italic}.messageText{color:#fff}.biddial{width:240px;height:120px}.bidActions{display:flex;gap:8px;margin-top:12px}.bidBtn{appearance:none;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.25);border-radius:8px;padding:6px 12px;font-weight:700;letter-spacing:.3px;transition:background-color .2s ease,border-color .2s ease,transform .05s ease}.bidBtn:hover{border-color:#fff;background-color:#ffffff14}.bidBtn:active{transform:translateY(1px)}.suitRow{margin:10px 0;display:flex;gap:12px}.suitOption{width:1rem;height:2rem;cursor:pointer;font-size:24px;padding:4px 8px;border-radius:6px;border:2px solid transparent;-webkit-user-select:none;user-select:none;transition:border .2s,background .2s}.suitOption.selected{border:2px solid white}.suitOption.disabled{opacity:.5;cursor:not-allowed}