:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%}body{background-color:#f4f4f4;margin:0;padding:0}:root{--primary: #166186}#root{margin:0 auto;min-height:100%}.container{display:grid;grid-template-rows:auto 1fr auto;height:100vh}header{padding:1rem;background-color:var(--primary);text-align:center;color:#fff}footer{background-color:var(--primary);padding:.5rem;color:#fff;text-align:center}main{height:auto;display:flex;justify-content:center;flex-direction:column}.category{text-align:center;font-size:1.5rem;font-weight:600}.imagewrapper{display:block;margin:0 auto;height:250px;width:300px}.imagewrapper>img{position:absolute}.word{margin:0 auto;margin-top:1.5rem;display:flex;flex-direction:row;gap:.5rem}.word input{font-size:2rem;width:2rem;text-align:center;text-transform:uppercase;aspect-ratio:1/1}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}.container{display:flex;flex-direction:column;min-height:100vh;background-color:#f5f5f5}header{background-color:#2c3e50;color:#fff;padding:1rem;text-align:center}main{flex:1;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1.5rem}.category{font-size:1.2rem;font-weight:700;color:#2c3e50;background-color:#ecf0f1;padding:.5rem 1rem;border-radius:20px}.imagewrapper{width:100%;max-width:300px;display:flex;justify-content:center}.imagewrapper img{height:250px}.word{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.letter-box{width:2rem;height:2.5rem;border-bottom:3px solid #2c3e50;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;text-transform:uppercase}.wrong-letters{color:#e74c3c;font-weight:700}.virtual-keyboard{width:100%;max-width:500px;margin-top:1rem}.keyboard-row{display:flex;justify-content:center;gap:.3rem;margin-bottom:.3rem}.key{width:2.5rem;height:2.5rem;border:none;border-radius:5px;background-color:#3498db;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s}.key:active{transform:scale(.95)}.key.correct{background-color:#2ecc71}.key.wrong{background-color:#e74c3c}.key:disabled{opacity:.7;cursor:not-allowed}.btn{padding:.75rem 1.5rem;border:none;border-radius:5px}.btn.lg{min-height:3rem;font-weight:700;font-size:1.3rem}.restart-button{background-color:#2c3e50;font-size:1rem;color:#fff;cursor:pointer;transition:background-color .3s}.restart-button:hover{background-color:#34495e}.game-message{margin-top:1rem;width:100%;text-align:center;font-size:2rem;font-weight:700;color:var(--primary);border-radius:5px;animation:pulse 1.5s infinite}.answer{display:flex;justify-content:center;align-items:center;font-size:1.5rem;width:100%;min-height:6rem;text-align:center}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}footer{background-color:#2c3e50;color:#fff;padding:1rem;text-align:center}@media (max-width: 480px){.key{width:2rem;height:2rem;font-size:.9rem}.letter-box{width:1.8rem;height:2.2rem;font-size:1.3rem}}.modal.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#000000bf}.modal.content{background-color:#fff;min-width:30%;padding:1rem;border-radius:.5rem;display:flex;gap:1rem;flex-direction:column}