.net-status{
  position:fixed;
  z-index:18;
  left:50%;
  top:6px;
  bottom:auto;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:auto;
  max-width:min(54vw, 220px);
  padding:3px 7px;
  border-radius:999px;
  border:1px solid #3d467d;
  background:rgba(17,21,46,.72);
  color:#dfe4ff;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
  font-size:.64rem;
  font-weight:900;
  line-height:1.25;
  pointer-events:none;
  white-space:nowrap;
  opacity:.7;
}
.net-status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#c8881c;
  box-shadow:0 0 0 3px rgba(200,136,28,.16);
  flex:0 0 auto;
}
.net-status.good{
  width:12px;
  height:12px;
  min-width:12px;
  max-width:12px;
  padding:0;
  border:0;
  color:transparent;
  font-size:0;
  opacity:.55;
  background:transparent;
  box-shadow:none;
}
.net-status.good::before{
  background:#2dd274;
  box-shadow:0 0 0 3px rgba(45,210,116,.16);
}
.net-status.warn{
  border-color:#c8881c;
  color:#ffe1a3;
}
.net-status.bad{
  border-color:#994358;
  color:#ffcbd6;
}
.net-status.bad::before{
  background:#ff6f8a;
  box-shadow:0 0 0 3px rgba(255,111,138,.16);
}
body.playing .net-status.good{
  top:4px;
}
body.playing .net-status.good::before{
  width:6px;
  height:6px;
}
.participant-preview-banner{
  position:fixed;
  z-index:22;
  left:10px;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:min(88vw, 430px);
  padding:7px 10px;
  border:1px solid #58b7cf;
  border-radius:8px;
  background:rgba(9,48,62,.94);
  color:#e9fbff;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  font-size:.75rem;
  line-height:1.3;
  pointer-events:none;
}
.participant-preview-banner strong{ color:#7ee7ff; white-space:nowrap; }
.participant-preview-banner span{ color:#d4edf4; }
.participant-preview .net-status{ left:auto; right:8px; transform:none; }
@media (max-width:560px){
  .net-status{
    left:50%;
    top:6px;
    bottom:auto;
    transform:translateX(-50%);
    max-width:48vw;
    padding:3px 6px;
    font-size:.6rem;
  }
  .participant-preview-banner{
    left:6px;
    right:6px;
    bottom:6px;
    max-width:none;
    justify-content:center;
    font-size:.68rem;
  }
}