#chatroom-demo-wrap{width:100%;max-width:1100px;margin:0 auto;background:#111;border:1px solid #333;position:relative}
#chatroom-demo{width:100%;height:620px;position:relative;overflow:hidden;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.45)),url('/assets/images/chatrooms/backgrounds/demo-room.png');background-size:cover;background-position:center}
#chatroom-ui{position:absolute;left:15px;right:15px;bottom:15px;display:flex;gap:10px;z-index:40}
#chatroom-input{flex:1;padding:10px;border:1px solid #444;background:rgba(0,0,0,.75);color:#fff}
#chatroom-send,#edit-avatar,#enter-chatroom{padding:10px 18px;border:1px solid #666;background:#222;color:#fff;cursor:pointer}
#chatroom-send:hover,#edit-avatar:hover,#enter-chatroom:hover{background:#333}
#chatroom-info{position:absolute;top:15px;left:15px;z-index:30;background:rgba(0,0,0,.65);color:#fff;padding:8px 12px;font-size:13px;border:1px solid #333}
#edit-avatar{
	position:absolute;
	top:55px;
	left:15px;
	z-index:90;
	font-size:13px;
	display:none;
	background:#222;
	color:#fff;
	border:1px solid #666;
	padding:10px 18px;
}
#hotspot-help{position:absolute;top:98px;left:15px;z-index:30;background:rgba(0,0,0,.55);color:#ddd;padding:7px 10px;font-size:12px;border:1px solid #333}
.room-hotspot{position:absolute;z-index:32;padding:6px 9px;background:rgba(0,0,0,.55);border:1px solid rgba(255,204,102,.5);color:#ffcc66;font-size:12px;cursor:pointer}.room-hotspot:hover{background:rgba(40,20,0,.75)}
#hotspot-bar{left:130px;top:335px}#hotspot-jukebox{left:680px;top:260px}
#chat-log{position:absolute;right:15px;top:15px;width:270px;height:310px;overflow-y:auto;background:rgba(0,0,0,.72);border:1px solid #333;padding:10px;color:#fff;font-size:13px;z-index:35;box-shadow:0 0 18px rgba(0,0,0,.45)}
.chat-log-title{font-weight:bold;margin-bottom:8px;color:#ffcc66;border-bottom:1px solid #444;padding-bottom:5px}.chat-log-line{margin-bottom:6px;line-height:1.35}.chat-log-name{font-weight:bold;color:#ff7777}
.chat-bubble{position:absolute;transform:translate(-50%,-100%);background:rgba(0,0,0,.78);color:#fff;padding:6px 10px;border-radius:10px;font-size:13px;pointer-events:none;z-index:25;white-space:nowrap;border:1px solid rgba(255,255,255,.15)}
.chat-name{position:absolute;transform:translate(-50%,-100%);color:#fff;text-shadow:1px 1px 3px #000;font-size:13px;font-weight:bold;pointer-events:none;z-index:24;white-space:nowrap}
#avatar-editor{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:420px;max-height:92%;overflow-y:auto;background:rgba(0,0,0,.88);color:#fff;border:1px solid #444;padding:18px;z-index:80;box-shadow:0 0 30px rgba(0,0,0,.65)}
#avatar-editor h3{margin:0 0 12px;color:#ffcc66}#avatar-preview{width:100%;height:230px;background:radial-gradient(circle at center,rgba(80,80,80,.35),rgba(0,0,0,.75));border:1px solid #333;margin-bottom:12px;overflow:hidden}
#avatar-editor label{display:block;margin-top:10px;font-size:13px}#avatar-editor input,#avatar-editor select{width:100%;box-sizing:border-box;margin-top:4px;padding:8px;background:#111;color:#fff;border:1px solid #444}.avatar-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.avatar-editor-grid label{margin-top:8px}#enter-chatroom{width:100%;margin-top:15px}