/* Helpful feedback inside account and multiplayer, without changing live-region text. */
.account-card .account-status:not(:empty),
.mp-lobby .mp-status:not(:empty){
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
  padding:12px 14px;
  border:2px solid #68caff;
  border-radius:16px;
  background:#10387d;
  box-shadow:0 3px 0 #09285e, inset 0 1px #ffffff30;
  color:#f4fbff;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  text-align:left;
  overflow-wrap:anywhere;
}
.account-card .account-status:not(:empty)::before,
.mp-lobby .mp-status:not(:empty)::before{
  content:'i';
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border:2px solid #b6f1ff;
  border-radius:11px;
  background:linear-gradient(#40b7f8,#2374dd);
  box-shadow:0 2px 0 #0753a3;
  color:white;
  font-size:20px;
  font-weight:900;
  font-style:normal;
  line-height:1;
}
.account-card .account-status:not(:empty),
.mp-lobby[data-state=error] .mp-status:not(:empty){
  border-color:#ffd472;
  background:#56377c;
  color:#fff8e9;
}
.account-card .account-status:not(:empty)::before,
.mp-lobby[data-state=error] .mp-status:not(:empty)::before{
  content:'!';
  border-color:#ffefac;
  background:linear-gradient(#ffe05e,#ffad27);
  box-shadow:0 2px 0 #b96904;
  color:#69400a;
}
.mp-lobby[data-state=ready] .mp-status:not(:empty),
.mp-lobby[data-state=playing] .mp-status:not(:empty){
  border-color:#79e9be;
  background:#125d68;
  color:#f3fff9;
}
.mp-lobby[data-state=ready] .mp-status:not(:empty)::before,
.mp-lobby[data-state=playing] .mp-status:not(:empty)::before{
  content:'✓';
  border-color:#c5ffe3;
  background:linear-gradient(#42d894,#159c7c);
  box-shadow:0 2px 0 #086d62;
  color:#fff;
}
@media(max-width:480px){
  .account-card .account-status:not(:empty),.mp-lobby .mp-status:not(:empty){padding:10px;gap:9px;font-size:13px}
  .account-card .account-status:not(:empty)::before,.mp-lobby .mp-status:not(:empty)::before{flex-basis:28px;width:28px;height:28px;font-size:18px}
}