/* Connections share the profile design on desktop and mobile. */
@media (min-width: 0px) {
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections {
    margin: 12px 0 0 !important;
    padding: 20px 22px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 13px !important;
    background: #101827 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .16) !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections::before {
    content: none !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__head {
    margin-bottom: 14px !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__title {
    color: #f5f7ff !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__count {
    width: 28px !important;
    height: 28px !important;
    border-color: rgba(145, 70, 255, .24) !important;
    background: rgba(145, 70, 255, .12) !important;
    color: #cbb7f7 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-block {
    padding: 13px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 10px !important;
    background: #0c1422 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-name {
    margin-bottom: 10px !important;
    color: #d9e0ee !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-name span {
    border: 1px solid rgba(145, 70, 255, .22) !important;
    background: rgba(145, 70, 255, .12) !important;
    color: #cbb7f7 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__grid {
    gap: 8px !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card {
    min-height: 64px !important;
    padding: 9px 11px !important;
    gap: 10px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 9px !important;
    background: #111b2c !important;
    box-shadow: none !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card::before {
    content: none !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) a.tn-conn-card:hover {
    border-color: rgba(145, 70, 255, .38) !important;
    background: #172239 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) a.tn-conn-card:focus-visible {
    outline: 2px solid #b86cff !important;
    outline-offset: 2px;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__avatar {
    border: 1px solid rgba(145, 70, 255, .3) !important;
    background: #202640 !important;
    box-shadow: none !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__avatar img,
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__avatar img {
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__placeholder {
    background: rgba(145, 70, 255, .16) !important;
    color: #cbb7f7 !important;
    font-size: 17px !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__nick {
    color: #eef2fb !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__rel {
    border-color: rgba(145, 70, 255, .2) !important;
    background: rgba(145, 70, 255, .1) !important;
    color: #cbb7f7 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-more summary {
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(145, 70, 255, .2) !important;
    border-radius: 9px !important;
    background: rgba(145, 70, 255, .09) !important;
    color: #cbb7f7 !important;
    font-size: 13px !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-more summary strong {
    background: rgba(145, 70, 255, .14) !important;
    color: #cbb7f7 !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-more summary::after {
    content: none !important;
    display: none !important;
  }

  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__divider {
    border-color: rgba(255, 255, 255, .08) !important;
  }
}

@media (max-width: 768px) {
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections {
    padding: 16px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__title {
    font-size: 18px !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-block {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-name {
    gap: 8px !important;
    flex-wrap: wrap;
    margin-bottom: 8px !important;
    font-size: 15px !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-name span {
    padding: 3px 7px !important;
    font-size: 10px !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card {
    min-height: 56px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) a.tn-conn-card::after {
    content: '›';
    margin-left: auto;
    color: #8490a6;
    font-size: 22px;
    flex: 0 0 auto;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex-basis: 38px !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__body {
    min-width: 0;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-conn-card__nick {
    overflow-wrap: anywhere;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-more {
    margin-top: 8px !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-more summary {
    justify-content: flex-start !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__squad-more summary strong {
    padding: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
  }
}

@media (min-width: 769px) and (max-width: 1050px) {
  body.single-streamer .streamer-page:not(.streamer-page--mobile-only) .tn-connections__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}