:root{--a:0;--i:0;--wordle-correct:var(--success-soft);--wordle-wrong-position:var(--warning-soft);--wordle-incorrect:var(--secondary);--wordle-default-button:var(--card)}.wordle{--header-height:64px;--key-size:56px;--key-gap:4px;--marginY:.5rem;--marginX:.5rem;--shake:var(--marginX);--wordle-height:calc(100dvh - var(--header-height) - var(--key-size) * 3 - var(--marginY) * 2);--size:min(72px, calc((100dvw - var(--marginX) * 2) / 5), calc(var(--wordle-height) / 6));height:calc(100dvh - var(--header-height));flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:relative}.wordle-status{background-color:var(--card);color:var(--foreground);border:1px solid var(--input);z-index:1;border-radius:1rem;padding:.5rem;position:absolute;top:1rem}.wordle-grid{grid-template-rows:repeat(6, var(--size));grid-template-columns:repeat(5, var(--size));display:grid}.wordle-cell{width:var(--size);height:var(--size);padding:4px}.letter{border:1px solid var(--input);background:var(--card);font-family:var(--font-geist-mono), monospace;width:100%;height:100%;font-weight:600;font-size:calc(var(--size) * .6);line-height:calc(var(--size) * .9);text-align:center;border-radius:8px}.letter-correct{background-color:var(--wordle-correct);border-color:var(--wordle-correct);color:var(--foreground)}.letter-correct-animate{animation:reveal-correct .5s ease-in-out forwards calc(var(--i) * .15s)}.letter-wrong-position{background-color:var(--wordle-wrong-position);border-color:var(--wordle-wrong-position);color:var(--foreground)}.letter-wrong-position-animate{animation:reveal-wrong-position .5s ease-in-out forwards calc(var(--i) * .15s)}.letter-incorrect{background-color:var(--wordle-incorrect);border-color:var(--wordle-incorrect);color:var(--foreground)}.letter-incorrect-animate{animation:reveal-incorrect .5s ease-in-out forwards calc(var(--i) * .15s)}.wordle-preview{flex-wrap:wrap;gap:.25rem;display:flex}.wordle-preview-letter{width:1.75rem;height:1.75rem;color:var(--foreground);border:1px solid gray;border-radius:.25rem;justify-content:center;align-items:center;font-size:.875rem;font-weight:700;line-height:1;display:inline-flex}.wordle-preview-letter-correct{background-color:var(--wordle-correct);border-color:var(--wordle-correct)}.wordle-preview-letter-wrong-position{background-color:var(--wordle-wrong-position);border-color:var(--wordle-wrong-position)}.wordle-preview-letter-incorrect{background-color:var(--wordle-incorrect);border-color:var(--wordle-incorrect)}@keyframes reveal-correct{0%{transform:perspective(400px), rotateX(0);background-color:unset;color:var(--foreground);border-color:gray}50%{background-color:unset;color:var(--foreground);border-color:gray;transform:perspective(400px)rotateX(90deg)}51%{background-color:var(--wordle-correct);border-color:var(--wordle-correct);color:var(--foreground);transform:perspective(-400px)rotateX(90deg)}to{background-color:var(--wordle-correct);border-color:var(--wordle-correct);color:var(--foreground);transform:perspective(-400px)rotateX(0)}}@keyframes reveal-wrong-position{0%{transform:perspective(400px), rotateX(0);background-color:unset;color:var(--foreground);border-color:gray}50%{background-color:unset;color:var(--foreground);border-color:gray;transform:perspective(400px)rotateX(90deg)}51%{background-color:var(--wordle-wrong-position);border-color:var(--wordle-wrong-position);color:var(--foreground);transform:perspective(-400px)rotateX(90deg)}to{background-color:var(--wordle-wrong-position);border-color:var(--wordle-wrong-position);color:var(--foreground);transform:perspective(-400px)rotateX(0)}}@keyframes reveal-incorrect{0%{transform:perspective(400px), rotateX(0);background-color:unset;color:var(--foreground);border-color:gray}50%{background-color:unset;color:var(--foreground);border-color:gray;transform:perspective(400px)rotateX(90deg)}51%{background-color:var(--wordle-incorrect);border-color:var(--wordle-incorrect);color:var(--foreground);transform:perspective(-400px)rotateX(90deg)}to{background-color:var(--wordle-incorrect);border-color:var(--wordle-incorrect);color:var(--foreground);transform:perspective(-400px)rotateX(0)}}.keyboard{width:100%;max-width:640px}.keyboard-row{justify-content:center;width:100%;display:flex}.keyboard-cell{width:var(--key-size);height:var(--key-size);flex-shrink:1;padding:4px}.keyboard-wide-cell{width:calc(1.5 * var(--key-size));font-size:calc(var(--key-size) * .3)}.keyboard-wide-cell .keyboard-button{font-size:12px}.keyboard-button{background-color:var(--wordle-default-button);border:1px solid var(--input);font-family:var(--font-geist-mono), monospace;width:100%;height:100%;font-size:16px;line-height:calc(var(--key-size) * .9);text-align:center;color:var(--foreground);transition:background-color .5s linear;transition-delay:calc(var(--i) * .2s);border-radius:10%;flex-grow:1}.keyboard-button-correct{background-color:var(--wordle-correct);border-color:var(--wordle-correct)}.keyboard-button-wrong-position{background-color:var(--wordle-wrong-position);border-color:var(--wordle-wrong-position)}.keyboard-button-incorrect{background-color:var(--wordle-incorrect);border-color:var(--wordle-incorrect)}