/* Kiếm Tiên Online: dùng chung style.css của Kiếm Tiên, chỉ thêm sảnh, phòng chờ, danh sách đồng đội */
.lobby-panel { max-width: 560px; }
.lobby-panel h1 { margin-bottom: 4px; }
.lb-name { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 12px 0 6px; font-size: 15px; }
.lobby-panel input {
  font-family: inherit; font-size: 16px; padding: 8px 12px; border-radius: 10px; min-width: 0;
  background: rgba(255, 255, 255, .08); color: var(--paper); border: 1px solid rgba(233, 197, 107, .45); outline: none;
}
.lobby-panel input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(233, 197, 107, .25); }
#lb-name { width: 200px; }
#lb-code { width: 140px; text-transform: uppercase; letter-spacing: 3px; text-align: center; }
#lb-code::placeholder { letter-spacing: 0; text-transform: none; }
.lb-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.lb-row .primary { margin-top: 0; }
.chk { font-size: 14px; opacity: .85; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
a.sm { display: inline-block; text-decoration: none; padding: 8px 14px; font-size: 14px; border-radius: 10px; margin: 4px;
  background: rgba(255, 255, 255, .1); color: var(--paper); border: 1px solid rgba(233, 197, 107, .45); }
#lb-rooms { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; text-align: left; }
.room {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; color: var(--paper); font-family: inherit;
}
.room:hover { border-color: var(--gold); }
.room b { color: var(--gold); letter-spacing: 2px; font-size: 16px; }
.room span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.room em { font-style: normal; font-size: 12px; opacity: .75; }
.room.full { opacity: .45; cursor: default; }
.rm-code { font-size: 16px; margin: 8px 0; }
.rm-code b { font-size: 26px; letter-spacing: 6px; color: var(--gold); margin: 0 8px; vertical-align: middle; }
#rm-players { list-style: none; padding: 0; margin: 10px auto; max-width: 320px; text-align: left; }
#rm-players li { padding: 8px 12px; margin: 4px 0; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
#rm-players small { opacity: .6; }
#lb-status { min-height: 18px; color: #ffcf9a; }

/* danh sách đồng đội trên HUD */
#party { position: absolute; top: calc(56px + env(safe-area-inset-top)); left: 10px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#party .pm {
  position: relative; width: 168px; padding: 3px 8px 6px; border-radius: 8px; background: var(--ink); border: 1px solid rgba(10, 8, 14, .7);
  font-size: 12px; color: #f6ecd2; overflow: hidden; box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
#party .pm span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#party .pm small { opacity: .7; }
#party .pm i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #b8232f, #62d36e); }
#party .pm.dead { opacity: .55; }
#party .pm.dead span::after { content: ' 💀'; }

/* lên cấp khi chơi cùng: không dừng game, bảng thẻ nhỏ ở dưới */
#levelup.mp { background: transparent; backdrop-filter: none; pointer-events: none; align-items: flex-end; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
#levelup.mp .panel { pointer-events: auto; max-width: 620px; padding: 10px 12px; background: rgba(24, 21, 30, .9); }
#levelup.mp h2 { font-size: 18px; }
#levelup.mp .sub { margin: 2px 0; }
#levelup.mp #cards { margin-top: 6px; gap: 8px; }
#levelup.mp .card { min-height: 0; padding: 8px 8px; flex-basis: 140px; }
#levelup.mp .card .c-icon { font-size: 24px; }
#levelup.mp .card p { font-size: 12px; margin-top: 4px; }

@media (max-width: 640px) {
  #party { top: calc(64px + env(safe-area-inset-top)); }
  #party .pm { width: 130px; font-size: 11px; }
  #levelup.mp { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  #levelup.mp .card { flex-basis: 100px; }
  #levelup.mp .card p { display: none; }
}