:root{--bg-color: #121213;--tile-bg: #3a3a3c;--tile-border: #3a3a3c;--tile-empty-border: #3a3a3c;--key-bg: #818384;--key-text: #ffffff;--text-color: #ffffff;--correct: #538d4e;--present: #b59f3b;--absent: #3a3a3c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);min-height:100vh;display:flex;justify-content:center}#app{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;padding:0 8px}header{width:100%;padding:16px 0;border-bottom:1px solid var(--tile-border);text-align:center}header h1{font-size:36px;font-weight:700;letter-spacing:.2rem;text-transform:uppercase}main{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex-grow:1;width:100%;padding:16px 0;gap:24px}#game-board{display:flex;flex-direction:column;gap:5px}.board-row{display:flex;gap:5px}.tile{width:62px;height:62px;border:2px solid var(--tile-empty-border);display:flex;justify-content:center;align-items:center;font-size:32px;font-weight:700;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:transform .1s}.tile.filled{border-color:#565758;animation:pop .1s}.tile[data-status=tbd]{background-color:transparent;border-color:#565758}.tile[data-status=correct]{background-color:var(--correct);border-color:var(--correct)}.tile[data-status=present]{background-color:var(--present);border-color:var(--present)}.tile[data-status=absent]{background-color:var(--absent);border-color:var(--absent)}@keyframes pop{50%{transform:scale(1.1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-30px)}50%{transform:translateY(5px)}60%{transform:translateY(-15px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.tile.flip{animation:flip .5s ease-in-out}.board-row.shake{animation:shake .5s}.tile.bounce{animation:bounce 1s}#keyboard{display:flex;flex-direction:column;gap:8px;width:100%;max-width:500px;padding:0 8px}.keyboard-row{display:flex;justify-content:center;gap:6px}.key{height:58px;min-width:43px;padding:0;border:none;border-radius:4px;background-color:var(--key-bg);color:var(--key-text);font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;transition:background-color .1s;flex:1}.key:hover{opacity:.9}.key:active{transform:scale(.95)}.key.wide{min-width:65px;font-size:12px}.key[data-key=BACK]{font-size:24px}.key[data-status=correct]{background-color:var(--correct)}.key[data-status=present]{background-color:var(--present)}.key[data-status=absent]{background-color:var(--absent)}#message{position:fixed;top:80px;left:50%;transform:translate(-50%);background-color:var(--text-color);color:var(--bg-color);padding:24px 32px 16px;border-radius:8px;font-weight:700;font-size:16px;text-align:center;z-index:100;display:flex;flex-direction:column;gap:12px;align-items:center}#close-btn{position:absolute;top:4px;right:8px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--bg-color);opacity:.6;line-height:1}#close-btn:hover{opacity:1}#message.hidden{display:none}#share-btn{background-color:var(--correct);color:#fff;border:none;padding:12px 24px;border-radius:4px;font-size:16px;font-weight:700;cursor:pointer}#share-btn:hover,#play-again-btn:hover{opacity:.9}.modal-buttons{display:flex;gap:12px}#play-again-btn{background-color:var(--key-bg);color:#fff;border:none;padding:12px 24px;border-radius:4px;font-size:16px;font-weight:700;cursor:pointer}@media (max-width: 400px){.tile{width:52px;height:52px;font-size:28px}.key{height:50px;min-width:30px;font-size:12px}.key.wide{min-width:50px;font-size:10px}.key[data-key=BACK]{font-size:20px}header h1{font-size:28px}}@media (max-width: 350px){.tile{width:44px;height:44px;font-size:24px}#game-board,.board-row{gap:4px}}