@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap";html,body,#root{height:100vh;margin:0;padding:0;overflow:hidden;background:linear-gradient(135deg,#1e293b,#0f172a);color:#f8fafc;font-family:Inter,sans-serif}.container{display:flex;flex-direction:column;align-items:center;gap:20px}ul{margin:0;padding:0}.item-list{list-style:none;width:180px;padding-bottom:20px}.difficulty-button{font-size:1.125rem;font-weight:600;padding:10px 20px;border-radius:12px;width:200px;border:none;cursor:pointer;box-shadow:0 4px 8px #0003;text-align:center;background-color:#d3d3d3}.difficulty-button:hover{background-color:#4cb652;color:#fff}.container{display:flex;flex-direction:column;align-items:center;gap:1.8rem;padding:2rem}.difficultySelect{font-size:1.5rem;text-align:center;margin:0;font-weight:500;padding-top:1rem;padding-bottom:1rem;width:100%;max-width:300px}.button{font-size:1.125rem;font-weight:600;padding:10px 20px;border-radius:12px;width:200px;border:none;cursor:pointer;box-shadow:0 4px 8px #0003;text-align:center}.play-button{background-color:#4cb652;color:#fff}.play-button:hover{background-color:#3da244;transform:scale(1.05)}.reset-button{background-color:#e0e0e0}.reset-button:hover{background-color:#a0a0a0;color:#fff;transform:scale(1.05)}@media (max-width: 768px){.difficultySelect{font-size:1.3rem;padding:.5rem}}.header{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem 0;text-align:center;margin-top:2rem}.header-top-row{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}.header-title{font-size:3.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:0;color:#f8fafc;text-shadow:0 4px 6px rgba(0,0,0,.3)}.header-subtitle{font-size:1.5rem;text-align:center;margin:0;font-weight:500;padding-top:1rem;width:100%;max-width:300px;color:#cbd5e1}.header-logo{height:4rem;width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}@media (max-width: 768px){.header{gap:.5rem;padding:1rem 0;margin-top:1rem}.header-title{font-size:2.5rem;letter-spacing:.05em}.header-logo{height:3rem}.header-subtitle{font-size:1.2rem}}@media (max-height: 700px){.header{margin-top:.5rem;padding:.5rem 0;gap:.5rem}.header-title{font-size:2rem}.header-logo{height:2.5rem}.header-subtitle{font-size:1rem;padding-top:.5rem}}@media (max-height: 600px){.header{margin-top:.2rem;padding:.2rem 0;gap:.2rem}.header-title{font-size:1.5rem}.header-logo{height:2rem}.header-subtitle{font-size:.9rem;padding-top:.2rem}}.spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:200px}.spinner{width:50px;height:50px;border:5px solid rgba(106,170,100,.2);border-top-color:#6aaa64;border-radius:50%;animation:spin 1s linear infinite;position:relative}.spinner-text{font-size:1.2rem;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.letter-box{width:3rem;height:3rem;font-size:1.5rem;font-weight:700;display:flex;justify-content:center;align-items:center;margin:.2rem;text-transform:uppercase;transition:transform .3s cubic-bezier(.4,0,.2,1);border:2px solid rgba(248,250,252,.2);border-radius:8px;background-color:#ffffff0d;box-shadow:0 4px 6px #0000000d;color:#f8fafc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.letter-box.correct{background-color:#10b981;border-color:#10b981;color:#fff;box-shadow:0 0 15px #10b98166}.letter-box.elsewhere{background-color:#f59e0b;border-color:#f59e0b;color:#fff;box-shadow:0 0 15px #f59e0b66}.letter-box.absent{background-color:#475569;border-color:#475569;color:#fff;opacity:.8}.letter-box.flip{animation:flipIn .3s ease forwards;background-color:#ffffff0d;color:#f8fafc}@keyframes flipIn{0%{transform:rotateX(0)}50%{transform:rotateX(90deg);background-color:#ffffff1a}to{transform:rotateX(0)}}@media (max-height: 700px){.letter-box{width:2.5rem;height:2.5rem;font-size:1.2rem}}@media (max-height: 600px){.letter-box{width:2rem;height:2rem;font-size:1rem;margin:.1rem}}.board{display:flex;flex-direction:column;align-items:center;margin:0 auto;gap:5px;flex-grow:1;justify-content:center}.row{display:flex;gap:5px}.keyboard{display:flex;flex-direction:column;gap:.5rem;margin:1.5rem auto;max-width:37.5rem;padding:1rem}.key-row{display:flex;gap:.5rem;justify-content:center;width:100%}.key{padding:0;width:3rem;height:3rem;font-size:1.1rem;font-weight:700;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f8fafc;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.key:hover{transform:translateY(-2px);background:#fff3;box-shadow:0 10px 15px -3px #0003,0 4px 6px -2px #0000001a}.key:active{transform:translateY(1px)}.key.enter,.key.backspace{font-size:.9rem;width:4.5rem}.key.backspace{font-size:1.2rem}.key.correct{background-color:#10b981!important;border-color:#10b981!important;color:#fff}.key.elsewhere{background-color:#f59e0b!important;border-color:#f59e0b!important;color:#fff}.key.absent{background-color:#475569!important;border-color:#475569!important;color:#fff;opacity:.8}@media (max-width: 768px){.keyboard{gap:.4rem;padding:.8rem}.key-row{gap:.4rem}.key{width:2.5rem;height:2.5rem;font-size:1rem;border-radius:6px}.key.enter,.key.backspace{width:4rem;font-size:.8rem}}@media (max-width: 480px){.keyboard{gap:.3rem;padding:.5rem}.key-row{gap:.3rem}.key{width:1.8rem;height:2.2rem;font-size:.9rem;border-radius:6px}.key.enter,.key.backspace{width:3rem;font-size:.7rem}.key.backspace{font-size:1rem}}@media (max-width: 320px){.key{width:1.7rem;height:2.2rem;font-size:.8rem}.key.enter,.key.backspace{width:2.5rem}}@media (max-height: 700px){.keyboard{margin:.5rem auto;padding:.5rem;gap:.4rem}.key{height:2.6rem}}@media (max-height: 600px){.keyboard{margin:.2rem auto;padding:.2rem;gap:.2rem}.key{height:2.2rem;font-size:.9rem}}.result-screen.win{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center;color:#2d3748}.result-screen.win h1{font-size:3rem;margin-bottom:1.5rem;color:#4a5568;text-shadow:2px 2px 4px rgba(0,0,0,.1);animation:pulse 1.5s infinite}.result-screen.win p{font-size:1.5rem;margin-bottom:3rem;max-width:600px;line-height:1.6}.result-screen.win p strong{color:#2b6cb0;font-weight:700}.result-screen.win button{padding:1rem 2.5rem;font-size:1.2rem;font-weight:600;color:#fff;background:linear-gradient(to right,#48bb78,#38a169);border:none;border-radius:50px;cursor:pointer}.result-screen.win button:hover{transform:translateY(-3px)}@media (max-width: 768px){.result-screen.win h1{font-size:2.5rem}.result-screen.win p{font-size:1.2rem}.result-screen.win button{padding:.8rem 2rem;font-size:1rem}}@media (max-width: 480px){.result-screen.win h1{font-size:2rem}.result-screen.win p{font-size:1rem}.result-screen.win button{padding:.6rem 1.5rem;font-size:.9rem}}.result-screen.lost{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center;color:#2d3748}.result-screen.lost h1{font-size:3rem;margin-bottom:1.5rem;color:#4a5568;text-shadow:2px 2px 4px rgba(0,0,0,.1);animation:pulse 1.5s infinite}.result-screen.lost p{font-size:1.5rem;margin-bottom:3rem;max-width:600px;line-height:1.6}.result-screen.lost button{padding:1rem 2.5rem;font-size:1.2rem;font-weight:600;color:#fff;background:linear-gradient(to right,#48bb78,#38a169);border:none;border-radius:50px;cursor:pointer}.result-screen.lost button:hover{transform:translateY(-3px)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (max-width: 768px){.result-screen.lost h1{font-size:2.5rem}.result-screen.lost p{font-size:1.2rem}.result-screen.lost button{padding:.8rem 2rem;font-size:1rem}}@media (max-width: 480px){.result-screen.lost h1{font-size:2rem}.result-screen.lost p{font-size:1rem}.result-screen.lost button{padding:.6rem 1.5rem;font-size:.9rem}}#root{max-width:1280px;margin:0 auto;padding:.5rem;text-align:center;display:flex;flex-direction:column;height:100vh;width:100vw;justify-content:space-between;box-sizing:border-box}@media (max-width: 768px){#root{padding:.5rem}}