/*
 * lobby.css — Pre-join "Take a Seat" panel.
 *
 * Shown when the game phase is LOBBY or before the server has confirmed
 * our seat via JOINED. Once we're seated and a round is in flight this
 * panel disappears and gameplay UI takes over.
 */

#bj-lobby-panel {
    /* Mounted into #bj-slot-actions — flow as a normal flex child. */
    position: relative;
    width: 100%;
    padding: 0;
    pointer-events: auto;
}

.bj-lobby-card {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bj-lobby-eyebrow {
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

.bj-lobby-title {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.05;
    color: var(--text-primary);
    margin-top: 6px;
}

.bj-lobby-title em {
    color: var(--gold);
    font-style: italic;
}

.bj-lobby-sub {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 6px;
}

.bj-lobby-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.bj-lobby-info__cell {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 8px 10px;
}

.bj-lobby-info__label {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 700;
}

.bj-lobby-info__value {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--gold);
    font-size: 13px;
}

.bj-lobby-seat {
    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--gold-soft);
    background: linear-gradient(180deg,
        rgba(201, 165, 106, 0.22),
        rgba(201, 165, 106, 0.12));
    color: var(--gold-strong);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background var(--t-fast),
                box-shadow var(--t-fast),
                color var(--t-fast);
}

.bj-lobby-seat:hover,
.bj-lobby-seat:focus-visible {
    background: linear-gradient(180deg,
        rgba(201, 165, 106, 0.32),
        rgba(201, 165, 106, 0.20));
    color: #fff8e6;
    box-shadow: 0 0 0 1px var(--gold);
}

.bj-lobby-seat__sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-top: 2px;
    letter-spacing: 0;
}

.bj-lobby-foot {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 12px;
}


/* ---------------------------------------------------------------------------
 * Lobby GATE + spectator flow (lobbyGate.js)
 * ------------------------------------------------------------------------- */

#bj-lobby-gate,
#bj-spectator-prompt,
#bj-goodbye {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 6, 9, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
    /* A centred flex item taller than its container is clipped at BOTH ends
       and cannot be scrolled to. `overflow-y:auto` here + `margin:auto` on
       the card is the standard fix: the card centres when it fits and the
       modal scrolls when it doesn't (nickname + error + 2 buttons is 360px
       tall, which does not fit a 360px landscape phone). */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bj-gate__card {
    width: 100%;
    max-width: 360px;
    margin: auto;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 22px 20px 18px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.bj-gate__eyebrow {
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

.bj-gate__title {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.1;
    color: var(--text-primary);
    margin-top: 6px;
}
.bj-gate__title em { color: var(--gold); font-style: italic; }

.bj-gate__sub {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 8px;
    line-height: 1.4;
}

.bj-gate__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.bj-gate__btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.bj-gate__btn:hover,
.bj-gate__btn:focus-visible { background: rgba(255, 255, 255, 0.09); }

.bj-gate__btn--primary {
    border-color: var(--gold-soft);
    background: linear-gradient(180deg,
        rgba(201, 165, 106, 0.24),
        rgba(201, 165, 106, 0.12));
    color: var(--gold-strong);
}
.bj-gate__btn--primary:hover,
.bj-gate__btn--primary:focus-visible {
    color: #fff8e6;
    box-shadow: 0 0 0 1px var(--gold);
}

.bj-gate__link {
    margin-top: 10px;
    padding: 8px 12px;
    min-height: 32px;          /* was a 37x16 tap target */
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-family: var(--font-ui);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
.bj-gate__link:hover { color: var(--text-primary); }

.bj-gate__input {
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 16px;   /* >=16px avoids iOS zoom-on-focus */
    text-align: center;
    box-sizing: border-box;
}
.bj-gate__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-soft);
}

.bj-gate__err {
    margin-top: 8px;
    font-size: 12px;
    color: #e26d6d;
    font-weight: 600;
}

.bj-goodbye__card { max-width: 320px; }

/* Spectator bar */
#bj-spectator-bar {
    position: fixed;
    /* Docked BOTTOM, not top. At top:12px it sat squarely on #bj-top-hud
       (top: safe-top + 6px, full width) on every single viewport — the Quit
       button covered the HUD's history button. In spectator mode lobby.css
       hides the hand / rail / action slots, so the bottom of the screen is
       empty and is the natural home for the Play / Quit call to action. */
    bottom: calc(var(--safe-bottom) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.66);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}
.bj-specbar__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e25555;
    box-shadow: 0 0 8px #e25555;
    animation: bj-specpulse 1.6s ease-in-out infinite;
}
@keyframes bj-specpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.bj-specbar__label {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-primary);
}
.bj-specbar__btn {
    padding: 7px 14px;
    min-height: 32px;          /* was 54x26 */
    border-radius: 999px;
    border: 1px solid var(--gold-soft);
    background: rgba(201, 165, 106, 0.16);
    color: var(--gold-strong);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.bj-specbar__btn--ghost {
    border-color: var(--hairline);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
}

/* Mode-driven visibility of gameplay panels */
body.bj-mode-lobby #bj-ui-stack { display: none !important; }
body.bj-mode-spectating #bj-slot-rail,
body.bj-mode-spectating #bj-slot-actions,
body.bj-mode-spectating #bj-slot-hand { display: none !important; }

/* base.css bottom-anchors the stack (justify-content:flex-end) because in
   normal play the column is full. Spectating hides three of the five slots,
   so the surviving phase + dealer rows would drop to the bottom of the
   screen leaving a large void under the video. Pin them back to the top of
   the dark band, where they sat before. */
body.bj-mode-spectating #bj-ui-stack { justify-content: flex-start; }