.learndle-game{max-width:800px;margin:0 auto;text-align:center;height:calc(100vh - 40px);min-height:calc(100vh - 40px);display:flex;flex-direction:column;position:relative}.learndle-game h1{color:#ff80ab;margin-bottom:2rem}.learndle-game button{padding:.5rem 1rem;font-size:1rem;background-color:#595959;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.learndle-game button:hover{background-color:#ff4081}.learndle-game button:disabled{background-color:#ccc;cursor:not-allowed}.guess{margin:.5rem 0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;justify-content:center;width:100%;max-width:800px;margin-left:auto;margin-right:auto}.guess span{width:100%;height:auto;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border:2px solid #ccc;border-radius:4px;text-transform:uppercase;font-weight:700;font-size:clamp(1.2rem,4.5vw,2.6rem)}.guess span.correct{background-color:#4caf50;color:#fff;border-color:#4caf50}.guess span.present{background-color:gold;color:#333;border-color:gold}.guess span.absent,.guess span.empty{background-color:#e0e0e0;border-color:#e0e0e0}.guess.current{margin:.5rem 0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;justify-content:center;width:100%;max-width:800px;margin-left:auto;margin-right:auto}.game-content{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;scroll-behavior:smooth}.guesses{margin:1rem 0 2rem}.win-message{margin:2rem 0;padding:2rem;background-color:#fce4ec;border-radius:8px;animation:fadeIn .5s ease-in}.win-message h2{color:#ff4081;margin-bottom:1rem;font-size:2rem}.win-message p{color:#000;font-size:1.2rem;font-weight:700;margin-bottom:.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.mode-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.game-controls{display:flex;justify-content:flex-end;gap:1rem;margin:1rem 0}.game-controls button{flex:0 1 auto;min-width:120px}.reset-button{background-color:#9e9e9e;color:#fff}.reset-button:hover{background-color:#757575}.guess-input-container{display:flex;flex-direction:column;align-items:center;gap:.5rem}.error-message{color:#d32f2f;font-size:.9rem;font-weight:500;animation:fadeIn .3s ease-in}.next-word-button{margin-top:1rem;background-color:#e91e63;font-size:1.1rem}.next-word-button:hover{background-color:#c2185b}.color-key{display:flex;gap:1rem;justify-content:center;margin:1.5rem auto;padding:1rem;background-color:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.key-item{display:flex;align-items:center;gap:.5rem}.key-box{width:20px;height:20px;border-radius:4px}.key-box.correct{background-color:#4caf50}.key-box.present{background-color:gold}.key-box.absent{background-color:#e0e0e0}.key-text{font-size:.9rem;color:#333}.tile-div{width:100%;height:auto;aspect-ratio:1 / 1;font-size:clamp(1.2rem,4.5vw,2.6rem);text-align:center;text-transform:uppercase;font-weight:700;border:2px solid #ccc;border-radius:4px;margin:0;padding:0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,box-shadow .2s}.tile-div.active{border-color:#e91e63;box-shadow:0 0 0 2px #e91e6333}.keyboard{flex-direction:column;display:flex;margin:0;padding:.5rem 0;width:100%;max-width:800px;-webkit-user-select:none;user-select:none;background-color:#04bcd7;transition:transform .3s ease;flex-shrink:0}.keyboard-row{display:flex;justify-content:center;margin:.3rem 0;width:100%;gap:.5rem}.keyboard-row:nth-child(2){width:90%;margin-left:auto;margin-right:auto;padding-left:5%}.keyboard-row:nth-child(3){width:92%;margin-left:auto;margin-right:auto;padding-left:1%}.keyboard-key{padding:0;display:flex;align-items:center;justify-content:center;flex:1;height:4rem;border-radius:.25rem;background-color:#e0e0e0;color:#333;font-size:.9rem;font-weight:700;cursor:pointer;text-transform:uppercase;border:none;box-shadow:0 2px #0003;transition:all .1s}.keyboard-key.special-key{font-size:.8rem;min-width:4.5rem}.keyboard-key:active{transform:translateY(2px);box-shadow:none}.keyboard-key.correct{background-color:#4caf50;color:#fff}.keyboard-key.present{background-color:gold;color:#333}.keyboard-key.absent{background-color:#9e9e9e;color:#fff}@media (max-width: 600px){.keyboard{padding:.3rem 0}.keyboard-row{gap:.1rem}.keyboard-row:nth-child(2){padding-left:0}.keyboard-row:nth-child(3){padding-left:0}.keyboard-key{font-size:.9rem;width:30px;height:50px;margin:.15rem}.keyboard-key.special-key{min-width:50px}}@media (max-width: 400px){.keyboard{padding:.2rem 0}.keyboard-row:nth-child(2){padding-left:0}.keyboard-row:nth-child(3){padding-left:0}.keyboard-key{font-size:.8rem;width:24px;height:40px;margin:.1rem}.keyboard-key.special-key{min-width:40px;font-size:.5rem}}.color-key-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in}.color-key-content{background-color:#fff;border-radius:12px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 20px #0000004d;animation:slideIn .3s ease-out}.color-key-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-bottom:2px solid #f0f0f0;padding-bottom:1rem}.color-key-header h3{margin:0;color:#333;font-size:1.3rem}.close-button{background:none;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.close-button:hover{background-color:#f0f0f0;color:#333}.color-key{display:flex;flex-direction:column;gap:1rem;justify-content:center;margin:0 auto;padding:0;background-color:transparent;border-radius:0;box-shadow:none}.key-item{display:flex;align-items:center;gap:1rem;padding:.5rem;border-radius:8px;background-color:#f8f9fa}.key-box{width:24px;height:24px;border-radius:4px;flex-shrink:0}.key-text{font-size:1rem;color:#333;font-weight:500}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}