/* Shared game lobby (difficulty picker + play buttons) used by every game page.
   Classes are prefixed with lobby- so each game's own CSS can't clash with them. */

html[data-theme="dark"] .lobby {
    --lobby-surface: #1c1d24;
    --lobby-surface-2: #25262f;
    --lobby-border: #2e3039;
    --lobby-muted: #9aa0ab;
    --lobby-ink: #ececef;
    --lobby-ink-text: #141418;
}

html[data-theme="light"] .lobby {
    --lobby-surface: #ffffff;
    --lobby-surface-2: #f1f2f4;
    --lobby-border: #e1e3e8;
    --lobby-muted: #6b7280;
    --lobby-ink: #18181b;
    --lobby-ink-text: #ffffff;
}

.lobby {
    --lobby-accent: #8fb3d9;
    --lobby-ease: cubic-bezier(0.4, 0, 0.2, 1);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: calc(100% - 32px);
    max-width: 300px;
    margin: 10vh auto 0;
    padding: 20px;
    text-align: center;
    background: var(--lobby-surface);
    border: 1px solid var(--lobby-border);
    border-radius: 12px;
    /* Text follows the site theme like the card does; some games' own CSS
       hard-codes a body colour that would clash with the card background. */
    color: var(--text-color);
    /* Same stack as layout.njk, so games whose own CSS sets another body font still match */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: lobbyFadeUp 0.35s var(--lobby-ease);
}

.lobby * {
    box-sizing: border-box;
}

.lobby h1 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 650;
}

.lobby-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.92rem;
    font-weight: 600;
}

.lobby-row .lobby-select {
    flex: 1;
    max-width: 140px;
}

.lobby-vs {
    color: var(--lobby-muted);
    font-weight: 400;
}

.lobby-divider {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--lobby-border);
}

.lobby-select,
.lobby-btn {
    margin: 0;
    font: inherit;
    color: inherit;
    background: var(--lobby-surface-2);
    border: 1px solid var(--lobby-border);
    border-radius: 8px;
    cursor: pointer;
    transition:
        background-color 0.2s var(--lobby-ease),
        border-color 0.2s var(--lobby-ease),
        transform 0.1s var(--lobby-ease);
}

.lobby-select {
    padding: 6px 9px;
    font-size: 0.92rem;
}

.lobby-btn {
    width: 100%;
    padding: 8px 14px;
    font-size: 0.92rem;
    font-weight: 600;
}

.lobby-btn:hover,
.lobby-select:hover {
    border-color: var(--lobby-muted);
}

.lobby-btn:active {
    transform: scale(0.97);
}

.lobby-btn.primary {
    background: var(--lobby-ink);
    border-color: var(--lobby-ink);
    color: var(--lobby-ink-text);
}

.lobby-btn.primary:hover {
    border-color: var(--lobby-ink);
    opacity: 0.88;
}

.lobby-muted {
    margin: 0;
    color: var(--lobby-muted);
}

.lobby-spinner {
    width: 32px;
    height: 32px;
    margin: 8px auto 0;
    border-radius: 50%;
    border: 3px solid var(--lobby-border);
    border-top-color: var(--lobby-accent);
    animation: lobbySpin 0.8s linear infinite;
}

@keyframes lobbyFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@keyframes lobbySpin {
    to {
        transform: rotate(360deg);
    }
}