:root{--modal-header-height: 60px;--modal-padding-total: 20px;--safety-buffer: 10px;--min-gap: 10px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .6);--keyboard-allocation: calc(var(--usable-space) * .35);--remaining-gap: calc(var(--usable-space) - var(--grid-allocation) - var(--keyboard-allocation));--tile-size: min(max(calc(var(--grid-allocation) / 8), 25px), 80px);--tile-font-size: min(max(calc(var(--tile-size) * .45), .7rem), 2.4rem);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 4), 25px), 65px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .6rem), 1.2rem);--width-based-tile: calc((100vw - 50px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}@media (min-width: 1200px) and (min-height: 800px){:root{--modal-header-height: 80px;--modal-padding-total: 40px;--safety-buffer: 20px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .62);--keyboard-allocation: calc(var(--usable-space) * .33);--tile-size: min(max(calc(var(--grid-allocation) / 7), 35px), 95px);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 3.5), 35px), 75px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .8rem), 1.4rem);--width-based-tile: calc((100vw - 80px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}}@media (min-width: 1600px) and (min-height: 1000px){:root{--modal-header-height: 100px;--modal-padding-total: 60px;--safety-buffer: 30px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .64);--keyboard-allocation: calc(var(--usable-space) * .31);--tile-size: min(max(calc(var(--grid-allocation) / 6.5), 40px), 110px);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 3.2), 40px), 85px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .9rem), 1.6rem);--width-based-tile: calc((100vw - 100px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}}.tile{width:var(--final-tile-size);height:var(--final-tile-size);border:2px solid rgba(255,255,255,.3);border-radius:0;display:flex;justify-content:center;align-items:center;font-size:min(max(calc(var(--final-tile-size) * .5),.9rem),2.8rem);font-weight:700;text-transform:uppercase;margin:1px;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000001a;color:#fff;font-family:Inter,sans-serif}.tile.empty{background:#ffffff0d;border:2px solid rgba(255,255,255,.2);color:#fff}.tile.correct{background:linear-gradient(45deg,#6aaa64,#5a9955);color:#fff;border:2px solid rgba(106,170,100,.5);box-shadow:0 4px 15px #6aaa644d;animation:flip .6s ease-in-out}.tile.present{background:linear-gradient(45deg,#c9b458,#b3a049);color:#fff;border:2px solid rgba(201,180,88,.5);box-shadow:0 4px 15px #c9b4584d;animation:flip .6s ease-in-out}.tile.absent{background:linear-gradient(45deg,#787c7e,#696d6f);color:#fff;border:2px solid rgba(120,124,126,.5);box-shadow:0 4px 15px #787c7e4d;animation:flip .6s ease-in-out}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(-90deg)}to{transform:rotateY(0)}}@media (max-width: 500px) and (min-height: 700px){:root{--modal-header-height: 50px;--modal-padding-total: 12px;--safety-buffer: 8px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .55);--keyboard-allocation: calc(var(--usable-space) * .4);--tile-size: min(max(calc(var(--grid-allocation) / 8), 30px), 70px);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 3.5), 30px), 75px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .65rem), 1.2rem);--width-based-tile: calc((100vw - 30px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}}@media (max-width: 600px) and (min-height: 500px){:root{--modal-header-height: 50px;--modal-padding-total: 12px;--safety-buffer: 8px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .62);--keyboard-allocation: calc(var(--usable-space) * .33);--tile-size: min(max(calc(var(--grid-allocation) / 8.5), 25px), 60px);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 4), 22px), 55px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .55rem), 1rem);--width-based-tile: calc((100vw - 35px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}.tile{margin:1px;border-width:1.5px;border-radius:0}}@media (max-width: 400px) and (min-height: 450px){:root{--modal-header-height: 45px;--modal-padding-total: 8px;--safety-buffer: 7px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .65);--keyboard-allocation: calc(var(--usable-space) * .3);--tile-size: min(max(calc(var(--grid-allocation) / 9), 20px), 50px);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 4.5), 18px), 45px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .5rem), .9rem);--width-based-tile: calc((100vw - 25px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}.tile{margin:1px;border-radius:0;border-width:1px}.tile.correct,.tile.present,.tile.absent{animation:flip .3s ease-in-out}}@media (max-height: 499px){:root{--modal-header-height: 40px;--modal-padding-total: 8px;--safety-buffer: 5px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .68);--keyboard-allocation: calc(var(--usable-space) * .27);--tile-size: min(max(calc(var(--grid-allocation) / 10), 16px), 35px);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 5), 14px), 30px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .4rem), .7rem);--width-based-tile: calc((100vw - 20px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}}@media (max-height: 350px){:root{--modal-header-height: 35px;--modal-padding-total: 6px;--safety-buffer: 4px;--total-reserved: calc(var(--modal-header-height) + var(--modal-padding-total) + var(--safety-buffer));--usable-space: calc(100vh - var(--total-reserved));--grid-allocation: calc(var(--usable-space) * .7);--keyboard-allocation: calc(var(--usable-space) * .25);--tile-size: min(max(calc(var(--grid-allocation) / 12), 12px), 28px);--keyboard-key-height: min(max(calc(var(--keyboard-allocation) / 6), 10px), 22px);--keyboard-font-size: min(max(calc(var(--keyboard-key-height) * .3), .35rem), .55rem);--width-based-tile: calc((100vw - 15px)/5) ;--final-tile-size: min(var(--tile-size), var(--width-based-tile))}}.row{display:flex;justify-content:center;margin-bottom:5px;gap:5px;width:100%;max-width:calc(var(--final-tile-size) * 5 + 40px);margin-left:auto;margin-right:auto}.row.shake{animation:shake-row .6s ease-in-out}@keyframes shake-row{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}@media (max-width: 600px){.row{gap:3px;margin-bottom:3px;justify-content:center;width:100%;margin-left:auto;margin-right:auto}}@media (max-width: 480px){.row{gap:2px;margin-bottom:2px}.row.shake{animation:shake-row .3s ease-in-out}@keyframes shake-row{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}}@media (max-height: 499px){.row{gap:1px;margin-bottom:1px}}@media (max-height: 350px){.row{gap:.5px;margin-bottom:.5px}}.board{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0;width:100%;max-width:calc(var(--final-tile-size) * 5 + 50px);flex-shrink:0}@media (max-width: 600px){.board{width:100%;padding:0 5px;box-sizing:border-box}}@media (max-width: 480px){.board{padding:0 8px}}@media (max-height: 499px){.board{padding:0 2px}}@media (max-height: 350px){.board{padding:0 1px}}.keyboard{margin:auto auto 0;padding:15px 8px 0;max-width:100%;width:100%;align-self:flex-end;flex-shrink:0}.keyboard-row{display:flex;justify-content:center;margin-bottom:8px;gap:4px;width:100%}.keyboard-key{font-family:Inter,sans-serif;font-weight:600;border:0;padding:0;height:var(--keyboard-key-height);border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;flex:1;min-width:0;display:flex;justify-content:center;align-items:center;text-transform:uppercase;-webkit-tap-highlight-color:rgba(0,0,0,.3);font-size:var(--keyboard-font-size);transition:all .2s ease;box-shadow:0 4px 15px #0000001a}.key-wide{flex:1.8;font-size:calc(var(--keyboard-font-size) * .9);min-width:0}.keyboard-key.correct{background:linear-gradient(45deg,#6aaa64,#5a9955);color:#fff;border-color:#6aaa6480}.keyboard-key.present{background:linear-gradient(45deg,#c9b458,#b3a049);color:#fff;border-color:#c9b45880}.keyboard-key.absent{background:linear-gradient(45deg,#787c7e,#696d6f);color:#fff;border-color:#787c7e80}.keyboard-key:hover{background:#ffffff40;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.keyboard-key.correct:hover{background:linear-gradient(45deg,#5a9955,#4a7e45)}.keyboard-key.present:hover{background:linear-gradient(45deg,#b3a049,#9e8c3a)}.keyboard-key.absent:hover{background:linear-gradient(45deg,#696d6f,#5a5e60)}.keyboard-key:active{transform:translateY(0);box-shadow:0 4px 10px #00000026}@media (max-width: 768px){.keyboard{padding:12px 4px 0;margin:auto auto 0}.keyboard-row{gap:3px;margin-bottom:6px}.keyboard-key{border-radius:6px}.key-wide{flex:1.6}}@media (max-width: 480px){.keyboard{padding:8px 2px 0;margin:auto auto 0}.keyboard-row{gap:2px;margin-bottom:4px}.keyboard-key{border-radius:5px}.key-wide{flex:1.5}.keyboard-key:hover,.keyboard-key.correct:hover,.keyboard-key.present:hover,.keyboard-key.absent:hover{transform:none!important;box-shadow:none!important}}@media (max-height: 499px){.keyboard{margin:auto auto 0;padding:5px 1px 0}.keyboard-row{gap:1px;margin-bottom:1px}.keyboard-key{border-radius:2px}}@media (max-height: 350px){.keyboard{margin:auto auto 0;padding:2px 0 0}.keyboard-row{gap:.5px;margin-bottom:.5px}.keyboard-key{border-radius:1px;border-width:.5px}}.game-tile{background:#e0e2c70d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(224,226,199,.1);border-radius:0;padding:20px;box-shadow:0 8px 32px #0003;transition:all .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;aspect-ratio:1 / 1;min-height:280px;min-width:280px;width:100%;box-sizing:border-box}.game-tile:before{content:"";position:absolute;inset:0;background:transparent;transition:all .3s ease;pointer-events:none}.game-tile.won:before{background:linear-gradient(135deg,#6aaa641a,#5a99551a)}.game-tile.failed:before{background:linear-gradient(135deg,#dc35451a,#b92c3a1a)}.game-tile.won{border-color:#6aaa6466}.game-tile.failed{border-color:#dc354566}.game-tile.paused{border-color:#36a2eb66}.game-tile:hover{transform:translateY(-5px);box-shadow:0 12px 40px #0000004d}.game-tile-content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;min-height:0;gap:16px}.game-tile h3{color:#e0e2c7;font-size:1.8rem;font-weight:700;margin:0 0 8px;text-shadow:0 2px 4px rgba(0,0,0,.3);text-align:center}.game-description{color:#e0e2c7b3;font-size:.75rem;margin:0;line-height:1.3;text-align:center;flex-shrink:0}.game-status{margin:0;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1}.status-text{color:#e0e2c7cc;font-size:1rem;font-style:italic}.status-won,.status-failed,.status-paused{display:flex;flex-direction:column;align-items:center;gap:5px}.status-icon{font-size:1.2rem;color:#36a2eb}.paused-text{color:#36a2eb;font-weight:600}.paused-progress{font-size:.8rem;color:#e0e2c7b3}.status-won .score{color:#6aaa64;font-size:1.2rem;font-weight:700}.status-won .word,.status-failed .word{color:#e0e2c7;font-size:1.1rem;font-weight:600;letter-spacing:2px}.status-failed .word{color:#dc3545}.game-actions{display:flex;justify-content:center;flex-shrink:0}.action-buttons{display:flex;gap:8px}.icon-button{width:48px;height:48px;border:none;border-radius:50%;cursor:pointer;font-size:1.2rem;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;color:#e0e2c7;box-shadow:0 4px 15px #0003}.icon-button svg{width:18px;height:18px;fill:currentColor;color:inherit}.icon-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #0000004d}.game-tile .play-button{background:#6aaa64cc!important;border:1px solid rgba(106,170,100,.9)!important;color:#fff!important}.game-tile .play-button svg{fill:#fff!important;color:#fff!important}.game-tile .play-button:hover{background:#6aaa64e6!important;border-color:#6aaa64!important}.game-tile .review-button{background:#36a2ebcc!important;border:1px solid rgba(54,162,235,.9)!important;color:#fff!important}.game-tile .review-button:hover{background:#36a2ebe6!important;border-color:#36a2eb!important}.simple-play-button,.simple-review-button{padding:16px 32px;border:none;border-radius:12px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .2s ease;color:#fff;width:100%;max-width:180px;min-height:50px}.simple-play-button{background:#6aaa64}.simple-play-button:hover{background:#5a9a55;transform:translateY(-1px)}.simple-review-button{background:#36a2eb}.simple-review-button:hover{background:#2d8fd9;transform:translateY(-1px)}@media (min-width: 1200px){.game-tile h3{font-size:2.2rem}.simple-play-button,.simple-review-button{padding:20px 40px;font-size:1.4rem;max-width:220px;min-height:60px}}@media (max-width: 768px){.game-tile{padding:15px;min-height:200px;min-width:140px}.game-tile h3{font-size:1.4rem}.game-description{font-size:.7rem}.icon-button{width:36px;height:36px;font-size:1rem}.icon-button svg{width:14px;height:14px}.simple-play-button,.simple-review-button{padding:14px 28px;font-size:1.1rem;max-width:150px;min-height:45px}}@media (max-width: 480px){.game-tile{padding:15px;min-height:180px;aspect-ratio:1.2 / 1}.game-tile h3{font-size:1.2rem}.game-description{font-size:.75rem}.game-status{min-height:50px}.icon-button{width:40px;height:40px;font-size:1rem}.icon-button svg{width:16px;height:16px}.simple-play-button,.simple-review-button{padding:12px 24px;font-size:1rem;max-width:120px;min-height:40px}}.games-container{flex:1;padding:20px;position:relative;z-index:1;max-width:1200px;margin:0 auto}.games-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:0 10px}.header-buttons{display:flex;gap:10px;align-items:center}.games-header h1{color:#e0e2c7;font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.3)}.profile-button,.leaderboard-button{background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);color:#e0e2c7;padding:10px 20px;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.profile-button:hover,.leaderboard-button:hover{background:#e0e2c733;transform:translateY(-1px)}.leaderboard-button{background:linear-gradient(135deg,#ffd70033,#ffc10733);border:1px solid rgba(255,215,0,.3);color:gold}.leaderboard-button:hover{background:linear-gradient(135deg,#ffd7004d,#ffc1074d);border-color:#ffd70080}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:10px;max-width:1000px;margin:0 auto}.games-grid-enhanced{display:grid;gap:24px;padding:20px;max-width:1200px;margin:0 auto;justify-items:center;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}@media (min-width: 1400px){.games-grid-enhanced{grid-template-columns:repeat(4,minmax(320px,1fr));max-width:1400px;gap:30px}}@media (min-width: 1200px) and (max-width: 1399px){.games-grid-enhanced{grid-template-columns:repeat(3,minmax(300px,1fr));max-width:1000px;gap:25px}}@media (min-width: 900px) and (max-width: 1199px){.games-grid-enhanced{grid-template-columns:repeat(2,minmax(300px,1fr));max-width:700px;gap:25px}}@media (min-width: 600px) and (max-width: 899px){.games-grid-enhanced{grid-template-columns:repeat(2,minmax(280px,1fr));max-width:600px;gap:20px;padding:15px}}@media (max-width: 599px){.games-grid-enhanced{grid-template-columns:1fr;max-width:350px;gap:20px;padding:15px}}.game-tile-placeholder{background:#e0e2c705;border:2px dashed rgba(224,226,199,.1);border-radius:0;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;min-height:280px;min-width:280px;width:100%;transition:all .3s ease}.game-tile-placeholder:hover{border-color:#e0e2c733;background:#e0e2c708}.placeholder-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:.4}.placeholder-icon{font-size:2.5rem;color:#e0e2c780}.placeholder-text{font-size:.9rem;color:#e0e2c780;font-weight:500;text-transform:uppercase;letter-spacing:.8px}.floating-leaderboard-btn{position:fixed;bottom:100px;right:20px;z-index:50}.leaderboard-button-floating{background:linear-gradient(135deg,#ffd70033,#ffc10733);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,215,0,.3);color:gold;padding:12px 16px;border-radius:50px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 20px #0003;display:flex;align-items:center;gap:8px}.leaderboard-button-floating:hover{transform:translateY(-2px);box-shadow:0 6px 25px #0000004d}@media (max-width: 768px){.games-container{padding:15px}.games-header{margin-bottom:20px}.games-header h1{font-size:2rem}.games-grid-enhanced{grid-template-columns:repeat(2,minmax(140px,1fr));gap:15px;max-width:100%;padding:10px}}@media (max-width: 480px){.games-container{padding:10px}.games-header{flex-direction:column;gap:15px;text-align:center}.games-header h1{font-size:1.8rem}.games-grid-enhanced{grid-template-columns:1fr;gap:15px;padding:15px;max-width:100%}.game-tile-placeholder{min-height:180px;min-width:100%;aspect-ratio:1.2 / 1}.placeholder-content{gap:8px;padding:10px}.placeholder-icon{font-size:1.8rem}.placeholder-text{font-size:.75rem}.floating-leaderboard-btn{bottom:90px;right:15px}.leaderboard-button-floating{padding:10px 14px;font-size:.9rem}}.profile-page{padding:20px;max-width:1200px;margin:0 auto;background:#ffffff1a;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.edit-username-btn-flat{background:none;border:none;color:#e0e2c7;cursor:pointer;font-size:1rem;padding:4px 8px;border-radius:4px;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.edit-username-btn-flat svg{width:14px;height:14px}.edit-username-btn-flat:hover{background:#e0e2c71a;transform:scale(1.1)}.profile-content{display:flex;flex-direction:column;gap:20px;align-items:stretch;max-width:100%;margin:0 auto;width:100%;overflow-x:hidden;overflow-y:visible}.profile-sidebar{display:flex;flex-direction:column;align-items:center;gap:20px}.profile-picture-container{display:flex;flex-direction:column;align-items:center;gap:0;padding:20px;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);width:100%}.default-avatar-large{width:180px;height:180px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:3.5rem;border:3px solid rgba(224,226,199,.3);box-shadow:0 4px 12px #0003;flex-shrink:0}.profile-picture,.profile-picture-placeholder{display:none}.profile-picture-placeholder span{font-size:3rem;font-weight:700;color:#e0e2c7}.edit-button,.upload-button{padding:8px 16px;background:linear-gradient(135deg,#3c5154,#2a3a3d);color:#e0e2c7;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.edit-button:hover,.upload-button:hover{background:linear-gradient(135deg,#4a6266,#384a4d);transform:translateY(-1px)}.profile-edit-controls{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}.upload-button{display:block;text-align:center;text-decoration:none;cursor:pointer}.edit-actions{display:flex;gap:10px}.save-button,.cancel-button{padding:6px 12px;border:none;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s ease}.save-button{background:linear-gradient(135deg,#28a745,#20833a);color:#fff}.save-button:hover:not(:disabled){background:linear-gradient(135deg,#34ce57,#28a745)}.save-button:disabled{opacity:.6;cursor:not-allowed}.cancel-button{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff}.cancel-button:hover{background:linear-gradient(135deg,#e04654,#dc3545)}.profile-main{display:flex;flex-direction:column;gap:30px;min-width:0;overflow:hidden}.error-message{background:#dc35451a;border:1px solid rgba(220,53,69,.3);border-radius:8px;padding:12px;color:#dc3545;font-size:.9rem}.success-message{background:#28a7451a;border:1px solid rgba(40,167,69,.3);border-radius:8px;padding:12px;color:#28a745;font-size:.9rem}.profile-details,.game-history{background:#ffffff0d;border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.1)}.profile-details h3,.game-history h3{color:#e0e2c7;margin-bottom:15px;font-size:1.3rem;border-bottom:2px solid rgba(224,226,199,.2);padding-bottom:8px}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.detail-item:last-child{border-bottom:none}.detail-item label{font-weight:600;color:#e0e2c7;opacity:.8}.detail-item span{color:#e0e2c7}.game-history p{color:#e0e2c7;opacity:.7;text-align:center;margin:20px 0}.history-list{display:flex;flex-direction:column;gap:10px}.history-item{display:grid;grid-template-columns:80px 1fr 1fr 1fr 1fr;gap:15px;padding:12px;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.history-item:hover{background:#ffffff1a;transform:translateY(-1px)}.game-type,.game-date,.game-word,.game-score,.game-time{color:#e0e2c7;font-size:.9rem}.game-type{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4px 8px;border-radius:6px;font-weight:600;font-size:.75rem;text-align:center;letter-spacing:.5px}.game-word{font-weight:700;font-family:monospace;letter-spacing:1px}.game-score{color:#28a745}.game-time{color:#ffc107}@media (min-width: 769px){.profile-content{gap:30px;max-width:100%}.profile-main{max-width:100%;min-width:300px}.profile-details,.game-history{max-width:100%}}@media (min-width: 1400px){.profile-content{gap:40px}.profile-main,.profile-details,.game-history{max-width:100%}}@media (min-width: 1600px){.profile-page{max-width:1400px}}@media (max-width: 768px){.profile-page{padding:10px;max-width:100vw;margin:0;box-sizing:border-box}.profile-content{display:flex;flex-direction:column;gap:20px;max-width:100%;margin:0;overflow-x:hidden}.profile-sidebar,.profile-main{width:100%;margin:0;min-width:0}.profile-picture-container{width:100%;max-width:100%;margin:0;padding:15px;box-sizing:border-box}.default-avatar-large{width:100px;height:100px;font-size:2rem}.profile-picture,.profile-picture-placeholder{width:100px;height:100px;margin:0 auto}.profile-picture-placeholder span{font-size:2rem}.profile-edit-controls{width:100%;max-width:100%;margin:0;box-sizing:border-box}.upload-button{width:100%;max-width:200px;margin:0 auto;display:block;text-align:center}.edit-actions{width:100%;max-width:100%;justify-content:center;gap:10px;margin-top:10px}.save-button,.cancel-button{flex:1;max-width:120px;min-width:80px}.profile-details,.game-history{width:100%;max-width:100%;margin:0;padding:15px;box-sizing:border-box;overflow-x:hidden}.profile-details h3,.game-history h3{font-size:1.2rem;margin-bottom:15px}.detail-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 0;width:100%;box-sizing:border-box}.username-display{width:100%;display:flex;justify-content:space-between;align-items:center}.username-edit-container{width:100%;max-width:100%}.username-input{width:100%;max-width:100%;box-sizing:border-box}.history-item{display:flex;flex-direction:column;gap:8px;text-align:center;width:100%;box-sizing:border-box}}.username-display{display:flex;align-items:center;gap:10px}.username-edit-container{display:flex;flex-direction:column;gap:10px;width:100%}.username-input{padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:5px;background:#ffffff1a;color:#fff;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.username-input:focus{outline:none;border-color:#fff6;box-shadow:0 0 0 2px #ffffff1a}.username-input::placeholder{color:#fff9}.username-actions{display:flex;gap:8px}.save-username-btn,.cancel-username-btn,.edit-username-btn{padding:6px 12px;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.save-username-btn{background:linear-gradient(135deg,#6aaa64,#5a9955);color:#fff}.save-username-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 8px #6aaa644d}.save-username-btn:disabled{opacity:.6;cursor:not-allowed}.cancel-username-btn,.edit-username-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.cancel-username-btn:hover,.edit-username-btn:hover{background:#fff3;transform:translateY(-1px)}@media (max-width: 480px){.profile-page{padding:10px}.profile-picture-container{padding:15px;max-width:280px}.default-avatar-large{width:100px;height:100px;font-size:2rem}.profile-picture,.profile-picture-placeholder{width:100px;height:100px}.profile-picture-placeholder span{font-size:2rem}.upload-button,.edit-button{font-size:.8rem;padding:6px 12px}.edit-actions{flex-direction:column;gap:8px}.save-button,.cancel-button{width:100%}.profile-details,.game-history{padding:15px}.username-actions{flex-direction:column;gap:6px}.save-username-btn,.cancel-username-btn,.edit-username-btn{width:100%;font-size:.8rem;padding:8px 12px}}@media (max-width: 768px){.username-actions{flex-direction:column}.save-username-btn,.cancel-username-btn,.edit-username-btn{width:100%}}.leaderboard{max-width:700px;margin:0 auto;padding:20px}.leaderboard-header{text-align:center;margin-bottom:30px}.leaderboard-header h2{color:#fff;font-size:2.5rem;margin-bottom:20px;font-weight:700;background:linear-gradient(45deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(255,255,255,.3)}.period-selector{display:flex;justify-content:center;gap:12px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px;border-radius:20px;display:inline-flex;border:1px solid rgba(255,255,255,.2)}.period-button{padding:12px 24px;border:none;border-radius:16px;background:transparent;color:#fffc;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:14px;font-family:Inter,sans-serif}.period-button.active{background:#fff3;color:#fff;box-shadow:0 4px 15px #ffffff1a}.period-button:hover:not(.active){background:#ffffff26;transform:translateY(-2px)}.date-navigation{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:25px;padding:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgba(255,255,255,.2)}.nav-button{width:45px;height:45px;border:2px solid rgba(255,255,255,.3);border-radius:50%;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.nav-button:hover:not(:disabled){background:#fff3;color:#fff;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 8px 20px #ffffff1a}.nav-button:disabled{opacity:.4;cursor:not-allowed}.date-display{font-weight:600;font-size:1.2rem;color:#fff;min-width:200px;text-align:center}.word-display{text-align:center;margin-bottom:20px;padding:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgba(255,255,255,.2)}.daily-word{font-size:1.2rem;color:#fff;font-weight:500}.word-highlight{font-weight:700;color:#fff;background:linear-gradient(45deg,#6aaa64,#5a9955);padding:8px 16px;border-radius:12px;letter-spacing:2px;font-size:1.1rem;box-shadow:0 4px 15px #6aaa644d}.leaderboard-content{background:#ffffff1a;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a;overflow:hidden}.leaderboard-table-container{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.leaderboard-table-container::-webkit-scrollbar{height:8px}.leaderboard-table-container::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.leaderboard-table-container::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.leaderboard-table-container::-webkit-scrollbar-thumb:hover{background:#ffffff80}.loading-spinner{padding:60px;text-align:center;color:#fffc;font-size:1.2rem}.no-data{padding:60px 20px;text-align:center;color:#fffc}.no-data p{font-size:1.2rem;margin:0}.leaderboard-table{width:100%;min-width:400px}.table-header{display:grid;grid-template-columns:50px 200px 80px 1fr;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:20px;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;gap:10px}.table-header.compact{grid-template-columns:60px 1fr 100px}.table-row{display:grid;grid-template-columns:50px 200px 80px 1fr;padding:20px;border-bottom:1px solid rgba(255,255,255,.1);align-items:center;transition:all .3s ease;color:#fff;gap:10px}.table-row.compact{grid-template-columns:60px 1fr 100px}.table-row:hover{background:#ffffff0d;transform:translateY(-1px)}.table-row:last-child{border-bottom:none}.rank-col{text-align:center}.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-weight:700;font-size:.9rem;border:1px solid rgba(255,255,255,.3)}.rank-badge.rank-1{background:linear-gradient(45deg,gold,orange);color:#fff;box-shadow:0 4px 15px #ffd70066}.rank-badge.rank-2{background:linear-gradient(45deg,silver,#a0a0a0);color:#fff;box-shadow:0 4px 15px #c0c0c066}.rank-badge.rank-3{background:linear-gradient(45deg,#cd7f32,sienna);color:#fff;box-shadow:0 4px 15px #cd7f3266}.player-col{padding-left:10px;min-width:0;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.player-info{display:flex;align-items:center;gap:12px}.player-avatar{width:32px;height:32px;border-radius:8px;border:2px solid rgba(255,255,255,.3);object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px #0003}.player-name{font-weight:600;font-size:1rem;color:#fff;min-width:0;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;line-height:1.3}.score-col,.time-col{text-align:center}.score-value,.time-value{font-weight:600;font-size:1rem;color:#fff}.best-col{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:0 5px}.best-single{display:flex;flex-direction:column;align-items:center;gap:4px}.best-score{font-weight:700;font-size:1.1rem;color:#fff;white-space:nowrap}.best-details{font-size:.8rem;color:#fffc}.best-word{background:linear-gradient(45deg,#6aaa64,#5a9955);color:#fff;padding:2px 6px;border-radius:6px;font-weight:600;font-size:.75rem;letter-spacing:.5px;word-break:break-all;max-width:100%;line-height:1.2}.best-date{font-size:.7rem;color:#fff9}@media (max-width: 768px){.table-header{grid-template-columns:45px 150px 65px 1fr;padding:15px;font-size:.8rem}.table-header.compact{grid-template-columns:55px 1fr 85px}.table-row{grid-template-columns:45px 150px 65px 1fr;padding:15px}.table-row.compact{grid-template-columns:55px 1fr 85px}.leaderboard{padding:8px}.leaderboard-header h2{font-size:2rem}.period-selector{gap:6px;padding:6px}.period-button{padding:8px 16px;font-size:12px}.date-navigation{gap:12px;padding:15px}.date-display{font-size:.9rem;min-width:150px}.nav-button{width:40px;height:40px;font-size:16px}.word-display{padding:15px}.daily-word{font-size:1rem}.table-header{padding:15px;font-size:.8rem}.table-row{padding:15px}.rank-badge{width:32px;height:32px;font-size:.8rem}.player-avatar{width:28px;height:28px}.player-info{gap:8px}.player-name,.score-value,.time-value{font-size:.9rem}.best-col{font-size:.8rem}.nav-button:hover:not(:disabled),.table-row:hover,.period-button:hover:not(.active){transform:none!important;box-shadow:none!important}}@media (max-width: 480px){.period-selector{gap:4px;padding:4px}.period-button{padding:6px 12px;font-size:10px}.date-navigation{gap:8px;padding:12px}.date-display{font-size:.8rem;min-width:120px}.nav-button{width:36px;height:36px;font-size:14px}.leaderboard-table{min-width:350px}.table-header{grid-template-columns:35px 100px 50px 1fr;padding:10px;font-size:.65rem}.table-header.compact{grid-template-columns:40px 1fr 60px}.table-row{grid-template-columns:35px 100px 50px 1fr;padding:10px}.table-row.compact{grid-template-columns:40px 1fr 60px}.rank-badge{width:28px;height:28px;font-size:.7rem}.player-avatar{width:24px;height:24px}.player-info{gap:6px}.player-name,.score-value,.time-value{font-size:.8rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#3c5154,#2a3a3d);color:#e0e2c7;min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#3c5154,#2a3a3d);animation:fadeIn .8s ease-in-out}.glass{background:#e0e2c71a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(224,226,199,.2);border-radius:20px;box-shadow:0 8px 32px #0000004d}.loading{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:1.5rem;color:#e0e2c7}.loading:after{content:"";width:20px;height:20px;border:2px solid #E0E2C7;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.landing-page,.login-page{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.login-container{background:#e0e2c71a;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(224,226,199,.2);border-radius:24px;padding:40px 40px 60px;max-width:500px;width:100%;text-align:center;box-shadow:0 20px 60px #0006;animation:slideDown .8s ease-out}.login-header{margin-bottom:30px}.login-logo{width:80px;height:80px;margin:0 auto 20px;display:block;border-radius:50%;box-shadow:0 4px 20px #0000004d}.login-header h1{font-size:2.5rem;font-weight:700;color:#e0e2c7;margin-bottom:0;text-shadow:0 2px 10px rgba(0,0,0,.3)}.login-content{text-align:left}.auth-mode-buttons{display:flex;gap:8px;margin:0 0 30px;padding:6px;background:#e0e2c71a;border-radius:12px;border:1px solid rgba(224,226,199,.2)}.auth-mode-btn{flex:1;background:transparent;color:#e0e2c7cc;border:none;padding:12px 20px;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease}.auth-mode-btn:hover{background:#e0e2c71a;color:#e0e2c7}.auth-mode-btn.active{background:#e0e2c733;color:#e0e2c7;box-shadow:0 2px 8px #0003}.auth-placeholder{margin:30px 0;padding:20px;background:#e0e2c70d;border:2px dashed rgba(224,226,199,.3);border-radius:12px;text-align:center}.auth-placeholder p{margin:8px 0;color:#e0e2c7b3}.auth-placeholder p:first-child{font-size:1.1rem;color:#e0e2c7}.auth-form,.auth-form-stage{display:flex;flex-direction:column;gap:0}.form-section{display:flex;flex-direction:column;gap:18px;margin-bottom:25px}.form-section.profile-section{margin-top:35px;margin-bottom:25px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group input{background:#0003;border:1px solid rgba(224,226,199,.3);border-radius:8px;padding:12px 15px;font-size:1rem;color:#e0e2c7;transition:all .3s ease;outline:none}.form-group input:focus{border-color:#e0e2c7;box-shadow:0 0 15px #e0e2c733}.form-group input::placeholder{color:#e0e2c780}.email-input-container{display:flex;gap:0;align-items:center}.email-input-half{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none!important}.email-domain-bubble{background:#e0e2c733;border:1px solid rgba(224,226,199,.3);border-left:none;border-top-right-radius:8px;border-bottom-right-radius:8px;padding:12px 15px;color:#e0e2c7;font-size:1rem;white-space:nowrap;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.border-weak{border-color:#e74c3c!important;box-shadow:0 0 15px #e74c3c4d!important}.border-medium{border-color:#f39c12!important;box-shadow:0 0 15px #f39c124d!important}.border-strong{border-color:#2ecc71!important;box-shadow:0 0 15px #2ecc714d!important}.password-strength-meter{display:none}.profile-picture-upload{display:flex;flex-direction:column;align-items:center;gap:12px;padding:15px;border:2px dashed rgba(224,226,199,.3);border-radius:12px;background:#0000001a}.preview-container{display:flex;flex-direction:column;align-items:center;gap:12px}.profile-picture-preview{width:80px;height:80px;border-radius:15px;object-fit:cover;border:2px solid rgba(224,226,199,.5)}.placeholder-preview{width:80px;height:80px;border-radius:15px;border:2px dashed rgba(224,226,199,.3);display:flex;align-items:center;justify-content:center;color:#e0e2c780;background:#0000001a}.file-upload-btn{cursor:pointer;color:#e0e2c7;font-weight:600;background:#e0e2c733;padding:8px 15px;border-radius:8px;transition:background-color .3s ease;border:none;font-size:.9rem}.file-upload-btn:hover{background:#e0e2c74d}.hidden-input{display:none}.form-actions{display:flex;flex-direction:column;gap:15px;margin-top:20px}.auth-submit-btn{background:#e0e2c7;color:#3c5154;border:none;padding:14px;font-size:1.1rem;font-weight:700;border-radius:10px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px}.auth-submit-btn.centered{margin:0 auto;width:fit-content;padding:14px 40px}.auth-submit-btn:hover:not(:disabled){background:#d4d6b9;transform:translateY(-2px);box-shadow:0 4px 15px #0003}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}.spinner{width:20px;height:20px;border:2px solid #3C5154;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.auth-error,.auth-message{text-align:center;padding:12px;border-radius:8px;font-weight:500;margin-bottom:20px;font-size:.9rem}.auth-error{background:#ff6b6b33;color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.auth-message{background:#2ecc7133;color:#2ecc71;border:1px solid rgba(46,204,113,.3)}.error-message{color:#ff6b6b;font-size:.85rem;margin-top:5px}.auth-links{display:flex;flex-direction:column;gap:10px;align-items:center}.link-btn{background:none;border:none;color:#e0e2c7;text-decoration:underline;cursor:pointer;font-size:.9rem;text-align:center;opacity:.8;transition:opacity .3s ease}.link-btn:hover{opacity:1}.otp-section{margin:20px 0;text-align:center}.otp-section p{color:#e0e2c7cc;margin-bottom:15px}.otp-inputs{display:flex;justify-content:center;gap:10px;margin:20px 0}.otp-inputs input{width:45px;height:55px;font-size:1.8rem;text-align:center;font-weight:600;background:#0003;border:1px solid rgba(224,226,199,.3);border-radius:8px;color:#e0e2c7;transition:all .3s ease}.otp-inputs input:focus{border-color:#e0e2c7;box-shadow:0 0 15px #e0e2c733;outline:none}.top-bar{background:#e0e2c71a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(224,226,199,.2);padding:5px 20px!important;position:sticky;top:0;z-index:10}.header-first-row{display:flex;align-items:center;justify-content:space-between;height:40px}.logo-title-container{display:flex;align-items:center;gap:12px;flex-shrink:0}.header-logo{width:32px;height:32px;border-radius:50%;box-shadow:0 2px 10px #0003;flex-shrink:0}.top-bar h1{font-size:1.4rem;font-weight:700;color:#e0e2c7;text-shadow:0 2px 10px rgba(0,0,0,.3);white-space:nowrap;margin:0}.header-right-section{display:flex;flex-direction:row;align-items:flex-end;gap:10px}.timer-mute-container{display:flex;align-items:center;gap:10px}.header-second-row{display:flex;align-items:center;justify-content:space-between}.welcome-message{font-size:.9rem;color:#e0e2c7cc;flex-shrink:0}.auth-container{flex-shrink:0}@media (min-width: 900px){.header-first-row{margin-bottom:0}.header-second-row{justify-content:flex-end;margin-top:8px}.welcome-message{text-align:right}.logo-title-container{gap:15px}.header-logo{width:40px;height:40px}.top-bar h1{font-size:1.8rem}.welcome-message{font-size:1rem}}.mute-button{background:#e0e2c733;border:1px solid rgba(224,226,199,.3);color:#e0e2c7;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:1.2rem;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.mute-button:hover{background:#e0e2c74d;transform:translateY(-1px)}.mute-button.muted{background:#ff646433;border-color:#ff64644d}.tab-container{flex:1;padding:20px;position:relative;z-index:1}.tab-buttons{display:flex;gap:8px;margin-bottom:30px;justify-content:center;flex-wrap:nowrap}.tab-button{background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);color:#e0e2c7;padding:10px 20px;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);white-space:nowrap;min-width:0;flex-shrink:1}.tab-button:hover:not(.active):not(:disabled){background:#e0e2c733;transform:translateY(-1px)}.tab-button.active{background:#e0e2c7;color:#3c5154;box-shadow:0 4px 15px #0003}.tab-button:disabled{opacity:.5;cursor:not-allowed}@media (min-width: 600px){.tab-button{padding:12px 24px;font-size:1rem}}.tab-content{background:#e0e2c70d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(224,226,199,.1);border-radius:20px;padding:30px;min-height:400px;box-shadow:0 8px 32px #0003;position:relative;z-index:1}@media (min-width: 769px){.tab-content{min-height:500px;padding:40px}.game-area{margin-bottom:40px}}.game-start,.game-complete{text-align:center;padding:40px 20px}.game-start h2,.game-complete h2{font-size:2rem;color:#e0e2c7;margin-bottom:20px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.3)}.game-complete p{font-size:1.2rem;color:#e0e2c7cc;margin-bottom:30px;line-height:1.6}.today-result{margin-top:30px}.result-word{font-size:1.3rem;margin-bottom:10px;color:#e0e2c7}.result-score{font-size:1.1rem;color:#e0e2c7cc;font-weight:600}.play-button{background:linear-gradient(135deg,#e0e2c7,#d4d6b9);color:#3c5154;border:none;padding:15px 30px;font-size:1.2rem;font-weight:700;border-radius:15px;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #0003}.play-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.play-button:active{transform:translateY(0)}.game-playing,.game-finished{text-align:center}.game-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}@keyframes shiver{0%,to{transform:translate(0)}50%{transform:translate(2px)}}@keyframes errorPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.game-area{margin-bottom:30px}.game-result{font-size:1.2rem;font-weight:700;color:#e0e2c7;margin-top:10px;padding:15px 20px;background:#e0e2c71a;border-radius:15px;border:1px solid rgba(224,226,199,.2);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-shadow:0 2px 8px rgba(0,0,0,.3);text-align:center}.game-success h3{color:#6aaa64;margin-bottom:8px;font-size:1.6rem}.game-failure h3{color:#dc3545;margin-bottom:8px;font-size:1.6rem}.game-success p,.game-failure p{color:#e0e2c7cc;font-size:1rem;margin-bottom:15px;font-weight:400}.result-details{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.result-word{color:#e0e2c7;font-size:1.3rem;font-weight:700;letter-spacing:2px}.result-score{color:#e0e2c7e6;font-size:1.1rem;font-weight:600}.result-time{color:#e0e2c7b3;font-size:1rem;font-weight:500}.close-game-btn{background:linear-gradient(135deg,#e0e2c7,#d4d6b9);color:#3c5154;border:none;padding:12px 24px;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #0003}.close-game-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d;background:linear-gradient(135deg,#d4d6b9,#c8cab9)}.game-complete-actions{margin-top:20px;padding:20px;background:#e0e2c70d;border-radius:15px;border:1px solid rgba(224,226,199,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-align:center}.game-complete-actions p{color:#e0e2c7;font-size:1.1rem;margin-bottom:15px;opacity:.9}.game-complete-actions button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d;text-transform:uppercase;letter-spacing:.5px}.game-complete-actions button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66;background:linear-gradient(135deg,#5a6fd8,#6a4190)}.auth-container button{background:#e0e2c7;color:#3c5154;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s ease;box-shadow:0 3px 15px #0003}.auth-container button:hover{background:#d4d6b9;transform:translateY(-1px);box-shadow:0 4px 20px #0000004d}.top-bar-buttons{display:flex;align-items:center;gap:8px}.timer-component-topbar{color:#e0e2c7;font-size:.9rem;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .3s ease;background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);min-width:90px;text-align:center;height:32px;display:flex;align-items:center;justify-content:center}.timer-component-topbar:hover{background:#e0e2c726;border-color:#e0e2c74d;transform:translateY(-1px)}.mute-button-topbar{background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);color:#e0e2c7;padding:6px;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.mute-button-topbar:hover{background:#e0e2c726;border-color:#e0e2c74d;transform:translateY(-1px)}.mute-button-topbar.muted{background:#ff64641a;border-color:#ff64644d;color:#ff6464}.mute-button-topbar.muted:hover{background:#ff646426;border-color:#ff646466}.squircle{width:40px;height:40px;border-radius:12px;border:1px solid rgba(224,226,199,.3);background:#e0e2c726;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #0003}.squircle:hover{background:#e0e2c740;border-color:#e0e2c780;transform:translateY(-1px);box-shadow:0 6px 20px #0000004d}.profile-button-topbar{position:relative;overflow:hidden;border-radius:12px}.profile-picture-topbar{width:100%;height:100%;object-fit:cover;border-radius:12px}.profile-fallback-topbar{font-size:16px;font-weight:600;color:#e0e2c7;text-transform:uppercase}.profile-fallback-topbar.hidden{display:none}.logout-button-topbar{color:#e0e2c7;background:#e0e2c726;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:12px;border:1px solid rgba(224,226,199,.3);transition:all .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.login-header h1{font-size:1.8rem}.game-start,.game-complete{padding:15px 5px}.game-start h2,.game-complete h2{font-size:1.4rem}.game-playing,.game-finished{padding:0 5px}.mute-button{padding:4px 8px}.email-input-container{flex-direction:column;gap:8px}.email-input-half{border-radius:8px!important;border-right:1px solid rgba(224,226,199,.3)!important}.email-domain-bubble{border:1px solid rgba(224,226,199,.3);border-radius:8px;text-align:center}.play-button:hover,.tab-button:hover:not(.active):not(:disabled),.mute-button:hover,.auth-container button:hover,.game-complete-actions button:hover{transform:none!important;box-shadow:none!important}}@media (max-width: 480px){.app{padding:1px}.top-bar{padding:4px 6px}.top-bar h1{font-size:.9rem}.header-logo{width:20px;height:20px}.welcome-message{font-size:.7rem}.logo-title-container{gap:4px}.login-header h1{font-size:1.6rem}.game-start h2,.game-complete h2{font-size:1.2rem}.tab-container{padding:10px}.tab-content{padding:10px 5px;min-height:300px}.play-button{padding:10px 20px;font-size:1rem}.login-logo{width:60px;height:60px}.mute-button{font-size:.9rem;padding:3px 6px}}.mistake-popup-overlay{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.mistake-popup{background:#ff0000e6;color:#fff;padding:20px 30px;border-radius:12px;box-shadow:0 8px 32px #0000004d;font-size:1.1rem;font-weight:600;text-align:center;max-width:300px;animation:fadeInScale .3s ease-out}@media (max-width: 768px){.mistake-popup{padding:15px 20px;font-size:1rem;max-width:250px}}.result-summary{background:#e0e2c71a;border-radius:15px;padding:20px;margin-top:20px;text-align:center}.result-time{font-size:1.1rem;color:#e0e2c7cc;margin-top:10px;font-weight:500}.google-auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.google-auth-content{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.1);max-width:480px;width:100%;text-align:center}.google-auth-header{margin-bottom:40px}.google-auth-logo{width:60px;height:60px;margin-bottom:20px}.google-auth-header h1{color:#fff;font-size:2rem;margin:0 0 10px;font-weight:600}.google-auth-header p{color:#fffc;font-size:1.1rem;margin:0}.google-auth-form{margin-bottom:30px}.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:15px 20px;background:#e0e2c726;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e0e2c7;border:1px solid rgba(224,226,199,.3);border-radius:15px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 32px #0003}.google-signin-btn:hover{background:#e0e2c740;transform:translateY(-2px);box-shadow:0 12px 40px #0000004d;border-color:#e0e2c780}.google-icon{width:20px;height:20px}.google-auth-footer{margin-top:20px}.google-auth-footer p{color:#fff9;font-size:.9rem;margin:0}@media (max-width: 480px){.google-auth-content{padding:30px 20px}.google-auth-header h1{font-size:1.6rem}.google-auth-header p{font-size:1rem}.google-signin-btn{padding:12px 16px;font-size:15px}}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out}.modal-content{background:#e0e2c71a;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(224,226,199,.2);border-radius:20px;padding:30px;max-width:800px;width:95%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0006;animation:slideDown .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(224,226,199,.2)}.modal-header.no-title{justify-content:flex-end}.modal-header h2{color:#e0e2c7;font-size:1.5rem;font-weight:700;margin:0}.modal-close{background:none;border:none;color:#e0e2c7;font-size:1.5rem;cursor:pointer;padding:5px;border-radius:50%;transition:all .3s ease}.modal-close:hover{background:#e0e2c71a;transform:scale(1.1)}.game-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out;padding:0}.game-modal-content{background:linear-gradient(135deg,#3c5154,#2a3a3d);border-radius:0;width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;animation:slideIn .4s ease-out;box-shadow:none;border:none}@media (min-width: 769px){.game-modal-overlay{align-items:stretch;padding:0}.game-modal-content{width:min(90vw,900px);height:95vh;max-width:900px;max-height:95vh;border-radius:20px;margin:auto;animation:slideDown .4s ease-out;box-shadow:0 15px 50px #0009;border:1px solid rgba(224,226,199,.2)}}.game-modal-header{display:flex;justify-content:flex-end;align-items:center;padding:15px 20px;border-bottom:1px solid rgba(224,226,199,.1)}.game-modal-controls{display:flex;align-items:center;gap:12px}.timer-component-modal{color:#e0e2c7;font-size:.9rem;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .3s ease;background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);min-width:90px;text-align:center;height:32px;display:flex;align-items:center;justify-content:center}.timer-component-modal:hover{background:#e0e2c726;border-color:#e0e2c74d;transform:translateY(-1px)}.mute-button-modal{background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);color:#e0e2c7;padding:6px;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.mute-button-modal:hover{background:#e0e2c726;border-color:#e0e2c74d;transform:translateY(-1px)}.mute-button-modal.muted{background:#ff575733;border-color:#ff57574d;color:#ff5757}.game-modal-body{flex:1;display:flex;flex-direction:column;padding:10px;overflow:hidden;min-height:0;height:100%;box-sizing:border-box;justify-content:flex-start}.game-modal-body .game-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:0;min-height:0;overflow:hidden}.game-modal-body .board{margin:0;max-height:60vh}.game-completed-layout{display:flex;flex-direction:column;gap:20px;height:100%;align-items:center;justify-content:center}.game-board-section{flex:0 0 auto;display:flex;justify-content:center;align-items:center}.game-result-section{flex:0 0 auto;width:100%}@media (min-width: 900px) and (max-height: 600px){.game-completed-layout{flex-direction:row;gap:40px;align-items:center;justify-content:center}.game-board-section{flex:0 0 auto;max-width:50%}.game-result-section{flex:0 0 auto;max-width:400px;min-width:300px}.game-modal-body .board{max-height:70vh}}@media (min-width: 1200px) and (max-height: 600px){.game-completed-layout{gap:60px}.game-board-section{max-width:45%}.game-result-section{max-width:350px}}@media (max-height: 600px){.game-modal-body .board{max-height:50vh}}@media (max-height: 500px){.game-modal-body .board{max-height:45vh}}@media (max-height: 400px){.game-modal-body .board{max-height:40vh}}.timer-toggle-container{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:10px;background:#e0e2c70d;border-radius:12px}.timer-display{color:#e0e2c7;font-size:1.2rem;font-weight:600;font-family:Courier New,monospace;min-width:60px}.timer-toggle{position:relative;width:50px;height:24px;background:#e0e2c733;border:1px solid rgba(224,226,199,.3);border-radius:12px;cursor:pointer;transition:all .3s ease}.timer-toggle.active{background:#6aaa644d;border-color:#6aaa6480}.timer-toggle-slider{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#e0e2c7;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.timer-toggle.active .timer-toggle-slider{transform:translate(24px)}.timer-label{color:#e0e2c7cc;font-size:.9rem}.game-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:12px;background:#e0e2c70d;border-radius:12px;border:1px solid rgba(224,226,199,.1)}.timer-component{color:#e0e2c7;font-size:1rem;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;padding:8px 12px;border-radius:8px;transition:all .3s ease;background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);min-width:100px;text-align:center}.timer-component:hover{background:#e0e2c726;border-color:#e0e2c74d;transform:translateY(-1px)}.mute-button-flat{background:#e0e2c71a;border:1px solid rgba(224,226,199,.2);color:#e0e2c7;padding:8px;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.mute-button-flat:hover{background:#e0e2c726;border-color:#e0e2c74d;transform:translateY(-1px)}.mute-button-flat.muted{background:#ff64641a;border-color:#ff64644d;color:#ff6464}.mute-button-flat.muted:hover{background:#ff646426;border-color:#ff646466}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 768px){.modal-content{width:95%;padding:20px;max-height:85vh}.game-modal-content{height:92vh;border-radius:15px 15px 0 0}.game-modal-body{padding:6px}.timer-toggle-container{padding:8px}.timer-display{font-size:1rem}}@media (max-width: 480px){.modal-content{width:98%;padding:15px}.game-modal-content{height:97vh;border-radius:10px 10px 0 0}.game-modal-body{padding:4px}.timer-toggle-container{flex-direction:column;gap:8px;text-align:center}}.bottom-navigation{position:fixed;bottom:0;left:0;right:0;width:100%;display:flex;justify-content:stretch;gap:2px;padding:0;z-index:100;pointer-events:none;background:#0000001a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.bottom-tab{flex:1;background:#e0e2c726;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(224,226,199,.25);border-bottom:none;border-radius:25px 25px 0 0;padding:20px 15px 25px;color:#e0e2c7;font-weight:800;font-size:1.2rem;letter-spacing:1px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 -6px 25px #0000004d;transform:translateY(0);opacity:.9;pointer-events:auto;text-align:center;text-transform:uppercase;min-height:60px;display:flex;align-items:center;justify-content:center}.bottom-tab:hover{opacity:1;transform:translateY(-3px);background:#e0e2c733;box-shadow:0 -8px 30px #0006}.bottom-tab.active{background:#e0e2c74d;border-color:#e0e2c780;opacity:1;transform:translateY(-5px);box-shadow:0 -10px 35px #00000080;color:#f0f2d5}@keyframes tabPop{0%{transform:translateY(0)}50%{transform:translateY(-12px)}to{transform:translateY(-8px)}}.bottom-navigation.game-opening .bottom-tab:first-child{animation:slideLeft .3s ease-out forwards}.bottom-navigation.game-opening .bottom-tab:last-child{animation:slideRight .3s ease-out forwards}.bottom-navigation.game-closing .bottom-tab:first-child{animation:slideInLeft .3s ease-out forwards}.bottom-navigation.game-closing .bottom-tab:last-child{animation:slideInRight .3s ease-out forwards}@keyframes slideLeft{to{transform:translate(-100px) translateY(4px);opacity:0}}@keyframes slideRight{to{transform:translate(100px) translateY(4px);opacity:0}}@keyframes slideInLeft{0%{transform:translate(-100px) translateY(4px);opacity:0}to{transform:translate(0) translateY(4px);opacity:.7}}@keyframes slideInRight{0%{transform:translate(100px) translateY(4px);opacity:0}to{transform:translate(0) translateY(4px);opacity:.7}}.main-content{flex:1;padding-bottom:100px;overflow-y:auto}.ranks-grid{padding:20px}.ranks-header{text-align:center;margin-bottom:30px}.ranks-header h1{font-size:2rem;font-weight:700;color:#e0e2c7;text-shadow:0 2px 10px rgba(0,0,0,.3);margin:0}.ranks-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto}.game-leaderboard-tile{background:#e0e2c71a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(224,226,199,.2);border-radius:0;padding:30px 20px;text-align:center;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 32px #0003;aspect-ratio:1 / 1;min-height:280px;min-width:280px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}.game-leaderboard-tile:hover{background:#e0e2c726;border-color:#e0e2c74d;transform:translateY(-2px);box-shadow:0 12px 40px #0000004d}.game-leaderboard-tile.locked{opacity:.5;cursor:not-allowed}.game-leaderboard-tile.locked:hover{transform:none;box-shadow:0 8px 32px #0003}.tile-icon{font-size:2.5rem;margin-bottom:8px}.wordle-tile-icon{width:50px;height:50px;background:linear-gradient(45deg,#6aaa64,#5a9955);color:#fff;border:2px solid rgba(106,170,100,.5);border-radius:0;display:flex;justify-content:center;align-items:center;font-size:1.8rem;font-weight:700;text-transform:uppercase;margin:0 auto;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #6aaa644d}.wordle-tile-icon:hover{background:linear-gradient(45deg,#5a9955,#4a7e45);transform:translateY(-1px);box-shadow:0 4px 12px #6aaa6466}.game-leaderboard-tile.locked .wordle-tile-icon{opacity:.6;background:linear-gradient(45deg,#666,#555);border-color:#fff3;box-shadow:0 2px 8px #0003}.game-leaderboard-tile.locked .wordle-tile-icon:hover{transform:none;background:linear-gradient(45deg,#666,#555);box-shadow:0 2px 8px #0003}.tile-name{font-size:1.2rem;font-weight:600;color:#e0e2c7;margin-bottom:4px}.tile-status{font-size:.9rem;color:#e0e2c7b3;font-weight:500}.game-leaderboard-placeholder{background:#e0e2c70d;border:2px dashed rgba(224,226,199,.2);border-radius:0;aspect-ratio:1 / 1;min-height:280px;min-width:280px;width:100%;display:flex;align-items:center;justify-content:center;color:#e0e2c74d;font-weight:500}.game-leaderboard-placeholder:before{content:"Coming Soon";font-size:1rem}@media (max-width: 768px){.bottom-navigation{gap:1px}.bottom-tab{padding:18px 15px 25px;font-size:1.1rem;min-height:55px}.main-content{padding-bottom:85px}}@media (max-width: 480px){.bottom-navigation{gap:0px}.bottom-tab{padding:16px 12px 22px;font-size:1rem;min-height:50px;font-weight:700}.main-content{padding-bottom:75px}.ranks-content{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px}.game-leaderboard-tile{min-height:200px;min-width:200px;aspect-ratio:1 / 1;padding:20px 15px}.game-leaderboard-placeholder{min-height:200px;min-width:200px;aspect-ratio:1 / 1}}.squircle{border-radius:12px;overflow:hidden;position:relative}.profile-picture-topbar,.profile-picture-preview,.profile-picture-placeholder{border-radius:12px!important}.top-bar{padding:5px 20px!important}.header-first-row{height:40px}.header-right-section{flex-direction:row;gap:10px}.logout-button-topbar{background:#e0e2c726;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:12px;border:1px solid rgba(224,226,199,.3);transition:all .3s ease}.logout-button-topbar:hover{background:#e0e2c740;border-color:#e0e2c780}.logout-button-topbar svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}