* {margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;background:#121213;color:#fff;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding-top:20px;}
.game-container{max-width:500px;width:100%;padding:0 10px;}
header{text-align:center;padding:10px 0;border-bottom:1px solid #3a3a3c;margin-bottom:20px;}
h1{font-size:36px;letter-spacing:4px;}
#board{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:30px;}
.row{display:flex;gap:5px;}
.tile{width:62px;height:62px;border:2px solid #3a3a3c;display:flex;justify-content:center;align-items:center;font-size:32px;font-weight:bold;text-transform:uppercase;transition:all .2s;}
.tile.correct{background:#538d4e;border-color:#538d4e;}
.tile.present{background:#b59f3b;border-color:#b59f3b;}
.tile.absent{background:#3a3a3c;border-color:#3a3a3c;}
#keyboard{display:flex;flex-direction:column;gap:8px;align-items:center;}
.key{height:58px;min-width:43px;background:#818384;border:none;border-radius:4px;color:#fff;font-size:14px;font-weight:bold;cursor:pointer;display:flex;justify-content:center;align-items:center;margin:2px;transition:.2s;user-select:none;}
.key:hover{background:#93999a;}
.key:active{transform:scale(.95);}
.key.correct{background:#538d4e;}
.key.present{background:#b59f3b;}
.key.absent{background:#3a3a3c;}
#message{text-align:center;margin:20px 0;font-size:18px;min-height:27px;}
#restart{display:block;margin:20px auto;padding:15px 30px;font-size:16px;background:#538d4e;color:#fff;border:none;border-radius:4px;cursor:pointer;}
#restart:hover{background:#5c9c57;}