/* Lobby: big room code up top, players / packs / START in the dock. */

.lobby-head {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  padding: calc(var(--topbar-h) + var(--safe-t) + 4px) 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 15, 0.82) 0%, rgba(6, 6, 15, 0.6) 65%, rgba(6, 6, 15, 0) 100%);
}
.lobby-head-label {
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.room-code {
  padding: 0 8px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 14vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  color: var(--c-cyan);
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.75), 0 4px 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease;
}
.room-code:active { transform: scale(0.96); }
.room-code-row { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.room-code.is-hidden-code { color: var(--c-dim); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6); }
/* The eye sits beside the code without shifting it off-centre. */
.room-code-eye { position: absolute; left: 100%; margin-left: 4px; font-size: 1.1rem; background: rgba(9, 11, 28, 0.88); }
.lobby-head-actions { display: flex; gap: 8px; margin-top: 4px; }
/* Over the LED wall the translucent secondary style washes out: give the invite button a solid glass body. */
.lobby-head .btn-secondary { background: rgba(9, 11, 28, 0.88); }

.lobby-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.player-chips, .pack-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  margin: 0 -2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.player-chips::-webkit-scrollbar, .pack-chips::-webkit-scrollbar { display: none; }

.player-chip {
  --seat: var(--c-cyan);
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 210px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--field);
  border: 1.5px solid color-mix(in srgb, var(--seat) 55%, transparent);
  animation: chip-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.player-chip.is-me { background: color-mix(in srgb, var(--seat) 14%, transparent); }
.player-chip.is-offline { opacity: 0.5; filter: grayscale(0.7); }
.player-chip.is-kickable { padding-right: 4px; }
.chip-kick {
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 51, 85, 0.12);
  color: #ffb3c0;
  font-size: 0.8rem;
  font-weight: 900;
  transition: background 0.15s ease, transform 0.08s ease;
}
.chip-kick:hover { background: rgba(255, 51, 85, 0.3); }
.chip-kick:active { transform: scale(0.9); }
.player-chip-avatar {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--seat) 30%, #0a0b1c);
  font-size: 1.2rem;
  line-height: 1;
}
.player-chip-name { font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes chip-in { from { opacity: 0; transform: scale(0.7); } }

.pack-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 12px;
  border: 1.5px solid var(--field-line);
  background: var(--field);
  color: var(--c-dim);
  font-weight: 600;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pack-chip-icon { font-size: 1.15rem; filter: grayscale(1) opacity(0.6); transition: filter 0.15s ease; }
.pack-chip-count { font-size: 0.7rem; color: var(--c-faint); }
.pack-chip.is-on { border-color: var(--c-cyan); background: rgba(0, 240, 255, 0.12); color: var(--c-text); }
.pack-chip.is-on .pack-chip-icon { filter: none; }
.pack-chips.is-readonly .pack-chip { cursor: default; }
.pack-chips.is-readonly .pack-chip:not(.is-on) { opacity: 0.45; }

.lobby-actions { display: flex; align-items: center; gap: 10px; }
.lobby-actions .btn-lg { flex: 1; min-width: 0; }
.lobby-wait {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1.5px dashed rgba(0, 240, 255, 0.35);
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-dim);
  text-align: center;
}
#lobby-leave { align-self: center; margin-top: -4px; }

@media (orientation: landscape) and (min-width: 700px) {
  .lobby-head {
    right: var(--sidebar-w);
    padding-top: calc(var(--topbar-h) + var(--safe-t) + 4px);
  }
  .player-chips, .pack-chips { flex-wrap: wrap; overflow: visible; }
  .panel.lobby-dock, .lobby-dock .dock-body { gap: 18px; }
}

/* Attached TV screens (CONTRACTS §9.4), for everyone in the room. */
.lobby-screens {
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(9, 11, 28, 0.82);
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cyan);
}

/* QR codes: dark modules on a white card so every phone camera reads them, on any theme. */
.qr-frame { padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 30px rgba(0, 240, 255, 0.35); line-height: 0; }
.qr-frame:empty { display: none; }
.qr-svg { display: block; width: 100%; height: auto; }

/* Invite sheet: QR + code + link, share / copy, the TV hint. */
.invite-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.invite-qr { width: min(240px, 64vw); }
.invite-scan { font-size: 0.85rem; color: var(--c-dim); }
.invite-code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: 0.16em;
  margin-right: -0.16em;
  color: var(--c-cyan);
  text-shadow: 0 0 22px rgba(0, 240, 255, 0.6);
}
.invite-url { font-size: 0.85rem; font-weight: 600; color: var(--c-text); overflow-wrap: anywhere; }
.invite-actions { display: flex; flex-direction: column; gap: 12px; }
.invite-tv { font-size: 0.85rem; color: var(--c-dim); line-height: 1.4; }