*{box-sizing:border-box;margin:0%;padding:0%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-tap-highlight-color:transparent}.app{display:flex;height:100dvh;width:100dvw;align-items:center;justify-content:center}.board{display:flex;flex-direction:column;gap:5px;margin-bottom:200px}.row{display:flex;gap:5px;height:max-content;perspective:800px}.cell{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:24px;border-radius:5px;font-weight:700;border:2px solid lightgray;text-transform:uppercase;background-color:#fff;transition:background-color .2s ease-in-out;transform-style:preserve-3d}.cell .front,.cell .back{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;backface-visibility:hidden}.cell .back{transform:rotateX(180deg)}.cell:after{content:attr(data-char);position:absolute;backface-visibility:hidden}.validate{background-color:transparent;animation:flip .3s ease-in-out forwards}@keyframes flip{0%{transform:rotateX(0);background-color:gray;border:gray}50%{transform:rotateX(90deg);background-color:gray;border:gray}to{transform:rotateX(180deg)}}.correct{background-color:#6aa964;color:#fff;border:2px solid #6aa964}.incorrect{background-color:#787c7e;color:#fff;border:2px solid #787c7e}.misplaced{background-color:#c9b458;color:#fff;border:2px solid #c9b458}.logo{position:absolute;top:20px;left:50%;transform:translate(-50%);font-size:32px;font-weight:700;letter-spacing:2px;color:#1a1a1a;margin-bottom:20px}.hint-text{position:absolute;top:80px;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:10px 20px;border-radius:5px;font-size:14px;text-align:center;max-width:80%}.hint-button{position:absolute;bottom:20px;left:50%;transform:translate(-50%);border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px;background-color:transparent}.hint-button:hover{text-decoration:underline}.message{position:absolute;bottom:220px;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:15px 30px;border-radius:5px;font-size:18px;text-align:center;max-width:95%;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.how-to-play{position:fixed;top:20px;right:20px;z-index:1000}.how-to-play-button{width:24px;height:24px;border-radius:50%;border:2px solid #1a1a1a;background:transparent;color:#1a1a1a;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.how-to-play-button:hover{background:#1a1a1a;color:#fff}.how-to-play-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1001;opacity:0;animation:overlayFadeIn .2s ease-out forwards}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.how-to-play-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 20px #0003;width:90%;max-width:400px;max-height:90vh;overflow-y:auto;opacity:0;z-index:1002;animation:modalSlideIn .3s ease-out forwards}@keyframes modalSlideIn{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}.close-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:5px 10px;line-height:1}.close-button:hover{color:#1a1a1a}.how-to-play-content h3{margin:0 0 15px;font-size:20px;color:#1a1a1a;text-align:center}.how-to-play-content ul{margin:0;padding-left:20px;font-size:16px;color:#666}.how-to-play-content li{margin:10px 0;line-height:1.4}@media (max-width: 480px){.how-to-play-button{width:32px;height:32px;font-size:18px}.how-to-play-content{padding:15px;width:95%}.how-to-play-content h3{font-size:18px;margin-bottom:12px}.how-to-play-content ul{font-size:14px}.how-to-play-content li{margin:8px 0}.cell{width:50px;height:50px;font-size:20px}.row{gap:4px}.board{gap:4px;margin-bottom:180px}.logo{font-size:24px;top:10px}.hint-text{top:60px;font-size:12px;padding:8px 16px}input[type=text]{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:1000;font-size:16px}body.keyboard-open{position:fixed;width:100%;height:100%;overflow:hidden}.keyboard-key{min-width:35px;height:50px;font-size:12px}.keyboard-key.wide-key{min-width:55px}}@media (min-width: 481px) and (max-width: 768px){.how-to-play-content{max-width:500px}.cell{width:55px;height:55px;font-size:22px}input[type=text]{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:1000;font-size:16px}body.keyboard-open{position:fixed;width:100%;height:100%;overflow:hidden}}.virtual-keyboard{display:none;position:fixed;bottom:0;left:0;right:0;background-color:transparent;padding:8px;flex-direction:column;gap:8px;z-index:100}.keyboard-row{display:flex;justify-content:center;gap:6px}.keyboard-key{background-color:#818384;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:700;min-width:50px;height:50px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;aspect-ratio:1}.keyboard-key.wide-key{min-width:75px;aspect-ratio:auto}.keyboard-key.correct{background-color:#6aa964}.keyboard-key.misplaced{background-color:#c9b458}.keyboard-key.incorrect{background-color:#787c7e}.keyboard-key:active{opacity:.8}@media (max-width: 768px){.virtual-keyboard{display:flex}.board{margin-bottom:180px}.hint-button{top:120px;bottom:auto}.message{top:80px;bottom:auto}.keyboard-key{min-width:40px;height:40px;font-size:14px}.keyboard-key.wide-key{min-width:65px}}