*{box-sizing:border-box;margin:0;padding:0}:root{--color-correct: #6aaa64;--color-present: #c9b458;--color-absent: #787c7e;--color-tile-border: #d3d6da;--color-tile-filled-border: #878a8c;--color-key-bg: #d3d6da;--color-text: #1a1a1b;--color-bg: #ffffff}@media(prefers-color-scheme:dark){:root{--color-correct: #538d4e;--color-present: #b59f3b;--color-absent: #3a3a3c;--color-tile-border: #3a3a3c;--color-tile-filled-border: #565758;--color-key-bg: #818384;--color-text: #ffffff;--color-bg: #121213}}html,body{height:100%}body{font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;background-color:var(--color-bg);color:var(--color-text)}#app{display:flex;flex-direction:column;align-items:center;height:100%;max-width:500px;margin:0 auto;padding:0 8px}header{width:100%;padding:16px 0;border-bottom:1px solid var(--color-tile-border);text-align:center}header h1{font-size:2.25rem;font-weight:700;letter-spacing:.2rem;text-transform:uppercase;margin-bottom:4px}header p{font-size:.875rem;opacity:.7}main{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:1;width:100%;padding:20px 0;gap:20px}#board{display:flex;flex-direction:column;gap:5px}.row{display:flex;gap:5px}.tile{width:62px;height:62px;border:2px solid var(--color-tile-border);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:transform .1s}.tile.filled{border-color:var(--color-tile-filled-border);animation:pop .1s ease-in-out}.tile.revealed{color:#fff}.tile.correct{background-color:var(--color-correct);border-color:var(--color-correct)}.tile.present{background-color:var(--color-present);border-color:var(--color-present)}.tile.absent{background-color:var(--color-absent);border-color:var(--color-absent)}@keyframes pop{50%{transform:scale(1.1)}}#keyboard{display:flex;flex-direction:column;gap:8px;width:100%;max-width:484px}.keyboard-row{display:flex;gap:6px;justify-content:center}.key{height:58px;min-width:43px;padding:0 12px;border:none;border-radius:4px;background-color:var(--color-key-bg);color:var(--color-text);font-size:.85rem;font-weight:700;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s}.key:hover{opacity:.9}.key:active{transform:scale(.95)}.key.wide{min-width:65px;font-size:.75rem}.key.correct{background-color:var(--color-correct);color:#fff}.key.present{background-color:var(--color-present);color:#fff}.key.absent{background-color:var(--color-absent);color:#fff}#message{position:fixed;top:80px;left:50%;transform:translate(-50%);background-color:var(--color-text);color:var(--color-bg);padding:16px 24px;border-radius:4px;font-size:1rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .3s;z-index:100}#message.show{opacity:1}@media(max-width:480px){.tile{width:52px;height:52px;font-size:1.6rem}.key{height:50px;min-width:32px;padding:0 8px;font-size:.75rem}.key.wide{min-width:50px;font-size:.65rem}}