/* ===== EmpireLobby cards & inputs ===== */
.el-card{background:#f7f1e1;border:1px solid #c9b98c;border-radius:10px;padding:16px;margin:12px 0;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.el-title{margin-top:0;font-family:Georgia,serif}
.el-row{margin:8px 0;display:flex;gap:8px;align-items:center}
.el-row label{min-width:120px;font-weight:600}
.el-row input,.el-row select{padding:6px 8px;border:1px solid #b9a97c;border-radius:6px;background:#fff8e6}
.el-actions{margin-top:10px;display:flex;gap:10px;align-items:center}
.el-result{margin-top:12px}

/* ===== Chat base ===== */
.el-chat{
  display:flex; flex-direction:column;
  padding:10px; background:#f8f2e3; border:1px solid #d9c8a0; border-radius:8px;
  height:70vh; min-height:400px;
  font-family:system-ui,-apple-system,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.el-chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:6px; border-bottom:1px solid #e6d9b8; margin-bottom:8px;
}
.el-chat-main{
  flex:1; display:grid; grid-template-columns:1fr 220px; gap:10px; overflow:hidden;
  border:1px solid #e6d9b8; border-radius:8px;
}
.el-chat-log{
  height:100%; overflow-y:auto; background:#fffaf0; border-right:1px solid #e6d9b8;
  padding:8px;
}
.el-chat-row{padding:2px 0}
.el-chat-time{color:#7c6d56; margin-right:4px; opacity:.85}
.el-chat-user{font-weight:600; color:#4a3f2f; margin-right:4px}
.el-chat-input{display:flex; gap:8px; margin-top:8px}
.el-chat-input input[type="text"]{flex:1; padding:8px; border:1px solid #b9a97c; border-radius:6px; background:#fff8e6}

/* ===== Emoji palette (grid) ===== */
.el-emoji-palette{margin-top:8px}
.el-emoji-palette.el-emoji-grid{
  display:grid; grid-template-columns:repeat(29,minmax(24px,1fr)); gap:2px;
}
.el-emoji-btn{
  border:1px solid #ccb991; border-radius:6px; background:#f1e6cf;
  padding:2px 0; cursor:pointer; line-height:1; font-size:14px; text-align:center; user-select:none;
}

/* ===== Members sidebar ===== */
.el-members-panel{overflow-y:auto; padding:8px; font-size:14px}
.el-members-panel .el-member{
  display:flex; align-items:center; gap:8px;
  padding:4px 2px; cursor:pointer; border-radius:6px;
}
.el-members-panel .el-member:hover{background:#f7f4eb}
.el-members-panel .el-member .el-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 26px;
}
.el-members-panel .el-member.host::after{
  content:"HOST"; margin-left:auto; font-size:11px; padding:2px 6px;
  background:#e6d9b8; color:#4a3f2f; border:1px solid #c9b98c; border-radius:999px;
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .el-chat-main{ grid-template-columns:1fr } /* stack members below */
  .el-members-panel{ display:none }          /* hide members on small screens */
}

/* ===== Utility ===== */
#el-taunt{display:none} /* hide audio element but allow playback */