:root{
  --bg:#121213; --tile:#3a3a3c; --text:#d7dadc;
  --absent:#3a3a3c; --present:#b59f3b; --correct:#538d4e;
  --key:#818384;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--text); font-family:Inter,system-ui,Arial;
  display:flex; flex-direction:column; align-items:center; padding:24px;
  min-height:100vh; margin:0;
}
h1{margin:0 0 8px}
#msg{height:24px;margin-bottom:12px; color:#f3f3f3}
#board{
  display:grid;
  grid-template-rows: repeat(6, 56px);
  grid-gap:8px;
  margin-bottom:16px;
}
.row{display:grid; grid-template-columns: repeat(5, 56px); grid-gap:8px}
.tile{
  width:56px;height:56px;border-radius:6px;
  background: #111; border:2px solid #222; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:24px;
  text-transform:uppercase; color:var(--text);
}
.tile.filled{border-color:#555}
.tile.revealed.correct{background:var(--correct); border-color:var(--correct)}
.tile.revealed.present{background:var(--present); border-color:var(--present)}
.tile.revealed.absent{background:var(--absent); border-color:var(--absent); opacity:0.9}

#keyboard{display:flex; flex-direction:column; gap:8px; user-select:none}
.keys{display:flex; gap:6px; justify-content:center}
.key{
  padding:10px 12px; border-radius:6px; background:var(--key); color:white; cursor:pointer;
  font-weight:600; text-transform:uppercase; min-width:34px; text-align:center;
}
.key.wide{min-width:60px}
.key.absent{background:#3a3a3c}
.key.present{background:var(--present)}
.key.correct{background:var(--correct)}

.controls{margin-top:12px}
button{padding:8px 12px;border-radius:6px;border:0;background:#2563eb;color:white;cursor:pointer}
#msg.win{color:#8ef08e}
#msg.lose{color:#ff9b9b}

.answer-link {
  color: #6aaa64;
  font-weight: bold;
  cursor: pointer;
}
.answer-link:hover {
  opacity: 0.8;
}

#newGame {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
}

#newGame:hover {
  background-color: #b02a37;
}

.key[data-key="Enter"] {
  background-color: #403dec;
  color: white;
}

.key[data-key="Back"] {
  background-color: #ffffff;
  color: black;
  border: 1px solid #ccc;
}

.note {
  font-size: 13px;
  color: #ffffff;
  background: #000000;
  border: 1px solid #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  margin: 8px auto;
  max-width: 320px;
}
/* Nút bật/tắt nhạc */
.music-btn {
  background-color: #4c6ef5;
  margin-left: 12px;
}
.music-btn:hover {
  background-color: #3b5bdb;
}
.controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}