/* Connect page */

.age-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.age-check[hidden] {
  display: none;
}

.age-check label {
  font-weight: 700;
  flex-basis: 100%;
}

.age-check input {
  width: 110px;
  padding: 10px 14px;
  font: inherit;
  color: var(--ink, #f6f7ff);
  background: var(--bg-soft, #3c1d86);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
}

.age-check .small {
  flex-basis: 100%;
  margin: 0;
}

.connect-card {
  position: relative;
  overflow: visible;
}

.connect-card--linked {
  border-color: color-mix(in srgb, var(--blue, #7b5dff) 35%, var(--line, rgba(255, 255, 255, 0.16)));
}

.connect-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #f6f7ff);
}

.connect-card__identity[hidden] {
  display: none !important;
}

.connect-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--blue, #7b5dff) 40%, transparent);
  background: var(--card, #4b25a6);
  object-fit: cover;
}

.connect-card__scopes {
  margin: 0 0 14px;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--muted, #d2c8ff);
  line-height: 1.45;
}

.connect-card__scopes li + li {
  margin-top: 4px;
}

.connect-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #d2c8ff);
}

.connect-card__brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.connect-card__brand-dot--steam {
  background: #66c0f4;
}

.connect-card__brand-dot--twitch {
  background: #9146ff;
}

#connectMessage[hidden] {
  display: none;
}