.screen--lobby {
  flex-direction: column;
  padding:        var(--sp-6);
  gap:            var(--sp-4);
  overflow-y:     auto;
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */

.lobby__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.lobby__title {
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
}

.lobby__settings {
  background:      rgba(255,255,255,0.08);
  border:          none;
  border-radius:   var(--r-full);
  width:           38px;
  height:          38px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  cursor:          pointer;
  color:           var(--c-text);
  transition:      background var(--t-fast);
}
.lobby__settings:hover { background: rgba(255,255,255,0.15); }

/* ─── Room code ──────────────────────────────────────────────────────────────── */

.lobby__code-card {
  text-align: center;
}

.lobby__code-label {
  font-size:      var(--fs-xs);
  color:          var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom:  var(--sp-1);
}

.lobby__code {
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-bold);
  color:          var(--c-primary);
  letter-spacing: 6px;
}

.lobby__code-actions {
  display:         flex;
  justify-content: center;
  gap:             var(--sp-3);
  margin-top:      var(--sp-3);
}

.lobby__code-btn {
  display:     flex;
  align-items: center;
  gap:         var(--sp-1);
  padding:     var(--sp-2) var(--sp-4);
  background:  var(--c-bg-elevated);
  border:      none;
  border-radius: var(--r-full);
  color:       var(--c-text);
  font-family: var(--font);
  font-size:   var(--fs-sm);
  cursor:      pointer;
  transition:  background var(--t-fast);
}
.lobby__code-btn:hover { background: rgba(255,255,255,0.15); }

/* ─── QR Code ────────────────────────────────────────────────────────────────── */

.lobby__qr {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-2);
}

.lobby__qr-box {
  width:           160px;
  height:          160px;
  background:      #fff;
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      transform var(--t-fast);
  overflow:        hidden;
}
.lobby__qr-box:hover  { transform: scale(1.03); }
.lobby__qr-box:active { transform: scale(0.97); }

.lobby__qr-box svg,
.lobby__qr-box img { width: 100%; height: 100%; }

.lobby__qr-label {
  font-size: var(--fs-xs);
  color:     var(--c-text-muted);
}

/* QR fullscreen modal */
.qr-modal {
  position:        fixed;
  inset:           0;
  z-index:         200;
  background:      rgba(0,0,0,0.9);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-6);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity var(--t-normal);
}
.qr-modal.open { opacity: 1; pointer-events: all; }

.qr-modal__box {
  width:         280px;
  height:        280px;
  background:    #fff;
  border-radius: var(--r-lg);
  padding:       var(--sp-4);
}

.qr-modal__close {
  color:       var(--c-text-muted);
  font-size:   var(--fs-sm);
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--font);
}

/* ─── Players ────────────────────────────────────────────────────────────────── */

.lobby__players-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.lobby__players-label {
  font-size:      var(--fs-sm);
  color:          var(--c-text-muted);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lobby__players-count {
  font-size: var(--fs-sm);
  color:     var(--c-text-muted);
}

.lobby__players-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

.lobby__player {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding:     var(--sp-3) var(--sp-4);
  background:  var(--c-bg-elevated);
  border-radius: var(--r-md);
  animation:   player-join 300ms ease-out;
}

@keyframes player-join {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lobby__player__icon  { font-size: var(--fs-lg); }
.lobby__player__name  { flex: 1; font-weight: var(--fw-bold); }
.lobby__player__badge {
  font-size:     var(--fs-xs);
  color:         var(--c-text-muted);
  background:    rgba(255,255,255,0.08);
  padding:       2px var(--sp-2);
  border-radius: var(--r-full);
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */

.lobby__footer {
  margin-top:     auto;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  padding-top:    var(--sp-4);
}

.lobby__waiting {
  text-align: center;
  font-size:  var(--fs-sm);
  color:      var(--c-text-muted);
  animation:  waiting-pulse 2s ease-in-out infinite;
}

@keyframes waiting-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}