/* BEERLEAGUE Players Online sidebar module */
.blpo-card {
    --blpo-bg: rgba(2, 20, 13, .98);
    --blpo-bg-2: rgba(7, 55, 35, .96);
    --blpo-green: #00dc9a;
    --blpo-orange: #ffb000;
    --blpo-red: #ff4040;
    --blpo-border: rgba(0, 220, 154, .36);
    --blpo-muted: rgba(248, 250, 252, .72);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--blpo-border);
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(0, 220, 154, .16), transparent 35%),
        linear-gradient(135deg, var(--blpo-bg), var(--blpo-bg-2));
    color: #fff !important;
    padding: 11px;
    box-shadow: 0 12px 28px rgba(0,0,0,.26);
    font-size: 12px;
    line-height: 1.25;
}
.blpo-card,
.blpo-card * { box-sizing: border-box; }
.blpo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.blpo-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--blpo-green);
    box-shadow: 0 0 14px rgba(0,220,154,.82);
}
.blpo-dot.is-empty,
.blpo-head.is-empty .blpo-dot {
    background: var(--blpo-red);
    box-shadow: 0 0 14px rgba(255,64,64,.85);
}
.blpo-dot.is-offline,
.blpo-head.is-offline .blpo-dot {
    background: rgba(148, 163, 184, .86);
    box-shadow: 0 0 10px rgba(148, 163, 184, .34);
}
.blpo-head div {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.blpo-head strong {
    color: #fff !important;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}
.blpo-head span {
    color: var(--blpo-muted) !important;
    font-size: 10px;
    font-weight: 800;
}
.blpo-head b {
    margin-left: auto;
    border: 1px solid rgba(255, 176, 0, .48);
    border-radius: 999px;
    background: rgba(255, 176, 0, .15);
    color: var(--blpo-orange) !important;
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
    padding: 5px 8px;
}
.blpo-empty {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    border: 1px dashed rgba(255, 176, 0, .38);
    border-radius: 10px;
    background: rgba(255, 176, 0, .07);
    padding: 10px;
    text-align: center;
}
.blpo-empty strong { color: #fff !important; font-size: 12px; }
.blpo-empty span { color: var(--blpo-muted) !important; font-size: 10px; line-height: 1.35; }
.blpo-list {
    --blpo-list-max-height: 420px;
    display: grid;
    gap: 7px;
    max-height: var(--blpo-list-max-height);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    margin-top: 10px;
    padding-right: 4px;
}
.blpo-list::-webkit-scrollbar { width: 8px; }
.blpo-list::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; }
.blpo-list::-webkit-scrollbar-thumb { background: rgba(0,220,154,.42); border-radius: 999px; }
.blpo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    padding: 8px;
}
.blpo-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.blpo-main strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff !important;
    font-size: 12px;
    font-weight: 950;
}
.blpo-main span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--blpo-green) !important;
    font-size: 10px;
    font-weight: 850;
}
.blpo-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--blpo-muted) !important;
    font-size: 10px;
}
.blpo-meta span {
    color: var(--blpo-orange) !important;
    font-weight: 900;
}
.blpo-meta em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--blpo-muted) !important;
    font-style: normal;
}
.blpo-connect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 232, 154, .55);
    border-radius: 8px;
    background: linear-gradient(180deg, #00b885, #007a5d);
    color: #fff !important;
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .05em;
    padding: 6px 8px;
    text-decoration: none !important;
    text-transform: uppercase;
}
.blpo-connect:hover,
.blpo-connect:focus { color: #fff !important; filter: brightness(1.12); text-decoration: none !important; }
.blpo-row.names-hidden .blpo-main strong { color: rgba(255,255,255,.78) !important; }
@media (max-width: 520px) {
    .blpo-row { grid-template-columns: 1fr; }
    .blpo-connect { justify-self: start; }
}


/* v1.0.1 - split in-game users and website logins, with Steam avatar/name fallback. */
.blpo-site-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.blpo-site-head {
    padding-bottom: 8px;
}
.blpo-site-head strong {
    font-size: 12px;
}
.blpo-site-list {
    --blpo-list-max-height: 260px;
}
.blpo-site-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
}
.blpo-site-row .blpo-main strong {
    font-size: 11.5px;
}
.blpo-steam-avatar {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0,220,154,.38);
    border-radius: 8px;
    object-fit: cover;
    background: rgba(0,0,0,.26);
    box-shadow: 0 0 12px rgba(0,220,154,.16);
}
.blpo-steam-avatar-fallback {
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    background: linear-gradient(135deg, rgba(0,122,85,.88), rgba(255,176,0,.28));
}

/* v1.0.3 - In-game player rows can reuse the Steam avatar style from Players Online.
   The game server query only returns names, so avatars appear when the module can match
   the current in-game name to BEERLEAGUE stats history or a linked logged-in website user. */
.blpo-ingame-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "avatar main connect"
        "avatar meta meta";
    align-items: center;
    gap: 7px 8px;
}
.blpo-ingame-avatar {
    grid-area: avatar;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    align-self: start;
}
.blpo-ingame-row .blpo-main {
    grid-area: main;
    min-width: 0;
}
.blpo-ingame-row .blpo-main strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.12;
}
.blpo-ingame-row .blpo-main span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.15;
}
.blpo-ingame-row .blpo-connect {
    grid-area: connect;
    justify-self: end;
    align-self: center;
}
.blpo-ingame-row .blpo-meta {
    grid-area: meta;
    margin-top: 0;
    min-width: 0;
    flex-wrap: wrap;
    line-height: 1.2;
}
.blpo-ingame-row .blpo-meta em {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.blpo-ingame-row.is-steam-matched .blpo-ingame-avatar {
    border-color: rgba(0, 220, 154, .62);
    box-shadow: 0 0 14px rgba(0, 220, 154, .24);
}
@media (max-width: 520px) {
    .blpo-ingame-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "avatar main"
            "avatar meta"
            "avatar connect";
    }
    .blpo-ingame-row .blpo-connect {
        justify-self: start;
    }
}

/* v1.0.16 - empty-section dots turn red, visible rows are configurable, and the module can auto-refresh in place. */

/* v1.0.46 - BEERLEAGUE-styled lobby invite/status integration. */
.blpo-invite-alert {
    display: grid;
    gap: 8px;
    margin-bottom: 11px;
    border: 1px solid rgba(255, 176, 0, .42);
    border-left: 3px solid rgba(255, 176, 0, .86);
    border-radius: 11px;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 176, 0, .14), transparent 42%),
        linear-gradient(135deg, rgba(5, 24, 19, .96), rgba(5, 38, 27, .90));
    box-shadow:
        0 0 0 1px rgba(0, 220, 154, .08) inset,
        0 12px 24px rgba(0,0,0,.22),
        0 0 20px rgba(255, 176, 0, .055);
    color: #f4fff9 !important;
    padding: 10px;
}
.blpo-invite-alert > strong {
    color: #ffca45 !important;
    font-size: 11px;
    font-weight: 1000;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .075em;
    text-shadow: 0 0 9px rgba(255, 176, 0, .18);
}
.blpo-invite-alert-row {
    display: grid;
    gap: 8px;
    color: rgba(232, 255, 246, .88) !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}
.blpo-invite-message {
    color: #ffca45 !important;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .015em;
    text-shadow: 0 0 8px rgba(255, 176, 0, .16);
}
.blpo-invite-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.blpo-invite-actions form,
.blpo-invite-form {
    margin: 0;
}
.blpo-accept,
.blpo-decline,
.blpo-invite-button {
    appearance: none;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    color: #f7fffb !important;
    cursor: pointer;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .05em;
    line-height: 1;
    padding: 7px 9px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.blpo-accept {
    background: linear-gradient(180deg, rgba(0, 181, 130, .92), rgba(0, 112, 86, .92));
    border-color: rgba(0, 220, 154, .46);
    box-shadow: 0 0 10px rgba(0, 220, 154, .10);
}
.blpo-decline {
    background: rgba(5, 12, 10, .48);
    border-color: rgba(255, 176, 0, .24);
    color: rgba(255, 239, 198, .92) !important;
}
.blpo-invite-button {
    background: linear-gradient(180deg, rgba(255, 176, 0, .92), rgba(175, 102, 0, .90));
    border-color: rgba(255, 176, 0, .48);
    padding: 6px 8px;
}
.blpo-accept:hover,
.blpo-decline:hover,
.blpo-invite-button:hover {
    filter: brightness(1.08);
}
.blpo-lobby-context {
    display: grid;
    gap: 3px;
    margin-bottom: 11px;
    border: 1px solid rgba(255, 176, 0, .35);
    border-radius: 10px;
    background: rgba(255, 176, 0, .09);
    padding: 8px 9px;
}
.blpo-lobby-context strong {
    color: #fff !important;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}
.blpo-lobby-context span {
    color: var(--blpo-muted) !important;
    font-size: 10px;
    font-weight: 800;
}
.blpo-site-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.blpo-site-actions {
    display: grid;
    justify-items: end;
    gap: 5px;
}
.blpo-mm-status,
.blpo-invited-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.82) !important;
    font-size: 9px;
    font-weight: 1000;
    line-height: 1;
    padding: 4px 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.blpo-mm-status.is-available {
    border-color: rgba(0, 220, 154, .44);
    background: rgba(0, 220, 154, .12);
    color: #a7ffdf !important;
}
.blpo-mm-status.is-queued {
    border-color: rgba(255, 176, 0, .44);
    background: rgba(255, 176, 0, .13);
    color: #ffd780 !important;
}
.blpo-mm-status.is-in_lobby,
.blpo-mm-status.is-ready_lobby {
    border-color: rgba(76, 154, 255, .44);
    background: rgba(76, 154, 255, .13);
    color: #cfe4ff !important;
}
.blpo-mm-status.is-in_match {
    border-color: rgba(255, 64, 64, .5);
    background: rgba(255, 64, 64, .15);
    color: #ffc7cf !important;
}
.blpo-invited-pill {
    border-color: rgba(255, 176, 0, .38);
    background: rgba(255, 176, 0, .12);
    color: #ffd780 !important;
}
@media (max-width: 520px) {
    .blpo-site-row { grid-template-columns: auto minmax(0, 1fr); }
    .blpo-site-actions { grid-column: 1 / -1; justify-items: start; }
}

/* v1.0.16 - BEERLEAGUE friends requests and friends-only list. */
.blpo-friend-alert {
    display: grid;
    gap: 8px;
    margin-bottom: 11px;
    border: 1px solid rgba(255, 176, 0, .72);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(128, 72, 0, .94), rgba(255, 176, 0, .22));
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.22);
    color: #fff !important;
    padding: 10px;
}
.blpo-friend-alert > strong {
    color: #fff !important;
    font-size: 13px;
    font-weight: 1000;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.blpo-friends-section .blpo-head b {
    border-color: rgba(0, 220, 154, .48);
    background: rgba(0, 220, 154, .14);
    color: #a7ffdf !important;
}
.blpo-friend-row {
    border-color: rgba(0, 220, 154, .2);
    background: rgba(0, 220, 154, .06);
}
.blpo-friend-button {
    appearance: none;
    border-radius: 8px;
    border: 1px solid rgba(0, 220, 154, .52);
    background: linear-gradient(180deg, #00c98f, #007a5d);
    color: #fff !important;
    cursor: pointer;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .05em;
    line-height: 1;
    padding: 6px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}
.blpo-friend-button:hover {
    filter: brightness(1.1);
}
.blpo-friend-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(0, 220, 154, .44);
    background: rgba(0, 220, 154, .12);
    color: #a7ffdf !important;
    font-size: 9px;
    font-weight: 1000;
    line-height: 1;
    padding: 4px 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.blpo-friend-pill.is-pending {
    border-color: rgba(255, 176, 0, .44);
    background: rgba(255, 176, 0, .12);
    color: #ffd780 !important;
}

/* v1.0.16 - De-duplicate friends from the general website player list. */
.blpo-site-section:not(.blpo-friends-section) .blpo-site-head strong::after {
    content: "";
}

/* v1.0.16 - Focus this module on website friends/other signed-in players; hide the old in-game block and add unfriend action styling. */
.blpo-unfriend-button {
    appearance: none;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88) !important;
    cursor: pointer;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .05em;
    line-height: 1;
    padding: 6px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}
.blpo-unfriend-button:hover {
    border-color: rgba(255,64,64,.5);
    background: rgba(255,64,64,.14);
    color: #ffd9de !important;
}

/* v1.0.16 - Compact action buttons and outgoing friend request cancellation. */
.blpo-site-row {
    grid-template-columns: auto minmax(0, 1fr) max-content;
    align-items: center;
}
.blpo-site-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    max-width: 112px;
}
.blpo-site-actions form {
    margin: 0 !important;
    line-height: 1;
}
.blpo-friend-button,
.blpo-invite-button,
.blpo-unfriend-button,
.blpo-cancel-friend-button {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    border-radius: 7px !important;
    font-size: 8px !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.blpo-friend-pill,
.blpo-mm-status,
.blpo-invited-pill {
    padding: 3px 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blpo-cancel-friend-button {
    appearance: none;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88) !important;
    cursor: pointer;
    font-weight: 1000;
    text-transform: uppercase;
}
.blpo-cancel-friend-button:hover {
    border-color: rgba(255,176,0,.55);
    background: rgba(255,176,0,.14);
    color: #ffd780 !important;
}
@media (max-width: 520px) {
    .blpo-site-actions {
        max-width: none;
        justify-content: flex-start;
    }
}

/* v1.0.16 - Expandable player tiles: status remains visible under the name; actions expand below the tile. */
.blpo-expandable-row {
    cursor: pointer;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
        "avatar main"
        "actions actions";
    align-items: center;
    outline: none;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.blpo-expandable-row:hover,
.blpo-expandable-row:focus-visible,
.blpo-expandable-row.is-expanded {
    border-color: rgba(255, 176, 0, .45) !important;
    background: rgba(255, 176, 0, .075) !important;
    box-shadow: 0 0 0 1px rgba(255,176,0,.12) inset;
}
.blpo-expandable-row::after {
    content: "▾";
    grid-area: main;
    justify-self: end;
    align-self: start;
    color: rgba(255,255,255,.46);
    font-size: 10px;
    line-height: 1;
    margin-top: 2px;
    transition: transform .16s ease, color .16s ease;
}
.blpo-expandable-row.is-expanded::after {
    transform: rotate(180deg);
    color: var(--blpo-orange) !important;
}
.blpo-expandable-row .blpo-steam-avatar {
    grid-area: avatar;
}
.blpo-expandable-row .blpo-main {
    grid-area: main;
    padding-right: 16px;
}
.blpo-expandable-row .blpo-main strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    line-height: 1.13;
}
.blpo-user-subline {
    color: var(--blpo-green) !important;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.1;
}
.blpo-expandable-row .blpo-mm-status {
    justify-self: start;
    width: fit-content;
    margin-top: 3px;
    max-width: 100% !important;
}
.blpo-expandable-row .blpo-site-actions {
    grid-area: actions;
    display: none !important;
    grid-template-columns: repeat(auto-fit, minmax(58px, max-content));
    justify-content: start;
    align-items: center;
    gap: 5px;
    max-width: none !important;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.09);
}
.blpo-expandable-row.is-expanded .blpo-site-actions {
    display: grid !important;
}
.blpo-expandable-row .blpo-site-actions:empty {
    display: none !important;
}
.blpo-expandable-row.is-expanded .blpo-site-actions:empty::before {
    content: "No actions available";
    color: var(--blpo-muted) !important;
    font-size: 10px;
    font-weight: 800;
}
.blpo-expandable-row.is-expanded .blpo-site-actions:empty {
    display: block !important;
}
.blpo-friend-button,
.blpo-invite-button,
.blpo-unfriend-button,
.blpo-cancel-friend-button {
    padding: 5px 7px !important;
}
.blpo-site-section:not(.blpo-friends-section) .blpo-site-head strong::after {
    content: "";
}
@media (max-width: 520px) {
    .blpo-expandable-row .blpo-site-actions {
        grid-template-columns: repeat(auto-fit, minmax(54px, max-content));
    }
}

