.App{text-align:center;font-family:Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh;align-items:center}.App-header{background-color:#f8f8f8;padding:10px 0;border-bottom:1px solid #e7e7e7;width:100%;margin-bottom:20px}.App-header h1{margin:0;font-size:1.8rem;color:#333}@media screen and (max-width: 768px){.App-header,.message-area{display:none}}.play-again-button{padding:10px 20px;font-size:1rem;font-weight:700;cursor:pointer;background-color:#6aaa64;color:#fff;border:none;border-radius:5px;margin-top:20px}.tile{display:inline-flex;justify-content:center;align-items:center;font-size:2rem;font-weight:700;line-height:2rem;width:60px;height:60px;border:2px solid #d3d6da;margin:2px;text-transform:uppercase;-webkit-user-select:none;user-select:none;color:#000;transition:transform .3s ease,background-color .5s ease,border-color .5s ease}.tile.empty{border-color:#d3d6da;background-color:#fff}.tile.correct{background-color:#6aaa64;border-color:#6aaa64;color:#fff}.tile.present{background-color:#c9b458;border-color:#c9b458;color:#fff}.tile.absent{background-color:#787c7e;border-color:#787c7e;color:#fff}.row{display:flex;justify-content:center;margin-bottom:5px}.board{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.keyboard{margin:20px auto;display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px}.keyboard-row{display:flex;justify-content:center;margin-bottom:8px;width:100%}.key{font-family:inherit;font-weight:700;border:0;padding:0;margin:0 3px;height:58px;flex:1;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#d3d6da;color:#000;display:flex;justify-content:center;align-items:center;text-transform:uppercase;-webkit-tap-highlight-color:rgba(0,0,0,.3);transition:background-color .1s ease;font-size:.9rem;max-width:45px}.key:hover{background-color:#c0c3c7}.key.special-key{flex:1.5;max-width:80px;font-size:.8rem}.key.correct{background-color:#6aaa64;color:#fff}.key.correct:hover{background-color:#5a9a54}.key.present{background-color:#c9b458;color:#fff}.key.present:hover{background-color:#b9a448}.key.absent{background-color:#787c7e;color:#fff}.key.absent:hover{background-color:#686c6e}.message-area{min-height:25px;padding:8px 15px;margin:10px auto;border-radius:5px;text-align:center;font-weight:700;width:90%;max-width:500px;box-sizing:border-box;transition:background-color .3s ease,color .3s ease,border-color .3s ease;line-height:1.4}.message-area.placeholder{background-color:transparent;border:1px solid transparent;padding-top:9px;padding-bottom:9px}.message-area.info{background-color:#eef2f7;color:#31708f;border:1px solid #bce8f1}.message-area.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.message-area.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}