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)}20%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-5px)}}@keyframes inputPulse{0%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(1.12)}75%{transform:scale(1.06)}to{transform:scale(1)}}.letter-box.input-effect{animation:inputPulse .4s ease-in-out;z-index:10;box-shadow:0 4px 8px #2196f34d}#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}.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:center;align-items:flex-start;gap:20px;width:100%;margin:0;max-width:none}.game-board-section{flex:0 0 auto}.info-panel{flex:1;min-width:150px;max-width:200px;padding:15px;background-color:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}@media (max-width: 768px){body{padding:5px}#app{padding:0}.game-layout{gap:10px;justify-content:center}.info-panel{min-width:100px;max-width:120px;padding:8px;font-size:12px}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}}