:root{--bg-primary:#121213;--tile-empty-border:#3a3a3c;--tile-filled-border:#565758;--tile-bg-empty:transparent;--tile-bg-filled:transparent;--tile-bg-correct:#538d4e;--tile-bg-present:#b59f3b;--tile-bg-absent:#3a3a3c;--text-primary:#fff;--text-key:#fff;--key-bg-default:#818384;--key-bg-correct:#538d4e;--key-bg-present:#b59f3b;--key-bg-absent:#3a3a3c;--tile-size:62px;--tile-gap:5px;--tile-font-size:2rem;--tile-border-width:2px;--tile-radius:0px;--key-height:58px;--key-min-width:43px;--key-radius:4px;--key-font-size:.8rem;--key-gap:6px;--keyboard-max-width:500px;--flip-duration:.5s;--pop-duration:.1s;--stagger-delay:.3s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{background-color:var(--bg-primary);color:var(--text-primary);justify-content:center;align-items:center;font-family:Helvetica Neue,Arial,sans-serif;display:flex}#app{flex-direction:column;justify-content:center;align-items:center;gap:48px;width:100%;max-width:500px;height:100%;margin-top:60px;padding:16px;display:flex}.top-bar{border-bottom:1px solid var(--tile-empty-border);background-color:var(--bg-primary);z-index:10;justify-content:space-between;align-items:center;width:100%;height:60px;padding:0 20px;display:flex;position:absolute;top:0;left:0}.top-bar-title{letter-spacing:.5px;color:var(--text-primary);font-family:Times New Roman,Times,serif;font-size:1.8rem;font-weight:700}.top-bar-left{align-items:center;gap:12px;display:flex}.hamburger-btn{display:none}.top-bar-center{align-items:center;gap:8px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.top-bar-actions{align-items:center;gap:16px;display:flex}.icon-btn{color:var(--text-primary);cursor:pointer;width:24px;height:24px;transition:opacity .15s,transform .15s}.icon-btn:hover{opacity:.7}.icon-btn:active{transform:scale(.9)}.board{grid-template-columns:repeat(5, var(--tile-size));grid-template-rows:repeat(6, var(--tile-size));gap:var(--tile-gap);justify-content:center;display:grid}.tile{width:var(--tile-size);height:var(--tile-size);font-size:var(--tile-font-size);text-transform:uppercase;color:var(--text-primary);border:var(--tile-border-width) solid var(--tile-empty-border);background-color:var(--tile-bg-empty);border-radius:var(--tile-radius);-webkit-user-select:none;user-select:none;perspective:300px;justify-content:center;align-items:center;font-weight:700;transition:none;display:flex}.tile[data-state=tbd]{border-color:var(--tile-filled-border);background-color:var(--tile-bg-filled)}.tile[data-state=correct]{border-color:var(--tile-bg-correct);background-color:var(--tile-bg-correct)}.tile[data-state=present]{border-color:var(--tile-bg-present);background-color:var(--tile-bg-present)}.tile[data-state=absent]{border-color:var(--tile-bg-absent);background-color:var(--tile-bg-absent)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}.tile.pop{animation:pop var(--pop-duration) ease-in-out}@keyframes flip-in{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-out{0%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.tile.flip-in{animation:flip-in calc(var(--flip-duration) / 2) ease-in forwards}.tile.flip-out{animation:flip-out calc(var(--flip-duration) / 2) ease-out forwards}@keyframes shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-4px)}30%,70%{transform:translate(4px)}}.row-shake{animation:.25s ease-in-out shake}.keyboard{align-items:center;gap:var(--key-gap);width:100%;max-width:var(--keyboard-max-width);touch-action:manipulation;flex-direction:column;display:flex}.keyboard-row{gap:var(--key-gap);justify-content:center;width:100%;display:flex}.key{height:var(--key-height);border-radius:var(--key-radius);background-color:var(--key-bg-default);color:var(--text-key);font-family:inherit;font-size:var(--key-font-size);text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;flex:1;justify-content:center;align-items:center;font-weight:700;transition:background-color .1s;display:flex}.key:active{opacity:.7}.key.wide{letter-spacing:.5px;flex:1.5;font-size:.7rem}.key[data-state=correct]{background-color:var(--key-bg-correct)}.key[data-state=present]{background-color:var(--key-bg-present)}.key[data-state=absent]{background-color:var(--key-bg-absent)}game-board,game-keyboard{width:100%;display:block}submit-word-form{display:block}.modal-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;animation:.3s forwards fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDownFade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(30px)}}.modal-overlay.closing{animation:.2s forwards fadeOut}.modal-content{background:var(--bg-primary);border:1px solid var(--tile-empty-border);border-radius:12px;flex-direction:column;gap:20px;width:100%;max-width:400px;margin:16px;padding:24px 24px 32px;animation:.4s cubic-bezier(.22,1,.36,1) forwards slideUpFade;display:flex;box-shadow:0 10px 40px #0006}.modal-overlay.closing .modal-content{animation:.2s ease-in forwards slideDownFade}.modal-header{justify-content:space-between;align-items:center;display:flex}.submit-title{color:var(--text-primary);margin:0;font-size:1.1rem;font-weight:700}.close-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.subtitle{color:#ffffff80;margin-top:-12px;font-size:.85rem}.submit-field{flex-direction:column;gap:8px;display:flex}.submit-field label{text-transform:uppercase;letter-spacing:1px;color:#fff9;font-size:.8rem;font-weight:600}.hint-optional{text-transform:none;letter-spacing:0;color:#ffffff4d;font-weight:400}.submit-field input{color:var(--text-primary);background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;outline:none;padding:12px 14px;font-family:inherit;font-size:1rem;transition:border-color .2s,background .2s}.submit-field input:focus{background:#ffffff14;border-color:#ffffff4d}.submit-field input::placeholder{color:#fff3}#word-input{letter-spacing:8px;text-align:center;text-transform:uppercase;font-size:1.6rem;font-weight:700}.submit-status{text-align:center;min-height:1.2em;font-size:.85rem;transition:color .2s}.submit-status.success{color:var(--tile-bg-correct)}.submit-status.error{color:#e74c3c}.submit-actions{gap:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;flex:1;padding:12px 0;font-family:inherit;font-size:.9rem;font-weight:600;transition:background-color .15s,transform .1s,opacity .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-submit{background:var(--tile-bg-correct);color:#fff}.btn-submit:hover{background:#45a049}.view-hidden{display:none!important}@media (height<=700px){:root{--tile-size:50px;--tile-font-size:1.6rem;--key-height:48px;--key-min-width:34px;--key-font-size:.7rem}}@media (width<=400px){:root{--tile-size:48px;--tile-font-size:1.5rem;--tile-gap:4px;--key-height:46px;--key-min-width:30px;--key-font-size:.65rem;--key-gap:4px}#app{gap:16px;padding:8px}.modal-content{padding:20px 16px}}.toast-notification{background-color:var(--text-primary);color:var(--bg-primary);z-index:1000;opacity:0;pointer-events:auto;cursor:pointer;border-radius:4px;padding:12px 16px;font-size:1rem;font-weight:700;transition:opacity .3s ease-in-out;position:absolute;top:70px;left:50%;transform:translate(-50%)}.toast-notification.show{opacity:1}#players-sidebar{z-index:20;background-color:#0000;border-right:none;flex-direction:column;gap:12px;width:auto;height:calc(100% - 60px);padding:16px;transition:transform .25s;display:flex;position:fixed;top:60px;left:0;overflow-y:auto}.players-list{flex-direction:column;gap:12px;display:flex}.players-empty{color:#ffffff80;text-align:center;padding:16px;font-size:.85rem;display:none}.player-row{background-color:var(--bg-primary);border:1px solid var(--tile-empty-border);border-radius:8px;justify-content:space-between;align-items:center;gap:16px;width:max-content;padding:8px 12px;display:flex;box-shadow:0 4px 6px #0000001a}.player-profile{align-items:center;display:flex}.player-avatar{object-fit:cover;border-radius:50%;width:36px;height:36px}.player-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;min-width:70px;font-size:.8rem;font-weight:600;overflow:hidden}.mini-grid{flex-direction:column;gap:2px;display:flex}.mini-row{gap:2px;display:flex}.mini-tile{border-radius:1px;width:12px;height:12px}.mini-tile-correct{background-color:var(--tile-bg-correct)}.mini-tile-present{background-color:var(--tile-bg-present)}.mini-tile-absent{background-color:var(--tile-bg-absent)}.mini-tile-empty{border:1px solid var(--tile-empty-border);background-color:#0000}.sidebar-overlay{display:none}@media (width>=769px){#players-sidebar{transform:translate(0)}.hamburger-btn{display:none!important}}@media (width<=768px){#players-sidebar{z-index:100;transform:translate(-100%)}#players-sidebar.open{transform:translate(0)}.hamburger-btn{display:block!important}.players-empty{display:block}.key{font-size:1.25rem}.key.wide{font-size:.8rem}.top-bar-title{display:none}.sidebar-overlay{z-index:99;opacity:0;pointer-events:none;background:#00000080;transition:opacity .25s;display:block;position:fixed;inset:0}.sidebar-overlay.active{opacity:1;pointer-events:auto}}@media (width<=400px){#profile{display:none!important}}