:root{--bg-color: #11111b;--bg-color-hover: #1e1e2e;--text-color-primary: #f1f1f1;--text-color-secondary: #aaa}html{box-sizing:border-box;font-family:sans-serif;font-size:16px;scroll-behavior:smooth}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}body{position:relative;margin:0;width:100%;overflow-x:hidden;background-color:var(--bg-color)}button,input,select{background-color:transparent;border:thin solid var(--text-color-secondary);border-radius:.4rem;padding:.5rem;outline:none;cursor:pointer;font-family:inherit;transition:all .3s ease;display:block;color:var(--text-color-primary)}button:hover{background-color:var(--bg-color-hover)}button:disabled{cursor:not-allowed;opacity:.5}button:disabled:hover{background-color:unset}a{text-decoration:none;transition:.3s ease;display:inline-block;color:var(--text-color-primary)}h1,h2,h3,h4,h5,h6{font-weight:400;color:var(--text-color-primary)}figure{-webkit-user-select:none;user-select:none;flex-shrink:0;display:flex}img,video,iframe{display:block;width:100%;max-width:100%;height:auto;object-fit:cover;object-position:center}li{list-style:none}div,p,span,li,label{text-wrap:pretty;font-size:.912rem;color:var(--text-color-secondary)}select,option{cursor:pointer;background-color:var(--bg-color);color:var(--text-color-primary)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.container{width:95%;max-width:64rem;margin-inline:auto;overflow:hidden}.flex-c-c{display:flex;justify-content:center;align-items:center}.section__modal{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000025;opacity:0;z-index:1;pointer-events:none;transition:all .3s ease}.section__modal.modal--show{opacity:1;pointer-events:auto;z-index:2}.section__modal.modal--show .modal__container{transform:scale(1)}@starting-style{.section__modal.modal--show .modal__container{transform:scale(0)}}.modal__container{position:relative;width:80%;max-width:25rem;padding:1rem;display:flex;flex-direction:column;gap:1rem;background-color:var(--color-bg-tertiary);border:thin solid var(--color-text-secondary);border-radius:.4rem;overflow:hidden;transform:scale(0);transition:all .3s ease}.modal__close{position:absolute;top:.5rem;right:.5rem;border:none;padding:.25rem;background-color:var(--color-bg-tertiary)}@keyframes letter-scale{0%{transform:scale(.9)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes flip-error{0%{transform:rotateX(0);background-color:#1f1f26;border-color:#1f1f26}50%{transform:rotateX(90deg);background-color:#1f1f26;border-color:#1f1f26}to{transform:rotateX(0);background-color:#1f1f26;border-color:#1f1f26}}@keyframes flip-almost{0%{transform:rotateX(0);background-color:#1f1f26;border-color:#1f1f26}50%{transform:rotateX(90deg);background-color:#1f1f26;border-color:#1f1f26}to{transform:rotateX(0);background-color:#63610e;border-color:#63610e}}@keyframes flip-correct{0%{transform:rotateX(0);background-color:#1f1f26;border-color:#1f1f26}50%{transform:rotateX(90deg);background-color:#1f1f26;border-color:#1f1f26}to{transform:rotateX(0);background-color:#0e631f;border-color:#0e631f}}.App{min-height:32rem;height:100dvh;max-height:720px;display:flex;flex-direction:column;justify-content:center;align-items:center}.section__app{padding-block:1rem}.app__header{display:flex;flex-direction:column;align-items:center;gap:.25rem}.app__subtitle{display:flex;align-items:center;gap:.25rem}.main__content{display:flex;flex-direction:column;gap:2rem}.main__content:has(.section__game-over){gap:.5rem}.section__board{width:70%;max-width:15rem;margin-inline:auto;display:flex;flex-direction:column;gap:.25rem}.board__row{display:flex;width:100%;gap:.25rem}.clue__container{position:absolute;top:0;left:0;right:0;width:80%;max-width:max-content;margin-inline:auto;background-color:#45475a;padding:.5rem;border-radius:.4rem;border:thin solid #f1f1f1;font-size:1rem;transform:translateY(-100%);transition:transform .5s ease}.clue__container.clue__container--show{animation:clue-hide 4s ease}.clue{color:#f1f1f1;text-align:center}@keyframes clue-hide{0%{transform:translateY(-100%)}20%{transform:translateY(5rem)}80%{transform:translateY(5rem)}to{transform:translateY(-150%)}}.letter{flex:1;aspect-ratio:1/1;border:2px solid #414458;border-radius:.5rem;font-size:clamp(.75rem,6vw,1.625rem);font-weight:400;color:var(--text-color-primary);text-align:center;-webkit-user-select:none;user-select:none;unicode-bidi:plaintext;direction:ltr}.letter.letter__letter{animation:letter-scale .2s ease;border-color:#8c90a8}.letter.letter--error{animation:flip-error .2s ease var(--delay, 0ms) forwards}.letter.letter--almost{animation:flip-almost .2s ease var(--delay, 0ms) forwards}.letter.letter--correct{animation:flip-correct .2s ease var(--delay, 0ms) forwards}.game-over__container{width:100%;max-width:15rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem}.game-over__header{display:flex;align-items:center;gap:.25rem}.game-over__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.game-over__text{font-size:.9rem}.game-over__subtexts{display:flex;flex-direction:column;gap:.25rem}.game-over__correct-word{padding:.3rem .75rem;font-weight:600;color:var(--text-color-primary);border:medium dotted var(--text-color-secondary);border-radius:.25rem}.game-over__word{font-weight:400;color:#7999e1}.btn__reset{width:100%;max-width:3rem;aspect-ratio:1/1;border-radius:50%}.img__game-over{width:1.5rem;height:1.5rem;transform:rotateY(180deg);animation:rotate 5s linear infinite}@keyframes rotate{0%{transform:rotateY(180deg) rotate(0)}to{transform:rotateY(180deg) rotate(-360deg)}}.section__keyboard{width:100%;margin-inline:auto;padding-bottom:1rem;overflow-x:auto;position:relative}.keyboard__content{width:max-content;margin-inline:auto;display:flex;flex-direction:column;gap:.25rem}.keyboard__row{display:flex;align-items:center;margin-inline:auto;gap:.25rem}.keyboard__key{border:thin solid var(--text-color-secondary);background-color:#656780;border-radius:.35rem;font-weight:400;color:var(--text-color-primary);text-align:center;padding:0;min-height:36px;min-width:1rem;width:8vw;max-width:2.5rem;unicode-bidi:plaintext;direction:ltr;font-size:clamp(.75rem,3.5vw,1rem);transition:all .3s ease}.keyboard__key.key--correct{background-color:#0e631f;border-color:#0e631f}.keyboard__key.key--almost{background-color:#63610e;border-color:#63610e}.keyboard__key.key--error{background-color:#1f1f26;border-color:#1f1f26}.keyboard__key.keyboard__key--icon{min-width:2rem;background-color:#dc2323;border-color:#dc2323;border:none}.keyboard__key:has(.icon--enter){background-color:#2e8b57;border-color:#2e8b57}.img__keyboard__key{width:70%}.modal__container{background-color:var(--bg-color);border:thin solid #666}