/* v1.0.16 - Red pending friend-request state and remove lobby invite helper notice from layout. */
.blpo-friend-pill.is-pending {
    border-color: rgba(255, 64, 64, .62) !important;
    background: rgba(255, 64, 64, .16) !important;
    color: #ffd2d8 !important;
}
.blpo-lobby-context {
    display: none !important;
}

/* v1.0.16 - BEERCOMMS brand header, compact status line, and offline player search. */
.moduletable:has(.blpo-card) > h3,
.module:has(.blpo-card) > h3,
.module:has(.blpo-card) .module-title,
.card:has(.blpo-card) .card-header,
.mod_beerleague_players_online:has(.blpo-card) > h3 {
    border: 1px solid rgba(255, 176, 0, .44) !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at top left, rgba(255, 176, 0, .26), transparent 38%),
        linear-gradient(135deg, rgba(16, 42, 30, .98), rgba(6, 84, 55, .96)) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.45);
    box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 0 1px rgba(0, 220, 154, .14) inset;
}
.blpo-brand-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 176, 0, .46);
    border-radius: 12px;
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 176, 0, .28), transparent 36%),
        linear-gradient(135deg, rgba(3, 28, 18, .96), rgba(0, 100, 68, .86));
    padding: 10px;
    box-shadow: 0 9px 20px rgba(0,0,0,.22), 0 0 0 1px rgba(0, 220, 154, .12) inset;
}
.blpo-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255, 176, 0, .16);
    font-size: 18px;
    box-shadow: 0 0 18px rgba(255,176,0,.2);
}
.blpo-brand-title div {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.blpo-brand-title strong {
    color: #fff !important;
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}
.blpo-brand-title span:not(.blpo-brand-mark) {
    color: rgba(248,250,252,.78) !important;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.15;
}
.blpo-user-meta-line {
    display: flex !important;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.blpo-user-meta-line .blpo-user-subline {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1 !important;
}
.blpo-user-meta-line .blpo-mm-status {
    flex: 0 0 auto;
    width: auto !important;
    margin-top: 0 !important;
    max-width: 94px !important;
}
.blpo-mm-status.is-offline {
    border-color: rgba(148, 163, 184, .42) !important;
    background: rgba(148, 163, 184, .12) !important;
    color: #cbd5e1 !important;
}
.blpo-search-section {
    margin-top: 14px;
}
.blpo-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin: 10px 0 0 !important;
}
.blpo-search-form input[type="search"] {
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 9px !important;
    background: rgba(0,0,0,.22) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 750;
    line-height: 1 !important;
    padding: 8px 9px !important;
    outline: none;
}
.blpo-search-form input[type="search"]::placeholder {
    color: rgba(248,250,252,.48) !important;
}
.blpo-search-form input[type="search"]:focus {
    border-color: rgba(0, 220, 154, .62) !important;
    box-shadow: 0 0 0 2px rgba(0,220,154,.12);
}
.blpo-search-form button {
    appearance: none;
    border: 1px solid rgba(255, 176, 0, .55);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255,176,0,.96), rgba(194,113,0,.96));
    color: #180d00 !important;
    cursor: pointer;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .045em;
    line-height: 1;
    padding: 8px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}
.blpo-search-form button:hover,
.blpo-search-form button:focus {
    filter: brightness(1.08);
}
.blpo-search-list .blpo-site-row {
    border-color: rgba(148, 163, 184, .22);
    background: rgba(148, 163, 184, .055);
}
@media (max-width: 420px) {
    .blpo-search-form {
        grid-template-columns: 1fr;
    }
    .blpo-search-form button {
        justify-self: start;
    }
}

