:root{--bg-game-dark:rgba(33, 33, 33, 1);--default-cell-bg-color:#fff;--absent-cell-bg-color:#94a3b8;--correct-cell-bg-color:rgba(32, 252, 143, 1);--present-cell-bg-color:rgba(255, 186, 8, 1)}@keyframes offsetletterflip{0%{transform:rotateX(0deg)}100%{transform:rotateX(180deg)}}@keyframes ontypecell{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes jiggle{0%{transform:translate(0,0)}25%{transform:translate(-.5rem,0)}50%{transform:translate(.5rem,0)}75%{transform:translate(-.5rem,0)}100%{transform:translate(0,0)}}@keyframes revealabsentcharcell{0%{transform:rotateX(0deg);background-color:var(--default-cell-bg-color);border-color:var(--color-secondary);color:var(--color-secondary)}50%{background-color:var(--default-cell-bg-color);border-color:var(--color-secondary);color:var(--color-secondary)}50.1%{background-color:var(--absent-cell-bg-color);border-color:var(--absent-cell-bg-color)}100%{transform:rotateX(180deg)}}@keyframes revealcorrectcharcell{0%{transform:rotateX(0deg);background-color:var(--default-cell-bg-color);border-color:var(--color-secondary);color:var(--color-secondary)}50%{background-color:var(--default-cell-bg-color);border-color:var(--color-secondary);color:var(--color-secondary)}50.1%{background-color:var(--correct-cell-bg-color);border-color:var(--correct-cell-bg-color)}100%{transform:rotateX(180deg)}}@keyframes revealpresentcharcell{0%{transform:rotateX(0deg);background-color:var(--default-cell-bg-color);border-color:var(--color-secondary);color:var(--color-secondary)}50%{background-color:var(--default-cell-bg-color);border-color:var(--color-secondary);color:var(--color-secondary)}50.1%{background-color:var(--present-cell-bg-color);border-color:var(--present-cell-bg-color)}100%{transform:rotateX(180deg)}}.game{[hidden]{display:none}.game-container{background:#fff;box-shadow:2px 4px 4px rgb(0 0 0 / .25);.text-container{padding:2rem;h2{font-size:1.5rem}p{font-size:1rem}}}.game-content{display:flex;width:100%;flex-direction:column;margin:4rem auto;@media (min-width:1024px){padding-left:2rem;padding-right:2rem;}@media (min-width:768px){max-width:80rem;}@media (min-width:640px){padding-left:1.5rem;padding-right:1.5rem;}@media (max-width:768px){margin:2rem auto;}}.bg-game-grey{background-color:rgb(221 221 221)}.bg-game-cell-correct{background-color:var(--correct-cell-bg-color)}.bg-game-cell-present{background-color:var(--present-cell-bg-color)}.bg-absent{background-color:#94a3b8}.cell{margin:.25rem .34rem;border-radius:4px;text-shadow:1.5px 1.5px #fff;font-size:30px;width:46px;height:46px;display:flex;justify-content:center;align-items:center;&.absent{background-color:#ddd}}.completed-row{.cell{border:1px solid rgb(0 0 0 / .3)}}.current-row{.cell{margin-bottom:.45rem;background-color:#fff;box-shadow:inset 0 2px 2px rgb(0 0 0 / .3);filter:drop-shadow(0 4px 2px rgb(0 0 0 / .25))}}.high-contrast{--correct-cell-bg-color:#fb923c;--present-cell-bg-color:#22d3ee}.cell-fill-animation{animation:ontypecell linear;animation-duration:0.35s}.cell-reveal{animation-duration:0.35s;animation-timing-function:linear;animation-fill-mode:backwards}.cell-reveal.absent{animation-name:revealabsentcharcell}.cell-reveal.correct{animation-name:revealcorrectcharcell}.cell-reveal.present{animation-name:revealpresentcharcell}.cell-reveal>.letter-container{animation:offsetletterflip 0.35s linear;animation-fill-mode:backwards;font-style:normal;font-weight:400;font-size:32px;line-height:32px;text-align:center;letter-spacing:-.02em;text-transform:uppercase}svg.link-cursor{transition:all 250ms}svg.link-cursor:hover{transform:scale(1.2)}.jiggle{animation:jiggle linear;animation-duration:250ms}.navbar,.keyboard-container{background:var(--bg-game-dark)}.navbar{border-bottom:4px solid var(--color-primary);padding:2em 1.5em;filter:drop-shadow(0 5px 6px rgb(0 0 0 / .15));.header{flex-grow:1;max-width:400px;.logo{width:100%;height:auto}h1,h2{display:none}}}.keyboard-container{padding:1.5rem 2rem;border-top:1px solid var(--color-primary)}.keyboard{background:linear-gradient(180deg,#000000 10%,var(--bg-game-dark) 70%);border:1px solid var(--bg-game-dark);border-radius:10px;padding:2rem;max-width:521px;margin:auto;.key{box-shadow:0 1px 0 rgb(0 0 0 / .3);border-radius:5px;border:unset;font-family:var(--font-sans);font-style:normal;font-weight:400;font-size:20px;line-height:1.6;text-align:center;text-transform:lowercase;margin:.15rem .2rem;user-select:none;display:flex;justify-content:center;align-items:center;&.enter{color:#fff;background-color:#3f71e0;font-size:16px;text-transform:uppercase}&.delete{background-color:#999;svg{width:1.75rem;height:1.75rem}}}}.navbar-content{display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem}.right-icons{display:flex}.right-icons,.left-icons{width:100px;color:#fff}.icon{background:var(--color-primary);box-shadow:0 1px 0 rgb(0 0 0 / .3);border-radius:5px;width:44px;height:44px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;margin-right:.75rem;svg{width:24px;height:24px}}sup{font-size:1.25rem}h5,.h5{margin:0 0 .25rem}@media (max-width:420px){.navbar{padding:1em 1em 1.5em}.navbar-content{padding:0;.header{order:1}.right-icons,.left-icons{order:2}.left-icons .icon{margin-left:auto}}.keyboard-container{padding:0;max-width:100vw;.keyboard{padding:1rem;.key{min-width:9%}.key.enter{min-width:70px}}}.game-modal .game-modal-content .stats .flex-align-center{width:110px;height:110px}.game-modal{padding:1,5rem 1rem;max-width:96vw}}@media (max-width:568px){.keyboard-container button{padding:0;color:inherit}.game-modal .game-modal-content .grey-banner{flex-direction:column;.share-button{padding:.7rem .5rem .65rem;margin:1rem auto .5rem;width:100%}}}}.alert{position:fixed;left:50%;top:10rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:300px;min-height:250px;border:1px solid var(--color-secondary);background-color:var(--present-cell-bg-color);box-shadow:0 4px 2px rgba(0,0,0,.15%);max-width:100%;text-transform:uppercase;z-index:9999;border-radius:.5rem;.alert-message{font-size:1.5em;line-height:1.4;color:var(--bg-game-dark);text-align:center;@media (min-width:640px){font-size:2em;}}}.game-portal{overflow-y:auto;z-index:999;.modal-base{display:flex;text-align:center;min-height:100vh;justify-content:center;align-items:center}.game-modal{font-family:var(--font-sans);width:800px;max-width:90vw;padding:2rem;overflow:visible;background-color:#fff;border-radius:.5rem;position:relative;.close{position:absolute;top:-.5rem;right:-.5rem;svg{height:3rem;width:3rem;background:#fff;border-radius:50%}}.progress-bar{display:flex;margin:.25rem;.text{width:.5rem;align-items:center;justify-content:center}.bar{width:100%;margin-left:.5rem;.bar-text{font-weight:500;font-size:.875rem;text-align:center;border-color:#000;padding:.125rem}}}.game-modal-content{h4{font-size:1.5rem;font-weight:500;line-height:1.75;margin-top:2rem}.setting-box{display:flex;text-align:center;justify-content:space-between;padding-top:.75rem;padding-bottom:.75rem;gap:1rem}.setting-name{font-size:1.5rem;text-transform:uppercase;margin:0 0 1rem}.toggle-holder{padding:.25rem;border-radius:9999px;flex-shrink:0;width:54px;height:2rem;display:flex;align-items:center}.toggle-button{width:1.5rem;height:1.5rem;background-color:#fff;border-radius:9999px}.stats{font-size:14px;margin-top:.5rem;display:flex;justify-content:center;.score{font-weight:700;font-size:3rem;line-height:1.4;color:#fff;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .5))}flex-wrap:wrap;.stats-box{width:120px;margin:1%;border:4px solid #fff;background:var(--color-primary);border-radius:16px;box-shadow:0 4px 2px rgb(0 0 0 / .15);color:#fff;height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center}}.stats-graph{max-width:360px;margin:0 auto;border:1px solid var(--color-primary);padding:1rem;border-radius:6px;font-size:.875rem;line-height:1.25rem}.grey-banner{width:100%;background:#eee;padding:1rem 2rem;margin-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;.share-button{padding:.5rem 5rem;margin-left:auto;border-radius:16px;font-size:1.25rem;background-color:var(--present-cell-bg-color);border:1px solid;box-shadow:(0 4px 2px rgb(0 0 0 / .15));max-width:100%;text-transform:uppercase;max-height:50px}.share-button:hover{box-shadow:none}.time{font-size:2rem;font-weight:500;line-height:1.75rem}}.cell.absent{background-color:#94a3b8}}}}