.game-catan.in-lobby { min-height: 100dvh; overflow: auto; }
.game-catan #lobby { display: none; width: calc(100% - 32px); margin: clamp(24px, 6vh, 68px) auto 40px; }
.game-catan.in-lobby #lobby { display: block; }
.game-catan.in-lobby main { display: none; }
.game-catan #lobby h1 { margin: 14px 0 18px; }
.game-catan #lobby > p { margin-block: 16px; font-size: 13px; line-height: 1.8; }
.game-catan #lobbyMembers { margin-block: 20px; }
.game-catan #lobbyMembers:empty { display: none; }
.game-catan #lobby .seat { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.game-catan #lobby .seat strong { min-width: 0; flex: 1; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.game-catan #lobby .seat small { color: var(--muted); font-size: 11px; text-align: right; }
.game-catan #joinForm { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; margin-top: 20px; }
.game-catan #joinForm label { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.game-catan #nickname { min-width: 0; min-height: 46px; width: 100%; padding: 12px; font-size: 16px; }
.game-catan #joinForm button { margin: 0; min-height: 46px; }
.game-catan #lobby #joinError { margin-block: 8px; color: #b45349; }
.game-catan #joinError:empty { display: none; }
.game-catan #lobbyActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.game-catan #lobbyActions > button { flex: 1; min-height: 46px; }
.game-catan #lobbyActions > .quiet { flex-basis: 100%; }
.game-catan #retryConnection { margin-top: 8px; padding-left: 6px; border-color: transparent; background: transparent; color: var(--muted); }
.game-catan #lobby #joinRootButton { display: block; width: 100%; min-height: 42px; margin-top: 24px; }
.game-catan #lobby [hidden] { display: none !important; }
html.dark .game-catan #lobby #joinError { color: #e0a29c; }
@media (max-width: 600px) {
  .game-catan.in-lobby header { height: auto; min-height: 88px; flex-wrap: wrap; padding: 18px 16px; gap: 16px 8px; }
  .game-catan.in-lobby header .brand { font-size: 21px; }
  .game-catan.in-lobby header .room { display: flex; gap: 6px; font-size: 11px; }
  .game-catan.in-lobby header nav { width: 100%; justify-content: flex-start; gap: 6px; }
  .game-catan.in-lobby header .home-link span { display: inline; }
  .game-catan.in-lobby header #rulesButton { margin-left: auto; }
  .game-catan #lobby { margin-top: 24px; }
  .game-catan #lobby .seat { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 390px) {
  .game-catan #joinForm { grid-template-columns: minmax(0, 1fr); }
  .game-catan #lobby .seat small { font-size: 10px; }
}