.lobby-panel{
  max-width:1000px;
  margin:auto;
}

.lobby-entry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.lobby-option{
  background:#0b1119;
  border:1px solid #293543;
  border-radius:18px;
  padding:24px;
}

.lobby-option h2{
  margin:8px 0 8px;
}

.lobby-option p{
  color:#8995a5;
  line-height:1.55;
  min-height:48px;
}

.lobby-icon{
  font-size:34px;
}

.lobby-room{
  display:none;
}

.room-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#0b1119;
  border:1px solid #293543;
  border-radius:18px;
  padding:22px;
}

.room-label{
  color:#788596;
  font-size:11px;
  letter-spacing:2px;
}

.room-code{
  color:#ef3d32;
  font-size:42px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:2px;
  margin-top:5px;
}

.room-details{
  color:#96a3b3;
  margin-top:9px;
}

.room-count{
  width:80px;
  height:80px;
  border-radius:50%;
  border:3px solid #ef3d32;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
}

.lobby-status{
  display:none;
  margin-top:16px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(239,61,50,.09);
  border:1px solid rgba(239,61,50,.32);
  color:#ffaaa4;
}

.lobby-status.show{
  display:block;
}

.lobby-players-title{
  margin:28px 0 12px;
}

.lobby-players{
  display:grid;
  gap:10px;
}

.lobby-player{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:13px;
  align-items:center;
  background:#0b1119;
  border:1px solid #293543;
  border-radius:14px;
  padding:13px 15px;
}

.player-number{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#18222f;
  font-weight:900;
}

.lobby-player-name{
  font-weight:900;
}

.lobby-player-meta{
  color:#778494;
  font-size:12px;
  margin-top:3px;
}

.ready-state{
  border-radius:999px;
  padding:8px 11px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
}

.ready-state.ready{
  background:rgba(25,169,112,.13);
  color:#7ce1b6;
  border:1px solid rgba(25,169,112,.35);
}

.ready-state.waiting{
  background:rgba(255,183,77,.09);
  color:#ffc06c;
  border:1px solid rgba(255,183,77,.28);
}

.lobby-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.ready-button,
.start-button{
  border:0;
  border-radius:11px;
  min-height:48px;
  padding:0 20px;
  color:#fff;
  font-weight:900;
}

.ready-button{
  background:#187f59;
}

.start-button{
  background:#ef3d32;
}

.ready-button:disabled,
.start-button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

@media(max-width:700px){

  .lobby-entry{
    grid-template-columns:1fr;
  }

  .room-code{
    font-size:32px;
  }

  .room-count{
    width:64px;
    height:64px;
  }

  .lobby-player{
    grid-template-columns:42px 1fr;
  }

  .ready-state{
    grid-column:1 / -1;
    text-align:center;
  }

  .lobby-actions > button{
    width:100%;
  }
}