*,:before,:after{box-sizing:border-box}body{margin:0;padding:0}#root{width:100%}.app{--bg:#121213;--text:#fff;--border:#3a3a3c;--border-light:#565758;--tile-active:#999;--tile-absent:#3a3a3c;--key-bg:#818384;--key-absent:#3a3a3c;--header-btn:#3a3a3c;--header-btn-hover:#565758;--modal-bg:#1a1a1b;--progress:#818384;--toast-bg:#fff;--toast-text:#121213}.app.light{--bg:#fff;--text:#121213;--border:#d3d6da;--border-light:#878a8c;--tile-active:#878a8c;--tile-absent:#787c7e;--key-bg:#d3d6da;--key-absent:#787c7e;--header-btn:#d3d6da;--header-btn-hover:#b0b3b7;--modal-bg:#f9f9f9;--progress:#878a8c;--toast-bg:#121213;--toast-text:#fff}.app{background:var(--bg);min-height:100vh;color:var(--text);flex-direction:column;align-items:center;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;display:flex;position:relative}.header{border-bottom:1px solid var(--border);box-sizing:border-box;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding:12px 16px;display:grid}.header h1{letter-spacing:.1em;text-transform:uppercase;text-align:center;margin:0;font-size:2rem;font-weight:700}.header>:first-child{justify-content:flex-start;display:flex}.header>:last-child{justify-content:flex-end;align-items:center;gap:8px;display:flex}.header-btn{background:var(--header-btn);color:var(--text);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;border:none;border-radius:4px;padding:6px 12px;font-size:.8rem;font-weight:700}.header-btn:hover{background:var(--header-btn-hover)}.theme-btn{background:var(--header-btn);color:var(--text);cursor:pointer;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;display:flex}.theme-btn:hover{background:var(--header-btn-hover)}.progress{color:var(--progress);letter-spacing:.05em;margin-top:10px;font-size:.85rem;font-weight:700}.message{background:var(--toast-bg);color:var(--toast-text);z-index:10;border-radius:4px;padding:8px 16px;font-size:.9rem;font-weight:700;position:absolute;top:80px}.grid{flex-direction:column;gap:6px;margin-top:16px;display:flex}.row{gap:6px;display:flex}.tile{perspective:250px;-webkit-user-select:none;user-select:none;width:62px;height:62px;position:relative}.tile-inner{width:100%;height:100%;transform-style:preserve-3d;position:relative}.tile-inner.flipped{transform:rotateX(-180deg)}.tile-face{text-transform:uppercase;color:var(--text);border:2px solid var(--border);backface-visibility:hidden;background:0 0;justify-content:center;align-items:center;font-size:2rem;font-weight:700;display:flex;position:absolute;inset:0}.tile-back{transform:rotateX(180deg)}.tile-face.active{border-color:var(--tile-active)}.tile-face.correct{color:#fff;background:#538d4e;border-color:#538d4e}.tile-face.present{color:#fff;background:#b59f3b;border-color:#b59f3b}.tile-face.absent{background:var(--tile-absent);border-color:var(--tile-absent);color:#fff}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}.tile.pop{animation:.1s pop}@keyframes flip{0%{transform:rotateX(0)}to{transform:rotateX(-180deg)}}.tile-inner.flipping{animation:.3s both flip}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.row.shake{animation:.5s shake}.keyboard{flex-direction:column;gap:8px;margin-top:20px;display:flex}.keyboard-row{justify-content:center;gap:6px;display:flex}.key{background:var(--key-bg);min-width:43px;height:58px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;text-transform:uppercase;border:none;border-radius:4px;padding:0 6px;font-size:.85rem;font-weight:700}.key.wide{min-width:65px;font-size:.75rem}.key.correct{color:#fff;background:#538d4e}.key.present{color:#fff;background:#b59f3b}.key.absent{background:var(--key-absent);color:#fff}.overlay{z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--modal-bg);border:1px solid var(--border);border-radius:8px;flex-direction:column;align-items:center;gap:12px;min-width:280px;padding:32px 40px;display:flex;position:relative}.modal-close{color:var(--progress);cursor:pointer;background:0 0;border:none;padding:4px;font-size:1.1rem;line-height:1;position:absolute;top:10px;right:12px}.modal-close:hover{color:var(--text)}.modal-title{text-transform:uppercase;letter-spacing:.05em;text-align:center;width:100%;font-size:1.4rem;font-weight:700}.modal-sub{color:var(--progress);font-size:1rem}.modal-sub strong{color:var(--text);letter-spacing:.1em}.modal-actions{gap:10px;margin-top:8px;display:flex}.modal-btn{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:#538d4e;border:none;border-radius:4px;padding:10px 20px;font-size:.9rem;font-weight:700}.modal-btn:hover{filter:brightness(1.15)}.modal-btn.share{background:#b59f3b}.settings-modal{gap:20px;width:320px}.setting-row{justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.setting-label{text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:6px;font-size:.85rem;font-weight:700;display:flex}.setting-tooltip{border:1.5px solid var(--progress);width:16px;height:16px;color:var(--progress);cursor:default;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.65rem;font-weight:700;display:inline-flex;position:relative}.setting-tooltip:after{content:attr(title);background:var(--modal-bg);border:1px solid var(--border);text-transform:none;letter-spacing:0;color:var(--text);pointer-events:none;opacity:0;z-index:10;border-radius:6px;width:220px;padding:8px 10px;font-size:.75rem;font-weight:400;line-height:1.5;transition:opacity .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.setting-tooltip:hover:after{opacity:1}.setting-toggle{border:1.5px solid var(--border);cursor:pointer;border-radius:4px;flex-shrink:0;display:flex;overflow:hidden}.toggle-option{text-transform:uppercase;letter-spacing:.05em;color:var(--progress);-webkit-user-select:none;user-select:none;padding:5px 12px;font-size:.75rem;font-weight:700}.toggle-option.active{background:var(--header-btn);color:var(--text)}.info-modal{max-width:320px}.info-text{color:var(--progress);text-align:center;margin:0;font-size:.95rem;line-height:1.6}.dict-modal{width:340px;max-height:80vh;padding-right:0;overflow:hidden}.dict-modal .modal-title{padding-right:40px}.dict-list{scrollbar-width:thin;scrollbar-color:transparent transparent;flex-direction:column;gap:16px;width:100%;max-height:55vh;padding:4px 40px 4px 2px;display:flex;overflow-y:auto}.dict-list:hover{scrollbar-color:var(--border-light) transparent}.dict-list::-webkit-scrollbar{width:6px}.dict-list::-webkit-scrollbar-track{background:0 0}.dict-list::-webkit-scrollbar-thumb{background:0 0;border-radius:3px;transition:background .2s}.dict-list:hover::-webkit-scrollbar-thumb{background:var(--border-light)}.dict-list::-webkit-scrollbar-button{display:none}.dict-group{flex-direction:column;gap:6px;display:flex}.dict-letter{letter-spacing:.1em;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:4px;font-size:.75rem;font-weight:700}.dict-group-words{flex-wrap:wrap;gap:4px 10px;display:flex}.dict-word{letter-spacing:.08em;color:var(--progress);text-transform:uppercase;font-size:.8rem;font-weight:700}.dict-word--possible{color:var(--text)}@media (width<=500px){.header{grid-template-columns:1fr auto 1fr;padding:8px 10px}.header h1{padding:0 6px;font-size:1.3rem}.header-btn{padding:4px 6px;font-size:.65rem}.theme-btn{width:26px;height:26px;font-size:.85rem}.header>:last-child{gap:5px}.grid{gap:5px;margin-top:10px}.row{gap:5px}.tile{width:min(52px,16.6667vw - 8.33333px);height:min(52px,16.6667vw - 8.33333px)}.tile-face{font-size:min(1.6rem,9.16667vw - 4.58333px)}.keyboard{box-sizing:border-box;gap:6px;width:100%;margin-top:10px;margin-bottom:12px;padding:0 6px}.keyboard-row{gap:4px}.key{flex:none;width:min(36px,10vw - 4.8px);min-width:0;height:46px;padding:0;font-size:.75rem}.key.wide{width:min(54px,15vw - 7.2px);min-width:0;font-size:.65rem}.modal{box-sizing:border-box;min-width:0;max-width:calc(100vw - 32px);padding:24px 20px}.dict-modal,.settings-modal{width:auto;max-width:calc(100vw - 32px)}}