.tdlive-lobby-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.tdlive-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  text-align: left;
}
.tdlive-card:hover { border-color: var(--gold-bright, #e0b84b); transform: translateY(-1px); }

.tdlive-card-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
}

.tdlive-card-body { flex: 1; min-width: 0; }
.tdlive-card-name { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdlive-card-meta { font-size: 0.78rem; opacity: 0.7; margin-top: 2px; }

.tdlive-card-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d4d; margin-right: 5px;
  box-shadow: 0 0 6px #ff4d4d;
  animation: tdlive-pulse 1.4s infinite;
}
@keyframes tdlive-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.tdlive-watch-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tdlive-watch-title { font-family: "Cinzel", serif; font-size: 1.15rem; font-weight: 700; flex: 1; }
.tdlive-watch-tier { font-size: 0.75rem; opacity: 0.65; margin-left: 8px; font-family: "Rajdhani", sans-serif; }

#tdlive-canvas-wrap { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #0e1220; }
#tdlive-canvas { display: block; width: 100%; height: auto; }

#tdlive-ended-overlay { display: none; }
#tdlive-ended-overlay.show-overlay { display: flex; }