*{box-sizing:border-box}body{background-color:#fff;color:#121213;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;margin:0;padding:20px}.game-container{margin:0 auto;max-width:500px;text-align:center}.header{border-block-end:1px solid #d3d6da;margin-block-end:30px;padding-block-end:10px;text-align:center}.header .title{font-size:56px;font-weight:700;letter-spacing:.2em;margin:0}.board{display:flex;flex-direction:column;gap:6px;margin-bottom:30px;padding:10px}.board .board-row{display:flex;gap:5px;justify-content:center}.board .board-row .board-tile{align-items:center;border:2px solid #d3d6da;display:flex;font-size:32px;font-weight:700;height:62px;justify-content:center;line-height:1;text-transform:uppercase;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none;width:62px}.board .board-row .board-tile.empty{background-color:#fff;border-color:#d3d6da;color:#121213}.board .board-row .board-tile.filled{animation:pop .1s ease-in-out;background-color:#fff;border-color:#878a8c;color:#121213}.board .board-row .board-tile.correct{animation:flip .6s ease-in-out;animation-fill-mode:both;background-color:#6aaa64;border-color:#6aaa64;color:#fff}.board .board-row .board-tile.correct[data-col="0"]{animation-delay:0ms}.board .board-row .board-tile.correct[data-col="1"]{animation-delay:.15s}.board .board-row .board-tile.correct[data-col="2"]{animation-delay:.3s}.board .board-row .board-tile.correct[data-col="3"]{animation-delay:.45s}.board .board-row .board-tile.correct[data-col="4"]{animation-delay:.6s}.board .board-row .board-tile.present{animation:flip .6s ease-in-out;animation-fill-mode:both;background-color:#c9b458;border-color:#c9b458;color:#fff}.board .board-row .board-tile.present[data-col="0"]{animation-delay:0ms}.board .board-row .board-tile.present[data-col="1"]{animation-delay:.15s}.board .board-row .board-tile.present[data-col="2"]{animation-delay:.3s}.board .board-row .board-tile.present[data-col="3"]{animation-delay:.45s}.board .board-row .board-tile.present[data-col="4"]{animation-delay:.6s}.board .board-row .board-tile.absent{animation:flip .6s ease-in-out;animation-fill-mode:both;background-color:#787c7e;border-color:#787c7e;color:#fff}.board .board-row .board-tile.absent[data-col="0"]{animation-delay:0ms}.board .board-row .board-tile.absent[data-col="1"]{animation-delay:.15s}.board .board-row .board-tile.absent[data-col="2"]{animation-delay:.3s}.board .board-row .board-tile.absent[data-col="3"]{animation-delay:.45s}.board .board-row .board-tile.absent[data-col="4"]{animation-delay:.6s}.board .board-row .board-tile.invalid{animation:shake .5s ease-in-out}.keyboard{display:flex;flex-direction:column;gap:8px;margin-block-start:30px}.keyboard-row{display:flex;gap:6px;justify-content:center}.keyboard-row .keyboard-key{min-width:43px;height:58px;border:none;border-radius:4px;background-color:#d3d6da;color:#121213;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:all .1s ease-in-out}.keyboard-row .keyboard-key:hover{background-color:#b7bcc3}.keyboard-row .keyboard-key:active{transform:scale(.95)}.keyboard-row .keyboard-key.key-enter,.keyboard-row .keyboard-key.key-backspace{min-width:65px;font-size:12px}.keyboard-row .keyboard-key.correct{background-color:#6aaa64;color:#fff}.keyboard-row .keyboard-key.present{background-color:#c9b458;color:#fff}.keyboard-row .keyboard-key.absent{background-color:#787c7e;color:#fff}@keyframes flip{0%{background-color:#fff;border-color:#878a8c;color:#121213;transform:rotateX(0)}50%{background-color:#fff;border-color:#878a8c;color:#121213;transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(2px)}20%,40%,60%,80%{transform:translate(4px)}}.message-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000;pointer-events:none}.message{background-color:#fff;border:1px solid #d3d6da;border-radius:4px;padding:16px 24px;margin-bottom:8px;font-weight:700;font-size:14px;text-align:center;box-shadow:0 4px 23px #0003;animation:slide-in .3s ease-out;pointer-events:auto;min-width:200px}.message.message--success{background-color:#6aaa64;color:#fff;border-color:#6aaa64}.message.message--error{background-color:#e74c3c;color:#fff;border-color:#e74c3c}.message.message--info{background-color:#c9b458;color:#fff;border-color:#c9b458}.message.message--warning{background-color:#f39c12;color:#fff;border-color:#f39c12}@keyframes slide-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.game-complete .board-tile{animation:none}@media(max-width:480px){.header .title{font-size:42px}.board .board-row .board-tile{width:42px;height:52px;font-size:28px}.keyboard-row .keyboard-key{min-width:25px;height:50px;font-size:11px}.keyboard-row .keyboard-key.key-enter,.keyboard-row .keyboard-key.key-backspace{min-width:55px}.message{padding:12px 20px;font-size:13px;margin:0 10px;min-width:180px}}