.lobby-top{display:flex;flex-direction:column;gap:25px;align-items:flex-start;transition:opacity .25s ease-in,transform .35s ease-in}.lobby-top.fade-out{opacity:0;pointer-events:none;transform:translateY(-150%)}.setting-group{display:flex;align-items:center;gap:20px}.setting-label{font-weight:600;font-size:14px;color:gray;text-transform:uppercase;letter-spacing:.5px;min-width:100px}.setting-label-container{position:relative;min-width:100px;height:45px;display:flex;align-items:center}.setting-label-container .setting-label{position:absolute;left:0;transition:opacity .3s ease,transform .3s ease}.setting-label.hidden{opacity:0;pointer-events:none;transform:translate(-10px)}.setting-label.visible{opacity:1;pointer-events:auto;transform:translate(0)}.button-row-container{position:relative;height:45px;flex:1}.button-row{display:flex;gap:10px;transition:opacity .3s ease,transform .3s ease}.button-row-container .button-row{position:absolute;top:0;left:0}.button-row.static{position:static}.button-row.hidden{opacity:0;pointer-events:none;transform:translateY(10px)}.button-row.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.btn{font-family:Rubik,sans-serif;padding:0 20px;height:45px;min-width:97px;border-radius:50px;box-shadow:#84848429 1px 1px 4px 1px;border:1px solid #dddddd;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);cursor:pointer;color:#3d3d3d;font-size:14px;font-weight:600;transition:cubic-bezier(.075,.82,.165,1) .1s;display:flex;align-items:center;justify-content:center}.btn:hover{border:1px solid #c5c5c5}.btn:active,.btn.active{background:linear-gradient(180deg,#eeeeee,#eeeeee,#eeeeee,#ffffff);box-shadow:inset 0 1px 2px #0000001a}.btn-start{width:280px;height:50px;font-size:16px;margin-top:10px;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd)}.playing-ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:110;transition:opacity .25s ease}.playing-ui>*{pointer-events:auto}.playing-ui.fade-out{opacity:0}.playing-ui-btn{font-family:Rubik,sans-serif;padding:0 20px;height:45px;min-width:97px;border-radius:50px;box-shadow:#84848429 1px 1px 4px 1px;border:1px solid #dddddd;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);cursor:pointer;color:#3d3d3d;font-size:14px;font-weight:600;transition:cubic-bezier(.075,.82,.165,1) .1s;display:flex;align-items:center;justify-content:center}.playing-ui-btn:hover{border:1px solid #c5c5c5}.playing-ui-btn:active{background:linear-gradient(180deg,#eeeeee,#eeeeee,#eeeeee,#ffffff);box-shadow:inset 0 1px 2px #0000001a}.playing-ui-btn-back{position:absolute;top:20px;left:30px;transition:opacity .3s ease}.playing-ui.fade-out .playing-ui-btn-back{opacity:0;pointer-events:none}.game-grid-cell{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border:1.5px solid #dddddd;border-radius:50px;box-sizing:border-box;box-shadow:#84848429 1px 1px 4px 1px;transition:border-color .2s ease,background-color .3s ease,box-shadow .2s ease;animation:game-grid-cell-pop .2s ease forwards;transform:scale(0)}@keyframes game-grid-cell-pop{0%{transform:scale(0)}60%{transform:scale(1.05)}to{transform:scale(1)}}.game-grid-cell--active{border-color:#878a8c;box-shadow:#84848429 1px 1px 4px 1px,0 0 0 1.5px #878a8c;animation:game-grid-cell-pop .15s ease forwards}.game-grid-cell--empty{background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd)}.game-grid-cell--tbd{border-color:#878a8c;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd)}.game-grid-cell--correct{background-color:#6aaa64;border-color:#6aaa64}.game-grid-cell--present{background-color:#c9b458;border-color:#c9b458}.game-grid-cell--absent{background-color:#787c7e;border-color:#787c7e}.game-grid-cell-letter{font-size:.9rem;font-weight:700;color:#fff;text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.game-grid-cell--empty .game-grid-cell-letter,.game-grid-cell--tbd .game-grid-cell-letter{color:#3d3d3d}.game-grid{display:flex;flex-direction:column;gap:3px;padding:2px;width:100%;height:100%;box-sizing:border-box}.game-grid-row{display:flex;gap:3px;justify-content:center;flex:1}.game-grid-row .game-grid-cell{width:28px;height:28px}.player-card{display:flex;flex-direction:column;align-items:center;gap:12px;transition:all .3s ease;min-height:180px}.player-avatar{width:120px;height:120px;border-radius:22px;background-color:#fff;border:1px solid #ddd;box-shadow:#84848429 1px 1px 4px 1px}.player-name{font-size:18px;font-weight:600;color:#3d3d3d}.player-wins{font-size:16px;color:#888;font-weight:500;transition:opacity .3s ease;opacity:1}.player-wins.hidden{opacity:0}.player-grid{width:0;height:0;border:1px solid #dddddd;border-radius:16px;box-shadow:#84848429 1px 1px 4px 1px;opacity:0;margin-top:0;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.player-grid.visible{opacity:1;width:192px;height:228px;margin-top:15px;padding:16px}.player-finished-badge{font-size:14px;font-weight:600;color:#6aaa64;background:#e8f5e9;padding:4px 14px;border-radius:12px;margin-top:4px}.player-card.finished{opacity:.7}.invite-popup{position:absolute;left:50%;bottom:calc(100% + 15px);background:white;border-radius:24px;box-shadow:0 10px 40px #0003;padding:28px;z-index:100;width:380px;display:flex;flex-direction:column;gap:32px;border:1px solid #ddd;opacity:0;pointer-events:none;transform-origin:bottom center;transform:translate(-50%) scale(0);transition:opacity .2s ease-out,transform .2s ease-out}.invite-popup-close{position:absolute;top:12px;right:12px;width:31px;height:31px;border-radius:50%;border:1px solid #ddd;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);box-shadow:#84848429 1px 1px 4px 1px;color:#888;font-size:23px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;line-height:1;padding:0 0 2px}.invite-popup-close:hover{background:linear-gradient(180deg,#ffffff,#eeeeee);color:#444}.invite-popup.visible{opacity:1;transform:translate(-50%) scale(1);pointer-events:auto}.invite-section{display:flex;flex-direction:column;gap:12px}.invite-section-label{font-size:16px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.65px}.invite-horizontal-list{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px}.invite-horizontal-list::-webkit-scrollbar{height:5px}.invite-horizontal-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.invite-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:65px}.invite-add-btn{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;border:1px solid #ddd;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);box-shadow:#84848429 1px 1px 4px 1px;color:#888;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;line-height:1;padding:0 0 2px}.invite-add-btn:hover{background:linear-gradient(180deg,#ffffff,#eeeeee);color:#444;transform:scale(1.05)}.invite-item-avatar{width:52px;height:52px;border-radius:50%;background:#f0f0f0;border:1px solid #ccc;position:relative}.invite-item-name{font-size:14px;color:#555;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78px;text-align:center}.invite-other-actions{display:flex;gap:12px;margin-top:4px}.invite-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;height:45px;border-radius:50px;border:1px solid #ddd;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);box-shadow:#84848429 1px 1px 4px 1px;font-size:14px;font-weight:600;color:#3d3d3d;cursor:pointer;transition:all .2s}.invite-action-btn:hover{background:linear-gradient(180deg,#ffffff,#eeeeee)}.invite-action-btn .icon{font-size:14px}.invite-card-spacer{height:19px}.invite-card{display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .3s ease .4s,margin-right .4s cubic-bezier(.4,0,.2,1) .4s;width:120px;min-height:180px;position:relative}.invite-card.hidden{opacity:0;pointer-events:none;margin-right:-150px;transition:opacity .2s ease,margin-right .4s cubic-bezier(.4,0,.2,1)}.invite-plus{width:120px;height:120px;border-radius:22px;background-color:#fff;border:1px solid #ddd;box-shadow:#84848429 1px 1px 4px 1px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);transition:all .2s ease}.invite-plus:hover{border:1px solid #c5c5c5}.invite-plus:active{background:linear-gradient(180deg,#eeeeee,#eeeeee,#eeeeee,#ffffff);box-shadow:inset 0 1px 2px #0000001a}.invite-plus:before{content:"+";font-size:36px;color:#888}.invite-text{font-size:18px;font-weight:600;color:#3d3d3d}.lobby-bottom{position:absolute;bottom:40px;left:60px;display:flex;gap:30px;transition:all .4s cubic-bezier(.4,0,.2,1)}.lobby-bottom.playing{bottom:50%;left:50%;transform:translate(-50%,50%) scale(2)}.auth-popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;z-index:1000}.auth-popup-box{background:white;border-radius:24px;border:1px solid #ddd;box-shadow:0 10px 40px #0003;padding:60px 30px 30px;display:flex;flex-direction:column;align-items:center;gap:40px;position:relative}.auth-popup-label{position:absolute;top:20px;left:30px;font-size:18px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:1px}.auth-popup-options{display:flex;flex-direction:row;padding:0}.auth-popup-option{width:270px;height:270px;margin:20px;padding:20px;background-color:#6970d3;border-radius:50px;box-shadow:10px 10px 40px #999,-10px -10px 40px #adadad,inset 0 0 10px #0000001a;background-color:#fff;transition:ease-out .1s;opacity:.4;position:relative}.auth-popup-option:hover{cursor:pointer;transform:scale(1.03)}.auth-popup-option:active{opacity:.3;box-shadow:5px 5px 40px #bbb,-5px -5px 40px #cfcfcf,inset 0 0 10px #0000001a;outline:1px solid rgb(167,167,167)}.auth-popup-option-image{margin-top:-10px;width:100%;height:100%}.auth-popup-option-text{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:20px;color:#000;font-weight:500;font-family:Rubik,sans-serif;margin:20px}.auth-popup-box--login{width:760px;height:440px;box-sizing:border-box;flex-direction:row;align-items:stretch;padding:0;background:#f0f0f0;gap:0}.auth-popup-back{position:absolute;top:16px;right:24px;height:31px;padding:0 16px;border-radius:50px;border:1px solid #ddd;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);box-shadow:#84848429 1px 1px 4px 1px;color:#888;font-size:14px;font-weight:600;cursor:pointer;font-family:Rubik,sans-serif;transition:all .2s;line-height:1;z-index:1}.auth-popup-back:hover{background:linear-gradient(180deg,#ffffff,#eeeeee);color:#444}.auth-popup-display-section{width:380px;display:flex;align-items:center;justify-content:center;background:white;border-radius:24px 0 0 24px}.auth-popup-display-title{font-size:36px;font-weight:700;color:#3d3d3d;letter-spacing:2px}.auth-popup-form-section{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 40px 30px}.auth-popup-form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:20px}.auth-popup-form-group{display:flex;flex-direction:column;gap:8px}.auth-popup-form-group label{font-size:16px;font-weight:500;color:#888}.auth-popup-input{padding:12px 14px;border:1px solid rgb(200,200,200);border-radius:5px;font-size:18px;font-family:Rubik,sans-serif;font-weight:500;color:#323232;outline:none;width:100%;box-sizing:border-box}.auth-popup-input:focus{background-color:#eceeff;outline:1px solid #6970d3}.auth-popup-submit{width:100%;height:45px;padding:0 20px;border:1px solid #ddd;border-radius:50px;background:linear-gradient(180deg,#ffffff,#ffffff,#ffffff,#dddddd);box-shadow:#84848429 1px 1px 4px 1px;color:#3d3d3d;font-size:16px;font-weight:600;cursor:pointer;font-family:Rubik,sans-serif;transition:all .2s;margin-top:8px}.auth-popup-submit:hover{background:linear-gradient(180deg,#ffffff,#eeeeee);color:#444}.auth-popup-signup-link-container{text-align:center;font-size:15px;color:#646464}.auth-popup-signup-link{color:#6970d3;text-decoration:none;font-weight:500}.auth-popup-signup-link:hover{text-decoration:underline}.app-container{width:100vw;height:75vw;max-width:133.33vh;max-height:100vh;position:relative;background-color:#fff;box-shadow:0 0 20px #0000001a;overflow:hidden}.ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.ui-layer>*{pointer-events:auto}.top-right-header{position:absolute;top:20px;right:30px;font-weight:600;font-size:1.5rem;color:#3d3d3d;letter-spacing:1px}.app-scaler{width:1280px;height:960px;transform-origin:top left;position:relative}.content-layer{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:40px 60px;box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:#f0f0f0;color:#323232;font-family:Rubik,sans-serif;display:flex;align-items:center;justify-content:center}