.connection-quality {
  --connection-tone: var(--muted);
  box-sizing: border-box;
  width: 146px;
  height: 30px;
  display: inline-grid;
  grid-template-columns: 19px minmax(0, 1fr) 41px;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--connection-tone);
  background: color-mix(in srgb, var(--surface) 88%, var(--connection-tone));
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.connection-quality.is-compact {
  width: 80px;
  grid-template-columns: 19px 41px;
}

.connection-quality.is-compact .connection-label { display: none; }

.connection-bars {
  height: 15px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2px;
}

.connection-bars i {
  width: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 22%, var(--line));
}

.connection-bars i:nth-child(1) { height: 5px; }
.connection-bars i:nth-child(2) { height: 8px; }
.connection-bars i:nth-child(3) { height: 11px; }
.connection-bars i:nth-child(4) { height: 14px; }

.quality-poor .connection-bars i:nth-child(1),
.quality-fair .connection-bars i:nth-child(-n+2),
.quality-good .connection-bars i:nth-child(-n+3),
.quality-excellent .connection-bars i { background: currentColor; }

.connection-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connection-ping {
  color: var(--ink);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.connection-quality.quality-excellent { --connection-tone: #148457; }
.connection-quality.quality-good { --connection-tone: #1979A7; }
.connection-quality.quality-fair { --connection-tone: #A96A07; }
.connection-quality.quality-poor { --connection-tone: #C13D35; }
.connection-quality.quality-offline { --connection-tone: #A64B45; }

:root[data-theme="dark"] .connection-quality.quality-excellent { --connection-tone: #68D7A5; }
:root[data-theme="dark"] .connection-quality.quality-good { --connection-tone: #70C4E9; }
:root[data-theme="dark"] .connection-quality.quality-fair { --connection-tone: #F0BF63; }
:root[data-theme="dark"] .connection-quality.quality-poor,
:root[data-theme="dark"] .connection-quality.quality-offline { --connection-tone: #F18B82; }

:is(.watch-summary, .table-banner, .catan-gamebar) .connection-quality {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(8, 24, 34, .28);
}

:is(.watch-summary, .table-banner, .catan-gamebar) .connection-ping { color: #fff; }

.duel-lobby-topline,
.rush-lobby-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.duel-lobby-topline { margin-bottom: 4px; }
.rush-lobby-status { justify-content: flex-end; }

.rush-watch-hero-status {
  display: grid;
  justify-items: end;
  gap: 5px;
  flex: none;
}

@media (max-width: 600px) {
  .connection-quality {
    width: 80px;
    grid-template-columns: 19px 41px;
  }

  .connection-quality .connection-label { display: none; }
}

@media (max-width: 430px) {
  .duel-lobby-topline { align-items: flex-start; }
  .rush-lobby-status { flex-wrap: wrap; }
  .rush-watch-hero-status { width: auto; justify-items: stretch; }
}