:root{--letter-tile-size: 50px;--letter-tile-spacing: 5px;--body-bg-color: #e4f0da;--main-text-color: #111;--letter-tile-bg-color: #fee6e3;--letter-tile-border-color: #111;--letter-tile-shadow-color: #111;--letter-tile-wrong-bg-color: #aec6cf;--letter-tile-misplaced-bg-color: #ffb347;--letter-tile-correct-bg-color: #77dd77;--cursor-bg-color: #111;--result-tile-bg-color-loose: #aec6cf;--result-tile-bg-color-win: #77dd77;--active-switch-bg-color: #11111141}body:has(.halloween-button.language-switcher__button--active){--body-bg-color: #000000;--main-text-color: #f5f5f5;--letter-tile-bg-color: #4b3621;--letter-tile-border-color: #f5f5f5;--letter-tile-shadow-color: #f5f5f5;--letter-tile-wrong-bg-color: #9a0909;--letter-tile-misplaced-bg-color: #cc5500;--letter-tile-correct-bg-color: #228b22;--cursor-bg-color: #f5f5f5;--result-tile-bg-color-loose: #3d2b1f;--result-tile-bg-color-win: #228b22;position:relative}body:has(.halloween-button.language-switcher__button--active):before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3csvg%20width='256'%20height='256'%20viewBox='0%200%20256%20256'%20xmlns='http://www.w3.org/2000/svg'%20role='img'%20aria-labelledby='title%20desc'%20%3e%3ctitle%20id='title'%3eFunny%20Ghost%3c/title%3e%3cdesc%20id='desc'%3eA%20cute,%20funny%20ghost%20floating%20with%20a%20smile%20and%20tiny%20blush.%3c/desc%3e%3c!--%20Gentle%20float%20animation%20--%3e%3cg%3e%3canimateTransform%20attributeName='transform'%20type='translate'%20values='0%20-3;%200%203;%200%20-3'%20dur='3.5s'%20repeatCount='indefinite'/%3e%3c!--%20Soft%20shadow%20(no%20background%20rectangle,%20so%20still%20transparent)%20--%3e%3cellipse%20cx='128'%20cy='210'%20rx='46'%20ry='10'%20fill='black'%20opacity='0.12'%3e%3canimate%20attributeName='opacity'%20values='0.12;0.06;0.12'%20dur='3.5s'%20repeatCount='indefinite'/%3e%3c/ellipse%3e%3c!--%20Ghost%20body%20--%3e%3cpath%20d='M128%2034%20c-35%200-64%2026-64%2058%20v42%20c0%208%200%2016%203%2023%20c3%207%209%2011%2016%2010%20c8-1%2013-6%2019-9%20c6-3%2013-3%2019%200%20c6%203%2013%208%2021%208%20s15-5%2021-8%20c6-3%2013-3%2019%200%20c6%203%2011%208%2019%209%20c7%201%2013-3%2016-10%20c3-7%203-15%203-23%20v-42%20c0-32-29-58-64-58z'%20fill='%23ffffff'%20stroke='%230f0f0f'%20stroke-width='4'%20stroke-linejoin='round'%20/%3e%3c!--%20Wavy%20bottom%20--%3e%3cpath%20d='M64%20138%20c9%209%2018%2013%2027%2013%20s18-4%2027-13%20c9%209%2018%2013%2027%2013%20s18-4%2027-13%20c9%209%2018%2013%2027%2013'%20fill='none'%20stroke='%230f0f0f'%20stroke-width='4'%20stroke-linecap='round'%20opacity='0.35'%20/%3e%3c!--%20Eyes%20--%3e%3cellipse%20cx='103'%20cy='100'%20rx='9'%20ry='11'%20fill='%23101010'/%3e%3cellipse%20cx='153'%20cy='100'%20rx='9'%20ry='11'%20fill='%23101010'/%3e%3c!--%20Tiny%20eye%20highlight%20--%3e%3ccircle%20cx='100'%20cy='96'%20r='2'%20fill='%23ffffff'/%3e%3ccircle%20cx='150'%20cy='96'%20r='2'%20fill='%23ffffff'/%3e%3c!--%20Smile%20--%3e%3cpath%20d='M108%20124%20q20%2016%2040%200'%20fill='none'%20stroke='%23101010'%20stroke-width='4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c!--%20Blush%20--%3e%3cellipse%20cx='86'%20cy='118'%20rx='8'%20ry='5'%20fill='%23ff7aa2'%20opacity='0.35'/%3e%3cellipse%20cx='170'%20cy='118'%20rx='8'%20ry='5'%20fill='%23ff7aa2'%20opacity='0.35'/%3e%3c!--%20Cheeky%20little%20hand%20wave%20--%3e%3cpath%20d='M54%20118%20q-6%20-8%202%20-14%20q8%20-6%2014%202%20q6%208%20-2%2014'%20fill='%23ffffff'%20stroke='%230f0f0f'%20stroke-width='4'%20stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-attachment:fixed;background-position:bottom right}*{box-sizing:border-box}html,body{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;width:100%;height:100%;color:var(--main-text-color);background-color:var(--body-bg-color);padding:0;margin:0}.app{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}.app__header{display:flex;column-gap:10px}.app__subheader{display:flex;justify-content:space-between;align-items:center;width:calc(5 * var(--letter-tile-size) + 4 * var(--letter-tile-spacing));margin-bottom:20px}.app__qa{text-transform:uppercase;font-weight:600;cursor:pointer;margin:0}.app__title{font-size:44px;flex:1 0 auto;margin:12px 0}.app__title--special-letter{display:inline-block;padding:3px 5px;border-radius:6px;border:2px solid var(--letter-tile-border-color);background-color:var(--letter-tile-bg-color);line-height:1;vertical-align:middle;box-shadow:4px 4px 0 0 var(--letter-tile-border-color);text-transform:uppercase;margin:0 5px 0 2px;font-size:27px;transform:rotate(5deg)}.app__game-inputs .word-input:not(:last-child){margin-bottom:7px}.app__game-inputs--shake .word-input:last-child{animation:shake .5s}.app__result-tile,.app__restart-button{border:2px solid var(--letter-tile-border-color);border-radius:8px;width:calc(5 * var(--letter-tile-size) + 3 * var(--letter-tile-spacing));margin-top:14px;box-shadow:4px 4px 0 0 var(--letter-tile-border-color);padding:12px;text-align:center;font-weight:600;font-size:16px;text-transform:uppercase}.app__result-tile--win,.app__restart-button--win{background-color:var(--result-tile-bg-color-win)}.app__result-tile--loose,.app__restart-button--loose{background-color:var(--result-tile-bg-color-loose)}.app__restart-button{cursor:pointer}.app__footer{position:absolute;bottom:10px;font-size:11px;color:var(--text-secondary-color);display:flex;justify-content:space-around;width:100%}.app__footer button{font-size:11px;background:transparent;color:var(--text-secondary-color);border:none;cursor:pointer}.app__footer a{color:var(--text-secondary-color)}.app__start-button{border:2px solid var(--letter-tile-border-color);border-radius:8px;box-shadow:4px 4px 0 0 var(--letter-tile-border-color);padding:12px;text-align:center;font-weight:600;font-size:16px;text-transform:uppercase;cursor:pointer;background-color:var(--result-tile-bg-color-win);margin:20px 0}.app__start-button:hover{opacity:.9}.app__timer{font-size:24px;font-weight:700;margin-bottom:20px;color:var(--success-color)}.app__buttons{display:flex;flex-direction:column;gap:10px;justify-content:center;margin-top:20px}.app__save-button{border:2px solid var(--letter-tile-border-color);border-radius:8px;box-shadow:4px 4px 0 0 var(--letter-tile-border-color);padding:12px;text-align:center;font-weight:600;font-size:16px;text-transform:uppercase;cursor:pointer;background-color:var(--result-tile-bg-color-win)}.app__save-button:hover{opacity:.9}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(20px)}40%{transform:translate(-15px)}60%{transform:translate(10px)}80%{transform:translate(-5px)}to{transform:translate(0)}}.word-input:has(.word-input__input:focus) .word-input__letter:first-child:has(.word-input__letter-side--front:empty) .word-input__letter-side--front:before{content:""}.word-input:has(.word-input__input:focus) .word-input__letter:has(.word-input__letter-side--front:not(:empty))+.word-input__letter .word-input__letter-side--front:empty:before{content:""}.word-input:has(.word-input__input:focus) .word-input__letter:last-of-type:has(.word-input__letter-side--front:not(:empty)) .word-input__letter-side--front:before{content:"";left:auto;right:5px}.word-input__letters{width:calc(5 * var(--letter-tile-size) + 4 * var(--letter-tile-spacing));display:flex;position:relative}.word-input__letter{width:var(--letter-tile-size);height:var(--letter-tile-size);margin-right:var(--letter-tile-spacing);cursor:pointer;position:relative;z-index:1}.word-input__letter:last-child{margin-right:0}.word-input__letter:after{content:"";position:absolute;background-color:var(--letter-tile-shadow-color);width:100%;height:100%;z-index:-1;top:3px;left:3px;border-radius:8px}.word-input__letter-side--front,.word-input__letter.word-input__letter--state .word-input__letter-side--back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;transition:opacity .25s;display:flex;align-items:center;justify-content:center;font-size:1.5em;font-weight:500;transform-style:preserve-3d;backface-visibility:hidden;border:2px solid var(--letter-tile-border-color)}.word-input__letter-side--front{background-color:var(--letter-tile-bg-color)}.word-input__letter-side--front:before{position:absolute;height:calc(100% - 16px);top:8px;left:5px;background-color:var(--cursor-bg-color);width:2px;z-index:2;animation:cursor-blink 1.2s steps(2) infinite}.word-input__letter--state:nth-child(1) .word-input__letter-side--front,.word-input__letter--state:nth-child(1) .word-input__letter-side--back{animation-delay:.3s;animation-fill-mode:forwards}.word-input__letter--state:nth-child(2) .word-input__letter-side--front,.word-input__letter--state:nth-child(2) .word-input__letter-side--back{animation-delay:.6s;animation-fill-mode:forwards}.word-input__letter--state:nth-child(3) .word-input__letter-side--front,.word-input__letter--state:nth-child(3) .word-input__letter-side--back{animation-delay:.9s;animation-fill-mode:forwards}.word-input__letter--state:nth-child(4) .word-input__letter-side--front,.word-input__letter--state:nth-child(4) .word-input__letter-side--back{animation-delay:1.2s;animation-fill-mode:forwards}.word-input__letter--state:nth-child(5) .word-input__letter-side--front,.word-input__letter--state:nth-child(5) .word-input__letter-side--back{animation-delay:1.5s;animation-fill-mode:forwards}.word-input__letter--state .word-input__letter-side--front{animation-name:flip-front;animation-duration:.3s}.word-input__letter--state .word-input__letter-side--back{transform:rotateY(180deg);animation-name:flip-back;animation-duration:.3s}.word-input__letter--state_correct .word-input__letter-side--back{background-color:var(--letter-tile-correct-bg-color)}.word-input__letter--state_wrong .word-input__letter-side--back{background-color:var(--letter-tile-wrong-bg-color)}.word-input__letter--state_misplaced .word-input__letter-side--back{background-color:var(--letter-tile-misplaced-bg-color)}.word-input__input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}@keyframes flip-front{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@keyframes flip-back{0%{transform:rotateY(180deg)}to{transform:rotateY(0)}}@keyframes cursor-blink{0%{opacity:0}}.modal{position:fixed;z-index:9999;padding-top:25px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal__content{margin:auto;padding:20px;border:2px solid var(--letter-tile-border-color);background-color:var(--letter-tile-bg-color);width:90%;max-width:520px;border-radius:8px;position:relative}.modal__close-button{position:absolute;border:2px solid var(--letter-tile-border-color);background-color:var(--letter-tile-bg-color);border-radius:6px;width:30px;height:30px;font-weight:600;top:10px;right:10px;display:flex;justify-content:center;align-items:center;cursor:pointer}.modal__close-button img{width:14px;height:auto}.modal__children h3,.modal__children h4,.modal__children p,.modal__children ul{margin:0;padding:0}.modal__children h3{font-size:21px;text-transform:uppercase;margin-bottom:8px}.modal__children h4{font-size:16px;text-transform:uppercase;font-weight:600}.modal__children p,.modal__children ul{font-size:15px;margin:8px 0}.modal__children ul{padding-left:20px;margin-bottom:12px}.language-switcher{background-color:#fff;height:var(--letter-tile-size)/2;border:2px solid var(--letter-tile-border-color);border-radius:8px;position:relative;box-shadow:3px 3px 0 var(--letter-tile-border-color);overflow:hidden}.language-switcher__button{border:0;background-color:transparent;cursor:pointer;height:100%;margin:0;padding:8px;font-weight:600;color:#afadad;width:40px}.language-switcher__button--active{position:relative;z-index:1;color:var(--main-text-color)}.language-switcher__button--active:before{content:"";position:absolute;height:100%;width:100%;top:-1px;right:0;background-color:var(--letter-tile-bg-color);border-radius:6px;z-index:-1;border:1px solid var(--letter-tile-border-color)}.language-switcher__modal-buttons{display:flex;column-gap:8px;justify-content:space-between}.language-switcher__modal-button{width:50%;height:var(--letter-tile-size)/2;border:2px solid var(--letter-tile-border-color);border-radius:8px;background-color:#fff;padding:8px;font-weight:600;box-shadow:3px 3px 0 var(--letter-tile-border-color);text-transform:uppercase;cursor:pointer;color:var(--main-text-color)}.language-switcher__modal-button--accept{background-color:var(--letter-tile-misplaced-bg-color)}.language-switcher__modal-button--decline{background-color:var(--letter-tile-wrong-bg-color)}.word-input-example{width:calc(5 * var(--letter-tile-size) + 4 * var(--letter-tile-spacing));display:flex}.word-input-example__letter{width:calc(var(--letter-tile-size) / 1.25);height:calc(var(--letter-tile-size) / 1.25);margin-right:var(--letter-tile-spacing);border-radius:6px;border:2px solid var(--letter-tile-border-color);display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:500;text-transform:uppercase;background-color:var(--letter-tile-wrong-bg-color)}.word-input-example__letter--misplaced{background-color:var(--letter-tile-misplaced-bg-color)}.word-input-example__letter--correct{background-color:var(--letter-tile-correct-bg-color)}.privacy-modal{background-color:#fee6e3;border:2px solid #111;border-radius:8px;box-sizing:border-box;position:fixed;width:85%;bottom:20px;right:50%;transform:translate(50%);padding:24px;text-align:center}.privacy-modal__content{color:#111;font-size:14px;margin-bottom:12px}.privacy-modal__content a{color:#111;font-weight:6PrivacyModal 0}.privacy-modal__button{background-color:#e4f0da;border:2px solid #111;border-radius:8px;color:#111;padding:6px;position:relative;transform-style:preserve-3d;cursor:pointer}.privacy-modal__button:after{content:"";background-color:#111;border-radius:8px;display:block;height:100%;left:0;width:100%;position:absolute;top:-2px;transform:translate(6px,6px) translateZ(-1px);transition:transform .2s ease-out}.result-card{background:var(--body-bg-color);border-radius:8px;padding:20px;width:100%;max-width:520px;text-align:center;box-shadow:0 2px 4px #0000001a;border:2px solid var(--letter-tile-border-color)}.result-card__title{margin-bottom:20px;color:var(--text-primary)}.result-card__content{display:flex;flex-direction:column;gap:8px}.result-card__stat{font-size:15px;color:var(--text-secondary);margin:8px 0}
