html{--game-spacing:32px;--header-height:4rem;--color-success:#17824d;--color-warning:#998000;--color-error:#c32222;--color-gray-100:#1a1a1a;--color-gray-300:#404040;--color-gray-500:gray;--color-gray-700:#bfbfbf;--color-gray-900:#e6e6e6;overflow-y:scroll}body{font-family:sans-serif}@media (height<=600px){body{--game-spacing:8px}}button{cursor:pointer;text-align:left;color:inherit;background:0 0;border:none;margin:0;padding:0}.wrapper{flex-direction:column;min-height:100%;display:flex}header{height:var(--header-height);border-bottom:1px solid var(--color-gray-700);color:var(--color-gray-300);display:flex}header .side{width:var(--header-height);place-content:center;display:grid}h1{font-size:2rem;line-height:var(--header-height);text-align:center;flex:1}@media (width<=25rem){h1{font-size:1.25rem}}.game-wrapper{gap:var(--game-spacing);padding:var(--game-spacing)32px;flex-direction:column;min-width:250px;max-width:min(500px,58vh,100%);margin:0 auto}.guess-results{flex-direction:column;flex:1;justify-content:flex-start;margin-top:2rem;display:flex}.guess{gap:4px;margin-bottom:4px;display:flex}.cell{aspect-ratio:1;border:2px solid var(--color-gray-700);border-radius:var(--radius);place-content:center;width:20%;font-size:2rem;display:grid;position:relative}.guess:first-of-type .cell:first-of-type{--radius:4px 0px 0px 0px}.guess:first-of-type .cell:last-of-type{--radius:0px 4px 0px 0px}.guess:last-of-type .cell:last-of-type{--radius:0px 0px 4px 0px}.guess:last-of-type .cell:first-of-type{--radius:0px 0px 0px 4px}.cell.correct{background:var(--color-success);border-color:var(--color-success);color:#fff}.cell.incorrect{background:var(--color-gray-300);border-color:var(--color-gray-300);color:#fff}.cell.misplaced{background:var(--color-warning);border-color:var(--color-warning);color:#fff}.keyboard-wrapper{margin-top:2rem}.keyboard-row{justify-content:center;align-items:center;gap:8px;margin-bottom:8px;display:flex}@media (width<500px){.keyboard-row{gap:2px}}.keyboard-key{border:2px solid var(--color-gray-300);background-color:var(--color-gray-700);width:40px;min-width:40px;height:40px;min-height:40px;color:var(--color-gray-100);border-radius:4px;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:all .2s;display:flex}@media (width<500px){.keyboard-key{width:30px;min-width:30px;height:30px;min-height:30px;font-size:14px}}.keyboard-key.correct{background-color:var(--color-success);border-color:var(--color-success);color:#fff}.keyboard-key.misplaced{background-color:var(--color-warning);border-color:var(--color-warning);color:#fff}.keyboard-key.incorrect{background-color:var(--color-gray-300);border-color:var(--color-gray-300);color:var(--color-gray-700)}.guess-input-wrapper{flex-direction:column;gap:8px;height:6.75rem;margin-top:2rem;display:flex}.guess-input-wrapper label{font-size:1.25rem}.guess-input-wrapper input{border:2px solid var(--color-gray-300);outline-offset:4px;border-radius:4px;width:100%;padding:8px 16px;font-size:2rem;display:block}.banner{text-align:center;will-change:transform;border-radius:4px 4px 0 0;width:100%;max-width:600px;margin:0 auto;padding:32px;animation:.75s cubic-bezier(0,.72,.24,1.02) slideUp;position:fixed;bottom:0;left:0;right:0}.happy.banner{background:var(--color-success);color:#fff}.sad.banner{background:var(--color-error);color:#fff}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-reach-dialog-content]{border-radius:8px;padding:24px 32px;position:relative}.modal-close-btn{cursor:pointer;padding:16px;position:absolute;top:0;right:0}.modal-title{margin-bottom:.5em}.banner{-webkit-backdrop-filter:blur(8px);z-index:10;text-shadow:0 2px 4px #0003;user-select:none;border:2px solid #00000080;border-radius:8px;flex-direction:column;align-items:center;gap:8px;max-height:10vh;font-size:1.25rem;font-weight:700;line-height:1.4;display:flex;position:absolute;top:32px;box-shadow:0 -4px 16px #00000040}.win-message{background:var(--color-success)}.lose-message{background:var(--color-error);color:#e4f0ff}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0%)}}
/*# sourceMappingURL=index.9a4b5768.css.map */