body{margin:0;font-family:Tahoma,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{background-color:#fff}.App{width:100vw;height:90vh;position:absolute;bottom:0;text-align:center;background:#fff;display:grid;grid-template-columns:1fr;grid-template-rows:auto 0px;grid-template-areas:"screen" "footer"}.Header{width:calc(100vw - 1em);height:2em;padding:.5em .5em 0;position:fixed;top:0;display:flex;align-items:flex-start;justify-content:space-between;font-weight:700;background-color:#87ceeb;z-index:950}#title{text-align:left;cursor:pointer;width:4em}#roomCode{font-size:1.5em;cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none}#roomCode:focus{outline:none}.clickedLink{animation:clickedLink .25s 1}@keyframes clickedLink{0%{font-size:1em}50%{font-size:.75em}to{font-size:1em}}#functions{width:4em;text-align:right;cursor:pointer;display:flex;align-items:center;justify-content:flex-end}#mute{padding:0 .5em}.Footer{grid-area:footer;display:none;background-color:#d3d3d3}.Overlay{position:fixed;top:0;left:0;height:100vh;width:100vw;background-color:#fffffff2;z-index:1000;font-size:3em;font-weight:700}.Modal{position:fixed;top:0;left:0;height:100vh;width:100vw;background-color:#fffffff2;z-index:975;font-size:1.25em;font-weight:700}.Notice{position:fixed;bottom:.5em;left:0;width:100vw;z-index:925;font-size:.75em;font-weight:700;text-align:center}.Lobby{grid-area:screen;display:flex;align-items:center;justify-content:space-between;flex-direction:column}h1{font-size:2.5em}a{text-decoration:underline;font-weight:700;color:#000}#instructions{font-size:1.5em;padding:.25em}.lobbyButtons{font-weight:700;font-size:min(5vw,4vh);flex-direction:row;padding-bottom:1.5em}.lobbyButtons div{border-radius:.25em;cursor:pointer}.lobbyInfo{padding:.25em;font-weight:700}.Create{margin:.5em;padding:.75em;font-size:1.1em;color:#fff;background:#4169e1}.slider{max-width:80vw;width:25em}.Join{margin:.5em;padding:.25em;max-width:7em;flex-direction:row}.Start{margin:.5em;padding:.75em;font-size:1.1em;color:#fff;background:#4169e1}.Rename{margin:.5em;padding:.25em;max-width:7em;flex-direction:row}#inputBox{height:2.5em;width:10em;font-size:1em;text-align:center;box-shadow:none;border-radius:.25em;border:.1em solid lightgrey}#inputBox:focus{outline:none}.clickedButton{pointer-events:none;animation:clickedButton 1s 1}@keyframes clickedButton{0%{background-color:#4169e1}50%{background-color:#87ceeb}to{background-color:#4169e1}}.Play{grid-area:screen;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr calc(15vh + 4em);grid-template-areas:"header" "table" "hand"}.Button{font-size:2em}.Players{grid-area:table;display:flex;align-items:flex-start;justify-content:center;flex-direction:column-reverse;z-index:925}.Player{border:.25em solid rgba(0,0,0,0);border-radius:.75em;margin:0 .25em;display:flex;flex-direction:row;justify-content:flex-start;cursor:pointer}.playerLobby{padding:1em;width:90vw;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;overflow-y:visible}.playerTable{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;max-height:40vh;min-width:10em;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.playerTable::-webkit-scrollbar{display:none}.pageHolder{display:flex;flex-direction:row;width:4em;padding:0 .75em}.page{padding:0 .1em 0 0;cursor:pointer}.playerHighlight{display:flex!important;animation:highlightPlayer .5s 1}.hidden{display:none}.strikes{border-color:#639}.disconnected{color:red}@keyframes highlightPlayer{0%{position:relative;left:0vw}50%{position:relative;left:2vw}to{position:relative;left:0vh}}.playerValue{font-weight:700;font-size:.76em;padding:.5em;border-radius:.5em;border:.25em solid black}.playerName{font-size:.75em;display:flex;align-items:center;justify-content:center}.Status{width:calc(100vw - 1em);position:fixed;top:3em;padding:.5em;display:flex;align-items:center;justify-content:space-between}.Latest{grid-area:table;z-index:900;flex-direction:column}.Pile{grid-area:table;padding:.5em;display:flex;align-items:flex-end;justify-content:center;flex-direction:column-reverse}.Hand{grid-area:hand;padding:0;font-weight:700;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;background-image:linear-gradient(to bottom,#fff 67%,#fff 67%);cursor:pointer}.Card{margin:.25em;border:.25em solid black;border-radius:.5em;font-weight:700;background-color:#fff}.Latest .Card{height:30vh;width:20vh;font-size:3em;animation:playLatest .25s 1}@keyframes playLatest{0%{position:relative;left:0;top:4vh}33%{position:relative;left:0;top:-2vh}67%{position:relative;left:0;top:1vh}to{position:relative;left:0;top:0}}.Pile .Card{height:4vh;width:5.5em;font-size:.75em;animation:playPile .25s 1}@keyframes playPile{0%{position:relative;bottom:4vh}to{position:relative;bottom:0vh}}.Hand .Card{min-height:10vh;min-width:7vh;margin:0;font-size:1.5em}.handWrapper{height:100%;width:100%;padding-left:calc(50vw - 4vh - .875em);display:flex;align-items:center;justify-content:flex-end;flex-direction:row-reverse;overflow-x:visible}.handTooltip{color:#000;width:100%;bottom:calc(15vh + 5em);text-align:center;font-size:1em;position:absolute}.cardWrapper{margin:0 -1em 0 0}.cardWrapper:last-child{overflow:visible;position:relative;bottom:1.5em;border-radius:1.25em}.nextCard{border:.25em solid skyblue;border-radius:1.125em;animation:playNext .25s 1}@keyframes playNext{0%{position:relative;left:2em}to{position:relative;left:0}}.autoCard{border:.25em solid royalblue;border-radius:1.125em}.cardWrapper:last-child .Card{min-height:12vh;min-width:8vh;font-size:2em}.missed{border:.25em solid red;color:red}.stale{opacity:.25}.replay,.endgame{height:100%;width:50%}.centered{display:flex;align-items:center;justify-content:center}.column{display:flex;flex-direction:column;align-items:center;justify-content:center}.About{grid-area:screen;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.aboutParagraph{height:100%;max-width:min(40em,80vw)}.discordButton{width:10em;padding:.25em;border-radius:1em;background-color:#5865f2;color:#fff;text-decoration:none;cursor:pointer}.back{position:fixed;top:0;left:0;font-size:3em;padding:.5em;cursor:pointer}.unselectable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (max-aspect-ratio:1/1){.App{height:85vh}}@media only screen and (max-height:540px)and (min-aspect-ratio:3/2){body{overflow-x:hidden;overflow-y:hidden}.Overlay{display:flex!important;background-color:#fff}}