/* v1.0.16 - Animated neon BEERCOMMS sign treatment. */
.blpo-brand-title {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 62px;
    border-color: rgba(255, 176, 0, .72) !important;
    background:
        radial-gradient(circle at 16% 8%, rgba(255, 176, 0, .36), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(0, 220, 154, .24), transparent 38%),
        linear-gradient(180deg, rgba(3, 16, 11, .99), rgba(4, 38, 26, .97) 54%, rgba(1, 17, 12, .99)) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 0 0 2px rgba(0, 220, 154, .10) inset,
        0 0 22px rgba(255,176,0,.18),
        0 14px 30px rgba(0,0,0,.42) !important;
}
.blpo-brand-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -28%;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse at 35% 44%, rgba(255, 176, 0, .46), transparent 35%),
        radial-gradient(ellipse at 69% 48%, rgba(0, 220, 154, .42), transparent 40%);
    filter: blur(18px) saturate(1.4);
    animation: blpo-neon-halo-start 3.15s ease-out 1 both, blpo-neon-halo-pulse 5.2s ease-in-out 3.15s infinite;
}
.blpo-brand-title::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) -140% 0 / 72% 100% no-repeat,
        repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px);
    mix-blend-mode: screen;
    animation: blpo-neon-sweep 5.6s ease-in-out 3.3s infinite;
}
.blpo-brand-mark {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    border-color: rgba(255, 176, 0, .62) !important;
    background: rgba(20, 9, 0, .42) !important;
    color: #ffd36b !important;
    text-shadow:
        0 0 5px rgba(255, 176, 0, .95),
        0 0 14px rgba(255, 176, 0, .68),
        0 0 24px rgba(255, 176, 0, .36);
    box-shadow:
        0 0 12px rgba(255,176,0,.36),
        0 0 22px rgba(255,176,0,.18),
        0 0 0 1px rgba(255,255,255,.08) inset !important;
    animation: blpo-neon-bulb-start 3.15s ease-out 1 both, blpo-neon-bulb-pulse 5.2s ease-in-out 3.15s infinite;
}
.blpo-brand-copy {
    position: relative;
    z-index: 1;
    gap: 4px !important;
}
.blpo-neon-word {
    position: relative;
    display: inline-flex !important;
    align-items: baseline;
    gap: .08em;
    width: max-content;
    max-width: 100%;
    color: #fff8dc !important;
    font-family: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
    font-size: clamp(18px, 7.4vw, 28px) !important;
    font-style: italic;
    font-weight: 1000 !important;
    letter-spacing: .035em !important;
    line-height: .88 !important;
    transform: skewX(-5deg) translateZ(0);
    text-transform: uppercase;
    text-shadow:
        0 0 3px #fff7ce,
        0 0 8px rgba(255,176,0,.95),
        0 0 18px rgba(255,176,0,.72),
        0 0 34px rgba(0,220,154,.34),
        2px 3px 0 rgba(0,0,0,.62) !important;
    filter: brightness(.46) saturate(.72);
    animation: blpo-neon-word-start 3.15s ease-out 1 forwards, blpo-neon-word-pulse 5.2s ease-in-out 3.15s infinite;
    will-change: filter, text-shadow, opacity;
}
.blpo-neon-word::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    color: transparent;
    -webkit-text-stroke: 5px rgba(255, 176, 0, .16);
    filter: blur(8px);
    opacity: 0;
    animation: blpo-neon-stroke-start 3.15s ease-out 1 both, blpo-neon-stroke-pulse 5.2s ease-in-out 3.15s infinite;
}
.blpo-neon-word span:first-child {
    color: #fff2a7 !important;
}
.blpo-neon-word span:last-child {
    color: #b9ffe8 !important;
    text-shadow:
        0 0 3px #eafff7,
        0 0 9px rgba(0,220,154,.96),
        0 0 20px rgba(0,220,154,.74),
        0 0 38px rgba(255,176,0,.32),
        2px 3px 0 rgba(0,0,0,.62) !important;
}
.blpo-brand-subtitle {
    color: rgba(249,250,251,.84) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .045em;
    text-transform: uppercase;
    text-shadow: 0 0 9px rgba(0,220,154,.34);
}
@keyframes blpo-neon-word-start {
    0%, 8% {
        opacity: .42;
        filter: brightness(.34) saturate(.62);
        text-shadow: 2px 3px 0 rgba(0,0,0,.62) !important;
    }
    9% {
        opacity: .98;
        filter: brightness(1.35) saturate(1.25);
    }
    11% {
        opacity: .50;
        filter: brightness(.42) saturate(.70);
    }
    14% {
        opacity: 1;
        filter: brightness(1.55) saturate(1.38);
    }
    16.5% {
        opacity: .58;
        filter: brightness(.54) saturate(.82);
    }
    20% {
        opacity: 1;
        filter: brightness(1.72) saturate(1.48);
    }
    25%, 100% {
        opacity: 1;
        filter: brightness(1.14) saturate(1.12);
    }
}
@keyframes blpo-neon-word-pulse {
    0%, 100% { filter: brightness(1.10) saturate(1.10); }
    50% { filter: brightness(1.28) saturate(1.22); }
}
@keyframes blpo-neon-stroke-start {
    0%, 8%, 11%, 16.5% { opacity: .02; }
    9% { opacity: .45; }
    14% { opacity: .62; }
    20% { opacity: .74; }
    25%, 100% { opacity: .48; }
}
@keyframes blpo-neon-stroke-pulse {
    0%, 100% { opacity: .42; filter: blur(7px); }
    50% { opacity: .62; filter: blur(9px); }
}
@keyframes blpo-neon-halo-start {
    0%, 8%, 11%, 16.5% { opacity: .02; }
    9% { opacity: .28; }
    14% { opacity: .42; }
    20% { opacity: .58; }
    25%, 100% { opacity: .36; }
}
@keyframes blpo-neon-halo-pulse {
    0%, 100% { opacity: .32; filter: blur(17px) saturate(1.35); }
    50% { opacity: .52; filter: blur(21px) saturate(1.62); }
}
@keyframes blpo-neon-bulb-start {
    0%, 8%, 11%, 16.5% { opacity: .58; filter: brightness(.50) saturate(.75); }
    9%, 14%, 20% { opacity: 1; filter: brightness(1.42) saturate(1.35); }
    25%, 100% { opacity: 1; filter: brightness(1.10) saturate(1.10); }
}
@keyframes blpo-neon-bulb-pulse {
    0%, 100% { filter: brightness(1.05) saturate(1.08); }
    50% { filter: brightness(1.22) saturate(1.18); }
}
@keyframes blpo-neon-sweep {
    0%, 62% { background-position: -140% 0, 0 0; }
    82%, 100% { background-position: 190% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .blpo-brand-title::before,
    .blpo-brand-title::after,
    .blpo-brand-mark,
    .blpo-neon-word,
    .blpo-neon-word::before {
        animation: none !important;
    }
    .blpo-brand-title::before { opacity: .36; }
    .blpo-neon-word { opacity: 1; filter: brightness(1.13) saturate(1.12); }
    .blpo-neon-word::before { opacity: .46; }
}

/* v1.0.16 - Readable full-width [BEERCOMMS] sign and uncropped request actions. */
.blpo-brand-title {
    justify-content: center !important;
    min-height: 58px !important;
    padding: 10px 8px !important;
    text-align: center;
}
.blpo-brand-title .blpo-neon-word {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    color: #fff7cb !important;
    font-size: clamp(20px, 1.55rem, 26px) !important;
    font-style: italic;
    letter-spacing: .018em !important;
    line-height: .95 !important;
    text-align: center !important;
    transform: skewX(-4deg) translateZ(0) !important;
    white-space: nowrap !important;
    text-shadow:
        0 0 2px #fffbe7,
        0 0 7px rgba(255,176,0,.96),
        0 0 14px rgba(255,176,0,.72),
        0 0 25px rgba(0,220,154,.42),
        2px 3px 0 rgba(0,0,0,.70) !important;
}
.blpo-brand-title .blpo-neon-word span,
.blpo-brand-title .blpo-neon-word span:first-child,
.blpo-brand-title .blpo-neon-word span:last-child {
    color: #fff4b8 !important;
    text-shadow:
        0 0 2px #fffbe7,
        0 0 7px rgba(255,176,0,.96),
        0 0 15px rgba(255,176,0,.74),
        0 0 28px rgba(0,220,154,.46),
        2px 3px 0 rgba(0,0,0,.70) !important;
}
.blpo-brand-title .blpo-neon-word::before {
    -webkit-text-stroke: 4px rgba(255, 176, 0, .18) !important;
    filter: blur(7px) !important;
}
.blpo-search-head {
    gap: 0 !important;
}
.blpo-search-head .blpo-dot {
    display: none !important;
}
.blpo-wide-action {
    grid-column: 1 / -1;
    width: 100%;
}
.blpo-expandable-row .blpo-site-actions .blpo-wide-action {
    width: 100%;
    max-width: 100%;
}
.blpo-wide-action .blpo-cancel-friend-button,
.blpo-cancel-friend-button {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.blpo-wide-action .blpo-cancel-friend-button {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    min-width: 148px !important;
    padding: 7px 9px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center;
}
.blpo-friend-pill.is-pending {
    max-width: none !important;
    white-space: normal !important;
    line-height: 1.12 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
@media (max-width: 360px) {
    .blpo-brand-title .blpo-neon-word {
        font-size: 21px !important;
        letter-spacing: 0 !important;
    }
}

/* v1.0.16 - Simplify BEERCOMMS header into a readable sidebar sign and hide social-only sections from guests. */
.blpo-brand-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 176, 0, .74) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(32, 18, 2, .98), rgba(5, 35, 24, .98)) !important;
    box-shadow:
        0 0 0 1px rgba(0, 220, 154, .16) inset,
        0 0 12px rgba(255, 176, 0, .24),
        0 8px 18px rgba(0,0,0,.34) !important;
    text-align: center !important;
}
.blpo-brand-title::before,
.blpo-brand-title::after,
.blpo-brand-title .blpo-neon-word::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}
.blpo-brand-title .blpo-neon-word,
.blpo-brand-title .blpo-neon-word span,
.blpo-brand-title .blpo-neon-word span:first-child,
.blpo-brand-title .blpo-neon-word span:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #fff1a6 !important;
    font-family: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif !important;
    font-size: clamp(18px, 6vw, 23px) !important;
    font-style: normal !important;
    font-weight: 1000 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transform: none !important;
    filter: none !important;
    animation: blpo-sign-readable-pulse 4.8s ease-in-out infinite !important;
    text-shadow:
        0 0 2px rgba(255,255,255,.96),
        0 0 7px rgba(255,176,0,.92),
        0 0 15px rgba(255,176,0,.62),
        0 0 24px rgba(0,220,154,.32),
        1px 2px 0 rgba(0,0,0,.75) !important;
}
@keyframes blpo-sign-readable-pulse {
    0%, 100% {
        opacity: 1;
        text-shadow:
            0 0 2px rgba(255,255,255,.96),
            0 0 7px rgba(255,176,0,.90),
            0 0 15px rgba(255,176,0,.60),
            0 0 24px rgba(0,220,154,.30),
            1px 2px 0 rgba(0,0,0,.75);
    }
    50% {
        opacity: 1;
        text-shadow:
            0 0 3px rgba(255,255,255,1),
            0 0 9px rgba(255,176,0,1),
            0 0 19px rgba(255,176,0,.72),
            0 0 31px rgba(0,220,154,.42),
            1px 2px 0 rgba(0,0,0,.75);
    }
}
@media (prefers-reduced-motion: reduce) {
    .blpo-brand-title .blpo-neon-word,
    .blpo-brand-title .blpo-neon-word span {
        animation: none !important;
    }
}

/* v1.0.16 - Match BEERCOMMS to the site's neon/nightclub button feel and show offline friends greyed out. */
.blpo-brand-title {
    min-height: 48px !important;
    padding: 7px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 176, 0, .92), rgba(191, 91, 0, .96)) !important;
    box-shadow:
        0 2px 0 rgba(255, 236, 166, .55) inset,
        0 -3px 0 rgba(77, 28, 0, .5) inset,
        0 0 14px rgba(255, 176, 0, .55),
        0 0 28px rgba(0, 220, 154, .18),
        0 9px 20px rgba(0,0,0,.38) !important;
}
.blpo-brand-title .blpo-neon-word.nightclub-btn-regular,
.blpo-brand-title .blpo-neon-word,
.blpo-brand-title .blpo-neon-word span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 34px !important;
    border: 1px solid rgba(255, 244, 181, .62) !important;
    border-radius: 9px !important;
    background:
        linear-gradient(180deg, rgba(21, 10, 0, .94), rgba(64, 22, 0, .88)) !important;
    color: #fff3a7 !important;
    font-family: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif !important;
    font-size: clamp(19px, 6.7vw, 25px) !important;
    font-style: normal !important;
    font-weight: 1000 !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow:
        0 1px 0 #5c2500,
        0 0 3px rgba(255,255,255,.95),
        0 0 8px rgba(255, 176, 0, .96),
        0 0 18px rgba(255, 176, 0, .74),
        0 0 30px rgba(0, 220, 154, .34) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 0 13px rgba(255,176,0,.38) inset,
        0 0 16px rgba(255,176,0,.42) !important;
    animation: blpo-nightclub-sign-pulse 4.8s ease-in-out infinite !important;
}
@keyframes blpo-nightclub-sign-pulse {
    0%, 100% { filter: brightness(1) saturate(1.04); }
    50% { filter: brightness(1.12) saturate(1.12); }
}
.blpo-friends-section .blpo-head div,
.blpo-site-section:not(.blpo-search-section) .blpo-head div {
    gap: 0 !important;
}
.blpo-friends-section .blpo-head > div > span,
.blpo-site-section:not(.blpo-search-section) .blpo-head > div > span {
    display: none !important;
}
.blpo-friend-row.is-offline-friend,
.blpo-search-list .blpo-row.is-offline-search {
    border-color: rgba(148, 163, 184, .22) !important;
    background: rgba(148, 163, 184, .055) !important;
    opacity: .72;
}
.blpo-friend-row.is-offline-friend:hover,
.blpo-friend-row.is-offline-friend:focus-visible,
.blpo-friend-row.is-offline-friend.is-expanded,
.blpo-search-list .blpo-row.is-offline-search:hover,
.blpo-search-list .blpo-row.is-offline-search:focus-visible,
.blpo-search-list .blpo-row.is-offline-search.is-expanded {
    border-color: rgba(148, 163, 184, .34) !important;
    background: rgba(148, 163, 184, .08) !important;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .08) inset !important;
}
.blpo-friend-row.is-offline-friend .blpo-steam-avatar,
.blpo-friend-row.is-offline-friend .blpo-steam-avatar-fallback,
.blpo-search-list .blpo-row.is-offline-search .blpo-steam-avatar,
.blpo-search-list .blpo-row.is-offline-search .blpo-steam-avatar-fallback {
    filter: grayscale(1) brightness(.74);
    box-shadow: none !important;
    border-color: rgba(148, 163, 184, .34) !important;
}
.blpo-friend-row.is-offline-friend .blpo-main strong,
.blpo-search-list .blpo-row.is-offline-search .blpo-main strong {
    color: rgba(226, 232, 240, .76) !important;
}
.blpo-friend-row.is-offline-friend .blpo-user-subline,
.blpo-search-list .blpo-row.is-offline-search .blpo-user-subline {
    color: rgba(203, 213, 225, .72) !important;
}
.blpo-friend-row.is-offline-friend.is-expanded .blpo-site-actions,
.blpo-search-list .blpo-row.is-offline-search.is-expanded .blpo-site-actions {
    display: grid !important;
}

/* v1.0.25 - Text-only BEERCOMMS neon sign header with main-template style animated map background. */
.blpo-brand-title.blpo-beercomms-neon-title {
    --blpo-beercomms-orange: #ffb000;
    --blpo-beercomms-green: #00dc9a;
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3.9 / 1 !important;
    min-height: 72px !important;
    max-height: 106px !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 176, 0, .70) !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 176, 0, .34), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(0, 220, 154, .22), transparent 38%),
        linear-gradient(180deg, rgba(3, 13, 10, .99), rgba(3, 29, 21, .98) 55%, rgba(1, 9, 7, .99)) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 0 0 2px rgba(0, 220, 154, .10) inset,
        0 0 22px rgba(255, 176, 0, .30),
        0 0 34px rgba(0, 220, 154, .12),
        0 12px 28px rgba(0,0,0,.46) !important;
    text-align: center !important;
    transform: translateZ(0) !important;
}

.blpo-brand-title.blpo-beercomms-neon-title::before,
.blpo-brand-title.blpo-beercomms-neon-title::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    pointer-events: none !important;
}

.blpo-brand-title.blpo-beercomms-neon-title::before {
    z-index: 3 !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse at 46% 46%, rgba(0,0,0,.18), rgba(0,0,0,.34) 48%, rgba(0,0,0,.76) 100%),
        linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.24) 46%, rgba(0,0,0,.70));
    opacity: 1 !important;
}

.blpo-brand-title.blpo-beercomms-neon-title::after {
    z-index: 7 !important;
    inset: 0 !important;
    opacity: .34 !important;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent) -150% 0 / 72% 100% no-repeat,
        repeating-linear-gradient(180deg, rgba(255,255,255,.075) 0 1px, transparent 1px 5px);
    mix-blend-mode: screen;
    animation: blpo-beercomms-sign-sweep 5.8s ease-in-out 3.1s infinite !important;
}

.blpo-beercomms-bg-tiles {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    perspective: 740px !important;
    background: rgba(0,0,0,.58) !important;
}

.blpo-beercomms-bg-tiles::before,
.blpo-beercomms-bg-tiles::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.blpo-beercomms-bg-tiles::before {
    background:
        radial-gradient(circle at 50% 32%, rgba(0, 220, 154, .17), transparent 50%),
        radial-gradient(circle at 50% 58%, rgba(255, 176, 0, .13), transparent 47%),
        linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.10) 42%, rgba(0,0,0,.70));
}

.blpo-beercomms-bg-tiles::after {
    inset: -8% -3%;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0,220,154,.16) 45%, rgba(255,176,0,.16) 50%, rgba(0,220,154,.16) 55%, transparent 100%),
        radial-gradient(circle at 50% 28%, rgba(0, 220, 154, .24), transparent 60%);
    mix-blend-mode: screen;
    animation: blpo-beercomms-bg-wake 3.25s ease-out .18s 1 both;
}

