body{
  font-family: Arial;
  background:#111;
  color:white;
  margin:0;
}

.container{
  max-width:600px;
  margin:auto;
  padding:20px;
  text-align:center;
}

input, button{
  padding:10px;
  margin:5px;
  border-radius:8px;
  border:none;
}

button{
  background:#4caf50;
  color:white;
}

#word{
  font-size:28px;
  letter-spacing:6px;
  white-space:pre-wrap;
}

#roomBox{
  margin:10px;
  padding:8px;
  background:#222;
  border-radius:8px;
  color:#ffd54a;
}

#hostBadge{
  color:#ffd54a;
  font-weight:bold;
}

/* KEYBOARD */
#keyboard{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap:6px;
  margin-top:15px;
}

.key{
  padding:14px 0;
  background:#333;
  border-radius:6px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  user-select:none;
}

.key.used{
  background:#777;
}

.key.wrong{
  background:#e74c3c;
}

/* SCORE */
#score{
  margin-top:10px;
  background:#222;
  padding:8px;
  border-radius:8px;
}

/* CHAT */
.chat{
  margin-top:15px;
  background:#222;
  padding:10px;
  border-radius:10px;
}

#messages{
  height:120px;
  overflow-y:auto;
  text-align:left;
  font-size:14px;
}

/* PENDU */
canvas{
  margin-top:10px;
  background:#000;
  border-radius:8px;
}