.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  line-height: 1.5;
  max-width: 100%;
  font-size: 0.875rem;
}
.connection-status[hidden] {
  display: none;
}
.connection-status button {
  flex: none;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
}
.connection-status [role="status"] {
  overflow-wrap: anywhere;
}
.disconnected .card-table {
  opacity: 1;
}
.disconnected .card-game {
  filter: none;
}
.online-panel > .connection-status {
  display: flex;
  padding: 0.5rem 0;
}
.online-panel > .connection-status[hidden] {
  display: none;
}
@media (max-width: 619px) {
  .connection-status {
    width: 100%;
    justify-content: flex-end;
  }
  .online-panel > .connection-status {
    justify-content: flex-start;
  }
}