.blpo-beercomms-tile {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background-image: url("../images/beerleague_header_maps_collage.jpg") !important;
    background-size: 800% 300% !important;
    background-position: var(--bgx) var(--bgy) !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    transform: rotateY(88deg) scale(.965);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    filter: brightness(.30) contrast(1.08) saturate(.92);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.42);
    animation:
        blpo-beercomms-tile-flip .82s cubic-bezier(.18,.84,.28,1) calc(.72s + var(--d)) 1 forwards,
        blpo-beercomms-tile-random-light var(--ls, 11000ms) ease-in-out var(--lg, 4200ms) infinite !important;
}

.blpo-beercomms-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 220, 154, .22), transparent 58%),
        radial-gradient(circle at 52% 54%, rgba(255, 176, 0, .14), transparent 45%);
    mix-blend-mode: screen;
    animation: blpo-beercomms-tile-soft-glow var(--ls, 11000ms) ease-in-out var(--lg, 4200ms) infinite;
}

.blpo-beercomms-neon-logo {
    position: absolute !important;
    z-index: 6 !important;
    inset: 8px 10px !important;
    display: block !important;
    border: 0 !important;
    background: url("../images/beercomms_neon_sign_textonly.png") center center / contain no-repeat !important;
    opacity: .48;
    filter: brightness(.42) saturate(.72) contrast(.92) drop-shadow(0 0 0 rgba(255,176,0,0));
    transform: translateZ(0) scale(.985);
    animation:
        blpo-beercomms-logo-start 3.35s ease-out 1 forwards,
        blpo-beercomms-logo-pulse 4.9s ease-in-out 3.35s infinite !important;
    will-change: filter, opacity, transform;
}

.blpo-beercomms-neon-logo::before,
.blpo-beercomms-neon-logo::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    pointer-events: none !important;
    background: url("../images/beercomms_neon_sign_textonly.png") center center / contain no-repeat !important;
}

.blpo-beercomms-neon-logo::before {
    z-index: -2 !important;
    inset: -14% -11% !important;
    opacity: 0;
    filter: blur(13px) brightness(1.22) saturate(1.55);
    mix-blend-mode: screen;
    animation:
        blpo-beercomms-halo-start 3.35s ease-out 1 both,
        blpo-beercomms-halo-pulse 4.9s ease-in-out 3.35s infinite !important;
}

.blpo-beercomms-neon-logo::after {
    z-index: -1 !important;
    inset: -4% -3% !important;
    opacity: 0;
    filter: blur(4px) brightness(1.32) saturate(1.32);
    mix-blend-mode: screen;
    animation:
        blpo-beercomms-edge-start 3.35s ease-out 1 both,
        blpo-beercomms-edge-pulse 4.9s ease-in-out 3.35s infinite !important;
}

.blpo-beercomms-text-fallback {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes blpo-beercomms-logo-start {
    0%, 8% {
        opacity: .44;
        transform: translateZ(0) scale(.982);
        filter: brightness(.34) saturate(.62) contrast(.90) drop-shadow(0 0 0 rgba(255,176,0,0));
    }
    9% {
        opacity: .94;
        filter: brightness(1.18) saturate(1.14) contrast(1.04)
            drop-shadow(0 0 7px rgba(255,176,0,.58))
            drop-shadow(0 0 16px rgba(0,220,154,.25));
    }
    11% {
        opacity: .50;
        filter: brightness(.40) saturate(.70) contrast(.92) drop-shadow(0 0 1px rgba(255,176,0,.10));
    }
    14% {
        opacity: .98;
        filter: brightness(1.34) saturate(1.24) contrast(1.06)
            drop-shadow(0 0 9px rgba(255,176,0,.74))
            drop-shadow(0 0 23px rgba(0,220,154,.34));
    }
    16.5% {
        opacity: .62;
        filter: brightness(.54) saturate(.82) contrast(.94) drop-shadow(0 0 2px rgba(255,176,0,.16));
    }
    20% {
        opacity: 1;
        transform: translateZ(0) scale(1);
        filter: brightness(1.45) saturate(1.34) contrast(1.08)
            drop-shadow(0 0 12px rgba(255,176,0,.88))
            drop-shadow(0 0 30px rgba(0,220,154,.44));
    }
    25%, 100% {
        opacity: 1;
        transform: translateZ(0) scale(1);
        filter: brightness(1.13) saturate(1.11) contrast(1.03)
            drop-shadow(0 0 7px rgba(255,176,0,.54))
            drop-shadow(0 0 18px rgba(0,220,154,.30))
            drop-shadow(0 10px 24px rgba(0,0,0,.72));
    }
}

@keyframes blpo-beercomms-logo-pulse {
    0%, 100% {
        filter: brightness(1.10) saturate(1.08) contrast(1.03)
            drop-shadow(0 0 7px rgba(255,176,0,.52))
            drop-shadow(0 0 18px rgba(0,220,154,.28))
            drop-shadow(0 10px 24px rgba(0,0,0,.72));
    }
    50% {
        filter: brightness(1.22) saturate(1.16) contrast(1.04)
            drop-shadow(0 0 10px rgba(255,176,0,.68))
            drop-shadow(0 0 26px rgba(0,220,154,.38))
            drop-shadow(0 13px 28px rgba(0,0,0,.76));
    }
}

@keyframes blpo-beercomms-halo-start {
    0%, 8%, 11%, 16.5% { opacity: .02; }
    9% { opacity: .20; }
    14% { opacity: .34; }
    20% { opacity: .54; }
    25%, 100% { opacity: .34; }
}

@keyframes blpo-beercomms-halo-pulse {
    0%, 100% { opacity: .28; filter: blur(12px) brightness(1.18) saturate(1.40); }
    50% { opacity: .46; filter: blur(15px) brightness(1.38) saturate(1.62); }
}

@keyframes blpo-beercomms-edge-start {
    0%, 8%, 11%, 16.5% { opacity: .02; }
    9% { opacity: .28; }
    14% { opacity: .44; }
    20% { opacity: .58; }
    25%, 100% { opacity: .32; }
}

@keyframes blpo-beercomms-edge-pulse {
    0%, 100% { opacity: .24; filter: blur(4px) brightness(1.18) saturate(1.24); }
    50% { opacity: .42; filter: blur(5px) brightness(1.34) saturate(1.40); }
}

@keyframes blpo-beercomms-tile-flip {
    0% {
        opacity: 0;
        transform: rotateY(88deg) scale(.965);
        filter: brightness(.16) contrast(1.08) saturate(.74);
    }
    42% {
        opacity: .70;
        transform: rotateY(-10deg) scale(1.015);
        filter: brightness(.82) contrast(1.18) saturate(1.18);
    }
    68% {
        opacity: .58;
        transform: rotateY(5deg) scale(1.004);
    }
    100% {
        opacity: .48;
        transform: rotateY(0deg) scale(1);
        filter: brightness(.60) contrast(1.10) saturate(1.08);
    }
}

@keyframes blpo-beercomms-tile-random-light {
    0%, 6%, 32%, 62%, 100% {
        opacity: .48;
        filter: brightness(.60) contrast(1.08) saturate(1.05);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.34);
    }
    11%, 41%, 72% {
        opacity: .56;
        filter: brightness(.78) contrast(1.09) saturate(1.10);
    }
    17%, 47%, 78% {
        opacity: calc(.54 + (var(--lp, .58) * .12));
        filter: brightness(1.12) contrast(1.10) saturate(1.18);
        box-shadow:
            inset 0 0 0 1px rgba(0, 220, 154, .18),
            inset 0 0 18px rgba(255, 176, 0, .08),
            0 0 16px rgba(0, 220, 154, .10);
    }
    23%, 53%, 86% {
        opacity: .52;
        filter: brightness(.72) contrast(1.08) saturate(1.08);
    }
}

@keyframes blpo-beercomms-tile-soft-glow {
    0%, 5%, 31%, 61%, 100% { opacity: 0; }
    11%, 41%, 71% { opacity: calc(var(--lp, .58) * .10); }
    17%, 47%, 77% { opacity: calc(var(--lp, .58) * .20); }
    23%, 53%, 85% { opacity: calc(var(--lp, .58) * .06); }
}

@keyframes blpo-beercomms-bg-wake {
    0%, 22% { opacity: 0; transform: translateX(-8%) skewX(-8deg); }
    33% { opacity: .72; }
    48% { opacity: .16; }
    62% { opacity: .50; }
    100% { opacity: .22; transform: translateX(8%) skewX(-8deg); }
}

@keyframes blpo-beercomms-sign-sweep {
    0%, 60% { background-position: -150% 0, 0 0; }
    82%, 100% { background-position: 190% 0, 0 0; }
}

