:root{--color-correct: #6aaa64;--color-present: #c9b458;--color-absent: #787c7e;--color-tone-1: #1a1a1b;--color-tone-2: #787c7e;--color-bg: #ffffff;--color-tile-border: #d3d6da;--color-tile-border-filled: #878a8c;--color-key-bg: #d3d6da;--tile-size: 62px;--gap: 5px}*{margin:0;padding:0;box-sizing:border-box;touch-action:manipulation}body{background:var(--color-bg);color:var(--color-tone-1);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;display:flex;justify-content:center;min-height:100dvh}#app{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px;min-height:100dvh}header{display:flex;align-items:center;justify-content:center;width:100%;padding:0 16px;height:50px;border-bottom:1px solid var(--color-tile-border);position:relative}header h1{font-size:2rem;font-weight:700;letter-spacing:.15rem;text-transform:uppercase}#new-game{background:var(--color-correct);color:#fff;border:none;border-radius:4px;padding:8px 16px;font-size:.75rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}#new-game:hover{opacity:.85}#toast-container{position:fixed;top:10%;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{background:var(--color-tone-1);color:var(--color-bg);padding:14px 24px;border-radius:4px;font-size:.875rem;font-weight:700;pointer-events:none}.toast.fade-out{animation:fade-out .3s ease forwards}@keyframes fade-out{to{opacity:0}}#tip{padding:12px 16px;font-size:.85rem;color:var(--color-tone-2);text-align:center;line-height:1.4}#board{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;gap:var(--gap);padding:10px 0}.row{display:flex;gap:var(--gap)}.tile{width:var(--tile-size);height:var(--tile-size);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}.tile[data-state=tbd]{border-color:var(--color-tile-border-filled);color:var(--color-tone-1)}.tile[data-state=correct]{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.tile[data-state=present]{background:var(--color-present);border-color:var(--color-present);color:#fff}.tile[data-state=absent]{background:var(--color-absent);border-color:var(--color-absent);color:#fff}.tile.pop{animation:pop .15s cubic-bezier(.22,1,.36,1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.tile.flip-in{animation:flip-in .3s cubic-bezier(.45,0,.55,1) forwards}.tile.flip-out{animation:flip-out .3s cubic-bezier(.45,0,.55,1) forwards}@keyframes flip-in{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-out{0%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.tile.bounce{animation:bounce 1.2s cubic-bezier(.34,1.56,.64,1)}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-20px)}55%{transform:translateY(3px)}70%{transform:translateY(-8px)}85%{transform:translateY(1px)}to{transform:translateY(0)}}.row.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(1.5px)}30%,50%,70%{transform:translate(-3px)}40%,60%{transform:translate(3px)}}#keyboard{width:100%;padding:0 8px 8px}.keyboard-row{display:flex;justify-content:center;gap:6px;margin-bottom:8px}.key{height:58px;width:43px;padding:0;border:none;border-radius:4px;background:var(--color-key-bg);color:var(--color-tone-1);font-size:1.2rem;font-weight:700;transition:opacity .1s ease;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.key-wide{width:65px;font-size:.75rem}@media(hover:hover){.key:hover{opacity:.85}}.key:active{opacity:.7}.key[data-state=correct]{background:var(--color-correct);color:#fff}.key[data-state=present]{background:var(--color-present);color:#fff}.key[data-state=absent]{background:var(--color-absent);color:#fff}@media(max-width:500px){:root{--tile-size: calc((100vw - 120px)/5) ;--gap: 4px}header h1{font-size:1.3rem;letter-spacing:.08rem}#tip{padding:8px 12px;font-size:.75rem}.tile{font-size:1.5rem}.key{height:50px;width:calc((100vw - 52px)*.1);font-size:.9rem}.key-wide{width:calc((100vw - 16px - 36px) / 10 * 1.5);font-size:.65rem}.keyboard-row{gap:4px}}@media(max-width:360px){:root{--tile-size: calc((100vw - 100px)/5) }header h1{font-size:1.1rem}.key{height:45px;font-size:.8rem}.key-wide{font-size:.6rem}.keyboard-row{gap:3px}}