.digit-selector{margin:10px auto;padding:5px;text-align:center}.digit-selector label{margin-right:8px;font-weight:700}.digit-selector select{padding:6px 10px;border-radius:4px;border:1px solid #ccc;font-size:1rem;background-color:#fff}.App{text-align:center;font-family:Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh;align-items:center;justify-content:space-between}.App-header{background-color:#f8f8f8;padding:10px 0;border-bottom:1px solid #e7e7e7;width:100%;margin-bottom:15px}.App-header h1{margin:0;font-size:1.8rem;color:#333}.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:10px;transition:background-color .2s ease}.play-again-button:hover{background-color:#5a9a54}.App>*:not(.keyboard){flex-shrink:0}.board{flex-grow:1}@media (max-width: 500px){.App-header h1{font-size:1.5rem}}@media screen and (max-width: 768px){.App-header,.message-area{display:none}}.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.typing{border-color:#878a8c}.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}.tile:not(.empty):not(.typing){animation:flipIn .5s ease forwards}@keyframes flipIn{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.row{display:grid;grid-template-columns:repeat(var(--num-digits, 4),1fr);grid-gap:5px;margin-bottom:5px}.board{display:flex;flex-direction:column;align-items:center;padding:10px;margin-bottom:20px;width:calc(var(--num-digits, 4) * (60px + 4px + 5px));max-width:90vw;margin-left:auto;margin-right:auto}.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:30px;padding:10px;margin:10px auto;border-radius:5px;text-align:center;font-weight:700;width:80%;max-width:400px}.message-area.info{color:#333}.message-area.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.message-area.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}