/* ===== Atividade (jogando / ouvindo / usando) e conexões ===== */

.atv-cartao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
}

.atv-cartao + .atv-cartao {
  margin-top: 8px;
}

.atv-cartao--oculto {
  opacity: 0.7;
  border-style: dashed;
}

.atv-cartao__capa,
.atv-cartao__icone {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.atv-cartao__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--cor-roxo), #232849);
}

.atv-cartao--music .atv-cartao__icone {
  background: linear-gradient(135deg, #1db954, #14733a);
}

.atv-cartao--app .atv-cartao__icone {
  background: linear-gradient(135deg, #3b82f6, #1e3a8a);
}

.atv-cartao__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.atv-cartao__rotulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-icones);
}

.atv-cartao__nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--cor-texto-principal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

a.atv-cartao__nome:hover {
  text-decoration: underline;
}

.atv-cartao__detalhe,
.atv-cartao__tempo {
  font-size: 12px;
  color: var(--cor-icones);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atv-cartao__progresso {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-icones);
}

.atv-cartao__barra {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.atv-cartao__barra i {
  display: block;
  height: 100%;
  width: 0;
  background-color: #1db954;
}

.atv-cartao__oculto {
  margin-top: 4px;
  font-size: 11px;
  color: var(--cor-icones);
}

.atv-vazio {
  margin: 0;
  padding: 14px;
  font-size: 13px;
  color: var(--cor-icones);
}

/* Prévia dentro das configurações */
.atv-previa {
  padding: 12px;
}

/* Chips de conexão no perfil */
.conexoes-perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.conexao-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-principal);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  text-decoration: none;
}

a.conexao-chip:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.conexao-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conexao-chip--spotify > i:first-child {
  color: #1db954;
  font-size: 18px;
}

.conexao-chip .ph-arrow-square-out {
  color: var(--cor-icones);
}

/* Cartões de conexão (Configurações > Apps conectados) */
.conexao-cartao {
  padding: 16px;
}

.conexao-cartao__topo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.conexao-cartao__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 26px;
  color: #fff;
  background-color: var(--cor-roxo);
}

.conexao-cartao__logo--spotify {
  background-color: #1db954;
}

.conexao-cartao__titulo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-size: 15px;
}

.conexao-cartao__estado,
.conexao-cartao__aviso {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cor-icones);
}

.conexao-cartao__estado--ok {
  color: var(--cor-online, #3ba55d);
}

.conexao-cartao__aviso code,
.config-bloco__dica code,
.atv-aviso code {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  word-break: break-all;
}

.conexao-cartao .config-linha,
.conexao-cartao .config-bloco__dica {
  margin-top: 14px;
}

.atv-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cor-icones);
}

/* Linha de atividade na lista de membros / amigos reaproveita o texto de status */
.membro__status,
.ativo-card__atividade {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Painel da DM */
.painel-dm__atv {
  margin-top: 12px;
}

#appsDesktopEstado {
  margin: 8px 0 16px;
}

/* Ícone de .exe é pequeno e quadrado: não estica */
.atv-cartao__capa--icone {
  object-fit: contain;
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.06);
}

/* Cronômetro ao vivo e total do jogo */
.atv-cartao__tempo--ao-vivo {
  font-variant-numeric: tabular-nums;
  color: #3ba55d;
  font-weight: 600;
}

.atv-cartao__total {
  font-size: 12px;
  color: var(--cor-icones);
}

/* Seção "Tempo de jogo" do perfil */
.tempo-jogo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tempo-jogo__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
}

.tempo-jogo__item--ao-vivo {
  border-color: rgba(59, 165, 93, 0.6);
}

.tempo-jogo__capa {
  flex-shrink: 0;
  width: 64px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
}

.tempo-jogo__capa--icone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cor-roxo), #232849);
}

.tempo-jogo__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.tempo-jogo__texto strong {
  font-size: 13px;
  color: var(--cor-texto-principal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tempo-jogo__texto span {
  font-size: 11px;
  color: var(--cor-icones);
}

.tempo-jogo__total {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-texto-principal);
}

.tempo-jogo__remover {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  color: var(--cor-icones);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
}

.tempo-jogo__item:hover .tempo-jogo__remover,
.tempo-jogo__remover:focus-visible {
  opacity: 1;
}

.tempo-jogo__remover:hover {
  background-color: rgba(255, 255, 255, 0.12);
}