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