/* Lobby module styles. All colors come from /styles/tokens.css. */

/* --- Strict-follow mode -------------------------------------------------
 * Followers can't drive the viewer state — disable pointer events on every
 * interactive surface, then re-enable just the Leave button so they can
 * always exit. Keeps the host server-authoritative.
 */
.lobby-strict-follow .replay-canvas-container,
.lobby-strict-follow .replay-canvas-controls,
.lobby-strict-follow .replay-sidebar,
.lobby-strict-follow .replay-topbar-stats,
.lobby-strict-follow .replay-topbar-fog-btn,
.lobby-strict-follow .replay-toggle-btn,
.lobby-strict-follow #replay-analyst-rail-left,
.lobby-strict-follow #replay-analyst-rail-right,
.lobby-strict-follow #replay-analyst-dock {
  pointer-events: none;
}
.lobby-strict-follow .lobby-leave-button,
.lobby-strict-follow .lobby-share-button,
.lobby-strict-follow .lobby-member-badge {
  pointer-events: auto;
}

/* --- Start Lobby button (replay header) --------------------------------- */
.lobby-start-btn {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 4px 10px;
  font-size: 0.85rem;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background-color var(--duration-fast, 120ms) var(--ease-out, ease-out);
}
.lobby-start-btn:hover {
  background: var(--color-bg-overlay);
  border-color: var(--color-border-strong);
}

/* --- Member badge ------------------------------------------------------- */
.lobby-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent, #56c2ff);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  color: var(--color-text);
  margin-left: 8px;
}
.lobby-member-badge-label {
  white-space: nowrap;
  font-weight: 500;
}
.lobby-leave-button,
.lobby-share-button {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.lobby-leave-button:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}
.lobby-share-button:hover {
  background: var(--color-bg-overlay);
}

/* --- Start lobby modal -------------------------------------------------- */
.lobby-start-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
}
.lobby-start-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
}

/* --- Share-link modal --------------------------------------------------- */
.lobby-share-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.lobby-share-link-input {
  width: 100%;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--color-bg-overlay);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
}
.lobby-share-link-input:focus {
  outline: 2px solid var(--color-accent, #56c2ff);
  outline-offset: 0;
}
.lobby-share-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.lobby-share-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
}

/* --- Public lobby list -------------------------------------------------- */
.lobby-public-list {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  font-family: var(--font-ui);
}
.lobby-public-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
  gap: var(--space-2, 8px);
}
.lobby-public-list-actions {
  display: flex;
  align-items: center;
}
/* "Your lobby" / "Friends' lobbies" wrappers — same visual weight as
   the public list, separated with a subtle divider so the user reads
   them as related sections rather than independent cards. */
.lobby-mine,
.lobby-friends {
  margin-bottom: var(--space-3, 12px);
}
.lobby-mine:empty,
.lobby-friends:empty {
  display: none;
}
.lobby-mine-card {
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-2, 8px);
}
.lobby-mine-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  justify-content: space-between;
}
.lobby-mine-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-primary, #e6e6e6);
}
.lobby-mine-title code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 6px;
  border-radius: 3px;
}
.lobby-mine-sub {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.lobby-mine-actions {
  display: flex;
  gap: var(--space-1, 4px);
  flex-shrink: 0;
}
.lobby-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1, 4px);
  font-weight: 600;
}
.lobby-friends-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.lobby-public-list-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.lobby-public-list-refresh {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}
.lobby-public-list-refresh:hover {
  background: var(--color-bg-overlay);
  color: var(--color-text);
}
.lobby-public-list-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.lobby-public-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2, 8px);
  align-items: center;
  padding: var(--space-2, 8px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
}
.lobby-public-row-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-public-row-host {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* --- Mobile tweaks ------------------------------------------------------ */
@media (max-width: 767px) {
  .lobby-member-badge {
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 6px;
    font-size: 0.72rem;
  }
  .lobby-public-row {
    grid-template-columns: 1fr;
  }
}