@media (max-width: 420px) {
    .blpo-brand-title.blpo-beercomms-neon-title {
        min-height: 68px !important;
        max-height: 96px !important;
        border-radius: 13px !important;
    }
    .blpo-beercomms-neon-logo {
        inset: 7px 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blpo-brand-title.blpo-beercomms-neon-title::after,
    .blpo-beercomms-bg-tiles::after,
    .blpo-beercomms-tile,
    .blpo-beercomms-tile::after,
    .blpo-beercomms-neon-logo,
    .blpo-beercomms-neon-logo::before,
    .blpo-beercomms-neon-logo::after {
        animation: none !important;
    }
    .blpo-beercomms-tile {
        opacity: .46 !important;
        transform: none !important;
        filter: brightness(.62) contrast(1.08) saturate(1.05) !important;
    }
    .blpo-beercomms-neon-logo {
        opacity: 1 !important;
        filter: brightness(1.13) saturate(1.10) contrast(1.03)
            drop-shadow(0 0 7px rgba(255,176,0,.54))
            drop-shadow(0 0 18px rgba(0,220,154,.30)) !important;
    }
    .blpo-beercomms-neon-logo::before {
        opacity: .34 !important;
    }
}

/* v1.0.46 - small centered visibility toggle under BEERCOMMS header. */
.blpo-privacy-form {
    display: flex;
    justify-content: center;
    margin: 7px 0 10px;
}
.blpo-privacy-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    min-height: 24px;
    border: 1px solid rgba(0, 220, 154, .24);
    border-radius: 999px;
    background: rgba(0, 42, 31, .38);
    color: rgba(232, 255, 246, .88) !important;
    cursor: pointer;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .045em;
    line-height: 1;
    padding: 4px 9px 4px 6px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 10px rgba(0, 220, 154, .05);
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
    opacity: .88;
    transition: opacity .14s ease, border-color .14s ease, background .14s ease, filter .14s ease;
}
.blpo-privacy-toggle:hover,
.blpo-privacy-toggle:focus {
    opacity: 1;
    border-color: rgba(0, 220, 154, .42);
    background: rgba(0, 72, 52, .48);
    filter: brightness(1.05);
}
.blpo-privacy-toggle-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.blpo-privacy-toggle-track {
    position: relative;
    width: 24px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(0, 220, 154, .22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 4px rgba(0,0,0,.30);
}
.blpo-privacy-toggle-knob {
    position: absolute;
    top: 2px;
    left: 13px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(245,255,251,.94);
    box-shadow: 0 1px 5px rgba(0,0,0,.38);
    transition: left .16s ease, background .16s ease, box-shadow .16s ease;
}
.blpo-privacy-form.is-invisible .blpo-privacy-toggle {
    border-color: rgba(255, 176, 0, .26);
    background: rgba(52, 38, 10, .40);
    color: rgba(255, 246, 220, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 10px rgba(255, 176, 0, .05);
}
.blpo-privacy-form.is-invisible .blpo-privacy-toggle:hover,
.blpo-privacy-form.is-invisible .blpo-privacy-toggle:focus {
    border-color: rgba(255, 176, 0, .42);
    background: rgba(74, 52, 10, .48);
}
.blpo-privacy-form.is-invisible .blpo-privacy-toggle-track { background: rgba(255, 176, 0, .22); }
.blpo-privacy-form.is-invisible .blpo-privacy-toggle-knob { left: 2px; background: rgba(255,248,225,.96); }
@media (max-width: 420px) {
    .blpo-privacy-form { margin-top: 6px; margin-bottom: 9px; }
    .blpo-privacy-toggle { font-size: 8.5px; padding-right: 7px; }
}

/* v1.0.46 - BEERCOMMS options menu; visibility toggle lives under gear for future settings. */
.blpo-options-menu {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 6px 0 10px;
    z-index: 8;
}
.blpo-options-menu > summary,
.blpo-options-trigger {
    list-style: none;
}
.blpo-options-menu > summary::-webkit-details-marker { display: none; }
.blpo-options-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 27px;
    border: 1px solid rgba(0, 220, 154, .26);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 45, 34, .70), rgba(4, 25, 21, .88));
    color: rgba(232, 255, 246, .90);
    cursor: pointer;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .06em;
    line-height: 1;
    padding: 6px 10px;
    text-transform: uppercase;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(0, 220, 154, .08);
    transition: border-color .14s ease, background .14s ease, filter .14s ease, box-shadow .14s ease;
}
.blpo-options-trigger:hover,
.blpo-options-trigger:focus {
    border-color: rgba(0, 220, 154, .48);
    background: linear-gradient(135deg, rgba(0, 74, 54, .78), rgba(5, 33, 27, .92));
    filter: brightness(1.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(0, 220, 154, .14);
    outline: none;
}
.blpo-options-icon {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(0, 220, 154, .13);
    color: rgba(255, 176, 0, .92);
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 176, 0, .35);
}
.blpo-options-menu[open] .blpo-options-trigger {
    border-color: rgba(255, 176, 0, .45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 17px rgba(255, 176, 0, .12);
}
.blpo-options-panel {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: min(244px, calc(100vw - 56px));
    max-width: calc(100vw - 32px);
    transform: none;
    padding: 9px;
    border: 1px solid rgba(0, 220, 154, .22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0, 45, 34, .98), rgba(0, 25, 19, .98));
    box-shadow: 0 18px 38px rgba(0,0,0,.42), 0 0 22px rgba(0, 220, 154, .10), inset 0 1px 0 rgba(255,255,255,.06);
}
.blpo-options-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 19px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border-left: 1px solid rgba(0, 220, 154, .22);
    border-top: 1px solid rgba(0, 220, 154, .22);
    background: rgba(0, 45, 34, .98);
}
.blpo-options-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: rgba(0, 18, 14, .20);
}
.blpo-options-copy strong {
    display: block;
    color: rgba(255,255,255,.96);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.blpo-options-copy small {
    display: block;
    margin-top: 2px;
    color: rgba(210,238,228,.72);
    font-size: 9px;
    line-height: 1.25;
}
.blpo-options-panel .blpo-privacy-form {
    justify-content: stretch;
    margin: 0;
    width: 100%;
}
.blpo-options-panel .blpo-privacy-toggle {
    width: 100%;
    min-height: 24px;
    padding: 4px 8px 4px 6px;
    justify-content: flex-start;
}
@media (max-width: 420px) {
    .blpo-options-menu { margin-top: 6px; margin-bottom: 9px; }
    .blpo-options-panel { width: min(232px, calc(100vw - 42px)); }
    .blpo-options-text { display: none; }
    .blpo-options-trigger { padding: 6px 8px; }
}

/* v1.0.46 - BEERCOMMS chat MVP panel. */
.blpo-chat-launcher-row { display:flex; justify-content:center; gap:7px; margin: -2px 0 10px; flex-wrap:wrap; }
.blpo-chat-launcher, .blpo-chat-button { border:1px solid rgba(0,220,154,.24); border-radius:999px; background:rgba(0,42,31,.42); color:rgba(232,255,246,.90); cursor:pointer; font-size:9px; font-weight:950; letter-spacing:.045em; padding:5px 9px; text-transform:uppercase; position:relative; }
.blpo-chat-launcher:hover, .blpo-chat-button:hover { border-color:rgba(0,220,154,.48); background:rgba(0,72,52,.54); }
.blpo-chat-launcher b { position:absolute; top:-7px; right:-7px; min-width:16px; height:16px; border-radius:999px; background:#ffb000; color:#120b00; font-size:10px; line-height:16px; text-align:center; box-shadow:0 0 10px rgba(255,176,0,.35); }
.blpo-chat-launcher.is-unread { border-color:rgba(255,190,48,.82) !important; background:linear-gradient(135deg, rgba(0,102,72,.76), rgba(0,52,40,.86)) !important; box-shadow:0 0 0 1px rgba(255,176,0,.10), 0 0 18px rgba(255,176,0,.20), inset 0 1px 0 rgba(255,255,255,.12) !important; color:#fff !important; }
.blpo-chat-launcher.is-unread::after { content:""; position:absolute; inset:-4px; border-radius:13px; border:1px solid rgba(255,190,48,.36); pointer-events:none; animation:blpoUnreadPulse 1.8s ease-in-out infinite; }
@keyframes blpoUnreadPulse { 0%,100% { opacity:.35; box-shadow:0 0 0 rgba(255,176,0,0); } 50% { opacity:1; box-shadow:0 0 16px rgba(255,176,0,.26); } }
.blpo-chat-panel { margin: 0 0 12px; border:1px solid rgba(0,220,154,.20); border-radius:16px; background:linear-gradient(180deg,rgba(0,38,30,.96),rgba(0,21,17,.98)); box-shadow:0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; }
.blpo-chat-panel-head { display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; }
.blpo-chat-panel-head strong { font-size:11px; letter-spacing:.055em; text-transform:uppercase; }
.blpo-chat-panel-head button { border:0; background:rgba(255,255,255,.08); color:#fff; border-radius:999px; width:23px; height:23px; cursor:pointer; }
.blpo-chat-thread-list { display:flex; gap:6px; overflow-x:auto; padding:8px; border-bottom:1px solid rgba(255,255,255,.06); }
.blpo-chat-thread-button { min-width:132px; max-width:170px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.045); color:#fff; padding:7px; text-align:left; cursor:pointer; position:relative; }
.blpo-chat-thread-button strong, .blpo-chat-thread-button small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blpo-chat-thread-button small { color:rgba(214,238,229,.68); font-size:9px; margin-top:2px; }
.blpo-chat-thread-button b { position:absolute; top:5px; right:5px; background:#ffb000; color:#150d00; border-radius:999px; min-width:15px; height:15px; line-height:15px; text-align:center; font-size:9px; }
.blpo-chat-messages { max-height:210px; overflow:auto; padding:10px; display:flex; flex-direction:column; gap:7px; }
.blpo-chat-message { max-width:84%; padding:7px 9px; border-radius:13px; background:rgba(255,255,255,.075); color:#fff; align-self:flex-start; }
.blpo-chat-message.is-mine { align-self:flex-end; background:rgba(0,220,154,.16); border:1px solid rgba(0,220,154,.20); }
.blpo-chat-message strong { display:block; font-size:9px; color:rgba(255,176,0,.92); margin-bottom:2px; }
.blpo-chat-message span { display:block; font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.blpo-chat-compose { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; padding:9px; border-top:1px solid rgba(255,255,255,.07); }
.blpo-chat-compose input { min-width:0; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(0,0,0,.20); color:#fff; padding:7px 10px; font-size:11px; }
.blpo-chat-compose button { border:1px solid rgba(0,220,154,.32); border-radius:999px; background:rgba(0,72,52,.62); color:#fff; font-size:10px; font-weight:900; padding:7px 11px; text-transform:uppercase; }
.blpo-chat-status { display:block; min-height:14px; padding:0 10px 8px; color:rgba(255,176,0,.82); font-size:9px; }

/* v1.0.48 - message sound option uses the same switch treatment as visibility. */
.blpo-sound-options-row { margin-top: 8px; }
.blpo-sound-toggle {
    border-color: rgba(255, 176, 0, .26) !important;
    background: rgba(52, 38, 10, .40) !important;
    color: rgba(255, 246, 220, .88) !important;
}
.blpo-sound-toggle .blpo-privacy-toggle-track { background: rgba(255, 176, 0, .22); }
.blpo-sound-toggle .blpo-privacy-toggle-knob { left: 2px; background: rgba(255,248,225,.96); }
.blpo-sound-toggle:hover,
.blpo-sound-toggle:focus {
    border-color: rgba(255, 176, 0, .42) !important;
    background: rgba(74, 52, 10, .48) !important;
}
.blpo-sound-toggle.is-on {
    border-color: rgba(0,220,154,.42) !important;
    background: rgba(0,72,52,.48) !important;
    color: rgba(235,255,247,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 12px rgba(0,220,154,.12) !important;
}
.blpo-sound-toggle.is-on .blpo-privacy-toggle-track { background: rgba(0, 220, 154, .22); }
.blpo-sound-toggle.is-on .blpo-privacy-toggle-knob { left: 13px; background: rgba(245,255,251,.94); }
.blpo-chat-status { overflow-wrap: anywhere; }

/* v1.0.46 - keep expanded action tiles usable during auto-refresh. */
.blpo-row.is-expanded { scroll-margin: 12px; }
.blpo-unfriend-button { transition: filter .14s ease, transform .14s ease; }
.blpo-unfriend-button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* v1.0.46 - stable DM chat layout; lobby chat moved out of BEERCOMMS. */
.blpo-top-control-row { display:grid; grid-template-columns:auto; justify-content:center; margin: 6px 0 10px; }
.blpo-options-trigger-icononly { width: 34px; min-width: 34px; padding: 6px !important; }
.blpo-options-trigger-icononly .blpo-options-icon { margin: 0; }
.blpo-chat-home:empty { display:none; }
.blpo-row-chat-slot { display:none; grid-column: 1 / -1; width:100%; margin-top:9px; }
.blpo-row.is-expanded .blpo-row-chat-slot:not(:empty) { display:block; }
.blpo-row-chat-slot .blpo-chat-panel { margin: 2px 0 0; width:100%; }
.blpo-chat-panel { min-height: 318px; max-height: 318px; display:flex; flex-direction:column; }
.blpo-chat-panel[hidden] { display:none !important; }
.blpo-chat-thread-list { min-height: 58px; max-height: 58px; flex:0 0 auto; }
.blpo-chat-messages { min-height: 142px; max-height: 142px; flex:1 1 auto; }
.blpo-chat-compose { flex:0 0 auto; }
.blpo-chat-status { flex:0 0 auto; }
.blpo-chat-lobby-launcher { display:none !important; }
@media (max-width: 420px) { .blpo-chat-panel { min-height: 300px; max-height:300px; } .blpo-chat-messages { min-height:128px; max-height:128px; } }
.blpo-top-control-row { display:flex !important; align-items:center; justify-content:center; gap:8px; margin: 6px 0 10px; }
.blpo-top-control-row .blpo-options-menu { margin:0 !important; display:block; }
.blpo-top-control-row .blpo-chat-launcher { min-height: 34px; }

/* v1.0.46 - Steam identity/avatar in BEERCOMMS chat. */
.blpo-chat-thread-button { display:flex; align-items:center; gap:7px; }
.blpo-chat-thread-copy { min-width:0; display:block; }
.blpo-chat-avatar { width:28px; height:28px; border-radius:999px; object-fit:cover; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); }
.blpo-chat-avatar.is-fallback { display:inline-grid; place-items:center; color:#fff; font-weight:900; font-size:11px; }
.blpo-chat-message { display:flex; align-items:flex-start; gap:7px; }
.blpo-chat-message.is-mine { flex-direction: row-reverse; }
.blpo-chat-message-copy { min-width:0; }

/* v1.0.46 - Separate BEERCOMMS friends/list mode from chat mode. */
.blpo-card[data-blpo-view="chat"] > :not(.blpo-brand-title):not(.blpo-top-control-row):not(.blpo-chat-home) { display:none !important; }
.blpo-card[data-blpo-view="friends"] .blpo-chat-home { display:none !important; }
.blpo-card[data-blpo-view="chat"] .blpo-chat-home { display:block !important; }
.blpo-card[data-blpo-view="chat"] .blpo-friends-launcher { display:inline-flex !important; }
.blpo-card[data-blpo-view="friends"] .blpo-friends-launcher { opacity:.72; }
.blpo-friends-launcher { border:1px solid rgba(0,220,154,.22); background:rgba(0,32,26,.54); color:#dffdf6; border-radius:999px; padding:7px 10px; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:30px; cursor:pointer; font-size:11px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.blpo-friends-launcher:hover { border-color:rgba(0,220,154,.48); box-shadow:0 0 14px rgba(0,220,154,.16); }
.blpo-chat-panel.is-active-conversation .blpo-chat-thread-list { display:none !important; }
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel { margin: 8px 0 0; min-height: 360px; max-height: 360px; }
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages { min-height: 230px; max-height:230px; }
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-messages { min-height: 88px; max-height:88px; }
.blpo-row-chat-slot { display:none !important; }
@media (max-width: 420px) {
  .blpo-card[data-blpo-view="chat"] .blpo-chat-panel { min-height: 330px; max-height:330px; }
  .blpo-card[data-blpo-view="chat"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages { min-height: 200px; max-height:200px; }
}

/* v1.0.46 - make the BEERCOMMS Options gear read as a real control. */
.blpo-options-trigger.blpo-options-trigger-icononly {
    width: 38px !important;
    min-width: 38px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 190, 48, .58) !important;
    background: radial-gradient(circle at 50% 35%, rgba(255, 206, 74, .24), rgba(72, 45, 0, .46) 68%) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 0 18px rgba(255, 176, 0, .20), inset 0 1px 0 rgba(255,255,255,.14) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.blpo-options-trigger.blpo-options-trigger-icononly:hover,
.blpo-options-menu[open] .blpo-options-trigger.blpo-options-trigger-icononly {
    border-color: rgba(255, 214, 88, .88) !important;
    background: radial-gradient(circle at 50% 35%, rgba(255, 224, 110, .36), rgba(102, 65, 0, .58) 70%) !important;
    box-shadow: 0 0 0 1px rgba(255,176,0,.16), 0 0 24px rgba(255, 176, 0, .34), inset 0 1px 0 rgba(255,255,255,.20) !important;
    transform: translateY(-1px);
}
.blpo-options-trigger-icononly .blpo-options-icon {
    font-size: 21px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 6px rgba(255, 190, 48, .55));
}
.blpo-top-control-row { align-items: center !important; }

/* v1.0.47 - Chat inbox has full-width tiles plus Direct Messages/Game Lobby sections. */
.blpo-chat-panel:not(.is-active-conversation) .blpo-chat-messages,
.blpo-chat-panel:not(.is-active-conversation) .blpo-chat-compose { display:none !important; }
.blpo-chat-panel.is-active-conversation .blpo-group-chat-builder { display:none !important; }
.blpo-chat-panel:not(.is-active-conversation) .blpo-chat-thread-list {
    min-height: 238px !important;
    max-height: 238px !important;
    padding: 9px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.blpo-chat-thread-section { width: 100% !important; display:flex !important; flex-direction:column !important; gap:7px !important; min-width:0 !important; }
.blpo-chat-thread-section-title { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px; color:#fff; font-size:10px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 0 8px rgba(0,220,154,.30); }
.blpo-chat-thread-section-title em { min-width:17px; height:17px; line-height:17px; text-align:center; border-radius:999px; font-style:normal; color:#092318; background:rgba(255, 190, 48, .92); box-shadow:0 0 10px rgba(255,176,0,.24); }
.blpo-chat-inbox-thread {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    min-height: 54px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 12px !important;
    padding: 8px !important;
    border: 1px solid rgba(0, 220, 154, .28) !important;
    background: linear-gradient(90deg, rgba(0, 156, 110, .24), rgba(0, 66, 53, .42)) !important;
}
.blpo-chat-inbox-thread:hover { border-color: rgba(255, 190, 48, .55) !important; box-shadow: 0 0 18px rgba(0,220,154,.16) !important; }
.blpo-chat-inbox-thread .blpo-chat-thread-copy { flex: 1 1 auto; min-width:0; }
.blpo-chat-inbox-thread .blpo-chat-thread-copy strong { display:block; max-width: none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blpo-chat-inbox-thread .blpo-chat-thread-copy small { display:block; max-width: none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.8; }
.blpo-chat-thread-action { margin-left:auto; flex:0 0 auto; font-size: 9px; font-weight: 950; letter-spacing:.06em; text-transform:uppercase; color:#ffcf48; opacity:.95; }
.blpo-chat-section-empty { width:100%; box-sizing:border-box; border:1px dashed rgba(255,255,255,.13); border-radius:12px; padding:12px 10px; color:rgba(225,246,239,.66); font-size:10px; line-height:1.35; background:rgba(0,0,0,.14); }
.blpo-group-chat-builder { margin: 0 9px 9px; border:1px solid rgba(255,190,48,.28); border-radius:12px; background:rgba(0,24,19,.46); overflow:hidden; flex:0 0 auto; }
.blpo-group-chat-builder summary { cursor:pointer; list-style:none; padding:8px 10px; color:#ffcf48; font-size:10px; font-weight:950; letter-spacing:.075em; text-transform:uppercase; }
.blpo-group-chat-builder summary::-webkit-details-marker { display:none; }
.blpo-group-chat-builder form { display:flex; flex-direction:column; gap:8px; padding:0 10px 10px; }
.blpo-group-chat-builder small { color:rgba(225,246,239,.72); font-size:10px; line-height:1.3; }
.blpo-group-chat-choices { display:flex; flex-direction:column; gap:5px; max-height:86px; overflow:auto; padding-right:2px; }
.blpo-group-chat-choices label { display:flex; align-items:center; gap:7px; min-width:0; color:rgba(245,255,251,.92); font-size:10px; font-weight:800; }
.blpo-group-chat-choices span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blpo-group-chat-builder button { border:1px solid rgba(0,220,154,.34); border-radius:10px; background:rgba(0,92,66,.50); color:#fff; cursor:pointer; font-size:10px; font-weight:950; letter-spacing:.06em; padding:7px 9px; text-transform:uppercase; }
.blpo-group-chat-builder button:hover { border-color:rgba(255,190,48,.58); box-shadow:0 0 14px rgba(0,220,154,.14); }
.blpo-chat-inbox-empty { margin: 10px; min-height: 184px; border:1px dashed rgba(255,255,255,.14); border-radius: 12px; display:grid; place-items:center; text-align:center; padding: 18px; color:rgba(225,246,239,.74); font-size: 12px; line-height:1.35; }
.blpo-chat-inbox-empty[hidden] { display:none !important; }
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) { min-height: 318px; max-height: 318px; }
@media (max-width: 420px) {
  .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-thread-list { min-height: 220px !important; max-height: 220px !important; }
}

/* v1.0.54 - Let BEERCOMMS chat use the available viewport height before inner scrolling. */
.blpo-card[data-blpo-view="chat"] {
    min-height: 0 !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-home {
    min-height: 0 !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel {
    height: var(--blpo-chat-available-height, calc(100vh - 150px)) !important;
    height: var(--blpo-chat-available-height, calc(100dvh - 150px)) !important;
    min-height: 360px !important;
    max-height: calc(100vh - 92px) !important;
    max-height: calc(100dvh - 92px) !important;
    display: flex !important;
    flex-direction: column !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel-head,
.blpo-card[data-blpo-view="chat"] .blpo-chat-compose,
.blpo-card[data-blpo-view="chat"] .blpo-chat-status,
.blpo-card[data-blpo-view="chat"] .blpo-group-chat-builder {
    flex: 0 0 auto !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) {
    height: var(--blpo-chat-available-height, calc(100vh - 150px)) !important;
    height: var(--blpo-chat-available-height, calc(100dvh - 150px)) !important;
    min-height: 360px !important;
    max-height: calc(100vh - 92px) !important;
    max-height: calc(100dvh - 92px) !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-thread-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-inbox-empty {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
@media (max-width: 420px) {
    .blpo-card[data-blpo-view="chat"] .blpo-chat-panel,
    .blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) {
        height: var(--blpo-chat-available-height, calc(100vh - 132px)) !important;
        height: var(--blpo-chat-available-height, calc(100dvh - 132px)) !important;
        min-height: 300px !important;
        max-height: calc(100vh - 72px) !important;
        max-height: calc(100dvh - 72px) !important;
    }
}
@media (max-height: 520px) {
    .blpo-card[data-blpo-view="chat"] .blpo-chat-panel,
    .blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) {
        height: var(--blpo-chat-available-height, calc(100vh - 72px)) !important;
        height: var(--blpo-chat-available-height, calc(100dvh - 72px)) !important;
        min-height: 220px !important;
        max-height: calc(100vh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
    }
}

/* v1.0.55 - Make the outer BEERCOMMS card own the viewport-height chat layout. */
.blpo-card[data-blpo-view="chat"] {
    height: var(--blpo-chat-card-available-height, calc(100vh - 92px)) !important;
    height: var(--blpo-chat-card-available-height, calc(100dvh - 92px)) !important;
    min-height: 380px !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at top left, rgba(0, 220, 154, .16), transparent 35%),
        linear-gradient(135deg, var(--blpo-bg), var(--blpo-bg-2)) !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-brand-title,
.blpo-card[data-blpo-view="chat"] .blpo-top-control-row {
    flex: 0 0 auto !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-home {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel,
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages,
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-thread-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    scrollbar-gutter: stable;
}

@media (max-width: 420px) {
    .blpo-card[data-blpo-view="chat"] {
        height: var(--blpo-chat-card-available-height, calc(100vh - 72px)) !important;
        height: var(--blpo-chat-card-available-height, calc(100dvh - 72px)) !important;
        min-height: 320px !important;
    }
}
@media (max-height: 520px) {
    .blpo-card[data-blpo-view="chat"] {
        height: var(--blpo-chat-card-available-height, calc(100vh - 48px)) !important;
        height: var(--blpo-chat-card-available-height, calc(100dvh - 48px)) !important;
        min-height: 240px !important;
    }
}

/* v1.0.57 - Restore Joomla/sidebar wrapper framing and keep BEERCOMMS top-aligned. */
@supports selector(:has(*)) {
    .card:has(.blpo-card),
    .moduletable:has(.blpo-card),
    .module:has(.blpo-card),
    .sidebar:has(.blpo-card),
    .mod_beerleague_players_online:has(.blpo-card) {
        align-self: start !important;
        margin-top: 0 !important;
    }
    .card:has(.blpo-card[data-blpo-view="chat"]),
    .moduletable:has(.blpo-card[data-blpo-view="chat"]),
    .module:has(.blpo-card[data-blpo-view="chat"]),
    .sidebar:has(.blpo-card[data-blpo-view="chat"]),
    .mod_beerleague_players_online:has(.blpo-card[data-blpo-view="chat"]) {
        align-self: start !important;
        margin-top: 0 !important;
    }
}
.blpo-card[data-blpo-view="chat"] {
    margin-top: 0 !important;
}

/* v1.0.58 - Keep the BEERCOMMS wrapper dark/transparent in both Friends and Chat modes. */
@supports selector(:has(*)) {
    .card:has(.blpo-card),
    .moduletable:has(.blpo-card),
    .module:has(.blpo-card),
    .sidebar:has(.blpo-card),
    .mod_beerleague_players_online:has(.blpo-card) {
        align-self: start !important;
        margin-top: 0 !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    .card:has(.blpo-card) > .card-body,
    .card:has(.blpo-card) > .moduletable,
    .module:has(.blpo-card) > .module-body,
    .moduletable:has(.blpo-card) > .module-body,
    .sidebar:has(.blpo-card) > .module-body {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        padding-top: 0 !important;
    }
}

/* v1.0.59 - Cap open BEERCOMMS height to the Matchmaking/body content height. */
.blpo-card[data-blpo-view="chat"] {
    max-height: var(--blpo-chat-card-available-height, calc(100vh - 24px)) !important;
}

/* v1.0.75 - Align right sidebar container and flush BEERCOMMS inner module top spacing. */
.blpo-align-target,
.bl-sidebar-right.blpo-align-target,
aside.blpo-align-target[aria-label="Right Sidebar"],
.card.blpo-align-target,
.moduletable.blpo-align-target,
.module.blpo-align-target,
.sidebar.blpo-align-target,
.mod_beerleague_players_online.blpo-align-target,
.bl-sidebar-right.blpo-align-target:has(.blpo-card),
aside.blpo-align-target[aria-label="Right Sidebar"]:has(.blpo-card),
.card.blpo-align-target:has(.blpo-card),
.moduletable.blpo-align-target:has(.blpo-card),
.module.blpo-align-target:has(.blpo-card),
.sidebar.blpo-align-target:has(.blpo-card),
.mod_beerleague_players_online.blpo-align-target:has(.blpo-card) {
    margin-top: var(--blpo-body-top-align-shift, 0px) !important;
    transform: none !important;
    transition: none !important;
}
.blpo-card[data-blpo-module="1"] {
    transform: none !important;
    transition: none !important;
}
.blpo-card[data-blpo-module="1"]:not(.is-wrapper-aligned) {
    margin-top: var(--blpo-body-top-align-shift, 0px) !important;
}
.blpo-card[data-blpo-module="1"].is-wrapper-aligned {
    margin-top: 0 !important;
}
.bl-sidebar-right.blpo-align-target > .blpo-sidebar-module-flush,
.bl-sidebar-right.blpo-align-target > .moduletable:has(.blpo-card),
.bl-sidebar-right.blpo-align-target > .module:has(.blpo-card),
.bl-sidebar-right.blpo-align-target > .card:has(.blpo-card),
aside.blpo-align-target[aria-label="Right Sidebar"] > .blpo-sidebar-module-flush,
aside.blpo-align-target[aria-label="Right Sidebar"] > .moduletable:has(.blpo-card),
aside.blpo-align-target[aria-label="Right Sidebar"] > .module:has(.blpo-card),
aside.blpo-align-target[aria-label="Right Sidebar"] > .card:has(.blpo-card),
.blpo-sidebar-module-flush {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.blpo-sidebar-module-flush > h1,
.blpo-sidebar-module-flush > h2,
.blpo-sidebar-module-flush > h3,
.blpo-sidebar-module-flush > .module-title,
.blpo-sidebar-module-flush > .card-header {
    display: none !important;
}

/* v1.0.76 - Active lobby/team comms stay visible and quick-openable after refresh/re-entry. */
.blpo-active-comms-section {
    border: 1px solid rgba(255, 190, 48, .20) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    background: linear-gradient(180deg, rgba(255, 190, 48, .08), rgba(0, 44, 34, .24)) !important;
    box-shadow: inset 0 0 0 1px rgba(0,220,154,.06), 0 0 18px rgba(255,190,48,.08) !important;
}
.blpo-active-comms-section .blpo-chat-thread-section-title em {
    min-width: auto !important;
    padding: 0 7px !important;
    color: #102116 !important;
    background: linear-gradient(90deg, #ffcf48, #35f0ad) !important;
}
.blpo-active-comms-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
}
.blpo-active-comms-open {
    min-height: 50px !important;
    border-color: rgba(255,190,48,.38) !important;
    background: linear-gradient(90deg, rgba(92,65,0,.42), rgba(0,92,66,.38)) !important;
}
.blpo-active-comms-open .blpo-chat-thread-action { color:#35f0ad !important; }
@media (max-width: 420px) {
    .blpo-active-comms-actions { grid-template-columns: 1fr !important; }
}


/* v1.0.77 - Stable component-height chat cap: no min-height fight and no overshooting the component bottom. */
.blpo-card[data-blpo-view="chat"] {
    height: var(--blpo-chat-card-available-height, auto) !important;
    min-height: 0 !important;
    max-height: var(--blpo-chat-card-available-height, none) !important;
    overflow: hidden !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-home,
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel,
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) {
    min-height: 0 !important;
    max-height: none !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel {
    height: var(--blpo-chat-available-height, auto) !important;
}
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages,
.blpo-card[data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-thread-list {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* v1.0.78 - Article pages use the main article/body tile as BEERCOMMS' bottom cap. */

/* v1.0.79 - Split top alignment from article bottom cap. */


/* v1.0.80 - Restore safe Chat button behavior: Chat opens the inbox panel without blanking the whole module. */
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] > .blpo-invite-alert,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] > .blpo-friend-alert,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] > .blpo-site-section {
    display: block !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] > .blpo-chat-home {
    display: block !important;
    margin-bottom: 10px !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) {
    min-height: 260px !important;
    max-height: 420px !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-thread-list {
    min-height: 180px !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-messages,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) .blpo-chat-compose {
    display: none !important;
}


/* v1.0.81 - Manual Chat inbox is compact and content-height; only real conversations use the tall capped chat card. */
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] > :not(.blpo-brand-title):not(.blpo-top-control-row):not(.blpo-chat-home) {
    display: none !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] > .blpo-chat-home {
    display: block !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] .blpo-chat-panel,
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] .blpo-chat-panel:not(.is-active-conversation) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px 0 0 !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] .blpo-chat-thread-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(62vh, 560px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 4px !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] .blpo-chat-thread-section {
    margin-bottom: 8px !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"][data-blpo-view="chat"] .blpo-chat-thread-section:last-child {
    margin-bottom: 0 !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"] .blpo-top-control-row {
    align-items: center !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"] .blpo-options-trigger-icononly,
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"] .blpo-friends-launcher,
.blpo-card[data-blpo-module="1"][data-blpo-manual-chat-list="1"] .blpo-chat-launcher {
    align-self: center !important;
}


/* v1.0.82 - Keep Chat inbox list height stable while unread/thread polling refreshes content. */
.blpo-chat-thread-list[data-blpo-loading-initial="1"] {
    overflow: hidden !important;
}
.blpo-chat-thread-list {
    transition: none !important;
}


/* v1.0.83 - Restore BEERCOMMS top flush when the right sidebar wrapper sits correctly but the module content drops low. */
.bl-sidebar-right.blpo-align-sidebar-target,
aside.blpo-align-sidebar-target[aria-label="Right Sidebar"],
.sidebar-right.blpo-align-sidebar-target {
    padding-top: 0 !important;
}
.blpo-align-sidebar-target > .blpo-sidebar-module-flush,
.blpo-align-sidebar-target > .moduletable:has(.blpo-card),
.blpo-align-sidebar-target > .module:has(.blpo-card),
.blpo-align-sidebar-target > .card:has(.blpo-card),
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .card-body,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .module-body,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .moduletable,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .moduletable > .module-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.blpo-align-sidebar-target .blpo-sidebar-module-flush .blpo-card[data-blpo-module="1"] {
    margin-top: 0 !important;
}


/* v1.0.84 - Keep BEERCOMMS even with the row when the right sidebar itself is the alignment target.
   The JS no longer subtracts a 24px upward nudge for .blpo-align-sidebar-target; these selectors keep wrapper spacing neutral. */
.blpo-align-sidebar-target.blpo-align-target {
    padding-top: 0 !important;
}
.blpo-align-sidebar-target > .blpo-sidebar-module-flush:first-child {
    margin-top: 0 !important;
}


/* v1.0.85 - Group chat setup readability.
   Joomla/template form styles were making friend names nearly black inside the dark BEERCOMMS builder. */
.blpo-card .blpo-group-chat-builder {
    background: linear-gradient(180deg, rgba(2, 28, 22, .92), rgba(1, 16, 13, .96)) !important;
}
.blpo-card .blpo-group-chat-builder small {
    color: rgba(232, 255, 246, .86) !important;
}
.blpo-card .blpo-group-chat-choices {
    gap: 6px !important;
}
.blpo-card .blpo-group-chat-choices label {
    min-height: 27px;
    border: 1px solid rgba(0, 220, 154, .18);
    border-radius: 8px;
    background: rgba(0, 92, 66, .22);
    color: #f6fffb !important;
    cursor: pointer;
    padding: 4px 6px;
}
.blpo-card .blpo-group-chat-choices label:hover {
    border-color: rgba(255, 190, 48, .46);
    background: rgba(0, 122, 85, .34);
}
.blpo-card .blpo-group-chat-choices label span,
.blpo-card .blpo-group-chat-choices label strong,
.blpo-card .blpo-group-chat-choices label em {
    color: #f6fffb !important;
    opacity: 1 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .65);
}
.blpo-card .blpo-group-chat-choices input[type="checkbox"] {
    accent-color: #00dc9a;
    flex: 0 0 auto;
}
.blpo-card .blpo-group-chat-choices label:has(input[type="checkbox"]:checked) {
    border-color: rgba(0, 220, 154, .58);
    background: rgba(0, 142, 100, .42);
}

/* v1.0.87 - Sidebar clip guard.
   Some template/right-sidebar wrappers were capping BEERCOMMS to the neon header height,
   leaving the Friends/Chat controls half-hidden. Once JS identifies the sidebar/wrapper,
   force those containers to size to their content and allow the compact controls/options to render. */
.blpo-align-sidebar-target,
.blpo-align-sidebar-target > .blpo-sidebar-module-flush,
.blpo-align-sidebar-target > .moduletable:has(.blpo-card),
.blpo-align-sidebar-target > .module:has(.blpo-card),
.blpo-align-sidebar-target > .card:has(.blpo-card),
.blpo-align-sidebar-target .blpo-sidebar-module-flush,
.blpo-align-sidebar-target .moduletable:has(.blpo-card),
.blpo-align-sidebar-target .module:has(.blpo-card),
.blpo-align-sidebar-target .card:has(.blpo-card) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: flex-start !important;
}
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .card-body,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .module-body,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .moduletable,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .moduletable > .module-body,
.blpo-align-sidebar-target .card:has(.blpo-card) > .card-body,
.blpo-align-sidebar-target .module:has(.blpo-card) > .module-body,
.blpo-align-sidebar-target .moduletable:has(.blpo-card) > .module-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.blpo-align-sidebar-target .blpo-card[data-blpo-module="1"][data-blpo-view="friends"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.blpo-align-sidebar-target .blpo-card[data-blpo-module="1"][data-blpo-view="friends"] .blpo-brand-title.blpo-beercomms-neon-title,
.blpo-align-sidebar-target .blpo-card[data-blpo-module="1"][data-blpo-view="friends"] .blpo-top-control-row {
    flex: 0 0 auto !important;
}
.blpo-align-sidebar-target .blpo-card[data-blpo-module="1"][data-blpo-view="friends"] .blpo-options-panel {
    z-index: 50 !important;
}


/* v1.0.88 - BEERCOMMS duplicate render/send guard. */

/* v1.0.89 - Collapsible Players Online list. */
.blpo-players-online-section .blpo-collapse-head {
    width: 100%;
    appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.blpo-players-online-section .blpo-collapse-head:hover,
.blpo-players-online-section .blpo-collapse-head:focus-visible {
    background: rgba(255,255,255,.045);
    border-radius: 9px 9px 0 0;
    outline: none;
}
.blpo-collapse-caret {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid rgba(0,220,154,.32);
    border-radius: 999px;
    color: var(--blpo-green) !important;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.blpo-players-online-section.is-collapsed .blpo-collapse-caret {
    transform: rotate(-90deg);
    border-color: rgba(255,176,0,.44);
    background: rgba(255,176,0,.10);
    color: var(--blpo-orange) !important;
}
.blpo-players-online-section.is-collapsed .blpo-collapse-head {
    border-bottom-color: transparent;
    padding-bottom: 0;
}
.blpo-players-online-section.is-collapsed .blpo-collapsible-body {
    display: none !important;
}

/* v1.0.91 - Make BEERCOMMS group-chat setup usable inside the narrow sidebar. */
.blpo-card[data-blpo-module="1"] .blpo-chat-panel.is-group-builder-open:not(.is-active-conversation) {
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel.is-group-builder-open:not(.is-active-conversation) .blpo-chat-thread-list {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: min(32vh, 220px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel.is-group-builder-open:not(.is-active-conversation) .blpo-chat-inbox-empty {
    display: none !important;
}
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] {
    margin: 8px 0 10px !important;
    border-color: rgba(255, 190, 48, .52) !important;
    background: linear-gradient(180deg, rgba(5, 41, 32, .98), rgba(1, 18, 15, .98)) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04) !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] summary {
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(255, 190, 48, .08);
}
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] form {
    padding: 10px !important;
    gap: 9px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] .blpo-group-chat-choices {
    max-height: min(40vh, 260px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 4px 2px 1px !important;
    scrollbar-gutter: stable;
}
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] .blpo-group-chat-choices label {
    width: 100% !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] .blpo-group-chat-choices span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
}
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] button[type="submit"],
.blpo-card[data-blpo-module="1"] .blpo-group-chat-builder[open] button:not([type]) {
    width: 100% !important;
    min-height: 34px !important;
}

/* v1.0.92 - Tighten BEERCOMMS top alignment beside active lobby/matchmaking cards. */
.blpo-align-sidebar-target,
.blpo-align-sidebar-target > .blpo-sidebar-module-flush,
.blpo-align-sidebar-target > .moduletable:has(.blpo-card),
.blpo-align-sidebar-target > .module:has(.blpo-card),
.blpo-align-sidebar-target > .card:has(.blpo-card),
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .card-body,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .module-body,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .moduletable,
.blpo-align-sidebar-target .blpo-sidebar-module-flush > .moduletable > .module-body {
    padding-top: 0 !important;
}
.blpo-align-sidebar-target .blpo-card[data-blpo-module="1"] {
    margin-top: 0 !important;
}

/* v1.0.93 - Prevent Current Game Lobby quick-open shortcuts from crushing/overlapping under the real lobby thread. */
.blpo-active-comms-section .blpo-chat-inbox-thread {
    min-width: 0 !important;
}
.blpo-active-comms-actions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}
.blpo-active-comms-actions .blpo-active-comms-open {
    min-height: 46px !important;
    padding: 7px 8px !important;
}
.blpo-active-comms-actions .blpo-chat-thread-copy strong,
.blpo-active-comms-actions .blpo-chat-thread-copy small {
    max-width: 100% !important;
}

/* v1.0.94 - Keep opened group/DM conversation panels expanded; do not let inbox/manual-list rules collapse the thread body. */
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"],
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] {
    min-height: 360px !important;
    overflow: hidden !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] > .blpo-chat-home,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] > .blpo-chat-home {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    min-height: 320px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-thread-list,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-thread-list,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-group-chat-builder,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-group-chat-builder,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-inbox-empty,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-inbox-empty {
    display: none !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-messages {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 220px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-compose,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-compose {
    display: grid !important;
    flex: 0 0 auto !important;
}

/* v1.0.95 - Group chat create/leave polish: keep new groups in real conversation mode and expose a leave action. */
.blpo-card[data-blpo-module="1"] .blpo-chat-panel-head {
    gap: 8px;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-leave-group {
    width: auto !important;
    min-width: 0 !important;
    height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255, 190, 48, .42) !important;
    border-radius: 999px !important;
    background: rgba(92, 52, 0, .42) !important;
    color: #ffcf48 !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .05em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-leave-group:hover,
.blpo-card[data-blpo-module="1"] .blpo-chat-leave-group:focus {
    border-color: rgba(255, 190, 48, .76) !important;
    box-shadow: 0 0 12px rgba(255, 190, 48, .18) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-leave-group[hidden] { display: none !important; }
.blpo-card[data-blpo-module="1"] .blpo-chat-message-empty {
    margin: auto;
    padding: 10px 12px;
    max-width: 92%;
    border: 1px dashed rgba(0, 220, 154, .28);
    border-radius: 12px;
    color: rgba(225, 246, 239, .72);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] .blpo-chat-panel.is-active-conversation .blpo-chat-compose {
    display: grid !important;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 25, 20, .92), rgba(0, 16, 13, .98));
    z-index: 2;
}

/* v1.0.96 - Group conversations must keep the message composer visible in narrow/sidebar layouts. */
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"],
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"][data-blpo-conversation="1"] {
    min-height: 0 !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] > .blpo-chat-home {
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] .blpo-chat-panel.is-active-conversation {
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages {
    display: flex !important;
    flex: 0 1 auto !important;
    min-height: 118px !important;
    max-height: 168px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] .blpo-chat-panel.is-active-conversation .blpo-chat-message-empty {
    margin: auto !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] .blpo-chat-panel.is-active-conversation .blpo-chat-compose {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin: 0 !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] .blpo-chat-panel.is-active-conversation .blpo-chat-compose input {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-type="group"] .blpo-chat-panel.is-active-conversation .blpo-chat-status {
    display: block !important;
    flex: 0 0 auto !important;
}

/* v1.0.97 - BEERCOMMS lobby activity system notices. */
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system {
    align-self: center !important;
    max-width: 96% !important;
    padding: 6px 9px !important;
    border: 1px solid rgba(255, 190, 48, .22) !important;
    border-radius: 999px !important;
    background: rgba(60, 43, 8, .34) !important;
    color: rgba(255, 244, 214, .92) !important;
    text-align: center !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system .blpo-chat-message-copy {
    min-width: 0 !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system strong {
    display: none !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system span {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    line-height: 1.25 !important;
}


/* v1.0.98 - Show Steam identity/avatar on BEERCOMMS lobby activity notices. */
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-align: left !important;
    border-radius: 14px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system .blpo-chat-avatar {
    display: inline-flex !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(255, 207, 72, .42) !important;
    box-shadow: 0 0 10px rgba(255, 190, 48, .16) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system .blpo-chat-avatar.is-fallback {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 220, 154, .20) !important;
    color: #f8fffb !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system strong {
    display: block !important;
    margin: 0 0 1px !important;
    color: #ffcf48 !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system span {
    display: block !important;
}


/* v1.0.99 - Lobby-only Spectators section at the bottom of BEERCOMMS. */
.blpo-lobby-spectators-section {
    margin-top: 12px !important;
    border: 1px solid rgba(203, 213, 225, .24) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(148,163,184,.12), rgba(15,23,42,.62)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.22) !important;
}
.blpo-site-head.is-spectators {
    border-color: rgba(203, 213, 225, .32) !important;
    background: rgba(15,23,42,.72) !important;
}
.blpo-dot.is-spectator,
.blpo-steam-avatar-fallback.is-spectator {
    background: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 0 14px rgba(203,213,225,.28) !important;
}
.blpo-lobby-spectators-list {
    max-height: none !important;
    padding: 8px !important;
}
.blpo-lobby-spectator-row {
    border-color: rgba(203, 213, 225, .20) !important;
    background: rgba(148, 163, 184, .10) !important;
}
.blpo-mm-status.is-spectator {
    border-color: rgba(203,213,225,.34) !important;
    background: rgba(203,213,225,.14) !important;
    color: #e2e8f0 !important;
}


/* v1.0.100 - Cleaner BEERCOMMS options icon and square Steam-style avatars. */
.blpo-card[data-blpo-module="1"] .blpo-options-trigger.blpo-options-trigger-icononly {
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 1px solid rgba(0, 220, 154, .34) !important;
    background: linear-gradient(135deg, rgba(0, 74, 54, .76), rgba(4, 29, 24, .94)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 14px rgba(0, 220, 154, .12) !important;
    color: #eafff7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transform: none !important;
}
.blpo-card[data-blpo-module="1"] .blpo-options-trigger.blpo-options-trigger-icononly:hover,
.blpo-card[data-blpo-module="1"] .blpo-options-trigger.blpo-options-trigger-icononly:focus,
.blpo-card[data-blpo-module="1"] .blpo-options-menu[open] .blpo-options-trigger.blpo-options-trigger-icononly {
    border-color: rgba(255, 190, 48, .72) !important;
    background: linear-gradient(135deg, rgba(0, 90, 66, .86), rgba(70, 45, 0, .76)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 18px rgba(255, 176, 0, .18) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-options-trigger-icononly .blpo-options-icon {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffcf4a !important;
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: .72 !important;
    margin: -1px 0 0 !important;
    text-shadow: 0 0 8px rgba(255, 190, 48, .42) !important;
    filter: none !important;
}
.blpo-card[data-blpo-module="1"] .blpo-steam-avatar,
.blpo-card[data-blpo-module="1"] .blpo-steam-avatar-fallback,
.blpo-card[data-blpo-module="1"] .blpo-ingame-avatar,
.blpo-card[data-blpo-module="1"] .blpo-chat-avatar,
.blpo-card[data-blpo-module="1"] .blpo-chat-avatar.is-fallback,
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system .blpo-chat-avatar,
.blpo-card[data-blpo-module="1"] .blpo-chat-message.is-system .blpo-chat-avatar.is-fallback {
    border-radius: 7px !important;
}


/* v1.0.101 - Spectators pinned to bottom with a properly aligned eye icon. */
.blpo-card[data-blpo-module="1"] {
    display: flex !important;
    flex-direction: column !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectators-section {
    order: 900 !important;
    margin-top: 14px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
.blpo-card[data-blpo-module="1"] .blpo-site-head.is-spectators {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border-bottom: 1px solid rgba(203, 213, 225, .16) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-spectator-eye {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(203, 213, 225, .34) !important;
    border-radius: 8px !important;
    background: rgba(203, 213, 225, .12) !important;
    color: #e2e8f0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 12px rgba(203,213,225,.14) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-site-head.is-spectators > div {
    justify-self: start !important;
    text-align: left !important;
}
.blpo-card[data-blpo-module="1"] .blpo-site-head.is-spectators > b {
    justify-self: end !important;
    min-width: 24px !important;
    text-align: center !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectators-list {
    padding: 8px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
}


/* v1.0.102 - Spectators live at the bottom of the BEERCOMMS Lobby Chat panel. */
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators {
    display: none !important;
    flex: 0 0 auto !important;
    margin: 8px !important;
    max-height: 118px !important;
    overflow: auto !important;
}
.blpo-card[data-blpo-module="1"][data-chat-thread-type="lobby"] .blpo-chat-panel.is-active-conversation .blpo-chat-lobby-spectators {
    display: block !important;
}
.blpo-card[data-blpo-module="1"][data-chat-thread-type="lobby"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages {
    min-height: 142px !important;
    max-height: 142px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-site-head.is-spectators {
    padding: 7px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-lobby-spectators-list {
    padding: 7px !important;
    display: grid !important;
    gap: 6px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-lobby-spectator-row {
    min-height: 36px !important;
    padding: 6px !important;
}


/* v1.0.103 - Lobby Chat spectators show up to 5 users, then scroll. */
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators {
    max-height: none !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-lobby-spectators-list {
    max-height: 224px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(203, 213, 225, .42) rgba(15, 23, 42, .42) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-lobby-spectators-list::-webkit-scrollbar {
    width: 7px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-lobby-spectators-list::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(203, 213, 225, .42) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-lobby-spectator-row {
    min-height: 36px !important;
}

/* v1.0.104 - Chromium active-conversation composer guard.
   Chrome/Edge can honor older flex min-height rules before shrinking the message pane,
   which clips the composer/input below the visible sidebar. Keep the open conversation
   content-height, make only the message list scroll, and keep the send form visible for
   DMs, group chats, lobby chat, and team chat. */
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id],
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] > .blpo-chat-home,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] > .blpo-chat-home {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-messages,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages {
    display: flex !important;
    flex: 0 1 auto !important;
    min-height: 120px !important;
    max-height: min(42vh, 260px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-compose,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-compose {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 6 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-compose input,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-compose input {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
}
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-status,
.blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-status {
    display: block !important;
    flex: 0 0 auto !important;
}
@media (max-height: 620px) {
    .blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-chat-thread-id] .blpo-chat-panel.is-active-conversation .blpo-chat-messages,
    .blpo-card[data-blpo-module="1"][data-blpo-view="chat"][data-blpo-conversation="1"] .blpo-chat-panel.is-active-conversation .blpo-chat-messages {
        min-height: 96px !important;
        max-height: 34vh !important;
    }
}



/* v1.0.110 - Move BEERCOMMS options gear to the right of Chat. */
.blpo-top-control-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) 36px !important;
    align-items: center !important;
    gap: 8px !important;
}
.blpo-top-control-row .blpo-friends-launcher,
.blpo-top-control-row .blpo-chat-launcher {
    width: 100% !important;
    min-width: 0 !important;
}
.blpo-top-control-row .blpo-options-menu {
    order: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    margin: 0 !important;
}
.blpo-top-control-row .blpo-options-trigger.blpo-options-trigger-icononly {
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
}
.blpo-top-control-row .blpo-options-icon {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
}
.blpo-top-control-row .blpo-options-panel {
    left: auto !important;
    right: 0 !important;
}
.blpo-top-control-row .blpo-options-panel::before {
    left: auto !important;
    right: 13px !important;
}
@media (max-width: 360px) {
    .blpo-top-control-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px !important;
        gap: 6px !important;
    }
    .blpo-top-control-row .blpo-options-menu,
    .blpo-top-control-row .blpo-options-trigger.blpo-options-trigger-icononly {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
    }
}


/* v1.0.111 - Keep the options panel clickable while auto-refresh defers DOM swaps. */
.blpo-card[data-blpo-options-open="1"] .blpo-options-menu[open] {
    z-index: 30 !important;
}
.blpo-card[data-blpo-options-open="1"] .blpo-options-panel {
    pointer-events: auto !important;
}

/* v1.0.113 - BEERCOMMS spectator kick controls for lobby captains/admins. */
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-site-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-kick-form {
    display: inline-flex;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row:hover .blpo-lobby-kick-form,
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row:focus-within .blpo-lobby-kick-form {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-kick-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(255, 91, 91, .64);
    border-radius: 6px;
    background: rgba(58, 11, 17, .86);
    color: #ffd5d5;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-kick-button:hover,
.blpo-card[data-blpo-module="1"] .blpo-lobby-kick-button:focus-visible {
    border-color: rgba(255, 126, 126, .9);
    background: rgba(118, 21, 29, .96);
    color: #fff4f4;
}
@media (hover: none), (pointer: coarse) {
    .blpo-card[data-blpo-module="1"] .blpo-lobby-kick-form {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
}

/* v1.0.114 - keep spectator actions compact so Kick does not stretch the lobby card. */
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row {
    position: relative !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 52px !important;
    align-items: center !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-main {
    min-width: 0 !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-main strong,
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-user-meta-line {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-site-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    align-items: center !important;
    gap: 4px !important;
    width: 58px !important;
    max-width: 58px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-chat-button,
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-lobby-kick-button {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-lobby-kick-form {
    width: 58px !important;
    max-width: 58px !important;
    justify-content: stretch !important;
}
.blpo-card[data-blpo-module="1"] .blpo-chat-panel .blpo-chat-lobby-spectators .blpo-lobby-spectator-row {
    min-height: 52px !important;
    padding: 6px !important;
}

/* v1.0.116 - Spectator cards use hover-revealed Kick only; Chat stays off this row. */
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-site-actions {
    width: 58px !important;
    max-width: 58px !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row .blpo-lobby-kick-form {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(4px) !important;
}
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row:hover .blpo-lobby-kick-form,
.blpo-card[data-blpo-module="1"] .blpo-lobby-spectator-row:focus-within .blpo-lobby-kick-form {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}