@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600&display=swap');

    *, *::before, *::after {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    :root {
        --purple: #46178f;
        --purple-mid: #5c21b0;
        --purple-light: #7b2fd4;
        --yellow: #f5a623;
        --yellow-bright: #ffd234;
        --red: #e21b3c;
        --red-dark: #b01530;
        --blue: #1368ce;
        --green: #26890c;
        --white: #ffffff;
        --off-white: #f0e6ff;
        --ink: #1a0033;
        --radius: 16px;
        --radius-lg: 24px;
        --shadow: 0 4px 20px rgba(0,0,0,0.35);
        --shadow-lg: 0 8px 40px rgba(0,0,0,0.45);
    }

    body {
        margin: 0;
        font-family: 'Nunito Sans', sans-serif;
        min-height: 100vh;
        min-height: 100dvh;
        background-color: var(--purple);
        background-image: radial-gradient(ellipse 120% 80% at 50% -10%, var(--purple-light) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 90% 110%, #2a0a6b 0%, transparent 50%);
        color: var(--white);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 16px 48px;
    }

    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: calc(48px + env(safe-area-inset-bottom));
        }
    }

    /* ── Typography ─────────────────────────────── */
    h1 {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 36px;
        margin: 0 0 8px;
        letter-spacing: -0.02em;
        text-shadow: 0 3px 0 rgba(0,0,0,0.25);
    }

    h2 {
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 24px;
        margin: 0 0 8px;
    }

    p {
        margin: 0 0 12px;
        font-size: 16px;
        color: var(--off-white);
    }

    /* ── Layout ─────────────────────────────────── */
    .app-container {
        width: 100%;
        max-width: 480px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* ── Header ─────────────────────────────────── */
    .app-header {
        text-align: center;
        padding: 8px 0;
    }

    .app-logo {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 42px;
        letter-spacing: -0.03em;
        text-shadow: 0 4px 0 rgba(0,0,0,0.3);
        background: linear-gradient(160deg, #ffffff 40%, var(--yellow-bright) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .app-tagline {
        font-size: 15px;
        color: rgba(255,255,255,0.55);
        margin: 4px 0 0;
    }

    /* ── Card ───────────────────────────────────── */
    .card {
        width: 100%;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: var(--radius-lg);
        padding: 28px 24px;
        box-shadow: var(--shadow-lg);
        text-align: center;
    }

    /* ── Host card layout ───────────────────────── */
    /* Forces QR and room badge to stack vertically  */
    .host-main-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        /* No padding-right — the End Game button floats absolutely
        and should not affect the card's content layout at all */
    }

    .btn-end-game {
            position: absolute;
            top: 16px;
            right: 16px;
            padding: 6px 14px;
            border: 1.5px solid rgba(226,27,60,0.5);
            border-radius: 99px;
            background: rgba(226,27,60,0.12);
            color: #ff8099;
            font-family: 'Nunito', sans-serif;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
            -webkit-tap-highlight-color: transparent;
            /* Ensure it sits above other card content */
            z-index: 1;
        }
    .btn-end-game:hover {
        background: rgba(226,27,60,0.25);
        border-color: var(--red);
        color: white;
    }
    
    /* ── Room badge ─────────────────────────────── */
    .room-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255,255,255,0.12);
        border: 2px solid rgba(255,255,255,0.25);
        border-radius: 99px;
        padding: 8px 20px;
        margin-bottom: 16px;
    }

    .room-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
    }

    .room-code {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 22px;
        color: var(--yellow-bright);
        letter-spacing: 0.08em;
        text-shadow: 0 2px 0 rgba(0,0,0,0.2);
    }

    /* ── QR code ────────────────────────────────── */
    .qr-wrapper {
        background: white;
        border-radius: var(--radius);
        padding: 16px;
        display: inline-block;
        box-shadow: var(--shadow);
        margin: 8px 0 12px;
    }

    .qr-hint {
        font-size: 13px;
        color: rgba(255,255,255,0.5);
        margin: 0 0 4px;
    }

    /* ── Buzzer status pill ─────────────────────── */
    .buzzer-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 16px;
        padding: 7px 18px;
        border-radius: 99px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

        .buzzer-status.open {
            background: rgba(38,137,12,0.25);
            border: 2px solid var(--green);
            color: #7dff55;
        }

        .buzzer-status.closed {
            background: rgba(226,27,60,0.18);
            border: 2px solid rgba(226,27,60,0.6);
            color: #ff8099;
        }

    /* ── Controls ───────────────────────────────── */
    .controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* ── Generic button base ────────────────────── */
    .btn {
        width: 100%;
        padding: 16px 20px;
        border: none;
        border-radius: var(--radius);
        font-family: 'Nunito', sans-serif;
        font-size: 18px;
        font-weight: 800;
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        letter-spacing: 0.01em;
        position: relative;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

        .btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 50%);
            pointer-events: none;
        }

        .btn:active {
            transform: scale(0.97) translateY(2px);
        }

    .btn-open {
        background: var(--green);
        color: white;
        box-shadow: 0 6px 0 #1a5c08, var(--shadow);
    }

        .btn-open:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 0 #1a5c08, var(--shadow-lg);
        }

        .btn-open.is-open {
            background: var(--red);
            box-shadow: 0 6px 0 var(--red-dark), var(--shadow);
        }

            .btn-open.is-open:hover {
                box-shadow: 0 8px 0 var(--red-dark), var(--shadow-lg);
            }

    .btn-reset {
        background: var(--blue);
        color: white;
        box-shadow: 0 6px 0 #0d4d9e, var(--shadow);
    }

        .btn-reset:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 0 #0d4d9e, var(--shadow-lg);
        }

    .btn-next {
        background: var(--yellow);
        color: var(--ink);
        box-shadow: 0 6px 0 #c07800, var(--shadow);
    }

        .btn-next:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 0 #c07800, var(--shadow-lg);
        }

    /* ── Leaderboard ────────────────────────────── */
    .leaderboard {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .leaderboard-placeholder {
        text-align: center;
        color: rgba(255,255,255,0.4);
        font-size: 15px;
        padding: 24px 0;
    }

    .leaderboard-entry {
        display: flex;
        align-items: center;
        gap: 14px;
        background: rgba(255,255,255,0.09);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: var(--radius);
        padding: 14px 18px;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 18px;
        animation: slideIn 0.3s ease;
        transition: all 0.25s ease;
    }

        .leaderboard-entry.current {
            background: rgba(255,210,52,0.2);
            border-color: var(--yellow-bright);
            font-size: 22px;
            box-shadow: 0 0 24px rgba(255,210,52,0.25);
        }

    .leaderboard-medal {
        font-size: 24px;
        min-width: 32px;
    }

    .leaderboard-name {
        flex: 1;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Player — nickname screen ───────────────── */
    .join-screen {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .nickname-input {
        width: 100%;
        padding: 16px 20px;
        border: 3px solid rgba(255,255,255,0.25);
        border-radius: var(--radius);
        background: rgba(255,255,255,0.1);
        color: white;
        font-family: 'Nunito', sans-serif;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        outline: none;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

        .nickname-input::placeholder {
            color: rgba(255,255,255,0.35);
        }

        .nickname-input:focus {
            border-color: var(--yellow-bright);
            background: rgba(255,255,255,0.16);
        }

    .btn-join {
        width: 100%;
        padding: 18px;
        border: none;
        border-radius: var(--radius);
        background: var(--yellow-bright);
        color: var(--ink);
        font-family: 'Nunito', sans-serif;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 6px 0 #c9930a, var(--shadow);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

        .btn-join:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 0 #c9930a, var(--shadow-lg);
        }

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

    .error-msg {
        color: #ffb3c0;
        font-weight: 700;
        font-size: 14px;
        margin: 0;
        display: none;
    }

    /* ── Player — waiting screen ────────────────── */
    .waiting-screen {
        text-align: center;
        padding: 16px 0;
    }

    .waiting-icon {
        font-size: 64px;
        display: block;
        margin-bottom: 16px;
        animation: waitPulse 2s ease-in-out infinite;
    }

    @keyframes waitPulse {
        0%, 100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }
    }

    .waiting-name {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 28px;
        color: var(--yellow-bright);
        display: block;
        margin-bottom: 8px;
    }

    .waiting-msg {
        font-size: 15px;
        color: rgba(255,255,255,0.55);
    }

    /* ── Player — buzzer screen ─────────────────── */
    .buzzer-screen {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 8px 0;
    }

    .buzzer-player-name {
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 18px;
        color: var(--yellow-bright);
        margin: 0;
    }

    /* Giant red circle */
    .buzz-btn {
        width: 240px;
        height: 240px;
        border-radius: 50%;
        border: none;
        background: radial-gradient(circle at 35% 32%, #ff4d6d, var(--red) 55%, var(--red-dark) 100%);
        color: white;
        font-family: 'Nunito', sans-serif;
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 0.05em;
        cursor: pointer;
        box-shadow: 
            0 10px 0 #8b0f26,
            0 14px 40px rgba(226,27,60,0.65), 
            inset 0 3px 0 rgba(255,255,255,0.18);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        position: relative;
        overflow: hidden;
        animation: buzzGlow 2s ease-in-out infinite;
        -webkit-tap-highlight-color: transparent;
    }

        /* Sheen highlight */
        .buzz-btn::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 18%;
            width: 36%;
            height: 24%;
            background: rgba(255,255,255,0.22);
            border-radius: 50%;
            filter: blur(6px);
            pointer-events: none;
        }

        .buzz-btn:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 
                0 14px 0 #8b0f26, 
                0 20px 50px rgba(226,27,60,0.8), 
                inset 0 3px 0 rgba(255,255,255,0.18);
            animation: none;
        }

        .buzz-btn:active {
            transform: translateY(8px) scale(0.96);
            box-shadow: 0 2px 0 #8b0f26, 0 6px 20px rgba(226,27,60,0.5), inset 0 3px 0 rgba(255,255,255,0.12);
        }

        .buzz-btn:disabled {
            background: radial-gradient(circle at 35% 32%, #777, #444 55%, #2a2a2a 100%);
            box-shadow: 0 6px 0 #111, 0 8px 16px rgba(0,0,0,0.3);
            cursor: not-allowed;
            animation: none;
            opacity: 0.55;
        }

    @keyframes buzzGlow {
        0%, 100% {
            box-shadow: 0 10px 0 #8b0f26, 0 14px 40px rgba(226,27,60,0.65), inset 0 3px 0 rgba(255,255,255,0.18);
        }

        50% {
            box-shadow: 0 10px 0 #8b0f26, 0 18px 60px rgba(226,27,60,0.9), inset 0 3px 0 rgba(255,255,255,0.18);
        }
    }

    .buzz-confirmation {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 24px;
        color: #6dff45;
        text-shadow: 0 0 24px rgba(109,255,69,0.6);
        text-align: center;
        display: none;
        animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }

    @keyframes popIn {
        from {
            opacity: 0;
            transform: scale(0.7);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* ── Responsive ─────────────────────────────── */
    @media (max-width: 380px) {
        h1 {
            font-size: 28px;
        }

        .app-logo {
            font-size: 34px;
        }

        .buzz-btn {
            width: 200px;
            height: 200px;
            font-size: 26px;
        }

        .card {
            padding: 20px 16px;
        }
    }

    /* ── Landing page ───────────────────────────── */
    .landing-hero {
        text-align: center;
        padding: 20px 0 8px;
    }

    .landing-tagline {
        font-size: 16px;
        color: rgba(255,255,255,0.6);
        line-height: 1.5;
        margin: 8px 0 0;
    }

    .landing-card {
        padding: 24px;
    }

    .landing-buttons {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Each landing button is a full-width link styled as a card row */
    .landing-btn {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 22px;
        border-radius: var(--radius);
        text-decoration: none;
        color: var(--white);
        font-family: 'Nunito', sans-serif;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        text-align: left;
    }

        .landing-btn:hover {
            transform: translateY(-3px);
        }

        .landing-btn:active {
            transform: scale(0.98);
        }

    .landing-btn-host {
        background: linear-gradient(135deg, #26890c, #1a5c08);
        box-shadow: 0 6px 0 #0f3605, var(--shadow);
    }

        .landing-btn-host:hover {
            box-shadow: 0 8px 0 #0f3605, var(--shadow-lg);
        }

    .landing-btn-join {
        background: linear-gradient(135deg, #1368ce, #0d4d9e);
        box-shadow: 0 6px 0 #083580, var(--shadow);
    }

        .landing-btn-join:hover {
            box-shadow: 0 8px 0 #083580, var(--shadow-lg);
        }

    .landing-btn-icon {
        font-size: 36px;
        min-width: 44px;
        text-align: center;
    }

    .landing-btn-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .landing-btn-text strong {
            font-size: 20px;
            font-weight: 900;
        }

        .landing-btn-text small {
            font-size: 13px;
            font-weight: 600;
            opacity: 0.75;
        }

    .landing-footer {
        font-size: 13px;
        color: rgba(255,255,255,0.35);
        text-align: center;
        margin: 0;
    }

    /* ── Back link ──────────────────────────────── */
    .back-link {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,0.55);
        text-decoration: none;
        margin-bottom: 4px;
        transition: color 0.15s ease;
    }

        .back-link:hover {
            color: white;
        }

    /* ── Share link row ─────────────────────────── */
    /* Sits below the QR code on the host page */
    .share-row {
        display: flex;
        gap: 8px;
        margin: 8px 0 16px;
        width: 100%;
    }

    .share-input {
        flex: 1;
        padding: 10px 14px;
        border: 2px solid rgba(255,255,255,0.2);
        border-radius: var(--radius);
        background: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.7);
        font-family: 'Nunito Sans', sans-serif;
        font-size: 13px;
        outline: none;
        /* Prevent editing — it's read-only but styled to look intentional */
        cursor: default;
        /* Truncate long URLs gracefully */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-copy {
        padding: 10px 18px;
        border: none;
        border-radius: var(--radius);
        background: rgba(255,255,255,0.15);
        color: white;
        font-family: 'Nunito', sans-serif;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        border: 1px solid rgba(255,255,255,0.25);
        transition: background 0.15s ease, transform 0.12s ease;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

        .btn-copy:hover {
            background: rgba(255,255,255,0.22);
            transform: translateY(-1px);
        }

        .btn-copy.copied {
            background: rgba(38,137,12,0.4);
            border-color: var(--green);
            color: #7dff55;
        }

    /* ── Card header row ────────────────────────── */
    /* Used in the Players card to show title + count badge side by side */
    .card-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-right: 80px;
        width: 100%;
    }

        .card-header-row h2 {
            margin: 0;
        }

    /* Player count badge — shows number of joined players */
    .player-count {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 18px;
        background: rgba(255,255,255,0.15);
        border: 2px solid rgba(255,255,255,0.25);
        border-radius: 99px;
        padding: 2px 14px;
        color: var(--yellow-bright);
        min-width: 36px;
        text-align: center;
    }

    /* ── Player list ────────────────────────────── */
    .player-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .player-entry {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: var(--radius);
        padding: 11px 16px;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 16px;
        animation: slideIn 0.3s ease;
    }

    .player-icon {
        font-size: 20px;
    }

    .player-name {
        flex: 1;
    }

    /* ── Room code entry (join page) ────────────── */
    /* Used when player arrives without a room code in the URL */
    .room-code-entry {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    .room-code-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
        padding-left: 4px;
    }

    /* Larger, bolder input specifically for the room code */
    .room-code-input {
        width: 100%;
        padding: 14px 20px;
        border: 3px solid rgba(255,255,255,0.25);
        border-radius: var(--radius);
        background: rgba(255,255,255,0.1);
        color: var(--yellow-bright);
        font-family: 'Nunito', sans-serif;
        font-size: 28px;
        font-weight: 900;
        text-align: center;
        letter-spacing: 0.15em;
        outline: none;
        transition: border-color 0.2s ease, background 0.2s ease;
        text-transform: uppercase;
    }

        .room-code-input::placeholder {
            color: rgba(255,255,255,0.25);
            font-size: 18px;
            letter-spacing: 0.05em;
        }

        .room-code-input:focus {
            border-color: var(--yellow-bright);
            background: rgba(255,255,255,0.14);
        }

    /* ── Confirmation modal ─────────────────────── */
    /* The overlay covers the entire viewport.
    position: fixed means it stays in place even if the page scrolls.
    display: flex with center alignment positions the modal box
    in the middle of the screen. */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.75);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        z-index: 1000;
        /* z-index ensures the modal sits above everything else on the page */
    }

    .modal-box {
        background: #1e0a3c;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: var(--radius-lg);
        padding: 32px 28px;
        max-width: 360px;
        width: 100%;
        text-align: center;
        box-shadow: 0 24px 60px rgba(0,0,0,0.6);
        animation: modalPop 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }

    @keyframes modalPop {
        from {
            opacity: 0;
            transform: scale(0.85);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .modal-icon {
        font-size: 48px;
        margin-bottom: 12px;
    }

    .modal-title {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 24px;
        margin: 0 0 10px;
        color: white;
    }

    .modal-msg {
        font-size: 15px;
        color: rgba(255,255,255,0.6);
        line-height: 1.5;
        margin: 0 0 24px;
    }

    .modal-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .modal-btn {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: var(--radius);
        font-family: 'Nunito', sans-serif;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        transition: transform 0.12s ease, opacity 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

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

        .modal-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

    /* Red confirm button — deliberate danger colour */
    .modal-btn-danger {
        background: var(--red);
        color: white;
        box-shadow: 0 4px 0 var(--red-dark);
    }

        .modal-btn-danger:hover {
            opacity: 0.9;
        }

    /* Subtle cancel button */
    .modal-btn-cancel {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.7);
        border: 1px solid rgba(255,255,255,0.15);
    }

    .modal-btn-cancel:hover {
        background: rgba(255,255,255,0.16);
        color: white;
    }

    /* ── Collapsible content ────────────────────── */
    /* overflow: hidden is essential — it's what clips the content
    when max-height is reduced to 0 */
    #joinInfoContent,
    #playersContent {
        overflow: hidden;
        transition: max-height 0.4s ease;
        width: 100%;
    }

    #joinInfoContent {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* ── Collapse toggle button ─────────────────── */
    .btn-collapse {
        padding: 5px 14px;
        border: 1.5px solid rgba(255,255,255,0.2);
        border-radius: 99px;
        background: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.6);
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

    .btn-collapse:hover {
        background: rgba(255,255,255,0.15);
        color: white;
    }