/* Home (name + create/join) and lobby (roster + start) screens. */

.home {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: stretch; gap: 16px; padding: 12px 4px 24px;
}
.home > .brand { align-self: center; }
.home-tagline {
  text-align: center; font-size: 13px; line-height: 1.45;
  color: #fff6e5; text-shadow: 0 1px 2px rgba(80,40,10,.5);
  margin: 0 6px; max-width: 360px; align-self: center;
}
.home-card {
  background: var(--surface-panel-card);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.home-card > .btn-primary,
.home-card > .btn-secondary { width: 100%; }
.join-row { display: flex; gap: 8px; }
.join-row .text-input { flex: 1; }
.join-row .code-in { text-transform: uppercase; letter-spacing: .12em; font-weight: var(--font-weight-bold); }
.join-btn { width: 52px; flex: 0 0 auto; padding: 0; }
.home-foot {
  text-align: center; font-size: 11px; color: #fff6e5;
  text-shadow: 0 1px 2px rgba(80,40,10,.5); margin: 0;
}

/* ── Lobby ───────────────────────────────────────────────── */
.lobby { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 10px 2px 4px; min-height: 0; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.code-badge {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
  background: var(--color-brown-warm); border: 2px solid #8a5a2b;
  border-radius: var(--radius-md); padding: 4px 10px; color: #FFE9B8;
  box-shadow: var(--shadow-button);
}
.code-lbl { font-size: 8px; letter-spacing: .12em; opacity: .8; }
.code-val { font-size: 18px; font-weight: var(--font-weight-heavy); letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.mode-badge {
  background: var(--surface-panel-card); border: var(--border-subtle);
  border-radius: 999px; padding: 4px 12px; font-size: 11px;
  font-weight: var(--font-weight-bold); color: var(--color-brown-strong);
  box-shadow: var(--shadow-card);
}
.lobby-body {
  background: var(--surface-panel-card);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 14px; flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.section-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: .05em; color: #8a623f;
}
.section-lbl .i svg { width: 14px; height: 14px; }
.player-list { display: flex; flex-direction: column; gap: 7px; }
.player-row {
  display: flex; align-items: center; gap: 8px;
  background: #fffdf6; border: var(--border-subtle);
  border-left: 4px solid var(--oc, #999);
  border-radius: var(--radius-sm); padding: 9px 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.pdot { width: 13px; height: 13px; border-radius: 50%; background: var(--oc, #999); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; }
.pname { font-size: 14px; font-weight: var(--font-weight-bold); color: var(--color-brown-deep); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; }
.bot-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: var(--font-weight-bold); color: var(--color-brown-strong);
  min-width: 84px; justify-content: center;
}
.bot-count .i svg { width: 18px; height: 18px; stroke: var(--tractor); }
.lobby-actions { display: flex; align-items: center; gap: 8px; }
.lobby-actions .btn-primary { flex: 1; }
.waiting { flex: 1; text-align: center; font-size: 14px; font-style: italic; color: #fff6e5; text-shadow: 0 1px 2px rgba(80,40,10,.5); align-self: center; }
.lobby-hint { text-align: center; font-size: 11px; color: #fff6e5; text-shadow: 0 1px 2px rgba(80,40,10,.5); margin: 0; }
.connection-note {
  background: rgba(59, 34, 15, .34);
  border: 1px solid rgba(255, 246, 229, .22);
  border-radius: 999px;
  padding: 5px 10px;
}
.connection-fallback-polling { color: #FFE08A; }
.connection-offline { color: #fff; background: rgba(217, 83, 79, .72); }