body{font-family:Arial,sans-serif;margin:0;padding:10px;background-color:#f5f5f5;box-sizing:border-box}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(5px)}15%{opacity:1;transform:translate(-50%) translateY(0)}85%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-5px)}}@keyframes flipIn{0%{transform:rotateX(-90deg);opacity:.6}50%{transform:rotateX(-70deg);opacity:.7}75%{transform:rotateX(-30deg);opacity:.9}92%{transform:rotateX(10deg);opacity:1}to{transform:rotateX(0)}}.letter-box.input-effect{animation:flipIn .2s linear;transform-style:preserve-3d;backface-visibility:hidden;z-index:10}.flip-cell{position:relative;perspective:600px}.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.flip-front,.flip-back{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:4px;border:none;backface-visibility:hidden}.flip-front{background-color:#fff;color:#1a1a1b}.flip-back{transform:rotateX(180deg)}.flip-back.correct{background-color:#6aaa64;color:#fff;border-color:#6aaa64;box-shadow:0 2px 4px #0003,inset 0 1px #ffffff1a;border-width:2px}.flip-back.present{background-color:#c9b458;color:#fff;border-color:#c9b458;box-shadow:0 2px 4px #0003,inset 0 1px #ffffff1a;border-width:2px}.flip-back.absent{background-color:#787c7e;color:#fff;border-color:#787c7e;box-shadow:0 2px 4px #0003,inset 0 1px #ffffff1a;border-width:2px}.flip-inner.flipped{transform:rotateX(180deg)}@keyframes flip180{0%{transform:rotateX(0);box-shadow:0 2px 4px #0000001a}50%{box-shadow:0 4px 8px #0003}to{transform:rotateX(180deg);box-shadow:0 2px 4px #0000001a}}.flip-inner.flip-animate{animation:flip180 .25s ease-in-out forwards;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.guess-row.current-input.shake{animation:shake .4s ease}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}#app{padding:0;max-width:none}header{margin-bottom:10px}.word-length-selector{margin-bottom:15px;display:flex;align-items:center;justify-content:center;gap:10px}.word-length-selector label{font-weight:700;color:#333}.word-length-selector select{padding:8px 12px;font-size:16px;border:2px solid #ddd;border-radius:5px;background-color:#fff;cursor:pointer}.word-length-selector select:hover{border-color:#6aaa64}.word-length-selector select:focus{outline:none;border-color:#6aaa64;box-shadow:0 0 5px #6aaa644d}h1{color:#333;margin-bottom:10px}#game-board{margin:0}.guess-row{display:flex;justify-content:center;gap:1px;margin-bottom:1px;perspective:600px}.letter-box{width:38px;height:38px;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;background-color:#fff;border-radius:4px}.letter-box.empty{background-color:#fff;border-color:#ddd;border-width:2px;box-shadow:0 1px 2px #0000001a}.letter-box.current{background-color:#fff;border-color:#d3d6da;border-width:2px;box-shadow:0 1px 2px #0000001a}.letter-box.correct{background-color:#6aaa64;color:#fff;border-color:#6aaa64;box-shadow:0 2px 4px #0003,inset 0 1px #ffffff1a;border-width:2px}.letter-box.present{background-color:#c9b458;color:#fff;border-color:#c9b458;box-shadow:0 2px 4px #0003,inset 0 1px #ffffff1a;border-width:2px}.letter-box.absent{background-color:#787c7e;color:#fff;border-color:#787c7e;box-shadow:0 2px 4px #0003,inset 0 1px #ffffff1a;border-width:2px}#input-section{margin-bottom:20px}#guess-input{padding:10px;font-size:18px;border:2px solid #ddd;border-radius:5px;margin-right:10px;width:233px}#submit-btn,#restart-btn{padding:8px 12px;font-size:16px;background-color:#6aaa64;color:#fff;border:none;border-radius:5px;cursor:pointer;box-sizing:border-box;line-height:1;vertical-align:middle;width:60px}#submit-btn:hover,#restart-btn:hover{background-color:#5a994e}#submit-btn:disabled{background-color:#ccc;cursor:not-allowed}#surrender-btn{padding:8px 12px;font-size:16px;background-color:#dc3545;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-left:10px;box-sizing:border-box;line-height:1;vertical-align:middle;width:60px}#surrender-btn:hover{background-color:#c82333}#message{margin-top:20px;font-size:18px;font-weight:700}.win{color:#6aaa64}.lose{color:#d73a49}.keyboard{margin-top:30px;max-width:none;width:100%;overflow-x:auto;padding:0 5px;box-sizing:border-box}.keyboard-row{display:flex;justify-content:center;gap:2px;margin-bottom:2px}.keyboard-key{padding:0;border:1px solid #ddd;background-color:#fff;border-radius:4px;cursor:pointer;font-size:14px;font-weight:700;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.keyboard-key:hover{background-color:#f0f0f0}.keyboard-key.correct{background-color:#6aaa64;color:#fff;border-color:#6aaa64}.keyboard-key.present{background-color:#c9b458;color:#fff;border-color:#c9b458}.keyboard-key.absent{background-color:#787c7e;color:#fff;border-color:#787c7e}.keyboard-key.special-key{background-color:#818384;color:#fff;border-color:#818384;width:40px}.keyboard-key.special-key:hover{background-color:#6e6f70}.keyboard-key.accent-key{background-color:#f0a500;color:#fff;border-color:#f0a500;font-weight:700}.keyboard-key.accent-key:hover{background-color:#d18d00}.keyboard-key.bracket-key{background-color:#e0e0e0;color:#666;border-color:#ccc}.keyboard-key.empty-key{background-color:#f5f5f5;border-color:#e0e0e0;cursor:default}.keyboard-key.empty-key:hover{background-color:#f5f5f5}.game-layout{display:flex;justify-content:flex-start;align-items:flex-start;gap:20px;width:100%;margin:0;max-width:none;position:relative;padding-left:20px}.result-layout{display:flex;justify-content:center;align-items:flex-start;gap:20px;width:100%;margin:0;max-width:none;position:relative;padding-left:0}.game-board-section{flex:0 0 auto}.info-panel{position:sticky;top:56px;flex:1;min-width:150px;max-width:200px;padding:15px;background-color:#f8f9fa;border-radius:8px;border:1px solid #e9ecef;z-index:10;align-self:flex-start}@media (max-width: 768px){body{padding:5px}#app{padding:0}.game-layout{gap:10px;justify-content:flex-start;padding-left:10px}.result-layout{gap:10px;justify-content:center;padding-left:0}.info-panel{position:sticky;top:46px;min-width:100px;max-width:120px;padding:8px;font-size:12px;z-index:10;align-self:flex-start}header{margin-bottom:8px}h1{font-size:24px;margin-bottom:5px}.letter-box{width:35px;height:35px;font-size:14px;border:2px solid #ddd}#guess-input{width:215px;font-size:16px;padding:8px;margin-right:5px}#submit-btn,#restart-btn,#surrender-btn{padding:6px 10px;font-size:14px;width:50px}.keyboard{margin-top:20px;padding:0 2px;overflow-x:auto}.keyboard-row{gap:1px}.keyboard-key{padding:0;font-size:12px;width:30px;height:35px}.keyboard-key.special-key{width:40px}#message{font-size:16px}}@media (max-width: 480px){.keyboard-key{padding:0;font-size:11px;width:25px;height:32px}.keyboard-key.special-key{width:35px}.letter-box{width:30px;height:30px;font-size:13px;border:2px solid #ddd}.guess-row{gap:0px;margin-bottom:0}#guess-input{width:180px}}