/* ================= MODE SCREEN ================= */

.mode-header {
  text-align: center;
  margin-bottom: 40px;
}

.mode-header h1 {
  font-size: 28px;
  font-weight: bold;
}

.mode-header p {
  font-size: 14px;
  opacity: 0.7;
}

.carousel{
  position:relative;
  width:100%;
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.card{
  position:absolute;
  width:70%;
  height:180px;
  border-radius:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:bold;
  color:white;
  transition:0.4s ease;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
}

/* Center Active */
.card.active{
  transform:translateX(0) scale(1);
  background:#4da6ff;
  box-shadow:0 0 40px rgba(77,166,255,0.7);
  z-index:3;
}

/* Left */
.card.left{
  transform:translateX(-110%) scale(0.85);
  opacity:0.4;
  z-index:2;
}

/* Right */
.card.right{
  transform:translateX(110%) scale(0.85);
  opacity:0.4;
  z-index:2;
}

/* Hidden further cards */
.card.hidden{
  opacity:0;
  pointer-events:none;
}

/* LOCKED */
.mode-card.locked {
  opacity: 0.4;
  cursor: default;
}

.locked-text {
  position: absolute;
  bottom: 15px;
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.7;
}

.identity-container {
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.identity-input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  margin-bottom: 20px;
}

.primary-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.identity-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.identity-wrapper input{
  width:80%;
  padding:12px;
  border-radius:12px;
  border:none;
  font-size:16px;
}

.avatar-grid{
  display:grid;
  grid-template-columns:repeat(4,60px);
  gap:15px;
  justify-content:center;
}

.avatar{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:rgba(255,255,255,0.08);
  border-radius:14px;
  cursor:pointer;
  transition:0.2s ease;
}

.avatar:hover{
  transform:scale(1.1);
  background:rgba(255,255,255,0.15);
}

.avatar.selected{
  background:#4da6ff;
  transform:scale(1.15);
  box-shadow:0 0 15px rgba(77,166,255,0.7);
}

#continueBtn{
  width:80%;
  padding:12px;
  border-radius:14px;
  border:none;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
}

button{
  transition:0.2s ease;
}

button:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(77,166,255,0.6);
}

button:active{
  transform:scale(0.98);
}

.lobby-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;        /* WAJIB */
  pointer-events: auto; /* WAJIB */
}

.lobby-box{
  width:80%;
  padding:25px;
  border-radius:20px;
  background:#1f2b4d;
  display:flex;
  flex-direction:column;
  gap:15px;
  animation:fadeIn 0.3s ease;
}

.lobby-container{
  padding:30px 20px;
  text-align:center;
}

.room-code{
  font-size:20px;
  margin-bottom:25px;
}

.room-code span{
  font-size:28px;
  font-weight:bold;
  letter-spacing:2px;
}

.players{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:30px;
}

.player-card{
  width:130px;
  height:170px;
  background:#1f2b4d;
  border-radius:20px;
  padding:15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 20px rgba(0,0,0,0.3);
}

.player-card.waiting{
  opacity:0.6;
}

.avatar{
  font-size:40px;
  margin-bottom:10px;
}

.name{
  font-weight:bold;
  margin-bottom:5px;
}

.status{
  font-size:12px;
  opacity:0.8;
}

.host-badge{
  color:#4da3ff;
  font-size:12px;
}

.vs{
  font-size:28px;
  font-weight:bold;
  opacity:0.6;
}

.lobby-btn{
  width:100%;
  padding:15px;
  border:none;
  border-radius:15px;
  font-size:16px;
  margin-top:10px;
  background:#3a7bff;
  color:white;
}

.lobby-btn.start{
  background:#00c851;
}

/* ===== POPUP LOBBY STYLE ===== */

.lobby-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.lobby-box{
  width:85%;
  max-width:350px;
  padding:30px 20px;
  background:#1f2b4d;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  gap:15px;
  text-align:center;
  box-shadow:0 0 30px rgba(0,0,0,0.4);
  animation:fadeIn 0.25s ease;
}

.popup-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:0.2s;
}

.popup-btn.primary{
  background:#3a7bff;
  color:white;
}

.popup-btn.primary:hover{
  background:#4a8bff;
  transform:scale(1.03);
}

.popup-btn.secondary{
  background:#2e3c63;
  color:white;
}

.popup-btn.secondary:hover{
  background:#3c4c78;
  transform:scale(1.03);
}

.popup-btn.cancel{
  background:#444;
  color:#ccc;
}

.popup-btn.cancel:hover{
  background:#555;
}

.popup-input{
  padding:12px;
  border-radius:12px;
  border:none;
  font-size:16px;
  text-align:center;
}