html,body{background-color:#fff;width:100%;height:100%;margin:0;padding:0;overflow:hidden}*{box-sizing:border-box}#app{background:#111;grid-template:"history"max-content"playzone""letters"max-content/100%;place-items:center;width:100%;height:100%;display:grid}.playZone{grid-area:playzone;max-width:100%;height:100%;max-height:500px}.playRow{flex-flow:row;height:15%;margin:4px 0;display:flex}.playLetter{aspect-ratio:1;color:#fff;text-transform:uppercase;background:#787c7e;border:3px solid #4e4e4e;border-radius:10px;justify-content:center;align-items:center;height:100%;max-height:75px;margin:0 2px;font-family:monospace;font-weight:700;transition:all .3s;display:flex;container-type:size}.playLetter-text{font-size:8vh}@container (height>=64px){.playLetter-text{font-size:400%}}.letters{flex-direction:column;grid-area:letters;align-items:center;margin-bottom:20px;display:flex}.lettersRow{flex-flow:row;display:flex}.lettersLetter{color:#fff;cursor:pointer;text-transform:uppercase;background:#787c7e;border:2px solid #4e4e4e;border-radius:10px;justify-content:center;align-items:center;margin:2px;padding:0 2px;font-family:monospace;font-size:min(35px,7vw);transition:all .3s;display:flex}.lettersLetter.empty{cursor:initial}@media (width<=780px){.lettersLetter{min-width:5vw}}@media (width>=780px){.lettersLetter{min-width:50px;height:50px}}.empty{background:#e4e4e4;border-color:#878787}.trying{background:#818383;border-color:#414141}.notin{background:#484a4a;border-color:#282828}.close{background:#c9b458;border-color:#9b8a3e}.exact{background:#6aaa64;border-color:#4c7e47}.playRow.invalid .playLetter{animation:.2s infinite alternate wiggle}@keyframes wiggle{0%{transform:translate(2px,2px)scale(1.2)}25%{transform:translate(-2px,-2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-2px,2px)}to{transform:translateY(2px, 2px) scale(0)}}.guess{animation:.4s infinite alternate wiggle}@keyframes guesss{0%{transform:scale(1)}25%{transform:scale(.8)}50%{transform:scale(1.3)}to{transform:scale(1)}}.history{background-color:#333;border:2px solid #444;border-radius:5px;flex-direction:column;grid-area:history;gap:5px;display:flex;overflow:auto}.playerItem{grid-template:"none1 scores""pfp scores"50px"none2 scores"/50px auto;align-items:center;gap:5px;padding:5px;display:grid}.playerItem:last-child{border:none}.playerItem-pfp{border:2px solid #444;border-radius:5px;grid-area:pfp;width:50px;height:50px}.playerItem-scores{background-color:#222;flex-direction:column;grid-area:scores;gap:2px;padding:5px;display:flex}.playerItem-attempt{gap:2px;display:flex}.playerItem-attempt div{border-style:solid;border-width:1px;width:15px;height:15px}@media (width<=780px){.history{flex-direction:row;max-width:100%;margin:5px}.playerItem{border-right:2px solid #444}.playerItem-attempt div{width:10px;height:10px}}@media (width>=780px){.history{max-height:55%;position:absolute;top:10px;left:10px}.playerItem{border-bottom:2px solid #444}}.btn{color:#fff;cursor:pointer;background-color:#454545;border:2px solid #686868;border-radius:5px;padding:5px 10px;font-size:1.2em;transition:all .3s}.btn:hover{background-color:#575757;border:2px solid #737373}