/* The lobby sits in the middle of the board area rather than clinging to its
   top edge — there is nothing below it to scroll to. The shell already hands
   it the viewport, so it takes what the dock leaves and asks for no height of
   its own: a min-height here would refuse to give the drawer room to open. */
.lobby-area {
    display: flex;
}

.lobby-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* safe: a lobby taller than the area scrolls from its top rather than
       centring its head off-screen. */
    justify-content: safe center;
    padding: var(--size-5) var(--size-3);
}

/* No card chrome: the lobby sits on the hall itself. This is only the column
   that holds it, wide enough for the map preview. */
.lobby-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 38rem;
}

/* The seat list fills the card rather than the draft panel's narrow column.
   Rows share one grid (name, colour, state, action) so every column lines up
   whether or not a row has a button. */
.lobby-card .rules-news {
    align-self: center;
    margin-bottom: var(--size-3);
}

.lobby-card .lobby-seats,
.lobby-card .lobby-invites {
    display: grid;
    row-gap: 0;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    width: 100%;
    max-width: 22rem;
    margin: var(--size-4) auto var(--size-4);
    /* The rules above and below close the table off from the map and from the
       invite line. */
    border-block: var(--rule-1);
}

/* Rows are separated by a hairline rather than by each sitting in its own
   filled box — one list, not a stack of tiles. */
.lobby-seats .seat-setup + .seat-setup,
.lobby-invites .seat-setup + .seat-setup {
    border-block-start: var(--rule-1);
}

/* Invites read as the tail of the seat table: no seat, so no colour, and a
   quieter name. */
.lobby-card .lobby-invites {
    margin-top: calc(var(--size-4) * -1);
    border-block-start: none;
}

.lobby-invites .seat-setup--invited > .name-ellipsis {
    grid-column: 2;
    color: var(--text-3);
    font-style: italic;
}

/* The reset caps list items at a reading width. */
.lobby-seats .seat-setup,
.lobby-invites .seat-setup {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: var(--size-3);
    min-height: var(--size-7);
    max-width: none;
    background: none;
    border-radius: 0;
    /* Room for the accent bar that marks your own row, kept on every row so
       the colour column stays in one line. */
    padding-inline: var(--size-2) 0;
}

/* Your own row is marked by weight and an accent rule, not by an outline box. */
.lobby-seats .seat-setup--mine {
    outline: none;
    box-shadow: inset 2px 0 0 var(--color-accent-muted);
}

.lobby-seats .btn-leave {
    padding: 0 var(--size-2);
    font-size: var(--font-size-0);
}

.lobby-seats .btn-kick,
.lobby-invites .btn-kick {
    width: var(--size-5);
    height: var(--size-5);
    border-color: transparent;
}

/* Sits over the faded preview when the map cannot seat the table. */
.map-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--size-4);
    text-align: center;
}

.map-error-text {
    padding: var(--size-2) var(--size-3);
    background: var(--surface-2);
    border: var(--rule-1);
    box-shadow: var(--bevel);
}

.lobby-bots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--size-3);
    margin-bottom: var(--size-4);
}

/* As tall as its button whether it holds one or a waiting line, so the bar
   keeps its height as the lobby moves on. */
.lobby-bar-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--tap-min);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--size-1);
}

.lobby-bar-main .game-waiting-text {
    padding: 0;
}

.btn-leave {
    background: transparent;
    border: var(--border-size-1) solid var(--color-destructive-bg);
    color: var(--color-destructive);
    border-radius: var(--radius-2);
    padding: var(--size-1) var(--size-3);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-kick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-7);
    height: var(--size-7);
    background: transparent;
    border: var(--rule-1);
    color: var(--color-destructive);
    border-radius: var(--radius-2);
    font-size: var(--font-size-1);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The name search and the link share one line under the seats. */
.lobby-invite-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-2);
    width: 100%;
    max-width: 22rem;
    margin: 0 auto var(--size-2);
}

.lobby-invite-row .people-combo {
    flex: 1;
    min-width: 0;
}

.invite-search-input {
    width: 100%;
    padding: var(--size-1) var(--size-2);
    background: var(--surface-2);
    border: var(--border-size-1) solid var(--border-2);
    border-radius: var(--radius-2);
    color: var(--text-1);
    font-size: var(--font-size-1);
}

.invite-search-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* A quiet link, centred under the seats — not a full-width bar. */
.lobby-invite {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    align-self: center;
    background: none;
    border: none;
    border-radius: var(--radius-2);
    padding: var(--size-1) var(--size-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lobby-invite-label {
    font-size: var(--font-size-1);
    color: var(--text-2);
    white-space: nowrap;
}

.lobby-invite-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
}

.lobby-invite.copied,
.lobby-invite.copied .lobby-invite-copy {
    color: var(--color-success);
}

.lobby-invite.copied .lobby-invite-copy svg:first-of-type {
    display: none;
}

.lobby-invite .lobby-copy-check {
    display: none;
}

.lobby-invite.copied .lobby-copy-check {
    display: inline;
}

.lobby-private {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    align-self: center;
    margin: 0;
    font-size: var(--font-size-1);
    font-style: italic;
    color: var(--color-private-strong);
}

.lobby-private .ui-icon {
    width: 0.9rem;
    height: 0.9rem;
}

/* The join card's page: the HUD's title end on top, the card centred below. */
.guest-page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.guest-card-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--size-4);
}

.guest-card {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
    width: min(420px, 100%);
}

/* Host on the left, the Lobby/Full badge on the right. The card is a column,
   so without this the two stack. */
.guest-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-2);
}

.guest-card p {
    margin: 0;
    color: var(--text-2);
}

.guest-card-actions {
    display: flex;
    gap: var(--size-3);
    margin-top: var(--size-2);
    align-items: center;
}

.guest-name-field {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
}

.guest-name-field label {
    font-size: var(--font-size-1);
    color: var(--text-2);
}

.guest-name-field input {
    padding: var(--size-2) var(--size-3);
    background: var(--surface-2);
    border: var(--border-size-1) solid var(--border-2);
    border-radius: var(--radius-2);
    color: var(--text-1);
    font-size: var(--font-size-2);
}

.guest-name-field input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.guest-status-full {
    border-color: var(--border-2);
    color: var(--text-3);
}